/*////////////////////////////////////////////////*/
/* DRIVE */
/*////////////////////////////////////////////////*/

#drive{

    width:100vw;
    height:100vh;


    background:var(--bg-color);

}

button{
    color: black !important;
    margin: 0 !important;
}

/*////////////////////////////////////////////////*/
/* HEADER */
/*////////////////////////////////////////////////*/

#header{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:5vw;

    z-index:100;

    background:var(--card-bg);

    border-bottom:
        .1vw solid
        var(--border-color);

    box-shadow:
        var(--shadow);

}


#navigation{

    width:5vw;
    height:100%;

}

#btn-back{

    width:5vw;
    height:5vw;

    margin-top:5vw;
    margin-left:1vw;

    cursor:pointer;
    background-color: transparent;

}



#path{

    width:27vw;
    height:100%;

    overflow:hidden;

}

#current-path{

    width:100%;

    font-size:1.1vw;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}





#sort{

    width:18vw;
    height:100%;

}

#sort-files{

    width:15vw;
    height:3vw;

}




#actions{

    float:right;

    width:23vw;
    height:100%;

}

#actions button{

    float:left;

    width:6vw;
    height:3vw;

    margin-top:6vw;
    margin-left:.5vw;

    cursor:pointer;

}






#files{

    width:100vw;

    margin-top: 6vw;
    padding: 0 6vw;

    padding-bottom:5vw;

    overflow-y:scroll;

}





.file{

    width:15vw;
    height:22vw;

    margin:1vw;

    cursor:pointer;

    border-radius:.8vw;

    overflow:hidden;

    transition: all 0.25s ease;

}


.file:hover{

    background:#ffffff;

    box-shadow:var(--shadow);

}
.file.selected{

    background:
        rgba(
            46,
            204,
            113,
            .12
        );

    border:
        .15vw solid
        var(--primary-color);

}




.file .icon{

    width:100%;
    height:80%;

}


.file .icon img{

    width:90%;
    height:90%;

    object-fit:contain;

}
.file .filename{

    width:100%;
    height:20%;

    text-align:center;

    font-size:.9vw;

    padding-left:.5vw;
    padding-right:.5vw;

    overflow:hidden;

}
.file .filename span{

    width:100%;

    overflow:hidden;

    text-overflow:ellipsis;

}






.folder{

    background:
        rgba(
            255,
            255,
            255,
            .5
        );

}





#context-menu{

    position:fixed;

    width:12vw;

    background:#ffffff;

    border:
        .1vw solid
        var(--border-color);

    box-shadow:
        var(--shadow);

    z-index:500;

}



.context-action{

    width:100%;

    height:3vw;

    cursor:pointer;

    padding-left:1vw;

    line-height:3vw;

}
.context-action:hover{

    background:
        var(--bg-color);

}







#preview-dialog{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    z-index:1000;

    background:
        rgba(
            0,
            0,
            0,
            .9
        );

}
#preview-header{

    width:100vw;
    height:6vw;

}
#preview-header button{

    float:right;

    width:8vw;
    height:4vw;

    margin-top:1vw;
    margin-right:1vw;

}
#preview-content{

    width:100vw;
    height:94vh;

    display:flex;

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

}
#preview-content iframe{

    width:100%;
    height:100%;

    border:none;

    width:90vw;
    height:90vh;

    border:none;


}
#preview-content img{

    width:100%;
    height:100%;

    object-fit:contain;

    max-width:90vw;
    max-height:90vh;

    object-fit:contain;

}


.unsupported{

    color:white;

    font-size:1.2vw;

}


.file.selected{

    background: rgba(46,204,113,0.12);

    border: 0.15vw solid var(--primary-color);

}

#context-menu{

    position: fixed;

    z-index: 9999;

}
.file.highlight{

    border: 0.15vw solid var(--warning-color);

}








.hidden{

    display:none !important;

}
.pointer{

    cursor:pointer;

}









#search-box{

    width:15vw;

    height:100%;

}

#drive-search{

    width:13vw;

    height:3vw;

    font-size:1vw;

    padding-left:1vw;
    margin: 0 !important;

}






/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/

/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////// MOBILE ///////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/

/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/

@media (max-width: 991px) and (orientation: portrait){

     





    #header{

        width:70vw;

        height:100vh;

        left:-70vw;

    }
    #header.active{

        left:0;

    }
    #mobile-menu-toggle{

        position:fixed;

        top:2vw;
        left:2vw;

        z-index:150;

    }


#files{

    margin-top:0;

}

.file{

    width:45vw;

    height:55vw;

}
#path{

    width:100%;

    height:auto;

}
#actions{

    width:100%;

}
#sort{

    width:100%;

}
#actions button{

    width:24vw;

    height:10vw;

}
#current-path{

    font-size:3vw;

}

























}