body {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

/*LOGIN*/
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-container {
    width: 300px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    padding: 0;
}

.login-container img {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: auto;
    margin-bottom: 20px;
}

.login-container input[type="text"],
.login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}

.error-message {
    color: red;
    text-align: center;
    margin-top: 10px;
}
/* Stili CSS per il logo */
.login-container img {
    display: block;
    margin: 0 auto;
    width: 200px; /* Aumentato la dimensione del logo */
    height: auto;
    margin-bottom: 20px;
}

/* Stili CSS per il pulsante di invio */
.login-container input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50; /* Colore rosso più evidente */
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.login-container input[type="submit"]:hover {
    background-color: #45a049; /* Cambiato colore rosso al passaggio del mouse */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*STILE PAGINE*/
header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
}

h1 {
    margin: 0;
    text-align: center;
    padding: 5px;
}

/* Stile per l'icona del menu toggle */
.menu-toggle {
    display: none;
    cursor: pointer;
}

/* Stile per il menu */
nav ul {
    display: flex;
    list-style: none;
    margin: 0;
}

nav ul li {
    margin-right: 20px;
}

nav ul li:last-child {
    margin-right: 0;
}

nav ul li a {
    background-color: #333 !important;
    color: #fff;
    text-decoration: none;
}
nav ul li a:link {
    background-color: #333 !important;
    color: #fff;
    text-decoration: none;
}
nav ul li a:hover {
    color: #e3e3e3;
    text-decoration: none;
}

@media(max-width: 768px) {
    /* Nascondi il menu quando la larghezza è inferiore a 768px */
    nav ul {
        display: none;
        flex-direction: column; /* Imposta la direzione del layout su colonna */
    }

    /* Mostra il menu toggle quando la larghezza è inferiore a 768px */
    .menu-toggle {
        display: block;
    }

    /* Nascondi l'icona del menu toggle sui dispositivi desktop */

}
@media(min-width: 769px) {
    .menu-toggle {
        display: none;
    }
}
.show {
    display: block !important; /* Assicura che il menu sia visibile */
}

/*FORM*/
select, input[type=text], input[type=email], input[type=password], input[type="number"], input[type=datetime-local] {
    width: 100%;
    padding: .375rem .75rem;
    margin: 8px 0 !important;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=submit] {
    background-color: #4CAF50;
}
input[type=submit]:hover  {
    background-color: #45a049;
}

/*STILE FASCIA ORARIA*/
#fasciaOrariaContainer {
    display: flex;
    gap: 20px; /* spazio tra le colonne */
}

#fasciaOrariaContainer .form-group {
    flex: 1; /* ogni colonna occupa metà spazio */
}

/* Gestione della visibilità */
.hidden {
    display: none;
}
.visible {
    display: flex;
}

/*STILE PER I FLAG CAMPAGNA*/
/* Container delle opzioni compatte */
.compact-options {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spaziatura tra le righe delle opzioni */
    margin-bottom: 20px; /* Margine inferiore per separare dalle altre sezioni */
}

.compact-options-label {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 1em;
}

/* Container delle opzioni */
.compact-options-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Spaziatura tra gli elementi */
}

.compact-options-fields div {
    display: flex;
    align-items: center; /* Allinea il testo verticalmente con lo switch */
    gap: 10px; /* Spaziatura tra lo switch e il testo */
}

/* Stile per il testo accanto agli switch */
.compact-options-fields span {
    font-size: 0.9em;
    color: #333;
    cursor: pointer; /* Mostra che il testo è cliccabile */
}

/* Nasconde la checkbox */
.compact-options-fields input[type="checkbox"] {
    display: none;
}

/* Stile per lo switch toggle */
.compact-options-fields label.switch {
    position: relative;
    display: inline-block;
    width: 40px; /* Larghezza dello switch */
    height: 20px; /* Altezza dello switch */
    background-color: #ccc; /* Colore di sfondo quando disattivato */
    border-radius: 20px; /* Arrotonda i bordi */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    transition: background-color 0.3s; /* Animazione per il cambio colore */
}

/* Cerchio dello switch */
.compact-options-fields label.switch::before {
    content: '';
    position: absolute;
    top: 3px; /* Posizione dall'alto */
    left: 3px; /* Posizione da sinistra */
    width: 14px; /* Diametro del cerchio */
    height: 14px;
    background-color: white; /* Colore del cerchio */
    border-radius: 50%; /* Arrotonda il cerchio */
    transition: transform 0.3s; /* Animazione per il movimento */
}

/* Stato attivo (checkbox selezionata) */
.compact-options-fields input[type="checkbox"]:checked + label.switch {
    background-color: #4caf50; /* Colore verde quando attivo */
}

.compact-options-fields input[type="checkbox"]:checked + label.switch::before {
    transform: translateX(20px); /* Sposta il cerchio a destra */
}

/*CAMPI EMAIL SU RIGA*/
.row-fields {
    display: flex;
    gap: 15px; /* Spaziatura tra i campi */
    margin-bottom: 15px; /* Margine inferiore per separazione */
    flex-wrap: wrap; /* Adatta il layout per schermi più piccoli */
}

.field {
    flex: 1; /* Ogni campo prende la stessa larghezza disponibile */
    min-width: 200px; /* Larghezza minima per evitare campi troppo stretti */
}

.field label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 0.9em;
}

.field input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}


/*margine filtri head tabella*/
.dataTables_length, #myTable_filter,.dataTables_info,.dataTables_paginate {
    margin: 1%;
}
/*tfoot come header per portare i filtri in alto*/
tfoot {
    display: table-header-group;
}
/*popup*/
.popup-style {
    border: 1px solid #000;
    display: none;
    position: fixed;
    top: 1%; /* Posizione rispetto al top della finestra del browser */
    left: 1%; /* Posizione rispetto al lato sinistro della finestra del browser */
    width: 98%; /* Larghezza del popup */
    height: 98%; /* Altezza del popup */
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    z-index: 9999;
    animation: fadeIn 0.5s ease;
    overflow: auto; /* Aggiungi una scrollbar se il contenuto è troppo grande */
}

.popup-style .close-btn {
    position: absolute;
    top: 10px;
    right: 35px;
    cursor: pointer;
    color: red; /* Cambia il colore del pulsante di chiusura a rosso */
    font-size: 50px; /* Aumenta la dimensione del carattere */
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Stilizzazione dei filtri */
#myTable input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
    transition: border-color 0.3s ease;
}

#myTable input[type="text"]:focus {
    outline: none;
    border-color: green; /* Cambia il colore del bordo quando il filtro ottiene il focus */
}

/*Alert*/
.highlight {
    background-color: #ffcccc !important; /* Cambia il colore dello sfondo a rosso */
}


/*TABS POPUP*/
/* Nascondi tutti i tabcontent tranne il primo */
.tabcontent {
    display: none;
}

/* Stile del tablink */
.tablinks {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    padding: 10px;
    cursor: pointer;
}

/* Aggiungi uno sfondo grigio chiaro quando si passa sopra un tablink */
.tablinks:hover {
    background-color: #ddd;
}

/* Stile del tablink attivo */
.tablinks.active {
    background-color: #fff;
}

.tabella-contenitore {
    max-height: 40vh;  /* Imposta l'altezza massima secondo le tue necessità */
    overflow-y: auto; /* Permette lo scorrimento verticale se il contenuto supera l'altezza massima */
    margin-bottom: 20px; /* Distanza dal fondo o dal prossimo elemento */
}

/*STILE TABELLA*/
/* Imposta una larghezza fissa per la colonna Dettagli */
#myTable td:nth-child(1) {
    text-align: center;
}
/*pulsante dettagli*/
.dettagli-btn {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

/*POPUP*/
/* Stile per l'header della popup */
#popup .header {
    padding: 20px;
    border-bottom: 1px solid #eee;
}


#popup .header h2 {
    text-align: center;
    margin-top: 0;
}

/* Stili aggiuntivi per la testata */
#popup .header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#popup .info-group {
    display: flex;
    flex-direction: column;
}

#popup .flex-row {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

#popup .header p {
    margin: 5px;
    flex: 1;
    min-width: 160px; /* Imposta un min-width per ogni p, per gestire il wrapping */
}

#popup .header p span {
    font-weight: bold;
    margin-left: 5px;
}

/* Media query per schermi con larghezza fino a 600px */
@media (max-width: 600px) {
    #popup .flex-row {
        flex-direction: column;
        justify-content: flex-start;
    }

    #popup .header p {
        margin: 5px 0; /* Aumenta il margine superiore e inferiore per migliorare la leggibilità */
    }
}

/* Miglioramenti al layout generale */
#popup {
    padding: 20px; /* Aggiunge un po' di spazio all'interno della popup */
}

.tabs {
    margin-top: 20px; /* Distanza tra la testata e le tabs */
}


/* Stili per le tabs */
.tabs {
    overflow: hidden;
    background: #f1f1f1;
    padding: 0 20px;
}

.tablinks {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 15px;
    transition: background-color 0.3s;
}

.tablinks:hover {
    background-color: #ddd;
}

/* Stile per il contenuto delle tabs */
.tabcontent {
    display: none;
    padding: 20px;
    border-top: none;
}

/* Stile per il bottone "Modifica" */
#modifica-btn {
    background-color: #008000;
    color: white;
    padding: 10px 20px;
    margin: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    width: 96%;
}

#modifica-btn:hover {
    background-color: #006400;
}

/* Mostra il contenuto della tab attiva */
.tabcontent.active {
    display: block;
}

.form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 80%;
    margin: 0 auto; /* Centra il form nella pagina */
}

.form-group {
    margin-bottom: 0.7rem !important;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-submit {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #45a049;
    color: white;
    cursor: pointer;
    font-size: 16px;
}

.form-submit:hover {
    background-color: #0056b3;
}
.message {
    padding: 20px;
    margin: 20px 0;
    border-radius: 5px;
    border-left: 5px solid #007bff; /* Colore blu per un messaggio generico/informativo */
    background-color: #f0f0f0;
    color: #333;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.message.success {
    border-left-color: #28a745; /* Verde per i messaggi di successo */
}

.message.error {
    border-left-color: #dc3545; /* Rosso per i messaggi di errore */
}

.message.warning {
    border-left-color: #ffc107; /* Giallo per i messaggi di avvertimento */
}

#popup-log .close-btn {
    position: absolute;
    top: 10px;
    right: 35px;
    cursor: pointer;
    color: red; /* Cambia il colore del pulsante di chiusura a rosso */
    font-size: 50px; /* Aumenta la dimensione del carattere */
}

/* Allinea la sezione di selezione records e il pulsante "Legenda" orizzontalmente */
.dataTables_length {
    display: flex;
    align-items: center;
}

/* Stile del pulsante "Legenda" */
.styled-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    margin-left: 10px; /* Aggiungi spazio tra la selezione records e il pulsante */
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.styled-button i {
    margin-right: 5px;
}

.styled-button:hover {
    background-color: #0056b3;
}

/* STEMADA*/
h2 {
    text-align: center;
    padding: 20px;
}

/*DASHBOARD*/
.dashboard-header {
    text-align: center;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 0px;
}

.dashboard-header h2 {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.dashboard-header p {
    margin: 5px 0 0;
    color: #666;
    font-size: 14px;
}
/*MENU PAGINA DASHBOARD E CONFIGURAZIONE*/
.menu-dashboard-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Modificato da 'center' a 'flex-start' per ridurre lo spazio sopra i blocchi */
    min-height: 80vh; /* Altezza ridotta per evitare di forzare un eccessivo spazio verticale */
    background-color: #f0f0f0;
}

.menu-dashboard {
    width: 60%;
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonne */
    grid-template-rows: repeat(2, auto); /* 2 righe */
    gap: 20px;
    justify-content: center; /* Centra il contenuto orizzontalmente */
}

.menu-dashboard a, .menu-configurazione a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 150px; /* Altezza aumentata */
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.3s;
}

.menu-dashboard a:hover, .menu-configurazione a:hover {
    background-color: #45a049;
    transform: scale(1.05);
    text-decoration: none; /* Nessuna sottolineatura */
    color: white; /* Mantieni il testo bianco */
}

.menu-dashboard a i {
    font-size: 24px;
    margin-bottom: 10px;
}

.menu-dashboard a span {
    font-size: 14px;
}

/* Modifica per .menu-configurazione-container */
.menu-configurazione-container {
    /*display: flex;*/
    text-align: center;
    justify-content: center;
    align-items: flex-start; /* Evita il centering verticale completo */
    background-color: #f0f0f0;
    padding: 20px; /* Aggiunge spazio interno per una migliore estetica */
    margin-bottom: 20px; /* Margine tra le sezioni */
    min-height: auto; /* Rimuove l'altezza minima fissa */
    height: auto; /* Lascia che l'altezza sia definita dal contenuto */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: migliora il look */
    border-radius: 10px; /* Optional: arrotonda gli angoli */
}

/* Modifica per .menu-configurazione */
.menu-configurazione {
    width: 100%; /* Occupazione completa dello spazio genitore */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Layout flessibile */
    gap: 20px;
    padding: 20px; /* Spaziatura interna per estetica */
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Modifica per i collegamenti */
.menu-configurazione a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%; /* Adatta gli elementi alla larghezza disponibile */
    padding: 15px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

.menu-configurazione a:hover {
    background-color: #45a049;
    transform: scale(1.05);
}

/* Responsive: Impostazioni per schermi più piccoli */
@media (max-width: 768px) {
    .menu-configurazione {
        grid-template-columns: repeat(2, 1fr); /* 2 colonne su schermi stretti */
    }
}

@media (max-width: 480px) {
    .menu-configurazione {
        grid-template-columns: 1fr; /* 1 colonna su schermi molto piccoli */
    }
}

.menu i {
    padding-right: 2px;
}

/*PAGINA CAMPAGNE*/
#formCampagna select,#formCampagna input[type=text],#formCampagna input[type=email],#formCampagna input[type=password],#formCampagna input[type="number"],#formCampagna input[type=datetime-local] {
    width: 100%;
    padding: .375rem .75rem;
    margin: 0 !important;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
#formCampagna .bold {
    font-size: 0.9rem;
    font-weight: bold;
}

/* Stile per la pagina delle tabelle */
#listeTable {
    width: 100%;
}

/*SEZIONE UPLOAD*/
.upload-section {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: height 0.3s ease;
}

/* Stile per il form di upload */
#form-upload-lista input[type="file"], #form-upload-lista-blocco input[type="file"]  {
    width: 100%;
    margin-top: 10px;
}

#form-upload-lista label, #form-upload-lista-blocco label  {
    font-weight: bold;
}

#form-upload-lista input[type="submit"], #form-upload-lista-blocco input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#form-upload-lista input[type="submit"]:hover, #form-upload-lista-blocco input[type="submit"]:hover {
    background-color: #45a049;
}

/*TOGGLE ICONIZZA UPLOAD*/
/* Transizione per le sezioni toggle */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.toggle-content {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    text-decoration: none;
}
.toggle-content :hover {
}

.toggle-content.hidden {
    max-height: 0;
    opacity: 0;
}

.toggle-content.show {
    max-height: 500px; /* Limita l'altezza per un effetto più controllato */
    opacity: 1;
}
/* Stile per l'icona di toggle per minimizzare/massimizzare */
.toggle-section-icon {
    color: #4CAF50; /* Imposta il colore dell'icona a verde */
    cursor: pointer; /* Cambia il cursore in pointer per indicare che è cliccabile */
    transition: color 0.3s ease; /* Transizione per il cambio colore, se necessario */
}

/* Stile al passaggio del mouse */
.toggle-section-icon:hover {
    color: #45a049; /* Colore più brillante al passaggio del mouse */
}

.upload-content {
    margin-top: 20px;
    max-height: 500px; /* Imposta una altezza massima di base (puoi adattare in base al contenuto) */
}

/*LISTE SEZIONE*/
.liste-section, .storico-unsubscribe-section, .storico-campagne-section, .campagna-dettagli-section, .gestione-utenti-section {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: height 0.3s ease;
}

.liste-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*PAGINA CREAZIONE CAMPAGNA*/
.container-campagna-testata, .container-campagna-corpo {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: height 0.3s ease;
}
/*TABELLE LISTE IN CREAZIONE CAMPAGNA*/
.campagna-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8em; /* Riduci il font per compattezza */
}

.campagna-table th, .campagna-table td {
    border: 1px solid #ddd;
    padding: 6px !important; /* Riduci il padding per una visualizzazione più compatta */
    text-align: left;
}

.campagna-table th {
    background-color: #e6e6e6; /* Colore leggermente diverso per la tabella di campagna */
    font-weight: bold;
}

.dataTables_wrapper .dataTables_paginate {
    margin: 0;
}

/*STILE LUNGHEZZA RISULTATI*/
.dataTables_length select {
    background-color:#fff !important;
}

/* STILE CERCA*/
.dataTables_filter {
    padding-top: 2%;
    width: 50%;
}
.dataTables_filter label{
    width: 100%;
}

.dataTables_filter input {
    width: 60%; /* Rendi il campo di ricerca più compatto */
    font-size: 0.85em;
    padding: 4px;
    background-color: #fff !important;
}
/*RIMUOVI PUBBLICITA' UPGRADE TINYMCE*/
.tox-promotion {
    display: none !important;
}
#allegatiContainer input {
     min-height: 45px !important;
 }
#allegatiContainer {
    margin-bottom: 10px;
}
/*AREA SPAMTEST*/
.spam-test-result {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-family: monospace;
    white-space: pre-wrap;
    overflow-x: auto;
}
/*STILE BLOCCO ALLEGATI*/
.allegato-blocco {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.remove-allegato {
    color: red;
    font-size: 20px;
    border: none;
    background: none;
    cursor: pointer;
}

.remove-allegato:hover {
    color: darkred;
}

/*IMPLEMENTAZIONE LISTE*/
/* Stili specifici per la pagina di mappatura della lista di importazione */

.mappatura-import {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.mappatura-import th,
.mappatura-import td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

.mappatura-import th {
    background-color: #f4f4f4;
}

.mappatura-import select.colonna-mappatura {
    width: 100%;
    padding: 5px;
    font-size: 1em;
}

.mappatura-import-form {
    margin: 20px 0;
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.valid-field {
    border: 2px solid green;
    background-color: #eaffea;
}

.invalid-field {
    border: 2px solid red;
    background-color: #ffeaea;
}

.btn-import {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 20px;
}

.btn-import:hover {
    background-color: #45a049;
}
.btn-import a {
    color: #fff;
}
.btn-import a:hover {
    color: #fff;
    text-decoration: none;
}

.mappatura-import-form label {
    font-weight: bold;
    margin-top: 10px;
    display: block;
}

.mappatura-import-form input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}
.riepilogo-righe {
    font-weight: bold;
    margin-top: 15px;
    padding: 10px;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: inline-block;
}
.correzione-record {
    width: 100%;
}
.correzione-record th {
    text-align: left;
}
.correzione-record td {
    padding: 5px;
}
.email-input {
    width: 95%;
    padding: 5px;
    font-size: 1em;
}
.form-container {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

td a:hover {
    text-decoration: none !important;
}
.btn-right {
    float: right;
}
/*FRECCE ORDINAMENTO ALLEGATI*/
.order-up {
    margin-right: 10px;
}
/*CHECKBOXES UNSUBSCRIBE*/
.checkbox-unsubscribe:disabled {
    background-color: #f5f5f5; /* Colore di sfondo neutro */
    border: 2px solid #ccc;   /* Bordo visibile */
    /*cursor: not-allowed;      /* Indicatore che è disabilitata */
    appearance: none;         /* Rimuove lo stile di default */
    width: 15px;              /* Dimensioni personalizzate */
    height: 15px;
    display: inline-block;
    margin: 0 auto;
}
.checkbox-unsubscribe:disabled:checked {
    background-color: #4caf50; /* Colore per lo stato checked */
    border-color: #4caf50;     /* Cambia colore del bordo per lo stato check*/
}
.filter-link {
    color: #007bff;      /* un blu tipico di link */
    font-weight: normal;
    text-decoration: underline;
    cursor: pointer;
}

.filter-link.active {
    color: #000;         /* nero */
    font-weight: bold;   /* grassetto */
    text-decoration: none;
}

.campagna-dettagli-section {
    width: 60% !important;
}

.riga-dettagli {
    display: flex;
    padding: 15px;
    align-items: center;
}

/* Alternanza dei colori di sfondo */
.riga-dettagli:nth-child(odd) {
    background-color: #f9f9f9;

}

.riga-dettagli:nth-child(even) {
    background-color: #e9e9e9;
}

/* Stili per le etichette */
.riga-dettagli-label {
    flex: 1;
}

/* Stili per i valori */
.riga-dettagli-value {
    flex: 2;
    text-align: right;
}

/* Miglioramento dell'allineamento su schermi piccoli */
@media (max-width: 600px) {
    .riga-dettagli {
        flex-direction: column;
        align-items: flex-start;
    }

    .riga-dettagli-label, .riga-dettagli-value {
        flex: none;
        width: 100%;
        margin-bottom: 5px;
    }

    .riga-dettagli-label {
        font-weight: bold;
    }
}
.orange {
    color: orange;
}
.red {
    color: red;
}
.green {
    color: green;
}

/*css grafici a torta bounce*/
.chart-row {
    display: flex; /* Abilita il layout flessibile */
    justify-content: space-between; /* Spaziatura tra i grafici */
    gap: 20px; /* Distanza tra i grafici */
    margin-top: 20px;
}

.chart-item {
    flex: 1; /* Ogni grafico occupa uno spazio uguale */
    max-width: 48%; /* Limita la larghezza per evitare che superino il 100% */
    height: 350px; /* Altezza fissa per i grafici */
}

/* SPINNER CARICAMENTO */
#spinnerGlobal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    z-index: 9999;
    text-align: center;
}

/* Posizionamento del contenuto al centro */
.spinnerContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* SPINNER OK */
#spinnerOK {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    z-index: 9999;
    text-align: center;
}

.confirm-check {
    width: 50px;
    height: 50px;
    background-color: green;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    opacity: 0;
    transform: scale(0.5);
    animation: fadeInScale 0.4s ease-in-out forwards;
}

/* Disegno della spunta */
.confirm-check::after {
    content: '';
    width: 12px;
    height: 24px;
    border-right: 4px solid white;
    border-bottom: 4px solid white;
    transform: rotate(45deg);
    position: absolute;
    opacity: 0;
    animation: checkAppear 0.3s ease-in-out 0.3s forwards;
}

/* Animazioni */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animazione della spunta */
@keyframes checkAppear {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(45deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(45deg);
    }
}