.attendClass {
  margin: 32px 0;
}

.attendClassSearch {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0 24px;
  margin-bottom: 28px;
  padding: 0 40px;

  :global {

    .n-base-selection,
    .n-input {
      // height: 52px;
      // min-height: 52px;
      // --n-height: 52px !important;
      // font-size: 18px;
      border-radius: 8px !important;
    }
  }

  .iconSearch {
    width: 16px;
    height: 17px;
  }
}

.classList {
  max-height: 60vh;
  min-height: 60vh;
  padding: 0 40px;

  .listSection {
    min-height: 60vh;
  }

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

.thingItem {
  background: #F5F6FA;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 24px;
  cursor: pointer;
  transition: background-color 0.2s linear;

  &:hover {
    background: #ecedf4;
    transition: background-color 0.2s linear;
  }

  :global {
    .n-thing-header {
      margin-bottom: 0 !important;
    }

    .n-thing-header__title {
      width: 100%;
      display: flex;
      align-items: center;
      // justify-content: space-between;
    }

    .n-thing-main__content {
      margin-top: 8Px !important;
    }
  }



  .title {
    display: flex;
    align-items: center;
    font-size: max(20px, 14Px) !important;
    font-weight: 600 !important;
    color: #131415 !important;
    line-height: 28px;

    &::before {
      content: ' ';
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #198CFE;
      margin-right: 12px;
    }
  }

  .subjects {
    margin-left: 14px;
    font-size: 16px !important;
    line-height: 22px;
    color: #0A81F7;
    background: #E8F4FF;
    border-radius: 5px;
    border: 1px solid #198CFE;
    padding: 0 8px;
    font-weight: bold;

    &.noSubjects {
      color: #F4130D !important;
      background: transparent;
      border: 1px solid #F4130D;
    }
  }

  .content {
    margin-top: 2px !important;
    font-size: max(16px, 12Px);
    color: #777777;
  }
}