@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: var(--dark-bg);
    --body-color: var(--dark-bg-inverse);
    --headings-color: var(--dark-bg-inverse);
    --card-bg: var(--dark-bg-light);
    --table-striped: var(--dark-bg-light);
    --table-hover: var(--dark-bg);

    /* change background color variable */
    --cc-background-color: var(--dark-bg-light);
    --cc-color: var(--dark-bg-inverse);
  }
  /* Custom Body dark color */
  body {
      background-color: var(--dark-bg)!important;
      color: var(--dark-bg-inverse) !important;
  }
  /* Custom Scroll bar dark color */
  .scrollbar {
      --bg-scrollbar: var(--dark-bg-light)!important;
      --bg-thumb: var(--dark-bg-inverse)!important;
  }

  /* Custom the containt dark color */
  .card,
  .modal-content,
  .footer {
    background-color: var(--dark-bg-light)!important;
    color: var(--dark-bg-inverse) !important;
  }

  .card *:not(.custom-select, option, .is-loading, .form-control, .alert, .card-alt-badge, .card-alt-badge *, .card-alt-icon, .btn, .btn *, .page-item.active *, .input-group-text, .pdf-title, .text-bg-primary),
  .modal-content *:not(.form-control, option, .btn, .btn *, .close, .close *, .dropdown-menu, .dropdown-menu *, .input-group-append *, .custom-select, .modal-bg-label, .modal-bg .modal-bg-title, .countdown .count), .modal label:not(.btn, .custom-select *),
  .text-dark, .modal a:hover,
  .footer *:not(.goog-te-gadget *),
  .footer a:hover:not(.goog-te-gadget *), .footer a:focus:not(.goog-te-gadget *) {
    color: var(--dark-bg-inverse)!important;
  }

  .dropdown-menu .table {
  color: var(--dark-bg);
  }

  .custom-control-label::before,
  .swiper-pagination-bullet{
  background-color: var(--dark-bg-inverse) ;
  }

  .report-slider .rsDefault .rsBullet:not(.rsNavSelected) span {
  background-color: var(--dark-bg-inverse) !important;
  color: var(--dark-bg-inverse) !important;
  }

  .modal-header {
  border-color: var(--dark-bg-light) !important;
  }

  .card-border,
  footer hr {
  border-color: var(--dark-bg-inverse) !important;
  }

  .card-border a.card-border-image {
    border-color: #3c3c3c3f;
   }
}

.dark-mode {
--body-bg: var(--dark-bg);
--body-color: var(--dark-bg-inverse);
--headings-color: var(--dark-bg-inverse);
--navbar-bg: var(--secondary-color);
--navbar-link-color: var(--secondary-color-inverse);
--navbar-link-hover-color: var(--secondary-color-inverse);
--card-bg: var(--dark-bg-light);
--table-striped: var(--dark-bg-light);
--table-hover: var(--dark-bg);

/* change background color variable */
--cc-background-color: var(--dark-bg-light);
--cc-color: var(--dark-bg-inverse);
}

/* Custom Body dark color */
body.dark-mode {
  background-color: var(--dark-bg)!important;
  color: var(--dark-bg-inverse) !important;
}
/* Custom Scroll bar dark color */
.dark-mode .scrollbar {
  --bg-scrollbar: var(--dark-bg-light)!important;
  --bg-thumb: var(--dark-bg-inverse)!important;
}


/* Custom the containt dark color */
.dark-mode .card,
.dark-mode .modal-content,
.dark-mode .footer {
  background-color: var(--dark-bg-light)!important;
  color: var(--dark-bg-inverse) !important;
}

.dark-mode .card *:not(.custom-select, option, .is-loading, .form-control, .alert, .card-alt-badge, .card-alt-badge *, .card-alt-icon, .btn, .btn *, .page-item.active *, .input-group-text, .pdf-title, .text-bg-primary),
.dark-mode .modal-content *:not(.form-control, option, .btn, .btn *, .close, .close *,  .dropdown-menu, .dropdown-menu *, .input-group-append *, .custom-select, .modal-bg-label, .modal-bg .modal-bg-title, .countdown-item .count),
.dark-mode .modal label:not(.btn, .custom-select *),
.dark-mode .text-dark,
.dark-mode .modal a:hover,
.dark-mode .footer *:not(.goog-te-gadget *),
.dark-mode .footer a:hover:not(.goog-te-gadget *),
.dark-mode .footer a:focus:not(.goog-te-gadget *) {
  color: var(--dark-bg-inverse)!important;
}

.dark-mode .dropdown-menu .table {
color: var(--dark-bg);
}

.dark-mode .custom-control-label::before,
.dark-mode .swiper-pagination-bullet {
background-color: var(--dark-bg-inverse) ;
}

.dark-mode .report-slider .rsDefault .rsBullet:not(.rsNavSelected) span {
background-color: var(--dark-bg-inverse) !important;
color: var(--dark-bg-inverse) !important;
}

.dark-mode .modal-header {
border-color: var(--dark-bg-light) !important;
}

.dark-mode .card-border,
.dark-mode footer hr {
border-color: var(--dark-bg-inverse) !important;
}

.dark-mode .card-border a.card-border-image {
  border-color: #3c3c3c3f;
}