/* Body Background Color */
body.dark {
    background-color: #0E1420 !important;
    color: white;
    --primary: var(--primary-dark);
    --secondary: var(--secondary-dark);
    --warning: var(--warning-dark);
    --info: var(--info-dark);
    --gray-50: var(--gray-dark-50);
    --gray-100: var(--gray-dark-100);
    --gray-200: var(--gray-dark-200);
    --gray-300: var(--gray-dark-300);
    --gray-400: var(--gray-dark-400);
    --gray-500: var(--gray-dark-500);
    --gray-600: var(--gray-dark-600);
    --gray-700: var(--gray-dark-700);
    --gray-800: var(--gray-dark-800);
    --gray-900: var(--gray-dark-900);
}


/* Dark mode color variants */
.dark .alert-info {background-color: var(--info-dark)}
.dark .alert-primary {background-color: var(--primary-dark)}
.dark .alert-warning {background-color: var(--warning-dark)}
.dark .alert-secondary {background-color: var(--secondary-dark)}
.dark .alert-gray-50  {background-color: var(--gray-dark-50)}
.dark .alert-gray-100 {background-color: var(--gray-dark-100)}
.dark .alert-gray-200 {background-color: var(--gray-dark-200)}
.dark .alert-gray-300 {background-color: var(--gray-dark-300)}
.dark .alert-gray-400 {background-color: var(--gray-dark-400)}
.dark .alert-gray-500 {background-color: var(--gray-dark-500)}
.dark .alert-gray-600 {background-color: var(--gray-dark-600)}
.dark .alert-gray-700 {background-color: var(--gray-dark-700)}
.dark .alert-gray-800 {background-color: var(--gray-dark-800)}
.dark .alert-gray-900 {background-color: var(--gray-dark-900)}

.dark .btn-info {background-color: var(--info-dark)}
.dark .btn-primary {background-color: var(--primary-dark)}
.dark .btn-warning {background-color: var(--warning-dark)}
.dark .btn-secondary {background-color: var(--secondary-dark)}
.dark .btn-gray-50  {background-color: var(--gray-dark-50)}
.dark .btn-gray-100 {background-color: var(--gray-dark-100)}
.dark .btn-gray-200 {background-color: var(--gray-dark-200)}
.dark .btn-gray-300 {background-color: var(--gray-dark-300)}
.dark .btn-gray-400 {background-color: var(--gray-dark-400)}
.dark .btn-gray-500 {background-color: var(--gray-dark-500)}
.dark .btn-gray-600 {background-color: var(--gray-dark-600)}
.dark .btn-gray-700 {background-color: var(--gray-dark-700)}
.dark .btn-gray-800 {background-color: var(--gray-dark-800)}
.dark .btn-gray-900 {background-color: var(--gray-dark-900)}

.dark .badge-info {background-color: var(--info-dark)}
.dark .badge-primary {background-color: var(--primary-dark)}
.dark .badge-warning {background-color: var(--warning-dark)}
.dark .badge-secondary {background-color: var(--secondary-dark)}
.dark .badge-gray-50  {background-color: var(--gray-dark-50)}
.dark .badge-gray-100 {background-color: var(--gray-dark-100)}
.dark .badge-gray-200 {background-color: var(--gray-dark-200)}
.dark .badge-gray-300 {background-color: var(--gray-dark-300)}
.dark .badge-gray-400 {background-color: var(--gray-dark-400)}
.dark .badge-gray-500 {background-color: var(--gray-dark-500)}
.dark .badge-gray-600 {background-color: var(--gray-dark-600)}
.dark .badge-gray-700 {background-color: var(--gray-dark-700)}
.dark .badge-gray-800 {background-color: var(--gray-dark-800)}
.dark .badge-gray-900 {background-color: var(--gray-dark-900)}

.dark .border-info {border-color: var(--info-dark)}
.dark .border-primary {border-color: var(--primary-dark)}
.dark .border-warning {border-color: var(--warning-dark)}
.dark .border-secondary {border-color: var(--secondary-dark)}
.dark .border-gray-50  {border-color: var(--gray-dark-50)}
.dark .border-gray-100 {border-color: var(--gray-dark-100)}
.dark .border-gray-200 {border-color: var(--gray-dark-200)}
.dark .border-gray-300 {border-color: var(--gray-dark-300)}
.dark .border-gray-400 {border-color: var(--gray-dark-400)}
.dark .border-gray-500 {border-color: var(--gray-dark-500)}
.dark .border-gray-600 {border-color: var(--gray-dark-600)}
.dark .border-gray-700 {border-color: var(--gray-dark-700)}
.dark .border-gray-800 {border-color: var(--gray-dark-800)}
.dark .border-gray-900 {border-color: var(--gray-dark-900)}

.dark .text-info {color: var(--info-dark)}
.dark .text-primary {color: var(--primary-dark)}
.dark .text-warning {color: var(--warning-dark)}
.dark .text-secondary {color: var(--secondary-dark)}
.dark .text-gray-50  {color: var(--gray-dark-50)}
.dark .text-gray-100 {color: var(--gray-dark-100)}
.dark .text-gray-200 {color: var(--gray-dark-200)}
.dark .text-gray-300 {color: var(--gray-dark-300)}
.dark .text-gray-400 {color: var(--gray-dark-400)}
.dark .text-gray-500 {color: var(--gray-dark-500)}
.dark .text-gray-600 {color: var(--gray-dark-600)}
.dark .text-gray-700 {color: var(--gray-dark-700)}
.dark .text-gray-800 {color: var(--gray-dark-800)}
.dark .text-gray-900 {color: var(--gray-dark-900)}

/* Sidebar Colors */
.dark .main-sidebar {background-color: var(--gray-900); border-color: rgba(25, 35, 57, 1)}
.dark .main-sidebar .sidebar .nav-pills .nav-item .nav-link.active {background-color: var(--gray-700); color: white}
.dark .main-sidebar .sidebar .nav-pills .nav-item .nav-link:hover {background-color: var(--gray-800); color: var(--gray-300)}
.dark .main-sidebar .sidebar .nav-treeview .nav-item .nav-link {background-color: var(--gray-700); color: var(--gray-300)}
.dark .main-sidebar-footer .sidebar-company {background-color: var(--gray-800); border-color: var(--gray-700)}
.dark .main-sidebar-footer .sidebar-company-name {color: white}
.dark .main-sidebar-footer .sidebar-ip-address {color: var(--gray-400)}
.dark .main-sidebar-footer .sidebar-company-button {background-color: var(--primary-500)}
.dark .main-sidebar-footer .main-sidebar-copy {color: rgba(107, 107, 107, 1)}
.dark .main-sidebar-footer .main-sidebar-version {color: rgba(171, 171, 171, 1)}
.dark .main-sidebar .sidebar .nav-pills .nav-item .nav-link,
.dark .main-sidebar .sidebar .nav-pills .nav-item .nav-link p,
.dark .main-sidebar .sidebar .nav-pills .nav-item .nav-link i {color: var(--gray-300) !important}
.dark .main-sidebar .sidebar .nav-pills .nav-item .nav-link.active,
.dark .main-sidebar .sidebar .nav-pills .nav-item .nav-link.active p,
.dark .main-sidebar .sidebar .nav-pills .nav-item .nav-link.active i {color: white !important}
.dark .main-sidebar .sidebar .nav-treeview .nav-item .nav-link,
.dark .main-sidebar .sidebar .nav-treeview .nav-item .nav-link p,
.dark .main-sidebar .sidebar .nav-treeview .nav-item .nav-link i {color: var(--gray-300) !important}
.dark .main-sidebar .sidebar .nav-treeview .nav-item .nav-link.active,
.dark .main-sidebar .sidebar .nav-treeview .nav-item .nav-link.active p,
.dark .main-sidebar .sidebar .nav-treeview .nav-item .nav-link.active i {color: white !important}
.dark .main-sidebar .sidebar hr {border-color: var(--gray-800)}
.dark .main-sidebar .sidebar .nav-header {color: var(--gray-400)}
.dark .main-sidebar .sidebar .btn-sidebar-collapse {background-color: rgba(100, 170, 222, 0.32); color: var(--primary-500)}

/* Mobile Sidebar colors */
.dark #mobile-sidebar {background-color: var(--gray-900); border-color: rgba(25, 35, 57, 1)}
.dark #mobile-sidebar .drawer-notch {color:white}
.dark #mobile-sidebar .sidebar .nav-pills .nav-item .nav-link.active {background-color: var(--gray-700); color: white}
.dark #mobile-sidebar .sidebar .nav-pills .nav-item .nav-link:hover {background-color: var(--gray-800); color: var(--gray-300)}
.dark #mobile-sidebar .sidebar .nav-treeview .nav-item .nav-link {background-color: var(--gray-700); color: var(--gray-300)}
.dark #mobile-sidebar .sidebar .nav-pills .nav-item .nav-link,
.dark #mobile-sidebar .sidebar .nav-pills .nav-item .nav-link p,
.dark #mobile-sidebar .sidebar .nav-pills .nav-item .nav-link i {color: var(--gray-300) !important}
.dark #mobile-sidebar .sidebar .nav-pills .nav-item .nav-link.active,
.dark #mobile-sidebar .sidebar .nav-pills .nav-item .nav-link.active p,
.dark #mobile-sidebar .sidebar .nav-pills .nav-item .nav-link.active i {color: white !important}
.dark #mobile-sidebar .sidebar .nav-treeview .nav-item .nav-link,
.dark #mobile-sidebar .sidebar .nav-treeview .nav-item .nav-link p,
.dark #mobile-sidebar .sidebar .nav-treeview .nav-item .nav-link i {color: var(--gray-300) !important}
.dark #mobile-sidebar .sidebar .nav-treeview .nav-item .nav-link.active,
.dark #mobile-sidebar .sidebar .nav-treeview .nav-item .nav-link.active p,
.dark #mobile-sidebar .sidebar .nav-treeview .nav-item .nav-link.active i {color: white !important}
.dark #mobile-sidebar .sidebar hr {border-color: var(--gray-800)}
.dark #mobile-sidebar .sidebar .nav-header {color: var(--gray-400)}
.dark #mobile-sidebar .sidebar .btn-sidebar-collapse {background-color: rgba(100, 170, 222, 0.32); color: var(--primary-500)}

.dark #mobile-sidebar .drawer-company {background-color: var(--gray-800); border-color: var(--gray-700)}
.dark #mobile-sidebar .drawer-company-name {color: white}
.dark #mobile-sidebar .drawer-ip-address {color: var(--gray-400)}
.dark #mobile-sidebar .drawer-company-button {background-color: var(--primary-500)}
.dark #mobile-sidebar .dropdown-menu.drawer-company-dropdown {background-color: var(--gray-800); border-color: var(--gray-700); color: white}
.dark .drawer-company-dropdown .dropdown-row:not(:last-child) {border-color: var(--gray-700)}

/* Navbar Colors */
.dark .navbar.navbar-white {background-color: var(--gray-900); border-color: var(--gray-800)}
.dark .navbar .nav-profile {border-color: var(--gray-800)}
.dark .navbar .nav-profile .nav-profile-user {color: white}
.dark .navbar .nav-profile .nav-profile-subtext {color: var(--gray-400)}
.dark .navbar a.nav-profile-arrow {color: white}
.dark .navbar .nav-item .nav-link.nav-link-circle {background-color: var(--gray-700); border-color: var(--gray-600); color: var(--gray-400)}

/* Card Colors */
.dark .card, .dark .card-header, .dark .card-footer {background-color: var(--gray-800); border-color: var(--gray-700)}
.dark .card-title {color: white}
.dark .card-body p, .dark .card-body span, .dark .card-body i {color: var(--gray-300)!important;}
.dark .card-body button i.fa, .dark .card-body a i.fa {color: white}

/* Modal Colors */
.dark .modal-content {background-color: var(--gray-900)}
.dark .modal-content p, .dark .modal-content span {color: var(--gray-300)}
.dark .modal-header .close, .dark .modal-header button.close, .dark .modal-header button.close span {color: #ef4444 !important; text-shadow: none}
.dark .modal-backdrop.show {opacity: 0.64 !important}
.dark .modal-content, .dark .modal.right .modal-content {background-color: var(--gray-900)}
.dark .modal-file-viewer .modal-body:has(img) {background-image: linear-gradient(45deg, var(--gray-800) 25%, transparent 25%), linear-gradient(-45deg, var(--gray-800) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--gray-800) 75%), linear-gradient(-45deg, transparent 75%, var(--gray-800) 75%)}
.dark .drawer-notch {color: white !important}

/* Input Colors */
.dark .form-control {background-color: var(--gray-800); border-color: var(--gray-700)}
.dark .form-control:disabled, .dark .btn-select[aria-disabled=true] {background-color: var(--gray-700); border-color: var(--gray-600); font-weight: normal; opacity: 1}
.dark .btn-select[aria-disabled=true] .filter-option-inner-inner {color: white !important; font-weight: normal}
.dark .btn-select .filter-option-inner-inner {color: white !important; font-weight: normal}
.dark .form-control:read-only {background-color: var(--gray-700); border-color: var(--gray-600)}
.dark .form-control:focus {border-color: var(--primary-500)}
.dark .form-control {color: white}
.dark .form-control::placeholder {color: var(--gray-500)}
.dark .dropdown-menu .no-results {background-color: var(--gray-800) !important}

.dark .bootstrap-select .dropdown-toggle::after {color:white}
.dark .btn-select {background-color: var(--gray-800); border-color: var(--gray-700)}
.dark .dropdown-item.active, .dark .dropdown-item:active {background-color: var(--gray-900)}
.dark .btn-input-extension {background-color: var(--gray-800) !important; border-color: var(--gray-700) !important; color: white}
.dark .btn-input-extension:hover {background-color: var(--gray-800) !important; border-color: var(--gray-700) !important; color: white}
.dark .custom-textarea {background-color: var(--gray-800) !important; border-color: var(--gray-700) !important; color: white !important}
.dark .custom-textarea:disabled {color: var(--gray-400) !important}

/* Component & General Colors */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {color: white}
.dark a {color: var(--primary-500)}
.dark hr {border-color: var(--gray-800)}
.dark .form-label {color: white}
.dark .dropdown-menu {background-color: var(--gray-800) !important; border-color: var(--gray-700) !important; color: white}
.dark .dropdown-menu .dropdown-row-title {color: white}
.dark .dropdown-menu .dropdown-row-subtitle {color: var(--gray-500)}
.dark .sidebar-company-dropdown .dropdown-row:not(:last-child) {border-color: var(--gray-700)}
.dark .bootstrap-select .dropdown-menu li a {color: var(--gray-300)}
.dark .dropdown-item:hover, .dark .dropdown-item:focus {background-color: var(--gray-900)}
.dark .profile-header-title {color:white}
.dark div:has(> .switch-mode-btn) {border-color: var(--gray-700) !important; background-color: var(--gray-800)}
.dark .switch-mode-btn {color: var(--gray-500)}
.dark .switch-mode-btn.active {color: var(--primary-500); background-color: rgba(100, 170, 222, 0.42)}
.dark .faqOrContactContent {background-color: transparent !important;border: 1px solid var(--gray-700) !important}
.dark .logoContent {border: 1px solid var(--gray-600)}
.dark #no-result-wrapper img {content: url('/dist/img/no_data_dark.svg')}
.dark .no-result-wrapper img {content: url('/dist/img/no_data_dark.svg')}
.dark .welcome-screen-container {background-image: url('/dist/img/wallpaper_dark.webp')}
.dark .welcome-screen-container h2.text-primary {color: white !important}
.dark .welcome-screen-container > p {color: rgb(221, 221, 221) !important}
.dark .welcome-screen-container .welcome-screen-footer .welcome-screen-datetime * {color: white !important}
.dark .input-icon-label {border-color: var(--gray-700); background-color: var(--gray-800)}
.dark .avatar {border-color: var(--gray-800)!important;}
.dark .boc-light {background-color: transparent !important;}
.dark .content-header.form-page-header.profile-bg {border-color: var(--gray-800)}
.dark .content-header.form-page-header .form-page-description {color: var(--gray-200)}
.dark .content-header.form-page-header {background: url('/dist/img/form_header_dark.png') no-repeat bottom; background-size: cover}
.dark .content-header.form-page-header.profile-bg {background: url('/dist/img/profile_cover_dark.png') no-repeat bottom; background-size: cover}
.dark .btn.bs-select-all, .dark .btn.bs-deselect-all {background-color: var(--gray-700) !important; color: white !important}
.dark .btn.bs-select-all:hover, .dark .btn.bs-deselect-all:hover {background-color: var(--gray-600) !important}

/* Custom Switch Element */
.dark .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff !important;
    background-color: var(--primary-200) !important;
    border-color: var(--primary-200) !important;
}
.dark .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--primary) !important;
}
.dark .custom-control-label::before {background-color: var(--gray-500) !important}
.dark .custom-control-label::after {background-color: white !important}

/* Some animations are different when its dark */
.dark .pulse-sidebar {animation: pulse-animation-sidebar-dark 2s infinite;}
@keyframes pulse-animation-sidebar-dark {
    0% {}
    50% {
        background-color: var(--gray-700);
    }
    100% {}
}


/* Datatable */
.dark table.dataTable thead tr {
    color: white !important;
    background-color: var(--gray-700) !important;
    border-color: var(--gray-600) !important;
}
.dark table.dataTable thead th {
    border-color: var(--gray-600) !important;
}
.dark table.dataTable tbody tr {
    color: white !important;
    background-color: var(--gray-900) !important;
    position: relative;
}
.dark table.dataTable tr td.dt-control:before {
    color: var(--gray-400) !important;
    background-color: var(--gray-700) !important;
}
.dark table.dataTable tbody tr.selected > * {
    color: white;
    box-shadow: inset 0 0 0 9999px rgba(68, 225, 126, 0.20) !important;
}
.dark .dataTable tbody tr:hover {
    background-color: rgba(100, 170, 222, 0.24) !important;
}
.dark table.dataTable tr td {
    border-color: var(--gray-800)!important;
    background-color: var(--gray-900)!important;
}


/* Date Picker */
.dark .daterangepicker {color: var(--gray-900)}
.dark .daterangepicker .calendar-table th, .daterangepicker .calendar-table td {color: var(--gray-900)}
.dark .daterangepicker {color: white!important;background-color: var(--gray-900);border: 1px solid var(--gray)!important;}
.date-picker-wrapper.single-date.no-shortcuts.single-month.has-gap {width: 330px;}
.dark .date-picker-wrapper.single-date.no-shortcuts.single-month.has-gap {background:var(--gray-900)!important;border: none}
.dark .date-picker-wrapper .month-wrapper {background-color: var(--gray-800)!important;border: 1px solid var(--gray-700);padding: 12px;border-radius: 10px;}
.dark .date-picker-wrapper {background-color: var(--gray-700)!important;border: 1px solid var(--gray-900)!important;}
.dark .date-picker-wrapper .month-wrapper tr div {color: white!important}
.date-picker-wrapper .month-wrapper table .week-name {text-transform: capitalize;font-family: 'Inter', serif;height: 27px}
.dark .date-picker-wrapper .month-wrapper table thead {border: 1px solid var(--gray-400)}
.dark .date-picker-wrapper table .caption .next:hover, .date-picker-wrapper table .caption .prev:hover {background-color: unset!important}
.dark .daterangepicker .drp-buttons { border-top: 1px solid var(--gray)!important;}
.dark .daterangepicker td { color: var(--gray-400);}
.dark .daterangepicker .calendar-table {background-color: var(--gray-800)!important;border: none!important;}
.dark .daterangepicker .calendar-table th, .daterangepicker .calendar-table td {border: none!important;line-height: 30px;}

.dark .daterangepicker td.in-range {background-color: var(--gray-200);color: var(--gray-900);}
.dark button.applyBtn.btn.btn-sm.btn-primary {color: white!important;}
.dark table.table-condensed thead {background-color: var(--gray-900)!important;}
.dark .daterangepicker .calendar-table .next span,
.dark .daterangepicker .calendar-table .prev span {color: white!important;border: solid white!important;border-width: 0 2px 2px 0!important;}

.dark .daterangepicker td.available:hover, .dark .daterangepicker th.available:hover {background-color: var(--gray-900)!important;}
.dark .daterangepicker td.off,
.dark .daterangepicker td.off .in-range,
.dark .daterangepicker td.off .start-date,
.dark .daterangepicker td.off .end-date { background-color: var(--gray-600);}
.dark button.cancelBtn.btn.btn-sm.btn-default {color: white!important;}


/* Balkan Charts */
.dark .boc-light .boc-chart-menu [data-item] {background-color: var(--gray-700); border-color: var(--gray-800); color: white}
.dark .boc-light .boc-chart-menu [data-item]:hover {background-color: var(--gray-800) !important; border-color: var(--gray-900)}
.dark .boc-light .boc-chart-menu [data-item] svg > path {fill: var(--primary-200)}
.dark .boc-edit-form > div {background-color: var(--gray-800); color: var(--gray-200)}
.dark .boc-form-field .boc-input input {background-color: var(--gray-700) !important; color: white !important}


/* Apex Charts */
.dark .apexcharts-legend-text {color: white !important}


/* Date Range Picker */
.dark .daterangepicker table thead tr th {
    color: white !important;
}
.dark .daterangepicker td.start-date {
    color: white !important;
}
.dark .daterangepicker td.end-date {
    color: white !important;
}
.dark .daterangepicker td.start-date.end-date {
    color: white !important;
}


/* SweetAlert2 */
.dark .swal2-container > div {
    background-color: var(--gray-700) !important;
    box-shadow: none !important;
    color: white !important;
}
.dark #swal2-title {color:var(--gray-400) !important}


/* Display Modes */
.dark .d-dark-none {display: none}
.dark .d-dark-none-i {display: none !important}
.dark .d-dark-flex {display: flex}
.dark .d-dark-grid {display: grid}
.dark .d-dark-block {display: block}
.dark .d-dark-table {display: table}
.dark .d-dark-inline {display: inline}
.dark .d-dark-inline-flex {display: inline-flex}
.dark .d-dark-inline-block {display: inline-block}
.dark .d-dark-flex-i {display: flex !important;}
.dark .d-dark-grid-i {display: grid !important;}
.dark .d-dark-block-i {display: block !important;}
.dark .d-dark-table-i {display: table !important;}
.dark .d-dark-inline-i {display: inline !important;}
.dark .d-dark-inline-flex-i {display: inline-flex !important;}
.dark .d-dark-inline-block-i {display: inline-block !important;}

/* Text Colors */
.dark .text-dark-black {color: black !important}
.dark .text-dark-red {color: var(--red) !important}
.dark .text-dark-pink {color: var(--pink) !important}
.dark .text-dark-green {color: var(--green) !important}
.dark .text-dark-white {color: var(--white) !important}
.dark .text-dark-orange {color: var(--orange) !important}
.dark .text-dark-purple {color: var(--purple) !important}
.dark .text-dark-yellow {color: var(--yellow) !important}
.dark .text-dark-gray {color: var(--gray) !important}
.dark .text-dark-gray-50 {color: var(--gray-50) !important}
.dark .text-dark-gray-100 {color: var(--gray-100) !important}
.dark .text-dark-gray-200 {color: var(--gray-200) !important}
.dark .text-dark-gray-300 {color: var(--gray-300) !important}
.dark .text-dark-gray-400 {color: var(--gray-400) !important}
.dark .text-dark-gray-500 {color: var(--gray-500) !important}
.dark .text-dark-gray-600 {color: var(--gray-600) !important}
.dark .text-dark-gray-700 {color: var(--gray-700) !important}
.dark .text-dark-gray-800 {color: var(--gray-800) !important}
.dark .text-dark-gray-900 {color: var(--gray-900) !important}
.dark .text-dark-primary {color: var(--primary) !important}
.dark .text-dark-primary-50 {color: var(--primary-50) !important}
.dark .text-dark-primary-100 {color: var(--primary-100) !important}
.dark .text-dark-primary-200 {color: var(--primary-200) !important}
.dark .text-dark-primary-300 {color: var(--primary-300) !important}
.dark .text-dark-primary-400 {color: var(--primary-400) !important}
.dark .text-dark-primary-500 {color: var(--primary-500) !important}
.dark .text-dark-primary-600 {color: var(--primary-600) !important}
.dark .text-dark-primary-700 {color: var(--primary-700) !important}
.dark .text-dark-primary-800 {color: var(--primary-800) !important}
.dark .text-dark-primary-900 {color: var(--primary-900) !important}
.dark .text-dark-blue {color: var(--blue) !important}
.dark .text-dark-blue-100 {color: var(--blue-100) !important}
.dark .text-dark-blue-200 {color: var(--blue-200) !important}
.dark .text-dark-blue-300 {color: var(--blue-300) !important}
.dark .text-dark-blue-400 {color: var(--blue-400) !important}
.dark .text-dark-blue-500 {color: var(--blue-500) !important}
.dark .text-dark-blue-600 {color: var(--blue-600) !important}
.dark .text-dark-blue-700 {color: var(--blue-700) !important}
.dark .text-dark-blue-800 {color: var(--blue-800) !important}
.dark .text-dark-blue-900 {color: var(--blue-900) !important}

/* Background Colors */
.dark .bg-dark-transparent {background-color: transparent !important}
.dark .bg-dark-black {background-color: black !important}
.dark .bg-dark-red {background-color: var(--red) !important}
.dark .bg-dark-pink {background-color: var(--pink) !important}
.dark .bg-dark-green {background-color: var(--green) !important}
.dark .bg-dark-white {background-color: var(--white) !important}
.dark .bg-dark-orange {background-color: var(--orange) !important}
.dark .bg-dark-purple {background-color: var(--purple) !important}
.dark .bg-dark-yellow {background-color: var(--yellow) !important}
.dark .bg-dark-gray {background-color: var(--gray) !important}
.dark .bg-dark-gray-50 {background-color: var(--gray-50) !important}
.dark .bg-dark-gray-100 {background-color: var(--gray-100) !important}
.dark .bg-dark-gray-200 {background-color: var(--gray-200) !important}
.dark .bg-dark-gray-300 {background-color: var(--gray-300) !important}
.dark .bg-dark-gray-400 {background-color: var(--gray-400) !important}
.dark .bg-dark-gray-500 {background-color: var(--gray-500) !important}
.dark .bg-dark-gray-600 {background-color: var(--gray-600) !important}
.dark .bg-dark-gray-700 {background-color: var(--gray-700) !important}
.dark .bg-dark-gray-800 {background-color: var(--gray-800) !important}
.dark .bg-dark-gray-900 {background-color: var(--gray-900) !important}
.dark .bg-dark-primary {background-color: var(--primary) !important}
.dark .bg-dark-primary-50 {background-color: var(--primary-50) !important}
.dark .bg-dark-primary-100 {background-color: var(--primary-100) !important}
.dark .bg-dark-primary-200 {background-color: var(--primary-200) !important}
.dark .bg-dark-primary-300 {background-color: var(--primary-300) !important}
.dark .bg-dark-primary-400 {background-color: var(--primary-400) !important}
.dark .bg-dark-primary-500 {background-color: var(--primary-500) !important}
.dark .bg-dark-primary-600 {background-color: var(--primary-600) !important}
.dark .bg-dark-primary-700 {background-color: var(--primary-700) !important}
.dark .bg-dark-primary-800 {background-color: var(--primary-800) !important}
.dark .bg-dark-primary-900 {background-color: var(--primary-900) !important}
.dark .bg-dark-blue {background-color: var(--blue) !important}
.dark .bg-dark-blue-100 {background-color: var(--blue-100) !important}
.dark .bg-dark-blue-200 {background-color: var(--blue-200) !important}
.dark .bg-dark-blue-300 {background-color: var(--blue-300) !important}
.dark .bg-dark-blue-400 {background-color: var(--blue-400) !important}
.dark .bg-dark-blue-500 {background-color: var(--blue-500) !important}
.dark .bg-dark-blue-600 {background-color: var(--blue-600) !important}
.dark .bg-dark-blue-700 {background-color: var(--blue-700) !important}
.dark .bg-dark-blue-800 {background-color: var(--blue-800) !important}
.dark .bg-dark-blue-900 {background-color: var(--blue-900) !important}

/* Border Colors */
.dark .border-dark-black {border-color: black !important}
.dark .border-dark-red {border-color: var(--red) !important}
.dark .border-dark-blue {border-color: var(--blue) !important}
.dark .border-dark-pink {border-color: var(--pink) !important}
.dark .border-dark-green {border-color: var(--green) !important}
.dark .border-dark-white {border-color: var(--white) !important}
.dark .border-dark-orange {border-color: var(--orange) !important}
.dark .border-dark-purple {border-color: var(--purple) !important}
.dark .border-dark-yellow {border-color: var(--yellow) !important}
.dark .border-dark-gray {border-color: var(--gray) !important}
.dark .border-dark-gray-50 {border-color: var(--gray-50) !important}
.dark .border-dark-gray-100 {border-color: var(--gray-100) !important}
.dark .border-dark-gray-200 {border-color: var(--gray-200) !important}
.dark .border-dark-gray-300 {border-color: var(--gray-300) !important}
.dark .border-dark-gray-400 {border-color: var(--gray-400) !important}
.dark .border-dark-gray-500 {border-color: var(--gray-500) !important}
.dark .border-dark-gray-600 {border-color: var(--gray-600) !important}
.dark .border-dark-gray-700 {border-color: var(--gray-700) !important}
.dark .border-dark-gray-800 {border-color: var(--gray-800) !important}
.dark .border-dark-gray-900 {border-color: var(--gray-900) !important}
.dark .border-dark-primary {border-color: var(--primary) !important}
.dark .border-dark-primary-50 {border-color: var(--primary-50) !important}
.dark .border-dark-primary-100 {border-color: var(--primary-100) !important}
.dark .border-dark-primary-200 {border-color: var(--primary-200) !important}
.dark .border-dark-primary-300 {border-color: var(--primary-300) !important}
.dark .border-dark-primary-400 {border-color: var(--primary-400) !important}
.dark .border-dark-primary-500 {border-color: var(--primary-500) !important}
.dark .border-dark-primary-600 {border-color: var(--primary-600) !important}
.dark .border-dark-primary-700 {border-color: var(--primary-700) !important}
.dark .border-dark-primary-800 {border-color: var(--primary-800) !important}
.dark .border-dark-primary-900 {border-color: var(--primary-900) !important}

/* Dark Mode Color Fixes */
.dark .btn-danger {color: white}
.dark .btn-success {color: white}
.dark .btn-info {color: white}
.dark .btn-warning {color: #111827}
.dark .btn-light {color: #111827}
.dark .btn-dark {color: #fff}
.dark .btn-white {color: #111827}
.dark .btn-black {color: #fff}
.dark .btn-red {color: #fff}
.dark .btn-pink {color: #fff}
.dark .btn-teal {color: #fff}
.dark .btn-cyan {color: #fff}
.dark .btn-green {color: #fff}
.dark .btn-orange {color: #fff}
.dark .btn-purple {color: #fff}
.dark .btn-yellow {color: #111827}
.dark .btn-indigo {color: #fff}
.dark .btn-secondary {color: var(--light)}

.dark .btn-gray {color: #fff}
.dark .btn-gray-50 {color: #fff}
.dark .btn-gray-100 {color: #fff}
.dark .btn-gray-200 {color: #fff}
.dark .btn-gray-300 {color: #fff}
.dark .btn-gray-400 {color: #fff}
.dark .btn-gray-500 {color: #fff}
.dark .btn-gray-600 {color: #fff}
.dark .btn-gray-700 {color: #fff}
.dark .btn-gray-800 {color: #fff}
.dark .btn-gray-900 {color: #fff}
.dark .btn-primary {color: #fff}
.dark .btn-primary-50 {color: #fff}
.dark .btn-primary-100 {color: #fff}
.dark .btn-primary-200 {color: #fff}
.dark .btn-primary-300 {color: #fff}
.dark .btn-primary-400 {color: #fff}
.dark .btn-primary-500 {color: #fff}
.dark .btn-primary-600 {color: #fff}
.dark .btn-primary-700 {color: #fff}
.dark .btn-primary-800 {color: #fff}
.dark .btn-primary-900 {color: #fff}

.dark .btn-blue {color: #fff}
.dark .btn-blue-100 {color: #fff}
.dark .btn-blue-200 {color: #fff}
.dark .btn-blue-300 {color: #fff}
.dark .btn-blue-400 {color: #fff}
.dark .btn-blue-500 {color: #fff}
.dark .btn-blue-600 {color: #fff}
.dark .btn-blue-700 {color: #fff}
.dark .btn-blue-800 {color: #fff}
.dark .btn-blue-900 {color: #fff}

/* Button Colors */
.dark .btn-dark-black {background-color: black !important;border-color: black !important;color: white !important}
.dark .btn-dark-red {background-color: var(--red) !important;border-color: var(--red) !important;color: white !important}
.dark .btn-dark-pink {background-color: var(--pink) !important;border-color: var(--pink) !important;color: white !important}
.dark .btn-dark-green {background-color: var(--green) !important;border-color: var(--green) !important;color: white !important}
.dark .btn-dark-white {background-color: var(--white) !important;border-color: var(--white) !important;color: black !important}
.dark .btn-dark-orange {background-color: var(--orange) !important;border-color: var(--orange) !important;color: white !important}
.dark .btn-dark-purple {background-color: var(--purple) !important;border-color: var(--purple) !important;color: white !important}
.dark .btn-dark-yellow {background-color: var(--yellow) !important;border-color: var(--yellow) !important;color: #111827 !important}
.dark .btn-dark-blue {background-color: var(--blue) !important;border-color: var(--blue) !important;color: white !important}
.dark .btn-dark-blue-100 {background-color: var(--blue-100) !important;border-color: var(--blue-100) !important;color: black !important}
.dark .btn-dark-blue-200 {background-color: var(--blue-200) !important;border-color: var(--blue-200) !important;color: black !important}
.dark .btn-dark-blue-300 {background-color: var(--blue-300) !important;border-color: var(--blue-300) !important;color: black !important}
.dark .btn-dark-blue-400 {background-color: var(--blue-400) !important;border-color: var(--blue-400) !important;color: white !important}
.dark .btn-dark-blue-500 {background-color: var(--blue-500) !important;border-color: var(--blue-500) !important;color: white !important}
.dark .btn-dark-blue-600 {background-color: var(--blue-600) !important;border-color: var(--blue-600) !important;color: white !important}
.dark .btn-dark-blue-700 {background-color: var(--blue-700) !important;border-color: var(--blue-700) !important;color: white !important}
.dark .btn-dark-blue-800 {background-color: var(--blue-800) !important;border-color: var(--blue-800) !important;color: white !important}
.dark .btn-dark-blue-900 {background-color: var(--blue-900) !important;border-color: var(--blue-900) !important;color: white !important}
.dark .btn-dark-gray {background-color: var(--gray) !important;border-color: var(--gray) !important;color: white !important}
.dark .btn-dark-gray-50 {background-color: var(--gray-50) !important;border-color: var(--gray-50) !important;color: black !important}
.dark .btn-dark-gray-100 {background-color: var(--gray-100) !important;border-color: var(--gray-100) !important;color: black !important}
.dark .btn-dark-gray-200 {background-color: var(--gray-200) !important;border-color: var(--gray-200) !important;color: black !important}
.dark .btn-dark-gray-300 {background-color: var(--gray-300) !important;border-color: var(--gray-300) !important;color: black !important}
.dark .btn-dark-gray-400 {background-color: var(--gray-400) !important;border-color: var(--gray-400) !important;color: white !important}
.dark .btn-dark-gray-500 {background-color: var(--gray-500) !important;border-color: var(--gray-500) !important;color: white !important}
.dark .btn-dark-gray-600 {background-color: var(--gray-600) !important;border-color: var(--gray-600) !important;color: white !important}
.dark .btn-dark-gray-700 {background-color: var(--gray-700) !important;border-color: var(--gray-700) !important;color: white !important}
.dark .btn-dark-gray-800 {background-color: var(--gray-800) !important;border-color: var(--gray-800) !important;color: white !important}
.dark .btn-dark-gray-900 {background-color: var(--gray-900) !important;border-color: var(--gray-900) !important;color: white !important}
.dark .btn-dark-primary {background-color: var(--primary) !important;border-color: var(--primary) !important;color: white !important}
.dark .btn-dark-primary-50  {background-color: var(--primary-50) !important;border-color: var(--primary-50) !important;color: black !important}
.dark .btn-dark-primary-100 {background-color: var(--primary-100) !important;border-color: var(--primary-100) !important;color: black !important}
.dark .btn-dark-primary-200 {background-color: var(--primary-200) !important;border-color: var(--primary-200) !important;color: black !important}
.dark .btn-dark-primary-300 {background-color: var(--primary-300) !important;border-color: var(--primary-300) !important;color: black !important}
.dark .btn-dark-primary-400 {background-color: var(--primary-400) !important;border-color: var(--primary-400) !important;color: white !important}
.dark .btn-dark-primary-500 {background-color: var(--primary-500) !important;border-color: var(--primary-500) !important;color: white !important}
.dark .btn-dark-primary-600 {background-color: var(--primary-600) !important;border-color: var(--primary-600) !important;color: white !important}
.dark .btn-dark-primary-700 {background-color: var(--primary-700) !important;border-color: var(--primary-700) !important;color: white !important}
.dark .btn-dark-primary-800 {background-color: var(--primary-800) !important;border-color: var(--primary-800) !important;color: white !important}
.dark .btn-dark-primary-900 {background-color: var(--primary-900) !important;border-color: var(--primary-900) !important;color: white !important}

/* Button Hover Colors */
.dark .btn-dark-black:hover {color: white !important;}
.dark .btn-dark-red:hover {
    color: #fff !important;
    background-color: #ee3a3a !important;
    border-color: #b30f0f !important;
}
.dark .btn-dark-blue:hover {
    color: #fff !important;
    background-color: #3395ff !important;
    border-color: #0062cc !important;
}
.dark .btn-dark-pink:hover {
    color: #111827 !important;
    background-color: #f176b3 !important;
    border-color: #e71a7f !important;
}
.dark .btn-dark-green:hover {
    color: #fff !important;
    background-color: #24cc62 !important;
    border-color: #147638 !important;
}
.dark .btn-dark-white:hover {
    color: #111827 !important;
    background-color: white !important;
    border-color: #e6e6e6 !important;
}
.dark .btn-dark-orange:hover {
    color: #111827 !important;
    background-color: #fa9148 !important;
    border-color: #d65b06 !important;
}
.dark .btn-dark-purple:hover {
    color: #111827 !important;
    background-color: #ad8cf9 !important;
    border-color: #692cf3 !important;
}
.dark .btn-dark-yellow:hover {
    color: #111827 !important;
    background-color: #fddf7f !important;
    border-color: #fbc71b !important;
}

.dark .btn-dark-gray:hover {
    color: #fff !important;
    background-color: #616e80 !important;
    border-color: #353c46 !important;
}
.dark .btn-dark-gray-50:hover {
    color: #111827 !important;
    background-color: white !important;
    border-color: #dae1e7 !important;
}
.dark .btn-dark-gray-100:hover {
    color: #111827 !important;
    background-color: white !important;
    border-color: #d6d9e0 !important;
}
.dark .btn-dark-gray-200:hover {
    color: #111827 !important;
    background-color: white !important;
    border-color: #c8ccd5 !important;
}
.dark .btn-dark-gray-300:hover {
    color: #111827 !important;
    background-color: #eeeff1 !important;
    border-color: #b4bbc5 !important;
}
.dark .btn-dark-gray-400:hover {
    color: #111827 !important;
    background-color: #b8bdc6 !important;
    border-color: #808998 !important;
}
.dark .btn-dark-gray-500:hover {
    color: #fff !important;
    background-color: #858c99 !important;
    border-color: #545964 !important;
}
.dark .btn-dark-gray-600:hover {
    color: #fff !important;
    background-color: #616e80 !important;
    border-color: #353c46 !important;
}
.dark .btn-dark-gray-700:hover {
    color: #fff !important;
    background-color: #4c596f !important;
    border-color: #222933 !important;
}
.dark .btn-dark-gray-800:hover {
    color: #fff !important;
    background-color: #314158 !important;
    border-color: #0d1116 !important;
}
.dark .btn-dark-gray-900:hover {
    color: #fff !important;
    background-color: #202e4b !important;
    border-color: #020203 !important;
}

.dark .btn-dark-primary:hover {
    color: #fff !important;
    background-color: #295ea9 !important;
    border-color: #153057 !important;
}
.dark .btn-dark-primary-50:hover {
    color: #111827 !important;
    background-color: white !important;
    border-color: #c1edfb !important;
}
.dark .btn-dark-primary-100:hover {
    color: #111827 !important;
    background-color: white !important;
    border-color: #b1eafa !important;
}
.dark .btn-dark-primary-200:hover {
    color: #111827 !important;
    background-color: #f4fcfe !important;
    border-color: #94def8 !important;
}
.dark .btn-dark-primary-300:hover {
    color: #111827 !important;
    background-color: #d2edfa !important;
    border-color: #76c9f0 !important;
}
.dark .btn-dark-primary-400:hover {
    color: #111827 !important;
    background-color: #b6dcf2 !important;
    border-color: #5eb2e4 !important;
}
.dark .btn-dark-primary-500:hover {
    color: #111827 !important;
    background-color: #8ec1e7 !important;
    border-color: #3a93d5 !important;
}
.dark .btn-dark-primary-600:hover {
    color: white !important;
    background-color: #6f9fcb !important;
    border-color: #386c9c !important;
}
.dark .btn-dark-primary-700:hover {
    color: white !important;
    background-color: #417dc3 !important;
    border-color: #264c78 !important;
}
.dark .btn-dark-primary-800:hover {
    color: white !important;
    background-color: #295ea9 !important;
    border-color: #153057 !important;
}
.dark .btn-dark-primary-900:hover {
    color: white !important;
    background-color: #1b4595 !important;
    border-color: #0b1d3f !important;
}

.dark span.irs-grid span {color: var(--gray-300)!important;}
.dark span.irs-grid-pol.small { background-color: var(--gray-200)!important;}
.dark span.irs-grid-pol { background-color: var(--gray-400)!important;}
.dark span.irs-bar {background-color: var(--gray-900)!important;border: var(--gray-800)!important;}
.dark span.irs-handle.from, .dark span.irs-handle.to {background: var(--gray-400)!important;}
.dark span.irs-from, .dark span.irs-to {background: var(--gray-900)!important;}

.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--gray-800) inset !important;
    -webkit-text-fill-color: white;
}
.dark .checkmark, .dark .checkmark-sm, .dark .checkmark-lg {
    background-color: var(--gray-800);
}
.dark input[type=checkbox] + .checkmark svg path, .dark input[type=checkbox] + .checkmark-sm svg path, .dark input[type=checkbox] + .checkmark-lg svg path {
    fill: none !important;
}
.dark input[type=checkbox]:checked + .checkmark svg path, .dark input[type=checkbox]:checked + .checkmark-sm svg path, .dark input[type=checkbox]:checked + .checkmark-lg svg path {
    fill: #fff !important;
}

/* Boxes */
.dark .success-box {border: unset !important;}
.dark .secondary-box {border: unset !important;}
.dark .warning-box {border: unset !important;}
.dark .danger-box {border: unset !important;}
.dark .info-box {border: unset !important;}
.dark .purple-box {border: unset !important;}
.dark .orange-box {border: unset !important;}
.dark .yellow-box {border: unset !important;}

.dark .dark-block {display:block;}
.dark .dark-none {display:none;}
.dark .ck.ck-toolbar {background: var(--gray-400)!important;}

/* Date picker */
.dark .date-picker-wrapper .select-wrapper select {
    background-color: var(--gray-900);
    color: var(--gray-300);
}

:root {
    --sb-track-color: var(--blue-100);
    --sb-thumb-color: var(--blue-300);
}

::-webkit-scrollbar-track {
    background: var(--sb-track-color);
}

::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 10px;
    border:none;
}