:root {
  --bs-primary: #009999; /* your custom primary color */
  --bs-primary-rgb: 0, 153, 153;
}

.brand-img {
  transition: height 0.3s ease-in-out;
  background: #fff;
  border-radius: 74px;
  padding: 0px;
  margin-bottom: 0px;
}


.sidebar {
  background: #00999924 !important;
}

.sidebar .nav-item .nav-link.active {
  border: 1px solid #009999;
  padding: 5px;
  border-radius: 5px;
}

.sidebar .nav-item .nav-link.active span{
  color: #009999;
  font-weight: 900;
  text-decoration: none;
}
.sidebar .nav-item .nav-link span{
  color: #004444;
  font-weight: 900;
  text-decoration: underline;
}

.sidebar-dark .nav-item .nav-link.active i {
  color: #009999;
}
.sidebar-dark .nav-item .nav-link i {
  color: #004444;
}

.sidebar-dark #sidebarToggle {
    background-color: rgb(0 0 0 / 20%);
}



.btn-primary {
  --bs-btn-color: #fff;
 /* --bs-btn-bg: #009999;
  --bs-btn-border-color: #009999;*/
  --bs-btn-bg: #009999;
  --bs-btn-border-color: #00b3ff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #009999;
  --bs-btn-hover-border-color: #009999;
  --bs-btn-focus-shadow-rgb: 255, 208, 38;
  --bs-btn-active-color: #ffc80000;
  --bs-btn-active-bg: #ffc80000;
  --bs-btn-active-border-color: #009999;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #009999;
  --bs-btn-disabled-border-color: #009999;
}

.display-alerts {
  display: block;
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1000;
}

.alert {
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 1rem;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: 1px solid var(--bs-alert-border-color);
  --bs-alert-border-radius: 0.375rem;
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}

.alert-primary {
  --bs-alert-color: #997800;
  --bs-alert-bg: #fff4cc;
  --bs-alert-border-color: #ffefb3;
}
.alert-primary .alert-link {
  color: #7a6000;
}

.alert-secondary {
  --bs-alert-color: #41464b;
  --bs-alert-bg: #e2e3e5;
  --bs-alert-border-color: #d3d6d8;
}
.alert-secondary .alert-link {
  color: #34383c;
}

.alert-success {
  --bs-alert-color: #0f5132;
  --bs-alert-bg: #d1e7dd;
  --bs-alert-border-color: #badbcc;
}
.alert-success .alert-link {
  color: #0c4128;
}

.alert-info {
  --bs-alert-color: #087990;
  --bs-alert-bg: #cff4fc;
  --bs-alert-border-color: #b6effb;
}
.alert-info .alert-link {
  color: #066173;
}

.alert-warning {
  --bs-alert-color: #997800;
  --bs-alert-bg: #fff4cc;
  --bs-alert-border-color: #ffefb3;
}
.alert-warning .alert-link {
  color: #7a6000;
}

.alert-danger {
  --bs-alert-color: #842029;
  --bs-alert-bg: #f8d7da;
  --bs-alert-border-color: #f5c2c7;
}
.alert-danger .alert-link {
  color: #6a1a21;
}

.alert-light {
  --bs-alert-color: #959596;
  --bs-alert-bg: #fefefe;
  --bs-alert-border-color: #fdfdfe;
}
.alert-light .alert-link {
  color: #777778;
}

.alert-dark {
  --bs-alert-color: #141619;
  --bs-alert-bg: #d3d3d4;
  --bs-alert-border-color: #bcbebf;
}
.alert-dark .alert-link {
  color: #101214;
}


.custom-alert {
    padding: 0;
}

.alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.alert-body {
    padding: 12px;
}

.close-alert {
    cursor: pointer;
}

.bg-gradient-primary {
    background-color: #009999;
    background-image: linear-gradient(180deg, #fff 10%, #009999 100%);
    background-size: cover;
}


 @media (max-width: 575.98px) { /* Extra small devices (less than 576px) */
    #dataTable th {
      font-size: 0.9em; /* Adjust as needed */
    }
    #dataTable td {
      font-size: 0.9em; /* Adjust as needed */
    }
  }


.table-scroll-hint {
  text-align: right;
  font-size: 12px;
  color: #009999;
  padding: 7px 0 4px 2px;
}

@media (min-width: 468px) {
  .table-scroll-hint {
    display: none; /* Hide on desktop */
  }
}