.butterfly-data-mapping {
  .dm-checkbox {
    box-sizing: border-box;
    padding: 0;
    color: #000000d9;
    font-size: 14px;
    font-variant: tabular-nums;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    line-height: 1;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
    .dm-checkbox-inner {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: 16px;
      height: 16px;
      direction: ltr;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      border-collapse: separate;
      transition: all .3s;
      &:after {
        position: absolute;
        top: 50%;
        left: 21.5%;
        display: table;
        width: 5.71428571px;
        height: 9.14285714px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg) scale(0) translate(-50%,-50%);
        opacity: 0;
        transition: all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s;
        content: " ";
      }
    }
    &.dm-checkbox-checked {
      .dm-checkbox-inner {
        background-color: #3b93f4;
        border-color: #3b93f4;
        &:after {
          position: absolute;
          display: table;
          border: 2px solid #fff;
          border-top: 0;
          border-left: 0;
          transform: rotate(45deg) scale(1) translate(-50%,-50%);
          opacity: 1;
          transition: all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
          content: " ";
        }
      }
      &:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #3b93f4;
        border-radius: 2px;
        visibility: hidden;
        -webkit-animation: antCheckboxEffect .36s ease-in-out;
        animation: antCheckboxEffect .36s ease-in-out;
        -webkit-animation-fill-mode: backwards;
        animation-fill-mode: backwards;
        content: "";
      }
    }
  }
}