/* Bootstrap 5 replacement for the Bootstrap 4 "custom-control" look used by the site themes (red radio/checkbox) */
body .form-check .form-check-label {
    font-weight: 400;
    margin-bottom: 0;
}

body .form-check .form-check-input {
    background-color: #fff;
    border: 1px solid #ff6633;
}

body .form-check .form-check-input:focus,
body .was-validated .form-check-input:valid:focus,
body .was-validated .form-check-input:invalid:focus {
    border-color: #ff6633;
    box-shadow: 0 0 0 .2rem rgba(255, 102, 51, .25);
}

body .was-validated .form-check-input:valid,
body .form-check-input.is-valid {
    border-color: #ff6633;
}

body .was-validated .form-check-input:valid ~ .form-check-label,
body .form-check-input.is-valid ~ .form-check-label {
    color: #2e2727;
}

body .form-check .form-check-input:checked,
body .was-validated .form-check-input:valid:checked {
    background-color: #f00;
    border-color: #f00;
}

body .form-check .form-check-input:checked[type="radio"],
body .was-validated .form-check-input[type="radio"]:valid:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"),
        linear-gradient(225deg, #f00 0%, #ff2d17 50%, #f63 100%);
}

body .form-check .form-check-input:checked[type="checkbox"],
body .was-validated .form-check-input[type="checkbox"]:valid:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"),
        linear-gradient(225deg, #f00 0%, #ff2d17 50%, #f63 100%);
}

/* equal sized amount buttons (Bootstrap 5 sizes .btn-group > .btn by content) */
body .btn-group-toggle > .btn-toggle {
    flex: 1 1 0;
}

/* Salesforce collecte theme (css_tussenpagina.css): 4th button ("Anders") on its own row.
   The radios are now siblings of the labels, so count labels with nth-of-type instead of nth-child */
body.sf-site .btn-group-toggle > .btn-toggle:nth-of-type(4) {
    flex-basis: 100%;
    margin-top: .5rem;
}

body.sf-site .btn-group-toggle > .btn-toggle:nth-child(4):not(:nth-of-type(4)) {
    flex-basis: auto;
    margin-top: 0;
}

body .btn-group-toggle .btn-toggle.active {
    color: #fff;
}