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

.checkbox labell {
    padding-left: 0;
}

.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;
}


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

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

.checkbox .cr {
    margin-right: 20px;
}


.checkbox .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 15%;
}


.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;
    }