Checkboxes 12

/* Customize the label (the container13) */
.container13 {
display: block;
position: relative;
cursor: pointer;
font-size: 22px;
user-select: none;
}

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

/* Create a custom checkbox */
.checkmark13 {
position: absolute;
top: -12px;
left: -12px;
height: 25px;
width: 25px;
background-color: #ccc;
border: solid gray 1px;
border-radius: 4px;
}

/* When the checkbox is checked, add a blue background */
.container13 input:checked ~ .checkmark13 {
background-color: #666666;
}

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

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

/* Style the checkmark13/indicator */
.container13 .checkmark13:after {
left: 0.4rem;
top: 0.2rem;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}