.train-content-page {
  .train-content__warp {
    .ant-collapse-header {
      padding: 15px 16px !important;
      background-color: #f7f8f9;
    }
    .add-stage-btn {
      color: #2966ff;
      height: 52px;
      background: #f7f8f9;
      padding: 16px;
      cursor: pointer;
    }
  }
  .expired-info__wrap {
    margin-top: 24px;
    .module-title {
      height: 22px;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
    }
  }
  .finish-standard__warp {
    margin-top: 24px;
    .module-title {
      height: 22px;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      .icon {
        font-size: 12px;
        margin-left: 8px;
        color: #5e606a;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
      }
      .rotate-arrow {
        transform: (rotate(180deg));
      }
    }
    .detail-container {
      margin-top: 24px;
      display: flex;
      .title-text {
        color: #333333;
        line-height: 20px;
      }
      .detail-box {
        margin-top: -4px;
        .item-info {
          color: #333333;
          vertical-align: middle;
          margin-bottom: 20px;
          .ant-form-item {
            display: inline-block;
            margin-bottom: 0 !important;
            vertical-align: baseline;
          }
          img {
            width: 20px;
            height: 20px;
            margin-right: 8px;
          }
          .input-box {
            width: 60px;
            height: 32px;
            border-radius: 2px;
            border: 1px solid #e8e8e8;
            margin: 0 4px;
          }
        }
      }
    }
  }
}

.sort-stage-item {
  width: calc(100% - 24px);
  display: inline-flex;
  align-items: center;
  line-height: 20px;
  .item-info {
    color: #333333;
  }

  .item-operate {
    display: none;
    margin-left: 30px;
    .operate__item {
      cursor: pointer;
      .icon {
        color: #bfbfbf;
        font-size: 14px;
      }
      .text {
        color: #666666;
        margin-left: 8px;
      }
    }
  }

  &:hover {
    .item-operate {
      display: block;
    }
  }

  .ant-form {
    display: inline-block;
    .ant-form-item {
      margin-bottom: 0 !important;
    }
  }
}

.sort-content-item {
  display: flex;
  padding: 15px 16px !important;
  margin-left: 40px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dotted #e8e8e8;
  vertical-align: middle;
  * {
    vertical-align: middle;
    height: 20px;
  }
  &:hover {
    .content-operate {
      display: block;
    }
  }

  .content-info {
    .content-name {
      color: #333333;
      font-size: 14px;
      margin-left: 12px;
    }
    .extra-info {
      color: #999999;
      margin-left: 12px;
    }
    .tip {
      font-size: 14px;
      color: #ff4f4f;
      margin-right: 2px;
    }
  }
  .content-operate {
    display: none;
    margin-left: 26px;
    .operate__item {
      cursor: pointer;
      color: #666666;
      .icon {
        font-size: 14px;
        color: #bfbfbf;
      }
      .text {
        margin-left: 8px;
      }
    }
  }
}

.type-option-icon {
  width: 20px;
  height: 20px;
}
.type-option-text {
  margin-left: 12px;
}

.drag-btn {
  margin-left: auto;
  color: #cccccc;
  cursor: pointer;
}

.add-content-btn {
  color: #2966ff;
  height: 52px;
  border-radius: 2px;
  padding: 16px;
  cursor: pointer;
  display: inline-block;
  &.disabled {
    color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
  }
}

.ant-collapse-content {
  padding-left: 24px !important;
  > .ant-collapse-content-box {
    padding: 0 !important;
  }
}
