/* styles.css */
/* stile per RapportiApp
/* Stile per il contenitore principale */
body {
    margin: 0;
    padding: 0;
    /*display: flex;*/
    height: 100vh; /* Imposta l'altezza del body a 100% del viewport */
    overflow-x: hidden; /* Nasconde eventuali barre di scorrimento verticali */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    font-family: 'Montserrat', sans-serif;
}
body.error-page {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-image: url('img/Sadness.png');
    background-size: 20%;
    background-repeat: no-repeat;
    background-position: center bottom;
    display: flex;
    align-items: flex-end;
}
a {
    color: #E66239; /* Colore predefinito dei link */
    transition: color 0.3s ease; /* Transizione del colore al passaggio del mouse */
}

/* Stile per i link al passaggio del mouse */
a:hover {
    color: #fc9677; /* Nuovo colore al passaggio del mouse */
}
.sidebar-2 {
    display: none;
}
/* Stile per la barra laterale sidebar */
.container-sidebar {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100vh;
  }
.sidebar {
    position: fixed;
    width: 220px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: #fff;
    padding: 24px;
    border-radius: 0 30px 0 0;
    transition: all 0.3s;
    z-index: 999;
    top: 0;
    box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.1);
  }
  .sidebar .head {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f6f6f6;
  }
  .user-img {
    width: 50px;
    height: 50px;
    border-radius: 20%;
    overflow: hidden;
  }
  .user-img img {
    width: 100%;
    object-fit: cover;
  }
  .user-details .title,
  .menu .title {
    font-size: 10px;
    font-weight: 500;
    color: #757575;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .user-details p.name {
    font-size: 24px;
    font-weight: bold;
    color: #405764;
  }
  .user-details p {
    margin: 0;
  }
  .nav {
    /* flex: 1; */
    margin-left: 0;
  }
  .menu ul {
    padding: 0;
  }
  .menu ul li {
    position: relative;
    list-style: none;
    margin-bottom: 5px;
  }
  .menu ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #757575;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 8px;
    transition: all 0.3s;
  }
  .menu ul li > a:hover,
  .menu ul li.active > a {
    color: #000;
    background-color: #f6f6f6;
  }
  .menu ul li .icon {
    font-size: 20px;
  }
  .menu ul li .icon-red {
    font-size: 20px;
    color: red;
  }
  .menu ul li .text {
    flex: 1;
  }
  .menu ul li .arrow-menu {
    font-size: 14px;
    transition: all 0.3s;
  }
  .menu ul li.active .arrow-menu {
    transform: rotate(180deg);
  }
  .menu .sub-menu {
    display: none;
    margin-left: 20px;
    padding-left: 20px;
    padding-top: 5px;
    border-left: 1px solid #f6f6f6;
  }
  .menu .sub-menu li a {
    padding: 10px 8px;
    font-size: 12px;
  }
  .menu:not(:last-child) {
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #f6f6f6;
  }
  .menu-btn {
    position: absolute;
    right: -14px;
    top: 3.5%;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #757575;
    border: 2px solid #f6f6f6;
    background-color: #fff;
  }
  .menu-btn:hover i {
    color: #000;
  }
  .menu-btn i {
    transition: all 0.3s;
  }
  .sidebar.active {
    width: 75px;
  }
  .sidebar.active .menu-btn i {
    transform: rotate(180deg);
  }
  .sidebar.active .user-details {
    display: none;
}
  .sidebar.active .menu .title {
    text-align: center;
  }
  .sidebar.active .menu ul li .arrow-menu {
    display: none;
  }
  .sidebar.active .menu > ul > li > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar.active .menu > ul > li > a .text {
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    border-radius: 4px;
    color: #fff;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
  }
  .sidebar.active .menu > ul > li > a .text::after {
    content: "";
    position: absolute;
    left: -5px;
    top: 20%;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    background-color: #000;
    transform: rotate(45deg);
    z-index: -1;
  }
  .sidebar.active .menu > ul > li > a:hover .text {
    left: 50px;
    opacity: 1;
    visibility: visible;
  }
  .sidebar.active .menu .sub-menu {
    position: absolute;
    top: 0;
    left: 20px;
    width: 200px;
    border-radius: 20px;
    padding: 10px 20px;
    border: 1px solid #f6f6f6;
    background-color: #fff;
    box-shadow: 0px 10px 8px rgba(0, 0, 0, 0.1);
}

/* Stile per il contenuto principale */
.content {
    flex: 1; /* Il contenuto principale si espande per occupare lo spazio rimanente */
    padding: 20px;
    margin-left: 260px; /* Crea spazio vuoto a sinistra del contenuto principale */
    box-sizing: border-box; /* Include il padding nello spazio assegnato */
    align-self: flex-start;
    font-family: 'Montserrat', sans-serif;
    margin-top: -130px;
}

.content-mod {
    flex: 1; /* Il contenuto principale si espande per occupare lo spazio rimanente */
    padding: 20px;
    margin-left: 260px; /* Crea spazio vuoto a sinistra del contenuto principale */
    box-sizing: border-box; /* Include il padding nello spazio assegnato */
    align-self: flex-start;
    font-family: 'Montserrat', sans-serif;
}

/* Stile per la tabella e gli altri elementi della pagina */
table {
    width: auto;
    table-layout: auto;
    border-collapse: collapse;
    font-family: 'Montserrat', sans-serif;
}
/* Imposta una larghezza minima per la colonna dell'ID Progetto */
th:first-child, td:first-child {
    min-width: 60px;
}

.login-box {
    max-width: 400px;
    width: 90%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.login-box h2 {
    font-size: 24px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
}



table, th, td {
    border: 1px solid #ccc;
}
td a {
    text-decoration: none;
    color: inherit;
}

th, td {
    padding: 10px;
    text-align: left;
}
.logout-form {
    position: absolute;
    bottom: 30px;
    left: 20px;
    margin-top: auto;
}
.project-form {
    position: absolute;
    bottom: 80px;
    left: 20px;
    margin-top: auto;
    font-family: 'Montserrat', sans-serif;
}
.user-form {
    position: absolute;
    bottom: 130px;
    left: 20px;
    margin-top: auto;
    font-family: 'Montserrat', sans-serif;
}

.project-form-2 {
    display: none;
}
.user-form-2 {
    display: none;
}
button {
    padding: 10px 20px;
    background-color: #E66239;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.btn-commessa {
    padding: 10px 20px;
    background-color: #E66239;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
}

.btn-sub {
    font-size: x-small;
}

.button-toggle {
    padding: 10px 15px;
    background-color: transparent;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    margin: 5px;
}
.toggle-button-container {
    display: none;
}

.button-norm {
    padding: 10px 20px;
    background-color: #E66239;
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.button-download {
    padding: 10px 20px;
    background-color: #696969;
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    margin-top: 5px;
}

.button-norm-att {
    padding: 10px 20px;
    background-color: #E66239;
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    /* margin-left: 50%; */
}
.button-norm-att:hover {
    background-color: #be5231;
    text-decoration: none;
    color: white;
}


.button-norm a {
    color: white;
}

.button-rosso {
    background-color: red;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.button-rosso:hover {
    background-color: darkred;
}

/* Stile per i pulsanti al passaggio del mouse */
button:hover, input[type="submit"]:hover {
    background-color: #be5231;
}
/* Stile per il contenitore dei dettagli del progetto */
.project-details {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px;
    background-color: #f5f5f5;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    /*display: flex; /* Utilizza un layout flessibile per allineare i contenuti in orizzontale */
    /*flex-direction: row;
    /*justify-content: space-between; /* Distribuisci gli elementi orizzontalmente con spazio tra di loro */
    align-items: center; /* Allinea verticalmente i contenuti al centro */
    margin-bottom: 10px; /* Aggiungi spazio tra questa sezione e il resto del contenuto */

}
.project-cont {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.project-id {
    padding: 10px 50px; /* Aggiungi spazio attorno al testo */
    border: 1px solid #ccc; /* Aggiungi un bordo sottile */
    border-radius: 5px; /* Aggiungi angoli arrotondati */
    font-weight: bold;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

.client-name-expand {
    flex: 1; /* Questa regola farà sì che il div occupi tutto lo spazio rimanente */
    padding: 10px 10px; /* Aggiungi spazio attorno al testo */
    border: 1px solid #ccc; /* Aggiungi un bordo sottile */
    border-radius: 5px; /* Aggiungi angoli arrotondati */
    font-weight: bold;
    text-align: center;
}
.additional-text {
    color: #333; /* Cambia il colore del testo a tua scelta */
    font-size: 14px; /* Cambia la dimensione del carattere a tua scelta */
    font-weight: bold;
    /* min-width: 80%; */
}
.project-resp {
    font-size: 14px;
    font-weight: lighter;
}

.project-resp-nostro {
    border: 2px solid #acacac;
    border-radius: 5px;
    padding: 5px;
    background-color: white;
}

.project-resp-nostro span {
    font-size: 14px;
    font-weight: lighter;
}

/* Stile per i titoli dei dettagli */
.project-details h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

/* Stile per i dettagli specifici */
.project-details p {
    font-size: 16px;
    margin-bottom: 8px;
}

/* Stile per il testo dello stato lavori */
.project-details .status {
    font-weight: bold;
    color: #007bff;
}
.container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: #f0f0f0;
}

/* Stile per il box dei dettagli del progetto */
.project-box {
    border: 1px solid #ccc;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    overflow: auto;
    margin-top: 50px;
    margin-bottom: 100px;
}
.project-box-auto {
    border: 1px solid #ccc;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    /*position: relative;*/
    max-width: 80%;
    overflow: auto;
    margin-top: 50px;
  /*  word-wrap: break-word;*/
}
.project-box-auto-gantt {
    border: 1px solid #ccc;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    /*position: relative;*/
    max-width: 80%;
    overflow: auto;
    margin-top: 50px;
  /*  word-wrap: break-word;*/
  min-height: 400px;
}
.project-box-forn {
    border: 1px solid #ccc;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    /*position: relative;*/
    min-width: 80%;
    max-width: 80%;
    overflow: auto;
    margin-top: 50px;
  /*  word-wrap: break-word;*/
}

/* Stile per i titoli dei dettagli */
.project-box h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

/* Stile per i dettagli specifici */
.project-box p {
    font-size: 16px;
    margin-bottom: 8px;
}

/* Stile per il testo dello stato lavori */
.project-box .status {
    font-weight: bold;
    color: #007bff;
}
/* Stile per l'area bianca dello stato lavori */
.status-area {
    background-color: #fff;
    padding: 10px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    border: 1px solid #ccc;
    text-align: center;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    max-width: 100%;
    word-wrap: break-word;
}
/* Stile per l'area delle note delle attività */
.activity-notes {
    margin-top: 20px;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    overflow: auto;
    max-height: 300px; /* Imposta un'altezza massima per attivare la barra di scorrimento */
    overflow-y: auto; /* Abilita la barra di scorrimento verticale */
    border: 1px solid #ccc; /* Aggiungi un bordo per migliorare la visualizzazione */
}

.activity-notes h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.activity-notes p {
    margin: 0;
    margin-bottom: 8px;
}

.activity-notes hr {
    margin: 15px 0;
    border: none;
    border-top: 1px solid #ccc;
}
/* Stile per le righe pari */
.activity-notes p:nth-child(even) {
    background-color: #f9f9f9;
}

/* Stile per le righe dispari */
.activity-notes p:nth-child(odd) {
    background-color: #fff;
}
/* Stile per la voce Utente */
.activity-notes p .user {
    font-size: 12px; /* Imposta la dimensione del carattere desiderata */
}
.back-button {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: #afafaf;
    border: none;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
}
.print-button {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: #afafaf;
    border: none;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
}
.logo-container {
    background-color: white;
}
/* Stile per le righe pari */
table tr.even {
    background-color: #f9f9f9;
}

/* Stile per le righe dispari */
table tr.odd {
    background-color: #fff;
}
/* Stile per la sezione dei progetti chiusi */
h2 {
    font-size: 24px;
    margin-top: 20px;
    color: #302C4D  ;
}

/* Stile per righe con stato "Chiuso" nella tabella dei progetti chiusi */
table.closed tr.closed {
    color: red; /* Testo rosso */
    text-decoration: line-through; /* Testo barrato */
}
/* Stile per la barra di ricerca */
.search-bar {
    margin-bottom: 20px;
    text-align: center;
    margin-top: 2%;
}

#search-input {
    padding: 8px;
    width: 60%;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
}

#search-button {
    padding: 8px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.3s ease;
}

#search-button:hover {
    background-color: #0056b3;
}
#modifica-button {
    padding: 8px 20px;
    background-color: #ff0000;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.3s ease;
}
/* Stile per il footer */
footer {
    background-color: #333;
    padding: 2px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
}

footer p {
    margin: 0;
    font-size: x-small;
    color: #f0f0f0;
}
/* Stili per il modulo di installazione */
.installation-form {
    margin: 0 auto;
    padding: 40px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.installation-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.installation-form input[type="text"],
.installation-form input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 16px;
}

.installation-form input[type="submit"] {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}
/* Stile per il messaggio quando il file config.php esiste già */
.config-exists-message {
    color: #ff0000; /* Colore rosso per il testo */
    font-weight: bold; /* Testo in grassetto */
    margin-top: 10px; /* Spazio superiore */
}
.loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.loader {
    border: 8px solid #3498db;
    border-top: 8px solid #ffffff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

p {
    /* margin-top: 20px; */
    font-size: 18px;
}

ol li {
    font-size: 18px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Stile per la pagina di installazione completata */
.install-complete {
    text-align: center;
    margin-top: 100px;
    font-family: 'Montserrat', sans-serif;
}

.install-complete h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.install-complete p {
    font-size: 18px;
    margin-bottom: 20px;
}

.install-complete .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

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

/* Stile per i messaggi di successo */
.success-messages {
    margin-top: 20px;
    text-align: center;
}

.success-messages p {
    color: #4CAF50; /* Colore verde per i messaggi di successo */
    font-size: small;
    font-weight: 600;
    margin: 10px 0;
}
.error-message {
    color: red;
    font-weight: bold;
}
.login-image {
    max-height: 200px; /* Imposta una larghezza massima per l'immagine, regolala secondo le tue esigenze */
    display: block; /* Assicura che l'immagine sia visualizzata come blocco */
    margin-top: 10%;
    
}
.logo {
    width: 100px; /* Larghezza desiderata per il logo */
    height: auto; /* Imposta l'altezza automaticamente in base all'aspect ratio */
    display: block; /* Assicura che l'immagine sia visualizzata come blocco */
    margin: 20px auto; /* Imposta il margine sopra e sotto l'immagine per centrarla verticalmente */
}
/* Stile di base per il checkbox */
.checkbox-input {
    display: none; /* Nascondi l'input effettivo */
}

/* Stile del label del checkbox */
.checkbox-label {
    position: relative;
    cursor: pointer;
    padding-left: 30px; /* Aggiungi spazio a sinistra del label per il falso indicatore */
}

/* Stile del falso indicatore (non selezionato) */
.checkbox-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    border: 2px solid #ccc;
    background-color: #fff;
    transition: border-color 0.3s, background-color 0.3s; /* Aggiungi transizioni */
}

/* Stile del vero indicatore (selezionato) */
.checkbox-input:checked + .checkbox-label::before {
    border-color: #ad492a; /* Cambia il colore del bordo quando selezionato */
    background-color: #E66239; /* Cambia il colore dello sfondo quando selezionato */
}
.footer-content {
    display: inline;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.version {
    text-align: right;
    padding-right: 10px;
    margin-top: -10px;
}
/* Stile per il contenitore dei "Progetti Aperti" */
#open-projects-container {
    max-height: 800px; /* Imposta l'altezza massima desiderata per la tabella */
    /*max-width: 1000px;*/
    bottom: 50px;
}

#collaudo-projects-container {
    max-height: 800px; /* Imposta l'altezza massima desiderata per la tabella */
    /*max-width: 1000px;*/
}

/* Stile per la tabella dei "Progetti Aperti" */
#open-projects-table {
    width: 100%; /* Assicura che la tabella occupi tutto lo spazio del contenitore */
}
.grafico {
    /* max-width: 200px;*/
    display: inline-block;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}
.linea-orizzontale {
    width: 100%;
    border: none;
    border-top: 3px solid #E66239;
}

.linea-orizzontale-ceo {
    width: 100%;
    border: none;
    border-top: 3px solid #E66239;
    margin-top: -20px;
}

.project-alert {
    padding: 10px 50px; /* Aggiungi spazio attorno al testo */
    border: 1px solid #E66239; /* Aggiungi un bordo sottile */
    border-radius: 5px; /* Aggiungi angoli arrotondati */
    font-weight: bold;
    align-items: center;
    display: flex;
    font-size: small;
}
.table-completato {
    background-color: #4CAF50;
}
.table-progress {
    background-color: #e4bc71;
}
.table-tostart {
    background-color: #da2100;
    color: #ffffff;
}
.submenu-title {
    font-size: x-small; /* Imposta la dimensione del carattere in piccolo */
    color: #d1d1d1; /* Imposta il colore del testo del sottotitolo */
    margin: 0px 20px; /* Rimuove il margine del paragrafo per posizionare il sottotitolo più vicino al link */
    margin-left: 25px;
}
.submenu-title-modulo {
    font-size: x-small; /* Imposta la dimensione del carattere in piccolo */
    color: #2e2e2e; /* Imposta il colore del testo del sottotitolo */
    text-align: center;
}
.icone-elenco {
    float: right;
    margin-right: 1%;
    color: #696969;
    opacity: 50%;
    transition: opacity 0.3s;
}
.icone-elenco-scaletta {
    float: right;
    margin-left: 10%;
    opacity: 90%;
    transition: opacity 0.3s;
    white-space: nowrap; /* Impedisce che il contenuto vada a capo */

}
.icone-elenco-scaletta:hover {
    opacity: 100%;
}
.icone-elenco-crono {
    float: right;
    margin-right: 10%;
    color: #696969;
    opacity: 50%;
    transition: opacity 0.3s;
}
.icone-elenco-crono:hover {
    opacity: 100%;
}
.icone-elenco-del {
    float: right;
    margin-right: 10%;
    color: #696969;
    opacity: 50%;
    transition: opacity 0.3s;
}
.icone-elenco-del2 {
    float: right;
    color: #696969;
    opacity: 50%;
    transition: opacity 0.3s;
}
.icone-elenco-del:hover {
    opacity: 100%;
    color: rgb(199, 8, 8);
}
.icone-elenco-del2:hover {
    opacity: 100%;
    color: rgb(199, 8, 8);
}
.icone-elenco:hover {
    opacity: 100%;
}
.custom-progress {
    width: 100%; /* Imposta la larghezza desiderata per la barra di progresso */
}
.custom-progress2 {
    width: 100%; /* Imposta la larghezza desiderata per la barra di progresso */
}
.custom-progress-ore {
    background-color: #eee; /* Colore di sfondo della barra di progresso */
    border-radius: 10px; /* Arrotonda gli angoli della barra di progresso */
    width: 100%;
    border: #e2e2e2 1px solid;
}

.custom-progress-ore::-webkit-progress-bar {
    background-color: #eee; /* Colore di sfondo della barra di progresso su browser Webkit (come Chrome e Safari) */
    border-radius: 10px; /* Arrotonda gli angoli della barra di progresso su browser Webkit */
    border: #e2e2e2 1px solid;
}

.custom-progress-ore::-webkit-progress-value {
    background-color: #4CAF50; /* Colore della barra di progresso su browser Webkit */
    border-radius: 10px; /* Arrotonda gli angoli della barra di progresso su browser Webkit */
}

.custom-progress-ore::-moz-progress-bar {
    background-color: #4CAF50; /* Colore della barra di progresso su browser Mozilla Firefox */
    border-radius: 10px; /* Arrotonda gli angoli della barra di progresso su browser Mozilla Firefox */
}


.custom-progress-index {
    width: 100%; /* Imposta la larghezza desiderata per la barra di progresso */
    height: 50px;
    position: relative;
    margin-top: -10px;
}
.custom-progress-index-ordini {
    width: 100%; /* Imposta la larghezza desiderata per la barra di progresso */
    height: 20px;
    background-color: transparent;
}

.custom-progress-index-ordini::-webkit-progress-bar {
    background-color: #eee; /* Colore di sfondo della barra di progresso su browser Webkit (come Chrome e Safari) */
    border-radius: 10px; /* Arrotonda gli angoli della barra di progresso su browser Webkit */
    border: #e2e2e2 1px solid;
}

.custom-progress-index-ordini::-webkit-progress-value {
    background-color: #4CAF50; /* Colore della barra di progresso su browser Webkit */
    border-radius: 10px; /* Arrotonda gli angoli della barra di progresso su browser Webkit */
}

.perc-index {
    text-align: center;
    font-weight: bold;
    font-size: x-small;
    /* margin-top: -5%; */
    /* margin-bottom: -25px; */
}
.perc-index-ordini {
    text-align: center;
    font-weight: bold;
    font-size: x-small;
    /* margin-top: -5%; */
}
.errore-agg {
    text-align: right;
}
/* Stili per il contenitore dei quadrati */
.container-att {
    display: flex;
    flex-wrap: wrap;
    /* width: 80%; */
}

/* Stili per ciascun quadrato */
.square {
    /*width: 25%;*/
    padding: 10px;
    box-sizing: border-box;
}

/* Stili per il contenitore interno del quadrato */
.square-inner {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s ease;
    
}
.square-inner:hover {
    background-color: #c9c9c9;

}
.square-inner a {
    text-decoration: none;
    color: #333;
}
.square-inner a:hover {
    color: #be5231;
}

/* Stili per l'immagine dell'icona calendario */
.calendar-icon {
    width: 100px;
    height: 100px;
    margin-top: 10%;
}

/* Stili per il testo ID e Data */
.square-text {
    font-weight: bold;
}
.date-filter {
    margin-bottom: 20px; /* Aggiungi margine inferiore per separare il filtro dal contenuto */
}

.date-filter label {
    font-weight: bold;
}

.date-filter input[type="date"] {
    width: 150px; /* Imposta la larghezza dei campi data */
    margin-right: 10px; /* Aggiungi margine destro tra i campi */
}

.date-filter input[type="submit"] {
    background-color: #0074d9; /* Colore di sfondo del pulsante */
    color: #fff; /* Colore del testo del pulsante */
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
}

.date-filter input[type="submit"]:hover {
    background-color: #0056b3; /* Cambia il colore di sfondo al passaggio del mouse */
}
.filtro-date {
    text-align: center;
    margin-top: 50px;
}
.tabella-totale {
    width: 100%;
}
.centered-button {
    text-align: center;
}
/* Stili per il popup */
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 9999;
}
/* stili per i dettagli dei progetti */
.project-container {
    display: flex; /* Utilizziamo Flexbox per il layout */
}

.project-dettagli {
    flex: 1; /* La parte sinistra occupa tutto lo spazio rimanente */
    padding: 20px; /* Aggiungi spazio intorno ai dettagli */
    border: 1px solid #ccc; /* Aggiungi un bordo per separare le parti */
}

.project-buttons {
    /* width: 200px; Larghezza fissa per la parte destra con i pulsanti */
    /* padding: 20px; Aggiungi spazio intorno ai pulsanti */
    float: right; /* Allinea a destra utilizzando float */
    /* margin-left: 50%; */
    align-items: center;
}
/* Contenuto esistente */

/* Nuovi stili per le tabelle aggiunte */
.table-container {
    width: 80%;
    margin: 10px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}

.table-container:first-child {
    margin-right: 10px;
    background-color: #f8f8f8; /* Colore diverso per la prima tabella */
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.table-container th, .table-container td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.table-container th {
    background-color: #f2f2f2;
}
.tab-controllo-az {
    margin: 20px;
}
.tab-controllo-LFS {
    margin: 20px;
}
.tab-controllo-LFS th {
    background-color: #3498db;
}
.tab-controllo-GL {
    margin: 20px;
}
.tab-controllo-GL th {
    background-color: #ff6767;
}
.tab-controllo-GIOCOTA {
    margin: 20px;
}
.tab-controllo-GIOCOTA th {
    background-color: rgb(103, 255, 204);
}
.tab-controllo-ER {
    margin: 20px;
}
.tab-controllo-ER th {
    background-color: rgb(103, 255, 123);
}
.table-colored td:first-child {
    background-color: #e7e7e7;
}
.text-right {
    text-align: right;
}
.sidebar a.active {
    background-color: #be5231; /* Cambia il colore di sfondo in quello desiderato */
    color: white; /* Cambia il colore del testo in quello desiderato */
    border-radius: 5px;
    margin-left: 10px;
    width: 80%;
}

.container-dash {
    display: flex;
}
.container-dash-prog {
    display: flex;
    flex-direction: column;
}

.stato-allerta {
    color: rgb(255, 255, 255); /* Colore per le allerte */
    font-weight: bold;
    background-color: red;
    border-radius: 5px;
    padding: 2px;
    margin-bottom: 15px;
    font-size: small;
}
.stato-arrivato {
    color: rgb(255, 255, 255); /* Colore per le allerte */
    font-weight: bold;
    background-color: green;
    border-radius: 5px;
    padding: 2px;
    margin-bottom: 15px;
    font-size: small;
    white-space: nowrap; /* Impedisce che il contenuto vada a capo */
}

.stato-scadenza {
    color: rgb(255, 255, 255); /* Colore per le allerte */
    font-weight: bold;
    background-color: rgb(255, 166, 0);
    border-radius: 5px;
    padding: 2px;
    margin-bottom: 15px;
    font-size: small;
}
.testo-nota {
    color: #333; /* Cambia il colore del testo a tua scelta */
    font-size: 14px; /* Cambia la dimensione del carattere a tua scelta */
    padding-left: 5%;
    padding-right: 5%;
    /* min-width: 80%; */
}
.note-bg {
    background-color: #e2e2e2; /* Colore di sfondo alternato, puoi personalizzare il colore a tuo piacimento */
}
.positive-note {
    background-color: #cafad5;
    border-color: #c3e6cb;
    padding: 10px;
}

.negative-note {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 10px;
}
.note-head {
    text-align: center;
    width: 100%;
}
.project-cont-note {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 80%;
    margin-left: 10%;
}
.box-post-it {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px;
    background-color: #f5f5f5;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    align-items: center; /* Allinea verticalmente i contenuti al centro */
    margin-bottom: 10px; /* Aggiungi spazio tra questa sezione e il resto del contenuto */
    max-height: 300px;
    width: 40%;
    flex: 1;
    position: relative;
    overflow-y: auto;
    border-radius: 10px;
}

.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
}

.overlay-content h2 {
    color: white;
    font-weight: bold;
    font-size: larger;
    margin-bottom: 10px;
}

.overlay-content p {
    color: white;
    font-size: smaller;
    margin: 0;
}
.box-scaletta {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px;
    background-color: #f5f5f5;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    align-items: center; /* Allinea verticalmente i contenuti al centro */
    margin-bottom: 10px; /* Aggiungi spazio tra questa sezione e il resto del contenuto */
    max-height: 300px;
    overflow-y: auto;
    width: 40%;
    flex: 1;
    position: relative;
    border-radius: 10px;
}
.sfondo-chiaro {
    background-color: #f0f0f0; /* Colore di sfondo per le righe pari */
    padding: 5px;
}
.sfondo-scuro {
    background-color: #e0e0e0; /* Colore di sfondo per le righe dispari */
    padding: 5px;
}

.stelle-piene {
    color: rgb(187, 187, 0);
}
td.nome-fornitore {
    min-width: 250px;
}
.icone-elenco-forn {
    float: right;
    margin-right: 5%;
    color: #696969;
    opacity: 50%;
    transition: opacity 0.3s;
}
.icone-elenco-forn:hover {
    opacity: 100%;
}
.icone-elenco-forn-ord {
    float: right;
    margin-right: 5%;
    color: #696969;
    opacity: 50%;
    transition: opacity 0.3s;
}
.icone-elenco-forn-ord:hover {
    opacity: 100%;
    color: #3e9141;
}
.icone-elenco-del-forn {
    float: right;
    margin-right: 3%;
    color: #696969;
    opacity: 50%;
    transition: opacity 0.3s;
}
.icone-elenco-del-forn:hover {
    opacity: 100%;
    color: rgb(199, 8, 8);
}
 /* Aggiungi eventuali stili CSS per la barra di valori */
 .progress-bar {
    width: 100%;
    height: 20px;
    background-color: #e0e0e0;
    margin-top: 5px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.progress-value {
    height: 100%;
    background-color: #4caf50; /* Colore della barra positiva */
    transition: width 0.3s; /* Aggiungi una transizione fluida */
    position: absolute;
    left: 50%; /* Posiziona al centro */
}

.progress-negative {
    background-color: #f44336; /* Colore della barra negativa */
    right: 50%; /* Posiziona al centro */
    transform: translateX(-100%); /* Sposta a sinistra del 100% della larghezza del padre */
}

.value-label {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 20px;
    padding: 0 5px;
    color: #868686;
}
.center-line {
    width: 0.5px;
    height: 100%;
    background-color: #7e7e7e; /* Colore della linea centrale */
    position: absolute;
    left: 50%; /* Posiziona la linea al centro */
    transform: translateX(-50%); /* Corregge la posizione al centro */
}
.responsabile-item {
    display: inline-block;
    width: 30%; /* Imposta la larghezza di ogni elemento responsabile */
    margin-bottom: 5px; /* Aggiunge uno spazio tra gli elementi responsabili */
}

.responsabili-grid {
    column-count: 1; /* Specifica il numero di colonne */
}
.text-esito p {
    margin: 0;
}
.input-ore {
    width: 30px;
}
.text-red {
    color: red;
}
.progetto-attività {
    font-size: xx-small !important;
    font-weight: bold !important;
}
tr.priority-1 {
    background-color: #FF5555; /* rosso */
    /* font-weight: bold; */
    color: white;
    font-size: smaller;
}
tr.priority-2 {
    background-color: #FFAA00; /* arancione */
    font-weight: 500;
    font-size: smaller;
}
tr.priority-3 {
    background-color: #FFFF00; /* giallo */
    font-weight: 300;
    font-size: smaller;
}
tr.priority-4 {
    background-color: #FFFFFF; /* bianco */
    font-size: smaller;
}
tr.priority-5 {
    background-color: green;
    color: white;
    font-size: smaller;
}
/* classi messaggi */
tr.priority-m-1 {
    background-color: #FF5555; /* rosso */
    /* font-weight: bold; */
    font-weight: 500;
    color: white;
    font-size: smaller;
}
tr.priority-m-2 {
    background-color: #FF5555; /* arancione */
    font-weight: 500;
    color: white;
    font-size: smaller;
}
tr.priority-m-3 {
    background-color: #FF5555; /* giallo */
    font-weight: 500;
    color: white;
    font-size: smaller;
}
tr.priority-m-4 {
    background-color: #FF5555; /* bianco */
    font-weight: 500;
    font-size: smaller;
    color: white;
}
tr.priority-m-5 {
    background-color: green;
    color: white;
    font-size: smaller;
}
/* fine classi messaggi */
th.scaletta {
    width: 50%;
}
.home-greeter__icon {
    margin-left: 8px;
    width: 32px;
    height: 32px;
}
.home-top-icon {
    margin-left: 8px;
    width: 25px;
    height: 25px;
}
.avviso-nascosto {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f44336;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 18px;
}

.avviso-successo {
    background-color: #4CAF50;
}
/* Stili specifici per la pagina di dettaglio del fornitore */
.dettaglio-fornitore-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.dettaglio-fornitore-table th, .dettaglio-fornitore-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    width: 25%;
}

.dettaglio-fornitore-title {
    text-align: center;
    color: #333;
    margin-top: 60px;
}

.dettaglio-fornitore-info {
    color: #555;
    font-size: 16px;
    margin-bottom: 10px;
}

.dettaglio-fornitore-name {
    color: #007bff;
}

.dettaglio-fornitore-rating {
    color: #FFD700; /* Colore oro per le stelle */
}

.dettaglio-fornitore-link {
    display: inline-block;
    padding: 8px 16px;
    margin-top: 10px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

.dettaglio-fornitore-link:hover {
    background-color: #0056b3;
}
.econ-table {
    width: 100%;
    border-collapse: collapse;
}

.econ-table th, .econ-table td {
    padding: 8px;
    border: 1px solid #ddd;
}

.even-row {
    background-color: white; /* Colore delle righe pari */
}

.odd-row {
    background-color: #f8f8f8; /* Colore delle righe dispari */
}
#header {
    position: fixed;
    display: flex;
    flex-direction: row;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: #464646;
    padding: 10px;
    color: white;
    text-align: center;
    z-index: 500;
}

#header a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
}

/* #header a:last-child {
    margin-right: 50px;
} */

.box-progetti {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px;
    background-color: #f5f5f5;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    align-items: center; /* Allinea verticalmente i contenuti al centro */
    margin-bottom: 10px; /* Aggiungi spazio tra questa sezione e il resto del contenuto */
    max-height: 300px;
    overflow: auto;
    width: 40%;
    flex: 1;
    position: relative;
    border-radius: 10px;
}
.box-progetti-aperti {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px;
    background-color: #f5f5f5;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    align-items: center; /* Allinea verticalmente i contenuti al centro */
    margin-bottom: 10px; /* Aggiungi spazio tra questa sezione e il resto del contenuto */
    max-height: 300px;
    overflow: auto;
    width: 40%;
    flex: 1;
    position: relative;
    border-radius: 10px;
}
.container-titolo {
    width: 100%;
    z-index: 1;
}
.tab-desc {
    min-width: 300px;
}
.icone-categoria {
    padding: 30px;
    height: 100px;
}
/* Aggiungi questi stili nel tuo tag <style> o nel tuo file CSS esterno */
.note-box {
    margin-top: 20px;
    padding: 10px;
}

.note-table {
    width: 100%;
    border-collapse: collapse;
}

.note-table th, .note-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.icone-file-fornitore {
    font-size: 25px;
}
.resoconto {
    padding: 10px 10px; /* Aggiungi spazio attorno al testo */
    border: 1px solid #ccc; /* Aggiungi un bordo sottile */
    border-radius: 5px; /* Aggiungi angoli arrotondati */
    text-align: right;
}
.tabella-cronoprogramma {
    width: 100%;
    border: 1px;
}
.cella-dettaglio {
    width: 60%;
}
.cella-data {
    white-space: nowrap;
}
.cella-numeri {
    text-align: center;
}
/* Aggiungi il seguente stile nella tua sezione CSS o nel tuo file styles.css */
.progress-bar-container {
    width: 100%;
    height: 20px;
    background-color: #e0e0e0;
    margin-top: 10px;
    border-radius: 10px;
}

.progress-bar-crono {
    height: 100%;
    background-color: #4caf50;
    border-radius: 10px;
}

.progress-label {
    text-align: center;
    margin-top: 5px;
    font-weight: bold;
}
.red-text {
    color: red;
}

.image-table {
    width: 100%;
    border-collapse: collapse;
}

.image-table td {
    padding: 10px;
    text-align: center;
}

.gallery-image {
    max-width: 150px;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.gallery-image:hover {
    transform: scale(1.2); /* Allargamento al passaggio del mouse */
}

.enlarged-image {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    cursor: pointer;
}

.enlarged-image.active {
    display: flex;
    opacity: 1;
}

.enlarged-image img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.close-button {
    position: absolute;
    top: 40px;
    right: 10px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}

.close-button-ca {
    position: absolute;
    top: 40px;
    right: 10px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}

.navigation-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    color: white;
    cursor: pointer;
    user-select: none;
    z-index: 1001;
}

.navigation-arrow.left {
    left: 20px;
}

.navigation-arrow.right {
    right: 20px;
}

.dot-container {
    position: absolute;
    bottom: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 1001;
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active-dot {
    background-color: white;
}

.image-cell {
    position: relative;
}

.delete-link {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: red;
    text-decoration: none;
}
.popup-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.popup-del {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

.popup button {
    margin-top: 10px;
}

.post-it {
    background-color: #ffffcc; /* Colore di sfondo del post-it */
    border: 1px solid #e6e6e6; /* Colore del bordo del post-it */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Ombra leggera */
    padding: 10px; /* Spazio interno del post-it */
    margin-bottom: 15px; /* Spazio tra i post-it */
    border-radius: 10px;
}
.post-it-piccolo {
    font-size: small;
}

.post-it p {
    margin: 0; /* Rimuove il margine predefinito dei paragrafi all'interno del post-it */
}


#confirmDelete {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    /* Altri stili a tua discrezione */
}

#confirmationPopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
.elimina-post-it {
    color: #555;
}
.elimina-post-it:hover {
    color: #ce0202;
}

.tabella-fornitori {
    width: auto;
    table-layout: auto;
}

.highlight-drop-target {
    background-color: #ffcccb; /* Colore di evidenziazione del drop target */
}

.drag-line {
    position: absolute;
    background-color: #007bff; /* Colore della linea di trascinamento */
    width: 2px;
    z-index: 1000;
}

.email-fatt {
    color: red;
    font-size: large;
    font-weight: bold;
}

/* inizio stili dropdown notifiche */

#notifiche-counter {
    background-color: red;
    color: white;
    padding: 3px 5px; /* Riduci il padding per rendere il riquadro più piccolo */
    border-radius: 50%;
    position: absolute;
    top: -8px; /* Posiziona il riquadro in alto */
    left: 8px; /* Posiziona il riquadro a destra */
    display: none; /* Nascondi inizialmente il riquadro */
    font-size: xx-small;
    font-weight: bold;
    border: 2px solid #464646;
}

.notifiche-dropdown {
    position: absolute;
    top: 40px; /* Altezza dell'icona della campanella + spazio */
    right: 0;
    background-color: #f1f1f1;
    border: 1px solid #e0e0e0;
    padding: 10px;
    display: none; /* Inizialmente nascosto */
    max-height: 400px;
    max-width: auto;
    overflow-y: auto;
    border-radius: 10px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

.notifica {
    margin-bottom: 5px;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #ffffcc;
    color: #333;
    width: 200px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.no-notifica {
    margin-bottom: 5px;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #F7FCFF;
    color: #333;
    width: 200px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.btn-notifica {
    display: inline-block;
    padding: 8px 16px;
    background-color: #103fad;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 10px;
    transition: background-color 0.3s ease;
    text-align: center;
}

.btn-notifica:hover {
    background-color: #0d2e7c;
}

.notifica-letta {
    background-color: #c2c2c2; /* Cambia il colore di sfondo per le notifiche lette */
    font-style: italic; /* Puoi aggiungere altri stili per distinguere le notifiche lette */
    opacity: 0.7; /* Opzionale: puoi aggiungere un effetto di dissolvenza per le notifiche lette */
}

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

.data {
    color: #888;
    font-size: 0.8em;
}

.notifica-body {
    margin-top: 5px;
}

.titolo-notifica {
    all: initial;
    color: rgb(70, 70, 70);
    text-transform: none;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.testo-notifica p {
    /* all: initial; */
    text-transform: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: normal;
    color: #464646;
    font-size: smaller;
    position: relative;
    margin-top: -10px;
    text-align: left;
    line-height: 15px;
}

.box-post-it .simplebar-scrollbar::before,
.box-scaletta .simplebar-scrollbar::before,
.box-progetti .simplebar-scrollbar::before,
.box-progetti-aperti .simplebar-scrollbar::before {
    background-color: #E66239;
}

.segna-come-letto {
    background-color: #007bff;
    padding: 1px;
    font-size: xx-small;
    align-content: left;
    margin-top: 10px;
}

.data-notifica {
    font-size: xx-small;
    color: #696969;
    position: relative;
    display: flex;
    flex-direction: row;
    margin-top: 5px;
    font-family: 'Montserrat', sans-serif;
    font-weight: normal;
}

.messaggio-stato {
    text-align: center;
    padding: 10px;
}

/* inizio stili resoconto dashboard */

.container-resoconto {
    display: flex;
    gap: 40px;
}

.container-resoconto-ceo {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.container-resoconto-ceo span {
    color: #242424;
    opacity: 50%;
    font-size: smaller;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.progetti-totali-ceo {
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    border: 2px solid rgb(158, 158, 158);
    padding: 0 10px 5px 10px;
    transition: all 0.3s ease;
    width: 33%;
}

.progetti-totali-ceo:hover {
    background-color: rgb(228, 228, 228);
    cursor: pointer;
}

.progetti-totali {
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    border: 2px solid rgb(158, 158, 158);
    padding: 0 10px 5px 10px;
    transition: all 0.3s ease;
    min-width: 160px;
}

.progetti-totali:hover {
    background-color: rgb(228, 228, 228);
    cursor: pointer;
}

.testo-importo {
    color: #415865;
    font-size: small;
}

.testo-importo-ceo {
    color: #415865;
    font-size: x-small;
}

.progetti-aperti {
    background-color: #fabb46;
    border-radius: 10px;
    border: 2px solid #d1911a;
    padding: 0 10px 5px 10px;
    transition: all 0.3s ease;
    max-width: 120px;
}

.progetti-aperti:hover {
    background-color: #face7d;
    cursor: pointer;
}

.progetti-iniziati {
    background-color: #58fc58;
    border-radius: 10px;
    border: 2px solid #0e970e;
    padding: 0 10px 5px 10px;
    transition: all 0.3s ease;
    max-width: 120px;
}

.progetti-iniziati:hover {
    background-color: #cbffcb;
    cursor: pointer;
}

.progetti-collaudo {
    background-color: #4083ff;
    border-radius: 10px;
    border: 2px solid #0370b9;
    padding: 0 10px 5px 10px;
    transition: all 0.3s ease;
    max-width: 120px;
}

.progetti-collaudo:hover {
    background-color: #0062b3;
    cursor: pointer;
}

.progetti-chiusi {
    background-color: rgb(175, 175, 175);
    border-radius: 10px;
    border: 2px solid rgb(122, 122, 122);
    padding: 0 10px 5px 10px;
    transition: all 0.3s ease;
    max-width: 120px;
}

.progetti-chiusi:hover {
    background-color: rgb(204, 204, 204);
    cursor: pointer;
}

.numero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: xx-large;
    font-weight: 900;
    color: #242424;
}

.testo {
    font-size: small;
    font-weight: 900;
    color: #242424;
    opacity: 80%;
}

.container-resoconto span {
    color: #242424;
    opacity: 50%;
    font-size: smaller;
}


/* inizio stili assistenza */
.container-assistenza {
    margin-top: 100px;
}

.container-assistenza .sub-container {
    display: flex;
    gap: 50px;
    padding: 20px 0;
    border-radius: 15px;
    background-color: #cccccc;
    margin: 10px;
    position: relative;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

.container-assistenza .sub-container .titolo {
    position: relative;
    margin-top: -20px;
}

.container-assistenza .sub-container .menu {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-left: 40px;
}
.container-assistenza .sub-container .menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.container-assistenza .sub-container .menu-btn:nth-child(1) {
    margin-left: 50px;
}

.container-assistenza .sub-container .menu-btn:nth-child(4) {
    border-left: solid gray 2px;
    border-right: solid gray 2px;
    padding: 0 50px;
}

.container-assistenza .sub-container .menu-btn a {
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s ease;
    text-decoration: none;
}

.container-assistenza .sub-container .menu-btn i {
    align-items: center;
    justify-items: center;
    font-size: 30px;
    color: #464646;
    transition: color 0.3s ease;
}

.container-assistenza .sub-container .menu-btn i:hover,
.container-assistenza .sub-container .menu-btn a:hover {
    color: orange;
}

table.tabella-assistenza {
    margin-left: 10px;
    border-radius: 8px;
}

.form-group {
    margin-top: 10px;
    margin-bottom: 10px;
}

.icone-progetti {
    margin-left: 10px;
    margin-top: 5px;
    color: green;
    opacity: 50%;
}

.icone-progetti-1 {
    margin-left: 0;
    margin-top: 5px;
    color: green;
    opacity: 50%;
}

.alert-file-progetto {
    font-size: xx-small;
    font-weight: 900;
    color: red;
}

.icone-progetti-neg {
    margin-left: 10px;
    margin-top: 5px;
    color: red;
    opacity: 70%;
}

.icone-progetti-1-neg {
    margin-left: 0;
    margin-top: 5px;
    color: red;
    opacity: 70%;
}

.tasti-progetto {
    display: flex;
    border-radius: 5px;
    background-color: #afafaf;
    gap: 5px;
    padding: 5px;
    align-items: center;
    justify-content: space-around;
}

.alert-variazione {
    display: flex;
    border-radius: 5px;
    background-color: #ffd000;
    gap: 5px;
    padding: 5px;
    align-items: center;
    justify-content: space-around;
    color: black;
    font-weight: bold;
    margin: 5px 0 5px 0;
    animation: pulse 500ms infinite;
}

@keyframes pulse {
    0%, 100% {
        scale: 100%;
        rotate: 0;
    }
    50% {
        scale: 103%;
        
    }
}

.alert-gratuita {
    display: flex;
    border-radius: 5px;
    background-color: #00d9ff;
    gap: 5px;
    padding: 5px;
    align-items: center;
    justify-content: space-around;
    color: black;
    font-weight: bold;
    margin: 5px 0 5px 0;
    animation: lampeggiare 1s infinite;
}

@keyframes lampeggiare {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.alert-trasferta {
    display: flex;
    border-radius: 5px;
    background-color: #ff3c00;
    gap: 5px;
    padding: 5px;
    align-items: center;
    justify-content: space-around;
    color: rgb(255, 255, 255);
    font-weight: bold;
    margin: 5px 0 5px 0;
    animation: blink-nota 1s infinite;

}

.tasti-progetto button {
    max-width: 155px;
}

.pallino {
    font-size: small;
}

.pallino-rosso {
    font-size: small;
    color: red;
}

.pallino-arancio {
    font-size: small;
    color: orange;
}

.pallino-verde {
    font-size: small;
    color: green;
}

.numero-articoli {
    text-align: left;
    max-width: 50%;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    border: solid 1px #ccc;
    border-radius: 5px;
    margin-top: 5px;
    font-weight: 400;
}

.testo-allerta {
    color: red;
    font-weight: 600;
}

.num-ord {
    color: black;
    font-weight: bold;
    margin-right: 5px;
}

/* Inizio stili progetti aperti */

.container-aperti {
    position: relative;
    display: flex;
    flex-direction: row;
    padding: 10px;
    background-color: #e9e9e9;
    border: 1px solid #ccc;
    border-radius: 15px;
    gap: 20px;
    /* justify-content: space-between; */
    align-items: center;
    margin-bottom: 5px;
    transition: all 0.2s ease;
}

.container-aperti:last-of-type {
    margin-bottom: 150px;
}

.container-aperti:hover {
    transform: translateY(-2px);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.23);
}

.container-aperti .id {
    font-weight: 600;
    width: 5%;
}

.container-aperti .nome {
    font-weight: 600;
    position: relative;
    width: 30%;
    text-align: left;
    text-decoration: none;
}

.container-aperti .nome a {
    text-decoration: none;
    color: #242424;
    transition: all 0.3s ease;
}

.container-aperti .nome a:hover {
    color: #E66239;
}

.container-aperti .nome span {
    position: relative;
    color: red;
    font-weight: bold;
    font-size: xx-small;
}

.container-aperti .nome .importo-offerta {
    position: relative;
    color: #3d3d3d;
    font-weight: bold;
    font-size: x-small;
}

.container-aperti .nome .importo-numero {
    position: relative;
    color: #0e970e;
    font-weight: bold;
    font-size: x-small;
}

.container-aperti .nome .icone {
    display: flex;
    color: #929292;
    position: absolute;
    gap: 5px;
    margin-top: -10px;
}

.container-aperti .nome .icone-file-caricati {
    gap: 5px;
    color: #929292;
    margin-top: 10px;
}

.container-aperti .date {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 18%;
    text-align: left;
}

.container-aperti .date span {
    font-weight: 600;
}

.container-aperti .stato-articoli {
    font-size: smaller;
    width: 28%;
    text-align: left;
}

.container-aperti .stato-articoli i {
    gap: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    font-size: smaller;
}

.container-aperti .completamento span {
    text-align: center;
    font-size: xx-small;
    font-weight: 800;
    line-height: 10px;
}

.icone-header {
    margin-left: 50%;
    transform: translateX(-50%);
    font-size: initial;
}

.bug-report {
    display: flex;
    justify-content: center;
    background-color: rgb(255, 0, 0);
    position: absolute;
    right: 25px;
    top: 0;
    height: 100%;
    text-align: center;
    align-items: center;
    border-radius: 10px;
    transition: all 0.3s ease;
    font-weight: 600;
    padding: 0 10px;
    font-size: small !important;
}

.bug-report-menu {
    background-color: red;
    padding: 10px;
    color: white;
    border-radius: 10px;
    font-weight: 600;
    transition: 0.3s all ease;
}

.bug-report-menu:hover {
    background-color: rgb(182, 2, 2);
}

.bug-report:hover {
    background-color: rgb(199, 0, 0);
}

.bug-report i {
    color: white;
}

.ricavo {
    color: #0e970e;
    font-weight: bold;
}

.ricavo-neg {
    color: #e60101;
    font-weight: bold;
}

/* inizio stile ordine a fornitore */
.container-ordine-fornitore {
    background-color: gainsboro;
    padding: 15px;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

.container-ordine-fornitore:hover {
    transform: translateY(-2px);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.23);
}

.descrizione-ordine {
    width: 40%;
}

.titolino {
    font-size: smaller;
    font-weight: 600;
    color: #696969;
    white-space: nowrap;
}

.descrizione-ordine .descrizione-articolo {
    font-size: large;
    font-weight: bold;
}

.container-ordine-fornitore .icona-pdf i {
    color: rgba(255, 0, 0, 0.548);
    font-size: 30px;
    transition: all 0.3s ease;
}

.container-ordine-fornitore .icona-pdf a {
    color: rgba(255, 0, 0, 0.548);
    font-size: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.container-ordine-fornitore .icona-pdf a:hover {
    color: red;
    transform: translateY(-3px);
}

.container-ordine-fornitore .ordine-fornitore {
    width: 10%;
}

.progetto-ordine {
    width: 20%;
}

.container-ordine-fornitore .stato-ordine-fornitore i {
    color: #cccccc;
    font-size: 30px;
    transition: all 0.3s ease;
}

.container-ordine-fornitore .stato-ordine-fornitore i:hover {
    color: green;
    font-size: 30px;
    transition: all 0.3s ease;
}

/* inizio classi conteggio aziende */
.container-conto-aziende {
    background-color: gainsboro;
    padding: 5px 15px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

.container-conto-aziende .box-lfs {
    background-color: #86b9d6;
    border-radius: 10px;
    border: 3px solid #415865;
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    position: relative;
    align-items: center;
}

.container-conto-aziende .numero-box {
    color: #525252;
    font-size: 30px;
    font-weight: bold;
}

.container-conto-aziende .titolo-box-aziende {
    font-size: 10px;
    color: #686868;
    font-weight: 600;
}

.container-conto-aziende .titolo-box-aziende span {
    color: black;
    font-size: 20px;
    font-weight: bold;
}

.container-conto-aziende .box-gl {
    background-color: #f8bfbf;
    border-radius: 10px;
    border: 3px solid #a33c38;
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    position: relative;
    align-items: center;
}

.container-conto-aziende .box-gct {
    background-color: #90d5df;
    border-radius: 10px;
    border: 3px solid #009b93;
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    position: relative;
    align-items: center;
}

.container-conto-aziende .box-er {
    background-color: #c4faaf;
    border-radius: 10px;
    border: 3px solid #009b3b;
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    position: relative;
    align-items: center;
}

.container-conto-aziende .box-solar {
    background-color: #8fddf5;
    border-radius: 10px;
    border: 3px solid #2684f0;
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    position: relative;
    align-items: center;
}

.container-conto-aziende .box-irma {
    background-color: #eab5ff;
    border-radius: 10px;
    border: 3px solid #f654fc;
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    position: relative;
    align-items: center;
}

.popup-fornitore {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.close-popup-fornitore {
    color: gray;
    position: absolute;
    right: 5%;
    top: 5%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-popup-fornitore:hover {
    color: red;
    transform: translateY(-1px);
}

/* stile selettore tabs */
.tabs {
    display: flex;
    margin-bottom: 20px;
}

.tab-btn {
    margin-right: 10px;
    padding: 10px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    position: relative;
}

.active-indicator {
    position: absolute;
    height: 40px;
    background-color: #E66239; /* Colore dell'indicatore */
    transition: width 0.3s ease, transform 0.3s ease;
    z-index: -1;
    border-radius: 5px;
    left: 0;
}

.tab-btn:not(.active) {
    color: #525252; /* Colore del testo quando il pulsante non è attivo */
    font-weight: 600;
    font-size: larger;
}

.tab-btn.active {
    font-weight: 600;
    font-size: larger;
    padding: 10px;
}

.tab-btn:hover {
    background-color: #c9c9c9
}

.allerta-nota {
    padding: 10px 10px; /* Aggiungi spazio attorno al testo */
    border: 1px solid #ccc; /* Aggiungi un bordo sottile */
    border-radius: 5px; /* Aggiungi angoli arrotondati */
    font-weight: bold;
    text-align: center;
    align-items: center;
}

.allerta-nota .contenuto-nota {
    color: red;
    position: relative;
    /* top: 50%;
    transform: translateY(-50%); */
    animation: blink-nota 1s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes blink-nota {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.oggetto-note-allerta {
    position: relative;
    padding-top: 10px;
    text-align: left;
    font-size: x-small;
}

.oggetto-note-allerta span {
    padding-top: 5px;
}

.allerta-nota .contenuto-nota i {
    font-size: 50px;
}

.allerta-nota .contenuto-nota a {
    text-decoration: none;
    color: red;
}

.btn-modello {
    background-color: #b3009b;
}

.btn-note-tecniche {
    border: 10px solid white;
    border-style: double;
    border-radius: 10px;
}

.container-video {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    margin-top: 60px;
    padding-left: 20px;
    gap: 50px;
    justify-content: space-between;
}

/* Stile del thumbnail del video */
.video-thumbnail {
    margin-bottom: 20px;
    cursor: pointer;
    display: flex;
    width: calc(33.33% - 50px); /* Larghezza del 33.33% meno lo spazio tra le colonne */
    margin-bottom: 20px; /* Spazio tra i video */
}


.dati-video {
    padding: 20px;
    margin-top: -40px;
}

.video-thumbnail img {
    width: 120px; /* Imposta la larghezza desiderata */
    height: auto; /* Imposta l'altezza automaticamente per mantenere le proporzioni */
    border-radius: 20px;
    transition: all 0.3s ease;
}

.video-thumbnail img:hover {
    transform: translateY(-2px);
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.5);  
}

/* Stile dell'overlay */
#video-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

#video-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
}

#video-player {
    width: 100%;
    height: auto;
    display: block;
}

.close-btn {
    position: relative;
    width: 20px;
    top: 0;
    right: 0;
    color: #525252;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-btn:hover {
    color: red;
}

#close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.video-thumbnail .dati-video .dettagli-video {
    font-size: small;
    color: #525252;
    white-space: nowrap;
    margin-top: -20px;
    margin-bottom: 5px;
}

.titolo-pagina-video {
    margin-top: 60px;
    margin-left: 20px;
}

/* Nascondi il modal per default */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
    border-radius: 15px;
}

.video-success {
    font-weight: bold;
    color: green;
}

.modal-content input[type="text"] {
    border: 2px solid #525252;
    border-radius: 5px;
    height: 25px;
}

.modal-content textarea {
    border: 2px solid #525252;
    border-radius: 5px;
    height: 100px;
    width: 80%;
}

.conteggio-caratteri {
    font-size: x-small;
    color: #525252;
    font-weight: 600;
}

.modal-content input[type="submit"] {
    background-color: #E66239;
    color: white;
    font-weight: bold;
    height: 50px;
    width: 200px;
    border: 2px solid #525252;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.modal-content input[type="submit"]:hover {
    background-color: #cc4015;
}

.zona-video {
    width: 100%;
    border: 5px dashed #cecece;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: larger;
    color: #cecece;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 20px 0;
    margin-bottom: 20px;
    font-size: larger;
    font-weight: bold;
}

.zona-video i {
    height: 40px;
    font-size: xx-large;
}

.zona-video:hover {
    border: 5px dashed #acacac;
    background-color: #e6e5e5;
    color: #acacac;
}

.testo-nota-progetto {
    font-size: x-small;
    margin-left: 10px;
}
.menu ul li a .presto-disponibile {
    background-color: orange;
    padding: 2px 5px;
    color: white;
    font-size: 6pt;
    font-weight: bold;
    white-space: nowrap;
    border-radius: 10px;
    width: 70%;
    text-align: center;
}

.menu ul li a .novita {
    background-color: rgb(0, 177, 29);
    padding: 2px 5px;
    color: white;
    font-size: 6pt;
    font-weight: bold;
    white-space: nowrap;
    border-radius: 10px;
    width: 70%;
    text-align: center;
    max-width: 50px;
}

.menu ul li a .presto-disponibile-mini {
    background-color: orange;
    padding: 2px 5px;
    color: white;
    font-size: 5pt;
    font-weight: bold;
    white-space: nowrap;
    border-radius: 10px;
    width: 50%;
    text-align: center;
}

@media (max-width: 800px) {
    .container-video {
        justify-content: center; /* Centra le colonne quando lo spazio è insufficiente */
    }

    .video-thumbnail {
        width: calc(50% - 20px); /* Larghezza del 50% meno lo spazio tra le colonne */
    }

    .bug-report {
        display: none;
    }

    .modal-content input[type="submit"] {
        background-color: #E66239;
        color: white;
        font-weight: bold;
        height: 50px;
        width: 100%;
        border: 2px solid #525252;
        border-radius: 10px;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .modal-content input[type="text"] {
        border: 2px solid #525252;
        border-radius: 5px;
        width: 100%;
    }
    .modal-content textarea {
        border: 2px solid #525252;
        border-radius: 5px;
        height: 100px;
        width: 100%;
    }
    .modal-content {
        width: 70%;
    }
    .allerta-nota {
        display: none;
    }
    .tasti-progetto {
        flex-direction: column;
    }
    .additional-text {
        display: none;
    }
    .project-buttons {
        margin-left: 0;
    }
    .version {
        display: none;
    }
    /* inizio stili progetti aperti */
    .container-aperti {
        flex-wrap: nowrap;
    }
    .container-aperti .date,
    .container-aperti .stato-articoli,
    .container-aperti .nome .icone-file-caricati,
    .container-aperti .nome .icone {
        display: none;
    }
    .container-conto-aziende {
        flex-wrap: wrap;
    }

    /* fine stili progetti aperti */

}

@media (max-width: 500px) {
    .video-thumbnail {
        width: 100%; /* Visualizza un video per riga su schermi più piccoli */
    }
    .bug-report {
        display: none;
    }
    .modal-content input[type="submit"] {
        background-color: #E66239;
        color: white;
        font-weight: bold;
        height: 50px;
        width: 100%;
        border: 2px solid #525252;
        border-radius: 10px;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .modal-content input[type="text"] {
        border: 2px solid #525252;
        border-radius: 5px;
        width: 100%;
    }
    .modal-content textarea {
        border: 2px solid #525252;
        border-radius: 5px;
        height: 100px;
        width: 100%;
    }
    .modal-content {
        width: 70%;
    }
    .allerta-nota {
        display: none;
    }
    .tasti-progetto {
        flex-direction: column;
    }
    .additional-text {
        display: none;
    }
    .project-id {
        justify-content: center;
    }
    .project-buttons {
        margin-left: 0;
    }
    /* inizio stili progetti aperti */
    .container-aperti {
        flex-wrap: nowrap;
    }
    .container-aperti .date,
    .container-aperti .stato-articoli,
    .container-aperti .nome .icone-file-caricati,
    .container-aperti .nome .icone {
        display: none;
    }
    .container-conto-aziende {
        flex-wrap: wrap;
    }

    /* fine stili progetti aperti */
    .version {
        display: none;
    }
}
@media (max-width: 750px) {

    .content {
        margin-left: 0;
    }

    
    .hidden-mobile {
        display: none;
    }
    .logout-form {
        display: none;
    }
    .project-box {
        margin-top: 80px;
        min-width: 300px;
    }
    /* Stile per i titoli dei dettagli */
    .project-details h3 {
    font-size: 2vh;
    margin-bottom: 5px;
    margin-top: 5px;
    }

    /* Stile per i dettagli specifici */
    .project-details p {
    font-size: 2vh;
    margin-bottom: 4px;
    }
    /* Stile per i titoli dei dettagli */
    .project-box h3 {
    font-size: 2vh;
    margin-bottom: 2px;
    margin-top: 5px;
    }

    /* Stile per i dettagli specifici */
    .project-box p {
    font-size: 2vh;
    margin-bottom: 2px;
    }
    .project-form {
        display: none;
    }
    .user-form {
       display: none;
    }
    .project-form-2 {
        display: block;
        bottom: 300px;
        left: 20px;
        margin-top: auto;
        font-family: 'Montserrat', sans-serif;
    }
    .user-form-2 {
        display: block;
        bottom: 250px;
        left: 20px;
        margin-top: auto;
        font-family: 'Montserrat', sans-serif;
    }
    .logo {
        display: none;
    }
    .logo-container{
        display: none;
    }
    .project-id {
        padding: 1px 5px; /* Aggiungi spazio attorno al testo */
        border: 1px solid #ccc; /* Aggiungi un bordo sottile */
        border-radius: 1px; /* Aggiungi angoli arrotondati */
        font-weight: bold;
        align-items: center;
        display: flex;
        font-size: x-small;
    }
    .client-name-expand {
        flex: 1; /* Questa regola farà sì che il div occupi tutto lo spazio rimanente */
        padding: 1px 1px; /* Aggiungi spazio attorno al testo */
        border: 1px solid #ccc; /* Aggiungi un bordo sottile */
        border-radius: 1px; /* Aggiungi angoli arrotondati */
        font-weight: bold;
        text-align: center;
        font-size: x-small;
    }
    .project-resp {
        font-size: x-small;
        font-weight: lighter;
    }
    .additional-text {
        color: #333; /* Cambia il colore del testo a tua scelta */
        font-size: 14px; /* Cambia la dimensione del carattere a tua scelta */
        font-weight: bold;
        min-width: 50%;
    }
    .submenu-title {
        display: none;
    }
    .toggle-button-container {
        display: flex;
        align-items: center;
    }
    .notifiche {
        display: block;
    }
    .tab-res-proj {
        display: none;
    }
    .activity-table {
        display: none;
    }
    .project-buttons {
        float: none;
        width: auto;
        margin-left: auto;
    }
    .image-table {
        display: block;
    }

    .image-cell {
        display: block;
        text-align: center;
        margin-bottom: 20px; /* Aggiungi uno spazio tra le immagini */
    }
    .project-cont {
        display: block;
        flex-direction: row;
        justify-content: space-between;
    }

    .box-notifiche {
        display: none;
    }
    .box-progetti {
        width: auto;
    }
    .box-scaletta {
        width: auto;
    }
    .container-dash {
        display: block;
    }
    .tabella-fornitori th,
    .tabella-fornitori td {
        display: block;
    }
    .project-box-forn {
        width: 80%;
    }
    .box-post-it {
        width: auto;
    }
    .box-progetti-aperti {
        width: auto;
    }
}

@media print {
    @page {
        size: landscape;
    }
    button{
        display: none;
    }
    .button-norm {
        display: none;
    }
    .activity-notes {
        display: none;
    }
    .activity-table {
        display: flex;
    }
    #header {
        display: none;
    }
    form {
        display: none;
    }
    .back-button {
        display: none;
    }
    #aggiungi-commento {
        display: none;
    }
    #aggiornamento {
        display: none;
    }
    .project-box {
        margin-top: auto;
        max-width: 100%;
    }
    footer {
        display: none;
    }
    .print-button {
        display: none;
    }
}
/* Aggiungi stili per le frecce e i pallini */
.arrow {
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    cursor: pointer;
    color: white;
    font-size: 24px;
    transition: 0.3s;
}

.arrow-left {
    left: 0;
}

.arrow-right {
    right: 0;
}

.arrow:hover {
    color: #ccc;
}

.dots {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 10px;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active-dot {
    background-color: #717171;
}


.cont-variazione {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #c6c6c6;
    padding: 15px;
    border-radius: 5px;
    align-items: center;
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

.cont-variazione-lista {
    display: flex;
    flex-direction: row;
    justify-content: start;
    background-color: #c6c6c6;
    padding: 15px;
    border-radius: 5px;
    align-items: center;
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

.cont-variazione-lista:hover {
    transform: translateY(-3px);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.cont-variazione-lista .variazione-titolo {
    font-weight: bold;
    width: 30%;
    margin-right: 150px;
}

.cont-variazione-lista .pdf-variazione {
    font-size: 20pt;
    color: rgb(255, 67, 67);
    cursor: pointer;
    align-items: center;
    text-align: center;
}

.cont-variazione-lista .pdf-variazione-lista {
    font-size: 20pt;
    color: rgb(255, 67, 67);
    cursor: pointer;
    align-items: center;
    text-align: center;
    margin-right: 150px;
}

.cont-variazione-lista .pdf-variazione span {
    font-size: small;
    text-decoration: none;
    color: #696969;
    font-weight: 800;
}

.cont-variazione-lista .pdf-variazione a {
    text-decoration: none;
}

.cont-variazione-lista .variazione-titolo .titolino,
.cont-variazione-lista .tipo .titolino,
.cont-variazione-lista .progetto-variazione .titolino {
    color: gray;
    font-size: x-small;
    font-weight: bold;
}

.cont-variazione-lista .fornitore {
    font-weight: bold;
    /* margin-right: 50px; */
    width: 150px;
}

.cont-variazione-lista .tipo {
    margin-right: 150px;
    font-weight: bold;
}

.cont-variazione-lista .fornitore .titolino,
.cont-variazione-lista .tipo .titolino,
.cont-variazione-lista .progetto-variazione .titolino {
    color: gray;
    font-size: x-small;
    font-weight: bold;
}


.cont-variazione:hover {
    transform: translateY(-3px);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.cont-variazione .variazione-titolo {
    font-weight: bold;
    width: 30%;
}

.cont-variazione .pdf-variazione {
    font-size: 20pt;
    color: rgb(255, 67, 67);
    cursor: pointer;
    align-items: center;
    text-align: center;
}

.cont-variazione .pdf-variazione span {
    font-size: small;
    text-decoration: none;
    color: #696969;
    font-weight: 800;
}

.cont-variazione .pdf-variazione a {
    text-decoration: none;
}

.cont-variazione .variazione-titolo .titolino,
.cont-variazione .tipo .titolino,
.cont-variazione .progetto-variazione .titolino {
    color: gray;
    font-size: x-small;
    font-weight: bold;
}

.cont-variazione .fornitore {
    font-weight: bold;
    /* margin-right: 50px; */
    width: 150px;
}

.cont-variazione .fornitore .titolino,
.cont-variazione .tipo .titolino,
.cont-variazione .progetto-variazione .titolino {
    color: gray;
    font-size: x-small;
    font-weight: bold;
}

.cerchio-stato {
    /* background-color: red; */
    padding: 5px;
    border-radius: 100%;
    width: 2px;
    height: 2px;
    margin-right: 5px;
}

#positivo {
    background-color: green;
}

#negativo {
    background-color: red;
}

/* Container superiore che contiene tutti i div .stato-ritiro */
.container-ritiro {
    display: flex;
    flex-direction: column; /* Colonne verticali */
    align-items: center; /* Centra tutti i contenuti orizzontalmente */
}

/* Stile per ogni stato-ritiro */
.stato-ritiro {
    display: flex;
    flex-direction: row; /* Elementi allineati in fila */
    align-items: center; /* Centra verticalmente i contenuti */
    margin-bottom: 10px; /* Margine inferiore per separare i vari .stato-ritiro */
}


.sottopalla {
    white-space: wrap;
    font-size: small;
    font-weight: 600;
}

.container-posizione {
    display: flex;
    flex-direction: column; /* Colonne verticali */
    align-items: left; /* Centra tutti i contenuti orizzontalmente */
    gap: 5px;
}

.modal-content-ritiro {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 50%;
    max-width: 500px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal-ritiro {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.close-ritiro {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-ritiro:hover,
.close-ritiro:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-content-ritiro label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.modal-content-ritiro input[type="text"],
.modal-content-ritiro input[type="number"],
.modal-content-ritiro input[type="time"],
.modal-content-ritiro input[type="date"],
.modal-content-ritiro select {
    width: 100%;
    padding: 10px;
    margin: 5px 0 20px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

/* Stile per i bottoni di submit */
.modal-content-ritiro input[type="submit"] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.modal-content-ritiro input[type="submit"]:hover {
    background-color: #45a049;
}

/* Stili per il modal di visualizzazione file */
#file-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
}

#file-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 5px;
    box-shadow: 0px 0px 10px #000;
    width: 90%;
    height: 90%; 
}

#file-viewer, #video-player {
    width: 100%;
    height: 100%;
}

#close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.search-container {
    margin: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.search-container span {
    font-weight: bold;
    font-size: xx-large;
    color: #302C4D;
}

.modal-ricerca {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-ricerca-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    border-radius: 10px;
}

.close-ricerca {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-ricerca:hover,
.close-ricerca:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#inputRicerca {
    width: 100%;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

#modal-search-bar {
    width: 100%;
    padding: 12px 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.statop-ricerca {
    /* background-color: #0056b3; */
    color: white;
    font-weight: bold;
    font-size: x-small;
    padding: 5px;
    border-radius: 5px;
    margin: 0 0 10px 0;
    width: fit-content;
}

.collaudo {
    background-color: #0056b3;
}

.aperto {
    background-color: #b32400;
}

.iniziato {
    background-color: green;
}

.chiuso {
    background-color: gray;
}

.decimali {
    font-size: 0.8em;
}

.collapsed {
    max-width: 150px;
    /* display: none; */
}

.tabella-collaudo {
    margin-bottom: 50px;
}

.totale-importo-collaudo {
    font-size: smaller;
    color: red;
}

.hide {
    display: none;
}

.commesse-pnrr {
    display: flex;
    margin-top: -35px;
    gap: 5px;
}

.commesse-varie {
    display: flex;
    margin-top: -35px;
    gap: 5px;
}

.commesse-pnrr-ceo {
    display: flex;
    gap: 5px;
}

.commesse-varie-ceo {
    display: flex;
    gap: 5px;
}

.box-service {
    display: flex;
    flex-direction: row;
    gap: 10px;
    border-left: solid 2px rgb(185, 185, 185);
    padding-left: 10px;
}

.head-dash {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 40px;
}

.head-dash .avviso-dash {
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 10px;
    border: dashed 3px #cacaca;
    text-align: center;
    max-width: 20%;
}

.head-dash .avviso-dash span {
    color: red;
    font-weight: 800;
    font-size: larger;
}

.blur-content {
    filter: blur(10px);
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5); /* Scurisce il contenuto */

}
.popup-accesso {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-radius: 10px;
}
.popup-accesso button {
    margin-top: 10px;
}

.responsabili-grid select {
    padding: 10px;
    border-radius: 5px;
    width: 40%;
    font-size: large;
    font-weight: 600;
}

 /* Stile per il wrapper del custom select */
 .custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Stile per il custom select */
.custom-select {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    width: 50%;
}

/* Stile per il trigger del custom select */
.custom-select-trigger {
    padding: 10px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Stile per le opzioni del custom select */
.custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

/* Stile per ogni singola opzione */
.custom-option {
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: space-between;
}

/* Stile per l'opzione quando viene passata sopra con il mouse */
.custom-option:hover {
    background: #f0f0f0;
}

/* Mostra le opzioni quando il custom select è attivo */
.custom-select.active .custom-options {
    display: flex;
    flex-direction: column;
    z-index: 999;
}

.custom-select .tipo-lavoro {
    padding: 2px 8px;
    margin-left: 5px;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: x-small;
}

.tipo-lavoro {
    padding: 2px 8px;
    margin-left: 5px;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: x-small;
}

.informatica { background-color: #007bff; }
.edile { background-color: #ffae00; }
.idraulico { background-color: #dc3545; }
.elettrico { background-color: deeppink; }
.mobili { background-color: #6f42c1; }

.cnt-tipo {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: -36px;
    margin-left: 41%;
    padding: 10px;
    justify-content: end;
}

.cnt-tipo-dip {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    justify-content: center;
}

.manual-collab-input {
    width: 80%;
    padding: 10px;
    margin: 10px 0;
    max-width: 50%;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.manual-collab-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.manual-collab-remove {
    color: red;
    cursor: pointer;
    margin-left: 10px;
}

.header-attivita {
    display: flex;
    flex-direction: row;
    gap: 20%;
    justify-content: space-between;
}

.header-attivita .header-sx {
    display: flex;
    flex-direction: column;
}
.header-attivita .header-dx {
    border: dashed 2px black;
    padding: 10px;
    border-radius: 10px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-attivita .header-sx .button-norm-att {
    padding: 10px 20px;
    background-color: #E66239;
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    /* margin-left: 50%; */
    max-width: fit-content;
}

.header-attivita .header-sx .back-button {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: #afafaf;
    border: none;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    max-width: fit-content;
}

#selected-projects-table {
    border-collapse: collapse; /* Assicura che i bordi non abbiano spazi */
}

#selected-projects-table th,
#selected-projects-table td {
    border: none; /* Rimuove i bordi delle celle */
    padding: 8px; /* Aggiunge un po' di spazio interno alle celle */
}

#selected-projects-table th {
    text-align: left; /* Allinea il testo dell'intestazione a sinistra */
}

.source-btn.active {
    background-color: #4CAF50; /* Colore di sfondo per il pulsante attivo */
    color: white;
}

/* inizio css per popup updates */

/* Container per tutti gli elementi della pagina eccetto il popup */
.content-over {
    transition: filter 0.3s ease;
    /* width: 100%;
    margin: 0; */
}

/* Sfoca il contenuto della pagina quando il popup è attivo */
.content-over.blur {
    filter: blur(5px); /* Applica lo sfocamento */
}

/* Overlay che oscura lo sfondo */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Sfondo semi-trasparente */
    z-index: 999; /* Posiziona l'overlay sotto al popup */
    display: none; /* Nascondi inizialmente */
}

/* Popup container */
.popup-update-container {
    background-color: white;
    border-radius: 20px;
    padding: 15px;
    width: 50%;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 50px;
    position: absolute;
    z-index: 9998; /* Popup sopra l'overlay */
}

/* Stile per il pulsante di chiusura "X" */
.popup-update-container .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: red;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    width: auto;
}

.popup-update-container .close-btn span {
    font-size: small;
    color: gray;
}

.popup-update-container .media {
    padding: 15px;
}

.popup-update-container .titolo {
    font-weight: bold;
    font-size: xx-large;
}

.button-container {
    text-align: center;
    margin-top: 20px;
}

.blue-button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

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

/* stile chatgpt */

/* Stile per la tenda della chat */
.chat-box {
    position: fixed;
    bottom: 0;
    right: 100px;
    width: 300px;
    max-height: 600px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 15px 15px 0 0;
    overflow: hidden; /* Previene overflow esterni */
    z-index: 10;
}

.chat-header {
    background-color: #E66239;
    color: #fff;
    padding: 10px;
    text-align: center;
    border-radius: 14px 14px 0 0;
    cursor: pointer;
}

.chat-body {
    padding: 10px;
    overflow-y: auto; /* Abilita la barra di scorrimento verticale */
    max-height: 600px; /* Altezza massima del contenuto della chat */
    border-top: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin; /* Supporto per Firefox */
    scrollbar-color: #E66239 #f1f1f1; /* Colore barra di scorrimento (Firefox) */
    min-height: 200px;
}

/* Stile per la barra di scorrimento per Chrome, Edge, Safari */
.chat-body::-webkit-scrollbar {
    width: 8px;
}

.chat-body::-webkit-scrollbar-thumb {
    background-color: #E66239;
    border-radius: 4px;
}

.chat-footer {
    padding: 10px;
    display: flex;
    background-color: #f1f1f1;
    border-top: 1px solid #ccc;
}

.chat-footer input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.chat-footer button {
    padding: 10px;
    background-color: #E66239;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-left: 5px;
    border-radius: 5px;
}

@keyframes up-chat {
    0%, 50%, 100% { transform: translateY(5px); }
    25%, 75% { transform: translateY(-5px); }
}

/* Bottone per aprire/chiudere la chat */
.chat-toggle {
    position: fixed;
    bottom: 0;
    right: 100px;
    padding: 10px 20px;
    background-color: #E66239;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 10px 10px 0 0;
    z-index: 9;
    /* animation: up-chat 10s infinite; */
}

/* Messaggio inviato dall'utente */
.user-message {
    background-color: #E66239;
    color: white;
    padding: 10px;
    border-radius: 15px;
    margin: 10px 0;
    max-width: 70%;
    align-self: flex-end;
    text-align: right;
    word-wrap: break-word;
}

/* Messaggio ricevuto da ChatGPT */
.chatgpt-message {
    background-color: #f1f1f1;
    color: #333;
    padding: 10px;
    border-radius: 15px;
    margin: 10px 0;
    max-width: 70%;
    align-self: flex-start;
    text-align: left;
    word-wrap: break-word;
}

.user-message strong, .chatgpt-message strong {
    font-weight: bold;
}

/* inizio stile per dropdown */

/* Stile per il wrapper del dropdown personalizzato */
.custom-dropdown-wrapper {
    position: relative;
    width: 100%;
}

/* Stile per il campo di input di ricerca */
.search-box {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Stile per il dropdown nascosto */
.custom-dropdown {
    display: none;
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    background-color: white;
    z-index: 999;
}

/* Mostra il dropdown quando attivo */
.custom-dropdown.active {
    display: block;
}

/* Stile per ogni opzione del dropdown */
.custom-option-2 {
    display: flex;
    flex-direction: row;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    align-items: center;
    gap: 10px;
}

/* Stile per l'opzione al passaggio del mouse */
.custom-option-2:hover {
    background-color: #f1f1f1;
}

.custom-dropdown.active {
    display: block;
}

.dropdown-group-label-pnrr {
    background-color: #0056b3;
    padding: 5px;
    color: white;
    font-weight: 600;
    font-size: x-small;
    border-bottom: 4px solid #75b3f5;
}

.dropdown-group-label-ordini {
    background-color: #009b3b;
    padding: 5px;
    color: white;
    font-weight: 600;
    font-size: x-small;
    border-bottom: 4px solid #27c764;
}

.pnrr-label {
    border-radius: 10px;
    padding: 2px 5px;
    background-color: #0056b3;
    color: white;
    font-size: xx-small;
    font-weight: 600;
}

.ordini-label {
    border-radius: 10px;
    padding: 2px 5px;
    background-color: #009b3b;
    color: white;
    font-size: xx-small;
    font-weight: 600;
}

.container-cal-scal {
    display: flex;
    flex-direction: row;
    gap: 47px;
}

.scaletta-personale {
    width: 47%;
}

.alert-nota-ordini {
    color: red;
    font-size: x-large;
    cursor: pointer;
    animation: lampeggiare 500ms infinite;
}

.alert-nota-ordini a {
    text-decoration: none;
    color: red;
}

.container-importo-offerta {
    background-color: #ccebd8;
    border: 1px solid #009b3b;
    border-radius: 5px;
    width: fit-content;
    padding: 0 5px 5px 5px;
}

.tag {
    display: inline-block;
    padding: 2px 5px;
    margin: 5px;
    border-radius: 5px;
    border: 2px solid transparent;
    color: #3d3d3d;
    text-align: center;
    cursor: default;
    font-size: xx-small;
}

.tag-selected {
    box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.mega-cont {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.pagination a {
    margin: 0 5px;
    padding: 10px 15px;
    text-decoration: none;
    border: 1px solid #ddd;
    color: #333;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.pagination a:hover {
    background-color: #f0f0f0;
}

.pagination a.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.tipo-dashboard {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 20px;
    transform: translateX(-50%);
    margin-left: 50%;
    width: 97%;
    margin-bottom: 10px;
}

.tipo-dashboard a {
    text-decoration: none;
}

.tipo-normale {
    background-color: white;
    border: solid 1px #ccc;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    height: 80px;
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: x-large;
    color: #5c5c5c;
    transition: all 0.3s ease;
    gap: 5px;
}

.tipo-normale span {
    font-size: small;
    font-weight: 400;
    text-align: center;
}

.tipo-normale:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 2px 4px 2px rgba(0, 0, 0, 0.1);
}

.dati-formazione {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 100%;
    padding: 10px;
}

.dati-formazione span {
    font-weight: 600;
    font-size: x-small;
    color: #7e7e7e;
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
}

#non-svolte {
    font-size: small;
    color: #3d3d3d;
}

.formatori {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    font-size: small;
    color: #3d3d3d;
}

#ore-formatori {
    font-weight: 600;
    color: #7e7e7e;
}

.stella {
    color: #fabb46;
}

.tasto-chiuso {
    display: flex;
    flex-direction: row;
    justify-content: right;
    font-size: large;
    font-weight: 600;
}

.formatori-ore {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.modifica-ore {
    color: #acacac;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.modifica-ore:hover {
    color: cornflowerblue;
    cursor: pointer;
}

/* Overlay scuro che copre l'intera pagina */
.modale {
    display: none; /* Inizialmente il modale è nascosto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Sfondo scuro con trasparenza */
    z-index: 1000; /* Deve essere sopra il contenuto della pagina */
    justify-content: center;
    align-items: center;
}

/* Contenuto del modale */
.contenuto-modale {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    max-width: 90%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    /* margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 200px; */
}

/* Titolo del modale */
.contenuto-modale h2 {
    font-size: 20px;
    margin-bottom: 15px;
}

/* Form input (campi per le valutazioni) */
.contenuto-modale input[type="number"] {
    width: 80%;
    padding: 8px;
    margin: 10px 0;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Bottoni */
.contenuto-modale button {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}

/* Cambio colore del bottone quando viene hoverato */
.contenuto-modale button:hover {
    background-color: #45a049;
}

/* Bottone per chiudere il modale */
#chiudiModale {
    background-color: #f44336;
}

#chiudiModale:hover {
    background-color: #e53935;
}

.badge {
    background-color: #3e8ed0;
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 2px;
}

.toggle-blocco-pnrr {
    cursor: pointer;
}

.toggle-blocco-pnrr i {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.ph-caret-down {
    transition: transform 0.3s ease;
}

.ph-caret-down.rotated {
    transform: rotate(180deg);
}

#contenuto-blocco-pnrr {
    margin-top: 0; /* evita la sovrapposizione */
}

#modale-dettagli.modale-dettagli-style {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    width: 500px;
    padding: 20px;
}

#modale-dettagli .modale-inner {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#modale-dettagli .modale-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.attrezzature-checklist {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    background: #f9f9f9;
}

.descrizione-dettaglio {
    margin-top: 5px;
    color: #333;
    font-style: italic;
}
.durata-dettaglio {
    color: #555;
    font-size: 0.9em;
}
.popup-modale-dettagli {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modale-dettagli-inner {
    position: relative;
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    max-width: 600px;
    width: 90%;
    max-height: 90%;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.centra-modale {
    left: 50%;
    transform: translateX(-50%);
    top: 200px;
}

.close-modale-dettagli {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 26px;
    font-weight: bold;
    color: #444;
    cursor: pointer;
}

.delete-dettaglio i,
.edit-dettaglio i {
    cursor: pointer;
    color: #ccc;
    transition: all 0.3s ease;
    font-weight: 600;
}

.delete-dettaglio i:hover {
    color: red;
    cursor: pointer;
}

.edit-dettaglio i:hover {
    color: #E66239;
    cursor: pointer;
}

#save-attivita {
    background-color: #039243;
    color: white;
    font-weight: 600;
}

.search-menu {
    padding: 10px;
  }
  
  #searchMenu {
    width: 100%;
    padding: 5px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }

  .acq-effettivo {
    background-color: #e0fde0;
    border-radius: 5px;
    border: 1px solid green;
    padding: 3px;
  }

  .da-rapporto {
    background-color: white;
    border-radius: 5px;
    border: 1px solid #009b3b;
    padding: 3px;
  }

  .da-fatturare {
    border: 2px solid mediumvioletred;
  }

  .testo-fatturare {
    position: absolute;
    background-color: mediumvioletred;
    color: white;
    font-weight: bold;
    top: 0;
    left: 50%;
    padding: 5px;
    border-radius: 0 0 10px 10px;
    transform: translateX(-50%);
  }

  .bottone-filtro {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: white;
  }

  .filter-bar {
    margin: 20px;
  }

  #calcolo-ore-rimanenti {
    font-size: small;
    font-weight: normal;
  }

  .spacer20 {
    margin-top: 10px;
  }

  .barra-progresso {
    position: relative;
    width: 100%;
    height: 13px;
    background: linear-gradient(to right, #e0e0e0 0%, #e0e0e0 95%, #f28b82 95%, #f28b82 100%);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ccc;
}

.barra-avanzamento {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #4caf50;
    border-radius: 10px;
    transition: width 0.3s ease;
    z-index: 1;
}

.testo-barra {
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    margin-top: 5px;
}

.barra-progresso.semplice {
    position: relative;
    width: 100%;
    height: 13px;
    background: #e0e0e0 !important; /* sfondo uniforme */
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ccc;
}
.progress-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.start-icon {
    font-size: x-small;
    font-weight: bold;
    color: #333;
}

.icon-start-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-container-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}