body > .container:first-child {
    margin: 3rem auto;
}

a {
    text-decoration: none;
}

.list-sort {
    background: #ddd;
    border-radius: 1rem;
    padding: .5rem 2rem;
}

.list-sort label {
    display: inline-block;
    margin: 0 1rem 0 0;
}

.file-list {
    list-style: none;
}

.file-list li {
    margin: 1rem 0;
}

.file-list .file-name {
    line-height: 4rem;
    display: inline-block;
    position: relative;
    padding-left: 4rem;
}

.file-list .file-name::before {
    background: no-repeat center center;
    background-size: contain;
    width: 3rem;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.file-list .directory .file-name::before {
    background-image: url(../image/directory.png);

}

.file-list .file .file-name::before {
    background-image: url(../image/file.png);
}

.file-list .other .file-name::before {
    background-image: url(../image/other.png);
}

.file-list .parent .file-name::before {
    background-image: url(../image/parent.png);
}

.file-list .file-link {

}

.file-list .file-date {
    padding: .25rem .5rem;
    background: #1EAEDB;
    border-radius: .5rem;
    font-size: 70%;
    margin: 0 .5rem;
    color: #fff;
}

.file-list .directory .file-date {
}

.file-list .parent .file-date {
    display: none;
}

.file-list .file-size {
    padding: .25rem .5rem;
    background: #24db53;
    border-radius: .5rem;
    font-size: 70%;
    margin: 0 .5rem;
    color: #fff;
}

.file-list .other .file-size,
.file-list .parent .file-size,
.file-list .directory .file-size {
    display: none;
}