.dark-mode {
    --bg-main: var(--dark);
    --bg-sidebar: var(--dark);
    --bg-card: var(--dark);
    --bg-card-header: var(--third);
    --bg-hover: #1f1f2a;
    --bg-table-even: #14141c;
    --bg-navigation: var(--primary);
    --bg-sidebar-card-header: var(--primary);
    --bg-action-btn: var(--inactive);
    --bg-line: var(--inactive);
    --bg-table-header: #3a4555;
    --border-card-body: var(--grey);
    --color-input-default: var(--grey);

    --border-soft: #262633;
    --border-strong: #2f2f3d;
    --border-sidebar-card: #344050;
    --border-table-th: #565b63;
    --border-table-td: #565b63;
    --border-dark: var(--dark);

    --text-main: #e4e4e7;
    --text-muted: #a1a1aa;
    --text-strong: #ffffff;

    --dark: var(--fifth);
    --accent: #5eead4;
    --accent-hover: #2dd4bf;
    --error-alpha-1: #f9eaea;

    --td-color-disable: #444444;
    --bg-td-disable:#B8B8B8;

    background: var(--bg-main);
    color: var(--text-main);
}

.dark-mode body {
    background: transparent;
}

/* ======================================================NAVBAR====================================================== */

.dark-mode .navbar,
.dark-mode header {
    background: var(--bg-navigation) !important;
    border-bottom: 1px solid var(--bg-line);
    box-shadow: none;
}

.dark-mode .nav-link:not(.active):not(:hover),
.dark-mode .navbar-brand {
    color: var(--text-strong) !important;
}

/* ====================================================== SIDEBAR ====================================================== */

.dark-mode .sidebar,
.dark-mode .sidenav {
    background: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-soft);
}

.dark-mode .sidebar .list-group-item {
    background: transparent;
    color: var(--text-muted);
    border: none;
    transition: all 0.15s ease;
}

.dark-mode .sidebar .list-group-item:hover {
    background: var(--bg-hover);
    color: var(--text-strong);
}

.dark-mode .sidebar .list-group-item.active {
    background: var(--bg-hover);
    color: var(--text-strong);
    border-left: 3px solid var(--accent);
}

.dark-mode #left-sidebar .btn-group .btn {
    border: 0.01rem solid var(--border-soft);
}

.dark-mode #left-sidebar .card .card-body .menu-item-flex:not(:last-child) {
    border-bottom: 1px solid var(--border-sidebar-card);
}

.dark-mode #left-sidebar .btn-secondary:not(.selected-favorite) {
    background-color: #3b82f6 !important;
}

.dark-mode #left-sidebar .selected-favorite {
    background: var(--white) !important;
    color: var(--dark) !important;
}

.dark-mode #left-sidebar .card .card-header {
    background-color: var(--bg-sidebar-card-header) !important;
    color: var(--text-strong) !important;
}

.dark-mode #left-sidebar .card .icon-favorite {
    color: var(--text-strong) !important;
}

.dark-mode #left-sidebar .card {
    border: 1px solid var(--border-sidebar-card);
}

.dark-mode .sidenav-menu .btn.btn-floating {
    background-color: var(--white);
}

.dark-mode .sidenav-menu .sidenav-item .sidenav-link span {
    color: #c4c4c4;
}

.dark-mode .sidenav-menu .sidenav-item .sidenav-link:hover span, .dark-mode .sidenav-menu .sidenav-item .sidenav-link:focus span {
    color: var(--black);
}

.dark-mode .sidenav-link.active:not(.sidenav-link-category) {
    color: var(--cargo) !important;
}

.dark-mode .sidenav-item .sidenav-link:hover, .dark-mode .sidenav-link:active, .dark-mode .sidenav-link:focus {
    color: var(--black) !important;
    background-color: var(--primary-alpha) !important;
}

.dark-mode .sidenav-item .sidenav-link.item-link-error {
    color: var(--error-solid) !important;
}
/* ====================================================== CARDS – SHARP & CLEAN ====================================================== */

.dark-mode .card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    box-shadow: none;
}


.dark-mode .card-header {
    background: var(--bg-card-header);
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-strong) !important;
    font-weight: 600;
}

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

.dark-mode .div-select-rows-per-page .select-wrapper .form-outline .form-control ~ .form-notch .form-notch-leading {
    border-radius: 0.525rem 0 0 0.525rem;
}


.dark-mode .div-select-rows-per-page .select-wrapper .form-control ~ .form-notch .form-notch-trailing {
    border-radius: 0 0.525rem 0.525rem 0;
}

.dark-mode .rowsPerPage {
    color: white;
}

.dark-mode .page-link-custom, .page-link-custom:hover {
    color: unset;
}

.dark-mode #rowsPerPage .form-control.select-input {
    background-color: #062040;
    color: var(--white);
}

.dark-mode #rowsPerPage .select-arrow::before {
    color: var(--white) !important;
}

.dark-mode .payPeriod {
    background-color: var(--white);
}

.dark-mode .header-title:not(.line-header-error) {
    background-color: #0a2c56;
    color: var(--white);
}

.dark-mode .header-title {
    border-left: 6px solid var(--second);
}

.dark-mode .line-header-focus {
    border-left: 6px solid var(--cargo);
    /*//color: var(--white);*/
}

.dark-mode .line-header-error:not(.line-header-focus) {
    border-left: 6px solid var(--error-solid);
    color: var(--error-solid);
    background-color: var(--error-alpha-1) !important;
}

.dark-mode .line-header-dirty:not(.line-header-error):not(.line-header-focus) {
    border-left: 6px solid var(--third);
    color: var(--white);
}


.dark-mode .spacing-div {
    border-right: 1px solid var(--border-soft);
}

.dark-mode .card-content {
    background-color: transparent;
    color: var(--text-main);
}

.dark-mode .card-body textarea {
    background-color: #101018;
    color: var(--white);
}

.dark-mode .card-header.no-thick {
    background-color: transparent !important;
    color: var(--text-main);
}

.dark-mode .card-footer {
    background-color: transparent;
    border-top: 1px solid var(--border-soft);
    color: var(--text-main);
}


/* ====================================================== TABLES – HIGH CONTRAST DATA ====================================================== */

.dark-mode table {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0;
}

.dark-mode .table.table-list th,.dark-mode .table.table-bordered th, .dark-mode .table-editable:not(.not-change-color-header) thead th {
    background: var(--bg-table-header) !important;
    color: var(--text-strong) !important;
    border: 1px solid var(--border-table-th) !important;
    font-weight: 600;
}

.dark-mode .table.table-list td,.dark-mode .table.table-bordered tr td,
.dark-mode .table.table-editable tr:not(.batch-row, .bg-grey-alpha) td:not(.bg-tr-summary, .group-name-config) {
    border-bottom: 1px solid var(--border-table-td) !important;
    border-right: 1px solid var(--border-table-td) !important;
    color: var(--text-main) !important;
}


.dark-mode .table.table-bordered tr.bg-tr-summary td div{color: var(--primary)!important; background-color: #d5e7fd!important;}
.dark-mode .table.table-bordered tr td.bg-tr-summary{color: var(--primary);background-color: #d5e7fd!important;}
.dark-mode .table.table-list tr td:first-child,
.dark-mode .table.table-bordered tr td:first-child:not(.custom-text-color),
.dark-mode .table-editable tr:not(.batch-row) td:first-child:not(.not-set-border-left):not(.custom-text-color) {
    border-left: 1px solid var(--border-table-td) !important;
    color: var(--text-main) !important;
}

.dark-mode table.table-list tr:nth-child(even), .dark-mode table.table-bordered tr:nth-child(even) {
    background: var(--dark);
}

.dark-mode table.table-list tr td a i {color: white}
.dark-mode #listDriverProduction tbody tr td {
    background: var(--bg-table-even) !important;
}

.dark-mode table.table-list tbody tr:hover td, .dark-mode table.table-bordered:not(.table-editable) tbody tr:hover td {
    background: var(--bg-hover);
}

.dark-mode table:not(.accordion-table-trip, .table-mdb, .table-editable, .accordion-table, .datepicker-table) tbody tr:not(.no-hover):hover td,
.dark-mode table:not(.accordion-table-trip, .table-editable, .datepicker-table, .accordion-table) tbody tr:hover td:not(.dropdown) a {
    background: #2a3a55 !important;
    color: var(--white)
}

.dark-mode table .hyperlinked-text{color: white;}

.dark-mode .table-editable .bg-grey-alpha{
    background-color:#B8B8B8 !important;
    color: #8b93a7 !important;
}

.dark-mode td.cell-disable {
    background-color: unset;
    color: unset;
}

.dark-mode .table .noData {
    color: var(--white);
}

.dark-mode .table-editable tr td{
    color: var(--white);
}


.dark-mode table:not(.table-dispatch, .datepicker-table) {color: var(--text-main);}
.dark-mode table:not(.table-dispatch, .datepicker-table) thead tr th{background-color: var(--bg-table-header);}
.dark-mode table thead tr th.sortable a {color: var(--text-strong) !important;}

.dark-mode .table tr td a.link-tbl,
.dark-mode .table.table-list tbody tr td a,
.dark-mode .table.table-list tbody tr td div.hyperlinked-text,
.dark-mode .table.table-list tbody tr td.hyperlinked-text {
    color: white !important;
}

.dark-mode .table.table-list tbody tr td:focus,
.dark-mode .table.table-list tbody tr td:focus-within,
.dark-mode .table.table-list tbody tr td:focus a:not(.dropdown-item) {
    background-color: #24476a !important;
    color: var(--white) !important;
}

.dark-mode .table.table-list tbody tr:focus-within{
    background-color: #24476a !important;
    color: var(--white) !important;
}

.dark-mode .table tbody tr.calculate-total td {
    background-color: #1b2433;
    color: var(--white);
}

.dark-mode .table tbody tr.tr-total td,
.dark-mode .table tbody tr.tr-total td input {
    background-color: #1b2433;
    color: var(--white);
}


.dark-mode .cell-white-bg {background-color: #101018 !important;}


.dark-mode .table-select-row tr:hover {background-color: #223047 !important;}

.dark-mode .table:not(.accordion-table-trip, .table-editable):not(.accordion-table) tbody tr:hover td:not(.dropdown) a {
    background: #223047 !important;
    color:white;
}

.dark-mode .table.table-list tbody tr:focus-within td.dropdown .dropdown-menu,
.dark-mode .table tbody tr .dropdown .dropdown-menu {
    background-color: #1b2433 !important;
    border: 1px solid var(--border-soft);
}

.dark-mode .table tbody tr .dropdown .dropdown-item,
.dark-mode .table tbody tr td:focus-within.dropdown .dropdown-item {
    background-color: transparent;
    color: var(--text-main);
}


/* ======================================================
   TABLE EDITABLE
====================================================== */
.dark-mode .table-editable tbody tr td input[type=text],
.dark-mode .table-editable tbody tr td textarea,
.dark-mode .table-editable tbody tr td .select-input.form-control[readonly]:not([disabled]) {
    background-color:var(--dark);
    color: var(--white);
    border-radius: unset;
}

.dark-mode .table-editable tbody tr td input[type="text"]:focus, .dark-mode .table-editable tbody tr td input[type="text"]:focus:hover{color: var(--text-main)}
.dark-mode .dirtylisten .table-editable .form-outline input.form-control.dirty:not(:focus,.isError){
    border-radius: 0;
}

.dark-mode .table-editable:not(.dataTable) tbody tr:focus-within td.position-relative,
.dark-mode .table-editable:not(.dataTable) tbody tr:focus-within td input[type=text],
.dark-mode .table-editable:not(.dataTable) tbody tr:focus-within td textarea,
.dark-mode .table-editable:not(.dataTable) tbody tr:focus-within td .select-input.form-control[readonly]:not([disabled]),
.dark-mode .table-editable:not(.dataTable) tbody tr:focus-within td div.same-background {
    background-color: var(--dark) !important;
    color: var(--white) !important;
    border-radius: unset;
}

.dark-mode .table-editable:not(.dataTable) tbody tr td input[type=text]:focus,
.dark-mode .table-editable:not(.dataTable) tbody tr td textarea:focus,
.dark-mode .table-editable:not(.dataTable) tbody tr td.isCompleted input[type=text]:focus,
.dark-mode .table-editable:not(.dataTable) tbody tr td.isCompleted textarea:focus {
    background-color: var(--dark) !important;
    color: var(--white) !important;
    border: solid 0.063rem #4ea1ff !important;
}

.dark-mode .table-editable:not(.table-dispatch) tbody tr td.isCompleted:not(.isError) {
    background-color: unset;
}

.dark-mode .table-editable:not(.table-dispatch) tbody tr td.isCompleted input[type=text].dirty,
.dark-mode .table-editable:not(.table-dispatch) tbody tr td.isCompleted textarea,
.dark-mode .table-editable:not(.table-dispatch) tbody tr td.isCompleted .select-input.form-control[readonly]:not([disabled]) {
    color:var(--primary);
    background-color: var(--primary-alpha);
}

.dark-mode .table-editable:not(.table-dispatch) tbody tr td.isError input[type=text],
.dark-mode .table-editable:not(.table-dispatch) tbody tr td.isError textarea,
.dark-mode .table-editable:not(.table-dispatch) tbody tr td.isError .form-outline input.form-control[type=text],
.dark-mode .table-editable:not(.table-dispatch) tbody tr td.isError .form-outline textarea.form-control {
    background-color: rgba(220, 38, 38, 0.12);
    color: #fca5a5;
}


.dark-mode .table-editable:not(.table-dispatch) tbody tr td input[type=text]:disabled,
.dark-mode .table-editable:not(.table-dispatch) tbody tr td textarea:disabled,
.dark-mode .table-editable:not(.table-dispatch) tbody tr td input[type=text]:not(.select-input):read-only{
    background-color: #1b2433 !important;
    border: solid 0.063rem #3b4252 !important;
}

.dark-mode .table-editable:not(.table-dispatch) tbody tr td.position-relative input[type=checkbox] {
    background-color: #101018;
}

.dark-mode .border-left-table {
    border-left: solid 0.031rem var(--border-table-td) !important;
}

.dark-mode .table-bordered .tr-location td {
    border-top: solid 0.031rem var(--border-table-td) !important;
}

.dark-mode .table tbody td.border-top-black-td {
    border-top: solid 2px #5b6472 !important;
}

.dark-mode .table tbody tr.border-bottom-black-tr td {
    border-bottom: solid 2px #5b6472 !important;
}

.dark-mode .noThead {
    border-top: 1px solid var(--border-table-td);
    border-left: 1px solid var(--border-table-td);
}
.dark-mode .table-editable:not(.table-dispatch) tr:nth-child(2n+1){background-color: var(--dark);color: var(--text-main)}

/* ---------- modal table ---------- */

.dark-mode .modal-pro-driver-pay *.dropdown .dropdown-menu {
    background-color: #1b2433;
    box-shadow: none;
    border: 1px solid var(--border-soft);
}

.dark-mode .modal-pro-driver-pay .dropdown-menu-add-dp .hyperlinked-text {
    color: var(--text-main);
}

.dark-mode .modal-pro-driver-pay .table tbody tr .dropdown .dropdown-item:hover,
.dark-mode .modal-pro-driver-pay .table tbody tr td:focus-within.dropdown .dropdown-item:hover {
    background-color: #24476a !important;
    color: var(--white);
}


/* ======================================================
   DATATABLE DARK MODE
====================================================== */

.dark-mode .dataTable:not(.table-dispatch) th {
    background-color: var(--bg-table-header) !important;
    color: var(--text-strong) !important;
    border-color: var(--border-table-th) !important;
}

.dark-mode .dataTable:not(.table-dispatch) td {
    background-color: #101018;
    color: var(--text-main);
}

.dark-mode .selected-row td {
    background: #24476a !important;
    color: var(--white) !important;
}


.dark-mode table.dataTable:not(.table-editable) tbody tr:hover td {
    background: #223047 !important;
    color: var(--white) !important;
}

.dark-mode .dataTable thead th:first-child,
.dark-mode .dataTable thead td:first-child,
.dark-mode .dataTable tbody td:first-child {
    border-left: 1px solid var(--border-table-td);
}

.dark-mode table.dataTable.cell-border > tbody > tr > * {
    border-bottom: 1px solid var(--border-table-td);
}


.dark-mode div.dt-container .dt-paging .dt-paging-button.current,
.dark-mode div.dt-container .dt-paging .dt-paging-button.current:hover {
    background-color: white!important;
    color: var(--primary) !important;
    border-color: white!important;
}

.dark-mode div.dt-container .dt-paging .dt-paging-button {
    background: #101018;
    color: var(--text-main) !important;
    border-right: 0.0313rem solid var(--border-table-td);
    border-top: 0.0313rem solid var(--border-table-td);
    border-bottom: 0.0313rem solid var(--border-table-td);
}

.dark-mode div.dt-container .dt-paging .dt-paging-button:hover {
    background: #223047 !important;
    color: var(--white) !important;
    border: 0.0313rem solid var(--border-table-td);
}

.dark-mode .button-paging {
    background: #101018;
    border: 0.0313rem solid var(--border-table-td);
    color: var(--text-main);
}

.dark-mode div.dt-container .dt-paging .ellipsis {
    background: #101018;
    color: var(--text-main);
    border-right: 0.0313rem solid var(--border-table-td);
    border-top: 0.0313rem solid var(--border-table-td);
    border-bottom: 0.0313rem solid var(--border-table-td);
}

.dark-mode #simpleDispatchPage div.dt-container .dt-paging .ellipsis,
.dark-mode #dispatchByBookingPage div.dt-container .dt-paging .ellipsis {
    border-right: 0.0313rem solid white;
    border-top: 0.0313rem solid white;
    border-bottom: 0.0313rem solid white;
}

.dark-mode .modal table tbody td {color: var(--white);}
.dark-mode .child-container {background-color: transparent;}
.dark-mode .datatable:not(.table-dispatch) tbody {color: var(--text-main);}
.dark-mode table.dataTable:not(.table-dispatch) {border-color: transparent;}
.dark-mode .details-grid, .dark-mode .details-location-grid {
    color: var(--text-main);
}

.dark-mode .dataTable:not(.table-dispatch) {
    background: transparent !important;
    color: var(--text-main) !important;
}


.dark-mode table.dataTable:not(.table-dispatch) thead th,
.dark-mode table.dataTable:not(.table-dispatch) thead td,
.dark-mode .dataTable:not(.table-dispatch) th {
    background: var(--bg-table-header) !important;
    color: var(--text-strong) !important;
    border-color: var(--border-table-th) !important;
}

.dark-mode table.dataTable:not(.table-dispatch) tbody td,
.dark-mode .dataTable:not(.table-dispatch) td {
    background: #101018 !important;
    color: var(--text-main) !important;
    border-color: var(--border-table-td) !important;
}


.dark-mode table.dataTable:not(.table-dispatch) tbody tr:nth-child(odd) td {
    background: #14141c !important;
}

.dark-mode table.dataTable:not(.table-dispatch) tbody tr:nth-child(even) td {
    background: #101018 !important;
}

.dark-mode table.dataTable:not(.table-editable) tbody tr:hover td {
    background: #223047 !important;
    color: #fff !important;
}


/* ====================================================== BUTTONS – LINEAR ACCENT ====================================================== */

.dark-mode .btn-primary {
    /*background: var(--accent);*/
    border: none;
    color: var(--text-strong);
    font-weight: 600;
}

.dark-mode .btn-primary:hover {
    /*background: var(--accent-hover);*/
}

.dark-mode .btn-light {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    color: var(--text-main);
}

.dark-mode .btn-light:hover {
    background: var(--bg-hover);
}

.dark-mode .header-title .btn-primary-custom {
    background-color: var(--second);
}

.dark-mode .btn-primary-outline, .dark-mode .btn-primary-outline:hover, .dark-mode .btn-primary-outline:focus:not(:focus-visible) {
    border: 2px solid var(--white);
    color: var(--white);
}

.dark-mode .btn-custom-second, .dark-mode .btn-custom-second:hover, .dark-mode .btn-custom-second:focus:not(:focus-visible) {
    border: 2px solid var(--white);
    background-color: var(--white);
    color: var(--black);
}

.dark-mode .header-title .btn-primary-custom {
    background-color: var(--white);
    color: var(--black);
    border: 2px solid var(--white);
}

.dark-mode .header-title.line-header-error .btn-primary-custom {
    background-color: var(--second) !important;
    color: var(--white) !important;
    border: 2px solid var(--second) !important;
}

.dark-mode .table-editable:not(.table-dispatch) tbody tr td input[type=text], .dark-mode .table-editable tbody tr td textarea {
    color: var(--white);
}

/* ====================================================== FORMS ====================================================== */

.dark-mode .form-control:not(.no-text-gray),
.dark-mode .form-select,
.dark-mode textarea {
    background: #101018;
    color: var(--text-main);
    border-radius: 0.5rem;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background: #181824;
    /*border-color: var(--accent);*/
    box-shadow: none;
}

.dark-mode .form-control::placeholder {
    color: var(--text-muted);
}

.dark-mode .form-outline .form-control.disabled,
.dark-mode .form-outline .form-control:disabled,
.dark-mode .form-outline .form-control[readonly] {
    background-color: #0a1524
}

.dark-mode .form-outline .form-control:not(.no-text-gray) {
    color: var(--white);
    background-color: #0a1524;
}

.dark-mode .form-outline .form-control ~ .form-notch .form-notch-leading {
    border-color: var(--grey);
}

.dark-mode .form-outline .form-control ~ .form-notch .form-notch-trailing {
    border-color: var(--grey);
}

.dark-mode .form-outline .form-control ~ .form-label {
    color: var(--white);
}

.dark-mode .form-outline .form-control:focus ~ .form-notch .form-notch-leading {
    border-color: var(--grey);
}
.dark-mode .form-outline:has(.form-control:focus) i.datepicker-toggle-icon{color: var(--primary)}

.dark-mode .form-outline .form-control.active ~ .form-notch .form-notch-middle, .form-outline .form-control:focus ~ .form-notch .form-notch-middle {
    border-top: 1px solid transparent;
}

.dark-mode .form-outline .form-control ~ .form-notch .form-notch-middle {
    border-color: var(--grey);
    border-left: none;
    border-right: none;
    box-shadow: none;
}

.dark-mode .form-outline .form-control:focus ~ .form-notch .form-notch-middle {
    border-color: var(--grey);
    border-top: unset;
}

.dark-mode .form-outline .form-control:focus ~ .form-label {
    color: var(--white);
}

.dark-mode .form-outline .form-control:focus {
    color: var(--white);
    background-color: #0a1524;
    border-radius: 0.5rem;
    /*text-shadow: 0 2px 4px rgba(0,0,0,0.5);*/
}

.dark-mode .form-check-label,.dark-mode .form-check .form-check-label a {
    color: var(--white);
}

.dark-mode form:not(.formSearch) .datepicker .datepicker-toggle-button .datepicker-toggle-icon {
    color: var(--white) !important;
}


.dark-mode .dirtylisten .form-outline input.form-control.active.dirty:not(:focus,.isError) ~ label.form-label {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);

}

.dark-mode .dirtylisten .form-outline textarea.form-control.active.dirty:not(:focus,.isError) ~ label.form-label {
    color: var(--white);
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.dark-mode .dirtylisten .form-outline input.form-control.dirty:not(:focus,.isError) {
    border-radius: 0.5rem;color: var(--primary);
    color: var(--primary);
}

.dark-mode.form-outline .form-control.isError:not(:focus,.active) ~ .form-label,
.dark-mode.form-outline .form-control.isError:not(:focus,.active) {
    color: #ffffff;
}


.dark-mode .form-outline .form-control.isError:not(:focus,.active) ~ .form-notch .form-notch-leading {
    background-color: transparent;
}

.dark-mode .form-outline .form-control.isError:not(:focus,.active) ~ .form-notch .form-notch-middle {
    background-color:transparent;
}

.dark-mode .form-outline .form-control.isError:not(:focus,.active) ~ .form-notch .form-notch-trailing {
    background-color: transparent;
}

.dark-mode .form-outline .form-control.isError:not(:focus,.active) ~ .form-label,
.dark-mode .form-outline .form-control.isError:not(:focus,.active) {
    color: #ffffff;
}

.dark-mode .form-outline .form-control.form-control-lg.active~.form-label,.dark-mode.form-outline .form-control.form-control-lg:focus~.form-label {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.dark-mode .form-outline .form-control.form-control-lg.active:focus~.form-label, .dark-mode .form-outline .form-control.form-control-lg:focus~.form-label {
    color: var(--second);
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,.95) ;
}


.dark-mode .dirtylisten .form-outline input.form-control.dirty:not(:focus,.isError) ~.form-label ,
.dark-mode .dirtylisten .form-outline textarea.form-control.dirty:not(:focus,.isError) ~.form-label {
    color: var(--primary);
}

.dark-mode .form-outline:has(input.dirty:not(:focus)) .icon-eye {
    color: var(--primary);
}

/* ====================================================== PAGINATION====================================================== */

.dark-mode .page-link {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    color: var(--white);
}

.dark-mode ul.pagination-custom-new, .dark-mode .pagination {
    /*background: #1f1f2a;*/
    /*border: 1px solid var(--border-soft);*/
    box-shadow: 0 0 0 0.02rem var(--grey);
    background: #14141d;
    border: 1px solid var(--white);
    color: var(--white);
}

.dark-mode ul.pagination-custom-new .page-item.active .page-link-custom, .dark-mode .pagination .page-item.active .page-link {
    box-shadow: 0 0 0 0.02rem var(--grey);
    background: var(--white);
    border: 1px solid var(--white);
    color: var(--black);
}

.dark-mode .page-link:hover {
    background: var(--bg-hover);
}

.dark-mode .page-link-custom {
    border-left: solid 1px var(--border-soft);
}

.dark-mode .page-link-custom, .page-link-custom:hover {
    /*color: var(--grey);*/
}

.dark-mode .page-link-custom:hover {
    z-index: 2;
    background-color: unset;
}

/*-- list page--*/
.dark-mode .pagination {
    background-color: #14141d;
    border: 1px solid var(--white);
    color: var(--white);
}

/* ====================================================== SCROLLBAR====================================================== */

.dark-mode ::-webkit-scrollbar {
    width: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-main);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #2a2a38;
    border-radius: 6px;
}

/* -------------- select */
.dark-mode .select-input.form-control[readonly]:not([disabled]) {
    background: var(--dark);
    color: var(--white);
}

.dark-mode .card-header .select-input.form-control[readonly]:not([disabled]) {
    background: white;
    color: var(--primary);
}

.dark-mode .form-outline input.select-input.form-control:focus {
    border: 1px solid #101017;;
}

.dark-mode .form-select {
    background: #101017;
    color: #e6e6eb;
    border: 1px solid #262633;
}

.dark-mode .form-switch .form-check-input[type="checkbox"]:not(:checked), .dark-mode .form-switch .form-check-input[type="radio"]:not(:checked) {
    border-color: var(--third);
    background-color: var(--white);
}

.dark-mode .form-switch .form-check-input::after {
    background-color: var(--third);
}

.dark-mode .form-switch .form-check-input:checked[type="checkbox"]:disabled::after {
    background-color: var(--third);
}

.dark-mode .form-switch .form-check-input[type="checkbox"]:checked, .dark-mode .form-switch .form-check-input[type="radio"]:checked {
    border-color: var(--third);
    background-color: var(--third);
}

.dark-mode form:not(.formSearch) .select-wrapper .select-arrow::before {
    color: var(--white) !important;
}

.dark-mode .select-arrow::before{color: var(--text-main)}
.dark-mode form:not(.formSearch) .select-wrapper:has(input.dirty) .select-arrow::before {
    color: var(--primary) !important;
}

/* link */

.dark-mode .hyperlinked-text {
    color: #60a5fa;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
}

/*=========MODAL============*/
.dark-mode .modal-header {
    background-color: var(--primary);
    color: var(--white);
    border-bottom: 1px solid var(--border-table-td);
}

.dark-mode .modal-content:not(.not-change-color) {
    background-color: var(--primary);
    color: var(--white);
    border: 1px solid var(--border-sidebar-card);
}

.dark-mode .modal .btn-modal-no {
    border: 2px solid var(--white) !important;
    color: var(--white);
}

.dark-mode .modal .btn-modal-yes {
    border: 2px solid var(--white) !important;
    background-color: var(--white);
    color: var(--black);
}

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

.dark-mode .modal-content .fa-calendar.datepicker-toggle-icon {
    color: white;
}

.dark-mode .modal-content .bg-og-third{
    background-color: var(--primary);
    border: 1px solid var(--border-table-td);
}

.dark-mode .modal-content  #content-pro-driver-pay .bg-og-third{border: 0!important;padding-top: 10px}
.dark-mode .modal-content  #content-pro-rate .bg-og-third{
    border-left: 1px solid var(--bg-table-header);
    border-right: 0!important;
    border-bottom: 0!important;
    padding-top: 10px
}
.dark-mode .modal-content  #content-pro-rate .card-footer{border-top: 1px solid var(--border-table-th)!important;}
/*.dark-mode #modal-pro-rate .flex-fill.bg-og-third{background-color: var(--dark)}*/
.dark-mode #list-pro-driver-pay tbody tr, .dark-mode  #list-pro-rate tbody tr:not(.spacer-row) {
    background-color: var(--primary);
}
.dark-mode #list-pro-rate tr.spacer-row td{
    background-color: var(--primary)!important;
}
.dark-mode #list-pro-driver-pay tbody tr.spacer-row td{
    background-color: var(--primary)!important;
}

.dark-mode .modal-content .table-editable tbody tr:focus-within td input[type=text]:focus{
    color: white;
}

.dark-mode .modal-content .bg-tr-summary.fw-bold{
    color: var(--primary) !important;
}

.dark-mode .table-editable .form-outline .form-control:focus, .dark-mode .table-editable .dirtylisten .form-outline input.form-control.dirty:not(:focus,.isError) {
    border-radius:unset;
}
.dark-mode .modal-content table:not(.table-print-label, .tbl-config) tr td:not(.bg-og-mid){background-color: var(--dark)}
.dark-mode .show-payment-detail tr.bg-tr-summary td{background-color: transparent!important;}
.dark-mode .modal-content .bg-secondary{background-color: transparent!important;}
.dark-mode .modal-content .accordion-body button {background-color: transparent; color: var(--text-main)}



/* ======================================================
   CARD DARK MODE PATCH
====================================================== */

.dark-mode .card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-soft);
    box-shadow: none;
}

.dark-mode .card-header {
    background-color: var(--bg-card-header);
    color: var(--text-strong);
    border-bottom: 1px solid var(--border-strong);
}

.dark-mode .child-card .card-header,
.dark-mode .card-header-light {
    background-color: #1b2433 !important;
    color: var(--white) !important;
}

.dark-mode .card-header.card-header-trip {
    background-color: #223047;
    color: var(--white);
}

.dark-mode .header-title {
    background-color: #1b2433;
    color: var(--white);
    border-left-color: #5b6472;
}

.dark-mode .header-title .title-content {
    color: inherit;
}

.dark-mode .line-header-focus {
    border-left-color: #4ea1ff;
    color: var(--white);
}

.dark-mode .line-header-error:not(.line-header-focus) {
    border-left-color: var(--error-solid);
    color: #fca5a5;
    background-color: rgba(220, 38, 38, 0.12);
}

.dark-mode .line-header-dirty:not(.line-header-error):not(.line-header-focus) {
    border-left-color: #60a5fa;
    color: var(--white);
}


.dark-mode .form-outline .form-control:focus {
    color: var(--fifth);
    background-color: var(--second-alpha);
}

.dark-mode .form-outline .form-control:focus ~ .form-label {
    color: var(--second);
}


.dark-mode .form-outline .form-control:focus ~ .form-notch .form-notch-leading {
    border-color: var(--second);
    color:  var(--primary);
    border-right: none;
    box-shadow: none;
}

.dark-mode .form-outline .form-control:focus ~ .form-notch .form-notch-middle {
    border-color: var(--second);
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: none;
}

.form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
    border-color: var(--second);
    border-left: none;
    box-shadow: none;
}

.dark-mode .datepicker-table {color: var(--primary)}
.dark-mode form:not(.formSearch) .bg-white{background-color: var(--dark) !important}
.dark-mode legend {color: white}
.dark-mode .bg-og-white, .dark-mode .bg-og-third, .dark-mode .bg-white{background-color: var(--dark)}
.dark-mode .card div.bg-white{background-color: var(--dark)!important;}
.dark-mode form:not(.formSearch) .bg-og-white .datepicker-toggle-icon, .dark-mode .bg-og-third .datepicker-toggle-icon{color: white}
.dark-mode .table-bordered tr:nth-child(odd) {background-color: var(--dark);}
.dark-mode .input-group .form-control{border-color: white}
/*.dark-mode #btn-sidenav-menu i.fa-align-left{color: white!important;}*/
.dark-mode .accordion-item{background-color: var(--bg-card);}
.dark-mode .accordion-body{border: 1px solid var(--border-strong);}
.dark-mode .accordion-button{background-color: var(--dark);border: 1px solid var(--border-strong);color: white}
.dark-mode .days a{color: white}
.dark-mode table tr.batch-row td{color: var(--primary)}
.dark-mode .icon-white{color: var(--primary)}
.dark-mode .dropdown-menu{color: var(--white); background-color: var(--dark);border: 1px solid var(--border-strong);}
.dark-mode .dropdown-item:hover{
    background-color: #172033;
    color: #ffffff;
}
.dark-mode .dropdown-item{color: white;border-bottom: 1px solid var(--border-soft)}

.dark-mode form.formSearch .select-input.form-control[readonly]:not([disabled]){
    background-color: white; color: var(--primary);
}
.dark-mode form.formSearch .form-outline .form-control:not(.no-text-gray){color: var(--primary)}
.dark-mode form.formSearch .form-outline .form-control ~ .form-label {
    color: var(--primary);
}
.dark-mode form:not(.formSearch) .datepicker input:focus ~ .datepicker-toggle-button .datepicker-toggle-icon {
    color: var(--mdb-primary) !important;
}
.dark-mode .select-dropdown-container .select-dropdown {
    background-color: #0b1120;
    border: 1px solid var(--border-table-td);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow:
            0 10px 30px rgba(0,0,0,.55),
            0 0 0 1px rgba(255,255,255,.02);
}

.dark-mode .select-dropdown-container .select-dropdown .select-option {
    background-color: transparent;
    color: #f3f4f6;
    border-bottom: 1px solid rgba(148,163,184,.14);
    font-weight: 500;
    transition:
            background-color .15s ease,
            color .15s ease;
}
.dark-mode .select-dropdown-container .select-dropdown .select-option:last-child {
    border-bottom: none;
}



.dark-mode .select-dropdown-container .select-dropdown .select-option:hover {
    background-color: #172033;
    color: #ffffff;
}

.dark-mode #attTypeBoxListDialogBody {
    border-top: 1px solid var(--border-table-td);
}

.dark-mode .modal-header .btn-close {
    filter: brightness(0) saturate(100%) invert(100%);
}


.dark-mode .navbar .dropdown-menu,
.dark-mode header .dropdown-menu,
.dark-mode .card-header .dropdown-menu,
.dark-mode .header-title .dropdown-menu,
.dark-mode .btn-group .dropdown-menu {
    background-color: #0b1120 !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 0.75rem !important;
    box-shadow:
            0 12px 30px rgba(0,0,0,.55),
            0 0 0 1px rgba(255,255,255,.02) !important;
    padding: .35rem 0 !important;
}

.dark-mode .navbar .dropdown-menu .dropdown-item,
.dark-mode header .dropdown-menu .dropdown-item,
.dark-mode .card-header .dropdown-menu .dropdown-item,
.dark-mode .header-title .dropdown-menu .dropdown-item,
.dark-mode .btn-group .dropdown-menu .dropdown-item {
    color: var(--text-main) !important;
    background-color: transparent !important;
}

.dark-mode .navbar .dropdown-menu .dropdown-item:hover,
.dark-mode header .dropdown-menu .dropdown-item:hover,
.dark-mode .card-header .dropdown-menu .dropdown-item:hover,
.dark-mode .header-title .dropdown-menu .dropdown-item:hover,
.dark-mode .btn-group .dropdown-menu .dropdown-item:hover {
    background-color: #223047 !important;
    color: var(--white) !important;
}

.dark-mode .dropdown-item:not(:first-child):not(:last-child).rounded-5{border-radius: unset!important;}

.dark-mode td.dropdown .dropdown-menu {
    box-shadow : 0 0 5px 2px var(--border-table-th);
    border: 1px solid var(--border-table-th);
}
.table tbody tr .dropdown .dropdown-item:hover{
    border-bottom: 1px solid var(--border-table-th);
}

.dark-mode .context-menu-view, .dark-mode .autocomplete-dropdown {background-color: var(--dark);color: white;border: 1px solid var(--border-table-th)}
.dark-mode .context-menu-view div:hover, .dark-mode .autocomplete-dropdown .autocomplete-item:hover{color: white; background-color: #223047}
.dark-mode .context-menu-view div, .dark-mode .autocomplete-dropdown ul{border-bottom: 1px solid var(--border-table-th); color: white}

.dark-mode .autocomplete-item {color: white!important;}

.dark-mode #modal-pro-print-label table tr td{
    border-top: 1px solid var(--border-table-th); background-color: var(--dark);
}

.dark-mode #modal-pro-print-label table tr:last-child td{
    border-bottom: 1px solid var(--border-table-th);
}

.dark-mode #modal-pro-print-label table tr td:first-child{
    border-left: 1px solid var(--border-table-th);
}
.dark-mode #modal-pro-print-label table tr td:last-child{
    border-right: 1px solid var(--border-table-th);
}


.dark-mode .table tr td.bg-og-mid{background-color: var(--dark)}
.dark-mode #table-trip-with-no-driver tr td.bg-white, .dark-mode .card.bg-white, .dark-mode div.bg-white{background-color: var(--dark)!important;}
.dark-mode #dp-report-content tr td.bg-fourth-alpha {color: var(--primary) !important}
.dark-mode i.text-dark{color: white!important;}
.dark-mode .rowPerPage{color: white}

.dark-mode .table-editable tr td.group-name-config {
    color: var(--primary) !important;
}

.dark-mode .f-glyphicons-s-1rem{padding: 0 1rem}
.dark-mode #insuranceReportPage .datepicker-toggle-icon{color: white}
.dark-mode form:not(.formSearch) .select-arrow::before{color: white}
.dark-mode #btn-sidenav-menu{background-color: white}


.dark-mode table tr.partially td{background-color: #3A301C!important; color: white}
.dark-mode table tr.incomplete td{background-color: var(--dark)!important; color: white}
.dark-mode table tr.incomplete td{border-top: 1px solid var(--border-table-th)}
.dark-mode table tr.incomplete:first-child td{border-top: 1px solid var(--border-table-th)}
.dark-mode .note-color.incomplete-row{color: white}

.dark-mode table tr.complete td{background-color: rgb(6, 60, 32)!important; color: white}
.dark-mode .dt-length .select-arrow::before{color: white}
.dark-mode #legendModal .text-black{color: white!important;}
.dark-mode .icon-no-money {filter: brightness(0) invert(1);}

.dark-mode #simpleDispatchPage .table-dispatch .highlighted{color: white}
.dark-mode #simpleDispatchPage .table-dispatch  td input[type="text"]:disabled{background-color: #1b2433; border: unset}
.dark-mode #wrapper-left-sidebar .card-header .select-arrow:before, .dark-mode .modal-header .select-arrow:before{color: black}
.dark-mode .dt-empty{background-color: var(--dark);color: white}
.dark-mode #simpleDispatchPage table.table-dispatch .form-outline .form-control:not(.no-text-gray):not(:disabled){background-color: inherit}
.dark-mode .modal tr .drag-handle, .dark-mode .modal tr td.icon-edit-delete {background-color: var(--dark)}
.dark-mode #driversTrip .card, .dark-mode #dispatchSchedulePage .card, .dark-mode #driverMonitor .card ,
.dark-mode #driverDocReview #card-the-grid-detail{border: unset}
.dark-mode #dispatchSchedulePage tr td{color: var(--text-main)}
.dark-mode #dispatchSchedulePage thead th{
    background-color: var(--bg-table-header); color: var(--text-main);

}

.dark-mode #dispatchSchedulePage tbody tr td:first-child,
.dark-mode #approvalPage .table-dispatch tbody tr td:first-child
{border-left: 1px solid var(--border-table-th)}
.dark-mode #modal-option-content tr td{color: var(--text-main); background-color: var(--dark)}
.dark-mode #modal-option-content td a.option-menu{color: var(--text-main);}
.dark-mode #modal-option-pro {border: 1px solid var(--border-table-th)}
.dark-mode .group-search>.form-control {border: 1px solid var(--border-table-th)}

.dark-mode .group-search>.btn-search-white,
.dark-mode  .group-search>.btn-search-white:hover {border: 1px solid var(--border-table-th)}

.dark-mode #listDatePopup div.year:not(:last-child){background-color: #273244!important;}
.dark-mode #listDatePopup div.year:last-child .yearTitle {color: var(--text-main)!important;}
.dark-mode .dt-empty {border-top: 1px solid var(--border-table-th)!important;}
.dark-mode tr td:has(a.option-menu.disabled-color) {
    background-color: #1c1c26 !important;
}
.dark-mode tr td a.option-menu.disabled-color {
    cursor: default !important;
}
.dark-mode .option-menu.disabled-color {
    color: #3A3A3A !important;
}
.dark-mode .table-editable tr.bg-grey-alpha td{
    color:var(--td-color-disable)!important;border: 1px solid #686868!important;
}
.dark-mode .table-editable .bg-grey-alpha td .hyperlinked-text{
    color:var(--td-color-disable);
}

.dark-mode .table-editable:not(.table-dispatch) tbody tr.bg-grey-alpha td input[type=text]:disabled{
    color:var(--td-color-disable); background-color:var(--bg-td-disable)!important;
}

.dark-mode .table-editable:not(.table-dispatch) tbody tr td input[type=text]:not(.select-input):read-only{
    color:var(--td-color-disable)!important; background-color:var(--bg-td-disable)!important;
    border: unset!important;
}

.dark-mode #simpleDispatchPage table.table-dispatch .form-outline:has(.form-control:not(.no-text-gray):not(:disabled)) i:not(.fa-times) {color: var(--primary)}

.dark-mode .table-editable tbody tr td:has(input[type="text"]:focus) i{color: var(--text-main);}
.dark-mode .table-editable tbody tr td:has(input[type="text"].dirty) i{color: var(--primary);}
.dark-mode .table-editable.table-dispatch tbody tr td:has(input[type="text"]:focus) i:not(.fa-pen, .icon-red-custom){color: var(--primary);}

.dark-mode #modal-option-trip-dispatch{border: 1px solid var(--bg-table-header);background-color: var(--dark)}

.dark-mode #select-max-paging .select-arrow::before , .dark-mode .modal-body .select-arrow::before {
    color: var(--white) ;
}

.dark-mode .btn-primary i{color: white}

.dark-mode td.bg-secondary{background-color: var(--dark)!important;}
.dark-mode #modal-option-config-content a{color: white}