#menu {
  height: calc(100vh - 78px);
  overflow-x: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 5px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(129, 129, 129, 0.6);
    border-radius: 5px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(129, 129, 129, 0.5);
  }
}
.pony-menu {
  padding: 7px 19px 7px 15px;
  &__submenu {
    &.active {
      .pony-menu__submenu-title {
        background: rgba(255, 255, 255, 1);
        .left-icon,
        span,
        .right-arrow {
          color: rgba(33, 47, 82, 1);
        }
        .right-arrow {
          transform: rotate(180deg);
        }
      }
    }
    &:not(.active):hover {
      .pony-menu__submenu-title {
        background: #384464;
      }
    }
    &-title {
      display: flex;
      align-items: center;
      height: 50px;
      padding: 0 33px 0 31px;
      margin: 2px 0;
      border-radius: 30px;
      transition: background-color 0.5s;
      cursor: pointer;
      .left-icon {
        color: #fff;
        font-size: 20px;
        margin-right: 10px;
      }
      span {
        font-size: 14px;
        color: #fff;
        font-weight: 400;
        white-space: nowrap;
        transition: all 0.3s;
      }
      .right-arrow {
        margin-left: auto;
        font-size: 14px;
        color: #fff;
        transition: all 0.5s;
      }
    }
    &-panel {
      background: rgba(30, 43, 75, 1);
      margin: 0 16px;
      height: 0;
      transition: all 0.12s ease;
      overflow: hidden;
      > h3 {
        display: none;
      }
      &-menu {
        &-item {
          a {
            display: block;
            line-height: 40px;
            padding-left: 48px;
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none !important;
          }
          &.active,
          &:hover {
            background: rgba(26, 37, 64, 1);
            color: #fff;
          }
        }
      }
    }
  }
}

@media (max-width: 1600px) {
  #app-side {
    width: 220px;
  }
  #app-main {
    margin-left: 220px !important;
  }
  .side-header {
    padding: 17px 0 17px 20px;
  }
  .pony-menu {
    padding: 5px 12px 5px 10px;
  }
  .pony-menu__submenu-title {
    height: 40px;
    padding: 0 20px 0 20px;
  }
  .pony-menu__submenu-title .left-icon {
    font-size: 16px;
  }
  .pony-menu__submenu-title .right-arrow {
    font-size: 13px;
  }
  .pony-menu__submenu-panel {
    margin: 0 14px;
  }
  .pony-menu__submenu-panel-menu-item a {
    padding-left: 33px;
  }
}