@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500&display=swap');
body {
  font-family: 'Barlow', sans-serif;

}


#map {
  position: fixed;
  top: 0;
  left:0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.popup{
  font-family: 'Barlow', sans-serif;
 
}

.mapboxgl-popup-content{
 background-color:#CD1442;
 padding:20px 0px;
 border-radius:10px;
 border-color:#dde1ed;
 border-style:solid;
 border-width:0px;
 
}

.popupB>.mapboxgl-popup-content{
 background-color:#898989;
 padding:3px 10px;
 border-radius:20px;
 border-color:#dde1ed;
 border-style:solid;
 border-width:0px;
 color:#ffffff;
 text-transform:uppercase;
 font-size:10px;
 font-weight:bold
}

.propPopA-0{
font-weight:700;
  font-size:15px;
line-height:13px;
  color: #080e2d;
  margin-bottom:4px;
}

.propPopA-1{

   margin-bottom:14px;
  font-size:12px;
 color: #080e2d;
 line-height:13px;
  font-weight:500;

}

.propPopA-2{

  font-size:15px;
 color: #080e2d;
 line-height:13px;
  font-weight:500;

}

#popIcon{
 width:30px;
 margin-top:-12px;
 margin-bottom:10px;
}


.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
  border-bottom-color: #080a0d00;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
  border-top-color: #080a0d00;
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: #080a0d00;
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: #080a0d00;
}

.searchtab{
  position:absolute;
 width:10%;
 left:45%;
 top:40px;
 
}

#mySelect1{


padding-left:20px;
padding-right:20px;
   background: #000000;
  color:#ffffff;
  border-radius: 5px;
 border-color:transparent;
 text-transform:uppercase;
   height: 40px;
  font-size:15px;
}

#left-tab{
  box-shadow: 5px 5px 4px #d2d5dc8a;
 width:400px;
 top:50px;
 position:fixed;
  background-color:#ffffff;
 padding:10px 10px 20px 10px;
border-radius:20px;
 border-color:#b1b4bd;
 border-style:solid;
 border-width:0px;
transition: left 1s ease-in-out;
}

.imgSide{
 width:100%;
  border-radius:17px 17px 0px 0px;
 margin-bottom:14px;
}

.propPopC{

   text-align:center;
  font-size:13px;
 color: #1f1f22;
 line-height:12px;
  font-weight:500;
 text-transform:uppercase;
}

.propPopB{
text-align:center;
font-weight:500;
  font-size:15px;
line-height:15px;
  color: #ffffff;
  margin-top:4px;
 margin-bottom:14px;
 text-transform:capitalize;
}

.propPopD{
text-align:center;
font-weight:700;
  font-size:22px;
line-height:13px;
  color: #080e2d;
  margin-top:15px;
 margin-bottom:37px;
}

a{
 color: #080e2d !important;
    text-align:center;
  font-size:13px;
 color: #1f1f22;
 line-height:12px;
  font-weight:500;
 text-transform:uppercase;
}

#button3d {
  font-family: 'Roboto', sans-serif;
   font-size:16px;
   font-weight:700;
  position: fixed;
  top: 104px;
  right: 8.9px;
  width: 32px;
  height: 32px;
  display: block;
  padding: 0;
  border-style: solid;
  border-radius: 0.3em;
  border-color: #00000026;
 border-width:2px;
   color: #333333;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

#button3d:hover {

   background-color: #eeeeee;

}

#close{
 right:20px;
 top:20px;
position:absolute;
 font-size:10px;
 color:#1a48d2;
  background-color:#ffffff;
 padding:5px 5.5px;
border-radius:20px;
 border-color:#dde1ed;
 border-style:solid;
 border-width:3px;
z-index:3000;
}

.propPopBox{
 margin-right:1%;
 margin-left:2%;
 margin-bottom:3px;
 width:100%;
 
float:left;
}

#legend{
 display:none;
   box-shadow: 5px 5px 4px #d2d5dc8a;
 width:400px;
 bottom:50px;
 left:40px;
 position:fixed;
  background-color:#ffffff;
 padding:10px 0px 5px 40px;
border-radius:20px;
 border-color:#b1b4bd;
 border-style:solid;
 border-width:0px;
transition: left 1s ease-in-out;
}



.box-leg{
 padding:10px;
 width:25%;
float:left;

 
}

.box-leg >.propPopA{
 font-size:12px;
 color: #959eb0;
 width:70px;
 text-align:center;
 line-height:14px;
 margin-left:-25px;
}

.legCirc{
 margin-bottom:5px;
 width:20px;
 height:20px;
 border-radius:20px;
}

#logo{
 position:fixed;
 bottom:65px;
 right:60px;
 width:100px;
}

#menu {
   box-shadow: 5px 5px 4px #d2d5dc8a;
 width:400px;

 left:40px;
 position:fixed;
  background-color:#ffffff;
 padding:10px 0px 10px 20px;
bottom:115px;
  border-radius: 15px;
}

#menu input {
  text-transform: uppercase;
font-size:13px;
 height:30px;
 width:46.5%;
 background: #ebecf4;
 color: #a3a6b3;
  margin: 0px 12px 0px 0px;
 padding:1px 10px 4px 10px;
 border-color: #ffffff00;
  text-decoration: none;
  text-align: center;
  border-radius: 8px;
 float:left;
}

#menu input:disabled {
  background: #3e3f41;
 color: #ffffff;
}

#menu a:hover {
  color: #ffffff;
}

#menu a.active {
  color: #ffffff;
}

#menu a.active:hover {
  color: #ffffff;
}

#menu-legend {
   box-shadow: 5px 5px 4px #d2d5dc8a;
 width:590px;

 left:40px;
 position:fixed;
  background-color:#ffffff;
 padding:10px 0px 10px 20px;
bottom:55px;
  border-radius: 15px;
}
#menu-legend input {
  text-transform: uppercase;
font-size:12px;
 height:30px;
 width:23%;
 background: #ebecf4;
 color: #f4f4f4;
  margin: 0px 5px 0px 0px;
 padding:1px 25px 4px 0px;
 border-color: #ffffff00;
  text-decoration: none;
  text-align: center;
  border-radius: 8px;
 float:left;
 cursor:pointer;
 opacity:0.6
}

#popIconLeg{
 float:left;
 width:28px;
 margin-left:-40px;
 
}



#menu-legend> .active {

opacity:1;
 
 
}

#menu-legend a:hover {
  color: #ffffff;
}

#menu-legend a.active {
  color: #ffffff;
}

#menu-legend a.active:hover {
  color: #ffffff;
}

#btl1{
 background-color:#415972 !important;
}

#btl2{
 font-size:9px !important;
 background-color:#76a8d6 !important;
}
#btl3{
 background-color:#fec00f !important;
}
#btl4{
 background-color:#90ba6f !important;
}

#menu-state{

 width:400px;

 left:40px;
 position:fixed;
color:#3e3f41;
 padding:10px 0px 10px 20px;
bottom:162px;
  border-radius: 15px;
 font-size:22px;
 font-weight:800;
}