body[data-theme=dark]{
    --dark-page: #0d1524;
    --dark-shell: #101a2c;
    --dark-surface: #182338;
    --dark-surface-2: #213754;
    --dark-surface-3: #121c2f;
    --dark-border: #3c4f6b;
    --dark-border-2: #46617f;
    --dark-text: #eaf4ff;
    --dark-text-soft: #d9ecff;
    --dark-muted: #bfd8f8;
    --dark-accent: #263d7a;
    --dark-accent-hover: #2a4569;
    --dark-accent-border: #73a7e8;
    background: var(--dark-page)!important;
    color: var(--dark-text)!important;
}
body[data-theme=dark] .header{
    background: var(--dark-shell);
    border-bottom: 1px solid var(--dark-border);
}

body[data-theme=dark] #global-loader {
    background: var(--dark-page);
}

body[data-theme=dark] i,
body[data-theme=dark] h4,
body[data-theme=dark] label,
body[data-theme=dark] div{
    color: var(--dark-text);
}

body[data-theme=dark] .sidebar .slimScrollDiv{
    background: var(--dark-shell);
}
body[data-theme=dark] .page-wrapper{
    background: var(--dark-page);
}

body[data-theme=dark] .sidebar .sidebar-menu>ul>li.submenu ul{
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius:5px;
    padding:10px 0;
}
body[data-theme=dark] .sidebar .sidebar-menu>ul>li.submenu ul li a{
    color: var(--dark-text-soft);
}

body[data-theme=dark] .dash-widget{
    background: var(--dark-surface);
    border:1px solid var(--dark-border);
}
body[data-theme=dark] .dash-widget .dash-widgetcontent h5{
    color: var(--dark-text);
}
body[data-theme=dark] .dash-widget .dash-widgetcontent h6{
    color: var(--dark-muted);
}

body[data-theme=dark] .card{
    background: var(--dark-surface);
    border:1px solid var(--dark-border);
}

body[data-theme=dark] .card .card-header .card-title{
    color: var(--dark-text);
}

body[data-theme=dark] .card .card-body .card-title{
    color: var(--dark-text);
}

body[data-theme=dark] .modal .modal-dialog .modal-content .modal-header{
    background: var(--dark-surface);
    border:1px solid var(--dark-border);
}
body[data-theme=dark] .modal-content{
    background: var(--dark-surface);
    border:1px solid var(--dark-border);
}

body[data-theme=dark] .table thead,
body[data-theme=dark] table.dataTable {
    background: var(--dark-shell)!important;
    border-bottom:1px solid var(--dark-border)!important;
}

body[data-theme=dark] .table thead tr:hover{
    background: transparent!important;
}

body[data-theme=dark] .table thead tr th{
    background: var(--dark-surface-2);
    color: var(--dark-text)!important;
    border: solid var(--dark-border) 1px;
}

body[data-theme=dark] .table tfoot tr th{
    background: var(--dark-surface-2);
    color: var(--dark-text)!important;
    border: solid var(--dark-border) 1px;
}

body[data-theme=dark] .table tbody tr:hover{
    background: var(--dark-accent-hover)!important;
}

body[data-theme=dark] .table tbody tr td{
    background: var(--dark-surface);
    color: var(--dark-text)!important;
    border: solid var(--dark-border) 1px;
}

body[data-theme=dark] input[type=text],
body[data-theme=dark] input[type=search],
body[data-theme=dark] input[type=password],
body[data-theme=dark] input[type=number],
body[data-theme=dark] input[type=file],
body[data-theme=dark] input[type=date],
body[data-theme=dark] input[type=datetime-local] {
    border: 1px solid var(--dark-border)!important;
    color: var(--dark-text)!important;
    background: var(--dark-surface-3)!important;
}

body[data-theme=dark] input::placeholder,
body[data-theme=dark] textarea::placeholder{
    color: var(--dark-muted)!important;
}

body[data-theme=dark] .input-group-text {
    border: 1px solid var(--dark-border)!important;
    color: var(--dark-text)!important;
    background: var(--dark-surface-2)!important;
}

body[data-theme=dark] .card-body {
    color: var(--dark-text)!important;
    background: var(--dark-surface)!important;
}

body[data-theme=dark] textarea {
    border: 1px solid var(--dark-border)!important;
    color: var(--dark-text)!important;
    background: var(--dark-surface-3)!important;
}

body[data-theme=dark] .error-page .main-wrapper .error-box h3{
    color: var(--dark-text);
}

body[data-theme=dark] .error-page .main-wrapper .error-box p{
    color: var(--dark-muted);
}

body[data-theme=dark] .sidebar .sidebar-menu>ul>li>a span{
    color: var(--dark-text-soft);
}

body[data-theme=dark] .form-select{
    background-color: var(--dark-surface-3);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

body[data-theme=dark] .nav-tabs{
    border-color: var(--dark-border);
}

body[data-theme=dark] .nav-tabs .nav-link:hover{
    color: var(--dark-text);
    border-color: var(--dark-border);
}
body[data-theme=dark] .nav-tabs::after{
    background: var(--dark-border);
}

body[data-theme=dark] .mobile .nav-tabs .nav-item.show .nav-link,
body[data-theme=dark]  .nav-tabs .nav-link.active {
    color: #fff;
    background-color: var(--dark-accent);
    border-color: var(--dark-accent-border);
}

body[data-theme=dark]  .breadcrumb .breadcrumb-item a{
    color: var(--dark-muted);
}

body[data-theme=dark] .select2-container--default .select2-selection--single {
    border: 1px solid var(--dark-border)!important;
    background: var(--dark-surface-3);
    color: var(--dark-text);
}

body[data-theme=dark] .select2-selection .select2-selection--single {
    border: 1px solid var(--dark-border)!important;
    background: var(--dark-surface-3);
    color: var(--dark-text);
}

body[data-theme=dark] .select2-dropdown{
    color: var(--dark-text)!important;
    background: var(--dark-surface)!important;
    border: 1px solid var(--dark-border);
}

body[data-theme=dark] .select2-container--focus {
    color: var(--dark-text)!important;
    background: var(--dark-surface)!important;
}

body[data-theme=dark] .select2-results {
    color: var(--dark-text)!important;
    background: var(--dark-surface)!important;
}

body[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--dark-muted) transparent transparent transparent;
}

body[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--dark-text);
    background: var(--dark-surface-3)!important;
}

body[data-theme=dark] .select2-container--default .select2-results__option[aria-selected=true] {
    color: #fff;
    background: var(--dark-accent);
}

body[data-theme=dark] .select2-container--default .select2-results__option--highlighted[aria-selected]{
    background: var(--dark-accent-hover);
    color: #fff;
}
body[data-theme=dark] .select2-container--focus .select2-selection--single{
    background: var(--dark-surface-2)!important;
    border-color: var(--dark-accent-border)!important;
}

body[data-theme=dark] .list-group-item {
    color: var(--dark-text);
    background-color: var(--dark-surface);
    border: var(--bs-list-group-border-width) solid var(--dark-border);
}

body[data-theme=dark]  .list-group-item.active{
     color: #fff;
     background-color: var(--dark-accent);
     border-color: var(--dark-accent-border);
}

body[data-theme=dark] .list-group-item a {
    color: var(--dark-text);
}

body[data-theme=dark] .modal-footer {
    border-top: var(--bs-modal-footer-border-width) solid var(--dark-border);
}

body[data-theme=dark] .footer-div {
    background: var(--dark-page);
}

body[data-theme=dark] .dropdown-menu {
    color: var(--dark-text);
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border)!important;
}

body[data-theme=dark] .dropdown-menu a{
    color: var(--dark-text)!important;
}

body[data-theme=dark] .dropdown-item {
    color: var(--dark-text);
}

body[data-theme=dark] .dropdown-item:hover {
    color: #fff;
    background: var(--dark-accent-hover);
}

body[data-theme=dark] .note-btn {
    color: var(--dark-text);
    background-color: var(--dark-surface-2);
    border-color: var(--dark-border);
}

body[data-theme=dark] .note-editor.note-airframe,
body[data-theme=dark] .note-editor.note-frame {
    border: 2px solid var(--dark-border);
}

body[data-theme=dark] .note-editor.note-frame .note-statusbar .note-resizebar {
    background: var(--dark-border);
}

body[data-theme=dark] .container-spliter {
    background: transparent;
}

body[data-theme=dark] .note-editor.note-airframe,
body[data-theme=dark] .note-editor.note-frame {
    background: var(--dark-surface-3);
}

body[data-theme=dark] .note-editor .note-toolbar {
    background: var(--dark-surface);
}

body[data-theme=dark] .alert {
    color: var(--dark-text);
    background-color: var(--dark-surface-2);
    border: 1px solid var(--dark-border);
}

body[data-theme=dark] .fc-timeline-slot-frame a,
body[data-theme=dark] .fc-scrollgrid-sync-inner a{
    color: var(--dark-text);
}

body[data-theme=dark] .fc-button,
body[data-theme=dark] .fc-button-active{
    border: 1px solid var(--dark-border)!important;
    background: var(--dark-surface-2)!important;
    color: var(--dark-text)!important;
}
body[data-theme=dark] .table tbody tr td a {
    color: var(--dark-text)!important;
}
body[data-theme=dark] .sub_sub_menu>a{
    background: var(--dark-surface)!important;
    color: var(--dark-text)!important;
}
body[data-theme=dark] .card-footer{
    background: var(--dark-surface)!important;
    color: var(--dark-text)!important;
    border-top: 1px solid var(--dark-border);
}
body[data-theme=dark] .btn-submit {
    background: var(--dark-accent);
    border-color: var(--dark-accent-border);
    color: #fff;
}

body[data-theme=dark] .btn-submit:hover {
    background: var(--dark-accent-hover) !important;
    border-color: #fff !important;
    color: #fff !important;
}

body[data-theme=dark] .btn-cancel {
    background: var(--dark-surface-2);
    border-color: var(--dark-border-2);
    color: #fff;
}

body[data-theme=dark] .btn-cancel:hover {
    background: var(--dark-surface-3) !important;
    border-color: #fff !important;
    color: #fff !important;
}

body[data-theme=dark] .sidebar .sidebar-menu>ul>li.active a {
    background: var(--dark-accent);
}
body[data-theme=dark] .sidebar .sidebar-menu>ul>li :hover{
    background: var(--dark-accent-hover);
}
body[data-theme=dark] .add-icon span,
body[data-theme=dark] .add-icon a {
    background: var(--dark-accent);
    color: #fff;
}
body[data-theme=dark] .active>.page-link,
body[data-theme=dark] .page-link.active {
    background-color: var(--dark-accent);
    border-color: var(--dark-accent-border);
    color: #fff;
}

body[data-theme=dark] .product-details {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
}

body[data-theme=dark] .product-details h6,
body[data-theme=dark] .productset .productsetcontent h4 {
    color: var(--dark-text);
}

body[data-theme=dark] .productset {
    border: 1px solid var(--dark-border);
    background: var(--dark-surface);
}

body[data-theme=dark]  .calculator-set ul li button{
    border: 1px solid var(--dark-border);
    background: var(--dark-surface);
    color: var(--dark-text);
}

body[data-theme=dark] .pagination li {
    border: 1px solid var(--dark-border);
    background: var(--dark-surface);
    color: var(--dark-text);
}

body[data-theme=dark] .page-link {
    color: var(--dark-text);
    background-color: var(--dark-surface-2);
    border: 1px solid var(--dark-border);
}

body[data-theme=dark] #global-loader {
    background: var(--dark-shell);
}
body[data-theme=dark] .bg-light {
    background-color: var(--dark-surface) !important;
}

body[data-theme=dark] .accordion-button,
body[data-theme=dark] .accordion-body  {
    color: var(--dark-text);
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border);
}

body[data-theme=dark] .swal2-popup {
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
    background: var(--dark-surface);
}

body[data-theme=dark] .swal2-title {
    color: var(--dark-text);
}

body[data-theme=dark] .offcanvas {
    color: var(--dark-text);
    background-color: var(--dark-surface);
}

body[data-theme=dark] .page-header .page-btn .btn {
    border: 1px solid var(--dark-border-2)!important;
    background: var(--dark-surface-2) !important;
    color: var(--dark-text) !important;
}

body[data-theme=dark] .page-header .page-btn .btn:hover,
body[data-theme=dark] .page-header .page-btn a.btn:hover,
body[data-theme=dark] .page-header .page-btn .btn-group > .btn:hover {
    background: var(--dark-accent-hover) !important;
    border-color: #fff !important;
    color: #fff !important;
}