.htmlContent{
  line-height: 44px !important;
}
.inputKong {
  position: relative;
  min-width: 27px;
  height: 29px;
  line-height: 28px;
  display: inline-block;
  text-align: center;
  text-indent: 0px;
  color: rgba(255,255,255,0);
  vertical-align: middle;
  &.styleType0{
    border: 1px solid #CFD2D5;
    border-radius: 4px;
    padding: 0 10px;
    &.inputed {
      background: #7263FF;
      color: #fff;
      border: none;
    }
    &.correct{
      background: #67CF84;
    }
    &.mistake{
      background: #F77A6E;
    }
  }
  &.styleType1{
    padding: 0 10px;
    &::before{
      content: '';
      width: 100%;
      height: 4px;
      background: #F0EFFF;
      border-radius: 4px;
      position: absolute;
      left: 0;
      bottom: 8px;
      z-index: -1;
    }
    &.inputed {
      color: #7263FF;
    }
    &.correct{
      color: #67CF84;
      &::before{
        background: #E4F7E9;
      }
    }
    &.mistake{
      color: #F77A6E;
       &::before{
        background: rgba(247, 122, 110, 0.24);
      }
    }
    &.active {
      &::after {
        bottom: -4px;
      }
    }
  }
  &.styleType2{
    padding: 0 10px;
    &::before{
      content: '';
      width: 100%;
      height: 4px;
      background: #F0EFFF;
      border-radius: 4px;
      position: absolute;
      left: 0;
      bottom: 8px;
      z-index: -1;
    }
    &.inputed {
      color: #7263FF;
    }
    &.correct{
      color: #67CF84;
      &::before{
        background: #E4F7E9;
      }
    }
    &.mistake{
      color: #F77A6E;
       &::before{
        background: rgba(247, 122, 110, 0.24);
      }
    }
    &.active {
      &::after {
        bottom: -4px;
      }
    }
  }
  &.active {
    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -12px;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 5.5px 8px 5.5px;
      border-color: transparent transparent #7363ff transparent;
    }
  }
}