@media only screen and (width >= 1600px) {
    .name {
        width: 40%;
    }
    
    .size {
        width: 10%;
    }
    
    .date {
        width: 15%;
    }
    
    .owner {
        width: 12%;
    }
    
    .mode {
        width: 15%;
    }
}

@media only screen and (height <= 900px) and (width <= 600px) {
    .fm {
        height: 85%;
    }
    
    .files {
        height: 90%;
    }
}

@media only screen and (height >= 550px) and (width <= 600px) {
    .fm {
        height: 80%;
    }
    
    .files {
        height: 90%;
    }
}

@media only screen and (height <= 750px) and (width <= 600px) {
    .fm {
        height: 75%;
    }
}

@media only screen and (height <= 450px) and (width <= 600px) {
    .fm {
        height: 75%;
    }
}

@media only screen and (height <= 550px) and (width <= 600px) {
    .fm {
        height: 65%;
    }
}

@media only screen and (height <= 550px) and (width <= 550px) {
    .fm {
        height: 70%;
    }
}

@media only screen and (height >= 850px) and (width >= 650px) {
    .fm {
        height: 95%;
    }
}

@media only screen and (height <= 850px) {
    .files {
        height: 90%;
    }
}

@media only screen and (height <= 700px) and (width >= 600px) {
    .fm {
        height: 85%;
    }
    
    .files {
        height: 90%;
    }
}

@media only screen and (height <= 450px) {
    .fm {
        height: 65%;
    }
}

@media only screen and (height <= 640px) and (width <= 360px) {
    .fm {
        height: 75%;
    }
    
    .files {
        height: 90%;
    }
}

/* iphone 6 landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape),
    @media only screen and (max-height: 360px) and (max-width: 640px) {
    .fm {
        height: 55%;
    }
    
    .files {
        height: 60%;
    }
}

@media only screen and (width <= 600px) {
    .panel {
        font-size: 26px;
    }
    
    /* текущий файл под курсором */
    .current-file {
        background-color: var(--color-transparent);
        color: white;
    }
    /* делаем иконки под курсом белыми */
    .current-file a {
        color: white;
    }
    
    .file::before, .file-link::before {
        color: rgb(26 224 124 / 56%);
        content: '\e80d';
    }
    
    .current-file .file::before, .file-link::before {
        color: white;
    }
    
    /* меняем иконки на шрифтовые */
    .mini-icon {
        color           : rgb(246 224 124 / 56%);
        font            : 16px 'Fontello';
        background-image: none;
        padding         : 1%;
    }
    
    .size, .date, .owner, .mode {
        display: none;
    }
    
    .name {
        width: 90%;
        display: inline-block;
    }
    
    .directory::before, .directory-link::before {
        content: '\e807';
    }
    
    .file, .file-link {
        background-image: none;
    }
    
    .archive, .archive-link {
        background-image: none;
    }
    
    .archive::before, .archive-link {
        color: rgb(26 224 124 / 56%);
        content: '\e81d';
    }
    
    /* убираем заголовок */
    .fm-header {
        display: none;
    }
    
    /* выводим заголовки рядом с полями */
    .cmd-button {
        width: 20%;
    }
}

@media only screen and (width >= 601px) and (width <= 785px) {
    .cmd-button {
        width: 13%;
    }
}

@media only screen and (width >= 786px) and (width <= 1155px) {
    .cmd-button {
        width: 10%;
    }
}

@media only screen and (width <= 1155px) {
    .panel {
        width: 98%;
    }
    /* если правая панель не помещаеться - прячем её */
    .panel-right, .cmd-button#f5, .cmd-button#f6 {
        display: none;
    }
}

@media print {
    .panel {
        width: 94%;
        margin: 0;
        padding: 0;
        border: none;
    }
    
    .keyspanel, .panel-right {
        display: none;
    }
    
    .files {
        overflow-y: visible;
    }
    
    .current-file {
        box-shadow: 0 0;
    }
    
    .path-icon {
        display: none;
    }
    
    .mini-icon {
        display: none;
    }
}