.dvt-vector-poc {
    position: relative;
    width: 100%;
    min-width: 0;
    background: var(--global-palette9, #fff);
}

.dvt-vector-poc__map {
    position: relative;
    width: 100%;
    height: var(--dvt-vector-map-height, 720px);
    min-height: 420px;
    overflow: hidden;
    background: #eef2ed;
}

.dvt-vector-poc__status {
    position: absolute;
    z-index: 25;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: .55rem .85rem;
    border-radius: .3rem;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 .25rem 1rem rgb(0 0 0 / 14%);
    color: var(--global-palette4, #2f2f2f);
    font-family: var(--global-body-font-family, sans-serif);
    font-size: .9rem;
}

.dvt-vector-poc__status[hidden] {
    display: none;
}

.route-explorer-map-host .maplibregl-map,
.route-explorer-map-host .maplibregl-canvas {
    font-family: var(--global-body-font-family, sans-serif);
}

.route-explorer-map-host .maplibregl-ctrl-group {
    overflow: hidden;
    border-radius: .25rem;
    box-shadow: 0 .15rem .65rem rgb(0 0 0 / 18%);
}

.route-explorer-map-host .maplibregl-ctrl button {
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: #fff;
}

.route-explorer-map-host .maplibregl-ctrl button:hover,
.route-explorer-map-host .maplibregl-ctrl button:focus-visible {
    background-color: #f2f5f2;
}

.dvt-vector-legend {
    position: absolute;
    z-index: 8;
    left: .75rem;
    bottom: 2.25rem;
    max-width: min(19rem, calc(100% - 1.5rem));
}

.dvt-vector-interaction-gate {
    position: absolute;
    z-index: 7;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: stretch;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgb(25 74 54 / 10%) !important;
    cursor: pointer;
    touch-action: pan-y;
}

.dvt-vector-interaction-gate:hover,
.dvt-vector-interaction-gate:focus,
.dvt-vector-interaction-gate:focus-visible {
    background: rgb(25 74 54 / 10%) !important;
}

.dvt-vector-interaction-gate[hidden] {
    display: none;
}

.dvt-vector-interaction-gate > span {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .55rem 1.25rem;
    border-radius: 0;
    color: #fff;
    background: linear-gradient(135deg, rgb(29 99 66 / 77%) 0%, rgb(13 13 12 / 0%) 100%);
    box-shadow: none;
    font: 700 clamp(.95rem, 1.6vw, 1.2rem)/1.25 var(--global-body-font-family, sans-serif);
    text-align: left;
}

.dvt-vector-poi-marker {
    /* MapLibre positions marker elements with a translate transform. Keep the
       element absolutely positioned; making it relative removes it from
       MapLibre's positioning system and causes markers to form a false list. */
    position: absolute;
    display: block;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    color: var(--global-palette3, #25312a);
    font-family: var(--global-body-font-family, sans-serif);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.15;
    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, 0 0 .2rem #fff;
}

.dvt-vector-poi-marker:hover,
.dvt-vector-poi-marker:focus-visible {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.dvt-vector-poi-marker.is-dragging,
.dvt-vector-poi-marker.is-saving {
    cursor: grabbing;
    opacity: .8;
}

.dvt-vector-poi-marker img {
    display: block;
    width: 2rem;
    height: 2rem;
    filter: drop-shadow(0 .08rem .14rem rgb(0 0 0 / 28%));
}

.dvt-vector-poi-marker[data-category="waypoint"] {
    width: 1.5rem;
    height: 1.5rem;
}

.dvt-vector-poi-marker[data-category="waypoint"] img {
    width: 1.5rem;
    height: 1.5rem;
}

.dvt-vector-poi-marker[hidden] {
    display: none !important;
}

.dvt-vector-poi-marker__label {
    position: absolute;
    top: 50%;
    left: calc(100% + .28rem);
    width: max-content;
    max-width: 11rem;
    transform: translateY(-50%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dvt-vector-poc__map:not(.has-local-poi-labels) .dvt-vector-poi-marker__label {
    display: none;
}

.dvt-vector-poc__map:not(.has-local-poi-labels) .dvt-vector-poi-marker:not([data-category="waypoint"]) img {
    width: 1.5rem;
    height: 1.5rem;
    margin: .5rem .25rem 0;
}

.dvt-vector-poc__map:not(.has-local-poi-labels) .dvt-vector-poi-marker[data-category="waypoint"] img {
    width: 1.15rem;
    height: 1.15rem;
    margin: .175rem;
}

.dvt-vector-poi-marker:hover,
.dvt-vector-poi-marker:focus-visible {
    z-index: 2;
    outline: none;
    color: var(--global-palette-highlight, #1d6342);
}

.route-explorer-focus-mode > .route-explorer-map-host {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto;
}

.route-explorer-focus-mode > .route-explorer-map-host .maplibregl-map,
.route-explorer-focus-mode > .route-explorer-map-host .maplibregl-canvas-container,
.route-explorer-focus-mode > .route-explorer-map-host .maplibregl-canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 720px) {
    .dvt-vector-poc__map {
        height: min(72vh, var(--dvt-vector-map-height, 620px));
        min-height: 34rem;
    }

    .dvt-vector-legend {
        left: .5rem;
        bottom: 1.8rem;
        max-width: calc(100% - 1rem);
    }

}