@import 'resets.css';
@import 'fonts.css';

:root {
    --primary-font: 'Avenir', helvetica, arial, sans-serif;
    --red: #ec0000;
}

body {
    background: #eee;
    color: #000;
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 500;

    user-select: none;
}

.main {
    background: #fff;
    width: 1920px;
    height: 1080px;

    overflow-x: hidden;

    position: relative;
    display: grid;
    grid-template-columns: 100px 1080px auto;
    grid-template-areas:
        'gutter map sidebar';

    font-size: 1.5625rem;


    &.hidden {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
    }
}

.main .map {
    grid-area: map;
    isolation: isolate;

    & img {
        display: block;
    }
}

/*
 * Notification that the app is about to reload the page
 */
.main .pop-over-notice {
    background-color: #fff;
    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);

    position: absolute;
    top: 100px;
    left: 0;
    z-index: 1;

    padding: 20px 20px 15px 35px;
    display: grid;
    grid-template-columns: 65px minmax(min-content, 400px);
    grid-template-rows: 1fr;
    grid-template-areas: 'icon text';
    gap: 20px;

    font-size: 20px;
    font-weight: 500;
    transition: translate 0.5s ease-out;

    &.hidden {
        translate: -100%;
    }

    &:before {
        content: '';
        background: url('../img/misc/icon_notification.png') no-repeat 0 0;
        min-width: 28px;
        min-height: 32px;
        grid-area: icon;
    }

    & h1, & h2, & h3 {
        margin: 0;
        font-size: 25px;
        font-weight: 900;
        line-height: 1.2;
    }

    & p {
        max-width: 30ch;
        margin: 0;
    }
}

/*
 * Panel that slides open when the user opens an item / an item's media.
 * And also the sidebar that is always open at the bottom-most layer.
 */
.main div.fly-over,
.main aside {
    background: #fff;
    grid-area: sidebar;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    padding: 100px;
    position: relative;
    isolation: isolate;

    /*&.with-introduction-text {
        & .project-description {
            grid-template-rows: min-content 1fr;
        }
    }

    &.with-filter-options {
        & .primary-filter-buttons,
        & .primary-filter-buttons ~ button {
            opacity: 1;
            pointer-events: auto;
        }
    }*/

    &:not(.with-introduction-text) .project-description {
        & > *:not(:first-child) {
            /*display: none;*/
        }
    }

    & .filter-address {
        --_drop_shadow_color: rgba(0, 0, 0, 0.2);
        background-color: #fff;
        box-shadow: 2px 2px 6px 0 var(--_drop_shadow_color);
        transition: 0.25s box-shadow ease-in-out;
        position: relative;
        margin-bottom: 30px;

        display: grid;
        grid-template-columns: auto min-content;
        grid-template-areas: 'input button';
        align-items: center;

        &:has(:focus) {
            --_drop_shadow_color: hsla(199, 100%, 25%, 0.4);
        }
    }

    & .address-suggestions {
        --_max-items: 5;
        --_height: 80px;

        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease-in-out;
        box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
        background-color: #fff;

        position: absolute;
        inset: 110px 0 auto 0;
        min-height: 20px;

        display: grid;
        grid-template-columns: auto;
        grid-auto-rows: minmax(var(--_height), min-content);
        max-height: calc(var(--_max-items) * var(--_height));
        overflow: auto;
        scrollbar-color: var(--red) black;
        scrollbar-width: thin;

        & div {
            font-style: italic;
        }

        & .hidden {
            display: none;
        }

        & div,
        & button {
            padding: 25px 20px;
            font-size: 25px;
            font-weight: 500;
            text-align: left;
            line-height: 1.1;
        }

        & button {
            background: transparent none;
            border: 0;
            border-bottom: 1px solid #e8e8e8;
            padding: 25px 20px;
            margin: 0;
            font-family: var(--primary-font);
            border-radius: 0;

            &:last-child {
                border-bottom: none;
            }
        }
    }

    &.with-address-suggestions {
        & .address-suggestions {
            opacity: 1;
            pointer-events: auto;
        }

        & .primary-filter-buttons,
        & .primary-filter-buttons ~ button {
            font-family: var(--primary-font);
            opacity: 0;
            pointer-events: none;
        }
        & .project-description {
            grid-template-rows: min-content 0fr;
        }
    }

    & .filter-address input {
        grid-area: input;
        background: transparent;
        width: 100%;
        min-height: 80px;
        padding: 25px 25px 22px 25px;
        box-sizing: border-box;
        border: 0;
        outline: 0;

        font-family: var(--primary-font);
        font-size: 25px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        color: #000;
        line-height: 1.2;
        letter-spacing: normal;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: #bebebe;
            font-weight: 900;
        }

        &:placeholder-shown ~ button[type="button"]:not(.search-submit-fake) {
            display: none;
        }
        &:not(:placeholder-shown) ~ button[type="submit"],
        &:not(:placeholder-shown) ~ button.search-submit-fake {
            display: none;
        }
    }

    & .filter-address > button {
        grid-area: button;
        z-index: 1;
        background: transparent url('../img/filter_form/icon_search_clear.png') no-repeat 50% 50%;
        background-size: auto;
        border: 0;
        width: 32px;
        height: 32px;
        padding: 20px;
        /* Put padding on the outside of the element, so the button can easily become larger & easier to hit */
        box-sizing: content-box;
        font-family: var(--primary-font);
        cursor: pointer;

        & span {
            display: none;
        }

        &[type="submit"],
        &.search-submit-fake {
            background-image: url('../img/filter_form/icon_search.png');
        }
    }

    & .primary-filter-buttons,
    & .primary-filter-buttons ~ button {
        font-family: var(--primary-font);
        transition: opacity 0.5s ease-in-out;
    }

    & .filters button:not(.primary-filter-buttons button) {
        text-transform: lowercase;
    }

    & #filter_kademuren:before,
    & #filter_bruggen:before {
        margin-right: 65px;
        vertical-align: middle;
        display: inline-block;
    }

    & #filter_kademuren {
        &:before {
            content: url('../img/filter_form/icon_kademuur.png');
            height: 30px;
            width: 34px;
        }
        &[aria-pressed="true"]:before {
            content: url('../img/filter_form/icon_kademuur_active.png');
        }
    }

    & #filter_bruggen {
        &:before {
            content: url('../img/filter_form/icon_bruggen.png');
            height: 20px;
            width: 34px;
        }
        &[aria-pressed="true"]:before {
            content: url('../img/filter_form/icon_bruggen_active.png');
        }
    }

    & .primary-filter-buttons {

    }

    & .project-description {
        align-self: end;
        display: grid;
        /* Shown by default */
        grid-template-rows: min-content 1fr;
        transition: grid-template-rows 0.5s ease-in-out;

        & img:first-child {
            display: block;
        }

        & p:last-child {
            overflow: hidden;
            margin: 0;
        }

        & img:first-child ~ * {
            margin-top: 10px;
        }
    }

    & .media-header {
        display: grid;
        /*grid-template-columns: auto repeat(4, 1fr);*/
        grid-template-columns: 1fr repeat(4, min-content);
        grid-template-rows: min-content;
        gap: 10px;

        &.media-header > h3 {
            max-width: none;
        }
    }

    & .media-header.media-header button {
        font-family: var(--primary-font);
        padding: 8px 10px 8px 10px;
        min-width: 90px;
        grid-template-columns: auto;
        display: inline-grid;
    }

    .same-width {
        display: inline-grid;
        grid-auto-rows: auto;
    }
}

.second-screen,
.main div.fly-over,
.main aside {
    & .media-options,
    & .media-header,
    & .upper-title {
        position: relative;
        z-index: 2;

        & h1, & h3 {
            background-color: #fff;
            box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);

            max-width: 540px;
            margin: 0 0 15px 0;

            grid-template-columns: 80px 1fr;
            gap: 15px;

            &:before {
                content: url('../img/media/icon_kademuur_medium.png');
                width: 57px;
                height: 34px;
                justify-self: center;
            }
        }

        &.type-brug h1:before,
        &.type-bridge h1:before,
        &.type-brug h3:before,
        &.type-bridge h3:before {
            content: url('../img/media/icon_brug_medium.png');
        }

        & button.hidden {
            display: none;
        }

        & h1,
        & h3,
        & button {
            font-family: var(--primary-font);
            min-height: 80px;
            padding: 8px 30px 8px 10px;
            box-sizing: border-box;
            align-items: center;
            display: grid;
            font-size: 25px;
            font-weight: 500;
            line-height: 1.2;
        }

        /* These buttons are larger and are non-bold, compared to the other buttons */
        & button {
            font-family: var(--primary-font);
            grid-template-columns: 100px 1fr;
            gap: 15px;
            margin-bottom: 15px;

            & img {
                justify-self: center;
            }
        }
    }
}

/*
 * The sidebar that slides open after opening an item or an item's media.
 */
.main .fly-over {
    transition: translate 0.5s ease-out;
    translate: 0px;

    &.hidden {
        translate: calc(100% + 100px);
    }

    & .fly-over-close-button {
        --width: 92px;

        background: #fff url('../img/misc/close_fly-over_menu.png') no-repeat 50% 50%;
        background-size: auto;
        cursor: pointer;
        border: 0;
        margin: 0;
        padding: 0;
        min-width: var(--width);
        min-height: 80px;
        box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
        position: absolute;
        left: calc(var(--width) * -1);
        top: 100px;

        clip-path: inset(-100px 0 -100px -100px);

        & span {
            display: none;
        }
    }
}

/*
 * The menu that opens when a media item is chosen.
 */
.main div.fly-over {
    grid-area: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1080px;

    background: #fff;
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: min-content;
    padding: 100px;
    isolation: isolate;

    & .fly-over-close-button {
        background-image: url('../img/misc/back_fly-over_menu.png');
    }

    & #all-unfiltered-media {
        display: none;
    }
}


/*
 * Buttons that look like white rectangles with drop-shadows.
 */
.admin-toolbar .btn,
.main .btn,
.primary-button {
    --_drop_shadow_color: rgba(0, 0, 0, 0.2);
    background-color: #fff;
    border: 0;
    min-width: min-content;
    min-height: 50px;
    padding: 12px 30px 8px 22px;
    margin: 2px 2px 5px 2px;
    box-shadow: 2px 2px 6px 0 var(--_drop_shadow_color);
    cursor: pointer;

    font-family: var(--primary-font);
    font-size: 20px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: left;
    color: #000;

    transition: background-color 0.25s ease-out;

    &:focus {
        /*--_drop_shadow_color: hsla(199, 100%, 25%, 0.4);*/
        outline: 0;
    }

    &[aria-pressed="true"] {
        background-color: var(--red);
        color: #fff;
    }

    &.toggle_icon:has(img ~ img) {
        /* By default the second image is hidden */
        &:not([aria-pressed="true"]) {
            & img ~ img {
                display: none;
            }
        }
        /* When pressed the first image is hidden */
        &[aria-pressed="true"] {
            & img:has(~ img) {
                display: none;
            }
        }
    }
}

.keyboard-wrapper {
    position: absolute;
    width: 1080px;
    top: 850px;
    height: 230px;
    left: 100px;

    display: grid;
    overflow: hidden;
    grid-template-rows: 1fr;
    align-content: end;
    transition: grid-template-rows 0.5s ease-in-out;
    & .animation-wrapper {
        overflow: hidden;
    }
    &.hidden {
        grid-template-rows: 0fr;
        pointer-events: none;
    }
}
.keyboard-wrapper .simple-keyboard {
    font-weight: normal;

    & .hg-rows {
        /* Add a padding to the second .hg-row  */
        & .hg-row:nth-child(1) {
            padding-left: 0;
        }
        & .hg-row:nth-child(2) {
            padding-left: 1em;
            padding-right: 4em;
        }
        & .hg-row:nth-child(3) {
            padding-left: 2em;
            padding-right: 6em;
        }
        & .hg-row:nth-child(4) {
            padding-left: 3em;
            padding-right: 0;
        }
        & .hg-row:nth-child(5) {
            padding-left: 5em;
            padding-right: 8em;
        }
        /*& .hg-button-enter {
            flex-grow: 0.15;
            margin-left: 1em;
        }*/
    }
}

/*
 * Media controls which look like a carousel
 */
.media-controls-slider {
    margin-top: 65px;

    & .break-out-of-padding {
        margin: 0 -100px;
    }

    & .owl-item.owl-item {
        /*
         * Because of the size of the container and the margin, the item is 500px in size.
         * Inactive slides can span a fraction of the size of their containers, while the active
         * slide can break out of its container with a negative margin, taking up some of the white-space.
         */
        min-height: 650px;

        .projector-screen-content {
            display: none !important;
        }

        /* Inactive slides */
        & .thumbnail {
            background: white;
            width: 444px;
            height: 250px;
            margin: 150px auto 0;
            position: relative;
            box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
            transition: width 0.25s linear, height 0.25s linear, margin 0.25s linear;
        }

        &.center .preview {
            display: none;
        }
        &:not(.center) .preview ~ * {
            display: none;
        }
        & .preview {
            height: 100%;
            width: 100%;
        }
        & .preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        & .item-title {
            width: 100%;
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin: 20px 0 0 0;

            font-size: 20px;
            font-weight: 900;
            line-height: 1.2;

            transition: margin-top 0.25s linear, font-size 0.25s linear;
        }

        /* The active item is the current item and the next one, but not the previously active. */
        &.active {}
        &.center {
        }

        &.center .thumbnail {
            background: white;
            width: 572px;
            height: 572px;
            margin: 0 -36px;
        }

        &.center .item-content {
            display: block;
            position: absolute;
            inset: 0 0 0 0;
        }

        &.center .item-title {
            font-size: 40px;
            margin-top: 28px;
        }
    }

    & .video-controls,
    & .i360-controls,
    & .image-controls,
    & .text-controls {
        display: grid;
        min-height: 150px;
        height: 100%;
        margin: auto;
        justify-items: center;

        & h5 {
            font-size: 25px;
            font-weight: 900;
            line-height: 1.2;
            grid-area: text;
            margin: 0;
            padding: 15px 0;
            text-align: center;
        }
        /* By default the alternate title is not visible. */
        & h5.not-scrollable {
            display: none;
        }

        /* If the remote element is not scrollable, show alternate text & hide some UI. */
        &.not-scrollable {
            & h5 {
                display: none;
            }
            & h5.not-scrollable {
                display: block;
            }
            & > button {
                display: none;
            }
        }

        & button {
            font-family: var(--primary-font);
            background: transparent none;
            border: 0;
            margin: 0;
            padding: 0;
            outline: none;

            &:focus {
                outline: none;
            }

            & span {
                display: none;
            }
        }
    }

    & .video-controls {
        width: 410px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: min-content min-content;
        grid-template-areas:
            'text text text'
            'backward pause forward';
        align-content: center;

        & .pause, & .backward, & .forward {
            &:before {
                content: url('../img/media/button_video_pause.png');
            }
        }
        & .pause.paused {
            &:before {
                content: url('../img/media/button_video_play.png');
            }
        }
        & .backward {
            justify-self: start;
            &:before {
                content: url('../img/media/button_video_backward.png');
            }
        }
        & .forward {
            justify-self: end;
            &:before {
                content: url('../img/media/button_video_forward.png');
            }
        }
    }

    & .i360-controls,
    & .image-controls,
    & .text-controls {
        padding: 33px 18px;
        height: 100%;
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr min-content 1fr;
        grid-template-areas:
            'up'
            'text'
            'down';
        align-items: start;

        & h5 {
            width: 410px;
        }

        & button {
            font-family: var(--primary-font);
        }
        & .up {
            grid-area: up;
            &:before {
                content: url('../img/media/button_arrow_up.png');
            }
        }
        & .down {
            grid-area: down;
            align-self: end;
            &:before {
                content: url('../img/media/button_arrow_down.png');
            }
        }
        & .left {
            grid-area: left;
            justify-self: start;
            &:before {
                content: url('../img/media/button_arrow_left.png');
            }
        }
        & .right {
            grid-area: right;
            justify-self: end;
            &:before {
                content: url('../img/media/button_arrow_right.png');
            }
        }
    }

    & .i360-controls {
        padding: 33px 33px;
        grid-template-columns: 1fr 230px 1fr;
        grid-template-rows: 1fr min-content 1fr;
        grid-template-areas:
            '  .   up    .  '
            'left text right'
            '  .  down  zoom';

        & h5 {
            width: auto;
        }

        .zoom-buttons {
            grid-area: zoom;
            display: grid;
            grid-template-columns: 1fr;
            gird-template-rows: repeat(auto-fit, 1fr);
            gap: 15px;
            justify-self: end;
            align-self: end;
        }
        .zoom-buttons button {
            font-family: var(--primary-font);
            box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
        }
        .zoom-buttons .zoom-in {
            &:before {
                content: url('../img/media/button_360_zoom_in.png');
            }
        }
        .zoom-buttons .zoom-out {
            &:before {
                content: url('../img/media/button_360_zoom_out.png');
            }
        }
    }

    & .owl-nav {
        display: none;
    }

    & .owl-dots {
        margin-top: 52px;
        display: grid;
        gap: 20px;
        justify-content: center;
        grid-template-columns: repeat(auto-fit, 22px);

        & .owl-dot {
            border-radius: 100%;
            width: 100%;
            aspect-ratio: 1;
            background: white;
            box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
            transition: background-color 0.1s linear;
        }

        & .owl-dot.active {
            background: var(--red);
        }
    }
}

#touch-map {
    width: 1080px;
    height: 1080px;
}

.second-screen {
    background: #000;

    &.hidden {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
    }
}
#projector-map {
    width: 1080px;
    height: 1080px;
    margin: 0 auto;
    isolation: isolate;
}
#projector-map .marker-detail {
    --_margin_to_obscure_original_marker: 18px;
    margin-bottom: calc(35px - var(--_margin_to_obscure_original_marker));
    border-radius: 0;

    &:after {
        content: '';
        display: block;
        background: var(--red);
        height: 22px;
    }

    & .leaflet-popup-content-wrapper {
        border-radius: 0;
        box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
        padding: 33px;
    }

    & .leaflet-popup-tip-container {
        height: 40px;
        width: 80px;
        margin-left: -40px;
        margin-top: 22px;
    }

    & .leaflet-popup-tip-container .leaflet-popup-tip {
        background-color: var(--red);
        width: 35px;
        height: 35px;
        scale: 1 1.25;
        margin-top: -18px;
    }

    & .leaflet-popup-content {
        margin: 0;
        padding: 0;
    }

    & .marker-detail-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: min-content min-content 1fr;
        grid-template-areas:
            'icon'
            'title'
            'content';

        & > img {
            grid-area: icon;
            justify-self: end;
        }
        & > h3 {
            grid-area: title;
            margin: 0;
            font-size: 25px;
            font-weight: 900;
            line-height: 1.2;

            &:after {
                content: url('../img/misc/title-wave-underline.png');
                display: block;
                width: 280px;
                height: 28px;
                max-width: 100%;
                aspect-ratio: 1/10;
                margin-top: 8px;
                margin-bottom: 11px;
            }
        }
        & > div {
            grid-area: content;
            font-size: 20px;
            font-weight: 500;
            line-height: 1.2;

            & p {
                margin-top: 0;
                margin-bottom: 1em;
            }

            & p:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.second-screen {
    position: relative;

    & .scrollable {
        overflow: auto;
        display: grid;
        scrollbar-color: var(--red) black;
        scrollbar-width: thin;
        padding-right: 30px;
        grid-template-rows: min-content auto;
    }

    & .type-text .scrollable {
        scrollbar-gutter: stable;
    }

    & .type-image-variant-vertical {
        & .scrollable {
            display: grid;
            grid-template-columns: minmax(200px, 63%) 1fr;
            /*grid-template-rows: 1fr min-content;*/
            grid-template-rows: min-content 1fr;
            grid-template-areas:
                'image title'
                'image text ';
            gap: 0px 30px;

            & .upper-title {
                grid-area: label;
            }

            & .media-illustration {
                grid-area: image;
                position: sticky;
                top: 0;
            }
            & .wavy-title {
                grid-template-columns: max-content;
                grid-area: title;

                & > * {
                    max-width: 450px;
                    margin-top: 0;
                }
            }
        }
    }

    & .type-video {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: min-content 1fr min-content min-content;

        & video {
            width: 100%;
            align-self: center;
        }

        & .wavy-title.wavy-title {
            justify-self: center;
            grid-template-columns: minmax(min-content, 1fr);
        }
    }

    & .projector-screen-content {
        position: absolute;
        display: grid;
        width: 1080px;
        height: 1080px;
        inset: 0 auto 0 50%;
        margin-left: -540px;

        &.hidden {
            opacity: 0;
        }
    }

    & .media-display {
        background: #fff;
        display: grid;
        grid-template-rows: min-content;
        transition: opacity 0.25s linear;
        padding: 50px;
        overflow: auto;

        &.hidden {
            opacity: 0;
        }

        &.type-text h2 {
            font-size: 80px;
        }

        & img {
            max-width: 100%;
            max-height: 1080px;
            height: auto;
            display: block;
        }

        .wavy-title {
            display: grid;
            grid-template-columns: fit-content(100%);
            grid-template-rows: min-content auto;

            > * {
                overflow: hidden;
                text-overflow: ellipsis;

                &:after {
                    content: '';
                    background: transparent url('../img/media/title_underline.png') repeat-x 0 0;
                    height: 33px;
                    /*max-width: 331px;*/
                    display: block;
                    margin-top: 12px;
                    margin-bottom: 32px;
                }
            }
        }

        & h2 {
            font-size: 50px;
            line-height: 1.2;
            font-weight: 900;
            margin: 18px 0 0 0;
        }

        & h3, & h4 {
            font-size: 60px;
            font-weight: 900;
            line-height: 1;
            margin: 18px 0 7px 0;
        }

        & p {
            margin: 0 0 1em 0;
            font-size: 40px;
            line-height: 1.2;
        }

        & p b, & p strong {
            font-weight: 900;
        }

        & video {
            max-width: 100%;
        }

        & .trackbar {
            --trackbar-progress: 0;
            background: #000;
            height: 10px;
            position: relative;

            &:after {
                content: '';
                background: var(--red);
                display: block;
                height: 100%;
                width: calc(var(--trackbar-progress, 0) * 1%);
            }

            & .time-elapsed,
            & .time-total {
                position: absolute;
                top: -30px;
            }
            & .time-total {
                right: 0;
            }
        }

        & canvas {
            width: 100%;
            height: 100%;
            background: #eee;
            position: absolute;
            inset: 0 0 0 0;
        }
    }
}

.leaflet-marker-icon.marker-type-brug-active,
.leaflet-marker-icon.marker-type-kade-active {
    z-index: 1000000000 !important;
}

.leaflet-marker-icon.marker-cluster-grouped {
    background: transparent url('../img/map/marker.png') no-repeat 50% 100%;
    min-width: 53px;
    min-height: 62px;
    display: grid;
    justify-content: center;
    align-content: center;
    font-size: 27px;
    font-weight: 900;
    line-height: 1.28;
    color: #000;
    padding: 5px 3px 16px 2px;

    & .over-100 {
        font-size: 20px;
    }
    & .over-100 {
        font-size: 17px;
    }
}

.leaflet-control-zoom {
    scale: 1.8;
    translate: -40% -40%;
    left: -100px;
    bottom: 100px;
    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2) !important;
    border-radius: 0 !important;
    border: none !important;

    & .leaflet-control-zoom-in {
        border-bottom: none !important;
    }
}

body:not(.admin-enabled) {
    & .admin-toolbar {
        display: none;
    }
    & .admin-only {
        display: none !important;
    }
}

.admin-toolbar {
    background: #ccc;
    border-bottom: 1px solid #000;
    padding: 10px 20px;
    display: flex;
}
.admin-toolbar .admin-logout {
    margin-left: auto;
}
.admin-toolbar .r {
    text-align: right;
}
.admin-toolbar:has(.admin-normal-display[aria-pressed="true"]) {

}
.fly-over-media .admin-media-add-form,
.fly-over-media .admin-item-edit-form {
    display: none;
}
.admin-media-add,
.admin-item-edit {
    & .media-header .btn {
        display: none !important;
    }
    & .media-controls-slider {
        display: none;
    }

    & .media-form-elements {
        display: grid;
        grid-template-columns: [label] max-content [input] 1fr [extra] fit-content(150px);
        grid-auto-rows: min-content;
        gap: 10px;

        & > div {
            grid-column: extra;
            font-size: 12px;
        }

        & > label {
            grid-column: label;
            text-align: right;
            font-size: 20px;

            &:after {
                content: ':';
            }
        }
        & > .tox-tinymce,
        & > input,
        & > textarea,
        & > select {
            grid-column: input;
            align-self: start;
            max-width: 50ch;
            box-sizing: border-box;
            font-size: 20px;
        }

        & > textarea {
            max-width: none;
            font-size: 20px;
        }

        & > input[type="file"] {
        }


        & input[type="text"] {
            padding: 5px 10px;
        }
        & textarea {
            padding: 5px 10px;
        }
    }
}

.admin-media-add {
    & .admin-media-add-form {
        display: block;

        & button[type="submit"] {
            margin-top: 20px;
        }
    }
}
.admin-item-edit {
    & .admin-item-edit-form {
        display: block;
    }
}

.media-edit-buttons {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;

    & .btn {
        background: #fff !important;
        padding: 12px 30px 8px 22px !important;
        margin: 2px 2px 5px 2px !important;
    }

    & .btn.media-delete-button {
        transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
        &:hover {
            background-color: var(--red) !important;
            color: #fff;
        }
    }

}