body {
    font-family: Arial, sans-serif; /* Imposta il font di default per il corpo del documento */
    background-color: #f4f4f4; /* Colore di sfondo della pagina (valore esadecimale) */
    color: #333; /* Colore del testo principale (valore esadecimale) */
    line-height: 1.6; /* Altezza della linea del testo (valore numerico, può essere anche in px, em, ecc.) */
}

/* Contenitore principale */
.container {
    max-width: 1200px; /* Larghezza massima del contenitore (valore in px, può essere anche in %, vw, ecc.) */
    margin: 0 auto; /* Centra il contenitore orizzontalmente (valore: 0 per top/bottom, auto per left/right) */
    padding: 20px; /* Spaziatura interna del contenitore (valore in px, em, ecc.) */
    text-align: center; /* Allinea il testo al centro */
}

header img {
    width: 300px; /* Larghezza dell'immagine nell'header (valore in px, può essere anche in %, vw, ecc.) */
    display: block; /* Imposta l'immagine come blocco (valori: block, inline, inline-block, none, ecc.) */
    margin: 0 auto; /* Centra l'immagine orizzontalmente */
}

.img-preview img {
    max-width: 500px;
    max-height: 500px; /* Limita anche l'altezza */
    width: 100%;
    height: auto;
}

h1, h2 {
    text-align: center; /* Allinea il testo al centro */
    color: #c1fffa; /* Colore del testo (valore esadecimale) */
	background-color: #007bff; /* Colore di sfondo (valore esadecimale) */
}

p {
    font-size: 1em; /* Dimensione del font (valore in em, px, rem, ecc.) */
    line-height: 1.6; /* Altezza della linea del testo (valore numerico) */
    color: #666; /* Colore del testo (valore esadecimale) */
    margin: 10px 0; /* Margine superiore e inferiore (valore in px, em, ecc.) */
}

/* Logo */
.logo {
    margin-bottom: 20px; /* Margine inferiore del logo (valore in px, em, ecc.) */
}

.logo img {
    max-width: 250px; /* Larghezza massima dell'immagine del logo (valore in px, %, ecc.) */
    height: auto; /* Mantiene le proporzioni dell'immagine (valore: auto, px, %, ecc.) */
    display: block; /* Imposta l'immagine come blocco */
    margin: 0 auto; /* Centra l'immagine orizzontalmente */
}

/* Pulsanti di navigazione */
.nav-buttons {
    display: grid; /* Imposta il layout a griglia (valori: grid, inline-grid, ecc.) */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Definisce le colonne della griglia (valore: auto-fit, minmax, 1fr, ecc.) */
    gap: 15px; /* Spazio tra gli elementi della griglia (valore in px, em, ecc.) */
    margin-top: 20px; /* Margine superiore (valore in px, em, ecc.) */
}

.nav-buttons a {
    text-decoration: none; /* Rimuove la sottolineatura del link (valore: none, underline, ecc.) */
    color: white; /* Colore del testo (valore esadecimale) */
    padding: 15px; /* Spaziatura interna del pulsante (valore in px, em, ecc.) */
    border-radius: 10px; /* Arrotonda gli angoli del pulsante (valore in px, em, ecc.) */
    font-size: 16px; /* Dimensione del font (valore in px, em, rem, ecc.) */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animazione al passaggio del mouse (valore: proprietà, durata, timing-function) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombra del pulsante (valore: offset-x, offset-y, blur-radius, colore) */
    display: flex; /* Imposta il layout flessibile (valore: flex, inline-flex, ecc.) */
    align-items: center; /* Allinea gli elementi verticalmente (valore: center, flex-start, flex-end, ecc.) */
    justify-content: center; /* Allinea gli elementi orizzontalmente (valore: center, flex-start, flex-end, ecc.) */
    text-align: center; /* Allinea il testo al centro */
}

.nav-buttons a:hover {
    transform: translateY(-5px); /* Sposta il pulsante verso l'alto al passaggio del mouse (valore in px, em, ecc.) */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Aumenta l'ombra al passaggio del mouse */
}

/* Colori personalizzati per ogni pulsante */
.nav-buttons a:nth-child(1) { background-color: #6C5CE7; } /* Viola */
.nav-buttons a:nth-child(2) { background-color: #00B894; } /* Verde */
.nav-buttons a:nth-child(3) { background-color: #D63031; } /* Rosso scuro */
.nav-buttons a:nth-child(4) { background-color: #E17055; } /* Arancione */
.nav-buttons a:nth-child(5) { background-color: #74B9FF; } /* Azzurro */
.nav-buttons a:nth-child(6) { background-color: #A29BFE; } /* Lilla */
.nav-buttons a:nth-child(7) { background-color: #55EFC4; } /* Verde acqua */
.nav-buttons a:nth-child(8) { background-color: #FF7675; } /* Rosso chiaro */
.nav-buttons a:nth-child(9) { background-color: #D63031; } /* Rosso scuro */
.nav-buttons a:nth-child(10) { background-color: #81ECEC; } /* Turchese */
.nav-buttons a:nth-child(11) { background-color: #6C5CE7; } /* Viola */
.nav-buttons a:nth-child(12) { background-color: #00B894; } /* Verde */
.nav-buttons a:nth-child(13) { background-color: #D63031; } /* Rosso scuro */
.nav-buttons a:nth-child(14) { background-color: #E17055; } /* Arancione */
.nav-buttons a:nth-child(15) { background-color: #74B9FF; } /* Azzurro */
.nav-buttons a:nth-child(16) { background-color: #A29BFE; } /* Lilla */
.nav-buttons a:nth-child(17) { background-color: #55EFC4; } /* Verde acqua */
.nav-buttons a:nth-child(18) { background-color: #FF7675; } /* Rosso chiaro */
.nav-buttons a:nth-child(19) { background-color: #D63031; } /* Rosso scuro */
.nav-buttons a:nth-child(20) { background-color: #81ECEC; } /* Turchese */

/* Responsive design */
@media (max-width: 768px) {
    .nav-buttons {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Modifica il layout della griglia per schermi più piccoli */
    }

    .nav-buttons a {
        font-size: 14px; /* Riduce la dimensione del font per schermi più piccoli */
        padding: 10px; /* Riduce la spaziatura interna per schermi più piccoli */
    }
}
.img-preview img {
    max-width: 500px;
    max-height: 500px; /* Limita anche l'altezza */
    width: 100%;
    height: auto;
}

@media (max-width: 480px) {
    .nav-buttons {
        grid-template-columns: 1fr; /* Imposta una sola colonna per schermi molto piccoli */
    }
}

/* Stile del pulsante rosso */
.home-button {
    display: inline-block; /* Imposta il pulsante come blocco inline (valore: inline-block, block, inline, ecc.) */
    text-decoration: none; /* Rimuove la sottolineatura del link */
    background-color: #FF6B6B; /* Colore di sfondo del pulsante (valore esadecimale) */
    color: white; /* Colore del testo (valore esadecimale) */
    padding: 15px 25px; /* Spaziatura interna del pulsante (valore in px, em, ecc.) */
    border-radius: 10px; /* Arrotonda gli angoli del pulsante (valore in px, em, ecc.) */
    font-size: 16px; /* Dimensione del font (valore in px, em, rem, ecc.) */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animazione al passaggio del mouse */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombra del pulsante */
    text-align: center; /* Allinea il testo al centro */
    margin: 20px 0; /* Margine superiore e inferiore (valore in px, em, ecc.) */
}

.home-button:hover {
    background-color: #FF5252; /* Cambia il colore di sfondo al passaggio del mouse */
    transform: translateY(-5px); /* Sposta il pulsante verso l'alto al passaggio del mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Aumenta l'ombra al passaggio del mouse */
}

/* Stile del contenitore */
.container {
    width: 80%; /* Larghezza del contenitore (valore in %, px, vw, ecc.) */
    margin: auto; /* Centra il contenitore orizzontalmente */
    text-align: center; /* Allinea il testo al centro */
}

/* Stile della tabella */
.table-responsive {
    overflow-x: auto; /* Permette lo scrolling orizzontale (valore: auto, scroll, hidden, visible) */
}

table {
    width: 100%; /* Larghezza della tabella (valore in %, px, vw, ecc.) */
    border-collapse: collapse; /* Unisce i bordi delle celle (valore: collapse, separate) */
    margin-top: 20px; /* Margine superiore (valore in px, em, ecc.) */
    min-width: 600px; /* Larghezza minima della tabella (valore in px, em, ecc.) */
}

th, td {
    border: 1px solid #ddd; /* Bordo delle celle (valore: spessore, stile, colore) */
    padding: 10px; /* Spaziatura interna delle celle (valore in px, em, ecc.) */
    text-align: left; /* Allinea il testo a sinistra (valore: left, right, center, justify) */
    word-wrap: break-word; /* Permette di spezzare parole lunghe (valore: break-word, normal) */
}

th {
    background-color: #f4f4f4; /* Colore di sfondo dell'intestazione della tabella (valore esadecimale) */
}

/* Stili per dispositivi mobili */
@media screen and (max-width: 768px) {
    .container {
        width: 85%; /* Riduce la larghezza del contenitore per schermi più piccoli */
    }

    th, td {
        padding: 8px; /* Riduce la spaziatura interna delle celle per schermi più piccoli */
        font-size: 14px; /* Riduce la dimensione del font per schermi più piccoli */
    }
}

.table-container {
    display: flex; /* Imposta il layout flessibile */
    flex-direction: column; /* Imposta la direzione degli elementi in colonna (valore: column, row, column-reverse, row-reverse) */
    gap: 10px; /* Spazio tra gli elementi (valore in px, em, ecc.) */
    padding: 10px; /* Spaziatura interna (valore in px, em, ecc.) */
}

.record {
    background: #fff; /* Colore di sfondo del record (valore esadecimale) */
    border-radius: 10px; /* Arrotonda gli angoli del record (valore in px, em, ecc.) */
    border: 3px solid #007bff; /* Bordo del record (valore: spessore, stile, colore) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Ombra del record */
    padding: 15px; /* Spaziatura interna del record (valore in px, em, ecc.) */
    display: flex; /* Imposta il layout flessibile */
    flex-direction: column; /* Imposta la direzione degli elementi in colonna */
    gap: 10px; /* Spazio tra gli elementi */
}

.record-header {
    font-weight: bold; /* Imposta il testo in grassetto (valore: bold, normal, bolder, lighter) */
    font-size: 1.1em; /* Dimensione del font (valore in em, px, rem, ecc.) */
    color: #333; /* Colore del testo (valore esadecimale) */
}

.record-content {
    font-size: 0.95em; /* Dimensione del font (valore in em, px, rem, ecc.) */
    color: #555; /* Colore del testo (valore esadecimale) */
}

.record-links {
    display: flex; /* Imposta il layout flessibile */
    flex-wrap: wrap; /* Permette il wrapping degli elementi (valore: wrap, nowrap, wrap-reverse) */
    gap: 10px; /* Spazio tra gli elementi */
}

.record-links a {
    text-decoration: none; /* Rimuove la sottolineatura del link */
    color: #007bff; /* Colore del testo (valore esadecimale) */
    font-weight: bold; /* Imposta il testo in grassetto */
}

.record-links span {
    color: #888; /* Colore del testo (valore esadecimale) */
}

/* Stile per il messaggio "Nessun aggiornamento disponibile" */
.no-data {
    text-align: center; /* Allinea il testo al centro */
    font-size: 1.1em; /* Dimensione del font (valore in em, px, rem, ecc.) */
    color: #888; /* Colore del testo (valore esadecimale) */
    padding: 15px; /* Spaziatura interna (valore in px, em, ecc.) */
}

/* Media Query per Desktop */
@media (min-width: 768px) {
    .table-container {
        display: grid; /* Imposta il layout a griglia */
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Definisce le colonne della griglia */
        gap: 15px; /* Spazio tra gli elementi */
    }
}

.share-container {
    position: relative; /* Imposta la posizione relativa (valore: relative, absolute, fixed, static) */
    display: inline-block; /* Imposta il contenitore come blocco inline */
}

.share-btn {
    background: none; /* Rimuove lo sfondo (valore: none, colore esadecimale, ecc.) */
    border: none; /* Rimuove il bordo (valore: none, spessore, stile, colore) */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse (valore: pointer, default, ecc.) */
    font-size: 18px; /* Dimensione del font (valore in px, em, rem, ecc.) */
}

.share-menu {
    display: none; /* Nasconde il menu (valore: none, block, inline, ecc.) */
    position: absolute; /* Imposta la posizione assoluta (valore: absolute, relative, fixed, static) */
    background: #fff; /* Colore di sfondo del menu (valore esadecimale) */
    border: 1px solid #ddd; /* Bordo del menu (valore: spessore, stile, colore) */
    padding: 5px; /* Spaziatura interna (valore in px, em, ecc.) */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* Ombra del menu */
    z-index: 100; /* Imposta l'ordine di sovrapposizione (valore numerico) */
    width: 120px; /* Larghezza del menu (valore in px, em, ecc.) */
}

.share-menu a {
    display: block; /* Imposta il link come blocco (valore: block, inline, inline-block, ecc.) */
    padding: 5px; /* Spaziatura interna (valore in px, em, ecc.) */
    text-decoration: none; /* Rimuove la sottolineatura del link */
    color: #333; /* Colore del testo (valore esadecimale) */
}

.share-menu a:hover {
    background: #f0f0f0; /* Cambia il colore di sfondo al passaggio del mouse */
}

body {
    font-family: Arial, sans-serif; /* Imposta il font di default per il corpo del documento */
    background-color: #f4f4f4; /* Colore di sfondo della pagina (valore esadecimale) */
    margin: 0; /* Rimuove il margine (valore in px, em, ecc.) */
    padding: 20px; /* Spaziatura interna (valore in px, em, ecc.) */
}

.container {
    max-width: 600px; /* Larghezza massima del contenitore (valore in px, %, vw, ecc.) */
    background: white; /* Colore di sfondo del contenitore (valore esadecimale) */
    padding: 20px; /* Spaziatura interna (valore in px, em, ecc.) */
    border-radius: 8px; /* Arrotonda gli angoli del contenitore (valore in px, em, ecc.) */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* Ombra del contenitore */
    margin: auto; /* Centra il contenitore orizzontalmente */
}

.record-header {
    font-size: 20px; /* Dimensione del font (valore in px, em, rem, ecc.) */
    font-weight: bold; /* Imposta il testo in grassetto */
    margin-bottom: 10px; /* Margine inferiore (valore in px, em, ecc.) */
}

.record-content {
    margin-bottom: 10px; /* Margine inferiore (valore in px, em, ecc.) */
}

.record-links a {
    display: inline-block; /* Imposta il link come blocco inline */
    margin-top: 10px; /* Margine superiore (valore in px, em, ecc.) */
    text-decoration: none; /* Rimuove la sottolineatura del link */
    color: #007bff; /* Colore del testo (valore esadecimale) */
}

.share-container {
    position: relative; /* Imposta la posizione relativa */
    display: inline-block; /* Imposta il contenitore come blocco inline */
    margin-top: 10px; /* Margine superiore (valore in px, em, ecc.) */
}

.share-btn {
    background: none; /* Rimuove lo sfondo */
    border: none; /* Rimuove il bordo */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    font-size: 18px; /* Dimensione del font (valore in px, em, rem, ecc.) */
}

.share-menu {
    display: none; /* Nasconde il menu */
    position: absolute; /* Imposta la posizione assoluta */
    background: #fff; /* Colore di sfondo del menu */
    border: 1px solid #ddd; /* Bordo del menu */
    padding: 5px; /* Spaziatura interna */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* Ombra del menu */
    z-index: 100; /* Imposta l'ordine di sovrapposizione */
    width: 120px; /* Larghezza del menu */
}

.share-menu a {
    display: block; /* Imposta il link come blocco */
    padding: 5px; /* Spaziatura interna */
    text-decoration: none; /* Rimuove la sottolineatura del link */
    color: #333; /* Colore del testo */
}

.share-menu a:hover {
    background: #f0f0f0; /* Cambia il colore di sfondo al passaggio del mouse */
}

.back-link {
    display: block; /* Imposta il link come blocco */
    margin-top: 20px; /* Margine superiore (valore in px, em, ecc.) */
    color: #555; /* Colore del testo (valore esadecimale) */
}

table {
    width: 100%; /* Larghezza della tabella (valore in %, px, vw, ecc.) */
    border-collapse: collapse; /* Unisce i bordi delle celle */
    margin: 20px 0; /* Margine superiore e inferiore (valore in px, em, ecc.) */
}

table, th, td {
    border: 1px solid #ddd; /* Bordo della tabella e delle celle */
}

th, td {
    padding: 12px; /* Spaziatura interna delle celle (valore in px, em, ecc.) */
    text-align: left; /* Allinea il testo a sinistra */
}

th {
    background-color: #f2f2f2; /* Colore di sfondo dell'intestazione della tabella */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
}

th:hover {
    background-color: #ddd; /* Cambia il colore di sfondo al passaggio del mouse */
}

/* Colori di sfondo per le righe */
.row-color-0 { background-color: #f0f8ff; } /* AliceBlue */
.row-color-1 { background-color: #faebd7; } /* AntiqueWhite */
.row-color-2 { background-color: #7fffd4; } /* Aquamarine */
.row-color-3 { background-color: #f0ffff; } /* Azure */
.row-color-4 { background-color: #f5f5dc; } /* Beige */
.row-color-5 { background-color: #ffe4c4; } /* Bisque */
.row-color-6 { background-color: #ffebcd; } /* BlanchedAlmond */
.row-color-7 { background-color: #e6e6fa; } /* Lavender */
.row-color-8 { background-color: #fffacd; } /* LemonChiffon */
.row-color-9 { background-color: #fafad2; } /* LightGoldenRodYellow */
.row-color-10 { background-color: #d3d3d3; } /* LightGray */
.row-color-11 { background-color: #f0fff0; } /* HoneyDew */
.row-color-12 { background-color: #f5fffa; } /* MintCream */
.row-color-13 { background-color: #ffe4e1; } /* MistyRose */
.row-color-14 { background-color: #fdf5e6; } /* OldLace */
.row-color-15 { background-color: #fffaf0; } /* FloralWhite */
.row-color-16 { background-color: #f0e68c; } /* Khaki */
.row-color-17 { background-color: #faf0e6; } /* Linen */
.row-color-18 { background-color: #f0fff0; } /* HoneyDew */
.row-color-19 { background-color: #fff5ee; } /* SeaShell */
.row-color-20 { background-color: #f5f5f5; } /* WhiteSmoke */
.row-color-21 { background-color: #fff8dc; } /* CornSilk */
.row-color-22 { background-color: #f5deb3; } /* Wheat */
.row-color-23 { background-color: #f0e68c; } /* Khaki */
.row-color-24 { background-color: #f0f8ff; } /* AliceBlue */
.row-color-25 { background-color: #fafad2; } /* LightGoldenRodYellow */

.client-list {
    display: flex; /* Imposta il layout flessibile */
    flex-direction: column; /* Imposta la direzione degli elementi in colonna */
    gap: 15px; /* Spazio tra gli elementi */
    max-width: 500px; /* Larghezza massima (valore in px, %, vw, ecc.) */
    margin: auto; /* Centra il contenitore orizzontalmente */
    text-align: center; /* Allinea il testo al centro */
}

.client-item {
    display: flex; /* Imposta il layout flessibile */
    justify-content: space-between; /* Distribuisce lo spazio tra gli elementi */
    align-items: center; /* Allinea gli elementi verticalmente */
    padding: 15px; /* Spaziatura interna (valore in px, em, ecc.) */
    border-radius: 10px; /* Arrotonda gli angoli (valore in px, em, ecc.) */
    background: linear-gradient(135deg, #f6f9fc, #e3f2fd); /* Sfondo con gradiente */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombra */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animazione al passaggio del mouse */
}

.client-item:hover {
    transform: translateY(-3px); /* Sposta l'elemento verso l'alto al passaggio del mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Aumenta l'ombra al passaggio del mouse */
}

.client-button {
    background-color: #007bff; /* Colore di sfondo del pulsante (valore esadecimale) */
    color: white; /* Colore del testo (valore esadecimale) */
    border: none; /* Rimuove il bordo */
    padding: 10px 15px; /* Spaziatura interna (valore in px, em, ecc.) */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    border-radius: 8px; /* Arrotonda gli angoli (valore in px, em, ecc.) */
    font-size: 14px; /* Dimensione del font (valore in px, em, rem, ecc.) */
    transition: background 0.3s; /* Animazione al passaggio del mouse */
}

.client-button:hover {
    background-color: #0056b3; /* Cambia il colore di sfondo al passaggio del mouse */
}

/* Stili per il logo */
header img {
    width: 300px; /* Larghezza del logo (valore in px, %, vw, ecc.) */
    height: auto; /* Mantiene le proporzioni */
}

/* Altri stili della pagina */
.table-responsive {
    overflow-x: auto; /* Permette lo scrolling orizzontale */
}

header img {
    width: 100%; /* Larghezza del logo al 100% del contenitore */
    max-width: 300px; /* Larghezza massima del logo (valore in px, %, vw, ecc.) */
    height: auto; /* Mantiene le proporzioni */
}

/* Stili per la tabella degli aggiornamenti */
.table-responsive {
    overflow-x: auto; /* Permette lo scrolling orizzontale */
}

table {
    width: 100%; /* Larghezza della tabella (valore in %, px, vw, ecc.) */
    border-collapse: collapse; /* Unisce i bordi delle celle */
    margin-top: 20px; /* Margine superiore (valore in px, em, ecc.) */
    background-color: #fff; /* Colore di sfondo della tabella (valore esadecimale) */
    border: 2px solid #ddd; /* Bordo esterno della tabella */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombra della tabella */
}

th, td {
    border: 1px solid #ccc; /* Bordo delle celle (valore: spessore, stile, colore) */
    padding: 12px; /* Spaziatura interna delle celle (valore in px, em, ecc.) */
    text-align: left; /* Allinea il testo a sinistra */
    font-size: 16px; /* Dimensione del font (valore in px, em, rem, ecc.) */
}

th {
    background-color: #f8f9fa; /* Colore di sfondo dell'intestazione della tabella */
    font-weight: bold; /* Imposta il testo in grassetto */
    text-transform: uppercase; /* Trasforma il testo in maiuscolo */
}

/* Stile per i link */
td a {
    display: block; /* Imposta il link come blocco */
    color: #007bff; /* Colore del testo (valore esadecimale) */
    text-decoration: none; /* Rimuove la sottolineatura del link */
    font-weight: bold; /* Imposta il testo in grassetto */
    text-align: center; /* Allinea il testo al centro */
}

td a:hover {
    color: #0056b3; /* Cambia il colore del testo al passaggio del mouse */
}

/* Responsività */
@media screen and (max-width: 768px) {
    table {
        font-size: 14px; /* Riduce la dimensione del font per schermi più piccoli */
        min-width: 100%; /* Larghezza minima della tabella (valore in %, px, vw, ecc.) */
    }

    th, td {
        padding: 8px; /* Riduce la spaziatura interna delle celle per schermi più piccoli */
    }

    td a {
        font-size: 14px; /* Riduce la dimensione del font per schermi più piccoli */
    }
}

/* Media Query per Desktop */
@media (min-width: 768px) {
    .table-container {
        display: grid; /* Imposta il layout a griglia */
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Definisce le colonne della griglia */
        gap: 15px; /* Spazio tra gli elementi */
    }
}

h1 {
    font-size: 1.5em; /* Dimensione del font (valore in em, px, rem, ecc.) */
    color: #c1fffa; /* Colore del testo (valore esadecimale) */
    background-color: #007bff; /* Colore di sfondo (valore esadecimale) */
    padding: 10px; /* Spaziatura interna (valore in px, em, ecc.) */
    border-radius: 8px; /* Arrotonda gli angoli (valore in px, em, ecc.) */
    display: inline-block; /* Imposta l'elemento come blocco inline */
    color: white; /* Colore del testo (valore esadecimale) */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* Ombra */
}

.button-container {
    margin-top: 15px; /* Margine superiore (valore in px, em, ecc.) */
    display: flex; /* Imposta il layout flessibile */
    justify-content: center; /* Allinea gli elementi orizzontalmente al centro */
    gap: 15px; /* Spazio tra gli elementi */
}

.custom-button {
    display: flex; /* Imposta il layout flessibile */
    align-items: center; /* Allinea gli elementi verticalmente */
    justify-content: center; /* Allinea gli elementi orizzontalmente al centro */
    flex-direction: column; /* Imposta la direzione degli elementi in colonna */
    background-color: #25D366; /* Colore di sfondo (valore esadecimale) */
    color: white; /* Colore del testo (valore esadecimale) */
    border: none; /* Rimuove il bordo */
    padding: 10px 15px; /* Spaziatura interna (valore in px, em, ecc.) */
    font-size: 0.9em; /* Dimensione del font (valore in em, px, rem, ecc.) */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    border-radius: 8px; /* Arrotonda gli angoli (valore in px, em, ecc.) */
    transition: 0.3s; /* Animazione al passaggio del mouse */
    width: 120px; /* Larghezza del pulsante (valore in px, em, ecc.) */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* Ombra */
}

.copy-button {
    background-color: #007bff; /* Colore di sfondo (valore esadecimale) */
}

.custom-button:hover {
    opacity: 0.8; /* Riduce l'opacità al passaggio del mouse (valore: 0-1) */
}

.custom-button img {
    width: 30px; /* Larghezza dell'immagine (valore in px, em, ecc.) */
    margin-bottom: 5px; /* Margine inferiore (valore in px, em, ecc.) */
}

.section-button {
    background-color: #ff6f61; /* Colore di sfondo (valore esadecimale) */
    color: white; /* Colore del testo (valore esadecimale) */
    border: none; /* Rimuove il bordo */
    padding: 5px 8px; /* Spaziatura interna (valore in px, em, ecc.) */
    font-size: 1em; /* Dimensione del font (valore in em, px, rem, ecc.) */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    border-radius: 5px; /* Arrotonda gli angoli (valore in px, em, ecc.) */
    transition: 0.3s; /* Animazione al passaggio del mouse */
    width: 100%; /* Larghezza del pulsante (valore in %, px, vw, ecc.) */
    max-width: 150px; /* Larghezza massima del pulsante (valore in px, em, ecc.) */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); /* Ombra */
}

.section-button:hover {
    background-color: #e65b50; /* Cambia il colore di sfondo al passaggio del mouse */
}

.section-buttons-container {
    margin-top: 20px; /* Margine superiore (valore in px, em, ecc.) */
    display: flex; /* Imposta il layout flessibile */
    flex-wrap: nowrap; /* Impedisce il wrapping degli elementi */
    justify-content: center; /* Allinea gli elementi orizzontalmente al centro */
    gap: 10px; /* Spazio tra gli elementi */
}

body {
    font-family: 'Open Sans', sans-serif; /* Imposta il font di default per il corpo del documento */
    margin: 0; /* Rimuove il margine */
    padding: 0; /* Rimuove la spaziatura interna */
    background-color: #f9f9f9; /* Colore di sfondo della pagina (valore esadecimale) */
}

/* Stile per il logo */
.logo-container {
    text-align: center; /* Allinea il testo al centro */
    margin-top: 20px; /* Margine superiore (valore in px, em, ecc.) */
}

.logo-container img {
    max-width: 300px; /* Larghezza massima del logo (valore in px, %, vw, ecc.) */
    height: auto; /* Mantiene le proporzioni */
}

.container {
    max-width: 800px; /* Larghezza massima del contenitore (valore in px, %, vw, ecc.) */
    margin: 50px auto; /* Margine superiore e inferiore (valore in px, em, ecc.) */
    background: #fff; /* Colore di sfondo del contenitore (valore esadecimale) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombra del contenitore */
    padding: 20px; /* Spaziatura interna (valore in px, em, ecc.) */
    border-radius: 8px; /* Arrotonda gli angoli del contenitore (valore in px, em, ecc.) */
}

h1 {
    text-align: center; /* Allinea il testo al centro */
    color: #c1fffa; /* Colore del testo (valore esadecimale) */
	background-color: #007bff; /* Colore di sfondo (valore esadecimale) */
}

form {
    display: flex; /* Imposta il layout flessibile */
    flex-direction: column; /* Imposta la direzione degli elementi in colonna */
    gap: 15px; /* Spazio tra gli elementi */
    max-width: 50%; /* Larghezza massima del form (valore in %, px, vw, ecc.) */
}

label {
    font-weight: 600; /* Imposta il testo in grassetto (valore: 100-900) */
    color: #2a4d69; /* Colore del testo (valore esadecimale) */
}

input, textarea, select {
    padding: 10px; /* Spaziatura interna (valore in px, em, ecc.) */
    font-size: 14px; /* Dimensione del font (valore in px, em, rem, ecc.) */
    border: 1px solid #ccc; /* Bordo (valore: spessore, stile, colore) */
    border-radius: 4px; /* Arrotonda gli angoli (valore in px, em, ecc.) */
    width: 100%; /* Larghezza (valore in %, px, vw, ecc.) */
}

textarea {
    resize: vertical; /* Permette il ridimensionamento verticale (valore: vertical, horizontal, both, none) */
    height: 100px; /* Altezza iniziale (valore in px, em, ecc.) */
}

button {
    background-color: #4CAF50; /* Colore di sfondo (valore esadecimale) */
    color: white; /* Colore del testo (valore esadecimale) */
    padding: 12px; /* Spaziatura interna (valore in px, em, ecc.) */
    font-size: 16px; /* Dimensione del font (valore in px, em, rem, ecc.) */
    border: none; /* Rimuove il bordo */
    border-radius: 4px; /* Arrotonda gli angoli (valore in px, em, ecc.) */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
}

button:hover {
    background-color: #45a049; /* Cambia il colore di sfondo al passaggio del mouse */
}

table {
    width: 100%; /* Larghezza della tabella (valore in %, px, vw, ecc.) */
    border-collapse: collapse; /* Unisce i bordi delle celle */
    margin: 20px 0; /* Margine superiore e inferiore (valore in px, em, ecc.) */
    font-size: 0.9em; /* Dimensione del font (valore in em, px, rem, ecc.) */
}

table, th, td {
    border: 1px solid #ddd; /* Bordo della tabella e delle celle */
}

th, td {
    padding: 12px; /* Spaziatura interna delle celle (valore in px, em, ecc.) */
    text-align: left; /* Allinea il testo a sinistra */
}

th {
    background-color: #f2f2f2; /* Colore di sfondo dell'intestazione della tabella */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
}

th:hover {
    background-color: #ddd; /* Cambia il colore di sfondo al passaggio del mouse */
}

/* Colori di sfondo per le righe */
/* ... (mantenere la tua lista di colori di sfondo) ... */

/* Media queries per schermi più piccoli */
@media screen and (max-width: 600px) {
    th, td {
        padding: 8px; /* Riduce la spaziatura interna delle celle per schermi più piccoli */
        font-size: 0.8em; /* Riduce la dimensione del font per schermi più piccoli */
    }

    .home-button {
        font-size: 0.9em; /* Riduce la dimensione del font per schermi più piccoli */
        padding: 10px 20px; /* Riduce la spaziatura interna per schermi più piccoli */
    }
}

table {
    width: 100%; /* Larghezza della tabella (valore in %, px, vw, ecc.) */
    border-collapse: collapse; /* Unisce i bordi delle celle */
    margin: 20px 0; /* Margine superiore e inferiore (valore in px, em, ecc.) */
}

table, th, td {
    border: 1px solid #ddd; /* Bordo della tabella e delle celle */
}

th, td {
    padding: 12px; /* Spaziatura interna delle celle (valore in px, em, ecc.) */
    text-align: left; /* Allinea il testo a sinistra */
}

th {
    background-color: #f2f2f2; /* Colore di sfondo dell'intestazione della tabella */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
}

th:hover {
    background-color: #ddd; /* Cambia il colore di sfondo al passaggio del mouse */
}

/* Colori di sfondo per le righe */
.row-color-0 { background-color: #f0f8ff; } /* AliceBlue */
.row-color-1 { background-color: #faebd7; } /* AntiqueWhite */
.row-color-2 { background-color: #7fffd4; } /* Aquamarine */
.row-color-3 { background-color: #f0ffff; } /* Azure */
.row-color-4 { background-color: #f5f5dc; } /* Beige */
.row-color-5 { background-color: #ffe4c4; } /* Bisque */
.row-color-6 { background-color: #ffebcd; } /* BlanchedAlmond */
.row-color-7 { background-color: #e6e6fa; } /* Lavender */
.row-color-8 { background-color: #fffacd; } /* LemonChiffon */
.row-color-9 { background-color: #fafad2; } /* LightGoldenRodYellow */
.row-color-10 { background-color: #d3d3d3; } /* LightGray */
.row-color-11 { background-color: #f0fff0; } /* HoneyDew */
.row-color-12 { background-color: #f5fffa; } /* MintCream */
.row-color-13 { background-color: #ffe4e1; } /* MistyRose */
.row-color-14 { background-color: #fdf5e6; } /* OldLace */
.row-color-15 { background-color: #fffaf0; } /* FloralWhite */
.row-color-16 { background-color: #f0e68c; } /* Khaki */
.row-color-17 { background-color: #faf0e6; } /* Linen */
.row-color-18 { background-color: #f0fff0; } /* HoneyDew */
.row-color-19 { background-color: #fff5ee; } /* SeaShell */
.row-color-20 { background-color: #f5f5f5; } /* WhiteSmoke */
.row-color-21 { background-color: #fff8dc; } /* CornSilk */
.row-color-22 { background-color: #f5deb3; } /* Wheat */
.row-color-23 { background-color: #f0e68c; } /* Khaki */
.row-color-24 { background-color: #f0f8ff; } /* AliceBlue */
.row-color-25 { background-color: #fafad2; } /* LightGoldenRodYellow */

.tabella-conti table {
    width: 100%; /* Larghezza della tabella (valore in %, px, vw, ecc.) */
    border-collapse: collapse; /* Unisce i bordi delle celle */
    margin-bottom: 30px; /* Margine inferiore (valore in px, em, ecc.) */
}

.tabella-conti th, td {
    border: 1px solid #ddd; /* Bordo delle celle (valore: spessore, stile, colore) */
    padding: 8px; /* Spaziatura interna delle celle (valore in px, em, ecc.) */
    text-align: center; /* Allinea il testo al centro */
}

.tabella-conti th {
    background-color: #f2f2f2; /* Colore di sfondo dell'intestazione della tabella */
}

.tabella-conti .credito {
    background-color: #d4edda; /* Colore di sfondo per il credito (valore esadecimale) */
    color: #155724; /* Colore del testo per il credito (valore esadecimale) */
    font-weight: bold; /* Imposta il testo in grassetto */
}

.tabella-conti .debito {
    background-color: #f8d7da; /* Colore di sfondo per il debito (valore esadecimale) */
    color: #721c24; /* Colore del testo per il debito (valore esadecimale) */
    font-weight: bold; /* Imposta il testo in grassetto */
}

.tabella-conti .immagine {
    max-width: 150px; /* Larghezza massima dell'immagine (valore in px, %, vw, ecc.) */
    height: auto; /* Mantiene le proporzioni */
}

.tabella-conti h2 {
    text-transform: uppercase; /* Trasforma il testo in maiuscolo */
}

.tabella-conti body, h1, h2, td, th {
    font-family: helvetica; /* Imposta il font (valore: nome del font) */
    font-size: 18px; /* Dimensione del font (valore in px, em, rem, ecc.) */
    font-weight: bold; /* Imposta il testo in grassetto */
}

.whatsapp-button, .copy-button {
    color: white; /* Colore del testo (valore esadecimale) */
    padding: 15px 25px; /* Spaziatura interna (valore in px, em, ecc.) */
    border: none; /* Rimuove il bordo */
    border-radius: 5px; /* Arrotonda gli angoli (valore in px, em, ecc.) */
    font-size: 16px; /* Dimensione del font (valore in px, em, rem, ecc.) */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    display: flex; /* Imposta il layout flessibile */
    align-items: center; /* Allinea gli elementi verticalmente */
}

.whatsapp-button {
    background-color: #25D366; /* Colore di sfondo (valore esadecimale) */
}

.copy-button {
    background-color: #007BFF; /* Colore di sfondo (valore esadecimale) */
}

.copy-button.copied {
    background-color: #28a745; /* Cambia il colore di sfondo quando copiato */
}

.whatsapp-button img, .copy-button img {
    width: 20px; /* Larghezza dell'immagine (valore in px, em, ecc.) */
    margin-right: 10px; /* Margine destro (valore in px, em, ecc.) */
}

.section-button {
    background-color: #007BFF; /* Colore di sfondo (valore esadecimale) */
    color: white; /* Colore del testo (valore esadecimale) */
    padding: 10px 20px; /* Spaziatura interna (valore in px, em, ecc.) */
    border: none; /* Rimuove il bordo */
    border-radius: 5px; /* Arrotonda gli angoli (valore in px, em, ecc.) */
    font-size: 16px; /* Dimensione del font (valore in px, em, rem, ecc.) */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    margin: 5px; /* Margine (valore in px, em, ecc.) */
}

.section-button:hover {
    background-color: #0056b3; /* Cambia il colore di sfondo al passaggio del mouse */
}

.client-list {
    display: flex; /* Imposta il layout flessibile */
    flex-direction: column; /* Imposta la direzione degli elementi in colonna */
    gap: 15px; /* Spazio tra gli elementi */
    max-width: 500px; /* Larghezza massima (valore in px, %, vw, ecc.) */
    margin: auto; /* Centra il contenitore orizzontalmente */
    text-align: center; /* Allinea il testo al centro */
}

.client-item {
    display: flex; /* Imposta il layout flessibile */
    justify-content: space-between; /* Distribuisce lo spazio tra gli elementi */
    align-items: center; /* Allinea gli elementi verticalmente */
    padding: 15px; /* Spaziatura interna (valore in px, em, ecc.) */
    border-radius: 10px; /* Arrotonda gli angoli (valore in px, em, ecc.) */
    background: linear-gradient(135deg, #f6f9fc, #e3f2fd); /* Sfondo con gradiente */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombra */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animazione al passaggio del mouse */
}

.client-item:hover {
    transform: translateY(-3px); /* Sposta l'elemento verso l'alto al passaggio del mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Aumenta l'ombra al passaggio del mouse */
}

.client-button {
    background-color: #007bff; /* Colore di sfondo (valore esadecimale) */
    color: white; /* Colore del testo (valore esadecimale) */
    border: none; /* Rimuove il bordo */
    padding: 10px 15px; /* Spaziatura interna (valore in px, em, ecc.) */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    border-radius: 8px; /* Arrotonda gli angoli (valore in px, em, ecc.) */
    font-size: 14px; /* Dimensione del font (valore in px, em, rem, ecc.) */
    transition: background 0.3s; /* Animazione al passaggio del mouse */
}

.client-button:hover {
    background-color: #0056b3; /* Cambia il colore di sfondo al passaggio del mouse */
}

/* Stili per il logo */
header img {
    width: 200px; /* Larghezza del logo (valore in px, %, vw, ecc.) */
    height: auto; /* Mantiene le proporzioni */
}

/* Altri stili della pagina */
.table-responsive {
    overflow-x: auto; /* Permette lo scrolling orizzontale */
}

header img {
    width: 100%; /* Larghezza del logo al 100% del contenitore */
    max-width: 300px; /* Larghezza massima del logo (valore in px, %, vw, ecc.) */
    height: auto; /* Mantiene le proporzioni */
}

/* Stili per la tabella degli aggiornamenti */
.table-responsive {
    overflow-x: auto; /* Permette lo scrolling orizzontale */
}

table {
    width: 100%; /* Larghezza della tabella (valore in %, px, vw, ecc.) */
    border-collapse: collapse; /* Unisce i bordi delle celle */
    margin-top: 20px; /* Margine superiore (valore in px, em, ecc.) */
    background-color: #fff; /* Colore di sfondo della tabella (valore esadecimale) */
    border: 2px solid #ddd; /* Bordo esterno della tabella */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombra della tabella */
}

th, td {
    border: 1px solid #ccc; /* Bordo delle celle (valore: spessore, stile, colore) */
    padding: 12px; /* Spaziatura interna delle celle (valore in px, em, ecc.) */
    text-align: left; /* Allinea il testo a sinistra */
    font-size: 16px; /* Dimensione del font (valore in px, em, rem, ecc.) */
}

th {
    background-color: #f8f9fa; /* Colore di sfondo dell'intestazione della tabella */
    font-weight: bold; /* Imposta il testo in grassetto */
    text-transform: uppercase; /* Trasforma il testo in maiuscolo */
}

/* Stile per i link */
td a {
    display: block; /* Imposta il link come blocco */
    color: #007bff; /* Colore del testo (valore esadecimale) */
    text-decoration: none; /* Rimuove la sottolineatura del link */
    font-weight: bold; /* Imposta il testo in grassetto */
    text-align: center; /* Allinea il testo al centro */
}

td a:hover {
    color: #0056b3; /* Cambia il colore del testo al passaggio del mouse */
}

/* Responsività */
@media screen and (max-width: 768px) {
    table {
        font-size: 14px; /* Riduce la dimensione del font per schermi più piccoli */
        min-width: 100%; /* Larghezza minima della tabella (valore in %, px, vw, ecc.) */
    }

    th, td {
        padding: 8px; /* Riduce la spaziatura interna delle celle per schermi più piccoli */
    }

    td a {
        font-size: 14px; /* Riduce la dimensione del font per schermi più piccoli */
    }
	
	form {
    display: flex; /* Imposta il layout flessibile */
    flex-direction: column; /* Imposta la direzione degli elementi in colonna */
    gap: 15px; /* Spazio tra gli elementi */
    max-width: 90%; /* Larghezza massima del form (valore in %, px, vw, ecc.) */
}
}


@media print {
    .page-break {
        page-break-before: always; /* Forza un'interruzione di pagina prima dell'elemento */
    }
}

@media print {
    .stop-print {
        display: none; /* Nasconde tutto il contenuto successivo durante la stampa */
    }
}

@media print {
    .stop-here  {
        display: none; /* Nasconde tutto il contenuto dopo l'elemento con ID "stop-here" durante la stampa */
    }
}

@media print {
    .no-print {
        display: none; /* Nasconde l'elemento durante la stampa */
    }
}
.date-value {
    white-space: nowrap;
    display: inline-block; /* Opzionale */
}

/* da qui sto facendo la prova per la stampa della tabella medicinali


/* Stile per la stampa */
@media print {
    /* Forza il rendering corretto su dispositivi mobili */
    @page {
        size: A4;
        margin: 5mm !important; /* Riduci i margini della pagina */
    }

    body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Applica la dimensione del carattere solo agli elementi della tabella */
    table {
        width: 100% !important;
        font-size: 7pt !important; /* Usa pt per una migliore compatibilità */
    }

    th, td {
        padding: 2px !important; /* Riduci ulteriormente il padding per la stampa */
        font-size: 9pt !important; /* Usa pt per una migliore compatibilità */
    }

    h2 {
        font-size: 12pt !important; /* Usa pt per una migliore compatibilità */
        margin: 3px 0 !important; /* Riduci ulteriormente il margine */
    }

    .tabella-Digiuno,
    .tabella-Dopo Colazione,
    .tabella-Ore 10:30,
    .tabella-Dopo Pranzo,
    .tabella-Ore 15:00,
    .tabella-Ore 16:00,
    .tabella-Dopo Cena,
    .tabella-Ore 20:00,
    .tabella-Prima di Dormire {
        margin-bottom: 5px !important; /* Riduci ulteriormente il margine inferiore per la stampa */
    }
}