@layer bootstrap,vendors,root,cms,base,icons,components,utilities,layout,grid,helpers,sections,themes;

@layer root {
    .sjm-sidebar {
        --clr-light: rgb(255, 255, 255);
        --clr-dark: rgb(33, 37, 41);
        --clr-primary: rgb(13, 110, 253);
        --clr-secondary: rgb(225, 195, 250);
        --ff-fallbacks: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans",
        Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --ff-opensans: "Open Sans", var(--ff-fallbacks);
        --ff-paralucent: Paralucent, var(--ff-fallbacks);
        --page-max-width: 100%;
        --sidebar-width: 0;
        --page-layout: [header-left] "header header" auto [header-right] [main-left] "sidebar main" 1fr [main-right]
        [footer-left] "sidebar footer" auto [footer-right];
        --edge-spacing: 1.5rem;
        --content-max-width: 1320px;
        --fullwidth-max-width: 1920px;
        --page-grid: [fluid-start] minmax(var(--edge-spacing), 1fr) [fullwidth-start]
        minmax(0, calc((var(--fullwidth-max-width) - var(--content-max-width)) / 2)) [content-start]
        min(var(--content-max-width), 100% - var(--edge-spacing) * 2) [content-end]
        minmax(0, calc((var(--fullwidth-max-width) - var(--content-max-width)) / 2)) [fullwidth-end]
        minmax(var(--edge-spacing), 1fr) [fluid-end];
        --fullwidth-grid: [fullwidth-start] minmax(var(--edge-spacing), 1fr) [content-start]
        min(var(--content-max-width), 100% - var(--edge-spacing) * 2) [content-end] minmax(var(--edge-spacing), 1fr)
        [fullwidth-end];
        --font-family-base: var(--ff-fallbacks);
        --font-size-base: 1rem;
        --line-height-base: 1.5;
        --font-weight-base: 400;
        --letter-spacing-base: normal;
        --text-align-base: start;
        --canvas: rgb(255, 255, 255);
        --canvas-text: rgb(0, 0, 0);
        --link-color: rgb(13, 110, 253);
        --link-color-hover: rgb(2, 66, 162);
        --focus-shadow-type: 0 0 0;
        --focus-shadow-color: color-mix(in srgb, currentcolor, transparent 60%);
        --focus-shadow-width: 0.2rem;
        --font-family-heading: var(--ff-fallbacks);
        --line-height-heading: 1.2;
        --font-weight-heading: 700;
        --font-style-heading: normal;
        --letter-spacing-heading: normal;
        --color-heading: currentColor;
        --font-size-h1: calc(var(--font-size-base) * 1.75), 4.765vw, calc(var(--font-size-base) * 2.25);
        --font-size-h2: calc(var(--font-size-base) * 1.625), 3.9725vw, calc(var(--font-size-base) * 1.875);
        --font-size-h3: calc(var(--font-size-base) * 1.5), 3.71vw, calc(var(--font-size-base) * 1.75);
        --font-size-h4: calc(var(--font-size-base) * 1.375), 3.1765vw, calc(var(--font-size-base) * 1.5);
        --font-size-h5: calc(var(--font-size-base) * 1.25), 2.9125vw, calc(var(--font-size-base) * 1.375);
        --font-size-h6: var(--font-size-base), 2.3825vw, calc(var(--font-size-base) * 1.125);
        --code-color: rgb(214, 51, 132);
        --code-background: rgb(214, 51, 132);
        --mark-color: rgb(33, 37, 41);
        --mark-background: rgb(255, 243, 205);
        --ins-color: rgb(33, 37, 41);
        --ins-background: rgb(199, 240, 217);
        --del-color: rgb(77, 77, 77);
        --del-background: rgb(255, 203, 189);
        --kbd-color: rgb(255, 255, 255);
        --kbd-background: rgb(45, 51, 57);
        --kbd-border-color: rgb(33, 37, 41);
    }
}

@layer base {

    @font-face {
        font-family: Futura Std;
        src: url(/assets/fonts/futura-std/FuturaStd-Book.woff2) format("woff2"), url(/assets/fonts/futura-std/FuturaStd-Book.woff) format("woff");
        font-weight: 400;
        font-style: normal;
        font-display: swap
    }

    @font-face {
        font-family: Futura Std;
        src: url(/assets/fonts/futura-std/FuturaStd-Medium.woff2) format("woff2"), url(/assets/fonts/futura-std/FuturaStd-Medium.woff) format("woff");
        font-weight: 500;
        font-style: normal;
        font-display: swap
    }

    @font-face {
        font-family: Futura Std;
        src: url(/assets/fonts/futura-std/FuturaStd-Bold.woff2) format("woff2"), url(/assets/fonts/futura-std/FuturaStd-Bold.woff) format("woff");
        font-weight: 700;
        font-style: normal;
        font-display: swap
    }

    @font-face {
        font-family: Futura Std;
        src: url(/assets/fonts/futura-std/FuturaStd-ExtraBold.woff2) format("woff2"), url(/assets/fonts/futura-std/FuturaStd-ExtraBold.woff) format("woff");
        font-weight: 800;
        font-style: normal;
        font-display: swap
    }

    @font-face {
        font-family: Futura Std;
        src: url(/assets/fonts/futura-std/FuturaStd-Heavy.woff2) format("woff2"), url(/assets/fonts/futura-std/FuturaStd-Heavy.woff) format("woff");
        font-weight: 900;
        font-style: normal;
        font-display: swap
    }

    @font-face {
        font-family: Futura Std;
        src: url(/assets/fonts/futura-std/FuturaStd-BookOblique.woff2) format("woff2"), url(/assets/fonts/futura-std/FuturaStd-BookOblique.woff) format("woff");
        font-weight: 400;
        font-style: italic;
        font-display: swap
    }

    @font-face {
        font-family: Futura Std;
        src: url(/assets/fonts/futura-std/FuturaStd-MediumOblique.woff2) format("woff2"), url(/assets/fonts/futura-std/FuturaStd-MediumOblique.woff) format("woff");
        font-weight: 500;
        font-style: italic;
        font-display: swap
    }

    @font-face {
        font-family: Futura Std Condensed;
        src: url(/assets/fonts/futura-std/FuturaStd-CondensedLight.woff2) format("woff2"), url(/assets/fonts/futura-std/FuturaStd-CondensedLight.woff) format("woff");
        font-weight: 300;
        font-style: normal;
        font-display: swap
    }

    @font-face {
        font-family: Futura Std Condensed;
        src: url(/assets/fonts/futura-std/FuturaStd-Condensed.woff2) format("woff2"), url(/assets/fonts/futura-std/FuturaStd-Condensed.woff) format("woff");
        font-weight: 500;
        font-style: normal;
        font-display: swap
    }

    @font-face {
        font-family: Futura Std Condensed;
        src: url(/assets/fonts/futura-std/FuturaStd-CondensedBold.woff2) format("woff2"), url(/assets/fonts/futura-std/FuturaStd-CondensedBold.woff) format("woff");
        font-weight: 700;
        font-style: normal;
        font-display: swap
    }

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

    html {
        height: 100%;
    }

    body {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    main#page {
        flex-grow: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
        :is(:root, :has(:target)) {
            scroll-behavior: smooth;
        }
    }
    .sjm-sidebar {

        font-family: var(--font-family-base, var(--ff-fallbacks));
        font-size:var(--font-size-base);
        line-height:var(--line-height-base);
        font-weight:var(--font-weight-base);
        letter-spacing:var(--letter-spacing-base);
        text-align:var(--text-align-base);
        color: var(--canvas-text);

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        dl,
        menu,
        ol,
        ul {
            margin-block: 0;
        }
        menu,
        ol,
        ul {
            padding-inline-start: max(32px, 1.25em);
        }
        dt {
            font-weight: bolder;
        }
        dd {
            margin-inline-start: 0;
        }
        dl :is(dd, div) + :is(dd, dt, div) {
            margin-block-start: 0.5em;
        }
        blockquote,
        figure {
            margin: 0;
        }
        figcaption:first-child {
            margin-block-end: 0.5rem;
        }
        figcaption:last-child {
            margin-block-start: 0.5rem;
        }
        hr {
            margin-block: 1rem;
            color: inherit;
            border-style: none;
            border-block-start-style: solid;
            opacity: 0.5;
        }
        address {
            font-style: normal;
        }
        hgroup :is(p, h1, h2, h3, h4, h5, h6) + :is(p, h1, h2, h3, h4, h5, h6) {
            margin-block-start: 0.5rem;
        }
        b,
        strong {
            font-weight: bolder;
        }
        small {
            font-size: inherit;
        }
        abbr[title] {
            -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
            cursor: help;
        }
        sub,
        sup {
            position: relative;
            font-size: 0.75em;
            line-height: 0;
            vertical-align: baseline;
        }
        sub {
            bottom: -0.25em;
        }
        sup {
            top: -0.5em;
        }
        a:any-link[rel="help"]:not([aria-disabled]) {
            cursor: help;
        }
        a:not(:any-link),
        a:not(:any-link):hover {
            color: inherit;
            text-decoration: none;
        }
        a:any-link:read-write {
            cursor: text;
            color: inherit;
        }
        a[aria-disabled] {
            opacity: 0.5;
            cursor: auto;
            pointer-events: none;
        }
        pre,
        kbd,
        samp,
        code {
            font-size: 0.875em;
        }
        pre {
            margin-block: 0;
            overflow: auto;
        }
        code {
            overflow-wrap: break-word;
        }
        :is(pre, kbd, samp, code) * {
            font-size: inherit;
            word-break: normal;
        }
        :is(pre, kbd, samp, code) :any-link {
            color: inherit !important;
        }
        img,
        iframe,
        object,
        embed,
        canvas,
        svg,
        video {
            max-width: 100%;
            vertical-align: middle;
            height: auto;
        }
        audio {
            vertical-align: middle;
        }
        img {
            font-style: italic;
        }
        iframe {
            border: 0;
        }
        table {
            border-collapse: collapse;
            caption-side: bottom;
            vertical-align: top;
            border-color: initial;
            font-variant-numeric: tabular-nums;
        }
        caption {
            padding-block: 0.5em;
            text-align: inherit;
        }
        thead {
            vertical-align: bottom;
        }
        tbody,
        tfoot {
            vertical-align: inherit;
        }
        thead,
        tbody,
        tfoot,
        tr,
        td,
        th {
            border-color: inherit;
            border-style: solid;
            border-width: 1px;
        }
        td,
        th {
            padding-block: 0.25em;
            padding-inline: 0.5em;
        }
        th {
            text-align: inherit;
            text-align: -webkit-match-parent;
        }
        th:not([scope="row" i])[colspan] {
            text-align: center;
        }
        th[scope="row" i][rowspan] {
            vertical-align: middle;
        }
        colgroup[hidden] {
            display: table-column-group !important;
        }
        col[hidden] {
            display: table-column !important;
        }
        thead[hidden] {
            display: table-header-group !important;
        }
        tbody[hidden] {
            display: table-row-group !important;
        }
        tfoot[hidden] {
            display: table-footer-group !important;
        }
        tr[hidden] {
            display: table-row !important;
        }
        :is(colgroup, col, thead, tbody, tfoot, tr)[hidden] {
            visibility: collapse;
        }
        label {
            display: inline-block;
        }
        input,
        button,
        select,
        optgroup,
        textarea {
            margin: 0;
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
        }
        button,
        input[type="button" i],
        input[type="reset" i],
        input[type="submit" i],
        ::file-selector-button {
            -webkit-appearance: button;
        }
        button {
            text-transform: none;
        }
        button:focus:not(:focus-visible) {
            outline: 0;
        }
        ::-moz-focus-inner {
            padding: 0;
            border-style: none;
        }
        button:not(:disabled),
        [role="button" i]:not([aria-disabled="true" i]),
        input[type="button" i]:not(:disabled),
        input[type="reset" i]:not(:disabled),
        input[type="submit" i]:not(:disabled),
        input[type="color" i]:not(:disabled),
        input[type="file" i]:not(:disabled)::file-selector-button {
            cursor: pointer;
        }
        ::file-selector-button {
            font: inherit;
        }
        input[type="image" i] {
            color: inherit;
            object-fit: cover;
            vertical-align: middle;
        }
        select {
            word-wrap: normal;
            text-transform: none;
        }
        select:disabled {
            opacity: 1;
        }
        textarea {
            resize: vertical;
        }
        input[type="tel" i],
        input[type="url" i],
        input[type="email" i],
        input[type="number" i] {
            direction: ltr !important;
        }
        ::-webkit-color-swatch-wrapper {
            padding: 0;
        }
        ::-webkit-color-swatch {
            border-color: gray;
        }
        [list]:not(
            :is([type="date" i], [type="datetime-local" i], [type="month" i], [type="week" i], [type="time" i])
        )::-webkit-calendar-picker-indicator {
            display: none !important;
        }
        [type="search" i] {
            -webkit-appearance: textfield;
            outline-offset: -2px;
        }
        ::-webkit-search-decoration {
            -webkit-appearance: none;
        }
        ::-webkit-search-cancel-button {
            -webkit-appearance: none;
        }
        ::-webkit-inner-spin-button {
            height: auto;
        }
        ::-webkit-datetime-edit-fields-wrapper,
        ::-webkit-datetime-edit-text,
        ::-webkit-datetime-edit-minute,
        ::-webkit-datetime-edit-hour-field,
        ::-webkit-datetime-edit-day-field,
        ::-webkit-datetime-edit-month-field,
        ::-webkit-datetime-edit-year-field {
            padding: 0 !important;
        }
        fieldset {
            min-inline-size: 0;
            padding: 0;
            border: 0;
            margin: 0;
        }
        legend {
            margin-block-end: 0.5em;
            float: left;
            width: 100%;
            padding: 0;
        }
        legend + * {
            clear: left;
        }
        output {
            display: inline-block;
        }
        summary {
            display: list-item;
            cursor: pointer;
        }
        progress {
            vertical-align: baseline;
        }
        dialog {
            border: none;
        }
        [hidden] {
            display: none !important;
        }
        [aria-disabled="true" i] {
            pointer-events: none;
        }
        @media (prefers-reduced-motion: no-preference) {
            @view-transition {
                navigation: auto;
            }
        }
    }
    .sjm-sidebar {
        .cms-output :is(h1, h2, h3, h4, h5, h6, dt) {
            text-wrap: balance;
        }
        .cms-output :is(p, li, dd) {
            text-wrap: pretty;
        }
        .cms-output :is(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, dt, dd, li, hgroup, div, pre, table):empty {
            display: none;
        }
        .cms-output small {
            font-size: 0.825em;
        }
        .cms-output
        :is(
            p,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            blockquote,
            ul,
            ol,
            dl,
            hgroup,
            div,
            pre,
            table,
            figure,
            img,
            video,
            audio,
            iframe
        )
        + :is(
            p,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            blockquote,
            ul,
            ol,
            dl,
            hgroup,
            div,
            pre,
            table,
            figure,
            img,
            video,
            audio,
            iframe
        ) {
            margin-block-start: var(--flow-space, 1em);
        }
        .cms-output :is(h1, h2, h3, h4, h5, h6) {
            --flow-space: max(1.375rem, 1em);
            margin-block-end: var(--flow-space, 1rem);
        }
        .cms-output > :is(table, img, video, audio, iframe):not([style*="width"]) {
            width: 100%;
            float: none !important;
        }
        .cms-output :is(li + li) {
            margin-block-start: var(--_list-spacing, 0.25em);
        }
        .cms-output :is(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, hr, hgroup, div, pre, table, figure, br) {
            clear: both;
        }
        .cms-formbuilder .vandeaardbodemverdwenen,
        .cms-formbuilder input[name="gender" i] {
            display: none;
        }
        .cms-formbuilder .row {
            display: grid;
            gap: 1rem;
            align-items: center;
            grid-template-columns: repeat(12, 1fr);
        }
        .cms-formbuilder .row > * {
            grid-column: 1/-1;
            width: 100% !important;
        }
        @media (min-width: 1024px) {
            .cms-formbuilder .col-lg-1 {
                grid-column: span 1;
            }
            .cms-formbuilder .col-lg-2 {
                grid-column: span 2;
            }
            .cms-formbuilder .col-lg-3 {
                grid-column: span 3;
            }
            .cms-formbuilder .col-lg-4 {
                grid-column: span 4;
            }
            .cms-formbuilder .col-lg-5 {
                grid-column: span 5;
            }
            .cms-formbuilder .col-lg-6 {
                grid-column: span 6;
            }
            .cms-formbuilder .col-lg-7 {
                grid-column: span 7;
            }
            .cms-formbuilder .col-lg-8 {
                grid-column: span 8;
            }
            .cms-formbuilder .col-lg-9 {
                grid-column: span 9;
            }
            .cms-formbuilder .col-lg-10 {
                grid-column: span 10;
            }
            .cms-formbuilder .col-lg-11 {
                grid-column: span 11;
            }
            .cms-formbuilder .col-lg-12 {
                grid-column: span 12;
            }
        }
        .feedback:empty {
            display: none;
        }
        .feedback > .alert {
            margin-bottom: 1rem;
        }
        .feedback ul {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        .feedback ul li {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 0.25rem 0.5rem;
            align-items: baseline;
            justify-items: start;
        }
        .feedback ul li .feedback-icon {
            justify-self: center;
        }
        :root {
            scrollbar-color: color-mix(in srgb, var(--canvas-text), transparent 70%) var(--canvas);
        }
        body {
            font-family: var(--font-family-base, var(--ff-fallbacks));
            font-size: var(--font-size-base);
            line-height: var(--line-height-base);
            font-weight: var(--font-weight-base);
            letter-spacing: var(--letter-spacing-base);
            text-align: var(--text-align-base);
            color: var(--canvas-text);
        }
        h6,
        .h6,
        h5,
        .h5,
        h4,
        .h4,
        h3,
        .h3,
        h2,
        .h2,
        h1,
        .h1 {
            font-family: var(--font-family-heading);
            line-height: var(--line-height-heading);
            font-weight: var(--font-weight-heading);
            font-style: var(--font-style-heading);
            letter-spacing: var(--letter-spacing-heading);
            color: var(--color-heading);
        }
        h1,
        .h1 {
            font-size: clamp(var(--font-size-h1));
        }
        h2,
        .h2 {
            font-size: clamp(var(--font-size-h2));
        }
        h3,
        .h3 {
            font-size: clamp(var(--font-size-h3));
        }
        h4,
        .h4 {
            font-size: clamp(var(--font-size-h4));
        }
        h5,
        .h5 {
            font-size: clamp(var(--font-size-h5));
        }
        h6,
        .h6 {
            font-size: clamp(var(--font-size-h6));
        }
        :target {
            scroll-margin-top: var(--scroll-margin);
        }
        :focus-visible {
            outline: none;
            box-shadow: var(--focus-shadow-type) var(--focus-shadow-width) var(--focus-shadow-color, currentColor);
        }
        a {
            color: var(--link-color);
            text-decoration: none;
        }
        a:is(:hover, :focus-visible) {
            color: var(--link-color-hover);
        }
        @media (prefers-reduced-motion: no-preference) {
            a {
                transition: color 0.15s ease-in-out;
            }
        }
        @media (forced-colors: active) {
            :focus-visible {
                outline: auto;
            }
        }
    }
    .sjm-sidebar {
        --form-input-color: rgb(0, 0, 0);
        --form-input-background: rgb(255, 255, 255);
        --form-input-padding-block: 0.375em;
        --form-input-padding-inline: 0.75em;
        --form-input-border-radius: 0.375rem;
        --form-input-border-width: 1px;
        --form-input-border-color: rgb(206, 212, 218);
        --form-input-font-family: var(--ff-fallbacks);
        --form-input-font-size: 1rem;
        --form-input-line-height: 1.5;
        --form-input-font-weight: 400;
        --form-input-letter-spacing: normal;
        --form-input-placeholder-color: rgba(0, 0, 0, 0.5);
        --form-input-focus-color: rgb(0, 0, 0);
        --form-input-focus-background: var(--clr-light);
        --form-input-focus-border-color: #86b7fe;
        --form-input-focus-shadow: color-mix(in srgb, var(--form-input-focus-border-color), transparent 60%);
        --form-input-disabled-color: currentColor;
        --form-input-disabled-background: #eaedf0;
        --form-input-disabled-border-color: #ced4da;
        --form-input-invalid-color: rgb(220, 53, 69);
        --form-input-invalid-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        --form-input-valid-color: rgb(25, 135, 84);
        --form-input-valid-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    }
    .sjm-sidebar {
        .form-control {
            display: block;
            inline-size: 100%;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-clip: padding-box;
            border: var(--form-input-border-width) solid var(--form-input-border-color);
            border-radius: var(--form-input-border-radius);
            padding-block: var(--form-input-padding-block);
            padding-inline: var(--form-input-padding-inline);
            background-color: var(--form-input-background);
            font-family: var(--form-input-font-family);
            font-size: var(--form-input-font-size);
            line-height: var(--form-input-line-height);
            font-weight: var(--form-input-font-weight);
            color: var(--form-input-color);
        }
        .form-control:focus {
            box-shadow: var(--focus-shadow-type) var(--focus-shadow-width)
            var(--form-input-focus-shadow, var(--focus-shadow-color));
            border-color: var(--form-input-focus-border-color);
            background-color: var(--form-input-focus-background);
            color: var(--form-input-focus-color);
        }
        .form-control:disabled {
            background-color: var(--form-input-disabled-background);
            border-color: var(--form-input-disabled-border-color);
            color: var(--form-input-disabled-color);
        }
        .form-control[required] + label:after {
            content: " *";
            speak: never;
        }
        .form-control--plaintext:not(:disabled) {
            padding-inline: 0;
            border-inline: none;
            border-color: transparent !important;
            background-color: transparent;
            box-shadow: none !important;
        }
        .form-control::-webkit-date-and-time-value {
            min-width: 85px;
            height: calc(var(--form-input-line-height) * 1em);
            margin: 0;
        }
        .form-control::-webkit-datetime-edit {
            display: block;
            padding: 0;
        }
        .form-control:is(textarea) {
            min-height: calc(1.5em + 0.75rem + var(--bs-border-width) * 2);
        }
        .form-control::placeholder {
            color: var(--form-input-placeholder-color);
        }
        :root {
            --form-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        }
        .form-select {
            display: block;
            inline-size: 100%;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-clip: padding-box;
            border: var(--form-input-border-width) solid var(--form-input-border-color);
            border-radius: var(--form-input-border-radius);
            padding-block: var(--form-input-padding-block);
            padding-inline: var(--form-input-padding-inline);
            background-color: var(--form-input-background);
            font-family: var(--form-input-font-family);
            font-size: var(--form-input-font-size);
            line-height: var(--form-input-line-height);
            font-weight: var(--form-input-font-weight);
            color: var(--form-input-color);
            padding-inline-end: 2.25em;
            background-image: var(--form-select-indicator), var(--form-select-bg-icon, none);
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
        }
        .form-select:focus {
            box-shadow: var(--focus-shadow-type) var(--focus-shadow-width)
            var(--form-input-focus-shadow, var(--focus-shadow-color));
            border-color: var(--form-input-focus-border-color);
            background-color: var(--form-input-focus-background);
            color: var(--form-input-focus-color);
        }
        .form-select:disabled {
            background-color: var(--form-input-disabled-background);
            border-color: var(--form-input-disabled-border-color);
            color: var(--form-input-disabled-color);
        }
        .form-select[required] + label:after {
            content: " *";
            speak: never;
        }
        .form-select[multiple],
        .form-select[size]:not([size="1"]) {
            background-image: none;
            padding-inline-end: 0.75em;
        }
        .form-select:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 var(--form-input-color);
        }
        :root {
            --form-check-background: rgb(255, 255, 255);
            --form-check-size: 1em;
            --form-check-border-color: var(--form-input-border-color);
            --form-check-focus-border-color: var(--form-input-focus-border-color);
            --form-check-checked-background: rgb(13, 110, 253);
            --form-check-checked-border-color: rgb(13, 110, 253);
            --form-switch-background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
            --form-switch-focus-background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
        }
        .form-check {
            display: block;
            min-height: 1.5rem;
            padding-inline-start: 1.5em;
            margin-block-end: 0.125rem;
        }
        .form-check--inline {
            display: inline-block;
            margin-block-end: 1rem;
        }
        .form-check .form-check-input {
            vertical-align: top;
            float: left;
            margin-inline-start: -1.5em;
            margin-block-start: 0.25em;
        }
        .form-check.form-switch {
            padding-inline-start: 2.5em;
        }
        .form-check-grid {
            display: grid;
            grid-template-columns: auto 1fr;
            column-gap: 0.5em;
            align-items: start;
            margin-block-end: 0.125rem;
        }
        .form-check-grid--inline {
            display: inline-grid;
            margin-block-end: 1rem;
        }
        .form-check-grid .form-check-input {
            margin-block-start: 0.25em;
        }
        .form-check-grid .form-check-input[role="switch" i] {
            margin-inline-start: 0;
        }
        .form-check-grid :not(.form-check-input) {
            grid-column: 2;
        }
        .form-check-input {
            width: var(--form-check-size);
            height: var(--form-check-size);
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: var(--form-check-background);
            background-image: var(--form-check-image);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            border: 1px solid var(--form-check-border-color);
            border-radius: var(--form-check-radius);
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        .form-check-input:focus {
            box-shadow: var(--focus-shadow-type) var(--focus-shadow-width) var(--form-input-focus-shadow);
            border-color: var(--form-check-focus-border-color);
        }
        .form-check-input:active {
            filter: brightness(90%);
        }
        .form-check-input:checked {
            background-color: var(--form-check-checked-background);
            border-color: var(--form-check-checked-border-color);
        }
        .form-check-input[type="checkbox" i] {
            --form-check-radius: 0.25em;
        }
        .form-check-input[type="checkbox" i]:checked {
            --form-check-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
        }
        .form-check-input[type="checkbox" i]:indeterminate {
            --form-check-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
        }
        .form-check-input[type="radio" i] {
            --form-check-radius: 50%;
        }
        .form-check-input[type="radio" i]:checked {
            --form-check-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
        }
        .form-check-input:disabled {
            pointer-events: none;
            filter: none;
            opacity: 0.5;
        }
        .form-check-input[role="switch" i] {
            width: calc(var(--form-check-size) * 2);
            margin-inline-start: -2.5em;
            background-image: var(--form-switch-background);
            background-position: left center;
            border-radius: 2em;
            transition:
                    background-position 0.15s ease-in-out,
                    box-shadow 0.15s ease-in-out;
        }
        .form-check-input[role="switch" i]:focus {
            --form-switch-background: var(--form-switch-focus-background);
        }
        .form-check-input[role="switch" i]:checked {
            --form-switch-background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
            background-position: right center;
        }
        :root {
            --form-range-slider-background: var(--form-input-border-color);
            --form-range-slider-thumb: rgb(13, 110, 253);
            --form-range-disabled-thumb: color-mix(in srgb, var(--form-range-slider-background), #fff 25%);
        }
        .form-range {
            width: 100%;
            height: 1.5rem;
            padding: 0;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: transparent;
        }
        .form-range::-webkit-slider-runnable-track {
            width: 100%;
            height: 0.5rem;
            color: transparent;
            cursor: pointer;
            background-color: var(--form-range-slider-background);
            border-color: transparent;
            border-radius: 1rem;
        }
        .form-range::-moz-range-track {
            width: 100%;
            height: 0.5rem;
            color: transparent;
            cursor: pointer;
            background-color: var(--form-range-slider-background);
            border-color: transparent;
            border-radius: 1rem;
        }
        .form-range::-webkit-slider-thumb {
            width: 1rem;
            height: 1rem;
            margin-block-start: -0.25rem;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: var(--form-range-slider-thumb);
            border: 0;
            border-radius: 1rem;
            -webkit-transition:
                    background-color 0.15s ease-in-out,
                    border-color 0.15s ease-in-out,
                    box-shadow 0.15s ease-in-out;
            transition:
                    background-color 0.15s ease-in-out,
                    border-color 0.15s ease-in-out,
                    box-shadow 0.15s ease-in-out;
        }
        .form-range::-moz-range-thumb {
            width: 1rem;
            height: 1rem;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: var(--form-range-slider-thumb);
            border: 0;
            border-radius: 1rem;
            -moz-transition:
                    background-color 0.15s ease-in-out,
                    border-color 0.15s ease-in-out,
                    box-shadow 0.15s ease-in-out;
            transition:
                    background-color 0.15s ease-in-out,
                    border-color 0.15s ease-in-out,
                    box-shadow 0.15s ease-in-out;
        }
        .form-range:focus {
            outline: 0;
        }
        .form-range:focus::-webkit-slider-thumb {
            box-shadow:
                    0 0 0 1px #fff,
                    0 0 0 0.25rem var(--focus-shadow);
        }
        .form-range:focus::-moz-range-thumb {
            box-shadow:
                    0 0 0 1px #fff,
                    0 0 0 0.25rem var(--focus-shadow);
        }
        .form-range:disabled {
            pointer-events: none;
        }
        .form-range:disabled::-webkit-slider-thumb {
            background-color: var(--form-range-slider-thumb-disabled);
        }
        .form-range:disabled::-moz-range-thumb {
            background-color: var(--form-range-slider-thumb-disabled);
        }
        .form-range::-moz-focus-outer {
            border: 0;
        }
        input,
        button,
        select,
        textarea,
        ::file-selector-button {
            transition:
                    color 0.15s ease-in-out,
                    background-color 0.15s ease-in-out,
                    border-color 0.15s ease-in-out,
                    box-shadow 0.15s ease-in-out;
        }
    }
}

@layer components {
    .sjm-sidebar {
        [data-disclosure-content]:not(.active) {
            display: none
        }
        [data-disclosure-content]:not(.active)[data-disclosure-toggle=visibility i] {
            display: revert;
            visibility: hidden;
            opacity: 0
        }
        [data-disclosure-content].transitioning {
            transition: height .25s ease, opacity .25s ease, width .25s ease, .25s transform ease, box-shadow .25s ease
        }
        @media (prefers-reduced-motion) {
            [data-disclosure-content] {
                transition-duration: .000001ms !important
            }
        }
        .dropdown {
            --dropdown-background: var(--canvas);
            --dropdown-border-width: 1px;
            --dropdown-border-color: var(--canvas-color);
            --dropdown-height: 250px;
            --dropdown-width: auto;
            --dropdown-radius: .375rem;
            --dropdown-padding: .25rem;
            --dropdown-offset: 0px;
            --dropdown-list-spacing: 0;
            --dropdown-control-color: var(--canvas-text);
            --dropdown-control-hover-color: var(--dropdown-control-color);
            --dropdown-item-font-size: 1rem;
            --dropdown-item-font-weight: 400;
            --dropdown-item-padding-inline: .5em;
            --dropdown-item-padding-block: .25em;
            --dropdown-item-radius: 0;
            --dropdown-item-color: var(--canvas-text);
            --dropdown-item-hover-background: var(--button-hover-background);
            --dropdown-item-border-color-active: var(--button-focus-border-color);
            position: relative
        }
        .dropdown__control {
            background-color: transparent;
            text-align: start;
            border: none;
            padding: 0;
            display: inline-flex;
            align-items: center;
            -webkit-user-select: none;
            user-select: none;
            gap: .25em;
            color: var(--dropdown-control-color)
        }
        .dropdown__control:hover {
            color: var(--dropdown-control-hover-color)
        }
        .dropdown__control:focus {
            box-shadow: 0 0 0 .25rem var(--focus-shadow);
            border-color: var(--button-border-color-focus) !important
        }
        .dropdown__list {
            position: absolute;
            z-index: 1;
            top: calc(100% + var(--dropdown-offset));
            inset-inline-start: 0;
            background-color: var(--dropdown-background);
            border: var(--dropdown-border-width) solid var(--dropdown-border-color);
            width: var(--dropdown-width, 100%);
            border-radius: var(--dropdown-radius)
        }
        .dropdown__list ul,
        .dropdown__list ol {
            list-style-type: none;
            margin: 0;
            padding-inline: var(--dropdown-padding-inline);
            padding-block: var(--dropdown-padding-block);
            overflow-y: auto;
            max-height: var(--dropdown-height);
            overscroll-behavior: contain
        }
        .dropdown__list ul li+li,
        .dropdown__list ol li+li {
            margin-block-start: var(--dropdown-list-spacing)
        }
        .dropdown__list :is(.dropdown__item,
    .dropdown__control) {
            font-size: var(--dropdown-item-font-size);
            font-weight: var(--dropdown-item-font-weight);
            padding: var(--dropdown-item-padding);
            color: var(--dropdown-item-color);
            border: 1px solid transparent;
            text-decoration: none;
            display: flex;
            align-items: center;
            column-gap: .5rem;
            background-color: transparent;
            width: 100%;
            border-radius: var(--dropdown-item-radius);
            min-width: max-content;
            white-space: nowrap
        }
        .dropdown__list :is(.dropdown__item,
    .dropdown__control):hover,
        .dropdown__list :is(.dropdown__item,
    .dropdown__control):focus-visible,
        .dropdown__list :is(.dropdown__item,
    .dropdown__control)[aria-expanded=true i] {
            background-color: var(--dropdown-item-hover-background);
            color: var(--dropdown-item-hover-color)
        }
        .dropdown__list :is(.dropdown__item,
    .dropdown__control)[aria-current],
        .dropdown__list :is(.dropdown__item,
    .dropdown__control)[aria-pressed],
        .dropdown__list :is(.dropdown__item,
    .dropdown__control)[aria-selected]:not([aria-selected=false i]) {
            border-color: var(--dropdown-item-active-border-color)
        }
        .offcanvas {
            --offcanvas-transition: cubic-bezier(.22, .61, .36, 1);
            --offcanvas-min-width: 400px;
            --offcanvas-min-height: 400px;
            display: initial;
            position: fixed;
            visibility: visible;
            overflow: auto;
            z-index: 3000;
            max-height: none;
            max-width: 100%;
            box-shadow: 0 0 0 100vmax #0000;
            transition-timing-function: var(--offcanvas-transition) !important;
            background-clip: padding-box;
            margin: 0
        }
        .offcanvas--start,
        .offcanvas--end {
            height: 100%;
            min-width: min(var(--offcanvas-min-width), 100%)
        }
        .offcanvas--start {
            inset: 0 auto 0 0;
            transform: translate(-100%)
        }
        .offcanvas--end {
            inset: 0 0 0 auto;
            transform: translate(100%)
        }
        .offcanvas--top,
        .offcanvas--bottom {
            width: 100%;
            min-height: min(var(--offcanvas-min-height), 100%)
        }
        .offcanvas--top {
            inset: 0 0 auto 0;
            transform: translateY(-100%)
        }
        .offcanvas--bottom {
            inset: auto 0 0 0;
            transform: translateY(100%)
        }
        .navigation {
            --nav-background: #fff;
            --nav-item-font-size: 1.125rem;
            --nav-item-font-weight: 700;
            --nav-item-font-family: var(--font-family-base);
            --nav-item-color: currentColor;
            --nav-item-padding-inline: .25em;
            --nav-item-padding-block: .25em;
            --nav-item-hover-color: #00B3FF;
            --nav-item-hover-font-weight: 700;
            --nav-item-active-color: #EA5B0C;
            --nav-item-active-font-weight: 700;
            --nav-item-activechild-color: #EA5B0C;
            --nav-item-activechild-weight: 700;
            --nav-dropdown-indicator-style: solid;
            --nav-dropdown-indicator-color: #00B3FF;
            --nav-dropdown-indicator-width: 3px;
            --nav-dropdown-indicator-size: 1.5em;
            --nav-dropdown-indicator-rotation: 0deg;
            --nav-subitem-font-size: 1.125rem;
            --nav-subitem-font-weight: 400;
            --nav-subitem-color: currentColor;
            --nav-subitem-padding-inline: 0;
            --nav-subitem-padding-block: 0;
            --nav-subitem-hover-color: #00B3FF;
            --nav-subitem-hover-background-color: var(--clr-light);
            --nav-subitem-active-color: var(--clr-secondary);
            --nav-subitem-activechild-color: steelblue;
            --nav-subitem-activechild-font-weight: 500;
            --focus-shadow-type: inset 0 0 0;
            --focus-shadow-color: color-mix(in srgb, var(--_nav-item-color-hover), transparent 60%)
        }
        .navigation__menu {
            list-style-type: none;
            padding: 0;
            max-width: 100%
        }
        .navigation__menu .dropdown {
            display: flex
        }
        .navigation__menu .dropdown:has([aria-current]) .navigation__item:not([aria-current]):not(:hover) {
            --link-color: var(--_nav-item-color-activechild);
            --_dropdown-control-color: var(--_nav-item-color-activechild);
            font-weight: var(--_nav-item-weight-activechild)
        }
        .navigation__item {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            font-family: var(--nav-item-font-family);
            font-size: var(--nav-item-font-size);
            font-weight: var(--nav-item-font-weight);
            padding-inline: var(--nav-item-padding-inline);
            padding-block: var(--nav-item-padding-block);
            transition: color .15s ease, box-shadow .15s ease, background-color .15s ease;
            min-width: 0;
            justify-content: space-between;
            white-space: nowrap;
            overflow: hidden;
            --link-color: var(--nav-item-color);
            --link-color-hover: var(--nav-item-hover-color);
            --dropdown-control-color: var(--nav-item-color);
            --dropdown-control-hover-color: var(--nav-item-hover-color)
        }
        .navigation__item span {
            text-overflow: ellipsis;
            overflow: hidden;
            flex-basis: 100%
        }
        .navigation__item+.navigation__item[aria-controls] {
            width: auto;
            flex-shrink: 0
        }
        .navigation__item[aria-controls] {
            column-gap: .5em
        }
        .navigation__item[aria-controls]:not(:has(svg)):after {
            content: "";
            border-style: none var(--nav-dropdown-indicator-style, solid) var(--nav-dropdown-indicator-style, solid) none;
            border-color: var(--nav-dropdown-indicator-color, currentColor);
            border-width: var(--nav-dropdown-indicator-width, 2px);
            height: var(--nav-dropdown-indicator-size, .5em);
            width: var(--nav-dropdown-indicator-size, .5em);
            transform: rotate(var(--nav-dropdown-indicator-rotation, -45deg))
        }
        .navigation__item[aria-current] {
            --link-color: var(--nav-item-active-color);
            font-weight: var(--nav-item-active-weight)
        }
        .navigation__item svg {
            width: var(--nav-dropdown-indicator-size, .75em);
            height: auto;
            flex-shrink: 0;
            transition: .25s transform ease
        }
        .navigation--sidebar {
            height: 100%;
            background-color: var(--nav-background, var(--canvas));
            position: relative
        }
        .navigation--sidebar .navigation__menu {
            display: grid;
            grid-auto-columns: minmax(0, 1fr);
            row-gap: 1rem
        }
        .navigation--sidebar .navigation__item {
            width: auto;
            border: none
        }
        .navigation--sidebar .dropdown {
            position: static;
            --dropdown-padding: 0;
            --dropdown-background: var(--nav-background, var(--canvas));
            --dropdown-item-font-size: var(--nav-subitem-font-size);
            --dropdown-item-font-weight: var(--nav-subitem-font-weight);
            --dropdown-item-color: var(--nav-subitem-color);
            --dropdown-item-hover-color: var(--nav-subitem-hover-color);
            --dropdown-item-hover-background: transparent;
            --dropdown-item-padding: .25em;
            --dropdown-height: 100%
        }
        .navigation--sidebar .dropdown__list :is(ul,
    ol) {
            display: grid;
            grid-auto-columns: minmax(0, 1fr);
            row-gap: 1rem
        }
        .navigation--sidebar .goback>.navigation__item {
            flex-direction: row-reverse;
            justify-content: flex-end
        }
        .navigation--sidebar .goback>.navigation__item svg {
            transform: scaleX(-1)
        }
        .navigation--sidebar .goback>.navigation__item:after {
            margin-inline-start: .2em;
            transform: rotate(135deg)
        }
        .navigation--sidebar .navigation__submenu {
            min-height: 100%;
            --dropdown-width: 100%;
            --dropdown-offset: -100%;
            --dropdown-radius: 0;
            --dropdown-border-width: 0
        }
        :where(.offcanvas--start) .navigation--sidebar .navigation__submenu {
            transform: translate(-100%)
        }
        :where(.offcanvas--end,
    .offcanvas--bottom) .navigation--sidebar .navigation__submenu {
            transform: translate(100%)
        }
        .navigation-toggler {
            --_toggler-background: var(--clr-primary);
            --_toggler-bars-color: var(--canvas);
            --_toggler-size: 1rem;
            --_toggler-padding: .5em;
            --_toggler-radius: 50%;
            border: none;
            padding: var(--_toggler-padding);
            background-color: var(--_toggler-background);
            border-radius: var(--_toggler-radius);
            font-size: var(--_toggler-size);
            line-height: 1;
            flex-shrink: 0;
            display: inline-flex;
            gap: .25rem;
            align-items: center;
            justify-content: center
        }
        .navigation-toggler span:empty {
            display: inline-block;
            position: relative;
            width: 1.625em;
            height: .25em;
            border-radius: .25em;
            background-color: var(--_toggler-bars-color);
            vertical-align: middle;
            transition: .25s transform ease, .25s background-color ease;
            margin: .6875em 0
        }
        .navigation-toggler span:empty:before,
        .navigation-toggler span:empty:after {
            all: inherit;
            content: "";
            position: absolute;
            margin: 0;
            background-color: var(--_toggler-bars-color)
        }
        .navigation-toggler span:empty:before {
            top: -.5em;
            left: 0;
            right: 0
        }
        .navigation-toggler span:empty:after {
            bottom: -.5em;
            left: 0;
            right: 0
        }
        .navigation-toggler span:not(:empty) {
            font-size: .875em
        }
        .navigation-toggler[aria-expanded=true i] span:empty {
            background-color: transparent
        }
        .navigation-toggler[aria-expanded=true i] span:empty:before,
        .navigation-toggler[aria-expanded=true i] span:empty:after {
            background-color: var(--_toggler-bars-color)
        }
        .navigation-toggler[aria-expanded=true i] span:empty:before {
            transform: translateY(.5em) rotate(45deg)
        }
        .navigation-toggler[aria-expanded=true i] span:empty:after {
            transform: translateY(-.5em) rotate(-45deg)
        }
    }
}



@layer utilities {
    .sjm-sidebar {
        .theme-light {
            --theme-background: rgb(255, 255, 255);
            --theme-color: rgb(0, 0, 0);
            --link-color: rgb(0, 0, 0);
            --button-background: rgb(0, 0, 0);
            --button-border-color: var(--button-background);
            --button-color: rgb(255, 255, 255);
            --button-hover-color: var(--button-color);
            --button-focus-border-color: color-mix(in srgb, var(--button-hover-background), black 10%);
            --button-focus-shadow: color-mix(in srgb, var(--button-hover-background), transparent 50%);
            color: var(--theme-color);
            background-color: var(--theme-background)
        }
        .theme-light .btn :is(svg, path) {
            fill: var(--button-background)
        }
        .theme-dark {
            --theme-background: rgb(33, 37, 41);
            --theme-color: rgb(255, 255, 255);
            --link-color: rgb(255, 255, 255);
            --button-background: rgb(255, 255, 255);
            --button-border-color: var(--button-background);
            --button-color: rgb(33, 37, 41);
            --button-hover-color: var(--button-color);
            --button-focus-border-color: color-mix(in srgb, var(--button-hover-background), black 10%);
            --button-focus-shadow: color-mix(in srgb, var(--button-hover-background), transparent 50%);
            color: var(--theme-color);
            background-color: var(--theme-background)
        }
        .theme-dark .btn :is(svg, path) {
            fill: var(--button-background)
        }
        .theme-primary {
            --theme-background: rgb(13, 110, 253);
            --theme-color: rgb(255, 255, 255);
            --link-color: rgb(255, 255, 255);
            --button-background: rgb(255, 255, 255);
            --button-border-color: var(--button-background);
            --button-color: rgb(13, 110, 253);
            --button-hover-color: var(--button-color);
            --button-focus-border-color: color-mix(in srgb, var(--button-hover-background), black 10%);
            --button-focus-shadow: color-mix(in srgb, var(--button-hover-background), transparent 50%);
            color: var(--theme-color);
            background-color: var(--theme-background)
        }
        .theme-primary .btn :is(svg, path) {
            fill: var(--button-background)
        }
        .theme-secondary {
            --theme-background: rgb(225, 195, 250);
            --theme-color: rgb(0, 0, 0);
            --link-color: rgb(0, 0, 0);
            --button-background: rgb(0, 0, 0);
            --button-border-color: var(--button-background);
            --button-color: rgb(225, 195, 250);
            --button-hover-color: var(--button-color);
            --button-focus-border-color: color-mix(in srgb, var(--button-hover-background), black 10%);
            --button-focus-shadow: color-mix(in srgb, var(--button-hover-background), transparent 50%);
            color: var(--theme-color);
            background-color: var(--theme-background)
        }
        .theme-secondary .btn :is(svg, path) {
            fill: var(--button-background)
        }
        .btn--light {
            --button-background: var(--clr-light, rgb(255, 255, 255));
            --button-color: rgb(0, 0, 0);
            --button-border-color: var(--clr-light, rgb(255, 255, 255));
            --button-hover-color: rgb(0, 0, 0);
            --button-hover-background: white;
            --button-hover-border-color: white;
            --button-focus-border-color: color-mix(in srgb, var(--button-hover-background), black 10%);
            --button-focus-shadow: color-mix(in srgb, var(--button-hover-background), transparent 50%)
        }
        .btn--dark {
            --button-background: var(--clr-dark, rgb(33, 37, 41));
            --button-color: rgb(255, 255, 255);
            --button-border-color: var(--clr-dark, rgb(33, 37, 41));
            --button-hover-color: rgb(255, 255, 255);
            --button-hover-background: #212529;
            --button-hover-border-color: #212529;
            --button-focus-border-color: color-mix(in srgb, var(--button-hover-background), black 10%);
            --button-focus-shadow: color-mix(in srgb, var(--button-hover-background), transparent 50%)
        }
        .btn--primary {
            --button-background: var(--clr-primary, rgb(13, 110, 253));
            --button-color: rgb(255, 255, 255);
            --button-border-color: var(--clr-primary, rgb(13, 110, 253));
            --button-hover-color: rgb(255, 255, 255);
            --button-hover-background: #0d6efd;
            --button-hover-border-color: #0d6efd;
            --button-focus-border-color: color-mix(in srgb, var(--button-hover-background), black 10%);
            --button-focus-shadow: color-mix(in srgb, var(--button-hover-background), transparent 50%)
        }
        .btn--secondary {
            --button-background: var(--clr-secondary, rgb(225, 195, 250));
            --button-color: rgb(0, 0, 0);
            --button-border-color: var(--clr-secondary, rgb(225, 195, 250));
            --button-hover-color: rgb(0, 0, 0);
            --button-hover-background: #e1c3fa;
            --button-hover-border-color: #e1c3fa;
            --button-focus-border-color: color-mix(in srgb, var(--button-hover-background), black 10%);
            --button-focus-shadow: color-mix(in srgb, var(--button-hover-background), transparent 50%)
        }
    }
}

@layer helpers {
    .sjm-sidebar {
        .image-link {
            display: inline-block;
            text-decoration: none
        }
        .stretched-link:after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            content: ""
        }
        .hstack,
        .vstack {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem
        }
        .hstack--centered,
        .vstack--centered {
            justify-content: center
        }
        .hstack--end,
        .vstack--end {
            justify-content: flex-end
        }
        .hstack--align-center,
        .vstack--align-center {
            align-items: center
        }
        .hstack--inline,
        .vstack--inline {
            display: inline-flex
        }
        .hstack--reversed,
        .vstack--reversed {
            flex-direction: row-reverse
        }
        .vstack {
            flex-direction: column
        }
        .vstack--reversed {
            flex-direction: column-reverse
        }
        .list-unstyled,
        .list-inline,
        [role=list i],
        [role=listbox i] {
            list-style-type: none;
            padding: 0
        }
        .list-inline {
            flex-wrap: wrap;
            align-items: center;
            display: flex;
            gap: 1rem
        }
        .vr-divider {
            align-items: center;
            line-height: 1;
            gap: 0
        }
        .vr-divider li+li {
            padding-inline-start: .75em;
            margin-inline-start: .75em;
            border-inline-start: 1px solid currentColor
        }
        .aspect-ratio {
            --_ratio: 16 / 9
        }
        .aspect-ratio>* {
            aspect-ratio: var(--_ratio);
            object-fit: cover
        }
        @supports not (aspect-ratio: var(--_ratio)) {
            .aspect-ratio {
                height: 0;
                width: 100%;
                overflow: hidden;
                position: relative;
                display: block;
                padding-top: calc(1 / (var(--_ratio)) * 100%)
            }
            .aspect-ratio>* {
                position: absolute;
                top: 0;
                left: 0;
                width: 100% !important;
                height: 100% !important
            }
        }
        .truncate {
            -webkit-line-clamp: var(--_max-lines, 4);
            -webkit-box-orient: vertical;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis
        }
        @supports not (-webkit-line-clamp: 4) {
            .truncate {
                max-height: calc(1em * var(--line-height-base) * var(--_max-lines, 4))
            }
        }
        .truncate-nowrap {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: var(--_max-length, none)
        }
        .fit-content {
            object-fit: contain !important
        }
        .fill-content {
            object-fit: cover !important
        }
        .visually-hidden,
        .visually-hidden-focusable:not(:focus):not(:focus-within),
        .sr-only,
        .sr-only-focusable:not(:focus):not(:focus-within) {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border-width: 0 !important
        }
        .visible {
            visibility: visible
        }
        .invisible {
            visibility: hidden
        }
    }
}


@layer sections {

    .sjm-sidebar {

        --font-family-base: "Futura Std", "Nunito", "Arial", sans-serif;
        --font-family-heading: "Montserrat", "Arial", sans-serif;
        --edge-spacing: 1.5rem;
        @media (min-width: 1024px) {
            --sidebar-width: 104px;
            --font-size-base: 1.125rem;
        }

        grid-area: header;
        padding-block: .75rem;
        background-color: #fff;
        z-index: 30;
        width: 100%;
        position: fixed;
        bottom: 0;
        display: flex;
        padding-inline: var(--edge-spacing);
        justify-content: space-between;
        column-gap: 1.5rem;

        :is(img, svg) {
            max-width: 100%;
            vertical-align: middle;
            height: auto;
        }

        @media (min-width: 768px) {
            .d-md-block {
                display: block;
            }
        }

        @media (min-width: 768px) {
            .d-md-none {
                display: none;
            }
        }

        @media (min-width: 1024px) {
            .d-lg-none {
                display: none;
            }
        }

        @media (min-width: 1024px) {
            .d-lg-block {
                display: block;
            }
        }


        @media (max-width: 1023.98px) {
            .sjm-sidebar {
                align-items: center;
                display: grid;
                grid-template-columns: 1fr auto auto;
            }
        }

        @media (min-width: 1024px) {
            .sjm-sidebar {
                grid-area: sidebar;
                display: grid;
                grid-template-rows: repeat(3, minmax(0, 1fr));
                justify-items: center;
                height: 100%;
                width: var(--sidebar-width);
                padding-block: 1.5rem;
                padding-inline: 0;
                justify-content: center;
            }
        }

        @media (min-width: 1024px) {
            .sjm-sidebar:before {
                content: "";
                position: fixed;
                top: 0;
                bottom: 0;
                inset-inline: var(--sidebar-width) 0;
                background-color: transparent;
                z-index: -1;
                -webkit-backdrop-filter: blur(0px);
                backdrop-filter: blur(0px);
                transition: .5s background-color ease, .5s -webkit-backdrop-filter ease;
                transition: .5s background-color ease, .5s backdrop-filter ease;
                transition: .5s background-color ease, .5s backdrop-filter ease, .5s -webkit-backdrop-filter ease;
                pointer-events: none;
            }
        }

        .sjm-sidebar .navigation-toggler {
            --_toggler-size: 1.25rem;
            --_toggler-background: transparent;
            --_toggler-bars-color: #000 !important;
            align-self: center;
            flex-direction: column;
            padding: 0;
        }

        .sjm-sidebar .navigation-toggler:after {
            font-size: .75rem;
            font-weight: 500;
            content: "Menu";
            color: #000 !important;
        }

        .sjm-sidebar__magister {
            align-self: end;
            display: grid;
            text-align: center;
            font-weight: 500;
            color: #000;
            text-decoration: none;
            font-size: .875rem;
        }

        @media (max-width: 1023.98px) {
            .sjm-sidebar .sjm-sidebar__magister {
                grid-column: 2;
                grid-row: 1;
            }
        }

        @media (min-width: 1024px) {
            .sjm-sidebar__magister {
                display: inline-block;
            }
            .sjm-sidebar__magister span {
                display: inline-block;
            }
        }

        @media (min-width: 1024px) {
            .sjm-sidebar .navigation-offcanvas__cta {
                display: block;
                font-size: 4.5rem;
                text-align: center;
                text-wrap: balance;
                color: #000;
                background-color: #00b3ff;
                position: fixed;
                inset-inline-end: 0;
                bottom: 0;
                min-height: 600px;
                max-width: 600px;
                aspect-ratio: 1 / 1;
                font-weight: 900;
                padding: 2.5rem 3.5rem;
                transition: .25s transform ease;
                transform: rotate(-45deg) translateY(150%);
                line-height: 1.2;
                font-family: var(--font-family-heading);
            }
        }

        @media (min-width: 1024px) {
            .sjm-sidebar:has(.offcanvas.active) .navigation-offcanvas__cta {
                transform: rotate(-45deg) translateY(25%);
            }
        }

        @media (min-width: 1024px) {
            .sjm-sidebar .navigation-offcanvas__cta span {
                color: #fff;
            }
        }

    }

    .sjm-sidebar {
        grid-area: header;
        padding-block: .75rem;
        background-color: #fff;
        z-index: 30;
        width: 100%;
        position: fixed;
        bottom: 0;
        display: flex;
        padding-inline: var(--edge-spacing);
        justify-content: space-between;
        column-gap: 1.5rem
    }

    .sjm-sidebar .navigation-toggler {
        --_toggler-size: 1.25rem;
        --_toggler-background: transparent;
        --_toggler-bars-color: #000;
        align-self: center;
        flex-direction: column;
        padding: 0
    }

    .sjm-sidebar .navigation-toggler:after {
        font-size: .75rem;
        font-weight: 500;
        content: "Menu";
        color: #000
    }

    .sjm-sidebar .navigation-toggler[aria-expanded=true i]:after {
        content: "Sluiten"
    }

    @media (max-width: 1023.98px) {
        .sjm-sidebar {
            align-items: center;
            display: grid;
            grid-template-columns: 1fr auto auto
        }
        .sjm-sidebar .sjm-sidebar__magister {
            grid-column: 2;
            grid-row: 1
        }
        .sjm-sidebar .navigation-offcanvas__cta {
            display: none
        }
    }

    @media (min-width: 1024px) {
        .sjm-sidebar {
            grid-area: sidebar;
            display: grid;
            grid-template-rows: repeat(3, minmax(0, 1fr));
            justify-items: center;
            height: 100%;
            width: var(--sidebar-width);
            padding-block: 1.5rem;
            padding-inline: 0;
            justify-content: center
        }
        .sjm-sidebar:before {
            content: "";
            position: fixed;
            top: 0;
            bottom: 0;
            inset-inline: var(--sidebar-width) 0;
            background-color: transparent;
            z-index: -1;
            -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
            transition: .5s background-color ease, .5s -webkit-backdrop-filter ease;
            transition: .5s background-color ease, .5s backdrop-filter ease;
            transition: .5s background-color ease, .5s backdrop-filter ease, .5s -webkit-backdrop-filter ease;
            pointer-events: none
        }
        .sjm-sidebar .navigation-offcanvas__cta {
            display: block;
            font-size: 4.5rem;
            text-align: center;
            text-wrap: balance;
            color: #000;
            background-color: #00b3ff;
            position: fixed;
            inset-inline-end: 0;
            bottom: 0;
            min-height: 600px;
            max-width: 600px;
            aspect-ratio: 1/1;
            font-weight: 900;
            padding: 2.5rem 3.5rem;
            transition: .25s transform ease;
            transform: rotate(-45deg) translateY(150%);
            line-height: 1.2;
            font-family: var(--font-family-heading)
        }
        .sjm-sidebar .navigation-offcanvas__cta span {
            color: #fff
        }
        .sjm-sidebar:has(.offcanvas.active):before {
            background-color: #00000080;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            pointer-events: auto
        }
        .sjm-sidebar:has(.offcanvas.active) .navigation-offcanvas__cta {
            transform: rotate(-45deg) translateY(25%)
        }
    }

    .navigation-offcanvas {
        max-height: calc(100% - 94px);
        transform: translate(-375%)
    }

    @media (max-width: 1023.98px) {
        .navigation-offcanvas {
            --offcanvas-min-width: 100%
        }
    }

    .navigation-offcanvas .dropdown__control path {
        transition: .25s fill ease
    }

    .navigation-offcanvas .dropdown__control:hover path:first-child {
        fill: #000
    }

    @media (min-width: 1024px) {
        .navigation-offcanvas {
            max-height: 100%;
            inset-inline-start: var(--sidebar-width);
            padding: 0;
            z-index: -1;
            overflow: initial;
            --offcanvas-min-width: 250px
        }
        .navigation-offcanvas .logo-tekst {
            position: absolute;
            top: 40px
        }
        .navigation-offcanvas .navigation {
            display: grid;
            grid-template-rows: 1fr min(500px, 70vh) 1fr;
            padding-inline-end: 1rem;
            grid-row: 1/span 3;
            position: static
        }
        .navigation-offcanvas .navigation__socials {
            grid-row: 3;
            display: inline-grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            place-self: end center;
            margin-bottom: 2.5rem;
            transform: rotate(45deg)
        }
        .navigation-offcanvas .navigation__socials svg {
            transform: rotate(-45deg) scale(1.2)
        }
        .navigation-offcanvas .navigation__menu {
            align-content: start;
            grid-row: 2
        }
        .navigation-offcanvas .navigation__item {
            width: 100%
        }
        .navigation-offcanvas .navigation__submenu {
            inset-inline-start: 100%;
            z-index: -1;
            display: grid;
            grid-template-rows: 1fr min(500px, 70vh) 1fr;
            align-items: start
        }
        .navigation-offcanvas .navigation__submenu>:is(ul, ol) {
            grid-row: 2
        }
        .navigation-offcanvas .navigation__submenu.active:after {
            content: "";
            position: absolute;
            inset-inline-start: 100%;
            height: 100%;
            top: 0;
            aspect-ratio: 1/2;
            background-color: #fff;
            clip-path: polygon(0 0, 0% 100%, 100% 50%);
            z-index: -1
        }
        .navigation-offcanvas .navigation .goback {
            display: none
        }
        .navigation-offcanvas .dropdown__heading {
            grid-row: 1;
            align-self: end;
            font-size: 1.25rem;
            margin-bottom: 2.5rem
        }
        .navigation-offcanvas .dropdown__heading + ul {
            overflow-y: unset;
        }
    }

    @media (max-width: 1023.98px) {
        .navigation-offcanvas .navigation {
            place-content: center;
            place-items: center
        }
        .navigation-offcanvas .navigation__submenu {
            place-items: center;
            place-content: center
        }
        .navigation-offcanvas .dropdown__item:before {
            content: "";
            top: .3rem;
            inset-inline-start: -1.1rem;
            width: .5rem;
            height: .5rem;
            background-color: #00b3ff;
            transition: .25s background-color ease, .35s transform ease;
            transform: rotate(45deg)
        }
        .navigation-offcanvas .dropdown__heading {
            display: none
        }
    }

    .navigation-offcanvas .navigation__socials {
        margin-top: 1.5rem
    }

    .navigation-offcanvas .navigation__socials :any-link {
        text-decoration: none
    }

    .navigation-offcanvas .goback .dropdown__control {
        font-weight: 700
    }

    .navigation-offcanvas .navigation+.after-triangle {
        position: absolute;
        inset-inline-start: 100%;
        height: 100%;
        top: 0;
        aspect-ratio: 1/2;
        background-color: transparent;
        z-index: -2;
        display: none;
        border-top: 50vh solid transparent;
        border-bottom: 50vh solid transparent;
        border-left: 50vh solid #fff
    }

    .navigation-offcanvas .navigation+.after-triangle:before {
        content: "";
        background-color: #ea5b0c;
        height: 12vh;
        transform: rotate(-45deg);
        aspect-ratio: 1/1;
        position: absolute;
        bottom: 12vh;
        inset-inline-end: 10%
    }

    .navigation-offcanvas .navigation+.after-triangle:after {
        content: "";
        background-color: #afc700;
        height: 5vh;
        transform: rotate(-45deg);
        aspect-ratio: 1/1;
        position: absolute;
        bottom: -30vh;
        inset-inline-end: 7.5vh
    }

    @media (min-width: 1024px) {
        .navigation-offcanvas .navigation+.after-triangle {
            display: block
        }
    }

    .navigation__search {
        display: flex
    }

    .navigation__search input {
        --focus-shadow-type: 0 0 0;
        border: none !important;
        border-bottom: 1px solid #EA5B0C !important;
        border-radius: 0 !important;
        padding-inline: 0 !important;
    }

    .navigation__search svg {
        width: 27px;
        height: 27px
    }

    .navigation__search button {
        padding: 0;
        border: none;
        background: transparent;
        flex-shrink: 0
    }

    section#header {
        @media (max-width: 1023.98px) {
            display: none !important;
        }
    }

    header#header {
        @media (max-width: 1023.98px) {
            height: 0 !important;
        }
    }

    .sjm-page-footer.alt {
        --edge-spacing: 1.5rem;
        --content-max-width: 1320px;
        --fullwidth-max-width: 1920px;
        --page-grid: [fluid-start] minmax(var(--edge-spacing), 1fr) [fullwidth-start] minmax(0, calc((var(--fullwidth-max-width) - var(--content-max-width)) / 2)) [content-start] min(var(--content-max-width), 100% - var(--edge-spacing) * 2) [content-end] minmax(0, calc((var(--fullwidth-max-width) - var(--content-max-width)) / 2)) [fullwidth-end] minmax(var(--edge-spacing), 1fr) [fluid-end];
        display: grid;
        grid-template-columns: var(--page-grid);
        line-height: 1.5;
    }

    @media (min-width: 1024px) {
        .sjm-page-footer.alt {
            margin-inline-start: 104px;
        }
    }

    .sjm-page-footer.alt .fluid {
        grid-column: fluid;
        display: grid;
        grid-template-columns: var(--page-grid);
    }

    .sjm-page-footer.alt .fluid > * {
        grid-column: content;
        min-width: 0;
    }

    .sjm-page-footer__main {
        background-color: #00b3ff;
        grid-column: fluid;
        padding-block: clamp(1.25rem, 5vw, 2.5rem);
    }

    .sjm-page-footer__main-grid {
        display: grid;
        gap: 2rem clamp(1.5rem, 10vw, 5rem)
    }

    @media (min-width: 576px) {
        .sjm-page-footer__main-grid {
            grid-template-columns: auto auto
        }
    }

    @media (min-width: 768px) {
        .sjm-page-footer__main-grid {
            grid-template-columns: auto auto auto
        }
    }

    @media (max-width: 575.98px) {
        .sjm-page-footer__logo {
            justify-self: center
        }
    }

    .sjm-page-footer__bottom {
        grid-column: fluid;
        background-color: #000;
        color: #fff;
        padding-block: 1rem
    }

    .sjm-page-footer__bottom :any-link {
        color: #fff;
        font-weight: 700
    }

    .sjm-page-footer__contact {
        display: inline-grid;
        gap: 1rem;
        align-items: end;
        align-self: start
    }

    @media (max-width: 575.98px) {
        .sjm-page-footer__contact {
            justify-self: center
        }
    }

    @media (min-width: 1200px) {
        .sjm-page-footer__contact {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }
    }

    @media (min-width: 576px) and (max-width: 767.98px) {
        .sjm-page-footer__contact {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-row: 2;
            grid-column: 1/-1
        }
    }

    .sjm-page-footer__contact :any-link {
        color: inherit
    }

    @media (max-width: 575.98px) {
        .sjm-page-footer__socials {
            justify-self: center;
            text-align: center
        }
    }

    @media (min-width: 768px) {
        .sjm-page-footer__socials {
            justify-self: end
        }
    }

    .sjm-page-footer__socials :any-link {
        display: inline-block
    }

    @media (max-width: 1023.98px) {
        .sjm-page-footer {
            margin-bottom: 94px
        }
    }

    .sjm-page-footer :is(.scroll-up, .scroll-upwards) {
        position: fixed;
        bottom: 7.5rem;
        inset-inline-end: 1rem;
        z-index: 10;
        color: #000;
        text-decoration: none;
        font-weight: 500;
        display: grid;
        gap: .5rem;
        justify-items: center
    }

    @media (min-width: 1024px) {
        .sjm-page-footer :is(.scroll-up, .scroll-upwards) {
            bottom: 2rem
        }
    }

    .search__popup {
        display: none;
        min-width: min(100%, 500px)
    }

    .search__popup h2 {
        margin-bottom: 1rem;
        text-align: center
    }

    .search__popup .searchfield {
        display: flex;
        position: relative
    }

    .search__popup .searchfield input {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        border-color: #ea5b0c;
        border-width: 2px;
        padding-inline-end: 1.5rem;
        border-inline-end-color: transparent
    }

    .search__popup .searchfield rect {
        fill: transparent !important
    }

    .search__popup .searchfield .btn-search {
        margin-inline-start: -20px;
        width: 40px;
        aspect-ratio: 1/1;
        padding: 0;
        background: transparent;
        border: none;
        flex-shrink: 0
    }


}


@layer stickynotes {
    .stickynotes {
        position: fixed;
        bottom: 100px;
        inset-inline-end: 50px;
        z-index: 29;
        transform: rotate(4.597deg) translate(150%, -100px);
        transition: 0.5s transform ease;
    }
    /*@media (max-width: 1023.98px) {
        .stickynotes:not(.hide) {
            transform: rotate(4.597deg) translate(150%, -100px);
        }
        .stickynotes.hide {
            transform: rotate(4.597deg) !important;
        }
        .stickynotes__toggler:not(.hide) {
            transform: none !important;
        }
        .stickynotes__toggler.hide {
            transform: translate(100%) !important;
        }
    }*/
    @media (min-width: 1024px) {
        .stickynotes {
            transform: rotate(4.597deg);
            bottom: 130px;
        }
    }
    .stickynotes.hide {
        transform: rotate(4.597deg) translate(150%, -100px);
    }
    .stickynotes:before,
    .stickynotes:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top right;
        transform: rotate(-4.597deg);
        max-height: 360px;
    }
    .stickynotes:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='348' height='301' viewBox='0 0 348 301' fill='none'%3E%3Cpath d='M0.500817 0.721885L347.838 18.8636L310.001 300.222L13.0007 35.4762L0.500817 0.721885Z' fill='%2380D9FF'/%3E%3C/svg%3E");
        top: -15px;
        inset-inline-end: -26px;
        z-index: -1;
    }
    .stickynotes:after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='357' height='301' viewBox='0 0 357 301' fill='none'%3E%3Cpath d='M0.500755 0.722317L357.001 24.7219L310.001 300.222L13.0007 35.4766L0.500755 0.722317Z' fill='%23F5AD85'/%3E%3C/svg%3E");
        top: -15px;
        inset-inline-end: -35px;
        z-index: -2;
    }
    .stickynotes__header {
        background-color: #ffe771;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-inline: 1.5rem;
        padding-block: 1rem;
    }
    .stickynotes__close {
        background: transparent;
        border: none;
        padding: 0;
        font-weight: 700;
    }
    .stickynotes__content {
        background-color: #fae165;
        padding-block: 1.5rem 5rem;
        padding-inline: 2.5rem;
        min-height: 300px;
        position: relative;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 calc(100% - 20px));
        margin-top: -1px;
        font-size: 1rem;
    }
    .stickynotes__content:after {
        content: "";
        position: absolute;
        bottom: 20px;
        width: 100%;
        clip-path: polygon(100% 0, 0% 100%, 100% 100%);
        height: 50px;
        background-color: #ffe771;
        inset-inline-start: 0;
    }
    .stickynotes__item {
        display: none;
        opacity: 0;
        transition: 0.25s opacity ease;
    }
    .stickynotes__item.active {
        display: block;
        opacity: 1;
    }
    .stickynotes .stickynotes__prev,
    .stickynotes .stickynotes__next {
        background: transparent;
        padding-inline: 0.5rem;
        border: none;
    }
    .stickynotes .stickynotes__nav button {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 1px solid #000;
        background: transparent;
        padding: 0;
    }
    .stickynotes .stickynotes__nav button.active {
        background-color: #000;
    }
    .stickynotes:has(.stickynotes__item:nth-child(3n + 2).active) .stickynotes__content {
        background-color: #80d9ff;
    }
    .stickynotes:has(.stickynotes__item:nth-child(3n + 2).active) .stickynotes__content:after {
        background-color: #94dfff;
    }
    .stickynotes:has(.stickynotes__item:nth-child(3n + 2).active) .stickynotes__header {
        background-color: #94dfff;
    }
    .stickynotes:has(.stickynotes__item:nth-child(3n + 2).active):before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='348' height='301' viewBox='0 0 348 301' fill='none'%3E%3Cpath d='M0.500817 0.721885L347.838 18.8636L310.001 300.222L13.0007 35.4762L0.500817 0.721885Z' fill='%23F5AD85'/%3E%3C/svg%3E");
    }
    .stickynotes:has(.stickynotes__item:nth-child(3n + 2).active):after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='357' height='301' viewBox='0 0 357 301' fill='none'%3E%3Cpath d='M0.500755 0.722317L357.001 24.7219L310.001 300.222L13.0007 35.4766L0.500755 0.722317Z' fill='%23FAE165'/%3E%3C/svg%3E");
    }
    .stickynotes:has(.stickynotes__item:nth-child(3n + 3).active) .stickynotes__content {
        background-color: #f5ad85;
    }
    .stickynotes:has(.stickynotes__item:nth-child(3n + 3).active) .stickynotes__content:after {
        background-color: #f6b998;
    }
    .stickynotes:has(.stickynotes__item:nth-child(3n + 3).active) .stickynotes__header {
        background-color: #f6b998;
    }
    .stickynotes:has(.stickynotes__item:nth-child(3n + 3).active):before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='348' height='301' viewBox='0 0 348 301' fill='none'%3E%3Cpath d='M0.500817 0.721885L347.838 18.8636L310.001 300.222L13.0007 35.4762L0.500817 0.721885Z' fill='%23FAE165'/%3E%3C/svg%3E");
    }
    .stickynotes:has(.stickynotes__item:nth-child(3n + 3).active):after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='357' height='301' viewBox='0 0 357 301' fill='none'%3E%3Cpath d='M0.500755 0.722317L357.001 24.7219L310.001 300.222L13.0007 35.4766L0.500755 0.722317Z' fill='%2380D9FF'/%3E%3C/svg%3E");
    }
    .stickynotes__toggler {
        padding-block: 1rem;
        padding-inline: 1rem;
        border: none;
        position: fixed;
        inset-inline-end: 0;
        top: 75%;
        background-color: #fae165;
        clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%);
        display: flex;
        align-items: center;
        z-index: 29;
        transition: 0.5s transform ease;
        transform: none;
    }
    @media (min-width: 1024px) {
        .stickynotes__toggler {
            transform: translate(100%);
        }
    }
    .stickynotes__toggler.hide {
        transform: none;
    }
    /*.stickynotes__toggler:not(.hide) {
        transform: translate(100%);
    }*/

    @media (max-width: 1023.98px) {
        .stickynotes__toggler.open {
            transform: translate(100%);
        }
        .stickynotes.open {
            transform: rotate(4.597deg);
        }
    }

}