/* --------------------------------- TYPOGRAPHY --------------------------------- */
/*
Typography Classes
==========
The typography classes are used to define the font-family, font-size, line-height, and font-weight of the text elements.
Headings - have the font-weight defined.
Body - Do not have a font-weight defined, since it can be regular or semi-bold.
Captions - Do not have a font-weight defined, since it can be regular or semi-bold.
*/
:root {
--font-family-red-hat-text: "Red Hat Text", "Red Hat Mono", "Arial",
"Arial Black";
--font-family-red-hat-display: "Red Hat Display", "Red Hat Mono", "Arial",
"Arial Black";
--font-family-default: var(--font-family-red-hat-text);
--font-typesize-01: 0.5rem; /* 8px */
--font-typesize-02: 0.75rem; /* 12px */
--font-typesize-03: 1rem; /* 16px; base text size */
--font-typesize-04: 1.25rem; /* 20px */
--font-typesize-05: 1.5rem; /* 24px */
--font-typesize-06: 2rem; /* 32px */
--font-typesize-07: 2.25rem; /* 36px */
--font-typesize-08: 3rem; /* 48px */
--font-typesize-09: 4rem; /* 64px */
--font-typesize-10: 5.25rem; /* 84px */
--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
}
.heading-01 {
font-family: "Red Hat Display", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-display);
font-size: 1.25rem;
font-size: var(--font-typesize-04); /* 20px */
line-height: 1.5rem;
font-weight: 700;
color: #181c1e;
color: var(--text-primary);
}
@media only screen and (max-width: 1023px) {
.heading-01 {
font-size: 1rem;
font-size: var(--font-typesize-03); /* 16px */
line-height: 1.25rem;
}
}
.heading-02 {
font-family: "Red Hat Display", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-display);
font-size: 1.5rem;
font-size: var(--font-typesize-05); /* 24px */
line-height: 2rem;
font-weight: 700;
color: #181c1e;
color: var(--text-primary);
}
@media (max-width: 1023px) {
.heading-02 {
font-size: 1.25rem;
font-size: var(--font-typesize-04); /* 20px */
line-height: 1.5rem;
}
}
.heading-03 {
font-family: "Red Hat Display", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-display);
font-size: 2rem;
font-size: var(--font-typesize-06); /* 32px */
line-height: 2.25rem;
font-weight: 700;
color: #181c1e;
color: var(--text-primary);
}
@media only screen and (max-width: 600px) {
.heading-03 {
font-size: 1.5rem;
font-size: var(--font-typesize-05); /* 24px */
line-height: 2rem;
}
}
.heading-04 {
font-family: "Red Hat Display", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-display);
font-size: 2.25em;
font-size: var(--font-typesize-07); /* 36px */
line-height: 2.75rem;
font-weight: 700;
color: #181c1e;
color: var(--text-primary);
}
@media only screen and (max-width: 1023px) {
.heading-04 {
font-size: 2rem;
font-size: var(--font-typesize-06); /* 32px */
line-height: 2.25rem;
}
}
.heading-05 {
font-family: "Red Hat Display", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-display);
font-size: 3rem;
font-size: var(--font-typesize-08); /* 48px */
line-height: 3.75rem;
font-weight: 700;
}
@media only screen and (max-width: 1023px) {
.heading-05 {
font-size: 2.25em;
font-size: var(--font-typesize-07); /* 36px */
line-height: 2.75rem;
}
}
.heading-06 {
font-family: "Red Hat Display", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-display);
font-size: 4rem;
font-size: var(--font-typesize-09); /* 64px */
line-height: 5rem;
font-weight: 700;
color: #181c1e;
color: var(--text-primary);
}
@media only screen and (max-width: 1023px) {
.heading-06 {
font-size: 3rem;
font-size: var(--font-typesize-08); /* 48px */
line-height: 3.75rem;
}
}
.heading-07 {
font-family: "Red Hat Display", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-display);
font-size: 5.25rem;
font-size: var(--font-typesize-10); /* 84px */
line-height: 6.25rem;
font-weight: 700;
color: #181c1e;
color: var(--text-primary);
}
@media only screen and (max-width: 1023px) {
.heading-07 {
font-size: 4rem;
font-size: var(--font-typesize-09); /* 64px */
line-height: 5rem;
}
}
.heading-longform-01 {
font-family: "Red Hat Text", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-text);
font-size: 1.25rem;
font-size: var(--font-typesize-04); /* 20px */
line-height: 1.5rem;
font-weight: 700;
}
@media only screen and (max-width: 1023px) {
.heading-longform-01 {
font-size: 1rem;
font-size: var(--font-typesize-03); /* 16px */
line-height: 1.25rem;
}
}
.heading-longform-02 {
font-family: "Red Hat Text", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-text);
font-size: 1.5rem;
font-size: var(--font-typesize-05); /* 24px */
line-height: 2rem;
font-weight: 700;
color: #181c1e;
color: var(--text-primary);
}
@media only screen and (max-width: 1023px) {
.heading-longform-02 {
font-size: 1.25rem;
font-size: var(--font-typesize-04); /* 20px */
line-height: 1.5rem;
}
}
.heading-longform-03 {
font-family: "Red Hat Text", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-text);
font-size: 2rem;
font-size: var(--font-typesize-06); /* 32px */
line-height: 2.25rem;
font-weight: 700;
color: #181c1e;
color: var(--text-primary);
}
@media only screen and (max-width: 600px) {
.heading-longform-03 {
font-size: 1.5rem;
font-size: var(--font-typesize-05); /* 24px */
line-height: 2rem;
}
}
.heading-longform-04 {
font-family: "Red Hat Text", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-text);
font-size: 2.25em;
font-size: var(--font-typesize-07); /* 36px */
line-height: 2.75rem;
font-weight: 700;
color: #181c1e;
color: var(--text-primary);
}
@media only screen and (max-width: 1023px) {
.heading-longform-04 {
font-size: 2rem;
font-size: var(--font-typesize-06); /* 32px */
line-height: 2.25rem;
}
}
.body-01 {
font-family: "Red Hat Text", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-text);
font-size: 0.75rem;
font-size: var(--font-typesize-02); /* 12px */
line-height: 1rem;
color: #181c1e;
color: var(--text-primary);
}
.body-02 {
font-family: "Red Hat Text", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-text);
font-size: 1rem;
font-size: var(--font-typesize-03); /* 16px */
line-height: 1.25rem;
color: #181c1e;
color: var(--text-primary);
}
.body-longform-01 {
font-family: "Red Hat Text", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-text);
font-size: 0.75rem;
font-size: var(--font-typesize-02); /* 12px */
line-height: 1.25rem;
color: #181c1e;
color: var(--text-primary);
}
.body-longform-02 {
font-family: "Red Hat Text", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-text);
font-size: 1rem;
font-size: var(--font-typesize-03); /* 16px */
line-height: 1.5rem;
color: #181c1e;
color: var(--text-primary);
}
.caption-01 {
font-family: "Red Hat Text", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-text);
font-size: 0.5rem;
font-size: var(--font-typesize-01); /* 8px */
line-height: 0.75rem;
color: #181c1e;
color: var(--text-primary);
}
.caption-longform-01 {
font-family: "Red Hat Text", "Red Hat Mono", "Arial", "Arial Black";
font-family: var(--font-family-red-hat-text);
font-size: 0.5rem;
font-size: var(--font-typesize-01); /* 8px */
line-height: 0.75rem;
color: #181c1e;
color: var(--text-primary);
}
/* RED HAT MONO */
@font-face {
font-family: "Red Hat Mono";
src: url("/assets/RedHatMono-Italic-CVBrBoes.ttf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Red Hat Mono";
src: url("/assets/RedHatMono-SemiBoldItalic-CuEpNr4T.ttf");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "Red Hat Mono";
src: url("/assets/RedHatMono-BoldItalic-SD7p06zj.ttf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "Red Hat Mono";
src: url("/assets/RedHatMono-Bold-1B5FFUJZ.ttf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Red Hat Mono";
src: url("/assets/RedHatMono-SemiBold-BBRrObtj.ttf");
font-weight: 600;
font-style: normal;
}
/* RED HAT TEXT */
@font-face {
font-family: "Red Hat Text";
src: url("/assets/RedHatText-Italic-C8TkRutM.ttf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Red Hat Text";
src: url("/assets/RedHatText-SemiBoldItalic-B3pvw90l.ttf");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "Red Hat Text";
src: url("/assets/RedHatText-BoldItalic-2vHYtujY.ttf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "Red Hat Text";
src: url("/assets/RedHatText-Bold-D83OuVb8.ttf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Red Hat Text";
src: url("/assets/RedHatText-SemiBold-BTVbbNOX.ttf");
font-weight: 600;
font-style: normal;
}
/* RED HAT DISPLAY */
@font-face {
font-family: "Red Hat Display";
src: url("/assets/RedHatDisplay-Italic-CuvapF43.ttf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Red Hat Display";
src: url("/assets/RedHatDisplay-SemiBoldItalic-BUZjkbpd.ttf");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "Red Hat Display";
src: url("/assets/RedHatDisplay-BoldItalic-QF5ITyaf.ttf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "Red Hat Display";
src: url("/assets/RedHatDisplay-Bold-M99Tq1al.ttf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Red Hat Display";
src: url("/assets/RedHatDisplay-SemiBold-B-2xYJhO.ttf");
font-weight: 600;
font-style: normal;
}
/* Default fonts */
@font-face {
font-family: "Red Hat Text";
src: url("/assets/RedHatText-Regular-B197i5lD.ttf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Red Hat Display";
src: url("/assets/RedHatDisplay-Regular-BcOIBnLz.ttf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Red Hat Mono";
src: url("/assets/RedHatMono-Regular-DSwihvyi.ttf");
font-weight: 400;
font-style: normal;
}
/* --------------------------------- TOKENS --------------------------------- */
/** DEPRECATED FILE, TO BE REMOVED IN VERSION 4 */
:root {
/* ----------------------------- Primary palette ---------------------------- */
--black: hsl(0 0% 0%);
--white: hsl(0 0% 100%);
--blue-025: hsl(230 81% 6%); /* #03071c */
--blue-050: hsl(229 83% 9%); /* #040b2b */
--blue-075: hsl(229 82% 13%); /* #06103d */
--blue-100: hsl(221 71% 20%); /* #0f2658 */
--blue-200: hsl(221 71% 30%); /* #163984 */
--blue-300: hsl(221 71% 45%); /* #2256c6 */
--blue-400: hsl(221 89% 55%); /* #2969f2 */
--blue-500: hsl(221 87% 67%); /* #608ff4 */
--blue-600: hsl(221 87% 82%); /* #a7c1f9 */
--blue-700: hsl(222 83% 91%); /* #d3dffb */
--blue-750: hsl(221 79% 95%); /* #e6edfc */
--blue-800: hsl(222 76% 97%); /* #f0f4fd */
--blue-900: hsl(223 78% 98%); /* #f7f9fe */
--blue-primary: var(--blue-400);
--blue-subtle: light-dark(var(--blue-700), var(--blue-100));
--blue-weak: light-dark(var(--blue-800), var(--blue-075));
/* ---------------------------- Semantic palette ---------------------------- */
--green-025: hsl(153 64% 5%); /* #05170f*/
--green-050: hsl(153 64% 9%); /* #082518 */
--green-075: hsl(153 63% 13%); /* #0c3422 */
--green-100: hsl(153 62% 17%); /* #10452d */
--green-200: hsl(153 63% 25%); /* #186844 */
--green-300: hsl(153 62% 37%); /* #249b65 */
--green-400: hsl(153 62% 46%); /* #2cbe7c */
--green-500: hsl(153 53% 56%); /* #52ca94 */
--green-600: hsl(153 53% 71%); /* #8cdcb8 */
--green-700: hsl(153 53% 85%); /* #c5eddb */
--green-750: hsl(153 52% 92%); /* #dff5eb */
--green-800: hsl(152 52% 95%); /* #ecf9f3 */
--green-900: hsl(154 54% 97%); /* #f5fcf9 */
--green-primary: var(--green-400);
--green-subtle: light-dark(var(--green-700), var(--green-100));
--green-weak: light-dark(var(--green-800), var(--green-075));
--yellow-025: hsl(41 100% 6%); /* #201600 */
--yellow-050: hsl(40 100% 10%); /* #312100 */
--yellow-075: hsl(40 100% 14%); /* #462f00 */
--yellow-100: hsl(40 100% 18%); /* #5d3e00 */
--yellow-200: hsl(40 100% 27%); /* #8b5d00 */
--yellow-300: hsl(40 100% 41%); /* #d18c00 */
--yellow-400: hsl(40 100% 50%); /* #ffab00 */
--yellow-500: hsl(40 100% 59%); /* #ffba2e */
--yellow-600: hsl(40 100% 73%); /* #ffd174 */
--yellow-700: hsl(40 100% 86%); /* #ffe8b9 */
--yellow-750: hsl(40 100% 92%); /* #fff2d8 */
--yellow-800: hsl(39 100% 95%); /* #fff7e8 */
--yellow-900: hsl(40 100% 98%); /* #fffbf3 */
--yellow-primary: var(--yellow-400);
--yellow-subtle: light-dark(var(--yellow-700), var(--yellow-100));
--yellow-weak: light-dark(var(--yellow-800), var(--yellow-075));
--orange-025: hsl(26 78% 7%); /* #201004 */
--orange-050: hsl(27 81% 11%); /* #311905 */
--orange-075: hsl(27 82% 15%); /* #462307 */
--orange-100: hsl(27 82% 20%); /* #5d2f09 */
--orange-200: hsl(27 83% 30%); /* #8b460d */
--orange-300: hsl(27 83% 45%); /* #d16a14 */
--orange-400: hsl(27 100% 55%); /* #ff8118 */
--orange-500: hsl(30 90% 61%); /* #f59b40 */
--orange-600: hsl(27 100% 75%); /* #ffba81 */
--orange-700: hsl(28 100% 88%); /* #ffddc0 */
--orange-750: hsl(27 100% 93%); /* #ffecdc */
--orange-800: hsl(29 100% 96%); /* #fff4ea */
--orange-900: hsl(27 100% 98%); /* #fff9f4 */
--orange-primary: var(--orange-400);
--orange-subtle: light-dark(var(--orange-700), var(--orange-100));
--orange-weak: light-dark(var(--orange-800), var(--orange-075));
--red-025: hsl(13 63% 7%); /* #1f0c07 */
--red-050: hsl(12 62% 11%); /* #2f120b */
--red-075: hsl(12 63% 16%); /* #43190f */
--red-100: hsl(11 63% 21%); /* #592114 */
--red-200: hsl(11 62% 32%); /* #86321f */
--red-300: hsl(11 63% 48%); /* #c84b2e */
--red-400: hsl(11 90% 59%); /* #f55c38 */
--red-500: hsl(12 91% 66%); /* #f77a5c */
--red-600: hsl(12 91% 78%); /* #faa692 */
--red-700: hsl(12 89% 89%); /* #fcd3c9 */
--red-750: hsl(11 88% 94%); /* #fde6e1 */
--red-800: hsl(11 89% 96%); /* #fef0ed */
--red-900: hsl(7 80% 98%); /* #fef7f6 */
--red-primary: var(--red-400);
--red-subtle: light-dark(var(--red-700), var(--red-100));
--red-weak: light-dark(var(--red-800), var(--red-075));
/* ---------------------------- Supporting colors --------------------------- */
--turquoise-025: hsl(191 65% 7%); /* #06181c */
--turquoise-050: hsl(189 65% 10%); /* #09262b */
--turquoise-075: hsl(189 65% 15%); /* #0d363d */
--turquoise-100: hsl(189 64% 19%); /* #124851 */
--turquoise-200: hsl(188 64% 29%); /* #1b6c79 */
--turquoise-300: hsl(188 64% 44%); /* #28a2b6 */
--turquoise-400: hsl(188 72% 53%); /* #31c6de */
--turquoise-500: hsl(188 72% 62%); /* #56d0e4 */
--turquoise-600: hsl(188 72% 75%); /* #8fe0ed */
--turquoise-700: hsl(189 72% 87%); /* #c7eff6 */
--turquoise-750: hsl(189 72% 93%); /* #e0f6fa */
--turquoise-800: hsl(188 73% 96%); /* #ecfafc */
--turquoise-900: hsl(188 67% 98%); /* #f5fcfd */
--turquoise-primary: var(--turquoise-400);
--turquoise-subtle: light-dark(var(--turquoise-700), var(--turquoise-100));
--pink-025: hsl(330 56% 7%); /* #1c0812 */
--pink-050: hsl(330 57% 11%); /* #2c0c1c */
--pink-075: hsl(331 57% 15%); /* #3e1127 */
--pink-100: hsl(331 56% 21%); /* #521734 */
--pink-200: hsl(330 57% 31%); /* #7b224f */
--pink-300: hsl(330 57% 46%); /* #b93376 */
--pink-400: hsl(330 74% 56%); /* #e23e90 */
--pink-500: hsl(330 74% 64%); /* #e761a4 */
--pink-600: hsl(330 74% 76%); /* #ef96c2 */
--pink-700: hsl(329 74% 88%); /* #f7cae1 */
--pink-750: hsl(329 71% 93%); /* #fae1ee */
--pink-800: hsl(328 71% 96%); /* #fcedf5 */
--pink-900: hsl(326 64% 98%); /* #fdf6fa */
--pink-primary: var(--pink-400);
--pink-subtle: light-dark(var(--pink-700), var(--pink-100));
--teal-025: hsl(172 73% 6%); /* #041a17 */
--teal-050: hsl(170 74% 9%); /* #062923 */
--teal-075: hsl(169 76% 13%); /* #083a31 */
--teal-100: hsl(169 75% 17%); /* #0b4d41 */
--teal-200: hsl(169 76% 26%); /* #107461 */
--teal-300: hsl(169 75% 39%); /* #19ad92 */
--teal-400: hsl(169 75% 47%); /* #1ed4b2 */
--teal-500: hsl(169 68% 57%); /* #47dcc0 */
--teal-600: hsl(169 68% 71%); /* #84e8d5 */
--teal-700: hsl(169 67% 86%); /* #c2f3ea */
--teal-750: hsl(169 66% 92%); /* #ddf8f3 */
--teal-800: hsl(169 67% 95%); /* #ebfbf8 */
--teal-900: hsl(165 67% 98%); /* #f5fdfb */
--teal-primary: var(--teal-400);
--teal-subtle: light-dark(var(--teal-700), var(--teal-100));
--purple-025: hsl(248 48% 6%); /* #0a0817 */
--purple-050: hsl(245 47% 10%); /* #0f0d24 */
--purple-075: hsl(245 48% 14%); /* #151233 */
--purple-100: hsl(245 48% 18%); /* #1c1844 */
--purple-200: hsl(245 49% 27%); /* #292366 */
--purple-300: hsl(245 49% 40%); /* #3e3599 */
--purple-400: hsl(245 48% 49%); /* #4c41bb */
--purple-500: hsl(245 47% 60%); /* #7169c9 */
--purple-600: hsl(245 48% 72%); /* #9d97da */
--purple-700: hsl(245 46% 86%); /* #cecbec */
--purple-750: hsl(247 45% 92%); /* #e4e2f4 */
--purple-800: hsl(245 48% 95%); /* #efeef9 */
--purple-900: hsl(250 50% 98%); /* #f7f6fc */
--purple-primary: var(--purple-400);
--purple-subtle: light-dark(var(--purple-700), var(--purple-100));
--lime-025: oklch(19.45% 0.036 119.14); /* #131704 */
--lime-050: oklch(24.94% 0.052 120.73); /* #1e2505 */
--lime-075: oklch(30.54% 0.066 121.49); /* #2a3407 */
--lime-100: oklch(36.64% 0.081 121.7); /* #38450a */
--lime-200: oklch(48.21% 0.109 121.3); /* #55670f */
--lime-300: oklch(64.52% 0.15 121.94); /* #7f9b16 */
--lime-400: oklch(74.68% 0.175 122.02); /* #9bbd1b */
--lime-500: oklch(78.99% 0.159 120.42); /* #adc944 */
--lime-600: oklch(85.74% 0.114 118.84); /* #c8db83 */
--lime-700: oklch(92.81% 0.059 116.94); /* #e4edc1 */
--lime-750: oklch(95.97% 0.033 116.21); /* #f0f5dc */
--lime-800: oklch(97.58% 0.02 115.95); /* #f6f9ea */
--lime-900: oklch(98.74% 0.011 118.02); /* #fafcf4 */
--lime-primary: var(--lime-400);
--lime-subtle: light-dark(var(--lime-700), var(--lime-100));
/* ----------------------------- Neutral colors ----------------------------- */
--neutral-025: hsl(200 12% 5%); /* #0b0d0e */
--neutral-050: hsl(200 7% 8%); /* #131516 */
--neutral-075: hsl(200 11% 11%); /* #181c1e */
--neutral-100: hsl(203 11% 14%); /* #202528 */
--neutral-200: hsl(202 10% 21%); /* #31383c */
--neutral-300: hsl(205 10% 32%); /* #49535a */
--neutral-400: hsl(203 11% 39%); /* #59666e */
--neutral-500: hsl(201 7% 50%); /* #778288 */
--neutral-600: hsl(200 7% 67%); /* #a4acb0 */
--neutral-700: hsl(204 6% 83%); /* #d2d5d7 */
--neutral-750: hsl(200 6% 91%); /* #e6e8e9 */
--neutral-800: hsl(210 5% 93%); /* #ebeced */
--neutral-900: hsl(0 0% 97%); /* #f7f7f7 */
--neutral-primary: var(--neutral-400);
--neutral-subtle: light-dark(var(--neutral-700), var(--neutral-100));
/* ----------------- SEMANTIC COLOR NAMES (Work in progress) ---------------- */
--primary-color: var(--blue-400);
--primary-hover-color: var(--blue-300);
--primary-active-color: var(--blue-200);
accent-color: hsl(221 89% 55%);
accent-color: var(--primary-color);
--surface-bg-color: light-dark(var(--neutral-900), var(--neutral-050));
--surface-fg-color: light-dark(var(--neutral-075), var(--white));
--surface-hover-bg-color: light-dark(var(--neutral-800), var(--neutral-100));
--surface-hover-fg-color: light-dark(var(--neutral-075), var(--white));
--surface-active-bg-color: light-dark(var(--neutral-700), var(--neutral-200));
--surface-active-fg-color: light-dark(var(--neutral-075), var(--white));
--surface-primary-bg-color: light-dark(var(--white), var(--neutral-075));
--surface-primary-fg-color: light-dark(var(--neutral-075), var(--white));
--surface-secondary-bg-color: light-dark(
var(--neutral-900),
var(--neutral-075)
);
--surface-secondary-fg-color: light-dark(
var(--neutral-075),
var(--neutral-900)
);
--surface-tertiary-bg-color: light-dark(
var(--neutral-800),
var(--neutral-100)
);
--surface-tertiary-fg-color: light-dark(
var(--neutral-075),
var(--neutral-800)
);
--surface-contrast-bg-color: var(--surface-fg-color);
--surface-contrast-fg-color: var(--surface-bg-color);
--top-surface-hover-bg-color: light-dark(
var(--neutral-800),
var(--neutral-200)
);
--top-surface-active-bg-color: light-dark(
var(--neutral-700),
var(--neutral-300)
);
/* ------------------------------ Status colors ----------------------------- */
--info-color: var(--blue-primary);
--info-hover-color: light-dark(var(--blue-300), var(--blue-500));
--info-active-color: light-dark(var(--blue-200), var(--blue-600));
--info-weak-color: var(--blue-weak);
--warning-color: var(--yellow-primary);
--warning-hover-color: light-dark(var(--yellow-300), var(--yellow-500));
--warning-active-color: light-dark(var(--yellow-200), var(--yellow-600));
--warning-weak-color: var(--yellow-weak);
--warning-major-color: var(--orange-primary);
--warning-major-hover-color: light-dark(var(--orange-300), var(--orange-500));
--warning-major-active-color: light-dark(
var(--orange-200),
var(--orange-600)
);
--warning-major-weak-color: var(--orange-weak);
--danger-color: var(--red-primary);
--danger-hover-color: light-dark(var(--red-300), var(--red-500));
--danger-active-color: light-dark(var(--red-200), var(--red-600));
--danger-weak-color: var(--red-weak);
--success-color: var(--green-primary);
--success-hover-color: light-dark(var(--green-300), var(--green-500));
--success-active-color: light-dark(var(--green-200), var(--green-600));
--success-weak-color: var(--green-weak);
--outline-color: light-dark(var(--blue-400), var(--blue-500));
--disabled-color: light-dark(var(--neutral-600), var(--neutral-600));
--disabled-bg-color: light-dark(var(--neutral-800), var(--neutral-200));
/* ------------------------------ Border colors ----------------------------- */
--stroke-color: var(--neutral-600);
--stroke-hover-color: light-dark(var(--neutral-400), var(--neutral-700));
--stroke-subtle-color: light-dark(var(--neutral-750), var(--neutral-200));
--stroke-strong-color: light-dark(var(--neutral-200), var(--neutral-750));
--stroke-disabled-color: light-dark(var(--neutral-700), var(--neutral-400));
/* ------------------------------- Text colors ------------------------------ */
--text-primary-color: var(--surface-fg-color);
--text-primary-inverted-color: var(--surface-bg-color);
--text-secondary-color: light(var(--neutral-200), var(--neutral-600));
--text-tertiary-color: light-dark(var(--neutral-400), var(--neutral-700));
/* -------------------------- Field control colors -------------------------- */
/* Main field control colors */
--field-label-color: var(--text-tertiary-color);
--field-input-color: var(--text-primary-color);
--field-option-color: var(--text-primary-color);
--field-placeholder-color: var(--neutral-500);
--field-helper-text-color: var(--text-tertiary-color);
/* Field option */
--field-option-hover-bg-color: light-dark(
var(--neutral-800),
var(--neutral-200)
);
--field-option-active-bg-color: light-dark(
var(--neutral-700),
var(--neutral-300)
);
--field-option-active-color: light-dark(
var(--surface-fg-color),
var(--white)
);
--field-option-focus-bg-color: light-dark(var(--blue-400), var(--blue-400));
--field-option-focus-color: light-dark(var(--white), var(--white));
/* Field chip */
--field-chip-bd-color: light-dark(var(--blue-700), var(--blue-200));
--field-chip-bg-hover-color: light-dark(var(--blue-600), var(--blue-300));
--field-chip-bg-active-color: light-dark(var(--blue-500), var(--blue-400));
--field-chip-color: light-dark(var(--blue-100), var(--blue-900));
--field-chip-hover-color: light-dark(var(--blue-100), var(--blue-900));
--field-chip-active-color: light-dark(var(--blue-900), var(--blue-900));
/* ----------------------- Interactive control colors ----------------------- */
--tab-bg-color: light-dark(var(--neutral-800), var(--neutral-100));
--tab-hover-bg-color: light-dark(var(--neutral-700), var(--neutral-200));
--tab-pressed-bg-color: light-dark(var(--neutral-600), var(--neutral-300));
--tab-active-bg-color: var(--surface-primary-bg-color);
--btn-primary-color: var(--white);
--btn-primary-bg-color: var(--primary-color);
--btn-primary-hover-bg-color: light-dark(var(--blue-300), var(--blue-500));
--btn-primary-active-bg-color: light-dark(var(--blue-200), var(--blue-600));
--btn-secondary-color: light-dark(var(--blue-100), var(--white));
--btn-secondary-bg-color: light-dark(var(--blue-800), var(--neutral-300));
--btn-secondary-hover-bg-color: light-dark(
var(--blue-700),
var(--neutral-400)
);
--btn-secondary-active-bg-color: light-dark(
var(--blue-600),
var(--neutral-500)
);
--btn-tertiary-color: light-dark(var(--blue-400), var(--blue-500));
--btn-tertiary-hover-color: light-dark(var(--blue-300), var(--blue-400));
--btn-tertiary-active-color: light-dark(var(--blue-200), var(--blue-300));
--btn-tertiary-bg-color: var(--surface-bg-color);
--btn-ghost-color: light-dark(var(--blue-400), var(--blue-500));
--btn-ghost-hover-bg-color: light-dark(
var(--neutral-800),
var(--neutral-200)
);
--btn-ghost-active-bg-color: light-dark(
var(--neutral-700),
var(--neutral-300)
);
}
:root {
/* ----------------------------- Cobalt regular palette ---------------------------- */
--color-white: #ffffff;
--color-black: #000000;
--color-blue-025: #03071c;
--color-blue-050: #040b2b;
--color-blue-075: #06103d;
--color-blue-100: #0f2658;
--color-blue-200: #163984;
--color-blue-300: #2256c6;
--color-blue-400: #2969f2;
--color-blue-500: #608ff4;
--color-blue-600: #a7c1f9;
--color-blue-700: #d3dffb;
--color-blue-750: #e6edfc;
--color-blue-800: #f0f4fd;
--color-blue-900: #f7f9fe;
--color-primary-blue: var(--color-blue-400);
--color-red-025: #1f0c07;
--color-red-050: #2f120b;
--color-red-075: #43190f;
--color-red-100: #592114;
--color-red-200: #86321f;
--color-red-300: #c84b2e;
--color-red-400: #f55c38;
--color-red-500: #f77a5c;
--color-red-600: #faa692;
--color-red-700: #fcd3c9;
--color-red-750: #fde6e1;
--color-red-800: #fef0ed;
--color-red-900: #fef7f6;
--color-semantic-red: var(--color-red-400);
--color-neutral-025: #0b0d0e;
--color-neutral-050: #131516;
--color-neutral-075: #181c1e;
--color-neutral-100: #202528;
--color-neutral-200: #31383c;
--color-neutral-300: #49535a;
--color-neutral-400: #59666e;
--color-neutral-500: #778288;
--color-neutral-600: #a4acb0;
--color-neutral-700: #d2d5d7;
--color-neutral-750: #e6e8e9;
--color-neutral-800: #ebeced;
--color-neutral-900: #f7f7f7;
--color-turquoise-025: #06181c;
--color-turquoise-050: #09262b;
--color-turquoise-075: #0d363d;
--color-turquoise-100: #124851;
--color-turquoise-200: #1b6c79;
--color-turquoise-300: #28a2b6;
--color-turquoise-400: #31c6de;
--color-turquoise-500: #56d0e4;
--color-turquoise-600: #8fe0ed;
--color-turquoise-700: #c7eff6;
--color-turquoise-750: #e0f6fa;
--color-turquoise-800: #ecfafc;
--color-turquoise-900: #f5fcfd;
--color-supporting-turquoise: var(--color-turquoise-400);
--color-teal-025: #041a17;
--color-teal-050: #062923;
--color-teal-075: #083a31;
--color-teal-100: #0b4d41;
--color-teal-200: #107461;
--color-teal-300: #19ad92;
--color-teal-400: #1ed4b2;
--color-teal-500: #47dcc0;
--color-teal-600: #84e8d5;
--color-teal-700: #c2f3ea;
--color-teal-750: #ddf8f3;
--color-teal-800: #ebfbf8;
--color-teal-900: #f5fdfb;
--color-supporting-teal: var(--color-teal-400);
--color-green-025: #05170f;
--color-green-050: #082518;
--color-green-075: #0c3422;
--color-green-100: #10452d;
--color-green-200: #186844;
--color-green-300: #249b65;
--color-green-400: #2cbe7c;
--color-green-500: #52ca94;
--color-green-600: #8cdcb8;
--color-green-700: #c5eddb;
--color-green-750: #dff5eb;
--color-green-800: #ecf9f3;
--color-green-900: #f5fcf9;
--color-semantic-green: var(--color-green-400);
--color-lime-025: #131704;
--color-lime-050: #1e2505;
--color-lime-075: #2a3407;
--color-lime-100: #38450a;
--color-lime-200: #55670f;
--color-lime-300: #7f9b16;
--color-lime-400: #9bbd1b;
--color-lime-500: #adc944;
--color-lime-600: #c8db83;
--color-lime-700: #e4edc1;
--color-lime-750: #f0f5dc;
--color-lime-800: #f6f9ea;
--color-lime-900: #fafcf4;
--color-supporting-lime: var(--color-lime-400);
--color-yellow-025: #201600;
--color-yellow-050: #312100;
--color-yellow-075: #462f00;
--color-yellow-100: #5d3e00;
--color-yellow-200: #8b5d00;
--color-yellow-300: #d18c00;
--color-yellow-400: #ffab00;
--color-yellow-500: #ffba2e;
--color-yellow-600: #ffd174;
--color-yellow-700: #ffe8b9;
--color-yellow-750: #fff2d8;
--color-yellow-800: #fff7e8;
--color-yellow-900: #fffbf3;
--color-semantic-yellow: var(--color-yellow-400);
--color-orange-025: #201004;
--color-orange-050: #311905;
--color-orange-075: #462307;
--color-orange-100: #5d2f09;
--color-orange-200: #8b460d;
--color-orange-300: #d16a14;
--color-orange-400: #ff8118;
--color-orange-500: #f59b40;
--color-orange-600: #ffba81;
--color-orange-700: #ffddc0;
--color-orange-750: #ffecdc;
--color-orange-800: #fff4ea;
--color-orange-900: #fff9f4;
--color-semantic-orange: var(--color-orange-400);
--color-pink-025: #1c0812;
--color-pink-050: #2c0c1c;
--color-pink-075: #3e1127;
--color-pink-100: #521734;
--color-pink-200: #7b224f;
--color-pink-300: #b93376;
--color-pink-400: #e23e90;
--color-pink-500: #e761a4;
--color-pink-600: #ef96c2;
--color-pink-700: #f7cae1;
--color-pink-750: #fae1ee;
--color-pink-800: #fcedf5;
--color-pink-900: #fdf6fa;
--color-supporting-pink: var(--color-pink-400);
--color-purple-025: #0a0817;
--color-purple-050: #0f0d24;
--color-purple-075: #151233;
--color-purple-100: #1c1844;
--color-purple-200: #292366;
--color-purple-300: #3e3599;
--color-purple-400: #4c41bb;
--color-purple-500: #7169c9;
--color-purple-600: #9d97da;
--color-purple-700: #cecbec;
--color-purple-750: #e4e2f4;
--color-purple-800: #efeef9;
--color-purple-900: #f7f6fc;
--color-supporting-purple: var(--color-purple-400);
}
/* --------------------------------- THEMES --------------------------------- */
/* ============================================
Color Tokens
============================================ */
:root {
/* Button */
--button-primary-default: var(--button-primary-default);
--button-primary-hover: var(--button-primary-hover);
--button-primary-pressed: var(--button-primary-pressed);
--button-secondary-default: var(--button-secondary-default);
--button-secondary-hover: var(--button-secondary-hover);
--button-secondary-pressed: var(--button-secondary-pressed);
--button-tertiary-default: var(--button-tertiary-default);
--button-tertiary-hover: var(--button-tertiary-hover);
--button-tertiary-pressed: var(--button-tertiary-pressed);
--button-ghost-default: var(--button-ghost-default);
--button-ghost-hover: var(--button-ghost-hover);
--button-ghost-pressed: var(--button-ghost-pressed);
--button-danger-default: var(--button-danger-default);
--button-danger-hover: var(--button-danger-hover);
--button-danger-pressed: var(--button-danger-pressed);
--button-disabled-default: var(--button-disabled-default);
--button-disabled-tertiary: var(--button-disabled-tertiary);
--button-text-secondary: var(--button-text-secondary);
/* Text */
--text-primary: var(--text-primary);
--text-secondary: var(--text-secondary);
--text-tertiary: var(--text-tertiary);
--text-on-color: var(--text-on-color);
--text-on-color-inverse: var(--text-on-color-inverse);
--text-disabled: var(--text-disabled);
--text-danger: var(--text-danger);
--text-interactive: var(--text-interactive);
/* Support */
--support-info-background: var(--support-info-background);
--support-danger-background: var(--support-danger-background);
--support-success-background: var(--support-success-background);
--support-warning-background: var(--support-warning-background);
--support-info-subtle-background: var(--support-info-subtle-background);
--support-danger-subtle-background: var(--support-danger-subtle-background);
--support-warning-subtle-background: var(--support-warning-subtle-background);
--support-success-subtle-background: var(--support-success-subtle-background);
--support-text-alert-success: var(--support-text-alert-success);
--support-text-alert-warning: var(--support-text-alert-warning);
--support-text-alert-danger: var(--support-text-alert-danger);
--support-text-alert-info: var(--support-text-alert-info);
/* Icons */
--icon-primary: var(--icon-primary);
--icon-primary-hover: var(--icon-primary-hover);
--icon-primary-pressed: var(--icon-primary-pressed);
--icon-secondary: var(--icon-secondary);
--icon-secondary-hover: var(--icon-secondary-hover);
--icon-secondary-pressed: var(--icon-secondary-pressed);
--icon-tertiary: var(--icon-tertiary);
--icon-on-color: var(--icon-on-color);
--icon-on-color-inverse: var(--icon-on-color-inverse);
--icon-disabled: var(--icon-disabled);
--icon-danger: var(--icon-danger);
--icon-link: var(--icon-link);
--icon-hover: var(--icon-hover);
--icon-pressed: var(--icon-pressed);
--icon-inverse: var(--icon-inverse);
/* Surface */
--surface-background: var(--surface-background);
--surface-primary: var(--surface-primary);
--surface-secondary: var(--surface-secondary);
--surface-tertiary: var(--surface-tertiary);
--surface-scrim: var(--surface-scrim);
--surface-overlay: var(--surface-overlay);
/* Link */
--link-on-color: var(--link-on-color);
--link-interactive: var(--link-interactive);
--link-hover: var(--link-hover);
--link-pressed: var(--link-pressed);
--link-secondary: var(--link-secondary);
--link-secondary-hover: var(--link-secondary-hover);
--link-secondary-pressed: var(--link-secondary-pressed);
--link-disabled: var(--link-disabled);
/* Stroke */
--stroke-default: var(--stroke-default);
--stroke-hover: var(--stroke-hover);
--stroke-danger: var(--stroke-danger);
--stroke-danger-hover: var(--stroke-danger-hover);
--stroke-focus: var(--stroke-focus);
--stroke-focus-on-color: var(--stroke-focus-on-color);
--stroke-disabled: var(--stroke-disabled);
--stroke-subtle: var(--stroke-subtle);
/* Input */
--input-default: var(--input-default);
--input-disabled: var(--input-disabled);
/* Chips */
--chips-background-disabled: var(--chips-background-disabled);
--chips-text-disabled: var(--chips-text-disabled);
--chips-icon-disabled: var(--chips-icon-disabled);
--chips-background-off-default: var(--chips-background-off-default);
--chips-background-off-hover: var(--chips-background-off-hover);
--chips-background-off-pressed: var(--chips-background-off-pressed);
--chips-background-off-disabled: var(--chips-background-off-disabled);
--chips-background-on-default: var(--chips-background-on-default);
--chips-background-on-hover: var(--chips-background-on-hover);
--chips-background-on-pressed: var(--chips-background-on-pressed);
/* Miscellaneous tokens */
--toggle-off-default: var(--toggle-off-default);
--toggle-off-hover: var(--toggle-off-hover);
--content-switcher-default: var(--content-switcher-default);
--tab-default: var(--tab-default);
--tab-off-disabled: var(--tab-off-disabled);
--tab-hover: var(--tab-hover);
--tab-pressed: var(--tab-pressed);
--nav-selected-default: var(--nav-selected-default);
--nav-selected-hover: var(--nav-selected-hover);
--nav-selected-pressed: var(--nav-selected-pressed);
--nav-selected-icons: var(--nav-selected-icons);
--nav-selected-text: var(--nav-selected-text);
--nav-group-active-default: var(--nav-group-active-default);
--nav-group-active-hover: var(--nav-group-active-hover);
--nav-group-active-pressed: var(--nav-group-active-pressed);
--table-active-default: var(--table-active-default);
--table-active-hover: var(--table-active-hover);
--table-active-pressed: var(--table-active-pressed);
--table-button-inactive-hover: var(--table-button-inactive-hover);
--table-button-inactive-pressed: var(--table-button-inactive-pressed);
--table-button-active-hover: var(--table-button-active-hover);
--table-button-active-pressed: var(--table-button-active-pressed);
--skeleton-background: var(--skeleton-background);
--skeleton-subtle: var(--skeleton-subtle);
/* Tags */
--tag-background-bold-blue: var(--tag-background-bold-blue);
--tag-background-bold-turquoise: var(--tag-background-bold-turquoise);
--tag-background-bold-teal: var(--tag-background-bold-teal);
--tag-background-bold-lime: var(--tag-background-bold-lime);
--tag-background-bold-green: var(--tag-background-bold-green);
--tag-background-bold-yellow: var(--tag-background-bold-yellow);
--tag-background-bold-orange: var(--tag-background-bold-orange);
--tag-background-bold-red: var(--tag-background-bold-red);
--tag-background-bold-pink: var(--tag-background-bold-pink);
--tag-background-bold-purple: var(--tag-background-bold-purple);
--tag-background-bold-neutral: var(--tag-background-bold-neutral);
--tag-background-subtle-blue: var(--tag-background-subtle-blue);
--tag-background-subtle-turquoise: var(--tag-background-subtle-turquoise);
--tag-background-subtle-teal: var(--tag-background-subtle-teal);
--tag-background-subtle-lime: var(--tag-background-subtle-lime);
--tag-background-subtle-green: var(--tag-background-subtle-green);
--tag-background-subtle-yellow: var(--tag-background-subtle-yellow);
--tag-background-subtle-orange: var(--tag-background-subtle-orange);
--tag-background-subtle-red: var(--tag-background-subtle-red);
--tag-background-subtle-pink: var(--tag-background-subtle-pink);
--tag-background-subtle-purple: var(--tag-background-subtle-purple);
--tag-background-subtle-neutral: var(--tag-background-subtle-neutral);
--tag-text-neutral: var(--tag-text-neutral);
--tag-text-blue: var(--tag-text-blue);
--tag-text-turquoise: var(--tag-text-turquoise);
--tag-text-teal: var(--tag-text-teal);
--tag-text-lime: var(--tag-text-lime);
--tag-text-green: var(--tag-text-green);
--tag-text-yellow: var(--tag-text-yellow);
--tag-text-orange: var(--tag-text-orange);
--tag-text-red: var(--tag-text-red);
--tag-text-pink: var(--tag-text-pink);
--tag-text-purple: var(--tag-text-purple);
--tag-text-on-color: var(--tag-text-on-color);
}
/* ============================================
Theme Light
============================================ */
:root,
:root[data-theme="light"] {
/* Button */
--button-primary-default: var(--color-blue-400);
--button-primary-hover: var(--color-blue-300);
--button-primary-pressed: var(--color-blue-200);
--button-secondary-default: var(--color-blue-700);
--button-secondary-hover: var(--color-blue-600);
--button-secondary-pressed: var(--color-blue-500);
--button-tertiary-default: var(--color-blue-400);
--button-tertiary-hover: var(--color-blue-300);
--button-tertiary-pressed: var(--color-blue-200);
--button-ghost-default: rgba(255, 255, 255, 0);
--button-ghost-hover: var(--color-neutral-800);
--button-ghost-pressed: var(--color-neutral-700);
--button-danger-default: var(--color-red-400);
--button-danger-hover: var(--color-red-300);
--button-danger-pressed: var(--color-red-200);
--button-disabled-default: var(--color-neutral-700);
--button-disabled-tertiary: var(--color-neutral-600);
--button-text-secondary: var(--color-blue-100);
/* Text */
--text-primary: var(--color-neutral-075);
--text-secondary: var(--color-neutral-400);
--text-tertiary: var(--color-neutral-600);
--text-on-color: var(--color-white);
--text-on-color-inverse: var(--color-neutral-075);
--text-disabled: var(--color-neutral-600);
--text-danger: var(--color-red-400);
--text-interactive: var(--color-blue-400);
/* Support */
--support-info-background: var(--color-primary-blue);
--support-danger-background: var(--color-semantic-red);
--support-success-background: var(--color-semantic-green);
--support-warning-background: var(--color-semantic-yellow);
--support-info-subtle-background: var(--color-blue-800);
--support-danger-subtle-background: var(--color-red-800);
--support-warning-subtle-background: var(--color-yellow-800);
--support-success-subtle-background: var(--color-green-800);
--support-text-alert-success: var(--color-neutral-075);
--support-text-alert-warning: var(--color-neutral-075);
--support-text-alert-danger: var(--color-neutral-075);
--support-text-alert-info: var(--color-neutral-075);
/* Icons */
--icon-primary: var(--color-neutral-075);
--icon-primary-hover: var(--color-neutral-025);
--icon-primary-pressed: var(--color-neutral-075);
--icon-secondary: var(--color-neutral-400);
--icon-secondary-hover: var(--color-neutral-300);
--icon-secondary-pressed: var(--color-neutral-400);
--icon-tertiary: var(--color-neutral-600);
--icon-on-color: var(--color-white);
--icon-on-color-inverse: var(--color-neutral-075);
--icon-disabled: var(--color-neutral-600);
--icon-danger: var(--color-red-400);
--icon-link: var(--color-blue-400);
--icon-hover: var(--color-blue-300);
--icon-pressed: var(--color-blue-400);
--icon-inverse: var(--color-white);
/* Surface */
--surface-background: var(--color-neutral-900);
--surface-primary: var(--color-white);
--surface-secondary: var(--color-white);
--surface-tertiary: var(--color-neutral-900);
--surface-scrim: rgba(0, 0, 0, 0.7);
--surface-overlay: rgba(255, 255, 255, 0.8);
/* Link */
--link-on-color: var(--color-white);
--link-interactive: var(--color-blue-400);
--link-hover: var(--color-blue-300);
--link-pressed: var(--color-blue-400);
--link-secondary: var(--color-neutral-400);
--link-secondary-hover: var(--color-neutral-300);
--link-secondary-pressed: var(--color-neutral-400);
--link-disabled: var(--color-neutral-600);
/* Stroke */
--stroke-default: var(--color-neutral-600);
--stroke-hover: var(--color-neutral-400);
--stroke-danger: var(--color-semantic-red);
--stroke-danger-hover: var(--color-red-300);
--stroke-focus: var(--color-primary-blue);
--stroke-focus-on-color: var(--color-white);
--stroke-disabled: var(--color-neutral-700);
--stroke-subtle: var(--color-neutral-750);
/* Input */
--input-default: var(--color-white);
--input-disabled: var(--color-neutral-800);
/* Chips */
--chips-background-disabled: var(--color-neutral-700);
--chips-text-disabled: var(--color-neutral-600);
--chips-icon-disabled: var(--color-neutral-600);
--chips-background-off-default: var(--color-neutral-800);
--chips-background-off-hover: var(--color-neutral-700);
--chips-background-off-pressed: var(--color-neutral-600);
--chips-background-off-disabled: var(--color-neutral-800);
--chips-background-on-default: var(--color-blue-700);
--chips-background-on-hover: var(--color-blue-600);
--chips-background-on-pressed: var(--color-blue-500);
/* Miscellaneous tokens */
--toggle-off-default: var(--color-neutral-500);
--toggle-off-hover: var(--color-neutral-400);
--content-switcher-default: var(--color-white);
--tab-default: var(--color-white);
--tab-off-disabled: var(--color-neutral-800);
--tab-hover: var(--color-neutral-700);
--tab-pressed: var(--color-neutral-600);
--nav-selected-default: var(--color-blue-700);
--nav-selected-hover: var(--color-blue-600);
--nav-selected-pressed: var(--color-blue-700);
--nav-selected-icons: var(--color-blue-400);
--nav-selected-text: var(--color-blue-400);
--nav-group-active-default: var(--color-blue-800);
--nav-group-active-hover: var(--color-blue-700);
--nav-group-active-pressed: var(--color-blue-600);
--table-active-default: var(--color-blue-900);
--table-active-hover: var(--color-blue-800);
--table-active-pressed: var(--color-blue-700);
--table-button-inactive-hover: var(--color-neutral-700);
--table-button-inactive-pressed: var(--color-neutral-600);
--table-button-active-hover: var(--color-blue-750);
--table-button-active-pressed: var(--color-blue-700);
--skeleton-background: var(--color-neutral-700);
--skeleton-subtle: var(--color-neutral-800);
/* Tags */
--tag-background-bold-blue: var(--color-primary-blue);
--tag-background-bold-turquoise: var(--color-turquoise-400);
--tag-background-bold-teal: var(--color-teal-400);
--tag-background-bold-lime: var(--color-lime-400);
--tag-background-bold-green: var(--color-semantic-green);
--tag-background-bold-yellow: var(--color-semantic-yellow);
--tag-background-bold-orange: var(--color-semantic-orange);
--tag-background-bold-red: var(--color-red-300);
--tag-background-bold-pink: var(--color-pink-400);
--tag-background-bold-purple: var(--color-purple-400);
--tag-background-bold-neutral: var(--color-neutral-200);
--tag-background-subtle-blue: var(--color-blue-700);
--tag-background-subtle-turquoise: var(--color-turquoise-700);
--tag-background-subtle-teal: var(--color-teal-700);
--tag-background-subtle-lime: var(--color-lime-700);
--tag-background-subtle-green: var(--color-green-700);
--tag-background-subtle-yellow: var(--color-yellow-700);
--tag-background-subtle-orange: var(--color-orange-700);
--tag-background-subtle-red: var(--color-red-700);
--tag-background-subtle-pink: var(--color-pink-700);
--tag-background-subtle-purple: var(--color-purple-700);
--tag-background-subtle-neutral: var(--color-neutral-700);
--tag-text-neutral: var(--color-neutral-200);
--tag-text-blue: var(--color-blue-200);
--tag-text-turquoise: var(--color-turquoise-100);
--tag-text-teal: var(--color-teal-100);
--tag-text-lime: var(--color-lime-100);
--tag-text-green: var(--color-green-100);
--tag-text-yellow: var(--color-yellow-100);
--tag-text-orange: var(--color-orange-100);
--tag-text-red: var(--color-red-100);
--tag-text-pink: var(--color-pink-100);
--tag-text-purple: var(--color-purple-200);
--tag-text-on-color: var(--color-white);
}
/* ============================================
Theme Dark
============================================ */
:root[data-theme="dark"] {
/* Button */
--button-primary-default: var(--color-blue-400);
--button-primary-hover: var(--color-blue-300);
--button-primary-pressed: var(--color-blue-200);
--button-secondary-default: var(--color-neutral-300);
--button-secondary-hover: var(--color-neutral-400);
--button-secondary-pressed: var(--color-neutral-500);
--button-tertiary-default: var(--color-blue-500);
--button-tertiary-hover: var(--color-blue-400);
--button-tertiary-pressed: var(--color-blue-300);
--button-ghost-default: rgba(255, 255, 255, 0);
--button-ghost-hover: var(--color-neutral-100);
--button-ghost-pressed: var(--color-neutral-200);
--button-danger-default: var(--color-red-400);
--button-danger-hover: var(--color-red-300);
--button-danger-pressed: var(--color-red-200);
--button-disabled-default: var(--color-neutral-300);
--button-disabled-tertiary: var(--color-neutral-300);
--button-text-secondary: var(--color-white);
/* Text */
--text-primary: var(--color-white);
--text-secondary: var(--color-neutral-500);
--text-tertiary: var(--color-neutral-400);
--text-on-color: var(--color-white);
--text-on-color-inverse: var(--color-neutral-075);
--text-disabled: var(--color-neutral-500);
--text-danger: var(--color-red-400);
--text-interactive: var(--color-blue-500);
/* Support */
--support-info-background: var(--color-primary-blue);
--support-danger-background: var(--color-semantic-red);
--support-success-background: var(--color-green-500);
--support-warning-background: var(--color-yellow-500);
--support-info-subtle-background: var(--color-blue-200);
--support-danger-subtle-background: var(--color-red-100);
--support-warning-subtle-background: var(--color-yellow-100);
--support-success-subtle-background: var(--color-green-100);
--support-text-alert-success: var(--color-green-700);
--support-text-alert-warning: var(--color-yellow-700);
--support-text-alert-danger: var(--color-red-700);
--support-text-alert-info: var(--color-blue-700);
/* Icons */
--icon-primary: var(--color-white);
--icon-primary-hover: var(--color-neutral-700);
--icon-primary-pressed: var(--color-white);
--icon-secondary: var(--color-neutral-500);
--icon-secondary-hover: var(--color-neutral-600);
--icon-secondary-pressed: var(--color-neutral-500);
--icon-tertiary: var(--color-neutral-400);
--icon-on-color: var(--color-white);
--icon-on-color-inverse: var(--color-neutral-075);
--icon-disabled: var(--color-neutral-500);
--icon-danger: var(--color-red-400);
--icon-link: var(--color-blue-500);
--icon-hover: var(--color-blue-400);
--icon-pressed: var(--color-blue-500);
--icon-inverse: var(--color-neutral-100);
/* Surface */
--surface-background: var(--color-black);
--surface-primary: var(--color-neutral-050);
--surface-secondary: var(--color-neutral-075);
--surface-tertiary: var(--color-neutral-100);
--surface-scrim: rgba(0, 0, 0, 0.7);
--surface-overlay: rgba(0, 0, 0, 0.7);
/* Link */
--link-on-color: var(--color-white);
--link-interactive: var(--color-blue-500);
--link-hover: var(--color-blue-400);
--link-pressed: var(--color-blue-500);
--link-secondary: var(--color-neutral-500);
--link-secondary-hover: var(--color-neutral-600);
--link-secondary-pressed: var(--color-neutral-500);
--link-disabled: var(--color-neutral-500);
/* Stroke */
--stroke-default: var(--color-neutral-300);
--stroke-hover: var(--color-neutral-700);
--stroke-danger: var(--color-red-400);
--stroke-danger-hover: var(--color-red-300);
--stroke-focus: var(--color-white);
--stroke-focus-on-color: var(--color-white);
--stroke-disabled: var(--color-neutral-400);
--stroke-subtle: var(--color-neutral-200);
/* Input */
--input-default: var(--color-neutral-100);
--input-disabled: var(--color-neutral-300);
/* Chips */
--chips-background-disabled: var(--color-neutral-500);
--chips-text-disabled: var(--color-neutral-600);
--chips-icon-disabled: var(--color-neutral-600);
--chips-background-off-default: var(--color-neutral-100);
--chips-background-off-hover: var(--color-neutral-200);
--chips-background-off-pressed: var(--color-neutral-300);
--chips-background-off-disabled: var(--color-neutral-600);
--chips-background-on-default: var(--color-blue-100);
--chips-background-on-hover: var(--color-blue-200);
--chips-background-on-pressed: var(--color-blue-300);
/* Miscellaneous tokens */
--toggle-off-default: var(--color-neutral-400);
--toggle-off-hover: var(--color-neutral-500);
--content-switcher-default: var(--color-neutral-300);
--tab-default: var(--color-neutral-050);
--tab-off-disabled: var(--color-neutral-100);
--tab-hover: var(--color-neutral-200);
--tab-pressed: var(--color-neutral-300);
--nav-selected-default: var(--color-neutral-075);
--nav-selected-hover: var(--color-neutral-100);
--nav-selected-pressed: var(--color-neutral-200);
--nav-selected-icons: var(--color-white);
--nav-selected-text: var(--color-white);
--nav-group-active-default: var(--color-neutral-025);
--nav-group-active-hover: var(--color-neutral-100);
--nav-group-active-pressed: var(--color-neutral-200);
--table-active-default: var(--color-neutral-075);
--table-active-hover: var(--color-neutral-100);
--table-active-pressed: var(--color-neutral-075);
--table-button-inactive-hover: var(--color-neutral-200);
--table-button-inactive-pressed: var(--color-neutral-300);
--table-button-active-hover: var(--color-blue-100);
--table-button-active-pressed: var(--color-blue-200);
--skeleton-background: var(--color-neutral-300);
--skeleton-subtle: var(--color-neutral-200);
/* Tags */
--tag-background-bold-blue: var(--color-primary-blue);
--tag-background-bold-turquoise: var(--color-turquoise-400);
--tag-background-bold-teal: var(--color-teal-400);
--tag-background-bold-lime: var(--color-lime-400);
--tag-background-bold-green: var(--color-green-400);
--tag-background-bold-yellow: var(--color-yellow-500);
--tag-background-bold-orange: var(--color-orange-500);
--tag-background-bold-red: var(--color-red-400);
--tag-background-bold-pink: var(--color-pink-400);
--tag-background-bold-purple: var(--color-purple-400);
--tag-background-bold-neutral: var(--color-neutral-700);
--tag-background-subtle-neutral: var(--color-neutral-200);
--tag-background-subtle-blue: var(--color-blue-200);
--tag-background-subtle-turquoise: var(--color-turquoise-100);
--tag-background-subtle-teal: var(--color-teal-100);
--tag-background-subtle-lime: var(--color-lime-100);
--tag-background-subtle-green: var(--color-green-100);
--tag-background-subtle-yellow: var(--color-yellow-100);
--tag-background-subtle-orange: var(--color-orange-100);
--tag-background-subtle-red: var(--color-red-100);
--tag-background-subtle-pink: var(--color-pink-100);
--tag-background-subtle-purple: var(--color-purple-100);
--tag-text-neutral: var(--color-neutral-700);
--tag-text-blue: var(--color-blue-700);
--tag-text-turquoise: var(--color-turquoise-700);
--tag-text-teal: var(--color-teal-700);
--tag-text-lime: var(--color-lime-700);
--tag-text-green: var(--color-green-700);
--tag-text-yellow: var(--color-yellow-700);
--tag-text-orange: var(--color-orange-700);
--tag-text-red: var(--color-red-700);
--tag-text-pink: var(--color-pink-700);
--tag-text-purple: var(--color-purple-700);
--tag-text-on-color: var(--color-neutral-075);
}
/* -------------------------------- PROPERTIES ------------------------------- */
/* ============================================
Radius variables
============================================ */
:root {
--radius-04: 0.25rem;
--radius-08: 0.5rem;
--radius-12: 0.75rem;
}
/* ============================================
Space variables
============================================ */
:root {
--space: 1rem;
--space-01: calc(var(--space) * 0.0625); /* 1px */
--space-04: calc(var(--space) / 4); /* 4px */
--space-08: calc(var(--space) / 2 ); /* 8px */
--space-12: calc(var(--space) * 0.75); /* 12px; */
--space-16: var(--space); /* 16px */
--space-20: calc(var(--space) * 1.25); /* 20px */
--space-24: calc(var(--space) * 1.5); /* 24px */
--space-32: calc(var(--space) * 2); /* 32px */
--space-40: calc(var(--space) * 2.5); /* 40px */
--space-48: calc(var(--space) * 3); /* 48px */
--space-56: calc(var(--space) * 3.5); /* 56px */
--space-64: calc(var(--space) * 4); /* 64px */
--space-80: calc(var(--space) * 5); /* 80px */
--space-96: calc(var(--space) * 6); /* 96px */
--space-112: calc(var(--space) * 7); /* 112 */
--space-128: calc(var(--space) * 8); /* 128px */
--space-160: calc(var(--space) * 10); /* 160px */
--space-240: calc(var(--space) * 15); /* 240px */
}
/* ============================================
DEPRECATED: This file is no longer in use.
IT WILL BE DELETED ON VERSION 4.0.0
PLEASE REFER TO typography.css
Font variables
============================================ */
:root {
--font-typesize-01: 0.5rem; /* 8px */
--font-typesize-02: 0.75rem; /* 12px */
--font-typesize-03: 1rem; /* 16px; base text size */
--font-typesize-04: 1.25rem; /* 20px */
--font-typesize-05: 1.5rem; /* 24px */
--font-typesize-06: 2rem; /* 32px */
--font-typesize-07: 2.25em; /* 36px */
--font-typesize-08: 3rem; /* 48px */
--font-typesize-09: 4rem; /* 64px */
--font-typesize-10: 5.25rem; /* 84px */
--font-family-red-hat-text:
"Red Hat Text", "Red Hat Mono", "Arial", "Arial Black";
--font-family-red-hat-display:
"Red Hat Display", "Red Hat Mono", "Arial", "Arial Black";
--font-family-default: var(--font-family-red-hat-text);
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-semibold: 500;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--font-weight-extra-bolder: 800;
}
/** DEPRECATED FILE, TO BE REMOVED IN VERSION 4 */
:root {
--border-width-1: 1px;
--border-width-2: 2px;
--border-width-3: 5px;
--border-width-4: 7px;
--border-width-5: 10px;
--radius-1: 0.1rem;
--radius-2: 0.25rem;
--radius-3: 0.5rem;
--radius-3-5: 0.75rem;
--radius-4: 1rem;
--radius-4-5: 1.25rem;
--radius-5: 1.5rem;
--radius-5-5: 1.75rem;
--radius-6: 2rem;
--radius-round: 1e5px;
--radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
--radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
--radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
--radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
--radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;
--radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
--radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));
--radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));
--radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));
--radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
--radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));
--form-input--bd-radius: var(--radius-3);
}
/** DEPRECATED FILE, TO BE REMOVED IN VERSION 4 */
:root {
--shadow--color-16: hsla(0 0% 0% / 0.16);
--shadow--skim-16: 0 1px 8px 0 var(--shadow--color-16);
--shadow--lifted-16: 0 2px 16px 0 var(--shadow--color-16);
--shadow--raised-16: 0 3px 24px 0 var(--shadow--color-16);
--shadow--floating-16: 0 4px 32px 0 var(--shadow--color-16);
--shadow--color-08: hsla(0 0% 0% / 0.08);
--shadow--skim-08: 0 1px 8px 0 var(--shadow--color-08);
--shadow--lifted-08: 0 2px 16px 0 var(--shadow--color-08);
--shadow--raised-08: 0 3px 24px 0 var(--shadow--color-08);
--shadow--floating-08: 0 4px 32px 0 var(--shadow--color-08);
--shadow--color-06: hsla(0 0% 0% / 0.06);
--shadow--skim-06: 0 1px 8px 0 var(--shadow--color-06);
--shadow--lifted-06: 0 2px 16px 0 var(--shadow--color-06);
--shadow--raised-06: 0 3px 24px 0 var(--shadow--color-06);
--shadow--floating-06: 0 4px 32px 0 var(--shadow--color-06);
--shadow--color-04: hsla(0 0% 0% / 0.04);
--shadow--skim-04: 0 1px 8px 0 var(--shadow--color-04);
--shadow--lifted-04: 0 2px 16px 0 var(--shadow--color-04);
--shadow--raised-04: 0 3px 24px 0 var(--shadow--color-04);
--shadow--floating-04: 0 4px 32px 0 var(--shadow--color-04);
}
/** DEPRECATED FILE, TO BE REMOVED IN VERSION 4 */
/** DEPRECATED FILE, TO BE REMOVED IN VERSION 4 */
:root {
/* --------------------------------- STATIC --------------------------------- */
--size-02: -0.5rem;
--size-01: -0.25rem;
--size-1: 0.25rem;
--size-2: 0.5rem;
--size-3: 1rem;
--size-4: 1.25rem;
--size-5: 1.5rem;
--size-6: 1.75rem;
--size-7: 2rem;
--size-8: 3rem;
--size-9: 4rem;
--size-10: 5rem;
--size-11: 7.5rem;
--size-12: 10rem;
--size-13: 15rem;
--size-14: 20rem;
--size-15: 30rem;
/* ---------------------------------- FLUID --------------------------------- */
--size-fluid-1: clamp(0.5rem, 1vw, 1rem);
--size-fluid-2: clamp(1rem, 2vw, 1.5rem);
--size-fluid-3: clamp(1.5rem, 3vw, 2rem);
--size-fluid-4: clamp(2rem, 4vw, 3rem);
--size-fluid-5: clamp(4rem, 5vw, 5rem);
--size-fluid-6: clamp(5rem, 7vw, 7.5rem);
--size-fluid-7: clamp(7.5rem, 10vw, 10rem);
--size-fluid-8: clamp(10rem, 20vw, 15rem);
--size-fluid-9: clamp(15rem, 30vw, 20rem);
--size-fluid-10: clamp(20rem, 40vw, 30rem);
/* Shortcuts */
--size-xxs: 240px;
--size-xs: 360px;
--size-sm: 480px;
--size-md: 768px;
--size-lg: 1024px;
--size-xl: 1440px;
--size-xxl: 1920px;
--padding-xs: var(--size-01);
--padding-sm: var(--size-1);
--padding-md: var(--size-2);
--padding-lg: var(--size-3);
--padding-xl: var(--size-6);
--padding-xxl: var(--size-9);
--app-header-height: 4rem;
--form-input--padding: var(--size-2);
}
/** DEPRECATED FILE, TO BE REMOVED IN VERSION 4 */
:root {
/* DEPRECATED VARIABLES, IT WILL BE REMOVED ON VERSION 4 */
--text-size-xs: var(--text-size-02);
--text-size-sm: var(--text-size-01);
--text-size-md: var(--text-size-1);
--text-size-lg: var(--text-size-6);
--text-size-xl: var(--text-size-9);
--text-size-xxl: var(--text-size-12);
/* -------------------------------- DEPRECATED VARIABLES, IT WILL BE REMOVED ON VERSION 4 -------------------------------- */
--font-family-text: "Red Hat Text", sans-serif;
--font-family-text-italic: "Red Hat Text Italic", sans-serif;
--font-family-display: "Red Hat Display", sans-serif;
--font-family-display-italic: "Red Hat Display Italic", sans-serif;
--font-family-sans: sans-serif;
--font-family-serif: serif;
--font-family-monospace: monospace;
/* ----------------------------------
SCALES DEPRECATED, IT WILL BE REMOVED ON VERSION 4
------------------------------------- */
--text-size-02: 0.75rem; /*---- 12px */
--text-size-01: 0.875rem; /*--- 14px */
--text-size-1: 1rem; /*-------- 16px; base text size */
--text-size-2: 1.125rem; /*---- 18px */
--text-size-3: 1.25rem; /*----- 20px */
--text-size-4: 1.5rem; /*------ 24px */
--text-size-5: 1.75rem; /*----- 28px */
--text-size-6: 2rem; /*-------- 32px */
--text-size-7: 2.25rem; /*----- 36px */
--text-size-8: 2.625rem; /*---- 42px */
--text-size-9: 3rem; /*-------- 48px */
--text-size-10: 3.375rem; /*--- 54px */
--text-size-11: 3.75rem; /*---- 60px */
--text-size-11-5: 4rem; /*---- 64px */
--text-size-12: 4.25rem; /*---- 68px */
--text-size-13: 4.75rem; /*---- 76px */
--text-size-14: 5.25rem; /*---- 84px */
--text-size-15: 5.75rem; /*---- 92px */
}
/** DEPRECATED FILE, TO BE REMOVED IN VERSION 4 */
/* Attention: If you change those values update enum core/models/mediaQuery.enum.ts */
/* DEPRECATED MEDIA QUERIES, IT WILL BE REMOVED ON VERSION 4 */
/** DEPRECATED FILE, TO BE REMOVED IN VERSION 4 */
/** DEPRECATED FILE, TO BE REMOVED IN VERSION 4 */
:root {
--ease-1: cubic-bezier(0.25, 0, 0.5, 1);
--ease-2: cubic-bezier(0.25, 0, 0.4, 1);
--ease-3: cubic-bezier(0.25, 0, 0.3, 1);
--ease-4: cubic-bezier(0.25, 0, 0.2, 1);
--ease-5: cubic-bezier(0.25, 0, 0.1, 1);
--ease-in-1: cubic-bezier(0.25, 0, 1, 1);
--ease-in-2: cubic-bezier(0.5, 0, 1, 1);
--ease-in-3: cubic-bezier(0.7, 0, 1, 1);
--ease-in-4: cubic-bezier(0.9, 0, 1, 1);
--ease-in-5: cubic-bezier(1, 0, 1, 1);
--ease-out-1: cubic-bezier(0, 0, 0.75, 1);
--ease-out-2: cubic-bezier(0, 0, 0.5, 1);
--ease-out-3: cubic-bezier(0, 0, 0.3, 1);
--ease-out-4: cubic-bezier(0, 0, 0.1, 1);
--ease-out-5: cubic-bezier(0, 0, 0, 1);
--ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
--ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1); /* default */
--ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
--ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
--ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
--ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
--ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
--ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
--ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
--ease-elastic-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
--ease-squish-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
--ease-squish-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
--ease-squish-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
--ease-squish-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
--ease-squish-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);
--ease-step-1: steps(2);
--ease-step-2: steps(3);
--ease-step-3: steps(4);
--ease-step-4: steps(7);
--ease-step-5: steps(10);
}
:root {
--animation-fade-in: fade-in 0.5s var(--ease-3);
--animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
--animation-fade-out: fade-out 0.5s var(--ease-3);
--animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
--animation-scale-up: scale-up 0.5s var(--ease-3);
--animation-scale-down: scale-down 0.5s var(--ease-3);
--animation-slide-out-up: slide-out-up 0.5s var(--ease-3);
--animation-slide-out-down: slide-out-down 0.5s var(--ease-3);
--animation-slide-out-right: slide-out-right 0.5s var(--ease-3);
--animation-slide-out-left: slide-out-left 0.5s var(--ease-3);
--animation-slide-in-up: slide-in-up 0.5s var(--ease-3);
--animation-slide-in-down: slide-in-down 0.5s var(--ease-3);
--animation-slide-in-right: slide-in-right 0.5s var(--ease-3);
--animation-slide-in-left: slide-in-left 0.5s var(--ease-3);
--animation-shake-x: shake-x 0.75s var(--ease-out-5);
--animation-shake-y: shake-y 0.75s var(--ease-out-5);
--animation-spin: spin 2s linear infinite;
--animation-ping: ping 5s var(--ease-out-3) infinite;
--animation-blink: blink 1s var(--ease-out-3) infinite;
--animation-float: float 3s var(--ease-in-out-3) infinite;
--animation-bounce: bounce 2s var(--ease-squish-2) infinite;
--animation-pulse: pulse 2s var(--ease-out-3) infinite;
}
@keyframes fade-in {
to {
opacity: 1;
}
}
@keyframes fade-in-bloom {
0% {
opacity: 0;
filter: brightness(1) blur(20px);
}
10% {
opacity: 1;
filter: brightness(2) blur(10px);
}
100% {
opacity: 1;
filter: brightness(1) blur(0);
}
}
@keyframes fade-out {
to {
opacity: 0;
}
}
@keyframes fade-out-bloom {
100% {
opacity: 0;
filter: brightness(1) blur(20px);
}
10% {
opacity: 1;
filter: brightness(2) blur(10px);
}
0% {
opacity: 1;
filter: brightness(1) blur(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: translateX(100%);
}
}
@keyframes slide-out-left {
to {
transform: translateX(-100%);
}
}
@keyframes slide-in-up {
from {
transform: translateY(100%);
}
}
@keyframes slide-in-down {
from {
transform: translateY(-100%);
}
}
@keyframes slide-in-right {
from {
transform: translateX(-100%);
}
}
@keyframes slide-in-left {
from {
transform: translateX(100%);
}
}
@keyframes shake-x {
0%,
100% {
transform: translateX(0%);
}
20% {
transform: translateX(-5%);
}
40% {
transform: translateX(5%);
}
60% {
transform: translateX(-5%);
}
80% {
transform: translateX(5%);
}
}
@keyframes shake-y {
0%,
100% {
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%,
100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes float {
50% {
transform: translateY(-25%);
}
}
@keyframes bounce {
25% {
transform: translateY(-20%);
}
40% {
transform: translateY(-3%);
}
0%,
60%,
100% {
transform: translateY(0);
}
}
@keyframes pulse {
50% {
transform: scale(0.9, 0.9);
}
}
@media (prefers-color-scheme: dark) {
@keyframes fade-in-bloom {
0% {
opacity: 0;
filter: brightness(1) blur(20px);
}
10% {
opacity: 1;
filter: brightness(0.5) blur(10px);
}
100% {
opacity: 1;
filter: brightness(1) blur(0);
}
}
}
@media (prefers-color-scheme: dark) {
@keyframes fade-out-bloom {
100% {
opacity: 0;
filter: brightness(1) blur(20px);
}
10% {
opacity: 1;
filter: brightness(0.5) blur(10px);
}
0% {
opacity: 1;
filter: brightness(1) blur(0);
}
}
}
:root {
--z-index-page-content: 0;
--z-index-action-bar: 1000;
--z-index-flag-message: 2000;
--z-index-side-navigation: 3000;
--z-index-global-header: 4000;
--z-index-side-panel: 5000;
--z-index-modal: 6000;
--z-index-popover: 7000;
}
/* --------------------------------- LAYERS ---------------------------------
THE LAYERS APPROACH IS NOW DEPRECATED.
ALL THE COMPONENTS SHOULD HAVE THEIR OWN CSS FILE.
THIS FILE IS JUST FOR THE GLOBAL STYLES.
THE LAYERS WILL BE REMOVED IN THE NEXT RELEASE.
PLEASE, DO NOT USE THE LAYERS IN YOUR CSS FILES.
THANK YOU!
*/
@layer reset;
@layer element;
@layer third-party;
@layer component;
@layer utility;
@layer override;
@layer app;
/* ------------------------------ End of layers ----------------------------- */
@layer reset {
* {
box-sizing: border-box;
}
button {
-webkit-appearance: none;
border-radius: 0;
text-align: inherit;
background: none;
box-shadow: none;
padding: 0;
cursor: pointer;
border: none;
color: inherit;
font: inherit;
display: flex;
align-items: center;
}
button:disabled {
cursor: not-allowed;
}
:focus {
outline: 0;
}
:focus-visible {
outline: 2px solid hsl(221 89% 55%);
outline: 2px solid var(--blue-400);
}
:disabled {
cursor: not-allowed !important;
}
.disabled {
cursor: not-allowed !important;
}
::-moz-placeholder {
color: hsl(201 7% 50%);
color: var(--field-placeholder-color);
font-weight: 300;
font-weight: var(--font-weight-light);
opacity: 0.54;
}
::placeholder {
color: hsl(201 7% 50%);
color: var(--field-placeholder-color);
font-weight: 300;
font-weight: var(--font-weight-light);
opacity: 0.54;
}
.placeholder {
color: hsl(201 7% 50%);
color: var(--field-placeholder-color);
font-weight: 300;
font-weight: var(--font-weight-light);
opacity: 0.54;
}
}
@layer element {
* {
font-family: "Red Hat Text", sans-serif;
font-family: var(--font-family-text);
}
body {
background-color: var(--surface--primary);
color: var(--text-color);
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
input,
select,
button {
font-size: 1rem;
font-size: var(--text-size-md);
line-height: 1.25;
}
i,
em {
font-family: "Red Hat Text Italic", sans-serif;
font-family: var(--font-family-text-italic);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Red Hat Display", sans-serif;
font-family: var(--font-family-display);
}
h1 i,
h1 em,
h2 i,
h2 em,
h3 i,
h3 em,
h4 i,
h4 em,
h5 i,
h5 em,
h6 i,
h6 em {
font-family: "Red Hat Display Italic", sans-serif;
font-family: var(--font-family-display-italic);
}
p {
margin: 0 0 1rem 0;
}
p:last-of-type {
margin: 0;
}
dialog {
overflow: visible;
transition: opacity 0.5s cubic-bezier(0.25, 0, 0.3, 1);
transition: opacity 0.5s var(--ease-3);
}
dialog::backdrop {
background-color: light-dark(hsla(0, 0%, 0%, 0.7), hsla(0, 0%, 100%, 0.3));
}
code {
font-family: monospace;
font-family: var(--font-family-monospace);
font-size: 1rem;
font-size: var(--text-size-1);
}
}
[hidden],
.visually-hidden {
height: 0;
margin: 0;
opacity: 0;
padding: 0;
width: 0;
border: 0;
}
.scheduleMfeRoot {
overscroll-behavior: none;
}
.schedule-Container {
display: flex;
height: 100vh;
overflow: hidden;
justify-content: space-around;
flex-wrap: nowrap;
}
@media (max-width: 480px) {
html {
font-size: 13px;
}
}
dialog:modal {
overflow: visible;
}
:where(.co-modal) .co-modal__content {
margin: 0;
overscroll-behavior: none;
padding: 0;
}
:where(.co-modal) .co-modal__close {
top: 1.5rem;
right: 1.5rem;
z-index: 3;
}
.co-modal--md:where(.co-modal) {
--size-md: 45rem; /* 720px */
min-width: 45rem;
min-width: var(--size-md);
}
@media (max-width: 480px) {
.co-modal--md:where(.co-modal) {
--size-md: 22.5rem; /* 360px */
}
.co-modal--md:where(.co-modal) .co-modal__close {
top: 1rem;
right: 1rem;
}
}
.co-modal--sm:where(.co-modal) {
--size-sm: 22.5rem; /* 360px */
min-width: 22.5rem;
min-width: var(--size-sm);
}
.co-modal--sm:where(.co-modal) .co-modal__close {
top: 1rem;
right: 1rem;
}
@media (max-width: 480px) {
.co-modal--xl:where(.co-modal),
.co-modal--lg:where(.co-modal),
.co-modal--md:where(.co-modal),
.co-modal--sm:where(.co-modal) {
--size-md: calc(100% - 4rem);
--size-sm: calc(100% - 4rem);
border-radius: var(--radius-3);
min-height: calc(100% - 4rem);
min-height: var(--size-md);
min-width: calc(100% - 4rem);
min-width: var(--size-md);
max-width: calc(100% - 1rem);
left: 0.5rem;
right: 0.5rem;
top: 3.5rem;
bottom: 0.5rem;
}
}
@layer component{.co-icon{pointer-events:none}.co-icon.co-icon--xs{height:.75rem;width:.75rem}.co-icon.co-icon--sm{height:1rem;width:1rem}.co-icon.co-icon--md{height:1.5rem;width:1.5rem}.co-icon.co-icon--lg{height:2rem;width:2rem}.co-icon.co-icon--xl{height:3rem;width:3rem}.co-icon.co-icon--xxl{height:4rem;width:4rem}.co-icon.co-icon--info{color:var(--info-color)}.co-icon.co-icon--warning{color:var(--warning-color)}.co-icon.co-icon--error{color:var(--danger-color)}.co-icon.co-icon--success{color:var(--success-color)}}
.skeleton-card {
background: #ffffff;
padding: 0.9375rem;
margin-bottom: 0.625rem;
}
.skeleton {
background: #f0f0f0;
border-radius: 0.25rem;
overflow: hidden;
position: relative;
}
.skeleton::after {
animation: shimmer 1.5s infinite;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
}
.skeleton-title {
height: 5rem;
width: 100%;
margin-bottom: 0.625rem;
}
.skeleton-text {
height: 5rem;
width: 100%;
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
._coErrState_16972_1 {
display: flex;
justify-content: space-around;
margin: 10%;
}
._calendar_28a8n_1 {
max-width: 100%;
font-size: var(--text-size-1);
line-height: 2.5rem;
text-align: center;
margin-bottom: 1%;
font-weight: var(--font-weight-normal);
}
._header_28a8n_10 {
display: flex;
justify-content: space-between;
align-items: center;
}
._leftSection_28a8n_16 {
display: flex;
align-items: center;
gap: 0.625rem;
}
._dateRange_28a8n_22 {
display: flex;
align-items: center;
}
._dateRange_28a8n_22 *span {
background: var(--neutral-075);
}
._dateRange_28a8n_22 h3 {
font-size: var(--text-size-3);
font-weight: var(--font-weight-bolder);
line-height: var(--text-size-4);
}
._navigation_28a8n_34 {
display: flex;
gap: 0.3125rem;
}
._navButton_28a8n_39 {
background: none;
border: none;
font-size: var(--text-size-4);
cursor: pointer;
color: var(--blue-075);
padding: 0.3125rem;
}
._viewOptions_28a8n_48 {
display: inline-flex;
padding: 0.125rem;
align-items: flex-start;
gap: 0.125rem;
border-radius: var(--text-size-4);
background: var(--neutral-800);
}
._viewButton_28a8n_57 {
background: none;
border: none;
font-size: 10.5rem;
cursor: pointer;
padding: 0.3125rem 0.625rem;
background-color: var(--neutral-800);
border-radius: 20.25rem;
}
._viewButton_28a8n_57:hover {
background-color: var(--neutral-800);
}
._navButtons_28a8n_71 {
display: flex;
margin-left: 0.625rem;
}
._navButtons_28a8n_71 button,
._viewButtons_28a8n_77 button {
background: none;
border: none;
font-size: 1.2em;
cursor: pointer;
color: var(--neutral-600);
}
._activeTodayDate_28a8n_85 {
background-color: var(--schedule-blue-400);
border-radius: 50%;
color: var(--white) !important;
}
._activeTodayDate_28a8n_85::after {
content: '';
width: 0.25rem;
height: 0.25rem;
background-color: var(--white);
border-radius: 50%;
position: absolute;
bottom: 0.3125rem;
left: 50%;
transform: translateX(-50%);
}
._todayDay_28a8n_103 {
color: var(--schedule-blue-400);
font-weight: var(--font-weight-bold) !important;
}
._todayDate_28a8n_108 {
color: var(--schedule-blue-400) !important;
font-weight: var(--font-weight-bold);
}
._todayDate_28a8n_108::after {
content: '';
width: 0.25rem;
height: 0.25rem;
background-color: var(--schedule-blue-400);
border-radius: 50%;
position: absolute;
bottom: 0.3125rem;
left: 50%;
transform: translateX(-50%);
}
._selectedFutureDay_28a8n_125 {
color: var(--neutral-075);
font-weight: var(--font-weight-bold);
}
._selectedFutureDate_28a8n_130 {
background-color: var(--blue-700);
border-radius: 50%;
}
._week_28a8n_135 {
display: flex;
justify-content: space-between;
}
._dayName_28a8n_140 {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
font-weight: var(--font-weight-normal);
}
._dayContainer_28a8n_148 {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
line-height: var(--text-size-5);
}
._activeTodayDay_28a8n_156 {
color: var(--schedule-blue-400);
font-weight: var(--font-weight-semibold);
}
._dayNumber_28a8n_161 {
color: var(--neutral-075);
font-size: var(--text-size-1);
font-style: normal;
font-weight: var(--font-weight-semibold);
text-align: center;
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
cursor: pointer;
justify-content: center;
}
a ._dateTodayActive_28a8n_174 {
color: var(--white);
border-radius: 50%;
cursor: pointer;
background-color: var(--schedule-blue-400);
}
._dateSelected_28a8n_181 {
color: var(--neutral-075);
border-radius: 50%;
cursor: pointer;
background-color: var(--blue-700);
}
._past_28a8n_188 {
color: var(--neutral-600);
pointer-events: pointer;
}
._selectedPreviousDate_28a8n_193 {
background-color: var(--blue-700);
border-radius: 50%;
}
._selectedPreviousDay_28a8n_197 {
color: var(--neutral-075);
}
._navButtons_28a8n_71 button {
background: none;
border: none;
font-size: 1.2em;
cursor: pointer;
color: var(--blue-075);
padding: 0.3125rem 0.625rem;
}
._navButtons_28a8n_71 button:hover:not(:disabled) {
background-color: var(--white);
border-radius: 50%;
}
._disabledButton_28a8n_215 {
color: var(--neutral-600);
pointer-events: none;
font-size: var(--text-size-4);
}
/*****************tooltip*******************/
._tooltip_28a8n_223 {
visibility: hidden;
transform: translateX(-30%);
padding: 0.3125rem 0.5625rem;
white-space: nowrap;
z-index: 1000;
display: flex;
gap: 0.5rem;
position: absolute;
border-radius: 0.25rem;
background: var(--neutral-100);
color: var(--white);
text-align: center;
font-size: var(--text-size-02);
font-style: normal;
font-weight: var(--font-weight-bold);
line-height: var(--text-size-1);
}
._dayContainer_28a8n_148:first-child ._dayNumber_28a8n_161 ._tooltip_28a8n_223 {
transform: translateX(0);
}
._dayContainer_28a8n_148:last-child ._dayNumber_28a8n_161 ._tooltip_28a8n_223 {
left: auto;
right: 0;
transform: translateX(0);
}
._past_28a8n_188:hover ._tooltip_28a8n_223 {
visibility: visible;
opacity: 1;
}
@layer scheduleWebApp {
:scope .sbcrumbs {
align-items: center;
display: flex;
gap: 0.5rem;
margin: 0 0 1.5rem 0;
}
:scope .sbcrumbs > button,:scope .sbcrumbs > span {
font-weight: var(--font-weight-semibold);
font-size: var(--text-size-1);
}
:scope .sbcrumbs > span:last-of-type {
color: var(--neutral-075);
}
:scope .sbcrumbs button {
color: var(--neutral-600);
}
:scope .sbcrumbs button:hover,:scope .sbcrumbs button:focus {
outline: 1;
}
:scope .sbcrumbs > em {
color: var(--neutral-600);
font-size: 0.625rem;
font-weight: var(--font-weight-bold);
}
:scope .sbcrumbs .back-button {
color: var(--schedule-blue-400);
display: flex;
align-items: center;
gap: 0.25rem;
background: none;
border: none;
cursor: pointer;
font-weight: var(--font-weight-semibold);
font-size: var(--text-size-1);
}
}
._container_ka3pc_1 {
--toggle-primary: currentColor;
--toggle-primary-bg: var(--neutral-800);
display: inline-flex;
align-items: center;
border-radius: 1.5rem;
transition: all 0.2s ease;
gap: 0.125rem;
}
._size-sm_ka3pc_12,
._size-md_ka3pc_13,
._size-lg_ka3pc_14 {
padding: 0.125rem;
}
._container-primary_ka3pc_18 {
background-color: var(--toggle-primary-bg);
}
._toggleBtn_ka3pc_22 {
display: flex;
align-items: center;
justify-content: center;
border-radius: 1.5rem;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
cursor: pointer;
outline: none;
position: relative;
overflow: hidden;
}
._tBtn-sm_ka3pc_35 {
width: 1.5rem;
height: 1.5rem;
padding: 0.25rem;
}
._tBtn-md_ka3pc_41 {
width: 3rem;
height: 2rem;
padding: 0.5rem;
}
._tBtn-lg_ka3pc_47 {
width: 4.5rem;
height: 3.5rem;
padding: 0.625rem;
}
._active_ka3pc_53 {
background-color: white;
box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
}
._active-primary_ka3pc_58 {
color: var(--toggle-primary);
}
._disabled_ka3pc_62 {
opacity: 0.6;
cursor: not-allowed;
}
._disabled_ka3pc_62 ._toggleBtn_ka3pc_22 {
cursor: not-allowed;
}
._toggleBtn_ka3pc_22:hover:not(._active_ka3pc_53):not(:disabled) {
background-color: rgba(0, 0, 0, 0.05);
}
._toggleBtn_ka3pc_22:focus-visible {
outline: 0.125rem solid currentColor;
outline-offset: 0.125rem;
}
@keyframes _scaleIn_ka3pc_1 {
from {
transform: scale(0.95);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
._active_ka3pc_53 {
animation: _scaleIn_ka3pc_1 0.2s ease;
}
._pdfDocumentViewer_e6n1b_1 {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
}
._pdfContainer_e6n1b_7 {
flex: 1;
height: 100%;
}
._coRefreshPageDataErrorState_3p71o_1 {
display: flex;
justify-content: space-around;
margin: 4rem;
flex-direction: column;
align-items: center;
}
._refreshButton_3p71o_9 {
margin-top: 1.2rem;
padding: 0.3125rem 0.625rem;
background-color: var(--blue-400);
color: var(--white);
border: none;
border-radius: 0.25rem;
cursor: pointer;
font-size: var(--text-size-1);
}
._refreshButton_3p71o_9:hover {
background-color: var(--blue-600);
}
._modalOverlay_165ff_1 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9002;
}
._modalCard_165ff_15 {
background: white;
border-radius: 0.5rem 0.5rem 0 0;
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.18);
width: calc(40%);
min-width: calc(20rem + 5%);
max-width: calc(100% - 2rem);
display: flex;
flex-direction: column;
overflow-y: auto;
height: calc(80%);
}
._modalHeader_165ff_28 {
width: 100%;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.625rem 1.25rem;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
font-size: 1.1rem;
font-weight: var(--font-weight-bold);
}
._headerLeft_165ff_41 {
flex: 1;
}
._profileDocHeader_165ff_45 {
display: flex;
align-items: center;
}
._docHeader_165ff_50 {
display: flex;
align-items: center;
}
._docButton_165ff_55 {
display: flex;
align-items: center;
gap: 0.5rem;
background: none;
border: none;
cursor: pointer;
font-size: var(--text-size-1);
color: var(--schedule-blue-400);
padding: 0;
}
._closeButton_165ff_67 {
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
color: black;
border-radius: 0.25rem;
}
._closeButton_165ff_67:hover {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
._modalContent_165ff_83 {
flex: 1;
overflow-y: hidden;
}
@layer element{input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=hidden]){text-overflow:ellipsis}input[type=radio],input[type=checkbox]{align-self:start;font-size:var(--text-size-sm);height:1.25rem;justify-self:center;margin:0;outline-offset:1px;width:1.25rem}input[type=radio]:hover,input[type=checkbox]:hover{cursor:pointer}input[type=radio]:not(:checked),input[type=checkbox]:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--surface-primary-bg-color);border:1px solid var(--stroke-color)}input[type=radio]:focus-visible,input[type=checkbox]:focus-visible{outline:2px solid var(--outline-color)}input[type=radio]{border-radius:100%}input[type=radio][aria-invalid=true],input[type=checkbox][aria-invalid=true]{accent-color:var(--danger-color)}}@layer component{.co-form{display:block}.co-form__control{display:flex}.co-form__control--vertical{flex-direction:column;justify-content:flex-start}.co-form__control--horizontal{flex-direction:row;align-items:center;-moz-column-gap:1rem;column-gap:1rem}.co-form__label{color:var(--field-label-color);display:flex;font-weight:var(--font-weight-semibold);justify-content:space-between;line-height:1rem;margin:0;padding:0}.co-form__label .extra{font-weight:var(--font-weight-regular)}.co-form__label .danger{color:var(--danger-color)}.co-form__control--vertical .co-form__label{margin:0 0 .25rem;white-space:nowrap}.co-form__control--vertical .co-form__helper-text,.co-form__control--vertical .co-form__error{margin:.25rem 0 0}.co-form__control--horizontal .co-form__label{margin:0 .5rem 0 0}.co-form__control--horizontal .co-form__helper-text,.co-form__control--horizontal .co-form__error{margin:0 0 0 .5rem}.co-form__label.required{font-weight:var(--font-weight-bold)}.co-form__helper-text{color:var(--field-helper-text-color);font-weight:var(--font-weight-regular)}.co-form__label,.co-form__helper-text{font-size:var(--text-size-xs)}.co-form__control.disabled .co-form__helper-text,.co-form__control.disabled .input-layout{color:var(--disabled-color)}.co-form__control.disabled .input-layout{background-color:var(--disabled-bg-color);border-color:var(--stroke-disabled-color)}.co-form__control.disabled :focus,.co-form__control.disabled :focus-visible,.co-form__control.disabled :focus-within{outline:0}.co-form__control.disabled .value-display .value-chip{background-color:var(--surface-active-bg-color);color:var(--stroke-color)}.co-form__control.disabled .value-display .value-chip:hover{background-color:var(--surface-active-bg-color);color:var(--stroke-color)}.co-form__control.disabled .value-display .value-chip button:hover{background:transparent;color:inherit}.co-form__radio-group,.co-form__checkbox-group{display:flex;align-items:flex-start}.co-form__radio-group--vertical,.co-form__checkbox-group--vertical{flex-direction:column;row-gap:1rem}.co-form__radio-group--horizontal,.co-form__checkbox-group--horizontal{flex-direction:row;-moz-column-gap:1rem;column-gap:1rem}.co-form__radio-group .input-list,.co-form__checkbox-group .input-list{display:flex;margin:0;padding:0}.co-form__radio-group--vertical .input-list,.co-form__checkbox-group--vertical .input-list{flex-direction:column;gap:.5rem}.co-form__radio-group--horizontal .input-list,.co-form__checkbox-group--horizontal .input-list{flex-direction:row;flex-wrap:wrap;-moz-column-gap:1rem;column-gap:1rem;row-gap:.5rem}.co-form__control.co-form__checkbox,.co-form__control.co-form__radio{display:grid;grid-template-columns:1.25rem auto;grid-row-gap:0rem;row-gap:0rem;grid-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem}.co-form__checkbox .co-form__field,.co-form__radio .co-form__field{position:static;position:initial}.co-form__control.co-form__checkbox .co-form__label,.co-form__control.co-form__radio .co-form__label{align-self:center;font-size:var(--text-size-sm);font-weight:var(--font-weight-regular);grid-column:2/3;grid-row:1/2;margin:0;padding:0}.co-form__control.co-form__checkbox .co-form__helper-text,.co-form__control.co-form__radio .co-form__helper-text{grid-column:2/3;grid-row:2/3}.co-form__field{display:flex;flex-direction:column;font-family:inherit;margin:0;position:relative}.co-form__field .select-options{display:block;list-style:none;margin:0;padding:0}.co-form__field dialog{border:0;border-radius:var(--radius-2);background-color:var(--surface-primary-bg-color);box-shadow:var(--shadow--lifted-16);left:0;position:absolute;padding:0;top:0;width:-moz-max-content;width:max-content;z-index:1}.co-form__field .co-form__error{color:var(--danger-color)}.co-form__control--horizontal .co-form__field{flex:1}.input-layout{align-items:center;background-color:var(--surface-primary-bg-color);border-radius:var(--radius-2);border:1px solid var(--stroke-color);color:var(--text-primary-color);display:flex;flex:1;-moz-column-gap:.5rem;column-gap:.5rem;line-height:1;padding:var(--padding-sm) .75rem;min-height:2.5rem}.input-layout:hover{border:1px solid var(--stroke-hover-color)}.input-layout:focus-within{border:1px solid var(--outline-color);outline:1px solid var(--outline-color)}.input-layout input,.input-layout textarea,.input-layout select{background:transparent;border:0;color:inherit;flex:1;outline:0;width:100%}.input-layout button{align-items:center;border:0;border-radius:var(--radius-2);background:transparent;justify-content:center;line-height:1;margin:0 calc(var(--padding-sm) * -1) 0 0;padding:var(--padding-sm)}.input-layout button:hover{background-color:var(--surface-hover-bg-color)}.input-layout button:active{background-color:var(--surface-active-bg-color)}.input-layout button.btn-clear{color:var(--neutral-primary)}.input-layout button.btn-clear:hover,.input-layout button.btn-clear:focus{color:var(--stroke-hover-color)}.input-layout button.btn-clear:focus-visible{outline:1px solid var(--outline-color)}.input-layout button.btn-clear:active{color:var(--stroke-hover-color)}.input-layout button.listbox-trigger{margin:0}.input-layout svg{flex:0 0 1rem}.input-layout svg.co-icon--error{margin-left:auto}.input-layout:has(svg.co-icon--error){border:1px solid var(--danger-color)}.with-error-icon .input-layout{border:1px solid var(--danger-color)}.with-error-icon .input-layout:focus-within,.with-error-icon .input-layout:focus-visible,.input-layout:has(svg.co-icon--error):focus-within,.input-layout:has(svg.co-icon--error):focus-visible{border:1px solid var(--outline-color);outline:1px solid var(--outline-color)}.co-form__message{font-size:var(--text-size-xs)}.co-form__control .co-form__message{display:block}.co-form__error{color:var(--danger-color)}.co-form__checkbox.co-form--invalid .co-form__label,.co-form__radio.co-form--invalid .co-form__label{color:var(--field-label-color)}.co-form--with-listbox{flex:1;position:relative}.co-form--with-listbox .valuebox{display:flex;flex:1;flex-wrap:wrap;gap:.25rem;min-width:4rem}.co-form--with-listbox .valuebox.has-value{padding-left:.25rem}.co-form--with-listbox .valuebox.has-value.chips{padding-left:0}.co-form--with-listbox .valuebox.has-value .placeholder{display:none}.co-form--with-listbox .valuebox .value-display{align-items:center;background-color:transparent;display:flex;flex:1;flex-wrap:wrap;gap:.25rem;line-height:1}.co-form--with-listbox .valuebox .value-display.basic,.co-form--with-listbox .valuebox .value-display .value-basic{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-form--with-listbox .valuebox.has-filter .value-display{flex:initial}.co-form--with-listbox .valuebox .value-chips{align-items:center;background:var(--field-chip-bd-color);border-radius:var(--radius-2);color:var(--field-chip-color);display:flex;font-size:var(--text-size-01);gap:.25rem;line-height:1;margin:0;padding:.1rem .1rem .1rem .375rem;white-space:nowrap}.co-form--with-listbox .valuebox .value-chips:last-of-type{margin-right:.25rem}.co-form--with-listbox .valuebox .value-chips:hover{background-color:var(--field-chip-bg-hover-color);color:var(--field-chip-hover-color)}.co-form--with-listbox .valuebox .value-chips button{border-radius:var(--radius-1);margin:0;padding:0}.co-form--with-listbox .valuebox .value-chips button:focus-visible{outline:1px solid var(--outline-color)}.co-form--with-listbox .valuebox .value-chips button:hover,.co-form--with-listbox .valuebox .value-chips button:active{background-color:var(--field-chip-bg-active-color);color:var(--field-chip-active-color)}.co-form--with-listbox .valuebox .value-chips svg{display:block;margin:0;padding:0;pointer-events:none}.co-form--with-listbox .placeholder,.co-form--with-listbox input[type=search]{flex:1;margin:0 .25rem 0 0;padding:0;min-width:4rem}.co-form--with-listbox .listbox{background:var(--surface-primary-bg-color);box-shadow:var(--shadow--raised-16);border-radius:var(--radius-2);display:none;margin:0;padding:0;position:absolute}.co-form--with-listbox .listbox.listbox-open{display:block;z-index:9999;width:100%}.co-form--with-listbox .listbox input[type=checkbox]{width:1rem;height:1rem}.co-form--with-listbox .listbox svg{height:16px;width:16px}.co-form--with-listbox .listbox .enhanced{background:linear-gradient(to top,var(--surface-hover-bg-color) 0%,var(--surface-active-bg-color) 20%);border-bottom:1px solid var(--stroke-color);border-radius:var(--radius-3) var(--radius-3) 0 0;color:var(--surface-fg-color);display:flex;flex-wrap:wrap;font-size:var(--text-size-01);gap:.5rem;justify-content:space-between;line-height:1;margin:0;padding:.25rem .5rem}.co-form--with-listbox .listbox .enhanced label,.co-form--with-listbox .listbox .enhanced button{display:flex;gap:.5rem;font-size:var(--text-size-01);white-space:nowrap}.co-form--with-listbox .listbox .enhanced button{background:transparent;align-items:center;display:flex;margin:0 0 0 auto}.co-form--with-listbox .listbox .enhanced button:hover{color:var(--surface-hover-fg-color)}.co-form--with-listbox .listbox .enhanced button:active{color:var(--surface-active-fg-color)}.co-form--with-listbox .listbox .options{display:flex;flex-direction:column;margin:0;max-height:12rem;overflow-y:auto;padding:0}.co-form--with-listbox .listbox [role=option]{background:transparent;border-bottom:0;color:var(--field-option-color);display:flex;flex:1;font-size:var(--text-size-01);gap:.5rem;line-height:1;margin:0;padding:.25rem 0}.co-form--with-listbox .listbox [role=option] input[type=checkbox]{margin:0 0 0 .5rem}.co-form--with-listbox .listbox [role=option]:hover{background-color:var(--field-option-hover-bg-color)}.co-form--with-listbox .listbox [role=option]:active{background-color:var(--field-option-active-bg-color);color:var(--field-option-active-color)}.co-form--with-listbox .listbox [role=option]:focus-visible,.co-form--with-listbox .listbox [role=option][aria-selected=true]{background:var(--field-option-focus-bg-color);color:var(--field-option-focus-color)}}
@layer component{:where(.co-context-switch){--button-height: 4rem;--button-width: 16rem}.co-context-switch{position:relative}.co-context-switch button{display:flex;margin:0;width:100%}.co-context-switch button span,.co-context-switch button svg{pointer-events:none}.co-context-switch button .co-context-icon{align-self:center;display:grid;font-size:var(--text-size-01);place-items:center}.co-context-switch button .co-context-icon>svg{display:grid;place:center}.co-context-switch button .co-context-icon span{background-color:var(--surface-hover-bg-color);border-radius:100%;display:grid;height:2.5rem;width:2.5rem;place-items:center}.co-context-switch button>p{display:block;line-height:1;margin:0;padding:0}.co-context-switch button:hover{background:var(--surface-hover-bg-color)}.co-context-switch button:active{background:var(--surface-active-bg-color)}.co-context-switch button:not(.current-option){color:var(--text-primary-color);height:2.5rem;line-height:2.5rem;overflow:hidden;padding:0 .75rem;text-overflow:ellipsis;white-space:nowrap}.co-context-switch button:not(.current-option):hover .co-context-icon span{background-color:var(--surface-active-bg-color)}.co-context-switch button:not(.current-option)[aria-selected=true]{background:var(--field-chip-bd-color);font-weight:var(--font-weight-semibold)}.co-context-switch button:not(.current-option)[aria-selected=true] .co-context-icon span{background-color:var(--outline-color);color:var(--field-chip-active-color)}.co-context-switch button:not(.current-option)[aria-selected=true]:disabled{color:var(--surface-fg-color)}.co-context-switch button:not(.current-option):focus-visible{background:var(--outline-color);color:var(--field-chip-active-color)}.co-context-switch button:not(.current-option):disabled{color:var(--disabled-color)}.co-context-switch button.current-option{color:var(--text-primary-color);display:grid;grid-template-columns:var(--button-height) 1fr calc(var(--button-height) / 2);grid-template-rows:1.75rem 2.25rem}.co-context-switch button.current-option>.co-context-icon{grid-column:1/2;grid-row:1/3;font-weight:var(--font-weight-semibold)}.co-context-switch button.current-option:hover>.co-context-icon span{background-color:var(--surface-hover-bg-color)}.co-context-switch button.current-option>p:first-of-type{align-self:end;color:var(--stroke-color);font-size:var(--text-size-02);grid-column:2/3;grid-row:1/2;padding-block:0}.co-context-switch button.current-option>p:last-of-type{align-self:start;font-size:var(--text-size-01);font-weight:var(--font-weight-semibold);grid-column:2/3;grid-row:2/3;line-height:1.4rem;padding-block:0;max-width:calc(var(--button-width) - var(--button-height) - var(--button-height) / 2));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-context-switch button.current-option>.chevron{grid-column:3/4;grid-row:1/3}.co-context-switch div.filter{background:linear-gradient(to bottom,var(--surface-primary-bg-color) 0%,var(--surface-primary-bg-color) 90%,hsla(0,0%,0%,0) 100%);position:sticky;top:0rem;width:100%}.co-context-switch input[type=search]{border:1px solid var(--stroke-color);border-radius:var(--radius-2);height:2.5rem;margin:.5rem .75rem;padding-inline:.75rem;width:calc(100% - 1.5rem)}.co-context-switch input[type=search]:focus-visible{border-color:var(--stroke-color);outline:2px solid var(--outline-color)}.co-context-switch div[role=listbox]{background:var(--surface-primary-bg-color);display:none;position:absolute;left:0;padding-block:0 1rem;right:0;top:var(--button-height);width:100%}.co-context-switch div[role=listbox] span.label{display:block;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.co-context-switch div[role=listbox][aria-expanded=true]{border-bottom:1px solid var(--stroke-subtle-color);display:block;overflow-x:hidden;overflow-y:auto}.co-side-navigation[data-open=false] .co-context-switch{width:var(--button-height)}.co-side-navigation[data-open=false] .co-context-switch div.filter{display:none}.co-side-navigation[data-open=false] .co-context-switch div[role=listbox][aria-expanded=true]{scrollbar-width:none}.co-side-navigation[data-open=false] .co-context-switch div[role=listbox][aria-expanded=true] ::-webkit-scrollbar{width:0;background:transparent}.co-side-navigation[data-open=false] .co-context-switch button{display:grid;place-items:center}.co-side-navigation[data-open=false] .co-context-switch button:not(.current-option){height:var(--button-height)}.co-side-navigation[data-open=false] .co-context-switch button>p,.co-side-navigation[data-open=false] .co-context-switch button>.chevron,.co-side-navigation[data-open=false] .co-context-switch button span.label{display:none}.co-side-navigation[data-open=false] .co-context-switch button:focus-visible .co-context-icon span{background:var(--btn-tertiary-active-color)}.co-side-navigation[data-open=true] .co-context-switch{width:var(--button-width)}.co-side-navigation[data-open=true] .co-context-switch button:not(.current-option){height:2.5rem;line-height:2.5rem}.co-side-navigation[data-open=true] .co-context-switch button:not(.current-option)>.co-context-icon{display:none}.co-side-navigation--compact .co-side-navigation .co-context-switch button:not(.current-option) .co-context-icon{display:none}}
@layer component{.co-alert{border-radius:var(--radius-3);color:var(--surface-fg-color);display:grid;grid-template-columns:min-content repeat(10,1fr) min-content;position:relative}.co-alert .co-alert__icon{grid-column:1/2;grid-row:1/3;align-self:start;justify-self:center}.co-alert .co-alert__content{align-items:flex-start;display:flex;flex-direction:column;gap:.5rem;grid-column:2/12;grid-row:1/3;justify-content:flex-start;margin:0}.co-alert .co-alert__content h6,.co-alert .co-alert__content p,.co-alert .co-alert__content ul,.co-alert .co-alert__content ol,.co-alert .co-alert__content li{margin:0}.co-alert .co-alert__actions{display:flex;gap:1rem;align-items:center;justify-content:flex-start}.co-alert .co-alert__actions button:first-of-type{margin-left:-.75rem}.co-alert .co-alert__dismiss{background:transparent;border:0;grid-column:12/13;margin:0 0 0 1.5rem;padding:0}.co-alert--notification,.co-alert--dialog{z-index:9999}.co-alert--notification,.co-alert--banner{align-items:flex-start}.co-alert--xl{padding:1rem 1rem 1rem 0}.co-alert--xl .co-alert__icon{margin:0 1rem;height:64px;width:64px}.co-alert--xl h6{font-size:var(--text-size-4);font-weight:var(--font-weight-bold)}.co-alert--xl p,.co-alert--xl li,.co-alert--xl button,.co-alert--xl a{font-size:var(--text-size-2)}.co-alert--lg{padding:1rem 1rem 1rem 0}.co-alert--lg .co-alert__icon{margin:0 1rem;height:48px;width:48px}.co-alert--lg h6{font-size:var(--text-size-3);font-weight:var(--font-weight-bold)}.co-alert--lg p,.co-alert--lg li,.co-alert--lg button,.co-alert--lg a{font-size:var(--text-size-2)}.co-alert--md{padding:1rem 1rem 1rem 0}.co-alert--md .co-alert__icon{margin:0 1rem;height:24px;width:24px}.co-alert--md h6{font-size:var(--text-size-2);font-weight:var(--font-weight-bold)}.co-alert--md p,.co-alert--md li,.co-alert--md button,.co-alert--md a{font-size:var(--text-size-1)}.co-alert--sm{padding:.5rem .5rem .5rem 0}.co-alert--sm .co-alert__icon{margin:0 .5rem;height:16px;width:16px}.co-alert--sm h6{font-size:var(--text-size-01);font-weight:var(--font-weight-semibold);line-height:1}.co-alert--sm p,.co-alert--sm li,.co-alert--sm button,.co-alert--sm a{font-size:var(--text-size-02)}.co-alert--message.co-alert--info{background-color:var(--blue-weak);color:var(--text-primary-color)}.co-alert--message.co-alert--info button,.co-alert--message.co-alert--info button[className^=co-btn]{background-color:light-dark(var(--blue-700),var(--blue-200));border-color:light-dark(var(--blue-700),var(--blue-200));color:var(--text-primary-color)}.co-alert--message.co-alert--info button:hover,.co-alert--message.co-alert--info button[className^=co-btn]:hover{background-color:light-dark(var(--blue-600),var(--blue-300));border-color:light-dark(var(--blue-600),var(--blue-300))}.co-alert--message.co-alert--info button:active,.co-alert--message.co-alert--info button[className^=co-btn]:active{background-color:light-dark(var(--blue-500),var(--blue-400));border-color:light-dark(var(--blue-500),var(--blue-400))}.co-alert--message.co-alert--info .co-alert__icon{color:var(--info-color)}.co-alert--message.co-alert--warning{background-color:var(--warning-weak-color);color:var(--text-primary-color)}.co-alert--message.co-alert--warning button,.co-alert--message.co-alert--warning button[className^=co-btn]{background-color:light-dark(var(--yellow-700),var(--yellow-100));border-color:light-dark(var(--yellow-700),var(--yellow-100));color:var(--text-primary-color)}.co-alert--message.co-alert--warning button:hover,.co-alert--message.co-alert--warning button[className^=co-btn]:hover{background-color:light-dark(var(--yellow-600),var(--yellow-200));border-color:light-dark(var(--yellow-600),var(--yellow-200))}.co-alert--message.co-alert--warning button:active,.co-alert--message.co-alert--warning button[className^=co-btn]:active{background-color:light-dark(var(--yellow-500),var(--yellow-300));border-color:light-dark(var(--yellow-500),var(--yellow-300))}.co-alert--message.co-alert--warning .co-alert__icon{color:var(--warning-color)}.co-alert--message.co-alert--warning-major{background-color:var(--warning-major-weak-color);color:var(--text-primary-color)}.co-alert--message.co-alert--warning-major button,.co-alert--message.co-alert--warning-major button[className^=co-btn]{background-color:light-dark(var(--orange-700),var(--orange-100));border-color:light-dark(var(--orange-700),var(--orange-100));color:var(--text-primary-color)}.co-alert--message.co-alert--warning-major button:hover,.co-alert--message.co-alert--warning-major button[className^=co-btn]:hover{background-color:light-dark(var(--orange-600),var(--orange-200));border-color:light-dark(var(--orange-600),var(--orange-200))}.co-alert--message.co-alert--warning-major button:active,.co-alert--message.co-alert--warning-major button[className^=co-btn]:active{background-color:light-dark(var(--orange-500),var(--orange-300));border-color:light-dark(var(--orange-500),var(--orange-300))}.co-alert--message.co-alert--warning-major .co-alert__icon{color:var(--warning-major-color)}.co-alert--message.co-alert--error{background-color:var(--red-weak);color:var(--text-primary-color)}.co-alert--message.co-alert--error button,.co-alert--message.co-alert--error button[className^=co-btn]{background-color:light-dark(var(--red-700),var(--red-100));border-color:light-dark(var(--red-700),var(--red-100));color:var(--text-primary-color)}.co-alert--message.co-alert--error button:hover,.co-alert--message.co-alert--error button[className^=co-btn]:hover{background-color:light-dark(var(--red-600),var(--red-200));border-color:light-dark(var(--red-600),var(--red-200))}.co-alert--message.co-alert--error button:active,.co-alert--message.co-alert--error button[className^=co-btn]:active{background-color:light-dark(var(--red-500),var(--red-300));border-color:light-dark(var(--red-500),var(--red-300))}.co-alert--message.co-alert--error .co-alert__icon{color:var(--danger-color)}.co-alert--message.co-alert--success{background-color:var(--green-weak);color:var(--text-primary-color)}.co-alert--message.co-alert--success button,.co-alert--message.co-alert--success button[className^=co-btn]{background-color:light-dark(var(--green-700),var(--green-100));border-color:light-dark(var(--green-700),var(--green-100));color:var(--text-primary-color)}.co-alert--message.co-alert--success button:hover,.co-alert--message.co-alert--success button[className^=co-btn]:hover{background-color:light-dark(var(--green-600),var(--green-200));border-color:light-dark(var(--green-600),var(--green-200))}.co-alert--message.co-alert--success button:active,.co-alert--message.co-alert--success button[className^=co-btn]:active{background-color:light-dark(var(--green-500),var(--green-300));border-color:light-dark(var(--green-500),var(--green-300))}.co-alert--message.co-alert--success .co-alert__icon{color:var(--success-color)}.co-alert--banner.co-alert--info,.co-alert--dialog.co-alert--info,.co-alert--notification.co-alert--info{background-color:var(--info-color)}.co-alert--banner.co-alert--info button,.co-alert--banner.co-alert--info button[className^=co-btn],.co-alert--dialog.co-alert--info button,.co-alert--dialog.co-alert--info button[className^=co-btn],.co-alert--notification.co-alert--info button,.co-alert--notification.co-alert--info button[className^=co-btn]{background-color:transparent;border-color:transparent}.co-alert--banner.co-alert--info button:hover,.co-alert--banner.co-alert--info button[className^=co-btn]:hover,.co-alert--dialog.co-alert--info button:hover,.co-alert--dialog.co-alert--info button[className^=co-btn]:hover,.co-alert--notification.co-alert--info button:hover,.co-alert--notification.co-alert--info button[className^=co-btn]:hover{background-color:light-dark(var(--blue-200),var(--blue-600));border-color:light-dark(var(--blue-200),var(--blue-600))}.co-alert--banner.co-alert--info button:active,.co-alert--banner.co-alert--info button[className^=co-btn]:active,.co-alert--dialog.co-alert--info button:active,.co-alert--dialog.co-alert--info button[className^=co-btn]:active,.co-alert--notification.co-alert--info button:active,.co-alert--notification.co-alert--info button[className^=co-btn]:active{background-color:light-dark(var(--blue-100),var(--blue-700));border-color:light-dark(var(--blue-100),var(--blue-700))}.co-alert--banner.co-alert--warning,.co-alert--dialog.co-alert--warning,.co-alert--notification.co-alert--warning{background-color:var(--warning-color)}.co-alert--banner.co-alert--warning button,.co-alert--banner.co-alert--warning button[className^=co-btn],.co-alert--dialog.co-alert--warning button,.co-alert--dialog.co-alert--warning button[className^=co-btn],.co-alert--notification.co-alert--warning button,.co-alert--notification.co-alert--warning button[className^=co-btn]{background-color:transparent;border-color:transparent}.co-alert--banner.co-alert--warning button:hover,.co-alert--banner.co-alert--warning button[className^=co-btn]:hover,.co-alert--dialog.co-alert--warning button:hover,.co-alert--dialog.co-alert--warning button[className^=co-btn]:hover,.co-alert--notification.co-alert--warning button:hover,.co-alert--notification.co-alert--warning button[className^=co-btn]:hover{background-color:light-dark(var(--yellow-700),var(--yellow-700));border-color:light-dark(var(--yellow-700),var(--yellow-700))}.co-alert--banner.co-alert--warning button:active,.co-alert--banner.co-alert--warning button[className^=co-btn]:active,.co-alert--dialog.co-alert--warning button:active,.co-alert--dialog.co-alert--warning button[className^=co-btn]:active,.co-alert--notification.co-alert--warning button:active,.co-alert--notification.co-alert--warning button[className^=co-btn]:active{background-color:light-dark(var(--yellow-800),var(--yellow-800));border-color:light-dark(var(--yellow-800),var(--yellow-800))}.co-alert--banner.co-alert--warning .co-alert__icon,.co-alert--banner.co-alert--warning .co-alert__content,.co-alert--banner.co-alert--warning .co-alert__dismiss,.co-alert--banner.co-alert--warning button,.co-alert--banner.co-alert--warning a:link,.co-alert--banner.co-alert--warning a:visited,.co-alert--dialog.co-alert--warning .co-alert__icon,.co-alert--dialog.co-alert--warning .co-alert__content,.co-alert--dialog.co-alert--warning .co-alert__dismiss,.co-alert--dialog.co-alert--warning button,.co-alert--dialog.co-alert--warning a:link,.co-alert--dialog.co-alert--warning a:visited,.co-alert--notification.co-alert--warning .co-alert__icon,.co-alert--notification.co-alert--warning .co-alert__content,.co-alert--notification.co-alert--warning .co-alert__dismiss,.co-alert--notification.co-alert--warning button,.co-alert--notification.co-alert--warning a:link,.co-alert--notification.co-alert--warning a:visited{color:light-dark(var(--neutral-075),var(--neutral-075))}.co-alert--banner.co-alert--warning-major,.co-alert--dialog.co-alert--warning-major,.co-alert--notification.co-alert--warning-major{background-color:var(--warning-major-color)}.co-alert--banner.co-alert--warning-major button,.co-alert--banner.co-alert--warning-major button[className^=co-btn],.co-alert--dialog.co-alert--warning-major button,.co-alert--dialog.co-alert--warning-major button[className^=co-btn],.co-alert--notification.co-alert--warning-major button,.co-alert--notification.co-alert--warning-major button[className^=co-btn]{background-color:transparent;border-color:transparent}.co-alert--banner.co-alert--warning-major button:hover,.co-alert--banner.co-alert--warning-major button[className^=co-btn]:hover,.co-alert--dialog.co-alert--warning-major button:hover,.co-alert--dialog.co-alert--warning-major button[className^=co-btn]:hover,.co-alert--notification.co-alert--warning-major button:hover,.co-alert--notification.co-alert--warning-major button[className^=co-btn]:hover{background-color:light-dark(var(--orange-700),var(--orange-700));border-color:light-dark(var(--orange-700),var(--orange-700))}.co-alert--banner.co-alert--warning-major button:active,.co-alert--banner.co-alert--warning-major button[className^=co-btn]:active,.co-alert--dialog.co-alert--warning-major button:active,.co-alert--dialog.co-alert--warning-major button[className^=co-btn]:active,.co-alert--notification.co-alert--warning-major button:active,.co-alert--notification.co-alert--warning-major button[className^=co-btn]:active{background-color:light-dark(var(--orange-800),var(--orange-800));border-color:light-dark(var(--orange-800),var(--orange-800))}.co-alert--banner.co-alert--warning-major .co-alert__icon,.co-alert--banner.co-alert--warning-major .co-alert__content,.co-alert--banner.co-alert--warning-major .co-alert__dismiss,.co-alert--banner.co-alert--warning-major button,.co-alert--banner.co-alert--warning-major a:link,.co-alert--banner.co-alert--warning-major a:visited,.co-alert--dialog.co-alert--warning-major .co-alert__icon,.co-alert--dialog.co-alert--warning-major .co-alert__content,.co-alert--dialog.co-alert--warning-major .co-alert__dismiss,.co-alert--dialog.co-alert--warning-major button,.co-alert--dialog.co-alert--warning-major a:link,.co-alert--dialog.co-alert--warning-major a:visited,.co-alert--notification.co-alert--warning-major .co-alert__icon,.co-alert--notification.co-alert--warning-major .co-alert__content,.co-alert--notification.co-alert--warning-major .co-alert__dismiss,.co-alert--notification.co-alert--warning-major button,.co-alert--notification.co-alert--warning-major a:link,.co-alert--notification.co-alert--warning-major a:visited{color:light-dark(var(--neutral-075),var(--neutral-075))}.co-alert--banner.co-alert--success,.co-alert--dialog.co-alert--success,.co-alert--notification.co-alert--success{background-color:var(--success-color)}.co-alert--banner.co-alert--success button,.co-alert--banner.co-alert--success button[className^=co-btn],.co-alert--dialog.co-alert--success button,.co-alert--dialog.co-alert--success button[className^=co-btn],.co-alert--notification.co-alert--success button,.co-alert--notification.co-alert--success button[className^=co-btn]{background-color:transparent;border-color:transparent}.co-alert--banner.co-alert--success button:hover,.co-alert--banner.co-alert--success button[className^=co-btn]:hover,.co-alert--dialog.co-alert--success button:hover,.co-alert--dialog.co-alert--success button[className^=co-btn]:hover,.co-alert--notification.co-alert--success button:hover,.co-alert--notification.co-alert--success button[className^=co-btn]:hover{background-color:light-dark(var(--green-200),var(--green-700));border-color:light-dark(var(--green-200),var(--green-700))}.co-alert--banner.co-alert--success button:active,.co-alert--banner.co-alert--success button[className^=co-btn]:active,.co-alert--dialog.co-alert--success button:active,.co-alert--dialog.co-alert--success button[className^=co-btn]:active,.co-alert--notification.co-alert--success button:active,.co-alert--notification.co-alert--success button[className^=co-btn]:active{background-color:light-dark(var(--green-100),var(--green-800));border-color:light-dark(var(--green-100),var(--green-800))}.co-alert--banner.co-alert--error,.co-alert--dialog.co-alert--error,.co-alert--notification.co-alert--error{background-color:var(--danger-color)}.co-alert--banner.co-alert--error button,.co-alert--banner.co-alert--error button[className^=co-btn],.co-alert--dialog.co-alert--error button,.co-alert--dialog.co-alert--error button[className^=co-btn],.co-alert--notification.co-alert--error button,.co-alert--notification.co-alert--error button[className^=co-btn]{background-color:transparent;border-color:transparent}.co-alert--banner.co-alert--error button:hover,.co-alert--banner.co-alert--error button[className^=co-btn]:hover,.co-alert--dialog.co-alert--error button:hover,.co-alert--dialog.co-alert--error button[className^=co-btn]:hover,.co-alert--notification.co-alert--error button:hover,.co-alert--notification.co-alert--error button[className^=co-btn]:hover{background-color:light-dark(var(--red-200),var(--red-700))!important;border-color:light-dark(var(--red-200),var(--red-700))}.co-alert--banner.co-alert--error button:active,.co-alert--banner.co-alert--error button[className^=co-btn]:active,.co-alert--dialog.co-alert--error button:active,.co-alert--dialog.co-alert--error button[className^=co-btn]:active,.co-alert--notification.co-alert--error button:active,.co-alert--notification.co-alert--error button[className^=co-btn]:active{background-color:light-dark(var(--red-100),var(--red-800))!important;border-color:light-dark(var(--red-100),var(--red-800))}.co-alert--banner.co-alert--info .co-alert__icon,.co-alert--banner.co-alert--info .co-alert__content,.co-alert--banner.co-alert--info .co-alert__dismiss,.co-alert--banner.co-alert--info button,.co-alert--banner.co-alert--info a:link,.co-alert--banner.co-alert--info a:visited,.co-alert--banner.co-alert--success .co-alert__icon,.co-alert--banner.co-alert--success .co-alert__content,.co-alert--banner.co-alert--success .co-alert__dismiss,.co-alert--banner.co-alert--success button,.co-alert--banner.co-alert--success a:link,.co-alert--banner.co-alert--success a:visited,.co-alert--banner.co-alert--error .co-alert__icon,.co-alert--banner.co-alert--error .co-alert__content,.co-alert--banner.co-alert--error .co-alert__dismiss,.co-alert--banner.co-alert--error button,.co-alert--banner.co-alert--error a:link,.co-alert--banner.co-alert--error a:visited,.co-alert--dialog.co-alert--info .co-alert__icon,.co-alert--dialog.co-alert--info .co-alert__content,.co-alert--dialog.co-alert--info .co-alert__dismiss,.co-alert--dialog.co-alert--info button,.co-alert--dialog.co-alert--info a:link,.co-alert--dialog.co-alert--info a:visited,.co-alert--dialog.co-alert--success .co-alert__icon,.co-alert--dialog.co-alert--success .co-alert__content,.co-alert--dialog.co-alert--success .co-alert__dismiss,.co-alert--dialog.co-alert--success button,.co-alert--dialog.co-alert--success a:link,.co-alert--dialog.co-alert--success a:visited,.co-alert--dialog.co-alert--error .co-alert__icon,.co-alert--dialog.co-alert--error .co-alert__content,.co-alert--dialog.co-alert--error .co-alert__dismiss,.co-alert--dialog.co-alert--error button,.co-alert--dialog.co-alert--error a:link,.co-alert--dialog.co-alert--error a:visited,.co-alert--notification.co-alert--info .co-alert__icon,.co-alert--notification.co-alert--info .co-alert__content,.co-alert--notification.co-alert--info .co-alert__dismiss,.co-alert--notification.co-alert--info button,.co-alert--notification.co-alert--info a:link,.co-alert--notification.co-alert--info a:visited,.co-alert--notification.co-alert--success .co-alert__icon,.co-alert--notification.co-alert--success .co-alert__content,.co-alert--notification.co-alert--success .co-alert__dismiss,.co-alert--notification.co-alert--success button,.co-alert--notification.co-alert--success a:link,.co-alert--notification.co-alert--success a:visited,.co-alert--notification.co-alert--error .co-alert__icon,.co-alert--notification.co-alert--error .co-alert__content,.co-alert--notification.co-alert--error .co-alert__dismiss,.co-alert--notification.co-alert--error button,.co-alert--notification.co-alert--error a:link,.co-alert--notification.co-alert--error a:visited{color:var(--text-primary-inverted-color)}.co-alert--dialog{background-color:var(--surface-primary-bg-color);box-shadow:var(--shadow--floating-16)}.co-alert--dialog .co-alert__icon{color:var(--text-primary-color)}.co-alert__dismiss svg{width:24px;height:24px}.co-alert--sm .co-alert__dismiss svg{width:16px;height:16px}}@layer component{.co-app__frame{width:100%;height:100%}.co-app__header{background-color:var(--surface-primary-bg-color);border-bottom:1px solid var(--shadow--color-16);color:var(--text-primary-color);display:flex;align-items:center;justify-content:space-between;height:var(--app-header-height);padding:0;position:relative;top:0;left:0;right:0;z-index:1}.co-app__header.co-app__header--base{box-shadow:none}.co-app__header.co-app__header--skim{box-shadow:var(--shadow--skim-16)}.co-app__header.co-app__header--raised{box-shadow:var(--shadow--raised-16)}.co-app__header.co-app__header--lifted{box-shadow:var(--shadow--lifted-16)}.co-app__header.co-app__header--floating{box-shadow:var(--shadow--floating-16)}.co-app__header .logo{display:inline-block;margin:0 .3rem 0 1rem}.co-app__header .co-burger-menu{display:flex;margin:0 .375rem 0 1rem}.co-app__header h1{display:inline-block;flex:1;font-size:clamp(var(--text-size-2),var(--text-size-3),var(--text-size-4));font-weight:var(--font-weight-regular);line-height:1.25;margin:0 .25rem;overflow:hidden;padding:0;text-overflow:ellipsis}.co-app__header h1 button{color:var(--text-primary-color);font-size:var(--text-size-3);margin:0;padding:0}.co-app__header h1 span{font-weight:var(--font-weight-light)}.co-app__header h1 b{font-weight:var(--font-weight-semibold)}.co-app__header .user-menu{position:absolute;top:var(--app-header-height);right:0;background-color:var(--white);margin:1rem;border-radius:var(--radius-3);box-shadow:var(--shadow--lifted-16);min-width:15rem}.co-app__header .user-menu .user-name{border-bottom:1px solid var(--stroke-subtle-color);padding:1rem;display:flex;gap:.5rem;align-items:baseline}.co-app__header .user-menu .log-out{padding:1rem;width:100%}.co-app__extensions,.co-app__user-navigation{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem;height:var(--app-header-height)}.co-app__extensions a,.co-app__user-navigation a{display:block;margin:0;padding:0;text-decoration:none}.co-app__extensions a svg,.co-app__user-navigation a svg{display:block;margin:0;padding:0}.co-app__extensions a:link,.co-app__extensions a:visited,.co-app__user-navigation a:link,.co-app__user-navigation a:visited{color:var(--neutral-075)}.co-app__extensions a:hover,.co-app__extensions a:active,.co-app__user-navigation a:hover,.co-app__user-navigation a:active{color:var(--blue-400)}.co-app__extensions{margin-left:auto;padding:0 1.5rem}.co-app__user-navigation{border-left:1px solid var(--stroke-subtle-color);padding:1.5rem}.co-app__content{display:flex;height:calc(100vh - var(--app-header-height));overflow:hidden;padding:0;position:relative;z-index:0}.co-app__main{flex:1;height:100%;overflow-x:hidden;overflow-y:auto;padding:0;position:relative}}@layer component{.co-form__calendar{display:grid;grid-template-rows:auto 1fr;padding:0;grid-row-gap:.5rem;row-gap:.5rem;text-align:center}.co-form__calendar .nav{align-items:center;display:flex;font-size:var(--text-size-xs);gap:.1rem;grid-row:1/2;justify-content:flex-end;padding:.5rem .5rem .5rem 1rem}.co-form__calendar.with-shortcut-frame .nav{grid-column:2/3}.co-form__calendar .nav button{background-color:transparent;border-color:transparent;border-radius:var(--radius-2);color:var(--outline-color);font-size:inherit!important;outline-offset:1px;padding:0 .25rem!important}.co-form__calendar .nav button:first-of-type{font-size:var(--text-size-1)!important;margin:0 auto 0 0;text-align:left}.co-form__calendar .nav button:first-of-type:after{content:"";display:block;flex:1}.co-form__calendar .nav button:active,.co-form__calendar .nav button:focus-visible{outline:2px solid var(--outline-color)}.co-form__calendar .nav button svg{height:24px;width:24px;margin:0;padding:0;pointer-events:none}.co-form__calendar article{display:flex;flex-direction:column;-moz-column-gap:.1rem;column-gap:.1rem;grid-row:2/3;width:18.375rem}.co-form__calendar article header{border-bottom:var(--border-width-1) solid var(--stroke-subtle-color);color:var(--neutral-primary);display:flex;font-size:var(--text-size-xs);grid-template-columns:repeat(7,1fr);margin-bottom:.5rem;padding-bottom:.5rem;width:100%}.co-form__calendar article header span{flex:1}.co-form__calendar.with-shortcut-frame article{grid-column:2/3}.co-form__calendar aside.shortcut-frame{border-right:var(--border-width-1) solid var(--stroke-subtle-color);grid-column:1/2;grid-row:1/3;text-align:left}.co-form__calendar aside.time-frame{border-left:var(--border-width-1) solid var(--stroke-subtle-color);display:grid;grid-gap:1rem;gap:1rem;grid-column:3/4;grid-row:1/3;grid-template-rows:2.5rem 1fr;padding:1rem;text-align:left}.co-form__calendar aside ul{margin:.5rem;padding:0;list-style:none;width:-moz-fit-content;width:fit-content}.co-form__calendar aside ul button{border-radius:var(--radius-2);margin:0;white-space:nowrap}.co-form__calendar aside.time-frame input[type=time]{border:1px solid var(--surface-active-bg-color);border-radius:var(--radius-2);grid-column:1/3;padding:0 .5rem}.co-form__calendar aside.time-frame input[type=time]::-webkit-calendar-picker-indicator{background:none;display:none}.co-form__calendar .co-form__calendar.with-shortcut-frame aside.time-frame{grid-column:3/4}.co-form__calendar ul{padding:0 0 .5rem}.co-form__calendar ul li{border-top:1px solid transparent;border-bottom:1px solid transparent;margin:0 auto}.co-form__calendar ul button{margin:auto;padding:.5rem;text-align:center}.co-form__calendar ul.week,.co-form__calendar ul.months,.co-form__calendar ul.years,.co-form__calendar ul.decades{display:grid;margin:0;list-style:none;width:100%}.co-form__calendar ul.week{grid-template-columns:repeat(7,1fr)}.co-form__calendar ul.months{grid-template-columns:repeat(4,1fr)}.co-form__calendar ul.years{grid-template-columns:repeat(5,1fr)}.co-form__calendar ul.decades{grid-template-columns:repeat(3,1fr)}.co-form__calendar ul button{border-radius:var(--radius-5)}.co-form__calendar ul.week{row-gap:.125rem;-moz-column-gap:0;column-gap:0}.co-form__calendar ul.week button{border-radius:50%;display:block;height:2.5rem;margin:0;padding:0;width:2.5rem}.co-form__calendar ul.week li{display:flex;justify-content:center;line-height:2;margin:0;padding:0}.co-form__calendar ul.week li.today{color:var(--outline-color)}.co-form__calendar ul.week li.today button:after{content:"●";display:block;position:absolute;bottom:.2rem;font-size:var(--text-size-xs);font-weight:var(--font-weight-bold);left:0;text-align:center;width:100%}.co-form__calendar ul.week li.selected.today button:after{color:var(--surface-contrast-fg-color)}.co-form__calendar ul.week li.today button,.co-form__calendar ul.week li.selected button{font-weight:var(--font-weight-bold)}.co-form__calendar ul.week li.faded button{color:var(--neutral-primary)}.co-form__calendar ul.week li.weekend{background-image:repeating-linear-gradient(90deg,transparent 0,var(--surface-active-bg-color) 1px,transparent 0,transparent 50%);background-size:.75rem .75rem}.co-form__calendar ul button,.co-form__calendar aside button{background:transparent;border:0;color:inherit;display:block;font-size:.8125rem;position:relative}.co-form__calendar ul button:hover,.co-form__calendar ul li.faded button:hover,.co-form__calendar aside button:hover{background-color:var(--top-surface-hover-bg-color);color:var(--outline-color)}.co-form__calendar ul button:active,.co-form__calendar ul li.faded button:active,.co-form__calendar ul button:focus-visible{outline:2px solid var(--outline-color);outline-offset:1px}.co-form__calendar li.within-range{background-color:light-dark(var(--blue-750),var(--blue-100));border-top:1px dashed var(--field-chip-bg-hover-color);border-bottom:1px dashed var(--field-chip-bg-hover-color);height:calc(100% - 2px)}.co-form__calendar li.within-range:not(.selected) button:hover{background-color:var(--field-chip-bd-color);color:var(--field-chip-color)}.co-form__calendar li.first-within-range{background-color:transparent;background:linear-gradient(90deg,transparent 50%,light-dark(var(--blue-750),var(--blue-100)) 50%);border:0;position:relative}.co-form__calendar li.first-within-range:before{border-top:1px dashed var(--field-chip-bg-hover-color);border-bottom:1px dashed var(--field-chip-bg-hover-color);content:"";display:block;position:absolute;width:50%;left:50%;top:0;bottom:0}.co-form__calendar li.last-within-range{background-color:transparent;background:linear-gradient(90deg,light-dark(var(--blue-750),var(--blue-100)) 50%,transparent 50%);border:0;position:relative}.co-form__calendar li.last-within-range:before{border-top:1px dashed var(--field-chip-bg-hover-color);border-bottom:1px dashed var(--field-chip-bg-hover-color);content:"";display:block;position:absolute;width:50%;left:0;top:0;bottom:0}.co-form__calendar li.first-within-range.last-within-range{background:transparent}.co-form__calendar li.first-within-range.last-within-range:before{border-top:0;border-bottom:0}.co-form__calendar aside button:active,.co-form__calendar aside button:focus-visible,.co-form__calendar li.selected button,.co-form__calendar li.faded.selected button{background-color:var(--outline-color)!important;color:var(--surface-contrast-fg-color)!important}.co-form__calendar button:disabled{background-color:transparent!important;color:var(--disabled-color)!important;cursor:not-allowed;outline:0!important}.co-form__calendar button:disabled:hover{color:var(--disabled-color)!important}.co-form__calendar button:disabled:active{color:var(--disabled-color)!important}}@layer component{.co-carousel{display:block;height:var(--carousel-height);position:relative;scrollbar-width:none;-ms-overflow-style:none;width:var(--carousel-width)}.co-carousel::-webkit-scrollbar{display:none}.co-carousel>ol{display:flex;margin:0;padding:0;overflow:hidden;scroll-behavior:smooth;width:100%;height:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.co-carousel>ol::-webkit-scrollbar{display:none}.co-carousel>ol li{display:block;margin:0;padding:0;scroll-snap-align:start;width:100%;height:100%}.co-carousel>ol li div.co-slide{width:var(--carousel-width);height:var(--carousel-height)}.co-carousel nav{display:flex;gap:.5rem;margin:auto;position:absolute;width:-moz-min-content;width:min-content;z-index:2}.co-carousel nav button{color:inherit}.co-carousel nav button:focus-visible{outline:0}.co-carousel nav button[aria-current=true]{color:var(--blue-400);cursor:normal}.co-carousel .arrow-previous,.co-carousel .arrow-next{position:absolute;z-index:2}.co-carousel.co-carousel--horizontal>ol{overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory}.co-carousel.co-carousel--horizontal>ol,.co-carousel.co-carousel--horizontal>nav{flex-direction:row}.co-carousel.co-carousel--horizontal>nav{bottom:.5rem;left:0;right:0;margin:auto}.co-carousel.co-carousel--horizontal>.arrow-previous{left:0}.co-carousel.co-carousel--horizontal>.arrow-next{right:0}.co-carousel.co-carousel--horizontal>.arrow-previous,.co-carousel.co-carousel--horizontal>.arrow-next{top:calc(50% - .5rem);height:1rem}.co-carousel.co-carousel--horizontal.with-areas>.arrow-previous,.co-carousel.co-carousel--horizontal.with-areas>.arrow-next{bottom:0;display:flex;top:0;height:100%;width:-moz-min-content;width:min-content}.co-carousel.co-carousel--horizontal.with-areas>.arrow-previous svg,.co-carousel.co-carousel--horizontal.with-areas>.arrow-next svg{align-items:center;justify-content:center}.co-carousel.co-carousel--vertical>ol{overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory}.co-carousel.co-carousel--vertical>ol,.co-carousel.co-carousel--vertical>nav{flex-direction:column}.co-carousel.co-carousel--vertical>nav{margin:auto 0}.co-carousel.co-carousel--vertical>.arrow-previous{top:0}.co-carousel.co-carousel--vertical>.arrow-next{bottom:0}.co-carousel.co-carousel--vertical.with-arrows>.arrow-previous,.co-carousel.co-carousel--vertical.with-arrows>.arrow-next{left:calc(50% - .5rem)}.co-carousel .empty-arrow{display:block;height:2rem;width:2rem}}@layer component{.co-chip__wrapper{display:block;height:1.5rem;position:relative}.co-chip__wrapper dialog{border:0;border-radius:var(--radius-2);background-color:var(--surface-primary-bg-color);box-shadow:var(--shadow--lifted-16);left:0;padding:0;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:1}.co-chip{align-items:center;display:flex;flex-wrap:nowrap;gap:0;padding:0;position:relative}.co-chip .co-chip__label{align-items:center;border-radius:var(--radius-5);display:flex;font-size:var(--text-size-02);font-weight:var(--font-weight-semibold);line-height:2;padding:0 .75rem}.co-chip .co-chip--combined{padding-right:1.725rem}.co-chip .btn--combined{border-radius:100vh;margin-left:-1.375rem;padding:.125rem}.co-chip .btn--combined svg{height:1rem;width:1rem}.co-chip .co-chip__label:focus-visible{outline:.125rem solid var(--outline-color);outline-offset:.0625rem}.co-chip .co-chip--primary{background-color:var(--btn-primary-bg-color);color:var(--white)}.co-chip .co-chip--primary~.btn--combined{background-color:var(--btn-primary-bg-color);color:var(--white)}.co-chip .co-chip--primary~.btn--combined:hover{background-color:var(--btn-primary-hover-bg-color)}.co-chip .co-chip--primary~.btn--combined:focus-visible{outline:.125rem solid var(--white)}.co-chip .co-chip--primary~.btn--combined:active{background-color:var(--btn-primary-active-bg-color)}.co-chip button.co-chip--primary:hover{background-color:var(--btn-primary-hover-bg-color)}.co-chip button.co-chip--primary:hover~.btn--combined{background-color:var(--btn-primary-hover-bg-color)}.co-chip button.co-chip--primary:active{background-color:var(--btn-primary-active-bg-color)}.co-chip button.co-chip--primary:active~.btn--combined{background-color:var(--btn-primary-active-bg-color)}.co-chip .co-chip--secondary{background-color:var(--btn-secondary-bg-color);color:var(--btn-secondary-color)}.co-chip .co-chip--secondary~.btn--combined{background-color:var(--btn-primary-bg-color);color:var(--white)}.co-chip .co-chip--secondary~.btn--combined:hover{background-color:var(--btn-primary-hover-bg-color)}.co-chip .co-chip--secondary~.btn--combined:focus-visible{outline:.125rem solid var(--white);outline-offset:1px}.co-chip .co-chip--secondary~.btn--combined:active{background-color:var(--btn-primary-active-bg-color)}.co-chip button.co-chip--secondary:hover{background-color:var(--btn-secondary-hover-bg-color)}.co-chip button.co-chip--secondary:hover~.btn--combined{background-color:var(--btn-primary-bg-color)}.co-chip button.co-chip--secondary:active{background-color:var(--btn-secondary-active-bg-color)}.co-chip button.co-chip--secondary:active~.btn--combined{background-color:var(--btn-primary-active-bg-color)}.co-chip .co-chip--off{background-color:var(--neutral-subtle);color:var(--text-primary-color)}.co-chip .co-chip--off:hover{background-color:light-dark(var(--neutral-600),var(--neutral-200))}.co-chip .co-chip--off:active{background-color:light-dark(var(--neutral-500),var(--neutral-300))}.co-chip svg.co-chip__icon{color:inherit;height:1rem;margin:0 .5rem 0 -.25rem;width:1rem}.co-chip .co-avatar{font-size:.625rem;margin:0 .5rem 0 -.5rem}}:where(.co-dialog){--dialog-height--sm: 33dvh;--dialog-width--sm: 33dvw;--dialog-height--md: 50dvh;--dialog-width--md: 50dvw;--dialog-height--lg: 66dvh;--dialog-width--lg: 66dvw;--dialog-height--xl: 80dvh;--dialog-width--xl: 80dvw}@layer component{.co-dialog{background-color:var(--surface-primary-bg-color);border:0;border-radius:var(--radius-3);box-shadow:var(--shadow--floating-16);color:var(--surface-fg-color);margin:auto;padding:0}.co-dialog:not([open]){pointer-events:none;opacity:0}.co-dialog .co-dialog__toolbar{align-items:center;background-color:var(--surface-primary-bg-color);border-color:var(--stroke-subtle-color);border-style:solid;border-width:0 0 1px 1px;border-radius:0 var(--radius-3) 0 var(--radius-3);color:var(--text-primary-color);display:flex;flex-direction:row;height:-moz-min-content;height:min-content;width:-moz-fit-content;width:fit-content;padding:.25rem;position:absolute;top:0;right:0}.co-dialog .co-dialog__toolbar button{border-radius:var(--radius-2);font-size:var(--text-size-01);line-height:1.25rem;margin:0;padding:.25rem}.co-dialog .co-dialog__toolbar button svg{margin:0;padding:0}.co-dialog .co-dialog__toolbar button:hover,.co-dialog .co-dialog__toolbar button:active{background:var(--surface-active-bg-color)}.co-dialog .co-dialog__toolbar button:focus-visible{outline:1px solid var(--outline-color)}.co-dialog button.co-dialog__close{border-radius:var(--radius-3);display:flex;position:absolute;top:.275rem;right:.275rem;color:var(--surface-fg-color);z-index:1}.co-dialog button.co-dialog__close:focus-visible{outline:2px solid var(--outline-color)}.co-dialog button.co-dialog__close:hover{color:var(--surface-hover-fg-color)}.co-dialog button.co-dialog__close:active{color:var(--surface-active-fg-color)}.co-dialog button.co-dialog__close svg{height:1.5rem;width:1.5rem}.co-dialog>div{display:flex;flex-direction:column;height:100%;width:100%}.co-dialog header.co-dialog__header,.co-dialog article,.co-dialog footer.co-dialog__footer{margin:0;padding:1rem}.co-dialog article.co-dialog__content{flex:1;overflow-y:auto;max-block-size:100%;overscroll-behavior-y:contain;position:relative}.co-dialog header.co-dialog__header,.co-dialog footer.co-dialog__footer menu{margin:0;align-items:center;display:flex;gap:1rem}.co-dialog header.co-dialog__header{justify-content:space-between}.co-dialog header.co-dialog__header h2,.co-dialog header.co-dialog__header h3,.co-dialog header.co-dialog__header h4{margin:0}.co-dialog footer.co-dialog__footer menu{width:100%;justify-content:flex-end}.co-dialog--top,.co-dialog--right,.co-dialog--bottom,.co-dialog--left{margin:0;border-radius:0}.co-dialog--top,.co-dialog--bottom{right:0;left:0;width:100%}.co-dialog--top:dialog,.co-dialog--bottom:dialog{max-width:100%}.co-dialog--right,.co-dialog--left{top:0;bottom:0;height:100%}.co-dialog--right:dialog,.co-dialog--left:dialog{max-height:100%}.co-dialog--top{top:0}.co-dialog--right{right:0}.co-dialog--bottom{bottom:0}.co-dialog--left{left:0}.co-dialog--maximized{border-radius:0;box-shadow:none;top:0;right:0;bottom:0;left:0;height:100%;max-height:100%;width:100%;max-width:100%}.co-dialog--center.co-dialog--xl,.co-dialog--right.co-dialog--xl,.co-dialog--left.co-dialog--xl{width:var(--dialog-width--xl)}.co-dialog--center.co-dialog--lg,.co-dialog--right.co-dialog--lg,.co-dialog--left.co-dialog--lg{width:var(--dialog-width--lg)}.co-dialog--center.co-dialog--md,.co-dialog--right.co-dialog--md,.co-dialog--left.co-dialog--md{width:var(--dialog-width--md)}.co-dialog--center.co-dialog--sm,.co-dialog--right.co-dialog--sm,.co-dialog--left.co-dialog--sm{width:var(--dialog-width--sm)}.co-dialog--center.co-dialog--xl{top:calc((100% - var(--dialog-height--xl)) / 2);bottom:calc((100% - var(--dialog-height--xl)) / 2);height:var(--dialog-height--xl)}.co-dialog--center.co-dialog--lg{top:calc((100% - var(--dialog-height--lg)) / 2);bottom:calc((100% - var(--dialog-height--lg)) / 2);height:var(--dialog-height--lg)}.co-dialog--center.co-dialog--md{top:calc((100% - var(--dialog-height--md)) / 2);bottom:calc((100% - var(--dialog-height--md)) / 2);height:var(--dialog-height--md)}.co-dialog--center.co-dialog--sm{top:calc((100% - var(--dialog-height--sm)) / 2);bottom:calc((100% - var(--dialog-height--sm)) / 2);height:clamp(var(--dialog-height--sm),var(--dialog-height--sm),var(--dialog-height--lg))}.co-dialog--center.co-dialog--auto{top:auto;height:auto;bottom:auto}.co-dialog--left.co-dialog--xl{right:calc(100% - var(--dialog-width--xl))}.co-dialog--left.co-dialog--lg{right:calc(100% - var(--dialog-width--lg))}.co-dialog--left.co-dialog--md{right:calc(100% - var(--dialog-width--md))}.co-dialog--left.co-dialog--sm{right:calc(100% - var(--dialog-width--sm))}.co-dialog--right.co-dialog--xl{left:calc(100% - var(--dialog-width--xl))}.co-dialog--right.co-dialog--lg{left:calc(100% - var(--dialog-width--lg))}.co-dialog--right.co-dialog--md{left:calc(100% - var(--dialog-width--md))}.co-dialog--right.co-dialog--sm{left:calc(100% - var(--dialog-width--sm))}.co-dialog--top.co-dialog--xl,.co-dialog--bottom.co-dialog--xl{height:var(--dialog-height--xl)}.co-dialog--top.co-dialog--lg,.co-dialog--bottom.co-dialog--lg{height:var(--dialog-height--lg)}.co-dialog--top.co-dialog--md,.co-dialog--bottom.co-dialog--md{height:var(--dialog-height--md)}.co-dialog--top.co-dialog--sm,.co-dialog--bottom.co-dialog--sm{height:var(--dialog-height--sm)}.co-dialog--top.co-dialog--xl{bottom:calc(100% - var(--dialog-height--xl))}.co-dialog--top.co-dialog--lg{bottom:calc(100% - var(--dialog-height--lg))}.co-dialog--top.co-dialog--md{bottom:calc(100% - var(--dialog-height--md))}.co-dialog--top.co-dialog--sm{bottom:calc(100% - var(--dialog-height--sm))}.co-dialog--bottom.co-dialog--xl{top:calc(100% - var(--dialog-height--xl))}.co-dialog--bottom.co-dialog--lg{top:calc(100% - var(--dialog-height--lg))}.co-dialog--bottom.co-dialog--md{top:calc(100% - var(--dialog-height--md))}.co-dialog--bottom.co-dialog--sm{top:calc(100% - var(--dialog-height--sm))}@media (prefers-reduced-motion: no-preference){.co-dialog--animate{animation:var(--animation-scale-down) forwards;animation-timing-function:var(--ease-elastic-5)}.co-dialog--animate.co-dialog--center[open]{animation:var(--animation-slide-in-up) forwards}.co-dialog--animate.co-dialog--top[open]{animation:var(--animation-slide-in-down) forwards}.co-dialog--animate.co-dialog--right[open]{animation:var(--animation-slide-in-left) forwards}.co-dialog--animate.co-dialog--bottom[open]{animation:var(--animation-slide-in-up) forwards}.co-dialog--animate.co-dialog--left[open]{animation:var(--animation-slide-in-right) forwards}}}:where(.co-side-navigation){--item-height: 4rem;--item-width: 4rem}@layer component{.co-side-navigation--compact{background-color:var(--surface-primary-bg-color)}.co-side-navigation--compact:modal{min-height:100%!important;max-height:100%!important;width:16rem}.co-side-navigation--compact>div{display:flex;margin:0;padding:0}.co-side-navigation--compact header{border-bottom:1px solid var(--stroke-subtle-color);display:flex;align-items:center;gap:1rem;height:4rem;padding:0 1rem}.co-side-navigation--compact header h1{display:flex;font-size:clamp(var(--text-size-2),var(--text-size-3),var(--text-size-4));font-weight:var(--font-weight-regular);gap:.3rem;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.co-side-navigation--compact header h1 .logo{font-weight:var(--font-weight-light);display:inline-block}.co-side-navigation--compact header h1 b{font-weight:var(--font-weight-semibold)}.co-side-navigation--compact .co-side-navigation{background:var(--surface-primary-bg-color);height:calc(100dvh - 4rem)}.co-side-navigation{background-color:var(--surface-primary-bg-color);display:flex;flex-direction:column;gap:0;height:calc(100dvh - 7.5625rem);overflow:auto;width:auto}.co-side-navigation ul,.co-side-navigation li{margin:0;padding:0}.co-side-navigation>ul{border-top:1px solid var(--stroke-subtle-color)}.co-side-navigation>ul:first-of-type{border-top:0;flex-grow:1;margin-block:0 auto}.co-side-navigation .nested{align-items:center;display:flex}.co-side-navigation .nested>button{color:var(--text-primary-color)}.co-side-navigation .nested>button svg{margin:0;width:1rem;height:1rem}.co-side-navigation li li{line-height:1.2rem;padding:0}.co-side-navigation li li a{padding:.75rem .75rem .75rem 4rem}.co-side-navigation[data-open=false]>ul li .label,.co-side-navigation[data-open=false]>ul li button,.co-side-navigation[data-open=false]>ul ul{display:none}.co-side-navigation[data-open=true]{width:16rem}.co-side-navigation[data-open=true]>ul li .label,.co-side-navigation[data-open=true]>ul li button{display:block}.co-side-navigation[data-open=true] li[data-expanded=false] ul{display:none}.co-side-navigation[data-open=true] li[data-expanded=true] ul{display:block}.co-side-navigation a{align-items:center;display:flex;flex:1;text-decoration:none}.co-side-navigation a svg{margin:1rem 1.25rem;width:1.5rem;height:1.5rem}.co-side-navigation a span.label{display:block;flex:1}.co-side-navigation a svg,.co-side-navigation a span.label{pointer-events:none}.co-side-navigation button{background:transparent;border:0;color:var(--neutral-075);margin:0 .5rem;padding:0;flex:0 0 1.25rem}.co-side-navigation ul li:not(:has(li a[aria-current=true]))[data-expanded=true] span.nested,.co-side-navigation ul li:not(:has(li a[aria-current=true]))[data-expanded=true] ul{background-color:light-dark(var(--neutral-900),var(--neutral-100))}.co-side-navigation ul li:not(:has(li a[aria-current=true])) span.nested:hover,.co-side-navigation ul li:not(:has(li a[aria-current=true])) li:hover{background-color:light-dark(var(--neutral-800),var(--neutral-200))}.co-side-navigation ul li:not(:has(li a[aria-current=true])) span.nested:hover button,.co-side-navigation ul li:not(:has(li a[aria-current=true])) li:hover button{background-color:light-dark(var(--neutral-800),var(--neutral-200))}.co-side-navigation ul li:not(:has(li a[aria-current=true])) span.nested:hover button:hover,.co-side-navigation ul li:not(:has(li a[aria-current=true])) span.nested:hover button:active,.co-side-navigation ul li:not(:has(li a[aria-current=true])) li:hover button:hover,.co-side-navigation ul li:not(:has(li a[aria-current=true])) li:hover button:active{background-color:light-dark(var(--neutral-700),var(--neutral-300))}.co-side-navigation ul li:not(:has(li a[aria-current=true])) li:active{background-color:light-dark(var(--neutral-700),var(--neutral-300))}.co-side-navigation ul li:not(:has(li a[aria-current=true])) .nested:has(a:active){background-color:light-dark(var(--neutral-700),var(--neutral-300))}.co-side-navigation ul li:not(:has(li a[aria-current=true])) .nested:has(a:active) button{background-color:light-dark(var(--neutral-700),var(--neutral-300))}.co-side-navigation ul li:not(:has(li a[aria-current=true])) .nested:has(a:active) button:hover,.co-side-navigation ul li:not(:has(li a[aria-current=true])) .nested:has(a:active) button:active{background-color:light-dark(var(--neutral-600),var(--neutral-400))}.co-side-navigation ul li:has(li a[aria-current=true]) span.nested,.co-side-navigation ul li:has(li a[aria-current=true]) ul{background-color:light-dark(var(--blue-800),var(--neutral-200))}.co-side-navigation ul li:has(li a[aria-current=true]) span.nested:hover,.co-side-navigation ul li:has(li a[aria-current=true]) li:hover{background-color:light-dark(var(--blue-700),var(--neutral-300))}.co-side-navigation ul li:has(li a[aria-current=true]) span.nested:hover button,.co-side-navigation ul li:has(li a[aria-current=true]) li:hover button{background-color:light-dark(var(--blue-700),var(--neutral-300))}.co-side-navigation ul li:has(li a[aria-current=true]) span.nested:hover button:hover,.co-side-navigation ul li:has(li a[aria-current=true]) span.nested:hover button:active,.co-side-navigation ul li:has(li a[aria-current=true]) li:hover button:hover,.co-side-navigation ul li:has(li a[aria-current=true]) li:hover button:active{background-color:light-dark(var(--blue-600),var(--neutral-400))}.co-side-navigation ul li:has(li a[aria-current=true]) li:active{background-color:light-dark(var(--blue-600),var(--neutral-400))}.co-side-navigation ul li:has(li a[aria-current=true]) .nested:has(a:active){background-color:light-dark(var(--blue-600),var(--neutral-400))}.co-side-navigation ul li:has(li a[aria-current=true]) .nested:has(a:active) button{background-color:light-dark(var(--blue-600),var(--neutral-400))}.co-side-navigation ul li:has(li a[aria-current=true]) .nested:has(a:active) button:hover,.co-side-navigation ul li:has(li a[aria-current=true]) .nested:has(a:active) button:active{background-color:light-dark(var(--blue-600),var(--neutral-500))}.co-side-navigation ul a[aria-current],.co-side-navigation ul a.active,.co-side-navigation ul a[aria-current] .nested,.co-side-navigation ul a.active .nested{background-color:light-dark(var(--blue-600),var(--neutral-400))}.co-side-navigation a:link,.co-side-navigation a:visited,.co-side-navigation a:hover,.co-side-navigation a:active{color:var(--text-primary-color)}.co-side-navigation a:hover{background-color:light-dark(var(--neutral-800),var(--neutral-200))}}@layer component;@layer component{.co-date-range-picker .input-layout{display:flex;justify-content:space-between}.co-date-range-picker .input-layout .flex-inputs{align-items:center;justify-content:flex-start;display:flex}.co-date-range-picker .input-layout .flex-inputs>*{display:inline-block}.co-date-range-picker .input-layout .flex-inputs span.separator{margin:0 .5rem 0 0;padding:0}.co-date-range-picker .input-layout input{display:block;flex:initial;text-overflow:none;width:auto}.co-date-range-picker .input-layout input:last-of-type{margin-right:auto}}@layer component{.co-listbox{width:auto}.co-listbox input[type=checkbox]{flex-shrink:0;width:1rem;height:1rem}.co-listbox svg{height:16px;width:16px}.co-listbox__enhanced{align-items:center;background:var(--surface-hover-bg-color);border-bottom:1px solid var(--border-soft-color);border-radius:var(--radius-2) var(--radius-2) 0 0;color:var(--form-input-fg-color);display:flex;font-size:var(--text-size-01);gap:1rem;justify-content:space-between;line-height:1;margin:0;padding:.25rem .5rem}.co-listbox__enhanced label,.co-listbox__enhanced button{align-items:center;display:flex;gap:.5rem;font-size:var(--text-size-01);white-space:nowrap}.co-listbox__enhanced button{background:transparent;align-items:center;display:flex;margin:0 0 0 auto}.co-listbox__enhanced button:hover{color:var(--form-input-hover-fg-color)}.co-listbox__enhanced button:focus-visible{outline:2px solid var(--outline-color);outline-offset:1px;color:var(--form-input-focus-fg-color)}.co-listbox__options{display:flex;flex-direction:column;margin:0;max-height:12rem;overflow-y:auto;padding:0;width:auto}.co-listbox__options:focus{outline:2px solid var(--outline-color)}.co-listbox__options label{background-color:transparent;border-bottom:0;color:var(--form-option-fg-color);display:flex;flex:1;flex-wrap:nowrap;font-size:var(--text-size-01);gap:.5rem;line-height:1;margin:0;padding:.25rem 1rem .25rem 0}.co-listbox__options label input[type=checkbox]{margin:0 0 0 .5rem}.co-listbox__options label:hover{background-color:var(--form-option-hover-bg-color)}.co-listbox__options label:focus-within{background-color:var(--outline-color);color:var(--surface-bg-color)}.co-listbox__options label[aria-selected=true]{background:var(--form-option-focus-bg-color);color:var(--form-option-focus-fg-color)}.co-listbox__options label[aria-selected=true] input[type=checkbox]:focus{outline:2px solid var(--surface-bg-color)}.co-listbox__options label.disabled{color:var(--disabled-color);cursor:not-allowed;background-color:transparent}.co-listbox__options label span.label{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-listbox__options .empty-list-label{margin:var(--size-1) var(--size-3)}}@layer component{.co-form__dropdown{display:flex}.co-form__dropdown .co-form__field dialog{min-width:100%;max-width:90dvw}.co-form__dropdown .input-layout{justify-content:space-between;position:relative}.co-form__dropdown .input-layout .trigger-arrow{justify-self:flex-end;padding:0}.co-form__dropdown .input-layout .trigger-arrow:focus-visible{outline:2px solid var(--outline-color)}.co-form__dropdown .input-layout:focus-within button.listbox-trigger svg{transform:rotate(180deg)}.co-form__dropdown .co-combobox__input{border:0;width:attr(data-length);min-width:1rem}}:where(.co-drawer){--shadow-color: var(--shadow--color-16);--content-padding: 1.5rem}@layer component{.co-drawer>div{background:var(--surface-primary-bg-color);height:100%;margin:0;padding:var(--content-padding);width:100%;z-index:1}.co-drawer[data-open=false]>div{display:none}.co-drawer--flex{position:absolute;z-index:1}.co-drawer--fixed{position:absolute;z-index:99999}.co-drawer--full{bottom:0;left:0;right:0;top:0}.co-drawer--top,.co-drawer--bottom{left:0;right:0}.co-drawer--right,.co-drawer--left{top:0;bottom:0}.co-drawer--top{top:-1px}.co-drawer--right{right:-1px}.co-drawer--bottom{bottom:-1px}.co-drawer--left{left:-1px}.co-drawer--right[data-open=true].co-drawer--xl,.co-drawer--left[data-open=true].co-drawer--xl{width:90%}.co-drawer--right[data-open=true].co-drawer--lg,.co-drawer--left[data-open=true].co-drawer--lg{width:66.666%}.co-drawer--right[data-open=true].co-drawer--md,.co-drawer--left[data-open=true].co-drawer--md{width:33.333%}.co-drawer--right[data-open=true].co-drawer--sm,.co-drawer--left[data-open=true].co-drawer--sm{width:20%}.co-drawer--top[data-open=true].co-drawer--xl,.co-drawer--bottom[data-open=true].co-drawer--xl{height:90%}.co-drawer--top[data-open=true].co-drawer--lg,.co-drawer--bottom[data-open=true].co-drawer--lg{height:66.666%}.co-drawer--top[data-open=true].co-drawer--md,.co-drawer--bottom[data-open=true].co-drawer--md{height:33.333%}.co-drawer--top[data-open=true].co-drawer--sm,.co-drawer--bottom[data-open=true].co-drawer--sm{height:20%}.co-drawer--top button.co-drawer__handle{border-radius:0 0 var(--radius-5) var(--radius-5);box-shadow:0 .5rem 1rem var(--shadow-color);border-top:1px solid var(--surface-primary-bg-color);bottom:calc(-2rem + 1px);line-height:1.4;left:45%}.co-drawer--top button.co-drawer__handle span{padding:.25rem 4rem}.co-drawer--top[data-open=true]>div{box-shadow:var(--shadow--floating-16)}.co-drawer--right[data-open=true]>div{border-left:1px solid var(--shadow-color)}.co-drawer--right button.co-drawer__handle{border-radius:var(--radius-3) var(--radius-3) 0 0;border-width:1px 1px 0 1px;left:-3.9rem;line-height:1.4;top:45%;transform:rotate(270deg)}.co-drawer--right button.co-drawer__handle span{display:flex;padding:.25rem 1rem}.co-drawer--bottom[data-open=true]>div{border-top:1px solid var(--shadow-color)}.co-drawer--bottom button.co-drawer__handle{border-radius:var(--radius-5) var(--radius-5) 0 0;border-width:1px 1px 0 1px;top:-1.9rem;line-height:1.4;left:45%}.co-drawer--bottom button.co-drawer__handle span{padding:.25rem 4rem}.co-drawer--left[data-open=true]>div{border-right:1px solid var(--shadow-color)}.co-drawer--right button.co-drawer__handle,.co-drawer--bottom button.co-drawer__handle,.co-drawer--left button.co-drawer__handle{border-color:var(--shadow-color);border-style:solid}button.co-drawer__handle{background:var(--surface-primary-bg-color);color:var(--neutral-400);display:flex;padding:0;position:absolute;z-index:2}button.co-drawer__close{color:var(--neutral-600);display:block;position:absolute;top:0;right:0}button.co-drawer__close:hover,button.co-drawer__close:focus-visible{color:var(--neutral-300)}button.co-drawer__close:active{color:var(--neutral-100)}button.co-drawer__close svg{height:24px;width:24px}}:where(.co-modal){--size-sm: 25%;--size-md: 40%;--size-lg: 66%;--size-xl: 80%}@layer component{.co-modal{background-color:var(--surface-primary-bg-color);border:0;border-radius:var(--radius-3);box-shadow:var(--shadow--floating-16);color:var(--text-primary-color);margin:auto;padding:0}.co-modal:not([open]){pointer-events:none}.co-modal button.co-modal__close{border-radius:var(--radius-3);display:flex;position:absolute;top:.275rem;right:.275rem;color:var(--text-primary-color);z-index:1}.co-modal button.co-modal__close:focus-visible{outline:2px solid var(--outline-color)}.co-modal button.co-modal__close:hover{color:var(--surface-hover-fg-color)}.co-modal button.co-modal__close:active{color:var(--surface-active-fg-color)}.co-modal button.co-modal__close svg{height:1.5rem;width:1.5rem}.co-modal>div{display:flex;flex-direction:column;height:100%;width:100%}.co-modal header.co-modal__header,.co-modal article,.co-modal footer.co-modal__footer{margin:0;padding:1rem}.co-modal article.co-modal__content{flex:1;max-block-size:100%;overscroll-behavior-y:contain}.co-modal header.co-modal__header,.co-modal footer.co-modal__footer menu{margin:0;align-items:center;display:flex;gap:1rem}.co-modal header.co-modal__header{justify-content:space-between}.co-modal header.co-modal__header h2,.co-modal header.co-modal__header h3,.co-modal header.co-modal__header h4{margin:0}.co-modal footer.co-modal__footer menu{width:100%;justify-content:flex-end}.co-modal--top,.co-modal--right,.co-modal--bottom,.co-modal--left{margin:0;border-radius:0}.co-modal--top,.co-modal--bottom{right:0;left:0;width:100%}.co-modal--top:modal,.co-modal--bottom:modal{max-width:100%}.co-modal--right,.co-modal--left{top:0;bottom:0;height:100%}.co-modal--right:modal,.co-modal--left:modal{max-height:100%}.co-modal--top{top:0}.co-modal--right{right:0}.co-modal--bottom{bottom:0}.co-modal--left{left:0}.co-modal--fullscreen{border-radius:0;box-shadow:none;top:0;right:0;bottom:0;left:0;height:100%;max-height:100%;width:100%;max-width:100%}.co-modal--center.co-modal--xl,.co-modal--right.co-modal--xl,.co-modal--left.co-modal--xl{width:var(--size-xl)}.co-modal--center.co-modal--lg,.co-modal--right.co-modal--lg,.co-modal--left.co-modal--lg{width:var(--size-lg)}.co-modal--center.co-modal--md,.co-modal--right.co-modal--md,.co-modal--left.co-modal--md{width:var(--size-md)}.co-modal--center.co-modal--sm,.co-modal--right.co-modal--sm,.co-modal--left.co-modal--sm{width:var(--size-sm)}.co-modal--center.co-modal--xl{top:calc((100% - var(--size-xl)) / 2);bottom:calc((100% - var(--size-xl)) / 2);height:var(--size-xl)}.co-modal--center.co-modal--lg{top:calc((100% - var(--size-lg)) / 2);bottom:calc((100% - var(--size-lg)) / 2);height:var(--size-lg)}.co-modal--center.co-modal--md{top:calc((100% - var(--size-md)) / 2);bottom:calc((100% - var(--size-md)) / 2);height:var(--size-md)}.co-modal--center.co-modal--sm{top:calc((100% - var(--size-sm)) / 2);bottom:calc((100% - var(--size-sm)) / 2);height:var(--size-sm)}.co-modal--center.co-modal--auto{top:auto;height:auto;bottom:auto}.co-modal--left.co-modal--xl{right:calc(100% - var(--size-xl))}.co-modal--left.co-modal--lg{right:calc(100% - var(--size-lg))}.co-modal--left.co-modal--md{right:calc(100% - var(--size-md))}.co-modal--left.co-modal--sm{right:calc(100% - var(--size-sm))}.co-modal--right.co-modal--xl{left:calc(100% - var(--size-xl))}.co-modal--right.co-modal--lg{left:calc(100% - var(--size-lg))}.co-modal--right.co-modal--md{left:calc(100% - var(--size-md))}.co-modal--right.co-modal--sm{left:calc(100% - var(--size-sm))}.co-modal--top.co-modal--xl,.co-modal--bottom.co-modal--xl{height:var(--size-xl)}.co-modal--top.co-modal--lg,.co-modal--bottom.co-modal--lg{height:var(--size-lg)}.co-modal--top.co-modal--md,.co-modal--bottom.co-modal--md{height:var(--size-md)}.co-modal--top.co-modal--sm,.co-modal--bottom.co-modal--sm{height:var(--size-sm)}.co-modal--top.co-modal--xl{bottom:calc(100% - var(--size-xl))}.co-modal--top.co-modal--lg{bottom:calc(100% - var(--size-lg))}.co-modal--top.co-modal--md{bottom:calc(100% - var(--size-md))}.co-modal--top.co-modal--sm{bottom:calc(100% - var(--size-sm))}.co-modal--bottom.co-modal--xl{top:calc(100% - var(--size-xl))}.co-modal--bottom.co-modal--lg{top:calc(100% - var(--size-lg))}.co-modal--bottom.co-modal--md{top:calc(100% - var(--size-md))}.co-modal--bottom.co-modal--sm{top:calc(100% - var(--size-sm))}@media (prefers-reduced-motion: no-preference){.co-modal--animate{animation:var(--animation-scale-down) forwards;animation-timing-function:var(--ease-elastic-5)}.co-modal--animate.co-modal--center[open]{animation:var(--animation-slide-in-up) forwards}.co-modal--animate.co-modal--top[open]{animation:var(--animation-slide-in-down) forwards}.co-modal--animate.co-modal--right[open]{animation:var(--animation-slide-in-left) forwards}.co-modal--animate.co-modal--bottom[open]{animation:var(--animation-slide-in-up) forwards}.co-modal--animate.co-modal--left[open]{animation:var(--animation-slide-in-right) forwards}}}@layer component{.co-form__multiselect{display:flex}.co-form__multiselect .input-layout{justify-content:space-between}.co-form__multiselect .input-layout button.listbox-trigger{justify-self:flex-end;padding:var(--padding-sm)}.co-form__multiselect .input-layout button.listbox-trigger:focus-visible{outline:1px solid var(--blue-400)}.co-form__multiselect .input-layout:focus-within button.listbox-trigger svg{transform:rotate(180deg)}.co-form__multiselect svg.co-icon--error{margin-left:auto}}@layer component{.co-form__number-spinbutton.co-form--invalid .co-form__field{flex-direction:row;align-items:center}.co-form__number-spinbutton .input-layout{flex:.5;gap:var(--padding-sm);text-align:center}.co-form__number-spinbutton .input-layout button{padding:0}.co-form__number-spinbutton .input-layout:focus-visible{outline:0;border:1px solid var(--stroke-subtle-color)}.co-form__number-spinbutton .input-layout:has(input:focus){border:1px solid var(--outline-color);outline:1px solid var(--outline-color)}.co-form__number-spinbutton .input-layout.input-active{border:1px solid var(--outline-color);outline:1px solid var(--outline-color)}.co-form__number-spinbutton .input-layout .prefix-slot,.co-form__number-spinbutton .input-layout .suffix-slot{display:block;padding:0 .5rem}.co-form__number-spinbutton .input-layout .prefix-slot svg,.co-form__number-spinbutton .input-layout .suffix-slot svg{height:1.5rem;width:1.5rem}.co-form__number-spinbutton .input-layout .divider{background-color:var(--stroke-subtle-color);display:block;height:1.875rem;width:1px}.co-form__number-spinbutton .input-layout input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;flex:1;padding:0;text-align:center;width:-moz-min-content;width:min-content;z-index:0}.co-form__number-spinbutton .input-layout input::-webkit-outer-spin-button,.co-form__number-spinbutton .input-layout input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.co-form__number-spinbutton button{border-radius:var(--radius-1);z-index:1}.co-form__number-spinbutton button:hover{background-color:var(--surface-hover-bg-color);cursor:pointer}.co-form__number-spinbutton button:focus-visible{outline:2px solid var(--outline-color);outline-offset:.25rem}.co-form__number-spinbutton button:nth-of-type(1){order:1}.co-form__number-spinbutton .divider.left{order:2}.co-form__number-spinbutton .prefix-slot{order:3}.co-form__number-spinbutton input{order:4}.co-form__number-spinbutton .suffix-slot{order:5}.co-form__number-spinbutton .divider.right{order:6}.co-form__number-spinbutton button:nth-of-type(2){order:7}.co-form__number-spinbutton button svg.co-icon,.co-form__number-spinbutton svg.co-icon--error{height:1rem;width:1rem;margin:.375rem}}.co-overflow-menu{color:var(--surface-fg-color);margin:0;padding:0;position:relative}.co-overflow-menu>button{background:inherit;border:0;color:var(--stroke-color)}.co-overflow-menu>button:hover{background-color:var(--surface-hover-bg-color)}.co-overflow-menu>button:active{background-color:var(--surface-active-bg-color)}.co-overflow-menu>button:focus-visible{outline:2px solid var(--blue-400)}.co-overflow-menu>button:hover,.co-overflow-menu>button:active,.co-overflow-menu>button:focus{color:var(--text-primary-color)}.co-overflow-menu>ul{background-color:var(--surface-primary-bg-color);border-radius:var(--radius-3);box-shadow:var(--shadow--floating-16);display:flex;flex-direction:column;margin:0;padding:0;position:absolute;min-height:2.25rem;min-width:12rem;z-index:9999;right:0}.co-overflow-menu li{display:flex;align-items:center}.co-overflow-menu li label,.co-overflow-menu li button{flex:1}.co-overflow-menu li button{padding:.5rem;font-size:var(--text-size-01)}.co-overflow-menu li button:hover{background-color:var(--surface-hover-bg-color)}.co-overflow-menu li button:active{background-color:var(--surface-active-bg-color)}.co-overflow-menu li button:focus{background-color:var(--primary-color);color:var(--white);outline:0}.co-overflow-menu li:first-of-type button{border-radius:var(--radius-3) var(--radius-3) 0 0}.co-overflow-menu li:last-of-type button{border-radius:0 0 var(--radius-3) var(--radius-3)}.co-overflow-menu li svg{height:16px;margin:0 .5rem 0 0;width:16px}.co-overflow-menu li.danger button:hover{background:var(--danger-hover-color);color:var(--white)}.co-overflow-menu li.danger button:active{background:var(--danger-active-color);color:var(--white)}@layer component{.co-pagination{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;font-size:var(--text-size-md)}.co-pagination p{margin:0;padding:0;font-size:inherit;white-space:nowrap}.co-pagination>div{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;height:-moz-fit-content;height:fit-content;min-height:1.625rem;padding:0 1rem;border-right:1px solid var(--stroke-subtle-color)}.co-pagination>div:last-of-type{border-right:0}.co-pagination button,.co-pagination select{background:transparent;border:0;border-radius:var(--radius-2);color:var(--text-primary-color);font-size:inherit;margin:0;padding:.1rem .25rem}.co-pagination button:hover,.co-pagination select:hover{background-color:transparent}.co-pagination button:active,.co-pagination select:active{background-color:transparent}.co-pagination button:focus-visible,.co-pagination select:focus-visible{outline:2px solid var(--outline-color);outline-radius:var(--radius-2)}.co-pagination svg{pointer-events:none}.co-pagination button[disabled]{color:var(--disabled-color);outline:0}.co-pagination button[disabled] svg{fill:var(--disabled-color)}.co-pagination select{cursor:pointer;display:inline-block;margin:0 .5rem}.co-pagination select:after{background:var(--warning-color);color:var(--stroke-subtle-color);content:"";display:inline-block;width:.5rem;height:.5rem;border-bottom:1px solid var(--surface-fg-color);border-right:1px solid var(--surface-fg-color)}.co-pagination>div.co-pagination__arrow{border-right:1px solid var(--stroke-subtle-color);display:flex;align-items:center;padding:0 .5rem}.co-pagination>div.co-pagination__arrow button{display:flex;align-items:center;gap:.5rem}.co-pagination>div.co-pagination__arrow:last-of-type{border-right:0}.co-pagination__page-items{color:var(--stroke-color)}.co-pagination__page-size+.co-pagination__page-items{flex:1}.co-pagination__page-select{align-items:center;display:flex;gap:.5rem}.co-pagination__page-select>span{display:block;white-space:nowrap}}:where(progress){--track-color: var(--surface-active-bg-color);--progress-color: var(--primary-color)}@layer component{.co-progress{color:var(--text-tertiary-color);display:flex;flex-direction:column;font-size:var(--text-size-1);gap:.25rem}.co-progress .co-progress__description{color:var(--text-tertiary-color);font-size:var(--text-size-01)}.co-progress.co-progress--error .label,.co-progress.co-progress--complete .label{display:flex;align-items:center;justify-content:space-between}.co-progress.co-progress--error .label svg,.co-progress.co-progress--complete .label svg{height:1.25rem;width:1.25rem}.co-progress.co-progress--error{color:var(--danger-color)}.co-progress.co-progress--error .co-progress-line{accent-color:var(--danger-color)}.co-progress.co-progress--error .co-progress-line[value]::-webkit-progress-value{background-color:var(--danger-color)}.co-progress.co-progress--error .co-progress__description{color:var(--danger-color)}.co-progress.co-progress--complete{color:var(--success-color)}.co-progress.co-progress--complete .co-progress-line{accent-color:var(--success-color)}.co-progress.co-progress--complete .co-progress-line[value]::-webkit-progress-value{background-color:var(--success-color)}.co-progress.co-progress--complete .co-progress__description{color:var(--success-color)}.co-spinner-circle:before{content:"";color:var(--surface-contrast-fg-color);display:block;height:1rem;width:1rem;background:transparent;border-radius:50%;border:.1rem solid transparent;border-color:var(--primary-color) var(--primary-color) transparent transparent;animation:spinner-circle .625s infinite}@keyframes spinner-circle{to{transform:rotate(360deg)}}}:where(progress){--track-color: light-dark(var(--neutral-800), var(--neutral-100));--track-size: min(10px, 1ex);--radius: 100vw;--indeterminate-track: linear-gradient( to right, var(--track-color) 45%, var(--progress-color) 0%, var(--progress-color) 55%, var(--track-color) 0% );--indeterminate-track-size: 225% 100%;--indeterminate-track-animation: progress-loading 2s infinite ease}@layer component{.co-progress-line{-moz-appearance:none;-webkit-appearance:none;appearance:none;border:none;position:relative;height:var(--track-size);border-radius:var(--radius);overflow:hidden;min-width:100%;width:fit-width}.co-progress-line[data-complete=false]{accent-color:var(--progress-color)}.co-progress-line[data-complete=true]{accent-color:var(--success-color)}.co-progress-line[data-error=true]{accent-color:var(--danger-color)}.co-progress-line:focus-visible{outline-color:var(--progress-color);outline-offset:.25rem}.co-progress-line[value]::-webkit-progress-bar{background-color:var(--track-color)}.co-progress-line[value][data-complete=false]::-moz-progress-bar{background-color:var(--progress-color)}.co-progress-line[value][data-complete=true]::-moz-progress-bar{background-color:var(--success-color)}.co-progress-line[value][data-error=true]::-moz-progress-bar{background-color:var(--danger-color)}.co-progress-line[value]::-webkit-progress-value{background-color:var(--progress-color)}.co-progress-line[data-complete=true]::-webkit-progress-value{background-color:var(--success-color)}.co-progress-line:not([value]):after{content:"";top:0;right:0;bottom:0;left:0;position:absolute;background:var(--indeterminate-track);background-size:var(--indeterminate-track-size);background-position:right;animation:var(--indeterminate-track-animation)}.co-progress-line:not([value])::-moz-progress-bar{background:var(--indeterminate-track);background-size:var(--indeterminate-track-size);background-position:right;animation:var(--indeterminate-track-animation)}.co-progress-line:not([value])::-webkit-progress-bar{background:var(--indeterminate-track);background-size:var(--indeterminate-track-size);background-position:right;animation:var(--indeterminate-track-animation)}@keyframes progress-loading{50%{background-position:left}}}@layer component{.co-progress-tracker{background-color:inherit;display:flex}.co-progress-tracker li{background-color:inherit;display:flex;flex-direction:column;position:relative}.co-progress-tracker li .label{display:block;font-weight:var(--font-weight-regular);line-height:1.5}.co-progress-tracker li .optional-label{display:block;font-size:var(--text-size-01);font-style:normal;font-weight:var(--font-weight-light)}.co-progress-tracker li svg{background:inherit;height:1.5rem;width:1.5rem}.co-progress-tracker li[data-status=idle]{color:var(--neutral-400);border-color:var(--neutral-400);border-style:dotted}.co-progress-tracker li[data-status=pending]{color:var(--info-color);border-color:var(--info-color);border-style:dotted;animation:var(--animation-blink)}.co-progress-tracker li[data-status=done]{color:var(--success-color);border-color:var(--success-color);border-style:solid}.co-progress-tracker li[data-status=failed]{color:var(--danger-color);border-color:var(--danger-color);border-style:solid}.co-progress-tracker.co-progress-tracker--horizontal{flex-direction:row;gap:.25rem}.co-progress-tracker.co-progress-tracker--horizontal li{border-width:.125rem 0 0 0;padding:1rem 1rem 1rem 0}.co-progress-tracker.co-progress-tracker--horizontal li svg{left:-.3rem;position:absolute;top:-.8rem}.co-progress-tracker.co-progress-tracker--vertical{flex-direction:column;gap:0rem}.co-progress-tracker.co-progress-tracker--vertical li{border-width:0 0 0 .125rem;padding:0 1rem 1rem}.co-progress-tracker.co-progress-tracker--vertical li svg{left:-.875rem;position:absolute;top:0}}@layer component{.co-screen__header{display:flex;flex-direction:column;gap:0;margin:0;padding:1.5rem;width:100%}.co-screen__header.co-screen__header--skim{box-shadow:var(--shadow--skim-08)}.co-screen__header.co-screen__header--raised{box-shadow:var(--shadow--raised-08)}.co-screen__header.co-screen__header--lifted{box-shadow:var(--shadow--lifted-08)}.co-screen__header.co-screen__header--floating{box-shadow:var(--shadow--floating-08)}.co-screen__header .heading{align-items:center;display:flex;gap:2rem}.co-screen__header .heading>*:last-child{margin-left:auto}.co-screen__header hgroup{margin-block:0 1rem}.co-screen__header hgroup h1,.co-screen__header hgroup h2,.co-screen__header hgroup h3{margin:0;padding:0}.co-screen__header h2{font-size:var(--text-size-6);line-height:1;margin:0;padding:0}.co-screen__header p{font-size:var(--text-size-01);margin-top:0;margin-bottom:0}.co-screen__header h3{font-weight:var(--font-weight-light)}.co-screen__header h3 b{font-weight:var(--font-weight-bold)}.co-screen__header.co-screen__header--collapsible{background-color:var(--surface-primary-bg-color);padding:1.5rem 1.5rem 0}.co-screen__header button.toggle{background-color:var(--surface-primary-bg-color);border-radius:0 0 var(--radius-5) var(--radius-5);box-shadow:0 .375rem .375rem 0 var(--shadow--color-08);display:flex;color:inherit;font-size:var(--text-size-01);gap:.5rem;margin:0 auto;padding-block:0 .5rem;padding-inline:1.5rem;position:relative;bottom:-.875rem;z-index:1}.co-screen__header button.toggle svg{transition:all .3s ease-in-out}.co-screen__header--collapsible[data-collapsed=false] button.toggle svg{transform:rotate(180deg)}.co-screen__header--collapsible[data-collapsed=true] hgroup{margin-block:0}.co-screen__header--collapsible[data-collapsed=true] button.toggle svg{transform:rotate(0)}}@layer component{.co-form__select .listbox-trigger{align-items:center;background-color:transparent;display:flex;line-height:1;padding:var(--padding-sm);text-align:left;flex:1}.co-form__select .listbox-trigger .value{flex:1;margin-right:.5rem;text-overflow:ellipsis;white-space:nowrap}.co-form__select .listbox-trigger svg{display:block;margin:0 0 0 .25rem;padding:0}.co-form__select .listbox-trigger:active svg,.co-form__select .listbox-trigger:focus svg{transform:rotate(180deg)}}@layer component{.co-side-panel{background-color:var(--surface-primary-bg-color);color:inherit;display:flex;position:relative;z-index:1;transition:width .2s}.co-side-panel.co-side-panel--overlay{position:absolute}.co-side-panel.co-side-panel--overlay+.co-app__main{margin-left:3.5rem}.co-app__frame.compact .co-side-panel .logo{display:flex;align-items:center;min-height:4rem;border-bottom:1px solid var(--stroke-subtle-color)}.co-app__frame.compact .co-side-panel .logo svg{color:var(--blue-400);margin:0 1rem}.co-app__frame.compact .co-side-panel .logo h1{font-size:clamp(1rem,var(--text-size-3),var(--text-size-4));font-weight:var(--font-weight-regular);margin:0;padding:0;white-space:nowrap}.co-app__frame.compact .co-side-panel.co-side-panel--collapsed{left:-3.725rem;width:0}.co-app__frame.compact .co-side-panel.co-side-panel--collapsed .logo{display:none}.co-app__frame.compact .co-side-panel.co-side-panel--overlay+.co-app__main{margin-left:0}.co-side-panel--left,.co-side-panel--right{flex-direction:column;height:calc(100vh - 4rem);height:calc(100vh - var(--app-header-height, 4rem))}.co-side-panel--left.co-side-panel--collapsed,.co-side-panel--right.co-side-panel--collapsed{width:-moz-min-content;width:min-content}.co-side-panel--left.co-side-panel--expanded,.co-side-panel--right.co-side-panel--expanded{width:16rem}.co-side-panel--left{box-shadow:.15rem 0 .5rem 0 var(--shadow--color-08)}.co-side-panel--right{box-shadow:-.15rem 0 .5rem 0 var(--shadow--color-08)}.co-side-panel__content{display:flex;flex:1}.co-side-panel__toggle{display:flex;background-color:var(--surface-primary-bg-color);border-top:1px solid var(--stroke-subtle-color);position:sticky;bottom:0}.co-side-panel__toggle button{border:0;background:transparent;margin:0;padding:0}.co-side-panel__toggle svg{margin:1rem;height:24px;width:24px;pointer-events:none;transition:all .3s ease-in-out}.co-side-panel--left .co-side-panel__toggle{justify-content:flex-end}.co-side-panel--left .co-side-panel__toggle svg{transform:rotate(0)}.co-side-panel--left.co-side-panel--collapsed .co-side-panel__toggle svg{transform:rotate(180deg)}.co-side-panel--right .co-side-panel__toggle{justify-content:flex-start}.co-side-panel--right .co-side-panel__toggle svg{transform:rotate(0)}.co-side-panel--right.co-side-panel--collapsed .co-side-panel__toggle svg{transform:rotate(180deg)}}:where(.co-split-panel){--split-panel-width--sm: 20dvw;--split-panel-width--md: 33dvw;--split-panel-width--lg: 66dvw;--split-panel-width--xl: 90dvw}@layer component{.co-split-panel{background-color:var(--surface-primary-bg-color);color:inherit;display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;max-height:100dvh;position:sticky;top:0;z-index:1}.co-split-panel.co-split-panel--collapsed{flex-basis:0}.co-split-panel.co-split-panel--overlay{position:absolute;top:0;bottom:0;right:0}.co-split-panel.co-split-panel--overlay+.co-app__main{margin-left:3.5rem;position:relative}.co-split-panel.co-split-panel--xl{flex-basis:var(--split-panel-width--xl)}.co-split-panel.co-split-panel--lg{flex-basis:var(--split-panel-width--lg)}.co-split-panel.co-split-panel--md{flex-basis:var(--split-panel-width--md)}.co-split-panel.co-split-panel--sm{flex-basis:var(--split-panel-width--sm)}.co-split-panel.co-split-panel--base{box-shadow:var(--shadow--base-16)}.co-split-panel.co-split-panel--skim{box-shadow:var(--shadow--skim-16)}.co-split-panel.co-split-panel--raised{box-shadow:var(--shadow--raised-16)}.co-split-panel.co-split-panel--lifted{box-shadow:var(--shadow--lifted-16)}.co-split-panel.co-split-panel--floating{box-shadow:var(--shadow--floating-16)}.co-split-panel--left{box-shadow:.15rem 0 .5rem 0 var(--shadow--color-08)}.co-split-panel--right{box-shadow:-.15rem 0 .5rem 0 var(--shadow--color-08)}.co-split-panel__content{display:flex;flex:1}.co-split-panel__close:active{outline:0}.co-split-panel__close:focus-visible{outline:2px solid var(--outline-color)}.co-split-panel__close{position:absolute;top:0;right:0;z-index:1}@media (prefers-reduced-motion: no-preference){.co-split-panel--animate.co-split-panel--expanded{transition:all .375s var(--ease-elastic-2)}}}@layer component{.co-form__textarea textarea{border:none;font-size:var(--text-size-1);width:100%;min-height:2rem}}@layer component{.co-form__time .co-form__field dialog{width:100%}.co-form__time .input-layout{-moz-column-gap:0;column-gap:0}.co-form__time .input-layout input[type=time]{font-family:var(--font-family-text);min-width:5rem;width:auto}.co-form__time .input-layout input[type=time]::-webkit-calendar-picker-indicator{background:none;display:none}.co-time-options{border:0;grid-gap:.5rem;gap:.5rem;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(12,1fr);max-height:12rem;overflow-y:auto;overflow-x:hidden;padding:.25rem}.co-time-options label{border-radius:var(--radius-2);display:flex;flex-wrap:nowrap;font-size:var(--text-size-01);margin:0;padding:0 .25rem;white-space:nowrap}.co-time-options label input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:0;height:0}.co-time-options label input[type=radio]:focus{outline:0}.co-time-options label:hover{background-color:var(--neutral-700)}.co-time-options label:active{background-color:var(--neutral-600)}.co-time-options label:has(:focus){outline:2px solid var(--blue-400)}.co-time-options label:has(:checked){background-color:var(--blue-400);color:var(--white)}}
@layer component{.co-wheels-of-time{display:grid;grid-column:1/3;grid-row:2/3;grid-template-columns:repeat(3,3rem);height:14rem;overflow-y:clip;margin:0;padding:0;position:relative}.co-wheels-of-time fieldset{border:0;border-right:1px solid var(--stroke-subtle-color);display:block;margin:0;padding:0 .25rem;overflow-y:auto}.co-wheels-of-time fieldset.ampm{padding:0 .25rem}.co-wheels-of-time fieldset:last-of-type{border-right:0}.co-wheels-of-time fieldset label{border-radius:var(--radius-2);font-size:var(--text-size-01);cursor:pointer;display:block;margin:0 0 .5rem;padding:0 .25rem}.co-wheels-of-time fieldset label:hover{background-color:var(--neutral-subtle)}.co-wheels-of-time fieldset label:active{background-color:light-dark(var(--neutral-600),var(--neutral-200))}.co-wheels-of-time fieldset label:has(:checked){background-color:var(--primary-color);color:var(--white)}.co-wheels-of-time fieldset label:has(:checked):active,.co-wheels-of-time fieldset label:has(:checked):hover{background-color:var(--primary-color);color:var(--white)}.co-wheels-of-time fieldset label:has(:focus-visible){outline:2px solid var(--primary-color)}.co-wheels-of-time fieldset input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:0;width:0;border:none}.co-wheels-of-time fieldset input[type=radio]:focus,.co-wheels-of-time fieldset input[type=radio]:focus-visible{outline:none}}
._scheduleHeader_1qcw1_1 {
margin-bottom: var(--text-size-3);
}
._scheduleHeader_1qcw1_1 h2 {
font-size: var(--text-size-4);
font-weight: var(--font-weight-bolder);
line-height: var(--text-size-6);
}
._dateTimeRow_1qcw1_11 {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: var(--font-weight-normal);
}
._dateTimeRow_1qcw1_11 p {
margin: 0;
font-size: var(--text-size-1);
color: var(--neutral-075);
}
._localTime_1qcw1_24 {
background-color: var(--neutral-700);
padding: 0.3125rem 0.625rem;
border-radius: 0.25rem;
font-size: var(--text-size-1);
color: var(--neutral-200);
font-weight: var(--font-weight-semibold);
margin-left: auto;
line-height: var(--text-size-1);
}
._scheduleAlert_1qcw1_35 {
display: flex;
align-items: center;
background: var(--yellow-800);
padding: 0.625rem;
border-radius: 0.3125rem;
font-size: var(--text-size-1);
font-weight: var(--font-weight-bold);
color: var(--neutral-075);
}
._scheduleAlert_1qcw1_35 p {
margin: 0.625rem;
}
._alertDec_1qcw1_49 {
font-weight: var(--font-weight-semibold);
line-height: var(--text-size-3);
}
._scheduleHeaderContainer_1qcw1_54 {
background: var(--neutral-900);
width: 100%;
}
@media (max-width: 480px) {
._scheduleCalendarHeader_1qcw1_60 {
margin-left: 0.5rem;
}
._scheduleHeader_1qcw1_1 {
margin-bottom: 0.5rem;
}
}
._notificationBadge_lok18_1 {
background: white;
border: none;
border-radius: 0.625rem;
box-shadow: 0 0.0625rem 1rem 0 var(--neutral-700);
cursor: pointer;
text-align: left;
width: 100%;
padding: 0;
max-width: 25rem;
}
._badgeContainer_lok18_13 {
display: flex;
align-items: flex-start;
position: relative;
padding: 1rem 0rem;
width: 100%;
height: 100%;
}
._blueSidebar_lok18_22 {
background-color: var(--blue-400);
border-radius: 0.4rem;
margin: 0rem 1rem;
width: 0.5rem;
min-height: 7rem;
}
._badgeContent_lok18_30 {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
._notificationCount_lok18_37 {
font-size: 3rem;
font-weight: var(--font-weight-bolder);
line-height: 1;
color: var(--neutral-075);
}
._notificationText_lok18_44 {
color: var(--neutral-075);
font-weight: var(--font-weight-semibold);
line-height: 1.25rem;
font-size: 1.1rem;
margin-top: 0.25rem;
}
._infoIcon_lok18_52 {
position: absolute;
top: 1.25rem;
right: 1.25rem;
display: flex;
align-items: center;
color: var(--blue-400);
}
._notificationBadge_lok18_1:hover {
background-color: var(--neutral-800);
}
._scheduleNotificationCoScreen_lok18_65 {
display: flex;
padding-top: 1rem;
padding-bottom: 0rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
._notificationSidePanel_12l6o_1 {
position: fixed;
top: 3rem;
right: 0;
width: 25rem;
height: 100%;
background-color: white;
box-shadow: -0.125rem 0 0.625rem rgba(0, 0, 0, 0.1);
z-index: 1000;
display: flex;
flex-direction: column;
transform: translateX(0);
transition: transform 0.3s ease;
}
._notificationDetailsPanelContent_12l6o_16 {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
._notificationHeader_12l6o_23 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
position: sticky;
top: 0;
background: white;
z-index: 2;
color: var(--neutral-075);
}
._notificationHeader_12l6o_23 h2 {
margin: 0;
font-size: 1.5rem;
font-weight: var(--font-weight-bolder);
line-height: 2rem;
}
._closeButton_12l6o_42 {
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
display: flex;
align-items: center;
justify-content: center;
}
._notificationsList_12l6o_52 {
flex: 1;
overflow-y: auto;
padding: 1rem 1.5rem;
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
align-items: center;
padding-bottom: 5rem;
}
._notificationItem_12l6o_64 {
display: flex;
flex-direction: column;
padding: 1rem;
position: relative;
background-color: white;
margin: 0.5rem 0;
border-radius: 0.5rem;
box-shadow: 0 0.0625rem 1rem 0 var(--neutral-700);
width: calc(100%);
text-align: flex-start;
border: 0.063rem solid var(--neutral-750);
cursor: pointer;
font-family: inherit;
align-items: flex-start;
}
._notificationItem_12l6o_64:hover {
background-color: var(--neutral-800);
}
._notificationDate_12l6o_85 {
flex: auto;
flex-direction: row;
color: var(--neutral-400);
font-size: 0.75rem;
margin-bottom: 0.2rem;
line-height: 1rem;
font-weight: var(--font-weight-semibold);
}
._notificationTitle_12l6o_95 {
font-weight: var(--font-weight-bold);
margin: 0 0 0.5rem 0;
font-size: 1rem;
color: var(--neutral-075);
line-height: 1.25rem;
}
._notificationDescription_12l6o_103 {
margin: 0;
color: var(--neutral-075);
font-size: 0.75rem;
line-height: 1rem;
font-weight: var(--font-weight-normal);
}
._notificationIndicator_12l6o_111 {
position: absolute;
top: 1.25rem;
right: 1.5rem;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background-color: var(--blue-400);
aspect-ratio: 1;
}
._notificationSidePanel_12l6o_1._entering_12l6o_122 {
transform: translateX(0);
}
._notificationSidePanel_12l6o_1._exiting_12l6o_126 {
transform: translateX(100%);
}
@media (max-width: 768px) {
._notificationSidePanel_12l6o_1 {
width: 100%;
}
}
._header_h3l71_1 {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0.625rem;
padding-top: 0.625rem;
padding-left: 2.5rem;
}
._leftSection_h3l71_9 {
display: flex;
align-items: center;
gap: 0.625rem;
}
._dateRange_h3l71_15 {
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
}
._dateRange_h3l71_15 h3 {
font-size: var(--text-size-3);
font-weight: var(--font-weight-bolder);
line-height: var(--text-size-4);
margin: 0;
text-align: center;
}
._dateRange_h3l71_15 ._mobileDateHeader_h3l71_29 {
display: none;
}
._navigation_h3l71_33 {
display: flex;
gap: 0.3125rem;
}
._navButton_h3l71_38 {
background: none;
border: none;
font-size: var(--text-size-4);
cursor: pointer;
color: var(--blue-075);
padding: 0.3125rem;
}
._viewOptions_h3l71_46._disabled_h3l71_46 {
pointer-events: none;
opacity: 0.7;
}
._viewOptions_h3l71_46 {
display: inline-flex;
padding: 0.125rem;
align-items: flex-start;
gap: 0.125rem;
border-radius: var(--text-size-4);
background: var(--neutral-800);
}
._viewButton_h3l71_58 {
background: none;
border: none;
font-size: 10.5rem;
cursor: pointer;
padding: 0.3125rem 0.625rem;
background-color: var(--neutral-800);
border-radius: 20.25rem;
}
._viewButton_h3l71_58:hover {
background-color: var(--neutral-800);
}
._navButtons_h3l71_72 {
display: flex;
margin-left: 0.625rem;
}
._navButtons_h3l71_72 button,
._viewButtons_h3l71_78 button {
background: none;
border: none;
font-size: 1.2em;
cursor: pointer;
color: var(--neutral-600);
}
._navButtons_h3l71_72 button {
background: none;
border: none;
font-size: 1.2em;
cursor: pointer;
color: var(--blue-075);
padding: 0.3125rem 0.625rem;
}
._navButtons_h3l71_72 button:hover:not(:disabled) {
background-color: var(--white);
border-radius: 50%;
}
._disabledButton_h3l71_100 {
color: var(--neutral-600);
pointer-events: none;
font-size: var(--text-size-4);
}
@media (max-width: 900px) {
._header_h3l71_1 {
background: var(--surface-primary);
position: sticky;
top: 0;
z-index: 1;
}
._dateRange_h3l71_15 ._dateHeader_h3l71_113 {
display: none;
}
._dateRange_h3l71_15 ._mobileDateHeader_h3l71_29 {
display: block;
}
}
:where(html) {
/* ---------------------------- palette ---------------------------- */
--schedule-header: #f7f7f7;
--schedule-content: #fff;
--schedule-blue-400: #0073e6;
--schedule-border: #e6e8e9;
--schedule-background: #e8e8e8;
}
.scheduleHeaderWrapper {
color: inherit;
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: 1.5rem;
width: 100%;
background: #f7f7f7;
background: var(--schedule-header);
}
.scheduleHeaderWrapperCoScreen {
display: flex;
flex-direction: column;
padding: 1.5rem;
padding-top: 0;
background: #fff;
background: var(--schedule-content);
}
@media (min-width: 1440px) {
.scheduleHeaderWrapper {
padding: 2.25rem;
}
}
@media (min-width: 1024px) and (max-width: 1440px) {
.scheduleHeaderWrapper {
padding: 2rem;
}
}
@media (min-width: 480px) and (max-width: 1024px) {
.scheduleHeaderWrapper {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.scheduleHeaderWrapperCoScreen,
.scheduleHeaderWrapper {
padding: 0.5rem;
}
}
/*******************Card color used ******************/
/*****************************************************/
:where(html) {
--sim-color: var(--green-600);
--exams-color: var(--pink-600);
--meeting-color: var(--schedule-blue-600);
--classroom-color: var(--purple-600);
--demonstration-color: var(--orange-600);
--maintenance-color: var(--orange-600);
--other-color: var(--orange-600);
--default-color: var(--neutral-600);
--cancelled-color: var(--neutral-900);
--sim-bg-color: var(--green-750);
--exams-bg-color: var(--pink-750);
--meeting-bg-color: var(--schedule-blue-750);
--classroom-bg-color: var(--purple-750);
--demonstration-bg-color: var(--orange-750);
--maintenance-bg-color: var(--orange-750);
--other-bg-color: var(--orange-750);
--default-bg-color: var(--neutral-750);
--cancelled-bg-color: var(--neutral-900);
}
:where(html) {
--spacing-xs: 0.125rem; /* 2px */
--spacing-sm: 0.25rem; /* 4px */
--spacing-md: 0.5rem; /* 8px */
--spacing-lg: 0.75rem; /* 12px */
--spacing-xl: 1rem; /* 16px */
--spacing-2xl: 1.5rem; /* 24px */
--spacing-3xl: 2rem; /* 32px */
--border-radius-sm: 0.25rem; /* 4px */
--border-radius-md: 0.375rem; /* 6px */
--border-radius-lg: 0.5rem; /* 8px */
--border-radius-xl: 0.75rem; /* 12px */
--border-width: 0.0625rem; /* 1px */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.25rem; /* 20px */
--font-size-xl: 1.5rem; /* 24px */
--font-size-2xl: 1.6rem; /* 25.6px */
--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
--transition-base: 0.2s ease;
--transition-smooth: 0.3s ease-in-out;
}
._coEmptyState_1mj43_1 {
display: flex;
justify-content: space-around;
margin: 10%;
}
._coErrorLoadingTcaDocumentState_jeqi1_1 {
display: flex;
justify-content: space-around;
margin: 10%;
}
._contentWrapper_jeqi1_7 {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
._imageWrapper_jeqi1_14 {
margin-bottom: 0.4rem;
}
._errorMessage_jeqi1_18 {
font-size: 1rem;
color: var(--neutral-700);
}
._extraBoldMessage_jeqi1_23 {
font-weight: bold;
font-size: 1.3rem;
color: var(--black);
}
._coEmptyLicState_11jjr_1 {
display: flex;
justify-content: center;
}
._noLicHeader_11jjr_5 {
display: flex;
justify-content: center;
}
._noLicImage_11jjr_9 {
margin-left: 16%;
}
._schedulesSessionDetailError_1pc5f_1 {
display: flex;
flex-direction: column;
background: var(--neutral-900);
padding: var(--text-size-6);
}
._schedulesSessionDetail_1pc5f_1 {
display: flex;
flex-direction: column;
align-items: flex-start;
background: var(--neutral-900);
}
._schedulesSessionHeader_1pc5f_15 {
display: flex;
align-items: center;
background: var(--neutral-900);
gap: var(--text-size-4);
}
._sessionHeader_1pc5f_22 {
font-weight: var(--font-weight-bolder);
font-size: var(--text-size-4);
line-height: var(--text-size-6);
}
._sessionType_1pc5f_28 {
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
border-radius: var(--Radius-S, 0.25rem);
font-size: var(--text-size-02);
font-weight: var(--font-weight-semibold);
color: var(--green-100);
display: inline-flex;
align-items: center;
}
._infoWrapper_1pc5f_37 {
display: inline-flex;
flex-direction: row;
gap: var(--text-size-02);
}
._badgeContainer_1pc5f_43 {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
._detailBanner_1pc5f_50 {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-size: var(--text-size-01);
font-weight: var(--font-weight-semibold);
gap: 0.3125rem;
line-height: var(--text-size-3);
}
._subBanner_1pc5f_60 {
background-color: var(--yellow-700);
color: var(--yellow-100);
}
@media (max-width: 74.625rem) {
._schedulesSessionHeader_1pc5f_15 {
flex-direction: column;
align-items: flex-start;
gap: 0rem;
}
._sessionHeader_1pc5f_22 {
margin-bottom: 0.5rem;
}
._sessionType_1pc5f_28 {
margin-left: 0;
}
/* Media query for session info */
._sessionInfo_1pc5f_80 {
display: flex;
flex-direction: column;
align-items: flex-start;
}
._iconMargin_1pc5f_85 {
margin-left: 0; /* Remove left margin */
}
._agencyGroup_1pc5f_89 {
display: flex;
flex-direction: column;
align-items: flex-start;
}
._agencyItem_1pc5f_95 {
margin-left: 0; /* Remove left margin */
}
}
._iconText_1pc5f_100 {
display: inline-flex;
align-items: center;
margin-right: 0.25rem;
gap: 0.2rem;
}
._lineStrikeThrough_1pc5f_107 {
text-decoration: line-through;
color: var(--neutral-600);
}
._iconMargin_1pc5f_85 {
margin-left: 0.3125rem;
}
._agencyGroup_1pc5f_89 {
margin-bottom: 0.01rem;
}
._agencyItem_1pc5f_95 {
display: flex;
align-items: center;
}
._noTimeResource_1pc5f_125 {
display: flex;
color: var(--neutral-600);
}
._noAgencies_1pc5f_130 {
display: flex;
color: var(--neutral-600);
align-items: center;
}
._noNotes_1pc5f_136 {
display: flex;
color: var(--neutral-600);
border: 1px solid #e6e8e9;
border: 1px solid var(--Strokes-subtle, #e6e8e9);
border-radius: 0.5rem;
font-size: 16px;
font-style: italic;
font-weight: 400;
padding: 1rem;
}
._sessionTimeResourceInfo_1pc5f_147 {
display: flex;
gap: var(--text-size-3);
color: var(--neutral-400);
margin-top: 0.625rem;
font-weight: var(--font-weight-semibold);
font-size: 1rem;
line-height: var(--text-size-3);
}
._sessionInfo_1pc5f_80 {
display: flex;
gap: var(--text-size-3);
color: var(--neutral-400);
margin-top: 0.625rem;
font-weight: var(--font-weight-semibold);
font-size: 1rem;
line-height: var(--text-size-3);
align-items: baseline;
flex-direction: column;
}
._traineesSection_1pc5f_169,
._attendeesSection_1pc5f_170,
._instructorsSection_1pc5f_171,
._notesSection_1pc5f_172 {
margin-top: 0.9375rem;
font-weight: var(--font-weight-bolder);
}
._traineesSection_1pc5f_169 {
font-size: var(--text-size-1);
font-weight: var(--font-weight-normal);
line-height: var(--text-size-3);
color: var(--neutral-075);
}
/* Apply box-shadow only to traineeCard inside traineesSection */
._traineesSection_1pc5f_169 ._traineeCard_1pc5f_185 {
box-shadow: 0 0.0625rem 1rem 0 var(--neutral-700);
transition: box-shadow 0.3s ease;
}
/* Add hover effect for traineeCard inside traineesSection */
._traineesSection_1pc5f_169 ._traineeCard_1pc5f_185:hover {
box-shadow: 0 0.25rem 1.25rem 0 var(--neutral-600);
}
/* Remove box-shadow for traineeCard inside attendeesSection */
._attendeesSection_1pc5f_170 ._traineeCard_1pc5f_185 {
box-shadow: none;
}
._attendeesSection_1pc5f_170 ._traineeCard_1pc5f_185:hover {
box-shadow: none;
}
._attendeesSectionCount_1pc5f_204,
._traineesSectionCount_1pc5f_205 {
font-size: var(--text-size-2);
font-weight: var(--font-weight-normal);
line-height: var(--text-size-3);
color: var(--neutral-075);
}
._attendeesSection_1pc5f_170 h2,
._traineesSection_1pc5f_169 h2,
._instructorsSection_1pc5f_171 h2,
._notesSection_1pc5f_172 h2 {
font-size: var(--text-size-2);
font-weight: var(--font-weight-bolder);
}
._traineeSubCard_1pc5f_220 {
display: flex;
align-items: center;
margin-top: 0.625rem;
flex-grow: 1;
}
._traineeCard_1pc5f_185 {
display: flex;
align-items: flex-start;
padding: 0.9375rem;
border: 1px solid #e0e0e0;
border-radius: 0.5rem;
margin-top: 0.625rem;
cursor: pointer;
box-shadow: 0 0.0625rem 1rem 0 var(--neutral-700);
transition: box-shadow 0.3s ease;
}
._traineeCard_1pc5f_185:hover {
box-shadow: 0 0.25rem 1.25rem 0 var(--neutral-600);
}
._instructorCard_1pc5f_243 {
display: flex;
align-items: center;
padding: 0.9375rem;
border: 1px solid #e6e8e9;
border-radius: 0.5rem;
margin-top: 0.625rem;
}
._traineeInitials_1pc5f_252,
._instructorInitials_1pc5f_253 {
width: var(--text-size-6);
height: var(--text-size-6);
background: var(--neutral-700);
color: var(--neutral-200);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-size-01);
font-weight: var(--font-weight-bolder);
}
._traineeInfo_1pc5f_266,
._instructorInfo_1pc5f_267 {
margin-left: 0.9375rem;
flex-grow: 1;
font-size: var(--text-size-1);
font-weight: var(--font-weight-bold);
line-height: var(--text-size-3);
}
._traineeName_1pc5f_275,
._instructorName_1pc5f_276 {
font-size: var(--text-size-1);
font-weight: 630;
}
._traineeCompany_1pc5f_281,
._instructorRole_1pc5f_282 {
font-size: var(--text-size-01);
color: var(--neutral-600);
font-weight: var(--font-weight-semibold);
line-height: var(--text-size-2);
}
._traineeStatus_1pc5f_289 {
display: flex;
gap: 0.625rem;
margin-top: 1rem;
}
._traineeTsaTcaStatus_1pc5f_295 {
font-size: var(--text-size-02);
font-weight: var(--font-weight-bold);
line-height: var(--text-size-1);
color: var(--neutral-075);
}
._traineeTsaTcaIconText_1pc5f_302 {
display: inline-flex;
align-items: center;
margin-right: 0.25rem;
}
._statusIcon_1pc5f_308._success_1pc5f_309 {
color: var(--success-color);
}
._statusIcon_1pc5f_308._warning_1pc5f_312 {
color: var(--warning-color);
}
.___sim_1pc5f_316 {
background: var(--green-700);
color: var(--green-200);
}
.___exams_1pc5f_320 {
background: var(--pink-700);
color: var(--pink-200);
}
.___meeting_1pc5f_324 {
background: var(--blue-700);
color: var(--blue-200);
}
.___classroom_1pc5f_328 {
background: var(--purple-700);
color: var(--purple-200);
}
.___demonstration_1pc5f_332 {
background: var(--orange-700);
color: var(--orange-200);
}
.___maintenance_1pc5f_336 {
background: var(--orange-700);
color: var(--orange-200);
}
.___other_1pc5f_340 {
background: var(--orange-700);
color: var(--orange-200);
}
.___default_1pc5f_344 {
background: var(--neutral-700);
color: var(--neutral-200);
}
._userDetailsPanelDialog_1pc5f_349 {
border-radius: var(--radius-3) var(--radius-3) 0 0;
}
._profileHeader_1pc5f_352 {
position: sticky;
top: 0;
z-index: 1;
font-size: var(--text-size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--text-size-3);
color: var(--neutral-400);
background-color: var(--white);
}
._profileHeader_1pc5f_352 p {
color: var(--neutral-075);
font-size: var(--text-size-4);
font-weight: var(--font-weight-bolder);
line-height: var(--text-size-lg);
position: relative;
margin: 0;
font-family: var(--font-family-display);
}
._profileHeader_1pc5f_352 p::after {
content: '';
position: absolute;
bottom: -1.5rem;
left: 0;
right: 0;
height: var(--text-size-4);
width: 100%;
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.5) 100%
);
}
._resHeader_1pc5f_387 {
display: flex;
flex-direction: row;
font-weight: var(--font-weight-semibold);
align-items: center;
}
._notesInnerCard_1pc5f_393 {
display: flex;
align-items: center;
border: 0.0625rem solid #e6e8e9;
border-radius: 0.5rem;
background: var(--white);
}
._notesTextArea_1pc5f_400 {
width: 100%;
border: none;
resize: none;
background: transparent;
font-size: var(--text-size-2);
line-height: 1.5rem;
padding: 1rem;
font-weight: var(--font-weight-normal);
}
._conflict-alert_1pc5f_410 {
background-color: var(--red-700);
color: var(--red-100);
}
/* User Modal Styles */
/* This is the modal that appears when a trainee card clicked */
._userModal_1pc5f_417 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9000;
overflow-y: auto;
}
._userModalCard_1pc5f_431 {
background: white;
border-radius: 0.5rem 0.5rem 0 0;
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.18);
width: calc(40%);
min-width: calc(20rem + 5%);
max-width: calc(100% - 2rem);
display: flex;
flex-direction: column;
overflow-y: auto;
height: calc(80%);
}
@media (max-width: 85.375rem) {
._userModalCard_1pc5f_431 {
width: 80%;
min-width: 40%;
max-width: 95%;
height: 80%;
border-radius: 0.5rem 0.5rem 0 0;
overflow-y: auto;
margin: 2% auto 0 auto;
}
}
@media (max-width: 480px) {
._scheduleUserInfo_q6uod_3 h4 {
margin-bottom: 0;
}
._personalInfo_q6uod_84,
._prerequisites_q6uod_85,
._reservationDetails_q6uod_86,
._accommodationInfo_q6uod_87,
._licenses_q6uod_88 {
margin-bottom: 3.5rem;
gap: 0;
}
._personalInfo_q6uod_84 h4 {
margin-bottom: 0;
}
._infoBundle_q6uod_21 {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
width: 100%;
margin-bottom: 1rem;
}
._infoBundle_q6uod_21:last-of-type {
margin-bottom: 0;
}
._infoBundle_q6uod_21 div {
width: 100%;
}
._infoBundle_q6uod_21 span {
margin-bottom: 0;
}
._status_q6uod_44 {
margin-bottom: 1rem;
}
._status_q6uod_44:last-of-type {
margin-bottom: 0;
}
}
@media (min-width: 480px) {
._scheduleUserInfo_q6uod_3 h4 {
margin-bottom: var(--text-size-1);
}
._infoBundle_q6uod_21 {
justify-content: space-between;
flex-direction: row;
margin-bottom: var(--text-size-1);
}
._infoBundle_q6uod_21 div {
width: 33%;
}
._infoBundle_q6uod_21 span {
margin-bottom: 0.3125rem;
}
._status_q6uod_44 {
margin-bottom: var(--text-size-1);
}
._reservationDetails_q6uod_86 ._infoBundle_q6uod_21 div,
._accommodationInfo_q6uod_87 ._infoBundle_q6uod_21 div {
width: 40%;
}
}
._scheduleUserInfo_q6uod_3 {
height: auto;
display: flex;
flex-direction: column;
margin: 0;
background: white;
border-radius: var(--radius-3) var(--radius-3) 0 0;
}
._scheduleUserInfo_q6uod_3 h4 {
margin-bottom: var(--text-size-1);
font-size: var(--text-size-3);
line-height: 1.2;
font-weight: var(--font-weight-bolder);
color: var(--neutral-075);
font-family: var(--font-family-display);
}
._infoBundle_q6uod_21 {
display: flex;
}
._flexStart_q6uod_25 {
justify-content: flex-start;
}
._infoBundle_q6uod_21 span {
display: block;
color: var(--neutral-400);
font-size: var(--text-size-02);
font-weight: var(--font-weight-semibold);
line-height: var(--text-size-1);
}
._infoBundle_q6uod_21 p {
color: var(--neutral-075);
font-size: var(--text-size-1);
font-weight: var(--font-weight-semibold);
line-height: var(--text-size-3);
}
._status_q6uod_44 {
display: flex;
padding-bottom: var(--text-size-1);
font-size: var(--text-size-1);
font-weight: var(--font-weight-semibold);
line-height: var(--text-size-3);
flex-direction: column;
border-bottom: 1px solid #e6e8e9;
border-bottom: 1px solid var(--Strokes-subtle, #e6e8e9);
}
._status_q6uod_44 p {
margin: 0.5rem 0 0;
font-weight: var(--font-weight-normal);
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--neutral-075);
}
._link_q6uod_63 {
text-decoration: none;
color: var(--schedule-blue-400);
font-size: var(--text-size-1);
font-weight: var(--font-weight-semibold);
line-height: var(--text-size-3);
}
._linkEmailMobile_q6uod_71 {
color: var(--schedule-blue-400);
text-decoration: none;
}
._linkEmailMobile_q6uod_71:visited {
color: var(--schedule-blue-400);
}
._infoBundle_q6uod_21 p {
margin: 0;
}
._personalInfo_q6uod_84,
._prerequisites_q6uod_85,
._reservationDetails_q6uod_86,
._accommodationInfo_q6uod_87,
._licenses_q6uod_88 {
display: flex;
justify-content: stretch;
flex-direction: column;
}
._license_q6uod_88 {
margin-bottom: 0.5rem;
border-bottom: 0.0625rem solid #e6e8e9;
border-bottom: 0.0625rem solid var(--Strokes-subtle, #e6e8e9);
}
._license_q6uod_88 h3 {
margin: 0;
}
._license_q6uod_88 p {
margin: 0.3125rem 0;
}
._viewFile_q6uod_107 {
color: var(--schedule-blue-400);
text-decoration: none;
font-size: var(--text-size-1);
font-weight: var(--font-weight-semibold);
}
._licenseName_q6uod_114 {
display: flex;
flex-direction: row;
}
._licenseContainer_q6uod_119 {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}
._textLeft_q6uod_125 {
justify-self: start;
font-size: var(--text-size-1);
font-weight: var(--font-weight-semibold);
}
._textRight_q6uod_131 {
justify-self: end;
}
._userDocumentPanelDialog_q6uod_135 {
border-radius: var(--radius-3) var(--radius-3) 0 0;
}
._userDocumentPanelDialog_q6uod_135 article {
overflow-y: hidden;
}
._profileDocHeader_q6uod_143 {
position: sticky;
top: 0;
z-index: 1;
font-size: var(--text-size-md);
line-height: var(--text-size-3);
background-color: var(--white);
}
._docHeader_q6uod_152 {
display: flex;
flex-direction: row;
font-weight: var(--font-weight-semibold);
}
._docButton_q6uod_158 {
color: var(--schedule-blue-400);
display: flex;
align-items: center;
gap: 0.25rem;
background: none;
border: none;
cursor: pointer;
font-weight: var(--font-weight-semibold);
font-size: var(--text-size-1);
}
._userModalheader_q6uod_170 {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.625rem;
font-size: 1.1rem;
font-weight: bold;
}
._userClosebutton_q6uod_180 {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
._checkedIn_q6uod_187 {
display: inline-flex;
align-items: center;
font-size: var(--text-size-01);
margin-left: 0.3125rem;
font-weight: var(--font-weight-semibold);
justify-content: center;
padding: 0.1rem 0.25rem;
border-radius: 0.25rem;
}
._checkedInActive_q6uod_198 {
background: var(--green-700);
color: var(--green-100);
}
._checkedInDisabled_q6uod_203 {
background: var(--neutral-700);
color: var(--neutral-200);
}
._resHeader_q6uod_208 {
display: flex;
flex-direction: row;
font-weight: var(--font-weight-semibold);
align-items: center;
font-size: var(--text-size-md);
line-height: var(--text-size-3);
color: var(--neutral-400);
}
._userContent_q6uod_218 {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
padding: calc(0.5rem + 0.125rem) 1rem;
}
._userHeaderDetail_q6uod_226 {
color: var(--neutral-075);
font-size: var(--text-size-4);
font-weight: var(--font-weight-bolder);
line-height: var(--text-size-lg);
position: relative;
margin: 0;
font-family: var(--font-family-display);
}
._userModalheaderContent_q6uod_235 {
position: sticky;
top: 0;
z-index: 2;
display: flex;
padding: calc(0.5rem + 0.125rem) 1rem;
justify-content: space-between;
flex-direction: column;
}
._userInfoContent_q6uod_244 {
width: 100%;
flex: 1;
overflow-y: auto;
padding: 0;
display: flex;
flex-direction: column;
max-height: calc(100% - 6rem);
-webkit-overflow-scrolling: touch;
}
._tcaHead_q6uod_254 {
display: flex;
justify-content: space-between;
}
._etcamodaloverlay_q6uod_259 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9001;
}
._etcaHeader_q6uod_273 {
width: 100%;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.625rem 1.25rem;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
font-size: 1.1rem;
font-weight: var(--font-weight-bold);
}
._etcaModalcontent_q6uod_285 {
width: 100%;
height: 100%;
background-color: white;
overflow: hidden;
display: flex;
flex-direction: column;
}
._etcaModalCard_q6uod_294 {
background: white;
border-radius: 0.5rem 0.5rem 0 0;
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.18);
width: calc(40%);
min-width: calc(20rem + 5%);
max-width: calc(100% - 2rem);
display: flex;
flex-direction: column;
overflow-y: auto;
height: calc(80%);
}
@media (max-width: 85.375rem) {
._etcaModalCard_q6uod_294 {
width: 80%;
min-width: 40%;
max-width: 95%;
height: 80%;
border-radius: 0.5rem 0.5rem 0 0;
overflow-y: auto;
margin: 2% auto 0 auto;
}
}
._clientDocuments_1lftx_1 {
margin-bottom: var(--text-size-1);
}
._clientDocuments_1lftx_1 h4 {
margin-bottom: var(--text-size-1);
font-weight: var(--font-weight-bolder);
color: var(--neutral-075);
}
._documentsList_1lftx_11 {
display: flex;
flex-direction: column;
}
._documentItem_1lftx_16 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.625rem 1rem;
border-bottom: 0.063rem solid var(--schedule-border);
}
._documentItem_1lftx_16:last-child {
border-bottom: 0.063rem solid var(--schedule-border);
}
._documentName_1lftx_28 {
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
._viewFileLink_1lftx_33 {
display: flex;
align-items: center;
gap: 0.5rem;
background: none;
border: none;
color: var(--primary-color);
cursor: pointer;
font-weight: var(--font-weight-semibold);
text-decoration: none;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
transition: background-color 0.2s ease;
}
._viewFileLink_1lftx_33:hover {
background-color: var(--primary-color-light);
text-decoration: underline;
}
._pdfClientDocumentViewer_1npzc_1 {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
}
._clientContainer_1npzc_7 {
flex: 1;
height: 100%;
}
.cobalt-popover-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:var(--z-index-popover);pointer-events:all}.cobalt-popover{position:absolute;z-index:calc(var(--z-index-popover) + 1)}
.cobalt-checkbox{display:flex;flex-direction:column;gap:.125rem}.cobalt-checkbox .cobalt-checkbox-input{display:flex;flex-direction:row;align-items:center}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]{height:1.125rem;width:1.125rem;flex-shrink:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-default);border:.1rem solid var(--stroke-default);cursor:pointer;transition:all var(--animation-duration) ease-in-out;border-radius:.25rem;margin:0}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:hover{border-color:var(--stroke-hover)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:active:not(:disabled):not(:checked):not(:indeterminate),.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:active:hover:not(:disabled):not(:checked):not(:indeterminate){border:2px solid var(--stroke-focus)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:focus-visible{outline:2px solid var(--stroke-focus);outline-offset:1px}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:checked,.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:indeterminate{background-color:var(--button-primary-default);border-color:var(--button-primary-default)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:checked:hover,.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:indeterminate:hover{background-color:var(--button-primary-hover);border:.1rem solid var(--button-primary-hover)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:checked:disabled,.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:indeterminate:disabled{background-color:var(--icon-disabled);border-color:var(--icon-disabled)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:checked.danger,.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:indeterminate.danger{background-color:var(--button-danger-default);border-color:var(--button-danger-default)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:checked.danger:hover,.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:indeterminate.danger:hover{background-color:var(--button-danger-hover);border:.1rem solid var(--button-danger-hover)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox].danger{border:2px solid var(--button-danger-default)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox].danger:hover{border-color:var(--button-danger-hover)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox].danger:active:not(:disabled):not(:checked):not(:indeterminate),.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox].danger:active:hover:not(:disabled):not(:checked):not(:indeterminate){border-color:var(--button-danger-pressed)}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:checked:before{display:flex;background-color:var(--icon-inverse);content:"";height:100%;width:100%;-webkit-mask-image:url('data:image/svg+xml,');mask-image:url('data:image/svg+xml,');-webkit-mask-position:center;mask-position:center;-webkit-mask-size:.75rem .6rem;mask-size:.75rem .6rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:indeterminate:before{display:flex;background-color:var(--icon-inverse);content:"";height:100%;width:100%;-webkit-mask-image:url('data:image/svg+xml,');mask-image:url('data:image/svg+xml,');-webkit-mask-position:center;mask-position:center;-webkit-mask-size:.75rem .6rem;mask-size:.75rem .6rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:disabled{background-color:var(--input-disabled);border:.1rem solid var(--stroke-disabled);cursor:not-allowed}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]:disabled+label{color:var(--text-disabled);cursor:not-allowed}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]+label{color:var(--text-primary);cursor:pointer;justify-content:center;align-self:stretch;font-size:var(--text-size-1);padding-left:.5rem}.cobalt-checkbox .cobalt-checkbox-input input[type=checkbox]+label.visually-hidden{display:none}.cobalt-checkbox .cobalt-checkbox-description{display:flex;flex-flow:row wrap;margin-left:1.7rem;color:var(--text-tertiary);align-self:stretch;font-size:var(--text-size-02)}.cobalt-checkbox .cobalt-checkbox-description.disabled{color:var(--text-disabled)}.cobalt-checkbox .cobalt-checkbox-description.danger{color:var(--text-danger);font-weight:var(--font-weight-bold)}
.cobalt-chip{display:inline-flex;align-items:center;min-width:3.5rem;padding-inline:.75rem;flex-shrink:0;gap:.25rem;background-color:var(--chips-background-off-default);border-radius:.75rem;color:var(--text-primary);font-size:var(--text-size-02);font-weight:var(--font-weight-bold);line-height:1rem;cursor:auto;height:1.5rem;border:1px solid var(--stroke-default)}.cobalt-chip:focus-visible{outline-offset:1px;outline-color:var(--stroke-focus)}.cobalt-chip.cobalt-chip-selectable:not(.cobalt-chip-disabled){cursor:pointer}.cobalt-chip.cobalt-chip-selectable:not(.cobalt-chip-disabled):hover{background-color:var(--chips-background-off-hover)}.cobalt-chip.cobalt-chip-selectable:not(.cobalt-chip-disabled):active,.cobalt-chip.cobalt-chip-selectable:not(.cobalt-chip-disabled):hover:active{background-color:var(--chips-background-off-pressed)}.cobalt-chip.cobalt-chip-selected:not(.cobalt-chip-disabled){background-color:var(--button-secondary-default);color:var(--button-text-secondary);border-color:transparent}.cobalt-chip.cobalt-chip-selected:not(.cobalt-chip-disabled).cobalt-chip-selectable:hover{background-color:var(--button-secondary-hover)}.cobalt-chip.cobalt-chip-selected:not(.cobalt-chip-disabled).cobalt-chip-selectable:active,.cobalt-chip.cobalt-chip-selected:not(.cobalt-chip-disabled).cobalt-chip-selectable:hover:active{background-color:var(--button-secondary-pressed)}.cobalt-chip.cobalt-chip-disabled{background-color:var(--chips-background-off-disabled);color:var(--text-disabled);border-color:var(--stroke-disabled)}.cobalt-chip.cobalt-chip-disabled.cobalt-chip-selected{background-color:var(--chips-background-disabled);color:var(--chips-text-disabled);border-color:transparent}.cobalt-chip.cobalt-chip-dismissible{padding-right:.125rem}.cobalt-chip.cobalt-chip-dismissible .cobalt-chip-dismiss{align-items:center;justify-content:center;border-radius:.75rem;display:flex;height:1.25rem;width:1.25rem}.cobalt-chip.cobalt-chip-dismissible .cobalt-chip-dismiss:focus-visible{outline-color:var(--stroke-focus)}.cobalt-chip.cobalt-chip-dismissible:not(.cobalt-chip-selected) .cobalt-chip-dismiss:hover{background-color:var(--chips-background-off-pressed)}.cobalt-chip.cobalt-chip-dismissible.cobalt-chip-selected,.cobalt-chip.cobalt-chip-dismissible.cobalt-chip-selected .cobalt-chip-dismissible{color:var(--button-text-secondary)}.cobalt-chip.cobalt-chip-dismissible.cobalt-chip-selected .cobalt-chip-dismiss:hover{background-color:var(--chips-background-on-pressed);cursor:pointer}
.cobalt-tooltip{position:absolute;z-index:var(--z-index-popover);visibility:hidden;opacity:0;display:flex;justify-content:center;align-items:center;gap:.5rem;background-color:var(--color-neutral-100);color:var(--text-on-color);padding:.25rem .5rem;border-radius:.25rem;font-size:var(--font-typesize-02);text-align:center;font-weight:var(--font-weight-bold);line-height:1rem;letter-spacing:.01rem;white-space:nowrap;box-shadow:0 1px 32px #00000014;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.cobalt-tooltip:before{content:"";position:absolute;pointer-events:auto;background:transparent}.cobalt-tooltip.tooltip-top:before{top:100%;left:50%;transform:translate(-50%);width:100%;height:.5rem}.cobalt-tooltip.tooltip-left:before{left:100%;top:50%;transform:translateY(-50%);width:.5rem;height:100%}.cobalt-tooltip.tooltip-right:before{right:100%;top:50%;transform:translateY(-50%);width:.5rem;height:100%}.cobalt-tooltip.tooltip-bottom:before{bottom:100%;left:50%;transform:translate(-50%);width:100%;height:.5rem}.cobalt-tooltip[aria-hidden=false]{opacity:1;visibility:visible;transform:translate(0);pointer-events:auto}
.cobalt-dropdown-item{display:flex;gap:.5rem;padding:.625rem .75rem;min-height:2.5rem;cursor:pointer;transition:background-color .2s ease}.cobalt-dropdown-item.focused{background:var(--button-ghost-hover)}.cobalt-dropdown-item:hover:not(.disabled){background:var(--button-ghost-hover)}.cobalt-dropdown-item:active:not(.disabled){background:var(--button-ghost-pressed)}.cobalt-dropdown-item.selected:not(.multiselect){background:var(--button-primary-default);color:var(--text-on-color)}.cobalt-dropdown-item.selected:not(.multiselect):hover{background:var(--button-primary-default)}.cobalt-dropdown-item .dropdown-placeholder{overflow:hidden;color:var(--text-secondary);text-overflow:ellipsis;font-family:var(--font-family-text);font-size:var(--text-size-1);font-style:normal;line-height:1.25rem}.cobalt-dropdown-item .dropdown-selected-value{overflow:hidden;color:var(--text-primary);text-overflow:ellipsis;font-family:var(--font-family-text);font-size:var(--text-size-1);font-style:normal;line-height:1.25rem}.cobalt-dropdown-item.disabled{cursor:not-allowed}.cobalt-dropdown-item .content{display:flex;flex-direction:column;align-items:flex-start;flex:1;gap:.25rem;word-break:break-word}.cobalt-dropdown-item .content .label{color:var(--text-primary);font-family:var(--font-family-text);font-size:var(--text-size-1);font-style:normal;line-height:1.25rem}.cobalt-dropdown-item .content .label.disabled{color:var(--text-disabled)}.cobalt-dropdown-item .content .label.selected:not(.multiselect){color:var(--text-on-color);font-weight:var(--font-weight-bold)}.cobalt-dropdown-item .content .secondary-info{color:var(--text-secondary);font-family:var(--font-family-text);font-size:var(--text-size-02);font-style:normal;line-height:1rem;font-weight:400}.cobalt-dropdown-item .content .secondary-info.selected:not(.multiselect){color:var(--text-on-color)}.cobalt-dropdown-item .icons .clear-icon{cursor:pointer;color:var(--text-secondary)}
.cobalt-dropdown{display:flex;flex-direction:column;position:relative;cursor:pointer}.cobalt-dropdown.filterable{cursor:text}.cobalt-dropdown .dropdown-wrapper{position:relative;display:flex;flex-direction:column}.cobalt-dropdown .dropdown{display:flex;flex-direction:row;align-items:center;border-radius:.5rem;outline:1px solid var(--stroke-default);background:var(--input-default);color:var(--text-primary);min-height:2rem}.cobalt-dropdown .dropdown .content-wrapper{display:flex;flex:1;flex-direction:row;justify-content:space-between;gap:.125rem;width:100%}.cobalt-dropdown .dropdown .content-wrapper .display-value{display:flex;flex-flow:row wrap;width:100%;gap:.25rem}.cobalt-dropdown .dropdown .content-wrapper input{border:none;flex:1;min-width:5rem;padding:0;width:100%}.cobalt-dropdown .dropdown .content-wrapper input:focus{outline:none}.cobalt-dropdown .dropdown:has(.selected-chips){align-items:flex-start}.cobalt-dropdown .dropdown:focus-within:not(.dropdown-disabled){outline:2px solid var(--stroke-focus)}.cobalt-dropdown .dropdown:hover:not(.dropdown-disabled):not(.dropdown-danger){outline-color:var(--stroke-hover)}.cobalt-dropdown .dropdown.dropdown-danger{outline:2px solid var(--stroke-danger)}.cobalt-dropdown .dropdown.dropdown-danger:hover{outline-color:var(--stroke-danger-hover)}.cobalt-dropdown .dropdown.dropdown-disabled{background:var(--input-disabled);outline-color:var(--stroke-disabled);cursor:not-allowed;color:var(--text-disabled)}.cobalt-dropdown .dropdown.dropdown-disabled .dropdown-selected-value{color:var(--text-disabled)}.cobalt-dropdown .dropdown[aria-expanded=true]:hover:not(.dropdown-disabled):not(.dropdown-danger){outline-color:var(--stroke-focus)}.cobalt-dropdown .selected-chips{display:flex;flex-wrap:wrap;gap:.5rem}.cobalt-dropdown .selected-chips .chip-count{display:none}.cobalt-dropdown .dropdown-selected-value{font-family:var(--font-family-text);font-size:var(--text-size-1);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.cobalt-dropdown .dropdown-placeholder{overflow:hidden;color:var(--text-tertiary);text-overflow:ellipsis;font-family:var(--font-family-text);font-size:var(--text-size-1);font-style:normal;line-height:1.25rem}.cobalt-dropdown .dropdown-small{padding:0 .75rem}.cobalt-dropdown .dropdown-medium{min-height:2.5rem;padding:.625rem .75rem}.cobalt-dropdown .is-multiselect{padding:.5rem .75rem}.cobalt-dropdown .is-multiselect .dropdown-placeholder{line-height:1.5rem}.cobalt-dropdown .is-multiselect .icons{margin-top:.125rem}.cobalt-dropdown .has-overflow .content-wrapper .display-value{flex-flow:row nowrap}.cobalt-dropdown .has-overflow .selected-chips{align-items:center;flex-wrap:nowrap;overflow:hidden}.cobalt-dropdown .has-overflow .selected-chips .chip-count{display:flex;position:absolute;visibility:hidden}.cobalt-dropdown .has-overflow .selected-chips .chip-count.visible{position:relative;visibility:visible}.cobalt-dropdown .dropdown.dropdown-disabled .icons svg{color:var(--icon-disabled)}.cobalt-dropdown .icons{align-items:center;display:flex;flex-direction:row;flex-shrink:0;gap:.25rem;height:1.25rem;margin-left:.5rem}.cobalt-dropdown .icons.leading{padding-left:.75rem;padding-right:0}.cobalt-dropdown .icons .clear-icon{width:1rem;height:1rem;color:var(--icon-tertiary);cursor:pointer}.cobalt-dropdown .icons .clear-icon:focus-visible{border-radius:.25rem;outline:2px solid var(--stroke-focus)}.cobalt-dropdown .icons .chevron-icon{width:1rem;height:1rem;transition:transform .3s ease-in-out;transform:rotate(180deg)}.cobalt-dropdown .icons .danger-icon{color:var(--icon-danger)}.cobalt-dropdown .dropdown[aria-expanded=true] .chevron-icon{transform:rotate(0)}.cobalt-dropdown-menu{list-style-type:none;padding:0;margin-inline:0;background-color:var(--surface-primary);inset:unset;max-height:12rem;overflow-y:auto;border:none;margin-block:0;padding-inline:0;border-radius:.5rem;box-shadow:0 1px 32px #0000001a}
.cardItem {
margin-bottom: var(--text-size-3);
cursor: pointer;
border: 0.0625rem solid var(--schedule-border);
border-radius: 0.5rem;
}
.cardItem:last-child {
margin-bottom: 0;
}
.cardItem p {
color: var(--neutral-600);
font-size: var(--text-size-1);
font-weight: var(--font-weight-semibold);
}
.item {
margin-right: 0.5rem;
}
.item:last-child {
margin-right: 0;
}
.headerText {
display: flex;
width: 100%;
flex-direction: column;
}
.headerText h3 {
font-size: var(--text-size-3);
font-weight: var(--font-weight-bolder);
line-height: var(--text-size-4);
}
.headerText .sessionInfo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-right: var(--text-size-3);
height: var(--text-size-2);
}
.headerText p {
font-size: var(--text-size-1);
font-weight: var(--font-weight-semibold);
line-height: var(--text-size-3);
}
.iconText {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.iconText + .iconText {
margin-left: 1.875rem;
}
.spWrapper {
gap: 0.4rem;
display: flex;
color: var(--neutral-400);
}
.headerWrapper {
color: var(--neutral-400) !important;
}
.sessionNameWrapper {
color: var(--neutral-075);
font-size: var(--text-size-3);
font-weight: var(--font-weight-bolder);
line-height: var(--text-size-4);
}
.sessionNameWrapper.lineThrough {
text-decoration: line-through;
color: var(--neutral-600);
}
.lineThrough {
text-decoration: line-through;
color: var(--neutral-600);
}
.centerAlign {
display: flex;
align-items: center;
gap: 3rem;
}
.title {
font-size: var(--text-size-3);
}
.subtitle {
color: var(--neutral-600);
font-size: var(--text-size-1);
}
.headerSession {
color: var(--neutral-600);
}
.sessionCard__sim {
background-color: var(--green-400);
}
.sessionCard__exams {
background-color: var(--pink-400);
}
.sessionCard__meeting {
background-color: var(--schedule-blue-400);
}
.sessionCard__classroom {
background-color: var(--purple-400);
}
.sessionCard__demonstration {
background-color: var(--orange-400);
}
.sessionCard__maintenance {
background-color: var(--orange-400);
}
.sessionCard__other {
background-color: var(--orange-400);
}
.sessionCard__default {
background-color: var(--neutral-700);
}
.co_card__highlight {
border: 0.125rem solid var(--red-400);
}
.co_card__notify {
border: 0.125rem solid var(--blue-400);
}
.session__highlight {
border: 0.125rem solid var(--red-400);
}
.session__notify {
border: 0.125rem solid var(--blue-400);
}
.banner {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-size: var(--text-size-01);
font-weight: var(--font-weight-semibold);
gap: 0.3125rem;
line-height: var(--text-size-3);
}
.conflict-alert {
background-color: var(--red-700);
color: var(--red-100);
}
.sub-banner {
background-color: var(--yellow-700);
color: var(--yellow-100);
}
.notificationIndicator {
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background-color: var(--blue-400);
aspect-ratio: 1;
}
.infoBar {
display: flex;
align-items: center;
gap: var(--text-size-02);
}
/* Responsive behavior - when width is 35rem or less */
@media (max-width: 35rem) {
.headerText .sessionInfo {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding-right: var(--text-size-3);
height: auto;
}
}
._sessionUnitContainer_a6fjq_1 {
display: flex;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
transition: all 0.2s ease-in-out;
cursor: pointer;
background-color: white;
}
._cardContainerWrapper_a6fjq_11 {
display: flex;
flex-direction: row;
width: 100%;
margin: 0.75rem;
}
._verticalAccentLine_a6fjq_17 {
width: 0.375rem;
border-radius: 0.1875rem;
transition: background-color 0.3s ease;
flex-shrink: 0;
}
._verticalAccentLineDefault_a6fjq_24 {
background-color: var(--info-color);
}
._verticalAccentLineSuccess_a6fjq_28 {
background-color: var(--success-color);
}
._verticalAccentLineWarning_a6fjq_32 {
background-color: var(--warning-color);
}
._verticalAccentLineError_a6fjq_36 {
background-color: var(--danger-color);
}
._verticalAccentLineInfo_a6fjq_40 {
background-color: var(--info-color);
}
._cardContainer_a6fjq_11 {
flex: 1;
background-color: white;
border-left: none;
display: flex;
flex-direction: column;
}
._cardContent_a6fjq_52 {
flex: 1;
display: flex;
flex-direction: column;
padding-left: 0.75rem;
}
._cardHeader_a6fjq_59 {
margin-bottom: 1rem;
}
._primaryContent_a6fjq_63 {
display: flex;
flex-direction: column;
}
._primaryLabelRow_a6fjq_68 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
._primaryLabel_a6fjq_68 {
font-size: 0.75rem;
font-weight: 600;
color: var(--neutral-400);
letter-spacing: 0.03125rem;
}
._primaryLabelRight_a6fjq_83 {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
._secondaryContentRow_a6fjq_91 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
._secondaryContent_a6fjq_91 .lineThrough {
text-decoration: line-through;
}
._cardDetails_a6fjq_102 {
display: flex;
flex-direction: row;
gap: 3rem;
}
@media (max-width: 48rem) {
._sessionUnitContainer_a6fjq_1 {
margin-bottom: 0.375rem;
}
._cardHeader_a6fjq_59 {
padding: 0.625rem 0.75rem 0.375rem 0.75rem;
}
._cardDetails_a6fjq_102 {
padding: 0.625rem 0.75rem;
}
._primaryLabel_a6fjq_68 {
font-size: 0.6875rem;
}
._secondaryContent_a6fjq_91 {
font-size: 0.9375rem;
}
._primaryLabelRight_a6fjq_83 {
gap: 0.25rem;
}
}
._sessionUnitContainer_a6fjq_1:disabled,
._sessionUnitContainer_a6fjq_1[aria-disabled='true'] {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
._scheduleCardContainer_zbuqq_1 {
display: flex;
flex-direction: column;
height: auto;
overflow: hidden;
}
._fixedHeader_zbuqq_7 {
position: sticky;
top: 0;
z-index: 10;
flex-shrink: 0;
}
._scrollableContent_zbuqq_13 .sessionsContainer {
flex: 1;
overflow-y: auto;
}
._alertDec_zbuqq_17 {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
._scheduleHeaderContainer_zbuqq_23 {
background: var(--neutral-900);
width: 100%;
}
._scheduleHeader_zbuqq_23 {
margin-bottom: var(--text-size-3);
}
._scheduleHeader_zbuqq_23 h2 {
font-size: var(--text-size-4);
font-weight: var(--font-weight-bolder);
line-height: var(--text-size-6);
}
._titleRow_zbuqq_37 {
display: flex;
margin-bottom: 0.25rem;
}
._dateTimeRow_zbuqq_42 {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: var(--font-weight-normal);
}
._dateTimeRow_zbuqq_42 p {
margin: 0;
font-size: var(--text-size-1);
color: var(--neutral-075);
}
._trainingLocalTime_zbuqq_55 {
color: var(--neutral-200);
font-size: var(--text-size-xs);
font-weight: var(--font-weight-bold);
line-height: 1rem;
display: flex;
height: var(--text-size-3);
padding: 0.7rem 0.25rem;
align-items: center;
border-radius: 0.25rem;
background-color: var(--neutral-700);
margin-left: auto;
}
._scheduleAlert_zbuqq_69 {
display: flex;
align-items: center;
background: var(--yellow-800);
padding: 0.625rem;
border-radius: 0.3125rem;
font-size: var(--text-size-1);
font-weight: var(--font-weight-bold);
color: var(--neutral-075);
}
._scheduleAlert_zbuqq_69 p {
margin: 0.625rem;
}
._alertDec_zbuqq_17 {
font-weight: var(--font-weight-semibold);
line-height: var(--text-size-3);
}
._scheduleCalendarHeader_zbuqq_87 {
margin-left: 2.5rem;
}
._scheduleNotificationCoScreen_zbuqq_90 {
display: flex;
padding-top: 1rem;
padding-bottom: 0rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
/* ==========================================================================
MAIN CONTAINER STYLES
========================================================================== */
._calendarContainer_juwvb_4 {
width: 100%;
margin: 0 auto;
flex-direction: column;
height: 100%;
}
._calendarContainerEmpty_juwvb_11 {
margin-bottom: 0;
}
/* ==========================================================================
HEADER STYLES
========================================================================== */
._calendarHeader_juwvb_18 {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
margin-bottom: var(--spacing-xl);
}
._calendarHeaderEmpty_juwvb_26 {
margin-bottom: 0 !important;
}
._monthTitleWrapper_juwvb_30 {
position: relative;
display: flex;
align-items: center;
}
._monthTitleButton_juwvb_36 {
background: none;
border: none;
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--border-radius-md);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--spacing-md);
transition: background-color var(--transition-base);
}
._monthTitleButtonDisabled_juwvb_48 {
cursor: not-allowed;
opacity: 0.6;
}
._monthTitle_juwvb_30 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin: 0;
color: var(--neutral-075);
}
._expandIcon_juwvb_60 {
transition: transform var(--transition-base);
color: var(--neutral-075);
}
._expandIconOpen_juwvb_65 {
transform: rotate(180deg);
}
._expandIconDisabled_juwvb_69 {
opacity: 0.6;
}
._calendarDropdown_juwvb_73 {
position: absolute;
top: 100%;
z-index: 1000;
border-radius: var(--border-radius-xl);
}
._todayButton_juwvb_80 {
color: var(--blue-400);
/* background: none;
border: none; */
padding: var(--spacing-md) var(--spacing-xl);
cursor: pointer;
font-size: var(--font-size-base);
display: flex;
align-items: center;
gap: var(--spacing-sm);
transition: background-color var(--transition-base);
font-weight: var(--font-weight-bold);
border-radius: var(--border-radius-md);
}
/* ==========================================================================
SESSIONS CONTAINER
========================================================================== */
._sessionsContainer_juwvb_98 {
display: flex;
flex-direction: column;
padding: var(--spacing-xl) 0;
overflow-y: auto;
transition: height var(--transition-base);
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
._sessionsContainerEmpty_juwvb_108 {
padding: 0 !important;
}
/* ==========================================================================
EMPTY STATE STYLES
========================================================================== */
._emptyScheduleContainer_juwvb_115 {
display: flex;
flex-direction: column;
}
._emptyScheduleContainer_juwvb_115 ._daySection_juwvb_120 {
border-radius: var(--border-radius-lg);
margin-bottom: var(--spacing-xl);
}
/* ==========================================================================
MONTH SECTION STYLES
========================================================================== */
._monthSection_juwvb_128,
._daySection_juwvb_120 {
scroll-snap-align: start;
scroll-snap-stop: always;
}
._monthHeader_juwvb_134 {
display: flex;
align-items: flex-end;
margin-bottom: var(--spacing-xl);
overflow: hidden;
border-radius: var(--border-radius-md);
position: relative;
padding: var(--spacing-md);
margin-top: var(--spacing-3xl);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
._monthHeaderWithDays_juwvb_148 {
height: 6rem;
min-height: 6rem;
}
._monthHeaderEmpty_juwvb_153 {
opacity: 0.4;
}
._monthHeaderTitle_juwvb_157 {
position: relative;
z-index: 2;
margin: 0;
font-weight: var(--font-weight-bold);
text-align: left;
transition: all var(--transition-smooth);
}
._monthHeaderTitleWithDays_juwvb_166 {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
}
._monthHeaderOverlay_juwvb_171 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.1) 0%,
rgba(0, 0, 0, 0.2) 50%,
rgba(0, 0, 0, 0.1) 100%
);
z-index: 1;
pointer-events: none;
}
/* ==========================================================================
DAY SECTION STYLES
========================================================================== */
._dayHeader_juwvb_190 {
padding-top: var(--spacing-xl);
}
._dayTitle_juwvb_194 {
margin: 0;
font-size: var(--size-4);
font-weight: var(--font-weight-bold);
color: var(--neutral-075);
line-height: var(--Line-height-Label, var(--size-4));
}
._sessionsList_juwvb_202 {
display: flex;
flex-direction: column;
padding-top: var(--spacing-xl);
}
._noEventsMessage_juwvb_208 {
color: var(--neutral-400);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
line-height: var(--size-4);
}
._noSessions_juwvb_215 {
padding: var(--spacing-lg) 0;
font-size: var(--font-size-sm);
color: var(--neutral-400);
font-style: italic;
}
/* ==========================================================================
SESSION CARD STYLES
========================================================================== */
._cardItem_juwvb_225 {
margin-bottom: var(--text-size-3);
cursor: pointer;
border: var(--border-width) solid var(--schedule-border);
border-radius: var(--border-radius-lg);
}
._cardItem_juwvb_225:last-child {
margin-bottom: 0;
}
._cardItem_juwvb_225 p {
color: var(--neutral-600);
font-size: var(--text-size-1);
font-weight: var(--font-weight-semibold);
}
._sessionCard_juwvb_242 {
border: var(--border-width) solid var(--schedule-border);
border-radius: var(--border-radius-md);
padding: var(--spacing-xl);
transition: box-shadow var(--transition-base);
}
._sessionCard_juwvb_242:hover {
box-shadow: var(--shadow-sm);
}
._sessionHeader_juwvb_253 {
display: flex;
align-items: center;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-md);
flex-wrap: wrap;
}
._sessionType_juwvb_261 {
font-size: var(--font-size-xs);
color: var(--neutral-600);
font-weight: var(--font-weight-semibold);
background: var(--neutral-100);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-sm);
}
._sessionTitle_juwvb_270 {
margin: 0;
font-size: var(--font-size-base);
color: var(--neutral-600);
flex: 1;
}
._sessionDetails_juwvb_277 {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
._sessionTime_juwvb_284,
._sessionLocation_juwvb_285 {
font-size: var(--font-size-sm);
color: var(--neutral-600);
display: flex;
align-items: center;
gap: var(--spacing-md);
}
/* ==========================================================================
SESSION HELPER STYLES
========================================================================== */
._headerWrapper_juwvb_296 {
color: var(--neutral-400) !important;
}
._lineThrough_juwvb_300 {
text-decoration: line-through;
color: var(--neutral-600);
}
._sessionNameWrapper_juwvb_305 {
color: var(--neutral-075);
font-size: var(--text-size-3);
font-weight: var(--font-weight-bolder);
line-height: var(--text-size-4);
}
._centerAlign_juwvb_312 {
display: flex;
align-items: center;
gap: var(--spacing-3xl);
}
._spWrapper_juwvb_318 {
gap: 0.4rem;
display: flex;
color: var(--neutral-400);
}
._iconText_juwvb_324 {
display: inline-flex;
align-items: center;
gap: var(--spacing-md);
}
._iconText_juwvb_324 + ._iconText_juwvb_324 {
margin-left: 1.875rem;
}
/* ==========================================================================
BANNER AND NOTICE STYLES
========================================================================== */
._banner_juwvb_337 {
display: inline-flex;
align-items: center;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-sm);
font-size: var(--text-size-01);
font-weight: var(--font-weight-semibold);
gap: 0.3125rem;
line-height: var(--text-size-3);
}
._sub-banner_juwvb_348 {
background-color: var(--yellow-700);
color: var(--yellow-100);
}
._changeNotice_juwvb_352 {
font-size: 1rem;
color: var(--neutral-400);
display: flex;
align-items: center;
gap: 0.375rem;
}
._learnMoreLink_juwvb_360 {
color: var(--schedule-blue-400);
text-decoration: underline;
margin-left: var(--spacing-sm);
text-decoration-style: solid;
pointer-events: auto;
background: none;
border: none;
cursor: pointer;
font-size: inherit;
padding: 0;
}
/* ==========================================================================
END OF DATA SECTION
========================================================================== */
._eodSection_juwvb_376 {
display: flex;
padding-top: 1.5rem;
align-items: flex-start;
gap: var(--spacing-3xl);
align-self: stretch;
font-size: var(--font-size-base);
font-style: normal;
font-weight: var(--font-weight-bold);
margin: var(--spacing-3xl) 0;
border-top: var(--border-width) solid var(--neutral-750);
color: var(--neutral-400);
}
._eodSectionEmpty_juwvb_390 {
display: flex;
align-items: flex-start;
gap: var(--spacing-3xl);
align-self: stretch;
font-size: var(--font-size-base);
font-style: normal;
font-weight: var(--font-weight-bold);
margin: var(--spacing-3xl) 0;
color: var(--neutral-400);
}
/* ==========================================================================
SESSION TYPE STYLES
========================================================================== */
._pilotSessionCard__sim_juwvb_405 {
background-color: var(--sim-color);
}
._pilotSessionCard__exams_juwvb_409 {
background-color: var(--exams-color);
}
._pilotSessionCard__default_juwvb_413 {
background-color: var(--schedule-blue-400);
}
/* ==========================================================================
RESPONSIVE DESIGN
========================================================================== */
@media (max-width: 768px) {
._calendarContainer_juwvb_4 {
padding: var(--spacing-xl);
}
._monthTitleWrapper_juwvb_30 {
justify-content: center;
}
._calendarDropdown_juwvb_73 {
left: 50%;
transform: translateX(-50%);
}
._monthHeaderWithDays_juwvb_148 {
height: 4.0625rem;
min-height: 4.0625rem;
}
._monthHeaderEmpty_juwvb_153 {
height: 2.5rem;
min-height: 2.5rem;
opacity: 0.4;
}
._monthHeaderTitleWithDays_juwvb_166 {
font-size: 1.4rem;
letter-spacing: 0.075rem;
}
._monthHeaderTitleEmpty_juwvb_449 {
font-size: 1.2rem;
letter-spacing: 0.05rem;
}
._calendarHeader_juwvb_18 {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-xl);
background-color: var(--schedule-content);
position: sticky;
top: 0;
z-index: 10;
}
._monthTitle_juwvb_30 {
text-align: center;
order: -1;
}
._sessionHeader_juwvb_253 {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-md);
}
._sessionDetails_juwvb_277 {
flex-direction: column;
}
._centerAlign_juwvb_312 {
gap: var(--spacing-xl);
}
}
@media (max-width: 480px) {
._monthHeaderWithDays_juwvb_148 {
height: 3.4375rem; /* 55px */
min-height: 3.4375rem;
}
._monthHeaderEmpty_juwvb_153 {
height: 2.1875rem; /* 35px */
min-height: 2.1875rem;
opacity: 0.4;
}
._monthHeaderTitleWithDays_juwvb_166 {
font-size: 1.2rem;
letter-spacing: 0.0625rem;
}
._monthHeaderTitleEmpty_juwvb_449 {
font-size: 1.1rem;
letter-spacing: 0.03125rem;
}
._centerAlign_juwvb_312 {
gap: var(--spacing-lg);
}
._iconText_juwvb_324 + ._iconText_juwvb_324 {
margin-left: var(--spacing-xl);
}
}
@keyframes cobalt-loader-circular-svg{0%{transform:rotate(-50deg)}to{transform:rotate(310deg)}}@keyframes cobalt-loader-circular-circle{0%{stroke-dashoffset:280;transform:rotate(0)}50%{stroke-dashoffset:140;transform:rotate(180deg)}to{stroke-dashoffset:280;transform:rotate(360deg)}}.cobalt-loader-circular{display:inline-flex;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cobalt-loader-circular.cobalt-loader-circular-size-small{height:20px;width:20px}.cobalt-loader-circular.cobalt-loader-circular-size-medium{height:40px;width:40px}.cobalt-loader-circular.cobalt-loader-circular-size-large{width:4.6505rem;height:4.589rem}.cobalt-loader-circular.cobalt-loader-circular-indeterminate svg{animation:1.5s linear infinite cobalt-loader-circular-svg;transform:rotate(-50deg)}.cobalt-loader-circular.cobalt-loader-circular-indeterminate circle{display:block;animation:1.5s infinite both cobalt-loader-circular-circle;fill:transparent;stroke:var(--stroke-focus);stroke-dasharray:283;stroke-dashoffset:280;stroke-width:12px;transform-origin:50% 50%}.cobalt-loader-circular.cobalt-loader-circular-determinate svg{display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;transform:rotate(-90deg)}.cobalt-loader-circular.cobalt-loader-circular-determinate svg circle{stroke:var(--stroke-focus)}
.cobalt-button{color:var(--text-on-color);display:inline-flex;gap:.5rem;justify-content:center;align-items:center;border-radius:.5rem;font-weight:600}.cobalt-button.cobalt-button-x-small{padding:.25rem 1rem;height:1.5rem;border-radius:.25rem}.cobalt-button.cobalt-button-x-small.cobalt-button-icon-only{width:1.5rem}.cobalt-button.cobalt-button-small{padding:.375rem 1rem;height:2rem;border-radius:.5rem}.cobalt-button.cobalt-button-small.cobalt-button-icon-only{width:2rem}.cobalt-button.cobalt-button-medium{padding:.5rem 1rem;height:2.5rem;border-radius:.5rem}.cobalt-button.cobalt-button-medium.cobalt-button-icon-only{width:2.5rem}.cobalt-button.cobalt-button-icon-only{padding:0}.cobalt-button.cobalt-button-primary{background-color:var(--button-primary-default)}.cobalt-button.cobalt-button-primary:hover{background-color:var(--button-primary-hover)}.cobalt-button.cobalt-button-primary:active:not(:disabled),.cobalt-button.cobalt-button-primary:hover:active:not(:disabled){background-color:var(--button-primary-pressed)}.cobalt-button.cobalt-button-primary:focus-visible:not(:disabled){outline-offset:1px}.cobalt-button.cobalt-button-secondary{background-color:var(--button-secondary-default);color:var(--button-text-secondary)}.cobalt-button.cobalt-button-secondary:hover{background-color:var(--button-secondary-hover)}.cobalt-button.cobalt-button-secondary:active:not(:disabled),.cobalt-button.cobalt-button-secondary:hover:active:not(:disabled){background-color:var(--button-secondary-pressed)}.cobalt-button.cobalt-button-secondary:focus-visible:not(:disabled){outline-offset:1px}.cobalt-button.cobalt-button-tertiary{background-color:transparent;border:2px solid var(--button-tertiary-default);color:var(--button-tertiary-default)}.cobalt-button.cobalt-button-tertiary:hover{border-color:var(--button-tertiary-hover);color:var(--button-tertiary-hover)}.cobalt-button.cobalt-button-tertiary:active:not(:disabled),.cobalt-button.cobalt-button-tertiary:hover:active:not(:disabled){border-color:var(--button-tertiary-pressed);color:var(--button-tertiary-pressed)}.cobalt-button.cobalt-button-tertiary:focus-visible:not(:disabled){outline-offset:1px}.cobalt-button.cobalt-button-primary-danger{background-color:var(--button-danger-default)}.cobalt-button.cobalt-button-primary-danger:hover{background-color:var(--button-danger-hover)}.cobalt-button.cobalt-button-primary-danger:active:not(:disabled),.cobalt-button.cobalt-button-primary-danger:hover:active:not(:disabled){background-color:var(--button-danger-pressed)}.cobalt-button.cobalt-button-primary-danger:focus-visible:not(:disabled){outline-offset:1px}.cobalt-button.cobalt-button-tertiary-danger{background-color:transparent;border:2px solid var(--button-danger-default);color:var(--button-danger-default)}.cobalt-button.cobalt-button-tertiary-danger:hover{border-color:var(--button-danger-hover);color:var(--button-danger-hover)}.cobalt-button.cobalt-button-tertiary-danger:active:not(:disabled),.cobalt-button.cobalt-button-tertiary-danger:hover:active:not(:disabled){border-color:var(--button-danger-pressed);color:var(--button-danger-pressed)}.cobalt-button.cobalt-button-tertiary-danger:focus-visible:not(:disabled){outline-offset:1px}.cobalt-button.cobalt-button-ghost{background-color:transparent}.cobalt-button.cobalt-button-ghost:not(:disabled){color:var(--text-interactive)}.cobalt-button.cobalt-button-ghost:not(:disabled).cobalt-button-icon-only{color:var(--icon-primary)}.cobalt-button.cobalt-button-ghost:not(:disabled):hover{background-color:var(--button-ghost-hover)}.cobalt-button.cobalt-button-ghost:not(:disabled):active,.cobalt-button.cobalt-button-ghost:not(:disabled):hover:active{background-color:var(--button-ghost-pressed)}.cobalt-button.cobalt-button-ghost:not(:disabled):focus-visible{outline-offset:1px}.cobalt-button.cobalt-button-ghost:disabled{color:var(--text-disabled)}.cobalt-button.cobalt-button-ghost-danger{background-color:var(--button-ghost-default);color:var(--red-400)}.cobalt-button.cobalt-button-ghost-danger:not(:disabled):hover{background-color:var(--button-ghost-hover)}.cobalt-button.cobalt-button-ghost-danger:not(:disabled):active,.cobalt-button.cobalt-button-ghost-danger:not(:disabled):hover:active{background-color:var(--button-ghost-pressed)}.cobalt-button.cobalt-button-ghost-danger:not(:disabled):focus-visible{outline-offset:1px}.cobalt-button.cobalt-button-ghost-danger:not(:disabled).cobalt-button-icon-only{color:var(--icon-primary)}.cobalt-button.cobalt-button-ghost-danger:not(:disabled).cobalt-button-icon-only:hover{background-color:var(--button-danger-default);color:var(--text-on-color)}.cobalt-button.cobalt-button-ghost-danger:not(:disabled).cobalt-button-icon-only:active,.cobalt-button.cobalt-button-ghost-danger:not(:disabled).cobalt-button-icon-only:hover:active{background-color:var(--button-danger-hover);color:var(--text-on-color)}.cobalt-button.cobalt-button-ghost-danger:disabled{color:var(--text-disabled)}.cobalt-button.cobalt-button-tertiary-danger:disabled,.cobalt-button.cobalt-button-tertiary:disabled{border-color:var(--button-disabled-tertiary);color:var(--text-disabled)}.cobalt-button.cobalt-button-primary-danger:disabled,.cobalt-button.cobalt-button-primary:disabled,.cobalt-button.cobalt-button-secondary:disabled{background-color:var(--button-disabled-default);color:var(--text-disabled)}
.cobalt-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--surface-scrim);z-index:var(--z-index-modal)}.cobalt-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--surface-secondary);box-shadow:0 1px 32px #00000014;z-index:calc(var(--z-index-modal) + 1);max-width:90%;max-height:90%;border-radius:.5rem;display:flex;flex-direction:column}.cobalt-modal:focus-visible{outline:none}.cobalt-modal.cobalt-modal-small{max-width:25rem;min-width:25rem;min-height:12.5rem;max-height:80vh}.cobalt-modal.cobalt-modal-medium{max-width:40rem;min-width:40rem;min-height:22.5rem;max-height:80vh}.cobalt-modal.cobalt-modal-large{height:80vh;width:80vw}.cobalt-modal .cobalt-modal-header{display:flex;flex-direction:column;justify-content:space-between;gap:.25rem;padding:0 .5rem 2rem 1.5rem;position:sticky;top:0}.cobalt-modal .cobalt-modal-header .cobalt-modal-header-description{color:var(--text-primary)}.cobalt-modal .cobalt-modal-header .cobalt-modal-header-titles{display:flex;flex-direction:row;justify-content:space-between;gap:1.5rem}.cobalt-modal .cobalt-modal-header .cobalt-modal-header-titles .cobalt-modal-header-content{display:flex;flex-direction:column;gap:.12rem;margin-top:1.25rem}.cobalt-modal .cobalt-modal-header .cobalt-modal-header-titles .cobalt-modal-header-content h2{font-size:1.5rem;font-weight:700;line-height:2rem;color:var(--text-primary);margin:0}.cobalt-modal .cobalt-modal-header .cobalt-modal-header-titles .cobalt-modal-header-content h3{font-size:1rem;font-weight:600;line-height:1.25rem;color:var(--text-secondary);margin:0}.cobalt-modal .cobalt-modal-header .cobalt-modal-header-titles .cobalt-modal-close-button{margin-top:.5rem}.cobalt-modal .cobalt-modal-content{display:flex;flex:1;flex-direction:column;overflow-y:auto}
.cobalt-action-bar{display:flex;justify-content:space-between;padding:1.5rem;position:relative;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.cobalt-action-bar.cobalt-action-bar-floating{position:sticky;width:100%;background-color:var(--surface-primary);z-index:var(--z-index-action-bar);box-shadow:var(--shadow--floating-04);border-top:1px solid var(--stroke-subtle)}.cobalt-action-bar.cobalt-action-bar-flat{position:relative;background-color:var(--surface-primary)}.cobalt-action-bar.cobalt-action-bar-left{justify-content:flex-start}.cobalt-action-bar.cobalt-action-bar-right{justify-content:flex-end}.cobalt-action-bar.desktop .action-buttons{display:flex;flex:1;gap:1.5rem}.cobalt-action-bar.desktop .action-buttons .button-row{display:flex;flex:1;flex-flow:row wrap;gap:1rem}.cobalt-action-bar.desktop .action-buttons .button-row.left{justify-content:flex-start}.cobalt-action-bar.desktop .action-buttons .button-row.left .button-item-tertiary{display:flex;flex:1;justify-content:flex-end}.cobalt-action-bar.desktop .action-buttons .button-row.right{justify-content:flex-end}.cobalt-action-bar.desktop .action-buttons .button-row.right .button-item-tertiary{display:flex;flex:1;justify-content:flex-start}.cobalt-action-bar.mobile{display:flex;flex-direction:column}.cobalt-action-bar.mobile .action-buttons{display:flex;flex:1;flex-direction:column;gap:1rem}.cobalt-action-bar.mobile .action-buttons .button-item{flex:1;display:flex}.cobalt-action-bar.mobile .action-buttons .button-item button{flex:1}
._noEventsContainer_iiq58_1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-bottom: 1px solid #e6e8e9;
border-bottom: 1px solid var(--stroke-subtle, #e6e8e9);
}
._calendarIcon_iiq58_10 {
margin-bottom: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
._calendarImage_iiq58_17 {
width: auto;
height: auto;
}
/* .calendarImage:hover {
transform: scale(1.05);
opacity: 1;
} */
._content_iiq58_26 {
display: flex;
flex-direction: column;
font-size: 1rem;
font-style: normal;
line-height: 1.25rem;
line-height: var(--Line-height-Label, 1.25rem);
margin-bottom: 2rem;
}
._title_iiq58_35 {
font-weight: 600;
color: #59666e;
}
._subtitle_iiq58_40 {
color: #59666e;
font-weight: 400;
}
._jumpButtonContainer_iiq58_44 {
display: flex;
justify-content: center;
padding: 0.5rem;
}
._jumpButton_iiq58_44 {
color: #2969f2;
color: var(--text-interactive, #2969f2);
cursor: pointer;
font-weight: 600;
}
/* Responsive design */
@media (max-width: 768px) {
/* 768px */
._noEventsContainer_iiq58_1 {
padding: 2.5rem 1rem;
}
._calendarImage_iiq58_17 {
width: auto;
}
._title_iiq58_35 {
font-size: 1.3rem;
}
._subtitle_iiq58_40 {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
/* 480px */
._noEventsContainer_iiq58_1 {
padding: 2rem 0.75rem; /* 32px 12px */
}
._calendarImage_iiq58_17 {
width: auto;
}
._title_iiq58_35 {
font-size: 1.2rem;
}
._subtitle_iiq58_40 {
font-size: 0.85rem;
}
}
/* Animation for smooth appearance */
@keyframes _fadeInUp_iiq58_1 {
from {
opacity: 0;
transform: translateY(1.25rem); /* 20px */
}
to {
opacity: 1;
transform: translateY(0);
}
}
._noEventsContainer_iiq58_1 {
animation: _fadeInUp_iiq58_1 0.5s ease-out;
}
/* ==========================================================================
EMPTY STATE CONTAINER
========================================================================== */
._emptyScheduleContainer_s9v8i_4 {
display: flex;
flex-direction: column;
}
._emptyScheduleContainer_s9v8i_4 ._daySection_s9v8i_9 {
border-radius: var(--border-radius-lg);
margin-bottom: var(--spacing-xl);
}
/* ==========================================================================
DAY SECTION STYLES
========================================================================== */
._daySection_s9v8i_9 {
scroll-snap-align: start;
scroll-snap-stop: always;
}
._dayHeader_s9v8i_22 {
padding-top: var(--spacing-xl);
}
._dayTitle_s9v8i_26 {
margin: 0;
font-size: var(--size-4);
font-weight: var(--font-weight-bold);
color: var(--neutral-075);
line-height: var(--Line-height-Label, var(--size-4));
}
/* ==========================================================================
SESSIONS LIST STYLES
========================================================================== */
._sessionsList_s9v8i_37 {
display: flex;
flex-direction: column;
padding-top: var(--spacing-xl);
}
/* ==========================================================================
END OF DATA SECTION (EMPTY STATE)
========================================================================== */
._eodSectionEmpty_s9v8i_46 {
display: flex;
align-items: flex-start;
gap: var(--spacing-3xl);
align-self: stretch;
font-size: var(--font-size-base);
font-style: normal;
font-weight: var(--font-weight-bold);
margin: var(--spacing-3xl) 0;
color: var(--neutral-400);
}
/* ==========================================================================
RESPONSIVE DESIGN
========================================================================== */
@media (max-width: 768px) {
._dayTitle_s9v8i_26 {
font-size: var(--size-3);
}
._sessionsList_s9v8i_37 {
padding-top: var(--spacing-lg);
}
._eodSectionEmpty_s9v8i_46 {
margin: var(--spacing-xl) 0;
gap: var(--spacing-xl);
}
}
@media (max-width: 480px) {
._dayHeader_s9v8i_22 {
padding-top: var(--spacing-lg);
}
._dayTitle_s9v8i_26 {
font-size: var(--size-2);
}
._eodSectionEmpty_s9v8i_46 {
margin: var(--spacing-lg) 0;
gap: var(--spacing-lg);
}
}
.cobalt-text-input{display:inline-flex;width:100%;align-items:center;border-radius:.5rem;border:none;background:var(--input-default);color:var(--text-primary);min-height:2rem;flex-shrink:0;padding:0 .75rem;outline:1px solid var(--stroke-default);outline-offset:-1px;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-family-text);font-size:var(--text-size-1)}.cobalt-text-input.medium{min-height:2.5rem}.cobalt-text-input:hover{outline-color:var(--stroke-hover)}.cobalt-text-input.danger:not(:focus-visible){outline:2px solid var(--stroke-danger);outline-offset:-2px}.cobalt-text-input.danger:not(:focus-visible):hover{outline-color:var(--stroke-danger-hover)}.cobalt-text-input:focus-visible{outline:2px solid var(--stroke-focus);outline-offset:-2px}.cobalt-text-input::-moz-placeholder{overflow:hidden;color:var(--text-secondary);text-overflow:ellipsis}.cobalt-text-input::placeholder{overflow:hidden;color:var(--text-secondary);text-overflow:ellipsis}.cobalt-text-input.cobalt-text-area{padding:.62rem .75rem;resize:none}.cobalt-text-input.cobalt-text-area.resizable{resize:vertical}.cobalt-text-input:disabled{background:var(--input-disabled);outline-color:var(--stroke-disabled);color:var(--text-disabled);-webkit-text-fill-color:var(--text-disabled)}
.cobalt-form-field-label{display:flex;justify-content:space-between}.cobalt-form-field-label .cobalt-form-field-label-main{flex:1;margin-right:auto;color:var(--text-secondary);font-family:var(--font-family-text);font-size:.75rem;font-style:normal;font-weight:600;line-height:normal;margin-bottom:.25rem}.cobalt-form-field-label .cobalt-form-field-label-additional{color:var(--text-secondary);font-family:var(--font-family-text);font-size:.75rem;font-style:normal;font-weight:400;line-height:normal}.cobalt-form-field-helper{color:var(--text-secondary);font-family:var(--font-family-text);font-size:.75rem;font-style:normal;font-weight:400;line-height:normal;margin-top:.25rem}.cobalt-form-field-helper.error{color:var(--text-danger);font-family:var(--font-family-text);font-size:.75rem;font-style:normal;font-weight:600;line-height:normal}.cobalt-form-field{display:flex;flex-direction:column}.cobalt-form-field .date-picker-button{margin-right:.25rem}.cobalt-form-field .input-wrapper{display:inline-flex;flex-direction:row;border-radius:.5rem;outline:1px solid var(--stroke-default);outline-offset:-1px;border:none;background:var(--input-default);align-items:center;min-height:2rem;width:100%}.cobalt-form-field .input-wrapper.disabled{background:var(--input-disabled)}.cobalt-form-field .input-wrapper.disabled svg{color:var(--icon-disabled)}.cobalt-form-field .input-wrapper .cobalt-text-input,.cobalt-form-field .input-wrapper .cobalt-date-picker-input{display:flex;flex:1;border:none;outline:none;outline-offset:0;border-radius:none;background:transparent}.cobalt-form-field .input-wrapper .cobalt-text-input.danger:not(:focus-visible),.cobalt-form-field .input-wrapper .cobalt-date-picker-input.danger:not(:focus-visible){outline:none;outline-offset:0}.cobalt-form-field .input-wrapper .cobalt-text-input:focus,.cobalt-form-field .input-wrapper .cobalt-date-picker-input:focus{outline:none}.cobalt-form-field .input-wrapper .cobalt-text-input input,.cobalt-form-field .input-wrapper .cobalt-date-picker-input input{border:none;border-radius:none;outline:none}.cobalt-form-field .input-wrapper.with-prefix{padding-left:.75rem}.cobalt-form-field .input-wrapper.with-suffix{padding-right:.75rem}.cobalt-form-field .input-wrapper .error-icon{color:var(--icon-danger);align-self:flex-start;margin-top:.62rem}.cobalt-form-field .input-wrapper.medium{min-height:2.5rem}.cobalt-form-field .input-wrapper:hover:not(.disabled):not(.focused){outline-color:var(--stroke-hover)}.cobalt-form-field .input-wrapper.error{outline:2px solid var(--stroke-danger);outline-offset:-2px;padding-right:.75rem}.cobalt-form-field .input-wrapper.error:hover{outline-color:var(--stroke-danger-hover)}.cobalt-form-field .input-wrapper.focused{outline:2px solid var(--stroke-focus);outline-offset:-2px}.cobalt-form-field .input-wrapper.disabled{background:var(--input-disabled);outline-color:var(--stroke-disabled)}
.cobalt-radio-button{display:flex;flex-direction:column;gap:.125rem}.cobalt-radio-button .cobalt-radio-button-input{display:flex;flex-direction:row;align-items:baseline}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]{height:1.125rem;width:1.125rem;border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;margin:0;position:relative;border:1px solid var(--stroke-default);background-color:var(--input-default);align-self:center}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:hover{border-width:1px;border-color:var(--stroke-hover)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:active:not(:disabled){border-width:2px;border-color:var(--stroke-focus)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:checked{background-color:var(--input-default);border:1px solid var(--stroke-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:checked:active:not(:disabled){border-width:2px;border-color:var(--button-primary-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:checked:active:not(:disabled):after{background-color:var(--button-primary-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:.7rem;height:.7rem;border-radius:50%;background-color:var(--button-primary-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:checked:hover{border-color:var(--button-primary-hover)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:checked:hover:after{background-color:var(--button-primary-hover)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger{border:2px solid var(--button-danger-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:hover{border-color:var(--button-danger-hover)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:active:not(:disabled){border-color:var(--button-danger-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:active:not(:disabled):after{background-color:var(--button-danger-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:checked{background-color:var(--input-default);border-color:var(--button-danger-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:checked:after{background-color:var(--button-danger-default)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:checked:hover{border-color:var(--button-danger-hover)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio].danger:checked:hover:after{background-color:var(--button-danger-hover)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:disabled{background-color:var(--input-disabled);border:.1rem solid var(--stroke-disabled);cursor:not-allowed}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:disabled:checked:after{background-color:var(--icon-disabled)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:disabled:hover,.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:disabled:active{border-color:var(--stroke-disabled)}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]:disabled+label{color:var(--text-disabled);cursor:not-allowed}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]+label{color:var(--text-primary);cursor:pointer;justify-content:center;align-self:stretch;font-size:var(--text-size-1);padding-left:.5rem}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]+label.visually-hidden{display:none}.cobalt-radio-button .cobalt-radio-button-input input[type=radio]+label.disabled{color:var(--text-disabled);cursor:not-allowed}.cobalt-radio-button .cobalt-radio-button-description{display:flex;flex-flow:row wrap;margin-left:1.7rem;color:var(--text-tertiary);align-self:stretch;font-size:var(--text-size-02)}.cobalt-radio-button .cobalt-radio-button-description.disabled{color:var(--text-disabled)}.cobalt-radio-button .cobalt-radio-button-description.danger{color:var(--text-danger);font-weight:var(--font-weight-bold)}
.cobalt-radio-button-group{display:flex;gap:.75rem}.cobalt-radio-button-group.vertical{flex-direction:column}.cobalt-radio-button-group.horizontal{flex-direction:row;flex-wrap:wrap}
.cobalt-date-picker-input{display:flex;flex-direction:row;align-items:center;background-color:var(--input-default);border-radius:.5rem}.cobalt-date-picker-input .range-picker-inputs{display:flex;flex-direction:row;align-items:baseline}.cobalt-date-picker-input .range-picker-inputs .to-text{color:var(--text-primary)}.cobalt-date-picker-input .date-picker-input{display:flex;color:var(--text-primary);padding:0 .75rem;border-radius:.5rem;background-color:var(--input-default);overflow:hidden;text-overflow:ellipsis;font-family:var(--font-family-text);font-size:var(--text-size-1)}.cobalt-date-picker-input .date-picker-input.medium{min-height:2.5rem}.cobalt-date-picker-input .date-picker-input:disabled{background:var(--input-disabled);outline-color:var(--stroke-disabled);color:var(--text-disabled);-webkit-text-fill-color:var(--text-disabled)}.cobalt-date-picker-input .range-picker{max-width:7.25rem}.cobalt-date-picker-input .clear-icon{width:1rem;height:1rem;color:var(--icon-tertiary);cursor:pointer}.cobalt-date-picker-input .clear-icon:hover{color:var(--icon-primary)}
.cobalt-divider{margin:0}.cobalt-divider.cobalt-divider-solid{background-color:var(--stroke-default)}.cobalt-divider.cobalt-divider-horizontal{display:block;height:1px;width:100%}.cobalt-divider.cobalt-divider-horizontal.cobalt-divider-dotted{background-color:var(--stroke-default);-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iMSIgdmlld0JveD0iMCAwIDk4IDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJWYXJpYW50PURvdHRlZCwgT3JpZW50YXRpb249SG9yaXpvbnRhbCI+CjxwYXRoIGlkPSJIb3Jpem9udGFsLyBEb3R0ZWQiIGQ9Ik0xIDAuNUg5NyIgc3Ryb2tlPSIjQTRBQ0IwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjAuMSA2Ii8+CjwvZz4KPC9zdmc+Cg==);mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iMSIgdmlld0JveD0iMCAwIDk4IDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJWYXJpYW50PURvdHRlZCwgT3JpZW50YXRpb249SG9yaXpvbnRhbCI+CjxwYXRoIGlkPSJIb3Jpem9udGFsLyBEb3R0ZWQiIGQ9Ik0xIDAuNUg5NyIgc3Ryb2tlPSIjQTRBQ0IwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjAuMSA2Ii8+CjwvZz4KPC9zdmc+Cg==);-webkit-mask-size:98px 1px;mask-size:98px 1px}.cobalt-divider.cobalt-divider-vertical{display:inline-flex;height:100%;width:1px}.cobalt-divider.cobalt-divider-vertical.cobalt-divider-dotted{background-color:var(--stroke-default);-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSI5OCIgdmlld0JveD0iMCAwIDEgOTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJWYXJpYW50PURvdHRlZCwgT3JpZW50YXRpb249VmVydGljYWwiPgo8cGF0aCBpZD0iVmVydGljYWwvIERvdHRlZCIgZD0iTTAuNSA5N0wwLjUgMSIgc3Ryb2tlPSIjQTRBQ0IwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjAuMSA2Ii8+CjwvZz4KPC9zdmc+Cg==);mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSI5OCIgdmlld0JveD0iMCAwIDEgOTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJWYXJpYW50PURvdHRlZCwgT3JpZW50YXRpb249VmVydGljYWwiPgo8cGF0aCBpZD0iVmVydGljYWwvIERvdHRlZCIgZD0iTTAuNSA5N0wwLjUgMSIgc3Ryb2tlPSIjQTRBQ0IwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjAuMSA2Ii8+CjwvZz4KPC9zdmc+Cg==);-webkit-mask-size:1px 98px;mask-size:1px 98px}
.cobalt-number-input{display:flex;flex-flow:row nowrap;align-items:center;gap:.75rem}.cobalt-number-input .cobalt-number-input-error-icon{color:var(--icon-danger)}.cobalt-number-input .cobalt-number-input-group{flex:1;display:flex;flex-direction:row;border:1px solid var(--stroke-default);padding:.25rem;align-items:center;gap:.25rem;flex-shrink:0;background-color:var(--input-default);border-radius:.5rem}.cobalt-number-input .cobalt-number-input-group.small{height:2rem}.cobalt-number-input .cobalt-number-input-group.medium{height:2.5rem}.cobalt-number-input .cobalt-number-input-group:hover{border-color:var(--stroke-hover)}.cobalt-number-input .cobalt-number-input-group:focus-within{border:2px solid var(--stroke-focus);outline:none}.cobalt-number-input .cobalt-number-input-group .cobalt-number-input-value{border:none;height:100%;min-width:4rem;justify-items:center;flex:1;background-color:var(--input-default)}.cobalt-number-input .cobalt-number-input-group .cobalt-number-input-value::-webkit-outer-spin-button,.cobalt-number-input .cobalt-number-input-group .cobalt-number-input-value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.cobalt-number-input .cobalt-number-input-group .cobalt-number-input-value:-moz-appearance{-moz-appearance:textfield}.cobalt-number-input .cobalt-number-input-group .cobalt-number-input-value:focus{outline:none}.cobalt-number-input .cobalt-number-input-group.invalid{border:2px solid var(--stroke-danger)}.cobalt-number-input .cobalt-number-input-group.disabled{cursor:not-allowed;background-color:var(--input-disabled);border-color:var(--stroke-disabled)}.cobalt-number-input .cobalt-number-input-group.disabled .cobalt-divider{background-color:var(--stroke-disabled)}.cobalt-number-input .cobalt-number-input-group.disabled .cobalt-number-input-value{color:var(--text-disabled);background-color:var(--input-disabled)}
.cobalt-toggle{display:flex;align-items:center;flex-flow:row wrap}.cobalt-toggle .toggle{position:relative;display:inline-block}.cobalt-toggle .toggle input{opacity:0;width:100%;height:100%;z-index:1;position:relative}.cobalt-toggle .toggle.medium{height:1.5rem;width:3rem}.cobalt-toggle .toggle.small{height:1rem;width:2rem}.cobalt-toggle .toggle.medium>.slider:before{height:1.125rem;width:1.125rem}.cobalt-toggle .toggle.small>.slider:before{height:.625rem;width:.625rem}.cobalt-toggle .toggle .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--toggle-off-default);transition:.4s;border-radius:.75rem;display:inline-flex}.cobalt-toggle .toggle .slider:before{position:absolute;content:"";left:.19rem;bottom:.19rem;top:.19rem;background-color:var(--icon-on-color);transition:.4s;border-radius:50%}.cobalt-toggle .toggle input:disabled+.slider{cursor:not-allowed;background-color:var(--button-disabled-default)}.cobalt-toggle .toggle input:disabled+.slider:before{background-color:var(--icon-disabled)}.cobalt-toggle .toggle input:not(:disabled):checked+.slider{background-color:var(--button-primary-default)}.cobalt-toggle .toggle input:not(:disabled):checked+.slider:hover{background-color:var(--button-primary-hover)}.cobalt-toggle .toggle input:not(:disabled):focus-visible+.slider{outline:.2rem solid var(--stroke-focus);outline-offset:1px}.cobalt-toggle .toggle.medium>input:checked+.slider:before{transform:translate(1.5rem)}.cobalt-toggle .toggle.small>input:checked+.slider:before{transform:translate(1rem)}.cobalt-toggle label{margin-left:.5rem}
.cobalt-calendar-button{display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem;background:var(--button-ghost-default);color:var(--text-interactive);margin-bottom:.25rem;padding:.56rem .25rem}.cobalt-calendar-button:not(:disabled):hover{background:var(--button-ghost-hover)}.cobalt-calendar-button:not(:disabled):active{background:var(--button-ghost-pressed)}.cobalt-calendar-button:disabled{color:var(--text-disabled)}.cobalt-calendar-button.heading-01{padding:.25rem}.cobalt-calendar-button.body-02{font-weight:600}.cobalt-calendar-button.current{position:relative}.cobalt-calendar-button.current:after{content:"";position:absolute;bottom:6px;left:50%;transform:translate(-50%);width:.25rem;height:.25rem;border-radius:50%;background-color:var(--text-interactive)}.cobalt-calendar-button.selected{background:var(--button-primary-default);color:var(--text-on-color)}.cobalt-calendar-button.selected:hover{background:var(--button-primary-hover)}.cobalt-calendar-button.current.selected:after{background-color:var(--icon-on-color)}
.cobalt-calendar{display:flex;flex:1;flex-direction:column;border-radius:.75rem;border:1px solid var(--stroke-subtle);background:var(--surface-secondary);width:18.5rem;min-height:16.6rem;max-width:18.5rem}.cobalt-calendar .calendar-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin:1rem .5rem 0 1rem}.cobalt-calendar .calendar-header .header-text{display:flex;flex-direction:row;color:var(--text-primary);font-family:var(--font-family-display);font-size:1.25rem;font-weight:600;line-height:1.375rem}.cobalt-calendar .months{margin-bottom:.75rem}.cobalt-calendar .divider-line{height:.0625rem;background-color:var(--stroke-subtle);width:100%;display:block;margin:0;box-sizing:border-box}.cobalt-calendar .cobalt-calendar-day{border-spacing:0 .25rem;table-layout:fixed;margin:0 0 var(--space-04) 0}.cobalt-calendar .cobalt-calendar-day .days-header{color:var(--text-secondary);text-align:center;font-family:var(--font-family-text);font-size:.75rem;font-weight:600;line-height:1.375rem}.cobalt-calendar .cobalt-calendar-day .days-header th{text-align:center;width:2.5rem}.cobalt-calendar .cobalt-calendar-day td.divider{padding-bottom:var(--space-12)}.cobalt-calendar .cobalt-calendar-day th:first-child{padding-left:var(--space-08)}.cobalt-calendar .cobalt-calendar-day th:last-child{padding-right:var(--space-08)}.cobalt-calendar .cobalt-calendar-day td:not(.divider){text-align:center;justify-items:center;padding:0;margin:0}.cobalt-calendar .cobalt-calendar-day td:not(.divider):first-child{padding-left:var(--space-08)}.cobalt-calendar .cobalt-calendar-day td:not(.divider):last-child{padding-right:var(--space-08)}.cobalt-calendar .cobalt-calendar-month-year{display:grid;grid-template-columns:repeat(4,1fr);margin:.75rem 1rem}
.cobalt-calendar-day-button{display:flex;flex:1;height:var(--space-40);width:var(--space-40);color:var(--text-primary);text-align:center;font-family:var(--font-family-text);font-size:.75rem;font-weight:600;line-height:1.375rem;justify-content:center;align-items:center;position:relative}.cobalt-calendar-day-button:focus-within{border-radius:50%}.cobalt-calendar-day-button:not(.disabled):hover{background-color:var(--button-ghost-hover);border-radius:50%}.cobalt-calendar-day-button:not(.disabled):active{background-color:var(--button-ghost-pressed);border-radius:50%}.cobalt-calendar-day-button.disabled{color:var(--text-disabled);text-decoration:line-through}.cobalt-calendar-day-button.today{color:var(--text-interactive);font-weight:600}.cobalt-calendar-day-button.selected{color:var(--text-on-color);background-color:var(--button-primary-default);border-radius:50%;z-index:3}.cobalt-calendar-day-button.selected:hover{background-color:var(--button-primary-hover)}.cobalt-calendar-day-button.selected:active{background-color:var(--button-primary-pressed)}.cobalt-calendar-day-button.other-month{color:var(--text-disabled)}.cobalt-calendar-day-button.in-range.range-complete:not(.selected){background-color:var(--button-secondary-default);border-radius:0}.cobalt-calendar-day-button.selected.in-range.range-complete{background:none;position:relative;color:var(--button-ghost-default);z-index:10}.cobalt-calendar-day-button.selected.in-range.range-complete:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--button-secondary-default);z-index:1}.cobalt-calendar-day-button.selected.in-range.range-complete:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--button-primary-default);border-radius:50%;z-index:5}.cobalt-calendar-day-button.selected.in-range.range-complete span,.cobalt-calendar-day-button.selected.in-range.range-complete div{color:var(--button-ghost-default);position:relative;z-index:10}.cobalt-calendar-day-button.selected.in-range.range-complete>*{color:var(--button-ghost-default);position:relative;z-index:10}.cobalt-calendar-day-button.selected.in-range.range-complete:hover:after{background-color:var(--button-primary-hover)}.cobalt-calendar-day-button.selected.in-range.range-complete:active:after{background-color:var(--button-primary-pressed)}.cobalt-calendar-day-button.selected.in-range.range-complete.range-start:before{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}.cobalt-calendar-day-button.selected.in-range.range-complete.range-end:before{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}.cobalt-calendar-day-button.in-range.range-complete:not(.selected):hover{background:radial-gradient(circle,var(--button-secondary-hover) 70%,var(--button-secondary-default) 70%);color:var(--text-primary);z-index:2}.cobalt-calendar-day-button.in-range.range-complete:not(.selected):hover.today{color:var(--text-interactive)}.cobalt-calendar-day-button.in-range.range-complete:not(.selected):active{background:radial-gradient(circle,var(--button-secondary-pressed) 70%,var(--button-secondary-default) 70%);color:var(--text-primary);z-index:2}.cobalt-calendar-day-button.in-range.range-complete:not(.selected):active.today{color:var(--text-interactive)}.cobalt-calendar-day-button.in-range:not(.range-complete){position:relative}.cobalt-calendar-day-button.in-range:not(.range-complete):before,.cobalt-calendar-day-button.in-range:not(.range-complete):after{content:"";position:absolute;height:0;left:0;right:0;border-top:1px dashed var(--stroke-subtle);z-index:2}.cobalt-calendar-day-button.in-range:not(.range-complete):before{top:0}.cobalt-calendar-day-button.in-range:not(.range-complete):after{bottom:0}.cobalt-calendar-day-button.in-range[data-hovered=true]:not(.range-complete):before,.cobalt-calendar-day-button.in-range[data-hovered=true]:not(.range-complete):after{left:0;right:50%}.cobalt-calendar-day-button.selected.in-range:not(.range-complete):before,.cobalt-calendar-day-button.selected.in-range:not(.range-complete):after{left:50%;right:0}.cobalt-calendar-day-button .today-indicator{display:block;width:.25rem;height:.25rem;background-color:var(--text-interactive);border-radius:50%;position:absolute;left:50%;bottom:6px;transform:translate(-50%);z-index:4}.cobalt-calendar-day-button.today.selected{color:var(--text-on-color)}.cobalt-calendar-day-button.today.selected .today-indicator{background-color:var(--icon-on-color)}.cobalt-calendar-day-button.in-range.range-complete.bottom-left-corner:not(.selected){border-bottom-left-radius:.5rem}.cobalt-calendar-day-button.in-range.range-complete.bottom-right-corner:not(.selected){border-bottom-right-radius:.5rem}.cobalt-calendar-day-button.selected.in-range.range-complete.range-start.bottom-left-corner:before{border-bottom-left-radius:.5rem}.cobalt-calendar-day-button.selected.in-range.range-complete.range-end.bottom-right-corner:before{border-bottom-right-radius:.5rem}
/* ==========================================================================
CALENDAR HEADER STYLES
========================================================================== */
._calendarHeader_1pd95_4 {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
margin-bottom: var(--spacing-xl);
}
._calendarHeaderEmpty_1pd95_12 {
margin-bottom: 0 !important;
}
/* ==========================================================================
MONTH TITLE WRAPPER
========================================================================== */
._monthTitleWrapper_1pd95_19 {
position: relative;
display: flex;
align-items: center;
transition: background-color var(--transition-base);
}
._monthTitleWrapperOpen_1pd95_26 {
background-color: var(--neutral-800);
border-radius: 0.5rem;
}
._monthTitleButton_1pd95_31 {
background: none;
border: none;
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--border-radius-md);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--spacing-md);
transition: background-color var(--transition-base);
}
._monthTitleButtonDisabled_1pd95_43 {
cursor: not-allowed;
opacity: 0.6;
}
._monthTitle_1pd95_19 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin: 0;
color: var(--neutral-075);
}
/* ==========================================================================
EXPAND ICON STYLES
========================================================================== */
._expandIcon_1pd95_58 {
transition: transform var(--transition-base);
color: var(--neutral-075);
}
._expandIconOpen_1pd95_63 {
transform: rotate(180deg);
}
._expandIconDisabled_1pd95_67 {
opacity: 0.6;
}
/* ==========================================================================
CALENDAR DROPDOWN
========================================================================== */
._calendarDropdown_1pd95_74 {
position: absolute;
top: 100%;
z-index: 1000;
border-radius: var(--border-radius-xl);
margin-top: 0.5rem;
}
/* ==========================================================================
TODAY BUTTON
========================================================================== */
._todayButton_1pd95_85 {
color: var(--blue-400);
padding: var(--spacing-md) var(--spacing-xl);
cursor: pointer;
font-size: var(--font-size-base);
display: flex;
align-items: center;
gap: var(--spacing-sm);
transition: background-color var(--transition-base);
font-weight: var(--font-weight-bold);
border-radius: var(--border-radius-md);
background: none;
border: none;
}
/* ==========================================================================
RESPONSIVE DESIGN
========================================================================== */
@media (max-width: 768px) {
._calendarHeader_1pd95_4 {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-xl);
background-color: var(--schedule-content);
position: sticky;
top: 0;
z-index: 10;
}
._monthTitle_1pd95_19 {
text-align: center;
order: -1;
}
}
@media (max-width: 480px) {
._monthTitleButton_1pd95_31 {
padding: var(--spacing-sm) var(--spacing-md);
}
._todayButton_1pd95_85 {
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-sm);
}
}
/* ==========================================================================
CHANGE NOTICE STYLES
========================================================================== */
._changeNotice_1oy2z_4 {
font-size: 1rem;
color: var(--neutral-400);
display: flex;
align-items: center;
gap: 0.375rem;
}
/* ==========================================================================
LEARN MORE LINK
========================================================================== */
._learnMoreLink_1oy2z_15 {
color: var(--schedule-blue-400);
text-decoration: underline;
margin-left: var(--spacing-sm);
text-decoration-style: solid;
pointer-events: auto;
background: none;
border: none;
cursor: pointer;
font-size: inherit;
padding: 0;
transition: opacity var(--transition-base);
}
/* ==========================================================================
CARD ITEM STYLES
========================================================================== */
._cardItem_1219l_4 {
margin-bottom: var(--text-size-3);
cursor: pointer;
border: var(--border-width) solid var(--schedule-border);
border-radius: var(--border-radius-lg);
color: var(--neutral-600);
font-size: var(--text-size-1);
font-weight: var(--font-weight-semibold);
}
._cardItem_1219l_4:last-child {
margin-bottom: 0;
}
/* ==========================================================================
SESSION CARD STYLES
========================================================================== */
._sessionCard_1219l_21 {
border: var(--border-width) solid var(--schedule-border);
border-radius: var(--border-radius-md);
padding: var(--spacing-xl);
transition: box-shadow var(--transition-base);
}
._sessionCard_1219l_21:hover {
box-shadow: var(--shadow-sm);
}
/* ==========================================================================
CENTER ALIGN STYLES
========================================================================== */
._centerAlign_1219l_35 {
display: flex;
align-items: column;
gap: var(--spacing-3xl);
align-items: flex-start;
}
._centerAlign_1219l_35 > * {
margin: 0;
padding: 0;
}
/* ==========================================================================
SESSION TYPE STYLES
========================================================================== */
._pilotSessionCard__sim_1219l_48 {
background-color: var(--sim-color);
}
._pilotSessionCard__exams_1219l_52 {
background-color: var(--exams-color);
}
._pilotSessionCard__default_1219l_56 {
background-color: var(--schedule-blue-400);
}
/* ==========================================================================
RESPONSIVE DESIGN
========================================================================== */
@media (max-width: 768px) {
._centerAlign_1219l_35 {
gap: var(--spacing-lg);
}
}
@media (max-width: 480px) {
._centerAlign_1219l_35 {
gap: var(--spacing-md);
}
}
/* ==========================================================================
DAY SECTION STYLES
========================================================================== */
._daySection_1iwt6_4 {
scroll-snap-align: start;
scroll-snap-stop: always;
margin-top: 2rem;
}
._dayHeader_1iwt6_10 {
padding-top: 0rem;
}
._dayTitle_1iwt6_14 {
margin: 0;
font-size: var(--size-4);
font-weight: var(--font-weight-bold);
color: var(--neutral-075);
line-height: var(--Line-height-Label, var(--size-4));
}
/* ==========================================================================
SESSIONS LIST STYLES
========================================================================== */
._sessionsList_1iwt6_25 {
display: flex;
flex-direction: column;
padding-top: var(--spacing-xl);
}
/* ==========================================================================
NO EVENTS MESSAGE
========================================================================== */
._noEventsMessage_1iwt6_34 {
color: var(--neutral-400);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
line-height: var(--size-4);
}
/* ==========================================================================
RESPONSIVE DESIGN
========================================================================== */
@media (max-width: 768px) {
._dayTitle_1iwt6_14 {
font-size: var(--size-3);
}
._sessionsList_1iwt6_25 {
padding-top: var(--spacing-lg);
}
}
@media (-sm-n-below) {
._dayTitle_1iwt6_14 {
font-size: var(--size-2);
}
}
/* ==========================================================================
MONTH SECTION STYLES
========================================================================== */
._monthSection_1h4aa_4 {
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* ==========================================================================
MONTH HEADER STYLES
========================================================================== */
._monthHeader_1h4aa_12 {
display: flex;
align-items: flex-end;
margin-bottom: var(--spacing-xl);
overflow: hidden;
border-radius: var(--border-radius-md);
position: relative;
padding: var(--spacing-md);
margin-top: var(--spacing-3xl);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
._monthHeaderWithDays_1h4aa_26 {
height: 6rem;
min-height: 6rem;
}
._monthHeaderEmpty_1h4aa_31 {
opacity: 0.4;
}
._monthHeaderTitle_1h4aa_35 {
position: relative;
z-index: 2;
margin: 0;
font-weight: var(--font-weight-bold);
text-align: left;
transition: all var(--transition-smooth);
}
._monthHeaderTitleWithDays_1h4aa_44 {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
}
._monthHeaderOverlay_1h4aa_49 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.1) 0%,
rgba(0, 0, 0, 0.2) 50%,
rgba(0, 0, 0, 0.1) 100%
);
z-index: 1;
pointer-events: none;
}
/* ==========================================================================
NO EVENTS MESSAGE
========================================================================== */
._noEventsMessage_1h4aa_68 {
color: var(--neutral-400);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
line-height: var(--size-4);
}
/* ==========================================================================
RESPONSIVE DESIGN
========================================================================== */
@media (max-width: 768px) {
._monthHeaderWithDays_1h4aa_26 {
height: 4.0625rem; /* 65px */
min-height: 4.0625rem;
}
._monthHeaderEmpty_1h4aa_31 {
height: 2.5rem; /* 40px */
min-height: 2.5rem;
opacity: 0.4;
}
._monthHeaderTitleWithDays_1h4aa_44 {
font-size: 1.4rem;
letter-spacing: 0.075rem;
}
._monthHeaderTitleEmpty_1h4aa_95 {
font-size: 1.2rem;
letter-spacing: 0.05rem;
}
}
@media (max-width: 480px) {
._monthHeaderWithDays_1h4aa_26 {
height: 3.4375rem; /* 55px */
min-height: 3.4375rem;
}
._monthHeaderEmpty_1h4aa_31 {
height: 2.1875rem; /* 35px */
min-height: 2.1875rem;
opacity: 0.4;
}
._monthHeaderTitleWithDays_1h4aa_44 {
font-size: 1.2rem;
letter-spacing: 0.0625rem;
}
._monthHeaderTitleEmpty_1h4aa_95 {
font-size: 1.1rem;
letter-spacing: 0.03125rem;
}
}
._resourceLookup_iqef3_1 {
padding: 1rem;
width: 100%;
box-sizing: border-box;
position: relative;
font-family: sans-serif;
font-family: var(--font-family-sans, sans-serif);
}
._topPanel_iqef3_9 {
background: var(--neutral-50);
padding: 1rem;
border-radius: 4px;
display: flex;
flex-direction: column;
gap: .35rem;
}
._topBar_iqef3_18 {
display: flex;
justify-content: space-between; /* heading left, location right */
align-items: flex-start;
gap: 1rem;
width: 100%;
}
._statusPanel_iqef3_26 {
margin-top: 1rem;
margin-left: 1rem;
background: #fff;
padding: 1rem;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
min-height: 100vh;
}
._heading_iqef3_36 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
}
._locationSelectWrapper_iqef3_43 {
width: 240px;
flex-shrink: 0;
margin-left: auto; /* ensure right alignment */
}
._label_iqef3_49 {
display: block;
font-size: .7rem;
letter-spacing: .05em;
font-weight: 600;
margin-bottom: .35rem;
color: var(--neutral-600);
}
._resourceRow_iqef3_58 {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
._selection_iqef3_64 {
font-size: .85rem;
margin-top: .5rem;
} ._coEmptyLocState_12vp9_1 {
display: flex;
justify-content: center;
}
._noLocHeader_12vp9_5 {
display: flex;
justify-content: center;
margin-top: 0.8rem;
}
._noLocImage_12vp9_10 {
margin-left: 14%;
margin-top: 20%;
}
._noLocMessage_12vp9_14 {
display: flex;
justify-content: center;
white-space: pre-line;
margin-left: 2rem;
margin-top: 0.3rem;
}._container_fmwmw_1 {
height: 100%;
--cell-width: 3.75rem;
--cell-time-width: 3.125rem;
}
._daysHeader_fmwmw_7 {
transition: top 0.25s ease;
background: var(--surface-primary);
display: flex;
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 1;
}
._timeColumnHeader_fmwmw_17 {
width: var(--cell-time-width);
flex-shrink: 0;
border-right: 0.0625rem solid var(--neutral-700);
}
._dayCell_fmwmw_23 {
flex: 1;
display: flex;
align-items: center;
border-right: 0.0625rem solid var(--neutral-700);
border-top: 0.0625rem solid var(--neutral-700);
border-bottom: 0.0625rem solid var(--neutral-700);
min-height: var(--cell-width);
position: relative;
}
._past_fmwmw_34 {
color: var(--neutral-600);
font-weight: var(--font-weight-semibold);
}
._selectedFutureDate_fmwmw_39 {
color: currentColor;
}
._dayCellDisabled_fmwmw_43 {
background-color: var(--neutral-900);
}
._dayNumber_fmwmw_47 {
width: 2.25rem;
height: 2.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: none;
cursor: pointer;
font-weight: var(--font-weight-semibold);
font-size: 1rem;
color: var(--neutral-400);
}
._dayNumber_fmwmw_47._todayDate_fmwmw_61,
._dayNumber_fmwmw_47._activeTodayDate_fmwmw_62 {
background-color: var(--schedule-blue-400);
color: white;
}
._dayNumber_fmwmw_47:disabled {
opacity: 0.5;
}
._dayName_fmwmw_70 {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
font-weight: var(--font-weight-semibold);
color: var(--neutral-400);
white-space: nowrap;
}
._dayName_fmwmw_70._activeTodayDay_fmwmw_79 {
color: var(--schedule-blue-400);
}
._dayName_fmwmw_70._past_fmwmw_34 {
color: var(--neutral-600);
}
._calendarGrid_fmwmw_86 {
display: flex;
flex: 1;
overflow: hidden;
}
._timeColumn_fmwmw_17 {
width: var(--cell-time-width);
flex-shrink: 0;
border-right: 0.0625rem solid var(--neutral-700);
}
._timeSlot_fmwmw_98 {
min-height: var(--cell-width);
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 0 0.125rem;
color: #666;
color: var(--text-secondary, #666);
font-size: 0.9rem;
}
._timeCell_fmwmw_107 {
min-height: var(--cell-width);
border-bottom: 0.0625rem solid var(--neutral-700);
display: flex;
}
._daysContainer_fmwmw_113 {
display: flex;
flex: 1;
}
._dayColumn_fmwmw_118 {
flex: 1;
position: relative;
border-right: 0.0625rem solid var(--neutral-700);
}
._timeCellsContainer_fmwmw_124 {
height: 100%;
display: flex;
flex-direction: column;
}
._eventsContainer_fmwmw_130 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
._event_fmwmw_130 {
position: absolute;
background-color: white;
background-color: var(--event-bg-color, white);
border-radius: 0.25rem;
color: white;
cursor: pointer;
overflow: hidden;
pointer-events: auto;
transition: all 0.2s ease;
font-size: 0.85rem;
box-shadow: 0 0.0625rem 3px rgba(0, 0, 0, 0.1);
display: flex;
border: 0.0625rem solid;
flex-shrink: 0;
}
._sessionCard_fmwmw_154 {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
gap: 0.25rem;
padding: 0rem; /*0.25rem;*/
box-sizing: border-box;
min-height: 0;
container-type: size;
container-name: card;
}
._content_fmwmw_166 {
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
._sessionScheduleCard_fmwmw_174 {
pointer-events: auto;
transition: all 0.2s ease;
font-size: 0.85rem;
padding: 0.25rem;
display: flex;
gap: 0.25rem;
margin: 0.25rem;
width: 100%;
}
._sessionContent_fmwmw_184 {
flex-grow: 1;
height: 100%;
overflow: hidden;
}
._disabledCard_fmwmw_189 {
margin: 1%;
border: 0.0625rem solid var(--neutral-700);
border-radius: 0.25rem;
background: var(--neutral-900);
}
._verticalLine_fmwmw_196 {
width: 0.25rem;
flex-shrink: 0;
background: var(--neutral-700);
}
._sessionTitle_fmwmw_202 {
font-weight: var(--font-weight-semibold);
color: var(--neutral-075);
font-size: 0.8rem;
width: 100%;
flex-shrink: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-height: 1.2;
max-height: calc(100% - 1rem);
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
-webkit-box-decoration-break: clone;
display: flex;
flex-direction: row;
padding-right: 0.5rem;
flex-wrap: nowrap;
justify-content: space-between;
}
._notificationIndicator_fmwmw_223 {
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background-color: var(--blue-400);
aspect-ratio: 1;
margin-top: 0.25rem;
}
._sessionSubtitle_fmwmw_232 {
overflow: hidden;
font-weight: var(--font-weight-semibold);
color: var(--neutral-400);
font-size: 0.8rem;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
flex-shrink: 0;
min-height: 1rem;
}
._disabledTitle_fmwmw_243 {
color: var(--neutral-600);
margin: 0.3rem;
}
/* Responsive Adjustments */
@media (max-width: 900px) {
._daysHeader_fmwmw_7 {
top: 3.795rem;
}
._dayCell_fmwmw_23 {
justify-content: center;
flex-direction: column-reverse;
}
._dayNumber_fmwmw_47 {
margin: 0 auto;
}
._dayName_fmwmw_70 {
left: auto;
left: initial;
transform: none;
transform: initial;
position: relative;
font-size: 1rem;
font-weight: var(--font-weight-semibold);
color: var(--neutral-400);
white-space: nowrap;
}
}
._pastTimeCell_fmwmw_270 {
background-color: #f0f0f0;
opacity: 0.6;
pointer-events: none;
}
._pastDayOverlay_fmwmw_276,
._futureDayOverlay_fmwmw_277 {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-weight-semibold);
z-index: 1;
height: var(--cell-width);
}
/* Only hide when height is less than 45px */
@container card (height < 45px) {
._sessionSubtitle_fmwmw_232 {
display: none;
}
._content_fmwmw_166 {
justify-content: center;
}
._sessionTitle_fmwmw_202 {
-webkit-line-clamp: 1;
margin: auto 0;
max-height: 1.2em;
}
}
._sessionCard_fmwmw_154[style*='height:'] ._sessionSubtitle_fmwmw_232 {
display: none;
}
/*******************Card color************************/
/*****************************************************/
.___sim_fmwmw_308 {
background-color: var(--sim-color);
}
.___exams_fmwmw_311 {
background-color: var(--exams-color);
}
.___meeting_fmwmw_314 {
background-color: var(--meeting-color);
}
.___classroom_fmwmw_317 {
background-color: var(--classroom-color);
}
.___demonstration_fmwmw_320 {
background-color: var(--demonstration-color);
}
.___maintenance_fmwmw_323 {
background-color: var(--maintenance-color);
}
.___other_fmwmw_326 {
background-color: var(--other-color);
}
.___default_fmwmw_329 {
background-color: var(--default-color);
}
.___cancelled_fmwmw_332 {
background-color: var(--cancelled-color);
}
/*******************Card background color*************/
/*****************************************************/
.___sim__card_background_color_fmwmw_338 {
background-color: var(--sim-bg-color);
}
.___exams__card_background_color_fmwmw_341 {
background-color: var(--exams-bg-color);
}
.___meeting__card_background_color_fmwmw_344 {
background-color: var(--meeting-bg-color);
}
.___classroom__card_background_color_fmwmw_347 {
background-color: var(--classroom-bg-color);
}
.___demonstration__card_background_color_fmwmw_350 {
background-color: var(--demonstration-bg-color);
}
.___maintenance__card_background_color_fmwmw_353 {
background-color: var(--maintenance-bg-color);
}
.___other__card_background_color_fmwmw_356 {
background-color: var(--other-bg-color);
}
.___default__card_background_color_fmwmw_359 {
background-color: var(--default-bg-color);
}
.___cancelled__card_background_color_fmwmw_362 {
background-color: var(--cancelled-bg-color);
}
/*******************Card Border color*****************/
/*****************************************************/
.___sim__card_border_color_fmwmw_368 {
border-color: var(--sim-color);
}
.___exams__card_border_color_fmwmw_371 {
border-color: var(--exams-color);
}
.___meeting__card_border_color_fmwmw_374 {
border-color: var(--meeting-color);
}
.___classroom__card_border_color_fmwmw_377 {
border-color: var(--classroom-color);
}
.___demonstration__card_border_color_fmwmw_380 {
border-color: var(--demonstration-color);
}
.___maintenance__card_border_color_fmwmw_383 {
border-color: var(--maintenance-color);
}
.___other__card_border_color_fmwmw_386 {
border-color: var(--other-color);
}
.___default__card_border_color_fmwmw_389 {
border-color: var(--default-color);
}
.___card_border_notify_fmwmw_392 {
border-color: var(--primary-color);
}
.___cancelled__card_border_color_fmwmw_395 {
border-color: var(--default-bg-color);
}
/* Remove Btn */
._scheduleRemoveButton_fmwmw_399 {
position: absolute;
right: 0.125rem;
z-index: 100;
backdrop-filter: blur(0.063rem);
overflow: hidden;
bottom: 0rem;
width: auto;
max-width: 100%;
white-space: nowrap;
text-align: right;
transform: translateX(0);
display: block;
text-overflow: ellipsis;
}
._lineThrough_fmwmw_415 {
text-decoration: line-through;
color: var(--neutral-600);
}