/* Customize the label (the container-cb) */
.container-cb { text-align:left; display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

    /* Hide the browser's default checkbox */
    .container-cb input { position: absolute; opacity: 0; cursor: pointer; }

/* Create a custom checkbox */
.checkmark { position: absolute; top: 10px; left: 0; height: 25px; width: 25px; background-color: #eee; }

/* On mouse-over, add a grey background color */
.container-cb:hover input ~ .checkmark { background-color: #ccc; }

/* When the checkbox is checked, add a blue background */
.container-cb input:checked ~ .checkmark { background-color: #2196F3 !important; }

.container-cb.cb-error .checkmark { background:#ac3e41; }
.container-cb.cb-error:hover input ~ .checkmark { background-color: #ac3e41; }

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after { content: ""; position: absolute; display: none; }

/* Show the checkmark when checked */
.container-cb input:checked ~ .checkmark:after { display: block; }

/* Style the checkmark/indicator */
.container-cb .checkmark:after { left: 10px; top: 7px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }