@muze-nl/simplystore 0.4.0 → 0.4.1

package/www/assets/css/style.css

@@ -1,2296 +0,0 @@
-
-
-/* Simply Branding
-: Brands */
-
-
-
-/* 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: var(--ds-simplycode);
-    --ds-primary-dark: var(--ds-simplycode-dark);
-    --ds-primary-contrast: var(--ds-white);
-    --ds-primary-light: var(--ds-simplycode-light);
-    --ds-primary-gradient: var(--ds-simplycode-gradient);
-    --ds-primary-gradient-bump: var(--ds-simplycode-gradient-bump);
-    --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: Available colors
- */
-
-:root {
-    --ds-simplyview: #0083CA;
-    --ds-simplyview-dark: #0083CA;
-    --ds-simplyview-contrast: var(--ds-white);
-    --ds-simplyview-light: #04A7FF;
-    --ds-simplyview-bump: #039FF4;
-    --ds-simplyview-gradient: linear-gradient( 180deg, var(--ds-simplyview-light), var(--ds-simplyview-dark) );
-    --ds-simplyview-gradient-bump: linear-gradient( 180deg, var(--ds-simplyview-bump), var(--ds-simplyview-light) 95%, var(--ds-simplyview-dark) 100%);
-
-    --ds-simplyedit: #F26522;
-    --ds-simplyedit-light: #F47B3E;
-    --ds-simplyedit-dark: #D74B14;
-    --ds-simplyedit-bump: #EA5922;
-    --ds-simplyedit-contrast: var(--ds-white);
-    --ds-simplyedit-gradient: linear-gradient( 180deg, var(--ds-simplyedit-light), var(--ds-simplyedit-dark) );
-    --ds-simplyedit-gradient-bump: linear-gradient( 180deg, var(--ds-simplyedit-bump), var(--ds-simplyedit-light) 95%, var(--ds-simplyedit-dark) 100%);
-
-    --ds-simplycode: #ae47ff;
-    --ds-simplycode-light:#c880ff;
-    --ds-simplycode-dark:#8d00f8;
-    --ds-simplycode-bump:#b65cfc;
-    --ds-simplycode-contrast: var(--ds-white);
-    --ds-simplycode-gradient: linear-gradient( 180deg, var(--ds-simplycode-light), var(--ds-simplycode-dark) );
-    --ds-simplycode-gradient-bump: linear-gradient( 180deg, var(--ds-simplycode-bump), var(--ds-simplycode-light) 95%, var(--ds-simplycode-dark) 100%);
-
-    --ds-simplypresent: #00d455;
-    --ds-simplypresent-light:#02da58;;
-    --ds-simplypresent-dark:#01973d;
-    --ds-simplypresent-bump:#00b865;
-    --ds-simplypresent-contrast: var(--ds-white);
-    --ds-simplypresent-gradient: linear-gradient( 180deg, var(--ds-simplypresent-light), var(--ds-simplypresent-dark) );
-    --ds-simplypresent-gradient-bump: linear-gradient( 180deg, var(--ds-simplypresent-bump), var(--ds-simplypresent-light) 95%, var(--ds-simplypresent-dark) 100%);
-
-    --ds-simplystore: #ffcc00;
-    --ds-simplystore-light: #ffe680;
-    --ds-simplystore-dark: #e4a802;
-    --ds-simplystore-bump: #ffbb00;
-    --ds-simplystore-contrast: var(--ds-black);
-    --ds-simplystore-gradient: linear-gradient( 180deg, var(--ds-simplystore-light), var(--ds-simplystore-dark));
-    --ds-simplystore-gradient-bump: linear-gradient( 180deg, var(--ds-simplystore-bump), var(--ds-simplystore-light) 95%, var(--ds-simplystore-dark) 100%);
-}
-.ds-bg-simplyview {
-    background-color: var(--ds-simplyview);
-    color: var(--ds-simplyview-contrast);
-}
-.ds-bg-simplyview-gradient {
-    color: var(--ds-simplyview-contrast);
-    background: var(--ds-simplyview-gradient);
-}
-.ds-bg-simplyview-gradient-bump {
-    color: var(--ds-simplyview-contrast);
-    background: var(--ds-simplyview-gradient-bump);
-}
-
-.ds-bg-simplyedit {
-    background-color: var(--ds-simplyedit);
-    color: var(--ds-simplyedit-contrast);
-}
-.ds-bg-simplyedit-gradient {
-    color: var(--ds-simplyview-contrast);
-    background: var(--ds-simplyedit-gradient);
-}
-.ds-bg-simplyedit-gradient-bump {
-    color: var(--ds-simplyview-contrast);
-    background: var(--ds-simplyedit-gradient-bump);
-}
-
-.ds-bg-simplycode {
-    background-color: var(--ds-simplycode);
-    color: var(--ds-simplycode-contrast);
-}
-.ds-bg-simplycode-gradient {
-    color: var(--ds-simplycode-contrast);
-    background: var(--ds-simplycode-gradient);
-}
-.ds-bg-simplycode-gradient-bump {
-    color: var(--ds-simplycode-contrast);
-    background: var(--ds-simplycode-gradient-bump);
-}
-
-.ds-bg-simplypresent {
-    background-color: var(--ds-simplypresent);
-    color: var(--ds-simplypresent-contrast);
-}
-.ds-bg-simplypresent-gradient {
-    color: var(--ds-simplypresent-contrast);
-    background: var(--ds-simplypresent-gradient);
-}
-.ds-bg-simplypresent-gradient-bump {
-    color: var(--ds-simplypresent-contrast);
-    background: var(--ds-simplypresent-gradient-bump);
-}
-
-.ds-bg-simplystore {
-    background-color: var(--ds-simplystore);
-    color: var(--ds-simplystore-contrast);
-}
-.ds-bg-simplystore-gradient {
-    color: var(--ds-simplystore-contrast);
-    background: var(--ds-simplystore-gradient);
-}
-.ds-bg-simplystore-gradient-bump {
-    color: var(--ds-simplystore-contrast);
-    background: var(--ds-simplystore-gradient-bump);
-}
-
-/* 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: 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));
-}
-
-/* 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 {
-    position: relative;
-}
-.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;
-}
-.ds-button-icon {
-    height: 60px;
-    border-top: 1px solid transparent;
-    border-bottom: 2px solid transparent;
-    transition: background 0.2s ease;
-    font-size: 11px;
-    letter-spacing: 0;
-    font-family: arial, helvetica, sans-serif;
-    white-space: nowrap;
-    user-select: none;
-    vertical-align: top;
-    min-width: 50px;
-    text-align: center;
-    cursor: pointer;
-    padding: 0 4px;
-    text-transform: none;
-    background: transparent;
-    outline: none;
-    box-shadow: none;
-    border-radius: 0;
-    color: #333;
-}
-
-.ds-button-icon:hover,
-.ds-button-icon:active {
-    border-bottom: 2px solid var(--ds-primary);
-    box-shadow: none;
-}
-.ds-button-icon .ds-icon {
-    height: 26px;
-    font-size: 26px;
-    padding: 0 4px;
-    display: block;
-    margin: 6px auto -14px;
-    position: relative;
-}
-.ds-button-icon.ds-selected {
-    border-top-color: var(--ds-grey-40);
-    background-color: var(--ds-grey-light);
-    border-left: 1px solid var(--ds-grey-40);
-    border-right: 1px solid var(--ds-white);
-}
-.ds-toolbar {
-    position: absolute;
-    top: 0;
-    border-top: 1px solid var(--ds-primary);
-    background: linear-gradient(180deg, var(--ds-white) 0, var(--ds-white) 95%, var(--ds-grey-40) 100%);
-    white-space: nowrap;
-    min-width: 100%;
-    min-height: 60px;
-    display: flex;
-}
-.ds-toolbar .ds-button {
-    margin: 0;
-}
-.ds-toolbar-title {
-    padding: 0 10px;
-    font-size: 16px;
-    width: auto;
-    font-family: 'Varela Round', sans-serif;
-    text-transform: none;
-    background: var(--ds-primary-gradient-bump);
-    color: var(--ds-primary-contrast);
-    border: 0;
-    height: 60px;
-    cursor: default;
-    border-radius: 0;
-    box-shadow: 0;
-    outline: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-.ds-toolbar  .ds-toolbar-title {
-    margin-top: 0;
-}
-.ds-toolbar-spacer {
-    border-left: 1px solid #ccc;
-    height: 60px;
-    position: absolute;
-    display: inline-block;
-}
-.ds-button-expands:not(.ds-selected)::after {
-    content: "";
-    display: block;
-    position: absolute;
-    bottom: 6px;
-    left: 50%;
-    margin-left: -3px;
-    width: 0;
-    border-top: 3px solid #888;
-    border-bottom: 0;
-    border-left: 3px solid transparent;
-    border-right: 3px solid transparent;
-}
-.ds-toolbar .ds-push-right {
-    margin-left: auto;
-}
-
-/* Forms: Nightmode */
-
-.ds-toolbar-title img {
-    height: 40px;
-}
-.ds-nightmode {
-    background-color: var(--ds-grey-80);
-    color: var(--ds-white);
-}
-.ds-nightmode a:link,
-.ds-nightmode a:visited,
-.ds-nightmode a.ds-link-hover,
-.ds-nightmode a:hover,
-.ds-nightmode a.ds-link-active,
-.ds-nightmode a:active {
-    color: var(--ds-primary-light);
-}
-
-.ds-nightmode .ds-toolbar {
-    background: linear-gradient(180deg, var(--ds-grey-90) 0, var(--ds-grey-80) 95%, var(--ds-black) 100%);
-    color: var(--ds-white);
-}
-.ds-nightmode .ds-button-icon {
-    color: var(--ds-white);
-}
-.ds-nightmode .ds-button-icon.ds-selected {
-    background-color: var(--ds-grey-80);
-    border-left-color: var(--ds-black);
-    border-top-color: var(--ds-black);
-    border-right-color: var(--ds-grey-60);
-}
-.ds-nightmode .ds-button[disabled] {
-    background-color: transparent;
-    color: var(--ds-grey-60);
-}
-
-/* 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-background-image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index: -1;
-}
-
-/* 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: var(--ds-white);
-    --ds-dropdown-color: var(--ds-black);
-    --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);
-    color: var(--ds-dropdown-color);
-    display: none;
-    position: absolute;
-    left: 0;
-    box-shadow: var(--ds-shadow-medium);
-    border-radius: var(--ds-box-radius);
-    z-index: 101;
-    text-align: left;
-}
-.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;
-}
-
-/* SimplyCode: Home */
-
-header {
-    position: sticky;
-    top: 0;
-    z-index: 100;
-}
-.ds-toolbar .simply-title {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 0 20px;
-}
-.ds-toolbar .simply-title img {
-    height: 30px;
-}
-header .ds-toolbar {
-    border-top-width: 5px;
-}
-main {
-    margin-top: 75px;
-    margin-bottom: 75px;
-    padding: 0 var(--ds-spacing);
-}
-@media screen and (max-width: 720px) {
-    :root {
-        --ds-spacing: calc(0.5 * var(--ds-line-height));
-    }
-}
-a.simply-component,
-a.simply-component * {
-    text-decoration: none;
-    color: white;
-}
-a.simply-component:hover,
-a.simply-component:active {
-    background-color: var(--ds-grey-70);
-}
-.simply-component {
-    background-color: var(--ds-grey-90);
-}
-.simply-components {
-    --ds-grid-min-colwidth: 10rem;
-    --ds-grid-spacing-row: calc(0.5 * var(--ds-spacing));
-    --ds-grid-spacing-column: calc(0.5 * var(--ds-spacing));
-    font-size: small;
-    line-height: 1.6em;
-    margin-bottom: calc(0.5 * var(--ds-spacing));
-}
-.simply-component {
-    padding: calc(0.5 * var(--ds-spacing));
-}
-.simply-component > :first-child {
-    margin-top: 0;
-}
-.simply-component > :last-child {
-    margin-bottom: 0;
-}
-.simply-component > .ds-button .ds-icon {
-    margin-bottom: -10px;
-}
-input.simply-input-small {
-    width: 7em;
-}
-.ds-toolbar input[type="text"] {
-    margin-right:0;
-    margin-bottom: 0;
-    margin-top: 10px;
-    font-size: small;
-    line-height: 1.2em;
-    height: 35px;
-}
-.ds-nightmode {
-    --ds-input-border: var(--ds-grey-70);
-}
-.simply-component {
-    flex: 1 1 0;
-}
-.simply-component .ds-button-icon {
-    margin: 0;
-}
-.simply-component .ds-button-icon:hover {
-    border-bottom: 0;
-}
-
-
-/* SimplyCode: Add Component
- */
-
-form .ds-button {
-    background-color: var(--ds-grey-80);
-}
-
-/* SimplyCode: Edit Component
- */
-
-.CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:0 0}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:0 0}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-type,.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta{color:#555}.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error{color:red}.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:0;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none;outline:0}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:0 0}
-.cm-s-base16-dark.CodeMirror{background:#151515;color:#e0e0e0}.cm-s-base16-dark div.CodeMirror-selected{background:#303030}.cm-s-base16-dark .CodeMirror-line::selection,.cm-s-base16-dark .CodeMirror-line>span::selection,.cm-s-base16-dark .CodeMirror-line>span>span::selection{background:rgba(48,48,48,.99)}.cm-s-base16-dark .CodeMirror-line::-moz-selection,.cm-s-base16-dark .CodeMirror-line>span::-moz-selection,.cm-s-base16-dark .CodeMirror-line>span>span::-moz-selection{background:rgba(48,48,48,.99)}.cm-s-base16-dark .CodeMirror-gutters{background:#151515;border-right:0}.cm-s-base16-dark .CodeMirror-guttermarker{color:#ac4142}.cm-s-base16-dark .CodeMirror-guttermarker-subtle{color:#505050}.cm-s-base16-dark .CodeMirror-linenumber{color:#505050}.cm-s-base16-dark .CodeMirror-cursor{border-left:1px solid #b0b0b0}.cm-s-base16-dark.cm-fat-cursor .CodeMirror-cursor{background-color:#8e8d8875!important}.cm-s-base16-dark .cm-animate-fat-cursor{background-color:#8e8d8875!important}.cm-s-base16-dark span.cm-comment{color:#8f5536}.cm-s-base16-dark span.cm-atom{color:#aa759f}.cm-s-base16-dark span.cm-number{color:#aa759f}.cm-s-base16-dark span.cm-attribute,.cm-s-base16-dark span.cm-property{color:#90a959}.cm-s-base16-dark span.cm-keyword{color:#ac4142}.cm-s-base16-dark span.cm-string{color:#f4bf75}.cm-s-base16-dark span.cm-variable{color:#90a959}.cm-s-base16-dark span.cm-variable-2{color:#6a9fb5}.cm-s-base16-dark span.cm-def{color:#d28445}.cm-s-base16-dark span.cm-bracket{color:#e0e0e0}.cm-s-base16-dark span.cm-tag{color:#ac4142}.cm-s-base16-dark span.cm-link{color:#aa759f}.cm-s-base16-dark span.cm-error{background:#ac4142;color:#b0b0b0}.cm-s-base16-dark .CodeMirror-activeline-background{background:#202020}.cm-s-base16-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}
-      .sb-html-valid,
-      .sb-html-invalid {
-        padding: 4px 10px;
-        background-color: #D2E0E6;
-        color: #2B81AF;
-      }
-      .sb-html-valid {
-        border-top: 5px solid #C6E746; /* pass color from qunit */
-        border-bottom-left-radius: 8px;
-        border-bottom-right-radius: 8px;
-        margin-bottom: 10px;
-      }
-      .sb-html-invalid {
-        border-top: 5px solid #EE5757; /* fail color from qunit */
-      }
-      .sb-html-messages:not(.simply-empty) {
-        padding: 4px 10px;
-        border-bottom-left-radius: 8px;
-        border-bottom-right-radius: 8px;
-        margin-bottom: 10px;
-        background-color: #D2E0E6;
-        color: #2B81AF;
-      }
-      .sb-html-message:not(:last-child) {
-        border-bottom: 1px solid #2B81AF;
-      }
-      .sb-html-message [data-simply-field=firstLine]:not(:empty):after {
-        content: " - ";
-      }
-      .sb-editor-code {
-        font-size: 13px;
-        border-radius: 8px;
-        overflow: hidden;
-      }
-
-      .simply-component-single {
-          display: inline-block;
-          padding-top: 0;
-          padding-bottom: 0;
-      }
-
-    :root .ds-button-inline {
-        margin: 0;
-        line-height: var(--ds-line-height);
-        min-height: unset;
-        min-width: unset;
-        height: unset;
-        font-size: inherit;
-        color: var(--ds-grey-40);
-    }
-    .ds-button-inline:hover {
-        border-bottom: 0px;
-        color: var(--ds-white);
-    }
-    .ds-button-inline .ds-icon {
-        display: inline-block;
-        margin: 0;
-        padding: 0;
-        font-size: inherit;
-        height: 1em;
-        width: 1em;
-    }
-
-/* SimplyCode: Search Components
- */
-
-
-
-/* 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: -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-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;
-}