:root {
  --mf-teal: #227280;
  --mf-teal-dark: #164f59;
  --mf-lime: #B9E520;
  --mf-lime-dark: #98c413;
}

.p-0 {
  padding: 0 !important;
}

.p-5 {
  padding: 3rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

@media (min-width: 1200px) {
  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

.sidebar {
  background: linear-gradient(180deg, #227280 0%, #164f59 100%) !important;
}

.sidebar .nav-item .nav-link.active {
  color: #ffffff !important;
  font-weight: 700;
  border-left: 4px solid var(--mf-lime);
}

.sidebar .nav-item .nav-link:hover {
  color: var(--mf-lime) !important;
}

.sidebar .nav-item .nav-link:hover svg,
.sidebar .nav-item .nav-link.active svg {
  color: var(--mf-lime) !important;
}

.scroll-to-top {
  background: var(--mf-teal) !important;
}

.scroll-to-top:hover {
  background: var(--mf-teal-dark) !important;
  color: var(--mf-lime) !important;
}

.btn-primary {
  background-color: var(--mf-teal) !important;
  border-color: var(--mf-teal) !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--mf-teal-dark) !important;
  border-color: var(--mf-teal-dark) !important;
}