* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

:root {
  --bs-primary: #0e5673;
  --bs-primary-hover: #0c4a61;
  --bs-tertiary: #fff5ed;
  --bs-secondary: #e88651;
  --bs-success: #28a745;
  --bs-info: #17a2b8;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
}
@font-face {
  font-family: "Poppins";
  font-family: "Font Awesome 6 Free";
  src: url("/webfonts/fa-solid-900.woff2") format("woff2");
  font-display: swap;
}
.table-primary {
  --bs-table-bg: var(--bs-primary) !important;
  --bs-table-striped-bg: #d0f0f2;
  --bs-table-hover-bg: #c2e8ea;
  --bs-table-color: #ffff;
}
/* 2. Button overrides */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--bs-primary-hover) !important;
  border-color: var(--bs-primary-hover) !important;
}

/* 3. Table header */
table.dataTable thead {
  background-color: var(--bs-primary);
  color: white;
}

/* 4. Modal header */
.modal-header {
  background-color: var(--bs-primary);
  color: white;
}

/* 5. Alerts */
.alert-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: white;
}

.main {
  background-color: var(--bs-tertiary);
}

#custom-loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(255, 255, 255, 0.4);

  backdrop-filter: blur(1px);

  z-index: 9999;
  justify-content: center;
  align-items: center;

  cursor: wait;
  pointer-events: all;
}

#custom-loader img {
  width: 120px;
  height: 120px;
}

table {
  width: 100% !important;
}

.disabled-slot {
  background-color: #e0e0e0 !important;
  pointer-events: none;
  opacity: 0.8;
}
.total-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease;
}

.total-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.total-card:hover {
  transform: scale(1.05);
}

.chart-card {
  transition:
    transform 0.5s ease,
    filter 0.5s ease;
  cursor: pointer;
}

.chart-card:hover {
  transform: scale(1.05);
}
.total-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease;
}

.total-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.total-card:hover {
  transform: scale(1.05);
}

.chart-card {
  transition:
    transform 0.5s ease,
    filter 0.5s ease;
  cursor: pointer;
}

.chart-card:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .dataTables_filter input[type="search"] {
    max-width: 170px !important;
    font-size: 0.85rem;
    padding: 4px 8px;
    margin-top: 5px !important;
  }
}

.wrapper {
  align-items: stretch;
  display: flex;
  width: 100%;
  min-height: 100vh;
}

#sidebar {
  background-color: var(--bs-primary);
  width: 230px;
  height: calc(100vh - 54px); /* minus navbar height */

  top: 54px;
  left: 0;
  transition: all 0.35s ease-in-out;
  display: flex;
  flex-direction: column;
  position: fixed !important;
  border-right: 1px solid #93a3c2;
  z-index: 1000;
}
/* Sidebar collapse */

#sidebar.collapsed {
  margin-left: -230px;
}
#sidebar.collapsed + .main {
  margin-left: 0;
}
/* .dataTables_scrollHeadInner {
  width: 100% !important;
} */
.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  transition: all 0.35s ease-in-out;
  margin-left: 230px;
}

.sidebar-logo {
  padding: 1.15rem 1.5rem;
}

.sidebar-logo a {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 600;
}

.sidebar-nav {
  width: 230px;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

.sidebar-header {
  color: #ffffff;
  font-size: 0.75rem;
  padding: 1rem 1rem 0.375rem;
}
.activeLink {
  position: relative;
  background-color: var(--bs-tertiary);
  color: #0b0c0e !important;
  border-left: 6px solid var(--bs-secondary);
}
.sidebar-footer {
  padding: 15px 0;
}
a.sidebar-link {
  padding: 0.45rem 1rem;
  color: #ffffff;
  position: relative;
  display: block;
  font-size: 0.9rem;
  text-decoration: none;
  line-height: 1.2;
}

.sidebar-link[data-bs-toggle="collapse"]::after {
  border-radius: 1rem;
  border: solid;
  border-width: 0 0.075rem 0.075rem 0;
  content: "";
  display: inline-block;
  padding: 2px;
  position: absolute;
  right: 1.5rem;
  top: 1.4rem;
  transform: rotate(-135deg);
  transition: all 0.2s ease-out;
}

.sidebar-link[data-bs-toggle="collapse"].collapsed::after {
  border-radius: 1rem;
  transform: rotate(45deg);
  transition: all 0.2s ease-out;
}

.content {
  flex: 1;
  max-width: 100vw;
  width: 100vw;
}
.navbar {
  height: 60px;
  background-color: var(--bs-secondary);
}

.sidebar-link:hover {
  position: relative;
  background-color: var(--bs-tertiary);
  color: #0b0c0e !important;
  border-left: 6px solid var(--bs-secondary);
}

.navbar-brand {
  margin-left: 35px;
}

#sidebarToggle {
  border: 1px solid white;
  padding: 3px 8px;
  font-size: 0.9rem;
}

#sidebarToggle:hover {
  border-color: var(--bs-primary);
}

#sidebarToggle:hover i {
  color: var(--bs-primary) !important;
}

#system_title:hover {
  color: var(--bs-primary) !important;
}

@media (min-width: 768px) {
  .content {
    width: auto;
  }
}
@media (max-width: 767.98px) {
  .navbar-brand {
    margin: 0;
    padding: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .userName {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .navbar {
    margin-left: 0;
  }
  #system_title {
    margin: 0 auto;
  }
}

.dropdown-item:hover {
  background-color: #0d6efd !important;
  color: white;
}