.sc-sidebar-menu {
  color: #eeeeee;
  background-color: #495060;
}
.sc-menu-item {
  cursor: pointer;
  padding-right: 12px;
  &-l1 {
    .sc-menu-icon {
      margin-right: 6px;
    }
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 12px;
    font-size: 15px;
  }
  &-l2 {
    .sc-menu-icon {
      margin-right: 4px;
    }
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    font-size: 14px;
  }
  &-l3 {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 36px;
    font-size: 13px;
    border-bottom: 1px #262e3f solid;
  }
  &-l4 {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 48px;
    font-size: 13px;
    border-bottom: 1px #1e2637 solid;
  }
  &-active {
    background-color: #1b7ade;
    color: #fff;
    &-parent {
      border-right: 4px solid #2d8cf0;
    }
  }
}
.sc-menu-arrow {
  float: right;
  margin-right: 12px;
}
.sc-sub-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s ease-in-out;
  &-open {
    max-height: 2500px; // about 50 menu items
    transition: max-height .8s ease-in-out;
  }
  &-l1 {
    background-color: #363e4f;
  }
  &-l2 {
    background-color: #2e3647;
  }
  &-l3 {
    background-color: #262e3f;
  }
}