html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

html {
    background-color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

section {
    padding: 40px;
    width: calc(100% - 350px);
}

header {
    margin: 5px 0 35px 0;
    display: inline-block;
    background-color: #f1f1f1;
    border-radius: 20px;
}

header > div:first-of-type {
    width: 51px;
    padding: 0;
}

header > div:first-of-type > span {
    align-self: flex-start;
}

header > div:last-of-type {
    margin-right: 0px;
}


.logo {
    scale: .2;
    margin: 7px 0 0 12px;
    width: 128px;
    height: 128px;
    background: url(/spritesheet.webp) no-repeat 0 0;
    transform-origin: top left;
    position: absolute;
}

header div {
    vertical-align: top;
    cursor: pointer;
    background:#fff;
    border: 1px solid #b8b8b8;
    box-shadow: 0 2px 3px rgba(172, 172, 172, 0.17);
    border-radius: 5px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin-right: 10px;
    font-weight: bold;
    font-size: 13px;
}

header div:hover {
    background: #efefef;
}

header > div:only-child {
    border: 1px transparent;
    box-shadow: none;
    pointer-events: none;
    width: auto;
}

header > div:only-child .logo{
    scale: .4;
    position: relative;
    top: -15px;
    left: -12px;
}


table {
    width: 100%;
    table-layout: fixed;
    min-height: calc(100vh - 230px);
}

thead, tbody {
    display: contents;
}


tr {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
}

th, td {
    text-align: left;
    color: #6c6c6c;
}

th {
    padding: 15px 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px;
}

td {
    padding: 22px 10px;
}


.size span {
    padding: 2px 4px;
    background-color: #eaedee;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
    border-radius: 2px;
    position: relative;
    top: -1px;
}

td.name {
    position: relative;
    color: #000;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
}


td.name a {
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 50px;
    max-width: calc(100% - 60px);
    line-height: 1em;
}

td.name::after {
    content: '';
    position: absolute;
    right: 0;
    width: 15%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
}



td.name:hover a {
    text-decoration: underline;
}

td.name div {
    display: inline-block;
    background: url('/spritesheet.webp');
    scale:.25;
    width: 128px;
    height: 128px;
    transform-origin: top left;
    position: absolute;
    top: 13px;
}

table tr:last-child {
    border-bottom: 0;
}

.folder-empty {
    position: absolute;
    top: 200px;
    left: calc(50% - 260px);
    width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.folder-empty div {
    background: url('/spritesheet.webp') -128px -128px;
    scale: .5;
    width: 256px;
    height: 128px;
    transform-origin: center;
}

.folder-empty span {
    text-align: center;
    opacity: .5;
}


#pane {
    position: fixed;
    top: 0;
    right: 0;
    min-height: 100vh;
    background-color: #f2f1f0;
    width: 270px;
}

footer {
    padding: 50px 0 10px 0;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
}

footer a:hover {
    text-decoration: underline;
}