: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-color-green: 0 90 15;   /* #005a0f */
  --map-color-purple: 162 34 54; /* #a22236 */

    --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: #005a0f;

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

        &[grant-type="major-research"] {
            background-color: #a32035;

            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;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92.25 122.88"><path fill="%23a22236" fill-rule="evenodd" clip-rule="evenodd" d="M68.51,106.28c-5.59,6.13-12.1,11.62-19.41,16.06c-0.9,0.66-2.12,0.74-3.12,0.1c-10.8-6.87-19.87-15.12-27-24.09C9.14,86.01,2.95,72.33,0.83,59.15c-2.16-13.36-0.14-26.22,6.51-36.67c2.62-4.13,5.97-7.89,10.05-11.14C26.77,3.87,37.48-0.08,48.16,0c10.28,0.08,20.43,3.91,29.2,11.92c3.08,2.8,5.67,6.01,7.79,9.49c7.15,11.78,8.69,26.8,5.55,42.02c-3.1,15.04-10.8,30.32-22.19,42.82V106.28L68.51,106.28z M46.12,23.76c12.68,0,22.95,10.28,22.95,22.95c0,12.68-10.28,22.95-22.95,22.95c-12.68,0-22.95-10.27-22.95-22.95C23.16,34.03,33.44,23.76,46.12,23.76L46.12,23.76z"/></svg>');
}


        &#seeding.active::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92.25 122.88"><path fill="%23005a0f" fill-rule="evenodd" clip-rule="evenodd" d="M68.51,106.28c-5.59,6.13-12.1,11.62-19.41,16.06c-0.9,0.66-2.12,0.74-3.12,0.1c-10.8-6.87-19.87-15.12-27-24.09C9.14,86.01,2.95,72.33,0.83,59.15c-2.16-13.36-0.14-26.22,6.51-36.67c2.62-4.13,5.97-7.89,10.05-11.14C26.77,3.87,37.48-0.08,48.16,0c10.28,0.08,20.43,3.91,29.2,11.92c3.08,2.8,5.67,6.01,7.79,9.49c7.15,11.78,8.69,26.8,5.55,42.02c-3.1,15.04-10.8,30.32-22.19,42.82V106.28L68.51,106.28z M46.12,23.76c12.68,0,22.95,10.28,22.95,22.95c0,12.68-10.28,22.95-22.95,22.95c-12.68,0-22.95-10.27-22.95-22.95C23.16,34.03,33.44,23.76,46.12,23.76z"/></svg>'); }

		&#both.active::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92.25 122.88"><defs><linearGradient id="merge" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23a22236"/><stop offset="50%" stop-color="%23a22236"/><stop offset="50%" stop-color="%23005a0f"/><stop offset="100%" stop-color="%23005a0f"/></linearGradient></defs><path fill="url(%23merge)" fill-rule="evenodd" clip-rule="evenodd" d="M68.51,106.28c-5.59,6.13-12.1,11.62-19.41,16.06c-0.9,0.66-2.12,0.74-3.12,0.1c-10.8-6.87-19.87-15.12-27-24.09C9.14,86.01,2.95,72.33,0.83,59.15c-2.16-13.36-0.14-26.22,6.51-36.67c2.62-4.13,5.97-7.89,10.05-11.14C26.77,3.87,37.48-0.08,48.16,0c10.28,0.08,20.43,3.91,29.2,11.92c3.08,2.8,5.67,6.01,7.79,9.49c7.15,11.78,8.69,26.8,5.55,42.02c-3.1,15.04-10.8,30.32-22.19,42.82V106.28L68.51,106.28z M46.12,23.76c12.68,0,22.95,10.28,22.95,22.95c0,12.68-10.28,22.95-22.95,22.95c-12.68,0-22.95-10.27-22.95-22.95C23.16,34.03,33.44,23.76,46.12,23.76z"/></svg>'); }

        &[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;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92.25 122.88"><defs><linearGradient id="merge" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23a22236"/><stop offset="50%" stop-color="%23a22236"/><stop offset="50%" stop-color="%23005a0f"/><stop offset="100%" stop-color="%23005a0f"/></linearGradient></defs><path fill="url(%23merge)" fill-rule="evenodd" clip-rule="evenodd" d="M68.51,106.28c-5.59,6.13-12.1,11.62-19.41,16.06c-0.9,0.66-2.12,0.74-3.12,0.1c-10.8-6.87-19.87-15.12-27-24.09C9.14,86.01,2.95,72.33,0.83,59.15c-2.16-13.36-0.14-26.22,6.51-36.67c2.62-4.13,5.97-7.89,10.05-11.14C26.77,3.87,37.48-0.08,48.16,0c10.28,0.08,20.43,3.91,29.2,11.92c3.08,2.8,5.67,6.01,7.79,9.49c7.15,11.78,8.69,26.8,5.55,42.02c-3.1,15.04-10.8,30.32-22.19,42.82V106.28L68.51,106.28z M46.12,23.76c12.68,0,22.95,10.28,22.95,22.95c0,12.68-10.28,22.95-22.95,22.95c-12.68,0-22.95-10.27-22.95-22.95C23.16,34.03,33.44,23.76,46.12,23.76z"/></svg>'); }

		
/*         &[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));
}