// 进度条
.word-progress-question-container {
  border-radius: 3px;
  position: relative;

  .bar {
    height: 100%;
    border-radius: 3px;
    overflow: hidden;
    height: 6px;
  }
  .show-text {
    position: absolute;
    top:-35px;
    z-index: 2;

    .cur-text {
      font-size: 24px;
      font-weight: 600;
      color: #5176ff;
    }
    .total-text {
      font-size: 18px;
      font-weight: 600;
      color: #6b7884;
    }
  }

  &.word-progress-1 {
    margin-bottom: 40px;
    background-color: #f3f4f8;
    .show-text {
      right: 0;
    }
  }
  &.word-progress-2 {
    margin-bottom: 20px;
    background-color: #fff;
    .show-text {
      left: 0;
    }
  }
}

// 题目
.ewt-homework-words-question {
  &.left {
    text-align: left;
  }
  &.center {
    text-align: center;
  }
  &.right {
    text-align: right;
  }
  .question-tips {
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 20px;
    color: #6B7884;
    span {
      font-size: 14px;
      font-weight: bold;
      color: #6B7884;
    }
  }
  .question-title {
    font-size: 18px;
    padding-top: 10px;

    .text {
      margin-bottom: 8px;
    }
    .phonetic-text {
      color: #2a333a;
      font-size: 24px;
      margin-bottom: 8px;
      font-weight: 600;
      line-height: 33px;
    }
    .phonetic-audio {
      font-size: 14px;
      color: #6b7884;
      display: inline-block;
      vertical-align: middle;
      margin-right: 8px;
    }
    .audio {
      margin-left: 8px;
      vertical-align: 1px;
    }
    .phonetic-text {
      color: #2a333a;
      font-size: 24px;
      font-weight: 600;
      margin-right: 8px;
    }
  }
  .question-answer {
    padding: 20px 0;
    &.question-answer-1{
      width: 70%;
      margin: 0 auto;
    }
    .input-group {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .input-text {
      line-height: 28px;
      width: 100%;
      padding: 2px 5px;
      border: 0 none;
      border-bottom: 2px solid #c8cbd4;
      outline: none;
      margin: 0 10px;
      font-size: 20px;
      color: #2a333a;
      text-align: center;
    }
    .tips {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .example {
    color: #6b7884;
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 20px;
    .eg-text {
      margin-bottom: 8px;
    }
  }
  .answer-option-group {
    .item-option {
      font-size: 14px;
      padding: 12px;
      text-align: center;
      color: #2a333a;
      line-height: 20px;
      background: #f3f4f8;
      border-radius: 4px;
      margin-top: 16px;
      border: 1px solid #f3f4f8;
      cursor: pointer;

      &.actived {
        color: #5176ff;
        border-color: #5176ff;
      }
    }
  }
  // .submit-wrap-1 .submit-button{
  //   width: 400px;
  // }
  .submit-button {
    width: 100%;
    height: 48px;
    background: #5176ff;
    border-radius: 24px;
    border: 0;
    color: #fff;
    font-size: 16px;
    cursor: pointer;

    &.disabled {
      background: #b6c5ff;
      cursor: not-allowed;
    }
  }

  .empty-data {
    text-align: center;
    margin-top: 20px;
  }
}

// 答题结果
.ewt-homework-words-answer-result {
  text-align: left;
  background-color: #fff;

  .words-answer-status {
    text-align: center;
    color: #2a333a;
    line-height: 28px;
    font-size: 20px;
    padding-top: 10px;
    font-weight: 600;
    margin-bottom: 20px;
    .img-cover {
      width: 98px;
      margin-bottom: 10px;
    }
  }
  .words-section-container {
    color: #2a333a;
    font-size: 15px;
    margin-bottom: 16px;

    &.borderd {
      border-bottom: 1px solid #eeeff3;
      padding-bottom: 16px;
    }
    em {
      color:#5176ff;
      font-style:normal;
    }
    .sub-title {
      font-size: 16px;
      font-weight: 600;
      color: #2a333a;
      line-height: 22px;
      padding-bottom: 12px;
      margin: 0;
    }

    .words-list {
      margin-bottom: 12px;
    }
    .word-text {
      color: #5176ff;
      font-size: 24px;
      margin-bottom: 8px;
      margin-right: 15px;
    }
    .phonetic-item-text {
      font-size: 16px;
      margin-right: 10px;
    }
    .audio {
      vertical-align: middle;
    }
    .word-cn-panel {
      .text-cn {
        color: #2a333a;
      }
    }
    .phonetic-item-text,
    .text-cn {
      color: #6b7884;
    }
    .phonetic-panel {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .phonetic-item {
      padding-top: 8px;
      margin-right: 8px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    .word-en,
    // .phonetic-item,
    .text-cn {
      margin-bottom: 8px;
      line-height: 25px;
    }
    .text-cn:last-child {
      margin-bottom: 0;
    }
    .origin-text {
      color: #a7acb9;
      margin-bottom: 15px;
    }
    .help-pic-1 {
      max-width: 50%;
    }
    .help-pic-2 {
      max-width: 100%;
    }
    .course-group {
      display: flex;
      flex-wrap: wrap;

      &.course-group-2 {
        .course-pic:nth-child(2n){
          margin-right: 0;
        }
      }
    }
    .course-pic {
      width: 171px;
      height: 96px;
      margin: 0 15px 15px 0;
    }
  }
  .answer-footer {
    .next-button {
      width: 100%;
      height: 40px;
      background: #5176ff;
      border-radius: 20px;
      border: 0;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
    }
    &.answer-footer-wap {
      background-color: #fff;
      padding: 12px;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }
}

// 阶段报告
.ewt-homework-words-report {
  .avatar {
    // display: flex;
    // justify-content: center;
    margin: 0 auto;
    width: 160px;
    height: 160px;
    // border: 1px solid #f3f4f8;
    border-radius: 50%;
    font-size: 26px;
    font-weight: 500;
    text-align: left;
    color: rgba(42, 51, 58, 0.3);
    line-height: 160px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .avatar-pic {
    width: 160px;
    height: 160px;
  }
  .period-title {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: #2a333a;
    line-height: 33px;
    margin-top: 20px;
  }

  .period-tips {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: #2a333a;
    line-height: 22px;
    margin-top: 4px;

    span {
      color: rgba(255, 127, 33, 1)
    }
  }
  .period-result-nums {
    // width: 600px;
    // min-height: 164px;
    padding: 30px 0;
    background: #f7fcff;
    border-radius: 4px;
    margin: 30px auto;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .result-item {
      width: 33%;
      position: relative;

      &:nth-child(2)::before,
      &:nth-child(2)::after {
        position: absolute;
        top: 50%;
        content: " ";
        height: 30px;
        width: 0;
        margin-top: -15px;
      }
      &:nth-child(2)::before {
        border-left: 1px solid #EBF0F3;
        left: 0;
      }
      &:nth-child(2)::after {
        border-right: 1px solid #EBF0F3;
        right: 0;
      }

      p:nth-child(1) {
        font-size: 20px;
        font-weight: 500;
        text-align: center;
        color: #2a333a;
        line-height: 28px;

        span {
          font-size: 50px;
          font-weight: 500;
          text-align: center;
          color: #2a333a;
          line-height: 70px;
        }
      }

      p.active {
        color: rgba(81, 118, 255, 1);
        span {
          color: rgba(81, 118, 255, 1);
        }
      }

      p:nth-child(2) {
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        color: #2a333a;
        line-height: 22px;
        margin-top: 12px;
      }
    }
  }


  &.words-report-2 {
    .avatar {
      background-color: #fff;
      width: 110px;
      height: 110px;
      // border: 1px solid #f3f4f8;
      border-radius: 50%;
      font-size: 18px;
      line-height: 110px;
      text-align: center;
      margin-top: -70px;
      z-index: 5;
    }
    .avatar-pic {
      width: 110px;
      height: 110px;
    }
    .period-title {
      font-size: 20px;
      line-height: 28px;
    }
    .period-tips {
      font-size: 14px;
      margin-top: 7px;

      span {
        color: rgba(255, 127, 33, 1)
      }
    }
    .period-result-nums {
      p:nth-child(1) {
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;

        span {
          font-size: 28px;
          line-height: 40px;
        }
      }
    }
  }
}

// 音频
.ewt-homework-words-audio {
  display: inline-block;
  .audio-origin {
    position: absolute;
    left: 0;
    top: 0;
    width: 0px;
    height: 0px;
    z-index: -10;
  }
  .audio-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  // img {
  //   vertical-align: -3px;
  // }
}


// 倒计时
.ewt-homework-words-countdown-container {
  .countdown {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: #5176FF;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 4px 0 #B6C5FF;
    margin: 0 auto 28px;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    border-radius: 50%;
  }
  .time {
    font-weight: 600;
    font-size: 21px;
  }
}