/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#dahsboard-screen{
    justify-content:flex-start;
    align-items:flex-start;
    display:flex;
}

/*--Dashboard Left Side------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.dahsboard-left-side{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    position:relative;
    flex-shrink:0;
    width:40rem;
    margin:1rem;
    min-height:25rem;
    padding-bottom:1rem;
}
.dahsbord-peronal-greeting{
    width:calc(100% - 6rem);
    color:var(--dark-blue);
    font-weight:bold;
    font-size:2.5rem;
    margin-left:3rem;
    margin-top:2rem;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.dahsbord-question{
    width:calc(100% - 6rem);
    color:var(--dark-blue);
    margin-bottom:4rem;
    margin-left:3rem;
    font-size:1.5rem;

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

.connect-buttons-holder{
    justify-content:space-evenly;
    align-items:center;
    flex-wrap:wrap;
    display:flex;

    width:calc(100% - 2rem);
    height:fit-content;
    margin-left:1rem;
    margin-top:1rem;
}
.connect-button{
    background-color:var(--accent-blue-3);
    border-radius:var(--border-radius-2);
    color:var(--background-white);
    justify-content:flex-start;
    margin-bottom:1rem;
    padding-right:1rem;
    font-weight:bold;
    height:3rem;
    border:none;

    width:calc((100% - 6rem) / 2);
    min-width:16rem;
}
.quick-buttons-holder{
    justify-content:space-evenly;
    align-items:center;
    flex-wrap:wrap;
    display:flex;

    width:calc(100% - 2rem);
    height:fit-content;
    margin-left:1rem;
    margin-top:2rem;
}
.quick-button{
    border-radius:var(--border-radius-2);
    color:var(--background-white);
    justify-content:flex-start;
    margin-bottom:1rem;
    margin-right:0.5rem;
    margin-left:0.5rem;
    padding-right:1rem;
    font-weight:bold;
    flex-shrink:0;
    height:5rem;
    border:none;
    text-align:left;

    width:calc((100% - 6rem) / 2);
    min-width:16rem;
}

#quick-button-new-lesson{
    background-color:var(--accent-blue-3);
}
#quick-button-add-students{
    background-color:var(--accent-blue-4);
}
#quick-button-generate-assignment{
    background-color:var(--accent-blue-5);
}
#quick-button-generate-homework{
    background-color:var(--accent-blue-5);
}
#quick-button-upload-drive{
    background-color:var(--accent-blue-6);
}

.quick-button-icon{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    margin-right:1rem;
    margin-left:1rem;
    aspect-ratio:1;
    height:3rem;
}
.quick-button-icon-google{
    background-image:url("../assets/icons/google icon white.png");
    margin-right:1.5rem;
    margin-left:1.5rem;
    height:2rem;
}
.quick-button-icon-zoom{
    background-image:url("../assets/icons/zoom icon white.png");
}
.quick-button-icon-new-lesson{
    background-image:url("../assets/icons/add.png");
}
.quick-button-icon-add-students{
    background-image:url("../assets/icons/users white.png");
}
.quick-button-icon-generate-assignment{
    background-image:url("../assets/icons/stars.png");
}
.quick-button-icon-upload-drive{
    background-image:url("../assets/icons/upload.png");
}

/*--Dashboard Right Side-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.dashboard-right-side{
    margin-right:1rem;
    margin-top:1rem;
    height:90%;
    width:100%;
}
.dashboard-window{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    margin-bottom:1rem;
    padding:1rem;
}
.dashboard-title{
    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;

    color:var(--dark-blue);
    font-size:1.75rem;
    width:100%;
}
.dashboard-holder{
    color:var(--gray-1);
    margin-bottom:2rem;
    font-size:1.25rem;
    margin-top:1rem;
    min-height:5rem;
    width:100%;

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

.dashboatd-event{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    margin-bottom:1rem;
    margin-right:1rem;
    user-select:none;
    cursor:pointer;
    height:6rem;
    width:20rem;
    transition:ease-in-out 0.1s;
}
.dashboatd-event:hover{
    transform:scale(1.025);
}
.dashboatd-event:active{
    transform:scale(1);
}
.dashboatd-event-name{
    color:var(--dark-blue);
    width:calc(100% - 2rem);
    padding-right:1rem;
    padding-left:1rem;
    height:50%;

    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;
}
.dashboatd-event-date{
    width:calc(100% - 2rem);
    padding-right:1rem;
    padding-left:1rem;
    font-size:1rem;
    height:50%;

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

/*--Mobile Dispaly-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:768px){
    .dahsboard-left-side{
        width:calc(100% - 2rem);
    }
}
@media only screen and (max-width:1000px){
    #dahsboard-screen{
        flex-direction:column;
    }
    .dahsboard-left-side{
        transform:translate(-50%);
        margin-left:50%;
    }
    .dashboard-right-side{
        width:calc(100% - 2rem);
        margin-left:1rem;
        margin-top:0rem;
    }
}