#form.form-horizontal {
    opacity: 0 !important;
    transition: opacity var(--transition);
}

#form.form-horizontal.steps-loaded {
    opacity: 1 !important;
}

body:not(.fw360-assistant-open) .boxed:not([data-fullwidth="1"]) #form.form-horizontal {
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
}


body:not(.fw360-assistant-open) .boxed:not([data-fullwidth="1"]) #form.form-horizontal.fw360-module-single {
    border-radius: var(--radius);
}

body:not(.fw360-assistant-open) .boxed:not([data-fullwidth="1"]) #form.form-horizontal .fw360-module-steps-voice {
    border-left: none;
    border-top: none;
    border-right: 1px solid var(--border);
}

body:not(.fw360-assistant-open) .boxed:not([data-fullwidth="1"]) #form.form-horizontal > .fw360-module-steps-voices {
    /* overflow: hidden; */
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

body:not(.fw360-assistant-open) .boxed:not([data-fullwidth="1"]) #form.form-horizontal > .fw360-module-steps-section:last-of-type {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

body:not(.fw360-assistant-open) .boxed:not([data-fullwidth="1"]) #form.fw360-module-single > .fw360-module-steps-section  {
    border-radius: var(--radius);
}

.fw360-module-steps {
    margin: 0;
    position: relative;
}

.ibox-content .fw360-module-steps {
    border: none;
}

.fw360-module-steps.fw360-module-single {
    background: var(--white);
    flex: 1;
    margin: -15px;
}

/* [END] MODAL ===== */
.fw360-module-steps.fw360-module-single {
    background: var(--white);
    flex: 1;
    margin: -15px;
}

.fw360-module-steps .fw360-module-steps-voices {
    display: flex;
    overflow: auto;
    margin-bottom: -1px;
}

.fw360-module-steps .fw360-module-steps-voices>.fw360-module-steps-voice {
    position: relative;
    padding: 15px 20px;
    border: 1px solid var(--border);
    border-bottom: 0;
    margin-right: 0px;
    color: var(--dark);
    font-weight: 500;
    font-size: var(--font-h4);
    white-space: nowrap;
    background: none;
}


.fw360-module-steps .fw360-module-steps-voices>.fw360-module-steps-voice:hover {
    background: var(--primary-transparent);
}

.fw360-module-steps .fw360-module-steps-voices>.fw360-module-steps-voice i {
    display: none;
}

.fw360-module-steps .fw360-module-steps-voices>.fw360-module-steps-voice:not(:first-child)  {
    border-left: none;
}


.fw360-module-steps .fw360-module-steps-voices>.fw360-module-steps-voice.active {
    box-shadow: var(--primary) inset 0px 3px;
    background: var(--white);
}

.fw360-module-steps .fw360-module-steps-voices>.fw360-module-steps-voice.error {
    box-shadow: var(--danger) inset 0px 3px !important;
    color: var(--danger) !important;
}


.fw360-module-steps .fw360-module-steps-voices>.fw360-module-steps-voice.error:before {

}

.fw360-module-steps-section {
    border: none;
    background: var(--white);
    border-top: 1px solid var(--border);
    padding: 15px;
    margin: 0;
    border: 1px solid var(--border);
    min-width: 100%;
    min-inline-size: auto;
}

.widget-content .fw360-module-steps-section {
    border: none !important;
}

body:not(.fw360-assistant-open) .boxed:not([data-fullwidth="1"]) .fw360-module-steps-section:not(.fw360-module-steps-section .fw360-module-steps-section) {
    border-right: none;
    border-bottom: none;
    border-left: none;
}

body:not(.fw360-assistant-open) .boxed:not([data-fullwidth="1"]) fieldset.fw360-module-steps-section {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.fw360-module-steps-section[data-fullscreen] {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 999;
}

.fw360-module-single>.fw360-module-steps-voices {
    display: none;
}

.fw360-module-single>.fw360-module-steps-section {
    border: none;
    /* padding: 15px; */
    /* margin: -15px; */
}

.boxed:not([data-fullwidth="1"]) .fw360-module-single>.fw360-module-steps-section {
    flex: 1;
}

fw360-module-steps-section .fw360-module-steps.fw360-module-steps:not(.fw360-module-single) .fw360-module-steps-section {
    border: 1px solid var(--border);
}


.fw360-module-steps-section .fw360-module-steps .fw360-module-steps-voices {
    border: 1px solid var(--border);
    border-bottom: none;
}

.fw360-module-steps-section .fw360-module-steps .fw360-module-steps-voices>.fw360-module-steps-voice:first-child {
    border-left: none;
}

/* [START] SUBTABS ====== */
.fw360-module-steps.fw360-module-substeps:not(.fw360-module-horizontal) {
    margin: 0;
}

.fw360-module-substeps:not(.fw360-module-horizontal)>.fw360-module-steps-voices>.fw360-module-steps-voice {
    border: none;
}

.fw360-module-substeps:not(.fw360-module-horizontal)>.fw360-module-steps-voices>.fw360-module-steps-voice:hover {

}

.fw360-module-substeps:not(.fw360-module-horizontal)>.fw360-module-steps-voices>.fw360-module-steps-voice.active {
    box-shadow: none;
    color: var(--primary);
    background: none;
}

.ibox-content > div > .tabs-container {
    margin: -16px -16px -16px;
}

/* [END] SUBTABS ====== */

/* [START] TABS ====== */
.multiRowBuilder_Sections_Header {
    flex-wrap: wrap;
    padding: 10 15px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important;
}

.multiRowBuilder.tabs-mode > .ibox-tabs > .multiRowBuilder_Sections > .multiRowSingle {
    border-top: none !important;
}

.multiRowBuilder_Sections {
    margin: 0;
}


.multiRowBuilder_Footer {
    margin-top: 15px;
    display: flex !important;
    gap: 5px;
}

.multiRowBuilder_Sections_Header>li {
    width: max-content;
}

/* [END] TABS ====== */

/* [START] ORIZZONTALE ===== */
.fw360-module-horizontal {
    display: flex;
    border: 1px solid var(--border);
    /* height: 120%; */
    border-radius: var(--radius);
    overflow: hidden;
}

.boxed:not([data-fullwidth="1"]) .fw360-module-horizontal {
    border: none;
}

.fw360-module-horizontal .fw360-module-steps-voices {
    flex-direction: column;
    border: none !important;
    overflow: auto;
    /* width: 100px; */
    gap: 15px;
    height: 100%;
    display: block;
}

.fw360-module-horizontal  .fw360-module-steps-voices .fw360-module-steps-voice {
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    /* white-space: pre-wrap; */
    line-height: 1.1;
    gap: 10px;
    text-align: center;
    padding: 20px 10px;
    font-size: var(--font-body);
    overflow: initial;
    white-space: break-spaces;
}


.fw360-module-horizontal  .fw360-module-steps-voices .fw360-module-steps-voice i {
    font-size: 150%;
    display: block;
    margin-bottom: 10px;
}

.fw360-module-horizontal  .fw360-module-steps-voices>.fw360-module-steps-voice.active,
.fw360-module-horizontal  .fw360-module-steps-voices>.fw360-module-steps-voice.active i {
    box-shadow: none;
    color: var(--white) !important;
    background: var(--primary);
}

/*
.fw360-module-horizontal  .fw360-module-steps-voices>.fw360-module-steps-voice.active:before {
    content: '';
    position: absolute;
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    background: var(--primary);
    z-index: 0;
    opacity: 01;
}
*/
.fw360-module-horizontal  .fw360-module-steps-section {
    flex: 1;
    border: none;
    border-left: 1px solid var(--border);
    overflow: auto;
}


.fw360-module-horizontal  .fw360-module-steps-section .list-group {
    height: auto;
}

@media (max-width: 768px) {
    .fw360-module-horizontal .fw360-module-steps-voices .fw360-module-steps-voice {
        font-size: 13px;
        padding: 10px;
        max-width: 100px;
        overflow: hidden;
    }
}

/* [end] ORIZZONTALE ===== */

/* [START] WIZARD STEP ====== */
.fw360-module-wizard.fw360-module-steps > .fw360-module-steps-voices {
    background: var(--light);
    margin-bottom: 0;
    overflow: hidden;
    overflow-x: auto;
}

.fw360-module-wizard.fw360-module-steps > .fw360-module-steps-voices > .fw360-module-steps-voice {
    padding: 10px 15px 10px 30px;
    flex: 1;
}

.fw360-module-wizard.fw360-module-steps > .fw360-module-steps-voices > .fw360-module-steps-voice:first-child {
    padding-left: 15px;
}

.fw360-module-wizard.fw360-module-steps > .fw360-module-steps-voices > .fw360-module-steps-voice.active {
    background: white;
}

.fw360-module-wizard.fw360-module-steps > .fw360-module-steps-voices > .fw360-module-steps-voice:not(:first-child):before,
.fw360-module-wizard.fw360-module-steps > .fw360-module-steps-voices > .fw360-module-steps-voice:not(:first-child):after {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    top: -2px;
    left: -1px;
    border: solid transparent;
    border-left-color: var(--light);
    border-width: 22px 15px;
}


.fw360-module-wizard.fw360-module-steps > .fw360-module-steps-voices > .fw360-module-steps-voice.after-hover:after {
    border-left-color: #f0f3f6;
}

.fw360-module-wizard.fw360-module-steps > .fw360-module-steps-voices > .fw360-module-steps-voice.after-active:after {
    border-left-color: var(--white) !important;
    left: -1px;
}

.fw360-module-wizard.fw360-module-steps > .fw360-module-steps-voices > .fw360-module-steps-voice:before {
    border-left-color: var(--border) !important;
}

.fw360-module-wizard.fw360-module-steps > .fw360-module-steps-voices > .fw360-module-steps-voice:before {
    left: 0px !important;
}

.fw360-module-wizard.fw360-module-steps > .fw360-module-steps-voices > .fw360-module-steps-voice > span {
    position: relative;
    z-index: 1;
}
/* [END] WIZARD STEP ====== */

/* [START] MODAL ===== */

.bootbox-body > form > .fw360-module-steps:not(.fw360-module-horizontal) {
    margin-left: -16px;
    margin-right: -15px;
}
.modal-body > .fw360-module-steps:not(.fw360-module-horizontal),
.bootbox-body > form > .fw360-module-steps:not(.fw360-module-horizontal, .row + div) {
    margin: -15px -15px !important;
}

.modal:not(.inmodal) .modal-body > .fw360-module-steps .fw360-module-steps-section,
.bootbox-body > form > .fw360-module-steps .fw360-module-steps-section {
    border-bottom: none;
    margin: 0;
    border-left: 0;
}
.modal:not(.inmodal) .modal-body > .fw360-module-steps .fw360-module-steps-section:last-child,
.bootbox-body > form > .fw360-module-steps .fw360-module-steps-section:last-child {
    border-right: none;
}

.bootbox-body > form > .fw360-module-steps .fw360-module-steps-voices {
    background: var(--light);
}

/* [END] MODAL ===== */

/* [START] BOXED SIDEBAR LAYOUT ====== */
@media (min-width: 992px) {
    .boxed:not([data-fullwidth="1"]) .fw360-wrapper-content > .fw360-sidebar-row {
        display: flex;
        flex-wrap: nowrap;
        max-width: 1300px;
        margin-left: auto;
        margin-right: auto;
        gap: 15px;
    }

    .boxed:not([data-fullwidth="1"]) .fw360-wrapper-content > .fw360-sidebar-row > [class*="col-"][class*="-9"] {
        flex: 0 1 1100px;
        max-width: 1100px;
        min-width: 0;
    }

    .boxed:not([data-fullwidth="1"]) .fw360-wrapper-content > .fw360-sidebar-row > [class*="col-"][class*="-3"] {
        flex: 1;
        min-width: 360px;
    }
}

/* [START] LAZY TABS ====== */
.fw360-lazy-loading {
    position: relative;
    min-height: 120px;
}

.fw360-lazy-loading .fw360-loading-overlay {
    position: relative;
    height: 340px;
    border-radius: 0 0 var(--radius) var(--radius);
    flex: 1;
    margin: -15px;
}

/* I box in SIDEBAR sono gli unici placeholder sempre a schermo: le sezioni degli step sono
   nascoste tranne quella attiva, che ha gia' il suo overlay. Senza questa regola il riquadro
   resta col titolo e il corpo bianco per tutta la durata dell'idratazione, che e' indistinguibile
   da «questa sezione non funziona» — e' cosi' che e' stato segnalato (ticket 23020: «il riquadro
   non mostra pulsanti», «non mostra i campi da compilare»).
   ⚠️ Lo spinner sta QUI e non si accende aggiungendo .loading dal JS, come sembrerebbe naturale:
   startLoadingMode() esce senza fare niente se trova un .loading dentro il contenitore
   (components/main/script.js), quindi per i 2-10 s dell'idratazione avrebbe spento il preloader
   globale del pannello e l'overlay di salvataggio su OGNI modulo con una sidebar lazy. E
   .loading:after e' escluso quando e' annidato dentro un altro .loading, che sul modulo Prodotti
   e' esattamente il caso (il marker della sidebar sta dentro il <form>).
   Il disegno e' lo stesso dello spinner di casa (.loading:after in components/main/style.css):
   nessuna classe nuova, la fase di attesa e' gia' marcata da .fw360-lazy-loading. */
.ibox-content.fw360-lazy-loading:after {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top: 4px solid var(--success);
    border-radius: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation: spin 1s infinite linear;
}

/* Comparsa morbida del contenuto appena idratato */
.fw360-module-steps-section.hydrated,
.ibox-content.hydrated {
    animation: fw360LazyFadeIn .18s ease-out;
}

@keyframes fw360LazyFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* [END] LAZY TABS ====== */
/* [END] BOXED SIDEBAR LAYOUT ====== */