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

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

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

.map-console {
  padding: 20px;
  font-family: 'Rubik', sans-serif;
  position: absolute;
  width: 430px;
  left:0;
  top:2%;
  height: 94%;
  background-color: #ffffff;
  border-width: 0px;
  color: #969696;
  border-radius: 0px 5px 5px 0px;
  text-align:left;
  transition: left 0.5s;
  padding-left:30px;
overflow-y:auto;
overflow-x:hidden
}



h1 {
  margin-top:10px;
  margin-left:60px;
  font-size: 24px;
  color: #393960;
  font-weight:bold;
}

h2 {
  font-size: 14px;
   margin-left:60px;
  text-transform:uppercase;
  
  margin-top: -10px;
  margin-bottom: 35px;
}

  h4 {
  font-size: 13px;
 margin-bottom: 1px;
  color: #393960;
    }

  h5 {
  font-size: 17px;
  line-height: 20px;
  margin-bottom: 15px;
  text-transform:uppercase;
 
 
  }

  #label0{
   margin-top: 30px;
   color: #393960;
   font-size: 37px;
   font-weight:bold;
   line-height:30px;
   margin-bottom: 15px;
  }

   #labelCases{
   margin-top: 0px;
   color: #393960;
   font-size: 23px;
   font-weight:bold;
   line-height:30px;
     margin-bottom: 30px;
  }

  #labelRatio {
    margin-bottom: 10px;
    margin-top: 0px;
    color: #393960;
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
    /* text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; */
}






  .loader {
    margin: -10px 0 0 -250px;
    height: 100px;
    width: 20%;
    position: fixed;
    text-align: center;
    padding: 1em;
    top: 45%;
    left: 40%;
    margin: 0 auto 1em;
    z-index: 9999;
  }

#box{
   margin: auto;
}

#box-img{
  margin-top:194px;
  float: left;
  margin-left:10px;
}

#box-data{
  position:relative;
  margin-left:60px;
 
  
}


.icons{
   margin-top:1.1px;
  height:35px;
}

#logo{
position:absolute;
bottom:15px;
right:8px;
  height:100px;
}


.session {
  left:60px;
  margin-top: 30px;
  position:relative;

}

.colors {
  margin-bottom: 5px;
 margin-top: 10px;
  position: relative;
 left:15px;
  height: 14px;
  width:290px;
  border-radius:10px;

}

.labelLegend {
  color: #393960;
  width:125px;
  display: inline-block;
  text-align: center;
  position: relative;
  left:-32px;
  font-size: 13px;
}





::-webkit-scrollbar {
    width: 15px;
    height: 15px;

}
::-webkit-scrollbar-thumb {

    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: #393960;
    -webkit-box-shadow: inset -1px -1px 0px rgb(193 52 52 / 5%), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}




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

.colors {
  margin-bottom: 5px;
 margin-top: 10px;
  position: relative;
 left:10px;
  height: 14px;
  width:85%;
  border-radius:10px;

}

.labelLegend {
  color: #393960;
  width:33%;
  display: inline-block;
  text-align: center;
  position: relative;
  left:-32px;
  font-size: 13px;
}


.session {
  left:15%;
  margin-top: 30px;
  position:relative;
width:85%;
}

#logo{
position:absolute;
top:15px;
left:8px;
height:70px;
}

.map-console {
  padding: 20px;
  width: 94%;
  left:3%;
  top:80%;
  height: 920px;
  border-radius: 20px;
  transition: top 0.5s;
  margin-bottom:60px;
}

#box-img{
  margin-top:192px;
  float: left;
  margin-left:8px;
}

#label1 {
 margin-top: 0px;
   margin-bottom: 23px;
}


h2 {
  margin-bottom: 15px;
}

h1 {
  margin-top: 0px;
}

#arrow-mobile{
  text-align:center;
  font-size:25px;
   margin-bottom: 20px;
     color: #393960;

}

}