/* The ContainerCheckBox */
.ContainerCheckBox { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Hide the browser's default checkbox */
.ContainerCheckBox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }

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

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

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

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

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

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