.sidebarWrap {
  // z-index: 1;
  // min-height: 100%;
  // display: flex;
  // position: absolute;
  // -webkit-box-flex: 1;
  // top:60px;
  // left: -12px;
  z-index: 1;
  // background: #0c1e35;
  background: #110b79;
  // background: #23394c;
  position: fixed;
  top: 0;
  width: 250px;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;
  transition-property: width;
  overflow-y: auto;
  @media #{$medium} {
    width: 0px;
     
 }

  @media #{$small} {
    width: 0px;
     
 }
  .sidebar {
    width: 250px;
    min-width: 250px;
    transition: width, left, right, 0.3s;
    -webkit-transition: width, left, right, 0.3s;
    color: #7d84ab;
    overflow-x: hidden !important;
    position: relative;
    .sidebar-layout {
      height: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      // background-color: #0c1e35;
      background-color: #110b79;
      // background-color: #23394c;
      z-index: 2;
      .sidebar-header {
        // height: 100px;
        // min-height: 100px;
        height: 65px;
        min-height: 65px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        background: #f8f8f8;
        .pro-sidebar-logo {
          display: flex;
          align-items: center;
          img {
            // width: 80%;
            width: 90%;
            height: auto;
          }
          > div {
            width: 35px;
            min-width: 35px;
            height: 35px;
            min-height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            color: $st-text-ninth;
            font-size: 24px;
            font-weight: 700;
            background-color: #ff8100;
            margin-right: 10px;
          }
          > h5 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 20px;
            line-height: 30px;
            transition: opacity 0.3s;
            opacity: 1;
            color: #7d84ab;
            font-weight: bold;
          }
        }
      }
      .sidebar-content {
        flex-grow: 1;
        padding: 10px 0; 
      }
      .sidebar-footer {
        height: 230px;
        min-height: 230px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        > span {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .menu {
      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      .menu-header {
        font-weight: 600;
        padding: 10px 25px;
        font-size: 0.8em;
        letter-spacing: 2px;
        transition: opacity 0.3s;
        opacity: 0.5;
        text-transform: uppercase;
      }
      .menu-item {
        a {
          display: flex;
          align-items: center;
          height: 50px;
          padding: 0 20px;
          color: #7d84ab;
          text-decoration: none;
          .menu-icon {
            font-size: 1.2rem;
            width: 35px;
            min-width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            display: inline-block;
            margin-right: 10px;
            border-radius: 2px;
            transition: color 0.3s;
            svg {
              display: inline-block;
            }
          }
          .menu-title {
            // font-size: 0.9em;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex-grow: 1;
            transition: color 0.3s;
          }
          .menu-prefix, 
          .menu-suffix {
            display: inline-block;
            padding: 5px;
            opacity: 1;
            transition: opacity 0.3s;
          }
          &:hover {
            .menu-title {
              color: #dee2ec;
            }
            .menu-icon {
              color: #dee2ec;
              i {
                animation: swing ease-in-out 0.5s 1 alternate;
              }
            }
            &::after {
              border-color: #dee2ec!important;
            }
          }
          .badge {
            display: inline-block;
            padding: 0.25em 0.4em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25rem;
            color: $st-text-ninth;
            background-color: #6c757d;
            &.primary {
              background-color: #ab2dff;
            }
          }
          &.active {
            color: $st-text-ninth;
          }
        }
        &.sub-menu {
          position: relative;
          > a {
            &::after {
              content: '';
              transition: transform 0.3s;
              border-right: 2px solid currentcolor;
              border-bottom: 2px solid currentcolor;
              width: 8px;
              height: 8px;
              transform: rotate(-45deg);
            }
          }

          > .sub-menu-list {
            padding-left: 20px;
            display: none;
            overflow: hidden;
            z-index: 999;
            ul {
              padding-left: 28px;
            }
            &.sub-list-open {
              display: block;
            }
          }
          &.open {
            > a {
              color: #dee2ec;
              &::after {
                transform: rotate(45deg);
              }
            }
          }
        }
      }
    }
    #btn-collapse {
      display: block;
      @media #{$medium} {
        display: none;
      }
    }
    .sidebar-collapser {
      transition: left, right, 0.3s;
      position: fixed;
      // left: 260px;
      // top: 40px;
      // width: 20px;
      // height: 20px;
      left: 220px;
      top: 100px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background-color: #00829f;    
      font-size: 18px;
      font-style: normal;
      transform: translateX(50%);
      z-index: 111;
      cursor: pointer;
      color: white;
      box-shadow: 1px 1px 4px #0c1e35;
      text-decoration: none;
      text-align: center;
      svg {
        font-style: normal;
        font-weight: normal;
      }
    }
    .sidebar-collapser-closed {
      left: 35px!important;
    }
    &.has-sidebar {
      flex-direction: row;
      -webkit-box-direction: normal;
      -webkit-box-orient: horizontal;
    }
    &.fixed-sidebar {
      height: 100%;
      .sidebar {
        height: 100%;
        overflow: auto;
      }
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
    }
    &:hover {
      &::-webkit-scrollbar-thumb {
        background-color: lighten(#0c1e35, 15);
      }
    }
    &::-webkit-scrollbar {
      width: 6px;
      background-color:#0c1e35;
    }
  }
  &.closeSideBar {
      width: 65px!important;
  }
}

@keyframes swing {
  0%,
  30%,
  50%,
  70%,
  100% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(10deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  60% {
    transform: rotate(5deg);
  }

  80% {
    transform: rotate(-5deg);
  }
}
.sideBarOverflow {
  > div {
    overflow-x: hidden!important;
    //max-height: 500px!important;
  }
}