:root {
    --appbar-height: 56px;
    --len-xs-1: 4px;
    --len-xs-2: 8px;
    --len-xs-3: 12px;
    --len-xs-4: 16px;
    --len-xs-5: 20px;
    --len-xs-6: 24px;
    --len-sm-1: 4px;
    --len-sm-2: 8px;
    --len-sm-3: 12px;
    --len-sm-4: 16px;
    --len-sm-5: 20px;
    --len-sm-6: 24px;
    --len-md-1: 4px;
    --len-md-2: 8px;
    --len-md-3: 12px;
    --len-md-4: 16px;
    --len-md-5: 20px;
    --len-md-6: 24px;
    --len-lg-1: 4px;
    --len-lg-2: 8px;
    --len-lg-3: 12px;
    --len-lg-4: 16px;
    --len-lg-5: 20px;
    --len-lg-6: 24px;
    --collapse-height-96: 96px;
    --collapse-height-192: 192px;
    --clr-primary: #3F5F90;
    --clr-onPrimary: #FFFFFF;
    --clr-secondary: #555F71;
    --clr-onSecondary: #FFFFFF;
    --clr-tertiary: #00677C;
    --clr-onTertiary: #FFFFFF;
    --clr-outline: #74777F;
    --clr-outlineVariant: #C4C6CF;
    --clr-surface: #F9F9FF;
    --clr-onSurface: #191C20;
    --clr-surfaceVariant: #E0E2EC;
    --clr-onSurfaceVariant: #43474E;
    --clr-primaryContainer: #D6E3FF;
    --clr-onPrimaryContainer: #001B3C;
    --clr-secondaryContainer: #D9E3F8;
    --clr-onSecondaryContainer: #121C2B;
    --clr-tertiaryContainer: #B1ECFF;
    --clr-onTertiaryContainer: #001F27;
    --clr-surfaceDim: D9D9E0;
    --clr-surfaceBright: #F9F9FF;
    --clr-surfaceContainerLowest: #FFFFFF;
    --clr-surfaceContainerLow: #F3F3FA;
    --clr-surfaceContainer: #EDEDF4;
    --clr-surfaceContainerHigh: #E7E8EE;
    --clr-surfaceContainerHighest: #E1E2E9;

    --clr-error: #BA1A1A;
    --clr-onError: #FFFFFF;
    --clr-errorContainer: #FFDAD6;
    --clr-onErrorContainer: #410002;
}


.surface-text.normal {
    color: var(--clr-onSurface);
}

.surface-text.primary {
    color: var(--clr-primary);
}

.surface-text.secondary {
    color: var(--clr-secondary);
}

.surface-text.tertiary {
    color: var(--clr-tertiary);
}

.surface-text.variant {
    color: var(--clr-onSurfaceVariant);
}



html, body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Fira Sans', Oxygen, 'Oxygen Sans', Cantarell, 'Droid Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lucida Grande', Helvetica, Arial, sans-serif;
}


@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    src: url(/font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2) format('woff2');
}


.msr-i {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

.mso {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

.mso-s {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}






.v-align-bottom {
    vertical-align: bottom !important;
}

.v-align-baseline {
    vertical-align: baseline !important;
}

.v-align-top {
    vertical-align: top !important;
}

.v-align-middle {
    vertical-align: middle !important;
}

.t-align-center {
    text-align: center !important;
}
.t-align-start {
    text-align: start !important;
}
.t-align-end {
    text-align: end !important;
}
.t-align-justify {
    text-align: end !important;
}


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

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

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


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



p.placeholder:empty::before {
    content: "\200b"; /* unicode zero width space character */
}

.w-max\[1200px\] {
    max-width: 1200px !important;
}

.vh-100 {
    height: 100vh !important;
}

.vw-100 {
    width: 100vw !important;
}

.w-25 {
    width: 25% !important;
}

.w-100 {
    width: 100% !important;
}


.w-\[16px\] {
    width: 16px !important;
}

.w-\[24px\] {
    width: 24px !important;
}

.w-\[32px\] {
    width: 32px !important;
}

.w-\[48px\] {
    width: 48px !important;
}

.w-\[56px\] {
    width: 56px !important;
}

.w-\[64px\] {
    width: 64px !important;
}

.w-\[80px\] {
    width: 80px !important;
}

.w-\[88px\] {
    width: 88px !important;
}


.w-\[96px\] {
    width: 96px !important;
}

.w-\[144px\] {
    width: 144px !important;
}

.w-\[160px\] {
    width: 160px !important;
}

.w-\[240px\] {
    width: 240px !important;
}

.w-\[320px\] {
    width: 320px !important;
}




.h-100 {
    height: 100% !important;
}

.h-\[16px\] {
    height: 16px !important;
}

.h-\[24px\] {
    height: 24px !important;
}

.h-\[32px\] {
    height: 32px !important;
}

.h-\[48px\] {
    height: 48px !important;
}

.h-\[56px\] {
    height: 56px !important;
}

.h-\[64px\] {
    height: 64px !important;
}




.sz-\[16px\] {
    width: 16px !important;
    height: 16px !important;
}

.sz-\[24px\] {
    width: 24px !important;
    height: 24px !important;
}

.sz-\[32px\] {
    width: 32px !important;
    height: 32px !important;
}

.sz-\[48px\] {
    width: 48px !important;
    height: 48px !important;
}

.sz-\[56px\] {
    width: 56px !important;
    height: 56px !important;
}

.sz-\[64px\] {
    width: 64px !important;
    height: 64px !important;
}

.sz-\[96px\] {
    width: 96px !important;
    height: 96px !important;
}

.sz-\[192px\] {
    width: 192px !important;
    height: 192px !important;
}



@media(min-width: 0px) {

    :root {
        --len-xs-1: 4px;
        --len-xs-2: 8px;
        --len-xs-3: 12px;
        --len-xs-4: 16px;
        --len-xs-5: 20px;
        --len-xs-6: 24px;
        --len-sm-1: 0px;
        --len-sm-2: 0px;
        --len-sm-3: 0px;
        --len-sm-4: 0px;
        --len-sm-5: 0px;
        --len-sm-6: 0px;
        --len-md-1: 0px;
        --len-md-2: 0px;
        --len-md-3: 0px;
        --len-md-4: 0px;
        --len-md-5: 0px;
        --len-md-6: 0px;
        --len-lg-1: 0px;
        --len-lg-2: 0px;
        --len-lg-3: 0px;
        --len-lg-4: 0px;
        --len-lg-5: 0px;
        --len-lg-6: 0px;
    }


    .xs\:w-\[160px\] {
        width: 160px !important;
    }


    .xs\:sz-\[16px\] {
        width: 16px !important;
        height: 16px !important;
    }

    .xs\:sz-\[24px\] {
        width: 24px !important;
        height: 24px !important;
    }

    .xs\:sz-\[32px\] {
        width: 32px !important;
        height: 32px !important;
    }

    .xs\:sz-\[48px\] {
        width: 48px !important;
        height: 48px !important;
    }

    .xs\:sz-\[56px\] {
        width: 56px !important;
        height: 56px !important;
    }

    .xs\:sz-\[64px\] {
        width: 64px !important;
        height: 64px !important;
    }

    .xs\:sz-\[96px\] {
        width: 96px !important;
        height: 96px !important;
    }
}


@media(min-width: 600px) {
    :root {
        --appbar-height: 64px;
        --len-xs-1: 4px;
        --len-xs-2: 8px;
        --len-xs-3: 12px;
        --len-xs-4: 16px;
        --len-xs-5: 20px;
        --len-xs-6: 24px;
        --len-sm-1: 4px;
        --len-sm-2: 8px;
        --len-sm-3: 12px;
        --len-sm-4: 16px;
        --len-sm-5: 20px;
        --len-sm-6: 24px;
        --len-md-1: 0px;
        --len-md-2: 0px;
        --len-md-3: 0px;
        --len-md-4: 0px;
        --len-md-5: 0px;
        --len-md-6: 0px;
        --len-lg-1: 0px;
        --len-lg-2: 0px;
        --len-lg-3: 0px;
        --len-lg-4: 0px;
        --len-lg-5: 0px;
        --len-lg-6: 0px;
    }

    .sm\:w-\[160px\] {
        width: 160px !important;
    }

    .sm\:w-\[224px\] {
        width: 224px !important;
    }

    .sm\:w-\[240px\] {
        width: 240px !important;
    }

    .sm\:sz-\[16px\] {
        width: 16px !important;
        height: 16px !important;
    }

    .sm\:sz-\[24px\] {
        width: 24px !important;
        height: 24px !important;
    }

    .sm\:sz-\[32px\] {
        width: 32px !important;
        height: 32px !important;
    }

    .sm\:sz-\[48px\] {
        width: 48px !important;
        height: 48px !important;
    }

    .sm\:sz-\[56px\] {
        width: 56px !important;
        height: 56px !important;
    }

    .sm\:sz-\[64px\] {
        width: 64px !important;
        height: 64px !important;
    }

    .sm\:sz-\[96px\] {
        width: 96px !important;
        height: 96px !important;
    }

}

@media(min-width: 960px) {
    :root {
        --len-xs-1: 4px;
        --len-xs-2: 8px;
        --len-xs-3: 12px;
        --len-xs-4: 16px;
        --len-xs-5: 20px;
        --len-xs-6: 24px;
        --len-sm-1: 4px;
        --len-sm-2: 8px;
        --len-sm-3: 12px;
        --len-sm-4: 16px;
        --len-sm-5: 20px;
        --len-sm-6: 24px;
        --len-md-1: 4px;
        --len-md-2: 8px;
        --len-md-3: 12px;
        --len-md-4: 16px;
        --len-md-5: 20px;
        --len-md-6: 24px;
        --len-lg-1: 0px;
        --len-lg-2: 0px;
        --len-lg-3: 0px;
        --len-lg-4: 0px;
        --len-lg-5: 0px;
        --len-lg-6: 0px;
    }


    .md\:w-\[16px\] {
        width: 16px !important;
    }

    .md\:w-\[24px\] {
        width: 24px !important;
    }

    .md\:w-\[32px\] {
        width: 32px !important;
    }

    .md\:w-\[48px\] {
        width: 48px !important;
    }

    .md\:w-\[56px\] {
        width: 56px !important;
    }

    .md\:w-\[64px\] {
        width: 64px !important;
    }

    .md\:w-\[96px\] {
        width: 96px !important;
    }

    .md\:w-\[320px\] {
        width: 320px !important;
    }


    .md\:h-\[none\] {
        height: unset !important;
    }



    .md\:sz-\[16px\] {
        width: 16px !important;
        height: 16px !important;
    }

    .md\:sz-\[24px\] {
        width: 24px !important;
        height: 24px !important;
    }

    .md\:sz-\[32px\] {
        width: 32px !important;
        height: 32px !important;
    }

    .md\:sz-\[40px\] {
        width: 40px !important;
        height: 40px !important;
    }

    .md\:sz-\[48px\] {
        width: 48px !important;
        height: 48px !important;
    }

    .md\:sz-\[56px\] {
        width: 56px !important;
        height: 56px !important;
    }

    .md\:sz-\[64px\] {
        width: 64px !important;
        height: 64px !important;
    }

    .md\:sz-\[96px\] {
        width: 96px !important;
        height: 96px !important;
    }
}

@media(min-width: 1280px) {
    :root {
        --len-xs-1: 4px;
        --len-xs-2: 8px;
        --len-xs-3: 12px;
        --len-xs-4: 16px;
        --len-xs-5: 20px;
        --len-xs-6: 24px;
        --len-sm-1: 4px;
        --len-sm-2: 8px;
        --len-sm-3: 12px;
        --len-sm-4: 16px;
        --len-sm-5: 20px;
        --len-sm-6: 24px;
        --len-md-1: 4px;
        --len-md-2: 8px;
        --len-md-3: 12px;
        --len-md-4: 16px;
        --len-md-5: 20px;
        --len-md-6: 24px;
        --len-lg-1: 4px;
        --len-lg-2: 8px;
        --len-lg-3: 12px;
        --len-lg-4: 16px;
        --len-lg-5: 20px;
        --len-lg-6: 24px;
    }


    .lg\:sz-\[16px\] {
        width: 16px !important;
        height: 16px !important;
    }

    .lg\:sz-\[24px\] {
        width: 24px !important;
        height: 24px !important;
    }

    .lg\:sz-\[32px\] {
        width: 32px !important;
        height: 32px !important;
    }

    .lg\:sz-\[48px\] {
        width: 48px !important;
        height: 48px !important;
    }

    .lg\:sz-\[56px\] {
        width: 56px !important;
        height: 56px !important;
    }

    .lg\:sz-\[64px\] {
        width: 64px !important;
        height: 64px !important;
    }

    .lg\:sz-\[96px\] {
        width: 96px !important;
        height: 96px !important;
    }
}

@media(min-width: 1920px) {
    .xl\:sz-\[16px\] {
        width: 16px !important;
        height: 16px !important;
    }

    .xl\:sz-\[24px\] {
        width: 24px !important;
        height: 24px !important;
    }

    .xl\:sz-\[32px\] {
        width: 32px !important;
        height: 32px !important;
    }

    .xl\:sz-\[48px\] {
        width: 48px !important;
        height: 48px !important;
    }

    .xl\:sz-\[56px\] {
        width: 56px !important;
        height: 56px !important;
    }

    .xl\:sz-\[64px\] {
        width: 64px !important;
        height: 64px !important;
    }

    .xl\:sz-\[96px\] {
        width: 96px !important;
        height: 96px !important;
    }
}

.round {
    border-radius: 50%
}

.square {
    border-radius: 0
}


.pill {
    border-radius: 99999px;
}