.map-ui {
    --map-ui-min-height: 420px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.leaflet-control-true-north {
    color: #243746;
    background: #fff;
    border-radius: 4px;
    font: 13px 'Jost', Arial, sans-serif;
    pointer-events: none;
}

@media (max-width: 992px) {
    .map-ui,
    #reporter_dist_map.map-ui {
        --map-ui-min-height: 440px;
        height: 440px !important;
    }
}

@media (max-width: 768px) {
    .map-ui,
    #reporter_dist_map.map-ui {
        --map-ui-min-height: 420px;
        height: 420px !important;
    }
}

.map-ui.map-ui--compact,
#reporter_dist_map.map-ui--compact {
    height: max(var(--map-ui-min-height), var(--map-ui-height, 420px)) !important;
}