/* Hide the default checkbox */
.container9 input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.container9 {
display: block;
position: relative;
cursor: pointer;
font-size: 20px;
user-select: none;
}
/* Create a custom checkbox */
.checkmark9 {
position: relative;
top: 0;
left: 0;
height: 1.3em;
width: 1.3em;
background-color: #fff;
transition: all 0.5s;
}
/* When the checkbox is checked, add a blue background */
.container9 input:checked ~ .checkmark9 {
border: 2px solid #080;
}
/* Create the checkmark9/indicator (hidden when not checked) */
.checkmark9:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark9 when checked */
.container9 input:checked ~ .checkmark9:after {
display: block;
}
/* Style the checkmark9/indicator */
.container9 .checkmark9:after {
left: 0.55em;
top: -0.15em;
width: 0.35em;
height: 0.7em;
border: solid #080;
border-width: 0 0.25em 0.25em 0;
transform: rotate(45deg);
transition: all 0.5s;
}