.responsive-fieldset-wrapper {
    padding: 12px;
    box-sizing: border-box;
    text-align: left; /* forza l'allineamento a sinistra */
    justify-content: flex-start; /* se contiene flex container */
    align-items: flex-start; /* se contiene flex items verticali */
}

.responsive-fieldset-base {
    /*******colors*/
    /*border: 1px solid #ccc;*/
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    /*******colors*/
    padding: 12px;
    border-radius: 6px;
    position: relative;
}

.responsive-fieldset {
    /*******colors*/
    /*border: 1px solid #ccc;*/
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    /*******colors*/
    padding: 12px;
    border-radius: 6px;
    position: relative;
}
    .responsive-fieldset.neon-override1 {
        border: 1px solid #4a9eff;
        box-shadow: 0 0 5px rgba(74, 158, 255, 0.5), 0 0 10px rgba(74, 158, 255, 0.3), inset 0 0 8px rgba(74, 158, 255, 0.15);
    }
    .responsive-fieldset.neon-override {
        border: 1px solid #3d7ac8;
        box-shadow: 0 0 5px rgba(61, 122, 200, 0.5), 0 0 10px rgba(61, 122, 200, 0.3), inset 0 0 8px rgba(61, 122, 200, 0.15);
    }

    .responsive-fieldset .grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(1, 1fr);
        margin-top: 8px;
    }

    .responsive-fieldset .item {
        /*******colors*/
        background: var(--bg-primary);
        /*******colors*/
        padding: 10px;
        border-radius: 4px;
        min-height: 36px;
        display: flex;
        align-items: center;
    }

.col2 {
    grid-column: span 2;
}

.col3 {
    grid-column: span 3;
}

.col4 {
    grid-column: span 4;
}

.col5 {
    grid-column: span 5;
}

.col6 {
    grid-column: span 6;
}

.col7 {
    grid-column: span 7;
}

.col8 {
    grid-column: span 8;
}

.col9 {
    grid-column: span 9;
}

.col10 {
    grid-column: span 10;
}

.col11 {
    grid-column: span 11;
}

.col12 {
    grid-column: span 12;
}

.row2 {
    grid-row: span 2;
}
.row3 {
    grid-row: span 3;
}
.row4 {
    grid-row: span 4;
}

@media (min-width: 480px) {
    .responsive-fieldset .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 720px) {
    .responsive-fieldset .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1000px) {
    .responsive-fieldset .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1300px) {
    .responsive-fieldset .grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

.form-group {
    min-width: 100% !important;
}

    .form-group input:not([type="checkbox"]) {
        min-width: 100% !important;
    }




.ud-input-wrapper {
    display: flex;
    align-items: center;
    gap: 5px; 
    width: 90%;
    box-sizing: border-box;
}

    .ud-input-wrapper input {
        flex: 1;
        height:40px;
        padding: 0 4px;
        box-sizing: border-box;
    }

    .ud-input-wrapper select {
        flex: 1;
        height: 40px;
        padding: 0 4px;
        box-sizing: border-box;
        width:100%;
    }

.ud-add-button {
    /*******colors*/
/*    border: 1px solid #ccc;
    background: #eee;*/
    /*******colors*/
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    border-radius: 4px;
    padding: 0;
    flex-shrink: 0; /* non si riduce */
}

    .ud-add-button:hover {
        /*******colors*/
        /*background: #ddd;*/
        /*******colors*/
    }



legend{
    font-size:1.1rem;
    font-weight:600;
}


.button-wrapper {
    margin-top: 10px;
    text-align: right;
}
.button-wrapper input{
    margin:10px;
}
/*view*/
.ud-display-value{
    display:inline-block;
    line-height:60px;
    padding-left:15px;
    min-width:100%;
    font-weight:600;
}

.ud-display-value-small {
    display: inline-block;
    line-height: 60px;
    padding-left: 15px;
    min-width: 100%;
}


/***nuovi view items inline*/
.ud-field2 {
    width: 100%;
}

    .ud-field2 label {
        display: block;
        margin-bottom: 5px;
    }

    .ud-field2 a {
        display: block;
        margin-bottom: 5px;
        padding-left:10px;
    }

.content-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ud-display-value2 {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ud-add-button2 {
    margin-left: auto;
    flex-shrink: 0;
}

/*************************accordion*/

.accordion-fieldset {
    /* Mantiene le proprietà di base del fieldset, se presenti */
    /* Non aggiunge modifiche a margin, padding, border */
}

.accordion-title {
    /* Stile per l'intestazione/pulsante */
    cursor: pointer;
    padding: 10px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    margin: 0;
    list-style: none; /* Rimuove lo stile di lista se il browser lo applica */
    display: flex;
    justify-content: space-between; /* Allinea il testo e l'icona */
    align-items: center;
    transition: background-color 0.2s;
}

    .accordion-title:hover {
        background-color: #ddd;
    }

    .accordion-title::after {
        /* Icona per indicare lo stato (chiuso) */
        content: '+';
        font-size: 1.2em;
        transition: transform 0.3s;
    }

    .accordion-title.open::after {
        /* Icona per indicare lo stato (aperto) */
        content: '-';
        transform: rotate(0deg);
    }

.accordion-content {
    /* Stile per il contenuto */
    padding: 10px;
    border: 1px solid #ccc;
    border-top: none;
    overflow: hidden;
    /* Nasconde il contenuto di default (gestito da JavaScript) */
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

    .accordion-content.show {
        /* Mostra il contenuto */
        max-height: 500px; /* Valore grande per contenere il contenuto */
        opacity: 1;
    }



/*****************fields mandatory*/
/* bordo rosso per input/select/textarea/checkbox richiesti non compilati */
.required-error {
    border: 2px solid red !important;
}
input[type="checkbox"].required-error,
input[type="radio"].required-error {
    outline: 2px solid red !important;
    outline-offset: 2px;
}
/* animazione shake per label */
@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

.label-shake {
    animation: shake 0.3s;
}