:root {
   --lumo-font-family: 'Geist', sans-serif;

   /* --di-primary-hue: 212; */
   --di-primary-saturation: 100%;
   --di-primary-lightness: 43%;
   --di-secondary-hue: 222;

   --lumo-base-color: var(--di-base-color);

   --di-primary-background-color: hsl(var(--di-primary-hue), var(--di-primary-saturation), var(--di-primary-lightness));
   --di-secondary-background-color: hsl(var(--di-secondary-hue), 100%, 26%);

   --di-sidemenu-primary-background-color: var(--di-primary-background-color);
   --di-sidemenu-secondary-background-color: var(--di-secondary-background-color);

   --di-green-solid-color-2pct: #FAFEFD;
   --di-red-solid-color-2pct: #FFFBFA;
   --di-yellow-solid-color-2pct: #FFFEFB;
   --di-contrast-solid-color-2pct: #FCFAFB;

   --di-red-solid-color-5pct: hsl(0, 85%, 97%);
   --di-green-solid-color-5pct: hsl(158, 50%, 97%);
   --di-blue-solid-color-5pct: hsl(214, 47%, 97%);
   --di-yellow-solid-color-5pct: hsl(42, 100%, 98%);
   --di-purple-solid-color-5pct: hsl(262, 47%, 97%);
   --di-pink-solid-color-5pct: hsl(330, 26%, 97%);
   --di-indigo-solid-color-5pct: hsl(244, 26%, 97%);
   --di-teal-solid-color-5pct: hsl(176, 26%, 97%);
   --di-contrast-solid-color-5pct: hsl(var(--di-primary-hue), 20%, 96%);

   --di-contrast-solid-color-10pct: #EFE8EA;
   --di-contrast-solid-color-20pct: #E5DBDD;

   --di-green-header-text-color: hsl(160 35% 15% / 1);
   --di-red-header-text-color: hsl(3 35% 15% / 1);
   --di-yellow-header-text-color: hsl(43 35% 15% / 1);
   --di-contrast-header-text-color: var(--di-header-text-color);

   --di-green-body-text-color: hsl(160 35% 15% / 0.8);
   --di-red-body-text-color: hsl(3 35% 15% / 0.8);
   --di-yellow-body-text-color: hsl(43 35% 15% / 0.8);
   --di-contrast-body-text-color: var(--di-body-secondary-text-color);

   --di-green-secondary-text-color: hsl(160 35% 15% / 0.69);
   --di-red-secondary-text-color: hsl(3 35% 15% / 0.69);
   --di-yellow-secondary-text-color: hsl(43 35% 15% / 0.69);
   --di-contrast-secondary-text-color: var(--di-secondary-text-color);

   --di-green-tertiary-text-color: hsl(160 35% 15% / 0.5);
   --di-red-tertiary-text-color: hsl(3 35% 15% / 0.5);
   --di-yellow-tertiary-text-color: hsl(43 35% 15% / 0.5);
   --di-contrast-tertiary-text-color: var(--di-tertiary-text-color);

   --di-secondary-base-solid-color: hsla(var(--di-base-hue, var(--di-primary-hue)), 20%, 98%, 1);


   --di-base-hue: var(--di-primary-hue);
   --di-grayscale-hue: var(--di-primary-hue);
   --di-text-hue: var(--di-primary-hue);
   --di-overlay-color: var(--di-tint-70pct);
   --di-harmony-text-color: var(--di-secondary);
   --di-login-blur: 35px;
   --di-icon-color-1: hsl(var(--di-primary-hue), 77%, 50%);
   --di-icon-color-2: hsl(calc(var(--di-primary-hue) + 12), 100%, 97%);
   --di-icon-color-3: hsl(calc(var(--di-primary-hue) - 12), 100%, 93%);
   --di-login-form-border: none;
   --di-primary-color-2pct: hsla(var(--di-primary-hue), 95%, 65%, 0.03);
   --di-primary-color-5pct: hsla(var(--di-primary-hue), 90%, 61%, 0.07);
   --di-primary-color-10pct: hsla(var(--di-primary-hue), 85%, 59%, 0.13);
   --di-primary-color-25pct: hsla(var(--di-primary-hue), 100%, 49%, 0.3);
   --di-primary-color-50pct: hsla(var(--di-primary-hue), 83%, 57%, 0.6);
   --di-primary-color: hsl(var(--di-primary-hue), var(--di-primary-saturation), var(--di-primary-lightness));

   /* --lumo-primary-color: hsl(var(--di-primary-hue), 78%, 55%); */

   /* shadcn/ui */

   --background: 0 0% 100%;
   --foreground: 222.2 47.4% 11.2%;

   --muted: 210 40% 96.1%;
   --muted-foreground: 215.4 16.3% 46.9%;

   --popover: 0 0% 100%;
   --popover-foreground: 222.2 47.4% 11.2%;

   --border: 214.3 31.8% 91.4%;
   --input: 214.3 31.8% 91.4%;

   --card: 0 0% 100%;
   --card-foreground: 222.2 47.4% 11.2%;

   --primary: 222.2 47.4% 11.2%;
   --primary-foreground: 210 40% 98%;

   --secondary: 210 40% 96.1%;
   --secondary-foreground: 222.2 47.4% 11.2%;

   --accent: 210 40% 96.1%;
   --accent-foreground: 222.2 47.4% 11.2%;

   --destructive: 0 100% 50%;
   --destructive-foreground: 210 40% 98%;

   --ring: 215 20.2% 65.1%;
   --radius: 0.5rem;

   --chart-1: 221.2 83.2% 53.3%;
   --chart-1-2: 351 83% 82%;
   --chart-2: 197 37% 24%;
   --chart-2-2: 173 58% 39%;
   --chart-3: 12 76% 61%;
   --chart-3-2: 43 74% 66%;
   --chart-4: 221.2 83.2% 53.3%;
   --chart-5: 140 74% 44%;


   /* --di-app-layout-background-color: var(--aura-background-color) !important;
   --lumo-base-color: var(--aura-background-color) !important; */
   /* --aura-background-color-light: #ffd06b; */
   /* --aura-background-color-dark: #1b0f38; */
   /* --di-secondary-base-color: var(--aura-app-background) !important; */
}

[data-status="green"] {
   --di-status-border-color: var(--di-green-color-20pct);
   --di-status-color-5pct: var(--di-green-color-5pct);
   --di-status-color-50pct: var(--di-green-color-50pct);
   --di-status-solid-color-5pct: var(--di-green-solid-color-5pct);
}

[data-status="red"] {
   --di-status-border-color: var(--di-red-color-20pct);
   --di-status-color-5pct: var(--di-red-color-5pct);
   --di-status-color-50pct: var(--di-red-color-50pct);
   --di-status-solid-color-5pct: var(--di-red-solid-color-5pct);
}

[data-status="yellow"] {
   --di-status-border-color: var(--di-yellow-color-20pct);
   --di-status-color-5pct: var(--di-yellow-color-5pct);
   --di-status-color-50pct: var(--di-yellow-color-50pct);
   --di-status-solid-color-5pct: var(--di-yellow-solid-color-5pct);
}

[data-status="gray"] {
   --di-status-border-color: var(--di-contrast-10pct);
   --di-status-color-5pct: var(--di-contrast-10pct);
   --di-status-color-50pct: var(--di-contrast-40pct);
   --di-status-solid-color-5pct: var(--di-contrast-solid-color-5pct);
}


/* :root di-login-view {
  --di-secondary-base-color: hsla(var(--di-base-hue), 20%, 98%, 0.6);
}

html[theme='dark'] di-login-view {
  --di-secondary-base-color: hsla(var(--di-base-hue), 27%, 6%, 0.87);
} */



html[theme='dark'] {
   /* overrides */
   --di-overlay-color: var(--di-shade-70pct);
   --di-harmony-text-color: hsla(var(--di-text-hue), 42%, 18%, 0.69);
   --di-primary-color-2pct: hsla(var(--di-primary-hue), 90%, 75%, 0.03);
   --di-primary-color-5pct: hsla(var(--di-primary-hue), 90%, 75%, 0.07);
   --di-primary-color-10pct: hsla(var(--di-primary-hue), 90%, 75%, 0.13);
   --di-primary-color-25pct: hsla(var(--di-primary-hue), 90%, 70%, 0.3);
   --di-primary-color-50pct: hsla(var(--di-primary-hue), 90%, 70%, 0.69);
   --di-primary-color: hsl(var(--di-primary-hue), 78%, 55%);
   --di-primary-text-color: hsl(var(--di-primary-hue), 90%, 80%);
   --di-base-color: hsl(var(--di-primary-hue), 17%, 9%);

   --di-secondary-base-solid-color: hsla(var(--di-primary-hue), 27%, 8%, 1);
   /* --di-primary-color: hsl(var(--di-primary-hue), var(--di-primary-saturation), var(--di-primary-lightness)); */

   /* shadcn/ui */

   --background: 224 71% 4%;
   --foreground: 213 31% 91%;

   --muted: 223 47% 11%;
   --muted-foreground: 215.4 16.3% 56.9%;

   --accent: 216 34% 17%;
   --accent-foreground: 210 40% 98%;

   --popover: 224 71% 4%;
   --popover-foreground: 215 20.2% 65.1%;

   --border: 216 34% 17%;
   --input: 216 34% 17%;

   --card: 224 71% 4%;
   --card-foreground: 213 31% 91%;

   --primary: 210 40% 98%;
   --primary-foreground: 222.2 47.4% 1.2%;

   --secondary: 222.2 47.4% 11.2%;
   --secondary-foreground: 210 40% 98%;

   --destructive: 0 63% 31%;
   --destructive-foreground: 210 40% 98%;

   --ring: 216 34% 17%;

   --radius: 0.5rem;

   --chart-1: 280 65% 60%;
   --chart-1-2: 30 80% 55%;
   --chart-2: 220 70% 50%;
   --chart-2-2: 160 60% 45%;
   --chart-3: 340 75% 55%;
   --chart-3-2: 30, 90%, 62%;
   --chart-4: 43 74% 66%;
   --chart-5: 140 74% 44%;

   --di-green-solid-color-5pct: hsl(132, 17%, 12%);
   --di-red-solid-color-5pct: hsl(353, 25%, 13%);
   --di-yellow-solid-color-5pct: hsl(27, 35%, 12%);
   --di-blue-solid-color-5pct: hsl(240, 16%, 13%);
   --di-purple-solid-color-5pct: hsl(287, 26%, 11%);
   --di-pink-solid-color-5pct: hsl(330, 26%, 11%);
   --di-indigo-solid-color-5pct: hsl(244, 26%, 11%);
   --di-teal-solid-color-5pct: hsl(176, 26%, 11%);

   --di-contrast-solid-color-5pct: #211B1E;
   --di-base-color: hsl(var(--di-base-hue, var(--di-primary-hue)) 18% 8%) !important;
}

@keyframes ping {

   75%,
   100% {
      transform: scale(2);
      opacity: 0;
   }
}

.root {
   isolation: isolate;
}

.di-menu-item {
   @apply flex cursor-default py-2 pr-8 pl-4 text-sm font-semibold leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-header data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-contrast-5pct;
}

vaadin-select[theme*="xs"] {
   height: 24px;
}

vaadin-select[theme*="xs"]::part(input-field) {
   height: 24px;
}

vaadin-select[theme*="xs"]::part(toggle-button) {
   font-size: 14px
}

vaadin-select[theme*="no-border-radius-left"]::part(input-field) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}

[theme*="no-border-radius-right"] {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}