:root {
    /*--hover-blue: #E6F4FD;*/
    --dark-background: #1C1C1E;
    --dark-border-1: #333;
    --dark-border-2: #777;
    --dark-alternate-background: #252525;
    --dark-text-color: #dddddd;
    --dark-hover: #353535;
    --dark-highlight: #333;
    --dark-shadow: rgba(255, 255, 255, .5) 0 0 5px;
    --dark-green: #a4ef99;
    --dark-red: #f3827f;
    --dark-blue: #0065c8;
    --dark-orange: #FA5B0F;
    --dark-text-secondary: #777;
}

body.dark-mode {
    background: var(--dark-background);
    color: var(--dark-text-color);
}

.dark-mode .alternate-rows .alternate:nth-child(odd) {
     background: var(--dark-alternate-background);
}

.dark-mode .alternate-rows .alternate:nth-child(even) {
    background: var(--dark-background);
}

.dark-mode .alternate-rows .alternate-hover:hover {
    background: var(--dark-hover);
}

.dark-mode footer {
    background: var(--dark-background);
    border-top: 1px solid var(--dark-border-1);
}

.dark-mode header {
    background: var(--dark-background);
    box-shadow: rgb(255 255 255 / 50%) -1px 0 5px;
}

.dark-mode nav-link a {
    color: var(--dark-text-color);
}

    .dark-mode nav-link a:hover {
        background: var(--dark-alternate-background);
    }

.dark-mode .sub-nav {
    background: var(--dark-background);
    border: 1px solid var(--dark-border-1);
}

.dark-mode #login-container {
    box-shadow: rgba(255, 255, 255, .5) 0 0 5px;
}

.dark-mode .section {
    border: 1px solid #333;
}

.dark-mode tab-controller .tab-container {
    border-bottom: 1px solid #333;
}

.dark-mode .editable:hover {
    background: var(--dark-hover);
}

.dark-mode pop-up {
    background: var(--dark-background);
}

.dark-mode check-box .check-box:hover {
    background: var(--dark-hover);
}

.dark-mode .check-box.highlight {
    background: var(--dark-highlight);
}

.dark-mode check-box .check-box.checked {
    background: var(--kaizen-blue);
}

.dark-mode modal-element .modal-body {
    box-shadow: rgba(255, 255, 255, .7) 0 0 5px;
    background: var(--dark-background);
}

.dark-mode hover-button {
    /*    box-shadow: rgb(255 255 255 / 50%) 0 0 2px;*/
}

    .dark-mode hover-button:hover {
        box-shadow: rgb(255 255 255 / 75%) 0 0 2px;
    }

.dark-mode textarea, .dark-mode input[type="text"], .dark-mode input[type="date"], .dark-mode input[type="password"] {
    background: var(--dark-alternate-background);
    color: var(--dark-text-color);
    border-color: var(--dark-alternate-background);
}

.dark-mode .header-row {
    border-bottom: 1px solid #444;
}

.dark-mode dropdown-item {
    border-bottom: 1px solid var(--dark-border-1);
}

    .dark-mode dropdown-item:hover {
        background: var(--dark-hover);
    }

.dark-mode pop-up {
    border: 1px solid #333;
    box-shadow: rgb(255, 255, 255) 0 0 3px;
}

.dark-mode edit-address-row {
    border: 1px solid var(--dark-border-1);
}

.dark-mode #account-options {
    background: var(--dark-background);
    border: 1px solid var(--dark-border-1);
}

.dark-mode tax-year-batch-options {
    box-shadow: rgba(255, 255, 255, .7) 0 0 3px;
    background: var(--dark-background);
}

.dark-mode data-table-header-row {
    border-bottom: 1px solid var(--dark-border-1);
}

.dark-mode associate-node .associate-tag.top-level {
    background: var(--dark-alternate-background);
}

.dark-mode associate-node .associate-tag {
    background: var(--dark-alternate-background);
}

.dark-mode associate-node .btn-remove {
    color: lightcoral;
}

.dark-mode associate-node .btn-add-supervisee {
    color: lightgreen;
}

    .dark-mode associate-node .btn-add-supervisee:hover {
        background: var(--dark-hover);
    }