/**********  audio search  *************/

.voice-search {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.popup h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.audio-icon {
  height: 24px;
  width: 24px;
  background: #fff url("../../images/gray-mic-sm.png");
  margin: 0 3px;
  position: absolute;
  right: 70px;
  top: 15px;
  z-index:100;
}

.audio-icon:hover {
  height: 24px;
  width: 24px;
  background: #fff url("../../images/green-mic-sm.png");
  margin: 0 3px;
  position: absolute;
  right: 70px;
  top: 15px;
}

.popup {
  float: left;
  min-height: 1px;
  position: absolute;
  margin-left: 20%;
  width: 36%;
  min-width: 500px;
  height: 360px;
  padding: 20px;
  border: 1px solid #f3f3f3;
  -webkit-box-shadow: 5px 8px 12px 0px rgba(194, 192, 194, 0.56);
  -moz-box-shadow: 5px 8px 12px 0px rgba(194, 192, 194, 0.56);
  box-shadow: 5px 8px 12px 0px rgba(194, 192, 194, 0.56);
  display: none;
  z-index: 1000;
  top: 80px;
  left: 1.5%;
  bottom: 0;
  right: 0;
  background-color: #e0e0e0;
}

.mic-green {
  color: #638f38;
}

.mic-italics {
  font-style: italic;
}

/*
#clearSearchBox {
  display: none
}
*/

.popup h3,
.popup h4 {
  text-align: center;
  font-weight: normal;

}

.hollow-dots-spinner, .hollow-dots-spinner * {
  box-sizing: border-box;
}

.hollow-dots-spinner {
  height: 15px;
  width: calc(30px * 5);
  margin: 6% 43%;
}



.box-header {
  text-align: center;
  margin: 60px 20px 20px;
  color: #646464;
  font: normal 17px/26px Arial, sans-serif;
  width: 41%;
  float: left;
}

.tryagain {
  display: none;
  margin: 0 auto;
}

.mic-button {
  background: transparent url(../../images/green-mic.png);
  height: 36px;
  width: 36px;
  margin: 13px;
}

.mic-button:hover {
  background: transparent url(../../images/gray-mic.png);
  height: 36px;
  width: 36px;
}

.mic-button-jq {
  background: transparent url(../../images/green-mic.png);
  height: 36px;
  width: 36px;
  margin: 10px;
}

.search-button {
  background: transparent url(../../images/red-search.png);
  height: 36px;
  width: 36px;
  margin: 15px;
  display: inline-block;
}

.search-button:hover {
  background: transparent url(../../images/grey-search.png);
  height: 36px;
  width: 36px;
}

.search-button-jq {
  background: transparent url(../../images/red-search.png);
  height: 36px;
  width: 36px;
  margin: 10px;
  display: inline-block;
}

.mic-wrapper {
  height: 62px;
  width: 62px;
  border-radius: 50%;
  border: 4px solid rgba(0, 0, 0, 0.3);
  display: block;
  background: #e2e2e2; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #e2e2e2 0%, #dbdbdb 60%, #d1d1d1 61%, #fefefe 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #e2e2e2 0%, #dbdbdb 60%, #d1d1d1 61%, #fefefe 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #e2e2e2 0%, #dbdbdb 60%, #d1d1d1 61%, #fefefe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  margin: 12px auto;
  transition: all .2s ease-in-out;
}

.mic-wrapper:hover {
  transform: scale(1.1);
}

/*.search-text {
  display: none;
  padding: 60px;
}*/
.margin-bottom-30 {
  margin-bottom: 30px;
}

.margin-top-30 {
  margin-top: 30px;
}

.margintop15px {
  margin-top: 15px;
}

.heading {
  font-size: 16px;
}

.input-group > .custom-file:focus, .input-group > .custom-select:focus, .input-group > .form-control:focus {
  z-index: 0;
}

/******** close button ************/

@media only screen and (max-width: 767px) {
  .popup {
    top: 140px;
  }

  .voice-search h3 {
    width: 100%;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .popup {
    top: 135px !important;
    margin-left: 0 !important;
    width: 91% !important;
    max-height: 500px;
  }

  .box-header {
    width: 43% !important;
  }

  .voice-search h3 {
    width: 100%;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .popup {
    top: 135px;
    margin-left: 0;
    width: 93.5%;
    max-height: 500px;
  }

  .box-header {
    width: 43%;
  }

  .voice-search h3 {
    width: 100%;
  }
}

@media only screen and (min-width: 600px) and (max-width: 960px) and (orientation: portrait) {
  .popup {
    top: 120px;
    margin-left: 1%;
    width: 90%;
    max-height: 500px;
  }

  .box-header {
    width: 84%;
  }
}

@media only screen and (min-width: 320px) and (max-width: 667px) {
  .popup {
    top: 120px;
    margin-left: 0;
    width: 100%;
    min-width: 320px;
    height: 100%;
    left: 0;
  }

  .box-header {
    width: 90%;
    margin: 10px 28px;
}
}

#sign-in-dropdown,
.audio-popup, .enable,
.try-again,
.audio-popup-sucess{
  display: none;
  height: calc(100% - 55px);
  overflow-y: scroll;
  overflow-x: hidden;
  position: fixed;
  right: 0;
  top: 55px;
  width: 100%;
  background: #fff;
  z-index: 1000;
}

#sign-in-dropdown.show,
.audio-popup.show, .enable.show,
.try-again.show ,
.audio-popup-sucess.show{
  display: block;
}

#sign-in-dropdown h3,
.audio-popup h3, .enable h3,
.try-again h3,
.audio-popup-sucess h3{
  font: 1.2rem/2.2rem Arial, Helvetica, sans-serif;
  width: auto;
  margin-bottom: .5rem;
}

.font-weight-bold {
    font-weight: 700 !important;
}
.text-danger {
    color: #dc3545;
}

.hollow-dots-spinner .dot {
  width: 15px;
  height: 15px;
  margin: 0 calc(15px / 2);
  border: calc(15px / 5) solid #d20000;
  border-radius: 50%;
  float: left;
  transform: scale(0);
  animation: hollow-dots-spinner-animation 1000ms ease infinite 0ms;
}

.hollow-dots-spinner .dot:nth-child(1) {
  animation-delay: 300ms;
}

.hollow-dots-spinner .dot:nth-child(2) {
  animation-delay: 600ms;
}

.hollow-dots-spinner .dot:nth-child(3) {
  animation-delay: 900ms;
}

.close-thin {
  right: 17px;
  position: absolute;
  top: 10px;
}

@keyframes hollow-dots-spinner-animation {
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.voice_search_popup p{
    margin: 0 !important;
}

@media only screen and (min-width: 767px) {
  .voice_search_popup {
     float: left;
     min-height: 1px;
     position: absolute;
     margin:  0 auto;
     width: 487px;
     height: 360px;
     padding: 20px;
     display: none;
     z-index: 1000;
     top: 80px;
     left: -451px;
     bottom: 0;
     right: 0;
     border: 1px solid #f3f3f3;
     overflow-y:auto;
 
}
.icon-set{
	position: relative;
}
.hollow-dots-spinner{
    margin: 5% 42%;
}
}
@media only screen and (min-width: 1025px){
  .header_wrapper_position .voice_search_popup,
  .home_class.static_cust .voice_search_popup {
           left: -436px;
           width: 454px;
}
}
 @media (max-width: 1407px) and (min-width: 1026px) {
 .voice_search_popup {
     left: -337px;
}
}

@media (min-width: 767px) and (max-width: 1024px){
    .voice_search_popup{
        top: 139px;
        left: -28px;
}
}

@media (max-width: 767px){
    #sign-in-dropdown, .audio-popup, .enable, .try-again, .audio-popup-sucess{
        top: 119px;
 }
    .hollow-dots-spinner{
       margin: 3% 0 0 40%; 
}  
}