:root {
    --header-color: #44546F;
    --header-background-color: #ffffff;
    --header-button-color: #44546F;
    --header-button-background-color: #ffffff;
    --custom-header-link-color: #44546F;
    --custom-header-link-font-size: 0;
    --custom-header-margin: 7px 15px;
}

html:not(.dark-mode) nav {
    background-color: var(--header-background-color);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--header-background-color) 85%, black);
}

html:not(.dark-mode) .navigation-container.placeholder nav {
    background-color: var(--ds-navigation-placeholder-background-color);
}

html:not(.dark-mode) nav.editorToolbarTrue {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--header-background-color) 85%, black);
}

html:not(.dark-mode) ul.header-links li a {
    color: var(--custom-header-link-color) !important;
}

html:not(.dark-mode) nav .button {
    color: var(--header-button-color);
}

html:not(.dark-mode) nav .nav-links .button.account, html:not(.dark-mode) nav .nav-links .button.logout, html:not(.dark-mode) nav .nav-links .button.settings, html:not(.dark-mode) nav .nav-links .button.dashboard, html:not(.dark-mode) nav .nav-links .button.secondary {
    color: var(--header-button-color);
    background-color: var(--header-button-background-color);
}

html:not(.dark-mode) nav .button.secondary:hover {
    color: var(--header-button-hover-color) !important;
    background-color: var(--header-button-hover-background-color);
}

html:not(.dark-mode) .button.active {
    background-color: transparent;
    color: var(--header-color);
    border-bottom: 2px solid var(--header-color);
}

html:not(.dark-mode) .header-app-icon {
    color: var(--header-button-color);
    background-color: var(--header-button-background-color);
}

html:not(.dark-mode) nav .header-app-icon:hover {
    color: var(--header-button-hover-color);
    background-color: var(--header-button-hover-background-color);
}

html:not(.dark-mode) nav .app-link {
    color: inherit;
}

html:not(.dark-mode) nav .app-title {
    color: var(--header-color);
}

html:not(.dark-mode) nav .app-title a {
    color: var(--header-color);
}

html:not(.dark-mode) .nav-links a {
    color: var(--header-color) !important;
}

html:not(.dark-mode) .cke_top {
    background: #fff;
}

html:not(.dark-mode) menu a {
    color: rgb(52, 69, 99);
}

html:not(.dark-mode) menu a.active {
    border-bottom: solid 4px rgb(0, 82, 204);
}

html:not(.dark-mode) menu a:hover {
    color: rgb(0, 82, 204);
    background-color: rgba(222, 235, 255, 0.9);
    box-shadow: transparent 0 0 0 2px;
}

html:not(.dark-mode) menu .menu-button {
    color: rgb(66, 82, 110);
    transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
}

html:not(.dark-mode) .user-section a {
    color: var(--header-color) !important;
}

html:not(.dark-mode) .user-section a.subscribe-button-link {
    color: #0052cc !important;
}

html:not(.dark-mode) .user-name {
    color: rgb(23, 43, 77);
}

html:not(.dark-mode) .user-name:hover {
    background-color: #EBEDF0;
}

html:not(.dark-mode) nav .button {
    color: var(--header-button-color);
}

html:not(.dark-mode) nav .button:hover {
    background-color: transparent;
}

html:not(.dark-mode) nav a {
    color: #4B5D68;
}

html:not(.dark-mode) .header-links > .group-link .group-button, html:not(.dark-mode) .header-links > .link-ungrouped, html:not(.dark-mode) .dropdown-links-toggle {
    color: var(--custom-header-link-color) !important;
    background-color: var(--custom-link-background-color);
}

html:not(.dark-mode) .dropdown-links-menu .group-button, html:not(.dark-mode) .dropdown-links-menu .link-ungrouped {
    color: var(--custom-header-link-color) !important;
    background-color: var(--custom-link-background-color);
}

html:not(.dark-mode) .header-links .group-children, html:not(.dark-mode) .dropdown-links-menu {
    background-color: var(--custom-link-background-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

html:not(.dark-mode) .header-links .group-link {
    background-color: var(--custom-link-background-color);
}

html:not(.dark-mode) .section-link .section-title, html:not(.dark-mode) .section-link .section-links {
    color: var(--custom-header-link-color);
}

@media screen and (min-width: 500px) {
    html:not(.dark-mode) a.link-ungrouped:hover, html:not(.dark-mode) .group-link:hover, html:not(.dark-mode) .group-link .group-button:hover, html:not(.dark-mode) .dropdown-links-toggle:hover {
        color: var(--custom-header-link-hover-color) !important;
        background-color: var(--header-link-hover-background-color);
    }
}

html:not(.dark-mode) .header-links > .group-link .group-button:focus-within,
html:not(.dark-mode) button.group-button:focus-within,
html:not(.dark-mode) .dropdown-links-toggle:focus-within {
    color: var(--custom-header-link-hover-color) !important;
    background-color: var(--header-link-hover-background-color);
}

html:not(.dark-mode) .section-links a:hover,
html:not(.dark-mode) .link-group-div:hover,
html:not(.dark-mode) .link-group:hover,
html:not(.dark-mode) .link-group:hover .link-group-div,
html:not(.dark-mode) .link-section:hover .link-section-div,
html:not(.dark-mode) .link-group-div:hover {
    color: var(--custom-header-link-hover-color) !important;
    background-color: var(--header-link-hover-background-color);
}

html:not(.dark-mode) .link-section-div, html:not(.dark-mode) .link-group-div {
    color: var(--custom-header-link-color);
}

/*DARK MODE STYLES*/

:root {
    --header-color-dark-mode: #d3d7e6;
    --header-background-color-dark-mode: #161a1d;
    --header-button-color-dark-mode: #d3d7e6;
    --header-button-background-color-dark-mode: #161a1d;
    --custom-header-link-color-dark-mode: #d3d7e6;
}

html.dark-mode {
    color-scheme: dark;
    --ds-background-input: #242528;
    --ds-background-input-hovered: #2B2C2F;
    --ds-background-input-pressed: #242528;
    --ds-border-focused: #8FB8F6;
    --ds-link-pressed: #8FB8F6;
    --ds-surface-overlay: #2B2C2F;
    --ds-text: #BFC1C4;
    --ds-text-subtlest: #96999E;
    --ds-text-subtle: #A9ABAF;
}

html.dark-mode nav {
    background-color: var(--header-background-color-dark-mode);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--header-background-color-dark-mode) 85%, white);
}

html.dark-mode nav .app-title {
    color: var(--header-color-dark-mode);
}

html.dark-mode nav .app-title a {
    color: var(--header-color-dark-mode);
    text-decoration: none;
}

html.dark-mode nav .button {
    color: var(--header-button-color-dark-mode);
}

html.dark-mode nav .button.secondary {
    color: var(--header-button-color-dark-mode) !important;
    background-color: var(--header-button-background-color-dark-mode);
}

html.dark-mode nav .button.secondary:hover {
    color: var(--header-button-hover-color-dark-mode) !important;
    background-color: var(--header-button-hover-background-color-dark-mode);
}

html.dark-mode nav .button:active {
    background: rgba(45, 47, 117, 0.6) none repeat scroll 0 0;
}

html.dark-mode .active {
    background-color: rgba(45, 47, 117, 0.6);
}

html.dark-mode .button.active {
    background-color: transparent;
    color: var(--header-color-dark-mode);
    border-bottom: 2px solid var(--header-color-dark-mode) !important;
}

html.dark-mode .user-section .header-app-icon {
    color: var(--header-button-color-dark-mode);
    background-color: var(--header-button-background-color-dark-mode);
}

html.dark-mode nav .user-section .header-app-icon:hover {
    color: var(--header-button-hover-color-dark-mode) !important;
    background-color: var(--header-button-hover-background-color-dark-mode);
}

html.dark-mode section.info, html.dark-mode section.error {
    background-color: #151515;
    color: #ffffff;
}

html.dark-mode ul.header-links li a {
    color: var(--custom-header-link-color-dark-mode) !important;
}

html.dark-mode .user-section a.subscribe-button-link {
    color: rgb(123, 176, 255) !important;
}


@media screen and (max-width: 500px) {
    html.dark-mode .nav-mobile, html.dark-mode .nav-mobile .nav-links, html.dark-mode .nav-mobile .nav-mobile-options {
        background-color: #1a1a1a;
    }
}

html.dark-mode .header-links > .group-link .group-button,
html.dark-mode .header-links .group-button,
html.dark-mode .header-links .link-ungrouped,
html.dark-mode .dropdown-links-toggle {
    color: var(--custom-header-link-color-dark-mode) !important;
    background-color: var(--custom-link-background-color-dark-mode);
}

html.dark-mode .header-links .group-children, html.dark-mode .dropdown-links-menu {
    background-color: var(--custom-link-background-color-dark-mode);
}

html.dark-mode .header-links .group-link {
    background-color: var(--custom-link-background-color-dark-mode);
}

html.dark-mode .section-link .section-title, html.dark-mode .section-link .section-links {
    color: var(--custom-header-link-color-dark-mode);
}

html.dark-mode .separator {
    border-bottom: 1px solid var(--divider-line-color-dark-mode);
}

html.dark-mode a.link-ungrouped:hover, html.dark-mode .group-link:hover, html.dark-mode .group-link .group-button:hover, html.dark-mode .dropdown-links-toggle:hover {
    color: var(--custom-header-link-hover-color-dark-mode) !important;
    background-color: var(--header-link-hover-background-color-dark-mode);
}

html.dark-mode .header-links > .group-link .group-button:focus-within,
html.dark-mode button.group-button:focus-within,
html.dark-mode .dropdown-links-toggle:focus-within {
    color: var(--custom-header-link-hover-color-dark-mode) !important;
    background-color: var(--header-link-hover-background-color-dark-mode);
}

html.dark-mode .nav-links a {
    color: var(--custom-header-link-color-dark-mode) !important;
}

html.dark-mode .section-links a:hover,
html.dark-mode .link-group-div:hover,
html.dark-mode .link-group:hover,
html.dark-mode .link-group:hover .link-group-div,
html.dark-mode .link-section:hover .link-section-div,
html.dark-mode .link-group-div:hover {
    color: var(--custom-header-link-hover-color-dark-mode) !important;
    background-color: var(--header-link-hover-background-color-dark-mode);
}

html.dark-mode .link-section-div, html.dark-mode .link-group-div {
    color: var(--custom-header-link-color-dark-mode);
}