:root {
    --map-control-inset: 10px;
    --map-symbol-control-size: 36px;
    --map-symbol-control-gap: 14px;
    --map-drawer-control-width: 56px;
    --map-drawer-control-gap: 12px;
    --map-drawer-width: 258px;
    --map-bottom-control-gap: 8px;
    --map-bottom-control-clearance: 8px;
}

.map-controls-root .map-addon-fullscreen { top: var(--map-control-inset); left: var(--map-control-inset); }
.map-controls-root .map-addon-polylinemeasure { top: calc(var(--map-control-inset) + var(--map-symbol-control-size) + var(--map-symbol-control-gap)); left: var(--map-control-inset); }
.map-layer-controls { display: flex; align-items: center; flex-direction: column; gap: var(--map-drawer-control-gap); right: var(--map-control-inset); position: absolute; top: var(--map-control-inset); z-index: 1000; }
.map-controls-root .map-legend { position: absolute; right: 80px; top: var(--map-control-inset); z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.map-controls-root.has-top-right-controls .map-legend { top: 70px; }
.map-controls-root .map-legend:empty { display: none; }
.map-controls-root .map-legend-item { box-shadow: var(--mud-elevation-1); }
.map-branding { position: absolute; left: 0; bottom: calc(100% + 20px); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; pointer-events: none; user-select: none; }
.map-branding-avcso { height: 35px; width: auto; }
.map-fullscreen-watermark { display: none; width: 48px; height: 48px; object-fit: contain; opacity: 0.65; }
.custom-map:fullscreen .map-branding .map-fullscreen-watermark,
.custom-map.leaflet-pseudo-fullscreen .map-branding .map-fullscreen-watermark { display: block; }
.map-provider-options { display: flex; flex-direction: column; width: 100%; margin-top: 24px; gap: 12px; }
.map-provider-option { width: 100%; padding: 8px; border: 2px solid transparent; border-radius: 4px; text-transform: none; color: #232535; }
.map-provider-option.selected { background-color: #E6F1FF; border-color: #263BDA; color: #263BDA; }
.map-provider-option.selected:hover { background-color: #DBEAFE; }
.map-provider-option .mud-button-label { justify-content: flex-start; gap: 12px; width: 100%; }
.map-bottom-controls { position: absolute; right: var(--map-control-inset); bottom: calc(var(--map-bottom-obstruction, 0px) + var(--map-bottom-control-clearance)); z-index: 1000; display: grid; grid-template-columns: var(--map-symbol-control-size) 115px; column-gap: var(--map-bottom-control-gap); row-gap: var(--map-bottom-control-gap); align-items: end; pointer-events: none; }
.map-bottom-controls > * { pointer-events: auto; }
.map-bottom-controls > .coordinates-box { position: static !important; grid-column: 2; grid-row: 2; margin: 0 !important; }
.map-bottom-controls > .zoom-control-box { position: static !important; grid-column: 1; grid-row: 2; margin: 0 !important; align-self: center; }
.map-bottom-controls > #vessel-location-panel { position: static; grid-column: 2; grid-row: 1; justify-self: end; margin: 0; }
.map-controls-root .leaflet-control-playback .info-cur-speed { font-family: monospace; font-size: 12px; letter-spacing: -1px; white-space: nowrap; }