#voiceSearch{width:65%; float:left; position:relative;}

form fieldset{border:0px solid; float: left; position: relative; width: 83%; padding-top:0px; padding-right:0px; margin-right:0px;}

#hsearchsite{
    padding: 10px;
    width: 100%;
    padding: 8px 10px 10px 8px!important;           
    border: 1px solid #d1ccd7;
    border-right:0px solid;
    border-radius:.25em 0 0 .25em;
}

#voice-trigger{
    position: absolute;
    right: 11px;
    top: 3px;
    cursor: pointer;
    padding: 4px;            
    border-radius: 15px;
     /*background: #ededed;
   box-shadow: 1px 1px 1px #ddd;*/
}

#voice-trigger svg{
    fill: #626262;
}

#voice-trigger.active svg{
    -webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(1.0, 1.0); fill: 1.0;
    }
    50% {
        -webkit-transform: scale(1.0,1.0); opacity: 0.5;
    }
    100% {
        -webkit-transform: scale(1.0, 1.0); opacity: 1.0;
    }
} 

#mic:hover{opacity:0.7;}
.search-btn {background: url(/quiz-school/img/layout/search-icon.png) center #1888cc no-repeat;}

.search-btn {width:45px; height:35px; line-height:32px; border:none;}  

.listening {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 100px;
  background: linear-gradient(to bottom, #b5d3e4, #b5d3e4);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.2);
  animation: beat 1.5s ease 0s infinite;
  display: none; 
  float: left;
  position: absolute;
  top: 2px;
  right: 7px;
}
.listening:before, .listening:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #ddd;
  opacity: 0.4;
  border-radius: inherit;
}
.listening:before {
  z-index: -2;
  animation: beat-before 1.5s ease 100ms infinite;
}
.listening:after {
  z-index: -1;
  animation: beat-after 1.5s ease 200ms infinite;
}
@keyframes beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
@keyframes beat-before {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
@keyframes beat-after {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

.search_voice_popup{width:100%; position:fixed; left:0px; min-height:80px;  padding-top:10px; padding-bottom:10px;                  
    background: #fff;
    display: flex;
    border-radius: 2px;
    border: none;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
    z-index: 3;                  
    margin: 0 auto; 
    display: none;                  
}

.listening_popup{top:7px; position: absolute; width:65px; height: 65px; display: block;}
.search_voice_popup_content{display: flex; width: 950px; margin: 0 auto;}
.listen_text{width:78%; font-size:30px; font-family: Arial; padding-top:23px; padding-left:5px; line-height: 1;}
.mic_popup{width:78px; position: relative; margin-right: 10px}
.mic_icon{z-index: 1; margin: 0 auto; margin-top:30px; margin-left: 31px; position: relative;}

@media only screen and (max-width: 850px) {
  .search_voice_popup_content {
    width:99%;
  }
  /*form fieldset {width:82%;}*/
}

@media only screen and (max-width: 400px) {
 .mic_icon{margin-left: 28px;}
 .listen_text{font-size:25px;}
}