@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");

:root {
    --sys-background: #faf8ff;
    --sys-on-background: #191b22;
    --sys-inverse-surface: #313030;
    --sys-inverse-on-surface: #f4f0ef;
    --sys-surface: #fdfdfd;
    --sys-surface-bright: #ffffff;
    --sys-surface-container: #fcf8f8;
    --sys-surface-container-high: #ebe7e7;
    --sys-surface-container-highest: #e5e2e1;
    --sys-surface-container-low: #e5ebf5;
    --sys-surface-container-lowest: #f7f9fb;
    --sys-on-surface: #232325;
    --sys-surface-dim: #ddd9d9;
    --sys-surface-tint: #1d57c9;
    --sys-surface-variant: #e2e2e6;
    --sys-on-surface-variant: #60646a;
    --sys-outline: #7b7d7f;
    --sys-outline-variant: #dfe0e3;
    --sys-shadow: #000000;
    --sys-scrim: #000000;
    --sys-error: #990d16;
    --sys-error-container: #bc2b2b;
    --sys-on-error: #ffffff;
    --sys-on-error-container: #ffebe8;
    --sys-success: #006e1c;
    --sys-success-container: #00a526;
    --sys-on-success: #ffffff;
    --sys-on-success-container: #002203;
    --sys-positive-container: #ddfee2;
    --sys-negative-container: #ffedeb;
    --sys-border: 1px solid var(--sys-outline-variant);
    --sys-border-radius-small: 4px;
    --sys-border-radius-large: 12px;
    --sys-grid-unit: 4px;
    --sys-gap-xsmall: 4px;
    --sys-gap-small: 8px;
    --sys-gap-medium: 12px;
    --sys-gap-large: 16px;
    --sys-gap-xlarge: 20px;
    --sys-display-large: 400 36px / 44px Inter, sans-serif;
    --sys-display-large-tracking: 0;
    --sys-display-medium: 400 32px / 40px Inter, sans-serif;
    --sys-display-medium-tracking: 0;
    --sys-display-small: 400 28px / 36px Inter, sans-serif;
    --sys-display-small-tracking: 0;
    --sys-headline-large: 400 24px / 32px Inter, sans-serif;
    --sys-headline-large-tracking: 0;
    --sys-headline-medium: 400 20px / 28px Inter, sans-serif;
    --sys-headline-medium-tracking: 0;
    --sys-headline-small: 400 16px / 24px Inter, sans-serif;
    --sys-headline-small-tracking: 0;
    --sys-body-large: 400 16px / 24px Inter, sans-serif;
    --sys-body-large-font: Inter, sans-serif;
    --sys-body-large-line-height: 24px;
    --sys-body-large-size: 16px;
    --sys-body-large-tracking: 0.5px;
    --sys-body-large-weight: 400;
    --sys-body-medium: 400 14px / 20px Inter, sans-serif;
    --sys-body-medium-font: Inter, sans-serif;
    --sys-body-medium-line-height: 20px;
    --sys-body-medium-size: 14px;
    --sys-body-medium-tracking: 0.25px;
    --sys-body-medium-weight: 400;
    --sys-body-small: 400 12px / 16px Inter, sans-serif;
    --sys-body-small-font: Inter, sans-serif;
    --sys-body-small-line-height: 16px;
    --sys-body-small-size: 12px;
    --sys-body-small-tracking: 0.4px;
    --sys-body-small-weight: 400;
    --sys-label-large: 600 14px / 20px Inter, sans-serif;
    --sys-label-large-font: Inter, sans-serif;
    --sys-label-large-line-height: 20px;
    --sys-label-large-size: 14px;
    --sys-label-large-tracking: 0.1px;
    --sys-label-large-weight: 600;
    --sys-label-large-weight-prominent: 700;
    --sys-label-medium: 600 12px / 16px Inter, sans-serif;
    --sys-label-medium-font: Inter, sans-serif;
    --sys-label-medium-line-height: 16px;
    --sys-label-medium-size: 12px;
    --sys-label-medium-tracking: 0.5px;
    --sys-label-medium-weight: 600;
    --sys-label-medium-weight-prominent: 700;
    --sys-label-small: 600 10px / 16px Inter, sans-serif;
    --sys-label-small-font: Inter, sans-serif;
    --sys-label-small-line-height: 16px;
    --sys-label-small-size: 10px;
    --sys-label-small-tracking: 0.5px;
    --sys-label-small-weight: 600;
    --sys-title-large: 700 24px / 28px Inter, sans-serif;
    --sys-title-large-font: Inter, sans-serif;
    --sys-title-large-line-height: 28px;
    --sys-title-large-size: 24px;
    --sys-title-large-tracking: 0;
    --sys-title-large-weight: 700;
    --sys-title-medium: 700 20px / 26px Inter, sans-serif;
    --sys-title-medium-font: Inter, sans-serif;
    --sys-title-medium-line-height: 26px;
    --sys-title-medium-size: 20px;
    --sys-title-medium-tracking: 0.15px;
    --sys-title-medium-weight: 700;
    --sys-title-small: 700 16px / 24px Inter, sans-serif;
    --sys-title-small-font: Inter, sans-serif;
    --sys-title-small-line-height: 24px;
    --sys-title-small-size: 16px;
    --sys-title-small-tracking: 0.1px;
    --sys-title-small-weight: 700;
    --sys-primary: #1150c3;
    --sys-primary-container: #386add;
    --sys-primary-fixed: #dae1ff;
    --sys-primary-fixed-dim: #b3c5ff;
    --sys-on-primary: #ffffff;
    --sys-on-primary-container: #fdfdfd;
    --sys-on-primary-fixed: #001849;
    --sys-on-primary-fixed-variant: #003fa4;
    --sys-inverse-primary: #b3c5ff;
    --sys-secondary: #323a4d;
    --sys-secondary-container: #57637c;
    --sys-secondary-fixed: #d7e2ff;
    --sys-secondary-fixed-dim: #bac7e3;
    --sys-on-secondary: #ffffff;
    --sys-on-secondary-container: #e9f0ff;
    --sys-on-secondary-fixed: #0f1b31;
    --sys-on-secondary-fixed-variant: #3b475f;
    --sys-tertiary: #7b5800;
    --sys-tertiary-container: #f0b323;
    --sys-tertiary-fixed: #fcf0d3;
    --sys-tertiary-fixed-dim: #fbbc2e;
    --sys-on-tertiary: #ffffff;
    --sys-on-tertiary-container: #644700;
    --sys-on-tertiary-fixed: #261900;
    --sys-on-tertiary-fixed-variant: #5d4200;
    --sys-divergent-1: #083b56;
    --sys-divergent-2: #336b89;
    --sys-divergent-3: #6ba1d7;
    --sys-divergent-4: #a4b6d8;
    --sys-divergent-5: #d3dce6;
    --sys-divergent-6: #ffd480;
    --sys-divergent-7: #ffb366;
    --sys-divergent-8: #ff9e4a;
    --sys-divergent-9: #cc6a1d;
    --sys-divergent-10: #a66321;
    --sys-sequential-1: #d3e3ed;
    --sys-sequential-2: #b4cfe3;
    --sys-sequential-3: #96bad9;
    --sys-sequential-4: #78a6cf;
    --sys-sequential-5: #5a91c5;
    --sys-sequential-6: #3b7dbb;
    --sys-sequential-7: #2f6ba2;
    --sys-sequential-8: #235889;
    --sys-sequential-9: #174670;
    --sys-sequential-10: #083b56;
    --sys-categorical-1: #1a422d;
    --sys-categorical-2: #8fd3af;
    --sys-categorical-3: #1f7a58;
    --sys-categorical-4: #ff9e4a;
    --sys-categorical-5: #ffd480;
    --sys-categorical-6: #a66321;
    --sys-categorical-7: #a4b6d8;
    --sys-categorical-8: #295c75;
    --sys-categorical-9: #6ba1d7;
    --sys-categorical-10: #083b56;
}

:root.theme-subaru {
    --sys-primary: #0061a5;
    --sys-primary-container: #0099ff;
    --sys-primary-fixed: #d2e4ff;
    --sys-primary-fixed-dim: #9fcaff;
    --sys-on-primary: #ffffff;
    --sys-on-primary-container: #fdfdfd;
    --sys-on-primary-fixed: #001d36;
    --sys-on-primary-fixed-variant: #00497e;
    --sys-inverse-primary: #91b9ec;
    --sys-secondary: #02015a;
    --sys-secondary-container: #47476b;
    --sys-secondary-fixed: #d7e2ff;
    --sys-secondary-fixed-dim: #bfc2ff;
    --sys-on-secondary: #ffffff;
    --sys-on-secondary-container: #e9f0ff;
    --sys-on-secondary-fixed: #090c5e;
    --sys-on-secondary-fixed-variant: #3a3f8a;
    --sys-tertiary: #003870;
    --sys-tertiary-container: #194f90;
    --sys-tertiary-fixed: #d5e3ff;
    --sys-tertiary-fixed-dim: #9cb9ea;
    --sys-on-tertiary: #ffffff;
    --sys-on-tertiary-container: #bbbbef;
    --sys-on-tertiary-fixed: #001b3c;
    --sys-on-tertiary-fixed-variant: #113861;
    --sys-divergent-1: #005e98;
    --sys-divergent-2: #007bb5;
    --sys-divergent-3: #0099d2;
    --sys-divergent-4: #7cbbe4;
    --sys-divergent-5: #cad4e5;
    --sys-divergent-6: #ffd59e;
    --sys-divergent-7: #ffb865;
    --sys-divergent-8: #ff9c2c;
    --sys-divergent-9: #d4731f;
    --sys-divergent-10: #a94b12;
    --sys-sequential-1: #e0e7f6;
    --sys-sequential-2: #c6d3ef;
    --sys-sequential-3: #a7bde7;
    --sys-sequential-4: #8aa7df;
    --sys-sequential-5: #6c91d7;
    --sys-sequential-6: #4d7bcf;
    --sys-sequential-7: #3b61b8;
    --sys-sequential-8: #2e4a92;
    --sys-sequential-9: #20346c;
    --sys-sequential-10: #121e46;
    --sys-categorical-1: #3b61b8;
    --sys-categorical-2: #7c99d2;
    --sys-categorical-3: #cad4e5;
    --sys-categorical-4: #0066bb;
    --sys-categorical-5: #00b9e3;
    --sys-categorical-6: #005e98;
    --sys-categorical-7: #0099ff;
    --sys-categorical-8: #0ba4db;
    --sys-categorical-9: #662d91;
    --sys-categorical-10: #b0913d;
}

:root .next-ui {
    font: var(--sys-body-large);
}

:root .next-ui .title-large {
    font: var(--sys-title-large);
    letter-spacing: var(--sys-title-large-tracking);
}

:root .next-ui .title-medium {
    font: var(--sys-title-medium);
    letter-spacing: var(--sys-title-medium-tracking);
}

:root .next-ui .title-small {
    font: var(--sys-title-small);
    letter-spacing: var(--sys-title-small-tracking);
}

:root .next-ui .label-large {
    font: var(--sys-label-large);
    letter-spacing: var(--sys-label-large-tracking);
}

:root .next-ui .label-medium {
    font: var(--sys-label-medium);
    letter-spacing: var(--sys-label-medium-tracking);
}

:root .next-ui .label-small {
    font: var(--sys-label-small);
    letter-spacing: var(--sys-label-small-tracking);
}

:root .next-ui .body-large {
    font: var(--sys-body-large);
    letter-spacing: var(--sys-body-large-tracking);
}

:root .next-ui .body-medium {
    font: var(--sys-body-medium);
    letter-spacing: var(--sys-body-medium-tracking);
}

:root .next-ui .body-small {
    font: var(--sys-body-small);
    letter-spacing: var(--sys-body-small-tracking);
}

:root .next-ui .container-highest {
    background-color: var(--sys-surface-container-highest);
    color: var(--sys-on-surface);
}

:root .next-ui .container-high {
    background-color: var(--sys-surface-container-high);
    color: var(--sys-on-surface);
}

:root .next-ui .container {
    background-color: var(--sys-surface-container);
    color: var(--sys-on-surface);
}

:root .next-ui .container-low {
    background-color: var(--sys-surface-container-low);
    color: var(--sys-on-surface);
}

:root .next-ui .container-lowest {
    background-color: var(--sys-surface-container-lowest);
    color: var(--sys-on-surface);
}

:root .next-ui .bordered,
:root .next-ui .small-rounded-border {
    border: var(--sys-border);
    border-radius: var(--sys-border-radius-small);
}

:root .next-ui .no-overflow {
    overflow: hidden;
}

:root .next-ui .clip-overflow {
    overflow: clip;
}

:root .next-ui .hide-overflow {
    overflow: hidden;
}

:root .next-ui :not([style*="overflow: visible"]) {
    scrollbar-color: var(--sys-on-surface-variant) var(--sys-surface-variant);
    scrollbar-width: thin;
}