.mapwrap {
          color: #404040;
        font-family: "web-Founders Grotesk", "Source Sans Pro",
            "Helvetica Neue", sans-serif;
        font-size: 18px;
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
    }
    
    .mapwrap * {
        box-sizing: border-box;
    }
    
    .mapwrap {
        display: block;
        max-width: 100%;
        position: relative;
        min-height: 80vh;
    }
    
    #mapbox-panel {
        display: block;
        max-width: 100%;
        max-height: 100%;
        position: relative;
        max-height: 100%;
        max-height: 80vh;
        /* position: relative; */
        overflow-y: scroll;
        /* display: inline-block; */
    }
    
    .mapwrap .listings {
        padding-bottom: 0;
    }
    
    .sidebar {
        position: absolute;
        width: 33.3333%;
        height: 100%;
        top: 0;
        left: 0;
        overflow: hidden;

    }

@media screen and (min-width: 981px) {
    #map {
        border-left: 1px solid var(--mapbox--color--popup, #ffca05);
    }
}
    .pad2 {
        padding: 20px;
    }
    
    .map {
        position: absolute;
        left: 33.3333%;
        width: 66.6666%;
        top: 0;
        bottom: 0;
    }
    
    #mapbox-panel h1 {
        font-family: "web-Matiz", "Impact";
        text-transform: uppercase;
        font-size: 1.5rem;
        margin: 0;
        font-weight: 400;
        line-height: 20px;
        padding: 1.6rem 1rem 1.4rem 1rem;
        display: inline-block;
    }
    
    a {
        color: #404040;
        text-decoration: none;
    }
    
    a:hover {
        color: #101010;
    }
    
    .mapbox-panel .heading {
        background: #fff;
        border-bottom: 1px solid #eee;
        line-height: 60px;
        transition: background-color 0.7s cubic-bezier(0.73, 0.16, 0.08, 0.68),
            color 0.7s cubic-bezier(0.73, 0.16, 0.08, 0.68);
        padding: 0 0;
        background-color: var(--mapbox--color--panel-header, #ffca05);
        color: var(--mapbox--color--panel-header-text, #000000);
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .listings {
        height: 100%;
        overflow: auto;
        padding-bottom: 60px;
    }
    
    .listings .item {
        border-bottom: 1px solid #eee;
        padding: 10px;
        text-decoration: none;
    }
    
    .listings .item:last-child {
        border-bottom: none;
    }
    .listings .item .title {
        display: block;
        color: #444444;
        font-weight: 700;
    }

    .listings .item .event-title {
        text-transform: uppercase;
        color: var(--mapbox--color--popup-dark, #b38d04);
        font-weight: 700;
        font-size: 14px;
        padding-top: 2px;

    }

.listings .item.active .event-title, .listings .item:hover .wrapper .event-title {
            color: var(--mapbox--color--popup-dark, #b38d04);
}

    
    .listings .item .title small {
        font-weight: 400;
    }
    .listings .item.active .title,
    .listings .item:hover .wrapper div,
    .listings .item:focus-visible .wrapper div {
        color: #000000;
    }
    
    #mapbox-panel .listings .item:hover > .wrapper,
    #mapbox-panel .listings .item:focus > .wrapper {
        background-color: #f8f8f8;
    }
    
    #mapbox-panel .listings .item.active > .wrapper {
        background-color: #f8f8f8;
    }
    
    .mapwrap ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
        border-left: 0;
        background: rgba(0, 0, 0, 0.1);
    }
    .mapwrap ::-webkit-scrollbar-track {
        background: none;
    }
    .mapwrap ::-webkit-scrollbar-thumb {
        background-color: var(--mapbox--color--panel-header, #ffca05);
        transition: background-color 0.7s cubic-bezier(0.73, 0.16, 0.08, 0.68);
        will-change: background-color;
        border-radius: 0;
    }
    
    .marker {
        border: none;
        cursor: pointer;
        height: 27px;
        width: 20px;
        /*background-image: url(marker.svg);*/
    }
    
    /* things we have added */
    
    .mapboxgl-popup-content-inner img {
        max-width: 100%;
        display: block;
        border-radius: 4px;
        aspect-ratio: 1.75/1;
        object-fit: cover;
        object-position: bottom;
        max-height: 120px;
        min-width: 100%;
    }
    
    .mapboxgl-popup-content-inner .open-dates-times ~ .img-wrapper {
        margin-top: 1rem;
    }
    
    .mapboxgl-popup-content-inner a.google-maps-link {
        text-align: center;
    }
    
    .mapboxgl-popup-content-inner div a.google-maps-link {
        text-align: center;
        text-decoration-color: currentColor;
        background: white;
        border-radius: 50px;
        text-decoration: underline;
        text-underline-offset: 0.1em;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 6px;
        padding-bottom: 2px;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
        box-shadow: 1.5px 1.5px 5px rgba(0, 0, 0, 0.3);
        font-weight: 600;
        transition: color 0.2s, background-color 0.2s;
        font-size: 90%;
        display: inline-block;
    }
    
    .mapboxgl-popup-content-inner img ~ div a.google-maps-link {
        margin-bottom: 0;
        margin-top: 0;
    }
    
    .mapboxgl-popup-content-inner img ~ div a.google-maps-link:hover,
    .mapboxgl-popup-content-inner img ~ div a.google-maps-link:focus-visible,
    .mapboxgl-popup-content-inner div a.google-maps-link:hover,
    .mapboxgl-popup-content-inner div a.google-maps-link:focus-visible {
        background-color: var(--mapbox--color--popup);
        color: var(--mapbox--color--popup-text);
    }
    
    .mapboxgl-popup-close-button:hover {
        background-color: rgb(0, 0, 0, 0.5);
    }
    
    .mapboxgl-popup-content-inner img ~ div.google-maps-link-wrapper {
        display: block;
        text-align: center;
        position: absolute;
        bottom: 1.5rem;
        width: 100%;
        left: 0;
        right: 0;
    }
    
    .mapboxgl-popup-content-inner div.google-maps-link-wrapper {
        display: block;
        text-align: center;
        position: relative;
        width: 100%;
        left: 0;
        right: 0;
    }
    
       /* Marker tweaks */
    
    #map {
        --mapbox--color--metro: #1ba9d4;
        --mapbox--color--north-west: #eb6c37;
        --mapbox--color--north-east: #ce2249;
        --mapbox--color--south-east: #ffca05;
        --mapbox--color--south-west: #898031;
    }
    
    .popup-Metro,
    #mapbox-panel.Metro,
    #map.Metro {
        --mapbox--color--popup: #1ba9d4;
        --mapbox--color--popup-text: #ffffff;
        --mapbox--color--panel-header: #1ba9d4;
        --mapbox--color--panel-header-text: #ffffff;
        --mapbox--color--secondary-button-text: #1ba9d4;
        --mapbox--color--popup-dark: #1ba9d4;
    }
    .popup-NW,
    #mapbox-panel.NW,
    #map.NW {
        --mapbox--color--popup: #eb6c37;
        --mapbox--color--popup-text: #ffffff;
        --mapbox--color--panel-header: #eb6c37;
        --mapbox--color--panel-header-text: #ffffff;
        --mapbox--color--secondary-button-text: #eb6c37;
        --mapbox--color--popup-dark: #eb6c37;
    }
    .popup-NE,
    #mapbox-panel.NE,
    #map.NE {
        --mapbox--color--popup: #ce2249;
        --mapbox--color--popup-text: #ffffff;
        --mapbox--color--panel-header: #ce2249;
        --mapbox--color--panel-header-text: #ffffff;
        --mapbox--color--secondary-button-text: #ce2249;
        --mapbox--color--popup-dark: #ce2249;
    }
    .popup-SE,
    #mapbox-panel.SE,
    #map.SE {
        --mapbox--color--popup: #ffca05;
        --mapbox--color--popup-text: #000000;
        --mapbox--color--panel-header: #ffca05;
        --mapbox--color--panel-header-text: #000000;
        --mapbox--color--secondary-button-text: #000000;
        --mapbox--color--popup-dark: #b38d04;
    }
    .popup-SW,
    #mapbox-panel.SW,
    #map.SW {
        --mapbox--color--popup: #898031;
        --mapbox--color--popup-text: #ffffff;
        --mapbox--color--panel-header: #898031;
        --mapbox--color--panel-header-text: #ffffff;
        --mapbox--color--secondary-button-text: #898031;
        --mapbox--color--popup-dark: #898031;
    }
    
    .marker-Metro svg path {
        fill: var(--mapbox--color--metro);
    }
    .popup-Metro .mapboxgl-popup-content .h3-container {
        background-color: var(--mapbox--color--metro);
    }
    .popup-Metro.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
        border-bottom-color: var(--mapbox--color--metro);
    }
    .popup-Metro.mapboxgl-popup-anchor-top-left > .mapboxgl-popup-tip,
    .popup-Metro.mapboxgl-popup-anchor-top-right > .mapboxgl-popup-tip {
        border-bottom-color: var(--mapbox--color--metro);
    }
    
    .marker-NE svg path {
        fill: var(--mapbox--color--north-east);
    }
    .popup-NE .mapboxgl-popup-content .h3-container {
        background-color: var(--mapbox--color--north-east);
    }
    .popup-NE.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
        border-bottom-color: var(--mapbox--color--north-east);
    }
    .popup-NE.mapboxgl-popup-anchor-top-left > .mapboxgl-popup-tip,
    .popup-NE.mapboxgl-popup-anchor-top-right > .mapboxgl-popup-tip {
        border-bottom-color: var(--mapbox--color--north-east);
    }
    
    .marker-NW svg path {
        fill: var(--mapbox--color--north-west);
    }
    .popup-NW .mapboxgl-popup-content .h3-container {
        background-color: var(--mapbox--color--north-west);
    }
    .popup-NW.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
        border-bottom-color: var(--mapbox--color--north-west);
    }
    .popup-NW.mapboxgl-popup-anchor-top-left > .mapboxgl-popup-tip,
    .popup-NW.mapboxgl-popup-anchor-top-right > .mapboxgl-popup-tip {
        border-bottom-color: var(--mapbox--color--north-west);
    }
    
    .marker-SE svg path {
        fill: var(--mapbox--color--south-east);
    }
    .popup-SE .mapboxgl-popup-content .h3-container {
        background-color: var(--mapbox--color--south-east);
    }
    .popup-SE.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
        border-bottom-color: var(--mapbox--color--south-east);
    }
    .popup-SE.mapboxgl-popup-anchor-top-left > .mapboxgl-popup-tip,
    .popup-SE.mapboxgl-popup-anchor-top-right > .mapboxgl-popup-tip {
        border-bottom-color: var(--mapbox--color--south-east);
    }
    
    .marker-SW svg path {
        fill: var(--mapbox--color--south-west);
    }
    .popup-SW .mapboxgl-popup-content .h3-container {
        background-color: var(--mapbox--color--south-west);
    }
    .popup-SW.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
        border-bottom-color: var(--mapbox--color--south-west);
    }
    .popup-SW.mapboxgl-popup-anchor-top-left > .mapboxgl-popup-tip,
    .popup-SW.mapboxgl-popup-anchor-top-right > .mapboxgl-popup-tip {
        border-bottom-color: var(--mapbox--color--south-west);
    }
    
    .mapboxgl-popup {
        padding-bottom: 50px;
        max-width: min(280px, 80vw) !important;
        width: 100%;
    }
    
    .mapboxgl-popup-close-button {
        display: none;
    }

    
    .mapwrap #map .mapboxgl-popup-close-button.new-close-button,
    .mapwrap #mapbox-panel .new-close-button.panel-close-button {
        background-color: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0 3px 0 0;
        cursor: pointer;
        position: relative;
        right: 0;
        bottom: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: color 0.2s, background-color 0.2s;
    }

body .mapboxgl-popup-content {
    font-family:"web-Founders Grotesk", "Source Sans Pro", "Helvetica Neue", sans-serif;
}

.mapwrap #map .mapboxgl-popup-close-button.new-close-button {
    padding-inline: 10px;
}
    
    .mapwrap #mapbox-panel .new-close-button.panel-close-button {
        padding-top: 0;
        padding-inline: 12px;
    }
    
    .mapwrap #map .mapboxgl-popup-close-button.new-close-button:hover,
    .mapwrap #map .mapboxgl-popup-close-button.new-close-button:focus-visible,
    .mapwrap #mapbox-panel .new-close-button.panel-close-button:hover,
    .mapwrap #mapbox-panel .new-close-button.panel-close-button:focus-visible {
        background: rgba(0, 0, 0, 0.25);
    }
    
    .mapwrap #map .mapboxgl-popup-close-button.new-close-button:hover > svg,
    .mapwrap #map .mapboxgl-popup-close-button.new-close-button:focus-visible > svg,
    .mapwrap #mapbox-panel .new-close-button.panel-close-button:hover > svg,
    .mapwrap
        #mapbox-panel
        .new-close-button.panel-close-button:focus-visible
        > svg {
        transform: scale(1.1);
    }
    
    .mapwrap #mapbox-panel .new-close-button.panel-close-button > svg {
        fill: var(--mapbox--color--panel-header-text);
        width: 25px;
    }
    
    .mapboxgl-popup-close-button.new-close-button > svg {
        fill: var(--mapbox--color--popup-text);
        width: 15px;
        transition: transform 0.2s;
    }
    
    .mapboxgl-popup-content {
        font: 400 15px/22px "Source Sans Pro", "Helvetica Neue", sans-serif;
        padding: 0;
        width: auto;
    }

body .mapboxgl-popup-content h3 {
        display: inline-block;
        color: var(--mapbox--color--popup-text);
        font-weight: 600;
        font-size: 19px;
        line-height: 1.1em;
        margin: 0px;
        padding: 0.75rem .4rem 0.4rem .75rem;
        text-wrap-style: balance;
}

body .mapboxgl-popup-content h3 .popup-event-title {
    text-transform: uppercase;
    display: block;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 5px;
    font-weight: 400;
    letter-spacing: 0.015em;
}

body .mapboxgl-popup-content h3:has(.popup-event-title) {
    font-size: 18px;
    line-height: 1.1;
}
    
    .mapboxgl-popup-content-inner {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        padding-top: 0.55rem;
        font-size: 16px;

    }

    .mapboxgl-popup-content-inner p {
      text-wrap-style: balance;
    }
    
    .mapboxgl-popup-content-inner > h4 + p,
    .mapboxgl-popup-content-inner > p:first-child {
        padding-top: 1px;
        padding-left: 0;
        padding-right: 0;
        margin: 0;
        line-height: 1.2em;
    }
    
    .mapboxgl-popup-content-inner > ul {
        padding: 0;
        margin: 0;
    }
    
    .mapboxgl-popup-content-inner > ul {
        padding-left: 1rem;
    }
    
    .mapboxgl-popup-content-inner > ul ::marker {
        margin-right: 4px;
        font-size: 1rem;
        color: darkgray;
    }
    
    .mapboxgl-popup-content .h3-container {
        padding: 0;
        position: relative;
        width: 100%;
        display: flex;
        align-items: stretch;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        border-radius: 4px 4px 0px 0px;
    }
    
    .mapboxgl-popup-content h3 {
        display: inline-block;
        color: var(--mapbox--color--popup-text);
        margin: 0 0;
        padding: 0.75rem;
        font-weight: 700;
    }
    
    .mapboxgl-popup-content h4 {
        margin: 0;
        padding: 0;
        font-weight: 600;
        color: black;
    }
    
    .mapboxgl-popup-content h4.voting-times {
        margin-top: 0.75rem;
    }
    
    .mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
        margin-top: 0px;
    }
    
    .mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
        border-bottom-color: #91c949;
    }
    
    .mapboxgl-ctrl-geocoder {
        border-radius: 0;
        position: relative;
        top: 0;
        width: 800px;
        margin-top: 0;
        border: 0;
    }
    
    .mapboxgl-ctrl-geocoder > div {
        min-width: 100%;
        margin-left: 0;
    }
    
    /* more WIP css */
    
    /*.mapboxgl-popup-anchor-top-left,
    .mapboxgl-popup-anchor-top-right {
    }
    */
    .mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
        transform: translateY(1px);
    }
    
    .mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip {
        transform: translateY(-1px);
    }
    
    .mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip {
        z-index: 999;
        display: block;
    }
    
    .mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip:after {
        content: " ";
        box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.1);
        display: inline-block;
        z-index: -999;
        background: transparent;
        width: 15px;
        position: absolute;
        height: 15px;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(-120%) translateX(-50%) rotate(45deg);
    }
    
    /* .mapboxgl-popup-anchor-top-left > .mapboxgl-popup-tip,
    .mapboxgl-popup-anchor-top-right > .mapboxgl-popup-tip {
    }
    */

    .mapboxgl-popup.mapboxgl-popup-anchor-top-left
        .mapboxgl-popup-content
        .h3-container {
        border-radius: 0 4px 0 0;
    }
    
    .mapboxgl-popup.mapboxgl-popup-anchor-top-right
        .mapboxgl-popup-content
        .h3-container {
        border-radius: 4px 0 0 0;
    }
    
    #mapbox-panel #listings a.item {
        will-change: transform;
        padding: 0;
        display: block;
        position: relative;
        z-index: 1;
        transition: transform 0.2s cubic-bezier(0.7, 0.08, 0.35, 0.97);
    }
    
    #mapbox-panel #listings .wrapper {
        padding: 12px 25px 7px 10px;
    }
    
    #mapbox-panel .item > div {
        background-color: white;
    }
    
    #mapbox-panel .item:after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        left: -40px;
        bottom: 0;
        z-index: -99;
        background-color: var(--mapbox--color--panel-header, #ffca05);
        transition: background-color 0.7s cubic-bezier(0.73, 0.16, 0.08, 0.68);
        will-change: background-color;
    }
    
    #mapbox-panel .item a.title {
        padding: 10px;
        background: white;
        z-index: 999;
        display: block;
        position: relative;
        will-change: transform;
        transition: transform 0.2s cubic-bezier(0.43, -0.09, 0.48, 0.98);
    }
    
    #mapbox-panel .item:hover,
    #mapbox-panel .item:focus,
    #mapbox-panel .item.active:hover,
    #mapbox-panel .item.active:focus {
        transform: translateX(25px);
    }
    
    #mapbox-panel .item.active {
        transform: translateX(10px);
    }
    
    #listings {
        overflow-x: hidden;
            overscroll-behavior-y: contain;
    }
    
    .mapbox-key,
    .mapbox-key div {
        line-height: 1em;
    }
    
    @media screen and (min-width: 981px) {
        #listings-outer {
            scrollbar-width: thin;
            scrollbar-color: var(--mapbox--color--panel-header, #ffca05) white;
        }
    }
    
    @media screen and (max-width: 980px) {
        .mapwrap #mapbox-panel {
            width: 100%;
            margin: 0 0;
            z-index: 10;
            overflow-y: scroll;
        }
    
        #listings-outer {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.5s ease-out,
                background 0.6s cubic-bezier(0, 1.14, 0.33, 1.07);
            height: auto;
            background: transparent;
            overflow-y: hidden;
            scrollbar-width: thin;
            scrollbar-color: var(--mapbox--color--panel-header, #ffca05) white;
            scroll-behavior: auto;
            scroll-behavior: smooth;
        }
    
        #listings-outer[aria-hidden="false"] {
            grid-template-rows: 1fr;
            height: auto;
            transition: grid-template-rows 0.5s ease-out,
                background 0.55s cubic-bezier(1, 0, 1, 0.58);
            background: white;
        }
    
        #listings .wrapper {
            height: auto;
            overflow: hidden;
        }
    
        .mapwrap #map {
            position: absolute;
            left: 0;
            width: 100%;
            bottom: 0;
            top: var(--mapbox-panel-heading-height, 0px);
        }
        .mapwrap #map .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
            float: none;
            margin: 1rem 1rem 0 1rem;
            width: calc(100% - 2rem);
            transition: max-width 0.4s;
            max-width: min(300px, 100%);
        }
    
        .mapwrap.search-has-focus #map .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
            max-width: 100%;
        }
    
        .mapwrap #map .mapboxgl-ctrl-top-left {
            right: 0;
        }
    }
    
    .full-screen {
        padding: 0;
        min-height: 100vh;
        background: #dbdbdb;
        max-height: 100vh;
        overflow: hidden;
    }
    
    .full-screen .mapwrap {
        max-width: 100%;
        background: #f8f8f8;
        height: 100%;
        min-height: 100%;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }
    
    .mapwrap .mapboxgl-ctrl-geocoder--input {
        outline: 2px solid var(--mapbox--color--panel-header, #ffca05);
        transition: outline-width 0.2s, outline-color 0.2s, outline-offset 0.2s;
        outline-offset: -1px;
    }
    
    .mapwrap .mapboxgl-ctrl-geocoder--input:focus,
    .mapwrap .mapboxgl-ctrl-geocoder--input:focus-visible {
        outline: 3px solid var(--mapbox--color--panel-header, #ffca05);
        transition: outline-width 0.2s, outline-color 0.2s, outline-offset 0.2s;
    }
    
    /*.full-screen*/
    .mapwrap #mapbox-panel {
        overflow: hidden;
        height: auto;
    }
    
    .full-screen .mapwrap #mapbox-panel {
        max-height: 100%;
    }
    
    .mapwrap #mapbox-panel {
        display: flex;
        flex-direction: column;
    }
    
    @media screen and (min-width: 981px) {
        #listings-outer {
            overflow-y: scroll;
                        display: contents;
        }
    }
    
    .mapwrap #map .mapboxgl-ctrl-geocoder--button {
        padding: 0;
        margin: 0;
        border: none;
        box-shadow: none;
        display: flex !important;
        background-color: transparent;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        height: 100%;
        top: 0;
    }
    
    .mapboxgl-ctrl-geocoder--input:placeholder-shown
        ~ .suggestions-wrapper
        ~ .mapboxgl-ctrl-geocoder--pin-right
        button {
        display: block !important;
        opacity: 0.5;
        max-width: 0;
        overflow: hidden;
    
        transition: max-width 0.2s, opacity 0.2s;
    }
    
    .mapboxgl-ctrl-geocoder--input
        ~ .suggestions-wrapper
        ~ .mapboxgl-ctrl-geocoder--pin-right
        button {
        display: block !important;
        opacity: 1;
        transition: max-width 0.2s, opacity 0.2s;
        max-width: 100%;
    }
    
    @media screen and (min-width: 640px) {
        .mapwrap .mapboxgl-ctrl-geocoder--icon-close {
            width: 18px;
            height: 18px;
            margin: 0;
        }
        .mapwrap .mapboxgl-ctrl-geocoder--pin-right .mapboxgl-ctrl-geocoder--button {
            top: 3px;
        }
    }
    
    @media screen and (max-width: 639px) {
        .mapwrap .mapboxgl-ctrl-geocoder--pin-right .mapboxgl-ctrl-geocoder--button {
            top: 3px;
    
            height: 45px;
        }
        .mapwrap .mapboxgl-ctrl-geocoder--icon-close {
            margin: 0;
            height: 100;
        }
    }
    
    .mapwrap #map .mapboxgl-ctrl-attrib {
        display: none;
    }
    
    .mapwrap #map .mapboxgl-ctrl-attrib.adjusted {
        background: transparent;
        padding: 0 0 0 0 !important;
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    
    .infowrapperinner {
        background: rgba(255, 255, 255, 0.75);
        -webkit-backdrop-filter: blur(10px) grayscale(100%);
        backdrop-filter: blur(10px) grayscale(100%);
        padding: 1.5rem 1rem 1.5rem 1rem;
        border-radius: 10px 0 0 0;
        transition: background 0.2s, backdrop-filter 0.2s,
            -webkit-backdrop-filter 0.2s, opacity 0.2s;
        opacity: 1;
    
        scrollbar-width: thin;
        scrollbar-color: var(--mapbox--color--panel-header, #ffca05) white;
    }
    
    .collapsed ~ .infowrapper .infowrapperinner {
        padding: 0 1rem 0 1rem;
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        background: transparent;
        transition: background 0.2s, backdrop-filter 0.2s,
            -webkit-backdrop-filter 0.2s, opacity 0.2s;
    }
    
    .linewrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-bottom: 20px;
        justify-content: space-between;
        width: 100%;
    }
    
    .mapwrap .map-info-container {
        line-height: 1.4em;
    }
    
    .mapwrap .map-info-container a {
        font-weight: 500;
    }
    
    .mapwrap .linewrapper p {
        margin: 0 0 6px 0;
        line-height: 1.2em;
    }
    
    .mapwrap .linewrapper div > p:last-of-type {
        margin-bottom: 0;
    }
    
    .linewrapper svg {
        align-self: center;
        margin-right: 0;
        margin-left: 0;
        fill: currentcolor;
        margin-bottom: 5px;
    }
    
    .svgwrapper {
        display: flex;
        flex-direction: column;
        min-width: 50px;
        margin-right: 5px;
        justify-content: center;
        align-content: center;
        font-size: 10px;
        line-height: 1em;
        text-align: center;
    }
    
    @media screen and (max-width: 580px) {
        .mapwrap #map .linewrapper p {
            font-size: 11px;
        }
    }
    
    .mapwrap .mapboxgl-ctrl.mapboxgl-ctrl-attrib.adjusted {
        max-width: min(480px, 100%);
    }
    
    .buttonwrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    
    #infobutton,
    #sharebutton {
        min-width: 60px;
        align-items: center;
        display: flex;
        flex-direction: column;
        font-size: 10px;
        padding: 0.4rem 0.7rem 0.1rem 0.8rem;
        border-radius: 2px 2px 0 0;
        box-shadow: none;
        border: none;
        background-color: var(--mapbox--color--panel-header, #ffca05);
        color: var(--mapbox--color--panel-header-text, #000000);
        transition: background 0.7s cubic-bezier(0.73, 0.16, 0.08, 0.68),
            color 0.7s cubic-bezier(0.73, 0.16, 0.08, 0.68),
            border-color 0.4s cubic-bezier(0.73, 0.16, 0.08, 0.68);
        margin-bottom: -2px;
        border-left-width: 2px;
        border-style: solid;
        border-right-width: 2px;
        border-top-width: 2px;
        border-bottom-width: 0;
        border-color: var(--mapbox--color--panel-header, #ffca05);
    }
    
    #sharebutton {
        padding: 0.4rem 0.475rem 0.1rem 0.575rem;
    }
    
    #infobutton svg,
    #sharebutton svg {
        fill: var(--mapbox--color--panel-header-text, #000000);
        transition: fill 0.7s cubic-bezier(0.73, 0.16, 0.08, 0.68);
    }
    
    .infoactive #infobutton > svg,
    .shareactive #sharebutton > svg,
    .collapsed #sharebutton > svg {
        fill: var(--mapbox--color--secondary-button-text, #000000);
    }
    
    #sharebutton > svg {
        margin-top: 1px;
        margin-bottom: 1px;
    }
    
    .mapwrap #map #sharebutton {
        border-right-width: 1px;
        margin-right: -1px;
    }
    
    .mapwrap #map #infobutton {
        border-left-width: 1px;
        border-right-width: 3px;
    }
    
    .collapsed #sharebutton,
    .shareactive #sharebutton {
        background: rgba(255, 255, 255, 0.75);
        -webkit-backdrop-filter: blur(8px) grayscale(100%);
        backdrop-filter: blur(10px) grayscale(100%);
        color: black;
        border-left-width: 2px;
        border-right-width: 3px;
        z-index: 2;
    }
    
    .infoactive #infobutton {
        background: rgba(255, 255, 255, 0.75);
        -webkit-backdrop-filter: blur(8px) grayscale(100%);
        backdrop-filter: blur(10px) grayscale(100%);
        color: black;
        border-left-width: 2px;
        border-right-width: 2px;
        z-index: 2;
    }
    
    .infowrapper {
        height: auto;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s;
        overflow-y: hidden;
    }
    
    .expanded ~ .infowrapper {
        grid-template-rows: 1fr;
        height: auto;
    
        transition: grid-template-rows 0.3s;
    }
    
    .infowrapperinner {
        overflow: hidden;
        max-height: 50vh;
        overflow-y: scroll;
        height: 100%;
        border-left: 2px solid var(--mapbox--color--panel-header, #ffca05);
        border-top: 2px solid var(--mapbox--color--panel-header, #ffca05);
    }
    
    @media (pointer: none) {
        p.mouse {
            display: none;
        }
    }
    
    @media (pointer: coarse) {
        p.mouse {
            display: none;
        }
    }
    
    @media (pointer: fine) {
        p.mouse {
            display: block !important;
        }
    }
    
    .share-instructions,
    #map .instructions {
        display: grid;
        grid-template-rows: 1fr;
        height: auto;
        transition: grid-template-rows 0.2s;
    }
    
    #map .shareactive ~ .infowrapper .instructions,
    #map .collapsed ~ .infowrapper .instructions,
    .infoactive ~ .infowrapper .share-instructions,
    .collapsed ~ .infowrapper .share-instructions {
        display: grid;
        grid-template-rows: 0fr;
    }
    
    .instructionswrapper,
    .sharewrapper {
        overflow: hidden;
    }
    
    #map .instructionswrapper a {
        text-decoration-thickness: 1px;
        text-decoration: underline;
        text-underline-offset: 1px;
        text-decoration-color: transparent;
    }
    
    #map .instructionswrapper a:hover,
    #map .instructionswrapper a:focus-visible {
        text-decoration-thickness: 1px;
        text-decoration: underline;
        text-underline-offset: 1px;
        text-decoration-color: var(--mapbox--color--panel-header, #ffca05);
    }
    
    .mapwrap .social-share {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 5px;
    }
    
    .mapwrap .social-share button {
        border: none;
        background: transparent;
        box-shadow: none;
        transform: none;
        font-size: 14px;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        padding: 4px;
        border-radius: 0;
    }
    
    .mapwrap .social-share button > svg {
        margin-right: 10px;
    
        fill: var(--mapbox--color--panel-header, #ffca05);
        transition: fill 0.7s cubic-bezier(0.73, 0.16, 0.08, 0.68), transform 0.2s;
    }
    
    .mapwrap .social-share button > span {
        text-decoration: underline;
        text-decoration-color: transparent;
        font-weight: 500;
        text-decoration-thickness: 2px;
        transition: text-decoration-color 0.2s;
    }
    
    .mapwrap #map .social-share button:hover,
    .mapwrap #map .social-share button:focus-visible {
        border: none;
        background: transparent;
        box-shadow: none;
        transform: none;
    }
    
    .mapwrap #map .social-share button:hover span,
    .mapwrap #map .social-share button:focus-visible span {
        text-decoration-color: var(--mapbox--color--panel-header);
    }
    
    .mapwrap #map .social-share button:hover svg,
    .mapwrap #map .social-share button:focus-visible svg {
        transform: scale(1.1) rotate(4deg);
    }
    
    @media screen and (min-width: 981px) {
        #mapbox-panel #close-panel {
            display: none;
        }
    }
    
    .mapwrap .touch {
        display: none;
    }
    
    .mapwrap.touch .touch {
        display: block;
    }
    
    .map-attribution-container {
        font-size: 10px;
        line-height: 1.3em;
    }
    
    .map-attribution-container a {
        font-size: 10px;
    }
    
    .mapwrap #map .copybutton {
        border: none;
        background: transparent;
        box-shadow: none;
        width: 46px;
        height: 30px;
        position: absolute;
        right: 0;
        margin-top: 4px;
        text-align: center;
        padding: 0;
        margin: 0;
    }
    
    .copybutton svg {
        fill: #cccccc;
    }
    
    .copybutton.copied:after {
        content: "\2713";
        position: absolute;
        display: inline-block;
        color: white;
        font-weight: 900;
        width: auto;
        font-size: 10px;
        transform: translateX(-12px) translateY(5px);
    }
	
	.mapboxgl-popup-content h4.voting-closed {
	margin-bottom: 10px;
	}
	
	span.voting-is-closed {padding-left: 3px; font-weight: 400;}
	.mapwrap .marker.marker-expired #map-marker-svg path {
    fill: #666666;
}

.popup-NE.expired.mapboxgl-popup,
.popup-NW.expired.mapboxgl-popup,
.popup-Metro.expired.mapboxgl-popup,
.popup-SE.expired.mapboxgl-popup,
.popup-SW.expired.mapboxgl-popup{
  --mapbox--color--north-east: #666666 !important;
      --mapbox--color--north-west: #666666 !important;
      --mapbox--color--metro: #666666 !important;
      --mapbox--color--south-east: #666666 !important;
      --mapbox--color--south-west: #666666 !important;
    --mapbox--color--popup-text: #ffffff !important;
    --mapbox--color--popup: #666666 !important;

}

.popup-NE.expired.mapboxgl-popup .google-maps-link,
.popup-NW.expired.mapboxgl-popup .google-maps-link,
.popup-Metro.expired.mapboxgl-popup .google-maps-link,
.popup-SE.expired.mapboxgl-popup .google-maps-link,
.popup-SW.expired.mapboxgl-popup .google-maps-link{
    --mapbox--color--popup-text: #ffffff !important;
		--mapbox--color--popup: #666666 !important;
}
    
    .mapboxgl-marker:not(.marker) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' version=\'1.1\' id=\'home\' x=\'0px\' y=\'0px\' viewBox=\'0 0 22 30\' xml:space=\'preserve\'%3E%3Cstyle type=\'text/css\'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg id=\'Layer_1-2\'%3E%3Cpath d=\'M21.4,11.7c-0.7,7.4-5.6,14.7-10.7,18.3c-1.7-1.5-0.9-0.6-2.1-1.8c-0.6-0.4-0.9-0.8-1-1c-0.3-0.3-2-1.8-1.8-2 c-1.9-2.5-3.1-4.2-4-6.8c-0.1,0,0,0.1,0.1,0.4c-0.4-0.7,0,0,0,0.2c-0.2-0.3-0.3-0.4-0.4-0.9c-0.3-1-0.5-1.2-0.8-2 c0-0.1,0-0.3,0.1,0c0-0.1-0.1-0.6-0.2-0.5c0,0,0-0.3,0-0.1c0-0.1-0.2-0.8-0.1-0.9c-1.2-4-0.4-9,2.6-11.8c3.3-2.6,6.8-3.4,11-2.3 C20.9,2.8,21.4,7.7,21.4,11.7L21.4,11.7z\'/%3E%3C/g%3E%3Cpath class=\'st0\' d=\'M17.3,10.7l-5.9-5.8c-0.4-0.4-1.1-0.4-1.6,0L4,10.7c-0.2,0.2-0.1,0.5,0.2,0.5h1.5v6.4c0,0.5,0.4,0.8,0.8,0.8 h2.4v-4.6c0-0.5,0.4-0.8,0.8-0.8h1.9c0.5,0,0.8,0.4,0.8,0.8v4.6h2.4c0.5,0,0.8-0.4,0.8-0.8v-6.4h1.5C17.4,11.3,17.5,10.9,17.3,10.7 L17.3,10.7z\'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
    }
    
    .mapboxgl-marker:not(.marker) svg {
        opacity: 0;
    }
    




/* UPDATED STYLES */
.mapboxgl-ctrl-geocoder {
  font-family: "web-Founders Grotesk", "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

@media screen and (min-width: 781px) {
  .mapboxgl-ctrl-geocoder--input {
    height: 36px;
    padding: 11px 35px 5px 35px;
	  font-size: 120%;
  }
}

@media screen and (max-width: 780px) {
	.mapboxgl-ctrl-geocoder--input {
		height: 45px;
		padding: 10px 40px 3px 35px !important;
		font-size: 18px;
	}

	
	.mapboxgl-ctrl-geocoder--icon-close {
		margin-top: 0;
	}
	.mapboxgl-ctrl-geocoder--icon-search {
        top: 11px;
		height: 22px;
		width: 22px;
}
	body .mapwrap2 .mapboxgl-ctrl-geocoder .suggestions > li > a {
    padding: 11px 12px 4px 12px;
	text-decoration-color: transparent;
}

		.mapboxgl-ctrl-top-left {
			transition: all 0.2s !important;
			width: 100%;
			max-width: min(calc(100% - 32px), 300px);
		}
.mapwrap #map .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
		width: 100%;
		max-width: unset;
	}
	.mapboxgl-ctrl-top-left:has(.mapboxgl-ctrl-geocoder--input:focus) {
		max-width: calc(100% - 32px);
		width: 100%;
	}

		body .mapwrap2 .mapboxgl-ctrl-geocoder .suggestions:has(.mapbox-gl-geocoder--error.mapbox-gl-geocoder--no-results) {
		    padding: 11px 12px 4px 12px;
	}
}

  .mapboxgl-ctrl-geocoder .suggestions {
	line-height: 1.2;
      font-size: 16px;
  }

.mapwrap .mapboxgl-ctrl-geocoder .suggestions > li > a {
    padding: 11px 12px 6px 12px;
    text-decoration-color: transparent;
}




.mapboxgl-popup-content h3 {
	padding: .75rem 0.75rem .2rem .75rem
}

    .mapbox-gl-geocoder--error {
		padding: 0;
	}

		body .mapwrap .mapboxgl-ctrl-geocoder .suggestions:has(.mapbox-gl-geocoder--error.mapbox-gl-geocoder--no-results) {
		    padding: 11px 12px 4px 12px;
	}

  .mapboxgl-ctrl-geocoder--icon-close {
	  margin-top: 0;
  }

.mapboxgl-ctrl-geocoder--icon.mapboxgl-ctrl-geocoder--icon-search {
	fill: #bbbbbb;
}

  body:not(.page-template-blank):not(:has(.no-map-border-radius)) .mapwrap {
      border-radius: 4px;
      overflow: hidden;
  }

.mapboxgl-popup-content-inner .event-info-p {
    margin-bottom: 0.5rem;
}

.mapboxgl-popup-content-inner .event-info-p a{
    color: #404040;
    display: inline-block;
    text-decoration: none !important;
    text-decoration-thickness: 0px !important;
    line-height: 1.05;
    box-shadow: inset 0px -1.5px 0px 0px var(--mapbox--color--popup,#ffca05);
}



.mapboxgl-popup-content-inner .event-info-p a:hover,
.mapboxgl-popup-content-inner .event-info-p a:focus-visible {
    color: black;
        box-shadow: inset 0px -2.5px 0px 0px var(--mapbox--color--popup,#ffca05);

}

.mapboxgl-popup-content-inner:has(.event-info-p) h4.voting-times {
    margin-top: 0.5rem;
}

.mapboxgl-popup-content-inner:has(.event-info-p) .img-wrapper {
    margin-top: 0.5rem;
}


@media screen and (max-width: 980px) {
.sidebar.mapbox-panel.panel-hidden {
    min-height: unset !important;
}
}