ul.start {
  list-style: none;
  height: 100%;
  margin: 0;
  padding-left: 0;
  > li {
    background-color: #518e3a;
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 22%,
      rgba(255, 255, 255, 0) 72%,
      rgba(255, 255, 255, 0.2) 100%
    );
    display: inline-block;
    width: 140px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    padding-left: 14px;
    align-items: center;
    position: relative;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;

    > a {
      color: #fff;
      text-decoration: none;
      pointer-events: none;
      font-size: 26px;
      font-style: italic;
      font-weight: bold;

      > img {
        vertical-align: middle;
        height: 28px;
        width: 28px;
        margin-right: 5px;
      }
    }

    &:hover {
      cursor: pointer;
    }

    &:focus,
    &.open {
      .slide-open {
        display: block;
        transform: translateY(-100%);
      }
    }
  }
}

.slide-open {
  position: absolute;
  cursor: auto;
  top: 0;
  left: 0;
  width: 366px;
  transition: 0.4s ease-in;
  transform: translateY(100%);
  z-index: 1;
  // display: none;
  .top,
  .bottom {
    background-color: $barBlue;
  }
  .top {
    display: flex;
    align-items: center;
    height: 60px;
    width: 100%;
    color: #fff;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    // background: rgb(255, 255, 255);
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.43) 4%,
      rgba(255, 255, 255, 0) 56%,
      rgba(255, 255, 255, 0.2) 100%
    );

    h1 {
      font-size: 20px;
      padding-left: 20px;
    }
  }
  .bottom {
    height: 40px;
    width: 100%;
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 22%,
      rgba(255, 255, 255, 0) 72%,
      rgba(255, 255, 255, 0.2) 100%
    );
  }
  .menu {
    height: 355px;
    background-color: #186ad5;
    display: flex;
    border-right: 2px solid #186ad5;

    .programs,
    .system {
      padding-top: 8px;
      flex-basis: 50%;
      height: 100%;
      border: 1px solid #b1c2e2;
      border-top: 0;
      border-bottom: 0;

      ul {
        list-style: none;
        margin: 0;
        padding-left: 8px;

        $menuItemHeight: 35px;
        li {
          margin-bottom: 8px;
          height: $menuItemHeight;
          padding-left: 38px;
          // padding-top: 8px;
          display: flex;
          align-items: center;
          position: relative;
        }
        img {
          position: absolute;
          left: 0;
          top: 0;
          height: $menuItemHeight;
          width: $menuItemHeight;
          vertical-align: middle;
          margin-right: 6px;
        }
        a {
          color: #000;
          font-family: serif;
          text-decoration: none;
          font-size: 13px;
        }
      }
    }
    .programs {
      background-color: #fff;
    }
    .system {
      background-color: #d2e5fb;
    }
  }
}
