✏️ Editing: _dark-skin.scss

// DARK STYLE 
$dark-body-bg: $darker; 
$dark-body-bg-dark: darken($darker, 6%); 
$dark-body-bg-light: darken($darker, 2%);
$dark-card-bg: darken($dark, 6%);
$dark-border-color: lighten($darker, 8%);
$dark-border-light: $light-800;

// Dark Mode
body.dark-mode {
    background: $dark-body-bg !important;
    color: $base-300;
    &.bg-lighter, &.bg-light {
        background: $dark-body-bg-light !important;
    }
    &.nk-body.ui-softy, &.nk-body.ui-shady{
        background: $dark-body-bg !important;
    }
}
.dark-mode {
    .logo{
        &-dark{
            opacity: 0;
        }
        &-light{
            opacity: 1;
        }
    }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, 
    .lead-text, .dropdown-title, pre {
        color: $white;
    }
    .text-base, .text-body, .link-text {
        color: $base-300 !important;
    }
    .text-secondary, .icon[class*="bg-secondary-dim"], .user-avatar[class*="-light"], .icon[class*="bg-light"] {
        color: $base-400 !important;
    }
    .text-dark {
        color: $white !important;
    }
    // .text-white {
    //     color: $light-900 !important;
    // }
    .text-light, .user-avatar[class*="-dark"] {
        color: $light-500 !important;
    }
    .text-lighter {
        color: $light-600 !important;
    }
    .text-indigo {
        color: lighten($indigo, 25%) !important;
    }
    .bg-light {
        background-color: $dark-body-bg-light !important;
    }
    .bg-lighter {
        background-color: lighten($dark-body-bg-light, 2%) !important;
    }
    .table-striped tbody tr:nth-of-type(odd) {
        background-color: $darker !important;
    }
    .bg-white{
        background-color: $dark-card-bg !important;
    }
    .bg-transparent.bg-transparent{
        background-color: transparent !important;
    }

$bg-mix: $dark-card-bg;
    $bg-colors: 
    "dark"              $light-100,
    "blue-dim"          mix($blue, $bg-mix, 15%),
    "azure-dim"         mix($azure, $bg-mix, 15%),
    "indigo-dim"        mix($indigo, $bg-mix, 15%),
    "purple-dim"        mix($purple, $bg-mix, 15%),
    "pink-dim"          mix($pink, $bg-mix, 15%),
    "orange-dim"        mix($orange, $bg-mix, 15%),
    "teal-dim"          mix($teal, $bg-mix, 15%),
    // for bootstrap
    "primary-dim"       mix($accent-color, $bg-mix, 15%),
    "success-dim"       mix($success, $bg-mix, 15%),
    "info-dim"          mix($info, $bg-mix, 15%),
    "warning-dim"       mix($warning, $bg-mix, 15%),
    "danger-dim"        mix($danger, $bg-mix, 15%),
    "secondary-dim"     mix($secondary, $bg-mix, 20%),
    "dark-dim"          mix($dark, $bg-mix, 15%),
    "gray-dim"          mix($gray-500, $bg-mix, 15%),
    "btc-dim"          mix($brand-color-bitcoin, $bg-mix, 15%),
    "eth-dim"          mix($brand-color-ethereum, $bg-mix, 15%);

@each $name, $background in $bg-colors {
        .bg-#{$name} {
            background-color: $background !important;
        }
    }

$alert-mix: $dark-card-bg;
    $alerts-dark:
    "primary"     $primary                  mix($primary, $alert-mix, 15%),
    "secondary"   lighten($secondary, 35%)  mix($secondary, $alert-mix, 20%),
    "success"     $success                  mix($success, $alert-mix, 15%),
    "warning"     $warning                  mix($warning, $alert-mix, 15%),
    "info"        $info                     mix($info, $alert-mix, 15%),
    "danger"      $danger                   mix($danger, $alert-mix, 15%),
    "gray"        $gray-400                 mix($gray-500, $alert-mix, 15%),
    "dark"        $dark                     mix($dark, $alert-mix, 15%),
    "light"       $light-100                mix($light-500, $alert-mix, 15%);

@each $name, $color, $background in $alerts-dark {
        .alert-#{$name} {
            color: $color;
            background-color: $background;
            border-color: $background;

hr {
                border-top-color: $background;
            }

.alert-link {
                color: darken($color, 10%);
            }
        }
        .alert-fill.alert-#{$name}{
            color: color-yiq($color);
            background: $color;
            .alert-link {
                color: color-yiq($color);
            }
        }
        .alert-pro.alert-#{$name}{
            border-color: $color;
        }
    }

$dim-mix: $dark-card-bg;
    $dim-badge: map-merge(
        $theme-colors,
        (
            "secondary":   lighten($secondary, 35%),
            "dark":        $light,
            "light":       $light-400,
            "lighter":     $light-500
        )
    );

@each $name, $color in $dim-badge {
        .badge-dim.badge-#{$name} {
            color: $color;
            background-color: mix($color, $dim-mix, 15%);
            border-color: mix($color, $dim-mix, 15%);
        }
        .badge-dim.badge-outline-#{$name} {
            color: $color;
            background-color: mix($color, $dim-mix, 15%);
            border-color: mix($color, $dim-mix, 40%);
        }
    }

.badge-outline-secondary, .badge-dot.badge-dark, .badge-dot.badge-secondary {
        color: $light-400;
    }

.badge-outline-dark {
        color: $light;
        border-color: $light;
    }
    .badge-outline-light {
        color: $light-400;
        border-color: $light-700;
    }
    .badge-dot.badge-dark, .badge-dot.badge-light {
        background-color: transparent;
    }
    .badge-dot.badge-light {
        color: $light-500;
    }

.badge-light, .code-block .btn {
        color: $light;
        background: $light-700;
        border-color: $light-700;
    }
    .badge-dark {
        color: $dark;
        background: $light-200;
        border-color: $light-200;
    }

// Buttons 
    .btn-light {
        color: $light;
        background: $light-700;
        border-color: $light-700;
        &:not(:disabled):not(.disabled) {
            &:hover, &:focus, &.focus, &:active, &.active {
                background: lighten($light-700, 8%);
                border-color: lighten($light-700, 8%);
                color: $light;
            }
        }
    }
    .btn-dark {
        color: $dark;
        background: $light-200;
        border-color: $light-200;
        &:not(:disabled):not(.disabled) {
            &:hover, &:focus, &.focus, &:active, &.active {
                background: $white;
                border-color: $white;
                color: $dark;
            }
        }
    }
    .btn-outline-dark {
        border-color: $light-200;
        color: $light-200;
        &:not(:disabled):not(.disabled):hover {
            background: $light-200;
            color: $dark;
        }
    }
    .btn-outline-secondary {
        border-color: lighten($secondary, 20%);
        color: lighten($secondary, 20%);
        &:not(:disabled):not(.disabled):hover {
            background: lighten($secondary, 20%);
            color: $white;
        }
    }
    .btn-outline-light {
        border-color: $light-600;
        color: $light-400;
        &:not(:disabled):not(.disabled):hover {
            background: $light-600;
            color: $white;
        }
    }

$dim-mix: $dark-card-bg;
    $dim-btns:
        "primary"     $primary                  mix($primary, $dim-mix, 18%),
        "secondary"   lighten($secondary, 45%)  mix($secondary, $dim-mix, 25%),
        "success"     $success                  mix($success, $dim-mix, 18%),
        "warning"     $warning                  mix($warning, $dim-mix, 18%),
        "info"        $info                     mix($info, $dim-mix, 18%),
        "danger"      $danger                   mix($danger, $dim-mix, 18%),
        "gray"        $gray-400                 mix($gray-500, $dim-mix, 18%),
        "dark"        $light-200                mix($light-400, $dim-mix, 18%),
        "light"       $light-100                mix($light-500, $dim-mix, 18%),
        "lighter"     $light-400                mix($light-500, $dim-mix, 18%);

@each $name, $color, $background in $dim-btns {
        .btn-dim.btn-#{$name} {
            color: $color;
            background-color: $background;
            border-color: transparent;
            &:not(:disabled):not(.disabled):hover {
                color: lighten($color, 10%);
                background-color: lighten($background, 7%);
                border-color: lighten($background, 7%);
            }
        }
    }

$dim-outline-btns:
    "primary"     $primary                       mix($primary, $dim-mix, 18%)            mix($primary, $dim-mix, 35%),
    "success"     $success                       mix($success, $dim-mix, 18%)            mix($success, $dim-mix, 35%),
    "warning"     $warning                       mix($warning, $dim-mix, 18%)            mix($warning, $dim-mix, 35%),
    "info"        $info                          mix($info, $dim-mix, 18%)               mix($info, $dim-mix, 35%),
    "danger"      $danger                        mix($danger, $dim-mix, 18%)             mix($danger, $dim-mix, 35%),
    "secondary"   lighten($secondary, 25%)       mix($secondary, $dim-mix, 25%)          mix($secondary, $dim-mix, 70%),
    "gray"        $gray-400                      mix($gray-500, $dim-mix, 18%)           mix($light-500, $dim-mix, 35%),
    "dark"        $light-200                     mix($light-400, $dim-mix, 18%)          mix($light-400, $dim-mix, 35%),
    "light"       $light-500                     mix($light-600, $dim-mix, 18%)          mix($light-500, $dim-mix, 35%);

@each $name, $color, $background, $border in $dim-outline-btns {
        .btn-dim.btn-outline-#{$name} {
            color: $color;
            background-color: $background;
            border-color: $border;
            &:not(:disabled):not(.disabled):hover {
                color: color-yiq($color);
                background-color: $color;
                border-color: $color;
            }
        }
        .btn-white.btn-outline-#{$name}, .btn-trans.btn-outline-#{$name} {
            &:not(.btn-dim):not(:disabled):not(.disabled):hover {
                color: $color;
                background: $background;
            }
        }
    }

.btn-dim.btn-outline-light:not(:disabled):not(.disabled):hover, 
    .btn-white.btn-outline-light:not(:disabled):not(.disabled):hover, 
    .btn-dim.btn-outline-light:not(:disabled):not(.disabled):active,
    .btn-white.btn-outline-light:not(:disabled):not(.disabled):active,
    .show > .btn-white.btn-outline-light.dropdown-toggle {
        background: $light-600;
        border-color: $light-600;
        color: $white;
    }

.btn-white, .btn-white.btn-dim, .btn-white.btn-outline-light {
        background: $dark-card-bg;
    }
    .btn-outline-light:focus, .btn-outline-light.focus {
        box-shadow: 0 0 0 $btn-focus-width rgba($white, .07) !important
    }

.border,.border-bottom, .border-top, .border-left, .border-right,
    .dropdown-inner + .dropdown-inner,.dropdown-head,.dropdown-foot,
    .preview-hr,.select2-container--default .select2-selection--single,
    .ql-picker-options,.dropzone,
    .select2-container--default .select2-selection--multiple,.select2-dropdown,
    .select2-container--default .select2-search--dropdown .select2-search__field,
    .ui-timepicker-standard,.ql-toolbar,.ql-container,.note-editor,.note-toolbar,
    .tox .tox-menubar,.tox-toolbar-overlord,.tox-tinymce,.tox .tox-toolbar__group:not(:last-of-type),
    .tox .tox-statusbar,.tox .tox-menu,.tox-toolbar,.tox-editor-header,
    .tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-toolbar__overflow,
    .tox .tox-collection--list .tox-collection__group,
    .note-btn-group .note-btn,.note-statusbar,.nk-code-preview-box,.swal2-footer,
    .example-border-all > div, .btn-toolbar-sep, .page-link,
    .table th, .table td, .table-bordered, .table-bordered th, .table-bordered td,.datatable-wrap,.nk-tb-head .nk-tb-col,
    .list-group-item,.modal-header,.modal-footer,.popover,.popover-header,
    .tagify__tag > div::before ,.tagify__tag:hover:not([readonly]) div::before,
    .nk-tb-item:not(:last-child) .nk-tb-col, .nk-activity-item:not(:last-child), 
    .nk-support-item:not(:last-child), .card-inner-group .card-inner:not(:last-child),
    .card-aside,.nav-tabs,.divider,.data-item:not(:last-child),.nk-footer,
    .nav-switch-s2 .nav-link, .language-list li:not(:last-child) .language-item, .user-avatar-multiple .user-avatar {
        border-color: $dark-border-color !important;
    }

.card, .code-block, .alert-pro,.modal-content,.toast,.toastr {
        box-shadow: 0px 1px 3px 0px rgba($black, 0.4);
    }
    .toast-header {
        color: $base-400;
    }
    .toast, .toast-header {
        border-color: lighten($dark-border-color, 2%);
        background: lighten($dark-card-bg, 2%);
    }

.table-active, .table-active > th, .table-active > td,
    .code-block .prettyprint,.list-group-item,.example-spacing-pd > div > span,
    .custom-file-label::after,.ql-picker-options,.data-more:before,.search-wrap,.form-control,.input-mail,.dropzone,
    .ui-state-hover,.note-editor.note-frame .note-statusbar, 
    .note-editor.note-airframe .note-statusbar,.swal2-popup, 
    .select2-container--default .select2-results__option--highlighted[aria-selected],
    .select2-container--default .select2-results__option[aria-selected=true],
    .select2-container--default .select2-selection--multiple .select2-selection__choice,
    .select2-container--default .select2-search--dropdown .select2-search__field,
    .example-width > div, .example-height > div, .example-border > div, .example-spacing > div{
        background: $dark-body-bg;
    }
    .tox .tox-tbtn:hover,
    .tox .tox-collection--list .tox-collection__item--active,
    .tox .tox-mbtn--active,.tox .tox-mbtn:focus:not(:disabled),
    .tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active),
    .tox .tox-collection--list .tox-collection__item--enabled {
        background: darken($dark-body-bg, 4%);
    }
    .icon-overlap li {
        border-color: $dark-card-bg;
    }
    .card,.kanban-add-task,.kanban-board-header,.kanban-item {
        background: $dark-card-bg;
    }
    .accordion,.form-clip, .form-text-hint,.card-aside,
    .code-block, .alert-pro,.modal-content,.toastr,.toggle-content,
    .nav-switch-s2 .nav-link:hover, .nav-switch-s2 .nav-link:focus,.nav-switch-s2 .nav-link.active,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple,.select2-dropdown,
    .custom-file-label,.custom-select,.popover,.search-wrap,.form-control,.form-label-outlined,.input-mail,.page-link,
    .ui-timepicker-standard,.note-editor,.note-toolbar,
    .tox .tox-edit-area__iframe,.tox .tox-menubar,.tox-toolbar-overlord,
    .tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-toolbar__overflow,
    .tox .tox-statusbar,.tox .tox-menu,
    .datepicker table tr td.today, .datepicker table tr td.today:hover, 
    .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover,
    .datepicker table tr td.day:hover, .datepicker table tr td.day.focused,
    .datepicker .datepicker-switch:hover, .datepicker .prev:hover, .datepicker .next:hover, .datepicker tfoot tr th:hover {
        background: $dark-card-bg !important;
    }

.search-wrap.search-wrap-extend, .search-wrap.search-wrap-extend .form-control {
        background: $dark-body-bg !important;
    }

.clipboard-success-message {
        background: rgba($dark-card-bg, .9);
    }

.tagify__tag > div::before ,.tagify__tag:hover:not([readonly]) div::before{
        box-shadow: 0 0 0 1.1em $dark-body-bg inset;
    }
    .popover-header{
        background-color: lighten($dark-card-bg, 3%);
    }
    .popover{
        box-shadow: 0 0 20px -5px rgba($black,.6);
    }
    .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before{
        border-color: $dark-border-color;
    }

.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before{
        border-top-color: $dark-border-color;
    }
    .bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after{
        border-top-color: $dark-card-bg;
    }

.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before{
        border-bottom-color: $dark-border-color;
    }
    .bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after{
        border-bottom-color: $dark-card-bg;
    }

.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before{
        border-right-color: $dark-border-color;
    }
    .bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after{
        border-right-color: $dark-card-bg;
    }

.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before{
        border-left-color: $dark-border-color;
    }
    .bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after{
        border-left-color: $dark-card-bg;
    }
    .team-info li span:last-child,.team-statistics li span:first-child,.project-progress-percent,
    .kanban-title-content .title,
    .card-tools-nav li a:hover, 
    .card-tools-nav li a.active, 
    .card-tools-nav li.active a, 
    .card-amount .amount,
    .accordion-head .title,.custom-file-label::after,
    .input-mail,.form-control,.form-control:focus,.form-label,.form-label-outlined,.input-group-text,.table .thead-light th,
    .close,.close:hover,.user-name,.nk-news-text p,
    .data-item:hover .icon,
    .accordion-icon {
        color: $white !important;
    }
    .close {
        text-shadow: 0 1px 0 $dark-card-bg;
        &:focus {
            outline: none !important;
        }
    }

.nk-block-des, .card-title p, .nk-sale-data .sub-title, .link-check li span, .data-value, 
    .custom-file-label,.custom-select,.form-control-select-multiple .custom-select option,
    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-container--default .select2-selection--multiple .select2-selection__rendered,
    .ui-timepicker-standard a,.note-placeholder,[class*="knob"],.tox .tox-tbtn:hover,
    .tox .tox-statusbar a, .tox .tox-statusbar__path-item, .tox .tox-statusbar__wordcount,
    .tox-collection__item-label > *,.nk-quick-nav-icon,.dropzone .dz-message span,
    .datepicker table tr td.today, .datepicker table tr td.today:hover, 
    .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover,
    .datepicker table tr td.day:hover, .datepicker table tr td.day.focused,
    .page-link, .alert-pro, .nk-news-text p span, .language-item,
    .nk-tb-list .tb-lead-sub, .nk-tb-list .tb-amount-sub {
        color: $base-400 !important;
    }
    .tox .tox-collection__item-accessory{
        color: $base-500;
    }
    .nk-menu-link, .link-dark, .link-list a{
        color: $base-400;
        &:hover{
            color: $accent-color;
        }
    }
    .ql-picker.ql-expanded .ql-picker-label,
    .active > .nk-menu-link,.is-theme .nk-menu-link:hover .nk-menu-icon, 
    .is-theme .nk-menu-item.active > .nk-menu-link .nk-menu-icon, 
    .is-theme .nk-menu-item.current-menu > .nk-menu-link .nk-menu-icon,
    .is-theme .nk-menu-sub .nk-menu-link:hover,
    .is-theme .nk-menu-sub .active > .nk-menu-link,.page-link:hover{
        color: $accent-color !important;
    }
    .nk-menu-hr,.nk-menu-main .nk-menu-sub,.nk-sidebar .nk-menu > li .nk-menu-sub .nk-menu-sub,
    .user-avatar-group .user-avatar{
        border-color: $dark-border-color;
    }
    .table .thead-light th,.page-item.disabled .page-link,.page-link:hover,.tb-odr-head,.tb-tnx-head,
    .custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
        background-color: lighten($dark-card-bg, 11%) !important;
    }
    .progress,.data-head,.custom-control-label::before,.input-group-text,
    .nk-msg-profile-toggle{
        background-color: lighten($dark-card-bg, 7%) !important;
    }
    .nk-msg-profile-toggle,
    .custom-control-label::before,.form-control,.input-mail,.custom-file-label,.input-group-text,
    .custom-select, .swal2-input, .swal2-file, .swal2-textarea,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple,.select2-dropdown,
    .note-popover .popover-content .dropdown-style > li[aria-label="pre"], 
    .note-editor .note-toolbar .dropdown-style > li[aria-label="pre"],
    .link-bdr-t, .link-check + .link-check, .link-tidy li + li, .link-list + .link-list, 
    .link-list-opt li + li, .link-list-plain li, .link-list-plain li + li{
        border-color: lighten($dark-card-bg, 20%) !important;
    }
    .custom-switch .custom-control-label::after {
        background-color: lighten($dark-card-bg, 50%) !important;
    }
    .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
        background-color: $white !important;
    }
    .custom-control-input:checked ~ .custom-control-label::before {
        background-color: $accent-color !important;
        border-color: $accent-color !important;
    }

.btn-trigger:before,.btn-trigger.active:hover:before,.nk-quick-nav-icon:before{
        background-color: $dark-body-bg-dark;
    }

.dropdown-menu {
        background-color: lighten($dark-card-bg, 2%);
        border-color: lighten($dark-card-bg, 10%);
        box-shadow: 0 3px 20px 1px rgba($black, 0.4);
        &-s1 {
            border-top-color: $accent-color;
        }
    }

.link-list-plain a,.link-list-opt a,.link-check li a {
        color: $base-300;
        &:hover {
            background: lighten($dark-card-bg, 12%);
        }
    }

.border-transparent{
        border-color: transparent !important;
    }

.note-editor .btn, .ql-picker, .tox .tox-tbtn__select-label, .tox .tox-mbtn__select-label, .lead-text span,
    .data-list-s2 .data-label, .btn-trigger, .dropdown .btn.btn-icon:not(.btn-light), .list-step li.list-step-done {
        color: $base-400;
    }
    .ql-fill, .ql-stroke.ql-fill, .tox .tox-tbtn svg {
        fill: $base-400;
    }
    .ql-stroke {
        stroke: $base-400
    }
    .team-info li span:first-child,.team-statistics li span:last-child,.project-progress-task,
    .table, .nk-tb-list, .nk-tb-list .tb-amount span, .nk-tb-list .tb-amount .currency,
    .tb-tnx-item .tb-tnx-total, .tb-odr-item .tb-odr-total,.user-balance-sub span,
    .dropdown-menu,.pln,.overline-title, .nk-block-des strong, 
    .data-item:hover .data-value, .data-item:hover .data-label,
    .nk-notification-text, .profile-ud-value, .bq-note-meta span > span,
    .tagify__tag > div, .popover-body,.input-mail::placeholder, .list-apps-title {
        color: $base-300;
    }
    .nk-notification-text span, .is-unread .chat-context .text {
        color: $base-200;
    }
    .nav-tabs .nav-link {
        color: $base-300;
        &.active{
            color: $accent-color;
        }
        &:hover{
            color: $white;
        }
    }
    .link-list-menu a, .list-plain a {
        color: $base-400;
        &:hover, &.active{
            color: $accent-color;
        }
    }
    .nav-switch .nav-link.active, .list-apps a:hover .list-apps-title{
        color: $white;
    }
    .nk-tb-item:not(.nk-tb-head):hover, .nk-tb-item:not(.nk-tb-head).seleted {
        box-shadow: 0 2px 15px -4px rgba($black, 0.7);
    }
    .nk-tb-item:hover .nk-tb-action-hidden, .bq-note-text,
    .nk-tb-item:not(.nk-tb-head):hover, .nk-tb-item:not(.nk-tb-head).seleted{
        background: darken($dark-card-bg, 2%);
    }

.nk-apps-sidebar .dropdown-menu .lead-text, .list-step li.list-step-current,
    .nk-tb-list .tb-lead, .nk-tb-list .tb-amount, .nk-support-content .title, .nk-sale-data .amount {
        color: $white;
    }

.nk-support-content .time,.page-item.disabled .page-link, .card-hint, .list-step li {
        color: $base-500;
    }

// global
    .nk-order-ovwg-data .title .icon,.timeline-item:not(:last-child):before,
    .timeline-status.is-outline:after{
        background-color: lighten($dark-card-bg, 10%);
    }

.nk-footer{
        background-color: $darker;
    }

.nk-order-ovwg-data .info strong, .user-activity .amount, .invest-data-history .amount,
    .analytic-data .amount, .traffic-channel-data .amount, .analytics-map-data .amount,
    .device-status-data .amount, .invest-ov .amount, .profile-balance-amount .number{
        color: $white;
    }

.invest-ov:not(:last-child){
        border-color: lighten($dark-card-bg, 20%);
    }

//Layouts
    .nk-header .dropdown-menu .lead-text, .nk-sidebar-bar .dropdown-menu .lead-text{
        color: $white;
    }
    .nk-header,.nk-header.is-light:not([class*=bg-]),
    .nk-sidebar,.nk-sidebar.is-light,.nk-sidebar-head{
        border-color: $sidebar-border-dark-color !important;
    }
    .nk-header,.nk-header.is-light:not([class*=bg-]),
    .nk-sidebar,.nk-sidebar.is-light,.nk-header.is-theme:not([class*=bg-]){
        background: $sidebar-bg-dark-color;
    }

// Apps
    .nk-chat-aside-user .title,.nk-file-name,.nk-file-name-text a.title,
    .is-unread .nk-ibx-context-text .heading, .chat-profile-settings .custom-control-sm .custom-control-label,
    .attach-info,.profile-stats .amount,.is-unread .chat-from .name{
        color: $white;
    }
    .nk-fmg-menu-item .icon, .nk-ibx-menu-item .icon {
        color: $base-400;
    }

.nk-fmg-menu-text,.nk-ibx-label-text,.nk-ibx-menu-text,.attach-item a,.user-contacts li,
    .nk-ibx-context-text .heading, .chat-option-link:hover .lead-text,.chat-from .name, .user-plan-title{
        color: $base-300;
    }

.nk-file-name-text a.title:hover,.active > .nk-fmg-menu-item .icon, .active .nk-ibx-menu-text, .active .nk-ibx-menu-item .icon{
        color: $accent-color;
    }

.nk-chat,.nk-chat-aside,.nk-chat-profile,.nk-chat-head,.chat-profile-group,
    .nk-fmg,.nk-fmg-aside,.nk-fmg-body-head,.nk-fmg-switch,
    .nk-files-view-grid .nk-file, .nk-files-view-group .nk-file,
    .nk-ibx,.nk-ibx-aside,.nk-ibx-head,.nk-ibx-item,.nk-reply-form,
    .nk-reply-form-header,.nk-reply-form-tools,.nk-reply-form-field:not(:last-child),
    .nk-msg,.nk-msg-head,.nk-msg-profile,.attach-files,.attach-foot,
    .nk-msg-item:not(:last-child),.nk-msg-aside,.nk-msg-nav,
    .nk-msg-nav .search-wrap,
    .nk-files-group > .title,.nk-file-share-header,
    .nk-files-view-list .nk-file > div{
        border-color: $dark-border-color !important;
    }
    .nk-block-subhead, .data-list-s2 .data-head, .nk-profile-toggle, .nk-profile-content, .user-account-links {
        border-color: $dark-border-light;
    }
    .nk-upload-item, .dropzone {
        border-color: lighten($dark-border-light, 5%) !important;
    }
    .data-list-s2 .data-head {
        background: transparent !important;
    }

.chat-sap-meta:before, .chat-sap-meta:after,
    .active > .nk-fmg-menu-item,.nk-fmg-menu-item:hover,
    .nk-ibx-status,.nk-ibx-reply-item:not(:last-child):after,
    .nk-reply-meta-info:before, .nk-reply-meta-info:after{
        background: $dark-border-color;
    }

.nk-chat,.nk-chat-aside,.nk-chat-profile,.nk-chat-head,.chat-msg,.nk-chat-editor, .nk-chat-blank,
    .nk-fmg,.nk-fmg-aside,.nk-fmg-body-head,
    .nk-files-view-grid .nk-file, .nk-files-view-group .nk-file,
    .nk-ibx,.nk-ibx-aside,.nk-ibx-item,.nk-ibx-view,
    .nk-msg,.nk-msg-head,.nk-msg-profile, .nk-fmg-switch{
        background: $dark-card-bg;
    }

.nk-ibx-status .progress {
        background: $dark-card-bg !important;
    }
    .nk-chat-panel, .chat-item:hover,.chat-item.current,.chat-item:hover .chat-actions, .chat-members .user-card:hover, .chat-members .user-actions, .nk-profile-content,
    .nk-msg-item.active, .nk-msg-item.current, .channel-list a:hover, .channel-list a.active{
        background: darken($dark-body-bg, 2%) !important;
    }
    .fav-list .user-avatar:after {
        background: lighten($dark-card-bg, 25%);
    }

.nk-ibx-item:not(.no-hover):hover, .nk-ibx-item.active,
    .nk-ibx-item:hover .ibx-actions-hidden,.nk-ibx-item:hover .ibx-actions,
    .nk-ibx-label > li:hover, .nk-ibx-contact > li:hover,
    .nk-ibx-menu li.active,.nk-ibx-menu li:hover,.dot-label:after,.attach-foot,
    .nk-reply-from,.nk-reply-entry.note,.nk-msg-aside,.nk-msg-nav,
    .nk-files-view-list .nk-file > div{
        background: $dark-body-bg;
    }
    .is-unread .nk-ibx-context-text,
    .nk-upload-info {
        color: $base-200;
    }
    .nk-reply-msg-excerpt, .nk-ibx-context-text,.user-contacts li .icon, .nk-reply-tools .date {
        color: $base-400;
    }
    .is-unread .nk-msg-sender .name {
        color: $white;
    }
    .nk-reply-meta-info, .nk-reply-from {
        color: darken($base-400, 2%);
    }
    .nk-reply-meta-info span, .nk-reply-meta-info strong, .nk-reply-meta-info .who, .channel-list a {
        color: $base-300;
    }
    .nk-reply-meta-info .whom {
        color: $accent-color;
    }

// Full Calendar
    .fc .fc-toolbar.fc-header-toolbar {
        .fc-toolbar-chunk{
          .btn{
            color: $base-300;
            border-color: $dark-border-color;
            &:disabled{
              color: $base-300;
              border-color:$dark-border-color;
            }
            &:hover, &:focus {
                color: $white;
                background: $dark-body-bg;
                border-color: $dark-border-color;
            }
            &:focus {
                box-shadow: 0 0 0 0.2rem rgba($dark-border-color, 0.5);
            }
            &.active {
                color: $accent-color;
                border-color: $dark-border-color;
                background: $dark-body-bg;
                box-shadow: inset 0 0 4px -1px rgba($dark-border-color, .25);
            }
          }
        }
    }
    .fc-day{
        color: $base-300;
    }
    .fc-day-other{
        color: $base-400;
    }
    .fc-list-day,.fc-col-header-cell{
        color: $white;
    }
    .fc .fc-list-empty{
        background: $dark-body-bg;
    }
    .fc-timegrid-event-harness-inset .fc-timegrid-event, .fc-timegrid-event.fc-event-mirror{
        box-shadow: 0px 0px 0px 1px $darker;
    }

$colors: (
        "primary-dim"     mix($accent-color, $bg-mix, 15%),
        "success-dim"     mix($success, $bg-mix, 15%),
        "info-dim"        mix($info, $bg-mix, 15%),
        "warning-dim"     mix($warning, $bg-mix, 15%),
        "danger-dim"      mix($danger, $bg-mix, 15%),
        "secondary-dim"   mix($secondary, $bg-mix, 20%),
        "dark-dim"        mix($dark, $bg-mix, 15%),
        "blue-dim"        mix($blue, $bg-mix, 15%),
        "azure-dim"       mix($azure, $bg-mix, 15%),
        "indigo-dim"      mix($indigo, $bg-mix, 25%),
        "purple-dim"      mix($purple, $bg-mix, 15%),
        "pink-dim"        mix($pink, $bg-mix, 15%),
        "orange-dim"      mix($orange, $bg-mix, 15%),
        "teal-dim"        mix($teal, $bg-mix, 15%)
    );

@each $name, $color in $colors{
    a.fc-event-#{$name} {
        background-color: $color !important;
        border-color: $color !important;
    }
    .modal-header.fc-event-#{$name}{
        background-color: $color !important;
        border-color: darken($color,5%) !important;
    }
    span.fc-event-#{$name} {
        .dot{
            background-color: $color !important;
        }
    }
    .fc-event-#{$name}:not(a) {
        .fc-list-event-dot{
            background-color: $color !important;
            }
        }
    }

// card common
    .code-block, .card-preview,
    .card .card-inner + .table .tb-tnx-head, 
    .card-bordered,.kanban-add-task,.kanban-board-header,.kanban-item,.kanban-board .kanban-drag:empty, //.card, 
    .accordion-item:not(:last-child) .accordion-head,
    .accordion-item:not(:last-child) .accordion-inner,
    .accordion-item:last-child .accordion-inner,
    .nk-download {
        border-color: $dark-border-color;
    }
    .accordion:not(.accordion-s2):not(.accordion-s3) {
        border-color: $dark-border-color !important;
    }
    .card.bg-light .card-header, .card.bg-lighter .card-header {
        background: rgba($black, .2);
    }
    .nk-tb-list.is-separate .nk-tb-item > .nk-tb-col{
        border-top-color: $dark-border-color;
        border-bottom-color: $dark-border-color;
        &:first-child{
            border-left-color: $dark-border-color;
        }
        &:last-child{
            border-right-color: $dark-border-color;
        }
    }
    .modal-footer.bg-light {
        background-color: darken($dark-card-bg, 2%) !important;
    }
    .kanban-primary{
        border-top-color: $accent-color;
    }
    .kanban-success{
        border-top-color: $success;
    }
    .kanban-info{
        border-top-color: $info;
    }
    .kanban-warning{
        border-top-color: $warning;
    }
    .kanban-danger{
        border-top-color: $danger;
    }
    // BORDERED STYLE on DARK
    &.ui-bordered{
        .card,
        .code-block,
        .accordion:not(.accordion-s2):not(.accordion-s3),
        .card .card-inner + .table .tb-tnx-head, 
        .card-bordered,
        .nk-download {
            border-color: $dark-border-color;
        }
        .nk-tb-list.is-separate .nk-tb-item > .nk-tb-col{
            border-top-color: $dark-border-color;
            border-bottom-color: $dark-border-color;
            &:first-child{
                border-left-color: $dark-border-color;
            }
            &:last-child{
                border-right-color: $dark-border-color;
            }
        }
    }

.nk-order-ovwg-data {
        &.buy {
            border-color: mix($success, $dark-card-bg, 60%)
        }
        &.sell {
            border-color: mix($accent-color, $dark-card-bg, 60%)
        }
    }
    .nk-sidebar-overlay {
        background: rgba($black, .6);
    }
    .toggle-overlay, .nk-chat-profile-overlay {
        background: rgba($dark-body-bg-dark, .75);
    }
    .swal2-container.swal2-backdrop-show {
        background: rgba($black, .85);
    }
    .modal-backdrop {
        opacity: .9;
        background: rgba($black, .9);
    }

//Crypto
    .nk-sidebar .nk-menu > li:hover > a, .nk-sidebar .nk-menu > li.active > a, 
    .nk-sidebar .nk-menu > li.current-menu > a,.wallet-item a:before {
        background: lighten($sidebar-bg-dark-color,5%);
    }
    .is-light .nk-sidebar-footer,.is-dark .nk-sidebar-footer,.is-theme .nk-sidebar-footer,.nk-sidebar-footer{
        background: $sidebar-bg-dark-color;
    }

.buysell-cc-choosen,.buysell-pm-list{
        background: $dark-card-bg;
    }
    .nk-wgw-add a .add-icon:before{
        background: $dark-body-bg;
    }

.card.is-dark{
        background: $accent-dark !important;
        border-color: $accent-dark;
    }
    .tranx-item:not(:last-child),.nk-refwg .nk-refwg-invite,.nk-wgw-actions,
    .card-custom-s1 .card-inner-group,.nk-kyc-app-icon .icon,.nk-kycfm-head:not(:last-child), 
    .nk-kycfm-content:not(:last-child), .nk-kycfm-footer:not(:last-child){
        border-color: $dark-border-color;
    }
    .nk-wg4-switcher > li > .dropdown > a, .buysell-cc-choosen,.nk-kycfm-label,
    .buysell-cc-item:not(:last-child),.buysell-cc-dropdown .dropdown-menu,
    .buysell-pm-list,.buysell-pm-item:not(:last-child),.buysell-overview-list,
    .buysell-overview-item:not(:last-of-type){
        border-color: lighten($dark-card-bg, 20%);
    }
    .buysell-pm-label:before {
        border-color: lighten($dark-card-bg, 30%);
    }
    .nk-kycfm-count {
        border-color: darken($base-400, 5%);
        color: $base-400;
    }

.tranx-label,.nk-wg1-title,.lead-text-lg,.is-dark .nk-wgw-balance .amount,.coin-name,.nk-wg7-stats .number-lg,.nk-wg7-stats .number,
    .buysell-pm-label .pm-name,.nk-kyc-app-icon .icon,.wallet-balance,.nk-wg5-amount .amount{
        color: $white !important;
    }
    .nk-wgw-balance .amount,.tranx-amount .number,.user-balance-alt, .tranx-amount .number-sm, .nk-wgw-actions a{
        color: $base-300;
    }
    .nk-wgw-balance .amount-sm, .tranx-amount .number span {
        color: $base-400;
    }
    .is-dark .nk-wgw-balance .amount-sm {
        color: $accent-400;
    }

//Saparated Table / 
    .ui-bordered .nk-tb-list.is-separate .nk-tb-item > .nk-tb-col:first-child,
    .ui-bordered .nk-tb-list.is-separate .nk-tb-item > .nk-tb-col{
        border-color: $dark-border-color !important;
    }
    .nk-tb-list.is-separate .nk-tb-item > .nk-tb-col,
    .nk-tb-list.is-separate .nk-tb-item:hover .nk-tb-action-hidden{
        background-color: $dark-card-bg;
    }
    .nk-tb-list .tb-product .title {
        color: $white;
    }

//List Box
    .dual-listbox {
        .dual-listbox__available,
        .dual-listbox__selected {
          border-color:lighten($dark-card-bg, 20%);
        }
        .dual-listbox__title {
          border-left-color:lighten($dark-card-bg, 20%);
          border-right-color:lighten($dark-card-bg, 20%);
          border-top-color:lighten($dark-card-bg, 20%);
        }
      
        .dual-listbox__item {
          border-bottom-color:lighten($dark-card-bg, 20%);
        }
    }

}

@media (max-width: 576px) {
    .dark-mode {
        .nk-block-tools-toggle{
            .toggle-expand-content{
                background-color: lighten($dark-card-bg, 7%);
            }
        }
    }
}

Gifari Industries - BD Cyber Security Team