html {
    --color-primary: #227485;
    --color-primary-semi-light: #3C8E9E;
    --color-primary-light: #4F9FAF;
    --color-primary-lighter: #7CBFCA;
    --color-primary-lightest: #94CCD4;
    --color-primary-dark: #045D70;

    --color-secondary: #FF9800;
    --color-secondary-lighter: #FFD697;
    --color-secondary-light: #FFC975;
    --color-secondary-dark: #EB9002;
    --color-secondary-darker: #D18002;

    --color-tertiary: #029B92;
    --color-tertiary-light: #CCEBE9;
    --color-tertiary-lighter: #E5F5F4;
    --color-tertiary-dark: #006760;

    --color-negative: #EC5555;
    --color-negative-light: #FCE6E6;
    --color-negative-lighter: #FEF6F6;
    --color-negative-dark: #C53939;

    --color-positive: #71B800;
    --color-positive-light: #E8F2D9;
    --color-positive-lighter: #F7FaF2;
    --color-positive-dark: #579A00;
    --color-positive-darker: #488306;

    --color-greyscale-50: #ffffff;
    --color-greyscale-50-rgb: 255, 255, 255;
    --color-greyscale-100: #f7f7f7;
    --color-greyscale-200: #f0f0f0;
    --color-greyscale-300: #dadada;
    --color-greyscale-400: #c5c5c5;
    --color-greyscale-500: #bababa;
    --color-greyscale-600: #999999;
    --color-greyscale-700: #666666;
    --color-greyscale-800: #363636;
    --color-greyscale-900: #000000;

    --color-separator: var(--color-greyscale-300);
    --color-error: var(--color-negative);
    --color-success: var(--color-positive);
    --color-text: var(--color-greyscale-800);
    --color-hint: var(--color-greyscale-700);
    --color-link: var(--color-primary);

    --font-family-1: Hind, Arial, Helvetica, sans-serif;
    --font-family-1-bold: 600;
    --font-family-1-semi-bold: 500;

    --font-family-2: var(--font-family-1);
    --font-family-2-bold: var(--font-family-1-bold);

    --font-size-base: 16px;
    --font-size-hint: .875rem;
    --font-size-title: 1.25rem;

    --line-height-base: 1.4375rem;
    --line-height-hint: 1.25rem;
    --line-height-title: 1.8125rem;

    --gap-size: .625rem; /* 10px */
    --content-gap-size: 3vw;
    --vertical-gap-size: 10px;
    --headline-content-gap-size: 15px;
    --headline-content-small-gap-size: 5px;

    --fd-app-header-z-index: 100;
    --fd-app-header-logo-height: 26px;
    --fd-app-header-height: 50px;

    --fd-backdrop-z-index: 110;
    --fd-layer-z-index: 120;
    --fd-drawer-z-index: 120;
    --fd-dialog-z-index: 130;

    --global-scroll-bar-gap: 0px;
}

/* semantic tokens */
html {
    --surface-inverse: var(--color-greyscale-50);
    --on-surface-inverse: var(--color-hint);
    --on-surface-inverse-primary: var(--color-primary);

    --hint-warning-surface: #FCD7C0;
    --hint-warning-on-surface: #622602;

    /* new tokens */
    --color-action-border-focus: #227485;
    --color-action-border-focus-variant: #ffffff;
    --color-action-destructive-background: #d73737;
    --color-action-destructive-background-disabled: #e3e3e3;
    --color-action-destructive-background-focus: #be1d1d;
    --color-action-destructive-background-hover: #be1d1d;
    --color-action-destructive-background-loading: #be1d1d;
    --color-action-destructive-background-pressed: #8b0000;
    --color-action-destructive-border: rgba(255, 255, 255, 0);
    --color-action-destructive-border-disabled: rgba(255, 255, 255, 0);
    --color-action-destructive-border-focus: #ffffff;
    --color-action-destructive-border-hover: rgba(255, 255, 255, 0);
    --color-action-destructive-border-loading: rgba(255, 255, 255, 0);
    --color-action-destructive-border-pressed: rgba(255, 255, 255, 0);
    --color-action-destructive-foreground: #ffffff;
    --color-action-destructive-foreground-disabled: #c8c8c8;
    --color-action-destructive-foreground-focus: #ffffff;
    --color-action-destructive-foreground-hover: #ffffff;
    --color-action-destructive-foreground-loading: #ffffff;
    --color-action-destructive-foreground-pressed: #ffffff;
    --color-action-destructive-subtle-background: #fcdcdc;
    --color-action-destructive-subtle-background-disabled: #f1f1f1;
    --color-action-destructive-subtle-background-focus: #f69696;
    --color-action-destructive-subtle-background-hover: #f69696;
    --color-action-destructive-subtle-background-loading: #f69696;
    --color-action-destructive-subtle-background-pressed: #d73737;
    --color-action-destructive-subtle-border: rgba(255, 255, 255, 0);
    --color-action-destructive-subtle-border-disabled: rgba(255, 255, 255, 0);
    --color-action-destructive-subtle-border-focus: #ffffff;
    --color-action-destructive-subtle-border-hover: rgba(255, 255, 255, 0);
    --color-action-destructive-subtle-border-loading: rgba(255, 255, 255, 0);
    --color-action-destructive-subtle-border-pressed: rgba(255, 255, 255, 0);
    --color-action-destructive-subtle-foreground: #a40404;
    --color-action-destructive-subtle-foreground-disabled: #d6d6d6;
    --color-action-destructive-subtle-foreground-focus: #710000;
    --color-action-destructive-subtle-foreground-hover: #710000;
    --color-action-destructive-subtle-foreground-loading: #710000;
    --color-action-destructive-subtle-foreground-pressed: #ffffff;
    --color-action-destructive-subtlest-background: rgba(255, 255, 255, 0);
    --color-action-destructive-subtlest-background-disabled: rgba(255, 255, 255, 0);
    --color-action-destructive-subtlest-background-focus: #fcdcdc;
    --color-action-destructive-subtlest-background-hover: #fcdcdc;
    --color-action-destructive-subtlest-background-loading: #fcdcdc;
    --color-action-destructive-subtlest-background-pressed: #f69696;
    --color-action-destructive-subtlest-border: #be1d1d;
    --color-action-destructive-subtlest-border-disabled: #e3e3e3;
    --color-action-destructive-subtlest-border-focus: #ffffff;
    --color-action-destructive-subtlest-border-hover: #be1d1d;
    --color-action-destructive-subtlest-border-loading: #be1d1d;
    --color-action-destructive-subtlest-border-pressed: #8b0000;
    --color-action-destructive-subtlest-foreground: #be1d1d;
    --color-action-destructive-subtlest-foreground-disabled: #e3e3e3;
    --color-action-destructive-subtlest-foreground-focus: #be1d1d;
    --color-action-destructive-subtlest-foreground-hover: #be1d1d;
    --color-action-destructive-subtlest-foreground-loading: #be1d1d;
    --color-action-destructive-subtlest-foreground-pressed: #8b0000;
    --color-action-neutral-boldest-background: #3a3a3a;
    --color-action-neutral-boldest-background-disabled: #878787;
    --color-action-neutral-boldest-background-focus: #545454;
    --color-action-neutral-boldest-background-hover: #545454;
    --color-action-neutral-boldest-background-loading: #545454;
    --color-action-neutral-boldest-background-pressed: #212121;
    --color-action-neutral-boldest-border: rgba(255, 255, 255, 0);
    --color-action-neutral-boldest-border-disabled: rgba(255, 255, 255, 0);
    --color-action-neutral-boldest-border-focus: #ffffff;
    --color-action-neutral-boldest-border-hover: #ffffff;
    --color-action-neutral-boldest-border-loading: #ffffff;
    --color-action-neutral-boldest-border-pressed: #bababa;
    --color-action-neutral-boldest-foreground: #ffffff;
    --color-action-neutral-boldest-foreground-disabled: #545454;
    --color-action-neutral-boldest-foreground-focus: #ffffff;
    --color-action-neutral-boldest-foreground-hover: #ffffff;
    --color-action-neutral-boldest-foreground-loading: #ffffff;
    --color-action-neutral-boldest-foreground-pressed: #ffffff;
    --color-action-neutral-subtle-background: #e3e3e3;
    --color-action-neutral-subtle-background-focus: #c8c8c8;
    --color-action-neutral-subtle-background-hover: #c8c8c8;
    --color-action-neutral-subtle-border: rgba(255, 255, 255, 0);
    --color-action-neutral-subtle-border-focus: #ffffff;
    --color-action-neutral-subtle-border-hover: rgba(255, 255, 255, 0);
    --color-action-neutral-subtle-foreground: #212121;
    --color-action-neutral-subtle-foreground-focus: #212121;
    --color-action-neutral-subtle-foreground-hover: #212121;
    --color-action-neutral-subtlest-background: rgba(255, 255, 255, 0);
    --color-action-neutral-subtlest-background-disabled: #e3e3e3;
    --color-action-neutral-subtlest-background-focus: #e3e3e3;
    --color-action-neutral-subtlest-background-focus-variant: #ffffff;
    --color-action-neutral-subtlest-background-hover: #e3e3e3;
    --color-action-neutral-subtlest-background-loading: #e3e3e3;
    --color-action-neutral-subtlest-background-pressed: #d6d6d6;
    --color-action-neutral-subtlest-background-variant: #ffffff;
    --color-action-neutral-subtlest-border: #212121;
    --color-action-neutral-subtlest-border-disabled: #c8c8c8;
    --color-action-neutral-subtlest-border-focus: #ffffff;
    --color-action-neutral-subtlest-border-hover: #212121;
    --color-action-neutral-subtlest-border-loading: #212121;
    --color-action-neutral-subtlest-border-pressed: #212121;
    --color-action-neutral-subtlest-foreground: #212121;
    --color-action-neutral-subtlest-foreground-disabled: #c8c8c8;
    --color-action-neutral-subtlest-foreground-focus: #212121;
    --color-action-neutral-subtlest-foreground-focus-variant: #878787;
    --color-action-neutral-subtlest-foreground-hover: #212121;
    --color-action-neutral-subtlest-foreground-loading: #212121;
    --color-action-neutral-subtlest-foreground-pressed: #212121;
    --color-action-onbrand-active-background: #ffffff;
    --color-action-onbrand-active-border: rgba(255, 255, 255, 0);
    --color-action-onbrand-active-foreground: #003347;
    --color-action-onbrand-background: #ffffff;
    --color-action-onbrand-background-disabled: #4e909d;
    --color-action-onbrand-background-focus: #a7c7ce;
    --color-action-onbrand-background-focus-variant: #4e909d;
    --color-action-onbrand-background-hover: #a7c7ce;
    --color-action-onbrand-background-hover-variant: #4e909d;
    --color-action-onbrand-background-loading: #a7c7ce;
    --color-action-onbrand-background-pressed: #7aacb6;
    --color-action-onbrand-background-variant: #ffaf33;
    --color-action-onbrand-border: rgba(255, 255, 255, 0);
    --color-action-onbrand-border-disabled: rgba(255, 255, 255, 0);
    --color-action-onbrand-border-focus: #ffffff;
    --color-action-onbrand-border-focus-variant: #d6d6d6;
    --color-action-onbrand-border-hover: #d3e3e7;
    --color-action-onbrand-border-hover-variant: #d6d6d6;
    --color-action-onbrand-border-loading: rgba(255, 255, 255, 0);
    --color-action-onbrand-border-pressed: rgba(255, 255, 255, 0);
    --color-action-onbrand-border-variant: #09202a;
    --color-action-onbrand-foreground: #095b6c;
    --color-action-onbrand-foreground-disabled: #227485;
    --color-action-onbrand-foreground-focus: #004152;
    --color-action-onbrand-foreground-focus-variant: #ffffff;
    --color-action-onbrand-foreground-hover: #004152;
    --color-action-onbrand-foreground-hover-variant: #ffffff;
    --color-action-onbrand-foreground-loading: #004152;
    --color-action-onbrand-foreground-pressed: #004152;
    --color-action-onbrand-foreground-variant: #212121;
    --color-action-onbrand-foreground-variant-2: #801c00;
    --color-action-onbrand-inactive-background: rgba(255, 255, 255, 0);
    --color-action-onbrand-inactive-border: #ffffff;
    --color-action-onbrand-inactive-foreground: #ffffff;
    --color-action-onbrand-selected-background: #004152;
    --color-action-onbrand-selected-border: #d3e3e7;
    --color-action-onbrand-selected-foreground: #ffffff;
    --color-action-onbrand-unselected-background: #3a3a3a;
    --color-action-onbrand-unselected-border: #d3e3e7;
    --color-action-onbrand-unselected-foreground: #ffffff;
    --color-action-onbrand-subtle-background: #d3e3e7;
    --color-action-onbrand-subtle-background-disabled: #4e909d;
    --color-action-onbrand-subtle-background-focus: #a7c7ce;
    --color-action-onbrand-subtle-background-hover: #a7c7ce;
    --color-action-onbrand-subtle-background-loading: #a7c7ce;
    --color-action-onbrand-subtle-background-pressed: #7aacb6;
    --color-action-onbrand-subtle-border: rgba(255, 255, 255, 0);
    --color-action-onbrand-subtle-border-disabled: rgba(255, 255, 255, 0);
    --color-action-onbrand-subtle-border-focus: #ffffff;
    --color-action-onbrand-subtle-border-hover: rgba(255, 255, 255, 0);
    --color-action-onbrand-subtle-border-loading: rgba(255, 255, 255, 0);
    --color-action-onbrand-subtle-border-pressed: rgba(255, 255, 255, 0);
    --color-action-onbrand-subtle-foreground: #004152;
    --color-action-onbrand-subtle-foreground-disabled: #227485;
    --color-action-onbrand-subtle-foreground-focus: #004152;
    --color-action-onbrand-subtle-foreground-hover: #004152;
    --color-action-onbrand-subtle-foreground-loading: #004152;
    --color-action-onbrand-subtle-foreground-pressed: #003347;
    --color-action-onbrand-subtlest-background: #227485;
    --color-action-onbrand-subtlest-background-disabled: #227485;
    --color-action-onbrand-subtlest-background-focus: #a7c7ce;
    --color-action-onbrand-subtlest-background-hover: #a7c7ce;
    --color-action-onbrand-subtlest-background-loading: #a7c7ce;
    --color-action-onbrand-subtlest-background-pressed: #7aacb6;
    --color-action-onbrand-subtlest-border: #ffffff;
    --color-action-onbrand-subtlest-border-disabled: #4e909d;
    --color-action-onbrand-subtlest-border-focus: #ffffff;
    --color-action-onbrand-subtlest-border-hover: #ffffff;
    --color-action-onbrand-subtlest-border-loading: #ffffff;
    --color-action-onbrand-subtlest-border-pressed: #d3e3e7;
    --color-action-onbrand-subtlest-foreground: #ffffff;
    --color-action-onbrand-subtlest-foreground-disabled: #4e909d;
    --color-action-onbrand-subtlest-foreground-focus: #004152;
    --color-action-onbrand-subtlest-foreground-hover: #004152;
    --color-action-onbrand-subtlest-foreground-loading: #004152;
    --color-action-onbrand-subtlest-foreground-pressed: #003347;
    --color-action-onbrand-subtlest-selected-background: rgba(255, 255, 255, 0);
    --color-action-onbrand-subtlest-selected-border: #d3e3e7;
    --color-action-onbrand-subtlest-selected-foreground: #d3e3e7;
    --color-action-onbrand-subtlest-unselected-background: rgba(255, 255, 255, 0);
    --color-action-onbrand-subtlest-unselected-border: #d3e3e7;
    --color-action-primary-active-background: #227485;
    --color-action-primary-active-border: rgba(255, 255, 255, 0);
    --color-action-primary-active-foreground: #ffffff;
    --color-action-primary-background: #095b6c;
    --color-action-primary-background-disabled: #e3e3e3;
    --color-action-primary-background-focus: #003347;
    --color-action-primary-background-hover: #003347;
    --color-action-primary-background-loading: #003347;
    --color-action-primary-background-pressed: #09202a;
    --color-action-primary-border: rgba(255, 255, 255, 0);
    --color-action-primary-border-disabled: #d6d6d6;
    --color-action-primary-border-focus: #ffffff;
    --color-action-primary-border-focus-variant: #01293c;
    --color-action-primary-border-hover: #01293c;
    --color-action-primary-border-loading: rgba(255, 255, 255, 0);
    --color-action-primary-border-pressed: rgba(255, 255, 255, 0);
    --color-action-primary-foreground: #ffffff;
    --color-action-primary-foreground-disabled: #c8c8c8;
    --color-action-primary-foreground-focus: #ffffff;
    --color-action-primary-foreground-hover: #ffffff;
    --color-action-primary-foreground-loading: #ffffff;
    --color-action-primary-foreground-pressed: #ffffff;
    --color-action-primary-inactive-background: rgba(255, 255, 255, 0);
    --color-action-primary-inactive-border: #227485;
    --color-action-primary-inactive-foreground: #227485;
    --color-action-primary-selected-background: #227485;
    --color-action-primary-selected-background-variant: #227485;
    --color-action-primary-selected-border: #227485;
    --color-action-primary-selected-foreground: #ffffff;
    --color-action-primary-unselected-background: #878787;
    --color-action-primary-unselected-background-variant: #878787;
    --color-action-primary-unselected-border: #878787;
    --color-action-primary-unselected-foreground: #ffffff;
    --color-action-primary-subtle-active-background: #A7C7CE;
    --color-action-primary-subtle-active-border: rgba(255, 255, 255, 0);
    --color-action-primary-subtle-active-foreground: #004152;
    --color-action-primary-subtle-background: #d3e3e7;
    --color-action-primary-subtle-background-disabled: #f1f1f1;
    --color-action-primary-subtle-background-focus: #7aacb6;
    --color-action-primary-subtle-background-hover: #7aacb6;
    --color-action-primary-subtle-background-loading: #7aacb6;
    --color-action-primary-subtle-background-pressed: #227485;
    --color-action-primary-subtle-border: rgba(255, 255, 255, 0);
    --color-action-primary-subtle-border-disabled: rgba(255, 255, 255, 0);
    --color-action-primary-subtle-border-focus: #ffffff;
    --color-action-primary-subtle-border-hover: rgba(255, 255, 255, 0);
    --color-action-primary-subtle-border-loading: rgba(255, 255, 255, 0);
    --color-action-primary-subtle-border-pressed: rgba(255, 255, 255, 0);
    --color-action-primary-subtle-foreground: #003347;
    --color-action-primary-subtle-foreground-disabled: #d6d6d6;
    --color-action-primary-subtle-foreground-focus: #09202a;
    --color-action-primary-subtle-foreground-hover: #09202a;
    --color-action-primary-subtle-foreground-loading: #09202a;
    --color-action-primary-subtle-foreground-pressed: #ffffff;
    --color-action-primary-subtle-inactive-background: #e3e3e3;
    --color-action-primary-subtle-inactive-border: rgba(255, 255, 255, 0);
    --color-action-primary-subtle-inactive-foreground: #212121;
    --color-action-primary-subtle-selected-background: #d3e3e7;
    --color-action-primary-subtle-selected-border: rgba(255, 255, 255, 0);
    --color-action-primary-subtle-selected-foreground: #004152;
    --color-action-primary-subtle-unselected-background: #878787;
    --color-action-primary-subtle-unselected-border: #545454;
    --color-action-primary-subtle-unselected-foreground: #000000;
    --color-action-primary-subtlest-active-background: #d3e3e7;
    --color-action-primary-subtlest-active-border: #004152;
    --color-action-primary-subtlest-active-foreground: #004152;
    --color-action-primary-subtlest-background: #ffffff;
    --color-action-primary-subtlest-background-disabled: rgba(255, 255, 255, 0);
    --color-action-primary-subtlest-background-focus: #d3e3e7;
    --color-action-primary-subtlest-background-focus-variant: #7aacb6;
    --color-action-primary-subtlest-background-hover: #d3e3e7;
    --color-action-primary-subtlest-background-hover-variant: #7aacb6;
    --color-action-primary-subtlest-background-loading: #d3e3e7;
    --color-action-primary-subtlest-background-pressed: #7aacb6;
    --color-action-primary-subtlest-border: #095b6c;
    --color-action-primary-subtlest-border-disabled: #f1f1f1;
    --color-action-primary-subtlest-border-focus: #ffffff;
    --color-action-primary-subtlest-border-focus-variant: #01293c;
    --color-action-primary-subtlest-border-hover: #004152;
    --color-action-primary-subtlest-border-hover-variant: #01293c;
    --color-action-primary-subtlest-border-loading: #095b6c;
    --color-action-primary-subtlest-border-pressed: #003347;
    --color-action-primary-subtlest-foreground: #095b6c;
    --color-action-primary-subtlest-foreground-disabled: #e3e3e3;
    --color-action-primary-subtlest-foreground-focus: #004152;
    --color-action-primary-subtlest-foreground-focus-variant: #01293c;
    --color-action-primary-subtlest-foreground-hover: #004152;
    --color-action-primary-subtlest-foreground-hover-variant: #01293c;
    --color-action-primary-subtlest-foreground-loading: #004152;
    --color-action-primary-subtlest-foreground-pressed: #003347;
    --color-action-primary-subtlest-inactive-background: #ffffff;
    --color-action-primary-subtlest-inactive-border: #878787;
    --color-action-primary-subtlest-inactive-foreground: #212121;
    --color-action-primary-subtlest-selected-background: rgba(255, 255, 255, 0);
    --color-action-primary-subtlest-selected-border: #227485;
    --color-action-primary-subtlest-selected-foreground: #227485;
    --color-action-primary-subtlest-unselected-background: rgba(255, 255, 255, 0);
    --color-action-primary-subtlest-unselected-border: #878787;
    --color-action-primary-subtlest-unselected-foreground: #545454;
    --color-action-secondary-background: #ffaf33;
    --color-action-secondary-background-disabled: #e3e3e3;
    --color-action-secondary-background-focus: #ffd799;
    --color-action-secondary-background-hover: #ffd799;
    --color-action-secondary-background-loading: #ffd799;
    --color-action-secondary-background-pressed: #ffaf33;
    --color-action-secondary-border: rgba(255, 255, 255, 0);
    --color-action-secondary-border-disabled: rgba(255, 255, 255, 0);
    --color-action-secondary-border-focus: #ffffff;
    --color-action-secondary-border-hover: rgba(255, 255, 255, 0);
    --color-action-secondary-border-loading: rgba(255, 255, 255, 0);
    --color-action-secondary-border-pressed: rgba(255, 255, 255, 0);
    --color-action-secondary-foreground: #801c00;
    --color-action-secondary-foreground-disabled: #c8c8c8;
    --color-action-secondary-foreground-focus: #801c00;
    --color-action-secondary-foreground-hover: #801c00;
    --color-action-secondary-foreground-loading: #801c00;
    --color-action-secondary-foreground-pressed: #801c00;
    --color-action-secondary-subtle-background: #ffebcc;
    --color-action-secondary-subtle-background-disabled: #f1f1f1;
    --color-action-secondary-subtle-background-focus: #ffc366;
    --color-action-secondary-subtle-background-hover: #ffc366;
    --color-action-secondary-subtle-background-loading: #ffc366;
    --color-action-secondary-subtle-background-pressed: #ff9b00;
    --color-action-secondary-subtle-border: rgba(255, 255, 255, 0);
    --color-action-secondary-subtle-border-disabled: rgba(255, 255, 255, 0);
    --color-action-secondary-subtle-border-focus: #ffffff;
    --color-action-secondary-subtle-border-hover: rgba(255, 255, 255, 0);
    --color-action-secondary-subtle-border-loading: rgba(255, 255, 255, 0);
    --color-action-secondary-subtle-border-pressed: rgba(255, 255, 255, 0);
    --color-action-secondary-subtle-foreground: #b24f00;
    --color-action-secondary-subtle-foreground-disabled: #d6d6d6;
    --color-action-secondary-subtle-foreground-focus: #801c00;
    --color-action-secondary-subtle-foreground-hover: #801c00;
    --color-action-secondary-subtle-foreground-loading: #801c00;
    --color-action-secondary-subtle-foreground-pressed: #801c00;
    --color-action-secondary-subtlest-background: rgba(255, 255, 255, 0);
    --color-action-secondary-subtlest-background-disabled: rgba(255, 255, 255, 0);
    --color-action-secondary-subtlest-background-focus: #ffebcc;
    --color-action-secondary-subtlest-background-hover: #ffebcc;
    --color-action-secondary-subtlest-background-loading: #ffebcc;
    --color-action-secondary-subtlest-background-pressed: #ffc366;
    --color-action-secondary-subtlest-border: #b24f00;
    --color-action-secondary-subtlest-border-disabled: #f1f1f1;
    --color-action-secondary-subtlest-border-focus: #ffffff;
    --color-action-secondary-subtlest-border-hover: #b24f00;
    --color-action-secondary-subtlest-border-loading: #993500;
    --color-action-secondary-subtlest-border-pressed: #b24f00;
    --color-action-secondary-subtlest-foreground: #b24f00;
    --color-action-secondary-subtlest-foreground-disabled: #e3e3e3;
    --color-action-secondary-subtlest-foreground-focus: #993500;
    --color-action-secondary-subtlest-foreground-hover: #993500;
    --color-action-secondary-subtlest-foreground-loading: #993500;
    --color-action-secondary-subtlest-foreground-pressed: #801c00;
    --color-area-brand-background: #227485;
    --color-area-brand-border: rgba(255, 255, 255, 0);
    --color-area-brand-foreground: #ffffff;
    --color-area-brand-bold-background: #004152;
    --color-area-brand-bold-foreground: #ffffff;
    --color-area-neutral-boldest-background: #3a3a3a;
    --color-area-neutral-boldest-border: rgba(255, 255, 255, 0);
    --color-area-neutral-boldest-foreground: #ffffff;
    --color-area-neutral-subtler-background: #f1f1f1;
    --color-area-neutral-subtlest-active-foreground: #212121;
    --color-area-neutral-subtlest-background: #ffffff;
    --color-area-neutral-subtlest-border: #c8c8c8;
    --color-area-neutral-subtlest-foreground: #212121;
    --color-area-neutral-subtlest-foreground-body: #212121;
    --color-area-neutral-subtlest-foreground-body-subtle: #545454;
    --color-area-neutral-subtlest-foreground-headline: #212121;
    --color-area-neutral-subtlest-foreground-label: #212121;
    --color-area-neutral-subtlest-foreground-link: #227485;
    --color-area-neutral-subtlest-inactive-foreground: #878787;
    --color-area-neutral-subtlest-selected-foreground: #4e909d;
    --color-area-neutral-subtlest-unselected-foreground: #878787;
    --color-feedback-attentive-background: #b92e00;
    --color-feedback-attentive-border: rgba(255, 255, 255, 0);
    --color-feedback-attentive-foreground: #ffffff;
    --color-feedback-attentive-subtle-background: #fbdfce;
    --color-feedback-attentive-subtle-border: #9f1500;
    --color-feedback-attentive-subtle-foreground: #860000;
    --color-feedback-attentive-subtle-foreground-variant: #212121;
    --color-feedback-negative-background: #be1d1d;
    --color-feedback-negative-border: #be1d1d;
    --color-feedback-negative-border-variant: #ffffff;
    --color-feedback-negative-foreground: #ffffff;
    --color-feedback-negative-subtle-background: #fcdcdc;
    --color-feedback-negative-subtle-border: #be1d1d;
    --color-feedback-negative-subtle-border-variant: rgba(255, 255, 255, 0);
    --color-feedback-negative-subtle-foreground: #8b0000;
    --color-feedback-negative-subtle-foreground-variant: #212121;
    --color-feedback-negative-subtlest-background: rgba(255, 255, 255, 0);
    --color-feedback-negative-subtlest-background-variant: #ffffff;
    --color-feedback-negative-subtlest-border: #d73737;
    --color-feedback-negative-subtlest-foreground: #d73737;
    --color-feedback-negative-subtlest-foreground-variant: #3a3a3a;
    --color-feedback-positive-background: #3e8500;
    --color-feedback-positive-border: rgba(255, 255, 255, 0);
    --color-feedback-positive-foreground: #ffffff;
    --color-feedback-positive-subtle-background: #e3f1cc;
    --color-feedback-positive-subtle-border: #3e8500;
    --color-feedback-positive-subtle-foreground: #0b5200;
    --color-feedback-positive-subtlest-background: rgba(255, 255, 255, 0);
    --color-feedback-positive-subtlest-background-variant: #ffffff;
    --color-feedback-positive-subtlest-border: #3e8500;
    --color-feedback-positive-subtlest-border-variant: #878787;
    --color-feedback-positive-subtlest-border-variant-2: rgba(255, 255, 255, 0);
    --color-feedback-positive-subtlest-foreground: #3e8500;
    --color-feedback-positive-subtlest-foreground-variant: #212121;
    --color-information-general-background: #804db3;
    --color-information-general-border: rgba(255, 255, 255, 0);
    --color-information-general-foreground: #ffffff;
    --color-information-general-subtle-background: #ebe0f5;
    --color-information-general-subtle-border: #4d1a80;
    --color-information-general-subtle-foreground: #330066;
    --color-information-general-subtlest-background: rgba(255, 255, 255, 0);;
    --color-information-general-subtlest-border: #804DB3;
    --color-information-general-subtlest-foreground: #804DB3;
    --color-information-general-subtlest-foreground-variant: #212121;
}

/* --small-max-viewport */
@media (min-width: 414px) and (max-width: 767px) {
    html {
        --content-gap-size: 4vw;
        --fd-app-header-logo-height: 33px;
        --fd-app-header-height: 64px;
    }
}

/* --medium-viewport */
@media (min-width: 768px) and (max-width: 1219px) {
    html {
        --headline-content-gap-size: 20px;
        --content-wrapper-max-width: 830px;
        --fd-app-header-logo-height: 33px;
        --fd-app-header-height: 64px;
    }
}

/* --large-viewport */
@media (min-width: 1220px) {
    html {
        --content-wrapper-max-width: 1200px;
        --main-section-width: 830px;
        --main-aside-width: 330px;
        --headline-content-gap-size: 30px;
        --fd-app-header-logo-height: 43px;
        --fd-app-header-height: 80px;
    }
}

/* --medium-viewport and --large-viewport combined */
@media (min-width: 768px) {
    html {
        --content-gap-size: 30px;
        --vertical-gap-size: 20px;
    }
}

html {
    font-size: var(--font-size-base);
    font-family: var(--font-family-1);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    background: var(--color-greyscale-200);
    /* Fixes the auto font-size adjustments on ios devices */
    --webkit-text-size-adjust: 100%;
}

/* Hide tracking pixel so there's no unwanted border at the bottom of the page. */
img[src="//a.clicktripz.com/api/advertisers/v1/prof?advertiserID=455&format=image"] {
    display: none;
}

@font-face {
    font-family: "Hind";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Hind Regular"), local("Hind-Regular"), url("https://media.billigfluege.de/fonts/hind/hind-v16-latin-regular.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Hind";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("https://media.billigfluege.de/fonts/hind/hind-v16-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Hind";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local("Hind SemiBold"), local("Hind-SemiBold"), url("https://media.billigfluege.de/fonts/hind/hind-v16-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}