.custom-check {
    width: 100%;
    display: block;
    position: relative;
    padding: 20px 16px;
    cursor: pointer;
    user-select: none;
}

.custom-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 19px;
    right: 16px;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20data-prefix%3D%22fas%22%20data-icon%3D%22check-circle%22%20class%3D%22svg-inline--fa%20fa-check-circle%20fa-w-16%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23E2D9D7%22%20d%3D%22M504%20256c0%20136.967-111.033%20248-248%20248S8%20392.967%208%20256%20119.033%208%20256%208s248%20111.033%20248%20248zM227.314%20387.314l184-184c6.248-6.248%206.248-16.379%200-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628%200L216%20308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628%200l-22.627%2022.627c-6.248%206.248-6.248%2016.379%200%2022.627l104%20104c6.249%206.249%2016.379%206.249%2022.628.001z%22%2F%3E%3C%2Fsvg%3E');
}

.custom-check:hover input ~ .checkmark {
    background-color: #ccc;
}

.custom-check input:checked ~ .checkmark {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20data-prefix%3D%22fas%22%20data-icon%3D%22check-circle%22%20class%3D%22svg-inline--fa%20fa-check-circle%20fa-w-16%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23D0BC27%22%20d%3D%22M504%20256c0%20136.967-111.033%20248-248%20248S8%20392.967%208%20256%20119.033%208%20256%208s248%20111.033%20248%20248zM227.314%20387.314l184-184c6.248-6.248%206.248-16.379%200-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628%200L216%20308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628%200l-22.627%2022.627c-6.248%206.248-6.248%2016.379%200%2022.627l104%20104c6.249%206.249%2016.379%206.249%2022.628.001z%22%2F%3E%3C%2Fsvg%3E');
    border-radius: 50%;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-check input:checked ~ .checkmark:after {
    display: block;
}