@import url("https://api.mapbox.com/mapbox-gl-js/v3.10.0/mapbox-gl.css");

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

.metro-interactive{
    --map-height: 65vh;
    width:100%;
    max-width:1400px;
    margin:2em auto;
    position:relative;
}


.metro-interactive div.outer-mapbox{
    min-height:400px;
    width:100%;
    height:var(--map-height);
    position:relative;
}

.metro-interactive .map-dropdown{
    position:absolute;
    top:0px;
    left:0px;
    z-index:101;
    background-color:rgba(255,255,255,0.8);
    border-radius:0px 0px 10px 0px;
    padding:5px 10px 10px 10px;
}

.metro-interactive .map-dropdown p{
    text-transform: uppercase;
    line-height:1em;
    font-size:0.8em;
    margin:5px 0px;
}   

.metro-interactive .tooltip-text p{
    font-size:13px;
    line-height:1.25em;
}

.metro-interactive p.legend-entry-text{
    font-size:15px;
    line-height:1.3em;
}