/*
 * Dark theme: the toggle and hand corrections on top of theme-dark.generated.css.
 * Everything dark is scoped under html.theme-dark, set from localStorage by the
 * inline script in inject.common_header.tpl before first paint.
 */

.infobox .theme-toggle-box {
    padding: 8px 10px;
}

@media (max-width: 767px) {
    .infobox div {
        padding: 10px 6px;
    }

    .infobox .theme-toggle-box {
        padding: 8px 4px;
    }
}

.theme-toggle {
    display: block;
    width: 24px;
    height: 24px;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #e8eff7;
    cursor: pointer;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.theme-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
}

.theme-toggle .theme-toggle-sun,
html.theme-dark .theme-toggle .theme-toggle-moon {
    display: none;
}

html.theme-dark .theme-toggle .theme-toggle-sun {
    display: block;
}

html.theme-dark {
    color-scheme: dark;
}

html.theme-dark .panel-form {
    padding: 2px 4px;
    border-radius: 3px;
    background-color: #c3cedb;
}

html.theme-dark nav.breadcrumb {
    background-image: linear-gradient(to right, hsl(209, 45%, 34%), hsl(209, 30%, 18%));
}

html.theme-dark .breadcrumb li a {
    color: #ffffff;
    background-color: hsl(209, 45%, 28%);
}

html.theme-dark .breadcrumb li a::after {
    border-left-color: hsl(209, 45%, 28%);
}

html.theme-dark .breadcrumb li:nth-child(2) a {
    background-color: hsl(209, 45%, 32%);
}

html.theme-dark .breadcrumb li:nth-child(2) a::after {
    border-left-color: hsl(209, 45%, 32%);
}

html.theme-dark .breadcrumb li:nth-child(3) a {
    background-color: hsl(209, 45%, 36%);
}

html.theme-dark .breadcrumb li:nth-child(3) a::after {
    border-left-color: hsl(209, 45%, 36%);
}

html.theme-dark .breadcrumb li:nth-child(4) a {
    background-color: hsl(209, 45%, 40%);
}

html.theme-dark .breadcrumb li:nth-child(4) a::after {
    border-left-color: hsl(209, 45%, 40%);
}

html.theme-dark .breadcrumb li:nth-child(5) a {
    color: #ffffff;
    background-color: hsl(209, 45%, 44%);
}

html.theme-dark .breadcrumb li:nth-child(5) a::after {
    border-left-color: hsl(209, 45%, 44%);
}

html.theme-dark .breadcrumb li:nth-child(6) a {
    color: #ffffff;
    background-color: hsl(209, 45%, 47%);
}

html.theme-dark .breadcrumb li:nth-child(6) a::after {
    border-left-color: hsl(209, 45%, 47%);
}

html.theme-dark .breadcrumb li a:hover {
    background-color: hsl(209, 50%, 52%);
}

html.theme-dark .breadcrumb li a:hover::after {
    border-left-color: hsl(209, 50%, 52%) !important;
}

html.theme-dark {
    --menu-level-1: #3d6187;
    --menu-level-2: #4a719b;
    --menu-level-3: #5781ad;
    --menu-dropdown: #262f39;
}

html.theme-dark #header .pages li:hover,
html.theme-dark #header .pages ul,
html.theme-dark #header .mlibrary li:hover,
html.theme-dark #header .mlibrary ul,
html.theme-dark #d_user_menu .user_menu li:hover,
html.theme-dark #d_user_menu .user_menu ul,
html.theme-dark #society_r_block .society_r_menu li:hover,
html.theme-dark #society_r_block .society_r_menu ul {
    background-color: var(--menu-level-1);
}

html.theme-dark #header .pages ul li:hover,
html.theme-dark #header .pages ul ul,
html.theme-dark #header .pages ul.blogs li:hover,
html.theme-dark #header .pages ul.blogs ul li:hover,
html.theme-dark #header .mlibrary ul li:hover,
html.theme-dark #header .mlibrary ul ul,
html.theme-dark #d_user_menu .user_menu ul li:hover,
html.theme-dark #d_user_menu .user_menu ul ul,
html.theme-dark #society_r_block .society_r_menu ul li:hover,
html.theme-dark #society_r_block .society_r_menu ul ul {
    background-color: var(--menu-level-2);
}

html.theme-dark #header .pages ul ul li:hover,
html.theme-dark #header .mlibrary ul ul li:hover,
html.theme-dark #d_user_menu .user_menu ul ul li:hover,
html.theme-dark #society_r_block .society_r_menu ul ul li:hover {
    background-color: var(--menu-level-3);
}

html.theme-dark #header .pages ul.blogs {
    background-color: var(--menu-dropdown);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

html.theme-dark #header .pages ul li:hover > a,
html.theme-dark #header .pages ul.blogs li:hover > a,
html.theme-dark #header .mlibrary ul li:hover > a,
html.theme-dark #d_user_menu .user_menu ul li:hover > a,
html.theme-dark #society_r_block .society_r_menu ul li:hover > a {
    color: #ffffff;
}