/* The container */
.custom-checkmark-container {
    cursor: pointer;
}

/* Hide the browser's default checkbox */
.custom-checkmark-container input {
   display: none;
}

/* Create a custom checkbox */
.custom-checkmark {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 2px solid var(--branded-theme-colours-brand-primary);
    border-radius: 100%;
    position: relative;
    cursor: pointer;
}

/* On mouse-over, add a grey background color */
.custom-checkmark-container:hover input ~ .custom-checkmark {
    background-color: var(--quaternary-fill);
}

/* When the checkbox is checked, add a blue background */
.custom-checkmark-container input:checked ~ .custom-checkmark {
    background-color: var(--branded-theme-colours-brand-primary);
}

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

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

/* Style the checkmark/indicator */
.custom-checkmark-container .custom-checkmark:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("/flashit-icons?name=check&height=16&colour=FFFFFF");
    background-position: 50%;
    background-repeat: no-repeat;
}