.wrapper, #map  {
  height: 100%;
  width: 100vw;
  padding: 0;
  margin: 0
}

.wrapper {
  position: relative
}

#map, .select {
  position: absolute;
  top: 0;
  left: 0
}
.select {
  z-index: 1010;
  padding: 1px 42%;
  margin-left: 5px;
  display:none;
  pointer-events: none;
}


.spanstyle {
  font-size:60;
}
.select > *  {
  pointer-events: auto;
} 
#covidModal {
  position: fixed;
  width: 370px;
  top: 5%;
  right: 0%;
  bottom: 0;
  left:5%;
  z-index: 1200;
  display:none;
  
}

#covidModal {
  background-color:rgb(153, 30, 30,0.0);
}
#modalg {
  position: fixed;
  width: 370px;
  top: 0%;
  right: 0%;
  bottom: 0;
  left:5%;
  z-index: 1210;
  display:none;
}
#modaln {
  position: fixed;
  height: 50%;
  width:370px;
  top: 10%;
  right: 0%;
  bottom: 0;
  left: 5%;
  z-index: 1220;
  display:none;
}
#modaln {
  background-color:rgb(153, 30, 30,0.0);
}

.fa-arrow-circle-right {
  background-color: #fff;
  color:#000;
}


#modalh {
  position: fixed;
  height:80%;
  width:370px;
  top: 10%;
  right: 0%;
  bottom: 0;
  left: 5%;
  z-index: 1230;
  display:none;
}
#modalh {
  background-color:rgb(153, 30, 30,0.0);
}

#modalg .modal-heading {
  color: black;
}
#modalg .card {
  border-radius: 40%;
}
#modalg .bg-image {
  border-radius: 35px; 
}
#modalg .text-light {
  color:black;
  font:bolder;
}
#modalg .mb-2 p {
  font-size: small;
  float:left;
  display:block;
}
#modalg .mb-1 p.indenttext {
  margin-left:66px;
}

#modalg .mb-1 p {
  display:inline;
  margin-top:2px;
}

#weather {
  position: fixed;
  top: 0%;
  right: 0%;
  bottom: 0;
  left: 0%;
  z-index: 1100;
  display:none;
}

#weather .btn-close {
   float:right;
}
#weather .d-block {
  font-size:small;
}
#weather .mb-2 {
  font-size:x-small;
}
#myModal {
  position: fixed;
  top: 0;
  margin-left: 5%;
  right: 0%;
  bottom: 0;
  left: 0; 
  border-radius: 15px;
  z-index: 1300;
  display:none;
}
#myModal .btn-close {
  float:right;
}
#myModal .modal-body {
  color:black;
}

#myModal .mortar {
 text-align:center;
}
#myModal .fa-mortar-board {
  color:#3db7c7;
  font-size:60px;
}
.fa-link {
  color: purple;
  font-size:large;
}
#myModal .modal-header {
  background-color: #3db7c7;
  padding:9px 15px;
  color:#FFF;
  font-family:Verdana, sans-serif;
  border-bottom:1px solid #eee;
}

.mg-mb-0 img {
  border: 1px solid rgb(165, 126, 42);
  border-radius: 4px;
  padding: 5px;
  width: 120px;
  display: block;
  float:left;
  margin-right:10px;
}

.mg-modal-header {
  background-color: #f8a460;
}
.mg-mb-2 {
  font-size: 10rem;
}
#modalg .mg-mb-2 i.fa-external-link-square {
  color:#000;
  font-size:x-small;
}
#myModalheader {
  color: #fff;
}
#myModal.modal-body {
  color:aliceblue;
  border-radius: 5px;
  border: solid 1px black;
}

#modalh .table-striped>tbody>tr:nth-child(odd) {
  background-color: LemonChiffon;
}
#modalh .table-hover tbody tr:hover {
  background-color: AliceBlue;
}

#covidModal .modal-header {
  background-color: rgb(9, 163, 48);
}
#covidModal .table-striped>tbody>tr:nth-child(odd) {
  background-color: rgb(54, 240, 101);
}
#covidModal .table-hover tbody tr:hover {
  background-color: rgb(185, 245, 179);
}


body {
  background: #EEE;
  padding: 0;
  margin: 0;
}
.info {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 5px;
  margin-left:30px;
  }
.legend {
  background-color: “black”;
  line-height: 25px;
  color: #555;
  width: auto;
  }
.legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  border-radius: 10px;
  }
/* Navigation */


#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:9999;
  overflow: hidden;
  background: #fff;
  color:#3db7c7;
}
div#message {
  margin-top: 30%;
  margin-left: 40%;
  font-weight: bolder;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: x-large;
}
.leaflet-popup-content-wrapper {
  border-color: 1px solid black;
  background-color:rgb(252, 248, 244);
  font-family: Georgia, 'Times New Roman', Times, serif;

}

#preloader:before {
  content:"";
  position:fixed;
  margin-top: 17%;
  margin-left: 40%;
  top: calc(50% -50px);
  left: calc(50% -50px);
  border: 6px solid #f2f2f2;
  border-top:6px solid #3db7c7;
  border-radius:50%;
  width:100px;
  height:100px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader{
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes animate-preloader {
  0%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
  