/** * Hidden fallback */
[hidden] {
  display: none;
  visibility: hidden;
}
/** * Styling navigation */
/* .accordion {} */

/** * Styling top level items */
.nav p,
.nav label {
  display: block;
  padding: 1.36rem;
  color: #000;
  border-bottom: 1px dashed #c5d9e7;
  transition: all 0.2s ease-in;
  @media (max-width: 575.98px) {
    padding: 1rem;
  }
}
/* .nav p:focus,
.nav label:focus,
.nav a:hover,
.nav label:hover {
  border-bottom: 1px solid #c5d9e7;
} */
.nav label {
  cursor: pointer;
}
/** * Styling first level lists items */
.group-list p,
.group-list label {
  padding-left: 4.2rem;
  @media (max-width: 575.98px) {
    padding-left: 2.2rem;
  }
}
/* .group-list p:focus,
.group-list label:focus,
.group-list p:hover,
.group-list label:hover {
  border-bottom: 1px solid #c5d9e7;
} */
/** * Styling second level list items */
.sub-group-list p,
.sub-group-list label {
  padding-left: 9.4rem;
  @media (max-width: 575.98px) {
    padding-left: 5.4rem;
  }
}
/* .sub-group-list p:focus,
.sub-group-list label:focus,
.sub-group-list p:hover,
.sub-group-list label:hover {
  border-bottom: 1px solid #c5d9e7;
} */

/* .nav__list input[type="checkbox"]:checked + label {
  border-bottom: 1px solid #c5d9e7;
} */

/** * Hide nested lists */
.group-list,
.sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}
.nav__list input[type="checkbox"]:checked + label + ul {
  /* reset the height when checkbox is checked */
  max-height: 4000px;
}
/** * Rotating chevron icon */
label {
  transition: transform 0.2s ease;
  position: relative;
  font-weight: 500;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
label::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 24px;
  width: 18px;
  height: 1px;
  background-color: #333;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transform: translateY(-50%) rotate(0);
  transform: translateY(-50%) rotate(0);
}
label::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 18px;
  height: 1px;
  background-color: #333;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  transform: translateY(-50%) rotate(-90deg);
}
.nav__list input[type="checkbox"]:checked + label::after {
  transform: rotate(0);
}