.ibs-result-item {
  @media (max-width: @screen-xs-min) {
    margin: 0 !important;
    width: 100% !important;
  }
}
.item-bank-result {
  padding: 40px 0;
  background-color: #fff;
  text-align: center;
  .item-bank-result-content {
    max-width: 661px;
    margin: auto;
  }
  img {
    width: 132.5px;
    margin-right: 64.5px;
  }
  @media (max-width: @screen-xs-min) {
    padding: 16px 0;
    .item-bank-result-content {
      max-width: 100%;
      margin: auto;
    }
    img {
      width: 88px;
      margin-right: 16px;
    }
  }
  .ibs-color-warning {
    color: #ff8836;
  }

  .item-bank-result-info {
    text-align: left;
    .item-bank-result-info__text {
      margin-top: 4px;
      margin-bottom: 16px;
      line-height: 32px;
      font-size: 24px;
      font-weight: 500;
      @media (max-width: @screen-xs-max) {
        margin-bottom: 8px;
        font-size: 16px;
        line-height: 24px;
      }
    }
    line-height: 24px;
  }
  .item-bank-result__comment {
    font-size: 16px;
    line-height: 24px;
    @media (max-width: @screen-xs-max) {
      font-size: 12px;
      line-height: 16px;
    }
  }
  .item-bank-result-homework {
    width: 372px;
    margin: auto;
    @media (max-width: @screen-xs-max) {
      width: 100%;
      .item-bank-result-info {
        text-align: center !important;
      }
    }
  }
}

.review-result {
  position: relative;
  min-height: 160px;
  text-align: left;
  @media (max-width: 768px) {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &__icon {
    @media (max-width: 768px) {
      display: flex;
      position: static;
      margin-bottom: 20px;
    }
    position: absolute;
    top: 40px;
    left: 180px;
    width: 133px;
    height: 80px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  &__content {
    @media (max-width: 768px) {
      margin-left: 0;
      width: 80%;
    }
    margin-left: 377px;
    .result-status {
      font-size: 24px;
      line-height: 32px;
      font-weight: 500;

      &--unpassed {
        color: #ff8836;
      }

      &--passed {
        color: #46c37b;
      }
    }

    .teacher-comment {
      @media (max-width: 768px) {
        margin-left: 40px;
        margin-right: 40px;
      }
      position: relative;
      width: 80%;
      margin-top: 16px;
      font-size: 16px;
      color: #999;
      line-height: 24px;

      &__label {
        position: absolute;
        top: 8px;
        left: 0;
      }

      &__content {
        position: relative;
        padding: 8px 12px 4px;
        margin-left: 84px;
        min-height: 68px;
        border-radius: 8px;
        background: #ecf9f1;

        &--pb28 {
          padding-bottom: 28px;
        }

        .modify-comment-btn {
          position: absolute;
          right: 12px;
          bottom: 8px;
          font-size: 14px;
          color: #46c37b;
          line-height: 20px;
          cursor: pointer;
        }
      }

      &__input {
        margin-left: 84px;

        .comment-textarea {
          padding: 8px;
          width: 100%;
          min-height: 150px;
          line-height: 1.5;
          background: #fff;
          border: 1px solid #dedede;
          border-radius: 8px;
          outline: none;
          color: #333;
        }

        .comment-select {
          padding-left: 8px;
          margin-top: 8px;
          width: 100%;
          height: 38px;
          border: 1px solid #dedede;
          border-radius: 8px;
          outline: none;
        }

        .comment-btn {
          margin-top: 24px;
          text-align: right;

          button {
            padding: 0 10px;
            margin-left: 20px;
          }
        }
      }
    }
  }
}