/***
Bootstrap overrides
***/
/* ======================================
   BOOTSTRAP 4 DARK THEME OVERRIDES
   (place LAST in your CSS)
====================================== */

/* Background utilities */
.bg-white,
.bg-light {
  background-color: var(--black) !important;
}

.bg-dark {
  background-color: #000 !important;
}

/* Text utilities */
.text-dark {
  color: var(--white) !important;
}

.text-muted {
  color: var(--grey) !important;
}

/* Cards */
.card,
.card-body,
.card-header,
.card-footer {
  background-color: var(--dark-grey) !important;
  border-color: var(--border-grey) !important;
  color: var(--white);
}

/* Tables */
.table {
  color: var(--white);
  background-color: transparent;
}

.table th,
.table td {
  border-color: var(--border-grey) !important;
}

.table thead th {
  background-color: var(--dark-grey);
  color: var(--white);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03);
}

.table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* Forms */
.form-control,
.custom-select {
  background-color: var(--dark-grey);
  color: var(--white);
  border-color: var(--border-grey);
}

.form-control:focus,
.custom-select:focus {
  background-color: var(--dark-grey);
  color: var(--white);
  border-color: var(--red);
  box-shadow: 0 0 0 0.2rem rgba(227, 6, 19, 0.25);
}

.form-control::placeholder {
  color: var(--grey);
}

/* Buttons */
.btn-light {
  background-color: var(--dark-grey);
  color: var(--white);
  border-color: var(--border-grey);
}

.btn-light:hover {
  background-color: var(--white);
  color: var(--black);
}

.btn-outline-dark {
  color: var(--white);
  border-color: var(--white);
}

.btn-outline-dark:hover {
  background-color: var(--white);
  color: var(--black);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--dark-grey);
  border-color: var(--border-grey);
}

.dropdown-item {
  color: var(--white);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

/* Modals */
.modal-content {
  background-color: var(--dark-grey);
  color: var(--white);
  border-color: var(--border-grey);
}

.modal-header,
.modal-footer {
  border-color: var(--border-grey);
}

/* Alerts */
.alert {
  background-color: var(--dark-grey);
  border-color: var(--border-grey);
  color: var(--white);
}

/* List groups */
.list-group-item {
  background-color: var(--dark-grey);
  border-color: var(--border-grey);
  color: var(--white);
}

.list-group-item-action:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* Navbar (Bootstrap specific) */
.navbar-light {
  background-color: transparent !important;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--white);
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--red);
}

.navbar-light .navbar-toggler {
  border-color: transparent !important;
}

.navbar-light .navbar-toggler-icon {
  filter: invert(1);
}

.navbar-toggler:focus
{
  box-shadow: none;
  border: none;
}

.navbar-dark .navbar-toggler-icon {
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.8)) !important;
}

/* Pagination */
.page-link {
  background-color: var(--dark-grey);
  border-color: var(--border-grey);
  color: var(--white);
}

.page-link:hover {
  background-color: var(--white);
  color: var(--black);
}

/* Breadcrumbs */
.breadcrumb {
  background-color: var(--dark-grey);
}

.breadcrumb-item.active {
  color: var(--grey);
}

@media (max-width: 767.98px) {
  .navbar-collapse.offcanvas-left {
    position: fixed;
    top: 0;
    left: -100%;
    width: 260px;
    height: 100vh;
    padding: 1rem;
    overflow-y: auto;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.75);
    border-radius: 0px 25px 30px 5px;
    backdrop-filter: blur(2.7px);
    -webkit-backdrop-filter: blur(2.7px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  .navbar-collapse.offcanvas-left.show {
    left: 0;
    transform: translateX(0);
  }

  .navbar-collapse.collapsing {
    transition: none;
  }
}

.accordion-button:not(.collapsed) {
  color: var(--white);
  background-color: transparent;
}

:root
{
  --bs-border-radius: 33px;
}
.accordion-item, .accordion-header, .accordion-button
{
  border-radius: var(--bs-accordion-border-radius) !important;
  border-color: transparent !important;
}

.accordion-button:focus {

  box-shadow: none !important;
}

.accordion-item
{
  margin-top: 15px;
  margin-bottom: 15px;
}