#filigrana .bottone-modale-centrato {
    top: 50%;
    margin-top: -10px;
    height: 20px;
}

#filigrana .ics-margin-negativo {
    margin: -8px;
}

#filigrana .modale-inner-full {
    width: 100%;
    height: 100%;
}

#filigrana #rm{
	height: inherit;
}

.open-modal-link, 
.link-scheda-foglio {
    position: relative;
    display: inline-block;
}

.open-modal-link i, 
.link-scheda-foglio i {
    position: absolute;
    top: 8px;
    left: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
    border-radius: 4px;
    padding: 5px;
    font-size: 16px;

    color: white; 
    /* background: var(--sabbia);  */
}

.open-modal-link:hover i, 
.link-scheda-foglio:hover i {
    opacity: 1;
}

.open-modal-link img, 
.link-scheda-foglio img {
    transition: filter 0.2s ease;
    display: block;
}

.open-modal-link:hover img, 
.link-scheda-foglio:hover img {
    filter: brightness(0.7);
}

/* Il contenitore principale del foglio */
#filigrana .foglio {
    display: flex;
    flex-direction: column; /* Crea le due righe verticali */
    border: 1px solid #ddd;
    margin-bottom: 10px;
    background: #fff;
}


/* La seconda riga (Contenuto) */
#filigrana .fili-row-bottom {
    display: flex; /* Dispone lista e immagini fianco a fianco */
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 10px;
}

/* Regolazioni per la lista e i link nella seconda riga */
#filigrana .fili-row-bottom ul {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0 10px;
}

#filigrana .fili-row-bottom a {
    margin: 0 5px;
}

#filigrana .fili-row-bottom img {
    max-height: 150px; /* Esempio di ridimensionamento */
    width: auto;
}

#filigrana .main-foliations {
    font-weight: normal;
    margin-left: 10px;
    font-size: 0.9em;
    opacity: 0.9;
    display: none;
}

#filigrana #mod_fili ul li {
  text-align: center;
}

@media (max-width: 1800px) {   
    #filigrana .main-foliations {
        display: inline-block;
        margin-left: 5px; /* Spazio standard tra il nome del motivo e la foliazione */
    }

    /* Rimuove i margini automatici impostati a riga 139 che spingono gli elementi l'uno sull'altro */
    #filigrana .motivo span.main-foliations {
        margin-left: 5px;
        margin-right: 0;
    }

    /* Aggiunge un trattino di separazione dinamico prima di MARINONI */
    #filigrana .main-foliations::before {
        content: "- ";
        opacity: 0.7;
    }

    #filigrana .fili-row-bottom ul {
        display: none !important;
    }
}

/* @media (max-width: 1550px) {   
    .ui-datagrid-content  { 
        display: block;
    }
     
    .ui-datagrid-col-1 > div,
    .ui-datagrid-col-2 > div,
    .ui-datagrid-col-3 > div,
    .ui-datagrid-col-4 > div,
    .ui-datagrid-col-5 > div,
    .ui-datagrid-col-6 > div,
    .ui-datagrid-col-7 > div,
    .ui-datagrid-col-8 > div,
    .ui-datagrid-col-9 > div,
    .ui-datagrid-col-10 > div,
    .ui-datagrid-col-11 > div,
    .ui-datagrid-col-12 > div {
        width: 100%;
    }
} */

.motivo {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra il contenuto principale */
    position: relative;     /* Necessario per il posizionamento assoluto del badge */
    padding: 5px 10px;
    min-height: 35px;
}

/* Classe personalizzata per il badge del codice */
.badge-codice {
    position: absolute;
    left: 10px; /* Lo blocca a sinistra */
    margin-right: 0; 
}

/* Assicuriamoci che il testo centrale non sovrapponga il badge se troppo lungo */
.motivo span.main-foliations {
    margin-left: auto;
    margin-right: auto;
}