#menu ul:has(li.hasChildren.active) li.hasChildren.active {
  box-shadow: inset 0px 0 var(--item-colour, transparent) !important;
  background: transparent !important;
}

#menu ul:not(:has(li.hasChildren.active)) {
  overflow-y: scroll !important;
}

#menu > ul:has(li.hasChildren.active) > li::before,
#menu > ul ul:has(li.hasChildren.active) > li::before,
#menu > ul:has(li.hasChildren.active) > li > label,
#menu > ul:has(li.hasChildren.active) > li > svg,
#menu > ul ul:has(li.hasChildren.active) > li > label,
#menu > ul ul:has(li.hasChildren.active) > li > svg {
  transform: translateX(-320px);
}

#menu li.hasChildren:not(.active) li .sub {
  display: none; // improves performance
}

.sub .sub {
  top: 0 !important;
  padding-top: 2px;
}

.sub:has(ul > li.hasChildren.active) > .nav > .back {
  display: none !important;
}

#menu ul > li > label,
#menu ul > li > svg {
  transition: transform 0.3s ease;
}

#menu .sub {
  transition: transform 0.3s ease;
}

#menu > ul:has(li.hasChildren.active) > li.active {
  background: transparent !important;
}