body.dark {
    --black-5: #c0e0e7;
    --black-4: #9cbfc5;
    --black-3: #1893a9;
    --black-2: #06404b;
    --black-1: #022026;
    --black: #011519;
    --white-75: #b5b5c3;
    --warning: #fdbc12;
    --sec-primary: #002328;
    --trans-primary: rgba(160, 122, 201, 0.1);
}

body.dark .btn.btn-outline-dark {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

body.dark #kt_aside {
    background: var(--black);
}


body.dark .bg-dark-4 {
    background: var(--black-4) !important;
}

body.dark .bg-dark-3 {
    background: var(--black-3) !important;
}

body.dark .bg-dark-2 {
    background: var(--black-2) !important;
}

body.dark .bg-dark-1 {
    background: var(--black-1) !important;
}

body.dark .bg-dark {
    background: var(--black) !important;
}

.bg-fff {
    background: #fff !important;
}

body.dark .card {
    color: #fff;
    background: var(--black);
    transition: 0.3s all;
    border: 0px solid var(--black-2);
}

body.dark .bg-light-primary {
    background-color: var(--sec-primary) !important;
}

a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
    background-color: var(--hover-primary) !important;
    border-color: var(--hover-primary) !important;
}

body.dark .btn-dark {
    color: #181c32 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

body.dark .btn-dark:hover {
    color: #fff !important;
    background-color: #181c32 !important;
    border-color: #181c32 !important;
}

body.dark .btn-outline-dark:hover {
    color: #181c32 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

body.dark .btn.btn-dark i {
    color: #181c32;
}

body.dark .btn.btn-dark:hover i {
    color: #fff;
}

body.dark .border-dark {
    border-color: #fff !important;
}

body.dark .btn.btn-light-dark {
    color: #fff;
    background-color: var(--black-1);
    border-color: transparent;
}

body.dark .btn.btn-light-dark:hover {
    color: #fff;
    background-color: var(--black-2) !important;
    border-color: transparent;
}

body.dark .bg-light-dark {
    background-color: var(--black-2) !important;
}

.dark .header, body.dark .card.card-custom {
    background: var(--black);
    border: none;
}

.text-black {
    color: var(--black) !important;
}

body.dark .text-black {
    color: #fff !important;
}

body.dark .btn {
    color: #fff;
}

body.dark .card.card-custom.hover:hover {
    border: 1px solid var(--primary);
}

body.dark .card.card-custom.hover.success:hover {
    border: 1px solid var(--success);
}

body.dark .card .card-title {
    color: #fff !important;
}

body.dark .card.card-custom .card-header .card-title::before {
    background: url("/static/assets/svg/card-header-yellow.svg") no-repeat;
}

body.dark .text-dark-75 {
    color: var(--white-75) !important;
}

body.dark .table, body.dark {
    color: var(--white) !important;
}

body.dark .modal .modal-header .modal-title {
    color: var(--white) !important;
}

body.dark .select2-container--default .select2-dropdown {
    color: var(--white) !important;
}

body.dark .table-striped tbody tr:nth-of-type(even) {
    background: var(--black-2) !important;
}

body.dark .select2-dropdown {
    background: var(--black-2) !important;
}

body.dark .select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--black-1) !important;
    color: var(--white) !important;
}

body.dark .dropdown-menu {
    background: var(--black-2) !important;
    color: var(--white) !important;
}

body.dark .text-dark {
    color: var(--white) !important;
}

body.dark .bg-light {
    background-color: #011519 !important;
}

body.dark .card-header {
    border-radius: 1.5rem !important;
}

body.dark {
    background: #022026 !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-repeat: repeat !important;
}

body.dark .swal2-popup {
    background: var(--black-2);
    color: var(--white-75);
}

body.dark .swal2-popup .swal2-title {
    color: var(--white);
}

body.dark .border-secondary {
    border-color: var(--black-2) !important;
}

body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 {
    color: var(--white);
}

body.dark .offcanvas {
    background: var(--black-1);
}

body.dark .symbol .symbol-label {
    background: var(--black-2);
}

body.dark .dropdown-item {
    color: var(--white);
}

body.dark .nav-item .dropdown-item:not(.active) i {
    color: var(--white-75);
}

body.dark .dropdown-item:focus, body.dark .dropdown-item:hover {
    background: var(--black-1);
}

body.dark input {
    border: 1px solid var(--black-2);
    background-color: var(--black-1);
    color: var(--white-75);
}

body.dark .select2-container--default .select2-selection--single {
    border: 1px solid var(--black-2);
    background-color: var(--black-1);
    color: var(--white-75);
}

body.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--white-75) !important;
    padding: 0.65rem 3rem 0.65rem 1rem !important;
}

/*body.dark .table td, body.dark .table th {*/
/*    border: 1px solid var(--black-3);*/
/*}*/

body.dark .table-bordered td, body.dark .table-bordered th {
    border: 1px solid var(--black-3);
}

body.dark ::-webkit-scrollbar-track {
    background: var(--black-1);
    border-radius: 10px;
}

body.dark .table.first-freeze tr td:first-child {
    background: var(--black-1) !important;
}

body.dark .modal-content {
    background: var(--black-1) !important;
}

body.dark .apexcharts-canvas text {
    fill: var(--white-75) !important;
}

body.dark .modal-backdrop {
    background: #000;
}

.modal-backdrop.show {
    opacity: 0.8 !important;
}

body.dark .apexcharts-canvas line.apexcharts-gridline {
    stroke: var(--black-3) !important;
}

body.dark .table.tr-hover tbody tr:hover, body.dark .table.tr-hover.first-freeze tbody tr:hover td:first-child {
    background: var(--black) !important;
}

body.dark .form-control {
    border: 1px solid var(--black-2);
    background-color: var(--black-1);
    color: var(--primary);
}

body.dark .form-group label {
    color: var(--white) !important;
}

body.dark .bg-white {
    background: var(--black) !important;
}

body.dark .border-setter .nav-item > a, body.dark .border-setter .nav-item a.nav-link, body.dark .navbar-nav .nav-item i {
    color: var(--white);
}

body.dark .bg-secondary {
    background-color: var(--black-2) !important;
}

body.dark .border {
    border: 1px solid var(--black-3);
}

.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading, .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link {
    background-color: var(--black-1) !important;
}

body.dark .btn.btn-white {
    color: #fff;
    background-color: var(--black-1);
    border-color: var(--black-1);
}

body.dark .card-header {
    border-bottom: none;
    background: var(--black) !important;
}

body.dark .modal-header {
    border-bottom: none;
    background: var(--black) !important;
}

body.dark .modal-footer {
    border-top: none;
    padding: 10px !important;
    background: var(--black) !important;
    justify-content: start;
}

body.dark table.custom-table tr td:last-child {
    background: var(--black-1);
    border-radius: 10px 0 0 10px;
}

body.dark table.custom-table tr td {
    background: var(--black-1);
    padding: 0.5rem;
}

body.dark table.custom-table tr td:first-child {
    background: var(--black-1);
    border-radius: 0 10px 10px 0;
}

body.dark table.custom-table tbody tr {
    border: 5px solid var(--black-2);
}

body.dark table.custom-table thead tr th:first-child {
    border-right: 2px solid var(--black-2);
    border-radius: 0 5px 5px 0;
    background: var(--primary);
    color: #fff;
}

body.dark table.custom-table thead tr th:last-child {
    border-left: 2px solid var(--black-2);
    border-radius: 5px 0 0 5px;
    background: var(--primary);
    color: #fff;
}

body.dark .d-dark-none {
    display: none !important;
}

body.dark .d-dark-visible {
    display: block !important;
}

.d-dark-none {
    display: block !important;
}

.d-dark-visible {
    display: none !important;
}

body.dark .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--black-3);
}

body.dark .select2-container--default .select2-dropdown {
    border: 1px solid var(--black-3);
}

body.dark .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--black) !important;
}

body.dark .apexcharts-tooltip.apexcharts-theme-light {
    border: 1px solid var(--black-3);
    background: rgba(0, 0, 0, 0.96);
}

body.dark .tutorial-card .text-primary-hover {
    color: #5d5dff !important
}

body.dark .swal2-popup .swal2-content {
    color: #fff
}

body.dark a {
    color: var(--warning);
}


.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link {
    background: var(--black-2) !important;
}

body.dark .aside-menu .menu-nav > .menu-item > .menu-heading .menu-text, body.dark .aside-menu .menu-nav > .menu-item > .menu-link .menu-text {
    color: #fff;
}

body.dark .aside-menu .menu-nav > .menu-item > .menu-heading .menu-text, body.dark .aside-menu .menu-nav > .menu-item > .menu-link.active .menu-text {
    color: var(--primary) !important;
}

body.dark .card-footer {
    text-align: left;
    padding: 2rem 2.25rem;
    background: var(--black-1) !important;
    border-top: 1px solid var(--black-2);
}

body.dark .dataTables_wrapper .dataTable td {
    color: var(--white) !important;
}

body.dark .apexcharts-legend-text {
    color: var(--white) !important;
}

body.dark .btn.btn-primary i {
    color: var(--black) !important;
}

body.dark hr {
    background: var(--black-2);
}

/*.device-object-card.device-on:not(.device-warning) {*/
/*    background: #fff;*/
/*}*/

.device-on:not(.device-warning) .symbol-label.bg-device-state {
    background: #c9f7f5 !important;
}

.device-on:not(.device-warning) .symbol-label.bg-device-state i {
    color: var(--success) !important;
}


.device-on.device-warning .symbol-label.bg-device-state {
    background: #fff4de !important;
}

.device-on.device-warning .symbol-label.bg-device-state i {
    color: var(--warning) !important;
}

.device-off .symbol-label.bg-device-state {
    background: #ffe2e5 !important;
}

.device-off .symbol-label.bg-device-state .fa-desktop:before {
    content: "" !important;
}

.device-off .symbol-label.bg-device-state i {
    color: var(--danger) !important;
}

.device-off .off-device {
    display: flex;
}

.device-off::after {
    background-color: red;
    transform: rotate(180deg);
    background-image: conic-gradient(#ffffff, #ffffff, #fffafa, #ffdcdc);
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    z-index: -1;
    border-radius: 1.5rem;
}

body.dark .device-off::after {
    background-image: conic-gradient(#011519, #011519, #260202, #670000);
}

body.dark .device-warning::after {
    background-image: conic-gradient(#011519, #151300, #4b3600, #5e4900);
}

body.dark .device-on:not(.device-warning) {
    background: var(--black);
}

.device-on:not(.device-warning) {
    background: #fff;
}


.device-object-card,
body.dark .device-object-card {
    background: transparent;
    border: none;
}

.device-warning {
    display: flex;
}

.device-warning::after {
    background-color: #ffd500;
    transform: rotate(180deg);
    background-image: conic-gradient(#ffffff, #ffffff, #fffefa, #fff9dc);
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    z-index: -1;
    border-radius: 1.5rem;
}

.device-on .off-device {
    display: none;
}

.device-on .device-on-show {
    display: flex;
}

.device-on-show {
    display: none;
}