.prepareLessons {
  display: flex;
  // padding: 32px;
  // padding-bottom: 32px;
  height: calc(100vh - 118px);
  overflow: hidden;

  .directoryMain,
  .resourceMain {
    flex: 0 0 360px;
    background-color: #fff;
    border-radius: 20px;
  }



  .lessonMain {
    margin: 0 20px;
    flex: 1;
    // background-color: #fff;
    border-radius: 20px;
    transition: all .2s ease;
  }

  .resourceMain {

    transition: all .2s ease;

    &.resourceClose {
      transition: all .2s ease;
      width: 0;
      transform: translateX(100%);
      opacity: 0;
    }
  }

  &.showSideBar {
    .directoryMain {
      width: 360px;
      transition: all .2s ease;
      opacity: 0;
      position: absolute;
      right: 0;
      transform: translateX(100%);
    }

    .lessonMain {
      transition: all .2s ease;
      margin-left: 0;
    }
  }

  &.hideSideBar {
    position: relative;
    overflow: hidden;

    .resourceMain {
      width: 360px;
      transition: all .2s ease;
      opacity: 0;
      position: absolute;
      right: 0;
      transform: translateX(100%);
    }


    .lessonMain {
      transition: all .2s ease;
      margin-right: 0;
    }
  }
}