:root {
    --whiskey-accent: #0cd2d7;
    --whiskey-radius-large: 0;
}

.main {
    float: none;
    width: 100%;
    margin: 0 0 2.5em;
    overflow: hidden;
}

#theFiles,
#theFiles-webp,
#fileList,
#fileList-webp,
#fileControls,
#fileControls-webp {
    float: none;
    width: 100%;
}

#uploadDrop,
#uploadDrop-webp {
    background: var(--panel);
    border: 1px dashed var(--hairline);
    color: var(--ink);
}

#uploadDrop button,
#uploadDrop-webp button {
    background: var(--color-button);
    color: #000;
    border-radius: 0;
}

#uploadDrop button svg,
#uploadDrop-webp button svg {
    color: #000;
}

#uploadDrop.highlight,
#uploadDrop-webp.highlight {
    border-color: var(--color-button);
}

#fileList,
#fileList-webp {
    border: 1px solid var(--hairline);
    background: var(--panel);
}

#fileList ul li,
#fileList-webp ul li {
    border-bottom-color: var(--hairline);
}

#progressbar,
#progressbar-webp {
    background: var(--ground);
}

#progressbar span,
#progressbar-webp span {
    background: var(--color-button);
}

.file_controls button,
.whiskey-compressor-webp .file_controls button,
.file_download button,
#recompress {
    font-family: var(--font-sans);
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: 0;
}

.whiskey-compressor-webp .file_controls button:hover {
    color: var(--ink);
}

.file_download button {
    background: var(--color-button);
    color: #000;
    border-color: var(--color-button);
}

#compress_settings,
#compress_settings-webp {
    background: var(--panel);
    border: 1px solid var(--hairline);
    color: var(--ink);
}

#close_settings,
#close_settings-webp {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--ink);
    padding: 0;
    width: 24px;
    height: 24px;
    line-height: 1;
}

#fileList_footer,
#fileList_footer-webp {
    color: var(--ink);
}

.fileList_footer__beforeAfter,
.fileList_footer__totalSaving {
    font-family: var(--font-monospace);
}

#compare {
    color: var(--ink);
}

.compare__inner {
    background: var(--panel);
}

.compressor-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    margin: 0 0 2em;
}
.compressor-stats > div {
    background: var(--panel);
    padding: 1.25em 1.5em;
}
.compressor-stats strong {
    display: block;
    font-family: var(--font-monospace);
    font-size: 1.75rem;
    font-weight: 500;
    margin-bottom: 0.25em;
}
.compressor-stats span {
    opacity: 0.62;
    font-size: 0.8125rem;
}
@media (max-width: 640px) {
    .compressor-stats {
        grid-template-columns: 1fr;
    }
}