.mapboxgl-map { 
    font-size:1rem;
    font-family:'Work Sans', sans-serif; 
    font-weight:400;
    font-style:normal;
    box-sizing:border-box; -moz-box-sizing: border-box; 
}
.mapboxgl-ctrl-group { background-color:var(--cavelo-navy); }
.mapboxgl-ctrl-group button { background-color:var(--cavelo-white); }
.mapboxgl-ctrl button:not(:disabled):hover { background-color:var(--cavelo-platinum); }

.mapboxgl-ctrl.mapboxgl-ctrl-attrib { background-color:var(--cavelo-navy); color:var(--cavelo-grey) }

#panel-geographical-assets > .content > .body { max-height:calc(100vh - 18em); }

#map,
#map canvas {
    box-sizing: border-box;
    position:relative;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
}

/* #map { aspect-ratio:1/0.5; } */
[data-role="modal"] #map { 
    position: absolute; 
    aspect-ratio:auto !important;
} 

#map {
    border:2px solid var(--cavelo-navy);
    background:var(--cavelo-navy);
    overflow:visible;
    height:100%;
    color:var(--cavelo-black);
} 
#map .mapboxgl-ctrl-home > i { 
    /* opacity:0.8 !important;  */
    color:var(--cavelo-black); 
}

#map .mapboxgl-ctrl-top-right { 
    bottom:0; 
    max-height:calc(100% - 2em);
    z-index:10;
}
#map .mapboxgl-ctrl {
    box-shadow:none;
    border:1px solid var(--cavelo-navy);
    overflow:hidden;
}

/* #map .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl { 
    margin:0;
    padding:0.2rem 0.5rem;
    border:none; 
    background-color:var(--cavelo-navy); 
} */
 
#map .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl { 
    margin:0;
    padding:0.2rem 0.5rem;
    border:none; 
    background-color:var(--cavelo-navy); 
}

#map .mapboxgl-ctrl-list {
    margin:10px;
    position:relative;
    width:auto;
    height:auto;
    max-width:200px;
    overflow-y:auto; 
    overflow-x:hidden;
    max-height:calc(100% - 2em);
    box-shadow:none;
    border-top-left-radius:var(--border-radius); 
    border-bottom-left-radius:var(--border-radius); 
}

#map .mapboxgl-ctrl-list > div {
    border-width:0;
}

body.small #map .mapboxgl-ctrl-list,
body.xsmall #map .mapboxgl-ctrl-list { display:none; }


/* #map .mapboxgl-ctrl-list::-webkit-scrollbar { width:1em; border-top-right-radius:0.25em; border-bottom-right-radius:0.25em; }
#map .mapboxgl-ctrl-list::-webkit-scrollbar-track { background-color:var(--cavelo-platinum); box-shadow: inset var(--box-shadow); border-top-right-radius:0.25em; border-bottom-right-radius:0.25em; }
#map .mapboxgl-ctrl-list::-webkit-scrollbar-thumb {
    border-top-right-radius:0.25em; border-bottom-right-radius:0.25em;
    background-color: var(--cavelo-grey);
    border: 1px solid var(--cavelo-platinum);
    outline: none;
} */

#map .mapboxgl-ctrl-item {
    width:100%; 
    text-align:left;
    white-space: nowrap;
    vertical-align:middle;
    height:auto !important; 
    padding:0.5em 1em;
}

#map .mapbox-tooltip-list { max-height:9em; white-space:nowrap; overflow-x:hidden; overflow-y:auto; min-width:fit-content; padding-right:1em; }
#map .mapbox-tooltip { color: var(--cavelo-black); z-index:9999; }

#map .mapboxgl-user-location-dot, 
#map .mapboxgl-user-location-dot:before { background-color:var(--cavelo-white); }

#map .mapboxgl-popup { min-width:fit-content; }
#map .mapboxgl-popup-content > img { margin-right:0.5rem; }
#map .mapboxgl-popup-content {
    border-radius:0.75rem;
    background-color:var(--cavelo-grey);
    border:2px solid var(--cavelo-navy);
    color:var(--cavelo-navy);
    padding:1rem;
}


.minimap { box-shadow: inset var(--box-shadow); }


#map .mapbox-improve-map { display:none; max-width:0; max-height:0; padding:0; margin:0; }


.mapbox-tooltip-list::-webkit-scrollbar { width: 0.5rem; }
.mapbox-tooltip-list::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; }
.mapbox-tooltip-list::-webkit-scrollbar-thumb { background: var(--cavelo-navy); border-radius: 10px; }


.mapboxgl-ctrl-list::-webkit-scrollbar { width: 0.5rem; }
.mapboxgl-ctrl-list::-webkit-scrollbar-track { box-shadow: inset 0 0 5px var(--cavelo-platinum); border-radius: 10px; }
.mapboxgl-ctrl-list::-webkit-scrollbar-thumb { background: var(--cavelo-grey); border-radius: 10px; }


[data-role="panel"] #map .mapboxgl-canvas-container, 
[data-role="panel"] #map .mapboxgl-canvas { 
    position:relative; aspect-ratio: 1 / 0.4 !important; 
}