/* Badge container */
.badge-container {
    min-width: min-content;
    
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--padding-padding-small);

    /* Alignment */
    &.badge-container--left {
        justify-content: flex-start;
    }

    &.badge-container--center {
        justify-content: center;
    }

    &.badge-container--right {
        justify-content: flex-end;
    }
    
    /* Gap size */
    &.badge-container--gap-medium {
        gap: var(--padding-padding-medium);
    }

    &.badge-container--gap-large {
        gap: var(--padding-padding-large);
    }
}

/* Badge */
.badge {
    --badge-icon-color: var(--badge-color, var(--text-body-body-base));
    
    width: fit-content;
    max-width: max-content;

    display: grid;
    grid-template-areas: "text";
    grid-template-columns: auto;

    align-items: center;
    justify-content: center;

    padding: var(--padding-padding-small) var(--padding-padding-large);

    gap: var(--padding-padding-medium);

    font: var(--general-badge-basic-font);
    text-wrap: nowrap;

    color: var(--badge-color, var(--text-body-body-base));
    background-color: var(--badge-background-color, unset);

    border-radius: var(--corner-radius-components-outside);

    &:has(svg) {
        grid-template-areas: "icon text";
        grid-template-columns: 1rem auto;

        padding-left: var(--padding-padding-medium);
        padding-right: var(--padding-padding-large);
    }

    &:has(svg) {
        &.badge--icon-right {
            grid-template-areas: "text icon";
            grid-template-columns: auto 1rem;
        
            padding-left: var(--padding-padding-large);
            padding-right: var(--padding-padding-medium);
        }
    }

    &:has(button) {
        grid-template-areas: "text button";
        grid-template-columns: auto 1rem;
    }

    &:has(button):has(svg) {
        grid-template-areas: "icon text button";
        grid-template-columns: 1rem auto 1rem;

        &.badge--icon-right {
            grid-template-areas: "text icon button";
        }
    }

    &.badge--no-side-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    &.badge--variant-half {
        background-color: var(--badge-background-color, var(--form-form-15));
    }

    &.badge--variant-full {
        background-color: var(--badge-background-color, var(--form-form-darker));
        color: var(--badge-color, var(--text-white-white-base));
    }

    &.badge--variant-outline {
        padding: var(--padding-padding-extra-small) var(--padding-padding-large);
        gap: var(--padding-padding-small);

        font: var(--container-small-label-font);

        background-color: var(--badge-background-color, var(--background-background-level-2));
        border-width: 1px;
        border-style: solid;
        border-color: var(--badge-outline-color, var(--text-body-body-base));

        &:has(svg) {
            padding-left: var(--padding-padding-medium);
            padding-right: var(--padding-padding-large);
        }

        &.badge--icon-right {
            padding-left: var(--padding-padding-large);
            padding-right: var(--padding-padding-medium);
        }
    }

    &.badge--icon-only,
    &.badge--icon-only:has(svg) {
        grid-template-areas: "icon";
        grid-template-columns: 1rem;

        padding: var(--padding-padding-small);
        gap: 0;

        font-size: 0;
        line-height: 0;

        > :not(svg) {
            display: none;
        }

        svg {
            justify-self: center;
        }
    }

    /* Font variants */
    &.badge--font-small-label {
        font: var(--container-small-label-font);
    }

    &.badge--font-medium-label {
        font: var(--container-medium-label-font);
    }

    &.badge--font-medium-body_text {
        font: var(--container-medium-body_text-font);
    }

    /* Text transforms */
    &.badge--text-uppercase {
        text-transform: uppercase;
    }

    /* Behavior */
    &.badge--stretch {
        width: 100%;
        max-width: unset;
    }

    svg {
        grid-area: icon;
        width: 1rem;
        height: 1rem;
        aspect-ratio: 1 / 1;

        color: var(--badge-icon-color);
    }

    button {
        grid-area: button;
        width: 1rem;
        height: 1rem;
        aspect-ratio: 1 / 1;

        padding: 0;
        padding-block: 0;

        color: black;
        background: none;
        
        border: none;
        outline: none;

        cursor: pointer;

        &:after {
            content: '×';
            font-size: 1rem;
            line-height: 1rem;
        }
    }
}

/* Mobile - 320 - 767 px */

/* Basic buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--padding-padding-large);

    min-height: 2.125rem;
    padding: var(--padding-padding-medium) var(--padding-padding-xxl);

    font: var(--general-cta-small_default-font);
    text-transform: var(--general-cta-small_default-text-transform);
    text-decoration: none;
    
    white-space: nowrap;
    text-wrap: nowrap;

    border: none;
    border-radius: var(--corner-radius-components-outside);
    outline: 0;

    background: transparent;
    color: var(--text-for-primary-button-primary-button-base);

    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 120ms ease;
    
    cursor: pointer;
    user-select: none;

    &:hover {
        text-decoration: none;
    }

    &:focus,
    &:focus-visible {
        outline: none;
        box-shadow: var(--shadow-behind-widget);
    }

    &:disabled {
        cursor: not-allowed;
    }

    svg {
        width: 1.25rem;
        height: 1.25rem;

        color: var(--icons-invert-invert);
    }

    /* Primary button */
    &.button--primary {
        height: 2.125rem;

        color: var(--text-for-primary-button-primary-button-base);
        background: var(--buttons-primary-primary-background);

        &:hover {
            background: var(--buttons-primary-primary-backround-hover);
            
            box-shadow: var(--shadow-behind-widget);
        }

        &:disabled {
            background: var(--buttons-primary-primary-background-disabled);
            color: var(--buttons-primary-primary-text-disabled);

            box-shadow: none;

            svg {
                color: var(--buttons-primary-primary-text-disabled);
            }
        }

        /* Other size variants */
        &.button--size-large {
            min-height: 3.375rem;

            padding: var(--padding-padding-medium) var(--padding-padding-xxl);

            font: var(--general-cta-medium_default-font);
        }

        &.button--icon-only {
            aspect-ratio: 1 / 1;
            padding: var(--padding-padding-medium);
        }
    }

    /* Secondary button */
    &.button--secondary {
        color: var(--buttons-secondary-secondary-text-base);

        height: 2.125rem;

        &:hover {
            background: var(--background-background-level-3);

            box-shadow: var(--shadow-behind-widget);
        }

        &:disabled {
            color: var(--buttons-secondary-secondary-text-disabled) !important;
            background-color: unset !important;

            box-shadow: none;

            svg {
                color: var(--buttons-secondary-secondary-text-disabled);
            }
        }

        svg {
            width: 1.25rem;
            height: 1.25rem;

            color: var(--text-body-body-50);
        }

        /* Other variants */
        &.button--variant-positive {
            color: var(--buttons-secondary-secondary-text-base);

            &:hover {
                color: var(--text-for-primary-button-primary-button-base);
                background-color: var(--system-positive-positive-80);
            }
        }

        &.button--variant-negative {
            color: var(--buttons-secondary-secondary-text-base);

            &:hover {
                color: var(--text-for-primary-button-primary-button-base);
                background-color: var(--system-negative-negative-80);
            }
        }

        /* Other size variants */
        &.button--size-large {
            min-height: 3.375rem;

            padding: var(--padding-padding-large) var(--padding-padding-xxl);

            font: var(--general-cta-medium_default-font);
        }
    }
}

/* Filter buttons */
.filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    height: fit-content;

    padding: var(--padding-padding-small);

    font: var(--general-cta-small_default-font);
    font-size: 0;
    text-transform: uppercase;
    text-decoration: none;
    
    white-space: nowrap;
    text-wrap: nowrap;

    background: transparent;
    color: var(--buttons-secondary-secondary-text-base);

    border: none;
    border-radius: var(--corner-radius-components-outside);
    outline: 0;

    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 120ms ease;

    cursor: pointer;

    &:hover {
        background-color: var(--buttons-primary-primary-backround-hover);
        box-shadow: var(--shadow-behind-widget);

        color: var(--icons-invert-invert);
    }

    &:disabled {
        color: var(--buttons-secondary-secondary-text-disabled);
        background-color: unset;

        box-shadow: none;
        
        pointer-events: none; 
        cursor: not-allowed;

        svg {
            color: var(--buttons-secondary-secondary-text-disabled);
        }
    }

    &.filter-button--active {
        color: var(--icons-blue-shades-blue-base);

        &:hover {
            color: var(--icons-invert-invert);
            background-color: var(--buttons-primary-primary-backround-hover);
        }

        &:disabled {
            color: var(--buttons-secondary-secondary-text-disabled);
            background-color: unset;

            box-shadow: none;
            
            pointer-events: none; 
            cursor: not-allowed;

            svg {
                color: var(--buttons-secondary-secondary-text-disabled);
            }
        }
    }
}

/* Icon buttons */
.icon-button {    
    width: 1.75rem;
    height: 1.75rem;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    padding: var(--padding-padding-extra-small);

    color: var(--icons-blue-shades-blue-base);
    background-color: var(--background-background-level-2);

    border: none;
    outline: none;
    border-radius: var(--corner-radius-components-outside);
    
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 120ms ease;
    
    cursor: pointer;
    user-select: none;

    &:hover {
        background-color: var(--background-background-level-3);

        box-shadow: var(--shadow-behind-widget);
    }

    &:disabled {
        color: var(--buttons-secondary-secondary-text-disabled) !important;

        pointer-events: none; 
        cursor: not-allowed;
    }

    svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Other icon color variants */
    &.icon-button--icon-color-grey {
        color: var(--form-form-base);
    }

    /* Other size variants */
    &.icon-button--size-large {
        width: 2rem;
        height: 2rem;

        padding: var(--padding-padding-small);

        svg {
            width: 1.5rem;
            height: 1.5rem;
        }
    }
}

/* Notification buttons */
.notification-button {    
    width: 1.75rem;
    height: 1.75rem;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    padding: var(--padding-padding-small);

    color: var(--buttons-secondary-secondary-text-base);
    background-color: transparent;

    border: none;
    outline: none;
    border-radius: var(--corner-radius-components-outside);
    
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 120ms ease;
    
    cursor: pointer;
    user-select: none;

    &:hover {
        color: var(--icons-invert-invert);
        background-color: var(--system-negative-negative-80);

        box-shadow: var(--shadow-behind-widget);
    }

    &:disabled {
        color: var(--buttons-secondary-secondary-text-disabled) !important;

        pointer-events: none; 
        cursor: not-allowed;
    }

    svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Header button */
.header-button {
    width: 1.75rem;
    height: 1.75rem;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    padding: var(--padding-padding-extra-small);

    background-color: transparent;
    color: var(--icons-blue-shades-blue-base);

    border: none;
    outline: none;
    border-radius: var(--corner-radius-components-outside);
    
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 120ms ease;
    
    cursor: pointer;
    user-select: none;

    &:disabled {
        color: var(--buttons-secondary-secondary-text-disabled) !important;

        pointer-events: none; 
        cursor: not-allowed;
    }

    svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

@media (hover: hover) and (pointer: fine) {
    .header-button {
        &:hover {
            color: var(--icons-invert-invert);
            background-color: var(--system-negative-negative-80);

            box-shadow: var(--shadow-behind-widget);
        }

        /* Other color variants */
        &.header-button--color-yellow {
            &:hover {
                color: var(--icons-blue-shades-blue-base);
                background-color: var(--brand-yellow-shades-sazka-yellow-base);
            }
        }
    }
}

/* Bottom bar button */
.bottom-bar-button {
    width: 4rem;
    height: 3.25rem;

    display: inline-grid;
    grid-template-areas: "icon"
                         "label";
    grid-template-rows: min-content auto;
    align-items: center;
    justify-items: center;
    justify-content: center;
    
    padding: var(--padding-padding-none);

    color: var(--buttons-secondary-secondary-text-base);
    background-color: transparent;

    border: none;
    outline: none;

    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 120ms ease;
    
    cursor: pointer;
    user-select: none;

    &:hover {
        color: var(--brand-blue-shades-sazka-blue-base) !important;

        span {
            color: var(--brand-blue-shades-sazka-blue-base) !important;
        }
    }

    &:disabled {
        color: var(--buttons-secondary-secondary-text-disabled);

        pointer-events: none; 
        cursor: not-allowed;

        span {
            color: var(--buttons-secondary-secondary-text-disabled);
        }
    }

    &:visited {
        color: var(--buttons-secondary-secondary-text-base);

        span {
            color: var(--buttons-secondary-secondary-text-base);
        }
    }

    svg {
        width: 2.25rem;
        height: 2.25rem;

        padding: var(--padding-padding-medium);

        grid-area: icon;
    }

    span {
        grid-area: label;
        
        font: var(--container-small-label-font);
        
        color: var(--buttons-secondary-secondary-text-base);
        
        white-space: nowrap;
    }

    &.bottom-bar-button--current {
        color: var(--brand-blue-shades-sazka-blue-base) !important;

        span {
            color: var(--brand-blue-shades-sazka-blue-base) !important;
        }
    }

    /* No label in the DOM: collapse the reserved label row automatically. */
    &:not(:has(span)) {
        height: 3rem;

        grid-template-areas: "icon";
        grid-template-rows: 1fr;

        padding: var(--padding-padding-small) var(--padding-padding-none);
    }
}

/* Segmented button */
.segmented-button {
    height: 2rem;
    
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    
    padding: var(--padding-padding-small);
    gap: var(--padding-padding-small);

    border-radius: var(--corner-radius-components-outside);
    background-color: var(--toggle-toggle-background);

    .segmented-button__item {
        width: 100%;
        min-width: min-content;
        height: 1.5rem;

        display: inline-flex;
        justify-content: center;
        align-items: center;

        padding: var(--padding-padding-small) var(--padding-padding-large);

        color: var(--text-body-body-base);
        background-color: transparent;

        text-decoration: none;

        border: none;
        border-radius: var(--corner-radius-components-inside);
        outline: none;

        font: var(--general-cta-small_default-font);
        text-transform: var(--general-cta-small_default-text-transform);

        white-space: nowrap;
        text-wrap: nowrap;

        cursor: pointer;
        user-select: none;

        &:hover {
            font: var(--general-cta-small_active-font);
            text-transform: var(--general-cta-small_active-text-transform);
        }
        
        &.segmented-button__item--active {
            font: var(--general-cta-small_active-font);
            text-transform: var(--general-cta-small_active-text-transform);

            background-color: var(--toggle-toggle-selected);

            box-shadow: var(--shadow-for-toggle);
        }
    }

    &.segmented-button--stretch {
        width: 100%;
    }
}

/* Favorite button */
.favorite-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--form-form-15);
    background-color: transparent;

    outline: none;
    border: none;
    
    padding: 0;
    margin: 0;

    cursor: pointer;

    > svg {
        width: 1rem;
        height: 1rem;
        aspect-ratio: 1 / 1;
    }

    &:hover {
        color: var(--system-negative-negative-60);
    }

    &.favorite-button--size-big {
        color: var(--brand-yellow-shades-sazka-yellow-secondary);

        &:hover {
            color: var(--system-negative-negative-60);
        }

        > svg {
            width: 1.5rem;
            height: 1.5rem;
        }
    }

    &.favorite-button--active {
        color: var(--system-negative-negative-80);

        &:hover {
            color: var(--system-negative-negative-base);
        }
    }
}

/* Logout button */
.logout-button {
    width: 1.75rem;
    height: 1.75rem;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    padding: var(--padding-padding-extra-small);

    color: var(--icons-blue-shades-blue-base);
    background-color: var(--brand-yellow-shades-sazka-yellow-base);

    border: none;
    outline: none;
    border-radius: var(--corner-radius-components-outside);
    
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 120ms ease;
    
    cursor: pointer;
    user-select: none;

    &:hover {
        color: var(--icons-invert-invert);
        background-color: var(--system-negative-negative-80);
    }

    svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    /* Icon buttons */
    .filter-button {
        padding: var(--padding-padding-small) var(--padding-padding-xl);
        gap: var(--padding-padding-large);

        color: var(--buttons-secondary-secondary-text-base);

        font-size: unset;

        &:hover {
            color: var(--buttons-secondary-secondary-text-base);
            background-color: var(--background-background-level-3);
        }

        &.filter-button--active {
            color: var(--buttons-secondary-secondary-text-base);
            background-color: var(--background-background-level-3);
            
            &:hover {
                background-color: var(--background-background-level-3);
                color: var(--buttons-secondary-secondary-text-base);

                svg {
                    color: var(--icons-blue-shades-blue-base);
                }
            }

            svg {
                color: var(--icons-blue-shades-blue-base);
            }
        }
    }

    /* Segmented button */
    .segmented-button {
        height: 1.75rem;

        .segmented-button__item {
            height: 1.25rem;

            padding: var(--padding-padding-extra-small) var(--padding-padding-large);
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

/* Basic Colors */
:root {
    --black-black: #28292A;
    --black-black-95: #313435;
    --black-black-93: #3B3E3F;
    --black-black-90: #3C3F40;
    --black-black-85: #45484A;
    --black-black-50-opacity: #00000080;
    --black-black-50: #949494;
    --black-black-20-opacity: #00000033;
    --black-black-20: #D4D4D4;
    --black-black-10: #EAEAEA;
    --black-black-5: #F4F4F4;
  
    --grey-grey-dark: #575757;
    --grey-white: #ffffff;
    --grey-grey: #7a7a7a;
    --grey-grey-45: #c3c3c3;
    --grey-grey-30: #d2d2d2;
    --grey-grey-20: #dddddd;
    --grey-grey-15: #e5e3e3;
    --grey-grey-10: #ebebeb;
    --grey-grey-5: #f4f6f7;
    --grey-dark-slate-grey: #2a4a4d;
    --grey-dark-slate-grey-90: #315659;
    --grey-space-grey: #3d4b4d;
    --grey-space-grey-light: #5c7173;
    --grey-nickel-grey-dark: #4d4d4d;
    --grey-nickel-grey: #737373;
    --grey-nickel-grey-light: #8c8c8c;

    --blue-blue-darker: #1a3e4d;
    --blue-blue-dark: #1d4757;
    --blue-blue-dark-80: #4d6d79;
    --blue-blue-dark-disabled: #bcc8cd;
    --blue-blue: #215163;
    --blue-blue-disabled: #bfd4dc;
    --blue-blue-50: #94b6c4;
    --blue-blue-30: #bbcdd4;
    --blue-blue-10: #e9edee;
    --blue-light-blue: #0081b4;
    --blue-light-blue-60: #66b3d2;
    --blue-light-blue-50: #80c0d9;
    --blue-light-blue-10: #d7ecf4;
    --blue-light-blue-7: #edf6fa;
    --blue-light-blue-3: #f7fbfc;
    --blue-crystal-blue: #64aeb4;

    --turquoise-turquoise-darker: #007d88;
    --turquoise-turquoise-dark: #099aa6;
    --turquoise-turquoise: #27e2cc;
    --turquoise-turquoise-80: #33b4bf;
    --turquoise-turquoise-60: #66c7cf;
    --turquoise-turquoise-30: #b2e2e6;
    --turquoise-turquoise-20: #ccecef;
    --turquoise-turquoise-10: #e6f6f7;
    --turquoise-turquoise-5: #f2fafb;

    --green-green-dark: #447d0c;
    --green-green-dark-90: #5a9a19;
    --green-green: #59a310;
    --green-green-80: #7ab540;
    --green-green-60: #9bc870;
    --green-green-20: #deedcf;
    --green-green-10: #eef6e7;
    --green-green-5: #f7faf3;

    --orange-orange: #bc7407;
    --orange-orange-90: #c17d15;
    --orange-orange-80: #c99039;
    --orange-orange-60: #d7ac6a;
    --orange-orange-20: #f2e3cd;
    --orange-orange-10: #f8f1e6;
    --orange-orange-5: #fcf8f3;

    --red-red-dark: #cc403d;
    --red-red: #cc2f2c;
    --red-red-90: #c44745;
    --red-red-80: #d65956;
    --red-red-60: #e08280;
    --red-red-20: #f5d5d5;
    --red-red-10: #faeaea;
    --red-red-5: #fcf5f4;

    --violet-violet-dark: #524dcc;
    --violet-violet-light: #d3d6f6;
    --violet-lavender-dark: #3e3d4d;
    --violet-lavender: #5e5c73;
    --violet-lavender-light: #7270a9;

    --yellow-yellow-darker: #d8b70d;
    --yellow-yellow-dark: #ffd600;
    --yellow-yellow-dark-disabled: #f7efc4;
    --yellow-yellow: #fce428;
    --yellow-yellow-80: #fde953;

    --white-white: #ffffff;
    --white-white-60: #ffffff99;

    --brown-brown-darker: #473a25;
    --brown-brown-dark: #4d3f2a;
    --brown-brown: #594931;
    --brown-brown-light: #735e3f;

    --coffee-coffee-darker: #472525;
    --coffee-coffee-dark: #4d2b2a;
    --coffee-coffee: #593231;
    --coffee-coffee-light: #73403f;
  
    --olive-olive-darker: #364725;
    --olive-olive-dark: #3b4d2a;
    --olive-olive: #455931;
    --olive-olive-light: #59733f;
}

/* Design System Colors */
:root {
    --brand-yellow-shades-sazka-yellow-base: light-dark(var(--turquoise-turquoise), var(--blue-blue-darker));
    --brand-yellow-shades-sazka-yellow-secondary: light-dark(var(--turquoise-turquoise-dark), var(--blue-blue-darker));
    --brand-yellow-shades-sazka-yellow-secondary-disabled: light-dark(var(--yellow-yellow-dark-disabled), var(--blue-blue-darker));

    --brand-blue-shades-sazka-blue-base: light-dark(var(--blue-blue-dark), var(--turquoise-turquoise));
    --brand-blue-shades-sazka-blue-secondary: light-dark(var(--blue-blue), var(--blue-light-blue-10));
    --brand-blue-shades-sazka-blue-secondary-50: light-dark(var(--blue-blue-50), var(--blue-blue-50));

    --brand-logo-sazka-yellow-secondary-disabled: light-dark(var(--yellow-yellow-dark-disabled), var(--blue-blue-darker));

    --brand-logo-color-symbol-background: light-dark(var(--turquoise-turquoise), var(--grey-white));
    --brand-logo-color-symbol: light-dark(var(--blue-blue-dark), var(--blue-blue-dark));
    --brand-logo-color-name: light-dark(var(--blue-blue-dark), var(--grey-white));

    --brand-logo-symbol-negative-symbol-background: light-dark(var(--grey-white), var(--grey-white));
    --brand-logo-symbol-negative-symbol: light-dark(var(--blue-blue-dark), var(--blue-blue-dark));
    --brand-logo-symbol-negative-name: light-dark(var(--blue-blue-dark), var(--grey-white));

    --system-positive-positive-base: light-dark(var(--green-green), var(--green-green-dark-90));
    --system-positive-positive-80: light-dark(var(--green-green-80), var(--green-green-80));
    --system-positive-positive-60: light-dark(var(--green-green-60), var(--green-green-60));
    --system-positive-positive-20: light-dark(var(--green-green-20), var(--green-green-20));
    --system-positive-positive-10: light-dark(var(--green-green-10), var(--green-green-10));
    --system-positive-positive-5: light-dark(var(--green-green-5), var(--green-green-5));
    
    --system-warning-warning-base: light-dark(var(--orange-orange), var(--orange-orange-90));
    --system-warning-warning-80: light-dark(var(--orange-orange-80), var(--orange-orange-80));
    --system-warning-warning-60: light-dark(var(--orange-orange-60), var(--orange-orange-60));
    --system-warning-warning-20: light-dark(var(--orange-orange-20), var(--orange-orange-20));
    --system-warning-warning-10: light-dark(var(--orange-orange-10), var(--orange-orange-10));
    --system-warning-warning-5: light-dark(var(--orange-orange-5), var(--orange-orange-5));

    --system-negative-negative-base: light-dark(var(--red-red), var(--red-red-90));
    --system-negative-negative-80: light-dark(var(--red-red-80), var(--red-red-80));
    --system-negative-negative-60: light-dark(var(--red-red-60), var(--red-red-60));
    --system-negative-negative-20: light-dark(var(--red-red-20), var(--red-red-20));
    --system-negative-negative-10: light-dark(var(--red-red-10), var(--red-red-10));
    --system-negative-negative-5: light-dark(var(--red-red-5), var(--red-red-5));

    --system-info-info-base: light-dark(var(--turquoise-turquoise), var(--turquoise-turquoise-dark));
    --system-info-info-80: light-dark(var(--turquoise-turquoise-80), var(--turquoise-turquoise-80));
    --system-info-info-60: light-dark(var(--turquoise-turquoise-60), var(--turquoise-turquoise-60));
    --system-info-info-30: light-dark(var(--turquoise-turquoise-30), var(--turquoise-turquoise-30));
    --system-info-info-20: light-dark(var(--turquoise-turquoise-20), var(--turquoise-turquoise-20));
    --system-info-info-10: light-dark(var(--turquoise-turquoise-10), var(--turquoise-turquoise-10));
    --system-info-info-5: light-dark(var(--turquoise-turquoise-5), var(--turquoise-turquoise-5));

    --outages-positive-outage-positive-text: light-dark(var(--green-green), var(--white-white));
    --outages-positive-outage-positive-fill: light-dark(var(--green-green-20), var(--olive-olive-dark));
    --outages-positive-outage-positive-hover: light-dark(var(--green-green-20), var(--olive-olive));
    --outages-positive-outage-positive-stroke: light-dark(var(--green-green-20), var(--olive-olive-light));

    --outages-warning-outage-warning-text: light-dark(var(--orange-orange), var(--white-white));
    --outages-warning-outage-warning-fill: light-dark(var(--orange-orange-20), var(--brown-brown-dark));
    --outages-warning-outage-warning-hover: light-dark(var(--orange-orange-20), var(--brown-brown));
    --outages-warning-outage-warning-stroke: light-dark(var(--orange-orange-20), var(--brown-brown-light));

    --outages-negative-outage-negative-text: light-dark(var(--red-red), var(--white-white));
    --outages-negative-outage-negative-fill: light-dark(var(--red-red-20), var(--coffee-coffee-dark));
    --outages-negative-outage-negative-hover: light-dark(var(--red-red-20), var(--coffee-coffee));
    --outages-negative-outage-negative-stroke: light-dark(var(--red-red-20), var(--coffee-coffee-light));

    --outages-info-outage-info-text: light-dark(var(--turquoise-turquoise), var(--white-white));
    --outages-info-outage-info-fill: light-dark(var(--turquoise-turquoise-20), var(--grey-dark-slate-grey));
    --outages-info-outage-info-hover: light-dark(var(--turquoise-turquoise-20), var(--grey-dark-slate-grey-90));
    --outages-info-outage-info-stroke: light-dark(var(--turquoise-turquoise-20), var(--turquoise-turquoise-dark));

    --form-form-base: light-dark(var(--grey-grey), var(--grey-grey));
    --form-form-45: light-dark(var(--grey-grey-45), var(--grey-grey-45));
    --form-form-15: light-dark(var(--grey-grey-10), var(--grey-grey-dark));
    --form-form-darker: light-dark(var(--black-black), var(--black-black));
    --form-form-lighter: light-dark(var(--blue-blue-30), var(--blue-blue-30));
    --form-form-accent: light-dark(var(--blue-blue-dark), var(--blue-light-blue-60));

    --calendar-events-production-fill: light-dark(var(--violet-violet-light), var(--violet-lavender-light));
    --calendar-events-production-fill-week: light-dark(var(--violet-violet-light), var(--violet-lavender-dark));
    --calendar-events-production-fill-hover: light-dark(var(--violet-violet-light), var(--violet-lavender-dark));
    --calendar-events-production-outline: light-dark(var(--violet-violet-light), var(--violet-lavender));
    --calendar-events-uat-fill: light-dark(var(--turquoise-turquoise-30), var(--blue-crystal-blue));
    --calendar-events-uat-fill-week: light-dark(var(--turquoise-turquoise-30), var(--grey-space-grey));
    --calendar-events-uat-fill-hover: light-dark(var(--turquoise-turquoise-30), var(--grey-space-grey));
    --calendar-events-uat-outline: light-dark(var(--turquoise-turquoise-30), var(--grey-space-grey-light));
    --calendar-events-qa-fill: light-dark(var(--grey-grey-30), var(--grey-nickel-grey-light));
    --calendar-events-qa-fill-week: light-dark(var(--grey-grey-30), var(--grey-nickel-grey-dark));
    --calendar-events-qa-fill-hover: light-dark(var(--grey-grey-30), var(--grey-nickel-grey-dark));
    --calendar-events-qa-outline: light-dark(var(--grey-grey-30), var(--grey-nickel-grey));

    --calendar-form-45: light-dark(var(--grey-grey-45), var(--grey-grey-30));
    --calendar-form-15: light-dark(var(--grey-grey-10), var(--grey-grey));

    --calendar-statuses-release: light-dark(var(--blue-blue), var(--blue-light-blue-7));
    --calendar-statuses-maintenance: light-dark(var(--red-red), var(--red-red-80));
    --calendar-statuses-not-started: light-dark(var(--black-black), var(--white-white));
    --calendar-statuses-not-started-fill: light-dark(var(--black-black-10), var(--grey-grey-dark));
    --calendar-statuses-in-progress: light-dark(var(--blue-blue), var(--white-white));
    --calendar-statuses-in-progress-fill: light-dark(var(--blue-light-blue-10), var(--blue-blue-dark-80));
    --calendar-statuses-downtime: light-dark(var(--red-red), var(--red-red-80));
    --calendar-statuses-downtime-fill: light-dark(var(--red-red-10), var(--red-red-20));
    --calendar-statuses-completed: light-dark(var(--green-green), var(--white-white));
    --calendar-statuses-completed-fill: light-dark(var(--green-green-10), var(--green-green-dark));
    --calendar-statuses-active: light-dark(var(--white-white), var(--white-white));
    --calendar-statuses-active-fill: light-dark(var(--green-green), var(--green-green-dark));
    --calendar-statuses-warning: light-dark(var(--white-white), var(--white-white));
    --calendar-statuses-warning-fill: light-dark(var(--orange-orange), var(--orange-orange));
    --calendar-statuses-error: light-dark(var(--white-white), var(--white-white));
    --calendar-statuses-error-fill: light-dark(var(--red-red), var(--red-red-dark));
  
    --calendar-labels-grey: light-dark(var(--black-black), var(--white-white));
    --calendar-labels-grey-fill: light-dark(var(--grey-grey-5), var(--black-black-90));
    --calendar-labels-grey-stroke: light-dark(var(--black-black-50), var(--grey-grey));
    --calendar-labels-yellow: light-dark(var(--white-white), var(--white-white));
    --calendar-labels-yellow-fill: light-dark(var(--yellow-yellow-dark), var(--yellow-yellow-darker));
    --calendar-labels-turquoise: light-dark(var(--white-white), var(--white-white));
    --calendar-labels-turquoise-fill: light-dark(var(--turquoise-turquoise), var(--turquoise-turquoise-darker));
    --calendar-labels-green: light-dark(var(--white-white), var(--white-white));
    --calendar-labels-green-fill: light-dark(var(--green-green), var(--green-green-dark));
    --calendar-labels-light-green: light-dark(var(--green-green), var(--white-white));
    --calendar-labels-light-green-fill: light-dark(var(--green-green-5), var(--olive-olive-darker));
    --calendar-labels-light-green-outline: light-dark(var(--green-green-80), var(--green-green-dark));
    --calendar-labels-red: light-dark(var(--white-white), var(--white-white));
    --calendar-labels-red-fill: light-dark(var(--red-red), var(--red-red-dark));
    --calendar-labels-light-red: light-dark(var(--red-red), var(--white-white));
    --calendar-labels-light-red-fill: light-dark(var(--red-red-5), var(--coffee-coffee-darker));
    --calendar-labels-light-red-outline: light-dark(var(--red-red-80), var(--red-red-dark));
    --calendar-labels-light-orange: light-dark(var(--orange-orange), var(--white-white));
    --calendar-labels-light-orange-fill: light-dark(var(--orange-orange-5), var(--brown-brown-darker));
    --calendar-labels-light-orange-outline: light-dark(var(--orange-orange-80), var(--orange-orange));

    --text-body-body-base: light-dark(var(--black-black), var(--white-white));
    --text-body-body-90: light-dark(var(--black-black-90), var(--white-white-60));
    --text-body-body-50: light-dark(var(--black-black-50), var(--white-white-60));
    --text-body-body-20: light-dark(var(--black-black-20), var(--black-black-20));
    --text-body-body-10: light-dark(var(--black-black-10), var(--black-black-10));
    --text-body-body-5: light-dark(var(--black-black-5), var(--black-black-5));

    --text-headline-headline-base: light-dark(var(--blue-blue-dark), var(--white-white));
    --text-headline-headline-80: light-dark(var(--blue-blue-dark-80), var(--white-white-60));
    --text-headline-headline-10: light-dark(var(--blue-blue-10), var(--blue-blue-10));

    --text-white-white-base: light-dark(var(--white-white), var(--white-white));
    --text-white-white-60: light-dark(var(--white-white-60), var(--black-black-90));

    --text-for-primary-button-primary-button-base: light-dark(var(--white-white), var(--white-white));

    --background-background: light-dark(var(--grey-grey-5), var(--black-black));
    --background-background-level-2: light-dark(var(--white-white), var(--black-black-95));
    --background-background-level-3: light-dark(var(--white-white), var(--black-black-93));
    --background-hover-background: light-dark(var(--white-white), var(--black-black-85));
    --background-overlay-background: light-dark(var(--black-black-20-opacity), var(--black-black-50-opacity));

    --icons-blue-shades-blue-base: light-dark(var(--blue-blue-dark), var(--white-white));
    --icons-blue-shades-blue-80: light-dark(var(--blue-blue-dark-80), var(--white-white-60));
    --icons-blue-shades-blue-secondary: light-dark(var(--blue-blue), var(--yellow-yellow));
    --icons-blue-shades-blue-secondary-50: light-dark(var(--blue-blue-50), var(--blue-blue-50));

    --icons-yellow-shades-yellow-base: light-dark(var(--yellow-yellow), var(--blue-blue-dark));
    --icons-yellow-shades-yellow-80: light-dark(var(--yellow-yellow-80), var(--blue-blue-dark-80));

    --icons-invert-invert: light-dark(var(--white-white), var(--white-white));

    --buttons-primary-primary-background: light-dark(var(--blue-blue-dark), var(--blue-blue));
    --buttons-primary-primary-backround-hover: light-dark(var(--blue-blue), var(--blue-blue-dark));
    --buttons-primary-primary-background-disabled: light-dark(var(--grey-grey-5), var(--black-black-93));
    --buttons-primary-primary-text: light-dark(var(--white-white), var(--white-white));
    --buttons-primary-primary-text-disabled: light-dark(var(--grey-grey-30), var(--grey-grey-dark));

    --buttons-secondary-secondary-text-base: light-dark(var(--grey-grey-dark), var(--white-white));
    --buttons-secondary-secondary-text-disabled: light-dark(var(--grey-grey-20), var(--grey-grey-dark));
    --buttons-secondary-interface-20: light-dark(var(--grey-grey-20), var(--grey-grey-20));

    --buttons-link-link-base: light-dark(var(--blue-blue-dark), var(--violet-violet-light));

    --buttons-blue-button-blue-button-base: light-dark(var(--blue-light-blue), var(--blue-light-blue));
    --buttons-blue-button-blue-button-60: light-dark(var(--blue-light-blue-60), var(--blue-light-blue-60));
    --buttons-blue-button-blue-button-50: light-dark(var(--blue-light-blue-50), var(--blue-light-blue-50));
    --buttons-blue-button-blue-button-10: light-dark(var(--blue-light-blue-10), var(--blue-light-blue-10));
    --buttons-blue-button-blue-button-7: light-dark(var(--blue-light-blue-7), var(--blue-light-blue-7));

    --buttons-white-white-base: light-dark(var(--white-white), var(--white-white));
    --buttons-white-white-60: light-dark(var(--white-white-60), var(--white-white-60));

    --toggle-toggle-background: light-dark(var(--grey-grey-10), var(--background-background));
    --toggle-toggle-selected: light-dark(var(--background-background-level-3), var(--background-background-level-3));
    
    --shadows-drop-shadow-large: light-dark(#8d9eb026, none);
    --shadows-shadow-behind-widgets: light-dark(var(--black-black-20-opacity), none);
    --shadows-shadow-behind-smileys: light-dark(#fff03b, none);
    --shadows-shadow-for-toggle: light-dark(var(--black-black-20-opacity), none);
    --shadows-shadow-for-buttons: light-dark(#7090b033, none);
}

:root {
    color-scheme: light dark;

    &[data-color-scheme="light"] {
        color-scheme: light;
    }

    &[data-color-scheme="dark"] {
        color-scheme: dark;
    }

    &[data-color-scheme="light-dark"] {
        color-scheme: light-dark;
    }
}

/* Mobile - 320 - 767 px */
.container {
    display: grid;
    align-self: stretch;

    row-gap: var(--padding-padding-large);

    &.container--padding-xxl {
        row-gap: var(--padding-padding-xxl);
    }
}

.container-vertical {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    column-gap: var(--padding-padding-large);
    row-gap: var(--padding-padding-small);

    &.container-vertical--padding-xxl {
        column-gap: var(--padding-padding-xxl);
        row-gap: var(--padding-padding-xl);
    }
}

/* Mobile - 768 - 960 px */
@media (min-width: 768px) {
}

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        padding: var(--padding-padding-large) var(--padding-padding-xxl);
        column-gap: var(--padding-padding-xxxl);
    }
}

/* Laptop & tablet - 1280 - 1680 px */
@media (min-width: 1280px) {
}

/* Desktop - 1681 - 2200 px */
@media (min-width: 1681px) {
}

/* Desktop - 2201 px and above */
@media (min-width: 2201px) {
}

/* Mobile - 320 - 767 px */
.content-layout {
    height: stretch;

    display: grid;
    align-content: start;

    padding: var(--padding-padding-xxl);
    row-gap: var(--padding-padding-xxl);
    column-gap: var(--padding-padding-xxxl);

    background: var(--background-background-level-2);

    border: none;
    border-radius: var(--corner-radius-widgets);

    box-shadow: var(--drop-shadow-large);

    /* Sidebars are hidden on mobile */
    &.content-layout--sidebar-left,
    &.content-layout--sidebar-right {
        grid-template-areas: "title" 
                             "content";
    }
    
    .content-layout__sidebar-left {
        display: none;
        grid-template-areas: "sidebar-left";
    }

    .content-layout__sidebar-right {
        display: none;
        grid-template-areas: "sidebar-right";
    }

    .content-layout__title {
        grid-area: title;
    }

    .content-layout__content {
        grid-area: content;
    }
}

/* Mobile - 768 - 960 px */
@media (min-width: 768px) {
}

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .content-layout {
        border: 2px solid var(--form-form-15);

        &.content-layout--sidebar-left {            
            grid-template-areas: "title title"
                                 "sidebar-left content";
            grid-template-columns: auto 1fr;
            grid-template-rows: auto 1fr;
        }

        &.content-layout--sidebar-right {
            grid-template-areas: "title title"
                                 "content sidebar-right";
            grid-template-columns: 1fr auto;
        }

        .content-layout__sidebar-left {
            display: flex;
        }

        .content-layout__sidebar-right {
            display: flex;
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
@media (min-width: 1280px) {
}

/* Desktop - 1681 - 2200 px */
@media (min-width: 1681px) {
}

/* Desktop - 2201 px and above */
@media (min-width: 2201px) {
}

/* Mobile - 320 - 767 px */
.dashboard {
    display: flex;
    flex-direction: column;

    gap: var(--padding-padding-large);
}

#dashboard-status {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, calc(100% / 12)));
    grid-template-areas: "overall-status  overall-status  overall-status  overall-status  overall-status  overall-status  overall-status  overall-status  overall-status  overall-status  overall-status  overall-status"
                         "outages         outages         outages         outages         outages         outages         outages         outages         outages         outages         outages         outages"
                         "upcoming-events upcoming-events upcoming-events upcoming-events upcoming-events upcoming-events upcoming-events upcoming-events upcoming-events upcoming-events upcoming-events upcoming-events"
                         "service-desk    service-desk    service-desk    service-desk    service-desk    service-desk    service-desk    service-desk    service-desk    service-desk    service-desk    service-desk";

    #dashboard-status__overall-status {
        grid-area: overall-status;
    }

    #dashboard-status__outages {
        grid-area: outages;
    }

    #dashboard-status__upcoming-events {
        grid-area: upcoming-events;
    }

    #dashboard-status__service-desk {
        grid-area: service-desk;
        display: none;
    }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .dashboard {
        gap: var(--padding-padding-xxl);
    }

    #dashboard-status {
        grid-template-areas: "overall-status  overall-status  overall-status  overall-status  overall-status  overall-status  overall-status  upcoming-events upcoming-events upcoming-events upcoming-events upcoming-events"
                             "outages         outages         outages         outages         outages         outages         outages         upcoming-events upcoming-events upcoming-events upcoming-events upcoming-events"
                             "service-desk    service-desk    service-desk    service-desk    service-desk    service-desk    service-desk    upcoming-events upcoming-events upcoming-events upcoming-events upcoming-events";

        /* grid-template-rows: 13.625rem 19.75rem auto; */

        #dashboard-status__service-desk {
            grid-area: service-desk;
            display: unset;
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

/* 
  Utility classes for controlling display properties
  ===============
*/

.hidden {
    display: none !important;
}

/*
  Responsive display helpers
  ===============
   - display-only-on-XXXX → visible only on range                                      
   - display-not-on-XXXX  → hidden on range                                           
   - display-from-XXXX    → hidden below breakpoint (visible from this breakpoint up) 
   - display-until-XXXX   → hidden above breakpoint (visible until this breakpoint)   
*/

/* =========================================================
   MOBILE — 320–767 px
   ========================================================= */

/* Visible ONLY on mobile */
@media (max-width: 319px), (min-width: 768px) {
    .display-only-on-mobile { display: none !important; }
}

/* Hidden ON mobile */
@media (min-width: 320px) and (max-width: 767px) {
    .display-not-on-mobile { display: none !important; }
}

/* Visible FROM mobile upward → hide below 320 */
@media (max-width: 319px) {
    .display-from-mobile { display: none !important; }
}

/* Visible UNTIL mobile (<=767) → hide above 767 */
@media (min-width: 768px) {
    .display-until-mobile { display: none !important; }
}


/* =========================================================
   MOBILE-L — 768–960 px
   ========================================================= */

/* Visible ONLY on mobile-l */
@media (max-width: 767px), (min-width: 961px) {
    .display-only-on-mobile-l { display: none !important; }
}

/* Hidden ON mobile-l */
@media (min-width: 768px) and (max-width: 960px) {
    .display-not-on-mobile-l { display: none !important; }
}

/* Visible FROM mobile-l upward → hide below 768 */
@media (max-width: 767px) {
    .display-from-mobile-l { display: none !important; }
}

/* Visible UNTIL mobile-l (<=960) → hide above 960 */
@media (min-width: 961px) {
    .display-until-mobile-l { display: none !important; }
}


/* =========================================================
   LAPTOP — 961–1279 px
   ========================================================= */

/* Visible ONLY on laptop */
@media (max-width: 960px), (min-width: 1280px) {
    .display-only-on-laptop { display: none !important; }
}

/* Hidden ON laptop */
@media (min-width: 961px) and (max-width: 1279px) {
    .display-not-on-laptop { display: none !important; }
}

/* Visible FROM laptop upward → hide below 961 */
@media (max-width: 960px) {
    .display-from-laptop { display: none !important; }
}

/* Visible UNTIL laptop (<=1279) → hide above 1279 */
@media (min-width: 1280px) {
    .display-until-laptop { display: none !important; }
}


/* =========================================================
   LAPTOP-L — 1280–1680 px
   ========================================================= */

/* Visible ONLY on laptop-l */
@media (max-width: 1279px), (min-width: 1681px) {
    .display-only-on-laptop-l { display: none !important; }
}

/* Hidden ON laptop-l */
@media (min-width: 1280px) and (max-width: 1680px) {
    .display-not-on-laptop-l { display: none !important; }
}

/* Visible FROM laptop-l upward → hide below 1280 */
@media (max-width: 1279px) {
    .display-from-laptop-l { display: none !important; }
}

/* Visible UNTIL laptop-l (<=1680) → hide above 1680 */
@media (min-width: 1681px) {
    .display-until-laptop-l { display: none !important; }
}


/* =========================================================
   DESKTOP — 1681–2200 px
   ========================================================= */

/* Visible ONLY on desktop */
@media (max-width: 1680px), (min-width: 2201px) {
    .display-only-on-desktop { display: none !important; }
}

/* Hidden ON desktop */
@media (min-width: 1681px) and (max-width: 2200px) {
    .display-not-on-desktop { display: none !important; }
}

/* Visible FROM desktop upward → hide below 1681 */
@media (max-width: 1680px) {
    .display-from-desktop { display: none !important; }
}

/* Visible UNTIL desktop (<=2200) → hide above 2200 */
@media (min-width: 2201px) {
    .display-until-desktop { display: none !important; }
}


/* =========================================================
   DESKTOP-L — 2201+ px
   ========================================================= */

/* Visible ONLY on desktop-l */
@media (max-width: 2200px) {
    .display-only-on-desktop-l { display: none !important; }
}

/* Hidden ON desktop-l */
@media (min-width: 2201px) {
    .display-not-on-desktop-l { display: none !important; }
}

/* Visible FROM desktop-l upward → hide below 2201 */
@media (max-width: 2200px) {
    .display-from-desktop-l { display: none !important; }
}

/* Visible UNTIL desktop-l → hide above 2200 */
@media (min-width: 2201px) {
    .display-until-desktop-l { display: none !important; }
}

.dropdown {
    width: 100%;
    height: 2.5rem;

    display: flex;
    align-items: center;
    align-self: stretch;

    position: relative;
    padding: var(--padding-padding-large);

    background: var(--background-background);

    border: 1px solid var(--form-form-45);
    border-radius: var(--corner-radius-components-outside);

    gap: var(--padding-padding-large);
    min-width: 0;

    cursor: pointer;

    &:hover:not(:has(.dropdown__select:hover)) {
        background-color: var(--background-hover-background);
    }

    &:has(.dropdown__select:hover) {
        background-color: var(--background-background-level-3);
    }

    &:has(.dropdown__select:not(.hidden)) {
        background-color: var(--background-background);
        border-color: var(--form-form-accent);
        outline: none;
    }

    &:not(.dropdown--multiple) {
        .dropdown__value-container {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    &.dropdown--white {
        background-color: var(--background-background-level-3);
    }

    /* The sizer is a measuring-only element — never visible. */
    .dropdown__value-sizer {
        display: none;
    }

    &.dropdown--no-fill {
        min-width: min-content;
        width: auto;

        /* Field sized to the widest option: the sizer stacks every option in one
           grid cell, so the cell grows to the widest, and the visible value overlays it. */
        .dropdown__value {
            display: grid;

            > * {
                grid-area: 1 / 1;
            }

            .dropdown__value-container {
                justify-content: flex-start;
            }
        }

        .dropdown__value-sizer {
            display: grid;
            visibility: hidden;
            pointer-events: none;

            > * {
                grid-area: 1 / 1;
                white-space: nowrap;
            }
        }
    }

    &.dropdown--multiple {
        width: 100%;
        height: unset !important;
        .dropdown__value-container {
            display: flex;
            gap: 0.25rem;
            align-items: flex-start;
            flex-wrap: wrap;
        }
    }
}

.dropdown__input-container {
    display: flex;
    align-items: center;
    flex: 1 0 0;

    input {
        all: unset;
        height: 100%;
        width: 100%;
        min-width: 0;
    }
}

.dropdown__select {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: var(--padding-padding-large);

    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    overflow-y: auto;
    max-height: 15rem;
    border-radius: var(--corner-radius-components-outside);

    border: 1px solid var(--form-form-accent);
    box-shadow: var(--shadow-behind-widget);
    background-color: var(--background-background);

    &.hidden {
        display: none;
    }

    .dropdown__select__option {
        display: flex;
        padding: var(--padding-padding-large);
        align-items: center;
        gap: 0.5rem;
        align-self: stretch;

        cursor: pointer;

        &:hover {
            background-color: var(--background-hover-background);
        }

        &:first-child {
            padding-top: var(--padding-padding-xl);
        }

        &:last-child {
            padding-bottom: var(--padding-padding-xl);
        }

        &:not(:last-child) {
            border-bottom: 1px solid var(--form-form-15);
        }

        &.hidden {
            display: none;
        }

        &.dropdown__select__option--selected .dropdown__selected-icon {
            display: block;
            margin-left: auto;
            color: var(--icons-blue-shades-blue-base);
        }
    }
}

/* Selected-option marker: rendered in every option (and copied into the value
   container), visible only on the selected option inside the open list. */
.dropdown__selected-icon {
    display: none;
}

.dropdown-option {
    display: flex;
    
    gap: var(--padding-padding-large);

    .dropdown-option__text {  
        display: inline-flex;
        align-items: baseline;

        gap: var(--padding-padding-large);
        
        font: var(--container-container-medium-label-font);
    }

    .dropdown-option__note {
        color: var(--text-body-body-50);
    }
}

.filter-content {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    padding-top: var(--padding-padding-xxl);
    padding-bottom: var(--padding-padding-none);
    padding-left: var(--padding-padding-large);
    padding-right: var(--padding-padding-large);

    .filter-content__form {
        row-gap: var(--padding-padding-xxl);

        /* overflow-y: scroll; */
    }

    .filter-content__header {
        display: flex;
        flex-direction: column;
        
        padding: var(--padding-padding-none) var(--padding-padding-large);
        gap: var(--padding-padding-small);

        .filter-content__header__title {
            font: var(--container-medium-label_bold-font);
        }
        
        .filter-content__header__subtitle {
            font: var(--general-table-description-font);
            color: var(--text-body-body-50);
        }

        /* Section header with a master toggle on the right (service-detail filter) */
        &.filter-content__header--with-switch {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: var(--padding-padding-large);

            .filter-content__header__text {
                display: flex;
                flex-direction: column;
                gap: var(--padding-padding-small);
            }

            > .form__widget__simple {
                flex-shrink: 0;
            }
        }
    }

    .filter-content__item {
        display: flex;
        align-items: center;

        min-height: 3.5rem;

        padding: var(--padding-padding-small) var(--padding-padding-large);
        gap: var(--padding-padding-xxl);

        cursor: pointer;

        border-bottom: 1px solid var(--form-form-15);

        font: var(--container-medium-label-font);

        > label {
            width: 100%;

            cursor: pointer;
        }

        > svg {
            width: 1.5rem;
            height: 1.5rem;

            color: var(--icons-blue-shades-blue-base);
        }

        > .form__widget__simple {
            margin-left: auto;
        }

        &:last-child {
            border-bottom: none;
        }

        &:hover {
            background-color: var(--background-background-level-3);
            
            border-bottom: none;
            border-radius: var(--corner-radius-components-outside);
            
            box-shadow: var(--shadow-behind-widget);
        }

        &:has(+ &:hover) {
            border-bottom: none;
        }
    }

    .filter-content__section {
        display: flex;
        flex-direction: column;
        
        gap: var(--padding-padding-large);
    }

    .filter-content__menu {
        display: flex;
        flex-direction: column;

        padding: var(--padding-padding-none);
        margin: var(--padding-padding-none);

        list-style-type: none;
    }

    .filter-content__footer {
        position: sticky;
        bottom: 0;
        
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding: var(--padding-padding-xxl) var(--padding-padding-large);
        margin-top: auto;

        background-color: var(--background-background-level-2);
    }
}

/* Mobile - 320 - 767 px */
#flashes {
    position: fixed;
    top: 0rem;
    left: 0rem;
    right: 0rem;
    
    z-index: 1000;
    
    display: flex;
    flex-direction: column;

    gap: var(--padding-padding-large);

    padding: var(--padding-padding-xxxl);

    pointer-events: none;

    &:not(:has(*)) {
        display: none;
    }
}

.flash {
    --flash-border-color: var(--system-info-info-base);
    --flash-background-color: var(--outages-info-outage-info-fill);
    --flash-progress-color: var(--system-info-info-base);
    --icon: url(/build/images/information-variant-circle.9c621cee.svg);
    --icon-color: var(--system-info-info-base);

    --default-autoclose-timer: 60s;
    --timer-value: var(--autoclose-timer, var(--default-autoclose-timer));

    position: relative;

    pointer-events: auto;

    display: flex;
    gap: var(--padding-padding-xxl);
    
    padding: var(--padding-padding-xl) var(--padding-padding-xxl);
    
    border: 1px solid var(--flash-border-color);
    border-radius: var(--corner-radius-widgets);
    
    border-color: var(--flash-border-color);
    background-color: var(--flash-background-color);

    color: var(--color-text-primary-text);

    box-shadow: var(--drop-shadow);

    &.flash--success {
        --flash-border-color: var(--outages-positive-outage-positive-stroke);
        --flash-background-color: var(--outages-positive-outage-positive-fill);
        --flash-progress-color: var(--outages-positive-outage-positive-stroke);
        --icon: url(/build/images/check-circle.da0caa89.svg);
        --icon-color: var(--system-positive-positive-base);
    }

    &.flash--warning {
        --flash-border-color: var(--outages-warning-outage-warning-stroke);
        --flash-background-color: var(--outages-warning-outage-warning-fill);
        --flash-progress-color: var(--outages-warning-outage-warning-stroke);
        --icon: url(/build/images/alert.ecaa73ee.svg);
        --icon-color: var(--system-warning-warning-base);
    }

    &.flash--error {
        --flash-border-color: var(--outages-negative-outage-negative-stroke);
        --flash-background-color: var(--outages-negative-outage-negative-fill);
        --flash-progress-color: var(--outages-negative-outage-negative-stroke);
        --icon: url(/build/images/alert-box.49d45eb8.svg);
        --icon-color: var(--system-negative-negative-base);
    }

    &.flash--auto-close {
        animation: flashClose var(--timer-value) ease-out forwards;

        .flash__progress {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;

            min-height: 0.25rem;
            max-height: 0.25rem;

            border-radius: var(--corner-radius-components-outside);

            background-color: var(--flash-progress-color);

            animation: flashProgress var(--timer-value) ease-out forwards;
        }
    }

    &:not(&.flash--auto-close) {
        .flash__progress {
            display: none;
        }
    }

    .flash__icon {
        background-color: var(--icon-color);
        mask-image: var(--icon);
        mask-repeat: no-repeat;
        width: 2.75rem;
        height: 2.75rem;
        mask-size: 100% 100%;
        cursor: pointer;
    }

    .flash__content {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        flex: 1;

        .flash__title {
            font: var(--container-medium-label_bold-font);
        }

        .flash__message {
            font: var(--container-medium-label-font);
            padding-right: 2.25rem;
        }
    }

    .flash__close {
        display: flex;
        padding: var(--padding-padding-extra-small) 0;
        align-items: flex-start;

        .flash__close__button {
            width: 1.5rem;
            height: 1.5rem;
            
            --close-icon: url(/build/images/close.97d4c0a1.svg);
            
            background-color: var(--icons-blue-shades-blue-base);
            mask-image: var(--close-icon);
            mask-repeat: no-repeat;
            mask-size: 100% 100%;
            
            cursor: pointer;
        }  
    }
}

@keyframes flashProgress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes flashClose {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    #flashes {
        max-width: 50vw;

        padding: var(--padding-padding-xxl);
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

/* Forms */
.form {
    display: grid;
    grid-auto-flow: row;
    row-gap: 1rem;
    width: 100%;
}

.form__widget__compound {
    display: grid;
    grid-auto-flow: row;
    row-gap: 1rem;
    width: 100%;

    position: relative;
}

.form__widget__simple {
    width: 100%;

    &.form__widget__simple--text,
    &.form__widget__simple--email,
    &.form__widget__simple--date,
    &.form__widget__simple--datetime-local,
    &.form__widget__simple--number,
    &.form__widget__simple--file,
    &.form__widget__simple--password {
        --height: 2.5rem;
        --padding-left: 0.5rem;
        --padding-right: 0.5rem;
        --padding-top: 0.5rem;
        --padding-bottom: 0.5rem;

        --icon-size: 1.5rem;
        --erase-icon-size: 1.25rem;

        --placeholder-font: var(--container-large-body_text-font);
        --value-font: var(--container-large-body_text-font);

        --file-selector-button-font: var(--container-medium-body_text-font);
        --file-selector-button-color: var(--text-body-body-base);
        --file-selector-button-border-color: var(--form-form-45);

        &.form__widget__simple--size-medium {
            --height: 3rem;
            --padding-left: 0.75rem;
            --padding-right: 0.75rem;
            --padding-top: 0.75rem;
            --padding-bottom: 0.75rem;

            --icon-size: 1.75rem;
            --erase-icon-size: 1.5rem;

            --placeholder-font: var(--container-large-body_text-font);
            --value-font: var(--container-large-body_text-font);
        }

        height: var(--height);

        border-radius: var(--corner-radius-components-outside);
        border: 1px solid var(--form-form-45);
        background: var(--background-background);
        overflow: hidden;

        display: flex;
        column-gap: 0.5rem;
        min-width: 0;

        &:hover {
            background-color: var(--background-hover-background);;
            border-color: var(--form-form-45);

            --file-selector-button-border-color: var(--form-form-45);
        }

        &:has(input:focus) {
            background-color: var(--background-background);
            border-color: var(--form-form-accent);
            outline: none;
        }

        > input:first-child {
            padding-left: var(--padding-left);
            min-width: 0;
        }

        > input:last-child {
            padding-right: var(--padding-right);
        }

        > .form__widget__simple__icon:first-child {
            padding-left: var(--padding-left);
        }

        > .form__widget__simple__icon:last-child,
        > .form__widget__simple__erase-icon:last-child {
            padding-right: var(--padding-right);
        }

        input {
            height: 100%;
            padding-top: var(--padding-top);
            padding-right: 0;
            padding-bottom: var(--padding-bottom);
            padding-left: 0;

            flex-grow: 1;

            color: var(--text-body-body-base);
            background-color: inherit;
            border: none;
            outline: none;

            font: var(--value-font);

            &::placeholder {
                color: var(--form-form-45);

                font: var(--placeholder-font);
            }

            &::file-selector-button {
                font: var(--file-selector-button-font);
                color: var(--file-selector-button-color);

                border: 1px solid var(--file-selector-button-border-color);
                border-radius: var(--corner-radius-components-outside);

                cursor: pointer;
            }
        }

        .form__widget__simple__erase-icon {
            display: flex;

            &:not(.visible) {
                display: none;
            }

            &:hover svg {
                color: var(--text-body-body-50);
            }

            svg {
                width: var(--erase-icon-size);
                height: var(--erase-icon-size);;

                color: var(--text-body-body-50);

                align-self: center;

                cursor: pointer;
            }
        }

        .form__widget__simple__icon {
            display: flex;

            svg {
                width: var(--icon-size);
                height: var(--icon-size);

                color: var(--text-body-body-50);

                align-self: center;
            }

            &.form__widget__simple__icon--clickable {
                cursor: pointer;

                &:hover svg {
                    color: var(--text-body-body-50);
                }

                svg {
                    width: var(--erase-icon-size);
                    height: var(--erase-icon-size);;

                    color: var(--text-body-body-50);

                    align-self: center;

                    cursor: pointer;
                }
            }
        }
    }

    &.form__widget__simple--hidden {
        display: none;
    }

    &.form__widget__simple--checkbox {
        width: auto;

        display: flex;
        align-items: center;
        position: relative;

        --icon-width: 1.5rem;
        --icon-height: 1.5rem;

        input {
            position: absolute;
            opacity: 0;
            width: var(--icon-width);
            height: var(--icon-height);
            margin: 0;
            padding: 0;
            z-index: 2;
            appearance: none;
            cursor: pointer;
        }

        .form__checkbox__icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            position: relative;
            color: var(--form-form-45);

            > span {
                position: absolute;
                width: var(--icon-width);
                height: var(--icon-height);
                display: none;
                align-items: center;
                justify-content: center;

                &.form__checkbox__icon--unchecked {
                    display: flex;
                }
            }
        }

        /* Switch icons by actual input state */
        input {
            &:checked + .form__checkbox__icon {
                .form__checkbox__icon--unchecked {
                    display: none;
                }

                .form__checkbox__icon--checked {
                    display: flex;
                }
            }

            &:indeterminate + .form__checkbox__icon {
                .form__checkbox__icon--unchecked,
                .form__checkbox__icon--checked {
                    display: none;
                }

                .form__checkbox__icon--intermediate {
                    display: flex;
                }
            }
        }

        /* Styles for specific input states */
        input {
            &:hover,
            &:focus {
                + .form__checkbox__icon {
                    color: var(--buttons-secondary-secondary-text-base);
                }
            }

            &:checked,
            &:indeterminate {
                + .form__checkbox__icon {
                    color: var(--icons-blue-shades-blue-base);
                }

                &:hover,
                &:focus {
                    + .form__checkbox__icon {
                        color: var(--brand-blue-shades-sazka-blue-secondary);
                    }
                }
            }

            &:disabled {
                cursor: not-allowed;

                + .form__checkbox__icon {
                    color: var(--buttons-secondary-secondary-text-disabled);
                }

                &:checked {
                    + .form__checkbox__icon {
                        color: var(--buttons-primary-primary-background-disabled);
                    }
                }
            }
        }
    }

    &.form__widget__simple--switch {
        width: auto;
        justify-self: end;

        input {
            --switch-handle-size: 0.5625rem;
            --switch-bg-size: 1.875rem;
            --switch-handle-gap: 0.375rem;

            appearance: none;
            -webkit-appearance: none;
            box-sizing: content-box;
            display: inline-flex;
            padding-inline: 0 calc(var(--switch-bg-size) / 2);
            border: none;
            height: auto;
            width: auto;
            font-size: 0;
            margin: 0;
            border-radius: 100px;
            background: var(--form-form-base);
            transition: var(--switch-duration, .2s) cubic-bezier(.65, 0, .5, 1);;
            user-select: none;
            outline: none;
            /* filter: grayscale(1);  de-colorize the switch */
            cursor: pointer;

            &:checked {
                background: var(--system-positive-positive-base);
                padding-inline: calc(var(--switch-bg-size) / 2) 0;
                filter: none;
            }

            &::before {
                content: '';
                padding: calc(var(--switch-handle-size) / 2);
                margin: calc(var(--switch-handle-gap) / 2);
                background: var(--buttons-white-white-base);
                border-radius: 50%;
                transition: inherit;
            }
        }
    }

    &.form__widget__simple--radio {
        display: flex;
        align-items: center;

        width: auto;

        --icon-size: 1.5rem;

        input {
            appearance: none;
            -webkit-appearance: none;

            width: var(--icon-size);
            aspect-ratio: 1;

            margin: 0;

            background: var(--text-body-body-50);

            mask: url(/build/images/radiobox-blank.b31f8879.svg) no-repeat center / contain;
            mask-size: contain;
            -webkit-mask: url(/build/images/radiobox-blank.b31f8879.svg) no-repeat center / contain;
            -webkit-mask-size: contain;

            transition: background 0.3s;
            border: none;

            cursor: pointer;

            &:checked {
                background: var(--system-positive-positive-base);

                mask: url(/build/images/radiobox-marked.bb4c6e45.svg) no-repeat center / contain;
                mask-size: contain;
                -webkit-mask: url(/build/images/radiobox-marked.bb4c6e45.svg) no-repeat center / contain;
                -webkit-mask-size: contain;
            }
        }
    }

    &.form__widget__simple--textarea {
        display: flex;
        --padding-left: 0.5rem;
        --padding-right: 0.5rem;
        --padding-top: 0.5rem;
        --padding-bottom: 0.5rem;

        --placeholder-font: var(--container-large-body_text-font);
        --value-font: var(--container-large-body_text-font);

        border-radius: var(--corner-radius-components-outside);
        border: 1px solid var(--form-form-45);
        background: var(--background-background);

        &:hover {
            background-color: var(--background-hover-background);
            border-color: var(--form-form-45);

            --file-selector-button-border-color: var(--form-form-45);
        }

        .form__widget__simple__erase-icon {
            display: flex;

            &:not(.visible) {
                display: none;
            }

            &:hover svg {
                color: var(--text-body-body-50);
            }

            svg {
                margin-right: 0.5rem;

                color: var(--text-body-body-50);

                align-self: center;

                cursor: pointer;
            }
        }

        &:has(textarea:focus) {
            background-color: var(--background-background);
            border-color: var(--form-form-accent);
            outline: none;
        }

        > textarea:first-child {
            padding-left: var(--padding-left);
        }

        > textarea:last-child {
            padding-right: var(--padding-right);
        }

        > textarea {
            width: 100%;
            height: 100%;

            padding-top: var(--padding-top);
            padding-right: 0;
            padding-bottom: var(--padding-bottom);
            padding-left: 0;

            color: var(--text-body-body-base);
            background: unset;
            border: none;
            outline: none;

            font: var(--value-font);

            resize: vertical;

            /* &::-webkit-resizer {
                color: red;
            } */
        }
    }
}

.form__row {
    display: grid;
    grid-auto-flow: row;
    row-gap: var(--padding-padding-small);
    justify-items: start;

    /* When row contains compound widget */
    &:has(.form__widget__compound) {
        > .form__label {
            font: var(--container-medium-label_bold-font);
            color: var(--text-body-body-base);

            &.required {
                &::after {
                    content: unset;
                }
            }
        }

        > .form__widget__compound {
            border: 1px solid var(--form-form-45);
            border-radius: var(--corner-radius-components-outside);
            padding: 1rem;
        }
    }

    &:has(> .form__widget__simple--checkbox),
    &:has(> .form__widget__simple--radio) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.25rem;

        > .form__widget__simple {
            order: 1;

            /* Shrink to content so the label sits next to the checkbox instead
               of the widget filling the whole flex line. */
            width: auto;
        }

        > .form__label {
            order: 2;
            align-self: center;
            justify-self: left;
        }

        /* Help text drops onto its own line below the checkbox + label, instead
           of floating to the far left of the control. */
        > .form__help {
            order: 3;
            flex-basis: 100%;
            margin: 0.125rem 0 0;
        }

        > .form__errors {
            order: 4;
            flex-basis: 100%;
        }
    }

    &:has(> .form__widget__simple--switch) {
        grid-auto-flow: column;

        > .form__label {
            align-self: center;
        }
    }

    &:has(> .form__errors) {
        > .form__label {
            color: var(--text-body-body-base);
        }

        > .form__widget__simple {
            border-color: var(--system-negative-negative-80);

            &:hover {
                border-color: var(--system-negative-negative-80);
            }

            &:has(input:focus) {
                border-color: var(--system-negative-negative-80);
            }

            > input[type="text"],
            > input[type="email"] {
                color: var(--text-body-body-base);
            }
        }
    }
}

.form__field__value {
    display: flex;
    justify-content: center;

    font: var(--container-medium-body_text-font);
}

.form__label {
    font: var(--container-medium-label_bold-font);
    color: var(--text-body-body-base);
    margin: 0;

    display: flex;
    align-items: center;
    gap: 0.25rem;

    &.required {
        &::after {
            height: 0.8rem;
            font-size: 0.875rem;
            line-height: 0.8rem;
            content: '\2733';
            color: var(--system-negative-negative-base);
        }
    }
}

.form__errors {
    padding: 0;
    margin: 0;

    > li {
        list-style: none;

        display: flex;
        column-gap: var(--padding-padding-small);

        height: 1rem;

        font: var(--container-small-label-font);
        color: var(--system-negative-negative-80);

        > svg {
            width: 1rem;
            height: 1rem;

            align-self: center;
        }
    }
}

.form__help {
    display: flex;
    column-gap: var(--padding-padding-small);

    height: 1rem;

    font: var(--container-small-label-font);
    color: var(--text-body-body-base);

    > svg {
        width: 1rem;
        height: 1rem;

        align-self: center;

        color: var(--text-body-body-base);
    }
}

.ts-wrapper {
    width: 100%;
    min-height: unset !important;

    --control-border-color: var(--grey-grey-5);
    --dropdown-border-color: var(--color-neutrals-grey-dark-15);
    --background-color: var(--color-background-background);

    --chevron-color: var(--color-text-secondary-text);
    --chevron-image: url(/build/images/chevron-down.3e30ed84.svg);

    &:hover {
        --control-border-color: var(--color-neutrals-grey-dark-30);
        --chevron-color: var(--color-neutrals-grey-dark);
    }

    &.input-active {
        --control-border-color: var(--color-neutrals-grey-dark);
    }

    &.dropdown-active {
        --chevron-color: var(--color-neutrals-grey-dark);
        --chevron-image: url(/build/images/chevron-up.53dc70aa.svg);
    }

    &.has-items .ts-control .clear-button {
        opacity: 1 !important;
    }

    .ts-control {
        --height: 1.75rem;
        --padding-left: 0.5rem;
        --padding-right: 0.5rem;
        --padding-top: 0.25rem;
        --padding-bottom: 0.25rem;

        --placeholder-font: var(--font-table-text-r);
        --value-font: var(--font-table-text-sb);

        &.ts-control--size-medium {
            --height: 2.5rem;
            --padding-left: 0.75rem;
            --padding-right: 0.75rem;
            --padding-top: 0.62rem;
            --padding-bottom: 0.62rem;

            --placeholder-font: var(--font-body-body-r);
            --value-font: var(--font-body-body-sb);
        }

        height: var(--height);

        border-radius: var(--corner-radius-components-outside) !important;
        border: 1px solid var(--control-border-color) !important;
        background-color: var(--color-background-background) !important;
        background-image: unset !important;
        box-shadow: unset !important;

        padding-top: var(--padding-top);
        padding-right: var(--padding-right);
        padding-bottom: var(--padding-bottom);
        padding-left: var(--padding-left);

        &::after {
            content: "";
            display: flex;
            align-items: center;
            justify-content: center;

            width: 1.25rem !important;
            height: 1.25rem !important;

            top: unset !important;
            right: 0.5rem !important;

            margin: unset !important;
            margin-top: 3px;
            padding: unset !important;
            border: unset !important;

            color: var(--chevron-color);
            background-color: currentColor;

            cursor: pointer;

            mask-repeat: no-repeat;
            mask-position: center;

            mask-image: var(--chevron-image);
            -webkit-mask-image: var(--chevron-image);
        }

        input {
            display: flex;
            align-items: center;

            height: 100%;
            padding-top: var(--padding-top);
            padding-right: 0;
            padding-bottom: var(--padding-bottom);
            padding-left: 0;

            flex-grow: 1;

            color: var(--color-text-primary-text);
            background: unset;
            border: none;
            outline: none;

            font: var(--value-font);

            &::placeholder {
                color: var(--color-text-secondary-text);

                font: var(--placeholder-font);
            }
        }

        .item {
            display: flex;
            align-items: center;

            font: var(--value-font);
        }

        .clear-button {
            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 0;

            color: var(--color-text-tertiary-text);

            &::before {
                content: "";
                display: block;

                height: 1.25rem;
                width: 1.25rem;

                background-color: currentColor;

                mask-repeat: no-repeat;
                mask-position: center;

                mask-image: url(/build/images/close-circle-outline.08aaab55.svg);
                -webkit-mask-image: url(/build/images/close-circle-outline.08aaab55.svg);
            }

            &:hover {
                color: var(--color-contextual-error-70);
            }
        }
    }

    .ts-dropdown {
        box-shadow: var(--drop-shadow);
        border: 1px solid var(--dropdown-border-color) !important;
        background: var(--background-color) !important;

        border-radius: var(--corner-radius-components-outside);

        margin: 0;
        padding: 0.25rem;

        top: calc(100% + 0.25rem);

        > .ts-dropdown-content {
            display: flex;
            flex-direction: column;

            > .option {
                display: flex;
                align-items: center;

                min-height: 2.5rem;

                padding: 0.5rem;

                border: unset;
                border-bottom: 1px solid var(--color-neutrals-grey-dark-15);

                font: var(--font-table-text-r);

                color: var(--color-text-primary-text);

                &:last-child {
                    border-bottom: 1px solid var(--background-color);
                }

                &:hover {
                    background-color: var(--color-primary-primary-light-60) !important;
                    border-bottom: 1px solid var(--color-primary-primary-light-60);
                    border-radius: var(--corner-radius-components-outside);
                }

                &:has(+ .option:hover) {
                    border-bottom: 1px solid var(--background-color);
                }

                &.active {
                    background-color: unset;
                }

                .highlight {
                    background-color: var(--color-primary-primary-light);
                }
            }
        }
    }
}

/* Pro prohlížeče založené na WebKit (Chrome, Safari, Edge, Opera) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Pro Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


/* Override browser autofill background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--background-background) inset !important;
    -webkit-text-fill-color: var(--text-body-body-base) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

.translatable-row {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    gap: 1rem;
    .translatable-column {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex: 1;
    }
}

.frame {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: var(--padding-padding-xxl);

    &.frame--fill {
        flex: 1 0 25%;
    }

    /* Outline variant */
    &.frame--with-outline {
        padding: var(--padding-padding-xxl);

        background: var(--background-background-level-3);
    
        border-radius: var(--corner-radius-components-outside);
        border: 1px solid var(--form-form-15);
    }

    /* Padding variant */
    &.frame--padding-xxl {
        padding: var(--padding-padding-xxl);
        gap: var(--padding-padding-xxl);
    }

    &.frame--padding-xxxl {
        padding: var(--padding-padding-xxxl);
        gap: var(--padding-padding-xxxl);
    }

    &.frame--padding-top-none {
        padding-top: 0;
    }

    /* Shadow variant */
    &.frame--with-shadow {
        box-shadow: var(--drop-shadow-large);
    }

    /* Scrollable variant */
    &.frame--scrollable {
        overflow: auto;
    }
}

/* 
.frame-description {
    display: flex;
    height: 5rem;
    padding: 0.25rem;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 1rem;
    flex-shrink: 0;
    align-self: stretch;
    flex-wrap: wrap;
    border-radius: 0.25rem;
    
    font: var(--container-medium-label-font);
    color: var(--calendar-labels-grey-stroke);
    background-color: var(--background-background);
} */

/* Mobile - 320 - 767 px */
.grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--padding-padding-large) var(--padding-padding-medium);
    padding: var(--padding-padding-none);

    .row {
        display: grid;
        grid-template-columns: subgrid;

        row-gap: var(--padding-padding-large);
    }

    /* These classes adjust how the content is aligned within its grid cell */
    .justify-start { justify-self: start; }
    .justify-center { justify-self: center; }
    .justify-end { justify-self: end; }
    .justify-stretch { justify-self: stretch; }

    /* Add these classes to grid items to control vertical positioning */
    .align-top { align-self: start; }
    .align-center { align-self: center; }
    .align-bottom { align-self: end; }
    .align-stretch { align-self: stretch; }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--padding-padding-xxl) var(--padding-padding-large);

        .row {
            grid-column: span 12;

            row-gap: var(--padding-padding-xxl);
        }

        /* Each class makes the element span the specified number of columns */
        .col-1  { grid-column: span 1; }
        .col-2  { grid-column: span 2; }
        .col-3  { grid-column: span 3; }
        .col-4  { grid-column: span 4; }
        .col-5  { grid-column: span 5; }
        .col-6  { grid-column: span 6; }
        .col-7  { grid-column: span 7; }
        .col-8  { grid-column: span 8; }
        .col-9  { grid-column: span 9; }
        .col-10 { grid-column: span 10; }
        .col-11 { grid-column: span 11; }
        .col-12 { grid-column: span 12; }

        /* Offsets push the element to the right by starting at a later grid line */
        .offset-1  { grid-column-start: 2; }
        .offset-2  { grid-column-start: 3; }
        .offset-3  { grid-column-start: 4; }
        .offset-4  { grid-column-start: 5; }
        .offset-5  { grid-column-start: 6; }
        .offset-6  { grid-column-start: 7; }
        .offset-7  { grid-column-start: 8; }
        .offset-8  { grid-column-start: 9; }
        .offset-9  { grid-column-start: 10; }
        .offset-10 { grid-column-start: 11; }
        .offset-11 { grid-column-start: 12; }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

/* Mobile - 320 - 767 px */
/* Header */
.header {
    display: flex;
    align-items: center;

    font: var(--container-medium-label_bold-font);

    color: var(--text-headline-headline-base);

    padding: var(--padding-padding-none);
    gap: var(--padding-padding-large);

    .header__right {
        flex: 1 0;
        justify-self: end;
    }

    /**
     * Attemp to rewrite flex into grid
 
    display: grid;
    align-items: center;
    grid-template-columns: 1fr minmax(0, 1fr);
    grid-template-areas: "left right";
    gap: 0.5rem;
    */

    &:has(.header__center) {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "left center right";
    
        .header__left {
            grid-area: left;
            justify-self: start;
        }
        
        .header__center {
            grid-area: center;
            justify-self: center;
            display: flex; 
            align-items: center;

        }
        
        .header__right {
            grid-area: right;
        }
    }
}

@scope (.header) {
    .breakable-text {
        display: -webkit-box;
        /* display: flex; */
        
        line-clamp: 2;
        -webkit-line-clamp: 2;
        
        box-orient: vertical;
        -webkit-box-orient: vertical;
        
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
    }
}

/* Header for accordion */
.accordion-header {
    color: var(--text-headline-headline-base);
    font: var(--container-medium-label_bold-font);
}

/* Header for availability cards */
.availability-card-header {
    display: flex;
    
    column-gap: var(--padding-padding-large);

    font: var(--container-medium-label-font);
    
    .availability-card-header__title {
        color: var(--text-body-body-base);
    }

    .availability-card-header__subtitle {
        color: var(--text-body-body-50);
    }

    .availability-card-header__icon {
        margin-left: auto;
    }
} 

/* Header for components */
.component-header {
    display: flex;
    align-items: center;

    gap: var(--padding-padding-large);

    color: var(--text-headline-headline-base);

    font: var(--container-medium-label_bold-font);

    .component-header__right {
        justify-self: end;
        
        display: flex;
        flex: 1 0 0;
        align-items: center;
        justify-content: end;
    }

    /**
     * Attemp to rewrite flex into grid
 
    display: grid;
    align-items: center;
    grid-template-columns: 1fr minmax(0, 1fr);
    grid-template-areas: "left right";
    gap: 0.5rem;
    */

    &:has(.component-header__center) {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "left center right";
    
        .component-header__left {
            grid-area: left;
            justify-self: start;
        }
        
        .component-header__center {
            grid-area: center;
            justify-self: center;
            display: flex; 
            align-items: center;

        }
        
        .component-header__right {
            grid-area: right;
        }
    }
}

@scope (.component-header) {
    .breakable-text {
        display: -webkit-box;
        /* display: flex; */
        
        line-clamp: 2;
        -webkit-line-clamp: 2;
        
        box-orient: vertical;
        -webkit-box-orient: vertical;
        
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
    }

    .subheadline {
        font: var(--container-medium-label-font)
    }
}

/* Header for widgets */
.widget-header {
    font: var(--container-medium-headline_bold-font);
    color: var(--text-headline-headline-base);

    @scope (.widget-header) {
        .subheadline {
            font: var(--container-container_medium-headline-font);
        }
    }
}

.section-header {
    padding-left: var(--padding-padding-large);

    color: var(--text-body-body-50);

    font: var(--container-container_medium-label-font);
}

/* Mobile - 768 - 960 px */
@media (min-width: 768px) {
}

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .section-header {
        padding-left: var(--padding-padding-none);
    }
}

/* Laptop & tablet - 1280 - 1680 px */
@media (min-width: 1280px) {
}

/* Desktop - 1681 - 2200 px */
@media (min-width: 1681px) {
}

/* Desktop - 2201 px and above */
@media (min-width: 2201px) {
}

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

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

/* Mobile - 320 - 767 px */
body {
    min-height: 100dvh;
    margin: 0;

    font: var(--general-cta-medium_default-font);

    background-color: var(--brand-yellow-shades-sazka-yellow-base);
    color: var(--text-body-body-base);
}

#page {
    min-width: 320px;
    min-height: 100dvh;

    display: grid;
    column-gap: 0.75rem;
    grid-template-columns: 1fr repeat(11, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    
    grid-template-areas: 
        "main   main   main   main   main   main   main   main   main   main   main   main"
        "footer footer footer footer footer footer footer footer footer footer footer footer";

    margin-left: 1rem;
    margin-right: 1rem;

    #page-main {
        --border-radius: 0.25rem;

        grid-area: main;
    }

    #page-footer {
        grid-area: footer;
        align-self: flex-end;

        display: flex;
        flex-direction: column;
        align-items: center;

        font: var(--floors-basic-description-font);
        color: var(--text-body-body-90);

        padding-top: 0.5rem;
        padding-bottom: 0.25rem;

        margin-left: -1rem;
        margin-right: -1rem;
    }
}

#app-page {
    min-width: 320px;
    min-height: 100dvh;

    display: grid;
    column-gap: 0.75rem;
    grid-template-columns: 1fr repeat(11, minmax(0, 1fr));
    grid-template-rows: 3.25rem auto 1fr auto;
    
    grid-template-areas: 
        "navbar        navbar        navbar        navbar        navbar        navbar        navbar        navbar        navbar        navbar        navbar        navbar"
        "infobar       infobar       infobar       infobar       infobar       infobar       infobar       infobar       infobar       infobar       infobar       infobar"
        "main          main          main          main          main          main          main          main          main          main          main          main"
        "footer        footer        footer        footer        footer        footer        footer        footer        footer        footer        footer        footer"
        "navbar-bottom navbar-bottom navbar-bottom navbar-bottom navbar-bottom navbar-bottom navbar-bottom navbar-bottom navbar-bottom navbar-bottom navbar-bottom navbar-bottom";

    margin-left: 1rem;
    margin-right: 1rem;

    #app-navbar {
        position: sticky;
        top: 0;
        z-index: 200;

        grid-area: navbar;

        margin: 0 -1rem;
    }

    #app-infobar {
        /* position: sticky;
        top: 3.25rem;
        z-index: 200; */

        grid-area: infobar;
    }

    #app-main {
        grid-area: main;

        margin-left: -1rem;
        margin-right: -1rem;

        background-color: var(--background-background);

        border-radius: var(--corner-radius-widgets) var(--corner-radius-widgets) 0 0;
    }

    #app-main:has(> .dashboard) {
        padding: var(--padding-padding-xxl);
    }

    #app-navbar-bottom {
        position: sticky;
        bottom: 0;

        z-index: 200;

        grid-area: navbar-bottom;

        margin: 0 -1rem;
    }

    #app-footer {
        display: none;
    }
}

body:has(#admin-page) {
    padding-top: var(--padding-padding-none);
}

#admin-page {
    min-width: 320px;
    min-height: 100dvh;
    
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1fr repeat(11, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto;
    
    grid-template-areas: 
        "nav    nav    nav    nav    nav    nav    nav    nav    nav    nav    nav    nav"
        "main   main   main   main   main   main   main   main   main   main   main   main"
        "footer footer footer footer footer footer footer footer footer footer footer footer";

   /* margin: 0 16px;*/

    #admin-navbar {
        position: sticky;
        top: 0;
    
        height: 100%;
        max-height: 100vh;
    
        grid-area: nav;
        background-color: var(--brand-yellow-shades-sazka-yellow-base);
        background: linear-gradient(270deg, var(--brand-yellow-shades-sazka-yellow-base), var(--brand-yellow-shades-sazka-yellow-secondary));
    
        padding: 1rem 0;
    
        margin-left: -16px;
        margin-right: -16px;

        z-index: 200;
    }

    #admin-main {
        grid-area: main;
        
        background-color: var(--background-background);
        
        border-radius: 4px;
    }

    #admin-footer {
        grid-area: footer;
        align-self: flex-end;

        display: flex;
        flex-direction: column;
        align-items: center;

        font: var(--floors-basic-description-font);
        color: var(--text-body-body-90);

        padding-top: 0.5rem;
        padding-bottom: 0.25rem;

        margin-left: -1rem;
    }
}

body:has(#error-page) {
    padding-top: var(--padding-padding-none);

    background-color: var(--background-background-level-2);
}

#error-page {
    min-width: 320px;
    min-height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    .error-container {
        display: flex;

        .error-container__image {
            width: 32.4rem;
            aspect-ratio: 1;

            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 100%;
                height: auto;
            }
        }

        .error-container__body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            
            gap: var(--padding-padding-large);

            margin-left: -5rem;

            .error-container__body__error-code {
                font: var(--floors-number-number_large-font);
            }
            
            .error-container__body__error-title {
                font: var(--floors-headline-headline_floor-font);
            }

            .error-container__body__error-description {
                font: var(--container-large-body_text-font);
            }

            .error-container__body__homepage-link a {
                color: var(--text-body-body-base);
                
                font: var(--general-cta-link_default-font);
                
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

body:has(#login-page) {
    padding-top: var(--padding-padding-none);

    background-color: var(--background-background-level-2);
}

#login-page {
    min-width: 320px;
    min-height: 100dvh;
    
    padding: var(--padding-padding-xxl);

    display: flex;

    #login-dialog {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;

        row-gap: 3rem;
        padding: 4rem var(--padding-padding-xxl);

        background-color: var(--background-background-level-2);

        .login-dialog__body {
            width: 100%;
            
            display: flex;
            flex-direction: column;
            align-items: stretch;
            
            row-gap: var(--padding-padding-xxl);

            .login-dialog__body__title {
                align-self: center;
                font: var(--container-small-headline-font);

                padding: 0 1.5rem;
            }

            .login-dialog__body__subtitle {
                align-self: center;
                font: var(--container-small-body_text-font);
            }

            .login-dialog__body__button-login-primary {
                padding-top: 3rem;

                > .button {
                    width: 100%;
                }
            }

            .login-dialog__body__remember-me {
                align-self: center;
                padding-top: 0.5rem;

                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .login-dialog__body__button-login-alternative {
                padding-top: 3rem;

                > .button {
                    width: 100%;
                }
            }
        }
    }
}

#theme-page {
    min-width: 320px;
    min-height: 100dvh;

    display: grid;
    column-gap: 0.75rem;
    grid-template-columns: 1fr repeat(11, minmax(0, 1fr));
    grid-template-rows: 3.25rem auto 1fr auto;
    
    grid-template-areas: 
        "navbar        navbar        navbar        navbar        navbar        navbar        navbar        navbar        navbar        navbar        navbar        navbar"
        "main          main          main          main          main          main          main          main          main          main          main          main"
        "footer        footer        footer        footer        footer        footer        footer        footer        footer        footer        footer        footer";

    margin-left: 1rem;
    margin-right: 1rem;

    #theme-navbar {
        position: sticky;
        top: 0;
        z-index: 200;

        grid-area: navbar;

        margin: 0 -1rem;
    }

    #theme-main {
        grid-area: main;

        padding: var(--padding-padding-xxl);

        margin-left: -1rem;
        margin-right: -1rem;

        background-color: var(--background-background);

        border-radius: var(--corner-radius-widgets) var(--corner-radius-widgets) 0 0;
    }

    #theme-footer {
        display: none;
    }
}

/* Mobile - 768 - 960 px */
@media (min-width: 768px) {
    #app-page {
        margin: 0 2rem;

        #app-navbar {
            margin: 0 -2rem;
        }

        #app-infobar {
            margin: 0 calc(-1 * var(--corner-radius-widgets));
        }

        #app-main {
            margin-left: -2rem;
            margin-right: -2rem;
        }

        #app-navbar-bottom {
            margin: 0 -2rem;
        }
    }
}

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    body {
        padding-top: var(--padding-padding-large);

        background-color: var(--background-background);
    }

    #app-page {
        grid-template-rows: auto auto 1fr auto;

        column-gap: 1rem;

        #app-navbar {
            flex-direction: row;

            margin-left: calc(-1 * var(--corner-radius-widgets));
            margin-right: calc(-1 * var(--corner-radius-widgets));
        }

        #app-infobar {
            top: 3.875rem;
         
            margin: 0;
        }

        #app-main {
            margin-top: 1rem;
            margin-left: 0;
            margin-right: 0;

            padding: 0;

            &::after {
                display: none;
            }

            &::before {
                display: none;
            }
        }

        #app-main:has(> .dashboard) {
            padding: var(--padding-padding-none);
        }

        #app-navbar-bottom {
            display: none !important;
        }

        #app-footer {
            grid-area: footer;
            align-self: end;

            display: flex;
            flex-direction: column;
            align-items: center;

            font: var(--general-cta-small_default-font);
            
            color: var(--text-body-body-90);
            
            margin: 0;
            margin-top: 1rem;
            
            padding-top: 0;
            padding-bottom: 0.25rem;
        }
    }

    #admin-page {
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "nav nav nav main   main   main   main   main   main   main   main   main"
            "nav nav nav footer footer footer footer footer footer footer footer footer";

        margin: 0;

        #admin-navbar {
            margin-left: 0;
            margin-right: 0;
        }
    
        #admin-main {
            margin-top: 1rem;
            margin-right: 1rem;
        }
    }
    
    body:has(#login-page) {
        background-color: var(--background-background);
    }

    #login-page {
        align-items: center;
        justify-content: center;

        #login-dialog {
            width: auto;
            min-width: 32rem;
            min-height: 42rem;

            justify-content: space-between;

            border-radius: var(--corner-radius-widgets);

            box-shadow: var(--shadow-behind-widget);

            .login-dialog__body {
                padding: 0rem 3.5rem;
            }
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
@media (min-width: 1280px) {
    #app-page {
        grid-template-columns: 1fr repeat(13, minmax(0, 1fr));
        grid-template-areas:
        "left    navbar  navbar  navbar  navbar  navbar  navbar  navbar  navbar  navbar  navbar  navbar  navbar  right"
        "left    infobar infobar infobar infobar infobar infobar infobar infobar infobar infobar infobar infobar right"
        "left    main    main    main    main    main    main    main    main    main    main    main    main    right"
        "left    footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  right";

        margin: 0;

        #app-navbar {
            margin: 0 -1rem;
        }

        /* #app-infobar {
            margin: 0 1rem;
        } */

        #app-footer {
            margin-left: 1rem;
            margin-right: 1rem;
        }
    }

    #admin-page {
        margin: 0;

        grid-template-columns: 1fr repeat(13, minmax(0, 1fr));
        grid-template-areas:
            "nav nav nav main   main   main   main   main   main   main   main   main   main   main"
            "nav nav nav footer footer footer footer footer footer footer footer footer footer footer";
    }    
}

/* Desktop - 1681 - 2200 px */
@media (min-width: 1681px) {
    /* #app-page {
    } */

    /* #admin-page {
    } */
}

/* Desktop - 2201 px and above */
@media (min-width: 2201px) {
    #app-page {
        grid-template-columns: 1fr repeat(15, minmax(0, 1fr));
        grid-template-areas:
        "left left navbar  navbar  navbar  navbar  navbar  navbar  navbar  navbar  navbar  navbar  navbar  navbar  right right"
        "left left infobar infobar infobar infobar infobar infobar infobar infobar infobar infobar infobar infobar right right"
        "left left main    main    main    main    main    main    main    main    main    main    main    main    right right"
        "left left footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  right right";
    }

    #admin-page {
        grid-template-columns: 1fr repeat(15, minmax(0, 1fr));
        grid-template-areas:
            "nav nav nav main   main   main   main   main   main   main   main   main   main   main   main   main"
            "nav nav nav footer footer footer footer footer footer footer footer footer footer footer footer footer";
    }
}

/* Mobile - 320 - 767 px */
#app-menu {
    display: flex;
    align-items: center;
    
    padding: var(--padding-padding-none) var(--padding-padding-xxxl);
    padding-inline: 0;
    gap: var(--padding-padding-large);

    list-style-type: none;

    font: var(--general-cta-medium_default-font);
    text-transform: var(--general-cta-medium_default-text-transform);

    .app-menu__item {
        height: 2.75rem;
        
        display: inline-flex;
        justify-content: center;
        align-items: center;

        padding: 0;
        gap: var(--padding-padding-none);
        
        color: var(--text-headline-headline-base);

        border-radius: var(--corner-radius-components-outside);

        &:hover {
            background-color: rgba(29, 71, 87, 0.20);
        }

        > a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 100%;

            padding: var(--padding-padding-large) var(--padding-padding-xxl);

            color: inherit;
            text-decoration: none;

            white-space: nowrap;

            &:visited,
            &:hover,
            &:active {
                color: inherit;
                text-decoration: none;
            }
        }
        
        &.app-menu__item--current {
            font: var(--general-cta-medium_active-font);
            text-transform: var(--general-cta-medium_active-text-transform);
        }
    }
}

#admin-sub-menu {
    display: flex;
    flex-direction: column;

    padding: var(--padding-padding-large);
    margin: unset;

    list-style-type: none;

    border-radius: var(--corner-radius-components-outside);
    border: 1px solid var(--form-form-15);

    background: var(--background-background-level-3);

    box-shadow: var(--drop-shadow-large);

    .admin-sub-menu__item {
        border-bottom: 1px solid var(--form-form-15);

        > a {
            display: flex;
            align-items: center;

            min-height: 3rem;

            padding: var(--padding-padding-small) var(--padding-padding-large);
            gap: var(--padding-padding-xxl);

            cursor: pointer;


            font: var(--container-medium-label-font);

            svg {
                width: 1.5rem;
                height: 1.5rem;

                margin-left: auto;

                color: var(--form-form-45);
            }
        }

        &:hover {
            border-bottom: unset;

            > a {
                text-decoration: none;

                border: none;

                border-radius: var(--corner-radius-components-outside);
                background: var(--background-background-level-3);

                box-shadow: var(--shadow-behind-widget);
            }
        }

        &:has(+ &:hover) {
            border-bottom: none;
        }

        &:has(+ &.admin-sub-menu__item--current) {
            border-bottom: none;
        }

        &:last-child {
            border-bottom: none;
        }

        &.admin-sub-menu__item--current {
            border: none;

            > a {
                border: 1px solid var(--form-form-45);
                border-radius: var(--corner-radius-components-outside);
                background-color: var(--form-form-15);

                font: var(--container-medium-label_bold-font);
            }
        }
    }
}

#app-mobile-bottom-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#app-usermenu {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    gap: 1.5rem;

    padding: 1rem 0.5rem;

    > .form {
        row-gap: 1.5rem;
    }

    .app-usermenu__header {
        display: flex;
        flex-direction: column;
        
        padding: 0 var(--padding-padding-large);
        gap: 0.25rem;

        .app-usermenu__header__title {
            font: var(--container-medium-label_bold-font);
        }
        
        .app-usermenu__header__subtitle {
            font: var(--general-table-description-font);
            color: var(--text-body-body-50);
        }
    }

    .app-usermenu__item {
        display: flex;
        align-items: center;

        min-height: 3rem;

        padding: var(--padding-padding-small) var(--padding-padding-large);
        gap: var(--padding-padding-xxl);

        cursor: pointer;

        border-bottom: 1px solid var(--form-form-15);

        font: var(--container-medium-label-font);

        > label {
            display: flex;
            flex-direction: column;

            width: 100%;
            gap: 0.25rem;

            cursor: pointer;

            > .subtext {
                font: var(--general-table-description-font);
                color: var(--text-body-body-50);
            }
        }

        > svg {
            width: 1.5rem;
            height: 1.5rem;

            color: var(--icons-blue-shades-blue-base);
        }

        .chevron-right {
            margin-left: auto;
            color: var(--form-form-45);
        }

        > .form__widget__simple {
            margin-left: auto;
        }

        > .app-usermenu__item__action {
            margin-left: auto;
        }

        &:last-child {
            border-bottom: none;
        }

        &:hover {
            background-color: var(--background-background-level-3);
            box-shadow: var(--shadow-behind-widget);
            
            border-bottom: none;
            border-radius: var(--corner-radius-components-outside);
            
            .chevron-right {
                color: var(--icons-blue-shades-blue-base);
            }
        }

        &:has(+ &:hover) {
            border-bottom: none;
        }

        &.app-usermenu__item--hover-negative:hover {
            color: var(--text-white-white-base);
            background-color: var(--system-negative-negative-80);

            svg {
                color: var(--icons-invert-invert);
            }
        }

        &.app-usermenu__item--no-hover:hover {
            cursor: unset; 
        }
    }

    .app-usermenu__section {
        display: flex;
        flex-direction: column;

        gap: 0.5rem;
    }

    .app-usermenu__menu {
        display: flex;
        flex-direction: column;

        padding: 0;
        margin: 0;

        list-style-type: none;
    }

    .app-usermenu__footer {
        margin-top: auto;

        &.app-usermenu__footer--center {
            display: flex;
            justify-content: center;
        }
    }

    .app-usermenu__register-device {
        display: flex;
        justify-content: center;

        position: sticky;
        bottom: 0;

        padding: 1rem 0;

        background: var(--background-background-level-2);
    }

    .app-usermenu__device {
        display: grid;
        grid-template-areas: "icon title       actions"
                             "icon description actions";
        grid-template-columns: auto 1fr auto;
        column-gap: var(--padding-padding-xxl);
        row-gap: var(--padding-padding-small);

        .app-usermenu__device__icon {
            grid-area: icon;

            svg {
                width: 1.5rem;
                height: 1.5rem;
                
                color: var(--icons-blue-shades-blue-base);
            }
        }

        .app-usermenu__device__title {
            grid-area: title;

            display: flex;
            gap: var(--padding-padding-large);

            font: var(--container-medium-label-font);
        }

        .app-usermenu__device__description {
            grid-area: description;

            display: flex;
            flex-direction: column;

            font: var(--general-table-description-font);
            color: var(--text-body-body-50);
        }

        .app-usermenu__device__actions {
            grid-area: actions;

            display: flex;
            gap: var(--padding-padding-xxl);
        }
    }

    .app-usermenu__empty {
        display: flex;
        align-items: center;

        gap: var(--padding-padding-xxl);
        padding: var(--padding-padding-xxl);
        
        font: var(--general-table-description-font);

        color: var(--text-body-body-50);

        > svg {
            width: 2rem;
            height: 2rem;

            margin-left: auto;

            color: var(--form-form-15);
        }
    }

    @keyframes flash-success {
        0%, 100% { background-color: transparent; }
        50% { background-color: var(--system-positive-positive-10); }
    }

    @keyframes flash-error {
        0%, 100% { background-color: transparent; }
        50% { background-color: var(--system-negative-negative-10); }
    }
}

#admin-menu {
    align-self: stretch;

    display: flex;
    flex-direction: column;

    padding: 0;
    margin: 0;

    list-style-type: none;

    > li {
        display: flex;
        flex-direction: column;

        font: var(--general-cta-medium-default-font);
        text-transform: var(--general-cta-medium-default-text-transform);
        
        &.current {
            background: linear-gradient(180deg, var(--brand-blue-shades-sazka-blue-base), var(--brand-blue-shades-sazka-blue-secondary));

            font: var(--general-cta-medium_active-font);

            a {
                color: var(--text-white-white-base);
            }
        }

        > a { 
            display: flex;
            gap: 1rem;
            
            padding: 0.625rem 1rem;

            color: var(--text-headline-headline-base);

            &:hover {
                color: var(--text-white-white-base);
                background-color: var(--brand-blue-shades-sazka-blue-base);
                text-decoration: none;
                svg {
                    fill: var(--text-white-white-base);
                }
            }

            i {
                width: 1.5rem;
            }
        }

        > span {
            display: flex;
            gap: 1rem;

            margin: 0.625rem 1rem;

            i {
                width: 1.5rem;
            }
        }

        > ul {
            display: flex;
            flex-direction: column;
    
            padding: 0;
            
            list-style-type: none;
       
            > li {
                font: var(--general-form-text_default-font);
                text-transform: none;

                &.current {
                    background: linear-gradient(180deg, var(--brand-blue-shades-sazka-blue-base), var(--brand-blue-shades-sazka-blue-secondary));

                    a {
                        color: var(--text-white-white-base);
                    }
                }
    
                > a {
                    display: flex;
                    gap: 1rem;

                    padding: 0.75rem 1rem 0.75rem 3.5rem;
    
                    color: var(--text-headline-headline-base);

                    &:hover {
                        color: var(--text-white-white-base);
                        background-color: var(--brand-blue-shades-sazka-blue-base);
                        text-decoration: none;
                    }
                }
            }
        }
    }

    /* .admin-menu__item {
        display: flex;
        flex-direction: column;
        align-self: stretch;
        gap: 1rem;
        
        &.admin-menu__item--current {
            font: var(--general-form-text_bold-font);

            

        }
    } */
}

#admin-logout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    #app-usermenu {
        .app-usermenu__header {
            padding: 0 var(--padding-padding-xxl);
        }

        .app-usermenu__item {
            min-height: 3.5rem;

            padding: var(--padding-padding-large) var(--padding-padding-xxl);
        }
    }

    #admin-sub-menu {
        padding: var(--padding-padding-xxl);
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

/* Mobile - 320 - 767 px */
:root {
    --branding-container-logo: url(/build/images/complete-logo--color.a5416182.svg);
    --branding-container-logo--negative: url(/build/images/complete-logo--symbol-negative.f248b5fc.svg);
    
    &[data-color-scheme="dark"],
    &[data-color-scheme="auto"] {
        --branding-container-logo: url(/build/images/complete-logo--mono-negative.7ee6bc4e.svg);
        --branding-container-logo--negative: url(/build/images/complete-logo--mono-negative.7ee6bc4e.svg);
    }
}

#app-page {
    #app-navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: var(--padding-padding-large) var(--padding-padding-xxl);

        background: var(--brand-yellow-shades-sazka-yellow-base);
    
        .app-navbar__left {
            display: flex;
            align-items: center;
            gap: var(--padding-padding-large);
        }

        .app-navbar__main {
            display: none;

            flex-grow: 1;
        }

        .app-navbar__usermenu {
            display: flex;

            gap: var(--padding-padding-large);

            align-items: center;

            .app-navbar__usermenu__form {
                display: flex;
                margin: 0;
            }
        }
    }

    #app-navbar-bottom {
        padding: var(--padding-padding-small) var(--padding-padding-xxl);
        background: var(--background-background-level-2);
    }
}

#admin-page {
    #admin-navbar {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        align-items: center;

        .admin-navbar__header {
            align-self: stretch;

            display: flex;
            flex-direction: column;

            gap: 1rem;

            padding: 0 1rem;
        }

        .admin-navbar__main {      
            align-self: stretch;
            
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            
            gap: 1rem;
            
            margin-bottom: auto;
        }

        .admin-navbar__bottom {
            align-self: stretch;

            display: flex;
            flex-direction: column;

            gap: 1rem;

            padding: 0 1rem;
        }
    }
}

.branding-container {
    width: 9rem;
    height: 1.5rem;

    display: flex;
    align-items: center;
    justify-content: center;

    color: transparent;
    font: var(--container-container_small-body_text-font);

    text-wrap: nowrap;

    background-image: var(--branding-container-logo);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;

    &.branding-container--negative {
        background-image: var(--branding-container-logo--negative);
    }

    &.branding-container--size-big {
        width: 17rem;
        height: 3rem;
    }
}

.branding-container2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    .logo {
        --logo-size-width: 2.5rem;
        --logo-size-height: 2.5rem;

        width: var(--logo-size-width);
        height: var(--logo-size-height);

        min-width: var(--logo-size-width);
        min-height: var(--logo-size-height);

        overflow: hidden;

        position: relative;
    }

    .title {
        color: var(--text-headline-headline-base);
        font: var(--container-large-headline_bold-font);
        text-wrap: nowrap;
    }
}

.navbar-button {
    display: flex;
    align-items: center;

    color: var(--text-white-white-base);

    margin: 0;
    padding: 0;

    outline: none;
    border: none;

    background: none;

    cursor: pointer;

    position: relative;

    &.navbar-button--chevron-down::after,
    &.navbar-button--chevron-up::after {
        content: "";
        display: block;

        width: 1rem;
        height: 2rem;

        color: var(--text-white-white-base);
        background-color: currentColor;

        mask-repeat: no-repeat;
        mask-position: center;
    }

    &.navbar-button--chevron-up::after {
        mask-image: url(/build/images/chevron-up.53dc70aa.svg);
        -webkit-mask-image: url(/build/images/chevron-up.53dc70aa.svg);
    }

    &.navbar-button--chevron-down::after {
        mask-image: url(/build/images/chevron-down.3e30ed84.svg);
        -webkit-mask-image: url(/build/images/chevron-down.3e30ed84.svg);
    }

    svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .badge {
        all: unset;
        --size: 1.125rem;

        width: var(--size);
        height: var(--size);

        color: var(--brand-yellow-shades-sazka-yellow-base);
        background-color: var(--icons-blue-shades-blue-secondary);

        display: flex;
        align-items: center;
        justify-content: center;

        font: var(--container-container_small-label);
        font-feature-settings: 'liga' off, 'clig' off;

        border-radius: 50%;

        position: absolute;
        top: calc(var(--size) / -3);
        right: calc(var(--size) / -3);

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.badge--hidden {
            display: none !important;
        }
    }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    #app-page {
        #app-navbar {
            height: 4rem;

            padding: var(--padding-padding-none) var(--padding-padding-xxl);
            gap: 4rem;

            border-radius: var(--corner-radius-widgets);

            .app-navbar__main {
                display: unset;
            }

            .app-navbar__usermenu {
                gap: var(--padding-padding-xxl);
                padding: 0 var(--padding-padding-extra-small);
            }
        }
    }

    /* #admin-page {
        #admin-navbar {
        } 
    } */

    .branding-container {
        width: 12rem;
        height: 2rem;
    }
}

/* Laptop & tablet - 1280 - 1680 px */
@media (min-width: 1280px) {
    /* #app-page {
        #app-navbar {
        }
    } */

    /* #admin-page {
        #admin-navbar {
        }
    } */
}

/* Desktop - 1681 - 2200 px */
@media (min-width: 1681px) {
    /* #app-page {
        #app-navbar {
        }
    } */

    /* #admin-page {
        #admin-navbar {
        }
    } */

    .branding-container2 {
        flex-direction: row;
    }
}

/* Desktop - 2201 px and above */
@media (min-width: 2201px) {
    /* #app-page {
        #app-navbar {
        }
    } */

    /* #admin-page {
        #admin-navbar {
        }
    } */
}

.pagination {
    display: inline-flex;
    
    .pagination__item {
        width: 1.5rem;
        height: 1.5rem;
        aspect-ratio: 1 / 1;
        
        display: flex;
        justify-content: center;
        align-items: center;
        
        color: var(--text-body-body-50);
        border-radius: var(--corner-radius-components-outside);
        
        font: var(--container-small-number-font);
        text-decoration: none;

        &.pagination__item--current-page {
            color: var(--text-white-white-base);
            background-color: var(--buttons-primary-primary-background);

            &:hover {
                text-decoration: none;
            }
        }
    }
}

.pagination-description {
    font: var(--container-small-label-font);
    color: var(--text-body-body-50);
}

.pagination__item.disabled, span.pagination__item {
    pointer-events: none;
}

.mobile-pagination {
    display: flex;
    align-items: center;

    gap: var(--padding-padding-large);

    padding-top: var(--padding-padding-small);

    .mobile-pagination__item {
        width: 0.5rem;
        height: 0.5rem;
        aspect-ratio: 1 / 1;

        border-radius: 50%;
        cursor: pointer;

        background-color: var(--form-form-15);

        &.mobile-pagination__item--active {
            background-color: var(--buttons-primary-primary-background);
        }
    }
}

:root {
    --drop-shadow-large-light: 4px 8px 30px 0px #8d9eb026;
    --drop-shadow-large-dark: none;
    --shadow-behind-widget-light: 4px 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-behind-widget-dark: none;
    --shadow-behind-smileys-light: 0px 0px 24px 0px #fff03b;
    --shadow-behind-smileys-dark: none;
    --shadow-for-toggle-light: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
    --shadow-for-toggle-dark: none;
    --shadow-button-light: 1px 4px 15px 0px rgba(112, 144, 176, 0.2);
    --shadow-button-dark: none;

    --drop-shadow-large: var(--drop-shadow-large-light);
    --shadow-behind-widget: var(--shadow-behind-widget-light);
    --shadow-behind-smileys: var(--shadow-behind-smileys-light);
    --shadow-for-toggle: var(--shadow-for-toggle-light);
    --shadow-button: var(--shadow-button-light);

    &[data-color-scheme="dark"] {
        --drop-shadow-large: var(--drop-shadow-large-dark);
        --shadow-behind-widget: var(--shadow-behind-widget-dark);
        --shadow-behind-smileys: var(--shadow-behind-smileys-dark);
        --shadow-for-toggle: var(--shadow-for-toggle-dark);
        --shadow-button: var(--shadow-button-dark);
    }
}

:root {
    /* ======================================= */
    /* Padding                                 */
    /* ======================================= */
    
    /* Margins */
    --padding-margins-margin-desktop: 138px;
    --padding-margins-margin-mobile: 138px;

    /* Padding */
    --padding-padding-none-desktop: 0rem;
    --padding-padding-none-mobile: 0rem;
    --padding-padding-extra-small-desktop: 0.125rem;
    --padding-padding-extra-small-mobile: 0.125rem;
    --padding-padding-small-desktop: 0.25rem;
    --padding-padding-small-mobile: 0.25rem;
    --padding-padding-medium-desktop: 0.375rem;
    --padding-padding-medium-mobile: 0.375rem;
    --padding-padding-large-desktop: 0.5rem;
    --padding-padding-large-mobile: 0.5rem;
    --padding-padding-xl-desktop: 0.75rem;
    --padding-padding-xl-mobile: 0.75rem;
    --padding-padding-xxl-desktop: 1rem;
    --padding-padding-xxl-mobile: 1rem;
    --padding-padding-xxxl-desktop: 1.5rem;
    --padding-padding-xxxl-mobile: 1.5rem;

    /* ======================================= */
    /* Corner Radius                           */
    /* ======================================= */
    --corner-radius-components-outside-desktop: 12px;
    --corner-radius-components-outside-mobile: 12px;
    --corner-radius-components-inside-desktop: 8px;
    --corner-radius-components-inside-mobile: 8px;
    --corner-radius-widgets-desktop: 24px;
    --corner-radius-widgets-mobile: 18px;
    --corner-radius-round-elements-desktop: 24px;
    --corner-radius-round-elements-mobile: 24px;

    /* Mobile - 320 - 767 px */
    --padding-margins-margin: var(--padding-margins-margin-mobile);

    --padding-padding-none: var(--padding-padding-none-mobile);
    --padding-padding-extra-small: var(--padding-padding-extra-small-mobile);
    --padding-padding-small: var(--padding-padding-small-mobile);
    --padding-padding-medium: var(--padding-padding-medium-mobile);
    --padding-padding-large: var(--padding-padding-large-mobile);
    --padding-padding-xl: var(--padding-padding-xl-mobile);
    --padding-padding-xxl: var(--padding-padding-xxl-mobile);
    --padding-padding-xxxl: var(--padding-padding-xxxl-mobile);

    --corner-radius-components-outside: var(--corner-radius-components-outside-mobile);
    --corner-radius-components-inside: var(--corner-radius-components-inside-mobile);
    --corner-radius-widgets: var(--corner-radius-widgets-mobile);
    --corner-radius-round-elements: var(--corner-radius-round-elements-mobile);

    /* Mobile - 768 - 960 px */
    /* @media (min-width: 768px) {
    } */

    /* Mobile - 768 - 960 px */
    /* @media (min-width: 768px) {
    } */

    /* Laptop & tablet - 961 - 1279 px */
    @media (min-width: 961px) {
        --padding-margins-margin: var(--padding-margins-margin-desktop);

        --padding-padding-none: var(--padding-padding-none-desktop);
        --padding-padding-extra-small: var(--padding-padding-extra-small-desktop);
        --padding-padding-small: var(--padding-padding-small-desktop);
        --padding-padding-medium: var(--padding-padding-medium-desktop);
        --padding-padding-large: var(--padding-padding-large-desktop);
        --padding-padding-xl: var(--padding-padding-xl-desktop);
        --padding-padding-xxl: var(--padding-padding-xxl-desktop);
        --padding-padding-xxxl: var(--padding-padding-xxxl-desktop);

        --corner-radius-components-outside: var(--corner-radius-components-outside-desktop);
        --corner-radius-components-inside: var(--corner-radius-components-inside-desktop);
        --corner-radius-widgets: var(--corner-radius-widgets-desktop);
        --corner-radius-round-elements: var(--corner-radius-round-elements-desktop); 
    }

    /* Laptop & tablet - 1280 - 1680 px */
    /* @media (min-width: 1280px) {   
    } */

    /* Desktop - 1681 - 2200 px */
    /* @media (min-width: 1681px) {
    } */

    /* Desktop - 2201 px and above */
    /* @media (min-width: 2201px) {
    } */
}

/* Mobile - 320 - 767 px */
.tabs {
    display: flex;
    align-items: center;
    align-self: stretch;
    
    gap: var(--padding-padding-large);

    border-bottom: 1px solid var(--form-form-15);

    overflow-x: auto;

    /* Scrollable, but without a visible scrollbar */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* old Edge / IE */

    &::-webkit-scrollbar {          /* Chrome / Safari */
        display: none;
    }

    .tabs__item {
        height: 2.75rem;
        
        display: inline-flex;
        justify-content: center;
        align-items: center;
        
        padding: var(--padding-padding-large);
        gap: var(--padding-padding-medium);
        
        color: var(--text-headline-headline-base);

        font: var(--general-cta-small_default-font);
        text-transform: var(--general-cta-small_default-text-transform);
        text-decoration: none;

        white-space: nowrap;

        &:hover {
            border-radius: var(--corner-radius-components-outside);
            background: rgba(29, 71, 87, 0.20);

        }

        &.tabs__item--active {
            font: var(--general-cta-small_active-font);
            text-transform: var(--general-cta-small_active-text-transform);
        }
    }
}

/* Mobile - 768 - 960 px */
@media (min-width: 768px) {
}

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .tabs {
        padding-bottom: var(--padding-padding-large);

        .tabs__item {
            padding: var(--padding-padding-large) var(--padding-padding-xxl);
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
@media (min-width: 1280px) {
}

/* Desktop - 1681 - 2200 px */
@media (min-width: 1681px) {
}

/* Desktop - 2201 px and above */
@media (min-width: 2201px) {
}

/* ======================================= */
/* 900 – EXTRA BOLD                        */
/* ======================================= */

@font-face {
    font-family: 'PPPangramSans';
    src: url(/build/fonts/PPPangramSansExtraBold-ExtraBold.da46f1fc.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansExtraBold-ExtraBold.8d087aa4.woff) format('woff'),
        url(/build/fonts/PPPangramSansExtraBold-ExtraBold.cc4f9728.ttf) format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'PPPangramSans';
    src: url(/build/fonts/PPPangramSansExtraBoldItalic-ExtraBoldItalic.fe7aad43.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansExtraBoldItalic-ExtraBoldItalic.58cbad2d.woff) format('woff'),
        url(/build/fonts/PPPangramSansExtraBoldItalic-ExtraBoldItalic.bce3c644.ttf) format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

/* Condensed ExtraBold */
@font-face {
    font-family: 'PPPangramSansCondensed';
    src: url(/build/fonts/PPPangramSansCondensedExtrabold-CondensedExtrabold.02a47b11.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansCondensedExtrabold-CondensedExtrabold.b1c38363.woff) format('woff'),
        url(/build/fonts/PPPangramSansCondensedExtrabold-CondensedExtrabold.fc7cde53.ttf) format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'PPPangramSansCondensed';
    src: url(/build/fonts/PPPangramSansCondensedExtraboldItalic-CondensedExtraboldItalic.e1d2b5c9.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansCondensedExtraboldItalic-CondensedExtraboldItalic.043629bd.woff) format('woff'),
        url(/build/fonts/PPPangramSansCondensedExtraboldItalic-CondensedExtraboldItalic.ffe1b4e2.ttf) format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}


/* ======================================= */
/* 700 – BOLD                               */
/* ======================================= */

@font-face {
    font-family: 'PPPangramSans';
    src: url(/build/fonts/PPPangramSansBold-Bold.fa71c7c9.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansBold-Bold.4587dfd4.woff) format('woff'),
        url(/build/fonts/PPPangramSansBold-Bold.e988df09.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;

    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'PPPangramSans';
    src: url(/build/fonts/PPPangramSansBoldItalic-BoldItalic.808ce187.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansBoldItalic-BoldItalic.88932efc.woff) format('woff'),
        url(/build/fonts/PPPangramSansBoldItalic-BoldItalic.3b691004.ttf) format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

/* Condensed Bold */
@font-face {
    font-family: 'PPPangramSansCondensed';
    src: url(/build/fonts/PPPangramSansCondensedBold-CondensedBold.c0951028.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansCondensedBold-CondensedBold.461c66f5.woff) format('woff'),
        url(/build/fonts/PPPangramSansCondensedBold-CondensedBold.20028e61.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'PPPangramSansCondensed';
    src: url(/build/fonts/PPPangramSansCondensedBoldItalic-CondensedBoldItalic.0c1e51d9.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansCondensedBoldItalic-CondensedBoldItalic.6267eea6.woff) format('woff'),
        url(/build/fonts/PPPangramSansCondensedBoldItalic-CondensedBoldItalic.07d58f41.ttf) format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}


/* ======================================= */
/* 600 – SEMIBOLD                           */
/* ======================================= */

@font-face {
    font-family: 'PPPangramSans';
    src: url(/build/fonts/PPPangramSansSemiBold-SemiBold.ccbec38f.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansSemiBold-SemiBold.1a7ecaa1.woff) format('woff'),
        url(/build/fonts/PPPangramSansSemiBold-SemiBold.6adc0ce1.ttf) format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'PPPangramSans';
    src: url(/build/fonts/PPPangramSansSemiBoldItalic-SemiBoldItalic.0fe06577.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansSemiBoldItalic-SemiBoldItalic.43b79a70.woff) format('woff'),
        url(/build/fonts/PPPangramSansSemiBoldItalic-SemiBoldItalic.d4543ac0.ttf) format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

/* Condensed Semibold */
@font-face {
    font-family: 'PPPangramSansCondensed';
    src: url(/build/fonts/PPPangramSansCondensedSemibold-CondensedSemibold.72e9bbfa.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansCondensedSemibold-CondensedSemibold.8345fb23.woff) format('woff'),
        url(/build/fonts/PPPangramSansCondensedSemibold-CondensedSemibold.570e929c.ttf) format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'PPPangramSansCondensed';
    src: url(/build/fonts/PPPangramSansCondensedSemiboldItalic-CondensedSemiboldItalic.78388295.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansCondensedSemiboldItalic-CondensedSemiboldItalic.9eee8fbc.woff) format('woff'),
        url(/build/fonts/PPPangramSansCondensedSemiboldItalic-CondensedSemiboldItalic.2fe273e4.ttf) format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}


/* ======================================= */
/* 500 – MEDIUM                             */
/* ======================================= */

@font-face {
    font-family: 'PPPangramSans';
    src: url(/build/fonts/PPPangramSansMedium-Medium.1232ae0b.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansMedium-Medium.4de31586.woff) format('woff'),
        url(/build/fonts/PPPangramSansMedium-Medium.e02c2176.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'PPPangramSans';
    src: url(/build/fonts/PPPangramSansMediumItalic-MediumItalic.998bfe30.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansMediumItalic-MediumItalic.bdcc9638.woff) format('woff'),
        url(/build/fonts/PPPangramSansMediumItalic-MediumItalic.dea33e2c.ttf) format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}


/* Condensed Medium */
@font-face {
    font-family: 'PPPangramSansCondensed';
    src: url(/build/fonts/PPPangramSansCondensedMedium-CondensedMedium.1565ca69.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansCondensedMedium-CondensedMedium.cbe1fb00.woff) format('woff'),
        url(/build/fonts/PPPangramSansCondensedMedium-CondensedMedium.6d0d5c9f.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'PPPangramSansCondensed';
    src: url(/build/fonts/PPPangramSansCondensedMediumItalic-CondensedMediumItalic.0d8b0bd1.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansCondensedMediumItalic-CondensedMediumItalic.36a923b0.woff) format('woff'),
        url(/build/fonts/PPPangramSansCondensedMediumItalic-CondensedMediumItalic.3a17b762.ttf) format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}


/* ======================================= */
/* 300 – LIGHT                              */
/* ======================================= */

@font-face {
    font-family: 'PPPangramSans';
    src: url(/build/fonts/PPPangramSansLight-Light.a2d41245.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansLight-Light.97c593ec.woff) format('woff'),
        url(/build/fonts/PPPangramSansLight-Light.067d8645.ttf) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'PPPangramSans';
    src: url(/build/fonts/PPPangramSansLightItalic-LightItalic.ba0e0131.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansLightItalic-LightItalic.3e9c2933.woff) format('woff'),
        url(/build/fonts/PPPangramSansLightItalic-LightItalic.1500d0cf.ttf) format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

/* Condensed Light */
@font-face {
    font-family: 'PPPangramSansCondensed';
    src: url(/build/fonts/PPPangramSansCondensedLight-CondensedLight.f25c5f57.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansCondensedLight-CondensedLight.9b3b0ceb.woff) format('woff'),
        url(/build/fonts/PPPangramSansCondensedLight-CondensedLight.776d1d22.ttf) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'PPPangramSansCondensed';
    src: url(/build/fonts/PPPangramSansCondensedLightItalic-CondensedLightItalic.9604b567.woff2) format('woff2'),
        url(/build/fonts/PPPangramSansCondensedLightItalic-CondensedLightItalic.d8db5cde.woff) format('woff'),
        url(/build/fonts/PPPangramSansCondensedLightItalic-CondensedLightItalic.0eceea6c.ttf) format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
        
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}


:root {
    /* Font families */
    --font-headline: "PPPangramSans", "Pangram Sans", sans-serif;
    --font-body: "PPPangramSans", "Pangram Sans", sans-serif;

    /* Font weights */
    --font-weight-bold: 700;
    --font-weight-regular: 500;

    /* ======================================= */
    /* Floors                                  */
    /* ======================================= */

    /* Floors / Headline / Headline Hero — Desktop */
    --floors-headline-headline_hero-desktop-font-style: normal;
    --floors-headline-headline_hero-desktop-font-variant: normal;
    --floors-headline-headline_hero-desktop-font-weight: var(--font-weight-bold);
    --floors-headline-headline_hero-desktop-font-size: 40px;
    --floors-headline-headline_hero-desktop-line-height: 48px;
    --floors-headline-headline_hero-desktop-font-family: var(--font-headline);

    /* Floors / Headline / Headline Hero — Mobile */
    --floors-headline-headline_hero-mobile-font-style: normal;
    --floors-headline-headline_hero-mobile-font-variant: normal;
    --floors-headline-headline_hero-mobile-font-weight: var(--font-weight-bold);
    --floors-headline-headline_hero-mobile-font-size: 24px;
    --floors-headline-headline_hero-mobile-line-height: 32px;
    --floors-headline-headline_hero-mobile-font-family: var(--font-headline);

    /* Floors / Headline / Headline Floor — Desktop */
    --floors-headline-headline_floor-desktop-font-style: normal;
    --floors-headline-headline_floor-desktop-font-variant: normal;
    --floors-headline-headline_floor-desktop-font-weight: var(--font-weight-regular);
    --floors-headline-headline_floor-desktop-font-size: 28px;
    --floors-headline-headline_floor-desktop-line-height: 32px;
    --floors-headline-headline_floor-desktop-font-family: var(--font-headline);

    /* Floors / Headline / Headline Floor — Mobile */
    --floors-headline-headline_floor-mobile-font-style: normal;
    --floors-headline-headline_floor-mobile-font-variant: normal;
    --floors-headline-headline_floor-mobile-font-weight: var(--font-weight-regular);
    --floors-headline-headline_floor-mobile-font-size: 18px;
    --floors-headline-headline_floor-mobile-line-height: 20px;
    --floors-headline-headline_floor-mobile-font-family: var(--font-headline);

    /* Floors / Headline / Headline Section — Desktop */
    --floors-headline-headline_section-desktop-font-style: normal;
    --floors-headline-headline_section-desktop-font-variant: normal;
    --floors-headline-headline_section-desktop-font-weight: var(--font-weight-regular);
    --floors-headline-headline_section-desktop-font-size: 22px;
    --floors-headline-headline_section-desktop-line-height: 28px;
    --floors-headline-headline_section-desktop-font-family: var(--font-headline);

    /* Floors / Headline / Headline Section — Mobile */
    --floors-headline-headline_section-mobile-font-style: normal;
    --floors-headline-headline_section-mobile-font-variant: normal;
    --floors-headline-headline_section-mobile-font-weight: var(--font-weight-regular);
    --floors-headline-headline_section-mobile-font-size: 16px;
    --floors-headline-headline_section-mobile-line-height: 16px;
    --floors-headline-headline_section-mobile-font-family: var(--font-headline);

    /* Floors / Body / Body Text — Desktop */
    --floors-body-body_text-desktop-font-style: normal;
    --floors-body-body_text-desktop-font-variant: normal;
    --floors-body-body_text-desktop-font-weight: var(--font-weight-regular);
    --floors-body-body_text-desktop-font-size: 16px;
    --floors-body-body_text-desktop-line-height: 24px;
    --floors-body-body_text-desktop-font-family: var(--font-body);

    /* Floors / Body / Body Text — Mobile */
    --floors-body-body_text-mobile-font-style: normal;
    --floors-body-body_text-mobile-font-variant: normal;
    --floors-body-body_text-mobile-font-weight: var(--font-weight-regular);
    --floors-body-body_text-mobile-font-size: 16px;
    --floors-body-body_text-mobile-line-height: 20px;
    --floors-body-body_text-mobile-font-family: var(--font-body);

    /* Floors / Number / Number Large - Desktop */
    --floors-number-number_large-desktop-font-style: normal;
    --floors-number-number_large-desktop-font-variant: normal;
    --floors-number-number_large-desktop-font-weight: var(--font-weight-bold);
    --floors-number-number_large-desktop-font-size: 56px;
    --floors-number-number_large-desktop-line-height: 56px;
    --floors-number-number_large-desktop-font-family: var(--font-headline);

    /* Floors / Number / Number Large - Mobile */
    --floors-number-number_large-mobile-font-style: normal;
    --floors-number-number_large-mobile-font-variant: normal;
    --floors-number-number_large-mobile-font-weight: var(--font-weight-bold);
    --floors-number-number_large-mobile-font-size: 24px;
    --floors-number-number_large-mobile-line-height: 24px;
    --floors-number-number_large-mobile-font-family: var(--font-headline);

    /* Floors / Number / Number Medium - Desktop */
    --floors-number-number_medium-desktop-font-style: normal;
    --floors-number-number_medium-desktop-font-variant: normal;
    --floors-number-number_medium-desktop-font-weight: var(--font-weight-bold);
    --floors-number-number_medium-desktop-font-size: 28px;
    --floors-number-number_medium-desktop-line-height: 32px;
    --floors-number-number_medium-desktop-font-family: var(--font-headline);

    /* Floors / Number / Number Medium - Mobile */
    --floors-number-number_medium-mobile-font-style: normal;
    --floors-number-number_medium-mobile-font-variant: normal;
    --floors-number-number_medium-mobile-font-weight: var(--font-weight-bold);
    --floors-number-number_medium-mobile-font-size: 20px;
    --floors-number-number_medium-mobile-line-height: 24px;
    --floors-number-number_medium-mobile-font-family: var(--font-headline);

    /* Floors / Number / Number Small - Desktop */
    --floors-number-number_small-desktop-font-style: normal;
    --floors-number-number_small-desktop-font-variant: normal;
    --floors-number-number_small-desktop-font-weight: var(--font-weight-bold);
    --floors-number-number_small-desktop-font-size: 22px;
    --floors-number-number_small-desktop-line-height: 22px;
    --floors-number-number_small-desktop-font-family: var(--font-body);

    /* Floors / Number / Number Small - Mobile */
    --floors-number-number_small-mobile-font-style: normal;
    --floors-number-number_small-mobile-font-variant: normal;
    --floors-number-number_small-mobile-font-weight: var(--font-weight-bold);
    --floors-number-number_small-mobile-font-size: 18px;
    --floors-number-number_small-mobile-line-height: 18px;
    --floors-number-number_small-mobile-font-family: var(--font-body);

    /* Floors / Basic / Label - Desktop */
    --floors-basic-label-desktop-font-style: normal;
    --floors-basic-label-desktop-font-variant: normal;
    --floors-basic-label-desktop-font-weight: var(--font-weight-regular);
    --floors-basic-label-desktop-font-size: 16px;
    --floors-basic-label-desktop-line-height: 20px;
    --floors-basic-label-desktop-font-family: var(--font-headline);

    /* Floors / Basic / Label - Mobile */
    --floors-basic-label-mobile-font-style: normal;
    --floors-basic-label-mobile-font-variant: normal;
    --floors-basic-label-mobile-font-weight: var(--font-weight-regular);
    --floors-basic-label-mobile-font-size: 14px;
    --floors-basic-label-mobile-line-height: 16px;
    --floors-basic-label-mobile-font-family: var(--font-headline);

    /* Floors / Basic / Description - Desktop */
    --floors-basic-description-desktop-font-style: normal;
    --floors-basic-description-desktop-font-variant: normal;
    --floors-basic-description-desktop-font-weight: var(--font-weight-regular);
    --floors-basic-description-desktop-font-size: 14px;
    --floors-basic-description-desktop-line-height: 16px;
    --floors-basic-description-desktop-font-family: var(--font-body);

    /* Floors / Basic / Description - Mobile */
    --floors-basic-description-mobile-font-style: normal;
    --floors-basic-description-mobile-font-variant: normal;
    --floors-basic-description-mobile-font-weight: var(--font-weight-regular);
    --floors-basic-description-mobile-font-size: 12px;
    --floors-basic-description-mobile-line-height: 16px;
    --floors-basic-description-mobile-font-family: var(--font-body);

    /* ======================================= */
    /* Container                               */
    /* ======================================= */

    /* Container / Large / Headline Bold - Desktop */
    --container-large-headline_bold-desktop-font-style: normal;
    --container-large-headline_bold-desktop-font-variant: normal;
    --container-large-headline_bold-desktop-font-weight: var(--font-weight-bold);
    --container-large-headline_bold-desktop-font-size: 28px;
    --container-large-headline_bold-desktop-line-height: 32px;
    --container-large-headline_bold-desktop-font-family: var(--font-headline);

    /* Container / Large / Headline Bold - Mobile */
    --container-large-headline_bold-mobile-font-style: normal;
    --container-large-headline_bold-mobile-font-variant: normal;
    --container-large-headline_bold-mobile-font-weight: var(--font-weight-bold);
    --container-large-headline_bold-mobile-font-size: 20px;
    --container-large-headline_bold-mobile-line-height: 24px;
    --container-large-headline_bold-mobile-font-family: var(--font-headline);

    /* Container / Large / Headline - Desktop */
    --container-large-headline-desktop-font-style: normal;
    --container-large-headline-desktop-font-variant: normal;
    --container-large-headline-desktop-font-weight: var(--font-weight-regular);
    --container-large-headline-desktop-font-size: 28px;
    --container-large-headline-desktop-line-height: 32px;
    --container-large-headline-desktop-font-family: var(--font-headline);

    /* Container / Large / Headline - Mobile */
    --container-large-headline-mobile-font-style: normal;
    --container-large-headline-mobile-font-variant: normal;
    --container-large-headline-mobile-font-weight: var(--font-weight-regular);
    --container-large-headline-mobile-font-size: 20px;
    --container-large-headline-mobile-line-height: 24px;
    --container-large-headline-mobile-font-family: var(--font-headline);

    /* Container / Large / Number - Desktop */
    --container-large-number-desktop-font-style: normal;
    --container-large-number-desktop-font-variant: normal;
    --container-large-number-desktop-font-weight: var(--font-weight-bold);
    --container-large-number-desktop-font-size: 18px;
    --container-large-number-desktop-line-height: 24px;
    --container-large-number-desktop-font-family: var(--font-body);

    /* Container / Large / Number - Mobile */
    --container-large-number-mobile-font-style: normal;
    --container-large-number-mobile-font-variant: normal;
    --container-large-number-mobile-font-weight: var(--font-weight-bold);
    --container-large-number-mobile-font-size: 16px;
    --container-large-number-mobile-line-height: 20px;
    --container-large-number-mobile-font-family: var(--font-body);

    /* Container / Large / Label - Desktop */
    --container-large-label-desktop-font-style: normal;
    --container-large-label-desktop-font-variant: normal;
    --container-large-label-desktop-font-weight: var(--font-weight-bold);
    --container-large-label-desktop-font-size: 20px;
    --container-large-label-desktop-line-height: 20px;
    --container-large-label-desktop-font-family: var(--font-body);

    /* Container / Large / Label - Mobile */
    --container-large-label-mobile-font-style: normal;
    --container-large-label-mobile-font-variant: normal;
    --container-large-label-mobile-font-weight: var(--font-weight-bold);
    --container-large-label-mobile-font-size: 16px;
    --container-large-label-mobile-line-height: 20px;
    --container-large-label-mobile-font-family: var(--font-body);

    /* Container / Large / Body Text - Desktop */
    --container-large-body_text-desktop-font-style: normal;
    --container-large-body_text-desktop-font-variant: normal;
    --container-large-body_text-desktop-font-weight: var(--font-weight-regular);
    --container-large-body_text-desktop-font-size: 16px;
    --container-large-body_text-desktop-line-height: 20px;
    --container-large-body_text-desktop-font-family: var(--font-body);

    /* Container / Large / Body Text - Mobile */
    --container-large-body_text-mobile-font-style: normal;
    --container-large-body_text-mobile-font-variant: normal;
    --container-large-body_text-mobile-font-weight: var(--font-weight-regular);
    --container-large-body_text-mobile-font-size: 16px;
    --container-large-body_text-mobile-line-height: 20px;
    --container-large-body_text-mobile-font-family: var(--font-body);

    /* Container / Medium / Headline Bold - Desktop */
    --container-medium-headline_bold-desktop-font-style: normal;
    --container-medium-headline_bold-desktop-font-variant: normal;
    --container-medium-headline_bold-desktop-font-weight: var(--font-weight-bold);
    --container-medium-headline_bold-desktop-font-size: 24px;
    --container-medium-headline_bold-desktop-line-height: 28px;
    --container-medium-headline_bold-desktop-font-family: var(--font-headline);

    /* Container / Medium / Headline Bold - Mobile */
    --container-medium-headline_bold-mobile-font-style: normal;
    --container-medium-headline_bold-mobile-font-variant: normal;
    --container-medium-headline_bold-mobile-font-weight: var(--font-weight-bold);
    --container-medium-headline_bold-mobile-font-size: 16px;
    --container-medium-headline_bold-mobile-line-height: 20px;
    --container-medium-headline_bold-mobile-font-family: var(--font-headline);

    /* Container / Medium / Headline - Desktop */
    --container-medium-headline-desktop-font-style: normal;
    --container-medium-headline-desktop-font-variant: normal;
    --container-medium-headline-desktop-font-weight: var(--font-weight-regular);
    --container-medium-headline-desktop-font-size: 24px;
    --container-medium-headline-desktop-line-height: 28px;
    --container-medium-headline-desktop-font-family: var(--font-headline);

    /* Container / Medium / Headline - Mobile */
    --container-medium-headline-mobile-font-style: normal;
    --container-medium-headline-mobile-font-variant: normal;
    --container-medium-headline-mobile-font-weight: var(--font-weight-regular);
    --container-medium-headline-mobile-font-size: 16px;
    --container-medium-headline-mobile-line-height: 20px;
    --container-medium-headline-mobile-font-family: var(--font-headline);

    /* Container / Medium / Number - Desktop */
    --container-medium-number-desktop-font-style: normal;
    --container-medium-number-desktop-font-variant: normal;
    --container-medium-number-desktop-font-weight: var(--font-weight-bold);
    --container-medium-number-desktop-font-size: 18px;
    --container-medium-number-desktop-line-height: 24px;
    --container-medium-number-desktop-font-family: var(--font-body);

    /* Container / Medium / Number - Mobile */
    --container-medium-number-mobile-font-style: normal;
    --container-medium-number-mobile-font-variant: normal;
    --container-medium-number-mobile-font-weight: var(--font-weight-bold);
    --container-medium-number-mobile-font-size: 14px;
    --container-medium-number-mobile-line-height: 16px;
    --container-medium-number-mobile-font-family: var(--font-body);

    /* Container / Medium / Label - Desktop */
    --container-medium-label-desktop-font-style: normal;
    --container-medium-label-desktop-font-variant: normal;
    --container-medium-label-desktop-font-weight: var(--font-weight-regular);
    --container-medium-label-desktop-font-size: 18px;
    --container-medium-label-desktop-line-height: 24px;
    --container-medium-label-desktop-font-family: var(--font-body);

    /* Container / Medium / Label - Mobile */
    --container-medium-label-mobile-font-style: normal;
    --container-medium-label-mobile-font-variant: normal;
    --container-medium-label-mobile-font-weight: var(--font-weight-regular);
    --container-medium-label-mobile-font-size: 14px;
    --container-medium-label-mobile-line-height: 16px;
    --container-medium-label-mobile-font-family: var(--font-body);

    /* Container / Medium / Label Bold - Desktop */
    --container-medium-label_bold-desktop-font-style: normal;
    --container-medium-label_bold-desktop-font-variant: normal;
    --container-medium-label_bold-desktop-font-weight: var(--font-weight-bold);
    --container-medium-label_bold-desktop-font-size: 18px;
    --container-medium-label_bold-desktop-line-height: 24px;
    --container-medium-label_bold-desktop-font-family: var(--font-body);

    /* Container / Medium / Label Bold - Mobile */
    --container-medium-label_bold-mobile-font-style: normal;
    --container-medium-label_bold-mobile-font-variant: normal;
    --container-medium-label_bold-mobile-font-weight: var(--font-weight-bold);
    --container-medium-label_bold-mobile-font-size: 14px;
    --container-medium-label_bold-mobile-line-height: 16px;
    --container-medium-label_bold-mobile-font-family: var(--font-body);

    /* Container / Medium / Body Text - Desktop */
    --container-medium-body_text-desktop-font-style: normal;
    --container-medium-body_text-desktop-font-variant: normal;
    --container-medium-body_text-desktop-font-weight: var(--font-weight-regular);
    --container-medium-body_text-desktop-font-size: 18px;
    --container-medium-body_text-desktop-line-height: 28px;
    --container-medium-body_text-desktop-font-family: var(--font-body);

    /* Container / Medium / Body Text - Mobile */
    --container-medium-body_text-mobile-font-style: normal;
    --container-medium-body_text-mobile-font-variant: normal;
    --container-medium-body_text-mobile-font-weight: var(--font-weight-regular);
    --container-medium-body_text-mobile-font-size: 14px;
    --container-medium-body_text-mobile-line-height: 20px;
    --container-medium-body_text-mobile-font-family: var(--font-body);

    /* Container / Small / Headline - Desktop */
    --container-small-headline-desktop-font-style: normal;
    --container-small-headline-desktop-font-variant: normal;
    --container-small-headline-desktop-font-weight: var(--font-weight-bold);
    --container-small-headline-desktop-font-size: 20px;
    --container-small-headline-desktop-line-height: 24px;
    --container-small-headline-desktop-font-family: var(--font-headline);

    /* Container / Small / Headline - Mobile */
    --container-small-headline-mobile-font-style: normal;
    --container-small-headline-mobile-font-variant: normal;
    --container-small-headline-mobile-font-weight: var(--font-weight-bold);
    --container-small-headline-mobile-font-size: 14px;
    --container-small-headline-mobile-line-height: 16px;
    --container-small-headline-mobile-font-family: var(--font-headline);

    /* Container / Small / Number - Desktop */
    --container-small-number-desktop-font-style: normal;
    --container-small-number-desktop-font-variant: normal;
    --container-small-number-desktop-font-weight: var(--font-weight-bold);
    --container-small-number-desktop-font-size: 14px;
    --container-small-number-desktop-line-height: 16px;
    --container-small-number-desktop-font-family: var(--font-body);

    /* Container / Small / Number - Mobile */
    --container-small-number-mobile-font-style: normal;
    --container-small-number-mobile-font-variant: normal;
    --container-small-number-mobile-font-weight: var(--font-weight-bold);
    --container-small-number-mobile-font-size: 12px;
    --container-small-number-mobile-line-height: 16px;
    --container-small-number-mobile-font-family: var(--font-body);

    /* Container / Small / Label - Desktop */
    --container-small-label-desktop-font-style: normal;
    --container-small-label-desktop-font-variant: normal;
    --container-small-label-desktop-font-weight: var(--font-weight-regular);
    --container-small-label-desktop-font-size: 14px;
    --container-small-label-desktop-line-height: 16px;
    --container-small-label-desktop-font-family: var(--font-body);

    /* Container / Small / Label - Mobile */
    --container-small-label-mobile-font-style: normal;
    --container-small-label-mobile-font-variant: normal;
    --container-small-label-mobile-font-weight: var(--font-weight-regular);
    --container-small-label-mobile-font-size: 12px;
    --container-small-label-mobile-line-height: 16px;
    --container-small-label-mobile-font-family: var(--font-body);

    /* Container / Small / Body Text - Desktop */
    --container-small-body_text-desktop-font-style: normal;
    --container-small-body_text-desktop-font-variant: normal;
    --container-small-body_text-desktop-font-weight: var(--font-weight-regular);
    --container-small-body_text-desktop-font-size: 16px;
    --container-small-body_text-desktop-line-height: 20px;
    --container-small-body_text-desktop-font-family: var(--font-body);

    /* Container / Small / Body Text - Mobile */
    --container-small-body_text-mobile-font-style: normal;
    --container-small-body_text-mobile-font-variant: normal;
    --container-small-body_text-mobile-font-weight: var(--font-weight-regular);
    --container-small-body_text-mobile-font-size: 12px;
    --container-small-body_text-mobile-line-height: 16px;
    --container-small-body_text-mobile-font-family: var(--font-body);

    /* Container / Promo / Headline - Desktop */
    --container-promo-headline-desktop-font-style: normal;
    --container-promo-headline-desktop-font-variant: normal;
    --container-promo-headline-desktop-font-weight: var(--font-weight-bold);
    --container-promo-headline-desktop-font-size: 32px;
    --container-promo-headline-desktop-line-height: 40px;
    --container-promo-headline-desktop-font-family: var(--font-headline);

    /* Container / Promo / Headline - Mobile */
    --container-promo-headline-mobile-font-style: normal;
    --container-promo-headline-mobile-font-variant: normal;
    --container-promo-headline-mobile-font-weight: var(--font-weight-bold);
    --container-promo-headline-mobile-font-size: 20px;
    --container-promo-headline-mobile-line-height: 24px;
    --container-promo-headline-mobile-font-family: var(--font-headline);

    /* Container / Promo / Subheadline - Desktop */
    --container-promo-subheadline-desktop-font-style: normal;
    --container-promo-subheadline-desktop-font-variant: normal;
    --container-promo-subheadline-desktop-font-weight: var(--font-weight-regular);
    --container-promo-subheadline-desktop-font-size: 24px;
    --container-promo-subheadline-desktop-line-height: 24px;
    --container-promo-subheadline-desktop-font-family: var(--font-body);

    /* Container / Promo / Subheadline - Mobile */
    --container-promo-subheadline-mobile-font-style: normal;
    --container-promo-subheadline-mobile-font-variant: normal;
    --container-promo-subheadline-mobile-font-weight: var(--font-weight-regular);
    --container-promo-subheadline-mobile-font-size: 16px;
    --container-promo-subheadline-mobile-line-height: 20px;
    --container-promo-subheadline-mobile-font-family: var(--font-body);

    /* Container / Promo / Body Text - Desktop */
    --container-promo-body_text-desktop-font-style: normal;
    --container-promo-body_text-desktop-font-variant: normal;
    --container-promo-body_text-desktop-font-weight: var(--font-weight-regular);
    --container-promo-body_text-desktop-font-size: 18px;
    --container-promo-body_text-desktop-line-height: 24px;
    --container-promo-body_text-desktop-font-family: var(--font-body);

    /* Container / Promo / Body Text - Mobile */
    --container-promo-body_text-mobile-font-style: normal;
    --container-promo-body_text-mobile-font-variant: normal;
    --container-promo-body_text-mobile-font-weight: var(--font-weight-regular);
    --container-promo-body_text-mobile-font-size: 14px;
    --container-promo-body_text-mobile-line-height: 20px;
    --container-promo-body_text-mobile-font-family: var(--font-body);

    /* ======================================= */
    /* Richtext                                */
    /* ======================================= */

    /* Richtext / Headline / Headline Article - Desktop */
    --richtext-headline-headline_article-desktop-font-style: normal;
    --richtext-headline-headline_article-desktop-font-variant: normal;
    --richtext-headline-headline_article-desktop-font-weight: var(--font-weight-regular);
    --richtext-headline-headline_article-desktop-font-size: 40px;
    --richtext-headline-headline_article-desktop-line-height: 52px;
    --richtext-headline-headline_article-desktop-font-family: var(--font-headline);

    /* Richtext / Headline / Headline Article - Mobile */
    --richtext-headline-headline_article-mobile-font-style: normal;
    --richtext-headline-headline_article-mobile-font-variant: normal;
    --richtext-headline-headline_article-mobile-font-weight: var(--font-weight-regular);
    --richtext-headline-headline_article-mobile-font-size: 28px;
    --richtext-headline-headline_article-mobile-line-height: 36px;
    --richtext-headline-headline_article-mobile-font-family: var(--font-headline);

    /* Richtext / Headline / Subheadline - Desktop */
    --richtext-headline-subheadline-desktop-font-style: normal;
    --richtext-headline-subheadline-desktop-font-variant: normal;
    --richtext-headline-subheadline-desktop-font-weight: var(--font-weight-regular);
    --richtext-headline-subheadline-desktop-font-size: 20px;
    --richtext-headline-subheadline-desktop-line-height: 32px;
    --richtext-headline-subheadline-desktop-font-family: var(--font-body);

    /* Richtext / Headline / Subheadline - Mobile */
    --richtext-headline-subheadline-mobile-font-style: normal;
    --richtext-headline-subheadline-mobile-font-variant: normal;
    --richtext-headline-subheadline-mobile-font-weight: var(--font-weight-regular);
    --richtext-headline-subheadline-mobile-font-size: 16px;
    --richtext-headline-subheadline-mobile-line-height: 24px;
    --richtext-headline-subheadline-mobile-font-family: var(--font-body);

    /* Richtext / Headline / Heading H1 - Desktop */
    --richtext-headline-heading_h1-desktop-font-style: normal;
    --richtext-headline-heading_h1-desktop-font-variant: normal;
    --richtext-headline-heading_h1-desktop-font-weight: var(--font-weight-regular);
    --richtext-headline-heading_h1-desktop-font-size: 36px;
    --richtext-headline-heading_h1-desktop-line-height: 40px;
    --richtext-headline-heading_h1-desktop-font-family: var(--font-headline);

    /* Richtext / Headline / Heading H1 - Mobile */
    --richtext-headline-heading_h1-mobile-font-style: normal;
    --richtext-headline-heading_h1-mobile-font-variant: normal;
    --richtext-headline-heading_h1-mobile-font-weight: var(--font-weight-regular);
    --richtext-headline-heading_h1-mobile-font-size: 20px;
    --richtext-headline-heading_h1-mobile-line-height: 28px;
    --richtext-headline-heading_h1-mobile-font-family: var(--font-headline);

    /* Richtext / Headline / Heading H2 - Desktop */
    --richtext-headline-heading_h2-desktop-font-style: normal;
    --richtext-headline-heading_h2-desktop-font-variant: normal;
    --richtext-headline-heading_h2-desktop-font-weight: var(--font-weight-regular);
    --richtext-headline-heading_h2-desktop-font-size: 28px;
    --richtext-headline-heading_h2-desktop-line-height: 32px;
    --richtext-headline-heading_h2-desktop-font-family: var(--font-headline);

    /* Richtext / Headline / Heading H2 - Mobile */
    --richtext-headline-heading_h2-mobile-font-style: normal;
    --richtext-headline-heading_h2-mobile-font-variant: normal;
    --richtext-headline-heading_h2-mobile-font-weight: var(--font-weight-regular);
    --richtext-headline-heading_h2-mobile-font-size: 18px;
    --richtext-headline-heading_h2-mobile-line-height: 20px;
    --richtext-headline-heading_h2-mobile-font-family: var(--font-headline);

    /* Richtext / Headline / Heading H3 - Desktop */
    --richtext-headline-heading_h3-desktop-font-style: normal;
    --richtext-headline-heading_h3-desktop-font-variant: normal;
    --richtext-headline-heading_h3-desktop-font-weight: var(--font-weight-regular);
    --richtext-headline-heading_h3-desktop-font-size: 24px;
    --richtext-headline-heading_h3-desktop-line-height: 28px;
    --richtext-headline-heading_h3-desktop-font-family: var(--font-headline);

    /* Richtext / Headline / Heading H3 - Mobile */
    --richtext-headline-heading_h3-mobile-font-style: normal;
    --richtext-headline-heading_h3-mobile-font-variant: normal;
    --richtext-headline-heading_h3-mobile-font-weight: var(--font-weight-regular);
    --richtext-headline-heading_h3-mobile-font-size: 16px;
    --richtext-headline-heading_h3-mobile-line-height: 20px;
    --richtext-headline-heading_h3-mobile-font-family: var(--font-headline);

    /* Richtext / Headline / Link Large - Desktop */
    --richtext-headline-link_large-desktop-font-style: normal;
    --richtext-headline-link_large-desktop-font-variant: normal;
    --richtext-headline-link_large-desktop-font-weight: var(--font-weight-regular);
    --richtext-headline-link_large-desktop-font-size: 28px;
    --richtext-headline-link_large-desktop-line-height: 32px;
    --richtext-headline-link_large-desktop-font-family: var(--font-headline);

    /* Richtext / Headline / Link Large - Mobile */
    --richtext-headline-link_large-mobile-font-style: normal;
    --richtext-headline-link_large-mobile-font-variant: normal;
    --richtext-headline-link_large-mobile-font-weight: var(--font-weight-regular);
    --richtext-headline-link_large-mobile-font-size: 18px;
    --richtext-headline-link_large-mobile-line-height: 20px;
    --richtext-headline-link_large-mobile-font-family: var(--font-headline);

    /* Richtext / Paragraph / Paragraph Default - Desktop */
    --richtext-paragraph-paragraph_default-desktop-font-style: normal;
    --richtext-paragraph-paragraph_default-desktop-font-variant: normal;
    --richtext-paragraph-paragraph_default-desktop-font-weight: var(--font-weight-regular);
    --richtext-paragraph-paragraph_default-desktop-font-size: 18px;
    --richtext-paragraph-paragraph_default-desktop-line-height: 28px;
    --richtext-paragraph-paragraph_default-desktop-font-family: var(--font-body);

    /* Richtext / Paragraph / Paragraph Default - Mobile */
    --richtext-paragraph-paragraph_default-mobile-font-style: normal;
    --richtext-paragraph-paragraph_default-mobile-font-variant: normal;
    --richtext-paragraph-paragraph_default-mobile-font-weight: var(--font-weight-regular);
    --richtext-paragraph-paragraph_default-mobile-font-size: 14px;
    --richtext-paragraph-paragraph_default-mobile-line-height: 28px;
    --richtext-paragraph-paragraph_default-mobile-font-family: var(--font-body);

    /* Richtext / Paragraph / Paragraph Bold - Desktop */
    --richtext-paragraph-paragraph_bold-desktop-font-style: normal;
    --richtext-paragraph-paragraph_bold-desktop-font-variant: normal;
    --richtext-paragraph-paragraph_bold-desktop-font-weight: var(--font-weight-bold);
    --richtext-paragraph-paragraph_bold-desktop-font-size: 18px;
    --richtext-paragraph-paragraph_bold-desktop-line-height: 28px;
    --richtext-paragraph-paragraph_bold-desktop-font-family: var(--font-body);

    /* Richtext / Paragraph / Paragraph Bold - Mobile */
    --richtext-paragraph-paragraph_bold-mobile-font-style: normal;
    --richtext-paragraph-paragraph_bold-mobile-font-variant: normal;
    --richtext-paragraph-paragraph_bold-mobile-font-weight: var(--font-weight-bold);
    --richtext-paragraph-paragraph_bold-mobile-font-size: 14px;
    --richtext-paragraph-paragraph_bold-mobile-line-height: 28px;
    --richtext-paragraph-paragraph_bold-mobile-font-family: var(--font-body);

    /* Richtext / Paragraph / Paragraph Link - Desktop */
    --richtext-paragraph-paragraph_link-desktop-font-style: normal;
    --richtext-paragraph-paragraph_link-desktop-font-variant: normal;
    --richtext-paragraph-paragraph_link-desktop-font-weight: var(--font-weight-regular);
    --richtext-paragraph-paragraph_link-desktop-font-size: 18px;
    --richtext-paragraph-paragraph_link-desktop-line-height: 28px;
    --richtext-paragraph-paragraph_link-desktop-font-family: var(--font-body);

    /* Richtext / Paragraph / Paragraph Link - Mobile */
    --richtext-paragraph-paragraph_link-mobile-font-style: normal;
    --richtext-paragraph-paragraph_link-mobile-font-variant: normal;
    --richtext-paragraph-paragraph_link-mobile-font-weight: var(--font-weight-regular);
    --richtext-paragraph-paragraph_link-mobile-font-size: 14px;
    --richtext-paragraph-paragraph_link-mobile-line-height: 28px;
    --richtext-paragraph-paragraph_link-mobile-font-family: var(--font-body);

    /* ======================================= */
    /* General                                 */
    /* ======================================= */

    /* General / CTA / Large Default - Desktop */
    --general-cta-large_default-desktop-font-style: normal;
    --general-cta-large_default-desktop-font-variant: normal;
    --general-cta-large_default-desktop-font-weight: var(--font-weight-regular);
    --general-cta-large_default-desktop-font-size: 20px;
    --general-cta-large_default-desktop-line-height: 24px;
    --general-cta-large_default-desktop-font-family: var(--font-body);

    /* General / CTA / Large Default - Mobile */
    --general-cta-large_default-mobile-font-style: normal;
    --general-cta-large_default-mobile-font-variant: normal;
    --general-cta-large_default-mobile-font-weight: var(--font-weight-regular);
    --general-cta-large_default-mobile-font-size: 16px;
    --general-cta-large_default-mobile-line-height: 20px;
    --general-cta-large_default-mobile-font-family: var(--font-body);

    /* General / CTA / Large Active - Desktop */
    --general-cta-large_active-desktop-font-style: normal;
    --general-cta-large_active-desktop-font-variant: normal;
    --general-cta-large_active-desktop-font-weight: var(--font-weight-bold);
    --general-cta-large_active-desktop-font-size: 20px;
    --general-cta-large_active-desktop-line-height: 24px;
    --general-cta-large_active-desktop-font-family: var(--font-body);

    /* General / CTA / Large Active - Mobile */
    --general-cta-large_active-mobile-font-style: normal;
    --general-cta-large_active-mobile-font-variant: normal;
    --general-cta-large_active-mobile-font-weight: var(--font-weight-bold);
    --general-cta-large_active-mobile-font-size: 16px;
    --general-cta-large_active-mobile-line-height: 20px;
    --general-cta-large_active-mobile-font-family: var(--font-body);

    /* General / CTA / Medium Default - Desktop */
    --general-cta-medium_default-desktop-font-style: normal;
    --general-cta-medium_default-desktop-font-variant: normal;
    --general-cta-medium_default-desktop-font-weight: var(--font-weight-regular);
    --general-cta-medium_default-desktop-font-size: 16px;
    --general-cta-medium_default-desktop-line-height: 20px;
    --general-cta-medium_default-desktop-font-family: var(--font-body);

    /* General / CTA / Medium Default - Mobile */
    --general-cta-medium_default-mobile-font-style: normal;
    --general-cta-medium_default-mobile-font-variant: normal;
    --general-cta-medium_default-mobile-font-weight: var(--font-weight-regular);
    --general-cta-medium_default-mobile-font-size: 14px;
    --general-cta-medium_default-mobile-line-height: 16px;
    --general-cta-medium_default-mobile-font-family: var(--font-body);

    /* General / CTA / Medium Active - Desktop */
    --general-cta-medium_active-desktop-font-style: normal;
    --general-cta-medium_active-desktop-font-variant: normal;
    --general-cta-medium_active-desktop-font-weight: var(--font-weight-bold);
    --general-cta-medium_active-desktop-font-size: 16px;
    --general-cta-medium_active-desktop-line-height: 20px;
    --general-cta-medium_active-desktop-font-family: var(--font-body);

    /* General / CTA / Medium Active - Mobile */
    --general-cta-medium_active-mobile-font-style: normal;
    --general-cta-medium_active-mobile-font-variant: normal;
    --general-cta-medium_active-mobile-font-weight: var(--font-weight-bold);
    --general-cta-medium_active-mobile-font-size: 14px;
    --general-cta-medium_active-mobile-line-height: 16px;
    --general-cta-medium_active-mobile-font-family: var(--font-body);

    /* General / CTA / Small Default - Desktop */
    --general-cta-small_default-desktop-font-style: normal;
    --general-cta-small_default-desktop-font-variant: normal;
    --general-cta-small_default-desktop-font-weight: var(--font-weight-regular);
    --general-cta-small_default-desktop-font-size: 14px;
    --general-cta-small_default-desktop-line-height: 16px;
    --general-cta-small_default-desktop-font-family: var(--font-body);

    /* General / CTA / Small Default - Mobile */
    --general-cta-small_default-mobile-font-style: normal;
    --general-cta-small_default-mobile-font-variant: normal;
    --general-cta-small_default-mobile-font-weight: var(--font-weight-regular);
    --general-cta-small_default-mobile-font-size: 14px;
    --general-cta-small_default-mobile-line-height: 16px;
    --general-cta-small_default-mobile-font-family: var(--font-body);

    /* General / CTA / Small Active - Desktop */
    --general-cta-small_active-desktop-font-style: normal;
    --general-cta-small_active-desktop-font-variant: normal;
    --general-cta-small_active-desktop-font-weight: var(--font-weight-bold);
    --general-cta-small_active-desktop-font-size: 14px;
    --general-cta-small_active-desktop-line-height: 16px;
    --general-cta-small_active-desktop-font-family: var(--font-body);

    /* General / CTA / Small Active - Mobile */
    --general-cta-small_active-mobile-font-style: normal;
    --general-cta-small_active-mobile-font-variant: normal;
    --general-cta-small_active-mobile-font-weight: var(--font-weight-bold);
    --general-cta-small_active-mobile-font-size: 14px;
    --general-cta-small_active-mobile-line-height: 16px;
    --general-cta-small_active-mobile-font-family: var(--font-body);

    /* General / CTA / Link Default - Desktop */
    --general-cta-link_default-desktop-font-style: normal;
    --general-cta-link_default-desktop-font-variant: normal;
    --general-cta-link_default-desktop-font-weight: var(--font-weight-regular);
    --general-cta-link_default-desktop-font-size: 14px;
    --general-cta-link_default-desktop-line-height: 16px;
    --general-cta-link_default-desktop-font-family: var(--font-body);

    /* General / CTA / Link Default - Mobile */
    --general-cta-link_default-mobile-font-style: normal;
    --general-cta-link_default-mobile-font-variant: normal;
    --general-cta-link_default-mobile-font-weight: var(--font-weight-regular);
    --general-cta-link_default-mobile-font-size: 14px;
    --general-cta-link_default-mobile-line-height: 16px;
    --general-cta-link_default-mobile-font-family: var(--font-body);

    /* General / Form / Text Default - Desktop */
    --general-form-text_default-desktop-font-style: normal;
    --general-form-text_default-desktop-font-variant: normal;
    --general-form-text_default-desktop-font-weight: var(--font-weight-regular);
    --general-form-text_default-desktop-font-size: 16px;
    --general-form-text_default-desktop-line-height: 20px;
    --general-form-text_default-desktop-font-family: var(--font-body);

    /* General / Form / Text Default - Mobile */
    --general-form-text_default-mobile-font-style: normal;
    --general-form-text_default-mobile-font-variant: normal;
    --general-form-text_default-mobile-font-weight: var(--font-weight-regular);
    --general-form-text_default-mobile-font-size: 16px;
    --general-form-text_default-mobile-line-height: 20px;
    --general-form-text_default-mobile-font-family: var(--font-body);

    /* General / Form / Text Bold - Desktop */
    --general-form-text_bold-desktop-font-style: normal;
    --general-form-text_bold-desktop-font-variant: normal;
    --general-form-text_bold-desktop-font-weight: var(--font-weight-bold);
    --general-form-text_bold-desktop-font-size: 16px;
    --general-form-text_bold-desktop-line-height: 20px;
    --general-form-text_bold-desktop-font-family: var(--font-body);

    /* General / Form / Text Bold - Mobile */
    --general-form-text_bold-mobile-font-style: normal;
    --general-form-text_bold-mobile-font-variant: normal;
    --general-form-text_bold-mobile-font-weight: var(--font-weight-bold);
    --general-form-text_bold-mobile-font-size: 16px;
    --general-form-text_bold-mobile-line-height: 20px;
    --general-form-text_bold-mobile-font-family: var(--font-body);

    /* General / Form / Label - Desktop */
    --general-form-label-desktop-font-style: normal;
    --general-form-label-desktop-font-variant: normal;
    --general-form-label-desktop-font-weight: var(--font-weight-regular);
    --general-form-label-desktop-font-size: 16px;
    --general-form-label-desktop-line-height: 20px;
    --general-form-label-desktop-font-family: var(--font-headline);

    /* General / Form / Label - Mobile */
    --general-form-label-mobile-font-style: normal;
    --general-form-label-mobile-font-variant: normal;
    --general-form-label-mobile-font-weight: var(--font-weight-regular);
    --general-form-label-mobile-font-size: 16px;
    --general-form-label-mobile-line-height: 20px;
    --general-form-label-mobile-font-family: var(--font-headline);

    /* General / Form / Description - Desktop */
    --general-form-description-desktop-font-style: normal;
    --general-form-description-desktop-font-variant: normal;
    --general-form-description-desktop-font-weight: var(--font-weight-regular);
    --general-form-description-desktop-font-size: 14px;
    --general-form-description-desktop-line-height: 16px;
    --general-form-description-desktop-font-family: var(--font-body);

    /* General / Form / Description - Mobile */
    --general-form-description-mobile-font-style: normal;
    --general-form-description-mobile-font-variant: normal;
    --general-form-description-mobile-font-weight: var(--font-weight-regular);
    --general-form-description-mobile-font-size: 12px;
    --general-form-description-mobile-line-height: 16px;
    --general-form-description-mobile-font-family: var(--font-body);

    /* General / Table / Header - Desktop */
    --general-table-header-desktop-font-style: normal;
    --general-table-header-desktop-font-variant: normal;
    --general-table-header-desktop-font-weight: var(--font-weight-regular);
    --general-table-header-desktop-font-size: 18px;
    --general-table-header-desktop-line-height: 24px;
    --general-table-header-desktop-font-family: var(--font-headline);

    /* General / Table / Header - Mobile */
    --general-table-header-mobile-font-style: normal;
    --general-table-header-mobile-font-variant: normal;
    --general-table-header-mobile-font-weight: var(--font-weight-regular);
    --general-table-header-mobile-font-size: 14px;
    --general-table-header-mobile-line-height: 16px;
    --general-table-header-mobile-font-family: var(--font-headline);

    /* General / Table / Text Default - Desktop */
    --general-table-text_default-desktop-font-style: normal;
    --general-table-text_default-desktop-font-variant: normal;
    --general-table-text_default-desktop-font-weight: var(--font-weight-regular);
    --general-table-text_default-desktop-font-size: 16px;
    --general-table-text_default-desktop-line-height: 24px;
    --general-table-text_default-desktop-font-family: var(--font-body);

    /* General / Table / Text Default - Mobile */
    --general-table-text_default-mobile-font-style: normal;
    --general-table-text_default-mobile-font-variant: normal;
    --general-table-text_default-mobile-font-weight: var(--font-weight-regular);
    --general-table-text_default-mobile-font-size: 12px;
    --general-table-text_default-mobile-line-height: 16px;
    --general-table-text_default-mobile-font-family: var(--font-body);

    /* General / Table / Text Bold - Desktop */
    --general-table-text_bold-desktop-font-style: normal;
    --general-table-text_bold-desktop-font-variant: normal;
    --general-table-text_bold-desktop-font-weight: var(--font-weight-bold);
    --general-table-text_bold-desktop-font-size: 16px;
    --general-table-text_bold-desktop-line-height: 24px;
    --general-table-text_bold-desktop-font-family: var(--font-body);

    /* General / Table / Text Bold - Mobile */
    --general-table-text_bold-mobile-font-style: normal;
    --general-table-text_bold-mobile-font-variant: normal;
    --general-table-text_bold-mobile-font-weight: var(--font-weight-bold);
    --general-table-text_bold-mobile-font-size: 12px;
    --general-table-text_bold-mobile-line-height: 16px;
    --general-table-text_bold-mobile-font-family: var(--font-body);

    /* General / Table / Description - Desktop */
    --general-table-description-desktop-font-style: normal;
    --general-table-description-desktop-font-variant: normal;
    --general-table-description-desktop-font-weight: var(--font-weight-regular);
    --general-table-description-desktop-font-size: 14px;
    --general-table-description-desktop-line-height: 16px;
    --general-table-description-desktop-font-family: var(--font-body);

    /* General / Table / Description - Mobile */
    --general-table-description-mobile-font-style: normal;
    --general-table-description-mobile-font-variant: normal;
    --general-table-description-mobile-font-weight: var(--font-weight-regular);
    --general-table-description-mobile-font-size: 12px;
    --general-table-description-mobile-line-height: 16px;
    --general-table-description-mobile-font-family: var(--font-body);

    /* General / Badge / Basic - Desktop */
    --general-badge-basic-desktop-font-style: normal;
    --general-badge-basic-desktop-font-variant: normal;
    --general-badge-basic-desktop-font-weight: var(--font-weight-bold);
    --general-badge-basic-desktop-font-size: 14px;
    --general-badge-basic-desktop-line-height: 16px;
    --general-badge-basic-desktop-font-family: var(--font-body);

    /* General / Badge / Basic - Mobile */
    --general-badge-basic-mobile-font-style: normal;
    --general-badge-basic-mobile-font-variant: normal;
    --general-badge-basic-mobile-font-weight: var(--font-weight-bold);
    --general-badge-basic-mobile-font-size: 12px;
    --general-badge-basic-mobile-line-height: 16px;
    --general-badge-basic-mobile-font-family: var(--font-body);


    /* font-style, font-variant, font-weight, font-size, line-height, font-family */
    --floors-headline-headline_hero-desktop-font: var(--floors-headline-headline_hero-desktop-font-style) var(--floors-headline-headline_hero-desktop-font-variant) var(--floors-headline-headline_hero-desktop-font-weight) var(--floors-headline-headline_hero-desktop-font-size) / var(--floors-headline-headline_hero-desktop-line-height) var(--floors-headline-headline_hero-desktop-font-family);
    --floors-headline-headline_hero-mobile-font: var(--floors-headline-headline_hero-mobile-font-style) var(--floors-headline-headline_hero-mobile-font-variant) var(--floors-headline-headline_hero-mobile-font-weight) var(--floors-headline-headline_hero-mobile-font-size) / var(--floors-headline-headline_hero-mobile-line-height) var(--floors-headline-headline_hero-mobile-font-family);
    --floors-headline-headline_floor-desktop-font: var(--floors-headline-headline_floor-desktop-font-style) var(--floors-headline-headline_floor-desktop-font-variant) var(--floors-headline-headline_floor-desktop-font-weight) var(--floors-headline-headline_floor-desktop-font-size) / var(--floors-headline-headline_floor-desktop-line-height) var(--floors-headline-headline_floor-desktop-font-family);
    --floors-headline-headline_floor-mobile-font: var(--floors-headline-headline_floor-mobile-font-style) var(--floors-headline-headline_floor-mobile-font-variant) var(--floors-headline-headline_floor-mobile-font-weight) var(--floors-headline-headline_floor-mobile-font-size) / var(--floors-headline-headline_floor-mobile-line-height) var(--floors-headline-headline_floor-mobile-font-family);
    --floors-headline-headline_section-desktop-font: var(--floors-headline-headline_section-desktop-font-style) var(--floors-headline-headline_section-desktop-font-variant) var(--floors-headline-headline_section-desktop-font-weight) var(--floors-headline-headline_section-desktop-font-size) / var(--floors-headline-headline_section-desktop-line-height) var(--floors-headline-headline_section-desktop-font-family);
    --floors-headline-headline_section-mobile-font: var(--floors-headline-headline_section-mobile-font-style) var(--floors-headline-headline_section-mobile-font-variant) var(--floors-headline-headline_section-mobile-font-weight) var(--floors-headline-headline_section-mobile-font-size) / var(--floors-headline-headline_section-mobile-line-height) var(--floors-headline-headline_section-mobile-font-family);
    --floors-body-body_text-desktop-font: var(--floors-body-body_text-desktop-font-style) var(--floors-body-body_text-desktop-font-variant) var(--floors-body-body_text-desktop-font-weight) var(--floors-body-body_text-desktop-font-size) / var(--floors-body-body_text-desktop-line-height) var(--floors-body-body_text-desktop-font-family);
    --floors-body-body_text-mobile-font: var(--floors-body-body_text-mobile-font-style) var(--floors-body-body_text-mobile-font-variant) var(--floors-body-body_text-mobile-font-weight) var(--floors-body-body_text-mobile-font-size) / var(--floors-body-body_text-mobile-line-height) var(--floors-body-body_text-mobile-font-family);
    --floors-number-number_large-desktop-font: var(--floors-number-number_large-desktop-font-style) var(--floors-number-number_large-desktop-font-variant) var(--floors-number-number_large-desktop-font-weight) var(--floors-number-number_large-desktop-font-size) / var(--floors-number-number_large-desktop-line-height) var(--floors-number-number_large-desktop-font-family);
    --floors-number-number_large-mobile-font: var(--floors-number-number_large-mobile-font-style) var(--floors-number-number_large-mobile-font-variant) var(--floors-number-number_large-mobile-font-weight) var(--floors-number-number_large-mobile-font-size) / var(--floors-number-number_large-mobile-line-height) var(--floors-number-number_large-mobile-font-family);
    --floors-number-number_medium-desktop-font: var(--floors-number-number_medium-desktop-font-style) var(--floors-number-number_medium-desktop-font-variant) var(--floors-number-number_medium-desktop-font-weight) var(--floors-number-number_medium-desktop-font-size) / var(--floors-number-number_medium-desktop-line-height) var(--floors-number-number_medium-desktop-font-family);
    --floors-number-number_medium-mobile-font: var(--floors-number-number_medium-mobile-font-style) var(--floors-number-number_medium-mobile-font-variant) var(--floors-number-number_medium-mobile-font-weight) var(--floors-number-number_medium-mobile-font-size) / var(--floors-number-number_medium-mobile-line-height) var(--floors-number-number_medium-mobile-font-family);
    --floors-number-number_small-desktop-font: var(--floors-number-number_small-desktop-font-style) var(--floors-number-number_small-desktop-font-variant) var(--floors-number-number_small-desktop-font-weight) var(--floors-number-number_small-desktop-font-size) / var(--floors-number-number_small-desktop-line-height) var(--floors-number-number_small-desktop-font-family);
    --floors-number-number_small-mobile-font: var(--floors-number-number_small-mobile-font-style) var(--floors-number-number_small-mobile-font-variant) var(--floors-number-number_small-mobile-font-weight) var(--floors-number-number_small-mobile-font-size) / var(--floors-number-number_small-mobile-line-height) var(--floors-number-number_small-mobile-font-family);
    --floors-basic-label-desktop-font: var(--floors-basic-label-desktop-font-style) var(--floors-basic-label-desktop-font-variant) var(--floors-basic-label-desktop-font-weight) var(--floors-basic-label-desktop-font-size) / var(--floors-basic-label-desktop-line-height) var(--floors-basic-label-desktop-font-family);
    --floors-basic-label-mobile-font: var(--floors-basic-label-mobile-font-style) var(--floors-basic-label-mobile-font-variant) var(--floors-basic-label-mobile-font-weight) var(--floors-basic-label-mobile-font-size) / var(--floors-basic-label-mobile-line-height) var(--floors-basic-label-mobile-font-family);
    --floors-basic-description-desktop-font: var(--floors-basic-description-desktop-font-style) var(--floors-basic-description-desktop-font-variant) var(--floors-basic-description-desktop-font-weight) var(--floors-basic-description-desktop-font-size) / var(--floors-basic-description-desktop-line-height) var(--floors-basic-description-desktop-font-family);
    --floors-basic-description-mobile-font: var(--floors-basic-description-mobile-font-style) var(--floors-basic-description-mobile-font-variant) var(--floors-basic-description-mobile-font-weight) var(--floors-basic-description-mobile-font-size) / var(--floors-basic-description-mobile-line-height) var(--floors-basic-description-mobile-font-family);
    --container-large-headline_bold-desktop-font: var(--container-large-headline_bold-desktop-font-style) var(--container-large-headline_bold-desktop-font-variant) var(--container-large-headline_bold-desktop-font-weight) var(--container-large-headline_bold-desktop-font-size) / var(--container-large-headline_bold-desktop-line-height) var(--container-large-headline_bold-desktop-font-family);
    --container-large-headline_bold-mobile-font: var(--container-large-headline_bold-mobile-font-style) var(--container-large-headline_bold-mobile-font-variant) var(--container-large-headline_bold-mobile-font-weight) var(--container-large-headline_bold-mobile-font-size) / var(--container-large-headline_bold-mobile-line-height) var(--container-large-headline_bold-mobile-font-family);
    --container-large-headline-desktop-font: var(--container-large-headline-desktop-font-style) var(--container-large-headline-desktop-font-variant) var(--container-large-headline-desktop-font-weight) var(--container-large-headline-desktop-font-size) / var(--container-large-headline-desktop-line-height) var(--container-large-headline-desktop-font-family);
    --container-large-headline-mobile-font: var(--container-large-headline-mobile-font-style) var(--container-large-headline-mobile-font-variant) var(--container-large-headline-mobile-font-weight) var(--container-large-headline-mobile-font-size) / var(--container-large-headline-mobile-line-height) var(--container-large-headline-mobile-font-family);
    --container-large-number-desktop-font: var(--container-large-number-desktop-font-style) var(--container-large-number-desktop-font-variant) var(--container-large-number-desktop-font-weight) var(--container-large-number-desktop-font-size) / var(--container-large-number-desktop-line-height) var(--container-large-number-desktop-font-family);
    --container-large-number-mobile-font: var(--container-large-number-mobile-font-style) var(--container-large-number-mobile-font-variant) var(--container-large-number-mobile-font-weight) var(--container-large-number-mobile-font-size) / var(--container-large-number-mobile-line-height) var(--container-large-number-mobile-font-family);
    --container-large-label-desktop-font: var(--container-large-label-desktop-font-style) var(--container-large-label-desktop-font-variant) var(--container-large-label-desktop-font-weight) var(--container-large-label-desktop-font-size) / var(--container-large-label-desktop-line-height) var(--container-large-label-desktop-font-family);
    --container-large-label-mobile-font: var(--container-large-label-mobile-font-style) var(--container-large-label-mobile-font-variant) var(--container-large-label-mobile-font-weight) var(--container-large-label-mobile-font-size) / var(--container-large-label-mobile-line-height) var(--container-large-label-mobile-font-family);
    --container-large-body_text-desktop-font: var(--container-large-body_text-desktop-font-style) var(--container-large-body_text-desktop-font-variant) var(--container-large-body_text-desktop-font-weight) var(--container-large-body_text-desktop-font-size) / var(--container-large-body_text-desktop-line-height) var(--container-large-body_text-desktop-font-family);
    --container-large-body_text-mobile-font: var(--container-large-body_text-mobile-font-style) var(--container-large-body_text-mobile-font-variant) var(--container-large-body_text-mobile-font-weight) var(--container-large-body_text-mobile-font-size) / var(--container-large-body_text-mobile-line-height) var(--container-large-body_text-mobile-font-family);
    --container-medium-headline_bold-desktop-font: var(--container-medium-headline_bold-desktop-font-style) var(--container-medium-headline_bold-desktop-font-variant) var(--container-medium-headline_bold-desktop-font-weight) var(--container-medium-headline_bold-desktop-font-size) / var(--container-medium-headline_bold-desktop-line-height) var(--container-medium-headline_bold-desktop-font-family);
    --container-medium-headline_bold-mobile-font: var(--container-medium-headline_bold-mobile-font-style) var(--container-medium-headline_bold-mobile-font-variant) var(--container-medium-headline_bold-mobile-font-weight) var(--container-medium-headline_bold-mobile-font-size) / var(--container-medium-headline_bold-mobile-line-height) var(--container-medium-headline_bold-mobile-font-family);
    --container-medium-headline-desktop-font: var(--container-medium-headline-desktop-font-style) var(--container-medium-headline-desktop-font-variant) var(--container-medium-headline-desktop-font-weight) var(--container-medium-headline-desktop-font-size) / var(--container-medium-headline-desktop-line-height) var(--container-medium-headline-desktop-font-family);
    --container-medium-headline-mobile-font: var(--container-medium-headline-mobile-font-style) var(--container-medium-headline-mobile-font-variant) var(--container-medium-headline-mobile-font-weight) var(--container-medium-headline-mobile-font-size) / var(--container-medium-headline-mobile-line-height) var(--container-medium-headline-mobile-font-family);
    --container-medium-number-desktop-font: var(--container-medium-number-desktop-font-style) var(--container-medium-number-desktop-font-variant) var(--container-medium-number-desktop-font-weight) var(--container-medium-number-desktop-font-size) / var(--container-medium-number-desktop-line-height) var(--container-medium-number-desktop-font-family);
    --container-medium-number-mobile-font: var(--container-medium-number-mobile-font-style) var(--container-medium-number-mobile-font-variant) var(--container-medium-number-mobile-font-weight) var(--container-medium-number-mobile-font-size) / var(--container-medium-number-mobile-line-height) var(--container-medium-number-mobile-font-family);
    --container-medium-label-desktop-font: var(--container-medium-label-desktop-font-style) var(--container-medium-label-desktop-font-variant) var(--container-medium-label-desktop-font-weight) var(--container-medium-label-desktop-font-size) / var(--container-medium-label-desktop-line-height) var(--container-medium-label-desktop-font-family);
    --container-medium-label-mobile-font: var(--container-medium-label-mobile-font-style) var(--container-medium-label-mobile-font-variant) var(--container-medium-label-mobile-font-weight) var(--container-medium-label-mobile-font-size) / var(--container-medium-label-mobile-line-height) var(--container-medium-label-mobile-font-family);
    --container-medium-label_bold-desktop-font: var(--container-medium-label_bold-desktop-font-style) var(--container-medium-label_bold-desktop-font-variant) var(--container-medium-label_bold-desktop-font-weight) var(--container-medium-label_bold-desktop-font-size) / var(--container-medium-label_bold-desktop-line-height) var(--container-medium-label_bold-desktop-font-family);
    --container-medium-label_bold-mobile-font: var(--container-medium-label_bold-mobile-font-style) var(--container-medium-label_bold-mobile-font-variant) var(--container-medium-label_bold-mobile-font-weight) var(--container-medium-label_bold-mobile-font-size) / var(--container-medium-label_bold-mobile-line-height) var(--container-medium-label_bold-mobile-font-family);
    --container-medium-body_text-desktop-font: var(--container-medium-body_text-desktop-font-style) var(--container-medium-body_text-desktop-font-variant) var(--container-medium-body_text-desktop-font-weight) var(--container-medium-body_text-desktop-font-size) / var(--container-medium-body_text-desktop-line-height) var(--container-medium-body_text-desktop-font-family);
    --container-medium-body_text-mobile-font: var(--container-medium-body_text-mobile-font-style) var(--container-medium-body_text-mobile-font-variant) var(--container-medium-body_text-mobile-font-weight) var(--container-medium-body_text-mobile-font-size) / var(--container-medium-body_text-mobile-line-height) var(--container-medium-body_text-mobile-font-family);
    --container-small-headline-desktop-font: var(--container-small-headline-desktop-font-style) var(--container-small-headline-desktop-font-variant) var(--container-small-headline-desktop-font-weight) var(--container-small-headline-desktop-font-size) / var(--container-small-headline-desktop-line-height) var(--container-small-headline-desktop-font-family);
    --container-small-headline-mobile-font: var(--container-small-headline-mobile-font-style) var(--container-small-headline-mobile-font-variant) var(--container-small-headline-mobile-font-weight) var(--container-small-headline-mobile-font-size) / var(--container-small-headline-mobile-line-height) var(--container-small-headline-mobile-font-family);
    --container-small-number-desktop-font: var(--container-small-number-desktop-font-style) var(--container-small-number-desktop-font-variant) var(--container-small-number-desktop-font-weight) var(--container-small-number-desktop-font-size) / var(--container-small-number-desktop-line-height) var(--container-small-number-desktop-font-family);
    --container-small-number-mobile-font: var(--container-small-number-mobile-font-style) var(--container-small-number-mobile-font-variant) var(--container-small-number-mobile-font-weight) var(--container-small-number-mobile-font-size) / var(--container-small-number-mobile-line-height) var(--container-small-number-mobile-font-family);
    --container-small-label-desktop-font: var(--container-small-label-desktop-font-style) var(--container-small-label-desktop-font-variant) var(--container-small-label-desktop-font-weight) var(--container-small-label-desktop-font-size) / var(--container-small-label-desktop-line-height) var(--container-small-label-desktop-font-family);
    --container-small-label-mobile-font: var(--container-small-label-mobile-font-style) var(--container-small-label-mobile-font-variant) var(--container-small-label-mobile-font-weight) var(--container-small-label-mobile-font-size) / var(--container-small-label-mobile-line-height) var(--container-small-label-mobile-font-family);
    --container-small-body_text-desktop-font: var(--container-small-body_text-desktop-font-style) var(--container-small-body_text-desktop-font-variant) var(--container-small-body_text-desktop-font-weight) var(--container-small-body_text-desktop-font-size) / var(--container-small-body_text-desktop-line-height) var(--container-small-body_text-desktop-font-family);
    --container-small-body_text-mobile-font: var(--container-small-body_text-mobile-font-style) var(--container-small-body_text-mobile-font-variant) var(--container-small-body_text-mobile-font-weight) var(--container-small-body_text-mobile-font-size) / var(--container-small-body_text-mobile-line-height) var(--container-small-body_text-mobile-font-family);
    --container-promo-headline-desktop-font: var(--container-promo-headline-desktop-font-style) var(--container-promo-headline-desktop-font-variant) var(--container-promo-headline-desktop-font-weight) var(--container-promo-headline-desktop-font-size) / var(--container-promo-headline-desktop-line-height) var(--container-promo-headline-desktop-font-family);
    --container-promo-headline-mobile-font: var(--container-promo-headline-mobile-font-style) var(--container-promo-headline-mobile-font-variant) var(--container-promo-headline-mobile-font-weight) var(--container-promo-headline-mobile-font-size) / var(--container-promo-headline-mobile-line-height) var(--container-promo-headline-mobile-font-family);
    --container-promo-subheadline-desktop-font: var(--container-promo-subheadline-desktop-font-style) var(--container-promo-subheadline-desktop-font-variant) var(--container-promo-subheadline-desktop-font-weight) var(--container-promo-subheadline-desktop-font-size) / var(--container-promo-subheadline-desktop-line-height) var(--container-promo-subheadline-desktop-font-family);
    --container-promo-subheadline-mobile-font: var(--container-promo-subheadline-mobile-font-style) var(--container-promo-subheadline-mobile-font-variant) var(--container-promo-subheadline-mobile-font-weight) var(--container-promo-subheadline-mobile-font-size) / var(--container-promo-subheadline-mobile-line-height) var(--container-promo-subheadline-mobile-font-family);
    --container-promo-body_text-desktop-font: var(--container-promo-body_text-desktop-font-style) var(--container-promo-body_text-desktop-font-variant) var(--container-promo-body_text-desktop-font-weight) var(--container-promo-body_text-desktop-font-size) / var(--container-promo-body_text-desktop-line-height) var(--container-promo-body_text-desktop-font-family);
    --container-promo-body_text-mobile-font: var(--container-promo-body_text-mobile-font-style) var(--container-promo-body_text-mobile-font-variant) var(--container-promo-body_text-mobile-font-weight) var(--container-promo-body_text-mobile-font-size) / var(--container-promo-body_text-mobile-line-height) var(--container-promo-body_text-mobile-font-family);
    --richtext-headline-headline_article-desktop-font: var(--richtext-headline-headline_article-desktop-font-style) var(--richtext-headline-headline_article-desktop-font-variant) var(--richtext-headline-headline_article-desktop-font-weight) var(--richtext-headline-headline_article-desktop-font-size) / var(--richtext-headline-headline_article-desktop-line-height) var(--richtext-headline-headline_article-desktop-font-family);
    --richtext-headline-headline_article-mobile-font: var(--richtext-headline-headline_article-mobile-font-style) var(--richtext-headline-headline_article-mobile-font-variant) var(--richtext-headline-headline_article-mobile-font-weight) var(--richtext-headline-headline_article-mobile-font-size) / var(--richtext-headline-headline_article-mobile-line-height) var(--richtext-headline-headline_article-mobile-font-family);
    --richtext-headline-subheadline-desktop-font: var(--richtext-headline-subheadline-desktop-font-style) var(--richtext-headline-subheadline-desktop-font-variant) var(--richtext-headline-subheadline-desktop-font-weight) var(--richtext-headline-subheadline-desktop-font-size) / var(--richtext-headline-subheadline-desktop-line-height) var(--richtext-headline-subheadline-desktop-font-family);
    --richtext-headline-subheadline-mobile-font: var(--richtext-headline-subheadline-mobile-font-style) var(--richtext-headline-subheadline-mobile-font-variant) var(--richtext-headline-subheadline-mobile-font-weight) var(--richtext-headline-subheadline-mobile-font-size) / var(--richtext-headline-subheadline-mobile-line-height) var(--richtext-headline-subheadline-mobile-font-family);
    --richtext-headline-heading_h1-desktop-font: var(--richtext-headline-heading_h1-desktop-font-style) var(--richtext-headline-heading_h1-desktop-font-variant) var(--richtext-headline-heading_h1-desktop-font-weight) var(--richtext-headline-heading_h1-desktop-font-size) / var(--richtext-headline-heading_h1-desktop-line-height) var(--richtext-headline-heading_h1-desktop-font-family);
    --richtext-headline-heading_h1-mobile-font: var(--richtext-headline-heading_h1-mobile-font-style) var(--richtext-headline-heading_h1-mobile-font-variant) var(--richtext-headline-heading_h1-mobile-font-weight) var(--richtext-headline-heading_h1-mobile-font-size) / var(--richtext-headline-heading_h1-mobile-line-height) var(--richtext-headline-heading_h1-mobile-font-family);
    --richtext-headline-heading_h2-desktop-font: var(--richtext-headline-heading_h2-desktop-font-style) var(--richtext-headline-heading_h2-desktop-font-variant) var(--richtext-headline-heading_h2-desktop-font-weight) var(--richtext-headline-heading_h2-desktop-font-size) / var(--richtext-headline-heading_h2-desktop-line-height) var(--richtext-headline-heading_h2-desktop-font-family);
    --richtext-headline-heading_h2-mobile-font: var(--richtext-headline-heading_h2-mobile-font-style) var(--richtext-headline-heading_h2-mobile-font-variant) var(--richtext-headline-heading_h2-mobile-font-weight) var(--richtext-headline-heading_h2-mobile-font-size) / var(--richtext-headline-heading_h2-mobile-line-height) var(--richtext-headline-heading_h2-mobile-font-family);
    --richtext-headline-heading_h3-desktop-font: var(--richtext-headline-heading_h3-desktop-font-style) var(--richtext-headline-heading_h3-desktop-font-variant) var(--richtext-headline-heading_h3-desktop-font-weight) var(--richtext-headline-heading_h3-desktop-font-size) / var(--richtext-headline-heading_h3-desktop-line-height) var(--richtext-headline-heading_h3-desktop-font-family);
    --richtext-headline-heading_h3-mobile-font: var(--richtext-headline-heading_h3-mobile-font-style) var(--richtext-headline-heading_h3-mobile-font-variant) var(--richtext-headline-heading_h3-mobile-font-weight) var(--richtext-headline-heading_h3-mobile-font-size) / var(--richtext-headline-heading_h3-mobile-line-height) var(--richtext-headline-heading_h3-mobile-font-family);
    --richtext-headline-link_large-desktop-font: var(--richtext-headline-link_large-desktop-font-style) var(--richtext-headline-link_large-desktop-font-variant) var(--richtext-headline-link_large-desktop-font-weight) var(--richtext-headline-link_large-desktop-font-size) / var(--richtext-headline-link_large-desktop-line-height) var(--richtext-headline-link_large-desktop-font-family);
    --richtext-headline-link_large-mobile-font: var(--richtext-headline-link_large-mobile-font-style) var(--richtext-headline-link_large-mobile-font-variant) var(--richtext-headline-link_large-mobile-font-weight) var(--richtext-headline-link_large-mobile-font-size) / var(--richtext-headline-link_large-mobile-line-height) var(--richtext-headline-link_large-mobile-font-family);
    --richtext-headline-link_large-text-decoration: underline;
    --richtext-paragraph-paragraph_default-desktop-font: var(--richtext-paragraph-paragraph_default-desktop-font-style) var(--richtext-paragraph-paragraph_default-desktop-font-variant) var(--richtext-paragraph-paragraph_default-desktop-font-weight) var(--richtext-paragraph-paragraph_default-desktop-font-size) / var(--richtext-paragraph-paragraph_default-desktop-line-height) var(--richtext-paragraph-paragraph_default-desktop-font-family);
    --richtext-paragraph-paragraph_default-mobile-font: var(--richtext-paragraph-paragraph_default-mobile-font-style) var(--richtext-paragraph-paragraph_default-mobile-font-variant) var(--richtext-paragraph-paragraph_default-mobile-font-weight) var(--richtext-paragraph-paragraph_default-mobile-font-size) / var(--richtext-paragraph-paragraph_default-mobile-line-height) var(--richtext-paragraph-paragraph_default-mobile-font-family);
    --richtext-paragraph-paragraph_bold-desktop-font: var(--richtext-paragraph-paragraph_bold-desktop-font-style) var(--richtext-paragraph-paragraph_bold-desktop-font-variant) var(--richtext-paragraph-paragraph_bold-desktop-font-weight) var(--richtext-paragraph-paragraph_bold-desktop-font-size) / var(--richtext-paragraph-paragraph_bold-desktop-line-height) var(--richtext-paragraph-paragraph_bold-desktop-font-family);
    --richtext-paragraph-paragraph_bold-mobile-font: var(--richtext-paragraph-paragraph_bold-mobile-font-style) var(--richtext-paragraph-paragraph_bold-mobile-font-variant) var(--richtext-paragraph-paragraph_bold-mobile-font-weight) var(--richtext-paragraph-paragraph_bold-mobile-font-size) / var(--richtext-paragraph-paragraph_bold-mobile-line-height) var(--richtext-paragraph-paragraph_bold-mobile-font-family);
    --richtext-paragraph-paragraph_link-desktop-font: var(--richtext-paragraph-paragraph_link-desktop-font-style) var(--richtext-paragraph-paragraph_link-desktop-font-variant) var(--richtext-paragraph-paragraph_link-desktop-font-weight) var(--richtext-paragraph-paragraph_link-desktop-font-size) / var(--richtext-paragraph-paragraph_link-desktop-line-height) var(--richtext-paragraph-paragraph_link-desktop-font-family);
    --richtext-paragraph-paragraph_link-mobile-font: var(--richtext-paragraph-paragraph_link-mobile-font-style) var(--richtext-paragraph-paragraph_link-mobile-font-variant) var(--richtext-paragraph-paragraph_link-mobile-font-weight) var(--richtext-paragraph-paragraph_link-mobile-font-size) / var(--richtext-paragraph-paragraph_link-mobile-line-height) var(--richtext-paragraph-paragraph_link-mobile-font-family);
    --richtext-paragraph-link-text-decoration: underline;
    --general-cta-large_default-desktop-font: var(--general-cta-large_default-desktop-font-style) var(--general-cta-large_default-desktop-font-variant) var(--general-cta-large_default-desktop-font-weight) var(--general-cta-large_default-desktop-font-size) / var(--general-cta-large_default-desktop-line-height) var(--general-cta-large_default-desktop-font-family);
    --general-cta-large_default-mobile-font: var(--general-cta-large_default-mobile-font-style) var(--general-cta-large_default-mobile-font-variant) var(--general-cta-large_default-mobile-font-weight) var(--general-cta-large_default-mobile-font-size) / var(--general-cta-large_default-mobile-line-height) var(--general-cta-large_default-mobile-font-family);
    --general-cta-large_default-text-transform: uppercase;
    --general-cta-large_active-desktop-font: var(--general-cta-large_active-desktop-font-style) var(--general-cta-large_active-desktop-font-variant) var(--general-cta-large_active-desktop-font-weight) var(--general-cta-large_active-desktop-font-size) / var(--general-cta-large_active-desktop-line-height) var(--general-cta-large_active-desktop-font-family);
    --general-cta-large_active-mobile-font: var(--general-cta-large_active-mobile-font-style) var(--general-cta-large_active-mobile-font-variant) var(--general-cta-large_active-mobile-font-weight) var(--general-cta-large_active-mobile-font-size) / var(--general-cta-large_active-mobile-line-height) var(--general-cta-large_active-mobile-font-family);
    --general-cta-large_active-text-transform: uppercase;
    --general-cta-medium_default-desktop-font: var(--general-cta-medium_default-desktop-font-style) var(--general-cta-medium_default-desktop-font-variant) var(--general-cta-medium_default-desktop-font-weight) var(--general-cta-medium_default-desktop-font-size) / var(--general-cta-medium_default-desktop-line-height) var(--general-cta-medium_default-desktop-font-family);
    --general-cta-medium_default-mobile-font: var(--general-cta-medium_default-mobile-font-style) var(--general-cta-medium_default-mobile-font-variant) var(--general-cta-medium_default-mobile-font-weight) var(--general-cta-medium_default-mobile-font-size) / var(--general-cta-medium_default-mobile-line-height) var(--general-cta-medium_default-mobile-font-family);
    --general-cta-medium_default-text-transform: uppercase;
    --general-cta-medium_active-desktop-font: var(--general-cta-medium_active-desktop-font-style) var(--general-cta-medium_active-desktop-font-variant) var(--general-cta-medium_active-desktop-font-weight) var(--general-cta-medium_active-desktop-font-size) / var(--general-cta-medium_active-desktop-line-height) var(--general-cta-medium_active-desktop-font-family);
    --general-cta-medium_active-mobile-font: var(--general-cta-medium_active-mobile-font-style) var(--general-cta-medium_active-mobile-font-variant) var(--general-cta-medium_active-mobile-font-weight) var(--general-cta-medium_active-mobile-font-size) / var(--general-cta-medium_active-mobile-line-height) var(--general-cta-medium_active-mobile-font-family);
    --general-cta-medium_active-text-transform: uppercase;
    --general-cta-small_default-desktop-font: var(--general-cta-small_default-desktop-font-style) var(--general-cta-small_default-desktop-font-variant) var(--general-cta-small_default-desktop-font-weight) var(--general-cta-small_default-desktop-font-size) / var(--general-cta-small_default-desktop-line-height) var(--general-cta-small_default-desktop-font-family);
    --general-cta-small_default-mobile-font: var(--general-cta-small_default-mobile-font-style) var(--general-cta-small_default-mobile-font-variant) var(--general-cta-small_default-mobile-font-weight) var(--general-cta-small_default-mobile-font-size) / var(--general-cta-small_default-mobile-line-height) var(--general-cta-small_default-mobile-font-family);
    --general-cta-small_default-text-transform: uppercase;
    --general-cta-small_active-desktop-font: var(--general-cta-small_active-desktop-font-style) var(--general-cta-small_active-desktop-font-variant) var(--general-cta-small_active-desktop-font-weight) var(--general-cta-small_active-desktop-font-size) / var(--general-cta-small_active-desktop-line-height) var(--general-cta-small_active-desktop-font-family);
    --general-cta-small_active-mobile-font: var(--general-cta-small_active-mobile-font-style) var(--general-cta-small_active-mobile-font-variant) var(--general-cta-small_active-mobile-font-weight) var(--general-cta-small_active-mobile-font-size) / var(--general-cta-small_active-mobile-line-height) var(--general-cta-small_active-mobile-font-family);
    --general-cta-small_active-text-transform: uppercase;
    --general-cta-link_default-desktop-font: var(--general-cta-link_default-desktop-font-style) var(--general-cta-link_default-desktop-font-variant) var(--general-cta-link_default-desktop-font-weight) var(--general-cta-link_default-desktop-font-size) / var(--general-cta-link_default-desktop-line-height) var(--general-cta-link_default-desktop-font-family);
    --general-cta-link_default-mobile-font: var(--general-cta-link_default-mobile-font-style) var(--general-cta-link_default-mobile-font-variant) var(--general-cta-link_default-mobile-font-weight) var(--general-cta-link_default-mobile-font-size) / var(--general-cta-link_default-mobile-line-height) var(--general-cta-link_default-mobile-font-family);
    --general-form-text_default-desktop-font: var(--general-form-text_default-desktop-font-style) var(--general-form-text_default-desktop-font-variant) var(--general-form-text_default-desktop-font-weight) var(--general-form-text_default-desktop-font-size) / var(--general-form-text_default-desktop-line-height) var(--general-form-text_default-desktop-font-family);
    --general-form-text_default-mobile-font: var(--general-form-text_default-mobile-font-style) var(--general-form-text_default-mobile-font-variant) var(--general-form-text_default-mobile-font-weight) var(--general-form-text_default-mobile-font-size) / var(--general-form-text_default-mobile-line-height) var(--general-form-text_default-mobile-font-family);
    --general-form-text_bold-desktop-font: var(--general-form-text_bold-desktop-font-style) var(--general-form-text_bold-desktop-font-variant) var(--general-form-text_bold-desktop-font-weight) var(--general-form-text_bold-desktop-font-size) / var(--general-form-text_bold-desktop-line-height) var(--general-form-text_bold-desktop-font-family);
    --general-form-text_bold-mobile-font: var(--general-form-text_bold-mobile-font-style) var(--general-form-text_bold-mobile-font-variant) var(--general-form-text_bold-mobile-font-weight) var(--general-form-text_bold-mobile-font-size) / var(--general-form-text_bold-mobile-line-height) var(--general-form-text_bold-mobile-font-family);
    --general-form-label-desktop-font: var(--general-form-label-desktop-font-style) var(--general-form-label-desktop-font-variant) var(--general-form-label-desktop-font-weight) var(--general-form-label-desktop-font-size) / var(--general-form-label-desktop-line-height) var(--general-form-label-desktop-font-family);
    --general-form-label-mobile-font: var(--general-form-label-mobile-font-style) var(--general-form-label-mobile-font-variant) var(--general-form-label-mobile-font-weight) var(--general-form-label-mobile-font-size) / var(--general-form-label-mobile-line-height) var(--general-form-label-mobile-font-family);
    --general-form-description-desktop-font: var(--general-form-description-desktop-font-style) var(--general-form-description-desktop-font-variant) var(--general-form-description-desktop-font-weight) var(--general-form-description-desktop-font-size) / var(--general-form-description-desktop-line-height) var(--general-form-description-desktop-font-family);
    --general-form-description-mobile-font: var(--general-form-description-mobile-font-style) var(--general-form-description-mobile-font-variant) var(--general-form-description-mobile-font-weight) var(--general-form-description-mobile-font-size) / var(--general-form-description-mobile-line-height) var(--general-form-description-mobile-font-family);
    --general-table-header-desktop-font: var(--general-table-header-desktop-font-style) var(--general-table-header-desktop-font-variant) var(--general-table-header-desktop-font-weight) var(--general-table-header-desktop-font-size) / var(--general-table-header-desktop-line-height) var(--general-table-header-desktop-font-family);
    --general-table-header-mobile-font: var(--general-table-header-mobile-font-style) var(--general-table-header-mobile-font-variant) var(--general-table-header-mobile-font-weight) var(--general-table-header-mobile-font-size) / var(--general-table-header-mobile-line-height) var(--general-table-header-mobile-font-family);
    --general-table-header-text-transform: uppercase;
    --general-table-text_default-desktop-font: var(--general-table-text_default-desktop-font-style) var(--general-table-text_default-desktop-font-variant) var(--general-table-text_default-desktop-font-weight) var(--general-table-text_default-desktop-font-size) / var(--general-table-text_default-desktop-line-height) var(--general-table-text_default-desktop-font-family);
    --general-table-text_default-mobile-font: var(--general-table-text_default-mobile-font-style) var(--general-table-text_default-mobile-font-variant) var(--general-table-text_default-mobile-font-weight) var(--general-table-text_default-mobile-font-size) / var(--general-table-text_default-mobile-line-height) var(--general-table-text_default-mobile-font-family);
    --general-table-text_bold-desktop-font: var(--general-table-text_bold-desktop-font-style) var(--general-table-text_bold-desktop-font-variant) var(--general-table-text_bold-desktop-font-weight) var(--general-table-text_bold-desktop-font-size) / var(--general-table-text_bold-desktop-line-height) var(--general-table-text_bold-desktop-font-family);
    --general-table-text_bold-mobile-font: var(--general-table-text_bold-mobile-font-style) var(--general-table-text_bold-mobile-font-variant) var(--general-table-text_bold-mobile-font-weight) var(--general-table-text_bold-mobile-font-size) / var(--general-table-text_bold-mobile-line-height) var(--general-table-text_bold-mobile-font-family);
    --general-table-description-desktop-font: var(--general-table-description-desktop-font-style) var(--general-table-description-desktop-font-variant) var(--general-table-description-desktop-font-weight) var(--general-table-description-desktop-font-size) / var(--general-table-description-desktop-line-height) var(--general-table-description-desktop-font-family);
    --general-table-description-mobile-font: var(--general-table-description-mobile-font-style) var(--general-table-description-mobile-font-variant) var(--general-table-description-mobile-font-weight) var(--general-table-description-mobile-font-size) / var(--general-table-description-mobile-line-height) var(--general-table-description-mobile-font-family);
    --general-badge-basic-desktop-font: var(--general-badge-basic-desktop-font-style) var(--general-badge-basic-desktop-font-variant) var(--general-badge-basic-desktop-font-weight) var(--general-badge-basic-desktop-font-size) / var(--general-badge-basic-desktop-line-height) var(--general-badge-basic-desktop-font-family);
    --general-badge-basic-mobile-font: var(--general-badge-basic-mobile-font-style) var(--general-badge-basic-mobile-font-variant) var(--general-badge-basic-mobile-font-weight) var(--general-badge-basic-mobile-font-size) / var(--general-badge-basic-mobile-line-height) var(--general-badge-basic-mobile-font-family);

    /* Mobile - 320 - 767 px */
    --floors-headline-headline_hero-font: var(--floors-headline-headline_hero-mobile-font);
    --floors-headline-headline_floor-font: var(--floors-headline-headline_floor-mobile-font);
    --floors-headline-headline_section-font: var(--floors-headline-headline_section-mobile-font);
    --floors-body-body_text-font: var(--floors-body-body_text-mobile-font);
    --floors-number-number_large-font: var(--floors-number-number_large-mobile-font);
    --floors-number-number_medium-font: var(--floors-number-number_medium-mobile-font);
    --floors-number-number_small-font: var(--floors-number-number_small-mobile-font);
    --floors-basic-label-font: var(--floors-basic-label-mobile-font);
    --floors-basic-description-font: var(--floors-basic-description-mobile-font);
    --container-large-headline_bold-font: var(--container-large-headline_bold-mobile-font);
    --container-large-headline-font: var(--container-large-headline-mobile-font);
    --container-large-number-font: var(--container-large-number-mobile-font);
    --container-large-label-font: var(--container-large-label-mobile-font);
    --container-large-body_text-font: var(--container-large-body_text-mobile-font);
    --container-medium-headline_bold-font: var(--container-medium-headline_bold-mobile-font);
    --container-medium-headline-font: var(--container-medium-headline-mobile-font);
    --container-medium-number-font: var(--container-medium-number-mobile-font);
    --container-medium-label-font: var(--container-medium-label-mobile-font);
    --container-medium-label_bold-font: var(--container-medium-label_bold-mobile-font);
    --container-medium-body_text-font: var(--container-medium-body_text-mobile-font);
    --container-medium-body_text-line-height: var(--container-medium-body_text-mobile-line-height); /* Line height */
    --container-small-headline-font: var(--container-small-headline-mobile-font);
    --container-small-number-font: var(--container-small-number-mobile-font);
    --container-small-label-font: var(--container-small-label-mobile-font);
    --container-small-body_text-font: var(--container-small-body_text-mobile-font);
    --container-promo-headline-font: var(--container-promo-headline-mobile-font);
    --container-promo-subheadline-font: var(--container-promo-subheadline-mobile-font);
    --container-promo-body_text-font: var(--container-promo-body_text-mobile-font);
    --richtext-headline-headline_article-font: var(--richtext-headline-headline_article-mobile-font);
    --richtext-headline-subheadline-font: var(--richtext-headline-subheadline-mobile-font);
    --richtext-headline-heading_h1-font: var(--richtext-headline-heading_h1-mobile-font);
    --richtext-headline-heading_h2-font: var(--richtext-headline-heading_h2-mobile-font);
    --richtext-headline-heading_h3-font: var(--richtext-headline-heading_h3-mobile-font);
    --richtext-headline-link_large-font: var(--richtext-headline-link_large-mobile-font);
    --richtext-paragraph-paragraph_default-font: var(--richtext-paragraph-paragraph_default-mobile-font);
    --richtext-paragraph-paragraph_bold-font: var(--richtext-paragraph-paragraph_bold-mobile-font);
    --richtext-paragraph-paragraph_link-font: var(--richtext-paragraph-paragraph_link-mobile-font);
    --general-cta-large_default-font: var(--general-cta-large_default-mobile-font);
    --general-cta-large_active-font: var(--general-cta-large_active-mobile-font);
    --general-cta-medium_default-font: var(--general-cta-medium_default-mobile-font);
    --general-cta-medium_active-font: var(--general-cta-medium_active-mobile-font);
    --general-cta-small_default-font: var(--general-cta-small_default-mobile-font);
    --general-cta-small_active-font: var(--general-cta-small_active-mobile-font);
    --general-cta-link_default-font: var(--general-cta-link_default-mobile-font);
    --general-form-text_default-font: var(--general-form-text_default-mobile-font);
    --general-form-text_bold-font: var(--general-form-text_bold-mobile-font);
    --general-form-label-font: var(--general-form-label-mobile-font);
    --general-form-description-font: var(--general-form-description-mobile-font);
    --general-table-header-font: var(--general-table-header-mobile-font);
    --general-table-text_default-font: var(--general-table-text_default-mobile-font);
    --general-table-text_bold-font: var(--general-table-text_bold-mobile-font);
    --general-table-description-font: var(--general-table-description-mobile-font);
    --general-badge-basic-font: var(--general-badge-basic-mobile-font);

    /* Mobile - 768 - 960 px */
    /* @media (min-width: 768px) {
    } */

    /* Laptop & tablet - 961 - 1279 px */
    @media (min-width: 961px) {
        --floors-headline-headline_hero-font: var(--floors-headline-headline_hero-desktop-font);
        --floors-headline-headline_floor-font: var(--floors-headline-headline_floor-desktop-font);
        --floors-headline-headline_section-font: var(--floors-headline-headline_section-desktop-font);
        --floors-body-body_text-font: var(--floors-body-body_text-desktop-font);
        --floors-number-number_large-font: var(--floors-number-number_large-desktop-font);
        --floors-number-number_medium-font: var(--floors-number-number_medium-desktop-font);
        --floors-number-number_small-font: var(--floors-number-number_small-desktop-font);
        --floors-basic-label-font: var(--floors-basic-label-desktop-font);
        --floors-basic-description-font: var(--floors-basic-description-desktop-font);
        --container-large-headline_bold-font: var(--container-large-headline_bold-desktop-font);
        --container-large-headline-font: var(--container-large-headline-desktop-font);
        --container-large-number-font: var(--container-large-number-desktop-font);
        --container-large-label-font: var(--container-large-label-desktop-font);
        --container-large-body_text-font: var(--container-large-body_text-desktop-font);
        --container-medium-headline_bold-font: var(--container-medium-headline_bold-desktop-font);
        --container-medium-headline-font: var(--container-medium-headline-desktop-font);
        --container-medium-number-font: var(--container-medium-number-desktop-font);
        --container-medium-label-font: var(--container-medium-label-desktop-font);
        --container-medium-label_bold-font: var(--container-medium-label_bold-desktop-font);
        --container-medium-body_text-font: var(--container-medium-body_text-desktop-font);
        --container-medium-body_text-line-height: var(--container-medium-body_text-desktop-line-height); /* Line height */
        --container-small-headline-font: var(--container-small-headline-desktop-font);
        --container-small-number-font: var(--container-small-number-desktop-font);
        --container-small-label-font: var(--container-small-label-desktop-font);
        --container-small-body_text-font: var(--container-small-body_text-desktop-font);
        --container-promo-headline-font: var(--container-promo-headline-desktop-font);
        --container-promo-subheadline-font: var(--container-promo-subheadline-desktop-font);
        --container-promo-body_text-font: var(--container-promo-body_text-desktop-font);
        --richtext-headline-headline_article-font: var(--richtext-headline-headline_article-desktop-font);
        --richtext-headline-subheadline-font: var(--richtext-headline-subheadline-desktop-font);
        --richtext-headline-heading_h1-font: var(--richtext-headline-heading_h1-desktop-font);
        --richtext-headline-heading_h2-font: var(--richtext-headline-heading_h2-desktop-font);
        --richtext-headline-heading_h3-font: var(--richtext-headline-heading_h3-desktop-font);
        --richtext-headline-link_large-font: var(--richtext-headline-link_large-desktop-font);
        --richtext-paragraph-paragraph_default-font: var(--richtext-paragraph-paragraph_default-desktop-font);
        --richtext-paragraph-paragraph_bold-font: var(--richtext-paragraph-paragraph_bold-desktop-font);
        --richtext-paragraph-paragraph_link-font: var(--richtext-paragraph-paragraph_link-desktop-font);
        --general-cta-large_default-font: var(--general-cta-large_default-desktop-font);
        --general-cta-large_active-font: var(--general-cta-large_active-desktop-font);
        --general-cta-medium_default-font: var(--general-cta-medium_default-desktop-font);
        --general-cta-medium_active-font: var(--general-cta-medium_active-desktop-font);
        --general-cta-small_default-font: var(--general-cta-small_default-desktop-font);
        --general-cta-small_active-font: var(--general-cta-small_active-desktop-font);
        --general-cta-link_default-font: var(--general-cta-link_default-desktop-font);
        --general-form-text_default-font: var(--general-form-text_default-desktop-font);
        --general-form-text_bold-font: var(--general-form-text_bold-desktop-font);
        --general-form-label-font: var(--general-form-label-desktop-font);
        --general-form-description-font: var(--general-form-description-desktop-font);
        --general-table-header-font: var(--general-table-header-desktop-font);
        --general-table-text_default-font: var(--general-table-text_default-desktop-font);
        --general-table-text_bold-font: var(--general-table-text_bold-desktop-font);
        --general-table-description-font: var(--general-table-description-desktop-font);
        --general-badge-basic-font: var(--general-badge-basic-desktop-font);
    }

    /* Laptop & tablet - 1280 - 1680 px */
    /* @media (min-width: 1280px) {
    } */

    /* Desktop - 1681 - 2200 px */
    /* @media (min-width: 1681px) {
    } */

    /* Desktop - 2201 px and above */
    /* @media (min-width: 2201px) {
    } */
}

.text-start {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-end {
    text-align: right !important;
}

.text-decoration-none {
    text-decoration: none !important;
}

.text-decoration-underline {
    text-decoration: underline !important;
}

.text-decoration-line-through {
    text-decoration: line-through !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.text-wrap {
    white-space: normal !important;
}

.text-nowrap {
    white-space: nowrap !important;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

a {
    color: var(--text-body-body-base);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }

    &:visited {
        color: var(--text-body-body-base);
    }
}

p {
    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

/* Mobile - 320 - 767 px */

.table {
    width: 100%;
    caption-side: bottom;
    border-collapse: collapse;
    table-layout: fixed;

    color: var(--text-body-body-base);
    background-color: var(--background-white-background);

    thead {
        tr {
            border-bottom: 1px solid var(--form-form-45);
            
            color: var(--text-body-body-50);

            th {
                text-align: left;
                text-transform: uppercase;

                font: var(--general-table-header-font);

                padding: var(--padding-padding-medium) var(--padding-padding-large);

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    tbody {
        tr {
            border-bottom: 1px solid var(--form-form-15);

            td {
                font: var(--general-table-text_default-font);

                padding: var(--padding-padding-medium) var(--padding-padding-large);
        
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            th {
                font: var(--general-table-header-font);

                color: var(--text-body-body-50);

                padding: var(--padding-padding-medium) var(--padding-padding-large);

                text-align: left;
            }
        }
    }

    &.table--no-bottom-border {
        tbody {
            tr:last-child {
                border-bottom: none;

                td {
                    padding-bottom: var(--padding-padding-large);
                }
            }
        }
    }
}

.table__column--full-width {
    width: 100%;
}

.width-50 {
    width: 50%;
}

.width-25 {
    width: 25%;
}

.width-15 {
    width: 15%;
}

.width-7 {
    width: 7%;
}

.table__column--min-width {
    width: 0%;
}

.table__cell--semibold {
    font: var(--font-table-text-sb) !important;
}

.last-cell {
    text-align: right;
    padding-right: 0 !important;
}

.text-align-right {
    text-align: right !important; 
}

.icon-cell {
    width: 3rem;
    vertical-align: middle;
    text-align: center;
    svg {
        vertical-align: middle;
    }
}

/*
 * Chart legend: a colour-swatched key beneath a donut chart. Each row pairs a
 * palette swatch + cause label (left, fills the width) with its value and bold
 * percentage share pinned to the right.
 */
.graph-legend-table {
    width: 100%;
    margin-top: var(--padding-padding-large);
    border-collapse: collapse;
    table-layout: auto;

    color: var(--text-body-body-base);
    font: var(--general-table-text_default-font);

    td {
        padding: var(--padding-padding-medium) var(--padding-padding-none);

        vertical-align: middle;
        white-space: nowrap;
    }

    .graph-legend-table__label-cell {
        width: 100%;
    }

    .graph-legend-table__label {
        display: flex;
        align-items: center;

        column-gap: var(--padding-padding-large);
    }

    /* Row matching the hovered donut slice (components--chart-legend-hover). */
    tr[data-highlighted] .graph-legend-table__label {
        font: var(--general-table-text_bold-font);
    }

    .graph-legend-table__swatch {
        flex: 0 0 auto;

        width: 1rem;
        height: 1rem;
    }

    .graph-legend-table__value {
        padding-left: var(--padding-padding-xl);

        text-align: right;

        color: var(--text-body-body-50);
    }

    .graph-legend-table__percentage {
        padding-left: var(--padding-padding-xl);

        text-align: right;

        font: var(--general-table-text_bold-font);
    }
}

/*
 * Cards-on-mobile, table-on-desktop layout.
 *
 * Below 961px every row is a self-contained stacked card (the column header is
 * hidden and each cell carries its own inline label); from 961px the same rows
 * line up into a bordered table. Both layouts are driven by grid-template-areas
 * on the row, so the markup never changes between breakpoints.
 */
.cards-table {
    display: grid;
    row-gap: var(--padding-padding-large);

    color: var(--text-body-body-base);
    font: var(--container-medium-label-font);

    /* Column header only belongs to the desktop table layout. */
    .cards-table__head {
        display: none;

        /* The whole header cell is the sort link; the OrderButton icon only
           indicates the active direction. Strip the default anchor look. */
        .cards-table__cell {
            text-decoration: none;
            cursor: pointer;
        }
    }

    .cards-table__row {
        display: grid;
        grid-template-areas:
            "service"
            "availability"
            "downtime"
            "outages";
        row-gap: var(--padding-padding-large);

        padding: var(--padding-padding-xxl);

        border: 1px solid var(--form-form-15);
        border-radius: var(--corner-radius-components-outside);
        background: var(--background-background-level-3);
    }

    .cards-table__cell {
        display: flex;
        align-items: center;
        column-gap: var(--padding-padding-large);
    }

    .cards-table__cell--service {
        grid-area: service;
    }

    .cards-table__cell--availability {
        grid-area: availability;
    }

    .cards-table__cell--downtime {
        grid-area: downtime;
    }

    .cards-table__cell--outages {
        grid-area: outages;
    }

    /* Inline per-cell label, used to title the value while stacked as a card. */
    .cards-table__label {
        flex: 1 0 0;

        font: var(--container-small-label-font);

        color: var(--text-body-body-base);
    }

    .cards-table__value {
        font: var(--container-medium-label_bold-font);

        white-space: nowrap;
    }
}

.availability-table {
    display: grid;
    grid-template-areas: "metric-header"
                         "period-header_first"
                         "metric_first_period_first_header"
                         "metric_first_period_first"
                         "metric_second_period_first_header"
                         "metric_second_period_first"
                         "metric_third_period_first_header"
                         "metric_third_period_first"
                         "period-header_second"
                         "metric_first_period_second_header"
                         "metric_first_period_second"
                         "metric_second_period_second_header"
                         "metric_second_period_second"
                         "metric_third_period_second_header"
                         "metric_third_period_second"
                         "period-header_third"
                         "metric_first_period_third_header"
                         "metric_first_period_third"
                         "metric_second_period_third_header"
                         "metric_second_period_third"
                         "metric_third_period_third_header"
                         "metric_third_period_third";

    border-radius: var(--corner-radius-components-outside);
    border: 1px solid var(--form-form-15);
    background: var(--background-background-level-2);

    box-shadow: var(--drop-shadow-large);

    > div {
        padding: var(--padding-padding-xl);

        font: var(--container-medium-label-font);
    }

    &.availability-table--highlighted-last-column {

        .availability-table__period-header__third,
        .availability-table__metric__first__period__third__header,
        .availability-table__metric__first__period__third,
        .availability-table__metric__second__period__third__header,
        .availability-table__metric__second__period__third,
        .availability-table__metric__third__period__third__header,
        .availability-table__metric__third__period__third {
            background: var(--calendar-labels-grey-fill);
        }
    }

    .availability-table__metric-header {
        display: flex;

        flex-direction: column;

        grid-area: metric-header;

        row-gap: var(--padding-padding-large);

        border-bottom: 1px solid var(--form-form-45);

        .availability-table__metric-header__title {
            padding-left: var(--padding-padding-large);
        }
    }

    .availability-table__period-header__first {
        grid-area: period-header_first;

        border-bottom: 1px solid var(--form-form-45);
    }

    .availability-table__period-header__second {
        grid-area: period-header_second;

        border-bottom: 1px solid var(--form-form-45);
    }

    .availability-table__period-header__third {
        grid-area: period-header_third;

        border-bottom: 1px solid var(--form-form-45);
    }

    .availability-table__metric__first__header {
        display: none;
        grid-area: metric_first_header;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__second__header {
        display: none;
        grid-area: metric_second_header;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__third__header {
        display: none;
        grid-area: metric_third_header;

        border-bottom: none;
    }

    .availability-table__metric__first__period__first {
        grid-area: metric_first_period_first;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__first__period__first__header {
        grid-area: metric_first_period_first_header;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__first__period__second {
        grid-area: metric_first_period_second;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__first__period__second__header {
        grid-area: metric_first_period_second_header;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__first__period__third {
        grid-area: metric_first_period_third;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__first__period__third__header {
        grid-area: metric_first_period_third_header;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__second__period__first {
        grid-area: metric_second_period_first;
    
        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__second__period__first__header {
        grid-area: metric_second_period_first_header;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__second__period__second {
        grid-area: metric_second_period_second;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__second__period__second__header {
        grid-area: metric_second_period_second_header;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__second__period__third {
        grid-area: metric_second_period_third;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__second__period__third__header {
        grid-area: metric_second_period_third_header;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__third__period__first {
        grid-area: metric_third_period_first;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__third__period__first__header {
        grid-area: metric_third_period_first_header;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__third__period__second {
        grid-area: metric_third_period_second;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__third__period__second__header {
        grid-area: metric_third_period_second_header;

        border-bottom: 1px solid var(--form-form-15);
    }

    .availability-table__metric__third__period__third {
        grid-area: metric_third_period_third;
    }

    .availability-table__metric__third__period__third__header {
        grid-area: metric_third_period_third_header;

        border-bottom: 1px solid var(--form-form-15);
    }

    /* Years without a Full Year row drop the third period column. */
    &.availability-table--periods-2 {
        grid-template-areas: "metric-header"
                             "period-header_first"
                             "metric_first_period_first_header"
                             "metric_first_period_first"
                             "metric_second_period_first_header"
                             "metric_second_period_first"
                             "metric_third_period_first_header"
                             "metric_third_period_first"
                             "period-header_second"
                             "metric_first_period_second_header"
                             "metric_first_period_second"
                             "metric_second_period_second_header"
                             "metric_second_period_second"
                             "metric_third_period_second_header"
                             "metric_third_period_second";
    }

    /* The current year shows only its finished half (e.g. H1) — a single period column. */
    &.availability-table--periods-1 {
        grid-template-areas: "metric-header"
                             "period-header_first"
                             "metric_first_period_first_header"
                             "metric_first_period_first"
                             "metric_second_period_first_header"
                             "metric_second_period_first"
                             "metric_third_period_first_header"
                             "metric_third_period_first";
    }
}

.period-header {
    display: grid;
    grid-template-areas: "title"
                         "subtitle";
    
    row-gap: var(--padding-padding-small);

    .period-header__title {
        grid-area: title;

        font: var(--container-medium-label_bold-font);
    }

    .period-header__subtitle {
        grid-area: subtitle;

        font: var(--container-small-label-font);

        color: var(--text-body-body-50);
    }
}

.metric-header {
    display: grid;
    grid-template-areas: "icon title"
                            "icon subtitle";
    grid-template-columns: auto 1fr;
    
    column-gap: var(--padding-padding-xl);
    row-gap: var(--padding-padding-small);

    .metric-header__icon {
        grid-area: icon;

        /* Blockify the inline SVG so it doesn't reserve baseline/descender space */
        display: flex;
        align-items: center;

        align-self: center;
    }

    .metric-header__title {
        grid-area: title;

        font: var(--container-medium-label_bold-font);
    }

    .metric-header__subtitle {
        grid-area: subtitle;

        font: var(--container-small-label-font);

        color: var(--text-body-body-50);
    }
}

.availability-cell {
    display: flex;
    flex-direction: column;

    /* Icon (1.5rem) + gap (--padding-padding-xl) */
    padding-left: calc(1.25rem + var(--padding-padding-xl));
    gap: var(--padding-padding-xl);

    .availability-cell__title {
        font: var(--floors-number-number_small-font);
    }

    .availability-cell__details {
        display: flex;
        flex-direction: column;

        gap: var(--padding-padding-medium);

        font: var(--container-small-label-font);

        color: var(--text-body-body-50);
    }

}

/* Mobile - 768 - 960 px */
@media (min-width: 768px) {
}

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .cards-table {
        row-gap: 0;

        .cards-table__head,
        .cards-table__row {
            display: grid;
            grid-template-areas: "service availability downtime outages";
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            align-items: center;

            padding: var(--padding-padding-xl);
        }

        .cards-table__head {
            color: var(--text-body-body-base);

            font: var(--container-small-label-font);

            border-bottom: 1px solid var(--form-form-45);
        }

        .cards-table__row {
            border: none;
            border-radius: 0;
            background: none;

            border-bottom: 1px solid var(--form-form-15);
        }

        .cards-table__row:last-child {
            border-bottom: none;
        }

        /* Faint vertical dividers between columns, like the design. */
        .cards-table__cell {
            border-left: 1px solid var(--form-form-15);

            padding-left: var(--padding-padding-xl);
        }

        /* Value columns are centred; the IT-service column stays left-aligned. */
        .cards-table__cell--availability,
        .cards-table__cell--downtime,
        .cards-table__cell--outages {
            justify-content: center;
        }

        .cards-table__cell--service {
            border-left: none;

            padding-left: 0;
        }

        /* Inline labels and their metric icons are only needed by the stacked
           mobile cards; on desktop the column header carries the icon instead. */
        .cards-table__label,
        .cards-table__metric-icon {
            display: none;
        }
    }

    .availability-table {
        grid-template-areas: "metric-header        period-header_first        period-header_second        period-header_third"
                             "metric_first_header  metric_first_period_first  metric_first_period_second  metric_first_period_third"
                             "metric_second_header metric_second_period_first metric_second_period_second metric_second_period_third"
                             "metric_third_header  metric_third_period_first  metric_third_period_second  metric_third_period_third";

        &.availability-table--periods-2 {
            grid-template-areas: "metric-header        period-header_first        period-header_second"
                                 "metric_first_header  metric_first_period_first  metric_first_period_second"
                                 "metric_second_header metric_second_period_first metric_second_period_second"
                                 "metric_third_header  metric_third_period_first  metric_third_period_second";
        }

        &.availability-table--periods-1 {
            grid-template-areas: "metric-header        period-header_first"
                                 "metric_first_header  metric_first_period_first"
                                 "metric_second_header metric_second_period_first"
                                 "metric_third_header  metric_third_period_first";
        }

        .availability-table__metric-header {
            flex-direction: row;
            align-items: center;

            column-gap: var(--padding-padding-xxl);

            .availability-table__period-header__title {
                padding-left: var(--padding-padding-none);
            }
        }

        .availability-table__period-header__first {
            border-left: 1px solid var(--form-form-15);
        }

        .availability-table__period-header__second {
            border-left: 1px solid var(--form-form-15);
        }

        .availability-table__period-header__third {
            border-left: 1px solid var(--form-form-15);
        }

        .availability-table__metric__first__header {
            display: grid;
        }

        .availability-table__metric__second__header {
            display: grid;
        }

        .availability-table__metric__third__header {
            display: grid;
        }

        .availability-table__metric__first__period__first__header {
            display: none;
        }

        .availability-table__metric__first__period__first {
            border-left: 1px solid var(--form-form-15);
        }

        .availability-table__metric__first__period__second__header {
            display: none;
        }

        .availability-table__metric__first__period__second {
            border-left: 1px solid var(--form-form-15);
        }

        .availability-table__metric__first__period__third__header {
            display: none;
        }
        
        .availability-table__metric__first__period__third {
            border-left: 1px solid var(--form-form-15);
        }

        .availability-table__metric__second__period__first__header {
            display: none;
        }

        .availability-table__metric__second__period__first {
            border-left: 1px solid var(--form-form-15);
        }

        .availability-table__metric__second__period__second__header {
            display: none;
        }

        .availability-table__metric__second__period__second {
            border-left: 1px solid var(--form-form-15);
        }

        .availability-table__metric__second__period__third__header {
            display: none;
        }

        .availability-table__metric__second__period__third {
            border-left: 1px solid var(--form-form-15);
        }

        .availability-table__metric__third__period__first__header {
            display: none;
        }

        .availability-table__metric__third__period__first {
            border-left: 1px solid var(--form-form-15);

            border-bottom: none;
        }

        .availability-table__metric__third__period__second__header {
            display: none;
        }
        
        .availability-table__metric__third__period__second {
            border-left: 1px solid var(--form-form-15);

            border-bottom: none;
        }

        .availability-table__metric__third__period__third__header {
            display: none;
        }

        .availability-table__metric__third__period__third {
            border-left: 1px solid var(--form-form-15);

            border-bottom: none;
        }
    }
    
    .period-header {
        justify-items: center;
    }

    .metric-header {
        .metric-header__title {
            align-self: end;
        }
    }

    .availability-cell {
        align-items: center;

        padding-left: var(--padding-padding-none);
        gap: var(--padding-padding-xxl);

        .availability-cell__details {
            align-items: center;
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
@media (min-width: 1280px) {
}

/* Desktop - 1681 - 2200 px */
@media (min-width: 1681px) {
}

/* Desktop - 2201 px and above */
@media (min-width: 2201px) {
}

.user-container {
    display: flex;
    align-items: center;

    gap: var(--padding-padding-large);

    font: var(--container-medium-label_bold-font);

    color: var(--text-headline-headline-base);
}

.user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    font: var(--general-cta-medium_default-font);
    text-transform: var(--general-cta-medium_default-text-transform);

    color: var(--brand-yellow-shades-sazka-yellow-base);
    background-color: var(--brand-blue-shades-sazka-blue-base);

    border-radius: 50%;

    user-select: none;
    cursor: pointer;
}

/* Mobile - 320 - 767 px */
.dashboard-widget {
    display: flex;
    flex-direction: column;
    gap: var(--padding-padding-small);

    flex: 1 0 0;

    padding: var(--padding-padding-small) var(--padding-padding-large) var(--padding-padding-large) var(--padding-padding-large);
    
    flex-direction: column;

    border: 1px solid var(--form-form-15);
    background: var(--background-background-level-2);
    border-radius: var(--corner-radius-widgets);

    box-shadow: var(--drop-shadow-large);

    &.dashboard-widget--fill {
        width: 100%;      
        height: 100%;       
    }

    &.dashboard-widget--padding-large {
        padding: var(--padding-padding-xl) var(--padding-padding-xxl);
    }

    &.dashboard-widget--gap-large {
        gap: var(--padding-padding-xxl);
    }

    .dashboard-widget__header {
        width: 100%;
        
        display: grid;
        grid-template-columns: repeat(3, calc(100% / 3));
        grid-template-areas: "header__left header__center header__right";
        
        align-items: center;

        &:not(:has(.dashboard-widget__header__center)):not(:has(.dashboard-widget__header__right)) {
            grid-template-columns: 1fr;
            grid-template-areas: "header__left";
        }
        &:not(:has(.dashboard-widget__header__left)):not(:has(.dashboard-widget__header__right)) {
            grid-template-columns: 1fr;
            grid-template-areas: "header__center";
        }
        &:not(:has(.dashboard-widget__header__left)):not(:has(.dashboard-widget__header__center)) {
            grid-template-columns: 1fr;
            grid-template-areas: "header__right";
        }

        &:has(.dashboard-widget__header__left):not(:has(.dashboard-widget__header__center)):has(.dashboard-widget__header__right) {
            grid-template-columns: repeat(2, calc(100% / 2));
            grid-template-areas: "header__left header__right";
        }

        .dashboard-widget__header__left {
            grid-area: header__left;
        
            display: grid;
            grid-auto-flow: column;
            gap: var(--padding-padding-large);
        
            justify-content: start;
            align-items: center;
        }
        
        .dashboard-widget__header__center {
            grid-area: header__center;
        
            display: grid;
            grid-auto-flow: column;
            gap: var(--padding-padding-large);
        
            justify-content: center;
            align-items: center;
        }
        
        .dashboard-widget__header__right {
            grid-area: header__right;
        
            display: grid;
            grid-auto-flow: column;
            gap: var(--padding-padding-large);
        
            align-items: center;
            justify-content: end;
        }
    }

    .dashboard-widget__content {
        flex-grow: 1;
        
        padding: var(--padding-padding-small);
        
        border-radius: var(--corner-radius-widgets);

        container-type: inline-size;

        &.dashboard-widget__content--no-padding {
            padding: 0;
        }

        &.dashboard-widget__content--largest-padding {
            gap: var(--padding-padding-large);
        }
    }

    .dashboard-widget__footer {
        display: grid;
        grid-template-columns: repeat(3, calc(100% / 3));
        grid-template-areas: "footer__left footer__center footer__right";
    
        align-items: baseline;

        container-type: inline-size;
    
        &:not(:has(.dashboard-widget__footer__center)):not(:has(.dashboard-widget__footer__right)) {
            grid-template-columns: 1fr;
            grid-template-areas: "footer__left";
        }
        &:not(:has(.dashboard-widget__footer__left)):not(:has(.dashboard-widget__footer__right)) {
            grid-template-columns: 1fr;
            grid-template-areas: "footer__center";
        }
        &:not(:has(.dashboard-widget__footer__left)):not(:has(.dashboard-widget__footer__center)) {
            grid-template-columns: 1fr;
            grid-template-areas: "footer__right";
        }
    
        &:has(.dashboard-widget__footer__left):not(:has(.dashboard-widget__footer__center)):has(.dashboard-widget__footer__right) {
            grid-template-columns: repeat(2, calc(100% / 2));
            grid-template-areas: "footer__left footer__right";
        }

        .dashboard-widget__footer__left {
            grid-area: footer__left;
        
            display: flex;
            flex-wrap: wrap;

            gap: var(--padding-padding-large);
        
            align-items: center;
            justify-content: center;
        }
        
        .dashboard-widget__footer__center {
            grid-area: footer__center;
        
            display: flex;
            flex-wrap: wrap;

            gap: var(--padding-padding-large);
        
            align-items: center;
            justify-content: center;
        }
        
        .dashboard-widget__footer__right {
            grid-area: footer__right;
        
            display: flex;
            flex-wrap: wrap;

            gap: var(--padding-padding-large);
        
            align-items: center;
            justify-content: center;
        }
    }

    /* Widget components */
    .dashboard-widget__title {
        font: var(--container-medium-headline_bold-font);
        color: var(--text-headline-headline-base);
    }

    .dashboard-widget__subtitle {
        font: var(--container-medium-headline-font);
        color: var(--text-headline-headline-base);
    }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .dashboard-widget {
        gap: var(--padding-padding-xxl);

        padding: var(--padding-padding-xxl);

        &.dashboard-widget--padding-large {
            padding: var(--padding-padding-xxl);
        }

        .dashboard-widget__footer {
            .dashboard-widget__footer__left {
                gap: var(--padding-padding-xxl);

                justify-content: start;
            }

            .dashboard-widget__footer__center {
                gap: var(--padding-padding-xxl);

                justify-content: center;
            }

            .dashboard-widget__footer__right {
                gap: var(--padding-padding-xxl);

                justify-content: end;
            }
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

/* Mobile - 320 - 767 px */

/* Container of cards */
.card-container {
    display: grid;
    grid-auto-flow: row;

    gap: var(--padding-padding-large);

    &.card-container--padding-xxl {
        gap: var(--padding-padding-xxl);
    }

    &.card-container--padding-xxxl {
        gap: var(--padding-padding-xxxl);
    }
}


/* Card */
.card {
    display: grid;
    grid-template-rows: auto auto;
    
    padding: var(--padding-padding-xl);
    row-gap: var(--padding-padding-small);

    background: var(--background-background-level-3);

    border: 1px solid var(--form-form-15);
    border-radius: var(--corner-radius-components-outside);
}

/* Mobile - 768 - 960 px */
@media (min-width: 768px) {
}

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .card-container {
        grid-auto-flow: column;
    }

    .card {
        padding: var(--padding-padding-xxxl);
        row-gap: var(--padding-padding-large);
    }
}

/* Laptop & tablet - 1280 - 1680 px */
@media (min-width: 1280px) {
}

/* Desktop - 1681 - 2200 px */
@media (min-width: 1681px) {
}

/* Desktop - 2201 px and above */
@media (min-width: 2201px) {
}

.availability-value {
    font: var(--floors-headline-headline_hero-font);

    white-space: nowrap;
}

/* Chart colour palette — referenced from PHP via App\Availability\Type\ChartColor.
   Values taken from the design (grey is the existing --grey-grey-45). */
:root {
    --chart-palette-blue: #3a92cf;
    --chart-palette-orange: #e19b14;
    --chart-palette-green: #6db45c;
    --chart-palette-purple: #7a4198;
    --chart-palette-red: #e9553e;
    --chart-palette-yellow: #fde34e;
    --chart-palette-grey: #c3c3c3;
}

.donut-chart-container {
    position: relative;

    display: flex;
    justify-content: center;
}

.donut-chart {
    display: block;

    width: 100%;
    max-width: 20rem;
    height: auto;

    path {
        /* view-box keeps transform-origin at the donut centre, so the
           highlighted slice scales radially outward. */
        transform-box: view-box;
        transform-origin: center;
        transition: transform 0.15s ease;
    }

    /* Slice matching the hovered legend row (components--chart-legend-hover). */
    path[data-highlighted] {
        transform: scale(1.04);
    }
}

/* Centre label is an HTML overlay so the typography keeps its real pixel size. */
.donut-chart__label {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    pointer-events: none;
}

.donut-chart__title {
    color: var(--text-body-body-base);
    font: var(--floors-headline-headline_hero-font);
}

.donut-chart__subtitle {
    color: var(--text-body-body-50);
    font: var(--floors-headline-headline_section-font);
}

/* Mobile - 320 - 767 px */
.service-container {
    position: relative;

    &[data-displayed="false"] {
        display: none;
    }
}

.service {
    display: flex;
    align-items: center;
    
    padding: var(--padding-padding-xl);
    gap: var(--padding-padding-large);

    cursor: pointer;

    border-radius: var(--corner-radius-components-outside);
    border: 1px solid var(--form-form-15);
    
    background: var(--background-background-level-3);

    box-shadow: var(--drop-shadow-large);
    
    &:hover {
        box-shadow: var(--shadow-behind-widget);
        background-color: var(--background-hover-background);
    }

    .status-indicator {
        width: 1.25rem;
        height: 1.25rem;

        display: flex;
        align-items: center;
        justify-content: center;
        
        font-size: 1.125rem;
    }

    .name {
        flex: 1 0 0;
        
        font: var(--container-medium-label_bold-font);

        color: var(--text-body-body-base);

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .critical {
        width: 1rem;
        height: 1rem;

        display: flex;
        align-items: center;

        color: var(--system-negative-negative-base);
    }
}

.service-detail-fields {
    display: grid;
    grid-template-areas: "business-owner technical-owner"
                         "critical       service-type"
                         "availability   availability";
    gap: var(--padding-padding-xxl) var(--padding-padding-large);

    .service-detail-fields__business-owner {
        grid-area: business-owner;
    }

    .service-detail-fields__technical-owner {
        grid-area: technical-owner;
    }

    .service-detail-fields__critical {
        grid-area: critical;
    }

    .service-detail-fields__service-type {
        grid-area: service-type;
    }

    .service-detail-fields__availability {
        grid-area: availability;
    }
}

.form__label--with-info {
    display: inline-flex;
    align-items: center;
    gap: var(--padding-padding-small);
}

.field-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;

    .field-info__icon {
        color: var(--icons-blue-shades-blue-80);
    }

    .field-info__tooltip {
        position: absolute;
        bottom: calc(100% + var(--padding-padding-small));
        left: 0;
        z-index: 30;

        width: max-content;
        max-width: 18rem;

        padding: var(--padding-padding-small) var(--padding-padding-medium);

        background-color: var(--background-background-level-2);
        color: var(--text-body-body-base);
        font: var(--container-small-body_text-font);
        text-transform: none;

        border-radius: 0.25rem;
        box-shadow: var(--shadow-behind-widget);

        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease;
    }

    &:hover .field-info__tooltip,
    &:focus-within .field-info__tooltip {
        opacity: 1;
        visibility: visible;
    }
}

.service-detail-controls {
    display: grid;
    grid-template-areas: "tabs   tabs"
                         "header filter";
    row-gap: var(--padding-padding-large);
    grid-template-columns: 1fr minmax(0, max-content);

    .service-detail-controls__tabs {
        grid-area: tabs;
    }

    .service-detail-controls__header {
        grid-area: header;
    }

    .service-detail-controls__filter {
        grid-area: filter;

        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .service {
        padding: var(--padding-padding-large);
    }

    .service-detail-fields {
        grid-template-areas: "business-owner  critical     service-type"
                             "technical-owner availability availability";
    }

    .service-detail-fields__availability .field-info__tooltip {
        left: auto;
        right: 0;
    }

    .service-detail-controls {
        grid-template-areas: "header tabs filter";
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */