/* Shared light/dark appearance for the site-wide menu. */
:root {
    --site-nav-bg: #fff;
    --site-nav-text: #000;
    --site-nav-hover: rgba(0, 0, 0, 0.08);
    --site-nav-border: transparent;
    --site-nav-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    --site-nav-arrow-filter: none;
}

:root:not([data-theme="light"]) {
    --site-nav-bg: #2c2c2c;
    --site-nav-text: #e8e5e0;
    --site-nav-hover: rgba(232, 229, 224, 0.1);
    --site-nav-border: #44413e;
    --site-nav-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
    --site-nav-arrow-filter: invert(1) opacity(0.84);
    --site-nav-panel-bg: #403f3f;
    --site-nav-panel-surface: #343434;
    --site-nav-panel-text: #e8e5e0;
    --site-nav-panel-muted: #9f9a94;
    --site-nav-panel-border: rgba(232, 229, 224, 0.16);
    --site-nav-panel-divider: rgba(232, 229, 224, 0.16);
}

:root .nav-wrapper {
    background-color: var(--site-nav-bg) !important;
    border-bottom: 1px solid var(--site-nav-border) !important;
    box-shadow: var(--site-nav-shadow) !important;
}

.nav-wrapper .letter,
.nav-wrapper .nav-link,
.nav-wrapper .nav-link.active,
.nav-wrapper .username,
.nav-wrapper .menu-bars-icon {
    color: var(--site-nav-text) !important;
}

.nav-wrapper .nav-link:hover i.fas:not(.notes-menu-icon) {
    color: var(--site-nav-text) !important;
}

.nav-wrapper .nav-link:hover::before,
.nav-wrapper .nav-link.active::before {
    background: var(--site-nav-hover) !important;
}

.nav-wrapper .arrow {
    filter: var(--site-nav-arrow-filter);
}

:root:not([data-theme="light"]) .nav-wrapper .more-items {
    background: var(--site-nav-panel-bg) !important;
    border: 1px solid var(--site-nav-panel-border) !important;
    color: var(--site-nav-panel-text) !important;
    box-shadow: 0 12px 28px rgba(18, 15, 13, 0.26) !important;
}

:root:not([data-theme="light"]) .nav-wrapper .dropdown-link,
:root:not([data-theme="light"]) .nav-wrapper .dropdown-link:hover {
    color: var(--site-nav-panel-text) !important;
}

:root:not([data-theme="light"]) .nav-wrapper .dropdown-link:hover::before,
:root:not([data-theme="light"]) .nav-wrapper .dropdown-link.active::before {
    background: var(--site-nav-hover) !important;
}

:root:not([data-theme="light"]) .nav-wrapper .harmonized-link .country-label {
    color: var(--site-nav-panel-muted) !important;
}

:root:not([data-theme="light"]) .nav-wrapper .user-card {
    background: var(--site-nav-panel-bg) !important;
    color: var(--site-nav-panel-text) !important;
}

:root:not([data-theme="light"]) .nav-wrapper .user-info,
:root:not([data-theme="light"]) .nav-wrapper .user-assets {
    border-bottom: 1px solid var(--site-nav-panel-divider) !important;
}

:root:not([data-theme="light"]) .nav-wrapper .user-assets {
    border-top: 1px solid var(--site-nav-panel-divider) !important;
}

:root:not([data-theme="light"]) .nav-wrapper .user-name,
:root:not([data-theme="light"]) .nav-wrapper .asset-amount {
    color: var(--site-nav-panel-text) !important;
}

:root:not([data-theme="light"]) .nav-wrapper .user-id,
:root:not([data-theme="light"]) .nav-wrapper .user-share-reward-icon,
:root:not([data-theme="light"]) .nav-wrapper .vip-expiry-text,
:root:not([data-theme="light"]) .nav-wrapper .no-vip > span {
    color: var(--site-nav-panel-muted) !important;
}

:root:not([data-theme="light"]) .nav-wrapper .vip-info {
    background: var(--site-nav-panel-surface) !important;
    border-bottom: none !important;
}