.left-sidebar {
  background-color: $white-100;
  border-radius: 4px;

  .sidebar-inner {
    .sidebar-top {
      background-color: $color-border;
      padding: 10px 20px;
      display: flex;
      align-items: center;

      .user-icon {
        max-width: 30px;
        margin-right: 10px;

        img {
          width: 30px;
        }
      }

      .user-info {
        h3 {
          font-size: 1rem;
          line-height: 1;
          margin-bottom: 5px;
        }

        p {
          font-size: 11px;
          color: #74818d;
          line-height: 1;
        }
      }
    }

    .sidebar-menus-items {
      ul {
        li {
          a {
            display: flex;
            font-size: 1rem;
            color: $color-heading;
            align-items: center;
            font-weight: 500;
            padding: 15px 20px;
            transition: 0.3s ease-in-out;
            border-radius: 4px;
            position: relative;
            z-index: 1;

            &:after {
              position: absolute;
              content: "";
              left: 0;
              top: 0;
              width: 0px;
              height: 100%;
              background-color: $ac-primary;
              border-radius: 4px 0 0 4px;
              transition: 0.3s ease-in-out;
            }

            &:hover {
              background-color: #f5f9fc;
              color: $ac-primary;

              &::after {
                width: 4px;
              }
            }

            span {
              max-width: 16px;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
  .left-sidebar.is-bbums.width-300 {
    width: 100% !important;
  }
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) {
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
}