:root {
    --map-color-red: 163 32 53;
    --map-color-blue: 0 106 166;
    --map-color-green: 119 120 63;
    --map-color-purple: 112 30 71;

    --map-gap-vertical: 1em;
    --map-gap-horizontal: 2em;
    --map-gap: var(--map-gap-vertical) var(--map-gap-horizontal);

    --map-font-size: 1.4em;
    --map-border-radius: 1em;
    --map-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2);
    --map-blur: 1em;


}

.mobile-message {
    display: none;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: var(--map-border-radius);
    padding: var(--map-gap);
    margin: 2rem auto;
    max-width: 600px;
    text-align: center;
    box-shadow: var(--map-box-shadow);
}

@media (max-width: 1199px) {
    .mobile-message {
        display: block !important;
    }
    .lw-grants-map {
        display: none;
    }
}

.lw-grants-map {
    position: relative;
    width: 100vw;
    max-width: 120rem;
    height: 100vw;
    max-height: 75rem;

    left: 50%;
    transform: translateX(-50%);

    box-shadow: var(--map-box-shadow);
}

.lw-grants-map__inner {
    justify-content: left;
    /* 
    position: relative;
    width: 1000px;
    height: 562px;
    */
    overflow: hidden;
    font-size: 14px;

    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100vw;
    max-width: 120rem;
    z-index: 0;

    * {
        font-size: 1em;
        color: initial;
        text-align: initial;
        line-height: initial;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 700;
    }

    h1 {
        font-size: 1.6em;
    }

    h2 {
        font-size: 1.3em;
    }

    h3 {
        font-size: 1.2em;
    }

    h4 {
        font-size: 1.1em;
    }

    h5 {
        font-size: 1em;
    }

    h6 {
        font-size: 0.8em;
    }

    img {
        max-width: 100%;
    }

    dl {
        margin: var(--map-gap-vertical) 0;
        display: grid;
        grid-template-columns: 2fr 5fr;
        gap: 2em 0;

        dt {
            font-weight: 700;
        }
    }



    #map-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .content-info {
        z-index: 1;

        &#grant-container {
            z-index: 100;
        }

        &[grant-type="seeding"] {
            background-color: rgb(var(--map-color-green));

            h3::before {
                content: "Seeding Grant - ";
            }
        }

        &[grant-type="major-research"] {
            background-color: rgb(var(--map-color-purple));

            h3::before {
                content: "Major Research Grant - ";
            }
        }

        .grant__description *,
        .grant__metadata * {
            text-align: initial;
            color: #fff;
        }

        .grant__metadata {}

        .grant__image {
            text-align: center;
            img {
                box-shadow: var(--map-box-shadow);
                background-color: #fff;
            }
        }
    }

    #controls-container {
        box-shadow: none;
        color: #000;
        text-align: left;

        .dropdown {
            position: relative;

            h3,
            h4 {
                padding: 1em;
                padding-left: var(--map-gap-horizontal);
            }

            h3::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 2em;
                height: 2em;
                padding: 1em;
                background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItbWFwIj48cG9seWdvbiBwb2ludHM9IjEgNiAxIDIyIDggMTggMTYgMjIgMjMgMTggMjMgMiAxNiA2IDggMiAxIDYiPjwvcG9seWdvbj48bGluZSB4MT0iOCIgeTE9IjIiIHgyPSI4IiB5Mj0iMTgiPjwvbGluZT48bGluZSB4MT0iMTYiIHkxPSI2IiB4Mj0iMTYiIHkyPSIyMiI+PC9saW5lPjwvc3ZnPg==');
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                background-origin: content-box;
            }
        }
    }
}


.sliding {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);

    &.slide-in {
        transform: translateX(0%) !important;
        -webkit-transform: translateX(0%) !important;
    }
}

.map-filters {
    a {
        color: initial;
        display: block;
        margin: 0;
        padding: 1em;
        padding-left: 3.8em;
        text-decoration: none;
        text-align: left;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 2em;
            height: 2em;
            padding: 0.7em;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            background-origin: content-box;
        }

        &[data-type="grant_type"]::before {
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDkyLjI1IDEyMi44OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuMjUgMTIyLjg4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgogICAgLnN0MHtmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC41MSwxMDYuMjhjLTUuNTksNi4xMy0xMi4xLDExLjYyLTE5LjQxLDE2LjA2Yy0wLjksMC42Ni0yLjEyLDAuNzQtMy4xMiwwLjEgYy0xMC44LTYuODctMTkuODctMTUuMTItMjctMjQuMDlDOS4xNCw4Ni4wMSwyLjk1LDcyLjMzLDAuODMsNTkuMTVjLTIuMTYtMTMuMzYtMC4xNC0yNi4yMiw2LjUxLTM2LjY3IGMyLjYyLTQuMTMsNS45Ny03Ljg5LDEwLjA1LTExLjE0QzI2Ljc3LDMuODcsMzcuNDgtMC4wOCw0OC4xNiwwYzEwLjI4LDAuMDgsMjAuNDMsMy45MSwyOS4yLDExLjkyYzMuMDgsMi44LDUuNjcsNi4wMSw3Ljc5LDkuNDkgYzcuMTUsMTEuNzgsOC42OSwyNi44LDUuNTUsNDIuMDJjLTMuMSwxNS4wNC0xMC44LDMwLjMyLTIyLjE5LDQyLjgyVjEwNi4yOEw2OC41MSwxMDYuMjh6IE00Ni4xMiwyMy43NiBjMTIuNjgsMCwyMi45NSwxMC4yOCwyMi45NSwyMi45NWMwLDEyLjY4LTEwLjI4LDIyLjk1LTIyLjk1LDIyLjk1Yy0xMi42OCwwLTIyLjk1LTEwLjI3LTIyLjk1LTIyLjk1IEMyMy4xNiwzNC4wMywzMy40NCwyMy43Niw0Ni4xMiwyMy43Nkw0Ni4xMiwyMy43NnoiIGZpbGw9InRyYW5zcGFyZW50IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIC8+CiAgPC9nPgo8L3N2Zz4=');
        }

        &#major-research.active::before {
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgOTIuMjUgMTIyLjg4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA5Mi4yNSAxMjIuODgiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO30KICA8L3N0eWxlPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJkaWFnb25hbFNwbGl0IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDExMiAzMCA3MSkiIC8+CiAgICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2IoMTEyIDMwIDcxKSIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9InJnYigxMTIgMzAgNzEpIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxMTIgMzAgNzEpIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPGc+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjguNTEsMTA2LjI4Yy01LjU5LDYuMTMtMTIuMSwxMS42Mi0xOS40MSwxNi4wNmMtMC45LDAuNjYtMi4xMiwwLjc0LTMuMTIsMC4xIGMtMTAuOC02Ljg3LTE5Ljg3LTE1LjEyLTI3LTI0LjA5QzkuMTQsODYuMDEsMi45NSw3Mi4zMywwLjgzLDU5LjE1Yy0yLjE2LTEzLjM2LTAuMTQtMjYuMjIsNi41MS0zNi42NyBjMi42Mi00LjEzLDUuOTctNy44OSwxMC4wNS0xMS4xNEMyNi43NywzLjg3LDM3LjQ4LTAuMDgsNDguMTYsMGMxMC4yOCwwLjA4LDIwLjQzLDMuOTEsMjkuMiwxMS45MmMzLjA4LDIuOCw1LjY3LDYuMDEsNy43OSw5LjQ5IGM3LjE1LDExLjc4LDguNjksMjYuOCw1LjU1LDQyLjAyYy0zLjEsMTUuMDQtMTAuOCwzMC4zMi0yMi4xOSw0Mi44MlYxMDYuMjhMNjguNTEsMTA2LjI4eiBNNDYuMTIsMjMuNzYgYzEyLjY4LDAsMjIuOTUsMTAuMjgsMjIuOTUsMjIuOTVjMCwxMi42OC0xMC4yOCwyMi45NS0yMi45NSwyMi45NWMtMTIuNjgsMC0yMi45NS0xMC4yNy0yMi45NS0yMi45NSBDMjMuMTYsMzQuMDMsMzMuNDQsMjMuNzYsNDYuMTIsMjMuNzZMNDYuMTIsMjMuNzZ6IiBmaWxsPSJ1cmwoI2RpYWdvbmFsU3BsaXQpIiAvPgogIDwvZz4KPC9zdmc+');
        }

        &#seeding.active::before {
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgOTIuMjUgMTIyLjg4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA5Mi4yNSAxMjIuODgiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO30KICA8L3N0eWxlPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJkaWFnb25hbFNwbGl0IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDEzOSAxNDAgNzQpIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0icmdiKDEzOSAxNDAgNzQpIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0icmdiKDEzOSAxNDAgNzQpIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxMzkgMTQwIDc0KSIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxnPgogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTY4LjUxLDEwNi4yOGMtNS41OSw2LjEzLTEyLjEsMTEuNjItMTkuNDEsMTYuMDZjLTAuOSwwLjY2LTIuMTIsMC43NC0zLjEyLDAuMSBjLTEwLjgtNi44Ny0xOS44Ny0xNS4xMi0yNy0yNC4wOUM5LjE0LDg2LjAxLDIuOTUsNzIuMzMsMC44Myw1OS4xNWMtMi4xNi0xMy4zNi0wLjE0LTI2LjIyLDYuNTEtMzYuNjcgYzIuNjItNC4xMyw1Ljk3LTcuODksMTAuMDUtMTEuMTRDMjYuNzcsMy44NywzNy40OC0wLjA4LDQ4LjE2LDBjMTAuMjgsMC4wOCwyMC40MywzLjkxLDI5LjIsMTEuOTJjMy4wOCwyLjgsNS42Nyw2LjAxLDcuNzksOS40OSBjNy4xNSwxMS43OCw4LjY5LDI2LjgsNS41NSw0Mi4wMmMtMy4xLDE1LjA0LTEwLjgsMzAuMzItMjIuMTksNDIuODJWMTA2LjI4TDY4LjUxLDEwNi4yOHogTTQ2LjEyLDIzLjc2IGMxMi42OCwwLDIyLjk1LDEwLjI4LDIyLjk1LDIyLjk1YzAsMTIuNjgtMTAuMjgsMjIuOTUtMjIuOTUsMjIuOTVjLTEyLjY4LDAtMjIuOTUtMTAuMjctMjIuOTUtMjIuOTUgQzIzLjE2LDM0LjAzLDMzLjQ0LDIzLjc2LDQ2LjEyLDIzLjc2TDQ2LjEyLDIzLjc2eiIgZmlsbD0idXJsKCNkaWFnb25hbFNwbGl0KSIgLz4KICA8L2c+Cjwvc3ZnPg==');
        }

        &[data-type="year_granted"]::before {
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDkyLjI1IDEyMi44OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuMjUgMTIyLjg4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgogICAgLnN0MHtmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC41MSwxMDYuMjhjLTUuNTksNi4xMy0xMi4xLDExLjYyLTE5LjQxLDE2LjA2Yy0wLjksMC42Ni0yLjEyLDAuNzQtMy4xMiwwLjEgYy0xMC44LTYuODctMTkuODctMTUuMTItMjctMjQuMDlDOS4xNCw4Ni4wMSwyLjk1LDcyLjMzLDAuODMsNTkuMTVjLTIuMTYtMTMuMzYtMC4xNC0yNi4yMiw2LjUxLTM2LjY3IGMyLjYyLTQuMTMsNS45Ny03Ljg5LDEwLjA1LTExLjE0QzI2Ljc3LDMuODcsMzcuNDgtMC4wOCw0OC4xNiwwYzEwLjI4LDAuMDgsMjAuNDMsMy45MSwyOS4yLDExLjkyYzMuMDgsMi44LDUuNjcsNi4wMSw3Ljc5LDkuNDkgYzcuMTUsMTEuNzgsOC42OSwyNi44LDUuNTUsNDIuMDJjLTMuMSwxNS4wNC0xMC44LDMwLjMyLTIyLjE5LDQyLjgyVjEwNi4yOEw2OC41MSwxMDYuMjh6IE00Ni4xMiwyMy43NiBjMTIuNjgsMCwyMi45NSwxMC4yOCwyMi45NSwyMi45NWMwLDEyLjY4LTEwLjI4LDIyLjk1LTIyLjk1LDIyLjk1Yy0xMi42OCwwLTIyLjk1LTEwLjI3LTIyLjk1LTIyLjk1IEMyMy4xNiwzNC4wMywzMy40NCwyMy43Niw0Ni4xMiwyMy43Nkw0Ni4xMiwyMy43NnoiIGZpbGw9InRyYW5zcGFyZW50IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIC8+CiAgPC9nPgo8L3N2Zz4=');
        }

        &[data-type="year_granted"].active::before {
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgOTIuMjUgMTIyLjg4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA5Mi4yNSAxMjIuODgiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO30KICA8L3N0eWxlPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJkaWFnb25hbFNwbGl0IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDExMiAzMCA3MSkiIC8+CiAgICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2IoMTEyIDMwIDcxKSIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9InJnYigxMzkgMTQwIDc0KSIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTM5IDE0MCA3NCkiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC41MSwxMDYuMjhjLTUuNTksNi4xMy0xMi4xLDExLjYyLTE5LjQxLDE2LjA2Yy0wLjksMC42Ni0yLjEyLDAuNzQtMy4xMiwwLjEgYy0xMC44LTYuODctMTkuODctMTUuMTItMjctMjQuMDlDOS4xNCw4Ni4wMSwyLjk1LDcyLjMzLDAuODMsNTkuMTVjLTIuMTYtMTMuMzYtMC4xNC0yNi4yMiw2LjUxLTM2LjY3IGMyLjYyLTQuMTMsNS45Ny03Ljg5LDEwLjA1LTExLjE0QzI2Ljc3LDMuODcsMzcuNDgtMC4wOCw0OC4xNiwwYzEwLjI4LDAuMDgsMjAuNDMsMy45MSwyOS4yLDExLjkyYzMuMDgsMi44LDUuNjcsNi4wMSw3Ljc5LDkuNDkgYzcuMTUsMTEuNzgsOC42OSwyNi44LDUuNTUsNDIuMDJjLTMuMSwxNS4wNC0xMC44LDMwLjMyLTIyLjE5LDQyLjgyVjEwNi4yOEw2OC41MSwxMDYuMjh6IE00Ni4xMiwyMy43NiBjMTIuNjgsMCwyMi45NSwxMC4yOCwyMi45NSwyMi45NWMwLDEyLjY4LTEwLjI4LDIyLjk1LTIyLjk1LDIyLjk1Yy0xMi42OCwwLTIyLjk1LTEwLjI3LTIyLjk1LTIyLjk1IEMyMy4xNiwzNC4wMywzMy40NCwyMy43Niw0Ni4xMiwyMy43Nkw0Ni4xMiwyMy43NnoiIGZpbGw9InVybCgjZGlhZ29uYWxTcGxpdCkiIC8+CiAgPC9nPgo8L3N2Zz4=');
        }


    }
}

.content-info {
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);

    text-align: center;
    width: 30em;
    margin: 0;
    padding: var(--map-gap);
    border-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: -1;
    box-shadow: var(--map-box-shadow);
    box-sizing: border-box;

    background-image: url("/img/hex-dots.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-position-y: 110%;

    &.left {
        left: 0;
        right: initial;
    }

    &.narrow {
        width: 24em;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(1em);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

button {
    background-color: rgb(var(--map-color-purple));
    color: white;
    border: none;
    padding: var(--map-gap-vertical);
    border-radius: var(--map-border-radius);
    cursor: pointer;
    font-size: 1.6em;
}

button:hover {
    background-color: darken(rgb(112 30 71), 05%);
}

button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.hidden {
    display: none !important;
}

.text-white {
    color: #fff;
}

.bg-blur {
    backdrop-filter: blur(var(--map-blur));
}