.checkbox {
    padding-top: 0.5rem;
    margin-top: 0;
    margin-bottom: 0;
    cursor:pointer;
}

    .checkbox label:after {
        content: '';
        display: table;
        clear: both;
    }

    .checkbox .cr {
        position: relative;
        display: block;
        border: 1px solid #a9a9a9;
        border-radius: .25em;
        width: 1.3em;
        height: 1.3em;
        float: left;
        margin-right: 20px;
        stroke: black;
        stroke-width: 10;
    }


    .checkbox.has-error .cr {
        border-color: #DC3545;
    }

ul .checkbox .cr {
    margin-right: 40px;
}

.checkbox .cr .cr-icon {
    position: absolute;
    top: 2px;
    left: 15%;
    cursor:pointer
}

.checkbox label input[type="checkbox"],
.checkbox input[type="checkbox"] {
    display: none;
}

    .checkbox label input[type="checkbox"] + .cr > .cr-icon,
    .checkbox input[type="checkbox"] + .cr > .cr-icon,
    .checkbox label input[type="checkbox"] + input[type="hidden"] + .cr > .cr-icon,
    .checkbox input[type="checkbox"] + input[type="hidden"] + .cr > .cr-icon,
    .checkbox input[type="checkbox"] ~ input[type="hidden"] ~ .cr > .cr-icon {
        transform: scale(3) rotateZ(-20deg);
        opacity: 0;
        transition: all .3s ease-in;
    }

    .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
    .checkbox input[type="checkbox"]:checked + .cr > .cr-icon,
    .checkbox label input[type="checkbox"]:indeterminate + .cr > .cr-icon,
    .checkbox input[type="checkbox"]:indeterminate + .cr > .cr-icon,
    .checkbox label input[type="checkbox"]:checked + input[type="hidden"] + .cr .cr-icon,
    .checkbox input[type="checkbox"]:checked + input[type="hidden"] + .cr .cr-icon,
    .checkbox label input[type="checkbox"]:indeterminate + input[type="hidden"] + .cr .cr-icon,
    .checkbox input[type="checkbox"]:indeterminate + input[type="hidden"] + .cr .cr-icon,
    .checkbox input[type="checkbox"]:checked ~ input[type="hidden"] ~ .cr > .cr-icon {
        transform: scale(1) rotateZ(0deg);
        opacity: 1;
    }

    .checkbox label input[type="checkbox"]:disabled + .cr,
    .checkbox input[type="checkbox"]:disabled + .cr,
    .checkbox label input[type="checkbox"]:disabled + input[type="hidden"] + .cr,
    .checkbox input[type="checkbox"]:disabled + input[type="hidden"] + .cr,
    .checkbox input[type="checkbox"]:disabled ~ input[type="hidden"] ~ .cr {
        opacity: .5;
        background: #e6e6e6;
        cursor: not-allowed;
    }