.fiterButtons {
    padding-right: 25px;
}
.dark-mode .page-loader-wrapper{
    background: #4d4d4d !important;
}
.dark-mode .page-loader-wrapper p{
    color: #fff !important;
}
.dark-mode .navbar-brand{
    background-color: #383839;
    border-bottom: 1px solid #4D4D4D;
}

.dark-mode .sidebar .menu{
    background-color: #383839 !important;
}

.dark-mode .list li>a> img{
    filter: none !important;
}
.dark-mode .list li>a{
    color: #fff !important;
}
.dark-mode .theme-blush .sidebar .menu .list li:hover{
    border-left: none !important;
}

.dark-mode .form-control:focus{
    background: transparent !important;
    box-shadow: none !important;
}
.dark-mode .form-control{
    border-color:#4d4d4d !important;
    color: #fff!important;
}
.dark-mode .otp-input{
    background: transparent !important;
    border-color: #4d4d4d !important;
    color: #fff !important;
}
.dark-mode .save-button {background-color: #307BF4 !important;
}
.dark-mode input[type="date"]::-webkit-calendar-picker-indicator, 
.dark-mode input[type="time"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(1);
  cursor: pointer;
}

/* ===== Dashboard Cards ===== */
.dark-mode .widget_2 .body {
  background-color: #383839 !important;
  border: none !important;
}


.dark-mode .widget_2 h6 { 
  color: #A3A3A3 !important;
}

.dark-mode .widget_2 h2 {
  color: #FFFFFF !important;
}

/* ===== Tables ===== */
.dark-mode .card {
  background-color: #383839 !important;
  border: 1px solid #4D4D4D !important;
}
.dark-mode .card .body{
    background-color: #383839 !important;
    border-radius: 16px !important;
}
.dark-mode .card .header .card-header-title .card-header-icon i{
    color: #fff !important;
}

.dark-mode .table {
  color: #383839 !important;
  background-color: #121212 !important;
}

/*.dark-mode .table-responsive{*/
/*      background-color: #383839 !important;*/

/*}*/
.dark-mode .card .header h2 {
  color: #FFFFFF !important;
}

.dark-mode .table thead th {
  background-color: #4D4D4D !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid #383839 !important;
}

.dark-mode .table tbody tr {
  border-bottom: 1px solid #383839 !important;
  background-color: #383839 !important;
}


/* ===== Table Cells ===== */
.dark-mode .table tbody td {
  color: #FFFFFFCC !important;
  border-color: #2A2A2A !important;
}

/* ===== Search Bars ===== */
.dark-mode .search-container {
  background-color: #383839 !important;
  border: 1px solid #4D4D4D !important;
}
.search-container span{
  display: none !important;
}

/* Correct way to invert search icon color in dark mode */
.dark-mode .search-container img {
  filter: invert(1) !important;
  opacity: 0.8; /* Optional: adjust opacity for better visibility */
}

.dark-mode .notification-icon {
  filter: invert(1) !important;
  opacity: 0.8; /* Optional: for a subtle look */
}
.dark-mode .search-container input {
  color: #E5E5E5 !important;
}
.dark-mode .search-container span {
  background-color: #2A2A2A !important;
  color: #A3A3A3 !important;
  display:none;
}

.dark-mode .card .header {background-color: transparent !important;
    border-color: #4d4d4d !important;
}
.dark-mode .card .header .card-header-title{
    color: #fff !important;
}
.dark-mode .card .body .profile-data{
    color: #fff !important;
}

.dark-mode .block-header {
    background-color: #383839 !important;
    border-bottom: 1px solid #4d4d4d !important;
}


body.dark-mode{
      background-color: #2C2C2E !important;
}

.dark-mode .jobTagline {
    color: #fff !important;
}
.dark-mode .joblayoutline {
    border: 1px solid #ffffff33 !important;
}

.dark-mode .jobTitle {
    color: #fff !important;
}

/* ===== Notification ===== */

.dark-mode .notificationTitle {
    color: #fff !important;
}

.dark-mode .notificationList .notificationAction img{
    filter: brightness(0) invert(1);
}

.dark-mode .notificationDate {
    color: #ccc !important;
}

.dark-mode .notificationDescription{
    color: #ccc !important;
}

/* ===== Checkboxes ===== */
.dark-mode .large-checkbox {
  /* For modern browsers */
  accent-color: #1D4ED8; /* Changes the checkmark color */
  filter: invert(80%) hue-rotate(180deg); /* Inverts dark/light */
  opacity: 0.9;
}

/* For better cross-browser support */
.dark-mode input[type="checkbox"].large-checkbox {

  appearance: none;
  -webkit-appearance: none;
  background-color: #2C2C2E;
  border: 1px solid #2A2A2A;
  border-radius: 3px;
  cursor: pointer;
}

.dark-mode input[type="checkbox"].large-checkbox:checked {
  background-color: #2C2C2E;
  border-color: #383839;
}

.dark-mode input[type="checkbox"].large-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ===== Status Badges ===== */
.dark-mode .badge {
  background-color: #1A1A1A !important;
  border-radius: 16px;
  padding: 8px 10px;
  font-weight: 500;
}

.dark-mode .badge-primary {
  background-color: #FF9E4226 !important;
}

.dark-mode .badge-success {
  background-color: #00A55933 !important;
}

.dark-mode .badge-danger {
  background-color: #FF616D26 !important;
}

.dark-mode .stautsSpan.active {

    color: #fff !important
}
/* ===== Pagination ===== */

.dark-mode .pagination .prev-button, 
.dark-mode .pagination .next-button{
    background: #2c2c2e !important;
    border: 1px solid #4d4d4d;
    color: #fff !important;
}

.dark-mode .pagination .prev-button:hover, 
.dark-mode .pagination .next-button:hover{
    background: #307bf4 !important;
    border: 1px solid #307bf41 !important;
}

.dark-mode .pagination .disabled .prev-button:hover, 
.dark-mode .pagination .disabled .next-button:hover{
    background: #2c2c2e !important;
    border: 1px solid #4d4d4d;
    color: #aaa !important;
}

.dark-mode .pagination .disabled span{
    color: #aaa !important;
}
.dark-mode .pagination .disabled span img{
    filter: none !important;
}

.dark-mode .pagination .prev-button img, 
.dark-mode .pagination .next-button img{
filter: brightness(0) invert(1) !important;
}

.dark-mode .pagination .page-number  {
color: #fff !important;
}
.dark-mode .pagination .page-number.current  {
color: #307BF4 !important;
}

.dark-mode .pagination li.active .current  {
color: #fff !important;
background-color: #2C2C2E !important;
}

.dark-mode .pagination .active .page-link {
  background-color: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
}

/*buttons*/
.dark-mode .btn-outline-primary{
color: #fff !important;
border: 1px solid #4D4D4D!important;
}
.dark-mode .fiterButtons .btn-outline-primary:hover{
border: 1px solid #fff!important;
}

.dark-mode .btn-outline-primary img{
filter: brightness(0) invert(1);
}
.dark-mode .fiterButtons .btn-primary:hover{
border: 1px solid #fff!important;
}
.dark-mode .btn-primary img{
filter: brightness(0) invert(1);
}
.dark-mode .btn-primary.backBtn{
    border: 1px solid #4D4D4D!important;
    color: #fff !important;
}
.dark-mode .btn-primary {
/*border: 1px solid #4D4D4D!important;*/
/*color: #fff !important;*/
/*background-color: #383839 !important;*/
}

.dark-mode .dropdown-toggle img{
filter: invert(1);
}

.dark-mode .profile-container img {
  filter: none;
}
.dark-mode .profile-wrapper .profile-name{
color: #fff !important;
}
.dark-mode .profile-wrapper2 .profile-name2{
color: #fff !important;
}
.dark-mode .profile-wrapper1 .profile-name1{
color: #fff !important;
}

.dark-mode .badge.planning-btn {
background-color: #307BF4 !important;
}

.dark-mode .job-label {
    color: #fff !important;
}

.dark-mode .job {
    color: #fff!important;
}

.dark-mode .btn-primary.action{
border: none !important;
background-color: transparent !important;
padding: 0;
}

/* Dark mode overrides */
.dark-mode .overview-heading,
.dark-mode .overview-heading .overview-date {
    color: #fff;
}

.dark-mode .profile-name1 {
    color: #fff;
}
.dark-mode .userMenu img{
    filter: brightness(0) invert(1) !important;
}
.dark-mode .userMenu{
    border: none !important;
}
/* Dark mode Calander */

.dark-mode #calendar .fc-direction-ltr .fc-toolbar-title {
    color: #fff !important;
}

.dark-mode .fc-scrollgrid .fc-col-header .fc-day{
        color: #fff !important;
}

.dark-mode .fc .fc-daygrid-day-top .fc-daygrid-day-number{
color: #fff !important;
}

.dark-mode .fc .fc-daygrid-day-top .fc-daygrid-day-number i{
color: #fff !important;
}

/*Data Question*/

.dark-mode .accordion-item .accordion-header {
    color: #fff !important;
}

.dark-mode .accordion-item .accordion-content {
    border-top: 1px solid #4D4D4D !important;
}
.dark-mode .accordion-item .accordion-content p {
    color: #fff !important;
}

.dark-mode .accordion-item {
    border: 1px solid #4d4d4d !important;
}

/*FlatPicker Css*/
/*White Mode*/
.flatpickr-months .flatpickr-month{
    height: 55px !important;
}
.flatpickr-calendar {
    border-radius: 10px !important;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    overflow: visible !important;
}
.flatpickr-calendar .flatpickr-monthDropdown-months {
    z-index: 9999;
    position: relative;
}
.flatpickr-day.selected, 
.flatpickr-day:hover {
    background: #317cf5 !important;
    color: white !important;
    
}
.flatpickr-current-month .numInputWrapper{
    width: 50% !important;
}
.flatpickr-current-month .numInputWrapper .cur-year{
    height: 45px !important;
    border-radius: 10px !important;
    font-family: 'Outfit';
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.flatpickr-current-month .numInputWrapper .cur-year::placeholder{
    color: #696974 !important;
    font-family: 'Outfit';
    font-size: 16px;
}
.flatpickr-current-month .numInputWrapper .cur-year:focus{
    border-color:  #ced4da !important;
    box-shadow: none !important;
}
.flatpickr-current-month{
    display:  inline-flex !important;
    gap: 10px;
}
.numInputWrapper span.arrowDown{
    top: 85% !important;
    right: 5% !important;
}
.numInputWrapper span.arrowUp {
    top: 9px !important;
    right: 5% !important;
    border-bottom: 0;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month{
    top: 12px !important;
}
span.flatpickr-day.startRange {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    box-shadow: 0px 0 0 #317CFD, 5px 0 0 #317cf5;
    border: none !important;
    background: #317cf5 !important;
}
.flatpickr-day.inRange {
    box-shadow: -5px 0 0 #317cf5, 5px 0 0 #317cf5 !important;
    background: #317cf5 !important;
    border-color: #317cf5 !important;
    border-radius: 0px !important;
}
span.flatpickr-day.endRange{
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    box-shadow: 0px 0 0 #317cf5, 5px 0 0 #317cf5 !important;
    border: none !important;
    background: #317cf5 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover{
    background: transparent !important;
}
/*Dark Mode*/
.dark-mode .flatpickr-current-month .dropdown-toggle{
    border-color: #4d4d4d !important;
    color: #fff !important;
}
.dark-mode .flatpickr-weekday{
    color: #fff !important;
}
.dark-mode .numInputWrapper span.arrowDown:after, 
.dark-mode .numInputWrapper span.arrowUp:after{
    border-top-color: #fff !important;
    border-bottom-color: #fff !important;
}
.dark-mode .flatpickr-prev-month, 
.dark-mode .flatpickr-next-month{
    filter: invert(1) !important;
}
.dark-mode .flatpickr-current-month .numInputWrapper .cur-year{
    background: transparent;
    border-color: #4d4d4d;
    color: #fff;
}
.dark-mode .flatpickr-calendar{
    background: #383839;
    box-shadow: none !important;
    border: 1px solid #4d4d4d;
}
.dark-mode .flatpickr-current-month .flatpickr-day{
    background: transparent;
    border-color: #4d4d4d;
    color: #fff;
}
.dark-mode .flatpickr-day:hover, 
.dark-mode .flatpickr-day.selected, 
.dark-mode .flatpickr-day.today {
    border: 1px solid #317cf5 !important;
    background:  #317cf5 !important;
}
.dark-mode .flatpickr-day{
    border-radius: 8px !important;
    color: #fff !important;
}
/*End*/
/*DropDown Dark Mode*/
.dark-mode .dropdown-menu>li>a {
    color: #fff;
}
.dark-mode .bootstrap-select .dropdown-menu{
    background: #383839;
    border: 1px solid #4d4d4d !important;
}
.dark-mode .bootstrap-select .dropdown-menu.inner li.selected a{
    background: #4d4d4d !important;
    color: #fff !important;
}
.dark-mode ul.dropdown-menu.dropdown-menu-right {
    background: #383839;
    border: 1px solid #4d4d4d !important;
}
.dark-mode .dropdown-menu>li>a:hover{
    background: #4d4d4d !important;
}
.dark-mode .dropdown-menu>li>a svg{
    filter: brightness(0) invert(1) !important;
}
.flatpickr-prev-month,
.flatpickr-next-month {
    display: none !important; /* Hides the arrows completely */
    /* OR */
    pointer-events: none !important; /* Makes arrows non-clickable */
    opacity: 0; /* Optionally hide visually */
}