* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}



:root {
    /* Typography */
    --font__default: 'Plus Jakarta Sans', sans-serif;
    --font__code: 'Roboto Mono', monospace;

    /* Spacing */
    --spacing4: 4px;
    --spacing8: 8px;
    --spacing12: 12px;
    --spacing16: 16px;
    --spacing24: 24px;
    --spacing32: 32px;
    --spacing48: 48px;
    --spacing64: 64px;
    --spacing128: 128px;

    /* Layout */
    --sidebar-width: 320px;

    /* Font sizes */
    --font-size-XXS: 10px;
    --font-size-XS: 12px;
    --font-size-S: 14px;
    --font-size-M: 16px;
    --font-size-ML: 18px;
    --font-size-L: 24px;
    --font-size-XL: 32px;
    --font-size-XXL: 48px;

    /* Primary palette — override with a color theme class */
    --primary100: #E9F0F0;
    --primary200: #D4E1E1;
    --primary300: #A8C3C2;
    --primary400: #7DA4A4;
    --primary500: #518685;
    --primary600: #266867;
    --primary700: #1E5352;
    --primary70090: #1E5352E6;
    --primary750: #1A4645;
    --primary800: #173E3E;
    --primary900: #0F2A29;
    --primary950: #051821;
    --primary1000: #081515;

    /* Secondary/accent palette — override with a color theme class */
    --secondary500: #6f520b;
    --secondary600: #8e550f;

    /* Status palettes — fixed, do not change with color themes */
    --error500: #FCEAE8;
    --error600: #FCA197;
    --error700: #DC180C;
    --error800: #9E241C;
    --error900: #800C05;

    --warning500: #FCF8D4;
    --warning600: #FCF3A2;
    --warning700: #FFE600;
    --warning800: #E5CF00;
    --warning900: #CCB800;

    --neutral500: #F1F5F9;
    --neutral600: #CBD5E1;
    --neutral700: #94A3B8;
    --neutral800: #64748B;
    --neutral900: #475569;

    --success500: #E8FCE9;
    --success600: #A3F0A7;
    --success700: #00C408;
    --success800: #139E19;
    --success900: #008005;

    --information500: rgb(218, 242, 251);
    --information700: rgb(60, 130, 249);

    --shadow1: rgb(5 24 33 / 25%);

    /* Semantic tokens — identical in both light and dark themes */
    --blockquote--border__default: rgb(0 0 0 / 20%);
    --header--background__default: transparent;
    --branding__default: var(--text__default);
    --link__default: var(--secondary500);
    --link__hover: var(--secondary600);

    --error__default: var(--error600);
    --error--background__default: var(--error600);
    --information__default: var(--information700);
    --information--background__default: var(--information500);
    --success__default: rgb(56, 177, 83);
    --success--background__default: rgb(218, 251, 224);
    --warning__default: rgb(246, 117, 4);
    --warning--background__default: rgb(251, 241, 218);

    --interactive__default: var(--secondary500);
    --interactive__hover: var(--secondary600);

    --form--field--label--color__focus: var(--interactive__default);

    --button--primary--background__default: var(--secondary500);
    --button--primary--border__default: var(--secondary500);
    --button--primary--background__hover: var(--secondary600);
    --button--primary--border__hover: var(--secondary600);
    --button--secondary--color__default: var(--primary1000);
    --button--secondary--color__hover: var(--primary1000);
    --button--tertiary--background__default: transparent;
    --button--tertiary--border__default: transparent;
    --button--tertiary--background__hover: transparent;
    --button--tertiary--border__hover: var(--primary500);
    --button--tertiary--color__hover: var(--secondary500);
    --button--delete--background__hover: var(--error600);
    --button--delete--border__hover: var(--error600);
    --button--delete--color__hover: var(--error900);

    --tabs--label--color__hover: var(--secondary600);

    --tag__default: rgb(160, 144, 144);
    --tag--background__default: rgb(0 0 0 / 5%);

    --modal--background__default: var(--primary70090);
    --modal--box-shadow__default: rgb(196 196 196 / 25%);
    --modal--border__default: none;

    --sidebar-modal--background__default: var(--primary1000);

    --meeting__default: var(--secondary500);
    --meeting--box-shadow__default: none;
    --meeting--box-shadow__hover: rgb(0 0 0 / 20%);
    --meeting--actions--text__default: var(--text__default);
    --meeting--actions--background__hover: rgb(0 0 0 / 20%);
    --meeting--accepted__default: rgb(56, 177, 83);
    --meeting--cancelled__default: rgb(246, 4, 4);
    --meeting--new-invitation--background__default: rgb(232, 152, 234);
    --meeting--new-invitation--heading__default: rgb(166, 13, 169);
    --meeting--new-invitation--text__default: rgb(255, 255, 255);

    --notification-blurb__default: var(--primary900);
    --notification-blurb--background__default: var(--error600);

    --table--row--color__default: var(--primary1000);
    --table--row--color__alternative: var(--primary700);

    --availability--time-slot--border__default: var(--primary300);

    --datepicker--color__hover: var(--secondary600);
    --datepicker--trigger--color__hover: var(--secondary600);

    --card--color__default: var(--text__default);

    --avatar--background__default: var(--primary500);
    --avatar--text__default: var(--primary100);
}

:focus {
	outline: 2px solid var(--outline__default);
	outline-offset: 3px;
	transition: all .1s ease;
}

:disabled, .disabled {
    cursor: not-allowed !important;
	opacity: 0.5;
	pointer-events: none !important;
}

p {
    margin-bottom: var(--spacing16);
}

hr {
    border-bottom: 2px solid var(--branding__default);
    margin-bottom: var(--spacing16);
}

ol,
ul {
    padding-left: var(--spacing32);
}

    ol > li,
    ul > li {
        padding-bottom: var(--spacing8);
    }

small,
.text_small {
    font-size: var(--font-size-XS);
}

a {
    color: var(--link__default);
    text-decoration: none;
    transition: color .3s ease;
}

    a:hover {
        color: var(--link__hover);
    }

blockquote {
    border-left: var(--spacing8) solid var(--blockquote--border__default);
    margin: var(--spacing8) 0 var(--spacing16) var(--spacing16);
    padding-left: .5em;
}

article {
    margin-bottom: var(--spacing16);
}

section {
    margin: var(--spacing32) 0 var(--spacing32) 0;
}

/* hide eye icon on password input in ms edge */
input::-ms-reveal, input::-ms-clear {
    display: none;
}

@media screen and (prefers-color-scheme: light) {
  :root {
    --secondary500: #6f520b;
    --secondary600: #8e550f;
    --scrollbar-background: var(--primary300);
    --scrollbar-foreground: var(--primary500);
    --background__default: var(--primary100);
    --headings__default: var(--primary600);
    --outline__default: var(--secondary600);
    --text__default: var(--primary900);
    --quiz-header--background__default: var(--primary200);
    --mobile-header--background__default: var(--primary200);
    --breadcrumbs--color__default: var(--primary1000);
    --breadcrumbs--color__hover: var(--secondary900);
    --breadcrumbs--color__active: var(--primary600);
    --breadcrumbs--color__disabled: var(--primary300);
    --action-bar--background__default: var(--primary200);
    --item--action--background__hover: var(--primary300);
    --form--field--background__default: var(--primary200);
    --form--field--border__default: var(--primary300);
    --form--field--text__default: var(--primary700);
    --form--field--icon__default: var(--primary700);
    --form--field--label--color__default: var(--primary600);
    --form--field--checks--background__default: var(--primary100);
    --form--error-message__default: var(--error900);
    --button--primary--color__default: var(--primary100);
    --button--primary--color__hover: var(--primary100);
    --button--secondary--background__default: var(--primary300);
    --button--secondary--border__default: var(--primary300);
    --button--secondary--background__hover: var(--primary400);
    --button--secondary--border__hover: var(--primary400);
    --button--tertiary--color__default: var(--primary1000);
    --button--delete--color__default: var(--error900);
    --button--filter--background__default: var(--primary300);
    --button--filter--border__default: var(--primary400);
    --button--filter--color__default: var(--primary1000);
    --button--filter--background__hover: var(--primary300);
    --button--filter--border__hover: var(--primary400);
    --button--filter--color__hover: var(--primary800);
    --button--filter-selected--background__default: var(--primary500);
    --button--filter-selected--border__default: var(--primary400);
    --button--filter-selected--color__default: var(--primary100);
    --button--filter-selected--background__hover: var(--primary500);
    --button--filter-selected--border__hover: var(--primary400);
    --button--filter-selected--color__hover: var(--primary100);
    --theme-switcher--background__default: var(--primary950);
    --theme-switcher--border__default: var(--primary950);
    --theme-switcher--color__default: var(--primary100);
    --theme-switcher--background__hover: var(--primary700);
    --theme-switcher--border__hover: var(--primary900);
    --theme-switcher--color__hover: var(--primary100);
    --theme-switcher--icon__default: "\e923";
    --variant-name--content: "Switch to dark theme";
    --placeholder--color__default: var(--primary600);
    --table--header--background__default: var(--primary400);
    --table--header--color__default: var(--primary1000);
    --table--row--background__default: var(--primary200);
    --table--row--border__default: var(--primary300);
    --dialog--background__default: var(--primary200);
    --availability--time-slot--background__default: var(--primary200);
    --availability--time-slot--text__default: var(--primary900);
    --availability--is--today--time-slot--background__default: var(--primary300);
    --availability--is--today--time-slot--border__default: var(--primary100);
    --availability--is--today--column--day--background__default: var(--primary300);
    --availability--is--today--column--day--text__default: var(--primary950);
    --availability--is--past--time-slot--background__default: var(--primary200);
    --availability--is--past--column--day--background__default: var(--primary100);
    --availability--not--current--month--background__default: var(--primary200);
    --calendar--border__default: var(--primary400);
    --calendar--day--background__default: var(--primary100);
    --calendar--is--today--background__default: var(--primary300);
    --calendar--weekend--background__default: var(--primary200);
    --calendar--show-more-background__default: linear-gradient(to bottom, rgb(255 255 255 / 0) 0, var(--calendar--day--background__default) 70%);
    --calendar--weekend--show-more--background__default: linear-gradient(to bottom, rgb(255 255 255 / 0) 0, var(--calendar--weekend--background__default) 70%);
    --calendar--is--today--show-more-background__default: linear-gradient(to bottom, rgb(255 255 255 / 0) 0, var(--calendar--is--today--background__default) 70%);
    --meeting--background__default: var(--primary200);
    --sidebar--background__default: var(--primary200);
    --navigation-link__default: var(--primary700);
    --navigation-link__hover: var(--primary1000);
    --navigation-link--border__hover: var(--primary500);
    --navigation-link--background__focus: var(--primary300);
    --navigation-link--background__active: var(--primary100);
    --tabs--label--background__default: var(--primary200);
    --tabs--label--border__default: var(--primary400);
    --tabs--label--color__default: var(--primary900);
    --tabs--label--background__hover: var(--primary200);
    --tabs--label--border__hover: var(--primary400);
    --tabs--label--background__active: var(--primary500);
    --tabs--label--border__active: var(--primary400);
    --tabs--label--color__active: var(--primary100);
    --datepicker--background__default: var(--primary300);
    --datepicker--border__default: var(--primary400);
    --datepicker--color__default: var(--primary900);
    --datepicker--color__alternative: var(--primary600);
    --datepicker-header--background__default: var(--primary100);
    --datepicker--background__active: var(--primary500);
    --datepicker--background__hover: var(--primary100);
    --datepicker--border__hover: var(--primary500);
    --datepicker--color__active: var(--primary100);
    --datepicker--trigger--background__hover: var(--primary100);
    --card--background__default: var(--primary200);
    --card--border__default: var(--primary300);
    --card--color__alternative: var(--primary600);
    --card-footer--background__default: var(--primary100);
    --landing-page--background__default: var(--primary200), var(--primary300);
  }
}
.lightmode,
.os--light {
  --secondary500: #6f520b;
  --secondary600: #8e550f;
  --scrollbar-background: var(--primary300);
  --scrollbar-foreground: var(--primary500);
  --background__default: var(--primary100);
  --headings__default: var(--primary600);
  --outline__default: var(--secondary600);
  --text__default: var(--primary900);
  --quiz-header--background__default: var(--primary200);
  --mobile-header--background__default: var(--primary200);
  --breadcrumbs--color__default: var(--primary1000);
  --breadcrumbs--color__hover: var(--secondary900);
  --breadcrumbs--color__active: var(--primary600);
  --breadcrumbs--color__disabled: var(--primary300);
  --action-bar--background__default: var(--primary200);
  --item--action--background__hover: var(--primary300);
  --form--field--background__default: var(--primary200);
  --form--field--border__default: var(--primary300);
  --form--field--text__default: var(--primary700);
  --form--field--icon__default: var(--primary700);
  --form--field--label--color__default: var(--primary600);
  --form--field--checks--background__default: var(--primary100);
  --form--error-message__default: var(--error900);
  --button--primary--color__default: var(--primary100);
  --button--primary--color__hover: var(--primary100);
  --button--secondary--background__default: var(--primary300);
  --button--secondary--border__default: var(--primary300);
  --button--secondary--background__hover: var(--primary400);
  --button--secondary--border__hover: var(--primary400);
  --button--tertiary--color__default: var(--primary1000);
  --button--delete--color__default: var(--error900);
  --button--filter--background__default: var(--primary300);
  --button--filter--border__default: var(--primary400);
  --button--filter--color__default: var(--primary1000);
  --button--filter--background__hover: var(--primary300);
  --button--filter--border__hover: var(--primary400);
  --button--filter--color__hover: var(--primary800);
  --button--filter-selected--background__default: var(--primary500);
  --button--filter-selected--border__default: var(--primary400);
  --button--filter-selected--color__default: var(--primary100);
  --button--filter-selected--background__hover: var(--primary500);
  --button--filter-selected--border__hover: var(--primary400);
  --button--filter-selected--color__hover: var(--primary100);
  --theme-switcher--background__default: var(--primary950);
  --theme-switcher--border__default: var(--primary950);
  --theme-switcher--color__default: var(--primary100);
  --theme-switcher--background__hover: var(--primary700);
  --theme-switcher--border__hover: var(--primary900);
  --theme-switcher--color__hover: var(--primary100);
  --theme-switcher--icon__default: "\e923";
  --variant-name--content: "Switch to dark theme";
  --placeholder--color__default: var(--primary600);
  --table--header--background__default: var(--primary400);
  --table--header--color__default: var(--primary1000);
  --table--row--background__default: var(--primary200);
  --table--row--border__default: var(--primary300);
  --dialog--background__default: var(--primary200);
  --availability--time-slot--background__default: var(--primary200);
  --availability--time-slot--text__default: var(--primary900);
  --availability--is--today--time-slot--background__default: var(--primary300);
  --availability--is--today--time-slot--border__default: var(--primary100);
  --availability--is--today--column--day--background__default: var(--primary300);
  --availability--is--today--column--day--text__default: var(--primary950);
  --availability--is--past--time-slot--background__default: var(--primary200);
  --availability--is--past--column--day--background__default: var(--primary100);
  --availability--not--current--month--background__default: var(--primary200);
  --calendar--border__default: var(--primary400);
  --calendar--day--background__default: var(--primary100);
  --calendar--is--today--background__default: var(--primary300);
  --calendar--weekend--background__default: var(--primary200);
  --calendar--show-more-background__default: linear-gradient(to bottom, rgb(255 255 255 / 0) 0, var(--calendar--day--background__default) 70%);
  --calendar--weekend--show-more--background__default: linear-gradient(to bottom, rgb(255 255 255 / 0) 0, var(--calendar--weekend--background__default) 70%);
  --calendar--is--today--show-more-background__default: linear-gradient(to bottom, rgb(255 255 255 / 0) 0, var(--calendar--is--today--background__default) 70%);
  --meeting--background__default: var(--primary200);
  --sidebar--background__default: var(--primary200);
  --navigation-link__default: var(--primary700);
  --navigation-link__hover: var(--primary1000);
  --navigation-link--border__hover: var(--primary500);
  --navigation-link--background__focus: var(--primary300);
  --navigation-link--background__active: var(--primary100);
  --tabs--label--background__default: var(--primary200);
  --tabs--label--border__default: var(--primary400);
  --tabs--label--color__default: var(--primary900);
  --tabs--label--background__hover: var(--primary200);
  --tabs--label--border__hover: var(--primary400);
  --tabs--label--background__active: var(--primary500);
  --tabs--label--border__active: var(--primary400);
  --tabs--label--color__active: var(--primary100);
  --datepicker--background__default: var(--primary300);
  --datepicker--border__default: var(--primary400);
  --datepicker--color__default: var(--primary900);
  --datepicker--color__alternative: var(--primary600);
  --datepicker-header--background__default: var(--primary100);
  --datepicker--background__active: var(--primary500);
  --datepicker--background__hover: var(--primary100);
  --datepicker--border__hover: var(--primary500);
  --datepicker--color__active: var(--primary100);
  --datepicker--trigger--background__hover: var(--primary100);
  --card--background__default: var(--primary200);
  --card--border__default: var(--primary300);
  --card--color__alternative: var(--primary600);
  --card-footer--background__default: var(--primary100);
  --landing-page--background__default: var(--primary200), var(--primary300);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --secondary500: #F8BC24;
    --secondary600: #F58800;
    --scrollbar-background: var(--primary900);
    --scrollbar-foreground: var(--primary400);
    --background__default: var(--primary750);
    --headings__default: var(--primary100);
    --outline__default: var(--secondary500);
    --text__default: var(--primary100);
    --quiz-header--background__default: var(--primary950);
    --mobile-header--background__default: var(--primary900);
    --breadcrumbs--color__default: var(--primary300);
    --breadcrumbs--color__hover: var(--secondary500);
    --breadcrumbs--color__active: var(--primary100);
    --breadcrumbs--color__disabled: var(--primary500);
    --action-bar--background__default: var(--primary800);
    --item--action--background__hover: var(--primary700);
    --form--field--background__default: var(--primary900);
    --form--field--border__default: var(--primary500);
    --form--field--text__default: var(--primary100);
    --form--field--icon__default: var(--primary100);
    --form--field--label--color__default: var(--primary400);
    --form--field--checks--background__default: var(--primary700);
    --form--error-message__default: var(--error600);
    --button--primary--color__default: var(--primary1000);
    --button--primary--color__hover: var(--primary1000);
    --button--secondary--background__default: var(--primary100);
    --button--secondary--border__default: var(--primary100);
    --button--secondary--background__hover: var(--primary200);
    --button--secondary--border__hover: var(--primary200);
    --button--tertiary--color__default: var(--primary100);
    --button--delete--color__default: var(--error600);
    --button--filter--background__default: var(--primary900);
    --button--filter--border__default: var(--primary500);
    --button--filter--color__default: var(--primary100);
    --button--filter--background__hover: var(--primary900);
    --button--filter--border__hover: var(--primary500);
    --button--filter--color__hover: var(--secondary500);
    --button--filter-selected--background__default: var(--primary100);
    --button--filter-selected--border__default: var(--primary100);
    --button--filter-selected--color__default: var(--primary1000);
    --button--filter-selected--background__hover: var(--primary100);
    --button--filter-selected--border__hover: var(--primary100);
    --button--filter-selected--color__hover: var(--primary1000);
    --theme-switcher--background__default: var(--primary100);
    --theme-switcher--border__default: var(--primary100);
    --theme-switcher--color__default: var(--primary1000);
    --theme-switcher--background__hover: var(--primary200);
    --theme-switcher--border__hover: var(--primary200);
    --theme-switcher--color__hover: var(--primary1000);
    --theme-switcher--icon__default: "\e927";
    --variant-name--content: "Switch to light theme";
    --placeholder--color__default: var(--primary300);
    --table--header--background__default: var(--primary800);
    --table--header--color__default: var(--primary200);
    --table--row--background__default: var(--primary300);
    --table--row--border__default: var(--primary100);
    --dialog--background__default: var(--primary800);
    --availability--time-slot--background__default: var(--primary950);
    --availability--time-slot--text__default: var(--primary300);
    --availability--is--today--time-slot--background__default: var(--primary950);
    --availability--is--today--time-slot--border__default: var(--primary500);
    --availability--is--today--column--day--background__default: var(--primary1000);
    --availability--is--today--column--day--text__default: var(--primary300);
    --availability--is--past--time-slot--background__default: var(--primary600);
    --availability--is--past--column--day--background__default: var(--primary900);
    --availability--not--current--month--background__default: var(--primary600);
    --calendar--border__default: var(--primary600);
    --calendar--day--background__default: var(--primary800);
    --calendar--is--today--background__default: var(--primary900);
    --calendar--weekend--background__default: var(--primary900);
    --calendar--show-more-background__default: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, var(--calendar--day--background__default) 70%);
    --calendar--weekend--show-more--background__default: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, var(--calendar--weekend--background__default) 70%);
    --calendar--is--today--show-more-background__default: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, var(--calendar--is--today--background__default) 70%);
    --meeting--background__default: var(--primary700);
    --sidebar--background__default: var(--primary950);
    --navigation-link__default: var(--primary100);
    --navigation-link__hover: var(--secondary600);
    --navigation-link--border__hover: var(--primary700);
    --navigation-link--background__focus: var(--primary900);
    --navigation-link--background__active: var(--primary800);
    --tabs--label--background__default: var(--primary950);
    --tabs--label--border__default: var(--primary500);
    --tabs--label--color__default: var(--primary200);
    --tabs--label--background__hover: var(--primary950);
    --tabs--label--border__hover: var(--primary500);
    --tabs--label--background__active: var(--primary100);
    --tabs--label--border__active: var(--primary100);
    --tabs--label--color__active: var(--primary1000);
    --datepicker--background__default: var(--primary750);
    --datepicker--border__default: var(--primary700);
    --datepicker--color__default: var(--primary200);
    --datepicker--color__alternative: var(--primary400);
    --datepicker-header--background__default: var(--primary800);
    --datepicker--background__active: var(--primary900);
    --datepicker--background__hover: var(--primary900);
    --datepicker--border__hover: var(--primary600);
    --datepicker--color__active: var(--primary1000);
    --datepicker--trigger--background__hover: var(--primary950);
    --card--background__default: var(--primary800);
    --card--border__default: var(--primary500);
    --card--color__alternative: var(--primary400);
    --card-footer--background__default: var(--primary700);
    --landing-page--background__default: var(--primary700), var(--primary900);
  }
}
.darkmode,
.os--dark {
  --secondary500: #F8BC24;
  --secondary600: #F58800;
  --scrollbar-background: var(--primary900);
  --scrollbar-foreground: var(--primary400);
  --background__default: var(--primary750);
  --headings__default: var(--primary100);
  --outline__default: var(--secondary500);
  --text__default: var(--primary100);
  --quiz-header--background__default: var(--primary950);
  --mobile-header--background__default: var(--primary900);
  --breadcrumbs--color__default: var(--primary300);
  --breadcrumbs--color__hover: var(--secondary500);
  --breadcrumbs--color__active: var(--primary100);
  --breadcrumbs--color__disabled: var(--primary500);
  --action-bar--background__default: var(--primary800);
  --item--action--background__hover: var(--primary700);
  --form--field--background__default: var(--primary900);
  --form--field--border__default: var(--primary500);
  --form--field--text__default: var(--primary100);
  --form--field--icon__default: var(--primary100);
  --form--field--label--color__default: var(--primary400);
  --form--field--checks--background__default: var(--primary700);
  --form--error-message__default: var(--error600);
  --button--primary--color__default: var(--primary1000);
  --button--primary--color__hover: var(--primary1000);
  --button--secondary--background__default: var(--primary100);
  --button--secondary--border__default: var(--primary100);
  --button--secondary--background__hover: var(--primary200);
  --button--secondary--border__hover: var(--primary200);
  --button--tertiary--color__default: var(--primary100);
  --button--delete--color__default: var(--error600);
  --button--filter--background__default: var(--primary900);
  --button--filter--border__default: var(--primary500);
  --button--filter--color__default: var(--primary100);
  --button--filter--background__hover: var(--primary900);
  --button--filter--border__hover: var(--primary500);
  --button--filter--color__hover: var(--secondary500);
  --button--filter-selected--background__default: var(--primary100);
  --button--filter-selected--border__default: var(--primary100);
  --button--filter-selected--color__default: var(--primary1000);
  --button--filter-selected--background__hover: var(--primary100);
  --button--filter-selected--border__hover: var(--primary100);
  --button--filter-selected--color__hover: var(--primary1000);
  --theme-switcher--background__default: var(--primary100);
  --theme-switcher--border__default: var(--primary100);
  --theme-switcher--color__default: var(--primary1000);
  --theme-switcher--background__hover: var(--primary200);
  --theme-switcher--border__hover: var(--primary200);
  --theme-switcher--color__hover: var(--primary1000);
  --theme-switcher--icon__default: "\e927";
  --variant-name--content: "Switch to light theme";
  --placeholder--color__default: var(--primary300);
  --table--header--background__default: var(--primary800);
  --table--header--color__default: var(--primary200);
  --table--row--background__default: var(--primary300);
  --table--row--border__default: var(--primary100);
  --dialog--background__default: var(--primary800);
  --availability--time-slot--background__default: var(--primary950);
  --availability--time-slot--text__default: var(--primary300);
  --availability--is--today--time-slot--background__default: var(--primary950);
  --availability--is--today--time-slot--border__default: var(--primary500);
  --availability--is--today--column--day--background__default: var(--primary1000);
  --availability--is--today--column--day--text__default: var(--primary300);
  --availability--is--past--time-slot--background__default: var(--primary600);
  --availability--is--past--column--day--background__default: var(--primary900);
  --availability--not--current--month--background__default: var(--primary600);
  --calendar--border__default: var(--primary600);
  --calendar--day--background__default: var(--primary800);
  --calendar--is--today--background__default: var(--primary900);
  --calendar--weekend--background__default: var(--primary900);
  --calendar--show-more-background__default: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, var(--calendar--day--background__default) 70%);
  --calendar--weekend--show-more--background__default: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, var(--calendar--weekend--background__default) 70%);
  --calendar--is--today--show-more-background__default: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, var(--calendar--is--today--background__default) 70%);
  --meeting--background__default: var(--primary700);
  --sidebar--background__default: var(--primary950);
  --navigation-link__default: var(--primary100);
  --navigation-link__hover: var(--secondary600);
  --navigation-link--border__hover: var(--primary700);
  --navigation-link--background__focus: var(--primary900);
  --navigation-link--background__active: var(--primary800);
  --tabs--label--background__default: var(--primary950);
  --tabs--label--border__default: var(--primary500);
  --tabs--label--color__default: var(--primary200);
  --tabs--label--background__hover: var(--primary950);
  --tabs--label--border__hover: var(--primary500);
  --tabs--label--background__active: var(--primary100);
  --tabs--label--border__active: var(--primary100);
  --tabs--label--color__active: var(--primary1000);
  --datepicker--background__default: var(--primary750);
  --datepicker--border__default: var(--primary700);
  --datepicker--color__default: var(--primary200);
  --datepicker--color__alternative: var(--primary400);
  --datepicker-header--background__default: var(--primary800);
  --datepicker--background__active: var(--primary900);
  --datepicker--background__hover: var(--primary900);
  --datepicker--border__hover: var(--primary600);
  --datepicker--color__active: var(--primary1000);
  --datepicker--trigger--background__hover: var(--primary950);
  --card--background__default: var(--primary800);
  --card--border__default: var(--primary500);
  --card--color__alternative: var(--primary400);
  --card-footer--background__default: var(--primary700);
  --landing-page--background__default: var(--primary700), var(--primary900);
}

@charset "UTF-8";
/* Amber — warm earth-tone palette.
   Mid-range ambers (500–700) serve as the primary interactive surface.
   Secondary accent: dark teal/cyan for contrast. */
.theme--amber {
  --primary100: #FFFBEB;
  --primary200: #FEF3C7;
  --primary300: #FDE68A;
  --primary400: #FCD34D;
  --primary500: #D97706;
  --primary600: #B45309;
  --primary700: #92400E;
  --primary70090: #92400EE6;
  --primary750: #7C3510;
  --primary800: #78350F;
  --primary900: #451A03;
  --primary950: #2D1001;
  --primary1000: #160800;
}

/* Light mode accent — dark teal readable on amber surfaces */
.theme--amber.lightmode,
.theme--amber.os--light {
  --secondary500: #0E7490;
  --secondary600: #155E75;
}

/* Dark mode accent — bright cyan readable on dark amber/brown surfaces */
.theme--amber.darkmode,
.theme--amber.os--dark {
  --secondary500: #22D3EE;
  --secondary600: #06B6D4;
}

@charset "UTF-8";
/* Blue — clean corporate blue palette.
   Mid-range blues (500–700) serve as the primary interactive surface.
   Secondary accent: amber/gold for contrast. */
.theme--blue {
  --primary100: #EFF6FF;
  --primary200: #DBEAFE;
  --primary300: #BFDBFE;
  --primary400: #93C5FD;
  --primary500: #3B82F6;
  --primary600: #2563EB;
  --primary700: #1D4ED8;
  --primary70090: #1D4ED8E6;
  --primary750: #1A44BE;
  --primary800: #1E40AF;
  --primary900: #1E3A8A;
  --primary950: #172554;
  --primary1000: #0E1B3D;
}

/* Light mode accent — dark amber readable on blue surfaces */
.theme--blue.lightmode,
.theme--blue.os--light {
  --secondary500: #B45309;
  --secondary600: #92400E;
}

/* Dark mode accent — bright amber readable on dark blue surfaces */
.theme--blue.darkmode,
.theme--blue.os--dark {
  --secondary500: #F59E0B;
  --secondary600: #D97706;
}

@charset "UTF-8";
/* Green — default theme, matches the palette already defined in general.css.
   No overrides needed unless you want to explicitly apply the class. */
.theme--green {
  --primary100: #E9F0F0;
  --primary200: #D4E1E1;
  --primary300: #A8C3C2;
  --primary400: #7DA4A4;
  --primary500: #518685;
  --primary600: #266867;
  --primary700: #1E5352;
  --primary70090: #1E5352E6;
  --primary750: #1A4645;
  --primary800: #173E3E;
  --primary900: #0F2A29;
  --primary950: #051821;
  --primary1000: #081515;
  --secondary500: #6f520b;
  --secondary600: #8e550f;
}

@charset "UTF-8";
/* Violet — rich purple palette.
   Mid-range violets (500–700) serve as the primary interactive surface.
   Secondary accent: amber/gold for contrast. */
.theme--violet {
  --primary100: #F5F3FF;
  --primary200: #EDE9FE;
  --primary300: #DDD6FE;
  --primary400: #C4B5FD;
  --primary500: #7C3AED;
  --primary600: #6D28D9;
  --primary700: #5B21B6;
  --primary70090: #5B21B6E6;
  --primary750: #4C1B96;
  --primary800: #4C1D95;
  --primary900: #2E1065;
  --primary950: #1E0A47;
  --primary1000: #0F0528;
}

/* Light mode accent — dark amber readable on violet surfaces */
.theme--violet.lightmode,
.theme--violet.os--light {
  --secondary500: #B45309;
  --secondary600: #92400E;
}

/* Dark mode accent — bright amber readable on dark violet surfaces */
.theme--violet.darkmode,
.theme--violet.os--dark {
  --secondary500: #F59E0B;
  --secondary600: #D97706;
}

@charset "UTF-8";
/* White — neutral gray surfaces with teal accent.
   Light mode: white/gray backgrounds, dark teal accent.
   Dark mode: dark gray backgrounds, light teal accent. */
.theme--white {
  --primary100: #FFFFFF;
  --primary200: #F8F9FA;
  --primary300: #E9ECEF;
  --primary400: #CED4DA;
  --primary500: #ADB5BD;
  --primary600: #6C757D;
  --primary700: #495057;
  --primary70090: #495057E6;
  --primary750: #343A40;
  --primary800: #2B3035;
  --primary900: #1A1D20;
  --primary950: #111315;
  --primary1000: #080A0B;
}

/* Light mode accent — dark teal readable on white/gray surfaces */
.theme--white.lightmode,
.theme--white.os--light {
  --secondary500: #1D6B6A;
  --secondary600: #165554;
}

/* Dark mode accent — light teal readable on dark gray surfaces */
.theme--white.darkmode,
.theme--white.os--dark {
  --secondary500: #5BBCBB;
  --secondary600: #3DAAAA;
}

abbr {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    cursor: default;
    text-decoration: underline dotted;
}

abbr:hover::after {
    content: attr(data-abbr);
    position: absolute;
    display: block;
    padding: var(--spacing8) var(--spacing16);
    border-radius: var(--spacing8);
    background: var(--background__default);
    border: 1px solid var(--form--field--border__default);
    color: var(--text__default);
    z-index: 1;
}

.item--action-bar {
	align-items: center;
	background-color: var(--action-bar--background__default);
	container: action-bar / inline-size;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing16);
	justify-content: space-between;
	margin: var(--spacing24) 0 var(--spacing32) 0;
	padding: var(--spacing12) var(--spacing24) var(--spacing12) var(--spacing24);
	position: relative;
	z-index: 1;
}

	.item--action-bar .form--control {
		margin-bottom: 0;
		max-width: 400px;
	}

@keyframes scale {

	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	50% {
		opacity: 0.5;
		transform: scale(1.01);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}

}

@keyframes fade-in {

	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}

}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes buzz
{
	from
	{
		transform: translateX(-5px);
	}
	to
	{
		transform: translateX(5px);
	}
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes bounce {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-10px); /* Bounce height */
	}
}

.item--avg-score {
	align-items: center;
	display: flex;
	gap: var(--spacing12);
	justify-content: flex-start;
	margin: 0 0 var(--spacing12) 0;
	position: relative;
	width: 100%;
}

	.assessment--avg-score {
		align-items: center;
		aspect-ratio: 1/1 auto;
		background-color: var(--primary1000);
		border: 0;
		border-radius: 25rem;
		color: var(--success700);
		display: flex;
		font-size: var(--font-size-XXS);
		font-weight: 600;
		justify-content: center;
		flex: 0 0 auto;
		height: 40px;
		margin: 0;
		width: 40px;
	}

		.avg-score--title {
			color: var(--card--color__default);
			font-weight: 500;
		}

		.assessment--completions {
			color: var(--card--color__alternative);
			font-weight: 400;
			font-size: var(--font-size-S);
			margin-top: var(--spacing4);
		}

	.assessment--name {
		display: flex;
		font-size: var(--font-size-ML);
		font-weight: 700;
		gap: var(--spacing8);
		margin: var(--spacing16) 0 0 0;
		letter-spacing: 1px;
	}

	.assessment--info {
		color: var(--card--color__alternative);
		display: flex;
		font-size: var(--font-size-S);
		font-weight: 400;
		justify-content: space-between;
		margin: 0 0 var(--spacing12) 0;
	}

	.assessment--description {
		font-size: var(--font-size-S);
		font-weight: 400;
		letter-spacing: 0.25px;
		line-height: 1.4;
		margin: 0 0 var(--spacing24) 0;
	}

.availability {
	display: flex;
	flex: 1 1 auto;
}

	.availability > div {
		flex: 1 1 auto;
	}

	.column--day {
		background-color: transparent;
		width: 100%;
		padding: 11px 3px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}

	.column--day-date {
		font-weight: bold;
		margin-bottom: 0.5rem;
	}

	.time-slot {
		background-color: var(--availability--time-slot--background__default);
		border: 1px solid var(--availability--time-slot--border__default);
		color: var(--availability--time-slot--text__default);
		display: block;
		width: 100%;
		text-align: center;
		padding: 6px;
		margin-bottom: 2px;
		border-radius: .2rem;
		font-size: 14px;
		font-weight: bold;
		cursor: pointer;
		white-space: nowrap;
		transition: all .3s ease;
	}

		.time-slot:hover {
			background-color: var(--availability--time-slot--background__default) !important;
			border: 1px solid var(--interactive__hover) !important;
			color: var(--interactive__hover) !important;
		}

		.time-slot:active {
			background-color: var(--interactive__default) !important;
			border: 1px solid var(--interactive__default) !important;
			color: var(--interactive--text__default) !important;
		}

		.time-slot:last-of-type {
			margin-bottom: 0;
		}

		.is--past .time-slot {
			pointer-events: none;
			opacity: 0.7;
		}

		.is--past .column--day {
			background-color: var(--availability--is--past--column--day--background__default);
		}

		.is--today .time-slot {
			background-color: var(--availability--is--today--time-slot--background__default);
			border: 1px solid var(--availability--is--today--time-slot--border__default);
		}

		.is--today .column--day {
			background-color: var(--availability--is--today--column--day--background__default);
		}

			.is--today .column--day-date {
				color: var(--availability--is--today--column--day--text__default);
			}

		.is--unavailable {
			opacity: 0.4 !important;
			pointer-events: none;
		}

		.was--available {
			pointer-events: none;
			opacity: 0.7;
		}

.avatar {
	align-items: center;
	aspect-ratio: auto 1 / 1;
	background-color: var(--avatar--background__default);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: .2rem;
	color: var(--avatar--text__default) !important;
	display: flex;
	font-size: inherit;
	font-weight: 700;
	height: min(30vw, 16rem);
	justify-content: center;
	margin: 0;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	transition: all .3s ease;
	width: min(30vw, 16rem);
}
	.badge {
		text-shadow: -2px 1px 5px black;
		color: orange;
		position: absolute;
		top: -2px;
		right: -4px;
		font-size: 0.75rem;
	}

/* .avatar:has(.badge):before */
.avatar .badge:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.9));
	border-radius: 2.5rem;
	overflow: hidden;
}

.banner--notification {
	align-items: center;
	border-bottom: 0;
	border-radius: var(--spacing8);
	box-shadow: 4px 8px 32px 0 var(--shadow1);
	display: flex;
	font-size: var(--font-size-S);
	font-weight: 600;
	height: 0px;
	justify-content: space-between;
	line-height: 1;
	margin: var(--spacing4) auto var(--spacing4) auto;
	overflow: hidden;
	opacity: 0;
	padding: var(--spacing4) var(--spacing16) var(--spacing4) var(--spacing16);
	position: sticky;
	top: 0;
	transition: all .3s ease;
	width: calc(100% - var(--spacing32));
	z-index: 8;
}

	.banner--notification.error,
	.banner--notification.information,
	.banner--notification.success,
	.banner--notification.warning {
		opacity: 1;
		height: min-content;
		overflow: visible;
	}

	.banner--notification.error {
		background-color: var(--error--background__default);
		border-bottom: 3px solid var(--error800);
		color: var(--error800);
	}

	.banner--notification.information {
		background-color: var(--information--background__default);
		border-bottom: 3px solid var(--information__default);
	}

	.banner--notification.success {
		background-color: var(--success--background__default);
		border-bottom: 3px solid var(--success__default);
	}

	.banner--notification.warning {
		background-color: var(--warning--background__default);
		border-bottom: 3px solid var(--warning__default);
	}

.bar-composition {
    border-radius: var(--spacing4);
    display: flex;
    height: 12px;
    overflow: hidden;
    width: 100%;
}

    .bar-composition__segment {
        height: 100%;
        transition: width 0.3s ease;
    }

    .bar-composition__segment.is--primary { background-color: var(--secondary500); }
    .bar-composition__segment.is--success { background-color: var(--success700); }
    .bar-composition__segment.is--warning { background-color: var(--warning700); }
    .bar-composition__segment.is--error   { background-color: var(--error700); }
    .bar-composition__segment.is--info    { background-color: var(--information700); }
    .bar-composition__segment.is--neutral { background-color: var(--neutral700); }

.bar-composition__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing12);
    margin-top: var(--spacing12);
}

    .bar-composition__legend-item {
        align-items: center;
        color: var(--text__default);
        display: flex;
        font-size: var(--font-size-XS);
        gap: var(--spacing4);
    }


#breadcrumbs {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-size-S);
    margin: var(--spacing8) var(--spacing16) var(--spacing24) var(--spacing16);
}

    .arrow--previous,
    .arrow--next {
        align-items: center;
        background-color: transparent;
        color: var(--interactive__default);
        cursor: pointer;
        display: flex;
        font-size: 0.9rem;
        height: 2rem;
        justify-content: center;
        transition: all .3s ease;
        width: 2rem;
    }

    #breadcrumbs a {
        color: var(--breadcrumbs--color__default);
        font-weight: 400;
        margin-left: 0;
        margin-right: var(--spacing4);
        letter-spacing: 0.4px;
        line-height: normal;
        outline: none;
    }

        #breadcrumbs a:after {
            color: var(--breadcrumbs--color__default);
            content: '\e912';
            cursor: default;
            font-family: 'tsb';
            margin-left: var(--spacing4);
        }

    #breadcrumbs a:last-of-type {
        color: var(--breadcrumbs--color__active);
    }

        #breadcrumbs a:last-of-type:after {
            display: none;
        }

    #breadcrumbs a:hover,
    #breadcrumbs a:focus {
        color: var(--breadcrumbs--color__hover);
    } 

    .breadcrumbs--previous-next {
        display: inline-flex;
        font-size: var(--font-size-ML);
        margin: 0 var(--spacing16) 0 0;
    }

        #breadcrumbs .breadcrumbs--previous-next a {
            color: var(--secondary500);
        }

            #breadcrumbs .breadcrumbs--previous-next a:hover {
                color: var(--interactive__hover);
            }

            .breadcrumbs--previous-next a:after {
                display: none;
            }
        
        #breadcrumbs a.disabled {
            color: var(--breadcrumbs--color__disabled);
            pointer-events: none;
        }

.item--action {
	align-items: center;
	aspect-ratio: auto 1 / 1;
	background-color: transparent;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 20px;
	font-weight: 400;
	height: 44px;
	justify-content: center;
	padding: var(--spacing12);
	transition: all .3s ease;
	width: 44px;
}

	.item--action:hover {
		background-color: var(--item--action--background__hover);
		color: var(--secondary500);
	}

.size--small.item--action {
	font-size: 0.8rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 1.5rem;
}

.filtering--buttons {
	container: filtering-button / inline-size;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing8);
	margin: 0 0 var(--spacing16) 0;
	white-space: nowrap;
}

	.filtering--buttons input {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		z-index: -1;
	}

	.filter-button {
		background-color: var(--button--filter--background__default);
		border: 1px solid var(--button--filter--border__default);
		border-radius: var(--spacing8);
		color: var(--button--filter--color__default);
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
		padding: 10px 16px;
		position: relative;
		transition: border .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
	}

		.filter-button:hover {
			background-color: var(--button--filter--background__hover);
			border: 1px solid var(--button--filter--border__hover);
			color: var(--button--filter--color__hover);
		}

		input:checked + .filter-button {
			background-color: var(--button--filter-selected--background__default);
			border: 1px solid var(--button--filter-selected--border__default);
			color: var(--button--filter-selected--color__default);
		}

			input:checked + .filter-button:hover {
				background-color: var(--button--filter-selected--background__hover);
				border: 1px solid var(--button--filter-selected--border__hover);
				color: var(--button--filter-selected--color__hover);
			}

		input:focus + .filter-button {
			border: 1px solid var(--outline__default);
		}

	.filter-button.is--active {
		background-color: var(--button--filter-selected--background__default);
		border: 1px solid var(--button--filter-selected--border__default);
		color: var(--button--filter-selected--color__default);
	}

		.filter-button.is--active:hover {
			background-color: var(--button--filter-selected--background__hover);
			border: 1px solid var(--button--filter-selected--border__hover);
			color: var(--button--filter-selected--color__hover);
		}



.primary-button {
	align-items: center;
	background-color: var(--button--primary--background__default);
	border: 1px solid var(--button--primary--border__default);
	border-radius: var(--spacing8);
	color: var(--button--primary--color__default);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--font-size-S);
	font-weight: 600;
	gap: var(--spacing12);
	line-height: normal;
	padding: var(--spacing12) var(--spacing16);
	width: auto;
	white-space: nowrap;
	transition: border .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
}

	.primary-button:hover {
		background-color: var(--button--primary--background__hover);
		border: 1px solid var(--button--primary--border__hover);
		color: var(--button--primary--color__hover);
	}

	.primary-button i {
		font-size: var(--font-size-M);
	}

.secondary-button {
	align-items: center;
	background-color: var(--button--secondary--background__default);
	border: 1px solid var(--button--secondary--border__default);
	border-radius: var(--spacing8);
	color: var(--button--secondary--color__default);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--font-size-S);
	font-weight: 600;
	gap: var(--spacing12);
	line-height: normal;
	padding: var(--spacing12) var(--spacing16);
	width: auto;
	white-space: nowrap;
	transition: border .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
}

	.secondary-button:hover {
		background-color: var(--button--secondary--background__hover);
		border: 1px solid var(--button--secondary--border__hover);
		color: var(--button--secondary--color__hover);
	}

	.secondary-button i {
		font-size: var(--font-size-M);
	}

	#theme-switcher {
		background-color: var(--theme-switcher--background__default);
		border: 1px solid var(--theme-switcher--border__default);
		color: var(--theme-switcher--color__default);
	}

		#theme-switcher:hover {
			background-color: var(--theme-switcher--background__hover);
			border: 1px solid var(--theme-switcher--border__hover);
			color: var(--theme-switcher--color__hover);
		}

		.theme-icon::before {
			content: var(--theme-switcher--icon__default);
			font-family: 'tsb';
			font-style: normal;
		}

		#variant-name::before {
			content: var(--variant-name--content);
		}


.segmented-button {
	align-items: center;
	display: flex;
	margin: 0 0 var(--spacing16) 0;
	position: relative;
	width: max-content;
}

	.segmented-button input {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		z-index: -1;
	}

	.segmented-button .filter-button {
		border-radius: 0;
		white-space: nowrap;
	}

	.segmented-button .filter-button:first-of-type {
		border-top-left-radius: var(--spacing8);
		border-bottom-left-radius: var(--spacing8);
	}

	.segmented-button .filter-button:last-of-type {
		border-top-right-radius: var(--spacing8);
		border-bottom-right-radius: var(--spacing8);
	}

	.item--card .segmented-button {
		width: 100%;
	}

		.item--card .segmented-button .filter-button {
			flex: 1 1 auto;
			text-align: center;
		}

.item--spin-button {
	align-items: center;
    display: flex;
    gap: var(--spacing16);
    padding: 0 0 0 0;
	margin: 0 0 var(--spacing16) 0;
}

	.spin-button {
		display: flex;
		background-color: var(--form--field--background__default);
		border: 1px solid var(--form--field--border__default);
		color: var(--form--field--text__default);
		font-size: var(--font-size-M);
		line-height: 1.23536;
		font-weight: 400;
		height: 48px;
		border-radius: var(--spacing8);
		margin-bottom: 0;
		padding: 0;
		transition: all .3s ease;
	}

	.spin-button:hover {
		border-color: var(--interactive__default);
	}

	.spin-button:focus-within {
		outline: 2px solid var(--outline__default);
		outline-offset: 3px;
	}

		.spin-button input {
			appearance: none;
			background-color: var(--form--field--background__default);
			color: var(--form--field--text__default);
			font-size: var(--font-size-M);
			outline: none;
			text-align: center;
			text-overflow: ellipsis;
			width: 24px;
			-webkit-appearance: none;
		}

		.spin-button--control {
			background-color: transparent;
			color: var(--interactive__default);
			border-radius: var(--spacing8);
			cursor: pointer;
			font-size: var(--font-size-M);
			outline: none;
			padding: 0 var(--spacing8) 0 var(--spacing8);
			transition: all .3s ease;
			z-index: 1;
		}

			.spin-button--control:hover {
				color: var(--interactive__hover);
			}


.tertiary-button {
	align-items: center;
	background-color: var(--button--tertiary--background__default);
	border: 1px solid var(--button--tertiary--border__default);
	border-radius: var(--spacing8);
	color: var(--button--tertiary--color__default);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--font-size-S);
	font-weight: 600;
	line-height: normal;
	padding: var(--spacing12) var(--spacing16);
	transition: border .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
	width: auto;
}

	.tertiary-button:hover {
		background-color: var(--button--tertiary--background__hover);
		border: 1px solid var(--button--tertiary--border__hover);
		color: var(--button--tertiary--color__hover);
	}

	.tertiary-button i {
		font-size: var(--font-size-M);
	}

	.is--delete {
		color: var(--button--delete--color__default);
	}

		.is--delete:focus {
			background-color: var(--button--delete--background__hover);
			border-color: var(--button--delete--border__hover);
			color: var(--button--delete--color__hover);
		}

		.is--delete:hover {
			background-color: var(--button--delete--background__hover);
			border-color: var(--button--delete--border__hover);
			color: var(--button--delete--color__hover);
		}

.calendar {
	grid-template-columns: repeat(8, 1fr);
}

	.calendar .calendar--day:nth-of-type(8n + 7),
	.calendar .calendar--day:nth-of-type(8n + 8) {
		background-color: var(--calendar--weekend--background__default);
	}

.calendar--staff {
	border-left: 1px solid var(--calendar--border__default);
	border-right: 1px solid var(--calendar--border__default);
	border-bottom: 1px solid var(--calendar--border__default);
	padding: var(--spacing4) var(--spacing4) var(--spacing32) var(--spacing4);
	text-align: left;
	min-height: 7rem;
	position: relative;
}

.calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 10px;
}

	.calendar__header__title {
		border-bottom: 1px solid var(--calendar--border__default);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .75rem;
		font-weight: bold;
		grid-auto-rows: 1rem;
	}

	.calendar--row {
		display: contents;
	}

		.calendar--day {
			border-right: 1px solid var(--calendar--border__default);
			border-bottom: 1px solid var(--calendar--border__default);
			padding: var(--spacing4) var(--spacing4) var(--spacing24) var(--spacing4);
			text-align: right;
			min-height: 7rem;
			position: relative;
		}

			.calendar .calendar--day {
				background: var(--calendar--day--background__default);
				height: 7rem;
				overflow: hidden;
			}

				.calendar--row .calendar--day:first-child {
					border-left: 1px solid var(--calendar--border__default);
				}

				.calendar:not(#calendarScheduling) .calendar--day:nth-of-type(7n + 6),
				.calendar:not(#calendarScheduling) .calendar--day:nth-of-type(7n + 7) {
					background-color: var(--calendar--weekend--background__default);
				}

				.show-more {
					background-image: var(--calendar--show-more-background__default);
					color: var(--interactive__default);
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 2.5rem;
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					font-size: 0.75rem;
					font-weight: bold;
					padding: 1.2rem 0.25rem 0 0.25rem;
					text-align: center;
				}

					.calendar--day.is--today .show-more {
						background-image: var(--calendar--is--today--show-more-background__default);
					}

					.calendar .calendar--day:nth-of-type(7n + 6) .show-more,
					.calendar .calendar--day:nth-of-type(7n + 7) .show-more {
						background-image:  var(--calendar--weekend--show-more--background__default);
					}

					.show-more .item--action {
						background-color: transparent;
						border-radius: .2rem;
						font-size: var(--font-size-S);
						padding: 0 0 var(--spacing4) 0;
						height: fit-content;
						outline: none;
						width: fit-content;
					}

					.event--counter {
						color: var(--accent__default);
						font-size: 0.7rem;
						white-space: nowrap;
					}

						.event--counter i {
							margin-right: 0.25rem;
						}

		.calendar--day.is--today {
			background-color: var(--calendar--is--today--background__default);
		}

			.calendar--date {
				color: var(--text__default);
				display: flex;
				align-items: center;
				flex-direction: row-reverse;
				font-size: 0.75rem;
				font-weight: bold;
				margin-bottom: 0.1875rem;
			}

				.is--today .calendar--date,
				.is--today .calendar--date:after {
					color: var(--availability--is--today--column--day--text__default);
				}

				.is--today .calendar--date:after {
					content: 'Today';
					margin-right: auto;
				}

				.not--current--month .calendar--date,
				.not--current--month .calendar--event,
				.not--current--month .show-more .event--counter,
				.not--current--month .show-more .item--action {
					opacity: 0.5;
				}

		.modal .calendar--day {
			border: none;
			min-height: inherit;
		}
		.calendar.week > .calendar--day:nth-child(7n) {
			border-right: 0;
		}

		.calendar--event {
			background-color: var(--meeting--background__default);
			box-shadow: 0 5px 10px 1px var(--meeting--box-shadow__hover);
			border-left: 10px solid var(--meeting__default);
			border-radius: 10px;
			display:flex;
			flex-wrap: nowrap;
			flex-direction: column;
			justify-content: space-between;
			margin-bottom: var(--spacing4);
			overflow: hidden;
			padding: var(--spacing4) var(--spacing4) var(--spacing4) var(--spacing4);
			position: relative;
			text-align: left;
			transition: all .3s ease;
		}

			.calendar--event:hover {
				box-shadow: 0 4px 43px 0 var(--meeting--box-shadow__hover);
			}

			.calendar--event.is--cancelled {
				border-left: 10px solid var(--meeting--cancelled__default);
			}

			.calendar--event.is--done {
				border-left: 10px solid var(--meeting--accepted__default);
			}

			.event--title {
				font-size: var(--font-size-XS);
				font-weight: 500;
				line-height: 1.1;
				margin-bottom: var(--spacing4);
				text-overflow: ellipsis;
			}

				.calendar--day .event--title {
					display: -webkit-box;
					-webkit-line-clamp: 3;
					line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

			.event--time {
				font-size: var(--font-size-XS);
				margin-bottom: var(--spacing4);
				line-height: 1;
				color: var(--text__default);
			}

			.meeting--tools {
				display: flex;
				flex-wrap: wrap;
			}

			.item--calendar--day-tools,
			.event--tools {
				align-items: center;
				background-color: var(--background__default);
				display: flex;
				flex-wrap: wrap;
				height: 100%;
				justify-content: center;
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
			}

				.event--tools .item--action {
					font-size: 0.6rem;
					width: 1rem;
					height: 1rem;
					background-color: none;
				}

		.calendar--event + .calendar--event:last-child {
			margin: 0 0 var(--spacing32) 0;
		}

.item--card {
	background-color: var(--card--background__default);
	border: 1px solid var(--card--border__default);
	border-radius: var(--spacing16);
	box-shadow: 4px 8px 32px 0 var(--shadow1);
	/* container: card / inline-size; */
	display: flex;
	flex-direction: column;
	padding: var(--spacing24) 0 0 0;
}
	
	.card--header {
		display: flex;
		flex: 0 0;
		flex-wrap: wrap;
		gap: var(--spacing16);
		justify-content: space-between;
		margin: 0 0 var(--spacing24) 0;
		padding: 0 var(--spacing24) 0 var(--spacing24);
	}

		.card--title {
			color: var(--card--color__default);
			font-size: var(--font-size-ML);
			font-weight: 500;
		}

		.card--subtitle {
			color: var(--card--color__alternative);
			font-size: var(--font-size-S);
			font-weight: 400;
			margin: var(--spacing4) 0 0 0;
		}

		.card--header button, .card--header a.is--button {
			white-space: nowrap;
			height: fit-content;
		}

	.card--content {
		padding: 0 var(--spacing24) 0 var(--spacing24);
		position: relative;
	}

	.card--content-fullwidth {
		padding: 0;
		position: relative;
	}
		.card--content-fullwidth [src$="quiz-image.svg"] {
			opacity: .4; 
		}

		.card--content-overlay {
			align-items: center;
			display: flex;
			flex-direction: column;
			gap: var(--spacing16);
			height: 100%;
			left: 0;
			justify-content: center;
			padding: 0 var(--spacing8) 0 var(--spacing8);
			position: absolute;
			text-align: center;
			top: 0;
			width: 100%;
		}

		.is--searchable {
			width: 400px;
		}

		.card--filtering {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: var(--spacing16);
		}

		.card--filtering .form-field {
			width: 400px;
			flex: 0 0 auto;
		}

	.card--footer {
		align-items: center;
		background-color: var(--card-footer--background__default);
		border-bottom-left-radius: var(--spacing16);
		border-bottom-right-radius: var(--spacing16);
		/* container: card-footer / inline-size; */
		display: flex;
		flex-wrap: wrap;
		font-size: var(--font-size-S);
		gap: var(--spacing8);
		justify-content: flex-end;
		margin-top: auto;
		min-height: 52px;
		padding: var(--spacing8) var(--spacing24) var(--spacing8) var(--spacing24);
	}

		.item--pagination {
			justify-content: space-between;
		}

			.footer-buttons-container {
				display: flex;
				flex-wrap: wrap;
				gap: var(--spacing8);
			}

			.item--pagination .footer-buttons-container {
				align-self: flex-end;
			}

			/* Fix up the item margin if there is h1-6 as first element in card-content*/
			:not(.card--grid) > .item--card:not(:first-child)
			{
				margin-top: var(--spacing32);
			}
			
			.item--card .card--content h6:is(:first-child),
			.item--card .card--content h5:is(:first-child),
			.item--card .card--content h4:is(:first-child),
			.item--card .card--content h3:is(:first-child),
			.item--card .card--content h2:is(:first-child),
			.item--card .card--content h1:is(:first-child) {
				margin-top: 0 !important;
			}

.chart-placeholder {
    overflow: hidden;
    position: relative;
    width: 100%;
}

    .chart-placeholder__svg {
        display: block;
        height: 100%;
        width: 100%;
    }

    .chart-placeholder__grid line {
        stroke: var(--primary200);
        stroke-dasharray: 4 4;
        stroke-width: 1;
    }

    .chart-placeholder__line {
        animation: chart-draw 2.4s ease-out infinite;
        stroke: var(--primary300);
        stroke-dasharray: 1200;
        stroke-dashoffset: 1200;
        stroke-linecap: round;
        stroke-width: 3;
    }

    .chart-placeholder__bars rect {
        animation: chart-pulse 1.6s ease-in-out infinite;
        fill: var(--primary200);
    }

    .chart-placeholder__bars rect:nth-child(2) { animation-delay: 0.15s; }
    .chart-placeholder__bars rect:nth-child(3) { animation-delay: 0.30s; }
    .chart-placeholder__bars rect:nth-child(4) { animation-delay: 0.45s; }
    .chart-placeholder__bars rect:nth-child(5) { animation-delay: 0.60s; }
    .chart-placeholder__bars rect:nth-child(6) { animation-delay: 0.75s; }

    .chart-placeholder__label {
        bottom: var(--spacing8);
        color: var(--card--color__alternative);
        font-size: var(--font-size-XS);
        left: 50%;
        position: absolute;
        text-align: center;
        transform: translateX(-50%);
        white-space: nowrap;
    }

@keyframes chart-draw {
    0%   { stroke-dashoffset: 1200; opacity: 0.5; }
    55%  { stroke-dashoffset: 0;    opacity: 1;   }
    75%  { stroke-dashoffset: 0;    opacity: 1;   }
    100% { stroke-dashoffset: 0;    opacity: 0;   }
}

@keyframes chart-pulse {
    0%, 100% { opacity: 0.35; }
    50%       { opacity: 0.8;  }
}


.dialog--overlay {
	background-color: var(--modal--background__default);
	backdrop-filter: blur(15px);
	border: 2px solid var(--modal--border__default);
	height: 100%;
	left: 0;
	opacity: 0.95;
	position: fixed;
	top: 0;
	transition: all .3s ease;
	width: 100%;
	z-index: 10;
}

	.dialog {
		animation: scale .3s ease-in-out;
		background-color: var(--dialog--background__default);
		border: 2px solid var(--secondary600);
		border-radius: 1rem;
		box-shadow: 4px 8px 32px 0 var(--shadow1);
		left: 0;
		margin: 0 auto;
		max-width: 448px;
		padding: 0 0 0 0;
		position: fixed;
		right: 0;
		top: 0;
		width: calc(100% - var(--spacing32));
		z-index: 11;
	}

	.dialog--title {
		color: var(--text__default);
		font-size: var(--font-size-ML);
		font-weight: 500;
		line-height: 1.2;
		margin: var(--spacing24) 0 var(--spacing24) 0;
		padding: 0 var(--spacing24) 0 var(--spacing24);
	}

	.dialog--content {
		color: var(--text__default);
		margin: 0 0 var(--spacing24) 0;
	}

		.dialog.warning .dialog--title {
			color: var(--secondary500);
		}

.file-upload--input {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
}

.file-upload--drop-area {
    border: 2px dashed var(--branding__default);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: var(--blockquote--border__default);
    transition: background 0.3s ease;
    position: relative;
    display: block;
}

.file-upload--drop-area:has(input:focus) {
    border: 2px dashed var(--primary700);
    background: var(--primary200);
}

.file-upload--drop-area.dragover {
    background: var(--availability--is--past--time-slot--background__default);
    border-color: var(--branding__default);
}
.file-upload--list {
    margin-top: 10px;
    padding: 0;
    font-size: var(--font-size-S);
}
.file-upload--list li {
    list-style: none;
    margin-bottom: 5px;
}

.dt-filters {
    display: flex;
    flex-direction: column;
    gap: var(--spacing12);
    margin-bottom: var(--spacing16);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing24) 0 var(--spacing24);
}

/* column sorting */
table .dt-sortable:hover {
    cursor: pointer;
    opacity: .92;
}

.dt-sortable.dt-sort-asc::after {
    content: "\e903";
    font-family: 'tsb' !important;
    margin-left: 3px;
    display: inline-block;
}

.dt-sortable.dt-sort-desc::after {
    content: "\e900";
    font-family: 'tsb' !important;
    margin-left: 3px;
    display: inline-block;
}

.dt-filters-row {
    display: flex;
    gap: var(--spacing12);
    flex-wrap: wrap;
}

.dt-filters-row .form--control {
    margin-bottom: 0;
}

/* Table cell padding
table tr > th:first-of-type,
table tr > td:first-of-type {
    padding-left: 20px !important;
}
 */

/* Table footer */
.dt-table-footer {
    padding: var(--spacing16);
    border-top: 1px solid var(--card--border__default);
}

.dt-pagination-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing12);
}

/* Page size selector */
.dt-page-size {
    display: flex;
    align-items: center;
    gap: var(--spacing8);
}

.dt-page-size button {
    min-width: 50px;
    padding: var(--spacing8) var(--spacing12);
    border: 1px solid var(--button--filter--border__default);
    border-radius: var(--spacing8);
    background: var(--button--filter--background__default);
    color: var(--button--filter--color__default);
    font-size: var(--font-size-S);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.dt-page-size button:hover:not(:disabled) {
    background: var(--button--filter--background__hover);
    border-color: var(--button--filter--border__hover);
    color: var(--button--filter--color__hover);
}

.dt-page-size button:disabled {
    background: var(--button--filter-selected--background__default);
    color: var(--button--filter-selected--color__default);
    border-color: var(--button--filter-selected--border__default);
    cursor: default;
    font-weight: 600;
}

/* Pagination */
.dt-pagination {
    display: flex;
    gap: var(--spacing8);
    align-items: center;
}

.dt-pagination button {
    min-width: 40px;
    height: 40px;
    padding: var(--spacing8) var(--spacing12);
    border: 1px solid var(--button--filter--border__default);
    border-radius: var(--spacing8);
    background: var(--button--filter--background__default);
    color: var(--button--filter--color__default);
    font-size: var(--font-size-S);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.dt-pagination button:hover:not(:disabled) {
    background: var(--button--filter--background__hover);
    border-color: var(--button--filter--border__hover);
    color: var(--button--filter--color__hover);
    transform: translateY(-1px);
}

.dt-pagination button:disabled {
    background: var(--button--filter-selected--background__default);
    color: var(--button--filter-selected--color__default);
    border-color: var(--button--filter-selected--border__default);
    cursor: default;
    font-weight: 600;
}

/* Arrow buttons */
.dt-pagination-arrow {
    font-size: var(--font-size-L);
    padding: var(--spacing8) var(--spacing16);
}

.dt-pagination-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Ellipsis */
.dt-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: var(--text__default);
    font-weight: 500;
    user-select: none;
}

/* Export button */
.dt-export-row {
    display: flex;
    justify-content: flex-end;
}

.dt-export-csv {
    margin: 0;
}

h1 { 
	color: var(--headings__default);
	font-size: var(--font-size-XL);
	font-weight: 700;
	letter-spacing: 0.25px;
	line-height: normal;
	margin: 0 0 var(--spacing32) 0;
	text-transform: initial;
}

h2 {
	color: var(--headings__default);
	font-size: var(--font-size-L);
	font-weight: 700;
	line-height: normal;
	margin: 0 0 var(--spacing24) 0;
	text-transform: initial;
}

h3 {
	color: var(--headings__default);
	font-size: var(--font-size-M);
	font-weight: 600;
	line-height: normal;
	margin: 0 0 var(--spacing16) 0;
	text-transform: initial;
}

h4 {
	color: var(--headings__default);
	font-size: var(--font-size-M);
	font-weight: 700;
	margin: var(--spacing16) 0 var(--spacing16) 0;
}

h5 {
	color: var(--headings__default);
	font-size: var(--font-size-XS);
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	margin: var(--spacing32) 0 var(--spacing16) 0;
}

@font-face {
  font-family: 'tsb';
  src:  url('/fonts/blox/tsb.eot?v8icfa');
  src:  url('/fonts/blox/tsb.eot?v8icfa#iefix') format('embedded-opentype'),
    url('/fonts/blox/tsb.ttf?v8icfa') format('truetype'),
    url('/fonts/blox/tsb.woff?v8icfa') format('woff'),
    url('/fonts/blox/tsb.svg?v8icfa#tsb') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="tsb-"], [class*=" tsb-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'tsb' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tsb-arrow-down:before {
  content: "\e900";
}
.tsb-arrow-next:before {
  content: "\e901";
}
.tsb-arrow-previous:before {
  content: "\e902";
}
.tsb-arrow-up:before {
  content: "\e903";
}
.tsb-assessment:before {
  content: "\e904";
}
.tsb-user:before {
  content: "\e905";
}
.tsb-chevron-down:before {
  content: "\e906";
}
.tsb-dashboard:before {
  content: "\e907";
}
.tsb-delete:before {
  content: "\e908";
}
.tsb-edit:before {
  content: "\e909";
}
.tsb-link:before {
  content: "\e90a";
}
.tsb-logout:before {
  content: "\e90b";
}
.tsb-q:before {
  content: "\e90c";
  color: #f58800;
}
.tsb-quiz:before {
  content: "\e90d";
}
.tsb-settings:before {
  content: "\e90e";
}
.tsb-stopwatch:before {
  content: "\e90f";
}
.tsb-users:before {
  content: "\e910";
}
.tsb-chevron-left:before {
  content: "\e911";
}
.tsb-chevron-right:before {
  content: "\e912";
}
.tsb-search:before {
  content: "\e913";
}
.tsb-plus:before {
  content: "\e914";
}
.tsb-checked:before {
  content: "\e915";
}
.tsb-close:before {
  content: "\e916";
}
.tsb-hide:before {
  content: "\e917";
}
.tsb-show:before,
.tsb-eye:before {
  content: "\e918";
}
.tsb-warning:before {
  content: "\e919";
}
.tsb-calendar:before {
  content: "\e91a";
}
.tsb-copy:before {
  content: "\e91b";
}
.tsb-generate:before {
  content: "\e91c";
}
.tsb-minus:before {
  content: "\e91d";
}
.tsb-book:before {
  content: "\e91e";
}
.tsb-coffee:before {
  content: "\e91f";
}
.tsb-template:before {
  content: "\e920";
}
.tsb-folder:before {
  content: "\e921";
}
.tsb-home:before {
  content: "\e922";
}
.tsb-moon:before {
  content: "\e923";
}
.tsb-more-horizontal:before {
  content: "\e924";
}
.tsb-more-vertical:before {
  content: "\e925";
}
.tsb-star:before {
  content: "\e926";
}
.tsb-sun:before {
  content: "\e927";
}
.tsb-wrench:before {
  content: "\e928";
}
.tsb-blox:before {
  content: "\e929";
  color: #f58800;
}
.tsb-files:before {
  content: "\e92a";
}
.tsb-flip-horizontal:before {
  content: "\e92b";
}
.tsb-flip-vertical:before {
  content: "\e92c";
}
.tsb-rotate-left:before {
  content: "\e92d";
}
.tsb-rotate-right:before {
  content: "\e92e";
}
.tsb-user-tag:before {
  content: "\e92f";
}
.tsb-upload:before {
  content: "\e930";
}
.tsb-download:before {
  content: "\e931";
}
.tsb-cellphone:before {
  content: "\e932";
}
.tsb-missing-tag:before {
  content: "\e933";
}
.tsb-location:before {
  content: "\e934";
}
.tsb-birthday:before {
  content: "\e935";
}
.tsb-flag:before {
  content: "\e936";
}
.tsb-phone:before {
  content: "\e937";
}
.tsb-email:before {
  content: "\e938";
}
.tsb-department:before {
  content: "\e939";
}
.tsb-balance-scale:before {
  content: "\e93a";
}
.tsb-dollar-sign:before {
  content: "\e93b";
}
.tsb-file-text:before {
  content: "\e93c";
}
.tsb-file-image:before {
  content: "\e93d";
}
.tsb-file-pdf:before {
  content: "\e93e";
}
.tsb-globe:before {
  content: "\e93f";
}
.tsb-id-card:before {
  content: "\e940";
}
.tsb-passport:before {
  content: "\e941";
}
.tsb-gender:before {
  content: "\e943";
}
.tsb-city:before {
  content: "\e944";
}
.tsb-team:before {
  content: "\e945";
}
.tsb-clock:before {
  content: "\e946";
}
.tsb-company:before {
  content: "\e947";
}
.tsb-qrcode:before {
  content: "\e948";
}
.tsb-payroll:before {
  content: "\e949";
}
.tsb-money:before {
  content: "\e942";
}
.tsb-key:before {
  content: "\e94a";
}
.tsb-lock:before {
  content: "\e94b";
}


.form-selection {
	align-items: center;
	border: 1px solid var(--form--field--border__default);
	border-radius: var(--spacing8);
	display: flex;
	flex: 1 1 25%;
	font-size: var(--font-size-M);
	gap: var(--spacing16);
	padding: var(--spacing12) var(--spacing16); 
}

	.form-selection:focus {
		background-color: var(--primary900);
		border: 1px solid var(--primary700);
	}

	.form-selection .form--field {
		align-items: center;
		aspect-ratio: 1/1 auto;
		background-color: var(--form--field--checks--background__default);
		border-radius: var(--spacing4);
		border-color: var(--secondary500);
		cursor: pointer;
		display: flex;
		width: var(--spacing16);
		height: var(--spacing16);
		justify-content: center;
		padding: 0;
		position: relative;
		transform: translateY(-0.075em);
	}

		.form-selection:hover .form--field {
			border-color: var(--secondary600);
		}

	.form-selection .form--label {
		color: var(--form--field--label--color__default);
		cursor: pointer;
		font-size: var(--spacing16) !important;
		left: 0;
		line-height: var(--spacing24);
		overflow-wrap: break-word;
		pointer-events: inherit;
		position: relative;
		text-overflow: ellipsis;
		top: 0 !important;
		white-space: normal;
	}

		.form-selection .form--label:hover {
			color: var(--secondary600);
		}

	.form--control.form-selection .form--field:before {
		background-color: var(--primary700);
		border-radius: 0.1rem;
		content: '';
		display: block;
		width: 0;
		height: 0;
		transform: scale(0);
		transition: all 0.3s ease;
	}
	
	.form--control.form-selection .form--field:checked:before {
		background-color: var(--secondary600);
		width: 6px;
		height: 6px;
		transform: scale(1);
	}
	
	.form-selection .form--field:focus:before {
		background-color: var(--interactive__hover);
	}

	.form-selection .form--field[type="radio"],
	.form-selection .form--field[type="radio"]:before {
		border-radius: 50%;
	}

	.form-selection .form--field[type="checkbox"]:before {
		color: var(--secondary500);
		content: '\e915';
		font-family: 'tsb' !important;
		left: -1px;
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: -2px;
	}

	.form-selection .form--field[type="checkbox"]:checked::before {
		background-color: transparent;
	}

	.is--selected {
		background-color: #0F2A29;
		border-color: var(--secondary500);
	}

	.is--correct-answer {
		border-color: var(--success800);
	}

		.is--correct-answer::after {
			content: "\e915";
			color: var(--success700);
			font-family: 'tsb';
			margin-left: auto;
		}

.form--control {
	flex-grow: 1;
	margin-bottom: var(--spacing16);
	position: relative;
}

    label {
        cursor: pointer;
    }

    ::placeholder {
        color: var(--placeholder--color__default);
    }

	.form--field.without-label {
		padding: var(--spacing16);
	}

    .additional--information {
        color: var(--text__default);
        display: block;
        line-height: 1.6;
        max-width: 70ch;
    }

    .form--field {
        appearance: none;
        background-color: var(--form--field--background__default);
        border: 1px solid var(--form--field--border__default);
        border-radius: var(--spacing8);
        color: var(--form--field--text__default);
        font-size: var(--font-size-M);
        font-weight: 400;
        height: 48px;
        line-height: 1.23536;
        margin-bottom: 0;
        padding: var(--spacing24) var(--spacing16) 0;
        text-align: left;
        text-overflow: ellipsis;
        transition: all .3s ease;
        -webkit-appearance: none;
        width: 100%;
    }

        .form--field[required] ~ .form--label:after {
            content: ' *';
        }

    .form--field:valid[required] ~ .form--label,
    .form--field:focus ~ .form--label,
    .form--field:not(:placeholder-shown) ~ .form--label,
    .form--field:not([placeholder=' ']) ~ .form--label {
        font-size: var(--font-size-S);
        font-weight: 400;
        top: var(--spacing8);
    }

    .form--field.has--icon:not(.without-label),
    .form--field.form-dropdown-select {
        padding: 24px 2rem 0 0.94118rem;
    }

        .form--field.has--icon__2 {
            padding: 24px 3.9rem 0 0.94118rem;
        }

        .form--field.has--icon__3 {
            padding: 24px 5.3rem 0 0.94118rem;
        }

    .form--control input[type="search"]::-webkit-search-decoration,
    .form--control input[type="search"]::-webkit-search-cancel-button,
    .form--control input[type="search"]::-webkit-search-results-button,
    .form--control input[type="search"]::-webkit-search-results-decoration { 
        display: none;
    }

        .form--control input[type="search"] ~ .form--icon {
            visibility: visible;
        }

        .form--control input[type="search"]:placeholder-shown ~ .form--icon {
            visibility: hidden;
        }

    .form--icon {
        cursor: pointer;
        font-size: 20px;
        font-weight: 400;
        line-height: 1;
        position: absolute;
        right: var(--spacing16);
        top: var(--spacing16);
        width: max-content;
    }

        .form--icon:before {
            color: var(--form--field--icon__default);
            transition: color 0.125s ease-in;
        }

        .form--icon:hover:before {
            color: var(--interactive__hover);
        }

        .form-dropdown-select ~ .form--icon {
            pointer-events: none;
        }

    .form--field.has--icon__left {
        padding: var(--spacing16) var(--spacing16) var(--spacing16) var(--spacing48);
    }

        .has--icon__left ~ .form--icon {
            left: var(--spacing16);
            top: 14px;
        }

        .has--icon__left ~ .form--icon:before {
            color: inherit !important;
        }

    /* LABEL */
    .form--label {
        color: var(--form--field--label--color__default);
        position: absolute;
        top: var(--spacing16);
        left: var(--spacing16);
        max-width: calc(100% - 32px);
        font-size: var(--font-size-M);
        font-weight: 400;
        letter-spacing: 0;
        line-height: var(--font-size-M);
        /* overflow: hidden; */
        pointer-events: none;
        transition: all .125s ease-in;
        white-space: nowrap;
    }

    /* DISABLED */
    .form--field:disabled ~ .form--label,
    .form--field:disabled ~ .form--icon {
        opacity: 0.5;
        pointer-events: none;
    }

    /* ERROR / MESSAGE */
    .form--control .form--field:not(.is--valid):not(:disabled):not(:placeholder-shown):not(:valid):not(.form-dropdown-select):not(.form-selection),
    .form--control .form--field.is--invalid {
        background-color: var(--error600);
        border-color: var(--error600);
        color: var(--error900);
        font-weight: 700;
    }

    .form--field:not(.is--valid):not(:disabled):not(:placeholder-shown):not(:valid):not(.form-dropdown-select):not(.form--option) ~ .form--label,
    .form-dropdown-select.is--invalid ~ .form--label {
        color: var(--error800);
    }

    .form-dropdown-select.is--invalid ~ .form--icon:before {
        color: var(--error900);
    }
    
    .form--message.is--error {
        color: var(--form--error-message__default);
    }

    /* FIELD HOVER */
    .form--control:hover .form--field:not(:disabled),
    .form-dropdown-select:not(:disabled):hover {
        border-color: var(--form--field--label--color__focus);
    }

    .form--field:not(:invalid):focus-within ~ .form--label {
        color: var(--form--field--label--color__focus);
    }

    .form--field:-webkit-autofill {
        border-color: rgb(255, 224, 69);
        box-shadow: inset 0 0 0 100px rgb(255, 254, 242);
        caret-color: rgb(29, 29, 31);
        color: rgb(29, 29, 31);
        -webkit-text-fill-color: rgb(29, 29, 31);
    }

    .form--field:not(:placeholder-shown):not(.is--valid):not(:valid):not(:disabled):not(.form-dropdown-select) ~ .form--message,
    .form-textbox-textarea:not(:placeholder-shown) ~ .form--message,
    .form--field.is--invalid ~ .form--message {
        color: var(--form--error-message__default);
        height: auto;
        opacity: 1;
        margin: 0.5rem 0.3rem 0.3rem 0.3rem;
    }
    
    .form--message {
        display: flex;
        height: 0;
        font-size: var(--font-size-S);
        line-height: 1.33337;
        font-weight: 400;
        color: inherit;
        position: relative;
        margin: 0 var(--spacing8) 0 var(--spacing8);
        align-items: baseline;
        gap: 5px;
        opacity: 0;
        transition: color .1s ease, opacity .3s ease, margin .1s ease-in-out;
    }

        .form--message i {
            line-height: var(--font-size-M);
        }

    input[type="number"] {
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        appearance: textfield;
    }

    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none;
    }

.form--control-select-edit {
	border: 1px solid var(--form--field--border__default);
	border-radius: var(--spacing8);
	display: flex;
	gap: var(--spacing16);
	margin: 0 0 var(--spacing16) 0;
	padding: var(--spacing8) var(--spacing16) var(--spacing8) var(--spacing16);
}

	.form--control-select-edit .form-selection {
		border: none;
		flex: 0 0;
		margin: 0;
		padding: 0;
		width: min-content;
	}

	.form--control-select-edit .form--control {
		margin: 0;
		outline: none;
		padding: 0;
	}

input[type=file]::-webkit-file-upload-button {
    visibility: hidden;
}
input[type=file]::file-selector-button {
    visibility: hidden;
}
input[type=file]::-webkit-file-upload-button {
    visibility: hidden;
    width: 0;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    vertical-align: middle;
    height: 100%;
    border: none;
    line-height: 38px;
}
input[type=file]::file-selector-button {
    visibility: hidden;
    vertical-align: middle;
    width: 0;
    padding: 0;
    margin: 0;
    line-height: 26px;
    appearance: none;
    -moz-appearance: none;
    border: none;
    height: 100%;
}
.form--control input.form--field[type=file].has--nofiles {
    color: transparent !important;
}

.form--control textarea {
	font-family: inherit;
	grid-area: 1 / 1 / 2 / 2;
	height: auto;
	min-height: 4rem;
	padding-top: 1.6rem;
}

	.auto-grow > textarea,
	.auto-grow:after {
		font: 0.9rem/1.4 var(--font__default);
		grid-area: 1 / 1 / 2 / 2;
		height: auto;
		min-height: 4rem;
		word-break: break-all;
		line-height: 1.23536;
        margin-bottom: 0;
        padding: var(--spacing24) var(--spacing16) 0;
        text-align: left;
		padding-top: 1.6rem;
	}

	.auto-grow {
		display: grid;
	}

		.auto-grow:after {
			content: "\n\n" attr(data-replicated-value) " ";
			visibility: hidden;
			white-space: pre-wrap;
		}

	.auto-grow > textarea {
		/* Firefox scrollbar */
		overflow: hidden;
		resize: none;
	}


.indicator {
    align-items: center;
    display: flex;
    gap: .4rem;
}

.indicator--dot {
    border-radius: 50%;
    flex-shrink: 0;
    height: .8rem;
    width: .8rem;
}

.indicator--dot.is--success { background-color: var(--success700); }
.indicator--dot.is--warning { background-color: var(--warning700); }
.indicator--dot.is--error   { background-color: var(--error700); }
.indicator--dot.is--info    { background-color: var(--information700); }
.indicator--dot.is--neutral { background-color: var(--neutral700); }

.indicator--trend {
    align-items: center;
    display: flex;
    font-size: var(--font-size-XS);
    font-weight: 600;
    gap: var(--spacing4);
}

.indicator--trend i {
    font-size: var(--font-size-XS);
}

.indicator--trend.is--up   { color: var(--success800); }
.indicator--trend.is--down { color: var(--error700); }
.indicator--trend.is--flat { color: var(--neutral700); }

.is--running {
    cursor: default !important;
}
.is--running:hover {
    background: transparent;
}
.is--running:focus {
    outline: 0;
}
.triple-dot--loading {
    display: inline-flex;
    align-items: center;
}
.triple-dot--loading .dot {
    width: 8px;
    height: 8px;
    margin: 0 2px; /* space between dots */
    border-radius: 50%;
    background-color: var(--primary600);
    animation: bounce 0.6s infinite alternate;
}
.triple-dot--loading .dot:nth-child(1) {
    animation-delay: 0s;
}
.triple-dot--loading .dot:nth-child(2) {
    animation-delay: 0.2s;
}
.triple-dot--loading .dot:nth-child(3) {
    animation-delay: 0.4s;
}

.menu-cards--container {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.menu--card {
    background-color: var(--meeting--background__default);
    box-shadow: var(--meeting--box-shadow__default);
    display: flex;
    width: clamp(200px, 20%,  20%);
    flex-direction: column;
    align-items: center;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all .3s ease;
}

.menu--card:hover {
    box-shadow: 0 4px 43px 0 var(--meeting--box-shadow__hover);
    transform: scale(1.025);
}

.menu--card--icon {
    font-size: 1.2rem;
}
.menu--card--title {
    font-size: 0.8rem;
}
.menu-badge {
    color: black;
    position: absolute;
    border: none;
    border-radius: var(--spacing16);
    top: -4px;
    right: -4px;
    text-shadow: none;
    padding: 2px 8px;
    font-size: 0.75rem;
    background-color: var(--notification-blurb--background__default);
}

/* DEPRECATED — use #topbar (.topbar--logo, .topbar--title) instead. Remove once all apps are updated. */
#mobile--header {
    align-items: center;
    background-color: var(--mobile-header--background__default);
    box-shadow: 4px 8px 32px 0 var(--shadow1);
    display: flex;
    padding: 0 var(--spacing24) 0 var(--spacing12);
    position: fixed;
    width: 100%;
    z-index: 8;
}

    /* DEPRECATED — sidebar toggle is now #sidebar-toggle (first child of #sidebar). Remove once all apps are updated. */
    #mobile-sidebar-toggle {
        align-items: center;
        border-radius: 2rem;
        display: flex;
        height: 2rem;
        justify-content: center;
        position: relative;
        width: 2rem;
    }

    #sidebar.open + #mobile--header #mobile-sidebar-toggle
    {
        transform: rotate(180deg);
    }

        #mobile-sidebar-toggle i {
            font-size: var(--font-size-L);
            font-weight: 700;
        }

    /* DEPRECATED — use .topbar--logo instead. Remove once all apps are updated. */
    .mobile-logo {
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        font-weight: 700;
        gap: var(--spacing8);
        height: auto;
        justify-content: flex-start;
        margin: var(--spacing16) var(--spacing16) var(--spacing16) var(--spacing32);
        width: fit-content;
    }

        .mobile-logo img {
            display: block;
            height: 32px;
            transition: all .3s ease;
            width: fit-content;
        }

        .mobile-logo span {
            color: var(--branding__default);
            display: block;
            font-size: var(--font-size-M);
            font-weight: 500;
            letter-spacing: 1.5px;
            line-height: 21px;
            margin: 0 0 0 0;
            opacity: 1;
            overflow: hidden;
            padding: 0 0 0 0;
            text-overflow: ellipsis;
            transition: all .3s ease;
            white-space: nowrap;
        }

.modal--overlay {
	align-items: center;
	background-color: var(--modal--background__default);
	border: 2px solid var(--modal--border__default);
	box-shadow: 0px 4px 14px 4px var(--modal--box-shadow__default);
	display: none;
	flex-direction: column;
	/*justify-content: center;*/
	position: fixed;
	top: 0;
	bottom: 0;
	/* height: 100vh; */
	padding: 1rem;
	width: 100%;
	backdrop-filter: blur(15px);
	transition: all .3s ease;
	overflow-y: auto;
	z-index: 10;
}

.modal--overlay.is--open {
	display: flex;
}

.modal {
	animation: scale .3s ease-in-out;
	background-color: var(--dialog--background__default);
	border: 2px solid var(--secondary600);
	border-radius: 1rem;
	box-shadow: 4px 8px 32px 0 var(--shadow1);
	margin: 0 auto;
	max-width: 448px;
	padding: 0 0 0 0;
	width: 100%;
	z-index: 11;
	/* margin-top: 64px; */
}

.modal.container--width {
	border:none;
}

.modal--show,
.modal--hide {
	cursor: pointer;
}

body:has(.modal--overlay.is--open) {
	overflow: hidden;
}

.item--note {
	align-items: center;
	border-bottom: 0;
	border-radius: var(--spacing8);
	box-shadow: 2px 4px 8px 0 var(--shadow1);
	display: flex;
	font-size: var(--font-size-S);
	font-weight: 500;
	gap: var(--spacing8);
	height: auto;
	line-height: 1.2;
	margin: var(--spacing4) 0 var(--spacing4) 0;
	min-height: 44px;
	padding: var(--spacing4) var(--spacing16) var(--spacing4) var(--spacing16);
	position: sticky;
	top: 0;
	transition: all .3s ease;
	width: fit-content;
}

	.item--note.error {
		background-color: var(--error--background__default);
		border-bottom: 3px solid var(--error800);
		color: var(--error800);
	}

	.item--note.information {
		background-color: var(--information--background__default);
		border-bottom: 3px solid var(--information__default);
	}

	.item--note.success {
		background-color: var(--success--background__default);
		border-bottom: 3px solid var(--success__default);
	}

	.item--note.warning {
		background-color: var(--warning--background__default);
		border-bottom: 3px solid var(--warning__default);
	}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 10;
    display: none;
}

.overlay--spinner {
    border: 8px solid var(--primary100);
    border-top: 8px solid var(--primary500);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

.page--header {
	align-items: center;
	background-color: var(--header--background__default);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	padding: 1rem;
	width: 100%;
}

	.item--main-title,
	.item--main-title h1 {
		margin: 0;
	}

.page--header--left {
	align-items: flex-start;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--spacing4);
	min-width: 0;
}

.page--header--center {
	align-items: center;
	display: flex;
	flex: 1;
	justify-content: center;
}

.page--header--right {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: var(--spacing8);
}

.palette-swatch {
    background-color: var(--swatch-color);
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    outline: none;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    width: 20px;
}

    .palette-swatch:hover {
        box-shadow: 0 0 0 2px var(--swatch-color);
        transform: scale(1.15);
    }

    .palette-swatch.is--active {
        box-shadow: 0 0 0 2px var(--background__default), 0 0 0 4px var(--swatch-color);
    }


/*!
 * Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
 *
 * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
 */

 .item--picker {
  align-items: center;
  background-color: transparent;
  border: 1px solid var(--form--field--border__default);
  border-radius: var(--spacing8);
  cursor: pointer;
  display: flex;
  font-weight: 400;
  font-size: var(--font-size-M);
  height: 44px;
  justify-content: center;
  padding: var(--spacing12);
  position: relative;
  transition: background-color .3s ease, color .3s ease;
}

  .item--picker:hover {
    background-color: var(--datepicker--trigger--background__hover);
    color: var(--datepicker--trigger--color__hover);
  }

.dow {
  color: var(--datepicker--color__default);
}

.day {
  color: var(--datepicker--color__default);
}

  .day:hover {
    color: var(--interactive__hover);
  }

.datepicker {
  border-radius: var(--spacing4);
  box-shadow: 4px 8px 32px 0 var(--shadow1);
  direction: ltr;
  font-family: var(--font__default);
  height: fit-content;
  padding: var(--spacing32);
}

.datepicker-inline {
  width: 220px;
}

.datepicker-rtl {
  direction: rtl;
}

.datepicker-rtl.dropdown-menu {
  left: auto;
}

.datepicker-rtl table tr td span {
  float: right;
}

.datepicker-dropdown {
  background-color: var(--datepicker--background__default);
  border: 1px solid var(--datepicker--border__default);
  top: 0;
  left: 0;
  min-width: 250px;
  max-width: 320px;
  padding: var(--spacing4);
  position: absolute;
}

.datepicker-dropdown:before {
  display: none;
}

.datepicker-dropdown.datepicker-orient-left:before {
  left: 6px;
}

.datepicker-dropdown.datepicker-orient-left:after {
  left: 7px;
}

.datepicker-dropdown.datepicker-orient-right:before {
  right: 6px;
}

.datepicker-dropdown.datepicker-orient-right:after {
  right: 7px;
}

.datepicker-dropdown.datepicker-orient-bottom:before {
  top: -7px;
}

.datepicker-dropdown.datepicker-orient-bottom:after {
  top: -6px;
}

.datepicker-dropdown.datepicker-orient-top:before {
  bottom: -7px;
  border-bottom: 0;
  border-top: 7px solid rgba(0, 0, 0, 0.15);
}

.datepicker-dropdown.datepicker-orient-top:after {
  bottom: -6px;
  border-bottom: 0;
  border-top: 6px solid #fff;
}

.datepicker table {
  border-collapse: collapse;
  margin: 0;
  table-layout: fixed;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.datepicker table tr td,
.datepicker table tr th {
  text-align: center;
  width: 30px;
  height: 30px;
  border: none;
  padding: 0.5rem;
  transition: all .3s ease;
}

.datepicker table tr td {
  border-radius: 4px;
}

.datepicker table tr th {
  border-radius: 0 !important;
}

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
  background-color: transparent;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
  color: var(--datepicker--color__alternative);
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
  background: var(--interactive__hover);
  cursor: pointer;
  color: var(--interactive--text__hover);
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: none;
  color: var(--interactive__default);
  cursor: default;
  opacity: 0.5;
}

.datepicker table tr td.highlighted {
  color: #000;
  background-color: var(--item--block--highlighted);
  border-color: transparent;
  border-radius: 0;
}

.datepicker table tr td.highlighted:focus,
.datepicker table tr td.highlighted.focus {
  color: inherit;
  background-color: yellow;
  border-color: transparent;
}

.datepicker table tr td.highlighted:hover {
  color: #000;
  background-color: var(--interactive__hover);
  border-color: #52addb;
}

.datepicker table tr td.highlighted:active,
.datepicker table tr td.highlighted.active {
  color: #000;
  background-color: #afd9ee;
  border-color: #52addb;
}

.datepicker table tr td.highlighted:active:hover,
.datepicker table tr td.highlighted.active:hover,
.datepicker table tr td.highlighted:active:focus,
.datepicker table tr td.highlighted.active:focus,
.datepicker table tr td.highlighted:active.focus,
.datepicker table tr td.highlighted.active.focus {
  color: #000;
  background-color: #91cbe8;
  border-color: #298fc2;
}

.datepicker table tr td.highlighted.disabled:hover,
.datepicker table tr td.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.highlighted:hover,
.datepicker table tr td.highlighted.disabled:focus,
.datepicker table tr td.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.highlighted:focus,
.datepicker table tr td.highlighted.disabled.focus,
.datepicker table tr td.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.highlighted.focus {
  background-color: #d9edf7;
  border-color: #85c5e5;
}

.datepicker table tr td.highlighted.focused {
  background: #afd9ee;
}

.datepicker table tr td.highlighted.disabled,
.datepicker table tr td.highlighted.disabled:active {
  background: #d9edf7;
  color: #777777;
}

.datepicker table tr td.today {
  color: #000;
  background-color: #ffdb99;
  border-color: #ffb733;
}

.datepicker table tr td.today:focus,
.datepicker table tr td.today.focus {
  color: #000;
  background-color: #ffc966;
  border-color: #b37400;
}

.datepicker table tr td.today:hover {
  color: #000;
  background-color: #ffc966;
  border-color: #f59e00;
}

.datepicker table tr td.today:active,
.datepicker table tr td.today.active {
  color: #000;
  background-color: #ffc966;
  border-color: #f59e00;
}

.datepicker table tr td.today:active:hover,
.datepicker table tr td.today.active:hover,
.datepicker table tr td.today:active:focus,
.datepicker table tr td.today.active:focus,
.datepicker table tr td.today:active.focus,
.datepicker table tr td.today.active.focus {
  color: #000;
  background-color: #ffbc42;
  border-color: #b37400;
}

.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today[disabled]:hover,
fieldset[disabled] .datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled:focus,
.datepicker table tr td.today[disabled]:focus,
fieldset[disabled] .datepicker table tr td.today:focus,
.datepicker table tr td.today.disabled.focus,
.datepicker table tr td.today[disabled].focus,
fieldset[disabled] .datepicker table tr td.today.focus {
  background-color: #ffdb99;
  border-color: #ffb733;
}

.datepicker table tr td.today.focused {
  background: #ffc966;
}

.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:active {
  background: #ffdb99;
  color: #777777;
}

.datepicker table tr td.range {
  color: #000;
  background-color: #eeeeee;
  border-color: #bbbbbb;
  border-radius: 0;
}

.datepicker table tr td.range:focus,
.datepicker table tr td.range.focus {
  color: #000;
  background-color: #d5d5d5;
  border-color: #7c7c7c;
}

.datepicker table tr td.range:hover {
  color: #000;
  background-color: #d5d5d5;
  border-color: #9d9d9d;
}

.datepicker table tr td.range:active,
.datepicker table tr td.range.active {
  color: #000;
  background-color: #d5d5d5;
  border-color: #9d9d9d;
}

.datepicker table tr td.range:active:hover,
.datepicker table tr td.range.active:hover,
.datepicker table tr td.range:active:focus,
.datepicker table tr td.range.active:focus,
.datepicker table tr td.range:active.focus,
.datepicker table tr td.range.active.focus {
  color: #000;
  background-color: #c3c3c3;
  border-color: #7c7c7c;
}

.datepicker table tr td.range.disabled:hover,
.datepicker table tr td.range[disabled]:hover,
fieldset[disabled] .datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled:focus,
.datepicker table tr td.range[disabled]:focus,
fieldset[disabled] .datepicker table tr td.range:focus,
.datepicker table tr td.range.disabled.focus,
.datepicker table tr td.range[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.focus {
  background-color: #eeeeee;
  border-color: #bbbbbb;
}

.datepicker table tr td.range.focused {
  background: #d5d5d5;
}

.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:active {
  background: #eeeeee;
  color: #777777;
}

.datepicker table tr td.range.highlighted {
  color: #000;
  background-color: #e4eef3;
  border-color: #9dc1d3;
}

.datepicker table tr td.range.highlighted:focus,
.datepicker table tr td.range.highlighted.focus {
  color: #000;
  background-color: #c1d7e3;
  border-color: #4b88a6;
}

.datepicker table tr td.range.highlighted:hover {
  color: #000;
  background-color: #c1d7e3;
  border-color: #73a6c0;
}

.datepicker table tr td.range.highlighted:active,
.datepicker table tr td.range.highlighted.active {
  color: #000;
  background-color: #c1d7e3;
  border-color: #73a6c0;
}

.datepicker table tr td.range.highlighted:active:hover,
.datepicker table tr td.range.highlighted.active:hover,
.datepicker table tr td.range.highlighted:active:focus,
.datepicker table tr td.range.highlighted.active:focus,
.datepicker table tr td.range.highlighted:active.focus,
.datepicker table tr td.range.highlighted.active.focus {
  color: #000;
  background-color: #a8c8d8;
  border-color: #4b88a6;
}

.datepicker table tr td.range.highlighted.disabled:hover,
.datepicker table tr td.range.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.range.highlighted:hover,
.datepicker table tr td.range.highlighted.disabled:focus,
.datepicker table tr td.range.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.range.highlighted:focus,
.datepicker table tr td.range.highlighted.disabled.focus,
.datepicker table tr td.range.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.highlighted.focus {
  background-color: #e4eef3;
  border-color: #9dc1d3;
}

.datepicker table tr td.range.highlighted.focused {
  background: #c1d7e3;
}

.datepicker table tr td.range.highlighted.disabled,
.datepicker table tr td.range.highlighted.disabled:active {
  background: #e4eef3;
  color: #777777;
}

.datepicker table tr td.range.today {
  color: #000;
  background-color: #f7ca77;
  border-color: #f1a417;
}

.datepicker table tr td.range.today:focus,
.datepicker table tr td.range.today.focus {
  color: #000;
  background-color: #f4b747;
  border-color: #815608;
}

.datepicker table tr td.range.today:hover {
  color: #000;
  background-color: #f4b747;
  border-color: #bf800c;
}

.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today.active {
  color: #000;
  background-color: #f4b747;
  border-color: #bf800c;
}

.datepicker table tr td.range.today:active:hover,
.datepicker table tr td.range.today.active:hover,
.datepicker table tr td.range.today:active:focus,
.datepicker table tr td.range.today.active:focus,
.datepicker table tr td.range.today:active.focus,
.datepicker table tr td.range.today.active.focus {
  color: #000;
  background-color: #f2aa25;
  border-color: #815608;
}

.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today[disabled]:hover,
fieldset[disabled] .datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled:focus,
.datepicker table tr td.range.today[disabled]:focus,
fieldset[disabled] .datepicker table tr td.range.today:focus,
.datepicker table tr td.range.today.disabled.focus,
.datepicker table tr td.range.today[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.today.focus {
  background-color: #f7ca77;
  border-color: #f1a417;
}

.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:active {
  background: #f7ca77;
  color: #777777;
}

.datepicker table tr td.selected,
.datepicker table tr td.selected.highlighted {
  color: #fff;
  background-color: #777777;
  border-color: #555555;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker table tr td.selected:focus,
.datepicker table tr td.selected.highlighted:focus,
.datepicker table tr td.selected.focus,
.datepicker table tr td.selected.highlighted.focus {
  color: #fff;
  background-color: #5e5e5e;
  border-color: #161616;
}

.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.highlighted:hover {
  color: #fff;
  background-color: #5e5e5e;
  border-color: #373737;
}

.datepicker table tr td.selected:active,
.datepicker table tr td.selected.highlighted:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected.highlighted.active {
  color: #fff;
  background-color: #5e5e5e;
  border-color: #373737;
}
.datepicker table tr td.selected:active:hover,
.datepicker table tr td.selected.highlighted:active:hover,
.datepicker table tr td.selected.active:hover,
.datepicker table tr td.selected.highlighted.active:hover,
.datepicker table tr td.selected:active:focus,
.datepicker table tr td.selected.highlighted:active:focus,
.datepicker table tr td.selected.active:focus,
.datepicker table tr td.selected.highlighted.active:focus,
.datepicker table tr td.selected:active.focus,
.datepicker table tr td.selected.highlighted:active.focus,
.datepicker table tr td.selected.active.focus,
.datepicker table tr td.selected.highlighted.active.focus {
  color: #fff;
  background-color: #4c4c4c;
  border-color: #161616;
}
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.highlighted.disabled:hover,
.datepicker table tr td.selected[disabled]:hover,
.datepicker table tr td.selected.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.selected:hover,
fieldset[disabled] .datepicker table tr td.selected.highlighted:hover,
.datepicker table tr td.selected.disabled:focus,
.datepicker table tr td.selected.highlighted.disabled:focus,
.datepicker table tr td.selected[disabled]:focus,
.datepicker table tr td.selected.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.selected:focus,
fieldset[disabled] .datepicker table tr td.selected.highlighted:focus,
.datepicker table tr td.selected.disabled.focus,
.datepicker table tr td.selected.highlighted.disabled.focus,
.datepicker table tr td.selected[disabled].focus,
.datepicker table tr td.selected.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.selected.focus,
fieldset[disabled] .datepicker table tr td.selected.highlighted.focus {
  background-color: #777777;
  border-color: #555555;
}
.datepicker table tr td.active,
.datepicker table tr td.active.highlighted {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.active:focus,
.datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active.focus,
.datepicker table tr td.active.highlighted.focus {
  color: #fff;
  background-color: #286090;
  border-color: #122b40;
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active.highlighted:hover {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active {
  color: var(--datepicker--color__active);
  background-color: var(--secondary500);
  border-color: var(--secondary500);
}
.datepicker table tr td.active:active:hover,
.datepicker table tr td.active.highlighted:active:hover,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted.active:hover,
.datepicker table tr td.active:active:focus,
.datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.active:focus,
.datepicker table tr td.active.highlighted.active:focus,
.datepicker table tr td.active:active.focus,
.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.highlighted.active.focus {
  color: var(--primary1000);
  background-color: var(--secondary600);
  border-color: var(--secondary600);
}
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.highlighted.disabled:hover,
.datepicker table tr td.active[disabled]:hover,
.datepicker table tr td.active.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.active:hover,
fieldset[disabled] .datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active.disabled:focus,
.datepicker table tr td.active.highlighted.disabled:focus,
.datepicker table tr td.active[disabled]:focus,
.datepicker table tr td.active.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.active:focus,
fieldset[disabled] .datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active.disabled.focus,
.datepicker table tr td.active.highlighted.disabled.focus,
.datepicker table tr td.active[disabled].focus,
.datepicker table tr td.active.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.active.focus,
fieldset[disabled] .datepicker table tr td.active.highlighted.focus {
  background-color: #337ab7;
  border-color: #2e6da4;
}
.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
  border-radius: 4px;
}
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
  /*
  background: #eeeeee;
  */
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
  background: none;
  /* color: #777777; */
  cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  /*
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  */
}
/* .datepicker table tr td span.active:focus, 
.datepicker table tr td span.active:hover:focus, */
/* .datepicker table tr td span.active.focus, 
.datepicker table tr td span.active:hover.focus, */
.datepicker table tr td span.active.disabled:focus,
.datepicker table tr td span.active.disabled:hover:focus,
.datepicker table tr td span.active.disabled.focus,
.datepicker table tr td span.active.disabled:hover.focus {
  /*
  color: #fff;
  background-color: #286090;
  border-color: #122b40;
  */
  opacity: 0.5;
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover {
  /*
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
  */
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
  /*
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
  */
}
.datepicker table tr td span.active:active:hover,
.datepicker table tr td span.active:hover:active:hover,
.datepicker table tr td span.active.disabled:active:hover,
.datepicker table tr td span.active.disabled:hover:active:hover,
.datepicker table tr td span.active.active:hover,
.datepicker table tr td span.active:hover.active:hover,
.datepicker table tr td span.active.disabled.active:hover,
.datepicker table tr td span.active.disabled:hover.active:hover,
.datepicker table tr td span.active:active:focus,
.datepicker table tr td span.active:hover:active:focus,
.datepicker table tr td span.active.disabled:active:focus,
.datepicker table tr td span.active.disabled:hover:active:focus,
.datepicker table tr td span.active.active:focus,
.datepicker table tr td span.active:hover.active:focus,
.datepicker table tr td span.active.disabled.active:focus,
.datepicker table tr td span.active.disabled:hover.active:focus,
.datepicker table tr td span.active:active.focus,
.datepicker table tr td span.active:hover:active.focus,
.datepicker table tr td span.active.disabled:active.focus,
.datepicker table tr td span.active.disabled:hover:active.focus,
.datepicker table tr td span.active.active.focus,
.datepicker table tr td span.active:hover.active.focus,
.datepicker table tr td span.active.disabled.active.focus,
.datepicker table tr td span.active.disabled:hover.active.focus {
  /*
  color: #fff;
  background-color: #204d74;
  border-color: #122b40;
  */
}
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover.disabled:hover,
.datepicker table tr td span.active.disabled.disabled:hover,
.datepicker table tr td span.active.disabled:hover.disabled:hover,
.datepicker table tr td span.active[disabled]:hover,
.datepicker table tr td span.active:hover[disabled]:hover,
.datepicker table tr td span.active.disabled[disabled]:hover,
.datepicker table tr td span.active.disabled:hover[disabled]:hover,
fieldset[disabled] .datepicker table tr td span.active:hover,
fieldset[disabled] .datepicker table tr td span.active:hover:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:focus,
.datepicker table tr td span.active:hover.disabled:focus,
.datepicker table tr td span.active.disabled.disabled:focus,
.datepicker table tr td span.active.disabled:hover.disabled:focus,
.datepicker table tr td span.active[disabled]:focus,
.datepicker table tr td span.active:hover[disabled]:focus,
.datepicker table tr td span.active.disabled[disabled]:focus,
.datepicker table tr td span.active.disabled:hover[disabled]:focus,
fieldset[disabled] .datepicker table tr td span.active:focus,
fieldset[disabled] .datepicker table tr td span.active:hover:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:focus,
.datepicker table tr td span.active.disabled.focus,
.datepicker table tr td span.active:hover.disabled.focus,
.datepicker table tr td span.active.disabled.disabled.focus,
.datepicker table tr td span.active.disabled:hover.disabled.focus,
.datepicker table tr td span.active[disabled].focus,
.datepicker table tr td span.active:hover[disabled].focus,
.datepicker table tr td span.active.disabled[disabled].focus,
.datepicker table tr td span.active.disabled:hover[disabled].focus,
fieldset[disabled] .datepicker table tr td span.active.focus,
fieldset[disabled] .datepicker table tr td span.active:hover.focus,
fieldset[disabled] .datepicker table tr td span.active.disabled.focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus {

  background-color: #337ab7;
  border-color: #2e6da4;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
  color: var(--datepicker--color__alternative);
}
.datepicker .datepicker-switch {
  width: 145px;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
  color: var(--interactive__default);
  cursor: pointer;
  transition: color .3s ease;
}

/*
.datepicker .prev:hover,
.datepicker .next:hover,
*/
.datepicker .datepicker-switch:hover,
.datepicker tfoot tr th:hover {
  /* background-color: transparent; */
  color: var(--interactive__hover);
}
.datepicker .prev.disabled,
.datepicker .next.disabled {
  visibility: hidden;
}
.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle;
}
.input-group.date .input-group-addon {
  cursor: pointer;
}
.input-daterange {
  width: 100%;
}
.input-daterange input {
  text-align: center;
}
.input-daterange input:first-child {
  border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
  border-radius: 0 3px 3px 0;
}
.input-daterange .input-group-addon {
  width: auto;
  min-width: 16px;
  padding: 4px 5px;
  line-height: 1.42857143;
  border-width: 1px 0;
  margin-left: -5px;
  margin-right: -5px;
}

.datepicker .century,
.datepicker .decade,
.datepicker .year,
.datepicker .month {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--datepicker--color__default);
  font-size: var(--font-size-XS);
  transition: background-color .3s ease, border .3s ease, color .3s ease;
}

.datepicker .century:hover,
.datepicker .decade:hover,
.datepicker .year:hover,
.datepicker .month:hover {
  background-color: var(--datepicker--background__hover);
  border: 1px solid var(--datepicker--border__hover);
  color: var(--datepicker--color__alternative);
}

.datepicker .century:focus,
.datepicker .decade:focus,
.datepicker .year:focus,
.datepicker .month:focus {
  background-color: var(--datepicker--background__hover);
  border: 1px solid var(--datepicker--border__hover);
  color: var(--datepicker--color__alternative);
}

.datepicker .century.active,
.datepicker .decade.active,
.datepicker .year.active,
.datepicker .month.active {
  background-color: var(--datepicker--background__active);
  border: 1px solid var(--primary500);
  color: var(--primary100);
}

.datepicker .century.active:hover,
.datepicker .decade.active:hover,
.datepicker .year.active:hover,
.datepicker .month.active:hover {
  background-color: var(--datepicker--trigger--color__hover);
  border: 1px solid transparent;
  color: var(--datepicker--color__active);
}

.datepicker table tr {
    background-color: transparent;
    border-bottom: 0;
}

  .datepicker thead .datepicker-title {
    display: none;
  }

.datepicker .next,
.datepicker .prev {
  font-size: var(--font-size-L);
}

.datepicker table tr:hover td.day:not(.active) {
  color: var(--interactive__default);
}

  .datepicker table tr:hover td.day:hover {
    background-color: var(--datepicker--background__hover);
    color: var(--datepicker--background--color__hover);
  }

.datepicker table th {
  background-color: var(--datepicker-header--background__default);
}


.item--picker-month {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--spacing4);
  margin-left: auto;
  margin-right: 0;
}

    .intervalInput {
      display: inline-block;
      margin-bottom: 1rem;
      width: 100%;
    }

    .monthpicker_selector *::selection {
      background: transparent;
    }

    .monthpicker_selector {
      background-color: var(--primary750);
      border: 1px solid var(--primary700);
      border-radius: var(--spacing4);
      box-shadow: 4px 8px 32px 0 var(--shadow1);
      min-width: 250px;
      padding: var(--spacing4);
      position: absolute;
      right: 0;
      top: 100%;
      z-index: 100;
    }

    .monthpicker_selector > table {
      border-collapse: collapse;
      border-radius: 0.1rem;
      border-spacing: 0;
      font-size: 0.9rem;
      text-align: center;
      width: 100%;
    }

    .monthpicker_selector table tr {
      background-color: var(--primary700);
      border-bottom: 0;
    }

    .monthpicker_selector > table tr:first-child {
      background-color: var(--month-picker--header--background);
    }

    .monthpicker_selector > table tr:first-child td,
    .monthpicker_selector > table tr td {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

    .monthpicker_selector > table tr:first-child > td:nth-child(1) {
      text-align: left;
    }

    .monthpicker_selector > table tr:first-child > td:nth-child(2) {
      position: relative;
    }

    .monthpicker_selector > table tr:first-child > td:nth-child(3) {
      text-align: right;
    }

    .monthpicker_selector > table tr:nth-child(2) td {
      width: 33%;
    }

    .yearSwitch {
      color: var(--secondary500);
    }

      .yearSwitch:hover {
        color: var(--secondary500);
      }

    .yearSwitch.off {
      visibility: hidden;
    }

    .yearValue {
      background-color: transparent;
      border: none;
      color: var(--secondary500);
      height: 100%;
      font-family: var(--font__default);
      font-size: var(--font-size-XS);
      font-weight: 600;
      text-align: center;
      width: 100%;
    }

    /* months */
    .monthpicker_selector .month {
      background-color: var(--month-picker--year--background);
      border-radius: 0.1rem;
      color: var(--month-picker--month--text__default);
      cursor: pointer;
      font-size: 0.9rem;
      text-align: center;
      transition: background-color .3s ease, border .3s ease, color .3s ease;
    }

    .monthpicker_selector .month:hover {
      background-color: var(--month-picker--month--background__hover);
      color: var(--month-picker--month--text__hover);
    }

    .monthpicker_selector .month:active,
    .monthpicker_selector .month:focus {
      background-color: var(--month-picker--month--background__focus);
      color: var(--month-picker--month--text__hover);
    }

    .month.selected {
      background-color: var(--month-picker--month--selected--background__default);
      color: var(--month-picker--month--selected--text__default);
      font-weight: bold;
      font-size: 0.9rem;
    }


    .monthpicker_selector .month.off {
      color: #fff;
      background: red;
      opacity: 0.65;
      cursor: not-allowed;
    }
    .monthpicker_selector .month.off:hover {
      background: red;
      opacity: 0.65;
    }

    .z-depth-0 {
      box-shadow: none !important;
    }
    .z-depth-1 {
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    }
    .z-depth-2 {
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px -1px rgba(0, 0, 0, 0.3);
    }
    .z-depth-3 {
      box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14),
        0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
    }
    .z-depth-4 {
      box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
        0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
    }
    .z-depth-5,
    .modal {
      box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
        0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
    }

.item--picker-week {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--spacing4);
}

	.date--weekpicker {
		align-items: center;
		background-color: transparent;
		border: 1px solid var(--form--field--border__default);
		border-radius: var(--spacing8);
		cursor: pointer;
		display: flex;
		font-weight: 400;
		font-size: var(--font-size-M);
		height: 44px;
		justify-content: center;
		padding: var(--spacing12);
		position: relative;
		transition: background-color .3s ease, color .3s ease;
	}

		.date--weekpicker:hover {
			background-color: var(--datepicker--trigger--background__hover);
			color: var(--datepicker--trigger--color__hover);
		}

	.date--weekpicker .datepicker .datepicker-days tr td.active ~ td,
	.date--weekpicker .datepicker .datepicker-days tr td.active {
		/* background-color: var(--accent__default); */
		border-radius: 0 !important;
		/* color: var(--interactive--text__default); */
	}

	.date--weekpicker .datepicker .datepicker-days tr td:hover {
			/*
		background-color: var(--interactive__default);
		color: var(--interactive--text__default);
		*/
	}
	
	.date--weekpicker .datepicker .datepicker-days tr td.active,
	.date--weekpicker .datepicker .datepicker-days tr td.focused {
		/*
		background-color: var(--accent__default);
		/*border-radius: 4px !important;*
		color: var(--interactive--text__default);
		*/
	}
	
	.date--weekpicker .datepicker .datepicker-days tr:hover td:not(.active, .focused) {
		/*
		background-color: var(--highlighted-block--background);
		*/
		border-radius: 0 !important;
	}
	
	.date--weekpicker .datepicker .datepicker-days tr:hover td:hover {
		/*
		background-color: var(--interactive__default);
		border-radius: var(--spacing4) !important;
		color: var(--interactive--text__default);
		*/
	}

.profile-menu {
    position: relative;
}

.profile-menu__trigger {
    align-items: center;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--spacing4);
    cursor: pointer;
    display: flex;
    gap: var(--spacing8);
    padding: var(--spacing4) var(--spacing8);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .profile-menu__trigger:hover {
        background-color: var(--item--action--background__hover);
        border-color: var(--primary300);
    }

    .profile-menu__trigger .avatar {
        border-radius: 25rem;
        flex-shrink: 0;
        font-size: var(--font-size-XS);
        font-weight: 600;
        height: 32px;
        width: 32px;
    }

    .profile-menu__info {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

        .profile-menu__name {
            color: var(--text__default);
            font-size: var(--font-size-S);
            font-weight: 600;
            line-height: 1.2;
            white-space: nowrap;
        }

        .profile-menu__role {
            color: var(--primary500);
            font-size: var(--font-size-XS);
            line-height: 1.2;
            white-space: nowrap;
        }

    .profile-menu__trigger i {
        color: var(--primary500);
        font-size: var(--font-size-S);
        transition: transform 0.2s ease;
    }

.profile-menu.is--open .profile-menu__trigger i {
    transform: rotate(180deg);
}

.profile-menu__dropdown {
    background-color: var(--background__default);
    border: 1px solid var(--primary300);
    border-radius: var(--spacing8);
    box-shadow: 4px 8px 32px 0 var(--shadow1);
    display: none;
    min-width: 180px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: calc(100% + var(--spacing8));
    z-index: 20;
}

.profile-menu.is--open .profile-menu__dropdown {
    display: block;
}

    .profile-menu__dropdown a,
    .profile-menu__dropdown button {
        align-items: center;
        background: none;
        border: none;
        color: var(--text__default);
        cursor: pointer;
        display: flex;
        font-size: var(--font-size-S);
        gap: var(--spacing8);
        padding: var(--spacing8) var(--spacing16);
        text-decoration: none;
        transition: background-color 0.2s ease;
        width: 100%;
    }

        .profile-menu__dropdown a:hover,
        .profile-menu__dropdown button:hover {
            background-color: var(--item--action--background__hover);
            color: var(--text__default);
        }

.profile-menu__divider {
    border: none;
    border-top: 1px solid var(--primary300);
    margin: var(--spacing4) 0;
}

.profile-menu__theme {
    border-top: 1px solid var(--primary300);
    display: flex;
    width: 100%;
}

    .profile-menu__theme .filter-button {
        background-color: var(--background__default);
        border: 1px solid transparent;
        border-radius: 0;
        flex: 1 1 auto;
        font-size: var(--font-size-XS);
        justify-content: center;
        padding: var(--spacing8) var(--spacing12);
    }

        .profile-menu__theme .filter-button:hover {
            background-color: var(--item--action--background__hover);
            border-color: transparent;
            color: var(--text__default);
        }

        .profile-menu__theme .filter-button.is--active {
            background-color: var(--button--filter-selected--background__default);
            border-color: transparent;
            color: var(--button--filter-selected--color__default);
        }

            .profile-menu__theme .filter-button.is--active:hover {
                background-color: var(--button--filter-selected--background__hover);
                color: var(--button--filter-selected--color__hover);
            }


.item--profile {
	align-items: center;
	border-radius: var(--spacing24);
	display: flex;
	gap: var(--spacing12);
	justify-content: flex-start;
	margin-bottom: 0.4rem;
	position: relative;
	width: fit-content;
}

	.item--profile:last-of-type {
		margin-bottom: 0;
	}

	.item--profile .avatar {
		aspect-ratio: 1/1 auto;
		border: 0;
		border-radius: 25rem;
		font-size: var(--font-size-S);
		font-weight: 500;
		flex: 0 0 auto;
		height: 40px;
		margin: 0;
		width: 40px;
	}

	.item--profile .profile--name {
		color: var(--text__default);
		font-weight: 500;
	}

	.profile--title {
		color: var(--primary700);
		font-weight: 400;
		margin-top: var(--spacing4);
	}

	.item--profile .additional--information {
		line-height: 1.2;
		padding-top: 0.25rem;
	}


	table .item--profile {
		width: fit-content;
	}

		table .item--profile .avatar {
			background-color: var(--avatar--background__default);
		}

		table .item--profile .item--label {
			overflow: visible;
		}

			table .item--label .profile--name {
				text-decoration: underline;
				white-space: nowrap;
			}

.progress {
    background-color: var(--primary300);
    border-radius: var(--spacing4);
    height: 8px;
    overflow: hidden;
    width: 100%;
}

    .progress__bar {
        background-color: var(--secondary500);
        border-radius: var(--spacing4);
        height: 100%;
        transition: width 0.3s ease;
    }

    .progress__bar.is--success { background-color: var(--success700); }
    .progress__bar.is--warning { background-color: var(--warning700); }
    .progress__bar.is--error   { background-color: var(--error700); }
    .progress__bar.is--info    { background-color: var(--information700); }
    .progress__bar.is--flat    { background-color: var(--neutral500); }

.progress-labeled {
    display: flex;
    flex-direction: column;
    gap: var(--spacing4);
    width: 100%;
}

    .progress-labeled__header {
        align-items: center;
        color: var(--text__default);
        display: flex;
        font-size: var(--font-size-XS);
        justify-content: space-between;
    }

    .progress-labeled__label {
        font-weight: 600;
    }


.overflow--horizontal {
	overflow-y: auto;
	scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
	width: 100%;
}

	.overflow--horizontal::-webkit-scrollbar {
		width: var(--spacing12);
		height: var(--spacing12);
	}

	.overflow--horizontal::-webkit-scrollbar-thumb {
		background: var(--scrollbar-foreground);
	}

	.overflow--horizontal::-webkit-scrollbar-track {
		background: var(--scrollbar-background);
	}

.scrollable {
	scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}

    .scrollable::-webkit-scrollbar {
        width: var(--spacing12);
        height: var(--spacing12);
    }

    .scrollable::-webkit-scrollbar-thumb {
        background: var(--scrollbar-foreground);
    }

    .scrollable::-webkit-scrollbar-track {
        background: var(--scrollbar-background);
    }

datalist {
    position: absolute;
    background-color: var(--form--field--background__default);
    border-radius: var(--spacing8);
    border: 1px solid var(--form--field--border__default);
	width: 100%;
    overflow: hidden;
    max-height: 10rem;
    overflow-y: auto;
    z-index: 1;
}

datalist option {
    padding: var(--spacing8) var(--spacing16) 0;
    color: var(--form--field--text__default);
    margin-bottom: 0;
    cursor: pointer;
    font-size: var(--font-size-M);
}

datalist option:hover, datalist option.active {
    background-color: var(--form--field--label--color__focus);
}

.select-search-multi {
    background-color: var(--form--field--background__default);
    border: 1px solid var(--form--field--border__default);
    border-radius: var(--spacing8);
    color: var(--form--field--text__default);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    min-height: 48px;
    width: 100%;
    cursor: text;
    transition: all .3s ease;
}

.select-search-multi-item {
    background-color: var(--button--secondary--background__default);
    color: var(--button--primary--color__default);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    user-select: none;
    height: 28px;
}

.select-search-multi-remove {
    margin-left: 6px;
    font-weight: bold;
    color: #adb5bd;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    transition: color 0.2s;
}

.select-search-multi-remove:hover
{
    color: var(--error900);
}

.select-search-multi > input.is--datalist {
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    margin: 0;
    height: 28px;
    flex-grow: 1;
    min-width: 80px;
    width: auto;
    font-size: inherit;
    color: inherit;
}

.select-search-multi > input.is--datalist:focus {
    box-shadow: none;
    border: none;
}


.select-search-multi:focus-within
{
    border-color: var(--form--field--label--color__focus);
}

.select-search-multi:focus-within ~ .form--label,
.select-search-multi.has-values ~ .form--label {
    font-size: var(--font-size-S);
    font-weight: 400;
    top: var(--spacing8);
}

#sidebar {
    background-color: var(--sidebar--background__default);
    border-right: 0px solid transparent;
    border-top: 1px solid var(--primary300);
    box-shadow: 4px 0 16px 0 var(--shadow1);
    clip-path: inset(0 -40px 0 0);
    display: flex;
    flex-direction: column;
    height: calc(100% - 64px);
    left: 0;
    list-style: none;
    overflow: hidden;
    position: fixed;
    top: 64px;
    transition: left .3s ease, width .3s ease;
    width: 66px;
    z-index: 10;
}

#sidebar.open
{
    width: var(--sidebar-width);
}

    .logo {
        align-items: center;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        font-weight: 700;
        gap: var(--spacing8);
        height: 141px;
        justify-content: flex-start;
        margin: 64px auto 85px auto;
        width: fit-content;
    }

        .logo img {
            display: block;
            height: 94px;
            transition: all .3s ease;
            width: auto;
        }

.logo span {
    color: var(--branding__default);
    display: block;
    font-size: var(--font-size-ML);
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 1.5;
    margin-left: 0;
    margin-right: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 0 0 0;
    text-overflow: ellipsis;
    transition: all .3s ease;
    visibility: hidden;
    white-space: nowrap;
    width: 0;
}

#sidebar.open .logo span
{
    opacity: 1;
    visibility: visible;
    width: max-content;
}

.sidebar-navigation {
    display: flex;
    overflow-y: auto;
    overflow-x: hidden;
}

        .sidebar-navigation ul {
            display: flex;
            flex-direction: column;
            list-style: none;
            padding-left: 0;
            position: relative;
            transition: all .3s ease;
            width: 100%;
        }

            .sidebar-navigation ul li {
                display: block;
                padding: 0;
            }

.sidebar--navigation-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--spacing4);
    color: var(--navigation-link__default);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing12);
    margin: 0 var(--spacing8) var(--spacing4);
    outline: none;
    position: relative;
    text-decoration: none;
    transition: color .2s ease, border .2s ease, background-color .2s ease;
    justify-content: flex-start;
    padding: 8px 8px 8px 12px;
}

.sidebar--navigation-link i {
    text-align: center;
    width: 24px;
}

.sidebar--navigation-link:active {
    color: var(--navigation-link__default);
}

                    .sidebar--navigation-link:visited {
                        color: var(--navigation-link__default);
                    }

                    .sidebar--navigation-link:focus {
                        background-color: var(--navigation-link--background__focus);
                        border: 1px solid var(--navigation-link--border__hover);
                        color: var(--navigation-link__default);
                    }

                    .sidebar--navigation-link:hover {
                        border: 1px solid var(--navigation-link--border__hover);
                        color: var(--navigation-link__hover);
                    }

                    .sidebar--navigation-link.is--active {
                        background: var(--navigation-link--background__active);
                        color: var(--navigation-link__default);
                    }

                        .sidebar--navigation-link i {
                            color: inherit;
                            font-size: var(--font-size-L);
                            font-weight: 400;
                            margin-right: auto;
                            margin-right: 0;
                            transition: all .3s ease;
                        }

.sidebar--navigation-link--label {
    color: inherit;
    font-size: var(--font-size-S);
    font-weight: 600;
    letter-spacing: 0.1px;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    transition: width .35s ease .08s, opacity .35s ease .08s, visibility .35s ease .08s;
    white-space: nowrap;
}

#sidebar.open .sidebar--navigation-link--label {
    opacity: 1;
    visibility: visible;
    width: max-content;
}

.sidebar--navigation-link .badge {
    background-color: var(--notification-blurb--background__default);
    border: none;
    border-radius: var(--spacing16);
    color: var(--notification-blurb__default);
    font-size: var(--font-size-XS);
    font-weight: 600;
    line-height: 18px;
    margin-left: auto;
    padding: 2px 8px 2px 8px;
    position: relative;
    text-shadow: none;
}

    #sidebar-toggle {
        align-items: center;
        border-radius: 2rem;
        display: flex;
        flex-shrink: 0;
        height: 2rem;
        justify-content: center;
        margin: var(--spacing8) var(--spacing8) var(--spacing4) var(--spacing16);
        width: 2rem;
    }

        #sidebar-toggle i {
            font-size: var(--font-size-L);
            font-weight: 700;
            transition: transform 0.2s ease;
        }

    #sidebar.open #sidebar-toggle i {
        transform: rotate(180deg);
    }

    #sidebar.open {
        left: 0;
    }

    #theme-switcher {
        margin: auto auto var(--spacing32) auto;
    }

    .sidebar--overlay {
        align-items: center;
        background-color: var(--sidebar-modal--background__default);
        backdrop-filter: blur(3px);
        border: 2px solid var(--modal--border__default);
        bottom: 0;
        box-shadow: 0px 4px 14px 4px var(--modal--box-shadow__default);
        display: none;
        height: 0;
        opacity: 0;
        overflow-y: auto;
        position: fixed;
        top: 0;
        transition: opacity .5s ease, width .1s linear, height .1s linear;
        width: 0;
        z-index: 9;
    }

/***
Spectrum Colorpicker v1.8.1
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/

.sp-container {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    *display: inline;
    *zoom: 1;
    /* https://github.com/bgrins/spectrum/issues/40 */
    z-index: 9999994;
    overflow: hidden;
}
.sp-container.sp-flat {
    position: relative;
}

/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top {
    position:relative;
    width: 100%;
    display:inline-block;
}
.sp-top-inner {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
.sp-color {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:20%;
}
.sp-hue {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:84%;
    height: 100%;
}

.sp-clear-enabled .sp-hue {
    top:33px;
    height: 77.5%;
}

.sp-fill {
    padding-top: 80%;
}
.sp-sat, .sp-val {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.sp-alpha-enabled .sp-top {
    margin-bottom: 18px;
}
.sp-alpha-enabled .sp-alpha {
    display: block;
}
.sp-alpha-handle {
    position:absolute;
    top:-4px;
    bottom: -4px;
    width: 6px;
    left: 50%;
    cursor: pointer;
    border: 1px solid black;
    background: white;
    opacity: .8;
}
.sp-alpha {
    display: none;
    position: absolute;
    bottom: -14px;
    right: 0;
    left: 0;
    height: 8px;
}
.sp-alpha-inner {
    border: solid 1px #333;
}

.sp-clear {
    display: none;
}

.sp-clear.sp-clear-display {
    background-position: center;
}

.sp-clear-enabled .sp-clear {
    display: block;
    position:absolute;
    top:0px;
    right:0;
    bottom:0;
    left:84%;
    height: 28px;
}

/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
    -webkit-user-select:none;
    -moz-user-select: -moz-none;
    -o-user-select:none;
    user-select: none;
}

.sp-container.sp-input-disabled .sp-input-container {
    display: none;
}
.sp-container.sp-buttons-disabled .sp-button-container {
    display: none;
}
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
    display: none;
}
.sp-palette-only .sp-picker-container {
    display: none;
}
.sp-palette-disabled .sp-palette-container {
    display: none;
}

.sp-initial-disabled .sp-initial {
    display: none;
}


/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
.sp-sat {
    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
}
.sp-val {
    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
}

.sp-hue {
    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

/* IE filters do not support multiple color stops.
   Generate 6 divs, line them up, and do two color gradients for each.
   Yes, really.
 */
.sp-1 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}
.sp-2 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}
.sp-3 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}
.sp-4 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}
.sp-5 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}
.sp-6 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}

.sp-hidden {
    /* display: none !important; */
    /* for animation */
    visibility: hidden;
    opacity: 0;
}

/* Clearfix hack */
.sp-cf:before, .sp-cf:after { content: ""; /*! display: table; */ }
.sp-cf:after { clear: both; }
.sp-cf { *zoom: 1; }

/* Mobile devices, make hue slider bigger so it is easier to slide */
@media (max-device-width: 480px) {
    .sp-color { right: 40%; }
    .sp-hue { left: 63%; }
    .sp-fill { padding-top: 60%; }
}
.sp-dragger {
    border-radius: 5px;
    height: 5px;
    width: 5px;
    border: 1px solid #fff;
    background: #000;
    cursor: pointer;
    position:absolute;
    top:0;
    left: 0;
}
.sp-slider {
    position: absolute;
    top:0;
    cursor:pointer;
    height: 3px;
    left: -1px;
    right: -1px;
    border: 1px solid #000;
    background: white;
    opacity: .8;
}

/*
Theme authors:
Here are the basic themeable display options (colors, fonts, global widths).
See http://bgrins.github.io/spectrum/themes/ for instructions.
*/

.sp-container {
    border-radius: var(--spacing8);
    background: var(--background__default);
    border: 1px solid var(--form--field--border__default);
    padding: 0;
}

.sp-container, .sp-container *, .sp-preview-inner {
    -webkit-transition: background 0.3s ease, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -moz-transition: background 0.3s ease, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -ms-transition: background 0.3s ease, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -o-transition: background 0.3s ease, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    transition: background 0.3s ease, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.sp-container:hover { background: var(--form--field--background__default); }


.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
    /* font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.sp-top {
    margin-bottom: 3px;
}
.sp-color, .sp-hue, .sp-clear {
    border: 0 none;
}

/* Input */
.sp-input-container {
    float:right;
    width: 100px;
    margin-bottom: 4px;
}
.sp-initial-disabled  .sp-input-container {
    width: 100%;
}
.sp-input {
    font-size: 12px !important;
    border: 1px inset;
    padding: 4px 5px;
    margin: 0;
    width: 100%;
    background:transparent;
    border-radius: 3px;
    color: #222;
}
.sp-input:focus  {
    border: 1px solid orange;
}
.sp-input.sp-validation-error {
    border: 1px solid red;
    background: #fdd;
}
.sp-picker-container , .sp-palette-container {
    float:left;
    position: relative;
    padding: 10px;
    padding-bottom: 300px;
    margin-bottom: -290px;
}
.sp-picker-container {
    width: 172px;
    /* border-left: solid 1px #fff; */
}

/* Palettes */
.sp-palette-container {
    /* border-right: solid 1px #ccc; */
}

.sp-palette-only .sp-palette-container {
    border: 0;
}

.sp-palette .sp-thumb-el {
    display: block;
    position:relative;
    float:left;
    width: 24px;
    height: 15px;
    margin: 3px;
    cursor: pointer;
    border:solid 2px transparent;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
    border-color: orange;
}
.sp-thumb-el {
    position:relative;
}

/* Initial */
.sp-initial {
    float: left;
    border: solid 1px #333;
}
.sp-initial span {
    width: 30px;
    height: 25px;
    border:none;
    display:block;
    float:left;
    margin:0;
}

.sp-initial .sp-clear-display {
    background-position: center;
}

/* Buttons */
/* .sp-palette-button-container, */
.sp-button-container {
    float: right;
}

.sp-palette-button-container { width: 100%; }

/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
    margin:0;
    overflow:hidden;
    cursor:pointer;
    padding: 0;
    display:inline-block;
    *zoom: 1;
    *display: inline;
    /* border: solid 1px #91765d; */
    /* background: #eee; */
    color: #333;
    /*! vertical-align: middle; */

    width: 100%;
    height: 48px;
}

.sp-replacer.colorpicker--small {
    width: 48px !important;
}
/*.sp-replacer:hover, .sp-replacer.sp-active {
    border-color: #F0C49B;
    color: #111;
}
*/
.sp-replacer.sp-disabled {
    cursor:default;
    border-color: silver;
    color: silver;
}
.sp-dd {
    display: none; /* L. */
    padding: 2px 0;
    height: 16px;
    line-height: 16px;
    float:left;
    font-size:10px;
}

.sp-preview {
    /*! position:relative; */
    width: 100%;
    height: 48px;
    margin-right: 5px;
    z-index: 0;
    /* edit *
	firefox first load, bigger colorpicker circles, corrects on reload
    width: 100%;
    height: 100%;
	*/
    display: inline-block;
}

.colorpicker--small .sp-preview {
    width: 48px !important;
}
.sp-preview-inner {
    border-radius: var(--spacing8);
    border: 1px solid var(--form--field--border__default);
    height: 48px;
    line-height: 1.23536;
}
.colorpicker--small .sp-preview-inner {
    width: 48px !important;
}

/*tr:hover td .sp-preview-inner { background: #ff3600 !important; } */

.sp-palette {
    *width: 220px;
    max-width: 220px;
}
.sp-palette .sp-thumb-el {
    width:30px;
    height: 30px;
    margin:2px 1px;
    border: 0 none;
}

.sp-container {
    padding-bottom:0;
}

/* Buttons: */
/*
.sp-container button {
  background-color: #eeeeee;
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  border-radius: 3px;
  color: #333;
  font-size: 14px;
  line-height: 1;
  padding: 5px 4px;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  vertical-align: middle;
}
.sp-container button:hover {
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd;
}
*/
/*
.sp-container button:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
*/
/*
.sp-cancel {
    font-size: 11px;
    color: #d93f3f !important;
    margin:0;
    padding:2px;
    margin-right: 5px;
    vertical-align: middle;
    text-decoration:none;

}
.sp-cancel:hover {
    color: #d93f3f !important;
    text-decoration: underline;
}
*/
/*
.sp-palette span:hover, .sp-palette span.sp-thumb-active {
    border-color: #000;
}
*/
button.sp-palette-toggle {
    display: inline-block;
    width: 100%;
    border: 0 none;
    outline: none;
    font-weight: bold;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--spacing8);
    padding: var(--spacing12) var(--spacing16);
}

button.sp-palette-toggle {
    background-color: var(--button--secondary--background__default);
}
button.sp-palette-toggle:hover { background-color: var(--button--secondary--background__hover); }

button.sp-choose,
a.sp-cancel {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border: 0 none;
    background-color: rgba(0,0,0,0.25);
    margin-left: .5rem;
    margin-top: .5rem;
    border-radius: var(--spacing8);
}
button.sp-choose:before,
a.sp-cancel:before {
    font-family: 'tsb' !important;
    font-size: var(--font-size-ML);
    font-weight: normal;
    color: var(--button--filter--color__default);
    text-align: center;
}
button.sp-choose:hover,
a.sp-cancel:hover {
    background-color: var(--button--primary--background__hover);
}
button.sp-choose:hover:before,
a.sp-cancel:hover:before {
    color: #fff;
}
button.sp-choose:before {
    content: '\e915';
}
a.sp-cancel:before {
    content: '\e916';
}

/* .sp-preview, */
.sp-alpha {
    position:relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
    display:block;
    position:absolute;
    top:0;left:0;bottom:0;right:0;
}

.sp-palette .sp-thumb-inner {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: var(--spacing8);
    line-height: 2rem; /* IE fix */
}
/*
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}
*/
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner:before,
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner:before {
    content: 'A';
    display: inline-block;
    width: 100%;
    text-align: center;
}
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner { color: rgb(12,21,30); }
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner { color: rgb(255,255,255); }
/*
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}
*/
.sp-clear-display {
    background-repeat:no-repeat;
    background-position: center;
    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}


.stat-tile {
    background-color: var(--card--background__default);
    border: 1px solid var(--card--border__default);
    border-radius: var(--spacing16);
    display: flex;
    flex-direction: column;
    gap: var(--spacing8);
    padding: var(--spacing24);
}

    .stat-tile__icon {
        color: var(--primary500);
        font-size: var(--font-size-L);
    }

    .stat-tile__value {
        color: var(--text__default);
        font-size: var(--font-size-XL);
        font-weight: 700;
        line-height: 1;
    }

    .stat-tile__label {
        color: var(--card--color__alternative);
        font-size: var(--font-size-XS);
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .stat-tile__trend {
        font-size: var(--font-size-S);
        font-weight: 600;
    }

    .stat-tile__sublabel {
        color: var(--card--color__alternative);
        font-size: var(--font-size-XS);
        margin-top: auto;
    }


.switchable-multiselect-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

.switchable-multiselect-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 12px 0px 16px;
    background-color: var(--form--field--background__default);
    border: 1px solid var(--form--field--border__default);
    border-radius: var(--spacing8);
    cursor: pointer;
    min-height: 20px;
}
.switch-select-label {
    font-size: var(--font-size-S);
    font-weight: 400;
    top: var(--spacing8);
}
.switchable-multiselect-trigger.active {
    border-color: #2196F3;
    box-shadow: 0 0 0 1px #2196F3;
}

.switchable-multiselect-trigger .selected-values {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.switchable-multiselect-trigger .dropdown-arrow {
    margin-left: 8px;
    transition: transform 0.2s;
    font-size: 12px;
}

.switchable-multiselect-trigger.active .dropdown-arrow {
    transform: rotate(180deg);
}

.switchable-multiselect-dropdown {
    background-color: var(--form--field--background__default);
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow-y: auto;
    display: none;
    z-index: 1;
}

.switchable-multiselect-dropdown.open {
    display: block;
}

.switchable-group {
    margin-bottom: 8px;
}

.switchable-group:last-child {
    margin-bottom: 0;
}

.switchable-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--background__default);
    font-weight: bold;
    border-bottom: 1px solid #e0e0e0;
}
.switchable-group-header:hover{
    background-color: var(--link__default);
}

.switchable-group-items {
    padding: 4px 0;
}

.switchable-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    cursor: pointer;
}

.switchable-item:hover {
    background-color: var(--link__default);
}
.switchable-select-all-header:hover {
    background-color: var(--link__default);
}
/* Switch styling */
.switch-container {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    margin: 0;
}

.switch-container input {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 18px;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .switch-slider {
    background-color: #2196F3;
}

input:checked + .switch-slider:before {
    transform: translateX(16px);
}

.item-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}
.switchable-search-container {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--form--field--background__default); /* match dropdown background */
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.switchable-search-input {
    width: 100%;
    padding: 8px;
    color: var(--form--field--text__default);
    background-color: var(--background__default);
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.switchable-search-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,.25);
}

.switchable-options-container {
    max-height: 300px;
    overflow-y: auto;
}
.switchable-select-all {
    position: sticky;
    top: 53px; /* Position right below the search input */
    z-index: 5;
    background-color: var(--form--field--background__default);
    border-bottom: 1px solid #e0e0e0;
}

.switchable-select-all-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: bold;
}

.select-all-title {
    font-weight: bold;
}
.switchable-select-all {
    position: sticky;
    top: 53px; /* Position right below the search input */
    z-index: 5;
    background-color: var(--form--field--background__default);
    border-bottom: 1px solid #e0e0e0;
}

.switchable-select-all-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px 5px 12px;
    font-weight: bold;
}

.switchable-select-all-description {
    padding: 0 12px 8px 12px;
}

.select-all-title {
    font-weight: bold;
}

.select-all-help {
    color: #666;
    font-size: 0.85em;
    font-style: italic;
}
.small-label {
    font-size: 0.8rem;
    color: #666;
    display: block;
    margin-bottom: 5px;
}

.label-container {
    position: absolute;
    top: 6px;
    left: 12px;
    height: auto;
}

table {
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

		th {
			background-color: var(--table--header--background__default);
			color: var(--table--header--color__default);
			font-size: var(--font-size-XS);
			font-weight: 600;
			line-height: normal;
			padding: 14px 24px;
			text-align: left;
		}

			.item--sort-column {
				font-size: 16px;
				margin: 0 0 0 var(--spacing4);
				vertical-align: middle;
			}

	tr {
		background-color: var(--table--row--background__default);
		border-bottom: 1px solid var(--table--row--border__default);
	}

		td {
			color: var(--table--row--color__default);
			font-size: var(--font-size-S);
			font-weight: 500;
			line-height: 20px;
			padding: 14px 24px;
		}

		tr td:last-child {
			text-align: right;
			width: 1%;
			white-space: nowrap;
		}

			.item--counter::before {
				content: counter(counter);
				counter-increment: counter;
			}

			.has--counter {
				counter-reset: counter;
			}

			.assessment--time-limit,
			.assessment--time-completed {
				display: flex;
				gap: var(--spacing4);
				align-items: center;
			}

			.assessment--date-created,
			.assessment--date-completed {
				white-space: nowrap;
			}

			.light-text {
				color: var(--table--row--color__alternative);
			}

	tr:last-of-type {
		border-bottom: none;
	}

.tabs {
	display: block;
	height: 100%;
	list-style: none;
	margin: 1rem auto;
	padding: 0;
	position: relative;
	width: 100%;
}

	.tabs hr {
		border: 1px solid var(--text__default);
		margin-top: -2px;
	}

	.tabs input[type="radio"][id^="tab"] {
		display:none;
	}

		.tabs > label {
			background-color: var(--tabs--label--background__default);
			border: 1px solid var(--tabs--label--border__default);
			border-radius: var(--spacing32);
			color: var(--tabs--label--color__default);
			cursor: pointer;
			display: inline-block;
			font-size: 1rem;
			font-weight: normal;
			margin: 0 var(--spacing4) var(--spacing8) 0;
			position: relative;	
			text-align: center;
			text-decoration: none;
			transition: background-color .3s ease, border .3s ease, color .3s ease;
			padding: var(--spacing4) var(--spacing12) var(--spacing4) var(--spacing12);
		}

			.tabs > label:hover {
				background-color: var(--tabs--label--background__hover);
				border: 1px solid var(--tabs--label--border__hover);
                color: var(--tabs--label--color__hover);
			}

			.tabs [id^="tab"]:checked + label {
                background-color: var(--tabs--label--background__active);
                border: 1px solid var(--tabs--label--border__active);
                color: var(--tabs--label--color__active);
			}

.tabs .tab-content {
    display: none;
}

    .tabs .tab-content:not([hidden]) {
        display: block;
    }

/* Underline variant */
.tabs--underline {
    border-bottom: 1px solid var(--tabs--label--border__default);
    height: auto;
    margin-bottom: 0;
}

    .tabs--underline > label {
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        margin: 0 0 -1px 0;
        padding: var(--spacing8) var(--spacing16);
    }

    .tabs--underline > label:hover {
        background: none;
        border-color: transparent;
        border-bottom-color: var(--tabs--label--border__hover);
        color: var(--tabs--label--color__hover);
    }

    .tabs--underline [id^="tab"]:checked + label {
        background: none;
        border-color: transparent;
        border-bottom-color: var(--interactive__default);
        color: var(--interactive__default);
        font-weight: 600;
    }

	.tag {
		background-color: var(--primary100);
		border-radius: var(--spacing32);
		color: var(--primary1000);
		display: inline-flex;
		font-size: var(--font-size-XS);
		font-weight: 600;
		height: fit-content;
		gap: var(--spacing4);
		padding: calc(var(--spacing4) / 2) var(--spacing8) calc(var(--spacing4) / 2) var(--spacing8);
		white-space: nowrap;
	}

		.is--negative {
			background-color: var(--error600);
			color: var(--error900);
		}

		.is--neutral {
			background-color: var(--neutral600);
			color: var(--neutral900);
		}

		.is--positive {
			background-color: var(--success600);
			color: var(--success900);
		}

		.is--information {
			background-color: var(--information--background__default);
			color: var(--information__default);
		}

		.is--warning {
			background-color: var(--warning--background__default);
			color: var(--warning__default);
		}

		.is--dimmed {
			opacity: 0.5;
		}

.time-paginator-dropdown { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 1000; background: var(--card--background__default); border: 1px solid var(--card--border__default); box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: var(--spacing16); width: 260px; text-align: left; margin-top: 10px; font-family: sans-serif; }
.time-paginator-dropdown.is-open { display: block; }
.time-paginator-dropdown:before { content: ''; position: absolute; top: -6px; left: 50%; margin-left: -6px; border-width: 0 6px 6px; border-style: solid; border-color: var(--card--border__default) transparent; display: block; width: 0; }
.tp-presets { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--card--border__default); }
.tp-presets li a { display: block; padding: 10px 20px; color: var(--text__default); text-decoration: none; font-size: 14px; transition: background 0.1s; }
/*
.tp-presets li:first-child a { border-top-left-radius: var(--spacing16);   border-top-right-radius: var(--spacing16); }
*/
.tp-presets li a:hover { background-color: var(--text__default); color: var(--button--primary--color__default); }
.tp-custom-range { padding: 15px 20px;  }
.tp-label { display: block; font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--branding__default); margin-bottom: 8px; }
.tp-input-group { position: relative; margin-bottom: 10px; }
.tp-input-group input { width: 100%; padding: 8px 30px 8px 10px; border: 1px solid var(--form--field--border__default); border-radius: var(--spacing8); font-size: 14px; box-sizing: border-box; background: var(--form--field--background__default);color: var(--form--field--text__default);}
.tp-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none; font-style: normal; }
.tp-btn-apply { display: block; width: 100%; padding: 8px; background: var(--button--secondary--background__default); border: none; border-radius: var(--spacing8); color: var(--button--primary--color__default); font-weight: 600; cursor: pointer; text-align: center; }
.tp-btn-apply:hover { background: var(--button--secondary--background__hover); }
.time-paginator-wrapper { position: relative; display: inline-block; }
.tp-presets > li:first-of-type { padding-top: var(--spacing8); }

#topbar {
    align-items: center;
    background-color: var(--mobile-header--background__default);
    box-shadow: 4px 8px 32px 0 var(--shadow1);
    display: flex;
    gap: var(--spacing8);
    height: 64px;
    left: 0;
    padding: 0 var(--spacing24) 0 var(--spacing16);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 8;
}

.topbar--logo {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    text-decoration: none;
}

    .topbar--logo img {
        display: block;
        height: 32px;
        width: auto;
    }

.topbar--title {
    color: var(--headings__default);
    font-size: var(--font-size-S);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding-left: var(--spacing12);
    white-space: nowrap;
}

.topbar--end {
    align-items: center;
    display: flex;
    gap: var(--spacing8);
    margin-left: auto;
}


.margin--top {
	margin-top: var(--spacing32);
}

.vertical--center {
	align-items: center;
}

.horizontal--center {
	margin-inline: auto;
}

.horizontal--left {
	margin-right: auto;
}

.horizontal--right {
	margin-left: auto;
}

.space--between {
	justify-content: space-between;
}

.space--around {
	justify-content: space-around;
}

.hidden {
	display: none !important;
}

/* Hide LastPass icons */
.form--field {
	background-image: none !important;
}

[id^="__lpform"] {
	display: none !important;
}

.container--width {
	width: 100%;
}

.transparent {
	background-color: transparent;
}

.item--block {
    align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing16);
	width: 100%;
}

	.item--block .form--control {
		width: min-content;
	}

.item--icon-left {
    align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing16); 
}

    .item--icon-left > i {
        font-size: var(--font-size-ML);
    }

.not-interactive {
    user-select: none;
    pointer-events: none;
}

.is--code {
    font-family: var(--font__code) !important;
    font-size: var(--font-size-S) !important;
    font-weight: 400 !important;
    line-height: 15px !important;
    white-space: pre;
}

.item--label {
    line-height: 1;
    /* margin-right: auto; */
    /* max-width: calc(100% - 60px); */
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .3s ease;
}

.error {
    color: var(--error__default);
	background-color: var(--error--background__default);
}

.information {
    color: var(--information__default);
	background-color: var(--information--background__default);
}

.success {
    color: var(--success__default);
	background-color: var(--success--background__default);
}

.warning {
    color: var(--warning__default);
	background-color: var(--warning--background__default);
}

.text-XXS {
	font-size: var(--font-size-XXS) !important;
}

.text-XS {
	font-size: var(--font-size-XS) !important;
}

.text-S {
	font-size: var(--font-size-S) !important;
}

.text-M {
	font-size: var(--font-size-M) !important;
}

.text-ML {
	font-size: var(--font-size-ML) !important;
}

.text-L {
	font-size: var(--font-size-L) !important;
}

.text-XL {
	font-size: var(--font-size-XL) !important;
}

.text-XXL {
	font-size: var(--font-size-XXL) !important;
}


.centered-content-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    display: flex;
    justify-content: center;
}

html,
body {
	background-color: var(--background__default);
	color: var(--text__default);
	font-family: var(--font__default);
	font-size: var(--font-size-M);
	font-weight: 400;
	line-height: 1.5;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

html {
	height: 100%;
}

	body {
		/*min-height: 100%;*/
		height: 100vh;
	}

		.page-container {
			display: flex;
			flex-direction: column;
			/*height: auto;*/
			padding-top: 55px;
			min-height: 100%;
			width: 100%;
			background: inherit;
		}

			main {
				container: main / inline-size;
				padding: 0 var(--spacing16) 0 var(--spacing16);
				flex: 1;
				position: relative;
			}


/* Desktop       */

@media screen and (min-width: 960px) {
    .page-container:has(.sidebar) {
        padding: 55px 0 0 60px;
        transition: padding 0.3s ease;
    }

    .page-container:has(.sidebar.open) {
        padding: 55px 0 0 var(--sidebar-width);
    }

    .page-container .modal--overlay {
        width: calc(100% - 60px);
    }

    .page-container:has(.sidebar.open) .modal--overlay {
        width: calc(100% - var(--sidebar-width));
    }

    #sidebar:hover:not(.is--toggling) {
        width: var(--sidebar-width);
    }

    #sidebar:hover:not(.is--toggling) .logo span {
        opacity: 1;
        visibility: visible;
        width: max-content;
    }

    #sidebar:hover:not(.is--toggling) .sidebar--navigation-link--label {
        opacity: 1;
        visibility: visible;
        width: max-content;
    }

    #sidebar:hover:not(.is--toggling) .theme-switcher span {
        display: inline;
    }
}


.multi-step-form-container {
	margin-left: auto;
	margin-right: auto;
	padding: var(--spacing32) 0 var(--spacing32) 0;
	user-select: none;
	width: min(100%, 448px);
}

	.form-stepper--title {
		margin: 0 0 0 0;
	}

	ul.form-stepper {
		counter-reset: section;
		margin: var(--spacing4) 0 var(--spacing24) 0;
		padding-left: 0;
	}

	ul.form-stepper .form-stepper-circle {
		animation: scale 0.3s ease-in-out;
		position: relative;
	}

	ul.form-stepper .form-stepper-circle span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
	}

	.form-stepper-horizontal {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		justify-content: flex-start;
		align-items: center;
	}

	ul.form-stepper > li:not(:last-of-type) {
		margin-bottom: 0.625rem;
		transition: margin-bottom 0.4s;
	}

	.form-stepper-horizontal > li:not(:last-of-type) {
		margin-bottom: 0 !important;
	}

	.form-stepper-horizontal li {
		align-items: start;
		display: flex;
		position: relative;
		transition: 0.5s;
	}

	.form-stepper-horizontal li:last-child {
		flex: unset;
	}
	
	.form-stepper-circle {
		background-color: var(--primary300);
		border-radius: 50%;
		display: block;
		width: 9px;
		height: 9px;
		line-height: normal;
		margin-right: 0;
		text-align: center;
		transition: background-color .3s ease-in-out;
	}
	
	.form-stepper-active .form-stepper-circle {
		background-color: var(--secondary500);
		height: 14px;
		width: 14px;
	}
	
		.form-stepper-active .form-stepper-circle:hover {
			background-color: var(--secondary600);
		}

	.form-stepper-unfinished .form-stepper-circle {
		background-color: var(--primary300);
	}

		.form-stepper-unfinished .form-stepper-circle:hover {
			background-color: var(--primary200);
		}

	.form-stepper-completed .form-stepper-circle {
		background-color: var(--primary500);
	}
	
		.form-stepper-completed .form-stepper-circle:hover {
			background-color: var(--primary500);
		}
	
	.form-stepper .label {
		font-size: 1rem;
		margin-top: 0.5rem;
	}
	
	.form-stepper-list .step--wrapper {
		color: var(--interactive__default);
		position: relative;
	}

	.form-step {
		animation: scale .7s ease-in-out;
		padding: 0 0 0 0;
	}

.card--grid {
	display: grid;
	gap: var(--spacing16);
	margin-bottom: var(--spacing32);
	width: 100%;
}

	.grid--auto-fit {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}

	.grid--1-2 {
		grid-template-columns: 1fr 2fr;
	}

	.grid--1-1 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid--1-1-1 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid--1-1-1-1 {
		grid-template-columns: repeat(4, 1fr);
	}

	.grid--5col {
		grid-template-columns: repeat(5, 1fr);
	}

.grid--fieldset {
	display: grid;
	gap: var(--spacing16);
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

	.grid--fieldset .form--label {
		white-space: initial;
	}

/* Mobile & Tablet       */

@media (min-width: 300px) and (min-height: 300px) {
	.dialog {
		top: 30%;
	}
}

@media screen and (max-width: 959px) {
	.page-container:has(.sidebar) {
		padding: 55px 0 0 60px;
	}

	#sidebar {
		left: 0;
		width: 60px;
	}

		#sidebar .logo {
			display: none;
		}

	#sidebar.open ~ .sidebar--overlay {
		display: block;
		height: 100vh;
		opacity: 0.5;
		width: 100%;
	}

	.banner--notification {
		top: 64px;
	}
	
	.page--header {
		padding-top : 76px;
	}
}

/* Switch to auto-fit when <main> width is < 960px */
@container main (max-width: 960px) {
	.grid--1-2,
	.grid--1-1,
	.grid--1-1-1 {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}
}

	@container action-bar (max-width: 250px) {
		button {
			flex: 1 1 auto;
			justify-content: center;
			white-space: normal;
		}

			/* the button keeps the same dimensions,
			so I am not sure the reason this is was being hidden */
			button i {
				/*display: none;*/
			}
	}

	@container card (max-width: 250px) {
		.card--header button {
			flex: 1 1 auto;
			justify-content: center;
			white-space: normal;
		}

		.card--header button i {
			display: none;
		}

		.segmented-button {
			flex-wrap: wrap;
			gap: var(--spacing8);
		}

			.segmented-button .filter-button {
				border-radius: var(--spacing8);
				flex: 1 1 auto;
			}
	}

		@container card-footer (max-width: 250px) {
			.footer-buttons-container {
				display: flex;
				flex-direction: column-reverse;
				flex: 1 1 auto;
			}
			
				button {
					display: flex;
					flex: 1 1 auto;
					justify-content: center;
					white-space: normal;
				}
		}
		
		@container filtering-button (max-width: 350px) {
			.filter-button {
				width: 100%;
				white-space: normal;
			}
		}

		@container action-bar (max-width: 350px) {
			.action-bar-label {
				width: 100%;
				white-space: normal;
				margin-inline: auto;
			}
		}


.landing-container {
	align-items: center;
	animation: none; /* gradient 15s ease infinite - check for perfomance issues */
	background: linear-gradient(328deg, var(--landing-page--background__default)); /* var(--primary700), var(--primary900), var(--primary700), var(--primary700))*/
	background-size: 100%; /* 400% 400% */
	display: flex;
	flex-direction: column;
	height: 100vh;
	justify-content: center;
	padding: 0 var(--spacing32) 0 var(--spacing32);
	transition: padding .3s ease;
	width: 100%;
}

	.landing-container .logo {
		height: auto;
		margin: var(--spacing32) 0 var(--spacing32) 0;
		width: fit-content;
	}

	.landing-container .card--footer {
		flex-flow: column;
	}

		.landing-container .card--footer .form--message {
			height: auto;
		}

	.logo .logo-landing {
		width: 200px;
		animation: scale .7s ease-in-out;
	}

		.logo-landing + span {
			font-size: 56px;
		}

	.login-link {
		background-color: var(--item--action--background);
		border: 2px solid transparent;
		color: white;
		text-decoration: underline;
		transition: all .3s ease;
	}

		.login-link:hover {
			background-color: var(--item--action--background__hover);
			border: 2px solid var(--interactive__hover);
			color: white;
			text-decoration: none;
		} 

	.landing-container footer {
		position: fixed;
		bottom: 0;
		animation: scale .3s ease-in-out;
	}

	#login {
		display: flex;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		align-items: center;
		justify-content: center;
	}

		.login--form {
			max-width: 448px;
			width: 100%;
		}

		.is--login {
			pointer-events: none;
		}

.quiz-container {
	height: 100%;
}

	.quiz--header {
		align-items: center;
		background-color: var(--quiz-header--background__default);
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing8);
		justify-content: space-between;
		margin: 0 0 0 0;
		padding: var(--spacing24) var(--spacing32) var(--spacing24) var(--spacing32);
	}

		.quiz--header .logo {
			flex-direction: row;
			gap: var(--spacing16);
			height: fit-content;
			margin: 0 0 0 0;
			padding: 0 0 0 0;
			width: fit-content;
		}

			.quiz--header .logo img {
				height: auto;
				width: 46px;
			}
		
		.quiz--time-left {
			color: var(--text__default);
			font-size: var(--font-size-ML);
			font-weight: 500;
			letter-spacing: 1.5px;
		}

		.assessment--candidate-name {
			font-size: var(--font-size-XL);
			font-weight: 700;
			margin: var(--spacing8) 0 var(--spacing16) 0;
		}

		.form-step .card--content strong {
			color: var(--secondary600);
		}