/* Stile di base per la tabella */
.data-table {
    width: 100%;  /* Imposta la larghezza al 100% della container */
    border-collapse: collapse;  /* Unisce i bordi delle celle */
    margin: 20px 0;  /* Aggiunge uno spazio sopra e sotto la tabella */
    font-family: Arial, sans-serif;  /* Imposta il font della tabella */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* Aggiunge una leggera ombra */
    /* Add */    
    font-size: 11px;
}

.data-table caption {
    font-size: 13px;  /* Imposta la dimensione del font più grande per il caption */
    font-weight: bold;  /* Imposta il font in grassetto */
    color: #333;  /* Colore del testo */
    //padding: 3px 0;  /* Aggiunge spazio sopra e sotto il testo */
    text-align: center;  /* Allinea il testo al centro */
    //background-color: #eee;  /* Colore di sfondo grigio chiaro */
    //border-top: 1px solid #ddd;  /* Aggiunge un bordo superiore verde */
    //border-bottom: 1px solid #ddd;  /* Aggiunge un bordo inferiore verde */
    margin-bottom: 10px;  /* Distanza tra il caption e la tabella */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* Aggiunge una leggera ombra */
    
}

/* Stile per l'intestazione della tabella */
.data-table th {
    background-color: #4CAF50;  /* Colore di sfondo verde per l'intestazione */
    color: white;  /* Colore del testo bianco */
    padding: 12px 15px;  /* Distanza tra il testo e il bordo della cella */
    text-align: left;  /* Allinea il testo a sinistra */
    font-weight: bold;  /* Imposta il grassetto per il testo */
    /* Add */
    padding: 1px 2px;  /* Distanza tra il testo e il bordo della cella */
    
}

/* Stile per le celle della tabella */
.data-table td {
    padding: 12px 15px;  /* Distanza tra il testo e il bordo della cella */
    border: 1px solid #ddd;  /* Bordi sottili e grigi per le celle */
    text-align: left;  /* Allinea il testo a sinistra */
    /* Add */
    padding: 1px 2px;  /* Distanza tra il testo e il bordo della cella */
    
}

/* Stile per le righe pari */
.data-table tr:nth-child(even) {
    background-color: #f9f9f9;  /* Colore di sfondo grigio chiaro per le righe pari */
}

/* Stile per la riga al passaggio del mouse (hover) */
.data-table tr:hover {
    background-color: #f1f1f1;  /* Colore di sfondo grigio chiaro al passaggio del mouse */
    cursor: pointer;  /* Cambia il cursore quando si passa sopra la riga */
}

/* Stile per le celle allineate al centro */
.data-table td, .data-table th {
    text-align: center;  /* Allinea il testo al centro */
}

/* Aggiunta di margini e bordi per una presentazione migliore */
.data-table {
    border-radius: 8px;  /* Rende gli angoli della tabella arrotondati */
    overflow: hidden;  /* Nasconde eventuali angoli tagliati dalla tabella */
}