html[data-bs-theme="light"],
:root {
    --navbar-bg: rgb(247, 248, 249);
    --background: rgba(255, 255, 255, 0.9);
    --sort-both: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 9'%3E%3Cpath d='m14.5 5-4 4-4-4zm0-1-4-4-4 4z'/%3E%3C/svg%3E");
    --sort-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 4'%3E%3Cpath d='m14.5 0-4 4-4-4z'/%3E%3C/svg%3E");
    --sort-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 4'%3E%3Cpath d='m6.5 4 4-4 4 4z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root {
        --navbar-bg: rgb(47, 51, 56);
        --background: rgba(47, 51, 56, 0.9);
        --sort-both: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 9'%3E%3Cpath fill='white' d='m14.5 5-4 4-4-4zm0-1-4-4-4 4z'/%3E%3C/svg%3E");
        --sort-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 4'%3E%3Cpath fill='white' d='m14.5 0-4 4-4-4z'/%3E%3C/svg%3E");
        --sort-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 4'%3E%3Cpath fill='white' d='m6.5 4 4-4 4 4z'/%3E%3C/svg%3E");
    }
}

html[data-bs-theme="dark"] {
    --navbar-bg: rgb(47, 51, 56);
    --background: rgba(47, 51, 56, 0.9);
    --sort-both: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 9'%3E%3Cpath fill='white' d='m14.5 5-4 4-4-4zm0-1-4-4-4 4z'/%3E%3C/svg%3E");
    --sort-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 4'%3E%3Cpath fill='white' d='m14.5 0-4 4-4-4z'/%3E%3C/svg%3E");
    --sort-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 4'%3E%3Cpath fill='white' d='m6.5 4 4-4 4 4z'/%3E%3C/svg%3E");
}

/* ICONS */
.theme-icon-when-auto,
.theme-icon-when-dark,
.theme-icon-when-light {
    display: none;
}

html[data-theme="auto"] .theme-icon-when-auto {
    display: block;
}

html[data-theme="dark"] .theme-icon-when-dark {
    display: block;
}

html[data-theme="light"] .theme-icon-when-light {
    display: block;
}

.unofficial td,
.unofficial th {
    color: var(--bs-secondary-color);
}