@charset "UTF-8";
:root {
  --db-current-base-color: var(--db-base-text-enabled);
  --db-current-color: var(--db-base-on-bg-enabled);
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-base-bg-enabled)
  );
  --db-current-element-color: var(--db-base-element-enabled);
  --db-current-border-color: var(--db-base-border-enabled);
  --db-current-border-weak-color: var(
  	--db-base-border-weak-enabled
  );
  --db-focus-box-shadow-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-base-bg-enabled)
  );
}

:root {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
[data-emphasis=weak]:root {
  --db-current-color: var(--db-base-on-bg-weak-enabled);
  color: var(--db-current-color);
}
pre:has(code), code {
  --db-current-color: var(--db-neutral-on-enabled);
  color: var(--db-current-color);
  background-color: var(--db-neutral-text-enabled);
}

blockquote {
  --db-current-base-color: var(--db-neutral-text-enabled);
  --db-current-color: var(--db-neutral-on-bg-enabled);
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-neutral-bg-enabled)
  );
  --db-current-element-color: var(--db-neutral-element-enabled);
  --db-current-border-color: var(--db-neutral-border-enabled);
  --db-current-border-weak-color: var(
  	--db-neutral-border-weak-enabled
  );
  --db-focus-box-shadow-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-neutral-bg-enabled)
  );
}

blockquote {
  color: var(--db-neutral-on-bg-enabled);
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 100%), var(--db-current-base-color));
}
blockquote {
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 92%), var(--db-current-base-color));
}
:root {
  --db-breakpoint-xs: 22.5rem;
  --db-breakpoint-sm: 45rem;
  --db-breakpoint-md: 64rem;
  --db-breakpoint-lg: 90rem;
  --db-breakpoint-xl: 120rem;
}

.db-ui-expressive,
[data-tonality=expressive] {
  --db-type-headline-font-size-xs: var(--db-typography-expressive-mobile-headline-xs-font-size);
  --db-type-headline-line-height-xs: var(--db-typography-expressive-mobile-headline-xs-line-height);
  --db-type-headline-font-size-sm: var(--db-typography-expressive-mobile-headline-sm-font-size);
  --db-type-headline-line-height-sm: var(--db-typography-expressive-mobile-headline-sm-line-height);
  --db-type-headline-font-size-md: var(--db-typography-expressive-mobile-headline-md-font-size);
  --db-type-headline-line-height-md: var(--db-typography-expressive-mobile-headline-md-line-height);
  --db-type-headline-font-size-lg: var(--db-typography-expressive-mobile-headline-lg-font-size);
  --db-type-headline-line-height-lg: var(--db-typography-expressive-mobile-headline-lg-line-height);
  --db-type-headline-font-size-xl: var(--db-typography-expressive-mobile-headline-xl-font-size);
  --db-type-headline-line-height-xl: var(--db-typography-expressive-mobile-headline-xl-line-height);
  --db-type-headline-font-size-2xl: var(--db-typography-expressive-mobile-headline-2xl-font-size);
  --db-type-headline-line-height-2xl: var(--db-typography-expressive-mobile-headline-2xl-line-height);
  --db-type-headline-font-size-3xl: var(--db-typography-expressive-mobile-headline-3xl-font-size);
  --db-type-headline-line-height-3xl: var(--db-typography-expressive-mobile-headline-3xl-line-height);
}
@media screen and (min-width: 45rem) {
  .db-ui-expressive:not([data-force-mobile]),
  [data-tonality=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-ui-expressive,
  [data-force-mobile=false][data-tonality=expressive] {
    --db-type-headline-font-size-xs: var(--db-typography-expressive-tablet-headline-xs-font-size);
    --db-type-headline-line-height-xs: var(--db-typography-expressive-tablet-headline-xs-line-height);
    --db-type-headline-font-size-sm: var(--db-typography-expressive-tablet-headline-sm-font-size);
    --db-type-headline-line-height-sm: var(--db-typography-expressive-tablet-headline-sm-line-height);
    --db-type-headline-font-size-md: var(--db-typography-expressive-tablet-headline-md-font-size);
    --db-type-headline-line-height-md: var(--db-typography-expressive-tablet-headline-md-line-height);
    --db-type-headline-font-size-lg: var(--db-typography-expressive-tablet-headline-lg-font-size);
    --db-type-headline-line-height-lg: var(--db-typography-expressive-tablet-headline-lg-line-height);
    --db-type-headline-font-size-xl: var(--db-typography-expressive-tablet-headline-xl-font-size);
    --db-type-headline-line-height-xl: var(--db-typography-expressive-tablet-headline-xl-line-height);
    --db-type-headline-font-size-2xl: var(--db-typography-expressive-tablet-headline-2xl-font-size);
    --db-type-headline-line-height-2xl: var(--db-typography-expressive-tablet-headline-2xl-line-height);
    --db-type-headline-font-size-3xl: var(--db-typography-expressive-tablet-headline-3xl-font-size);
    --db-type-headline-line-height-3xl: var(--db-typography-expressive-tablet-headline-3xl-line-height);
  }
}
@media screen and (min-width: 64rem) {
  .db-ui-expressive:not([data-force-mobile]),
  [data-tonality=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-ui-expressive,
  [data-force-mobile=false][data-tonality=expressive] {
    --db-type-headline-font-size-xs: var(--db-typography-expressive-desktop-headline-xs-font-size);
    --db-type-headline-line-height-xs: var(--db-typography-expressive-desktop-headline-xs-line-height);
    --db-type-headline-font-size-sm: var(--db-typography-expressive-desktop-headline-sm-font-size);
    --db-type-headline-line-height-sm: var(--db-typography-expressive-desktop-headline-sm-line-height);
    --db-type-headline-font-size-md: var(--db-typography-expressive-desktop-headline-md-font-size);
    --db-type-headline-line-height-md: var(--db-typography-expressive-desktop-headline-md-line-height);
    --db-type-headline-font-size-lg: var(--db-typography-expressive-desktop-headline-lg-font-size);
    --db-type-headline-line-height-lg: var(--db-typography-expressive-desktop-headline-lg-line-height);
    --db-type-headline-font-size-xl: var(--db-typography-expressive-desktop-headline-xl-font-size);
    --db-type-headline-line-height-xl: var(--db-typography-expressive-desktop-headline-xl-line-height);
    --db-type-headline-font-size-2xl: var(--db-typography-expressive-desktop-headline-2xl-font-size);
    --db-type-headline-line-height-2xl: var(--db-typography-expressive-desktop-headline-2xl-line-height);
    --db-type-headline-font-size-3xl: var(--db-typography-expressive-desktop-headline-3xl-font-size);
    --db-type-headline-line-height-3xl: var(--db-typography-expressive-desktop-headline-3xl-line-height);
  }
}

.db-ui-expressive,
[data-tonality=expressive] {
  --db-type-body-font-size-3xs: var(--db-typography-expressive-mobile-body-3xs-font-size);
  --db-type-body-line-height-3xs: var(--db-typography-expressive-mobile-body-3xs-line-height);
  --db-base-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-3xs);
  --db-base-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-3xs);
  --db-type-body-font-size-2xs: var(--db-typography-expressive-mobile-body-2xs-font-size);
  --db-type-body-line-height-2xs: var(--db-typography-expressive-mobile-body-2xs-line-height);
  --db-base-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-2xs);
  --db-base-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-2xs);
  --db-type-body-font-size-xs: var(--db-typography-expressive-mobile-body-xs-font-size);
  --db-type-body-line-height-xs: var(--db-typography-expressive-mobile-body-xs-line-height);
  --db-base-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-xs);
  --db-base-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-xs);
  --db-type-body-font-size-sm: var(--db-typography-expressive-mobile-body-sm-font-size);
  --db-type-body-line-height-sm: var(--db-typography-expressive-mobile-body-sm-line-height);
  --db-base-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-sm);
  --db-base-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-sm);
  --db-type-body-font-size-md: var(--db-typography-expressive-mobile-body-md-font-size);
  --db-type-body-line-height-md: var(--db-typography-expressive-mobile-body-md-line-height);
  --db-base-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-md);
  --db-base-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-md);
  --db-type-body-font-size-lg: var(--db-typography-expressive-mobile-body-lg-font-size);
  --db-type-body-line-height-lg: var(--db-typography-expressive-mobile-body-lg-line-height);
  --db-base-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-lg);
  --db-base-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-lg);
  --db-type-body-font-size-xl: var(--db-typography-expressive-mobile-body-xl-font-size);
  --db-type-body-line-height-xl: var(--db-typography-expressive-mobile-body-xl-line-height);
  --db-base-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-xl);
  --db-base-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-xl);
}
@media screen and (min-width: 45rem) {
  .db-ui-expressive:not([data-force-mobile]),
  [data-tonality=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-ui-expressive,
  [data-force-mobile=false][data-tonality=expressive] {
    --db-type-body-font-size-3xs: var(--db-typography-expressive-tablet-body-3xs-font-size);
    --db-type-body-line-height-3xs: var(--db-typography-expressive-tablet-body-3xs-line-height);
    --db-base-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-3xs);
    --db-base-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-3xs);
    --db-type-body-font-size-2xs: var(--db-typography-expressive-tablet-body-2xs-font-size);
    --db-type-body-line-height-2xs: var(--db-typography-expressive-tablet-body-2xs-line-height);
    --db-base-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-2xs);
    --db-base-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-2xs);
    --db-type-body-font-size-xs: var(--db-typography-expressive-tablet-body-xs-font-size);
    --db-type-body-line-height-xs: var(--db-typography-expressive-tablet-body-xs-line-height);
    --db-base-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-xs);
    --db-base-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-xs);
    --db-type-body-font-size-sm: var(--db-typography-expressive-tablet-body-sm-font-size);
    --db-type-body-line-height-sm: var(--db-typography-expressive-tablet-body-sm-line-height);
    --db-base-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-sm);
    --db-base-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-sm);
    --db-type-body-font-size-md: var(--db-typography-expressive-tablet-body-md-font-size);
    --db-type-body-line-height-md: var(--db-typography-expressive-tablet-body-md-line-height);
    --db-base-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-md);
    --db-base-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-md);
    --db-type-body-font-size-lg: var(--db-typography-expressive-tablet-body-lg-font-size);
    --db-type-body-line-height-lg: var(--db-typography-expressive-tablet-body-lg-line-height);
    --db-base-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-lg);
    --db-base-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-lg);
    --db-type-body-font-size-xl: var(--db-typography-expressive-tablet-body-xl-font-size);
    --db-type-body-line-height-xl: var(--db-typography-expressive-tablet-body-xl-line-height);
    --db-base-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-xl);
    --db-base-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-xl);
  }
}
@media screen and (min-width: 64rem) {
  .db-ui-expressive:not([data-force-mobile]),
  [data-tonality=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-ui-expressive,
  [data-force-mobile=false][data-tonality=expressive] {
    --db-type-body-font-size-3xs: var(--db-typography-expressive-desktop-body-3xs-font-size);
    --db-type-body-line-height-3xs: var(--db-typography-expressive-desktop-body-3xs-line-height);
    --db-base-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-3xs);
    --db-base-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-3xs);
    --db-type-body-font-size-2xs: var(--db-typography-expressive-desktop-body-2xs-font-size);
    --db-type-body-line-height-2xs: var(--db-typography-expressive-desktop-body-2xs-line-height);
    --db-base-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-2xs);
    --db-base-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-2xs);
    --db-type-body-font-size-xs: var(--db-typography-expressive-desktop-body-xs-font-size);
    --db-type-body-line-height-xs: var(--db-typography-expressive-desktop-body-xs-line-height);
    --db-base-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-xs);
    --db-base-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-xs);
    --db-type-body-font-size-sm: var(--db-typography-expressive-desktop-body-sm-font-size);
    --db-type-body-line-height-sm: var(--db-typography-expressive-desktop-body-sm-line-height);
    --db-base-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-sm);
    --db-base-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-sm);
    --db-type-body-font-size-md: var(--db-typography-expressive-desktop-body-md-font-size);
    --db-type-body-line-height-md: var(--db-typography-expressive-desktop-body-md-line-height);
    --db-base-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-md);
    --db-base-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-md);
    --db-type-body-font-size-lg: var(--db-typography-expressive-desktop-body-lg-font-size);
    --db-type-body-line-height-lg: var(--db-typography-expressive-desktop-body-lg-line-height);
    --db-base-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-lg);
    --db-base-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-lg);
    --db-type-body-font-size-xl: var(--db-typography-expressive-desktop-body-xl-font-size);
    --db-type-body-line-height-xl: var(--db-typography-expressive-desktop-body-xl-line-height);
    --db-base-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-xl);
    --db-base-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-xl);
  }
}

:root .app-canvas, :root:not(:has(.app-canvas)), .db-ui-regular,
[data-tonality=regular] {
  --db-type-headline-font-size-xs: var(--db-typography-regular-mobile-headline-xs-font-size);
  --db-type-headline-line-height-xs: var(--db-typography-regular-mobile-headline-xs-line-height);
  --db-type-headline-font-size-sm: var(--db-typography-regular-mobile-headline-sm-font-size);
  --db-type-headline-line-height-sm: var(--db-typography-regular-mobile-headline-sm-line-height);
  --db-type-headline-font-size-md: var(--db-typography-regular-mobile-headline-md-font-size);
  --db-type-headline-line-height-md: var(--db-typography-regular-mobile-headline-md-line-height);
  --db-type-headline-font-size-lg: var(--db-typography-regular-mobile-headline-lg-font-size);
  --db-type-headline-line-height-lg: var(--db-typography-regular-mobile-headline-lg-line-height);
  --db-type-headline-font-size-xl: var(--db-typography-regular-mobile-headline-xl-font-size);
  --db-type-headline-line-height-xl: var(--db-typography-regular-mobile-headline-xl-line-height);
  --db-type-headline-font-size-2xl: var(--db-typography-regular-mobile-headline-2xl-font-size);
  --db-type-headline-line-height-2xl: var(--db-typography-regular-mobile-headline-2xl-line-height);
  --db-type-headline-font-size-3xl: var(--db-typography-regular-mobile-headline-3xl-font-size);
  --db-type-headline-line-height-3xl: var(--db-typography-regular-mobile-headline-3xl-line-height);
}
@media screen and (min-width: 45rem) {
  :root .app-canvas:not([data-force-mobile]), :not([data-force-mobile]):root:not(:has(.app-canvas)), .db-ui-regular:not([data-force-mobile]),
  [data-tonality=regular]:not([data-force-mobile]), :root [data-force-mobile=false].app-canvas, [data-force-mobile=false]:root:not(:has(.app-canvas)), [data-force-mobile=false].db-ui-regular,
  [data-force-mobile=false][data-tonality=regular] {
    --db-type-headline-font-size-xs: var(--db-typography-regular-tablet-headline-xs-font-size);
    --db-type-headline-line-height-xs: var(--db-typography-regular-tablet-headline-xs-line-height);
    --db-type-headline-font-size-sm: var(--db-typography-regular-tablet-headline-sm-font-size);
    --db-type-headline-line-height-sm: var(--db-typography-regular-tablet-headline-sm-line-height);
    --db-type-headline-font-size-md: var(--db-typography-regular-tablet-headline-md-font-size);
    --db-type-headline-line-height-md: var(--db-typography-regular-tablet-headline-md-line-height);
    --db-type-headline-font-size-lg: var(--db-typography-regular-tablet-headline-lg-font-size);
    --db-type-headline-line-height-lg: var(--db-typography-regular-tablet-headline-lg-line-height);
    --db-type-headline-font-size-xl: var(--db-typography-regular-tablet-headline-xl-font-size);
    --db-type-headline-line-height-xl: var(--db-typography-regular-tablet-headline-xl-line-height);
    --db-type-headline-font-size-2xl: var(--db-typography-regular-tablet-headline-2xl-font-size);
    --db-type-headline-line-height-2xl: var(--db-typography-regular-tablet-headline-2xl-line-height);
    --db-type-headline-font-size-3xl: var(--db-typography-regular-tablet-headline-3xl-font-size);
    --db-type-headline-line-height-3xl: var(--db-typography-regular-tablet-headline-3xl-line-height);
  }
}
@media screen and (min-width: 64rem) {
  :root .app-canvas:not([data-force-mobile]), :not([data-force-mobile]):root:not(:has(.app-canvas)), .db-ui-regular:not([data-force-mobile]),
  [data-tonality=regular]:not([data-force-mobile]), :root [data-force-mobile=false].app-canvas, [data-force-mobile=false]:root:not(:has(.app-canvas)), [data-force-mobile=false].db-ui-regular,
  [data-force-mobile=false][data-tonality=regular] {
    --db-type-headline-font-size-xs: var(--db-typography-regular-desktop-headline-xs-font-size);
    --db-type-headline-line-height-xs: var(--db-typography-regular-desktop-headline-xs-line-height);
    --db-type-headline-font-size-sm: var(--db-typography-regular-desktop-headline-sm-font-size);
    --db-type-headline-line-height-sm: var(--db-typography-regular-desktop-headline-sm-line-height);
    --db-type-headline-font-size-md: var(--db-typography-regular-desktop-headline-md-font-size);
    --db-type-headline-line-height-md: var(--db-typography-regular-desktop-headline-md-line-height);
    --db-type-headline-font-size-lg: var(--db-typography-regular-desktop-headline-lg-font-size);
    --db-type-headline-line-height-lg: var(--db-typography-regular-desktop-headline-lg-line-height);
    --db-type-headline-font-size-xl: var(--db-typography-regular-desktop-headline-xl-font-size);
    --db-type-headline-line-height-xl: var(--db-typography-regular-desktop-headline-xl-line-height);
    --db-type-headline-font-size-2xl: var(--db-typography-regular-desktop-headline-2xl-font-size);
    --db-type-headline-line-height-2xl: var(--db-typography-regular-desktop-headline-2xl-line-height);
    --db-type-headline-font-size-3xl: var(--db-typography-regular-desktop-headline-3xl-font-size);
    --db-type-headline-line-height-3xl: var(--db-typography-regular-desktop-headline-3xl-line-height);
  }
}

:root .app-canvas, :root:not(:has(.app-canvas)), .db-ui-regular,
[data-tonality=regular] {
  --db-type-body-font-size-3xs: var(--db-typography-regular-mobile-body-3xs-font-size);
  --db-type-body-line-height-3xs: var(--db-typography-regular-mobile-body-3xs-line-height);
  --db-base-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-3xs);
  --db-base-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-3xs);
  --db-type-body-font-size-2xs: var(--db-typography-regular-mobile-body-2xs-font-size);
  --db-type-body-line-height-2xs: var(--db-typography-regular-mobile-body-2xs-line-height);
  --db-base-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-2xs);
  --db-base-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-2xs);
  --db-type-body-font-size-xs: var(--db-typography-regular-mobile-body-xs-font-size);
  --db-type-body-line-height-xs: var(--db-typography-regular-mobile-body-xs-line-height);
  --db-base-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-xs);
  --db-base-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-xs);
  --db-type-body-font-size-sm: var(--db-typography-regular-mobile-body-sm-font-size);
  --db-type-body-line-height-sm: var(--db-typography-regular-mobile-body-sm-line-height);
  --db-base-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-sm);
  --db-base-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-sm);
  --db-type-body-font-size-md: var(--db-typography-regular-mobile-body-md-font-size);
  --db-type-body-line-height-md: var(--db-typography-regular-mobile-body-md-line-height);
  --db-base-icon-weight-md: var(--db-base-icon-weight-regular-mobile-md);
  --db-base-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-md);
  --db-type-body-font-size-lg: var(--db-typography-regular-mobile-body-lg-font-size);
  --db-type-body-line-height-lg: var(--db-typography-regular-mobile-body-lg-line-height);
  --db-base-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-lg);
  --db-base-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-lg);
  --db-type-body-font-size-xl: var(--db-typography-regular-mobile-body-xl-font-size);
  --db-type-body-line-height-xl: var(--db-typography-regular-mobile-body-xl-line-height);
  --db-base-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-xl);
  --db-base-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-xl);
}
@media screen and (min-width: 45rem) {
  :root .app-canvas:not([data-force-mobile]), :not([data-force-mobile]):root:not(:has(.app-canvas)), .db-ui-regular:not([data-force-mobile]),
  [data-tonality=regular]:not([data-force-mobile]), :root [data-force-mobile=false].app-canvas, [data-force-mobile=false]:root:not(:has(.app-canvas)), [data-force-mobile=false].db-ui-regular,
  [data-force-mobile=false][data-tonality=regular] {
    --db-type-body-font-size-3xs: var(--db-typography-regular-tablet-body-3xs-font-size);
    --db-type-body-line-height-3xs: var(--db-typography-regular-tablet-body-3xs-line-height);
    --db-base-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-3xs);
    --db-base-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-3xs);
    --db-type-body-font-size-2xs: var(--db-typography-regular-tablet-body-2xs-font-size);
    --db-type-body-line-height-2xs: var(--db-typography-regular-tablet-body-2xs-line-height);
    --db-base-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-2xs);
    --db-base-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-2xs);
    --db-type-body-font-size-xs: var(--db-typography-regular-tablet-body-xs-font-size);
    --db-type-body-line-height-xs: var(--db-typography-regular-tablet-body-xs-line-height);
    --db-base-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-xs);
    --db-base-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-xs);
    --db-type-body-font-size-sm: var(--db-typography-regular-tablet-body-sm-font-size);
    --db-type-body-line-height-sm: var(--db-typography-regular-tablet-body-sm-line-height);
    --db-base-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-sm);
    --db-base-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-sm);
    --db-type-body-font-size-md: var(--db-typography-regular-tablet-body-md-font-size);
    --db-type-body-line-height-md: var(--db-typography-regular-tablet-body-md-line-height);
    --db-base-icon-weight-md: var(--db-base-icon-weight-regular-mobile-md);
    --db-base-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-md);
    --db-type-body-font-size-lg: var(--db-typography-regular-tablet-body-lg-font-size);
    --db-type-body-line-height-lg: var(--db-typography-regular-tablet-body-lg-line-height);
    --db-base-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-lg);
    --db-base-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-lg);
    --db-type-body-font-size-xl: var(--db-typography-regular-tablet-body-xl-font-size);
    --db-type-body-line-height-xl: var(--db-typography-regular-tablet-body-xl-line-height);
    --db-base-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-xl);
    --db-base-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-xl);
  }
}
@media screen and (min-width: 64rem) {
  :root .app-canvas:not([data-force-mobile]), :not([data-force-mobile]):root:not(:has(.app-canvas)), .db-ui-regular:not([data-force-mobile]),
  [data-tonality=regular]:not([data-force-mobile]), :root [data-force-mobile=false].app-canvas, [data-force-mobile=false]:root:not(:has(.app-canvas)), [data-force-mobile=false].db-ui-regular,
  [data-force-mobile=false][data-tonality=regular] {
    --db-type-body-font-size-3xs: var(--db-typography-regular-desktop-body-3xs-font-size);
    --db-type-body-line-height-3xs: var(--db-typography-regular-desktop-body-3xs-line-height);
    --db-base-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-3xs);
    --db-base-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-3xs);
    --db-type-body-font-size-2xs: var(--db-typography-regular-desktop-body-2xs-font-size);
    --db-type-body-line-height-2xs: var(--db-typography-regular-desktop-body-2xs-line-height);
    --db-base-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-2xs);
    --db-base-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-2xs);
    --db-type-body-font-size-xs: var(--db-typography-regular-desktop-body-xs-font-size);
    --db-type-body-line-height-xs: var(--db-typography-regular-desktop-body-xs-line-height);
    --db-base-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-xs);
    --db-base-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-xs);
    --db-type-body-font-size-sm: var(--db-typography-regular-desktop-body-sm-font-size);
    --db-type-body-line-height-sm: var(--db-typography-regular-desktop-body-sm-line-height);
    --db-base-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-sm);
    --db-base-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-sm);
    --db-type-body-font-size-md: var(--db-typography-regular-desktop-body-md-font-size);
    --db-type-body-line-height-md: var(--db-typography-regular-desktop-body-md-line-height);
    --db-base-icon-weight-md: var(--db-base-icon-weight-regular-mobile-md);
    --db-base-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-md);
    --db-type-body-font-size-lg: var(--db-typography-regular-desktop-body-lg-font-size);
    --db-type-body-line-height-lg: var(--db-typography-regular-desktop-body-lg-line-height);
    --db-base-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-lg);
    --db-base-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-lg);
    --db-type-body-font-size-xl: var(--db-typography-regular-desktop-body-xl-font-size);
    --db-type-body-line-height-xl: var(--db-typography-regular-desktop-body-xl-line-height);
    --db-base-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-xl);
    --db-base-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-xl);
  }
}

.db-ui-functional,
[data-tonality=functional] {
  --db-type-headline-font-size-xs: var(--db-typography-functional-mobile-headline-xs-font-size);
  --db-type-headline-line-height-xs: var(--db-typography-functional-mobile-headline-xs-line-height);
  --db-type-headline-font-size-sm: var(--db-typography-functional-mobile-headline-sm-font-size);
  --db-type-headline-line-height-sm: var(--db-typography-functional-mobile-headline-sm-line-height);
  --db-type-headline-font-size-md: var(--db-typography-functional-mobile-headline-md-font-size);
  --db-type-headline-line-height-md: var(--db-typography-functional-mobile-headline-md-line-height);
  --db-type-headline-font-size-lg: var(--db-typography-functional-mobile-headline-lg-font-size);
  --db-type-headline-line-height-lg: var(--db-typography-functional-mobile-headline-lg-line-height);
  --db-type-headline-font-size-xl: var(--db-typography-functional-mobile-headline-xl-font-size);
  --db-type-headline-line-height-xl: var(--db-typography-functional-mobile-headline-xl-line-height);
  --db-type-headline-font-size-2xl: var(--db-typography-functional-mobile-headline-2xl-font-size);
  --db-type-headline-line-height-2xl: var(--db-typography-functional-mobile-headline-2xl-line-height);
  --db-type-headline-font-size-3xl: var(--db-typography-functional-mobile-headline-3xl-font-size);
  --db-type-headline-line-height-3xl: var(--db-typography-functional-mobile-headline-3xl-line-height);
}
@media screen and (min-width: 45rem) {
  .db-ui-functional:not([data-force-mobile]),
  [data-tonality=functional]:not([data-force-mobile]), [data-force-mobile=false].db-ui-functional,
  [data-force-mobile=false][data-tonality=functional] {
    --db-type-headline-font-size-xs: var(--db-typography-functional-tablet-headline-xs-font-size);
    --db-type-headline-line-height-xs: var(--db-typography-functional-tablet-headline-xs-line-height);
    --db-type-headline-font-size-sm: var(--db-typography-functional-tablet-headline-sm-font-size);
    --db-type-headline-line-height-sm: var(--db-typography-functional-tablet-headline-sm-line-height);
    --db-type-headline-font-size-md: var(--db-typography-functional-tablet-headline-md-font-size);
    --db-type-headline-line-height-md: var(--db-typography-functional-tablet-headline-md-line-height);
    --db-type-headline-font-size-lg: var(--db-typography-functional-tablet-headline-lg-font-size);
    --db-type-headline-line-height-lg: var(--db-typography-functional-tablet-headline-lg-line-height);
    --db-type-headline-font-size-xl: var(--db-typography-functional-tablet-headline-xl-font-size);
    --db-type-headline-line-height-xl: var(--db-typography-functional-tablet-headline-xl-line-height);
    --db-type-headline-font-size-2xl: var(--db-typography-functional-tablet-headline-2xl-font-size);
    --db-type-headline-line-height-2xl: var(--db-typography-functional-tablet-headline-2xl-line-height);
    --db-type-headline-font-size-3xl: var(--db-typography-functional-tablet-headline-3xl-font-size);
    --db-type-headline-line-height-3xl: var(--db-typography-functional-tablet-headline-3xl-line-height);
  }
}
@media screen and (min-width: 64rem) {
  .db-ui-functional:not([data-force-mobile]),
  [data-tonality=functional]:not([data-force-mobile]), [data-force-mobile=false].db-ui-functional,
  [data-force-mobile=false][data-tonality=functional] {
    --db-type-headline-font-size-xs: var(--db-typography-functional-desktop-headline-xs-font-size);
    --db-type-headline-line-height-xs: var(--db-typography-functional-desktop-headline-xs-line-height);
    --db-type-headline-font-size-sm: var(--db-typography-functional-desktop-headline-sm-font-size);
    --db-type-headline-line-height-sm: var(--db-typography-functional-desktop-headline-sm-line-height);
    --db-type-headline-font-size-md: var(--db-typography-functional-desktop-headline-md-font-size);
    --db-type-headline-line-height-md: var(--db-typography-functional-desktop-headline-md-line-height);
    --db-type-headline-font-size-lg: var(--db-typography-functional-desktop-headline-lg-font-size);
    --db-type-headline-line-height-lg: var(--db-typography-functional-desktop-headline-lg-line-height);
    --db-type-headline-font-size-xl: var(--db-typography-functional-desktop-headline-xl-font-size);
    --db-type-headline-line-height-xl: var(--db-typography-functional-desktop-headline-xl-line-height);
    --db-type-headline-font-size-2xl: var(--db-typography-functional-desktop-headline-2xl-font-size);
    --db-type-headline-line-height-2xl: var(--db-typography-functional-desktop-headline-2xl-line-height);
    --db-type-headline-font-size-3xl: var(--db-typography-functional-desktop-headline-3xl-font-size);
    --db-type-headline-line-height-3xl: var(--db-typography-functional-desktop-headline-3xl-line-height);
  }
}

.db-ui-functional,
[data-tonality=functional] {
  --db-type-body-font-size-3xs: var(--db-typography-functional-mobile-body-3xs-font-size);
  --db-type-body-line-height-3xs: var(--db-typography-functional-mobile-body-3xs-line-height);
  --db-base-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-3xs);
  --db-base-icon-font-size-3xs: var(--db-base-icon-font-size-functional-mobile-3xs);
  --db-type-body-font-size-2xs: var(--db-typography-functional-mobile-body-2xs-font-size);
  --db-type-body-line-height-2xs: var(--db-typography-functional-mobile-body-2xs-line-height);
  --db-base-icon-weight-2xs: var(--db-base-icon-weight-functional-mobile-2xs);
  --db-base-icon-font-size-2xs: var(--db-base-icon-font-size-functional-mobile-2xs);
  --db-type-body-font-size-xs: var(--db-typography-functional-mobile-body-xs-font-size);
  --db-type-body-line-height-xs: var(--db-typography-functional-mobile-body-xs-line-height);
  --db-base-icon-weight-xs: var(--db-base-icon-weight-functional-mobile-xs);
  --db-base-icon-font-size-xs: var(--db-base-icon-font-size-functional-mobile-xs);
  --db-type-body-font-size-sm: var(--db-typography-functional-mobile-body-sm-font-size);
  --db-type-body-line-height-sm: var(--db-typography-functional-mobile-body-sm-line-height);
  --db-base-icon-weight-sm: var(--db-base-icon-weight-functional-mobile-sm);
  --db-base-icon-font-size-sm: var(--db-base-icon-font-size-functional-mobile-sm);
  --db-type-body-font-size-md: var(--db-typography-functional-mobile-body-md-font-size);
  --db-type-body-line-height-md: var(--db-typography-functional-mobile-body-md-line-height);
  --db-base-icon-weight-md: var(--db-base-icon-weight-functional-mobile-md);
  --db-base-icon-font-size-md: var(--db-base-icon-font-size-functional-mobile-md);
  --db-type-body-font-size-lg: var(--db-typography-functional-mobile-body-lg-font-size);
  --db-type-body-line-height-lg: var(--db-typography-functional-mobile-body-lg-line-height);
  --db-base-icon-weight-lg: var(--db-base-icon-weight-functional-mobile-lg);
  --db-base-icon-font-size-lg: var(--db-base-icon-font-size-functional-mobile-lg);
  --db-type-body-font-size-xl: var(--db-typography-functional-mobile-body-xl-font-size);
  --db-type-body-line-height-xl: var(--db-typography-functional-mobile-body-xl-line-height);
  --db-base-icon-weight-xl: var(--db-base-icon-weight-functional-mobile-xl);
  --db-base-icon-font-size-xl: var(--db-base-icon-font-size-functional-mobile-xl);
}
@media screen and (min-width: 45rem) {
  .db-ui-functional:not([data-force-mobile]),
  [data-tonality=functional]:not([data-force-mobile]), [data-force-mobile=false].db-ui-functional,
  [data-force-mobile=false][data-tonality=functional] {
    --db-type-body-font-size-3xs: var(--db-typography-functional-tablet-body-3xs-font-size);
    --db-type-body-line-height-3xs: var(--db-typography-functional-tablet-body-3xs-line-height);
    --db-base-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-3xs);
    --db-base-icon-font-size-3xs: var(--db-base-icon-font-size-functional-mobile-3xs);
    --db-type-body-font-size-2xs: var(--db-typography-functional-tablet-body-2xs-font-size);
    --db-type-body-line-height-2xs: var(--db-typography-functional-tablet-body-2xs-line-height);
    --db-base-icon-weight-2xs: var(--db-base-icon-weight-functional-mobile-2xs);
    --db-base-icon-font-size-2xs: var(--db-base-icon-font-size-functional-mobile-2xs);
    --db-type-body-font-size-xs: var(--db-typography-functional-tablet-body-xs-font-size);
    --db-type-body-line-height-xs: var(--db-typography-functional-tablet-body-xs-line-height);
    --db-base-icon-weight-xs: var(--db-base-icon-weight-functional-mobile-xs);
    --db-base-icon-font-size-xs: var(--db-base-icon-font-size-functional-mobile-xs);
    --db-type-body-font-size-sm: var(--db-typography-functional-tablet-body-sm-font-size);
    --db-type-body-line-height-sm: var(--db-typography-functional-tablet-body-sm-line-height);
    --db-base-icon-weight-sm: var(--db-base-icon-weight-functional-mobile-sm);
    --db-base-icon-font-size-sm: var(--db-base-icon-font-size-functional-mobile-sm);
    --db-type-body-font-size-md: var(--db-typography-functional-tablet-body-md-font-size);
    --db-type-body-line-height-md: var(--db-typography-functional-tablet-body-md-line-height);
    --db-base-icon-weight-md: var(--db-base-icon-weight-functional-mobile-md);
    --db-base-icon-font-size-md: var(--db-base-icon-font-size-functional-mobile-md);
    --db-type-body-font-size-lg: var(--db-typography-functional-tablet-body-lg-font-size);
    --db-type-body-line-height-lg: var(--db-typography-functional-tablet-body-lg-line-height);
    --db-base-icon-weight-lg: var(--db-base-icon-weight-functional-mobile-lg);
    --db-base-icon-font-size-lg: var(--db-base-icon-font-size-functional-mobile-lg);
    --db-type-body-font-size-xl: var(--db-typography-functional-tablet-body-xl-font-size);
    --db-type-body-line-height-xl: var(--db-typography-functional-tablet-body-xl-line-height);
    --db-base-icon-weight-xl: var(--db-base-icon-weight-functional-mobile-xl);
    --db-base-icon-font-size-xl: var(--db-base-icon-font-size-functional-mobile-xl);
  }
}
@media screen and (min-width: 64rem) {
  .db-ui-functional:not([data-force-mobile]),
  [data-tonality=functional]:not([data-force-mobile]), [data-force-mobile=false].db-ui-functional,
  [data-force-mobile=false][data-tonality=functional] {
    --db-type-body-font-size-3xs: var(--db-typography-functional-desktop-body-3xs-font-size);
    --db-type-body-line-height-3xs: var(--db-typography-functional-desktop-body-3xs-line-height);
    --db-base-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-3xs);
    --db-base-icon-font-size-3xs: var(--db-base-icon-font-size-functional-mobile-3xs);
    --db-type-body-font-size-2xs: var(--db-typography-functional-desktop-body-2xs-font-size);
    --db-type-body-line-height-2xs: var(--db-typography-functional-desktop-body-2xs-line-height);
    --db-base-icon-weight-2xs: var(--db-base-icon-weight-functional-mobile-2xs);
    --db-base-icon-font-size-2xs: var(--db-base-icon-font-size-functional-mobile-2xs);
    --db-type-body-font-size-xs: var(--db-typography-functional-desktop-body-xs-font-size);
    --db-type-body-line-height-xs: var(--db-typography-functional-desktop-body-xs-line-height);
    --db-base-icon-weight-xs: var(--db-base-icon-weight-functional-mobile-xs);
    --db-base-icon-font-size-xs: var(--db-base-icon-font-size-functional-mobile-xs);
    --db-type-body-font-size-sm: var(--db-typography-functional-desktop-body-sm-font-size);
    --db-type-body-line-height-sm: var(--db-typography-functional-desktop-body-sm-line-height);
    --db-base-icon-weight-sm: var(--db-base-icon-weight-functional-mobile-sm);
    --db-base-icon-font-size-sm: var(--db-base-icon-font-size-functional-mobile-sm);
    --db-type-body-font-size-md: var(--db-typography-functional-desktop-body-md-font-size);
    --db-type-body-line-height-md: var(--db-typography-functional-desktop-body-md-line-height);
    --db-base-icon-weight-md: var(--db-base-icon-weight-functional-mobile-md);
    --db-base-icon-font-size-md: var(--db-base-icon-font-size-functional-mobile-md);
    --db-type-body-font-size-lg: var(--db-typography-functional-desktop-body-lg-font-size);
    --db-type-body-line-height-lg: var(--db-typography-functional-desktop-body-lg-line-height);
    --db-base-icon-weight-lg: var(--db-base-icon-weight-functional-mobile-lg);
    --db-base-icon-font-size-lg: var(--db-base-icon-font-size-functional-mobile-lg);
    --db-type-body-font-size-xl: var(--db-typography-functional-desktop-body-xl-font-size);
    --db-type-body-line-height-xl: var(--db-typography-functional-desktop-body-xl-line-height);
    --db-base-icon-weight-xl: var(--db-base-icon-weight-functional-mobile-xl);
    --db-base-icon-font-size-xl: var(--db-base-icon-font-size-functional-mobile-xl);
  }
}

/* stylelint-disable */
/* stylelint-enable */
.db-ui-expressive,
[data-tonality=expressive] {
  --db-input-label-scale: 0.55;
  --db-input-focus-opacity: 1;
  --db-textarea-label-scale: 0.55;
  --db-textarea-focus-opacity: 1;
  --db-sizing-3xs: var(--db-sizing-expressive-3xs);
  --db-sizing-2xs: var(--db-sizing-expressive-2xs);
  --db-sizing-xs: var(--db-sizing-expressive-xs);
  --db-sizing-sm: var(--db-sizing-expressive-sm);
  --db-sizing-md: var(--db-sizing-expressive-md);
  --db-sizing-lg: var(--db-sizing-expressive-lg);
  --db-sizing-xl: var(--db-sizing-expressive-xl);
  --db-sizing-2xl: var(--db-sizing-expressive-2xl);
  --db-sizing-3xl: var(--db-sizing-expressive-3xl);
  --db-spacing-fixed-3xs: var(--db-spacing-fixed-expressive-3xs);
  --db-spacing-fixed-2xs: var(--db-spacing-fixed-expressive-2xs);
  --db-spacing-fixed-xs: var(--db-spacing-fixed-expressive-xs);
  --db-spacing-fixed-sm: var(--db-spacing-fixed-expressive-sm);
  --db-spacing-fixed-md: var(--db-spacing-fixed-expressive-md);
  --db-spacing-fixed-lg: var(--db-spacing-fixed-expressive-lg);
  --db-spacing-fixed-xl: var(--db-spacing-fixed-expressive-xl);
  --db-spacing-fixed-2xl: var(--db-spacing-fixed-expressive-2xl);
  --db-spacing-fixed-3xl: var(--db-spacing-fixed-expressive-3xl);
  --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-mobile-3xs);
  --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-mobile-2xs);
  --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-mobile-xs);
  --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-mobile-sm);
  --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-mobile-md);
  --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-mobile-lg);
  --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-mobile-xl);
  --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-mobile-2xl);
  --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-mobile-3xl);
}
@media screen and (min-width: 45rem) {
  .db-ui-expressive:not([data-force-mobile]),
  [data-tonality=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-ui-expressive,
  [data-force-mobile=false][data-tonality=expressive] {
    --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-tablet-3xs);
    --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-tablet-2xs);
    --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-tablet-xs);
    --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-tablet-sm);
    --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-tablet-md);
    --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-tablet-lg);
    --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-tablet-xl);
    --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-tablet-2xl);
    --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-tablet-3xl);
  }
}
@media screen and (min-width: 64rem) {
  .db-ui-expressive:not([data-force-mobile]),
  [data-tonality=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-ui-expressive,
  [data-force-mobile=false][data-tonality=expressive] {
    --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-desktop-3xs);
    --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-desktop-2xs);
    --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-desktop-xs);
    --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-desktop-sm);
    --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-desktop-md);
    --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-desktop-lg);
    --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-desktop-xl);
    --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-desktop-2xl);
    --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-desktop-3xl);
  }
}

:root .app-canvas, :root:not(:has(.app-canvas)), .db-ui-regular,
[data-tonality=regular] {
  --db-input-label-scale: 0.65;
  --db-input-focus-opacity: 1;
  --db-textarea-label-scale: 0.65;
  --db-textarea-focus-opacity: 1;
  --db-sizing-3xs: var(--db-sizing-regular-3xs);
  --db-sizing-2xs: var(--db-sizing-regular-2xs);
  --db-sizing-xs: var(--db-sizing-regular-xs);
  --db-sizing-sm: var(--db-sizing-regular-sm);
  --db-sizing-md: var(--db-sizing-regular-md);
  --db-sizing-lg: var(--db-sizing-regular-lg);
  --db-sizing-xl: var(--db-sizing-regular-xl);
  --db-sizing-2xl: var(--db-sizing-regular-2xl);
  --db-sizing-3xl: var(--db-sizing-regular-3xl);
  --db-spacing-fixed-3xs: var(--db-spacing-fixed-regular-3xs);
  --db-spacing-fixed-2xs: var(--db-spacing-fixed-regular-2xs);
  --db-spacing-fixed-xs: var(--db-spacing-fixed-regular-xs);
  --db-spacing-fixed-sm: var(--db-spacing-fixed-regular-sm);
  --db-spacing-fixed-md: var(--db-spacing-fixed-regular-md);
  --db-spacing-fixed-lg: var(--db-spacing-fixed-regular-lg);
  --db-spacing-fixed-xl: var(--db-spacing-fixed-regular-xl);
  --db-spacing-fixed-2xl: var(--db-spacing-fixed-regular-2xl);
  --db-spacing-fixed-3xl: var(--db-spacing-fixed-regular-3xl);
  --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
  --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-mobile-2xs);
  --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-mobile-xs);
  --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-mobile-sm);
  --db-spacing-responsive-md: var(--db-spacing-responsive-regular-mobile-md);
  --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-mobile-lg);
  --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-mobile-xl);
  --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-mobile-2xl);
  --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-mobile-3xl);
}
@media screen and (min-width: 45rem) {
  :root .app-canvas:not([data-force-mobile]), :not([data-force-mobile]):root:not(:has(.app-canvas)), .db-ui-regular:not([data-force-mobile]),
  [data-tonality=regular]:not([data-force-mobile]), :root [data-force-mobile=false].app-canvas, [data-force-mobile=false]:root:not(:has(.app-canvas)), [data-force-mobile=false].db-ui-regular,
  [data-force-mobile=false][data-tonality=regular] {
    --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
    --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-tablet-2xs);
    --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-tablet-xs);
    --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-tablet-sm);
    --db-spacing-responsive-md: var(--db-spacing-responsive-regular-tablet-md);
    --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-tablet-lg);
    --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-tablet-xl);
    --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-tablet-2xl);
    --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-tablet-3xl);
  }
}
@media screen and (min-width: 64rem) {
  :root .app-canvas:not([data-force-mobile]), :not([data-force-mobile]):root:not(:has(.app-canvas)), .db-ui-regular:not([data-force-mobile]),
  [data-tonality=regular]:not([data-force-mobile]), :root [data-force-mobile=false].app-canvas, [data-force-mobile=false]:root:not(:has(.app-canvas)), [data-force-mobile=false].db-ui-regular,
  [data-force-mobile=false][data-tonality=regular] {
    --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-desktop-3xs);
    --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-desktop-2xs);
    --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-desktop-xs);
    --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-desktop-sm);
    --db-spacing-responsive-md: var(--db-spacing-responsive-regular-desktop-md);
    --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-desktop-lg);
    --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-desktop-xl);
    --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-desktop-2xl);
    --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-desktop-3xl);
  }
}

.db-ui-functional,
[data-tonality=functional] {
  --db-input-label-scale: 1;
  --db-input-focus-opacity: 0;
  --db-textarea-label-scale: 1;
  --db-textarea-focus-opacity: 0;
  --db-sizing-3xs: var(--db-sizing-functional-3xs);
  --db-sizing-2xs: var(--db-sizing-functional-2xs);
  --db-sizing-xs: var(--db-sizing-functional-xs);
  --db-sizing-sm: var(--db-sizing-functional-sm);
  --db-sizing-md: var(--db-sizing-functional-md);
  --db-sizing-lg: var(--db-sizing-functional-lg);
  --db-sizing-xl: var(--db-sizing-functional-xl);
  --db-sizing-2xl: var(--db-sizing-functional-2xl);
  --db-sizing-3xl: var(--db-sizing-functional-3xl);
  --db-spacing-fixed-3xs: var(--db-spacing-fixed-functional-3xs);
  --db-spacing-fixed-2xs: var(--db-spacing-fixed-functional-2xs);
  --db-spacing-fixed-xs: var(--db-spacing-fixed-functional-xs);
  --db-spacing-fixed-sm: var(--db-spacing-fixed-functional-sm);
  --db-spacing-fixed-md: var(--db-spacing-fixed-functional-md);
  --db-spacing-fixed-lg: var(--db-spacing-fixed-functional-lg);
  --db-spacing-fixed-xl: var(--db-spacing-fixed-functional-xl);
  --db-spacing-fixed-2xl: var(--db-spacing-fixed-functional-2xl);
  --db-spacing-fixed-3xl: var(--db-spacing-fixed-functional-3xl);
  --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-mobile-3xs);
  --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-mobile-2xs);
  --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-mobile-xs);
  --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-mobile-sm);
  --db-spacing-responsive-md: var(--db-spacing-responsive-functional-mobile-md);
  --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-mobile-lg);
  --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-mobile-xl);
  --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-mobile-2xl);
  --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-mobile-3xl);
}
@media screen and (min-width: 45rem) {
  .db-ui-functional:not([data-force-mobile]),
  [data-tonality=functional]:not([data-force-mobile]), [data-force-mobile=false].db-ui-functional,
  [data-force-mobile=false][data-tonality=functional] {
    --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-tablet-3xs);
    --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-tablet-2xs);
    --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-tablet-xs);
    --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-tablet-sm);
    --db-spacing-responsive-md: var(--db-spacing-responsive-functional-tablet-md);
    --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-tablet-lg);
    --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-tablet-xl);
    --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-tablet-2xl);
    --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-tablet-3xl);
  }
}
@media screen and (min-width: 64rem) {
  .db-ui-functional:not([data-force-mobile]),
  [data-tonality=functional]:not([data-force-mobile]), [data-force-mobile=false].db-ui-functional,
  [data-force-mobile=false][data-tonality=functional] {
    --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-desktop-3xs);
    --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-desktop-2xs);
    --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-desktop-xs);
    --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-desktop-sm);
    --db-spacing-responsive-md: var(--db-spacing-responsive-functional-desktop-md);
    --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-desktop-lg);
    --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-desktop-xl);
    --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-desktop-2xl);
    --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-desktop-3xl);
  }
}

/**
	Generates 3 types of placeholders, e.g:
	- %db-component-variables-md
	- %db-font-size-md
	- %db-overwrite-font-size-md
 */
:root, :root .app-canvas, :root:not(:has(.app-canvas)), .db-ui-regular,
[data-tonality=regular], .db-ui-expressive,
[data-tonality=expressive], .db-ui-functional,
[data-tonality=functional] {
  /* 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);
  --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);
  --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);
  --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);
}

@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");
}
/* Document
 * ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
:where(html) {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  text-size-adjust: 100%; /* 2 */
}

/* 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 */
}

/* 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, pre, 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. */
/* Elevation */
/* Opacity */
/* Border */
/* Transitions */
[class^=db-],
[class^=db-] *, [class^=db-] ::before,
[class^=db-] ::after {
  transition: outline var(--db-transition-duration-ultra-fast), background-color var(--db-transition-duration-medium) var(--db-transition-emotional-timing);
}

@keyframes show-right-to-left {
  from {
    transform: translateX(110%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes hide-right-to-left {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(110%);
  }
}
@keyframes show-left-to-right {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes hide-left-to-right {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-110%);
  }
}
@keyframes show-bottom-to-top {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes hide-bottom-to-top {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(110%);
  }
}
@keyframes show-top-to-bottom {
  from {
    transform: translateY(-110%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes hide-top-to-bottom {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-110%);
  }
}
@keyframes accordion-open {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes popover-animation {
  0% {
    opacity: 0;
    transform: translate(var(--db-popover-translate-x, 0%), var(--db-popover-translate-y, 0%));
  }
  100% {
    opacity: 1;
    transform: translate(0%, 0%);
  }
}
:root {
  --db-focus-outline-color: var(--db-informational-text-enabled);
  --db-focus-box-shadow-bg-color: var(--db-base-bg-enabled);
  --db-focus-box-shadow-on-bg-color: var(--db-current-color, var(--db-base-on-bg-enabled));
  /* This is a MS power apps specific class name */
}
html,
body {
  margin: 0;
  padding: 0;
}

body,
.app-canvas,
.control-pane {
  font-family: var(--db-font-family-sans);
}

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,
[tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--db-border-height-md) var(--db-focus-outline-style, solid) var(--db-focus-outline-color, currentColor);
  outline-offset: calc(var(--db-border-height-lg) + var(--db-border-height-md));
  box-shadow: 0 0 0 var(--db-border-height-lg) var(--db-focus-box-shadow-bg-color), 0 0 0 calc(var(--db-border-height-lg) + var(--db-border-height-md)) var(--db-focus-box-shadow-on-bg-color);
  transition: outline var(--db-transition-duration-ultra-fast, var(--db-transition-duration-ultra-fast)), box-shadow var(--db-transition-duration-ultra-fast, var(--db-transition-duration-ultra-fast));
}
:is(a,
button,
input,
textarea,
summary,
select,
[tabindex]:not([tabindex="-1"])):focus-visible:not([type=radio]) {
  border-radius: var(--db-border-radius-md);
}

:where(ul) {
  list-style-type: "•   ";
}
:where(ul) li::marker {
  color: var(--db-brand-origin-enabled);
}

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-3xs);
  padding-inline: var(--db-spacing-fixed-2xs);
}

blockquote {
  margin: 0;
  padding: var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--db-font-family-head);
  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);
  margin-block: var(--db-spacing-fixed-xl);
}

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

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

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

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

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

p {
  margin-block: var(--db-spacing-fixed-md);
}
