:root, body.light {
    --primary: #6750A4;
    --on-primary: #FFF;
    --primary-container: #EADDFF;
    --on-primary-container: #21005E;
    --secondary: #625B71;
    --on-secondary: #FFF;
    --secondary-container: #E8DEF8;
    --on-secondary-container: #1E192B;
    --tertiary: #7D5260;
    --on-tertiary: #FFF;
    --tertiary-container: #FFD8E4;
    --on-tertiary-container: #370B1E;
    --error: #B3261E;
    --on-error: #FFF;
    --error-container: #F9DEDC;
    --on-error-container: #370B1E;
    --background: #FFFBFE;
    --on-background: #1C1B1F;
    --surface: #FFFBFE;
    --on-surface: #1C1B1F;
    --outline: #79747E;
    --surface-variant: #E7E0EC;
    --on-surface-variant: #49454E;
    --inverse-surface: #313033;
    --inverse-on-surface: #F4EFF4;
    --body: #FFF;
    --overlay: rgb(0 0 0 / .5);
    --active: rgb(0 0 0 / .1);
    --elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .14), 0 .0625rem .3125rem 0 rgb(0 0 0 / .12), 0 .1875rem .0625rem -.125rem rgb(0 0 0 / .2);
    --elevate2: 0 .375rem .625rem 0 rgb(0 0 0 / .14), 0 .0625rem 1.125rem 0 rgb(0 0 0 / .12), 0 .1875rem .3125rem -.0625rem rgb(0 0 0 / .3);
    --elevate3: 0 .625rem 1rem 0 rgb(0 0 0 / .14), 0 .0625rem 1.9375rem 0 rgb(0 0 0 / .12), 0 .1875rem .5625rem 0 rgb(0 0 0 / .4);
    --size: 16px;
    --font: "Roboto Flex", "Roboto", sans-serif, system-ui, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial";
    --speed1: .1s;
    --speed2: .2s;
    --speed3: .3s;
    --speed4: .4s
}

body.dark {
    --primary: #D0BCFF;
    --on-primary: #371E73;
    --primary-container: #4F378B;
    --on-primary-container: #EADDFF;
    --secondary: #CCC2DC;
    --on-secondary: #332D41;
    --secondary-container: #4A4458;
    --on-secondary-container: #E8DEF8;
    --tertiary: #EFB8C8;
    --on-tertiary: #492532;
    --tertiary-container: #633B48;
    --on-tertiary-container: #FFD8E4;
    --error: #F2B8B5;
    --on-error: #601410;
    --error-container: #8C1D18;
    --on-error-container: #F9DEDC;
    --background: #1C1B1F;
    --on-background: #E6E1E5;
    --surface: #1C1B1F;
    --on-surface: #E6E1E5;
    --outline: #938F99;
    --surface-variant: #49454F;
    --on-surface-variant: #CAC4D0;
    --inverse-surface: #E6E1E5;
    --inverse-on-surface: #313033;
    --body: #000;
    --overlay: rgb(0 0 0 / .5);
    --active: rgb(255 255 255 / .2);
    --elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .14), 0 .0625rem .3125rem 0 rgb(0 0 0 / .12), 0 .1875rem .0625rem -.125rem rgb(0 0 0 / .2);
    --elevate2: 0 .375rem .625rem 0 rgb(0 0 0 / .14), 0 .0625rem 1.125rem 0 rgb(0 0 0 / .12), 0 .1875rem .3125rem -.0625rem rgb(0 0 0 / .3);
    --elevate3: 0 .625rem 1rem 0 rgb(0 0 0 / .14), 0 .0625rem 1.9375rem 0 rgb(0 0 0 / .12), 0 .1875rem .5625rem 0 rgb(0 0 0 / .4);
    --size: 16px;
    --font: "Roboto Flex", "Roboto", sans-serif, system-ui, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial";
    --speed1: .1s;
    --speed2: .2s;
    --speed3: .3s;
    --speed4: .4s
}

@font-face {
    font-family: Material Symbols Outlined;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../material-symbols/material-symbols-outlined.woff2) format("woff2")
}

* {
    -webkit-tap-highlight-color: transparent;
    position: relative;
    vertical-align: middle;
    color: inherit;
    margin: 0;
    padding: 0;
    border-radius: inherit;
    box-sizing: border-box
}

body {
    color: var(--on-background);
    background-color: var(--body);
    overflow-x: hidden
}

label {
    font-size: .75rem;
    vertical-align: baseline
}

a, b, i, span {
    vertical-align: bottom
}

a, button, .button {
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    border: none;
    font-family: inherit;
    outline: inherit;
    justify-content: center
}

.primary {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important
}

.primary-text {
    color: var(--primary) !important
}

.primary-border {
    border-color: var(--primary) !important
}

.primary-container {
    background-color: var(--primary-container) !important;
    color: var(--on-primary-container) !important
}

.secondary {
    background-color: var(--secondary) !important;
    color: var(--on-secondary) !important
}

.secondary-text {
    color: var(--secondary) !important
}

.secondary-border {
    border-color: var(--secondary) !important
}

.secondary-container {
    background-color: var(--secondary-container) !important;
    color: var(--on-secondary-container) !important
}

.tertiary {
    background-color: var(--tertiary) !important;
    color: var(--on-tertiary) !important
}

.tertiary-text {
    color: var(--tertiary) !important
}

.tertiary-border {
    border-color: var(--tertiary) !important
}

.tertiary-container {
    background-color: var(--tertiary-container) !important;
    color: var(--on-tertiary-container) !important
}

.error {
    background-color: var(--error) !important;
    color: var(--on-error) !important
}

.error-text {
    color: var(--error) !important
}

.error-border {
    border-color: var(--error) !important
}

.error-container {
    background-color: var(--error-container) !important;
    color: var(--on-error-container) !important
}

.background {
    background-color: var(--background) !important;
    color: var(--on-background) !important
}

.surface {
    background-color: var(--surface) !important;
    color: var(--on-surface) !important
}

.surface-variant {
    background-color: var(--surface-variant) !important;
    color: var(--on-surface-variant) !important
}

.inverse-surface {
    background-color: var(--inverse-surface);
    color: var(--inverse-on-surface)
}

.black {
    background-color: #000 !important
}

.black-border {
    border-color: #000 !important
}

.black-text {
    color: #000 !important
}

.white {
    background-color: #fff !important
}

.white-border {
    border-color: #fff !important
}

.white-text {
    color: #fff !important
}

.transparent {
    background-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important
}

.transparent-border {
    border-color: transparent !important
}

.transparent-text {
    color: transparent !important
}

.fill:not(i) {
    background-color: var(--surface-variant) !important;
    color: var(--on-surface-variant) !important
}

.middle-align {
    display: flex;
    align-items: center !important
}

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

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

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

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

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

.red, .red6 {
    background-color: #f44336 !important
}

.red-border {
    border-color: #f44336 !important
}

.red-text {
    color: #f44336 !important
}

.red1 {
    background-color: #ffebee !important
}

.red2 {
    background-color: #ffcdd2 !important
}

.red3 {
    background-color: #ef9a9a !important
}

.red4 {
    background-color: #e57373 !important
}

.red5 {
    background-color: #ef5350 !important
}

.red7 {
    background-color: #e53935 !important
}

.red8 {
    background-color: #d32f2f !important
}

.red9 {
    background-color: #c62828 !important
}

.red10 {
    background-color: #b71c1c !important
}

.pink, .pink6 {
    background-color: #e91e63 !important
}

.pink-border {
    border-color: #e91e63 !important
}

.pink-text {
    color: #e91e63 !important
}

.pink1 {
    background-color: #fce4ec !important
}

.pink2 {
    background-color: #f8bbd0 !important
}

.pink3 {
    background-color: #f48fb1 !important
}

.pink4 {
    background-color: #f06292 !important
}

.pink5 {
    background-color: #ec407a !important
}

.pink7 {
    background-color: #d81b60 !important
}

.pink8 {
    background-color: #c2185b !important
}

.pink9 {
    background-color: #ad1457 !important
}

.pink10 {
    background-color: #880e4f !important
}

.purple, .purple6 {
    background-color: #9c27b0 !important
}

.purple-border {
    border-color: #9c27b0 !important
}

.purple-text {
    color: #9c27b0 !important
}

.purple1 {
    background-color: #f3e5f5 !important
}

.purple2 {
    background-color: #e1bee7 !important
}

.purple3 {
    background-color: #ce93d8 !important
}

.purple4 {
    background-color: #ba68c8 !important
}

.purple5 {
    background-color: #ab47bc !important
}

.purple7 {
    background-color: #8e24aa !important
}

.purple8 {
    background-color: #7b1fa2 !important
}

.purple9 {
    background-color: #6a1b9a !important
}

.purple10 {
    background-color: #4a148c !important
}

.deep-purple, .deep-purple6 {
    background-color: #673ab7 !important
}

.deep-purple-border {
    border-color: #673ab7 !important
}

.deep-purple-text {
    color: #673ab7 !important
}

.deep-purple1 {
    background-color: #ede7f6 !important
}

.deep-purple2 {
    background-color: #d1c4e9 !important
}

.deep-purple3 {
    background-color: #b39ddb !important
}

.deep-purple4 {
    background-color: #9575cd !important
}

.deep-purple5 {
    background-color: #7e57c2 !important
}

.deep-purple7 {
    background-color: #5e35b1 !important
}

.deep-purple8 {
    background-color: #512da8 !important
}

.deep-purple9 {
    background-color: #4527a0 !important
}

.deep-purple10 {
    background-color: #311b92 !important
}

.indigo, .indigo6 {
    background-color: #3f51b5 !important
}

.indigo-border {
    border-color: #3f51b5 !important
}

.indigo-text {
    color: #3f51b5 !important
}

.indigo1 {
    background-color: #e8eaf6 !important
}

.indigo2 {
    background-color: #c5cae9 !important
}

.indigo3 {
    background-color: #9fa8da !important
}

.indigo4 {
    background-color: #7986cb !important
}

.indigo5 {
    background-color: #5c6bc0 !important
}

.indigo7 {
    background-color: #3949ab !important
}

.indigo8 {
    background-color: #303f9f !important
}

.indigo9 {
    background-color: #283593 !important
}

.indigo10 {
    background-color: #1a237e !important
}

.blue, .blue6 {
    background-color: #2196f3 !important
}

.blue-border {
    border-color: #2196f3 !important
}

.blue-text {
    color: #2196f3 !important
}

.blue1 {
    background-color: #e3f2fd !important
}

.blue2 {
    background-color: #bbdefb !important
}

.blue3 {
    background-color: #90caf9 !important
}

.blue4 {
    background-color: #64b5f6 !important
}

.blue5 {
    background-color: #42a5f5 !important
}

.blue7 {
    background-color: #1e88e5 !important
}

.blue8 {
    background-color: #1976d2 !important
}

.blue9 {
    background-color: #1565c0 !important
}

.blue10 {
    background-color: #0d47a1 !important
}

.light-blue, .light-blue6 {
    background-color: #03a9f4 !important
}

.light-blue-border {
    border-color: #03a9f4 !important
}

.light-blue-text {
    color: #03a9f4 !important
}

.light-blue1 {
    background-color: #e1f5fe !important
}

.light-blue2 {
    background-color: #b3e5fc !important
}

.light-blue3 {
    background-color: #81d4fa !important
}

.light-blue4 {
    background-color: #4fc3f7 !important
}

.light-blue5 {
    background-color: #29b6f6 !important
}

.light-blue7 {
    background-color: #039be5 !important
}

.light-blue8 {
    background-color: #0288d1 !important
}

.light-blue9 {
    background-color: #0277bd !important
}

.light-blue10 {
    background-color: #01579b !important
}

.cyan, .cyan6 {
    background-color: #00bcd4 !important
}

.cyan-border {
    border-color: #00bcd4 !important
}

.cyan-text {
    color: #00bcd4 !important
}

.cyan1 {
    background-color: #e0f7fa !important
}

.cyan2 {
    background-color: #b2ebf2 !important
}

.cyan3 {
    background-color: #80deea !important
}

.cyan4 {
    background-color: #4dd0e1 !important
}

.cyan5 {
    background-color: #26c6da !important
}

.cyan7 {
    background-color: #00acc1 !important
}

.cyan8 {
    background-color: #0097a7 !important
}

.cyan9 {
    background-color: #00838f !important
}

.cyan10 {
    background-color: #006064 !important
}

.teal, .teal6 {
    background-color: #009688 !important
}

.teal-border {
    border-color: #009688 !important
}

.teal-text {
    color: #009688 !important
}

.teal1 {
    background-color: #e0f2f1 !important
}

.teal2 {
    background-color: #b2dfdb !important
}

.teal3 {
    background-color: #80cbc4 !important
}

.teal4 {
    background-color: #4db6ac !important
}

.teal5 {
    background-color: #26a69a !important
}

.teal7 {
    background-color: #00897b !important
}

.teal8 {
    background-color: #00796b !important
}

.teal9 {
    background-color: #00695c !important
}

.teal10 {
    background-color: #004d40 !important
}

.green, .green6 {
    background-color: #4caf50 !important
}

.green-border {
    border-color: #4caf50 !important
}

.green-text {
    color: #4caf50 !important
}

.green1 {
    background-color: #e8f5e9 !important
}

.green2 {
    background-color: #c8e6c9 !important
}

.green3 {
    background-color: #a5d6a7 !important
}

.green4 {
    background-color: #81c784 !important
}

.green5 {
    background-color: #66bb6a !important
}

.green7 {
    background-color: #43a047 !important
}

.green8 {
    background-color: #388e3c !important
}

.green9 {
    background-color: #2e7d32 !important
}

.green10 {
    background-color: #1b5e20 !important
}

.light-green, .light-green6 {
    background-color: #8bc34a !important
}

.light-green-border {
    border-color: #8bc34a !important
}

.light-green-text {
    color: #8bc34a !important
}

.light-green1 {
    background-color: #f1f8e9 !important
}

.light-green2 {
    background-color: #dcedc8 !important
}

.light-green3 {
    background-color: #c5e1a5 !important
}

.light-green4 {
    background-color: #aed581 !important
}

.light-green5 {
    background-color: #9ccc65 !important
}

.light-green7 {
    background-color: #7cb342 !important
}

.light-green8 {
    background-color: #689f38 !important
}

.light-green9 {
    background-color: #558b2f !important
}

.light-green10 {
    background-color: #33691e !important
}

.lime, .lime6 {
    background-color: #cddc39 !important
}

.lime-border {
    border-color: #cddc39 !important
}

.lime-text {
    color: #cddc39 !important
}

.lime1 {
    background-color: #f9fbe7 !important
}

.lime2 {
    background-color: #f0f4c3 !important
}

.lime3 {
    background-color: #e6ee9c !important
}

.lime4 {
    background-color: #dce775 !important
}

.lime5 {
    background-color: #d4e157 !important
}

.lime7 {
    background-color: #c0ca33 !important
}

.lime8 {
    background-color: #afb42b !important
}

.lime9 {
    background-color: #9e9d24 !important
}

.lime10 {
    background-color: #827717 !important
}

.yellow, .yellow6 {
    background-color: #ffeb3b !important
}

.yellow-border {
    border-color: #ffeb3b !important
}

.yellow-text {
    color: #ffeb3b !important
}

.yellow1 {
    background-color: #fffde7 !important
}

.yellow2 {
    background-color: #fff9c4 !important
}

.yellow3 {
    background-color: #fff59d !important
}

.yellow4 {
    background-color: #fff176 !important
}

.yellow5 {
    background-color: #ffee58 !important
}

.yellow7 {
    background-color: #fdd835 !important
}

.yellow8 {
    background-color: #fbc02d !important
}

.yellow9 {
    background-color: #f9a825 !important
}

.yellow10 {
    background-color: #f57f17 !important
}

.amber, .amber6 {
    background-color: #ffc107 !important
}

.amber-border {
    border-color: #ffc107 !important
}

.amber-text {
    color: #ffc107 !important
}

.amber1 {
    background-color: #fff8e1 !important
}

.amber2 {
    background-color: #ffecb3 !important
}

.amber3 {
    background-color: #ffe082 !important
}

.amber4 {
    background-color: #ffd54f !important
}

.amber5 {
    background-color: #ffca28 !important
}

.amber7 {
    background-color: #ffb300 !important
}

.amber8 {
    background-color: #ffa000 !important
}

.amber9 {
    background-color: #ff8f00 !important
}

.amber10 {
    background-color: #ff6f00 !important
}

.orange, .orange6 {
    background-color: #ff9800 !important
}

.orange-border {
    border-color: #ff9800 !important
}

.orange-text {
    color: #ff9800 !important
}

.orange1 {
    background-color: #fff3e0 !important
}

.orange2 {
    background-color: #ffe0b2 !important
}

.orange3 {
    background-color: #ffcc80 !important
}

.orange4 {
    background-color: #ffb74d !important
}

.orange5 {
    background-color: #ffa726 !important
}

.orange7 {
    background-color: #fb8c00 !important
}

.orange8 {
    background-color: #f57c00 !important
}

.orange9 {
    background-color: #ef6c00 !important
}

.orange10 {
    background-color: #e65100 !important
}

.deep-orange, .deep-orange6 {
    background-color: #ff5722 !important
}

.deep-orange-border {
    border-color: #ff5722 !important
}

.deep-orange-text {
    color: #ff5722 !important
}

.deep-orange1 {
    background-color: #fbe9e7 !important
}

.deep-orange2 {
    background-color: #ffccbc !important
}

.deep-orange3 {
    background-color: #ffab91 !important
}

.deep-orange4 {
    background-color: #ff8a65 !important
}

.deep-orange5 {
    background-color: #ff7043 !important
}

.deep-orange7 {
    background-color: #f4511e !important
}

.deep-orange8 {
    background-color: #e64a19 !important
}

.deep-orange9 {
    background-color: #d84315 !important
}

.deep-orange10 {
    background-color: #bf360c !important
}

.brown, .brown6 {
    background-color: #795548 !important
}

.brown-border {
    border-color: #795548 !important
}

.brown-text {
    color: #795548 !important
}

.brown1 {
    background-color: #efebe9 !important
}

.brown2 {
    background-color: #d7ccc8 !important
}

.brown3 {
    background-color: #bcaaa4 !important
}

.brown4 {
    background-color: #a1887f !important
}

.brown5 {
    background-color: #8d6e63 !important
}

.brown7 {
    background-color: #6d4c41 !important
}

.brown8 {
    background-color: #5d4037 !important
}

.brown9 {
    background-color: #4e342e !important
}

.brown10 {
    background-color: #3e2723 !important
}

.blue-grey, .blue-grey6 {
    background-color: #607d8b !important
}

.blue-grey-border {
    border-color: #607d8b !important
}

.blue-grey-text {
    color: #607d8b !important
}

.blue-grey1 {
    background-color: #eceff1 !important
}

.blue-grey2 {
    background-color: #cfd8dc !important
}

.blue-grey3 {
    background-color: #b0bec5 !important
}

.blue-grey4 {
    background-color: #90a4ae !important
}

.blue-grey5 {
    background-color: #78909c !important
}

.blue-grey7 {
    background-color: #546e7a !important
}

.blue-grey8 {
    background-color: #455a64 !important
}

.blue-grey9 {
    background-color: #37474f !important
}

.blue-grey10 {
    background-color: #263238 !important
}

.grey, .grey6 {
    background-color: #9e9e9e !important
}

.grey-border {
    border-color: #9e9e9e !important
}

.grey-text {
    color: #9e9e9e !important
}

.grey1 {
    background-color: #fafafa !important
}

.grey2 {
    background-color: #f5f5f5 !important
}

.grey3 {
    background-color: #eee !important
}

.grey4 {
    background-color: #e0e0e0 !important
}

.grey5 {
    background-color: #bdbdbd !important
}

.grey7 {
    background-color: #757575 !important
}

.grey8 {
    background-color: #616161 !important
}

.grey9 {
    background-color: #424242 !important
}

.grey10 {
    background-color: #212121 !important
}

.horizontal {
    display: inline-flex;
    flex-direction: row !important;
    gap: 1rem;
    width: auto !important;
    max-width: none !important
}

.horizontal > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.vertical, .vertical:is(button,.button,.chip) {
    display: inline-flex;
    flex-direction: column !important;
    gap: .25rem;
    height: auto !important;
    max-height: none !important;
    padding-top: .5rem;
    padding-bottom: .5rem
}

.vertical > * {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.divider, .small-divider, .medium-divider, .large-divider {
    border-bottom: .0625rem solid var(--outline);
    display: block;
    margin: 0 !important
}

.medium-divider {
    margin: 1rem 0 !important
}

.large-divider {
    margin: 1.5rem 0 !important
}

.small-divider {
    margin: .5rem 0 !important
}

.no-elevate {
    box-shadow: none !important
}

.small-elevate, .elevate {
    box-shadow: var(--elevate1) !important
}

.medium-elevate {
    box-shadow: var(--elevate2) !important
}

.large-elevate {
    box-shadow: var(--elevate3) !important
}

.round:not(i,img,video,svg) {
    border-radius: 2rem !important
}

.no-round {
    border-radius: 0 !important
}

.top-round {
    border-radius: 2rem 2rem 0 0 !important
}

.bottom-round {
    border-radius: 0 0 2rem 2rem !important
}

.left-round {
    border-radius: 2rem 0 0 2rem !important
}

.right-round {
    border-radius: 0 2rem 2rem 0 !important
}

.top-round.left-round {
    border-radius: 2rem 2rem 0 !important
}

.top-round.right-round {
    border-radius: 2rem 2rem 2rem 0 !important
}

.bottom-round.left-round {
    border-radius: 2rem 0 2rem 2rem !important
}

.bottom-round.right-round {
    border-radius: 0 2rem 2rem !important
}

.circle {
    border-radius: 50%
}

:is(button,.button,.chip).circle {
    border-radius: 2.5rem
}

:is(.circle,.square):not(i,img,video,svg) {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0
}

:is(.circle,.square) > span {
    display: none
}

:is(.circle,.square).small:not(i,img,video,svg) {
    height: 2rem;
    width: 2rem
}

:is(.circle,.square).large:not(i,img,video,svg) {
    height: 3rem;
    width: 3rem
}

:is(.circle,.square).extra:not(i,img,video,svg) {
    height: 3.5rem;
    width: 3.5rem
}

:is(.circle,.square).round {
    border-radius: 1rem !important
}

.border:not(table,.field) {
    box-sizing: border-box;
    border: .0625rem solid var(--outline);
    background-color: transparent;
    box-shadow: none
}

.no-margin {
    margin: 0 !important
}

.tiny-margin {
    padding: .25rem !important
}

.small-margin {
    margin: .5rem !important
}

.medium-margin, .margin {
    margin: 1rem !important
}

.large-margin {
    margin: 1.5rem !important
}

.no-opacity {
    opacity: 0
}

.opacity {
    opacity: 1
}

.no-padding {
    padding: 0 !important
}

.tiny-padding {
    padding: .25rem !important
}

.small-padding {
    padding: .5rem !important
}

.medium-padding, .padding {
    padding: 1rem !important
}

.large-padding {
    padding: 1.5rem !important
}

.front {
    z-index: 10 !important
}

.back {
    z-index: -10 !important
}

.left {
    left: 0
}

.right {
    right: 0
}

.top {
    top: 0
}

.bottom {
    bottom: 0
}

.center {
    left: 50%;
    transform: translate(-50%)
}

.middle {
    top: 50%;
    transform: translateY(-50%)
}

.middle.center {
    transform: translate(-50%, -50%)
}

.scroll {
    overflow: auto
}

.no-scroll {
    overflow: hidden
}

.small-width {
    width: 12rem !important;
    max-width: 100%
}

.medium-width {
    width: 24rem !important;
    max-width: 100%
}

.large-width {
    width: 36rem !important;
    max-width: 100%
}

.small-height {
    height: 12rem !important
}

.medium-height {
    height: 24rem !important
}

.large-height {
    height: 36rem !important
}

.wrap {
    display: block;
    white-space: normal
}

.no-wrap:not(.dropdown) {
    display: flex;
    white-space: nowrap
}

.tiny-space:not(nav,.row,.grid,table) {
    height: .5rem
}

:is(.space,.small-space):not(nav,.row,.grid,table) {
    height: 1rem
}

.medium-space:not(nav,.row,.grid,table) {
    height: 2rem
}

.large-space:not(nav,.row,.grid,table) {
    height: 3rem
}

.responsive {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch
}

@media only screen and (max-width: 600px) {
    .m:not(.s), .l:not(.s), .m.l:not(.s) {
        display: none
    }
}

@media only screen and (min-width: 601px) and (max-width: 992px) {
    .s:not(.m), .l:not(.m), .s.l:not(.m) {
        display: none
    }
}

@media only screen and (min-width: 993px) {
    .m:not(.l), .s:not(.l), .m.s:not(.l) {
        display: none
    }
}

html {
    font-size: var(--size)
}

body {
    font-family: var(--font);
    font-size: .875rem
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    display: flex;
    align-items: center;
    margin-bottom: .5rem
}

* + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {
    margin-top: 1rem
}

h1 {
    font-size: 3.5625rem
}

h2 {
    font-size: 2.8125rem
}

h3 {
    font-size: 2.25rem
}

h4 {
    font-size: 2rem
}

h5 {
    font-size: 1.75rem
}

h6 {
    font-size: 1.5rem
}

h1.small {
    font-size: 3.0625rem
}

h2.small {
    font-size: 2.3125rem
}

h3.small {
    font-size: 1.75rem
}

h4.small {
    font-size: 1.5rem
}

h5.small {
    font-size: 1.25rem
}

h6.small {
    font-size: 1rem
}

h1.large {
    font-size: 4.0625rem
}

h2.large {
    font-size: 3.3125rem
}

h3.large {
    font-size: 2.75rem
}

h4.large {
    font-size: 2.5rem
}

h5.large {
    font-size: 2.25rem
}

h6.large {
    font-size: 2rem
}

.link {
    color: var(--primary) !important
}

.truncate {
    overflow: hidden;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    flex: inherit
}

.truncate > * {
    white-space: nowrap !important
}

.small-text {
    font-size: .75rem
}

.medium-text {
    font-size: .875rem
}

.large-text {
    font-size: 1rem
}

.upper {
    text-transform: uppercase
}

.lower {
    text-transform: lowercase
}

.capitalize {
    text-transform: capitalize
}

.bold {
    font-weight: 700
}

.overline {
    text-decoration: line-through
}

.underline {
    text-decoration: underline
}

.italic {
    font-style: italic
}

p {
    margin: .5rem 0
}

.wave:after, .wave.light:after, :is(.chip,.button,button):after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    background-position: center;
    background-image: radial-gradient(circle, rgb(255 255 255 / .4) 1%, transparent 1%);
    opacity: 0;
    transition: none
}

.wave.dark:after, .wave.row:after, :is(.button,button).none:after, :is(.chip,.button,button).border:after, :is(.chip,.button,button).transparent:after {
    background-image: radial-gradient(circle, rgb(150 150 150 / .2) 1%, transparent 1%)
}

.wave.none:after, :is(.button,button).none:after {
    top: 0;
    left: -.25rem;
    padding: 0 .25rem
}

.wave.none:not(.small,.medium,.large,.extra):after, :is(.button,button).none:not(.small,.medium,.large,.extra):after {
    top: -.25rem;
    left: -.25rem;
    padding: .25rem
}

:is(.wave,.chip,.button,button):is(:focus,:hover):after {
    background-size: 15000%;
    opacity: 1;
    transition: var(--speed2) background-size linear
}

:is(.wave,.chip,.button,button):active:after {
    background-size: 5000%;
    opacity: 0;
    transition: none
}

.no-wave:after, .no-wave:is(:hover,:active):after {
    display: none
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    font-size: .75rem;
    text-transform: none;
    z-index: 1;
    padding: 0 .375rem;
    background-color: var(--error);
    color: var(--on-error);
    top: 0;
    left: auto;
    bottom: auto;
    right: 0;
    transform: translate(50%, -100%);
    height: 1.25rem
}

.badge.none {
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
    transform: none;
    position: relative;
    margin: 0 .125rem
}

.badge.top {
    top: 0;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -100%)
}

.badge.bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    right: auto;
    transform: translate(-50%, 100%)
}

.badge.left {
    top: 50%;
    left: 0;
    bottom: auto;
    right: auto;
    transform: translate(-100%, -50%)
}

.badge.right {
    top: 50%;
    left: auto;
    bottom: auto;
    right: 0;
    transform: translate(100%, -50%)
}

.badge.top.left {
    top: 0;
    left: 0;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -100%)
}

.badge.top.right {
    top: 0;
    left: auto;
    bottom: auto;
    right: 0;
    transform: translate(50%, -100%)
}

.badge.bottom.left {
    top: auto;
    left: 0;
    bottom: 0;
    right: auto;
    transform: translate(-50%, 100%)
}

.badge.bottom.right {
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
    transform: translate(50%, 100%)
}

.badge.border {
    border: .0625rem solid var(--error);
    color: var(--error)
}

.badge:is(.circle,.square) {
    padding: 0;
    text-align: center;
    width: 1.25rem;
    height: 1.25rem
}

.badge.circle {
    border-radius: 50%
}

.badge.square {
    border-radius: 0
}

.button, button {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    min-width: 2.5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--on-primary);
    padding: 0 1.5rem;
    background-color: var(--primary);
    margin: 0 .5rem;
    border-radius: .5rem;
    transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
    user-select: none;
    gap: 1rem
}

:is(button,.button).none {
    width: auto;
    height: auto;
    color: var(--primary);
    padding: 0;
    background-color: transparent;
    min-width: auto;
    min-height: 1.5rem
}

:is(button,.button).small {
    height: 2rem;
    min-width: 2rem;
    font-size: .875rem
}

:is(button,.button).large {
    height: 3rem;
    min-width: 3rem
}

:is(.button,button):is(.extra,.extend) {
    height: 3.5rem;
    min-width: 3.5rem;
    font-size: 1rem
}

:is(button,.button).border {
    border: .0625rem solid var(--primary);
    color: var(--primary)
}

:is(.button,button).extend > span {
    display: none
}

:is(.button,button).extend:hover, :is(.button,button).extend.active {
    width: auto;
    padding: 0 1rem
}

:is(button,.button):is(:hover,.active).extend > i + span {
    display: inherit;
    margin-left: 2rem
}

:is(.button,button):is(:hover,.active).extend > :is(img,svg) + span {
    display: inherit;
    margin-left: 3rem
}

.button[disabled], button:disabled {
    opacity: .5;
    cursor: not-allowed
}

.button[disabled] {
    pointer-events: none
}

.button[disabled]:before, button:disabled:before, .button[disabled]:after, button:disabled:after {
    display: none
}

:is(.button,button).fill {
    background-color: var(--secondary-container) !important;
    color: var(--on-secondary-container) !important
}

article {
    box-shadow: var(--elevate1);
    background-color: var(--surface);
    color: var(--on-surface);
    padding: 1rem;
    border-radius: .75rem;
    display: block;
    transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding
}

* + article {
    margin-top: 1rem
}

article.small {
    height: 12rem
}

article.medium {
    height: 20rem
}

article.large {
    height: 32rem
}

.chip {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    min-width: 2.5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--on-secondary);
    padding: 0 1rem;
    background-color: var(--secondary);
    margin: 0 .5rem;
    text-transform: none;
    border-radius: .5rem;
    transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
    user-select: none;
    gap: 1rem
}

.chip.small {
    height: 2rem;
    min-width: 2rem
}

.chip.large {
    height: 3rem;
    min-width: 3rem
}

.chip.border {
    border: .0625rem solid var(--secondary);
    color: var(--secondary)
}

.chip.fill {
    background-color: var(--secondary-container) !important;
    color: var(--on-secondary-container) !important;
    border: none
}

main.responsive {
    margin: 0 auto;
    max-width: 75rem;
    padding: .5rem;
    overflow-x: hidden;
    min-height: 100vh
}

main.responsive.max {
    max-width: 100%
}

nav.bottom:not(.s,.m,.l) ~ .responsive:not(header) {
    padding-bottom: 5rem
}

nav.top:not(.s,.m,.l) ~ .responsive:not(footer) {
    padding-top: 5rem
}

nav.left:not(.s,.m,.l) ~ .responsive {
    padding-left: 6rem
}

nav.right:not(.s,.m,.l) ~ .responsive {
    padding-right: 6rem
}

@media only screen and (max-width: 600px) {
    nav.s.bottom ~ .responsive:not(header) {
        padding-bottom: 5rem
    }

    nav.s.top ~ .responsive:not(footer) {
        padding-top: 5rem
    }

    nav.s.left ~ .responsive {
        padding-left: 6rem
    }

    nav.s.right ~ .responsive {
        padding-right: 6rem
    }
}

@media only screen and (min-width: 601px) and (max-width: 992px) {
    nav.m.bottom ~ .responsive:not(header) {
        padding-bottom: 5rem
    }

    nav.m.top ~ .responsive:not(footer) {
        padding-top: 5rem
    }

    nav.m.left ~ .responsive {
        padding-left: 6rem
    }

    nav.m.right ~ .responsive {
        padding-right: 6rem
    }
}

@media only screen and (min-width: 993px) {
    nav.l.bottom ~ .responsive:not(header) {
        padding-bottom: 5rem
    }

    nav.l.top ~ .responsive:not(footer) {
        padding-top: 5rem
    }

    nav.l.left ~ .responsive {
        padding-left: 6rem
    }

    nav.l.right ~ .responsive {
        padding-right: 6rem
    }
}

@media only screen and (max-width: 600px) {
    main.responsive {
        padding-right: .5rem;
        padding-left: .5rem
    }
}

.dropdown {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    box-shadow: var(--elevate2);
    background-color: var(--surface);
    z-index: 11;
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    width: 100%;
    max-height: 50vh;
    max-width: none;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: .875rem;
    font-weight: 400;
    text-transform: none;
    color: var(--on-surface);
    line-height: normal;
    text-align: left;
    border-radius: .25rem;
    transform: scale(.8) translateY(120%);
    transition: var(--speed2) all, 0s background-color
}

.dropdown.no-wrap {
    width: auto;
    white-space: nowrap !important
}

.dropdown.active, .dropdown:not([data-ui]):active, :not([data-ui]):focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(100%)
}

.dropdown.left {
    left: auto;
    right: 0
}

.dropdown * {
    white-space: inherit !important
}

.dropdown > a {
    padding: .75rem 1rem;
    border-radius: 0
}

.dropdown > a:not(.row) {
    display: block
}

.dropdown > a:is(:hover,:focus,.active) {
    background-color: var(--active)
}

.dropdown.min {
    top: 0;
    bottom: auto;
    transform: none !important;
    border-radius: inherit
}

.dropdown.max {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    max-height: none;
    min-height: auto;
    z-index: 100;
    border-radius: 0;
    transform: none !important
}

.dropdown.no-wrap:is(.min,.max) {
    min-width: 16rem
}

:is(.round,.circle):not(.square).small.field > .dropdown.min, :is(.round,.circle):not(.square):is(button,.button,.chip) > .dropdown.min {
    border-radius: 1.25rem
}

:is(.round,.circle):not(.square).field > .dropdown.min, :is(.round,.circle):not(.square):is(button,.button,.chip).large > .dropdown.min {
    border-radius: 1.5rem
}

:is(.round,.circle):not(.square).large.field > .dropdown.min, :is(.round,.circle):not(.square):is(button,.button,.chip).extra > .dropdown.min {
    border-radius: 1.75rem
}

:is(.round,.circle):not(.square).extra.field > .dropdown.min {
    border-radius: 2rem
}

summary.none {
    list-style-type: none
}

summary.none::-webkit-details-marker {
    display: none
}

summary {
    cursor: pointer
}

summary:focus {
    outline: none
}

.field {
    height: 3rem;
    margin-bottom: 2rem
}

* + .field {
    margin-top: 1rem
}

.grid > * > .field {
    margin-bottom: 1rem
}

.grid > * > .field + .field {
    margin-top: 2rem
}

.grid.no-space > * > .field + .field {
    margin-top: 1rem
}

.grid.medium-space > * > .field + .field {
    margin-top: 2.5rem
}

.grid.large-space > * > .field + .field {
    margin-top: 3rem
}

.field.small {
    height: 2.5rem
}

.field.medium {
    height: 3rem
}

.field.large {
    height: 3.5rem
}

.field.extra {
    height: 4rem
}

.field:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background-color: inherit
}

.field.fill:before {
    background-color: var(--surface-variant);
    color: var(--on-surface-variant)
}

.field > :is(i,img,svg,.loader) {
    position: absolute;
    top: 50%;
    left: auto;
    right: 1rem;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 0
}

.field:is(.border,.fill,.round) > :is(i,img,svg,.loader) {
    left: auto;
    right: 1rem
}

.field > :is(i,img,svg,.loader):first-child {
    left: 1rem;
    right: auto
}

.field:is(.border,.fill,.round) > :is(i,img,svg,.loader):first-child {
    left: 1rem;
    right: auto
}

.field.invalid > i {
    color: var(--error)
}

.field > .loader {
    border-width: .1875rem;
    width: 1.5rem;
    height: 1.5rem
}

.field > select, input[type^=date], input[type^=time], input[type^=search] {
    appearance: none;
    cursor: pointer
}

input[type^=date]::-webkit-inner-spin-button, input[type^=date]::-webkit-calendar-picker-indicator, input[type^=time]::-webkit-inner-spin-button, input[type^=time]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    cursor: pointer
}

input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    cursor: pointer
}

input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
    display: none
}

.field > :is(input,textarea,select) {
    border: .0625rem solid transparent;
    padding: 0 .9375rem;
    font-family: inherit;
    font-size: 1rem;
    width: 100%;
    height: 100%;
    outline: none;
    z-index: 1;
    background: none;
    resize: none
}

.field > :is(input,textarea,select):focus {
    border: .125rem solid transparent;
    padding: 0 .875rem
}

.field.border > :is(input,textarea,select) {
    border-color: var(--outline)
}

.field.border > :is(input,textarea,select):focus {
    border-color: var(--primary)
}

.field.round > :is(input,textarea,select) {
    padding-left: 1.4376rem;
    padding-right: 1.4376rem
}

.field.round > :is(input,textarea,select):focus {
    padding-left: 1.375rem;
    padding-right: 1.375rem
}

.field.prefix > :is(input,textarea,select) {
    padding-left: 2.9375rem
}

.field.prefix > .slider {
    margin-left: 3.5rem
}

.field.prefix > :is(input,textarea,select):focus {
    padding-left: 2.875rem
}

.field.suffix > :is(input,textarea,select) {
    padding-right: 2.9375rem
}

.field.suffix > .slider {
    margin-right: 3.5rem
}

.field.suffix > :is(input,textarea,select):focus {
    padding-right: 2.875rem
}

.field:not(.border,.round) > :is(input,textarea,select) {
    border-bottom-color: var(--outline)
}

.field:not(.border,.round) > :is(input,textarea,select):focus {
    border-bottom-color: var(--primary)
}

.field {
    border-radius: .25rem .25rem 0 0
}

.field.border {
    border-radius: .25rem
}

.field.round:not(.border,.fill) > :is(input,textarea,select), .field.round:not(.border) > :is(input,textarea,select):focus {
    box-shadow: var(--elevate1)
}

.field.round:not(.border,.fill) > :is(input,textarea,select):focus {
    box-shadow: var(--elevate2)
}

.field.invalid:not(.border,.round) > :is(input,textarea,select), .field.invalid:not(.border,.round) > :is(input,textarea,select):focus {
    border-bottom-color: var(--error)
}

.field.invalid.border > :is(input,textarea,select), .field.invalid.border > :is(input,textarea,select):focus {
    border-color: var(--error)
}

.field > :disabled {
    opacity: .5;
    cursor: not-allowed
}

.field.small.textarea {
    height: 4.5rem
}

.field.textarea, .field.medium.textarea {
    height: 5.5rem
}

.field.large.textarea {
    height: 6.5rem
}

.field.extra.textarea {
    height: 7.5rem
}

.field > select > option {
    background-color: var(--surface);
    color: var(--on-surface)
}

.field.label > input, .field.label > select {
    padding-top: 1rem
}

.field.label.border:not(.fill) > :is(input,select) {
    padding-top: 0
}

.field.label.small > textarea {
    padding-top: 1.125rem
}

.field.label > textarea, .field.label.medium > textarea {
    padding-top: 1.375rem
}

.field.label.large > textarea {
    padding-top: 1.625rem
}

.field.label.extra > textarea {
    padding-top: 1.875rem
}

.field.small:not(.label) > textarea, .field.small.border:not(.fill) > textarea {
    padding-top: .625rem
}

.field:not(.label) > textarea, .field.border:not(.fill) > textarea, .field.medium:not(.label) > textarea, .field.medium.border:not(.fill) > textarea {
    padding-top: .875rem
}

.field.large:not(.label) > textarea, .field.large.border:not(.fill) > textarea {
    padding-top: 1.125rem
}

.field.extra:not(.label) > textarea, .field.extra.border:not(.fill) > textarea {
    padding-top: 1.375rem
}

.field.label > label {
    position: absolute;
    top: 50%;
    left: 1rem;
    font-size: 1rem;
    transform: translateY(-50%);
    transition: var(--speed2) all, 0s background-color;
    z-index: 0
}

.field.label.textarea.small > label {
    top: 1.25rem
}

.field.label.textarea > label, .field.label.textarea.medium > label {
    top: 1.5rem
}

.field.label.textarea.large > label {
    top: 1.75rem
}

.field.label.textarea.extra > label {
    top: 2rem
}

.field.label.round > label {
    left: 1.5rem
}

.field.label.prefix > label {
    left: 3rem
}

.field.label > label.active, .field.label > [placeholder]:focus ~ label, .field.label > [placeholder]:not(:placeholder-shown) ~ label {
    font-size: .75rem;
    transform: translateY(-120%);
    z-index: 1
}

.field.label.border:not(.fill) > label.active, .field.label.border:not(.fill) > [placeholder]:focus ~ label, .field.label.border:not(.fill) > [placeholder]:not(:placeholder-shown) ~ label {
    font-size: .75rem;
    top: 0%;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 1
}

.field.label.border.round:not(.fill) > label.active, .field.label.border.round:not(.fill) > [placeholder]:focus ~ label, .field.label.border.round:not(.fill) > [placeholder]:not(:placeholder-shown) ~ label {
    left: 1.5rem;
    z-index: 1
}

.field.label > :focus ~ label {
    color: var(--primary)
}

.field.invalid > label {
    color: var(--error) !important
}

.field > label.required:after, .field.required > label:after {
    content: " * "
}

.field > :is(.helper,.error) {
    position: absolute;
    left: 1rem;
    bottom: 0;
    transform: translateY(100%);
    font-size: .75rem;
    background: none !important;
    padding-top: .125rem
}

a.helper {
    color: var(--primary)
}

.field > .error {
    color: var(--error) !important
}

.field.round > :is(.helper,.error) {
    left: 1.5rem
}

.field.invalid > .helper {
    display: none
}

table td > .field {
    max-height: 100%;
    height: 100%
}

.grid {
    --grid-gap: 1rem;
    display: grid;
    grid-template-columns:repeat(12, calc(8.33% - var(--grid-gap) + (var(--grid-gap) / 12)));
    gap: var(--grid-gap)
}

* + .grid {
    margin-top: 1rem
}

.grid.no-space {
    --grid-gap: 0rem
}

.grid.medium-space {
    --grid-gap: 1.5rem
}

.grid.large-space {
    --grid-gap: 2rem
}

.s1 {
    grid-area: auto/span 1
}

.s2 {
    grid-area: auto/span 2
}

.s3 {
    grid-area: auto/span 3
}

.s4 {
    grid-area: auto/span 4
}

.s5 {
    grid-area: auto/span 5
}

.s6 {
    grid-area: auto/span 6
}

.s7 {
    grid-area: auto/span 7
}

.s8 {
    grid-area: auto/span 8
}

.s9 {
    grid-area: auto/span 9
}

.s10 {
    grid-area: auto/span 10
}

.s11 {
    grid-area: auto/span 11
}

.s12 {
    grid-area: auto/span 12
}

@media only screen and (min-width: 601px) {
    .m1 {
        grid-area: auto/span 1
    }

    .m2 {
        grid-area: auto/span 2
    }

    .m3 {
        grid-area: auto/span 3
    }

    .m4 {
        grid-area: auto/span 4
    }

    .m5 {
        grid-area: auto/span 5
    }

    .m6 {
        grid-area: auto/span 6
    }

    .m7 {
        grid-area: auto/span 7
    }

    .m8 {
        grid-area: auto/span 8
    }

    .m9 {
        grid-area: auto/span 9
    }

    .m10 {
        grid-area: auto/span 10
    }

    .m11 {
        grid-area: auto/span 11
    }

    .m12 {
        grid-area: auto/span 12
    }
}

@media only screen and (min-width: 993px) {
    .l1 {
        grid-area: auto/span 1
    }

    .l2 {
        grid-area: auto/span 2
    }

    .l3 {
        grid-area: auto/span 3
    }

    .l4 {
        grid-area: auto/span 4
    }

    .l5 {
        grid-area: auto/span 5
    }

    .l6 {
        grid-area: auto/span 6
    }

    .l7 {
        grid-area: auto/span 7
    }

    .l8 {
        grid-area: auto/span 8
    }

    .l9 {
        grid-area: auto/span 9
    }

    .l10 {
        grid-area: auto/span 10
    }

    .l11 {
        grid-area: auto/span 11
    }

    .l12 {
        grid-area: auto/span 12
    }
}

i {
    --i-size: 1.5rem;
    font-family: Material Symbols Outlined;
    font-weight: 400;
    font-style: normal;
    font-size: var(--i-size);
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    width: var(--i-size);
    min-width: var(--i-size);
    height: var(--i-size);
    min-height: var(--i-size);
    box-sizing: content-box
}

i.tiny {
    --i-size: 1rem
}

i.small {
    --i-size: 1.25rem
}

i.large {
    --i-size: 1.75rem
}

i.extra {
    --i-size: 2rem
}

i.fill, a.row:is(:hover,:focus,.active) > i, .transparent:is(:hover,:focus) > i {
    font-variation-settings: "FILL" 1
}

i > :is(img,svg) {
    width: 100%;
    height: 100%;
    background-size: 100%;
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0
}

.absolute {
    position: absolute
}

.fixed {
    position: fixed
}

:is(.absolute,.fixed).left.right {
    width: auto
}

:is(.absolute,.fixed).left.right.small {
    height: 20rem
}

:is(.absolute,.fixed).left.right.medium {
    height: 28rem
}

:is(.absolute,.fixed).left.right.large {
    height: 44rem
}

:is(.absolute,.fixed).top.bottom.small {
    width: 20rem
}

:is(.absolute,.fixed).top.bottom.medium {
    width: 28rem
}

:is(.absolute,.fixed).top.bottom.large {
    width: 44rem
}

header, footer {
    padding: 0 1rem;
    background-color: var(--surface)
}

:is(header,footer).fixed {
    position: sticky;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 12;
    background-color: inherit;
    border-radius: 0
}

:is(header,footer).fixed:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 -.5rem;
    max-width: 100%;
    background-color: inherit
}

:is(.modal,.dropdown) > :is(header,footer) {
    padding: 0;
    background-color: inherit
}

article > :is(header,footer) {
    padding: inherit;
    padding-left: 0;
    padding-right: 0;
    z-index: 11 !important
}

:is(.modal,article,.padding,.medium-padding) > header.fixed {
    transform: translateY(-1rem)
}

:is(.modal,article,.padding,.medium-padding) > footer.fixed {
    transform: translateY(1rem)
}

.no-padding > :is(header,footer).fixed {
    transform: none
}

.small-padding > header.fixed {
    transform: translateY(-.5rem)
}

.small-padding > footer.fixed {
    transform: translateY(.5rem)
}

.large-padding > header.fixed {
    transform: translateY(-1.5rem)
}

.large-padding > footer.fixed {
    transform: translateY(1.5rem)
}

.loader {
    --loader-translate-y: 0;
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: .25rem solid var(--primary);
    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
    animation: 1.6s to-loader linear infinite;
    background: none !important
}

.loader.small {
    width: 1.5rem;
    height: 1.5rem;
    border-width: .1875rem
}

.loader.large {
    width: 3.5rem;
    height: 3.5rem;
    border-width: .3125rem
}

.loader.red {
    border-color: #f44336
}

.loader.pink {
    border-color: #e91e63
}

.loader.purple {
    border-color: #9c27b0
}

.loader.deep-purple {
    border-color: #673ab7
}

.loader.indigo {
    border-color: #3f51b5
}

.loader.blue {
    border-color: #2196f3
}

.loader.light-blue {
    border-color: #03a9f4
}

.loader.cyan {
    border-color: #00bcd4
}

.loader.teal {
    border-color: #009688
}

.loader.green {
    border-color: #4caf50
}

.loader.light-green {
    border-color: #8bc34a
}

.loader.lime {
    border-color: #cddc39
}

.loader.yellow {
    border-color: #ffeb3b
}

.loader.amber {
    border-color: #ffc107
}

.loader.orange {
    border-color: #ff9800
}

.loader.deep-orange {
    border-color: #ff5722
}

.loader.brown {
    border-color: #795548
}

.loader.blue-grey {
    border-color: #607d8b
}

.loader.grey {
    border-color: #9e9e9e
}

.loader.black {
    border-color: #000
}

.loader.white {
    border-color: #fff
}

.field > .loader {
    --loader-translate-y: -50%
}

@keyframes to-loader {
    0% {
        transform: translateY(var(--loader-translate-y)) rotate(0);
        clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%)
    }
    20% {
        clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%)
    }
    30% {
        clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%)
    }
    40% {
        clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%)
    }
    50% {
        clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%)
    }
    60% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%)
    }
    70% {
        clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%, 0% 50%)
    }
    80% {
        clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 50%)
    }
    90% {
        transform: translateY(var(--loader-translate-y)) rotate(360deg);
        clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%)
    }
    to {
        clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%)
    }
}

svg {
    fill: currentColor
}

:is(img,svg,video):is(.small,.medium,.large,.tiny,.extra,.round,.circle,.responsive) {
    object-fit: cover;
    object-position: center;
    transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
    height: 3rem;
    width: 3rem
}

:is(img,svg,video).round {
    border-radius: .5rem
}

:is(img,svg,video).circle {
    border-radius: 50%
}

:is(img,svg,video).tiny {
    height: 2rem;
    width: 2rem
}

:is(img,svg,video).small {
    height: 2.5rem;
    width: 2.5rem
}

:is(img,svg,video).large {
    height: 3.5rem;
    width: 3.5rem
}

:is(img,svg,video).extra {
    height: 4rem;
    width: 4rem
}

:is(img,svg,video).responsive {
    width: 100%;
    height: 100%;
    margin: 0 auto
}

:is(button,.button,.chip) > :is(img,svg).responsive {
    width: 2.5rem
}

:is(button,.button,.chip):not(.transparent) > :is(img,svg).responsive {
    border: .25rem solid transparent
}

:is(button,.button,.chip).small > :is(img,svg).responsive {
    width: 2rem
}

:is(button,.button,.chip).large > :is(img,svg).responsive {
    width: 3rem
}

:is(button,.button,.chip).extra > :is(img,svg).responsive {
    width: 3.5rem
}

:is(img,svg,video).responsive.tiny {
    width: 100%;
    height: 4rem
}

:is(img,svg,video).responsive.small {
    width: 100%;
    height: 8rem
}

:is(img,svg,video).responsive.medium {
    width: 100%;
    height: 12rem
}

:is(img,svg,video).responsive.large {
    width: 100%;
    height: 16rem
}

:is(img,svg,video).responsive.extra {
    width: 100%;
    height: 20rem
}

:is(img,svg,video).responsive.round {
    border-radius: 2rem
}

:is(img,svg,video).empty-state {
    max-width: 100%;
    width: 24rem
}

:is(button,.button,.chip,.field) > :is(img,svg):not(.responsive,.tiny,.small,.medium,.large,.extra), :is(.tabs,td) :is(img,svg):not(.responsive,.tiny,.small,.medium,.large,.extra) {
    min-width: 1.5rem;
    max-width: 1.5rem;
    min-height: 1.5rem;
    max-height: 1.5rem
}

:is(button,.button,.chip) > :is(i,img,svg), :is(button,.button,.chip) > :is(img,svg).responsive {
    margin: 0 -.5rem
}

:is(button,.button) > :is(img,svg).responsive {
    margin-left: -1.5rem
}

:is(button,.button) > span + :is(img,svg).responsive {
    margin-right: -1.5rem
}

.chip > :is(img,svg).responsive {
    margin-left: -1rem
}

.chip > span + :is(img,svg).responsive {
    margin-right: -1rem
}

:is(.circle,.square) > :is(img,svg).responsive {
    margin: 0
}

.extend > :is(i,img,svg) {
    margin: 0;
    position: absolute;
    left: 1rem
}

.extend > :is(img,svg).responsive {
    left: 0;
    width: 3.5rem
}

.extend.border > :is(img,svg).responsive {
    width: 3.375rem
}

.modal {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    box-shadow: var(--elevate2);
    color: var(--on-surface);
    background-color: var(--surface);
    padding: 1rem;
    z-index: 100;
    left: 50%;
    top: 10%;
    min-width: 20rem;
    max-width: 100%;
    max-height: 80%;
    overflow-x: hidden;
    overflow-y: auto;
    transition: var(--speed3) all, 0s background-color;
    transform: translate(-50%, -4rem)
}

.modal:not(.left,.right,.top,.bottom) {
    border-radius: .75rem
}

.modal.small {
    width: 25%;
    height: 25%
}

.modal.medium {
    width: 50%;
    height: 50%
}

.modal.large {
    width: 75%;
    height: 75%
}

.modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%)
}

.modal.active:is(.left,.right,.top,.bottom,.max) {
    transform: translate(0)
}

.modal.top {
    opacity: 1;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    height: auto;
    width: 100%;
    min-width: auto;
    max-height: 100%;
    transform: translateY(-100%)
}

.modal.left {
    opacity: 1;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: auto;
    height: 100%;
    max-height: 100%;
    transform: translate(-100%)
}

.modal.right {
    opacity: 1;
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
    width: auto;
    height: 100%;
    max-height: 100%;
    transform: translate(100%)
}

.modal.bottom {
    opacity: 1;
    top: auto;
    left: 0;
    right: auto;
    bottom: 0;
    height: auto;
    width: 100%;
    min-width: auto;
    max-height: 100%;
    transform: translateY(100%)
}

.modal.max {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    transform: translateY(4rem);
    border-radius: 0
}

.modal.small:is(.left,.right) {
    width: 20rem
}

.modal.medium:is(.left,.right) {
    width: 32rem
}

.modal.large:is(.left,.right) {
    width: 44rem
}

.modal.small:is(.top,.bottom) {
    height: 16rem
}

.modal.medium:is(.top,.bottom) {
    height: 24rem
}

.modal.large:is(.top,.bottom) {
    height: 32rem
}

nav > .modal, nav.left > .modal {
    z-index: 0;
    text-align: left;
    overflow-y: auto;
    background-color: inherit;
    padding: 1rem 1rem 1rem 5rem
}

nav.right > .modal {
    padding: 1rem 5rem 1rem 1rem
}

nav.top > .modal {
    padding: 5rem 3rem 1rem
}

nav.bottom > .modal {
    padding: 1rem 3rem 5rem
}

:is(.modal,nav) > a.row:is(:hover,.active) {
    background-color: var(--secondary-container)
}

:is(.modal,nav) > .row {
    padding: .75rem
}

.row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    border-radius: 0;
    gap: 1rem
}

:not(.divider,.small-divider,.medium-divider,.large-divider) + nav:not(.left,.right,.top,.bottom), :not(.divider,.small-divider,.medium-divider,.large-divider) + .row:not(a) {
    margin-top: 1rem
}

.row * {
    margin-top: 0;
    margin-bottom: 0
}

.row > * {
    margin: 0 !important;
    white-space: normal;
}

:is(nav,.row).no-space {
    gap: 0
}

:is(nav,.row).no-space > .border + .border {
    border-left: 0
}

:is(nav,.row).medium-space {
    gap: 1.5rem
}

:is(nav,.row).large-space {
    gap: 2rem
}

nav > .max, .row > .max {
    flex: auto
}

nav.wrap, .row.wrap {
    display: flex;
    flex-wrap: wrap
}

header > :is(nav,.row) {
    min-height: 4rem
}

footer > :is(nav,.row) {
    min-height: 5rem
}

:is(nav,.row) > .border.no-margin + .border.no-margin {
    border-left: 0
}

a.row.wave {
    padding: .75rem
}

nav:is(.left,.right,.top,.bottom) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 0;
    position: fixed;
    color: var(--on-surface);
    background-color: var(--surface);
    transform: none;
    z-index: 100;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    height: auto;
    width: auto;
    text-align: center;
    padding: .5rem
}

nav.left, nav.right {
    width: 5rem
}

nav:is(.top,.bottom) {
    height: 5rem
}

nav.top {
    bottom: auto;
    justify-content: center;
    flex-direction: row
}

nav.left {
    right: auto;
    justify-content: flex-start;
    flex-direction: column
}

nav.right {
    left: auto;
    justify-content: flex-start;
    flex-direction: column
}

nav.bottom {
    top: auto;
    justify-content: center;
    flex-direction: row
}

nav:is(.left,.right,.top,.bottom) > a:not(button,.button,.chip,img,video,svg) {
    min-width: 3.5rem;
    min-height: 3.5rem;
    text-align: center;
    display: flex;
    z-index: 101;
    flex-direction: column
}

nav:is(.left,.right) > a:not(button,.button,.chip,img,video,svg) {
    width: auto
}

nav:is(.top,.bottom) > a:not(button,.button,.chip,img,video,svg) {
    height: auto;
    width: 3.5rem
}

nav:is(.left,.right,.top,.bottom):before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: inherit;
    z-index: 101;
    border-radius: inherit
}

nav:is(.left,.right,.top,.bottom) > :not(.modal,.overlay) {
    z-index: 101
}

nav:is(.left,.right,.top,.bottom) > a:not(button,.button,.chip) > i {
    padding: .25rem;
    border-radius: 2rem;
    transition: var(--speed1) padding linear;
    margin: 0 auto
}

nav:is(.left,.right,.top,.bottom) > a:not(button,.button,.chip):is(:hover,:focus,.active) > i {
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
    padding: .25rem 1rem;
    font-variation-settings: "FILL" 1
}

nav.left > .modal {
    padding-left: 5.5rem
}

nav.right > .modal {
    padding-right: 5.5rem
}

nav.top > .modal {
    padding-top: 5.5rem
}

nav.bottom > .modal {
    padding-bottom: 5.5rem
}

nav.left-align, nav.top-align {
    justify-content: flex-start
}

nav.right-align, nav.bottom-align {
    justify-content: flex-end
}

nav.center-align, nav.middle-align {
    justify-content: center
}

nav:not(.left,.right) > .space {
    width: .5rem
}

nav:not(.left,.right) > .medium-space {
    width: 1rem
}

nav:not(.left,.right) > .large-space {
    width: 1.5rem
}

@media only screen and (max-width: 600px) {
    nav.top, nav.bottom {
        justify-content: space-around
    }
}

.overlay {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--on-background);
    background-color: var(--overlay);
    z-index: 100;
    transition: var(--speed3) all, 0s background-color
}

nav > .overlay {
    z-index: 0
}

.overlay.active {
    opacity: 1;
    visibility: visible
}

.page, :is(.page,.modal):not(.active) .page.active {
    opacity: 0;
    position: absolute;
    display: none
}

.page.active {
    opacity: 1;
    position: inherit;
    display: block
}

.page.top.active {
    animation: var(--speed4) page-to-bottom ease
}

.page.bottom.active {
    animation: var(--speed4) page-to-top ease
}

.page.left.active {
    animation: var(--speed4) page-to-right ease
}

.page.right.active {
    animation: var(--speed4) page-to-left ease
}

@keyframes page-to-bottom {
    0% {
        opacity: 0;
        transform: translateY(-4rem)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes page-to-top {
    0% {
        opacity: 0;
        transform: translateY(4rem)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes page-to-left {
    0% {
        opacity: 0;
        transform: translate(4rem)
    }
    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes page-to-right {
    0% {
        opacity: 0;
        transform: translate(-4rem)
    }
    to {
        opacity: 1;
        transform: translate(0)
    }
}

.progress {
    position: absolute;
    background-color: var(--active);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: var(--speed4) clip-path;
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%)
}

.progress.left {
    clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%)
}

.progress.right {
    clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%)
}

.progress.top {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)
}

.progress.bottom {
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)
}

.progress + * {
    margin-top: 0
}

.checkbox, .radio, .switch {
    width: auto;
    height: auto;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center
}

:is(.checkbox,.radio) > input {
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0
}

.switch > input {
    width: 3.25rem;
    height: 2rem;
    opacity: 0
}

:is(.checkbox,.radio,.switch) > span {
    display: inline-flex;
    align-items: center;
    color: var(--on-background);
    font-size: .875rem
}

:is(.checkbox,.radio) > span:not(:empty) {
    padding-left: .25rem
}

:is(.checkbox,.radio,.switch) > span:before, .icon > span > i {
    font-family: Material Symbols Outlined;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    width: 1.5rem;
    height: 1.5rem;
    box-sizing: border-box;
    margin: 0 auto;
    outline: none;
    color: var(--primary);
    position: absolute;
    left: -1.5rem;
    background-color: transparent;
    border-radius: 50%;
    user-select: none;
    z-index: 1;
    box-shadow: 0 0 0 0 var(--active);
    transition: var(--speed1) all
}

.switch > span:before, .switch.icon > span > i {
    position: absolute;
    left: 0;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--speed2) all;
    font-size: 1rem;
    user-select: none;
    min-width: auto;
    content: "";
    color: var(--surface-variant);
    background-color: var(--outline);
    transform: translate(-3rem, -50%) scale(.6)
}

.switch.icon > span > i {
    transform: translate(-3rem, -50%) scale(1)
}

.checkbox > span:before {
    content: "check_box_outline_blank"
}

.radio > span:before {
    content: "radio_button_unchecked"
}

.checkbox > input:checked + span:before {
    content: "check_box";
    font-variation-settings: "FILL" 1
}

.radio > input:checked + span:before {
    content: "radio_button_checked"
}

:is(.radio,.checkbox,.switch).icon > span:before {
    content: "" !important;
    font-variation-settings: unset !important
}

:is(.checkbox,.radio) > input:is(:focus,:hover) + span:before {
    background-color: var(--active);
    box-shadow: 0 0 0 .5rem var(--active)
}

.switch > input:is(:focus,:hover) + span:before, .switch.icon > input:is(:focus,:hover) + span > i {
    box-shadow: 0 0 0 .5rem var(--active)
}

:is(.checkbox,.radio) > input:checked + span:before, :is(.checkbox,.radio).icon > input:checked + span > i {
    color: var(--primary)
}

.icon > input:checked + span > i:first-child, .icon > span > i:last-child {
    opacity: 0
}

.icon > input:checked + span > i:last-child, .icon > span > i:first-child {
    opacity: 1
}

.switch > input:checked + span:after {
    border: none;
    background-color: var(--primary)
}

.switch > input:checked + span:before, .switch.icon > input:checked + span > i {
    content: "check";
    color: var(--primary);
    background-color: var(--on-primary);
    transform: translate(-1.75rem, -50%) scale(1)
}

:is(.checkbox,.radio,.switch) > input:disabled + span {
    opacity: .5;
    cursor: not-allowed
}

.checkbox + .checkbox, .radio + .radio, .switch + .switch {
    margin-left: .5rem
}

.switch > span:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    background-color: var(--active);
    border: .125rem solid var(--outline);
    box-sizing: border-box;
    width: 3.25rem;
    height: 2rem;
    border-radius: 2rem;
    transform: translate(-3.25rem, -50%)
}

.field > :is(nav,.row) {
    flex-grow: 1;
    padding: 0 1rem
}

.field.round > :is(nav,.row) {
    flex-grow: 1;
    padding: 0 1.5rem
}

.slider {
    display: flex;
    align-items: center !important;
    width: auto;
    margin: 1.125rem;
    flex: auto
}

.slider.small {
    width: 4rem;
    flex: none
}

.slider.medium {
    width: 8rem;
    flex: none
}

.slider.large {
    width: 12rem;
    flex: none
}

.slider.vertical {
    margin: .5rem auto !important;
    padding: 50% 0;
    transform: rotate(-90deg)
}

.slider > input {
    appearance: none;
    box-shadow: none;
    border: none;
    outline: none;
    pointer-events: none;
    width: 100%;
    height: .25rem;
    border-radius: 1rem;
    background: var(--active);
    z-index: 1;
    padding: 0;
    margin: 0
}

.slider > input:focus ~ .tooltip {
    display: inherit
}

.slider > input:only-of-type {
    cursor: pointer;
    pointer-events: all
}

.slider > input + input {
    position: absolute
}

.slider > input::-webkit-slider-thumb {
    appearance: none;
    box-shadow: none;
    border: none;
    outline: none;
    pointer-events: all;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 50%;
    background: var(--primary);
    transition: var(--speed1) all ease-out;
    cursor: pointer
}

.slider > input::-moz-range-thumb {
    appearance: none;
    box-shadow: none;
    border: none;
    outline: none;
    pointer-events: all;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 50%;
    background: var(--primary);
    transition: var(--speed1) all ease-out;
    cursor: pointer
}

.slider > input:not(:disabled):is(:focus,:hover)::-webkit-slider-thumb {
    box-shadow: 0 0 0 .625rem var(--active)
}

.slider > input:not(:disabled):is(:focus,:hover)::-moz-range-thumb {
    box-shadow: 0 0 0 .625rem var(--active)
}

.slider > input:disabled {
    cursor: not-allowed;
    opacity: 1
}

.slider > input:disabled::-webkit-slider-thumb {
    background: #9E9E9E;
    cursor: not-allowed
}

.slider > input:disabled::-moz-range-thumb {
    background: #9E9E9E;
    cursor: not-allowed
}

.slider > input:disabled + span {
    background: #9E9E9E
}

.slider > span {
    position: absolute;
    top: calc(50% - .1875rem);
    height: .375rem;
    border-radius: 1rem;
    background: var(--primary);
    z-index: 0
}

.slider > .tooltip, .slider > .tooltip.top {
    top: -1rem;
    left: 50%;
    right: auto;
    bottom: auto
}

.slider > .tooltip.bottom {
    top: auto;
    left: 50%;
    right: auto;
    bottom: -1rem
}

.slider > .tooltip.left {
    top: 50%;
    left: -.5rem;
    right: auto;
    bottom: auto
}

.slider > .tooltip.right {
    top: 50%;
    left: auto;
    right: -.5rem;
    bottom: auto
}

.slider.vertical > .tooltip, .slider.vertical > .tooltip.top {
    top: 50%;
    left: calc(100% + 1.5rem);
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%) rotate(90deg)
}

.slider.vertical > .tooltip.bottom {
    top: 50%;
    left: -1.5rem;
    right: auto;
    bottom: auto
}

.slider.vertical > .tooltip.left {
    top: calc(50% - 2rem);
    left: 50%;
    right: auto;
    bottom: auto
}

.slider.vertical > .tooltip.right {
    top: calc(50% + 2rem);
    left: 50%;
    right: auto;
    bottom: auto
}

.field > .slider {
    width: 100%
}

table {
    width: 100%;
    border-spacing: 0;
    font-size: .875rem;
    color: var(--on-background);
    text-align: left;
    border-radius: 0
}

table :is(th,td) {
    width: 1%;
    text-align: inherit;
    padding: .5rem
}

table th {
    font-weight: 500
}

table.border :is(th,td) {
    border-bottom: .0625rem solid var(--outline)
}

table.no-space :is(th,td) {
    padding: 0
}

table.medium-space :is(th,td) {
    padding: .75rem
}

table.large-space :is(th,td) {
    padding: 1rem
}

td > :is(.button,button,.none,.chip), td > nav > :is(.button,button,.none,.chip) {
    min-height: 1.5rem;
    max-height: 1.5rem
}

td > :is(.circle,.square):not(.tiny,.small,.medium,.large,.extra), td > nav > :is(.circle,.square):not(.tiny,.small,.medium,.large,.extra) {
    min-width: 1.5rem;
    max-width: 1.5rem;
    min-height: 1.5rem;
    max-height: 1.5rem
}

.tabs {
    display: flex;
    white-space: nowrap;
    border-bottom: .0625rem solid var(--outline);
    border-radius: 0
}

.tabs.min {
    padding: 0 1rem;
    gap: 2rem
}

.tabs:not(.left-align,.right-align,.center-align) {
    justify-content: space-around
}

* + .tabs {
    margin-top: 1rem
}

.tabs > a {
    display: flex;
    font-size: .875rem;
    font-weight: 500;
    color: var(--on-background);
    padding: .5rem 1rem;
    border-bottom: .125rem solid transparent;
    text-align: center;
    min-height: 3rem;
    width: 100%;
    gap: .25rem
}

.tabs.min > a {
    width: auto;
    padding: .5rem 0
}

.tabs.small > a {
    min-height: 2rem
}

.tabs.medium > a {
    min-height: 2.5rem
}

.tabs.large > a {
    min-height: 4rem
}

.tabs > a.active {
    color: var(--primary);
    border-bottom: .125rem solid var(--primary)
}

.tabs > a.active > i {
    color: var(--primary)
}

.tabs:is(.left-align,.center-align .right-align) > a {
    width: auto
}

.toast {
    position: fixed;
    top: auto;
    bottom: 6rem;
    left: 50%;
    right: auto;
    width: 80%;
    height: auto;
    z-index: 200;
    visibility: hidden;
    display: flex;
    box-shadow: var(--elevate2);
    color: var(--on-error);
    background-color: var(--error-background);
    padding: 1rem;
    opacity: 1;
    cursor: pointer;
    transform: translate(-50%);
    text-align: left;
    align-items: center;
    border-radius: .25rem;
    gap: .5rem
}

.toast.top {
    top: 6rem;
    bottom: auto
}

.toast.bottom {
    top: auto;
    bottom: 4.5rem
}

.toast.active {
    visibility: visible;
    animation: var(--speed2) toast-to-top
}

.toast.active.top {
    animation: var(--speed2) toast-to-bottom
}

@keyframes toast-to-top {
    0% {
        opacity: 0;
        transform: translate(-50%, 1rem)
    }
    to {
        opacity: 1;
        transform: translate(-50%)
    }
}

@keyframes toast-to-bottom {
    0% {
        opacity: 0;
        transform: translate(-50%, -1rem)
    }
    to {
        opacity: 1;
        transform: translate(-50%)
    }
}

@media only screen and (min-width: 993px) {
    .toast {
        width: 40%
    }
}

.tooltip {
    display: none;
    background-color: #000000e6;
    color: #fff;
    font-size: .75rem;
    text-align: center;
    border-radius: .25rem;
    padding: .5rem;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -100%);
    width: auto;
    white-space: nowrap;
    font-weight: 500
}

.tooltip.left {
    left: 0;
    top: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-100%, -50%)
}

.tooltip.right {
    right: 0;
    top: 50%;
    bottom: auto;
    left: auto;
    transform: translate(100%, -50%)
}

.tooltip.top {
    top: 0;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -100%)
}

.tooltip.bottom {
    bottom: 0;
    left: 50%;
    top: auto;
    right: auto;
    transform: translate(-50%, 100%)
}

.tooltip.small {
    width: 8rem;
    white-space: normal
}

.tooltip.medium {
    width: 12rem;
    white-space: normal
}

.tooltip.large {
    width: 16rem;
    white-space: normal
}

:hover > .tooltip {
    display: flex;
    align-items: center;
    gap: .5rem
}

.dropdown:active ~ .tooltip, :is(button,.button):focus > .dropdown ~ .tooltip, .field > :focus ~ .dropdown ~ .tooltip {
    display: none
}

:is(.blur,.small-blur,.medium-blur,.large-blur), :is(.blur,.small-blur,.medium-blur,.large-blur).light {
    --blur-size: 1rem;
    -webkit-backdrop-filter: blur(var(--blur-size));
    backdrop-filter: blur(var(--blur-size));
    color: var(--on-background);
    background-color: #ffffff80
}

.dark :is(.blur,.small-blur,.medium-blur,.large-blur), :is(.blur,.small-blur,.medium-blur,.large-blur).dark {
    background-color: #00000080
}

.small-blur {
    --blur-size: .5rem
}

.large-blur {
    --blur-size: 1.5rem
}

.shadow {
    background-color: #00000050
}

:is(.left-shadow,.right-shadow,.top-shadow,.bottom-shadow) {
    background-color: transparent !important
}

.left-shadow {
    background-image: linear-gradient(to right, black, transparent)
}

.right-shadow {
    background-image: linear-gradient(to left, black, transparent)
}

.bottom-shadow {
    background-image: linear-gradient(to top, black, transparent)
}

.top-shadow {
    background-image: linear-gradient(to bottom, black, transparent)
}