/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#students-screen{
    padding-bottom:1rem;
}
.students-main-holder{
    justify-content:flex-start;
    align-items:flex-start;
    display:flex;
    height:fit-content;
    width:100%;
}
.student-portrait-button-holder{
    display:none;
}

/*--Class List---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.class-list-window{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    height:fit-content;
    padding:1rem;
    width:15rem;
    margin-left:1rem;
    margin-top:1rem;
}
#class-search-icon-holder{
    margin-bottom:1rem;
    width:100%;
}
.class-list-holder{
    height:fit-content;
    overflow-x:hidden;
    overflow-y:auto;

    max-height:19rem;
    width:100%;
}
.class-list{
    color:var(--gray-1);
    min-height:2rem;
    width:100%;
}

.class-list-window-row{
    transition:ease-in-out 0.05s;
    justify-content:flex-start;
    align-items:center;
    cursor:pointer;
    display:flex;

    border-radius:var(--border-radius-1);
    height:2rem;
    width:100%;
}
.class-list-window-row:hover{
    background-color:var(--background-gray-1);
}
.class-list-window-row:active{
    transform:scale(0.95);
}
.class-list-window-icon{
    background-image:url("../assets/icons/users.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:50%;
    user-select:none;
    aspect-ratio:1;
    flex-shrink:0;
    height:100%;
}
.class-list-window-icon-user{
    background-image:url("../assets/icons/user.png");
}
.class-list-window-text{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    color:var(--dark-blue);
    height:100%;
    width:100%;
}
.class-list-window-num{
    justify-content:center;
    align-items:center;
    user-select:none;
    display:flex;

    color:var(--gray-1);
    aspect-ratio:1;
    flex-shrink:0;
    height:100%;
}

.class-list-window-button-holder{
    justify-content:center;
    align-items:center;
    display:flex;
    
    padding-top:1rem;
    height:3rem;
    width:100%;
}
#create-class{
    height:2rem;
    width:10rem;
}
.class-list-window-input-holder{
    background-color:var(--background-white);
    margin-top:1rem;
    display:none;
}
#new-class-input{
    width:100%;
}
.new-class-input-button-holder{
    justify-content:space-between;
    align-items:center;
    display:flex;

    margin-top:1rem;
    width:100%;
}
.new-class-input-button-holder > *{
    width:7rem;
}

/*--Class Main Head----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.students-main{
    height:fit-content;
    width:calc(100% - 40rem);
    margin-left:1rem;
    margin-top:1rem;
    min-width:50rem;

    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
}
.students-main-head{
    justify-content:flex-start;
    align-items:center;
    position:relative;
    display:flex;
    
    height:4rem;
    width:100%;
}
.class-title{
    color:var(--dark-blue);
    font-size:2rem;
    height:100%;
    width:calc(100% - 9rem);
    margin-left:1.5rem;

    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;
}
.class-buttons{
    justify-content:flex-end;
    align-items:center;
    display:flex;

    flex-shrink:0;
    height:100%;
    width:6rem;
}
.students-top-buttons-elements{
    position:absolute;
    right:1rem;
    top:1rem;
}
.class-head-buttons{
    max-width:calc(100vw - 19rem);
    height:fit-content;
    width:12rem;
}
.class-head-button{
    position:relative;
    margin-bottom:0.5rem;
    margin-top:0rem;
    font-size:1rem;
    height:2.5rem;
    width:100%;
    z-index:1;
}
#add-students{
    z-index:3;
}

.add-student-drop-down{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    border-bottom-right-radius:var(--border-radius-2);
    border-bottom-left-radius:var(--border-radius-2);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    position:absolute;
    overflow:hidden;
   
    transform:translate(50%, -1rem);
    width:calc(12rem - 1px);
    right:calc(6rem - 0px);
    padding-bottom:0.5rem;
    padding-top:1.5rem;
    top:2.5rem;
    transform:translate(50%, -50%) scaleY(0);
    z-index:2;
}
.add-student-row{
    border-radius:var(--border-radius-1); 
    color:var(--dark-blue);
    padding-bottom:0.25rem;
    padding-top:0.25rem;
    font-size:1rem;
    height:2rem;
    width:100%;

    transition:ease-in-out 0.05s;
    justify-content:flex-start;
    align-items:center;
    cursor:pointer;
    display:flex;
}
.invite-list-row{
    align-items:flex-start;
    height:3.5rem;
}
.add-student-row:hover{
    background-color:var(--background-gray-1);
}
.add-student-row:active{
    transform:scale(0.95);
}
.add-student-icon{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:60%;

    margin-left:0.25rem;
    aspect-ratio:1;
    flex-shrink:0;
    height:2rem;
}
.add-student-text{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    margin-left:0.25rem;
    font-size:1rem;
    height:100%;
    width:100%;
}
.add-student-email-icon{
    background-image:url("../assets/icons/email.png");
}
.add-student-link-icon{
    background-image:url("../assets/icons/link.png");
}
.add-student-qr-icon{
    background-image:url("../assets/icons/qr.png");
}
.add-student-list-icon{
    background-image:url("../assets/icons/list.png");
}
#invite-list{
    align-items:flex-start;
}

@keyframes add-student-up{
    from {transform:translate(50%, -1rem)}
    to   {transform:translate(50%, -50%) scaleY(0)}
}
@keyframes add-student-down{
    from {transform:translate(50%, -50%) scaleY(0)}
    to   {transform:translate(50%, -1rem)}
}

/*--Main Elements------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.class-window{
    transform:translate(-50%);
    height:calc(22rem + 2px);
    width:calc(100% - 2rem);
    color:var(--dark-blue);
    margin-left:50%;
}
.class-window-tab-holder{
    background-color:var(--background-gray-2);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    max-width:calc(100% - 0.5rem);
    transform:translate(-50%);
    margin-top:0.25rem;
    margin-left:50%;
    height:2.5rem;
    width:100%;

    justify-content:space-evenly;
    align-items:center;
    display:flex;
}
.class-window-tab{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    max-width:calc(33% - 0.5rem);
    height:2rem;
    width:32%;
   
    transition:ease-in-out 0.1s;
    justify-content:center;
    align-items:center;
    font-weight:bold;
    user-select:none;
    cursor:pointer;
    display:flex;
}
.class-window-tab:hover{
    background-color:var(--background-gray-1);
}
.class-window-tab:active{
    background-color:var(--background-gray-4);
}
.class-window-selected-tab{
    background-color:var(--background-gray-2);
    border-color:var(--background-gray-2);
    cursor:default;
}
.class-window-selected-tab:hover{
    background-color:var(--background-gray-2);
}
.class-window-selected-tab:active{
    background-color:var(--background-gray-2);
}
#student-search-icon-holder, #assignment-search-icon-holder, #homework-search-icon-holder{
    margin-bottom:1rem;
    margin-top:0.5rem;
    width:100%;
}
.class-window-body{
    position:relative;
    height:calc(17.5rem + 2px);
    margin-top:0.5rem;
    margin-left:0.25rem;
    width:calc(100% - 0.5rem);
}
.class-window-body-content{
    position:absolute;
    display:none;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
.class-window-body-content:first-child{
    display:block;
}
.class-window-list-holder{
    height:calc(100% - 2.5rem);
    margin-top:1rem;
    width:100%;
}
.class-window-list{
    color:var(--gray-1);
    height:fit-content;
    text-align:center;
    padding-bottom:1rem;
    width:100%;
    max-height:14rem;
    overflow-x:hidden;
    overflow-y:auto;
}
.class-window-list-item{
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    max-width:calc(100% - 4px);
    transform:translate(-50%);
    margin-top:0.5rem;
    margin-left:50%;
    height:3rem;
    width:100%;

    transition:ease-in-out 0.1s;
    cursor:pointer;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.class-window-list-item:hover{
    background-color:var(--background-gray-1);
}
.class-window-list-item-icon{
    background-image:url("../assets/icons/default user.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;

    border:1px solid var(--border-gray-1);
    border-radius:100%;
    margin-left:0.5rem;
    aspect-ratio:1;
    flex-shrink:0;
    height:2.5rem;
}
.class-window-list-item-name{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    color:var(--dark-blue);
    margin-left:0.5rem;
    height:100%;
    width:100%;
}
.class-window-list-item-button{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    user-select:none;

    transition:ease-in-out 0.05s;
    margin-right:0.5rem;
    aspect-ratio:1;
    flex-shrink:0;
    height:1.5rem;
    cursor:pointer;
}
.class-window-list-item-button:hover{
    transform:scale(1.1);
}
.class-window-list-item-button:active{
    transform:scale(1);
}
.class-window-list-item-edit{
    background-image:url("../assets/icons/edit grey.png");
}
.class-window-list-item-delete{
    background-image:url("../assets/icons/delete mail.png");
}
.class-window-list-item-remove{
    background-image:url("../assets/icons/x gray.png");
}

/*--Edit Class Name----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.edit-class-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transform:translate(-50%, -50%);
    color:var(--dark-blue);
    position:absolute;
    padding:1rem;
    left:50%;
    width:min(20rem, calc(100vw - 4rem));
    top:min(15rem, 50%);
}
.edit-class-window-head{
    justify-content:flex-start;
    align-items:flex-start;
    font-weight:bold;
    display:flex;

    font-size:1.5rem;
    height:3rem;
    width:100%;
}
.edit-class-window-body{
    margin-bottom:2rem;
}
.edit-class-window-body > *{
    width:95%;
}
.edit-class-window-foot{
    justify-content:space-evenly;
    align-items:center;
    display:flex;

    height:4rem;
    width:100%;
}

/*--Invite Elements----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.invite-window-close{
    background-image:url("../assets/icons/x dark.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;
    user-select:none;
    cursor:pointer;

    transition:ease-in-out 0.1s;
    transform:translate(-50%, -50%);
    aspect-ratio:1;
    height:1rem;
    right:0px;
    top:1rem;
}
.invite-window-close:hover{
    transform:translate(-50%, -50%) scale(1.1);
}
.invite-window-close:active{
    transform:translate(-50%, -50%) scale(0.9);
}

.invite-email-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transform:translate(-50%, -50%);
    color:var(--dark-blue);
    position:absolute;
    padding:1rem;
    left:50%;
    width:min(30rem, calc(100vw - 4rem));
    top:min(15rem, 50%);
}
.invite-email-window-head{
    justify-content:flex-start;
    align-items:flex-start;
    font-weight:bold;
    display:flex;

    font-size:1.5rem;
    height:3rem;
    width:100%;
}
.invite-email-window-title{
    justify-content:flex-start;
    align-items:flex-end;
    font-weight:bold;
    display:flex;

    font-size:1.25rem;
    height:3rem;
    width:100%;
}
.invite-email-window-body{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:3rem;
    width:100%;
}
#invite-email-input{
    width:100%;
}
#invite-email-button{
    margin-left:0.5rem;
    margin-top:0px;
    flex-shrink:0;
    height:2rem;
    width:6rem;
}
.invite-email-window-foot{
    height:fit-content;
    overflow-x:hidden;
    overflow-y:auto;

    max-height:20rem;
    width:100%;
}
.invite-list{
    color:var(--gray-1);
    height:fit-content;
    margin-top:0.5rem;
    width:100%;
}
.invited{
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    width:calc(100% - 2px - 1rem);
    color:var(--dark-blue);
    margin-bottom:0.5rem;
    padding:0.5rem;
    height:1rem;
    
    justify-content:flex-start;
    align-items:center;
    display:flex;
}

.invite-qr-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transform:translate(-50%, -50%);
    padding-bottom:2rem;
    padding-right:2rem;
    padding-left:2rem;
    left:50%;
    top:50%;
    position:absolute;
}
.invite-qr-window-head{
    color:var(--dark-blue);
    margin-bottom:1rem;
    font-size:1.5rem;
    height:3rem;

    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;
}
.invite-qr{
    height:min(65vh, 65vw);
    aspect-ratio:1;
}
.invite-qr > *{
    height:100%;
    width:100%;
}

.invite-list-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transform:translate(-50%);
    color:var(--dark-blue);
    position:absolute;
    padding:1rem;
    left:50%;
    top:min(5rem, 50%);
    width:min(30rem, calc(100vw - 4rem));
}
.invite-list-window-head{
    justify-content:flex-start;
    align-items:flex-start;
    font-weight:bold;
    display:flex;

    font-size:1.5rem;
    margin-bottom:1rem;
    height:3rem;
}
.invite-list-window-body{
    height:fit-content;
    width:100%;
}
#invite-list-search-icon-holder{
    width:100%;
}
.student-list-holder{
    height:fit-content;
    overflow-x:hidden;
    overflow-y:auto;
    max-height:30rem;
    margin-top:1rem;
    width:100%;
}
.student-list{
    height:fit-content;
    width:100%;
}
.no-inite-list{
    color:var(--gray-1);
    width:100%;

    justify-content:center;
    align-items:center;
    display:flex;
}
.student{
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    margin-bottom:0.5rem;
    height:2.5rem;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.student-check{
    border:0.15rem solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    margin-right:0.5rem;
    margin-left:0.5rem;
    user-select:none;
    cursor:pointer;
    aspect-ratio:1;
    height:1rem;
}
.student-check-mark{
    border-bottom:0.3rem solid var(--accent-blue-1);
    border-right:0.3rem solid var(--accent-blue-1);
    transform:translate(25%, -25%) rotate(45deg);
    aspect-ratio:0.5;
    display:none;
    height:100%;
}
.student-icon{
    background-image:url("../assets/icons/default user.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    border:1px solid var(--border-gray-1);
    border-radius:100%;
    margin-right:0.5rem;
    aspect-ratio:1;
    flex-shrink:0;
    height:80%;
}
.student-name{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    color:var(--dark-blue);
    height:100%;
    width:100%;
}
.invite-list-window-foot{
    justify-content:center;
    align-items:center;
    display:flex;

    margin-top:2rem;
    height:3rem;
    width:100%;
}
#move-to-class{
    height:3rem;
    width:12rem;
}

/*--Lesson Elements---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.lesson-holder{
    width:calc(100% - 2rem - 2px);
    padding-top:3rem;
    margin-left:1rem;
    height:26rem;
}

.lesson-tab-holder{
    border-top-right-radius:var(--border-radius-1);
    border-top-left-radius:var(--border-radius-1);
    border-left:1px solid var(--border-gray-1);
    border-top:1px solid var(--border-gray-1);
  
    justify-content:flex-start;
    align-items:flex-start;
    overflow:hidden;
    display:flex;

    transform:translateY(1px);
    height:1.5rem;
    width:22.5rem;
    z-index:2;
}
.lesson-tab{
    border-bottom:1px solid var(--border-gray-1);
    border-right:1px solid var(--border-gray-1);
    background-color:var(--background-gray-2);
    color:var(--dark-blue);
    height:100%;
    width:7.5rem;

    justify-content:flex-start;
    align-items:center;
    user-select:none;
    cursor:pointer;
    display:flex;
}
.lesson-tab:hover{
    background-color:var(--background-gray-3);
}
.lesson-tab:active{
    background-color:var(--background-gray-4);
}
.lesson-selected-tab{
    border-bottom:1px solid var(--background-white);
    background-color:var(--background-white);   
    cursor:default;
}
.lesson-selected-tab:hover{
    background-color:var(--background-white);   
}
.lesson-selected-tab:active{
    background-color:var(--background-white);   
}
.lesson-tab-icon{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    margin-right:0.25rem;
    margin-left:0.5rem;
    aspect-ratio:1;
    height:1rem;
}
#upcoming-tab{
    background-image:url("../assets/icons/upcoming.png");
}
#completed-tab{
    background-image:url("../assets/icons/completed.png");
}
#canceled-tab{
    background-image:url("../assets/icons/cancel.png");
}

.lesson-head{
    border-top-right-radius:var(--border-radius-1);
    border-right:1px solid var(--border-gray-1);
    border-left:1px solid var(--border-gray-1);
    border-top:1px solid var(--border-gray-1);
    background-color:var(--background-white);
    width:100%;
    height:2rem;
    z-index:1;
}
.lesson-head-label-holder{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    border-bottom:1px solid var(--border-gray-1);
    height:100%;
    width:100%;
}
.lesson-head-label-holder > *{
    color:var(--dark-blue);
    height:100%;

    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;

    font-size:0.85rem;
}
.lesson-name{
    border-right:1px solid rgba(0,0,0,0);
    width:calc(25% - 1px);

    justify-content:center;
    align-items:center;
    display:flex;
}
.lesson-content{
    border-right:1px solid rgba(0,0,0,0);
    width:calc(25% - 1px);

    justify-content:center;
    align-items:center;
    white-space:nowrap;
    display:flex;
}
.lesson-students{
    border-right:1px solid rgba(0,0,0,0);
    width:calc(25% - 1px);
}
.lesson-action{
    border-right:1px solid rgba(0,0,0,0);
    width:calc(35% - 1rem);
    flex-shrink:0;

    justify-content:space-evenly;
    align-items:center;
    white-space:nowrap;
    display:flex;
}

.lesson-body{
    border-bottom-right-radius:var(--border-radius-1);
    border-bottom-left-radius:var(--border-radius-1);
    border-bottom:1px solid var(--border-gray-1);
    border-right:1px solid var(--border-gray-1);
    border-left:1px solid var(--border-gray-1);
    height:fit-content;
    overflow-x:hidden;
    overflow-y:auto;
    min-height:3rem;
    width:100%;
}
.lesson-list-holder{
    height:fit-content;
    width:100%;
}
.no-lesson{
    width:calc(100% - 1rem);
    color:var(--gray-1);
    margin-left:1rem;
    height:3rem;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.lesson{
    border-bottom:1px solid var(--border-gray-1);
    color:var(--dark-blue);
    flex-shrink:0;
    height:5rem;
    width:100%;

    justify-content:center;
    align-items:center;
    display:flex;
}
.lesson:last-child{
    border-bottom:none;
}
.lesson-list-element{
    border-right:1px solid var(--border-gray-1);
    height:calc(100% - 1rem);
    padding:0.5rem;
}
.lesson-list-element:last-child{
    border-right:none;
}
.action-button{
    font-size:1rem;
    max-width:100%;
    height:2rem;
    width:10rem;
}
.record-button{
    background-color:rgb(255, 0, 0);
    border:2px solid rgb(0, 0, 0);
    color:var(--background-white);
    transform:translateY(0px);
    border-radius:100%;
    position:absolute;
   
    font-size:0.75rem;
    height:2rem;
    width:2rem;
    z-index:10;
    left:20px;
    top:55px;

    transition:ease-in-out 0.05s;
    justify-content:center;
    align-items:center;
    user-select:none;
    font-weight:bold;
    cursor:pointer;
    display:none;
}
.record-button:hover{
    transform:translateY(-1px);
}
.record-button:active{
    transform:translateY(1px);
}

/*--New Lesson--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.new-lesson-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transform:translate(-50%, -50%);
    color:var(--dark-blue);
    position:absolute;
    padding:1rem;
    width:20rem;
    left:50%;
    top:50%;
}
.new-lesson-window-head{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;
    
    padding-bottom:1rem;
    font-size:1.5rem;
    height:2rem;
    width:100%;
}
.new-lesson-window-body{
    height:fit-content;
    width:100%;
}
.new-lesson-row{
    margin-bottom:0.5rem;
    width:100%;
}
.new-lesson-input{
    width:100%;
}
.new-lesson-window-foot{
    justify-content:space-evenly;
    align-items:center;
    display:flex;

    margin-top:3rem;
    width:100%;
}

/*--Display Assignment-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.display-assignment-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border-radius:var(--border-radius-1);
    max-height:calc(100vh - 4rem);
    max-width:calc(100vw - 5rem);
    transform:translate(-50%);
    padding:1rem;
    width:40rem;
    left:50%;
    top:1rem;
    position:absolute;
}
.display-assignment-head{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    margin-bottom:1rem;
    width:100%;
}
.display-assignment-body{
    max-height:calc(100vh - 6rem);
    height:fit-content;
    overflow-x:hidden;
    overflow-y:auto;
    width:100%;
}
.display-assignmeny-buttons{
    justify-content:flex-start;
    align-items:center;
    display:flex;
    height:2rem;
    width:100%;
}
.assignment-button{
    margin-right:0.5rem;
    font-size:1rem;
    height:1.5rem;
    width:5rem;
}
.display-assignment-title{
    color:var(--dark-blue);
    margin-bottom:3rem;
    font-weight:bold;
    font-size:2rem;
    height:100%;
    width:100%;

    justify-content:flex-start;
    align-items:center;
    overflow:hidden;
    display:flex;
}
.display-assignemnt-question{
    color:var(--dark-blue);
    font-weight:bold;
    margin-bottom:0.5rem;
    margin-top:1rem;
}
.display-assignemnt-answer{
    color:var(--dark-blue);
    margin-bottom:0.5rem;
    margin-left:1rem;
}
.display-assignment-requirement{
    color:var(--dark-blue);
    margin-bottom:5rem;   
}
.display-assignemnt-empty{
    height:1.5rem;
    width:100%;
}

/*--Generate Assignment------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.generate-holder{
    justify-content:flex-start;
    align-items:flex-start;
    display:flex;

    min-height:calc(100vh - 5rem);
    height:100%;
    width:100%;
}
.preview-holder{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    height:calc(100vh - 7rem);
    width:calc(50% - 2rem);
    position:relative;
    margin:1rem;

    overflow-x:hidden;
    overflow-y:auto;
}
.preview-page{
    min-height:calc(100vh - 9rem);
    width:calc(100% - 2rem);
    height:fit-content;
    padding:1rem;
}
.preview-load-mask{
    background-color:rgba(0, 0, 0, 0.3);
    position:absolute;
    display:none;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
.preview-loader{
    border:1rem solid var(--background-white);
    border-bottom:1rem solid rgba(0, 0, 0, 0);
    transform:translate(-50%, -50%);
    border-radius:100%;
    position:absolute;
    aspect-ratio:1;
    height:5rem;
    left:50%;
    top:50%;
    animation:lsl-spin linear 1s infinite;
}

.generate-settings-holder{
    height:calc(100vh - 7rem);
    color:var(--dark-blue);
    width:calc(50% - 1rem);
    margin-top:1rem;

    overflow-x:hidden;
    overflow-y:auto;
}
.generate-settings{
    width:calc(100% - 1rem);
    margin-left:0.5rem;
    height:fit-content;
}
.generate-settings-title{
    justify-content:space-between;
    align-items:flex-start;
    display:flex;

    position:relative;
    font-weight:bold;
    font-size:2rem;
}
#generate-back{
    margin-top:0.1rem;
    height:2rem;
    width:7rem;
}
.generate-settings-sub-title{
    margin-bottom:0.5rem;
    margin-top:1.5rem;
    font-size:1.25rem;
    font-weight:bold;
}
.generate-select-type-holder > *{
    margin-bottom:0.25rem;
}
.generate-select-type{
    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.generate-select-type-text{
    margin-left:0.5rem;
}
input[type=text].generate-input{
    background-color:var(--background-white);
    max-width:calc(100% - 1rem);
    width:39.5rem;
}
.generate-input{
    background-color:var(--background-white);
    max-width:calc(100% - 0.6rem);
    width:40rem;
}
.generate-assignment-url-holder{
    max-width:calc(100% - 0.6rem);
    width:40rem;
}
.generate-assignment-url-holder > *{
    margin-bottom:0.5rem;
}
#generate-cefr, #generate, #generate-save{
    max-width:100%;
    width:15rem;
}
#generate-add-url{
    margin-top:0.5rem;
    font-size:1rem;
    width:5.5rem;
    height:2rem;
}

/*--Display Drive Window-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.display-drive-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    transform:translate(-50%, -50%);
    height:calc(100vh - 3rem);
    width:calc(100% - 3rem);
    padding:1rem;
    left:50%;
    top:50%;
    position:absolute;
    color:var(--dark-blue);

    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    display:flex;
}
.display-drive-window-head{
    justify-content:center;
    align-items:flex-start;
    font-weight:bold;
    display:flex;

    font-size:2rem;
    flex-shrink:0;
    height:4rem;
    width:100%;
}
.display-drive-window-body{
    background-color:var(--background-gray-1);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    overflow-x:hidden;
    overflow-y:auto;
    height:100%;
    width:100%;
}
.display-drive-window-foot{
    justify-content:center;
    align-items:center;
    display:flex;

    flex-shrink:0;
    height:4rem;
    width:100%;
}
#generate-assignment-drive-confirm{
    width:10rem;
}

/*--Input Student Name Window------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.input-student-name-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    transform:translate(-50%);
    position:absolute;
    padding:1rem;
    left:50%;
    top:5rem;
    width:30rem;
    max-width:calc(100% - 4rem);
}
.input-student-name-window-head{
    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;

    color:var(--dark-blue);
    margin-bottom:2rem;
    font-size:2rem;
    height:2rem;
    width:100%;
}
.input-student-name-window-body{
    height:fit-content;
    width:100%;
}
#input-student-name-input{
    width:calc(100% - 2px);
}
#input-student-name-button{
    margin-left:calc(50% - 5rem);
    margin-top:2rem;
    width:10rem;
}

/*--Edit Student Window------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.edit-student-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    transform:translate(-50%);
    position:absolute;
    padding:1rem;
    left:50%;
    top:5rem;
    width:30rem;
    max-width:calc(100% - 4rem);
}
.edit-student-window-head{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;

    color:var(--dark-blue);
    margin-bottom:2rem;
    font-size:2rem;
    height:2rem;
    width:100%;
}
.edit-student-window-body{
    height:fit-content;
    margin-top:2rem;
    width:100%;
}
.edit-student-window-text{
    color:var(--dark-blue);
    font-size:1.25rem;
    font-weight:bold;
}
#edit-student-name-input, #edit-student-email-input{
    width:calc(100% - 0.25rem);
    margin-bottom:1rem;
}
.edit-student-window-foot{
    justify-content:space-evenly;
    align-items:center;
    display:flex;

    margin-top:2rem;
    height:4rem;
    width:100%;
}

/*--Mobile Dispaly-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:1340px){
    .students-main-holder{
        flex-direction:column;
    }
    .students-main{
        min-width:calc(100% - 2rem);
        margin-top:2rem;
    }
    .lesson-action{
        height:100%;
        flex-direction:column;
    }
    .action-button{
        height:1.5rem;
    }
}
@media only screen and (max-width:700px) and (orientation:portrait){
    .class-list-window{
        width:13rem;
    }
    .class-window-tab{
        font-size:0.8rem;
    }
    .add-student-drop-down{
        border-top-left-radius:var(--border-radius-2);
    }
}
@media only screen and (max-width:768px) and (orientation:portrait){
    .generate-holder{
        flex-direction:column-reverse;
    }
    .preview-holder{
        width:calc(100% - 2rem);
    }
    .generate-settings-holder{
        height:fit-content;
        margin-bottom:3rem;
        width:100%;
    }
    .generate-input{
        width:100%;
    }
    #generate-cefr, #generate, #generate-save{
        margin-left:calc(50% - 7.5rem);
    }
    .lesson-action{
        height:100%;
        flex-direction:column;
    }
    .action-button{
        height:1.5rem;
    }
}