[data-bs-theme=light] {
  --stat-card-clr: #f9fafb;
  --nav-active-clr: #254334;
  --dark-green-nav: #064e3b;
}

[data-bs-theme=dark] {
  --stat-card-clr: #f9fafb00;
  --nav-active-clr: #ebebeb;
  --dark-green-nav: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.073),
      rgba(255, 255, 255, 0)
  );
}

:root {
  --ecl-clr-1: #20af67;
  --gradient-clr-1: rgba(255, 255, 255, 0.073);
  --gradient-clr-2: rgba(255, 255, 255, 0);
  --bs-gradient-2: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.073),
      rgba(255, 255, 255, 0)
  );
  --bs-light-rgb2: rgb(249, 249, 249);
}

/* Side Navbar */
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
  transition: color 0.2s ease;
  color: white !important;
}
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) svg,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) svg {
  color: white;
}
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-arrow::after,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-arrow::after {
  color: white;
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link {
  color: white;
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-title, [data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title {
  color: white;
}

.menu-rounded .menu-link {
  border-radius: 50px !important;
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
  color: #dddcdc !important;
}

.app-sidebar .menu .menu-item .menu-sub .menu-item .menu-link .menu-title {
  color: white !important;
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon .svg-icon,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
  color: var(--nav-active-clr) !important;
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title {
  color: #dddcdc;
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-title {
  color: var(--nav-active-clr) !important;
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
  transition: color 0.2s ease;
  background: rgba(241, 241, 241, 0.584);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--nav-active-clr) !important;
  transform: translateY(-1px);
}
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-arrow::after {
  color: var(--nav-active-clr);
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-bullet .bullet {
  background-color: var(--nav-active-clr);
}

/* General for other Pages */
.bg-gradient2 {
  background-image: var(--bs-gradient-2);
}

.bg-green {
  background: var(--dark-green-nav) !important;
}

.nav-line-tabs .nav-item .nav-link.active, .nav-line-tabs .nav-item .nav-link:hover:not(.disabled), .nav-line-tabs .nav-item.show .nav-link {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #20af67 !important;
  transition: color 0.2s ease;
}

.text-active-primary.active {
  color: #20af67 !important;
}

.txt-green {
  color: #20af67;
}

.primbtn-1 {
  font-size: 12px;
  margin-inline: 5px;
  padding-block: 8px;
  padding-inline: 10px;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-transform: capitalize;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #20af67;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  z-index: 1;
  background: transparent;
  color: #20af67;
  transition: all 0.2s;
}
.primbtn-1:hover {
  color: white;
  background-color: #20af67;
}

.primbtn-2 {
  font-size: 12px;
  margin-inline: 5px;
  padding-block: 8px;
  padding-inline: 10px;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-transform: capitalize;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #20af67;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  z-index: 1;
  background: #20af67;
  color: white;
}
.primbtn-2:hover {
  color: white;
  background-color: #177646;
  transition: all 0.2s;
}

.secbtn-1 {
  font-size: 12px;
  padding-block: 5px;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-transform: capitalize;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #99a1b7;
  box-shadow: var(--box-shadow);
  z-index: 1;
  background: transparent;
  color: #99a1b7;
  transition: all 0.2s;
}
.secbtn-1:hover {
  color: white;
  background-color: #99a1b7;
}

.secbtn-2 {
  font-size: 12px;
  margin-inline: 5px;
  padding-block: 8px;
  padding-inline: 9px;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-transform: capitalize;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #e8e8e8;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  z-index: 1;
  background: #e8e8e8;
  color: #254334;
  transition: all 0.2s;
}
.secbtn-2:hover {
  color: #254334;
  background-color: #dddcdc;
}

.btn-check:active + .btn.btn-active-light-primary, .btn-check:checked + .btn.btn-active-light-primary, .btn.btn-active-light-primary.active, .btn.btn-active-light-primary.show, .btn.btn-active-light-primary:active:not(.btn-active), .btn.btn-active-light-primary:focus:not(.btn-active), .btn.btn-active-light-primary:hover:not(.btn-active), .show > .btn.btn-active-light-primary {
  color: #20af67;
  border-color: rgba(208, 250, 226, 0.2784313725);
  background-color: rgba(208, 250, 226, 0.2784313725) !important;
}
.btn-check:active + .btn.btn-active-light-primary i, .btn-check:checked + .btn.btn-active-light-primary i, .btn.btn-active-light-primary.active i, .btn.btn-active-light-primary.show i, .btn.btn-active-light-primary:active:not(.btn-active) i, .btn.btn-active-light-primary:focus:not(.btn-active) i, .btn.btn-active-light-primary:hover:not(.btn-active) i, .show > .btn.btn-active-light-primary i {
  color: #20af67;
}

.btn.btn-light-primary2 {
  color: #20af67;
  border-color: rgba(208, 250, 226, 0.2784313725);
  background-color: rgba(208, 250, 226, 0.2784313725);
}
.btn.btn-light-primary2 i {
  color: #20af67;
}

.btn-check:active + .btn.btn-light-primary2, .btn-check:checked + .btn.btn-light-primary2, .btn.btn-light-primary2.active, .btn.btn-light-primary2.show, .btn.btn-light-primary2:active:not(.btn-active), .btn.btn-light-primary2:focus:not(.btn-active), .btn.btn-light-primary2:hover:not(.btn-active), .show > .btn.btn-light-primary2 {
  color: white;
  border-color: #20af67;
  background-color: #20af67 !important;
}
.btn-check:active + .btn.btn-light-primary2 i, .btn-check:checked + .btn.btn-light-primary2 i, .btn.btn-light-primary2.active i, .btn.btn-light-primary2.show i, .btn.btn-light-primary2:active:not(.btn-active) i, .btn.btn-light-primary2:focus:not(.btn-active) i, .btn.btn-light-primary2:hover:not(.btn-active) i, .show > .btn.btn-light-primary2 i {
  color: white;
}

.c-text-bold label {
  font-weight: 600;
}

.badge-light-success {
  background-color: #20af67 !important;
  color: white !important;
}

.badge-light-success2 {
  background-color: rgba(208, 250, 226, 0.2784313725) !important;
  color: #20af67 !important;
}

.badge-light-greyed {
  background-color: #ededed;
  color: #939393;
}

.form-check-input:checked {
  background-color: #20af67;
  border-color: #20af67;
}

.badge-light-success {
  background-color: var(--bs-success-light);
  color: #20af67;
}

.pagination {
  --bs-pagination-border-radius: 50px !important;
  --bs-pagination-hover-color: $ecl-green-1 !important;
  --bs-pagination-active-bg: var(--ecl-clr-1) !important;
}

@media (max-width: 991.98px) {
  .app-container {
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}