table,th{
  border: 1px solid #ddd;
  border-collapse: collapse;
  padding: 5px;
}
tr,td{
  padding: 5px;
}
table{
  width: 100%;
}
.speak{
  color: #444;
  outline: none;
  border-radius: 50%;
  margin-right: 10px;
  padding: 4px 7px !important;
  border: 1px solid #ddd;
  transition: .5s;
}
.speak i::before{
  font-size: 13px;
  /*background: red;*/
}
.speak:hover, .speak:focus{
  border-color: #444;
  animation: changecolor 1s infinite;
}

@keyframes changecolor {
  0% {
    transform: scale(1.2) rotate(15deg);
  }
  50% {
    transform: scale(1.3) rotate(-15deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
/*.speak {
  width: 24px; 
  height: 24px; 
  background: #FF5252;
  clip-path: path("M12 21.593c-5.63-5.539-11-10.297-11-14.402 0-3.791 3.068-5.191 5.281-5.191 1.312 0 4.151.501 5.719 4.457 1.59-3.968 4.464-4.447 5.726-4.447 2.54 0 5.274 1.621 5.274 5.181 0 4.069-5.136 8.625-11 14.402m5.726-20.583c-2.203 0-4.446 1.042-5.726 3.238-1.285-2.206-3.522-3.248-5.719-3.248-3.183 0-6.281 2.187-6.281 6.191 0 4.661 5.571 9.429 12 15.809 6.43-6.38 12-11.148 12-15.809 0-4.011-3.095-6.181-6.274-6.181");
}*/
#searchNameResults{
  position: absolute;
  top: 90%; 
  border-radius: 5px !important;
  max-height: 300px;
  z-index: 9999;
  min-height: 40px;
  overflow-y: scroll;
  padding: 0.375rem 0.75rem;
  background: #fff;
  text-transform: capitalize;
  scroll-behavior: smooth;
  border: 1px solid #ddd; 
  display: none;
}
#searchName::placeholder {
  color: #fff;
}
div::-webkit-scrollbar{
  display: block;
}
/*@media screen and (max-width: 991px) {
  #searchNameResults{
    left: 35px;
    width: 82%;
  }
}*/
@media screen and (min-width: 1500px) {
  #searchNameResults{
    left: 36px;
    width: 89%;
  }
}
@media screen and (max-width: 1400px) {
  #searchNameResults{
    left: 31px;
    width: 80%;
  }
}
.babyGenderIcon{      
  border-radius: 50%;
  padding: 5px 8px !important;
  font-size: 15px;
}

.searchLinks a{
  text-transform:capitalize;
  color: #505050;
  transition: .5s;      
}
.searchLinks:hover a{
  color: #000;
  transition: .5s;
}
.searchLinks:hover{
  padding-left: 10px;
  transition: .5s;
}
.both, .male, .female{ transition: .2s; }
.searchLinks:hover .both{
  background-image: linear-gradient(to right, #a2e1ff 20%, #fdbdc9 70%);
  font-weight: 600;
  border-radius: 50%;
  padding: 1px 3px 0px 5px;
  transition: .5s;
}
.searchLinks:hover .male{
  background:  #a2e1ff;
  font-weight: 600;
  border-radius: 50%;
  padding: 1px 3px 0px 5px;
  transition: .5s;
}
.searchLinks:hover .female{
  background: #fdbdc9;
  font-weight: 600;
  border-radius: 50%;
  padding: 1px 3px 0px 5px;
  transition: .5s;
}
.searchLetter{
  background: radial-gradient(circle, #251b71 0%, rgba(255,255,255,1) 0%, #251b71 130%); 
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 14px;
  margin: 1px;
  border: 1px solid #8b86b3;
  transition: .5s;
  
}
.searchLetter:hover{
  background: #f3f5fa; 
  transform: scale(1.3);
  transition: .5s;     
  border: 1px solid #f3f5fa;       
}
#searchNameResults ul > li{
  list-style-type:none;
}


.btnActive{ animation: glow 5s infinite; }
.btnActive i{ animation: glow2 5s infinite; }
@keyframes glow{
  0%{}
  50%{
    transform: scale(1.1);
    background: #ddd;
    border-color: #fff;
  }
  100%{}
}
@keyframes glow2{
  0%{}
  50%{
    background: #ddd;
    color: #000;
  }
  100%{}
}
.header-img{
  width: 115px !important;
  height: 160px;
  margin: auto;
}
.header-baby-img{
  width: 200px !important;
  height: 150px;
  margin: auto;
  margin-top: 2%;
}

.header-text p{
  margin: 8%;
  font-weight: 600;
}

.header-text #hPara{
  margin: 5.25%;
}




@media (max-width:650px) {
  .header-text p{
    margin: 0;
  }
  .header-text #hPara{
    margin: 0;
  }
}