/*--Drive Head---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.drive-head{
    justify-content:flex-start;
    align-items:center;
    position:relative;
    display:flex;
   
    width:calc(100% - 2rem);
    padding-left:1rem;
    height:3rem;
}

#drive-file-upload{
    display:none;
}
#drive-upload{
    background-color:var(--accent-blue-1);
    color:var(--background-white);
    height:calc(2rem + 2px);
    margin-right:1rem;
    margin-top:2rem;

    font-weight:bold;
    border:none;
}
#drive-search-holder{
    margin-top:2rem;
    width:50rem;
}
.filter{
    transition:ease-in-out 0.05s;
    color:var(--dark-blue);
    user-select:none;
    margin-left:1rem;
    cursor:pointer;
    margin-top:2rem;
    flex-shrink:0;
    width:10rem;
}
.filter:hover{
    text-decoration:underline;
}
.filter:active{
    transform:scale(0.975);
}
.filter-window-holder{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    transform:translate(-50%);
    position:absolute;
    aspect-ratio:1.5;
    display:none;
    width:12rem;
    top:4rem;
    z-index:2;
    left:min(64rem, calc(100% - 6rem));
}
.filter-window-arrow{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    transform:translate(-50%, -5%) rotate(45deg);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    position:absolute;
    aspect-ratio:1;
    width:3rem;
    left:50%;
    top:0px;
}
.filter-window{
    background-color:var(--background-white);
    border-radius:var(--border-radius-1);
    transform:translate(-50%);
    height:calc(100% - 1rem);
    width:calc(100% - 1rem);
    position:absolute;
    user-select:none;
    padding:0.5rem;
    left:50%;
    top:0px;
}
.filter-window-body{
    height:calc(100% - 2rem);
    width:100%;
}
.filter-window-text{
    color:var(--dark-blue);
    margin-bottom:0.5rem;
    width:100%;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.filter-select{
    background-color:var(--background-gray-1);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    color:var(--dark-blue);
    font-family:"Inter";
    cursor:pointer;
    font-size:1rem;
    width:100%;
}
.filter-window-foot{
    justify-content:space-evenly;
    align-items:center;
    display:flex;
    height:2rem;
    width:100%;
}
.filter-button{
    user-select:none;
    font-size:1rem;
    height:2rem;
    width:5rem;
}

@keyframes filter-window-fade-in{
    from {transform:translate(-50%, -50%) scale(0); opacity:0;}
    to   {transform:translate(-50%, 0px)  scale(1); opacity:1;}
}
@keyframes filter-window-fade-out{
    from {transform:translate(-50%, 0px)  scale(1); opacity:1;}
    to   {transform:translate(-50%, -50%) scale(0); opacity:0;}
}

/*--Drive Body---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.drive-body{
    width:100%;
}
.no-files{
    color:var(--gray-1);
    margin-left:2rem;
    margin-top:3rem;
    font-size:2rem;
}

.drive-divider{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    color:var(--gray-1);
    margin-top:2rem;
    width:100%;
}
.drive-divider-line-small{
    background-color:var(--background-gray-3);
    margin-right:0.5rem;
    margin-left:0.5rem;
    flex-shrink:0;
    height:1px;
    width:5rem;
}
.drive-divider-date{
    width:max-content;
    flex-shrink:0;
}
.drive-divider-line-big{
    background-color:var(--background-gray-3);
    margin-right:0.5rem;
    margin-left:0.5rem;
    height:1px;
    width:100%;
}

.drive-holder{
    justify-content:flex-start;
    align-items:flex-start;
    flex-wrap:wrap;
    display:flex;

    width:calc(100% - 1rem);
    padding:0.5rem;
}
.drive-item{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    transition:ease-in-out 0.05s;
    margin-bottom:0.5rem;
    margin-right:0.5rem;
    cursor:pointer;
    flex-shrink:0;
    padding:0.5rem;
    width:10rem;
    height:12rem;
}
.drive-item:hover{
    transform:scale(1.025);
}
.drive-item:active{
    transform:scale(1);
}
.drive-item-image{
    background-color:var(--background-gray-1);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    height:6rem;
    width:100%;

    background-image:url("../assets/icons/no image.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:30%;
}
.drive-item-title{
    height:calc(100% - 8.5rem);
    color:var(--dark-blue);
    margin-bottom:0.5rem;
    margin-top:0.5rem;
    
    
    white-space:pre-line;
    overflow-wrap:break-word;
    word-break:normal;
    font-weight:bold;
    overflow-y:hidden;
}
.drive-item-info{
    color:var(--gray-1);
    height:2.5rem;
}
.generate-drive-selected{
    box-shadow:0px 0px 1rem var(--accent-blue-1);
    border:1px solid var(--accent-blue-1);
}

.download-notification{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    border:1px solid var(--gray-1);
    background-color:var(--background-white);
    border-radius:var(--border-radius-2);
    transition:ease-in-out 0.05s;
    transform:translate(-50%);
    color:var(--dark-blue);
    position:fixed;
    font-size:1rem;
    padding:1rem;
    width:6.5rem;
    height:1rem;
    z-index:10;
    left:50%;
    top:6rem;

    justify-content:flex-start;
    align-items:center;
    display:none;
}
.file-loader{
    animation:file-loader-spin linear infinite 1s;
    transform:translate(-50%, -50%);
    border-radius:100%;
    position:absolute;
    display:none;
    aspect-ratio:1;
    width:3rem;
    left:50%;
    top:12rem;

    border:0.5rem solid var(--background-white);
    border-bottom:0.5rem solid rgba(0,0,0,0);
}
@keyframes file-loader-spin{
    from {transform:translate(-50%, -50%) rotate(0deg)}
    to   {transform:translate(-50%, -50%) rotate(360deg)}
}

/*--File Display-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.file-display{
    background-image:linear-gradient(to bottom, rgb(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    background-color:rgba(0, 0, 0, 0.5);
    position:fixed;
    display:none;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
    z-index:5;
}
.file-display-head{
    position:relative;
    height:4rem;
    width:100%;
}
.file-display-title{
    color:var(--background-white);
    position:absolute;
    width:calc(100% - 14rem);
    font-size:1.5rem;
    height:4rem;
    left:7rem;
    top:0px;

    justify-content:center;
    word-wrap:break-word;
    align-items:center;
    font-weight:bold;
    display:flex;
}
.file-display-close{
    background-image:url("../assets/icons/x.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:50%;

    position:absolute;
    user-select:none;
    aspect-ratio:1;
    cursor:pointer;
    width:2rem;
    right:1rem;
    top:1rem;
}
.file-display-close:hover{
    transform:scale(1.1);
}
.file-display-close:active{
    transform:scale(1);
}
.file-display-round-button{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:50%;
    position:absolute;

    background-color:rgba(0, 0, 0);
    border:1px solid rgb(0, 0, 0);
    height:2.5rem;
    width:2.5rem;
    top:0.5rem;
    z-index:2;
}
#file-display-download{
    background-image:url("../assets/icons/download.png");
    left:0.5rem;
}
#file-display-delete{
    background-image:url("../assets/icons/delete.png");
    left:3.5rem;
}
#file-display-cefr{
    color:var(--background-white);
    aspect-ratio:auto;
    height:2.5rem;
    width:5.5rem;
    left:0.5rem;
    top:3.5rem;
}
.file-display-body{
    height:calc(100% - 4rem);
    overflow-x:hidden;
    overflow-y:auto;
    width:100%;
}
.file-display-error{
    transform:translate(-50%);
    color:var(--background-white);
    text-align:center;
    margin-left:50%;
    margin-top:2rem;
}
.file-display-text{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    transform:translate(-50%);
    margin-bottom:2rem;
    margin-left:50%;
    padding:2rem;
    width:50rem;
    max-width:calc(100% - 6rem);
    word-break:break-all;
    white-space:wrap;
}
.content-image{
    transform:translate(-50%);
    margin-left:50%;
    max-height:90%;
    width:auto;
    max-width:100%;
}
.content-video{
    transform:translate(-50%);
    margin-left:50%;
    max-height:90%;
    width:auto;
    max-width:100%;
}
.content-pdf{
    transform:translate(-50%);
    margin-left:50%;
    margin-top:0px;
    height:95%;
    width:50rem;
    max-width:100%;
}

/*--CEFR Checker-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.cefr-window{
    border:1px solid var(--border-gray-1);
    background-color:var(--background-white);
    border-radius:var(--border-radius-3);
    transform:translate(-50%, -50%);
    color:var(--dark-blue);
    position:absolute;
    width:30rem;
    left:50%;
    top:50%;
    max-width:calc(100% - 1rem - 2px);
}
.cefr-winow-head{
    font-size:2rem;
    height:5rem;

    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;
}
.cefr-window-body{
    height:fit-content;
    width:100%;
}
.cefr-winow-foot{
    margin-top:1rem;
    height:5rem;
    width:100%;

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

.cefr-overview{
    background-color:var(--accent-blue-1);
    justify-content:flex-start;
    align-items:center;
    display:flex;

    border-radius:var(--border-radius-2);
    color:var(--background-white);
    width:calc(100% - 2rem);
    margin-left:1rem;
    height:5rem;
}
.cefr-level{
    height:100%;
    width:30%;

    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    display:flex;
}
.cefr-level-title{
    justify-content:center;
    align-items:center;
    display:flex;

    font-size:1rem;
    height:40%;
    width:100%;
}
.cefr-level-value{
    justify-content:center;
    align-items:flex-start;
    font-weight:bold;
    display:flex;

    font-size:2rem;
    height:60%;
    width:100%;
}
.cefr-level-breakdown{
    height:100%;
    width:70%;

    justify-content:space-evenly;
    align-items:center;
    display:flex;
}
.cefr-break-point{
    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    display:flex;

    height:100%;
}
.cefr-break-point-title{
    justify-content:center;
    align-items:center;
    display:flex;

    font-size:1rem;
    height:40%;
    width:100%;
}
.cefr-break-point-value{
    justify-content:center;
    align-items:flex-start;
    font-weight:bold;
    display:flex;

    font-size:2rem;
    height:60%;
    width:100%;
}

.cefr-vocabulary-breakdown{
    margin-top:1rem;
    height:15rem;
    width:100%;
}
.cefr-vocabulary-breakdown-head{
    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;

    width:calc(100% - 2rem);
    padding-left:1rem;
    font-size:1.5rem;
    height:3rem;
}
.cefr-vocabulary-breakdown-body{
    justify-content:space-evenly;
    align-items:flex-start;
    display:flex;

    margin-top:1rem;
    height:11rem;
    width:100%;
}
.cefr-vocabulary-breakdown-column{
    height:100%;
    width:10%;
}
.cefr-vocabulary-breakdown-column-percent{
    justify-content:center;
    align-items:center;
    display:flex;

    height:2rem;
    width:100%;
}
.cefr-vocabulary-breakdown-column-bar-holder{
    height:calc(100% - 4rem);
    width:100%;

    justify-content:center;
    align-items:flex-end;
    display:flex;
}
.cefr-vocabulary-breakdown-column-bar{
    background-color:var(--accent-blue-1);
    width:50%;
}
.cefr-vocabulary-breakdown-column-level{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;

    height:2rem;
    width:100%;
}

.grammar-points{
    height:fit-content;
    margin-top:1rem;
    min-height:3rem;
    width:100%;
}
.grammar-points-head{
    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;

    width:calc(100% - 2rem);
    padding-left:1rem;
    font-size:1.5rem;
    height:3rem;
}
.grammar-points-body{
    height:fit-content;
    overflow-y:auto;

    max-height:15rem;
}
.grammar-point{
    width:calc(100% - 2rem);
    margin-left:2rem;
}

/*--Mobile Dispaly-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:480px) and (orientation:portrait){
    .cefr-window{
        max-height:100%;
    }
}
@media only screen and (max-width:768px) and (orientation:landscape){
    .cefr-window{
        transform:translate(-50%, 0px);
        max-height:100%;
        overflow-y:auto;
        top:0px;
    }
}
@media only screen and (max-width:768px) and (orientation:portrait){
    .file-display-head{
        height:8rem;
    }
    #file-display-download{
        top:4rem;
    }
    #file-display-delete{
        top:4rem;
    }
    #file-display-cefr{
        left:6.5rem;
        top:4rem;
    }
    .file-display-title{
        transform:translate(-50%);
        width:calc(100% - 6rem);
        left:50%;
    }
}