$font-family-H:'Helvetica Neue',Tahoma,'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STHeitiSC, sans-serif;
$font-family-A:"Helvetica Neue",Tahoma,"PingFang SC","Hiragino Sans GB",SimSun,STHeitiSC,sans-serif;


.checkboxlist {
    .base-input-error-label{
      
        .checkboxlist-base-input-show{
            color: #cc2929;
            font-size: 12px;
            line-height: 20px;
            font-family:font-family-A;
            // margin-top: 5px;
        }
    }
    .cklist-checkbox {
        margin-right: 20px;
    }
    .table-item-readOnly {
        .table-item-check {
            cursor: default !important;
        }
    }
    .field-left{
        float: left;
        max-width: 120px;
        height: 40px;
        line-height: 40px;
        margin-right: 30px;
        font-family: $font-family-A;
        font-size: 14px;
        color: #667580;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .required-star{
            display: inline-block;
            width: 8px;
            padding-top: 2px;
            height: 8px;
        }
    }
    .field-right{
        display: table-cell;
        width: 9999px;
        .field-cell {
            width: 100%;
        }
    }
    .no-checkItems{
        height: 40px;
    }
    .checkbox-horizontal{
        display: inline-block;
        height: 25px;
    }
    .cklist-optional {
        .table-item-check {
            color: #36434d;
            margin-top: 3px;
            height: 14px;
            width: 14px;
            // background-size: 100%;  这里对ie做兼容 修复图标显示不全的bug
            position: relative;
            float: left;
        }
        .check-title {
            display: inherit;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            font-family: $font-family-A;
            color: #36434d;
            float: left;
            line-height: 20px;
            padding-left: 5px;
            font-size: 14px;
        }
        .table-item-check-go:before {
              opacity: 0;
        }
        .table-item-check-go {
              opacity: 1;
              background-size: 100%;
              animation: dftToCheck 0.2s cubic-bezier(0.66, 1.65, 0.23, 0.87) forwards;
        }
        .common-bianji-icon {
            font-size: 12px;
            position: relative;
            bottom: -4px;
            left: 2px;
            float: left;
        }
        
        .common-bianji-icon:hover{
            color:#1687d9;
            cursor: pointer;
        }
        
        .table-item-check-back {
              opacity: 1;
              animation: checkToDft 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        }
        .table-item-check-back:after {
            opacity: 0;
        }
        .table-item-check:before {
            position: absolute;
            display: block;
            content: "";
            width: 14px;
            height: 14px;
        }
        .table-item-check:after {
            position: absolute;
            display: block;
            content: "";
            width: 14px;
            height: 14px;
        }
    }
    .cklist-notOptional {
        .table-item-check {
            font-family: $font-family-A; 
            font-size: 14px;
            line-height: 1.7;
            color: #36434d;
            margin-top: 4px;
            height: 14px;
            width: 14px;
            position: relative;
            float: left;
        }
        .check-title {
            font-family: $font-family-A;  
            color: #36434d;    
            float: left;
            display: inherit;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-left: 5px;
            padding-top: 14px;
            line-height: 20px;
            font-size: 12px;
        }

        .table-item-check:before,
        .table-item-check:after {
            position: absolute;
            display: block;
            content: "";
            width: 14px;
            height: 14px;
        }
    }
    @keyframes dftToCheck {
        0% {
          transform: rotate(45deg);
        }
        100% {
          transform: rotate(0deg);
        }
    }
    @keyframes checkToDft {
        0% {
          transform: rotate(-45deg);
        }
        100% {
          transform: rotate(0deg);
        }
    }
}