form .widget-text label, form .widget-textarea label, form .widget-select label, form .widget-upload label, form .widget-password label, form .widget-captcha label {
    font-size: 0.875rem;
    line-height: 1.5
}

form .text, form .textarea, form .captcha, form select {
    font-size: 1rem;
    line-height: 1.5;
    width: 100%;
    padding: 1rem;
    border: 0.0625rem solid #afb8c0;
    border-radius: 0;
    background: white;
    transition: border-color ease-in-out 0.2s;
    color: #98a4ae;
    font-weight: 400
}

    form .text:hover, form .textarea:hover, form .captcha:hover, form select:hover {
        border-color: #6c7c89;
        box-shadow: none;
        outline: none
    }

    form .text:focus-visible, form .textarea:focus-visible, form .captcha:focus-visible, form select:focus-visible {
        border-color: var(--color-rosa-dunkel);
        box-shadow: none;
        color: #142533;
        font-weight: 400
    }

    form .text.error:valid, form .textarea.error:valid, form .captcha.error:valid, form select.error:valid {
        border-color: #afb8c0;
        background: none;
        font-weight: 400;
        color: #48535b
    }

    form .text:disabled, form .textarea:disabled, form .captcha:disabled, form select:disabled {
        border-color: #afb8c0;
        background-color: #dde1e4
    }

    form .text.error, form .textarea.error, form .captcha.error, form select.error {
        padding-right: 3rem;
        border-color: #ff7a70;
        background: #fdeeed url("../../files/contaodemo/theme/src/img/o-warning-red.svg") no-repeat calc(100% - 1rem) center;
        color: #a30b00
    }

form .formbody, form .fields {
    display: grid;
    gap: 1.5rem;
    max-width: 48rem
}

    form .formbody > fieldset, form .fields > fieldset {
        margin-inline: 0;
        width: 100%
    }

form legend {
    margin-block-end: 0.5rem
}

form fieldset {
    display: grid;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    border: none
}

    form fieldset + fieldset {
        margin-top: 1rem
    }

form .widget-text, form .widget-textarea, form .widget-select, form .widget-upload, form .widget-password, form .widget-captcha {
    width: 100%;
    max-width: 30rem;
    display: grid;
    gap: 0.25rem
}

    form .widget-text label .mandatory, form .widget-textarea label .mandatory, form .widget-select label .mandatory, form .widget-upload label .mandatory, form .widget-password label .mandatory, form .widget-captcha label .mandatory {
        display: inline-block;
        margin-inline-start: 0.24rem
    }

form .widget-textarea {
    max-width: 40.5rem
}

form .text:focus-visible, form .textarea:focus-visible, form .captcha:focus-visible, form select:focus-visible {
    outline: none
}

form select {
    padding-inline-end: 3.5rem;
    background-image: url("../../files/contaodemo/theme/src/img/icons/chevron-down.svg");
    background-position: calc(100% - 1rem) center;
    background-repeat: no-repeat;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none
}

form .radio_container {
    display: flex;
    flex-direction: column;
    gap: 1rem 2rem
}

form input.checkbox:checked, form input.checkbox:not(:checked), form input.radio:checked, form input.radio:not(:checked) {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    z-index: -1;
    width: 0;
    height: 0;
    border: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    line-height: 0
}

    form input.checkbox:checked + label, form input.checkbox:not(:checked) + label, form input.radio:checked + label, form input.radio:not(:checked) + label {
        position: relative;
        display: flex;
        gap: 0.5rem
    }

        form input.checkbox:checked + label:before, form input.checkbox:not(:checked) + label:before, form input.radio:checked + label:before, form input.radio:not(:checked) + label:before {
            transition: border-color 0.2s ease-in-out;
            display: block;
            flex-shrink: 0;
            width: 1.5rem;
            height: 1.5rem;
            border: 0.0625rem solid #afb8c0;
            background: white;
            content: ""
        }

        form input.checkbox:checked + label:after, form input.checkbox:not(:checked) + label:after, form input.radio:checked + label:after, form input.radio:not(:checked) + label:after {
            position: absolute;
            top: 0.4375rem;
            left: calc(.5 * (1.5rem - 0.625rem));
            z-index: 5;
            display: block;
            background: transparent;
            transition: background-color 0.2s ease-in-out;
            width: 0.625rem;
            height: 0.625rem;
            content: ""
        }

        form input.checkbox:checked + label:hover, form input.checkbox:checked + label:focus, form input.checkbox:not(:checked) + label:hover, form input.checkbox:not(:checked) + label:focus, form input.radio:checked + label:hover, form input.radio:checked + label:focus, form input.radio:not(:checked) + label:hover, form input.radio:not(:checked) + label:focus {
            cursor: pointer
        }

            form input.checkbox:checked + label:hover:before, form input.checkbox:checked + label:focus:before, form input.checkbox:not(:checked) + label:hover:before, form input.checkbox:not(:checked) + label:focus:before, form input.radio:checked + label:hover:before, form input.radio:checked + label:focus:before, form input.radio:not(:checked) + label:hover:before, form input.radio:not(:checked) + label:focus:before {
                border-color: #6c7c89
            }

            form input.checkbox:checked + label:hover:after, form input.checkbox:checked + label:focus:after, form input.checkbox:not(:checked) + label:hover:after, form input.checkbox:not(:checked) + label:focus:after, form input.radio:checked + label:hover:after, form input.radio:checked + label:focus:after, form input.radio:not(:checked) + label:hover:after, form input.radio:not(:checked) + label:focus:after {
                background-color: #afb8c0
            }

        form input.checkbox:checked + label:before, form input.radio:checked + label:before {
            border-color: #f57a00
        }

        form input.checkbox:checked + label:after, form input.radio:checked + label:after {
            background-color: #25455f
        }

        form input.checkbox:checked + label:hover:before, form input.checkbox:checked + label:focus:before, form input.radio:checked + label:hover:before, form input.radio:checked + label:focus:before {
            border-color: #6c7c89
        }

        form input.checkbox:checked + label:hover:after, form input.checkbox:checked + label:focus:after, form input.radio:checked + label:hover:after, form input.radio:checked + label:focus:after {
            background-color: #25455f
        }

form input.radio + label:before, form input.radio + label:after {
    border-radius: 5rem
}

form .widget.error {
    position: relative;
    padding-block-end: 1.875rem
}

form p.error {
    font-size: 0.875rem;
    line-height: 1.5;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
    margin: 0;
    color: #a30b00
}

.cto-toolbar .formbody {
    max-width: none
}