@charset "UTF-8";
/**
 * Do not edit directly
 * Generated on Tue, 05 Mar 2024 01:31:17 GMT
 */
:root {
  --cr-layer-important: 2147483647;
  --cr-layer-10: 10;
  --cr-layer-9: 9;
  --cr-layer-8: 8;
  --cr-layer-7: 7;
  --cr-layer-6: 6;
  --cr-layer-5: 5;
  --cr-layer-4: 4;
  --cr-layer-3: 3;
  --cr-layer-2: 2;
  --cr-layer-1: 1;
  --cr-layer-0: 0;
  --cr-size-header-3: 35ch;
  --cr-size-header-2: 25ch;
  --cr-size-header-1: 20ch;
  --cr-size-content-4: 70ch;
  --cr-size-content-3: 60ch;
  --cr-size-content-2: 45ch;
  --cr-size-content-1: 20ch;
  --cr-size-fluid-10: clamp(20rem, 40vw, 30rem);
  --cr-size-fluid-9: clamp(15rem, 30vw, 20rem);
  --cr-size-fluid-8: clamp(4.00rem, calc(3.22rem + 3.90vw), 6.00rem);
  --cr-size-fluid-7: clamp(3.00rem, calc(2.41rem + 2.93vw), 4.50rem);
  --cr-size-fluid-6: clamp(2.50rem, calc(2.01rem + 2.44vw), 3.75rem);
  --cr-size-fluid-5: clamp(2.00rem, calc(1.61rem + 1.95vw), 3.00rem);
  --cr-size-fluid-4: clamp(1.50rem, calc(1.21rem + 1.46vw), 2.25rem);
  --cr-size-fluid-3: clamp(1.00rem, calc(0.80rem + 0.98vw), 1.50rem);
  --cr-size-fluid-2: clamp(0.50rem, calc(0.40rem + 0.49vw), 0.75rem);
  --cr-size-fluid-1: clamp(0.25rem, calc(0.20rem + 0.24vw), 0.38rem);
  --cr-size-00: -0.25rem;
  --cr-size-000: -0.5rem;
  --cr-size-15: 30rem;
  --cr-size-14: 20rem;
  --cr-size-13: 15rem;
  --cr-size-12: 10rem;
  --cr-size-11: 7.5rem;
  --cr-size-10: 5rem;
  --cr-size-9: 4rem;
  --cr-size-8: 3rem;
  --cr-size-7: 2.5rem;
  --cr-size-6: 2rem;
  --cr-size-5: 1.5rem;
  --cr-size-4: 1.25rem;
  --cr-size-3: 1rem;
  --cr-size-2: 0.5rem;
  --cr-size-1: 0.25rem;
  --cr-inner-shadow-5: inset 0 2px 14px 0 hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 9%));
  --cr-inner-shadow-4: inset 0 2px 8px 0 hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 9%));
  --cr-inner-shadow-3: inset 0 1px 4px 0 hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 9%));
  --cr-inner-shadow-2: inset 0 1px 2px 0 hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 9%));
  --cr-inner-shadow-1: inset 0 0 0 1px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 9%));
  --cr-shadow-6: 0 -1px 2px 0 hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 2%)), 0 3px 2px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 3%)), 0 7px 5px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 3%)), 0 12px 10px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 4%)), 0 22px 18px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 5%)), 0 41px 33px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 6%)), 0 100px 80px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 7%));
  --cr-shadow-5: 0 -1px 2px 0 hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 2%)), 0 2px 1px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 3%)), 0 10px 10px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 4%)), 0 20px 20px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 5%)), 0 40px 40px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 7%));
  --cr-shadow-4: 0 -2px 5px 0 hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 2%)), 0 1px 1px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 3%)), 0 2px 2px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 4%)), 0 9px 9px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 5%)), 0 16px 16px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 6%));
  --cr-shadow-3: 0 -1px 3px 0 hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 2%)), 0 1px 2px -5px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 2%)), 0 2px 5px -5px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 4%)), 0 4px 12px -5px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 5%)), 0 12px 15px -5px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 7%));
  --cr-shadow-2: 0 3px 5px -2px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 5%));
  --cr-shadow-1: 0 1px 2px -1px hsl(var(--cr-shadow-color) / calc(var(--cr-shadow-strength) + 9%));
  --cr-ratio-golden: 1.6180/1;
  --cr-ratio-ultrawide: 18/5;
  --cr-ratio-widescreen: 16/9;
  --cr-ratio-portrait: 3/4;
  --cr-ratio-landscape: 4/3;
  --cr-ratio-square: 1;
  --cr-font-size-00: .75rem;
  --cr-font-size-5: 2rem;
  --cr-font-size-4: 1.5rem;
  --cr-font-size-3: 1.25rem;
  --cr-font-size-2: 1.125rem;
  --cr-font-size-1: 1rem;
  --cr-font-size-0: .875rem;
  --cr-font-letterspacing-7: 1em;
  --cr-font-letterspacing-6: .75em;
  --cr-font-letterspacing-5: .5em;
  --cr-font-letterspacing-4: .15em;
  --cr-font-letterspacing-3: .075em;
  --cr-font-letterspacing-2: .05em;
  --cr-font-letterspacing-1: .025em;
  --cr-font-letterspacing-0: -0.05em;
  --cr-font-lineheight-6: 2.75;
  --cr-font-lineheight-5: 2.25;
  --cr-font-lineheight-4: 1.75;
  --cr-font-lineheight-3: 1.5;
  --cr-font-lineheight-2: 1.25;
  --cr-font-lineheight-1: 1.1;
  --cr-font-weight-900: 900;
  --cr-font-weight-800: 800;
  --cr-font-weight-700: 700;
  --cr-font-weight-600: 600;
  --cr-font-weight-500: 500;
  --cr-font-weight-400: 400;
  --cr-font-weight-300: 300;
  --cr-font-weight-200: 200;
  --cr-font-weight-100: 100;
  --cr-font-family-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;
  --cr-font-family-serif: ui-serif, serif;
  --cr-font-family-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  --cr-ease-step-5: steps(10);
  --cr-ease-step-4: steps(7);
  --cr-ease-step-3: steps(4);
  --cr-ease-step-2: steps(3);
  --cr-ease-step-1: steps(2);
  --cr-ease-squish-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);
  --cr-ease-squish-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
  --cr-ease-squish-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
  --cr-ease-squish-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
  --cr-ease-squish-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
  --cr-ease-elastic-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
  --cr-ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
  --cr-ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
  --cr-ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
  --cr-ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
  --cr-ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
  --cr-ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
  --cr-ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
  --cr-ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
  --cr-ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
  --cr-ease-out-5: cubic-bezier(0, 0, 0, 1);
  --cr-ease-out-4: cubic-bezier(0, 0, 0.1, 1);
  --cr-ease-out-3: cubic-bezier(0, 0, 0.3, 1);
  --cr-ease-out-2: cubic-bezier(0, 0, 0.5, 1);
  --cr-ease-out-1: cubic-bezier(0, 0, 0.75, 1);
  --cr-ease-in-5: cubic-bezier(1, 0, 1, 1);
  --cr-ease-in-4: cubic-bezier(0.9, 0, 1, 1);
  --cr-ease-in-3: cubic-bezier(0.7, 0, 1, 1);
  --cr-ease-in-2: cubic-bezier(0.5, 0, 1, 1);
  --cr-ease-in-1: cubic-bezier(0.25, 0, 1, 1);
  --cr-ease-5: cubic-bezier(0.25, 0, 0.1, 1);
  --cr-ease-4: cubic-bezier(0.25, 0, 0.2, 1);
  --cr-ease-3: cubic-bezier(0.25, 0, 0.3, 1);
  --cr-ease-2: cubic-bezier(0.25, 0, 0.4, 1);
  --cr-ease-1: cubic-bezier(0.25, 0, 0.5, 1);
  --cr-duration-10: 5000ms;
  --cr-duration-9: 3000ms;
  --cr-duration-8: 2000ms;
  --cr-duration-7: 1000ms;
  --cr-duration-6: 500ms;
  --cr-duration-5: 250ms;
  --cr-duration-4: 220ms;
  --cr-duration-3: 190ms;
  --cr-duration-2: 160ms;
  --cr-duration-1: 130ms;
  --cr-color-gray-1100: hsl(210, 6%, 13%);
  --cr-color-gray-1000: hsl(195, 5%, 16%);
  --cr-color-gray-900: hsl(200, 5%, 24%);
  --cr-color-gray-800: hsl(202, 5%, 43%);
  --cr-color-gray-700: hsl(201, 6%, 56%);
  --cr-color-gray-600: hsl(204, 7%, 73%);
  --cr-color-gray-500: hsl(210, 6%, 86%);
  --cr-color-gray-400: hsl(200, 9%, 94%);
  --cr-color-gray-300: hsl(240, 6%, 97%);
  --cr-color-gray-200: hsl(210, 33%, 99%);
  --cr-color-gray-100: hsl(0, 0%, 100%);
  --cr-color-red-900: hsl(358, 52%, 24%);
  --cr-color-red-700: hsl(358, 53%, 50%);
  --cr-color-red-600: hsl(358, 74%, 58%);
  --cr-color-red-300: hsl(359, 74%, 79%);
  --cr-color-red-200: hsl(358, 76%, 92%);
  --cr-color-red-100: hsl(0, 71%, 96%);
  --cr-color-yellow-900: hsl(16, 84%, 22%);
  --cr-color-yellow-700: hsl(38, 100%, 50%);
  --cr-color-yellow-600: hsl(44, 100%, 51%);
  --cr-color-yellow-300: hsl(46, 86%, 78%);
  --cr-color-yellow-200: hsl(45, 86%, 92%);
  --cr-color-yellow-100: hsl(47, 82%, 96%);
  --cr-color-teal-900: hsl(174, 76%, 15%);
  --cr-color-teal-700: hsl(173, 77%, 31%);
  --cr-color-teal-600: hsl(174, 77%, 35%);
  --cr-color-teal-300: hsl(173, 44%, 67%);
  --cr-color-teal-200: hsl(174, 42%, 87%);
  --cr-color-teal-100: hsl(171, 44%, 94%);
  --cr-color-green-900: hsl(132, 43%, 18%);
  --cr-color-green-700: hsl(131, 42%, 38%);
  --cr-color-green-600: hsl(131, 42%, 45%);
  --cr-color-green-300: hsl(132, 35%, 72%);
  --cr-color-green-200: hsl(132, 36%, 89%);
  --cr-color-green-100: hsl(132, 36%, 95%);
  --cr-color-blue-900: hsl(206, 100%, 21%);
  --cr-color-blue-700: hsl(206, 100%, 43%);
  --cr-color-blue-600: hsl(206, 100%, 49%);
  --cr-color-blue-300: hsl(206, 100%, 74%);
  --cr-color-blue-200: hsl(206, 100%, 90%);
  --cr-color-blue-100: hsl(205, 100%, 95%);
  --cr-color-purple-700: hsl(328, 52%, 32%);
  --cr-color-purple-600: hsl(324, 70%, 40%);
  --cr-color-purple-500: hsl(339, 100%, 83%);
  --cr-color-purple-300: hsl(329, 24%, 72%);
  --cr-color-purple-200: hsl(328, 24%, 89%);
  --cr-color-purple-100: hsl(334, 26%, 95%);
  --cr-border-radius-round-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--cr-border-radius-6));
  --cr-border-radius-round-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--cr-border-radius-5));
  --cr-border-radius-round-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--cr-border-radius-4));
  --cr-border-radius-round-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--cr-border-radius-3));
  --cr-border-radius-round-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--cr-border-radius-2));
  --cr-border-radius-round-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--cr-border-radius-1));
  --cr-border-radius-round: 1e5px;
  --cr-border-radius-6: 8rem;
  --cr-border-radius-5: 4rem;
  --cr-border-radius-4: 2rem;
  --cr-border-radius-3: 1rem;
  --cr-border-radius-2: 4px;
  --cr-border-radius-1: 2px;
  --cr-border-size-5: 16px;
  --cr-border-size-4: 8px;
  --cr-border-size-3: 4px;
  --cr-border-size-2: 2px;
  --cr-border-size-1: 1px;
}

/**
 * Do not edit directly
 * Generated on Tue, 05 Mar 2024 01:31:17 GMT
 */
:root {
  --cr-font-label-bold-line-height: var(--cr-font-lineheight-1);
  --cr-font-label-bold-weight: var(--cr-font-weight-700);
  --cr-font-label-bold-size: var(--cr-font-size-00);
  --cr-font-label-bold-family: var(--cr-font-family-sans);
  --cr-font-label-semi-bold-line-height: var(--cr-font-lineheight-1);
  --cr-font-label-semi-bold-weight: var(--cr-font-weight-600);
  --cr-font-label-semi-bold-size: var(--cr-font-size-00);
  --cr-font-label-semi-bold-family: var(--cr-font-family-sans);
  --cr-font-label-regular-line-height: var(--cr-font-lineheight-1);
  --cr-font-label-regular-weight: var(--cr-font-weight-400);
  --cr-font-label-regular-size: var(--cr-font-size-00);
  --cr-font-label-regular-family: var(--cr-font-family-sans);
  --cr-font-body-small-semibold-line-height: var(--cr-font-lineheight-2);
  --cr-font-body-small-semibold-weight: var(--cr-font-weight-600);
  --cr-font-body-small-semibold-size: var(--cr-font-size-0);
  --cr-font-body-small-semibold-family: var(--cr-font-family-sans);
  --cr-font-body-small-regular-line-height: var(--cr-font-lineheight-2);
  --cr-font-body-small-regular-weight: var(--cr-font-weight-400);
  --cr-font-body-small-regular-size: var(--cr-font-size-0);
  --cr-font-body-small-regular-family: var(--cr-font-family-sans);
  --cr-font-body-semibold-line-height: var(--cr-font-lineheight-3);
  --cr-font-body-semibold-weight: var(--cr-font-weight-600);
  --cr-font-body-semibold-size: var(--cr-font-size-1);
  --cr-font-body-semibold-family: var(--cr-font-family-sans);
  --cr-font-body-regular-line-height: var(--cr-font-lineheight-3);
  --cr-font-body-regular-weight: var(--cr-font-weight-400);
  --cr-font-body-regular-size: var(--cr-font-size-1);
  --cr-font-body-regular-family: var(--cr-font-family-sans);
  --cr-font-heading-4-semibold-line-height: var(--cr-font-lineheight-4);
  --cr-font-heading-4-semibold-weight: var(--cr-font-weight-600);
  --cr-font-heading-4-semibold-size: var(--cr-font-size-2);
  --cr-font-heading-4-semibold-family: var(--cr-font-family-sans);
  --cr-font-heading-4-medium-line-height: var(--cr-font-lineheight-4);
  --cr-font-heading-4-medium-weight: var(--cr-font-weight-500);
  --cr-font-heading-4-medium-size: var(--cr-font-size-2);
  --cr-font-heading-4-medium-family: var(--cr-font-family-sans);
  --cr-font-heading-3-lineheight: var(--cr-font-lineheight-4);
  --cr-font-heading-3-weight: var(--cr-font-weight-400);
  --cr-font-heading-3-size: var(--cr-font-size-3);
  --cr-font-heading-3-family: var(--cr-font-family-sans);
  --cr-font-heading-2-lineheight: var(--cr-font-lineheight-5);
  --cr-font-heading-2-weight: var(--cr-font-weight-600);
  --cr-font-heading-2-size: var(--cr-font-size-4);
  --cr-font-heading-2-family: var(--cr-font-family-sans);
  --cr-font-heading-1-lineheight: var(--cr-font-lineheight-6);
  --cr-font-heading-1-weight: var(--cr-font-weight-600);
  --cr-font-heading-1-size: var(--cr-font-size-5);
  --cr-font-heading-1-family: var(--cr-font-family-sans);
  --cr-color-brand-darkmode: var(--cr-color-purple-500);
  --cr-color-brand-lightmode: var(--cr-color-purple-700);
  --cr-color-brand-border-darkmode: var(--cr-color-purple-300);
  --cr-color-brand-border-lightmode: var(--cr-color-purple-300);
  --cr-color-brand-bg-2-darkmode: var(--cr-color-purple-700);
  --cr-color-brand-bg-2-lightmode: var(--cr-color-purple-200);
  --cr-color-brand-bg-1-darkmode: var(--cr-color-gray-1000);
  --cr-color-brand-bg-1-lightmode: var(--cr-color-purple-100);
  --cr-color-brand-hover-darkmode: var(--cr-color-purple-600);
  --cr-color-brand-hover-lightmode: var(--cr-color-purple-600);
  --cr-color-danger-hover-darkmode: var(--cr-color-red-700);
  --cr-color-danger-hover-lightmode: var(--cr-color-red-600);
  --cr-color-danger-border-darkmode: var(--cr-color-red-300);
  --cr-color-danger-border-lightmode: var(--cr-color-red-300);
  --cr-color-danger-bg-2-darkmode: var(--cr-color-red-900);
  --cr-color-danger-bg-2-lightmode: var(--cr-color-red-200);
  --cr-color-danger-bg-1-darkmode: var(--cr-color-gray-1000);
  --cr-color-danger-bg-1-lightmode: var(--cr-color-red-100);
  --cr-color-danger-darkmode: var(--cr-color-red-600);
  --cr-color-danger-lightmode: var(--cr-color-red-700);
  --cr-color-warning-hover-darkmode: var(--cr-color-yellow-700);
  --cr-color-warning-hover-lightmode: var(--cr-color-yellow-600);
  --cr-color-warning-border-darkmode: var(--cr-color-yellow-300);
  --cr-color-warning-border-lightmode: var(--cr-color-yellow-300);
  --cr-color-warning-bg-2-darkmode: var(--cr-color-yellow-900);
  --cr-color-warning-bg-2-lightmode: var(--cr-color-yellow-200);
  --cr-color-warning-bg-1-darkmode: var(--cr-color-gray-1000);
  --cr-color-warning-bg-1-lightmode: var(--cr-color-yellow-100);
  --cr-color-warning-darkmode: var(--cr-color-yellow-600);
  --cr-color-warning-lightmode: var(--cr-color-yellow-700);
  --cr-color-primary-hover-darkmode: var(--cr-color-teal-700);
  --cr-color-primary-hover-lightmode: var(--cr-color-teal-600);
  --cr-color-primary-border-darkmode: var(--cr-color-teal-300);
  --cr-color-primary-border-lightmode: var(--cr-color-teal-300);
  --cr-color-primary-bg-2-darkmode: var(--cr-color-teal-900);
  --cr-color-primary-bg-2-lightmode: var(--cr-color-teal-200);
  --cr-color-primary-bg-1-darkmode: var(--cr-color-gray-1000);
  --cr-color-primary-bg-1-lightmode: var(--cr-color-teal-100);
  --cr-color-primary-darkmode: var(--cr-color-teal-600);
  --cr-color-primary-lightmode: var(--cr-color-teal-700);
  --cr-color-success-hover-darkmode: var(--cr-color-green-700);
  --cr-color-success-hover-lightmode: var(--cr-color-green-600);
  --cr-color-success-border-darkmode: var(--cr-color-green-300);
  --cr-color-success-border-lightmode: var(--cr-color-green-300);
  --cr-color-success-bg-2-darkmode: var(--cr-color-green-900);
  --cr-color-success-bg-2-lightmode: var(--cr-color-green-200);
  --cr-color-success-bg-1-darkmode: var(--cr-color-gray-1000);
  --cr-color-success-bg-1-lightmode: var(--cr-color-green-100);
  --cr-color-success-darkmode: var(--cr-color-green-600);
  --cr-color-success-lightmode: var(--cr-color-green-700);
  --cr-color-informative-hover-darkmode: var(--cr-color-blue-700);
  --cr-color-informative-hover-lightmode: var(--cr-color-blue-600);
  --cr-color-informative-border-darkmode: var(--cr-color-blue-300);
  --cr-color-informative-border-lightmode: var(--cr-color-blue-300);
  --cr-color-informative-bg-2-darkmode: var(--cr-color-blue-900);
  --cr-color-informative-bg-2-lightmode: var(--cr-color-blue-200);
  --cr-color-informative-bg-1-darkmode: var(--cr-color-gray-1000);
  --cr-color-informative-bg-1-lightmode: var(--cr-color-blue-100);
  --cr-color-informative-darkmode: var(--cr-color-blue-600);
  --cr-color-informative-lightmode: var(--cr-color-blue-700);
  --cr-color-neutral-choice-darkmode: var(--cr-color-gray-200);
  --cr-color-neutral-choice-lightmode: var(--cr-color-gray-1100);
  --cr-color-neutral-text-gray-static-darkmode: var(--cr-color-gray-1100);
  --cr-color-neutral-text-gray-static-lightmode: var(--cr-color-gray-1100);
  --cr-color-neutral-text-white-static-darkmode: var(--cr-color-gray-100);
  --cr-color-neutral-text-white-static-lightmode: var(--cr-color-gray-100);
  --cr-color-neutral-text-darkmode: var(--cr-color-gray-200);
  --cr-color-neutral-text-lightmode: var(--cr-color-gray-1100);
  --cr-color-neutral-text-invert-darkmode: var(--cr-color-gray-1100);
  --cr-color-neutral-text-invert-lightmode: var(--cr-color-gray-100);
  --cr-color-neutral-text-subtle-darkmode: var(--cr-color-gray-700);
  --cr-color-neutral-text-subtle-lightmode: var(--cr-color-gray-800);
  --cr-color-neutral-disabled-darkmode: var(--cr-color-gray-800);
  --cr-color-neutral-disabled-lightmode: var(--cr-color-gray-700);
  --cr-color-neutral-border-2-darkmode: var(--cr-color-gray-600);
  --cr-color-neutral-border-2-lightmode: var(--cr-color-gray-600);
  --cr-color-neutral-border-1-darkmode: var(--cr-color-gray-800);
  --cr-color-neutral-border-1-lightmode: var(--cr-color-gray-500);
  --cr-color-neutral-border-table-darkmode: var(--cr-color-gray-900);
  --cr-color-neutral-border-table-lightmode: var(--cr-color-gray-400);
  --cr-color-neutral-bg-2-darkmode: var(--cr-color-gray-900);
  --cr-color-neutral-bg-2-lightmode: var(--cr-color-gray-400);
  --cr-color-neutral-bg-1-darkmode: var(--cr-color-gray-1000);
  --cr-color-neutral-bg-1-lightmode: var(--cr-color-gray-300);
  --cr-color-neutral-bg-0-darkmode: var(--cr-color-gray-1100);
  --cr-color-neutral-bg-0-lightmode: var(--cr-color-gray-100);
  --cr-color-page-bg-darkmode: var(--cr-color-gray-1000);
  --cr-color-page-bg-lightmode: var(--cr-color-gray-200);
}

:where(html),
[color-scheme=light] {
  color-scheme: light;
  --cr-color-page-bg: var(--cr-color-page-bg-lightmode);
  --cr-color-neutral-bg-0: var(--cr-color-neutral-bg-0-lightmode);
  --cr-color-neutral-bg-1: var(--cr-color-neutral-bg-1-lightmode);
  --cr-color-neutral-bg-2: var(--cr-color-neutral-bg-2-lightmode);
  --cr-color-neutral-border-table: var(--cr-color-neutral-border-table-lightmode);
  --cr-color-neutral-border-1: var(--cr-color-neutral-border-1-lightmode);
  --cr-color-neutral-border-2: var(--cr-color-neutral-border-2-lightmode);
  --cr-color-neutral-disabled: var(--cr-color-neutral-disabled-lightmode);
  --cr-color-neutral-text: var(--cr-color-neutral-text-lightmode);
  --cr-color-neutral-text-subtle: var(--cr-color-neutral-text-subtle-lightmode);
  --cr-color-neutral-text-invert: var(--cr-color-neutral-text-invert-lightmode);
  --cr-color-neutral-text-white-static: var(--cr-color-neutral-text-white-static-lightmode);
  --cr-color-neutral-text-gray-static: var(--cr-color-neutral-text-gray-static-lightmode);
  --cr-color-neutral-choice: var(--cr-color-neutral-choice-lightmode);
  --cr-color-informative: var(--cr-color-informative-lightmode);
  --cr-color-informative-bg-1: var(--cr-color-informative-bg-1-lightmode);
  --cr-color-informative-bg-2: var(--cr-color-informative-bg-2-lightmode);
  --cr-color-informative-border: var(--cr-color-informative-border-lightmode);
  --cr-color-informative-hover: var(--cr-color-informative-hover-lightmode);
  --cr-color-success: var(--cr-color-success-lightmode);
  --cr-color-success-bg-1: var(--cr-color-success-bg-1-lightmode);
  --cr-color-success-bg-2: var(--cr-color-success-bg-2-lightmode);
  --cr-color-success-border: var(--cr-color-success-border-lightmode);
  --cr-color-success-hover: var(--cr-color-success-hover-lightmode);
  --cr-color-warning: var(--cr-color-warning-lightmode);
  --cr-color-warning-bg-1: var(--cr-color-warning-bg-1-lightmode);
  --cr-color-warning-bg-2: var(--cr-color-warning-bg-2-lightmode);
  --cr-color-warning-border: var(--cr-color-warning-border-lightmode);
  --cr-color-warning-hover: var(--cr-color-warning-hover-lightmode);
  --cr-color-danger: var(--cr-color-danger-lightmode);
  --cr-color-danger-bg-1: var(--cr-color-danger-bg-1-lightmode);
  --cr-color-danger-bg-2: var(--cr-color-danger-bg-2-lightmode);
  --cr-color-danger-border: var(--cr-color-danger-border-lightmode);
  --cr-color-danger-hover: var(--cr-color-danger-hover-lightmode);
  --cr-color-primary: var(--cr-color-primary-lightmode);
  --cr-color-primary-bg-1: var(--cr-color-primary-bg-1-lightmode);
  --cr-color-primary-bg-2: var(--cr-color-primary-bg-2-lightmode);
  --cr-color-primary-border: var(--cr-color-primary-border-lightmode);
  --cr-color-primary-hover: var(--cr-color-primary-hover-lightmode);
  --cr-color-brand: var(--cr-color-brand-lightmode);
  --cr-color-brand-bg-1: var(--cr-color-brand-bg-1-lightmode);
  --cr-color-brand-bg-2: var(--cr-color-brand-bg-2-lightmode);
  --cr-color-brand-border: var(--cr-color-brand-border-lightmode);
  --cr-color-brand-hover: var(--cr-color-brand-hover-lightmode);
}

[color-scheme=dark] {
  color-scheme: dark;
  --cr-color-page-bg: var(--cr-color-page-bg-darkmode);
  --cr-color-neutral-bg-0: var(--cr-color-neutral-bg-0-darkmode);
  --cr-color-neutral-bg-1: var(--cr-color-neutral-bg-1-darkmode);
  --cr-color-neutral-bg-2: var(--cr-color-neutral-bg-2-darkmode);
  --cr-color-neutral-border-table: var(--cr-color-neutral-border-table-darkmode);
  --cr-color-neutral-border-1: var(--cr-color-neutral-border-1-darkmode);
  --cr-color-neutral-border-2: var(--cr-color-neutral-border-2-darkmode);
  --cr-color-neutral-disabled: var(--cr-color-neutral-disabled-darkmode);
  --cr-color-neutral-text: var(--cr-color-neutral-text-darkmode);
  --cr-color-neutral-text-subtle: var(--cr-color-neutral-text-subtle-darkmode);
  --cr-color-neutral-text-invert: var(--cr-color-neutral-text-invert-darkmode);
  --cr-color-neutral-text-white-static: var(--cr-color-neutral-text-white-static-darkmode);
  --cr-color-neutral-text-gray-static: var(--cr-color-neutral-text-gray-static-darkmode);
  --cr-color-neutral-choice: var(--cr-color-neutral-choice-darkmode);
  --cr-color-informative: var(--cr-color-informative-darkmode);
  --cr-color-informative-bg-1: var(--cr-color-informative-bg-1-darkmode);
  --cr-color-informative-bg-2: var(--cr-color-informative-bg-2-darkmode);
  --cr-color-informative-border: var(--cr-color-informative-border-darkmode);
  --cr-color-informative-hover: var(--cr-color-informative-hover-darkmode);
  --cr-color-success: var(--cr-color-success-darkmode);
  --cr-color-success-bg-1: var(--cr-color-success-bg-1-darkmode);
  --cr-color-success-bg-2: var(--cr-color-success-bg-2-darkmode);
  --cr-color-success-border: var(--cr-color-success-border-darkmode);
  --cr-color-success-hover: var(--cr-color-success-hover-darkmode);
  --cr-color-warning: var(--cr-color-warning-darkmode);
  --cr-color-warning-bg-1: var(--cr-color-warning-bg-1-darkmode);
  --cr-color-warning-bg-2: var(--cr-color-warning-bg-2-darkmode);
  --cr-color-warning-border: var(--cr-color-warning-border-darkmode);
  --cr-color-warning-hover: var(--cr-color-warning-hover-darkmode);
  --cr-color-danger: var(--cr-color-danger-darkmode);
  --cr-color-danger-bg-1: var(--cr-color-danger-bg-1-darkmode);
  --cr-color-danger-bg-2: var(--cr-color-danger-bg-2-darkmode);
  --cr-color-danger-border: var(--cr-color-danger-border-darkmode);
  --cr-color-danger-hover: var(--cr-color-danger-hover-darkmode);
  --cr-color-primary: var(--cr-color-primary-darkmode);
  --cr-color-primary-bg-1: var(--cr-color-primary-bg-1-darkmode);
  --cr-color-primary-bg-2: var(--cr-color-primary-bg-2-darkmode);
  --cr-color-primary-border: var(--cr-color-primary-border-darkmode);
  --cr-color-primary-hover: var(--cr-color-primary-hover-darkmode);
  --cr-color-brand: var(--cr-color-brand-darkmode);
  --cr-color-brand-bg-1: var(--cr-color-brand-bg-1-darkmode);
  --cr-color-brand-bg-2: var(--cr-color-brand-bg-2-darkmode);
  --cr-color-brand-border: var(--cr-color-brand-border-darkmode);
  --cr-color-brand-hover: var(--cr-color-brand-hover-darkmode);
}

@media (prefers-color-scheme: dark) {
  :where(html) {
    color-scheme: dark;
    --cr-color-page-bg: var(--cr-color-page-bg-darkmode);
    --cr-color-neutral-bg-0: var(--cr-color-neutral-bg-0-darkmode);
    --cr-color-neutral-bg-1: var(--cr-color-neutral-bg-1-darkmode);
    --cr-color-neutral-bg-2: var(--cr-color-neutral-bg-2-darkmode);
    --cr-color-neutral-border-table: var(--cr-color-neutral-border-table-darkmode);
    --cr-color-neutral-border-1: var(--cr-color-neutral-border-1-darkmode);
    --cr-color-neutral-border-2: var(--cr-color-neutral-border-2-darkmode);
    --cr-color-neutral-disabled: var(--cr-color-neutral-disabled-darkmode);
    --cr-color-neutral-text: var(--cr-color-neutral-text-darkmode);
    --cr-color-neutral-text-subtle: var(--cr-color-neutral-text-subtle-darkmode);
    --cr-color-neutral-text-invert: var(--cr-color-neutral-text-invert-darkmode);
    --cr-color-neutral-text-white-static: var(--cr-color-neutral-text-white-static-darkmode);
    --cr-color-neutral-text-gray-static: var(--cr-color-neutral-text-gray-static-darkmode);
    --cr-color-neutral-choice: var(--cr-color-neutral-choice-darkmode);
    --cr-color-informative: var(--cr-color-informative-darkmode);
    --cr-color-informative-bg-1: var(--cr-color-informative-bg-1-darkmode);
    --cr-color-informative-bg-2: var(--cr-color-informative-bg-2-darkmode);
    --cr-color-informative-border: var(--cr-color-informative-border-darkmode);
    --cr-color-informative-hover: var(--cr-color-informative-hover-darkmode);
    --cr-color-success: var(--cr-color-success-darkmode);
    --cr-color-success-bg-1: var(--cr-color-success-bg-1-darkmode);
    --cr-color-success-bg-2: var(--cr-color-success-bg-2-darkmode);
    --cr-color-success-border: var(--cr-color-success-border-darkmode);
    --cr-color-success-hover: var(--cr-color-success-hover-darkmode);
    --cr-color-warning: var(--cr-color-warning-darkmode);
    --cr-color-warning-bg-1: var(--cr-color-warning-bg-1-darkmode);
    --cr-color-warning-bg-2: var(--cr-color-warning-bg-2-darkmode);
    --cr-color-warning-border: var(--cr-color-warning-border-darkmode);
    --cr-color-warning-hover: var(--cr-color-warning-hover-darkmode);
    --cr-color-danger: var(--cr-color-danger-darkmode);
    --cr-color-danger-bg-1: var(--cr-color-danger-bg-1-darkmode);
    --cr-color-danger-bg-2: var(--cr-color-danger-bg-2-darkmode);
    --cr-color-danger-border: var(--cr-color-danger-border-darkmode);
    --cr-color-danger-hover: var(--cr-color-danger-hover-darkmode);
    --cr-color-primary: var(--cr-color-primary-darkmode);
    --cr-color-primary-bg-1: var(--cr-color-primary-bg-1-darkmode);
    --cr-color-primary-bg-2: var(--cr-color-primary-bg-2-darkmode);
    --cr-color-primary-border: var(--cr-color-primary-border-darkmode);
    --cr-color-primary-hover: var(--cr-color-primary-hover-darkmode);
    --cr-color-brand: var(--cr-color-brand-darkmode);
    --cr-color-brand-bg-1: var(--cr-color-brand-bg-1-darkmode);
    --cr-color-brand-bg-2: var(--cr-color-brand-bg-2-darkmode);
    --cr-color-brand-border: var(--cr-color-brand-border-darkmode);
    --cr-color-brand-hover: var(--cr-color-brand-hover-darkmode);
  }
}
:root {
  --cr-color-brand-purple: hsl(310, 67%, 18%);
  --cr-color-brand-purple-d: hsl(328, 52%, 32%);
  --cr-color-brand-1: hsl(324, 100%, 99%);
  --cr-color-brand-2: hsl(324, 100%, 98%);
  --cr-color-brand-3: hsl(324, 88%, 97%);
  --cr-color-brand-4: hsl(324, 79%, 94%);
  --cr-color-brand-5: hsl(324, 73%, 91%);
  --cr-color-brand-6: hsl(324, 68%, 87%);
  --cr-color-brand-7: hsl(324, 64%, 80%);
  --cr-color-brand-8: hsl(324, 62%, 73%);
  --cr-color-brand-9: hsl(324, 80%, 35%);
  --cr-color-brand-10: hsl(324, 70%, 40%);
  --cr-color-brand-11: hsl(324, 85%, 35%);
  --cr-color-brand-12: hsl(324, 65%, 15%);
  --cr-color-brand-dark-1: hsl(324, 18%, 10%);
  --cr-color-brand-dark-2: hsl(324, 32%, 12%);
  --cr-color-brand-dark-3: hsl(324, 43%, 16%);
  --cr-color-brand-dark-4: hsl(324, 47%, 19%);
  --cr-color-brand-dark-5: hsl(324, 51%, 22%);
  --cr-color-brand-dark-6: hsl(324, 55%, 25%);
  --cr-color-brand-dark-7: hsl(324, 63%, 31%);
  --cr-color-brand-dark-8: hsl(326, 75%, 39%);
  --cr-color-brand-dark-9: hsl(330, 70%, 58%);
  --cr-color-brand-dark-10: hsl(330, 75%, 63%);
  --cr-color-brand-dark-11: hsl(330, 90%, 70%);
  --cr-color-brand-dark-12: hsl(330, 90%, 96%);
  --cr-color-accent-1: hsl(340, 100%, 99%);
  --cr-color-accent-2: hsl(330, 100%, 98%);
  --cr-color-accent-3: hsl(332, 88%, 97%);
  --cr-color-accent-4: hsl(331, 79%, 94%);
  --cr-color-accent-5: hsl(333, 73%, 91%);
  --cr-color-accent-6: hsl(333, 68%, 87%);
  --cr-color-accent-7: hsl(335, 65%, 80%);
  --cr-color-accent-8: hsl(336, 62%, 73%);
  --cr-color-accent-9: hsl(336, 80%, 58%);
  --cr-color-accent-10: hsl(336, 74%, 54%);
  --cr-color-accent-11: hsl(336, 75%, 47%);
  --cr-color-accent-12: hsl(340, 65%, 15%);
  --cr-color-accent-dark-1: hsl(350, 24%, 10%);
  --cr-color-accent-dark-2: hsl(335, 32%, 12%);
  --cr-color-accent-dark-3: hsl(335, 43%, 16%);
  --cr-color-accent-dark-4: hsl(335, 47%, 19%);
  --cr-color-accent-dark-5: hsl(335, 51%, 22%);
  --cr-color-accent-dark-6: hsl(335, 55%, 25%);
  --cr-color-accent-dark-7: hsl(336, 63%, 31%);
  --cr-color-accent-dark-8: hsl(336, 75%, 39%);
  --cr-color-accent-dark-9: hsl(336, 80%, 58%);
  --cr-color-accent-dark-10: hsl(339, 84%, 63%);
  --cr-color-accent-dark-11: hsl(341, 90%, 67%);
  --cr-color-accent-dark-12: hsl(333, 90%, 96%);
  --cr-color-brand-accent-default: var(--cr-color-accent-9);
  --cr-color-brand-accent-lighter: var(--cr-color-accent-7);
  --cr-color-brand-gray: hsl(0, 0%, 91%);
  --cr-color-gray-1: hsl(206, 30%, 98.8%);
  --cr-color-gray-2: hsl(210, 17%, 98%);
  --cr-color-gray-3: hsl(209, 13.3%, 95.3%);
  --cr-color-gray-4: hsl(210, 12%, 93%);
  --cr-color-gray-5: hsl(208, 11.7%, 91.1%);
  --cr-color-gray-6: hsl(208, 11.3%, 88.9%);
  --cr-color-gray-7: hsl(207, 11.1%, 85.9%);
  --cr-color-gray-8: hsl(205, 10.7%, 78%);
  --cr-color-gray-9: hsl(206, 6%, 56.1%);
  --cr-color-gray-10: hsl(206, 5.8%, 52.3%);
  --cr-color-gray-11: hsl(206, 6%, 44%);
  --cr-color-gray-12: hsl(202, 24%, 9%);
  --cr-color-gray-dark-1: hsl(200, 7%, 8.8%);
  --cr-color-gray-dark-2: hsl(195, 7.1%, 11%);
  --cr-color-gray-dark-3: hsl(197, 6.8%, 13.6%);
  --cr-color-gray-dark-4: hsl(198, 6.6%, 15.8%);
  --cr-color-gray-dark-5: hsl(199, 6.4%, 17.9%);
  --cr-color-gray-dark-6: hsl(201, 6.2%, 20.5%);
  --cr-color-gray-dark-7: hsl(203, 6%, 24.3%);
  --cr-color-gray-dark-8: hsl(207, 5.6%, 31.6%);
  --cr-color-gray-dark-9: hsl(206, 6%, 43.9%);
  --cr-color-gray-dark-10: hsl(206, 5.2%, 49.5%);
  --cr-color-gray-dark-11: hsl(206, 6%, 63%);
  --cr-color-gray-dark-12: hsl(210, 6%, 93%);
  --cr-color-red-1: hsl(359, 100%, 99.4%);
  --cr-color-red-2: hsl(359, 100%, 98.6%);
  --cr-color-red-3: hsl(360, 100%, 96.8%);
  --cr-color-red-4: hsl(360, 97.9%, 94.8%);
  --cr-color-red-5: hsl(360, 90.2%, 91.9%);
  --cr-color-red-6: hsl(360, 81.7%, 87.8%);
  --cr-color-red-7: hsl(359, 74.2%, 81.7%);
  --cr-color-red-8: hsl(359, 69.5%, 74.3%);
  --cr-color-red-9: hsl(358, 75%, 59%);
  --cr-color-red-10: hsl(358, 69.4%, 55.2%);
  --cr-color-red-11: hsl(358, 65%, 48.7%);
  --cr-color-red-12: hsl(354, 50%, 14.6%);
  --cr-color-red-dark-1: hsl(353, 23%, 9.8%);
  --cr-color-red-dark-2: hsl(357, 34.4%, 12%);
  --cr-color-red-dark-3: hsl(356, 43.4%, 16.4%);
  --cr-color-red-dark-4: hsl(356, 47.6%, 19.2%);
  --cr-color-red-dark-5: hsl(356, 51.1%, 21.9%);
  --cr-color-red-dark-6: hsl(356, 55.2%, 25.9%);
  --cr-color-red-dark-7: hsl(357, 60.2%, 31.8%);
  --cr-color-red-dark-8: hsl(358, 65%, 40.4%);
  --cr-color-red-dark-9: hsl(358, 75%, 59%);
  --cr-color-red-dark-10: hsl(358, 85.3%, 64%);
  --cr-color-red-dark-11: hsl(358, 100%, 69.5%);
  --cr-color-red-dark-12: hsl(351, 89%, 96%);
  --cr-color-yellow-1: hsl(60, 54%, 98.5%);
  --cr-color-yellow-2: hsl(52, 100%, 95.5%);
  --cr-color-yellow-3: hsl(55, 100%, 90.9%);
  --cr-color-yellow-4: hsl(54, 100%, 86.6%);
  --cr-color-yellow-5: hsl(52, 97.9%, 82%);
  --cr-color-yellow-6: hsl(50, 89.4%, 76.1%);
  --cr-color-yellow-7: hsl(47, 80.4%, 68%);
  --cr-color-yellow-8: hsl(48, 100%, 46.1%);
  --cr-color-yellow-9: hsl(53, 92%, 50%);
  --cr-color-yellow-10: hsl(50, 100%, 48.5%);
  --cr-color-yellow-11: hsl(42, 100%, 29%);
  --cr-color-yellow-12: hsl(40, 55%, 13.5%);
  --cr-color-yellow-dark-1: hsl(45, 100%, 5.5%);
  --cr-color-yellow-dark-2: hsl(46, 100%, 6.7%);
  --cr-color-yellow-dark-3: hsl(45, 100%, 8.7%);
  --cr-color-yellow-dark-4: hsl(45, 100%, 10.4%);
  --cr-color-yellow-dark-5: hsl(47, 100%, 12.1%);
  --cr-color-yellow-dark-6: hsl(49, 100%, 14.3%);
  --cr-color-yellow-dark-7: hsl(49, 90.3%, 18.4%);
  --cr-color-yellow-dark-8: hsl(50, 100%, 22%);
  --cr-color-yellow-dark-9: hsl(53, 92%, 50%);
  --cr-color-yellow-dark-10: hsl(54, 100%, 68%);
  --cr-color-yellow-dark-11: hsl(48, 100%, 47%);
  --cr-color-yellow-dark-12: hsl(53, 100%, 91%);
  --cr-color-green-1: hsl(116, 50%, 98.9%);
  --cr-color-green-2: hsl(120, 60%, 97.1%);
  --cr-color-green-3: hsl(120, 53.6%, 94.8%);
  --cr-color-green-4: hsl(121, 47.5%, 91.4%);
  --cr-color-green-5: hsl(122, 42.6%, 86.5%);
  --cr-color-green-6: hsl(124, 39%, 79.7%);
  --cr-color-green-7: hsl(126, 37.1%, 70.2%);
  --cr-color-green-8: hsl(131, 38.1%, 56.3%);
  --cr-color-green-9: hsl(131, 41%, 46%);
  --cr-color-green-10: hsl(132, 43.1%, 42.2%);
  --cr-color-green-11: hsl(133, 50%, 32.5%);
  --cr-color-green-12: hsl(130, 30%, 14.9%);
  --cr-color-green-dark-1: hsl(146, 30%, 7.4%);
  --cr-color-green-dark-2: hsl(136, 33.3%, 8.8%);
  --cr-color-green-dark-3: hsl(137, 36%, 11.4%);
  --cr-color-green-dark-4: hsl(137, 37.6%, 13.7%);
  --cr-color-green-dark-5: hsl(136, 38.7%, 16%);
  --cr-color-green-dark-6: hsl(135, 39.6%, 19.1%);
  --cr-color-green-dark-7: hsl(134, 40.3%, 23.8%);
  --cr-color-green-dark-8: hsl(131, 40.1%, 30.8%);
  --cr-color-green-dark-9: hsl(131, 41%, 46.5%);
  --cr-color-green-dark-10: hsl(131, 39%, 52.1%);
  --cr-color-green-dark-11: hsl(131, 43%, 57.2%);
  --cr-color-green-dark-12: hsl(137, 72%, 94%);
  --cr-color-blue-1: hsl(206, 100%, 99.2%);
  --cr-color-blue-2: hsl(210, 100%, 98%);
  --cr-color-blue-3: hsl(209, 100%, 96.5%);
  --cr-color-blue-4: hsl(210, 98.8%, 94%);
  --cr-color-blue-5: hsl(209, 95%, 90.1%);
  --cr-color-blue-6: hsl(209, 81.2%, 84.5%);
  --cr-color-blue-7: hsl(208, 77.5%, 76.9%);
  --cr-color-blue-8: hsl(206, 81.9%, 65.3%);
  --cr-color-blue-9: hsl(206, 100%, 50%);
  --cr-color-blue-10: hsl(208, 100%, 47.3%);
  --cr-color-blue-11: hsl(211, 100%, 43.2%);
  --cr-color-blue-12: hsl(211, 100%, 15%);
  --cr-color-blue-dark-1: hsl(212, 35%, 9.2%);
  --cr-color-blue-dark-2: hsl(216, 50%, 11.8%);
  --cr-color-blue-dark-3: hsl(214, 59.4%, 15.3%);
  --cr-color-blue-dark-4: hsl(214, 65.8%, 17.9%);
  --cr-color-blue-dark-5: hsl(213, 71.2%, 20.2%);
  --cr-color-blue-dark-6: hsl(212, 77.4%, 23.1%);
  --cr-color-blue-dark-7: hsl(211, 85.1%, 27.4%);
  --cr-color-blue-dark-8: hsl(211, 89.7%, 34.1%);
  --cr-color-blue-dark-9: hsl(206, 100%, 50%);
  --cr-color-blue-dark-10: hsl(209, 100%, 60.6%);
  --cr-color-blue-dark-11: hsl(210, 100%, 66.1%);
  --cr-color-blue-dark-12: hsl(206, 98%, 95.8%);
  --cr-color-white: hsl(0, 0%, 100%);
  --cr-color-black: hsl(0, 0%, 0%);
  --cr-color-negative: var(--cr-color-danger);
  --cr-color-notice: var(--cr-color-warning);
  --cr-color-positive: var(--cr-color-success);
  --cr-color-text-negative: var(--cr-color-danger);
  --cr-color-text-notice: var(--cr-color-warning);
  --cr-color-text-positive: var(--cr-color-success);
  --cr-color-text-informative: var(--cr-color-informative);
  --cr-color-teal-1: hsl(165 60.0% 98.8%);
  --cr-color-teal-2: hsl(169 64.7% 96.7%);
  --cr-color-teal-3: hsl(169 59.8% 94.0%);
  --cr-color-teal-4: hsl(169 53.1% 90.2%);
  --cr-color-teal-5: hsl(170 47.1% 85.0%);
  --cr-color-teal-6: hsl(170 42.6% 77.9%);
  --cr-color-teal-7: hsl(170 39.9% 68.1%);
  --cr-color-teal-8: hsl(172 42.1% 52.5%);
  --cr-color-teal-9: hsl(173 80.0% 36.0%);
  --cr-color-teal-10: hsl(173 83.4% 32.5%);
  --cr-color-teal-11: hsl(174 90.0% 25.2%);
  --cr-color-teal-12: hsl(170 50.0% 12.5%);
  --cr-color-teal-dark-1: hsl(168 48.0% 6.5%);
  --cr-color-teal-dark-2: hsl(169 77.8% 7.1%);
  --cr-color-teal-dark-3: hsl(170 76.1% 9.2%);
  --cr-color-teal-dark-4: hsl(171 75.8% 11.0%);
  --cr-color-teal-dark-5: hsl(171 75.7% 12.8%);
  --cr-color-teal-dark-6: hsl(172 75.8% 15.1%);
  --cr-color-teal-dark-7: hsl(172 76.7% 18.6%);
  --cr-color-teal-dark-8: hsl(173 80.2% 23.7%);
  --cr-color-teal-dark-9: hsl(173 80.0% 36.0%);
  --cr-color-teal-dark-10: hsl(174 83.9% 38.2%);
  --cr-color-teal-dark-11: hsl(174 90.0% 40.7%);
  --cr-color-teal-dark-12: hsl(166 73.0% 93.1%);
  --cr-color-violet-1: hsl(255 65.0% 99.4%);
  --cr-color-violet-2: hsl(252 100% 99.0%);
  --cr-color-violet-3: hsl(252 96.9% 97.4%);
  --cr-color-violet-4: hsl(252 91.5% 95.5%);
  --cr-color-violet-5: hsl(252 85.1% 93.0%);
  --cr-color-violet-6: hsl(252 77.8% 89.4%);
  --cr-color-violet-7: hsl(252 71.0% 83.7%);
  --cr-color-violet-8: hsl(252 68.6% 76.3%);
  --cr-color-violet-9: hsl(252 56.0% 57.5%);
  --cr-color-violet-10: hsl(251 48.1% 53.5%);
  --cr-color-violet-11: hsl(250 43.0% 48.0%);
  --cr-color-violet-12: hsl(254 60.0% 18.5%);
  --cr-color-violet-dark-1: hsl(250 20.0% 10.2%);
  --cr-color-violet-dark-2: hsl(255 30.3% 12.9%);
  --cr-color-violet-dark-3: hsl(253 37.0% 18.4%);
  --cr-color-violet-dark-4: hsl(252 40.1% 22.5%);
  --cr-color-violet-dark-5: hsl(252 42.2% 26.2%);
  --cr-color-violet-dark-6: hsl(251 44.3% 31.1%);
  --cr-color-violet-dark-7: hsl(250 46.8% 38.9%);
  --cr-color-violet-dark-8: hsl(250 51.8% 51.2%);
  --cr-color-violet-dark-9: hsl(252 56.0% 57.5%);
  --cr-color-violet-dark-10: hsl(251 63.2% 63.2%);
  --cr-color-violet-dark-11: hsl(250 95.0% 76.8%);
  --cr-color-violet-dark-12: hsl(252 87.0% 96.4%);
}

:root {
  --cr-animation-fade-in: fade-in var(--cr-duration-base) var(--cr-ease-base);
  --cr-animation-fade-out: fade-out var(--cr-duration-base) var(--cr-ease-base);
  --cr-animation-scale-up: scale-up var(--cr-duration-base) var(--cr-ease-base);
  --cr-animation-scale-down: scale-down var(--cr-duration-base) var(--cr-ease-base);
  --cr-animation-slide-out-up: slide-out-up var(--cr-duration-base) var(--cr-ease-base);
  --cr-animation-slide-out-down: slide-out-down var(--cr-duration-base) var(--cr-ease-base);
  --cr-animation-slide-out-right: slide-out-right var(--cr-duration-base) var(--cr-ease-base);
  --cr-animation-slide-out-left: slide-out-left var(--cr-duration-base) var(--cr-ease-base);
  --cr-animation-slide-in-up: slide-in-up var(--cr-duration-base) var(--cr-ease-base);
  --cr-animation-slide-in-down: slide-in-down var(--cr-duration-base) var(--cr-ease-base);
  --cr-animation-slide-in-right: slide-in-right var(--cr-duration-base) var(--cr-ease-base);
  --cr-animation-slide-in-left: slide-in-left var(--cr-duration-base) var(--cr-ease-base);
  --cr-animation-shake-x: shake-x var(--cr-duration-base) var(--cr-ease-out-5);
  --cr-animation-shake-y: shake-y var(--cr-duration-base) var(--cr-ease-out-5);
  --cr-animation-spin: spin var(--cr-duration-8) linear infinite;
  --cr-animation-ping: ping var(--cr-duration-10) var(--cr-ease-out-3) infinite;
  --cr-animation-blink: blink var(--cr-duration-7) var(--cr-ease-out-3) infinite;
  --cr-animation-float: float var(--cr-duration-9) var(--cr-ease-in-out-3) infinite;
  --cr-animation-bounce: bounce var(--cr-duration-8) var(--cr-ease-squish-2) infinite;
  --cr-animation-pulse: pulse var(--cr-duration-8) var(--cr-ease-out-3) infinite;
}
@keyframes fade-in {
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}
@keyframes scale-up {
  to {
    transform: scale(1.25);
  }
}
@keyframes scale-down {
  to {
    transform: scale(0.75);
  }
}
@keyframes slide-out-up {
  to {
    transform: translateY(-100%);
  }
}
@keyframes slide-out-down {
  to {
    transform: translateY(100%);
  }
}
@keyframes slide-out-right {
  to {
    transform: translate(100%);
  }
}
@keyframes slide-out-left {
  to {
    transform: translate(-100%);
  }
}
@keyframes slide-in-up {
  0% {
    transform: translateY(100%);
  }
}
@keyframes slide-in-down {
  0% {
    transform: translateY(-100%);
  }
}
@keyframes slide-in-right {
  0% {
    transform: translate(-100%);
  }
}
@keyframes slide-in-left {
  0% {
    transform: translate(100%);
  }
}
@keyframes shake-x {
  0%, to {
    transform: translate(0);
  }
  20% {
    transform: translate(-2.5%);
  }
  40% {
    transform: translate(2.5%);
  }
  60% {
    transform: translate(-2.5%);
  }
  80% {
    transform: translate(2.5%);
  }
}
@keyframes shake-y {
  0%, to {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-5%);
  }
  40% {
    transform: translateY(5%);
  }
  60% {
    transform: translateY(-5%);
  }
  80% {
    transform: translateY(5%);
  }
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes ping {
  90%, to {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes blink {
  0%, to {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes float {
  50% {
    transform: translateY(-25%);
  }
}
@keyframes bounce {
  25% {
    transform: translateY(-20%);
  }
  40% {
    transform: translateY(-3%);
  }
  0%, 60%, to {
    transform: translateY(0);
  }
}
@keyframes pulse {
  50% {
    transform: scale(0.9);
  }
}
@keyframes slide-in-down-popover {
  0% {
    transform: translateY(-10%);
  }
}
@keyframes scale-up-popover {
  to {
    transform: scale(100%);
  }
}

/* Inter - Bold 
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: local("Inter"), local("Inter"), url("../fonts/Inter/Inter-Bold.woff2") format("woff2"), url("../fonts/Inter/Inter-Bold.woff") format("woff"), url("../fonts/Inter/Inter-Bold.ttf") format("truetype"), url("../fonts/Inter/Inter-Bold.otf") format("opentype");
}*/
/* Inter - SemiBold 
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: local("Inter"), local("Inter"), url("../fonts/Inter/Inter-SemiBold.woff2") format("woff2"), url("../fonts/Inter/Inter-SemiBold.woff") format("woff"), url("../fonts/Inter/Inter-SemiBold.ttf") format("truetype"), url("../fonts/Inter/Inter-SemiBold.otf") format("opentype");
}*/
/* Inter - Medium
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: local("Inter"), local("Inter"), url("../fonts/Inter/Inter-Medium.woff2") format("woff2"), url("../fonts/Inter/Inter-Medium.woff") format("woff"), url("../fonts/Inter/Inter-Medium.ttf") format("truetype"), url("../fonts/Inter/Inter-Medium.otf") format("opentype");
} */
/* Inter - Regular 
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: local("Inter"), local("Inter"), url("../fonts/Inter/Inter-Regular.woff2") format("woff2"), url("../fonts/Inter/Inter-Regular.woff") format("woff"), url("../fonts/Inter/Inter-Regular.ttf") format("truetype"), url("../fonts/Inter/Inter-Regular.otf") format("opentype");
}*/
/* Inter - Light 
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  src: local("Inter"), local("Inter"), url("../fonts/Inter/Inter-Light.woff2") format("woff2"), url("../fonts/Inter/Inter-Light.woff") format("woff"), url("../fonts/Inter/Inter-Light.ttf") format("truetype"), url("../fonts/Inter/Inter-Light.otf") format("opentype");
}*/
/* Inter - Extra Light 
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200;
  src: local("Inter"), local("Inter"), url("../fonts/Inter/Inter-ExtraLight.woff2") format("woff2"), url("../fonts/Inter/Inter-ExtraLight.woff") format("woff"), url("../fonts/Inter/Inter-ExtraLight.ttf") format("truetype"), url("../fonts/Inter/Inter-ExtraLight.otf") format("opentype");
}*/
/* Inter - Thin 
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100;
  src: local("Inter"), local("Inter"), url("../fonts/Inter/Inter-Thin.woff2") format("woff2"), url("../fonts/Inter/Inter-Thin.woff") format("woff"), url("../fonts/Inter/Inter-Thin.ttf") format("truetype"), url("../fonts/Inter/Inter-Thin.otf") format("opentype");
}*/
/* Mixins for text styles */
/* Text styles */
.heading-1,
h1, .h1 {
  font-family: var(--cr-font-heading-1-family);
  font-size: var(--cr-font-heading-1-size);
  font-weight: var(--cr-font-heading-1-weight);
  line-height: var(--cr-font-heading-1-lineheight);
}

.heading-2,
h2, .h2 {
  font-family: var(--cr-font-heading-2-family);
  font-size: var(--cr-font-heading-2-size);
  font-weight: var(--cr-font-heading-2-weight);
  line-height: var(--cr-font-heading-2-lineheight);
}

.heading-3,
h3, .h3 {
  font-family: var(--cr-font-heading-3-family);
  font-size: var(--cr-font-heading-3-size);
  font-weight: var(--cr-font-heading-3-weight);
  line-height: var(--cr-font-heading-3-lineheight);
}

.heading-4-regular, .heading-4,
h5, .h5,
h6, .h6 {
  font-family: var(--cr-font-heading-4-medium-family);
  font-size: var(--cr-font-heading-4-medium-size);
  font-weight: var(--cr-font-heading-4-medium-weight);
  line-height: var(--cr-font-heading-4-medium-line-height);
}

.heading-4-semibold,
h4, .h4, .details__title {
  font-family: var(--cr-font-heading-4-semibold-family);
  font-size: var(--cr-font-heading-4-semibold-size);
  font-weight: var(--cr-font-heading-4-semibold-weight);
  line-height: var(--cr-font-heading-4-semibold-line-height);
}

.body-regular,
p, .p {
  font-family: var(--cr-font-body-regular-family);
  font-size: var(--cr-font-body-regular-size);
  font-weight: var(--cr-font-body-regular-weight);
  line-height: var(--cr-font-body-regular-line-height);
}

.body-semibold {
  font-family: var(--cr-font-body-semibold-family);
  font-size: var(--cr-font-body-semibold-size);
  font-weight: var(--cr-font-body-semibold-weight);
  line-height: var(--cr-font-body-semibold-line-height);
}

.body-small-regular {
  font-family: var(--cr-font-body-small-regular-family);
  font-size: var(--cr-font-body-small-regular-size);
  font-weight: var(--cr-font-body-small-regular-weight);
  line-height: var(--cr-font-body-small-regular-line-height);
}

.body-small-semibold {
  font-family: var(--cr-font-body-small-semibold-family);
  font-size: var(--cr-font-body-small-semibold-size);
  font-weight: var(--cr-font-body-small-semibold-weight);
  line-height: var(--cr-font-body-small-semibold-line-height);
}

.label-regular {
  font-family: var(--cr-font-label-regular-family);
  font-size: var(--cr-font-label-regular-size);
  font-weight: var(--cr-font-label-regular-weight);
  line-height: var(--cr-font-label-regular-line-height);
}

.label-semibold {
  font-family: var(--cr-font-label-semi-bold-family);
  font-size: var(--cr-font-label-semi-bold-size);
  font-weight: var(--cr-font-label-semi-bold-weight);
  line-height: var(--cr-font-label-semi-bold-line-height);
}

.label-bold {
  font-family: var(--cr-font-label-bold-family);
  font-size: var(--cr-font-label-bold-size);
  font-weight: var(--cr-font-label-bold-weight);
  line-height: var(--cr-font-label-bold-line-height);
}

/* Legacy Fonts */
.family-prose {
  font-family: var(--cr-font-family-prose) !important;
}

.leading-xs {
  --cr-heading-line-height: 1;
  --cr-body-line-height: 1.1;
}

.leading-sm {
  --cr-heading-line-height: 1.1;
  --cr-body-line-height: 1.2;
}

.leading-md {
  --cr-heading-line-height: 1.15;
  --cr-body-line-height: 1.4;
}

.leading-lg {
  --cr-heading-line-height: 1.22;
  --cr-body-line-height: 1.58;
}

.leading-xl {
  --cr-heading-line-height: 1.3;
  --cr-body-line-height: 1.72;
}

/* Legacy Font Sizes */
:where(html) {
  --cr-font-size-fluid-0: var(--cr-font-size-0);
  --cr-font-size-fluid-1: var(--cr-font-size-1);
  --cr-font-size-fluid-2: var(--cr-font-size-2);
  --cr-font-size-fluid-3: var(--cr-font-size-3);
  --cr-font-size-fluid-4: var(--cr-font-size-4);
  --cr-font-size-fluid-5: var(--cr-font-size-5);
  --cr-font-size-fluid-6: var(--cr-font-size-5);
}

/* Legacy tokens */
:where(html) {
  --cr-font-famiy-base: var(--cr-font-body-regular-family);
  --cr-text-font-size-lg: var(--cr-font-size-5) ;
}

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

[role=list] {
  padding: 0;
}

html {
  block-size: 100%;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  block-size: 100%;
  min-block-size: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture {
  max-inline-size: 100%;
  display: block;
  outline: 0;
}

input,
button,
textarea,
select {
  font: inherit;
  color: var(--cr-color-text-1);
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
}
:where(html) {
  --cr-color-brand-main-lightmode: var(--cr-color-brand-purple);
  --cr-color-brand-accent-lightmode: var(--cr-color-brand-accent-default);
  --cr-color-brand-main-logo-lightmode: var(--cr-color-brand-purple);
  --cr-color-brand-plum-lightmode: var(--cr-color-brand-purple-d);
  --cr-color-active-bg-lightmode: var(--cr-color-brand-5);
  --cr-color-active-text-lightmode: var(--cr-color-brand-11);
  --cr-color-action-text-lightmode: var(--cr-color-blue-11);
  --cr-color-action-text-hover-lightmode: var(--cr-color-blue-12);
  --cr-color-focus-ring-lightmode: var(--cr-color-gray-11);
  --cr-color-stroke-lightmode: var(--cr-color-gray-7);
  --cr-color-stroke-ui-lightmode: var(--cr-color-gray-4);
  --cr-color-text-1-lightmode: var(--cr-color-gray-12);
  --cr-color-text-2-lightmode: var(--cr-color-gray-11);
  --cr-color-text-contrast-lightmode: var(--cr-color-neutral-text-white-static);
  --cr-color-text-disabled-lightmode: var(--cr-color-gray-10);
  --cr-color-surface-1-lightmode: var(--cr-color-neutral-text-white-static);
  --cr-color-surface-2-lightmode: var(--cr-color-gray-1);
  --cr-color-surface-3-lightmode: var(--cr-color-gray-2);
  --cr-shadow-color-lightmode: 220 3% 15%;
  --cr-shadow-strength-lightmode: 5%;
  --cr-color-bg-ui-lightmode: var(--cr-color-gray-3);
  --cr-color-bg-ui-hover-lightmode: var(--cr-color-gray-4);
  --cr-color-bg-ui-disabled-lightmode: var(--cr-color-gray-4);
  --cr-color-bg-ui-active-lightmode: var(--cr-color-gray-5);
  --cr-color-bg-input-lightmode: var(--cr-color-gray-1);
  --cr-color-border-subtle-lightmode: var(--cr-color-gray-6);
  --cr-color-border-lightmode: var(--cr-color-gray-7);
  --cr-color-border-hover-lightmode: var(--cr-color-gray-8);
  --cr-color-bg-solid-lightmode: var(--cr-color-gray-9);
  --cr-color-bg-solid-hover-lightmode: var(--cr-color-gray-10);
  --cr-color-bg-solid-active-lightmode: var(--cr-color-gray-8);
  --cr-color-bg-primary-ui-lightmode: var(--cr-color-teal-3);
  --cr-color-bg-primary-ui-hover-lightmode: var(--cr-color-teal-4);
  --cr-color-bg-primary-ui-active-lightmode: var(--cr-color-teal-5);
  --cr-color-border-primary-subtle-lightmode: var(--cr-color-teal-6);
  --cr-color-border-primary-lightmode: var(--cr-color-teal-7);
  --cr-color-border-primary-hover-lightmode: var(--cr-color-teal-8);
  --cr-color-bg-primary-solid-lightmode: var(--cr-color-teal-11);
  --cr-color-bg-primary-solid-hover-lightmode: var(--cr-color-teal-10);
  --cr-color-bg-primary-solid-active-lightmode: var(--cr-color-teal-9);
  --cr-color-bg-primary-solid-disabled-lightmode:var(--cr-color-teal-7);
  --cr-color-text-primary-lightmode: var(--cr-color-teal-11);
  --cr-color-text-primary-contrast-lightmode: var(--cr-color-teal-12);
  --cr-color-bg-brand-ui-lightmode: var(--cr-color-brand-3);
  --cr-color-bg-brand-ui-hover-lightmode: var(--cr-color-brand-4);
  --cr-color-bg-brand-ui-active-lightmode: var(--cr-color-brand-5);
  --cr-color-border-brand-subtle-lightmode: var(--cr-color-brand-6);
  --cr-color-border-brand-lightmode: var(--cr-color-brand-7);
  --cr-color-border-brand-hover-lightmode: var(--cr-color-brand-8);
  --cr-color-bg-brand-solid-lightmode: var(--cr-color-brand-9);
  --cr-color-bg-brand-solid-hover-lightmode: var(--cr-color-brand-10);
  --cr-color-bg-brand-solid-active-lightmode: var(--cr-color-brand-8);
  --cr-color-text-brand-lightmode: var(--cr-color-brand-11);
  --cr-color-text-brand-contrast-lightmode: var(--cr-color-brand-12);
  --cr-color-bg-negative-ui-lightmode: var(--cr-color-red-3);
  --cr-color-bg-negative-ui-hover-lightmode: var(--cr-color-red-4);
  --cr-color-bg-negative-ui-active-lightmode: var(--cr-color-red-5);
  --cr-color-border-negative-subtle-lightmode: var(--cr-color-red-6);
  --cr-color-border-negative-lightmode: var(--cr-color-red-7);
  --cr-color-border-negative-hover-lightmode: var(--cr-color-red-8);
  --cr-color-bg-negative-solid-lightmode: var(--cr-color-red-10);
  --cr-color-bg-negative-solid-hover-lightmode: var(--cr-color-red-9);
  --cr-color-bg-negative-solid-active-lightmode: var(--cr-color-red-10);
  --cr-color-bg-negative-solid-disabled-lightmode: var(--cr-color-red-7);
  --cr-color-text-negative-lightmode: var(--cr-color-red-11);
  --cr-color-text-negative-contrast-lightmode: var(--cr-color-red-12);
  --cr-color-bg-positive-ui-lightmode: var(--cr-color-green-3);
  --cr-color-bg-positive-ui-hover-lightmode: var(--cr-color-green-4);
  --cr-color-bg-positive-ui-active-lightmode: var(--cr-color-green-5);
  --cr-color-border-positive-subtle-lightmode: var(--cr-color-green-6);
  --cr-color-border-positive-lightmode: var(--cr-color-green-7);
  --cr-color-border-positive-hover-lightmode: var(--cr-color-green-8);
  --cr-color-bg-positive-solid-lightmode: var(--cr-color-green-9);
  --cr-color-bg-positive-solid-hover-lightmode: var(--cr-color-green-10);
  --cr-color-bg-positive-solid-active-lightmode: var(--cr-color-green-8);
  --cr-color-text-positive-lightmode: var(--cr-color-green-11);
  --cr-color-text-positive-contrast-lightmode: var(--cr-color-green-12);
  --cr-color-bg-notice-ui-lightmode: var(--cr-color-yellow-3);
  --cr-color-bg-notice-ui-hover-lightmode: var(--cr-color-yellow-4);
  --cr-color-bg-notice-ui-active-lightmode: var(--cr-color-yellow-5);
  --cr-color-border-notice-subtle-lightmode: var(--cr-color-yellow-6);
  --cr-color-border-notice-lightmode: var(--cr-color-yellow-7);
  --cr-color-border-notice-hover-lightmode: var(--cr-color-yellow-8);
  --cr-color-bg-notice-solid-lightmode: var(--cr-color-yellow-9);
  --cr-color-bg-notice-solid-hover-lightmode: var(--cr-color-yellow-6);
  --cr-color-bg-notice-solid-active-lightmode: var(--cr-color-yellow-9);
  --cr-color-bg-notice-solid-disabled-lightmode: var(--cr-color-yellow-6);
  --cr-color-text-notice-lightmode: var(--cr-color-yellow-11);
  --cr-color-text-notice-contrast-lightmode: var(--cr-color-yellow-12);
  --cr-color-bg-informative-ui-lightmode: var(--cr-color-blue-3);
  --cr-color-bg-informative-ui-hover-lightmode: var(--cr-color-blue-4);
  --cr-color-bg-informative-ui-active-lightmode: var(--cr-color-blue-5);
  --cr-color-border-informative-subtle-lightmode: var(--cr-color-blue-6);
  --cr-color-border-informative-lightmode: var(--cr-color-blue-7);
  --cr-color-border-informative-hover-lightmode: var(--cr-color-blue-8);
  --cr-color-bg-informative-solid-lightmode: var(--cr-color-blue-9);
  --cr-color-bg-informative-solid-hover-lightmode: var(--cr-color-blue-10);
  --cr-color-bg-informative-solid-active-lightmode: var(--cr-color-blue-8);
  --cr-color-text-informative-lightmode: var(--cr-color-blue-11);
  --cr-color-text-informative-contrast-lightmode: var(--cr-color-blue-12);
  --cr-color-bg-contrast-ui-lightmode: var(--cr-color-gray-dark-3);
  --cr-color-bg-contrast-ui-hover-lightmode: var(--cr-color-gray-dark-4);
  --cr-color-bg-contrast-ui-active-lightmode: var(--cr-color-gray-dark-5);
  --cr-color-border-contrast-subtle-lightmode: var(--cr-color-gray-dark-6);
  --cr-color-border-contrast-lightmode: var(--cr-color-gray-dark-7);
  --cr-color-border-contrast-hover-lightmode: var(--cr-color-gray-dark-8);
  --cr-color-bg-contrast-solid-lightmode: var(--cr-color-gray-dark-9);
  --cr-color-bg-contrast-solid-hover-lightmode: var(--cr-color-gray-dark-10);
  --cr-color-bg-contrast-solid-active-lightmode: var(--cr-color-gray-dark-8);
  --cr-color-text-contrast-contrast-lightmode: var(--cr-color-gray-dark-12);
  --cr-color-highlight-lightmode: var(--cr-color-bg-ui-hover-lightmode);
  --cr-color-highlight-primary-lightmode: var(--cr-color-teal-4);
  --cr-color-highlight-negative-lightmode: var(--cr-color-bg-negative-ui-hover-lightmode);
  --cr-color-highlight-positive-lightmode: var(--cr-color-bg-positive-ui-hover-lightmode);
  --cr-color-highlight-contrast-lightmode: var(--cr-color-bg-ui-hover-lightmode);
  --cr-color-text-invert-lightmode: var(--cr-color-neutral-text-white-static);
  --cr-color-bg-invert-lightmode: var(--cr-color-gray-12);
  --cr-color-bg-comp-1-solid-lightmode: var(--cr-color-teal-9);
  --cr-color-bg-comp-2-solid-lightmode: var(--cr-color-violet-9);
  --cr-bg-checkbox-lightmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%231E2022' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 2V16H2V2H16ZM16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-checked-lightmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%231E2022' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4,0C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6C0,1.2,1.2,0,2.6,0H15.4z M13.7,7.2c0.4-0.4,0.4-1.2,0-1.6c-0.4-0.4-1.2-0.4-1.6,0L7.7,10L5.9,8.2c-0.4-0.4-1.2-0.4-1.6,0c-0.4,0.4-0.4,1.2,0,1.6l2.6,2.6c0.4,0.4,1.2,0.4,1.6,0L13.7,7.2z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-indeterminate-lightmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%231E2022' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5,8c0.5,0,1,0.4,1,1c0,0.5-0.4,1-1,1H5.5c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1H12.5z M0,2.6C0,1.2,1.2,0,2.6,0h12.9 C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6z M1.9,2.6v12.9c0,0.4,0.3,0.6,0.6,0.6h12.9 c0.4,0,0.6-0.3,0.6-0.6V2.6c0-0.4-0.3-0.6-0.6-0.6H2.6C2.2,1.9,1.9,2.2,1.9,2.6z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-checked-primary-lightmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%231E2022' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4,0C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6C0,1.2,1.2,0,2.6,0H15.4z M13.7,7.2c0.4-0.4,0.4-1.2,0-1.6c-0.4-0.4-1.2-0.4-1.6,0L7.7,10L5.9,8.2c-0.4-0.4-1.2-0.4-1.6,0c-0.4,0.4-0.4,1.2,0,1.6l2.6,2.6c0.4,0.4,1.2,0.4,1.6,0L13.7,7.2z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-indeterminate-primary-lightmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%231E2022' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5,8c0.5,0,1,0.4,1,1c0,0.5-0.4,1-1,1H5.5c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1H12.5z M0,2.6C0,1.2,1.2,0,2.6,0h12.9 C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6z M1.9,2.6v12.9c0,0.4,0.3,0.6,0.6,0.6h12.9 c0.4,0,0.6-0.3,0.6-0.6V2.6c0-0.4-0.3-0.6-0.6-0.6H2.6C2.2,1.9,1.9,2.2,1.9,2.6z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-error-lightmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23C33D41' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 2V16H2V2H16ZM16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-checked-error-lightmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23C33D41' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4,0C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6C0,1.2,1.2,0,2.6,0H15.4z M13.7,7.2c0.4-0.4,0.4-1.2,0-1.6c-0.4-0.4-1.2-0.4-1.6,0L7.7,10L5.9,8.2c-0.4-0.4-1.2-0.4-1.6,0c-0.4,0.4-0.4,1.2,0,1.6l2.6,2.6c0.4,0.4,1.2,0.4,1.6,0L13.7,7.2z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-indeterminate-error-lightmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23C33D41' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5,8c0.5,0,1,0.4,1,1c0,0.5-0.4,1-1,1H5.5c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1H12.5z M0,2.6C0,1.2,1.2,0,2.6,0h12.9 C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6z M1.9,2.6v12.9c0,0.4,0.3,0.6,0.6,0.6h12.9 c0.4,0,0.6-0.3,0.6-0.6V2.6c0-0.4-0.3-0.6-0.6-0.6H2.6C2.2,1.9,1.9,2.2,1.9,2.6z' /%3E%3C/svg%3E");
  --cr-bg-radio-lightmode: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%231E2022' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z' /%3E%3C/svg%3E");
  --cr-bg-radio-checked-lightmode: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%231E2022' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7Z' /%3E%3C/svg%3E");
  --cr-bg-radio-checked-primary-lightmode: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%231E2022' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7Z' /%3E%3C/svg%3E");
  --cr-bg-show-password-lightmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%231E2022' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.4,9C5.4,7,7,5.4,9,5.4S12.6,7,12.6,9S11,12.6,9,12.6S5.4,11,5.4,9z M9,11.3c1.2,0,2.3-1,2.3-2.3s-1-2.3-2.3-2.3 c0,0,0,0-0.1,0C9,6.9,9,7,9,7.2C9,8.2,8.2,9,7.2,9C7,9,6.9,9,6.8,8.9c0,0,0,0.1,0,0.1C6.8,10.2,7.8,11.3,9,11.3L9,11.3z M3.6,5 C4.9,3.7,6.7,2.7,9,2.7s4.1,1,5.4,2.3c1.3,1.2,2.2,2.7,2.6,3.7c0.1,0.2,0.1,0.5,0,0.7c-0.4,1-1.3,2.4-2.6,3.7 c-1.3,1.2-3.1,2.3-5.4,2.3s-4.1-1-5.4-2.3C2.3,11.8,1.4,10.4,1,9.3C0.9,9.1,0.9,8.9,1,8.7C1.4,7.6,2.3,6.2,3.6,5L3.6,5z M9,4 C7.2,4,5.7,4.9,4.5,6C3.4,7,2.7,8.1,2.3,9c0.4,0.8,1.1,2,2.2,3C5.7,13.1,7.2,14,9,14s3.3-0.8,4.5-1.9c1.1-1,1.8-2.2,2.2-3 c-0.4-0.9-1.1-2-2.2-3C12.3,4.9,10.8,4,9,4L9,4z' /%3E%3C/svg%3E");
  --cr-bg-hide-password-lightmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%231E2022' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.2,4.4c1.2-1,2.8-1.7,4.8-1.7c2.3,0,4.1,1,5.4,2.3c1.3,1.2,2.2,2.7,2.6,3.7c0.1,0.2,0.1,0.5,0,0.7 c-0.4,0.9-1.1,2.2-2.2,3.3l3,2.3c0.3,0.2,0.3,0.7,0.1,0.9c-0.2,0.3-0.7,0.3-0.9,0.1L0.3,3C0,2.8-0.1,2.4,0.1,2.1 c0.2-0.3,0.7-0.3,0.9-0.1L4.2,4.4z M5.3,5.3l1.3,1C7.3,5.7,8.1,5.4,9,5.4c2,0,3.6,1.6,3.6,3.6c0,0.6-0.1,1.2-0.4,1.7l1.5,1.2 c0.9-1,1.6-2.1,2-2.8c-0.4-0.9-1.1-2-2.2-3C12.3,4.9,10.8,4,9,4C7.6,4,6.3,4.5,5.3,5.3L5.3,5.3z M11.1,9.8c0.1-0.2,0.1-0.5,0.1-0.8 c0-1.2-1-2.2-2.2-2.2c0,0,0,0-0.1,0C9,6.9,9,7,9,7.2C9,7.5,8.9,7.8,8.8,8L11.1,9.8z M11.4,13.5l1.2,0.9c-1,0.6-2.2,0.9-3.5,0.9 c-2.3,0-4.1-1-5.4-2.3C2.3,11.8,1.4,10.3,1,9.3C0.9,9.1,0.9,8.9,1,8.7C1.2,8,1.7,7.2,2.3,6.3l1.1,0.8C2.9,7.8,2.5,8.5,2.3,9 C2.7,9.8,3.4,11,4.5,12c1.2,1.1,2.7,1.9,4.5,1.9C9.9,13.9,10.7,13.8,11.4,13.5L11.4,13.5z M5.4,9c0-0.1,0-0.1,0-0.2L7,10 c0.3,0.6,0.8,1,1.5,1.2l1.6,1.3c-0.3,0.1-0.7,0.2-1.1,0.2C7,12.6,5.4,11,5.4,9L5.4,9z' /%3E%3C/svg%3E");
  --cr-bg-select-lightmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 448 512' fill='currentColor' %3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z'/%3E%3C/svg%3E");
  --cr-bg-search-lightmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%231E2022' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.8,14.9l-3.7-3.7c0.8-1,1.2-2.2,1.2-3.5c0-3.1-2.5-5.7-5.7-5.7S2,4.5,2,7.7s2.5,5.7,5.7,5.7c1.3,0,2.6-0.5,3.5-1.2 l3.7,3.7c0.2,0.1,0.3,0.2,0.5,0.2c0.2,0,0.3-0.1,0.5-0.2C16.1,15.6,16.1,15.1,15.8,14.9z M3.3,7.7c0-2.4,2-4.4,4.4-4.4 s4.4,2,4.4,4.4s-2,4.4-4.4,4.4S3.3,10.1,3.3,7.7z' /%3E%3C/svg%3E");
  --cr-bg-error-lightmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23C33D41' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.8,14.7L10.3,1.9C10,1.4,9.5,1.1,9,1.1c-0.5,0-1,0.2-1.3,0.7L0.2,14.7c-0.5,1,0.2,2.2,1.3,2.2h15 C17.7,16.9,18.4,15.6,17.8,14.7z M1.9,15.2L9,3l7.2,12.2H1.9z M9,11.8c-0.6,0-1.1,0.5-1.1,1.1s0.5,1.1,1.1,1.1 c0.6,0,1.1-0.5,1.1-1.1C10.1,12.3,9.6,11.8,9,11.8z M8.2,6.5v3.4c0,0.5,0.4,0.8,0.8,0.8c0.5,0,0.8-0.4,0.8-0.8V6.5 C9.8,6,9.5,5.6,9,5.6S8.2,6,8.2,6.5z' /%3E%3C/svg%3E");
  --cr-bg-breadcrumb-lightmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23b4babe' %3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M113.3 47.41l183.1 191.1c4.469 4.625 6.688 10.62 6.688 16.59s-2.219 11.97-6.688 16.59l-183.1 191.1c-9.152 9.594-24.34 9.906-33.9 .7187c-9.625-9.125-9.938-24.38-.7187-33.91l168-175.4L78.71 80.6c-9.219-9.5-8.906-24.78 .7187-33.91C88.99 37.5 104.2 37.82 113.3 47.41z'/%3E%3C/svg%3E");
  --cr-bg-negative-lightmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23C33D41'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36H344.3c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36H167.7c-25.7 0-49.5-13.7-62.4-36L17.1 292zm41.6-48c-4.3 7.4-4.3 16.6 0 24l88.3 152.9c4.3 7.4 12.2 12 20.8 12H344.3c8.6 0 16.5-4.6 20.8-12L453.4 268c4.3-7.4 4.3-16.6 0-24L365.1 91.1c-4.3-7.4-12.2-12-20.8-12l-176.6 0c-8.6 0-16.5 4.6-20.8 12L58.6 244zM256 128c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E");
  --cr-bg-informative-lightmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23007BD9' %3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM296 336h-16V248C280 234.8 269.3 224 256 224H224C210.8 224 200 234.8 200 248S210.8 272 224 272h8v64h-16C202.8 336 192 346.8 192 360S202.8 384 216 384h80c13.25 0 24-10.75 24-24S309.3 336 296 336zM256 192c17.67 0 32-14.33 32-32c0-17.67-14.33-32-32-32S224 142.3 224 160C224 177.7 238.3 192 256 192z'/%3E%3C/svg%3E");
  --cr-bg-notice-lightmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23FFBD03'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M248.4 84.3c1.6-2.7 4.5-4.3 7.6-4.3s6 1.6 7.6 4.3L461.9 410c1.4 2.3 2.1 4.9 2.1 7.5c0 8-6.5 14.5-14.5 14.5H62.5c-8 0-14.5-6.5-14.5-14.5c0-2.7 .7-5.3 2.1-7.5L248.4 84.3zm-41-25L9.1 385c-6 9.8-9.1 21-9.1 32.5C0 452 28 480 62.5 480h387c34.5 0 62.5-28 62.5-62.5c0-11.5-3.2-22.7-9.1-32.5L304.6 59.3C294.3 42.4 275.9 32 256 32s-38.3 10.4-48.6 27.3zM288 368a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-8-184c0-13.3-10.7-24-24-24s-24 10.7-24 24v96c0 13.3 10.7 24 24 24s24-10.7 24-24V184z'/%3E%3C/svg%3E");
  --cr-bg-positive-lightmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%2342A254' %3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z'/%3E%3C/svg%3E");
  --cr-bg-table-ascending-lightmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath fill='%231E2022' d='M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3Cpath fill='%23B4BABE' d='M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z'/%3E%3C/svg%3E");
  --cr-bg-table-descending-lightmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath fill='%23B4BABE' d='M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3Cpath fill='%231E2022' d='M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z'/%3E%3C/svg%3E");
  --cr-bg-table-none-lightmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23B4BABE' %3E%3C!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --%3E%3Cpath d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z'/%3E%3C/svg%3E");
  --cr-bg-table-hover-lightmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%231E2022' %3E%3C!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --%3E%3Cpath d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z'/%3E%3C/svg%3E");
  --cr-bg-date-picker-lightmode: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%231E2022" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"/></svg>');
  --cr-color-brand-main-darkmode: var(--cr-color-brand-11);
  --cr-color-brand-accent-darkmode: var(--cr-color-brand-accent-default);
  --cr-color-brand-main-logo-darkmode: var(--cr-color-brand-gray);
  --cr-color-active-bg-darkmode: var(--cr-color-brand-5);
  --cr-color-brand-plum-darkmode: var(--cr-color-brand-dark-8);
  --cr-color-active-text-darkmode: var(--cr-color-brand-accent-default);
  --cr-color-action-text-darkmode: var(--cr-color-blue-dark-11);
  --cr-color-action-text-hover-darkmode: var(--cr-color-blue-dark-12);
  --cr-color-focus-ring-darkmode: var(--cr-color-gray-dark-11);
  --cr-color-stroke-darkmode: var(--cr-color-gray-dark-7);
  --cr-color-stroke-ui-darkmode: var(--cr-color-gray-dark-4);
  --cr-color-text-1-darkmode: var(--cr-color-gray-dark-12);
  --cr-color-text-2-darkmode: var(--cr-color-gray-dark-11);
  --cr-color-text-contrast-darkmode: var(--cr-color-gray-dark-1);
  --cr-color-text-disabled-darkmode: var(--cr-color-gray-dark-10);
  --cr-color-surface-1-darkmode: var(--cr-color-gray-dark-3);
  --cr-color-surface-2-darkmode: var(--cr-color-gray-dark-1);
  --cr-color-surface-3-darkmode: var(--cr-color-gray-dark-1);
  --cr-shadow-color-darkmode: 220 40% 2%;
  --cr-shadow-strength-darkmode: 25%;
  --cr-color-bg-ui-darkmode: var(--cr-color-gray-dark-2);
  --cr-color-bg-ui-hover-darkmode: var(--cr-color-gray-dark-4);
  --cr-color-bg-ui-disabled-darkmode: var(--cr-color-gray-dark-5);
  --cr-color-bg-ui-active-darkmode: var(--cr-color-gray-dark-6);
  --cr-color-bg-input-darkmode: var(--cr-color-gray-dark-1);
  --cr-color-border-subtle-darkmode: var(--cr-color-gray-dark-6);
  --cr-color-border-darkmode: var(--cr-color-gray-dark-7);
  --cr-color-border-hover-darkmode: var(--cr-color-gray-dark-8);
  --cr-color-bg-solid-darkmode: var(--cr-color-gray-dark-9);
  --cr-color-bg-solid-hover-darkmode: var(--cr-color-gray-dark-10);
  --cr-color-bg-solid-active-darkmode: var(--cr-color-gray-dark-8);
  --cr-color-bg-primary-ui-darkmode: var(--cr-color-teal-dark-3);
  --cr-color-bg-primary-ui-hover-darkmode: var(--cr-color-teal-dark-4);
  --cr-color-bg-primary-ui-active-darkmode: var(--cr-color-teal-dark-5);
  --cr-color-border-primary-subtle-darkmode: var(--cr-color-teal-dark-6);
  --cr-color-border-primary-darkmode: var(--cr-color-teal-dark-7);
  --cr-color-border-primary-hover-darkmode: var(--cr-color-teal-dark-8);
  --cr-color-bg-primary-solid-darkmode: var(--cr-color-teal-dark-11);
  --cr-color-bg-primary-solid-hover-darkmode: var(--cr-color-teal-dark-10);
  --cr-color-bg-primary-solid-active-darkmode: var(--cr-color-teal-dark-9);
  --cr-color-bg-primary-solid-disabled-darkmode:var(--cr-color-teal-dark-7);
  --cr-color-text-primary-darkmode: var(--cr-color-teal-dark-11);
  --cr-color-text-primary-contrast-darkmode: var(--cr-color-teal-dark-12);
  --cr-color-bg-brand-ui-darkmode: var(--cr-color-brand-dark-3);
  --cr-color-bg-brand-ui-hover-darkmode: var(--cr-color-brand-dark-4);
  --cr-color-bg-brand-ui-active-darkmode: var(--cr-color-brand-dark-5);
  --cr-color-border-brand-subtle-darkmode: var(--cr-color-brand-dark-6);
  --cr-color-border-brand-darkmode: var(--cr-color-brand-dark-7);
  --cr-color-border-brand-hover-darkmode: var(--cr-color-brand-dark-8);
  --cr-color-bg-brand-solid-darkmode: var(--cr-color-brand-dark-9);
  --cr-color-bg-brand-solid-hover-darkmode: var(--cr-color-brand-dark-10);
  --cr-color-bg-brand-solid-active-darkmode: var(--cr-color-brand-dark-8);
  --cr-color-text-brand-darkmode: var(--cr-color-brand-dark-11);
  --cr-color-text-brand-contrast-darkmode: var(--cr-color-brand-dark-12);
  --cr-color-bg-negative-ui-darkmode: var(--cr-color-red-dark-3);
  --cr-color-bg-negative-ui-hover-darkmode: var(--cr-color-red-dark-4);
  --cr-color-bg-negative-ui-active-darkmode: var(--cr-color-red-dark-5);
  --cr-color-border-negative-subtle-darkmode: var(--cr-color-red-dark-6);
  --cr-color-border-negative-darkmode: var(--cr-color-red-dark-7);
  --cr-color-border-negative-hover-darkmode: var(--cr-color-red-dark-8);
  --cr-color-bg-negative-solid-darkmode: var(--cr-color-red-dark-10);
  --cr-color-bg-negative-solid-hover-darkmode: var(--cr-color-red-dark-9);
  --cr-color-bg-negative-solid-active-darkmode: var(--cr-color-red-dark-10);
  --cr-color-bg-negative-solid-disabled-darkmode: var(--cr-color-red-dark-7);
  --cr-color-text-negative-darkmode: var(--cr-color-red-dark-11);
  --cr-color-text-negative-contrast-darkmode: var(--cr-color-red-dark-12);
  --cr-color-bg-positive-ui-darkmode: var(--cr-color-green-dark-3);
  --cr-color-bg-positive-ui-hover-darkmode: var(--cr-color-green-dark-4);
  --cr-color-bg-positive-ui-active-darkmode: var(--cr-color-green-dark-5);
  --cr-color-border-positive-subtle-darkmode: var(--cr-color-green-dark-6);
  --cr-color-border-positive-darkmode: var(--cr-color-green-dark-7);
  --cr-color-border-positive-hover-darkmode: var(--cr-color-green-dark-8);
  --cr-color-bg-positive-solid-darkmode: var(--cr-color-green-dark-9);
  --cr-color-bg-positive-solid-hover-darkmode: var(--cr-color-green-dark-10);
  --cr-color-bg-positive-solid-active-darkmode: var(--cr-color-green-dark-8);
  --cr-color-text-positive-darkmode: var(--cr-color-green-dark-11);
  --cr-color-text-positive-contrast-darkmode: var(--cr-color-green-dark-12);
  --cr-color-bg-notice-ui-darkmode: var(--cr-color-yellow-dark-3);
  --cr-color-bg-notice-ui-hover-darkmode: var(--cr-color-yellow-dark-4);
  --cr-color-bg-notice-ui-active-darkmode: var(--cr-color-yellow-dark-5);
  --cr-color-border-notice-subtle-darkmode: var(--cr-color-yellow-dark-6);
  --cr-color-border-notice-darkmode: var(--cr-color-yellow-dark-7);
  --cr-color-border-notice-hover-darkmode: var(--cr-color-yellow-dark-8);
  --cr-color-bg-notice-solid-darkmode: var(--cr-color-yellow-dark-10);
  --cr-color-bg-notice-solid-hover-darkmode: var(--cr-color-yellow-dark-7);
  --cr-color-bg-notice-solid-active-darkmode: var(--cr-color-yellow-dark-10);
  --cr-color-bg-notice-solid-disabled-darkmode: var(--cr-color-yellow-dark-6)
  --cr-color-text-notice-darkmode: var(--cr-color-yellow-dark-11);
  --cr-color-text-notice-contrast-darkmode: var(--cr-color-yellow-dark-12);
  --cr-color-bg-informative-ui-darkmode: var(--cr-color-blue-dark-3);
  --cr-color-bg-informative-ui-hover-darkmode: var(--cr-color-blue-dark-4);
  --cr-color-bg-informative-ui-active-darkmode: var(--cr-color-blue-dark-5);
  --cr-color-border-informative-subtle-darkmode: var(--cr-color-blue-dark-6);
  --cr-color-border-informative-darkmode: var(--cr-color-blue-dark-7);
  --cr-color-border-informative-hover-darkmode: var(--cr-color-blue-dark-8);
  --cr-color-bg-informative-solid-darkmode: var(--cr-color-blue-dark-9);
  --cr-color-bg-informative-solid-hover-darkmode: var(--cr-color-blue-dark-10);
  --cr-color-bg-informative-solid-active-darkmode: var(--cr-color-blue-dark-8);
  --cr-color-text-informative-darkmode: var(--cr-color-blue-dark-11);
  --cr-color-text-informative-contrast-darkmode: var(--cr-color-blue-dark-12);
  --cr-color-bg-contrast-ui-darkmode: var(--cr-color-gray-3);
  --cr-color-bg-contrast-ui-hover-darkmode: var(--cr-color-gray-4);
  --cr-color-bg-contrast-ui-active-darkmode: var(--cr-color-gray-5);
  --cr-color-border-contrast-subtle-darkmode: var(--cr-color-gray-6);
  --cr-color-border-contrast-darkmode: var(--cr-color-gray-7);
  --cr-color-border-contrast-hover-darkmode: var(--cr-color-gray-8);
  --cr-color-bg-contrast-solid-darkmode: var(--cr-color-gray-9);
  --cr-color-bg-contrast-solid-hover-darkmode: var(--cr-color-gray-10);
  --cr-color-bg-contrast-solid-active-darkmode: var(--cr-color-gray-8);
  --cr-color-text-contrast-contrast-darkmode: var(--cr-color-gray-12);
  --cr-color-highlight-darkmode: var(--cr-color-bg-ui-hover-darkmode);
  --cr-color-highlight-primary-darkmode: var(--cr-color-teal-dark-4);
  --cr-color-highlight-negative-darkmode: var(--cr-color-bg-negative-ui-hover-darkmode);
  --cr-color-highlight-positive-darkmode: var(--cr-color-bg-positive-ui-hover-darkmode);
  --cr-color-highlight-contrast-darkmode: var(--cr-color-bg-ui-hover-darkmode);
  --cr-color-text-invert-darkmode: var(--cr-color-gray-12);
  --cr-color-bg-invert-darkmode: var(--cr-color-gray-4);
  --cr-color-bg-comp-1-solid-darkmode: var(--cr-color-teal-dark-9);
  --cr-color-bg-comp-2-solid-darkmode: var(--cr-color-violet-dark-9);
  --cr-bg-checkbox-darkmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 2V16H2V2H16ZM16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-checked-darkmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4,0C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6C0,1.2,1.2,0,2.6,0H15.4z M13.7,7.2c0.4-0.4,0.4-1.2,0-1.6c-0.4-0.4-1.2-0.4-1.6,0L7.7,10L5.9,8.2c-0.4-0.4-1.2-0.4-1.6,0c-0.4,0.4-0.4,1.2,0,1.6l2.6,2.6c0.4,0.4,1.2,0.4,1.6,0L13.7,7.2z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-indeterminate-darkmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5,8c0.5,0,1,0.4,1,1c0,0.5-0.4,1-1,1H5.5c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1H12.5z M0,2.6C0,1.2,1.2,0,2.6,0h12.9 C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6z M1.9,2.6v12.9c0,0.4,0.3,0.6,0.6,0.6h12.9 c0.4,0,0.6-0.3,0.6-0.6V2.6c0-0.4-0.3-0.6-0.6-0.6H2.6C2.2,1.9,1.9,2.2,1.9,2.6z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-checked-primary-darkmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4,0C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6C0,1.2,1.2,0,2.6,0H15.4z M13.7,7.2c0.4-0.4,0.4-1.2,0-1.6c-0.4-0.4-1.2-0.4-1.6,0L7.7,10L5.9,8.2c-0.4-0.4-1.2-0.4-1.6,0c-0.4,0.4-0.4,1.2,0,1.6l2.6,2.6c0.4,0.4,1.2,0.4,1.6,0L13.7,7.2z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-indeterminate-primary-darkmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5,8c0.5,0,1,0.4,1,1c0,0.5-0.4,1-1,1H5.5c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1H12.5z M0,2.6C0,1.2,1.2,0,2.6,0h12.9 C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6z M1.9,2.6v12.9c0,0.4,0.3,0.6,0.6,0.6h12.9 c0.4,0,0.6-0.3,0.6-0.6V2.6c0-0.4-0.3-0.6-0.6-0.6H2.6C2.2,1.9,1.9,2.2,1.9,2.6z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-error-darkmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23C33D41' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 2V16H2V2H16ZM16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-checked-error-darkmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23C33D41' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4,0C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6C0,1.2,1.2,0,2.6,0H15.4z M13.7,7.2c0.4-0.4,0.4-1.2,0-1.6c-0.4-0.4-1.2-0.4-1.6,0L7.7,10L5.9,8.2c-0.4-0.4-1.2-0.4-1.6,0c-0.4,0.4-0.4,1.2,0,1.6l2.6,2.6c0.4,0.4,1.2,0.4,1.6,0L13.7,7.2z' /%3E%3C/svg%3E");
  --cr-bg-checkbox-indeterminate-error-darkmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23C33D41' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5,8c0.5,0,1,0.4,1,1c0,0.5-0.4,1-1,1H5.5c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1H12.5z M0,2.6C0,1.2,1.2,0,2.6,0h12.9 C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6z M1.9,2.6v12.9c0,0.4,0.3,0.6,0.6,0.6h12.9 c0.4,0,0.6-0.3,0.6-0.6V2.6c0-0.4-0.3-0.6-0.6-0.6H2.6C2.2,1.9,1.9,2.2,1.9,2.6z' /%3E%3C/svg%3E");
  --cr-bg-radio-darkmode: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z' /%3E%3C/svg%3E");
  --cr-bg-radio-checked-darkmode: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7Z' /%3E%3C/svg%3E");
  --cr-bg-radio-checked-primary-darkmode: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7Z' /%3E%3C/svg%3E");
  --cr-bg-show-password-darkmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.4,9C5.4,7,7,5.4,9,5.4S12.6,7,12.6,9S11,12.6,9,12.6S5.4,11,5.4,9z M9,11.3c1.2,0,2.3-1,2.3-2.3s-1-2.3-2.3-2.3 c0,0,0,0-0.1,0C9,6.9,9,7,9,7.2C9,8.2,8.2,9,7.2,9C7,9,6.9,9,6.8,8.9c0,0,0,0.1,0,0.1C6.8,10.2,7.8,11.3,9,11.3L9,11.3z M3.6,5 C4.9,3.7,6.7,2.7,9,2.7s4.1,1,5.4,2.3c1.3,1.2,2.2,2.7,2.6,3.7c0.1,0.2,0.1,0.5,0,0.7c-0.4,1-1.3,2.4-2.6,3.7 c-1.3,1.2-3.1,2.3-5.4,2.3s-4.1-1-5.4-2.3C2.3,11.8,1.4,10.4,1,9.3C0.9,9.1,0.9,8.9,1,8.7C1.4,7.6,2.3,6.2,3.6,5L3.6,5z M9,4 C7.2,4,5.7,4.9,4.5,6C3.4,7,2.7,8.1,2.3,9c0.4,0.8,1.1,2,2.2,3C5.7,13.1,7.2,14,9,14s3.3-0.8,4.5-1.9c1.1-1,1.8-2.2,2.2-3 c-0.4-0.9-1.1-2-2.2-3C12.3,4.9,10.8,4,9,4L9,4z' /%3E%3C/svg%3E");
  --cr-bg-hide-password-darkmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.2,4.4c1.2-1,2.8-1.7,4.8-1.7c2.3,0,4.1,1,5.4,2.3c1.3,1.2,2.2,2.7,2.6,3.7c0.1,0.2,0.1,0.5,0,0.7 c-0.4,0.9-1.1,2.2-2.2,3.3l3,2.3c0.3,0.2,0.3,0.7,0.1,0.9c-0.2,0.3-0.7,0.3-0.9,0.1L0.3,3C0,2.8-0.1,2.4,0.1,2.1 c0.2-0.3,0.7-0.3,0.9-0.1L4.2,4.4z M5.3,5.3l1.3,1C7.3,5.7,8.1,5.4,9,5.4c2,0,3.6,1.6,3.6,3.6c0,0.6-0.1,1.2-0.4,1.7l1.5,1.2 c0.9-1,1.6-2.1,2-2.8c-0.4-0.9-1.1-2-2.2-3C12.3,4.9,10.8,4,9,4C7.6,4,6.3,4.5,5.3,5.3L5.3,5.3z M11.1,9.8c0.1-0.2,0.1-0.5,0.1-0.8 c0-1.2-1-2.2-2.2-2.2c0,0,0,0-0.1,0C9,6.9,9,7,9,7.2C9,7.5,8.9,7.8,8.8,8L11.1,9.8z M11.4,13.5l1.2,0.9c-1,0.6-2.2,0.9-3.5,0.9 c-2.3,0-4.1-1-5.4-2.3C2.3,11.8,1.4,10.3,1,9.3C0.9,9.1,0.9,8.9,1,8.7C1.2,8,1.7,7.2,2.3,6.3l1.1,0.8C2.9,7.8,2.5,8.5,2.3,9 C2.7,9.8,3.4,11,4.5,12c1.2,1.1,2.7,1.9,4.5,1.9C9.9,13.9,10.7,13.8,11.4,13.5L11.4,13.5z M5.4,9c0-0.1,0-0.1,0-0.2L7,10 c0.3,0.6,0.8,1,1.5,1.2l1.6,1.3c-0.3,0.1-0.7,0.2-1.1,0.2C7,12.6,5.4,11,5.4,9L5.4,9z' /%3E%3C/svg%3E");
  --cr-bg-select-darkmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 448 512' fill='white' %3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z'/%3E%3C/svg%3E");
  --cr-bg-search-darkmode: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23FBFCFD' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.8,14.9l-3.7-3.7c0.8-1,1.2-2.2,1.2-3.5c0-3.1-2.5-5.7-5.7-5.7S2,4.5,2,7.7s2.5,5.7,5.7,5.7c1.3,0,2.6-0.5,3.5-1.2 l3.7,3.7c0.2,0.1,0.3,0.2,0.5,0.2c0.2,0,0.3-0.1,0.5-0.2C16.1,15.6,16.1,15.1,15.8,14.9z M3.3,7.7c0-2.4,2-4.4,4.4-4.4 s4.4,2,4.4,4.4s-2,4.4-4.4,4.4S3.3,10.1,3.3,7.7z' /%3E%3C/svg%3E");
  --cr-bg-negative-darkmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23C33D41' %3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36H344.3c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36H167.7c-25.7 0-49.5-13.7-62.4-36L17.1 292zm41.6-48c-4.3 7.4-4.3 16.6 0 24l88.3 152.9c4.3 7.4 12.2 12 20.8 12H344.3c8.6 0 16.5-4.6 20.8-12L453.4 268c4.3-7.4 4.3-16.6 0-24L365.1 91.1c-4.3-7.4-12.2-12-20.8-12l-176.6 0c-8.6 0-16.5 4.6-20.8 12L58.6 244zM256 128c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E");
  --cr-bg-informative-darkmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23007BD9' %3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM296 336h-16V248C280 234.8 269.3 224 256 224H224C210.8 224 200 234.8 200 248S210.8 272 224 272h8v64h-16C202.8 336 192 346.8 192 360S202.8 384 216 384h80c13.25 0 24-10.75 24-24S309.3 336 296 336zM256 192c17.67 0 32-14.33 32-32c0-17.67-14.33-32-32-32S224 142.3 224 160C224 177.7 238.3 192 256 192z'/%3E%3C/svg%3E");
  --cr-bg-notice-darkmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23FFBD03'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M248.4 84.3c1.6-2.7 4.5-4.3 7.6-4.3s6 1.6 7.6 4.3L461.9 410c1.4 2.3 2.1 4.9 2.1 7.5c0 8-6.5 14.5-14.5 14.5H62.5c-8 0-14.5-6.5-14.5-14.5c0-2.7 .7-5.3 2.1-7.5L248.4 84.3zm-41-25L9.1 385c-6 9.8-9.1 21-9.1 32.5C0 452 28 480 62.5 480h387c34.5 0 62.5-28 62.5-62.5c0-11.5-3.2-22.7-9.1-32.5L304.6 59.3C294.3 42.4 275.9 32 256 32s-38.3 10.4-48.6 27.3zM288 368a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-8-184c0-13.3-10.7-24-24-24s-24 10.7-24 24v96c0 13.3 10.7 24 24 24s24-10.7 24-24V184z'/%3E%3C/svg%3E");
  --cr-bg-positive-darkmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%2342A254' %3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z'/%3E%3C/svg%3E");
  --cr-bg-breadcrumb-darkmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23b4babe' %3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M113.3 47.41l183.1 191.1c4.469 4.625 6.688 10.62 6.688 16.59s-2.219 11.97-6.688 16.59l-183.1 191.1c-9.152 9.594-24.34 9.906-33.9 .7187c-9.625-9.125-9.938-24.38-.7187-33.91l168-175.4L78.71 80.6c-9.219-9.5-8.906-24.78 .7187-33.91C88.99 37.5 104.2 37.82 113.3 47.41z'/%3E%3C/svg%3E");
  --cr-bg-table-ascending-darkmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath fill='white' d='M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3Cpath fill='%23697074' d='M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z'/%3E%3C/svg%3E");
  --cr-bg-table-descending-darkmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath fill='%23697074' d='M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3Cpath fill='white' d='M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z'/%3E%3C/svg%3E");
  --cr-bg-table-none-darkmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23697074' %3E%3C!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --%3E%3Cpath d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z'/%3E%3C/svg%3E");
  --cr-bg-table-hover-darkmode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='white' %3E%3C!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --%3E%3Cpath d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z'/%3E%3C/svg%3E");
  --cr-bg-date-picker-darkmode: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"/></svg>');
}

:where(html) {
  --cr-scrollbar-color: var(--cr-color-gray-7);
  --cr-measure: 60ch;
  --cr-isLTR: 1;
  --cr-isRTL: -1;
  scrollbar-color: var(--cr-scrollbar-color) transparent;
  accent-color: var(--cr-color-neutral-text);
  caret-color: var(--cr-color-neutral-text);
}
:where(html):is(:dir(rtl), [dir=rtl]) {
  --cr-isLTR: -1;
  --cr-isRTL: 1;
}

:where(html) {
  color-scheme: light;
  --cr-color-brand-main: var(--cr-color-brand-main-lightmode);
  --cr-color-brand-accent: var(--cr-color-brand-accent-lightmode);
  --cr-color-brand-main-logo: var(--cr-color-brand-main-logo-lightmode);
  --cr-color-active-bg: var(--cr-color-active-bg-lightmode);
  --cr-color-active-text: var(--cr-color-active-text-lightmode);
  --cr-color-brand-plum: var(--cr-color-brand-plum-lightmode);
  --cr-color-text-1: var(--cr-color-text-1-lightmode);
  --cr-color-text-2: var(--cr-color-text-2-lightmode);
  --cr-color-text-contrast: var(--cr-color-text-contrast-lightmode);
  --cr-color-text-disabled: var(--cr-color-text-disabled-lightmode);
  --cr-color-surface-1: var(--cr-color-surface-1-lightmode);
  --cr-color-surface-2: var(--cr-color-surface-2-lightmode);
  --cr-color-surface-3: var(--cr-color-surface-3-lightmode);
  --cr-color-action-text: var(--cr-color-action-text-lightmode);
  --cr-color-action-text-hover: var(--cr-color-action-text-hover-lightmode);
  --cr-color-focus-ring: var(--cr-color-focus-ring-lightmode);
  --cr-color-stroke: var(--cr-color-stroke-lightmode);
  --cr-color-stroke-ui: var(--cr-color-stroke-ui-lightmode);
  --cr-shadow-color: var(--cr-shadow-color-lightmode);
  --cr-shadow-strength: var(--cr-shadow-strength-lightmode);
  --cr-color-bg-ui: var(--cr-color-bg-ui-lightmode);
  --cr-color-bg-ui-hover: var(--cr-color-bg-ui-hover-lightmode);
  --cr-color-bg-ui-disabled: var(--cr-color-bg-ui-disabled-lightmode);
  --cr-color-bg-ui-active: var(--cr-color-bg-ui-active-lightmode);
  --cr-color-bg-input: var(--cr-color-bg-input-lightmode);
  --cr-color-border-subtle: var(--cr-color-border-subtle-lightmode);
  --cr-color-border: var(--cr-color-border-lightmode);
  --cr-color-border-hover: var(--cr-color-border-hover-lightmode);
  --cr-color-bg-solid: var(--cr-color-bg-solid-lightmode);
  --cr-color-bg-solid-hover: var(--cr-color-bg-solid-hover-lightmode);
  --cr-color-bg-solid-active: var(--cr-color-bg-solid-active-lightmode);
  --cr-color-bg-primary-ui: var(--cr-color-bg-primary-ui-lightmode);
  --cr-color-bg-primary-ui-hover: var(--cr-color-bg-primary-ui-hover-lightmode);
  --cr-color-bg-primary-ui-active: var(--cr-color-bg-primary-ui-active-lightmode);
  --cr-color-border-primary-subtle: var(--cr-color-border-primary-subtle-lightmode);
  --cr-color-border-primary: var(--cr-color-border-primary-lightmode);
  --cr-color-border-primary-hover: var(--cr-color-border-primary-hover-lightmode);
  --cr-color-bg-primary-solid: var(--cr-color-bg-primary-solid-lightmode);
  --cr-color-bg-primary-solid-hover: var(--cr-color-bg-primary-solid-hover-lightmode);
  --cr-color-bg-primary-solid-active: var(--cr-color-bg-primary-solid-active-lightmode);
  --cr-color-bg-primary-solid-disabled: var(--cr-color-bg-primary-solid-disabled-lightmode);
  --cr-color-text-primary: var(--cr-color-text-primary-lightmode);
  --cr-color-text-primary-contrast: var(--cr-color-text-primary-contrast-lightmode);
  --cr-color-bg-brand-ui: var(--cr-color-bg-brand-ui-lightmode);
  --cr-color-bg-brand-ui-hover: var(--cr-color-bg-brand-ui-hover-lightmode);
  --cr-color-bg-brand-ui-active: var(--cr-color-bg-brand-ui-active-lightmode);
  --cr-color-border-brand-subtle: var(--cr-color-border-brand-subtle-lightmode);
  --cr-color-border-brand: var(--cr-color-border-brand-lightmode);
  --cr-color-border-brand-hover: var(--cr-color-border-brand-hover-lightmode);
  --cr-color-bg-brand-solid: var(--cr-color-bg-brand-solid-lightmode);
  --cr-color-bg-brand-solid-hover: var(--cr-color-bg-brand-solid-hover-lightmode);
  --cr-color-bg-brand-solid-active: var(--cr-color-bg-brand-solid-active-lightmode);
  --cr-color-text-brand: var(--cr-color-text-brand-lightmode);
  --cr-color-text-brand-contrast: var(--cr-color-text-brand-contrast-lightmode);
  --cr-color-bg-negative-ui: var(--cr-color-bg-negative-ui-lightmode);
  --cr-color-bg-negative-ui-hover: var(--cr-color-bg-negative-ui-hover-lightmode);
  --cr-color-bg-negative-ui-active: var(--cr-color-bg-negative-ui-active-lightmode);
  --cr-color-border-negative-subtle: var(--cr-color-border-negative-subtle-lightmode);
  --cr-color-border-negative: var(--cr-color-border-negative-lightmode);
  --cr-color-border-negative-hover: var(--cr-color-border-negative-hover-lightmode);
  --cr-color-bg-negative-solid: var(--cr-color-bg-negative-solid-lightmode);
  --cr-color-bg-negative-solid-hover: var(--cr-color-bg-negative-solid-hover-lightmode);
  --cr-color-bg-negative-solid-active: var(--cr-color-bg-negative-solid-active-lightmode);
  --cr-color-bg-negative-solid-disabled: var(--cr-color-bg-negative-solid-disabled-lightmode);
  --cr-color-text-negative: var(--cr-color-text-negative-lightmode);
  --cr-color-text-negative-contrast: var(--cr-color-text-negative-contrast-lightmode);
  --cr-color-bg-positive-ui: var(--cr-color-bg-positive-ui-lightmode);
  --cr-color-bg-positive-ui-hover: var(--cr-color-bg-positive-ui-hover-lightmode);
  --cr-color-bg-positive-ui-active: var(--cr-color-bg-positive-ui-active-lightmode);
  --cr-color-border-positive-subtle: var(--cr-color-border-positive-subtle-lightmode);
  --cr-color-border-positive: var(--cr-color-border-positive-lightmode);
  --cr-color-border-positive-hover: var(--cr-color-border-positive-hover-lightmode);
  --cr-color-bg-positive-solid: var(--cr-color-bg-positive-solid-lightmode);
  --cr-color-bg-positive-solid-hover: var(--cr-color-bg-positive-solid-hover-lightmode);
  --cr-color-bg-positive-solid-active: var(--cr-color-bg-positive-solid-active-lightmode);
  --cr-color-text-positive: var(--cr-color-text-positive-lightmode);
  --cr-color-text-positive-contrast: var(--cr-color-text-positive-contrast-lightmode);
  --cr-color-bg-notice-ui: var(--cr-color-bg-notice-ui-lightmode);
  --cr-color-bg-notice-ui-hover: var(--cr-color-bg-notice-ui-hover-lightmode);
  --cr-color-bg-notice-ui-active: var(--cr-color-bg-notice-ui-active-lightmode);
  --cr-color-border-notice-subtle: var(--cr-color-border-notice-subtle-lightmode);
  --cr-color-border-notice: var(--cr-color-border-notice-lightmode);
  --cr-color-border-notice-hover: var(--cr-color-border-notice-hover-lightmode);
  --cr-color-bg-notice-solid: var(--cr-color-bg-notice-solid-lightmode);
  --cr-color-bg-notice-solid-hover: var(--cr-color-bg-notice-solid-hover-lightmode);
  --cr-color-bg-notice-solid-active: var(--cr-color-bg-notice-solid-active-lightmode);
  --cr-color-bg-notice-solid-disabled: var(--cr-color-bg-notice-solid-disabled-lightmode);
  --cr-color-text-notice: var(--cr-color-text-notice-lightmode);
  --cr-color-text-notice-contrast: var(--cr-color-text-notice-contrast-lightmode);
  --cr-color-bg-informative-ui: var(--cr-color-bg-informative-ui-lightmode);
  --cr-color-bg-informative-ui-hover: var(--cr-color-bg-informative-ui-hover-lightmode);
  --cr-color-bg-informative-ui-active: var(--cr-color-bg-informative-ui-active-lightmode);
  --cr-color-border-informative-subtle: var(--cr-color-border-informative-subtle-lightmode);
  --cr-color-border-informative: var(--cr-color-border-informative-lightmode);
  --cr-color-border-informative-hover: var(--cr-color-border-informative-hover-lightmode);
  --cr-color-bg-informative-solid: var(--cr-color-bg-informative-solid-lightmode);
  --cr-color-bg-informative-solid-hover: var(--cr-color-bg-informative-solid-hover-lightmode);
  --cr-color-bg-informative-solid-active: var(--cr-color-bg-informative-solid-active-lightmode);
  --cr-color-text-informative: var(--cr-color-text-informative-lightmode);
  --cr-color-text-informative-contrast: var(--cr-color-text-informative-contrast-lightmode);
  --cr-color-bg-contrast-ui: var(--cr-color-bg-contrast-ui-lightmode);
  --cr-color-bg-contrast-ui-hover: var(--cr-color-bg-contrast-ui-hover-lightmode);
  --cr-color-bg-contrast-ui-active: var(--cr-color-bg-contrast-ui-active-lightmode);
  --cr-color-border-contrast-subtle: var(--cr-color-border-contrast-subtle-lightmode);
  --cr-color-border-contrast: var(--cr-color-border-contrast-lightmode);
  --cr-color-border-contrast-hover: var(--cr-color-border-contrast-hover-lightmode);
  --cr-color-bg-contrast-solid: var(--cr-color-bg-contrast-solid-lightmode);
  --cr-color-bg-contrast-solid-hover: var(--cr-color-bg-contrast-solid-hover-lightmode);
  --cr-color-bg-contrast-solid-active: var(--cr-color-bg-contrast-solid-active-lightmode);
  --cr-color-text-contrast-contrast: var(--cr-color-text-contrast-contrast-lightmode);
  --cr-color-highlight: var(--cr-color-highlight-lightmode);
  --cr-color-highlight-primary: var(--cr-color-highlight-primary-lightmode);
  --cr-color-highlight-negative: var(--cr-color-highlight-negative-lightmode);
  --cr-color-highlight-positive: var(--cr-color-highlight-negative-positive);
  --cr-color-highlight-contrast: var(--cr-color-highlight-contrast-lightmode);
  --cr-color-text-invert: var(--cr-color-text-invert-lightmode);
  --cr-color-bg-invert: var(--cr-color-bg-invert-lightmode);
  --cr-color-text-notice: var(--cr-color-text-notice-lightmode);
  --cr-color-text-positive: var(--cr-color-text-positive-lightmode);
  --cr-color-text-informative: var(--cr-color-text-informative-lightmode);
  --cr-color-text-accent: var(--cr-color-text-accent-lightmode);
  --cr-color-bg-comp-1: var(--cr-color-bg-comp-1-solid-lightmode);
  --cr-color-bg-comp-2: var(--cr-color-bg-comp-2-solid-lightmode);
  --cr-bg-checkbox: var(--cr-bg-checkbox-lightmode);
  --cr-bg-checkbox-checked: var(--cr-bg-checkbox-checked-lightmode);
  --cr-bg-checkbox-indeterminate: var(--cr-bg-checkbox-indeterminate-lightmode);
  --cr-bg-checkbox-checked-primary: var(--cr-bg-checkbox-checked-primary-lightmode);
  --cr-bg-checkbox-indeterminate-primary: var(--cr-bg-checkbox-indeterminate-primary-lightmode);
  --cr-bg-checkbox-error: var(--cr-bg-checkbox-error-lightmode);
  --cr-bg-checkbox-checked-error: var(--cr-bg-checkbox-checked-error-lightmode);
  --cr-bg-checkbox-indeterminate-error: var(--cr-bg-checkbox-indeterminate-error-lightmode);
  --cr-bg-radio: var(--cr-bg-radio-lightmode);
  --cr-bg-radio-checked: var(--cr-bg-radio-checked-lightmode);
  --cr-bg-radio-checked-primary: var(--cr-bg-radio-checked-primary-lightmode);
  --cr-bg-show-password: var(--cr-bg-show-password-lightmode);
  --cr-bg-hide-password: var(--cr-bg-hide-password-lightmode);
  --cr-bg-select: var(--cr-bg-select-lightmode);
  --cr-bg-search: var(--cr-bg-search-lightmode);
  --cr-bg-negative: var(--cr-bg-negative-lightmode);
  --cr-bg-informative: var(--cr-bg-informative-lightmode);
  --cr-bg-notice: var(--cr-bg-notice-lightmode);
  --cr-bg-positive: var(--cr-bg-positive-lightmode);
  --cr-bg-breadcrumb: var(--cr-bg-breadcrumb-lightmode);
  --cr-bg-table-ascending: var(--cr-bg-table-ascending-lightmode);
  --cr-bg-table-descending: var(--cr-bg-table-descending-lightmode);
  --cr-bg-table-none: var(--cr-bg-table-none-lightmode);
  --cr-bg-table-hover: var(--cr-bg-table-hover-lightmode);
  --cr-bg-date-picker: var(--cr-bg-date-picker-lightmode);
}

[color-scheme=light] {
  color-scheme: light;
  --cr-color-brand-main: var(--cr-color-brand-main-lightmode);
  --cr-color-brand-accent: var(--cr-color-brand-accent-lightmode);
  --cr-color-brand-main-logo: var(--cr-color-brand-main-logo-lightmode);
  --cr-color-brand-plum: var(--cr-color-brand-plum-lightmode);
  --cr-color-active-bg: var(--cr-color-active-bg-lightmode);
  --cr-color-active-text: var(--cr-color-active-text-lightmode);
  --cr-color-text-1: var(--cr-color-text-1-lightmode);
  --cr-color-text-2: var(--cr-color-text-2-lightmode);
  --cr-color-text-contrast: var(--cr-color-text-contrast-lightmode);
  --cr-color-text-disabled: var(--cr-color-text-disabled-lightmode);
  --cr-color-surface-1: var(--cr-color-surface-1-lightmode);
  --cr-color-surface-2: var(--cr-color-surface-2-lightmode);
  --cr-color-surface-3: var(--cr-color-surface-3-lightmode);
  --cr-color-action-text: var(--cr-color-action-text-lightmode);
  --cr-color-action-hover: var(--cr-color-action-text-hover-lightmode);
  --cr-color-focus-ring: var(--cr-color-focus-ring-lightmode);
  --cr-color-stroke: var(--cr-color-stroke-lightmode);
  --cr-color-stroke-ui: var(--cr-color-stroke-ui-lightmode);
  --cr-shadow-color: var(--cr-shadow-color-lightmode);
  --cr-shadow-strength: var(--cr-shadow-strength-lightmode);
  --cr-color-bg-ui: var(--cr-color-bg-ui-lightmode);
  --cr-color-bg-ui-hover: var(--cr-color-bg-ui-hover-lightmode);
  --cr-color-bg-ui-disabled: var(--cr-color-bg-ui-disabled-lightmode);
  --cr-color-bg-ui-active: var(--cr-color-bg-ui-active-lightmode);
  --cr-color-bg-input: var(--cr-color-bg-input-lightmode);
  --cr-color-border-subtle: var(--cr-color-border-subtle-lightmode);
  --cr-color-border: var(--cr-color-border-lightmode);
  --cr-color-border-hover: var(--cr-color-border-hover-lightmode);
  --cr-color-bg-solid: var(--cr-color-bg-solid-lightmode);
  --cr-color-bg-solid-hover: var(--cr-color-bg-solid-hover-lightmode);
  --cr-color-bg-solid-active: var(--cr-color-bg-solid-active-lightmode);
  --cr-color-bg-primary-ui: var(--cr-color-bg-primary-ui-lightmode);
  --cr-color-bg-primary-ui-hover: var(--cr-color-bg-primary-ui-hover-lightmode);
  --cr-color-bg-primary-ui-active: var(--cr-color-bg-primary-ui-active-lightmode);
  --cr-color-border-primary-subtle: var(--cr-color-border-primary-subtle-lightmode);
  --cr-color-border-primary: var(--cr-color-border-primary-lightmode);
  --cr-color-border-primary-hover: var(--cr-color-border-primary-hover-lightmode);
  --cr-color-bg-primary-solid: var(--cr-color-bg-primary-solid-lightmode);
  --cr-color-bg-primary-solid-hover: var(--cr-color-bg-primary-solid-hover-lightmode);
  --cr-color-bg-primary-solid-active: var(--cr-color-bg-primary-solid-active-lightmode);
  --cr-color-bg-primary-solid-disabled: var(--cr-color-bg-primary-solid-disabled-lightmode);
  --cr-color-text-primary: var(--cr-color-text-primary-lightmode);
  --cr-color-text-primary-contrast: var(--cr-color-text-primary-contrast-lightmode);
  --cr-color-bg-brand-ui: var(--cr-color-bg-brand-ui-lightmode);
  --cr-color-bg-brand-ui-hover: var(--cr-color-bg-brand-ui-hover-lightmode);
  --cr-color-bg-brand-ui-active: var(--cr-color-bg-brand-ui-active-lightmode);
  --cr-color-border-brand-subtle: var(--cr-color-border-brand-subtle-lightmode);
  --cr-color-border-brand: var(--cr-color-border-brand-lightmode);
  --cr-color-border-brand-hover: var(--cr-color-border-brand-hover-lightmode);
  --cr-color-bg-brand-solid: var(--cr-color-bg-brand-solid-lightmode);
  --cr-color-bg-brand-solid-hover: var(--cr-color-bg-brand-solid-hover-lightmode);
  --cr-color-bg-brand-solid-active: var(--cr-color-bg-brand-solid-active-lightmode);
  --cr-color-text-brand: var(--cr-color-text-brand-lightmode);
  --cr-color-text-brand-contrast: var(--cr-color-text-brand-contrast-lightmode);
  --cr-color-bg-negative-ui: var(--cr-color-bg-negative-ui-lightmode);
  --cr-color-bg-negative-ui-hover: var(--cr-color-bg-negative-ui-hover-lightmode);
  --cr-color-bg-negative-ui-active: var(--cr-color-bg-negative-ui-active-lightmode);
  --cr-color-border-negative-subtle: var(--cr-color-border-negative-subtle-lightmode);
  --cr-color-border-negative: var(--cr-color-border-negative-lightmode);
  --cr-color-border-negative-hover: var(--cr-color-border-negative-hover-lightmode);
  --cr-color-bg-negative-solid: var(--cr-color-bg-negative-solid-lightmode);
  --cr-color-bg-negative-solid-hover: var(--cr-color-bg-negative-solid-hover-lightmode);
  --cr-color-bg-negative-solid-active: var(--cr-color-bg-negative-solid-active-lightmode);
  --cr-color-bg-negative-solid-disabled: var(--cr-color-bg-negative-solid-disabled-lightmode);
  --cr-color-text-negative: var(--cr-color-text-negative-lightmode);
  --cr-color-text-negative-contrast: var(--cr-color-text-negative-contrast-lightmode);
  --cr-color-bg-positive-ui: var(--cr-color-bg-positive-ui-lightmode);
  --cr-color-bg-positive-ui-hover: var(--cr-color-bg-positive-ui-hover-lightmode);
  --cr-color-bg-positive-ui-active: var(--cr-color-bg-positive-ui-active-lightmode);
  --cr-color-border-positive-subtle: var(--cr-color-border-positive-subtle-lightmode);
  --cr-color-border-positive: var(--cr-color-border-positive-lightmode);
  --cr-color-border-positive-hover: var(--cr-color-border-positive-hover-lightmode);
  --cr-color-bg-positive-solid: var(--cr-color-bg-positive-solid-lightmode);
  --cr-color-bg-positive-solid-hover: var(--cr-color-bg-positive-solid-hover-lightmode);
  --cr-color-bg-positive-solid-active: var(--cr-color-bg-positive-solid-active-lightmode);
  --cr-color-text-positive: var(--cr-color-text-positive-lightmode);
  --cr-color-text-positive-contrast: var(--cr-color-text-positive-contrast-lightmode);
  --cr-color-bg-notice-ui: var(--cr-color-bg-notice-ui-lightmode);
  --cr-color-bg-notice-ui-hover: var(--cr-color-bg-notice-ui-hover-lightmode);
  --cr-color-bg-notice-ui-active: var(--cr-color-bg-notice-ui-active-lightmode);
  --cr-color-border-notice-subtle: var(--cr-color-border-notice-subtle-lightmode);
  --cr-color-border-notice: var(--cr-color-border-notice-lightmode);
  --cr-color-border-notice-hover: var(--cr-color-border-notice-hover-lightmode);
  --cr-color-bg-notice-solid: var(--cr-color-bg-notice-solid-lightmode);
  --cr-color-bg-notice-solid-hover: var(--cr-color-bg-notice-solid-hover-lightmode);
  --cr-color-bg-notice-solid-active: var(--cr-color-bg-notice-solid-active-lightmode);
  --cr-color-bg-notice-solid-disabled: var(--cr-color-bg-notice-solid-disabled-lightmode);
  --cr-color-text-notice: var(--cr-color-text-notice-lightmode);
  --cr-color-text-notice-contrast: var(--cr-color-text-notice-contrast-lightmode);
  --cr-color-bg-informative-ui: var(--cr-color-bg-informative-ui-lightmode);
  --cr-color-bg-informative-ui-hover: var(--cr-color-bg-informative-ui-hover-lightmode);
  --cr-color-bg-informative-ui-active: var(--cr-color-bg-informative-ui-active-lightmode);
  --cr-color-border-informative-subtle: var(--cr-color-border-informative-subtle-lightmode);
  --cr-color-border-informative: var(--cr-color-border-informative-lightmode);
  --cr-color-border-informative-hover: var(--cr-color-border-informative-hover-lightmode);
  --cr-color-bg-informative-solid: var(--cr-color-bg-informative-solid-lightmode);
  --cr-color-bg-informative-solid-hover: var(--cr-color-bg-informative-solid-hover-lightmode);
  --cr-color-bg-informative-solid-active: var(--cr-color-bg-informative-solid-active-lightmode);
  --cr-color-text-informative: var(--cr-color-text-informative-lightmode);
  --cr-color-text-informative-contrast: var(--cr-color-text-informative-contrast-lightmode);
  --cr-color-bg-contrast-ui: var(--cr-color-bg-contrast-ui-lightmode);
  --cr-color-bg-contrast-ui-hover: var(--cr-color-bg-contrast-ui-hover-lightmode);
  --cr-color-bg-contrast-ui-active: var(--cr-color-bg-contrast-ui-active-lightmode);
  --cr-color-border-contrast-subtle: var(--cr-color-border-contrast-subtle-lightmode);
  --cr-color-border-contrast: var(--cr-color-border-contrast-lightmode);
  --cr-color-border-contrast-hover: var(--cr-color-border-contrast-hover-lightmode);
  --cr-color-bg-contrast-solid: var(--cr-color-bg-contrast-solid-lightmode);
  --cr-color-bg-contrast-solid-hover: var(--cr-color-bg-contrast-solid-hover-lightmode);
  --cr-color-bg-contrast-solid-active: var(--cr-color-bg-contrast-solid-active-lightmode);
  --cr-color-text-contrast-contrast: var(--cr-color-text-contrast-contrast-lightmode);
  --cr-color-highlight: var(--cr-color-highlight-lightmode);
  --cr-color-highlight-primary: var(--cr-color-highlight-primary-lightmode);
  --cr-color-highlight-negative: var(--cr-color-highlight-negative-lightmode);
  --cr-color-highlight-positive: var(--cr-color-highlight-positive-lightmode);
  --cr-color-highlight-contrast: var(--cr-color-highlight-contrast-lightmode);
  --cr-color-text-invert: var(--cr-color-text-invert-lightmode);
  --cr-color-bg-invert: var(--cr-color-bg-invert-lightmode);
  --cr-color-bg-comp-1: var(--cr-color-bg-comp-1-solid-lightmode);
  --cr-color-bg-comp-2: var(--cr-color-bg-comp-2-solid-lightmode);
  --cr-bg-checkbox: var(--cr-bg-checkbox-lightmode);
  --cr-bg-checkbox-checked: var(--cr-bg-checkbox-checked-lightmode);
  --cr-bg-checkbox-indeterminate: var(--cr-bg-checkbox-indeterminate-lightmode);
  --cr-bg-checkbox-checked-primary: var(--cr-bg-checkbox-checked-primary-lightmode);
  --cr-bg-checkbox-indeterminate-primary: var(--cr-bg-checkbox-indeterminate-primary-lightmode);
  --cr-bg-checkbox-error: var(--cr-bg-checkbox-error-lightmode);
  --cr-bg-checkbox-checked-error: var(--cr-bg-checkbox-checked-error-lightmode);
  --cr-bg-checkbox-indeterminate-error: var(--cr-bg-checkbox-indeterminate-error-lightmode);
  --cr-bg-radio: var(--cr-bg-radio-lightmode);
  --cr-bg-radio-checked: var(--cr-bg-radio-checked-lightmode);
  --cr-bg-radio-checked-primary: var(--cr-bg-radio-checked-primary-lightmode);
  --cr-bg-show-password: var(--cr-bg-show-password-lightmode);
  --cr-bg-hide-password: var(--cr-bg-hide-password-lightmode);
  --cr-bg-select: var(--cr-bg-select-lightmode);
  --cr-bg-search: var(--cr-bg-search-lightmode);
  --cr-bg-negative: var(--cr-bg-negative-lightmode);
  --cr-bg-informative: var(--cr-bg-informative-lightmode);
  --cr-bg-notice: var(--cr-bg-notice-lightmode);
  --cr-bg-positive: var(--cr-bg-positive-lightmode);
  --cr-bg-breadcrumb: var(--cr-bg-breadcrumb-lightmode);
  --cr-bg-table-ascending: var(--cr-bg-table-ascending-lightmode);
  --cr-bg-table-descending: var(--cr-bg-table-descending-lightmode);
  --cr-bg-table-none: var(--cr-bg-table-none-lightmode);
  --cr-bg-table-hover: var(--cr-bg-table-hover-lightmode);
  --cr-bg-date-picker: var(--cr-bg-date-picker-lightmode);
}

@media (prefers-color-scheme: dark) {
  :where(html) {
    color-scheme: dark;
    --cr-color-brand-main: var(--cr-color-brand-main-darkmode);
    --cr-color-brand-accent: var(--cr-color-brand-accent-darkmode);
    --cr-color-brand-main-logo: var(--cr-color-brand-main-logo-darkmode);
    --cr-color-brand-plum: var(--cr-color-brand-plum-darkmode);
    --cr-color-active-bg: var(--cr-color-active-bg-darkmode);
    --cr-color-active-text: var(--cr-color-active-text-darkmode);
    --cr-color-text-1: var(--cr-color-text-1-darkmode);
    --cr-color-text-2: var(--cr-color-text-2-darkmode);
    --cr-color-text-contrast: var(--cr-color-text-contrast-darkmode);
    --cr-color-text-disabled: var(--cr-color-text-disabled-darkmode);
    --cr-color-surface-1: var(--cr-color-surface-1-darkmode);
    --cr-color-surface-2: var(--cr-color-surface-2-darkmode);
    --cr-color-surface-3: var(--cr-color-surface-3-darkmode);
    --cr-color-action-text: var(--cr-color-action-text-darkmode);
    --cr-color-action-text-hover:var(--cr-color-action-text-hover-darkmode);
    --cr-color-focus-ring: var(--cr-color-focus-ring-darkmode);
    --cr-color-stroke: var(--cr-color-stroke-darkmode);
    --cr-color-stroke-ui: var(--cr-color-stroke-ui-darkmode);
    --cr-shadow-color: var(--cr-shadow-color-darkmode);
    --cr-shadow-strength: var(--cr-shadow-strength-darkmode);
    --cr-color-bg-ui: var(--cr-color-bg-ui-darkmode);
    --cr-color-bg-ui-hover: var(--cr-color-bg-ui-hover-darkmode);
    --cr-color-bg-ui-disabled: var(--cr-color-bg-ui-disabled-darkmode);
    --cr-color-bg-ui-active: var(--cr-color-bg-ui-active-darkmode);
    --cr-color-bg-input: var(--cr-color-bg-input-darkmode);
    --cr-color-border-subtle: var(--cr-color-border-subtle-darkmode);
    --cr-color-border: var(--cr-color-border-darkmode);
    --cr-color-border-hover: var(--cr-color-border-hover-darkmode);
    --cr-color-bg-solid: var(--cr-color-bg-solid-darkmode);
    --cr-color-bg-solid-hover: var(--cr-color-bg-solid-hover-darkmode);
    --cr-color-bg-solid-active: var(--cr-color-bg-solid-active-darkmode);
    --cr-color-bg-primary-ui: var(--cr-color-bg-primary-ui-darkmode);
    --cr-color-bg-primary-ui-hover: var(--cr-color-bg-primary-ui-hover-darkmode);
    --cr-color-bg-primary-ui-active: var(--cr-color-bg-primary-ui-active-darkmode);
    --cr-color-border-primary-subtle: var(--cr-color-border-primary-subtle-darkmode);
    --cr-color-border-primary: var(--cr-color-border-primary-darkmode);
    --cr-color-border-primary-hover: var(--cr-color-border-primary-hover-darkmode);
    --cr-color-bg-primary-solid: var(--cr-color-bg-primary-solid-darkmode);
    --cr-color-bg-primary-solid-hover: var(--cr-color-bg-primary-solid-hover-darkmode);
    --cr-color-bg-primary-solid-active: var(--cr-color-bg-primary-solid-active-darkmode);
    --cr-color-bg-primary-solid-disabled: var(--cr-color-bg-primary-solid-disabled-darkmode);
    --cr-color-text-primary: var(--cr-color-text-primary-darkmode);
    --cr-color-text-primary-contrast: var(--cr-color-text-primary-contrast-darkmode);
    --cr-color-bg-brand-ui: var(--cr-color-bg-brand-ui-darkmode);
    --cr-color-bg-brand-ui-hover: var(--cr-color-bg-brand-ui-hover-darkmode);
    --cr-color-bg-brand-ui-active: var(--cr-color-bg-brand-ui-active-darkmode);
    --cr-color-border-brand-subtle: var(--cr-color-border-brand-subtle-darkmode);
    --cr-color-border-brand: var(--cr-color-border-brand-darkmode);
    --cr-color-border-brand-hover: var(--cr-color-border-brand-hover-darkmode);
    --cr-color-bg-brand-solid: var(--cr-color-bg-brand-solid-darkmode);
    --cr-color-bg-brand-solid-hover: var(--cr-color-bg-brand-solid-hover-darkmode);
    --cr-color-bg-brand-solid-active: var(--cr-color-bg-brand-solid-active-darkmode);
    --cr-color-text-brand: var(--cr-color-text-brand-darkmode);
    --cr-color-text-brand-contrast: var(--cr-color-text-brand-contrast-darkmode);
    --cr-color-bg-negative-ui: var(--cr-color-bg-negative-ui-darkmode);
    --cr-color-bg-negative-ui-hover: var(--cr-color-bg-negative-ui-hover-darkmode);
    --cr-color-bg-negative-ui-active: var(--cr-color-bg-negative-ui-active-darkmode);
    --cr-color-border-negative-subtle: var(--cr-color-border-negative-subtle-darkmode);
    --cr-color-border-negative: var(--cr-color-border-negative-darkmode);
    --cr-color-border-negative-hover: var(--cr-color-border-negative-hover-darkmode);
    --cr-color-bg-negative-solid: var(--cr-color-bg-negative-solid-darkmode);
    --cr-color-bg-negative-solid-hover: var(--cr-color-bg-negative-solid-hover-darkmode);
    --cr-color-bg-negative-solid-active: var(--cr-color-bg-negative-solid-active-darkmode);
    --cr-color-bg-negative-solid-disabled: var(--cr-color-bg-negative-solid-disabled-darkmode);
    --cr-color-text-negative: var(--cr-color-text-negative-darkmode);
    --cr-color-text-negative-contrast: var(--cr-color-text-negative-contrast-darkmode);
    --cr-color-bg-positive-ui: var(--cr-color-bg-positive-ui-darkmode);
    --cr-color-bg-positive-ui-hover: var(--cr-color-bg-positive-ui-hover-darkmode);
    --cr-color-bg-positive-ui-active: var(--cr-color-bg-positive-ui-active-darkmode);
    --cr-color-border-positive-subtle: var(--cr-color-border-positive-subtle-darkmode);
    --cr-color-border-positive: var(--cr-color-border-positive-darkmode);
    --cr-color-border-positive-hover: var(--cr-color-border-positive-hover-darkmode);
    --cr-color-bg-positive-solid: var(--cr-color-bg-positive-solid-darkmode);
    --cr-color-bg-positive-solid-hover: var(--cr-color-bg-positive-solid-hover-darkmode);
    --cr-color-bg-positive-solid-active: var(--cr-color-bg-positive-solid-active-darkmode);
    --cr-color-text-positive: var(--cr-color-text-positive-darkmode);
    --cr-color-text-positive-contrast: var(--cr-color-text-positive-contrast-darkmode);
    --cr-color-bg-notice-ui: var(--cr-color-bg-notice-ui-darkmode);
    --cr-color-bg-notice-ui-hover: var(--cr-color-bg-notice-ui-hover-darkmode);
    --cr-color-bg-notice-ui-active: var(--cr-color-bg-notice-ui-active-darkmode);
    --cr-color-border-notice-subtle: var(--cr-color-border-notice-subtle-darkmode);
    --cr-color-border-notice: var(--cr-color-border-notice-darkmode);
    --cr-color-border-notice-hover: var(--cr-color-border-notice-hover-darkmode);
    --cr-color-bg-notice-solid: var(--cr-color-bg-notice-solid-darkmode);
    --cr-color-bg-notice-solid-hover: var(--cr-color-bg-notice-solid-hover-darkmode);
    --cr-color-bg-notice-solid-active: var(--cr-color-bg-notice-solid-active-darkmode);
    --cr-color-bg-notice-solid-disabled: var(--cr-color-bg-notice-solid-disabled-darkmode);
    --cr-color-text-notice: var(--cr-color-text-notice-darkmode);
    --cr-color-text-notice-contrast: var(--cr-color-text-notice-contrast-darkmode);
    --cr-color-bg-informative-ui: var(--cr-color-bg-informative-ui-darkmode);
    --cr-color-bg-informative-ui-hover: var(--cr-color-bg-informative-ui-hover-darkmode);
    --cr-color-bg-informative-ui-active: var(--cr-color-bg-informative-ui-active-darkmode);
    --cr-color-border-informative-subtle: var(--cr-color-border-informative-subtle-darkmode);
    --cr-color-border-informative: var(--cr-color-border-informative-darkmode);
    --cr-color-border-informative-hover: var(--cr-color-border-informative-hover-darkmode);
    --cr-color-bg-informative-solid: var(--cr-color-bg-informative-solid-darkmode);
    --cr-color-bg-informative-solid-hover: var(--cr-color-bg-informative-solid-hover-darkmode);
    --cr-color-bg-informative-solid-active: var(--cr-color-bg-informative-solid-active-darkmode);
    --cr-color-text-informative: var(--cr-color-text-informative-darkmode);
    --cr-color-text-informative-contrast: var(--cr-color-text-informative-contrast-darkmode);
    --cr-color-bg-contrast-ui: var(--cr-color-bg-contrast-ui-darkmode);
    --cr-color-bg-contrast-ui-hover: var(--cr-color-bg-contrast-ui-hover-darkmode);
    --cr-color-bg-contrast-ui-active: var(--cr-color-bg-contrast-ui-active-darkmode);
    --cr-color-border-contrast-subtle: var(--cr-color-border-contrast-subtle-darkmode);
    --cr-color-border-contrast: var(--cr-color-border-contrast-darkmode);
    --cr-color-border-contrast-hover: var(--cr-color-border-contrast-hover-darkmode);
    --cr-color-bg-contrast-solid: var(--cr-color-bg-contrast-solid-darkmode);
    --cr-color-bg-contrast-solid-hover: var(--cr-color-bg-contrast-solid-hover-darkmode);
    --cr-color-bg-contrast-solid-active: var(--cr-color-bg-contrast-solid-active-darkmode);
    --cr-color-text-contrast: var(--cr-color-text-contrast-darkmode);
    --cr-color-text-contrast-contrast: var(--cr-color-text-contrast-contrast-darkmode);
    --cr-color-highlight: var(--cr-color-highlight-darkmode);
    --cr-color-highlight-primary: var(--cr-color-highlight-primary-darkmode);
    --cr-color-highlight-negative: var(--cr-color-highlight-negative-darkmode);
    --cr-color-highlight-positive: var(--cr-color-highlight-positive-darkmode);
    --cr-color-highlight-contrast: var(--cr-color-highlight-contrast-darkmode);
    --cr-color-text-invert: var(--cr-color-text-invert-darkmode);
    --cr-color-bg-invert: var(--cr-color-bg-invert-darkmode);
    --cr-color-bg-comp-1: var(--cr-color-bg-comp-1-solid-darkmode);
    --cr-color-bg-comp-2: var(--cr-color-bg-comp-2-solid-darkmode);
    --cr-bg-checkbox: var(--cr-bg-checkbox-darkmode);
    --cr-bg-checkbox-checked: var(--cr-bg-checkbox-checked-darkmode);
    --cr-bg-checkbox-indeterminate: var(--cr-bg-checkbox-indeterminate-darkmode);
    --cr-bg-checkbox-checked-primary: var(--cr-bg-checkbox-checked-primary-darkmode);
    --cr-bg-checkbox-indeterminate-primary: var(--cr-bg-checkbox-indeterminate-primary-darkmode);
    --cr-bg-checkbox-error: var(--cr-bg-checkbox-error-darkmode);
    --cr-bg-checkbox-checked-error: var(--cr-bg-checkbox-checked-error-darkmode);
    --cr-bg-checkbox-indeterminate-error: var(--cr-bg-checkbox-indeterminate-error-darkmode);
    --cr-bg-radio: var(--cr-bg-radio-darkmode);
    --cr-bg-radio-checked: var(--cr-bg-radio-checked-darkmode);
    --cr-bg-radio-checked-primary: var(--cr-bg-radio-checked-primary-darkmode);
    --cr-bg-show-password: var(--cr-bg-show-password-darkmode);
    --cr-bg-hide-password: var(--cr-bg-hide-password-darkmode);
    --cr-bg-select: var(--cr-bg-select-darkmode);
    --cr-bg-search: var(--cr-bg-search-darkmode);
    --cr-bg-negative: var(--cr-bg-negative-darkmode);
    --cr-bg-informative: var(--cr-bg-informative-darkmode);
    --cr-bg-notice: var(--cr-bg-notice-darkmode);
    --cr-bg-positive: var(--cr-bg-positive-darkmode);
    --cr-bg-breadcrumb: var(--cr-bg-breadcrumb-darkmode);
    --cr-bg-table-ascending: var(--cr-bg-table-ascending-darkmode);
    --cr-bg-table-descending: var(--cr-bg-table-descending-darkmode);
    --cr-bg-table-none: var(--cr-bg-table-none-darkmode);
    --cr-bg-table-hover: var(--cr-bg-table-hover-darkmode);
    --cr-bg-date-picker: var(--cr-bg-date-picker-darkmode);
  }
}
[color-scheme=dark] {
  color-scheme: dark;
  --cr-color-brand-main: var(--cr-color-brand-main-darkmode);
  --cr-color-brand-accent: var(--cr-color-brand-accent-darkmode);
  --cr-color-brand-main-logo: var(--cr-color-brand-main-logo-darkmode);
  --cr-color-brand-plum: var(--cr-color-brand-plum-darkmode);
  --cr-color-active-bg: var(--cr-color-active-bg-darkmode);
  --cr-color-active-text: var(--cr-color-active-text-darkmode);
  --cr-color-text-1: var(--cr-color-text-1-darkmode);
  --cr-color-text-2: var(--cr-color-text-2-darkmode);
  --cr-color-text-contrast: var(--cr-color-text-contrast-darkmode);
  --cr-color-text-disabled: var(--cr-color-text-disabled-darkmode);
  --cr-color-surface-1: var(--cr-color-surface-1-darkmode);
  --cr-color-surface-2: var(--cr-color-surface-2-darkmode);
  --cr-color-surface-3: var(--cr-color-surface-3-darkmode);
  --cr-color-action-text: var(--cr-color-action-text-darkmode);
  --cr-color-action-text-hover:var(--cr-color-action-text-hover-darkmode);
  --cr-color-focus-ring: var(--cr-color-focus-ring-darkmode);
  --cr-color-stroke: var(--cr-color-stroke-darkmode);
  --cr-color-stroke-ui: var(--cr-color-stroke-ui-darkmode);
  --cr-shadow-color: var(--cr-shadow-color-darkmode);
  --cr-shadow-strength: var(--cr-shadow-strength-darkmode);
  --cr-color-bg-ui: var(--cr-color-bg-ui-darkmode);
  --cr-color-bg-ui-hover: var(--cr-color-bg-ui-hover-darkmode);
  --cr-color-bg-ui-disabled: var(--cr-color-bg-ui-disabled-darkmode);
  --cr-color-bg-ui-active: var(--cr-color-bg-ui-active-darkmode);
  --cr-color-bg-input: var(--cr-color-bg-input-darkmode);
  --cr-color-border-subtle: var(--cr-color-border-subtle-darkmode);
  --cr-color-border: var(--cr-color-border-darkmode);
  --cr-color-border-hover: var(--cr-color-border-hover-darkmode);
  --cr-color-bg-solid: var(--cr-color-bg-solid-darkmode);
  --cr-color-bg-solid-hover: var(--cr-color-bg-solid-hover-darkmode);
  --cr-color-bg-solid-active: var(--cr-color-bg-solid-active-darkmode);
  --cr-color-bg-primary-ui: var(--cr-color-bg-primary-ui-darkmode);
  --cr-color-bg-primary-ui-hover: var(--cr-color-bg-primary-ui-hover-darkmode);
  --cr-color-bg-primary-ui-active: var(--cr-color-bg-primary-ui-active-darkmode);
  --cr-color-border-primary-subtle: var(--cr-color-border-primary-subtle-darkmode);
  --cr-color-border-primary: var(--cr-color-border-primary-darkmode);
  --cr-color-border-primary-hover: var(--cr-color-border-primary-hover-darkmode);
  --cr-color-bg-primary-solid: var(--cr-color-bg-primary-solid-darkmode);
  --cr-color-bg-primary-solid-hover: var(--cr-color-bg-primary-solid-hover-darkmode);
  --cr-color-bg-primary-solid-active: var(--cr-color-bg-primary-solid-active-darkmode);
  --cr-color-bg-primary-solid-disabled: var(--cr-color-bg-primary-solid-disabled-darkmode);
  --cr-color-text-primary: var(--cr-color-text-primary-darkmode);
  --cr-color-text-primary-contrast: var(--cr-color-text-primary-contrast-darkmode);
  --cr-color-bg-brand-ui: var(--cr-color-bg-brand-ui-darkmode);
  --cr-color-bg-brand-ui-hover: var(--cr-color-bg-brand-ui-hover-darkmode);
  --cr-color-bg-brand-ui-active: var(--cr-color-bg-brand-ui-active-darkmode);
  --cr-color-border-brand-subtle: var(--cr-color-border-brand-subtle-darkmode);
  --cr-color-border-brand: var(--cr-color-border-brand-darkmode);
  --cr-color-border-brand-hover: var(--cr-color-border-brand-hover-darkmode);
  --cr-color-bg-brand-solid: var(--cr-color-bg-brand-solid-darkmode);
  --cr-color-bg-brand-solid-hover: var(--cr-color-bg-brand-solid-hover-darkmode);
  --cr-color-bg-brand-solid-active: var(--cr-color-bg-brand-solid-active-darkmode);
  --cr-color-text-brand: var(--cr-color-text-brand-darkmode);
  --cr-color-text-brand-contrast: var(--cr-color-text-brand-contrast-darkmode);
  --cr-color-bg-negative-ui: var(--cr-color-bg-negative-ui-darkmode);
  --cr-color-bg-negative-ui-hover: var(--cr-color-bg-negative-ui-hover-darkmode);
  --cr-color-bg-negative-ui-active: var(--cr-color-bg-negative-ui-active-darkmode);
  --cr-color-border-negative-subtle: var(--cr-color-border-negative-subtle-darkmode);
  --cr-color-border-negative: var(--cr-color-border-negative-darkmode);
  --cr-color-border-negative-hover: var(--cr-color-border-negative-hover-darkmode);
  --cr-color-bg-negative-solid: var(--cr-color-bg-negative-solid-darkmode);
  --cr-color-bg-negative-solid-hover: var(--cr-color-bg-negative-solid-hover-darkmode);
  --cr-color-bg-negative-solid-active: var(--cr-color-bg-negative-solid-active-darkmode);
  --cr-color-bg-negative-solid-disabled: var(--cr-color-bg-negative-solid-disabled-darkmode);
  --cr-color-text-negative: var(--cr-color-text-negative-darkmode);
  --cr-color-text-negative-contrast: var(--cr-color-text-negative-contrast-darkmode);
  --cr-color-bg-positive-ui: var(--cr-color-bg-positive-ui-darkmode);
  --cr-color-bg-positive-ui-hover: var(--cr-color-bg-positive-ui-hover-darkmode);
  --cr-color-bg-positive-ui-active: var(--cr-color-bg-positive-ui-active-darkmode);
  --cr-color-border-positive-subtle: var(--cr-color-border-positive-subtle-darkmode);
  --cr-color-border-positive: var(--cr-color-border-positive-darkmode);
  --cr-color-border-positive-hover: var(--cr-color-border-positive-hover-darkmode);
  --cr-color-bg-positive-solid: var(--cr-color-bg-positive-solid-darkmode);
  --cr-color-bg-positive-solid-hover: var(--cr-color-bg-positive-solid-hover-darkmode);
  --cr-color-bg-positive-solid-active: var(--cr-color-bg-positive-solid-active-darkmode);
  --cr-color-text-positive: var(--cr-color-text-positive-darkmode);
  --cr-color-text-positive-contrast: var(--cr-color-text-positive-contrast-darkmode);
  --cr-color-bg-notice-ui: var(--cr-color-bg-notice-ui-darkmode);
  --cr-color-bg-notice-ui-hover: var(--cr-color-bg-notice-ui-hover-darkmode);
  --cr-color-bg-notice-ui-active: var(--cr-color-bg-notice-ui-active-darkmode);
  --cr-color-border-notice-subtle: var(--cr-color-border-notice-subtle-darkmode);
  --cr-color-border-notice: var(--cr-color-border-notice-darkmode);
  --cr-color-border-notice-hover: var(--cr-color-border-notice-hover-darkmode);
  --cr-color-bg-notice-solid: var(--cr-color-bg-notice-solid-darkmode);
  --cr-color-bg-notice-solid-hover: var(--cr-color-bg-notice-solid-hover-darkmode);
  --cr-color-bg-notice-solid-active: var(--cr-color-bg-notice-solid-active-darkmode);
  --cr-color-bg-notice-solid-disabled: var(--cr-color-bg-notice-solid-disabled-darkmode);
  --cr-color-text-notice: var(--cr-color-text-notice-darkmode);
  --cr-color-text-notice-contrast: var(--cr-color-text-notice-contrast-darkmode);
  --cr-color-bg-informative-ui: var(--cr-color-bg-informative-ui-darkmode);
  --cr-color-bg-informative-ui-hover: var(--cr-color-bg-informative-ui-hover-darkmode);
  --cr-color-bg-informative-ui-active: var(--cr-color-bg-informative-ui-active-darkmode);
  --cr-color-border-informative-subtle: var(--cr-color-border-informative-subtle-darkmode);
  --cr-color-border-informative: var(--cr-color-border-informative-darkmode);
  --cr-color-border-informative-hover: var(--cr-color-border-informative-hover-darkmode);
  --cr-color-bg-informative-solid: var(--cr-color-bg-informative-solid-darkmode);
  --cr-color-bg-informative-solid-hover: var(--cr-color-bg-informative-solid-hover-darkmode);
  --cr-color-bg-informative-solid-active: var(--cr-color-bg-informative-solid-active-darkmode);
  --cr-color-text-informative: var(--cr-color-text-informative-darkmode);
  --cr-color-text-informative-contrast: var(--cr-color-text-informative-contrast-darkmode);
  --cr-color-bg-contrast-ui: var(--cr-color-bg-contrast-ui-darkmode);
  --cr-color-bg-contrast-ui-hover: var(--cr-color-bg-contrast-ui-hover-darkmode);
  --cr-color-bg-contrast-ui-active: var(--cr-color-bg-contrast-ui-active-darkmode);
  --cr-color-border-contrast-subtle: var(--cr-color-border-contrast-subtle-darkmode);
  --cr-color-border-contrast: var(--cr-color-border-contrast-darkmode);
  --cr-color-border-contrast-hover: var(--cr-color-border-contrast-hover-darkmode);
  --cr-color-bg-contrast-solid: var(--cr-color-bg-contrast-solid-darkmode);
  --cr-color-bg-contrast-solid-hover: var(--cr-color-bg-contrast-solid-hover-darkmode);
  --cr-color-bg-contrast-solid-active: var(--cr-color-bg-contrast-solid-active-darkmode);
  --cr-color-text-contrast: var(--cr-color-text-contrast-darkmode);
  --cr-color-text-contrast-contrast: var(--cr-color-text-contrast-contrast-darkmode);
  --cr-color-highlight: var(--cr-color-highlight-darkmode);
  --cr-color-highlight-primary: var(--cr-color-highlight-primary-darkmode);
  --cr-color-highlight-negative: var(--cr-color-highlight-negative-darkmode);
  --cr-color-highlight-positive: var(--cr-color-highlight-positive-darkmode);
  --cr-color-highlight-contrast: var(--cr-color-highlight-contrast-darkmode);
  --cr-color-text-invert: var(--cr-color-text-invert-darkmode);
  --cr-color-bg-invert: var(--cr-color-bg-invert-darkmode);
  --cr-color-bg-comp-1: var(--cr-color-bg-comp-1-solid-darkmode);
  --cr-color-bg-comp-2: var(--cr-color-bg-comp-2-solid-darkmode);
  --cr-bg-checkbox: var(--cr-bg-checkbox-darkmode);
  --cr-bg-checkbox-checked: var(--cr-bg-checkbox-checked-darkmode);
  --cr-bg-checkbox-indeterminate: var(--cr-bg-checkbox-indeterminate-darkmode);
  --cr-bg-checkbox-checked-primary: var(--cr-bg-checkbox-checked-primary-darkmode);
  --cr-bg-checkbox-indeterminate-primary: var(--cr-bg-checkbox-indeterminate-primary-darkmode);
  --cr-bg-checkbox-error: var(--cr-bg-checkbox-error-darkmode);
  --cr-bg-checkbox-checked-error: var(--cr-bg-checkbox-checked-error-darkmode);
  --cr-bg-checkbox-indeterminate-error: var(--cr-bg-checkbox-indeterminate-error-darkmode);
  --cr-bg-radio: var(--cr-bg-radio-darkmode);
  --cr-bg-radio-checked: var(--cr-bg-radio-checked-darkmode);
  --cr-bg-radio-checked-primary: var(--cr-bg-radio-checked-primary-darkmode);
  --cr-bg-show-password: var(--cr-bg-show-password-darkmode);
  --cr-bg-hide-password: var(--cr-bg-hide-password-darkmode);
  --cr-bg-select: var(--cr-bg-select-darkmode);
  --cr-bg-search: var(--cr-bg-search-darkmode);
  --cr-bg-negative: var(--cr-bg-negative-darkmode);
  --cr-bg-informative: var(--cr-bg-informative-darkmode);
  --cr-bg-notice: var(--cr-bg-notice-darkmode);
  --cr-bg-positive: var(--cr-bg-positive-darkmode);
  --cr-bg-breadcrumb: var(--cr-bg-breadcrumb-darkmode);
  --cr-bg-table-ascending: var(--cr-bg-table-ascending-darkmode);
  --cr-bg-table-descending: var(--cr-bg-table-descending-darkmode);
  --cr-bg-table-none: var(--cr-bg-table-none-darkmode);
  --cr-bg-table-hover: var(--cr-bg-table-hover-darkmode);
  --cr-bg-date-picker: var(--cr-bg-date-picker-darkmode);
}

.backdrop {
  background-color: hsl(var(--cr-color-neutral-bg-0)/30%);
}

:where(html) {
  --cr-size-base: var(--cr-size-3);
  --cr-size-narrow: var(--cr-size-2);
  --cr-size-wide: var(--cr-size-5);
  --cr-size-fluid-base: var(--cr-size-fluid-3);
  --cr-size-fluid-narrow: var(--cr-size-fluid-2);
  --cr-size-fluid-wide: var(--cr-size-fluid-4);
  --cr-size-field-inline-size-max: var(--cr-size-15);
  --cr-gap: var(--cr-size-2);
  --cr-gap-sm: var(--cr-size-1);
  --cr-gap-lg: var(--cr-size-3);
  --cr-flow-space: var(--cr-size-fluid-base);
  --cr-spacing-block: var(--cr-size-narrow) var(--cr-size-base);
  --cr-border-size-base: var(--cr-border-size-1);
  --cr-border-size-thin: var(--cr-border-size-base);
  --cr-border-size-med: var(--cr-border-size-2);
  --cr-border-size-thick: var(--cr-border-size-3);
  --cr-border-size-heavy: var(--cr-border-size-4);
  --cr-detail-size: var(--cr-border-size-base);
  --cr-menu-border-size-selected: 3px;
  --cr-border-style-solid: solid;
  --cr-border-style-dotted: dotted;
  --cr-border-style-dashed: dashed;
  --cr-border-style-base: var(--cr-border-style-solid);
  --cr-border-ui: var(--cr-border-size-base) var(--cr-border-style-base) var(--cr-color-neutral-border-1);
  --cr-border-stroke: var(--cr-border-size-base) var(--cr-border-style-base) var(--cr-color-stroke);
  --cr-border-stroke-med: var(--cr-border-size-med) var(--cr-border-style-base) var(--cr-color-stroke);
  --cr-border-radius-base: var(--cr-border-radius-2);
  --cr-border-radius-sm: var(--cr-border-radius-base);
  --cr-border-radius-lg: var(--cr-border-radius-3);
  --cr-border-radius-button: .4ch;
  --cr-transition-motion-reduce: ;
  --cr-transition-motion-ok:
    box-shadow 145ms ease,
    outline-offset 145ms ease ;
  --cr-highlight-size: 0;
  --cr-shadow-color-light: 220 3% 15%;
  --cr-shadow-color-dark: 220 40% 2%;
  --cr-shadow-color: var(--cr-shadow-color-light);
  --cr-shadow-strength-light: 1%;
  --cr-shadow-strength-dark: 25%;
  --cr-shadow-strength: var(--cr-shadow-strength-light);
  --cr-shadow-1: 0 1px 2px -1px hsl(var(--cr-shadow-color)/calc(var(--cr-shadow-strength) + 9%));
  --cr-shadow-2: 0 3px 5px -2px hsl(var(--cr-shadow-color)/calc(var(--cr-shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--cr-shadow-color)/calc(var(--cr-shadow-strength) + 5%));
  --cr-shadow-depth: 0 1px var(--cr-color-neutral-border-1);
  --cr-duration-base: var(--cr-duration-5);
  --cr-ease-base: var(--cr-ease-3);
}

:where(html) {
  --cr-width-xxs: 16rem;
  --cr-width-xs: 32rem;
  --cr-width-sm: 48rem;
  --cr-width-md: 64rem;
  --cr-width-lg: 80rem;
  --cr-width-xl: 96rem;
  --cr-width-xxl: 112rem;
  --cr-wrapper-base: var(--cr-width-xxl);
  --cr-sidebar-base: var(--cr-width-xxs);
}

:where(html) {
  --cr-blockquotes-font-size: var(--cr-font-size-1);
  --cr-hr-spacing: var(--cr-size-fluid-5);
  --cr-hr-size: var(--cr-detail-size);
  --cr-li-spacing: var(--cr-flow-space);
  --cr-code-radius: var(--cr-border-radius-base);
}

:where(html) {
  --cr-input-padding: var(--cr-input-padding-block) var(--cr-input-padding-inline);
  --cr-input-padding-inline: 1rem;
  --cr-input-padding-block: .5rem;
  --cr-input-font-size: var(--cr-font-size-1);
  --cr-form-control-base: var(--cr-size-7);
  --cr-form-control-sm: var(--cr-size-6);
  --cr-form-control-lg: var(--cr-size-8);
  --cr-form-control-min-width: calc(var(--cr-form-control-sm) * 1.5);
  --cr-form-select-min-width: calc(var(--cr-form-control-base) * 2);
  --cr-form-textarea-min-width: calc(var(--cr-form-control-lg) * 2.5);
  --cr-form-file-min-width: calc(var(--cr-form-control-base) * 2.5);
  --cr-icon-size-base: 1.5ch;
  --cr-button-icon-size-base: var(--cr-size-7);
  --cr-button-icon-size-sm: var(--cr-size-5);
  --cr-button-icon-size-lg: var(--cr-size-8);
  --cr-button-icon-size: 1.5ch;
  --cr-button-input-icon-size: var(--cr-button-icon-size-sm);
  --cr-button-icon-color: var(--cr-color-brand-accent);
  --cr-avatar-size-base: var(--cr-size-7);
  --cr-table-padding: var(--cr-spacing-block);
  --cr-table-line-size: var(--cr-detail-size);
  --cr-z-index-dropdown: var(--cr-layer-3);
  --cr-z-index-backdrop: var(--cr-layer-5);
  --cr-z-index-fab: var(--cr-layer-6);
  --cr-z-index-modal: var(--cr-layer-7);
  --cr-z-index-offcanvas: var(--cr-layer-7);
}

:where(html) {
  --cr-surface-1: var(--cr-color-neutral-bg-0);
  --cr-surface-2: var(--cr-color-neutral-bg-1);
  --cr-surface-3: var(--cr-color-neutral-bg-0);
  --cr-text-1: var(--cr-color-neutral-text);
  --cr-text-2: var(--cr-color-neutral-text-subtle);
  --cr-text-disabled: var(--cr-color-neutral-disabled);
  --cr-text-contrast: var(--cr-color-neutral-text-invert);
}

.flow > * + *, .stats__item > * + *, details:not(.details) > * + *, blockquote > * + * {
  margin-block-start: var(--cr-flow-space, 1em);
}

.visually-hidden, .skip-link:not(:focus), .fab-label,
.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  block-size: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  inline-size: 1px;
  white-space: nowrap;
}

.hidden {
  display: none !important;
}

@media (max-width: 15.937em) {
  .xxs\:hidden-below {
    display: none !important;
  }
}
@media (max-width: 31.937em) {
  .xs\:hidden-below {
    display: none !important;
  }
}
@media (max-width: 47.937em) {
  .sm\:hidden-below {
    display: none !important;
  }
}
@media (max-width: 63.937em) {
  .md\:hidden-below {
    display: none !important;
  }
}
@media (max-width: 79.937em) {
  .lg\:hidden-below {
    display: none !important;
  }
}
@media (max-width: 95.937em) {
  .xl\:hidden-below {
    display: none !important;
  }
}
@media (max-width: 111.937em) {
  .xxl\:hidden-below {
    display: none !important;
  }
}
@media (min-width: 16em) {
  .xxs\:hidden {
    display: none !important;
  }
}
@media (min-width: 32em) {
  .xs\:hidden {
    display: none !important;
  }
}
@media (min-width: 48em) {
  .sm\:hidden {
    display: none !important;
  }
}
@media (min-width: 64em) {
  .md\:hidden {
    display: none !important;
  }
}
@media (min-width: 80em) {
  .lg\:hidden {
    display: none !important;
  }
}
@media (min-width: 96em) {
  .xl\:hidden {
    display: none !important;
  }
}
@media (min-width: 112em) {
  .xxl\:hidden {
    display: none !important;
  }
}
.button,
.button[type=file]::file-selector-button {
  --cr-button-padding-inline: var(--cr-size-3);
  --cr-button-padding-block: var(--cr-size-2);
  --cr-button-border: var(--cr-color-neutral-border-2);
  --cr-button-text: var(--cr-color-neutral-text);
  --cr-button-shadow: none;
  --cr-button-font-size: var(--cr-font-body-regular-size);
  font: var(--cr-font-family-sans);
  letter-spacing: inherit;
  line-height: var(--cr-font-body-regular-line-height);
  min-block-size: var(--cr-form-control-base);
  border-radius: var(--cr-border-radius-button);
}
.button:not(:first-child):not(:last-child),
.button[type=file]::file-selector-button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.button:first-child,
.button[type=file]::file-selector-button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button:last-child,
.button[type=file]::file-selector-button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .button,
  .button[type=file]::file-selector-button {
    --cr-transition: var(--cr-transition-motion-ok);
  }
}
.button,
.button[type=file]::file-selector-button {
  touch-action: manipulation;
  font-size: var(--cr-button-font-size);
  background: var(--cr-color-neutral-bg-0);
  color: var(--cr-button-text);
  border: var(--cr-border-size-base) var(--cr-border-style-base) var(--cr-button-border);
  box-shadow: none;
  transition: var(--cr-transition);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1ch;
  text-decoration: none;
  padding-block: var(--cr-button-padding-block);
  padding-inline: var(--cr-button-padding-inline);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.button:hover,
.button[type=file]::file-selector-button:hover {
  background: var(--cr-color-neutral-bg-1);
}

a.button {
  cursor: pointer;
}

:where(button.button, input.button):where(:not(:active)):focus-visible {
  outline-offset: var(--cr-border-size-med);
  z-index: 1;
}

.button:active,
button.active {
  background: var(--cr-color-neutral-bg-0);
}

.button:is([disabled], :disabled, .disabled) {
  box-shadow: none;
  background: var(--cr-color-neutral-bg-1);
  color: var(--cr-color-neutral-disabled);
  cursor: not-allowed;
}

.button[type=submit] {
  --cr-button-text: var(--cr-color-informative);
}

.button[type=file] {
  display: block;
  inline-size: 100%;
  max-inline-size: max-content;
  min-inline-size: var(--cr-form-file-min-width);
  background-color: var(--cr-color-neutral-border-1);
  padding: 0;
}
.button[type=file]:is([readonly], .readonly) {
  border-color: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  resize: none;
  line-height: var(--cr-form-control-sm);
  pointer-events: none;
}
.button[type=file]:is([readonly], .readonly):hover {
  background-color: unset;
}
.button[type=file]:is([readonly], .readonly)::file-selector-button {
  display: none;
}

.button[type=button],
.button[type=file]::file-selector-button {
  appearance: none;
}

:where(.button[type=file])::file-selector-button {
  margin-inline-end: var(--cr-button-padding-inline);
}

.button[data-type=primary] {
  --cr-button-border: var(--cr-color-primary);
  --cr-color-highlight: var(--cr-color-highlight-primary);
  --cr-color-focus-ring: var(--cr-color-primary);
  background-color: var(--cr-color-primary);
  color: var(--cr-color-neutral-text-invert);
}
.button[data-type=primary]:hover {
  background-color: var(--cr-color-primary-hover);
  border-color: var(--cr-color-primary-hover);
}
.button[data-type=primary]:active, .button[data-type=primary].active {
  background-color: var(--cr-color-primary);
  border-color: var(--cr-color-primary);
}
.button[data-type=primary].button:is([disabled], :disabled, .disabled) {
  box-shadow: none;
  background: var(--cr-color-primary-bg-2);
  color: var(--cr-color-neutral-text-invert);
  border-color: var(--cr-color-primary-bg-2);
  cursor: not-allowed;
}

:where(.button:is([data-type=primary])):focus-visible {
  outline-color: var(--cr-color-focus-ring);
}

.button[data-type=secondary] {
  --cr-button-border: var(--cr-color-neutral-bg-2);
  --cr-color-highlight: var(--cr-color-highlight-primary);
  background-color: var(--cr-color-neutral-bg-2);
}
.button[data-type=secondary]:hover {
  background-color: var(--cr-color-neutral-bg-1);
  border-color: var(--cr-color-neutral-bg-1);
}
.button[data-type=secondary]:active, .button[data-type=secondary].active {
  background-color: var(--cr-color-neutral-bg-2);
  border-color: var(--cr-color-neutral-bg-2);
}
.button[data-type=secondary].button:is([disabled], :disabled, .disabled) {
  box-shadow: none;
  background: var(--cr-color-neutral-bg-1);
  color: var(--cr-color-neutral-disabled);
  border-color: var(--cr-color-neutral-bg-1);
  cursor: not-allowed;
}

:where(.button:is([data-type=notice])):focus-visible {
  outline-color: var(--cr-color-warning);
}

.button[data-type=notice] {
  --cr-button-border: var(--cr-color-warning);
  color: var(--cr-color-neutral-text-gray-static);
  background-color: var(--cr-color-warning);
}
.button[data-type=notice]:hover {
  background-color: var(--cr-color-warning-hover);
  border-color: var(--cr-color-warning-hover);
}
.button[data-type=notice]:active, .button[data-type=notice].active {
  background-color: var(--cr-color-warning);
  border-color: var(--cr-color-warning);
}
.button[data-type=notice].button:is([disabled], :disabled, .disabled) {
  box-shadow: none;
  background: var(--cr-color-warning-bg-2);
  color: var(--cr-color-neutral-text-invert);
  border-color: var(--cr-color-warning-bg-2);
  cursor: not-allowed;
}

:where(.button:is([data-type=secondary])):focus-visible {
  outline-color: var(--cr-color-focus-ring);
}

.button[data-type=invert],
.button[data-type=contrast] {
  --cr-button-border: var(--cr-color-neutral-text);
  background-color: var(--cr-color-neutral-text);
  color: var(--cr-color-neutral-text-invert);
}
.button[data-type=invert]:hover,
.button[data-type=contrast]:hover {
  opacity: 0.9;
}
.button[data-type=invert]:hover:active,
.button[data-type=contrast]:hover:active {
  opacity: 1;
}

.button[data-type=clear] {
  --cr-button-border: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 var(--cr-highlight-size) var(--cr-color-highlight);
}
.button[data-type=clear]:hover {
  background: var(--cr-color-neutral-bg-2);
}
.button[data-type=clear]:active, .button[data-type=clear].active {
  background: var(--cr-color-neutral-bg-1);
}
.button[data-type=clear].button:is([disabled], :disabled, .disabled) {
  background-color: transparent;
}

.button[data-type=link] {
  --cr-button-border: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 var(--cr-highlight-size) var(--cr-color-highlight);
  color: var(--cr-color-informative);
  text-decoration-skip-ink: auto;
  text-decoration: none;
  text-underline-offset: 0.25em;
}
.button[data-type=link]:hover {
  text-decoration: underline;
}

.button:is([data-type=clear], [data-type=link]):where(:active, .active) {
  background-color: var(--cr-color-neutral-bg-0);
}

.button[data-type=icon] {
  --cr-button-padding-inline: .75ch;
  aspect-ratio: 1;
}

.button:is([data-type=negative], [type=reset]) {
  --cr-button-border: var(--cr-color-danger-border);
  --cr-color-focus-ring: var(--cr-color-danger-border);
  --cr-button-text: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-danger);
  border-color: var(--cr-color-danger);
}
.button:is([data-type=negative], [type=reset]):hover {
  background-color: var(--cr-color-danger-hover);
  border-color: var(--cr-color-danger-hover);
}
.button:is([data-type=negative], [type=reset]):active, .button:is([data-type=negative], [type=reset]).active {
  background-color: var(--cr-color-danger);
  border-color: var(--cr-color-danger);
}
.button:is([data-type=negative], [type=reset]):disabled, .button:is([data-type=negative], [type=reset]).disabled {
  background-color: var(--cr-color-danger-bg-2);
  border-color: var(--cr-color-danger-bg-2);
  color: var(--cr-color-neutral-text-invert);
}

:where(.button:is([data-type=negative], [type=reset])):focus-visible {
  outline-color: var(--cr-color-danger-border);
}

.button:is([data-type=positive]) {
  --cr-button-border: var(--cr-color-bg-positive-solid);
  --cr-color-highlight: var(--cr-color-highlight-positive);
  --cr-color-focus-ring: var(--cr-color-success-border);
  background-color: var(--cr-color-bg-positive-solid);
  color: var(--cr-color-neutral-text-white-static);
}

:where(.button:is([data-type=positive])):focus-visible {
  outline-color: currentColor;
}

.button[data-type=fab] {
  position: relative;
  padding: 1em;
  flex: none;
  border-radius: var(--cr-border-radius-lg);
}
.button[data-type=fab]:not([data-icon-only]) {
  padding: 1em 1.5em;
}

@media (min-width: 64em) {
  .button[data-type=fab]:not([data-icon-only]) .fab-label {
    block-size: auto;
    position: initial;
    inline-size: auto;
  }
}

.button[data-type=fab][data-docked] {
  position: fixed;
  inset-block-end: var(--cr-size-base);
  inset-inline-end: var(--cr-size-base);
  z-index: var(--cr-z-index-fab);
}

.button[data-type=tag] {
  font-size: 0.8em;
  padding: 0.25em 0em;
  min-block-size: var(--cr-size-5);
  --cr-button-border: transparent;
  --cr-color-focus-ring: var(--cr-color-brand-accent);
  background-color: transparent;
  box-shadow: 0 0 0 var(--cr-highlight-size) var(--cr-color-highlight);
  color: var(--cr-color-informative);
  text-decoration-skip-ink: auto;
  text-decoration: none;
  text-underline-offset: 0.25em;
}
.button[data-type=tag]:hover {
  text-decoration: underline;
}

.button[data-display=block] {
  display: block;
  inline-size: 100%;
  text-align: center;
}

.button[data-size=sm] {
  --cr-button-padding-block: var(--cr-size-1);
  min-block-size: var(--cr-form-control-sm);
}

.button[data-size=lg] {
  --cr-button-padding-block: var(--cr-size-2);
  min-block-size: var(--cr-form-control-lg);
}

.button > :where(svg, [data-icon]) {
  block-size: var(--cr-button-icon-size);
  inline-size: var(--cr-button-icon-size);
  filter: drop-shadow(var(--cr-button-shadow));
  flex-shrink: 0;
}

[data-type=inline] .button[type=file] {
  display: inline-block;
  inline-size: auto;
}

[data-size=sm] .button[type=file],
[data-size=sm] .button[type=file]::file-selector-button {
  --cr-button-font-size: .8rem;
  min-block-size: var(--cr-form-control-sm);
}

[data-size=lg] .button[type=file],
[data-size=lg] .button[type=file]::file-selector-button {
  --cr-button-font-size: 1.25rem;
  min-block-size: var(--cr-form-control-lg);
}

[x-cloak] {
  display: none !important;
}

body {
  color-scheme: light dark;
  font-family: var(--cr-font-family-sans);
  font-size: var(--cr-font-size-1);
  font-weight: var(--cr-font-weight-400);
  line-height: var(--cr-font-lineheight-3);
  color: var(--cr-color-neutral-text);
  background-color: var(--cr-color-neutral-bg-0);
}

main {
  flex: auto;
}

main:focus {
  outline: none;
}

ul:not([class]),
ol:not([class]) {
  list-style: none;
}

ol:not([class]) li,
ul:not([class]) li {
  position: relative;
}

ul.bullet-separated {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.bullet-separated > *::after {
  font-family: var(--cr-font-body-regular-family);
  font-size: var(--cr-font-body-regular-size);
  font-weight: var(--cr-font-body-regular-weight);
  line-height: var(--cr-font-body-regular-line-height);
  content: "•";
  color: var(--cr-color-neutral-bg-1);
  margin-inline: var(--cr-gap);
}
ul.bullet-separated > :last-child::after {
  content: "";
  padding-inline: 0;
}

ul:not([class]) {
  list-style: none;
  padding-inline-start: var(--cr-size-fluid-base);
}
ul:not([class]) > li::before {
  content: "";
  display: block;
  position: absolute;
  inset: 1ex 0 0 0;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
}
ul:not([class]) > li {
  padding-inline-start: 2ch;
}

ul.list-pipes {
  display: flex;
  gap: 1rem;
  padding: 0;
}
ul.list-pipes li {
  position: relative;
  list-style: none;
  padding-inline: 1rem;
}
ul.list-pipes li::after {
  content: "|";
  color: var(--cr-color-stroke);
  position: absolute;
  top: 20%;
  right: -1rem;
}
ul.list-pipes li:last-child::after {
  content: "";
}

ol:not([class]) {
  counter-reset: ol-list;
  padding-inline-start: var(--cr-size-narrow);
}
ol:not([class]) > li::before {
  content: counter(ol-list);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  inline-size: var(--cr-icon-size-base);
  block-size: var(--cr-icon-size-base);
  position: absolute;
  inset: 0 0 0 0;
  border-radius: 50%;
  font-size: var(--cr-font-size-0);
  background: var(--cr-color-accent);
  color: var(--cr-color-accent);
}
ol:not([class]) > li {
  counter-increment: ol-list;
  padding-inline-start: var(--cr-size-fluid-base);
}

dt {
  font-weight: var(--cr-font-weight-700);
}

dt ~ dd {
  margin-inline-start: 2ch;
}

dd + dt {
  margin-block-start: var(--cr-size-narrow);
}

blockquote {
  font-size: var(--cr-font-size-1);
  color: var(--cr-color-neutral-text-subtle);
}

blockquote,
blockquote > * {
  margin-inline: auto;
  padding-inline: var(--cr-size-fluid-base);
}

cite::before {
  content: "-";
  margin-inline-end: var(--cr-size-narrow);
}

address {
  font-style: normal;
  color: var(--cr-color-neutral-text-subtle);
}

caption,
figcaption {
  margin-inline-start: auto;
  margin-inline-end: auto;
  font-style: italic;
  text-align: center;
  margin-block-start: var(--cr-size-base);
}
caption code,
figcaption code {
  white-space: nowrap;
}

hr {
  border: none;
  border-block-start: var(--cr-border-stroke);
  max-inline-size: var(--cr-width-lg);
  margin-inline: 0;
  text-align: center;
}

hr,
hr + * {
  --cr-flow-space: var(--cr-hr-spacing);
}

code,
kbd,
samp {
  padding: 0.125em 0.25em;
  background: var(--cr-color-neutral-bg-0);
  font-size: var(--cr-font-size-0);
  hyphens: none;
  tab-size: 2;
  text-align: left;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-family: var(--cr-font-family-mono);
}

pre > code {
  display: block;
  padding: var(--cr-size-base);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code,
.unstyled-code code {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: inherit;
  font-style: inherit;
  margin: 0;
  padding: 0;
  white-space: normal;
  overflow-wrap: break-word;
}

sub,
sup {
  position: relative;
  font-size: var(--cr-font-size-0) !important;
  vertical-align: baseline;
  line-height: 0;
}

sub {
  inset-block-end: -1ex;
}

sup {
  inset-block-start: -1.5ex;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
  inline-size: 100%;
}

.fieldset-item {
  font-size: var(--cr-font-size-1, 1rem);
}
.fieldset-item small {
  color: var(--cr-color-neutral-text-subtle);
}
.fieldset-item.is-negative :not(.combo-box__placeholder, .combo-box__value, .combo-box__remove-icon, .combo-box__overlay *, option, input, select, textarea, label, label small, .label, .password-toggle__label, .password-toggle__label *, .date-picker *, .date-picker__field-button *, .date-picker_field-button), .fieldset-item[data-type=negative] :not(.combo-box__placeholder, .combo-box__value, .combo-box__remove-icon, .combo-box__overlay *, option, input, select, textarea, label, label small, .label, .password-toggle__label, .password-toggle__label *, .date-picker *, .date-picker__field-button *, .date-picker_field-button) {
  color: var(--cr-color-danger);
}
.fieldset-item.is-negative input:not([type]),
.fieldset-item.is-negative input[type=text],
.fieldset-item.is-negative input[type=email],
.fieldset-item.is-negative input[type=password],
.fieldset-item.is-negative input[type=tel],
.fieldset-item.is-negative input[type=search],
.fieldset-item.is-negative input[type=number],
.fieldset-item.is-negative input[type=date],
.fieldset-item.is-negative input[type=time],
.fieldset-item.is-negative input[type=datetime],
.fieldset-item.is-negative input[type=datetime-local],
.fieldset-item.is-negative input[type=month],
.fieldset-item.is-negative input[type=week],
.fieldset-item.is-negative input[type=url],
.fieldset-item.is-negative select,
.fieldset-item.is-negative textarea,
.fieldset-item.is-negative .combo-box__field, .fieldset-item[data-type=negative] input:not([type]),
.fieldset-item[data-type=negative] input[type=text],
.fieldset-item[data-type=negative] input[type=email],
.fieldset-item[data-type=negative] input[type=password],
.fieldset-item[data-type=negative] input[type=tel],
.fieldset-item[data-type=negative] input[type=search],
.fieldset-item[data-type=negative] input[type=number],
.fieldset-item[data-type=negative] input[type=date],
.fieldset-item[data-type=negative] input[type=time],
.fieldset-item[data-type=negative] input[type=datetime],
.fieldset-item[data-type=negative] input[type=datetime-local],
.fieldset-item[data-type=negative] input[type=month],
.fieldset-item[data-type=negative] input[type=week],
.fieldset-item[data-type=negative] input[type=url],
.fieldset-item[data-type=negative] select,
.fieldset-item[data-type=negative] textarea,
.fieldset-item[data-type=negative] .combo-box__field {
  border-color: var(--cr-color-danger);
  animation: var(--cr-animation-shake-x);
}
.fieldset-item.is-negative input:not([type]):focus-visible,
.fieldset-item.is-negative input[type=text]:focus-visible,
.fieldset-item.is-negative input[type=email]:focus-visible,
.fieldset-item.is-negative input[type=password]:focus-visible,
.fieldset-item.is-negative input[type=tel]:focus-visible,
.fieldset-item.is-negative input[type=search]:focus-visible,
.fieldset-item.is-negative input[type=number]:focus-visible,
.fieldset-item.is-negative input[type=date]:focus-visible,
.fieldset-item.is-negative input[type=time]:focus-visible,
.fieldset-item.is-negative input[type=datetime]:focus-visible,
.fieldset-item.is-negative input[type=datetime-local]:focus-visible,
.fieldset-item.is-negative input[type=month]:focus-visible,
.fieldset-item.is-negative input[type=week]:focus-visible,
.fieldset-item.is-negative input[type=url]:focus-visible,
.fieldset-item.is-negative select:focus-visible,
.fieldset-item.is-negative textarea:focus-visible,
.fieldset-item.is-negative .combo-box__field:focus-visible, .fieldset-item[data-type=negative] input:not([type]):focus-visible,
.fieldset-item[data-type=negative] input[type=text]:focus-visible,
.fieldset-item[data-type=negative] input[type=email]:focus-visible,
.fieldset-item[data-type=negative] input[type=password]:focus-visible,
.fieldset-item[data-type=negative] input[type=tel]:focus-visible,
.fieldset-item[data-type=negative] input[type=search]:focus-visible,
.fieldset-item[data-type=negative] input[type=number]:focus-visible,
.fieldset-item[data-type=negative] input[type=date]:focus-visible,
.fieldset-item[data-type=negative] input[type=time]:focus-visible,
.fieldset-item[data-type=negative] input[type=datetime]:focus-visible,
.fieldset-item[data-type=negative] input[type=datetime-local]:focus-visible,
.fieldset-item[data-type=negative] input[type=month]:focus-visible,
.fieldset-item[data-type=negative] input[type=week]:focus-visible,
.fieldset-item[data-type=negative] input[type=url]:focus-visible,
.fieldset-item[data-type=negative] select:focus-visible,
.fieldset-item[data-type=negative] textarea:focus-visible,
.fieldset-item[data-type=negative] .combo-box__field:focus-visible {
  outline-color: var(--cr-color-danger);
}
.fieldset-item.is-negative .has-error,
.fieldset-item.is-negative small:not(label small), .fieldset-item[data-type=negative] .has-error,
.fieldset-item[data-type=negative] small:not(label small) {
  padding-inline-start: var(--cr-size-wide);
  background-image: var(--cr-bg-negative);
  background-size: var(--cr-size-base);
  background-position: left 0 top 50%;
  background-repeat: no-repeat;
  margin-block-start: 0.25rem;
}
.fieldset-item.is-notice :not(.combo-box__placeholder, .combo-box__value, .combo-box__remove-icon, .combo-box__overlay *, legend, option, input, select, textarea, label, label small, .label, .password-toggle__label, .password-toggle__label *, .date-picker *, .date-picker__field-button *), .fieldset-item[data-type=notice] :not(.combo-box__placeholder, .combo-box__value, .combo-box__remove-icon, .combo-box__overlay *, legend, option, input, select, textarea, label, label small, .label, .password-toggle__label, .password-toggle__label *, .date-picker *, .date-picker__field-button *) {
  color: var(--cr-color-warning);
}
.fieldset-item.is-notice input:not([type]),
.fieldset-item.is-notice input[type=text],
.fieldset-item.is-notice input[type=email],
.fieldset-item.is-notice input[type=password],
.fieldset-item.is-notice input[type=tel],
.fieldset-item.is-notice input[type=search],
.fieldset-item.is-notice input[type=number],
.fieldset-item.is-notice input[type=date],
.fieldset-item.is-notice input[type=time],
.fieldset-item.is-notice input[type=datetime],
.fieldset-item.is-notice input[type=datetime-local],
.fieldset-item.is-notice input[type=month],
.fieldset-item.is-notice input[type=week],
.fieldset-item.is-notice input[type=url],
.fieldset-item.is-notice select,
.fieldset-item.is-notice textarea,
.fieldset-item.is-notice .combo-box__field, .fieldset-item[data-type=notice] input:not([type]),
.fieldset-item[data-type=notice] input[type=text],
.fieldset-item[data-type=notice] input[type=email],
.fieldset-item[data-type=notice] input[type=password],
.fieldset-item[data-type=notice] input[type=tel],
.fieldset-item[data-type=notice] input[type=search],
.fieldset-item[data-type=notice] input[type=number],
.fieldset-item[data-type=notice] input[type=date],
.fieldset-item[data-type=notice] input[type=time],
.fieldset-item[data-type=notice] input[type=datetime],
.fieldset-item[data-type=notice] input[type=datetime-local],
.fieldset-item[data-type=notice] input[type=month],
.fieldset-item[data-type=notice] input[type=week],
.fieldset-item[data-type=notice] input[type=url],
.fieldset-item[data-type=notice] select,
.fieldset-item[data-type=notice] textarea,
.fieldset-item[data-type=notice] .combo-box__field {
  border-color: var(--cr-color-warning);
}
.fieldset-item.is-notice input:not([type]):focus-visible,
.fieldset-item.is-notice input[type=text]:focus-visible,
.fieldset-item.is-notice input[type=email]:focus-visible,
.fieldset-item.is-notice input[type=password]:focus-visible,
.fieldset-item.is-notice input[type=tel]:focus-visible,
.fieldset-item.is-notice input[type=search]:focus-visible,
.fieldset-item.is-notice input[type=number]:focus-visible,
.fieldset-item.is-notice input[type=date]:focus-visible,
.fieldset-item.is-notice input[type=time]:focus-visible,
.fieldset-item.is-notice input[type=datetime]:focus-visible,
.fieldset-item.is-notice input[type=datetime-local]:focus-visible,
.fieldset-item.is-notice input[type=month]:focus-visible,
.fieldset-item.is-notice input[type=week]:focus-visible,
.fieldset-item.is-notice input[type=url]:focus-visible,
.fieldset-item.is-notice select:focus-visible,
.fieldset-item.is-notice textarea:focus-visible,
.fieldset-item.is-notice .combo-box__field:focus-visible, .fieldset-item[data-type=notice] input:not([type]):focus-visible,
.fieldset-item[data-type=notice] input[type=text]:focus-visible,
.fieldset-item[data-type=notice] input[type=email]:focus-visible,
.fieldset-item[data-type=notice] input[type=password]:focus-visible,
.fieldset-item[data-type=notice] input[type=tel]:focus-visible,
.fieldset-item[data-type=notice] input[type=search]:focus-visible,
.fieldset-item[data-type=notice] input[type=number]:focus-visible,
.fieldset-item[data-type=notice] input[type=date]:focus-visible,
.fieldset-item[data-type=notice] input[type=time]:focus-visible,
.fieldset-item[data-type=notice] input[type=datetime]:focus-visible,
.fieldset-item[data-type=notice] input[type=datetime-local]:focus-visible,
.fieldset-item[data-type=notice] input[type=month]:focus-visible,
.fieldset-item[data-type=notice] input[type=week]:focus-visible,
.fieldset-item[data-type=notice] input[type=url]:focus-visible,
.fieldset-item[data-type=notice] select:focus-visible,
.fieldset-item[data-type=notice] textarea:focus-visible,
.fieldset-item[data-type=notice] .combo-box__field:focus-visible {
  outline-color: var(--cr-color-warning);
}
.fieldset-item.is-notice .has-notice,
.fieldset-item.is-notice small:not(label small), .fieldset-item[data-type=notice] .has-notice,
.fieldset-item[data-type=notice] small:not(label small) {
  padding-inline-start: var(--cr-size-wide);
  background-image: var(--cr-bg-notice);
  background-size: var(--cr-size-base);
  background-position: left 0 top 50%;
  background-repeat: no-repeat;
  margin-block-start: 0.25rem;
}
.fieldset-item.is-positive :not(.combo-box__placeholder, .combo-box__value, .combo-box__remove-icon, .combo-box__overlay *, legend, option, input, select, textarea, label, label small, .label, .password-toggle__label, .password-toggle__label *, .date-picker *, .date-picker__field-button *), .fieldset-item[data-type=positive] :not(.combo-box__placeholder, .combo-box__value, .combo-box__remove-icon, .combo-box__overlay *, legend, option, input, select, textarea, label, label small, .label, .password-toggle__label, .password-toggle__label *, .date-picker *, .date-picker__field-button *) {
  color: var(--cr-color-success);
}
.fieldset-item.is-positive input:not([type]),
.fieldset-item.is-positive input[type=text],
.fieldset-item.is-positive input[type=email],
.fieldset-item.is-positive input[type=password],
.fieldset-item.is-positive input[type=tel],
.fieldset-item.is-positive input[type=search],
.fieldset-item.is-positive input[type=number],
.fieldset-item.is-positive input[type=date],
.fieldset-item.is-positive input[type=time],
.fieldset-item.is-positive input[type=datetime],
.fieldset-item.is-positive input[type=datetime-local],
.fieldset-item.is-positive input[type=month],
.fieldset-item.is-positive input[type=week],
.fieldset-item.is-positive input[type=url],
.fieldset-item.is-positive select,
.fieldset-item.is-positive textarea,
.fieldset-item.is-positive .combo-box__field, .fieldset-item[data-type=positive] input:not([type]),
.fieldset-item[data-type=positive] input[type=text],
.fieldset-item[data-type=positive] input[type=email],
.fieldset-item[data-type=positive] input[type=password],
.fieldset-item[data-type=positive] input[type=tel],
.fieldset-item[data-type=positive] input[type=search],
.fieldset-item[data-type=positive] input[type=number],
.fieldset-item[data-type=positive] input[type=date],
.fieldset-item[data-type=positive] input[type=time],
.fieldset-item[data-type=positive] input[type=datetime],
.fieldset-item[data-type=positive] input[type=datetime-local],
.fieldset-item[data-type=positive] input[type=month],
.fieldset-item[data-type=positive] input[type=week],
.fieldset-item[data-type=positive] input[type=url],
.fieldset-item[data-type=positive] select,
.fieldset-item[data-type=positive] textarea,
.fieldset-item[data-type=positive] .combo-box__field {
  border-color: var(--cr-color-success);
}
.fieldset-item.is-positive input:not([type]):focus-visible,
.fieldset-item.is-positive input[type=text]:focus-visible,
.fieldset-item.is-positive input[type=email]:focus-visible,
.fieldset-item.is-positive input[type=password]:focus-visible,
.fieldset-item.is-positive input[type=tel]:focus-visible,
.fieldset-item.is-positive input[type=search]:focus-visible,
.fieldset-item.is-positive input[type=number]:focus-visible,
.fieldset-item.is-positive input[type=date]:focus-visible,
.fieldset-item.is-positive input[type=time]:focus-visible,
.fieldset-item.is-positive input[type=datetime]:focus-visible,
.fieldset-item.is-positive input[type=datetime-local]:focus-visible,
.fieldset-item.is-positive input[type=month]:focus-visible,
.fieldset-item.is-positive input[type=week]:focus-visible,
.fieldset-item.is-positive input[type=url]:focus-visible,
.fieldset-item.is-positive select:focus-visible,
.fieldset-item.is-positive textarea:focus-visible,
.fieldset-item.is-positive .combo-box__field:focus-visible, .fieldset-item[data-type=positive] input:not([type]):focus-visible,
.fieldset-item[data-type=positive] input[type=text]:focus-visible,
.fieldset-item[data-type=positive] input[type=email]:focus-visible,
.fieldset-item[data-type=positive] input[type=password]:focus-visible,
.fieldset-item[data-type=positive] input[type=tel]:focus-visible,
.fieldset-item[data-type=positive] input[type=search]:focus-visible,
.fieldset-item[data-type=positive] input[type=number]:focus-visible,
.fieldset-item[data-type=positive] input[type=date]:focus-visible,
.fieldset-item[data-type=positive] input[type=time]:focus-visible,
.fieldset-item[data-type=positive] input[type=datetime]:focus-visible,
.fieldset-item[data-type=positive] input[type=datetime-local]:focus-visible,
.fieldset-item[data-type=positive] input[type=month]:focus-visible,
.fieldset-item[data-type=positive] input[type=week]:focus-visible,
.fieldset-item[data-type=positive] input[type=url]:focus-visible,
.fieldset-item[data-type=positive] select:focus-visible,
.fieldset-item[data-type=positive] textarea:focus-visible,
.fieldset-item[data-type=positive] .combo-box__field:focus-visible {
  outline-color: var(--cr-color-success);
}
.fieldset-item.is-positive .has-positive,
.fieldset-item.is-positive small:not(label small), .fieldset-item[data-type=positive] .has-positive,
.fieldset-item[data-type=positive] small:not(label small) {
  padding-inline-start: var(--cr-size-wide);
  background-image: var(--cr-bg-positive);
  background-size: var(--cr-size-base);
  background-position: left 0 top 50%;
  background-repeat: no-repeat;
  margin-block-start: 0.25rem;
}
.fieldset-item.is-informative :not(.combo-box__placeholder, .combo-box__value, .combo-box__remove-icon, legend, .combo-box__overlay *, option, input, select, textarea, label, label small, .label, .password-toggle__label, .password-toggle__label *, .date-picker *, .date-picker__field-button *), .fieldset-item[data-type=informative] :not(.combo-box__placeholder, .combo-box__value, .combo-box__remove-icon, legend, .combo-box__overlay *, option, input, select, textarea, label, label small, .label, .password-toggle__label, .password-toggle__label *, .date-picker *, .date-picker__field-button *) {
  color: var(--cr-color-informative);
}
.fieldset-item.is-informative input:not([type]),
.fieldset-item.is-informative input[type=text],
.fieldset-item.is-informative input[type=email],
.fieldset-item.is-informative input[type=password],
.fieldset-item.is-informative input[type=tel],
.fieldset-item.is-informative input[type=search],
.fieldset-item.is-informative input[type=number],
.fieldset-item.is-informative input[type=date],
.fieldset-item.is-informative input[type=time],
.fieldset-item.is-informative input[type=datetime],
.fieldset-item.is-informative input[type=datetime-local],
.fieldset-item.is-informative input[type=month],
.fieldset-item.is-informative input[type=week],
.fieldset-item.is-informative input[type=url],
.fieldset-item.is-informative select,
.fieldset-item.is-informative textarea,
.fieldset-item.is-informative .combo-box__field, .fieldset-item[data-type=informative] input:not([type]),
.fieldset-item[data-type=informative] input[type=text],
.fieldset-item[data-type=informative] input[type=email],
.fieldset-item[data-type=informative] input[type=password],
.fieldset-item[data-type=informative] input[type=tel],
.fieldset-item[data-type=informative] input[type=search],
.fieldset-item[data-type=informative] input[type=number],
.fieldset-item[data-type=informative] input[type=date],
.fieldset-item[data-type=informative] input[type=time],
.fieldset-item[data-type=informative] input[type=datetime],
.fieldset-item[data-type=informative] input[type=datetime-local],
.fieldset-item[data-type=informative] input[type=month],
.fieldset-item[data-type=informative] input[type=week],
.fieldset-item[data-type=informative] input[type=url],
.fieldset-item[data-type=informative] select,
.fieldset-item[data-type=informative] textarea,
.fieldset-item[data-type=informative] .combo-box__field {
  border-color: var(--cr-color-informative);
}
.fieldset-item.is-informative input:not([type]):focus-visible,
.fieldset-item.is-informative input[type=text]:focus-visible,
.fieldset-item.is-informative input[type=email]:focus-visible,
.fieldset-item.is-informative input[type=password]:focus-visible,
.fieldset-item.is-informative input[type=tel]:focus-visible,
.fieldset-item.is-informative input[type=search]:focus-visible,
.fieldset-item.is-informative input[type=number]:focus-visible,
.fieldset-item.is-informative input[type=date]:focus-visible,
.fieldset-item.is-informative input[type=time]:focus-visible,
.fieldset-item.is-informative input[type=datetime]:focus-visible,
.fieldset-item.is-informative input[type=datetime-local]:focus-visible,
.fieldset-item.is-informative input[type=month]:focus-visible,
.fieldset-item.is-informative input[type=week]:focus-visible,
.fieldset-item.is-informative input[type=url]:focus-visible,
.fieldset-item.is-informative select:focus-visible,
.fieldset-item.is-informative textarea:focus-visible,
.fieldset-item.is-informative .combo-box__field:focus-visible, .fieldset-item[data-type=informative] input:not([type]):focus-visible,
.fieldset-item[data-type=informative] input[type=text]:focus-visible,
.fieldset-item[data-type=informative] input[type=email]:focus-visible,
.fieldset-item[data-type=informative] input[type=password]:focus-visible,
.fieldset-item[data-type=informative] input[type=tel]:focus-visible,
.fieldset-item[data-type=informative] input[type=search]:focus-visible,
.fieldset-item[data-type=informative] input[type=number]:focus-visible,
.fieldset-item[data-type=informative] input[type=date]:focus-visible,
.fieldset-item[data-type=informative] input[type=time]:focus-visible,
.fieldset-item[data-type=informative] input[type=datetime]:focus-visible,
.fieldset-item[data-type=informative] input[type=datetime-local]:focus-visible,
.fieldset-item[data-type=informative] input[type=month]:focus-visible,
.fieldset-item[data-type=informative] input[type=week]:focus-visible,
.fieldset-item[data-type=informative] input[type=url]:focus-visible,
.fieldset-item[data-type=informative] select:focus-visible,
.fieldset-item[data-type=informative] textarea:focus-visible,
.fieldset-item[data-type=informative] .combo-box__field:focus-visible {
  outline-color: var(--cr-color-informative);
}
.fieldset-item.is-informative .has-informative,
.fieldset-item.is-informative small:not(label small), .fieldset-item[data-type=informative] .has-informative,
.fieldset-item[data-type=informative] small:not(label small) {
  padding-inline-start: var(--cr-size-wide);
  background-image: var(--cr-bg-informative);
  background-size: var(--cr-size-base);
  background-position: left 0 top 50%;
  background-repeat: no-repeat;
  margin-block-start: 0.25rem;
}
.fieldset-item.cluster {
  --cr-flow-space: var(--cr-size-narrow);
  --cr-gap: var(--cr-size-3);
}
.fieldset-item[data-size=sm] {
  --cr-input-font-size: var(--cr-font-size-1);
}
.fieldset-item[data-size=sm] input:not([type]),
.fieldset-item[data-size=sm] input[type=text],
.fieldset-item[data-size=sm] input[type=email],
.fieldset-item[data-size=sm] input[type=password],
.fieldset-item[data-size=sm] input[type=tel],
.fieldset-item[data-size=sm] input[type=search],
.fieldset-item[data-size=sm] input[type=number],
.fieldset-item[data-size=sm] input[type=date],
.fieldset-item[data-size=sm] input[type=time],
.fieldset-item[data-size=sm] input[type=datetime],
.fieldset-item[data-size=sm] input[type=datetime-local],
.fieldset-item[data-size=sm] input[type=month],
.fieldset-item[data-size=sm] input[type=week],
.fieldset-item[data-size=sm] input[type=url],
.fieldset-item[data-size=sm] select,
.fieldset-item[data-size=sm] .combo-box__field {
  min-block-size: var(--cr-form-control-sm);
  block-size: var(--cr-form-control-sm);
}
.fieldset-item[data-size=sm] textarea {
  min-block-size: var(--cr-form-control-sm);
}
.fieldset-item[data-size=sm] input[type=checkbox],
.fieldset-item[data-size=sm] input[type=radio]:not([role=switch]) {
  inline-size: min(1.13em, 18px);
  block-size: min(1.13em, 18px);
}
.fieldset-item[data-size=sm] label {
  font-size: var(--cr-input-font-size);
}
.fieldset-item[data-size=lg] {
  --cr-input-font-size: var(--cr-font-size-2);
}
.fieldset-item[data-size=lg] input:not([type]),
.fieldset-item[data-size=lg] input[type=text],
.fieldset-item[data-size=lg] input[type=email],
.fieldset-item[data-size=lg] input[type=password],
.fieldset-item[data-size=lg] input[type=tel],
.fieldset-item[data-size=lg] input[type=search],
.fieldset-item[data-size=lg] input[type=number],
.fieldset-item[data-size=lg] input[type=date],
.fieldset-item[data-size=lg] input[type=time],
.fieldset-item[data-size=lg] input[type=datetime],
.fieldset-item[data-size=lg] input[type=datetime-local],
.fieldset-item[data-size=lg] input[type=month],
.fieldset-item[data-size=lg] input[type=week],
.fieldset-item[data-size=lg] input[type=url],
.fieldset-item[data-size=lg] select,
.fieldset-item[data-size=lg] textarea,
.fieldset-item[data-size=lg] .combo-box__field {
  min-block-size: var(--cr-form-control-lg);
}
.fieldset-item[data-size=lg] input[type=checkbox],
.fieldset-item[data-size=lg] input[type=radio]:not([role=switch]) {
  inline-size: min(2em, 32px);
  block-size: min(2em, 32px);
}
.fieldset-item[data-size=lg] label {
  font-size: var(--cr-font-size-1);
}
.fieldset-item[data-type=inline] *:not(datalist) {
  display: inline-block;
  inline-size: auto;
}
.fieldset-item[data-type=inline] .combo-box__field {
  block-size: var(--cr-form-control-base);
}
.fieldset-item[data-type=inline] legend, .fieldset-item[data-type=inline] label {
  margin-inline-end: var(--cr-size-base);
}
.fieldset-item[data-type=inline] label {
  vertical-align: top;
  margin-block-start: 0.9rem;
}

fieldset small, .fieldset-item small {
  color: var(--cr-color-neutral-text-subtle);
  display: block;
  line-height: var(--cr-font-lineheight-1);
  margin-block: 0.25rem;
}
fieldset small.is-informative, .fieldset-item small.is-informative {
  padding-inline-start: var(--cr-size-wide);
  background-image: var(--cr-bg-informative);
  background-size: var(--cr-size-base);
  background-position: left 0 top 50%;
  background-repeat: no-repeat;
  color: var(--cr-color-informative);
}
fieldset small.is-positive, .fieldset-item small.is-positive {
  padding-inline-start: var(--cr-size-wide);
  background-image: var(--cr-bg-positive);
  background-size: var(--cr-size-base);
  background-position: left 0 top 50%;
  background-repeat: no-repeat;
  color: var(--cr-color-success);
}
fieldset small.is-notice, .fieldset-item small.is-notice {
  padding-inline-start: var(--cr-size-wide);
  background-image: var(--cr-bg-notice);
  background-size: var(--cr-size-base);
  background-position: left 0 top 50%;
  background-repeat: no-repeat;
  color: var(--cr-color-warning);
}
fieldset small.is-negative, .fieldset-item small.is-negative {
  padding-inline-start: var(--cr-size-wide);
  background-image: var(--cr-bg-negative);
  background-size: var(--cr-size-base);
  background-position: left 0 top 50%;
  background-repeat: no-repeat;
  color: var(--cr-color-danger);
}
fieldset label small, fieldset legend small, .fieldset-item label small, .fieldset-item legend small {
  display: inline;
  margin: 0;
}
fieldset legend, fieldset label, .fieldset-item legend, .fieldset-item label {
  font-size: var(--cr-font-size-1);
  line-height: var(--cr-font-lineheight-1);
  display: block;
  margin-block: 0.25rem;
}

:is(:dir(rtl), [dir=rtl]) .fieldset-item:is(.is-negative, :invalid) .has-error,
:is(:dir(rtl), [dir=rtl]) .fieldset-item:is(.is-negative, :invalid) small {
  background-position: right 0 top 50%;
}

option {
  padding-block: var(--cr-input-padding-block);
}

input:not([type]),
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=search],
input[type=number],
input[type=date],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=month],
input[type=week],
input[type=url],
select,
textarea, .grow-wrap > textarea, .grow-wrap::after,
.combo-box__field {
  display: block;
  inline-size: 100%;
  background-color: var(--cr-color-neutral-bg-0);
  color: var(--cr-color-neutral-text);
  border: 1px solid var(--cr-color-neutral-border-2);
  border-radius: var(--cr-border-radius-base);
  font: inherit;
  font-size: var(--cr-input-font-size, 1rem);
  font-weight: var(--cr-font-weight-400);
  padding: var(--cr-input-padding);
  min-block-size: var(--cr-form-control-base);
  min-inline-size: var(--cr-form-control-min-width);
  transition: all 0.15s ease-in-out;
  text-overflow: ellipsis;
}
input:not([type])[data-size=sm],
input[type=text][data-size=sm],
input[type=email][data-size=sm],
input[type=password][data-size=sm],
input[type=tel][data-size=sm],
input[type=search][data-size=sm],
input[type=number][data-size=sm],
input[type=date][data-size=sm],
input[type=time][data-size=sm],
input[type=datetime][data-size=sm],
input[type=datetime-local][data-size=sm],
input[type=month][data-size=sm],
input[type=week][data-size=sm],
input[type=url][data-size=sm],
select[data-size=sm],
textarea[data-size=sm], .grow-wrap > textarea[data-size=sm], .grow-wrap::after[data-size=sm],
.combo-box__field[data-size=sm] {
  --cr-input-font-size: var(--cr-font-size-0);
  min-block-size: var(--cr-form-control-sm);
}
input:not([type])[data-size=lg],
input[type=text][data-size=lg],
input[type=email][data-size=lg],
input[type=password][data-size=lg],
input[type=tel][data-size=lg],
input[type=search][data-size=lg],
input[type=number][data-size=lg],
input[type=date][data-size=lg],
input[type=time][data-size=lg],
input[type=datetime][data-size=lg],
input[type=datetime-local][data-size=lg],
input[type=month][data-size=lg],
input[type=week][data-size=lg],
input[type=url][data-size=lg],
select[data-size=lg],
textarea[data-size=lg], .grow-wrap > textarea[data-size=lg], .grow-wrap::after[data-size=lg],
.combo-box__field[data-size=lg] {
  --cr-input-font-size: var(--cr-font-size-2);
  min-block-size: var(--cr-form-control-lg);
}
input:not([type]).inline-block,
input[type=text].inline-block,
input[type=email].inline-block,
input[type=password].inline-block,
input[type=tel].inline-block,
input[type=search].inline-block,
input[type=number].inline-block,
input[type=date].inline-block,
input[type=time].inline-block,
input[type=datetime].inline-block,
input[type=datetime-local].inline-block,
input[type=month].inline-block,
input[type=week].inline-block,
input[type=url].inline-block,
select.inline-block,
textarea.inline-block, .grow-wrap > textarea.inline-block, .grow-wrap::after.inline-block,
.combo-box__field.inline-block {
  display: inline-block;
}
input:not([type]):is([disabled], :disabled, .disabled),
input[type=text]:is([disabled], :disabled, .disabled),
input[type=email]:is([disabled], :disabled, .disabled),
input[type=password]:is([disabled], :disabled, .disabled),
input[type=tel]:is([disabled], :disabled, .disabled),
input[type=search]:is([disabled], :disabled, .disabled),
input[type=number]:is([disabled], :disabled, .disabled),
input[type=date]:is([disabled], :disabled, .disabled),
input[type=time]:is([disabled], :disabled, .disabled),
input[type=datetime]:is([disabled], :disabled, .disabled),
input[type=datetime-local]:is([disabled], :disabled, .disabled),
input[type=month]:is([disabled], :disabled, .disabled),
input[type=week]:is([disabled], :disabled, .disabled),
input[type=url]:is([disabled], :disabled, .disabled),
select:is([disabled], :disabled, .disabled),
textarea:is([disabled], :disabled, .disabled), .grow-wrap > textarea:is([disabled], :disabled, .disabled), .grow-wrap::after:is([disabled], :disabled, .disabled),
.combo-box__field:is([disabled], :disabled, .disabled) {
  filter: invert(0.1);
  opacity: 0.7;
  cursor: not-allowed;
}
input:not([type]):is([readonly], .readonly),
input[type=text]:is([readonly], .readonly),
input[type=email]:is([readonly], .readonly),
input[type=password]:is([readonly], .readonly),
input[type=tel]:is([readonly], .readonly),
input[type=search]:is([readonly], .readonly),
input[type=number]:is([readonly], .readonly),
input[type=date]:is([readonly], .readonly),
input[type=time]:is([readonly], .readonly),
input[type=datetime]:is([readonly], .readonly),
input[type=datetime-local]:is([readonly], .readonly),
input[type=month]:is([readonly], .readonly),
input[type=week]:is([readonly], .readonly),
input[type=url]:is([readonly], .readonly),
select:is([readonly], .readonly),
textarea:is([readonly], .readonly), .grow-wrap > textarea:is([readonly], .readonly), .grow-wrap::after:is([readonly], .readonly),
.combo-box__field:is([readonly], .readonly) {
  padding-inline: 0;
  border-color: transparent;
  background-color: transparent;
  resize: none;
  block-size: auto;
}
input:not([type]):is([readonly], .readonly):hover,
input[type=text]:is([readonly], .readonly):hover,
input[type=email]:is([readonly], .readonly):hover,
input[type=password]:is([readonly], .readonly):hover,
input[type=tel]:is([readonly], .readonly):hover,
input[type=search]:is([readonly], .readonly):hover,
input[type=number]:is([readonly], .readonly):hover,
input[type=date]:is([readonly], .readonly):hover,
input[type=time]:is([readonly], .readonly):hover,
input[type=datetime]:is([readonly], .readonly):hover,
input[type=datetime-local]:is([readonly], .readonly):hover,
input[type=month]:is([readonly], .readonly):hover,
input[type=week]:is([readonly], .readonly):hover,
input[type=url]:is([readonly], .readonly):hover,
select:is([readonly], .readonly):hover,
textarea:is([readonly], .readonly):hover, .grow-wrap > textarea:is([readonly], .readonly):hover, .grow-wrap::after:is([readonly], .readonly):hover,
.combo-box__field:is([readonly], .readonly):hover {
  background-color: unset;
}
input:not([type]):is([readonly], .readonly):focus, input:not([type]):is([readonly], .readonly):focus-visible,
input[type=text]:is([readonly], .readonly):focus,
input[type=text]:is([readonly], .readonly):focus-visible,
input[type=email]:is([readonly], .readonly):focus,
input[type=email]:is([readonly], .readonly):focus-visible,
input[type=password]:is([readonly], .readonly):focus,
input[type=password]:is([readonly], .readonly):focus-visible,
input[type=tel]:is([readonly], .readonly):focus,
input[type=tel]:is([readonly], .readonly):focus-visible,
input[type=search]:is([readonly], .readonly):focus,
input[type=search]:is([readonly], .readonly):focus-visible,
input[type=number]:is([readonly], .readonly):focus,
input[type=number]:is([readonly], .readonly):focus-visible,
input[type=date]:is([readonly], .readonly):focus,
input[type=date]:is([readonly], .readonly):focus-visible,
input[type=time]:is([readonly], .readonly):focus,
input[type=time]:is([readonly], .readonly):focus-visible,
input[type=datetime]:is([readonly], .readonly):focus,
input[type=datetime]:is([readonly], .readonly):focus-visible,
input[type=datetime-local]:is([readonly], .readonly):focus,
input[type=datetime-local]:is([readonly], .readonly):focus-visible,
input[type=month]:is([readonly], .readonly):focus,
input[type=month]:is([readonly], .readonly):focus-visible,
input[type=week]:is([readonly], .readonly):focus,
input[type=week]:is([readonly], .readonly):focus-visible,
input[type=url]:is([readonly], .readonly):focus,
input[type=url]:is([readonly], .readonly):focus-visible,
select:is([readonly], .readonly):focus,
select:is([readonly], .readonly):focus-visible,
textarea:is([readonly], .readonly):focus,
textarea:is([readonly], .readonly):focus-visible, .grow-wrap > textarea:is([readonly], .readonly):focus, .grow-wrap > textarea:is([readonly], .readonly):focus-visible, .grow-wrap::after:is([readonly], .readonly):focus, .grow-wrap::after:is([readonly], .readonly):focus-visible,
.combo-box__field:is([readonly], .readonly):focus,
.combo-box__field:is([readonly], .readonly):focus-visible {
  outline: none;
  box-shadow: none;
}

textarea {
  line-height: var(--cr-lineheight-3);
}
textarea:not([rows]) {
  min-block-size: var(--cr-size-8);
}
textarea[data-type=fixed] {
  resize: none;
}

.combo-box__field {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-inline-end: 2.5rem !important;
  text-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 1rem;
}

.combo-box__placeholder {
  color: var(--cr-color-neutral-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-box__remove-icon {
  color: var(--cr-color-neutral-text);
}

.combo-box__value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-box__overlay .option {
  padding: 0.5rem;
  cursor: pointer;
}
.combo-box__overlay .option:hover {
  background-color: var(--cr-color-neutral-bg-2);
}
.combo-box__overlay .option:hover:active {
  background-color: var(--cr-color-neutral-bg-1);
}

.grow-wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}

.grow-wrap::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
}

.grow-wrap > textarea {
  resize: none;
}

.grow-wrap > textarea, .grow-wrap:after {
  grid-area: 1/1/2/2;
  line-height: var(--cr-lineheight-3);
}

:where(input:not([type]),
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=search],
input[type=number],
input[type=date],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=month],
input[type=week],
input[type=url],
select,
textarea),
.combo-box__field {
  max-inline-size: var(--cr-size-field-inline-size-max);
}

[placeholder] {
  text-overflow: ellipsis;
}

[multiple],
input[type=file],
textarea {
  block-size: auto;
}

select, .combo-box__field {
  min-inline-size: var(--cr-form-select-min-width);
  padding-inline-end: calc(var(--cr-button-input-icon-size) + var(--cr-input-padding-inline) * 2);
  appearance: none;
  -webkit-appearance: none;
}
select:not([multiple], [size]), .combo-box__field:not([multiple], [size]) {
  background-image: var(--cr-bg-select);
  background-size: 1em;
  background-position: right 1ch top 50%;
  background-repeat: no-repeat;
}
select[data-size=sm], .combo-box__field[data-size=sm] {
  --cr-input-font-size: var(--cr-font-size-0);
  min-block-size: var(--cr-form-control-sm);
}
select[data-size=lg], .combo-box__field[data-size=lg] {
  --cr-input-font-size: var(--cr-font-size-2);
  min-block-size: var(--cr-form-control-lg);
}
select:is([readonly], .readonly), .combo-box__field:is([readonly], .readonly) {
  padding-inline: 0;
  border-color: transparent;
  background-color: transparent;
  background-image: none;
  resize: none;
  block-size: auto;
  pointer-events: none;
}
select:is([readonly], .readonly):hover, .combo-box__field:is([readonly], .readonly):hover {
  background-color: unset;
}
select[data-type=subtle], .combo-box__field[data-type=subtle] {
  border: none;
  background-color: transparent;
}

select::-ms-expand {
  display: none;
}

select:hover {
  background-color: var(--cr-color-neutral-bg-1);
}

input[list] {
  min-inline-size: var(--cr-form-select-min-width);
}

:is(input[type=checkbox], input[type=radio]):not([role=switch]) {
  position: relative;
  border: none;
  cursor: pointer;
  margin: 0px;
  background-size: cover;
  flex: none;
  transform-style: preserve-3d;
  transition: box-shadow 145ms ease;
  font-size: inherit;
  appearance: none;
  -webkit-appearance: none;
}
:is(input[type=checkbox], input[type=radio]):not([role=switch]):where(:not(:active, .active):hover) {
  box-shadow: 0 0 0 var(--cr-border-size-thick) hsl(var(--cr-shadow-color)/calc(var(--cr-shadow-strength) + 9%));
}
:is(input[type=checkbox], input[type=radio]):not([role=switch]):is([disabled], :disabled, .disabled) {
  filter: invert(0.1);
  box-shadow: none;
  opacity: 0.7;
  cursor: not-allowed;
}
:is(input[type=checkbox], input[type=radio]):not([role=switch]):is([readonly], .readonly) {
  filter: invert(0.1);
  box-shadow: none;
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

input[type=checkbox] {
  inline-size: min(1.75em, 24px);
  block-size: min(1.75em, 24px);
  border-radius: var(--cr-border-size-med);
  background: var(--cr-bg-checkbox);
}
input[type=checkbox]:is(:indeterminate, [aria-checked=mixed]) {
  background: var(--cr-bg-checkbox-indeterminate);
}

input[type=checkbox]:not([role=switch]):checked {
  background: var(--cr-bg-checkbox-checked);
}
@media (prefers-reduced-motion: no-preference) {
  input[type=checkbox]:not([role=switch]):checked {
    animation: var(--cr-animation-scale-up);
    animation-duration: 100ms;
  }
}

input[type=radio] {
  inline-size: min(1.5em, 24px);
  block-size: min(1.5em, 24px);
  border-radius: var(--cr-border-radius-round);
  background: var(--cr-bg-radio);
}

input[type=radio]:checked {
  background: var(--cr-bg-radio-checked);
  background-position: center;
  background-size: cover;
}
@media (prefers-reduced-motion: no-preference) {
  input[type=radio]:checked {
    animation: var(--cr-animation-scale-up);
    animation-duration: 100ms;
  }
}

input[type=search] {
  padding-inline-start: calc(var(--cr-button-input-icon-size) + var(--cr-input-padding-inline) * 2);
  background-image: var(--cr-bg-search);
  background-size: var(--cr-size-wide);
  background-position: left var(--cr-size-base) top 50%;
  background-repeat: no-repeat;
}

:is(:dir(rtl), [dir=rtl]) select:not([multiple], [size]),
:is(:dir(rtl), [dir=rtl]) .combo-box__field:not([multiple], [size]) {
  background-position: left var(--cr-size-narrow) top 50%;
}
:is(:dir(rtl), [dir=rtl]) input[type=search] {
  background-position: right var(--cr-size-narrow) top 50%;
}

::placeholder {
  color: var(--cr-color-neutral-disabled);
}

audio,
canvas,
progress,
video {
  display: block;
}

audio,
video {
  inline-size: 100%;
}

svg.icon {
  max-block-size: 1.5ch;
  max-inline-size: 1.5ch;
  display: flex;
}

a,
.link {
  color: var(--cr-color-informative);
  text-decoration-skip-ink: auto;
  text-decoration: none;
  text-underline-offset: 0.25em;
}

a:not([class]) {
  color: currentColor;
}

.link:hover {
  color: var(--cr-color-action-text-hover);
  text-decoration: underline;
}

a:active,
.link:active {
  filter: brightness(0.9);
}

.link {
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.link[data-type=secondary], .link[data-type=quiet] {
  color: var(--cr-color-neutral-text);
}
.link[data-type=secondary]:hover, .link[data-type=quiet]:hover {
  color: var(--cr-color-action-text-hover);
}
.link[data-type=static-black] {
  color: var(--cr-color-gray-12);
}
.link[data-type=static-white] {
  color: var(--cr-color-neutral-text-white-static);
}

.link-underline::before, .link-underline::after {
  position: absolute;
  inline-size: 100%;
  block-size: var(--cr-border-size-med);
  background: var(--cr-color-brand-accent);
  inset-block-start: 100%;
  inset-inline-start: 0;
  pointer-events: none;
}
.link-underline::before {
  content: "";
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s;
}
.link-underline:hover::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
}

.link-bg {
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  color: var(--cr-color-neutral-text-subtle);
  text-decoration: none;
  background-image: linear-gradient(transparent 50%, var(--cr-color-brand-accent-lighter) 50%);
  background-size: auto 175%;
  transition: background 0.3s ease-in-out;
}
.link-bg:hover {
  background-position-y: 100%;
}

:focus-visible,
.focus-visible,
a:not(.btn):focus-visible,
a:not(.btn).focus-visible,
.text-link:focus-visible,
.text-link.focus-visible {
  outline: var(--cr-border-size-med) var(--cr-border-style-base) var(--cr-color-focus-ring);
  outline-offset: var(--cr-border-size-med);
}

:where(button, input, select, .combo-box__field, textarea, a:not(.button):focus-visible, a:not(.button).focus-visible):where(:not(:active)):focus-visible {
  outline: var(--cr-border-size-med) var(--cr-border-style-base) var(--cr-color-focus-ring);
  outline-offset: var(--cr-border-size-med);
}

[hidden] {
  display: none !important;
}

[id],
:target {
  scroll-margin-block-start: 2ex;
}

.auto-grid, .stats {
  display: grid;
  grid-template-columns: repeat(var(--cr-auto-grid-placement, auto-fill), minmax(var(--cr-auto-grid-min-item-size, 16rem), 1fr));
  grid-gap: var(--cr-size-fluid-base, var(--cr-size-base, 1rem));
}

.breakout {
  inline-size: calc(100vw - var(--cr-size-fluid-narrow) * 2);
  max-inline-size: var(--cr-breakout-max-width, 65rem);
  margin-inline-start: 50%;
  transform: translateX(-50%);
}

.wrapper-grid-full-bleed {
  inline-size: 100%;
  grid-column: 1/6 !important;
}

.cluster {
  --cr-cluster-horizontal-alignment: flex-start;
  --cr-cluster-vertical-alignment: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cr-gap, var(--cr-size-fluid-base, 1rem));
  justify-content: var(--cr-cluster-horizontal-alignment, flex-start);
  align-items: var(--cr-cluster-vertical-alignment, center);
}

.reel {
  --cr-reel-space: 2rem;
  display: flex;
  block-size: auto;
  max-inline-size: 100%;
  margin-inline: auto;
  padding: var(--cr-size-narrow);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.reel > * {
  flex-basis: var(--cr-reel-item-width, calc(33.333% - var(--cr-reel-space)));
  flex-shrink: 0;
}

.reel > * + * {
  margin-inline-start: var(--cr-reel-space);
}

.reel.scrollbar {
  padding-block-end: var(--cr-size-1);
}

.reel[data-scroll=snap] {
  scroll-snap-type: x mandatory;
}

.reel[data-scroll=snap] > * {
  scroll-snap-align: start;
}

.repel {
  --cr-repel-v-align: center;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--cr-repel-v-align, center);
  gap: var(--cr-size-fluid-base, var(--cr-size-base, 1rem));
}

.has-sidebar {
  --cr-sidebar-base: 15rem;
  --cr-sidebar-content-min-width: 60%;
  --cr-sidebar-target-width: var(--cr-sidebar-base);
  --cr-gap: var(--cr-size-fluid-base, var(--cr-size-base, 1rem));
  display: flex;
  flex-wrap: wrap;
  gap: var(--cr-gap);
}

.has-sidebar:not([data-direction]) > :first-child {
  flex-basis: var(--cr-sidebar-target-width, var(--cr-sidebar-base), 15rem);
  flex-grow: 1;
}

.has-sidebar:not([data-direction]) > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--cr-sidebar-content-min-width, 50%);
}

.has-sidebar[data-direction=rtl] > :last-child {
  flex-basis: var(--cr-sidebar-target-width, var(--cr-sidebar-base), 15rem);
  flex-grow: 1;
}

.has-sidebar[data-direction=rtl] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--cr-sidebar-content-min-width, 50%);
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cr-size-fluid-base, var(--cr-size-base, 1rem));
  align-items: var(--cr-switcher-vertical-alignment, flex-start);
}

.switcher > * {
  --cr-switcher-target-container-width: var(--cr-width-xs);
  flex-grow: 1;
  flex-basis: calc((var(--cr-switcher-target-container-width, 32rem) - 100%) * 999);
}

.switcher > :nth-last-child(n+3),
.switcher > :nth-last-child(n+3) ~ * {
  flex-basis: 100%;
}

.action-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.action-group > .action-group:not(:last-child) > .button, .action-group > .button:not(:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.action-group > .action-group:not(:first-child) > .button, .action-group > .button:nth-child(n+3), .action-group > :not(.button-check) + .button {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.action-group > .action-group:not(:first-child), .action-group > .button:not(:first-child) {
  margin-inline-start: calc(-1 * var(--cr-border-size-base));
}

.announcement-list,
.popover.announcement-list {
  --border-radius: var(--cr-border-radius-2);
  min-inline-size: 30rem;
  padding: 0;
  border-radius: var(--border-radius);
}

.announcement-list__header {
  display: flex;
  justify-content: space-between;
  padding-inline: var(--cr-gap);
}

.announcement-list__header button {
  padding-inline: 0;
}

.announcement {
  border: none;
  border-block-start: 1px solid var(--cr-color-neutral-border-1);
  background-color: var(--cr-color-neutral-bg-0);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--cr-gap);
  padding-block: var(--cr-gap);
  padding-inline: 0 var(--cr-gap);
}

.announcement:last-child {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.announcement:hover {
  background-color: var(--cr-color-neutral-bg-1);
}

.announcement:active {
  background-color: var(--cr-color-neutral-bg-2);
}

.announcement * {
  min-width: 0;
}

.announcement__content {
  border-inline-start: 4px solid var(--cr-color-informative);
  margin-inline-start: var(--cr-gap);
  padding-inline-start: var(--cr-gap);
  text-align: start;
  flex-grow: 1;
}

.announcement.--read .announcement__header,
.announcement[data-status=read] .announcement__header {
  font-weight: normal;
}

.announcement[data-priority=high] .announcement__content,
.announcement.--priority-high .announcement__content {
  border-color: var(--cr-color-danger);
}

.announcement__header {
  font-weight: var(--cr-font-weight-700);
}

.announcement__message {
  color: var(--cr-color-neutral-text-subtle);
}

.announcement__date {
  color: var(--cr-color-neutral-text-subtle);
}

.announcement__header,
.announcement__message,
.announcement__date {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-launcher {
  padding: var(--cr-size-base);
}

.app-list {
  max-inline-size: 320px;
  display: flex;
  flex-flow: row wrap;
  gap: var(--cr-size-base);
  align-items: flex-start;
}
.app-list + .eyebrow {
  margin-block-start: 2rem;
}

.avatar {
  font-family: var(--cr-font-body-semibold-family);
  font-size: var(--cr-font-body-semibold-size);
  font-weight: var(--cr-font-body-semibold-weight);
  line-height: var(--cr-font-body-semibold-line-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  inline-size: var(--cr-avatar-size-base);
  block-size: var(--cr-avatar-size-base);
  user-select: none;
  vertical-align: middle;
  text-align: center;
  border-radius: var(--cr-border-radius-round);
  border-color: transparent;
  text-decoration: none;
  background: #404A65;
  color: var(--cr-color-neutral-text-white-static);
  aspect-ratio: 1;
}
.avatar [data-initial]::before {
  color: currentColor;
  content: attr(data-initial);
  text-transform: uppercase;
  display: grid;
  place-items: center;
  z-index: 1;
}
.avatar[data-size=lg] {
  inline-size: var(--cr-size-8);
  block-size: var(--cr-size-8);
  font-size: var(--cr-font-size-3);
}
.avatar[data-type=image] {
  overflow: hidden;
}
.avatar[data-color=neutral], .avatar[data-color="0"] {
  background: #404A65;
}
.avatar[data-color=pale-green], .avatar[data-color="1"] {
  background: #8BD893;
}
.avatar[data-color=mustard], .avatar[data-color="2"] {
  background: #FD9F00;
}
.avatar[data-color=orange], .avatar[data-color="3"] {
  background: #FC7141;
}
.avatar[data-color=green], .avatar[data-color="4"] {
  background: #4BAE4F;
}
.avatar[data-color=cyan], .avatar[data-color="5"] {
  background: #00D1C3;
}
.avatar[data-color=periwinkle], .avatar[data-color="6"] {
  background: #B388FF;
}
.avatar[data-color=navy], .avatar[data-color="7"] {
  background: #093096;
}
.avatar[data-color=forest], .avatar[data-color="8"] {
  background: #255B5C;
}
.avatar[data-color=maroon], .avatar[data-color="9"] {
  background: #922852;
}
.avatar[data-color=blue], .avatar[data-color="10"] {
  background: #4092E1;
}
.avatar[data-color=red-orange], .avatar[data-color="11"] {
  background: #E75B5C;
}
.avatar[data-color=purple], .avatar[data-color="12"] {
  background: #6034BD;
}
.avatar[data-color=magenta], .avatar[data-color="13"] {
  background: #E162E3;
}

.avatar__initials {
  line-height: 1;
  text-transform: uppercase;
}
.avatar__initials:not([class*=t-]) {
  color: var(--cr-color-neutral-text-white-static);
}

.avatar-presence {
  border-radius: 50%;
  inline-size: var(--cr-size-narrow);
  block-size: var(--cr-size-narrow);
  padding: 0.1rem;
  position: absolute;
  inset-block-end: 14.64%;
  inset-inline-end: 14.64%;
  transform: translate(50%, 50%);
  z-index: 2;
}

.badge {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.8em;
  line-height: var(--cr-font-lineheight-1);
  padding: 0.25em 0.5em;
  border-radius: var(--cr-border-radius-base);
  inline-size: max-content;
  min-inline-size: var(--cr-size-5);
  max-inline-size: min(100ch, 50vw);
  min-block-size: var(--cr-size-5);
  background-color: var(--cr-color-neutral-bg-2);
  white-space: nowrap;
  color: var(--cr-color-neutral-text);
  font-weight: var(--cr-font-body-regular-weight);
}
.badge span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.badge:is(.badge-top-right, .badge-top-left, .badge-bottom-right, .badge-bottom-left) {
  position: absolute;
  z-index: var(--cr-layer-2);
}
.badge-top-right {
  inset-block-start: -0.75em;
  inset-inline-end: -0.75em;
}
.badge-top-left {
  inset-block-start: -0.75em;
  inset-inline-start: -0.75em;
}
.badge-bottom-right {
  inset-block-end: -0.75em;
  inset-inline-end: -0.75em;
}
.badge-bottom-left {
  inset-block-end: -0.75em;
  inset-inline-start: -0.75em;
}

.badge[data-type=count] {
  border-radius: var(--cr-border-radius-round);
}

.badge[data-type=icon] {
  border-radius: var(--cr-border-radius-round);
  padding: 0.25em;
}

.badge[data-type=tag] {
  gap: var(--cr-size-1);
}
.badge[data-type=tag].badge-solid-negative {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-danger);
}
.badge[data-type=tag].badge-solid-primary {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-primary);
}
.badge[data-type=tag].badge-solid-notice {
  color: var(--cr-color-text-notice-contrast);
  background-color: var(--cr-color-warning);
}
.badge[data-type=tag]:has(.tag-button) {
  padding-inline-end: 0.25rem;
}

.badge[data-type=status-light] {
  --cr-status-horizontal-alignment: flex-start;
  --cr-status-vertical-alignment: center;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--cr-gap, var(--cr-size-fluid-base, 1rem));
  justify-content: var(--cr-status-horizontal-alignment, flex-start);
  align-items: var(--cr-status-vertical-alignment, center);
  background-color: transparent;
  color: var(--cr-color-neutral-text);
}
.badge[data-type=status-light]::before {
  content: "●";
  display: inline-flex;
  color: var(--cr-color-neutral-text);
  background-color: transparent !important;
  font-size: 0.8em;
}
.badge[data-type=status-light].badge-informative::before {
  content: "●";
  color: var(--cr-color-informative);
}
.badge[data-type=status-light].badge-negative::before {
  content: "◆";
  color: var(--cr-color-danger);
}
.badge[data-type=status-light].badge-positive::before {
  content: "●";
  color: var(--cr-color-success);
}
.badge[data-type=status-light].badge-pending::before {
  content: "";
  inline-size: 1.25em;
  block-size: 1.25em;
  background-repeat: no-repeat;
  background-position: left 0 top 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='black' %3E%3C!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M312 104C312 117.3 301.3 128 288 128C274.7 128 264 117.3 264 104V24C264 10.75 274.7 0 288 0C301.3 0 312 10.75 312 24V104zM312 488C312 501.3 301.3 512 288 512C274.7 512 264 501.3 264 488V408C264 394.7 274.7 384 288 384C301.3 384 312 394.7 312 408V488zM32 256C32 242.7 42.75 232 56 232H136C149.3 232 160 242.7 160 256C160 269.3 149.3 280 136 280H56C42.75 280 32 269.3 32 256zM520 232C533.3 232 544 242.7 544 256C544 269.3 533.3 280 520 280H440C426.7 280 416 269.3 416 256C416 242.7 426.7 232 440 232H520zM469 74.98C478.4 84.35 478.4 99.55 469 108.9L412.5 165.5C403.1 174.9 387.9 174.9 378.5 165.5C369.1 156.1 369.1 140.9 378.5 131.6L435.1 74.98C444.5 65.61 459.6 65.61 469 74.98zM140.9 437C131.5 446.4 116.4 446.4 106.1 437C97.61 427.6 97.61 412.4 106.1 403.1L163.5 346.5C172.9 337.1 188.1 337.1 197.5 346.5C206.9 355.9 206.9 371.1 197.5 380.4L140.9 437zM106.1 74.98C116.4 65.61 131.5 65.61 140.9 74.98L197.5 131.6C206.9 140.9 206.9 156.1 197.5 165.5C188.1 174.9 172.9 174.9 163.5 165.5L106.1 108.9C97.61 99.55 97.61 84.35 106.1 74.98V74.98zM469 403.1C478.4 412.4 478.4 427.6 469 437C459.6 446.4 444.5 446.4 435.1 437L378.5 380.4C369.1 371.1 369.1 355.9 378.5 346.5C387.9 337.1 403.1 337.1 412.5 346.5L469 403.1z'/%3E%3C/svg%3E");
}
.badge[data-type=status-light].badge-notice::before {
  content: "▲";
  color: var(--cr-color-warning);
}
.badge[data-type=status-light].disabled::before {
  color: var(--cr-color-neutral-disabled);
}

.badge-notice {
  color: var(--cr-color-warning);
  background-color: var(--cr-color-yellow-3);
}

.badge-notice[data-type=status-light]::before {
  background-color: var(--cr-color-warning);
}

.badge-negative {
  color: var(--cr-color-danger);
  background-color: var(--cr-color-red-3);
}

.badge-negative[data-type=status-light]::before {
  background-color: var(--cr-color-danger);
}

.badge-positive {
  color: var(--cr-color-success);
  background-color: var(--cr-color-green-3);
}

.badge-positive[data-type=status-light]::before {
  background-color: var(--cr-color-success);
}

.badge-informative {
  color: var(--cr-color-informative);
  background-color: var(--cr-color-blue-3);
}

.badge-informative[data-type=status-light]::before {
  background-color: var(--cr-color-informative);
}

.badge-primary {
  color: var(--cr-color-brand-9);
  background-color: var(--cr-color-brand-3);
}

.badge-primary[data-type=status-light]::before {
  background-color: var(--cr-color-brand-9);
}

.badge-accent {
  color: var(--cr-color-brand-accent);
  background-color: var(--cr-color-accent-3);
}

.badge-accent[data-type=status-light]::before {
  background-color: var(--cr-color-brand-accent);
}

.badge-neutral {
  color: var(--cr-color-neutral-bg-0);
  background-color: var(--cr-color-neutral-bg-0);
}

.badge-neutral[data-type=status-light]::before {
  background-color: var(--cr-color-neutral-bg-0);
}

.badge-comp-1 {
  color: var(--cr-color-bg-comp-1);
  background-color: var(--cr-color-teal-3);
}

.badge-comp-1[data-type=status-light]::before {
  background-color: var(--cr-color-bg-comp-1);
}

.badge-comp-2 {
  color: var(--cr-color-bg-comp-2);
  background-color: var(--cr-color-violet-3);
}

.badge-comp-2[data-type=status-light]::before {
  background-color: var(--cr-color-bg-comp-2);
}

.badge-purewhite {
  color: var(--cr-color-black);
  background-color: var(--cr-color-neutral-text-white-static);
}

.badge-purewhite[data-type=status-light]::before {
  background-color: var(--cr-color-black);
}

.badge-pureblack {
  color: var(--cr-color-neutral-text-white-static);
  background-color: var(--cr-color-black);
}

.badge-pureblack[data-type=status-light]::before {
  background-color: var(--cr-color-neutral-text-white-static);
}

.badge-solid-notice {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-warning);
}

.badge-solid-negative {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-danger);
}

.badge-solid-positive {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-success);
}

.badge-solid-informative {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-informative);
}

.badge-solid-primary {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-brand-9);
}

.badge-solid-accent {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-brand-accent);
}

.badge-solid-neutral {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-neutral-bg-0);
}

.badge-solid-comp-1 {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-bg-comp-1);
}

.badge-solid-comp-2 {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-bg-comp-2);
}

.badge-solid-purewhite {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-black);
}

.badge-solid-pureblack {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-neutral-text-white-static);
}

.badge-invert {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-bg-invert);
}
.badge-solid-invert {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-bg-invert);
}
.badge-notice {
  color: var(--cr-color-neutral-text-gray-static);
  border: 1px solid var(--cr-color-warning-border);
  background-color: var(--cr-color-warning-bg-1);
}
.badge-negative {
  color: var(--cr-color-neutral-text);
  border: 1px solid var(--cr-color-danger-border);
  background-color: var(--cr-color-danger-bg-1);
}
.badge-positive {
  color: var(--cr-color-neutral-text);
  border: 1px solid var(--cr-color-success-border);
  background-color: var(--cr-color-success-bg-1);
}
.badge-informative {
  color: var(--cr-color-neutral-text);
  border: 1px solid var(--cr-color-informative-border);
  background-color: var(--cr-color-informative-bg-1);
}

.badge-solid-notice {
  color: var(--cr-color-neutral-text-gray-static);
  background-color: var(--cr-color-warning);
}

.badge-solid-gray {
  color: var(--cr-color-neutral-text-white-static);
  background-color: var(--cr-color-neutral-disabled);
}

.badge-solid-plum {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-brand);
}

.badge-plum {
  color: var(--cr-color-brand);
  border: 1px solid var(--cr-color-brand-border);
  background-color: var(--cr-color-brand-bg-2);
}

.badge-gray {
  color: var(--cr-color-neutral-text);
  border: 1px solid var(--cr-color-neutral-border-1);
  background-color: var(--cr-color-neutral-bg-2);
}

.badge[data-size=md] {
  font-size: var(--cr-font-size-1);
}

.badge[data-size=lg] {
  font-size: var(--cr-font-size-2);
}

.tag-button {
  color: inherit;
  background-color: transparent;
  border: 0;
  font-size: 1rem;
}

@media (prefers-color-scheme: dark) {
  .badge-solid-notice {
    color-scheme: dark;
    color: var(--cr-color-neutral-text-invert);
  }
}
[color-scheme=dark] table .badge-solid-notice {
  color-scheme: dark;
  color: var(--cr-color-neutral-text-invert);
}

@media (prefers-color-scheme: light) {
  .badge-solid-notice {
    color-scheme: light;
    color: var(--cr-color-neutral-text-gray-static);
  }
}
[color-scheme=light] table .badge-solid-notice {
  color-scheme: light;
  color: var(--cr-color-neutral-text-gray-static);
}

.banner {
  --cr-gutter: var(--cr-size-base);
  display: flex;
  align-items: center;
  padding: 0.75em var(--cr-size-base);
  gap: 0 var(--cr-size-base);
  flex-wrap: nowrap;
  background-color: var(--cr-color-neutral-bg-2);
  color: var(--cr-color-neutral-text);
}
.banner .icon-button {
  margin-inline-end: -0.5vw;
  margin-inline-start: auto;
}
.banner .icon-button::before {
  background-color: rgba(255, 255, 255, 0.1);
}
.banner > .cluster {
  --cr-gap: var(--cr-size-wide);
}

.banner[data-type=informative] {
  background-color: var(--cr-color-informative);
  color: var(--cr-color-neutral-text-invert);
}

.banner[data-type=negative] {
  background-color: var(--cr-color-danger);
  color: var(--cr-color-neutral-text-invert);
}

.banner__content {
  --cr-flow-space: var(--cr-size-narrow);
  line-height: var(--cr-font-lineheight-2);
  flex-grow: 1;
}

.banner__actions {
  flex: none;
  margin-inline-start: auto;
  margin-block-start: auto;
  margin-block-end: 0;
}
.banner__actions .button {
  color: var(--cr-color-neutral-text-invert);
}
@media (prefers-reduced-motion: no-preference) {
  .banner__actions .button {
    transition: var(--cr-duration-base) ease-in-out all;
  }
}
.banner__actions .button:not(:hover) {
  background: rgba(255, 255, 255, 0.1);
  border: transparent;
  box-shadow: none;
}
.banner__actions .button:where(:not(:active, .active):hover) {
  --cr-highlight-size: 0;
  box-shadow: none;
  border: none;
  background: rgba(255, 255, 255, 0.2);
}
.banner__actions :where(button.button, input.button):where(:not(:active)):focus-visible {
  outline-offset: 0;
}

.banner__content.cluster {
  --cr-gutter: var(--cr-size-base);
  flex-wrap: nowrap;
}

.banner__actions.cluster {
  --cr-gap: var(--cr-size-base);
}

.banner__img {
  max-inline-size: var(--cr-avatar-size-base);
  max-block-size: var(--cr-avatar-size-base);
  background: rgba(255, 255, 255, 0.5);
}

@media print {
  .banner {
    display: none !important;
  }
}
.site-head__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--cr-size-base);
  text-decoration: none;
}

.clario-logo {
  --cr-clario-logo-height: var(--cr-size-6);
  block-size: var(--cr-clario-logo-height);
}
.clario-logo * {
  transition: all var(--cr-duration-base) ease-out;
}

.clario-icon {
  inline-size: var(--cr-size-fluid-base);
}

.clario-logo-text,
.clario-icon-circle {
  fill: var(--cr-color-brand-main-logo);
}

.clario-icon-c {
  fill: var(--cr-color-brand-main-logo);
}

.clario-logo-period,
.clario-icon-period {
  fill: var(--cr-color-brand-accent);
}

.clario-icon-circle,
.clario-icon-period {
  opacity: 0;
}

.app-title {
  display: grid;
  font-weight: var(--cr-font-weight-5);
  font-size: var(--cr-font-size-2);
  color: var(--cr-color-neutral-text);
}

@media (prefers-color-scheme: light) {
  .brand-invert .clario-logo-text,
  .brand-invert .clario-icon-circle {
    fill: var(--cr-color-brand-gray);
  }
}
[color-scheme=dark] .brand-invert .clario-logo-text,
[color-scheme=dark] .brand-invert .clario-icon-circle {
  fill: var(--cr-color-brand-gray);
}

.breadcrumbs {
  font-size: var(--cr-font-body-small-regular-size);
}
.breadcrumbs a {
  color: currentColor;
  overflow: hidden;
  text-decoration: none;
  color: var(--cr-color-neutral-text-subtle);
}
.breadcrumbs a:hover {
  background: transparent;
  color: var(--cr-color-informative);
}
.breadcrumbs + * {
  --cr-flow-space: 1rem;
}
.breadcrumbs .page-title {
  margin-block-end: 0.5em;
}

.breadcrumbs__list {
  margin: 0;
  overflow-x: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}
.breadcrumbs__list,
.breadcrumbs__list > li {
  display: inline-flex;
  align-items: center;
  gap: 0 var(--cr-size-narrow);
}
.breadcrumbs__list li {
  flex: none;
  color: var(--cr-color-neutral-text-subtle);
}
.breadcrumbs__list > li + li::before {
  content: "";
  color: var(--cr-color-neutral-text-subtle);
  height: 0.75rem;
  width: 0.75rem;
  background-repeat: no-repeat;
  background-image: var(--cr-bg-breadcrumb);
}
.breadcrumbs__list li:last-child {
  color: var(--cr-color-brand);
}

.icon-button, .date-grid button {
  --icon-button-size: var(--cr-form-control-base);
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: currentColor;
  padding: 0;
  font: inherit;
  appearance: none;
  position: relative;
  border-radius: var(--cr-border-radius-round);
  transition: var(--cr-duration-base) ease-in-out all;
  z-index: 1;
}
.icon-button.icon-button, .date-grid button {
  inline-size: var(--icon-button-size);
  block-size: var(--icon-button-size);
}
.icon-button svg, .date-grid button svg {
  display: block;
  inline-size: var(--icon-button-size);
  block-size: var(--icon-button-size);
}
.icon-button::before, .date-grid button::before {
  content: "";
  inline-size: 0.125rem;
  block-size: 0.125rem;
  background: hsla(169deg, 53.1%, 0%, 0.1);
  filter: brightness(0.9);
  position: absolute;
  display: grid;
  place-items: center;
  opacity: 0;
  border-radius: var(--cr-border-radius-round);
  z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .icon-button::before, .date-grid button::before {
    transition: var(--cr-duration-1) ease-in-out all;
  }
}
.icon-button:hover::before, .date-grid button:hover::before {
  content: "";
  inline-size: var(--icon-button-size);
  block-size: var(--icon-button-size);
  opacity: 1;
}
.icon-button.active:hover, .date-grid button.active:hover, .icon-button[aria-expanded=true]:hover, .date-grid button[aria-expanded=true]:hover {
  filter: brightness(0.8);
}
.icon-button.active:hover::before, .date-grid button.active:hover::before, .icon-button[aria-expanded=true]:hover::before, .date-grid button[aria-expanded=true]:hover::before {
  opacity: 0;
}
.icon-button[data-size=sm], .date-grid button[data-size=sm] {
  --icon-button-size: var(--cr-form-control-sm);
}
.icon-button[data-size=lg], .date-grid button[data-size=lg] {
  --icon-button-size: var(--cr-form-control-lg);
  font-size: var(--cr-font-size-4);
}

@media (prefers-color-scheme: dark) {
  .icon-button::before, .date-grid button::before {
    background: hsla(169deg, 53.1%, 100%, 0.9);
    filter: brightness(0.2);
  }
}
[color-scheme=dark] .icon-button::before, [color-scheme=dark] .date-grid button::before, .date-grid [color-scheme=dark] button::before {
  background: hsla(169deg, 53.1%, 100%, 0.9);
  filter: brightness(0.2);
}

@media (prefers-color-scheme: light) {
  .icon-button::before, .date-grid button::before {
    background: hsla(169deg, 53.1%, 0%, 0.1);
    filter: brightness(0.92);
  }
}
[color-scheme=light] .icon-button::before, [color-scheme=light] .date-grid button::before, .date-grid [color-scheme=light] button::before {
  background: hsla(169deg, 53.1%, 0%, 0.1);
  filter: brightness(0.92);
}

.icon-link {
  --cr-flow-space: .5em;
  display: grid;
  place-items: center;
  padding: var(--cr-size-base);
  border-radius: var(--cr-border-radius-base);
  cursor: pointer;
}
.icon-link:hover {
  background-color: var(--cr-color-neutral-bg-1);
}
.icon-link svg {
  inline-size: var(--cr-size-7);
  transform: scale(140%);
}
.icon-link span {
  font-size: var(--cr-font-size-0);
}

.icon-button:is([disabled], :disabled, .disabled), .date-grid button:is([disabled], :disabled, .disabled) {
  box-shadow: none;
  color: var(--cr-color-neutral-disabled);
  cursor: not-allowed;
}
.icon-button:is([disabled], :disabled, .disabled)::before, .date-grid button:is([disabled], :disabled, .disabled)::before {
  display: none;
}

.calendar {
  background-color: var(--cr-color-neutral-bg-0);
}

.month-year {
  gap: var(--cr-size-fluid-narrow, var(--cr-size-narrow, 0.5rem));
}

.month {
  font-weight: var(--cr-font-weight-700);
}

.year {
  font-weight: var(--cr-font-weight-400);
}

.week,
.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  place-items: center;
}

.week > * {
  font-size: 0.7em;
  font-weight: var(--cr-font-weight-500);
  text-align: center;
}

.date-grid {
  --cr-flow-space: .5em;
}

.date-grid[data-firstday="1"] button:first-child {
  grid-column: 1;
}

.date-grid[data-firstday="2"] button:first-child {
  grid-column: 2;
}

.date-grid[data-firstday="3"] button:first-child {
  grid-column: 3;
}

.date-grid[data-firstday="4"] button:first-child {
  grid-column: 4;
}

.date-grid[data-firstday="5"] button:first-child {
  grid-column: 5;
}

.date-grid[data-firstday="6"] button:first-child {
  grid-column: 6;
}

.date-grid[data-firstday="7"] button:first-child {
  grid-column: 7;
}

.date-grid button {
  color: var(--cr-color-neutral-text-subtle);
  line-height: 1;
}
.date-grid button:hover, .date-grid button:focus {
  outline: none;
}
.date-grid button:active, .date-grid button.is-selected {
  background-color: var(--cr-color-brand);
  color: var(--cr-color-neutral-text-white-static);
}
.date-grid button:active.has-visit::after, .date-grid button.is-selected.has-visit::after {
  background: var(--cr-color-neutral-text-white-static);
}
.date-grid button:active::before, .date-grid button.is-selected::before {
  background-color: var(--cr-color-brand);
}
.date-grid button.is-today {
  font-weight: var(--cr-font-weight-700, bold);
  color: var(--cr-color-neutral-text);
}
.date-grid button.has-visit::after {
  content: "";
  position: absolute;
  inline-size: var(--cr-size-1);
  block-size: var(--cr-size-1);
  background: var(--cr-color-brand-accent);
  inset-block-start: var(--cr-size-6);
  border-radius: var(--cr-border-radius-round);
}

.card {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid var(--cr-color-neutral-border-1);
  border-radius: var(--cr-border-radius-base);
  text-decoration: none;
  background-color: var(--cr-color-neutral-bg-0);
  box-shadow: var(--cr-shadow-2), var(--cr-shadow-depth), 0 0 0 var(--cr-highlight-size) var(--cr-color-highlight);
  transition: box-shadow 145ms ease;
}
.card a:not([class*=action]),
.card p,
.card h2,
.card h3,
.card h4 {
  position: relative;
  z-index: 1;
}
.card:link, .card:visited {
  color: var(--cr-color-neutral-text);
}
.card > img:not([class]) {
  block-size: 15rem;
  object-fit: cover;
  margin-inline: auto;
}
.card:is(a):hover {
  --cr-highlight-size: .25rem;
}

.card__content {
  flex: auto;
  max-inline-size: 100%;
  overflow-wrap: break-word;
  padding: var(--cr-size-base);
  gap: var(--cr-gap);
}
.card__content a:not([class]) {
  color: currentColor;
}
.card__content a:not(:hover) {
  text-decoration: none;
}
.card__content p,
.card__content li {
  color: var(--cr-color-neutral-text);
}

.card__action {
  text-decoration: none;
}
.card__action::before {
  content: "";
  position: absolute;
  inset: 0;
}

.card__avatars {
  --cr-gutter: 0.5rem;
  --cr-flow-space: 0.5rem;
  --cr-avatar-size: 2rem;
}

.card__users {
  --cr-gutter: 1ex;
  padding: 0;
  flex: auto;
}

.card__meta {
  font-size: 0.9em;
  padding: 0;
  margin: 0 0 1em 0;
}
.card__meta,
.card__meta li {
  display: flex;
  gap: 0.5rem;
}
.card__meta li + li::before {
  content: "·";
  display: block;
}
.card__meta li:first-of-type {
  position: relative;
}
.card__meta li:first-of-type::before {
  content: "";
  inline-size: 100%;
  block-size: var(--cr-border-size-med);
  position: absolute;
  inset: -0.5ex 0 0 0;
}

.card__header {
  inline-size: 100%;
  font-weight: var(--cr-font-weight-500);
  padding: var(--cr-size-base);
  padding-block-end: 0;
}
.card__header .actions-group {
  margin-inline-end: -0.5rem;
}

.card__hero {
  inline-size: 100%;
  aspect-ratio: var(--cr-ratio-landscape);
  object-fit: cover;
}

.card__tags {
  --cr-gutter: --cr-size-fluid-narrow;
  margin-block-start: var(--cr-size-fluid-base);
}

.card[data-type=neutral] {
  border-inline-start: var(--cr-size-1) solid var(--cr-color-neutral-border-1);
}

.card[data-type=informative] {
  border-inline-start: var(--cr-size-1) solid var(--cr-color-informative);
}

.card[data-type=negative] {
  border-inline-start: var(--cr-size-1) solid var(--cr-color-danger);
}

.card[data-type=positive] {
  border-inline-start: var(--cr-size-1) solid var(--cr-color-success);
}

.card[data-type=notice] {
  border-inline-start: var(--cr-size-1) solid var(--cr-color-warning);
}

.content-section {
  border: 1px solid var(--cr-color-neutral-border-1);
  background-color: var(--cr-color-neutral-bg-1);
  padding: 1rem;
  border-radius: var(--cr-border-radius-base);
}
.content-section[data-type=fixed] {
  max-block-size: 20rem;
  overflow-y: auto;
}
.content-section[data-height=sm] {
  max-block-size: 10rem;
  overflow-y: auto;
}
.content-section[data-height=lg] {
  max-block-size: 50rem;
  overflow-y: auto;
}

.popover.date-picker {
  padding: 0;
  min-inline-size: 23rem;
}

.date-picker__controls {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}
.date-picker__controls .button {
  padding-inline: 0.25rem;
  margin-inline: -0.25rem;
  font-weight: 500;
  transition: background-color 0.1s ease-out;
}

.date-picker__button-group {
  display: flex;
}

.date-picker__button-group:dir(rtl) {
  flex-direction: row-reverse;
}

.date-picker__button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: none;
  background-color: transparent;
  border-radius: var(--cr-border-radius-round);
  block-size: 2.5rem;
  transition: background-color 0.1s ease-out;
  color: var(--cr-color-neutral-text);
  aspect-ratio: 1/1;
}
.date-picker__button:hover {
  background-color: var(--cr-color-neutral-bg-2);
}
.date-picker__button:active {
  background-color: var(--cr-color-neutral-bg-0);
}
.date-picker__button:disabled, .date-picker__button.--disabled, .date-picker__button[data-disabled] {
  background-color: none;
  color: var(--cr-color-neutral-disabled);
  cursor: not-allowed;
  text-decoration: line-through;
}
.date-picker__button:disabled:hover, .date-picker__button:disabled:active, .date-picker__button.--disabled:hover, .date-picker__button.--disabled:active, .date-picker__button[data-disabled]:hover, .date-picker__button[data-disabled]:active {
  background-color: transparent;
}
.date-picker__button:focus-visible, .date-picker__button:focus {
  outline-color: transparent;
  background-color: var(--cr-color-neutral-bg-2);
}
.date-picker__button.--selected, .date-picker__button[data-selected] {
  background-color: var(--cr-color-brand);
  color: var(--cr-color-neutral-text-invert);
}
.date-picker__button.--selected:hover, .date-picker__button[data-selected]:hover {
  background-color: var(--cr-color-bg-brand-solid-hover);
}
.date-picker__button.--selected:focus, .date-picker__button.--selected:focus-visible, .date-picker__button[data-selected]:focus, .date-picker__button[data-selected]:focus-visible {
  background-color: var(--cr-color-bg-brand-solid-hover);
}
.date-picker__button.--today, .date-picker__button[data-today] {
  outline: 2px solid var(--cr-color-neutral-bg-2);
  outline-offset: 2px;
}
.date-picker__button.--today.--selected, .date-picker__button[data-selected][data-today] {
  outline-color: var(--cr-color-bg-brand-solid);
}

.date-picker__label {
  display: block;
  color: var(--cr-color-neutral-text-subtle);
  padding: 1rem 1rem 0 1rem;
  font-weight: 500;
}

.date-picker__day-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  color: var(--cr-color-neutral-text-subtle);
  padding: 0 1rem 1rem 1rem;
}
.date-picker__day-headers > * {
  text-align: center;
}

.date-picker__day-button-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  padding: 1rem;
}
.date-picker__day-button-grid.--first-day-monday .date-picker__day-button:first-child, .date-picker__day-button-grid[data-first-day=monday] .date-picker__day-button:first-child {
  grid-column-start: 1;
}
.date-picker__day-button-grid.--first-day-tuesday .date-picker__day-button:first-child, .date-picker__day-button-grid[data-first-day=tuesday] .date-picker__day-button:first-child {
  grid-column-start: 2;
}
.date-picker__day-button-grid.--first-day-wednesday .date-picker__day-button:first-child, .date-picker__day-button-grid[data-first-day=wednesday] .date-picker__day-button:first-child {
  grid-column-start: 3;
}
.date-picker__day-button-grid.--first-day-thursday .date-picker__day-button:first-child, .date-picker__day-button-grid[data-first-day=thursday] .date-picker__day-button:first-child {
  grid-column-start: 4;
}
.date-picker__day-button-grid.--first-day-friday .date-picker__day-button:first-child, .date-picker__day-button-grid[data-first-day=friday] .date-picker__day-button:first-child {
  grid-column-start: 5;
}
.date-picker__day-button-grid.--first-day-saturday .date-picker__day-button:first-child, .date-picker__day-button-grid[data-first-day=saturday] .date-picker__day-button:first-child {
  grid-column-start: 6;
}
.date-picker__day-button-grid.--first-day-sunday .date-picker__day-button:first-child, .date-picker__day-button-grid[data-first-day=sunday] .date-picker__day-button:first-child {
  grid-column-start: 7;
}

.date-picker__day-button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: none;
  background-color: transparent;
  border-radius: var(--cr-border-radius-round);
  block-size: 2.5rem;
  transition: background-color 0.1s ease-out;
  color: var(--cr-color-neutral-text);
  aspect-ratio: 1/1;
  text-wrap: nowrap;
}
.date-picker__day-button:hover {
  background-color: var(--cr-color-neutral-bg-2);
}
.date-picker__day-button:active {
  background-color: var(--cr-color-neutral-bg-0);
}
.date-picker__day-button:disabled, .date-picker__day-button.--disabled, .date-picker__day-button[data-disabled] {
  background-color: none;
  color: var(--cr-color-neutral-disabled);
  cursor: not-allowed;
  text-decoration: line-through;
}
.date-picker__day-button:disabled:hover, .date-picker__day-button:disabled:active, .date-picker__day-button.--disabled:hover, .date-picker__day-button.--disabled:active, .date-picker__day-button[data-disabled]:hover, .date-picker__day-button[data-disabled]:active {
  background-color: transparent;
}
.date-picker__day-button:focus-visible, .date-picker__day-button:focus {
  outline-color: transparent;
  background-color: var(--cr-color-neutral-bg-2);
}
.date-picker__day-button.--selected, .date-picker__day-button[data-selected] {
  background-color: var(--cr-color-brand);
  color: var(--cr-color-neutral-text-invert);
}
.date-picker__day-button.--selected:hover, .date-picker__day-button[data-selected]:hover {
  background-color: var(--cr-color-bg-brand-solid-hover);
}
.date-picker__day-button.--selected:focus, .date-picker__day-button.--selected:focus-visible, .date-picker__day-button[data-selected]:focus, .date-picker__day-button[data-selected]:focus-visible {
  background-color: var(--cr-color-bg-brand-solid-hover);
}
.date-picker__day-button.--today, .date-picker__day-button[data-today] {
  outline: 2px solid var(--cr-color-neutral-bg-2);
  outline-offset: 2px;
}
.date-picker__day-button.--today.--selected, .date-picker__day-button[data-selected][data-today] {
  outline-color: var(--cr-color-bg-brand-solid);
}

.date-picker__year-button-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 1rem;
}

.date-picker__year-button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: none;
  background-color: transparent;
  border-radius: var(--cr-border-radius-round);
  block-size: 2.5rem;
  transition: background-color 0.1s ease-out;
  color: var(--cr-color-neutral-text);
  padding: 0.5rem 0.25rem;
}
.date-picker__year-button:hover {
  background-color: var(--cr-color-neutral-bg-2);
}
.date-picker__year-button:active {
  background-color: var(--cr-color-neutral-bg-0);
}
.date-picker__year-button:disabled, .date-picker__year-button.--disabled, .date-picker__year-button[data-disabled] {
  background-color: none;
  color: var(--cr-color-neutral-disabled);
  cursor: not-allowed;
  text-decoration: line-through;
}
.date-picker__year-button:disabled:hover, .date-picker__year-button:disabled:active, .date-picker__year-button.--disabled:hover, .date-picker__year-button.--disabled:active, .date-picker__year-button[data-disabled]:hover, .date-picker__year-button[data-disabled]:active {
  background-color: transparent;
}
.date-picker__year-button:focus-visible, .date-picker__year-button:focus {
  outline-color: transparent;
  background-color: var(--cr-color-neutral-bg-2);
}
.date-picker__year-button.--selected, .date-picker__year-button[data-selected] {
  background-color: var(--cr-color-brand);
  color: var(--cr-color-neutral-text-invert);
}
.date-picker__year-button.--selected:hover, .date-picker__year-button[data-selected]:hover {
  background-color: var(--cr-color-bg-brand-solid-hover);
}
.date-picker__year-button.--selected:focus, .date-picker__year-button.--selected:focus-visible, .date-picker__year-button[data-selected]:focus, .date-picker__year-button[data-selected]:focus-visible {
  background-color: var(--cr-color-bg-brand-solid-hover);
}
.date-picker__year-button.--today, .date-picker__year-button[data-today] {
  outline: 2px solid var(--cr-color-neutral-bg-2);
  outline-offset: 2px;
}
.date-picker__year-button.--today.--selected, .date-picker__year-button[data-selected][data-today] {
  outline-color: var(--cr-color-bg-brand-solid);
}

.date-picker__month-button-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 0.5rem;
  padding: 1rem;
}

.date-picker__month-button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: none;
  background-color: transparent;
  border-radius: var(--cr-border-radius-round);
  block-size: 2.5rem;
  transition: background-color 0.1s ease-out;
  color: var(--cr-color-neutral-text);
  padding: 0.5rem 0.25rem;
}
.date-picker__month-button:hover {
  background-color: var(--cr-color-neutral-bg-2);
}
.date-picker__month-button:active {
  background-color: var(--cr-color-neutral-bg-0);
}
.date-picker__month-button:disabled, .date-picker__month-button.--disabled, .date-picker__month-button[data-disabled] {
  background-color: none;
  color: var(--cr-color-neutral-disabled);
  cursor: not-allowed;
  text-decoration: line-through;
}
.date-picker__month-button:disabled:hover, .date-picker__month-button:disabled:active, .date-picker__month-button.--disabled:hover, .date-picker__month-button.--disabled:active, .date-picker__month-button[data-disabled]:hover, .date-picker__month-button[data-disabled]:active {
  background-color: transparent;
}
.date-picker__month-button:focus-visible, .date-picker__month-button:focus {
  outline-color: transparent;
  background-color: var(--cr-color-neutral-bg-2);
}
.date-picker__month-button.--selected, .date-picker__month-button[data-selected] {
  background-color: var(--cr-color-brand);
  color: var(--cr-color-neutral-text-invert);
}
.date-picker__month-button.--selected:hover, .date-picker__month-button[data-selected]:hover {
  background-color: var(--cr-color-bg-brand-solid-hover);
}
.date-picker__month-button.--selected:focus, .date-picker__month-button.--selected:focus-visible, .date-picker__month-button[data-selected]:focus, .date-picker__month-button[data-selected]:focus-visible {
  background-color: var(--cr-color-bg-brand-solid-hover);
}
.date-picker__month-button.--today, .date-picker__month-button[data-today] {
  outline: 2px solid var(--cr-color-neutral-bg-2);
  outline-offset: 2px;
}
.date-picker__month-button.--today.--selected, .date-picker__month-button[data-selected][data-today] {
  outline-color: var(--cr-color-bg-brand-solid);
}

.date-picker__field-wrapper {
  position: relative;
}

.date-picker__field-button.icon-button {
  position: absolute;
  top: 0;
  right: 0;
  inline-size: unset;
  block-size: 100%;
  aspect-ratio: 1/1;
}
.date-picker__field-button.icon-button * {
  color: var(--cr-color-neutral-text);
}

.date-picker__field-button.icon-button[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}
.date-picker__field-button.icon-button[disabled] * {
  color: var(--cr-color-neutral-disabled);
}

[data-size=sm] .date-picker__field-button.icon-button {
  transform: scale(0.9);
}

[data-size=lg] .date-picker__field-button.icon-button {
  transform: scale(1.125);
}

input.date-picker__field {
  padding-inline-end: calc(1.5rem + 1em);
}

.date-picker__field-button.icon-button:dir(rtl) {
  right: auto;
  left: 2px;
}

.details {
  position: relative;
  background-color: var(--cr-color-neutral-bg-0);
  border: 1px solid var(--cr-color-neutral-border-1);
  border-inline-start: var(--cr-size-1) solid var(--cr-color-neutral-border-1);
  border-radius: var(--cr-border-radius-base);
  padding-block: 0.75rem;
  padding-inline: 1rem;
  box-shadow: var(--cr-shadow-2), var(--cr-shadow-depth), 0 0 0 var(--cr-highlight-size) var(--cr-color-highlight);
  transition: box-shadow 145ms ease;
}

.details[data-type=informative] {
  border-inline-start-color: var(--cr-color-informative);
}

.details[data-type=negative] {
  border-inline-start-color: var(--cr-color-danger);
}

.details[data-type=positive] {
  border-inline-start-color: var(--cr-color-success);
}

.details[data-type=notice] {
  border-inline-start-color: var(--cr-color-warning);
}

.details summary {
  display: flex;
  align-items: center;
  gap: var(--cr-gap);
}

.details summary:hover {
  cursor: pointer;
}

.details__title {
  max-inline-size: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
}

.details__content {
  padding-block-start: 0.75rem;
}

.details[open] summary {
  border-block-end: 1px solid var(--cr-color-neutral-border-1);
  padding-block-end: 0.75rem;
}

.details summary::-webkit-details-marker,
.details summary::marker {
  display: none;
  content: "";
}

.details[open] .details__marker {
  transform: rotate(180deg);
}

details:not(.details) {
  --cr-flow-space: 0.5em;
  border-block: var(--cr-border-stroke);
  padding: var(--cr-size-base) var(--cr-size-narrow) var(--cr-size-4) var(--cr-size-narrow);
  text-align: start;
}

details:not(.details) + details:not(.details) {
  border-block-start: none;
}

details:not(.details) summary {
  position: relative;
  font-size: var(--cr-font-size-1);
  list-style: none;
  cursor: pointer;
  padding-inline-end: var(--cr-size-base);
  color: var(--cr-color-informative);
  font-weight: var(--cr-font-weight-400);
}
details:not(.details) summary::-webkit-details-marker {
  display: none;
}
details:not(.details) summary::before, details:not(.details) summary::after {
  content: "";
  display: block;
  position: absolute;
  inset-block-start: 0;
}
details:not(.details) summary::before {
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  inset-inline-end: 0;
  inset-block-start: -2px;
}
details:not(.details) summary::after {
  inline-size: 8px;
  block-size: 8px;
  border-block-end: var(--cr-border-size-med) var(--cr-border-style-base) var(--cr-color-neutral-text-subtle);
  border-inline-end: var(--cr-border-size-med) var(--cr-border-style-base) var(--cr-color-neutral-text-subtle);
  inset-block-start: 7px;
  inset-inline-end: 10px;
  transform: rotate(45deg);
}
details:not(.details) summary:focus {
  outline: none;
}
details:not(.details) summary:focus::before {
  outline: var(--cr-border-size-base) var(--cr-border-style-base) var(--cr-color-neutral-bg-2);
}
details:not(.details) summary:hover::before {
  background: var(--cr-color-neutral-bg-1);
}

[class*=text-] > details:not(.details) summary {
  font-size: inherit;
}

details:not(.details)[open] summary::after {
  inset-block-start: 11px;
  transform: rotate(-135deg);
}

details:not(.details) summary + * {
  --cr-flow-space: var(--cr-size-fluid-2);
}

.dropdown {
  display: inline-flex;
  position: relative;
  vertical-align: top;
}

.dropdown__control {
  transition: var(--cr-duration-base) all;
}
.dropdown__control:not(.icon-button, .avatar)::after {
  display: inline-block;
  margin-inline-start: 0.5em;
  margin-inline-end: -0.25em;
  vertical-align: 0.255em;
  content: "";
  border-block-start: 0.3em solid;
  border-inline-end: 0.3em solid transparent;
  border-block-end: 0;
  border-inline-start: 0.3em solid transparent;
}
.dropdown__control.active::after, .dropdown__control[aria-expanded=true]::after {
  transform: rotateZ(180deg);
}

.dropdown__panel {
  inset-inline-start: 0;
  inset-block-start: 100%;
  background-color: var(--cr-color-neutral-bg-0);
  border-radius: var(--cr-border-radius-base);
  border: 1px solid var(--cr-color-neutral-border-1);
  box-shadow: var(--cr-shadow-2);
  min-inline-size: 16ch;
  inline-size: max-content;
  z-index: var(--cr-layer-3);
}
.dropdown__panel.active {
  visibility: visible;
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .dropdown__panel.active {
    animation: var(--cr-animation-scale-down) reverse, var(--cr-animation-fade-out) reverse;
    animation-timing-function: var(--cr-ease-squish-5);
    animation-duration: var(--cr-duration-base);
  }
}
.dropdown__panel .stack-nav {
  margin-block-start: 0;
  margin-block-end: 0;
}

.dropdown__title {
  font-size: var(--cr-font-size-0);
  padding: var(--cr-size-base);
  font-weight: 600;
}

[data-align=end] .dropdown__panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: var(--cr-button-icon-size-sm);
  aspect-ratio: 1/1;
  margin-block: -0.25rem;
}

.menu-item {
  display: flex;
  align-items: center !important;
  justify-content: space-between;
  min-block-size: var(--cr-size-8);
  text-align: start;
}

.stack-nav a:focus {
  outline: none;
}

.stack-nav.visible-focus a:focus {
  background-color: var(--cr-color-neutral-bg-1);
}

.empty-state {
  display: grid;
  justify-items: center;
  justify-content: center;
  gap: 1vh;
  padding: var(--cr-size-base);
}

.empty-state__hero, .empty-state__hero svg {
  max-inline-size: var(--cr-button-icon-size-lg);
  max-block-size: var(--cr-button-icon-size-lg);
}

.eyebrow {
  line-height: 1;
  font-size: var(--cr-font-size-0);
  color: var(--cr-color-neutral-text-subtle);
  font-weight: var(--cr-font-weight-500);
}

.eyebrow + :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, .stack-nav) {
  --cr-flow-space: .75rem;
}

.drop-zone {
  padding: var(--cr-size-base) var(--cr-size-wide);
  position: relative;
  background: var(--cr-color-neutral-bg-0);
  appearance: none;
  border-radius: var(--cr-border-radius-base);
  border: var(--cr-border-size-med) var(--cr-border-style-dashed) var(--cr-color-neutral-border-1);
}
.drop-zone.active {
  border: var(--cr-border-size-med) var(--cr-border-style-solid) var(--cr-color-brand);
}

input[type=file][data-type=drag-drop] {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  outline: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 50;
}

.page-footer-actions {
  position: fixed;
  bottom: 0;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: var(--cr-color-neutral-bg-0);
  inline-size: 100%;
  box-shadow: var(--cr-shadow-3);
}

.headline {
  --cr-flow-space: 1rem;
}
.headline p {
  color: var(--cr-color-neutral-text-subtle);
}

.headline__title {
  font-size: var(--cr-font-size-5);
}

.headline__action {
  --cr-flow-space: var(--cr-size-base);
}
.headline__action :link,
.headline__action :visited {
  color: var(--cr-color-neutral-text-1);
}

hr[data-label] {
  border: 0;
  position: relative;
  text-align: center;
  background-color: inherit;
}

hr[data-label]::before {
  content: "";
  background-color: var(--cr-color-neutral-border-1);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}

hr[data-label]::after {
  content: attr(data-label);
  background-color: inherit;
  position: relative;
  padding: 0 1rem;
  color: var(--cr-color-neutral-text-subtle);
}

svg.icon {
  max-block-size: 1.5ch;
  max-inline-size: 1.5ch;
  display: flex;
}

.icon[data-type=bg],
.icon.--bg {
  --color-icon-bg: var(--cr-color-neutral-bg-2);
  --color-icon-text: var(--cr-color-neutral-text);
  background-color: var(--color-icon-bg);
  padding: 0.25ch;
  border-radius: var(--cr-border-radius-1);
  max-inline-size: 2ch;
  max-block-size: 2ch;
  color: var(--color-icon-text);
  fill: var(--color-icon-text);
  aspect-ratio: 1/1;
}

.icon[data-type=bg-informative],
.icon.--bg-informative {
  --color-icon-bg: var(--cr-color-neutral-bg-2);
  --color-icon-text: var(--cr-color-neutral-text);
  background-color: var(--color-icon-bg);
  padding: 0.25ch;
  border-radius: var(--cr-border-radius-1);
  max-inline-size: 2ch;
  max-block-size: 2ch;
  color: var(--color-icon-text);
  fill: var(--color-icon-text);
  aspect-ratio: 1/1;
  --color-icon-bg: var(--cr-color-informative-bg-1);
  --color-icon-text: var(--cr-color-informative);
}

.icon[data-type=bg-negative],
.icon.--bg-negative {
  --color-icon-bg: var(--cr-color-neutral-bg-2);
  --color-icon-text: var(--cr-color-neutral-text);
  background-color: var(--color-icon-bg);
  padding: 0.25ch;
  border-radius: var(--cr-border-radius-1);
  max-inline-size: 2ch;
  max-block-size: 2ch;
  color: var(--color-icon-text);
  fill: var(--color-icon-text);
  aspect-ratio: 1/1;
  --color-icon-bg: var(--cr-color-danger-bg-1);
  --color-icon-text: var(--cr-color-danger);
}

.icon[data-type=bg-positive],
.icon.--bg-positive {
  --color-icon-bg: var(--cr-color-neutral-bg-2);
  --color-icon-text: var(--cr-color-neutral-text);
  background-color: var(--color-icon-bg);
  padding: 0.25ch;
  border-radius: var(--cr-border-radius-1);
  max-inline-size: 2ch;
  max-block-size: 2ch;
  color: var(--color-icon-text);
  fill: var(--color-icon-text);
  aspect-ratio: 1/1;
  --color-icon-bg: var(--cr-color-success-bg-1);
  --color-icon-text: var(--cr-color-success);
}

.icon[data-type=bg-notice],
.icon.--bg-notice {
  --color-icon-bg: var(--cr-color-neutral-bg-2);
  --color-icon-text: var(--cr-color-neutral-text);
  background-color: var(--color-icon-bg);
  padding: 0.25ch;
  border-radius: var(--cr-border-radius-1);
  max-inline-size: 2ch;
  max-block-size: 2ch;
  color: var(--color-icon-text);
  fill: var(--color-icon-text);
  aspect-ratio: 1/1;
  --color-icon-bg: var(--cr-color-warning-bg-1);
  --color-icon-text: var(--cr-color-warning);
}

.label, .key {
  color: var(--cr-color-neutral-text);
}

.label + *, .key + * {
  --cr-flow-space: var(--cr-size-narrow);
}

.key\:val {
  --cr-flow-space: 0;
}

.key {
  font-weight: var(--cr-font-weight-500);
}

.ring {
  --cr-loader-size: var(--cr-button-icon-size-lg);
  --cr-loader-speed: 2s;
  block-size: var(--cr-loader-size);
  inline-size: var(--cr-loader-size);
  vertical-align: middle;
  transform-origin: center;
  animation: rotate var(--cr-loader-speed) linear infinite;
}

.ring circle {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: stretch calc(var(--cr-loader-speed) * 0.75) ease-in-out infinite;
}

.ring[data-type=static-white] {
  color: white;
}

.ring[data-size=sm] {
  --cr-loader-size: var(--cr-size-6) ;
}

.ring[data-size=lg] {
  --cr-loader-size: var(--cr-size-10) ;
}

.button > .ring {
  block-size: var(--cr-button-icon-size);
  inline-size: var(--cr-button-icon-size);
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes stretch {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dashoffset: -124px;
  }
}
.dot-pulse {
  --cr-loader-size: 40px;
  --cr-loader-speed: 1.3s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: var(--cr-loader-size);
  block-size: calc(var(--cr-loader-size) * 0.27);
}
.dot-pulse::before {
  animation: pulse var(--cr-loader-speed) ease-in-out infinite;
}
.dot-pulse::after {
  animation: pulse var(--cr-loader-speed) ease-in-out calc(var(--cr-loader-speed) * 0.25) infinite;
}

.dot-pulse__dot {
  animation: pulse var(--cr-loader-speed) ease-in-out calc(var(--cr-loader-speed) * 0.125) infinite both;
}

.dot-pulse__dot,
.dot-pulse::before,
.dot-pulse::after {
  content: "";
  display: block;
  block-size: calc(var(--cr-loader-size) * 0.18);
  inline-size: calc(var(--cr-loader-size) * 0.18);
  border-radius: 50%;
  background-color: currentColor;
  transform: scale(0);
}

@keyframes pulse {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
}
.media-object {
  --cr-cluster-vertical-alignment: flex-start;
  flex-wrap: nowrap;
  gap: var(--cr-size-fluid-narrow);
}

.meter {
  --cr-meter-track: var(--cr-color-neutral-bg-2);
  --cr-meter-track-optimum: var(--cr-color-success);
  --cr-meter-track-suboptimum: var(--cr-color-warning);
  --cr-meter-track-subsuboptimum: var(--cr-color-danger);
  --cr-meter-track-size: 1rem;
  --cr-meter: var(--cr-color-neutral-text);
  --cr-meter-radius: var(--cr-border-radius-round);
  --cr-flow-space: var(--cr-size-fluid-narrow);
  position: relative;
  inline-size: 100%;
  border-radius: var(--cr-meter-radius);
  block-size: var(--cr-meter-track-size);
  margin-block-start: var(--cr-size-1);
}
.meter:focus-visible {
  outline-color: var(--cr-meter);
  outline-offset: var(--cr-border-size-med);
}
.meter[data-size=sm] {
  --cr-meter-track-size: .5rem;
}
.meter[data-size=lg] {
  --cr-meter-track-size: 2rem;
}

.card .meter {
  inline-size: 100%;
}

.meterbar .repel {
  --cr-repel-v-align: top;
  flex-wrap: nowrap;
}
.meterbar[data-size=sm] .meter {
  --cr-meter-track-size: .5rem;
}
.meterbar[data-size=lg] .meter {
  --cr-meter-track-size: 2rem;
}

html:has(dialog[open][modal-mode=mega]) {
  overflow: hidden;
}

.modal {
  display: grid;
  color: var(--cr-color-neutral-text);
  inline-size: 100%;
  block-size: 100%;
  margin: auto;
  padding: 0;
  position: fixed;
  inset: 0;
  z-index: var(--cr-layer-important);
  overflow: hidden;
  transition: opacity var(--cr-duration-base) var(--cr-ease-3);
  place-content: center;
}
.modal::before {
  content: "";
  inline-size: 100%;
  block-size: 100%;
  position: fixed;
  inset: 0;
  background-color: var(--cr-color-black);
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
  .modal {
    animation: var(--cr-animation-scale-down) forwards;
    animation-timing-function: var(--cr-ease-squish-3);
  }
}

.dialog {
  display: flex;
  overflow: visible;
  flex-direction: column;
  position: fixed;
  top: 0;
  border: 1px solid var(--cr-color-neutral-border-1);
  border-radius: var(--cr-border-radius-base);
  max-inline-size: min(90vw, var(--cr-size-content-3));
  max-block-size: min(80vh + 2 * var(--cr-spacing-block) + 2 * var(--cr-border-size-base), 100%);
  padding: 0;
  transition: opacity var(--cr-duration-6) var(--cr-ease-3);
  z-index: var(--cr-z-index-modal);
  box-shadow: var(--cr-shadow-5);
}
.dialog:not([open]) {
  pointer-events: none;
  display: none;
}
.dialog form[method=dialog], .dialog .dialog__layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  max-block-size: 80vh;
}
.dialog form[method=dialog] > .dialog__article, .dialog .dialog__layout > .dialog__article {
  overflow-y: auto;
  max-block-size: 100%; /* safari */
  overscroll-behavior-y: contain;
  display: grid;
  justify-items: flex-start;
  z-index: var(--cr-layer-1);
  gap: var(--cr-size-base);
  padding-block: var(--cr-size-5);
  padding-inline: var(--cr-size-5);
  background-color: var(--cr-color-neutral-bg-0);
}
.dialog form[method=dialog] > .dialog__header, .dialog .dialog__layout > .dialog__header {
  display: flex;
  gap: var(--cr-gap);
  padding-block: var(--cr-size-2);
  padding-inline: var(--cr-size-5);
  border-block-end: 1px solid var(--cr-color-neutral-border-1);
  background-color: var(--cr-color-neutral-bg-0);
  flex-wrap: nowrap;
  line-height: 1.1;
}
.dialog form[method=dialog] > .dialog__header .dialog__title, .dialog .dialog__layout > .dialog__header .dialog__title {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--cr-gap-lg);
  background-color: var(--cr-color-neutral-bg-0);
}
.dialog form[method=dialog] > .dialog__header .dialog__title svg, .dialog .dialog__layout > .dialog__header .dialog__title svg {
  font-size: 1.5rem;
  color: var(--cr-color-neutral-text-subtle);
}
.dialog form[method=dialog] > .dialog__header .dialog__title .dialog__subtitle, .dialog .dialog__layout > .dialog__header .dialog__title .dialog__subtitle {
  color: var(--cr-color-neutral-text-subtle);
  font-size: var(--cr-font-size-1);
  font-weight: normal;
}
.dialog form[method=dialog] > .dialog__header > button, .dialog .dialog__layout > .dialog__header > button {
  margin-inline-end: -0.75rem;
}
.dialog form[method=dialog] > .dialog__footer, .dialog .dialog__layout > .dialog__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-block: var(--cr-size-5);
  padding-inline: var(--cr-size-5);
  background-color: var(--cr-color-neutral-bg-0);
}
.dialog form[method=dialog] > .dialog__footer > .dialog__menu, .dialog .dialog__layout > .dialog__footer > .dialog__menu {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--cr-gap);
  padding-inline-start: 0;
  margin-block: 0;
}
.dialog form[method=dialog] > .dialog__footer > .dialog__menu:only-child, .dialog .dialog__layout > .dialog__footer > .dialog__menu:only-child {
  margin-inline-start: auto;
}

.dialog[data-type=positive] .dialog__title svg {
  color: var(--cr-color-success) !important;
}

.dialog[data-type=informative] .dialog__title svg {
  color: var(--cr-color-informative) !important;
}

.dialog[data-type=negative] .dialog__title svg {
  color: var(--cr-color-danger) !important;
}

.dialog[data-type=notice] .dialog__title svg {
  color: var(--cr-color-warning) !important;
}

@media (prefers-reduced-motion: no-preference) {
  dialog {
    animation: var(--cr-animation-scale-up) forwards;
    animation-timing-function: var(--cr-ease-squish-3);
  }
  dialog[open] {
    animation: var(--cr-animation-slide-in-down) forwards;
  }
}
@media screen and (max-width: 600px) {
  .dialog {
    max-inline-size: unset;
    max-block-size: unset;
    inline-size: 100%;
    block-size: 100%;
  }
  .dialog form[method=dialog] {
    max-block-size: unset;
    block-size: 100%;
  }
}
.dialog[data-bg=gray] .dialog__article {
  background-color: var(--cr-color-neutral-bg-0) !important;
}

dialog {
  color: var(--cr-color-neutral-text);
}

dialog::backdrop {
  z-index: var(--cr-z-index-backdrop);
  background-color: black;
  opacity: 0.5;
  border-radius: 0;
}

.notification {
  --notification-icon-color: inherit;
  display: flex;
  align-items: center;
  padding: var(--cr-size-2) var(--cr-size-3);
  gap: 0 var(--cr-size-base);
  border-radius: var(--cr-border-radius-base);
  background-color: var(--cr-color-neutral-bg-2);
  color: var(--cr-color-neutral-text);
  border: 1px solid var(--cr-color-neutral-border-1);
}
.notification svg, .notification .icon {
  color: var(--notification-icon-color);
  font-size: var(--cr-font-size-1);
}

.notification[data-type=informative] {
  --notification-icon-color: var(--cr-color-informative);
  border-color: var(--cr-color-informative-border);
  background-color: var(--cr-color-informative-bg-1);
}

.notification[data-type=positive] {
  --notification-icon-color: var(--cr-color-success);
  border-color: var(--cr-color-success-border);
  background-color: var(--cr-color-success-bg-1);
}

.notification[data-type=notice] {
  --notification-icon-color: var(--cr-color-warning);
  border-color: var(--cr-color-warning-border);
  background-color: var(--cr-color-warning-bg-1);
}

.notification[data-type=negative] {
  --notification-icon-color: var(--cr-color-danger);
  border-color: var(--cr-color-danger-border);
  background-color: var(--cr-color-danger-bg-1);
}

.notification {
  --cr-flow-space: var(--cr-size-narrow);
  line-height: var(--cr-font-lineheight-2);
  flex: 1;
}

.notification.cluster {
  --cr-gutter: var(--cr-size-base);
  flex-wrap: nowrap;
}

.notification.items-start svg, .notification.items-start .icon {
  margin-block-start: 0.25rem;
}

@media print {
  .notification {
    display: none !important;
  }
}
.offcanvas {
  position: fixed;
  background-color: var(--cr-color-neutral-bg-0);
  overflow: auto;
  z-index: var(--cr-z-index-offcanvas);
}
@media (prefers-reduced-motion: no-preference) {
  .offcanvas {
    animation-timing-function: var(--cr-ease-squish-5);
    animation-duration: var(--cr-duration-base);
  }
}
.offcanvas-top, .offcanvas-block-start {
  inset-block-start: 0;
  inset-inline-end: 0;
  inset-inline-start: 0;
  inline-size: 100vw;
}
@media (prefers-reduced-motion: no-preference) {
  .offcanvas-top, .offcanvas-block-start {
    animation: var(--cr-animation-slide-in-down);
  }
}
.offcanvas-right, .offcanvas-inline-end {
  inset-block-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  block-size: 100vh;
}
@media (prefers-reduced-motion: no-preference) {
  .offcanvas-right, .offcanvas-inline-end {
    animation: var(--cr-animation-slide-in-left);
  }
}
.offcanvas-bottom, .offcanvas-block-end {
  inset-inline-end: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100vw;
}
@media (prefers-reduced-motion: no-preference) {
  .offcanvas-bottom, .offcanvas-block-end {
    animation: var(--cr-animation-slide-in-bottom);
  }
}
.offcanvas-left, .offcanvas-inline-start {
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  block-size: 100vh;
}
@media (prefers-reduced-motion: no-preference) {
  .offcanvas-left, .offcanvas-inline-start {
    animation: var(--cr-animation-slide-in-right);
  }
}

.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--cr-z-index-backdrop);
  background-color: rgba(0, 0, 0, 0.5);
}
.offcanvas-backdrop[data-type=clear] {
  background-color: transparent;
}

@media (min-width: 768px) {
  .sm\:offcanvas-override {
    box-shadow: none !important;
    overflow: unset !important;
    position: unset !important;
    z-index: unset !important;
  }
}
@media (min-width: 1024px) {
  .lg\:offcanvas-override,
  .md\:offcanvas-override {
    box-shadow: none !important;
    overflow: unset !important;
    position: unset !important;
    z-index: unset !important;
  }
}
.page-header[data-type=float] .page-header__title {
  float: left;
  padding-inline-end: 1rem;
  min-block-size: 3rem;
  margin-block-end: 1rem;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--cr-gap);
  justify-content: flex-start;
  align-items: center;
}
.page-header[data-type=float] .page-header__actions {
  float: right;
  padding-inline-start: 1rem;
  min-block-size: 3rem;
  margin-block-end: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cr-gap);
}
.page-header[data-type=float] .page-header__info {
  inline-size: fit-content;
  margin-inline: auto;
  margin-block-end: 1rem;
  margin-block-start: 0;
}

.page-header:not([data-type=float]) {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.page-header:not([data-type=float]) .page-header__title {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--cr-gap);
  justify-content: flex-start;
  align-items: center;
}
.page-header:not([data-type=float]) .page-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cr-gap);
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--cr-gap);
  flex-wrap: wrap;
}
.pagination > *::after {
  content: "•";
  color: var(--cr-color-neutral-disabled);
  font-size: var(--cr-font-size-1);
  margin-inline: 0.25rem;
}
.pagination > :last-child::after {
  content: "";
  padding-inline: 0;
}

.pagination__rows-selector {
  display: flex;
  align-items: center;
  gap: var(--cr-gap);
}
.pagination__rows-selector label {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: var(--cr-font-size-0);
  color: var(--cr-color-neutral-text-subtle);
}

.pagination__current-page {
  white-space: nowrap;
  color: var(--cr-color-neutral-text-subtle);
  font-size: var(--cr-font-size-0);
}
.pagination__current-page::after {
  margin-inline: 0.75rem -0.5rem;
}

.pagination__page-buttons {
  display: flex;
  gap: 0;
}

.pagination__container {
  container-type: inline-size;
  container-name: pagination__container;
}

@container pagination__container (max-inline-size: 31rem) {
  .pagination__rows-selector {
    display: none;
  }
  .pagination__page-buttons button:first-child, .pagination__page-buttons button:last-child {
    display: none;
  }
}
.password-toggle {
  position: relative;
  gap: 0;
}
.password-toggle input[type=password] {
  padding-inline-end: calc(var(--cr-button-input-icon-size) + var(--cr-input-padding));
}

.password-toggle__label {
  max-inline-size: var(--cr-size-15);
}

.password-toggle__control {
  position: relative;
  border: none;
  cursor: pointer;
  margin: 0px;
  background-size: cover;
  flex: none;
  transform-style: preserve-3d;
  block-size: var(--cr-button-input-icon-size);
  background-color: transparent;
  color: var(--cr-color-neutral-text);
  background-repeat: no-repeat;
  background-size: var(--cr-size-base);
  background-position: left 0 top 50%;
  padding-inline-start: var(--cr-size-wide);
  font-size: 0.9rem;
}
.password-toggle__control.is-shown {
  background-image: var(--cr-bg-hide-password);
}
.password-toggle__control.is-hidden {
  background-image: var(--cr-bg-show-password);
}

:is(:dir(rtl), [dir=rtl]) .password-toggle__control {
  background-position: right 0 top 50%;
}

.popover {
  display: none;
  border: 1px solid var(--cr-color-neutral-border-1);
  border-radius: var(--cr-border-radius-2);
  padding: var(--cr-size-base);
  background-color: var(--cr-color-neutral-bg-0);
  box-shadow: var(--cr-shadow-4);
  position: absolute;
  min-width: 30ch;
  z-index: var(--cr-layer-important);
}
.popover.is-open {
  display: block;
}
.popover.below-arrow:after {
  content: "";
  position: absolute;
  top: -15px;
  left: 24px;
  border-style: solid;
  border-width: 0 15px 15px;
  border-color: white transparent;
  display: block;
  width: 0;
  z-index: 1;
}
.popover.below-arrow:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 22px;
  border-style: solid;
  border-width: 0 17px 17px;
  border-color: var(--cr-color-neutral-border-1) transparent;
  display: block;
  width: 0;
  z-index: 0;
}

.popover__container {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .popover.is-open {
    animation: slide-in-down-popover var(--cr-duration-1) var(--cr-ease-out-1) forwards;
  }
}
.cr-popover {
  position: absolute !important;
  margin: 0;
  padding: 0;
  max-height: calc(100dvh - 10px);
  overflow-y: auto;
}

.cr-popover__container {
  display: inline-block;
}

.progress {
  --cr-progress-track: var(--cr-color-neutral-bg-2);
  --cr-progress-track-size: min(10px, 1ex);
  --cr-progress: var(--cr-color-neutral-text);
  --cr-progress-radius: var(--cr-border-radius-round);
  --cr-progress-indeterminate-track: linear-gradient(to right,
    var(--cr-progress-track) 45%,
    var(--cr-progress) 0%,
    var(--cr-progress) 55%,
    var(--cr-progress-track) 0%
  );
  --cr-progress-indeterminate-track-size: 225% 100%;
  --cr-progress-indeterminate-track-animation: progress-loading 2s infinite ease;
  --cr-flow-space: var(--cr-size-fluid-narrow);
  appearance: none;
  border: none;
  position: relative;
  block-size: var(--cr-progress-track-size);
  border-radius: var(--cr-progress-radius);
  overflow: hidden;
}
.progress:focus-visible {
  outline-color: var(--cr-progress);
  outline-offset: var(--cr-border-size-med);
}
.progress[value]::-webkit-progress-bar {
  background-color: var(--cr-progress-track);
}
.progress[value]::-webkit-progress-value {
  background-color: var(--cr-progress);
  transition: inline-size var(--cr-duration-base) ease-out;
}
.progress[value]::-moz-progress-bar {
  background-color: var(--cr-progress);
}
.progress:not(:indeterminate) {
  inline-size: 100%;
}
.progress:indeterminate::after {
  content: "";
  inset: 0;
  position: absolute;
  background: var(--cr-progress-indeterminate-track);
  background-size: var(--cr-progress-indeterminate-track-size);
  background-position: right;
  animation: var(--cr-progress-indeterminate-track-animation);
}
.progress:indeterminate::-webkit-progress-bar {
  background: var(--cr-progress-indeterminate-track);
  background-size: var(--cr-progress-indeterminate-track-size);
  background-position: right;
  animation: var(--cr-progress-indeterminate-track-animation);
}
.progress:indeterminate::-moz-progress-bar {
  background: var(--cr-progress-indeterminate-track);
  background-size: var(--cr-progress-indeterminate-track-size);
  background-position: right;
  animation: var(--cr-progress-indeterminate-track-animation);
}
.progress:not([max])[value="1"]::before, .progress[max="100"][value="100"]::before {
  content: "✓";
  position: absolute;
  inset-block: 0;
  inset-inline: auto 0;
  display: flex;
  align-items: center;
  padding-inline-end: max(var(--cr-progress-track-size) / 4, 3px);
  color: var(--cr-color-neutral-text-white-static);
  font-size: calc(var(--cr-progress-track-size) / 1.25);
}
.progress[data-type=primary] {
  --cr-progress: var(--cr-color-brand-accent);
}
.progress[data-type=static-white] {
  --cr-progress: var(--cr-color-neutral-text-white-static);
  --cr-progress-track: rgba(255, 255, 255, 0.15);
}
.progress[data-size=sm] {
  --cr-progress-track-size: min(4px, 1ex);
}
.progress[data-size=lg] {
  --cr-progress-track-size: min(16px, 3ex);
}

.progress-label::after {
  content: "...";
}

@keyframes progress-loading {
  50% {
    background-position: left;
  }
}
.card progress {
  inline-size: 100%;
}

.progressbar .repel {
  --cr-repel-v-align: top;
  flex-wrap: nowrap;
}
.progressbar[data-size=sm] progress {
  --cr-progress-track-size: min(4px, 1ex);
}
.progressbar[data-size=lg] progress {
  --cr-progress-track-size: min(16px, 3ex);
}

:root {
  --header-height: 50px;
  --side-navigation-inline-size-open: 15rem;
  --side-navigation-inline-size-closed: 3rem;
}

.side-navigation {
  --cr-side-navigation-border-color-active: var(--cr-color-brand-plum);
  --cr-side-navigation-border-size-active: 3px;
  --cr-side-navigation-item-block-size: 3rem;
  --cr-side-navigation-item-block-padding: .5rem;
  --cr-side-navigation-item-font-color: var(--cr-color-neutral-text);
  inline-size: var(--side-navigation-inline-size-open);
  block-size: calc(100% - var(--header-height));
  font-size: var(--cr-font-size-1);
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: space-between;
  overflow-y: auto;
  background-color: var(--cr-color-neutral-bg-0);
  transition: inline-size 0.15s ease-out;
  box-shadow: var(--cr-shadow-3);
  grid-area: navbar;
  position: fixed;
  top: var(--header-height);
}

.side-navigation__nav {
  inline-size: 100%;
  flex-grow: 1;
}

.side-navigation__ul,
.side-navigation__li {
  list-style: none;
  margin: 0;
  padding-inline: 0;
}

.side-navigation__li a, .side-navigation__li .side-navigation__item {
  display: flex;
  padding-inline: 1rem 0;
  padding-block: var(--cr-side-navigation-item-block-padding);
  min-block-size: var(--cr-side-navigation-item-block-size);
  color: var(--cr-side-navigation-item-font-color);
  flex-wrap: nowrap;
  border: none;
  inline-size: 100%;
  background-color: transparent;
  text-align: start !important;
  align-items: center;
}
.side-navigation__li a:hover, .side-navigation__li .side-navigation__item:hover {
  background: var(--cr-color-neutral-bg-1);
}
.side-navigation__li a:active, .side-navigation__li .side-navigation__item:active {
  background: var(--cr-color-neutral-bg-2);
  filter: none;
}
.side-navigation__li a.--selected, .side-navigation__li .side-navigation__item.--selected {
  background: var(--cr-color-neutral-bg-2);
  border-inline-start: var(--cr-side-navigation-border-size-active) solid var(--cr-color-brand);
  padding-inline-start: calc(1rem - var(--cr-side-navigation-border-size-active));
}
.side-navigation__li ul {
  padding-inline-start: 2rem;
}
.side-navigation__li ul a:hover, .side-navigation__li ul .side-nagivation__item:hover {
  color: var(--cr-color-neutral-text);
}
.side-navigation__li .side-navigation__chevron svg {
  font-size: 0.75rem;
  color: var(--cr-color-neutral-text-subtle);
  transform: rotate(90deg);
}
.side-navigation__li:has(ul) {
  border-block: 1px solid var(--cr-color-neutral-border-1);
}

.side-navigation__item-name {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.side-navigation__chevron {
  justify-self: flex-end;
  padding-inline-end: var(--cr-gap);
}
.side-navigation__chevron svg {
  font-size: var(--cr-font-size-fluid-0);
}

.side-navigation__toggle-button {
  border: none;
  border-block-start: 1px solid var(--cr-color-neutral-border-1);
  background-color: inherit;
  display: flex;
  min-block-size: var(--cr-side-navigation-item-block-size);
  padding-inline: 1rem 0;
  color: var(--cr-side-navigation-item-font-color);
  align-items: center;
  gap: var(--cr-gap);
  white-space: nowrap;
  font-size: var(--cr-font-size-1);
  text-align: start;
}
.side-navigation__toggle-button:hover {
  background-color: var(--cr-color-neutral-bg-1);
}

.side-navigation__li.--close-submenu:has(ul) {
  border-block: 1px solid transparent;
}
.side-navigation__li.--close-submenu .side-navigation__chevron svg {
  transform: rotate(0deg);
}
.side-navigation__li.--close-submenu .side-navigation__ul {
  display: none;
}

.side-navigation.--close-menu {
  inline-size: var(--side-navigation-inline-size-closed);
  overflow-x: hidden;
  overflow-y: auto;
}
.side-navigation.--close-menu .side-navigation__item-name {
  display: none;
}
.side-navigation.--close-menu .side-navigation__chevron {
  margin-inline-start: var(--cr-size-000);
}
.side-navigation.--close-menu .side-navigation__chevron svg {
  font-size: 0.6rem;
}
.side-navigation.--close-menu .side-navigation__li ul {
  padding-inline-start: 0;
}
.side-navigation.--close-menu .side-navigation__toggle-button .side-navigation__icon svg {
  transform: rotate(180deg);
}
.side-navigation.--close-menu .side-navigation__toggle-button .side-navigation__item-name {
  display: none;
}

.side-navigation__wrapper {
  display: grid;
  grid-template-areas: "header header" "navbar main";
  grid-template-rows: var(--header-height) calc(100% - var(--header-height));
  grid-template-columns: auto calc(100% - var(--side-navigation-inline-size-open));
  overflow: auto;
  transition: 0.15s ease-out;
  gap: 0;
}

.side-navigation__wrapper.--close-menu {
  grid-template-columns: auto calc(100% - var(--side-navigation-inline-size-closed));
}

.site-footer {
  padding: var(--cr-size-base);
  font-size: 0.9em;
  gap: 0;
  background-color: var(--cr-color-neutral-bg-0);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}

.site-footer-nav {
  padding: 0;
}

.site-footer__meta {
  color: var(--cr-color-neutral-text-subtle);
  font-size: 0.75em;
  margin: 0;
}

.site-footer__list[data-type=pipes] {
  padding: 0;
}
.site-footer__list[data-type=pipes] > li {
  display: inline;
  white-space: nowrap;
}
.site-footer__list[data-type=pipes] > li::after {
  content: " ";
  word-spacing: 1.1em;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' xml:space='preserve'%3E%3Cpath fill='%239BA1A6' d='M-27.8 1.2h16v17.4h-16z'/%3E%3Cpath fill='none' stroke='%239BA1A6' stroke-miterlimit='10' d='M9 0v18'/%3E%3C/svg%3E");
}

.site-head {
  --cr-header-min-height: var(--cr-size-10);
  position: sticky;
  inset-block-start: 0;
  display: flex;
  flex-direction: column;
  z-index: var(--cr-layer-3);
  inline-size: 100%;
  max-block-size: 100vh;
  backdrop-filter: blur(10px);
}
.site-head::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0.8;
  transform: translateZ(0);
  pointer-events: none;
  background: var(--cr-color-neutral-bg-0);
  border-block-end: 1px solid var(--cr-color-neutral-border-1);
}
.site-head__inner {
  min-block-size: var(--cr-header-min-height);
  padding-block: var(--cr-size-fluid-narrow);
  padding-inline: var(--cr-size-fluid-base);
}

.site-head__nav {
  gap: 0;
}

.site-head__link {
  display: inline-block;
  padding-inline: var(--cr-size-4);
  text-decoration: none;
  color: var(--cr-color-neutral-text);
}

.actions-group {
  --cr-gap: 0;
  --cr-cluster-horizontal-alignment: flex-end;
  flex-wrap: nowrap;
}

.skip-link {
  z-index: var(--cr-layer-10);
  inline-size: max-content;
  inset: var(--cr-size-fluid-narrow) auto auto var(--cr-size-fluid-base);
  flex: none;
}
input[type=range] {
  --cr-thumb-size: 1.5rem;
  --cr-thumb-offset: -.5rem;
  --cr-thumb-highlight-size: 0px;
  --cr-thumb: var(--cr-color-neutral-bg-0);
  --cr-thumb-highlight: hsl(0 0% 0% / 10%);
  --cr-thumb-transition-duration: var(--cr-duration-base);
  --cr-thumb-fill-color: var(--cr-color-primary);
  --cr-track-height: .5rem;
  --cr-track-fill: 0%;
  display: block;
  inline-size: 100%;
  margin: 0.25rem 0;
  appearance: none;
  background: transparent;
  outline-offset: 5px;
}
@media (prefers-color-scheme: dark) {
  input[type=range] {
    --cr-thumb-highlight: hsl(0 0% 100% / 25%);
  }
}
@media (prefers-color-scheme: light) {
  input[type=range] {
    --cr-thumb-highlight: hsl(0 0% 0% / 10%);
  }
}
input[type=range]::-webkit-slider-runnable-track {
  appearance: none;
  block-size: var(--cr-track-height);
  border-radius: var(--cr-border-radius-round);
  background: linear-gradient(to right, transparent var(--cr-track-fill), var(--cr-color-stroke) 0%), var(--cr-thumb-fill-color) fixed;
}
input[type=range]::-moz-range-track {
  appearance: none;
  block-size: var(--cr-track-height);
  border-radius: var(--cr-border-radius-round);
  background: linear-gradient(to right, transparent var(--cr-track-fill), var(--cr-color-stroke) 0%), var(--cr-thumb) fixed;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  cursor: ew-resize;
  border: var(--cr-border-size-med) var(--cr-border-style-base) var(--cr-thumb-fill-color);
  block-size: var(--cr-thumb-size);
  inline-size: var(--cr-thumb-size);
  margin-block-start: var(--cr-thumb-offset);
  border-radius: var(--cr-border-radius-round);
  background: var(--cr-thumb) fixed;
}
input[type=range]::-moz-range-thumb {
  appearance: none;
  cursor: ew-resize;
  border: var(--cr-border-size-med) var(--cr-border-style-base) var(--cr-color-neutral-bg-0);
  block-size: var(--cr-thumb-size);
  inline-size: var(--cr-thumb-size);
  margin-block-start: var(--cr-thumb-offset);
  border-radius: var(--cr-border-radius-round);
  background: var(--cr-thumb-fill-color) fixed;
  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight);
}
@media (prefers-reduced-motion: no-preference) {
  input[type=range]::-moz-range-thumb {
    transition: box-shadow var(--cr-thumb-transition-duration) ease;
  }
}
input[type=range]:is(:hover, :active) {
  --cr-thumb-fill-color: var(--cr-color-primary);
}
input[type=range]:focus-visible::-webkit-slider-thumb {
  outline: var(--cr-border-size-med) var(--cr-border-style-base) var(--cr-thumb);
  outline-offset: var(--cr-border-size-med);
}
input[type=range]:focus-visible::-moz-range-thumb {
  outline: var(--cr-border-size-med) var(--cr-border-style-base) var(--cr-thumb);
  outline-offset: var(--cr-border-size-med);
}
input[type=range]:is([disabled], :disabled, .disabled) {
  filter: invert(0.2);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.slider[data-type=inline] {
  --cr-cluster-horizontal-alignment: flex-start;
  --cr-cluster-vertical-alignment: center;
  --cr-gap: var(--cr-size-wide);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cr-gap, var(--cr-size-wide, 1.5rem));
  justify-content: var(--cr-cluster-horizontal-alignment, flex-start);
  align-items: var(--cr-cluster-vertical-alignment, center);
}
.slider[data-type=inline] label {
  margin-block-start: unset;
  margin-inline-end: unset;
}
.slider input[type=number] {
  display: inline-block;
  inline-size: 3.5rem;
  text-align: end;
}
.slider .repel {
  --cr-repel-v-align: top;
  flex-wrap: nowrap;
}

.stack-nav,
.stack-nav__list {
  padding: 0;
  list-style: none;
}

.stack-nav {
  gap: var(--cr-size-base);
}
.stack-nav a {
  flex-wrap: nowrap;
  align-items: flex-start;
  line-height: 1.2;
  padding: 0.75em var(--cr-size-base);
  text-decoration: none;
  position: relative;
  cursor: pointer;
  color: var(--cr-color-neutral-text);
  transition: all var(--cr-duration-base) ease;
}
.stack-nav a:not([class]) {
  display: block;
}
.stack-nav a[aria-expanded=true] {
  background-color: var(--cr-color-neutral-bg-1);
}
.stack-nav a[aria-expanded=true] .stack-nav__icon {
  color: var(--cr-color-brand);
}
.stack-nav a:not(ul ul a):hover,
.stack-nav a[aria-selected=true] {
  background-color: var(--cr-color-neutral-bg-1);
}
.stack-nav svg {
  flex: none;
}
.stack-nav a[aria-current=page] {
  color: var(--cr-color-brand);
}
.stack-nav a[aria-current=page] svg {
  color: currentColor;
}
.stack-nav .cluster {
  --cr-gap: 1rem;
  flex-wrap: nowrap;
}
.stack-nav .cluster:last-of-type {
  --cr-gap: 0.5rem 0.8rem;
}

.stack-nav__icon {
  flex: none;
  color: var(--cr-color-neutral-text-subtle);
  inline-size: var(--cr-icon-size-base);
}
[aria-current=page] .stack-nav__icon {
  color: currentColor;
}

.stack-nav__title {
  padding-inline-end: var(--cr-icon-size-base);
}

.stack-nav__heading {
  padding-inline: var(--cr-size-base);
  margin-block-start: var(--cr-size-fluid-narrow);
}

.stats {
  --cr-auto-grid-placement: auto-fit;
  --cr-auto-grid-min-item-size: 10rem;
  --cr-auto-grid-gutter: 0;
  padding: 0;
  gap: var(--cr-size-fluid-narrow, var(--cr-size-narrow, 1rem));
}
.stats__item {
  --cr-flow-space: 1rem;
  padding: 1.5em;
  text-align: start;
  list-style: none;
  background-color: var(--cr-color-neutral-bg-0);
  line-height: 1.2;
  font-size: var(--cr-font-size-fluid-0);
  color: var(--cr-color-neutral-text-subtle);
  border-radius: var(--cr-border-radius-base);
  border: 1px solid var(--cr-color-neutral-border-1);
  border-block-start-color: transparent;
  border-block-start-width: var(--cr-border-size-thick);
  border-block-start: var(--cr-border-size-thick) var(--cr-border-style-base) transparent;
}
.stats__item[data-type=positive] {
  border-block-start-color: var(--cr-color-success);
}
.stats__item[data-type=negative] {
  border-block-start-color: var(--cr-color-danger);
}
.stats__item[data-type=notice] {
  border-block-start-color: var(--cr-color-warning);
}
.stats__item[data-type=informative] {
  border-block-start-color: var(--cr-color-informative);
}
.stats__item[data-type=primary] {
  border-block-start-color: var(--cr-color-brand);
}
.stats__item[data-type=accent] {
  border-block-start-color: var(--cr-color-brand-accent);
}
.stats__item[data-type=neutral] {
  border-block-start-color: var(--cr-color-neutral-bg-0);
}
.stats__figure {
  font-size: var(--cr-font-size-fluid-3);
  color: var(--cr-color-neutral-text);
}

.status-light {
  display: inline-flex;
  gap: var(--cr-size-2);
  align-items: center;
  inline-size: fit-content;
  min-block-size: var(--cr-font-size-4);
  border-radius: var(--cr-border-radius-2);
  padding-inline: var(--cr-size-1);
}

.status-light[data-type=neutral] .icon, .status-light[data-type=neutral] svg,
.status-light[data-type=neutral-subtle] .icon,
.status-light[data-type=neutral-subtle] svg,
.status-light[data-type=neutral-solid] .icon,
.status-light[data-type=neutral-solid] svg {
  color: var(--cr-color-neutral-text-subtle);
}

.status-light[data-type=neutral-solid] {
  background: var(--cr-color-neutral-bg-2);
}

.status-light[data-type=neutral] {
  background: var(--cr-color-neutral-bg-2);
}

.status-light[data-type=informative] .icon, .status-light[data-type=informative] svg,
.status-light[data-type=informative-subtle] .icon,
.status-light[data-type=informative-subtle] svg {
  color: var(--cr-color-informative);
}

.status-light[data-type=informative] {
  background: var(--cr-color-informative-bg-2);
}

.status-light[data-type=negative] .icon, .status-light[data-type=negative] svg,
.status-light[data-type=negative-subtle] .icon,
.status-light[data-type=negative-subtle] svg {
  color: var(--cr-color-danger);
}

.status-light[data-type=negative] {
  background: var(--cr-color-danger-bg-2);
}

.status-light[data-type=positive] .icon, .status-light[data-type=positive] svg,
.status-light[data-type=positive-subtle] .icon,
.status-light[data-type=positive-subtle] svg {
  color: var(--cr-color-success);
}

.status-light[data-type=positive] {
  background: var(--cr-color-success-bg-2);
}

.status-light[data-type=notice] .icon, .status-light[data-type=notice] svg,
.status-light[data-type=notice-subtle] .icon,
.status-light[data-type=notice-subtle] svg {
  color: var(--cr-color-warning);
}

.status-light[data-type=notice] {
  background: var(--cr-color-warning-bg-2);
}
.status-light[data-type=notice] .icon, .status-light[data-type=notice] svg {
  color: var(--cr-color-warning);
}

button.status-light {
  border: none;
}
button.status-light .action-icon svg,
button.status-light .action-icon .icon {
  color: var(--cr-color-text-1);
}
button.status-light[data-type=neutral]:hover, button.status-light[data-type=neutral-subtle]:hover, button.status-light[data-type=neutral-solid]:hover {
  background-color: var(--cr-color-neutral-bg-1);
}
button.status-light[data-type=neutral]:active, button.status-light[data-type=neutral-subtle]:active, button.status-light[data-type=neutral-solid]:active {
  background-color: var(--cr-color-neutral-bg-2);
}
button.status-light[data-type=informative]:hover, button.status-light[data-type=informative-solid]:hover {
  background-color: var(--cr-color-informative-bg-1);
}
button.status-light[data-type=informative]:active, button.status-light[data-type=informative-solid]:active {
  background-color: var(--cr-color-informative-bg-2);
}
button.status-light[data-type=negative]:hover, button.status-light[data-type=negative-solid]:hover {
  background-color: var(--cr-color-danger-bg-1);
}
button.status-light[data-type=negative]:active, button.status-light[data-type=negative-solid]:active {
  background-color: var(--cr-color-danger-bg-2);
}
button.status-light[data-type=notice]:hover, button.status-light[data-type=notice-solid]:hover {
  background-color: var(--cr-color-warning-bg-1);
}
button.status-light[data-type=notice]:active, button.status-light[data-type=notice-solid]:active {
  background-color: var(--cr-color-warning-bg-2);
}
button.status-light[data-type=positive]:hover, button.status-light[data-type=positice-solid]:hover {
  background-color: var(--cr-color-success-bg-1);
}
button.status-light[data-type=positive]:active, button.status-light[data-type=positice-solid]:active {
  background-color: var(--cr-color-success-bg-2);
}

.steps {
  --cr-step-text-color: var(--cr-color-neutral-text-subtle);
  --cr-step-text-color-active: var(--cr-color-neutral-text);
  --cr-step-text-color-done: var(--cr-color-neutral-text);
  --cr-step-text-color-disabled: var(--cr-color-neutral-text-subtle);
  --cr-step-color-hover: var(--cr-color-neutral-bg-1);
  --cr-step-color-active: var(--cr-color-neutral-bg-2);
  --cr-step-counter-text-color: var(--cr-color-neutral-text-invert);
  --cr-step-counter-text-color-done: var(--cr-color-neutral-text-invert);
  --cr-step-counter-text-color-active: var(--cr-color-neutral-text-invert);
  --cr-step-counter-color: var(--cr-color-neutral-text-subtle);
  --cr-step-counter-color-active: var(--cr-color-brand);
  --cr-step-counter-color-done: var(--cr-color-success);
  --cr-step-counter-color-incomplete: var(--cr-color-danger);
}

.steps {
  user-select: none;
  list-style: none;
  counter-reset: steps;
  padding-inline-start: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--cr-cluster-horizontal-alignment, flex-start);
}
.steps[data-orientation=vertical] {
  flex-direction: column;
}

.steps__item {
  cursor: pointer;
  counter-increment: steps;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  transition: 0.25s ease;
}
.steps__item:hover {
  background: var(--cr-step-color-hover);
}
.steps__item a:hover {
  color: var(--cr-step-text-color);
}
.steps__item[disabled] {
  cursor: not-allowed;
  background: none;
}
.steps__item[disabled] .steps__link {
  color: var(--cr-color-neutral-disabled);
  cursor: not-allowed;
}
.steps__item[disabled] .steps__link::before {
  background: var(--cr-color-neutral-disabled);
}

.steps__link {
  display: flex;
  align-items: center;
  text-align: start;
  text-decoration: none;
  color: var(--cr-step-text-color);
}
.steps__link::before {
  content: counter(steps);
  display: inline-block;
  height: var(--cr-size-6);
  width: var(--cr-size-6);
  min-width: var(--cr-size-6);
  text-align: center;
  line-height: 2rem;
  margin-inline-end: var(--cr-gap);
  border-radius: var(--cr-border-radius-round);
  background: var(--cr-step-counter-color);
  color: var(--cr-step-counter-text-color);
}

.steps__item--done .steps__link,
.steps__item[data-status=done] .steps__link {
  color: var(--cr-step-text-color-done);
}
.steps__item--done .steps__link:hover,
.steps__item[data-status=done] .steps__link:hover {
  color: var(--cr-step-text-color-done);
}
.steps__item--done .steps__link::before,
.steps__item[data-status=done] .steps__link::before {
  background: var(--cr-step-counter-color-done);
  content: url("data:image/svg+xml,%3Csvg width='2rem' height='2rem' viewBox='0 0 24 24' fill='none' role='img' aria-label='Check mark' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.75 12.75L10 15.25L16.25 8.75' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E ");
  line-height: 2.5rem;
}

.steps__item--done .steps__link,
.steps__item[data-status=incomplete] .steps__link {
  color: var(--cr-color-neutral-text);
}
.steps__item--done .steps__link::before,
.steps__item[data-status=incomplete] .steps__link::before {
  background: var(--cr-step-counter-color-incomplete);
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' fill='white' viewBox='0 0 128 512' %3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M64 352c17.69 0 32-14.32 32-31.1V64.01c0-17.67-14.31-32.01-32-32.01S32 46.34 32 64.01v255.1C32 337.7 46.31 352 64 352zM64 400c-22.09 0-40 17.91-40 40s17.91 39.1 40 39.1s40-17.9 40-39.1S86.09 400 64 400z'/%3E%3C/svg%3E");
  line-height: 2.2rem;
}

.steps__item--active .steps__link,
.steps__item[data-status=active] .steps__link {
  color: var(--cr-step-text-color-active);
}
.steps__item--active .steps__link:hover,
.steps__item[data-status=active] .steps__link:hover {
  color: var(--cr-step-text-color-active);
}
.steps__item--active .steps__link::before,
.steps__item[data-status=active] .steps__link::before {
  background: var(--cr-step-counter-color-active);
  color: var(--cr-step-counter-text-color-active);
}

.steps__item--active,
.steps__item[data-status=active] {
  background: var(--cr-step-color-active);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(12, minmax(0px, 1fr));
  gap: 2px;
  align-items: center;
  margin-block: var(--cr-size-fluid-base);
}

.swatch {
  background: var(--cr-color-neutral-bg-0);
  block-size: var(--cr-size-7);
  display: grid;
  place-items: center;
  inline-size: var(--cr-size-7);
}
.swatch > * {
  font-size: var(--cr-font-size-fluid-0);
}

.switch {
  --cr-thumb-size: var(--cr-size-5);
  --cr-thumb: var(--cr-color-neutral-bg-0);
  --cr-thumb-highlight: hsl(0 0% 0% / 10%);
  --cr-track-size: calc(var(--cr-thumb-size) * 2);
  --cr-track-padding: var(--cr-border-size-med);
  --cr-track-inactive: var(--cr-color-neutral-border-2);
  --cr-track-active: var(--cr-color-primary);
  --cr-track-active-disabled: var(--cr-color-primary-bg-2);
  --cr-track-hover: var(--cr-color-bg-primary-solid-hover);
  --cr-thumb-color: var(--cr-thumb);
  --cr-thumb-color-highlight: var(--cr-thumb-highlight);
  --cr-track-color-inactive: var(--cr-track-inactive);
  --cr-track-color-active: var(--cr-track-active);
  display: flex;
  align-items: center;
  gap: 1ch;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-size: var(--cr-font-size-1);
}
.switch.disabled {
  opacity: 1;
  filter: unset;
  color: var(--cr-color-neutral-text-subtle);
}
.switch > input {
  --cr-thumb-position: 0%;
  --cr-thumb-transition-duration: var(--cr-duration-base);
  padding: var(--cr-track-padding);
  background: var(--cr-track-color-inactive);
  inline-size: var(--cr-track-size);
  block-size: var(--cr-thumb-size);
  border-radius: var(--cr-track-size);
  appearance: none;
  pointer-events: none;
  touch-action: pan-y;
  border: none;
  outline-offset: var(--cr-border-size-med);
  box-sizing: content-box;
  flex-shrink: 0;
  display: grid;
  align-items: center;
  grid: [track] 1fr/[track] 1fr;
  transition: background-color var(--cr-duration-base) ease;
}
.switch > input::before {
  --cr-thumb-highlight-size: 0;
  content: "";
  cursor: pointer;
  pointer-events: auto;
  grid-area: track;
  inline-size: var(--cr-thumb-size);
  block-size: var(--cr-thumb-size);
  background: var(--cr-thumb-color);
  box-shadow: 0 0 0 var(--cr-thumb-highlight-size) var(--cr-thumb-color-highlight);
  border-radius: var(--cr-border-radius-round);
  transform: translateX(var(--cr-thumb-position));
}
@media (prefers-reduced-motion: no-preference) {
  .switch > input::before {
    transition: transform var(--cr-thumb-transition-duration) ease, box-shadow var(--cr-duration-base) ease;
  }
}
.switch > input:checked::before {
  content: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 24 24' fill='none' role='img' aria-label='Check mark' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.75 12.75L10 15.25L16.25 8.75' stroke='%23398B48' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E ");
}
.switch > input:checked {
  background: var(--cr-track-color-active);
  --cr-thumb-position: calc((var(--cr-track-size) - 100%) * var(--cr-isLTR));
}
.switch > input:checked:hover {
  background: var(--cr-track-hover);
}
.switch > input:indeterminate {
  --cr-thumb-position: calc(
    calc(calc(var(--cr-track-size) / 2) - calc(var(--cr-thumb-size) / 2))
    * var(--cr-isLTR)
  );
}
.switch > input:is([disabled], :disabled, .disabled) {
  cursor: not-allowed;
  background: var(--cr-track-active-disabled);
}
.switch > input:is([disabled], :disabled, .disabled):checked {
  background: var(--cr-track-active-disabled);
}
.switch > input:is([disabled], :disabled, .disabled):checked:hover {
  background: var(--cr-track-active-disabled);
}
.switch > input:is([disabled], :disabled, .disabled):checked::before {
  content: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 24 24' fill='none' role='img' aria-label='Check mark' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.75 12.75L10 15.25L16.25 8.75' stroke='%23D0ECE9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E ");
}
.switch > input:is([disabled], :disabled, .disabled)::before {
  cursor: not-allowed;
  box-shadow: inset 0 0 0 var(--cr-border-size-med) --var(--cr-color-neutral-bg-1);
  background: var(--cr-color-neutral-bg-0);
}

@media (prefers-color-scheme: dark) {
  .switch > input:checked::before {
    content: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 24 24' fill='none' role='img' aria-label='Check mark' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.75 12.75L10 15.25L16.25 8.75' stroke='%2315A091' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E ");
  }
  .switch > input:is([disabled], .disabled):checked::before {
    content: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 24 24' fill='none' role='img' aria-label='Check mark' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.75 12.75L10 15.25L16.25 8.75' stroke='%2385CFC6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E ");
  }
}
:is(:dir(rtl), [dir=rtl]) .switch {
  --cr-isLTR: -1;
}

.table-actions {
  display: grid;
  gap: var(--cr-gap);
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "filter paginator" "tags tags";
}

.table-actions.--external-content {
  grid-template-columns: 1fr max-content 1fr;
  grid-template-areas: "external filters paginator" "tags tags tags";
}

.table-actions .external {
  grid-area: external;
}

.table-actions .filter {
  grid-area: filters;
}

.table-actions .pagination__container {
  grid-area: paginator;
}

.table-actions .pagination {
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

.table-actions .tags {
  grid-area: tags;
  margin-top: -1rem;
}

@media (max-width: 600px) {
  .table-actions {
    grid-template-columns: 1fr;
    grid-template-areas: "filter" "paginator" "tags";
  }
  .table-actions.--external-content {
    grid-template-columns: 1fr;
    grid-template-areas: "external" "filter" "paginator" "tags";
  }
  .table-actions .pagination {
    justify-content: center;
  }
  .table-actions .external {
    margin-inline: auto;
  }
}
@media (min-width: 601px) and (max-width: 1050px) {
  .table-actions.--external-content {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "external paginator" "filter tags";
  }
}
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrapper > table {
  margin: 0;
}
.table-wrapper table {
  min-inline-size: 30rem;
  margin: 0;
}
.table-wrapper td,
.table-wrapper th {
  min-inline-size: 8rem;
}
.table-wrapper [colspan],
.table-wrapper [rowspan] {
  min-inline-size: 15rem;
}

table {
  --cr-table-header-bg-color: var(--cr-color-neutral-bg-1);
  --cr-table-row-bg-color-hover: var(--cr-color-neutral-bg-2) ;
  --cr-table-row-bg-color-active: var(--cr-color-brand-bg-1) ;
  --cr-table-row-bg-color-active-hover: var(--cr-color-brand-bg-2) ;
  --cr-table-row-bg-color-striped: var(--cr-color-neutral-bg-1);
}

table,
.table,
.table-borderless,
.table-compact,
.table-fixed,
.table-striped,
.table-sortable {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 50%;
  margin-block-end: var(--cr-flow-space);
  border-collapse: collapse;
  border-spacing: 0;
  display: table;
  height: 1px;
}
table > *,
.table > *,
.table-borderless > *,
.table-compact > *,
.table-fixed > *,
.table-striped > *,
.table-sortable > * {
  inline-size: 100%;
}
table:not(.table-borderless) tr td,
.table:not(.table-borderless) tr td,
.table-borderless:not(.table-borderless) tr td,
.table-compact:not(.table-borderless) tr td,
.table-fixed:not(.table-borderless) tr td,
.table-striped:not(.table-borderless) tr td,
.table-sortable:not(.table-borderless) tr td {
  border-block-start: 1px solid var(--cr-color-neutral-border-table);
}
table th, table td,
.table th,
.table td,
.table-borderless th,
.table-borderless td,
.table-compact th,
.table-compact td,
.table-fixed th,
.table-fixed td,
.table-striped th,
.table-striped td,
.table-sortable th,
.table-sortable td {
  padding: var(--cr-size-base);
  vertical-align: top;
  text-align: left;
  border-collapse: collapse;
}
table th:has(.actions-group), table td:has(.actions-group),
.table th:has(.actions-group),
.table td:has(.actions-group),
.table-borderless th:has(.actions-group),
.table-borderless td:has(.actions-group),
.table-compact th:has(.actions-group),
.table-compact td:has(.actions-group),
.table-fixed th:has(.actions-group),
.table-fixed td:has(.actions-group),
.table-striped th:has(.actions-group),
.table-striped td:has(.actions-group),
.table-sortable th:has(.actions-group),
.table-sortable td:has(.actions-group) {
  padding: var(--cr-size-narrow);
}
table th,
.table th,
.table-borderless th,
.table-compact th,
.table-fixed th,
.table-striped th,
.table-sortable th {
  font-weight: var(--cr-font-label-semi-bold-weight);
  font-size: var(--cr-font-label-semi-bold-size);
  background-color: var(--cr-table-header-bg-color);
  vertical-align: bottom;
}

.table-compact th, .table-compact td {
  padding: 0.25rem 0.5rem;
}
.table-fixed {
  table-layout: fixed;
}
.table-striped thead,
.table-striped tbody tr:nth-child(odd) {
  background-color: var(--cr-color-neutral-bg-0);
}
.table-striped tbody tr:nth-child(even) {
  background-color: var(--cr-table-row-bg-color-striped);
}

[class*=table] .t-center {
  text-align: center !important;
}

[class*=table] .t-right,
[class*=table] .t-end {
  text-align: right !important;
}

.vertical-align-top,
[class*=table] .vertical-align-top {
  vertical-align: top;
}
.vertical-align-middle,
[class*=table] .vertical-align-middle {
  vertical-align: middle;
}
.vertical-align-bottom,
[class*=table] .vertical-align-bottom {
  vertical-align: bottom;
}

table[data-align=top] th,
table[data-align=top] td {
  vertical-align: top;
}

table[data-align=baseline] th,
table[data-align=baseline] td {
  vertical-align: top;
}

table[data-align=middle] th,
table[data-align=middle] td {
  vertical-align: middle;
}

.table-auto {
  table-layout: auto;
}

.table-fixed {
  table-layout: fixed;
}

.border-collapse {
  border-collapse: collapse;
}

.border-separate {
  border-collapse: separate;
}

table code {
  background: none;
  border: none;
  padding: 0;
}

caption {
  caption-side: bottom;
}

table ul:not([class]),
table ol:not([class]) {
  margin: 0;
}

.table-sortable th {
  height: inherit;
}
.table-sortable th:is([aria-sort=ascending], [aria-sort=descending]) span::after {
  color: currentcolor;
}
.table-sortable th[aria-sort=ascending], .table-sortable th[aria-sort=descending], .table-sortable th[aria-sort=none] {
  padding: 0;
}
.table-sortable th[aria-sort=ascending] span::after, .table-sortable th[aria-sort=descending] span::after, .table-sortable th[aria-sort=none] span::after {
  margin-inline-start: var(--cr-gap);
  padding-inline-start: var(--cr-size-base);
  content: "";
  background-repeat: no-repeat;
}
.table-sortable th[aria-sort=ascending] span::after {
  background-image: var(--cr-bg-table-ascending);
}
.table-sortable th[aria-sort=descending] span::after {
  background-image: var(--cr-bg-table-descending);
}
.table-sortable th[aria-sort=none] span::after {
  background-image: var(--cr-bg-table-none);
}
.table-sortable th:hover[aria-sort=none] span::after, .table-sortable th:hover[aria-sort=ascending] span::after, .table-sortable th:hover[aria-sort=descending] span::after {
  background-image: var(--cr-bg-table-hover);
}
.table-sortable th button {
  padding: var(--cr-size-base);
  background: transparent;
  border: none;
  display: flex;
  inline-size: 100%;
  text-align: start;
  outline: none;
  cursor: pointer;
  height: 100%;
  align-items: end;
}
.table-sortable th button:is(:focus, :hover) {
  background-color: var(--cr-color-neutral-bg-1);
}

.tr-notice {
  background-color: var(--cr-color-warning-bg-1);
}
.tr-notice:hover {
  background-color: var(--cr-color-warning-bg-2);
}
.tr-notice:active {
  background-color: var(--cr-color-warning-bg-1);
}
.tr-notice:active:hover {
  background-color: var(--cr-color-warning-bg-2);
}

.tr-negative {
  background-color: var(--cr-color-danger-bg-1);
}
.tr-negative:hover {
  background-color: var(--cr-color-danger-bg-2);
}
.tr-negative:active {
  background-color: var(--cr-color-danger-bg-1);
}
.tr-negative:active:hover {
  background-color: var(--cr-color-danger-bg-2);
}

.table-selectable tbody tr:hover {
  background-color: var(--cr-table-row-bg-color-hover);
}
.table-selectable tbody tr:active,
.table-selectable tbody tr.-tr-selected {
  background-color: var(--cr-color-neutral-bg-1);
}
.table-selectable tbody tr:active:hover,
.table-selectable tbody tr:active:hover.-tr-selected {
  background-color: var(--cr-color-neutral-bg-1);
}

table th.action-cell {
  padding-block: var(--cr-size-2);
}
table th.action-cell input {
  margin-inline: var(--cr-size-2);
}

table tr.action-cell input {
  margin-inline: var(--cr-size-2);
  padding-block: var(--cr-size-2);
}

.tabs {
  display: flex;
  flex-direction: column;
}

.tabs:not(:defined) {
  display: none;
}

.tabs__tablist {
  display: flex;
  flex-wrap: wrap;
  scrollbar-width: 0;
  border-block-end: 1px solid var(--cr-color-neutral-border-1);
}
.tabs__tablist::-webkit-scrollbar {
  display: none;
}
.tabs__tablist[data-type=subtle], .tabs__tablist[data-border=none] {
  border-block-end-color: transparent;
}

.tabs__tab {
  --cr-tab-padding-inline: 1.5rem;
  --cr-tab-padding-block: .5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1rem;
  position: relative;
  padding-inline: var(--cr-tab-padding-inline);
  padding-block: var(--cr-tab-padding-block);
  min-block-size: 3rem;
  background: transparent;
  border: none;
  font-size: 0.9em;
  cursor: pointer;
  letter-spacing: 0.03ch;
  transition: all ease 0.3s;
  color: var(--cr-color-neutral-text-subtle);
}
.tabs__tab::after {
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  will-change: transform, box-shadow, opacity;
  position: absolute;
  content: "";
  block-size: 3px;
  inset-block-end: 0px;
  inset-inline-start: 0px;
  inset-inline-end: 0px;
  background: var(--cr-color-brand);
  opacity: 0;
  transform: scale(0, 1);
}
.tabs__tab:hover {
  background-color: var(--cr-color-neutral-bg-1);
}

.tabs__tab:is([aria-selected=true], :target, :active, [active]) {
  background-color: var(--cr-color-neutral-bg-2);
  color: var(--cr-color-neutral-text);
  border-radius: var(--cr-border-radius-2) var(--cr-border-radius-2) 0 0;
}
.tabs__tab:is([aria-selected=true], :target, :active, [active])::after {
  opacity: 1;
  transform: scale(1, 1);
  background: var(--cr-color-brand-purple-d);
}
.tabs__tab:is([disabled], :disabled) {
  background-color: var(--cr-color-neutral-bg-0);
  color: var(--cr-color-neutral-disabled);
  cursor: not-allowed;
}
.tabs__tab:is([disabled], :disabled):hover {
  background-color: var(--cr-color-neutral-bg-0);
}

.tabs__panel {
  position: relative;
  background-color: var(--cr-color-neutral-bg-0);
}

.tabs__tablist a {
  text-decoration: none;
}
.tabs__tablist[data-type=subtle] .tabs__tab:is([aria-selected=true], :target, :active, [active]) {
  color: var(--cr-color-neutral-text);
}
.tabs__tablist[data-type=subtle] .tabs__tab:is([aria-selected=true], :target, :active, [active])::after {
  opacity: 0;
}
.tabs__tablist[data-size=full] .tabs__tab {
  flex: 1 0 auto;
}

.tabs[data-orient=vertical] > .tabs__tablist {
  flex-direction: column;
  border-block-end: unset;
  border-inline-start: var(--cr-border-stroke);
}
.tabs[data-orient=vertical] > .tabs__tablist .tabs__tab {
  justify-content: start;
  border-radius: 0 var(--cr-border-radius-2) var(--cr-border-radius-2) 0;
}
.tabs[data-orient=vertical] > .tabs__tablist .tabs__tab::after {
  block-size: unset;
  inset-block-end: unset;
  inset-inline-start: unset;
  inset-inline-end: unset;
  inline-size: 3px;
  inset-inline-start: 0px;
  inset-block-start: 0px;
  inset-block-end: 0px;
}

.time-picker__overlay {
  min-inline-size: fit-content;
  padding: 0;
}

.time-picker__spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.time-picker__spinner:focus {
  outline: none;
}
.time-picker__spinner:not(:focus-within) .spinner__item.--active {
  background: var(--cr-color-brand);
}
.time-picker__spinner:not(:focus-within) .spinner__item.--active.--subtle {
  background: var(--cr-color-brand-bg-2);
}

.spinner__item {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--cr-size-7);
  block-size: var(--cr-size-7);
  border-radius: var(--cr-border-radius-2);
  color: var(--cr-color-neutral-disabled);
  background: var(--cr-color-neutral-bg-0);
}

.spinner__item.--active {
  color: var(--cr-color-neutral-text-invert);
  background: var(--cr-color-brand);
}

.spinner__item.--active.--subtle {
  color: var(--cr-color-neutral-text);
  background: var(--cr-color-brand-bg-2);
}

.time-picker__spinner-separator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: none;
}
.time-picker__spinner-separator div {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: var(--cr-size-7);
  color: var(--cr-color-neutral-disabled);
}
.time-picker__spinner-separator div.--active {
  color: var(--cr-color-neutral-text);
}
.time-picker__spinner-separator div.--hidden {
  color: transparent;
}

.time-picker__header {
  padding: var(--cr-size-3);
}

.time-picker__body {
  padding: var(--cr-size-3);
  display: flex;
  justify-content: center;
  gap: var(--cr-size-1);
}

.time-picker__footer {
  display: flex;
  justify-content: end;
  gap: var(--cr-gap);
  align-items: center;
  padding: var(--cr-size-3);
}

.toast-group {
  position: fixed;
  z-index: var(--cr-layer-important);
  inset-block-start: 0;
  inset-inline: 0;
  padding-block-start: 1vh;
  display: grid;
  justify-items: center;
  justify-content: center;
  pointer-events: none;
}

.toast {
  --cr-duration-toast: var(--cr-duration-9);
  --cr-travel-distance: 0;
  --toast-icon-color: inherit;
  display: flex;
  align-items: center;
  background-color: var(--cr-color-neutral-bg-1);
  max-inline-size: min(175ch, 90vw);
  padding: 0.5rem var(--cr-size-fluid-base);
  gap: 0 var(--cr-size-base);
  border-radius: var(--cr-border-radius-base);
  color: var(--cr-color-neutral-text);
  border: var(--cr-color-neutral-border-1) 1px solid;
  font-size: var(--cr-font-size-1);
  box-shadow: var(--cr-shadow-3);
  will-change: transform;
  animation: var(--cr-animation-fade-in), toast-in var(--cr-duration-base) var(--cr-ease-base);
}
.toast svg {
  margin-inline-start: -0.75em;
  color: var(--toast-icon-color);
}
@media (prefers-reduced-motion: no-preference) {
  .toast {
    --cr-travel-distance: -1vh;
  }
}

.toast[data-type=informative] {
  --toast-icon-color: var(--cr-color-informative);
  border-color: var(--cr-color-informative-border);
  background-color: var(--cr-color-informative-bg-1);
}

.toast[data-type=positive] {
  --toast-icon-color: var(--cr-color-success);
  border-color: var(--cr-color-success-border);
  background-color: var(--cr-color-success-bg-1);
}

.toast[data-type=negative] {
  --toast-icon-color: var(--cr-color-danger);
  border-color: var(--cr-color-danger-border);
  background-color: var(--cr-color-danger-bg-1);
}

.toast[data-type=notice] {
  --toast-icon-color: var(--cr-color-warning);
  border-color: var(--cr-color-warning-border);
  background-color: var(--cr-color-warning-bg-1);
}

@keyframes toast-in {
  from {
    transform: translateY(var(--cr-travel-distance, 0px));
  }
}
.tooltip {
  color: var(--cr-color-neutral-text-invert);
  background-color: var(--cr-color-neutral-text);
  border-radius: var(--cr-border-radius-base);
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
}

.tooltip-arrow {
  background-color: var(--cr-color-neutral-text);
  position: absolute;
  height: 8px;
  width: 8px;
  transform: rotate(45deg);
}

.user {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  padding: var(--cr-size-base);
}

.user__links {
  --cr-gap: 0 1em;
  --cr-flow-space: 0.3em;
  padding: 0;
  font-size: 0.9em;
}
.user__links a {
  color: currentColor;
}

.user__name {
  font-style: normal;
  font-weight: var(--cr-font-weight-500);
}
.user__name::before {
  content: "";
  margin: 0;
}
.user__name a:not(:hover) {
  text-decoration: none;
}

.user__sub {
  --cr-flow-space: 0.1em;
  font-size: 0.9em;
  color: var(--cr-color-neutral-text-subtle);
}

.content-start {
  align-content: flex-start !important;
}

.content-end {
  align-content: flex-end !important;
}

.content-center {
  align-content: center !important;
}

.content-between {
  align-content: space-between !important;
}

.content-around {
  align-content: space-around !important;
}

.content-evenly {
  align-content: space-evenly !important;
}

.items-start {
  align-items: flex-start !important;
}

.items-end {
  align-items: flex-end !important;
}

.items-center {
  align-items: center !important;
}

.items-baseline {
  align-items: baseline !important;
}

.items-stretch {
  align-items: stretch !important;
}

.self-auto {
  align-self: auto !important;
}

.self-start {
  align-self: start !important;
}

.self-end {
  align-self: end !important;
}

.self-center {
  align-self: center !important;
}

.self-stretch {
  align-self: stretch !important;
}

.self-baseline {
  align-self: baseline !important;
}

.aspect-ratio-4\:3 {
  aspect-ratio: 4/3;
}
.aspect-ratio-3\:4 {
  aspect-ratio: 3/4;
}
.aspect-ratio-1\:1 {
  aspect-ratio: 1;
}
.aspect-ratio-16\:9 {
  aspect-ratio: 16/9;
}
.aspect-ratio-18\:5 {
  aspect-ratio: 18/5;
}
.aspect-ratio-golden {
  aspect-ratio: 1.618/1;
}
.aspect-ratio-auto {
  aspect-ratio: auto;
}
.aspect-ratio-1\:1 {
  aspect-ratio: 1/1;
}
.aspect-ratio-1\:2 {
  aspect-ratio: 1/2;
}
.aspect-ratio-1\:3 {
  aspect-ratio: 1/3;
}
.aspect-ratio-1\:4 {
  aspect-ratio: 1/4;
}
.aspect-ratio-1\:5 {
  aspect-ratio: 1/5;
}
.aspect-ratio-1\:6 {
  aspect-ratio: 1/6;
}
.aspect-ratio-2\:1 {
  aspect-ratio: 2/1;
}
.aspect-ratio-3\:1 {
  aspect-ratio: 3/1;
}
.aspect-ratio-4\:1 {
  aspect-ratio: 4/1;
}
.aspect-ratio-5\:1 {
  aspect-ratio: 5/1;
}
.aspect-ratio-6\:1 {
  aspect-ratio: 6/1;
}
.aspect-ratio-2\:3 {
  aspect-ratio: 2/3;
}
.aspect-ratio-3\:2 {
  aspect-ratio: 3/2;
}
.aspect-ratio-3\:4 {
  aspect-ratio: 3/4;
}
.aspect-ratio-4\:3 {
  aspect-ratio: 4/3;
}
.aspect-ratio-2\:5 {
  aspect-ratio: 2/5;
}
.aspect-ratio-5\:2 {
  aspect-ratio: 5/2;
}
.aspect-ratio-3\:5 {
  aspect-ratio: 3/5;
}
.aspect-ratio-5\:3 {
  aspect-ratio: 5/3;
}
.aspect-ratio-4\:5 {
  aspect-ratio: 4/5;
}
.aspect-ratio-5\:4 {
  aspect-ratio: 5/4;
}
.aspect-ratio-6\:5 {
  aspect-ratio: 6/5;
}
.aspect-ratio-5\:6 {
  aspect-ratio: 5/6;
}

@media (min-width: 16em) {
  .xxs\:aspect-ratio-1\:1 {
    aspect-ratio: 1/1;
  }
  .xxs\:aspect-ratio-1\:2 {
    aspect-ratio: 1/2;
  }
  .xxs\:aspect-ratio-1\:3 {
    aspect-ratio: 1/3;
  }
  .xxs\:aspect-ratio-1\:4 {
    aspect-ratio: 1/4;
  }
  .xxs\:aspect-ratio-1\:5 {
    aspect-ratio: 1/5;
  }
  .xxs\:aspect-ratio-1\:6 {
    aspect-ratio: 1/6;
  }
  .xxs\:aspect-ratio-2\:1 {
    aspect-ratio: 2/1;
  }
  .xxs\:aspect-ratio-3\:1 {
    aspect-ratio: 3/1;
  }
  .xxs\:aspect-ratio-4\:1 {
    aspect-ratio: 4/1;
  }
  .xxs\:aspect-ratio-5\:1 {
    aspect-ratio: 5/1;
  }
  .xxs\:aspect-ratio-6\:1 {
    aspect-ratio: 6/1;
  }
  .xxs\:aspect-ratio-2\:3 {
    aspect-ratio: 2/3;
  }
  .xxs\:aspect-ratio-3\:2 {
    aspect-ratio: 3/2;
  }
  .xxs\:aspect-ratio-3\:4 {
    aspect-ratio: 3/4;
  }
  .xxs\:aspect-ratio-4\:3 {
    aspect-ratio: 4/3;
  }
  .xxs\:aspect-ratio-2\:5 {
    aspect-ratio: 2/5;
  }
  .xxs\:aspect-ratio-5\:2 {
    aspect-ratio: 5/2;
  }
  .xxs\:aspect-ratio-3\:5 {
    aspect-ratio: 3/5;
  }
  .xxs\:aspect-ratio-5\:3 {
    aspect-ratio: 5/3;
  }
  .xxs\:aspect-ratio-4\:5 {
    aspect-ratio: 4/5;
  }
  .xxs\:aspect-ratio-5\:4 {
    aspect-ratio: 5/4;
  }
  .xxs\:aspect-ratio-6\:5 {
    aspect-ratio: 6/5;
  }
  .xxs\:aspect-ratio-5\:6 {
    aspect-ratio: 5/6;
  }
}
@media (min-width: 32em) {
  .xs\:aspect-ratio-1\:1 {
    aspect-ratio: 1/1;
  }
  .xs\:aspect-ratio-1\:2 {
    aspect-ratio: 1/2;
  }
  .xs\:aspect-ratio-1\:3 {
    aspect-ratio: 1/3;
  }
  .xs\:aspect-ratio-1\:4 {
    aspect-ratio: 1/4;
  }
  .xs\:aspect-ratio-1\:5 {
    aspect-ratio: 1/5;
  }
  .xs\:aspect-ratio-1\:6 {
    aspect-ratio: 1/6;
  }
  .xs\:aspect-ratio-2\:1 {
    aspect-ratio: 2/1;
  }
  .xs\:aspect-ratio-3\:1 {
    aspect-ratio: 3/1;
  }
  .xs\:aspect-ratio-4\:1 {
    aspect-ratio: 4/1;
  }
  .xs\:aspect-ratio-5\:1 {
    aspect-ratio: 5/1;
  }
  .xs\:aspect-ratio-6\:1 {
    aspect-ratio: 6/1;
  }
  .xs\:aspect-ratio-2\:3 {
    aspect-ratio: 2/3;
  }
  .xs\:aspect-ratio-3\:2 {
    aspect-ratio: 3/2;
  }
  .xs\:aspect-ratio-3\:4 {
    aspect-ratio: 3/4;
  }
  .xs\:aspect-ratio-4\:3 {
    aspect-ratio: 4/3;
  }
  .xs\:aspect-ratio-2\:5 {
    aspect-ratio: 2/5;
  }
  .xs\:aspect-ratio-5\:2 {
    aspect-ratio: 5/2;
  }
  .xs\:aspect-ratio-3\:5 {
    aspect-ratio: 3/5;
  }
  .xs\:aspect-ratio-5\:3 {
    aspect-ratio: 5/3;
  }
  .xs\:aspect-ratio-4\:5 {
    aspect-ratio: 4/5;
  }
  .xs\:aspect-ratio-5\:4 {
    aspect-ratio: 5/4;
  }
  .xs\:aspect-ratio-6\:5 {
    aspect-ratio: 6/5;
  }
  .xs\:aspect-ratio-5\:6 {
    aspect-ratio: 5/6;
  }
}
@media (min-width: 48em) {
  .sm\:aspect-ratio-1\:1 {
    aspect-ratio: 1/1;
  }
  .sm\:aspect-ratio-1\:2 {
    aspect-ratio: 1/2;
  }
  .sm\:aspect-ratio-1\:3 {
    aspect-ratio: 1/3;
  }
  .sm\:aspect-ratio-1\:4 {
    aspect-ratio: 1/4;
  }
  .sm\:aspect-ratio-1\:5 {
    aspect-ratio: 1/5;
  }
  .sm\:aspect-ratio-1\:6 {
    aspect-ratio: 1/6;
  }
  .sm\:aspect-ratio-2\:1 {
    aspect-ratio: 2/1;
  }
  .sm\:aspect-ratio-3\:1 {
    aspect-ratio: 3/1;
  }
  .sm\:aspect-ratio-4\:1 {
    aspect-ratio: 4/1;
  }
  .sm\:aspect-ratio-5\:1 {
    aspect-ratio: 5/1;
  }
  .sm\:aspect-ratio-6\:1 {
    aspect-ratio: 6/1;
  }
  .sm\:aspect-ratio-2\:3 {
    aspect-ratio: 2/3;
  }
  .sm\:aspect-ratio-3\:2 {
    aspect-ratio: 3/2;
  }
  .sm\:aspect-ratio-3\:4 {
    aspect-ratio: 3/4;
  }
  .sm\:aspect-ratio-4\:3 {
    aspect-ratio: 4/3;
  }
  .sm\:aspect-ratio-2\:5 {
    aspect-ratio: 2/5;
  }
  .sm\:aspect-ratio-5\:2 {
    aspect-ratio: 5/2;
  }
  .sm\:aspect-ratio-3\:5 {
    aspect-ratio: 3/5;
  }
  .sm\:aspect-ratio-5\:3 {
    aspect-ratio: 5/3;
  }
  .sm\:aspect-ratio-4\:5 {
    aspect-ratio: 4/5;
  }
  .sm\:aspect-ratio-5\:4 {
    aspect-ratio: 5/4;
  }
  .sm\:aspect-ratio-6\:5 {
    aspect-ratio: 6/5;
  }
  .sm\:aspect-ratio-5\:6 {
    aspect-ratio: 5/6;
  }
}
@media (min-width: 64em) {
  .md\:aspect-ratio-1\:1 {
    aspect-ratio: 1/1;
  }
  .md\:aspect-ratio-1\:2 {
    aspect-ratio: 1/2;
  }
  .md\:aspect-ratio-1\:3 {
    aspect-ratio: 1/3;
  }
  .md\:aspect-ratio-1\:4 {
    aspect-ratio: 1/4;
  }
  .md\:aspect-ratio-1\:5 {
    aspect-ratio: 1/5;
  }
  .md\:aspect-ratio-1\:6 {
    aspect-ratio: 1/6;
  }
  .md\:aspect-ratio-2\:1 {
    aspect-ratio: 2/1;
  }
  .md\:aspect-ratio-3\:1 {
    aspect-ratio: 3/1;
  }
  .md\:aspect-ratio-4\:1 {
    aspect-ratio: 4/1;
  }
  .md\:aspect-ratio-5\:1 {
    aspect-ratio: 5/1;
  }
  .md\:aspect-ratio-6\:1 {
    aspect-ratio: 6/1;
  }
  .md\:aspect-ratio-2\:3 {
    aspect-ratio: 2/3;
  }
  .md\:aspect-ratio-3\:2 {
    aspect-ratio: 3/2;
  }
  .md\:aspect-ratio-3\:4 {
    aspect-ratio: 3/4;
  }
  .md\:aspect-ratio-4\:3 {
    aspect-ratio: 4/3;
  }
  .md\:aspect-ratio-2\:5 {
    aspect-ratio: 2/5;
  }
  .md\:aspect-ratio-5\:2 {
    aspect-ratio: 5/2;
  }
  .md\:aspect-ratio-3\:5 {
    aspect-ratio: 3/5;
  }
  .md\:aspect-ratio-5\:3 {
    aspect-ratio: 5/3;
  }
  .md\:aspect-ratio-4\:5 {
    aspect-ratio: 4/5;
  }
  .md\:aspect-ratio-5\:4 {
    aspect-ratio: 5/4;
  }
  .md\:aspect-ratio-6\:5 {
    aspect-ratio: 6/5;
  }
  .md\:aspect-ratio-5\:6 {
    aspect-ratio: 5/6;
  }
}
@media (min-width: 80em) {
  .lg\:aspect-ratio-1\:1 {
    aspect-ratio: 1/1;
  }
  .lg\:aspect-ratio-1\:2 {
    aspect-ratio: 1/2;
  }
  .lg\:aspect-ratio-1\:3 {
    aspect-ratio: 1/3;
  }
  .lg\:aspect-ratio-1\:4 {
    aspect-ratio: 1/4;
  }
  .lg\:aspect-ratio-1\:5 {
    aspect-ratio: 1/5;
  }
  .lg\:aspect-ratio-1\:6 {
    aspect-ratio: 1/6;
  }
  .lg\:aspect-ratio-2\:1 {
    aspect-ratio: 2/1;
  }
  .lg\:aspect-ratio-3\:1 {
    aspect-ratio: 3/1;
  }
  .lg\:aspect-ratio-4\:1 {
    aspect-ratio: 4/1;
  }
  .lg\:aspect-ratio-5\:1 {
    aspect-ratio: 5/1;
  }
  .lg\:aspect-ratio-6\:1 {
    aspect-ratio: 6/1;
  }
  .lg\:aspect-ratio-2\:3 {
    aspect-ratio: 2/3;
  }
  .lg\:aspect-ratio-3\:2 {
    aspect-ratio: 3/2;
  }
  .lg\:aspect-ratio-3\:4 {
    aspect-ratio: 3/4;
  }
  .lg\:aspect-ratio-4\:3 {
    aspect-ratio: 4/3;
  }
  .lg\:aspect-ratio-2\:5 {
    aspect-ratio: 2/5;
  }
  .lg\:aspect-ratio-5\:2 {
    aspect-ratio: 5/2;
  }
  .lg\:aspect-ratio-3\:5 {
    aspect-ratio: 3/5;
  }
  .lg\:aspect-ratio-5\:3 {
    aspect-ratio: 5/3;
  }
  .lg\:aspect-ratio-4\:5 {
    aspect-ratio: 4/5;
  }
  .lg\:aspect-ratio-5\:4 {
    aspect-ratio: 5/4;
  }
  .lg\:aspect-ratio-6\:5 {
    aspect-ratio: 6/5;
  }
  .lg\:aspect-ratio-5\:6 {
    aspect-ratio: 5/6;
  }
}
@media (min-width: 96em) {
  .xl\:aspect-ratio-1\:1 {
    aspect-ratio: 1/1;
  }
  .xl\:aspect-ratio-1\:2 {
    aspect-ratio: 1/2;
  }
  .xl\:aspect-ratio-1\:3 {
    aspect-ratio: 1/3;
  }
  .xl\:aspect-ratio-1\:4 {
    aspect-ratio: 1/4;
  }
  .xl\:aspect-ratio-1\:5 {
    aspect-ratio: 1/5;
  }
  .xl\:aspect-ratio-1\:6 {
    aspect-ratio: 1/6;
  }
  .xl\:aspect-ratio-2\:1 {
    aspect-ratio: 2/1;
  }
  .xl\:aspect-ratio-3\:1 {
    aspect-ratio: 3/1;
  }
  .xl\:aspect-ratio-4\:1 {
    aspect-ratio: 4/1;
  }
  .xl\:aspect-ratio-5\:1 {
    aspect-ratio: 5/1;
  }
  .xl\:aspect-ratio-6\:1 {
    aspect-ratio: 6/1;
  }
  .xl\:aspect-ratio-2\:3 {
    aspect-ratio: 2/3;
  }
  .xl\:aspect-ratio-3\:2 {
    aspect-ratio: 3/2;
  }
  .xl\:aspect-ratio-3\:4 {
    aspect-ratio: 3/4;
  }
  .xl\:aspect-ratio-4\:3 {
    aspect-ratio: 4/3;
  }
  .xl\:aspect-ratio-2\:5 {
    aspect-ratio: 2/5;
  }
  .xl\:aspect-ratio-5\:2 {
    aspect-ratio: 5/2;
  }
  .xl\:aspect-ratio-3\:5 {
    aspect-ratio: 3/5;
  }
  .xl\:aspect-ratio-5\:3 {
    aspect-ratio: 5/3;
  }
  .xl\:aspect-ratio-4\:5 {
    aspect-ratio: 4/5;
  }
  .xl\:aspect-ratio-5\:4 {
    aspect-ratio: 5/4;
  }
  .xl\:aspect-ratio-6\:5 {
    aspect-ratio: 6/5;
  }
  .xl\:aspect-ratio-5\:6 {
    aspect-ratio: 5/6;
  }
}
@media (min-width: 112em) {
  .xxl\:aspect-ratio-1\:1 {
    aspect-ratio: 1/1;
  }
  .xxl\:aspect-ratio-1\:2 {
    aspect-ratio: 1/2;
  }
  .xxl\:aspect-ratio-1\:3 {
    aspect-ratio: 1/3;
  }
  .xxl\:aspect-ratio-1\:4 {
    aspect-ratio: 1/4;
  }
  .xxl\:aspect-ratio-1\:5 {
    aspect-ratio: 1/5;
  }
  .xxl\:aspect-ratio-1\:6 {
    aspect-ratio: 1/6;
  }
  .xxl\:aspect-ratio-2\:1 {
    aspect-ratio: 2/1;
  }
  .xxl\:aspect-ratio-3\:1 {
    aspect-ratio: 3/1;
  }
  .xxl\:aspect-ratio-4\:1 {
    aspect-ratio: 4/1;
  }
  .xxl\:aspect-ratio-5\:1 {
    aspect-ratio: 5/1;
  }
  .xxl\:aspect-ratio-6\:1 {
    aspect-ratio: 6/1;
  }
  .xxl\:aspect-ratio-2\:3 {
    aspect-ratio: 2/3;
  }
  .xxl\:aspect-ratio-3\:2 {
    aspect-ratio: 3/2;
  }
  .xxl\:aspect-ratio-3\:4 {
    aspect-ratio: 3/4;
  }
  .xxl\:aspect-ratio-4\:3 {
    aspect-ratio: 4/3;
  }
  .xxl\:aspect-ratio-2\:5 {
    aspect-ratio: 2/5;
  }
  .xxl\:aspect-ratio-5\:2 {
    aspect-ratio: 5/2;
  }
  .xxl\:aspect-ratio-3\:5 {
    aspect-ratio: 3/5;
  }
  .xxl\:aspect-ratio-5\:3 {
    aspect-ratio: 5/3;
  }
  .xxl\:aspect-ratio-4\:5 {
    aspect-ratio: 4/5;
  }
  .xxl\:aspect-ratio-5\:4 {
    aspect-ratio: 5/4;
  }
  .xxl\:aspect-ratio-6\:5 {
    aspect-ratio: 6/5;
  }
  .xxl\:aspect-ratio-5\:6 {
    aspect-ratio: 5/6;
  }
}
.aspect-ratio-16\:9,
.aspect-ratio-widescreen {
  --cr-ratio-widescreen: 16/9 !important;
}

.aspect-ratio-4\:3,
.aspect-ratio-landscape {
  --cr-ratio-landscape: 4/3 !important;
}

.aspect-ratio-1\:1,
.aspect-ratio-square {
  --cr-ratio-square: 1 !important;
}

.aspect-ratio-3\:4,
.aspect-ratio-portrait {
  --cr-ratio-portrait: 3/4 !important;
}

.aspect-ratio-ultrawide {
  --cr-ratio-ultrawide: 18/5 !important;
}

.aspect-ratio-golden {
  --cr-ratio-golden: 1.6180/1 !important;
}

.bg-fixed {
  background-attachment: fixed !important;
}

.bg-local {
  background-attachment: local !important;
}

.bg-scroll {
  background-attachment: scroll !important;
}

.bg-clip-border {
  background-clip: border-box !important;
}

.bg-clip-padding {
  background-clip: padding-box !important;
}

.bg-clip-content {
  background-clip: content-box !important;
}

.bg-clip-text {
  background-clip: text !important;
}

.bg-origin-border {
  background-origin: border-box !important;
}

.bg-origin-padding {
  background-origin: padding-box !important;
}

.bg-origin-content {
  background-origin: content-box !important;
}

.bg-center {
  background-position: center !important;
}

.bg-top {
  background-position: center top !important;
}

.bg-right {
  background-position: right center !important;
}

.bg-bottom {
  background-position: center bottom !important;
}

.bg-left {
  background-position: left center !important;
}

.bg-top-left {
  background-position: left top !important;
}

.bg-top-right {
  background-position: right top !important;
}

.bg-bottom-left {
  background-position: left bottom !important;
}

.bg-bottom-right {
  background-position: right bottom !important;
}

.bg-repeat {
  background-repeat: repeat !important;
}

.bg-no-repeat {
  background-repeat: no-repeat !important;
}

.bg-repeat-x {
  background-repeat: repeat-x !important;
}

.bg-repeat-y {
  background-repeat: repeat-y !important;
}

.bg-repeat-space {
  background-repeat: space !important;
}

.bg-repeat-round {
  background-repeat: round !important;
}

.bg-auto {
  background-size: auto !important;
}

.bg-cover {
  background-size: cover !important;
}

.bg-contain {
  background-size: contain !important;
}

.bg-none {
  background-image: none !important;
}

.rounded {
  border-radius: var(--cr-border-radius-base) !important;
}
.rounded-sm {
  border-radius: var(--cr-border-radius-sm) !important;
}
.rounded-lg {
  border-radius: var(--cr-border-radius-lg) !important;
}
.rounded-pill {
  border-radius: var(--cr-border-radius-round) !important;
}

.radius-0 {
  border-radius: 0 !important;
}

.radius-top-right-0 {
  border-start-end-radius: 0 !important;
}

.radius-bottom-right-0 {
  border-end-end-radius: 0 !important;
}

.radius-bottom-left-0 {
  border-end-start-radius: 0 !important;
}

.radius-top-left-0 {
  border-start-start-radius: 0 !important;
}

.radius-top-0 {
  border-start-start-radius: 0 !important;
  border-start-end-radius: 0 !important;
}

.radius-right-0 {
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

.radius-bottom-0 {
  border-end-end-radius: 0 !important;
  border-end-start-radius: 0 !important;
}

.radius-left-0 {
  border-end-start-radius: 0 !important;
  border-start-start-radius: 0 !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-block-start: 0 !important;
}

.mr-0 {
  margin-inline-end: 0 !important;
}

.mb-0 {
  margin-block-end: 0 !important;
}

.ml-0 {
  margin-inline-start: 0 !important;
}

.my-0 {
  margin-block: 0 !important;
}

.mx-0 {
  margin-inline: 0 !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-block-start: auto !important;
}

.mr-auto {
  margin-inline-end: auto !important;
}

.mb-auto {
  margin-block-end: auto !important;
}

.ml-auto {
  margin-inline-start: auto !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.my-auto {
  margin-block: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-block-start: 0 !important;
}

.pr-0 {
  padding-inline-end: 0 !important;
}

.pb-0 {
  padding-block-end: 0 !important;
}

.pl-0 {
  padding-inline-start: 0 !important;
}

.py-0 {
  padding-block: 0 !important;
}

.px-0 {
  padding-inline: 0 !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-block-start: auto !important;
}

.pr-auto {
  padding-inline-end: auto !important;
}

.pb-auto {
  padding-block-end: auto !important;
}

.pl-auto {
  padding-inline-start: auto !important;
}

.px-auto {
  padding-inline: auto !important;
}

.py-auto {
  padding-block: auto !important;
}

.m-1 {
  margin: var(--cr-size-1) !important;
}

.mt-1 {
  margin-block-start: var(--cr-size-1) !important;
}

.mr-1 {
  margin-inline-end: var(--cr-size-1) !important;
}

.mb-1 {
  margin-block-end: var(--cr-size-1) !important;
}

.ml-1 {
  margin-inline-start: var(--cr-size-1) !important;
}

.my-1 {
  margin-block: var(--cr-size-1) !important;
}

.mx-1 {
  margin-inline: var(--cr-size-1) !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-block-start: auto !important;
}

.mr-auto {
  margin-inline-end: auto !important;
}

.mb-auto {
  margin-block-end: auto !important;
}

.ml-auto {
  margin-inline-start: auto !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.my-auto {
  margin-block: auto !important;
}

.p-1 {
  padding: var(--cr-size-1) !important;
}

.pt-1 {
  padding-block-start: var(--cr-size-1) !important;
}

.pr-1 {
  padding-inline-end: var(--cr-size-1) !important;
}

.pb-1 {
  padding-block-end: var(--cr-size-1) !important;
}

.pl-1 {
  padding-inline-start: var(--cr-size-1) !important;
}

.py-1 {
  padding-block: var(--cr-size-1) !important;
}

.px-1 {
  padding-inline: var(--cr-size-1) !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-block-start: auto !important;
}

.pr-auto {
  padding-inline-end: auto !important;
}

.pb-auto {
  padding-block-end: auto !important;
}

.pl-auto {
  padding-inline-start: auto !important;
}

.px-auto {
  padding-inline: auto !important;
}

.py-auto {
  padding-block: auto !important;
}

.m-2 {
  margin: var(--cr-size-2) !important;
}

.mt-2 {
  margin-block-start: var(--cr-size-2) !important;
}

.mr-2 {
  margin-inline-end: var(--cr-size-2) !important;
}

.mb-2 {
  margin-block-end: var(--cr-size-2) !important;
}

.ml-2 {
  margin-inline-start: var(--cr-size-2) !important;
}

.my-2 {
  margin-block: var(--cr-size-2) !important;
}

.mx-2 {
  margin-inline: var(--cr-size-2) !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-block-start: auto !important;
}

.mr-auto {
  margin-inline-end: auto !important;
}

.mb-auto {
  margin-block-end: auto !important;
}

.ml-auto {
  margin-inline-start: auto !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.my-auto {
  margin-block: auto !important;
}

.p-2 {
  padding: var(--cr-size-2) !important;
}

.pt-2 {
  padding-block-start: var(--cr-size-2) !important;
}

.pr-2 {
  padding-inline-end: var(--cr-size-2) !important;
}

.pb-2 {
  padding-block-end: var(--cr-size-2) !important;
}

.pl-2 {
  padding-inline-start: var(--cr-size-2) !important;
}

.py-2 {
  padding-block: var(--cr-size-2) !important;
}

.px-2 {
  padding-inline: var(--cr-size-2) !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-block-start: auto !important;
}

.pr-auto {
  padding-inline-end: auto !important;
}

.pb-auto {
  padding-block-end: auto !important;
}

.pl-auto {
  padding-inline-start: auto !important;
}

.px-auto {
  padding-inline: auto !important;
}

.py-auto {
  padding-block: auto !important;
}

.m-3 {
  margin: var(--cr-size-3) !important;
}

.mt-3 {
  margin-block-start: var(--cr-size-3) !important;
}

.mr-3 {
  margin-inline-end: var(--cr-size-3) !important;
}

.mb-3 {
  margin-block-end: var(--cr-size-3) !important;
}

.ml-3 {
  margin-inline-start: var(--cr-size-3) !important;
}

.my-3 {
  margin-block: var(--cr-size-3) !important;
}

.mx-3 {
  margin-inline: var(--cr-size-3) !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-block-start: auto !important;
}

.mr-auto {
  margin-inline-end: auto !important;
}

.mb-auto {
  margin-block-end: auto !important;
}

.ml-auto {
  margin-inline-start: auto !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.my-auto {
  margin-block: auto !important;
}

.p-3 {
  padding: var(--cr-size-3) !important;
}

.pt-3 {
  padding-block-start: var(--cr-size-3) !important;
}

.pr-3 {
  padding-inline-end: var(--cr-size-3) !important;
}

.pb-3 {
  padding-block-end: var(--cr-size-3) !important;
}

.pl-3 {
  padding-inline-start: var(--cr-size-3) !important;
}

.py-3 {
  padding-block: var(--cr-size-3) !important;
}

.px-3 {
  padding-inline: var(--cr-size-3) !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-block-start: auto !important;
}

.pr-auto {
  padding-inline-end: auto !important;
}

.pb-auto {
  padding-block-end: auto !important;
}

.pl-auto {
  padding-inline-start: auto !important;
}

.px-auto {
  padding-inline: auto !important;
}

.py-auto {
  padding-block: auto !important;
}

.m-4 {
  margin: var(--cr-size-4) !important;
}

.mt-4 {
  margin-block-start: var(--cr-size-4) !important;
}

.mr-4 {
  margin-inline-end: var(--cr-size-4) !important;
}

.mb-4 {
  margin-block-end: var(--cr-size-4) !important;
}

.ml-4 {
  margin-inline-start: var(--cr-size-4) !important;
}

.my-4 {
  margin-block: var(--cr-size-4) !important;
}

.mx-4 {
  margin-inline: var(--cr-size-4) !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-block-start: auto !important;
}

.mr-auto {
  margin-inline-end: auto !important;
}

.mb-auto {
  margin-block-end: auto !important;
}

.ml-auto {
  margin-inline-start: auto !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.my-auto {
  margin-block: auto !important;
}

.p-4 {
  padding: var(--cr-size-4) !important;
}

.pt-4 {
  padding-block-start: var(--cr-size-4) !important;
}

.pr-4 {
  padding-inline-end: var(--cr-size-4) !important;
}

.pb-4 {
  padding-block-end: var(--cr-size-4) !important;
}

.pl-4 {
  padding-inline-start: var(--cr-size-4) !important;
}

.py-4 {
  padding-block: var(--cr-size-4) !important;
}

.px-4 {
  padding-inline: var(--cr-size-4) !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-block-start: auto !important;
}

.pr-auto {
  padding-inline-end: auto !important;
}

.pb-auto {
  padding-block-end: auto !important;
}

.pl-auto {
  padding-inline-start: auto !important;
}

.px-auto {
  padding-inline: auto !important;
}

.py-auto {
  padding-block: auto !important;
}

.m-5 {
  margin: var(--cr-size-5) !important;
}

.mt-5 {
  margin-block-start: var(--cr-size-5) !important;
}

.mr-5 {
  margin-inline-end: var(--cr-size-5) !important;
}

.mb-5 {
  margin-block-end: var(--cr-size-5) !important;
}

.ml-5 {
  margin-inline-start: var(--cr-size-5) !important;
}

.my-5 {
  margin-block: var(--cr-size-5) !important;
}

.mx-5 {
  margin-inline: var(--cr-size-5) !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-block-start: auto !important;
}

.mr-auto {
  margin-inline-end: auto !important;
}

.mb-auto {
  margin-block-end: auto !important;
}

.ml-auto {
  margin-inline-start: auto !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.my-auto {
  margin-block: auto !important;
}

.p-5 {
  padding: var(--cr-size-5) !important;
}

.pt-5 {
  padding-block-start: var(--cr-size-5) !important;
}

.pr-5 {
  padding-inline-end: var(--cr-size-5) !important;
}

.pb-5 {
  padding-block-end: var(--cr-size-5) !important;
}

.pl-5 {
  padding-inline-start: var(--cr-size-5) !important;
}

.py-5 {
  padding-block: var(--cr-size-5) !important;
}

.px-5 {
  padding-inline: var(--cr-size-5) !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-block-start: auto !important;
}

.pr-auto {
  padding-inline-end: auto !important;
}

.pb-auto {
  padding-block-end: auto !important;
}

.pl-auto {
  padding-inline-start: auto !important;
}

.px-auto {
  padding-inline: auto !important;
}

.py-auto {
  padding-block: auto !important;
}

.m-6 {
  margin: var(--cr-size-6) !important;
}

.mt-6 {
  margin-block-start: var(--cr-size-6) !important;
}

.mr-6 {
  margin-inline-end: var(--cr-size-6) !important;
}

.mb-6 {
  margin-block-end: var(--cr-size-6) !important;
}

.ml-6 {
  margin-inline-start: var(--cr-size-6) !important;
}

.my-6 {
  margin-block: var(--cr-size-6) !important;
}

.mx-6 {
  margin-inline: var(--cr-size-6) !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-block-start: auto !important;
}

.mr-auto {
  margin-inline-end: auto !important;
}

.mb-auto {
  margin-block-end: auto !important;
}

.ml-auto {
  margin-inline-start: auto !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.my-auto {
  margin-block: auto !important;
}

.p-6 {
  padding: var(--cr-size-6) !important;
}

.pt-6 {
  padding-block-start: var(--cr-size-6) !important;
}

.pr-6 {
  padding-inline-end: var(--cr-size-6) !important;
}

.pb-6 {
  padding-block-end: var(--cr-size-6) !important;
}

.pl-6 {
  padding-inline-start: var(--cr-size-6) !important;
}

.py-6 {
  padding-block: var(--cr-size-6) !important;
}

.px-6 {
  padding-inline: var(--cr-size-6) !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-block-start: auto !important;
}

.pr-auto {
  padding-inline-end: auto !important;
}

.pb-auto {
  padding-block-end: auto !important;
}

.pl-auto {
  padding-inline-start: auto !important;
}

.px-auto {
  padding-inline: auto !important;
}

.py-auto {
  padding-block: auto !important;
}

.m-7 {
  margin: var(--cr-size-7) !important;
}

.mt-7 {
  margin-block-start: var(--cr-size-7) !important;
}

.mr-7 {
  margin-inline-end: var(--cr-size-7) !important;
}

.mb-7 {
  margin-block-end: var(--cr-size-7) !important;
}

.ml-7 {
  margin-inline-start: var(--cr-size-7) !important;
}

.my-7 {
  margin-block: var(--cr-size-7) !important;
}

.mx-7 {
  margin-inline: var(--cr-size-7) !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-block-start: auto !important;
}

.mr-auto {
  margin-inline-end: auto !important;
}

.mb-auto {
  margin-block-end: auto !important;
}

.ml-auto {
  margin-inline-start: auto !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.my-auto {
  margin-block: auto !important;
}

.p-7 {
  padding: var(--cr-size-7) !important;
}

.pt-7 {
  padding-block-start: var(--cr-size-7) !important;
}

.pr-7 {
  padding-inline-end: var(--cr-size-7) !important;
}

.pb-7 {
  padding-block-end: var(--cr-size-7) !important;
}

.pl-7 {
  padding-inline-start: var(--cr-size-7) !important;
}

.py-7 {
  padding-block: var(--cr-size-7) !important;
}

.px-7 {
  padding-inline: var(--cr-size-7) !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-block-start: auto !important;
}

.pr-auto {
  padding-inline-end: auto !important;
}

.pb-auto {
  padding-block-end: auto !important;
}

.pl-auto {
  padding-inline-start: auto !important;
}

.px-auto {
  padding-inline: auto !important;
}

.py-auto {
  padding-block: auto !important;
}

.m-8 {
  margin: var(--cr-size-8) !important;
}

.mt-8 {
  margin-block-start: var(--cr-size-8) !important;
}

.mr-8 {
  margin-inline-end: var(--cr-size-8) !important;
}

.mb-8 {
  margin-block-end: var(--cr-size-8) !important;
}

.ml-8 {
  margin-inline-start: var(--cr-size-8) !important;
}

.my-8 {
  margin-block: var(--cr-size-8) !important;
}

.mx-8 {
  margin-inline: var(--cr-size-8) !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-block-start: auto !important;
}

.mr-auto {
  margin-inline-end: auto !important;
}

.mb-auto {
  margin-block-end: auto !important;
}

.ml-auto {
  margin-inline-start: auto !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.my-auto {
  margin-block: auto !important;
}

.p-8 {
  padding: var(--cr-size-8) !important;
}

.pt-8 {
  padding-block-start: var(--cr-size-8) !important;
}

.pr-8 {
  padding-inline-end: var(--cr-size-8) !important;
}

.pb-8 {
  padding-block-end: var(--cr-size-8) !important;
}

.pl-8 {
  padding-inline-start: var(--cr-size-8) !important;
}

.py-8 {
  padding-block: var(--cr-size-8) !important;
}

.px-8 {
  padding-inline: var(--cr-size-8) !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-block-start: auto !important;
}

.pr-auto {
  padding-inline-end: auto !important;
}

.pb-auto {
  padding-block-end: auto !important;
}

.pl-auto {
  padding-inline-start: auto !important;
}

.px-auto {
  padding-inline: auto !important;
}

.py-auto {
  padding-block: auto !important;
}

.m-9 {
  margin: var(--cr-size-9) !important;
}

.mt-9 {
  margin-block-start: var(--cr-size-9) !important;
}

.mr-9 {
  margin-inline-end: var(--cr-size-9) !important;
}

.mb-9 {
  margin-block-end: var(--cr-size-9) !important;
}

.ml-9 {
  margin-inline-start: var(--cr-size-9) !important;
}

.my-9 {
  margin-block: var(--cr-size-9) !important;
}

.mx-9 {
  margin-inline: var(--cr-size-9) !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-block-start: auto !important;
}

.mr-auto {
  margin-inline-end: auto !important;
}

.mb-auto {
  margin-block-end: auto !important;
}

.ml-auto {
  margin-inline-start: auto !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.my-auto {
  margin-block: auto !important;
}

.p-9 {
  padding: var(--cr-size-9) !important;
}

.pt-9 {
  padding-block-start: var(--cr-size-9) !important;
}

.pr-9 {
  padding-inline-end: var(--cr-size-9) !important;
}

.pb-9 {
  padding-block-end: var(--cr-size-9) !important;
}

.pl-9 {
  padding-inline-start: var(--cr-size-9) !important;
}

.py-9 {
  padding-block: var(--cr-size-9) !important;
}

.px-9 {
  padding-inline: var(--cr-size-9) !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-block-start: auto !important;
}

.pr-auto {
  padding-inline-end: auto !important;
}

.pb-auto {
  padding-block-end: auto !important;
}

.pl-auto {
  padding-inline-start: auto !important;
}

.px-auto {
  padding-inline: auto !important;
}

.py-auto {
  padding-block: auto !important;
}

.m-10 {
  margin: var(--cr-size-10) !important;
}

.mt-10 {
  margin-block-start: var(--cr-size-10) !important;
}

.mr-10 {
  margin-inline-end: var(--cr-size-10) !important;
}

.mb-10 {
  margin-block-end: var(--cr-size-10) !important;
}

.ml-10 {
  margin-inline-start: var(--cr-size-10) !important;
}

.my-10 {
  margin-block: var(--cr-size-10) !important;
}

.mx-10 {
  margin-inline: var(--cr-size-10) !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-block-start: auto !important;
}

.mr-auto {
  margin-inline-end: auto !important;
}

.mb-auto {
  margin-block-end: auto !important;
}

.ml-auto {
  margin-inline-start: auto !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.my-auto {
  margin-block: auto !important;
}

.p-10 {
  padding: var(--cr-size-10) !important;
}

.pt-10 {
  padding-block-start: var(--cr-size-10) !important;
}

.pr-10 {
  padding-inline-end: var(--cr-size-10) !important;
}

.pb-10 {
  padding-block-end: var(--cr-size-10) !important;
}

.pl-10 {
  padding-inline-start: var(--cr-size-10) !important;
}

.py-10 {
  padding-block: var(--cr-size-10) !important;
}

.px-10 {
  padding-inline: var(--cr-size-10) !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-block-start: auto !important;
}

.pr-auto {
  padding-inline-end: auto !important;
}

.pb-auto {
  padding-block-end: auto !important;
}

.pl-auto {
  padding-inline-start: auto !important;
}

.px-auto {
  padding-inline: auto !important;
}

.py-auto {
  padding-block: auto !important;
}

.p-block {
  padding: var(--cr-spacing-block) !important;
}

.b-0 {
  border: none !important;
}

.b-dotted {
  border: var(--cr-border-size-base) dotted var(--cr-color-stroke) !important;
}

.b-dashed {
  border: var(--cr-border-size-base) dashed var(--cr-color-stroke) !important;
}

.b-thin {
  border: var(--cr-border-size-base) solid var(--cr-color-stroke) !important;
}

.b-thick {
  border: var(--cr-border-size-thick) solid var(--cr-color-stroke) !important;
}

.b-heavy {
  border: var(--cr-border-size-heavy) solid var(--cr-color-stroke) !important;
}

.bt-0 {
  border-block-start: none !important;
}

.bt-dotted {
  border-block-start: var(--cr-border-size-base) dotted var(--cr-color-stroke) !important;
}

.bt-dashed {
  border-block-start: var(--cr-border-size-base) dashed var(--cr-color-stroke) !important;
}

.bt-thin {
  border-block-start: var(--cr-border-size-base) solid var(--cr-color-stroke) !important;
}

.bt-thick {
  border-block-start: var(--cr-border-size-thick) solid var(--cr-color-stroke) !important;
}

.bt-heavy {
  border-block-start: var(--cr-border-size-heavy) solid var(--cr-color-stroke) !important;
}

.br-0 {
  border-inline-end: none !important;
}

.br-dotted {
  border-inline-end: var(--cr-border-size-base) dotted var(--cr-color-stroke) !important;
}

.br-dashed {
  border-inline-end: var(--cr-border-size-base) dashed var(--cr-color-stroke) !important;
}

.br-thin {
  border-inline-end: var(--cr-border-size-base) solid var(--cr-color-stroke) !important;
}

.br-thick {
  border-inline-end: var(--cr-border-size-thick) solid var(--cr-color-stroke) !important;
}

.br-heavy {
  border-inline-end: var(--cr-border-size-heavy) solid var(--cr-color-stroke) !important;
}

.bb-0 {
  border-block-end: none !important;
}

.bb-dotted {
  border-block-end: var(--cr-border-size-base) dotted var(--cr-color-stroke) !important;
}

.bb-dashed {
  border-block-end: var(--cr-border-size-base) dashed var(--cr-color-stroke) !important;
}

.bb-thin {
  border-block-end: var(--cr-border-size-base) solid var(--cr-color-stroke) !important;
}

.bb-thick {
  border-block-end: var(--cr-border-size-thick) solid var(--cr-color-stroke) !important;
}

.bb-heavy {
  border-block-end: var(--cr-border-size-heavy) solid var(--cr-color-stroke) !important;
}

.bl-0 {
  border-inline-start: none !important;
}

.bl-dotted {
  border-inline-start: var(--cr-border-size-base) dotted var(--cr-color-stroke) !important;
}

.bl-dashed {
  border-inline-start: var(--cr-border-size-base) dashed var(--cr-color-stroke) !important;
}

.bl-thin {
  border-inline-start: var(--cr-border-size-base) solid var(--cr-color-stroke) !important;
}

.bl-thick {
  border-inline-start: var(--cr-border-size-thick) solid var(--cr-color-stroke) !important;
}

.bl-heavy {
  border-inline-start: var(--cr-border-size-heavy) solid var(--cr-color-stroke) !important;
}

.bx-0 {
  border-inline: none !important;
}

.bx-dotted {
  border-inline: var(--cr-border-size-base) dotted var(--cr-color-stroke) !important;
}

.bx-dashed {
  border-inline: var(--cr-border-size-base) dashed var(--cr-color-stroke) !important;
}

.bx-thin {
  border-inline: var(--cr-border-size-base) solid var(--cr-color-stroke) !important;
}

.bx-thick {
  border-inline: var(--cr-border-size-thick) solid var(--cr-color-stroke) !important;
}

.bx-heavy {
  border-inline: var(--cr-border-size-heavy) solid var(--cr-color-stroke) !important;
}

.by-0 {
  border-block: none !important;
}

.by-dotted {
  border-block: var(--cr-border-size-base) dotted var(--cr-color-stroke) !important;
}

.by-dashed {
  border-block: var(--cr-border-size-base) dashed var(--cr-color-stroke) !important;
}

.by-thin {
  border-block: var(--cr-border-size-base) solid var(--cr-color-stroke) !important;
}

.by-thick {
  border-block: var(--cr-border-size-thick) solid var(--cr-color-stroke) !important;
}

.by-heavy {
  border-block: var(--cr-border-size-heavy) solid var(--cr-color-stroke) !important;
}

.b-negative-dotted {
  border: var(--cr-border-size-base) dotted var(--cr-color-red-9) !important;
}

.b-negative-dashed {
  border: var(--cr-border-size-base) dashed var(--cr-color-red-9) !important;
}

.b-negative-thin {
  border: var(--cr-border-size-base) solid var(--cr-color-red-9) !important;
}

.b-negative-thick {
  border: var(--cr-border-size-thick) solid var(--cr-color-red-9) !important;
}

.b-negative-heavy {
  border: var(--cr-border-size-heavy) solid var(--cr-color-red-9) !important;
}

.bt-negative-dotted {
  border-block-start: var(--cr-border-size-base) dotted var(--cr-color-red-9) !important;
}

.bt-negative-dashed {
  border-block-start: var(--cr-border-size-base) dashed var(--cr-color-red-9) !important;
}

.bt-negative-thin {
  border-block-start: var(--cr-border-size-base) solid var(--cr-color-red-9) !important;
}

.bt-negative-thick {
  border-block-start: var(--cr-border-size-thick) solid var(--cr-color-red-9) !important;
}

.bt-negative-heavy {
  border-block-start: var(--cr-border-size-heavy) solid var(--cr-color-red-9) !important;
}

.br-negative-dotted {
  border-inline-end: var(--cr-border-size-base) dotted var(--cr-color-red-9) !important;
}

.br-negative-dashed {
  border-inline-end: var(--cr-border-size-base) dashed var(--cr-color-red-9) !important;
}

.br-negative-thin {
  border-inline-end: var(--cr-border-size-base) solid var(--cr-color-red-9) !important;
}

.br-negative-thick {
  border-inline-end: var(--cr-border-size-thick) solid var(--cr-color-red-9) !important;
}

.br-negative-heavy {
  border-inline-end: var(--cr-border-size-heavy) solid var(--cr-color-red-9) !important;
}

.bb-negative-dotted {
  border-block-end: var(--cr-border-size-base) dotted var(--cr-color-red-9) !important;
}

.bb-negative-dashed {
  border-block-end: var(--cr-border-size-base) dashed var(--cr-color-red-9) !important;
}

.bb-negative-thin {
  border-block-end: var(--cr-border-size-base) solid var(--cr-color-red-9) !important;
}

.bb-negative-thick {
  border-block-end: var(--cr-border-size-thick) solid var(--cr-color-red-9) !important;
}

.bb-negative-heavy {
  border-block-end: var(--cr-border-size-heavy) solid var(--cr-color-red-9) !important;
}

.bl-negative-dotted {
  border-inline-start: var(--cr-border-size-base) dotted var(--cr-color-red-9) !important;
}

.bl-negative-dashed {
  border-inline-start: var(--cr-border-size-base) dashed var(--cr-color-red-9) !important;
}

.bl-negative-thin {
  border-inline-start: var(--cr-border-size-base) solid var(--cr-color-red-9) !important;
}

.bl-negative-thick {
  border-inline-start: var(--cr-border-size-thick) solid var(--cr-color-red-9) !important;
}

.bl-negative-heavy {
  border-inline-start: var(--cr-border-size-heavy) solid var(--cr-color-red-9) !important;
}

.bx-negative-dotted {
  border-inline: var(--cr-border-size-base) dotted var(--cr-color-red-9) !important;
}

.bx-negative-dashed {
  border-inline: var(--cr-border-size-base) dashed var(--cr-color-red-9) !important;
}

.bx-negative-thin {
  border-inline: var(--cr-border-size-base) solid var(--cr-color-red-9) !important;
}

.bx-negative-thick {
  border-inline: var(--cr-border-size-thick) solid var(--cr-color-red-9) !important;
}

.bx-negative-heavy {
  border-inline: var(--cr-border-size-heavy) solid var(--cr-color-red-9) !important;
}

.by-negative-dotted {
  border-block: var(--cr-border-size-base) dotted var(--cr-color-red-9) !important;
}

.by-negative-dashed {
  border-block: var(--cr-border-size-base) dashed var(--cr-color-red-9) !important;
}

.by-negative-thin {
  border-block: var(--cr-border-size-base) solid var(--cr-color-red-9) !important;
}

.by-negative-thick {
  border-block: var(--cr-border-size-thick) solid var(--cr-color-red-9) !important;
}

.by-negative-heavy {
  border-block: var(--cr-border-size-heavy) solid var(--cr-color-red-9) !important;
}

.bs-1 {
  box-shadow: var(--cr-shadow-1) !important;
}

.bs-2 {
  box-shadow: var(--cr-shadow-2) !important;
}

.bs-3 {
  box-shadow: var(--cr-shadow-3) !important;
}

.bs-4 {
  box-shadow: var(--cr-shadow-4) !important;
}

.bs-5 {
  box-shadow: var(--cr-shadow-5) !important;
}

.bs-6 {
  box-shadow: var(--cr-shadow-6) !important;
}

.bsi-1 {
  box-shadow: var(--cr-inner-shadow-1) !important;
}

.bsi-2 {
  box-shadow: var(--cr-inner-shadow-2) !important;
}

.bsi-3 {
  box-shadow: var(--cr-inner-shadow-3) !important;
}

.bsi-4 {
  box-shadow: var(--cr-inner-shadow-4) !important;
}

.bsi-5 {
  box-shadow: var(--cr-inner-shadow-5) !important;
}

.centerer > * {
  text-align: center;
  margin: auto;
}

[class^=color-],
[class*=" color-"] {
  --cr-color-o: 1;
}

[class*=hover] {
  transition: all 0.2s ease-in-out;
}

.color-opacity-0 {
  --cr-color-o: 0 !important;
}

.color-opacity-10\% {
  --cr-color-o: 0.1 !important;
}

.color-opacity-20\% {
  --cr-color-o: 0.2 !important;
}

.color-opacity-30\% {
  --cr-color-o: 0.3 !important;
}

.color-opacity-40\% {
  --cr-color-o: 0.4 !important;
}

.color-opacity-50\% {
  --cr-color-o: 0.5 !important;
}

.color-opacity-60\% {
  --cr-color-o: 0.6 !important;
}

.color-opacity-70\% {
  --cr-color-o: 0.7 !important;
}

.color-opacity-80\% {
  --cr-color-o: 0.8 !important;
}

.color-opacity-90\% {
  --cr-color-o: 0.9 !important;
}

.color-inherit {
  color: inherit !important;
}

.color-current {
  color: currentColor !important;
}

.bg-inherit {
  background-color: inherit !important;
}

.bg-current {
  background-color: currentColor !important;
}

.bg-border-clip {
  background-origin: border-box !important;
}

.bg-transparent,
.hover\:bg-transparent:hover {
  background-color: transparent !important;
}

.b-transparent,
.hover\:b-transparent:hover {
  border-color: transparent !important;
}

.page-background {
  background-color: var(--cr-color-page-bg);
}

.color-notice {
  color: var(--cr-color-warning) !important;
}

.hover\:.color-notice {
  color: var(--cr-color-warning) !important;
}

.bg-notice {
  background-color: var(--cr-color-warning) !important;
}

.hover\:bg-notice:hover {
  background-color: var(--cr-color-warning) !important;
}

.b-notice {
  border-color: var(--cr-color-warning) !important;
}

.hover\:.b-notice:hover {
  border-color: var(--cr-color-warning) !important;
}

.color-negative {
  color: var(--cr-color-danger) !important;
}

.hover\:.color-negative {
  color: var(--cr-color-danger) !important;
}

.bg-negative {
  background-color: var(--cr-color-danger) !important;
}

.hover\:bg-negative:hover {
  background-color: var(--cr-color-danger) !important;
}

.b-negative {
  border-color: var(--cr-color-danger) !important;
}

.hover\:.b-negative:hover {
  border-color: var(--cr-color-danger) !important;
}

.color-positive {
  color: var(--cr-color-success) !important;
}

.hover\:.color-positive {
  color: var(--cr-color-success) !important;
}

.bg-positive {
  background-color: var(--cr-color-success) !important;
}

.hover\:bg-positive:hover {
  background-color: var(--cr-color-success) !important;
}

.b-positive {
  border-color: var(--cr-color-success) !important;
}

.hover\:.b-positive:hover {
  border-color: var(--cr-color-success) !important;
}

.color-informative {
  color: var(--cr-color-informative) !important;
}

.hover\:.color-informative {
  color: var(--cr-color-informative) !important;
}

.bg-informative {
  background-color: var(--cr-color-informative) !important;
}

.hover\:bg-informative:hover {
  background-color: var(--cr-color-informative) !important;
}

.b-informative {
  border-color: var(--cr-color-informative) !important;
}

.hover\:.b-informative:hover {
  border-color: var(--cr-color-informative) !important;
}

.color-primary {
  color: var(--cr-color-brand-9) !important;
}

.hover\:.color-primary {
  color: var(--cr-color-brand-9) !important;
}

.bg-primary {
  background-color: var(--cr-color-brand-9) !important;
}

.hover\:bg-primary:hover {
  background-color: var(--cr-color-brand-9) !important;
}

.b-primary {
  border-color: var(--cr-color-brand-9) !important;
}

.hover\:.b-primary:hover {
  border-color: var(--cr-color-brand-9) !important;
}

.color-accent {
  color: var(--cr-color-brand-accent) !important;
}

.hover\:.color-accent {
  color: var(--cr-color-brand-accent) !important;
}

.bg-accent {
  background-color: var(--cr-color-brand-accent) !important;
}

.hover\:bg-accent:hover {
  background-color: var(--cr-color-brand-accent) !important;
}

.b-accent {
  border-color: var(--cr-color-brand-accent) !important;
}

.hover\:.b-accent:hover {
  border-color: var(--cr-color-brand-accent) !important;
}

.color-neutral {
  color: var(--cr-color-neutral-bg-0) !important;
}

.hover\:.color-neutral {
  color: var(--cr-color-neutral-bg-0) !important;
}

.bg-neutral {
  background-color: var(--cr-color-neutral-bg-0) !important;
}

.hover\:bg-neutral:hover {
  background-color: var(--cr-color-neutral-bg-0) !important;
}

.b-neutral {
  border-color: var(--cr-color-neutral-bg-0) !important;
}

.hover\:.b-neutral:hover {
  border-color: var(--cr-color-neutral-bg-0) !important;
}

.color-comp-1 {
  color: var(--cr-color-bg-comp-1) !important;
}

.hover\:.color-comp-1 {
  color: var(--cr-color-bg-comp-1) !important;
}

.bg-comp-1 {
  background-color: var(--cr-color-bg-comp-1) !important;
}

.hover\:bg-comp-1:hover {
  background-color: var(--cr-color-bg-comp-1) !important;
}

.b-comp-1 {
  border-color: var(--cr-color-bg-comp-1) !important;
}

.hover\:.b-comp-1:hover {
  border-color: var(--cr-color-bg-comp-1) !important;
}

.color-comp-2 {
  color: var(--cr-color-bg-comp-2) !important;
}

.hover\:.color-comp-2 {
  color: var(--cr-color-bg-comp-2) !important;
}

.bg-comp-2 {
  background-color: var(--cr-color-bg-comp-2) !important;
}

.hover\:bg-comp-2:hover {
  background-color: var(--cr-color-bg-comp-2) !important;
}

.b-comp-2 {
  border-color: var(--cr-color-bg-comp-2) !important;
}

.hover\:.b-comp-2:hover {
  border-color: var(--cr-color-bg-comp-2) !important;
}

.color-purewhite {
  color: var(--cr-color-neutral-text-white-static) !important;
}

.hover\:.color-purewhite {
  color: var(--cr-color-neutral-text-white-static) !important;
}

.bg-purewhite {
  background-color: var(--cr-color-neutral-text-white-static) !important;
}

.hover\:bg-purewhite:hover {
  background-color: var(--cr-color-neutral-text-white-static) !important;
}

.b-purewhite {
  border-color: var(--cr-color-neutral-text-white-static) !important;
}

.hover\:.b-purewhite:hover {
  border-color: var(--cr-color-neutral-text-white-static) !important;
}

.color-pureblack {
  color: var(--cr-color-black) !important;
}

.hover\:.color-pureblack {
  color: var(--cr-color-black) !important;
}

.bg-pureblack {
  background-color: var(--cr-color-black) !important;
}

.hover\:bg-pureblack:hover {
  background-color: var(--cr-color-black) !important;
}

.b-pureblack {
  border-color: var(--cr-color-black) !important;
}

.hover\:.b-pureblack:hover {
  border-color: var(--cr-color-black) !important;
}

.bg-surface-1 {
  background-color: var(--cr-color-surface-1) !important;
}

.bg-surface-2 {
  background-color: var(--cr-color-neutral-bg-1) !important;
}

.bg-surface-3 {
  background-color: var(--cr-color-neutral-bg-0) !important;
}

.bg-black {
  background-color: var(--cr-color-black) !important;
}

.bg-white {
  background-color: var(--cr-color-neutral-text-white-static) !important;
}

.bg-brand {
  background-color: var(--cr-color-brand) !important;
}

.b-black {
  border-color: var(--cr-color-black) !important;
}

.b-white {
  border-color: var(--cr-color-neutral-text-white-static) !important;
}

.t-notice {
  color: var(--cr-color-warning) !important;
}

.t-negative {
  color: var(--cr-color-danger) !important;
}

.t-positive {
  color: var(--cr-color-success) !important;
}

.t-informative {
  color: var(--cr-color-informative) !important;
}

.t-primary {
  color: var(--cr-color-text-primary) !important;
}

.t-accent {
  color: var(--cr-color-text-accent) !important;
}

.t-default {
  color: var(--cr-color-neutral-text) !important;
}

.t-neutral {
  color: var(--cr-color-neutral-text-subtle) !important;
}

.t-black {
  color: var(--cr-color-neutral-gray-static) !important;
}

.t-white {
  color: var(--cr-color-neutral-text-white-static) !important;
}

.t-invert {
  color: var(--cr-color-neutral-text-invert) !important;
}

.hover\:t-notice:hover {
  color: var(--cr-color-warning) !important;
}

.hover\:t-negative:hover {
  color: var(--cr-color-danger) !important;
}

.hover\:t-positive:hover {
  color: var(--cr-color-success) !important;
}

.hover\:t-informative:hover {
  color: var(--cr-color-informative) !important;
}

.hover\:t-primary:hover {
  color: var(--cr-color-text-primary) !important;
}

.hover\:t-accent:hover {
  color: var(--cr-color-text-accent) !important;
}

.hover\:t-neutral:hover {
  color: var(--cr-color-neutral-text) !important;
}

.hover\:t-black:hover {
  color: var(--cr-color-neutral-gray-static) !important;
}

.hover\:t-white:hover {
  color: var(--cr-color-neutral-text-white-static) !important;
}

.cols-1 {
  columns: 1 !important;
}

.cols-2 {
  columns: 2 !important;
}

.cols-3 {
  columns: 3 !important;
}

.cols-4 {
  columns: 4 !important;
}

.cols-5 {
  columns: 5 !important;
}

.cols-6 {
  columns: 6 !important;
}

.cols-7 {
  columns: 7 !important;
}

.cols-8 {
  columns: 8 !important;
}

.cols-9 {
  columns: 9 !important;
}

.cols-10 {
  columns: 10 !important;
}

.cols-11 {
  columns: 11 !important;
}

.cols-12 {
  columns: 12 !important;
}

.cols-auto {
  columns: auto !important;
}

.cursor-auto {
  cursor: auto !important;
}

.cursor-default {
  cursor: default !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-wait {
  cursor: wait !important;
}

.cursor-text {
  cursor: text !important;
}

.cursor-move {
  cursor: move !important;
}

.cursor-help {
  cursor: help !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.cursor-none {
  cursor: none !important;
}

.cursor-context-menu {
  cursor: context-menu !important;
}

.cursor-progress {
  cursor: progress !important;
}

.cursor-cell {
  cursor: cell !important;
}

.cursor-crosshair {
  cursor: crosshair !important;
}

.cursor-vertical-text {
  cursor: vertical-text !important;
}

.cursor-alias {
  cursor: alias !important;
}

.cursor-copy {
  cursor: copy !important;
}

.cursor-no-drop {
  cursor: no-drop !important;
}

.cursor-grab {
  cursor: grab !important;
}

.cursor-grabbing {
  cursor: grabbing !important;
}

.cursor-all-scroll {
  cursor: all-scroll !important;
}

.cursor-col-resize {
  cursor: col-resize !important;
}

.cursor-row-resize {
  cursor: row-resize !important;
}

.cursor-n-resize {
  cursor: n-resize !important;
}

.cursor-e-resize {
  cursor: e-resize !important;
}

.cursor-s-resize {
  cursor: s-resize !important;
}

.cursor-w-resize {
  cursor: w-resize !important;
}

.cursor-ne-resize {
  cursor: ne-resize !important;
}

.cursor-nw-resize {
  cursor: nw-resize !important;
}

.cursor-se-resize {
  cursor: se-resize !important;
}

.cursor-sw-resize {
  cursor: sw-resize !important;
}

.cursor-ew-resize {
  cursor: ew-resize !important;
}

.cursor-ns-resize {
  cursor: ns-resize !important;
}

.cursor-nesw-resize {
  cursor: nesw-resize !important;
}

.cursor-nwse-resize {
  cursor: nwse-resize !important;
}

.cursor-zoom-in {
  cursor: zoom-in !important;
}

.cursor-zoom-out {
  cursor: zoom-out !important;
}

.w-xxs {
  inline-size: 100% !important;
  max-inline-size: 16em !important;
}
.w-xs {
  inline-size: 100% !important;
  max-inline-size: 32em !important;
}
.w-sm {
  inline-size: 100% !important;
  max-inline-size: 48em !important;
}
.w-md {
  inline-size: 100% !important;
  max-inline-size: 64em !important;
}
.w-lg {
  inline-size: 100% !important;
  max-inline-size: 80em !important;
}
.w-xl {
  inline-size: 100% !important;
  max-inline-size: 96em !important;
}
.w-xxl {
  inline-size: 100% !important;
  max-inline-size: 112em !important;
}
.w-0 {
  inline-size: 0 !important;
}
.w-10\% {
  inline-size: 10% !important;
  max-inline-size: 10% !important;
}
.w-20\% {
  inline-size: 20% !important;
  max-inline-size: 20% !important;
}
.w-25\% {
  inline-size: 25% !important;
  max-inline-size: 25% !important;
}
.w-30\% {
  inline-size: 30% !important;
  max-inline-size: 30% !important;
}
.w-33\% {
  inline-size: 33.3333333333% !important;
}
.w-40\% {
  inline-size: 40% !important;
  max-inline-size: 40% !important;
}
.w-50\% {
  inline-size: 50% !important;
  max-inline-size: 50% !important;
}
.w-60\% {
  inline-size: 60% !important;
  max-inline-size: 60% !important;
}
.w-66\% {
  inline-size: 66.6666666667% !important;
}
.w-70\% {
  inline-size: 70% !important;
  max-inline-size: 70% !important;
}
.w-75\% {
  inline-size: 75% !important;
  max-inline-size: 75% !important;
}
.w-80\% {
  inline-size: 80% !important;
  max-inline-size: 80% !important;
}
.w-90\% {
  inline-size: 90% !important;
  max-inline-size: 90% !important;
}
.w-100\%, .w-full {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
}
.w-100vw, .w-screen {
  inline-size: 100vw !important;
}
.w-auto {
  max-inline-size: unset !important;
  inline-size: auto !important;
}
.w-min {
  inline-size: min-content !important;
}
.w-max {
  inline-size: max-content !important;
}
.w-max-unset {
  max-inline-size: unset !important;
}
.w-max-100vw {
  inline-size: 100% !important;
  max-inline-size: 100vw !important;
}
.w-fit {
  inline-size: fit-content !important;
}
.w-min-w-0 {
  min-inline-size: 0px !important;
}
.w-max-field {
  max-inline-size: var(--cr-size-field-inline-size-max);
}

@media (min-width: 16em) {
  .xxs\:w-auto {
    max-inline-size: unset !important;
    inline-size: auto !important;
  }
}
@media (min-width: 32em) {
  .xs\:w-auto {
    max-inline-size: unset !important;
    inline-size: auto !important;
  }
}
@media (min-width: 48em) {
  .sm\:w-auto {
    max-inline-size: unset !important;
    inline-size: auto !important;
  }
}
@media (min-width: 64em) {
  .md\:w-auto {
    max-inline-size: unset !important;
    inline-size: auto !important;
  }
}
@media (min-width: 80em) {
  .lg\:w-auto {
    max-inline-size: unset !important;
    inline-size: auto !important;
  }
}
@media (min-width: 96em) {
  .xl\:w-auto {
    max-inline-size: unset !important;
    inline-size: auto !important;
  }
}
@media (min-width: 112em) {
  .xxl\:w-auto {
    max-inline-size: unset !important;
    inline-size: auto !important;
  }
}
.h-50vh {
  block-size: 50vh !important;
}
.h-100vh, .h-screen {
  block-size: 100vh !important;
}
.h-max-100vh {
  max-block-size: 100vh !important;
}
.h-100\%, .h-full {
  block-size: 100% !important;
}
.h-max-100\% {
  max-block-size: 100% !important;
}
.h-auto {
  block-size: auto !important;
}
.h-min {
  block-size: min-content !important;
}
.h-max {
  block-size: max-content !important;
}
.h-fit {
  block-size: fit-content !important;
}

.w-0-5 {
  inline-size: 0.125rem !important;
  max-inline-size: 0.125rem !important;
}

.w-max-0-5 {
  max-inline-size: 0.125rem !important;
}

.w-min-0-5 {
  min-inline-size: 0.125rem !important;
}

.h-0-5 {
  block-size: 0.125rem !important;
  max-block-size: 0.125rem !important;
}

.h-max-0-5 {
  max-block-size: 0.125rem !important;
}

.h-min-0-5 {
  min-block-size: 0.125rem !important;
}

.w-1 {
  inline-size: 0.25rem !important;
  max-inline-size: 0.25rem !important;
}

.w-max-1 {
  max-inline-size: 0.25rem !important;
}

.w-min-1 {
  min-inline-size: 0.25rem !important;
}

.h-1 {
  block-size: 0.25rem !important;
  max-block-size: 0.25rem !important;
}

.h-max-1 {
  max-block-size: 0.25rem !important;
}

.h-min-1 {
  min-block-size: 0.25rem !important;
}

.w-1-5 {
  inline-size: 0.375rem !important;
  max-inline-size: 0.375rem !important;
}

.w-max-1-5 {
  max-inline-size: 0.375rem !important;
}

.w-min-1-5 {
  min-inline-size: 0.375rem !important;
}

.h-1-5 {
  block-size: 0.375rem !important;
  max-block-size: 0.375rem !important;
}

.h-max-1-5 {
  max-block-size: 0.375rem !important;
}

.h-min-1-5 {
  min-block-size: 0.375rem !important;
}

.w-2 {
  inline-size: 0.5rem !important;
  max-inline-size: 0.5rem !important;
}

.w-max-2 {
  max-inline-size: 0.5rem !important;
}

.w-min-2 {
  min-inline-size: 0.5rem !important;
}

.h-2 {
  block-size: 0.5rem !important;
  max-block-size: 0.5rem !important;
}

.h-max-2 {
  max-block-size: 0.5rem !important;
}

.h-min-2 {
  min-block-size: 0.5rem !important;
}

.w-2-5 {
  inline-size: 0.625rem !important;
  max-inline-size: 0.625rem !important;
}

.w-max-2-5 {
  max-inline-size: 0.625rem !important;
}

.w-min-2-5 {
  min-inline-size: 0.625rem !important;
}

.h-2-5 {
  block-size: 0.625rem !important;
  max-block-size: 0.625rem !important;
}

.h-max-2-5 {
  max-block-size: 0.625rem !important;
}

.h-min-2-5 {
  min-block-size: 0.625rem !important;
}

.w-3 {
  inline-size: 0.75rem !important;
  max-inline-size: 0.75rem !important;
}

.w-max-3 {
  max-inline-size: 0.75rem !important;
}

.w-min-3 {
  min-inline-size: 0.75rem !important;
}

.h-3 {
  block-size: 0.75rem !important;
  max-block-size: 0.75rem !important;
}

.h-max-3 {
  max-block-size: 0.75rem !important;
}

.h-min-3 {
  min-block-size: 0.75rem !important;
}

.w-3-5 {
  inline-size: 0.875rem !important;
  max-inline-size: 0.875rem !important;
}

.w-max-3-5 {
  max-inline-size: 0.875rem !important;
}

.w-min-3-5 {
  min-inline-size: 0.875rem !important;
}

.h-3-5 {
  block-size: 0.875rem !important;
  max-block-size: 0.875rem !important;
}

.h-max-3-5 {
  max-block-size: 0.875rem !important;
}

.h-min-3-5 {
  min-block-size: 0.875rem !important;
}

.w-4 {
  inline-size: 1rem !important;
  max-inline-size: 1rem !important;
}

.w-max-4 {
  max-inline-size: 1rem !important;
}

.w-min-4 {
  min-inline-size: 1rem !important;
}

.h-4 {
  block-size: 1rem !important;
  max-block-size: 1rem !important;
}

.h-max-4 {
  max-block-size: 1rem !important;
}

.h-min-4 {
  min-block-size: 1rem !important;
}

.w-5 {
  inline-size: 1.25rem !important;
  max-inline-size: 1.25rem !important;
}

.w-max-5 {
  max-inline-size: 1.25rem !important;
}

.w-min-5 {
  min-inline-size: 1.25rem !important;
}

.h-5 {
  block-size: 1.25rem !important;
  max-block-size: 1.25rem !important;
}

.h-max-5 {
  max-block-size: 1.25rem !important;
}

.h-min-5 {
  min-block-size: 1.25rem !important;
}

.w-6 {
  inline-size: 1.5rem !important;
  max-inline-size: 1.5rem !important;
}

.w-max-6 {
  max-inline-size: 1.5rem !important;
}

.w-min-6 {
  min-inline-size: 1.5rem !important;
}

.h-6 {
  block-size: 1.5rem !important;
  max-block-size: 1.5rem !important;
}

.h-max-6 {
  max-block-size: 1.5rem !important;
}

.h-min-6 {
  min-block-size: 1.5rem !important;
}

.w-7 {
  inline-size: 1.75rem !important;
  max-inline-size: 1.75rem !important;
}

.w-max-7 {
  max-inline-size: 1.75rem !important;
}

.w-min-7 {
  min-inline-size: 1.75rem !important;
}

.h-7 {
  block-size: 1.75rem !important;
  max-block-size: 1.75rem !important;
}

.h-max-7 {
  max-block-size: 1.75rem !important;
}

.h-min-7 {
  min-block-size: 1.75rem !important;
}

.w-8 {
  inline-size: 2rem !important;
  max-inline-size: 2rem !important;
}

.w-max-8 {
  max-inline-size: 2rem !important;
}

.w-min-8 {
  min-inline-size: 2rem !important;
}

.h-8 {
  block-size: 2rem !important;
  max-block-size: 2rem !important;
}

.h-max-8 {
  max-block-size: 2rem !important;
}

.h-min-8 {
  min-block-size: 2rem !important;
}

.w-9 {
  inline-size: 2.25rem !important;
  max-inline-size: 2.25rem !important;
}

.w-max-9 {
  max-inline-size: 2.25rem !important;
}

.w-min-9 {
  min-inline-size: 2.25rem !important;
}

.h-9 {
  block-size: 2.25rem !important;
  max-block-size: 2.25rem !important;
}

.h-max-9 {
  max-block-size: 2.25rem !important;
}

.h-min-9 {
  min-block-size: 2.25rem !important;
}

.w-10 {
  inline-size: 2.5rem !important;
  max-inline-size: 2.5rem !important;
}

.w-max-10 {
  max-inline-size: 2.5rem !important;
}

.w-min-10 {
  min-inline-size: 2.5rem !important;
}

.h-10 {
  block-size: 2.5rem !important;
  max-block-size: 2.5rem !important;
}

.h-max-10 {
  max-block-size: 2.5rem !important;
}

.h-min-10 {
  min-block-size: 2.5rem !important;
}

.w-11 {
  inline-size: 2.75rem !important;
  max-inline-size: 2.75rem !important;
}

.w-max-11 {
  max-inline-size: 2.75rem !important;
}

.w-min-11 {
  min-inline-size: 2.75rem !important;
}

.h-11 {
  block-size: 2.75rem !important;
  max-block-size: 2.75rem !important;
}

.h-max-11 {
  max-block-size: 2.75rem !important;
}

.h-min-11 {
  min-block-size: 2.75rem !important;
}

.w-12 {
  inline-size: 3rem !important;
  max-inline-size: 3rem !important;
}

.w-max-12 {
  max-inline-size: 3rem !important;
}

.w-min-12 {
  min-inline-size: 3rem !important;
}

.h-12 {
  block-size: 3rem !important;
  max-block-size: 3rem !important;
}

.h-max-12 {
  max-block-size: 3rem !important;
}

.h-min-12 {
  min-block-size: 3rem !important;
}

.w-14 {
  inline-size: 3.5rem !important;
  max-inline-size: 3.5rem !important;
}

.w-max-14 {
  max-inline-size: 3.5rem !important;
}

.w-min-14 {
  min-inline-size: 3.5rem !important;
}

.h-14 {
  block-size: 3.5rem !important;
  max-block-size: 3.5rem !important;
}

.h-max-14 {
  max-block-size: 3.5rem !important;
}

.h-min-14 {
  min-block-size: 3.5rem !important;
}

.w-16 {
  inline-size: 4rem !important;
  max-inline-size: 4rem !important;
}

.w-max-16 {
  max-inline-size: 4rem !important;
}

.w-min-16 {
  min-inline-size: 4rem !important;
}

.h-16 {
  block-size: 4rem !important;
  max-block-size: 4rem !important;
}

.h-max-16 {
  max-block-size: 4rem !important;
}

.h-min-16 {
  min-block-size: 4rem !important;
}

.w-20 {
  inline-size: 5rem !important;
  max-inline-size: 5rem !important;
}

.w-max-20 {
  max-inline-size: 5rem !important;
}

.w-min-20 {
  min-inline-size: 5rem !important;
}

.h-20 {
  block-size: 5rem !important;
  max-block-size: 5rem !important;
}

.h-max-20 {
  max-block-size: 5rem !important;
}

.h-min-20 {
  min-block-size: 5rem !important;
}

.w-24 {
  inline-size: 6rem !important;
  max-inline-size: 6rem !important;
}

.w-max-24 {
  max-inline-size: 6rem !important;
}

.w-min-24 {
  min-inline-size: 6rem !important;
}

.h-24 {
  block-size: 6rem !important;
  max-block-size: 6rem !important;
}

.h-max-24 {
  max-block-size: 6rem !important;
}

.h-min-24 {
  min-block-size: 6rem !important;
}

.w-28 {
  inline-size: 7rem !important;
  max-inline-size: 7rem !important;
}

.w-max-28 {
  max-inline-size: 7rem !important;
}

.w-min-28 {
  min-inline-size: 7rem !important;
}

.h-28 {
  block-size: 7rem !important;
  max-block-size: 7rem !important;
}

.h-max-28 {
  max-block-size: 7rem !important;
}

.h-min-28 {
  min-block-size: 7rem !important;
}

.w-32 {
  inline-size: 8rem !important;
  max-inline-size: 8rem !important;
}

.w-max-32 {
  max-inline-size: 8rem !important;
}

.w-min-32 {
  min-inline-size: 8rem !important;
}

.h-32 {
  block-size: 8rem !important;
  max-block-size: 8rem !important;
}

.h-max-32 {
  max-block-size: 8rem !important;
}

.h-min-32 {
  min-block-size: 8rem !important;
}

.w-36 {
  inline-size: 9rem !important;
  max-inline-size: 9rem !important;
}

.w-max-36 {
  max-inline-size: 9rem !important;
}

.w-min-36 {
  min-inline-size: 9rem !important;
}

.h-36 {
  block-size: 9rem !important;
  max-block-size: 9rem !important;
}

.h-max-36 {
  max-block-size: 9rem !important;
}

.h-min-36 {
  min-block-size: 9rem !important;
}

.w-40 {
  inline-size: 10rem !important;
  max-inline-size: 10rem !important;
}

.w-max-40 {
  max-inline-size: 10rem !important;
}

.w-min-40 {
  min-inline-size: 10rem !important;
}

.h-40 {
  block-size: 10rem !important;
  max-block-size: 10rem !important;
}

.h-max-40 {
  max-block-size: 10rem !important;
}

.h-min-40 {
  min-block-size: 10rem !important;
}

.w-44 {
  inline-size: 11rem !important;
  max-inline-size: 11rem !important;
}

.w-max-44 {
  max-inline-size: 11rem !important;
}

.w-min-44 {
  min-inline-size: 11rem !important;
}

.h-44 {
  block-size: 11rem !important;
  max-block-size: 11rem !important;
}

.h-max-44 {
  max-block-size: 11rem !important;
}

.h-min-44 {
  min-block-size: 11rem !important;
}

.w-48 {
  inline-size: 12rem !important;
  max-inline-size: 12rem !important;
}

.w-max-48 {
  max-inline-size: 12rem !important;
}

.w-min-48 {
  min-inline-size: 12rem !important;
}

.h-48 {
  block-size: 12rem !important;
  max-block-size: 12rem !important;
}

.h-max-48 {
  max-block-size: 12rem !important;
}

.h-min-48 {
  min-block-size: 12rem !important;
}

.w-52 {
  inline-size: 13rem !important;
  max-inline-size: 13rem !important;
}

.w-max-52 {
  max-inline-size: 13rem !important;
}

.w-min-52 {
  min-inline-size: 13rem !important;
}

.h-52 {
  block-size: 13rem !important;
  max-block-size: 13rem !important;
}

.h-max-52 {
  max-block-size: 13rem !important;
}

.h-min-52 {
  min-block-size: 13rem !important;
}

.w-56 {
  inline-size: 14rem !important;
  max-inline-size: 14rem !important;
}

.w-max-56 {
  max-inline-size: 14rem !important;
}

.w-min-56 {
  min-inline-size: 14rem !important;
}

.h-56 {
  block-size: 14rem !important;
  max-block-size: 14rem !important;
}

.h-max-56 {
  max-block-size: 14rem !important;
}

.h-min-56 {
  min-block-size: 14rem !important;
}

.w-60 {
  inline-size: 15rem !important;
  max-inline-size: 15rem !important;
}

.w-max-60 {
  max-inline-size: 15rem !important;
}

.w-min-60 {
  min-inline-size: 15rem !important;
}

.h-60 {
  block-size: 15rem !important;
  max-block-size: 15rem !important;
}

.h-max-60 {
  max-block-size: 15rem !important;
}

.h-min-60 {
  min-block-size: 15rem !important;
}

.w-64 {
  inline-size: 16rem !important;
  max-inline-size: 16rem !important;
}

.w-max-64 {
  max-inline-size: 16rem !important;
}

.w-min-64 {
  min-inline-size: 16rem !important;
}

.h-64 {
  block-size: 16rem !important;
  max-block-size: 16rem !important;
}

.h-max-64 {
  max-block-size: 16rem !important;
}

.h-min-64 {
  min-block-size: 16rem !important;
}

.w-72 {
  inline-size: 18rem !important;
  max-inline-size: 18rem !important;
}

.w-max-72 {
  max-inline-size: 18rem !important;
}

.w-min-72 {
  min-inline-size: 18rem !important;
}

.h-72 {
  block-size: 18rem !important;
  max-block-size: 18rem !important;
}

.h-max-72 {
  max-block-size: 18rem !important;
}

.h-min-72 {
  min-block-size: 18rem !important;
}

.w-80 {
  inline-size: 20rem !important;
  max-inline-size: 20rem !important;
}

.w-max-80 {
  max-inline-size: 20rem !important;
}

.w-min-80 {
  min-inline-size: 20rem !important;
}

.h-80 {
  block-size: 20rem !important;
  max-block-size: 20rem !important;
}

.h-max-80 {
  max-block-size: 20rem !important;
}

.h-min-80 {
  min-block-size: 20rem !important;
}

.w-96 {
  inline-size: 24rem !important;
  max-inline-size: 24rem !important;
}

.w-max-96 {
  max-inline-size: 24rem !important;
}

.w-min-96 {
  min-inline-size: 24rem !important;
}

.h-96 {
  block-size: 24rem !important;
  max-block-size: 24rem !important;
}

.h-max-96 {
  max-block-size: 24rem !important;
}

.h-min-96 {
  min-block-size: 24rem !important;
}

.w-100 {
  inline-size: 30rem !important;
  max-inline-size: 30rem !important;
}

.w-max-100 {
  max-inline-size: 30rem !important;
}

.w-min-100 {
  min-inline-size: 30rem !important;
}

.h-100 {
  block-size: 30rem !important;
  max-block-size: 30rem !important;
}

.h-max-100 {
  max-block-size: 30rem !important;
}

.h-min-100 {
  min-block-size: 30rem !important;
}

.box {
  position: absolute !important;
  inset: 0 !important;
}
.box.fixed {
  position: fixed !important;
}

.w-ch-1 {
  inline-size: 1ch !important;
  max-inline-size: 1ch !important;
}

.w-max-1 {
  max-inline-size: 1ch !important;
}

.w-min-1 {
  min-inline-size: 1ch !important;
}

.w-ch-2 {
  inline-size: 2ch !important;
  max-inline-size: 2ch !important;
}

.w-max-2 {
  max-inline-size: 2ch !important;
}

.w-min-2 {
  min-inline-size: 2ch !important;
}

.w-ch-3 {
  inline-size: 3ch !important;
  max-inline-size: 3ch !important;
}

.w-max-3 {
  max-inline-size: 3ch !important;
}

.w-min-3 {
  min-inline-size: 3ch !important;
}

.w-ch-4 {
  inline-size: 4ch !important;
  max-inline-size: 4ch !important;
}

.w-max-4 {
  max-inline-size: 4ch !important;
}

.w-min-4 {
  min-inline-size: 4ch !important;
}

.w-ch-5 {
  inline-size: 5ch !important;
  max-inline-size: 5ch !important;
}

.w-max-5 {
  max-inline-size: 5ch !important;
}

.w-min-5 {
  min-inline-size: 5ch !important;
}

.w-ch-6 {
  inline-size: 6ch !important;
  max-inline-size: 6ch !important;
}

.w-max-6 {
  max-inline-size: 6ch !important;
}

.w-min-6 {
  min-inline-size: 6ch !important;
}

.w-ch-7 {
  inline-size: 7ch !important;
  max-inline-size: 7ch !important;
}

.w-max-7 {
  max-inline-size: 7ch !important;
}

.w-min-7 {
  min-inline-size: 7ch !important;
}

.w-ch-8 {
  inline-size: 8ch !important;
  max-inline-size: 8ch !important;
}

.w-max-8 {
  max-inline-size: 8ch !important;
}

.w-min-8 {
  min-inline-size: 8ch !important;
}

.w-ch-9 {
  inline-size: 9ch !important;
  max-inline-size: 9ch !important;
}

.w-max-9 {
  max-inline-size: 9ch !important;
}

.w-min-9 {
  min-inline-size: 9ch !important;
}

.w-ch-10 {
  inline-size: 10ch !important;
  max-inline-size: 10ch !important;
}

.w-max-10 {
  max-inline-size: 10ch !important;
}

.w-min-10 {
  min-inline-size: 10ch !important;
}

.w-ch-15 {
  inline-size: 15ch !important;
  max-inline-size: 15ch !important;
}

.w-max-15 {
  max-inline-size: 15ch !important;
}

.w-min-15 {
  min-inline-size: 15ch !important;
}

.w-ch-20 {
  inline-size: 20ch !important;
  max-inline-size: 20ch !important;
}

.w-max-20 {
  max-inline-size: 20ch !important;
}

.w-min-20 {
  min-inline-size: 20ch !important;
}

.w-ch-25 {
  inline-size: 25ch !important;
  max-inline-size: 25ch !important;
}

.w-max-25 {
  max-inline-size: 25ch !important;
}

.w-min-25 {
  min-inline-size: 25ch !important;
}

.w-ch-30 {
  inline-size: 30ch !important;
  max-inline-size: 30ch !important;
}

.w-max-30 {
  max-inline-size: 30ch !important;
}

.w-min-30 {
  min-inline-size: 30ch !important;
}

.block {
  display: block !important;
  inline-size: 100% !important;
}

@media (min-width: 16em) {
  .xxs\:block {
    display: block !important;
    inline-size: 100% !important;
  }
}
@media (min-width: 32em) {
  .xs\:block {
    display: block !important;
    inline-size: 100% !important;
  }
}
@media (min-width: 48em) {
  .sm\:block {
    display: block !important;
    inline-size: 100% !important;
  }
}
@media (min-width: 64em) {
  .md\:block {
    display: block !important;
    inline-size: 100% !important;
  }
}
@media (min-width: 80em) {
  .lg\:block {
    display: block !important;
    inline-size: 100% !important;
  }
}
@media (min-width: 96em) {
  .xl\:block {
    display: block !important;
    inline-size: 100% !important;
  }
}
@media (min-width: 112em) {
  .xxl\:block {
    display: block !important;
    inline-size: 100% !important;
  }
}
.inline-block {
  display: inline-block !important;
  inline-size: unset !important;
}

@media (min-width: 16em) {
  .xxs\:inline-block {
    display: inline-block !important;
    inline-size: unset !important;
  }
}
@media (min-width: 32em) {
  .xs\:inline-block {
    display: inline-block !important;
    inline-size: unset !important;
  }
}
@media (min-width: 48em) {
  .sm\:inline-block {
    display: inline-block !important;
    inline-size: unset !important;
  }
}
@media (min-width: 64em) {
  .md\:inline-block {
    display: inline-block !important;
    inline-size: unset !important;
  }
}
@media (min-width: 80em) {
  .lg\:inline-block {
    display: inline-block !important;
    inline-size: unset !important;
  }
}
@media (min-width: 96em) {
  .xl\:inline-block {
    display: inline-block !important;
    inline-size: unset !important;
  }
}
@media (min-width: 112em) {
  .xxl\:inline-block {
    display: inline-block !important;
    inline-size: unset !important;
  }
}
.inline {
  display: inline !important;
}

@media (min-width: 16em) {
  .xxs\:inline {
    display: inline !important;
  }
}
@media (min-width: 32em) {
  .xs\:inline {
    display: inline !important;
  }
}
@media (min-width: 48em) {
  .sm\:inline {
    display: inline !important;
  }
}
@media (min-width: 64em) {
  .md\:inline {
    display: inline !important;
  }
}
@media (min-width: 80em) {
  .lg\:inline {
    display: inline !important;
  }
}
@media (min-width: 96em) {
  .xl\:inline {
    display: inline !important;
  }
}
@media (min-width: 112em) {
  .xxl\:inline {
    display: inline !important;
  }
}
.contents {
  display: contents !important;
}

@media (min-width: 16em) {
  .xxs\:contents {
    display: contents !important;
  }
}
@media (min-width: 32em) {
  .xs\:contents {
    display: contents !important;
  }
}
@media (min-width: 48em) {
  .sm\:contents {
    display: contents !important;
  }
}
@media (min-width: 64em) {
  .md\:contents {
    display: contents !important;
  }
}
@media (min-width: 80em) {
  .lg\:contents {
    display: contents !important;
  }
}
@media (min-width: 96em) {
  .xl\:contents {
    display: contents !important;
  }
}
@media (min-width: 112em) {
  .xxl\:contents {
    display: contents !important;
  }
}
.revert {
  display: revert !important;
}

@media (min-width: 16em) {
  .xxs\:revert {
    display: revert !important;
  }
}
@media (min-width: 32em) {
  .xs\:revert {
    display: revert !important;
  }
}
@media (min-width: 48em) {
  .sm\:revert {
    display: revert !important;
  }
}
@media (min-width: 64em) {
  .md\:revert {
    display: revert !important;
  }
}
@media (min-width: 80em) {
  .lg\:revert {
    display: revert !important;
  }
}
@media (min-width: 96em) {
  .xl\:revert {
    display: revert !important;
  }
}
@media (min-width: 112em) {
  .xxl\:revert {
    display: revert !important;
  }
}
.flow-root {
  display: flow-root !important;
}

@media (min-width: 16em) {
  .xxs\:flow-root {
    display: flow-root !important;
  }
}
@media (min-width: 32em) {
  .xs\:flow-root {
    display: flow-root !important;
  }
}
@media (min-width: 48em) {
  .sm\:flow-root {
    display: flow-root !important;
  }
}
@media (min-width: 64em) {
  .md\:flow-root {
    display: flow-root !important;
  }
}
@media (min-width: 80em) {
  .lg\:flow-root {
    display: flow-root !important;
  }
}
@media (min-width: 96em) {
  .xl\:flow-root {
    display: flow-root !important;
  }
}
@media (min-width: 112em) {
  .xxl\:flow-root {
    display: flow-root !important;
  }
}
.revert {
  display: list-item !important;
}

@media (min-width: 16em) {
  .xxs\:list-item {
    display: list-item !important;
  }
}
@media (min-width: 32em) {
  .xs\:list-item {
    display: list-item !important;
  }
}
@media (min-width: 48em) {
  .sm\:list-item {
    display: list-item !important;
  }
}
@media (min-width: 64em) {
  .md\:list-item {
    display: list-item !important;
  }
}
@media (min-width: 80em) {
  .lg\:list-item {
    display: list-item !important;
  }
}
@media (min-width: 96em) {
  .xl\:list-item {
    display: list-item !important;
  }
}
@media (min-width: 112em) {
  .xxl\:list-item {
    display: list-item !important;
  }
}
.inline-flex {
  display: inline-flex !important;
}

@media (min-width: 16em) {
  .xxs\:inline-flex {
    display: inline-flex;
  }
}

@media (min-width: 32em) {
  .xs\:inline-flex {
    display: inline-flex;
  }
}

@media (min-width: 48em) {
  .sm\:inline-flex {
    display: inline-flex;
  }
}

@media (min-width: 64em) {
  .md\:inline-flex {
    display: inline-flex;
  }
}

@media (min-width: 80em) {
  .lg\:inline-flex {
    display: inline-flex;
  }
}

@media (min-width: 96em) {
  .xl\:inline-flex {
    display: inline-flex;
  }
}

@media (min-width: 112em) {
  .xxl\:inline-flex {
    display: inline-flex;
  }
}

.flex {
  display: flex !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
.flex-row {
  flex-direction: row !important;
}
.flex-row-reverse {
  flex-direction: row-reverse !important;
}
.flex-col {
  flex-direction: column !important;
}
.flex-col-reverse {
  flex-direction: column-reverse !important;
}
.flex-grow-equal > * {
  flex: 1 !important;
}
.flex-grow-auto > * {
  flex: auto !important;
}

@media (min-width: 16em) {
  .xxs\:flex {
    display: flex;
  }
}

@media (min-width: 32em) {
  .xs\:flex {
    display: flex;
  }
}

@media (min-width: 48em) {
  .sm\:flex {
    display: flex;
  }
}

@media (min-width: 64em) {
  .md\:flex {
    display: flex;
  }
}

@media (min-width: 80em) {
  .lg\:flex {
    display: flex;
  }
}

@media (min-width: 96em) {
  .xl\:flex {
    display: flex;
  }
}

@media (min-width: 112em) {
  .xxl\:flex {
    display: flex;
  }
}

.flex-gap {
  gap: var(--cr-size-fluid-base) !important;
}

.flex-1 {
  flex: 1 1 0% !important;
}

.flex-gap-small {
  gap: var(--cr-size-2) !important;
}

.flex-auto {
  flex: 1 1 auto !important;
}

.flex-initial {
  flex: 0 1 auto !important;
}

.flex-none {
  flex: none !important;
}

.flex-grow {
  flex-grow: 1 !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-shrink {
  flex-shrink: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-basis-0 {
  flex-basis: 0 !important;
}

.flex-centered {
  justify-content: center !important;
  align-items: center !important;
}

.float-left, .float-start {
  float: left !important;
}
.float-right, .float-end {
  float: right !important;
}

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

@media (min-width: 16em) {
  .xxs\:float-left,
  .xxs\:float-start {
    float: left !important;
  }
}

@media (min-width: 16em) {
  .xxs\:float-right,
  .xxs\:float-end {
    float: right !important;
  }
}

@media (min-width: 32em) {
  .xs\:float-left,
  .xs\:float-start {
    float: left !important;
  }
}

@media (min-width: 32em) {
  .xs\:float-right,
  .xs\:float-end {
    float: right !important;
  }
}

@media (min-width: 48em) {
  .sm\:float-left,
  .sm\:float-start {
    float: left !important;
  }
}

@media (min-width: 48em) {
  .sm\:float-right,
  .sm\:float-end {
    float: right !important;
  }
}

@media (min-width: 64em) {
  .md\:float-left,
  .md\:float-start {
    float: left !important;
  }
}

@media (min-width: 64em) {
  .md\:float-right,
  .md\:float-end {
    float: right !important;
  }
}

@media (min-width: 80em) {
  .lg\:float-left,
  .lg\:float-start {
    float: left !important;
  }
}

@media (min-width: 80em) {
  .lg\:float-right,
  .lg\:float-end {
    float: right !important;
  }
}

@media (min-width: 96em) {
  .xl\:float-left,
  .xl\:float-start {
    float: left !important;
  }
}

@media (min-width: 96em) {
  .xl\:float-right,
  .xl\:float-end {
    float: right !important;
  }
}

@media (min-width: 112em) {
  .xxl\:float-left,
  .xxl\:float-start {
    float: left !important;
  }
}

@media (min-width: 112em) {
  .xxl\:float-right,
  .xxl\:float-end {
    float: right !important;
  }
}

@supports (float: inline-start) or (float: inline-end) {
  .float-left, .float-start {
    float: inline-start !important;
  }
  .float-right, .float-end {
    float: inline-end !important;
  }
  @media (min-width: 16em) {
    .xxs\:float-left,
    .xxs\:float-start {
      float: inline-start !important;
    }
  }
  @media (min-width: 16em) {
    .xxs\:float-right,
    .xxs\:float-end {
      float: inline-end !important;
    }
  }
  @media (min-width: 32em) {
    .xs\:float-left,
    .xs\:float-start {
      float: inline-start !important;
    }
  }
  @media (min-width: 32em) {
    .xs\:float-right,
    .xs\:float-end {
      float: inline-end !important;
    }
  }
  @media (min-width: 48em) {
    .sm\:float-left,
    .sm\:float-start {
      float: inline-start !important;
    }
  }
  @media (min-width: 48em) {
    .sm\:float-right,
    .sm\:float-end {
      float: inline-end !important;
    }
  }
  @media (min-width: 64em) {
    .md\:float-left,
    .md\:float-start {
      float: inline-start !important;
    }
  }
  @media (min-width: 64em) {
    .md\:float-right,
    .md\:float-end {
      float: inline-end !important;
    }
  }
  @media (min-width: 80em) {
    .lg\:float-left,
    .lg\:float-start {
      float: inline-start !important;
    }
  }
  @media (min-width: 80em) {
    .lg\:float-right,
    .lg\:float-end {
      float: inline-end !important;
    }
  }
  @media (min-width: 96em) {
    .xl\:float-left,
    .xl\:float-start {
      float: inline-start !important;
    }
  }
  @media (min-width: 96em) {
    .xl\:float-right,
    .xl\:float-end {
      float: inline-end !important;
    }
  }
  @media (min-width: 112em) {
    .xxl\:float-left,
    .xxl\:float-start {
      float: inline-start !important;
    }
  }
  @media (min-width: 112em) {
    .xxl\:float-right,
    .xxl\:float-end {
      float: inline-end !important;
    }
  }
}
.bg-black-glass-1 {
  background-color: rgba(0, 0, 0, 0.39) !important;
}

.bg-black-glass-2 {
  background-color: rgba(0, 0, 0, 0.55) !important;
}

.bg-black-glass-3 {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.bg-black-glass-4 {
  background-color: rgba(0, 0, 0, 0.82) !important;
}

.bg-black-glass-5 {
  background-color: rgba(0, 0, 0, 0.95) !important;
}

.bg-white-glass-1 {
  background-color: rgba(255, 255, 255, 0.39) !important;
}

.bg-white-glass-2 {
  background-color: rgba(255, 255, 255, 0.55) !important;
}

.bg-white-glass-3 {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

.bg-white-glass-4 {
  background-color: rgba(255, 255, 255, 0.82) !important;
}

.bg-white-glass-5 {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .bg-black-glass-1 {
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: saturate(180%) blur(2px);
  }
  .bg-black-glass-2 {
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: saturate(180%) blur(3px);
  }
  .bg-black-glass-3 {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: saturate(180%) blur(5px);
  }
  .bg-black-glass-4 {
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: saturate(180%) blur(8px);
  }
  .bg-black-glass-5 {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .bg-white-glass-1 {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: saturate(180%) blur(2px);
  }
  .bg-white-glass-2 {
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: saturate(180%) blur(3px);
  }
  .bg-white-glass-3 {
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: saturate(180%) blur(5px);
  }
  .bg-white-glass-4 {
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: saturate(180%) blur(8px);
  }
  .bg-white-glass-5 {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
.grid {
  display: grid;
}

@media (min-width: 16em) {
  .xxs\:grid {
    display: grid;
  }
}
@media (min-width: 32em) {
  .xs\:grid {
    display: grid;
  }
}
@media (min-width: 48em) {
  .sm\:grid {
    display: grid;
  }
}
@media (min-width: 64em) {
  .md\:grid {
    display: grid;
  }
}
@media (min-width: 80em) {
  .lg\:grid {
    display: grid;
  }
}
@media (min-width: 96em) {
  .xl\:grid {
    display: grid;
  }
}
@media (min-width: 112em) {
  .xxl\:grid {
    display: grid;
  }
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(1rem, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(1rem, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(1rem, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(1rem, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(1rem, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(1rem, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(1rem, 1fr));
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(1rem, 1fr));
}
.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(1rem, 1fr));
}
.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(1rem, 1fr));
}
.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(1rem, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(1rem, 1fr));
}
.grid-cols-auto-1 {
  grid-template-columns: repeat(1, minmax(1rem, auto));
}
.grid-cols-auto-2 {
  grid-template-columns: repeat(2, minmax(1rem, auto));
}
.grid-cols-auto-3 {
  grid-template-columns: repeat(3, minmax(1rem, auto));
}
.grid-cols-auto-4 {
  grid-template-columns: repeat(4, minmax(1rem, auto));
}
.grid-cols-auto-5 {
  grid-template-columns: repeat(5, minmax(1rem, auto));
}
.grid-cols-auto-6 {
  grid-template-columns: repeat(6, minmax(1rem, auto));
}
.grid-cols-auto-7 {
  grid-template-columns: repeat(7, minmax(1rem, auto));
}
.grid-cols-auto-8 {
  grid-template-columns: repeat(8, minmax(1rem, auto));
}
.grid-cols-auto-9 {
  grid-template-columns: repeat(9, minmax(1rem, auto));
}
.grid-cols-auto-10 {
  grid-template-columns: repeat(10, minmax(1rem, auto));
}
.grid-cols-auto-11 {
  grid-template-columns: repeat(11, minmax(1rem, auto));
}
.grid-cols-auto-12 {
  grid-template-columns: repeat(12, minmax(1rem, auto));
}
.grid-cols-auto {
  grid-auto-columns: auto;
}
.grid-cols-auto-min {
  grid-auto-columns: min-content;
}
.grid-cols-auto-max {
  grid-auto-columns: max-content;
}
.grid-cols-auto-fr {
  grid-auto-columns: minmax(1rem, 1fr);
}
.grid-cols-none {
  grid-template-columns: none;
}

.grid-col-1 {
  grid-column: 1;
}
.grid-col-2 {
  grid-column: 2;
}
.grid-col-3 {
  grid-column: 3;
}
.grid-col-4 {
  grid-column: 4;
}
.grid-col-5 {
  grid-column: 5;
}
.grid-col-6 {
  grid-column: 6;
}
.grid-col-7 {
  grid-column: 7;
}
.grid-col-8 {
  grid-column: 8;
}
.grid-col-9 {
  grid-column: 9;
}
.grid-col-10 {
  grid-column: 10;
}
.grid-col-11 {
  grid-column: 11;
}
.grid-col-12 {
  grid-column: 12;
}
.grid-col-span-1 {
  grid-column: span 1/span 1;
}
.grid-col-span-2 {
  grid-column: span 2/span 2;
}
.grid-col-span-3 {
  grid-column: span 3/span 3;
}
.grid-col-span-4 {
  grid-column: span 4/span 4;
}
.grid-col-span-5 {
  grid-column: span 5/span 5;
}
.grid-col-span-6 {
  grid-column: span 6/span 6;
}
.grid-col-span-7 {
  grid-column: span 7/span 7;
}
.grid-col-span-8 {
  grid-column: span 8/span 8;
}
.grid-col-span-9 {
  grid-column: span 9/span 9;
}
.grid-col-span-10 {
  grid-column: span 10/span 10;
}
.grid-col-span-11 {
  grid-column: span 11/span 11;
}
.grid-col-span-12 {
  grid-column: span 12/span 12;
}
.grid-col-span-full {
  grid-column: 1/-1;
}
.grid-col-auto {
  grid-column: auto;
}
.grid-col-start-1 {
  grid-column-start: 1;
}
.grid-col-start-2 {
  grid-column-start: 2;
}
.grid-col-start-3 {
  grid-column-start: 3;
}
.grid-col-start-4 {
  grid-column-start: 4;
}
.grid-col-start-5 {
  grid-column-start: 5;
}
.grid-col-start-6 {
  grid-column-start: 6;
}
.grid-col-start-7 {
  grid-column-start: 7;
}
.grid-col-start-8 {
  grid-column-start: 8;
}
.grid-col-start-9 {
  grid-column-start: 9;
}
.grid-col-start-10 {
  grid-column-start: 10;
}
.grid-col-start-11 {
  grid-column-start: 11;
}
.grid-col-start-12 {
  grid-column-start: 12;
}
.grid-col-start-auto {
  grid-column-start: auto;
}
.grid-col-end-1 {
  grid-column-end: 1;
}
.grid-col-end-2 {
  grid-column-end: 2;
}
.grid-col-end-3 {
  grid-column-end: 3;
}
.grid-col-end-4 {
  grid-column-end: 4;
}
.grid-col-end-5 {
  grid-column-end: 5;
}
.grid-col-end-6 {
  grid-column-end: 6;
}
.grid-col-end-7 {
  grid-column-end: 7;
}
.grid-col-end-8 {
  grid-column-end: 8;
}
.grid-col-end-9 {
  grid-column-end: 9;
}
.grid-col-end-10 {
  grid-column-end: 10;
}
.grid-col-end-11 {
  grid-column-end: 11;
}
.grid-col-end-auto {
  grid-column-end: auto;
}

.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(1rem, 1fr));
}
.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(1rem, 1fr));
}
.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(1rem, 1fr));
}
.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(1rem, 1fr));
}
.grid-rows-5 {
  grid-template-rows: repeat(5, minmax(1rem, 1fr));
}
.grid-rows-6 {
  grid-template-rows: repeat(6, minmax(1rem, 1fr));
}
.grid-rows-none {
  grid-template-rows: none;
}
.grid-rows-auto {
  grid-auto-rows: auto;
}
.grid-rows-auto-min {
  grid-auto-rows: min-content;
}
.grid-rows-auto-max {
  grid-auto-rows: max-content;
}
.grid-rows-auto-fr {
  grid-auto-rows: minmax(1rem, 1fr);
}

.grid-row-1 {
  grid-row: 1;
}
.grid-row-2 {
  grid-row: 2;
}
.grid-row-3 {
  grid-row: 3;
}
.grid-row-4 {
  grid-row: 4;
}
.grid-row-5 {
  grid-row: 5;
}
.grid-row-6 {
  grid-row: 6;
}
.grid-row-span-1 {
  grid-row: span 1/span 1;
}
.grid-row-span-2 {
  grid-row: span 2/span 2;
}
.grid-row-span-3 {
  grid-row: span 3/span 3;
}
.grid-row-span-4 {
  grid-row: span 4/span 4;
}
.grid-row-span-5 {
  grid-row: span 5/span 5;
}
.grid-row-span-6 {
  grid-row: span 6/span 6;
}
.grid-row-span-full {
  grid-row: 1/-1;
}
.grid-row-auto {
  grid-row: auto;
}
.grid-row-start-1 {
  grid-row-start: 1;
}
.grid-row-start-2 {
  grid-row-start: 2;
}
.grid-row-start-3 {
  grid-row-start: 3;
}
.grid-row-start-4 {
  grid-row-start: 4;
}
.grid-row-start-5 {
  grid-row-start: 5;
}
.grid-row-start-6 {
  grid-row-start: 6;
}
.grid-row-start-auto {
  grid-row-start: auto;
}
.grid-row-end-1 {
  grid-row-end: 1;
}
.grid-row-end-2 {
  grid-row-end: 2;
}
.grid-row-end-3 {
  grid-row-end: 3;
}
.grid-row-end-4 {
  grid-row-end: 4;
}
.grid-row-end-5 {
  grid-row-end: 5;
}
.grid-row-end-6 {
  grid-row-end: 6;
}
.grid-row-end-auto {
  grid-row-end: auto;
}

.gap {
  gap: var(--cr-size-fluid-base);
}
.gap-sm {
  gap: var(--cr-size-fluid-narrow);
}
.gap-lg {
  gap: var(--cr-size-fluid-wide);
}

.col-gap {
  column-gap: var(--cr-size-fluid-base);
  row-gap: 0;
}
.col-gap-sm {
  column-gap: var(--cr-size-fluid-narrow);
  row-gap: 0;
}
.col-gap-lg {
  column-gap: var(--cr-size-fluid-wide);
  row-gap: 0;
}

.row-gap {
  column-gap: 0;
  row-gap: var(--cr-size-fluid-base);
}
.row-gap-sm {
  column-gap: 0;
  row-gap: var(--cr-size-fluid-narrow);
}
.row-gap-lg {
  column-gap: 0;
  row-gap: var(--cr-size-fluid-wide);
}

@media (min-width: 16em) {
  .xxs\:col-1 {
    grid-template-columns: repeat(1, minmax(1rem, 1fr));
  }
  .xxs\:col-2 {
    grid-template-columns: repeat(2, minmax(1rem, 1fr));
  }
  .xxs\:col-3 {
    grid-template-columns: repeat(3, minmax(1rem, 1fr));
  }
  .xxs\:col-4 {
    grid-template-columns: repeat(4, minmax(1rem, 1fr));
  }
  .xxs\:col-5 {
    grid-template-columns: repeat(5, minmax(1rem, 1fr));
  }
  .xxs\:col-6 {
    grid-template-columns: repeat(6, minmax(1rem, 1fr));
  }
  .xxs\:col-7 {
    grid-template-columns: repeat(7, minmax(1rem, 1fr));
  }
  .xxs\:col-8 {
    grid-template-columns: repeat(8, minmax(1rem, 1fr));
  }
  .xxs\:col-9 {
    grid-template-columns: repeat(9, minmax(1rem, 1fr));
  }
  .xxs\:col-10 {
    grid-template-columns: repeat(10, minmax(1rem, 1fr));
  }
  .xxs\:col-11 {
    grid-template-columns: repeat(11, minmax(1rem, 1fr));
  }
  .xxs\:col-12 {
    grid-template-columns: repeat(12, minmax(1rem, 1fr));
  }
  .xxs\:col-auto-1 {
    grid-template-columns: repeat(1, minmax(1rem, auto));
  }
  .xxs\:col-auto-2 {
    grid-template-columns: repeat(2, minmax(1rem, auto));
  }
  .xxs\:col-auto-3 {
    grid-template-columns: repeat(3, minmax(1rem, auto));
  }
  .xxs\:col-auto-4 {
    grid-template-columns: repeat(4, minmax(1rem, auto));
  }
  .xxs\:col-auto-5 {
    grid-template-columns: repeat(5, minmax(1rem, auto));
  }
  .xxs\:col-auto-6 {
    grid-template-columns: repeat(6, minmax(1rem, auto));
  }
  .xxs\:col-auto-7 {
    grid-template-columns: repeat(7, minmax(1rem, auto));
  }
  .xxs\:col-auto-8 {
    grid-template-columns: repeat(8, minmax(1rem, auto));
  }
  .xxs\:col-auto-9 {
    grid-template-columns: repeat(9, minmax(1rem, auto));
  }
  .xxs\:col-auto-10 {
    grid-template-columns: repeat(10, minmax(1rem, auto));
  }
  .xxs\:col-auto-11 {
    grid-template-columns: repeat(11, minmax(1rem, auto));
  }
  .xxs\:col-auto-12 {
    grid-template-columns: repeat(12, minmax(1rem, auto));
  }
  .xxs\:col-auto {
    grid-auto-columns: auto;
  }
  .xxs\:col-auto-min {
    grid-auto-columns: min-content;
  }
  .xxs\:col-auto-max {
    grid-auto-columns: max-content;
  }
  .xxs\:col-auto-fr {
    grid-auto-columns: minmax(1rem, 1fr);
  }
  .xxs\:col-none {
    grid-template-columns: none;
  }
  .xxs\:row-1 {
    grid-template-rows: repeat(1, minmax(1rem, 1fr));
  }
  .xxs\:row-2 {
    grid-template-rows: repeat(2, minmax(1rem, 1fr));
  }
  .xxs\:row-3 {
    grid-template-rows: repeat(3, minmax(1rem, 1fr));
  }
  .xxs\:row-4 {
    grid-template-rows: repeat(4, minmax(1rem, 1fr));
  }
  .xxs\:row-5 {
    grid-template-rows: repeat(5, minmax(1rem, 1fr));
  }
  .xxs\:row-6 {
    grid-template-rows: repeat(6, minmax(1rem, 1fr));
  }
  .xxs\:row-none {
    grid-template-rows: none;
  }
  .xxs\:row-auto {
    grid-auto-rows: auto;
  }
  .xxs\:row-auto-min {
    grid-auto-rows: min-content;
  }
  .xxs\:row-auto-max {
    grid-auto-rows: max-content;
  }
  .xxs\:row-auto-fr {
    grid-auto-rows: minmax(1rem, 1fr);
  }
  .xxs\:gap {
    gap: var(--cr-size-fluid-base);
  }
  .xxs\:gap-sm {
    gap: var(--cr-size-fluid-narrow);
  }
  .xxs\:gap-lg {
    gap: var(--cr-size-fluid-wide);
  }
  .xxs\:col-gap {
    column-gap: var(--cr-size-fluid-base);
    row-gap: 0;
  }
  .xxs\:col-gap-sm {
    column-gap: var(--cr-size-fluid-narrow);
    row-gap: 0;
  }
  .xxs\:col-gap-lg {
    column-gap: var(--cr-size-fluid-wide);
    row-gap: 0;
  }
  .xxs\:row-gap {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-base);
  }
  .xxs\:row-gap-sm {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-narrow);
  }
  .xxs\:row-gap-lg {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-wide);
  }
}

@media (min-width: 32em) {
  .xs\:col-1 {
    grid-template-columns: repeat(1, minmax(1rem, 1fr));
  }
  .xs\:col-2 {
    grid-template-columns: repeat(2, minmax(1rem, 1fr));
  }
  .xs\:col-3 {
    grid-template-columns: repeat(3, minmax(1rem, 1fr));
  }
  .xs\:col-4 {
    grid-template-columns: repeat(4, minmax(1rem, 1fr));
  }
  .xs\:col-5 {
    grid-template-columns: repeat(5, minmax(1rem, 1fr));
  }
  .xs\:col-6 {
    grid-template-columns: repeat(6, minmax(1rem, 1fr));
  }
  .xs\:col-7 {
    grid-template-columns: repeat(7, minmax(1rem, 1fr));
  }
  .xs\:col-8 {
    grid-template-columns: repeat(8, minmax(1rem, 1fr));
  }
  .xs\:col-9 {
    grid-template-columns: repeat(9, minmax(1rem, 1fr));
  }
  .xs\:col-10 {
    grid-template-columns: repeat(10, minmax(1rem, 1fr));
  }
  .xs\:col-11 {
    grid-template-columns: repeat(11, minmax(1rem, 1fr));
  }
  .xs\:col-12 {
    grid-template-columns: repeat(12, minmax(1rem, 1fr));
  }
  .xs\:col-auto-1 {
    grid-template-columns: repeat(1, minmax(1rem, auto));
  }
  .xs\:col-auto-2 {
    grid-template-columns: repeat(2, minmax(1rem, auto));
  }
  .xs\:col-auto-3 {
    grid-template-columns: repeat(3, minmax(1rem, auto));
  }
  .xs\:col-auto-4 {
    grid-template-columns: repeat(4, minmax(1rem, auto));
  }
  .xs\:col-auto-5 {
    grid-template-columns: repeat(5, minmax(1rem, auto));
  }
  .xs\:col-auto-6 {
    grid-template-columns: repeat(6, minmax(1rem, auto));
  }
  .xs\:col-auto-7 {
    grid-template-columns: repeat(7, minmax(1rem, auto));
  }
  .xs\:col-auto-8 {
    grid-template-columns: repeat(8, minmax(1rem, auto));
  }
  .xs\:col-auto-9 {
    grid-template-columns: repeat(9, minmax(1rem, auto));
  }
  .xs\:col-auto-10 {
    grid-template-columns: repeat(10, minmax(1rem, auto));
  }
  .xs\:col-auto-11 {
    grid-template-columns: repeat(11, minmax(1rem, auto));
  }
  .xs\:col-auto-12 {
    grid-template-columns: repeat(12, minmax(1rem, auto));
  }
  .xs\:col-auto {
    grid-auto-columns: auto;
  }
  .xs\:col-auto-min {
    grid-auto-columns: min-content;
  }
  .xs\:col-auto-max {
    grid-auto-columns: max-content;
  }
  .xs\:col-auto-fr {
    grid-auto-columns: minmax(1rem, 1fr);
  }
  .xs\:col-none {
    grid-template-columns: none;
  }
  .xs\:row-1 {
    grid-template-rows: repeat(1, minmax(1rem, 1fr));
  }
  .xs\:row-2 {
    grid-template-rows: repeat(2, minmax(1rem, 1fr));
  }
  .xs\:row-3 {
    grid-template-rows: repeat(3, minmax(1rem, 1fr));
  }
  .xs\:row-4 {
    grid-template-rows: repeat(4, minmax(1rem, 1fr));
  }
  .xs\:row-5 {
    grid-template-rows: repeat(5, minmax(1rem, 1fr));
  }
  .xs\:row-6 {
    grid-template-rows: repeat(6, minmax(1rem, 1fr));
  }
  .xs\:row-none {
    grid-template-rows: none;
  }
  .xs\:row-auto {
    grid-auto-rows: auto;
  }
  .xs\:row-auto-min {
    grid-auto-rows: min-content;
  }
  .xs\:row-auto-max {
    grid-auto-rows: max-content;
  }
  .xs\:row-auto-fr {
    grid-auto-rows: minmax(1rem, 1fr);
  }
  .xs\:gap {
    gap: var(--cr-size-fluid-base);
  }
  .xs\:gap-sm {
    gap: var(--cr-size-fluid-narrow);
  }
  .xs\:gap-lg {
    gap: var(--cr-size-fluid-wide);
  }
  .xs\:col-gap {
    column-gap: var(--cr-size-fluid-base);
    row-gap: 0;
  }
  .xs\:col-gap-sm {
    column-gap: var(--cr-size-fluid-narrow);
    row-gap: 0;
  }
  .xs\:col-gap-lg {
    column-gap: var(--cr-size-fluid-wide);
    row-gap: 0;
  }
  .xs\:row-gap {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-base);
  }
  .xs\:row-gap-sm {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-narrow);
  }
  .xs\:row-gap-lg {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-wide);
  }
}

@media (min-width: 48em) {
  .sm\:col-1 {
    grid-template-columns: repeat(1, minmax(1rem, 1fr));
  }
  .sm\:col-2 {
    grid-template-columns: repeat(2, minmax(1rem, 1fr));
  }
  .sm\:col-3 {
    grid-template-columns: repeat(3, minmax(1rem, 1fr));
  }
  .sm\:col-4 {
    grid-template-columns: repeat(4, minmax(1rem, 1fr));
  }
  .sm\:col-5 {
    grid-template-columns: repeat(5, minmax(1rem, 1fr));
  }
  .sm\:col-6 {
    grid-template-columns: repeat(6, minmax(1rem, 1fr));
  }
  .sm\:col-7 {
    grid-template-columns: repeat(7, minmax(1rem, 1fr));
  }
  .sm\:col-8 {
    grid-template-columns: repeat(8, minmax(1rem, 1fr));
  }
  .sm\:col-9 {
    grid-template-columns: repeat(9, minmax(1rem, 1fr));
  }
  .sm\:col-10 {
    grid-template-columns: repeat(10, minmax(1rem, 1fr));
  }
  .sm\:col-11 {
    grid-template-columns: repeat(11, minmax(1rem, 1fr));
  }
  .sm\:col-12 {
    grid-template-columns: repeat(12, minmax(1rem, 1fr));
  }
  .sm\:col-auto-1 {
    grid-template-columns: repeat(1, minmax(1rem, auto));
  }
  .sm\:col-auto-2 {
    grid-template-columns: repeat(2, minmax(1rem, auto));
  }
  .sm\:col-auto-3 {
    grid-template-columns: repeat(3, minmax(1rem, auto));
  }
  .sm\:col-auto-4 {
    grid-template-columns: repeat(4, minmax(1rem, auto));
  }
  .sm\:col-auto-5 {
    grid-template-columns: repeat(5, minmax(1rem, auto));
  }
  .sm\:col-auto-6 {
    grid-template-columns: repeat(6, minmax(1rem, auto));
  }
  .sm\:col-auto-7 {
    grid-template-columns: repeat(7, minmax(1rem, auto));
  }
  .sm\:col-auto-8 {
    grid-template-columns: repeat(8, minmax(1rem, auto));
  }
  .sm\:col-auto-9 {
    grid-template-columns: repeat(9, minmax(1rem, auto));
  }
  .sm\:col-auto-10 {
    grid-template-columns: repeat(10, minmax(1rem, auto));
  }
  .sm\:col-auto-11 {
    grid-template-columns: repeat(11, minmax(1rem, auto));
  }
  .sm\:col-auto-12 {
    grid-template-columns: repeat(12, minmax(1rem, auto));
  }
  .sm\:col-auto {
    grid-auto-columns: auto;
  }
  .sm\:col-auto-min {
    grid-auto-columns: min-content;
  }
  .sm\:col-auto-max {
    grid-auto-columns: max-content;
  }
  .sm\:col-auto-fr {
    grid-auto-columns: minmax(1rem, 1fr);
  }
  .sm\:col-none {
    grid-template-columns: none;
  }
  .sm\:row-1 {
    grid-template-rows: repeat(1, minmax(1rem, 1fr));
  }
  .sm\:row-2 {
    grid-template-rows: repeat(2, minmax(1rem, 1fr));
  }
  .sm\:row-3 {
    grid-template-rows: repeat(3, minmax(1rem, 1fr));
  }
  .sm\:row-4 {
    grid-template-rows: repeat(4, minmax(1rem, 1fr));
  }
  .sm\:row-5 {
    grid-template-rows: repeat(5, minmax(1rem, 1fr));
  }
  .sm\:row-6 {
    grid-template-rows: repeat(6, minmax(1rem, 1fr));
  }
  .sm\:row-none {
    grid-template-rows: none;
  }
  .sm\:row-auto {
    grid-auto-rows: auto;
  }
  .sm\:row-auto-min {
    grid-auto-rows: min-content;
  }
  .sm\:row-auto-max {
    grid-auto-rows: max-content;
  }
  .sm\:row-auto-fr {
    grid-auto-rows: minmax(1rem, 1fr);
  }
  .sm\:gap {
    gap: var(--cr-size-fluid-base);
  }
  .sm\:gap-sm {
    gap: var(--cr-size-fluid-narrow);
  }
  .sm\:gap-lg {
    gap: var(--cr-size-fluid-wide);
  }
  .sm\:col-gap {
    column-gap: var(--cr-size-fluid-base);
    row-gap: 0;
  }
  .sm\:col-gap-sm {
    column-gap: var(--cr-size-fluid-narrow);
    row-gap: 0;
  }
  .sm\:col-gap-lg {
    column-gap: var(--cr-size-fluid-wide);
    row-gap: 0;
  }
  .sm\:row-gap {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-base);
  }
  .sm\:row-gap-sm {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-narrow);
  }
  .sm\:row-gap-lg {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-wide);
  }
}

@media (min-width: 64em) {
  .md\:col-1 {
    grid-template-columns: repeat(1, minmax(1rem, 1fr));
  }
  .md\:col-2 {
    grid-template-columns: repeat(2, minmax(1rem, 1fr));
  }
  .md\:col-3 {
    grid-template-columns: repeat(3, minmax(1rem, 1fr));
  }
  .md\:col-4 {
    grid-template-columns: repeat(4, minmax(1rem, 1fr));
  }
  .md\:col-5 {
    grid-template-columns: repeat(5, minmax(1rem, 1fr));
  }
  .md\:col-6 {
    grid-template-columns: repeat(6, minmax(1rem, 1fr));
  }
  .md\:col-7 {
    grid-template-columns: repeat(7, minmax(1rem, 1fr));
  }
  .md\:col-8 {
    grid-template-columns: repeat(8, minmax(1rem, 1fr));
  }
  .md\:col-9 {
    grid-template-columns: repeat(9, minmax(1rem, 1fr));
  }
  .md\:col-10 {
    grid-template-columns: repeat(10, minmax(1rem, 1fr));
  }
  .md\:col-11 {
    grid-template-columns: repeat(11, minmax(1rem, 1fr));
  }
  .md\:col-12 {
    grid-template-columns: repeat(12, minmax(1rem, 1fr));
  }
  .md\:col-auto-1 {
    grid-template-columns: repeat(1, minmax(1rem, auto));
  }
  .md\:col-auto-2 {
    grid-template-columns: repeat(2, minmax(1rem, auto));
  }
  .md\:col-auto-3 {
    grid-template-columns: repeat(3, minmax(1rem, auto));
  }
  .md\:col-auto-4 {
    grid-template-columns: repeat(4, minmax(1rem, auto));
  }
  .md\:col-auto-5 {
    grid-template-columns: repeat(5, minmax(1rem, auto));
  }
  .md\:col-auto-6 {
    grid-template-columns: repeat(6, minmax(1rem, auto));
  }
  .md\:col-auto-7 {
    grid-template-columns: repeat(7, minmax(1rem, auto));
  }
  .md\:col-auto-8 {
    grid-template-columns: repeat(8, minmax(1rem, auto));
  }
  .md\:col-auto-9 {
    grid-template-columns: repeat(9, minmax(1rem, auto));
  }
  .md\:col-auto-10 {
    grid-template-columns: repeat(10, minmax(1rem, auto));
  }
  .md\:col-auto-11 {
    grid-template-columns: repeat(11, minmax(1rem, auto));
  }
  .md\:col-auto-12 {
    grid-template-columns: repeat(12, minmax(1rem, auto));
  }
  .md\:col-auto {
    grid-auto-columns: auto;
  }
  .md\:col-auto-min {
    grid-auto-columns: min-content;
  }
  .md\:col-auto-max {
    grid-auto-columns: max-content;
  }
  .md\:col-auto-fr {
    grid-auto-columns: minmax(1rem, 1fr);
  }
  .md\:col-none {
    grid-template-columns: none;
  }
  .md\:row-1 {
    grid-template-rows: repeat(1, minmax(1rem, 1fr));
  }
  .md\:row-2 {
    grid-template-rows: repeat(2, minmax(1rem, 1fr));
  }
  .md\:row-3 {
    grid-template-rows: repeat(3, minmax(1rem, 1fr));
  }
  .md\:row-4 {
    grid-template-rows: repeat(4, minmax(1rem, 1fr));
  }
  .md\:row-5 {
    grid-template-rows: repeat(5, minmax(1rem, 1fr));
  }
  .md\:row-6 {
    grid-template-rows: repeat(6, minmax(1rem, 1fr));
  }
  .md\:row-none {
    grid-template-rows: none;
  }
  .md\:row-auto {
    grid-auto-rows: auto;
  }
  .md\:row-auto-min {
    grid-auto-rows: min-content;
  }
  .md\:row-auto-max {
    grid-auto-rows: max-content;
  }
  .md\:row-auto-fr {
    grid-auto-rows: minmax(1rem, 1fr);
  }
  .md\:gap {
    gap: var(--cr-size-fluid-base);
  }
  .md\:gap-sm {
    gap: var(--cr-size-fluid-narrow);
  }
  .md\:gap-lg {
    gap: var(--cr-size-fluid-wide);
  }
  .md\:col-gap {
    column-gap: var(--cr-size-fluid-base);
    row-gap: 0;
  }
  .md\:col-gap-sm {
    column-gap: var(--cr-size-fluid-narrow);
    row-gap: 0;
  }
  .md\:col-gap-lg {
    column-gap: var(--cr-size-fluid-wide);
    row-gap: 0;
  }
  .md\:row-gap {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-base);
  }
  .md\:row-gap-sm {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-narrow);
  }
  .md\:row-gap-lg {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-wide);
  }
}

@media (min-width: 80em) {
  .lg\:col-1 {
    grid-template-columns: repeat(1, minmax(1rem, 1fr));
  }
  .lg\:col-2 {
    grid-template-columns: repeat(2, minmax(1rem, 1fr));
  }
  .lg\:col-3 {
    grid-template-columns: repeat(3, minmax(1rem, 1fr));
  }
  .lg\:col-4 {
    grid-template-columns: repeat(4, minmax(1rem, 1fr));
  }
  .lg\:col-5 {
    grid-template-columns: repeat(5, minmax(1rem, 1fr));
  }
  .lg\:col-6 {
    grid-template-columns: repeat(6, minmax(1rem, 1fr));
  }
  .lg\:col-7 {
    grid-template-columns: repeat(7, minmax(1rem, 1fr));
  }
  .lg\:col-8 {
    grid-template-columns: repeat(8, minmax(1rem, 1fr));
  }
  .lg\:col-9 {
    grid-template-columns: repeat(9, minmax(1rem, 1fr));
  }
  .lg\:col-10 {
    grid-template-columns: repeat(10, minmax(1rem, 1fr));
  }
  .lg\:col-11 {
    grid-template-columns: repeat(11, minmax(1rem, 1fr));
  }
  .lg\:col-12 {
    grid-template-columns: repeat(12, minmax(1rem, 1fr));
  }
  .lg\:col-auto-1 {
    grid-template-columns: repeat(1, minmax(1rem, auto));
  }
  .lg\:col-auto-2 {
    grid-template-columns: repeat(2, minmax(1rem, auto));
  }
  .lg\:col-auto-3 {
    grid-template-columns: repeat(3, minmax(1rem, auto));
  }
  .lg\:col-auto-4 {
    grid-template-columns: repeat(4, minmax(1rem, auto));
  }
  .lg\:col-auto-5 {
    grid-template-columns: repeat(5, minmax(1rem, auto));
  }
  .lg\:col-auto-6 {
    grid-template-columns: repeat(6, minmax(1rem, auto));
  }
  .lg\:col-auto-7 {
    grid-template-columns: repeat(7, minmax(1rem, auto));
  }
  .lg\:col-auto-8 {
    grid-template-columns: repeat(8, minmax(1rem, auto));
  }
  .lg\:col-auto-9 {
    grid-template-columns: repeat(9, minmax(1rem, auto));
  }
  .lg\:col-auto-10 {
    grid-template-columns: repeat(10, minmax(1rem, auto));
  }
  .lg\:col-auto-11 {
    grid-template-columns: repeat(11, minmax(1rem, auto));
  }
  .lg\:col-auto-12 {
    grid-template-columns: repeat(12, minmax(1rem, auto));
  }
  .lg\:col-auto {
    grid-auto-columns: auto;
  }
  .lg\:col-auto-min {
    grid-auto-columns: min-content;
  }
  .lg\:col-auto-max {
    grid-auto-columns: max-content;
  }
  .lg\:col-auto-fr {
    grid-auto-columns: minmax(1rem, 1fr);
  }
  .lg\:col-none {
    grid-template-columns: none;
  }
  .lg\:row-1 {
    grid-template-rows: repeat(1, minmax(1rem, 1fr));
  }
  .lg\:row-2 {
    grid-template-rows: repeat(2, minmax(1rem, 1fr));
  }
  .lg\:row-3 {
    grid-template-rows: repeat(3, minmax(1rem, 1fr));
  }
  .lg\:row-4 {
    grid-template-rows: repeat(4, minmax(1rem, 1fr));
  }
  .lg\:row-5 {
    grid-template-rows: repeat(5, minmax(1rem, 1fr));
  }
  .lg\:row-6 {
    grid-template-rows: repeat(6, minmax(1rem, 1fr));
  }
  .lg\:row-none {
    grid-template-rows: none;
  }
  .lg\:row-auto {
    grid-auto-rows: auto;
  }
  .lg\:row-auto-min {
    grid-auto-rows: min-content;
  }
  .lg\:row-auto-max {
    grid-auto-rows: max-content;
  }
  .lg\:row-auto-fr {
    grid-auto-rows: minmax(1rem, 1fr);
  }
  .lg\:gap {
    gap: var(--cr-size-fluid-base);
  }
  .lg\:gap-sm {
    gap: var(--cr-size-fluid-narrow);
  }
  .lg\:gap-lg {
    gap: var(--cr-size-fluid-wide);
  }
  .lg\:col-gap {
    column-gap: var(--cr-size-fluid-base);
    row-gap: 0;
  }
  .lg\:col-gap-sm {
    column-gap: var(--cr-size-fluid-narrow);
    row-gap: 0;
  }
  .lg\:col-gap-lg {
    column-gap: var(--cr-size-fluid-wide);
    row-gap: 0;
  }
  .lg\:row-gap {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-base);
  }
  .lg\:row-gap-sm {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-narrow);
  }
  .lg\:row-gap-lg {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-wide);
  }
}

@media (min-width: 96em) {
  .xl\:col-1 {
    grid-template-columns: repeat(1, minmax(1rem, 1fr));
  }
  .xl\:col-2 {
    grid-template-columns: repeat(2, minmax(1rem, 1fr));
  }
  .xl\:col-3 {
    grid-template-columns: repeat(3, minmax(1rem, 1fr));
  }
  .xl\:col-4 {
    grid-template-columns: repeat(4, minmax(1rem, 1fr));
  }
  .xl\:col-5 {
    grid-template-columns: repeat(5, minmax(1rem, 1fr));
  }
  .xl\:col-6 {
    grid-template-columns: repeat(6, minmax(1rem, 1fr));
  }
  .xl\:col-7 {
    grid-template-columns: repeat(7, minmax(1rem, 1fr));
  }
  .xl\:col-8 {
    grid-template-columns: repeat(8, minmax(1rem, 1fr));
  }
  .xl\:col-9 {
    grid-template-columns: repeat(9, minmax(1rem, 1fr));
  }
  .xl\:col-10 {
    grid-template-columns: repeat(10, minmax(1rem, 1fr));
  }
  .xl\:col-11 {
    grid-template-columns: repeat(11, minmax(1rem, 1fr));
  }
  .xl\:col-12 {
    grid-template-columns: repeat(12, minmax(1rem, 1fr));
  }
  .xl\:col-auto-1 {
    grid-template-columns: repeat(1, minmax(1rem, auto));
  }
  .xl\:col-auto-2 {
    grid-template-columns: repeat(2, minmax(1rem, auto));
  }
  .xl\:col-auto-3 {
    grid-template-columns: repeat(3, minmax(1rem, auto));
  }
  .xl\:col-auto-4 {
    grid-template-columns: repeat(4, minmax(1rem, auto));
  }
  .xl\:col-auto-5 {
    grid-template-columns: repeat(5, minmax(1rem, auto));
  }
  .xl\:col-auto-6 {
    grid-template-columns: repeat(6, minmax(1rem, auto));
  }
  .xl\:col-auto-7 {
    grid-template-columns: repeat(7, minmax(1rem, auto));
  }
  .xl\:col-auto-8 {
    grid-template-columns: repeat(8, minmax(1rem, auto));
  }
  .xl\:col-auto-9 {
    grid-template-columns: repeat(9, minmax(1rem, auto));
  }
  .xl\:col-auto-10 {
    grid-template-columns: repeat(10, minmax(1rem, auto));
  }
  .xl\:col-auto-11 {
    grid-template-columns: repeat(11, minmax(1rem, auto));
  }
  .xl\:col-auto-12 {
    grid-template-columns: repeat(12, minmax(1rem, auto));
  }
  .xl\:col-auto {
    grid-auto-columns: auto;
  }
  .xl\:col-auto-min {
    grid-auto-columns: min-content;
  }
  .xl\:col-auto-max {
    grid-auto-columns: max-content;
  }
  .xl\:col-auto-fr {
    grid-auto-columns: minmax(1rem, 1fr);
  }
  .xl\:col-none {
    grid-template-columns: none;
  }
  .xl\:row-1 {
    grid-template-rows: repeat(1, minmax(1rem, 1fr));
  }
  .xl\:row-2 {
    grid-template-rows: repeat(2, minmax(1rem, 1fr));
  }
  .xl\:row-3 {
    grid-template-rows: repeat(3, minmax(1rem, 1fr));
  }
  .xl\:row-4 {
    grid-template-rows: repeat(4, minmax(1rem, 1fr));
  }
  .xl\:row-5 {
    grid-template-rows: repeat(5, minmax(1rem, 1fr));
  }
  .xl\:row-6 {
    grid-template-rows: repeat(6, minmax(1rem, 1fr));
  }
  .xl\:row-none {
    grid-template-rows: none;
  }
  .xl\:row-auto {
    grid-auto-rows: auto;
  }
  .xl\:row-auto-min {
    grid-auto-rows: min-content;
  }
  .xl\:row-auto-max {
    grid-auto-rows: max-content;
  }
  .xl\:row-auto-fr {
    grid-auto-rows: minmax(1rem, 1fr);
  }
  .xl\:gap {
    gap: var(--cr-size-fluid-base);
  }
  .xl\:gap-sm {
    gap: var(--cr-size-fluid-narrow);
  }
  .xl\:gap-lg {
    gap: var(--cr-size-fluid-wide);
  }
  .xl\:col-gap {
    column-gap: var(--cr-size-fluid-base);
    row-gap: 0;
  }
  .xl\:col-gap-sm {
    column-gap: var(--cr-size-fluid-narrow);
    row-gap: 0;
  }
  .xl\:col-gap-lg {
    column-gap: var(--cr-size-fluid-wide);
    row-gap: 0;
  }
  .xl\:row-gap {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-base);
  }
  .xl\:row-gap-sm {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-narrow);
  }
  .xl\:row-gap-lg {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-wide);
  }
}

@media (min-width: 112em) {
  .xxl\:col-1 {
    grid-template-columns: repeat(1, minmax(1rem, 1fr));
  }
  .xxl\:col-2 {
    grid-template-columns: repeat(2, minmax(1rem, 1fr));
  }
  .xxl\:col-3 {
    grid-template-columns: repeat(3, minmax(1rem, 1fr));
  }
  .xxl\:col-4 {
    grid-template-columns: repeat(4, minmax(1rem, 1fr));
  }
  .xxl\:col-5 {
    grid-template-columns: repeat(5, minmax(1rem, 1fr));
  }
  .xxl\:col-6 {
    grid-template-columns: repeat(6, minmax(1rem, 1fr));
  }
  .xxl\:col-7 {
    grid-template-columns: repeat(7, minmax(1rem, 1fr));
  }
  .xxl\:col-8 {
    grid-template-columns: repeat(8, minmax(1rem, 1fr));
  }
  .xxl\:col-9 {
    grid-template-columns: repeat(9, minmax(1rem, 1fr));
  }
  .xxl\:col-10 {
    grid-template-columns: repeat(10, minmax(1rem, 1fr));
  }
  .xxl\:col-11 {
    grid-template-columns: repeat(11, minmax(1rem, 1fr));
  }
  .xxl\:col-12 {
    grid-template-columns: repeat(12, minmax(1rem, 1fr));
  }
  .xxl\:col-auto-1 {
    grid-template-columns: repeat(1, minmax(1rem, auto));
  }
  .xxl\:col-auto-2 {
    grid-template-columns: repeat(2, minmax(1rem, auto));
  }
  .xxl\:col-auto-3 {
    grid-template-columns: repeat(3, minmax(1rem, auto));
  }
  .xxl\:col-auto-4 {
    grid-template-columns: repeat(4, minmax(1rem, auto));
  }
  .xxl\:col-auto-5 {
    grid-template-columns: repeat(5, minmax(1rem, auto));
  }
  .xxl\:col-auto-6 {
    grid-template-columns: repeat(6, minmax(1rem, auto));
  }
  .xxl\:col-auto-7 {
    grid-template-columns: repeat(7, minmax(1rem, auto));
  }
  .xxl\:col-auto-8 {
    grid-template-columns: repeat(8, minmax(1rem, auto));
  }
  .xxl\:col-auto-9 {
    grid-template-columns: repeat(9, minmax(1rem, auto));
  }
  .xxl\:col-auto-10 {
    grid-template-columns: repeat(10, minmax(1rem, auto));
  }
  .xxl\:col-auto-11 {
    grid-template-columns: repeat(11, minmax(1rem, auto));
  }
  .xxl\:col-auto-12 {
    grid-template-columns: repeat(12, minmax(1rem, auto));
  }
  .xxl\:col-auto {
    grid-auto-columns: auto;
  }
  .xxl\:col-auto-min {
    grid-auto-columns: min-content;
  }
  .xxl\:col-auto-max {
    grid-auto-columns: max-content;
  }
  .xxl\:col-auto-fr {
    grid-auto-columns: minmax(1rem, 1fr);
  }
  .xxl\:col-none {
    grid-template-columns: none;
  }
  .xxl\:row-1 {
    grid-template-rows: repeat(1, minmax(1rem, 1fr));
  }
  .xxl\:row-2 {
    grid-template-rows: repeat(2, minmax(1rem, 1fr));
  }
  .xxl\:row-3 {
    grid-template-rows: repeat(3, minmax(1rem, 1fr));
  }
  .xxl\:row-4 {
    grid-template-rows: repeat(4, minmax(1rem, 1fr));
  }
  .xxl\:row-5 {
    grid-template-rows: repeat(5, minmax(1rem, 1fr));
  }
  .xxl\:row-6 {
    grid-template-rows: repeat(6, minmax(1rem, 1fr));
  }
  .xxl\:row-none {
    grid-template-rows: none;
  }
  .xxl\:row-auto {
    grid-auto-rows: auto;
  }
  .xxl\:row-auto-min {
    grid-auto-rows: min-content;
  }
  .xxl\:row-auto-max {
    grid-auto-rows: max-content;
  }
  .xxl\:row-auto-fr {
    grid-auto-rows: minmax(1rem, 1fr);
  }
  .xxl\:gap {
    gap: var(--cr-size-fluid-base);
  }
  .xxl\:gap-sm {
    gap: var(--cr-size-fluid-narrow);
  }
  .xxl\:gap-lg {
    gap: var(--cr-size-fluid-wide);
  }
  .xxl\:col-gap {
    column-gap: var(--cr-size-fluid-base);
    row-gap: 0;
  }
  .xxl\:col-gap-sm {
    column-gap: var(--cr-size-fluid-narrow);
    row-gap: 0;
  }
  .xxl\:col-gap-lg {
    column-gap: var(--cr-size-fluid-wide);
    row-gap: 0;
  }
  .xxl\:row-gap {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-base);
  }
  .xxl\:row-gap-sm {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-narrow);
  }
  .xxl\:row-gap-lg {
    column-gap: 0;
    row-gap: var(--cr-size-fluid-wide);
  }
}

.gap-0 {
  gap: 0;
}

img {
  block-size: auto;
}

.img-cover {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover !important;
  object-position: center;
  overflow: hidden;
}

.img-contain {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain !important;
}

.img-grayscale {
  filter: grayscale(100%) !important;
}

.img-blur {
  filter: blur(5px) !important;
}

.object-contain {
  object-fit: contain !important;
}

.object-cover {
  object-fit: cover !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.justify-evenly {
  justify-content: space-evenly !important;
}

.justify-items-start {
  justify-items: start !important;
}

.justify-items-end {
  justify-items: end !important;
}

.justify-items-center {
  justify-items: center !important;
}

.justify-items-stretch {
  justify-items: stretch !important;
}

.justify-self-auto {
  justify-self: auto !important;
}

.justify-self-start {
  justify-self: start !important;
}

.justify-self-end {
  justify-self: end !important;
}

.justify-self-center {
  justify-self: center !important;
}

.justify-self-stretch {
  justify-self: stretch !important;
}

.line-clamp-1,
.line-clamp-2,
.line-clamp-3,
.line-clamp-4,
.line-clamp-5,
.line-clamp-6 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.line-clamp-1 {
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
}

.line-clamp-2 {
  -webkit-line-clamp: 2 !important;
  line-clamp: 1 !important;
}

.line-clamp-3 {
  -webkit-line-clamp: 3 !important;
  line-clamp: 1 !important;
}

.line-clamp-4 {
  -webkit-line-clamp: 4 !important;
  line-clamp: 1 !important;
}

.line-clamp-5 {
  -webkit-line-clamp: 5 !important;
  line-clamp: 1 !important;
}

.line-clamp-6 {
  -webkit-line-clamp: 6 !important;
  line-clamp: 1 !important;
}

.line-clamp-none {
  -webkit-line-clamp: unset !important;
  line-clamp: 1 !important;
}

.order-none {
  order: 0 !important;
}

.order-start {
  order: -9999 !important;
}

.order-end {
  order: 9999 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-6 {
  order: 6 !important;
}

.order-7 {
  order: 7 !important;
}

.order-8 {
  order: 8 !important;
}

.order-9 {
  order: 9 !important;
}

.order-10 {
  order: 10 !important;
}

.order-11 {
  order: 11 !important;
}

.order-12 {
  order: 12 !important;
}

.overflow-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.overflow-x > [class*=table] {
  margin: 0;
}

.overflow-y {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.overflow-xy {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overscroll-auto {
  overscroll-behavior: auto !important;
}

.overscroll-contain {
  overscroll-behavior: contain !important;
}

.overscroll-none {
  overscroll-behavior: none !important;
}

.overscroll-y-auto {
  overscroll-behavior-y: auto !important;
}

.overscroll-y-contain {
  overscroll-behavior-y: contain !important;
}

.overscroll-y-none {
  overscroll-behavior-y: none !important;
}

.overscroll-x-auto {
  overscroll-behavior-x: auto !important;
}

.overscroll-x-contain {
  overscroll-behavior-x: contain !important;
}

.overscroll-x-none {
  overscroll-behavior-x: none !important;
}

.overscroll-wrapper {
  flex: auto;
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
}

.place-content-start {
  place-content: start !important;
}

.place-content-end {
  place-content: end !important;
}

.place-content-center {
  place-content: center !important;
}

.place-content-between {
  place-content: space-between !important;
}

.place-content-around {
  place-content: space-around !important;
}

.place-content-evenly {
  place-content: space-evenly !important;
}

.place-content-stretch {
  place-content: stretch !important;
}

.place-items-start {
  place-items: start !important;
}

.place-items-end {
  place-items: end !important;
}

.place-items-center {
  place-items: center !important;
}

.place-items-stretch {
  place-items: stretch !important;
}

.place-self-auto {
  place-self: auto !important;
}

.place-self-start {
  place-self: start !important;
}

.place-self-end {
  place-self: end !important;
}

.place-self-center {
  place-self: center !important;
}

.place-self-stretch {
  place-self: stretch !important;
}

.pointer-events-auto {
  pointer-events: auto !important;
}

.pointer-events-none {
  pointer-events: none !important;
}

.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.fixed {
  position: fixed !important;
}

.static {
  position: static !important;
}

.sticky {
  position: sticky !important;
  inset-block-start: 0;
}

.top {
  inset-block-start: 0 !important;
}

.top-unset {
  inset-block-start: unset !important;
}

.right {
  inset-inline-end: 0 !important;
}

.bottom {
  inset-block-end: 0 !important;
}

.left {
  inset-inline-start: 0 !important;
}

.inset-0 {
  inset: 0 !important;
}

.inset-x-0 {
  inset-inline-end: 0 !important;
  inset-inline-start: 0 !important;
}

.inset-y-0 {
  inset-block-start: 0 !important;
  inset-block-end: 0 !important;
}

@media (min-width: 16em) {
  .xxs\:sticky {
    position: sticky !important;
    inset-block-start: 0;
  }
  .xxs\:fixed {
    position: fixed !important;
  }
  .xxs\:absolute {
    position: absolute !important;
  }
  .xxs\:relative {
    position: relative !important;
  }
  .xxs\:top {
    inset-block-start: 0 !important;
  }
  .xxs\:right {
    inset-inline-end: 0 !important;
  }
  .xxs\:bottom {
    inset-block-end: 0 !important;
  }
  .xxs\:left {
    inset-inline-start: 0 !important;
  }
  .xxs\:inset-0 {
    inset: 0 !important;
  }
}
@media (min-width: 32em) {
  .xs\:sticky {
    position: sticky !important;
    inset-block-start: 0;
  }
  .xs\:fixed {
    position: fixed !important;
  }
  .xs\:absolute {
    position: absolute !important;
  }
  .xs\:relative {
    position: relative !important;
  }
  .xs\:top {
    inset-block-start: 0 !important;
  }
  .xs\:right {
    inset-inline-end: 0 !important;
  }
  .xs\:bottom {
    inset-block-end: 0 !important;
  }
  .xs\:left {
    inset-inline-start: 0 !important;
  }
  .xs\:inset-0 {
    inset: 0 !important;
  }
}
@media (min-width: 48em) {
  .sm\:sticky {
    position: sticky !important;
    inset-block-start: 0;
  }
  .sm\:fixed {
    position: fixed !important;
  }
  .sm\:absolute {
    position: absolute !important;
  }
  .sm\:relative {
    position: relative !important;
  }
  .sm\:top {
    inset-block-start: 0 !important;
  }
  .sm\:right {
    inset-inline-end: 0 !important;
  }
  .sm\:bottom {
    inset-block-end: 0 !important;
  }
  .sm\:left {
    inset-inline-start: 0 !important;
  }
  .sm\:inset-0 {
    inset: 0 !important;
  }
}
@media (min-width: 64em) {
  .md\:sticky {
    position: sticky !important;
    inset-block-start: 0;
  }
  .md\:fixed {
    position: fixed !important;
  }
  .md\:absolute {
    position: absolute !important;
  }
  .md\:relative {
    position: relative !important;
  }
  .md\:top {
    inset-block-start: 0 !important;
  }
  .md\:right {
    inset-inline-end: 0 !important;
  }
  .md\:bottom {
    inset-block-end: 0 !important;
  }
  .md\:left {
    inset-inline-start: 0 !important;
  }
  .md\:inset-0 {
    inset: 0 !important;
  }
}
@media (min-width: 80em) {
  .lg\:sticky {
    position: sticky !important;
    inset-block-start: 0;
  }
  .lg\:fixed {
    position: fixed !important;
  }
  .lg\:absolute {
    position: absolute !important;
  }
  .lg\:relative {
    position: relative !important;
  }
  .lg\:top {
    inset-block-start: 0 !important;
  }
  .lg\:right {
    inset-inline-end: 0 !important;
  }
  .lg\:bottom {
    inset-block-end: 0 !important;
  }
  .lg\:left {
    inset-inline-start: 0 !important;
  }
  .lg\:inset-0 {
    inset: 0 !important;
  }
}
@media (min-width: 96em) {
  .xl\:sticky {
    position: sticky !important;
    inset-block-start: 0;
  }
  .xl\:fixed {
    position: fixed !important;
  }
  .xl\:absolute {
    position: absolute !important;
  }
  .xl\:relative {
    position: relative !important;
  }
  .xl\:top {
    inset-block-start: 0 !important;
  }
  .xl\:right {
    inset-inline-end: 0 !important;
  }
  .xl\:bottom {
    inset-block-end: 0 !important;
  }
  .xl\:left {
    inset-inline-start: 0 !important;
  }
  .xl\:inset-0 {
    inset: 0 !important;
  }
}
@media (min-width: 112em) {
  .xxl\:sticky {
    position: sticky !important;
    inset-block-start: 0;
  }
  .xxl\:fixed {
    position: fixed !important;
  }
  .xxl\:absolute {
    position: absolute !important;
  }
  .xxl\:relative {
    position: relative !important;
  }
  .xxl\:top {
    inset-block-start: 0 !important;
  }
  .xxl\:right {
    inset-inline-end: 0 !important;
  }
  .xxl\:bottom {
    inset-block-end: 0 !important;
  }
  .xxl\:left {
    inset-inline-start: 0 !important;
  }
  .xxl\:inset-0 {
    inset: 0 !important;
  }
}
.scroll-smooth {
  scroll-behavior: smooth !important;
}

.scroll-p-0 {
  scroll-padding: 0 !important;
}

.scroll-p-1 {
  scroll-padding: var(--cr-size-fluid-1) !important;
}

.scroll-p-2 {
  scroll-padding: var(--cr-size-fluid-2) !important;
}

.scroll-p-3 {
  scroll-padding: var(--cr-size-fluid-3) !important;
}

.scroll-p-4 {
  scroll-padding: var(--cr-size-fluid-4) !important;
}

.scroll-p-5 {
  scroll-padding: var(--cr-size-fluid-5) !important;
}

.scroll-p-6 {
  scroll-padding: var(--cr-size-fluid-6) !important;
}

.scroll-p-7 {
  scroll-padding: var(--cr-size-fluid-7) !important;
}

.scroll-p-8 {
  scroll-padding: var(--cr-size-fluid-8) !important;
}

.scroll-p-9 {
  scroll-padding: var(--cr-size-fluid-9) !important;
}

.scroll-p-10 {
  scroll-padding: var(--cr-size-fluid-10) !important;
}

.translate-up-100\% {
  transform: translateY(-100%) !important;
}
.translate-left-100\% {
  transform: translateX(-100%) !important;
}
.translate-bottom-100\% {
  transform: translateY(100%) !important;
}
.translate-right-100\% {
  transform: translateX(100%) !important;
}
.translate-0 {
  transform: translate3d(0) !important;
}

.scale-200\% {
  transform: scale(2) !important;
}
.scale-175\% {
  transform: scale(1.75) !important;
}
.scale-150\% {
  transform: scale(1.5) !important;
}
.scale-125\% {
  transform: scale(1.25) !important;
}
.scale-100\% {
  transform: scale(1) !important;
}
.scale-75\% {
  transform: scale(0.75) !important;
}
.scale-50\% {
  transform: scale(0.5) !important;
}
.scale-25\% {
  transform: scale(0.25) !important;
}
.scale-0 {
  transform: scale(0) !important;
}

.rotate-90 {
  transform: rotate(90deg) !important;
}
.rotate-minus-90 {
  transform: rotate(-90deg) !important;
}
.rotate-180 {
  transform: rotate(180deg) !important;
}
.rotate-minus-180 {
  transform: rotate(-180deg) !important;
}
.rotate-270 {
  transform: rotate(270deg) !important;
}

.flip {
  perspective: 1000px;
}

.flip-x {
  transform: rotateX(180deg);
  transform: rotateY(0);
}

.flip-y {
  transform: rotateX(0);
  transform: rotateY(180deg);
}

.backface-hidden {
  backface-visibility: hidden !important;
}

.preserve-3d {
  transform-style: preserve-3d !important;
}

.transform-origin-top {
  transform-origin: top !important;
}
.transform-origin-top-right {
  transform-origin: top right !important;
}
.transform-origin-top-left {
  transform-origin: top left !important;
}
.transform-origin-right {
  transform-origin: right !important;
}
.transform-origin-bottom-right {
  transform-origin: bottom right !important;
}
.transform-origin-bottom {
  transform-origin: bottom !important;
}
.transform-origin-bottom-left {
  transform-origin: bottom left !important;
}
.transform-origin-left {
  transform-origin: left !important;
}

.opacity-100\% {
  opacity: 1 !important;
}
.opacity-75\% {
  opacity: 0.75 !important;
}
.opacity-50\% {
  opacity: 0.5 !important;
}
.opacity-25\% {
  opacity: 0.25 !important;
}
.opacity-0 {
  opacity: 0 !important;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scaleIn {
  0% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scaleOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.75);
  }
}
.fade-in {
  animation: fadeIn var(--cr-duration-base);
}

.fade-out {
  animation: fadeOut var(--cr-duration-base);
  opacity: 0;
}

.scale-in {
  animation: scaleIn var(--cr-duration-base);
}

.scale-out {
  animation: scaleOut var(--cr-duration-base);
  transform: scale(0.75);
}

.origin-center {
  transform-origin: center !important;
}

.origin-top {
  transform-origin: center top !important;
}

.origin-right {
  transform-origin: right center !important;
}

.origin-bottom {
  transform-origin: center bottom !important;
}

.origin-left {
  transform-origin: left center !important;
}

.origin-top-left {
  transform-origin: left top !important;
}

.origin-top-right {
  transform-origin: right top !important;
}

.origin-bottom-left {
  transform-origin: left bottom !important;
}

.origin-bottom-right {
  transform-origin: right bottom !important;
}

.transition-all-150ms {
  transition: all 150ms ease-in-out;
}

.transition-all-300ms {
  transition: all 300ms ease-in-out;
}

.transition-all-600ms {
  transition: all 600ms ease-in-out;
}

.transition-all-900ms {
  transition: all 900ms ease-in-out;
}

.transition-all-1200ms {
  transition: all 1200ms ease-in-out;
}

.transition-all-1800ms {
  transition: all 1800ms ease-in-out;
}

.transition-all-1500ms {
  transition: all 1500ms ease-in-out;
}

.transition-all-2400ms {
  transition: all 2400ms ease-in-out;
}

.transition-transform-150ms {
  transition: transform 150ms ease-in-out;
}

.transition-transform-300ms {
  transition: transform 300ms ease-in-out;
}

.transition-transform-600ms {
  transition: transform 600ms ease-in-out;
}

.transition-transform-900ms {
  transition: transform 900ms ease-in-out;
}

.transition-transform-1200ms {
  transition: transform 1200ms ease-in-out;
}

.transition-transform-1500ms {
  transition: transform 1500ms ease-in-out;
}

.transition-transform-1800ms {
  transition: transform 1800ms ease-in-out;
}

.transition-transform-2400ms {
  transition: transform 2400ms ease-in-out;
}

.t-left, .t-start {
  text-align: start !important;
}
.t-center {
  text-align: center !important;
}
.t-right, .t-end {
  text-align: end !important;
}
.t-justify {
  text-align: justify !important;
}

@media (min-width: 16em) {
  .xxs\:t-left, .xxs\:t-start {
    text-align: start !important;
  }
  .xxs\:t-center {
    text-align: center !important;
  }
  .xxs\:t-right, .xxs\:t-end {
    text-align: end !important;
  }
  .xxs\:t-justify {
    text-align: justify !important;
  }
}

@media (min-width: 32em) {
  .xs\:t-left, .xs\:t-start {
    text-align: start !important;
  }
  .xs\:t-center {
    text-align: center !important;
  }
  .xs\:t-right, .xs\:t-end {
    text-align: end !important;
  }
  .xs\:t-justify {
    text-align: justify !important;
  }
}

@media (min-width: 48em) {
  .sm\:t-left, .sm\:t-start {
    text-align: start !important;
  }
  .sm\:t-center {
    text-align: center !important;
  }
  .sm\:t-right, .sm\:t-end {
    text-align: end !important;
  }
  .sm\:t-justify {
    text-align: justify !important;
  }
}

@media (min-width: 64em) {
  .md\:t-left, .md\:t-start {
    text-align: start !important;
  }
  .md\:t-center {
    text-align: center !important;
  }
  .md\:t-right, .md\:t-end {
    text-align: end !important;
  }
  .md\:t-justify {
    text-align: justify !important;
  }
}

@media (min-width: 80em) {
  .lg\:t-left, .lg\:t-start {
    text-align: start !important;
  }
  .lg\:t-center {
    text-align: center !important;
  }
  .lg\:t-right, .lg\:t-end {
    text-align: end !important;
  }
  .lg\:t-justify {
    text-align: justify !important;
  }
}

@media (min-width: 96em) {
  .xl\:t-left, .xl\:t-start {
    text-align: start !important;
  }
  .xl\:t-center {
    text-align: center !important;
  }
  .xl\:t-right, .xl\:t-end {
    text-align: end !important;
  }
  .xl\:t-justify {
    text-align: justify !important;
  }
}

@media (min-width: 112em) {
  .xxl\:t-left, .xxl\:t-start {
    text-align: start !important;
  }
  .xxl\:t-center {
    text-align: center !important;
  }
  .xxl\:t-right, .xxl\:t-end {
    text-align: end !important;
  }
  .xxl\:t-justify {
    text-align: justify !important;
  }
}

.font-sans {
  font-family: var(--cr-font-family-sans) !important;
}

.font-serif {
  font-family: var(--cr-font-family-serif) !important;
}

.font-mono {
  font-family: var(--cr-font-family-mono) !important;
}

.font-thin {
  font-weight: var(--cr-font-weight-100) !important;
}

.font-light {
  font-weight: var(--cr-font-weight-200) !important;
}

.font-normal {
  font-weight: var(--cr-font-weight-400) !important;
  font-style: normal;
}

.font-medium {
  font-weight: var(--cr-font-weight-500) !important;
}

.font-semibold {
  font-weight: var(--cr-font-weight-600) !important;
}

.font-bold {
  font-weight: var(--cr-font-weight-700) !important;
}

.font-bolder {
  font-weight: var(--cr-font-weight-900) !important;
}

.p,
.font-default {
  font-size: var(--cr-font-size-1);
  font-weight: var(--cr-font-weight-400);
  font-style: normal;
}

.font-italic {
  font-style: italic;
}

.font-smooth {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.text-underline,
.hover\:text-underline:hover {
  text-decoration-line: underline !important;
}

.text-overline,
.hover\:text-overline:hover {
  text-decoration-line: overline !important;
}

.text-strike,
.hover\:text-strike:hover {
  text-decoration-line: line-through !important;
}

.text-decoration-none,
.hover\:text-decoration-none:hover {
  text-decoration-line: none !important;
}

.text-decoration-solid,
.hover\:text-decoration-solid:hover {
  text-decoration-style: solid !important;
}

.text-decoration-double,
.hover\:text-decoration-double:hover {
  text-decoration-style: double !important;
}

.text-decoration-dotted,
.hover\:text-decoration-dotted:hover {
  text-decoration-style: dotted !important;
}

.text-decoration-dashed,
.hover\:text-decoration-dashed:hover {
  text-decoration-style: dashed !important;
}

.text-decoration-wavy,
.hover\:text-decoration-wavy:hover {
  text-decoration-style: wavy !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-normalcase {
  text-transform: none !important;
}

.text-cols {
  column-width: var(--cr-fluid-size-9);
  column-gap: var(--cr-size-1);
}

.letter-spacing-xs {
  letter-spacing: -0.1em;
}

.letter-spacing-sm,
.text-tight {
  letter-spacing: -0.05em;
}

.letter-spacing-md,
.text-loose {
  letter-spacing: 0.05em;
}

.letter-spacing-lg {
  letter-spacing: 0.1em;
}

.letter-spacing-xl {
  letter-spacing: 0.2em;
}

.truncate,
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis {
  text-overflow: ellipsis !important;
}

.text-clip {
  text-overflow: clip !important;
}

.text-replace {
  overflow: hidden;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
}

.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

.break-word {
  overflow-wrap: break-word;
  min-inline-size: 0;
}

.break-all {
  word-break: break-all !important;
}

.ws-nowrap {
  white-space: nowrap !important;
}

.ws-normal {
  white-space: normal !important;
}

.ws-pre {
  white-space: pre !important;
}

.ws-preline {
  white-space: pre-line !important;
}

.ws-prewrap {
  white-space: pre-wrap !important;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-sub {
  vertical-align: sub !important;
}

.align-super {
  vertical-align: super !important;
}

.list-style-type-none {
  list-style-type: none !important;
}
.list-style-type-square {
  list-style-type: square !important;
}
.list-style-type-disc {
  list-style-type: disc !important;
}
.list-style-type-circle {
  list-style-type: circle !important;
}
.list-style-type-lower-alpha {
  list-style-type: lower-alpha !important;
}
.list-style-type-upper-alpha {
  list-style-type: upper-alpha !important;
}
.list-style-type-lower-roman {
  list-style-type: lower-roman !important;
}
.list-style-type-upper-roman {
  list-style-type: upper-roman !important;
}
.list-style-type-decimal {
  list-style-type: decimal !important;
}

.wmode-vlr {
  writing-mode: vertical-lr !important;
}

.wmode-vrl {
  writing-mode: vertical-rl !important;
}

.wmode-srl {
  writing-mode: sideways-rl !important;
}

.wmode-slr {
  writing-mode: sideways-lr !important;
}

.text-unit-rem,
.text-unit-em,
.text-unit-px {
  font-size: var(--cr-text-unit) !important;
}

.text-unit-rem {
  --cr-text-unit: 1rem !important;
}

.text-unit-em {
  --cr-text-unit: 1em !important;
}

.text-unit-px {
  --cr-text-unit: 16px !important;
}

small,
.text-sm {
  font-size: var(--cr-font-size-0);
  line-height: inherit;
}

.text-muted {
  color: var(--cr-color-neutral-text-subtle);
}

mark,
.text-mark,
.text-highlight {
  color: currentColor;
}

.measure-short {
  max-inline-size: 40ch;
}

.measure-long {
  max-inline-size: 65ch;
}

.disabled {
  filter: invert(0.2);
  opacity: 0.5;
  cursor: not-allowed;
}

.select-none {
  user-select: none !important;
}

.select-text {
  user-select: text !important;
}

.select-all {
  user-select: all !important;
}

.select-auto {
  user-select: auto !important;
}

.wrapper {
  --cr-wrapper-padding: var(--cr-size-fluid-narrow);
  --cr-wrapper-grid-xxs: 1fr min(var(--cr-width-xxs), 100%) 1fr;
  --cr-wrapper-grid-xs: 1fr min(var(--cr-width-xs), 100%) 1fr;
  --cr-wrapper-grid-sm: 1fr min(var(--cr-width-sm), 100%) 1fr;
  --cr-wrapper-grid-md: 1fr min(var(--cr-width-md), 100%) 1fr;
  --cr-wrapper-grid-lg: 1fr min(var(--cr-width-lg), 100%) 1fr;
  --cr-wrapper-grid-xl: 1fr min(var(--cr-width-xl), 100%) 1fr;
  --cr-wrapper-grid-xxl: 1fr min(var(--cr-width-xxl), 100%) 1fr;
  display: grid;
  inline-size: 100%;
  grid-template-columns: var(--cr-wrapper-grid-lg);
  margin-inline: auto;
  position: relative;
}
.wrapper > * {
  grid-column: 2;
  inline-size: 100%;
}
.wrapper[data-size=xxs] {
  grid-template-columns: var(--cr-wrapper-grid-xxs);
}
.wrapper[data-size=xs] {
  grid-template-columns: var(--cr-wrapper-grid-xs);
}
.wrapper[data-size=sm] {
  grid-template-columns: var(--cr-wrapper-grid-sm);
}
.wrapper[data-size=md] {
  grid-template-columns: var(--cr-wrapper-grid-md);
}
.wrapper[data-size=lg] {
  grid-template-columns: var(--cr-wrapper-grid-lg);
}
.wrapper[data-size=xl] {
  grid-template-columns: var(--cr-wrapper-grid-xl);
}
.wrapper[data-size=xxl] {
  grid-template-columns: var(--cr-wrapper-grid-xxl);
}
.wrapper[data-flush] > * {
  grid-column: 1/-1;
}

.wrapper-clamp {
  --cr-wrapper-padding: var(--cr-size-base);
  inline-size: clamp(var(--cr-width-xxs), 95vw, var(--cr-width-lg));
  margin-inline: auto;
  padding-inline: var(--cr-wrapper-padding);
  position: relative;
  display: flow-root;
}
.wrapper-clamp[data-size=xxs] {
  inline-size: clamp(var(--cr-width-xxs), 95vw, var(--cr-width-xxs));
  padding-inline: 0;
}
.wrapper-clamp[data-size=xs] {
  inline-size: clamp(var(--cr-width-xxs), 95vw, var(--cr-width-xs));
  padding-inline: 0;
}
.wrapper-clamp[data-size=sm] {
  inline-size: clamp(var(--cr-width-xxs), 95vw, var(--cr-width-sm));
}
.wrapper-clamp[data-size=md] {
  inline-size: clamp(var(--cr-width-xxs), 95vw, var(--cr-width-md));
}
.wrapper-clamp[data-size=lg] {
  inline-size: clamp(var(--cr-width-xxs), 95vw, var(--cr-width-lg));
}
.wrapper-clamp[data-size=xl] {
  inline-size: clamp(var(--cr-width-xxs), 95vw, var(--cr-width-xl));
}
.wrapper-clamp[data-size=xxl] {
  inline-size: clamp(var(--cr-width-xxs), 95vw, var(--cr-width-xxl));
}
.wrapper-clamp[data-flush] {
  padding-inline: 0;
}

.z-0 {
  z-index: var(--cr-layer-0);
}

.z-1 {
  z-index: var(--cr-layer-1);
}

.z-2 {
  z-index: var(--cr-layer-2);
}

.z-3 {
  z-index: var(--cr-layer-3);
}

.z-4 {
  z-index: var(--cr-layer-4);
}

.z-5 {
  z-index: var(--cr-layer-5);
}

.z-6 {
  z-index: var(--cr-layer-6);
}

.z-7 {
  z-index: var(--cr-layer-7);
}

.z-8 {
  z-index: var(--cr-layer-8);
}

.z-9 {
  z-index: var(--cr-layer-9);
}

.z-10 {
  z-index: var(--cr-layer-10);
}

.z-important {
  z-index: var(--cr-layer-important);
}

.z-auto {
  z-index: auto;
}

.z-dropdown {
  z-index: var(--cr-z-index-dropdown);
}

.z-backdrop {
  z-index: var(--cr-z-index-backdrop);
}

.z-modal {
  z-index: var(--cr-z-index-modal);
}

.z-offcanvas {
  z-index: var(--cr-z-index-offcanvas);
}

/*# sourceMappingURL=toolkit.css.map */