.loading-placeholder {
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-animation 1.5s infinite;
    border-radius: 4px;
}

@keyframes loading-animation {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.my-datatable {width:100% !important; background-color:#FFFFFF !important;}

.positivo { color: green; }
.negativo { color: red; }


table.dataTable thead th {
    text-align:center;
    padding:15px;
    word-break: keep-all;
    background-color:white;
}

table.dataTable tbody td {padding:10px;word-break: keep-all; }

.date-filters-wrapper {
    display: flex;
    flex-wrap: wrap; /* Permette agli elementi di andare su più righe se lo spazio è limitato */
    align-items: center; /* Allinea verticalmente tutti gli input e le etichette */
    gap: 10px; /* Spazio tra gli elementi */
    margin-bottom: 30px;
    margin-top: 30px;
}

.date-filters-wrapper label {
    margin-right: 3px;
    white-space: nowrap; /* Evita che le etichette vadano su più righe */
}

.date-filters-wrapper input, 
.date-filters-wrapper select {
    height: 35px; /* Altezza uniforme per tutti i campi */
    padding: 5px;
    width: 150px; /* Larghezza fissa di 100px */
}

@media (max-width: 960px) {
    .date-filters-wrapper {
        flex-direction: column; /* Disposizione verticale su schermi piccoli */
        gap: 10px;
    }
    
    .date-filters-wrapper input[type=text],
    .date-filters-wrapper select {
        width: 100%; /* Gli input occupano tutto lo spazio disponibile su schermi piccoli */
    }
    
    .date-filters-wrapper label {
        line-height: 100%;
    }
}

table.dataTable tbody tr.even {
    background-color: #fafafa !important;
}

/* Stili per i valori positivi e negativi */
    .positive-value {
        color: #4CAF50;
        font-weight: 600;
    }
    .negative-value {
        color: #F44336;
        font-weight: 600;
    }

.hide-fields {
    display: none;
}
.show-fields {
    display: inline-block;
}

.period-filter-form {
    margin-bottom:10px;
}

.filter-container {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: nowrap;
}

.period-select {
    width: auto;
    min-width: 200px;
    margin:0px;
}

#custom-date-fields {

   gap: 1rem;
   flex-direction: row;
   align-items: center;
}

#custom-date-fields input {
    display: inline-flex !important;
    width: auto;
    margin:0;
}

.button {
    white-space: nowrap;
}

@media (max-width: 1240px) {
    .filter-container {
        flex-direction: column;
        align-items: stretch;
    }
    
     #custom-date-fields {
       flex-direction: column;
       width: 100%;
   }
   
   #custom-date-fields input {
       width: 100%;
   }
}