.nav-group { margin: 5px 0; }

.nav-group-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #3d4651;
  display: flex;
  font-weight: 600;
  gap: 13px;
  height: 44px;
  padding: 0 18px;
  text-align: left;
  width: 100%;
}

.nav-group-toggle:hover { background: #f4f7f5; }
.nav-group-toggle > span { color: #87909c; font-size: 18px; text-align: center; width: 20px; }
.nav-group-toggle > b { font-weight: 600; }
.nav-group-toggle > i { color: #8b949e; font-size: 15px; font-style: normal; margin-left: auto; transition: transform .18s ease; }
.nav-group.collapsed .nav-group-toggle > i { transform: rotate(-90deg); }

.nav-children {
  display: grid;
  gap: 2px;
  overflow: hidden;
  padding: 2px 0 4px 19px;
}

.nav-group.collapsed .nav-children { display: none; }
.nav-children a { height: 42px; margin-bottom: 0; padding-left: 16px; }
.nav-children a::before { background: #d9dee3; border-radius: 50%; content: ""; height: 4px; margin-left: -8px; width: 4px; }
.nav-children a.active::before { background: var(--green); }

@media (max-width: 900px) {
  .nav-group-toggle { justify-content: center; padding: 0; }
  .nav-group-toggle > b, .nav-group-toggle > i { display: none; }
  .nav-children { padding-left: 0; }
  .nav-children a::before { display: none; }
}