@media all {
    /* Cartography admin */
    header nav .cartography::before,
    .cartography .subhead::before {
        content: ""; /* fas fa-map-marked-alt */
    }
    .cartography .no-resources:before {
        content: "";
    }
    #cartography .no-resources:before {
        content: "";
    }

    /* Marker divIcon: override Leaflet default white bg. */
    .leaflet-styleeditor-glyphicon-marker-wrapper {
        background: none;
        border: none;
    }
    /* Selection highlight: use outline instead of border to
       avoid shifting the marker position. */
    .leaflet-styleeditor-marker-selected {
        border: none !important;
        left: 0 !important;
        top: 0 !important;
        outline: 3px dashed rgba(254, 87, 161, .6);
        outline-offset: -3px;
    }
    /* Use local Leaflet marker icon for size selectors. */
    .leaflet-styleeditor-sizeicon {
        background-image: url(../vendor/leaflet/images/marker-icon-2x.png);
    }

    /* Marker icon: colored SVG pin with FA icon overlay. */
    .cartography-marker {
        background-size: contain;
        background-repeat: no-repeat;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        color: #fff;
        text-shadow: 0 0 2px rgba(0, 0, 0, .4);
    }
    .cartography-marker .fas {
        margin-top: 20%;
    }
    .cartography-marker-s {
        width: 25px;
        height: 41px;
        font-size: 10px;
    }
    .cartography-marker-m {
        width: 30px;
        height: 50px;
        font-size: 12px;
    }
    .cartography-marker-l {
        width: 35px;
        height: 58px;
        font-size: 14px;
    }

    /* Map container sizing: fill viewport below tabs. */
    .cartography-section {
        display: flex;
        flex-direction: column;
    }
    .cartography-map {
        /* 180px = header + tabs + legend + guide line. */
        height: calc(100vh - 180px);
        min-height: 400px;
    }
    .cartography-guide {
        padding: 6px 0;
        font-size: 0.9em;
        flex-shrink: 0;
    }

    /* Prevent page scroll when interacting with the map. */
    .leaflet-container {
        touch-action: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        overscroll-behavior: contain;
    }
    .leaflet-container img {
        -webkit-user-drag: none;
        user-drag: none;
    }

    /* Hide "Add links" on public resource page blocks: it relies on the
       admin sidebar select. .block-cartography is only emitted by the public
       resource page block. */
    .block-cartography .annotation-attribute.leaflet-styleeditor-uiElement:has(.leaflet-styleeditor-oalinking) {
        display: none;
    }

    /* Show #select-resource sidebar above pseudo-fullscreen map only when explicitly requested (Add links). */
    .cartography-fullscreen.cartography-sidebar-active #select-resource {
        z-index: 100000 !important;
        box-shadow: 0 1px 7px rgba(0, 0, 0, .65);
    }

    .leaflet-styleeditor-label {
        width: 100%;
    }

    /* Leaflet layers */
    .leaflet-control-layers input[name="leaflet-base-layers"] {
        font-size: 16px;
        line-height: 24px;
    }

    /* Popup content */
    .leaflet-popup-content .annotation-body-rdf-value,
    .leaflet-popup-content .annotation-body-oa-linking {
        margin-bottom: 18px;
    }
    .leaflet-popup-content .annotation-body-oa-linking .value {
        display: flex;
    }
    .leaflet-popup-content .annotation-body-oa-linking .value .resource-oa-linking {
        margin: 0;
        position: relative;
    }
    .leaflet-popup-content .annotation-body-oa-linking .value .resource-oa-linking img {
        height: 24px;
        margin-right: 6px;
    }
    .leaflet-popup-content .annotation-caption {
        /* TODO Fix this min width when the popup is small. */
        min-width: 60px;
    }
    .leaflet-popup-content .annotation-caption .actions {
        /* TODO Fix this margin. */
        margin-top: -4px;
    }
    .leaflet-popup-content .annotation-metadata {
        color: #444444;
        border-top: #888888 1px solid;
        margin-top: 6px;
        padding-top: 6px;
    }
    .leaflet-popup-content .actions {
        float: right;
        list-style: none;
    }

    /* Icon field container: position context for dropdown. */
    .leaflet-styleeditor-uiElement {
        position: relative;
    }
    /* Icon display box: fit the marker, center it. */
    .leaflet-styleeditor-select {
        height: 44px;
    }
    .leaflet-styleeditor-select .leaflet-styleeditor-select-image-wrapper {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    /* Icon dropdown: just below the select box. */
    .leaflet-styleeditor-select-option-wrapper {
        top: auto;
        bottom: auto;
        left: 0;
        right: 0;
        max-height: 200px;
        overflow-y: auto;
        z-index: 10;
    }
    /* Scale markers down in the dropdown. */
    .leaflet-styleeditor-select-option .cartography-marker {
        width: 20px;
        height: 33px;
        font-size: 8px;
    }

    /* Style editor */
    .leaflet-styleeditor-interior {
        width: inherit;
        padding-right: 12px;
        overflow-x: hidden;
    }
    .leaflet-styleeditor-interior .value.selecting-resource {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
    /* Each linked resource on its own line. */
    .leaflet-styleeditor-interior ._oaLinking {
        display: flex;
        flex-direction: column;
    }
    .leaflet-styleeditor-interior ._oaLinking .value {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        width: 100%;
    }
    .leaflet-styleeditor-interior ._oaLinking .value img {
        height: 24px;
        margin-right: 4px;
    }
    .leaflet-styleeditor-interior .value.selecting-resource .actions {
        display: flex;
        margin-left: auto;
        list-style: none;
        flex-shrink: 0;
    }
    .leaflet-styleeditor-interior .value.selecting-resource .actions a:link,
    .leaflet-styleeditor-interior .value.selecting-resource .actions a:visited {
        color: #A91919;
    }
    .leaflet-styleeditor-interior  textarea.leaflet-styleeditor-input {
        max-height: unset;
    }
    /* Sliders must fit inside the sidebar padding. */
    .leaflet-styleeditor-interior input[type="range"] {
        width: 100%;
        box-sizing: border-box;
    }
    .leaflet-styleeditor-header {
        background-color: inherit;
    }
    .leaflet-styleeditor-button:hover {
        background-color: #e8e8e8;
    }
    .leaflet-styleeditor-button {
        background-color: inherit;
    }
}