.side-menu {
  font-size: 14px;
  max-height: 100%;
  overflow:hidden;
  
  // height: 100%;
  .ivu-poptip-arrow {
    display: none;
  }
  li {
    position: relative;
    display: block;
    ul {
      overflow: hidden; // background: #292929;
     
      li a {
        padding: 8px;
        color: #666;
      }
    }
    a {
      position: relative;
      display: block;
      padding: 10px 5px;
      color: #333;
      font-size: 14px;
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .ivu-icon {
        font-size: 18px;
        vertical-align: -2px;
      }
      .arrow {
        position: absolute;
        right:15px;
        margin-top: 9px;
        font-weight: bold;
        font-size: 12px;
        color: #5f5f5f;
        transition: ease .4s;
      }
      &>span {
        margin-left: 5px;
      }
      &:hover .arrow{
        color: #fff;
        margin-top: 11px;
      }
    }
    .active {
      color: #F99C34;
    }
    .active-mark {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 1px;
      background-color: #ffb403;
    }
  }
}


.side-menu>li>ul>li>a:hover {
  color: #fff;
}

.side-menu li a:hover {
  color: #fff;
  background: #F99C34;
}

.side-menu-light li a {
  // padding: 8px 20px !important;
  font-size: 13px;
}

.side-menu-light>li:hover>.menu-show {
  transition: left 0.3s;
  height: auto;
  position: absolute;
  width: 220px;
  background-color: #444;
  left: 60px;
  top: 0;
  box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.2);
  height: inherit !important;
}

.side-menu-light {
  padding: 0;
  .ivu-poptip-arrow {
    display: block;
    left: -8px;
    border-width: 9px 9px 9px 0; // border-right-color: #FFF;
    top: 12px;
  }
  &>li {
    border: none;
    height: inherit;
    &>a {
      text-align: center; // padding-left: 10px;
      padding-left: 8px !important;
      span,
      .arrow {
        display: none;
      }
    }
    &>ul {
      left: 80px;
      width: 220px;
      display: block;
      max-height: 340px;
      overflow-y: auto;
      &>li {
        a {
          color: #fff;
          padding: 12px 10px !important;
          font-size: 12px;
        }
        &>ul {
          left: 201px;
          width: 220px;
          li {
            a {
              padding-left: 20px !important;
            }
          }
          &:hover {
            overflow: visible;
          }
        }
      }
    }
  }
  &>li:hover ul.menu-show {
    >li .active {
      background-color: #333 !important;
      color: #fff;
    }
    li a:hover {
      background-color: #333;
      color: #fff;
    }
    &:before {
      // content: "";
      // position: absolute;
    }
  }
}

.side-menu:hover{
  overflow-y: auto;
  
}
.side-menu-light:hover {
    overflow: inherit;
    height: auto;
}
.side-menu:hover::-webkit-scrollbar{width: 10px;height: 1px;}
.side-menu:hover::-webkit-scrollbar-thumb{border-radius: 5px;background: rgba(0, 0, 0, 0.4);}
.side-menu:hover {scrollbar-base-color: rgba(0, 0, 0, 0.4);;}