:root {
    --expressive_spatial_fast: 0.35s cubic-bezier(0.42, 1.67, 0.21, 0.90);
    --expressive_spatial_default: 0.5s cubic-bezier(0.38, 1.21, 0.22, 1.00);
    --expressive_spatial_slow: 0.65s cubic-bezier(0.39, 1.29, 0.35, 0.98);
    --expressive_fx_fast : 0.15s cubic-bezier(0.31, 0.94, 0.34, 1.00);
    --expressive_fx_default : 0.2s cubic-bezier(0.34, 0.80, 0.34, 1.00);
}










body {
    background-color: var(--surface);
    transition: all var(--expressive_fx_fast);
}









.pageFrame {
    position: fixed;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}



















.button {
    position: relative;

    padding: 15px 30px;

    background-color: var(--primary-container);
    border-radius: 17px;

    border: none;
    outline: none;

    font-family: "Outfit";
    font-weight: 500;
    font-size: 17px;
    color: var(--on-primary-container);

    transition: all var(--expressive_spatial_fast);
}

.button:hover {
    cursor: pointer;

    background-color: var(--on-primary-container);
    color: var(--primary-container);

    font-size: 22px;
    border-radius: 5px;
}

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

.button.secondary:hover {
    background-color: var(--on-secondary-container);
    color: var(--secondary-container);
}

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

.button.error:hover {
    background-color: var(--on-error-container);
    color: var(--error-container);
}












.inputBox {
    position: relative;
    
    width: 100%;
    height: 65px;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;

    transition: all var(--expressive_fx_fast);
}

.textInput {
    position: relative;

    width: 250px;
    height: 65px;

    background-color: var(--container-lowest);
    border-radius: 10px;

    padding: 15px 20px 5px 20px;
    box-sizing: border-box;

    font-family: "Outfit";
    font-weight: 400;
    font-size: 15px;
    color: var(--on-surface);

    border: none;
    outline: none;
}

.textInput_label {
    position: absolute;

    top: 23px;
    left: 20px;

    font-family: "Outfit";
    font-weight: 400;
    font-size: 15px;
    color: var(--input-label);

    pointer-events: none;

    transition: all var(--expressive_fx_fast);
}

.textInput_label.active {
    top: 8px;

    font-size: 11px;
    color: var(--primary);
}

.textInput_label.filled {
    top: 8px;

    font-size: 11px;
    color: var(--on-surface-variant);
}

.textInput_label.error {
    color: var(--error);
}


.textInput_error {
    position: absolute;

    top: 60px;
    left: 5px;

    font-family: "Outfit";
    font-weight: 400;
    font-size: 15px;
    color: var(--error);

    opacity: 0;

    transition: all var(--expressive_fx_fast);
}

.textInput_error.visible {
    top: 68px;
    opacity: 1;
}

.textInput.disabled {
    pointer-events: none;
    color: var(--input-label);
}





.selectBox {
    position: absolute;

    top: 70px;
    left: 0px;

    width: 100%;
    height: auto;

    background-color: var(--container-highest);
    border-radius: 10px;

    display: none;
    flex-direction: column;
    align-items: start;
    justify-content: start;

    overflow: hidden;

    z-index: 100;
}

.selectOption {
    position: relative;

    width: 100%;
    height: 30px;

    font-family: "Outfit";
    font-weight: 400;
    font-size: 15px;
    color: var(--on-surface);

    padding: 20px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: start;
}

.selectOption.hidden {
    display:none;
}

.selectOption:hover {
    cursor: pointer;

    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
}

























::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scroll_track);
}

::-webkit-scrollbar-thumb {
  background: var(--scroll_thumb); 
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scroll_thumb_hover); 
}




















.sidebarFrame {
    position: fixed;

    top: 0px;
    left: 0px;

    width: 15%;
    height: 100%;

    min-width: 300px;
    max-width: 500px;

    padding: 40px;
    box-sizing: border-box;

    background-color: var(--container);

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;

    transition: all var(--expressive_fx_fast);
}

.sidebarLoadingDiv {
    position: relative;

    width: 80%;
    height: 40px;

    margin-bottom: 10px;

    background-color: var(--container-highest);
    border-radius: 5px;
}

.sidebar_mainIcon {
    position: relative;

    width: 80px;
    height: 80px;

    padding: 20px;
    box-sizing: border-box;

    background-color: var(--secondary-container);
    border-radius: 15px;

    fill: var(--on-secondary-container);

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all var(--expressive_fx_fast);
}

.sidebar_buttons {
    position: relative;

    margin-top: 50px;

    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.sidebarButton {
    position: relative;

    width: 100%;
    height: 60px;

    margin-bottom: 10px;

    background-color: var(--container-high);
    border-radius: 20px;

    padding: 20px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: start;

    transition: all var(--expressive_fx_fast);
}

.sidebarButton.active {
    width: 110%;

    background-color: var(--tertiary-container);
    border-radius: 10px;
}

.sidebarButton.active .sidebarButton_icon {
    fill: var(--tertiary);
}

.sidebarButton.active .sidebarButton_title {
    color: var(--on-tertiary-container);
}

.sidebarButton:hover {
    cursor: pointer;
    background-color: var(--primary-container);
    border-radius: 10px;
}

.sidebarButton:hover .sidebarButton_icon {
    fill: var(--primary);

    width: 35px;
    height: 35px;
}

.sidebarButton:hover .sidebarButton_title {
    color: var(--on-primary-container);
    font-size: 18px;
}

.sidebarButton_icon {
    position: relative;

    width: 30px;
    height: 30px;

    fill: var(--on-surface);

    transition: all var(--expressive_fx_fast);
}

.sidebarButton_title {
    position: relative;

    margin-left: 10px;

    font-family: "Outfit";
    font-weight: 400;
    font-size: 15px;
    color: var(--on-surface);

    transition: all var(--expressive_fx_fast);
}

.sidebar_actions {
    position: absolute;

    bottom: 40px;

    width: 100%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: start;
}

.sidebarActionButton {
    position: relative;

    width: 50px;
    height: 50px;

    margin-right: 5px;

    background-color: var(--container-high);
    border-radius: 50%;

    padding: 13px;
    box-sizing: border-box;

    border: none;
    outline: none;

    fill: var(--on-surface);

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all var(--expressive_fx_fast)
}

.sidebarActionButton.active {
    background-color: var(--tertiary-container);
    fill: var(--on-tertiary-container);
    pointer-events: none;
}

.sidebarActionButton:hover {
    cursor: pointer;

    padding: 10px;

    fill: var(--primary);
    background-color: var(--primary-container);
}


















.contentFrame {
    position: fixed;

    top: 0px;
    left: 15%;

    width: 85%;
    height: 100%;

    padding: 75px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;

    overflow-x: hidden;
    overflow-y: auto;
}






















.message {
    position: absolute;

    bottom: 2%;
    width: auto;

    left: 50%;
    transform: translate(-50%, -50%);

    padding: 20px;
    box-sizing: border-box;

    background-color: var(--primary-container);
    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: start;

    opacity: 0;

    pointer-events: none;

    z-index: 50;

    transition: all var(--expressive_fx_default);
}

.message.error {
    background-color: var(--error-container);
}

    .message.error .messageText {
        color: var(--on-error-container);
    }

    .message.error .messageCloseBtn {
        fill: var(--error-container);
        background-color: var(--on-error-container);
    }

    .message.error .messageCloseBtn:hover {
        background-color: var(--error);
    }

.message.success {
    background-color: var(--tertiary-container);
}

    .message.success .messageText {
        color: var(--on-tertiary-container);
    }

    .message.success .messageCloseBtn {
        fill: var(--tertiary-container);
        background-color: var(--on-tertiary-container);
    }

    .message.success .messageCloseBtn:hover {
        background-color: var(--tertiary);
    }



.message.visible {
    bottom: 10%;
    opacity: 1;

    pointer-events: all;
}

.messageText {
    position: relative;

    font-family: "Outfit";
    font-weight: 400;
    font-size: 20px;
    color: var(--on-primary-container);
}

.messageCloseBtn {
    position: relative;

    margin-left: 20px;

    width: 25px;
    height: 25px;

    padding: 5px;
    box-sizing: border-box;

    fill: var(--primary-container);

    background-color: var(--on-primary-container);
    border-radius: 5px;

    outline: none;
    border: none;

    display: flex;
    align-items: center;
    justify-content: center;
}

.messageCloseBtn:hover {
    cursor: pointer;

    background-color: var(--primary);
}




















.pageTitleFrame {
    position: relative;

    width: 100%;
    height: auto;

    margin-bottom: 75px;

    display: flex;
    align-items: center;
    justify-content: start;
}

.pageTitleIconArea {
    position: relative;
    width: 90px;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: start;
}

.pageTitleIcon {
    position: relative;

    width: 75px;
    height: 75px;

    background-color: var(--tertiary-container);
    border-radius: 25px;

    padding: 10px;
    box-sizing: border-box;

    fill: var(--tertiary);

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all var(--expressive_spatial_default);
}

.pageTitleIcon:hover {
    background-color: var(--on-tertiary-container);
    fill: var(--tertiary-container);
    border-radius: 50%;
    padding: 14px;
}

.pageTitleArea {
    position: relative;

    width: auto;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.pageTitle {
    position: relative;

    font-family: "Outfit";
    font-weight: 700;
    font-size: 35px;
    color: var(--on-tertiary-container);

    transition: all var(--expressive_fx_fast);
}

.pageSubtitle {
    position: relative;

    font-family: "Outfit";
    font-weight: 400;
    font-size: 17px;
    color: var(--on-surface-variant);

    transition: all var(--expressive_fx_fast);
}
























.pageActions {
    position: relative;

    width: auto;
    height: 75px;

    padding: 20px;
    box-sizing: border-box;

    margin-bottom: 20px;

    background-color: var(--container);
    border-radius: 20px;

    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;

    transition: all var(--expressive_fx_fast);
}

.pageActionButton {
    position: relative;

    width: 50px;
    height: 50px;

    background-color: var(--primary-container);
    border-radius: 25px;

    display: flex;
    align-items: center;
    justify-content: start;

    overflow: hidden;

    transition: all var(--expressive_fx_fast);

}

.pageActionButton:hover {
    cursor: pointer;

    width: max-content;
    border-radius: 10px;
    padding-right: 15px;

    background-color: var(--on-primary-container);
}

.pageActionButton:hover .pageActionButton_icon {
    fill: var(--primary-container);
}

.pageActionButton:hover .pageActionButton_title {
    color: var(--primary-container);
    margin-left: 10px;
    opacity: 1;
}

.pageActionButton_icon {
    position: relative;
    margin-left: 5.5px;

    min-width: 40px;
    height: 40px;

    padding: 5px;
    box-sizing: border-box;

    fill: var(--primary);

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all var(--expressive_fx_fast);
}

.pageActionButton_title {
    margin-left: 0px;

    opacity: 0;

    font-family: "Outfit";
    font-weight: 600;
    font-size: 17px;
    color: var(--on-primary-container);
    white-space: nowrap;

    transition: all var(--expressive_fx_fast);
}
























.popupFrame {
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    z-index: 500;

    pointer-events: none;
}

.popupFrame.visible {
    display: flex;
    pointer-events: all;
}

.popupBlob {
    position: relative;

    margin-top: 100px;

    width: auto;
    min-width: 400px;
    height: auto;

    padding: 40px;
    box-sizing: border-box;

    background-color: var(--container);
    border-radius: 20px;

    opacity: 0;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;

    z-index: 2;

    transition: all var(--expressive_fx_default);
}

.popupBlob.visible {
    margin-top: 0px;
    opacity: 1;
}

.popupHead {
    position: relative;

    width: 100%;
    height: auto;

    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: start;
}

.popupIcon {
    position: relative;

    width: 40px;
    height: 40px;

    fill: var(--on-surface);

    display: flex;
    align-items: center;
    justify-content: center;
}

.popupTitle {
    position: relative;

    font-family: "Outfit";
    font-weight: 600;
    font-size: 18px;
    color: var(--on-surface);
}

.popupContent {
    position: relative;

    width: 100%;
    height: auto;

    margin-top: 40px;

    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: start;
    justify-content: start;
}

.popupText {
    position: relative;

    width: 400px;

    font-family: "Outfit";
    font-weight: 400;
    font-size: 15px;
    color: var(--on-surface);
}

.popupActionButtons {
    position: relative;

    width: 100%;
    height: auto;

    margin-top: 10px;

    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: start;
    justify-content: start;
}

.popup_underlay {
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    background-color: var(--shadow);
    opacity: 0;

    z-index: 1;

    transition: all var(--expressive_fx_default);
}

.popup_underlay.visible {
    opacity: 0.65;
}































































.mb_headFrame {
    display: none;
}

.mb_sidebar {
    display: none;
}


@media (max-width: 768px) {

    .pageFrame {
        position: fixed;

        top: 0px;
        left: 0px;

        width: 100%;
        height: 100%;

        overflow-x: hidden;
        overflow-y: scroll;

        display: flex;
        align-items: start;
        justify-content: center;
    }

    .contentFrame {
        position: relative;

        top: 0px;
        left: 0px;

        width: 85%;
        height: auto;

        padding: 175px 0px 100px 0px;
        box-sizing: border-box;
    }












    .textInput {
        width: 100%;
    }

















    .sidebarFrame {
        display: none;
    }
    


























    .mb_headFrame {
        position: absolute;
        top: 30px;
        left: 0px;
        
        width: 100%;
        height: auto;

        display: flex;
        align-items: center;
        justify-content: center;

        z-index: 99;
    }

    .mb_titleBlob {
        position: relative;

        width: 90%;
        height: 100px;

        background-color: var(--container);
        border-radius: 20px;

        padding: 20px;
        box-sizing: border-box;

        display: flex;
        align-items: center;
        justify-content: start;

        transition: all var(--expressive_fx_fast);
    }

    .mb_menuIcon {
        position: relative;

        width: 50px;
        height: 50px;

        padding: 10px;
        box-sizing: border-box;

        fill: var(--on-secondary-container);

        background-color: var(--secondary-container);
        border-radius: 10px;

        display: flex;
        align-items: center;
        justify-content: center;

        transition: all var(--expressive_fx_fast);
    }

    .mb_mainFrame {
        position: relative;

        width: 70%;
        height: 50px;

        margin-left: 30px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mb_mainIcon {
        position: relative;

        width: auto;
        height: 40px;

        fill: var(--primary);
    }

    .mb_mainTitle {
        position: relative;

        margin-left: 10px;

        font-family: "Outfit";
        font-weight: 400;
        font-size: 20px;
        color: var(--on-surface);
    }

    .mb_sidebar {
        position: fixed;

        top: 0px;
        left: 0px;

        width: 100%;
        height: 100%;

        z-index: 100;

        display: none;
        flex-direction: column;
        align-items: start;
        justify-content: start;
    }

    .mb_sidebarFrame {
        position: absolute;
        top: 0px;
        left: -65%;

        width: 65%;
        height: 100%;

        padding: 30px;
        box-sizing: border-box;

        background-color: var(--container);
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;

        transition: var(--expressive_fx_default);
    }

    .mb_sidebarFrame.visible {
        left: 0px;
    }

    .mb_sideMenu_title {
        position: relative;

        width: 100%;
        height: 100px;

        margin-bottom: 10px;

        display: flex;
        align-items: center;
        justify-content: start;
    }

    .mb_sideMenu_titleIcon {
        position: relative;

        width: 30px;
        height: 30px;

        margin-right: 10px;

        fill: var(--primary);
    }

    .mb_sideMenu_titleText {
        position: relative;

        font-family: "Outfit";
        font-weight: 400;
        font-size: 18px;
        color: var(--on-surface);
    }

    .mb_sideMenu_Button {
        position: relative;

        width: 100%;
        height: 60px;

        margin-bottom: 10px;

        background-color: var(--container-high);
        border-radius: 20px;

        padding: 20px;
        box-sizing: border-box;

        display: flex;
        align-items: center;
        justify-content: start;

        transition: all var(--expressive_fx_fast);
    }

    .mb_sideMenu_Button.active {
        width: 105%;

        background-color: var(--tertiary-container);
        border-radius: 10px;
    }

    .mb_sideMenu_Button.active .mb_sideMenu_ButtonIcon {
        fill: var(--tertiary);
    }

    .mb_sideMenu_Button.active .mb_sideMenu_ButtonTite {
        color: var(--on-tertiary-container);
    }

    .mb_sideMenu_Button.touched {
        cursor: pointer;
        background-color: var(--primary-container);
        border-radius: 10px;
    }

    .mb_sideMenu_Button.touched .mb_sideMenu_ButtonIcon {
        fill: var(--primary);

        width: 35px;
        height: 35px;
    }

    .mb_sideMenu_Button.touched .mb_sideMenu_ButtonTite {
        color: var(--on-primary-container);
        font-size: 18px;
    }

    .mb_sideMenu_ButtonIcon {
        position: relative;

        width: 30px;
        height: 30px;

        fill: var(--on-surface);

        transition: all var(--expressive_fx_fast);
    }

    .mb_sideMenu_ButtonTite {
        position: relative;

        margin-left: 10px;

        font-family: "Outfit";
        font-weight: 400;
        font-size: 15px;
        color: var(--on-surface);

        transition: all var(--expressive_fx_fast);
    }

    .mb_sideMenu_actionButtons {
        position: absolute;
        bottom: 30px;
        left: 0px;

        width: 100%;
        height: 100px;

        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;

        display: flex;
        align-items: center;
        justify-content: start;
    }

    .mb_sideMenu_actionButton {
        position: relative;

        width: 50px;
        height: 50px;

        margin-right: 5px;

        background-color: var(--container-high);
        border-radius: 50%;

        padding: 13px;
        box-sizing: border-box;

        border: none;
        outline: none;

        fill: var(--on-surface);

        display: flex;
        align-items: center;
        justify-content: center;

        transition: all var(--expressive_fx_fast)
    }

    .mb_sideMenu_actionButton.active {
        background-color: var(--tertiary-container);
        fill: var(--on-tertiary-container);
        pointer-events: none;
    }

    .mb_sideMenu_actionButton.touched {
        cursor: pointer;

        padding: 10px;

        fill: var(--primary);
        background-color: var(--primary-container);
    }

    .mb_sidebar_underlay {
        position: absolute;
        
        top: 0px;
        left: 0px;

        width: 100%;
        height: 100%;

        background-color: var(--shadow);
        opacity: 0;
        z-index: 1;

        transition: var(--expressive_fx_default);
    }

    .mb_sidebar_underlay.visible {
        opacity: 0.6;
    }
    
























    .message {
        width: 80%;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .messageText {
        font-size: 16px;
    }

    .messageCloseBtn {
        width: 30px;
        height: 30px;
    }























    .pageTitleIconArea {
        width: 75px;
    }

    .pageTitleIcon {
        width: 65px;
        height: 65px;
        border-radius: 18px;
        padding: 10px;

        pointer-events: none;
    }

    .pageTitleArea {
        position: relative;

        margin-left: 15px;

        width: auto;
        height: auto;

        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
    }

    .pageTitle {
        font-size: 27px;
        white-space: nowrap;
    }

    .pageSubtitle {
        font-size: 13px;
    }




}