@layer db-theme, db-ux;
@layer db-theme, db-ux;
/* Declare the DB UX cascade-layer order FIRST, before any @import. The vite
   plugin's dev output includes this statement, but the production CSS minifier
   (lightningcss) drops the standalone declaration — which changes the cascade
   and makes the built site render unstyled vs. the dev server. Authoring it
   here in our own source keeps it in the final bundle. */
/* DB UX Design System — foundations + components + db-theme, via the vite plugin */
@layer db-theme{
/* @deprecated use get-images instead */
/* @deprecated use get-images instead */
@property --db-base-icon-weight-regular-desktop-headline-3xl {
  syntax: "<number>";
  initial-value: 96;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-headline-2xl {
  syntax: "<number>";
  initial-value: 80;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-headline-xl {
  syntax: "<number>";
  initial-value: 64;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-headline-lg {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-headline-md {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-headline-sm {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-headline-2xs {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-headline-3xs {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-headline-xs {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-body-lg {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-body-xl {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-body-2xl {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-body-3xl {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-body-md {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-body-sm {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-body-2xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-body-3xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-regular-desktop-body-xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-body-lg {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-body-md {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-body-sm {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-body-xl {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-body-xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-body-2xl {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-body-3xl {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-body-2xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-body-3xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-headline-lg {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-headline-md {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-headline-sm {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-headline-xl {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-headline-xs {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-headline-2xl {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-headline-2xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-headline-3xl {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-regular-mobile-headline-3xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-body-lg {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-body-md {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-body-sm {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-body-xl {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-body-xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-body-2xl {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-body-3xl {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-body-2xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-body-3xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-headline-lg {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-headline-md {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-headline-sm {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-headline-xl {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-headline-xs {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-headline-2xl {
  syntax: "<number>";
  initial-value: 64;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-headline-2xs {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-headline-3xl {
  syntax: "<number>";
  initial-value: 64;
  inherits: true;
}
@property --db-base-icon-weight-regular-tablet-headline-3xs {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-body-lg {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-body-md {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-body-sm {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-body-xl {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-body-xs {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-body-2xl {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-body-3xl {
  syntax: "<number>";
  initial-value: 64;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-body-2xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-body-3xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-headline-lg {
  syntax: "<number>";
  initial-value: 64;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-headline-md {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-headline-sm {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-headline-xl {
  syntax: "<number>";
  initial-value: 80;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-headline-xs {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-headline-2xl {
  syntax: "<number>";
  initial-value: 96;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-headline-2xs {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-headline-3xl {
  syntax: "<number>";
  initial-value: 120;
  inherits: true;
}
@property --db-base-icon-weight-expressive-desktop-headline-3xs {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-body-lg {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-body-md {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-body-sm {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-body-xl {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-body-xs {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-body-2xl {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-body-3xl {
  syntax: "<number>";
  initial-value: 64;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-body-2xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-body-3xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-headline-lg {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-headline-md {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-headline-sm {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-headline-xl {
  syntax: "<number>";
  initial-value: 64;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-headline-xs {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-headline-2xl {
  syntax: "<number>";
  initial-value: 80;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-headline-2xs {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-headline-3xl {
  syntax: "<number>";
  initial-value: 96;
  inherits: true;
}
@property --db-base-icon-weight-expressive-tablet-headline-3xs {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-body-lg {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-body-md {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-body-sm {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-body-xl {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-body-xs {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-body-2xl {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-body-3xl {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-body-2xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-body-3xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-headline-lg {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-headline-md {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-headline-sm {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-headline-xl {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-headline-xs {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-headline-2xl {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-headline-2xs {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-headline-3xl {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-expressive-mobile-headline-3xs {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-body-lg {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-body-md {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-body-sm {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-body-xl {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-body-xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-body-2xl {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-body-3xl {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-body-2xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-body-3xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-headline-lg {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-headline-md {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-headline-sm {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-headline-xl {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-headline-xs {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-headline-2xl {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-headline-2xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-headline-3xl {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-functional-desktop-headline-3xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-body-lg {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-body-md {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-body-sm {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-body-xl {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-body-xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-body-2xl {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-body-3xl {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-body-2xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-body-3xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-headline-lg {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-headline-md {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-headline-sm {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-headline-xl {
  syntax: "<number>";
  initial-value: 40;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-headline-xs {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-headline-2xl {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-headline-2xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-headline-3xl {
  syntax: "<number>";
  initial-value: 48;
  inherits: true;
}
@property --db-base-icon-weight-functional-tablet-headline-3xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-body-lg {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-body-md {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-body-sm {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-body-xl {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-body-xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-body-2xl {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-body-3xl {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-body-2xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-body-3xs {
  syntax: "<number>";
  initial-value: 14;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-headline-lg {
  syntax: "<number>";
  initial-value: 28;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-headline-md {
  syntax: "<number>";
  initial-value: 24;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-headline-sm {
  syntax: "<number>";
  initial-value: 20;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-headline-xl {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-headline-xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-headline-2xl {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-headline-2xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-headline-3xl {
  syntax: "<number>";
  initial-value: 32;
  inherits: true;
}
@property --db-base-icon-weight-functional-mobile-headline-3xs {
  syntax: "<number>";
  initial-value: 16;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-headline-3xl {
  syntax: "*";
  initial-value: 6rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-headline-2xl {
  syntax: "*";
  initial-value: 5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-headline-xl {
  syntax: "*";
  initial-value: 4rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-headline-lg {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-headline-md {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-headline-sm {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-headline-2xs {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-headline-3xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-headline-xs {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-body-lg {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-body-xl {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-body-2xl {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-body-3xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-body-md {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-body-sm {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-body-2xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-body-3xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-desktop-body-xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-body-lg {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-body-md {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-body-sm {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-body-xl {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-body-xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-body-2xl {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-body-3xl {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-body-2xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-body-3xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-headline-lg {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-headline-md {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-headline-sm {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-headline-xl {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-headline-xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-headline-2xl {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-headline-2xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-headline-3xl {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-mobile-headline-3xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-body-lg {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-body-md {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-body-sm {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-body-xl {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-body-xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-body-2xl {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-body-3xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-body-2xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-body-3xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-headline-lg {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-headline-md {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-headline-sm {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-headline-xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-headline-xs {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-headline-2xl {
  syntax: "*";
  initial-value: 4rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-headline-2xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-headline-3xl {
  syntax: "*";
  initial-value: 4rem;
  inherits: true;
}
@property --db-base-icon-font-size-regular-tablet-headline-3xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-body-lg {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-body-md {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-body-sm {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-body-xl {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-body-xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-body-2xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-body-3xl {
  syntax: "*";
  initial-value: 4rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-body-2xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-body-3xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-headline-lg {
  syntax: "*";
  initial-value: 4rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-headline-md {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-headline-sm {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-headline-xl {
  syntax: "*";
  initial-value: 5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-headline-xs {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-headline-2xl {
  syntax: "*";
  initial-value: 6rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-headline-2xs {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-headline-3xl {
  syntax: "*";
  initial-value: 7.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-desktop-headline-3xs {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-body-lg {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-body-md {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-body-sm {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-body-xl {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-body-xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-body-2xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-body-3xl {
  syntax: "*";
  initial-value: 4rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-body-2xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-body-3xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-headline-lg {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-headline-md {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-headline-sm {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-headline-xl {
  syntax: "*";
  initial-value: 4rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-headline-xs {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-headline-2xl {
  syntax: "*";
  initial-value: 5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-headline-2xs {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-headline-3xl {
  syntax: "*";
  initial-value: 6rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-tablet-headline-3xs {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-body-lg {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-body-md {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-body-sm {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-body-xl {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-body-xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-body-2xl {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-body-3xl {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-body-2xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-body-3xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-headline-lg {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-headline-md {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-headline-sm {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-headline-xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-headline-xs {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-headline-2xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-headline-2xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-headline-3xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-expressive-mobile-headline-3xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-body-lg {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-body-md {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-body-sm {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-body-xl {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-body-xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-body-2xl {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-body-3xl {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-body-2xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-body-3xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-headline-lg {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-headline-md {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-headline-sm {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-headline-xl {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-headline-xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-headline-2xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-headline-2xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-headline-3xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-desktop-headline-3xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-body-lg {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-body-md {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-body-sm {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-body-xl {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-body-xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-body-2xl {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-body-3xl {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-body-2xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-body-3xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-headline-lg {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-headline-md {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-headline-sm {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-headline-xl {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-headline-xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-headline-2xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-headline-2xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-headline-3xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-tablet-headline-3xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-body-lg {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-body-md {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-body-sm {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-body-xl {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-body-xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-body-2xl {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-body-3xl {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-body-2xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-body-3xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-headline-lg {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-headline-md {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-headline-sm {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-headline-xl {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-headline-xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-headline-2xl {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-headline-2xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-headline-3xl {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-base-icon-font-size-functional-mobile-headline-3xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-border-width-3xs {
  syntax: "*";
  initial-value: 0.0625rem;
  inherits: true;
}
@property --db-border-width-2xs {
  syntax: "*";
  initial-value: 0.125rem;
  inherits: true;
}
@property --db-border-width-xs {
  syntax: "*";
  initial-value: 0.25rem;
  inherits: true;
}
@property --db-border-width-sm {
  syntax: "*";
  initial-value: 0.375rem;
  inherits: true;
}
@property --db-border-width-md {
  syntax: "*";
  initial-value: 0.5rem;
  inherits: true;
}
@property --db-border-width-lg {
  syntax: "*";
  initial-value: 0.625rem;
  inherits: true;
}
@property --db-border-width-xl {
  syntax: "*";
  initial-value: 0.75rem;
  inherits: true;
}
@property --db-border-width-2xl {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-border-width-3xl {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-border-radius-3xs {
  syntax: "*";
  initial-value: 0.0625rem;
  inherits: true;
}
@property --db-border-radius-2xs {
  syntax: "*";
  initial-value: 0.125rem;
  inherits: true;
}
@property --db-border-radius-xs {
  syntax: "*";
  initial-value: 0.25rem;
  inherits: true;
}
@property --db-border-radius-sm {
  syntax: "*";
  initial-value: 0.5rem;
  inherits: true;
}
@property --db-border-radius-md {
  syntax: "*";
  initial-value: 0.75rem;
  inherits: true;
}
@property --db-border-radius-lg {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-border-radius-xl {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-border-radius-2xl {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-border-radius-3xl {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-border-radius-full {
  syntax: "*";
  initial-value: 500rem;
  inherits: true;
}
@property --db-elevation-sm {
  syntax: "*";
  initial-value: 0px 0px 1px -1px rgba(0, 0, 0, 0.2), 0px 0px 4px 1px rgba(0, 0, 0, 0.1215686275), 0px 0px 2px rgba(0, 0, 0, 0.1411764706);
  inherits: true;
}
@property --db-elevation-md {
  syntax: "*";
  initial-value: 0px 0px 2px -1px rgba(0, 0, 0, 0.2), 0px 0px 8px 1px rgba(0, 0, 0, 0.1215686275), 0px 0px 4px rgba(0, 0, 0, 0.1411764706);
  inherits: true;
}
@property --db-elevation-lg {
  syntax: "*";
  initial-value: 0px 0px 4px -3px rgba(0, 0, 0, 0.2), 0px 0px 16px 3px rgba(0, 0, 0, 0.1215686275), 0px 0px 8px 1px rgba(0, 0, 0, 0.1411764706);
  inherits: true;
}
@property --db-font-family-sans {
  syntax: "*";
  initial-value: "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-font-family-head {
  syntax: "*";
  initial-value: "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-sizing-fixed-mobile-header {
  syntax: "*";
  initial-value: 3.5rem;
  inherits: true;
}
@property --db-sizing-regular-3xl {
  syntax: "*";
  initial-value: 15rem;
  inherits: true;
}
@property --db-sizing-regular-2xl {
  syntax: "*";
  initial-value: 10rem;
  inherits: true;
}
@property --db-sizing-regular-xl {
  syntax: "*";
  initial-value: 6rem;
  inherits: true;
}
@property --db-sizing-regular-lg {
  syntax: "*";
  initial-value: 4rem;
  inherits: true;
}
@property --db-sizing-regular-md {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-sizing-regular-sm {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-sizing-regular-xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-sizing-regular-2xs {
  syntax: "*";
  initial-value: 0.75rem;
  inherits: true;
}
@property --db-sizing-regular-3xs {
  syntax: "*";
  initial-value: 0.5rem;
  inherits: true;
}
@property --db-sizing-functional-3xs {
  syntax: "*";
  initial-value: 0.375rem;
  inherits: true;
}
@property --db-sizing-functional-2xs {
  syntax: "*";
  initial-value: 0.625rem;
  inherits: true;
}
@property --db-sizing-functional-xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-sizing-functional-sm {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-sizing-functional-md {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-sizing-functional-lg {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-sizing-functional-xl {
  syntax: "*";
  initial-value: 5rem;
  inherits: true;
}
@property --db-sizing-functional-2xl {
  syntax: "*";
  initial-value: 7.5rem;
  inherits: true;
}
@property --db-sizing-functional-3xl {
  syntax: "*";
  initial-value: 10rem;
  inherits: true;
}
@property --db-sizing-expressive-3xs {
  syntax: "*";
  initial-value: 0.625rem;
  inherits: true;
}
@property --db-sizing-expressive-2xs {
  syntax: "*";
  initial-value: 0.875rem;
  inherits: true;
}
@property --db-sizing-expressive-xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-sizing-expressive-sm {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-sizing-expressive-md {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-sizing-expressive-lg {
  syntax: "*";
  initial-value: 5rem;
  inherits: true;
}
@property --db-sizing-expressive-xl {
  syntax: "*";
  initial-value: 7.5rem;
  inherits: true;
}
@property --db-sizing-expressive-2xl {
  syntax: "*";
  initial-value: 15rem;
  inherits: true;
}
@property --db-sizing-expressive-3xl {
  syntax: "*";
  initial-value: 30rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-desktop-3xl {
  syntax: "*";
  initial-value: 40rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-desktop-2xl {
  syntax: "*";
  initial-value: 30rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-desktop-xl {
  syntax: "*";
  initial-value: 15rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-desktop-lg {
  syntax: "*";
  initial-value: 7.5rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-desktop-md {
  syntax: "*";
  initial-value: 5rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-desktop-sm {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-desktop-xs {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-desktop-2xs {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-desktop-3xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-tablet-3xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-tablet-2xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-tablet-xs {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-tablet-sm {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-tablet-md {
  syntax: "*";
  initial-value: 4rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-tablet-lg {
  syntax: "*";
  initial-value: 6rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-tablet-xl {
  syntax: "*";
  initial-value: 10rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-tablet-2xl {
  syntax: "*";
  initial-value: 15rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-tablet-3xl {
  syntax: "*";
  initial-value: 30rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-mobile-3xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-mobile-2xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-mobile-xs {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-mobile-sm {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-mobile-md {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-mobile-lg {
  syntax: "*";
  initial-value: 5rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-mobile-xl {
  syntax: "*";
  initial-value: 7.5rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-mobile-2xl {
  syntax: "*";
  initial-value: 10rem;
  inherits: true;
}
@property --db-spacing-responsive-regular-mobile-3xl {
  syntax: "*";
  initial-value: 15rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-desktop-3xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-desktop-2xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-desktop-xs {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-desktop-sm {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-desktop-md {
  syntax: "*";
  initial-value: 4rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-desktop-lg {
  syntax: "*";
  initial-value: 6rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-desktop-xl {
  syntax: "*";
  initial-value: 10rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-desktop-2xl {
  syntax: "*";
  initial-value: 15rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-desktop-3xl {
  syntax: "*";
  initial-value: 30rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-tablet-3xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-tablet-2xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-tablet-xs {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-tablet-sm {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-tablet-md {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-tablet-lg {
  syntax: "*";
  initial-value: 5rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-tablet-xl {
  syntax: "*";
  initial-value: 7.5rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-tablet-2xl {
  syntax: "*";
  initial-value: 10rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-tablet-3xl {
  syntax: "*";
  initial-value: 15rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-mobile-3xs {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-mobile-2xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-mobile-xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-mobile-sm {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-mobile-md {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-mobile-lg {
  syntax: "*";
  initial-value: 4rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-mobile-xl {
  syntax: "*";
  initial-value: 6rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-mobile-2xl {
  syntax: "*";
  initial-value: 7.5rem;
  inherits: true;
}
@property --db-spacing-responsive-functional-mobile-3xl {
  syntax: "*";
  initial-value: 10rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-desktop-3xs {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-desktop-2xs {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-desktop-xs {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-desktop-sm {
  syntax: "*";
  initial-value: 5rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-desktop-md {
  syntax: "*";
  initial-value: 7.5rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-desktop-lg {
  syntax: "*";
  initial-value: 15rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-desktop-xl {
  syntax: "*";
  initial-value: 30rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-desktop-2xl {
  syntax: "*";
  initial-value: 40rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-desktop-3xl {
  syntax: "*";
  initial-value: 50rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-tablet-3xs {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-tablet-2xs {
  syntax: "*";
  initial-value: 1.75rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-tablet-xs {
  syntax: "*";
  initial-value: 2.5rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-tablet-sm {
  syntax: "*";
  initial-value: 4rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-tablet-md {
  syntax: "*";
  initial-value: 6rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-tablet-lg {
  syntax: "*";
  initial-value: 10rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-tablet-xl {
  syntax: "*";
  initial-value: 15rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-tablet-2xl {
  syntax: "*";
  initial-value: 30rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-tablet-3xl {
  syntax: "*";
  initial-value: 40rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-mobile-3xs {
  syntax: "*";
  initial-value: 1.25rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-mobile-2xs {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-mobile-xs {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-mobile-sm {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-mobile-md {
  syntax: "*";
  initial-value: 5rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-mobile-lg {
  syntax: "*";
  initial-value: 7.5rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-mobile-xl {
  syntax: "*";
  initial-value: 10rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-mobile-2xl {
  syntax: "*";
  initial-value: 15rem;
  inherits: true;
}
@property --db-spacing-responsive-expressive-mobile-3xl {
  syntax: "*";
  initial-value: 30rem;
  inherits: true;
}
@property --db-spacing-fixed-regular-3xs {
  syntax: "*";
  initial-value: 0.125rem;
  inherits: true;
}
@property --db-spacing-fixed-regular-2xs {
  syntax: "*";
  initial-value: 0.25rem;
  inherits: true;
}
@property --db-spacing-fixed-regular-xs {
  syntax: "*";
  initial-value: 0.5rem;
  inherits: true;
}
@property --db-spacing-fixed-regular-sm {
  syntax: "*";
  initial-value: 0.75rem;
  inherits: true;
}
@property --db-spacing-fixed-regular-md {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-spacing-fixed-regular-lg {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-spacing-fixed-regular-xl {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-spacing-fixed-regular-2xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-spacing-fixed-regular-3xl {
  syntax: "*";
  initial-value: 5rem;
  inherits: true;
}
@property --db-spacing-fixed-functional-3xs {
  syntax: "*";
  initial-value: 0.125rem;
  inherits: true;
}
@property --db-spacing-fixed-functional-2xs {
  syntax: "*";
  initial-value: 0.25rem;
  inherits: true;
}
@property --db-spacing-fixed-functional-xs {
  syntax: "*";
  initial-value: 0.375rem;
  inherits: true;
}
@property --db-spacing-fixed-functional-sm {
  syntax: "*";
  initial-value: 0.5rem;
  inherits: true;
}
@property --db-spacing-fixed-functional-md {
  syntax: "*";
  initial-value: 0.75rem;
  inherits: true;
}
@property --db-spacing-fixed-functional-lg {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-spacing-fixed-functional-xl {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-spacing-fixed-functional-2xl {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-spacing-fixed-functional-3xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-spacing-fixed-expressive-3xs {
  syntax: "*";
  initial-value: 0.25rem;
  inherits: true;
}
@property --db-spacing-fixed-expressive-2xs {
  syntax: "*";
  initial-value: 0.5rem;
  inherits: true;
}
@property --db-spacing-fixed-expressive-xs {
  syntax: "*";
  initial-value: 0.75rem;
  inherits: true;
}
@property --db-spacing-fixed-expressive-sm {
  syntax: "*";
  initial-value: 1rem;
  inherits: true;
}
@property --db-spacing-fixed-expressive-md {
  syntax: "*";
  initial-value: 1.5rem;
  inherits: true;
}
@property --db-spacing-fixed-expressive-lg {
  syntax: "*";
  initial-value: 2rem;
  inherits: true;
}
@property --db-spacing-fixed-expressive-xl {
  syntax: "*";
  initial-value: 3rem;
  inherits: true;
}
@property --db-spacing-fixed-expressive-2xl {
  syntax: "*";
  initial-value: 5rem;
  inherits: true;
}
@property --db-spacing-fixed-expressive-3xl {
  syntax: "*";
  initial-value: 7.5rem;
  inherits: true;
}
@property --db-transition-duration-extra-slow {
  syntax: "*";
  initial-value: 0.5s;
  inherits: true;
}
@property --db-transition-duration-slow {
  syntax: "*";
  initial-value: 0.4s;
  inherits: true;
}
@property --db-transition-duration-medium {
  syntax: "*";
  initial-value: 0.3s;
  inherits: true;
}
@property --db-transition-duration-fast {
  syntax: "*";
  initial-value: 0.15s;
  inherits: true;
}
@property --db-transition-duration-extra-fast {
  syntax: "*";
  initial-value: 0.075s;
  inherits: true;
}
@property --db-transition-timing-show {
  syntax: "*";
  initial-value: cubic-bezier(0.49, 0.1, 0.16, 1) normal both;
  inherits: true;
}
@property --db-transition-timing-hide {
  syntax: "*";
  initial-value: cubic-bezier(0.49, 0.1, 0.16, 1) normal both;
  inherits: true;
}
@property --db-transition-timing-emotional {
  syntax: "*";
  initial-value: cubic-bezier(0.27, 0.05, 0.4, 0.95);
  inherits: true;
}
@property --db-transition-timing-functional {
  syntax: "*";
  initial-value: cubic-bezier(0.15, 0, 0.45, 1);
  inherits: true;
}
@property --db-transition-straight-show {
  syntax: "*";
  initial-value: 0.5s cubic-bezier(0.49, 0.1, 0.16, 1) normal both;
  inherits: true;
}
@property --db-transition-straight-hide {
  syntax: "*";
  initial-value: 0.4s cubic-bezier(0.49, 0.1, 0.16, 1) normal both;
  inherits: true;
}
@property --db-transition-straight-emotional {
  syntax: "*";
  initial-value: 0.3s cubic-bezier(0.27, 0.05, 0.4, 0.95);
  inherits: true;
}
@property --db-transition-straight-functional {
  syntax: "*";
  initial-value: 0.3s cubic-bezier(0.15, 0, 0.45, 1);
  inherits: true;
}
@property --db-opacity-3xs {
  syntax: "<number>";
  initial-value: 0.08;
  inherits: true;
}
@property --db-opacity-2xs {
  syntax: "<number>";
  initial-value: 0.16;
  inherits: true;
}
@property --db-opacity-xs {
  syntax: "<number>";
  initial-value: 0.24;
  inherits: true;
}
@property --db-opacity-sm {
  syntax: "<number>";
  initial-value: 0.32;
  inherits: true;
}
@property --db-opacity-md {
  syntax: "<number>";
  initial-value: 0.4;
  inherits: true;
}
@property --db-opacity-lg {
  syntax: "<number>";
  initial-value: 0.68;
  inherits: true;
}
@property --db-opacity-xl {
  syntax: "<number>";
  initial-value: 0.76;
  inherits: true;
}
@property --db-opacity-2xl {
  syntax: "<number>";
  initial-value: 0.84;
  inherits: true;
}
@property --db-opacity-3xl {
  syntax: "<number>";
  initial-value: 0.92;
  inherits: true;
}
@property --db-opacity-full {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}
@property --db-typography-regular-desktop-headline-3xl {
  syntax: "*";
  initial-value: bolder 5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-headline-2xl {
  syntax: "*";
  initial-value: bolder 4rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-headline-xl {
  syntax: "*";
  initial-value: bolder 3rem/1.3333333333 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-headline-lg {
  syntax: "*";
  initial-value: bolder 2.5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-headline-md {
  syntax: "*";
  initial-value: bolder 2rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-headline-sm {
  syntax: "*";
  initial-value: bolder 1.75rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-headline-2xs {
  syntax: "*";
  initial-value: bolder 1.25rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-headline-3xs {
  syntax: "*";
  initial-value: bolder 1rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-headline-xs {
  syntax: "*";
  initial-value: bolder 1.5rem/1.1666666667 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-body-lg {
  syntax: "*";
  initial-value: normal 1.25rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-body-xl {
  syntax: "*";
  initial-value: normal 1.5rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-body-2xl {
  syntax: "*";
  initial-value: normal 1.75rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-body-3xl {
  syntax: "*";
  initial-value: normal 2rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-body-md {
  syntax: "*";
  initial-value: normal 1rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-body-sm {
  syntax: "*";
  initial-value: normal 0.875rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-body-2xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-body-3xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-desktop-body-xs {
  syntax: "*";
  initial-value: normal 0.75rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-body-lg {
  syntax: "*";
  initial-value: normal 1.25rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-body-md {
  syntax: "*";
  initial-value: normal 1rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-body-sm {
  syntax: "*";
  initial-value: normal 0.875rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-body-xl {
  syntax: "*";
  initial-value: normal 1.25rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-body-xs {
  syntax: "*";
  initial-value: normal 0.75rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-body-2xl {
  syntax: "*";
  initial-value: normal 1.25rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-body-3xl {
  syntax: "*";
  initial-value: normal 1.25rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-body-2xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-body-3xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-headline-lg {
  syntax: "*";
  initial-value: bolder 1.75rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-headline-md {
  syntax: "*";
  initial-value: bolder 1.5rem/1.1666666667 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-headline-sm {
  syntax: "*";
  initial-value: bolder 1.25rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-headline-xl {
  syntax: "*";
  initial-value: bolder 2rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-headline-xs {
  syntax: "*";
  initial-value: bolder 1rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-headline-2xl {
  syntax: "*";
  initial-value: bolder 2rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-headline-2xs {
  syntax: "*";
  initial-value: bolder 0.875rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-headline-3xl {
  syntax: "*";
  initial-value: bolder 2rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-mobile-headline-3xs {
  syntax: "*";
  initial-value: bolder 0.875rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-body-lg {
  syntax: "*";
  initial-value: normal 1.25rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-body-md {
  syntax: "*";
  initial-value: normal 1rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-body-sm {
  syntax: "*";
  initial-value: normal 0.875rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-body-xl {
  syntax: "*";
  initial-value: normal 1.5rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-body-xs {
  syntax: "*";
  initial-value: normal 0.75rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-body-2xl {
  syntax: "*";
  initial-value: normal 1.75rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-body-3xl {
  syntax: "*";
  initial-value: normal 2rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-body-2xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-body-3xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-headline-lg {
  syntax: "*";
  initial-value: bolder 2rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-headline-md {
  syntax: "*";
  initial-value: bolder 1.75rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-headline-sm {
  syntax: "*";
  initial-value: bolder 1.5rem/1.1666666667 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-headline-xl {
  syntax: "*";
  initial-value: bolder 2.5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-headline-xs {
  syntax: "*";
  initial-value: bolder 1.25rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-headline-2xl {
  syntax: "*";
  initial-value: bolder 3rem/1.3333333333 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-headline-2xs {
  syntax: "*";
  initial-value: bolder 1rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-headline-3xl {
  syntax: "*";
  initial-value: bolder 3rem/1.3333333333 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-regular-tablet-headline-3xs {
  syntax: "*";
  initial-value: bolder 1rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-body-lg {
  syntax: "*";
  initial-value: normal 1.5rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-body-md {
  syntax: "*";
  initial-value: normal 1.25rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-body-sm {
  syntax: "*";
  initial-value: normal 1rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-body-xl {
  syntax: "*";
  initial-value: normal 1.75rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-body-xs {
  syntax: "*";
  initial-value: normal 0.875rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-body-2xl {
  syntax: "*";
  initial-value: normal 2rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-body-3xl {
  syntax: "*";
  initial-value: normal 2.5rem/1.6 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-body-2xs {
  syntax: "*";
  initial-value: normal 0.75rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-body-3xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-headline-lg {
  syntax: "*";
  initial-value: bolder 3rem/1.3333333333 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-headline-md {
  syntax: "*";
  initial-value: bolder 2.5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-headline-sm {
  syntax: "*";
  initial-value: bolder 2rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-headline-xl {
  syntax: "*";
  initial-value: bolder 4rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-headline-xs {
  syntax: "*";
  initial-value: bolder 1.75rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-headline-2xl {
  syntax: "*";
  initial-value: bolder 5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-headline-2xs {
  syntax: "*";
  initial-value: bolder 1.5rem/1.1666666667 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-headline-3xl {
  syntax: "*";
  initial-value: bolder 6rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-desktop-headline-3xs {
  syntax: "*";
  initial-value: bolder 1.25rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-body-lg {
  syntax: "*";
  initial-value: normal 1.5rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-body-md {
  syntax: "*";
  initial-value: normal 1.25rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-body-sm {
  syntax: "*";
  initial-value: normal 1rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-body-xl {
  syntax: "*";
  initial-value: normal 1.75rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-body-xs {
  syntax: "*";
  initial-value: normal 0.875rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-body-2xl {
  syntax: "*";
  initial-value: normal 2rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-body-3xl {
  syntax: "*";
  initial-value: normal 2.5rem/1.6 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-body-2xs {
  syntax: "*";
  initial-value: normal 0.75rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-body-3xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-headline-lg {
  syntax: "*";
  initial-value: bolder 2.5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-headline-md {
  syntax: "*";
  initial-value: bolder 2rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-headline-sm {
  syntax: "*";
  initial-value: bolder 1.75rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-headline-xl {
  syntax: "*";
  initial-value: bolder 3rem/1.3333333333 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-headline-xs {
  syntax: "*";
  initial-value: bolder 1.5rem/1.1666666667 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-headline-2xl {
  syntax: "*";
  initial-value: bolder 4rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-headline-2xs {
  syntax: "*";
  initial-value: bolder 1.25rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-headline-3xl {
  syntax: "*";
  initial-value: bolder 5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-tablet-headline-3xs {
  syntax: "*";
  initial-value: bolder 1.25rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-body-lg {
  syntax: "*";
  initial-value: normal 1.5rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-body-md {
  syntax: "*";
  initial-value: normal 1.25rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-body-sm {
  syntax: "*";
  initial-value: normal 1rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-body-xl {
  syntax: "*";
  initial-value: normal 1.5rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-body-xs {
  syntax: "*";
  initial-value: normal 0.875rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-body-2xl {
  syntax: "*";
  initial-value: normal 1.5rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-body-3xl {
  syntax: "*";
  initial-value: normal 1.5rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-body-2xs {
  syntax: "*";
  initial-value: normal 0.75rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-body-3xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-headline-lg {
  syntax: "*";
  initial-value: bolder 2rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-headline-md {
  syntax: "*";
  initial-value: bolder 1.75rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-headline-sm {
  syntax: "*";
  initial-value: bolder 1.5rem/1.1666666667 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-headline-xl {
  syntax: "*";
  initial-value: bolder 2.5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-headline-xs {
  syntax: "*";
  initial-value: bolder 1.25rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-headline-2xl {
  syntax: "*";
  initial-value: bolder 2.5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-headline-2xs {
  syntax: "*";
  initial-value: bolder 1rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-headline-3xl {
  syntax: "*";
  initial-value: bolder 2.5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-expressive-mobile-headline-3xs {
  syntax: "*";
  initial-value: bolder 1rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-body-lg {
  syntax: "*";
  initial-value: normal 1rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-body-md {
  syntax: "*";
  initial-value: normal 0.875rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-body-sm {
  syntax: "*";
  initial-value: normal 0.75rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-body-xl {
  syntax: "*";
  initial-value: normal 1.25rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-body-xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-body-2xl {
  syntax: "*";
  initial-value: normal 1.5rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-body-3xl {
  syntax: "*";
  initial-value: normal 1.75rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-body-2xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-body-3xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-headline-lg {
  syntax: "*";
  initial-value: bolder 1.75rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-headline-md {
  syntax: "*";
  initial-value: bolder 1.5rem/1.1666666667 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-headline-sm {
  syntax: "*";
  initial-value: bolder 1.25rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-headline-xl {
  syntax: "*";
  initial-value: bolder 2rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-headline-xs {
  syntax: "*";
  initial-value: bolder 1rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-headline-2xl {
  syntax: "*";
  initial-value: bolder 2.5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-headline-2xs {
  syntax: "*";
  initial-value: bolder 0.875rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-headline-3xl {
  syntax: "*";
  initial-value: bolder 2.5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-desktop-headline-3xs {
  syntax: "*";
  initial-value: bolder 0.875rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-body-lg {
  syntax: "*";
  initial-value: normal 1rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-body-md {
  syntax: "*";
  initial-value: normal 0.875rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-body-sm {
  syntax: "*";
  initial-value: normal 0.75rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-body-xl {
  syntax: "*";
  initial-value: normal 1.25rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-body-xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-body-2xl {
  syntax: "*";
  initial-value: normal 1.5rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-body-3xl {
  syntax: "*";
  initial-value: normal 1.75rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-body-2xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-body-3xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-headline-lg {
  syntax: "*";
  initial-value: bolder 1.75rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-headline-md {
  syntax: "*";
  initial-value: bolder 1.5rem/1.1666666667 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-headline-sm {
  syntax: "*";
  initial-value: bolder 1.25rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-headline-xl {
  syntax: "*";
  initial-value: bolder 2rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-headline-xs {
  syntax: "*";
  initial-value: bolder 1rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-headline-2xl {
  syntax: "*";
  initial-value: bolder 2.5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-headline-2xs {
  syntax: "*";
  initial-value: bolder 0.875rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-headline-3xl {
  syntax: "*";
  initial-value: bolder 2.5rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-tablet-headline-3xs {
  syntax: "*";
  initial-value: bolder 0.875rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-body-lg {
  syntax: "*";
  initial-value: normal 1rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-body-md {
  syntax: "*";
  initial-value: normal 0.875rem/1.4285714286 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-body-sm {
  syntax: "*";
  initial-value: normal 0.75rem/1.3333333333 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-body-xl {
  syntax: "*";
  initial-value: normal 1rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-body-xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-body-2xl {
  syntax: "*";
  initial-value: normal 1rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-body-3xl {
  syntax: "*";
  initial-value: normal 1rem/1.5 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-body-2xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-body-3xs {
  syntax: "*";
  initial-value: normal 0.625rem/1.4 "DB Neo Screen Sans", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-headline-lg {
  syntax: "*";
  initial-value: bolder 1.5rem/1.1666666667 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-headline-md {
  syntax: "*";
  initial-value: bolder 1.25rem/1.2 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-headline-sm {
  syntax: "*";
  initial-value: bolder 1rem/1.25 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-headline-xl {
  syntax: "*";
  initial-value: bolder 1.75rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-headline-xs {
  syntax: "*";
  initial-value: bolder 0.875rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-headline-2xl {
  syntax: "*";
  initial-value: bolder 1.75rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-headline-2xs {
  syntax: "*";
  initial-value: bolder 0.875rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-headline-3xl {
  syntax: "*";
  initial-value: bolder 1.75rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-typography-functional-mobile-headline-3xs {
  syntax: "*";
  initial-value: bolder 0.875rem/1.1428571429 "DB Neo Screen Head", Helvetica, Arial, sans-serif;
  inherits: true;
}
@property --db-neutral-0 {
  syntax: "<color>";
  initial-value: #0d0e11;
  inherits: true;
}
@property --db-neutral-1 {
  syntax: "<color>";
  initial-value: #16181b;
  inherits: true;
}
@property --db-neutral-2 {
  syntax: "<color>";
  initial-value: #222428;
  inherits: true;
}
@property --db-neutral-3 {
  syntax: "<color>";
  initial-value: #2e3036;
  inherits: true;
}
@property --db-neutral-4 {
  syntax: "<color>";
  initial-value: #3b3e44;
  inherits: true;
}
@property --db-neutral-5 {
  syntax: "<color>";
  initial-value: #484b53;
  inherits: true;
}
@property --db-neutral-6 {
  syntax: "<color>";
  initial-value: #5a5e68;
  inherits: true;
}
@property --db-neutral-7 {
  syntax: "<color>";
  initial-value: #727782;
  inherits: true;
}
@property --db-neutral-8 {
  syntax: "<color>";
  initial-value: #8a919e;
  inherits: true;
}
@property --db-neutral-9 {
  syntax: "<color>";
  initial-value: #a6abb6;
  inherits: true;
}
@property --db-neutral-10 {
  syntax: "<color>";
  initial-value: #c3c7ce;
  inherits: true;
}
@property --db-neutral-11 {
  syntax: "<color>";
  initial-value: #e1e2e6;
  inherits: true;
}
@property --db-neutral-12 {
  syntax: "<color>";
  initial-value: #edeef0;
  inherits: true;
}
@property --db-neutral-13 {
  syntax: "<color>";
  initial-value: #f3f3f5;
  inherits: true;
}
@property --db-neutral-14 {
  syntax: "<color>";
  initial-value: #ffffff;
  inherits: true;
}
@property --db-neutral-origin-base {
  syntax: "<color>";
  initial-value: #646973;
  inherits: true;
}
@property --db-neutral-origin-light-default {
  syntax: "<color>";
  initial-value: #646973;
  inherits: true;
}
@property --db-neutral-origin-light-hovered {
  syntax: "<color>";
  initial-value: #2c2f34;
  inherits: true;
}
@property --db-neutral-origin-light-pressed {
  syntax: "<color>";
  initial-value: #4d5159;
  inherits: true;
}
@property --db-neutral-origin-dark-default {
  syntax: "<color>";
  initial-value: #646973;
  inherits: true;
}
@property --db-neutral-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #2c2f34;
  inherits: true;
}
@property --db-neutral-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #4d5159;
  inherits: true;
}
@property --db-neutral-on-origin-light-default {
  syntax: "<color>";
  initial-value: #f9f9fa;
  inherits: true;
}
@property --db-neutral-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #f9f9fa;
  inherits: true;
}
@property --db-informational-0 {
  syntax: "<color>";
  initial-value: #011018;
  inherits: true;
}
@property --db-informational-1 {
  syntax: "<color>";
  initial-value: #031a25;
  inherits: true;
}
@property --db-informational-2 {
  syntax: "<color>";
  initial-value: #062736;
  inherits: true;
}
@property --db-informational-3 {
  syntax: "<color>";
  initial-value: #0a3447;
  inherits: true;
}
@property --db-informational-4 {
  syntax: "<color>";
  initial-value: #0f4259;
  inherits: true;
}
@property --db-informational-5 {
  syntax: "<color>";
  initial-value: #14516c;
  inherits: true;
}
@property --db-informational-6 {
  syntax: "<color>";
  initial-value: #1b6586;
  inherits: true;
}
@property --db-informational-7 {
  syntax: "<color>";
  initial-value: #257fa8;
  inherits: true;
}
@property --db-informational-8 {
  syntax: "<color>";
  initial-value: #2e9acb;
  inherits: true;
}
@property --db-informational-9 {
  syntax: "<color>";
  initial-value: #38b6ef;
  inherits: true;
}
@property --db-informational-10 {
  syntax: "<color>";
  initial-value: #89cffa;
  inherits: true;
}
@property --db-informational-11 {
  syntax: "<color>";
  initial-value: #cae6fd;
  inherits: true;
}
@property --db-informational-12 {
  syntax: "<color>";
  initial-value: #e0f0fe;
  inherits: true;
}
@property --db-informational-13 {
  syntax: "<color>";
  initial-value: #ebf5fe;
  inherits: true;
}
@property --db-informational-14 {
  syntax: "<color>";
  initial-value: #f5faff;
  inherits: true;
}
@property --db-informational-origin-base {
  syntax: "<color>";
  initial-value: #309fd1;
  inherits: true;
}
@property --db-informational-origin-light-default {
  syntax: "<color>";
  initial-value: #309fd1;
  inherits: true;
}
@property --db-informational-origin-light-hovered {
  syntax: "<color>";
  initial-value: #96d2fb;
  inherits: true;
}
@property --db-informational-origin-light-pressed {
  syntax: "<color>";
  initial-value: #3abbf5;
  inherits: true;
}
@property --db-informational-origin-dark-default {
  syntax: "<color>";
  initial-value: #309fd1;
  inherits: true;
}
@property --db-informational-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #96d2fb;
  inherits: true;
}
@property --db-informational-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #3abbf5;
  inherits: true;
}
@property --db-informational-on-origin-light-default {
  syntax: "<color>";
  initial-value: #01080f;
  inherits: true;
}
@property --db-informational-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #01080f;
  inherits: true;
}
@property --db-warning-0 {
  syntax: "<color>";
  initial-value: #190b00;
  inherits: true;
}
@property --db-warning-1 {
  syntax: "<color>";
  initial-value: #271300;
  inherits: true;
}
@property --db-warning-2 {
  syntax: "<color>";
  initial-value: #381d00;
  inherits: true;
}
@property --db-warning-3 {
  syntax: "<color>";
  initial-value: #4a2800;
  inherits: true;
}
@property --db-warning-4 {
  syntax: "<color>";
  initial-value: #5c3400;
  inherits: true;
}
@property --db-warning-5 {
  syntax: "<color>";
  initial-value: #6f4000;
  inherits: true;
}
@property --db-warning-6 {
  syntax: "<color>";
  initial-value: #8a5100;
  inherits: true;
}
@property --db-warning-7 {
  syntax: "<color>";
  initial-value: #ad6600;
  inherits: true;
}
@property --db-warning-8 {
  syntax: "<color>";
  initial-value: #d17d00;
  inherits: true;
}
@property --db-warning-9 {
  syntax: "<color>";
  initial-value: #f69400;
  inherits: true;
}
@property --db-warning-10 {
  syntax: "<color>";
  initial-value: #ffb782;
  inherits: true;
}
@property --db-warning-11 {
  syntax: "<color>";
  initial-value: #ffdbc8;
  inherits: true;
}
@property --db-warning-12 {
  syntax: "<color>";
  initial-value: #ffeadf;
  inherits: true;
}
@property --db-warning-13 {
  syntax: "<color>";
  initial-value: #fff1ea;
  inherits: true;
}
@property --db-warning-14 {
  syntax: "<color>";
  initial-value: #fff8f5;
  inherits: true;
}
@property --db-warning-origin-base {
  syntax: "<color>";
  initial-value: #f39200;
  inherits: true;
}
@property --db-warning-origin-light-default {
  syntax: "<color>";
  initial-value: #f39200;
  inherits: true;
}
@property --db-warning-origin-light-hovered {
  syntax: "<color>";
  initial-value: #ffd9c3;
  inherits: true;
}
@property --db-warning-origin-light-pressed {
  syntax: "<color>";
  initial-value: #ffb47b;
  inherits: true;
}
@property --db-warning-origin-dark-default {
  syntax: "<color>";
  initial-value: #f39200;
  inherits: true;
}
@property --db-warning-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #ffd9c3;
  inherits: true;
}
@property --db-warning-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #ffb47b;
  inherits: true;
}
@property --db-warning-on-origin-light-default {
  syntax: "<color>";
  initial-value: #100500;
  inherits: true;
}
@property --db-warning-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #100500;
  inherits: true;
}
@property --db-successful-0 {
  syntax: "<color>";
  initial-value: #061100;
  inherits: true;
}
@property --db-successful-1 {
  syntax: "<color>";
  initial-value: #0c1b01;
  inherits: true;
}
@property --db-successful-2 {
  syntax: "<color>";
  initial-value: #142901;
  inherits: true;
}
@property --db-successful-3 {
  syntax: "<color>";
  initial-value: #1d3702;
  inherits: true;
}
@property --db-successful-4 {
  syntax: "<color>";
  initial-value: #264604;
  inherits: true;
}
@property --db-successful-5 {
  syntax: "<color>";
  initial-value: #305506;
  inherits: true;
}
@property --db-successful-6 {
  syntax: "<color>";
  initial-value: #3d6a09;
  inherits: true;
}
@property --db-successful-7 {
  syntax: "<color>";
  initial-value: #4e850f;
  inherits: true;
}
@property --db-successful-8 {
  syntax: "<color>";
  initial-value: #60a114;
  inherits: true;
}
@property --db-successful-9 {
  syntax: "<color>";
  initial-value: #72bf1a;
  inherits: true;
}
@property --db-successful-10 {
  syntax: "<color>";
  initial-value: #85dd20;
  inherits: true;
}
@property --db-successful-11 {
  syntax: "<color>";
  initial-value: #99fc26;
  inherits: true;
}
@property --db-successful-12 {
  syntax: "<color>";
  initial-value: #c3ff9d;
  inherits: true;
}
@property --db-successful-13 {
  syntax: "<color>";
  initial-value: #d9ffc4;
  inherits: true;
}
@property --db-successful-14 {
  syntax: "<color>";
  initial-value: #edffe4;
  inherits: true;
}
@property --db-successful-origin-base {
  syntax: "<color>";
  initial-value: #63a615;
  inherits: true;
}
@property --db-successful-origin-light-default {
  syntax: "<color>";
  initial-value: #63a615;
  inherits: true;
}
@property --db-successful-origin-light-hovered {
  syntax: "<color>";
  initial-value: #88e221;
  inherits: true;
}
@property --db-successful-origin-light-pressed {
  syntax: "<color>";
  initial-value: #75c31b;
  inherits: true;
}
@property --db-successful-origin-dark-default {
  syntax: "<color>";
  initial-value: #63a615;
  inherits: true;
}
@property --db-successful-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #88e221;
  inherits: true;
}
@property --db-successful-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #75c31b;
  inherits: true;
}
@property --db-successful-on-origin-light-default {
  syntax: "<color>";
  initial-value: #030900;
  inherits: true;
}
@property --db-successful-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #030900;
  inherits: true;
}
@property --db-critical-0 {
  syntax: "<color>";
  initial-value: #280001;
  inherits: true;
}
@property --db-critical-1 {
  syntax: "<color>";
  initial-value: #390001;
  inherits: true;
}
@property --db-critical-2 {
  syntax: "<color>";
  initial-value: #500003;
  inherits: true;
}
@property --db-critical-3 {
  syntax: "<color>";
  initial-value: #690004;
  inherits: true;
}
@property --db-critical-4 {
  syntax: "<color>";
  initial-value: #820007;
  inherits: true;
}
@property --db-critical-5 {
  syntax: "<color>";
  initial-value: #9c000a;
  inherits: true;
}
@property --db-critical-6 {
  syntax: "<color>";
  initial-value: #c00010;
  inherits: true;
}
@property --db-critical-7 {
  syntax: "<color>";
  initial-value: #ef0016;
  inherits: true;
}
@property --db-critical-8 {
  syntax: "<color>";
  initial-value: #ff5357;
  inherits: true;
}
@property --db-critical-9 {
  syntax: "<color>";
  initial-value: #ff888a;
  inherits: true;
}
@property --db-critical-10 {
  syntax: "<color>";
  initial-value: #ffb3b4;
  inherits: true;
}
@property --db-critical-11 {
  syntax: "<color>";
  initial-value: #ffdada;
  inherits: true;
}
@property --db-critical-12 {
  syntax: "<color>";
  initial-value: #ffe9e9;
  inherits: true;
}
@property --db-critical-13 {
  syntax: "<color>";
  initial-value: #fff0f0;
  inherits: true;
}
@property --db-critical-14 {
  syntax: "<color>";
  initial-value: #fff8f8;
  inherits: true;
}
@property --db-critical-origin-base {
  syntax: "<color>";
  initial-value: #ec0016;
  inherits: true;
}
@property --db-critical-origin-light-default {
  syntax: "<color>";
  initial-value: #ec0016;
  inherits: true;
}
@property --db-critical-origin-light-hovered {
  syntax: "<color>";
  initial-value: #7b0006;
  inherits: true;
}
@property --db-critical-origin-light-pressed {
  syntax: "<color>";
  initial-value: #bd000f;
  inherits: true;
}
@property --db-critical-origin-dark-default {
  syntax: "<color>";
  initial-value: #ec0016;
  inherits: true;
}
@property --db-critical-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #7b0006;
  inherits: true;
}
@property --db-critical-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #bd000f;
  inherits: true;
}
@property --db-critical-on-origin-light-default {
  syntax: "<color>";
  initial-value: #ffffff;
  inherits: true;
}
@property --db-critical-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #ffffff;
  inherits: true;
}
@property --db-yellow-0 {
  syntax: "<color>";
  initial-value: #130e00;
  inherits: true;
}
@property --db-yellow-1 {
  syntax: "<color>";
  initial-value: #1d1700;
  inherits: true;
}
@property --db-yellow-2 {
  syntax: "<color>";
  initial-value: #2b2300;
  inherits: true;
}
@property --db-yellow-3 {
  syntax: "<color>";
  initial-value: #3a3000;
  inherits: true;
}
@property --db-yellow-4 {
  syntax: "<color>";
  initial-value: #493d00;
  inherits: true;
}
@property --db-yellow-5 {
  syntax: "<color>";
  initial-value: #594a00;
  inherits: true;
}
@property --db-yellow-6 {
  syntax: "<color>";
  initial-value: #6f5d00;
  inherits: true;
}
@property --db-yellow-7 {
  syntax: "<color>";
  initial-value: #8c7600;
  inherits: true;
}
@property --db-yellow-8 {
  syntax: "<color>";
  initial-value: #aa8f00;
  inherits: true;
}
@property --db-yellow-9 {
  syntax: "<color>";
  initial-value: #c8a900;
  inherits: true;
}
@property --db-yellow-10 {
  syntax: "<color>";
  initial-value: #e8c400;
  inherits: true;
}
@property --db-yellow-11 {
  syntax: "<color>";
  initial-value: #ffe17c;
  inherits: true;
}
@property --db-yellow-12 {
  syntax: "<color>";
  initial-value: #ffedbc;
  inherits: true;
}
@property --db-yellow-13 {
  syntax: "<color>";
  initial-value: #fff3d5;
  inherits: true;
}
@property --db-yellow-14 {
  syntax: "<color>";
  initial-value: #fff9eb;
  inherits: true;
}
@property --db-yellow-origin-base {
  syntax: "<color>";
  initial-value: #ffd800;
  inherits: true;
}
@property --db-yellow-origin-light-default {
  syntax: "<color>";
  initial-value: #ffd800;
  inherits: true;
}
@property --db-yellow-origin-light-hovered {
  syntax: "<color>";
  initial-value: #bfa200;
  inherits: true;
}
@property --db-yellow-origin-light-pressed {
  syntax: "<color>";
  initial-value: #dfbc00;
  inherits: true;
}
@property --db-yellow-origin-dark-default {
  syntax: "<color>";
  initial-value: #ffd800;
  inherits: true;
}
@property --db-yellow-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #bfa200;
  inherits: true;
}
@property --db-yellow-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #dfbc00;
  inherits: true;
}
@property --db-yellow-on-origin-light-default {
  syntax: "<color>";
  initial-value: #0a0700;
  inherits: true;
}
@property --db-yellow-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #0a0700;
  inherits: true;
}
@property --db-orange-0 {
  syntax: "<color>";
  initial-value: #190b00;
  inherits: true;
}
@property --db-orange-1 {
  syntax: "<color>";
  initial-value: #271300;
  inherits: true;
}
@property --db-orange-2 {
  syntax: "<color>";
  initial-value: #381d00;
  inherits: true;
}
@property --db-orange-3 {
  syntax: "<color>";
  initial-value: #4a2800;
  inherits: true;
}
@property --db-orange-4 {
  syntax: "<color>";
  initial-value: #5c3400;
  inherits: true;
}
@property --db-orange-5 {
  syntax: "<color>";
  initial-value: #6f4000;
  inherits: true;
}
@property --db-orange-6 {
  syntax: "<color>";
  initial-value: #8a5100;
  inherits: true;
}
@property --db-orange-7 {
  syntax: "<color>";
  initial-value: #ad6600;
  inherits: true;
}
@property --db-orange-8 {
  syntax: "<color>";
  initial-value: #d17d00;
  inherits: true;
}
@property --db-orange-9 {
  syntax: "<color>";
  initial-value: #f69400;
  inherits: true;
}
@property --db-orange-10 {
  syntax: "<color>";
  initial-value: #ffb782;
  inherits: true;
}
@property --db-orange-11 {
  syntax: "<color>";
  initial-value: #ffdbc8;
  inherits: true;
}
@property --db-orange-12 {
  syntax: "<color>";
  initial-value: #ffeadf;
  inherits: true;
}
@property --db-orange-13 {
  syntax: "<color>";
  initial-value: #fff1ea;
  inherits: true;
}
@property --db-orange-14 {
  syntax: "<color>";
  initial-value: #fff8f5;
  inherits: true;
}
@property --db-orange-origin-base {
  syntax: "<color>";
  initial-value: #f39200;
  inherits: true;
}
@property --db-orange-origin-light-default {
  syntax: "<color>";
  initial-value: #f39200;
  inherits: true;
}
@property --db-orange-origin-light-hovered {
  syntax: "<color>";
  initial-value: #ffd9c3;
  inherits: true;
}
@property --db-orange-origin-light-pressed {
  syntax: "<color>";
  initial-value: #ffb47b;
  inherits: true;
}
@property --db-orange-origin-dark-default {
  syntax: "<color>";
  initial-value: #f39200;
  inherits: true;
}
@property --db-orange-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #ffd9c3;
  inherits: true;
}
@property --db-orange-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #ffb47b;
  inherits: true;
}
@property --db-orange-on-origin-light-default {
  syntax: "<color>";
  initial-value: #100500;
  inherits: true;
}
@property --db-orange-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #100500;
  inherits: true;
}
@property --db-red-0 {
  syntax: "<color>";
  initial-value: #280001;
  inherits: true;
}
@property --db-red-1 {
  syntax: "<color>";
  initial-value: #390001;
  inherits: true;
}
@property --db-red-2 {
  syntax: "<color>";
  initial-value: #500003;
  inherits: true;
}
@property --db-red-3 {
  syntax: "<color>";
  initial-value: #690004;
  inherits: true;
}
@property --db-red-4 {
  syntax: "<color>";
  initial-value: #820007;
  inherits: true;
}
@property --db-red-5 {
  syntax: "<color>";
  initial-value: #9c000a;
  inherits: true;
}
@property --db-red-6 {
  syntax: "<color>";
  initial-value: #c00010;
  inherits: true;
}
@property --db-red-7 {
  syntax: "<color>";
  initial-value: #ef0016;
  inherits: true;
}
@property --db-red-8 {
  syntax: "<color>";
  initial-value: #ff5357;
  inherits: true;
}
@property --db-red-9 {
  syntax: "<color>";
  initial-value: #ff888a;
  inherits: true;
}
@property --db-red-10 {
  syntax: "<color>";
  initial-value: #ffb3b4;
  inherits: true;
}
@property --db-red-11 {
  syntax: "<color>";
  initial-value: #ffdada;
  inherits: true;
}
@property --db-red-12 {
  syntax: "<color>";
  initial-value: #ffe9e9;
  inherits: true;
}
@property --db-red-13 {
  syntax: "<color>";
  initial-value: #fff0f0;
  inherits: true;
}
@property --db-red-14 {
  syntax: "<color>";
  initial-value: #fff8f8;
  inherits: true;
}
@property --db-red-origin-base {
  syntax: "<color>";
  initial-value: #ec0016;
  inherits: true;
}
@property --db-red-origin-light-default {
  syntax: "<color>";
  initial-value: #ec0016;
  inherits: true;
}
@property --db-red-origin-light-hovered {
  syntax: "<color>";
  initial-value: #7b0006;
  inherits: true;
}
@property --db-red-origin-light-pressed {
  syntax: "<color>";
  initial-value: #bd000f;
  inherits: true;
}
@property --db-red-origin-dark-default {
  syntax: "<color>";
  initial-value: #ec0016;
  inherits: true;
}
@property --db-red-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #7b0006;
  inherits: true;
}
@property --db-red-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #bd000f;
  inherits: true;
}
@property --db-red-on-origin-light-default {
  syntax: "<color>";
  initial-value: #ffffff;
  inherits: true;
}
@property --db-red-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #ffffff;
  inherits: true;
}
@property --db-pink-0 {
  syntax: "<color>";
  initial-value: #220310;
  inherits: true;
}
@property --db-pink-1 {
  syntax: "<color>";
  initial-value: #32061b;
  inherits: true;
}
@property --db-pink-2 {
  syntax: "<color>";
  initial-value: #460c28;
  inherits: true;
}
@property --db-pink-3 {
  syntax: "<color>";
  initial-value: #5c1335;
  inherits: true;
}
@property --db-pink-4 {
  syntax: "<color>";
  initial-value: #731a44;
  inherits: true;
}
@property --db-pink-5 {
  syntax: "<color>";
  initial-value: #8a2153;
  inherits: true;
}
@property --db-pink-6 {
  syntax: "<color>";
  initial-value: #aa2b67;
  inherits: true;
}
@property --db-pink-7 {
  syntax: "<color>";
  initial-value: #d43882;
  inherits: true;
}
@property --db-pink-8 {
  syntax: "<color>";
  initial-value: #ed5c9b;
  inherits: true;
}
@property --db-pink-9 {
  syntax: "<color>";
  initial-value: #f18cb2;
  inherits: true;
}
@property --db-pink-10 {
  syntax: "<color>";
  initial-value: #f5b5cb;
  inherits: true;
}
@property --db-pink-11 {
  syntax: "<color>";
  initial-value: #fadbe4;
  inherits: true;
}
@property --db-pink-12 {
  syntax: "<color>";
  initial-value: #fce9ef;
  inherits: true;
}
@property --db-pink-13 {
  syntax: "<color>";
  initial-value: #fdf1f4;
  inherits: true;
}
@property --db-pink-14 {
  syntax: "<color>";
  initial-value: #fef8fa;
  inherits: true;
}
@property --db-pink-origin-base {
  syntax: "<color>";
  initial-value: #e93e8f;
  inherits: true;
}
@property --db-pink-origin-light-default {
  syntax: "<color>";
  initial-value: #e93e8f;
  inherits: true;
}
@property --db-pink-origin-light-hovered {
  syntax: "<color>";
  initial-value: #f3a0be;
  inherits: true;
}
@property --db-pink-origin-light-pressed {
  syntax: "<color>";
  initial-value: #ef75a6;
  inherits: true;
}
@property --db-pink-origin-dark-default {
  syntax: "<color>";
  initial-value: #e93e8f;
  inherits: true;
}
@property --db-pink-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #f3a0be;
  inherits: true;
}
@property --db-pink-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #ef75a6;
  inherits: true;
}
@property --db-pink-on-origin-light-default {
  syntax: "<color>";
  initial-value: #160209;
  inherits: true;
}
@property --db-pink-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #160209;
  inherits: true;
}
@property --db-violet-0 {
  syntax: "<color>";
  initial-value: #17081c;
  inherits: true;
}
@property --db-violet-1 {
  syntax: "<color>";
  initial-value: #23102a;
  inherits: true;
}
@property --db-violet-2 {
  syntax: "<color>";
  initial-value: #33193c;
  inherits: true;
}
@property --db-violet-3 {
  syntax: "<color>";
  initial-value: #432350;
  inherits: true;
}
@property --db-violet-4 {
  syntax: "<color>";
  initial-value: #542e63;
  inherits: true;
}
@property --db-violet-5 {
  syntax: "<color>";
  initial-value: #663978;
  inherits: true;
}
@property --db-violet-6 {
  syntax: "<color>";
  initial-value: #7f4895;
  inherits: true;
}
@property --db-violet-7 {
  syntax: "<color>";
  initial-value: #9f5bba;
  inherits: true;
}
@property --db-violet-8 {
  syntax: "<color>";
  initial-value: #b47ace;
  inherits: true;
}
@property --db-violet-9 {
  syntax: "<color>";
  initial-value: #c69cda;
  inherits: true;
}
@property --db-violet-10 {
  syntax: "<color>";
  initial-value: #d8bde6;
  inherits: true;
}
@property --db-violet-11 {
  syntax: "<color>";
  initial-value: #ebdef2;
  inherits: true;
}
@property --db-violet-12 {
  syntax: "<color>";
  initial-value: #f3ebf7;
  inherits: true;
}
@property --db-violet-13 {
  syntax: "<color>";
  initial-value: #f7f2fa;
  inherits: true;
}
@property --db-violet-14 {
  syntax: "<color>";
  initial-value: #fbf8fc;
  inherits: true;
}
@property --db-violet-origin-base {
  syntax: "<color>";
  initial-value: #814997;
  inherits: true;
}
@property --db-violet-origin-light-default {
  syntax: "<color>";
  initial-value: #814997;
  inherits: true;
}
@property --db-violet-origin-light-hovered {
  syntax: "<color>";
  initial-value: #371c42;
  inherits: true;
}
@property --db-violet-origin-light-pressed {
  syntax: "<color>";
  initial-value: #623673;
  inherits: true;
}
@property --db-violet-origin-dark-default {
  syntax: "<color>";
  initial-value: #814997;
  inherits: true;
}
@property --db-violet-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #371c42;
  inherits: true;
}
@property --db-violet-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #623673;
  inherits: true;
}
@property --db-violet-on-origin-light-default {
  syntax: "<color>";
  initial-value: #fbf8fc;
  inherits: true;
}
@property --db-violet-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #fbf8fc;
  inherits: true;
}
@property --db-blue-0 {
  syntax: "<color>";
  initial-value: #010d29;
  inherits: true;
}
@property --db-blue-1 {
  syntax: "<color>";
  initial-value: #02153c;
  inherits: true;
}
@property --db-blue-2 {
  syntax: "<color>";
  initial-value: #042153;
  inherits: true;
}
@property --db-blue-3 {
  syntax: "<color>";
  initial-value: #072d6c;
  inherits: true;
}
@property --db-blue-4 {
  syntax: "<color>";
  initial-value: #0a3986;
  inherits: true;
}
@property --db-blue-5 {
  syntax: "<color>";
  initial-value: #0f46a1;
  inherits: true;
}
@property --db-blue-6 {
  syntax: "<color>";
  initial-value: #1558c6;
  inherits: true;
}
@property --db-blue-7 {
  syntax: "<color>";
  initial-value: #1d6ff7;
  inherits: true;
}
@property --db-blue-8 {
  syntax: "<color>";
  initial-value: #638bfa;
  inherits: true;
}
@property --db-blue-9 {
  syntax: "<color>";
  initial-value: #90a8fc;
  inherits: true;
}
@property --db-blue-10 {
  syntax: "<color>";
  initial-value: #b7c4fd;
  inherits: true;
}
@property --db-blue-11 {
  syntax: "<color>";
  initial-value: #dbe1fe;
  inherits: true;
}
@property --db-blue-12 {
  syntax: "<color>";
  initial-value: #eaedfe;
  inherits: true;
}
@property --db-blue-13 {
  syntax: "<color>";
  initial-value: #f1f3ff;
  inherits: true;
}
@property --db-blue-14 {
  syntax: "<color>";
  initial-value: #f8f9ff;
  inherits: true;
}
@property --db-blue-origin-base {
  syntax: "<color>";
  initial-value: #1455c0;
  inherits: true;
}
@property --db-blue-origin-light-default {
  syntax: "<color>";
  initial-value: #1455c0;
  inherits: true;
}
@property --db-blue-origin-light-hovered {
  syntax: "<color>";
  initial-value: #042052;
  inherits: true;
}
@property --db-blue-origin-light-pressed {
  syntax: "<color>";
  initial-value: #0c3f92;
  inherits: true;
}
@property --db-blue-origin-dark-default {
  syntax: "<color>";
  initial-value: #1455c0;
  inherits: true;
}
@property --db-blue-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #042052;
  inherits: true;
}
@property --db-blue-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #0c3f92;
  inherits: true;
}
@property --db-blue-on-origin-light-default {
  syntax: "<color>";
  initial-value: #f8f9ff;
  inherits: true;
}
@property --db-blue-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #f8f9ff;
  inherits: true;
}
@property --db-cyan-0 {
  syntax: "<color>";
  initial-value: #011018;
  inherits: true;
}
@property --db-cyan-1 {
  syntax: "<color>";
  initial-value: #031a25;
  inherits: true;
}
@property --db-cyan-2 {
  syntax: "<color>";
  initial-value: #062736;
  inherits: true;
}
@property --db-cyan-3 {
  syntax: "<color>";
  initial-value: #0a3447;
  inherits: true;
}
@property --db-cyan-4 {
  syntax: "<color>";
  initial-value: #0f4259;
  inherits: true;
}
@property --db-cyan-5 {
  syntax: "<color>";
  initial-value: #14516c;
  inherits: true;
}
@property --db-cyan-6 {
  syntax: "<color>";
  initial-value: #1b6586;
  inherits: true;
}
@property --db-cyan-7 {
  syntax: "<color>";
  initial-value: #257fa8;
  inherits: true;
}
@property --db-cyan-8 {
  syntax: "<color>";
  initial-value: #2e9acb;
  inherits: true;
}
@property --db-cyan-9 {
  syntax: "<color>";
  initial-value: #38b6ef;
  inherits: true;
}
@property --db-cyan-10 {
  syntax: "<color>";
  initial-value: #89cffa;
  inherits: true;
}
@property --db-cyan-11 {
  syntax: "<color>";
  initial-value: #cae6fd;
  inherits: true;
}
@property --db-cyan-12 {
  syntax: "<color>";
  initial-value: #e0f0fe;
  inherits: true;
}
@property --db-cyan-13 {
  syntax: "<color>";
  initial-value: #ebf5fe;
  inherits: true;
}
@property --db-cyan-14 {
  syntax: "<color>";
  initial-value: #f5faff;
  inherits: true;
}
@property --db-cyan-origin-base {
  syntax: "<color>";
  initial-value: #309fd1;
  inherits: true;
}
@property --db-cyan-origin-light-default {
  syntax: "<color>";
  initial-value: #309fd1;
  inherits: true;
}
@property --db-cyan-origin-light-hovered {
  syntax: "<color>";
  initial-value: #96d2fb;
  inherits: true;
}
@property --db-cyan-origin-light-pressed {
  syntax: "<color>";
  initial-value: #3abbf5;
  inherits: true;
}
@property --db-cyan-origin-dark-default {
  syntax: "<color>";
  initial-value: #309fd1;
  inherits: true;
}
@property --db-cyan-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #96d2fb;
  inherits: true;
}
@property --db-cyan-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #3abbf5;
  inherits: true;
}
@property --db-cyan-on-origin-light-default {
  syntax: "<color>";
  initial-value: #01080f;
  inherits: true;
}
@property --db-cyan-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #01080f;
  inherits: true;
}
@property --db-turquoise-0 {
  syntax: "<color>";
  initial-value: #001110;
  inherits: true;
}
@property --db-turquoise-1 {
  syntax: "<color>";
  initial-value: #001c1a;
  inherits: true;
}
@property --db-turquoise-2 {
  syntax: "<color>";
  initial-value: #002927;
  inherits: true;
}
@property --db-turquoise-3 {
  syntax: "<color>";
  initial-value: #003734;
  inherits: true;
}
@property --db-turquoise-4 {
  syntax: "<color>";
  initial-value: #004642;
  inherits: true;
}
@property --db-turquoise-5 {
  syntax: "<color>";
  initial-value: #005551;
  inherits: true;
}
@property --db-turquoise-6 {
  syntax: "<color>";
  initial-value: #006a65;
  inherits: true;
}
@property --db-turquoise-7 {
  syntax: "<color>";
  initial-value: #00857f;
  inherits: true;
}
@property --db-turquoise-8 {
  syntax: "<color>";
  initial-value: #00a29b;
  inherits: true;
}
@property --db-turquoise-9 {
  syntax: "<color>";
  initial-value: #00bfb7;
  inherits: true;
}
@property --db-turquoise-10 {
  syntax: "<color>";
  initial-value: #00ddd4;
  inherits: true;
}
@property --db-turquoise-11 {
  syntax: "<color>";
  initial-value: #00fcf2;
  inherits: true;
}
@property --db-turquoise-12 {
  syntax: "<color>";
  initial-value: #9bfff8;
  inherits: true;
}
@property --db-turquoise-13 {
  syntax: "<color>";
  initial-value: #c3fffa;
  inherits: true;
}
@property --db-turquoise-14 {
  syntax: "<color>";
  initial-value: #e3fffd;
  inherits: true;
}
@property --db-turquoise-origin-base {
  syntax: "<color>";
  initial-value: #00a099;
  inherits: true;
}
@property --db-turquoise-origin-light-default {
  syntax: "<color>";
  initial-value: #00a099;
  inherits: true;
}
@property --db-turquoise-origin-light-hovered {
  syntax: "<color>";
  initial-value: #00dcd2;
  inherits: true;
}
@property --db-turquoise-origin-light-pressed {
  syntax: "<color>";
  initial-value: #00bdb5;
  inherits: true;
}
@property --db-turquoise-origin-dark-default {
  syntax: "<color>";
  initial-value: #00a099;
  inherits: true;
}
@property --db-turquoise-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #00dcd2;
  inherits: true;
}
@property --db-turquoise-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #00bdb5;
  inherits: true;
}
@property --db-turquoise-on-origin-light-default {
  syntax: "<color>";
  initial-value: #000908;
  inherits: true;
}
@property --db-turquoise-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #000908;
  inherits: true;
}
@property --db-green-0 {
  syntax: "<color>";
  initial-value: #041103;
  inherits: true;
}
@property --db-green-1 {
  syntax: "<color>";
  initial-value: #091c06;
  inherits: true;
}
@property --db-green-2 {
  syntax: "<color>";
  initial-value: #10290b;
  inherits: true;
}
@property --db-green-3 {
  syntax: "<color>";
  initial-value: #173712;
  inherits: true;
}
@property --db-green-4 {
  syntax: "<color>";
  initial-value: #1f4619;
  inherits: true;
}
@property --db-green-5 {
  syntax: "<color>";
  initial-value: #275520;
  inherits: true;
}
@property --db-green-6 {
  syntax: "<color>";
  initial-value: #336a2a;
  inherits: true;
}
@property --db-green-7 {
  syntax: "<color>";
  initial-value: #428636;
  inherits: true;
}
@property --db-green-8 {
  syntax: "<color>";
  initial-value: #51a243;
  inherits: true;
}
@property --db-green-9 {
  syntax: "<color>";
  initial-value: #61c051;
  inherits: true;
}
@property --db-green-10 {
  syntax: "<color>";
  initial-value: #71de5f;
  inherits: true;
}
@property --db-green-11 {
  syntax: "<color>";
  initial-value: #96f989;
  inherits: true;
}
@property --db-green-12 {
  syntax: "<color>";
  initial-value: #c7fbc2;
  inherits: true;
}
@property --db-green-13 {
  syntax: "<color>";
  initial-value: #dbfcd8;
  inherits: true;
}
@property --db-green-14 {
  syntax: "<color>";
  initial-value: #eefeec;
  inherits: true;
}
@property --db-green-origin-base {
  syntax: "<color>";
  initial-value: #408335;
  inherits: true;
}
@property --db-green-origin-light-default {
  syntax: "<color>";
  initial-value: #408335;
  inherits: true;
}
@property --db-green-origin-light-hovered {
  syntax: "<color>";
  initial-value: #1c4116;
  inherits: true;
}
@property --db-green-origin-light-pressed {
  syntax: "<color>";
  initial-value: #316828;
  inherits: true;
}
@property --db-green-origin-dark-default {
  syntax: "<color>";
  initial-value: #408335;
  inherits: true;
}
@property --db-green-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #1c4116;
  inherits: true;
}
@property --db-green-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #316828;
  inherits: true;
}
@property --db-green-on-origin-light-default {
  syntax: "<color>";
  initial-value: #f7fef6;
  inherits: true;
}
@property --db-green-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #f7fef6;
  inherits: true;
}
@property --db-light-green-0 {
  syntax: "<color>";
  initial-value: #061100;
  inherits: true;
}
@property --db-light-green-1 {
  syntax: "<color>";
  initial-value: #0c1b01;
  inherits: true;
}
@property --db-light-green-2 {
  syntax: "<color>";
  initial-value: #142901;
  inherits: true;
}
@property --db-light-green-3 {
  syntax: "<color>";
  initial-value: #1d3702;
  inherits: true;
}
@property --db-light-green-4 {
  syntax: "<color>";
  initial-value: #264604;
  inherits: true;
}
@property --db-light-green-5 {
  syntax: "<color>";
  initial-value: #305506;
  inherits: true;
}
@property --db-light-green-6 {
  syntax: "<color>";
  initial-value: #3d6a09;
  inherits: true;
}
@property --db-light-green-7 {
  syntax: "<color>";
  initial-value: #4e850f;
  inherits: true;
}
@property --db-light-green-8 {
  syntax: "<color>";
  initial-value: #60a114;
  inherits: true;
}
@property --db-light-green-9 {
  syntax: "<color>";
  initial-value: #72bf1a;
  inherits: true;
}
@property --db-light-green-10 {
  syntax: "<color>";
  initial-value: #85dd20;
  inherits: true;
}
@property --db-light-green-11 {
  syntax: "<color>";
  initial-value: #99fc26;
  inherits: true;
}
@property --db-light-green-12 {
  syntax: "<color>";
  initial-value: #c3ff9d;
  inherits: true;
}
@property --db-light-green-13 {
  syntax: "<color>";
  initial-value: #d9ffc4;
  inherits: true;
}
@property --db-light-green-14 {
  syntax: "<color>";
  initial-value: #edffe4;
  inherits: true;
}
@property --db-light-green-origin-base {
  syntax: "<color>";
  initial-value: #63a615;
  inherits: true;
}
@property --db-light-green-origin-light-default {
  syntax: "<color>";
  initial-value: #63a615;
  inherits: true;
}
@property --db-light-green-origin-light-hovered {
  syntax: "<color>";
  initial-value: #88e221;
  inherits: true;
}
@property --db-light-green-origin-light-pressed {
  syntax: "<color>";
  initial-value: #75c31b;
  inherits: true;
}
@property --db-light-green-origin-dark-default {
  syntax: "<color>";
  initial-value: #63a615;
  inherits: true;
}
@property --db-light-green-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #88e221;
  inherits: true;
}
@property --db-light-green-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #75c31b;
  inherits: true;
}
@property --db-light-green-on-origin-light-default {
  syntax: "<color>";
  initial-value: #030900;
  inherits: true;
}
@property --db-light-green-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #030900;
  inherits: true;
}
@property --db-burgundy-0 {
  syntax: "<color>";
  initial-value: #1e060c;
  inherits: true;
}
@property --db-burgundy-1 {
  syntax: "<color>";
  initial-value: #2d0d14;
  inherits: true;
}
@property --db-burgundy-2 {
  syntax: "<color>";
  initial-value: #40151f;
  inherits: true;
}
@property --db-burgundy-3 {
  syntax: "<color>";
  initial-value: #541e2b;
  inherits: true;
}
@property --db-burgundy-4 {
  syntax: "<color>";
  initial-value: #682837;
  inherits: true;
}
@property --db-burgundy-5 {
  syntax: "<color>";
  initial-value: #7e3144;
  inherits: true;
}
@property --db-burgundy-6 {
  syntax: "<color>";
  initial-value: #9c3f55;
  inherits: true;
}
@property --db-burgundy-7 {
  syntax: "<color>";
  initial-value: #c2516c;
  inherits: true;
}
@property --db-burgundy-8 {
  syntax: "<color>";
  initial-value: #d77187;
  inherits: true;
}
@property --db-burgundy-9 {
  syntax: "<color>";
  initial-value: #df98a5;
  inherits: true;
}
@property --db-burgundy-10 {
  syntax: "<color>";
  initial-value: #e8bbc3;
  inherits: true;
}
@property --db-burgundy-11 {
  syntax: "<color>";
  initial-value: #f3dde1;
  inherits: true;
}
@property --db-burgundy-12 {
  syntax: "<color>";
  initial-value: #f8ebed;
  inherits: true;
}
@property --db-burgundy-13 {
  syntax: "<color>";
  initial-value: #faf2f3;
  inherits: true;
}
@property --db-burgundy-14 {
  syntax: "<color>";
  initial-value: #fcf8f9;
  inherits: true;
}
@property --db-burgundy-origin-base {
  syntax: "<color>";
  initial-value: #a9455d;
  inherits: true;
}
@property --db-burgundy-origin-light-default {
  syntax: "<color>";
  initial-value: #a9455d;
  inherits: true;
}
@property --db-burgundy-origin-light-hovered {
  syntax: "<color>";
  initial-value: #4f1c28;
  inherits: true;
}
@property --db-burgundy-origin-light-pressed {
  syntax: "<color>";
  initial-value: #833447;
  inherits: true;
}
@property --db-burgundy-origin-dark-default {
  syntax: "<color>";
  initial-value: #a9455d;
  inherits: true;
}
@property --db-burgundy-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #4f1c28;
  inherits: true;
}
@property --db-burgundy-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #833447;
  inherits: true;
}
@property --db-burgundy-on-origin-light-default {
  syntax: "<color>";
  initial-value: #fcf8f9;
  inherits: true;
}
@property --db-burgundy-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #fcf8f9;
  inherits: true;
}
@property --db-brand-0 {
  syntax: "<color>";
  initial-value: #280001;
  inherits: true;
}
@property --db-brand-1 {
  syntax: "<color>";
  initial-value: #390001;
  inherits: true;
}
@property --db-brand-2 {
  syntax: "<color>";
  initial-value: #500003;
  inherits: true;
}
@property --db-brand-3 {
  syntax: "<color>";
  initial-value: #690004;
  inherits: true;
}
@property --db-brand-4 {
  syntax: "<color>";
  initial-value: #820007;
  inherits: true;
}
@property --db-brand-5 {
  syntax: "<color>";
  initial-value: #9c000a;
  inherits: true;
}
@property --db-brand-6 {
  syntax: "<color>";
  initial-value: #c00010;
  inherits: true;
}
@property --db-brand-7 {
  syntax: "<color>";
  initial-value: #ef0016;
  inherits: true;
}
@property --db-brand-8 {
  syntax: "<color>";
  initial-value: #ff5357;
  inherits: true;
}
@property --db-brand-9 {
  syntax: "<color>";
  initial-value: #ff888a;
  inherits: true;
}
@property --db-brand-10 {
  syntax: "<color>";
  initial-value: #ffb3b4;
  inherits: true;
}
@property --db-brand-11 {
  syntax: "<color>";
  initial-value: #ffdada;
  inherits: true;
}
@property --db-brand-12 {
  syntax: "<color>";
  initial-value: #ffe9e9;
  inherits: true;
}
@property --db-brand-13 {
  syntax: "<color>";
  initial-value: #fff0f0;
  inherits: true;
}
@property --db-brand-14 {
  syntax: "<color>";
  initial-value: #fff8f8;
  inherits: true;
}
@property --db-brand-origin-base {
  syntax: "<color>";
  initial-value: #ec0016;
  inherits: true;
}
@property --db-brand-origin-light-default {
  syntax: "<color>";
  initial-value: #ec0016;
  inherits: true;
}
@property --db-brand-origin-light-hovered {
  syntax: "<color>";
  initial-value: #7b0006;
  inherits: true;
}
@property --db-brand-origin-light-pressed {
  syntax: "<color>";
  initial-value: #bd000f;
  inherits: true;
}
@property --db-brand-origin-dark-default {
  syntax: "<color>";
  initial-value: #ec0016;
  inherits: true;
}
@property --db-brand-origin-dark-hovered {
  syntax: "<color>";
  initial-value: #7b0006;
  inherits: true;
}
@property --db-brand-origin-dark-pressed {
  syntax: "<color>";
  initial-value: #bd000f;
  inherits: true;
}
@property --db-brand-on-origin-light-default {
  syntax: "<color>";
  initial-value: #ffffff;
  inherits: true;
}
@property --db-brand-on-origin-dark-default {
  syntax: "<color>";
  initial-value: #ffffff;
  inherits: true;
}
:is(:root, :host) {
  --db-textarea-resizer-image: url("@db-ux/db-theme/build/images/resize_handle_corner.svg");
  --db-textarea-scrollbar-button-decrement: url("@db-ux/db-theme/build/images/chevron_down.svg");
  --db-textarea-scrollbar-button-increment: url("@db-ux/db-theme/build/images/chevron_up.svg");
  --db-logo-aspect-ratio: 10/7;
  --db-logo-url: url("@db-ux/db-theme/build/images/logo.svg");
  --db-logo-aspect-ratio-short: 10/7;
  --db-logo-url-short: url("@db-ux/db-theme/build/images/logo.svg");
}

[data-logo=db-cargo] {
  --db-logo-url: url("@db-ux/db-theme/build/images/cargo/logo.svg");
  --db-logo-aspect-ratio: 535/141;
}

[data-logo=db-connect] {
  --db-logo-url: url("@db-ux/db-theme/build/images/connect/logo.svg");
  --db-logo-aspect-ratio: 661/141;
}

[data-logo=db-eco-group] {
  --db-logo-url: url("@db-ux/db-theme/build/images/eco-group/logo.svg");
  --db-logo-aspect-ratio: 295/47;
}

[data-logo=db-energie] {
  --db-logo-url: url("@db-ux/db-theme/build/images/energie/logo.svg");
  --db-logo-aspect-ratio: 208/47;
}

[data-logo=db-fahrzeuginstandhaltung] {
  --db-logo-url: url("@db-ux/db-theme/build/images/fahrzeuginstandhaltung/logo.svg");
  --db-logo-aspect-ratio: 1471/141;
}

[data-logo=db-projekt-stuttgart-ulm] {
  --db-logo-url: url("@db-ux/db-theme/build/images/projekt-stuttgart-ulm/logo.svg");
  --db-logo-aspect-ratio: 1342/141;
}

[data-logo=db-regio] {
  --db-logo-url: url("@db-ux/db-theme/build/images/regio/logo.svg");
  --db-logo-aspect-ratio: 176/47;
}

[data-logo=db-services] {
  --db-logo-url: url("@db-ux/db-theme/build/images/services/logo.svg");
  --db-logo-aspect-ratio: 220/47;
}

[data-logo=db-sicherheit] {
  --db-logo-url: url("@db-ux/db-theme/build/images/sicherheit/logo.svg");
  --db-logo-aspect-ratio: 251/47;
}

[data-logo=db-systel] {
  --db-logo-url: url("@db-ux/db-theme/build/images/systel/logo.svg");
  --db-logo-aspect-ratio: 544/141;
}

[data-logo=db-systemtechnik] {
  --db-logo-url: url("@db-ux/db-theme/build/images/systemtechnik/logo.svg");
  --db-logo-aspect-ratio: 331/47;
}

[data-logo=db-vertrieb] {
  --db-logo-url: url("@db-ux/db-theme/build/images/vertrieb/logo.svg");
  --db-logo-aspect-ratio: 661/141;
}

@font-face {
  font-family: "DB Neo Screen Sans";
  font-style: normal;
  font-weight: 300;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreensans-digitalregular.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Sans";
  font-style: normal;
  font-weight: 400;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreensans-regular.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Sans";
  font-style: normal;
  font-weight: 500;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreensans-medium.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Sans";
  font-style: normal;
  font-weight: 600;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreensans-semibold.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Sans";
  font-style: normal;
  font-weight: 700;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreensans-bold.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Sans";
  font-style: normal;
  font-weight: 900;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreensans-black.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Head";
  font-style: normal;
  font-weight: 300;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreenhead-light.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Head";
  font-style: normal;
  font-weight: 400;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreenhead-regular.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Head";
  font-style: normal;
  font-weight: 900;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreenhead-black.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Sans";
  font-style: italic;
  font-weight: 300;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreensans-digitalregularitalic.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Sans";
  font-style: italic;
  font-weight: 400;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreensans-regularitalic.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Sans";
  font-style: italic;
  font-weight: 500;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreensans-mediumitalic.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Sans";
  font-style: italic;
  font-weight: 600;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreensans-semibolditalic.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Sans";
  font-style: italic;
  font-weight: 700;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreensans-bolditalic.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Sans";
  font-style: italic;
  font-weight: 900;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreensans-blackitalic.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Head";
  font-style: italic;
  font-weight: 300;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreenhead-lightitalic.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Head";
  font-style: italic;
  font-weight: 400;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreenhead-regularitalic.woff2") format("woff2");
}
@font-face {
  font-family: "DB Neo Screen Head";
  font-style: italic;
  font-weight: 900;
  src: url("@db-ux/db-theme-fonts/build/assets/dbneoscreenhead-blackitalic.woff2") format("woff2");
}
@property --db-font-family-sans {
  syntax: "*";
  initial-value: "DB Neo Screen Sans", helvetica, arial, sans-serif;
  inherits: true;
}
@property --db-font-family-head {
  syntax: "*";
  initial-value: "DB Neo Screen Head", helvetica, arial, sans-serif;
  inherits: true;
}
:root {
  /* Workaround for old implementation */
  --db-font-family-sans: "DB Neo Screen Sans", helvetica, arial, sans-serif;
  --db-font-family-head: "DB Neo Screen Head", helvetica, arial, sans-serif;
}

@font-face {
  font-display: block;
  font-family: "db-default";
  font-style: normal;
  font-weight: normal;
  src: url("@db-ux/db-theme-icons/build/fonts/default/db.woff2") format("woff2");
}
[data-icon-variant=db],
[data-icon-variant-before=db] {
  --db-icon-font-family: "db-default", icon-font-fallback;
}

[data-icon-variant-after=db] {
  --db-icon-font-family: "db-default", icon-font-fallback;
}

[data-icon-variant=db-default],
[data-icon-variant-before=db-default] {
  --db-icon-font-family: "db-default", icon-font-fallback;
}

[data-icon-variant-after=db-default] {
  --db-icon-font-family: "db-default", icon-font-fallback;
}

@font-face {
  font-display: block;
  font-family: "db-default";
  font-style: normal;
  font-weight: 12;
  src: url("@db-ux/db-theme-icons/build/fonts/default_12/db.woff2") format("woff2");
}
[data-icon-weight="12"],
[data-icon-weight-before="12"] {
  --db-icon-font-weight: 12;
}

[data-icon-weight-after="12"] {
  --db-icon-font-weight: 12;
}

@font-face {
  font-display: block;
  font-family: "db-default";
  font-style: normal;
  font-weight: 14;
  src: url("@db-ux/db-theme-icons/build/fonts/default_14/db.woff2") format("woff2");
}
[data-icon-weight="14"],
[data-icon-weight-before="14"] {
  --db-icon-font-weight: 14;
}

[data-icon-weight-after="14"] {
  --db-icon-font-weight: 14;
}

@font-face {
  font-display: block;
  font-family: "db-default";
  font-style: normal;
  font-weight: 16;
  src: url("@db-ux/db-theme-icons/build/fonts/default_16/db.woff2") format("woff2");
}
[data-icon-weight="16"],
[data-icon-weight-before="16"] {
  --db-icon-font-weight: 16;
}

[data-icon-weight-after="16"] {
  --db-icon-font-weight: 16;
}

@font-face {
  font-display: block;
  font-family: "db-default";
  font-style: normal;
  font-weight: 20;
  src: url("@db-ux/db-theme-icons/build/fonts/default_20/db.woff2") format("woff2");
}
[data-icon-weight="20"],
[data-icon-weight-before="20"] {
  --db-icon-font-weight: 20;
}

[data-icon-weight-after="20"] {
  --db-icon-font-weight: 20;
}

@font-face {
  font-display: block;
  font-family: "db-default";
  font-style: normal;
  font-weight: 24;
  src: url("@db-ux/db-theme-icons/build/fonts/default_24/db.woff2") format("woff2");
}
[data-icon-weight="24"],
[data-icon-weight-before="24"] {
  --db-icon-font-weight: 24;
}

[data-icon-weight-after="24"] {
  --db-icon-font-weight: 24;
}

@font-face {
  font-display: block;
  font-family: "db-default";
  font-style: normal;
  font-weight: 32;
  src: url("@db-ux/db-theme-icons/build/fonts/default_32/db.woff2") format("woff2");
}
[data-icon-weight="32"],
[data-icon-weight-before="32"] {
  --db-icon-font-weight: 32;
}

[data-icon-weight-after="32"] {
  --db-icon-font-weight: 32;
}

@font-face {
  font-display: block;
  font-family: "db-filled";
  font-style: normal;
  font-weight: normal;
  src: url("@db-ux/db-theme-icons/build/fonts/filled/db.woff2") format("woff2");
}
[data-icon-variant=db-filled],
[data-icon-variant-before=db-filled] {
  --db-icon-font-family: "db-filled", icon-font-fallback;
}

[data-icon-variant-after=db-filled] {
  --db-icon-font-family: "db-filled", icon-font-fallback;
}

@font-face {
  font-display: block;
  font-family: "db-filled";
  font-style: normal;
  font-weight: 12;
  src: url("@db-ux/db-theme-icons/build/fonts/filled_12/db.woff2") format("woff2");
}
[data-icon-weight="12"],
[data-icon-weight-before="12"] {
  --db-icon-font-weight: 12;
}

[data-icon-weight-after="12"] {
  --db-icon-font-weight: 12;
}

@font-face {
  font-display: block;
  font-family: "db-filled";
  font-style: normal;
  font-weight: 14;
  src: url("@db-ux/db-theme-icons/build/fonts/filled_14/db.woff2") format("woff2");
}
[data-icon-weight="14"],
[data-icon-weight-before="14"] {
  --db-icon-font-weight: 14;
}

[data-icon-weight-after="14"] {
  --db-icon-font-weight: 14;
}

@font-face {
  font-display: block;
  font-family: "db-filled";
  font-style: normal;
  font-weight: 16;
  src: url("@db-ux/db-theme-icons/build/fonts/filled_16/db.woff2") format("woff2");
}
[data-icon-weight="16"],
[data-icon-weight-before="16"] {
  --db-icon-font-weight: 16;
}

[data-icon-weight-after="16"] {
  --db-icon-font-weight: 16;
}

@font-face {
  font-display: block;
  font-family: "db-filled";
  font-style: normal;
  font-weight: 20;
  src: url("@db-ux/db-theme-icons/build/fonts/filled_20/db.woff2") format("woff2");
}
[data-icon-weight="20"],
[data-icon-weight-before="20"] {
  --db-icon-font-weight: 20;
}

[data-icon-weight-after="20"] {
  --db-icon-font-weight: 20;
}

@font-face {
  font-display: block;
  font-family: "db-filled";
  font-style: normal;
  font-weight: 24;
  src: url("@db-ux/db-theme-icons/build/fonts/filled_24/db.woff2") format("woff2");
}
[data-icon-weight="24"],
[data-icon-weight-before="24"] {
  --db-icon-font-weight: 24;
}

[data-icon-weight-after="24"] {
  --db-icon-font-weight: 24;
}

@font-face {
  font-display: block;
  font-family: "db-filled";
  font-style: normal;
  font-weight: 32;
  src: url("@db-ux/db-theme-icons/build/fonts/filled_32/db.woff2") format("woff2");
}
[data-icon-weight="32"],
[data-icon-weight-before="32"] {
  --db-icon-font-weight: 32;
}

[data-icon-weight-after="32"] {
  --db-icon-font-weight: 32;
}

@property --db-icon-default-font-family {
  syntax: "*";
  initial-value: "db-default", icon-font-fallback;
  inherits: false;
}
@property --db-icon-filled-font-family {
  syntax: "*";
  initial-value: "db-filled", icon-font-fallback;
  inherits: false;
}
}
@layer db-ux{
@property --db-container-3xs{syntax:"*";initial-value:14rem;inherits:true}@property --db-container-2xs{syntax:"*";initial-value:16rem;inherits:true}@property --db-container-xs{syntax:"*";initial-value:20rem;inherits:true}@property --db-container-sm{syntax:"*";initial-value:24rem;inherits:true}@property --db-container-md{syntax:"*";initial-value:28rem;inherits:true}@property --db-container-lg{syntax:"*";initial-value:32rem;inherits:true}@property --db-container-xl{syntax:"*";initial-value:36rem;inherits:true}@property --db-container-2xl{syntax:"*";initial-value:42rem;inherits:true}@property --db-container-3xl{syntax:"*";initial-value:48rem;inherits:true}
}
@layer db-ux{
:not([data-disable-focus=true]):focus-visible{outline:var(--db-border-width-2xs) solid var(--db-focus-outline-color,var(--db-informational-on-bg-basic-emphasis-70-default));outline-offset:var(--db-border-width-xs);box-shadow:0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color,#0000)}:not([data-disable-focus=true]):not([type=radio],[role=switch]):focus-visible{border-radius:var(--db-border-radius-xs)}:host,:root{font:var(--db-type-body-md)}:root{--db-list-bullet:"\2022\a0";--db-neutral-origin-default:light-dark(
  	var(--db-neutral-origin-light-default),
  	var(--db-neutral-origin-dark-default)
  );--db-neutral-origin-hovered:light-dark(
  	var(--db-neutral-origin-light-hovered),
  	var(--db-neutral-origin-dark-hovered)
  );--db-neutral-origin-pressed:light-dark(
  	var(--db-neutral-origin-light-pressed),
  	var(--db-neutral-origin-dark-pressed)
  );--db-neutral-on-origin-default:light-dark(
  	var(--db-neutral-on-origin-light-default),
  	var(--db-neutral-on-origin-dark-default)
  );--db-neutral-on-bg-basic-emphasis-50-default:light-dark(
  	var(--db-neutral-12),
  	var(--db-neutral-3)
  );--db-neutral-on-bg-basic-emphasis-60-default:light-dark(
  	var(--db-neutral-10),
  	var(--db-neutral-6)
  );--db-neutral-on-bg-basic-emphasis-70-default:light-dark(
  	var(--db-neutral-7),
  	var(--db-neutral-8)
  );--db-neutral-on-bg-basic-emphasis-70-hovered:light-dark(
  	var(--db-neutral-4),
  	var(--db-neutral-10)
  );--db-neutral-on-bg-basic-emphasis-70-pressed:light-dark(
  	var(--db-neutral-6),
  	var(--db-neutral-9)
  );--db-neutral-on-bg-basic-emphasis-80-default:light-dark(
  	var(--db-neutral-6),
  	var(--db-neutral-9)
  );--db-neutral-on-bg-basic-emphasis-80-hovered:light-dark(
  	var(--db-neutral-3),
  	var(--db-neutral-12)
  );--db-neutral-on-bg-basic-emphasis-80-pressed:light-dark(
  	var(--db-neutral-5),
  	var(--db-neutral-10)
  );--db-neutral-on-bg-basic-emphasis-90-default:light-dark(
  	var(--db-neutral-4),
  	var(--db-neutral-10)
  );--db-neutral-on-bg-basic-emphasis-90-hovered:light-dark(
  	var(--db-neutral-0),
  	var(--db-neutral-14)
  );--db-neutral-on-bg-basic-emphasis-90-pressed:light-dark(
  	var(--db-neutral-3),
  	var(--db-neutral-11)
  );--db-neutral-on-bg-basic-emphasis-100-default:light-dark(
  	var(--db-neutral-1),
  	var(--db-neutral-12)
  );--db-neutral-on-bg-basic-emphasis-100-hovered:light-dark(
  	var(--db-neutral-5),
  	var(--db-neutral-9)
  );--db-neutral-on-bg-basic-emphasis-100-pressed:light-dark(
  	var(--db-neutral-2),
  	var(--db-neutral-11)
  );--db-neutral-on-bg-inverted-default:light-dark(
  	var(--db-neutral-14),
  	var(--db-neutral-3)
  );--db-neutral-on-bg-inverted-hovered:light-dark(
  	var(--db-neutral-11),
  	var(--db-neutral-0)
  );--db-neutral-on-bg-inverted-pressed:light-dark(
  	var(--db-neutral-13),
  	var(--db-neutral-2)
  );--db-neutral-on-bg-vibrant-default:light-dark(
  	var(--db-neutral-1),
  	var(--db-neutral-1)
  );--db-neutral-on-bg-vibrant-hovered:light-dark(
  	var(--db-neutral-4),
  	var(--db-neutral-4)
  );--db-neutral-on-bg-vibrant-pressed:light-dark(
  	var(--db-neutral-2),
  	var(--db-neutral-2)
  );--db-neutral-bg-basic-level-1-default:light-dark(
  	var(--db-neutral-14),
  	var(--db-neutral-1)
  );--db-neutral-bg-basic-level-1-hovered:light-dark(
  	var(--db-neutral-13),
  	var(--db-neutral-3)
  );--db-neutral-bg-basic-level-1-pressed:light-dark(
  	var(--db-neutral-12),
  	var(--db-neutral-4)
  );--db-neutral-bg-basic-level-2-default:light-dark(
  	var(--db-neutral-13),
  	var(--db-neutral-2)
  );--db-neutral-bg-basic-level-2-hovered:light-dark(
  	var(--db-neutral-12),
  	var(--db-neutral-4)
  );--db-neutral-bg-basic-level-2-pressed:light-dark(
  	var(--db-neutral-11),
  	var(--db-neutral-5)
  );--db-neutral-bg-basic-level-3-default:light-dark(
  	var(--db-neutral-12),
  	var(--db-neutral-3)
  );--db-neutral-bg-basic-level-3-hovered:light-dark(
  	var(--db-neutral-11),
  	var(--db-neutral-1)
  );--db-neutral-bg-basic-level-3-pressed:light-dark(
  	var(--db-neutral-10),
  	var(--db-neutral-0)
  );--db-neutral-bg-basic-transparent-full-default:light-dark(
  	color-mix(in srgb, #0000 100%, var(--db-neutral-6)),
  	color-mix(in srgb, #0000 100%, var(--db-neutral-9))
  );--db-neutral-bg-basic-transparent-semi-default:light-dark(
  	color-mix(in srgb, #0000 92%, var(--db-neutral-6)),
  	color-mix(in srgb, #0000 84%, var(--db-neutral-9))
  );--db-neutral-bg-basic-transparent-semi-hovered:light-dark(
  	color-mix(in srgb, #0000 76%, var(--db-neutral-6)),
  	color-mix(in srgb, #0000 76%, var(--db-neutral-9))
  );--db-neutral-bg-basic-transparent-semi-pressed:light-dark(
  	color-mix(in srgb, #0000 68%, var(--db-neutral-6)),
  	color-mix(in srgb, #0000 68%, var(--db-neutral-9))
  );--db-neutral-bg-basic-transparent-full-hovered:light-dark(
  	color-mix(in srgb, #0000 76%, var(--db-neutral-6)),
  	color-mix(in srgb, #0000 76%, var(--db-neutral-9))
  );--db-neutral-bg-basic-transparent-full-pressed:light-dark(
  	color-mix(in srgb, #0000 68%, var(--db-neutral-6)),
  	color-mix(in srgb, #0000 68%, var(--db-neutral-9))
  );--db-neutral-bg-inverted-contrast-max-default:light-dark(
  	var(--db-neutral-1),
  	var(--db-neutral-12)
  );--db-neutral-bg-inverted-contrast-max-hovered:light-dark(
  	var(--db-neutral-5),
  	var(--db-neutral-9)
  );--db-neutral-bg-inverted-contrast-max-pressed:light-dark(
  	var(--db-neutral-2),
  	var(--db-neutral-11)
  );--db-neutral-bg-inverted-contrast-high-default:light-dark(
  	var(--db-neutral-6),
  	var(--db-neutral-9)
  );--db-neutral-bg-inverted-contrast-high-hovered:light-dark(
  	var(--db-neutral-2),
  	var(--db-neutral-12)
  );--db-neutral-bg-inverted-contrast-high-pressed:light-dark(
  	var(--db-neutral-5),
  	var(--db-neutral-10)
  );--db-neutral-bg-inverted-contrast-low-default:light-dark(
  	var(--db-neutral-7),
  	var(--db-neutral-8)
  );--db-neutral-bg-inverted-contrast-low-hovered:light-dark(
  	var(--db-neutral-3),
  	var(--db-neutral-12)
  );--db-neutral-bg-inverted-contrast-low-pressed:light-dark(
  	var(--db-neutral-6),
  	var(--db-neutral-9)
  );--db-neutral-bg-vibrant-default:light-dark(
  	var(--db-neutral-9),
  	var(--db-neutral-9)
  );--db-neutral-bg-vibrant-hovered:light-dark(
  	var(--db-neutral-12),
  	var(--db-neutral-12)
  );--db-neutral-bg-vibrant-pressed:light-dark(
  	var(--db-neutral-10),
  	var(--db-neutral-10)
  );--db-brand-origin-default:light-dark(
  	var(--db-brand-origin-light-default),
  	var(--db-brand-origin-dark-default)
  );--db-brand-origin-hovered:light-dark(
  	var(--db-brand-origin-light-hovered),
  	var(--db-brand-origin-dark-hovered)
  );--db-brand-origin-pressed:light-dark(
  	var(--db-brand-origin-light-pressed),
  	var(--db-brand-origin-dark-pressed)
  );--db-brand-on-origin-default:light-dark(
  	var(--db-brand-on-origin-light-default),
  	var(--db-brand-on-origin-dark-default)
  );--db-brand-on-bg-basic-emphasis-50-default:light-dark(
  	var(--db-brand-9),
  	var(--db-brand-5)
  );--db-brand-on-bg-basic-emphasis-60-default:light-dark(
  	var(--db-brand-10),
  	var(--db-brand-6)
  );--db-brand-on-bg-basic-emphasis-70-default:light-dark(
  	var(--db-brand-7),
  	var(--db-brand-8)
  );--db-brand-on-bg-basic-emphasis-70-hovered:light-dark(
  	var(--db-brand-4),
  	var(--db-brand-10)
  );--db-brand-on-bg-basic-emphasis-70-pressed:light-dark(
  	var(--db-brand-6),
  	var(--db-brand-9)
  );--db-brand-on-bg-basic-emphasis-80-default:light-dark(
  	var(--db-brand-6),
  	var(--db-brand-9)
  );--db-brand-on-bg-basic-emphasis-80-hovered:light-dark(
  	var(--db-brand-3),
  	var(--db-brand-12)
  );--db-brand-on-bg-basic-emphasis-80-pressed:light-dark(
  	var(--db-brand-5),
  	var(--db-brand-10)
  );--db-brand-on-bg-basic-emphasis-90-default:light-dark(
  	var(--db-brand-4),
  	var(--db-brand-10)
  );--db-brand-on-bg-basic-emphasis-90-hovered:light-dark(
  	var(--db-brand-0),
  	var(--db-brand-14)
  );--db-brand-on-bg-basic-emphasis-90-pressed:light-dark(
  	var(--db-brand-3),
  	var(--db-brand-11)
  );--db-brand-on-bg-basic-emphasis-100-default:light-dark(
  	var(--db-brand-1),
  	var(--db-brand-12)
  );--db-brand-on-bg-basic-emphasis-100-hovered:light-dark(
  	var(--db-brand-5),
  	var(--db-brand-9)
  );--db-brand-on-bg-basic-emphasis-100-pressed:light-dark(
  	var(--db-brand-2),
  	var(--db-brand-11)
  );--db-brand-on-bg-inverted-default:light-dark(
  	var(--db-brand-14),
  	var(--db-brand-3)
  );--db-brand-on-bg-inverted-hovered:light-dark(
  	var(--db-brand-11),
  	var(--db-brand-0)
  );--db-brand-on-bg-inverted-pressed:light-dark(
  	var(--db-brand-13),
  	var(--db-brand-2)
  );--db-brand-on-bg-vibrant-default:light-dark(
  	var(--db-brand-1),
  	var(--db-brand-1)
  );--db-brand-on-bg-vibrant-hovered:light-dark(
  	var(--db-brand-4),
  	var(--db-brand-4)
  );--db-brand-on-bg-vibrant-pressed:light-dark(
  	var(--db-brand-2),
  	var(--db-brand-2)
  );--db-brand-bg-basic-level-1-default:light-dark(
  	var(--db-brand-14),
  	var(--db-brand-1)
  );--db-brand-bg-basic-level-1-hovered:light-dark(
  	var(--db-brand-13),
  	var(--db-brand-3)
  );--db-brand-bg-basic-level-1-pressed:light-dark(
  	var(--db-brand-12),
  	var(--db-brand-4)
  );--db-brand-bg-basic-level-2-default:light-dark(
  	var(--db-brand-13),
  	var(--db-brand-2)
  );--db-brand-bg-basic-level-2-hovered:light-dark(
  	var(--db-brand-12),
  	var(--db-brand-4)
  );--db-brand-bg-basic-level-2-pressed:light-dark(
  	var(--db-brand-11),
  	var(--db-brand-5)
  );--db-brand-bg-basic-level-3-default:light-dark(
  	var(--db-brand-12),
  	var(--db-brand-3)
  );--db-brand-bg-basic-level-3-hovered:light-dark(
  	var(--db-brand-11),
  	var(--db-brand-1)
  );--db-brand-bg-basic-level-3-pressed:light-dark(
  	var(--db-brand-10),
  	var(--db-brand-0)
  );--db-brand-bg-basic-transparent-full-default:light-dark(
  	color-mix(in srgb, #0000 100%, var(--db-brand-6)),
  	color-mix(in srgb, #0000 100%, var(--db-brand-9))
  );--db-brand-bg-basic-transparent-semi-default:light-dark(
  	color-mix(in srgb, #0000 92%, var(--db-brand-6)),
  	color-mix(in srgb, #0000 84%, var(--db-brand-9))
  );--db-brand-bg-basic-transparent-full-hovered:light-dark(
  	color-mix(in srgb, #0000 76%, var(--db-brand-6)),
  	color-mix(in srgb, #0000 76%, var(--db-brand-9))
  );--db-brand-bg-basic-transparent-full-pressed:light-dark(
  	color-mix(in srgb, #0000 68%, var(--db-brand-6)),
  	color-mix(in srgb, #0000 68%, var(--db-brand-9))
  );--db-brand-bg-basic-transparent-semi-hovered:light-dark(
  	color-mix(in srgb, #0000 76%, var(--db-brand-6)),
  	color-mix(in srgb, #0000 76%, var(--db-brand-9))
  );--db-brand-bg-basic-transparent-semi-pressed:light-dark(
  	color-mix(in srgb, #0000 68%, var(--db-brand-6)),
  	color-mix(in srgb, #0000 68%, var(--db-brand-9))
  );--db-brand-bg-inverted-contrast-max-default:light-dark(
  	var(--db-brand-1),
  	var(--db-brand-12)
  );--db-brand-bg-inverted-contrast-max-hovered:light-dark(
  	var(--db-brand-5),
  	var(--db-brand-9)
  );--db-brand-bg-inverted-contrast-max-pressed:light-dark(
  	var(--db-brand-2),
  	var(--db-brand-11)
  );--db-brand-bg-inverted-contrast-high-default:light-dark(
  	var(--db-brand-6),
  	var(--db-brand-9)
  );--db-brand-bg-inverted-contrast-high-hovered:light-dark(
  	var(--db-brand-2),
  	var(--db-brand-12)
  );--db-brand-bg-inverted-contrast-high-pressed:light-dark(
  	var(--db-brand-5),
  	var(--db-brand-10)
  );--db-brand-bg-inverted-contrast-low-default:light-dark(
  	var(--db-brand-7),
  	var(--db-brand-8)
  );--db-brand-bg-inverted-contrast-low-hovered:light-dark(
  	var(--db-brand-3),
  	var(--db-brand-12)
  );--db-brand-bg-inverted-contrast-low-pressed:light-dark(
  	var(--db-brand-6),
  	var(--db-brand-9)
  );--db-brand-bg-vibrant-default:light-dark(
  	var(--db-brand-9),
  	var(--db-brand-9)
  );--db-brand-bg-vibrant-hovered:light-dark(
  	var(--db-brand-12),
  	var(--db-brand-12)
  );--db-brand-bg-vibrant-pressed:light-dark(
  	var(--db-brand-10),
  	var(--db-brand-10)
  );--db-informational-origin-default:light-dark(
  	var(--db-informational-origin-light-default),
  	var(--db-informational-origin-dark-default)
  );--db-informational-origin-hovered:light-dark(
  	var(--db-informational-origin-light-hovered),
  	var(--db-informational-origin-dark-hovered)
  );--db-informational-origin-pressed:light-dark(
  	var(--db-informational-origin-light-pressed),
  	var(--db-informational-origin-dark-pressed)
  );--db-informational-on-origin-default:light-dark(
  	var(--db-informational-on-origin-light-default),
  	var(--db-informational-on-origin-dark-default)
  );--db-informational-on-bg-basic-emphasis-50-default:light-dark(
  	var(--db-informational-9),
  	var(--db-informational-5)
  );--db-informational-on-bg-basic-emphasis-60-default:light-dark(
  	var(--db-informational-10),
  	var(--db-informational-6)
  );--db-informational-on-bg-basic-emphasis-70-default:light-dark(
  	var(--db-informational-7),
  	var(--db-informational-8)
  );--db-informational-on-bg-basic-emphasis-70-hovered:light-dark(
  	var(--db-informational-4),
  	var(--db-informational-10)
  );--db-informational-on-bg-basic-emphasis-70-pressed:light-dark(
  	var(--db-informational-6),
  	var(--db-informational-9)
  );--db-informational-on-bg-basic-emphasis-80-default:light-dark(
  	var(--db-informational-6),
  	var(--db-informational-9)
  );--db-informational-on-bg-basic-emphasis-80-hovered:light-dark(
  	var(--db-informational-3),
  	var(--db-informational-12)
  );--db-informational-on-bg-basic-emphasis-80-pressed:light-dark(
  	var(--db-informational-5),
  	var(--db-informational-10)
  );--db-informational-on-bg-basic-emphasis-90-default:light-dark(
  	var(--db-informational-4),
  	var(--db-informational-10)
  );--db-informational-on-bg-basic-emphasis-90-hovered:light-dark(
  	var(--db-informational-0),
  	var(--db-informational-14)
  );--db-informational-on-bg-basic-emphasis-90-pressed:light-dark(
  	var(--db-informational-3),
  	var(--db-informational-11)
  );--db-informational-on-bg-basic-emphasis-100-default:light-dark(
  	var(--db-informational-1),
  	var(--db-informational-12)
  );--db-informational-on-bg-basic-emphasis-100-hovered:light-dark(
  	var(--db-informational-5),
  	var(--db-informational-9)
  );--db-informational-on-bg-basic-emphasis-100-pressed:light-dark(
  	var(--db-informational-2),
  	var(--db-informational-11)
  );--db-informational-on-bg-inverted-default:light-dark(
  	var(--db-informational-14),
  	var(--db-informational-3)
  );--db-informational-on-bg-inverted-hovered:light-dark(
  	var(--db-informational-11),
  	var(--db-informational-0)
  );--db-informational-on-bg-inverted-pressed:light-dark(
  	var(--db-informational-13),
  	var(--db-informational-2)
  );--db-informational-on-bg-vibrant-default:light-dark(
  	var(--db-informational-1),
  	var(--db-informational-1)
  );--db-informational-on-bg-vibrant-hovered:light-dark(
  	var(--db-informational-4),
  	var(--db-informational-4)
  );--db-informational-on-bg-vibrant-pressed:light-dark(
  	var(--db-informational-2),
  	var(--db-informational-2)
  );--db-informational-bg-basic-level-1-default:light-dark(
  	var(--db-informational-14),
  	var(--db-informational-1)
  );--db-informational-bg-basic-level-1-hovered:light-dark(
  	var(--db-informational-13),
  	var(--db-informational-3)
  );--db-informational-bg-basic-level-1-pressed:light-dark(
  	var(--db-informational-12),
  	var(--db-informational-4)
  );--db-informational-bg-basic-level-2-default:light-dark(
  	var(--db-informational-13),
  	var(--db-informational-2)
  );--db-informational-bg-basic-level-2-hovered:light-dark(
  	var(--db-informational-12),
  	var(--db-informational-4)
  );--db-informational-bg-basic-level-2-pressed:light-dark(
  	var(--db-informational-11),
  	var(--db-informational-5)
  );--db-informational-bg-basic-level-3-default:light-dark(
  	var(--db-informational-12),
  	var(--db-informational-3)
  );--db-informational-bg-basic-level-3-hovered:light-dark(
  	var(--db-informational-11),
  	var(--db-informational-1)
  );--db-informational-bg-basic-level-3-pressed:light-dark(
  	var(--db-informational-10),
  	var(--db-informational-0)
  );--db-informational-bg-basic-transparent-full-default:light-dark(
  	color-mix(in srgb, #0000 100%, var(--db-informational-6)),
  	color-mix(in srgb, #0000 100%, var(--db-informational-9))
  );--db-informational-bg-basic-transparent-semi-default:light-dark(
  	color-mix(in srgb, #0000 92%, var(--db-informational-6)),
  	color-mix(in srgb, #0000 84%, var(--db-informational-9))
  );--db-informational-bg-basic-transparent-full-hovered:light-dark(
  	color-mix(in srgb, #0000 76%, var(--db-informational-6)),
  	color-mix(in srgb, #0000 76%, var(--db-informational-9))
  );--db-informational-bg-basic-transparent-full-pressed:light-dark(
  	color-mix(in srgb, #0000 68%, var(--db-informational-6)),
  	color-mix(in srgb, #0000 68%, var(--db-informational-9))
  );--db-informational-bg-basic-transparent-semi-hovered:light-dark(
  	color-mix(in srgb, #0000 76%, var(--db-informational-6)),
  	color-mix(in srgb, #0000 76%, var(--db-informational-9))
  );--db-informational-bg-basic-transparent-semi-pressed:light-dark(
  	color-mix(in srgb, #0000 68%, var(--db-informational-6)),
  	color-mix(in srgb, #0000 68%, var(--db-informational-9))
  );--db-informational-bg-inverted-contrast-max-default:light-dark(
  	var(--db-informational-1),
  	var(--db-informational-12)
  );--db-informational-bg-inverted-contrast-max-hovered:light-dark(
  	var(--db-informational-5),
  	var(--db-informational-9)
  );--db-informational-bg-inverted-contrast-max-pressed:light-dark(
  	var(--db-informational-2),
  	var(--db-informational-11)
  );--db-informational-bg-inverted-contrast-high-default:light-dark(
  	var(--db-informational-6),
  	var(--db-informational-9)
  );--db-informational-bg-inverted-contrast-high-hovered:light-dark(
  	var(--db-informational-2),
  	var(--db-informational-12)
  );--db-informational-bg-inverted-contrast-high-pressed:light-dark(
  	var(--db-informational-5),
  	var(--db-informational-10)
  );--db-informational-bg-inverted-contrast-low-default:light-dark(
  	var(--db-informational-7),
  	var(--db-informational-8)
  );--db-informational-bg-inverted-contrast-low-hovered:light-dark(
  	var(--db-informational-3),
  	var(--db-informational-12)
  );--db-informational-bg-inverted-contrast-low-pressed:light-dark(
  	var(--db-informational-6),
  	var(--db-informational-9)
  );--db-informational-bg-vibrant-default:light-dark(
  	var(--db-informational-9),
  	var(--db-informational-9)
  );--db-informational-bg-vibrant-hovered:light-dark(
  	var(--db-informational-12),
  	var(--db-informational-12)
  );--db-informational-bg-vibrant-pressed:light-dark(
  	var(--db-informational-10),
  	var(--db-informational-10)
  );--db-warning-origin-default:light-dark(
  	var(--db-warning-origin-light-default),
  	var(--db-warning-origin-dark-default)
  );--db-warning-origin-hovered:light-dark(
  	var(--db-warning-origin-light-hovered),
  	var(--db-warning-origin-dark-hovered)
  );--db-warning-origin-pressed:light-dark(
  	var(--db-warning-origin-light-pressed),
  	var(--db-warning-origin-dark-pressed)
  );--db-warning-on-origin-default:light-dark(
  	var(--db-warning-on-origin-light-default),
  	var(--db-warning-on-origin-dark-default)
  );--db-warning-on-bg-basic-emphasis-50-default:light-dark(
  	var(--db-warning-9),
  	var(--db-warning-5)
  );--db-warning-on-bg-basic-emphasis-60-default:light-dark(
  	var(--db-warning-10),
  	var(--db-warning-6)
  );--db-warning-on-bg-basic-emphasis-70-default:light-dark(
  	var(--db-warning-7),
  	var(--db-warning-8)
  );--db-warning-on-bg-basic-emphasis-70-hovered:light-dark(
  	var(--db-warning-4),
  	var(--db-warning-10)
  );--db-warning-on-bg-basic-emphasis-70-pressed:light-dark(
  	var(--db-warning-6),
  	var(--db-warning-9)
  );--db-warning-on-bg-basic-emphasis-80-default:light-dark(
  	var(--db-warning-6),
  	var(--db-warning-9)
  );--db-warning-on-bg-basic-emphasis-80-hovered:light-dark(
  	var(--db-warning-3),
  	var(--db-warning-12)
  );--db-warning-on-bg-basic-emphasis-80-pressed:light-dark(
  	var(--db-warning-5),
  	var(--db-warning-10)
  );--db-warning-on-bg-basic-emphasis-90-default:light-dark(
  	var(--db-warning-4),
  	var(--db-warning-10)
  );--db-warning-on-bg-basic-emphasis-90-hovered:light-dark(
  	var(--db-warning-0),
  	var(--db-warning-14)
  );--db-warning-on-bg-basic-emphasis-90-pressed:light-dark(
  	var(--db-warning-3),
  	var(--db-warning-11)
  );--db-warning-on-bg-basic-emphasis-100-default:light-dark(
  	var(--db-warning-1),
  	var(--db-warning-12)
  );--db-warning-on-bg-basic-emphasis-100-hovered:light-dark(
  	var(--db-warning-5),
  	var(--db-warning-9)
  );--db-warning-on-bg-basic-emphasis-100-pressed:light-dark(
  	var(--db-warning-2),
  	var(--db-warning-11)
  );--db-warning-on-bg-inverted-default:light-dark(
  	var(--db-warning-14),
  	var(--db-warning-3)
  );--db-warning-on-bg-inverted-hovered:light-dark(
  	var(--db-warning-11),
  	var(--db-warning-0)
  );--db-warning-on-bg-inverted-pressed:light-dark(
  	var(--db-warning-13),
  	var(--db-warning-2)
  );--db-warning-on-bg-vibrant-default:light-dark(
  	var(--db-warning-1),
  	var(--db-warning-1)
  );--db-warning-on-bg-vibrant-hovered:light-dark(
  	var(--db-warning-4),
  	var(--db-warning-4)
  );--db-warning-on-bg-vibrant-pressed:light-dark(
  	var(--db-warning-2),
  	var(--db-warning-2)
  );--db-warning-bg-basic-level-1-default:light-dark(
  	var(--db-warning-14),
  	var(--db-warning-1)
  );--db-warning-bg-basic-level-1-hovered:light-dark(
  	var(--db-warning-13),
  	var(--db-warning-3)
  );--db-warning-bg-basic-level-1-pressed:light-dark(
  	var(--db-warning-12),
  	var(--db-warning-4)
  );--db-warning-bg-basic-level-2-default:light-dark(
  	var(--db-warning-13),
  	var(--db-warning-2)
  );--db-warning-bg-basic-level-2-hovered:light-dark(
  	var(--db-warning-12),
  	var(--db-warning-4)
  );--db-warning-bg-basic-level-2-pressed:light-dark(
  	var(--db-warning-11),
  	var(--db-warning-5)
  );--db-warning-bg-basic-level-3-default:light-dark(
  	var(--db-warning-12),
  	var(--db-warning-3)
  );--db-warning-bg-basic-level-3-hovered:light-dark(
  	var(--db-warning-11),
  	var(--db-warning-1)
  );--db-warning-bg-basic-level-3-pressed:light-dark(
  	var(--db-warning-10),
  	var(--db-warning-0)
  );--db-warning-bg-basic-transparent-full-default:light-dark(
  	color-mix(in srgb, #0000 100%, var(--db-warning-6)),
  	color-mix(in srgb, #0000 100%, var(--db-warning-9))
  );--db-warning-bg-basic-transparent-semi-default:light-dark(
  	color-mix(in srgb, #0000 92%, var(--db-warning-6)),
  	color-mix(in srgb, #0000 84%, var(--db-warning-9))
  );--db-warning-bg-basic-transparent-full-hovered:light-dark(
  	color-mix(in srgb, #0000 76%, var(--db-warning-6)),
  	color-mix(in srgb, #0000 76%, var(--db-warning-9))
  );--db-warning-bg-basic-transparent-full-pressed:light-dark(
  	color-mix(in srgb, #0000 68%, var(--db-warning-6)),
  	color-mix(in srgb, #0000 68%, var(--db-warning-9))
  );--db-warning-bg-basic-transparent-semi-hovered:light-dark(
  	color-mix(in srgb, #0000 76%, var(--db-warning-6)),
  	color-mix(in srgb, #0000 76%, var(--db-warning-9))
  );--db-warning-bg-basic-transparent-semi-pressed:light-dark(
  	color-mix(in srgb, #0000 68%, var(--db-warning-6)),
  	color-mix(in srgb, #0000 68%, var(--db-warning-9))
  );--db-warning-bg-inverted-contrast-max-default:light-dark(
  	var(--db-warning-1),
  	var(--db-warning-12)
  );--db-warning-bg-inverted-contrast-max-hovered:light-dark(
  	var(--db-warning-5),
  	var(--db-warning-9)
  );--db-warning-bg-inverted-contrast-max-pressed:light-dark(
  	var(--db-warning-2),
  	var(--db-warning-11)
  );--db-warning-bg-inverted-contrast-high-default:light-dark(
  	var(--db-warning-6),
  	var(--db-warning-9)
  );--db-warning-bg-inverted-contrast-high-hovered:light-dark(
  	var(--db-warning-2),
  	var(--db-warning-12)
  );--db-warning-bg-inverted-contrast-high-pressed:light-dark(
  	var(--db-warning-5),
  	var(--db-warning-10)
  );--db-warning-bg-inverted-contrast-low-default:light-dark(
  	var(--db-warning-7),
  	var(--db-warning-8)
  );--db-warning-bg-inverted-contrast-low-hovered:light-dark(
  	var(--db-warning-3),
  	var(--db-warning-12)
  );--db-warning-bg-inverted-contrast-low-pressed:light-dark(
  	var(--db-warning-6),
  	var(--db-warning-9)
  );--db-warning-bg-vibrant-default:light-dark(
  	var(--db-warning-9),
  	var(--db-warning-9)
  );--db-warning-bg-vibrant-hovered:light-dark(
  	var(--db-warning-12),
  	var(--db-warning-12)
  );--db-warning-bg-vibrant-pressed:light-dark(
  	var(--db-warning-10),
  	var(--db-warning-10)
  );--db-successful-origin-default:light-dark(
  	var(--db-successful-origin-light-default),
  	var(--db-successful-origin-dark-default)
  );--db-successful-origin-hovered:light-dark(
  	var(--db-successful-origin-light-hovered),
  	var(--db-successful-origin-dark-hovered)
  );--db-successful-origin-pressed:light-dark(
  	var(--db-successful-origin-light-pressed),
  	var(--db-successful-origin-dark-pressed)
  );--db-successful-on-origin-default:light-dark(
  	var(--db-successful-on-origin-light-default),
  	var(--db-successful-on-origin-dark-default)
  );--db-successful-on-bg-basic-emphasis-50-default:light-dark(
  	var(--db-successful-9),
  	var(--db-successful-5)
  );--db-successful-on-bg-basic-emphasis-60-default:light-dark(
  	var(--db-successful-10),
  	var(--db-successful-6)
  );--db-successful-on-bg-basic-emphasis-70-default:light-dark(
  	var(--db-successful-7),
  	var(--db-successful-8)
  );--db-successful-on-bg-basic-emphasis-70-hovered:light-dark(
  	var(--db-successful-4),
  	var(--db-successful-10)
  );--db-successful-on-bg-basic-emphasis-70-pressed:light-dark(
  	var(--db-successful-6),
  	var(--db-successful-9)
  );--db-successful-on-bg-basic-emphasis-80-default:light-dark(
  	var(--db-successful-6),
  	var(--db-successful-9)
  );--db-successful-on-bg-basic-emphasis-80-hovered:light-dark(
  	var(--db-successful-3),
  	var(--db-successful-12)
  );--db-successful-on-bg-basic-emphasis-80-pressed:light-dark(
  	var(--db-successful-5),
  	var(--db-successful-10)
  );--db-successful-on-bg-basic-emphasis-90-default:light-dark(
  	var(--db-successful-4),
  	var(--db-successful-10)
  );--db-successful-on-bg-basic-emphasis-90-hovered:light-dark(
  	var(--db-successful-0),
  	var(--db-successful-14)
  );--db-successful-on-bg-basic-emphasis-90-pressed:light-dark(
  	var(--db-successful-3),
  	var(--db-successful-11)
  );--db-successful-on-bg-basic-emphasis-100-default:light-dark(
  	var(--db-successful-1),
  	var(--db-successful-12)
  );--db-successful-on-bg-basic-emphasis-100-hovered:light-dark(
  	var(--db-successful-5),
  	var(--db-successful-9)
  );--db-successful-on-bg-basic-emphasis-100-pressed:light-dark(
  	var(--db-successful-2),
  	var(--db-successful-11)
  );--db-successful-on-bg-inverted-default:light-dark(
  	var(--db-successful-14),
  	var(--db-successful-3)
  );--db-successful-on-bg-inverted-hovered:light-dark(
  	var(--db-successful-11),
  	var(--db-successful-0)
  );--db-successful-on-bg-inverted-pressed:light-dark(
  	var(--db-successful-13),
  	var(--db-successful-2)
  );--db-successful-on-bg-vibrant-default:light-dark(
  	var(--db-successful-1),
  	var(--db-successful-1)
  );--db-successful-on-bg-vibrant-hovered:light-dark(
  	var(--db-successful-4),
  	var(--db-successful-4)
  );--db-successful-on-bg-vibrant-pressed:light-dark(
  	var(--db-successful-2),
  	var(--db-successful-2)
  );--db-successful-bg-basic-level-1-default:light-dark(
  	var(--db-successful-14),
  	var(--db-successful-1)
  );--db-successful-bg-basic-level-1-hovered:light-dark(
  	var(--db-successful-13),
  	var(--db-successful-3)
  );--db-successful-bg-basic-level-1-pressed:light-dark(
  	var(--db-successful-12),
  	var(--db-successful-4)
  );--db-successful-bg-basic-level-2-default:light-dark(
  	var(--db-successful-13),
  	var(--db-successful-2)
  );--db-successful-bg-basic-level-2-hovered:light-dark(
  	var(--db-successful-12),
  	var(--db-successful-4)
  );--db-successful-bg-basic-level-2-pressed:light-dark(
  	var(--db-successful-11),
  	var(--db-successful-5)
  );--db-successful-bg-basic-level-3-default:light-dark(
  	var(--db-successful-12),
  	var(--db-successful-3)
  );--db-successful-bg-basic-level-3-hovered:light-dark(
  	var(--db-successful-11),
  	var(--db-successful-1)
  );--db-successful-bg-basic-level-3-pressed:light-dark(
  	var(--db-successful-10),
  	var(--db-successful-0)
  );--db-successful-bg-basic-transparent-full-default:light-dark(
  	color-mix(in srgb, #0000 100%, var(--db-successful-6)),
  	color-mix(in srgb, #0000 100%, var(--db-successful-9))
  );--db-successful-bg-basic-transparent-semi-default:light-dark(
  	color-mix(in srgb, #0000 92%, var(--db-successful-6)),
  	color-mix(in srgb, #0000 84%, var(--db-successful-9))
  );--db-successful-bg-basic-transparent-full-hovered:light-dark(
  	color-mix(in srgb, #0000 76%, var(--db-successful-6)),
  	color-mix(in srgb, #0000 76%, var(--db-successful-9))
  );--db-successful-bg-basic-transparent-full-pressed:light-dark(
  	color-mix(in srgb, #0000 68%, var(--db-successful-6)),
  	color-mix(in srgb, #0000 68%, var(--db-successful-9))
  );--db-successful-bg-basic-transparent-semi-hovered:light-dark(
  	color-mix(in srgb, #0000 76%, var(--db-successful-6)),
  	color-mix(in srgb, #0000 76%, var(--db-successful-9))
  );--db-successful-bg-basic-transparent-semi-pressed:light-dark(
  	color-mix(in srgb, #0000 68%, var(--db-successful-6)),
  	color-mix(in srgb, #0000 68%, var(--db-successful-9))
  );--db-successful-bg-inverted-contrast-max-default:light-dark(
  	var(--db-successful-1),
  	var(--db-successful-12)
  );--db-successful-bg-inverted-contrast-max-hovered:light-dark(
  	var(--db-successful-5),
  	var(--db-successful-9)
  );--db-successful-bg-inverted-contrast-max-pressed:light-dark(
  	var(--db-successful-2),
  	var(--db-successful-11)
  );--db-successful-bg-inverted-contrast-high-default:light-dark(
  	var(--db-successful-6),
  	var(--db-successful-9)
  );--db-successful-bg-inverted-contrast-high-hovered:light-dark(
  	var(--db-successful-2),
  	var(--db-successful-12)
  );--db-successful-bg-inverted-contrast-high-pressed:light-dark(
  	var(--db-successful-5),
  	var(--db-successful-10)
  );--db-successful-bg-inverted-contrast-low-default:light-dark(
  	var(--db-successful-7),
  	var(--db-successful-8)
  );--db-successful-bg-inverted-contrast-low-hovered:light-dark(
  	var(--db-successful-3),
  	var(--db-successful-12)
  );--db-successful-bg-inverted-contrast-low-pressed:light-dark(
  	var(--db-successful-6),
  	var(--db-successful-9)
  );--db-successful-bg-vibrant-default:light-dark(
  	var(--db-successful-9),
  	var(--db-successful-9)
  );--db-successful-bg-vibrant-hovered:light-dark(
  	var(--db-successful-12),
  	var(--db-successful-12)
  );--db-successful-bg-vibrant-pressed:light-dark(
  	var(--db-successful-10),
  	var(--db-successful-10)
  );--db-critical-origin-default:light-dark(
  	var(--db-critical-origin-light-default),
  	var(--db-critical-origin-dark-default)
  );--db-critical-origin-hovered:light-dark(
  	var(--db-critical-origin-light-hovered),
  	var(--db-critical-origin-dark-hovered)
  );--db-critical-origin-pressed:light-dark(
  	var(--db-critical-origin-light-pressed),
  	var(--db-critical-origin-dark-pressed)
  );--db-critical-on-origin-default:light-dark(
  	var(--db-critical-on-origin-light-default),
  	var(--db-critical-on-origin-dark-default)
  );--db-critical-on-bg-basic-emphasis-50-default:light-dark(
  	var(--db-critical-9),
  	var(--db-critical-5)
  );--db-critical-on-bg-basic-emphasis-60-default:light-dark(
  	var(--db-critical-10),
  	var(--db-critical-6)
  );--db-critical-on-bg-basic-emphasis-70-default:light-dark(
  	var(--db-critical-7),
  	var(--db-critical-8)
  );--db-critical-on-bg-basic-emphasis-70-hovered:light-dark(
  	var(--db-critical-4),
  	var(--db-critical-10)
  );--db-critical-on-bg-basic-emphasis-70-pressed:light-dark(
  	var(--db-critical-6),
  	var(--db-critical-9)
  );--db-critical-on-bg-basic-emphasis-80-default:light-dark(
  	var(--db-critical-6),
  	var(--db-critical-9)
  );--db-critical-on-bg-basic-emphasis-80-hovered:light-dark(
  	var(--db-critical-3),
  	var(--db-critical-12)
  );--db-critical-on-bg-basic-emphasis-80-pressed:light-dark(
  	var(--db-critical-5),
  	var(--db-critical-10)
  );--db-critical-on-bg-basic-emphasis-90-default:light-dark(
  	var(--db-critical-4),
  	var(--db-critical-10)
  );--db-critical-on-bg-basic-emphasis-90-hovered:light-dark(
  	var(--db-critical-0),
  	var(--db-critical-14)
  );--db-critical-on-bg-basic-emphasis-90-pressed:light-dark(
  	var(--db-critical-3),
  	var(--db-critical-11)
  );--db-critical-on-bg-basic-emphasis-100-default:light-dark(
  	var(--db-critical-1),
  	var(--db-critical-12)
  );--db-critical-on-bg-basic-emphasis-100-hovered:light-dark(
  	var(--db-critical-5),
  	var(--db-critical-9)
  );--db-critical-on-bg-basic-emphasis-100-pressed:light-dark(
  	var(--db-critical-2),
  	var(--db-critical-11)
  );--db-critical-on-bg-inverted-default:light-dark(
  	var(--db-critical-14),
  	var(--db-critical-3)
  );--db-critical-on-bg-inverted-hovered:light-dark(
  	var(--db-critical-11),
  	var(--db-critical-0)
  );--db-critical-on-bg-inverted-pressed:light-dark(
  	var(--db-critical-13),
  	var(--db-critical-2)
  );--db-critical-on-bg-vibrant-default:light-dark(
  	var(--db-critical-1),
  	var(--db-critical-1)
  );--db-critical-on-bg-vibrant-hovered:light-dark(
  	var(--db-critical-4),
  	var(--db-critical-4)
  );--db-critical-on-bg-vibrant-pressed:light-dark(
  	var(--db-critical-2),
  	var(--db-critical-2)
  );--db-critical-bg-basic-level-1-default:light-dark(
  	var(--db-critical-14),
  	var(--db-critical-1)
  );--db-critical-bg-basic-level-1-hovered:light-dark(
  	var(--db-critical-13),
  	var(--db-critical-3)
  );--db-critical-bg-basic-level-1-pressed:light-dark(
  	var(--db-critical-12),
  	var(--db-critical-4)
  );--db-critical-bg-basic-level-2-default:light-dark(
  	var(--db-critical-13),
  	var(--db-critical-2)
  );--db-critical-bg-basic-level-2-hovered:light-dark(
  	var(--db-critical-12),
  	var(--db-critical-4)
  );--db-critical-bg-basic-level-2-pressed:light-dark(
  	var(--db-critical-11),
  	var(--db-critical-5)
  );--db-critical-bg-basic-level-3-default:light-dark(
  	var(--db-critical-12),
  	var(--db-critical-3)
  );--db-critical-bg-basic-level-3-hovered:light-dark(
  	var(--db-critical-11),
  	var(--db-critical-1)
  );--db-critical-bg-basic-level-3-pressed:light-dark(
  	var(--db-critical-10),
  	var(--db-critical-0)
  );--db-critical-bg-basic-transparent-full-default:light-dark(
  	color-mix(in srgb, #0000 100%, var(--db-critical-6)),
  	color-mix(in srgb, #0000 100%, var(--db-critical-9))
  );--db-critical-bg-basic-transparent-semi-default:light-dark(
  	color-mix(in srgb, #0000 92%, var(--db-critical-6)),
  	color-mix(in srgb, #0000 84%, var(--db-critical-9))
  );--db-critical-bg-basic-transparent-full-hovered:light-dark(
  	color-mix(in srgb, #0000 76%, var(--db-critical-6)),
  	color-mix(in srgb, #0000 76%, var(--db-critical-9))
  );--db-critical-bg-basic-transparent-full-pressed:light-dark(
  	color-mix(in srgb, #0000 68%, var(--db-critical-6)),
  	color-mix(in srgb, #0000 68%, var(--db-critical-9))
  );--db-critical-bg-basic-transparent-semi-hovered:light-dark(
  	color-mix(in srgb, #0000 76%, var(--db-critical-6)),
  	color-mix(in srgb, #0000 76%, var(--db-critical-9))
  );--db-critical-bg-basic-transparent-semi-pressed:light-dark(
  	color-mix(in srgb, #0000 68%, var(--db-critical-6)),
  	color-mix(in srgb, #0000 68%, var(--db-critical-9))
  );--db-critical-bg-inverted-contrast-max-default:light-dark(
  	var(--db-critical-1),
  	var(--db-critical-12)
  );--db-critical-bg-inverted-contrast-max-hovered:light-dark(
  	var(--db-critical-5),
  	var(--db-critical-9)
  );--db-critical-bg-inverted-contrast-max-pressed:light-dark(
  	var(--db-critical-2),
  	var(--db-critical-11)
  );--db-critical-bg-inverted-contrast-high-default:light-dark(
  	var(--db-critical-6),
  	var(--db-critical-9)
  );--db-critical-bg-inverted-contrast-high-hovered:light-dark(
  	var(--db-critical-2),
  	var(--db-critical-12)
  );--db-critical-bg-inverted-contrast-high-pressed:light-dark(
  	var(--db-critical-5),
  	var(--db-critical-10)
  );--db-critical-bg-inverted-contrast-low-default:light-dark(
  	var(--db-critical-7),
  	var(--db-critical-8)
  );--db-critical-bg-inverted-contrast-low-hovered:light-dark(
  	var(--db-critical-3),
  	var(--db-critical-12)
  );--db-critical-bg-inverted-contrast-low-pressed:light-dark(
  	var(--db-critical-6),
  	var(--db-critical-9)
  );--db-critical-bg-vibrant-default:light-dark(
  	var(--db-critical-9),
  	var(--db-critical-9)
  );--db-critical-bg-vibrant-hovered:light-dark(
  	var(--db-critical-12),
  	var(--db-critical-12)
  );--db-critical-bg-vibrant-pressed:light-dark(
  	var(--db-critical-10),
  	var(--db-critical-10)
  );}:where(html){line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:initial;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:initial}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;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}:where(summary){display:list-item}@property --db-screen-xs{syntax:"*";inherits:true;initial-value:20em}@property --db-screen-sm{syntax:"*";inherits:true;initial-value:48em}@property --db-screen-md{syntax:"*";inherits:true;initial-value:64em}@property --db-screen-lg{syntax:"*";inherits:true;initial-value:90em}@property --db-screen-xl{syntax:"*";inherits:true;initial-value:120em}:root{color-scheme:var(--db-color-scheme,light dark)}:root:has([name=color-scheme]:is([content~=light],[content~=dark])){color-scheme:var(--db-color-scheme)}[data-mode=light]{color-scheme:light}[data-mode=dark]{color-scheme:dark}[data-pride=true]{--db-pride-red:var(--db-red-origin-default);--db-pride-orange:var(--db-orange-origin-default);--db-pride-yellow:var(--db-yellow-origin-default);--db-pride-green:var(--db-light-green-origin-default);--db-pride-blue:var(--db-blue-origin-default);--db-pride-violet:var(--db-violet-origin-default)}body,html{margin:0;padding:0}body{font-family:var(--db-font-family-sans)}html{-webkit-tap-highlight-color:var(--db-informational-bg-basic-transparent-semi-default)}*,:after,:before{box-sizing:var(--db-box-sizing,border-box)}*{-webkit-font-smoothing:antialiased;font-synthesis:none;text-rendering:optimizelegibility}a,body,button,input,select,summary,textarea{color:inherit}embed,iframe,img,object,video{block-size:auto;max-inline-size:100%}iframe{border:0}:where(ul){padding-inline-start:var(--db-spacing-fixed-md);list-style-type:var(--db-list-bullet)}:where(ul) li::marker{color:var(--db-brand-origin-default)}[role=navigation] ol,[role=navigation] ul,nav ol,nav ul{list-style-type:"";margin:0;padding:0}fieldset{border:0}details>*,details>:after,details>:before{box-sizing:var(--db-box-sizing,border-box)}
}
@layer db-ux{
:host,:root{--db-adaptive-bg-basic-level-1-default:var(
  	--db-neutral-bg-basic-level-1-default
  );--db-adaptive-bg-basic-level-1-hovered:var(
  	--db-neutral-bg-basic-level-1-hovered
  );--db-adaptive-bg-basic-level-1-pressed:var(
  	--db-neutral-bg-basic-level-1-pressed
  );--db-adaptive-bg-basic-level-2-default:var(
  	--db-neutral-bg-basic-level-2-default
  );--db-adaptive-bg-basic-level-2-hovered:var(
  	--db-neutral-bg-basic-level-2-hovered
  );--db-adaptive-bg-basic-level-2-pressed:var(
  	--db-neutral-bg-basic-level-2-pressed
  );--db-adaptive-bg-basic-level-3-default:var(
  	--db-neutral-bg-basic-level-3-default
  );--db-adaptive-bg-basic-level-3-hovered:var(
  	--db-neutral-bg-basic-level-3-hovered
  );--db-adaptive-bg-basic-level-3-pressed:var(
  	--db-neutral-bg-basic-level-3-pressed
  );--db-adaptive-bg-basic-transparent-full-default:var(
  	--db-neutral-bg-basic-transparent-full-default
  );--db-adaptive-bg-basic-transparent-semi-default:var(
  	--db-neutral-bg-basic-transparent-semi-default
  );--db-adaptive-bg-basic-transparent-full-hovered:var(
  	--db-neutral-bg-basic-transparent-full-hovered
  );--db-adaptive-bg-basic-transparent-full-pressed:var(
  	--db-neutral-bg-basic-transparent-full-pressed
  );--db-adaptive-bg-basic-transparent-semi-hovered:var(
  	--db-neutral-bg-basic-transparent-semi-hovered
  );--db-adaptive-bg-basic-transparent-semi-pressed:var(
  	--db-neutral-bg-basic-transparent-semi-pressed
  );--db-adaptive-on-bg-basic-emphasis-100-default:var(
  	--db-neutral-on-bg-basic-emphasis-100-default
  );--db-adaptive-on-bg-basic-emphasis-100-hovered:var(
  	--db-neutral-on-bg-basic-emphasis-100-hovered
  );--db-adaptive-on-bg-basic-emphasis-100-pressed:var(
  	--db-neutral-on-bg-basic-emphasis-100-pressed
  );--db-adaptive-on-bg-basic-emphasis-90-default:var(
  	--db-neutral-on-bg-basic-emphasis-90-default
  );--db-adaptive-on-bg-basic-emphasis-90-hovered:var(
  	--db-neutral-on-bg-basic-emphasis-90-hovered
  );--db-adaptive-on-bg-basic-emphasis-90-pressed:var(
  	--db-neutral-on-bg-basic-emphasis-90-pressed
  );--db-adaptive-on-bg-basic-emphasis-80-default:var(
  	--db-neutral-on-bg-basic-emphasis-80-default
  );--db-adaptive-on-bg-basic-emphasis-80-hovered:var(
  	--db-neutral-on-bg-basic-emphasis-80-hovered
  );--db-adaptive-on-bg-basic-emphasis-80-pressed:var(
  	--db-neutral-on-bg-basic-emphasis-80-pressed
  );--db-adaptive-on-bg-basic-emphasis-70-default:var(
  	--db-neutral-on-bg-basic-emphasis-70-default
  );--db-adaptive-on-bg-basic-emphasis-70-hovered:var(
  	--db-neutral-on-bg-basic-emphasis-70-hovered
  );--db-adaptive-on-bg-basic-emphasis-70-pressed:var(
  	--db-neutral-on-bg-basic-emphasis-70-pressed
  );--db-adaptive-on-bg-basic-emphasis-60-default:var(
  	--db-neutral-on-bg-basic-emphasis-60-default
  );--db-adaptive-on-bg-basic-emphasis-50-default:var(
  	--db-neutral-on-bg-basic-emphasis-50-default
  );--db-adaptive-bg-inverted-contrast-max-default:var(
  	--db-neutral-bg-inverted-contrast-max-default
  );--db-adaptive-bg-inverted-contrast-max-hovered:var(
  	--db-neutral-bg-inverted-contrast-max-hovered
  );--db-adaptive-bg-inverted-contrast-max-pressed:var(
  	--db-neutral-bg-inverted-contrast-max-pressed
  );--db-adaptive-bg-inverted-contrast-high-default:var(
  	--db-neutral-bg-inverted-contrast-high-default
  );--db-adaptive-bg-inverted-contrast-high-hovered:var(
  	--db-neutral-bg-inverted-contrast-high-hovered
  );--db-adaptive-bg-inverted-contrast-high-pressed:var(
  	--db-neutral-bg-inverted-contrast-high-pressed
  );--db-adaptive-bg-inverted-contrast-low-default:var(
  	--db-neutral-bg-inverted-contrast-low-default
  );--db-adaptive-bg-inverted-contrast-low-hovered:var(
  	--db-neutral-bg-inverted-contrast-low-hovered
  );--db-adaptive-bg-inverted-contrast-low-pressed:var(
  	--db-neutral-bg-inverted-contrast-low-pressed
  );--db-adaptive-on-bg-inverted-default:var(
  	--db-neutral-on-bg-inverted-default
  );--db-adaptive-on-bg-inverted-hovered:var(
  	--db-neutral-on-bg-inverted-hovered
  );--db-adaptive-on-bg-inverted-pressed:var(
  	--db-neutral-on-bg-inverted-pressed
  );--db-adaptive-origin-default:var(--db-neutral-origin-default);--db-adaptive-origin-hovered:var(--db-neutral-origin-hovered);--db-adaptive-origin-pressed:var(--db-neutral-origin-pressed);--db-adaptive-on-origin-default:var(
  	--db-neutral-on-origin-default
  );--db-adaptive-bg-vibrant-default:var(
  	--db-neutral-bg-vibrant-default
  );--db-adaptive-bg-vibrant-hovered:var(
  	--db-neutral-bg-vibrant-hovered
  );--db-adaptive-bg-vibrant-pressed:var(
  	--db-neutral-bg-vibrant-pressed
  );--db-adaptive-on-bg-vibrant-default:var(
  	--db-neutral-on-bg-vibrant-default
  );--db-adaptive-on-bg-vibrant-hovered:var(
  	--db-neutral-on-bg-vibrant-hovered
  );--db-adaptive-on-bg-vibrant-pressed:var(
  	--db-neutral-on-bg-vibrant-pressed
  )}:host,:root{background-color:var(--db-neutral-bg-basic-level-1-default);color:var(--db-neutral-on-bg-basic-emphasis-100-default)}:root:after,:root:before{--db-icon-color:var(--db-neutral-on-bg-basic-emphasis-100-default)}:host,:root{font:var(--db-type-body-md);--db-icon-font-weight:var(--db-base-body-icon-weight-md);--db-icon-font-size:var(--db-base-body-icon-font-size-md)}:host,:root{--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)}@media (width <= 48em){:host,:root{--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 (48em < width <= 64em){:host,:root{--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 (64em < width){:host,:root{--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)}}@media (width <= 48em){:host,:root{--db-base-headline-icon-font-size-3xs:var(--db-base-icon-font-size-regular-mobile-headline-3xs);--db-base-headline-icon-font-size-2xs:var(--db-base-icon-font-size-regular-mobile-headline-2xs);--db-base-headline-icon-font-size-xs:var(--db-base-icon-font-size-regular-mobile-headline-xs);--db-base-headline-icon-font-size-sm:var(--db-base-icon-font-size-regular-mobile-headline-sm);--db-base-headline-icon-font-size-md:var(--db-base-icon-font-size-regular-mobile-headline-md);--db-base-headline-icon-font-size-lg:var(--db-base-icon-font-size-regular-mobile-headline-lg);--db-base-headline-icon-font-size-xl:var(--db-base-icon-font-size-regular-mobile-headline-xl);--db-base-headline-icon-font-size-2xl:var(--db-base-icon-font-size-regular-mobile-headline-2xl);--db-base-headline-icon-font-size-3xl:var(--db-base-icon-font-size-regular-mobile-headline-3xl)}}@media (48em < width <= 64em){:host,:root{--db-base-headline-icon-font-size-3xs:var(--db-base-icon-font-size-regular-tablet-headline-3xs);--db-base-headline-icon-font-size-2xs:var(--db-base-icon-font-size-regular-tablet-headline-2xs);--db-base-headline-icon-font-size-xs:var(--db-base-icon-font-size-regular-tablet-headline-xs);--db-base-headline-icon-font-size-sm:var(--db-base-icon-font-size-regular-tablet-headline-sm);--db-base-headline-icon-font-size-md:var(--db-base-icon-font-size-regular-tablet-headline-md);--db-base-headline-icon-font-size-lg:var(--db-base-icon-font-size-regular-tablet-headline-lg);--db-base-headline-icon-font-size-xl:var(--db-base-icon-font-size-regular-tablet-headline-xl);--db-base-headline-icon-font-size-2xl:var(--db-base-icon-font-size-regular-tablet-headline-2xl);--db-base-headline-icon-font-size-3xl:var(--db-base-icon-font-size-regular-tablet-headline-3xl)}}@media (64em < width){:host,:root{--db-base-headline-icon-font-size-3xs:var(--db-base-icon-font-size-regular-desktop-headline-3xs);--db-base-headline-icon-font-size-2xs:var(--db-base-icon-font-size-regular-desktop-headline-2xs);--db-base-headline-icon-font-size-xs:var(--db-base-icon-font-size-regular-desktop-headline-xs);--db-base-headline-icon-font-size-sm:var(--db-base-icon-font-size-regular-desktop-headline-sm);--db-base-headline-icon-font-size-md:var(--db-base-icon-font-size-regular-desktop-headline-md);--db-base-headline-icon-font-size-lg:var(--db-base-icon-font-size-regular-desktop-headline-lg);--db-base-headline-icon-font-size-xl:var(--db-base-icon-font-size-regular-desktop-headline-xl);--db-base-headline-icon-font-size-2xl:var(--db-base-icon-font-size-regular-desktop-headline-2xl);--db-base-headline-icon-font-size-3xl:var(--db-base-icon-font-size-regular-desktop-headline-3xl)}}@media (width <= 48em){:host,:root{--db-base-body-icon-font-size-3xs:var(--db-base-icon-font-size-regular-mobile-body-3xs);--db-type-body-2xs:var(--db-typography-regular-mobile-body-2xs);--db-base-body-icon-weight-2xs:var(--db-base-icon-weight-regular-mobile-body-2xs);--db-base-body-icon-font-size-2xs:var(--db-base-icon-font-size-regular-mobile-body-2xs);--db-type-body-xs:var(--db-typography-regular-mobile-body-xs);--db-base-body-icon-weight-xs:var(--db-base-icon-weight-regular-mobile-body-xs);--db-base-body-icon-font-size-xs:var(--db-base-icon-font-size-regular-mobile-body-xs);--db-type-body-sm:var(--db-typography-regular-mobile-body-sm);--db-base-body-icon-weight-sm:var(--db-base-icon-weight-regular-mobile-body-sm);--db-base-body-icon-font-size-sm:var(--db-base-icon-font-size-regular-mobile-body-sm);--db-type-body-md:var(--db-typography-regular-mobile-body-md);--db-base-body-icon-weight-md:var(--db-base-icon-weight-regular-mobile-body-md);--db-base-body-icon-font-size-md:var(--db-base-icon-font-size-regular-mobile-body-md);--db-base-body-icon-font-size-lg:var(--db-base-icon-font-size-regular-mobile-body-lg);--db-base-body-icon-font-size-xl:var(--db-base-icon-font-size-regular-mobile-body-xl);--db-base-body-icon-font-size-2xl:var(--db-base-icon-font-size-regular-mobile-body-2xl);--db-base-body-icon-font-size-3xl:var(--db-base-icon-font-size-regular-mobile-body-3xl)}}@media (48em < width <= 64em){:host,:root{--db-base-body-icon-font-size-3xs:var(--db-base-icon-font-size-regular-tablet-body-3xs);--db-type-body-2xs:var(--db-typography-regular-tablet-body-2xs);--db-base-body-icon-weight-2xs:var(--db-base-icon-weight-regular-tablet-body-2xs);--db-base-body-icon-font-size-2xs:var(--db-base-icon-font-size-regular-tablet-body-2xs);--db-type-body-xs:var(--db-typography-regular-tablet-body-xs);--db-base-body-icon-weight-xs:var(--db-base-icon-weight-regular-tablet-body-xs);--db-base-body-icon-font-size-xs:var(--db-base-icon-font-size-regular-tablet-body-xs);--db-type-body-sm:var(--db-typography-regular-tablet-body-sm);--db-base-body-icon-weight-sm:var(--db-base-icon-weight-regular-tablet-body-sm);--db-base-body-icon-font-size-sm:var(--db-base-icon-font-size-regular-tablet-body-sm);--db-type-body-md:var(--db-typography-regular-tablet-body-md);--db-base-body-icon-weight-md:var(--db-base-icon-weight-regular-tablet-body-md);--db-base-body-icon-font-size-md:var(--db-base-icon-font-size-regular-tablet-body-md);--db-base-body-icon-font-size-lg:var(--db-base-icon-font-size-regular-tablet-body-lg);--db-base-body-icon-font-size-xl:var(--db-base-icon-font-size-regular-tablet-body-xl);--db-base-body-icon-font-size-2xl:var(--db-base-icon-font-size-regular-tablet-body-2xl);--db-base-body-icon-font-size-3xl:var(--db-base-icon-font-size-regular-tablet-body-3xl)}}@media (64em < width){:host,:root{--db-base-body-icon-font-size-3xs:var(--db-base-icon-font-size-regular-desktop-body-3xs);--db-type-body-2xs:var(--db-typography-regular-desktop-body-2xs);--db-base-body-icon-weight-2xs:var(--db-base-icon-weight-regular-desktop-body-2xs);--db-base-body-icon-font-size-2xs:var(--db-base-icon-font-size-regular-desktop-body-2xs);--db-type-body-xs:var(--db-typography-regular-desktop-body-xs);--db-base-body-icon-weight-xs:var(--db-base-icon-weight-regular-desktop-body-xs);--db-base-body-icon-font-size-xs:var(--db-base-icon-font-size-regular-desktop-body-xs);--db-type-body-sm:var(--db-typography-regular-desktop-body-sm);--db-base-body-icon-weight-sm:var(--db-base-icon-weight-regular-desktop-body-sm);--db-base-body-icon-font-size-sm:var(--db-base-icon-font-size-regular-desktop-body-sm);--db-type-body-md:var(--db-typography-regular-desktop-body-md);--db-base-body-icon-weight-md:var(--db-base-icon-weight-regular-desktop-body-md);--db-base-body-icon-font-size-md:var(--db-base-icon-font-size-regular-desktop-body-md);--db-base-body-icon-font-size-lg:var(--db-base-icon-font-size-regular-desktop-body-lg);--db-base-body-icon-font-size-xl:var(--db-base-icon-font-size-regular-desktop-body-xl);--db-base-body-icon-font-size-2xl:var(--db-base-icon-font-size-regular-desktop-body-2xl);--db-base-body-icon-font-size-3xl:var(--db-base-icon-font-size-regular-desktop-body-3xl)}}
}
@layer db-ux{
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
.db-focus-default:not([data-disable-focus=true]),
[data-focus=default]:not([data-disable-focus=true]) {
  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
  outline-offset: var(--db-border-width-xs);
  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
}
.db-focus-default:not([data-disable-focus=true]):not([type=radio], [role=switch]),
[data-focus=default]:not([data-disable-focus=true]):not([type=radio], [role=switch]) {
  border-radius: var(--db-border-radius-xs);
}

.db-divider-top-before,
[data-divider=top-before] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
  position: var(--db-tooltip-parent-position, relative);
}
.db-divider-top-before[data-emphasis=strong],
[data-divider=top-before][data-emphasis=strong] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
}
.db-divider-top-before::before,
[data-divider=top-before]::before {
  content: "";
  background-color: var(--db-divider-bg-color);
  position: absolute;
  /* jscpd:ignore-start */
  block-size: var(--db-border-width-3xs);
  inset-block-start: 0;
  inset-inline: 0;
  /* stylelint-disable-next-line db-ux/use-border-color */
}
@media (forced-colors: active) {
  .db-divider-top-before::before,
  [data-divider=top-before]::before {
    /* stylelint-disable-next-line db-ux/use-border-color */
    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
  }
}
.db-divider-top-before::before,
[data-divider=top-before]::before {
  /* stylelint-disable-next-line at-rule-empty-line-before */
  /* jscpd:ignore-end */
}

.db-divider-top-after,
[data-divider=top-after] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
  position: var(--db-tooltip-parent-position, relative);
}
.db-divider-top-after[data-emphasis=strong],
[data-divider=top-after][data-emphasis=strong] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
}
.db-divider-top-after::after,
[data-divider=top-after]::after {
  content: "";
  background-color: var(--db-divider-bg-color);
  position: absolute;
  /* jscpd:ignore-start */
  block-size: var(--db-border-width-3xs);
  inset-block-start: 0;
  inset-inline: 0;
  /* stylelint-disable-next-line db-ux/use-border-color */
}
@media (forced-colors: active) {
  .db-divider-top-after::after,
  [data-divider=top-after]::after {
    /* stylelint-disable-next-line db-ux/use-border-color */
    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
  }
}
.db-divider-top-after::after,
[data-divider=top-after]::after {
  /* stylelint-disable-next-line at-rule-empty-line-before */
  /* jscpd:ignore-end */
}

.db-divider-bottom-before,
[data-divider=bottom-before] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
  position: var(--db-tooltip-parent-position, relative);
}
.db-divider-bottom-before[data-emphasis=strong],
[data-divider=bottom-before][data-emphasis=strong] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
}
.db-divider-bottom-before::before,
[data-divider=bottom-before]::before {
  content: "";
  background-color: var(--db-divider-bg-color);
  position: absolute;
  /* jscpd:ignore-start */
  block-size: var(--db-border-width-3xs);
  inset-block-end: 0;
  inset-inline: 0;
  /* stylelint-disable-next-line db-ux/use-border-color */
}
@media (forced-colors: active) {
  .db-divider-bottom-before::before,
  [data-divider=bottom-before]::before {
    /* stylelint-disable-next-line db-ux/use-border-color */
    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
  }
}
.db-divider-bottom-before::before,
[data-divider=bottom-before]::before {
  /* stylelint-disable-next-line at-rule-empty-line-before */
  /* jscpd:ignore-end */
}

.db-divider-bottom-after,
[data-divider=bottom-after] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
  position: var(--db-tooltip-parent-position, relative);
}
.db-divider-bottom-after[data-emphasis=strong],
[data-divider=bottom-after][data-emphasis=strong] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
}
.db-divider-bottom-after::after,
[data-divider=bottom-after]::after {
  content: "";
  background-color: var(--db-divider-bg-color);
  position: absolute;
  /* jscpd:ignore-start */
  block-size: var(--db-border-width-3xs);
  inset-block-end: 0;
  inset-inline: 0;
  /* stylelint-disable-next-line db-ux/use-border-color */
}
@media (forced-colors: active) {
  .db-divider-bottom-after::after,
  [data-divider=bottom-after]::after {
    /* stylelint-disable-next-line db-ux/use-border-color */
    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
  }
}
.db-divider-bottom-after::after,
[data-divider=bottom-after]::after {
  /* stylelint-disable-next-line at-rule-empty-line-before */
  /* jscpd:ignore-end */
}

.db-divider-left-before,
[data-divider=left-before] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
  position: var(--db-tooltip-parent-position, relative);
}
.db-divider-left-before[data-emphasis=strong],
[data-divider=left-before][data-emphasis=strong] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
}
.db-divider-left-before::before,
[data-divider=left-before]::before {
  content: "";
  background-color: var(--db-divider-bg-color);
  position: absolute;
  /* jscpd:ignore-start */
  inline-size: var(--db-border-width-3xs);
  inset-inline-start: 0;
  inset-block: 0;
  /* stylelint-disable-next-line db-ux/use-border-color */
}
@media (forced-colors: active) {
  .db-divider-left-before::before,
  [data-divider=left-before]::before {
    /* stylelint-disable-next-line db-ux/use-border-color */
    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
  }
}
.db-divider-left-before::before,
[data-divider=left-before]::before {
  /* stylelint-disable-next-line at-rule-empty-line-before */
  /* jscpd:ignore-end */
}

.db-divider-left-after,
[data-divider=left-after] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
  position: var(--db-tooltip-parent-position, relative);
}
.db-divider-left-after[data-emphasis=strong],
[data-divider=left-after][data-emphasis=strong] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
}
.db-divider-left-after::after,
[data-divider=left-after]::after {
  content: "";
  background-color: var(--db-divider-bg-color);
  position: absolute;
  /* jscpd:ignore-start */
  inline-size: var(--db-border-width-3xs);
  inset-inline-start: 0;
  inset-block: 0;
  /* stylelint-disable-next-line db-ux/use-border-color */
}
@media (forced-colors: active) {
  .db-divider-left-after::after,
  [data-divider=left-after]::after {
    /* stylelint-disable-next-line db-ux/use-border-color */
    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
  }
}
.db-divider-left-after::after,
[data-divider=left-after]::after {
  /* stylelint-disable-next-line at-rule-empty-line-before */
  /* jscpd:ignore-end */
}

.db-divider-right-before,
[data-divider=right-before] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
  position: var(--db-tooltip-parent-position, relative);
}
.db-divider-right-before[data-emphasis=strong],
[data-divider=right-before][data-emphasis=strong] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
}
.db-divider-right-before::before,
[data-divider=right-before]::before {
  content: "";
  background-color: var(--db-divider-bg-color);
  position: absolute;
  /* jscpd:ignore-start */
  inline-size: var(--db-border-width-3xs);
  inset-inline-end: 0;
  inset-block: 0;
  /* stylelint-disable-next-line db-ux/use-border-color */
}
@media (forced-colors: active) {
  .db-divider-right-before::before,
  [data-divider=right-before]::before {
    /* stylelint-disable-next-line db-ux/use-border-color */
    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
  }
}
.db-divider-right-before::before,
[data-divider=right-before]::before {
  /* jscpd:ignore-end */
}

.db-divider-right-after,
[data-divider=right-after] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
  position: var(--db-tooltip-parent-position, relative);
}
.db-divider-right-after[data-emphasis=strong],
[data-divider=right-after][data-emphasis=strong] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
}
.db-divider-right-after::after,
[data-divider=right-after]::after {
  content: "";
  background-color: var(--db-divider-bg-color);
  position: absolute;
  /* jscpd:ignore-start */
  inline-size: var(--db-border-width-3xs);
  inset-inline-end: 0;
  inset-block: 0;
  /* stylelint-disable-next-line db-ux/use-border-color */
}
@media (forced-colors: active) {
  .db-divider-right-after::after,
  [data-divider=right-after]::after {
    /* stylelint-disable-next-line db-ux/use-border-color */
    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
  }
}
.db-divider-right-after::after,
[data-divider=right-after]::after {
  /* jscpd:ignore-end */
}
}
@layer db-ux{
.db-interactive-elevation,[data-interactive=elevation]{cursor:pointer;box-shadow:var(--db-elevation-md)}@media (prefers-reduced-motion:no-preference){.db-interactive-elevation,[data-interactive=elevation]{transition:box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional)}}.db-interactive-elevation:hover,[data-interactive=elevation]:hover{cursor:var(--db-overwrite-cursor,pointer);box-shadow:var(--db-elevation-lg)}.db-interactive-elevation:active,[data-interactive=elevation]:active{cursor:var(--db-overwrite-cursor,pointer);box-shadow:var(--db-elevation-sm)}
}
@layer db-ux{
@media (prefers-reduced-motion:no-preference){[class^=db-],[class^=db-] *,[class^=db-] :after,[class^=db-] :before{transition:outline var(--db-transition-duration-extra-fast),box-shadow var(--db-transition-duration-extra-fast),border-color var(--db-transition-straight-emotional),background-color var(--db-transition-straight-emotional)}}@keyframes popover-animation{0%{pointer-events:none;opacity:0;transform:translate(var(--db-popover-center-x,var(--db-popover-translate-x,0)),var(--db-popover-center-y,var(--db-popover-translate-y,0)))}to{pointer-events:auto;opacity:1;transform:translate(var(--db-popover-center-x,0),var(--db-popover-center-y,0))}}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes wobbling{50%{inset-inline-start:100%;transform:translateX(calc(var(--db-loading-indicator-wobbling-direction, 1) * (-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px))))}}
}
@layer db-ux{
[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{color:var(--db-icon-color,inherit);display:inline-block;font-family:var(--db-icon-font-family,var(--db-icon-default-font-family,"db-ux-default","icon-font-fallback"))!important;font-size:var(--db-icon-font-size,1.5rem);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:var(--db-icon-font-weight,normal);line-height:1;speak:none;speak:never;text-transform:none;overflow:clip;vertical-align:var(--db-icon-vertical-align,middle);block-size:var(--db-icon-font-size,1.5rem);inline-size:var(--db-icon-font-size,1.5rem);aspect-ratio:1;flex-shrink:0;text-underline-position:auto;content:var(--db-icon,attr(data-icon))}@supports (content:""/""){[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:var(--db-icon,attr(data-icon))/""}}@media aural{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}@media speech{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}[data-icon-leading]:is(span):not([hidden]),[data-icon-trailing]:is(span):not([hidden]),[data-icon]:is(span):not([hidden]){display:inline-flex}[data-icon-leading]:is(span),[data-icon-trailing]:is(span),[data-icon]:is(span){vertical-align:initial}[data-icon-leading=none]:before,[data-icon=none]:before,[data-show-icon-leading=false]:before,[data-show-icon=false]:before{content:none}[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing))}@supports (content:""/""){[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing))/""}}[data-icon-trailing=none]:after,[data-show-icon-trailing=false]:after{content:none}.is-icon-text-replace[data-icon-leading],.is-icon-text-replace[data-icon-trailing],.is-icon-text-replace[data-icon]{font-size:0!important}@font-face{font-display:block;font-family:icon-font-fallback;font-style:normal;font-weight:400;src:url("data:application/octet-stream;base64,d09GMgABAAAAAALAAAsAAAAAB8gAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACFegoUPAE2AiQDCAsGAAQgBYUOBysbJAfIrjBu4YkWdj4mP/wNUwgBWAAK8Tz92uu5bzeIKpJ4PLCOwgJxKmxlVZUBVhLY/+63n6ZlVd+q+JYluo4VQv5R4ejdz9BP+Dk5hUpNjXBxv1sBaSJaC0igiNLJzS9wsNc8ihPOOIQQDhtwgIHHieM+PDyHi1tAAf8GeS/KbE3LojUWRgWST5B5exuFB3wIN0wv8NNgfEfQbtFccWvn4BgaN8+xh5YyNRvi/Ny8Zgjq3KNWw3iraG57bRo5Szkujxf+6fPVUqBoqqg37N5Cwoc5rzWOpudsgi8raEKFWaAmr+ojL1XKpCXtqeMq0KoPFcy58/oPRRSB1Op2NAA8R2mm1BqaRf4/kNsJOYtiI8CcJThDcI7gPMEFgosElwguE1whuEpwjeA6wQ2CmwS3CG4T3CG4S3CP4D7BA4KHBI8IHhM8IXhK8Izg+HBAAXXa8BOMJ38cKc/DzT/WMg9r1ILw5bU7Q/1vhVyEX53987Xt7P5KlNBG505O4806S401qeGyRnO7dvHDYvT6rJmO/t24W/TH5iq0N6GglrRp0mGZZv12aDfj8uYOA95U6jYx6h1QdPtAZdSvoJb802Q40mw00W4vc06H8XxNBN/VwbPzC2RtRmJzqMyDpVTYIXeKU5XyVfA4VFZ8ZFt5lYiVxOwF80czYtaoU3C41eRlytqAMYW1EtxbMsdxP7bsyp4IDlaEwOvSvpXDv5xYVoYIG4cU44FFUuue6ytPKUluxTaPhnoGvQTbVt9TmTBF/jzzAuUeGSOMaUhLAgdtjWRVo0QCFMt3rSkC61n2CEVjfT1Ot7X21uR1ipQK7baUlFQyBwAAAAA=")}
}
@layer db-ux{
blockquote:not([class]){--db-adaptive-bg-basic-level-1-default:var(
  	--db-neutral-bg-basic-level-1-default
  );--db-adaptive-bg-basic-level-1-hovered:var(
  	--db-neutral-bg-basic-level-1-hovered
  );--db-adaptive-bg-basic-level-1-pressed:var(
  	--db-neutral-bg-basic-level-1-pressed
  );--db-adaptive-bg-basic-level-2-default:var(
  	--db-neutral-bg-basic-level-2-default
  );--db-adaptive-bg-basic-level-2-hovered:var(
  	--db-neutral-bg-basic-level-2-hovered
  );--db-adaptive-bg-basic-level-2-pressed:var(
  	--db-neutral-bg-basic-level-2-pressed
  );--db-adaptive-bg-basic-level-3-default:var(
  	--db-neutral-bg-basic-level-3-default
  );--db-adaptive-bg-basic-level-3-hovered:var(
  	--db-neutral-bg-basic-level-3-hovered
  );--db-adaptive-bg-basic-level-3-pressed:var(
  	--db-neutral-bg-basic-level-3-pressed
  );--db-adaptive-bg-basic-transparent-full-default:var(
  	--db-neutral-bg-basic-transparent-full-default
  );--db-adaptive-bg-basic-transparent-semi-default:var(
  	--db-neutral-bg-basic-transparent-semi-default
  );--db-adaptive-bg-basic-transparent-full-hovered:var(
  	--db-neutral-bg-basic-transparent-full-hovered
  );--db-adaptive-bg-basic-transparent-full-pressed:var(
  	--db-neutral-bg-basic-transparent-full-pressed
  );--db-adaptive-bg-basic-transparent-semi-hovered:var(
  	--db-neutral-bg-basic-transparent-semi-hovered
  );--db-adaptive-bg-basic-transparent-semi-pressed:var(
  	--db-neutral-bg-basic-transparent-semi-pressed
  );--db-adaptive-on-bg-basic-emphasis-100-default:var(
  	--db-neutral-on-bg-basic-emphasis-100-default
  );--db-adaptive-on-bg-basic-emphasis-100-hovered:var(
  	--db-neutral-on-bg-basic-emphasis-100-hovered
  );--db-adaptive-on-bg-basic-emphasis-100-pressed:var(
  	--db-neutral-on-bg-basic-emphasis-100-pressed
  );--db-adaptive-on-bg-basic-emphasis-90-default:var(
  	--db-neutral-on-bg-basic-emphasis-90-default
  );--db-adaptive-on-bg-basic-emphasis-90-hovered:var(
  	--db-neutral-on-bg-basic-emphasis-90-hovered
  );--db-adaptive-on-bg-basic-emphasis-90-pressed:var(
  	--db-neutral-on-bg-basic-emphasis-90-pressed
  );--db-adaptive-on-bg-basic-emphasis-80-default:var(
  	--db-neutral-on-bg-basic-emphasis-80-default
  );--db-adaptive-on-bg-basic-emphasis-80-hovered:var(
  	--db-neutral-on-bg-basic-emphasis-80-hovered
  );--db-adaptive-on-bg-basic-emphasis-80-pressed:var(
  	--db-neutral-on-bg-basic-emphasis-80-pressed
  );--db-adaptive-on-bg-basic-emphasis-70-default:var(
  	--db-neutral-on-bg-basic-emphasis-70-default
  );--db-adaptive-on-bg-basic-emphasis-70-hovered:var(
  	--db-neutral-on-bg-basic-emphasis-70-hovered
  );--db-adaptive-on-bg-basic-emphasis-70-pressed:var(
  	--db-neutral-on-bg-basic-emphasis-70-pressed
  );--db-adaptive-on-bg-basic-emphasis-60-default:var(
  	--db-neutral-on-bg-basic-emphasis-60-default
  );--db-adaptive-on-bg-basic-emphasis-50-default:var(
  	--db-neutral-on-bg-basic-emphasis-50-default
  );--db-adaptive-bg-inverted-contrast-max-default:var(
  	--db-neutral-bg-inverted-contrast-max-default
  );--db-adaptive-bg-inverted-contrast-max-hovered:var(
  	--db-neutral-bg-inverted-contrast-max-hovered
  );--db-adaptive-bg-inverted-contrast-max-pressed:var(
  	--db-neutral-bg-inverted-contrast-max-pressed
  );--db-adaptive-bg-inverted-contrast-high-default:var(
  	--db-neutral-bg-inverted-contrast-high-default
  );--db-adaptive-bg-inverted-contrast-high-hovered:var(
  	--db-neutral-bg-inverted-contrast-high-hovered
  );--db-adaptive-bg-inverted-contrast-high-pressed:var(
  	--db-neutral-bg-inverted-contrast-high-pressed
  );--db-adaptive-bg-inverted-contrast-low-default:var(
  	--db-neutral-bg-inverted-contrast-low-default
  );--db-adaptive-bg-inverted-contrast-low-hovered:var(
  	--db-neutral-bg-inverted-contrast-low-hovered
  );--db-adaptive-bg-inverted-contrast-low-pressed:var(
  	--db-neutral-bg-inverted-contrast-low-pressed
  );--db-adaptive-on-bg-inverted-default:var(
  	--db-neutral-on-bg-inverted-default
  );--db-adaptive-on-bg-inverted-hovered:var(
  	--db-neutral-on-bg-inverted-hovered
  );--db-adaptive-on-bg-inverted-pressed:var(
  	--db-neutral-on-bg-inverted-pressed
  );--db-adaptive-origin-default:var(--db-neutral-origin-default);--db-adaptive-origin-hovered:var(--db-neutral-origin-hovered);--db-adaptive-origin-pressed:var(--db-neutral-origin-pressed);--db-adaptive-on-origin-default:var(
  	--db-neutral-on-origin-default
  );--db-adaptive-bg-vibrant-default:var(
  	--db-neutral-bg-vibrant-default
  );--db-adaptive-bg-vibrant-hovered:var(
  	--db-neutral-bg-vibrant-hovered
  );--db-adaptive-bg-vibrant-pressed:var(
  	--db-neutral-bg-vibrant-pressed
  );--db-adaptive-on-bg-vibrant-default:var(
  	--db-neutral-on-bg-vibrant-default
  );--db-adaptive-on-bg-vibrant-hovered:var(
  	--db-neutral-on-bg-vibrant-hovered
  );--db-adaptive-on-bg-vibrant-pressed:var(
  	--db-neutral-on-bg-vibrant-pressed
  );background-color:var(--db-neutral-bg-basic-transparent-semi-default);color:var(--db-neutral-on-bg-basic-emphasis-100-default)}blockquote:not([class]):after,blockquote:not([class]):before{--db-icon-color:var(--db-neutral-on-bg-basic-emphasis-100-default)}pre:not([class]):has(code){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding:var(--db-spacing-fixed-xs)}pre:not([class]):has(code),pre:not([class]):has(code) code,pre:not([class]):has(code) span{font-family:monospace}a:has(code:not([class]):only-child){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default)}a:has(code:not([class]):only-child):hover{cursor:var(--db-overwrite-cursor,pointer);color:var(--db-adaptive-on-bg-inverted-hovered)}a:has(code:not([class]):only-child):active{cursor:var(--db-overwrite-cursor,pointer);color:var(--db-adaptive-on-bg-inverted-pressed)}a:has(code:not([class]):only-child)>code{color:inherit}code:not([class]){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding-block:var(--db-spacing-fixed-3xs);padding-inline:var(--db-spacing-fixed-2xs)}code:not([class]),code:not([class]) span{font-family:monospace}blockquote:not([class]){margin:0;padding:var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md)}
}
@layer db-ux{
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
[data-color=brand],
.db-color-brand {
  --db-adaptive-bg-basic-level-1-default: var(
  	--db-brand-bg-basic-level-1-default
  );
  --db-adaptive-bg-basic-level-1-hovered: var(
  	--db-brand-bg-basic-level-1-hovered
  );
  --db-adaptive-bg-basic-level-1-pressed: var(
  	--db-brand-bg-basic-level-1-pressed
  );
  --db-adaptive-bg-basic-level-2-default: var(
  	--db-brand-bg-basic-level-2-default
  );
  --db-adaptive-bg-basic-level-2-hovered: var(
  	--db-brand-bg-basic-level-2-hovered
  );
  --db-adaptive-bg-basic-level-2-pressed: var(
  	--db-brand-bg-basic-level-2-pressed
  );
  --db-adaptive-bg-basic-level-3-default: var(
  	--db-brand-bg-basic-level-3-default
  );
  --db-adaptive-bg-basic-level-3-hovered: var(
  	--db-brand-bg-basic-level-3-hovered
  );
  --db-adaptive-bg-basic-level-3-pressed: var(
  	--db-brand-bg-basic-level-3-pressed
  );
  --db-adaptive-bg-basic-transparent-full-default: var(
  	--db-brand-bg-basic-transparent-full-default
  );
  --db-adaptive-bg-basic-transparent-semi-default: var(
  	--db-brand-bg-basic-transparent-semi-default
  );
  --db-adaptive-bg-basic-transparent-full-hovered: var(
  	--db-brand-bg-basic-transparent-full-hovered
  );
  --db-adaptive-bg-basic-transparent-full-pressed: var(
  	--db-brand-bg-basic-transparent-full-pressed
  );
  --db-adaptive-bg-basic-transparent-semi-hovered: var(
  	--db-brand-bg-basic-transparent-semi-hovered
  );
  --db-adaptive-bg-basic-transparent-semi-pressed: var(
  	--db-brand-bg-basic-transparent-semi-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
  	--db-brand-on-bg-basic-emphasis-100-default
  );
  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
  	--db-brand-on-bg-basic-emphasis-100-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
  	--db-brand-on-bg-basic-emphasis-100-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-90-default: var(
  	--db-brand-on-bg-basic-emphasis-90-default
  );
  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
  	--db-brand-on-bg-basic-emphasis-90-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
  	--db-brand-on-bg-basic-emphasis-90-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-80-default: var(
  	--db-brand-on-bg-basic-emphasis-80-default
  );
  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
  	--db-brand-on-bg-basic-emphasis-80-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
  	--db-brand-on-bg-basic-emphasis-80-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-70-default: var(
  	--db-brand-on-bg-basic-emphasis-70-default
  );
  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
  	--db-brand-on-bg-basic-emphasis-70-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
  	--db-brand-on-bg-basic-emphasis-70-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-60-default: var(
  	--db-brand-on-bg-basic-emphasis-60-default
  );
  --db-adaptive-on-bg-basic-emphasis-50-default: var(
  	--db-brand-on-bg-basic-emphasis-50-default
  );
  --db-adaptive-bg-inverted-contrast-max-default: var(
  	--db-brand-bg-inverted-contrast-max-default
  );
  --db-adaptive-bg-inverted-contrast-max-hovered: var(
  	--db-brand-bg-inverted-contrast-max-hovered
  );
  --db-adaptive-bg-inverted-contrast-max-pressed: var(
  	--db-brand-bg-inverted-contrast-max-pressed
  );
  --db-adaptive-bg-inverted-contrast-high-default: var(
  	--db-brand-bg-inverted-contrast-high-default
  );
  --db-adaptive-bg-inverted-contrast-high-hovered: var(
  	--db-brand-bg-inverted-contrast-high-hovered
  );
  --db-adaptive-bg-inverted-contrast-high-pressed: var(
  	--db-brand-bg-inverted-contrast-high-pressed
  );
  --db-adaptive-bg-inverted-contrast-low-default: var(
  	--db-brand-bg-inverted-contrast-low-default
  );
  --db-adaptive-bg-inverted-contrast-low-hovered: var(
  	--db-brand-bg-inverted-contrast-low-hovered
  );
  --db-adaptive-bg-inverted-contrast-low-pressed: var(
  	--db-brand-bg-inverted-contrast-low-pressed
  );
  --db-adaptive-on-bg-inverted-default: var(
  	--db-brand-on-bg-inverted-default
  );
  --db-adaptive-on-bg-inverted-hovered: var(
  	--db-brand-on-bg-inverted-hovered
  );
  --db-adaptive-on-bg-inverted-pressed: var(
  	--db-brand-on-bg-inverted-pressed
  );
  --db-adaptive-origin-default: var(--db-brand-origin-default);
  --db-adaptive-origin-hovered: var(--db-brand-origin-hovered);
  --db-adaptive-origin-pressed: var(--db-brand-origin-pressed);
  --db-adaptive-on-origin-default: var(
  	--db-brand-on-origin-default
  );
  --db-adaptive-bg-vibrant-default: var(
  	--db-brand-bg-vibrant-default
  );
  --db-adaptive-bg-vibrant-hovered: var(
  	--db-brand-bg-vibrant-hovered
  );
  --db-adaptive-bg-vibrant-pressed: var(
  	--db-brand-bg-vibrant-pressed
  );
  --db-adaptive-on-bg-vibrant-default: var(
  	--db-brand-on-bg-vibrant-default
  );
  --db-adaptive-on-bg-vibrant-hovered: var(
  	--db-brand-on-bg-vibrant-hovered
  );
  --db-adaptive-on-bg-vibrant-pressed: var(
  	--db-brand-on-bg-vibrant-pressed
  );
}

[data-color=brand],
.db-color-brand {
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  background-color: var(--db-adaptive-bg-basic-level-1-default);
}
}
@layer db-ux{
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
[data-color=critical],
.db-color-critical {
  --db-adaptive-bg-basic-level-1-default: var(
  	--db-critical-bg-basic-level-1-default
  );
  --db-adaptive-bg-basic-level-1-hovered: var(
  	--db-critical-bg-basic-level-1-hovered
  );
  --db-adaptive-bg-basic-level-1-pressed: var(
  	--db-critical-bg-basic-level-1-pressed
  );
  --db-adaptive-bg-basic-level-2-default: var(
  	--db-critical-bg-basic-level-2-default
  );
  --db-adaptive-bg-basic-level-2-hovered: var(
  	--db-critical-bg-basic-level-2-hovered
  );
  --db-adaptive-bg-basic-level-2-pressed: var(
  	--db-critical-bg-basic-level-2-pressed
  );
  --db-adaptive-bg-basic-level-3-default: var(
  	--db-critical-bg-basic-level-3-default
  );
  --db-adaptive-bg-basic-level-3-hovered: var(
  	--db-critical-bg-basic-level-3-hovered
  );
  --db-adaptive-bg-basic-level-3-pressed: var(
  	--db-critical-bg-basic-level-3-pressed
  );
  --db-adaptive-bg-basic-transparent-full-default: var(
  	--db-critical-bg-basic-transparent-full-default
  );
  --db-adaptive-bg-basic-transparent-semi-default: var(
  	--db-critical-bg-basic-transparent-semi-default
  );
  --db-adaptive-bg-basic-transparent-full-hovered: var(
  	--db-critical-bg-basic-transparent-full-hovered
  );
  --db-adaptive-bg-basic-transparent-full-pressed: var(
  	--db-critical-bg-basic-transparent-full-pressed
  );
  --db-adaptive-bg-basic-transparent-semi-hovered: var(
  	--db-critical-bg-basic-transparent-semi-hovered
  );
  --db-adaptive-bg-basic-transparent-semi-pressed: var(
  	--db-critical-bg-basic-transparent-semi-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
  	--db-critical-on-bg-basic-emphasis-100-default
  );
  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
  	--db-critical-on-bg-basic-emphasis-100-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
  	--db-critical-on-bg-basic-emphasis-100-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-90-default: var(
  	--db-critical-on-bg-basic-emphasis-90-default
  );
  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
  	--db-critical-on-bg-basic-emphasis-90-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
  	--db-critical-on-bg-basic-emphasis-90-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-80-default: var(
  	--db-critical-on-bg-basic-emphasis-80-default
  );
  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
  	--db-critical-on-bg-basic-emphasis-80-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
  	--db-critical-on-bg-basic-emphasis-80-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-70-default: var(
  	--db-critical-on-bg-basic-emphasis-70-default
  );
  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
  	--db-critical-on-bg-basic-emphasis-70-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
  	--db-critical-on-bg-basic-emphasis-70-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-60-default: var(
  	--db-critical-on-bg-basic-emphasis-60-default
  );
  --db-adaptive-on-bg-basic-emphasis-50-default: var(
  	--db-critical-on-bg-basic-emphasis-50-default
  );
  --db-adaptive-bg-inverted-contrast-max-default: var(
  	--db-critical-bg-inverted-contrast-max-default
  );
  --db-adaptive-bg-inverted-contrast-max-hovered: var(
  	--db-critical-bg-inverted-contrast-max-hovered
  );
  --db-adaptive-bg-inverted-contrast-max-pressed: var(
  	--db-critical-bg-inverted-contrast-max-pressed
  );
  --db-adaptive-bg-inverted-contrast-high-default: var(
  	--db-critical-bg-inverted-contrast-high-default
  );
  --db-adaptive-bg-inverted-contrast-high-hovered: var(
  	--db-critical-bg-inverted-contrast-high-hovered
  );
  --db-adaptive-bg-inverted-contrast-high-pressed: var(
  	--db-critical-bg-inverted-contrast-high-pressed
  );
  --db-adaptive-bg-inverted-contrast-low-default: var(
  	--db-critical-bg-inverted-contrast-low-default
  );
  --db-adaptive-bg-inverted-contrast-low-hovered: var(
  	--db-critical-bg-inverted-contrast-low-hovered
  );
  --db-adaptive-bg-inverted-contrast-low-pressed: var(
  	--db-critical-bg-inverted-contrast-low-pressed
  );
  --db-adaptive-on-bg-inverted-default: var(
  	--db-critical-on-bg-inverted-default
  );
  --db-adaptive-on-bg-inverted-hovered: var(
  	--db-critical-on-bg-inverted-hovered
  );
  --db-adaptive-on-bg-inverted-pressed: var(
  	--db-critical-on-bg-inverted-pressed
  );
  --db-adaptive-origin-default: var(--db-critical-origin-default);
  --db-adaptive-origin-hovered: var(--db-critical-origin-hovered);
  --db-adaptive-origin-pressed: var(--db-critical-origin-pressed);
  --db-adaptive-on-origin-default: var(
  	--db-critical-on-origin-default
  );
  --db-adaptive-bg-vibrant-default: var(
  	--db-critical-bg-vibrant-default
  );
  --db-adaptive-bg-vibrant-hovered: var(
  	--db-critical-bg-vibrant-hovered
  );
  --db-adaptive-bg-vibrant-pressed: var(
  	--db-critical-bg-vibrant-pressed
  );
  --db-adaptive-on-bg-vibrant-default: var(
  	--db-critical-on-bg-vibrant-default
  );
  --db-adaptive-on-bg-vibrant-hovered: var(
  	--db-critical-on-bg-vibrant-hovered
  );
  --db-adaptive-on-bg-vibrant-pressed: var(
  	--db-critical-on-bg-vibrant-pressed
  );
}

[data-color=critical],
.db-color-critical {
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  background-color: var(--db-adaptive-bg-basic-level-1-default);
}
}
@layer db-ux{
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
[data-color=informational],
.db-color-informational {
  --db-adaptive-bg-basic-level-1-default: var(
  	--db-informational-bg-basic-level-1-default
  );
  --db-adaptive-bg-basic-level-1-hovered: var(
  	--db-informational-bg-basic-level-1-hovered
  );
  --db-adaptive-bg-basic-level-1-pressed: var(
  	--db-informational-bg-basic-level-1-pressed
  );
  --db-adaptive-bg-basic-level-2-default: var(
  	--db-informational-bg-basic-level-2-default
  );
  --db-adaptive-bg-basic-level-2-hovered: var(
  	--db-informational-bg-basic-level-2-hovered
  );
  --db-adaptive-bg-basic-level-2-pressed: var(
  	--db-informational-bg-basic-level-2-pressed
  );
  --db-adaptive-bg-basic-level-3-default: var(
  	--db-informational-bg-basic-level-3-default
  );
  --db-adaptive-bg-basic-level-3-hovered: var(
  	--db-informational-bg-basic-level-3-hovered
  );
  --db-adaptive-bg-basic-level-3-pressed: var(
  	--db-informational-bg-basic-level-3-pressed
  );
  --db-adaptive-bg-basic-transparent-full-default: var(
  	--db-informational-bg-basic-transparent-full-default
  );
  --db-adaptive-bg-basic-transparent-semi-default: var(
  	--db-informational-bg-basic-transparent-semi-default
  );
  --db-adaptive-bg-basic-transparent-full-hovered: var(
  	--db-informational-bg-basic-transparent-full-hovered
  );
  --db-adaptive-bg-basic-transparent-full-pressed: var(
  	--db-informational-bg-basic-transparent-full-pressed
  );
  --db-adaptive-bg-basic-transparent-semi-hovered: var(
  	--db-informational-bg-basic-transparent-semi-hovered
  );
  --db-adaptive-bg-basic-transparent-semi-pressed: var(
  	--db-informational-bg-basic-transparent-semi-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
  	--db-informational-on-bg-basic-emphasis-100-default
  );
  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
  	--db-informational-on-bg-basic-emphasis-100-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
  	--db-informational-on-bg-basic-emphasis-100-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-90-default: var(
  	--db-informational-on-bg-basic-emphasis-90-default
  );
  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
  	--db-informational-on-bg-basic-emphasis-90-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
  	--db-informational-on-bg-basic-emphasis-90-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-80-default: var(
  	--db-informational-on-bg-basic-emphasis-80-default
  );
  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
  	--db-informational-on-bg-basic-emphasis-80-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
  	--db-informational-on-bg-basic-emphasis-80-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-70-default: var(
  	--db-informational-on-bg-basic-emphasis-70-default
  );
  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
  	--db-informational-on-bg-basic-emphasis-70-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
  	--db-informational-on-bg-basic-emphasis-70-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-60-default: var(
  	--db-informational-on-bg-basic-emphasis-60-default
  );
  --db-adaptive-on-bg-basic-emphasis-50-default: var(
  	--db-informational-on-bg-basic-emphasis-50-default
  );
  --db-adaptive-bg-inverted-contrast-max-default: var(
  	--db-informational-bg-inverted-contrast-max-default
  );
  --db-adaptive-bg-inverted-contrast-max-hovered: var(
  	--db-informational-bg-inverted-contrast-max-hovered
  );
  --db-adaptive-bg-inverted-contrast-max-pressed: var(
  	--db-informational-bg-inverted-contrast-max-pressed
  );
  --db-adaptive-bg-inverted-contrast-high-default: var(
  	--db-informational-bg-inverted-contrast-high-default
  );
  --db-adaptive-bg-inverted-contrast-high-hovered: var(
  	--db-informational-bg-inverted-contrast-high-hovered
  );
  --db-adaptive-bg-inverted-contrast-high-pressed: var(
  	--db-informational-bg-inverted-contrast-high-pressed
  );
  --db-adaptive-bg-inverted-contrast-low-default: var(
  	--db-informational-bg-inverted-contrast-low-default
  );
  --db-adaptive-bg-inverted-contrast-low-hovered: var(
  	--db-informational-bg-inverted-contrast-low-hovered
  );
  --db-adaptive-bg-inverted-contrast-low-pressed: var(
  	--db-informational-bg-inverted-contrast-low-pressed
  );
  --db-adaptive-on-bg-inverted-default: var(
  	--db-informational-on-bg-inverted-default
  );
  --db-adaptive-on-bg-inverted-hovered: var(
  	--db-informational-on-bg-inverted-hovered
  );
  --db-adaptive-on-bg-inverted-pressed: var(
  	--db-informational-on-bg-inverted-pressed
  );
  --db-adaptive-origin-default: var(--db-informational-origin-default);
  --db-adaptive-origin-hovered: var(--db-informational-origin-hovered);
  --db-adaptive-origin-pressed: var(--db-informational-origin-pressed);
  --db-adaptive-on-origin-default: var(
  	--db-informational-on-origin-default
  );
  --db-adaptive-bg-vibrant-default: var(
  	--db-informational-bg-vibrant-default
  );
  --db-adaptive-bg-vibrant-hovered: var(
  	--db-informational-bg-vibrant-hovered
  );
  --db-adaptive-bg-vibrant-pressed: var(
  	--db-informational-bg-vibrant-pressed
  );
  --db-adaptive-on-bg-vibrant-default: var(
  	--db-informational-on-bg-vibrant-default
  );
  --db-adaptive-on-bg-vibrant-hovered: var(
  	--db-informational-on-bg-vibrant-hovered
  );
  --db-adaptive-on-bg-vibrant-pressed: var(
  	--db-informational-on-bg-vibrant-pressed
  );
}

[data-color=informational],
.db-color-informational {
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  background-color: var(--db-adaptive-bg-basic-level-1-default);
}
}
@layer db-ux{
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
[data-color=neutral],
.db-color-neutral {
  --db-adaptive-bg-basic-level-1-default: var(
  	--db-neutral-bg-basic-level-1-default
  );
  --db-adaptive-bg-basic-level-1-hovered: var(
  	--db-neutral-bg-basic-level-1-hovered
  );
  --db-adaptive-bg-basic-level-1-pressed: var(
  	--db-neutral-bg-basic-level-1-pressed
  );
  --db-adaptive-bg-basic-level-2-default: var(
  	--db-neutral-bg-basic-level-2-default
  );
  --db-adaptive-bg-basic-level-2-hovered: var(
  	--db-neutral-bg-basic-level-2-hovered
  );
  --db-adaptive-bg-basic-level-2-pressed: var(
  	--db-neutral-bg-basic-level-2-pressed
  );
  --db-adaptive-bg-basic-level-3-default: var(
  	--db-neutral-bg-basic-level-3-default
  );
  --db-adaptive-bg-basic-level-3-hovered: var(
  	--db-neutral-bg-basic-level-3-hovered
  );
  --db-adaptive-bg-basic-level-3-pressed: var(
  	--db-neutral-bg-basic-level-3-pressed
  );
  --db-adaptive-bg-basic-transparent-full-default: var(
  	--db-neutral-bg-basic-transparent-full-default
  );
  --db-adaptive-bg-basic-transparent-semi-default: var(
  	--db-neutral-bg-basic-transparent-semi-default
  );
  --db-adaptive-bg-basic-transparent-full-hovered: var(
  	--db-neutral-bg-basic-transparent-full-hovered
  );
  --db-adaptive-bg-basic-transparent-full-pressed: var(
  	--db-neutral-bg-basic-transparent-full-pressed
  );
  --db-adaptive-bg-basic-transparent-semi-hovered: var(
  	--db-neutral-bg-basic-transparent-semi-hovered
  );
  --db-adaptive-bg-basic-transparent-semi-pressed: var(
  	--db-neutral-bg-basic-transparent-semi-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
  	--db-neutral-on-bg-basic-emphasis-100-default
  );
  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
  	--db-neutral-on-bg-basic-emphasis-100-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
  	--db-neutral-on-bg-basic-emphasis-100-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-90-default: var(
  	--db-neutral-on-bg-basic-emphasis-90-default
  );
  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
  	--db-neutral-on-bg-basic-emphasis-90-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
  	--db-neutral-on-bg-basic-emphasis-90-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-80-default: var(
  	--db-neutral-on-bg-basic-emphasis-80-default
  );
  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
  	--db-neutral-on-bg-basic-emphasis-80-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
  	--db-neutral-on-bg-basic-emphasis-80-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-70-default: var(
  	--db-neutral-on-bg-basic-emphasis-70-default
  );
  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
  	--db-neutral-on-bg-basic-emphasis-70-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
  	--db-neutral-on-bg-basic-emphasis-70-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-60-default: var(
  	--db-neutral-on-bg-basic-emphasis-60-default
  );
  --db-adaptive-on-bg-basic-emphasis-50-default: var(
  	--db-neutral-on-bg-basic-emphasis-50-default
  );
  --db-adaptive-bg-inverted-contrast-max-default: var(
  	--db-neutral-bg-inverted-contrast-max-default
  );
  --db-adaptive-bg-inverted-contrast-max-hovered: var(
  	--db-neutral-bg-inverted-contrast-max-hovered
  );
  --db-adaptive-bg-inverted-contrast-max-pressed: var(
  	--db-neutral-bg-inverted-contrast-max-pressed
  );
  --db-adaptive-bg-inverted-contrast-high-default: var(
  	--db-neutral-bg-inverted-contrast-high-default
  );
  --db-adaptive-bg-inverted-contrast-high-hovered: var(
  	--db-neutral-bg-inverted-contrast-high-hovered
  );
  --db-adaptive-bg-inverted-contrast-high-pressed: var(
  	--db-neutral-bg-inverted-contrast-high-pressed
  );
  --db-adaptive-bg-inverted-contrast-low-default: var(
  	--db-neutral-bg-inverted-contrast-low-default
  );
  --db-adaptive-bg-inverted-contrast-low-hovered: var(
  	--db-neutral-bg-inverted-contrast-low-hovered
  );
  --db-adaptive-bg-inverted-contrast-low-pressed: var(
  	--db-neutral-bg-inverted-contrast-low-pressed
  );
  --db-adaptive-on-bg-inverted-default: var(
  	--db-neutral-on-bg-inverted-default
  );
  --db-adaptive-on-bg-inverted-hovered: var(
  	--db-neutral-on-bg-inverted-hovered
  );
  --db-adaptive-on-bg-inverted-pressed: var(
  	--db-neutral-on-bg-inverted-pressed
  );
  --db-adaptive-origin-default: var(--db-neutral-origin-default);
  --db-adaptive-origin-hovered: var(--db-neutral-origin-hovered);
  --db-adaptive-origin-pressed: var(--db-neutral-origin-pressed);
  --db-adaptive-on-origin-default: var(
  	--db-neutral-on-origin-default
  );
  --db-adaptive-bg-vibrant-default: var(
  	--db-neutral-bg-vibrant-default
  );
  --db-adaptive-bg-vibrant-hovered: var(
  	--db-neutral-bg-vibrant-hovered
  );
  --db-adaptive-bg-vibrant-pressed: var(
  	--db-neutral-bg-vibrant-pressed
  );
  --db-adaptive-on-bg-vibrant-default: var(
  	--db-neutral-on-bg-vibrant-default
  );
  --db-adaptive-on-bg-vibrant-hovered: var(
  	--db-neutral-on-bg-vibrant-hovered
  );
  --db-adaptive-on-bg-vibrant-pressed: var(
  	--db-neutral-on-bg-vibrant-pressed
  );
}

[data-color=neutral],
.db-color-neutral {
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  background-color: var(--db-adaptive-bg-basic-level-1-default);
}
}
@layer db-ux{
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
[data-color=successful],
.db-color-successful {
  --db-adaptive-bg-basic-level-1-default: var(
  	--db-successful-bg-basic-level-1-default
  );
  --db-adaptive-bg-basic-level-1-hovered: var(
  	--db-successful-bg-basic-level-1-hovered
  );
  --db-adaptive-bg-basic-level-1-pressed: var(
  	--db-successful-bg-basic-level-1-pressed
  );
  --db-adaptive-bg-basic-level-2-default: var(
  	--db-successful-bg-basic-level-2-default
  );
  --db-adaptive-bg-basic-level-2-hovered: var(
  	--db-successful-bg-basic-level-2-hovered
  );
  --db-adaptive-bg-basic-level-2-pressed: var(
  	--db-successful-bg-basic-level-2-pressed
  );
  --db-adaptive-bg-basic-level-3-default: var(
  	--db-successful-bg-basic-level-3-default
  );
  --db-adaptive-bg-basic-level-3-hovered: var(
  	--db-successful-bg-basic-level-3-hovered
  );
  --db-adaptive-bg-basic-level-3-pressed: var(
  	--db-successful-bg-basic-level-3-pressed
  );
  --db-adaptive-bg-basic-transparent-full-default: var(
  	--db-successful-bg-basic-transparent-full-default
  );
  --db-adaptive-bg-basic-transparent-semi-default: var(
  	--db-successful-bg-basic-transparent-semi-default
  );
  --db-adaptive-bg-basic-transparent-full-hovered: var(
  	--db-successful-bg-basic-transparent-full-hovered
  );
  --db-adaptive-bg-basic-transparent-full-pressed: var(
  	--db-successful-bg-basic-transparent-full-pressed
  );
  --db-adaptive-bg-basic-transparent-semi-hovered: var(
  	--db-successful-bg-basic-transparent-semi-hovered
  );
  --db-adaptive-bg-basic-transparent-semi-pressed: var(
  	--db-successful-bg-basic-transparent-semi-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
  	--db-successful-on-bg-basic-emphasis-100-default
  );
  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
  	--db-successful-on-bg-basic-emphasis-100-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
  	--db-successful-on-bg-basic-emphasis-100-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-90-default: var(
  	--db-successful-on-bg-basic-emphasis-90-default
  );
  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
  	--db-successful-on-bg-basic-emphasis-90-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
  	--db-successful-on-bg-basic-emphasis-90-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-80-default: var(
  	--db-successful-on-bg-basic-emphasis-80-default
  );
  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
  	--db-successful-on-bg-basic-emphasis-80-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
  	--db-successful-on-bg-basic-emphasis-80-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-70-default: var(
  	--db-successful-on-bg-basic-emphasis-70-default
  );
  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
  	--db-successful-on-bg-basic-emphasis-70-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
  	--db-successful-on-bg-basic-emphasis-70-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-60-default: var(
  	--db-successful-on-bg-basic-emphasis-60-default
  );
  --db-adaptive-on-bg-basic-emphasis-50-default: var(
  	--db-successful-on-bg-basic-emphasis-50-default
  );
  --db-adaptive-bg-inverted-contrast-max-default: var(
  	--db-successful-bg-inverted-contrast-max-default
  );
  --db-adaptive-bg-inverted-contrast-max-hovered: var(
  	--db-successful-bg-inverted-contrast-max-hovered
  );
  --db-adaptive-bg-inverted-contrast-max-pressed: var(
  	--db-successful-bg-inverted-contrast-max-pressed
  );
  --db-adaptive-bg-inverted-contrast-high-default: var(
  	--db-successful-bg-inverted-contrast-high-default
  );
  --db-adaptive-bg-inverted-contrast-high-hovered: var(
  	--db-successful-bg-inverted-contrast-high-hovered
  );
  --db-adaptive-bg-inverted-contrast-high-pressed: var(
  	--db-successful-bg-inverted-contrast-high-pressed
  );
  --db-adaptive-bg-inverted-contrast-low-default: var(
  	--db-successful-bg-inverted-contrast-low-default
  );
  --db-adaptive-bg-inverted-contrast-low-hovered: var(
  	--db-successful-bg-inverted-contrast-low-hovered
  );
  --db-adaptive-bg-inverted-contrast-low-pressed: var(
  	--db-successful-bg-inverted-contrast-low-pressed
  );
  --db-adaptive-on-bg-inverted-default: var(
  	--db-successful-on-bg-inverted-default
  );
  --db-adaptive-on-bg-inverted-hovered: var(
  	--db-successful-on-bg-inverted-hovered
  );
  --db-adaptive-on-bg-inverted-pressed: var(
  	--db-successful-on-bg-inverted-pressed
  );
  --db-adaptive-origin-default: var(--db-successful-origin-default);
  --db-adaptive-origin-hovered: var(--db-successful-origin-hovered);
  --db-adaptive-origin-pressed: var(--db-successful-origin-pressed);
  --db-adaptive-on-origin-default: var(
  	--db-successful-on-origin-default
  );
  --db-adaptive-bg-vibrant-default: var(
  	--db-successful-bg-vibrant-default
  );
  --db-adaptive-bg-vibrant-hovered: var(
  	--db-successful-bg-vibrant-hovered
  );
  --db-adaptive-bg-vibrant-pressed: var(
  	--db-successful-bg-vibrant-pressed
  );
  --db-adaptive-on-bg-vibrant-default: var(
  	--db-successful-on-bg-vibrant-default
  );
  --db-adaptive-on-bg-vibrant-hovered: var(
  	--db-successful-on-bg-vibrant-hovered
  );
  --db-adaptive-on-bg-vibrant-pressed: var(
  	--db-successful-on-bg-vibrant-pressed
  );
}

[data-color=successful],
.db-color-successful {
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  background-color: var(--db-adaptive-bg-basic-level-1-default);
}
}
@layer db-ux{
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
[data-color=warning],
.db-color-warning {
  --db-adaptive-bg-basic-level-1-default: var(
  	--db-warning-bg-basic-level-1-default
  );
  --db-adaptive-bg-basic-level-1-hovered: var(
  	--db-warning-bg-basic-level-1-hovered
  );
  --db-adaptive-bg-basic-level-1-pressed: var(
  	--db-warning-bg-basic-level-1-pressed
  );
  --db-adaptive-bg-basic-level-2-default: var(
  	--db-warning-bg-basic-level-2-default
  );
  --db-adaptive-bg-basic-level-2-hovered: var(
  	--db-warning-bg-basic-level-2-hovered
  );
  --db-adaptive-bg-basic-level-2-pressed: var(
  	--db-warning-bg-basic-level-2-pressed
  );
  --db-adaptive-bg-basic-level-3-default: var(
  	--db-warning-bg-basic-level-3-default
  );
  --db-adaptive-bg-basic-level-3-hovered: var(
  	--db-warning-bg-basic-level-3-hovered
  );
  --db-adaptive-bg-basic-level-3-pressed: var(
  	--db-warning-bg-basic-level-3-pressed
  );
  --db-adaptive-bg-basic-transparent-full-default: var(
  	--db-warning-bg-basic-transparent-full-default
  );
  --db-adaptive-bg-basic-transparent-semi-default: var(
  	--db-warning-bg-basic-transparent-semi-default
  );
  --db-adaptive-bg-basic-transparent-full-hovered: var(
  	--db-warning-bg-basic-transparent-full-hovered
  );
  --db-adaptive-bg-basic-transparent-full-pressed: var(
  	--db-warning-bg-basic-transparent-full-pressed
  );
  --db-adaptive-bg-basic-transparent-semi-hovered: var(
  	--db-warning-bg-basic-transparent-semi-hovered
  );
  --db-adaptive-bg-basic-transparent-semi-pressed: var(
  	--db-warning-bg-basic-transparent-semi-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
  	--db-warning-on-bg-basic-emphasis-100-default
  );
  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
  	--db-warning-on-bg-basic-emphasis-100-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
  	--db-warning-on-bg-basic-emphasis-100-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-90-default: var(
  	--db-warning-on-bg-basic-emphasis-90-default
  );
  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
  	--db-warning-on-bg-basic-emphasis-90-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
  	--db-warning-on-bg-basic-emphasis-90-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-80-default: var(
  	--db-warning-on-bg-basic-emphasis-80-default
  );
  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
  	--db-warning-on-bg-basic-emphasis-80-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
  	--db-warning-on-bg-basic-emphasis-80-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-70-default: var(
  	--db-warning-on-bg-basic-emphasis-70-default
  );
  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
  	--db-warning-on-bg-basic-emphasis-70-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
  	--db-warning-on-bg-basic-emphasis-70-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-60-default: var(
  	--db-warning-on-bg-basic-emphasis-60-default
  );
  --db-adaptive-on-bg-basic-emphasis-50-default: var(
  	--db-warning-on-bg-basic-emphasis-50-default
  );
  --db-adaptive-bg-inverted-contrast-max-default: var(
  	--db-warning-bg-inverted-contrast-max-default
  );
  --db-adaptive-bg-inverted-contrast-max-hovered: var(
  	--db-warning-bg-inverted-contrast-max-hovered
  );
  --db-adaptive-bg-inverted-contrast-max-pressed: var(
  	--db-warning-bg-inverted-contrast-max-pressed
  );
  --db-adaptive-bg-inverted-contrast-high-default: var(
  	--db-warning-bg-inverted-contrast-high-default
  );
  --db-adaptive-bg-inverted-contrast-high-hovered: var(
  	--db-warning-bg-inverted-contrast-high-hovered
  );
  --db-adaptive-bg-inverted-contrast-high-pressed: var(
  	--db-warning-bg-inverted-contrast-high-pressed
  );
  --db-adaptive-bg-inverted-contrast-low-default: var(
  	--db-warning-bg-inverted-contrast-low-default
  );
  --db-adaptive-bg-inverted-contrast-low-hovered: var(
  	--db-warning-bg-inverted-contrast-low-hovered
  );
  --db-adaptive-bg-inverted-contrast-low-pressed: var(
  	--db-warning-bg-inverted-contrast-low-pressed
  );
  --db-adaptive-on-bg-inverted-default: var(
  	--db-warning-on-bg-inverted-default
  );
  --db-adaptive-on-bg-inverted-hovered: var(
  	--db-warning-on-bg-inverted-hovered
  );
  --db-adaptive-on-bg-inverted-pressed: var(
  	--db-warning-on-bg-inverted-pressed
  );
  --db-adaptive-origin-default: var(--db-warning-origin-default);
  --db-adaptive-origin-hovered: var(--db-warning-origin-hovered);
  --db-adaptive-origin-pressed: var(--db-warning-origin-pressed);
  --db-adaptive-on-origin-default: var(
  	--db-warning-on-origin-default
  );
  --db-adaptive-bg-vibrant-default: var(
  	--db-warning-bg-vibrant-default
  );
  --db-adaptive-bg-vibrant-hovered: var(
  	--db-warning-bg-vibrant-hovered
  );
  --db-adaptive-bg-vibrant-pressed: var(
  	--db-warning-bg-vibrant-pressed
  );
  --db-adaptive-on-bg-vibrant-default: var(
  	--db-warning-on-bg-vibrant-default
  );
  --db-adaptive-on-bg-vibrant-hovered: var(
  	--db-warning-on-bg-vibrant-hovered
  );
  --db-adaptive-on-bg-vibrant-pressed: var(
  	--db-warning-on-bg-vibrant-pressed
  );
}

[data-color=warning],
.db-color-warning {
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  background-color: var(--db-adaptive-bg-basic-level-1-default);
}
}
@layer db-ux{
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
.db-font-size-md,
[data-font-size=md] {
  font: var(--db-type-body-md);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
}

/* Single source of truth for the default visual headline size per semantic
 * level. Kept in its own partial because it is consumed both by
 * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
 * component styles in `@db-ux/core-components`. Those must not pull in the
 * emitted default-fonts CSS just to read the mapping. */
}
@layer db-ux{
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
.db-font-size-sm,
[data-font-size=sm] {
  font: var(--db-type-body-sm);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
}

/* Single source of truth for the default visual headline size per semantic
 * level. Kept in its own partial because it is consumed both by
 * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
 * component styles in `@db-ux/core-components`. Those must not pull in the
 * emitted default-fonts CSS just to read the mapping. */
}
@layer db-ux{
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
.db-font-size-2xs,
[data-font-size="2xs"] {
  font: var(--db-type-body-2xs);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
  --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
}

/* Single source of truth for the default visual headline size per semantic
 * level. Kept in its own partial because it is consumed both by
 * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
 * component styles in `@db-ux/core-components`. Those must not pull in the
 * emitted default-fonts CSS just to read the mapping. */
}
@layer db-ux{
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
.db-font-size-xs,
[data-font-size=xs] {
  font: var(--db-type-body-xs);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
  --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
}

/* Single source of truth for the default visual headline size per semantic
 * level. Kept in its own partial because it is consumed both by
 * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
 * component styles in `@db-ux/core-components`. Those must not pull in the
 * emitted default-fonts CSS just to read the mapping. */
}
@layer db-ux{

.db-button .db-loading-indicator:not([data-overlay=true]) > .db-loading-indicator-content > label {
  position: absolute !important;
  inset-block-start: 0 !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
.db-button {
  font: var(--db-type-body-md);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
}

.db-button[data-size=small] {
  font: var(--db-type-body-sm);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
}

/* Single source of truth for the default visual headline size per semantic
 * level. Kept in its own partial because it is consumed both by
 * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
 * component styles in `@db-ux/core-components`. Those must not pull in the
 * emitted default-fonts CSS just to read the mapping. */
.db-button .db-loading-indicator:not([data-overlay=true]) > .db-loading-indicator-content {
  /**
   * Keep the label in the accessibility tree so screen readers still
   * announce the loading state in overlay/button mode. Only the
   * aria-hidden progress-text span is fully removed.
   *
   * Target the structural label/span as direct children only: a bare
   * "div label" / "div span" would also match consumer markup passed as
   * children (which renders inside the label), e.g. a nested <span>
   * loading text -- hiding it from the a11y tree, the opposite of what
   * this rule intends.
   */
}
.db-button .db-loading-indicator:not([data-overlay=true]) > .db-loading-indicator-content > span {
  display: none;
}

.db-button {
  /**
   * Only hide the button icon while an actual (non-inactive) loading
   * indicator is present. An inactive indicator is itself hidden (see the
   * rule below), so its host must keep showing the original icon -- otherwise
   * a controlled flow that flips the indicator to inactive would leave an
   * icon-only button visually blank.
   */
}
.db-button:has(.db-loading-indicator:not([data-overlay=true],
[data-state=inactive])) {
  /** Hide icon inside button when loading indicator is present */
}
.db-button:has(.db-loading-indicator:not([data-overlay=true],
[data-state=inactive]))[data-icon]::before, .db-button:has(.db-loading-indicator:not([data-overlay=true],
[data-state=inactive]))[data-icon-before]::before {
  display: none;
}
.db-button:has(.db-loading-indicator:not([data-overlay=true],
[data-state=inactive]))[data-icon-after]::after {
  display: none;
}
.db-button:has(.db-loading-indicator[data-state=inactive]) .db-loading-indicator {
  display: none;
}
.db-button .db-loading-indicator {
  gap: 0;
}
.db-button .db-loading-indicator:not([data-state=successful], [data-state=critical]) {
  --db-loading-indicator-segment-color: currentcolor;
  --db-loading-indicator-segment-color-overlay: currentcolor;
}
.db-button .db-loading-indicator:not([data-overlay=true]) {
  /** Hide label and progress inside a button */
}
.db-button .db-loading-indicator[data-overlay=true] {
  background-color: transparent;
}
.db-button .db-loading-indicator[data-overlay=true]::before {
  z-index: 1;
  /**
   * "inherit" is invalid as a var() fallback here: after
   * substitution it becomes the CSS-wide keyword inherit,
   * which is invalid at computed-value time and falls back to
   * transparent anyway. Only the brand variant sets an overlay
   * color; every other variant intentionally shows the level-1
   * background from the ::after layer, so default to transparent.
   */
  background-color: var(--db-loading-indicator-button-overlay-color, transparent);
}
.db-button .db-loading-indicator[data-overlay=true]::after {
  z-index: 0;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--db-adaptive-bg-basic-level-1-default);
}
.db-button .db-loading-indicator[data-overlay=true] > svg,
.db-button .db-loading-indicator[data-overlay=true] > .db-loading-indicator-content {
  z-index: 2;
}
.db-button .db-loading-indicator[data-overlay=true][data-orientation=horizontal][data-variant=circular] svg {
  align-self: center;
}

.db-button {
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
}

.db-button[data-variant=filled], .db-button[data-variant=ghost] {
  border: var(--db-border-width-3xs) solid transparent;
}

.db-button {
  border-radius: var(--db-border-radius-xs);
}

.db-button {
  font-weight: 700;
  overflow-wrap: break-word;
  white-space: pre-line;
  justify-content: center;
  text-align: center;
  align-items: center;
  vertical-align: top;
}
.db-button:not([hidden]) {
  display: inline-flex;
}

.db-button[data-variant=outlined], .db-button:not([data-variant]), .db-button[data-variant=""], .db-button[data-variant=ghost] {
  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
}
.db-button[data-variant=outlined]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):not([data-variant]), .db-button[data-variant=""]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-button[data-variant=ghost]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
}
.db-button[data-variant=outlined]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover:not([data-variant]), .db-button[data-variant=""]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-button[data-variant=ghost]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
  cursor: var(--db-overwrite-cursor, pointer);
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
}
.db-button[data-variant=outlined]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active:not([data-variant]), .db-button[data-variant=""]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-button[data-variant=ghost]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
  cursor: var(--db-overwrite-cursor, pointer);
  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
}

.db-button[data-variant=brand] {
  background-color: var(--db-brand-origin-default);
  color: var(--db-brand-on-origin-default);
  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
}
.db-button[data-variant=brand]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
}
.db-button[data-variant=brand]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
  cursor: var(--db-overwrite-cursor, pointer);
  background-color: var(--db-brand-origin-hovered);
  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
}
.db-button[data-variant=brand]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
  cursor: var(--db-overwrite-cursor, pointer);
  background-color: var(--db-brand-origin-pressed);
  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
}

.db-button {
  max-inline-size: 100%;
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  min-block-size: var(--db-sizing-md);
  block-size: max-content;
  inline-size: fit-content;
  padding: var(--db-spacing-fixed-2xs) var(--db-spacing-fixed-md);
  text-decoration: none;
}
.db-button[data-no-text=true] {
  padding: 0;
  inline-size: var(--db-sizing-md);
  block-size: var(--db-sizing-md);
  font-size: 0 !important;
}
.db-button[data-no-text=true]::before {
  margin: auto;
}
.db-button:not([data-no-text=true]) {
  gap: var(--db-spacing-fixed-xs);
}
.db-button[data-wrap=false] {
  white-space: nowrap;
}
.db-button[data-size=small] {
  font-weight: 700;
  min-block-size: var(--db-sizing-sm);
}
.db-button[data-size=small]:not([data-no-text=true]) {
  padding: 1px var(--db-spacing-fixed-sm);
  gap: var(--db-spacing-fixed-2xs);
}
.db-button[data-size=small][data-no-text=true] {
  inline-size: var(--db-sizing-sm);
  block-size: var(--db-sizing-sm);
}
.db-button[data-width=full]:not([data-no-text=true]) {
  inline-size: 100%;
}
.db-button[data-variant=brand] {
  --db-loading-indicator-button-overlay-color: var(--db-brand-origin-default);
}
.db-button[data-variant=filled] {
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
}
.db-button[data-variant=filled]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
}
.db-button[data-variant=filled]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
  cursor: var(--db-overwrite-cursor, pointer);
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
}
.db-button[data-variant=filled]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
  cursor: var(--db-overwrite-cursor, pointer);
  background-color: var(--db-adaptive-bg-basic-transparent-semi-pressed);
}
.db-button:is(:disabled, [aria-disabled=true]) {
  opacity: var(--db-opacity-md);
}
}
@layer db-ux{
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
.db-card {
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
}

.db-card {
  /* stylelint-disable-next-line db-ux/use-border-radius */
  border-radius: var(--default-card-border-radius, var(--db-border-radius-sm));
}

:is(a[href], button):has(.db-card) {
  text-decoration: unset;
  margin: unset;
  border: unset;
  background-color: transparent;
  padding: unset;
  font: inherit;
}
:is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
}
:is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
  cursor: var(--db-overwrite-cursor, pointer);
}
:is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover > .db-card,
:is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover > db-card > .db-card {
  background-color: var(--db-card-background-color-hovered);
}
:is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
  cursor: var(--db-overwrite-cursor, pointer);
}
:is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active > .db-card,
:is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active > db-card > .db-card {
  background-color: var(--db-card-background-color-pressed);
}

.db-card {
  --db-card-background-color-default: var(--db-adaptive-bg-basic-level-1-default);
  --db-card-background-color-hovered: var(--db-adaptive-bg-basic-level-1-hovered);
  --db-card-background-color-pressed: var(--db-adaptive-bg-basic-level-1-pressed);
}
.db-card:not([data-spacing]) {
  padding: var(--db-spacing-fixed-sm);
}
.db-card {
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-card[data-spacing=large] {
  padding: var(--db-spacing-fixed-lg);
}
.db-card[data-spacing=medium] {
  padding: var(--db-spacing-fixed-md);
}
.db-card[data-spacing=small] {
  padding: var(--db-spacing-fixed-sm);
}
.db-card[data-spacing=none] {
  padding: 0;
}
.db-card:not([hidden]) {
  display: flex;
}
.db-card {
  flex-direction: column;
  background-color: var(--db-card-background-color-default);
}
.db-card[data-behavior=interactive]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
}
.db-card[data-behavior=interactive]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
  cursor: var(--db-overwrite-cursor, pointer);
  background-color: var(--db-card-background-color-hovered);
}
.db-card[data-behavior=interactive]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
  cursor: var(--db-overwrite-cursor, pointer);
  background-color: var(--db-card-background-color-pressed);
}
.db-card[data-elevation-level="2"] {
  --db-card-background-color-default: var(--db-adaptive-bg-basic-level-2-default);
  --db-card-background-color-hovered: var(--db-adaptive-bg-basic-level-2-hovered);
  --db-card-background-color-pressed: var(--db-adaptive-bg-basic-level-2-pressed);
}
.db-card[data-elevation-level="3"] {
  --db-card-background-color-default: var(--db-adaptive-bg-basic-level-3-default);
  --db-card-background-color-hovered: var(--db-adaptive-bg-basic-level-3-hovered);
  --db-card-background-color-pressed: var(--db-adaptive-bg-basic-level-3-pressed);
}
}
@layer db-ux{
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
.db-badge[data-size=medium], .db-badge[data-size=medium] > *,
.db-badge[data-size=medium] .db-icon {
  font: var(--db-type-body-sm);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
}

.db-badge, .db-badge > *,
.db-badge .db-icon {
  font: var(--db-type-body-2xs);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
  --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
}

/* Single source of truth for the default visual headline size per semantic
 * level. Kept in its own partial because it is consumed both by
 * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
 * component styles in `@db-ux/core-components`. Those must not pull in the
 * emitted default-fonts CSS just to read the mapping. */
.db-badge {
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
}

.db-badge {
  font-weight: 700;
  overflow-wrap: break-word;
  white-space: pre-line;
  justify-content: center;
  text-align: center;
  align-items: center;
  vertical-align: top;
}
.db-badge:not([hidden]) {
  display: inline-flex;
}

.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button {
  --db-tag-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
  border-color: var(--db-tag-border-color);
  background-color: var(--db-adaptive-bg-vibrant-default);
  color: var(--db-adaptive-on-bg-vibrant-default);
}
.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::before, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::before, .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::after, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::after {
  --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
}
.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
}
.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
  cursor: var(--db-overwrite-cursor, pointer);
  background-color: var(--db-adaptive-bg-vibrant-hovered);
}
.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
  cursor: var(--db-overwrite-cursor, pointer);
  background-color: var(--db-adaptive-bg-vibrant-pressed);
}

.db-badge[data-placement^=corner] {
  position: absolute;
  transform: translate(var(--badge-transform-x), var(--badge-transform-y));
}
[data-placement$=right].db-badge[data-placement^=corner] {
  --badge-transform-x: 50%;
  inset-inline-end: 0;
}
[data-placement$=left].db-badge[data-placement^=corner] {
  --badge-transform-x: -50%;
  inset-inline-start: 0;
}
[data-placement*=top].db-badge[data-placement^=corner] {
  --badge-transform-y: -50%;
  inset-block-start: 0;
}
[data-placement*=center].db-badge[data-placement^=corner] {
  --badge-transform-y: -50%;
  inset-block-start: 50%;
}
[data-placement*=bottom].db-badge[data-placement^=corner] {
  --badge-transform-y: 50%;
  inset-block-end: 0;
}

.db-badge {
  --badge-size: var(--db-spacing-fixed-xs);
}
.db-badge:not([data-semantic]):not([data-emphasis]), .db-badge:not([data-semantic])[data-emphasis=weak], .db-badge[data-semantic=adaptive]:not([data-emphasis]), .db-badge[data-semantic=adaptive][data-emphasis=weak] {
  --db-tag-border-color: var(
  	--db-adaptive-on-bg-basic-emphasis-70-default
  );
  border-color: var(--db-tag-border-color);
  background-color: var(--db-adaptive-bg-basic-level-3-default);
  color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
}
.db-badge:not([data-semantic]):not([data-emphasis])::before, .db-badge:not([data-semantic]):not([data-emphasis])::after, .db-badge:not([data-semantic])[data-emphasis=weak]::before, .db-badge:not([data-semantic])[data-emphasis=weak]::after, .db-badge[data-semantic=adaptive]:not([data-emphasis])::before, .db-badge[data-semantic=adaptive]:not([data-emphasis])::after, .db-badge[data-semantic=adaptive][data-emphasis=weak]::before, .db-badge[data-semantic=adaptive][data-emphasis=weak]::after {
  --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
}
.db-badge:not([data-semantic]):not([data-emphasis]), .db-badge:not([data-semantic])[data-emphasis=weak], .db-badge[data-semantic=adaptive]:not([data-emphasis]), .db-badge[data-semantic=adaptive][data-emphasis=weak] {
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-badge:not([data-semantic])[data-emphasis=strong], .db-badge[data-semantic=adaptive][data-emphasis=strong] {
  --db-tag-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
  border-color: var(--db-tag-border-color);
  background-color: var(--db-adaptive-bg-vibrant-default);
  color: var(--db-adaptive-on-bg-vibrant-default);
}
.db-badge:not([data-semantic])[data-emphasis=strong]::before, .db-badge:not([data-semantic])[data-emphasis=strong]::after, .db-badge[data-semantic=adaptive][data-emphasis=strong]::before, .db-badge[data-semantic=adaptive][data-emphasis=strong]::after {
  --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
}
.db-badge[data-semantic=neutral]:not([data-emphasis]), .db-badge[data-semantic=neutral][data-emphasis=weak] {
  --db-tag-border-color: var(
  	--db-neutral-on-bg-basic-emphasis-70-default
  );
  border-color: var(--db-tag-border-color);
  background-color: var(--db-neutral-bg-basic-level-3-default);
  color: var(--db-neutral-on-bg-basic-emphasis-80-default);
}
.db-badge[data-semantic=neutral]:not([data-emphasis])::before, .db-badge[data-semantic=neutral]:not([data-emphasis])::after, .db-badge[data-semantic=neutral][data-emphasis=weak]::before, .db-badge[data-semantic=neutral][data-emphasis=weak]::after {
  --db-icon-color: var(--db-neutral-on-bg-basic-emphasis-80-default);
}
.db-badge[data-semantic=neutral][data-emphasis=strong] {
  --db-tag-border-color: var(--db-neutral-on-bg-basic-emphasis-70-default);
  border-color: var(--db-tag-border-color);
  background-color: var(--db-neutral-bg-vibrant-default);
  color: var(--db-neutral-on-bg-vibrant-default);
}
.db-badge[data-semantic=neutral][data-emphasis=strong]::before, .db-badge[data-semantic=neutral][data-emphasis=strong]::after {
  --db-icon-color: var(--db-neutral-on-bg-vibrant-default);
}
.db-badge[data-semantic=critical]:not([data-emphasis]), .db-badge[data-semantic=critical][data-emphasis=weak] {
  --db-tag-border-color: var(
  	--db-critical-on-bg-basic-emphasis-70-default
  );
  border-color: var(--db-tag-border-color);
  background-color: var(--db-critical-bg-basic-level-3-default);
  color: var(--db-critical-on-bg-basic-emphasis-80-default);
}
.db-badge[data-semantic=critical]:not([data-emphasis])::before, .db-badge[data-semantic=critical]:not([data-emphasis])::after, .db-badge[data-semantic=critical][data-emphasis=weak]::before, .db-badge[data-semantic=critical][data-emphasis=weak]::after {
  --db-icon-color: var(--db-critical-on-bg-basic-emphasis-80-default);
}
.db-badge[data-semantic=critical][data-emphasis=strong] {
  --db-tag-border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
  border-color: var(--db-tag-border-color);
  background-color: var(--db-critical-bg-vibrant-default);
  color: var(--db-critical-on-bg-vibrant-default);
}
.db-badge[data-semantic=critical][data-emphasis=strong]::before, .db-badge[data-semantic=critical][data-emphasis=strong]::after {
  --db-icon-color: var(--db-critical-on-bg-vibrant-default);
}
.db-badge[data-semantic=successful]:not([data-emphasis]), .db-badge[data-semantic=successful][data-emphasis=weak] {
  --db-tag-border-color: var(
  	--db-successful-on-bg-basic-emphasis-70-default
  );
  border-color: var(--db-tag-border-color);
  background-color: var(--db-successful-bg-basic-level-3-default);
  color: var(--db-successful-on-bg-basic-emphasis-80-default);
}
.db-badge[data-semantic=successful]:not([data-emphasis])::before, .db-badge[data-semantic=successful]:not([data-emphasis])::after, .db-badge[data-semantic=successful][data-emphasis=weak]::before, .db-badge[data-semantic=successful][data-emphasis=weak]::after {
  --db-icon-color: var(--db-successful-on-bg-basic-emphasis-80-default);
}
.db-badge[data-semantic=successful][data-emphasis=strong] {
  --db-tag-border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
  border-color: var(--db-tag-border-color);
  background-color: var(--db-successful-bg-vibrant-default);
  color: var(--db-successful-on-bg-vibrant-default);
}
.db-badge[data-semantic=successful][data-emphasis=strong]::before, .db-badge[data-semantic=successful][data-emphasis=strong]::after {
  --db-icon-color: var(--db-successful-on-bg-vibrant-default);
}
.db-badge[data-semantic=warning]:not([data-emphasis]), .db-badge[data-semantic=warning][data-emphasis=weak] {
  --db-tag-border-color: var(
  	--db-warning-on-bg-basic-emphasis-70-default
  );
  border-color: var(--db-tag-border-color);
  background-color: var(--db-warning-bg-basic-level-3-default);
  color: var(--db-warning-on-bg-basic-emphasis-80-default);
}
.db-badge[data-semantic=warning]:not([data-emphasis])::before, .db-badge[data-semantic=warning]:not([data-emphasis])::after, .db-badge[data-semantic=warning][data-emphasis=weak]::before, .db-badge[data-semantic=warning][data-emphasis=weak]::after {
  --db-icon-color: var(--db-warning-on-bg-basic-emphasis-80-default);
}
.db-badge[data-semantic=warning][data-emphasis=strong] {
  --db-tag-border-color: var(--db-warning-on-bg-basic-emphasis-70-default);
  border-color: var(--db-tag-border-color);
  background-color: var(--db-warning-bg-vibrant-default);
  color: var(--db-warning-on-bg-vibrant-default);
}
.db-badge[data-semantic=warning][data-emphasis=strong]::before, .db-badge[data-semantic=warning][data-emphasis=strong]::after {
  --db-icon-color: var(--db-warning-on-bg-vibrant-default);
}
.db-badge[data-semantic=informational]:not([data-emphasis]), .db-badge[data-semantic=informational][data-emphasis=weak] {
  --db-tag-border-color: var(
  	--db-informational-on-bg-basic-emphasis-70-default
  );
  border-color: var(--db-tag-border-color);
  background-color: var(--db-informational-bg-basic-level-3-default);
  color: var(--db-informational-on-bg-basic-emphasis-80-default);
}
.db-badge[data-semantic=informational]:not([data-emphasis])::before, .db-badge[data-semantic=informational]:not([data-emphasis])::after, .db-badge[data-semantic=informational][data-emphasis=weak]::before, .db-badge[data-semantic=informational][data-emphasis=weak]::after {
  --db-icon-color: var(--db-informational-on-bg-basic-emphasis-80-default);
}
.db-badge[data-semantic=informational][data-emphasis=strong] {
  --db-tag-border-color: var(--db-informational-on-bg-basic-emphasis-70-default);
  border-color: var(--db-tag-border-color);
  background-color: var(--db-informational-bg-vibrant-default);
  color: var(--db-informational-on-bg-vibrant-default);
}
.db-badge[data-semantic=informational][data-emphasis=strong]::before, .db-badge[data-semantic=informational][data-emphasis=strong]::after {
  --db-icon-color: var(--db-informational-on-bg-vibrant-default);
}
.db-badge {
  border-radius: var(--db-border-radius-full);
  padding-inline: var(--db-spacing-fixed-2xs);
  block-size: fit-content;
  inline-size: fit-content;
  font-weight: 700;
}
.db-badge:not(:empty) {
  min-inline-size: calc(1.4em - 2 * var(--db-spacing-fixed-2xs));
  box-sizing: content-box;
}
.db-badge:has(.db-icon) {
  padding: var(--db-spacing-fixed-3xs);
}
.db-badge[data-wrap=false] {
  white-space: nowrap;
}
.db-badge[data-size=medium] {
  --badge-size: var(--db-spacing-fixed-sm);
  padding-inline: var(--db-spacing-fixed-xs);
  font-weight: 700;
}
.db-badge[data-size=medium]:has(.db-icon) {
  padding: var(--db-spacing-fixed-2xs);
}
.db-badge:empty,
.db-badge > span:empty {
  /* stylelint-disable-next-line db-ux/use-sizing */
  block-size: var(--badge-size);
  aspect-ratio: 1;
  padding: 0;
}
.db-badge[data-placement^=corner][data-label]::before {
  content: attr(data-label);
  position: fixed;
  font-size: 0;
}

[data-has-badge=true] {
  position: var(--db-has-badge-position, relative);
}
}
@layer db-ux{

.db-input[data-hide-label=true] > label, .db-visually-hidden,
[data-visually-hidden=true] {
  position: absolute !important;
  inset-block-start: 0 !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid), .db-input:has(input[data-custom-validity=invalid]), .db-input[data-custom-validity=invalid] {
  --db-adaptive-bg-basic-level-1-default: var(
  	--db-critical-bg-basic-level-1-default
  );
  --db-adaptive-bg-basic-level-1-hovered: var(
  	--db-critical-bg-basic-level-1-hovered
  );
  --db-adaptive-bg-basic-level-1-pressed: var(
  	--db-critical-bg-basic-level-1-pressed
  );
  --db-adaptive-bg-basic-level-2-default: var(
  	--db-critical-bg-basic-level-2-default
  );
  --db-adaptive-bg-basic-level-2-hovered: var(
  	--db-critical-bg-basic-level-2-hovered
  );
  --db-adaptive-bg-basic-level-2-pressed: var(
  	--db-critical-bg-basic-level-2-pressed
  );
  --db-adaptive-bg-basic-level-3-default: var(
  	--db-critical-bg-basic-level-3-default
  );
  --db-adaptive-bg-basic-level-3-hovered: var(
  	--db-critical-bg-basic-level-3-hovered
  );
  --db-adaptive-bg-basic-level-3-pressed: var(
  	--db-critical-bg-basic-level-3-pressed
  );
  --db-adaptive-bg-basic-transparent-full-default: var(
  	--db-critical-bg-basic-transparent-full-default
  );
  --db-adaptive-bg-basic-transparent-semi-default: var(
  	--db-critical-bg-basic-transparent-semi-default
  );
  --db-adaptive-bg-basic-transparent-full-hovered: var(
  	--db-critical-bg-basic-transparent-full-hovered
  );
  --db-adaptive-bg-basic-transparent-full-pressed: var(
  	--db-critical-bg-basic-transparent-full-pressed
  );
  --db-adaptive-bg-basic-transparent-semi-hovered: var(
  	--db-critical-bg-basic-transparent-semi-hovered
  );
  --db-adaptive-bg-basic-transparent-semi-pressed: var(
  	--db-critical-bg-basic-transparent-semi-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
  	--db-critical-on-bg-basic-emphasis-100-default
  );
  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
  	--db-critical-on-bg-basic-emphasis-100-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
  	--db-critical-on-bg-basic-emphasis-100-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-90-default: var(
  	--db-critical-on-bg-basic-emphasis-90-default
  );
  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
  	--db-critical-on-bg-basic-emphasis-90-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
  	--db-critical-on-bg-basic-emphasis-90-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-80-default: var(
  	--db-critical-on-bg-basic-emphasis-80-default
  );
  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
  	--db-critical-on-bg-basic-emphasis-80-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
  	--db-critical-on-bg-basic-emphasis-80-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-70-default: var(
  	--db-critical-on-bg-basic-emphasis-70-default
  );
  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
  	--db-critical-on-bg-basic-emphasis-70-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
  	--db-critical-on-bg-basic-emphasis-70-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-60-default: var(
  	--db-critical-on-bg-basic-emphasis-60-default
  );
  --db-adaptive-on-bg-basic-emphasis-50-default: var(
  	--db-critical-on-bg-basic-emphasis-50-default
  );
  --db-adaptive-bg-inverted-contrast-max-default: var(
  	--db-critical-bg-inverted-contrast-max-default
  );
  --db-adaptive-bg-inverted-contrast-max-hovered: var(
  	--db-critical-bg-inverted-contrast-max-hovered
  );
  --db-adaptive-bg-inverted-contrast-max-pressed: var(
  	--db-critical-bg-inverted-contrast-max-pressed
  );
  --db-adaptive-bg-inverted-contrast-high-default: var(
  	--db-critical-bg-inverted-contrast-high-default
  );
  --db-adaptive-bg-inverted-contrast-high-hovered: var(
  	--db-critical-bg-inverted-contrast-high-hovered
  );
  --db-adaptive-bg-inverted-contrast-high-pressed: var(
  	--db-critical-bg-inverted-contrast-high-pressed
  );
  --db-adaptive-bg-inverted-contrast-low-default: var(
  	--db-critical-bg-inverted-contrast-low-default
  );
  --db-adaptive-bg-inverted-contrast-low-hovered: var(
  	--db-critical-bg-inverted-contrast-low-hovered
  );
  --db-adaptive-bg-inverted-contrast-low-pressed: var(
  	--db-critical-bg-inverted-contrast-low-pressed
  );
  --db-adaptive-on-bg-inverted-default: var(
  	--db-critical-on-bg-inverted-default
  );
  --db-adaptive-on-bg-inverted-hovered: var(
  	--db-critical-on-bg-inverted-hovered
  );
  --db-adaptive-on-bg-inverted-pressed: var(
  	--db-critical-on-bg-inverted-pressed
  );
  --db-adaptive-origin-default: var(--db-critical-origin-default);
  --db-adaptive-origin-hovered: var(--db-critical-origin-hovered);
  --db-adaptive-origin-pressed: var(--db-critical-origin-pressed);
  --db-adaptive-on-origin-default: var(
  	--db-critical-on-origin-default
  );
  --db-adaptive-bg-vibrant-default: var(
  	--db-critical-bg-vibrant-default
  );
  --db-adaptive-bg-vibrant-hovered: var(
  	--db-critical-bg-vibrant-hovered
  );
  --db-adaptive-bg-vibrant-pressed: var(
  	--db-critical-bg-vibrant-pressed
  );
  --db-adaptive-on-bg-vibrant-default: var(
  	--db-critical-on-bg-vibrant-default
  );
  --db-adaptive-on-bg-vibrant-hovered: var(
  	--db-critical-on-bg-vibrant-hovered
  );
  --db-adaptive-on-bg-vibrant-pressed: var(
  	--db-critical-on-bg-vibrant-pressed
  );
}

.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid), .db-input:has(input[data-custom-validity=valid]), .db-input[data-custom-validity=valid] {
  --db-adaptive-bg-basic-level-1-default: var(
  	--db-successful-bg-basic-level-1-default
  );
  --db-adaptive-bg-basic-level-1-hovered: var(
  	--db-successful-bg-basic-level-1-hovered
  );
  --db-adaptive-bg-basic-level-1-pressed: var(
  	--db-successful-bg-basic-level-1-pressed
  );
  --db-adaptive-bg-basic-level-2-default: var(
  	--db-successful-bg-basic-level-2-default
  );
  --db-adaptive-bg-basic-level-2-hovered: var(
  	--db-successful-bg-basic-level-2-hovered
  );
  --db-adaptive-bg-basic-level-2-pressed: var(
  	--db-successful-bg-basic-level-2-pressed
  );
  --db-adaptive-bg-basic-level-3-default: var(
  	--db-successful-bg-basic-level-3-default
  );
  --db-adaptive-bg-basic-level-3-hovered: var(
  	--db-successful-bg-basic-level-3-hovered
  );
  --db-adaptive-bg-basic-level-3-pressed: var(
  	--db-successful-bg-basic-level-3-pressed
  );
  --db-adaptive-bg-basic-transparent-full-default: var(
  	--db-successful-bg-basic-transparent-full-default
  );
  --db-adaptive-bg-basic-transparent-semi-default: var(
  	--db-successful-bg-basic-transparent-semi-default
  );
  --db-adaptive-bg-basic-transparent-full-hovered: var(
  	--db-successful-bg-basic-transparent-full-hovered
  );
  --db-adaptive-bg-basic-transparent-full-pressed: var(
  	--db-successful-bg-basic-transparent-full-pressed
  );
  --db-adaptive-bg-basic-transparent-semi-hovered: var(
  	--db-successful-bg-basic-transparent-semi-hovered
  );
  --db-adaptive-bg-basic-transparent-semi-pressed: var(
  	--db-successful-bg-basic-transparent-semi-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
  	--db-successful-on-bg-basic-emphasis-100-default
  );
  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
  	--db-successful-on-bg-basic-emphasis-100-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
  	--db-successful-on-bg-basic-emphasis-100-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-90-default: var(
  	--db-successful-on-bg-basic-emphasis-90-default
  );
  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
  	--db-successful-on-bg-basic-emphasis-90-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
  	--db-successful-on-bg-basic-emphasis-90-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-80-default: var(
  	--db-successful-on-bg-basic-emphasis-80-default
  );
  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
  	--db-successful-on-bg-basic-emphasis-80-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
  	--db-successful-on-bg-basic-emphasis-80-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-70-default: var(
  	--db-successful-on-bg-basic-emphasis-70-default
  );
  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
  	--db-successful-on-bg-basic-emphasis-70-hovered
  );
  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
  	--db-successful-on-bg-basic-emphasis-70-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-60-default: var(
  	--db-successful-on-bg-basic-emphasis-60-default
  );
  --db-adaptive-on-bg-basic-emphasis-50-default: var(
  	--db-successful-on-bg-basic-emphasis-50-default
  );
  --db-adaptive-bg-inverted-contrast-max-default: var(
  	--db-successful-bg-inverted-contrast-max-default
  );
  --db-adaptive-bg-inverted-contrast-max-hovered: var(
  	--db-successful-bg-inverted-contrast-max-hovered
  );
  --db-adaptive-bg-inverted-contrast-max-pressed: var(
  	--db-successful-bg-inverted-contrast-max-pressed
  );
  --db-adaptive-bg-inverted-contrast-high-default: var(
  	--db-successful-bg-inverted-contrast-high-default
  );
  --db-adaptive-bg-inverted-contrast-high-hovered: var(
  	--db-successful-bg-inverted-contrast-high-hovered
  );
  --db-adaptive-bg-inverted-contrast-high-pressed: var(
  	--db-successful-bg-inverted-contrast-high-pressed
  );
  --db-adaptive-bg-inverted-contrast-low-default: var(
  	--db-successful-bg-inverted-contrast-low-default
  );
  --db-adaptive-bg-inverted-contrast-low-hovered: var(
  	--db-successful-bg-inverted-contrast-low-hovered
  );
  --db-adaptive-bg-inverted-contrast-low-pressed: var(
  	--db-successful-bg-inverted-contrast-low-pressed
  );
  --db-adaptive-on-bg-inverted-default: var(
  	--db-successful-on-bg-inverted-default
  );
  --db-adaptive-on-bg-inverted-hovered: var(
  	--db-successful-on-bg-inverted-hovered
  );
  --db-adaptive-on-bg-inverted-pressed: var(
  	--db-successful-on-bg-inverted-pressed
  );
  --db-adaptive-origin-default: var(--db-successful-origin-default);
  --db-adaptive-origin-hovered: var(--db-successful-origin-hovered);
  --db-adaptive-origin-pressed: var(--db-successful-origin-pressed);
  --db-adaptive-on-origin-default: var(
  	--db-successful-on-origin-default
  );
  --db-adaptive-bg-vibrant-default: var(
  	--db-successful-bg-vibrant-default
  );
  --db-adaptive-bg-vibrant-hovered: var(
  	--db-successful-bg-vibrant-hovered
  );
  --db-adaptive-bg-vibrant-pressed: var(
  	--db-successful-bg-vibrant-pressed
  );
  --db-adaptive-on-bg-vibrant-default: var(
  	--db-successful-on-bg-vibrant-default
  );
  --db-adaptive-on-bg-vibrant-hovered: var(
  	--db-successful-on-bg-vibrant-hovered
  );
  --db-adaptive-on-bg-vibrant-pressed: var(
  	--db-successful-on-bg-vibrant-pressed
  );
}

.db-input:has(input[type=search]):not([data-show-icon-leading=false])::before, .db-input:has(input[type=search]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=time]):not([data-show-icon-trailing=false])::after, .db-input:not([data-show-icon-trailing=false]):has(datalist)::after {
  color: var(--db-icon-color, inherit);
  display: inline-block;
  /*** icon - placeholder ***/
  font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
  font-size: var(--db-icon-font-size, 1.5rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: var(--db-icon-font-weight, normal);
  line-height: 1;
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  speak: none;
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  speak: never;
  text-transform: none;
  overflow: clip;
  vertical-align: var(--db-icon-vertical-align, middle);
  /* stylelint-disable-next-line db-ux/use-sizing */
  block-size: var(--db-icon-font-size, 1.5rem);
  /* stylelint-disable-next-line db-ux/use-sizing */
  inline-size: var(--db-icon-font-size, 1.5rem);
  aspect-ratio: 1;
  flex-shrink: 0;
  text-underline-position: auto;
  content: var(--db-icon, attr(data-icon));
}
@supports (content: ""/"") {
  .db-input:has(input[type=search]):not([data-show-icon-leading=false])::before, .db-input:has(input[type=search]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=time]):not([data-show-icon-trailing=false])::after, .db-input:not([data-show-icon-trailing=false]):has(datalist)::after {
    content: var(--db-icon, attr(data-icon))/"";
  }
}
@media aural {
  .db-input:has(input[type=search]):not([data-show-icon-leading=false])::before, .db-input:has(input[type=search]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=time]):not([data-show-icon-trailing=false])::after, .db-input:not([data-show-icon-trailing=false]):has(datalist)::after {
    content: none;
  }
}
@media speech {
  .db-input:has(input[type=search]):not([data-show-icon-leading=false])::before, .db-input:has(input[type=search]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=time]):not([data-show-icon-trailing=false])::after, .db-input:not([data-show-icon-trailing=false]):has(datalist)::after {
    content: none;
  }
}

.db-input[data-variant=floating] > label, .db-input input {
  font: var(--db-type-body-md);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
}

.db-input, .db-input[data-variant=floating] [id$=-placeholder], .db-input[data-variant=floating] input, .db-input:has(input[type=file]) input, .db-input input::-webkit-calendar-picker-indicator, .db-input input::-webkit-search-cancel-button, .db-input input::file-selector-button {
  font: var(--db-type-body-sm);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
}

.db-input > label, .db-input:has(input[type=file])[data-variant=floating] input, .db-input:has(input[type=file])[data-variant=floating] input::file-selector-button {
  font: var(--db-type-body-xs);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
  --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
}

.db-input[data-variant=floating]:has(input:focus-within,
input:is(input, textarea):not(:placeholder-shown),
> select option:checked:not(.placeholder),
input[type=checkbox]:checked,
input[type=radio]:checked) > label {
  font: var(--db-type-body-2xs);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
  --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
}

/* Single source of truth for the default visual headline size per semantic
 * level. Kept in its own partial because it is consumed both by
 * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
 * component styles in `@db-ux/core-components`. Those must not pull in the
 * emitted default-fonts CSS just to read the mapping. */
.db-input input, .db-input input::file-selector-button {
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
}

.db-input input {
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-70-default);
}

.db-input input, .db-input input::file-selector-button {
  border-radius: var(--db-border-radius-xs);
}

.db-input:not([data-show-icon-trailing=false]):has(datalist)::after {
  --db-icon-trailing: "chevron_down";
  content: var(--db-icon-trailing, attr(data-icon-trailing));
}
@supports (content: ""/"") {
  .db-input:not([data-show-icon-trailing=false]):has(datalist)::after {
    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
  }
}
.db-input:has(datalist)::after {
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .db-input:has(datalist)::after {
    transition: transform var(--db-transition-straight-emotional);
  }
}

.db-input > db-infotext > .db-infotext,
.db-input > .db-infotext {
  margin-block-start: var(--db-spacing-fixed-2xs);
}
.db-input > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]),
.db-input > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]) {
  display: none;
}

.db-input input::file-selector-button {
  font-weight: 700;
  overflow-wrap: break-word;
  white-space: pre-line;
  justify-content: center;
  text-align: center;
  align-items: center;
  vertical-align: top;
}
.db-input input:not([hidden])::file-selector-button {
  display: inline-flex;
}

.db-input {
  min-inline-size: var(--db-form-component-min-inline-size, var(--db-sizing-lg));
  /* stylelint-disable-next-line block-no-redundant-nested-style-rules */
}
.db-input {
  --db-form-has-before: 0;
  position: relative;
  flex-direction: column;
}
.db-input:not([hidden]) {
  display: flex;
}
.db-input[data-variant=floating], .db-input[data-hide-label=true] {
  --db-label-visible-above: 0;
}
.db-input:not([data-hide-asterisk=true]):has(input:required):is(label)::after,
.db-input:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-input:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
.db-input:not([data-hide-asterisk=true])[data-required=true] > label::after {
  /* stylelint-disable-next-line db-ux/use-spacings */
  padding-inline-start: 1px;
  content: "*";
}
@supports (content: ""/"") {
  .db-input:not([data-hide-asterisk=true]):has(input:required):is(label)::after,
  .db-input:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-input:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
  .db-input:not([data-hide-asterisk=true])[data-required=true] > label::after {
    content: "*"/"";
  }
}
.db-input[data-variant=floating]:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) label {
  color: var(--db-successful-on-bg-basic-emphasis-90-default);
}
.db-input[data-variant=floating]:has(input[data-custom-validity=valid]) label, .db-input[data-variant=floating][data-custom-validity=valid] label {
  color: var(--db-successful-on-bg-basic-emphasis-90-default);
}
.db-input[data-variant=floating]:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) label {
  color: var(--db-critical-on-bg-basic-emphasis-90-default);
}
.db-input[data-variant=floating]:has(input[data-custom-validity=invalid]) label, .db-input[data-variant=floating][data-custom-validity=invalid] label {
  color: var(--db-critical-on-bg-basic-emphasis-90-default);
}
.db-input[data-variant=floating] > label {
  opacity: var(--db-opacity-xl);
  position: absolute;
  z-index: 2;
  inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
  inset-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm)) var(--db-form-component-padding-inline-end, var(--db-spacing-fixed-sm));
  pointer-events: none;
  font-style: italic;
}
.db-input[data-variant=floating] [id$=-placeholder] {
  inset-block-start: calc(var(--db-sizing-md) / 2 - 0.5em + var(--db-spacing-fixed-3xs));
}
.db-input[data-variant=floating] input::placeholder,
.db-input[data-variant=floating] [id$=-placeholder] {
  transition: none;
  opacity: 0;
}
.db-input[data-variant=floating] input:is([type=date],
[type=datetime-local],
[type=month],
[type=week],
[type=time]):not(:user-valid,
[value*="1"],
[value*="2"],
[value*="3"],
[value*="4"],
[value*="5"],
[value*="6"],
[value*="7"],
[value*="8"],
[value*="9"],
[value*="0"])::-webkit-datetime-edit {
  transition: none;
  opacity: 0;
}
.db-input[data-variant=floating] input {
  /* stylelint-disable-next-line db-ux/use-spacings */
  padding-block-start: var(--db-base-body-icon-font-size-2xs);
}
.db-input[data-variant=floating]:has(input:focus-within,
input:is(input, textarea):not(:placeholder-shown),
> select option:checked:not(.placeholder),
input[type=checkbox]:checked,
input[type=radio]:checked) > label {
  inset-block-start: var(--db-spacing-fixed-2xs);
  opacity: 1;
  font-style: normal;
}
.db-input[data-variant=floating]:has(input:focus-within,
input:is(input, textarea):not(:placeholder-shown),
> select option:checked:not(.placeholder),
input[type=checkbox]:checked,
input[type=radio]:checked) input::placeholder,
.db-input[data-variant=floating]:has(input:focus-within,
input:is(input, textarea):not(:placeholder-shown),
> select option:checked:not(.placeholder),
input[type=checkbox]:checked,
input[type=radio]:checked) [id$=-placeholder] {
  opacity: var(--db-opacity-xl);
  font-family: var(--db-font-family-sans);
  font-style: italic;
}
@media (prefers-reduced-motion: no-preference) {
  .db-input[data-variant=floating]:has(input:focus-within,
  input:is(input, textarea):not(:placeholder-shown),
  > select option:checked:not(.placeholder),
  input[type=checkbox]:checked,
  input[type=radio]:checked) input::placeholder,
  .db-input[data-variant=floating]:has(input:focus-within,
  input:is(input, textarea):not(:placeholder-shown),
  > select option:checked:not(.placeholder),
  input[type=checkbox]:checked,
  input[type=radio]:checked) [id$=-placeholder] {
    transition: opacity var(--db-transition-straight-emotional);
  }
}
.db-input[data-variant=floating]:has(input:focus-within,
input:is(input, textarea):not(:placeholder-shown),
> select option:checked:not(.placeholder),
input[type=checkbox]:checked,
input[type=radio]:checked) input:is([type=date],
[type=datetime-local],
[type=month],
[type=week],
[type=time]):not(:user-valid,
[value*="1"],
[value*="2"],
[value*="3"],
[value*="4"],
[value*="5"],
[value*="6"],
[value*="7"],
[value*="8"],
[value*="9"],
[value*="0"])::-webkit-datetime-edit {
  opacity: var(--db-opacity-xl);
  font-family: var(--db-font-family-sans);
  font-style: italic;
}
@media (prefers-reduced-motion: no-preference) {
  .db-input[data-variant=floating]:has(input:focus-within,
  input:is(input, textarea):not(:placeholder-shown),
  > select option:checked:not(.placeholder),
  input[type=checkbox]:checked,
  input[type=radio]:checked) input:is([type=date],
  [type=datetime-local],
  [type=month],
  [type=week],
  [type=time]):not(:user-valid,
  [value*="1"],
  [value*="2"],
  [value*="3"],
  [value*="4"],
  [value*="5"],
  [value*="6"],
  [value*="7"],
  [value*="8"],
  [value*="9"],
  [value*="0"])::-webkit-datetime-edit {
    transition: opacity var(--db-transition-straight-emotional);
  }
}
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) {
  --db-icon-color: var(--db-successful-on-bg-basic-emphasis-100-default);
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) input,
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) [id$=-placeholder] {
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
}
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) input {
  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
}
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) > .db-infotext[data-semantic=successful]:not([hidden]) {
  display: flex;
}
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) > db-infotext > .db-infotext,
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) > .db-infotext {
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) > .db-infotext:not([data-semantic]):not([hidden]) {
  display: none;
}
.db-input:has(input[data-custom-validity=valid]), .db-input[data-custom-validity=valid] {
  --db-icon-color: var(--db-successful-on-bg-basic-emphasis-100-default);
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-input:has(input[data-custom-validity=valid]) input,
.db-input:has(input[data-custom-validity=valid]) [id$=-placeholder], .db-input[data-custom-validity=valid] input,
.db-input[data-custom-validity=valid] [id$=-placeholder] {
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
}
.db-input:has(input[data-custom-validity=valid]) input, .db-input[data-custom-validity=valid] input {
  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
}
.db-input:has(input[data-custom-validity=valid]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
.db-input:has(input[data-custom-validity=valid]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-input[data-custom-validity=valid] > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
.db-input[data-custom-validity=valid] > .db-infotext[data-semantic=successful]:not([hidden]) {
  display: flex;
}
.db-input:has(input[data-custom-validity=valid]) > db-infotext > .db-infotext,
.db-input:has(input[data-custom-validity=valid]) > .db-infotext, .db-input[data-custom-validity=valid] > db-infotext > .db-infotext,
.db-input[data-custom-validity=valid] > .db-infotext {
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-input:has(input[data-custom-validity=valid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
.db-input:has(input[data-custom-validity=valid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-input[data-custom-validity=valid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
.db-input[data-custom-validity=valid] > .db-infotext:not([data-semantic]):not([hidden]) {
  display: none;
}
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) {
  --db-icon-color: var(--db-critical-on-bg-basic-emphasis-100-default);
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) input,
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) [id$=-placeholder] {
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
}
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) input {
  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
}
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
  display: flex;
}
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > .db-infotext:not([data-semantic]):not([hidden]) {
  display: none;
}
.db-input:has(input[data-custom-validity=invalid]), .db-input[data-custom-validity=invalid] {
  --db-icon-color: var(--db-critical-on-bg-basic-emphasis-100-default);
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-input:has(input[data-custom-validity=invalid]) input,
.db-input:has(input[data-custom-validity=invalid]) [id$=-placeholder], .db-input[data-custom-validity=invalid] input,
.db-input[data-custom-validity=invalid] [id$=-placeholder] {
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
}
.db-input:has(input[data-custom-validity=invalid]) input, .db-input[data-custom-validity=invalid] input {
  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
}
.db-input:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
.db-input:has(input[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-input[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
.db-input[data-custom-validity=invalid] > .db-infotext[data-semantic=critical]:not([hidden]) {
  display: flex;
}
.db-input:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
.db-input:has(input[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-input[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
.db-input[data-custom-validity=invalid] > .db-infotext:not([data-semantic]):not([hidden]) {
  display: none;
}
.db-input input::placeholder,
.db-input [id$=-placeholder] {
  opacity: var(--db-opacity-xl);
  font-family: var(--db-font-family-sans);
  font-style: italic;
}
.db-input input:is([type=date],
[type=datetime-local],
[type=month],
[type=week],
[type=time]):not(:user-valid,
[value*="1"],
[value*="2"],
[value*="3"],
[value*="4"],
[value*="5"],
[value*="6"],
[value*="7"],
[value*="8"],
[value*="9"],
[value*="0"])::-webkit-datetime-edit {
  opacity: var(--db-opacity-xl);
  font-family: var(--db-font-family-sans);
  font-style: italic;
}
.db-input input {
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
  caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  appearance: none;
  max-inline-size: 100%;
  inline-size: 100%;
  min-inline-size: var(--db-form-component-min-inline-size, var(--db-sizing-lg));
  /* stylelint-disable-next-line db-ux/use-spacings */
  padding-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm)) var(--db-form-component-padding-inline-end, var(--db-spacing-fixed-sm));
}
.db-input input:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
}
.db-input input:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
  cursor: var(--db-overwrite-cursor, revert);
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
}
.db-input input {
  /* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
}
.db-input input[data-field-sizing=content] {
  field-sizing: content;
}
.db-input input[data-field-sizing=fixed] {
  field-sizing: fixed;
}
.db-input input:not(:disabled):read-only {
  background-color: var(--db-input-read-only, var(--db-adaptive-bg-basic-transparent-full-default)) !important;
}
.db-input > label {
  padding-block-end: var(--db-spacing-fixed-xs);
  max-inline-size: var(--db-label-max-size, 100%);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .db-input > label {
    transition: font-size var(--db-transition-straight-emotional);
  }
}
.db-input[data-hide-label=true] > label {
  padding: 0;
}
.db-input:has(input:disabled,
input[data-disabled=true],
input[aria-disabled=true]) {
  opacity: var(--db-opacity-md);
  pointer-events: none;
}
.db-input::after, .db-input::before {
  position: absolute;
  pointer-events: none;
  inset-block-start: calc((var(--db-spacing-fixed-xs) + var(--db-base-body-icon-font-size-xs)) * var(--db-label-visible-above, 1) + var(--db-sizing-md) / 2);
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  transform: translateY(-50%);
  z-index: 1;
}
.db-input::before {
  margin-inline-end: var(--db-spacing-fixed-sm);
  inset-inline-start: var(--db-spacing-fixed-sm);
}
.db-input::after {
  margin-inline-start: var(--db-spacing-fixed-sm);
  inset-inline-end: var(--db-spacing-fixed-sm);
}
.db-input input {
  block-size: var(--db-sizing-md);
  text-overflow: ellipsis;
}
.db-input:is([data-icon], [data-icon-trailing]):not([data-show-icon=false]), .db-input:has(input[type=search],
input[type=date],
input[type=month],
input[type=week],
input[type=datetime-local],
input[type=time]) {
  --db-form-component-min-inline-size: var(--db-sizing-xl);
}
.db-input[data-icon][data-icon-trailing] {
  --db-form-component-min-inline-size: var(--db-sizing-2xl);
}
.db-input[data-icon]:not([data-show-icon=false]), .db-input:has(input[type=search]) {
  --db-form-component-padding-inline-start: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
}
.db-input[data-icon-trailing]:not([data-show-icon-trailing=false]), .db-input:has(input[type=search]), .db-input:has(datalist) {
  --db-form-component-padding-inline-end: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
}
.db-input:has(input[type=search]):not([data-show-icon-leading=false])::before {
  --db-icon: "magnifying_glass";
}
.db-input:has(input[type=search]):not([data-show-icon-trailing=false])::after {
  --db-icon-trailing: "cross";
  content: var(--db-icon-trailing, attr(data-icon-trailing));
}
@supports (content: ""/"") {
  .db-input:has(input[type=search]):not([data-show-icon-trailing=false])::after {
    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
  }
}
.db-input:has(input[type=search])::after {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .db-input:has(input[type=search])::after {
    transition: opacity var(--db-transition-duration-fast);
  }
}
.db-input:has(input[type=search]):has(input:not(:placeholder-shown)):has(input:hover,
input:focus-visible)::after {
  opacity: 1;
}
@supports selector(::-webkit-calendar-picker-indicator) {
  .db-input:has(input[type=week]) {
    --db-form-component-padding-inline-end: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
  }
  .db-input:has(input[type=date]), .db-input:has(input[type=datetime-local]) {
    --db-form-component-padding-inline-end: calc(
    	1lh + var(--db-spacing-fixed-xs)
    );
  }
  .db-input:has(input[type=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after {
    --db-icon-trailing: "calendar";
    content: var(--db-icon-trailing, attr(data-icon-trailing));
  }
  @supports (content: ""/"") {
    .db-input:has(input[type=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after {
      content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
    }
  }
  .db-input:has(input[type=time]):not([data-show-icon-trailing=false])::after {
    --db-icon-trailing: "clock";
    content: var(--db-icon-trailing, attr(data-icon-trailing));
  }
  @supports (content: ""/"") {
    .db-input:has(input[type=time]):not([data-show-icon-trailing=false])::after {
      content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
    }
  }
}
.db-input:has(input[type=file]) input {
  padding-block-start: var(--db-spacing-fixed-xs);
}
.db-input:has(input[type=file])[data-variant=floating] input {
  padding-block-start: calc(var(--db-spacing-fixed-md) + var(--db-spacing-fixed-3xs));
}
.db-input:has(input[type=file])[data-variant=floating] input::file-selector-button {
  block-size: var(--db-sizing-xs);
  padding: 0 var(--db-spacing-fixed-xs);
  margin-inline-end: var(--db-spacing-fixed-xs);
}
.db-input[data-variant=floating] input::-webkit-calendar-picker-indicator, .db-input[data-variant=floating] input::-webkit-search-cancel-button {
  /* stylelint-disable-next-line db-ux/use-spacings */
  margin-block-end: var(--db-base-body-icon-font-size-2xs);
}
.db-input input {
  position: relative;
}
.db-input input::-webkit-color-swatch-wrapper {
  block-size: var(--db-icon-font-size, 1.5rem);
  aspect-ratio: 2/1;
}
.db-input input::-webkit-calendar-picker-indicator, .db-input input::-webkit-search-cancel-button {
  background-image: none;
  position: absolute;
  inset-inline-end: var(--db-spacing-fixed-sm);
  display: block !important;
  inline-size: var(--db-icon-font-size, 1.5rem) !important;
  block-size: var(--db-icon-font-size, 1.5rem) !important;
  padding: 0;
  cursor: pointer;
  /* stylelint-disable-next-line db-ux/use-spacings */
  margin-block-start: var(--db-border-width-3xs);
  border-radius: var(--db-border-radius-xs);
}
.db-input input::-webkit-calendar-picker-indicator:focus-visible, .db-input input::-webkit-search-cancel-button:focus-visible {
  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
  outline-offset: var(--db-border-width-xs);
  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
}
.db-input input::-webkit-search-cancel-button {
  appearance: none;
  position: absolute;
  inset-inline-end: calc(var(--db-spacing-fixed-sm) + var(--db-border-width-3xs));
}
.db-input input::file-selector-button {
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  block-size: var(--db-sizing-sm);
  padding: var(--db-spacing-fixed-3xs) var(--db-spacing-fixed-sm);
  margin-inline-end: var(--db-spacing-fixed-sm);
}
.db-input input::file-selector-button:hover, .db-input input::file-selector-button:focus {
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
}
.db-input input::file-selector-button:active {
  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
}
}
@layer db-ux{

.db-textarea[data-hide-label=true] > label, .db-visually-hidden,
[data-visually-hidden=true] {
  position: absolute !important;
  inset-block-start: 0 !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
/* Variants for adaptive components like input, select, notification, ... */
.db-textarea[data-variant=floating] > label, .db-textarea textarea {
  font: var(--db-type-body-md);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
}

.db-textarea, .db-textarea[data-variant=floating] [id$=-placeholder], .db-textarea[data-variant=floating] textarea {
  font: var(--db-type-body-sm);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
}

.db-textarea > label {
  font: var(--db-type-body-xs);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
  --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
}

.db-textarea[data-variant=floating]:has(textarea:focus-within,
textarea:is(input, textarea):not(:placeholder-shown),
> select option:checked:not(.placeholder),
input[type=checkbox]:checked,
input[type=radio]:checked) > label {
  font: var(--db-type-body-2xs);
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
  --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
}

/* Single source of truth for the default visual headline size per semantic
 * level. Kept in its own partial because it is consumed both by
 * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
 * component styles in `@db-ux/core-components`. Those must not pull in the
 * emitted default-fonts CSS just to read the mapping. */
.db-textarea textarea {
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
}

.db-textarea textarea, .db-textarea[data-variant=floating]:has(textarea:is(:focus-within, :not(:placeholder-shown)))::after {
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-70-default);
}

.db-textarea textarea {
  border-radius: var(--db-border-radius-xs);
}

.db-textarea > db-infotext > .db-infotext,
.db-textarea > .db-infotext {
  margin-block-start: var(--db-spacing-fixed-2xs);
}
.db-textarea > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]),
.db-textarea > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]) {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .db-textarea[data-variant=floating]:has(textarea:is(:focus-within, :not(:placeholder-shown)))::before, .db-textarea textarea::-webkit-scrollbar, .db-textarea textarea::-webkit-scrollbar-corner {
    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
  }
}

@keyframes popover-animation {
  0% {
    pointer-events: none;
    opacity: 0;
    transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
  }
  100% {
    pointer-events: auto;
    opacity: 1;
    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
  }
}
@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
@keyframes wobbling {
  50% {
    inset-inline-start: 100%;
    /**
     * inset-inline-start is direction-aware and resolves to the right edge
     * under RTL, so the follow-up translate has to flip too. The sign is
     * provided via --db-loading-indicator-wobbling-direction (1 for LTR,
     * -1 for RTL, set by the consuming component) so the segment lands at
     * the opposite edge instead of overshooting the track.
     */
    transform: translateX(calc(var(--db-loading-indicator-wobbling-direction, 1) * (-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px))));
  }
}
@supports (field-sizing: content) {
  .db-textarea textarea[data-field-sizing=content]:is([data-hide-resizer=true], [data-resize=none]) {
    /* We don't show a scrollbar if we use field-sizing: content and no resizer is available */
    scrollbar-width: none;
  }
}
.db-textarea textarea::-webkit-scrollbar {
  z-index: 3;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  background-color: var(--db-adaptive-bg-basic-level-1-default);
  border-start-end-radius: var(--db-border-radius-xs);
}
.db-textarea textarea:is(:hover, :focus)::-webkit-scrollbar-track, .db-textarea textarea:is(:hover, :focus)::-webkit-scrollbar-button:single-button {
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
}
.db-textarea textarea:read-only::-webkit-scrollbar-track, .db-textarea textarea:read-only::-webkit-scrollbar-button:single-button {
  background-color: var(--db-adaptive-bg-basic-level-1-default);
}
.db-textarea textarea::-webkit-scrollbar-track {
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
}
.db-textarea textarea::-webkit-scrollbar-thumb {
  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
}
.db-textarea textarea {
  /* Buttons */
}
.db-textarea textarea::-webkit-scrollbar-button:single-button {
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
  background-size: 0.5rem;
  background-repeat: no-repeat;
  background-position: center;
  block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
}
.db-textarea textarea::-webkit-scrollbar-button:single-button:is(:hover, :focus) {
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
}
.db-textarea textarea::-webkit-scrollbar-button:single-button:active {
  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
}
.db-textarea textarea {
  /* Up */
}
.db-textarea textarea::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-start-end-radius: var(--db-border-radius-xs);
  background-image: var(--db-scrollbar-button-vertical-decrement);
}
.db-textarea textarea {
  /* Down */
}
.db-textarea textarea::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: var(--db-scrollbar-button-vertical-increment);
}
.db-textarea textarea {
  /* Left */
}
.db-textarea textarea::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: var(--db-scrollbar-button-horizontal-decrement);
}
.db-textarea textarea {
  /* Right */
}
.db-textarea textarea::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: var(--db-scrollbar-button-horizontal-increment);
}
.db-textarea textarea[data-variant=floating]::-webkit-resizer {
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
}
.db-textarea textarea[data-variant=floating]::-webkit-scrollbar-corner {
  background-color: var(--db-adaptive-bg-basic-level-1-default);
}
.db-textarea textarea::-webkit-resizer {
  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
  background-size: 0.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-image: var(--db-textarea-resizer-image);
  border-end-end-radius: var(--db-border-radius-xs);
}
.db-textarea textarea::-webkit-scrollbar-corner {
  border-end-end-radius: var(--db-border-radius-xs);
}

.db-textarea textarea[data-hide-resizer=true] {
  resize: none;
}
.db-textarea textarea:not([data-hide-resizer=true])[data-resize=none] {
  resize: none;
}
.db-textarea textarea:not([data-hide-resizer=true])[data-resize=both] {
  resize: both;
}
.db-textarea textarea:not([data-hide-resizer=true])[data-resize=horizontal] {
  resize: horizontal;
}
.db-textarea textarea:not([data-hide-resizer=true])[data-resize=vertical] {
  resize: vertical;
}

.db-textarea {
  min-inline-size: var(--db-form-component-min-inline-size, var(--db-sizing-lg));
  /* stylelint-disable-next-line block-no-redundant-nested-style-rules */
}
.db-textarea {
  --db-form-has-before: 0;
  position: relative;
  flex-direction: column;
}
.db-textarea:not([hidden]) {
  display: flex;
}
.db-textarea[data-variant=floating], .db-textarea[data-hide-label=true] {
  --db-label-visible-above: 0;
}
.db-textarea:not([data-hide-asterisk=true]):has(textarea:required):is(label)::after,
.db-textarea:not([data-hide-asterisk=true]):has(textarea:required) > label::after, .db-textarea:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
.db-textarea:not([data-hide-asterisk=true])[data-required=true] > label::after {
  /* stylelint-disable-next-line db-ux/use-spacings */
  padding-inline-start: 1px;
  content: "*";
}
@supports (content: ""/"") {
  .db-textarea:not([data-hide-asterisk=true]):has(textarea:required):is(label)::after,
  .db-textarea:not([data-hide-asterisk=true]):has(textarea:required) > label::after, .db-textarea:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
  .db-textarea:not([data-hide-asterisk=true])[data-required=true] > label::after {
    content: "*"/"";
  }
}
.db-textarea[data-variant=floating]:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) label {
  color: var(--db-successful-on-bg-basic-emphasis-90-default);
}
.db-textarea[data-variant=floating]:has(textarea[data-custom-validity=valid]) label, .db-textarea[data-variant=floating][data-custom-validity=valid] label {
  color: var(--db-successful-on-bg-basic-emphasis-90-default);
}
.db-textarea[data-variant=floating]:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) label {
  color: var(--db-critical-on-bg-basic-emphasis-90-default);
}
.db-textarea[data-variant=floating]:has(textarea[data-custom-validity=invalid]) label, .db-textarea[data-variant=floating][data-custom-validity=invalid] label {
  color: var(--db-critical-on-bg-basic-emphasis-90-default);
}
.db-textarea[data-variant=floating] > label {
  opacity: var(--db-opacity-xl);
  position: absolute;
  z-index: 2;
  inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
  inset-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm)) var(--db-form-component-padding-inline-end, var(--db-spacing-fixed-sm));
  pointer-events: none;
  font-style: italic;
}
.db-textarea[data-variant=floating] [id$=-placeholder] {
  inset-block-start: calc(var(--db-sizing-md) / 2 - 0.5em + var(--db-spacing-fixed-3xs));
}
.db-textarea[data-variant=floating] textarea::placeholder,
.db-textarea[data-variant=floating] [id$=-placeholder] {
  transition: none;
  opacity: 0;
}
.db-textarea[data-variant=floating] textarea:is([type=date],
[type=datetime-local],
[type=month],
[type=week],
[type=time]):not(:user-valid,
[value*="1"],
[value*="2"],
[value*="3"],
[value*="4"],
[value*="5"],
[value*="6"],
[value*="7"],
[value*="8"],
[value*="9"],
[value*="0"])::-webkit-datetime-edit {
  transition: none;
  opacity: 0;
}
.db-textarea[data-variant=floating] textarea {
  padding-block-start: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-textarea[data-variant=floating]:has(textarea:focus-within,
textarea:is(input, textarea):not(:placeholder-shown),
> select option:checked:not(.placeholder),
input[type=checkbox]:checked,
input[type=radio]:checked) > label {
  inset-block-start: var(--db-spacing-fixed-2xs);
  opacity: 1;
  font-style: normal;
}
.db-textarea[data-variant=floating]:has(textarea:focus-within,
textarea:is(input, textarea):not(:placeholder-shown),
> select option:checked:not(.placeholder),
input[type=checkbox]:checked,
input[type=radio]:checked) textarea::placeholder,
.db-textarea[data-variant=floating]:has(textarea:focus-within,
textarea:is(input, textarea):not(:placeholder-shown),
> select option:checked:not(.placeholder),
input[type=checkbox]:checked,
input[type=radio]:checked) [id$=-placeholder] {
  opacity: var(--db-opacity-xl);
  font-family: var(--db-font-family-sans);
  font-style: italic;
}
@media (prefers-reduced-motion: no-preference) {
  .db-textarea[data-variant=floating]:has(textarea:focus-within,
  textarea:is(input, textarea):not(:placeholder-shown),
  > select option:checked:not(.placeholder),
  input[type=checkbox]:checked,
  input[type=radio]:checked) textarea::placeholder,
  .db-textarea[data-variant=floating]:has(textarea:focus-within,
  textarea:is(input, textarea):not(:placeholder-shown),
  > select option:checked:not(.placeholder),
  input[type=checkbox]:checked,
  input[type=radio]:checked) [id$=-placeholder] {
    transition: opacity var(--db-transition-straight-emotional);
  }
}
.db-textarea[data-variant=floating]:has(textarea:focus-within,
textarea:is(input, textarea):not(:placeholder-shown),
> select option:checked:not(.placeholder),
input[type=checkbox]:checked,
input[type=radio]:checked) textarea:is([type=date],
[type=datetime-local],
[type=month],
[type=week],
[type=time]):not(:user-valid,
[value*="1"],
[value*="2"],
[value*="3"],
[value*="4"],
[value*="5"],
[value*="6"],
[value*="7"],
[value*="8"],
[value*="9"],
[value*="0"])::-webkit-datetime-edit {
  opacity: var(--db-opacity-xl);
  font-family: var(--db-font-family-sans);
  font-style: italic;
}
@media (prefers-reduced-motion: no-preference) {
  .db-textarea[data-variant=floating]:has(textarea:focus-within,
  textarea:is(input, textarea):not(:placeholder-shown),
  > select option:checked:not(.placeholder),
  input[type=checkbox]:checked,
  input[type=radio]:checked) textarea:is([type=date],
  [type=datetime-local],
  [type=month],
  [type=week],
  [type=time]):not(:user-valid,
  [value*="1"],
  [value*="2"],
  [value*="3"],
  [value*="4"],
  [value*="5"],
  [value*="6"],
  [value*="7"],
  [value*="8"],
  [value*="9"],
  [value*="0"])::-webkit-datetime-edit {
    transition: opacity var(--db-transition-straight-emotional);
  }
}
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) {
  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
  --db-adaptive-bg-basic-transparent-full-default: var(
  	--db-successful-bg-basic-transparent-full-default
  );
  --db-adaptive-bg-basic-transparent-semi-default: var(
  	--db-successful-bg-basic-transparent-semi-default
  );
  --db-adaptive-bg-basic-transparent-full-hovered: var(
  	--db-successful-bg-basic-transparent-full-hovered
  );
  --db-adaptive-bg-basic-transparent-full-pressed: var(
  	--db-successful-bg-basic-transparent-full-pressed
  );
  --db-adaptive-bg-basic-transparent-semi-hovered: var(
  	--db-successful-bg-basic-transparent-semi-hovered
  );
  --db-adaptive-bg-basic-transparent-semi-pressed: var(
  	--db-successful-bg-basic-transparent-semi-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
  	--db-successful-on-bg-basic-emphasis-100-default
  );
  --db-adaptive-on-bg-basic-emphasis-60-default: var(
  	--db-successful-on-bg-basic-emphasis-60-default
  );
}
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid)[data-variant=floating]::after {
  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
}
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) textarea,
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) [id$=-placeholder] {
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
}
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) textarea {
  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
}
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > .db-infotext[data-semantic=successful]:not([hidden]) {
  display: flex;
}
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > db-infotext > .db-infotext,
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > .db-infotext {
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > .db-infotext:not([data-semantic]):not([hidden]) {
  display: none;
}
.db-textarea:has(textarea[data-custom-validity=valid]), .db-textarea[data-custom-validity=valid] {
  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
  --db-adaptive-bg-basic-transparent-full-default: var(
  	--db-successful-bg-basic-transparent-full-default
  );
  --db-adaptive-bg-basic-transparent-semi-default: var(
  	--db-successful-bg-basic-transparent-semi-default
  );
  --db-adaptive-bg-basic-transparent-full-hovered: var(
  	--db-successful-bg-basic-transparent-full-hovered
  );
  --db-adaptive-bg-basic-transparent-full-pressed: var(
  	--db-successful-bg-basic-transparent-full-pressed
  );
  --db-adaptive-bg-basic-transparent-semi-hovered: var(
  	--db-successful-bg-basic-transparent-semi-hovered
  );
  --db-adaptive-bg-basic-transparent-semi-pressed: var(
  	--db-successful-bg-basic-transparent-semi-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
  	--db-successful-on-bg-basic-emphasis-100-default
  );
  --db-adaptive-on-bg-basic-emphasis-60-default: var(
  	--db-successful-on-bg-basic-emphasis-60-default
  );
}
.db-textarea:has(textarea[data-custom-validity=valid])[data-variant=floating]::after, .db-textarea[data-custom-validity=valid][data-variant=floating]::after {
  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
}
.db-textarea:has(textarea[data-custom-validity=valid]) textarea,
.db-textarea:has(textarea[data-custom-validity=valid]) [id$=-placeholder], .db-textarea[data-custom-validity=valid] textarea,
.db-textarea[data-custom-validity=valid] [id$=-placeholder] {
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
}
.db-textarea:has(textarea[data-custom-validity=valid]) textarea, .db-textarea[data-custom-validity=valid] textarea {
  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
}
.db-textarea:has(textarea[data-custom-validity=valid]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
.db-textarea:has(textarea[data-custom-validity=valid]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-textarea[data-custom-validity=valid] > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
.db-textarea[data-custom-validity=valid] > .db-infotext[data-semantic=successful]:not([hidden]) {
  display: flex;
}
.db-textarea:has(textarea[data-custom-validity=valid]) > db-infotext > .db-infotext,
.db-textarea:has(textarea[data-custom-validity=valid]) > .db-infotext, .db-textarea[data-custom-validity=valid] > db-infotext > .db-infotext,
.db-textarea[data-custom-validity=valid] > .db-infotext {
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-textarea:has(textarea[data-custom-validity=valid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
.db-textarea:has(textarea[data-custom-validity=valid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-textarea[data-custom-validity=valid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
.db-textarea[data-custom-validity=valid] > .db-infotext:not([data-semantic]):not([hidden]) {
  display: none;
}
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) {
  --db-textarea-read-only: var(--db-critical-bg-basic-level-1-default);
  --db-adaptive-bg-basic-transparent-full-default: var(
  	--db-critical-bg-basic-transparent-full-default
  );
  --db-adaptive-bg-basic-transparent-semi-default: var(
  	--db-critical-bg-basic-transparent-semi-default
  );
  --db-adaptive-bg-basic-transparent-full-hovered: var(
  	--db-critical-bg-basic-transparent-full-hovered
  );
  --db-adaptive-bg-basic-transparent-full-pressed: var(
  	--db-critical-bg-basic-transparent-full-pressed
  );
  --db-adaptive-bg-basic-transparent-semi-hovered: var(
  	--db-critical-bg-basic-transparent-semi-hovered
  );
  --db-adaptive-bg-basic-transparent-semi-pressed: var(
  	--db-critical-bg-basic-transparent-semi-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
  	--db-critical-on-bg-basic-emphasis-100-default
  );
  --db-adaptive-on-bg-basic-emphasis-60-default: var(
  	--db-critical-on-bg-basic-emphasis-60-default
  );
}
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid)[data-variant=floating]::after {
  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
}
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) textarea,
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) [id$=-placeholder] {
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
}
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) textarea {
  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
}
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
  display: flex;
}
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > .db-infotext:not([data-semantic]):not([hidden]) {
  display: none;
}
.db-textarea:has(textarea[data-custom-validity=invalid]), .db-textarea[data-custom-validity=invalid] {
  --db-textarea-read-only: var(--db-critical-bg-basic-level-1-default);
  --db-adaptive-bg-basic-transparent-full-default: var(
  	--db-critical-bg-basic-transparent-full-default
  );
  --db-adaptive-bg-basic-transparent-semi-default: var(
  	--db-critical-bg-basic-transparent-semi-default
  );
  --db-adaptive-bg-basic-transparent-full-hovered: var(
  	--db-critical-bg-basic-transparent-full-hovered
  );
  --db-adaptive-bg-basic-transparent-full-pressed: var(
  	--db-critical-bg-basic-transparent-full-pressed
  );
  --db-adaptive-bg-basic-transparent-semi-hovered: var(
  	--db-critical-bg-basic-transparent-semi-hovered
  );
  --db-adaptive-bg-basic-transparent-semi-pressed: var(
  	--db-critical-bg-basic-transparent-semi-pressed
  );
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
  	--db-critical-on-bg-basic-emphasis-100-default
  );
  --db-adaptive-on-bg-basic-emphasis-60-default: var(
  	--db-critical-on-bg-basic-emphasis-60-default
  );
}
.db-textarea:has(textarea[data-custom-validity=invalid])[data-variant=floating]::after, .db-textarea[data-custom-validity=invalid][data-variant=floating]::after {
  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
}
.db-textarea:has(textarea[data-custom-validity=invalid]) textarea,
.db-textarea:has(textarea[data-custom-validity=invalid]) [id$=-placeholder], .db-textarea[data-custom-validity=invalid] textarea,
.db-textarea[data-custom-validity=invalid] [id$=-placeholder] {
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
}
.db-textarea:has(textarea[data-custom-validity=invalid]) textarea, .db-textarea[data-custom-validity=invalid] textarea {
  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
}
.db-textarea:has(textarea[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
.db-textarea:has(textarea[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-textarea[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
.db-textarea[data-custom-validity=invalid] > .db-infotext[data-semantic=critical]:not([hidden]) {
  display: flex;
}
.db-textarea:has(textarea[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
.db-textarea:has(textarea[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-textarea[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
.db-textarea[data-custom-validity=invalid] > .db-infotext:not([data-semantic]):not([hidden]) {
  display: none;
}
.db-textarea textarea::placeholder,
.db-textarea [id$=-placeholder] {
  opacity: var(--db-opacity-xl);
  font-family: var(--db-font-family-sans);
  font-style: italic;
}
.db-textarea textarea:is([type=date],
[type=datetime-local],
[type=month],
[type=week],
[type=time]):not(:user-valid,
[value*="1"],
[value*="2"],
[value*="3"],
[value*="4"],
[value*="5"],
[value*="6"],
[value*="7"],
[value*="8"],
[value*="9"],
[value*="0"])::-webkit-datetime-edit {
  opacity: var(--db-opacity-xl);
  font-family: var(--db-font-family-sans);
  font-style: italic;
}
.db-textarea textarea {
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
  caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  appearance: none;
  max-inline-size: 100%;
  inline-size: 100%;
  min-inline-size: var(--db-form-component-min-inline-size, var(--db-sizing-lg));
  /* stylelint-disable-next-line db-ux/use-spacings */
  padding-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm)) var(--db-form-component-padding-inline-end, var(--db-spacing-fixed-sm));
}
.db-textarea textarea:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
}
.db-textarea textarea:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
  cursor: var(--db-overwrite-cursor, revert);
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
}
.db-textarea textarea {
  /* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
}
.db-textarea textarea[data-field-sizing=content] {
  field-sizing: content;
}
.db-textarea textarea[data-field-sizing=fixed] {
  field-sizing: fixed;
}
.db-textarea textarea:not(:disabled):read-only {
  background-color: var(--db-textarea-read-only, var(--db-adaptive-bg-basic-transparent-full-default)) !important;
}
.db-textarea > label {
  padding-block-end: var(--db-spacing-fixed-xs);
  max-inline-size: var(--db-label-max-size, 100%);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .db-textarea > label {
    transition: font-size var(--db-transition-straight-emotional);
  }
}
.db-textarea[data-hide-label=true] > label {
  padding: 0;
}
.db-textarea:has(textarea:disabled,
textarea[data-disabled=true],
textarea[aria-disabled=true]) {
  opacity: var(--db-opacity-md);
  pointer-events: none;
}
.db-textarea::after, .db-textarea::before {
  position: absolute;
  pointer-events: none;
  inset-block-start: calc((var(--db-spacing-fixed-xs) + var(--db-base-body-icon-font-size-xs)) * var(--db-label-visible-above, 1) + var(--db-sizing-md) / 2);
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  transform: translateY(-50%);
  z-index: 1;
}
.db-textarea::before {
  margin-inline-end: var(--db-spacing-fixed-sm);
  inset-inline-start: var(--db-spacing-fixed-sm);
}
.db-textarea::after {
  margin-inline-start: var(--db-spacing-fixed-sm);
  inset-inline-end: var(--db-spacing-fixed-sm);
}
.db-textarea textarea {
  overflow-y: scroll;
  overflow-block: scroll;
  padding-block: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-xs);
}
.db-textarea[data-variant=floating]:has(textarea:is(:focus-within, :not(:placeholder-shown)))::before {
  border-radius: var(--db-border-radius-xs) 0 0 0;
  position: absolute;
  content: "";
  inset-block-start: 0;
  block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
  margin-inline: 0;
  inline-size: calc(100% - 0.5rem - 1px);
  inset-inline: 0;
  transform: none;
  background-color: var(--db-adaptive-bg-basic-level-1-default);
}
.db-textarea[data-variant=floating]:has(textarea:is(:focus-within, :not(:placeholder-shown)))::after {
  border-radius: var(--db-border-radius-xs) 0 0 0;
  position: absolute;
  content: "";
  inset-block-start: 0;
  block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
  margin-inline: 0;
  inline-size: calc(100% - 0.5rem - 1px);
  inset-inline: 0;
  transform: none;
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
  z-index: 1;
  border-block-end: 0;
  border-inline-end: 0;
}
.db-textarea[data-variant=floating]:has(textarea:is(:focus-within, :not(:placeholder-shown))):has(textarea:read-only)::after {
  background-color: var(--db-adaptive-bg-basic-level-1-default) !important;
}
.db-textarea[data-variant=floating]:has(textarea:is(:focus-within, :not(:placeholder-shown))):has(textarea:not(:disabled):is(:hover, :focus))::after {
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
}
}
/* ---- IronGate — LIGHT theme (best for presentation / projector) ---- */
:root {
  color-scheme: light;
  /* Re-point the DB neutral tokens used throughout the app to a light palette.
     Every component that reads var(--db-neutral-*) flips automatically. */
  --db-neutral-bg-basic-level-1-default: #f4f6f9;
  --db-neutral-bg-basic-level-2-default: #ffffff;
  --db-neutral-bg-basic-level-3-default: #eef2f6;
  --db-neutral-border-emphasis-40-default: #c3ccd6;
  --db-neutral-border-emphasis-20-default: #dde3ea;
  --db-neutral-on-bg-basic-emphasis-100-default: #0d1b2a;
  --db-neutral-on-bg-basic-emphasis-80-default: #33465c;
  /* Softer "on-bg" variants of semantic colors that read well on light. */
  --db-successful-on-bg-emphasis-100-default: #2e7d32;
  --db-critical-on-bg-emphasis-100-default: #c0111f;
  --db-warning-on-bg-emphasis-100-default: #a65b00;
  /* Light tints for callout backgrounds (were dark in the DB dark theme). */
  --db-informational-bg-emphasis-20-default: #e7f0ff;
  --db-warning-bg-emphasis-20-default: #fff3d6;
  --db-successful-bg-emphasis-20-default: #e4f3e2;
  --db-critical-bg-emphasis-20-default: #fde7e9;
  /* The DB brand webfonts aren't reliably bundled, so use a crisp system stack
     instead of falling back to an ugly default. Overrides the DB font tokens. */
  --db-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --db-font-family-head: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --db-font-family-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* Belt-and-braces: force the system stack on the app root too, so nothing is
   left waiting on the (missing) DB webfonts. */
body,
.arena {
  font-family: var(--db-font-family-sans);
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  background: var(--db-neutral-bg-basic-level-1-default, #f4f6f9);
  color: var(--db-neutral-on-bg-basic-emphasis-100-default, #0d1b2a);
  font-family: var(--db-font-family-head, "DB Screen Sans", system-ui, sans-serif);
}

.arena {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--db-spacing-fixed-md, 1rem);
  gap: var(--db-spacing-fixed-md, 1rem);
  max-width: 1400px;
  margin: 0 auto;
}

.arena__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.arena__title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Official adaptive DB logo (SVG auto-inverts white on dark via light-dark()). */
.brandmark {
  height: 2.75rem;
  width: auto;
  display: block;
}

.arena__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--db-spacing-fixed-md, 1rem);
  align-items: start;
}

@media (max-width: 900px) {
  .arena__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Battle stage ---- */
.matchup {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
  font-size: 1.25rem;
}

.matchup__team {
  font-weight: 800;
}

.matchup__role {
  font-size: 0.85rem;
  opacity: 0.65;
}

.matchup__vs {
  font-weight: 800;
  opacity: 0.7;
}

.matchup__scenario {
  flex-basis: 100%;
  font-size: 0.8rem;
  opacity: 0.6;
  letter-spacing: 0.04em;
}

.stage {
  border: 1px solid var(--db-neutral-border-emphasis-40-default, #334155);
  border-radius: 12px;
  padding: 1.25rem;
  background: var(--db-neutral-bg-basic-level-2-default, #16202b);
  min-height: 340px;
}

.stage__fighters {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.fighter {
  flex: 1;
}

.fighter--defender {
  text-align: right;
}

.fighter__role {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.fighter__name {
  font-size: 1.4rem;
  font-weight: 700;
}

.hpbar {
  height: 14px;
  border-radius: 7px;
  background: var(--db-neutral-bg-basic-level-3-default, #22303c);
  overflow: hidden;
  margin-top: 0.35rem;
}

.hpbar__fill {
  height: 100%;
  transition: width 600ms ease;
  background: var(--db-successful-bg-emphasis-100-default, #3f9c35);
}

.hpbar__fill--low {
  background: var(--db-critical-bg-emphasis-100-default, #c0111f);
}

.stage__vs {
  align-self: center;
  font-weight: 800;
  opacity: 0.5;
}

.stage__narrative {
  font-family: var(--db-font-family-mono, "DB Screen Mono", ui-monospace, monospace);
  font-size: 1.05rem;
  line-height: 1.6;
  white-space: pre-wrap;
  min-height: 6rem;
  border-left: 3px solid var(--db-informational-border-emphasis-100-default, #1e6be6);
  padding-left: 0.9rem;
  margin: 1rem 0;
}

.stage__teaching {
  background: var(--db-informational-bg-emphasis-20-default, #e7f0ff);
  color: var(--db-neutral-on-bg-basic-emphasis-100-default, #0d1b2a);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-style: italic;
}

.stage__result {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.damage {
  font-size: 1.5rem;
  font-weight: 800;
}

.damage--pos {
  color: var(--db-successful-on-bg-emphasis-100-default, #6cc24a);
}

.damage--neg {
  color: var(--db-critical-on-bg-emphasis-100-default, #ff5a5f);
}

/* caret for the typewriter */
.caret::after {
  content: "▋";
  animation: blink 1s steps(1) infinite;
  opacity: 0.8;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ---- Leaderboard ---- */
.leaderboard {
  border: 1px solid var(--db-neutral-border-emphasis-40-default, #334155);
  border-radius: 12px;
  padding: 1.25rem;
  background: var(--db-neutral-bg-basic-level-2-default, #16202b);
}

.leaderboard__row {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.5rem;
  border-radius: 8px;
  transition: background 300ms ease, transform 300ms ease;
}

.leaderboard__row:nth-child(odd) {
  background: var(--db-neutral-bg-basic-level-3-default, #1b2732);
}

.leaderboard__rank {
  font-weight: 800;
  opacity: 0.6;
  text-align: center;
}

.leaderboard__name {
  font-weight: 600;
}

.leaderboard__meta {
  font-size: 0.8rem;
  opacity: 0.65;
}

.leaderboard__score {
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---- Facilitator console ---- */
.arena__subheader {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.console {
  display: flex;
  flex-direction: column;
  gap: var(--db-spacing-fixed-md, 1rem);
}

.console__toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.console__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--db-spacing-fixed-md, 1rem);
  align-items: start;
}

@media (max-width: 900px) {
  .console__grid {
    grid-template-columns: 1fr;
  }
}

.console__panel {
  border: 1px solid var(--db-neutral-border-emphasis-40-default, #334155);
  border-radius: 12px;
  padding: 1.25rem;
  background: var(--db-neutral-bg-basic-level-2-default, #16202b);
}

.console__panel h3 {
  margin-top: 0;
}

.console__form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.console__teamlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.matchtable {
  width: 100%;
  border-collapse: collapse;
}

.matchtable td {
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--db-neutral-border-emphasis-20-default, #263340);
  vertical-align: middle;
}

.matchtable__dmg {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---- Briefing / instructions page ---- */
.briefing {
  display: flex;
  flex-direction: column;
  gap: var(--db-spacing-fixed-md, 1rem);
  max-width: 980px;
}

.briefing h2 {
  font-size: 1.4rem;
}

.diagram {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

.diagram__level {
  font-size: 13px;
  font-weight: 700;
}

.diagram__assets {
  font-size: 11px;
}

.diagram__note {
  font-size: 10px;
  font-style: italic;
}

.diagram__steps {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.25rem;
  font-family: var(--db-font-family-mono, ui-monospace, monospace);
  font-size: 0.9rem;
  color: var(--db-neutral-on-bg-basic-emphasis-80-default, #cbd5e1);
}

.template {
  background: var(--db-neutral-bg-basic-level-3-default, #1b2732);
  border: 1px solid var(--db-neutral-border-emphasis-20-default, #263340);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  font-family: var(--db-font-family-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre;
}

.scoring th {
  text-align: left;
  padding: 0.4rem;
  font-size: 0.85rem;
  opacity: 0.7;
  border-bottom: 1px solid var(--db-neutral-border-emphasis-40-default, #334155);
}

.scoring__weak {
  color: var(--db-critical-on-bg-emphasis-100-default, #ff8a8f);
}

.scoring__strong {
  color: var(--db-successful-on-bg-emphasis-100-default, #6cc24a);
}

/* ---- Glossary ---- */
.glossary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.5rem;
  margin: 0.5rem 0 0;
}

@media (max-width: 720px) {
  .glossary {
    grid-template-columns: 1fr;
  }
}

.glossary dt {
  font-weight: 800;
  color: var(--db-neutral-on-bg-basic-emphasis-100-default, #f3f4f6);
  margin-bottom: 0.2rem;
}

.glossary dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--db-neutral-on-bg-basic-emphasis-80-default, #cbd5e1);
}

/* ---- Full-screen Standings (projector) ---- */
.lbview {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.lbview__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.lbview__title {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin: 0;
}

.lbview__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lbview__row {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  background: var(--db-neutral-bg-basic-level-2-default, #16202b);
  border: 1px solid var(--db-neutral-border-emphasis-20-default, #263340);
  transition: background 400ms ease, transform 400ms ease;
}

.lbview__row--top {
  border-width: 2px;
}

.lbview__row--1 {
  border-color: var(--db-warning-border-emphasis-100-default, #ec9a00);
  background: rgba(236, 154, 0, 0.10);
}

.lbview__row--2 {
  border-color: #9aa7b4;
  background: rgba(154, 167, 180, 0.08);
}

.lbview__row--3 {
  border-color: #b06a2c;
  background: rgba(176, 106, 44, 0.08);
}

.lbview__rank {
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
}

.lbview__name {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 1.9rem;
  font-weight: 800;
}

.lbview__record {
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.7;
}

.lbview__score {
  font-size: 2.4rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--db-successful-on-bg-emphasis-100-default, #6cc24a);
}

/* ---- Graduated example cards ---- */
.examples {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.example {
  border: 1px solid var(--db-neutral-border-emphasis-40-default, #334155);
  border-radius: 10px;
  padding: 1rem;
  background: var(--db-neutral-bg-basic-level-3-default, #1b2732);
}

.example--aspiration {
  border-style: dashed;
  opacity: 0.92;
}

.example__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.example__score {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.example__card {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
}

.example__why {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--db-neutral-on-bg-basic-emphasis-80-default, #cbd5e1);
}

/* ---- Final round selector + duplicate flags ---- */
.console__roundsel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

.console__roundsel select {
  background: var(--db-neutral-bg-basic-level-3-default, #1b2732);
  color: inherit;
  border: 1px solid var(--db-neutral-border-emphasis-40-default, #334155);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
}

.dupes {
  margin-top: 0.75rem;
}

/* ---- Standings Overall/Final toggle ---- */
.lbview__tab {
  background: var(--db-neutral-bg-basic-level-3-default, #1b2732);
  color: inherit;
  border: 1px solid var(--db-neutral-border-emphasis-40-default, #334155);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-weight: 700;
  cursor: pointer;
}

.lbview__tab--on {
  background: var(--db-brand-origin-default, #ec0016);
  color: #fff;
  border-color: transparent;
}

/* ---- Team "My matches" stats strip ---- */
.mystats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.mystat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: var(--db-neutral-bg-basic-level-3-default, #1b2732);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.mystat span {
  font-size: 1.5rem;
  font-weight: 800;
  opacity: 1;
}

.mystat--win span {
  color: var(--db-successful-on-bg-emphasis-100-default, #6cc24a);
}

.mystat--loss span {
  color: var(--db-critical-on-bg-emphasis-100-default, #ff5a5f);
}

.mystat--score span {
  color: var(--db-brand-origin-default, #ec0016);
}

/* ---- Briefing: How-to-win TL;DR hero ---- */
.tldr {
  border-left: 4px solid var(--db-brand-origin-default, #ec0016);
}

.tldr__steps {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.5rem 0 0.75rem;
}

.tldr__step {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.tldr__n {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--db-brand-origin-default, #ec0016);
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tldr__rule {
  background: var(--db-warning-bg-emphasis-20-default, #fff3d6);
  color: var(--db-neutral-on-bg-basic-emphasis-100-default, #0d1b2a);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.25rem 0 0.75rem;
}

/* ---- Jargon buster (collapsible glossary) ---- */
.jargon > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.25rem 0;
}

.jargon > summary::-webkit-details-marker {
  display: none;
}

.jargon__title {
  font-size: 1.4rem;
  font-weight: 800;
}

.jargon[open] > summary .jargon__title::before {
  content: "▾ ";
}

.jargon:not([open]) > summary .jargon__title::before {
  content: "▸ ";
}

/* diagram step list bold markers */
.diagram__steps b {
  color: var(--db-critical-on-bg-emphasis-100-default, #ff8a8f);
  margin-right: 0.35rem;
}

/* ---- SIL contrast callout (below the diagram) ---- */
.sil {
  margin-top: 0.75rem;
  border: 1px solid var(--db-neutral-border-emphasis-40-default, #334155);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  background: var(--db-neutral-bg-basic-level-3-default, #1b2732);
}

.sil__title {
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.sil__row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.4rem 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.sil__mark {
  font-weight: 900;
  font-size: 1.2rem;
  flex: 0 0 auto;
}

.sil__row--bad .sil__mark {
  color: var(--db-critical-on-bg-emphasis-100-default, #ff5a5f);
}

.sil__row--good .sil__mark {
  color: var(--db-successful-on-bg-emphasis-100-default, #6cc24a);
}

/* ---- v1/v2 card comparison (facilitator) ---- */
.cardcompare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 820px) {
  .cardcompare {
    grid-template-columns: 1fr;
  }
}

.cardcompare__label {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-bottom: 0.3rem;
}

.cardcompare__label--v2 {
  color: var(--db-successful-on-bg-emphasis-100-default, #6cc24a);
  opacity: 1;
}

/* ---- Round 2 improve banner (team view) ---- */
.r2banner {
  background: var(--db-informational-bg-emphasis-20-default, #e7f0ff);
  color: var(--db-neutral-on-bg-basic-emphasis-100-default, #0d1b2a);
  border: 1px solid var(--db-informational-border-emphasis-100-default, #1e6be6);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

/* ---- Confirmation guard banner ---- */
.confirm {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--db-warning-border-emphasis-100-default, #ec9a00);
  background: var(--db-warning-bg-emphasis-20-default, #fff3d6);
  color: var(--db-neutral-on-bg-basic-emphasis-100-default, #0d1b2a);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
}

.confirm__title {
  font-size: 1.1rem;
}

.confirm__warning {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  opacity: 0.85;
  max-width: 60ch;
}

.confirm__actions {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* ---- Phase status strip ---- */
.statusstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--db-neutral-border-emphasis-40-default, #334155);
  border-radius: 10px;
  background: var(--db-neutral-bg-basic-level-2-default, #16202b);
}

.statusstrip__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.statusstrip__item--hint {
  margin-left: auto;
  text-align: right;
  max-width: 42ch;
}

.statusstrip__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

.statusstrip__value {
  font-weight: 700;
}

.statusstrip__value--ok {
  color: var(--db-successful-on-bg-emphasis-100-default, #6cc24a);
}

.statusstrip__value--warn {
  color: var(--db-warning-on-bg-emphasis-100-default, #ec9a00);
}

/* ---- Scoped light high-contrast STAGE theme (projector in a lit room) ---- */
/* Applies ONLY within [data-surface="stage"] — bigger, projector-legible type.
   (Colors come from the global light theme; the Stage just scales up.) */
[data-surface="stage"] .matchup {
  font-size: clamp(1.3rem, 2.4vw, 2rem);
}

[data-surface="stage"] .fighter__name {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
}

[data-surface="stage"] .stage__narrative {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
}

.stage-hint {
  text-align: center;
  font-size: 1.2rem;
  opacity: 0.7;
  margin: 0 0 1rem;
}

/* ---- Upload completion cue ---- */
.uploaded-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 800;
  color: var(--db-successful-on-bg-emphasis-100-default, #3f9c35);
  animation: cuePop 0.35s ease;
}

@keyframes cuePop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- Stage reveal fade-in (after the narrative types out) ---- */
.stage__reveal {
  animation: revealFade 0.5s ease both;
}

@keyframes revealFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Role navigation + surface sub-tabs ---- */
.rolenav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.rolenav__hint {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-right: 0.25rem;
}

.stagetabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* ---- Guided card builder ---- */
.buildertabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.builder {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.builder__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.builder__hint {
  margin: 0.1rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--db-neutral-on-bg-basic-emphasis-80-default, #33465c);
  opacity: 0.9;
}

.builder__preview {
  margin-top: 0.9rem;
}

/* ---- Battle list (right panel on the Stage) ---- */
.battlelist {
  border: 1px solid var(--db-neutral-border-emphasis-40-default, #c3ccd6);
  border-radius: 12px;
  padding: 1rem;
  background: var(--db-neutral-bg-basic-level-2-default, #fff);
}

.battlelist__scroll {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 60vh;
  overflow-y: auto;
}

.battlerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--db-neutral-bg-basic-level-3-default, #eef2f6);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.battlerow:hover:not(:disabled) {
  border-color: var(--db-informational-border-emphasis-100-default, #1e6be6);
}

.battlerow:disabled {
  opacity: 0.6;
  cursor: default;
}

.battlerow--on {
  border-color: var(--db-brand-origin-default, #ec0016);
  background: #ffe6e8;
}

.battlerow__teams {
  font-weight: 600;
  font-size: 0.95rem;
}

.battlerow__vs {
  opacity: 0.5;
  margin: 0 0.1rem;
}

.battlerow__dmg {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.battlerow__dmg.pos {
  color: var(--db-successful-on-bg-emphasis-100-default, #2e7d32);
}

.battlerow__dmg.neg {
  color: var(--db-critical-on-bg-emphasis-100-default, #c0111f);
}

/* ---- Redesigned facilitator console ---- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--db-neutral-bg-basic-level-3-default, #eef2f6);
  border: 1px solid var(--db-neutral-border-emphasis-20-default, #dde3ea);
  font-size: 0.85rem;
}

.chip b {
  font-variant-numeric: tabular-nums;
}

.chip--phase {
  background: var(--db-brand-origin-default, #ec0016);
  color: #fff;
  border-color: transparent;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chip--toggle {
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}

.chip--toggle:hover {
  border-color: var(--db-neutral-on-bg-basic-emphasis-80-default, #33465c);
}

.chip--warn {
  background: var(--db-warning-bg-emphasis-20-default, #fff3d6);
  border-color: var(--db-warning-border-emphasis-100-default, #ec9a00);
}

/* The one primary action area */
.primcard {
  border: 2px solid var(--db-brand-origin-default, #ec0016);
}

.prim {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.prim__wait {
  margin: 0;
  font-size: 1.05rem;
}

.prim__wait--done {
  font-size: 1.3rem;
  font-weight: 800;
}

.prim__note {
  font-size: 0.85rem;
  opacity: 0.7;
}

.prim--running {
  flex-direction: row;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 700;
}

.spinner {
  width: 1.1rem;
  height: 1.1rem;
  border: 3px solid var(--db-neutral-border-emphasis-40-default, #c3ccd6);
  border-top-color: var(--db-brand-origin-default, #ec0016);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Tools drawer */
.tools__summary {
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  color: inherit;
}

.tools {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--db-neutral-border-emphasis-20-default, #dde3ea);
}

.tools__advanced {
  margin-top: 0.9rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--db-neutral-border-emphasis-20-default, #dde3ea);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---- Reset / danger zone (inside Tools drawer) ---- */
.dangerzone {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--db-critical-border-emphasis-100-default, #c0111f);
  border-radius: 8px;
  background: var(--db-critical-bg-emphasis-20-default, #fde7e9);
}

.dangerzone__label {
  display: block;
  font-weight: 800;
  color: var(--db-critical-on-bg-emphasis-100-default, #c0111f);
  margin-bottom: 0.5rem;
}

.dangerzone__buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}