html {
  --aura-color-scheme: light;
  --aura-content-color-scheme: var(--aura-color-scheme);
  --aura-notification-color-scheme: var(--aura-color-scheme);
  color-scheme: var(--aura-color-scheme);
  color: var(--vaadin-color);
  background: var(--aura-app-background);
  background-size: 100vw 100vh;
  background-attachment: fixed;
}

vaadin-app-layout > :not([slot]) {
  color-scheme: var(--aura-content-color-scheme);
  color: var(--vaadin-color);
  background: linear-gradient(var(--aura-surface), var(--aura-surface)), var(--aura-app-background);
  background-origin: border-box;
  background-clip: padding-box;
}

vaadin-notification-container {
  color-scheme: var(--aura-notification-color-scheme);
  color: var(--vaadin-color);
}

html {
  --aura-contrast: 1;
  --aura-accent-light: #1858d8;
  --aura-accent-dark: #3670e2;
  --_color-base: light-dark(oklch(from var(--aura-background-light) .1 calc(c / 2 + c * (1 - c)) h), oklch(from var(--aura-background-dark) 1 c h));
  --vaadin-color: light-dark(color-mix(in srgb, var(--_color-base) calc(90% + 5% * var(--aura-contrast)), transparent), color-mix(in srgb, #fff calc(90% + 5% * var(--aura-contrast)), transparent));
  --vaadin-color-subtle: light-dark(color-mix(in srgb, var(--_color-base) calc(55% + 10% * var(--aura-contrast)), transparent), color-mix(in srgb, var(--_color-base) calc(57% + 10% * var(--aura-contrast)), transparent));
  --vaadin-color-disabled: color-mix(in srgb, var(--_color-base) calc(30% + 10% * var(--aura-contrast)), transparent);
  --_border-color-base: light-dark(oklch(from var(--aura-background-light) .1 c h), oklch(from var(--aura-background-dark) .85 c h));
  --vaadin-border-color: color-mix(in srgb, var(--_border-color-base) calc(14% + 6% * var(--aura-contrast)), transparent);
  --vaadin-border-color-subtle: light-dark(color-mix(in srgb, var(--_border-color-base) max(5%, 5% + 3% * var(--aura-contrast)), transparent), color-mix(in srgb, var(--_border-color-base) max(6%, 5% + 5% * var(--aura-contrast)), transparent));
  --aura-background-light: oklch(from var(--aura-accent-light) min(1, l + (1 - l) * .9) calc(c * .05) h);
  --aura-background-dark: oklch(from var(--aura-accent-dark) max(0, l / 2 - (1 - l) * .2) calc(c * .05) h);
  --aura-background: light-dark(var(--aura-background-light), var(--aura-background-dark));
  --_bg-alt: oklch(from var(--aura-background) calc(l + c) min(c, c * 2 - l / 20) calc(h + 180 * var(--_safari-17-deg, 1deg) * l * c * 4));
  --_bg-accent: radial-gradient(circle at 0% 0%, light-dark(oklch(from var(--aura-background-light) min(1, l + c * 3) min(c, c * 3 - l / 20) h), oklch(from var(--aura-background-dark) min(1, l + c) clamp(0, c * 1.5, .4) h)), transparent 30%);
  --aura-app-background: var(--_bg-accent), radial-gradient(circle at 25% 0% in xyz, var(--aura-background) 33%, var(--_bg-alt));
  --aura-accent-color: light-dark(var(--aura-accent-light), var(--aura-accent-dark));
  --vaadin-focus-ring-color: var(--aura-accent-color);
  accent-color: var(--aura-accent-color);
  --aura-accent-contrast: light-dark(oklch(from var(--aura-accent-light) clamp(0, (.62 - l) * 1000, 1) 0 0), oklch(from var(--aura-accent-dark) clamp(0, (.62 - l) * 1000, 1) 0 0));
  --aura-accent-text-light: color-mix(in srgb, var(--aura-accent-light) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-color));
  --aura-accent-text-dark: color-mix(in srgb, var(--aura-accent-dark) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-color));
  --aura-accent-text: light-dark(var(--aura-accent-text-light), var(--aura-accent-text-dark));
  --vaadin-user-color: var(--aura-accent-color);
  --vaadin-background-container: color-mix(in srgb, var(--_color-base) calc(3% + min(3%, 1% * var(--aura-contrast))), transparent);
  --vaadin-background-container-strong: color-mix(in srgb, var(--_color-base) calc(7% + min(8%, 1.5% * var(--aura-contrast))), transparent);
}

@supports (color: hsl(0 0 0)) {
  html {
    --_safari-17-deg: 1;
  }
}

html {
  --aura-red: light-dark(oklch(from var(--aura-accent-light) .55 c calc(clamp(380 - rem(h, 6), h + 20, 420 - rem(h, 6))  + 20)), oklch(from var(--aura-accent-dark) .7 c calc(clamp(380 - rem(h, 6), h + 20, 420 - rem(h, 6))  + 20)));
  --aura-orange: light-dark(oklch(from var(--aura-accent-light) .8 min(c + .1, .4) clamp(80 - rem(h, 6), h, 90 + rem(h, 6))), oklch(from var(--aura-accent-dark) .75 min(c + .1, .4) clamp(80 - rem(h, 6), h, 90 + rem(h, 6))));
  --aura-yellow: light-dark(oklch(from var(--aura-accent-light) .9 min(c + .1, .4) clamp(100 - rem(h, 6), h, 105 - rem(h, 6))), oklch(from var(--aura-accent-dark) .85 min(c + .1, .4) clamp(100 - rem(h, 6), h, 105 - rem(h, 6))));
  --aura-green: light-dark(oklch(from var(--aura-accent-light) .5 min(c + .05, .4) clamp(130 - rem(h, 6), h, 160 - rem(h, 6))), oklch(from var(--aura-accent-dark) .7 min(c + .05, .4) clamp(130 - rem(h, 6), h, 160 - rem(h, 6))));
  --aura-blue: light-dark(oklch(from var(--aura-accent-light) .55 min(c + .05, .4) clamp(220 - rem(h, 6), h, 260 - rem(h, 6))), oklch(from var(--aura-accent-dark) .7 min(c + .05, .4) clamp(220 - rem(h, 6), h, 260 - rem(h, 6))));
  --aura-purple: light-dark(oklch(from var(--aura-accent-light) .55 min(c + .05, .4) clamp(280 - rem(h, 6), h, 350 - rem(h, 6))), oklch(from var(--aura-accent-dark) .7 min(c + .05, .4) clamp(280 - rem(h, 6), h, 350 - rem(h, 6))));
  --aura-red-text: color-mix(in srgb, var(--aura-red) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-color));
  --aura-orange-text: color-mix(in srgb, var(--aura-orange) calc(60% - 15% * var(--aura-contrast)), var(--vaadin-color));
  --aura-yellow-text: color-mix(in srgb, var(--aura-yellow) calc(55% - 15% * var(--aura-contrast)), var(--vaadin-color));
  --aura-green-text: color-mix(in srgb, var(--aura-green) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-color));
  --aura-blue-text: color-mix(in srgb, var(--aura-blue) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-color));
  --aura-purple-text: color-mix(in srgb, var(--aura-purple) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-color));
  --aura-base-size: 16;
  --_size-ref: 16;
  --aura-base-radius: 3;
  --vaadin-radius-s: min(.25lh, round(var(--aura-base-radius) * 1px + 2px, 1px));
  --vaadin-radius-m: round(var(--aura-base-radius) * 2px + 3px, 1px);
  --vaadin-radius-l: round(var(--aura-base-radius) * 1.5px + 10px, 1px);
}

html, [theme] {
  --vaadin-padding-xs: round(var(--aura-base-size) * .25 * pow(var(--aura-base-size) / var(--_size-ref), .5) * 1px, 1px);
  --vaadin-padding-s: round(var(--aura-base-size) * .5 * pow(var(--aura-base-size) / var(--_size-ref), .75) * 1px, 1px);
  --vaadin-padding-m: round(var(--aura-base-size) * .75 * pow(var(--aura-base-size) / var(--_size-ref), .3) * 1px, 1px);
  --vaadin-padding-l: calc(var(--aura-base-size) * 1px);
  --vaadin-padding-xl: round(var(--aura-base-size) * 1.5 * pow(var(--aura-base-size) / var(--_size-ref), .1) * 1px, 1px);
  --vaadin-padding-container: round(var(--vaadin-padding-s) / 1.4, 1px) max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 2, 1px));
  --vaadin-gap-xs: var(--vaadin-padding-xs);
  --vaadin-gap-s: var(--vaadin-padding-s);
  --vaadin-gap-m: var(--vaadin-padding-m);
  --vaadin-gap-l: var(--vaadin-padding-l);
  --vaadin-gap-xl: var(--vaadin-padding-xl);
}

@media (pointer: coarse) {
  html {
    --aura-base-size: 19;
  }
}

html {
  --aura-surface-level: 1;
}

html, vaadin-app-layout::part(navbar), vaadin-app-layout::part(drawer), vaadin-master-detail-layout, vaadin-master-detail-layout::part(detail), ::part(overlay), ::part(input-field), vaadin-message-input, vaadin-input-container, vaadin-button, vaadin-card, vaadin-checkbox::part(checkbox), vaadin-radio-button::part(radio), vaadin-side-nav-item::part(content), [theme~="surface"] {
  --aura-surface-opacity: .5;
  --aura-surface-solid: light-dark(oklch(from var(--aura-background-light) min(1, 1 + (.9 - l)  + var(--aura-surface-level) * (.07 - .01 * var(--aura-contrast))) clamp(0, c - l, .2) h), oklch(from var(--aura-background-dark) min(1, max(.28 - var(--aura-surface-level) * .04, l)  + var(--aura-surface-level) * (.05 - .008 * var(--aura-contrast))) clamp(0, c * (1 + l), .2) h));
  --aura-surface: color-mix(in oklab, var(--aura-surface-solid) calc(100% * var(--aura-surface-opacity)), transparent);
  --vaadin-background-color: var(--aura-surface-solid);
}

[theme~="surface-solid"] {
  background-color: var(--aura-surface-solid);
}

@font-face {
  font-family: Instrument Sans;
  src: url("assets/InstrumentSans-C02vnGmI.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 700;
}

@font-face {
  font-family: Inter;
  src: url("assets/Inter-FIwubZjA.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: Metropolis;
  src: url("assets/Metropolis-Regular-DKepXnDq.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: Metropolis;
  src: url("assets/Metropolis-Medium-C_TK2_yL.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: Metropolis;
  src: url("assets/Metropolis-SemiBold-D_dLm6Ff.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: Metropolis;
  src: url("assets/Metropolis-Bold-BZLKi5Gb.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: Atkinson Hyperlegible Next;
  src: url("assets/AtkinsonHyperlegibleNext-DwbtQ1sE.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 700;
}

html {
  --aura-font-family-system: system-ui, ui-sans-serif, sans-serif;
  --aura-font-family-instrument-sans: "Instrument Sans", var(--aura-font-family-system);
  --aura-font-family-inter: "Inter", var(--aura-font-family-system);
  --aura-font-family-metropolis: "Metropolis", var(--aura-font-family-system);
  --aura-font-family-atkinson: "Atkinson Hyperlegible Next", var(--aura-font-family-system);
  --aura-font-family: var(--aura-font-family-instrument-sans);
  --aura-base-font-size: 16;
  --aura-font-size-scale: 1.15;
  --aura-base-line-height: 1.4;
  --aura-font-weight: 400;
  --aura-font-weight-medium: 500;
  --aura-font-weight-semibold: 600;
}

html, [theme] {
  --aura-font-size-xs: round(var(--aura-font-size-s) / var(--aura-font-size-scale), .0625rem);
  --aura-font-size-s: round(var(--aura-font-size-m) / var(--aura-font-size-scale), .0625rem);
  --aura-font-size-m: round(var(--aura-base-font-size) / 16 * 1rem, .0625rem);
  --aura-font-size-l: round(var(--aura-font-size-m) * var(--aura-font-size-scale), .0625rem);
  --aura-font-size-xl: round(var(--aura-font-size-l) * var(--aura-font-size-scale), .0625rem);
  --aura-line-height-xs: round(var(--aura-font-size-xs) * var(--aura-base-line-height), .125rem);
  --aura-line-height-s: round(var(--aura-font-size-s) * var(--aura-base-line-height), .125rem);
  --aura-line-height-m: round(var(--aura-font-size-m) * var(--aura-base-line-height), .125rem);
  --aura-line-height-l: round(var(--aura-font-size-l) * var(--aura-base-line-height), .125rem);
  --aura-line-height-xl: round(var(--aura-font-size-xl) * var(--aura-base-line-height), .125rem);
}

body {
  font-family: var(--aura-font-family);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--aura-font-weight);
  -webkit-font-smoothing: var(--aura-font-smoothing, antialiased);
  -moz-osx-font-smoothing: var(--aura-font-smoothing, grayscale);
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, [theme] {
  font-size: var(--aura-font-size-m);
  line-height: var(--aura-line-height-m);
}

:is(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
  font-weight: var(--aura-font-weight-semibold);
  color: var(--vaadin-color);
  margin: 0;
}

html {
  --aura-app-layout-inset: 1.5vmin;
  --aura-app-layout-radius: var(--vaadin-radius-l);
  --_aura-mdl-border: 1px;
  --vaadin-app-layout-navbar-padding-top: 0;
  --vaadin-app-layout-navbar-padding-bottom: 0;
  --vaadin-app-layout-navbar-padding-inline-start: 0;
  --vaadin-app-layout-navbar-padding-inline-end: 0;
}

@media (width <= 800px), (height <= 600px) {
  html {
    --_aura-mdl-border: 0px;
    --aura-app-layout-inset: 0px !important;
  }
}

vaadin-app-layout {
  --_app-layout-radius: clamp(0px, var(--aura-app-layout-radius), var(--aura-app-layout-inset) * 100);
  padding-block: var(--aura-app-layout-inset);
  padding-inline-end: var(--aura-app-layout-inset);
  padding-top: calc(var(--aura-app-layout-inset)  + var(--_vaadin-app-layout-navbar-offset-size));
}

vaadin-app-layout[overlay] {
  &::part(navbar), &::part(drawer) {
    --vaadin-app-layout-navbar-background: var(--aura-surface);
    --vaadin-app-layout-drawer-background: var(--aura-surface);
    --aura-surface-opacity: var(--aura-overlay-surface-opacity);
    backdrop-filter: var(--aura-overlay-backdrop-filter);
  }
}

vaadin-app-layout:is([overlay], :not([drawer-opened])) {
  padding-inline-start: var(--aura-app-layout-inset);
}

vaadin-app-layout::part(navbar) {
  justify-content: space-between;
}

vaadin-app-layout:not([overlay])::part(navbar) {
  --vaadin-app-layout-navbar-background: transparent;
}

vaadin-app-layout::part(drawer) {
  padding-block: var(--aura-app-layout-inset);
  padding-inline: calc(var(--aura-app-layout-inset)  - var(--side-nav-padding));
}

vaadin-scroller[slot="drawer"] {
  scrollbar-width: thin;
}

vaadin-app-layout > [slot="drawer"] vaadin-side-nav-item::part(content) {
  --aura-surface-level: 5;
}

vaadin-app-layout > vaadin-master-detail-layout {
  border-radius: var(--_app-layout-radius);
  border: var(--_aura-mdl-border) solid var(--vaadin-border-color-subtle);
  border-block-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
  border-inline-end-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));

  & > vaadin-master-detail-layout, &:not([drawer])::part(detail) {
    border-start-end-radius: var(--_app-layout-radius);
    border-end-end-radius: var(--_app-layout-radius);
  }

  &::part(backdrop) {
    border-radius: calc(var(--_app-layout-radius)  - var(--_aura-mdl-border));
  }

  &[drawer][has-detail] {
    border-color: var(--vaadin-border-color);
  }
}

vaadin-app-layout:has([slot="navbar"]):has([slot="drawer"]) {
  padding-top: var(--_vaadin-app-layout-navbar-offset-size);

  &::part(drawer) {
    padding-top: 0;
  }
}

vaadin-app-layout:has([slot="navbar"]):has([slot="drawer"]):not([overlay]):not([drawer-opened]) > vaadin-master-detail-layout {
  border-inline-start-width: min(var(--aura-app-layout-inset), 1px);
}

vaadin-app-layout:has([slot="navbar"]):has([slot="drawer"])[drawer-opened]:not([overlay]) > vaadin-master-detail-layout {
  border-start-start-radius: var(--aura-app-layout-radius);
}

vaadin-app-layout:has([slot="navbar"]):has([slot="drawer"]) > vaadin-master-detail-layout {
  border-top-width: 1px;
}

vaadin-app-layout:has([slot="navbar"]) > :is(:not([slot]), [slot="drawer"]) vaadin-drawer-toggle, vaadin-app-layout:not([slot="navbar"]) > [slot="drawer"] vaadin-drawer-toggle {
  display: none;
}

html {
  --vaadin-avatar-border-color: var(--vaadin-border-color-subtle);
  --vaadin-avatar-background: var(--vaadin-background-container);
  --vaadin-avatar-font-weight: var(--aura-font-weight-medium);
  --vaadin-avatar-font-size: var(--aura-font-size-m);
}

vaadin-avatar:not([img]) {
  --_shade: color-mix(in srgb, var(--vaadin-border-color) 20%, transparent);
  background-image: linear-gradient(light-dark(transparent, var(--_shade)), transparent 50%, light-dark(var(--_shade), transparent));
}

[theme~="badge"] {
  align-items: center;
  gap: var(--vaadin-gap-xs);
  font-size: var(--aura-font-size-s);
  font-weight: var(--aura-font-weight-medium);
  box-sizing: border-box;
  border: 1px solid var(--_bg);
  --_bg: color-mix(in srgb, var(--color) 12%, transparent);
  background: var(--aura-surface-solid);
  height: 1lh;
  padding: .1em var(--vaadin-gap-xs);
  border-radius: var(--vaadin-radius-l);
  text-align: center;
  --color: var(--vaadin-color);
  --text-opacity: 70%;
  min-width: 1em;
  color: color-mix(in xyz, var(--color) calc(var(--text-opacity)  - 15% * var(--aura-contrast)), var(--vaadin-color));
  --vaadin-icon-size: .75lh;
  display: inline-flex;
}

[theme~="badge"][theme~="accent"] {
  --color: var(--aura-accent-color);
  color: var(--aura-accent-text);
  background: var(--_bg);
}

[theme~="badge"][theme~="blue"] {
  --color: var(--aura-blue);
  color: var(--aura-blue-text);
  background: var(--_bg);
}

[theme~="badge"][theme~="red"] {
  --color: var(--aura-red);
  color: var(--aura-red-text);
  background: var(--_bg);
}

[theme~="badge"][theme~="green"] {
  --color: var(--aura-green);
  color: var(--aura-green-text);
  background: var(--_bg);
}

[theme~="badge"][theme~="yellow"] {
  --color: var(--aura-yellow);
  color: var(--aura-yellow-text);
  background: var(--_bg);
}

[theme~="badge"][theme~="orange"] {
  --color: var(--aura-orange);
  color: var(--aura-orange-text);
  background: var(--_bg);
}

[theme~="badge"][theme~="purple"] {
  --color: var(--aura-purple);
  color: var(--aura-purple-text);
  background: var(--_bg);
}

[theme~="badge"][theme~="filled"] {
  background: var(--color);
  color: oklch(from var(--color) clamp(0, (.62 - l) * 1000, 1) 0 0 / clamp(.8, (.62 - l) * 1000, 1));
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([slot="button"])) {
  transition: scale .18s;
  position: relative;
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([slot="button"], [theme~="tertiary"])) {
  --vaadin-button-border-color: var(--vaadin-border-color);
  --aura-surface-level: 6;
  --aura-surface-opacity: .3;
  box-shadow: 0 1px 4px -1px #00000012;
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([slot="button"]):not(:has(:is(vaadin-icon, svg, i[class*="fa-"], vaadin-avatar):not([slot]))) {
  --vaadin-button-padding: round(var(--vaadin-padding-s) / 1.4, 1px) max(var(--vaadin-padding-m), round(var(--vaadin-radius-m) / 1.5, 1px));
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([slot="button"]):has([slot="prefix"]:is(vaadin-icon, svg, i[class*="fa-"], vaadin-avatar)) {
  padding-inline-start: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([slot="button"]):has([slot="suffix"]:is(vaadin-icon, svg, i[class*="fa-"], vaadin-avatar)), vaadin-menu-bar-button[aria-haspopup="true"] {
  padding-inline-end: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([theme~="primary"], [theme~="tertiary"]) {
  --vaadin-button-background: var(--aura-surface) padding-box;
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~="primary"] {
  --vaadin-button-font-weight: var(--aura-font-weight-semibold);
  --vaadin-button-text-color: light-dark(var(--vaadin-background-color), var(--aura-background-dark));
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[disabled][theme~="primary"] {
  --vaadin-button-text-color: var(--vaadin-color-subtle);
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([slot="button"], [readonly], [disabled]):before {
  content: "";
  inset: calc(var(--vaadin-button-border-width, 1px) * -1);
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background-color: currentColor;
  transition: opacity .1s, background-color .1s;
  position: absolute;
}

@supports (color: hsl(0 0 0)) {
  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([slot="button"], [readonly], [disabled]):before {
    background-color: oklch(from currentColor calc(l + .4) calc(c) h);
  }
}

@media (any-hover: hover) {
  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):hover:not([readonly], [disabled], :active):before {
    opacity: .05;
  }

  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~="primary"]:hover:not([readonly], [disabled], :active):before {
    opacity: .12;
  }
}

@media (resolution >= 2x) {
  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[active]:not([slot="button"], [disabled], [aria-disabled="true"]) {
    transition-duration: 50ms;
    scale: .98;
  }
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[active]:not([slot="button"], [readonly], [disabled]):before {
  opacity: .1;
  background: #000;
}

html {
  --vaadin-card-title-font-weight: var(--aura-font-weight-medium);
  --vaadin-card-padding: var(--vaadin-padding-l);
  --vaadin-card-gap: var(--vaadin-gap-m) var(--vaadin-gap-l);
  --vaadin-card-border-color: var(--vaadin-border-color-subtle);
  --vaadin-card-background: var(--aura-surface) padding-box;
}

vaadin-card {
  --vaadin-card-background: var(--aura-surface) padding-box;
  --aura-surface-level: 2;
}

vaadin-card[theme~="outlined"] {
  border: var(--vaadin-card-border-width, 1px) solid transparent;
  --vaadin-card-padding: calc(var(--vaadin-padding-l)  - var(--vaadin-card-border-width, 1px));
}

vaadin-card[theme~="outlined"]:before {
  inset: calc(var(--vaadin-card-border-width, 1px) * -1);
}

vaadin-card[theme~="outlined"][theme~="cover-media"] [slot="media"]:is(img, video, svg, vaadin-icon) {
  margin-inline: calc((var(--_padding)  + var(--vaadin-card-border-width, 1px)) * -1);
  margin-top: calc((var(--_padding)  + var(--vaadin-card-border-width, 1px)) * -1);
  width: calc(100% + (var(--_padding)  + var(--vaadin-card-border-width, 1px)) * 2);
}

vaadin-card[theme~="elevated"] {
  --aura-surface-opacity: .7;
  --aura-surface-level: 3;
  --_shadow-color: light-dark(oklch(from var(--aura-background-light) calc(l - l * .8) calc(c / 10) h / .1), oklch(from var(--aura-background-dark) calc(l - l * .8) calc(c / 10) h / .2));
  --vaadin-card-shadow: 0 1px 6px -1px var(--_shadow-color);
  background-clip: padding-box;
}

vaadin-card[theme~="stretch-media"]:not([theme~="cover-media"]) [slot="media"]:is(img, video, svg, vaadin-icon) {
  border-radius: var(--vaadin-radius-s);
}

html {
  --vaadin-radio-button-dot-size: 6px;
  --vaadin-checkbox-size: calc(1lh - 2px);
  --vaadin-radio-button-size: calc(1lh - 2px);
}

vaadin-checkbox::part(checkbox), vaadin-radio-button::part(radio) {
  --vaadin-checkbox-background: var(--aura-surface);
  --vaadin-radio-button-background: var(--aura-surface);
  transition: background-color .1s;
}

vaadin-checkbox:not([readonly], [disabled])::part(checkbox), vaadin-radio-button:not([readonly], [disabled])::part(radio) {
  --aura-surface-level: 4;
  --_shade: color-mix(in srgb, var(--vaadin-border-color-subtle) 50%, transparent);
  background-image: linear-gradient(light-dark(transparent, var(--_shade)), transparent 33%, transparent 66%, light-dark(var(--_shade), transparent));
  box-shadow: 0 2px 1px -1px #00000012;
}

vaadin-checkbox:not([checked], [indeterminate])::part(checkbox), vaadin-radio-button:not([checked])::part(radio) {
  background-clip: padding-box;
}

vaadin-checkbox:is([checked], [indeterminate]):not([readonly], [disabled])::part(checkbox) {
  --vaadin-checkbox-background: var(--aura-accent-color);
  --vaadin-checkbox-color: var(--aura-accent-contrast);
}

vaadin-radio-button[checked]:not([readonly], [disabled])::part(radio) {
  --vaadin-radio-button-background: var(--aura-accent-color);
  --vaadin-radio-button-color: var(--aura-accent-contrast);
}

vaadin-checkbox:not([readonly], [disabled])::part(checkbox):before, vaadin-radio-button:not([readonly], [disabled])::part(radio):before {
  content: "";
  inset: calc(var(--vaadin-input-field-border-width, 1px) * -1);
  border-radius: inherit;
  opacity: 0;
  background-color: currentColor;
  transition: opacity .1s, background-color .1s;
  position: absolute;
}

@media (any-hover: hover) {
  vaadin-checkbox:hover:not([readonly], [disabled], :active)::part(checkbox):before, vaadin-radio-button:hover:not([readonly], [disabled], :active)::part(radio):before {
    opacity: .04;
  }
}

vaadin-checkbox:active:not([readonly], [disabled])::part(checkbox):before, vaadin-radio-button:active:not([readonly], [disabled])::part(radio):before {
  opacity: .1;
  background: #000;
}

html {
  --vaadin-date-picker-year-scroller-background: light-dark(var(--vaadin-background-container), transparent);
  --vaadin-date-picker-month-header-font-weight: var(--aura-font-weight-semibold);
  --vaadin-date-picker-date-width: calc(var(--aura-font-size-m) * 2);
  --vaadin-date-picker-year-scroller-width: calc(var(--aura-font-size-m) * 3);
  --vaadin-date-picker-date-selected-background: var(--aura-accent-color);
  --vaadin-date-picker-date-selected-color: var(--aura-accent-contrast);
}

vaadin-date-picker-month-scroller, vaadin-date-picker-overlay-content::part(footer) {
  background: var(--aura-surface);
}

vaadin-date-picker-year-scroller:before {
  background: var(--aura-surface-solid) padding-box;
  width: 12px;
  height: 12px;
}

vaadin-date-picker-year::part(year-number) {
  font-size: var(--aura-font-size-s);
  font-weight: var(--aura-font-weight-medium);
}

html {
  --vaadin-dialog-title-font-size: var(--aura-font-size-l);
}

vaadin-dialog, vaadin-confirm-dialog {
  color-scheme: var(--aura-content-color-scheme);
}

vaadin-dialog::part(overlay), vaadin-confirm-dialog::part(overlay) {
  --vaadin-dialog-border-width: 0px;
  --vaadin-dialog-background: var(--aura-surface);
  --aura-surface-level: 4;
  view-transition-name: vaadin-dialog;
}

vaadin-confirm-dialog::part(message) {
  color: var(--vaadin-color-subtle);
}

::view-transition-group(vaadin-dialog) {
  border-radius: var(--vaadin-dialog-border-radius, var(--vaadin-radius-l));
  z-index: 1;
}

vaadin-form-layout[theme~="padding"] {
  padding: var(--vaadin-padding-l);
}

html {
  --vaadin-grid-row-selected-background: linear-gradient(var(--vaadin-background-container), var(--vaadin-background-container));
}

vaadin-grid[theme~="no-border"]::part(first-column-cell) {
  --_cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-s) var(--vaadin-padding-xs) var(--vaadin-padding-l);
}

vaadin-grid[theme~="no-border"]::part(last-column-cell) {
  --_cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-l) var(--vaadin-padding-xs) var(--vaadin-padding-s);
}

vaadin-grid::part(active-nav-item) {
  --vaadin-grid-cell-background: linear-gradient(var(--vaadin-background-container), var(--vaadin-background-container)) var(--vaadin-background-color);
}

html, [theme] {
  --vaadin-input-field-background: var(--aura-surface);
  --vaadin-input-field-error-color: var(--aura-red);
}

::part(input-field), vaadin-message-input, vaadin-input-container {
  --vaadin-input-field-background: var(--aura-surface);
  --aura-surface-level: 4;
  --aura-surface-opacity: .7;
  background-clip: padding-box;
}

:not([readonly], [disabled])::part(input-field), vaadin-message-input:not([readonly], [disabled]) {
  box-shadow: 0 2px 1px -1px #0000000a;
}

[disabled]::part(input-field) {
  --aura-surface-opacity: .5;
  --aura-surface-level: 1;
}

::part(decrease-button), ::part(increase-button), ::part(toggle-button), ::part(clear-button), ::part(reveal-button) {
  transition: color .1s;
}

:not([readonly], [disabled])::part(decrease-button):active, :not([readonly], [disabled])::part(increase-button):active, :not([readonly], [disabled])::part(toggle-button):active, :not([readonly], [disabled])::part(clear-button):active, :not([readonly], [disabled])::part(reveal-button):active {
  color: var(--vaadin-color);
}

@media (any-hover: hover) {
  :not([readonly], [disabled])::part(decrease-button):hover, :not([readonly], [disabled])::part(increase-button):hover, :not([readonly], [disabled])::part(toggle-button):hover, :not([readonly], [disabled])::part(clear-button):hover, :not([readonly], [disabled])::part(reveal-button):hover {
    color: var(--vaadin-color);
  }
}

vaadin-master-detail-layout::part(detail) {
  --aura-surface-level: 2;
  background: var(--aura-surface) padding-box;
}

vaadin-master-detail-layout[drawer]::part(detail) {
  --aura-surface-opacity: var(--aura-overlay-surface-opacity);
  background: var(--aura-surface) padding-box;
  backdrop-filter: var(--aura-overlay-backdrop-filter);
  box-shadow: var(--aura-overlay-shadow);
}

vaadin-master-detail-layout[theme~="inset-drawer"][drawer]::part(detail), vaadin-master-detail-layout[containment="viewport"][drawer]::part(detail) {
  margin: calc(var(--aura-app-layout-inset) / 2);
  border-radius: var(--_app-layout-radius);
}

vaadin-master-detail-layout > vaadin-master-detail-layout, vaadin-master-detail-layout:not([drawer])::part(detail) {
  border-start-end-radius: var(--_app-layout-radius);
  border-end-end-radius: var(--_app-layout-radius);
}

::view-transition-group(vaadin-mdl-backdrop), ::view-transition-group(vaadin-mdl-master), ::view-transition-group(vaadin-mdl-detail) {
  border-radius: var(--_app-layout-radius);
  overflow: hidden;
}

vaadin-message-input vaadin-text-area::part(input-field) {
  --vaadin-input-field-background: transparent;
}

vaadin-message-input[theme~="icon-button"] vaadin-button {
  color: var(--vaadin-color-subtle);
}

@media (any-hover: hover) {
  vaadin-message-input[theme~="icon-button"] vaadin-button:hover {
    color: var(--vaadin-color);
  }
}

html {
  --vaadin-notification-border-width: 0px;
  --vaadin-ease-fluid: cubic-bezier(.78, 0, .22, 1);
}

vaadin-notification-card::part(overlay) {
  --aura-surface-level: 4;
  --vaadin-notification-background: var(--aura-surface);
  view-transition-name: vaadin-notification;
}

::view-transition-group(vaadin-notification) {
  z-index: 1;
  border-radius: var(--vaadin-notification-border-radius, var(--vaadin-radius-l));
}

@supports (background: -webkit-named-image(i)) {
  ::view-transition-group(vaadin-notification) {
    backdrop-filter: none;
  }
}

vaadin-notification-card vaadin-card {
  --vaadin-card-gap: var(--vaadin-gap-xs) var(--vaadin-gap-s);
  color: var(--vaadin-color-subtle);
}

vaadin-notification-card vaadin-button {
  --aura-surface-level: 8;
  --aura-surface-opacity: .3;
}

html {
  --_shadow-color: light-dark(oklch(from var(--aura-background-light) calc(l - l * .8) calc(c / 10) h / .2), oklch(from var(--aura-background-dark) calc(l - l * .8) calc(c / 10) h / .2));
  --_outline-color: light-dark(oklch(from var(--aura-background-light) .1 c h / max(.04, .03 + .04 * var(--aura-contrast))), oklch(from var(--aura-background-dark) .1 c h / max(.04, .03 + .04 * var(--aura-contrast))));
  --aura-overlay-shadow: inset 0 0 0 1px hsla(0deg, 0%, 100%, max(3%, 2% + 4% * var(--aura-contrast))), 0 0 0 1px var(--_outline-color), 0 8px 16px -3px var(--_shadow-color);
  --vaadin-overlay-border-width: 0px;
  --vaadin-overlay-backdrop-background: light-dark(oklch(from var(--aura-background-light) calc(l * .1) c h / .15), #0000004d);
  --aura-overlay-backdrop-filter: blur(12px) brightness(1.2) saturate(1.2);
  --aura-overlay-surface-opacity: .85;

  @media (prefers-reduced-transparency: reduce) {
    --aura-overlay-surface-opacity: 1 !important;
  }
}

html, ::part(overlay) {
  --vaadin-overlay-background: var(--aura-surface);
}

::part(overlay) {
  --aura-surface-level: 3;
  --aura-surface-opacity: var(--aura-overlay-surface-opacity);
  box-shadow: var(--aura-overlay-shadow);
  backdrop-filter: var(--aura-overlay-backdrop-filter);
}

vaadin-select-item::part(content) {
  align-items: center;
  gap: inherit;
  display: flex;
}

vaadin-select[theme~="subtle"]::part(input-field) {
  --vaadin-input-field-border-color: transparent;
  --vaadin-input-field-background: transparent;
}

vaadin-select[theme~="subtle"]::part(toggle-button) {
  opacity: 0;
  --vaadin-icon-size: .75lh;
  transition: opacity .2s;
}

vaadin-select[theme~="subtle"][focus-ring]::part(toggle-button) {
  opacity: 1;
}

@media (any-hover: hover) {
  vaadin-select[theme~="subtle"]:hover::part(toggle-button) {
    opacity: 1;
  }
}

vaadin-select[theme~="auto-size"] {
  --vaadin-field-default-width: auto;
}

html {
  --vaadin-side-nav-label-line-height: var(--aura-line-height-xs);
  --vaadin-side-nav-label-font-weight: var(--aura-font-weight-medium);
  --vaadin-side-nav-item-font-weight: var(--aura-font-weight-medium);
  --vaadin-side-nav-item-border-width: 1px;
  --vaadin-side-nav-items-gap: var(--vaadin-gap-xs);
  --side-nav-padding: var(--vaadin-padding-m);
}

vaadin-side-nav {
  padding-inline: var(--side-nav-padding);
}

vaadin-side-nav + vaadin-side-nav {
  margin-top: var(--vaadin-gap-l);
}

vaadin-side-nav-item::part(content) {
  --aura-surface-level: 3;
  background-clip: padding-box;
  transition: color .12s, border-color .12s, background-color .12s;
}

vaadin-side-nav-item:not([disabled])::part(content):hover {
  --vaadin-side-nav-item-color: var(--vaadin-color);
}

vaadin-side-nav-item[current]::part(content) {
  --vaadin-side-nav-item-background: var(--aura-surface);
  --vaadin-side-nav-item-border-color: var(--vaadin-border-color-subtle);
}

vaadin-side-nav[theme~="contrast"] vaadin-side-nav-item[current]::part(content) {
  color-scheme: var(--_side-nav-current-item-color-scheme, dark);
  background: var(--aura-surface-solid);
  outline-offset: 2px;
  border-color: #0000;
}

@container style(--aura-color-scheme: dark) {
  [slot="drawer"] {
    --_side-nav-current-item-color-scheme: light;
  }
}

@container style(--aura-content-color-scheme: dark) {
  vaadin-app-layout > :not([slot]) {
    --_side-nav-current-item-color-scheme: light;
  }
}

@container style(--aura-content-color-scheme: light) {
  vaadin-app-layout > :not([slot]) {
    --_side-nav-current-item-color-scheme: dark;
  }
}

@media (prefers-color-scheme: dark) {
  @container style(--aura-content-color-scheme: light dark) {
    vaadin-app-layout > :not([slot]) {
      --_side-nav-current-item-color-scheme: light;
    }
  }

  @container style(--aura-color-scheme: light dark) {
    [slot="drawer"] {
      --_side-nav-current-item-color-scheme: light;
    }
  }
}

vaadin-side-nav:not(:has([slot="label"]))::part(label) {
  display: none;
}

html {
  cursor: default;
  --_vaadin-icon-chevron-down: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>");
}

::view-transition {
  pointer-events: none;
}

html:has(vaadin-app-layout) {
  &, & body {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
  }
}

vaadin-scroller:not([overflow]) {
  min-width: 0;
  min-height: 0;
  overflow: visible;
}