.custom-checkbox, .custom-radio {
    position: relative;
}

.custom-checkbox input, .custom-radio input {
    left: 2px;
    margin: 0;
    position: absolute;
    top: 3px;
    z-index: 0;
}

.custom-checkbox label, .custom-radio label {
    cursor: pointer;
    display: block;
    line-height: 1;
    min-height: 24px;
    padding: 0.5em 0 0.5em 30px;
    position: relative;
    z-index: 1;
}

.custom-checkbox label {
    background: url("/vendor/globalassets/images/checkbox.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    /*TODO: use default but also make it configurable*/
    @include font-size-REM(19);
}

.custom-radio label {
    background: url("/vendor/globalassets/images/radiobutton.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    /*TODO: use default but also make it configurable*/
}

.custom-checkbox label, .custom-radio label, .custom-checkbox label.disabled, .custom-radio label.disabled {
    background-position: -13px -17px;
}

.custom-checkbox label.disabled, .custom-radio label.disabled {
    color: #b1b1b1;
}

.custom-checkbox label.disabled.hover, .custom-radio label.disabled.hover {
    background-position: -13px -17px;
    cursor: not-allowed;
}

.custom-checkbox label:hover, .custom-checkbox label.focus, .custom-radio label.hover, .custom-radio label.focus {
    background-position: -13px -118px;
}

.custom-checkbox label.checked, .custom-radio label.checked {
    background-position: -13px -217px;
}

.custom-checkbox label.checkedHover, .custom-checkbox label.checkedFocus {
    background-position: -13px -617px;
}

.custom-checkbox label.focus, .custom-radio label.focus {
    outline: 1px dotted #CCCCCC;
}