@import url('style_reset.css');

@font-face {
    font-family: 'My-Segoe UI';
    src: url('../font/segoeui.ttf') format('truetype');
    font-weight:400;
}

@font-face {
    font-family: 'My-Segoe UI';
    src: url('../font/segoeuil.ttf') format('truetype');
    font-weight:300;
}

@font-face {
    font-family: 'My-Segoe UI';
    src: url('../font/seguisb.ttf') format('truetype');
    font-weight:600;
}

@font-face {
    font-family: 'My-Segoe UI';
    src: url('../font/segoeuib.ttf') format('truetype');
    font-weight:700;
}

:root{
    --nav-panel-width: 300px;
    --main-nav-width:55px;
    --main-nav-sides:5px;
    --sub-nav-width: calc(var(--nav-panel-width) - var(--main-nav-width));
    --files-min-width:350px;
    --files-min-width-list: 500px;
    --details-pane-with: 270px;
    --action-color:0,170,205;
    --hover-transition-durat:0.2s;
    --nav-transition-durat:0.27s;
    --global-blur:18px;
    --global-radius: 3px;
    --panel-radius: calc(var(--global-radius) * 1.3);
    --global-font-size: 12.5px;
}

.theme-dark{
    --main-bg-color:rgba(20,20,20,1.0);
    --action-destruct-color:255,65,115;
    --btn-main-color: 23,23,23;
    --btn-hover-opac:0.13;
    --btn-active-opac:0.23;
    --btn-toggle-off-color:133,133,133;

    --font-main-color:rgba(215, 215, 215,1);
    --font-sub-color:rgba(215, 215, 215,0.5);
    --font-main-active-color:rgba(250,250,250,1);
 
    
    --nav-bg-color:16, 16, 16;
    --nav-main-menu-opac: 0.75;
    --nav-sub-menu-opac: 0.775;

    --nav-item-hover-color:255,255,255;
    --nav-item-hover-opac:0.05;
    --nav-item-active-color:0, 0, 0;
    --nav-item-active-opac:0.3;

    --context-menu-bg-color:40,40,40;
    --context-menu-opac: 0.88;
    --context-menu-spike-color:37,37,36;

    --pop-over-overlay-background: 32,32,32;
    --pop-over-overlay-opacity: 0.80;

    --icon-main-color: rgba(215, 215, 215,1);
    --separator-line-color:rgba(255,255,255,0.04);

    --input-shadow: 0px 2px 13px -3px rgba(0,0,0,0.2);
    --input-focus-shadow: 0px 3px 13px -3px rgba(0,0,0,0.30);
    --input-border: solid 1px rgba(255,255,255,0.01);
    --input-focus-border: none;
    --input-bg-color:rgba(29,29,29, 1);
    --path-input-color:rgba(29,29,29, 1);
    --nav-search-color:rgba(255,255,255,0.13);
    --font-nav-search-color:rgba(15,15,15,1); 
}

.theme-dark .nav-panel .active{
    --icon-main-color: rgba(250,250,250,1);
    color: var(--font-main-active-color);
    font-weight:600;
}

.theme-light{
    --main-bg-color:rgba(255,255,255,1.0);
    --action-destruct-color:198,11,53;
    --btn-main-color: 240, 244, 248;
    --btn-hover-opac:0.09;
    --btn-active-opac:0.17;
    --btn-toggle-off-color:135, 139, 143;

    --font-main-color:rgba(25, 25, 25,1);
    --font-sub-color:rgba(25, 25, 25,0.6);
    --font-main-active-color:rgba(0,0,0,1);
 
    --nav-bg-color:240, 244, 248;
    --nav-main-menu-opac: 0.74;
    --nav-sub-menu-opac: 0.78;

    --nav-item-hover-color:0,0,0;
    --nav-item-hover-opac:0.05;
    --nav-item-active-color:255, 255, 255;
    --nav-item-active-opac:0.45;

    --context-menu-bg-color:233, 237, 243;
    --context-menu-opac: 0.74;
    --context-menu-spike-color:239, 243, 243;

    --pop-over-overlay-background:230,235,240;
    --pop-over-overlay-opacity: 0.75;

    --icon-main-color: rgba(65, 65, 65,1);
    --separator-line-color:rgba(0,0,0,0.065);

    --input-shadow: 0px 2px 13px -3px rgba(0,0,0,0.10);
    --input-focus-shadow: 0px 3px 13px -3px rgba(0,0,0,0.15);
    --input-border: solid 1px rgba(0,0,0,0.05);
    --input-focus-border: solid 1px rgba(0,0,0,0.10);
    --input-bg-color:rgba(255,255,255,1);
    --path-input-color:rgba(255,255,255,1);
    --nav-search-color:rgba(0,0,0,0.08);
    --font-nav-search-color:rgb(245, 245, 245);

    transition: all var(--nav-transition-durat) ease;
}

.theme-light .nav-panel .active{
    --icon-main-color: rgba(0,0,0,1);
    color: var(--font-main-active-color);
    font-weight:700;
}

html{
    height: 100%;
    /* background: transparent; */
    overflow: hidden;
}

body{
    height:100%;
    font-family: 'My-Segoe UI', Verdana, sans-serif;
    color: var(--font-main-color);
    font-size:var(--global-font-size);
    line-height:17.5px;
    cursor:default;
    box-sizing: border-box; 
    overflow: hidden;
    position: relative;
    /* background: transparent; */

}

body div{
    scrollbar-color: var(--separator-line-color) rgba(0, 0, 0, 0);
    scrollbar-width: thin;
}
body, body.div{
    transition: background-color var(--nav-transition-durat) ease;
}


body div::-webkit-scrollbar{
    width:5px;
    height:5px;
}

body div::-webkit-scrollbar-track{
    background: rgba(0, 0, 0, 0);
}

body div::-webkit-scrollbar-thumb{
    background: var(--separator-line-color);
}

h1{
    font-size:19px;
    font-weight:100;
}

h2{
    font-size:15px;
    font-weight:100;
}

h3{
    font-size:13.5px;
    font-weight:100;
}

button{
    height: 35px;
    padding: 0px 20px;
    font-size:var(--global-font-size);
    line-height:19px;
    border: none;
    border-radius:var(--global-radius);
    color:var(--font-main-color);
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color:rgba(var(--btn-main-color),1);
    transition-property: background-color;
    transition-duration: var(--hover-transition-durat);
}

button.confirm{
    color:rgba(var(--action-color),1);
}

button.destruct{
    color:rgba(var(--action-destruct-color),1);
}

button.btn-s{
    height:35px;
}
button.btn-m{
    height:45px;
}
button.btn-l{
    height:55px;
}

button.short-btn{
    background-color:rgba(var(--btn-main-color),0);
}

button.short-btn.btn-s{
    width:35px;
}

button.short-btn.btn-m{
    width:45px;
}

button.short-btn.btn-l{
    width:55px;
}

button.short-btn svg{
    width:100%;
    height:100%;
    pointer-events: none;
}



input[type=text]{
    height: 100%;
    width: 100%;
    border: var(--input-border);
    border-radius: var(--global-radius);
    padding: 10px;
    box-sizing: border-box;
    box-shadow: var(--input-shadow);
    color:var(--font-main-color);
}

input[type=text]:focus{
    border: var(--input-focus-border);
    box-shadow: var(--input-focus-shadow);
    outline:none;
    outline-offset:none;
    appearance: none;
    color:rgba(0,0,0,0);
}


form .toggle input[type="checkbox"]{
    width:0px;
    height:0px;
    position: absolute;
    visibility:hidden;
}

form .toggle .toggle-switch{
    width:45px;
    height:23px;
    margin:1px 0px;
    display:block;
    position: relative;
    top:50%;
    transform: translateY(-50%);
    background-color: rgba(var(--btn-toggle-off-color),0.25);
    border-radius:15px;
}

form .toggle .toggle-switch:after{
    content:"";
    width:19px;
    height:19px;
    display:block;
    position: absolute;
    top:2px;
    left:2px;
    background-color: var(--main-bg-color);
    border-radius:50%;
    box-shadow: 0px 3px 7px -1px rgba(0,0,0,0.25);
}

form .toggle input:checked + .toggle-switch{    
    background-color: rgba(var(--action-color),1);
}

form .toggle input:checked + .toggle-switch:after{    
    left:24px;
}

select{
    appearance: none;
    -webkit-appearance: none;
    height:35px;
    width:100%;
    padding:0px 31px 0px 10px;
    background-color: var(--input-bg-color);
    border-radius: var(--global-radius);
    border: solid 1px rgba(0,0,0,0.09);
    box-shadow:0px 3px 15px -11px rgba(0, 0, 0, 0.5);
    color:var(--font-main-color);
}

.select-holder{
    width:100%;
    max-width:200px;
    position:relative;
}

.select-holder select{
    top:50%;
    transform:translateY(-50%);
    position:relative;
}

.select-holder svg{
    width:21px;
    height:21px;
    position:absolute;
    right:5px;
    top:50%;
    transform:translateY(-50%);
    z-index:1;
}

ul, li{
    list-style:none;
    display:block;
    margin:0px;
    padding:0px;
}

.backdrop{
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background-color:var(--main-bg-color);
    background-image:url("../img/bg/bg-13.jpg");
    background-size:cover;
    background-position: center center;
    background-repeat: no-repeat;

    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

.layout-grid{
    height: 100%;
    display: grid;
    grid-template-columns: fit-content(var(--nav-panel-width)) auto;
    overflow: hidden;
    box-shadow: 0px 8px 25px 1px rgba(0,0,0,.4);
    position: relative;
    transition-property: all;
    transition-duration: 0.27s;
    transition-timing-function: ease-out;
}
.layout-grid.main-closed .nav-panel{
    width:var(--main-nav-width);   
}

.nav-panel{
    width:var(--nav-panel-width);
    position: relative;
    display:flex;
    backdrop-filter: blur(var(--global-blur));
    -webkit-backdrop-filter: blur(var(--global-blur));
    

    transition-property: width;
    transition-duration: var(--nav-transition-durat);
    transition-timing-function: ease-out;
}

.nav-panel button{
    background: none;
    color: var(--font-main-color);
    transition-property: background-color;
    transition-duration: var(--hover-transition-durat);
}

.nav-panel li, .context-menu li{
    transition-property: background-color;
    transition-duration: var(--hover-transition-durat);
}

.nav-panel.sub-open .main-menu{
    width:var(--main-nav-width);
}

.nav-panel.sub-open .sub-menu{
    width:var(--sub-nav-width);
}

.nav-panel.sub-open .sub-menu .sub-list-holder, .nav-panel.sub-open .sub-menu .button-holder{
    opacity:1;
}

.main-menu{
    flex-grow:0;
    flex-shrink:0;
    height:100%;
    width:100%;
    position:relative;
    left:0px;
    overflow: hidden;
    background-color: rgba(var(--nav-bg-color), var(--nav-main-menu-opac));

    transition: width var(--nav-transition-durat) ease-out;
}

.main-menu .main-menu-list{
    height:100%;
    padding: 0px var(--main-nav-sides);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.main-menu .main-menu-item{
    height:45px;
    position:relative;
    margin:0px 0px 3px 0px;
    padding:0px;
    flex-grow:0;
    flex-shrink:0;
    border-radius: var(--global-radius);
}

.main-menu .main-menu-item:last-of-type{
    margin:0px 0px 5px 0px; 
}

.main-menu .main-menu-list .main-menu-item.main-item-hamburger{
    margin:5px 0px 10px 0px;
}

.mobile-menu-btn{
    width:45px;
    height:45px;
    position: fixed;
    padding: 10px;
    top:15px;
    left:5px;
    box-sizing: border-box;
    z-index:1;
    display:none;
} 

.mobile-menu-btn svg{
    pointer-events: none !important;
}

.main-menu .main-menu-empty-space{
    width:100%;
    position:relative;
    flex-grow:1;
    flex-shrink:1;
}

.main-menu .main-menu-item .item-icon{
    height:25px;
    width:25px;
    position:absolute;
    padding:10px;
    left:0px;
    pointer-events: none;
}

.nav-panel svg{
    position:relative;
    width: 100%;
    height: 100%;
}

.main-menu .main-menu-item .item-label{
    height:100%;
    width:calc(var(--nav-panel-width) - var(-));
    position: relative;
    margin: 0px 0px 0px 45px;
    padding: 13px 25px 13px 5px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align:left;
    opacity:1;
    pointer-events:none;

    transition-property: opacity;
    transition-duration: var(--nav-transition-durat);
    transition-timing-function: ease-out;
}

.nav-panel.sub-open .main-menu .main-menu-item .item-label{
    opacity:0;
}

.layout-grid.main-closed .main-menu .main-menu-item .item-label{
    opacity:0;
}

.main-menu .main-menu-item.main-item-search .item-label{
    padding: 5px 25px 5px 5px;
    overflow: visible;
}

.main-menu .main-menu-item .item-label input{
    background-color: var(--nav-search-color);
    border:none;
    box-shadow: none;
}

.main-menu .main-menu-item .item-label input:focus{
    background-color: rgba(255,255,255,1);
    box-shadow: var(--input-focus-shadow);
}

.main-menu .main-menu-item .item-label input::placeholder{
    color:var(--font-nav-search-color);
}

.main-menu .main-menu-item .item-label input:focus::placeholder{
    color:#a5a5a5;
}

.main-menu .main-menu-item.main-item-hamburger .item-label {
    font-size:17px;
    font-weight:400;
    opacity:0.75;
}
.main-menu .main-menu-item.active{
    background-color: rgba(var(--nav-item-active-color),var(--nav-item-active-opac));
}

.main-menu .main-menu-item.active::before {
    content: "";
    height: 31px;
    width: 2px;
    position: absolute;
    display: block;
    top: 7px;
    left: 2px;
    border-radius: 0.7px;
    background-color: rgba(var(--action-color), 1);
}

.sub-menu{
    width: 0px;
    display: flex;
    flex-direction: column;
    overflow:hidden;
    height:100%;
    position:relative;
    background-color: rgba(var(--nav-bg-color), var(--nav-sub-menu-opac));

    transition-property: width;
    transition-duration: var(--nav-transition-durat);
    transition-timing-function: ease-out;
}

.sub-menu .sub-list-holder{
    position:relative;
    flex-grow:1;
    opacity:0;

    transition-property: opacity;
    transition-duration: var(--nav-transition-durat);
    transition-timing-function: ease-out;
}

.sub-menu .files-grid-scroller{
    height:100%;
    width:calc(var(--nav-panel-width) - var(--main-nav-width));
    position: absolute;
    right:0px;
    display: block;
    overflow:auto;
}

.sub-menu .button-holder{
    height:45px;
    position:relative;
    flex-grow: 0;
    flex-shrink: 0;
    opacity:0;

    transition-property: opacity;
    transition-duration: var(--nav-transition-durat);
    transition-timing-function: ease-out;
}

.sub-menu .button-holder .item-trash{
    margin:5px 0px;
}

.sub-menu .sub-list{
    margin-bottom:15px;
    padding:0px var(--main-nav-sides);
}

.sub-menu .sub-list:first-child {
    margin-top: 20px;
}

.sub-menu .sub-list h2{
    color:var(--font-sub-color);
    padding-left:25px;
    margin:0px 0px 10px 0px;
}

.sub-menu .sub-list ul{
    padding-left:15px;
}

.sub-menu .sub-menu-item{
    height:35px;
    width:100%;
    position:relative;
    margin-bottom: 3px;
    padding:0px 0px 0px 60px;
    border-radius: var(--global-radius);
    box-sizing: border-box;
}
.sub-menu .sub-menu-item div{
    pointer-events: none;
}

.sub-menu .sub-menu-item .item-arrow{
    display:none;
}

.sub-menu .sub-menu-item .item-icon{
    height:25px;
    width:25px;
    position:absolute;
    margin: 5px 10px 5px 0px;
    top: 0px;
    left:25px;
}

.sub-menu.view-file-three .files-grid-scroller .sub-menu-item .item-icon{
    filter: drop-shadow( 0px 1px 20px rgba(0,0,0,0.5)) drop-shadow( 0px 0px 1px rgba(0,0,0,0.07));
    background-image: url("../img/icons/color/icons-files-color-25@2x.png");
    background-size:475px 50px;
    background-repeat: no-repeat;
}

.sub-menu.view-file-three .files-grid-scroller .sub-menu-item .item-icon svg{
    display:none;
}

.sub-menu.view-file-three .files-grid-scroller .sub-menu-item .item-arrow{
    width:25px;
    height:25px;
    padding:2px;
    margin:5px 0px;
    position:absolute;
    left:0px;
    box-sizing: border-box;
    transform: rotate(-90deg);
    display: block;
}

/* --------------------SUBMENU FILE TYPES---------------------- */

.sub-menu .sub-menu-item.type-folder .item-icon{
    background-position:-25px 0px;
}

.sub-menu .sub-menu-item.type-folder-desktop .item-icon{
    background-position:0px 0px;
}

.sub-menu .sub-menu-item.type-folder-pictures .item-icon{
    background-position:-50px 0px;
}

.sub-menu .sub-menu-item.type-folder-music .item-icon{
    background-position:-75px 0px;
}

.sub-menu .sub-menu-item.type-folder-videos .item-icon{
    background-position:-100px 0px;
}

.sub-menu .sub-menu-item.type-folder-documents .item-icon{
    background-position:-125px 0px;
}

.sub-menu .sub-menu-item.type-folder-downloads .item-icon{
    background-position:-150px 0px;
}

.sub-menu .sub-menu-item.type-folder-drive .item-icon{
    background-position:-375px 0px;
}

.sub-menu .sub-menu-item.type-folder-drive-flash .item-icon{
    background-position:-250px 0px;
}

.sub-menu .sub-menu-item.type-folder-drive-sd .item-icon{
    background-position:-300px 0px;
}

.sub-menu .sub-menu-item.type-folder-drive-miro-sd .item-icon{
    background-position:-325px 0px;
}

.sub-menu .sub-menu-item.type-folder-drive-rom .item-icon{
    background-position:-275px 0px;
}

.sub-menu .sub-menu-item.type-folder-drive-network .item-icon{
    background-position:-400px 0px;
}

.sub-menu .sub-menu-item.type-folder-homegroup .item-icon{
    background-position:-425px 0px;
}

.sub-menu .sub-menu-item.type-folder-onedrive .item-icon{
    background-position:-450px 0px;
}

.sub-menu .sub-menu-item.type-recycle-bin-full .item-icon{
    background-position:-225px 0px;
}

.sub-menu .sub-menu-item.type-recycle-bin-empty .item-icon{
    background-position:-200px 0px;
}

/* ----------------END OF SUBMENU FILE TYPES----------------- */

.sub-menu .sub-menu-item.active{
    background-color:rgba(var(--nav-item-active-color),var(--nav-item-active-opac));
}

.sub-menu .sub-menu-item .item-label{
    height:100%;
    width:100%;
    position: relative;
    padding: 8px 25px 8px 1px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align:left;
}

.separator-line{
    display: block;
    position: relative;
    background-color:var(--separator-line-color);
}

.separator-line.horizontal{
    height:1px;
    width: 100%;
    max-width: calc(100% - 50px);
    margin:0 auto;
}

.separator-line.vertical{
    width:1px;
    height: 100%;
    margin:auto 0;
}

.main-content{
    position:relative;
    background-color:var(--main-bg-color);
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
}

.main-content .menu-drag{
    width:17px;
    height:100%;
    position:absolute;
    left:0px;
    z-index:3;
}

.main-content .menu-drag .drag-highlight{
    width:2px;
    height:50%;
    position:absolute;
    left:0px;
    top:50%;
    transform: translateY(-50%);
    background-color:rgba(var(--action-color), 1);
    opacity:0; 
    transition-property: all;
    transition-duration: 0.1s;
}

.main-content .menu-drag .drag-handle{
    height:45px;
    width:15px;
    display: block;
    position: absolute;
    padding:5px 0px;
    right:0px;
    top:50%;
    transform: translateY(-50%);
    border-radius:var(--global-radius);
    transition-property: background-color;
    transition-duration: var(--hover-transition-durat);
}

.main-content .menu-drag .drag-handle svg{
    width:100%;
    height:100%;
}

.main-content .menu-drag .drag-handle:active + .drag-highlight {
    opacity:1;
    height:100%;
}

.main-content .content-dashboard, .main-content .content-folders, .main-content .content-settings {
    /* width:0px;
    height:0px;
    position: absolute;
    visibility:hidden;
    opacity:0;
    left:5px; */
/*     transition-property: opacity;
    transition-duration: 0.15s;
    transition-timing-function: ease; */
}

.main-content .content-pane {
    width:0px;
    height:0px;
    position: absolute;
    visibility:hidden;
    opacity:0;
    left:5px;

    transition-property: opacity, left;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}
.main-content .content-pane.open {
    height:100%;
    width:100%;
    left:0px;
    opacity:1; 
    visibility: visible;
}

.main-content .content-dashboard.open{
    background:rgba(var(--main-bg-color),0.1);
    color: rgba(var(--font-main-color));
}

.main-content .content-folders{
    display:flex;
    flex-direction:column;
}

.main-content .content-folders .separator-line{
    flex-grow:0;
}

.content-folders .top-panel{
    width: 100%;
    height: 45px;
    display: grid;
    grid-template-columns: auto 1fr auto 45px;
    grid-template-rows: 45px;
    grid-template-areas: "Actions-A Breadcrumb Actions-B Btn-More";
    margin: 50px 0px 20px 0px;
    padding: 0 25px 0px 25px;
    flex-grow: 0;
    box-sizing: border-box;
}

.top-panel .container-actions, .bottom-panel .container-actions{
    display:flex;
    flex-grow:0;
    box-sizing: border-box;
}

.top-panel button{
    padding:10px;
    box-sizing: border-box;
}

.top-panel .container-actions button{
    margin-right:1px;
}

.top-panel .container-actions button:last-child{
    margin-right:0px;
}

.top-panel .container-path-nav{
    position:relative;
    flex-grow:1;
    padding:0px 15px;
    box-sizing: border-box;
}

.top-panel .container-path-nav .container-breadcrumb{
    height:calc(100% - 2px);
    width: calc(100% - 45px);
    position:absolute;
    margin:1px 45px 1px 1px;
    top:0px;
    display:flex;
    overflow: hidden;

}

.container-path-nav .container-breadcrumb button.item-breadcrumb{
    height:100%;
    padding:11px 3px;
    flex-grow:0;
    flex-shrink: 0;
    font-size:15px;
    font-weight:100;
    box-sizing: border-box;
}

.container-path-nav .container-breadcrumb button.item-breadcrumb:first-child{
    margin-left:15px;
}

.container-path-nav .container-breadcrumb button.item-breadcrumb:last-child{
    margin-right:15px;
    font-weight: 500;
}

.container-path-nav .container-breadcrumb button.drop-breadcrumb{
    width:21px;
    height:100%;
    position:relative;
    padding:12px 0px;
    flex-grow:0;
    flex-shrink: 0;
}

.container-path-nav .container-breadcrumb button.drop-breadcrumb svg{
    width:21px;
    height:21px;
    position:relative;
    transform: rotate(-90deg);
}

.top-panel .container-path-nav input{
    padding:15px;
    color:var(--path-input-color);
    background-color:var(--path-input-color);
}

.top-panel .container-path-nav input:focus{
    padding:15px;
    color:rgba(0,0,0,1);
    background-color:rgba(255,255,255,1);
}

.content-folders .bottom-panel{
    width: 100%;
    height: 45px;
    display: flex;
    padding: 5px 25px 5px 25px;
    flex-grow: 0;
    box-sizing: border-box;
}

.bottom-panel .container-actions button{
    height:35px;
    width:35px;
    padding:5px;
    margin-right:5px;
    box-sizing: border-box;
    /* border-radius: 2px; */
}

.bottom-panel .container-actions button:last-child{
    margin-right:0;
}

.bottom-panel .container-files-counter{
    display:flex;
    flex-grow:1;
    padding:5px 5px 5px 0px;
    box-sizing: border-box;
}

.bottom-panel .files-count-selected, .bottom-panel .files-count-total{
    display:flex;
}

.bottom-panel .files-count-selected span, .bottom-panel .files-count-total span{
    margin:3px 3px 3px 0px;
}

.bottom-panel .files-count-selected .count-separator{
    width:1px;
    height:calc(100% - 10px);
    position:relative;
    margin:5px;
    background-color: var(--font-main-color);
}

.bottom-panel .files-count-selected .count-selected-icon{
    height:25px;
    width:25px;
    margin-right:0px;
    position:relative;
}

.bottom-panel .files-count-selected .count-selected-icon svg{
    height:100%;
    width:100%;
    position:relative;
}

.content-folders .center-panel{
    width:100%;
    position:relative;
    flex-grow:1;
    display:flex;
    overflow: hidden;
}

.center-panel .files-grid-holder{
    position:relative;
    flex-grow:1;
}

.center-panel .files-grid-holder .files-grid-scroller{
    height:100%;
    width:100%;
    position: absolute;
    display: block;
    overflow:auto;
    overflow-x:hidden;
}

.center-panel .files-grid{
    position:relative;
    padding: 10px 25px 5px 25px;
    min-width: var(--files-min-width);
}

.files-grid .item-file{
    position: relative;
    background-color: rgba(var(--action-color),0);
    transform: scale();
    transition-property: background-color;
    transition-duration: var(--hover-transition-durat);
}

.files-grid .item-file div{
    pointer-events: none;
}

/* .files-grid .item-file:hover{
    background-color: rgba(var(--action-color),var(--btn-hover-opac));
} */

.files-grid .item-file.selected{
    background-color: rgba(var(--action-color),var(--btn-active-opac));
}

.files-grid .item-file .checkbox-holder{
    width:25px;
    height:25px;
    position:relative;
    pointer-events: visible;
}
.files-grid .item-file .checkbox-holder svg{
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    pointer-events: none;
}

.files-grid .item-file .checkbox-holder svg.file-check{
    visibility:hidden;
    width:17px;
    height:17px;
    opacity: 0;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);

    transition: all calc(var(--hover-transition-durat) / 3) ease-out;
}

.files-grid .item-file.selected .checkbox-holder svg.file-check{
    visibility: visible;
    width:100%;
    height:100%;
    opacity:1;
}

.files-grid .item-file .item-icon{
    position:relative;
    background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.files-grid .item-file.type-folder .item-icon{
    background-image: url("../img/icons/color/icon-folder-55.png");
}

.files-grid .item-file.type-file .item-icon{
    background-image: url("../img/icons/color/icon-file-55.png");
    margin:5px;
}

.files-grid .file-properties-holder{
}

.files-grid .item-file .item-file-name{
    position:relative;
}

.files-grid .item-file .item-file-name .file-name-box{
    position:relative;
    color:var(--font-main-color);
    background-color:rgba(255,255,255,0);
    border-radius:var(--global-radius);
    box-sizing: border-box;
}

.files-grid .item-file .item-file-name .file-name-box:focus-within{
    box-shadow: 0px 3px 13px -3px rgba(0,0,0,0.15);
    background:rgba(255,255,255,1);
    color:rgba(0,0,0,1);
    text-overflow:clip;
    position: absolute;
    z-index: 10000;
    width:100%;
}

.files-grid .item-file .item-file-name .file-name-content{
    height:100%;
    width:100%;
    position:relative;
    /* line-height:19px; */
    text-align:left;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
}

.files-grid .item-file .item-file-name .file-name-content[contenteditable="true"]:focus{
    text-overflow: clip;
    white-space: normal;
    -webkit-line-clamp: inherit;
}

.files-grid .item-file .item-file-name .file-name-content div{
    position:relative;
}

.files-grid .item-file-property{
    position:relative;
    font-weight:100;
    color:var(--font-sub-color);
}

.center-panel.view-mode-grid .files-grid .file-properties-holder > *{
    visibility:hidden;
    display:none;
}

/* -------------------------VIEW MODES----------------------- */

/* -----------------------VIEW MODE GRID--------------------- */

.center-panel.view-mode-grid .files-grid{
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(125px, 1fr));
}

.center-panel.view-mode-grid .files-grid .item-file{
    /* height:135px; */
    margin:1px;
    border-radius: var(--global-radius);
    padding:5px;
}

.center-panel.view-mode-grid .files-grid .item-file .item-icon{
    height:55px;
    margin:10px auto;
}

.center-panel.view-mode-grid .files-grid .item-file .item-file-name{
    height:60px;
    width:100%;
    max-width:115px;
    margin:0 auto;
    display:block;
    visibility:visible;
}

.center-panel.view-mode-grid .files-grid .item-file .item-file-name .file-name-box{
    height:100%;
    width:100%;
    padding:1px 3px;
}

.center-panel.view-mode-grid .files-grid .item-file .item-file-name .file-name-box:focus-within{
    height: auto;
}

.center-panel.view-mode-grid .files-grid .item-file .item-file-name .file-name-content{
    overflow: hidden;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height:18px;
    text-align: center;
}

.center-panel.view-mode-grid .files-grid .item-file .checkbox-holder{
    left:5px;
    top:5px;
    position:absolute;
}

.center-panel.view-mode-grid .files-grid .item-file svg{
}

/* ----------------------VIEW MODE TILES--------------------- */

.center-panel.view-mode-tiles .files-grid{
    display: grid;
    grid-template-columns:repeat( auto-fill, minmax(210px, 1fr) );
}

.center-panel.view-mode-tiles .files-grid .item-file{
    height:85px;
    display:grid;
    grid-template-columns: 25px 65px minmax(0px, 100%);
    margin:1px;
    border-radius: var(--global-radius);
    padding:10px 5px;
    box-sizing:border-box;
}

.center-panel.view-mode-tiles .files-grid .item-file .item-file-icon{
    width:55px;
    height:55px;
    margin:5px; 
}

.center-panel.view-mode-tiles .files-grid .item-file.type-folder .item-icon{
    margin:5px;
}

.center-panel.view-mode-tiles .files-grid .item-file .item-file-name{
    height:23px;
}

.center-panel.view-mode-tiles .files-grid .item-file .item-file-name .file-name-box{
    height:100%;
    padding:2px 0px;
    margin: 0px 0px 0px 5px;
}

.center-panel.view-mode-tiles .files-grid .item-file .item-file-name .file-name-box:focus-within{
    padding:2px 0px 3px 5px;
    height: auto;
    min-height:23px;
    width:calc(100% - 5px);
}

.center-panel.view-mode-tiles .files-grid .item-file .item-file-name .file-name-content{
    height:100%;
    text-align:left;
    white-space: nowrap;
}

.center-panel.view-mode-tiles .files-grid .item-file-property{
    padding-left:5px;
    box-sizing: border-box;
    line-height: 20.1px;
}

.center-panel.view-mode-tiles .files-grid .item-file-property.file-date-time{
    visibility:hidden;
    display:none;
}

.center-panel.view-mode-tiles .files-grid .item-file .checkbox-holder{
    position:relative;
    top:50%;
    transform: translateY(-50%);
}

.center-panel.view-mode-tiles .files-grid .item-file svg{

}

/* -----------------------VIEW MODE LIST--------------------- */


.center-panel.view-mode-list .files-grid-holder .files-grid-scroller{
    overflow-x:auto;
}
.center-panel.view-mode-list .files-grid{
    display: flex;
    flex-direction:column;
    padding:10px 0px 5px 0px;
}

.center-panel.view-mode-list .files-grid:last-child{
    padding:10px 0px 15px 0px;
}

.center-panel.view-mode-list .files-grid .item-file{
    height:35px;
    min-width:var(--files-min-width-list);
    padding:0px 0px 0px 25px;
    display:flex;
    margin-bottom:1px;
    box-sizing: border-box;
}

.center-panel.view-mode-list .files-grid .item-file .item-icon{
    height:25px;
    width:25px;
    margin:5px;
    flex-grow:0;
    flex-shrink: 0;
}

.center-panel.view-mode-list .files-grid .item-file.type-folder .item-icon{
    background-image: url("../img/icons/color/icon-folder-25.png");
}

.center-panel.view-mode-list .files-grid .item-file.type-file .item-icon{
    background-image: url("../img/icons/color/icon-file-25.png");
}

.center-panel.view-mode-list .files-grid .item-file .checkbox-holder{
    width:25px;
    height:25px;
    margin:5px 10px 5px 0px;
    flex-grow:0;
    flex-shrink: 0;
}

.center-panel.view-mode-list .files-grid .item-file svg{
    /* width:25px;
    height:25px;
    display:block;
    left: 25px;
    position:absolute;
    margin:5px 10px 5px 0px;
    flex-grow:0;
    flex-shrink: 0; */
}

.center-panel.view-mode-list .files-grid .file-properties-holder{
    display:flex;
    flex-grow:1;
}

.center-panel.view-mode-list .files-grid .item-file .item-file-name{
    height:calc(100% - 10px);
    min-width:0px;
    max-width:320px;
    flex-grow:1;
    margin:5px 20px 5px 5px;
    box-sizing: border-box;
}

.center-panel.view-mode-list .files-grid .item-file .item-file-name .file-name-box{
    height:100%;
    width:100%;
    position:absolute;
    padding:3px 0px;
}

.center-panel.view-mode-list .files-grid .item-file .item-file-name .file-name-box:focus-within{
    padding:2px 0px 2px 5px;
    margin:1px 0px;
    height: auto;
    min-height:23px;
}

.center-panel.view-mode-list .files-grid .item-file .item-file-name .file-name-content{
    white-space: nowrap;
}

.center-panel.view-mode-list .files-grid .item-file-property{
    padding:8px 10px;
    flex-shrink: 0;
}

.center-panel.view-mode-list .files-grid .item-file-property:last-child{
    padding-right:25px;
}

.center-panel.view-mode-list .files-grid .item-file-property.file-date-time{
    width:110px;
}

.center-panelview-mode-list .files-grid .item-file-property.file-date-time span:first-child{
    width:60px;
}

.center-panel.view-mode-list .files-grid .item-file-property.file-date-time span:last-child{
    padding-left:10px;
    width:40px;
}

.center-panel.view-mode-list .files-grid .item-file-property.file-size{
    width:50px;
}

.center-panel.view-mode-list .files-grid .item-file-property.file-type{
    width:80px;
}

.center-panel.view-mode-list .files-grid .item-file-property.file-type{
    width:80px;
}

.center-panel.view-mode-list .list-view-header-holder{
    display:block;
    box-sizing: border-box;
}

.list-view-header-holder{
    position:sticky;
    top:0px;
    background:var(--main-bg-color);
    z-index: 2;
    padding:0px 0px 0px 25px;
    min-width:var(--files-min-width-list);
    display: none;
}

.list-view-header-holder .separator-line{
    margin:0px 25px 0px 0px;
    max-width: calc(100% - 25px);
}

.list-view-header{
    position: relative;
    font-weight: 100;
    height:45px;
    width: 100%;
    display:flex;
    color:rgba(var(--font-main-color));
    line-height:27px;
}

.list-view-header svg{
    width:25px;
    height:25px;
    display:block;
    position:relative;
    margin:10px 10px 10px 0px;
    flex-grow:0;
    flex-shrink: 0;
}

.list-view-header .file-properties-holder{
    display:flex;
    flex-grow:1;
    color: var(--action-color);
}

.list-view-header .file-properties-holder span.active{
    font-weight:600;
    color: var(--action-color);
}

.list-view-header .item-file-name{
    min-width:0px;
    max-width:calc(320px + 35px); /* Compensation for lack of icon  */
    flex-grow:1;
    margin:8px 20px 8px 5px;
    box-sizing: border-box;
}

.list-view-header .item-file-property{
    padding:8px 10px;
    flex-shrink: 0;
}

.list-view-header .item-file-property.file-date-time{
    width:110px;
}

.list-view-header .item-file-property:last-child{
    padding-right:25px;
}

.list-view-header .item-file-property.file-size{
    width:50px;
}

.list-view-header .item-file-property.file-type{
    width:80px;
}

.center-panel.view-mode-list .files-group{
   min-width: var(--files-min-width-list);
}

/* -------------------------END OF VIEW MODES----------------------- */

.center-panel .file-details-holder{
    height:100%;
    position:relative;
    flex-grow:0;
    overflow-x:hidden;
    background-color:var(--main-bg-color);

    width: 0px;
    transition-property: width;
    transition-duration: var(--nav-transition-durat);
    transition-timing-function: ease-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.center-panel .file-details-holder.details-open{
    width:var(--details-pane-with);
}

.center-panel .file-details-holder .separator-line{
    position:absolute;
    left:0px;
}

.center-panel .file-details-holder .file-details-scroller{
    height:100%;
    width:270px;
    position: absolute;
    display: block;
    overflow:auto;
}

.center-panel .file-details-holder .file-details-list{
    position:relative;
    padding:25px;
}

.file-details-list .file-preview{
    height:105px;
    margin-bottom:10px;
    box-sizing: border-box;
}

.file-details-list .file-preview.preview-type-icon{
    padding:15px 0px;
}

.file-details-list .file-preview .preview-icon{
    height:75px;
    width:75px;
    position: relative;
    margin:0 auto;
    background-size:contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 3px 4px rgba(0,0,0,0.1));
    background-image:url("../img/icons/color/icon-folder-220.png");
}

.file-details-list .file-detail{
    position:relative;
}

.file-details-list .file-detail.detail-property{
    display:flex;
    color:var(--font-sub-color);
    line-height: 19px;
}

.file-details-list .file-detail.detail-name{
    font-size:14px;
    text-align: center;
    padding: 0px 10px;
    margin-bottom:10px;
    line-height:21px;
}

.file-details-list .file-detail.detail-file-type{
    font-size:14px;
    text-align: center;
    padding: 0px 10px;
    margin-bottom:5px;
    font-weight:100;
    color:var(--font-sub-color);
}

.file-details-list .file-detail.detail-property .detail-property-value, .file-details-list .file-detail.detail-property .detail-property-label{
    flex-basis:50%;
    position:relative;
    margin: 1px 5px;
}

.file-details-list .detail-property .detail-property-label{
    text-align:right;
    font-weight:400;
}

.file-details-list .detail-property .detail-property-value{
    font-weight:100;
}

.files-group{
   
}
.files-group.closed{
    height: 35px;
    overflow: hidden;
}

.group-separator-holder{
    width:100%;
    box-sizing: border-box;
    background:var(--main-bg-color);
    position:sticky;
    top:0px;
    z-index:1;
    min-width: var(--files-min-width);
}

.view-mode-list .group-separator-holder{
    top:46px;
    min-width: var(--files-min-width-list);
}

/* .group-separator-holder:hover .group-separator{
    background-color: rgba(var(--action-color),var(--btn-hover-opac));
} */

.group-separator{
    height:34px;
    width:100%;
    display:flex;
    position:relative;
    padding:4px 25px 5px 25px;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 25px;
    color:rgba(var(--action-color),1);
    pointer-events: none;

    transition: background-color var(--nav-transition-durat);
}

.group-separator .group-title{
    flex-grow: 0;
    font-weight:400;
}

.group-separator .group-count{
    flex-grow: 1;
    padding-left:5px;
    box-sizing: border-box;
    font-weight:100;
}

.group-separator .group-arrow{
    width:25px;
    height:25px;
    flex-grow: 0;
    position:relative;
    transform: rotate(180deg);

    transition: transform var(--nav-transition-durat) ease-out;
}

.group-separator .group-arrow svg{
    height:21px;
    width:21px;
    padding:2px;
}

.files-group.closed .group-separator .group-arrow{
    transform: rotate(0deg);
}

.files-group.closed .group-separator-holder{
   top:0px;
}

.group-separator-holder .separator-line{
    max-width:calc(100% - 50px);
    position:relative;
    margin:0 auto;
    background-color:rgba(var(--action-color),1);
    opacity:0.20;
}

/* -------------------------CONTEXT MENU----------------------- */

.context-menu{
    width:250px;
    display:block;
    position:absolute;
    background-color: rgba(var(--context-menu-bg-color), var(--context-menu-opac));
    box-shadow: var(--input-shadow);
    backdrop-filter: blur(var(--global-blur));
    -webkit-backdrop-filter: blur(var(--global-blur));
    border: var(--input-border);
    border-radius:var(--panel-radius);
    opacity: 1;
    z-index:1000;

    transition: opacity var(--nav-transition-durat) ease,
                transform var(--nav-transition-durat) ease;
}

.context-free{
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

.spike{
    display: block;
    width:20px;
    height:20px;
    position:absolute;
    top:-22px;
    clip-path: polygon(100% 0, 0 100%, 0 0);
    background-color: rgba(var(--context-menu-spike-color), 1);
    border: var(--input-border);
    border-radius:var(--global-radius);
    transform:translate(50%, 50%) rotate(45deg);
    z-index:1001;
}

.context-menu .context-scroller{
    width:100%;
    height:100%;
    position:relative;
    overflow:auto;
}

.context-menu .context-list{
    margin:5px 0px 5px 0px;
}

.context-menu .context-list:first-of-type{
    margin-top:10px;
}

.context-menu .context-list:last-of-type{
    margin-bottom:10px;
}

.context-menu .context-item{
    height: 35px;
    width: 100%;
    position: relative;
    margin-bottom: 1px;
    padding-left: 50px;
    box-sizing: border-box;
}

.context-menu .context-item .item-icon{
    height:25px;
    width:25px;
    position:absolute;
    margin: 5px 10px 5px 15px;
    top: 0px;
    left:0px;
}

.context-menu svg {
    position: relative;
    width: 100%;
    height: 100%;
}

.context-menu .context-item .item-label {
    height: 100%;
    width: 100%;
    position: relative;
    padding: 8px 25px 8px 1px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.context-menu .context-item.expand .item-label {
    padding: 8px 45px 8px 1px;
}

.context-menu .context-item.expand .expand-icon {
    width: 25px;
    height: 25px;
    padding: 2px;
    margin: 5px 0px;
    position: absolute;
    right: 10px;
    top:0px;
    box-sizing: border-box;
    transform: rotate(-90deg);
    display: block;
}

.context-menu .separator-line.horizontal {
    max-width: calc(100% - 30px);
}

.context-menu.context-aditional{
    width:280px;
    right:20px;
    top:105px;
}

.context-menu.context-aditional .context-scroller{
    max-height: calc(100vh - 215px);
}

.context-aditional .spike{
    right:27px;
}

.context-menu.no-show{
    transform: translateY(-5px);
}

/* -------------------------END OF CONTEXT MENU----------------------- */

/* -------------------------POP OVER MESSAGES----------------------- */

.pop-over-container{
    display:block;
    width:100%;
    height:100%;
    position: absolute;
    background: rgba(var(--pop-over-overlay-background),var(--pop-over-overlay-opacity));
    z-index: 1001;
    padding:15px;
    box-sizing: border-box;
}

.pop-over{
    width: calc(100% - 30px);
    max-width: 500px;
    padding:0px 20px 20px 20px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border-radius: var(--panel-radius);
    background:var(--main-bg-color);
    box-shadow: var(--input-shadow);
    box-sizing: border-box;
    z-index: 1002;
}

.pop-over .separator-line.horizontal{
    max-width:100%;
}

.pop-over .grid{
    position:relative;
    width:100%;
}

.pop-over .pop-over-icon{
    height:55px;
    width:55px;
    position:absolute;
    left:10px;
    top:50%;
    transform: translateY(-50%);
    opacity:0.2;
}

.pop-over .pop-over-icon svg{
    width:100%;
    height:100%;
}

.pop-over .pop-over-title{
    font-size:15px;
    font-weight:100;
    text-align: center;
    width:calc(100% - 130px);
    margin:10px 70px 10px 70px;
}

.pop-over .pop-over-msg{
    width:calc(100% - 130px);
    min-height:35px;
    margin:20px 70px 30px 70px;
    text-align: center;
}

.pop-over .pop-over-msg p{
    margin:0px 0px 10px 0px;
}

.pop-over .pop-over-msg p:last-of-type{
    margin:0px;
}

.pop-over .pop-over-msg p span.highlight{
    font-weight:700;
    font-style: italic;
    color:var(--font-main-active-color);
}

.pop-over button.pop-over-btn{
    margin:0px 10px 0px 10px;
    min-width: 120px;
}

.pop-over .button-holder{
    width:calc(100% - 130px);
    margin:0px 70px 5px 70px;
    display:flex;
    justify-content: center;
}

/* -------------------------END OF POP OVER MESSAGES----------------------- */

/* -------------------------SETTINGS----------------------- */

.main-content .content-settings.open{
    height:100%;
    width:100%;
    left:0px;
    overflow: auto;
    opacity:1;
    visibility:visible;
    transition-property: left, opacity;
    transition-duration: 0.15s;
    transition-timing-function: ease-in;
}

.content-settings h2{
    font-size: 22px;
    margin:25px 0px 25px 0px;
    line-height:initial;
}

.content-settings h3{
    font-size: 17px;
    margin:10px 0px 15px 0px;
    color:var(--font-sub-color);
}

.content-settings .form-holder{
    width:100%;
    position:relative;
    padding:30px 35px 35px 35px;
    box-sizing: border-box;
}

.content-settings fieldset{
    margin:0px 0px 20px 0px;
    padding:0px;
    border:none;
}

.content-settings fieldset .separator-line.horizontal{
    max-width:100%;
}

.content-settings .setting-row{
    width: 100%;
    left: -35px;
    padding: 7px 35px 7px 35px;
    position: relative;
}

.content-settings .setting-row label{
    display: flex;
    width: 100%;
    max-width: 500px;
    min-height: 45px;
    position: relative;
}

.content-settings .setting-row label .col-label{
    flex-grow: 1;
    position: relative;
}

.content-settings .setting-row label .col-label span{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}

.content-settings .setting-row label .col-input{
    flex-grow:0;
    flex-shrink:0;
}

.content-settings .setting-row label .col-input.toggle{
    flex-grow:0;
    flex-shrink:0;
    width:45px;
}

/* -------------------------END OF SETTINGS----------------------- */

.no-show{
    /* display:none !important; */
    height:0px !important;
    width:0px !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
}

[contenteditable="true"]:focus{
/* border:solid 1px red; */
outline:none;
}

@media only screen and (hover: hover) and (pointer: fine) {
    button:hover{
        background-color:rgba(var(--action-color),var(--btn-hover-opac));
    }

    button:active{
        background-color:rgba(var(--action-color),var(--btn-active-opac));
    }

    button.destruct:hover{
        background-color:rgba(var(--action-destruct-color),var(--btn-hover-opac));
    }

    button.destruct:active{
        background-color:rgba(var(--action-destruct-color),var(--btn-active-opac));
    }
    
    .nav-panel button:hover{
        background-color: rgba(var(--nav-item-hover-color),var(--nav-item-hover-opac));
    }
    
    .nav-panel li:hover, .context-menu li:hover{
        background-color: rgba(var(--nav-item-hover-color),var(--nav-item-hover-opac));
        /* cursor: pointer; */
    }
    
    .main-content .menu-drag .drag-handle:hover{
        background-color:rgba(var(--action-color),var(--btn-hover-opac));
    }
    
    .files-grid .item-file:hover{
        background-color: rgba(var(--action-color),var(--btn-hover-opac));
    }
    
    .group-separator-holder:hover .group-separator{
        background-color: rgba(var(--action-color),var(--btn-hover-opac));
    }
  }

@media only screen and (max-width: 500px) {
    :root{
        --nav-panel-width: calc(100vw - 45px);
        --files-min-width:calc(100vw - 5px);
        --files-min-width-list: calc(100vw - 5px);
        --details-pane-with:100vw;
    }
    .main-menu .main-menu-list .main-menu-item.main-item-hamburger{
        margin: 15px 0px 15px 0px;
    }
    .sub-menu .sub-menu-item{
        height:37px;
        margin-bottom: 1px;
        padding:1px 0px 1px 60px;
    }
    .main-content .menu-drag{
        display: none;
    }
    .layout-grid.main-closed .nav-panel{
        width:0px;   
    }
    .mobile-menu-btn{
        display:block;
    } 
    .content-folders .top-panel{
        min-width:100vw;
        margin: 15px 0px 15px 0px;
        padding:0px 5px 0px 5px; 
        grid-template-columns: 45px 1fr 45px;
        grid-template-areas: "Btn-Menu Breadcrumb Btn-More";
        box-sizing: border-box;
    }
    .top-panel .container-actions{
        display: none;
    }
    .top-panel .container-path-nav{
        padding:0px 5px;
        grid-area: Breadcrumb;
        box-sizing: border-box;
    }
    #btn_more{
        grid-area: Btn-More;
    }
    .context-menu.context-aditional {
        width: calc(100vw - 10px);
        max-width: 250px;
        right: 5px;
        top: 70px;
    }
    .context-aditional .spike {
        right: 21px;
    }
    .context-menu.context-aditional .context-scroller {
        max-height: calc(100vh - 185px);
    }
    .context-menu .context-item {
        height: 37px;
        padding:1px 0px 1px 50px;
    }
    .content-folders .bottom-panel {
        padding-left: 10px;
        padding-right: 10px;
    }
    .group-separator {
        padding-left: 10px;
        padding-right: 10px;
    }
    .separator-line.horizontal {
        max-width: calc(100% - 20px);
    }
    .center-panel .files-grid {
        padding:10px;
        box-sizing: border-box;
    }
    .center-panel.view-mode-grid .files-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    .list-view-header-holder {
        padding: 0px 0px 0px 10px;
        box-sizing: border-box;
    }
    .list-view-header .item-file-property:nth-last-child(2) {
        padding-right: 10px;
    }
    .list-view-header-holder .separator-line{
        margin-right: 0px;
        max-width: calc(100% - 10px);
    }
    .center-panel.view-mode-list .files-grid-holder .files-grid-scroller{
        overflow-x:hidden;
    }
    .center-panel.view-mode-list .files-grid .item-file {
        height: 37px;
        padding: 1px 0px 1px 10px;
        box-sizing: border-box;
    }
    .center-panel.view-mode-list .files-grid .item-file .checkbox-holder {
        margin: 5px 5px 5px 0px;
    }
    .center-panel.view-mode-list .files-grid .item-file-property {
        text-align: right;
        padding: 8px 5px;
    }
    .center-panel.view-mode-grid .files-grid .item-file .checkbox-holder {
        left: 1px;
        top: 1px;
    }
    .center-panel.view-mode-tiles .files-grid .item-file {
        padding: 10px 5px 10px 1px;
    }
    .list-view-header .item-file-property {
        padding: 8px 5px;
    }
    .list-view-header .item-file-property.file-date-time {
        width: 60px;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .list-view-header .item-file-property.file-date-time span{
        overflow: hidden;
        white-space:nowrap;
    }
    .list-view-header .item-file-property.file-size {
        text-align: right;
    }
    .list-view-header .item-file-property:last-child {
        display:none;
    }
    .center-panel.view-mode-list .files-grid .item-file-property:nth-last-child(2) {
        padding-right: 10px;
    }
    .center-panel.view-mode-list .files-grid .item-file-property.file-type {
        display:none;
    }
    .center-panel.view-mode-list .files-grid .item-file-property.file-date-time {
        width: 60px;
    }
    .center-panel.view-mode-list .files-grid .item-file-property.file-date-time span:last-child {
        display:none;
    }
    .center-panel .file-details-holder .file-details-scroller {
        background-color: rgba(var(--main-bg-color), 0.8);
    }
    .center-panel .file-details-holder .file-details-scroller {
        transform: translateX(-50%);
        left: 50%;
    }
   
  }