:root {
    --notification-heading-lightMode: #e1e4ea;
    --notification-headingBorder-lightMode: #ced0d4;
    --notification-theme-lightMode: linear-gradient(0deg, rgba(255, 58, 63, 0.2), rgba(255, 58, 63, 0.2)), #ffffff;
    --notification-theme-lightMode-borderBottom: #e1e4ea;
    --notification-theme-darkMode: linear-gradient(0deg, rgba(255, 58, 63, 0.2), rgba(255, 58, 63, 0.2)), #37393f;
    --notification-theme-darkMode-borderBottom: #202225;
    --notification-theme-lightMode-value: rgba(0, 51, 153, 0.2);
    --notification-theme-darkMode-value: #90bcff;

    --light-theme-white: #f9faf9;
    --light-theme-btnColor: #666a75;
    --light-theme-clearBtn: #3879fa;
    --light-theme-searchbar: #f9fafb;
    --light-theme-placeholder: #666a75;

    --darker-theme-gray: #4a4d55;
    --darker-theme-black-shade2: #202225;
    --darker-theme-white: #f9fafb;
    --darker-theme-black: #2b2d31;
    --darker-theme-panel-heading: #40434a;

    --darker-theme-clearBtn: #4683fa;
    --darker-theme-searchBar-border: rgba(110, 110, 110, 0.3);
}

.night-mode,
.night-mode .wells,
.night-mode #accmenucontainer .panel-body,
.night-mode #NotificationPaneTableBody,
.night-mode #map-menu,
.night-mode .well,
.night-mode .ersi-search__input-container,
.night-mode .panel-primary,
.night-mode .panel-primary > .panel-heading + .panel-collapse > .panel-body,
.night-mode #quickViewFollowButton,
.night-mode .esri-attribution,
.night-mode .panel,
.night-mode .list-group > li {
    background-color: var(--darker-theme-gray);
    color: var(--darker-theme-white);
    border-color: var(--darker-theme-black) !important;
}

.night-mode .help-button,
.night-mode .profile-button,
.night-mode .notif-text,
.night-mode .config-step-header,
.night-mode .config-notif-steps,
.night-mode .add-widget-desc {
    color: var(--darker-theme-white) !important;
}

/* .night-mode #map_menu {
    background-color: var(--darker-theme-gray) !important;
    color: var(--darker-theme-white) !important;
    border-color: var(--darker-theme-black) !important;
} */

.night-mode .help-button,
.night-mode .profile-button {
    color: var(--darker-theme-white) !important;
}

.night-mode #map_menu,
.night-mode #map_menu .btn-group > * {
    background: var(--dark-theme-background-default, #37393f);
    color: var(--darker-theme-white) !important;
    border-color: var(--dark-theme-background-default, #37393f) !important;
}

.night-mode #mapSubInfo {
    background: #4a4d55;
    border-radius: 0px;
}
.night-mode .esri-component .esri-attribution .esri-widget,
.night-mode .delete-widget-btn {
    background: #37393f;
}
.night-mode .drag-widgets,
.night-mode .disabled-btn {
    background: #37393f !important;
}
.night-mode #accmenucontainer .panel-heading,
.night-mode .btn[disabled],
.night-mode input,
.night-mode .selectpicker {
    background-color: var(--darker-theme-black-shade2);
    border-color: var(--darker-theme-black-shade2);
    color: var(--darker-theme-white);
}

.night-mode #mapStyleSelectList {
    background-color: var(--darker-theme-gray);
    color: var(--darker-theme-white);
    border-color: var(--darker-theme-gray);
}
.night-mode #NotificationPaneTableBody td {
    border-bottom: 1px solid var(--dark-theme-border-aside, rgba(102, 106, 117, 0.8));
}
.night-mode #NotificationPaneTableBody > tr {
    background: var(--dark-theme-background-default, #37393f);
}

.night-mode .dropdown-menu > li > a,
.night-mode .dropdown-menu > li > a,
.night-mode .dropdown-menu {
    background-color: var(--darker-theme-gray) !important;
    color: var(--darker-theme-white) !important;
}
.night-mode .esri-widget {
    background: #37393f !important;
}
.night-mode .ui-sortable-placeholder {
    background-color: rgba(102, 106, 117, 0.3);
    border: 1px dashed #202225;
}
.night-mode .ui-sortable-placeholder::before {
    color: rgba(183, 186, 194, 0.6);
}

.night-mode img {
    border-color: var(--darker-theme-gray) !important;
}

.night-mode .btn-default,
.night-mode .btn-group > *,
.night-mode .analytics-chart-header,
.night-mode .fleet-widget-value,
.night-mode .main-widget-value,
.night-mode #new-nav-content .panel-title > a {
    color: var(--darker-theme-white) !important;
}

.night-mode #navMainMenu {
    background: var(--dark-theme-background-main-navbar, #4a4d55);
    color: var(--darker-theme-white) !important;
    box-shadow: 0px 2px 7px rgba(16, 22, 26, 0.09);
    border-color: var(--darker-theme-gray) !important;
}

.night-mode .panel-default > .panel-heading {
    background-color: var(--darker-theme-panel-heading);
    color: var(--darker-theme-white);
    border-color: var(--darker-theme-black);
}

.night-mode .navbar-default .navbar-nav > li > a,
.night-mode button.close,
.night-mode .vertical-label-style,
.night-mode .gaugeDisplayName {
    color: var(--darker-theme-white);
}

.night-mode .esri-widget--button,
.night-mode .esri-input,
.night-mode .esri-menu,
.night-mode #AdressSearchInput,
.night-mode .panel-primary > .panel-heading + .panel-collapse > .panel-body {
    background: var(--darker-theme-black) !important;
    border: 1px solid var(--darker-theme-black) !important;
    color: var(--darker-theme-white) !important;
    border-radius: 3px;
}
.night-mode .gaugeEditOptions,
.night-mode #copy_selected_gauge,
.night-mode #delete_selected_gauge {
    background-color: #4a4d55;
    color: #fff;
}
.night-mode .gaugeEditIcon svg path,
.night-mode .geofence-header-icon {
    fill: #fff;
}
.night-mode .gaugeEditIcon:hover {
    background: #666a75;
}
.night-mode .esri-input {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
/* .night-mode .esri-widget--button {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
} */
.night-mode #newNavPanel,
.night-mode .gm-style-mtc button,
.night-mode .gmnoprint button,
.night-mode .gm-svpc,
.night-mode .ssQIHO-checkbox-menu-item,
.night-mode .gmaps-traffic {
    background-color: var(--darker-theme-gray) !important;
    color: var(--darker-theme-white) !important;
}

.night-mode .ssQIHO-checkbox-menu-item,
.night-mode .gmaps-traffic {
    border-color: var(--darker-theme-gray) !important;
}

.night-mode .nav-panel-container {
    /* background-color: var(--darker-theme-gray) !important; */
    background-color: transparent;
}

.night-mode #new-nav-content {
    background-color: var(--darker-theme-gray) !important;
    color: var(--darker-theme-white);
}
.night-mode div:has(.btn-group) {
    /* background-color: var(--darker-theme-gray); */
    color: var(--darker-theme-white);
    border-color: var(--darker-theme-gray) !important;
}
.night-mode .analtytics-table thead,
.night-mode #dashboard-container .dashboardGauge {
    background: var(--darker-theme-black) !important;
}
.night-mode #new-nav-content {
    background-color: var(--darker-theme-gray) !important;
    color: var(--darker-theme-white);
}
.night-mode div:has(.btn-group) {
    /* background-color: var(--darker-theme-gray); */
    color: var(--darker-theme-white);
    border-color: var(--darker-theme-gray) !important;
}

.night-mode .esri-zoom {
    background-color: unset !important;
}
.night-mode #NotificationPaneTableHeader th,
.night-mode #dashboard-container .dashboardGauge .digitalgaugecount,
.night-mode #dashboard-container .dashboardGauge .gaugename {
    color: var(--darker-theme-white) !important;
}
.night-mode #dashboard-container .dxg-title > text {
    fill: var(--darker-theme-white) !important;
}

.night-mode .gmnoprint button[aria-label="Zoom in"] img,
.night-mode .gmnoprint button[aria-label="Zoom out"] img {
    filter: brightness(0) invert(1);
}

.night-mode .fashing-notif {
    border: 3px solid red !important;
}

.night-mode .modal-content {
    background-color: var(--darker-theme-gray);
    color: var(--darker-theme-white);
    border-color: var(--darker-theme-black);
}

.night-mode #VehicleSearchButton {
    background-color: var(--darker-theme-black);
    color: var(--darker-theme-white);
    border-color: var(--darker-theme-black) !important;
}

.night-mode .modal-header {
    background-color: var(--darker-theme-panel-heading);
    border-color: var(--darker-theme-panel-heading);
}

.night-mode legend {
    color: var(--darker-theme-white);
}

.night-mode .btn-default,
.night-mode .mediaButton {
    background-color: var(--darker-theme-gray);
    color: var(--darker-theme-white);
    border-color: var(--darker-theme-black);
}

.night-mode #map_menu .btn-group > *:hover {
    background: var(--dark-theme-background-default, #37393f);
}

.night-mode .p#notification-controlsanel-title > a {
    color: var(--darker-theme-white);
}
.night-mode #notification-controls {
    border-bottom: 1px solid var(--dark-theme-border-muted, #2b2d31);
}
.night-mode .notification-value {
    padding: 2px 8px;
    gap: 10px;
    width: 23px;
    height: 20px;
    background: var(--notification-theme-darkMode-value);
    border-radius: 20px;
}

.night-mode #mapStyleSelectList {
    border-color: var(--darker-theme-gray) !important;
}

.night-mode #NotificationPaneTableBody tr:hover td {
    background: rgba(102, 106, 117, 0.3);
    white-space: normal;
}
.night-mode #NotificationPaneTableHeader tr {
    background: #2b2d31 !important;
    border-bottom: 1px solid var(--dark-theme-border-muted, #2b2d31);
    color: var(--darker-theme-white);
}
.night-mode #NotificationPaneTableHeader {
    border-color: var(--darker-theme-black-shade2);
}
.night-mode .map-menu-icon > svg,
.night-mode .theme-icon {
    fill: var(--dark-theme-font-muted, #b7bac2);
}
.night-mode #btnNotifClear {
    border-color: var(--darker-theme-gray);
    color: var(--darker-theme-clearBtn) !important;
}

.night-mode #poi_menu_wrapper {
    background: var(--darker-theme-gray);
    color: var(--darker-theme-white);
    border-color: var(--darker-theme-black);
}

.night-mode #map_poi_save,
.night-mode #map-poi-group,
.night-mode .night-mode-select {
    background: var(--darker-theme-black);
    color: var(--darker-theme-white);
    border-color: var(--darker-theme-black-shade2);
}
.night-mode .poi-back-btn,
.night-mode .night-mode-color {
    color: white !important;
}
.night-mode #btn_add_wo_group,
.night-mode #btn_add_poi_group {
    color: #3879fa !important;
}
.night-mode #new-nav-content,
.night-mode .close-report-tree {
    border-top: 1px solid #2b2d31;
}
.night-mode #okBtn,
.night-mode #cancelBtn {
    color: #202225 !important;
}
.night-mode .create-poi-header {
    border-bottom: 1px solid #2b2d31 !important;
}
.night-mode #map_poi_message {
    color: #3f4754;
    border-radius: 3px;
}

.night-mode .close,
.night-mode .tech-geofence-header {
    color: var(--darker-theme-white);
}

.night-mode .vehicle-search-row-header,
.night-mode .notifMediaTableHeader {
    background-color: var(--darker-theme-gray);
    color: var(--darker-theme-white);
    border-color: var(--darker-theme-black-shade2);
    box-shadow: 0 1px 0 0 #202225;
}

.night-mode .modal-header {
    background-color: var(--darker-theme-gray);
}

.night-mode #map-wo-dropdown {
    background-color: var(--darker-theme-black-shade2);
    color: var(--darker-theme-white);
    border-color: var(--darker-theme-black-shade2);
}
.night-mode .new-work-group-btn,
.night-mode #map_wo_save,
.night-mode #map_poi_save,
.night-mode .poi-new-group-btn {
    background-color: #3879fa;
}

.night-mode .vehicle-search-searchbar {
    border: none;
}

.night-mode .night-mode-hover > tr:hover,
.night-mode .table-hover > tbody > tr:hover {
    background-color: var(--darker-theme-black);
}

.night-mode select {
    color: black;
}
.night-mode .dropdown-menu > li > div,
.night-mode #maintFenceList,
.night-mode .maintenance-fence-header,
.night-mode #tech-data-body,
.night-mode #gpshistorytable {
    background-color: var(--darker-theme-gray) !important;
    color: var(--darker-theme-white) !important;
}
.night-mode .maintenance-fence-header {
    border-bottom: 1px solid rgba(43, 45, 49, 1);
}
.night-mode #gpshistorytable th,
.night-mode #telemhistorytable th,
.night-mode #telemhistorytable tr td,
.night-mode #gpshistorytable tr td {
    background-color: var(--darker-theme-gray);
    border-bottom: 1px solid rgba(43, 45, 49, 1);
    color: var(--darker-theme-white);
}
.night-mode #techdataviewTabs > li.active > a {
    color: #3879fa;
}
.night-mode .POI-modal-required,
.night-mode .WO-modal-required {
    color: white;
}
#techdataviewTabs > li > a:hover {
    background-color: unset;
}
.nav-tabs > li > a:hover {
    border-color: transparent;
}
.night-mode .admin-list-tab {
    border-right: 2px solid rgba(43, 45, 49, 1);
}
.night-mode #modal_preset_favorite label,
.night-mode #areYouSureYouWantToRemove label {
    color: var(--darker-theme-white);
}
.night-mode #techdataviewTabs > li > a,
.night-mode .admin-manager {
    color: rgb(183, 186, 194);
}
.night-mode .remove-no-btn {
    background: #2b2d31;
    border: unset;
}
.night-mode .remove-yes-btn {
    background: #ff3a3f;
    border: unset;
}
.night-mode .remove-no-btn:hover,
.night-mode .remove-yes-btn:hover {
    background: #e6e6e6;
    color: #000 !important;
}
.night-mode .map-preset-header {
    color: var(--darker-theme-white);
}
.night-mode #admin-main-content,
.night-mode .dashboard-container {
    background: #2b2d31;
}
.night-mode .dashboard-body,
.night-mode div#gaugelist,
.night-mode #gaugesettings,
.night-mode .apply-btn-container,
.night-mode .gauge-header-container,
.night-mode #copygaugeviewbutton,
.night-mode #deleteGaugebutton {
    /* background: rgba(91, 94, 104, 1); */
    background: var(--darker-theme-gray);
}
.night-mode #copy_selected_gauge:hover,
.night-mode #delete_selected_gauge:hover {
    color: black !important;
}
.night-mode .dashboard-manager-header,
.night-mode .gauge-list-header,
.night-mode .dashboard-body legend,
.night-mode #gaugelist > li {
    color: rgba(249, 250, 251, 1) !important;
}
.night-mode .gauge-detail {
    /* background: rgba(91, 94, 104, 1); */
    background: var(--darker-theme-gray);
    color: rgba(249, 250, 251, 1);
}
.night-mode #copygaugeviewbutton {
    color: rgba(70, 131, 250, 1) !important;
}
.night-mode #deleteGaugebutton {
    color: var(--status-colors-danger, #ff3a3f) !important;
}
.night-mode .dashboard-body input,
.night-mode .dashboard-body select,
.night-mode .dashboard-body select option {
    border-radius: 3px !important;
    border: 1px solid #5b5e68 !important;
    background: var(--darker-theme-gray) !important;
    /* color: rgba(249, 250, 251, 1) !important; */
}
.night-mode .gauge-header-container,
.night-mode .gauge-list-header,
.night-mode .report-config-container {
    border-bottom: 1px solid rgba(43, 45, 49, 1);
}
.night-mode .apply-btn-container,
.night-mode .modal-footer,
.night-mode .one-click-footer {
    border-top: 1px solid rgba(43, 45, 49, 1);
}
.night-mode .modal-footer {
    background-color: #4a4d55 !important;
}
.night-mode div#gaugelist li {
    border-bottom: 0.5px solid rgba(43, 45, 49, 1);
}
.night-mode .gauge-list-content {
    border-right: 1px solid rgba(43, 45, 49, 1) !important;
}
.night-mode .dashboard-body label,
.night-mode .copy-gauge-title,
.night-mode .delete-modal-body,
.night-mode .copy-gauge-title,
.night-mode #gaugename {
    color: rgba(249, 250, 251, 1) !important;
}
.night-mode .dx-colorbox-overlay.dx-overlay-content {
    background: var(--darker-theme-gray);
    border: 1px solid var(--darker-theme-black-shade2);
}
.night-mode #gauge {
    background: #2b2d31 !important;
    border-radius: 10px;
}
.night-mode .gauge-items {
    background: #2b2d31 !important;
    border-radius: 3.333px;
}
.night-mode .dashboardGaugeDemo,
.night-mode .gaugeListGauge {
    border: 2px solid #5b5e68;
}
.night-mode .dashboard-body .dxg-title > text,
.night-mode .dashboard-body .dxg-elements > text {
    color: rgba(249, 250, 251, 1) !important;
    fill: rgba(249, 250, 251, 1) !important;
}
.night-mode .dashboard-body input,
.night-mode .dashboard-body select {
    color: #7f8288 !important;
}
.night-mode .gauge-apply-btn {
    background-color: #3879fa !important;
}
.night-mode .select-gauge,
.night-mode .select-user {
    background: var(--darker-theme-black);
    color: var(--darker-theme-white);
}
.night-mode .dx-colorbox-input-container .dx-colorbox-input {
    color: rgba(249, 250, 251, 1) !important;
}
.night-mode .analytics-chart-cards,
.night-mode .analytics-top-cards {
    background-color: #37393f;
    border-color: #2b2d31;
}
.night-mode .analytics-header {
    color: #fff;
}
.night-mode .dropdown-select {
    border: 1px solid rgba(102, 106, 117, 0.8);
    color: #f9fafb;
}
.night-mode .report-list-container,
.night-mode .select-reports-bottom,
.night-mode #new_list,
.night-mode .report-list,
.night-mode .assets-vehicles,
.night-mode .clear-settings,
.night-mode .save-settings,
.night-mode .close-report-tree,
.night-mode .select-notif-btn,
.night-mode .telemetry-btn,
.night-mode .select-geofence-btn,
.night-mode .maintenance-type-btn,
.night-mode .select-drivers-btn,
.night-mode .select-notification-btn,
.night-mode .select-user-action,
.night-mode .select-poi-btn,
.night-mode .add-report,
.night-mode .admin-list-tab {
    background-color: var(--darker-theme-gray);
}
.night-mode #reports_vehicle_tree,
.night-mode #select-vehicle,
.night-mode #reports_notification_tree,
.night-mode #reports_telemetry_tree,
.night-mode #select-telemetry,
.night-mode #reports_geofence_tree,
.night-mode #select-geofence,
.night-mode #select-maintenance-type,
.night-mode #reports_notification_maintenance_tree,
.night-mode .select-geofence-header,
.night-mode #select-drivers,
.night-mode #reports_driver_tree,
.night-mode #select-notif,
.night-mode #select-user,
.night-mode #reports_user_action_tree,
.night-mode #reports_user_tree,
.night-mode #select-poi,
.night-mode #reports_poi_tree,
.night-mode #reports_workorder_tree,
.night-mode .clickSelectPOI,
.night-mode #reports_user_tree,
.night-mode #saved_reports_tree {
    background-color: var(--darker-theme-gray);
    color: var(--darker-theme-white);
    border-bottom: 1px solid #2b2d31 !important;
}
.night-mode .reports-list-header,
.night-mode .reports-config-header,
.night-mode .modaltitleNotif {
    color: var(--darker-theme-white) !important;
}
.night-mode .select-vehicle-container,
.night-mode .clickSelectNotification,
.night-mode .clickTelemetry,
.night-mode .clickSelectGeofence,
.night-mode .clickSelectGeofenceUDC,
.night-mode .clickMaintenanceType,
.night-mode .select-drivers-container,
.night-mode .clickSelectUserAction {
    border: 1px solid rgba(43, 45, 49, 1);
    box-shadow: 0px 4px 6px rgba(43, 45, 49, 0.6);
}
.night-mode #new_list > li > a {
    color: #b7bac2;
}

.night-mode .esri-popup__header-title h2,
.night-mode .esri-popup__content div,
.night-mode h2.esri-widget__heading {
    color: #b7bac2 !important;
}
.night-mode .dashboard-gauge-header,
.night-mode .ocr-report-list {
    color: var(--light-theme-white);
}

.night-mode .reports-option-block,
.night-mode .ocr-report-list {
    background: var(--darker-theme-black);
    border: 1px solid var(--darker-theme-black);
}

.night-mode .savedReportOptionContainer,
.night-mode .savedSchedulingReport,
.night-mode .reportOptionContainer,
.night-mode .schedulingReportConfig {
    border: 1px solid var(--darker-theme-black);
}
.night-mode .ocr-reportList {
    border-bottom: 1px solid var(--darker-theme-black);
}
.night-mode .one-click-report-options {
    border-right: 1px solid var(--darker-theme-black) !important;
}
.night-mode #multiSelectDropdown {
    background: var(--darker-theme-black) !important;
}
.night-mode #modifyReportFooter,
.night-mode .addingReportFooter {
    border-top: 1px solid var(--darker-theme-black) !important;
    background: var(--darker-theme-gray) !important;
}
.night-mode #report-name:hover,
.night-mode #saved-report-name:hover {
    background: unset !important;
}
.night-mode .report-option-header {
    color: var(--light-theme-white);
}
.night-mode .vt_item:hover:not(.vt_tree_container),
.night-mode .wo_item:hover:not(.wo_tree_container),
.night-mode .tmh_item:hover:not(.tmh_tree_container),
.night-mode .dr_item:hover:not(.dr_tree_container),
.night-mode .fencet_item:hover:not(.fencet_tree_container),
.night-mode .poit_item:hover:not(.poit_tree_container),
.night-mode .ut_item:hover:not(.tree_container),
.night-mode .uat_item:hover:not(.tree_container),
.night-mode .nt_item:hover:not(.tree_container),
.night-mode .oneclickt_item:hover:not(.tree_container),
.night-mode .oct_mastergroup:hover {
    background: rgba(102, 106, 117, 0.3);
    color: #ffffff;
}