@charset "UTF-8";
/* Document
 * ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 */
:where(html) {
  line-height: 1.15; /* 1 */
}

/* Sections
 * ========================================================================== */
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */
:where(h1) {
  font-size: 2em;
  margin-block-end: 0.67em;
  margin-block-start: 0.67em;
}

/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin-block-end: 0;
  margin-block-start: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Correct the inheritance of border color in Firefox.
 */
:where(hr) {
  box-sizing: content-box; /* 1 */
  color: inherit; /* 2 */
  height: 0; /* 1 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Safari.
 */
:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
:where(b, strong) {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
:where(small) {
  font-size: 80%;
}

/* Tabular data
 * ========================================================================== */
/**
 * 1. Correct table border color in Chrome, Edge, and Safari.
 * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */
:where(table) {
  border-color: currentColor; /* 1 */
  text-indent: 0; /* 2 */
}

/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
:where(button, input, select) {
  margin: 0;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */
:where(button) {
  text-transform: none;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */
:where(button, input:is([type=button i], [type=reset i], [type=submit i])) {
  -webkit-appearance: button;
}

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
:where(progress) {
  vertical-align: baseline;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */
:where(select) {
  text-transform: none;
}

/**
 * Remove the margin in Firefox and Safari.
 */
:where(textarea) {
  margin: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */
:where(input[type=search i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */
:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */
:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */
:where(:-moz-ui-invalid) {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */
/*
 * Add the correct styles in Safari.
 */
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */
:where(summary) {
  display: list-item;
}

/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height*/
/* Use fixed spacings for all kind of distances (margin, padding, ...) */
/* The primary use-case for responsive spacings are
paddings/gaps in an application e.g. the <main> should have a responsive padding. */
:root, [data-variant=interactive]:root {
  --db-current-base-color: var(--db-neutral-enabled,
  #646973);
  --db-current-color: var(--db-neutral-on-bg-enabled, #242629);
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent	var(--db-bg-transparent, 0%),
  	var(--db-neutral-bg-enabled, #ffffff)
  );
  --db-current-element-color: var(--db-neutral-element-enabled, #646973);
  --db-current-border-color: var(--db-neutral-border-enabled, rgba(100, 105, 115, 0.64));
  --db-current-border-weak-color: var(--db-neutral-border-weak-enabled, rgba(100, 105, 115, 0.32));
}

:root, [data-variant=interactive]:root {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
[data-variant=interactive]:enabled:hover:root {
  --db-bg-transparent: 84%;
}
[data-variant=interactive]:enabled:active:root {
  --db-bg-transparent: 68%;
}
@font-face {
  font-family: "DB Screen Head";
  font-style: normal;
  font-weight: 300;
  src: local("DB Screen Head Light"), local(DB Screen Head), local(DB Head Light), url("../assets/fonts/dbscreenhead-light.woff2") format("woff2");
}
@font-face {
  font-family: "DB Screen Head";
  font-style: normal;
  font-weight: 900;
  src: local(DB Screen Head Black), local(DB Head Black), url("../assets/fonts/dbscreenhead-black.woff2") format("woff2");
}
@font-face {
  font-family: "DB Screen Sans";
  font-style: normal;
  font-weight: 400;
  src: local("DB Screen Sans Regular"), local(DB Screen Sans), local(DB Sans), url("../assets/fonts/dbscreensans-regular.woff2") format("woff2");
}
@font-face {
  font-family: "DB Screen Sans";
  font-style: normal;
  font-weight: 700;
  src: local(DB Screen Sans Bold), local(DB Sans Bold), url("../assets/fonts/dbscreensans-bold.woff2") format("woff2");
}
@font-face {
  font-family: "DB Screen Sans Digital";
  font-style: normal;
  font-weight: 400;
  src: local("DB Screen Sans Digital Regular"), local(DB Screen Sans Digital), local(DB Sans Digital), url("../assets/fonts/dbscreensans-digitalregular.woff2") format("woff2");
}
.db-ui-regular,
[data-tonality=regular], :root .app-canvas, :root:not(:has(.app-canvas)) {
  --db-type-headline-font-size-3xl: 2rem;
  --db-type-headline-line-height-3xl: 1.25;
  --db-type-headline-font-size-2xl: 2rem;
  --db-type-headline-line-height-2xl: 1.25;
  --db-type-headline-font-size-xl: 2rem;
  --db-type-headline-line-height-xl: 1.25;
  --db-type-headline-font-size-lg: 1.75rem;
  --db-type-headline-line-height-lg: 1.1428571429;
  --db-type-headline-font-size-md: 1.5rem;
  --db-type-headline-line-height-md: 1.1666666667;
  --db-type-headline-font-size-sm: 1.25rem;
  --db-type-headline-line-height-sm: 1.2;
  --db-type-headline-font-size-2xs: 0.875rem;
  --db-type-headline-line-height-2xs: 1.1428571429;
  --db-type-headline-font-size-3xs: 0.875rem;
  --db-type-headline-line-height-3xs: 1.1428571429;
  --db-type-headline-font-size-xs: 1rem;
  --db-type-headline-line-height-xs: 1.25;
}
@media only screen and (min-width: 768px) {
  .db-ui-regular,
  [data-tonality=regular], :root .app-canvas, :root:not(:has(.app-canvas)) {
    --db-type-headline-font-size-3xl: 3rem;
    --db-type-headline-line-height-3xl: 1.3333333333;
    --db-type-headline-font-size-2xl: 3rem;
    --db-type-headline-line-height-2xl: 1.3333333333;
    --db-type-headline-font-size-xl: 2.5rem;
    --db-type-headline-line-height-xl: 1.2;
    --db-type-headline-font-size-lg: 2rem;
    --db-type-headline-line-height-lg: 1.25;
    --db-type-headline-font-size-md: 1.75rem;
    --db-type-headline-line-height-md: 1.1428571429;
    --db-type-headline-font-size-sm: 1.5rem;
    --db-type-headline-line-height-sm: 1.1666666667;
    --db-type-headline-font-size-2xs: 1rem;
    --db-type-headline-line-height-2xs: 1.25;
    --db-type-headline-font-size-3xs: 1rem;
    --db-type-headline-line-height-3xs: 1.25;
    --db-type-headline-font-size-xs: 1.25rem;
    --db-type-headline-line-height-xs: 1.2;
  }
}
@media only screen and (min-width: 1024px) {
  .db-ui-regular,
  [data-tonality=regular], :root .app-canvas, :root:not(:has(.app-canvas)) {
    --db-type-headline-font-size-3xl: 5rem;
    --db-type-headline-line-height-3xl: 1.2;
    --db-type-headline-font-size-2xl: 4rem;
    --db-type-headline-line-height-2xl: 1.25;
    --db-type-headline-font-size-xl: 3rem;
    --db-type-headline-line-height-xl: 1.3333333333;
    --db-type-headline-font-size-lg: 2.5rem;
    --db-type-headline-line-height-lg: 1.2;
    --db-type-headline-font-size-md: 2rem;
    --db-type-headline-line-height-md: 1.25;
    --db-type-headline-font-size-sm: 1.75rem;
    --db-type-headline-line-height-sm: 1.1428571429;
    --db-type-headline-font-size-2xs: 1.25rem;
    --db-type-headline-line-height-2xs: 1.2;
    --db-type-headline-font-size-3xs: 1rem;
    --db-type-headline-line-height-3xs: 1.25;
    --db-type-headline-font-size-xs: 1.5rem;
    --db-type-headline-line-height-xs: 1.1666666667;
  }
}

.db-ui-regular,
[data-tonality=regular], :root .app-canvas, :root:not(:has(.app-canvas)) {
  --db-type-body-font-size-lg: 1.25rem;
  --db-type-body-line-height-lg: 1.4;
  --db-base-icon-weight-lg: 24;
  --db-base-icon-font-size-lg: 1.75rem;
  --db-type-body-font-size-xl: 1.25rem;
  --db-type-body-line-height-xl: 1.4;
  --db-base-icon-weight-xl: 24;
  --db-base-icon-font-size-xl: 1.75rem;
  --db-type-body-font-size-2xl: 1.25rem;
  --db-type-body-line-height-2xl: 1.4;
  --db-base-icon-weight-2xl: 24;
  --db-base-icon-font-size-2xl: 1.75rem;
  --db-type-body-font-size-md: 1rem;
  --db-type-body-line-height-md: 1.5;
  --db-base-icon-weight-md: 24;
  --db-base-icon-font-size-md: 1.5rem;
  --db-type-body-font-size-sm: 0.875rem;
  --db-type-body-line-height-sm: 1.4285714286;
  --db-base-icon-weight-sm: 20;
  --db-base-icon-font-size-sm: 1.25rem;
  --db-type-body-font-size-2xs: 0.625rem;
  --db-type-body-line-height-2xs: 1.4;
  --db-base-icon-weight-2xs: 16;
  --db-base-icon-font-size-2xs: 0.875rem;
  --db-type-body-font-size-xs: 0.75rem;
  --db-type-body-line-height-xs: 1.3333333333;
  --db-base-icon-weight-xs: 16;
  --db-base-icon-font-size-xs: 1rem;
}
@media only screen and (min-width: 768px) {
  .db-ui-regular,
  [data-tonality=regular], :root .app-canvas, :root:not(:has(.app-canvas)) {
    --db-type-body-font-size-lg: 1.25rem;
    --db-type-body-line-height-lg: 1.4;
    --db-base-icon-weight-lg: 24;
    --db-base-icon-font-size-lg: 1.75rem;
    --db-type-body-font-size-xl: 1.5rem;
    --db-type-body-line-height-xl: 1.3333333333;
    --db-base-icon-weight-xl: 32;
    --db-base-icon-font-size-xl: 2rem;
    --db-type-body-font-size-2xl: 1.75rem;
    --db-type-body-line-height-2xl: 1.4285714286;
    --db-base-icon-weight-2xl: 32;
    --db-base-icon-font-size-2xl: 2.5rem;
    --db-type-body-font-size-md: 1rem;
    --db-type-body-line-height-md: 1.5;
    --db-base-icon-weight-md: 24;
    --db-base-icon-font-size-md: 1.5rem;
    --db-type-body-font-size-sm: 0.875rem;
    --db-type-body-line-height-sm: 1.4285714286;
    --db-base-icon-weight-sm: 20;
    --db-base-icon-font-size-sm: 1.25rem;
    --db-type-body-font-size-2xs: 0.625rem;
    --db-type-body-line-height-2xs: 1.4;
    --db-base-icon-weight-2xs: 16;
    --db-base-icon-font-size-2xs: 0.875rem;
    --db-type-body-font-size-xs: 0.75rem;
    --db-type-body-line-height-xs: 1.3333333333;
    --db-base-icon-weight-xs: 16;
    --db-base-icon-font-size-xs: 1rem;
  }
}
@media only screen and (min-width: 1024px) {
  .db-ui-regular,
  [data-tonality=regular], :root .app-canvas, :root:not(:has(.app-canvas)) {
    --db-type-body-font-size-lg: 1.25rem;
    --db-type-body-line-height-lg: 1.4;
    --db-base-icon-weight-lg: 24;
    --db-base-icon-font-size-lg: 1.75rem;
    --db-type-body-font-size-xl: 1.5rem;
    --db-type-body-line-height-xl: 1.3333333333;
    --db-base-icon-weight-xl: 32;
    --db-base-icon-font-size-xl: 2rem;
    --db-type-body-font-size-2xl: 1.75rem;
    --db-type-body-line-height-2xl: 1.4285714286;
    --db-base-icon-weight-2xl: 32;
    --db-base-icon-font-size-2xl: 2.5rem;
    --db-type-body-font-size-md: 1rem;
    --db-type-body-line-height-md: 1.5;
    --db-base-icon-weight-md: 24;
    --db-base-icon-font-size-md: 1.5rem;
    --db-type-body-font-size-sm: 0.875rem;
    --db-type-body-line-height-sm: 1.4285714286;
    --db-base-icon-weight-sm: 20;
    --db-base-icon-font-size-sm: 1.25rem;
    --db-type-body-font-size-2xs: 0.625rem;
    --db-type-body-line-height-2xs: 1.4;
    --db-base-icon-weight-2xs: 16;
    --db-base-icon-font-size-2xs: 0.875rem;
    --db-type-body-font-size-xs: 0.75rem;
    --db-type-body-line-height-xs: 1.3333333333;
    --db-base-icon-weight-xs: 16;
    --db-base-icon-font-size-xs: 1rem;
  }
}

.db-ui-functional,
[data-tonality=functional] {
  --db-type-body-font-size-lg: 1rem;
  --db-type-body-line-height-lg: 1.5;
  --db-base-icon-weight-lg: 24;
  --db-base-icon-font-size-lg: 1.5rem;
  --db-type-body-font-size-md: 0.875rem;
  --db-type-body-line-height-md: 1.4285714286;
  --db-base-icon-weight-md: 20;
  --db-base-icon-font-size-md: 1.25rem;
  --db-type-body-font-size-sm: 0.75rem;
  --db-type-body-line-height-sm: 1.3333333333;
  --db-base-icon-weight-sm: 16;
  --db-base-icon-font-size-sm: 1rem;
  --db-type-body-font-size-xl: 1rem;
  --db-type-body-line-height-xl: 1.5;
  --db-base-icon-weight-xl: 24;
  --db-base-icon-font-size-xl: 1.5rem;
  --db-type-body-font-size-xs: 0.625rem;
  --db-type-body-line-height-xs: 1.4;
  --db-base-icon-weight-xs: 16;
  --db-base-icon-font-size-xs: 0.875rem;
  --db-type-body-font-size-2xl: 1rem;
  --db-type-body-line-height-2xl: 1.5;
  --db-base-icon-weight-2xl: 24;
  --db-base-icon-font-size-2xl: 1.5rem;
  --db-type-body-font-size-2xs: 0.5rem;
  --db-type-body-line-height-2xs: 1.5;
  --db-base-icon-weight-2xs: 16;
  --db-base-icon-font-size-2xs: 0.75rem;
}
@media only screen and (min-width: 768px) {
  .db-ui-functional,
  [data-tonality=functional] {
    --db-type-body-font-size-lg: 1rem;
    --db-type-body-line-height-lg: 1.5;
    --db-base-icon-weight-lg: 24;
    --db-base-icon-font-size-lg: 1.5rem;
    --db-type-body-font-size-md: 0.875rem;
    --db-type-body-line-height-md: 1.4285714286;
    --db-base-icon-weight-md: 20;
    --db-base-icon-font-size-md: 1.25rem;
    --db-type-body-font-size-sm: 0.75rem;
    --db-type-body-line-height-sm: 1.3333333333;
    --db-base-icon-weight-sm: 16;
    --db-base-icon-font-size-sm: 1rem;
    --db-type-body-font-size-xl: 1.25rem;
    --db-type-body-line-height-xl: 1.4;
    --db-base-icon-weight-xl: 24;
    --db-base-icon-font-size-xl: 1.75rem;
    --db-type-body-font-size-xs: 0.625rem;
    --db-type-body-line-height-xs: 1.4;
    --db-base-icon-weight-xs: 16;
    --db-base-icon-font-size-xs: 0.875rem;
    --db-type-body-font-size-2xl: 1.5rem;
    --db-type-body-line-height-2xl: 1.3333333333;
    --db-base-icon-weight-2xl: 32;
    --db-base-icon-font-size-2xl: 2rem;
    --db-type-body-font-size-2xs: 0.5rem;
    --db-type-body-line-height-2xs: 1.5;
    --db-base-icon-weight-2xs: 16;
    --db-base-icon-font-size-2xs: 0.75rem;
  }
}
@media only screen and (min-width: 1024px) {
  .db-ui-functional,
  [data-tonality=functional] {
    --db-type-body-font-size-lg: 1rem;
    --db-type-body-line-height-lg: 1.5;
    --db-base-icon-weight-lg: 24;
    --db-base-icon-font-size-lg: 1.5rem;
    --db-type-body-font-size-md: 0.875rem;
    --db-type-body-line-height-md: 1.4285714286;
    --db-base-icon-weight-md: 20;
    --db-base-icon-font-size-md: 1.25rem;
    --db-type-body-font-size-sm: 0.75rem;
    --db-type-body-line-height-sm: 1.3333333333;
    --db-base-icon-weight-sm: 16;
    --db-base-icon-font-size-sm: 1rem;
    --db-type-body-font-size-xl: 1.25rem;
    --db-type-body-line-height-xl: 1.4;
    --db-base-icon-weight-xl: 24;
    --db-base-icon-font-size-xl: 1.75rem;
    --db-type-body-font-size-xs: 0.625rem;
    --db-type-body-line-height-xs: 1.4;
    --db-base-icon-weight-xs: 16;
    --db-base-icon-font-size-xs: 0.875rem;
    --db-type-body-font-size-2xl: 1.5rem;
    --db-type-body-line-height-2xl: 1.3333333333;
    --db-base-icon-weight-2xl: 32;
    --db-base-icon-font-size-2xl: 2rem;
    --db-type-body-font-size-2xs: 0.5rem;
    --db-type-body-line-height-2xs: 1.5;
    --db-base-icon-weight-2xs: 16;
    --db-base-icon-font-size-2xs: 0.75rem;
  }
}

.db-ui-functional,
[data-tonality=functional] {
  --db-type-headline-font-size-lg: 1.5rem;
  --db-type-headline-line-height-lg: 1.1666666667;
  --db-type-headline-font-size-md: 1.25rem;
  --db-type-headline-line-height-md: 1.2;
  --db-type-headline-font-size-sm: 1rem;
  --db-type-headline-line-height-sm: 1.25;
  --db-type-headline-font-size-xl: 1.75rem;
  --db-type-headline-line-height-xl: 1.1428571429;
  --db-type-headline-font-size-xs: 0.875rem;
  --db-type-headline-line-height-xs: 1.1428571429;
  --db-type-headline-font-size-2xl: 1.75rem;
  --db-type-headline-line-height-2xl: 1.1428571429;
  --db-type-headline-font-size-2xs: 0.875rem;
  --db-type-headline-line-height-2xs: 1.1428571429;
  --db-type-headline-font-size-3xl: 1.75rem;
  --db-type-headline-line-height-3xl: 1.1428571429;
  --db-type-headline-font-size-3xs: 0.875rem;
  --db-type-headline-line-height-3xs: 1.1428571429;
}
@media only screen and (min-width: 768px) {
  .db-ui-functional,
  [data-tonality=functional] {
    --db-type-headline-font-size-lg: 1.75rem;
    --db-type-headline-line-height-lg: 1.1428571429;
    --db-type-headline-font-size-md: 1.5rem;
    --db-type-headline-line-height-md: 1.1666666667;
    --db-type-headline-font-size-sm: 1.25rem;
    --db-type-headline-line-height-sm: 1.2;
    --db-type-headline-font-size-xl: 2rem;
    --db-type-headline-line-height-xl: 1.25;
    --db-type-headline-font-size-xs: 1rem;
    --db-type-headline-line-height-xs: 1.25;
    --db-type-headline-font-size-2xl: 2rem;
    --db-type-headline-line-height-2xl: 1.25;
    --db-type-headline-font-size-2xs: 0.875rem;
    --db-type-headline-line-height-2xs: 1.1428571429;
    --db-type-headline-font-size-3xl: 2rem;
    --db-type-headline-line-height-3xl: 1.25;
    --db-type-headline-font-size-3xs: 0.875rem;
    --db-type-headline-line-height-3xs: 1.1428571429;
  }
}
@media only screen and (min-width: 1024px) {
  .db-ui-functional,
  [data-tonality=functional] {
    --db-type-headline-font-size-lg: 1.75rem;
    --db-type-headline-line-height-lg: 1.1428571429;
    --db-type-headline-font-size-md: 1.5rem;
    --db-type-headline-line-height-md: 1.1666666667;
    --db-type-headline-font-size-sm: 1.25rem;
    --db-type-headline-line-height-sm: 1.2;
    --db-type-headline-font-size-xl: 2rem;
    --db-type-headline-line-height-xl: 1.25;
    --db-type-headline-font-size-xs: 1rem;
    --db-type-headline-line-height-xs: 1.25;
    --db-type-headline-font-size-2xl: 2.5rem;
    --db-type-headline-line-height-2xl: 1.2;
    --db-type-headline-font-size-2xs: 0.875rem;
    --db-type-headline-line-height-2xs: 1.1428571429;
    --db-type-headline-font-size-3xl: 2.5rem;
    --db-type-headline-line-height-3xl: 1.2;
    --db-type-headline-font-size-3xs: 0.875rem;
    --db-type-headline-line-height-3xs: 1.1428571429;
  }
}

.db-ui-expressive,
[data-tonality=expressive] {
  --db-type-body-font-size-lg: 1.5rem;
  --db-type-body-line-height-lg: 1.3333333333;
  --db-base-icon-weight-lg: 32;
  --db-base-icon-font-size-lg: 2rem;
  --db-type-body-font-size-md: 1.25rem;
  --db-type-body-line-height-md: 1.4;
  --db-base-icon-weight-md: 24;
  --db-base-icon-font-size-md: 1.75rem;
  --db-type-body-font-size-sm: 1rem;
  --db-type-body-line-height-sm: 1.5;
  --db-base-icon-weight-sm: 24;
  --db-base-icon-font-size-sm: 1.5rem;
  --db-type-body-font-size-xl: 1.5rem;
  --db-type-body-line-height-xl: 1.3333333333;
  --db-base-icon-weight-xl: 32;
  --db-base-icon-font-size-xl: 2rem;
  --db-type-body-font-size-xs: 0.875rem;
  --db-type-body-line-height-xs: 1.4285714286;
  --db-base-icon-weight-xs: 20;
  --db-base-icon-font-size-xs: 1.25rem;
  --db-type-body-font-size-2xl: 1.5rem;
  --db-type-body-line-height-2xl: 1.3333333333;
  --db-base-icon-weight-2xl: 32;
  --db-base-icon-font-size-2xl: 2rem;
  --db-type-body-font-size-2xs: 0.75rem;
  --db-type-body-line-height-2xs: 1.3333333333;
  --db-base-icon-weight-2xs: 16;
  --db-base-icon-font-size-2xs: 1rem;
}
@media only screen and (min-width: 768px) {
  .db-ui-expressive,
  [data-tonality=expressive] {
    --db-type-body-font-size-lg: 1.5rem;
    --db-type-body-line-height-lg: 1.3333333333;
    --db-base-icon-weight-lg: 32;
    --db-base-icon-font-size-lg: 2rem;
    --db-type-body-font-size-md: 1.25rem;
    --db-type-body-line-height-md: 1.4;
    --db-base-icon-weight-md: 24;
    --db-base-icon-font-size-md: 1.75rem;
    --db-type-body-font-size-sm: 1rem;
    --db-type-body-line-height-sm: 1.5;
    --db-base-icon-weight-sm: 24;
    --db-base-icon-font-size-sm: 1.5rem;
    --db-type-body-font-size-xl: 1.75rem;
    --db-type-body-line-height-xl: 1.4285714286;
    --db-base-icon-weight-xl: 32;
    --db-base-icon-font-size-xl: 2.5rem;
    --db-type-body-font-size-xs: 0.875rem;
    --db-type-body-line-height-xs: 1.4285714286;
    --db-base-icon-weight-xs: 20;
    --db-base-icon-font-size-xs: 1.25rem;
    --db-type-body-font-size-2xl: 2rem;
    --db-type-body-line-height-2xl: 1.5;
    --db-base-icon-weight-2xl: 32;
    --db-base-icon-font-size-2xl: 3rem;
    --db-type-body-font-size-2xs: 0.75rem;
    --db-type-body-line-height-2xs: 1.3333333333;
    --db-base-icon-weight-2xs: 16;
    --db-base-icon-font-size-2xs: 1rem;
  }
}
@media only screen and (min-width: 1024px) {
  .db-ui-expressive,
  [data-tonality=expressive] {
    --db-type-body-font-size-lg: 1.5rem;
    --db-type-body-line-height-lg: 1.3333333333;
    --db-base-icon-weight-lg: 32;
    --db-base-icon-font-size-lg: 2rem;
    --db-type-body-font-size-md: 1.25rem;
    --db-type-body-line-height-md: 1.4;
    --db-base-icon-weight-md: 24;
    --db-base-icon-font-size-md: 1.75rem;
    --db-type-body-font-size-sm: 1rem;
    --db-type-body-line-height-sm: 1.5;
    --db-base-icon-weight-sm: 24;
    --db-base-icon-font-size-sm: 1.5rem;
    --db-type-body-font-size-xl: 1.75rem;
    --db-type-body-line-height-xl: 1.4285714286;
    --db-base-icon-weight-xl: 32;
    --db-base-icon-font-size-xl: 2.5rem;
    --db-type-body-font-size-xs: 0.875rem;
    --db-type-body-line-height-xs: 1.4285714286;
    --db-base-icon-weight-xs: 20;
    --db-base-icon-font-size-xs: 1.25rem;
    --db-type-body-font-size-2xl: 2rem;
    --db-type-body-line-height-2xl: 1.5;
    --db-base-icon-weight-2xl: 32;
    --db-base-icon-font-size-2xl: 3rem;
    --db-type-body-font-size-2xs: 0.75rem;
    --db-type-body-line-height-2xs: 1.3333333333;
    --db-base-icon-weight-2xs: 16;
    --db-base-icon-font-size-2xs: 1rem;
  }
}

.db-ui-expressive,
[data-tonality=expressive] {
  --db-type-headline-font-size-lg: 2rem;
  --db-type-headline-line-height-lg: 1.25;
  --db-type-headline-font-size-md: 1.75rem;
  --db-type-headline-line-height-md: 1.1428571429;
  --db-type-headline-font-size-sm: 1.5rem;
  --db-type-headline-line-height-sm: 1.1666666667;
  --db-type-headline-font-size-xl: 2.5rem;
  --db-type-headline-line-height-xl: 1.2;
  --db-type-headline-font-size-xs: 1.25rem;
  --db-type-headline-line-height-xs: 1.2;
  --db-type-headline-font-size-2xl: 2.5rem;
  --db-type-headline-line-height-2xl: 1.2;
  --db-type-headline-font-size-2xs: 1rem;
  --db-type-headline-line-height-2xs: 1.25;
  --db-type-headline-font-size-3xl: 2.5rem;
  --db-type-headline-line-height-3xl: 1.2;
  --db-type-headline-font-size-3xs: 1rem;
  --db-type-headline-line-height-3xs: 1.25;
}
@media only screen and (min-width: 768px) {
  .db-ui-expressive,
  [data-tonality=expressive] {
    --db-type-headline-font-size-lg: 2.5rem;
    --db-type-headline-line-height-lg: 1.2;
    --db-type-headline-font-size-md: 2rem;
    --db-type-headline-line-height-md: 1.25;
    --db-type-headline-font-size-sm: 1.75rem;
    --db-type-headline-line-height-sm: 1.1428571429;
    --db-type-headline-font-size-xl: 3rem;
    --db-type-headline-line-height-xl: 1.3333333333;
    --db-type-headline-font-size-xs: 1.5rem;
    --db-type-headline-line-height-xs: 1.1666666667;
    --db-type-headline-font-size-2xl: 4rem;
    --db-type-headline-line-height-2xl: 1.25;
    --db-type-headline-font-size-2xs: 1.25rem;
    --db-type-headline-line-height-2xs: 1.2;
    --db-type-headline-font-size-3xl: 5rem;
    --db-type-headline-line-height-3xl: 1.2;
    --db-type-headline-font-size-3xs: 1.25rem;
    --db-type-headline-line-height-3xs: 1.2;
  }
}
@media only screen and (min-width: 1024px) {
  .db-ui-expressive,
  [data-tonality=expressive] {
    --db-type-headline-font-size-lg: 3rem;
    --db-type-headline-line-height-lg: 1.3333333333;
    --db-type-headline-font-size-md: 2.5rem;
    --db-type-headline-line-height-md: 1.2;
    --db-type-headline-font-size-sm: 2rem;
    --db-type-headline-line-height-sm: 1.25;
    --db-type-headline-font-size-xl: 4rem;
    --db-type-headline-line-height-xl: 1.25;
    --db-type-headline-font-size-xs: 1.75rem;
    --db-type-headline-line-height-xs: 1.1428571429;
    --db-type-headline-font-size-2xl: 5rem;
    --db-type-headline-line-height-2xl: 1.2;
    --db-type-headline-font-size-2xs: 1.5rem;
    --db-type-headline-line-height-2xs: 1.1666666667;
    --db-type-headline-font-size-3xl: 6rem;
    --db-type-headline-line-height-3xl: 1.25;
    --db-type-headline-font-size-3xs: 1.25rem;
    --db-type-headline-line-height-3xs: 1.2;
  }
}

.db-ui-regular,
[data-tonality=regular], :root .app-canvas, :root:not(:has(.app-canvas)) {
  --db-sizing-xs: 1rem;
  --db-sizing-sm: 1.5rem;
  --db-sizing-md: 2.5rem;
  --db-sizing-lg: 4rem;
  --db-sizing-xl: 6rem;
  --db-sizing-2xl: 10rem;
  --db-sizing-3xl: 15rem;
  --db-spacing-fixed-3xs: 0.125rem;
  --db-spacing-fixed-2xs: 0.25rem;
  --db-spacing-fixed-xs: 0.5rem;
  --db-spacing-fixed-sm: 0.75rem;
  --db-spacing-fixed-md: 1rem;
  --db-spacing-fixed-lg: 1.5rem;
  --db-spacing-fixed-xl: 2rem;
  --db-spacing-responsive-xs: 1.5rem;
  --db-spacing-responsive-sm: 2rem;
  --db-spacing-responsive-md: 3rem;
  --db-spacing-responsive-lg: 5rem;
  --db-spacing-responsive-xl: 7.5rem;
  --db-input-label-scale: 0.65;
  --db-input-focus-opacity: 1;
}
@media only screen and (min-width: 768px) {
  .db-ui-regular,
  [data-tonality=regular], :root .app-canvas, :root:not(:has(.app-canvas)) {
    --db-spacing-responsive-xs: 1.75rem;
    --db-spacing-responsive-sm: 2.5rem;
    --db-spacing-responsive-md: 4rem;
    --db-spacing-responsive-lg: 6rem;
    --db-spacing-responsive-xl: 10rem;
  }
}
@media only screen and (min-width: 1024px) {
  .db-ui-regular,
  [data-tonality=regular], :root .app-canvas, :root:not(:has(.app-canvas)) {
    --db-spacing-responsive-xs: 2rem;
    --db-spacing-responsive-sm: 3rem;
    --db-spacing-responsive-md: 5rem;
    --db-spacing-responsive-lg: 7.5rem;
    --db-spacing-responsive-xl: 15rem;
  }
}

.db-ui-functional,
[data-tonality=functional] {
  --db-sizing-xs: 0.875rem;
  --db-sizing-sm: 1.25rem;
  --db-sizing-md: 2rem;
  --db-sizing-lg: 3rem;
  --db-sizing-xl: 5rem;
  --db-sizing-2xl: 7.5rem;
  --db-sizing-3xl: 10rem;
  --db-spacing-fixed-3xs: 0.125rem;
  --db-spacing-fixed-2xs: 0.25rem;
  --db-spacing-fixed-xs: 0.375rem;
  --db-spacing-fixed-sm: 0.5rem;
  --db-spacing-fixed-md: 0.75rem;
  --db-spacing-fixed-lg: 1rem;
  --db-spacing-fixed-xl: 1.5rem;
  --db-spacing-responsive-xs: 1.25rem;
  --db-spacing-responsive-sm: 1.75rem;
  --db-spacing-responsive-md: 2.5rem;
  --db-spacing-responsive-lg: 4rem;
  --db-spacing-responsive-xl: 6rem;
  --db-input-label-scale: 1;
  --db-input-focus-opacity: 0;
}
@media only screen and (min-width: 768px) {
  .db-ui-functional,
  [data-tonality=functional] {
    --db-spacing-responsive-xs: 1.5rem;
    --db-spacing-responsive-sm: 2rem;
    --db-spacing-responsive-md: 3rem;
    --db-spacing-responsive-lg: 5rem;
    --db-spacing-responsive-xl: 7.5rem;
  }
}
@media only screen and (min-width: 1024px) {
  .db-ui-functional,
  [data-tonality=functional] {
    --db-spacing-responsive-xs: 1.75rem;
    --db-spacing-responsive-sm: 2.5rem;
    --db-spacing-responsive-md: 4rem;
    --db-spacing-responsive-lg: 6rem;
    --db-spacing-responsive-xl: 10rem;
  }
}

.db-ui-expressive,
[data-tonality=expressive] {
  --db-sizing-xs: 1.25rem;
  --db-sizing-sm: 1.75rem;
  --db-sizing-md: 3rem;
  --db-sizing-lg: 5rem;
  --db-sizing-xl: 7.5rem;
  --db-sizing-2xl: 15rem;
  --db-sizing-3xl: 30rem;
  --db-spacing-fixed-3xs: 0.25rem;
  --db-spacing-fixed-2xs: 0.5rem;
  --db-spacing-fixed-xs: 0.75rem;
  --db-spacing-fixed-sm: 1rem;
  --db-spacing-fixed-md: 1.5rem;
  --db-spacing-fixed-lg: 2rem;
  --db-spacing-fixed-xl: 3rem;
  --db-spacing-responsive-xs: 2rem;
  --db-spacing-responsive-sm: 3rem;
  --db-spacing-responsive-md: 5rem;
  --db-spacing-responsive-lg: 7.5rem;
  --db-spacing-responsive-xl: 10rem;
  --db-input-label-scale: 0.55;
  --db-input-focus-opacity: 1;
}
@media only screen and (min-width: 768px) {
  .db-ui-expressive,
  [data-tonality=expressive] {
    --db-spacing-responsive-xs: 2.5rem;
    --db-spacing-responsive-sm: 4rem;
    --db-spacing-responsive-md: 6rem;
    --db-spacing-responsive-lg: 10rem;
    --db-spacing-responsive-xl: 15rem;
  }
}
@media only screen and (min-width: 1024px) {
  .db-ui-expressive,
  [data-tonality=expressive] {
    --db-spacing-responsive-xs: 3rem;
    --db-spacing-responsive-sm: 5rem;
    --db-spacing-responsive-md: 7.5rem;
    --db-spacing-responsive-lg: 15rem;
    --db-spacing-responsive-xl: 30rem;
  }
}

/**
	Generates 3 types of placeholders, e.g:
	- %db-component-variables-md
	- %db-font-size-md
	- %db-overwrite-font-size-md
 */
:root,
.db-ui-expressive,
[data-tonality=expressive],
.db-ui-regular,
[data-tonality=regular],
.db-ui-functional,
[data-tonality=functional], :root .app-canvas, :root:not(:has(.app-canvas)) {
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-icon-weight-md);
  --db-icon-font-size: var(--db-base-icon-font-size-md);
  /* prettier-ignore */
  --db-base-line-height: var(--db-type-body-line-height-md);
  --db-base-font-size: var(--db-type-body-font-size-md);
}

* {
  line-height: var(--db-type-body-line-height-md);
  font-size: var(--db-type-body-font-size-md);
}

small,
code {
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-icon-weight-sm);
  --db-icon-font-size: var(--db-base-icon-font-size-sm);
  /* prettier-ignore */
  --db-base-line-height: var(--db-type-body-line-height-sm);
  --db-base-font-size: var(--db-type-body-font-size-sm);
  line-height: var(--db-type-body-line-height-sm);
  font-size: var(--db-type-body-font-size-sm);
}
small > *,
code > * {
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-icon-weight-sm);
  --db-icon-font-size: var(--db-base-icon-font-size-sm);
  /* prettier-ignore */
  --db-base-line-height: var(--db-type-body-line-height-sm);
  --db-base-font-size: var(--db-type-body-font-size-sm);
  line-height: var(--db-type-body-line-height-sm);
  font-size: var(--db-type-body-font-size-sm);
}

body,
.app-canvas {
  font-family: "DB Screen Sans", Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "DB Screen Head", Helvetica, Arial, sans-serif;
  font-weight: 700;
}
h1[data-variant=light],
h2[data-variant=light],
h3[data-variant=light],
h4[data-variant=light],
h5[data-variant=light],
h6[data-variant=light] {
  font-weight: 300;
}

h1 {
  line-height: var(--db-type-headline-line-height-xl);
  font-size: var(--db-type-headline-font-size-xl);
}

h2 {
  line-height: var(--db-type-headline-line-height-lg);
  font-size: var(--db-type-headline-font-size-lg);
}

h3 {
  line-height: var(--db-type-headline-line-height-md);
  font-size: var(--db-type-headline-font-size-md);
}

h4 {
  line-height: var(--db-type-headline-line-height-sm);
  font-size: var(--db-type-headline-font-size-sm);
}

h5 {
  line-height: var(--db-type-headline-line-height-xs);
  font-size: var(--db-type-headline-font-size-xs);
}

h6 {
  line-height: var(--db-type-headline-line-height-2xs);
  font-size: var(--db-type-headline-font-size-2xs);
}

pre:has(code), code {
  --db-current-base-color: var(
  	--db-neutral-enabled,
  	#646973
  );
  --db-current-color: var(
  	--db-neutral-bg-enabled,
  	#ffffff
  );
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-neutral-on-bg-enabled, #242629)
  );
  --db-current-element-color: var(
  	--db-neutral-element-enabled,
  	#646973
  );
  --db-current-border-color: var(
  	--db-neutral-border-enabled,
  	rgba(100, 105, 115, 0.64)
  );
  --db-current-border-weak-color: var(
  	--db-neutral-border-weak-enabled,
  	rgba(100, 105, 115, 0.32)
  );
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}

:root {
  --db-focus-outline-offset: 1px;
  --db-focus-outline-color: var(--db-informational-enabled, #0087b9);
  --db-focus-outline-size: max(2px, 0.08em);
  --db-disabled-text-opacity: 0.5;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: var(--db-box-sizing, border-box);
}

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

body,
button,
input,
textarea,
summary,
select,
a {
  color: inherit;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

img,
embed,
iframe,
object,
video {
  block-size: auto;
  max-inline-size: 100%;
}

iframe {
  border: 0;
}

:is(a, button, input, textarea, summary, select):focus-visible {
  outline: var(--db-focus-outline-size) var(--db-focus-outline-style, solid) var(--db-focus-outline-color, currentColor);
  outline-offset: var(--db-focus-outline-offset, var(--db-focus-outline-size));
}

:where(ul) {
  list-style-type: "•   ";
}
:where(ul) li::marker {
  color: var --db-primary-enabled, #ec0016;
}

nav ol,
nav ul,
[role=navigation] ol,
[role=navigation] ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

fieldset {
  border: none;
}

pre:has(code) {
  padding: var(--db-spacing-fixed-xs);
}

code {
  padding-block: var(--db-spacing-fixed-2xs);
  padding-inline: var(--db-spacing-fixed-xs);
}

details > *, details > ::before, details > ::after {
  box-sizing: var(--db-box-sizing, border-box);
}

/* TODO: We shouldn't use this variables move them to global to make them themeable */
/* TODO: We should get the variables from UX, and probably want to make those global variables */
[class^=db-],
[class^=db-] *, [class^=db-] ::before,
[class^=db-] ::after {
  transition: outline var(--db-transition-duration-ultra-fast, 0.06s), background-color var(--db-transition-color, 0.3s cubic-bezier(0.15, 0, 0.45, 1)), color var(--db-transition-color, 0.3s cubic-bezier(0.15, 0, 0.45, 1));
}

:root {
  /* This is a MS power apps specific class name */
}
