.folder {
    position: relative;
    font-size: 0;
}
.folder:not(:first-child) {
    margin-top: 8px;
}
.folder > * {
    display: inline-block;
}
.folder > p {
    color: white;
    text-shadow: 2px 2px 0 black;
    font-size: 32px;
    vertical-align: center;
}
.folder > button {
    position: absolute;
    font-size: 24px;
    top: 8px;
    right: 8px;
}
.file-tree {
    display: none;
    border-top: 0;
    margin-top: -8px;
    border-radius: 0 0 8px 8px;
}
.padding {
    height: 8px;
}
.files {
    padding: 4px;
}
.file {
    width: calc(100% - 8px);
    padding: 4px;
    border-radius: 8px;
    font-size: 0;
    background-color: black;
}
.file:not(:first-child) {
    margin-top: 4px;
}
.file > div > * {
    color: white;
    text-shadow: 2px 2px black;
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    overflow: hidden;
}
.file > div > a {
    color: #ff6;
    text-decoration: none;
    cursor: pointer;
}

.file-name {
    width: 50%;
}
.file-author {
    color: gray !important;
    width: 30%;
}
.file-reference {
    text-align: center;
    width: 10%;
}
.file-desc {
    width: 80%;
}
.file-client {
    text-align: center;
    width: 10%;
}
.file-server {
    text-align: center;
    width: 10%;
}


@media screen and (max-width: 767px) {
    .file > div > * {
        font-size: 2vw;
    }
}
@media screen and (max-width: 470px) {
    .folder {
        text-align: center;
        padding-bottom: 10px;
    }
    .folder > button {
        position: static;
        display: block;
        margin: auto;
    }
}