.custom-checkbox {
    cursor: pointer;
}

    .custom-checkbox .custom-control-input {
        opacity: 0;
        position: absolute;
        z-index: -1;
    }

    .custom-checkbox .custom-control-indicator {
        display: inline-block;
        width: 32px;
        height: 32px;
        border: 1px solid #cccccc;
        border-radius: 4px;
    }

    .custom-checkbox .custom-control-description {
        display: inline-block;
        height: 32px;
        vertical-align: middle;
        margin-bottom: 0.8em;
        margin-left: 0.5em;
        font-weight: 100;
    }

    .custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
        background-color: #3366cc;
        background-image: url(../images/check.svg);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        border-color: transparent;
    }

    .custom-checkbox .custom-control-input[readonly] ~ .custom-control-indicator {
        background-color: #eeeeee;
        cursor: not-allowed;
    }

    .custom-checkbox .custom-control-input[readonly] ~ .custom-control-description {
        color: #777777;
        cursor: not-allowed;
    }