img[data-type="checkbox"],
input.peb-checkbox {
    content: url(../images/checkbox.png);
    background-image: url(../images/checkbox.png);
    cursor: pointer;
    height: 16px;
    width: 16px;
    display: inline-block;
}

img[data-type="checkbox"][data-state="checked"],
input.peb-checkbox:checked {
    content: url(../images/checkbox-checked.png)!important;
    background-image: url(../images/checkbox-checked.png)!important;
}

img[data-type="checkbox"].half-checked,
input.peb-checkbox.half-checked {
    content: url(../images/checkbox-half-checked.png);
    background-image: url(../images/checkbox-half-checked.png);
}

img[data-type="checkbox"].minus-checked,
input.peb-checkbox.minus-checked {
    content: url(../images/checkbox-minus-checked.png);
    background-image: url(../images/checkbox-minus-checked.png);
}

img[data-type="checkbox"][data-disabled="disabled"][data-state="checked"],
img[data-type="checkbox"].disabled[data-state="checked"],
input.peb-checkbox.disabled[data-state="checked"] {
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);

}

img[data-type="checkbox"][data-disabled="disabled"],
img[data-type="checkbox"].disabled,
input.peb-checkbox.disabled {
    cursor: not-allowed;
    content: url(../images/checkbox-disabled.png);
    background-image: url(../images/checkbox-disabled.png);
}

label img + span {
    cursor: pointer;
}