input, select, textarea, .input {
    text-align: left;
}

.rotate-spinner {
    font-size: 20px;
    color: var(--colore_arancio-due);
    animation: rotatespinner-spin 2.6s linear infinite;
}

.card-head .button {
    padding: 6px 8px;
    font-size: 13px;
}

.card-head .button i.fa {
    margin-right: 5px;
}

.richiesta_ns .button.completa-ORDINE {
    background-color: var(--colore_verde);
}
.richiesta_ns .button.completa-ORDINE i.fa {
    margin-right: 5px;
}

.ns-card.ddt_caricati .card-head .button.carica-DDT {
    float: right;
    background-color: var(--colore_blu-due);
}
.certificati-ric-card .coil-list {
    max-height: 100px;
    overflow: hidden auto;
    display: block;
    padding: 0px 20px;
}

.ns-card .card-head .cardhead-actions {
    height: 30px;
    display: flex;
    float: right;
    position: relative;
    top: -4px;
}
.ns-card .card-head .cardhead-actions .button {
    padding: 5px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ns-card .card-head .cardhead-actions .button i.fa-solid,
.ns-card .card-head .cardhead-actions .button i.fa {
    margin: 0px 5px;
}

.card-indirizzi_salvati input,
.card-indirizzi_salvati select,
.card-indirizzi_salvati textarea,
.card-indirizzi_salvati .input {
    text-align: center;
}

.feedback-needsteel[aria-open="false"] {
    pointer-events: none;
}
.feedback-needsteel .feedback-ns-button {
    pointer-events: initial;
}

html {
    background-color: var(--colore_bianco);
    background-image: url(../img/background-login.jpg);
    background-size: cover;
}
body{
    margin: 0px;
    padding-bottom: 50px;
    background-color: rgba(255,255,255,0.94);
}

body .home {
    min-height: unset;
    height: unset;
}

.popup .pop-dialog {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.popup .pop-content {
    top: 0;
}
.popup .pop-header {
    background-color: var(--colore_blu-due);
}
.popup .pop-header h4,
.popup .pop-header button.close {
    color: var(--colore_bianco);
}

.scritta-needsteel {
    font-size: 2.7em;
}
.scritta-needsteel strong {
    font-weight: 700;
    margin-right: 3px;
}
.glass-container {
    margin-bottom: 0;
}
body.desktop main layout {
    border: unset;
}
body.thank-you-page {
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.24);
}
body.signup-page {
    padding: 0;
}
.profilo-fornitore .titolo-profilo {
    font-weight: 600;
    text-transform: uppercase;
}
.profilo-fornitore h1>.highligth-text {
    font-size: 0.65em;
    text-transform: lowercase;
}
h1.titolo_registrazione {
    margin-top: 30px;
}

body .loader_wrapper {
    width: 100%;
}

/* Bottoni */
.button.alt {
    width: 100%;
    background-color: var(--colore_blu-tre);
    color: var(--colore_bianco);
    padding: 10px 0;
    border: none;
    cursor: pointer;
    border-radius: 12px;
    font-weight: 550;
    font-size: 1.1em;
    transition: background 0.3s ease;
}

.button.alt:hover {
    background-color: var(--colore_blu-due);
}

a[disabled] {
    pointer-events: none;
}
.catalogo-upper-header .bread-crumbs {
    margin-top: 15px;
}
.card-head button.go-back {
    display: inline-flex;
    margin: 0;
    padding: 0;
    margin-left: 20px;
}

h1.heading.center.alt {
    display: block;
}
h1.heading.center.alt:after {
    top: 13px;
}
.dashboard-layout h1.heading.center.alt {
    margin-bottom: 0px;
    margin-top: 10px;
}
.dashboard-layout h1.heading.center.alt:after,
.dashboard-layout h1.heading.center.alt::before {
    content: unset;
}
.dashboard-layout .ns-card.focused .card-head {
    background-color: unset;
    color: var(--colore_nero);
}
.dashboard-layout .ns-card.focused .card-head hr {
    border-color: var(--colore_blu-tre);
    margin: 0;
    margin-top: 1px;
}
.dashboard-layout .ns-card.focused .card-body {
    border-top: none;
}
.dashboard-layout .card-richieste ul.voci-menu {
    margin-top: 0px;
}
header.testata-portale .col-1 .fa {
    max-width: 35px;
}

header.testata-portale .col-1 .main-icon {
    margin-right: 0px;
}

.nscart-button {
    top: 0px;
}
.prontuario-card .card-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.prontuario-card .card-head .testo > span{
    width: fit-content;
    display: inline-block;
    text-align: right;
    margin-right: 10px;
}
.prontuario-card .card-head > a{
    margin: 0;
    font-size: 0.8em;
}

/*
FOOTER OVERRIDE
-main footer settings impostazioni degli stili del footer per fare in modo che il
*/
footer.main-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    padding: 1px;
    border-top: 1px solid var(--colore_grigio-otto);
    background-color: var(--colore_grigio-dieci);
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding: 10px 20px;
    z-index: 2;
}
footer.main-footer .poweredby {
    display: flex;
    gap: 5px;
    width: 200px;
    align-items: center;
}
footer.main-footer .termscond-wrap {
    font-size: 16px;
    font-style: italic;
    width: 200px;
}
footer .contatto-assistenza {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
}
footer .contatto-assistenza .due {
    font-size: 12px;
    font-style: italic;
}
footer .contatto-assistenza p {
    margin: 0;
    line-height: 1.1;
    font-size: 14px;
}
footer .contatto-assistenza h4 {
    margin: 0;
    line-height: 1;
    color: green;
}
footer .contatto-assistenza .fa-phone {
    margin-right: 5px;
    rotate: 20deg;
    font-size: 14px;
}
footer.main-footer .poweredby p {
    font-size: 12px;
}
footer.main-footer .poweredby img {
    width: 65px;
}

button.hamburger {
    width: 30px;
    height: 30px;
}

button.hamburger span {
    height: 2px;
    left: 6px;
}
button.hamburger span:nth-of-type(1) {
    top: 5px;
}
button.hamburger span:nth-of-type(2) {
    top: 13px;
}
button.hamburger span:nth-of-type(3) {
    top: 20px;
}
button.hamburger.active span:nth-of-type(1) {
    top: 8px;
    left: 7px;
}
button.hamburger.active span:nth-of-type(3) {
    top: 20px;
    left: 7px;
}

span.etichetta-account {
    display: block;
    margin: 0px;
    background-color: var(--colore_blu-sei);
    font-weight: 600;
    text-align: center;
    line-height: 1;
    padding: 4px;
    font-size: 16px;
}

.ns-card .card-head {
    font-size: 1.3em;
    text-transform: uppercase;
}
body.start_page .home {
    height: 100vh;
}

/**
*
* BARRA DEI FILTRI (PER LE RICHIESTE)
*
**/
.layout-richieste {
    display: flex;
    gap: 10px;
    position: relative;
}
.layout-richieste > q {
    position: absolute;
    left: 2px;
    top: 40vh;
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    cursor: pointer;
    z-index: 1;
    border-left: 10px solid var(--colore_grigio-quattro);
}

body.nascondi_lista_richieste .pagination-bottom,
body.nascondi_lista_richieste .archivio-richieste,
body.nascondi_lista_richieste .layout-richieste{
    display: none;
}

.layout-richieste .pagina-portale {
    width: 100%;
}
.layout-richieste .div-contenitore-filtri {
    border-right: 3px solid var(--colore_grigio-cinque);
    min-height: calc(100vh - 100px);
    position: relative;
    width: 0px;
    overflow: hidden;
}

.layout-richieste[aria-open="true"] > q {
    left: 235px;
    transform: rotate(180deg);
}

.layout-richieste[aria-open="true"] .div-contenitore-filtri {
    width: 250px;
    padding-right: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    overflow: visible;
    padding: 0px;
}
.layout-richieste[expanded="true"] .div-contenitore-filtri {
    width: 0px;
    border: none;
    overflow: hidden;
}
.layout-richieste[expanded="true"] > q {
    display: none;
}
.layout-richieste[expanded="true"] {
    padding-left: 10px;
    gap: 0px;
}
.layout-richieste[aria-open="false"] .div-contenitore-filtri *,
.layout-richieste[expanded="true"] .div-contenitore-filtri * {
    display: none;
}

.layout-richieste[aria-open="true"] .pagina-portale {
    width: calc(100% - 250px);
}

.layout-richieste[expanded="true"] .pagina-portale {
    width: 100%;
}

.layout-richieste .div-contenitore-filtri .ricerca-dati {
    margin-bottom: 20px;
}
.layout-richieste .div-contenitore-filtri > .row {
    flex-direction: column;
    align-items: start;
    padding-right: 15px;
}
.layout-richieste .div-contenitore-filtri > .row > .col {
    width: 100%;
} 
.layout-richieste .div-contenitore-filtri .filtro-ns ,
.layout-richieste .div-contenitore-filtri .button.sort {
    width: 100%;
}


/* ---------------------- CSS contenitore filtri ----------------------- */

.div-contenitore-filtri,
.div-contenitore-riordino {
  display: flex;
  flex-direction: column;
}

.div-contenitore-filtri .col ,
.div-contenitore-riordino .col {
  width: auto;
}

.div-contenitore-riordino input,
.div-contenitore-filtri input {
  padding: 10px;
  outline: none;
  border-radius: 5px;
}

.div-contenitore-riordino p,
.div-contenitore-filtri p {
  font-size: 1.02em;
}

.div-contenitore-filtri > .row:first-child {
  margin-bottom: 10px;
}

.div-contenitore-riordino > .row{
    padding-bottom: 15px;
    align-items: center;
}

.div-contenitore-riordino button:hover,
.div-contenitore-filtri button:hover {
    color: var(--colore_bianco);
    background-color: var(--colore_blu-quattro);
    border: var(--spessore_bordi) solid var(--colore_bianco);
}

.div-contenitore-riordino button.active,
.div-contenitore-riordino button:focus,
.div-contenitore-filtri button:focus {
    background-color: var(--colore_blu-quattro);
    color: var(--colore_bianco);
    border: var(--spessore_bordi) solid var(--colore_bianco);
}


/* ----------------------------- CSS account form ----------------------------- */
span.condizioni_contratto {
    max-height: 140px;
    overflow: hidden;
}
span.condizioni_contratto img.img_condizioni {
    display: none;
    object-fit: cover;
}
span.condizioni_contratto .verotesto {
    display: block;
}
span.condizioni_contratto.cond_caricate img.img_condizioni {
    display: block;
}
span.condizioni_contratto.cond_caricate .verotesto,
span.visura_camerale.vis_caricata .verotesto {
    display: none;
}

.agente .account-tabs tabnav div:not(.active) {
    display: none;
}
.agente .account-tabs content tab[aria-active="false"] {
    display: none;
}
.pagina-account tabdiv content,
.pagina-account tabnav div.active{
    border: none;
}
.pagina-account tabdiv content tab {
    padding: 0px;
    padding-top: 15px;
}

.pagina-account tabnav {
    border-bottom: 1px solid var(--colore_grigio-sei);
}
.pagina-account tabnav div {
    top: 0px;
    background-color: unset;
    border: unset;
    color: var(--colore_grigio);
    border-bottom: 1px solid transparent;
    transition: all 0.5s ease;
    font-weight: 450;
}
.pagina-account tabnav div i.fa {
    width: 23px;
    height: 23px;
    font-size: 20px;
    max-width: 0px;
    opacity: 0;
    transition: all 0.6s ease;
    overflow: hidden;
}
.pagina-account tabnav div:hover {
    background-color: var(--colore_grigio-nove);
    border-bottom: 1px solid var(--colore_grigio-sei);
}
.pagina-account tabnav div.active {
    padding-top: 2px;
    border-bottom: 2px solid var(--colore_blu-due);
    background: var(--colore_grigio-dieci);
    color: var(--colore_blu-uno);
    font-weight: 600;
}
.pagina-account tabnav div:hover i.fa,
.pagina-account tabnav div.active i.fa { 
    max-width: 40px;
    opacity: 1;
    margin-right: 3px;
    padding-top: 2px;
}

.card-anteprima_profilo .profilo-fornitore {
    padding: 0px;
    margin: 0 auto;
    width: 100%;
}
.pagina-account tabnav div span.triangle-note i.fa {
    overflow: visible;
    opacity: 1;
    font-size: 16px;
    width: unset;
    height: unset;
    font-weight: 750;
    top: 13px;
    left: -1px;
}
/* ---------------------------------- COSE NUOVE -------------------------*/

.testata-portale .button {
    background-color: var(--colore_grigio-dieci);
    color: var(--colore_nero);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-radius: 8px;
    align-items: center;
    display: flex;
    gap: 10px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    font-size: 1rem;
    margin: 0;
}
.testata-portale .button:hover {
    background-color: var(--colore_grigio-nove);
}


.testata-portale .button.salva-imp {
    background-color: var(--colore_blu-quattro);
    color: #ffff;
}
.testata-portale .button.salva-imp:hover {
    background-color: var(--colore_blu-tre);
}

.testata-portale .button.logout {
    padding: 8px 13px;
    line-height: 1;
    font-size: 20px;
    background-color: var(--colore_rosso);
    color: var(--colore_bianco);
}

.testata-portale .account-button {
    background-color: var(--colore_blu-quattro);
    padding: 8px 10px;
    border-radius: 8px;
    text-transform: uppercase;
    color: var(--colore_bianco);
    font-weight: 700;
}
.testata-portale .account-button:hover {
    background-color: var(--colore_blu-cinque);
}
.testata-portale .account-button i.fa {
    position: relative;
    top: 0px;
}

.testata-portale .button.logout:hover{
    background-color: #953333;
    color: var(--colore_bianco);
}

.nsnotify-button .fa.fa-cart-shopping {
    position: relative;
    left: 0;
    top: 0;
    transition: font-size 0.26s ease, color 0.28s ease;
}
#notification-wrapper.open .nsnotify-button {
    font-palette: initial;
}
.needsteel-cart #elementi-carrello {
    height: calc(100vh - 120px);
}
.area-notifiche {
    min-height: 20px;
    max-height: 800px;
    position: absolute;
    z-index: 2;
    top: 30px;
    right: 0px;
    box-shadow: 0px 0px 9px 0px;
    max-width: 100vw;
    width: 450px; 
    text-align: left;
    overflow: auto;
    background-color: var(--colore_bianco);
    border: 2px solid var(--colore_blu-cinque);
    border-radius: 10px;
    padding: 20px;
}
.nessuna-notifica{
    padding: 20px 20px;
    padding-top: 35px;
    text-align: center;
}
.notifica_dashboard{
    background-color: var(--colore_grigio-otto);
    border: 1px solid var(--colore_grigio-sette);
    padding: 14px;
    border-radius: 10px;
    margin: 20px 5px;
}
.notifica_dashboard:hover{
    background-color: var(--colore_blu-nove);
}
.notifica_dashboard > p {
    margin-bottom: 10px;
}

.testata-portale .notifica_dashboard .button {
    background-color: var(--colore_blu-quattro);
    color: #fff;
    width: fit-content;
    padding: 5px 14px;
}

/* ----------------------------- CSS portale pubblico --------------------------*/
.menu-navigazione .row.scelta-registrazione {
    flex-direction: row;
}
.row.diventa-utente{
    display: flex;
    gap: 8px;
}
.row.diventa-utente .col.fai-richiesta h1.who,
.row.diventa-utente .col.diventa-fornitore h1.who{
    text-align: center;
    color: var(--colore_blu-quattro);
    text-transform: uppercase;
    font-size: 2em;
}
.row .fai-richiesta{
    border-right: 1px solid var(--colore_grigio-sette);
    padding-right: 8px;
}
.row .fai-richiesta .row.testo-richiesta,
.row .fai-richiesta .row.immagine-sbiadita,
.row .col.diventa-fornitore .testo-bottone-fornitore,
.row .col.diventa-fornitore .testo-bottone-fornitore .testo-fornitore,
.row .col.diventa-fornitore .testo-bottone-fornitore .bottone-fornitore,
.row .col.diventa-fornitore .carosello{
    display: block;
    width: 100%;
    text-align: center;
}
.row.immagine-sbiadita .immagine{
    height: 16em;
    width: 100%;
    background-position: center;
    background-size: 1200px auto;
    width: 100%;
}
.col.diventa-fornitore .testo-bottone-fornitore{
    align-items: center;
    display: flex;
}
.carosello-fornitori .slick-slide {
    max-width: 203px;
    padding: 20px 10px;
    margin: 0px 5px;
}
.carosello-fornitori .logo-slide {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 250px;
    height: 16em;
}
.carosello-fornitori .slick-list .slick-slide.testo-slide {
    background-color: var(--colore_grigio-otto);
}
.carosello-fornitori .slick-slide .row.testo-slide {
    display:flex;
    flex-direction: column;
    position:relative;
    border: 2px solid var(--colore_blu-tre);
    padding: 15px;
}
.carosello-fornitori .slick-slide .row.testo-slide .col {
    width: 100%;
}
.carosello-fornitori .slick-slide .row.testo-slide .col .fa {
    position: absolute;
    bottom: 2px;
    right: 11px;
    font-size: 3em;
    color: var(--colore_blu-tre);
}
.carosello-fornitori button.slick-arrow {
    display: none!important;
}
.carosello-fornitori.slick-slider {
    width: 100%;
}
.carosello-fornitori .slick-list .slick-slide {
    background-color: var(--colore_bianco);
}

section.header-section {
    width: 100%;
    display: block;
    background-position: center;
    background-size: 100% auto ;
    font-size: 1.86em;
    color: #fff;
    letter-spacing: 2px;
}
section.header-section h1 span,
section.header-section h3 span {
    color: var(--colore_blu-tre);
}
section.header-section .header-content {
    padding: 4em 2em;
    background-color: rgba(0,0,0,0.53);
}
.call-to-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    position: relative;
    background-position: center;
    background-size: cover;
}
.call-to-action .action-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    background: rgba(255,255,255,0.34);
    font-size: 1.5em;
    text-align: center;
}

.call-to-action.uno {
    margin: 40px 0px;
}
.call-to-action.uno .action-content {
    padding: 0px 10px;
}
.call-to-action.uno::before,
.call-to-action.uno::after {
    content: "";
    display: block;
    width: 55%;
    height: 40px;
    background: var(--colore_blu-sette);
    position: absolute;
    top: -20px;
    left: 0px;
    z-index: 1;
}

.call-to-action.uno::after {
    top: unset;
    left: unset;
    bottom: -20px;
    right: 0px;
}

/* ----------------------------- CSS bottone crediti --------------------------*/
.button.credito_fornitore {
    font-size: 1em;
    text-align: left;
    background-color: var(--colore_blu-quattro);
    padding: 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: flex;
    padding: 0px 10px;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-family: 'TradeGothicLT-BoldTwo';
    font-weight: 400;
    color: var(--colore_bianco);
}
.button.credito_fornitore:hover {
    background-color: var(--colore_blu-cinque);
    color: var(--colore_nero);
}
.button.credito_fornitore:hover .fa-dollar-sign {
    border-color: var(--colore_nero);
}
.button.credito_fornitore span {
    margin: 10px;
    text-align: center;
}
.button.credito_fornitore span {
    margin: 10px;
    text-align: center;
}
.credito_fornitore i.fa {
    border: 2px solid var(--colore_bianco);
    position: relative;
    left: 0px;
    border-radius: 50px;
    padding: 6px;
    margin-right: 10px;
}

.img-btn.fa.fa-circle-dollar-to-slot{
    position: relative;
}

#userinfo_form_logo_profilo,
#userinfo_form_copertina_profilo,
#file_uploader {
  border: none;
}
#file_uploader {
  padding: 0;
}

header .account-button p a {
    line-height: 1;
    font-size: 16px;
}
header .account-button p a.logout {
    font-size: 12px;
    line-height: 1.2;
}

/* ---------------- riordino e filtri ----------------- */
.row.row-riordino,
.row.row-filtri {
    align-items: center;
}

.menu-navigazione .menu-laterale {
    position: fixed;
    width: calc(var(--grandezza_barra_laterale) - 20px);
    z-index: 100;
    height: 100%;
}

.mobile .menu-navigazione .menu-laterale {
    width: 100%;
    position: relative;
}

.menu-navigazione h1.heading-alt {
    font-size: 14px;
    font-weight: 600;
    color: var(--colore_grigio);
}
.menu-navigazione .heading-alt:before {
    margin-left: unset;
    background-color: var(--colore_blu-sei);
}
.menu-navigazione .button.switcha-utente {
    padding: 13px 10px;
}
.menu-navigazione .button .switcher-text span {
    justify-content: flex-start;
    justify-items: flex-start;
    padding-left: 10px;
}
.menu-navigazione .button:hover .switcher-text span {
    top: -25px;
}

/* ----------------------------- CSS pagina account ----------------------------- */
.row.riga-form-account {
    align-items: center;
}
.ns-card .card-body > .row.riga-form-account {
    padding: 10px 5px;
    margin: 0;
    gap: 5px;
    padding-left: 0px;
}
.ns-card .card-body > .row:last-child {
    border-bottom: none;
}
.row.riga-form-account .col {
    width: 120px;
    text-align: left;
    justify-content: left;
    padding: 0;
    margin: 0;
}
.riga-form-account .col h3 {
    margin-bottom: 15px;
}
.riga-form-account .col.input_cont {
    width: 100%;
    justify-content: left;
    padding: 0;
    margin: 0;
}
.riga-form-account .col.input_cont > div {
    width: 100%;
}
.riga-form-account.row_consegna .col.input_cont > div,
.riga-form-account.row_magazzino .col.input_cont > div {
    width: fit-content;
    border: var(--spessore_bordi) solid var(--colore_grigio-cinque);
    border-radius: 5px;
    overflow: hidden;
}
.riga-form-account .col .input_cont label {
    display: inline-block;
    width: 100px;
}
.riga-form-account .col .input_cont .testo_cont {
    width: calc(100% - 100px);
}
.riga-form-account .col .input_cont {
    margin-bottom: 5px;
    width: 100%;
}
.card-indirizzi_nuovi .riga-form-account .col .input_cont input,
.card-indirizzi_nuovi .riga-form-account .col .input_cont select  {
    width: 100%;
    min-width: unset;
}
.riga-form-account .col .input_cont #indirizzo_consegna_nuovo_via,
.riga-form-account .col .input_cont #indirizzo_magazzino_nuovo_via  {
    width: calc(100% - 101px);
    margin-right: 1px;
}
.riga-form-account .col .input_cont #indirizzo_consegna_nuovo_num_civico, 
.riga-form-account .col .input_cont #indirizzo_magazzino_nuovo_num_civico{
    width: 96px;
    min-width: unset;
}
.riga-form-account .col.input_cont .act_data_holder {
    display: inline-block;
    width: 60%;
}
.riga-form-account .col.input_cont input,
.riga-form-account .col.input_cont select {
    width: 75%;
    min-width: unset; 
}
.riga-form-account .col.input_cont .row.input_ind input.num-civico{
    width: 16%;
    min-width: unset;
}
.riga-form-account .col.input_cont .act_data_holder input {
    width: 100%;
}
.riga-form-account .col .aggiungi_consegna,
.riga-form-account .col .aggiungi_magazzino{
    margin-top: 10px;
}


.row.input_ind {
    width: 75%;
}
.row.comandi-mercato {
    padding: 10px;
}
.row.comandi-mercato .col {
    width: fit-content;
    gap: 10px;
    padding: 0px;
}

.row.comandi-mercato input,
.row.comandi-mercato select {
    min-width: unset;
}

.txt-modifica-iva {
    display: block;
    text-align: center;
    padding-top: 20px;
}

.tabella-pagamenti tr td:first-child  {
    width: 100px;
    text-align: left;
    padding-left: 10px;
}
  
/*  ------------------------- CSS ACCOUNT SECONDARI ------------------------- */
.pagina-portale ul.dati-utente_secondario{
    display: flex;
    padding: 10px 0px;
    border-bottom: 1px solid var(--colore_grigio-cinque);
    align-items: center;
    margin-bottom: 10px;
}
.pagina-portale ul.dati-utente_secondario li {
    margin-right: 10px;
}
  
.form-account-secondari {
    width: 50%;
}
  
  
/* -------- CSS Dashboard - pagina DASHBOARD ------------- */
.panoramica-dashboard {
    padding: 10px;
    border: var(--spessore_bordi) solid var(--colore_grigio-quattro);
    border-radius: 5px;
    font-size: 1.04em;
    margin-bottom: 20px;
}
.panoramica-top {
    width: 100%;
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
}
.testo-informativo-dashboard {
    font-size: 1em;
    color: var(--colore_grigio-uno);
    font-style: italic;
    padding-top: 30px;
    padding-left: 20px;
}
.info-dashboard {
    width: 25%;
    padding: 10px;
    display: inline-block;
    vertical-align: top;
}
.canvaschart-wrapper{
    width: 70%;
    display: inline-block;
}

.box-riferimento{
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right:  10px;
}
.box-riferimento.brf1 { background-color: #0D61FA; }
.box-riferimento.brf2 { background-color: #0B8EDE; }
.box-riferimento.brf3 { background-color: #00D8F5; }
.box-riferimento.brf4 { background-color: #0BDEBD; }
  
.wg_calendario_dashboard{
    width:400px !important;
    height:220px;
    margin: 10px;
    margin-right: 0px;
    height: auto;
    padding: 10px;
    display: inline-block;
    text-align: center;
    overflow: auto;
    border-radius: 5px;
    border: var(--spessore_bordi) solid var(--colore_grigio-sei);
    background-color: var(--colore_bianco);
    transition: all 0.3s ease;
}
.wg_calendario_dashboard:hover{
    background-color: var(--colore_blu-sette);
}
.wg_calendario-header {
    width: 100%;
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
}
.wg_calendario-header > span {
    width: 40%;
    text-transform: uppercase;
    text-transform: uppercase;
    background: #f5db10;
    font-weight: 750;
    font-family: 'Roboto Flex';
    line-height: 1;
    padding: 3px 5px;
}
.wg_calendario-header > span i.fa.triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    width: 20px;
    height: 15px;
    background: var(--colore_nero);
    color:  #f5db10;
    text-align: center;
    padding-top: 2px;
        display: inline-block;
    font-size: 12px;
}
.wg_calendario-header span:first-child{
    text-align: left;
}
.wg_calendario-header span:last-child{
    text-align: right;
}
.wg_calendario_body {
    max-height: 233px;
    overflow: scroll;
    overflow-x: hidden;
}
/*  ------------------------- Pagina HOMEPAGE ------------------------- */
.home-page section.header-section {
    background-position: center;
    background-size: cover;
}

.home-page section.header-section .header-content {
    background-color: rgba(0, 41, 87, 0.61); 
    background: linear-gradient(270deg, rgba(0, 80, 166, 0.8), rgba(0, 23, 51, 0.9));
}
.home-page section.header-section .header-content h1 {
    margin-bottom: 30px;
}

.home-page .header-section .afp-logo{
    max-width: 200px;
    position: absolute;
    right: 10%;
    top: 10%;
}

/*  ------------------------- Pagina Login & Registrazione ------------------------- */
.contenitore-login{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 850px;
    height: 95vh;
}
body.login main {
    flex-direction: column;
}
body.signup main {
    vertical-align: middle;
    flex-direction: column;
}
body.login,
body.signup {
    background-image: url("../img/background-login.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
body.signup label h3,
body.login label h3 {
    margin-bottom: 10px;
}
body.signup input,
body.signup select,
body.signup input,
body.login select {
    width: 100%;
}
.ricorda-login {
    display: flex;
    gap: 5px;
    font-style: italic;
    margin-bottom: 10px;
    display: none;
}
section.login-section {
    border-top: 2px solid var(--colore_grigio-sette);
    border-bottom: 2px solid var(--colore_grigio-sette);
    background-color: #ffffff;
    margin: 30px 0px;
    padding-top: 30px;
}

/*LOGIN FORM*/
#login-form{
    height: 100%;
    place-content: center;
    width: 100%;
    max-width: 250px;
    display: block;
    margin: 0 auto;
}

#login-form h3 {
    text-align: center;
    margin: 0;
}

#login-form nsinput input {
    border: var(--spessore_bordi) solid var(--colore_grigio-nove);
    border-radius: 12px;
    width: 100%;
    text-align: center;
}

#login-form nsinput input[name="user_password"] {
    border: var(--spessore_bordi) solid var(--colore_grigio-nove);
    border-radius: 12px 0px 0px 12px;
}


#login-form h2,
#recupero-password h1 {
    text-align: center;
    margin-top: 0px;
}
#recupero-password nsinput>div i.fa{
    left: 26%;
}
#recupero-password .recupero_pass{
    margin-top:10px;
}

section.login-section {
    border-top: none;
    border-bottom: none;
    background-color: none;
    margin: 0px;
    padding-top: 0px;
    height: 550px;
    margin: 40px 0px;
    border: 2px solid #002e75;
    display: flex;
    position: relative; 
    flex-direction: column;
}

.login-section .sotto_titolo {
    letter-spacing: 2px;
    text-align: center;
    color: var(--colore_blu-due);
    font-style: italic;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1rem;
}

section.login-section .row {
    height: 100%;
    background-color: var(--colore_bianco);
}

.login-section .col-login {
    background-color: var(--colore_grigio-nove);
    height: 45vh;
    place-items: center;
    display: flex;
    width: 35vh;
    border-radius: 20px;
}
.login-section .scritta-needsteel {
    text-align: center;
    margin-bottom: 10px;
}

.login-section .col:first-child {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    position: relative;
    z-index: 1;
    align-self: center;
}

/* Separatore strappato */
.login-section .separator {
    position: absolute;
    top: 0;
    left: 52%;
    transform: translateX(-52%);
    height: 100%;
    width: auto;
    z-index: 10;
    pointer-events: none; /* evita click sull'immagine */
}

.login-section .separator img {
    height: 100%;
    display: block;
}


/* Destra - Registrazione */
.login-section .col.nuovo-registrati {
    width: 50%;
    color: white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;    
    padding: 60px;
    position: relative;
    z-index: 0;
    height: 100%;
    text-align: center;
}

.nuovo-registrati .button.registrazione {
    width: 100%;
    max-width: 250px;
}

.nuovo-registrati p {
    max-width: 300px;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
}


/* Link password dimenticata */
.recupero-password-link {
    display: inline-block;
    font-size: 0.9rem;
    color: #777;
    margin-top: 10px;
    cursor: pointer;
}

.content-signup {
    max-width: 100%;
    margin-left: 10%;
}

.content-signup h2 {
    text-align: center;
    font-size: 3rem;
    font-weight: 600;
}

.content-signup p {
    text-align: center;
    font-size: 1.2rem;
}

/* CALL TO ACTION SUPPORTO TECNICO */
.cta-supporto-tecnico {
    position: relative;
    overflow: hidden;
    background-color:rgba(10, 14, 63, 1);
    background-size: cover;
    background-position: center;
    color: white;
    padding: 80px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    margin-bottom: 20px;
}

.cta-supporto-bg {
    position: absolute;
    top: 0;
    left: -60%;
    width: 30%;
    height: 100%;
    z-index: 1;
    transform: skewX(-15deg);
    background-color: rgba(8,92,183,0.65);
    animation: scrollTrapezio 3s linear infinite;
    animation-direction: alternate;
}

.cta-supporto-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    text-align: center;
    margin-bottom: 30px;
}

.cta-supporto-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-supporto-content p {
    font-size: 1.21rem;
    line-height: 1.5;
}
.cta-supporto-content p:last-of-type {
    margin-bottom: 30px;
}

.cta-button {
    background-color: var(--colore_bianco);
    color: var(--colore_blu-uno);
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-button:hover {
    background-color: var(--colore_blu-due);
    color: var(--colore_bianco);
}


    
/*  ------------------- CSS archivio delle richieste --------------------- */
  
.carta-archivio {
    width: 100%;
    max-width: 350px;
    display: block;
    margin: 0 auto;
    background-color: white;
    text-align: center;
    padding: 25px;
    margin-top:80px;
    box-shadow: var(--ombra_effetto);
}
.carta-archivio img {
    max-width: 100px;
    width: 100%;
    display: inline-block;
}
.carta-archivio > h1 {
    font-size: 1.65em;
}
.carta-archivio > p {
    font-size: 1.2em;
}
.richiesta_ns h2.banda-archivio {
    background-color: var(--colore_blu-sei);
    padding: 5px;
}
.richieste-wrapper .richiesta_ns:first-child {
    margin-top: 0px;
}
  
/* ----------- Inizio pagina : Statistiche aziendali ----------- */

#aggiornaPiano .pop-dialog {
    margin-top: 3%;
}
  
#aggiornaPiano .pop-body {
    max-height: 450px;
}

/** card conversioni **/
.card-panoramica .card-body .row{
    flex-wrap: wrap;
    gap: 0;
}
.card-panoramica .card-body .row .col {
    width: 100%;
    padding: 0px;
}
.card-panoramica .card-body .row .col .row {
    border-bottom: 1px solid #eaeef1;
    padding: 10px;
}
.card-panoramica .card-body .row .col:last-child .row {
    border: none;
}
.card-panoramica .row > .col .col {
    gap: 10px;
    width: 50%;
}
.card-panoramica .col > span {
    width: 70%;
}
.card-panoramica .col > span p:last-child {
    font-size: 2em;
}
.card-panoramica .col > span:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    font-size: 35px;
}
.card-panoramica .card-body .row .col > .row > .col:last-child{
    border-right: 0px solid transparent;
}
  
/** card profilo **/
.card-profilo .card-body > .row > .col:first-child {
    width: 20%;
}
  
.card-profilo .card-body > .row > .col {
    display: flex;
    padding: 10px;
    justify-content: center;
}
.card-profilo .card-body > .row > .col.testo-info {
    width: 30%;
}
.card-profilo .card-body > .row > .col.input_cont{
    width: 50%;
}
.card-profilo .card-body > .row > .col.input_cont .input_cont div label {
    width: 60%;
}
.riga-form-account .col.input_cont .act_data_holder#user_desc_c {
    width: 80%;
}
label#userinfo_form_descrizione_corta {
    width: 0%;
}
#userinfo_form_descrizione_corta {
    text-align: left;
    width: 100%;
}
.row.riga-form-account.immagini:last-child{
    max-height: 150px;
}
.card-profilo .card-body > .row > .col.input_cont .input_cont div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.card-profilo .card-body > .row > .col.input_cont .input_cont div #userinfo_form_logo_profilo {
    width: 100%;
}
.card-profilo .card-body > .row:last-child .col span:last-child{
    text-align: center;
    max-height: 150px;
    width: 100%;
}
.card-profilo .card-body > .row:last-child .col span.testo_cont{
    max-height: 100px;
    overflow: hidden;
}
.card-profilo .card-body > .row:last-child .col span.testo_cont img{
    max-height: 150px;
}

/* colori icone della card */
.card-panoramica .col > span .fa-chart-line {
    color: var(--colore_blu-cinque)
}
.card-panoramica .col > span .fa-chart-gantt {
    color: var(--colore_arancio)
}
.card-panoramica .col > span .fa-chart-column {
    color: var(--colore_blu-tre)
}
.card-panoramica .fa-user,
.card-panoramica .fa-users {
    color: var(--colore_message)
}

/** form del fornitore **/
.tabella-immagini tr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.tabella-immagini tr td:nth-child(1) {
    width: 30% !important;
}
.tabella-immagini tr td:nth-child(2) {
    width: 70%;
}
.tabella-immagini .row.immagini {
    background-color: var(--colore_grigio-sette);
    padding: 20px;
}
.row.account-docs {
    text-align: left;
    margin: 0;
    align-items: center;
    text-align: center;
}
.row.account-docs .col:first-child {
    width: 40%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    max-width: 350px;
}
.row.account-docs .col:first-child::before {
    width: 150px;
    height: 25px;
    display: block;
    position: absolute;
    top: calc(50% - 12.5px);
    left: calc(50% - 75px);;
    z-index: -1;
    text-align: center;
}
.row.account-docs i.upload-btn {
    width:  50px;
    height: 50px;
    position: absolute;
    display: flex;
    top: 10px;
    left: 10px;
    align-items: center;
    justify-content: center;
    background-color: rgba(29,82,145,0.82);
    color: #ffffffb5;
    font-weight: 900;
    z-index: 2;
    cursor: pointer;
    font-size: 22px;
    transition: all ease 0.4s;
}

.row.account-docs i.upload-btn:hover {
    background-color: rgba(29,82,145,0.96);
    color: #ffffff;
    font-size: 25px;
}
.row.account-docs .col input {
    display: none;
}

.row.account-docs .col.cond_caricate{
    display: none;
}

.row.account-docs .col.vis_caricata{
    display: none;
}
.account-docs .col .img-anteprima {
    max-height: 350px;
    display: block;
    overflow: hidden;
    overflow-y: auto;
}
.account-docs .img-anteprima img {
    display: block;
    margin: 0 auto
}
.pagina-portale .tabella-pagamenti tr td {
    vertical-align: middle;
}
.tabella-pagamenti tr td div.act_data_holder{
    margin-top: 5px;
}

.row.account-docs .doc-loader {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    text-align: center;
    padding-top: 20px;
}



/***
    PANORAMICA PER GLI UTENTI
***/
.ns-card .profilo-fornitore .row.descrizione-fornitore >.col, 
.ns-card .profilo-fornitore .row.dati-fornitore >.col {
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
}
.row.bottoni-fornitore .col{
  flex-direction: row;
  justify-content: flex-start;
}
.profilo-fornitore .bottoni-fornitore .button{
  margin: 2px;
}
.ns-card .profilo-fornitore .row.descrizione-fornitore >.col .testo_descrizione{
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.row_consegna>.col.input_cont>div input{
  min-width: unset;
}

.report-form .col:first-child {
  width: 230px;
}

.report-form .col:first-child p {
  font-size: 14px;
}
.report-form .col:last-child {
  width: calc(100% - 230px);
  background-color: var(--colore_grigio-otto);
  padding: 10px;
}
.report-form .col:last-child > span:first-child {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--colore_grigio-due);
  flex-direction: column;
  padding: 20px;
}

.report-form .col:last-child > span:first-child .tabella_ns {
  max-width: 560px;
}

.report-form .col:last-child > span:first-child .tabella_ns td {
  text-align: left;
}

/* ----------------------------- CSS bottone account -------------------------- */

.an-logo-wrap > div > label {
    width: 100%;
    max-width: 250px;
    display: inline-block;
} 

.an-logo-wrap > div > button {
    margin-left: 15px;
}
    
.anagrficlogo-preview {
    width: 100%;
    max-width: 240px;
    display: block;
}

form[name="userinfo_form"] > div > label,
form[name="userinfo_form"] > div > input {
    opacity: 0;
    visibility: none;
    display: none;
}

.riga-form-account .col.input_cont input,
.riga-form-account .col.input_cont select {
    width: 100%;
}

  
.row_consegna > .col.input_cont,
.row_magazzino > .col.input_cont {
    display: flex;
    gap: 2px;
}
.row_consegna > .col.input_cont > div label,
.row_magazzino > .col.input_cont > div label {
    width: 100%;
    display: block;
    text-transform: lowercase;
    background-color: var(--colore_grigio-otto);
    font-size: 14px;
    padding: 1px 4px;
}
.row_consegna > .col.input_cont > div input,
.row_consegna > .col.input_cont > div select, 
.row_magazzino > .col.input_cont > div input,
.row_magazzino > .col.input_cont > div select{
    width: 100%;
    min-width: unset;
}
.row.riga-form-account.row_consegna > .col:first-child,
.row.riga-form-account.row_magazzino > .col:first-child {
    width: 24px;
    font-weight: bold;
    height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--colore_grigio-uno);
    color: #ffffff;
    border-radius: 0px 5px 5px 0px;
}
.row_consegna > .col.input_cont > div input.zip_field,
.row_magazzino > .col.input_cont > div input.zip_field {
    width: 100px;
}
.card-indirizzi_salvati .card-body {
    max-height: 390px;
    overflow: hidden auto;
}
.card-indirizzi_salvati .row_consegna .col.input_cont,
.card-indirizzi_salvati .row_magazzino .col.input_cont {
    width: fit-content;
}


/** PAGAMENTI **/
.risultato-pagamento {
    height: 340px;
    padding: 20px;
    display: flex;
    border: 2px solid black;
    align-items: center;
    justify-content: center;
    margin: 20px 0px;
    text-align: center;
    font-size: 1.2em;
}
.risultato-pagamento h1 {
    font-size: 2.2em;
}
.risultato-pagamento p {
    max-width: 400px;
    display: inline-block;
    margin-bottom: 20px;
}

.risultato-pagamento .icona {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 45px;
    font-size: 50px;
}

.errore {
    border-color: red;
    color: red;
}
.successo {
    border-color: green;
    color: green;
}
.annullato {
    border-color: orange;
    color: #ff8000;
}
.risultato-pagamento.successo .icona {
    background-color: green;
    color: white;
}
.risultato-pagamento.errore .icona {
    border: 3px solid red;
}
.risultato-pagamento.annullato .icona {
    border: 5px solid orange;
}
.button.non-trovato {
    display: block;
    margin: 0 auto;
}
.row.comandi-selezione {
    align-items: end;
}


/**
** CONFERMA DELLA REGISTRAZIONE
**/
#conferma_registrazione img {
    max-width: 200px;
    margin:0 auto;
    padding: 20px 0;
}
#conferma_registrazione .fascia-1 {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width:800px;
    width:100%;
    height:auto;
    text-align:center;
    padding:30px;
    margin:0 auto;
    background-color: rgba(255,255,255,0.76);
}
#conferma_registrazione .fascia-1 h3 {
    font-size: 18px;
    padding: 0;
    margin: 10px;
    max-width: 800px;
}
#conferma_registrazione .fascia-1 h2 {
    font-size: 25px;
}
#conferma_registrazione .button.reindirizza{
    width: 300px;
    background: #69c0ac;
    font-family: revert;
    font-weight: 400;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
    text-transform: uppercase;
    font-size: 20px;
}
#conferma_registrazione .whatsapp{
    width: 80px;
    padding: 0;
    display: block;
    margin-top: 10px;
}

.nscart-button .fa.fa-cart-shopping {
    color: var(--colore_blu-tre);
}



.foglio-lista-wrapper {
    width: 100%;
    overflow: auto hidden;
}
.foglio-lista-wrapper foglio {
    min-width: 800px;
}

p.term-cond-link {
    position: absolute;
    bottom: 5px;
    left: 5px;
    display: block;
    text-align: center;
    width: 100%;
}

/* PREPARAZIONE CERTIFICATI */
form.preparazione-certificati {
    display: flex;
    flex-direction: column;
    padding: 30px;
    gap: 40px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ddt-per-richiesta {
    display: block;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    margin-bottom: 20px;
}

.preparazione-certificati .form-part {
    width: 100%;
    max-width: 900px;
    display: block;
}
.preparazione-certificati .form-part.zona-prodotti {
    max-width: unset;
}
.form-part.zona-ddt .row .col:first-child {
    width: 46%;
    padding: 20px;
    max-height: 300px;
    transition: all 1.66s ease;
}
.form-part.zona-ddt .row .col:first-child * {
    opacity: 1.0;
    transition: opacity 0.64s ease;
}
.form-part.zona-ddt .row .col:last-child {
    width: 54%;
    transition: all 1.66s ease;
}
.form-part.zona-ddt.uploading .row {
    gap: 0px;
}
.form-part.zona-ddt.uploading .row .col:first-child {
    width: 0%;
    max-height: 0px;
    padding: 0;
}
.form-part.zona-ddt.uploading .row .col:first-child * {
    opacity: 0.0;
}
.form-part.zona-ddt.uploading .row .col:last-child {
    width: 100%;
}
.zona-destinatario .dati-destinatario {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px 0px;
}
.form-part .attenzione {
    margin-top: 30px;
}
.form-part .attenzione  h4 {
    font-size: 1.4em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.form-part .attenzione p {
    font-style: italic;
}
.form-part .attenzione i.fa {
    font-size: 25px;
    color: var(--colore_arancio);
}
.form-part.zona-destinatario .attenzione {
    text-align: center;
}
.form-part.zona-destinatario .attenzione h4 {
    justify-content: center;
}
.form-part .bottom-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.form-part .etichetta {
    background-color: var(--colore_blu-nove);
    color: var(--colore_blu-quattro);
    font-weight: 600;
    border: 2px solid var(--colore_blu-cinque);
    width: fit-content;
    padding: 5px;
    display: inline-flex;
    gap: 5px;
    border-radius: 5px;
    font-size: 12px;
    align-items: center;
    margin-left: 20px;
}
.form-part .etichetta i {
    font-size: 16px;
}
.preparazione-certificati input {
    min-width: unset
}

.preparazione-certificati input.alt {
    border-radius: 0px;
    width: 100%;
    border-bottom: 3px solid var(--colore_blu-cinque);
}

.preparazione-certificati .uploading-zone .dropzone {
    height: 200px;
}
.form-part.zona-ddt input.codice-ddt {
    margin-top: 30px;
}

.preparazione-certificati .form-part .button {
    display: block;
    margin: 0;
}
.preparazione-certificati .form-part .button.prosegui {
    width: 100%;
    max-width: 400px;
    font-size: 1.29em;
    margin: 0px;
}

.form-part.zona-prodotti .row .col:first-child {
    width: 70%;
}
.form-part.zona-prodotti .row .col:last-child {
    width: 30%;
}
.form-part.zona-prodotti table {
    table-layout: fixed;
    margin-top: 20px;
}
.form-part.zona-prodotti .magazzino h5,
.form-part.zona-prodotti table thead {
    background-color: var(--colore_blu-uno);
    color: var(--colore_bianco);
    text-align: center;
    margin: 0;
}
.form-part.zona-prodotti table td {
    padding: 4px;
}
.form-part.zona-prodotti table td input {
    width: 100%;
    padding: 8px;
    text-align: center;
}

.form-part.zona-prodotti .button.aggiungi-prodotto {
    background-color: var(--colore_blu-uno);
}
.form-part.zona-prodotti table tbody tr:last-child td {
    border: none;
}
.form-part.zona-prodotti .dati-generali table {
    max-width: 700px;
}
.form-part.zona-prodotti .magazzino {
    table-layout: fixed;
    margin-top: 20px;
}
.form-part.zona-prodotti .non-compatibile {
    color: var(--colore_rosso);
    margin-top: 20px;
}
.form-part.zona-prodotti .non-compatibile i.fa {
    color: var(--colore_arancio);
    font-size: 22px;
    margin-right: 5px;
}
.form-part.zona-prodotti .magazzino ul {
    display: block;
    max-height: 250px;
    overflow: hidden auto;
}
.magazzino ul li i.fa {
    font-size: 20px;
    color: var(--colore_verde);
    overflow: hidden;
    max-width: 0px;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.magazzino ul li.active i.fa {
    max-width: unset;
    opacity: 1.0;
}
.form-part.zona-prodotti .magazzino ul li {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.form-part.zona-prodotti .magazzino ul li .button {
    padding: 6px 12px;
    font-size: 12px;
}
.form-part.zona-prodotti .magazzino ul li span {
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-part.zona-prodotti .magazzino ul li:nth-child(even) {
    background-color: #f2f8fb;
    background-color: #e4f1f987;
}
.form-part.zona-prodotti .magazzino ul li:hover {
    background-color: var(--colore_blu-nove);
}
.form-part.zona-prodotti .magazzino ul li.active {
    background-color: var(--colore_blu-sei);
    gap: 10px;
    font-weight: 500;
}
.form-part.zona-prodotti .magazzino ul li.active .button {
    display: none;
}
.form-part.zona-prodotti .magazzino.selected ul li:not(.active) {
    display: none;
}

.preparazione-certificati .form-part {
    display: none;
}
.preparazione-certificati[fase="1"] .form-part.zona-ddt {
    display: block;
}
.preparazione-certificati[fase="2"] .form-part.zona-prodotti {
    display: block;
}
.preparazione-certificati[fase="3"] .form-part.zona-destinatario {
    display: block;
}
.dati-dei-prodotti tr th:last-child,
.dati-dei-prodotti tr td:last-child {
    width: 60px;
}
.dati-dei-prodotti .button.delete {
    background-color: var(--colore_rosso);
    padding: 5px;
    width: 30px;
}
.dati-dei-prodotti .button.delete[disabled] {
    background-color: var(--colore_grigio);
    color: white;
    opacity: 0.6;
}


/****
**** LOOP DEI CERTIFICATI
****/
.certificates-container .btn-small {
    padding: 6px 12px;
    background-color: var(--colore_blu-quattro);
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.certificates-container .btn-small:hover {
    background-color: #0ea5e9;
}
.certificates-container .actions,
.certificates-container .actions .actions-left,
.certificates-container .actions .actions-right {
    display: flex;
    margin-bottom: 5px;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.certificates-container .actions .actions-left {
    width: calc(75% - 10px);
}
.certificates-container .actions .actions-right {
    width: 25%;
    justify-content: flex-end;
}

.certificates-container .actions .button {
    margin: unset;
    padding: 8px 15px 8px 15px;
}
.certificati-disponibili .button.vedi-disponibili,
.certificates-container .actions .button.crea-dati {
    background-color: var(--colore_grigio-sette);
    color: var(--colore_grigio);
}



.certificates-container .actions .button.crea-dati:hover {
    background-color: var(--colore_grigio-otto);
}

.certificates-container .table-wrapper table tr td ul {
    max-height: 70px;
    overflow-y: auto;
    display: list-item;
} 
    
.versione-acciaieria .certificati-trasferiti .table-wrapper,
.table-wrapper.certificati-inviati,
.table-wrapper.certificati-ricevuti {
    max-height: calc(100vh - 360px);
}

.certificati-disponibili td.work-certificate {
    width: 250px;
}
.certificates-container .btn-small.elimina {
    background-color: var(--colore_rosso);
}

/****
**** ANTEPRIMA TRAFERIMENTO CERTIFICATO
****/


/**
** DOCUMENTO DDT
**/
.documento-ddt {
    padding: 30px;
    max-width: 1280px;
    background-color: white;
    border: 2px solid var(--colore_grigio-quattro)
}
.documento-ddt input[type="text"],
.documento-ddt input[type="date"],
.documento-ddt textarea {
    border: none;
    background: none;
    min-width: unset;
}
.documento-ddt select {
    min-width: unset;
}
.documento-ddt .ddt-a-mezzo {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}
.documento-ddt .inputs-container {
    display: flex;
    flex-direction: column;
}
.documento-ddt .inputs-container input {
    text-align: left;
}
.documento-ddt h3,
.documento-ddt h4,
.documento-ddt h2 {
    margin: 0;
    padding: 0;
}
.documento-ddt h6 {
    font-size: 12px;
}
.documento-ddt table tr td input {
    width: 100%;
}
.ddt-row {
    display: flex;
    border-top: 1px solid #e1e2e9;
}
.documento-ddt .ddt-row:first-child {
    border: none;
}
.ddt-row .ddt-col:first-child {
    border-right: 1px solid #e1e2e9;
}
.ddt-row.fissa {
    height: 200px;
}
.ddt-row .ddt-col {
    padding: 5px;
    width: 50%;
}
.ddt-row .ddt-col li {
    height: 40px;
    border-bottom: 1px solid #e2e3e9;
    display: flex;
    align-items: end;
}
.ddt-row .ddt-col.cessionario li {
    width: calc(100% - 20px);
}
.ddt-row .ddt-col li:last-child {
    border: unset;
}
.ddt-col li.indirizzo input {
    width: 100%;
    text-align: left;
}
.ddt-col li.luogo input {
    width: calc(100% - 200px);
    text-align: left;
}
.ddt-col li.luogo input:first-child {
    width: 100px;
}
.ddt-col li.luogo input:last-child {
    width: 100px;
}
table.corpo-ddt {
    position: relative;
    margin-top: 15px;
}
table.corpo-ddt thead tr th:first-child {
    width: 200px;
}
table.corpo-ddt tbody tr td:first-child select {
    max-width: 65px;
}
table.corpo-ddt tbody tr td:first-child input {
    max-width: calc(100% - 65px);
}
.documento-ddt table thead tr {
    background-color: var(--colore_blu-uno);
    color: #ffffff;
    font-weight: 800;
}
table.corpo-ddt tbody tr {
    height: 40px;
    border-bottom: 1px solid #2e366b;
}
table.corpo-ddt tbody tr:last-child {
    border: none;
}
table.corpo-ddt tbody tr:last-child {
    border: none;
}
table.corpo-ddt tbody tr:last-child td {
    border: none;
}
.documenti-ddt-table .mancante-piva {
    width: 100%;
    max-width: 280px;
    margin-top: 10px;
}
.documenti-ddt-table .mancante-piva h4 {
    margin: 0;
}
.documenti-ddt-table .mancante-piva h4 i.fa {
    color: var(--colore_arancio);
    font-size: 18px;
}
.documenti-ddt-table .mancante-piva p {
    font-size: 12px;
    margin: 0;
}
.documenti-ddt-table .mancante-piva > span {
    display: flex;
    margin-top: 5px;
}
.documenti-ddt-table .mancante-piva input {
    padding: 5px;
    min-width: unset;
    width: calc(100% - 90px);
    border-radius: 5px 0px 0px 5px;
}
.documenti-ddt-table .mancante-piva .button {
    padding: 5px;
    width: 90px;
    border-radius: 0px 5px 5px 0px;
}

/****
**** PAGINE DELLE CERTIFICAZIONI NS 
****/
.certificazioni .ns-card .row > .col {
    display: block;
}
.certificazioni form fieldset {
    text-align: left;
    padding: 5px 0px;
}
.certificazioni form .button {
    margin-top: 5px;
}
.certificazioni .ns-card > .row {
    padding: 10px 5px;
}
.certificazioni .ns-card .row > .col:first-child {
    border-right: 1px solid var(--colore_grigio-sei);
}
.certificazioni .cert-search-bar input {
    min-width: unset;
    font-size: 13px;
    padding: 5px 6px;
}
.certificato-ns {
    width: 100%;
    background-color: var(--colore_bianco);
    padding: 0px 10px;
    padding-bottom: 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.25);
}
.certificato-ns .top {
    position: relative;
    z-index: 1;
    height: 70px;
}
.certificato-ns .top h3 {
    font-size: 2.3em;
    display: block;
    position: relative;
    top: 15px;
    text-align: center;
}
.certificato-ns .top .icona {
    width: 33%;
    max-width: 50px;
    display: block;
    position: absolute;
    right: 0;
    top: 10px;
    opacity: 0.9;
}

.button.trasferisci-afp {
    background:  linear-gradient(45deg, #2c6691  0%, #7da9c5 47%, #4583a1  100%);
    text-shadow: 0px 0px 3px #000;
    box-shadow:  inset 0px 0px 12px 2px rgb(46, 75, 111, 0.4), 0px 0px 2px 0px rgb(46, 75, 111, 0.45);
    border:      1px solid #7799b3;
    display:     inline-flex;
    gap:         10px;
}
.button.trasferisci-afp:hover {
    text-shadow: unset;
}
table.distinta th, table.distinta td {
    border-color: #575d5d;
}
.filtro-geo-cover .filtro-scomparsa {
    left: unset;
}

.certificati-table td span.status {
    display: block;
    width: fit-content;
    height: 50px;
    float: left;
}

.certificati-table tr td:first-child {
    width: 100px;
}
.certificati-table .nome_cert {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.certificati-table .icona {
    width: 20px;
}

.magazzino-certificati {
    position: relative;
    max-height: 400px;
    overflow: hidden auto;
}
.magazzino-certificati table thead {
    position: sticky;
    top: 0px;
}

.magazzino-certificati table thead th{
    border-top: 1px solid var(--colore_grigio-due);
    border-bottom: 1px solid var(--colore_grigio-due);
}
.magazzino-certificati table tr {
    border-top: 1px solid var(--colore_grigio-due);
    border-bottom: 1px solid var(--colore_grigio-due);
}
.magazzino-certificati table thead tr {
    background-color: var(--colore_grigio-sette);
}
.magazzino-certificati table tr th,
.magazzino-certificati table tr td {
    border-left: 1px solid var(--colore_grigio-due);
    border-right: 1px solid var(--colore_grigio-due);
}
.magazzino-certificati table tr th {
    font-weight: 600;
}
.magazzino-certificati.editabile tbody tr:hover {
    background-color: #98dbcb;
    cursor: pointer;
}
.certificato-ns .middle {
    text-align: center;
    padding-top: 5px;
    margin-bottom: 15px;
}
.certificato-ns.ricevuto .middle p:nth-child(2) {
    margin-bottom: 10px;
}
.certificato-ns .middle h6 {
    margin: 0;
    line-height: 1;
    margin-bottom: 5px;
}
.certificato-ns .middle h3 {
    margin: 0;
    line-height: 1;
    font-size: 1.32em;
    margin-bottom: 10px;
}
.certificato-ns .bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.certificato-ns .button {
    border-radius: 25px;
    padding: 4px 15px;
}
.certificazioni .ns-card .button.green,
.documenti-ddt .ns-card .button.green {
    font-size: 1.12em;
    padding: 6px 18px;
    margin-top: 0px;
}
.certificazioni .ns-card .card-head .button.green,
.documenti-ddt .ns-card .card-head .button.green{
    display: block;
    float: right;
    font-size: 18px;
    top: -6px;
    margin: 0;
    margin-left: 5px;
}
.documenti-ddt .ns-card .card-head .button.green {
    background-color: var(--colore_blu-due);
}
.certificazioni .ns-card .card-head .button.green.crea-dati {
    background-color: #6f7d7d;
}


.certificazioni .cert-search-bar {
    padding: 10px 0px;
    display: flex;
    gap: 0px;
    align-items: flex-end;
    padding-top: 0px;
}
.certificazioni .cert-search-bar > div {
    background-color: var(--colore_blu-dieci);
    border-radius: 0px;
    border: 1px solid var(--colore_blu-nove);
    border-right: none;
    overflow: hidden;
    width: 40%;
}
.certificazioni .cert-search-bar > div:first-child {
    border-radius: 5px 0px 0px 5px;
}
.certificazioni .cert-search-bar > div:last-child {
    border-radius: 0px 5px 5px 0px;
    border-right: 1px solid var(--colore_blu-nove);
}
.cert-search-bar h6 {
    margin: 0;
    font-size: 12px;
    padding: 2px 5px;
    text-transform: lowercase;
    color: var(--colore_blu-uno);
}

.certificazioni .cert-search-bar > div .ranges {
    background-color: #ffff;
    display: flex;
    align-items: center;
}
.certificazioni .cert-search-bar > div .ranges > span {
    font-weight: 500;
    color: var(--colore_nero);
}
.certificazioni .cert-search-bar input {
    border: none;
    border-radius: unset;
    width: 100%;
}
.certificazioni .cert-search-bar input[type="date"]{
    font-size: 12px;
    padding: 3px;
}
.cert-search-bar .ranges span {
    font-size: 12px;
    text-transform: lowercase;
}
.cert-search-bar .ranges span:first-child {
    padding-left: 5px;
}

.certificati-in-trasferimento .button#bulk-transfer-btn,
.certificati-in-trasferimento .button#btn-select-all,
.certificati-in-trasferimento .table-wrapper table tr th:first-child,
.certificati-in-trasferimento .table-wrapper table tr td:first-child {
    display: none;
}


/**
* EMISSIONE CERTIFICATI
**/
.card-body .row.info-emissione-afp {
    align-items: center;
    border:      none;
    margin-top: 15px;
}
.card-body .row.info-emissione-afp .user h4{
    text-transform: uppercase;
}
.info-emissione-afp table td {
    text-align: left;
    padding:    3px;
}
.info-emissione-afp table td:first-child {
    padding-left: 0px;
}
.info-emissione-afp .user {
    padding:   20px;
    width:     100%;
    max-width: 350px;
    border:    2px solid var(--colore_grigio-cinque);
}
.certificati-conferma .button.afp {
    display:       flex;
    margin-bottom: 20px;
    max-width: 250px;
    margin: auto;
    font-size: 1.4em;
    margin-bottom: 30px;
}
.certificati-conferma .titolo-trasferimento {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.certificati-conferma .button.afp .icona.img_afp {
    width: 40px;
}
.barra-trasferimento {
    display:         flex;
    justify-content: space-between;
    width:           70%;
    padding-right:   3%;
    align-items:     center;
    padding:         40px 0px;
    margin:          auto;
    margin-bottom: 10px;
}

.long-arrow-right {
    position:         relative;
    background-color: var(--colore_grigio-quattro);
    display:          block;
    height:           3px;
    width:            145px;
    left:             -3%;
    top:              0;
}
.long-arrow-right::after {
    display:     block;
    content:     "";
    margin:      10px 0px;
    width:       14px;
    height:      14px;
    position:    absolute;
    right:       0px;
    top:         -15px;
    border-top:  2px solid var(--colore_grigio-quattro);
    border-left: 2px solid var(--colore_grigio-quattro);
    transform:   rotate(135deg);
}

/* -- CREAZIONE CERTIFICATI -- */
.nuovo-certificato > .row {
    gap: 20px;
}
form.nuovo-certificato fieldset {
    text-align: left;
    margin: 5px 0px;
}
form.nuovo-certificato input[type="submit"] {
    display: block;
    margin:  0 auto;
}
form.nuovo-certificato fieldset select,
form.nuovo-certificato fieldset input {
    min-width: unset;
    width:     100%;
}
form.nuovo-certificato fieldset.chili span,
form.nuovo-certificato fieldset.token span,
form.nuovo-certificato fieldset.tonnellate span {
    width:   60px;
    display: inline-block;
}
.nuovo-certificato > .row .col:first-child {
    width: 30%;
}
.nuovo-certificato > .row .col:last-child {
    width: 70%;
}
.certificazioni .certificato-preview .certificato-info {
    opacity: 0;
}

/* -- SPECS -- */
.specifiche_certificato table tr {
    border-top:    2px solid black;
    border-bottom: 2px solid black;
}
.specifiche_certificato table td,
.specifiche_certificato table th {
    border-left:  2px solid black;
    border-right: 2px solid black;
}
.specifiche_certificato .descrizione_prodotto,
.specifiche_certificato .definizione_materiale,
.specifiche_certificato .specifiche_colata,
.specifiche_certificato .specifiche_chimiche {
    margin-top: 15px;
}
.specifiche_certificato textarea,
.specifiche_certificato select,
.specifiche_certificato input {
    width:         100%;
    min-width:     unset;
    border-radius: 0px;
}
.specifiche_certificato textarea {
    height:   60px;
    resize:   none;
    overflow: hidden;
}
.specifiche_certificato table tr {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}
.specifiche_certificato table td,
.specifiche_certificato table th {
    border-left: 2px solid black;
    border-right: 2px solid black;
}
.specifiche_certificato .specifiche_colata,
.specifiche_certificato .specifiche_chimiche {
    margin-top: 15px;
}
.specifiche_certificato select,
.specifiche_certificato input {
    width:  100%;
    min-width: unset;
    border-radius: 0px;
}
.specifiche_certificato table td p {
    font-size: 14px;
    height: 40px;
    display: block;
}

/* -- EMISSIONE CERTIFICATO -- */
.emetti_certificato .ns-card .row > .col {
    display: block;
}
form.emetti_certificato fieldset {
    text-align: left;
    padding: 5px 0px;
}
form.emetti_certificato .button.emetti-ora {
    display: block;
    margin: 20px auto;
    margin-top: 0px;
}
.emetti_certificato .ns-card .card-body > .row {
    padding: 10px 5px;
    border: unset;
    margin: 0px;
}
.emetti_certificato .ns-card .row > .col:first-child {
    border-right: 1px solid var(--colore_grigio-sei);
}
.emissione-kg-certificato fieldset {
    text-align: left;
    margin: 5px 0px;
}
.emissione-kg-certificato fieldset.chili span,
.emissione-kg-certificato fieldset.token span,
.emissione-kg-certificato fieldset.tonnellate span,
.emissione-riferimento-ordine fieldset span,
.emissione-specifiche-meccaniche fieldset span {
    width: 60px;
    display: inline-block;
}
.emissione-riferimento-ordine fieldset span{
    width: 120px;
}
.emissione-specifiche-meccaniche fieldset span{
    width: 180px;
}
.emissione-dati-cliente fieldset textarea[name="descrizione_prodotto"]{
    width: 96%;
    resize: none;
}
.emissione-dati-cliente fieldset#descrizione_prodotto{
    display:flex;
    gap: 5px;
}

.emissione-dati-cliente fieldset#descrizione_prodotto div{
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.emissione-dati-cliente fieldset#descrizione_prodotto input{
    width: 100px;
    min-width: unset;
}
.emissione-specifiche-meccaniche, .emissione-riferimento-ordine {
    border-left: 1px solid var(--colore_grigio-sei);
}

/*------ Contatti -------*/
.ricerca_contatto{
    margin: 9px;
}
.ricerca_contatto input#ricerca_contatto {
    border-radius: 5px;
    width: 100%;
    max-width: 580px;
} 
.row_consegna .rimuovi_consegna,
.row_magazzino .rimuovi_magazzino {
    background-color: var(--colore_rosso);
    color: #ffffff;
    border-radius: 50%;
    padding: 0px;
    width: 18px;
    height: 18px;
    font-size: 11px;
    opacity: 0.72;
    margin: 0;
}
.row_consegna .rimuovi_consegna:hover,
.row_magazzino .rimuovi_magazzino:hover {
    opacity: 1;
}


/**
* TABELLA CONTATTI
*/
.contatti-table-wrap table th {
    text-align: left;
    padding: 2px 5px;
}
.contatti-table-wrap tbody tr {
    background-color: var(--colore_bianco);
}
.contatti-table-wrap tbody tr:nth-child(even) {
    background-color: var(--colore_grigio-dieci);
}
.contatti-table-wrap tbody tr:hover {
    background-color: var(--colore_grigio-otto);
}
.contatti-table-wrap table td {
    padding: 5px;
    text-align: left;
    place-items: start;
}
.contatti-table-wrap table tr td:first-child {
    width: 20px;
}
.contatti-table-wrap span.label {
    width: 6px;
    height: 28px;
    background-color: var(--colore_grigio-cinque);
    display: block;
    transition: background 0.68s ease;
}
.contatti-table-wrap tbody tr:hover span.label {
    background-color: var(--colore_blu-quattro);
}
.contatti-table-wrap a.act {
    width: 100%;
    max-width: 250px;
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 3px;
}

.contatti-table-wrap a.act i {
    color: var(--colore_grigio-quattro);
}
.contatti-table-wrap a.act:hover {
    background-color: var(--colore_grigio-sette);
}
.contatti-table-wrap a.act:hover i {
    color: var(--colore_grigio-uno);
} 

/* filtri dei contatti */

.filtri-contatti .row  {
    gap: 20px
}
.filtri-contatti .row .col.ricerca-libera {
    width: 30%;
}
.filtri-contatti .row .col.inputs-col {
    width: 70%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}


.filtri-contatti {
    padding: 10px;
    margin-bottom: 20px;
    background-color: var(--colore_grigio-dieci);
}
.filtri-contatti fieldset .search {
    background-color: var(--colore_bianco);
    border: var(--spessore_bordi) solid var(--colore_grigio-otto);
    padding: 0px 5px;
    display: flex;
    gap: 5px;
    align-items: center;
    padding-left: 10px;
}
.filtri-contatti fieldset .search input {
    border: unset;
}
.filtri-contatti fieldset .search i.fa {
    color: var(--colore_grigio-sei);
}
.filtri-contatti fieldset .search:hover i.fa {
    color: var(--colore_grigio-due);
}
.filtri-contatti fieldset input,
.filtri-contatti fieldset select {
    width: 100%;
}
.filtri-contatti fieldset label {
    padding: 2px;
    padding-top: 5px;
    display: block;
    font-weight: 350;
}
.filtri-contatti .inputs-col fieldset select,
.filtri-contatti .inputs-col fieldset input {
    padding: 8px;
}

/***
VISUALIZZAZIONE CERTFICATO
.detentore-certificato {
    font-size: 1.42em;
    text-align: center;
}
.detentore-certificato p {
    margin-bottom: 15px;
}
.detentore-certificato h4 {
    margin: 0;
}

.visualizza_certificato > .validita {
    padding-bottom: 30px;
    border-bottom: 2px solid var(--colore_grigio-sei);
    overflow: hidden;
}
.visualizza_certificato .validita-certificato{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.visualizza_certificato .validita-certificato .icone {
    justify-content: center;
    gap: 15px;
    align-items: center;
    margin: 30px 20px;
}
.visualizza_certificato .validita .img_afp {
    width: 110px;
    max-width: 100%;
}
.validita-certificato i.fa {
    font-size: 180px;
    color: var(--colore_blu-quattro);
    margin: 5px 0px;
}
.validita-certificato.non-valido i.fa {
    color: var(--colore_error);
}
.visualizza_certificato .row.dati-certificato{
    flex-direction: column;
}
.visualizza_certificato .timeline::before{
    width: 3px;
    height: calc(100% - 25px);
    position: absolute;
    left: 11px;
    top: 5px;
    background-color: var(--colore_grigio-quattro);
    content: "";
    z-index: -1;
}
.visualizza_certificato .timeline {
    position: relative;
}
.visualizza_certificato .dati-certificato .row.utente {
    margin-left: 3%;
}
.visualizza_certificato .dati-certificato h4 {
    margin: 0;
    padding-left: 10px;
}
.visualizza_certificato .dati-certificato .row.dati-esplicativi {
    align-items: center;
    margin-bottom: 10px;
}
.visualizza_certificato .dati-certificato .row.dati-esplicativi i.fa {
    font-size: 25px;
    color: var(--colore_blu-quattro);
    margin: 5px 0px;
}
.visualizza_certificato .dati-certificato .row.dati-esplicativi .col.dati-per-utente {
    width: 100%;
}

.visualizza_certificato .funzioni-certificato{
    background-color: var(--colore_blu-quattro);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 5px 5px 0px 0px;
}
.mobile .colonna-timeline {
    padding-top: 40px;
}
.mobile .visualizza_certificato .dati-certificato .row.dati-esplicativi {
    display: flex;
}
***/

.anteprima-trasferimento .certificato-afp {
    position: relative;
}

/***
** DASH FORNITORO ****/
.prontuario-card .card-body {
    padding: 10px;
    padding-top: 0px;
}
.prontuario-card .card-body  h4 {
    margin-top: 10px;
    margin-bottom: 2px;
}
.prontuario-card ul li {
    display: flex;
    gap: 5px;
    align-items: center;
    border-radius: 5px;
    padding: 5px;
    color: var(--colore_nero);
    border: 1px solid var(--colore_grigio-otto);
    cursor: pointer;
    font-size: 1.16em;
}
.prontuario-card li .mini-thumb {
    width: 40px;
    height: 40px;
    padding: 3px;
    border: 2px solid var(--colore_grigio-sette);
}
.prontuario-card .mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0.8;
}
.prontuario-card ul li.active {
    font-weight: 700;
    font-size: 1.18em;
}
.prontuario-card li.active .mini-thumb {
    border-color: var(--colore_blu-cinque);
    padding: 5px;
}
.prontuario-card li.active .mini-thumb img {
    opacity: 1;
}
.prontuario-card ul li:hover {
    background-color: var(--colore_grigio-nove);
    font-weight: 700;
}
.prontuario-card ul li input {
    margin: 0;
    top: 0px;
    pointer-events: none;
}
.scelta-materiali ul,
.scelta-categorie ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;  
    gap: 5px;              
}

/***
** CATALOGO CLIENTE ****/
.card-catalogo .card-body {
    padding: 10px;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.card-catalogo.scelta-materiali .card-body  {
    display: block;
    grid-template-columns: unset;
}
.card-catalogo.scelta-materiali .bottoni-prodotto#bottoni-mat-wrap {
    flex-wrap: nowrap;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
.spazio-calcoli .labeled-input label {
    font-size: 12px;
}
.card-catalogo.scelta-materiali nsimagebox .image_box-text:nth-child(2) {
    height: unset;
}
.card-catalogo.scelta-materiali figure img {
    max-height: unset;
}
.card-catalogo nsimagebox {
    background-color: var(--colore_grigio-sei);
    max-width: unset;
    width: 101%;
    cursor: pointer;
    text-align: center;
    color: var(--colore_nero);
}
.card-catalogo nsimagebox .button {
    margin-top: 5px;
    padding: 6px;
}
.card-catalogo nsimagebox .image_box-text:nth-child(2){
    height: 45px;
}
.card-catalogo figure img{
    max-height: 80px;
    margin: 0 auto;
}

.richiesta_ns .avanzamento-trattativa .lista-info li {
    width: 50%;
}
.richiesta_ns .avanzamento-trattativa .lista-info li progress {
    max-width: 200px;
}


/*  ------------------- CSS THANKYOU PAGE --------------------- */
#conferma_registrazione {
    width:100%;
    height: 100vh;
    display: flex;
    box-shadow: inset 0px 0px 120px 20px #252933b5;
    justify-content: center;
    align-items: center;
}
#conferma_registrazione img {
    max-width: 200px;
    margin:0 auto;
    padding: 20px 0;
}
#conferma_registrazione .fascia-ringraziamenti {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width:800px;
    width:100%;
    height:auto;
    text-align:center;
    padding:30px;
    margin:0 auto;
    background-color: rgba(255,255,255,0.91);
    box-shadow: 0px 0px 22px 0px #000000a6;
    border-radius: 25px;
}
#conferma_registrazione .fascia-ringraziamenti h3 {
    font-size: 18px;
    padding: 0;
    margin: 10px;
    max-width: 800px;
}
#conferma_registrazione .fascia-ringraziamenti h3:last-of-type {
    font-size: 14px;
    max-width: 600px;
    margin-top: 20px;
    font-style: italic;
}
#conferma_registrazione .fascia-ringraziamenti h2 {
    font-size: 25px;
    color: var(--colore_blu-quattro);
}
.archivio-richieste{
    display: flex;
    gap: 15px;
    align-items: center;
    margin: 20px 0px;
    background-color: var(--colore_grigio-nove);
    padding: 5px 10px;
}
.archivio-richieste h3,
.archivio-richieste .button{
    margin: 0;
}
.layout-richieste {
    padding: 0px 10px;
    padding-left: 20px;
}
.layout-richieste > q {
    left: 22px;
    top: 30vh;
}
.layout-richieste[aria-open="true"] > q {
    left: 255px;
}
.pagination-bottom {
    position: fixed;
    bottom: 30px;
    padding-bottom: 40px;
    z-index: 2;
}
/*  ------------------- CSS LOADER SPAZIALE --------------------- */

.space-container {
    position: relative;
    width: 100%;
    height: 400px;
    background: radial-gradient(ellipse at center, #a1bbeb  0%, #fafdfd  70%);
    perspective: 1000px;
    overflow: hidden;
}

.space-container .stars {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.space-container .star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: starMove 3s linear infinite;
}

.space-container .stars .star:nth-child(odd) {
    background: #1c3ae4;
    box-shadow: 0 0 4px #64ffda;
}

.space-container .stars .star:nth-child(even) {
    background: #ffffff;
    box-shadow: 0 0 3px #ffffff;
}

.space-container .stars .star:nth-child(3n) {
    background: #0b1a72;
    box-shadow: 0 0 4px #750808;
}

.space-container .loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0d507c;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    z-index: 100;
    text-shadow: 0 0 20px #64a7ff;
    animation: starTextPulse 2s ease-in-out infinite alternate;
}

.space-container .loading-subtitle {
    margin-top: 20px;
    font-size: 1rem;
    color: #121224;
    opacity: 0.7;
    animation: subtitleFade 3s ease-in-out infinite;
}

.space-container .acceleration-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
}

.space-container .ring {
    position: absolute;
    border: 2px solid transparent;
    border-radius: 50%;
    animation: ringExpand 2s linear infinite;
}

.acceleration-rings .ring:nth-child(1) {
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(22, 25, 192, 0.3);
    animation-delay: 0s;
}

.acceleration-rings .ring:nth-child(2) {
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(241, 70, 70, 0.2);
    animation-delay: 0.5s;
}

.acceleration-rings .ring:nth-child(3) {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(100, 141, 255, 0.1);
    animation-delay: 1s;
}


/* Effetto particelle aggiuntive */
.space-container .particle {
    position: absolute;
    background: #0a3ecf;
    width: 1px;
    height: 1px;
    animation: particleFloat 4s linear infinite;
}

/*  ------------------- CSS PAGINA DI REGISTRAZIONE --------------------- */

body.signup-page header.testata-portale {
    display: none;
}

body.signup-page .footer.main-footer{
    margin-top: 0px;
}
.signup-page .privacy_policy input {
    top: 1px;
}

.registration-wrapper {
    display: flex;
    height: calc(100vh - 55px);
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

.registration-wrapper .left-panel {
    flex: 1 1 40%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: inset -2px 1px 0 2000px rgb(7 27 45 / 65%);
}  

.registration-wrapper .left-panel h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.registration-wrapper .left-panel p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.registration-wrapper .left-panel .motto {
    font-size: 1.2rem;
    color: var(--colore_blu-sei);
}

.registration-wrapper .left-panel .support-contact {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    color: var(--colore_grigio-cinque);
}

.registration-wrapper .left-panel .support-contact a {
    color: var(--colore_grigio-quattro)
}

.registration-wrapper .left-panel .support-contact img {
    width: 50px;
    height: 50px;
    margin-right: 1rem;
}

.registration-wrapper .right-panel {
    flex: 1 1 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 4rem;
    flex-direction: column;
}

.registration-wrapper button.go-back {
    background-color: var(--colore_blu-sette);
}

.right-panel .right-panel-top {
    width: 66%;
}

.registration-form {
    max-width: 500px;
    width: 100%;
}

.registration-form nsinput.with-ico input {
    padding-left: 35px;
}
.registration-form h1 {
    text-align: start;
    margin-bottom: 1rem;
    margin-top: 1rem;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--colore_blu-uno);
}

.registration-form .field-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.right-panel .registration-form .field-body label{
    color: var(--colore_blu-uno);
    margin-bottom: 0.3rem;
    font-weight: 600;
}

.registration-form select,
.registration-form input[type="text"],
.registration-form input[type="email"],
.registration-form input[type="password"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--colore_grigio-sette);
    border-radius: 6px;
    font-size: 0.95rem;
}

.registration-form .submit-button {
    background-color: var(--colore_blu-quattro);
    color: var(--colore_bianco);
    border: none;
    padding: 0.9rem;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 1.5rem;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 1rem;
}

.registration-form .info-compilazione {
    text-align: center;
    font-size: 0.95rem;
}

.registration-form .privacy_policy {
    margin-top: 0.8rem;
}




/* ----------------------------- CSS MAIN TUTTO LARGO --------------------------*/
.header.barra_ricerca .col-1 {
    display: flex;
    gap: 30px;
    align-items: center;
}
body.certificati.full_page nav {
    display: none;
}
body.full_page main layout {
    width: 100%;
    padding: 0px;
}
body.full_page .home {
    padding: 0px;
}
body.full_page .pagina-portale {
    padding: 10px;
    min-height: calc(100vh - 220px);
    padding-bottom: 40px;
}
body.full_page .pagina-portale .certificazioni {
    margin: 0;
    padding: 15px 10px;
}
body.full_page header.testata-portale {
    height: 150px;
    margin: 0px;
    padding: 20px;
    background: var(--colore_blu-sette);
    border-bottom: 1px solid #3e6193;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
    align-items: self-end;
    background-position: center;
    background-size: cover;
    padding: 0;
    box-shadow: 0px 0px 3px 0px #000000a1;
    filter: contrast(1.09);
    position: relative;
    z-index: 1;
}
body.full_page header.testata-portale h3,
body.full_page header.testata-portale h1 {
    margin: 0;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--colore_grigio-tre);
}
body.full_page header.testata-portale h3.big {
    font-size: 2.2rem;
    color: var(--colore_grigio-cinque);
    letter-spacing:1px; 
}
body.full_page header.testata-portale .area-notifiche h3 {
    color: var(--colore_blu-uno);
}
body.full_page header.testata-portale h1 {
    margin-top: 5px;
    display: flex;
    align-items: center;
    font-size: 1.2em;
    align-items: center;
    line-height: 0;
    color: var(--colore_bianco);
    margin-top: 25px;
    gap: 5px;
}
body.full_page header.testata-portale .col-1 {
    display: flex;
    gap: 20px;
    width: 75%;
    height: 150px;
    align-items: center;
    background-image: linear-gradient(86deg, rgba(87, 142, 209,0.84), rgba(51, 107, 175,0.0) 40%);
}
body.full_page header.testata-portale .col-2 {
    flex-direction: column;
    gap: 30px;
    height: 100%;
    padding: 20px;
}

body.full_page header.testata-portale .col-1 .afp-main-logo img {
    max-height: 40px;
}


.full_page .testata-portale .company-logo {
    width: 30%;
    max-width: 200px;
    height: 100%;
    transition: transform 0.2s ease-in-out;
    display: flex;
    align-items: center;
}
.full_page .testata-portale .company-logo:hover {
    transform: scale(1.03);
}

.full_page .testata-portale .company-logo > a {
    display: block;
    margin: 0 auto;
}

.full_page .testata-portale .logodashboard {
    width: unset;
    min-width: unset;
    height: 100%;
    margin: 0;
    padding: 10px;
}
.full_page .testata-portale .logodashboard img {
    width: auto;
    max-height: unset;
    max-width: unset;
    width: 100%;
    height: 100%;
    padding: 20px;
    object-fit: contain;
}

.badge {
    width: 40px;
    height: 40px;
    font-size: 40px;
    text-align: center;
    line-height: 0;
    position: relative;
    margin-right: 4px;
}
.badge i {
    color: var(--colore_nero);;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 0.68em;
}
.badge span {
    font-size: 0.36em;
    font-weight: 650;
    position: absolute;
    min-width: 1.38em;
    padding: 0.1em 0.2em;
    bottom: 0px;
    right: 0px;
    line-height: 1.1em;
    background-color: var(--colore_bianco);
    border: 1px solid var(--colore_blu-tre);
    border-radius: 5px;
}

.card-richieste ul.voci-menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 10px 0px;
    padding: 10px;
}
.card-richieste ul.voci-menu h3 {
    margin: 0;
    line-height: 1;
    font-size: 1.1em;
}
.card-richieste ul.voci-menu li {
    background-color: var(--colore_grigio-otto);
    border: 1px solid var(--colore_grigio-sei);
    padding: 10px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    gap: 5px;
}
.card-richieste ul.voci-menu li .button {
    width: 60px;
    padding: 8px 5px;
}
.card-richieste ul.voci-menu li .button.acquista {
    width: 85px;
}
.card-richieste ul.voci-menu li h3 {
    width: calc(100% - 100px);
}
.desktop .row.dashboard-layout {
    gap: 5%;
    padding: 0px 5%;
}
.desktop .row.dashboard-layout.acciaieria{
    flex-direction: column;
    gap: 20px;
}
header.testata-portale .col-1 button.go-back i.fa {
    color: var(--colore_bianco);
    margin: 0;
    margin-left: 20px;
}

.mobile .row.dashboard-layout {
    flex-direction: column;
}

.desktop .row.dashboard-layout .accordion .accordion-header {
    background-color: unset;
    border: none;
    cursor: initial;
    padding: 0px;
}
.desktop .row.dashboard-layout .accordion .accordion-content {
    max-height: unset;
    opacity: 1;
    background-color: unset;
    border: none;
    padding: 0px;
    border-radius: 0 0 15px 15px;
}
.desktop .row.dashboard-layout .accordion .accordion-header i.fa-solid {
    display: none;
}
.mobile .row.dashboard-layout h1.heading.center.alt {
    text-align: initial;
    text-transform: initial;
    padding: 0;
    margin: 0;
    font-size: 1.14em;
    font-weight: 700;
}
.mobile .row.dashboard-layout h1.heading.center.alt::before,
.mobile .row.dashboard-layout h1.heading.center.alt::after {
    all: unset;
}

body.full_page header.testata-portale .col-2 .down,
body.full_page header.testata-portale .col-2 .top {
    display: flex;
    gap: 10px;
    justify-content: right;
}
.layout-richieste[aria-open="true"] .pagina-portale {
    padding: 0px 10px;
}

/* UPLOADER WITH DROPZONE */

.uploading-zone .uploader-content {
    width: 100%;
    max-width: 900px;
    padding: 20px;
}
.uploading-zone fieldset {
    width: 100%;
    margin-bottom: 20px;
    text-align: left;
}
.uploading-zone fieldset input {
    min-width: unset;
    width: 100%;
    cursor: default;
}
.uploading-zone i.fa.carica-qui {
    position: absolute;
    font-size: 180px;
    opacity: 0.75;
    display: none;
    color: var(--colore_blu-uno);
    pointer-events: none;
}

.uploading-zone fieldset h4 {
    font-size: 14px;
    line-height: 1;
}

.uploading-zone .dropzone {
    display: flex;
    flex-direction: column;
    height: 300px;
    border: 1px dashed var(--colore_blue);
    background-color: var(--colore_blu-dieci);
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    gap: 10px;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.4s ease, height 1.1s ease;
}
.uploading-zone .dropzone h3 a {
    color: var(--colore_blu-due);
    text-decoration: underline !important;
}
.uploading-zone .dropzone img {
    max-width: 80px;
    margin-bottom: 10px;
    pointer-events: none;
}
.uploading-zone .dropzone p {
    color: var(--colore_grigio-uno);
}

.uploading-zone fieldset.status > div {
    font-weight: 600;
}
.uploading-zone fieldset.status > div {
    display: none;
    gap: 10px;
}
.uploading-zone fieldset.status .non-valido {
    color: var(--colore_error);
}
.uploading-zone fieldset.status .non-caricato {
    color: var(--colore_grigio-due);
}
.uploading-zone fieldset.status .file-valido {
    color: var(--colore_verde);
}

.uploading-zone fieldset.status[status="none"] .non-caricato {
    display: flex;
}
.uploading-zone fieldset.status[status="error"] .non-valido {
    display: flex;
}
.uploading-zone fieldset.status[status="ok"] .file-valido {
    display: flex;
}

.upload-completed .uploading-zone .dropzone {
    height: 20px!important;
    opacity: 0;
}

.is-dragging-file .uploading-zone i.fa.carica-qui {
    display: initial;
}
.is-dragging-file .uploading-zone .dropzone h3,
.is-dragging-file .uploading-zone .dropzone img,
.is-dragging-file .uploading-zone .dropzone p {
    pointer-events: none;
    opacity: 0.22;
}
.is-dragging-file .uploading-zone fieldset,
.is-dragging-file .uploading-zone .uploader-content button {
    opacity: 0.16;
}

.editor-certificati .button.procedi-con-import {
    display: none;
    margin: 0 auto;
}
.editor-certificati[fase="start"] .button.procedi-con-import {
    display: block;
}

/* animato */
@keyframes scrollTrapezio {
    0% {
        left: 30%;
        opacity: 0.14;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        left: 40%;
        opacity: 0.11;
    }
}

@keyframes starMove {
    0% {
        transform: translateZ(-1000px) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateZ(0) scale(1);
        opacity: 0;
    }
}

@keyframes starTextPulse {
    0% {
        text-shadow: 0 0 20px #64ceff;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        text-shadow: 0 0 30px #479ceb, 0 0 40px #4084dd;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes subtitleFade {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

@keyframes ringExpand {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-10px) translateX(var(--drift, 0)) scale(1);
        opacity: 0;
    }
}


@keyframes rotatespinner-spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

@media only screen and (max-width: 2180px) {
    .scelta-materiali ul,
    .scelta-categorie ul {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;  
    }
    .card-catalogo .card-body {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

@media only screen and (max-width: 1980px) {
    .scelta-materiali ul,
    .scelta-categorie ul {
        grid-template-columns: 1fr 1fr 1fr 1fr;  
    }
    .card-catalogo .card-body {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

@media only screen and (max-width: 1680px) {
    .scelta-materiali ul,
    .scelta-categorie ul {
        grid-template-columns: 1fr 1fr 1fr;  
    }
    .card-catalogo .card-body {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}

@media only screen and (max-width: 1480px) {
    .scelta-materiali ul,
    .scelta-categorie ul {
        grid-template-columns: 1fr 1fr;  
    }
    .card-catalogo .card-body {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media only screen and (max-width: 1324px) {
    .menu-navigazione .row.scelta-registrazione {
        flex-direction: column;
        gap: 0px;
    }
    .menu-navigazione .row.scelta-registrazione > a {
        width: 100%;
    }
    .card-catalogo figure img{
        max-height: 60px;
    }
}

@media only screen and (max-width: 1180px) {
    .card-catalogo .card-body {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .emissione-dati-cliente fieldset#descrizione_prodotto{
        flex-direction: column;
        align-items: flex-start;
    }
    .emissione-dati-cliente fieldset#descrizione_prodotto input{
        min-width: 220px;
        width: max-content;
    }
}

@media only screen and (max-width:1024px) {
    section.header-section {
        font-size: 1.41em;
    }
    .legenda-incoterm {
        display: block;
    }
    .legenda-incoterm > div,
    .legenda-incoterm.obblighi > div {
        width: 100%;
    }
    .card-catalogo .card-body {
        grid-template-columns: 1fr 1fr;
    }
    .home-page .header-section .afp-logo{
        max-width: 150px;
        top: 5%;
    }
    .afp-player>header {
        display: none;
    }
    .afp-player>.player-content {
        flex-direction: column-reverse;
    }
    .afp-player .player-sidebar {
        width: 100%;
    }
    .afp-player .player-body {
        width: 100%;
        padding: 15px;
    }
}

@media (max-width: 940px) {
    .separator{
        display: none;
    }
    .full_page .testata-portale .logodashboard img {
        padding: 0px;
    }
    nsinput > div i.fa {
        height: 35px;
    }
}

@media(max-width: 880px) {
    
    body.full_page header.testata-portale {
        height: auto;
    }

}


@media (max-width: 768px) {

    body.full_page header.testata-portale h1 {
        flex-wrap: wrap;
    }
    body.full_page header.testata-portale .col-2 .down,
    body.full_page header.testata-portale .col-2 .top {
        place-items: center;
    }
    header.testata-portale {
        display: block;
    }
    .full_page .testata-portale .logodashboard img {
        padding: 20px;
    }
    body.full_page header.testata-portale .col-1 {
        width: 100%;
        justify-content: space-between;
        padding-right: 20px;
    }
    body.full_page header.testata-portale h3 {
        text-align: right;
    }
    body.full_page header.testata-portale h1 {
        justify-content: end;
    }
    
    body.full_page header.testata-portale .col-2 {
        display: flex;
        background-image: linear-gradient(#6ba3c59c, #6ba3c554);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .registration-wrapper .left-panel,
    .registration-wrapper .right-panel {
        flex: 1 1 100%;
        padding: 7rem;
    }
    .registration-wrapper .left-panel {
        order: 2;
        text-align: center;
    }
    .registration-wrapper .right-panel {
        order: 1;
        text-align: left;
    }
    .registration-wrapper .left-panel .support-contact {
        display: none;
    }
    .registration-wrapper .left-panel h1 {
        font-size: 2.8rem;
    }
    footer.main-footer {
        position: relative;
    }
    .registration-wrapper {
        height: unset;
    }
    .certificates-container .actions {
        flex-direction: column;
    }
    .certificazioni .cert-search-bar{
        flex-direction: column;
        align-items: unset;
        width: 100%;
    }
    .cta-supporto-tecnico {
        flex-direction: column;
        padding: 60px 20px;
        text-align: center;
    }
    .cta-supporto-content h2 {
        font-size: 2rem;
    }
    .cta-supporto-content p {
        font-size: 1rem;
    }
    .cta-button {
        font-size: 1rem;
        padding: 10px 24px;
    }
    .cta-supporto-bg {
        animation: none;
        transform: none;
        background: rgba(0,123,255,0.8);
        width: 100%;
        left: 0;
    }
}

@media only screen and (max-width: 640px) { 
    .visualizza_certificato .validita .icone i.fa,
    .visualizza_certificato .validita .img_afp {
        display: block;
        margin: 0 auto;
    }
    .visualizza_certificato .validita .icone i.fa {
        width: fit-content;
        margin-bottom: 20px;
    }
    
    .row.diventa-utente .col.fai-richiesta,
    .row.diventa-utente .col.diventa-fornitore {
        width: 100%;
    }
    header.testata-portale .col-1 .fa {
        display: none;
    }
    .notifiche {
        padding: 4px 8px;
    }
    .spese_rischi {
        height: 28px;
    }
    .spese_rischi.finale::after {
        border-top: 14px solid transparent;
        border-left: 15px solid #000000;
        border-bottom: 14px solid transparent;
        right: -15px;
    }
    .spese_rischi.small {
        height: 14px;
    }
    .spese_rischi.small.finale::after{
        border-top: 7px solid transparent;
        border-left: 10px solid #000000;
        border-bottom: 7px solid transparent;
        right: -10px;
    }
    .nscart-button {
        padding: 8px 4px;
    }
    .full_page .testata-portale .company-logo {
        width: 40%;
    }
    .testata-portale .account-button {
        padding: 11px 14px;
    }

    .card-indirizzi_salvati .row_consegna,
    .card-indirizzi_salvati .row_magazzino {
        position: relative;
    }
    .row_consegna .col.input_cont .rimuovi_consegna,
    .row_magazzino .col.input_cont .rimuovi_magazzino {
        margin-top: 11px;
        position: absolute;
        top: 0px;
        right: 10px;
    }
    .row.riga-form-account.row_consegna > .col:first-child, 
    .row.riga-form-account.row_magazzino > .col:first-child {
        width: 100%;
    }
    .card-indirizzi_salvati .row_consegna .col.input_cont,
    .card-indirizzi_salvati .row_magazzino .col.input_cont {
        width: 100%;
    }
    .row_consegna > .col.input_cont > div input.zip_field,
    .riga-form-account.row_consegna .col.input_cont > div, 
    .row_magazzino > .col.input_cont > div input.zip_field,
    .riga-form-account.row_magazzino .col.input_cont > div {
        width: 100%;
    }
    .row.diventa-utente .col.fai-richiesta {
        border-right:  0px;
        margin-bottom: 5px;
        padding-right: 0px
    }
    .row.diventa-utente .col.diventa-fornitore {
        border-top: 2px solid var(--colore_grigio-sette);
    }
    section.header-section {
        font-size: 1.31em;
    }
    section.header-section .header-content {
        padding: 3em 2em;
    }
    .call-to-action .action-content {
        font-size: 1.35em;
    }
    .card-catalogo .card-body {
        grid-template-columns: 1fr 1fr 1fr;
    }
    header .account-button p {
        display: none;
    }
    .scelta-materiali ul, .scelta-categorie ul {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width:540px) {
    section.header-section {
        font-size: 1.24em;
        background-size: cover;
    }
    section.header-section .header-content {
        padding: 2em 1em;
    }
    .call-to-action .action-content {
        font-size: 1.15em;
    }
    .spese_rischi p {
        font-size: 9px;
    }
    header .account-button {
        padding: 0px 8px;
    }
    .spese_rischi {
        height: 26px;
    }
    .spese_rischi.finale::after {
        border-top: 13px solid transparent;
        border-left: 14px solid #000000;
        border-bottom: 13px solid transparent;
        right: -14px;
    }
    .spese_rischi.small {
        height: 12px;
    }
    .spese_rischi.small.finale::after {
        border-top: 6px solid transparent;
        border-left: 8px solid #000000;
        border-bottom: 6px solid transparent;
        right: -8px;
    }
    .inco-colonna > span {
        height: 32px;
    }
    .inco-colonna > span.nomenclature {
        height: 60px;
    }
    .full_page .testata-portale .company-logo {
        width: 50%;
    }
    body.full_page header.testata-portale h1 {
        line-height: initial;
    }
}

@media only screen and (max-width:440px) { 
    .inco-colonna > span.nomenclature {
        height: 50px;
    }
    .card-catalogo .card-body {
        grid-template-columns: 1fr 1fr;
    }
    header .account-button {
        padding: 0px 6px;
    }
    header .account-button i.fa {
        font-size: 16px;
    }
}

@media only screen and (max-width:300px) { 
    .call-to-action .action-content {
        font-size: 1.05em;
    }
}