/* Basic styles: Reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
    margin:0; 
    padding:0; 
}
img {
    max-width: 100%;
    display: block;
}
* {
    box-sizing: border-box;
}

/* Basic styles: Colors */

.ds-color {
    display: flex;
    text-align: center;
    font-size: 0.8em;
    align-items: center;
    justify-content: center;
}
:root {
    --ds-black: #000;
    --ds-white: #FFF;
    --ds-primary: #000FA0;
    --ds-primary-dark: #000964;
    --ds-primary-contrast: var(--ds-white);
    --ds-support: #00BED7;
    --ds-support-light: #8eebf7;
    --ds-support-contrast: var(--ds-white);
    /* http://www.colorbox.io/#steps=11#hue_start=198#hue_end=198#hue_curve=linear#sat_start=15#sat_end=15#sat_curve=linear#sat_rate=130#lum_start=98#lum_end=0#lum_curve=easeOutQuad#lock_hex=eef1f8#minor_steps_map=0 */
    --ds-highlight: #FF6B00;
    --ds-highlight-contrast: var(--ds-white);
    --ds-grey-0: #eef1f8;
    --ds-grey-5: #e9edf6;
    --ds-grey-10: #e4eaf4;
    --ds-grey-20: #dae2ed;
    --ds-grey-30: #cdd7e3;
    --ds-grey-40: #bdc8d4;
    --ds-grey-50: #a8b4c0;
    --ds-grey-60: #8f9ba6;
    --ds-grey-70: #707c84;
    --ds-grey-80: #4d565c;
    --ds-grey-90: #262c2f;
    --ds-grey-100: #000000;
    --ds-grey-dark: var(--ds-grey-90);
    --ds-grey-medium: var(--ds-grey-60);
    --ds-grey-light: var(--ds-grey-0);
}


/* Basic styles: Alert Colors
 */



/* Basic styles: Typography
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');
@font-face {
 font-family:Periodico Display;
 font-style:normal;
 font-weight:800;
 src:url(/files/fonts/PeriodicoDisplay-Rg.woff) format("woff"),
 url(/files/fonts/PeriodicoDisplay-Rg.woff2) format("woff")
}
@font-face {
 font-family:Periodico Display;
 font-style:normal;
 font-weight:500;
 src:url(/files/fonts/PeriodicoDisplay-Rg.woff) format("woff"),
 url(/files/fonts/PeriodicoDisplay-Rg.woff2) format("woff")
}
@font-face {
 font-family:Periodico Display;
 font-style:italic;
 font-weight:500;
 src:url(/files/fonts/PeriodicoDisplay-Rg.woff) format("woff"),
 url(/files/fonts/PeriodicoDisplay-Rg.woff2) format("woff")
}
:root {
    --ds-body-font: 'Montserrat', sans-serif;
    --ds-heading-font: 'Periodico Display', serif;
}


/* Basic styles: Typography
 */

:root {
    --ds-font-size: 1rem;
    --ds-font-weight: 400;
    --ds-line-height: calc(1.6875 * var(--ds-font-size));
    --ds-color: var(--ds-black);
    --ds-color-transparent: rgba(0,0,0,0);
    --ds-contrast: var(--ds-grey-dark);
    --ds-background: var(--ds-white);
    --ds-background-transparent: rgba(255,255,255,0);
    --ds-heading-weight: 800;
    --ds-heading-multiplier: 1.27201965;
    --ds-spacing: var(--ds-line-height);
}
:root, html, body {
    background-color: var(--ds-background);
    color: var(--ds-color);
}
body {
    font-family: var(--ds-body-font);
    font-size: var(--ds-font-size);
    font-weight: var(--ds-font-weight);
    line-height: var(--ds-line-height);
}
h1,h2,h3,h4 {
    font-family: var(--ds-heading-font);
    color: var(--ds-primary);
}
h1 {
    --ds-font-size: 2.25rem;
    line-height: 2.5625rem;
    font-weight: 600;
}
h2 {
    --ds-font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: 700;
}
h3 {
    --ds-font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5rem;
}
h4 {
    --ds-font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.125rem;
}
h5, h6 {
    font-size: 1em;
}
h1, h2, h3, h4, h5, h6, p, ol, ul, dl {
    margin: var(--ds-spacing) 0;
}
dd, li, blockquote {
    margin-left: var(--ds-spacing);
}
blockquote {
    font-family: "Periodico Display", serif;
    font-size: 1.375rem;
    font-weight: 400;
    font-style: italic;
    color: var(--ds-primary);
    line-height: 1.6875rem;
}
a:link {
    color: var(--ds-primary);
}
a:visited {
    color: var(--ds-primary);
}
a.ds-link-hover,
a:hover {
    color: var(--ds-support);
}
a.ds-link-active,
a:active {
    color: var(--ds-support);
}

/* Basic styles: Feather Icons */

.ds-icon {
    display: inline-block;
    height: var(--ds-line-height);
    width: 1em;
    vertical-align: bottom;
}

.ds-icon-feather {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: square;
    fill: none;
}

/* Basic styles: Feather Icons */

:root {
    --ds-icon-arrow-updown-black: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTBweCIgdmlld0JveD0iMCAwIDQwMS45OTggNDAxLjk5OCIgaGVpZ2h0PSIyMHB4Ij4KPHBhdGggZD0iTTczLjA5MiwxNjQuNDUyaDI1NS44MTNjNC45NDksMCw5LjIzMy0xLjgwNywxMi44NDgtNS40MjRjMy42MTMtMy42MTYsNS40MjctNy44OTgsNS40MjctMTIuODQ3ICAgIGMwLTQuOTQ5LTEuODEzLTkuMjI5LTUuNDI3LTEyLjg1TDIxMy44NDYsNS40MjRDMjEwLjIzMiwxLjgxMiwyMDUuOTUxLDAsMjAwLjk5OSwwcy05LjIzMywxLjgxMi0xMi44NSw1LjQyNEw2MC4yNDIsMTMzLjMzMSAgICBjLTMuNjE3LDMuNjE3LTUuNDI0LDcuOTAxLTUuNDI0LDEyLjg1YzAsNC45NDgsMS44MDcsOS4yMzEsNS40MjQsMTIuODQ3QzYzLjg2MywxNjIuNjQ1LDY4LjE0NCwxNjQuNDUyLDczLjA5MiwxNjQuNDUyeiIvPgo8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3ICAgIGMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2ICAgIGMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cjwvc3ZnPg==');
    --ds-icon-arrow-up-black: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEwcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDQwMS45OTggNDAxLjk5OCI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMTIwKSI+CjxwYXRoIGQ9Ik03My4wOTIsMTY0LjQ1MiBoMjU1LjgxMyBjNC45NDksMCw5LjIzMy0xLjgwNywxMi44NDgtNS40MjQgYzMuNjEzLTMuNjE2LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0NyAgICBjMC00Ljk0OS0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2LDUuNDI0QzIxMC4yMzIsMS44MTIsMjA1Ljk1MSwwLDIwMC45OTksMHMtOS4yMzMsMS44MTItMTIuODUsNS40MjRMNjAuMjQyLDEzMy4zMzEgICAgYy0zLjYxNywzLjYxNy01LjQyNCw3LjkwMS01LjQyNCwxMi44NWMwLDQuOTQ4LDEuODA3LDkuMjMxLDUuNDI0LDEyLjg0N0M2My44NjMsMTYyLjY0NSw2OC4xNDQsMTY0LjQ1Miw3My4wOTIsMTY0LjQ1MnoiLz4KPC9nPjwvc3ZnPg==');
    --ds-icon-arrow-down-black: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEwcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDQwMS45OTggNDAxLjk5OCI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEyMCkiPgogICAgPHBhdGggZD0iTTMyOC45MDUsMjM3LjU0OUg3My4wOTJjLTQuOTUyLDAtOS4yMzMsMS44MDgtMTIuODUsNS40MjFjLTMuNjE3LDMuNjE3LTUuNDI0LDcuODk4LTUuNDI0LDEyLjg0NyAgICBjMCw0Ljk0OSwxLjgwNyw5LjIzMyw1LjQyNCwxMi44NDhMMTg4LjE0OSwzOTYuNTdjMy42MjEsMy42MTcsNy45MDIsNS40MjgsMTIuODUsNS40MjhzOS4yMzMtMS44MTEsMTIuODQ3LTUuNDI4bDEyNy45MDctMTI3LjkwNiAgICBjMy42MTMtMy42MTQsNS40MjctNy44OTgsNS40MjctMTIuODQ4YzAtNC45NDgtMS44MTMtOS4yMjktNS40MjctMTIuODQ3QzMzOC4xMzksMjM5LjM1MywzMzMuODU0LDIzNy41NDksMzI4LjkwNSwyMzcuNTQ5eiIvPgo8L2c+Cjwvc3ZnPgo=');
}


/* Basic styles: Logo */

.slo-logo-schil {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 27'%3E%3Cpath fill='%23f36c21' fill-rule='evenodd' d='M17.58 0L0 27 6.42 27 24 0 17.58 0z'/%3E%3C/svg%3E");
    content: "";
    display: inline-block;
    height: 27px;
    left: 0;
    position: absolute;
    top: 3px;
    width: 24px;
}

/* Grid: 12 column grid */

:root {
    --ds-grid-spacing: var(--ds-spacing);
    --ds-grid-spacing-column: var(--ds-grid-spacing);
    --ds-grid-spacing-row: var(--ds-grid-spacing);
    --ds-grid-columns: 1;
    --ds-screen-size: tiny;
}
.ds-grid-fixed {
    display: grid;
    grid-column-gap: var(--ds-grid-spacing-column);
    grid-row-gap: var(--ds-grid-spacing-row);
    /* add row-gap/column-gap or gap */
    grid-auto-flow: row;
    grid-template-rows: repeat(1, auto);
    grid-template-columns: repeat(var(--ds-grid-columns), 1fr);
}
.ds-grid-dense {
    grid-auto-flow: dense;
}
.ds-grid-fixed > * { /* FIXME: only target grid items */
    max-width: 100%;
    overflow: hidden; /* FIXME: better alternative? */
}
.ds-grid-span-2 {
    grid-column: auto / span 2;
}
.ds-grid-span-3 {
    grid-column: auto / span 3;
}
.ds-grid-span-4 {
    grid-column: auto / span 4;
}
.ds-grid-span-5 {
    grid-column: auto / span 5;
}
.ds-grid-span-6 {
    grid-column: auto / span 6;
}
.ds-grid-span-7 {
    grid-column: auto / span 7;
}
.ds-grid-span-8 {
    grid-column: auto / span 8;
}
.ds-grid-span-9 {
    grid-column: auto / span 9;
}
.ds-grid-span-10 {
    grid-column: auto / span 10;
}
.ds-grid-span-11 {
    grid-column: auto / span 11;
}
.ds-grid-span-6 {
    grid-column: auto / span 12;
}
.ds-grid-span-all {
    grid-column: 1 / -1;
}
.ds-grid-row-2 {
    grid-row: auto / span 2;
}
.ds-grid-row-3 {
    grid-row: auto / span 3;
}
.ds-grid-row-4 {
    grid-row: auto / span 4;
}
.ds-grid-row-5 {
    grid-row: auto / span 5;
}
.ds-grid-row-6 {
    grid-row: auto / span 6;
}
.ds-grid-row-7 {
    grid-row: auto / span 7;
}
.ds-grid-row-8 {
    grid-row: auto / span 8;
}
.ds-grid-row-9 {
    grid-row: auto / span 9;
}
.ds-grid-row-10 {
    grid-row: auto / span 10;
}
:root {
    --ds-screen-size: tiny;
    --ds-grid-columns: 1;
}
@media (min-width: 480px)  {
    :root {
        --ds-screen-size: small;
    }
    :root,
    .ds-grid-2,
    .ds-grid-3,
    .ds-grid-4,
    .ds-grid-6,
    .ds-grid-12 {
        --ds-grid-columns: 2;
    }
}
@media (min-width: 640px) {
    :root {
        --ds-screen-size: tablet;
    }
    :root,
    .ds-grid-4,
    .ds-grid-6,
    .ds-grid-12 {
        --ds-grid-columns: 4;
    }
    .ds-grid-3 {
        --ds-grid-columns: 3;
    }
}
@media (min-width: 992px) {
    :root {
        --ds-screen-size: medium;
    }
    :root,
    .ds-grid-6,
    .ds-grid-12 {
        --ds-grid-columns: 6;
    }
    .ds-grid-6,
    .ds-grid-12 {
        --ds-grid-columns: 6;
    }
}
@media (min-width: 1200px) {
    :root {
        --ds-screen-size: large;
    }
    .ds-grid-12 {
        --ds-grid-columns: 12;
    }
}
@media (min-width: 1800px) {
    :root {
        --ds-screen-size: extra-large;
    }
}


/* Grid: Flexible grid
 */

:root {
    --ds-grid-min-colwidth: 15rem;
}
.ds-grid {
    --ds-grid-spacing-column: var(--ds-grid-spacing);
    --ds-grid-spacing-row: var(--ds-grid-spacing);
    display: grid;
    grid-column-gap: var(--ds-grid-spacing-column);
    grid-row-gap: var(--ds-grid-spacing-row);
    grid-template-columns: repeat(auto-fit, minmax(var(--ds-grid-min-colwidth), 1fr));
}

/* Forms: Buttons */

:root {
    --ds-button-spacing: calc(0.5 * var(--ds-input-spacing));
    --ds-button-bg-color: var(--ds-grey-light);
    --ds-button-default-bg-color: var(--ds-white);
    --ds-button-border-color: var(--ds-primary);
    --ds-button-disabled-color: var(--ds-grey-medium);
    --ds-button-disabled-bg-color: var(--ds-white);
    --ds-button-primary-bg-color: var(--ds-primary);
    --ds-button-primary-color: var(--ds-primary-contrast);
    --ds-button-primary-border-color: var(--ds-primary);
    --ds-button-line-height: calc(var(--ds-line-height) * 1.5);
    --ds-button-radius: 0px;
}
:root .ds-button {
    line-height: var(--ds-button-line-height);
    min-height: var(--ds-button-line-height);
}
.ds-button {
    margin: 0 var(--ds-button-spacing) var(--ds-button-spacing) 0;
    overflow: visible;
    font: var(--ds-body-font);
    font-weight: 700;
    color: var(--ds-primary);
    display: inline-block;
    box-sizing: border-box;
    padding: 0 calc(0.5 * var(--ds-line-height));
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    background-color: var(--ds-button-bg-color);
    outline: 1px solid var(--ds-button-border-color);
    border: 0;
    white-space: nowrap;
    border-radius: var(--ds-button-radius);
}
.ds-button::-moz-focus-inner {
    border: 0;
}
.ds-button:hover,
.ds-button:focus {
    cursor: pointer;
    text-decoration: none;
    background-color: var(--ds-primary);
    color: var(--ds-primary-contrast);
}
a.ds-button,
a.ds-button:hover,
a.ds-button:active,
a.ds-button:visited {
    color: inhervar(--ds-primary);
}
a.ds-button:hover,
a.ds-button:focus {
    background-color: var(--ds-primary);
    color: var(--ds-primary-contrast);
}

.ds-button-default {
    background-color: var(--ds-button-default-bg-color);
}
a.ds-button-primary, a.ds-button-primary:hover,
a.ds-button-primary:active, a.ds-button-primary:visited,
.ds-button-primary, .ds-button-primary:hover {
    background-color: var(--ds-button-primary-bg-color);
    color: var(--ds-button-primary-color);
    border-color: var(--ds-button-primary-border-color);
}
a.ds-button-support, a.ds-button-support:hover,
a.ds-button-support:active, a.ds-button-support:visited,
.ds-button-support, .ds-button-support:hover {
    background-color: var(--ds-button-support-bg-color);
    color: var(--ds-button-support-color);
    border-color: var(--ds-button-support-border-color);
}
.ds-button:disabled {
    background-color: var(--ds-button-disabled-bg-color);
    color: var(--ds-button-disabled-color);
}
.ds-button:disabled:hover {
    cursor: not-allowed;
    box-shadow: 0 0 0;
}
.ds-button-group {
    display: flex;
    flex-wrap: wrap;
}
.ds-button-light {
    background: none;
    outline: 0;
    padding: 0;
}
.ds-button-naked {
    background: none;
    outline: 0;
}
.ds-button-close {
    position: absolute;
    right: var(--ds-spacing);
    margin: 0;
}

.ds-button-grow {
    display: block;
    width: 100%;
}

/* Forms: Icon Buttons
 */

.ds-button .ds-icon {
    height: var(--ds-button-line-height);
}

.ds-button-bar .ds-button:not(:last-child):not(:only-child) {
    margin-right: 0;
    border-right: 0;
}


/* Forms: Icon Buttons with State
 */

    .ds-button[data-simply-state] {
        height: var(--ds-button-line-height);
        overflow: hidden;
        box-sizing: content-box;
        white-space: normal;
    }
    .ds-button[data-simply-state] .ds-button-state {
        height: var(--ds-button-line-height);
        transform: translateY(calc(-1 * var(--ds-button-line-height)));
        transition: transform 0.2s ease;
        display: block;
        margin: 0;
    }
    .ds-button[data-simply-state="open"] .ds-button-state,
    label[data-simply-state] > input[type="checkbox"]:checked ~ .ds-button-state {
        transform: translateY(0);
    }
    label[data-simply-state] > input[type="checkbox"],
    label[data-simply-state] > input[type="radio"] {
        display: none;
    }


/* Forms: Icon Buttons with State
 */



/* Forms: Inputs */

:root {
    --ds-input-border: var(--ds-grey-light);
    --ds-input-spacing: var(--ds-spacing);
    --ds-input-font: var(--ds-font-family);
    --ds-radio-spacing: 0.2em;
}
.ds-form-group {
    margin: var(--ds-input-spacing) 0;
}
label {
    display: block;
}
form.ds-grid-fixed label,
form.ds-grid label,
form .ds-grid-fixed label,
form .ds-grid label {
    margin: 0;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="week"],
input[type="file"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
select {
    width: 100%;
    display: block;
    height: calc(var(--ds-line-height) * 1.5);
    margin: 0;
    margin-bottom: calc(var(--ds-line-height) * 0.5);
    box-sizing: border-box;
    background: inherit;
    border: 0px;
    outline: 1px solid var(--ds-input-border);
    padding: 0 0.5em;
    font-family: var(--ds-input-font);
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
textarea {
    width: 100%;
    border: 0;
    outline: 1px solid var(--ds-input-border);
    padding: 0 0.5em;
    font-family: var(--ds-input-font);
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    height: calc(3 * var(--ds-line-height));
    margin-bottom: cal(0.5 * var(--ds-line-height));
    display: block;
    color: inherit;
    background: inherit;
}
input[type="radio"],
input[type="checkbox"] {
    width: auto;
    height: auto;
    padding: 0;
}
.ds-form-radio label {
    margin: 0;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTBweCIgdmlld0JveD0iMCAwIDQwMS45OTggNDAxLjk5OCIgaGVpZ2h0PSIyMHB4Ij4KPHBhdGggZD0iTTczLjA5MiwxNjQuNDUyaDI1NS44MTNjNC45NDksMCw5LjIzMy0xLjgwNywxMi44NDgtNS40MjRjMy42MTMtMy42MTYsNS40MjctNy44OTgsNS40MjctMTIuODQ3ICAgIGMwLTQuOTQ5LTEuODEzLTkuMjI5LTUuNDI3LTEyLjg1TDIxMy44NDYsNS40MjRDMjEwLjIzMiwxLjgxMiwyMDUuOTUxLDAsMjAwLjk5OSwwcy05LjIzMywxLjgxMi0xMi44NSw1LjQyNEw2MC4yNDIsMTMzLjMzMSAgICBjLTMuNjE3LDMuNjE3LTUuNDI0LDcuOTAxLTUuNDI0LDEyLjg1YzAsNC45NDgsMS44MDcsOS4yMzEsNS40MjQsMTIuODQ3QzYzLjg2MywxNjIuNjQ1LDY4LjE0NCwxNjQuNDUyLDczLjA5MiwxNjQuNDUyeiIvPgo8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3ICAgIGMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2ICAgIGMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-position: right 1em center;
}
select[multiple] {
    height: auto;
    background: none;
    -webkit-appearance: menulist;
    -moz-appearance: menulist; 
    appearance: menulist; 
}


/* Components: Accordion */

.ds-accordion summary {
    outline: none;
    cursor: pointer;
    border-top: 1px solid var(--ds-contrast);
    padding: calc(0.5 * var(--ds-spacing)) var(--ds-spacing);
    margin-bottom: -1px; /* to collapse the borders */
}
.ds-accordion summary:last-of-type {
    border-bottom: 1px solid var(--ds-contrast);
}
.ds-accordion summary.ds-grey-light {
    border-color: var(--ds-grey-medium);
}

.ds-accordion details[open] summary ~ * {
    animation: ds-animate-grow 0.5s ease-in-out;
}
@keyframes ds-animate-grow {
    0%   { max-height: 0;  overflow: hidden;}
    99%   { overflow: hidden;}
    100% { max-height: 10em; overflow: auto;}
}
@keyframes ds-animate-sweep {
    0%    { opacity: 0; margin-left: -10px}
    100%  { opacity: 1; margin-left: 0px}
}
.ds-accordion section {
    box-sizing: border-box;
    padding: var(--ds-spacing);
}


/* Components: Alert */

:root {
    --ds-error-color: rgb(253, 143, 143);
    --ds-warning-color: #FFFFCC;
    --ds-info-color: rgb(140, 180, 250);
}
.ds-alert {
    padding: 0.05px; /* contain child margins */
}
@supports (display: flow-root) {
    .ds-alert {
        display: flow-root;
        padding: 0;
    }
}
.ds-alert-error {
    background-color: var(--ds-error-color);
}
.ds-alert-warning {
    background-color: var(--ds-warning-color);
}
.ds-alert-info {
    background-color: var(--ds-info-color);
}

/* Components: Badge */

.ds-badge {
    --ds-badge-color: var(--ds-grey-light);
    --ds-badge-font-color: var(--ds-black);
    --ds-badge-label-color: var(--ds-highlight);
    --ds-badge-label-contrast-color: var(--ds-primary-contrast);
    --ds-badge-font-size: 0.66em;
    --ds-badge-height: 2em;
    font-size: var(--ds-badge-font-size);
    display: inline-block;
    align-items: center;
    background: var(--ds-badge-color);
    color: var(--ds-badge-font-color);
    border-radius: 0.3em;
    padding: 0 0.6em;
    text-align: center;   
    margin: 0.05em 0;
    margin-right: 0.3em;
    line-height: var(--ds-badge-height);
    max-height: var(--ds-badge-height);
    position: relative;
}
.ds-badge-label,
.ds-badge > label {
    display: inline-flex;
    margin: 0;
    margin-left: -0.6em;
    margin-right: 0.6em;
    padding: 0 0.5em;
    background: var(--ds-badge-label-color);
    color: var(--ds-badge-label-contrast-color);
    float: left;
    min-height: var(--ds-badge-height);
    align-items: center;
    border-radius: 0.3em 0 0 0.3em;
}
a.ds-badge {
    color: inherit;
}
.ds-badge label .ds-icon,
.ds-badge-label .ds-icon {
    margin-top: 0;
    height: var(--ds-badge-height);
}
.ds-badge-inline {
    display: inline;
}
.ds-badge-inverted {
    background: var(--ds-badge-label-color);
    color: var(--ds-badge-label-contrast-color);
}
.ds-badge-inverted .ds-badge-label {
    background: var(--ds-badge-color);
    color: var(--ds-badge-font-color);
}
.ds-badge-tag {
    position: relative;
    border-radius: 0.3em 0 0 0.3em;
    padding-right: 0.2em;
    margin-right: 0.6em;
}
.ds-badge-tag::after {
    content: "";
    display: block;
    border: calc(0.5 * var(--ds-badge-height)) solid transparent;
    border-left: 0.8em solid var(--ds-badge-color); 
    position: absolute;
    top: 0;
    left: 100%;
}
.ds-badge-tag-reverse {
    position: relative;
    border-radius: 0 5px 5px 0;
    padding-left: 0.2em;
    margin-left: 0.6em;
}
.ds-badge-tag-reverse::before {
    content: "";
    display: block;
    border: calc(0.5 * var(--ds-badge-height)) solid transparent;
    border-right: 0.8em solid var(--ds-badge-color); 
    position: absolute;
    top: 0;
    right: 100%;
}
.ds-badge-inverted.ds-badge-tag::after {
    border-left-color: var(--ds-badge-label-color);
}
.ds-badge-inverted.ds-badge-tag-reverse::before {
    border-right-color: var(--ds-badge-label-color);
}


/* Components: Box */

:root {
    --ds-box-radius: 3px;
    --ds-box-shadow: var(--ds-shadow-small);
}
.ds-box {
    border-radius: var(--ds-box-radius);
    box-shadow: var(--ds-box-shadow);
    position: relative;
    break-inside: avoid;
}
@supports (display: flow-root) {
    .ds-box {
        display: flow-root;
        padding: 0;
    }
}
.ds-box-top {
    border-top-left-radius: var(--ds-box-radius);
    border-top-right-radius: var(--ds-box-radius);
}
.ds-box-bottom {
    border-bottom-left-radius: var(--ds-box-radius);
    border-bottom-right-radius: var(--ds-box-radius);
}
.ds-dark-background {
    color: white;
    text-shadow: 0 0 2px var(--ds-black);
}


/* Components: Card */

:root {
    --ds-card-radius: var(--ds-box-radius);
    --ds-card-padding: var(--ds-spacing);
    --ds-card-shadow: none;
}
.ds-card {
    display: flex;
    flex-direction: column;
    box-shadow: var(--ds-card-shadow);
    border-radius: var(--ds-card-radius);
    position: relative;
    break-inside: avoid;
    padding: 0.05px;
}
.ds-card-header,
.ds-card-header-image > img {
    border-radius: var(--ds-card-radius) var(--ds-card-radius) 0 0;
}
.ds-card-footer,
.ds-card-footer-image > img {
    border-radius: 0 0 var(--ds-card-radius) var(--ds-card-radius);
}
.ds-card-header,
.ds-card-footer {
    flex-grow: 0;
}
.ds-card-header,
.ds-card-footer,
.ds-card-content {
    position: relative;
}
.ds-card-header-image,
.ds-card-footer-image {
    min-height: calc(var(--ds-line-height) * 6);
    color: white;
    text-shadow: 0 0 3px var(--ds-black);
}
.ds-card-content {
    flex-grow: 1;
}
.ds-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.ds-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* Components: Crumbs */

.ds-crumbs-list {
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    gap: 0;
}
.ds-crumbs-list li {
    padding: 0;
    margin: 0;
}
.ds-crumbs-list li:not(:first-child)::before {
    content: "\2022";
    margin: 0 5px;
    color: #8c837b;
    font-weight: bold;
}
.ds-crumbs-list a {
    text-decoration: none;
}


/* Components: Datatable */

:root {
    --ds-datatable-heading-color: var(--ds-primary);
    --ds-datatable-heading-contrast: var(--ds-primary-contrast);
    --ds-datatable-ruler-color: var(--ds-grey-70);
    --ds-datatable-ruler: calc(3 * var(--ds-line-height) - 1px);
    --ds-datatable-ruler-end: calc(var(--ds-datatable-ruler) + 1px);
}
.ds-datatable {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}
.ds-datatable thead {
    background: linear-gradient(to top, var(--ds-primary) 0px, var(--ds-primary) 2px, transparent 2px, transparent);
    line-height: var(--ds-line-height);
    text-align: left;
}
.ds-datatable th {
    padding: 0 0.5em;
    cursor: pointer;
}
.ds-datatable th::after {
    background-position: center right;
    background-repeat: no-repeat;
    background-image: var(--ds-icon-arrow-updown-black);
    content: "";
    display: inline-block;
    width: 1em;
    height: var(--ds-line-height);
    position: absolute;
    margin-left: 0.5em;
    line-height: calc(0.3 * var(--ds-line-height));
    opacity: 0.6;
}
.ds-datatable th.ds-datatable-disable-sort {
    cursor: default;
}
.ds-datatable th.ds-datatable-disable-sort::after {
    display: none;
}
.ds-datatable td {
    line-height: var(--ds-line-height);
    padding: 0 0.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-datatable th.ds-datatable-sorted-descending::after {
    background-image: var(--ds-icon-arrow-down-black);
    opacity: 1;
}
.ds-datatable th.ds-datatable-sorted-ascending::after {
    background-image: var(--ds-icon-arrow-up-black);
    opacity: 1;
}

.ds-datatable-rulers tbody tr:nth-child(3n) {
    border-bottom: 1px solid var(--ds-datatable-ruler-color);
}

.ds-datatable-sticky-header thead {
    position: sticky;
    top: 0px;
    background-color: var(--ds-datatable-heading-contrast);
    transform: scale(0.9999999);
    background-clip: padding-box;
}

/* Components: Dialog */

:root {
    --ds-dialog-radius: 0;
    --ds-dialog-shadow: var(--ds-shadow-large);
}
.ds-dialog {
    border: 0;
    width: calc( 50% - (1/2 * var(--ds-spacing)));
    min-width: 30em;
    box-shadow: var(--ds-dialog-shadow);
    padding: 0;
    z-index: 101;
    border-radius: calc(2px + var(--ds-dialog-radius));
}

.ds-dialog-narrow {
    width: calc( 33% - (1/2 * var(--ds-spacing)));
    min-width: 20em;
}

.ds-dialog-header,
.ds-dialog-header-image > img {
    border-radius: var(--ds-dialog-radius) var(--ds-dialog-radius) 0 0;
}
.ds-dialog-footer,
.ds-dialog-footer-image > img {
    border-radius: 0 0 var(--ds-dialog-radius) var(--ds-dialog-radius);
}

.ds-dialog-header,
.ds-dialog-footer {
    flex-grow: 0;
}

.ds-dialog-header,
.ds-dialog-footer,
.ds-dialog-content {
    position: relative;
    padding: 0.05px; 
}

.ds-dialog-header-image,
.ds-dialog-footer-image {
    min-height: calc(var(--ds-line-height) * 6);
    color: var(--ds-white);
    text-shadow: 0 0 3px var(--ds-black);
}
.ds-dialog-content {
    flex-grow: 1;
}

.ds-dialog-content .ds-alert {
    margin: calc(-1 * var(--ds-dialog-padding));
    margin-bottom: var(--ds-dialog-padding);
}

.ds-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 11;
    display: none;
}
dialog[open] ~ .ds-dialog-overlay {
    display: block;
}



/* Components: Dropdown */

:root {
    --ds-dropdown-background: white;
    --ds-dropdown-width: 200px;
}
.ds-dropdown {
    margin: 0;
    padding: 0;
    outline: none;
    box-shadow: none;
    display: inline-block; 
    position: relative;
}
.ds-dropdown-icon {
    padding: 0 0.25em;
    width: 1.5em;
    border-radius: 2px;
}
.ds-dropdown-icon:hover {
    background: var(--ds-grey-40);
}
.ds-dropdown-nav {
    width: var(--ds-dropdown-width);
    background: var(--ds-dropdown-background);
    display: none;
    position: absolute;
    left: 0;
    box-shadow: var(--ds-shadow-medium);
    border-radius: var(--ds-box-radius);
    z-index: 101;
}
.ds-dropdown-nav::before {
    content: "";
    display: block;
    width: 0.5rem; 
    height: 0.5rem;
    background: var(--ds-dropdown-background);
    position: absolute;
    top: -0.2rem;
    left: 0.75rem;
    transform: rotate(45deg);
    filter: drop-shadow(-1px -1px 2px #DDD);
    clip-path: polygon(-2px 0.6rem, -2px -2px, 0.6rem -2px);
}
.ds-dropdown-state {
    display: none;  
}
.ds-dropdown-state:checked ~ .ds-dropdown-nav {
    display: block;
}
.ds-dropdown-list {
    list-style: none;
    margin: 0;
    padding: calc(0.25 * var(--ds-spacing)) calc(0.5 * var(--ds-spacing));
}
.ds-dropdown-item {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ds-dropdown-right {
    left: auto;
    right: 0;
}

.ds-dropdown-right::before {
    left: auto;
    right: 0.5rem;
    top: -0.15rem;
}

.ds-dropdown-up {
    bottom: 1.5em
}
.ds-dropdown-nav.ds-dropdown-up::before {
    transform: rotate(-135deg);
    top: auto;
    bottom: -0.2rem;
    filter: drop-shadow(1px 1px 2px #000);
}

.ds-dropdown-center {
    margin-left: calc(-0.5 * var(--ds-dropdown-width) + 50%);
}
.ds-dropdown-nav.ds-dropdown-center::before {
    left: calc(50% - 0.25rem);
}


/* Components: Search */

.slo-search-button {
    display: block;
    background: transparent;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' x='0' y='0' version='1.1' viewBox='0 0 16 16' xml:space='preserve'%3E%3Cpath fill='%232b338d' d='M6.8,11.1c-2.4,0-4.3-1.9-4.3-4.3c0-2.4,1.9-4.3,4.3-4.3c2.4,0,4.3,1.9,4.3,4.3C11.1,9.1,9.1,11.1,6.8,11.1z M14.8,16c0.7,0,1.2-0.6,1.2-1.2c0-0.3-0.1-0.6-0.4-0.9l-3.3-3.3c0.8-1.1,1.2-2.5,1.2-3.8c0-3.7-3-6.8-6.8-6.8C3,0,0,3,0,6.8 c0,3.7,3,6.8,6.8,6.8c1.4,0,2.7-0.4,3.8-1.2l3.3,3.3C14.1,15.9,14.4,16,14.8,16z'/%3E%3C/svg%3E");
    background-position: center center;
    cursor: pointer;
    text-indent: 9999px;
    min-width: 20px;
    float: right;
    min-height: 20px !important;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}
.slo-search-drawer .slo-search-button {
    line-height: calc(1.5 * var(--ds-line-height));
    height: calc(1.5 * var(--ds-line-height));
    outline: 0;
    margin-left: -50px;
    position: relative;
}
.slo-search-drawer .slo-search {
    outline: 1px solid var(--ds-primary)
}
.slo-search-button:hover {
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' x='0' y='0' version='1.1' viewBox='0 0 16 16' xml:space='preserve'%3E%3Cpath fill='%23ff6b00' d='M6.8,11.1c-2.4,0-4.3-1.9-4.3-4.3c0-2.4,1.9-4.3,4.3-4.3c2.4,0,4.3,1.9,4.3,4.3C11.1,9.1,9.1,11.1,6.8,11.1z M14.8,16c0.7,0,1.2-0.6,1.2-1.2c0-0.3-0.1-0.6-0.4-0.9l-3.3-3.3c0.8-1.1,1.2-2.5,1.2-3.8c0-3.7-3-6.8-6.8-6.8C3,0,0,3,0,6.8 c0,3.7,3,6.8,6.8,6.8c1.4,0,2.7-0.4,3.8-1.2l3.3,3.3C14.1,15.9,14.4,16,14.8,16z'/%3E%3C/svg%3E");
}
.slo-search-state {
    display: none;
}
input.slo-search {
    margin-bottom: 0;
}
.slo-search-drawer {
    position:absolute;
    width: 100%;
    display: flex;
    top: -6em;
    left: 0;
    transition: top ease-in-out 0.5s;
    padding: calc(0.5 * var(--ds-spacing)) var(--ds-spacing);
    padding-bottom: calc(0.25 * var(--ds-spacing));
    gap: 1em;
    background-color: white;
    border-bottom: 3px solid var(--ds-primary);
}
.slo-search-state:checked ~ .slo-search-drawer {
    top: 0;
}
.slo-close-button {
    background: transparent;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_2' data-name='Layer 2' viewBox='0 0 14.5 14.5'%3E%3Cpath fill='none' stroke='%23283894' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M1.25 1.25L13.25 13.25'/%3E%3Cpath fill='none' stroke='%23283894' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M13.25 1.25L1.25 13.25'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    cursor: pointer;
    text-indent: 9999px;
    min-width: 20px;
    min-height: 20px !important;
    outline: 0 !important;
}

.slo-close-button:hover {
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_2' data-name='Layer 2' viewBox='0 0 14.5 14.5'%3E%3Cpath fill='none' stroke='%23ff6b00' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M1.25 1.25L13.25 13.25'/%3E%3Cpath fill='none' stroke='%23ff6b00' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M13.25 1.25L1.25 13.25'/%3E%3C/svg%3E");
}

/* Components: Header */

.slo-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5em;
    padding: 0 3em;
}
.slo-logo {
    width: 15em;
    max-width: 60%;
}

/* Components: Media */

:root {
    --ds-media-radius: var(--ds-box-radius);
    --ds-media-shadow: var(--ds-box-shadow);
    --ds-media-media-size: 100px;
}
.ds-media {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.ds-media-media {
    width: var(--ds-media-media-size);
    margin: var(--ds-spacing);
}
.ds-media-nospace > .ds-media-media {
    margin-top: 0;
    margin-left: 0;
}
.ds-media-media img {
    width: 100%;
}
.ds-media-content {
    flex: 1;
}
.ds-media-nospace > .ds-media-content > :first-child {
    margin-top: 0;
}

/* Components: Scrollbox */

.ds-scrollbox {
    --ds-scrollbox-height: calc(8 * var(--ds-line-height));
    max-height: var(--ds-scrollbox-height);
    overflow: auto;
    background:
        /* Shadow covers */
        linear-gradient(var(--ds-background) 30%, var(--ds-background-transparent)),
        linear-gradient(var(--ds-background-transparent), var(--ds-background) 70%) 0 100%,
        
        /* Shadows */
        radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background:
        /* Shadow covers */
        linear-gradient(var(--ds-background) 30%, var(--ds-background-transparent)),
        linear-gradient(var(--ds-background-transparent), var(--ds-background) 70%) 0 100%,
        
        /* Shadows */
        radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
}


/* Components: Slides */

.ds-slides {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: hidden;
    overflow-x: scroll;
    /* IE10 (touch only) + Edge*/
    -ms-scroll-snap-type: mandatory;
    /* safari 9 */
    -webkit-scroll-snap-type: mandatory;
    -webkit-scroll-snap-points-x: repeat(100%);
    -webkit-overflow-scrolling: touch;
    /* firefox */
    scroll-snap-destination: 0% 100%;
    scroll-snap-points-x: repeat(100%);
    scroll-snap-type: mandatory;
    /* standard */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
.ds-slides-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* standard */
    scroll-snap-align: start;
}
.ds-slides-slide {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ds-slides-slide:not(:first-child)::before {
    content: "\3008";
    position: absolute;
    top: 50%;
    left: 1em;
    color: var(--ds-white);
    font-size: var(--ds-line-height);
    font-weight: bold;
    margin-top: calc(-0.5 * var(--ds-line-height));
    text-shadow: 0 0 2px var(--ds-black);
}
.ds-slides-slide:not(:last-child)::after {
    content: "\3009";
    text-shadow: 0 0 3px var(--ds-black);
    position: absolute;
    z-index: 10;
    top: 50%;
    right: 1em;
    color: var(--ds-white);
    font-size: var(--ds-line-height);
    font-weight: bold;
    margin-top: calc(-0.5 * var(--ds-line-height));
}
img.ds-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Components: Slides Vertical
 */

.ds-slides-vertical {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;
    /* safari 9 */
    -webkit-scroll-snap-points-x: none;
    -webkit-scroll-snap-points-y: repeat(100%);
    /* firefox */
    scroll-snap-points-x: none;
    scroll-snap-points-y: repeat(100%);
    /* standard */
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
.ds-slides-vertical .ds-slides-slide:not(:first-child)::before {
    transform: rotate(90deg);
    top: 1em;
    left: 50%;
    margin-left: -0.5em;
}
.ds-slides-vertical .ds-slides-slide:not(:last-child)::after {
    transform: rotate(90deg);
    top: auto;
    right: auto;
    bottom: 1em;
    left: 50%;
    margin-left: -0.5em;
}

/* Components: Toast */


:root {
    --ds-toast-height: 60px;
    --ds-toast-hide-delay: 3s; /* 5 seems better */
    --ds-toast-show-duration: 0.3s;
    --ds-toast-hide-duration: 0.5s;
    --ds-toast-margin: 20px;
    --ds-toast-shadow: var(--ds-shadow-medium);
}

ul.ds-toasts,
ol.ds-toasts,
.ds-toasts {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 101;
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 50%;
    min-width: 300px;
}
.ds-toast,
li.ds-toast {
    min-width: 300px;
    float: right;
    clear: both;
    margin-top: var(--ds-spacing);
    margin-right: var(--ds-spacing);
    background-color: var(--ds-grey-80);
    color: var(--ds-white);
    display: block;
    border-left: 10px solid var(--ds-grey-50);
    box-shadow: var(--ds-toast-shadow);
}
.ds-toast-error,
li.ds-toast-error {
    border-color: var(--ds-error-color);
}
.ds-toast-info,
li.ds-toast-info {
    border-color: var(--ds-info-color);
}
.ds-toast-warning,
li.ds-toast-warning {
    border-color: var(--ds-warning-color);
}

@keyframes ds-toast-show {
    0% {
        transform: scaleX(0);
        transform-origin: right;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scaleX(1);
        transform-origin: right;
        opacity: 1;
    }
}
@keyframes ds-toast-hide {
    0% {
        transform: scaleX(1);
        transform-origin: right;
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scaleX(0);
        transform-origin: right;
        opacity: 0;
    }
}
@keyframes ds-toast-move {
    0% {
        transform: translateY(-80px); /* toast-height + toast-margin */
    }
    100% {
        transform: translateY(0px);
    }
}
.ds-toast[data-state="new"] {
    animation: ds-toast-show var(--ds-toast-show-duration) forwards;
}
.ds-toast-autohide[data-state="new"] {
    animation: ds-toast-show var(--ds-toast-show-duration);
    animation-delay: 0s;
}
.ds-toast-autohide.ds-toast-animated[data-state="shown"] {
    animation: ds-toast-hide var(--ds-toast-hide-duration) forwards;
    animation-delay: calc(var(--ds-toast-hide-delay) - var(--ds-toast-show-duration));
}
.ds-toast-autohide:not(.ds-toast-animated)[data-state="shown"] {
    animation: ds-toast-move var(--ds-toast-show-duration), ds-toast-hide var(--ds-toast-hide-duration) forwards;
    animation-delay: 0s, var(--ds-toast-hide-delay);
}


/* Components: Tooltip */

:root {
    --ds-tooltip-shadow: var(--ds-shadow-small);
    --ds-tooltip-background: var(--ds-support);
    --ds-tooltip-color: var(--ds-support-contrast);
    --ds-tooltip-radius: var(--ds-box-radius);
    --ds-tooltip-width: 20em;
    --ds-tooltip-font-size: 0.7em;
    --ds-tooltip-line-height: 1.3em;
}
.ds-tooltip {
    position: relative;
    cursor: help;
}
.ds-tooltip::after {
    content: attr(data-title);
    display: block;
    position: absolute;
    left: -9999px;
    top: calc(100% + 0.5em);
    background-color: var(--ds-tooltip-background);
    color: var(--ds-tooltip-color);
    padding: 0.5em;
    border-radius: var(--ds-tooltip-radius);
    width: var(--ds-tooltip-width);
    margin-left: calc((-0.5 * var(--ds-tooltip-width)) - 0.5em);
    font-size: var(--ds-tooltip-font-size);
    line-height: var(--ds-tooltip-line-height);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.2s ease-in;
    box-shadow: var(--ds-shadow-small);
}
.ds-tooltip::before {
    content: "";
    border-style: solid;
    border-width: 0 0.6em 0.6em 0.6em;
    border-color: transparent transparent var(--ds-tooltip-background) transparent;
    position: absolute;
    top: 100%;
    left: -9999px;
    margin-left: -0.6em;
    opacity: 0;
    z-index: 112 !important;
    transition: opacity 0.2s ease-in;
    font-size: var(--ds-tooltip-font-size);
}
.ds-tooltip:hover::after,
.ds-tooltip:focus::after,
.ds-tooltip:hover::before,
.ds-tooltip:focus::before,
.ds-tooltip.ds-tooltip-open::after,
.ds-tooltip.ds-tooltip-open::before {
    opacity: 1;
    z-index: 111;
    left: 50%;
}

.ds-tooltip-top::after {
    top: unset;
    bottom: calc(100% + 0.7em);
}
.ds-tooltip-top::before {
    top: unset;
    bottom: calc(100% + 0.2em);
    border-width: 0.6em 0.6em 0 0.6em;
    border-color: var(--ds-tooltip-background) transparent transparent transparent;
}
.ds-super {
    font-size: small;
    position: relative;
    bottom: 0.5em;
}

/* Components: Navigation */

:root {
    --ds-navbar-shadow: var(--ds-shadow-small);
}
.ds-navbar {
    display: flex;
    box-shadow: var(--ds-navbar-shadow);
    justify-content: space-between;
    flex-wrap: wrap;
}
.ds-navbar-left {
    order: -1;
    display: flex;
    justify-content: flex-start;
}
.ds-navbar-right {
    display: flex;
    justify-content: flex-end;
    order: 1;
}
.ds-navbar-right *:last-child {
    margin-right:0;
}
.ds-navbar-center {
    display: flex;
    justify-content: center;
}
.ds-navbar > * {
    flex: 1;
}
ul.ds-navbar {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.ds-navbar .ds-button,
.ds-navbar input,
.ds-navbar select {
    border-top: 0;
    border-bottom: 0;
    outline: 0;
    margin-bottom: 0;
}
.ds-navbar-nav {
    margin: 0;
    padding: 0;
    display: flex;
}
.ds-navbar-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ds-navbar-nav a {
    text-decoration: none;
    color: inherit;
}
.ds-navbar-nav .ds-button {
    margin-bottom: 0;
}
.ds-navbar-nav .ds-button:last-child {
    margin-right: 0;
}

/* Components: Navigation Static Menu
 */

.ds-navbar-fullwidth {
    order: 2;
    flex-shrink:0;
    max-width: 100%;
}
.ds-navbar-fullwidth .ds-navbar-nav {
    width: max-content;
    max-width: 100%;
    overflow: auto;
}

/* Components: Navigation Sidebar
 */

.ds-navbar-side,
.ds-navbar-side .ds-navbar-nav {
    flex-direction: column;
}
.ds-navbar-side .ds-nav {
    display: block;
    position: relative;
    padding: calc(0.5 * var(--ds-line-height));
    text-align: left;
}
.ds-navbar-side .ds-nav .ds-icon {
    margin-right: calc(0.3 * var(--ds-spacing));
}
.ds-navbar-side .ds-selected,
.ds-navbar-side .ds-nav:hover,
.ds-navbar-side .ds-nav-hover {
    background: rgba(0,0,0,0.2);
}

/* Components: SLO Menu
 */

.slo-menu {
    width: 250px;
    border-right: 3px solid var(--ds-primary)
}
.slo-menu summary {
    padding-left: 1em;
    cursor: pointer;
}
.slo-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.slo-submenu-item {
    margin: 0;
    padding: 0;
}
.slo-submenu-item a {
    padding-left: 2em;
    text-decoration: none;
    display: block;
}
.slo-menu summary:hover,
.slo-submenu-item a:hover {
    background: var(--ds-grey-light);
    color: var(--ds-black);
}
.slo-submenu-item a:active,
.slo-submenu-item.slo-active a {
    background: var(--ds-grey-light);
    color: var(--ds-black);
}

@media screen and (max-width: 720px) {
    .slo-menu {
        width: 100%;
        border-right: 0;
        border-bottom: 3px solid var(--ds-primary);
        padding-bottom: calc(0.5 * var(--ds-spacing));
        max-height: 33%;
        overflow: auto;
    }
}

/* Components: Paging */

.ds-navbar-nav.ds-paging {
    display: none;
    line-height: var(--ds-button-line-height);
}
.ds-paging .ds-navbar-nav.ds-paging {
    display: flex;
}
.ds-paging .ds-paging-info {
    padding: 0 1em;
}
.ds-paging .ds-button {
    display: block;
}
.ds-paging li:first-child .ds-button {
    margin-right: 0;
}

/* Pages: Editable Page */

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.slo-header {
    position: fixed;
    top: 0;
    z-index: 10;
    background-color: white;
}
.slo-main {
    padding: 0;
    margin-top: 5em;
    flex: 1;
    display: flex;
}
.slo-menu {
    position: fixed;
    z-index: 10;
    top: 5em;
    background-color: white;
    max-height: calc(100% - 5em);
    overflow: auto;
    hyphens: auto;
    width: 275px;
}
.slo-submenu-item {
    line-height: 1.2em;
    padding-bottom: 0.2em;
    margin-bottom: 0.2em;
}
.slo-submenu-item:first-child {
    margin-top: 0.2em;
}
.slo-submenu-item a {
    padding-left: 1.85em;
}
.slo-submenu-extra .slo-submenu-item a {
    padding-left: 1em;
}
.slo-footer-menu ul {
    list-style: none;
    margin: 0;
}
.slo-footer-menu a {
    text-decoration: none;
}
.slo-content-panel {
    margin-left: 275px;
    margin-bottom: var(--ds-spacing);
    padding-left: var(--ds-spacing);
    padding-right: var(--ds-spacing);
    width: calc(100% - 275px)
}
.slo-content-panel > :first-child {
    margin-top: 0;
}
.slo-footer {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    padding: 2em 3em 1em 3em;
}
.slo-logo-footer {
    min-width: 101px;
}
.slo-footer-message {
    width: fit-content;
    max-width: 50%;
    hyphens: auto;
}
@media (max-width:700px) {
    .slo-footer-message {
        max-width: 100%;
    }
    .slo-footer, .slo-header {
        padding-left: 1em;
        padding-right: 1em;
    }
    .slo-header {
        position: sticky;
        top: 0;
    }
    .slo-main {
        flex-direction: column;
        margin-top: 0;
    }
    .slo-menu {
        position: sticky;
        top: 5em;
        width: 100%;
        margin-bottom: calc(0.5 * var(--ds-spacing));
        max-height: 25vh;
    }
    .slo-content-panel {
        margin-left: 0;
        padding-left: calc(0.5 * var(--ds-spacing));
        padding-right: calc(0.5 * var(--ds-spacing));
        width: auto;
    }

}

/* Pages: Databrowser Overzicht
 */

.slo-content-panel {
    --ds-grid-min-colwidth: 10rem;
}
.slo-highlight-box {
    background-color: var(--ds-grey-light);
    padding: calc(0.5 * var(--ds-spacing));
}

/* Pages: Databrowser Context Overzicht
 */



/* Pages: Databrowser Lijst
 */



/* Pages: Data Page */

a.ds-badge {
    color: var(--ds-black);
    text-decoration: none;
}
a.slo-relatie {
    text-decoration: none;
    display: block;
    color: var(--ds-black);
}
a.slo-relatie:hover {
    background-color: var(--ds-grey-light);
    color: var(--ds-black);
}

/* Pages: Empty Page */



/* Pages: Search results
 */



/* Beheertool: Entiteiten Editor - Lijst
 */



/* Beheertool: Entiteiten Editor - Enkele Entiteit */

.ds-button-bar {
    border-radius: 3px;
    overflow: hidden;
}

/* Beheertool: Entiteit Editor - Tree View
 */

.slo-form-inline {
    display: flex;
    gap: 5px;
}
.slo-tree .slo-form-inline {
    padding-left: 1em;
}
.slo-form-inline select {
    width: 40%;
    display: inline-block;
}
.slo-editor-tree {
    display: flex;
}
.slo-editor-tree .slo-menu {
    position: sticky;
}
.slo-tree {
    width: 50vw;
    min-width: 250px;
    max-width: 500px;
}
.slo-tree details {
    padding-left: 1em;
}
.slo-tree > details {
    padding-left: 0;
}
.slo-tree summary {
    white-space: nowrap;
    max-width: 100%;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.slo-editor .slo-content-panel {
    margin-left: var(--ds-space);
}
.slo-editable {
    outline: 1px dashed var(--ds-grey-50)
}
.slo-header .ds-button-bar {
    position: absolute;
    top: 1.3em;
    right: 90px;
}
.slo-entity .slo-add {
    visibility: hidden;
    color: var(--ds-grey-70);
    cursor: pointer;
    position: absolute;
    margin-left: 0.5em;
}
.slo-entity .slo-delete {
    margin-left: 2em;
}
.slo-delete {
    visibility: hidden;
    margin-left: 0.5em;
    color: var(--ds-grey-70);
    cursor: pointer;
    position: absolute;
}
.slo-entity:hover .slo-delete {
    visibility: visible;
}
.slo-add:hover,
.slo-delete:hover {
    color: var(--ds-highlight);
}
.slo-entity:hover .slo-add {
    visibility: visible;
}
@Media screen and (max-width: 720px) {
    .slo-header .ds-button-bar {
        position: absolute;
        top: 4em;
        right: unset;
    }
    .slo-header {
        height: 7em;
        padding-bottom: 2em;
    }
    .slo-editor .slo-content-panel {
        margin-left: 0;
    }
    .slo-tree {
        min-width: 100%;
    }
}

/* Beheertool: Entiteiten Editor - Document View
 */

.slo-document .slo-content-panel {
    margin-left: 0;
    width: auto;
}
.slo-prefix {
    color: var(--ds-grey-70);
    font-size: smaller;
}


/* Beheertool: Entiteiten Editor - Spreadsheet View
 */

.ds-scrollbox {
    --ds-scrollbox-height: 400px;
}
select {
    padding-right: 2em;
}
.slo-spreadsheet .slo-content-panel {
    margin-left: 0;
    width: auto;
}
.slo-spreadsheet .ds-scrollbox {
    position: relative;
    overflow: auto;
}
.slo-spreadsheet .slo-scrollbar {
    position: absolute;
    width: 10px;
    top: 0;
}
.slo-tree-table {
    min-width: 720px;
}
.slo-minwidth {
    width: 2em;
}
.slo-smallwidth {
    width: 4em;
}
.slo-larger-width {
    width: 20em;
    max-width: 30%;
}
.slo-indent-0 {
    margin-left: 1em;
}
.slo-indent-1 {
    margin-left: 1.5em;
}
.slo-indent-2 {
    margin-left: 2em;
}
.slo-indent-3 {
    margin-left: 2.5em;
}
.slo-indent-4 {
    margin-left: 3em;
}
.slo-indent-5 {
    margin-left: 3.5em;
}
.slo-indent-6 {
    margin-left: 4em;
}
.slo-indent-7 {
    margin-left: 4.5em;
}

.slo-tree-table th {
    position: relative;
}
.slo-filter {
    display: inline-block;
    position: absolute;
    color: var(--ds-grey-medium);
    right: 0.5em;
}
.ds-dropdown-nav {
    font-weight: normal;
    color: var(--ds-black);
}
.ds-dropdown-item {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ds-dropdown-content {
    padding: calc(0.5 * var(--ds-spacing));
}
.ds-dropdown-content .slo-form-inline {
    margin-top: calc(0.25 * var(--ds-spacing));
}
.ds-dropdown-content .slo-form-inline input {
    margin-bottom: 0;
}
.ds-dropdown-content .ds-button {
    margin: 0;
}
.slo-tree-table td,
.slo-tree-table th {
    position: relative;
}
.slo-tree-table thead {
    z-index: 10;
}
.slo-tree-table td.slo-focus {
    overflow: visible;
}
.slo-focus .slo-editable {
    background-color: var(--ds-grey-light);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
    white-space: normal;
}
.slo-tree-table th,
.slo-tree-table td {
    padding: 0 1px;
}
.slo-tree-table th::after {
    margin-left: 0.1em;
}
.slo-spreadsheet .ds-crumbs {
    line-height: 2.5em
}
.slo-spreadsheet .slo-context-filter {
    float: right;
    justify-content: end;
}
.slo-spreadsheet .slo-context-filter .ds-button {
    margin-right: 0;
}
@media screen and (max-width: 720px) {
    .slo-spreadsheet .slo-context-filter {
        float: none;
    }
}
.ds-button-bar {
    xborder: 1px solid var(--ds-primary);
    xborder-radius: 3px;
    background: var(--ds-grey-light);
    margin: 0;
}
.ds-button-bar .ds-button {
    margin: 0;
}
.ds-dropdown-list {
    xbackground: var(--ds-grey-light);
    xmargin: calc(0.5 * var(--ds-spacing));
    xpadding: 5px;
    xborder-radius: 3px;
}
.slo-dropdown-buttons {
    padding: 0px;
}
.slo-dropdown-filter {
    padding: 3px 8px 8px 8px;
}
.slo-dropdown-filter input {
    border: 1px solid var(--ds-primary);
}
.slo-dropdown-filter button {
    position: absolute;
    right: 8px;
}
.ds-datatable tbody tr:hover,
.ds-datatable-focus {
    background-color: var(--ds-grey-light);
}
.ds-datatable td {
    position: relative;
}
.ds-datatable .slo-entity .slo-delete {
    top: 0;
    right: calc(0.5 * var(--ds-spacing));
}
.slo-spreadsheet .ds-scrollbox {
    margin-top: var(--ds-spacing);
}
.ds-datatable .ds-selected,
.ds-datatable .ds-selected a,
.ds-datatable .ds-selected td {
    background-color: var(--ds-support-light);
}

.slo-indent-0::before,
.slo-indent-1::before,
.slo-indent-2::before,
.slo-indent-3::before,
.slo-indent-4::before,
.slo-indent-5::before,
.slo-indent-6::before,
.slo-indent-7::before {
    content: "\25BE";
    display: inline-block;
    position: absolute;
    margin-left: -1em;
}

/* Utility: Alignment */

.ds-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.ds-center-middle {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ds-align-right {
    float: right;
    text-align: right;
}
.ds-align-left {
    float: left;
    text-align: left;
}

/* Utility: Background Image
 */

.ds-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}


/* Utility: Color classes
 */

 .ds-bg-primary {
    background: var(--ds-primary);
    color: var(--ds-primary-contrast);
    --ds-contrast: var(--ds-primary-contrast);
}
.ds-bg-primary-dark {
    background: var(--ds-primary-dark);
    color: var(--ds-primary-contrast);
    --ds-contrast: var(--ds-primary-contrast);
}
.ds-bg-support {
    background: var(--ds-support);
    color: var(--ds-support-contrast);
    --ds-contrast: var(--ds-support-contrast);
}
.ds-bg-highlight {
    background: var(--ds-highlight);
    color: var(--ds-highlight-contrast);
    --ds-contrast: var(--ds-highlight-contrast);
}
.ds-bg-grey-dark {
    background: var(--ds-grey-dark);
    color: var(--ds-white);
    --ds-contrast: var(--ds-white);
}
.ds-bg-grey-medium {
    background: var(--ds-grey-medium);
    color: var(--ds-white);
    --ds-contrast: var(--ds-white);
}
.ds-bg-grey-light {
    background: var(--ds-grey-light);
    color: var(--ds-black);
    --ds-contrast: var(--ds-black);
}
:where( .ds-bg-grey-light, .ds-bg-grey-dark, .ds-bg-grey-medium, .ds-bg-highlight, .ds-bg-primary, .ds-bg-support) :is(h1,h2,h3,h4) {
    color: var(--ds-contrast);
}
.ds-color-primary {
    color: var(--ds-primary);
}
.ds-color-support {
    color: var(--ds-support);
}
.ds-color-highlight {
    color: var(--ds-highlight);
}

/* Utility: Contain Margins
 */

.ds-contain {
    padding: 0.05px; /* IE fallback */
}
@supports (display: flow-root) {
    .ds-contain {
        padding: 0;
        display: flow-root;
    }
}

/* Utility: Hide items
 */

.ds-hidden {
    max-height: 0;
    overflow: hidden;
}

/* Utility: Shadows
 */

:root {
    --ds-shadow-light: rgba(0,0,0,0.07);
    --ds-shadow-middle: rgba(0,0,0,0.09);
    --ds-shadow-dark: rgba(0,0,0,0.11);
    --ds-shadow-tiny: 
        0 1px 1px var(--ds-shadow-dark)
    ;
    --ds-shadow-small: 
        0 1px 1px var(--ds-shadow-dark),
        0 2px 2px var(--ds-shadow-middle),
        0 4px 4px var(--ds-shadow-light)
    ;
    --ds-shadow-medium: 
        0 1px 1px var(--ds-shadow-middle),
        0 2px 2px var(--ds-shadow-middle),
        0 4px 4px var(--ds-shadow-middle),
        0 6px 8px var(--ds-shadow-middle),
        0 8px 16px var(--ds-shadow-middle)
    ;
    --ds-shadow-large: 
        0 2px 1px var(--ds-shadow-light),
        0 4px 2px var(--ds-shadow-light),
        0 8px 4px var(--ds-shadow-light),
        0 16px 8px var(--ds-shadow-light),
        0 32px 16px var(--ds-shadow-light) 
    ;
}
.ds-shadow-tiny {
    box-shadow: var(--ds-shadow-tiny);
}
.ds-shadow-small {
    box-shadow: var(--ds-shadow-small);
}
.ds-shadow-medium {
    box-shadow: var(--ds-shadow-medium);
}
.ds-shadow-large {
    box-shadow: var(--ds-shadow-large);
}

/* Utility: Space */

.ds-margin-up {
    margin-top: calc(-1 * var(--ds-spacing));
}

.ds-no-space {
    margin: 0;
}
.ds-space {
    margin: var(--ds-line-height);
}
.ds-space-vertical {
    margin: var(--ds-line-height) 0;
}
.ds-space-horizontal {
    margin-left: var(--ds-spacing);
    margin-right: var(--ds-spacing);
}
.ds-space-left {
    margin-left: var(--ds-spacing);
}
.ds-space-right {
    margin-right: var(--ds-spacing);
}
.ds-space-top {
    margin-top: var(--ds-spacing);
}
.ds-space-bottom {
    margin-bottom: var(--ds-spacing);
}

.ds-space-inside {
  padding: 0 var(--ds-spacing);
}
.ds-space-inside::before,
.ds-space-inside::after {
  content: "";
  display: block;
  height: 0;
}
.ds-space-inside::before {
  margin-bottom: var(--ds-spacing);
}
.ds-space-inside::after {
  margin-top: var(--ds-spacing);
}

/* Utility: Text on dark and light backgrounds
 */

.ds-dark-background {
    color: white;
    text-shadow: 0 0 2px var(--ds-black);
}
.ds-dark-background a:link,
.ds-dark-background a:visited,
.ds-dark-background a:hover,
.ds-dark-background a:active {
    color: var(--ds-contrast);
}
.ds-light-background {
    color: var(--ds-color);
    text-shadow: 0 0 3px white;
}