.app {
    font-family: monospace;
}

.app>h1 {
    height: 36px;
    width: 100%;
    font-size: 24px;
    font-weight: bold;
    background-image: url(../img/share.png);
    background-position: 0px center;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    padding: 5px 0 0 40px;
    box-sizing: border-box;
}

.app>h1 .version {
    font-size: 10px;
    color: gray;
}

.app a {
    color: black;
    font-weight: bold;  
}

.app {
    max-width: 1200px;
    margin: 0 auto 0 auto;
}

.app-header {
    border-bottom: 2px solid #aaa;
    padding-bottom: 10px;
}

.app-header-top {
    display: flex;
    justify-content: space-between;
}

.app-header-bottom {
    display: flex;
    justify-content: flex-end;
}

#controls {
    display: flex;
    justify-content: flex-end;
}

.control-item {
    padding-left: 20px;
}

#dir-context {
    height: 32px;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    background-image: url("/svgfilter/img/folder-open-regular.svg?find=currentColor&replace=rgb(255,105,76)");
    background-position: 0px center;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    padding: 8px 0 0 40px;
    box-sizing: border-box;
}

#disk-info {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

div#disk-info>div {
    color: #aaa;
    white-space: nowrap;
    padding-left: 10px;
}

.dir-container {
    display: flex;
    justify-content: space-between;
    height: 24px;
    width: 100%;
    font-size: 12px;
    background-image: url("/svgfilter/img/folder-regular.svg?find=currentColor&replace=rgb(255,105,76)");
    background-position: 0px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-top: 4px;
    box-sizing: border-box;
}

.dir-container:hover {
    background-color: #eee;
}


.dir {
    flex: 1;
    padding: 2px 20px 2px 20px;
    font-weight: bold;
    cursor: pointer;
}

.dir-container>.img-buttons {
    flex: none;
    width: 150px;
    text-align: right;
    padding: 0;
}

.file-container, .file-container-token {
    display: flex;
    justify-content: space-between;
    height: 24px;
    width: 100%;
    font-size: 12px;
    background-image: url(/svgfilter/img/file-regular.svg?find=currentColor&replace=black);
    background-position: 8px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-top: 4px;
    box-sizing: border-box;
}

.file-container-token {
    background-image: url(/svgfilter/img/file-download-solid.svg?find=currentColor&replace=green);
}

.file-container:hover {
    background-color: #eee;
}
.file {
    flex: 1;
    padding: 2px 20px 2px 28px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.filesize, .filedate {
    flex: none;
    width: 120px;
    padding: 2px 20px 2px 0;
    color: gray;
    text-align: right;
}

.file-container>.img-buttons, .file-container-token>.img-buttons {
    flex: none;
    width: 150px;
    text-align: right;
    padding: 0;
}

#fileupload {
    margin-top: 10px;
    background-image: url("/svgfilter/img/upload-solid.svg?find=currentColor&replace=rgb(255,205,176)");
    background-repeat: no-repeat;
    background-position: 94% center;
    background-size: 10%;
}

#fileupload .dz-message {
    font-size: 16px;
    font-weight: bold;
}

#file-editor {
    padding-top: 10px;
}
#file-editor .file-editor-title {
    font-weight: bold;
}
#file-editor-content, #file-viewer-content {
    width: 100%;
    height: 300px;
    font-family: monospace;
    font-size: 10px;
    border: 2px solid rgb(255,105,76);
    border-radius: 2px;
    margin-bottom: 4px;
    box-sizing: border-box;
}
#file-viewer-content {
    overflow-y: auto;
}
.file-editor-controls, .file-viewer-controls {
    display: flex;
    justify-content: space-between;
}
.file-editor-controls button, .file-viewer-controls button {
    width: 100%;
}

/* Buttons */
.img-buttons{
    white-space: nowrap;
}
.img-buttons button {
    width: 24px;
    height: 24px;
    position:relative;
}

.img-buttons button>img {
    width: 16px;
    height: 16px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-8px;
    margin-top:-8px;
}

@media screen and (max-width: 600px) {
    h1 { font-size: 20px }
    h1 .version { display: none }
    h1 .user { display: none }
    #disk-info .total { display: none }
    #disk-info .used { display: none }
    .file { width: 280px; }
    .filesize, .filedate { display: none }
    .dir { text-overflow: ellipsis; width: 280px; overflow: hidden; white-space: nowrap;  }
    
}

@media screen and (max-width: 400px) {
    /* overwrite */
    .file { width: 220px; }
    .dir { text-overflow: ellipsis; width: 220px; overflow: hidden; white-space: nowrap;  }
    /* new */
    .app-header-top { display: block }
    .app-header-bottom { display: block }
    #disk-info { margin-top: 0px }
    #controls { justify-content: space-between }
    #controls .control-item { padding-left: 0px; }
}