html {
  font-size: 1rem;
  scroll-behavior: smooth;
}
#root {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
*::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px #7ea1c4;
  box-shadow: inset 0 0 6px #7ea1c4;
  background-color: #f5f5f5;
}

*::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}

*::-webkit-scrollbar-thumb {
  background-color: #7ea1c4;
}

a:hover,
.btn:hover,
.dropdown-item:hover,
.page-link.pagination1:hover {
  text-decoration: none;
  /* color: #192965 !important; */
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #bbcfff;
  color: white;
}
.bg-color,
.dropdown-menu.show,
#pininput1 {
  background-color: #bbcfff;
}
#PreLoad {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background: #bbcfff;
}

#agefilter,
#flexDistrict {
  border-top-left-radius: 40px !important;
  border-bottom-left-radius: 40px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
#dosefilter,
#flexPincode {
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
#vaccinefilter,
#feefilter {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
#vaccinefilter:hover,
#feefilter:hover,
#dosefilter:hover,
#agefilter:hover,
#flexDistrict:hover,
#flexPincode:hover {
  box-shadow: 0 0 0.5rem 0.4rem #1b365c;
  background-color: #5885af;
}
#MainContent {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  background-color: #bbcfff !important; /*#28a745- btn-success main body color scheme*/
}
.zoom-in-zoom-out {
  margin: 24px;
  animation: zoom-in-zoom-out 2s ease-out infinite;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
#mynavbartop,
.nav-item.dropdown .dropdown-menu,
#pininput0,
#state0,
#district0 {
  /*navbar and dropdown menu color scheme*/
  background-color: #7ea1c4;
}
.Button-clicked {
  /*button press color change*/
  background-color: #5885af;
}
@media screen and (max-width: 349px) {
  /* 0 to 349 px small to very mobile */
  #req {
    height: fit-content;
    width: 299px;
  }
  #NoDataAlert {
    width: 299px;
    height: fit-content;
  }
  #HospitalRes,
  #dateResults {
    width: fit-content;
    word-wrap: break-word;
    overflow: scroll;
  }
}
@media screen and (min-width: 350px) {
  /* 350 to 449 px normal mobile */
  #req {
    height: fit-content;
    width: 300px;
  }
  #NoDataAlert {
    width: 300px;
    height: fit-content;
  }
  #HospitalRes {
    width: 313px;
  }
}
@media screen and (min-width: 450px) {
  /* 450px to 767px ipad and tablets */
  #req {
    height: fit-content;
    width: 400px;
  }
  #NoDataAlert {
    width: 400px;
    height: fit-content;
  }
  #HospitalRes {
    width: 678px;
  }
  #HospitalRes,
  #dateResults {
    width: 400px;
    word-wrap: break-word;
  }
}
@media screen and (min-width: 768px) {
  /* 768+ laptops*/
  #req {
    width: 700px;
    height: 150px;
  }
  #NoDataAlert {
    width: 700px;
    height: fit-content;
  }
  #HospitalRes,
  #dateResults {
    width: 700px;
    word-wrap: break-word;
  }
}
#HospitalAddress::before {
  content: "   Address: ";
}
#dose1::before {
  content: "Available Capacity dose1 : ";
}
#dose2::before {
  content: "Available Capacity dose2 : ";
}
#dose3::before {
  content: "Available Capacity dose3 : ";
}
#blockname::before {
  content: " Block: ";
}
#districtname::before {
  content: " District: ";
}
#statename::before {
  content: " State: ";
}
#pin22::before {
  content: " Pincode: ";
}
select,
option,
input,
#HospitalRes > .card {
  color: #1b365c !important;
  background-color: #bbcfff !important;
  border-color: #1b365c !important;
  border-width: 1px !important;
}
nav select,
nav select:active,
nav select option,
nav select option:active,
nav input,
nav input:active {
  background-color: #7ea1c4 !important;
}
nav > div > ul > li > a:active,
nav > div > ul > li > a:hover {
  border-radius: 40px;
  background-color: #5885af;
  box-shadow: 0 0 0.5rem 0.4rem #1b365c;
}
.navbar-toggler:active,
.navbar-toggler:hover,
.navbar-toggler:focus,
.navbar-toggler.collapsed:active,
.navbar-toggler.collapsed:hover,
.navbar-toggler.collapsed:focus {
  /* box-shadow: 0 0 0.5rem 0.5rem #1b365c; */
  outline: 5px auto #1b365c !important;
  border: 0;
}
h5 {
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge.badge-info {
  padding-left: 2.8px !important;
  padding-right: 2.8px !important;
  padding-top: 1.5px !important;
  padding-bottom: 1.5px !important;
}
#footer {
  background-color: #5885af;
  background-image: url(https://apurvk4.github.io/covid19india/img/pattern01.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
}
.show {
  display: block;
}
.hide {
  display: none;
}
.filter {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}
.filtergit:hover,
.filtergit:active {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.react {
  animation: spin 4s linear infinite;
  filter: invert(18%) sepia(11%) saturate(3306%) hue-rotate(60deg)
    brightness(101%) contrast(95%);
}

#covid-19 {
  width: 220px;
  height: 220px;
  animation-name: float;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  /* // -webkit-filter: drop-shadow(10px 10px 5px #032552) !important;
  // box-shadow: 0 0 0.25rem 0.25rem #032552 !important; */
}

.shadow {
  width: 100px;
  height: 10px;
  background: #1c1c1c;
  border-radius: 70%;
  opacity: 1;
  filter: blur(3px);
  animation-name: animate-shadow;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

g.evelope {
  animation-name: rotate;
  transform-origin: 100px 105px;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

ellipse.left-eyeball,
ellipse.right-eyeball {
  animation-name: moveEyeBalls;
  transform-origin: 50% 50%;
  animation-duration: 3s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.left-eyebrows,
.right-eyebrows {
  animation-name: moveEyebrows;
  transform-origin: 50% 50%;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.mouth {
  animation-name: moveMouth;
  transform-origin: 50% 50%;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes moveMouth {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(12deg);
  }
}

@keyframes moveEyebrows {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-1px);
  }
}

@keyframes moveEyeBalls {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(2px);
  }
  50% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0px);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(20px);
  }
}

@keyframes animate-shadow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.animation {
  animation: rotateMenu 400ms ease-in-out forwards;
  transform-origin: top center;
}

@keyframes rotateMenu {
  0% {
    transform: rotateX(-90deg);
  }
  70% {
    transform: rotateX(20deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
/* ---------------preload-------------- */
.pl {
  width: 8em;
  height: 8em;
}
.pl circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.pl__ring1 {
  animation: ring1 4s 0s ease-in-out infinite;
}
.pl__ring2 {
  animation: ring2 4s 0.04s ease-in-out infinite;
}
.pl__ring3 {
  animation: ring3 4s 0.08s ease-in-out infinite;
}
.pl__ring4 {
  animation: ring4 4s 0.12s ease-in-out infinite;
}
.pl__ring5 {
  animation: ring5 4s 0.16s ease-in-out infinite;
}
.pl__ring6 {
  animation: ring6 4s 0.2s ease-in-out infinite;
}

/* Animations */
@keyframes ring1 {
  from {
    stroke-dashoffset: -376.237129776;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -94.247778;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%,
  50% {
    stroke-dashoffset: -376.237129776;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -94.247778;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%,
  to {
    stroke-dashoffset: -376.237129776;
    transform: rotate(4.75turn);
  }
}
@keyframes ring2 {
  from {
    stroke-dashoffset: -329.207488554;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%,
  50% {
    stroke-dashoffset: -329.207488554;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%,
  to {
    stroke-dashoffset: -329.207488554;
    transform: rotate(4.75turn);
  }
}
@keyframes ring3 {
  from {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%,
  50% {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%,
  to {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(4.75turn);
  }
}
@keyframes ring4 {
  from {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%,
  50% {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%,
  to {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(4.75turn);
  }
}
@keyframes ring5 {
  from {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -56.5486668;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%,
  50% {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -56.5486668;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%,
  to {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(4.75turn);
  }
}
@keyframes ring6 {
  from {
    stroke-dashoffset: -203.795111962;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -51.05087975;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%,
  50% {
    stroke-dashoffset: -203.795111962;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -51.05087975;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%,
  to {
    stroke-dashoffset: -203.795111962;
    transform: rotate(4.75turn);
  }
}