@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap');

body {
 font-family: 'Roboto', sans-serif;
}


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




#buttonBox{
 position:fixed;
 left:9px;
 top:9px;
 height:640px;
 width:110px;
 background-color:#dddddd;
 padding:10px;
 border-radius:10px;
}

#subBox{
 

 position:absolute;
 top:10px;
 height:70px;
 width:90px;
 background-color:#ffffff;
 padding:10px;
 border-radius:10px;
  padding-top:50px;
}

#subBox2{

 margin-top:130px;
 position:absolute;
 top:10px;
 height:267px;
 width:90px;
 background-color:#dddddd;
 padding:10px;
 border-radius:10px;
}

#logo{
 top:22px;
 z-index:2000;
 position:absolute;
 width:95px;
 left:18px;


}


.button{
 
 
 width:100%;
 height:22px;
 margin-bottom:5px;
 font-size:14px;
  background-color:#eea55b;
 border-radius:10px;
  border-width:0px;
 font-weight:normal;
  color:#ffffff;
 cursor:pointer;

}

#i3{
height:49px;
  font-size:14px;
  background-color:#0F9D58;
 margin-top:3px;
 margin-bottom:15px;
}


.plus{
 background-color:#305D90;
}
 #i19,#i18{
 background-color:#818181;
}

.button.active{
  
 
 border:solid;
border-color:#000000;
 border-width:2px;

}

#i3.active{
  

 border:solid;
border-color:#000;
 border-width:2px;

}

.button:hover{

 font-weight:bold;
  background-color:#bdbdbd;
}



/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #ffffff;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 10px;
}

#slider{
  position:fixed;
  left:180px;;
  bottom:100px;
  width:70%;
 
}


#month{
    position:fixed;
  left:180px;
  bottom:110px;
  
font-family: 'Roboto', sans-serif;
   font-size:45px;
   font-weight:700;
   color:white;


 
}


#button3d {
  font-family: 'Roboto', sans-serif;
   font-size:20px;
   font-weight:700;
  position: fixed;
  bottom: 104px;
  left: 50px;
  width: 70px;
  height: 36px;
  display: block;
  padding: 0;
  border-style: solid;
  border-radius: 0.3em;
  border-color: #ff000000;
   color: #676869;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

 input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: hsl(0deg 0% 100% / 30%);
        outline: none;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 40px;
      -webkit-appearance: none;
      color: #081217;
      margin-top: -1px;
        outline: none;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 40px;
      -webkit-appearance: none;
      height: 80px;
      cursor: ew-resize;
      background: #ffffff;
      box-shadow: 0px 0 0 0px #e02e35;
       outline: none;
       cursor:pointer;
    }



#play{
  cursor:pointer;
  bottom:100px;
  left:130px;
  position:absolute;
     background-color:transparent;
     border:0;}

#iconplay{
height:35px;
  
}

.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:#3e497600!important;
}
.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: #3e497600!important;
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: #3e497600!important;
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: #3e497600!important;
}

.mapboxgl-popup-content{
   box-shadow: 0 0 40px rgb(255 255 255 / 0%);
padding:0px;
}

.Clpopup{
 min-width:250px;
 min-height:100px;
  padding:25px 20px 20px 20px;
   font-family: 'Roboto', sans-serif;
background-color:#ffffff;
color:#000000;
  text-align:center;
  text-transform:uppercase;
   box-shadow: 0 0 40px rgb(255 255 255 / 0%);
  margin-left:-30px;
    margin-bottom:-10px;
 border:solid;
  border-color:#101a2c;
 border-radius:20px;
 border-width:4px;
}

.ClpopupPOI{
 min-width:260px;
 min-height:100px;
  padding:25px 15px 20px 15px;
   font-family: 'Roboto', sans-serif;
background-color:#ffffff;
color:#000000;
  text-align:center;
  text-transform:uppercase;
   box-shadow: 0 0 40px rgb(255 255 255 / 0%);
  margin-left:-30px;
    margin-bottom:-10px;
 border:solid;
 border-color:#101a2c;
 border-radius:20px;
 border-width:4px;
}

.slide{
 width:95%;
}
.propPopA{
 margin-top:0px;
  margin-bottom:20px;
  font-size:20px;
   font-weight:600;
}

.propPopB{
  margin-bottom:5px;
  font-size:14px;
   font-weight:400;
}

.propPopC{
  margin-bottom:20px;
  font-size:14px;
   font-weight:400;
 display:none;
}
.ClpopupPOI .propPopA{
margin-bottom:0px;
  font-size:14px;
   font-weight:400;
}

.propPopD{
  margin-top:-15px;
 margin-bottom:25px;
  font-size:20px;
   font-weight:600;

}

.propPopWeb{
 background-color:#000000;
color:#ffffff;
 padding:5px 20px 5px 20px;
  border:solid;
 border-color:#101a2c;
 border-radius:20px;
 border-width:4px;
font-size:15px;
   font-weight:600;
}

a{
 text-decoration:none;
}

.labelB{
  margin-bottom:10px;
  font-size:17px;
   font-weight:400;
}

.labelC{
 
  font-size:42px;
   font-weight:700;
}


#infopanel{
 position:fixed;
 color:#fff;
 width:780px;
 left:50px;
top:50px;
  font-family: 'Roboto', sans-serif;


}


#info-block{
  position:relative;
width:200px;
 
  margin-right:10px;
  float:left;
}

.info-title{
 font-size:18px;
 font-weight:400;
 margin:0px;
 text-transform:uppercase
}

.info-value{
 font-size:90px;
 font-weight:700;
 margin:0px;
 
}

#info3{
 width:260px;

}

 #infoT3{
 width:260px;
 
}

  #arrow-mobile{
    position:fixed;
    top:0px;
    left:0px;
  
   margin:0px;
    font-size:17px;
    padding:7px;
    background-color:#dddddd;
    z-index:9000;
    border-radius:0px 0px 10px 0px;
    cursor:pointer;
   }

@media only screen and (min-width: 600px) and (max-width: 900px) {

 /* #buttonBox{
  transform: scale(0.65);
 transform-origin:top left;
 
} */
 

 

.Clpopup{
 min-width:220px;
 min-height:100px;
  padding:10px;


}

.ClpopupPOI{
  padding:0px 5px 5px 5px;
}

.slide{
 width:80%;
}


.propPopA{

  font-size:13px !important;

}



.propPopD{
  margin-top:-17px;
 margin-bottom:12px;
  font-size:15px;

}

.propPopWeb{
 padding:2px 10px 2px 10px;
font-size:13px;

}


#buttonBox{
 position:fixed;
 left:10px;
 top:10px;
 height:290px;
 width:195px;
 background-color:#dddddd;
 padding:10px;
 border-radius:10px;
  
}

#subBox{
 

 position:absolute;
 top:10px;
 height:20px;
 width:175px;
 background-color:#ffffff;
 padding:10px;
 border-radius:10px;
  padding-top:50px;
}

#subBox2{

 margin-top:90px;
 position:absolute;
 top:0px;
 height:267px;
 width:175px;
 background-color:#dddddd00;
 padding:10px;
 border-radius:10px;
}

#logo{
 top:22px;
 z-index:2000;
 position:absolute;
 width:120px;
 left:18px;


}


.button{
 
 float:left;
 width:30%;
 margin-left:5px;
 height:22px;
 font-size:12px;
 border-radius:10px;
  border-width:0px;
 font-weight:normal;
  color:#ffffff;
 cursor:pointer;

}

 #i3{
  width:100%;
  height:22px;
  font-size:12px
 }

 #i18{font-size:11px}
 #i19{font-size:10px}

 #logo{
 top:22px;
 z-index:2000;
 position:absolute;
 width:100px;
 left:18px;


}


 
}

@media only screen and (max-width: 600px) {

 #buttonBox{
  transform: scale(0.8);
 transform-origin:top left;
 
}
  #arrow-mobile{
    font-size:14px;
    }
 

  /* #arrow-mobile{
    position:absolute;
    margin-top:-5px;
    left:85%;
   
    font-size:25px;
    padding:5px;
    background-color:#ffffff;
    z-index:9000;
    border-radius:0px 5px 5px 0px;
    cursor:pointer;
   }

 .Clpopup{
 min-width:220px;
 min-height:100px;
  padding:10px;


}

.ClpopupPOI{
  padding:0px 5px 5px 5px;
}

.slide{
 width:80%;
}


.propPopA{

  font-size:13px !important;

}



.propPopD{
  margin-top:-17px;
 margin-bottom:12px;
  font-size:15px;

}

.propPopWeb{
 padding:2px 10px 2px 10px;
font-size:13px;

}

#buttonBox{
 position:absolute;
 left:10px;
 top:unset;
bottom:3%;
 height:240px;
 width:90%;
 background-color:#dddddd;
 padding:10px;
 border-radius:10px;
 transition: 1s;
}

#subBox{
 position:absolute;
 top:10px;
 height:25px;
 width:92%;
 background-color:#ffffff;
 padding:10px;
 border-radius:10px;
 padding:60px 0px 10px 10px;
}

#subBox2{

 margin-top:0px;
 position:absolute;
 top:110px;
 height:100px;
 width:92%;
 background-color:#ddd;
 padding:10px 0px 10px 10px;
 border-radius:10px;
}

#logo{
 top:22px;
 z-index:2000;
 position:absolute;
 width:120px;
 left:18px;


}


.button{
 float:left;
 margin-right:1%;
 width:23%;
 height:25px;
 margin-bottom:7px;
 font-size:14px;
 
 border-radius:10px;
  border-width:0px;
 font-weight:normal;
  color:#ffffff;
 cursor:pointer;

} */

  }