@font-face {
    font-family: 'mabry-mono';
    src: url('../font/Mabry-Mono.woff2') format('embedded-opentype'),
         url('../font/Mabry-Mono.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	}
      
      html *
{
   color: #000 !important;
   font-family: "mabry-mono" !important;
}  
        body { margin:0; padding:0; }
        #map { width:100%; height:100%;top:0px}
    
.box_container {width:20px; height:13px;}
svg {fill:green; float:left}

#opacity-control{border: 1.5px solid #000;}

.map-overlay {
font: 12px/14px 'Helvetica Neue', Arial, Helvetica, sans-serif;
position: absolute;
width: 25%;
top: 0;
left: 38.5%;
padding: 10px;
}
 
.map-overlay .map-overlay-inner {
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 4px;
margin-bottom: 10px;
}
 
.map-overlay h2 {
line-height: 24px;
display: block;
margin: 0 0 10px;
}
 
.map-overlay .legend .bar {
height: 10px;
width: 100%;
background: linear-gradient(to right, #fca107, #7f3121);
}
 
.map-overlay input {
background-color: transparent;
display: inline-block;
width: 100%;
position: relative;
margin: 0;
cursor: ew-resize;
}