{% extends "global/Page.html" %}
{{ block title }}
<p class="d-none">Informazioni generali</p>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
{{ endblock }}

{% block content %}

<style>
    .otree-body { max-width: 900px; }
input[type="radio"].form-check-input {
    vertical-align: middle;
    margin-right: 0.5em;
    border: 2px solid #2563eb;
    transform: scale(1.15) translateY(-1px);
    transform-origin: left center;
}
input[type="radio"].form-check-input:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

/* ========== CHECKBOXES (per la pagina Privacy, se vuoi) ========== */
input[type="checkbox"].form-check-input {
    vertical-align: middle;
    margin-right: 0.5em;
    border: 2px solid #2563eb;
    cursor: pointer;
    transform: scale(1.15) translateY(-1px);
    transform-origin: left center;
}
input[type="checkbox"].form-check-input:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

/* Focus del menu a tendina (Demografia) in blu */
select.form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.35);
}

/* ========== LABEL ========== */
.form-check { margin-bottom: 0.75rem; }
.form-check-input:checked + label,
.form-check-input:checked ~ label { font-weight: 500; }
.form-check-label { cursor: pointer; }

/* Hover leggero */
.form-check-input:hover {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}
</style>

<div class="container">
    <h2>Informazioni generali</h2>



    <div class="card mb-4 bg-light">
        <div class="card-body">{{ formfield 'stato_lavorativo' }}</div>
    </div>

</div>

{{ include C.next_progress }}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

{% endblock %}