/* Impostazioni generali */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    background-color: #f4f4f9;
    color: #333;
    overflow-x: hidden;
    height: 100%;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
.btn-non-cliccabile {
    opacity: 0.5; /* Opacità per rendere il pulsante trasparente */
    pointer-events: none; /* Disabilita l'interazione del mouse */
}
#testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#container_logo img, #container_logo2 img {
    height: 60px;
}

#container_titolo h1 {
    font-size: 24px;
    margin: 0;
}

#container_titolo h4 {
    font-size: 14px;
    color: #777;
    margin: 5px 0 0;
}

#prima_parte {
    text-align: center;
    padding: 0 20px 50px 20px;
}

#container_scritta{
    margin-top: 20px;
}

#container_scritta h1 {
    font-size: 36px;
    margin-bottom: 20px;
}
#container_scritta a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
}

#container_scritta a i {
    margin-right: 5px;
}

#scritta {
    margin: 0;
}
#container_log {
    background-color: #fff;
    padding: 15px 40px 15px 40px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    display: inline-block;
    max-width: 400px;
    width: 100%;
    margin-bottom: 20px;
}
#container_log input[type="text"], #container_log input[type="password"]{
    width: 91%;
    padding: 15px;
    margin: 10px 0;
    border-radius: 4px;
    font-size: 16px;
}
#container_log button {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    border-radius: 4px;
    font-size: 16px;
}

#container_log button {
    background-color:rgb(239 239 239);
    color: rgb(104, 104, 104);
    cursor: pointer;
    font-weight: bold;
    border: none;
    box-shadow: 0 1px rgb(190, 190, 190);
    transition: background-color 0.3s, color 0.3s;
    border: 2px solid #ccc;
}

#container_log button:hover {
    background-color: #e73c3c; /* Rosso quando il pulsante è in hover */
  		color: #fff;
}

#container-call {
    margin-top: 20px;
}

.scritta-cerca {
    margin-top: 0;
    text-align: center;
    margin-bottom: 10px;
}

#container-call button {
    background-color: #28a745;
    color: #fff;
    cursor: pointer;
    border: none;
    padding: 15px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

#container-call button:hover {
    background-color: #218838;
}

#container_video {
    margin-top: 40px;
}

#video {
    width: 100%;
    max-width: 800px;
    height: 450px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#social-bar {
    margin-top: 20px;
}

#social-bar a {
    color: #e73c3c;
    font-size: 24px;
    margin: 0 10px;
    text-decoration: none;
    transition: color 0.3s;
}

#social-bar a:hover {
    color: #C70000;
}

.footer {
    /*background-color: #fff;
    padding: 20px;
    text-align: center;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
    margin-top: 40px;*/
    
    bottom: 0;
    width: 100%;
    background-color: #f8f8f8;
    text-align: center;
    padding: 20px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.footer .row {
    display: flex;
    justify-content: center;
}

.footer a {
    color: #e73c3c;
    text-decoration: none;
    transition: color 0.3s;
}

.footer a:hover {
    color: #C70000;
}
#logoAccesso{
max-height: 125px;
max-width: 250px;
height: 100%;
}
#logcerca {
    background-color: #fff;
    padding: 40px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    display: inline-block;
    max-width: 400px;
    width: 100%;
}

#logcerca button {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    border-radius: 4px;
    font-size: 16px;
}

#logcerca input[type="text"]{
    width: 91%;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

#logcerca button {
    background-color:rgb(239 239 239);
    color: rgb(104, 104, 104);
    cursor: pointer;
    border: none; 
    box-shadow: 0 1px rgb(190, 190, 190);
    transition: background-color 0.3s, color 0.3s;
    border: 2px solid #ccc;
}

#logcerca button:hover {
    background-color: #e73c3c; /* Rosso quando il pulsante è in hover */
  	color: #fff;
}

#logcerca input[type="text"] {
    margin-top: 10px;
}

#logcerca input[type="text"]::placeholder {
    color: #aaa;
}

#logcerca #bottonecerca {
    margin-top: 20px;
}

#indietrologin, #back-nascosto, #indietroCerca {
    color: #333;
    text-decoration: none;
}

#indietrologin:hover, #indietroCerca:hover{
    text-decoration: underline;
}

#container-welcome {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 20px;
}

.welcome {
    margin-bottom: 20px;
}

#benvenuto {
    font-size: 24px;
    margin-bottom: 10px;
}

#fidelity {
    font-weight: bold;
}

.listaFidelity {
    list-style: none;
    padding: 0;
}

hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 20px 0;
}

.showbutton{
    width:45%;
    text-align: center;
    padding: 5px 0 5px 10px;
    margin-bottom: 10px;
    background-color:rgb(239 239 239);
    color: rgb(69, 69, 69);
    cursor: pointer;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    box-shadow: 0 1px rgb(190, 190, 190);
    transition: background-color 0.15s, color 0.15s;
    border: 2px solid #ccc;
}
.showbutton:hover{
    background-color: #e73c3c; /* Rosso quando il pulsante è in hover */
      color: #fff;
}
.dettagli-btn{
    width: 75%;
    margin-bottom: 0;
    text-align: center;
    padding: 5px 0 5px 0;
}
.dettagli-nd{
    width: 75%;
    margin-bottom: 0;
    background-color:rgb(221, 221, 221);
    text-align: center;
    padding: 5px 0 5px 0;
    opacity: 0.6;
}
.highlighted {
    background-color: #e73c3c;
      color: #fff;
}
th{
    background-color: #e73c3c;
    color: white;
}
.html-data-table{
    background-color: rgb(239 239 239);
}
.tabdetta th{
    background-color: #757575;
}
.container-tab{
    max-height: 280px;
    overflow: auto;
}
.dett{
    padding: 0;
    margin-top: 10px;
}

/*.dett {
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    margin-top: 20px;
}*/

.showpdf{
    text-align: center;
    font-size: 15px;
  }
  #appunto-doc{
    font-size: 12px;
  }
  table {
    border-collapse: collapse;
    width: 100%;
}
td{
    border: 1px solid #000000;
    text-align: center;
    padding: 8px 0 8px 0;
}
th {
    border: 1px solid #000000;
    text-align: center;
    padding: 8px 0 8px 0;
    background-color: #e73c3c;
    color: white;
    font-size: 16px;
}

#errore-cerca {
    color: red;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}

#sez-tab {
    margin-top: 20px;
}
.html-data-table > td > form {
    margin: 5px 0 5px 0;
}
#testaTabCli th{
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .close:hover{
    cursor: pointer;
  }
  .close{
    position: sticky;
    top: -20px;
    z-index: 10000;
  }
  #containerDate {
    display: flex;
    justify-content: center; /* per centrare orizzontalmente */
    align-items: center; /* per centrare verticalmente */
    gap: 20px; /* spazio tra i due div */
  }
  
  .containerData {
    width: 25%;
    text-align: center; /* per centrare il contenuto all'interno del div */
  }
  .stiliDate{
    width: 75%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: #f9f9f9;
    transition: all 0.3s ease-in-out;
  }

  .stiliDate:hover{
    border-color: #e73c3c;
  }
  .stiliDate:focus{
    outline: none;
    border-color: #e73c3c;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
    background-color: #fff;
  }

  .modal {
    display: none; /* Il modale è nascosto di default */
    position: fixed; /* Posizione fissa rispetto alla finestra del browser */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Sfondo semitrasparente */
    z-index: 10000; /* Assicura che il modale sia sopra gli altri elementi */
    justify-content: center;
    align-items: center;
  }
  
  .body-modal-open {
    overflow: hidden;
  }
  /* Contenitore del modale */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* Centra verticalmente e orizzontalmente */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 620px; /* Larghezza massima del modale */
    max-height: 350px;
    overflow-y: hidden;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .contentFine{
    text-align: center;
  }
  .close {
    color: #000000;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  .close:hover,
      .close:focus {
        color: rgb(231, 60, 60);
        text-decoration: none;
        cursor: pointer;
      }

    .btn-file{
    position: relative;
    overflow: hidden;
    width: 75%;
    text-align: center;
    padding: 5px 0 5px 0;
    margin-bottom: 0;
    background-color:rgb(239 239 239);
    color: rgb(104, 104, 104);
    cursor: pointer;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    box-shadow: 0 1px rgb(190, 190, 190);
    transition: background-color 0.15s, color 0.15s;
    border: 2px solid #ccc;
    font-size: 12px;
}
.btn-file input[type="file"]{
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    height: 104%;
    width: 104%;
    opacity: 0;
}
.btn-file:hover{
    background-color: #ff4949; 
        color: #fff;
}

.g-recaptcha {
    margin: 5px 0; /* Spaziatura verticale */
    /*border: 2px solid #ccc; /* Bordo intorno al reCAPTCHA */
    border-radius: 10px; /* Arrotonda gli angoli */
    /*padding: 10px; /* Spazio interno */
    display: flex;
    justify-content: center;
    /*background-color: #f9f9f9; /* Sfondo */
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombra leggera */
}
/*.g-recaptcha > div > div > iframe{
    width: 100%;
}*/
.avver_mess{
    font-size: 17px;
    font-weight: lighter;
    color: #e4a700;
  }
  #containerPag {
    min-height: 100%; /* Assicurati che il contenitore occupi tutto lo spazio */
    display: flex;
    flex-direction: column;
    /*position: relative;*/
}

/* PER METTERE UN ELEMENTO AL CENTRO DELLA PAGINA */
#body_WSerror{
    height: 100vh; /* Occupa l'intero schermo */
    width: 100%; /* Occupa tutta la larghezza */
    display: flex; /* Attiva il flexbox */
    justify-content: center; /* Centra orizzontalmente */
    align-items: center;
}

#container_WSerror {
    width: 100%; /* Imposta una larghezza a piacere */
    max-width: 50%; /* Limita la larghezza massima */
    padding: 20px;
    background: white; /* Sfondo bianco per evidenziarlo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombra leggera */
    border-radius: 10px; /* Angoli arrotondati */
    text-align: center; /* Allinea il contenuto testuale */
}
/*---------------------------------------------------*/
#container_WSerror i{
    font-size: clamp(12px, 1.5vw, 28px); /* Minimo 12px, adattabile fino a 28px */
}
#container_WSerror h4{
    font-size: clamp(15px, 2vw, 35px); /* Minimo 15px, adattabile fino a 35px */
    margin-bottom: 20px;
}
#container_WSerror p{
    font-size: clamp(12px, 1.5vw, 28px); /* Anche per eventuali paragrafi */
}
#container_WSerror button{
    font-size: clamp(12px, 1.2vw, 25px); /* Anche per eventuali paragrafi */
    padding: 10px 0;
    margin-bottom: 10px;
}
@media(max-width:1400px) {
    .btn-file{
        font-size: 10px;
        letter-spacing: -0.5px;
    }
}
@media (max-width: 1300px){
td{
	border: 1px solid #000000;
	text-align: center;
   
}
th {
	border: 1px solid #000000;
	text-align: center;
	
	font-size: 14px;
}
}
@media (max-width: 1110px){
	.showpdf{
        text-align: center;
        font-size: 13px;
      }
    td,
    th {
        border: 1px solid #000000;
        text-align: center;
    }
}
@media (max-width: 980px){
table{
    width: 100%;
}
td,
th {
    min-width: 50px;
}
}
@media (max-width: 850px){
	#container_scritta h1 {
        font-size: 30px;
    }	
    .showbutton{
		width:75%;
		/*font-weight: lighter;*/
	}
    .dettagli-btn{
		width: 75%;
		font-size: 10px;
	}
    .btn-file{
        font-size: 7.5px;
    }
    .containerData {
        width: 40%;
      }
}
@media (max-width: 700px){
    .dettagli-btn{
        width: 85%;
        font-size: 10px;
    }
    .dettagli-nd{
        width: 85%;
        font-size: 10px;
    }
    .html-data-table{
        font-size: 13px;
    }
    .container-tab{
        max-height: 250px;
        overflow: auto;
    }
    #appunto-doc{
        font-size: 10px;
      }
      .modal-content{
        padding: 10px;
     }
}

@media (max-width: 550px){
	#container_scritta h1 {
        font-size: 28px;
    }	
    #container_log {
        padding: 0 35px 20px 35px;
        max-width: 300px;
        margin-bottom: 15px;
    }
    #container_log input[type="text"], #container_log input[type="password"]{
        width: 91%;
        padding: 10px;
        border-radius: 4px;
        font-size: 14px;
    }
    #container_log button {
        width: 100%;
        padding: 10px;
        border-radius: 4px;
        font-size: 14px;
    }
    #logcerca {
        padding: 40px;
        max-width: 300px;
    }
    #descriz{
        font-size: 15px;
    }
    #logcerca input[type="text"]{
        width: 91%;
        padding: 10px;
        border-radius: 4px;
        font-size: 14px;
    }
}
@media (max-width: 455px){
	#container_scritta h1 {
        font-size: 25px;
    }	
    #container_log {
       
        max-width: 225px;
        margin-bottom: 15px;
    }
    #container_titolo h1, #scritta_accedi_form{
        font-size: 21px;
    }
    .scritta-cerca {
        font-size: 15px;
    }
    #logcerca {
        padding: 10px 35px 35px 35px;
        max-width: 225px;
    }
    #descriz{
        font-size: 13px;
    }
    .showpdf{
		width: 100%;
	  }
}
@media (min-height: 715px){
.footer{
    position: fixed;
}

}