body {
  background-color: var(--primary);
  transition: background-color 0.5s ease 0s;
}
body .sidebar-nav ul {
  background-color: var(--primary);
  transition: background-color 0.5s ease 0s;
}
body .sidebar-nav .metismenu a:active, body .sidebar-nav .metismenu a:focus, body .sidebar-nav .metismenu a:hover, body .sidebar-nav .metismenu a[aria-expanded=true] {
  background-color: var(--primaryHover);
  color: white;
  transition: background-color 0.5s ease 0s, color 0.5s ease 0s;
}
body .sidebar-nav .metismenu ul > li {
  background-color: var(--subPrimary);
  border-color: var(--primaryHover);
  transition: background-color 0.5s ease 0s, border-color 0.5s ease 0s;
}
body .sidebar-nav .metismenu a {
  color: var(--lightText);
  transition: color 0.5s ease 0s;
}
body .sidebar-nav .metismenu .active-page {
  color: var(--lightText);
  transition: color 0.5s ease 0s;
}
body menu .slideout-panel {
  color: var(--darkText);
  transition: color 0.5s ease 0s;
}

html.no-transition,
html.no-transition * {
  transition: none !important;
}