:root{
    --code_text_red:#EFAB95;
    --text_primary:#FFFFFF;
    --text_secondary:#DEDEDE;
    --background:#0D0E11;
    --text_theme:#CCDFFF;
    --background_secondary:#1c202b;
    --background_tertiary:#32394b;
    --run_button:#294B2C;
    --on_run_button:#A0FFB0;
    --submit_button:#5E5C48;
    --clear_button:#4B2929;
    --on_clear_button:#FFA0A0;
    --save_button:#293a4b;
    --on_save_button:#c5d4f0;
    --on_submit_button:#F0ECC5;
    --primary_button_background:#CCDFFF;
    --primary_button_text:#29354B;
    --secondary_button_background:#1c202b;
    --secondary_button_text:#FFFFFF;
    --navbar_select_background:#2E3B4D;
    --text_navbar_select:#A0D9FF;
    --yellowButtonBackground:#FFF3CC;
    --yellowButtonText:#4B4729;
    --redButtonBackground:#FFCCCC;
    --redButtonText:#4B2929;

    --buttonPrimaryBackground:#A0D9FF;
    --buttonPrimaryText:#29354B;
    --buttonSecondaryBackground:#141E3A;
    --buttonSecondaryText:#FFFFFF;
    --buttonWhiteBackground:#FFFFFF;
    --buttonWhiteText:#525252;
    --buttonDangerBackground:#FFA0A0;
    --buttonDangerText:#4B2929;
    --buttonWanningBackground:#FFEFA0;
    --buttonWanningText:#4B4629;
    --buttonSuccessBackground:#A0FFB0;
    --buttonSuccessText:#294B2C;
    --buttonLearningPathBackground:#FFA0FC;
    --buttonLearningPathText:#4B2942;

    --streakBackground:#443A28;
    --streakTextPrimary:#FFEBD3;
    --streakTextSecondary:#D4C1A9;
    --streakSliderBackground:#524A32;
    --streakSliderPrimary:#FFA844;
    --streakIcon:#FFA844;

    --XPBackground:#283944;
    --XPTextPrimary:#D3E6FF;
    --XPTextSecondary:#A9C6D4;
    --XPSliderBackground:#324652;
    --XPSliderPrimary:#44B7FF;
    --XPIcon:#44B7FF;

    --notificationGreenBackground:#294B2E;
    --notificationGreenText:#D9FFCC;
    --notificationRedBackground:#4B2929;
    --notificationRedText:#FFCCCC;
    --notificationYellowBackground:#4B3A29;
    --notificationYellowText:#FFF1CC;
}

body,html{
    background-color: var(--background);
    color: var(--text_primary);
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

*{
    font-family: "Lexend", sans-serif;
}

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

::-webkit-scrollbar-track {
    background: var(--background_secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--background_tertiary);
    border-radius: 4px;
}

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

body{
    display: flex;
}

.navBarVerText{
    font-size: 12px;
    margin-top: auto;
    color:var(--text_secondary);
    margin-left:16px;
}

.primaryButton, .secondaryButton, .whiteButton, .dangerButton, .wanningButton, .successButton,.learningPathButton{
    height: 36px;
    border-radius: 20px;
    border:none;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding:0px 12px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    transition: .2s ease-in-out scale, .2s ease-in-out filter;
}

.iconButton{
    width: 32px;
    padding: 0px;
    height:32px;
}

.iconButton:focus{
    outline: none;
}

.secondaryButton{
    background-color: var(--buttonSecondaryBackground);
    color: var(--buttonSecondaryText);
}

.primaryButton{
    background-color: var(--buttonPrimaryBackground);
    color: var(--buttonPrimaryText);
}

.whiteButton{
    background-color: var(--buttonWhiteBackground);
    color: var(--buttonWhiteText);
}

.dangerButton{
    background-color: var(--buttonDangerBackground);
    color: var(--buttonDangerText);
}

.wanningButton{
    background-color: var(--buttonWanningBackground);
    color: var(--buttonWanningText);
}

.successButton{
    background-color: var(--buttonSuccessBackground);
    color: var(--buttonSuccessText);
}

.learningPathButton{
    background-color: var(--buttonLearningPathBackground);
    color: var(--buttonLearningPathText);
}

.learningPathButton > svg{
    width: 18px;
    height: 18px;
}

.learningPathButton > svg > path{
    fill: var(--buttonLearningPathText);
}





.primaryButtonSmall{
    background-color: #fff;
    color: var(--background);
    height: 32px;
    border-radius: 20px;
    border:none;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding:0px 11px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
}

.primaryButton > svg,.dangerButton > svg{
    width: 16px;
    height: 16px;
}

.importantMessage{
    background-color: #5B3232 !important;
}

.importantMessage > svg{
    width: 16px;
    height: 16px;
    padding: 8px;
    border-radius: 16px;
    background-color: #442626 !important;
}

.importantMessage > .messageTitleContainer > span > svg:not(.deleteMessageSVG){
    background-color: #442626 !important;
}

.importantMessage > .messageTitleContainer > span > svg:not(.deleteMessageSVG) > path{
    fill: #FFCCCC !important;
}

.primaryButton > svg > path{
    fill: var(--primary_button_text);
}

.dangerButton > svg > path{
    fill: var(--buttonDangerText);
}

.yellow{
    background-color: var(--yellowButtonBackground);
    color: var (--yellowButtonText);
}

.red{
    background-color: var(--redButtonBackground);
    color: var(--redButtonText);
}


.secondaryButtonSmall{
    background-color: var(--background_tertiary);
    color: var(--secondary_button_text);
    height: 32px;
    border-radius: 20px;
    border:none;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding:0px 11px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
}

.secondaryButton > svg{
    width: 18px;
    height: 18px;
}

.secondaryButton > svg > path{
    fill: var(--secondary_button_text);
}

.tertiaryButton{
    background-color: var(--background_tertiary);
    color: var(--text_secondary);
    height: 36px;
    border-radius: 20px;
    border:none;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding:0px 12px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.tertiaryButton > svg{
    width: 18px;
    height: 18px;
}

.tertiaryButton > svg > path{
    fill: var(--text_secondary);
}

.tertiaryButton:disabled{
    background-color: #2f333f;
    cursor: not-allowed;
}

.navSideBar {
    min-width: 224px;
    max-width: 224px;
    height: 100dvh;
    background-color: var(--background_secondary);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: min-width 0.1s ease-out, max-width 0.1s ease-out;
    overflow: hidden;
    will-change: min-width, max-width;
}

.minimize {
    min-width: 64px !important;
    max-width: 64px !important;
}


.navbarTitle > a{
    max-width: 100%;
    overflow: hidden;
    transition: .15s ease-in-out max-width;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap:8px;
    text-decoration: none;
    color: var(--text_primary);
}

.minimize > .navbarTitle > a{
    display: none;
    max-width: 0%;
}

.navbarTitle > a > img{
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.minimize > .navbarTitle{
    justify-content: center;
}

.minimize .searchButtonNavBar{
    display: none;
}
.navbarTitle{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding:20px 16px;
    box-sizing: border-box;
}

.navbarTitle > span{
    display: flex;
    align-items: center;
    gap:8px;
}

.navbarTitle > span > svg{
    width: 18px;
    height: 18px;
}

.minimizeNavBarButton{
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.minimizeNavBarButton > svg{
    width: 18px;
    height: 18px;
}

.pageMenu{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 17px;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    padding-top: 0px !important;
    min-height: 121.5px;
}

.pageMenuAITools > div{
    display: flex;
    flex-direction: row !important;
    gap: 8px;

}

.pageMenuAITools > div > a{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height:32px;
    border-radius: 12px;
    cursor: pointer;
    transition: .15s border-color ease-in-out;
}

.weakTopicsPageMenu:hover{
    border-color: #87683D;
}

.ideaCreatorPageMenu:hover{
    border-color: #3d875c;
}

.taskSummaryPageMenu:hover{
    border-color: #523d87;
}

.weakTopicsPageMenu{
    background-color: #382D23;
    border:2px solid #4c3e2d;
}

.ideaCreatorPageMenu{
    background-color: #233838;
    border:2px solid #2D4C4C;
}

.learningPathPageMenu{
    background-color: #382337;
    border:2px solid #4C2D48;
}


.learningPathPageMenu:hover{
    border-color: #873d5d;
}

.pageMenu > span{
    font-size: 12px;
    margin-bottom: 4px;
    color: var(--text_secondary);
    font-weight: bold;
}

.pageMenu > a{
    text-decoration: none;
    color: var(--text_secondary);
    display: flex;
    align-items: center;
    gap:8px;
    font-size: 14px;
    padding: 6px;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    min-height: 30px;
    box-sizing: border-box;
}

.pageMenu > a > span{
    white-space: nowrap;
    overflow: hidden;
}

.pageMenu > a > i{
    margin-left: auto;
    transform: rotate(180deg);
    transition: .15s ease-in-out transform;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.pageMenu > a > i > svg{
    width: 16px;
    height: 16px;
}

.pageMenu > a > i > svg > path{
    background-color: var(--text_secondary);
}

.optionContainerNavBarButtonActive  > i{
    transform: rotate(0deg) !important;
}

/* .pageMenu > a > span:not(.minimize > .pageMenu > a > span){
    animation: status_text_load .4s;
} */

.pageMenu > a > svg{
    width: 18px;
    height: 18px;
    min-height: 18px;
    min-width: 18px;
}

.pageMenuCurrentPage.weakTopicsPageMenu{
    background-color: #4B3E2C;
    border-color: #c38835;
}

.pageMenuCurrentPage.taskSummaryPageMenu{
    background-color: #2c2d4b;
    border-color: #633bc7;
}

.pageMenuCurrentPage.ideaCreatorPageMenu{
    background-color: #2d4c38;
    border-color: #3bc763;
}
.pageMenuCurrentPage.learningPathPageMenu{
    background-color: #4c2d42;
    border-color: #c73bc2;
}

.pageMenuCurrentPage:not(.pageMenuAITools > div > a,.redpageMenu,.orangepageMenu,.greenpageMenu,.bluepageMenu,.purplepageMenu,.pinkpageMenu){
    background-color: var(--navbar_select_background);
    color: var(--text_navbar_select) !important;
}

.pageMenuCurrentPage:not(.pageMenuAITools > div > a,.redpageMenu,.orangepageMenu,.greenpageMenu,.bluepageMenu,.purplepageMenu,.pinkpageMenu) > svg > path{
    fill: var(--text_navbar_select);
}

.pageMenuCurrentPage.redpageMenu{
    background-color: #462222;
    color:#fff  !important;
}

.pageMenuCurrentPage.orangepageMenu{
    background-color: #463822;
    color:#fff  !important;
}

.pageMenuCurrentPage.greenpageMenu{
    background-color: #224622;
    color:#fff  !important;
}

.pageMenuCurrentPage.bluepageMenu{
    background-color: #222c46;
    color:#fff  !important;
}

.pageMenuCurrentPage.purplepageMenu{
    background-color: #382246;
    color:#fff !important;
}

.pageMenuCurrentPage.pinkpageMenu{
    background-color: #46223e;
    color:#fff !important;
}

.svg_red > path{
    fill:#FCBDBD !important;
}

.svg_orange> path{
    fill:#fce1bd !important;
}

.svg_green> path{
    fill:#bdfcd7 !important;
}

.svg_blue> path{
    fill:#bde0fc !important;
}

.svg_purple> path{
    fill:#d3bdfc !important;
}

.svg_pink> path{
    fill:#efbdfc !important;
}

.minimize > .pageMenu  > div{
    flex-direction: column !important;
    gap: 8px;
}

.minimize > .pageMenu{
    padding: 16px 17px;
}

.minimize > .pageMenu > a{
    padding: 6px;
}

.minimize > .pageMenu > a > span{
    display: none;
}

.minimize > .pageMenu > span{
    display: none;
}

.minimize > .pageMenuAITools > div > a{
    height:30px !important;
    box-sizing: border-box;
}

.minimize > .navBarVerText{
    display: none;
}


@keyframes status_text_load{
    0%{
        opacity: 0;
        display: none;
    }
    30%{
        opacity: 0;
        display: none;
    }
    100%{
        opacity: 1;
        display: inline-block;
    }
    
}

main{
    padding:32px;
    box-sizing: border-box;
    width: 100%;
    height:100dvh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
}

.pageTitleDiv{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    width: 100%;
}

.pageTitleDiv > h1{
    margin: 0px;
    font-size: 24px;
    margin:4px 0px
}

.pageTitleSearchBar{
    background-color: var(--background_secondary);
    padding:8px 16px;
    display: flex;
    gap: 8px;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.pageTitleSearchBar > input{
    height: 20px;
    border:none;
    padding: 0px;
    background:none;
    color:var(--text_primary);
    width: 400px;
}

.pageTitleSearchBar > input:focus{
    outline: none;
}

.pageTitleSearchBar:has(input:focus){
    background-color: var(--background_tertiary) !important;
}

.pageTitleDivButtons{
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.pageTitleDivButtons > input{
    background-color: var(--background_secondary);
    color: var(--text_primary);
    border:none;
    padding:8px 16px;
    border-radius: 20px;
}

.pageTitleDivButtons > input:focus{
    outline: 1px solid #ccdfff60;
}

.classesContainer{
    width: 100%;
    height: 64px;
    margin-top:32px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.classesContainer > a{
    width: 315px;
    display: block;
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--background_secondary);
    position: relative;
    text-decoration: none;
    height:203px;
    transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.classesContainer > a > spinner{
    position: absolute;
    top:24px;
    right:24px;
    width: 0px;
    height: 0px;
    transform: translate(50%, -50%);
    border-radius: 50px;
    padding: 4px;
    background-color: #0000005d;
    backdrop-filter: blur(5px);
    transition: width .4s cubic-bezier(0.68, -0.55, 0.27, 1.55), height .4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity .2s ease-in-out;
    box-sizing: border-box;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.classesContainer > a > spinner > wheel{
    background-color:  transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 1s linear infinite;
    max-width:  12px;
    max-height: 12px;
    min-width: 12px;
    min-height: 12px;
    animation: spin 1s linear infinite;

}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.classesContainer:has(.openClassroom) > a:not(.openClassroom){
    opacity: 0.5;
    filter: blur(2px);
    scale: 0.95;
    animation-delay: .2s;
}

.openClassroom{
    scale:  1.05;
}

.openClassroom > spinner{
    height: 24px !important;
    width: 24px !important;
    opacity: 1 !important;
    
}

.classesContainer > a > img{
    width: 100%;
    height: 125px;
    object-fit: cover;
}

.pills{
    position: absolute;
    top:12px;
    right:12px;
    height:24px;
    border-radius: 16px;
    display: flex;
    flex-direction: row-reverse;
    gap: 8px;
    z-index: 20;
}

.pills > span, .pills > button,.pills > a{
    height: 100%;
    border-radius: 16px;
    background-color: #0000005d;
    backdrop-filter: blur(5px);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 12px;
    gap:8px;
    border:none;
    color:var(--text_primary)
}

.pills > button,.pills > a{
    cursor: pointer;
    text-decoration: none;
}


.pills > span > svg,.pills > button > svg,.pills > a > svg{
    width: 14px;
    height: 14px;
    fill: var(--text_primary);
}

.textContainer{
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    padding:16px;
}

.textContainer > span > h3{
    margin: 0px;
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--text_primary);
}

.textContainer > span > p{
    margin: 0px;
    font-size: 12px;
    color: var(--text_secondary);
}

.textContainer > svg{
    width: 20px;
    height: 20px;
    margin-bottom: auto;
    cursor: pointer;
}

.textContainerbuttons{
    display: flex;
    gap: 8px;
    margin:0px 16px;
    box-sizing: border-box;
    margin-bottom: 16px;
}

.textContainerbuttons > .primaryButton{
    width: 100%;
}


.textContainerbuttons > button:not(.primaryButton){
    width: 150px;
}

.bottomNavButtons{
    height:64px;
    width: 100%;
    padding:16px;
    display: flex;
    box-sizing: border-box;
    gap:8px;
}

.bottomNavButtons > a{
    background-color: var(--background_tertiary);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    cursor: pointer;
    height: 32px;
    box-sizing: border-box;
}

.bottomNavButtons > a > svg{
    width: 16px;
    height: 16px;
}

.minimize > .bottomNavButtons{
    height:auto;
    flex-direction: column;
    margin-top: auto;
}

.minimize > .bottomNavButtons > a{
    height: 32px;
}

.optionContainerNavBar{
    display: flex;
    padding-left:8px;
    gap:8px;
    flex-direction: column;
    max-height: 300px; /* Reduced from 1000px to a value closer to actual content height */
    transition: 0.3s max-height ease-out; /* Reduced from 1s to 0.3s and changed timing function */
    overflow: hidden;
    margin-bottom: -8px;
    position: relative;
}

.optionContainerNavBar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background: linear-gradient(to bottom, transparent, var(--background_secondary));
    pointer-events: none;
}

.optionContainerNavBar:empty{
    margin-bottom: -8px;
}

.optionContainerNavBar > a{
    min-height: 30px;
    height:30px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    width: 100%;   
    gap:8px;
    padding-left:8px;
    font-size: 14px;
    text-decoration: none;
    color: var(--text_secondary);
    box-sizing: border-box;
}

.optionContainerNavBar > :last-child{
    margin-bottom: 8px !important;
}

.optionContainerNavBar > a > span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.optionContainerNavBar > a > svg{
    width: 16px;
    height: 16px;
    min-height: 16px;
    min-width: 16px;
}

.mainQuickCode{
    width: 100%;
    height: 100%;
    display: flex;
    gap:8px;
    flex-direction: row;
    overflow: hidden;
}

.mainQuickCode > div{
    height: 100%;
    width: 100%;
    background-color: var(--background_secondary);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.leftPanelTaskPage{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: none !important;
}

.leftPanelTaskPage > div{
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--background_secondary);
    border-radius: 24px;
    box-sizing: border-box;
}

.instructionWindow{
    height:50% !important;
    background:none !important;
    min-height: unset !important;
}

.instructionWindowContent{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--background_secondary);
    border-radius: 24px;
    overflow-y: auto;
}

.instructionWindowTopBar{
    width: 100%;
    height: 80px;
    position: relative;
}

.instructionWindowTopBar > img{
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 24px;
}

.instructionWindowTopBar > h2{
    position: absolute;
    top:50%;
    left:32px;
    transform: translateY(-50%);
    margin:0px
}

.codeEditorTopBar{
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap:8px;
    padding-bottom: 0px;
}

.codeEditorTopBar > span{
    background-color: var(--background_tertiary);
    padding: 7px 15px;
    border-radius: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: .2s background-color ease-in-out, .2s color ease-in-out;
}

.feedbackButtonNotSelected{
    background-color: #2a2f3e !important;
    color: var(--text_secondary);
}

.codeEditorTopBar > span > svg{
    width: 16px;
    height: 16px;
}

.codeEditorTopBar > span > svg > path{
    fill: var(--text_secondary);
}

.codeEditorTopBar > button{
    border-radius: 32px;
    border:none;
    padding: 7px 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 16px;
}

.codeEditorTopBar > button > svg{
    width: 16px;
    height: 16px;
}

.saveFeedback{
    background-color: var(--save_button);
    color: var(--on_save_button);
    display: none;
}

.saveFeedback > svg > path{
    fill: var(--on_save_button);
}

.codeEditorClear{
    background-color: var(--clear_button);
    color: var(--on_clear_button);
}

.codeEditorClear > svg > path{
    fill: var(--on_clear_button);
}

.codeEditorRunButton{
    background-color: var(--run_button);
    color: var(--on_run_button);
}

.codeEditorRunButton > svg > path{
    fill: var(--on_run_button);
}

#editor{
    height:100%;
    width: 100%;
    margin-top:8px;
}

#editor .monaco-editor {
    font-family: "IBM Plex Mono", monospace !important;
    background-color: var(--background_secondary) !important; /* Custom background color */
}

.consoleText{    
    height: calc(100% - 128px);
    overflow: auto ;
    white-space: pre-wrap;
    padding:16px;
    box-sizing: border-box;
    margin:0px;
    font-family: "IBM Plex Mono", monospace !important;
}

#consoleInput{
    margin:8px;
    margin-top:auto;
    background:var(--background_tertiary);
    border-radius: 20px;
    height: 32px;
    border:none;
    padding:4px 16px;
    color:var(--text_primary);
    font-family: "IBM Plex Mono", monospace !important;
}

#consoleInput::placeholder{
    color:var(--text_secondary)
}

#consoleInput:focus{
    outline: none;
    filter: brightness(1.1);
}

.bottomCodeBar{
    width: 100%;
    height:32px;
    background-color: red;
    justify-content: center;
    align-items: center;
}

.bottomCodeBar > span{
    color: var(--text_secondary);
    font-size: 12px;
}







.classBannerContainer{
    background-color: var(--background_secondary);
    width: 100%;
    min-height: 200px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    position: relative;
}

.classBannerContainer > img{
    width: 100%;
    height: 100%;
    border-radius: 24px;
    object-fit: cover;
    position: absolute;
    top:0px;
    left:0px;
    z-index: 1;
    opacity: 90%;
}

.classBannerText{
    margin-left:64px;
    display: flex;
    flex-direction: column;
    gap:16px;
    z-index: 2;
    opacity: 1;
    transition: .2s opacity ease;
}

.classBannerTextToggle{
    height: 100%;
    margin: 0px;
    padding: 16px;
    box-sizing: border-box;
}

.classBannerText > h1{
    margin: 0px;
    font-size: 32px;
    color: var(--text_primary);
}

.classBannerText > p{
    margin: 0px;
    font-size: 16px;
    color: var(--text_secondary);
}

.classCodeText{
    position: absolute;
    bottom:0%;
    left:50%;
    transform: translate(-50%,0%);
    z-index: 3;
    margin:0px;
    margin-bottom: 16px;
    display: block;
    transition: .2s opacity ease;
    font-size: 14px;
    font-weight: normal;
    color: var(--text_secondary);
    transition: .25s all ease-in-out, .15s transform ease-in-out;
}

.classCodeTextExpand{
    margin:0px;
    bottom:50%;
    left:50%;
    transform: translate(-50%,50%) scale(5);
    font-weight: bold;
    color: var(--text_primary);
}

.classBannerText{
    transition: margin .2s ease;
}

.classBannerTextExpand{
    height: 100%;
    margin: 0px;
    padding: 24px 24px 24px 0px;
    margin:0px 0px 0px 24px;
    box-sizing: border-box;
    justify-content: space-between;

}

.classBannerTextExpand > h1{
    font-size:16px;
}

.classBannerTextExpand > p{
    font-size: 12px;
}

.classroomContentContainer{
    width: 100%;
    margin-top:8px;
    box-sizing: border-box;
    display: flex;
    gap:16px;
    flex-direction: row;
}

.classroomContentContainer > div:not(.classMembers){
    width: 50%;
    display: flex;
    flex-direction: column;
    gap:8px;
}

.classMembers{
    margin-top:16px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap:8px;
    text-align: center;
}

.classMember{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap:16px;
    background-color: var(--background_secondary);
    border-radius: 16px;
    padding:16px;
    box-sizing: border-box;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
}

.classMember > span{
    display: flex;
    background-color: #263144;
    color:#BDD8FC;
    font-size: 12px;
    padding:5px 11px;
    border-radius: 8px;
    margin-left:auto;
}

.classMember > .notComplete{
    background-color: #444126;
    color: #FCEDBD;
}

.classMember > .complete{
    background-color: #2A4426;
    color: #C4FCBD;
}

.classMember > .missing{
    background-color: #442626;
    color: #FCBDBD;
}

.classMember > p {
    margin:0px;
    font-size: 16px;
    color: var(--text_primary);
    
}

.classMember > div{
    display: flex;
    flex-direction: row;
    gap:8px;
    background-color: var(--background_secondary);
}

.classroomTitleContainer{
    width: 100%;
    background-color: var(--background_secondary);
    height:44px;
    display: flex;
    border-radius: 24px;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
}

.classroomTitleContainer > strong{
    color: var(--text_primary);
    font-size: 16px;
}

.classroomTitleContainer > button,.classroomTitleContainer > a{
    display: flex;
    padding:4px;
    border:none;
    border-radius: 16px;
    background: none;
    cursor: pointer;
}

.classroomTitleContainer > button > svg{
    width:20px;
    height:20px;
    transition: .2s transform ease;
}

.messageContainer,.taskContainer{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:8px;
}

.messageContainer > span{
    background-color: var(--background_secondary);
    display: flex;
    flex-direction: column;
    padding: 8px 6px 16px 8px;
    border-radius: 24px;
    gap:16px;
    position: relative;
}


.messageContainer > span > .messageTitleContainer{
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    gap:8px;
    height:32px;
}

.messageTitleContainer > span{
    height: 32px;
}

.messageContainer > span > p{
    padding-left: 40px !important;
}

.messageContainer > span > .messageTitleContainer > p{
    margin: 0px;
    font-size: 14px;
    color: var(--text_primary);
    margin-left: auto;
    height:32px;
    background-color: #ffffff24;
    padding: 0px 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
}

.messageTitleContainer > span > svg{
    width: 16px;
    height: 16px;
    padding:8px;
    border-radius: 16px;
}

.messageContainer > span > p{
    overflow-wrap: break-word;
    margin:0px;
    font-size: 12px;
    color: var(--text_secondary);
}

.messageTitleContainer > svg > path{
    fill: #EE7777;
}

.taskContainer > a{
    width: 100%;
    display: flex;
    height:44px;
    background-color: var(--background_secondary);
    border-radius: 24px;
    align-items: center;
    padding:16px 16px 16px 6px;
    box-sizing: border-box;
    gap:8px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.pollTask{
    height:auto !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    padding: 8px 6px 8px 8px !important;
    cursor:default !important;
}

.pollOption{
    background-color: var(--background_tertiary);
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 8px 12px;
    box-sizing: border-box;
    border-radius: 24px;
    gap:8px;
    justify-content: space-between;
    cursor: pointer;
}

.pollOption > p{
    margin:0px;
    font-size: 14px;
    color: var(--text_primary);
}

.taskContainer > a > svg,.pollTitleContainer > svg{
    width: 16px;
    height: 16px;
    padding:8px;
    border-radius: 16px;
    overflow: clip;
}

.pollTopBar{
    width: 100%;
    display: flex;
    align-items: center;
    gap:8px;
    box-sizing: border-box;
    background-color: var(--background_secondary);
}

.pollTitleContainer{
    width: 100%;
    display: flex;
    align-items: center;
    gap:8px;
}

.deleteMessageSVG{
    width: 16px;
    height: 16px;
    padding: 8px;
    border-radius: 16px;
}

.pollTopBar > strong{
    margin: 0px;
    font-size: 16px;
    color: var(--text_primary);
    font-weight: normal;
}

.taskContainer > a > svg.svg_red,.messageTitleContainer > span > svg.svg_red,.peopleContainer > div > span > svg.svg_red,.pollTitleContainer > svg.svg_red{
    background-color: #462222;
}

.taskContainer > a > svg.svg_orange,.messageTitleContainer > span > svg.svg_orange,.peopleContainer > div > span > svg.svg_orange,.pollTitleContainer > svg.svg_orange{
    background-color: #463822;
}

.taskContainer > a > svg.svg_green,.messageTitleContainer > span > svg.svg_green,.peopleContainer > div > span > svg.svg_green,.pollTitleContainer > svg.svg_green{
    background-color: #224622;
}

.taskContainer > a > svg.svg_blue,.messageTitleContainer > span > svg.svg_blue,.peopleContainer > div > span > svg.svg_blue,.pollTitleContainer > svg.svg_blue{
    background-color: #222c46;
}

.taskContainer > a > svg.svg_purple,.messageTitleContainer > span > svg.svg_purple,.peopleContainer > div > span > svg.svg_purple,.pollTitleContainer > svg.svg_purple{
    background-color: #382246;
}

.taskContainer > a > svg.svg_pink,.messageTitleContainer > span > svg.svg_pink,.peopleContainer > div > span > svg.svg_pink,.pollTitleContainer > svg.svg_pink{
    background-color: #46223e;
}



.taskContainer > a > svg > path{
    fill: #EE7777;
}

.taskContainer > a > strong{
    margin: 0px;
    font-size: 16px;
    color: var(--text_primary);
    font-weight: normal;
}

.messageTitleContainer > strong{
    margin: 0px;
    font-size: 16px;
    color: var(--text_primary);
    font-weight: normal;
}

.peopleContainer > div > strong{
    margin: 0px;
    font-size: 16px;
    color: var(--text_primary);
    font-weight: normal;
}

.taskContainer > a > p{
    margin:0px;
    margin-left:auto;
    font-size: 12px;
    color: var(--text_secondary);
}

.taskIndercater{
    width:10px;
    height: 10px;
    background-color: #88FF9E;
    border-radius: 50%;
}

.taskIndercater.completed{
    background-color: #88FF9E;
}

.taskIndercater.notcompleted{
    background-color: #FFC088;
}

.taskIndercater.notstarted{
    background-color: #88cfff;
}

.taskIndercater.missing{
    background-color: #FF8888;
}

.messageInputContainer{
    width: 100%;
    display: flex;
    gap:12px;
    align-items: end;
    box-sizing: border-box;
    border-radius: 16px;
    flex-direction: column;
    display: none;
}

.messageInputContainer > div{
    width: 100%;
    display: flex;
    gap:12px;
    align-items: end;
    box-sizing: border-box;
    border-radius: 12px;
    flex-direction: column;

}

.messageInputContainerExpand{
    display: flex;
}

.messageInputContainer> div > textarea{
    width: 100%;
    height: 100px;
    border:none;
    background-color: var(--background_secondary);
    color: var(--text_primary);
    padding: 0px;
    resize: none;
    box-sizing: border-box;
    font-size: 14px;
    border-radius: 24px;
    padding:16px;
    box-sizing: border-box;
}

.messageInputContainer > div > textarea:focus{
    outline: none;
}

.messageInputContainer > div > div{
    width: 100%;
    display: flex;
    gap:8px;
    align-items: center;
    flex-direction: row;
    justify-content: end;
}

.errorMessageForMessage{
    background-color: var(--clear_button);
    color: var(--on_clear_button);
    border-radius: 20px;
    width: 100%;
    height: 32px;
    padding:16px;
    font-size: 14px;
    box-sizing: border-box;
    align-items: center;
    display: none;
}

.instructionWindowContent > div{
    margin-top: auto;
    flex-direction: row-reverse;
    gap:8px;
    display: flex;

}

.weakTopicsContainer{
    height: 474px;
}

.weakTopicsContainer > h3{
    margin:0px;
    margin-left:16px;
    font-size: 12px;
}

.weakTopicsContainer > h4{
    margin:0px;
    margin-left:16px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--text_secondary);
    font-weight: normal;
}

.weakTopicsTasks{
    width: 100%;
    padding: 0px 16px;
    display: flex;
    gap:8px;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    margin-top:8px;
}

.weakTopicsTasks > span{
    width: 100%;
    height: 100%;
    background-color: var(--background_tertiary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:2px;
    padding:12px;
    box-sizing: border-box;
}

.weakTopicTaskTitleContainer{
    width:100%;
    display: flex;
    gap:8px;
    align-items: center;
    justify-content: start;
}

.weakTopicTaskTitleContainer > svg{
    width: 16px;
    height: 16px;
    fill: var(--on_submit_button);
}

.weakTopicTaskTitleContainer > svg > path{
    fill: var(--on_submit_button);
}


.weakTopicTaskTitleContainer > strong{
    margin:0px;
    font-size: 13px;
    color: var(--text_primary);
}

.weakTopicsTasks > span > p{
    margin:0px;
    font-size: 12px;
    color: var(--text_secondary);
    width: 100%;
    margin-top:8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weakTopicsContainer > .weakTopics{
    width: 100%;
    height:50px;
    padding:0px 16px;
    box-sizing: border-box;
    margin-top:12px;
    display: flex;
    gap:8px;
    align-items: center;
}

.weakTopicsContainer > .weakTopics > span{
    width: 100%;
    height: 100%;
    background-color: var(--background_tertiary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:2px;
}

.weakTopicsContainer > .weakTopics > span > strong{
    margin:0px;
    font-size: 12px;
    color: var(--text_primary);
    font-weight: normal;
}

.container404{
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.container404 > h2{
    font-size: 32px;
    margin:0px;
}




@media (max-width:1000px) {
    .taskListContainer{
        width: 100% !important;
    }
    .mainQuickCode{
        flex-direction: column;
    }
    .pageTitleDivButtons > input{
        width:70px;
    }
    .deleteQuickCode > span{
        display: none;

    }
    .classroomContentContainer{
        flex-direction: column-reverse;
    }
    .classroomContentContainer > div{
        width: 100% !important;
    }
    .createClassForm{
        width: 100% !important;
    }
}

@media (max-width:500px) {
    .noClasses{
        width: 300px !important;
    }
    main:not(.mainQuickCode){
        padding: 16px;
    }
    .mainQuickCode{
        padding: 16px 0px 0px 0px;
    }
    .classesContainer > a{
        width: 100%;
    }
    .joinClassHomeButton{
        display: none;
    }
    .pageTitleDiv > h1{
        white-space: nowrap;
        font-size: 20px;
    }
    .pageTitleDiv{
        gap:16px;
    }
    .classroomSettingText > p,.classMember > p,.messageTitleContainer > strong{
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.codeProjectsContainer{
    width: 100%;
    height: 64px;
    margin-top:32px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    height: 200px;
}

.codeProjectsContainer > a{
    width: 315px;
    height:125px;
    display: block;
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--background_secondary);
    position: relative;
    text-decoration: none;
    cursor: pointer;
}

.codeProjectsContainer > a > img{
    width: 100%;
    height: 125px;
    object-fit: cover;
}

.codeProjectsContainer > a > h3{
    z-index: 10;
    position: absolute;
    bottom: 24px;
    left: 24px;
    margin:0px;
    font-size: 16px;
    color: var(--text_primary);
}

.editorBottonBar{
    width: 100%;
    height:32px;
    border-top:1px solid var(--background_tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom:0px;
    left:0px;
    z-index: 10;
    font-size: 12px;
    color:var(--text_secondary);
    background-color: var(--background_secondary);
}

.createClassForm{
    width: 524px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.createClassForm > div:not(.errorMessage){
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.createClassForm > div > label{
    font-size: 14px;
    color: var(--text_secondary);
}

.createClassForm > div > input{
    height: 40px;
    background-color: var(--background_secondary);
    color: var(--text_primary);
    border: none;
    padding: 0px 16px;
    border-radius: 24px;
    box-sizing: border-box;
    font-size: 14px;
}

.createClassForm > div > textarea{
    height: 128px;
    background-color: var(--background_secondary);
    color: var(--text_primary);
    border: none;
    padding: 15px 16px;
    border-radius: 24px;
    box-sizing: border-box;
    resize: none;
    font-size: 14px;
}

.createClassForm > div > textarea:focus{
    outline: none;
}

.createClassForm > div > input:focus{
    outline: none;
}



.createClassMain{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.coverImageContainer{
    width: 100%;
    height:100px;
    position: relative;
}

.imagesLeft{
    position: absolute;
    top:50%;
    left:0px;
    transform: translateY(-50%);
    cursor: pointer;
    width:calc(50% - 50px);
    display: flex;
    height: 80px;
    gap:8px;
}

.imagesLeft > span{
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 16px;
    opacity: .5;
    overflow: hidden;
}

.imagesLeft > span > img, .imagesRight > span > img,.mainImage > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    overflow: hidden;
}

.imagesRight{
    position: absolute;
    top:50%;
    right:0px;
    transform: translateY(-50%);
    cursor: pointer;
    height:80px;
    width:calc(50% - 50px);
    display: flex;
    gap:8px;;
}

.imagesRight > span{
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 16px;
    opacity: .5;
    overflow: hidden;
}

.mainImage{
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    width:180px;
    height:100%;
    z-index: 2;
    border-radius: 16px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.50);
}

.mainImage > button{
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(2.50px);  
    width: 32px;
    height:32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border:none;
    position: absolute;
    bottom:4px;
    cursor: pointer;
    transition: .2s transform ease-in-out;
}

.mainImage > button:hover{
    transform: scale(1.1);
}

.mainImage > button:active{
    transform: scale(.9);
}

.mainImage > button > svg{
    width: 16px;
    height: 16px;
}

.nextImageLeft{
    left:4px;
}

.nextImageRight{
    right:4px;
}

@keyframes slideIn {
    from {
        transform: scale(0.98);
    }
    to {
        transform: scale(1);
    }
}

@keyframes slideInImg {
    from {
        transform: scale(2);
    }
    to {
        transform: scale(1);
    }
}

.slide-animation:not(.imagesRight > span,.imagesLeft > span){
    animation: slideIn 0.3s ease forwards;
}

.errorMessage{
    height:40px;
    width: 100%;
    background-color: var(--clear_button);
    color: var(--on_clear_button);
    border-radius: 16px;
    display: none;
    align-items: center;
    justify-content: flex-start;
    gap:8px;
    padding: 0px 16px;
    box-sizing: border-box;
}

.errorMessage > p{
    color: var(--on_clear_button) !important;
    font-size: 12px;
}

.errorMessage > svg{
    height: 16px;
    width: 16px;
}

.errorMessage > svg > path{
    fill: var(--on_clear_button);
}

.deleteMessage{
    display: flex;
    align-items: center;
}

.deleteMessageSVG{
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.deleteMessage:hover > .deleteMessageSVG > path{
    fill:var(--redButtonBackground)
}

.deleteCover{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: var(--background_secondary);
    z-index: 10;
    border-radius: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:8px;
}

.deleteCover > .deleteButtonContainer{
    display: flex;
    gap: 8px;
    flex-direction: row-reverse ;
}

.deleteCover > span{
    font-size: 14px;
    color: var(--text_primary);
}



.classroomSettingContainer, .classroomSettingContainerPage{
    width: 100%;
    height: auto;
    margin-top:8px;
    display: flex;
    gap:8px;
    flex-direction: column;
}

.classroomSettingContainer > .primaryButton{
    margin-top:8px;
}

.websiteSettings > a{
    cursor: pointer;
}

.classroomSettingContainer > a:hover svg{
    transform: translateX(8px);
}

.classroomSettingContainer > a:active svg{
    transform: translateX(12px);
}
.classroomSettingContainer > a > svg{
    width: 20px;
    height: 20px;
    margin-right:8px;
    transition: .2s transform ease;
}

.classroomSettingContainer > div:not(.classroomSettingsTitleSubtitle, .classroomSettingsDescription),.classroomSettingContainer > div::not(.errorMessage){
    width:100%;
    background-color: var(--background_secondary);
    border-radius: 20px;
    height:64px;
    padding:8px 12px 8px 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}

.websiteSettings > div,.websiteSettings > a,.classroomSettingContainerPage > a,.classroomSettingContainerPage > div:not(.classroomSettingsTitleSubtitle, .classroomSettingsDescription){
    width:100%;
    background-color: var(--background_secondary);
    border-radius: 20px;
    height:64px;
    padding:8px 12px 8px 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}

.classroomSettingsContainerDelete{
    width:100%;
    background-color: var(--background_secondary);
    border-radius: 20px;
    height:64px;
    padding:8px 12px 8px 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}

.classroomSettingText{
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    justify-content: center;
}

.classroomSettingText > h4{
    margin:0px;
    font-size: 16px;
    color: var(--text_primary);
}

.classroomSettingText > p{
    margin:0px;
    font-size: 12px;
    color: var(--text_secondary);
}

.switch{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 38px;
    height: 20px;
    background: #3f4758;
    border-radius: 25px;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: background 0.2s ease-in-out;
}

.switch::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: #687698;
    border-radius: 50%;
    transition: transform 0.3s  cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.switch:checked {
    background: #4E74D0;
}


.switch:checked::before {
    transform: translateX(17px);
    background-color: #171C29;
}

.classroomSettingsTitleSubtitle{
    width:100%;
    display: flex;
    flex-direction: row;
    gap:8px;
}

@media (max-width:1052px) {
    .classroomSettingsTitleSubtitle{
        flex-direction: column;
    }
    
}

.classroomSettingsTitleSubtitle > div,.classroomSettingsDescription{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:4px;
}

.classroomSettingsTitleSubtitle > div > div,.classroomSettingsDescription > div{
    width:100%;
    background-color: var(--background_secondary);
    border-radius: 16px 16px 4px 4px;
    height:64px;
    padding:8px 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.classroomSettingsTitleSubtitle > div > input{
    height: 40px;
    background-color: var(--background_secondary);
    color: var(--text_primary);
    border: none;
    padding: 0px 16px;
    border-radius: 4px 4px 16px 16px;
    box-sizing: border-box;
    font-size: 14px;
}

.classroomSettingsDescription > textarea{
    height: 80px;
    background-color: var(--background_secondary);
    color: var(--text_primary);
    border: none;
    padding: 16px 16px;
    border-radius: 4px 4px 16px 16px;
    box-sizing: border-box;
    font-size: 14px;
    resize: none;
}

.classroomSettingsTitleSubtitle > div > input:focus,.classroomSettingsDescription > textarea:focus{
    outline: none;
}

.classroomSettingsButtons{
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-direction: reverse;
}

.classroomSettingContainer > h3{
    margin:24px 0px 16px 0px;
}

.searchContainer{
    position: absolute;
    top:30%;
    left:50%;
    transform: translateX(-50%);
    width:70%;
    max-width: 480px;
    background-color: var(--background_secondary);
    display: none;
    z-index: 10;
    box-shadow: 2px 2px 20px 10px rgba(0,0,0,0.50);
    border: 1px solid #46526d;
    border-radius: 16px;
    overflow: hidden;
    flex-direction: column;
}

.searchBarContainer{
    box-sizing: border-box;
    height:48px;
    width: 100%;
    background-color: none;
    display: flex;
    align-items: center;
    padding: 0px 16px;
    gap:16px;
    border-bottom: 0px solid #46526d;
}

.searchBarContainer > svg{
    width: 20px;
    height: 20px;
}

.searchBarContainer > input{
    width: 100%;
    height: 100%;
    border: none;
    box-sizing: border-box;
    font-size: 15px;
    background:none;
    color: var(--text_primary);
}


.searchBarContainer > input:focus{
    outline: none;
}

.searchOptions{
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-height:200px;
    overflow: hidden;
}

.searchOptions > a{
    flex-shrink: 0;
    width: 100%;
    height: 40px;
    display: none;
    box-sizing: border-box;
    align-items: center;
    align-items: center;
    padding: 0px 16px;
    gap:8px;
    font-size: 13px;
    text-decoration: none;
    color: var(--text_secondary);
    background-color: var(--background_secondary);
    transition: .2s background-color ease;
}

.searchOptions > a:hover{
    background-color: #2b313f;
}

.selected{
    background-color: #2b313f !important;
}

.searchOptions > a > svg{
    width: 16px;
    height: 16px;
}

.taskListContainer{
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 700px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
}

.taskListTitleContainer{
    width: 100%;
    display: flex;
    gap:8px;
    align-items: center;
    height: 48px;
    padding:0px 16px;
    box-sizing: border-box;
    border-radius: 16px;
}

.taskListTitleContainer > svg{
    width: 20px;
    height: 20px;
}

.taskListTitleContainerRed{
    background-color: #3d2626;
    color:#FFDBDB;
}

.taskListTitleContainerRed svg > path{
    fill: #FFDBDB;
}

.taskListTitleContainerOrange{
    background-color: #3d3226;
    color:#FFDCC8;
}

.taskListTitleContainerOrange svg > path{
    fill: #FFDCC8;
}

.taskListTitleContainerGreen{
    background-color: #263d26;
    color:#DBFFDB;
}

.taskListTitleContainerGreen svg > path{
    fill: #DBFFDB;
}

.taskListTitleContainer > button{
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border:none;
    cursor: pointer;
}

.taskListTitleContainer > button > svg{
    width: 20px;
    height: 20px;
    transition: .3s transform ease;
}


.taskListContainerTasks{
    box-sizing: border-box;
    background-color: var(--background_secondary);
    box-sizing: border-box;
    border-radius: 20px;
    max-height: 300px;
    transition: 0.3s max-height ease-out, 0.3s padding ease-out;
    overflow-y: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:12px;
    
}

.taskListContainerTasks > :first-child{
    margin-top:8px !important;
}

.taskListContainerTasks > :last-child{
    margin-bottom:8px !important;
}


.taskListContainerTasks > a{
    width: calc(100% - 16px);
    display: flex;
    gap:8px;
    box-sizing: border-box;
    align-items: center;
    box-sizing: border-box;
    color: var(--text_primary);
    text-decoration: none;
    margin-left: 8px;
    margin-right:8px;
}

.taskDueDate{
    margin-left:auto;
    font-size: 14px;
    color: var(--text_secondary);
    margin-right: 10px;
}

.taskStatus{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #FFDCC8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.taskStatus > svg{
    width: 16px;
    height: 16px;
}

.taskColorred{
    background-color: #502C2C;
}

.taskColorred > svg > path{
    fill: #FCBDBD;
}

.taskColororange{
    background-color: #503E2C;
}

.taskColororange > svg > path{
    fill: #FCD7BD;
}

.taskColorgreen{
    background-color: #2C5037;
}

.taskColorgreen > svg > path{
    fill: #BDFCC1;
}

.taskColorblue{
    background-color: #2C3750;
}

.taskColorblue > svg > path{
    fill: #BDEBFC;
}

.taskColorpurple{
    background-color: #3B2C50;
}

.taskColorpurple > svg > path{
    fill: #C1BDFC;
}

.taskColorpink{
    background-color: #4F2C50;
}

.taskColorpink > svg > path{
    fill: #FBBDFC;
}

.taskListContainer > div{
    width: 100%;
    display: flex;
    gap:8px;
    align-items: center;
    box-sizing: border-box;
    border-radius: 20px;
    flex-direction: column;
}

.taskListHidden{
    overflow-y: hidden !important;
}


.taskListContainer > div:has(.taskListHidden) button > svg{
    transform: rotate(180deg);
}

.searchButtonNavBar{
    display: flex;
    background-color: var(--background_tertiary);
    border-radius: 12px;
    padding: 7px;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    border: none;
    font-size: 14px;
    color: var(--text_secondary);
    cursor: pointer;
    transition: .2s filter ease;
    box-sizing: border-box;
    border: 2px solid #3c455c;
}

.searchButtonNavBar:hover{
    filter: brightness(1.1);
}
.searchButtonNavBar > svg{
    width: 18px;
    height: 18px;
}

.searchButtonNavBar > svg > path{
    fill: var(--text_secondary);
}

.markdown{
    width: 100%;
    height:100%;
}

.markdown{
    overflow-y: scroll;
}

.markdownTask{
    height: 150px;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 24px;
    background-color: var(--background_secondary);
}

.peopleContainer{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:8px;
}

.peopleContainer > div{
    width: 100%;
    display: flex;
    height: 44px;
    background-color: var(--background_secondary);
    border-radius: 24px;
    align-items: center;
    padding: 16px 10px 16px 6px;
    box-sizing: border-box;
    gap: 8px;
    text-decoration: none;
}

.peopleContainer > div > span{
    display: flex;
    justify-content: center;
    align-items: center;
}

.peopleContainer > div > span > svg{
    width: 16px;
    height: 16px;
    padding: 8px;
    border-radius: 16px;
}

.classroomPeopleContainer{
    width: 100% !important;
}

.personRole{
    margin:0px;
    margin-left:auto;
    display: flex;
    background-color: #263144;
    color: #BDD8FC;
    font-size: 12px;
    padding: 5px 11px;
    border-radius: 16px;
}

.personRoleTeacher{
    background-color: #442626;
    color: #FCBDBD;
}

.noClasses{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align: center;
    max-width: 400px;
    gap:16px;
    display: none;
    flex-direction: column;
    width:400px;
}

.noClasses > h2{
    margin:0px;
    font-size: 32px;
}

.noClasses > p{
    margin:0px;
    font-size: 16px;
    color: var(--text_secondary);
}

.noClasses > div{
    display: flex;
    gap:8px;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    margin-top:16px
}

.containerWithNumber{
    background-color: var(--background_secondary);
    display: flex;
    flex-direction: row !important;
    align-items: center;
    padding:12px;
    border-radius: 24px;
}

.containerWithNumberTextContainer{
    display: flex;
    flex-direction: column;
    gap:8px;
    max-width: 400px;
    box-sizing: border-box;
}

.containerWithNumberTextContainer > h3{
    font-size: 16px;
    margin:0px;
}

.containerWithNumberTextContainer > p{
    font-size: 12px;
    color: var(--text_secondary);
    margin:0px;
}

.containerWithNumber > input{
    width:64px;
    height: 40px;
    background:none;
    color: var(--text_primary);
    border:1px solid var(--background_tertiary) !important;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: textfield;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left:auto;
    text-align: center;
    border-radius: 12px !important;
    font-size: 16px !important;
}

.containerWithNumber > input:focus{
    outline: none;
}

/* Hide spinner buttons in Webkit browsers specifically */
.containerWithNumber > input::-webkit-outer-spin-button,
.containerWithNumber > input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.feedbackWindow{
    width: 100%;
    height: calc(100% - 32px) !important;
    display: none;
    padding:0px 8px 8px 8px;
    box-sizing: border-box;
    flex-direction: column;
    gap:8px
    
}

.feedbackWindow > textarea{
    width: 100%;
    height: 100%;
    background-color: var(--background_tertiary);
    box-sizing: border-box;
    border-radius: 16px;
    border:none;
    padding: 12px;
    color: var(--text_primary);
    resize: none;
    font-size: 14px;
}

.feedbackWindow > textarea:focus{
    outline: none;
}

.feedbackWindow > .containerWithNumber{
    background-color: var(--background_tertiary);
}

.feedbackWindow > .containerWithNumber > input{
    border:1px solid #4d566e !important;
}

.errorBarFeedback{
    background-color: var(--background_secondary);
    border-top: 1px solid var(--background_tertiary);
    margin:0px -8px -8px -8px;
    width: calc(100% + 16px);
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text_secondary);
    min-height:32px;
    border-radius: 0px 0px 16px 16px;
}

.feedbackTextTaskList{
    margin-left:auto;
    display: none;
    background-color: #263144;
    color:#BDD8FC;
    font-size: 12px;
    padding:5px 11px;
    border-radius: 8px;
}

.taskSummaryContainerTaskList{
    padding: 16px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    gap:8px;   
    transition: .3s background-position ease-in-out;
    background-size: 200% 200%;
    background: linear-gradient(89deg, rgba(135, 59, 91, 0.50) 1.69%, rgba(71, 48, 69, 0.50) 31.68%, rgba(112, 70, 91, 0.50) 54.91%, rgba(158, 99, 100, 0.50) 99.35%);
}

.weakTopicSummaryContainer{
    background: linear-gradient(89deg, rgba(221, 141, 92, 0.50) 1.69%, rgba(111, 74, 33, 0.50) 31.68%, rgba(139, 80, 48, 0.50) 54.91%, rgba(190, 121, 96, 0.50) 99.35%);
}

.ideaCreatorInstuctionsContainer{
    background: linear-gradient(89deg, rgba(221, 92, 92, 0.50) 1.69%, rgba(111, 33, 33, 0.50) 31.68%, rgba(139, 48, 48, 0.50) 54.91%, rgba(190, 96, 96, 0.50) 99.35%);
}

.weakTopicSummaryContainer > .taskSummaryTitleTextContainer > span{
    background: linear-gradient(90deg, #FFE9E0 0%, #E9C6C6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.weakTopicSummaryContainer  p{
    color:#FFEBD9 !important;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animated-gradient{
    animation: gradientAnimation 2s ease-in-out infinite;
    background-size: 200% 200%;
}

.taskSummaryTitleTextContainer{
    display: flex;
    gap:8px;
    align-items: center;
    width: 100%;
    justify-content: flex-start;

}
.taskSummaryTitleTextContainer > svg{
    width: 18px;
    height: 18px;
}

.taskSummaryTitleTextContainer > span{
    background: linear-gradient(90deg, #FFE0EE 0%, #CCC6E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
}

.taskSummaryTitleTextContainer > p{
    font-size: 12px;
    color: #d5b8d9;
    margin:0px;
    margin-left:auto;
}

.taskSummaryContainerTaskList > p{
    font-size: 14px;
    color: #d5b8d9;
    margin:0px;
}

.aiMarkdown{
    overflow: hidden;
    display: none;
}

.weakTopicsTopicsContainer{
    width: 100%;
    display: flex;
    gap:8px;
    flex-direction: row !important;
    height: 80px;

}

.weakTopicsTopicsContainer > span{
    width: 100%;
    height: 100%;
    background-color: var(--background_secondary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:8px;
    padding:12px;
    box-sizing: border-box;
}

.weakTopicsTopicsContainer > span > p{
    margin:0px;
    font-size: 12px;
    color: var(--text_secondary);
}

.weakTopicsTopicsContainer > span > img{
    width: 20px;
    height: 20px;
}

.planOptions{
    width: 100%;
    display: flex;
    gap:12px;
    flex-direction: column;
    background-color: var(--background_secondary);
    padding: 16px;
    border-radius: 16px;
    box-sizing: border-box;
}

.planOptions > span{
    display: flex;
    flex-direction: row;
    gap:8px;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--background_tertiary);
}

.planOptions > span:last-child{
    border-bottom:none !important;
    padding-bottom: 0px !important;
}

.planOptions > span > div{
    display: flex;
    flex-direction: column;
    gap:8px;
}


.planOptions > span > div > p{
    margin:0px;
    font-size: 12px;
    color: var(--text_secondary);
}

.planOptions > span > div > label{
    margin:0px;
    font-size: 14px;
    font-weight: bold;
    color: var(--text_primary);
}

.planOptions > span  > input[type="radio"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid var(--background_tertiary);
    background-color: var(--background_secondary);
    position: relative;
    cursor: pointer;
    outline: none;
    margin-right: 8px;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    }

    .planOptions > span > input[type="radio"]:checked {
    border-color: #6f7b8e;
    background-color: var(--text_theme);
    }
    .planOptions > span > input[type="radio"]:hover:not(:checked) {
    border-color: #6f7b8e;
}

.saveTag{
    display: flex;
    background-color: #263144;
    color: #BDD8FC;
    font-size: 12px;
    padding: 5px 11px;
    border-radius: 8px;
    margin-left: auto;
}

.upgradeForm{
    width:calc(50% - 16px);
}

.upgradePerks{
    width: calc(50% - 16px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.upgradePerks > div{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upgradeContainer{
    display: flex;
    width: 100%;
    height: 100%;
    gap: 16px;
    flex-direction: row;
}

.upgradeContainer label{
    font-size: 14px;
    color: var(--text_secondary);
}

.upgradePerks > div > div{
    display: flex;
    flex-direction: column;
    gap:12px;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--background_secondary);
    border-radius: 16px;
}

.upgradePerks > div > div > span{
    display: flex;
    gap:8px;
    align-items: center;
}

.upgradePerks > div > div > span > svg{
    width: 16px;
    height: 16px;
}

.upgradePerks > div > div > span > span{
    font-size: 14px;
    color: var(--text_secondary);
}

.perkListTeacherFeatures{
    background: linear-gradient(90deg, #1D2315 0%, #3C4A28 100%);
}

.perkListTeacherFeatures > span > svg > path{
    fill: #BDFCC8;
}

.perkListStudentFeatures{
    background: linear-gradient(90deg, #231515 0%, #4A2828 100%);
}

.perkListStudentFeatures > span > svg > path{
    fill: #FCBDBD;
}

.perkListAdminFeatures{
    background: linear-gradient(90deg, #151923 0%, #28324A 100%);
}

.perkListAdminFeatures > span > svg > path{
    fill: #BDC9FC;
}

.learningPathContainer{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    flex-direction: column;
}

.learningPathContainer > p{
    font-size: 14px;
    max-width: 600px;
    margin:0px;
    text-align: center;
    color: var(--text_secondary);
}

.learningPathContainer > h1{
    margin:0px;
}

.aiThinkingLearningPath{
    max-width: 700px;
    position: absolute;
    bottom: 32px;
    left:50%;
    transform: translateX(-50%);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
}

.learningPathContainer > h1 > span:not(#createText){
    background: linear-gradient(91deg, #E969CA 32.6%, #FE7B7D 50.78%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tasksLearningPath{
    max-width: 700px;
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 16px;
}

.tasksLearningPath > div{
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    background: rgba(135, 59, 91, 0.50) !important
}

.tasksLearningPath > div > .markdown {
    display: none;
    max-height: 200px;
    overflow-y: hidden;
    position: relative;
    scroll-behavior: smooth;
}

.tasksLearningPath > div > .markdown::before {
    content: '';
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, rgb(74 37 54), transparent);
    pointer-events: none;
    z-index: 1;
    display: block;
    margin-bottom: -40px; 
}

.tasksLearningPath > div > .markdown::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to top, rgb(74 37 54), transparent);
    pointer-events: none;
    z-index: 1;
    display: block;
    margin-top: -40px;
}

@keyframes closeMarkdown {
    from {
        max-height: 200px;
    }
    to {
        max-height: 0px;
        display: none;
    }
}

.closeMarkdown{
    animation: closeMarkdown 0.3s ease-in-out forwards;
}

.minimize .navBarStreakLevelContainer{
    display: none;
}

.navBarStreakLevelContainer{
    width: 200%;
    padding: 16px 16px 0px 16px;
    margin-bottom: -8px;
    box-sizing: border-box;
    display: flex;
    gap:32px;
}

.showStreak{
    transform: translateX(0%);
}

.animate-bounceInOP {
    animation: bounceInOP 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceInOP {
    0% {
        transform: translateX(calc(-50% + 5px));
    }
    60% {
        transform: translateX(-5px);
    }
    80% {
        transform: translateX(2px);
    }
    100% {
        transform: translateX(0%);
    }
}

.showXP{
    transform: translateX(-50%);
}

.animate-bounceIn {
    animation: bounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceIn {
    0% {
        transform: translateX(calc(0% + -5px));
    }
    60% {
        transform: translateX(calc(-50% + 5px));
    }
    80% {
        transform: translateX(calc(-50% + -2px));
    }
    100% {
        transform: translateX(-50%);
    }
}

.navBarStreakLevel, .navBarXPLevel{
    width: 100%;
    background-color: var(--streakBackground);
    border-radius: 12px;
    padding:10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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


.navBarStreakLevelText, .navBarXPLevelText{
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    color: var(--streakTextPrimary);
    user-select: none;
    font-size: 15px;
}

.navBarStreakLevelText > button, .navBarXPLevelText > button{
    background: none;
    border:none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left:auto;
    user-select: none;
}

.navBarStreakLevelText > button > svg, .navBarXPLevelText > button > svg{
    width: 16px;
    height: 16px;
}

.navBarStreakLevelText > button > svg > path{
    fill: var(--streakTextPrimary);
}

.navBarXPLevelText > button > svg > path{
    fill: var(--XPTextPrimary);
}


.navBarXPLevelText{
    color: var(--XPTextPrimary) !important;
}

.navBarStreakLevelText > i, .navBarXPLevelText > i{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--streakIcon);
    user-select: none;
}


.navBarXPLevelText > i{
    color: var(--XPTextSecondary) !important;
}

.navBarStreakLevelValue, .navBarXPLevelValue{
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    padding:0px 4px;
    box-sizing: border-box;
    user-select: none;
}

.navBarStreakLevelValueRange, .navBarXPLevelValueRange{
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background-color: var(--streakSliderBackground);
}

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

.navBarStreakLevelValueLevel, .navBarXPLevelValueLevel{
    font-size: 12px;
    color: var(--streakTextSecondary);
}

.navBarXPLevelValueLevel{
    color: var(--XPTextSecondary) !important;
}

.navBarStreakLevelValueRangeCurrent, .navBarXPLevelValueRangeCurrent{
    height: 100%;
    border-radius: 6px;
    display: block;
    background-color: var(--streakSliderPrimary);
}

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


.classroomCoverImages{
    width: 100%;
    display: flex;
    gap: 8px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.classroomCoverImages > span{
    width: 100%;
    height: 100%;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-sizing: border-box;
    transition: .2s min-width ease-in-out, .2s opacity ease-in-out;
    min-width: calc(100% / 5 - 64px);
    cursor: pointer;
    opacity: .5;
    position: relative;
}

.classroomCoverImages > span > img{
    width: 100%;
    height: 100px;
    border-radius: 16px;
    object-fit: cover;
}

@media (max-width:700px) {
    .classroomCoverImages > span:hover{
        min-width: 60px !important;
    }
    .selectedCover{
        min-width: 60px !important;
        opacity: 1 !important;
    }
    .classroomCoverImages{
        gap:4px;
    }

    .classroomCoverImages > span{
        min-width: calc(100% / 5 - 32px);
    }
}

@media (min-width:700px) {
    .selectedCover{
        min-width: 150px !important;
        opacity: 1 !important;
    }
    
}

.classroomCoverImages > span:hover{
    min-width: 150px;
    opacity: 1;
}

@keyframes loadIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    70% {
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.selectedCover::after{
    content: '';
    position: absolute;
    top:8px;
    right:8px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 8px;
    mix-blend-mode: soft-light;
    filter: brightness(150%);
    animation: loadIn 0.3s ease-in-out;
}

.notifications{
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap:8px;
}

.notifications > span{
    padding:11px 17px;
    background-color: var(--notificationGreenBackground);
    color: var(--notificationGreenText);
    border-radius: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:16px;
    animation: notificationBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: right center;
}

@keyframes notificationBounce {
    0% {
        transform: translateX(100%);
    }
    60% {
        transform: translateX(5px);
    }
    80% {
        transform: translateX(-2px);
    }
    100% {
        transform: translateX(0%);
    }
}

.notifications > span > button{
    background: none;
    border:none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left:auto;
}

.notifications > span svg{
    width: 18px;
    height: 18px;
}

.notifications > span svg > path{
    fill: var(--notificationGreenText);
}

.wanningNotification{
    background-color: var(--notificationYellowBackground) !important;
    color: var(--notificationYellowText) !important;
}

.wanningNotification svg > path{
    fill: var(--notificationYellowText) !important;
}

.errorNotification{
    background-color: var(--notificationRedBackground) !important;
    color: var(--notificationRedText) !important;
}

.errorNotification svg > path{
    fill: var(--notificationRedText) !important;
}

.createOptionsContainer{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.createOptionsContainer > h2{
    text-align: center;
}
.createOptionsContainer > div{
    width: 100%;
    display: flex;
    gap: 8px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.createOptionsContainer > div > a{
    width:248px;
    display: flex;
    background-color: var(--background_secondary);
    border-radius: 24px;
    cursor: pointer;
    padding: 12px;
    box-sizing: border-box;
    flex-direction: column;
    gap:8px;
    text-decoration: none;
    color: var(--text_primary);
}

.createOptionTopBar{
    height: fit-content;
    width: 100%;
    display: flex;
    align-items: center;
    gap:8px;
    font-weight: bold;
}

.createOptionTopBar > svg{
    width: 16px;
    height: 16px;
}

.createOptionsText{
    margin:0px;
    font-size: 14px;
    color: var(--text_secondary);
}

.resourceDialog::backdrop{
    background-color: #0000005d;
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    overflow: hidden;
}

.resourceDialog[open]::backdrop {
    opacity: 1;
}

.resourceDialog[open] {
    opacity: 1;
    visibility: visible;
    animation: dialogScaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes dialogScaleIn {
    from {
        opacity: 0;
        transform: translate(-50%, 20%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0%) scale(1);
    }
}

.resourceDialog {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    height: 90%;
    bottom: 0px;
    left: 50%;
    width: 80%;
    background: none;
    transform: translate(-50%, 0%);
    z-index: 100;
    margin: 0px;
    border: none;
    padding: 0px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: auto;
    max-width: 900px;
}

.resourceDialogButtons{
    display: flex;
    gap:8px;
    flex-direction: column;
}

.resourceDialogPage{
    border-radius: 24px 24px 0px 0px;
    height:100%;
    width: 100%;
    background-color: var(--background_secondary);
    padding:32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap:16px;
}

.resourceDialogPage > h1{
    margin:0px;
    font-size: 24px;
    color: var(--text_primary);
}

.resourceDialogPageMD{
    width: 100%;
    height: auto;
}

.pollOptionCount{
    color:#9AB7FF !important;
}

#resourceDeleteCover{
    margin-left:48px !important;
    width: calc(100% - 48px) !important;
    border-radius: 24px;
}

.createOption{
    width: 100%;
    height: 80px;
    display: none;
    flex-direction: row;
    align-items: center;
    gap:8px;
}

.createOption > a{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--background_secondary);
    border-radius: 24px;
    text-decoration: none;
    color: var(--text_primary);
    gap: 8px;
    cursor: pointer;
}

.showCreateOptions{
    display: flex;
    height: 80px;
}

.createOption > a > svg{
    width: 20px;
    height: 20px;
}

.createTaskButton > svg{
    width: 20px;
    height: 20px;
    transition: .2s transform ease;
}

.createTaskButtonSVGRotate > svg{
    transform: rotate(45deg);
}

@media (max-width:700px) {
    .navSideBar{
        position: fixed;
    }
    .navSideBar:not(.minimize){
        position: fixed;
        box-shadow: 4px 0px 10px #00000060;
    }
    main{
        margin-left:60px
    }
}

@media (min-width:1200px) {
    main{
        max-width: 1200px;
        margin-left:auto;
        margin-right:auto;
    }
}

.deleteContainer{
    gap:0px !important;
    display: flex;
    background-color: #FA8282;
    padding:0px;
    justify-content: end;
    align-items: center;
    border-radius: 16px;
    color:#3B0000;
    font-size: 14px;
    transition: width 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    width: 32px;
    overflow: hidden;
    cursor: pointer;
}

#deleteResource{
    position: absolute;
    top: 40px;
}

.deleteContainerExpand{
    width: 95px;
}

.deleteContainerExpand > .deleteTextConfirm{
    display: block;
    margin-left:4px;
    color: #3B0000;
}

.deleteContainer > svg{
    width: 16px;
    height: 16px;
}

.deleteMessageSVG > path{
    fill: #3B0000 !important;
}

.deleteContainer:active{
    scale: 0.9;
}