:root {
    font-family: Roboto, system-ui, sans-serif;

    /*--md-ref-typeface-brand: Roboto;*/
    /*--md-ref-typeface-plain: system-ui;*/
    --md-sys-typescale-body-medium-size: 1rem;
    --md-sys-typescale-body-medium-line-height: 1.5rem;

    --catalog-image-border-radius: 22px;
}

/*old*/
.dark-g {
    --md-sys-color-primary: rgb(133 210 231);
    --md-sys-color-surface-tint: rgb(133 210 231);
    --md-sys-color-on-primary: rgb(0 54 65);
    --md-sys-color-primary-container: rgb(0 78 93);
    --md-sys-color-on-primary-container: rgb(174 236 255);
    --md-sys-color-secondary: rgb(133 210 231);
    --md-sys-color-on-secondary: rgb(0 54 65);
    --md-sys-color-secondary-container: rgb(0 78 93);
    --md-sys-color-on-secondary-container: rgb(173 236 255);
    --md-sys-color-tertiary: rgb(186 195 255);
    --md-sys-color-on-tertiary: rgb(34 44 97);
    --md-sys-color-tertiary-container: rgb(57 67 121);
    --md-sys-color-on-tertiary-container: rgb(222 224 255);
    --md-sys-color-error: rgb(255 180 171);
    --md-sys-color-on-error: rgb(86 30 25);
    --md-sys-color-error-container: rgb(115 52 45);
    --md-sys-color-on-error-container: rgb(255 218 213);
    --md-sys-color-background: rgb(15 20 22);
    --md-sys-color-on-background: rgb(222 227 230);
    --md-sys-color-surface: rgb(15 20 22);
    --md-sys-color-on-surface: rgb(222 227 230);
    --md-sys-color-surface-variant: rgb(63 72 75);
    --md-sys-color-on-surface-variant: rgb(191 200 203);
    --md-sys-color-outline: rgb(137 146 149);
    --md-sys-color-outline-variant: rgb(63 72 75);
    --md-sys-color-shadow: rgb(0 0 0);
    --md-sys-color-scrim: rgb(0 0 0);
    --md-sys-color-inverse-surface: rgb(222 227 230);
    --md-sys-color-inverse-on-surface: rgb(44 49 51);
    --md-sys-color-inverse-primary: rgb(0 104 123);
    --md-sys-color-primary-fixed: rgb(174 236 255);
    --md-sys-color-on-primary-fixed: rgb(0 31 38);
    --md-sys-color-primary-fixed-dim: rgb(133 210 231);
    --md-sys-color-on-primary-fixed-variant: rgb(0 78 93);
    --md-sys-color-secondary-fixed: rgb(173 236 255);
    --md-sys-color-on-secondary-fixed: rgb(0 31 38);
    --md-sys-color-secondary-fixed-dim: rgb(133 210 231);
    --md-sys-color-on-secondary-fixed-variant: rgb(0 78 93);
    --md-sys-color-tertiary-fixed: rgb(222 224 255);
    --md-sys-color-on-tertiary-fixed: rgb(11 21 75);
    --md-sys-color-tertiary-fixed-dim: rgb(186 195 255);
    --md-sys-color-on-tertiary-fixed-variant: rgb(57 67 121);
    --md-sys-color-surface-dim: rgb(15 20 22);
    --md-sys-color-surface-bright: rgb(52 58 60);
    --md-sys-color-surface-container-lowest: rgb(9 15 17);
    --md-sys-color-surface-container-low: rgb(23 28 30);
    --md-sys-color-surface-container: rgb(27 32 34);
    --md-sys-color-surface-container-high: rgb(37 43 45);
    --md-sys-color-surface-container-highest: rgb(48 54 56);

    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

/*new2*/
.dark {
    --md-sys-color-primary: rgb(211 188 253);
    --md-sys-color-surface-tint: rgb(211 188 253);
    --md-sys-color-on-primary: rgb(56 38 92);
    --md-sys-color-primary-container: rgb(80 61 116);
    --md-sys-color-on-primary-container: rgb(235 221 255);
    --md-sys-color-secondary: rgb(205 194 219);
    --md-sys-color-on-secondary: rgb(52 45 64);
    --md-sys-color-secondary-container: rgb(75 67 88);
    --md-sys-color-on-secondary-container: rgb(233 222 248);
    --md-sys-color-tertiary: rgb(240 183 197);
    --md-sys-color-on-tertiary: rgb(74 37 48);
    --md-sys-color-tertiary-container: rgb(100 59 70);
    --md-sys-color-on-tertiary-container: rgb(255 217 225);
    --md-sys-color-error: rgb(255 180 171);
    --md-sys-color-on-error: rgb(105 0 5);
    --md-sys-color-error-container: rgb(147 0 10);
    --md-sys-color-on-error-container: rgb(255 218 214);
    --md-sys-color-background: rgb(21 18 24);
    --md-sys-color-on-background: rgb(231 224 232);
    --md-sys-color-surface: rgb(21 18 24);
    --md-sys-color-on-surface: rgb(231 224 232);
    --md-sys-color-surface-variant: rgb(73 69 78);
    --md-sys-color-on-surface-variant: rgb(203 196 207);
    --md-sys-color-outline: rgb(148 143 153);
    --md-sys-color-outline-variant: rgb(73 69 78);
    --md-sys-color-shadow: rgb(0 0 0);
    --md-sys-color-scrim: rgb(0 0 0);
    --md-sys-color-inverse-surface: rgb(231 224 232);
    --md-sys-color-inverse-on-surface: rgb(50 47 53);
    --md-sys-color-inverse-primary: rgb(104 84 142);
    --md-sys-color-primary-fixed: rgb(235 221 255);
    --md-sys-color-on-primary-fixed: rgb(35 15 70);
    --md-sys-color-primary-fixed-dim: rgb(211 188 253);
    --md-sys-color-on-primary-fixed-variant: rgb(80 61 116);
    --md-sys-color-secondary-fixed: rgb(233 222 248);
    --md-sys-color-on-secondary-fixed: rgb(31 24 43);
    --md-sys-color-secondary-fixed-dim: rgb(205 194 219);
    --md-sys-color-on-secondary-fixed-variant: rgb(75 67 88);
    --md-sys-color-tertiary-fixed: rgb(255 217 225);
    --md-sys-color-on-tertiary-fixed: rgb(49 16 27);
    --md-sys-color-tertiary-fixed-dim: rgb(240 183 197);
    --md-sys-color-on-tertiary-fixed-variant: rgb(100 59 70);
    --md-sys-color-surface-dim: rgb(21 18 24);
    --md-sys-color-surface-bright: rgb(59 56 62);
    --md-sys-color-surface-container-lowest: rgb(15 13 19);
    --md-sys-color-surface-container-low: rgb(29 27 32);
    --md-sys-color-surface-container: rgb(33 31 36);
    --md-sys-color-surface-container-high: rgb(44 41 47);
    --md-sys-color-surface-container-highest: rgb(54 52 58);

    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

/*new2*/
.light {
    --md-sys-color-primary: rgb(104 84 142);
    --md-sys-color-surface-tint: rgb(104 84 142);
    --md-sys-color-on-primary: rgb(255 255 255);
    --md-sys-color-primary-container: rgb(235 221 255);
    --md-sys-color-on-primary-container: rgb(80 61 116);
    --md-sys-color-secondary: rgb(99 91 112);
    --md-sys-color-on-secondary: rgb(255 255 255);
    --md-sys-color-secondary-container: rgb(233 222 248);
    --md-sys-color-on-secondary-container: rgb(75 67 88);
    --md-sys-color-tertiary: rgb(126 82 93);
    --md-sys-color-on-tertiary: rgb(255 255 255);
    --md-sys-color-tertiary-container: rgb(255 217 225);
    --md-sys-color-on-tertiary-container: rgb(100 59 70);
    --md-sys-color-error: rgb(186 26 26);
    --md-sys-color-on-error: rgb(255 255 255);
    --md-sys-color-error-container: rgb(255 218 214);
    --md-sys-color-on-error-container: rgb(147 0 10);
    --md-sys-color-background: rgb(254 247 255);
    --md-sys-color-on-background: rgb(29 27 32);
    --md-sys-color-surface: rgb(254 247 255);
    --md-sys-color-on-surface: rgb(29 27 32);
    --md-sys-color-surface-variant: rgb(231 224 235);
    --md-sys-color-on-surface-variant: rgb(73 69 78);
    --md-sys-color-outline: rgb(122 117 127);
    --md-sys-color-outline-variant: rgb(203 196 207);
    --md-sys-color-shadow: rgb(0 0 0);
    --md-sys-color-scrim: rgb(0 0 0);
    --md-sys-color-inverse-surface: rgb(50 47 53);
    --md-sys-color-inverse-on-surface: rgb(245 239 247);
    --md-sys-color-inverse-primary: rgb(211 188 253);
    --md-sys-color-primary-fixed: rgb(235 221 255);
    --md-sys-color-on-primary-fixed: rgb(35 15 70);
    --md-sys-color-primary-fixed-dim: rgb(211 188 253);
    --md-sys-color-on-primary-fixed-variant: rgb(80 61 116);
    --md-sys-color-secondary-fixed: rgb(233 222 248);
    --md-sys-color-on-secondary-fixed: rgb(31 24 43);
    --md-sys-color-secondary-fixed-dim: rgb(205 194 219);
    --md-sys-color-on-secondary-fixed-variant: rgb(75 67 88);
    --md-sys-color-tertiary-fixed: rgb(255 217 225);
    --md-sys-color-on-tertiary-fixed: rgb(49 16 27);
    --md-sys-color-tertiary-fixed-dim: rgb(240 183 197);
    --md-sys-color-on-tertiary-fixed-variant: rgb(100 59 70);
    --md-sys-color-surface-dim: rgb(222 216 224);
    --md-sys-color-surface-bright: rgb(254 247 255);
    --md-sys-color-surface-container-lowest: rgb(255 255 255);
    --md-sys-color-surface-container-low: rgb(248 241 250);
    --md-sys-color-surface-container: rgb(242 236 244);
    --md-sys-color-surface-container-high: rgb(237 230 238);
    --md-sys-color-surface-container-highest: rgb(231 224 232);

    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.surface-container {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

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

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

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

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

.surface-container-on-gray {
    color: var(--md-sys-color-outline);
}

.surface-container-error {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.surface-container-success {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.md-file-input::file-selector-button {
    border-radius: 9999px;
    border-width: 0;
    height: 40px;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 14px;
    font-family: system-ui;
    font-weight: 500;
    margin-right: 0.5rem;
}

.md-paper {
    border-radius: var(--catalog-image-border-radius);
}

.md-outlined {
    border: 1px solid var(--md-sys-color-outline);
}

.md-snackbar-container {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    z-index: 99999999999;
    position: absolute;
    bottom: 5rem;
    display: flex;
    justify-content: center;
}

.md-snackbar {
    border-radius: 9999px;
    padding-left: 1rem;
    font-size: 14px;
    font-family: system-ui;
    font-weight: 500;
    width: fit-content;
    display: flex;
    align-items: center;
    position: relative;
    --md-elevation-level: 3;
}

.md-snackbar-error {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.md-snackbar-info {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.md-snackbar-success {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.md-snackbar-warning {
    background-color: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}