.mapboxgl-canvas {
    border-radius: 2px
}

.mapboxgl-popup-content {
    min-width: 294px;
    padding: 32px 24px 24px;
    border-radius: 4px;
    background: radial-gradient(352.07% 99.23% at 50% 50%, rgba(0, 0, 0, .15) 0, rgba(136, 136, 136, .15) 78.67%, rgba(255, 255, 255, .15) 100%), #0389dc;
    background-blend-mode: hard-light, normal;
    box-shadow: 0 4px 4px 0 #f0f
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-top-color: #f0f
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-content,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content,
.mapboxgl-popup-anchor-top .mapboxgl-popup-content,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content {
    border-top-right-radius: 2px
}

.mapboxgl-popup-close-button {
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    margin: 8px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23152F42" viewBox="0 0 24 24"><g clip-path="url(%23a)"><path fill-rule="evenodd" d="M16 18h2l-3.75-4.5h-2L16 18Zm-8 0 4-4.8 1-1.2 5-6h-2l-4 4.8L8 6H6l5 6-5 6h2Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs></svg>');
    color: rgba(0, 0, 0, 0);
    font-size: 1.875rem
}

.mapboxgl-popup-close-button:active,
.mapboxgl-popup-close-button:hover {
    background-color: rgba(0, 0, 0, 0);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23E3EFF2FF" viewBox="0 0 24 24"><g clip-path="url(%23a)"><path fill-rule="evenodd" d="M16 18h2l-3.75-4.5h-2L16 18Zm-8 0 4-4.8 1-1.2 5-6h-2l-4 4.8L8 6H6l5 6-5 6h2Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs></svg>')
}

@keyframes clip-slide-out-right {
    0% {
        clip-path: polygon(-1% -1%, 101% -1%, 101% 101%, -1% 101%)
    }

    to {
        clip-path: polygon(101% -1%, 101% -1%, 101% 101%, 101% 101%)
    }
}

@layer core, base, default, extend, override, custom, last;

@layer core {
    :root {
        --nav-main-height: 0px;
        --nav-utility-height: 0px;
        --nav-mobile-height: 0px;
        --nav-post-banner-height: 0px;
        --footer-height: 0px
    }

    ::selection {
        background-color: var(--fills-primary);
        color: var(--text-button-primary);
        text-shadow: none
    }

    *,
    :after,
    :before {
        box-sizing: border-box
    }

    * {
        margin: 0;
        padding: 0
    }

    html {
        box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizelegibility;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        text-size-adjust: 100%;
        scroll-behavior: smooth
    }

    @media print {
        html {
            font-size: 75%
        }
    }

    body,
    html {
        max-width: 100vw
    }

    html {
        overflow-x: hidden
    }

    body {
        --backgrounds-primary: #fff;
        --text-primary: #2f3036;
        --text-secondary: #4d4e54;
        --text-accent: #058D99;
        --text-button-primary: #fff;
        --text-button-secondary: #026275;
        --borders-subtle: rgba(2, 98, 117, 0.16);
        --borders-strong: #00a552;
        --borders-accent: #026275;
        --fills-primary: #026275;
        --fills-primary-hover: #044350;
        --fills-secondary: rgba(0, 165, 82, 0.1);
        --fills-secondary-hover: rgba(0, 165, 82, 0.3);
        --fills-transparent: rgba(2, 98, 117, 0.16);
        --extras-success-subtle: #e5f6ee;
        --extras-success-strong: #00a552;
        --extras-error-subtle: #fef1f2;
        --extras-error-strong: #bd3e49;
        position: relative;
        container-type: inline-size;
        container-name: body
    }

    body::-webkit-scrollbar {
        width: 8px;
        height: 8px
    }

    body::-webkit-scrollbar-corner,
    body::-webkit-scrollbar-track {
        background-color: var(--borders-subtle)
    }

    body::-webkit-scrollbar-thumb {
        background-color: var(--fills-primary);
        border-radius: 2px
    }

    ::-webkit-scrollbar {
        width: 4px;
        height: 4px
    }

    ::-webkit-scrollbar-corner,
    ::-webkit-scrollbar-track {
        background-color: var(--fills-transparent)
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--text-primary);
        border-radius: 2px
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance
    }

    a {
        transition: .25s ease
    }

    video {
        max-width: 100%
    }

    @media print {
        [data-hide-print] {
            display: none !important
        }
    }

    .grecaptcha-badge {
        visibility: hidden;
        height: 0
    }

    .grecaptcha-disclaimer {
        color: #acacac;
        font-family: sans-serif;
        font-size: .75rem
    }

    .grecaptcha-disclaimer a {
        color: var(--text-accent);
        text-decoration: none
    }

    .grecaptcha-disclaimer a:hover {
        text-decoration: underline
    }

    .code {
        max-width: 90vw;
        max-height: 75vh;
        padding: 16px 24px;
        overflow: auto;
        border: 2px dashed #666;
        border-radius: 4px;
        background-color: #222;
        color: #fff;
        text-align: left;
        font-size: .75rem;
        font-family: Operator Mono Book;
        font-style: normal;
        font-weight: 400
    }

    @container (width < 700px) {
        .code {
            font-size: .625rem
        }
    }
}

@property --backgrounds-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --text-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --text-secondary {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --text-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --text-button-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --text-button-secondary {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --borders-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --borders-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --borders-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --fills-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --fills-secondary {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --fills-transparent {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --extras-success-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --extras-success-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --extras-error-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --extras-error-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #f0f
}

@property --logo-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #666565
}

@property --logo-color-one {
    syntax: "<color>";
    inherits: true;
    initial-value: #00b155
}

@property --logo-color-two {
    syntax: "<color>";
    inherits: true;
    initial-value: #00814d
}

/* Force teal color on all page/section titles */
.styles_subHeadline__XRknK {
    color: #058D99 !important;
}