// .btnGroup {
//   display: flex;
//   align-items: center;
//   justify-content: space-between;
//   margin-left: 22px !important;
//   margin-right: 22px !important;
//   // height: 40px;
//   padding-bottom: 25px;
//   border-bottom: 1px solid #F0F0F0;
//   margin-bottom: 10px;


//   .btnClassList {
//     :global {
//       .n-base-selection {
//         width: 200px !important;
//       }

//       .n-base-selection-label {
//         &::before {
//           margin-left: 12px;
//           content: ' ';
//           width: max(20px, 14Px);
//           height: max(20px, 14Px);
//           flex-shrink: 0;
//           background: url('../../../images/icon-class-name.png') no-repeat center;
//           background-size: contain;
//         }
//       }

//       .n-base-selection-input {
//         padding-left: 8px;
//       }

//       .n-base-selection.n-base-selection--disabled {
//         cursor: pointer;
//       }

//       .n-base-selection.n-base-selection--disabled .n-base-selection-label {
//         background-color: #fff;
//         cursor: pointer;
//       }

//       .n-base-selection.n-base-selection--disabled .n-base-selection-label .n-base-selection-input {
//         color: var(--n-text-color);
//         cursor: pointer;
//       }

//       .n-base-selection .n-base-selection-overlay {
//         left: 24px;
//       }
//     }
//   }


//   .btnSubjectList {
//     :global {
//       .n-base-selection-tag-wrapper .n-tag {
//         font-size: max(14px, 12Px);
//       }
//     }
//   }

//   :global {

//     .n-input,
//     .n-base-selection {
//       --n-height: max(40px, 36Px) !important;
//       width: 200px !important;
//       font-size: 15px;
//       border-radius: 8px !important;
//     }

//     .n-base-selection-input__content {
//       font-size: max(15px, 13Px);
//     }

//     .n-button {
//       border-radius: 8px;
//       height: 38px;
//       font-size: max(18px, 13Px);
//       font-weight: 600 !important;
//       padding: 0 27px;
//     }

//     .n-button--default-type {
//       background: #E8F4FF;
//       color: #0378EC;

//       &:not(.n-button--disabled):hover {
//         background: #E8F4FF;
//       }

//       .n-button__border {
//         border: 1px solid #198CFE;
//       }
//     }

//     .n-button--error-type {
//       background: #FDEBED !important;
//       color: #EC3A4E !important;

//       &:not(.n-button--disabled):hover,
//       &:not(.n-button--disabled):active {
//         background: #FDEBED;
//         color: #EC3A4E;
//       }

//       .n-button__border {
//         border: 1px solid #EC3A4E;
//       }
//     }
//   }

//   .btnClassStart {
//     background: #F44541 !important;
//     color: #fff !important;

//     :global {
//       .n-button__border {
//         border: 1px solid #F44541;
//       }
//     }
//   }

//   .btnItem {
//     display: flex;
//     align-items: center;
//     height: max(40px, 36Px) !important;

//     .btnTitle {
//       flex-shrink: 0;
//       font-size: max(18px, 13Px);
//       font-weight: 600;

//       span {
//         color: #EA4132;
//       }
//     }

//     // &:last-child {
//     //   margin-left: 12px;
//     // }
//   }
// }

.tipsContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 auto;
  margin-right: 30px;
  height: 40px;
  padding: 0 16px;
  background: #EDF7FF;
  border-radius: 9px;
  max-width: 600px;

  .tipsLeft {
    display: flex;
    align-items: center;
    font-size: max(16px, 12Px);
    color: rgba(0, 0, 0, 0.88);


    .tips {
      line-height: 38px;
    }
  }

  .iconTips {
    margin-right: 9px;
    width: 18px;
    height: 18px;
  }

  .btnNoTips {
    font-size: max(16px, 12Px);
    font-weight: 500;
    color: #1677FF;
    cursor: pointer;
  }
}

.btnGroupClass {
  padding-top: 10px;
}

.listContainer {
  margin: 20px 0 20px;
  // // 52 + 28 + 38 + 38 多余10像素空间
  // max-height: calc(var(--window-page-lesson-height) - 196px);

  // .listSection {
  //   min-height: calc(var(--window-page-lesson-height) - 196px);
  // }

  // &.listContainerDrag {
  //   max-height: calc(var(--window-page-lesson-height) - 148px);

  //   .listSection {
  //     min-height: calc(var(--window-page-lesson-height) - 148px);
  //   }
  // }
  max-height: calc(var(--window-page-lesson-height) - 40px);

  .listSection {
    min-height: calc(var(--window-page-lesson-height) - 40px);
  }

  .emptySection {
    display: flex;
    align-items: center;
  }
}


.listItems {
  position: relative;
  background: #F8F9FC;
  border-radius: 13px;
  margin: 0 20px;

  &+.listItems {
    margin-top: 13px;
  }
}

.knowledgePoint {
  .btnItem {
    padding: 13px 13px 0;
    display: flex;
    align-items: center;
    // height: max(40px, 36Px) !important;

    .btnTitle {
      flex-shrink: 0;
      font-size: max(18px, 13Px);
      font-weight: 600;

      span {
        color: #EA4132;
      }
    }

  }

  :global {

    .n-input,
    .n-base-selection {
      --n-height: max(40px, 36Px) !important;
      width: 250px !important;
      font-size: 15px;
      border-radius: 8px !important;
    }

  }
}

.operationGroup {
  position: absolute;
  right: 13px;
  top: 18px;

  i {
    display: inline-block;
    width: max(27px, 24Px);
    height: max(27px, 24Px);
    cursor: pointer;
  }

  .iconCUp {
    background: url('../../../images/icon-c-up.png') no-repeat center;
    background-size: contain;

    &:hover {
      background: url('../../../images/icon-c-up-active.png') no-repeat center;
      background-size: contain;
    }
  }

  .iconCDown {
    background: url('../../../images/icon-c-down.png') no-repeat center;
    background-size: contain;

    &:hover {
      background: url('../../../images/icon-c-down-active.png') no-repeat center;
      background-size: contain;
    }
  }

  .iconCRemove {
    background: url('../../../images/icon-c-delete.png') no-repeat center;
    background-size: contain;

    &:hover {
      background: url('../../../images/icon-c-delete-active.png') no-repeat center;
      background-size: contain;
    }
  }
}

.addKnowledgePoint {
  margin: 20px;
  width: calc(100% - 40px) !important;
  --n-border-radius: 7px !important;
  --n-height: max(40px, 36Px) !important;
  font-weight: 600 !important;
  --n-font-size: max(14px, 12Px) !important;
  color: #0378EC;
  background-color: #E8F4FF !important;

  .iconCAdd {
    width: max(13px, 11Px);
    height: max(14px, 12Px);
    margin-right: 8px;
    background: url('../../../images/icon-c-add.png') no-repeat center;
    background-size: contain;
  }
}


.list {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;

  padding: 17px 7px 17px;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 20px 0;


  .itemWrap {
    width: calc(100% / 4);
    padding-bottom: calc(100% / 4 * 0.73333);
    position: relative;

    .itemWrapBox {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      padding: 0 6px;

      &:hover {
        .itemOperation {
          transition: all .2s ease;
          opacity: 1;
          visibility: visible;
        }
      }
    }

    .itemOperation {
      position: absolute;
      top: 0;
      right: 10px;
      z-index: 98;
      cursor: move;
      opacity: 0;
      visibility: hidden;
      transition: all .2s ease;
    }

    .iconDelete {
      width: 27px;
      height: 27px;
      margin-top: 8px;
      margin-right: 8px;
      cursor: pointer;
    }
  }

  :global {
    .card-section-container {
      width: 100%;
      height: 100%;
    }
  }
}

.attendClassModal {
  width: 800px;
  border-radius: 16px;
  overflow: hidden;
}


.addCourseware {
  width: 532px;

  :global {
    .n-card-header {
      font-size: max(22px, 16Px);
    }
  }
}

.removeVisiable1 {
  width: 462px;

  :global {
    .n-card-header {
      font-size: max(22px, 16Px);
    }
  }

  .studentRemove {
    padding: 20px 40px 0;

    p {
      font-size: max(18px, 14Px);
      color: #777777;
      line-height: 30px;

      span {
        color: #EA4132;
      }
    }
  }

  .btnGroupModal {
    padding: 32px 0;

    :global {
      .n-button {
        height: 47px;
        min-width: 156px;
      }
    }
  }
}

.addMusicItem {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: #F9FAFD;
  display: inline-flex;
  transition: all .3s ease-in-out;
  border: 1Px solid rgba(209, 216, 235, 1) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #fff;

  img {
    width: 30Px;
    height: 30Px;
  }

  .addMusicName {
    padding-top: 16px;
    font-size: max(16px, 13Px);
    color: #131415;
  }

  // 鼠标经过时样式
  &:hover {
    transform: scale(1.01);
    transition: all .2s ease-in-out;
    border: 1px solid rgba(0, 122, 254, 1) !important;
  }
}

.addOtherSource {
  width: 726px;
}