﻿.form-checkbox {
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    user-select: none;
    white-space: nowrap;
    margin: 0;
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
}

    .form-checkbox .checkbox-input {
        display: inline-block;
        line-height: 1;
        vertical-align: middle;
    }

        .form-checkbox .checkbox-input input {
            display: none;
        }

        .form-checkbox .checkbox-input .checkbox-inner {
            display: inline-block;
            border: 1px solid #dcdfe6;
            border-radius: 2px;
            width: 14px;
            height: 14px;
            position: relative;
            background-color: #fff;
            transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46), background-color .25s cubic-bezier(.71,-.46,.29,1.46);
        }

            .form-checkbox .checkbox-input .checkbox-inner:after {
                box-sizing: content-box;
                content: "";
                border: 1px solid #fff;
                border-left: 0;
                border-top: 0;
                height: 7px;
                left: 4px;
                position: absolute;
                top: 1px;
                transform: rotate(45deg) scaleY(0);
                width: 3px;
                transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
                transform-origin: center;
            }

    .form-checkbox .checkbox-label {
        margin-left: 10px;
    }

    .form-checkbox.is-checked .checkbox-input .checkbox-inner {
        background-color: #409eff;
        border-color: #409eff;
    }

        .form-checkbox.is-checked .checkbox-input .checkbox-inner:after {
            transform: rotate(45deg) scaleY(1);
        }

    .form-checkbox.is-disabled {
        cursor: not-allowed;
    }

        .form-checkbox.is-disabled .checkbox-input .checkbox-inner {
            background-color: #edf2fc;
            border-color: #dcdfe6;
        }

        .form-checkbox.is-disabled .checkbox-label {
            color: #c0c4cc;
        }

        .form-checkbox.is-disabled.is-checked .checkbox-input .checkbox-inner:after {
            border-color: #c0c4cc;
        }

@media (min-width: 576px) {
    .form-inline .form-checkbox {
        display: inline-block;
    }
}