.main {
    width: 80%;
    margin: auto;
}

.hljs {
    background: #FFFFFF;
}

.files {
    border: 1px solid #DDDDDD;
    border-bottom: initial;
    margin: 15px;
    border-radius: 5px;
}

.files a {
    display: block;
    padding: 9px 9px 9px 30px;
}

.files .blob, .files .tree, .files .parent_folder {
    position: relative;
    border-bottom: 1px solid #dddddd;
}

.files .blob.active, .files .blob:hover, .files .tree:hover, .files .parent_folder:hover {
    background: #f0f0f0;
}

.files .tree::before, .files .blob::before {
    content: "\f07b";
    font-family: Font Awesome\ 5 Free;
    position: absolute;
    left: 0px;
    width: 7px;
    padding: 9px;
    color: #007bff;
}

.files .blob::before {
    content: "\f15b";
}

.paths {
    margin: 15px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 8px
}

.paths a {
    color: #000000;
}

.paths .path::after {
    content: '/';
    color: #dddddd;
    padding-left: 4px;
}


@media (max-width: 640px) {
    .main {
        width: 100%;
    }
    .container-fluid {
        padding: 0;
    }
    .files {
        margin: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}