@layer di-components;

:root {
   
   --di-seperator-color: var(--di-contrast-10pct);
   --di-base-color: light-dark(
      hsl(var(--di-base-hue, var(--di-primary-hue)) 0% 100%),
      hsl(var(--di-base-hue, var(--di-primary-hue)) 18% 11%)
   );
   --di-secondary-base-color: light-dark(
      hsl(var(--di-base-hue, var(--di-primary-hue)) 20% 98% / 0.8),
      hsl(var(--di-base-hue, var(--di-primary-hue)) 27% 6%)
   );

   --di-shade-2pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 61% 25% / 0.02);
   --di-shade-5pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 61% 25% / 0.05);
   --di-shade-10pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 57% 24% / 0.1);
   --di-shade-20pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 53% 23% / 0.16);
   --di-shade-30pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 50% 22% / 0.26);
   --di-shade-40pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 47% 21% / 0.38);
   --di-shade-50pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 45% 20% / 0.52);
   --di-shade-60pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 43% 19% / 0.6);
   --di-shade-70pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 42% 18% / 0.69);
   --di-shade-80pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 41% 17% / 0.83);
   --di-shade-90pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 40% 16% / 0.94);
   --di-shade: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 35% 15%);

   --di-tint-2pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 65% 85% / 0.03);
   --di-tint-5pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 65% 85% / 0.06);
   --di-tint-10pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 60% 80% / 0.14);
   --di-tint-20pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 64% 82% / 0.23);
   --di-tint-30pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 69% 84% / 0.32);
   --di-tint-40pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 73% 86% / 0.41);
   --di-tint-50pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 78% 88% / 0.5);
   --di-tint-60pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 82% 90% / 0.58);
   --di-tint-70pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 87% 92% / 0.69);
   --di-tint-80pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 91% 94% / 0.8);
   --di-tint-90pct: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 96% 96% / 0.9);
   --di-tint: hsl(var(--di-grayscale-hue, var(--di-primary-hue)) 100% 98%);

   
   --di-contrast-2pct: light-dark(var(--di-shade-2pct), var(--di-tint-2pct));
   --di-contrast-5pct: light-dark(var(--di-shade-5pct), var(--di-tint-5pct));
   --di-contrast-10pct: light-dark(var(--di-shade-10pct), var(--di-tint-10pct));
   --di-contrast-20pct: light-dark(var(--di-shade-20pct), var(--di-tint-20pct));
   --di-contrast-30pct: light-dark(var(--di-shade-30pct), var(--di-tint-30pct));
   --di-contrast-40pct: light-dark(var(--di-shade-40pct), var(--di-tint-40pct));
   --di-contrast-50pct: light-dark(var(--di-shade-50pct), var(--di-tint-50pct));
   --di-contrast-60pct: light-dark(var(--di-shade-60pct), var(--di-tint-60pct));
   --di-contrast-70pct: light-dark(var(--di-shade-70pct), var(--di-tint-70pct));
   --di-contrast-80pct: light-dark(var(--di-shade-80pct), var(--di-tint-80pct));
   --di-contrast-90pct: light-dark(var(--di-shade-90pct), var(--di-tint-90pct));
   --di-contrast: light-dark(var(--di-shade), var(--di-tint));

   
   --di-harmony-2pct: light-dark(var(--di-tint-2pct), var(--di-shade-2pct));
   --di-harmony-5pct: light-dark(var(--di-tint-5pct), var(--di-shade-5pct));
   --di-harmony-10pct: light-dark(var(--di-tint-10pct), var(--di-shade-10pct));
   --di-harmony-20pct: light-dark(var(--di-tint-20pct), var(--di-shade-20pct));
   --di-harmony-30pct: light-dark(var(--di-tint-30pct), var(--di-shade-30pct));
   --di-harmony-40pct: light-dark(var(--di-tint-40pct), var(--di-shade-40pct));
   --di-harmony-50pct: light-dark(var(--di-tint-50pct), var(--di-shade-50pct));
   --di-harmony-60pct: light-dark(var(--di-tint-60pct), var(--di-shade-60pct));
   --di-harmony-70pct: light-dark(var(--di-tint-70pct), var(--di-shade-70pct));
   --di-harmony-80pct: light-dark(var(--di-tint-80pct), var(--di-shade-80pct));
   --di-harmony-90pct: light-dark(var(--di-tint-90pct), var(--di-shade-90pct));
   --di-harmony: light-dark(var(--di-tint), var(--di-shade));

   
   --di-shade-header-text-color: hsl(var(--di-text-hue, var(--di-primary-hue)) 35% 15%);
   --di-shade-body-text-color: hsl(var(--di-text-hue, var(--di-primary-hue)) 40% 16% / 0.94);
   --di-shade-body-secondary-text-color: hsl(var(--di-text-hue, var(--di-primary-hue)) 41% 17% / 0.81);
   --di-shade-secondary-text-color: hsl(var(--di-text-hue, var(--di-primary-hue)) 42% 18% / 0.69);
   --di-shade-tertiary-text-color: hsl(var(--di-text-hue, var(--di-primary-hue)) 45% 20% / 0.52);
   --di-shade-disabled-text-color: hsl(var(--di-text-hue, var(--di-primary-hue)) 50% 22% / 0.26);

   --di-tint-header-text-color: hsl(var(--di-text-hue, var(--di-primary-hue)) 100% 98%);
   --di-tint-body-text-color: hsl(var(--di-text-hue, var(--di-primary-hue)) 96% 96% / 0.9);
   --di-tint-body-secondary-text-color: hsl(var(--di-text-hue, var(--di-primary-hue)) 91% 94% / 0.80);
   --di-tint-secondary-text-color: hsl(var(--di-text-hue, var(--di-primary-hue)) 87% 92% / 0.69);
   --di-tint-tertiary-text-color: hsl(var(--di-text-hue, var(--di-primary-hue)) 78% 88% / 0.5);
   --di-tint-disabled-text-color: hsl(var(--di-text-hue, var(--di-primary-hue)) 69% 84% / 0.32);

   --di-header-text-color: light-dark(var(--di-shade-header-text-color), var(--di-tint-header-text-color));
   --di-body-text-color: light-dark(var(--di-shade-body-text-color), var(--di-tint-body-text-color));
   --di-body-secondary-text-color: light-dark(var(--di-shade-body-secondary-text-color), var(--di-tint-body-secondary-text-color));
   --di-secondary-text-color: light-dark(var(--di-shade-secondary-text-color), var(--di-tint-secondary-text-color));
   --di-tertiary-text-color: light-dark(var(--di-shade-tertiary-text-color), var(--di-tint-tertiary-text-color));
   --di-disabled-text-color: light-dark(var(--di-shade-disabled-text-color), var(--di-tint-disabled-text-color));

   --di-harmony-header-text-color: light-dark(var(--di-tint-header-text-color), var(--di-shade-header-text-color));
   --di-harmony-body-text-color: light-dark(var(--di-tint-body-text-color), var(--di-shade-body-text-color));
   
   --di-harmony-body-secondary-text-color: var(--di-tint-body-secondary-text-color);
   --di-harmony-secondary-text-color: light-dark(var(--di-tint-secondary-text-color), var(--di-shade-secondary-text-color));
   --di-harmony-tertiary-text-color: light-dark(var(--di-tint-tertiary-text-color), var(--di-shade-tertiary-text-color));
   --di-harmony-disabled-text-color: light-dark(var(--di-tint-disabled-text-color), var(--di-shade-disabled-text-color));

   
   --di-primary-color-2pct: light-dark(hsl(var(--di-primary-hue) 100% 65% / 0.03), hsl(var(--di-primary-hue) 90% 75% / 0.03));
   --di-primary-color-5pct: light-dark(hsl(var(--di-primary-hue) 100% 65% / 0.07), hsl(var(--di-primary-hue) 90% 75% / 0.07));
   --di-primary-color-10pct: light-dark(hsl(var(--di-primary-hue) 100% 60% / 0.13), hsl(var(--di-primary-hue) 90% 75% / 0.13));
   
   --di-primary-color-20pct: light-dark(transparent, hsl(var(--di-primary-hue) 90% 75% / 0.23));
   --di-primary-color-50pct: light-dark(hsl(var(--di-primary-hue) 100% 49% / 0.6), hsl(var(--di-primary-hue) 90% 70% / 0.69));
   --di-primary-color: light-dark(hsl(var(--di-primary-hue) 90% 59%), hsl(var(--di-primary-hue) 75% 59%));
   --di-primary-text-color: light-dark(hsl(var(--di-primary-hue) 100% 43%), hsl(var(--di-primary-hue) 90% 80%));
   --di-primary-contrast-color: #fff;

   
   --di-red: 3 85% 49%;
   --di-red-dark: 3 75% 62%;
   --di-red-color-2pct: light-dark(hsl(var(--di-red) / 0.02), hsl(var(--di-red-dark) / 0.02));
   --di-red-color-5pct: light-dark(hsl(var(--di-red) / 0.05), hsl(var(--di-red-dark) / 0.05));
   --di-red-color-10pct: light-dark(hsl(var(--di-red) / 0.1), hsl(var(--di-red-dark) / 0.1));
   --di-red-color-20pct: light-dark(hsl(var(--di-red) / 0.22), hsl(var(--di-red-dark) / 0.22));
   --di-red-color-30pct: light-dark(hsl(var(--di-red) / 0.32), hsl(var(--di-red-dark) / 0.32));
   --di-red-color-40pct: light-dark(hsl(var(--di-red) / 0.41), hsl(var(--di-red-dark) / 0.41));
   --di-red-color-50pct: light-dark(hsl(var(--di-red) / 0.5), hsl(var(--di-red-dark) / 0.5));
   --di-red-color: light-dark(hsl(var(--di-red)), hsl(3 79% 49%));
   --di-red-text-color: light-dark(hsl(3 89% 42%), hsl(3 100% 80%));
   --di-red-contrast-color: #fff;

   
   --di-green: 160 84% 39%;
   --di-green-dark: 145 92% 51%;
   --di-green-color-2pct: light-dark(hsl(var(--di-green) / 0.02), hsl(var(--di-green-dark) / 0.02));
   --di-green-color-5pct: light-dark(hsl(var(--di-green) / 0.05), hsl(var(--di-green-dark) / 0.05));
   --di-green-color-10pct: light-dark(hsl(var(--di-green) / 0.1), hsl(var(--di-green-dark) / 0.1));
   --di-green-color-20pct: light-dark(hsl(var(--di-green) / 0.22), hsl(var(--di-green-dark) / 0.22));
   --di-green-color-30pct: light-dark(hsl(var(--di-green) / 0.32), hsl(var(--di-green-dark) / 0.32));
   --di-green-color-40pct: light-dark(hsl(var(--di-green) / 0.41), hsl(var(--di-green-dark) / 0.41));
   --di-green-color-50pct: light-dark(hsl(var(--di-green) / 0.5), hsl(var(--di-green-dark) / 0.5));
   --di-green-color: light-dark(hsl(var(--di-green)), hsl(145 72% 30%));
   --di-green-text-color: light-dark(hsl(161 85% 25%), hsl(145 64% 52%));
   --di-green-contrast-color: #fff;

   
   --di-blue: 214 100% 60%;
   --di-blue-dark: 214 90% 55%;
   --di-blue-color-2pct: light-dark(hsl(var(--di-blue) / 0.02), hsl(var(--di-blue-dark) / 0.02));
   --di-blue-color-5pct: light-dark(hsl(var(--di-blue) / 0.05), hsl(var(--di-blue-dark) / 0.05));
   --di-blue-color-10pct: light-dark(hsl(var(--di-blue) / 0.13), hsl(var(--di-blue-dark) / 0.13));
   --di-blue-color-20pct: light-dark(hsl(var(--di-blue) / 0.22), hsl(var(--di-blue-dark) / 0.22));
   --di-blue-color-30pct: light-dark(hsl(var(--di-blue) / 0.32), hsl(var(--di-blue-dark) / 0.32));
   --di-blue-color-40pct: light-dark(hsl(var(--di-blue) / 0.41), hsl(var(--di-blue-dark) / 0.41));
   --di-blue-color-50pct: light-dark(hsl(214 100% 49% / 0.76), hsl(214 90% 70% / 0.69));
   --di-blue-color: light-dark(hsl(214 100% 48%), hsl(214 90% 48%));
   --di-blue-text-color: light-dark(hsl(214 100% 43%), hsl(214 90% 77%));
   --di-blue-contrast-color: #fff;

   
   --di-yellow: 43 100% 60%;
   --di-yellow-dark: 43 90% 55%;
   --di-yellow-color-2pct: light-dark(hsl(var(--di-yellow) / 0.02), hsl(var(--di-yellow-dark) / 0.02));
   --di-yellow-color-5pct: light-dark(hsl(var(--di-yellow) / 0.05), hsl(var(--di-yellow-dark) / 0.05));
   --di-yellow-color-10pct: light-dark(hsl(var(--di-yellow) / 0.13), hsl(var(--di-yellow-dark) / 0.13));
   --di-yellow-color-20pct: light-dark(hsl(var(--di-yellow) / 0.22), hsl(var(--di-yellow-dark) / 0.22));
   --di-yellow-color-30pct: light-dark(hsl(var(--di-yellow) / 0.32), hsl(var(--di-yellow-dark) / 0.32));
   --di-yellow-color-40pct: light-dark(hsl(var(--di-yellow) / 0.41), hsl(var(--di-yellow-dark) / 0.41));
   --di-yellow-color-50pct: light-dark(hsl(43 100% 49% / 0.76), hsl(43 90% 70% / 0.69));
   --di-yellow-color: light-dark(hsl(43 100% 48%), hsl(43 90% 48%));
   --di-yellow-text-color: light-dark(hsl(43 100% 43%), hsl(43 90% 77%));
   --di-yellow-contrast-color: #fff;

   
   --di-pink: 330 85% 49%;
   --di-pink-dark: 330 75% 62%;
   --di-pink-color-2pct: light-dark(hsl(var(--di-pink) / 0.02), hsl(var(--di-pink-dark) / 0.02));
   --di-pink-color-5pct: light-dark(hsl(var(--di-pink) / 0.05), hsl(var(--di-pink-dark) / 0.05));
   --di-pink-color-10pct: light-dark(hsl(var(--di-pink) / 0.13), hsl(var(--di-pink-dark) / 0.13));
   --di-pink-color-20pct: light-dark(hsl(var(--di-pink) / 0.22), hsl(var(--di-pink-dark) / 0.22));
   --di-pink-color-30pct: light-dark(hsl(var(--di-pink) / 0.32), hsl(var(--di-pink-dark) / 0.32));
   --di-pink-color-40pct: light-dark(hsl(var(--di-pink) / 0.41), hsl(var(--di-pink-dark) / 0.41));
   --di-pink-color-50pct: light-dark(hsl(var(--di-pink) / 0.5), hsl(var(--di-pink-dark) / 0.5));
   --di-pink-color: light-dark(hsl(var(--di-pink)), hsl(330 79% 49%));
   --di-pink-text-color: light-dark(hsl(330, 89%, 42%), hsl(330 100% 80%));
   --di-pink-contrast-color: #fff;

   
   --di-purple: 262 100% 60%;
   --di-purple-dark: 262 90% 55%;
   --di-purple-color-2pct: light-dark(hsl(var(--di-purple) / 0.02), hsl(var(--di-purple-dark) / 0.02));
   --di-purple-color-5pct: light-dark(hsl(var(--di-purple) / 0.05), hsl(var(--di-purple-dark) / 0.05));
   --di-purple-color-10pct: light-dark(hsl(var(--di-purple) / 0.13), hsl(var(--di-purple-dark) / 0.13));
   --di-purple-color-20pct: light-dark(hsl(var(--di-purple) / 0.22), hsl(var(--di-purple-dark) / 0.22));
   --di-purple-color-30pct: light-dark(hsl(var(--di-purple) / 0.33), hsl(var(--di-purple-dark) / 0.33));
   --di-purple-color-40pct: light-dark(hsl(var(--di-purple) / 0.44), hsl(var(--di-purple-dark) / 0.44));
   --di-purple-color-50pct: light-dark(hsl(var(--di-purple) / 0.76), hsl(262 90% 70% / 0.69));
   --di-purple-color: light-dark(hsl(262 100% 48%), hsl(262 90% 48%));
   --di-purple-text-color: light-dark(hsl(262 100% 43%), hsl(262 90% 77%));
   --di-purple-contrast-color: #fff;

   
   --di-indigo: 243 75% 59%;
   --di-indigo-dark: 245 90% 55%;
   --di-indigo-color-2pct: light-dark(hsl(var(--di-indigo) / 0.02), hsl(var(--di-indigo-dark) / 0.02));
   --di-indigo-color-5pct: light-dark(hsl(var(--di-indigo) / 0.05), hsl(var(--di-indigo-dark) / 0.05));
   --di-indigo-color-10pct: light-dark(hsl(var(--di-indigo) / 0.13), hsl(var(--di-indigo-dark) / 0.13));
   --di-indigo-color-20pct: light-dark(hsl(var(--di-indigo) / 0.22), hsl(var(--di-indigo-dark) / 0.22));
   --di-indigo-color-30pct: light-dark(hsl(var(--di-indigo) / 0.33), hsl(var(--di-indigo-dark) / 0.33));
   --di-indigo-color-40pct: light-dark(hsl(var(--di-indigo) / 0.44), hsl(var(--di-indigo-dark) / 0.44));
   --di-indigo-color-50pct: light-dark(hsl(var(--di-indigo) / 0.6), hsl(245 90% 70% / 0.69));
   --di-indigo-color: light-dark(hsl(243 75% 59%), hsl(245 90% 48%));
   --di-indigo-text-color: light-dark(hsl(243 58% 51%), hsl(245 90% 77%));
   --di-indigo-contrast-color: #fff;

   
   --di-teal: 175 100% 60%;
   --di-teal-dark: 175 90% 55%;
   --di-teal-color-2pct: light-dark(hsl(var(--di-teal) / 0.02), hsl(var(--di-teal-dark) / 0.02));
   --di-teal-color-5pct: light-dark(hsl(var(--di-teal) / 0.05), hsl(var(--di-teal-dark) / 0.05));
   --di-teal-color-10pct: light-dark(hsl(var(--di-teal) / 0.13), hsl(var(--di-teal-dark) / 0.13));
   --di-teal-color-20pct: light-dark(hsl(var(--di-teal) / 0.22), hsl(var(--di-teal-dark) / 0.22));
   --di-teal-color-30pct: light-dark(hsl(var(--di-teal) / 0.33), hsl(var(--di-teal-dark) / 0.33));
   --di-teal-color-40pct: light-dark(hsl(var(--di-teal) / 0.44), hsl(var(--di-teal-dark) / 0.44));
   --di-teal-color-50pct: light-dark(hsl(175 100% 49% / 0.76), hsl(175 90% 70% / 0.69));
   --di-teal-color: light-dark(hsl(175 100% 48%), hsl(175 90% 48%));
   --di-teal-text-color: light-dark(hsl(175 100% 43%), hsl(175 90% 77%));
   --di-teal-contrast-color: #fff;

   
   --di-orange: 75% 0.183 55.934;
   --di-orange-color-2pct: oklch(var(--di-orange) / 0.02);
   --di-orange-color-5pct: oklch(var(--di-orange) / 0.05);
   --di-orange-color-10pct: oklch(var(--di-orange) / 0.13);
   --di-orange-color-20pct: oklch(var(--di-orange) / 0.22);
   --di-orange-color-30pct: oklch(var(--di-orange) / 0.33);
   --di-orange-color-40pct: oklch(var(--di-orange) / 0.44);
   --di-orange-color-50pct: oklch(var(--di-orange) / 0.5);
   --di-orange-color: oklch(var(--di-orange));
   --di-orange-text-color: oklch(64.6% 0.222 41.116);
   --di-orange-contrast-color: #fff;

   
   --di-success-color-2pct: var(--di-green-color-2pct);
   --di-success-color-5pct: var(--di-green-color-5pct);
   --di-success-color-10pct: var(--di-green-color-10pct);
   --di-success-color-50pct: var(--di-green-color-50pct);
   --di-success-color: var(--di-green-color);
   --di-success-text-color: var(--di-green-text-color);
   --di-success-contrast-color: var(--di-green-contrast-color);

   --di-error-color-2pct: var(--di-red-color-2pct);
   --di-error-color-5pct: var(--di-red-color-5pct);
   --di-error-color-10pct: var(--di-red-color-10pct);
   --di-error-color-50pct: var(--di-red-color-50pct);
   --di-error-color: var(--di-red-color);
   --di-error-text-color: var(--di-red-text-color);
   --di-error-contrast-color: var(--di-red-contrast-color);

   --di-warning-color-2pct: var(--di-yellow-color-2pct);
   --di-warning-color-5pct: var(--di-yellow-color-5pct);
   --di-warning-color-10pct: var(--di-yellow-color-10pct);
   --di-warning-color-50pct: var(--di-yellow-color-50pct);
   --di-warning-color: var(--di-yellow-color);
   --di-warning-text-color: var(--di-yellow-text-color);
   --di-warning-contrast-color: var(--di-yellow-contrast-color);

   --di-info-color-2pct: var(--di-blue-color-2pct);
   --di-info-color-5pct: var(--di-blue-color-5pct);
   --di-info-color-10pct: var(--di-blue-color-10pct);
   --di-info-color-50pct: var(--di-blue-color-50pct);
   --di-info-color: var(--di-blue-color);
   --di-info-text-color: var(--di-blue-text-color);
   --di-info-contrast-color: var(--di-blue-contrast-color);

   --di-logo-color: var(--di-primary-text-color);

   
   --di-rounded-none: 0px;
   --di-rounded-sm: 0.125rem;
   --di-rounded: 0.25rem;
   --di-rounded-md: 0.375rem;
   --di-rounded-lg: 0.5rem;
   --di-rounded-xl: 0.75rem;
   --di-rounded-2xl: 1rem;
   --di-rounded-full: 9999px;

   
   --di-text-xs: 0.75rem;
   --di-text-sm: 0.875rem;
   --di-text-base: 1rem;
   --di-text-lg: 1.125rem;
   --di-text-xl: 1.25rem;
   --di-text-2xl: 1.5rem;
   --di-text-3xl: 1.875rem;
   --di-text-4xl: 2.25rem;
   --di-text-5xl: 3rem;
   --di-text-6xl: 3.75rem;

   --di-leading-3: 0.75rem;
   --di-leading-4: 1rem;
   --di-leading-5: 1.25rem;
   --di-leading-6: 1.5rem;
   --di-leading-7: 1.75rem;
   --di-leading-8: 2rem;
   --di-leading-9: 2.25rem;
   --di-leading-10: 2.5rem;

   --di-font-normal: 400;
   --di-font-medium: 500;
   --di-font-semibold: 600;
   --di-font-bold: 700;
   --di-font-extrabold: 800;
   --di-font-black: 900;

   
   --di-font-size-xxs: 0.75rem;
   --di-font-size-xs: 0.8125rem;
   --di-font-size-s: 0.875rem;
   --di-font-size-m: 1rem;
   --di-line-height-xs: 1.25;
   --di-radius-s: 0.25em;
   --di-radius-m: 0.25em;

   --di-tracking-tighter: -0.05em;
   --di-tracking-tight: -0.025em;
   --di-tracking-normal: 0em;
   --di-tracking-wide: 0.025em;
   --di-tracking-wider: 0.05em;
   --di-tracking-widest: 0.1em;

   
   --di-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --di-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   --di-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --di-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   --di-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --di-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

   
   --di-space-xs: 0.25rem;
   --di-space-sm: 0.5rem;
   --di-space-md: 1rem;
   --di-space-lg: 1.5rem;
   --di-space-xl: 2.5rem;

   --di-size-xs: 1.5rem;
   --di-size-sm: 1.875rem;
   --di-size-md: 2.125rem;
   --di-size-lg: 2.5rem;
   --di-size-xl: 3.25rem;

   --di-content-xs: 20rem;
   --di-content-sm: 24rem;
   --di-content-md: 28rem;
   --di-content-lg: 32rem;
   --di-content-xl: 36rem;
   --di-content-2xl: 42rem;
   --di-content-3xl: 48rem;
   --di-content-4xl: 56rem;
   --di-content-5xl: 64rem;
   --di-content-6xl: 72rem;
   --di-content-7xl: 80rem;

   --di-screen-sm: 640px;
   --di-screen-md: 768px;
   --di-screen-lg: 1024px;
   --di-screen-xl: 1280px;
   --di-screen-2xl: 1536px;

   
   --di-focus-outline: 2px solid var(--di-primary-color-50pct);

   
   --di-field-bg-color: transparent;
   --di-field-font-weight: var(--di-font-medium);
   --di-field-border-color: var(--di-contrast-20pct);
   --di-field-border-radius: var(--di-rounded);
   --di-field-border-width: 1px;
   --di-field-hover-bg-color: transparent;
   --di-field-hover-border-color: var(--di-contrast-30pct);
   --di-field-focus-bg-color: transparent;
   --di-field-focus-border-color: var(--di-primary-color-50pct);
   --di-field-disabled-border-color: var(--di-contrast-10pct);
   --di-field-disabled-color: var(--di-tertiary-text-color);
   --di-field-placeholder-color: var(--di-secondary-text-color);

   --di-grid-head-bg-color: light-dark(
      hsl(var(--di-grayscale-hue, var(--di-primary-hue)), 65%, 99%),
      hsl(var(--di-grayscale-hue, var(--di-primary-hue)), 19%, 13%)
   );
}


html[theme~='dark'] {
   color-scheme: dark;

   --di-red: var(--di-red-dark);
   --di-green: var(--di-green-dark);
   --di-blue: var(--di-blue-dark);
   --di-yellow: var(--di-yellow-dark);
   --di-pink: var(--di-pink-dark);
   --di-purple: var(--di-purple-dark);
   --di-indigo: var(--di-indigo-dark);
   --di-teal: var(--di-teal-dark);
}
html {
  -moz-tab-size: 4;
  tab-size: 4;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}


@scope (:root, [data-di-slot-target], [data-di-slot])
   to (:scope > [data-di-projected], :scope [data-di-light-dom] > :not([data-di-slot-target], [data-di-slot])) {
   body,
   #outlet {
     height: 100vh;
     width: 100%;
     margin: 0;
     overflow: hidden;
   }

   

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



   hr {
     height: 0;
     color: inherit;
   }

   abbr[title] {
     text-decoration: underline dotted;
   }

   b,
   strong {
     font-weight: bolder;
   }

   code,
   kbd,
   pre,
   samp {
     font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
     font-size: 1em;
   }

   small {
     font-size: 80%;
   }

   sub,
   sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
   }

   sub {
     bottom: -0.25em;
   }

   sup {
     top: -0.5em;
   }

   table {
     text-indent: 0;
     border-color: inherit;
   }

   button,
   input,
   optgroup,
   select,
   textarea {
     font-family: inherit;
     font-size: 100%;
     line-height: 1.15;
     margin: 0;
   }

   button,
   select {
     text-transform: none;
   }

   [type='button'],
   [type='reset'],
   [type='submit'],
   button {
     -webkit-appearance: button;
   }

   ::-moz-focus-inner {
     border-style: none;
     padding: 0;
   }

   :-moz-focusring {
     outline: 1px dotted ButtonText;
   }

   :-moz-ui-invalid {
     box-shadow: none;
   }

   legend {
     padding: 0;
   }

   progress {
     vertical-align: baseline;
   }

   ::-webkit-inner-spin-button,
   ::-webkit-outer-spin-button {
     height: auto;
   }

   [type='search'] {
     -webkit-appearance: textfield;
     outline-offset: -2px;
   }

   ::-webkit-search-decoration {
     -webkit-appearance: none;
   }

   ::-webkit-file-upload-button {
     -webkit-appearance: button;
     font: inherit;
   }

   summary {
     display: list-item;
   }
}
:where(:root) {
   --aura-accent-color-light: hsl(var(--di-primary-hue, 221) 83% 53%);
   --aura-accent-color-dark: hsl(var(--di-primary-hue, 221) 90% 66%);
}

:root {
   --di-font-size-xxs: var(--aura-font-size-xs);
   --di-font-size-xs: var(--aura-font-size-xs);
   --di-font-size-s: var(--aura-font-size-s);
   --di-font-size-m: var(--aura-font-size-m);
   --di-line-height-xs: var(--aura-line-height-xs);
   
   --di-heading-1-line-height: round(var(--aura-line-height-xl) * 1.25, 0.125rem);
   --di-heading-text-wrap: balance;
   --di-radius-s: var(--vaadin-radius-s);
   --di-radius-m: var(--vaadin-radius-m);

   
   --di-base-color: var(--aura-surface-color-solid);
   --di-secondary-base-color: var(--aura-background-color);
   --di-seperator-color: var(--vaadin-border-color-secondary);
   --di-field-border-radius: var(--vaadin-radius-m);
   --di-field-border-color: var(--vaadin-border-color);
   --di-focus-outline: var(--vaadin-focus-ring-width, 2px) solid var(--vaadin-focus-ring-color);

   
   --di-header-text-color: var(--vaadin-text-color);
   --di-body-text-color: var(--vaadin-text-color);
   --di-body-secondary-text-color: var(--vaadin-text-color-secondary);
   --di-secondary-text-color: var(--vaadin-text-color-secondary);
   --di-tertiary-text-color: color-mix(in srgb, var(--vaadin-text-color-secondary) 75%, transparent);
   --di-disabled-text-color: var(--vaadin-text-color-disabled);

   
   --di-contrast-2pct: color-mix(in srgb, var(--aura-neutral) 2%, transparent);
   --di-contrast-5pct: color-mix(in srgb, var(--aura-neutral) 5%, transparent);
   --di-contrast-10pct: color-mix(in srgb, var(--aura-neutral) 10%, transparent);
   --di-contrast-20pct: color-mix(in srgb, var(--aura-neutral) 20%, transparent);
   --di-contrast-30pct: color-mix(in srgb, var(--aura-neutral) 30%, transparent);
   --di-contrast-40pct: color-mix(in srgb, var(--aura-neutral) 40%, transparent);
   --di-contrast-50pct: color-mix(in srgb, var(--aura-neutral) 50%, transparent);
   --di-contrast-60pct: color-mix(in srgb, var(--aura-neutral) 60%, transparent);
   --di-contrast-70pct: color-mix(in srgb, var(--aura-neutral) 70%, transparent);
   --di-contrast-80pct: color-mix(in srgb, var(--aura-neutral) 80%, transparent);
   --di-contrast-90pct: color-mix(in srgb, var(--aura-neutral) 90%, transparent);
   --di-contrast: var(--aura-neutral);

   
   --di-primary-color-2pct: color-mix(in srgb, var(--aura-accent-color) 3%, transparent);
   --di-primary-color-5pct: color-mix(in srgb, var(--aura-accent-color) 7%, transparent);
   --di-primary-color-10pct: color-mix(in srgb, var(--aura-accent-color) 13%, transparent);
   --di-primary-color-20pct: color-mix(in srgb, var(--aura-accent-color) 23%, transparent);
   --di-primary-color-50pct: color-mix(in srgb, var(--aura-accent-color) 60%, transparent);
   --di-primary-color: var(--aura-accent-color);
   --di-primary-text-color: var(--aura-accent-text-color);
   --di-primary-contrast-color: var(--aura-accent-contrast-color);

   
   --di-red-color-2pct: color-mix(in srgb, var(--aura-red) 2%, transparent);
   --di-red-color-5pct: color-mix(in srgb, var(--aura-red) 5%, transparent);
   --di-red-color-10pct: color-mix(in srgb, var(--aura-red) 10%, transparent);
   --di-red-color-20pct: color-mix(in srgb, var(--aura-red) 22%, transparent);
   --di-red-color-30pct: color-mix(in srgb, var(--aura-red) 32%, transparent);
   --di-red-color-40pct: color-mix(in srgb, var(--aura-red) 41%, transparent);
   --di-red-color-50pct: color-mix(in srgb, var(--aura-red) 50%, transparent);
   --di-red-color: var(--aura-red);
   --di-red-text-color: var(--aura-red-text);

   --di-green-color-2pct: color-mix(in srgb, var(--aura-green) 2%, transparent);
   --di-green-color-5pct: color-mix(in srgb, var(--aura-green) 5%, transparent);
   --di-green-color-10pct: color-mix(in srgb, var(--aura-green) 10%, transparent);
   --di-green-color-20pct: color-mix(in srgb, var(--aura-green) 22%, transparent);
   --di-green-color-30pct: color-mix(in srgb, var(--aura-green) 32%, transparent);
   --di-green-color-40pct: color-mix(in srgb, var(--aura-green) 41%, transparent);
   --di-green-color-50pct: color-mix(in srgb, var(--aura-green) 50%, transparent);
   --di-green-color: var(--aura-green);
   --di-green-text-color: var(--aura-green-text);

   --di-blue-color-2pct: color-mix(in srgb, var(--aura-blue) 2%, transparent);
   --di-blue-color-5pct: color-mix(in srgb, var(--aura-blue) 5%, transparent);
   --di-blue-color-10pct: color-mix(in srgb, var(--aura-blue) 13%, transparent);
   --di-blue-color-20pct: color-mix(in srgb, var(--aura-blue) 22%, transparent);
   --di-blue-color-30pct: color-mix(in srgb, var(--aura-blue) 32%, transparent);
   --di-blue-color-40pct: color-mix(in srgb, var(--aura-blue) 41%, transparent);
   --di-blue-color-50pct: color-mix(in srgb, var(--aura-blue) 76%, transparent);
   --di-blue-color: var(--aura-blue);
   --di-blue-text-color: var(--aura-blue-text);

   --di-yellow-color-2pct: color-mix(in srgb, var(--aura-yellow) 2%, transparent);
   --di-yellow-color-5pct: color-mix(in srgb, var(--aura-yellow) 5%, transparent);
   --di-yellow-color-10pct: color-mix(in srgb, var(--aura-yellow) 13%, transparent);
   --di-yellow-color-20pct: color-mix(in srgb, var(--aura-yellow) 22%, transparent);
   --di-yellow-color-30pct: color-mix(in srgb, var(--aura-yellow) 32%, transparent);
   --di-yellow-color-40pct: color-mix(in srgb, var(--aura-yellow) 41%, transparent);
   --di-yellow-color-50pct: color-mix(in srgb, var(--aura-yellow) 76%, transparent);
   --di-yellow-color: var(--aura-yellow);
   --di-yellow-text-color: var(--aura-yellow-text);

   --di-purple-color-2pct: color-mix(in srgb, var(--aura-purple) 2%, transparent);
   --di-purple-color-5pct: color-mix(in srgb, var(--aura-purple) 5%, transparent);
   --di-purple-color-10pct: color-mix(in srgb, var(--aura-purple) 13%, transparent);
   --di-purple-color-20pct: color-mix(in srgb, var(--aura-purple) 22%, transparent);
   --di-purple-color-30pct: color-mix(in srgb, var(--aura-purple) 33%, transparent);
   --di-purple-color-40pct: color-mix(in srgb, var(--aura-purple) 44%, transparent);
   --di-purple-color-50pct: color-mix(in srgb, var(--aura-purple) 76%, transparent);
   --di-purple-color: var(--aura-purple);
   --di-purple-text-color: var(--aura-purple-text);

   --di-orange-color-2pct: color-mix(in srgb, var(--aura-orange) 2%, transparent);
   --di-orange-color-5pct: color-mix(in srgb, var(--aura-orange) 5%, transparent);
   --di-orange-color-10pct: color-mix(in srgb, var(--aura-orange) 13%, transparent);
   --di-orange-color-20pct: color-mix(in srgb, var(--aura-orange) 22%, transparent);
   --di-orange-color-30pct: color-mix(in srgb, var(--aura-orange) 33%, transparent);
   --di-orange-color-40pct: color-mix(in srgb, var(--aura-orange) 44%, transparent);
   --di-orange-color-50pct: color-mix(in srgb, var(--aura-orange) 50%, transparent);
   --di-orange-color: var(--aura-orange);
   --di-orange-text-color: var(--aura-orange-text);
}
@layer di-components {
   

   vaadin-button:is([theme~='xs'], [theme~='extra-small']),
   vaadin-menu-bar-button:is([theme~='xs'], [theme~='extra-small']) {
      --aura-base-size: 12;
      font-size: var(--aura-font-size-xs);
      --di-icon-size: var(--di-text-sm);
   }

   vaadin-button:is([theme~='xxs'], [theme~='super-small']),
   vaadin-menu-bar-button:is([theme~='xxs'], [theme~='super-small']) {
      --aura-base-size: 10;
      font-size: var(--aura-font-size-xs);
      --di-icon-size: var(--di-text-xs);
   }

   
   :is(vaadin-button, vaadin-menu-bar-button)[theme~='icon'] {
      --vaadin-button-padding: var(--vaadin-padding-block-container);
      --vaadin-button-min-width: 0;
      
      --vaadin-button-gap: 0;
      min-width: 0;
   }

   
   vaadin-menu-bar-button[theme~='icon']::part(suffix) {
      display: none;
   }

   
   vaadin-button:has(> [slot='prefix'])::part(prefix) {
      display: flex;
   }

   vaadin-button[theme~='hide-icon'] > [part='icon-wrapper'] {
      display: none !important;
   }

   vaadin-button[theme~='no-hover']::before {
      background-color: transparent !important;
   }

   vaadin-button[theme~='menu-item'] {
      --vaadin-button-padding: 0 1.4rem 0 1.5rem;
      --vaadin-button-height: 36px;
      --vaadin-button-font-size: var(--aura-font-size-s);
      --vaadin-button-font-weight: var(--aura-font-weight-medium);
      --vaadin-button-text-color: var(--vaadin-text-color);
   }

   vaadin-button[theme~='menu-item'] > [part='icon-wrapper'] {
      color: var(--vaadin-text-color-secondary);
   }

   vaadin-button[theme~='menu-item']::part(label) {
      order: 1;
   }

   vaadin-button[theme~='menu-item']::part(prefix) {
      order: 2;
      margin-inline-start: auto;
   }

   vaadin-button[theme~='menu-item']::part(suffix) {
      display: none;
   }

   vaadin-button[theme~='underline']::part(label) {
      text-decoration: underline;
      text-underline-offset: 2px;
   }

   vaadin-menu-bar-button[theme~='auto-height'],
   vaadin-menu-bar-button[theme~='auto-height'] > vaadin-menu-bar-item {
      height: fit-content;
   }

   

   
   :is(vaadin-text-field, vaadin-email-field, vaadin-password-field, vaadin-number-field, vaadin-integer-field,
      vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-time-picker, vaadin-date-time-picker,
      vaadin-multi-select-combo-box, vaadin-select)[theme*='side-label'] {
      grid-template:
         'label baseline' 0
         'label input' auto
         '. helper' auto
         '. error' auto / var(--di-field-label-width, 135px) minmax(0, 1fr);
   }

   vaadin-custom-field[theme*='side-label'] {
      grid-template:
         'label baseline' 0
         'label input' auto
         '. helper' auto
         '. error' auto / var(--di-label-width, 6.5rem) minmax(0, 1fr);
   }

   :is(vaadin-text-field, vaadin-email-field, vaadin-password-field, vaadin-number-field, vaadin-integer-field,
      vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-time-picker, vaadin-date-time-picker,
      vaadin-multi-select-combo-box, vaadin-select, vaadin-custom-field)[theme*='side-label']::part(label) {
      align-self: center;
      margin: 0;
      padding-inline-end: var(--vaadin-gap-s);
   }

   vaadin-date-time-picker[theme*='side-label']::part(input-fields) {
      flex-direction: column;
      --vaadin-field-default-width: 100%;
   }

   :is(vaadin-text-field, vaadin-number-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker,
      vaadin-date-time-picker, vaadin-multi-select-combo-box, vaadin-select).indented::part(input-field) {
      margin-inline-start: calc(var(--di-field-indent, 0) * 20px);
   }

   :is(vaadin-text-field, vaadin-email-field, vaadin-password-field, vaadin-number-field, vaadin-integer-field,
      vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-time-picker,
      vaadin-multi-select-combo-box, vaadin-select)[theme*='borderless']::part(input-field) {
      --vaadin-input-field-border-width: 0px;
      box-shadow: none;
   }

   vaadin-select[theme*='stretch']::part(input-field) {
      width: var(--di-field-width, 150px);
   }

   vaadin-select[theme*='stretch'][theme*='side-label']::part(input-field) {
      justify-self: end;
   }

   vaadin-select[theme*='no-error']::part(error-message),
   vaadin-select[theme*='no-helper']::part(helper-text) {
      display: none;
   }

   vaadin-combo-box::part(overlay) {
      min-width: var(--di-combo-box-overlay-min-width, 200px);
   }

   vaadin-multi-select-combo-box::part(overlay) {
      min-width: var(--di-multi-select-combo-box-overlay-min-width, 200px);
   }

   vaadin-custom-field:is([data-nested-keyword-select], [data-structure-select])::part(input-fields) {
      display: flex;
      flex-direction: column;
      gap: var(--vaadin-gap-xs);
      width: 100%;
   }

   vaadin-radio-group[theme*='centered']::part(label),
   vaadin-radio-group[theme*='centered']::part(group-field) {
      justify-self: center;
   }

   

   vaadin-grid::part(no-padding) {
      --vaadin-grid-cell-padding: var(--vaadin-padding-xs) 0;
   }

   vaadin-grid::part(padding-md) {
      --vaadin-grid-cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-m);
   }

   vaadin-grid::part(padding-sm) {
      --vaadin-grid-cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
   }

   vaadin-grid::part(padding-xs) {
      --vaadin-grid-cell-padding: var(--vaadin-padding-xs);
   }

   vaadin-grid > vaadin-grid-cell-content[slot^='vaadin-grid-header-cell-content'] {
      display: flex;
      align-items: center;
   }

   vaadin-grid > vaadin-grid-cell-content[style*='start'] {
      display: flex;
      justify-content: flex-start;
   }

   vaadin-grid > vaadin-grid-cell-content[style*='end'] {
      display: flex;
      justify-content: flex-end;
   }

   vaadin-grid > vaadin-grid-cell-content[style*='center'] {
      display: flex;
      justify-content: center;
   }

   vaadin-grid::part(content-end) {
      justify-content: flex-end;
      text-align: end;
   }

   vaadin-grid::part(content-start) {
      justify-content: flex-start;
      text-align: start;
   }

   vaadin-grid::part(content-center) {
      justify-content: center;
      text-align: center;
   }

   vaadin-grid::part(highlight-contrast) {
      background-color: var(--vaadin-background-container);
   }

   vaadin-grid::part(disabled) {
      opacity: 0.6;
      filter: grayscale(100%);
   }

   vaadin-grid-tree-toggle {
      --vaadin-grid-tree-toggle-level-offset: 1.5rem;
   }

   

   vaadin-dialog[theme*='align-top']::part(overlay) {
      margin-top: 5rem;
      margin-bottom: auto;
   }

   vaadin-dialog[theme*='blur']::part(backdrop) {
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
   }

   vaadin-dialog[theme*='padding-md']::part(content) {
      padding: var(--vaadin-padding-m);
   }

   vaadin-dialog[theme*='padding-sm']::part(content) {
      padding: var(--vaadin-padding-s);
   }

   vaadin-dialog[theme*='padding-none']::part(content) {
      padding: 0;
   }

   vaadin-dialog[theme*='no-padding-bottom']::part(content) {
      padding-bottom: 0;
   }

   vaadin-dialog[theme*='no-padding-top']::part(content) {
      padding-top: 0;
   }

   vaadin-dialog[theme*='no-padding-left']::part(content) {
      padding-left: 0;
   }

   vaadin-dialog[theme*='no-padding-right']::part(content) {
      padding-right: 0;
   }

   vaadin-dialog[theme*='border-none']::part(overlay) {
      border: 0;
   }

   vaadin-notification-card[theme*='no-padding']::part(content) {
      padding: 0;
   }

   vaadin-notification-card[theme*='unclosable']::part(overlay) {
      pointer-events: none;
      user-select: none;
   }

   vaadin-login-form::part(form) {
      max-width: initial;
      width: 100%;
      padding: 0;
      background: var(--di-login-form-wrapper-bg-color, transparent);
      box-shadow: none;
      border: 0;
   }

   vaadin-login-form[theme='no-footer']::part(footer) {
      display: none;
   }

   vaadin-login-form > form {
      display: flex;
      flex-direction: column;
      gap: var(--vaadin-gap-s);
   }

   

   vaadin-tabs[theme*='no-line'],
   vaadin-tabsheet[theme*='no-line']::part(tabs-container) {
      box-shadow: none;
   }

   vaadin-tabsheet::part(content) {
      padding: 0;
   }

   vaadin-tabs[theme*='background'] {
      background-color: var(--vaadin-background-container);
      border-radius: var(--vaadin-radius-m);
   }

   vaadin-tabs[theme*='icon'] > vaadin-tab {
      padding: var(--di-tab-padding, var(--vaadin-padding-xs) var(--vaadin-padding-s));
   }

   vaadin-tabs:is([theme~='toggle'], [theme~='toggle-group']) {
      border: 1px solid var(--vaadin-border-color-secondary);
      border-radius: var(--vaadin-radius-l);
      box-shadow: none;
      padding: 0 var(--vaadin-padding-xs);
   }

   vaadin-tabs[theme~='toggle'] > vaadin-tab[selected] {
      color: var(--aura-accent-contrast-color);
      background-color: var(--aura-accent-color);
   }

   vaadin-tab:is([theme~='icon-primary-50pct'], [theme~='icon-warning-50pct'], [theme~='icon-success-50pct'], [theme~='icon-success']) {
      --di-icon-color: var(--di-secondary-text-color);
   }

   vaadin-tab[selected][theme~='icon-primary-50pct'] {
      --di-icon-color: var(--di-primary-color-50pct);
   }

   vaadin-tab[selected][theme~='icon-warning-50pct'] {
      --di-icon-color: var(--di-warning-color-50pct);
   }

   vaadin-tab[selected][theme~='icon-success-50pct'] {
      --di-icon-color: var(--di-success-color-50pct);
   }

   vaadin-tab[selected][theme~='icon-success'] {
      --di-icon-color: var(--di-success-color);
   }

   vaadin-tab[selected][theme~='icon-error-50pct'] {
      --di-icon-color: var(--di-error-color-50pct);
   }

   vaadin-tab[theme~='color-selected'] {
      --di-badge-bg-color: var(--di-contrast-10pct);
      --di-badge-color: var(--di-secondary-text-color);
   }

   vaadin-tab[selected][theme~='color-selected'] {
      --di-badge-bg-color: var(--di-colored-10pct);
      --di-badge-color: var(--di-colored-text);
   }

   vaadin-menu-bar[theme~='items-centered']::part(container) {
      align-items: center;
   }

   vaadin-list-box[theme*='grid']::part(items) {
      display: flex;
      gap: var(--vaadin-gap-s);
      flex-wrap: wrap;
   }

   vaadin-upload[theme*='compact'] {
      padding: 0;
      border: 0;
      width: initial;
      background: none;
   }

   vaadin-upload[theme*='no-drop-label']::part(drop-label) {
      display: none;
   }

   vaadin-upload[theme~='no-file-list'] > vaadin-upload-file-list {
      display: none;
   }

   vaadin-upload[theme~='buttons-end']::part(primary-buttons) {
      display: flex;
      justify-content: flex-end;
   }

   

   
   di-stack-layout,
   di-stack-item {
      --di-stack-layout-gap: var(--vaadin-gap-l);
      --di-stack-layout-radius: var(--vaadin-radius-l);
      --di-stack-layout-border-color: var(--vaadin-border-color-secondary);
      --di-stack-layout-background-color: transparent;
      --di-stack-layout-padding: var(--vaadin-padding-l);
      --di-stack-layout-padding-half: var(--vaadin-padding-s);
      --di-stack-layout-footer-color: var(--vaadin-text-color-secondary);
      --di-stack-item-header-font-size: var(--aura-font-size-l);
      --di-stack-item-header-font-weight: var(--aura-font-weight-semibold);
      --di-stack-item-text-color: var(--vaadin-text-color-secondary);
   }

   
   di-form-layout::part(label) {
      color: var(--vaadin-text-color);
      font-weight: var(--aura-font-weight-medium);
   }

   di-form-layout::part(description) {
      color: var(--vaadin-text-color-secondary);
      font-weight: var(--aura-font-weight-regular);
   }
}

[data-di-app-layout] {
   --di-app-layout-padding: 0 var(--aura-app-layout-inset) var(--aura-app-layout-inset) 0;
   --di-app-layout-background-color: transparent;
   --di-app-layout-border-radius: 0;
   --di-app-layout-box-shadow: none;
}


[data-di-app-layout] #body > #content {
   color-scheme: var(--aura-content-color-scheme);
   color: var(--vaadin-text-color);
   background: linear-gradient(var(--aura-surface-color), var(--aura-surface-color)), var(--aura-app-background);
   background-clip: padding-box;
   background-origin: border-box;
   border: var(--aura-app-layout-border-width) solid var(--vaadin-border-color-secondary);
   border-radius: var(--aura-app-layout-radius);
}


@media (width <= 800px), (height <= 600px) {
   [data-di-app-layout] #body > #content {
      border-width: 0;
      border-radius: 0;
   }
}

[data-di-app-layout] #body > di-header {
   height: auto;
   min-height: calc(var(--vaadin-button-height, 2rem) + var(--aura-app-layout-inset));
   padding: max(var(--aura-app-layout-inset), var(--vaadin-padding-s)) var(--aura-app-layout-inset) var(--vaadin-padding-s)
      var(--vaadin-padding-s);
}


[data-di-app-layout] > [part~='app-layout'] > di-sidemenu {
   --di-sidemenu-background-color: transparent;
   --di-sidemenu-thumb-color: var(--vaadin-border-color-secondary);
   --di-sidemenu-body-padding: 0 var(--vaadin-padding-m);
   --di-sidemenu-items-gap: var(--vaadin-gap-l);
}


[data-di-app-layout] di-sidemenu {
   
   --di-sidemenu-item-height: calc(var(--aura-line-height-m, 1.25rem) + 2 * var(--vaadin-padding-block-container) + 2px);
   --di-sidemenu-item-padding: 0 var(--vaadin-padding-inline-container);
   --di-sidemenu-item-border-radius: var(--vaadin-radius-m);
   --di-sidemenu-item-font-size: var(--aura-font-size-m);
   --di-sidemenu-item-font-weight: var(--aura-font-weight-medium);
   --di-sidemenu-item-icon-size: 1.125rem;
   --di-sidemenu-item-color: var(--vaadin-text-color-secondary);
   --di-sidemenu-item-icon-color: currentColor;
   --di-sidemenu-item-hover-color: var(--vaadin-text-color);
   --di-sidemenu-item-hover-background-color: transparent;
   --di-sidemenu-item-active-color: var(--aura-accent-text-color);
   --di-sidemenu-item-active-icon-color: var(--aura-accent-text-color);
   --di-sidemenu-item-active-background-color: var(--aura-surface-color);

   --di-sidemenu-group-color: var(--vaadin-text-color-secondary);
   --di-sidemenu-group-icon-color: var(--vaadin-text-color-secondary);
   --di-sidemenu-group-font-size: var(--aura-font-size-s);
   --di-sidemenu-group-font-weight: var(--aura-font-weight-medium);
   --di-sidemenu-group-gap: var(--vaadin-gap-s);
   --di-sidemenu-group-items-gap: var(--vaadin-gap-xs);
   --di-sidemenu-footer-items-gap: var(--vaadin-gap-xs);

   --di-sidemenu-accordion-icon-color: var(--vaadin-text-color-secondary);
   --di-sidemenu-accordion-label-color: var(--vaadin-text-color-secondary);
}

[data-di-app-layout] di-sidemenu :is(di-sidemenu-item, di-sidemenu-item-button)::part(link) {
   --aura-surface-level: 4;
   --aura-surface-opacity: 0.5;
   box-sizing: border-box;
   border: 1px solid transparent;
   background-clip: padding-box;
   transition: color 80ms;
}

[data-di-app-layout] di-sidemenu di-sidemenu-item[active]::part(link) {
   border-color: var(--vaadin-border-color-secondary);
}


[data-di-app-layout] di-sidemenu-group::part(head) {
   padding-inline: var(--vaadin-padding-inline-container);
}


[data-di-app-layout] di-sidemenu-header {
   --di-sidemenu-header-padding: var(--vaadin-padding-s) 0;
   --di-sidemenu-header-gap: var(--vaadin-gap-s);
   --di-logo-size: 2rem;
   --di-logo-text-size: var(--aura-font-size-l);
   --di-logo-text-color: var(--vaadin-text-color);
   --di-app-logo-text-color: var(--vaadin-text-color);
}

[data-di-app-layout] di-sidemenu-header:not([data-collapsed]) {
   padding: var(--vaadin-padding-s) var(--vaadin-padding-m) 0;
}

[data-di-app-layout] di-sidemenu-footer:not([data-collapsed]) {
   padding: 0 var(--vaadin-padding-m) var(--vaadin-padding-m);
   gap: var(--vaadin-gap-s);
}


[data-di-app-layout] di-sidemenu di-seperator {
   --di-seperator-color: var(--vaadin-border-color-secondary);
}

[data-di-app-layout] di-sidemenu di-info-card {
   --di-colored-10pct: var(--aura-surface-color);
   --di-info-card-label-color: var(--vaadin-text-color);
   --di-info-card-text-color: var(--vaadin-text-color-secondary);
   --di-info-card-icon-color: var(--vaadin-text-color-secondary);
   --aura-surface-level: 4;
   --aura-surface-opacity: 0.5;
   border: 1px solid var(--vaadin-border-color-secondary);
   border-radius: var(--vaadin-radius-m);
}


[data-di-app-layout] di-profile-card {
   --di-profile-card-padding: var(--vaadin-padding-xs, 0.25rem) var(--vaadin-padding-s);
   --di-profile-card-gap: var(--vaadin-gap-s);
   --di-profile-card-name-color: var(--vaadin-text-color);
   --di-profile-card-email-color: var(--vaadin-text-color-secondary);
   --di-profile-card-button-color: var(--aura-accent-text-color);
   --di-button-icon-color: var(--aura-accent-text-color);
   --di-leading-4: var(--aura-line-height-m, 1.25rem);
   --di-leading-3: var(--aura-line-height-s, 1rem);
   border-radius: var(--vaadin-radius-m);
}


[data-di-app-layout] di-profile-card:is([theme], :not([theme])) vaadin-avatar {
   background-color: var(--aura-accent-surface);
   color: var(--vaadin-avatar-text-color, var(--aura-accent-text-color));
}


@media (min-width: 1025px) {
   
   [data-di-settings-layout] > di-sidemenu {
      --di-sidemenu-body-padding: 0 var(--vaadin-padding-s) 0 0;
      padding-inline-end: var(--vaadin-padding-xs);
   }

   
   [data-di-settings-layout] > [part~='body'] > [part~='content'] {
      padding-top: var(--vaadin-padding-l);
   }
}

html[data-di-theme='aura'] di-mail-view {
   gap: var(--vaadin-gap-m);
}

html[data-di-theme='aura'] di-mail-view > di-view-header vaadin-tabs {
   width: auto;
   align-self: flex-start;
   margin-top: var(--vaadin-gap-s);
}

html[data-di-theme='aura'] di-mail-view > di-grid-layout > [part~='bar-layout'] {
   position: static;
   width: 100%;
}