body.dark-mode::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(img/aqua-rooftop-night.png) scroll;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}

body.dark-mode header {
    background: #394048aa;
}

body.dark-mode #backToTop,
body.dark-mode #theme-change {
    background: #556576;
}

body.dark-mode svg#light {
    opacity: 0;
    transform: rotate(15deg);
}

body.dark-mode svg#dark {
    opacity: 1;
    transform: rotate(0deg);
}

body.dark-mode .controls>div {
    background: #394048aa;
}

body.dark-mode .section-title {
    color: #fff;
}

body.dark-mode .sort-btn {
    color: #fff;
    background: #222;
}

body.dark-mode .sort-btn.active {
    background: #556576;
    color: white;
    box-shadow: 0 2px 6px rgba(97, 140, 168, 0.3);
}

body.dark-mode .sort-btn:hover:not(.active) {
    background: #30373c;
}

body.dark-mode .search-type-btn {
    background: #222;
    color: #fff;
}

body.dark-mode .search-type-btn.active {
    background: #556576;
    color: #fff;
}
body.dark-mode .search-input input,
body.dark-mode .search-input select,
body.dark-mode #song-select,
body.dark-mode #difficulty-select {
    border: 2px solid #2a2a2a;
    background: #222;
    color: #ddd !important;
}

.search-input input:focus,
.search-input select:focus {
    border-color: #556576;
    box-shadow: 0 0 0 3px rgba(53, 99, 130, 0.2);
}

body.dark-mode .search-btn {
    background: #556576;
}

body.dark-mode .set_size.partial-view {
    background-color: #556576;
    color: #fff;
}

body.dark-mode .set_size.full-view {
    background-color: #222;
    color: #fff;
}

body.dark-mode .leaderboard_container {
    background: #222a;
    color: #f2f2f2;
}

body.dark-mode .simplebar-scrollbar:before {
    background: #aaa;
}

body.dark-mode th {
    background: #556576;
}

body.dark-mode tbody tr:nth-child(odd) {
    background-color: #cdcdcd10;
}

body.dark-mode td {
    border-bottom: 1px solid #333;
}

body.dark-mode .highlight {
    background: #49473b !important;
    box-shadow: inset 3px 0 0 var(--warning-color);
    position: relative;
}

body.dark-mode .page-link {
    color: #fff;
    background: #222;
    border: 1px solid #2a2a2a;
}

body.dark-mode .page-link.current {
    background: #556576;
    border: 1px solid #556576;
}

body.dark-mode .page-link:hover:not(.disabled):not(.current):not(.ellipsis) {
    background-color: #2a2a2a;
    border-color: #333333;
}

body.dark-mode .loading-overlay{
    background: #222a;
}