@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:not(.info-hero-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, .info-hero-card *),
  .modal-content *:not(.form-control, option, .btn, .btn *, .close, .close *, .dropdown-menu, .dropdown-menu *, .input-group-append *, .modal-bg-label, .modal-bg .modal-bg-title, .countdown-item .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 {
    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;
  }

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

.dark-mode {
--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.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:not(.info-hero-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, .info-hero-card *),
.dark-mode .modal-content *:not(.form-control, option, .btn, .btn *, .close, .close *, .dropdown-menu, .dropdown-menu *, .input-group-append *, .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 {
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 footer hr {
border-color: var(--dark-bg-inverse) !important;
}