/* 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: #0083CA;
    --ds-primary-dark: #0083CA;
    --ds-primary-contrast: var(--ds-white);
    --ds-primary-light: #04A7FF;
    --ds-primary-gradient: linear-gradient( to left, var(--ds-primary-light), var(--ds-primary-dark) );
    --ds-support: #06CC06;
    --ds-support-dark: #05BB05;
    --ds-support-light: #07DE07;
    --ds-support-contrast: #FFF;
    --ds-support-gradient: linear-gradient( to left, var(--ds-support-light), var(--ds-support-dark) );
    /* 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-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=Lato:ital,wght@0,300;1,300&family=Roboto+Condensed:ital@0;1&display=swap');
:root {
    --ds-body-font: 'Lato', sans-serif;
    --ds-heading-font: 'Roboto Condensed', Helvetica, sans-serif;
}


/* Basic styles: Typography
 */

:root {
    --ds-font-size: calc(1.25 * 1rem);
    --ds-font-weight: 300;
    --ds-line-height: calc(1.6 * 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: 400;
    --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 {
    --ds-font-size: calc(1em * var(--ds-heading-multiplier) * var(--ds-heading-multiplier) * var(--ds-heading-multiplier));
    line-height: calc(2 * var(--ds-line-height));
}
h2 {
    --ds-font-size: calc(1em * var(--ds-heading-multiplier) * var(--ds-heading-multiplier));    
    line-height: calc(2 * var(--ds-line-height));
}
h3 {
    --ds-font-size: calc(1em * var(--ds-heading-multiplier));    
}
h1, h2, h3, h4, h5, h6 {
    font-size: var(--ds-font-size);
    font-weight: var(--ds-heading-weight);
    font-family: var(--ds-heading-font);
}
h4, 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);
}
a:link {
    color: var(--ds-primary-dark);
}
a:visited {
    color: var(--ds-support-dark);
}
a.ds-link-hover,
a:hover {
    color: var(--ds-primary-light);
}
a.ds-link-active,
a:active {
    color: var(--ds-primary-light);
}

/* 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=');
}


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

/* Grid: Prebuild grids */

.ds-grid-header_main_footer {
	grid-template-areas:
	    "header"
	    "main"
	    "footer";
}

.ds-grid-header_main {
	grid-template-areas:
    	"header"
	    "main";
}

.ds-grid-main_footer {
	grid-template-areas:
    	"main"
	    "footer";
}

.ds-grid-header_nav-main_footer {
	grid-template-areas:
    	"header header header header"
	    "nav main main main"
	    "footer footer footer footer";
}

.ds-grid-header_main-nav_footer {
	grid-template-areas:
    	"header header"
	    "main nav"
	    "footer footer"
}

.ds-grid-nav-main {
	grid-template-areas:
	"nav main"
}

.ds-grid-main-nav {
	grid-template-areas:
	"main nav"
}

.ds-grid-nav-header_main_footer {
	grid-template-areas: 
        "nav header"
        "nav main"
        "nav footer"
}

.ds-grid-header-nav_main_footer {
	grid-template-areas: 
        "header nav"
        "main nav"
        "footer nav";
}

.ds-grid-header_nav-main-aside_footer {
	grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
}
.ds-grid-nav-main-aside {
	grid-template-areas:
    	"nav main aside";
}

.ds-main,
main {
    grid-area: main;
}
.ds-header,
header {
    grid-area: header;
}
.ds-footer,
footer {
    grid-area: footer;
}
.ds-aside,
aside {
    grid-area: aside;
}
.ds-nav,
nav {
    grid-area: nav;
}

/* Grid: Prebuild grids */



/* 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-grey-light);
    --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-shadow: var(--ds-shadow-tiny);
    --ds-button-shadow-hover: var(--ds-shadow-small);
    --ds-button-radius: 3px;
}
: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: inherit;
    color: inherit;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 calc(0.5 * var(--ds-line-height));
    vertical-align: middle;
    font-size: calc(0.875 * var(--ds-font-size));
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    background-color: var(--ds-button-bg-color);
    outline: 1px solid var(--ds-button-border-color);
    border: 0;
    white-space: nowrap;
    box-shadow: var(--ds-button-shadow);
    border-radius: var(--ds-button-radius);
}
.ds-button::-moz-focus-inner {
    border: 0;
}
.ds-button:hover,
.ds-button:focus {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--ds-button-shadow-hover);
}
a.ds-button,
a.ds-button:hover,
a.ds-button:active,
a.ds-button:visited {
    color: inherit;
}
.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-50);
    --ds-badge-font-color: var(--ds-white);
    --ds-badge-label-color: var(--ds-primary);
    --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: var(--ds-box-shadow);
}
.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-card-image {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    color: white;
    text-shadow: 0 0 4px #000;
    box-shadow: var(--ds-shadow-medium);
    aspect-ratio: 2/3;
}
.ds-card-image .ds-card-content {
    position: relative;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%)
}
.ds-card-image .ds-card-footer {
    background: rgba(0,0,0,0.7);
    min-height: 0;
}
.ds-card-bottom {
    position: absolute;
    bottom: 0px;
}

/* 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: calc( 2 * var(--ds-box-radius));
    --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; 
    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: 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: Tabs */

:root {
    --ds-tabs-spacing: var(--ds-button-spacing);
    --ds-tabs-bg-color: var(--ds-background);
    --ds-tabs-color: var(--ds-color);
    --ds-tabs-default-bg-color: transparent;
    --ds-tabs-primary-bg-color: var(--ds-primary);
    --ds-tabs-primary-color: var(--ds-primary-contrast);
    --ds-tabs-line-height: var(--ds-button-line-height);
    --ds-tabs-border-color: var(--ds-primary);
    --ds-tabs-direction: row;
    --ds-tabs-border-alignment: top;
    --ds-tabs-radius: var(--ds-button-radius);
}

.ds-tabs {
    display: flex;
    flex-direction: var(--ds-tabs-direction);
    margin: 0;
    list-style: none;
    padding: 0 0 1px 0;
    flex-wrap: wrap;
    justify-content: center;
}
.ds-tabs li {
    margin: 0;
    padding: 0;
}
:root .ds-tabs-tab {
    line-height: var(--ds-tabs-line-height);
    min-height: var(--ds-tabs-line-height);
}

.ds-tabs-tab {
    display: block;
    margin: 0;
    overflow: visible;
    box-sizing: border-box;
    margin: 0 var(--ds-tabs-spacing) 0 0;
    padding: 0 calc(0.5 * var(--ds-tabs-line-height));
    vertical-align: middle;
    font-size: calc(0.875 * var(--ds-font-size));
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    border: 0;
    white-space: nowrap;
    border-radius: var(--ds-tabs-radius) var(--ds-tabs-radius) 0 0;
}
.ds-tabs-tab:hover,
.ds-tabs-tab:focus {
    cursor: pointer;
    text-decoration: none;
}
a.ds-tabs-tab,
a.ds-tabs-tab:hover,
a.ds-tabs-tab:active,
a.ds-tabs-tab:visited {
    color: inherit;
}
.ds-tabs-support {
    --ds-tabs-border-color: var(--ds-support);
}
.ds-tabs-primary {
    --ds-tabs-border-color: var(--ds-primary);
}
.ds-tabs-primary .ds-tabs-tab,
.ds-tabs a.ds-tabs-primary, .ds-tabs a.ds-tabs-primary:hover,
.ds-tabs a.ds-tabs-primary:active, .ds-tabs a.ds-tabs-primary:visited {
    background-color: var(--ds-primary);
    color: var(--ds-primary-contrast);
    border-color: var(--ds-tabs-border-color);
}
.ds-tabs-support .ds-tabs-tab,
.ds-tabs a.ds-tabs-support, .ds-tabs a.ds-tabs-support:hover,
.ds-tabs a.ds-tabs-support:active, .ds-tabs a.ds-tabs-support:visited {
    background-color: var(--ds-support);
    color: var(--ds-support-contrast);
    border-color: var(--ds-tabs-border-color);
}
.ds-tabs-border li {
    background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-tabs-border-color) 0px, var(--ds-tabs-border-color) 1px, transparent 1px);
    padding-bottom: 1px;
}
.ds-tabs-border .ds-tabs-tab-selected {
    border: 1px solid var(--ds-tabs-border-color);
    border-bottom: 0;
    position: relative;
    top: 1px;
    line-height: calc(var(--ds-tabs-line-height) - 1px);
    background: var(--ds-tabs-bg-color);
}
.ds-tabs-border .ds-tabs-tab-selected {
    position: relative;
    top: 1px;
    line-height: calc(var(--ds-tabs-line-height) - 1px);
}
.ds-tabs-border-bottom li {
    background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-tabs-border-color) 0px, var(--ds-tabs-border-color) 1px, transparent 1px);
}
.ds-tabs-border-bottom .ds-tabs-tab-selected {
    background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-tabs-border-color) 0px, var(--ds-tabs-border-color) 2px, transparent 2px);
}
.ds-tabs-border-color li {
    background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-grey-20) 0px, var(--ds-grey-20) 1px, transparent 1px);
}
.ds-tabs-border-color .ds-tabs-tab-selected {
    background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-tabs-border-color) 0px, var(--ds-tabs-border-color) 1px, transparent 1px);
}

.ds-tabs-vertical {
    --ds-tabs-direction: column;
    --ds-tabs-border-alignment: right;
    flex-direction: var(--ds-tabs-direction);
}
.ds-tabs-vertical .ds-tabs-tab {
    text-align: left;
}
.ds-tabs-vertical.ds-tabs-border-color li {
    background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-grey-20) 0px, var(--ds-grey-20) 1px, transparent 1px);
}
.ds-tabs-vertical.ds-tabs-border-color .ds-tabs-tab-selected {
    background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-tabs-border-color) 0px, var(--ds-tabs-border-color) 1px, transparent 1px);
}


/* Components: Looping tabs
 */

.dsc-loopingtabs {
    display: grid;
    grid-template-areas: "tabs" "text" "media";
}
.dsc-loopingtabs-panel {
    display: contents;
}
.dsc-loopingtabs-tabs {
    grid-area: tabs;
}
.dsc-loopingtabs-text {
    grid-area: text;
    text-align: center;
}
.dsc-loopingtabs-media {
    grid-area: media;
    margin: 0 var(--ds-spacing);
}
.dsc-loopingtabs-panel {
    display: none;
}
.dsc-loopingtabs-panel.dsc-loopingtabs-selected {
    display: contents;
}
@media only screen and (min-width: 500px) {
    .dsc-loopingtabs {
        grid-template-areas: 
            "media text" 
            "media tabs";
        --ds-tabs-direction: column;
        --ds-tabs-border-alignment: right;
    }
    .ds-tabs-tab {
        text-align: left;
    }
    .dsc-loopingtabs-text {
        text-align: left;
        margin: 0;
    }
}

/* 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: 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;
}

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

/* Utility: Background Image
 */

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


/* Utility: Color classes
 */

 .ds-bg-primary {
    background: var(--ds-primary);
    color: var(--ds-primary-contrast);
    --ds-contrast: var(--ds-primary-contrast);
}
.ds-bg-primary-gradient {
    background: var(--ds-primary-gradient);
    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-support-gradient {
    background: var(--ds-support-gradient);
    color: var(--ds-support-contrast);
    --ds-contrast: var(--ds-support-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);
}
.ds-color-primary {
    color: var(--ds-primary);
}
.ds-color-support {
    color: var(--ds-support);
}

/* 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-light-background {
    color: var(--ds-color);
    text-shadow: 0 0 3px white;
}