.classroom {
  .fixed {
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 10;
  }

  .chat-board {
    min-width: 280px;
  }
}
.hands_up{
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  display: flex;
  height: 30px;
  width: 30px;
  margin: 2px;
  border-radius: 4px;
  box-sizing: border-box;
  pointer-events: auto;
  margin-top: 10px;
  padding: 4px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  height: 42px;
  width: 42px;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(61,30,30,.1);
  border-radius: 6px;
  border: 1px solid #dbe2e5;
}
.hands_up:after{
  width: 100%;
  height: 100%;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  content: " ";
  background-image: url("data:image/png;base64,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");
}
.hands_up.disabled{
  background: #dbe2e5;
}

.video-marquee-container {
  display: flex;
  min-width: 990px;
  background: #F5F7F8;
  max-height: 122px;
  min-height: 122px;
  align-items: flex-start;
  padding-top: 5px;

  .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;
      border-radius: 2px;
      box-sizing: border-box;
      position: absolute;
    }
    .student-placeholder::before,
    .teacher-placeholder::before {
      background-size: 63px;
    }
  }
}

@media screen and (min-width: 1920px) and (min-height: 1080px) {
  .classroom.small-class {
    min-width: 1920px;
    min-height: 1080px;

    .chat-board {
      // min-height: 866px;
    }

    .whiteboard {
      min-height: 866px;
      min-width: 1640px;
    }

    .video-marquee-container {
      display: flex;
      min-width: 1920px;
      background: #F5F7F8;
      max-height: 165px;
      min-height: 165px;
      align-items: flex-start;
      padding-top: 2px;
      margin-bottom: -2px;

      .agora-video-view {
        min-width: 264px;
        min-height: 150px;
        border-radius: 2px;
        box-sizing: border-box;
        .teacher-placeholder,
        .student-placeholder {
          min-width: 264px;
          min-height: 126px;
          border-radius: 2px;
          box-sizing: border-box;
        }
      }
    }
  }
}

.small-class {
  .room-container {
    display: flex;
    flex-direction: column;
    flex: 1;

    .main {
      margin-left: 10px;
      margin-right: 3.33px;
      display: flex;
    }

    .video-marquee {
      scroll-behavior: smooth;
      display: flex;
      overflow: auto;
      -ms-overflow-style: none; // IE 10+
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }

      .agora-video-view {
        margin: 0px 3.33px;
        z-index: 2;
      }
    }
  }
}
