/* Colore di sfondo di default per le celle checkbox (deselezionate) */
.dx-datagrid-content .dx-datagrid-table .dx-row.dx-data-row .dx-command-select {
    background-color: transparent !important;
}

/* Colore di sfondo quando la riga è selezionata */
.dx-datagrid-content .dx-datagrid-table .dx-row.dx-data-row.dx-selection .dx-command-select {
    background-color: aquamarine !important;
}

/* Assicurati che l'intestazione della colonna checkbox mantenga il suo colore originale */
.dx-datagrid-headers .dx-command-select {
    background-color: inherit !important; /* o specifica un colore esplicito */
}

/* Personalizza la larghezza e il bordo della DataGrid */
#headContainer {
    display: flex;
/*    justify-content: space-between;  /* Allinea gli elementi a sinistra e destra */
    justify-content: center;  /* Allinea gli elementi a sinistra e destra */
    align-items: center;             /* Allinea verticalmente gli elementi */
    width: 70%;                      /* Imposta la larghezza del contenitore */
    margin: 0 auto;                  /* Centra il contenitore orizzontalmente */
    margin-top: 30px;
    border-radius: 10px;
    border: 2px solid lightblue;     /* Imposta un bordo blu di 2px */
    padding: 10px;
    position: relative;       /* Permette il posizionamento assoluto di elementi interni */
}

#btnTorna {
    background: #9696ff; /*lavender; /* #7cbcf0; */
    color: beige;
    border: 1px solid #648daf;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    left: 10px;  /* Mantiene il bottone a sinistra */
    top: 50%;  /* Posiziona il bottone al 50% dell'altezza di #headContainer */
    transform: translateY(-50%); /* Lo riporta indietro della metà della sua altezza */
}

#btnConvalidati {
    background: #9696ff; /*lavender; /* #7cbcf0; */
    color: beige;
    border: 1px solid #648daf;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    left: 120px;  /* Mantiene il bottone a sinistra */
    top: 50%;  /* Posiziona il bottone al 50% dell'altezza di #headContainer */
    transform: translateY(-50%); /* Lo riporta indietro della metà della sua altezza */
}

.user-info {
    text-align: center; /* Allinea il testo al centro */
    position: absolute;
    left: 50%;           /* Sposta il div al 50% del contenitore */
    transform: translateX(-50%); /* Lo riporta indietro della metà della sua larghezza */
    width: auto;          /* Adatta la larghezza al contenuto */
}

.nominativo {
    font-weight: bold;        /* Rendilo in grassetto */
    color: blue;              /* Imposta un colore scuro per il testo */
    font-size: 20px;          /* Imposta la dimensione del font */
    font-family: 'Arial', sans-serif; /* Scegli un font moderno */
}

#gridContainer {
    display: flex;
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
    height: 50vh; /* Prendi tutta l'altezza della viewport */
    margin: 0; /* Rimuovi margini predefiniti */
}

#gridContainer .dx-datagrid {
    position: center !important; /* Fissa il contenitore rispetto alla viewport */
    border-radius: 10px;
    border: 2px solid lightblue !important;  /* Imposta un bordo blu di 2px */
    width: 70% !important;  /* Imposta la larghezza al 100% (o qualsiasi valore desiderato) */
}

#gridContainer .dx-datagrid {
    margin-top: 30px;
}

/* Personalizza l'aspetto delle righe della DataGrid */
#gridContainer .dx-row {
    border-bottom: 1px solid #ddd;  /* Aggiungi un bordo inferiore alle righe */
}

/* Personalizza le celle della DataGrid */
#gridContainer .dx-datagrid-content .dx-cell {
    padding: 10px !important;  /* Imposta il padding delle celle */
}

/* Personalizza il titolo delle colonne */
#gridContainer .dx-datagrid-headers .dx-header-row .dx-datagrid-header-panel {
    background-color: #f0f8ff;  /* Colore di sfondo per l'intestazione */
    font-weight: bold;
}


/* Nasconde tutto il contenuto del load panel */
.dx-loadpanel-content {
    position: fixed !important; /* Fissa il contenitore rispetto alla viewport */
    top: -30px !important; /* Sposta l'elemento 50px sopra la parte visibile della viewport */
    left: 0% !important; /* Centra orizzontalmente */
    transform: translateX(-50%) !important; /* Corregge il centraggio orizzontale */
    width: auto; /* Mantiene dimensioni corrette */
    height: auto;
    background: transparent !important; /* Rende trasparente lo sfondo */
    border: none !important;
    box-shadow: none !important;
    visibility: hidden !important; /* Nasconde il contenitore */
}

/* Mostra solo lo spinner */
.dx-loadpanel-content .dx-loadpanel-indicator {
    position: relative !important; /* Assicura che sia posizionato correttamente */
    top: 10px !important; /* Distanza dal bordo superiore */
    left: 50% !important; /* Centra orizzontalmente */
    transform: translateX(-50%) !important; /* Corregge il centraggio */
    visibility: visible !important; /* Rende visibile solo lo spinner */
}

/* Cambia il colore dello spinner */
.dx-loadindicator {
    width: 32px;
    height: 32px;
    display: inline-block;
    overflow: hidden;
    border: none; /* Non usare bordi fissi, perchè lo spinner è animato */

    background-color: transparent; /* Rende il fondo trasparente */
}

.dx-loadindicator-icon .dx-loadindicator-segment {
/*  background: aquamarine; */
  background: beige;
}