
.video-show-list-container {
  display: flex;
  min-width: 990px;
  background: #F5F7F8;
  //max-height: 122px;
  //min-height: 122px;
  align-items: flex-start;
  padding-top: 5px;
  position: relative;
  z-index: 1;
  .show-platform{
    width: 100%;
    //position: absolute;
    //height: 100%;
    //margin-left: 3.33px;
    //margin-right: 3.33px;
    .on-show{
      display: flex;
      width: 100%;
      flex-direction: row;
      margin-top: 8px;
      .camera {
        max-width: 14%;
        min-width: 14%;
        width: 14%;
        flex: 1;
        position: relative;
        padding: 0 2px;
        display: grid;
        > *{
          grid-area: 1 / 1 / 2 / 2;
        }
        .agora-video-view{
          max-width: 100%;
          min-width: 100%;
        }
      }
      /*
      .camera:nth-child(1) {
        order: 4;
      }
      .camera:nth-child(2) {
        order: 1;
      }
      .camera:nth-child(3) {
        order: 2;
      }
      .camera:nth-child(4) {
        order: 3;
      }
      .camera:nth-child(5) {
        order: 5;
      }
      .camera:nth-child(6) {
        order: 6;
      }
      .camera:nth-child(7) {
        order: 7;
      }
      */
    }
    .waiting-list {
      overflow: hidden;
      position: relative;
      //margin-right: 10px;
      display: flex;
      justify-content: center;
      background: #F5F7F8;
      .member-wrapper{
        width: 800px;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        //margin-top: 20px;
        .member{
          flex: 33% 0;
          height: 40px;
          //border-right: 1px solid #9e9e9e;
        }
        .member:nth-child(3n+3) {
          border-right: none;
        }
        .member:nth-child(3n-2) .agora-holder-view {
          margin-right: 25px;
        }
        .member:nth-child(3n+2) .agora-holder-view {
          margin-right: 12.5px;
          margin-left: 12.5px;
        }
        .member:nth-child(3n+3) .agora-holder-view {
          margin-left: 25px;
        }
      }
      .scroll-btn-group {
        position: absolute;
        left: 0;
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        .icon {
          &.icon-left::after {
            left: 10px;
            position: relative;
          }
          &.icon-right::after {
            right: 10px;
            position: relative;
          }
          &::after {
            border-radius: 15px;
            background-color: rgba($color: #000000, $alpha: 0.4);
          }
          &:hover::after {
            background-color: rgba($color: #000000, $alpha: 0.6);
          }
          display: flex;
          width: 24px;
          height: 24px;
          z-index: 3;
        }
      }
    }
    .toggle-full-student-list{
      cursor: pointer;
      position: absolute;
      //width: 120px;
      height: 30px;
      bottom: -30px;
      line-height: 30px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: row;
      text-align: center;
      align-items: center;
    }
  }
  .agora-video-view {
    //min-width: 187px;
    //min-height: 106px;
    //max-width: 187px;
    //max-height: 106px;
    border-radius: 2px;
    box-sizing: border-box;
    .student-placeholder,
    .teacher-placeholder {
      flex: 1;
      background-color: #DBE2E5;
      justify-content: center;
      box-sizing: border-box;
      //background-size: 66px;
      //min-width: 187px;
      //min-height: 82px;
      //max-width: 187px;
      //max-height: 82px;
      width: 100%;
      height: 70%;
      border-radius: 2px;
      box-sizing: border-box;
      position: absolute;
    }
    .student-placeholder::before,
    .teacher-placeholder::before {
      //background-size: 63px;
      background-size: calc( 40% );
    }
  }
}


