.classmates-commentPages {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 11;
  top: 0px;
  left: 0px;
}
.classmates-commentPages .commentPages-title {
  background-color: #ffffff;
  position: fixed;
  color: #24b880;
  font-size: 20px;
  padding: 5px 15px;
  width: 100%;
  height: 38px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 16;
}
.classmates-commentPages .logoutIcon {
  position: relative;
  top: 1px;
  cursor: pointer;
  margin-right: 5px;
}
.classmates-commentPages .mates-content {
  position: relative;
  margin-right: 10%;
}
.classmates-commentPages .mates-content .mates-list {
  background-color: #ffffff;
  position: relative;
  top: 30px;
  height: 100vh;
  overflow: auto;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 4px 1px 10px rgba(0, 0, 0, 0.1);
  z-index: 11;
  padding: 0% !important;
}
.classmates-commentPages .mates-content .mates-list-item:hover {
  background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
  color: #03966a;
  cursor: pointer;
}
.classmates-commentPages .mates-content .mate-selected {
  background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
  color: #03966a;
  cursor: pointer;
}
.classmates-commentPages .mates-content .mates-homework {
  padding: 20px 80px 100px 80px !important;
  margin-top: 38px;
  height: 100%;
  overflow: auto;
  left: -16px;
}
.classmates-commentPages .mates-content .mates-homework .cannotPreview {
  font-weight: bolder;
  border-radius: 4px;
  background-color: #d6d6d6;
  height: 500px;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.classmates-commentPages .mates-content .mates-homework .cannotPreview .cannotPreviewContent {
  text-align: center;
}
.classmates-commentPages .mates-content .mates-homework .cannotPreview .cannotPreviewContent a {
  color: white;
  text-decoration: none;
}
.classmates-commentPages .mates-content .mates-homework .cannotPreview .cannotPreviewContent .uploadBtn {
  margin-top: 10px;
}
.classmates-commentPages .mates-content .mates-homework .mates-homework-content {
  background-color: #ffffff;
  position: relative;
  height: 500px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  padding: 30px;
  overflow: scroll;
}
.classmates-commentPages .mates-content .mates-homework .comment-ungiven {
  background-color: #ffffff;
  color: #444444;
  border-radius: 7px;
  outline-color: #24b880;
  width: 100%;
  height: 10%;
  padding: 10px;
  resize: none;
}
.classmates-commentPages .mates-content .mates-homework .comment-given {
  background-color: #dadada;
  border: none;
  color: #444444;
  border-radius: 7px;
  outline-color: #24b880;
  width: 100%;
  height: 10%;
  padding: 10px;
  resize: none;
}
.classmates-commentPages .mates-content .mates-homework .comment-given:focus {
  background-color: #ffffff;
}
.classmates-commentPages .mates-content .uploadTime {
  margin-top: 40px;
  text-align: right;
}
.classmates-commentPages .mates-content .comment-btn {
  background-color: #24b880;
  color: white;
  border-radius: 2px;
  border: none;
  width: 70px;
  padding: 2px 20px;
  outline: none;
  cursor: pointer;
  float: right;
}
.classmates-commentPages .mates-content .homework-rate {
  position: relative;
  top: -20px;
  font-size: 30px;
}
.classmates-commentPages .mates-content .homework-rate .homework-rate-num {
  position: relative;
  top: -6px;
  font-weight: bolder;
  font-size: 36px;
}
.classmates-commentPages .mates-content .changePage-btn {
  float: right;
}
.classmates-commentPages .mates-content .changePage-btn .page-btn {
  background-color: #d3d3d3;
  color: #6d7278;
  border-radius: 4px;
  border: none;
  font-weight: bolder;
  padding: 4px 20px;
  outline: none;
  cursor: pointer;
}
.classmates-commentPages .mates-content .changePage-btn .page-btn:last-child {
  margin-left: 10px;
}
.classmates-commentPages .mates-content .changePage-btn .page-btn:active {
  background-color: #bababa;
}
.classmates-commentPages .mates-content .changePage-btn .page-num {
  margin: 0px 10px;
  font-weight: bolder;
  font-size: 18px;
}
.classmates-commentPages .mates-content .changePage-btn .hint-page-next {
  font-weight: bolder;
  background-color: #64ae16;
  color: white;
}
.classmates-commentPages .mates-content .changePage-btn .hint-submit {
  font-weight: bolder;
  background-color: #00ad6c;
  color: white;
}
.classmates-commentPages .uploadPPTarea {
  border: none;
  margin-bottom: 10px;
  height: 500px;
  border-radius: 4px;
}
.classmates-commentPages .upload-item:hover {
  background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
  color: #03966a;
}
