/* 
'wght' - the weight of the font.
'wdth' - the width of the letters.
'slnt' - the angle of the letters
'ital' - how italic the letters are.
'opsz' - how adjusted the font is for the screen it is on (optical sizing). */

@font-face {
    font-family: "Outfit";
    src: local("Outfit"), url(../../assets/fonts/Outfit-VariableFont.ttf) format("truetype");
}


:root {
    --primary-color-120: #2EDACD;
    --primary-color-110: #45DDD0;
    --primary-color: #64E1D8;
    --primary-color-90: #7EE6DF;
    --primary-color-80: #8EE9E2;
    --primary-color-70: #A0EBE6;
    --primary-color-60: #B1EEEB;
    --primary-color-50: #C0F1EE;
    --primary-color-40: #D0F6F2;
    --primary-color-30: #E1F8F7;
    --grey-color-120: #000000;
    --grey-color-110: #191919;
    --grey-color: #252525;
    --grey-color-90: #4D4D4D;
    --grey-color-80: #666666;
    --grey-color-70: #808080;
    --grey-color-60: #999999;
    --grey-color-50: #B2B2B2;
    --grey-color-40: #CCCCCC;
    --grey-color-30: #E4E4E4;
    --warning-color-120: #B68A00;
    --warning-color-110: #D3A100;
    --warning-color: #FFC409;
    --warning-color-90: #FFCD2D;
    --warning-color-80: #FFD346;
    --warning-color-70: #FFDB69;
    --warning-color-60: #FFE285;
    --warning-color-50: #FFE8A0;
    --warning-color-40: #FFEFBD;
    --warning-color-30: #FFF4D3;
    --error-color: #EB445A;
    --border-color-120: #4D4D4D;
    --border-color-110: #999999;
    --border-color: #E4E4E4;
    --border-color-black: #000000;
    --background-color-120: #252525;
    --background-color-110: #808080;
    --background-color: #E4E4E4;
    --background-color-white: #FFFFFF;
    --text-color: #000000;
    --text-color-90: #191919;
    --text-color-80: #323232;
    --text-color-70: #4D4D4D;
    --text-color-60: #666666;
    --text-color-50: #808080;
    --text-color-40: #999999;
    --text-color-30: #B2B2B2;
    --text-color-20: #CCCCCC;
    --text-color-10: #E4E4E4;
    --text-color-white: #FFFFFF;
    --class-content-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

html,
body {
    height: 100vh;
    overflow: hidden;
}

body {
    opacity: 1 !important;
    font-size: 1em;
    line-height: 1.625;
    font-variation-settings: 'wdth' 500;
    font-weight: 500;
    background-color: var(--background-color-white);
    color: var(--text-color-dark-100);
    font-family: "Archivo";
    letter-spacing: 0.04em;
    font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}


.app {
    display: flex;
    flex-direction: column;
}

@media only screen and (min-width: 800px) {
    .app {
        flex-direction: row;
    }
}

.page-layout-web {
    flex-grow: 1;
    height: calc(100vh - 62px);
    display: flex;
    flex-direction: column;
}

.page {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 99vh;
}

.header {
    flex-shrink: 0;
}

.header-sticky {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    top: 0px;
    position: sticky;
}

.content {
    flex-direction: column;
    flex-grow: 1;
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: scroll;
    overflow-x: hidden;
}

.footer {
    flex-shrink: 0;
}

.text-ellipsis {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-ellipsis-2 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@supports (-webkit-touch-callout: none) {

    .flex-column, .navbar-brand {
        padding-left: env(safe-area-inset-left);
    }
    body {
        /*    Disable selecting content and texts   */
        user-select: none;
        -webkit-user-select: none;
        /*    Remove the default tapping effect     */
        -webkit-tap-highlight-color: transparent;
        /*    Annoying scroll animation             */
        overscroll-behavior: none;
    }
}

.w-100 {
    width: 100%;
}

.h-80 {
    height: 80%
}

.h-100 {
    height: 100%
}

.h-100vh {
    height: 100vh
}

.font-1 {
    font-size: 0.1em;
}

.font-2 {
    font-size: 0.2em;
}

.font-3 {
    font-size: 0.3em;
}

.font-4 {
    font-size: 0.4em;
}

.font-5 {
    font-size: 0.5em;
}

.font-6 {
    font-size: 0.6em;
}

.font-7 {
    font-size: 0.7em;
}

.font-8 {
    font-size: 0.8em;
}

.font-8-5 {
    font-size: 0.85em;
}

.font-9 {
    font-size: 0.9em;
}

.font-10 {
    font-size: 1.0em;
}

.font-11 {
    font-size: 1.1em;
}

.font-12 {
    font-size: 1.2em;
}

.font-13 {
    font-size: 1.3em;
}

.font-14 {
    font-size: 1.4em;
}

.font-15 {
    font-size: 1.5em;
}

.font-16 {
    font-size: 1.6em;
}

.font-26 {
    font-size: 2.6em;
}



.font-weight-400 {
    font-weight: 400 !important;
    font-variation-settings: 'wdth' 400 !important;
}

.font-weight-450 {
    font-weight: 450 !important;
    font-variation-settings: 'wdth' 450 !important;
}

.font-weight-500 {
    font-weight: 500 !important;
    font-variation-settings: 'wdth' 500 !important;
}

.font-weight-550 {
    font-weight: 550 !important;
    font-variation-settings: 'wdth' 550 !important;
}

.font-weight-600 {
    font-weight: 600 !important;
    font-variation-settings: 'wdth' 600 !important;
}

.font-weight-650 {
    font-weight: 650 !important;
    font-variation-settings: 'wdth' 650 !important;
}

.font-weight-700 {
    font-weight: 700 !important;
    font-variation-settings: 'wdth' 700 !important;
}

.modal-close-session-body {
    flex-direction: column;
    gap: 15px;
}

.text-color-30 {
    color: var(--text-color-30);
}

.icon-svg {
    width: 25px;
    height: 25px;
    margin-top: 2px;
}

.icon-svg-small {
    width: 20px;
    height: 20px;
}

.flexcenter {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fs-8 {
    font-size: 8px !important;
}


.invalidtext {
    border: 1px solid var(--warning-color) !important;
}

.messageinvalid {
    color: var(--warning-color) !important;
}