@charset "UTF-8";






/* Style for Tooltip */

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Tooltip text styling */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 100%; /* Set a fixed width for the tooltip */
    background-color: #f5f5dc; /* Beige background */
    color: #000;
    text-align: center;
    border-radius: 5px;
    padding: 0.5%;
    position: absolute;
    z-index: 1;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-30%, -150%); /* Adjust position to truly center */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the tooltip when hovering */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Style for Tooltip */


/*footer*/

.footer {
    background-color: #f1f1f1; /* Grigio chiaro */
    padding: 1% 0;
    text-align: center;
}

.footer-images {
    display: flex;
    justify-content: center;
    gap: 10%;
    width: 100%; /* Assicurati che il div occupi tutta la larghezza disponibile */
}

.footer-images img {
    width: 8%; /* Le immagini occuperanno il 18% della larghezza del contenitore */
    height: auto;
}

@media screen and (max-width: 1000px){

.footer-images {
    gap: 10%;
}

.footer-images img {
    width: 12%; /* Le immagini occuperanno il 18% della larghezza del contenitore */
    height: auto;
}

}


/*footer*/


/*homepage*/

.all {
  background: white;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  min-height: 80vh;
}

#up_body {
  display: flex; /* Posiziona gli elementi in una riga */
  align-items: center; /* Allinea verticalmente */
  justify-content: center;
  flex-direction: column;
  background: rgb(128, 36, 51);
  font-size:2vw;
  color:white;
  height: 25vh;
  width: 100%; /* Assicura che il contenitore occupi tutta la larghezza */
  gap: 0vh;
}


#upper_body {
  display: flex; /* Posiziona gli elementi in una riga */
  justify-content: space-between; /* Spinge l'immagine del titolo a sinistra e il logo a destra */
  align-items: center; /* Allinea verticalmente */
  background: rgb(128, 36, 51);
  height: 25vh;
  width: 100%; /* Assicura che il contenitore occupi tutta la larghezza */
}

.title-image {position:relative;
  width:40vw;
  height:auto;
  left:10vw;
}

.right-image {
  height:25vh;
  width:50%;
}

@media screen and (max-width: 2750px){

#upper_body {}

.title-image {}

.right-image {}


}


@media screen and (max-width: 2000px){

#upper_body {}

.title-image {}

.right-image {z-index:10;}


}

@media screen and (max-width: 1700px){

#upper_body {}

.title-image {}

.right-image {}


}

@media screen and (max-width: 1500px){

#upper_body {}

.title-image {}

.right-image {}


}


@media screen and (max-width: 768px){

#upper_body {  }

.title-image {  width:40vw;
  height:auto; left:5vw;}

.right-image {}


}

@media screen and (max-width: 480px){

#upper_body {justify-content: space-around;}

.title-image {  width:80vw;
  height:auto; left:2vw;}

.right-image {display:none}

}






.submitbuttons:hover {
  background: white;
}

/* The navigation menu */
.navbar {
  overflow: hidden;
  background-color: #006886;
}

/* Navigation links */
.navbar a {
  float: left;
  font-size: 1.6rem;
  color: white;
  text-align: center;
  padding: 1.2em 2em;
  text-decoration: none;
}

/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 1.6rem;
  border: none;
  outline: none;
  color: white;
  padding: 1.2em 2em;
  background-color: #006886;
  font-family: inherit;
  margin: 0;
}

/* Add a background color to navigation links on hover */
.navbar a:hover,
.subnav:hover .subnavbtn {
  background: #227282;

}

/* Focus per i bottoni di navigazione */
.subnavbtn:focus, .subnav-content a:focus {
  outline: none; /* Rimuove il contorno di default del focus */
  background-color: #4B9C9C; /* Colore di sfondo chiaro per il focus */
  color: white; /* Colore del testo per una buona visibilità */

}

/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #006886;
  width: 100%;
  z-index: 1;
}

/* Style the subnav links */
.subnav-content a {
  float: left;
  color: white;
  text-decoration: none;
  font-size: 1.5rem;
  padding: 1em 1.5em;
}

/* Add a background color on hover */
.subnav-content a:hover {
  background: #227282;
  color: white;
}

/* When you move the mouse over the subnav container, open the subnav content */
.subnav:hover .subnav-content {
  display: block;
}

/* The navigation menu */
.database_selected {
  overflow: hidden;
  background-color: #227282;
}

/* Navigation links */
.database_selected a {
  float: left;
  font-size: 1.6rem;
  color: white;
  text-align: center;
  padding: 1.2em 2em;
  text-decoration: none;
}

/* Style the subnav content - positioned absolute */
.pressed_subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #227282;
  width: 100%;
  z-index: 0.5;
  display: block;
}

#pressed {
  background: #227282;
}

#description {
  margin-top:5%;
  margin-bottom:0.5%;
  padding-left: 5%;
  padding-right: 5%;
  position: relative;
  height: auto;
  min-height: 80vh;
  text-align: justify;
  color: black;
  font-size: 2rem; /* Grande quanto description in homepage */
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  background-color: white;
}

#abtdes {
  margin-top: 1%;
  margin-bottom: 0%;
  padding-left: 5%;
  padding-right: 5%;
  position: relative;
  height: auto;
  text-align: center;
  color: black;
  font-size: 2.5rem;
  display: flex;
  flex-direction: column; /* Disposizione verticale */
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  background-color: white;
}


/*stats_table*/

#stats_table {
  width: 50%; /* La tabella occupa solo il 50% della larghezza del contenitore */
  margin: 20px auto; /* Centra la tabella orizzontalmente e aggiunge margini verticali */
  border-collapse: collapse;
  font-size: 2.5rem;
  
}

#stats_table th, #stats_table td {
  border: 1px solid #ddd;
  padding: 10px; /* Più spazio all'interno delle celle */
  text-align: center; /* Centra il testo nelle colonne */
}

#stats_table th {
  background-color: #006886;
  font-weight: bold;
  color:white;
}

#stats_table tr{
  background-color: #227282;
  color:white;
}




@media screen and (max-width: 2000px){

#stats_table {
  font-size: 2.0rem; 
}
}

/* Laptop e tablet orizzontali */
@media screen and (max-width: 1200px) {
#stats_table {
  font-size: 1.5rem; 
}
}

/* Tablet verticali e telefoni grandi */
@media screen and (max-width: 768px) {
#stats_table {
  font-size: 1rem; 
}
}

/* Smartphone */
@media screen and (max-width: 480px) {
#stats_table {
  font-size: 1rem; 
}
}




/*stats_table*/

/*stats_graph_var*/

#stats_graph_var {
  width: 100%; /* Imposta la larghezza al 50% */
  display: block; /* Assicura che l'immagine sia trattata come un blocco per il centramento */
}

@media screen and (max-width: 480px) {
#stats_graph_var {
   width: 100%;
}
}

/*stats_graph_var*/


/*stats_graph*/

#stats_graph {
  width: 50%; /* Imposta la larghezza al 50% */
  margin: 20px auto; /* Centra l'immagine orizzontalmente e aggiunge margini verticali */
  display: block; /* Assicura che l'immagine sia trattata come un blocco per il centramento */
}

@media screen and (max-width: 480px) {
#stats_graph {
   width: 80%;
}
}

/*stats_graph*/


/*help*/

/* Rimuovere la numerazione dall'indice e stilizzare gli elementi */
#index ul {
  margin-left:0.5%;
  margin-right:0.5%;
  list-style-type: none; /* Rimuove la numerazione (o i puntini) */
  padding: 0; /* Rimuove il padding predefinito */
}

#index li {
  margin-left:0.5%;
  margin-right:0.5%;
  margin-bottom: 1.5rem; /* Distanza tra gli elementi dell'indice */
}

/* Centrato e font size per l'indice */
#index {
  margin-left:0.5%;
  margin-right:0.5%;
  text-align: justify; /* Centra il testo */
  font-size: 2rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato e font size per le risposte */
#content section {
  margin-left:0.5%;
  margin-right:0.5%;
  text-align: justify; /* Centra il testo all'interno delle sezioni */
  font-size: 2rem;  /* Imposta la dimensione del carattere a 2.5rem */
  margin-bottom: 2rem; /* Aggiungi spazio tra le risposte */

}

/* Centrato anche il titolo dell'indice */
#index h2 {
  margin-left:0.5%;
  margin-right:0.5%;
  text-align: justify; /* Centra il titolo dell'indice */
  font-size: 2rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato anche i titoli delle sezioni */
#content section h3 {
  margin-left:0.5%;
  margin-right:0.5%;
  text-align: justify; /* Centra il titolo della sezione */
  font-size: 2rem;  /* Imposta la dimensione del carattere a 2.5rem */
}


@media screen and (max-width: 2000px){

#index li {
  margin-bottom: 1.3rem; /* Distanza tra gli elementi dell'indice */
}

/* Centrato e font size per l'indice */
#index {
  font-size: 2rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato e font size per le risposte */
#content section {
  font-size: 2rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato anche il titolo dell'indice */
#index h2 {
  font-size: 2rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato anche i titoli delle sezioni */
#content section h3 {
  font-size: 2rem;  /* Imposta la dimensione del carattere a 2.5rem */
}


}

@media screen and (max-width: 1500px){

#index li {
  margin-bottom: 1rem; /* Distanza tra gli elementi dell'indice */
}

/* Centrato e font size per l'indice */
#index {
  font-size: 2rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato e font size per le risposte */
#content section {
  font-size: 1.5rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato anche il titolo dell'indice */
#index h2 {
  font-size: 1.5rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato anche i titoli delle sezioni */
#content section h3 {
  font-size: 1.5rem;  /* Imposta la dimensione del carattere a 2.5rem */
}


}

@media screen and (max-width: 1000px){

#index li {
  margin-bottom: 0.5rem; /* Distanza tra gli elementi dell'indice */
}

/* Centrato e font size per l'indice */
#index {
  font-size: 1.5rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato e font size per le risposte */
#content section {
  font-size: 1.5rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato anche il titolo dell'indice */
#index h2 {
  font-size: 1.5rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato anche i titoli delle sezioni */
#content section h3 {
  font-size: 1.5rem;  /* Imposta la dimensione del carattere a 2.5rem */
}


}

@media screen and (max-width: 768px){

#index li {
  margin-bottom: 0.3rem; /* Distanza tra gli elementi dell'indice */
}

/* Centrato e font size per l'indice */
#index {
  font-size: 1.25rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato e font size per le risposte */
#content section {
  font-size: 1.25rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato anche il titolo dell'indice */
#index h2 {
  font-size: 1.25rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato anche i titoli delle sezioni */
#content section h3 {
  font-size: 1.25rem;  /* Imposta la dimensione del carattere a 2.5rem */
}


}

@media screen and (max-width: 480px){

#index li {
  margin-bottom: 0.3rem; /* Distanza tra gli elementi dell'indice */
}

/* Centrato e font size per l'indice */
#index {
  font-size: 1rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato e font size per le risposte */
#content section {
  font-size: 1rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato anche il titolo dell'indice */
#index h2 {
  font-size: 1rem;  /* Imposta la dimensione del carattere a 2.5rem */
}

/* Centrato anche i titoli delle sezioni */
#content section h3 {
  font-size: 1rem;  /* Imposta la dimensione del carattere a 2.5rem */
}


}



/*help*/




/*Tabs style*/

.tab {
  display: flex;
  justify-content: center; /* Allinea i tab al centro */
  border-bottom: 1px solid #ccc;
  margin-top: 20px;
}

/* Bottoni dei tab */
.tab button {
  color:white;
  background-color: #006886;
  border: 1px solid black;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 2.5rem;
  text-align: center;
}

/* Cambia colore al passaggio del mouse */
.tab button:hover {
    background: #227282;
}

/* Colore attivo per il tab selezionato */
.tab button.active {
    background: #227282;
}

/* Stile per il contenuto delle tab */
.tabcontent {
  margin-top: 1%;
  margin-bottom: 0%;
  padding-left: 3%;
  padding-right: 3%;
  position: relative;
  height: auto;
  min-height: 80vh;
  text-align: justify;
  color: black;
  font-size: 2rem;
  display: flex;
  flex-direction: column; /* Disposizione verticale */
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  background-color: white;
}

/*Tabs style*/



#route {
  font-weight: normal;
  margin-top: 5vh;
  font-size: 1.6rem; /* Stessa dimensione dei bottoni */
  font-family: inherit;
  color: black;
  position: relative;
  left: 0;
  clear: both;
  background-color: white;
  padding: 10px 10px 10px 30px; /* Aggiunto padding a sinistra (30px in questo esempio) */
}



/* Media Queries */

@media screen and (max-width: 2000px){
  #description {
    font-size: 2rem;
  }
  
  #abtdes {
    font-size: 2rem;
}

  .tabcontent {
    font-size: 2rem;
}

  .tab button {
    font-size: 2rem;
}


}

/* Laptop e tablet orizzontali */
@media screen and (max-width: 1200px) {
  #upper_body {
    font-size: 3rem;
  }

  .navbar a,
  .subnav .subnavbtn,
  #route {
    font-size: 1.4rem;
    padding: 1em 1.5em;
  }

  #description {
    font-size: 1.5rem;
  }
  
  .tabcontent {
    font-size: 1.5rem;
}  
}

/* Tablet verticali e telefoni grandi */
@media screen and (max-width: 768px) {
  #upper_body {
  }

  .navbar a,
  .subnav .subnavbtn,
  #route {
    font-size: 1.2rem;
    padding: 0.8em 1.5em;
  }

  #description {
    font-size: 1.25rem;
    padding: 0 2%; /* Aggiornato per una migliore responsività */
  }
  
  #abtdes {
    font-size: 1.5rem;
}
  .tabcontent {
    font-size: 1.25rem;
}

  .tab button {
    font-size: 1.5rem;
}


}

/* Smartphone */
@media screen and (max-width: 480px) {
  #upper_body {
    font-size: 2rem;
  }

  .navbar a,
  .subnav .subnavbtn,
  #route {
    font-size: 1rem;
    padding: 0.5em 1em;
  }

  #description {
    font-size: 1rem;
    padding: 0 5%; /* Aggiornato per una migliore responsività */
  }
  #abtdes {
    font-size: 1.25rem;
}
  .tabcontent {
    font-size: 1rem;
}

  .tab button {
    font-size: 1rem;
}



}

/*homepage*/

/* targets page */
#targets_description {
  margin-top:5%;
  margin-bottom:0.5%;
  padding-left: 5%;
  padding-right: 5%;
  position: relative;
  height: auto;
  text-align: center;
  color: black;
  font-size: 2rem; /* Grande quanto description in homepage */
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

#targetsdes {
  margin-left: auto;
  margin-right: auto;
  margin-bottom:10%;
  width: 80%;
  text-align: center;
  color: black;
  font-size: 2rem;
}

#targetsform {
  position: relative;
  top: 20px;
  text-align: center;
}

#targetsbox {
  width: 100%;
  max-width: 800px;
  height: auto;
  padding: 14px;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 4px;
  font-family: sans-serif;
  color: black;
  font-size: 1.6rem;
  margin-left: 0 auto;
  margin-top: 0 auto;
  margin-right: 0 auto;
  margin-bottom: 0.5%;
}

/* Aumenta la dimensione del placeholder */
#targetsbox::placeholder {
  font-size: 1.6rem;
}

#targetsbox[type='text']:focus {
  border: 3px solid #006886;
  outline: none;
}

#targetsbutton {
  font-size: 1.6rem;
  width: 200px; /* Imposta una larghezza fissa */
  border: 1px solid black;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #006886;
  font-family: inherit;
  margin: 10px auto;
  display: block;
}

#targetsbutton:hover {
  background-color: #227282;
}


/* Media Queries */

/* Laptop e tablet orizzontali */
@media screen and (max-width: 1200px) {
  #targets_description {
    font-size: 1.5rem;
  }

  #targetsdes {
    font-size: 1.5rem;
        margin-bottom:20%;
  }


  #targetsbox::placeholder {
  font-size: 1.5rem;
}

  #targetsbox {
    font-size: 1.5rem; /* Dimensione del font della textbox */
    padding: 12px; /* Riduce il padding */
  }

  #targetsbutton {
    width: 180px; /* Ridotto per adattarsi meglio */
    font-size: 1.5rem;
  }

}

/* Tablet verticali e telefoni grandi */
@media screen and (max-width: 768px) {
  #targets_description {
    font-size: 1.25rem;
  }

  #targetsdes {
    font-size: 1.25rem;
    margin-bottom:60%;
  }

  #targetsbox::placeholder {
  font-size: 1.25rem;
}


  #targetsbox {
    font-size: 1.25rem;
    padding: 10px; /* Ridotto per migliorare l'adattamento */
  }

  #targetsbutton {
    width: 160px; /* Ulteriore riduzione */
    font-size: 1.3rem;
  }
}

/* Smartphone */
@media screen and (max-width: 480px) {
  #targets_description {
    font-size: 1rem;
  }

  #targetsdes {
    font-size: 1rem;
  }
  
  #targetsbox::placeholder {
  font-size: 0.8rem;
}


  #targetsbox {
    font-size: 1rem;
    padding: 8px; /* Ulteriore riduzione del padding */
  }

  #targetsbutton {
    width: 140px; /* Ridotto per gli schermi più piccoli */
    font-size: 1rem;
  }

}

/* targets page */

/*treatments page*/

#treatments_description {
  margin-top:5%;
  margin-bottom:0.5%;
  padding-left: 5%;
  padding-right: 5%;
  position: relative;
  height: auto;
  text-align: center;
  color: black;
  font-size: 2rem; /* Grande quanto description in homepage */
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

#treatmentsformdes {
  
  margin-left: auto;
  margin-right: auto;
  margin-bottom:10%;
  width: 80%;
  text-align: center;
  color: black;
  font-size: 2rem;
}

#treatmentsform {
  position: relative;
  top: 20px;
}

#uniprotbox,
#varbox {
  width: 9vw; /* Imposta una larghezza minima per le textbox */
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 4px;
  color: black;
  font-size: 1.6rem;
  padding: 10px;
  margin: 10px 0; /* Margine verticale per distanziare gli input */
}

#varbox {
  width: 9vw;
  max-width: 300px;
}

#uniprotbox:focus,
#varbox:focus {
  border: 3px solid #006886; /* Colore del bordo al focus */
  outline: none; /* Rimuove il contorno di default */
}

#uniprotlabel,
#varlabel {
  display: block; /* Mantiene il display in block per centrare i label */
  color: black;
  font-size: 2rem;
  margin-bottom: 5px; /* Distanza tra label e textbox */
  text-align: center; /* Centra i label */
}

#treatmentsbutton {
  font-size: 1.6rem;
  width: 200px; /* Larghezza fissa per il bottone */
  border: 1px solid black;
  color: white;
  padding: 14px;
  background-color: #006886;
  margin: 20px auto; /* Centrato */
  display: block; /* Blocca il bottone per centrarlo */
}

#treatmentsbutton:hover {
  background-color: #227282;
}


@media screen and (max-width: 2000px) {

  #treatments_description {
    font-size: 2rem;
  }

#uniprotbox,
  #varbox {
    font-size: 1.5rem;
    width: 15vw; /* Imposta una larghezza minima per le textbox */
  }
}  
  

@media screen and (max-width: 1400px) {

#uniprotbox,
  #varbox {
    font-size: 1.4rem;
    width: 20vw; /* Imposta una larghezza minima per le textbox */
  }



  #treatments_description {
    font-size: 2rem;
  }
}

@media screen and (max-width: 1200px) {
  #treatments_description {
    font-size: 1.5rem;
  }

  #treatmentsformdes {
    width: 90%; /* Riduce la larghezza per schermi più piccoli */
    margin-bottom:20%;
  }

  #uniprotbox,
  #varbox {
    font-size: 1.5rem;

  }

  #treatmentsbutton {
    width: 180px; /* Riduce la larghezza del bottone */
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 1200px) {
  #treatments_description {
    font-size: 1.25rem;
  }

  #treatmentsformdes {
    width: 90%; /* Riduce la larghezza per schermi più piccoli */
    margin-bottom:20%;
  }

  #uniprotbox,
  #varbox {
    font-size: 1.25rem;
  }

  /* Aggiungi la modifica per le labels */
  #uniprotlabel,
  #varlabel {
    font-size: 1.25rem; /* Modifica la dimensione per schermi più piccoli */
  }

  #treatmentsbutton {
    width: 180px; /* Riduce la larghezza del bottone */
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 768px) {
  #treatments_description {
    font-size: 1rem;
  }
  
  #treatmentsformdes {
    width: 90%; /* Riduce la larghezza per schermi più piccoli */
    margin-bottom:60%;
  }

  #uniprotbox,
  #varbox {
    font-size: 1rem;
    width: 32vw; /* Maggiore larghezza per i telefoni */
  }

  /* Modifica per le labels */
  #uniprotlabel,
  #varlabel {
    font-size: 1rem; /* Riduce ulteriormente la dimensione per dispositivi più piccoli */
  }

  #treatmentsbutton {
    width: 160px;
    font-size: 1rem;
  }
}

@media screen and (max-width: 480px) {
  #treatments_description {
    font-size: 1rem;
  }

  #uniprotbox,
  #varbox {
    font-size: 1rem;
    width: 38vw;

  }

  /* Modifica per le labels */
  #uniprotlabel,
  #varlabel {
    font-size: 1rem; /* Ulteriore riduzione della dimensione per schermi molto piccoli */
  }

  #treatmentsbutton {
    width: 140px;
    font-size: 1rem;
  }
}

/*treatments page*/

/*diseases page*/

#dis_content_wrapper {

    display: flex;
    flex-direction: column; /* Impila gli elementi verticalmente */
    align-items: center;   /* Centra gli elementi figli orizzontalmente */
    width: 90%;            /* Larghezza del contenitore principale */
    margin: 0 auto;        /* Centra il contenitore Flexbox stesso sulla pagina */
    padding: 20px 0;       /* Padding verticale per il contenitore */
    min-height: 30vh; /* Altezza minima per il wrapper principale */

    }
    
@media (min-width: 768px) and (max-width: 1200px) {
    #dis_content_wrapper {
        min-height: 15vh;
}}

@media (min-width: 768px) and (max-width: 768px) {
    #dis_content_wrapper {
        min-height: auto;
}}


#diseases_description {
  margin-top:5%;
  margin-bottom:0.5%;
  padding-left: 5%;
  padding-right: 5%;
  position: relative;
  height: auto;
  text-align: center;
  color: black;
  font-size: 2rem; /* Grande quanto description in homepage */
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

#diseasesdes {
  margin-left: auto;
  margin-right: auto;
  margin-bottom:10%;
  width: 80%;
  text-align: center;
  color: black;
  font-size: 2rem;
}

#diseasesform {
  position: relative;
  top: 20px;
  text-align: center;
}

#diseasesbox {
  width: 100%;
  max-width: 800px;
  height: auto;
  padding: 14px;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 4px;
  font-family: sans-serif;
  color: black;
  font-size: 1.6rem;
  margin-left: 0 auto;
  margin-top: 0 auto;
  margin-right: 0 auto;
  margin-bottom: 0.5%;
}

/* Aumenta la dimensione del placeholder */
#diseasesbox::placeholder {
  font-size: 1.6rem;
}

#diseasesbox[type='text']:focus {
  border: 3px solid #006886;
  outline: none;
}

#diseasesbutton {
  font-size: 1.6rem;
  width: 200px; /* Imposta una larghezza fissa */
  border: 1px solid black;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #006886;
  font-family: inherit;
  margin: 10px auto;
  display: block;
}

#diseasesbutton:hover {
  background-color: #227282;
}



/* Media Queries */

/* Laptop e tablet orizzontali */
@media screen and (max-width: 1200px) {
  #diseases_description {
    font-size: 1.5rem;
  }

  #diseasesdes {
    font-size: 1.5rem;
    margin-bottom:20%;
  }

  #diseasesbox::placeholder {
  font-size: 1.5rem;
}

  #diseasesbox {
    font-size: 1.5rem; /* Dimensione del font della textbox */
    padding: 12px; /* Riduce il padding */
  }

  #diseasesbutton {
    width: 180px; /* Ridotto per adattarsi meglio */
    font-size: 1.5rem;
  }
}

/* Tablet verticali e telefoni grandi */
@media screen and (max-width: 768px) {
  #diseases_description {
    font-size: 1.25rem;
  }
  
  #diseasesbox::placeholder {
  font-size: 1.25rem;
}  

  #diseasesdes {
    font-size: 1.25rem;
    margin-bottom:60%;
  }

  #diseasesbox {
    font-size: 1.25rem;
    padding: 10px; /* Ridotto per migliorare l'adattamento */
  }

  #diseasesbutton {
    width: 160px; /* Ulteriore riduzione */
    font-size: 1.25rem;
  }
}

/* Smartphone */
@media screen and (max-width: 480px) {
  #diseases_description {
    font-size: 1rem;
  }
  
  #diseasesbox::placeholder {
  font-size: 1rem;
}   

  #diseasesdes {
    font-size: 1rem;
  }

  #diseasesbox {
    font-size: 1rem;
    padding: 8px; /* Ulteriore riduzione del padding */
  }

  #diseasesbutton {
    width: 140px; /* Ridotto per gli schermi più piccoli */
    font-size: 1rem;
  }
}

/*diseases page*/

/* chaperones output tables */

#chaperones {
  width: 50%;
  position: absolute;
  top: 800px;
  left: 25px;
  font-family: sans-serif;
  border-collapse: collapse;
  color: black;
}

#chaperones td,
#chaperones th {
  border: 1px solid black;
  padding: 8px;
  background: #7999ed;
}

#chaperones th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #006886;
  color: black;
}

/* chaperones output tables */

/* target page */

#target_spacer {
    height: 5vh;
}

@media screen and (max-width: 1200px) {
    #target_spacer {
        color: blue;
        height: 25vh;
    }
}

/* Stile per il titolo del target */
#target_title {
    font-size: 2.5rem;
    color: white;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    font-family: 'sans-serif', sans-serif;
    background: #006886;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Stile per la descrizione del target */
#target_description {
    font-size: 2rem;
    color: black;
    text-align: center;
    margin: 20px 15px;
    line-height: 1.6;
    font-family: 'sans-serif', sans-serif;
    padding: 15px;
    margin-top: 1%;
    margin-bottom: 4%;
}

/* --- BLOCCO: Contenitore Flexbox per centrare i contenuti principali --- */
#main_content_wrapper {
    display: flex;
    flex-direction: column; /* Impila gli elementi verticalmente */
    align-items: center;   /* Centra gli elementi figli orizzontalmente */
    width: 90%;            /* Larghezza del contenitore principale */
    margin: 0 auto;        /* Centra il contenitore Flexbox stesso sulla pagina */
    padding: 20px 0;       /* Padding verticale per il contenitore */
    min-height: 50vh; /* Altezza minima per il wrapper principale */
}
/* ---------------------------------------------------------------------- */

/* Stile per il contenitore delle features (ora #protein_features_section) */
#protein_features_section {
    width: 100%; /* Occupa tutta la larghezza disponibile nel suo genitore flex */
    box-sizing: border-box; /* Include padding nel calcolo della larghezza */
    padding: 0 20px; /* Padding interno */
    display: flex; /* Trasforma in Flexbox */
    justify-content: center; /* Centra orizzontalmente i figli */
    /* text-align: center; /* Puoi rimuovere questo se non hai testo diretto qui */**
}




/* Stile per la NUOVA tabella delle features (#target_features_table) */
#target_features_table {
    font-size: 2rem;
    border-collapse: collapse;
    max-width: 800px;
}

#target_features_table td {
    padding: 2% 0%;
    white-space: nowrap;

}


/* --- BLOCCO: Spaziatore tra Features e JSmol --- */
#spacer_features_jsmol {
    height: 5vh; /* Usa vh per un'altezza relativa alla viewport */
    min-height: 30px; /* Mantieni un min-height in px per garantire visibilità su schermi piccoli */
    width: 100%;
}
/* ----------------------------------------------------- */

/* --- Blocchi Spaziatori non più necessari (se presenti altrove) --- */
#thespace_target {
    display: none;
}

#thespace_vertical_small {
    display: none;
}
/* ------------------------------------------------------------- */

#thespace_chap {
    width: 25%;
}

#thespace_vertical {
    height: 15%;
}

/* Stile per il contenitore di JSmol (ora #jsmol_container) */
#jsmol_container {
    width: 80%; /* Occupa l'80% della larghezza del suo genitore flex */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    height: 70vh; /* Altezza del contenitore di JSmol relativa alla viewport */
    min-height: 300px; /* Altezza minima in pixel per garantire che JSmol sia sempre visibile */
}

/* Stile per il blocco JSmol effettivo */
#TarJmolDiv {
    width: 100%; /* Larghezza effettiva di JSmol */
    height: 100%; /* Altezza 100% rispetto al suo genitore #jsmol_container */
    min-height: 250px; /* Altezza minima in pixel per JSmol stesso */
}

/* Media Queries */

/* Tablet (larghezza tra 768px e 1200px) */
@media (min-width: 768px) and (max-width: 1200px) {

    #features-label{font-size: 1.5rem;}

    #features-value{font-size: 1.5rem;}
    
    #target_features_table {
    font-size: 1.5rem;}

    #target_spacer {
        height: 4vh;
    }

    #thespace_target {
        display: none;
    }

    #target_title {
        font-size: 1.5rem;
    }

    #target_description {
        font-size: 1.5rem;
    }

    #main_content_wrapper {
        min-height: 40vh;
    }

    #protein_features_section {
        font-size: 1.5rem;
        text-align: center; /* Mantieni se hai testo diretto, altrimenti rimuovi */
        display: flex;
        justify-content: center;**
    }
    
    #spacer_features_jsmol {
        height: 3vh;
        min-height: 20px;
    }

    /* Rimosso: #target_features */

    #jsmol_container {
        width: 80%;
        height: 70vh;
        min-height: 250px;
    }
    #TarJmolDiv {
        height: 100%;
        min-height: 200px;
    }
}

/* Mobile (larghezza inferiore a 768px) */
@media (max-width: 768px) {

    #features-label{font-size: 1.25rem;}

    #features-value{font-size: 1.25rem;}
    
    #target_features_table {
    font-size: 1.25rem;}


    #target_title {
        font-size: 1.25rem;
    }

    #target_description {
        font-size: 1.25rem;
    }

    #main_content_wrapper {
        width: 100%;
        padding: 0 10px;
        min-height: auto; 
    }

    #protein_features_section {
        font-size: 1.25rem;
        text-align: center; /* Mantieni se hai testo diretto, altrimenti rimuovi */
        width: 100%;
        padding: 10px;
        display: flex;
        justify-content: center;**
    }
    
    #spacer_features_jsmol {
        height: 2vh;
        min-height: 15px;
    }

    /* Rimosso: #target_features */

    #jsmol_container {
        width: 80%;
        height: 70vh;
        min-height: 200px;
    }

    #TarJmolDiv {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 150px;
        margin: 0 auto;
    }

    #thespace_vertical {
        height: 15%;
    }
}

@media (max-width: 600px) {

    #target_features_table td {
    white-space: normal;}
    
}

@media (max-width: 480px) {

    #target_features_table td {
    white-space: normal;}


    #features-label{font-size: 1rem;}

    #features-value{font-size: 1rem;}
    
    #target_features_table {
    font-size: 1rem;}

    
    #target_title {
        font-size: 1rem;
    }

    #target_description {
        font-size: 1rem;
    }

    #main_content_wrapper {
        width: 100%;
        padding: 0 5px;
        min-height: auto;
    }

    #protein_features_section {
        font-size: 1rem;
        text-align: center; /* Mantieni se hai testo diretto, altrimenti rimuovi */
        margin-right: 0;
        min-width: 90%;
        max-width: 100%;
        padding: 10px;
        display: flex;
        justify-content: center;**
    }
    
    #spacer_features_jsmol {
        height: 1vh;
        min-height: 10px;
    }

    /* Rimosso: #target_features */

    #jsmol_container {
        width: 80%;
        height: 50vh;
        min-height: 180px;
    }

    #TarJmolDiv {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 120px;
        margin: 0 auto;
    }

    #thespace_vertical {
        height: 15%;
    }
}

/* target page */

/*variant page*/

#var_space{
min-height:20vh;
}



#container {
  height: 70vh; /* Altezza del container in percentuale rispetto alla viewport */
  display: flex; /* Utilizza flexbox per allineare le features e JSmol */
  justify-content: center; /* Centra JSmol nel container */
  align-items: flex-start; /* Allinea gli elementi all'inizio verticalmente */
  margin: 20px 0; /* Margine sopra e sotto il container */
  padding: 0 20px; /* Padding laterale per il contenitore */
  width: 100%; /* Assicura che il container utilizzi tutta la larghezza */
  margin-bottom: -18%;
}

#VarJmolDiv {
  width: 30%; /* Mantieni la larghezza al 100% */
  height: 50%; /* Altezza fissa per JSmol */
}

#thespace{
  width:5%;

}

#variant_table {
  width: 50vw;
  height:auto;
  position: relative;
  font-family: sans-serif;
  font-size: 2rem;
  text-align: center;
  border-collapse: collapse;
  color: white;
  margin-top: 2.5%;
  flex: 0 0 auto; /* Non permette di espandersi, mantiene le dimensioni naturali */
}

#variant_table td,
#variant_table th {
  border: 1px solid black;
  padding: 1%;
  background: #227282;
  text-align: center;
}

#variant_table th {
  text-align: center;
  background-color: #006886;
  color: white;
}

#variant_title {
  font-size: 2.5rem; /* Dimensione del testo del titolo */
  color: white; /* Colore del testo */
  text-align: center; /* Allineamento centrale del titolo */
  margin-top: 1%; /* Spazio sopra il titolo */
  margin-bottom: 1%; /* Spazio sotto il titolo */
  font-weight: bold; /* Testo in grassetto */
  font-family: 'sans-serif', sans-serif; /* Font per il titolo */
  background: #006886; /* Colore di sfondo per il titolo */
  padding: 10px; /* Spaziatura interna */
  border-radius: 5px; /* Angoli arrotondati */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombra sotto il titolo */
}

#variant_description {
  font-size: 2rem; /* Dimensione leggermente più piccola del titolo */
  color: black; /* Colore del testo, in linea con lo stile del titolo */
  text-align: center; /* Allineamento centrale */
  margin-top: 0%; /* Spazio sopra la descrizione per separarla dal titolo */
  margin-bottom: 3%; /* Spazio sotto la descrizione */
  font-family: 'sans-serif', sans-serif; /* Font coerente con il titolo */
  padding: 8px; /* Spaziatura interna per una buona leggibilità */
}


/* Media Queries */
@media (max-width: 2000px) {
#var_space{
min-height:40vh;
}

}

@media (max-width: 1400px) {
 #variant_table {
    font-size: 1.5rem; /* Riduci la dimensione del font */
  }

#var_space{
min-height:50vh;
}

}

/* Stili generali (già forniti) */

/* Media Queries */
@media (max-width: 1200px) {
  /* Desktop: max-width 1200px */
  #variant_table {
    font-size: 1.25rem; /* Riduci la dimensione del font */
  }

  #VarJmolDiv { /* Riduci la larghezza di JSmol */
  }
}

@media (max-width: 992px) {
  /* Tablet: max-width 992px */
  #container {
    flex-direction: column; /* Disposizione verticale */
    height: auto; /* Imposta altezza automatica */
    align-items: center; /* Centra gli elementi */
  }

  #variant_table {
    margin-left: 0; /* Rimuovi il margine sinistro */
    margin-right: 0; /* Rimuovi il margine destro */
  }

  #VarJmolDiv {

  }
}

@media (max-width: 768px) {
  /* Large mobile: max-width 768px */
  #variant_title {
    font-size: 2rem; /* Riduci la dimensione del titolo */
  }

  #variant_description {
    font-size: 1.5rem; /* Riduci la dimensione della descrizione */
  }

  #thespace{
  display:none;

}

  #variant_table {
    font-size: 1rem; /* Riduci la dimensione del font della tabella */
  }
  #VarJmolDiv {
    display: none; /* Riduci l'altezza di JSmol */
  }
}

@media (max-width: 576px) {
  /* Small mobile: max-width 576px */
  #variant_title {
    font-size: 1.8rem; /* Ulteriore riduzione della dimensione del titolo */
  }

  #variant_description {
    font-size: 1.2rem; /* Ulteriore riduzione della dimensione della descrizione */
  }

  #variant_table {
    font-size: 1rem; /* Ulteriore riduzione della dimensione del font della tabella */
  }

  #VarJmolDiv {
    display: none; /* Riduci l'altezza di JSmol */
  }
  #var_space{
  min-height:20vh;
  }
}

/*variant page*/

/* Chaperone page */

/* Container for image and features */
#chaperone_container {
  display: flex; /* Utilizza flexbox per allineare i contenuti */
  align-items: flex-start; /* Allinea gli elementi all'inizio */
  justify-content: center; /* Spazia gli elementi lungo l'asse principale */
  margin-top: 0%; /* Margine superiore per distanziare dal titolo */
  width:90%;
}

/* Image styling */



#chap_image {
  width: 80%; /* Larghezza effettiva di JSmol */
  height: 80%; /* Altezza 100% rispetto al suo genitore #jsmol_container */
  min-height: 250px; /* Altezza minima in pixel per JSmol stesso */
  position: relative;
  border: 2px solid black; /* Bordo solido di 2px con il colore desiderato */
  transform: scale(1); /* Ingrandisci l'immagine del 10% */
}

/* Title styling */
#chaperone_title {
  font-size: 2.5rem;
  color: white;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 5%;
  font-weight: bold;
  font-family: 'sans-serif', sans-serif;
  background: #006886;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Features styling */
#chaperone_features {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  height: auto;
  text-align: left;
  color: black;
  font-size: 1.8rem;
}

/* Distanza tra le singole features */
#chaperone_features div {
  margin-bottom: 50px; /* Aumentato per distanziare le features */
}

/* Media Queries per Responsività */


@media screen and (max-width: 2000px) {
#chap_image {

  }


}


@media screen and (max-width: 2500px) {
#chap_image {

  }


}

/* Tablet e Dispositivi Medi */
@media screen and (max-width: 1200px) {
  #chaperone_container {
    flex-direction: column; /* Cambia l'orientamento in colonna */
    align-items: center; /* Allinea gli elementi al centro */
    
  }

  #chap_image {
  }

  #chaperone_title {
    font-size: 2rem; /* Dimensione del titolo ridotta */
  }

  #chaperone_features {
    font-size: 1.6rem; /* Dimensione del testo ridotta */
  }

  #chaperone_features div {
    margin-bottom: 30px; /* Riduce la distanza tra le features */
  }
}

/* Tablet */
@media screen and (max-width: 768px) {
  #chaperone_container {
    flex-direction: column; /* Cambia l'orientamento in colonna */
    align-items: center; /* Allinea gli elementi al centro */
  }

  #chap_image {
 
  }

  #chaperone_title {
    font-size: 1.5rem; /* Dimensione del titolo ridotta */
  }

  #chaperone_features {
    font-size: 1.6rem; /* Dimensione del testo ridotta */
  }

  #chaperone_features div {
    margin-bottom: 30px; /* Riduce la distanza tra le features */
  }
}

/* Mobile */
@media screen and (max-width: 480px) {

  #chaperone_container{
   flex-direction: column;
   
  
  
  }



  #chap_image {
    width:80%;
    transform: scale(1.0); /* Ulteriore riduzione dell'ingrandimento */
  }

  #chaperone_title {
    font-size: 1rem; /* Dimensione del titolo ulteriormente ridotta */
  }

  #chaperone_features {
    margin-top: 15%;
    margin-bottom:5%;
    font-size: 1.4rem; /* Dimensione del testo ulteriormente ridotta */
  }

  #chaperone_features div {
    margin-bottom: 20px; /* Riduce la distanza tra le features */
  }
}






#chap_features_table {
    font-size: 2rem;
    border-collapse: collapse;
    table-layout: fixed;
    width: 80%;
}

#chap_features_table td {
    padding: 2% 0%;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}



#chap_content_wrapper {
    display: flex;
    flex-direction: column; /* Impila gli elementi verticalmente */
    align-items: center;   /* Centra gli elementi figli orizzontalmente */
    width: 100%;            /* Larghezza del contenitore principale */
    margin: 0 auto;        /* Centra il contenitore Flexbox stesso sulla pagina */
    padding: 20px 0;       /* Padding verticale per il contenitore */
    min-height: 50vh; /* Altezza minima per il wrapper principale */
}

@media (max-width: 1440px) {
    #chap_features_table td {
    font-size:1.5rem;
    }
    #chap_content_wrapper {
        min-height: 40vh;
}}


@media (max-width: 1280px) {
    #chap_features_table td {
    font-size:1.5rem;
    }
    #chap_content_wrapper {
        min-height: 40vh;
}}

@media (max-width: 768px) {
    #chap_features_table td {
    font-size:1.25rem;

    }
    #chap_content_wrapper {
        width: 100%;
        padding: 0 10px;
        min-height: auto; 
}}

@media  (max-width: 480px) {
    #chap_features_table td {
    font-size:1rem;

    }
}


/* Chaperone page */

/*disease page*/

/* Styles for the initial screen resolution */
#disease_title {
  font-size: 2.5rem;
  color: white;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  font-family: 'sans-serif', sans-serif;
  background: #006886;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#disease_description {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  margin-top: 1%; /* Ridotto per avvicinare la descrizione */
  height: auto; /* Modificato per adattarsi al contenuto */
  text-align: center;
  color: black;
  font-size: 2rem; /* Dimensioni aumentate per le condizioni normali */
}

#disease_features {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  margin-top: 2%; /* Ridotto per avvicinare le features */
  height: auto;
  text-align: left;
  color: black;
  font-size: 1.8rem;
}

#disease_features > div {
  margin-bottom: 2%; /* Ridotto per avvicinare le features */
}

/* Downscaling: Screens with max-width 2560px (Full HD) */
@media screen and (max-width: 2560px) {
  #disease_title {
    font-size: 2.3rem;
    height: auto;
  }

  #disease_description {
    font-size: 2rem; /* Leggermente più piccolo per schermi di dimensioni intermedie */
    height: auto;
  }

  #disease_features {
    font-size: 1.6rem;
    margin-top: 2%; /* Ridotto per avvicinare le features */
  }

  #disease_features > div {
    margin-bottom: 2%; /* Ridotto per avvicinare le features */
  }
}

/* Downscaling: Screens with max-width 1440px (laptop) */
@media screen and (max-width: 1440px) {
  #disease_title {
    font-size: 2rem;
  }

  #disease_description {
    font-size: 1.8rem; /* Ridotto per schermi laptop */
    height: auto;
  }

  #disease_features {
    font-size: 1.5rem;
    margin-top: 2%; /* Ridotto per avvicinare le features */
  }

  #disease_features > div {
    margin-bottom: 2%; /* Ridotto per avvicinare le features */
  }
}

/* Downscaling: Tablet Screens (max-width 768px) */
@media screen and (max-width: 768px) {
  #disease_title {
    font-size: 1.8rem;
  }

  #disease_description {
    font-size: 1.5rem; /* Ulteriormente ridotto per tablet */
    height: auto;
  }

  #disease_features {
    font-size: 1.3rem;
    margin-top: 2%; /* Ridotto per avvicinare le features */
  }

  #disease_features > div {
    margin-bottom: 2%; /* Ridotto per avvicinare le features */
  }
}

/* Downscaling: Mobile Screens (max-width 600px) */
@media screen and (max-width: 600px) {
  #disease_title {
    font-size: 1.6rem;
  }

  #disease_description {
    font-size: 1.3rem; /* Ulteriormente ridotto per cellulari */
    height: auto;
  }

  #disease_features {
    font-size: 1.2rem;
    margin-top: 2%; /* Ridotto per avvicinare le features */
  }

  #disease_features > div {
    margin-bottom: 2%; /* Ridotto per avvicinare le features */
  }
}

/* Downscaling: Mobile Screens (max-width 480px) */
@media screen and (max-width: 480px) {
  #disease_title {
    font-size: 1.4rem;
  }

  #disease_description {
    font-size: 1.2rem; /* Leggermente ridotto per schermi molto piccoli */
    margin-top: 2%; /* Mantieni margine ridotto */
    height: auto;
  }

  #disease_features {
    font-size: 1.1rem;
    margin-top: 2%; /* Mantieni margine ridotto */
  }

  #disease_features > div {
    margin-bottom: 2%; /* Ridotto per avvicinare le features */
  }
}

/*disease page*/

/*target page*/

#target_a:link {
  text-decoration: underline;
  font-size: 2rem;
  color: white;
}

#target_a:visited {
  color: white;
}

#target_a:hover {
  color: blue;
}

#target_a:active {
  color: blue;
}

#link_a:link {
  text-decoration: underline;
  color: white;
}

#link_a:visited {
  color: white;
}

#link_a:hover {
  color: blue;
}

#link_a:active {
  color: blue;
}

#link_b:link {
  text-decoration: underline;
  color: black;
}

#link_b:visited {
  color: black;
}

#link_b:hover {
  color: blue;
}

#link_b:active {
  color: blue;
}


/* Downscaling: Screens with max-width 1440px (laptop) */
@media screen and (max-width: 1440px) {
#target_a:link {
  font-size: 2rem;
}

}

/* Downscaling: Tablet Screens (max-width 768px) */
@media screen and (max-width: 768px) {

#target_a:link {
  font-size: 1.5rem;
}

}

/* Downscaling: Mobile Screens (max-width 600px) */
@media screen and (max-width: 600px) {
#target_a:link {
  font-size: 1.25rem;
}

}

/* Downscaling: Mobile Screens (max-width 480px) */
@media screen and (max-width: 480px) {
#target_a:link {
  font-size: 1rem;
}
}


/*target page*/

/* targets output tables */

#targets {
  width: 50%;
  position: absolute;
  top: 800px;
  left: 25px;
  font-family: sans-serif;
  font-size: 20px;
  border-collapse: collapse;
  color: black;
}

#targets td,
#targets th {
  border: 1px solid black;
  padding: 8px;
  background: #7999ed;
}

#targets th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #006886;
  color: black;
}

/* targets output tables */

/* treatments output tables */

#treatments {
  width: 80%;
  position: absolute;
  top: 1000px;
  left: 25px;
  font-family: sans-serif;
  border-collapse: collapse;
  color: black;
}

#treatments td,
#treatments th {
  border: 1px solid black;
  padding: 8px;
  background: #7999ed;
}

#treatments th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #006886;
  color: black;
}

/* treatments output tables */

/* diseases output tables */

#dis {
  width: 50%;
  position: absolute;
  top: 800px;
  left: 25px;
  font-family: sans-serif;
  border-collapse: collapse;
  color: black;
}

#dis td,
#dis th {
  border: 1px solid black;
  padding: 8px;
  background: #7999ed;
}

#dis th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #006886;
  color: black;
}

/* diseases output tables */

#aboutdes {
  margin-left: auto;
  width: 650px;
  position: absolute;
  top: 500px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  color: black;
  font-size: 30px;
}

@media screen and (max-width: 600px) {
  #aboutdes {
    width: 75%;
    font-size: 25px;
  }
}

.forms {
  margin: 0;
}

.inputs {
  width: 300%;
  padding: 12px 20px;
  margin: 16px 0;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 4px;
  font-family: sans-serif;
  color: black;
  font-size: 25px;
}

.inputs[type='text']:focus {
  border: 3px solid #006886;
  outline: #006886;
}

#inputform {
  position: absolute;
  top: 75px;
  left: 75px;
}

::placeholder {
  color: black;
  opacity: 0.3;
}

/*selectdrugs page*/

#selectdrugsform {
  position: absolute;
  top: 75px;
  text-align: center;
}

#selectdrugsbox {
  position: relative;
  top: 65px;
  width: 160%;
  height: 50px;
  right: 20px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 4px;
  font-family: sans-serif;
  color: black;
  font-size: 25px;
}

#selectdrugsbox[type='text']:focus {
  border: 3px solid #006886;
  outline: #006886;
}

#selectdrugstargetbox {
  position: relative;
  top: 90px;
  width: 75%;
  height: 50px;
  right: -60px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 4px;
  font-family: sans-serif;
  color: black;
  font-size: 25px;
}

#selectdrugstargetbox[type='text']:focus {
  border: 3px solid #006886;
  outline: #006886;
}

#selectdrugsbutton {
  position: relative;
  top: 65px;
  left: 5px;
  font-size: 20px;
  width: 170px;
  border: 1px solid black;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: #006886;
  font-family: inherit;
  margin: 0 auto;
}

#selectdrugsdes {
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  top: 500px;
  height: 210px;
  text-align: center;
  color: black;
  font-size: 30px;
  margin: auto;
}

@media screen and (max-width: 1000px) {
  #selectdrugsdes {
    top: 480px;
    font-size: 25px;
  }
}

@media screen and (max-width: 600px) {
  #selectdrugsdes {
    font-size: 20px;
  }
  #selectdrugsbox {
    width: 110%;
    right: 0px;
    font-size: 20px;
  }
  #selectdrugstargetbox {
    right: 20px;
    font-size: 20px;
  }
  #selectdrugsbutton {
    left: -77px;
    top: 72px;
  }
}

#selectdrugsformdes {
  margin-left: auto;
  width: 580px;
  position: absolute;
  top: 550px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  color: black;
  font-size: 30px;
}

@media screen and (max-width: 600px) {
  #selectdrugsformdes {
    width: 400px;
    font-size: 25px;
  }
}

#selectdrugslabel {
  position: relative;
  color: black;
  font-size: 30px;
  top: -80px;
  left: 250px;
}

#selectdrugstargetlabel {
  position: relative;
  color: black;
  font-size: 30px;
  top: -55px;
  left: 190px;
}

@media screen and (max-width: 600px) {
  #selectdrugslabel {
    left: 155px;
    top: -75px;
  }
  #selectdrugstargetlabel {
    left: 105px;
    top: -50px;
  }
}

/*selectdrugs page*/

/*inputsmiles page*/

#inputsmilesform {
  position: absolute;
  top: 75px;
  text-align: center;
}

#inputsmilesbox {
  position: relative;
  top: 65px;
  width: 200%;
  height: 50px;
  right: 120px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 4px;
  font-family: sans-serif;
  color: black;
  font-size: 25px;
}

#inputsmilesbox[type='text']:focus {
  border: 3px solid #006886;
  outline: #006886;
}

#inputsmilestargetbox {
  position: relative;
  top: 50px;
  width: 75%;
  height: 50px;
  right: -80px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 4px;
  font-family: sans-serif;
  color: black;
  font-size: 25px;
}

#inputsmilestargetbox[type='text']:focus {
  border: 3px solid #006886;
  outline: #006886;
}

#inputsmilesbutton {
  position: relative;
  top: 25px;
  left: -20px;
  font-size: 20px;
  width: 170px;
  border: 1px solid black;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: #006886;
  font-family: inherit;
  margin: 0 auto;
}

#inputsmilesdes {
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  top: 500px;
  height: 210px;
  text-align: center;
  color: black;
  font-size: 30px;
  margin: auto;
}

@media screen and (max-width: 1000px) {
  #inputsmilesdes {
    top: 450px;
    font-size: 25px;
  }
}

@media screen and (max-width: 600px) {
  #inputsmilesdes {
    font-size: 20px;
  }
  #inputsmilesbox {
    width: 110%;
    right: 10px;
    font-size: 20px;
  }
  #inputsmilestargetbox {
    right: -10px;
    font-size: 20px;
  }
  #inputsmilesbutton {
    left: -85px;
    top: 30px;
  }
}

#inputsmilesformdes {
  margin-left: auto;
  width: 580px;
  position: absolute;
  top: 550px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  color: black;
  font-size: 30px;
}

@media screen and (max-width: 600px) {
  #inputsmilesformdes {
    width: 400px;
    font-size: 25px;
  }
}

#inputsmileslabel {
  position: relative;
  color: black;
  font-size: 30px;
  top: -80px;
  left: 80px;
}

#inputsmilestargetlabel {
  position: relative;
  color: black;
  font-size: 30px;
  top: -95px;
  left: 165px;
}

@media screen and (max-width: 600px) {
  #inputsmileslabel {
    left: 10px;
  }
  #inputsmilestargetlabel {
    left: 100px;
  }
}

/*inputsmiles page*/

/*chaperones page*/

#chaperones_description {
  margin-top:5%;
  margin-bottom:0.5%;
  padding-left: 5%;
  padding-right: 5%;
  position: relative;
  height: auto;
  text-align: center;
  color: black;
  font-size: 2rem; /* Grande quanto description in homepage */
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}



#chaperonesdes {
  margin-left: auto;
  margin-right: auto;
  margin-bottom:10%;
  width: 80%;
  text-align: center;
  color: black;
  font-size: 2rem;
}

#chaperonesform {
  position: relative;
  top: 20px;
  text-align: center;
}

#chaperonesbox {
  width: 100%;
  max-width: 800px;
  height: auto;
  padding: 14px;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 4px;
  font-family: sans-serif;
  color: black;
  font-size: 1.6rem;
  margin-left: 0 auto;
  margin-top: 0 auto;
  margin-right: 0 auto;
  margin-bottom: 0.5%;
}

/* Aumenta la dimensione del placeholder */
#chaperonesbox::placeholder {
  font-size: 1.6rem;
}

#chaperonesbox[type='text']:focus {
  border: 3px solid #006886;
  outline: none;
}

#chaperonesbutton {
  font-size: 1.6rem;
  width: 200px; /* Imposta una larghezza fissa */
  border: 1px solid black;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #006886;
  font-family: inherit;
  margin: 10px auto;
  display: block;
}

#chaperonesbutton:hover {
  background-color: #227282;
}

/* Media Queries */

/* Laptop e tablet orizzontali */
@media screen and (max-width: 1200px) {
  #chaperones_description {
    font-size: 1.5rem;
  }

  #chaperonesbox::placeholder {
  font-size: 1.5rem;
}

  #chaperonesdes {
    font-size: 1.5rem;
    margin-bottom:20%;
  }

  #chaperonesbox {
    font-size: 1.5rem; /* Dimensione del font della textbox */
    padding: 12px; /* Riduce il padding */
  }

  #chaperonesbutton {
    width: 180px; /* Ridotto per adattarsi meglio */
    font-size: 1.5rem;
  }
}

/* Tablet verticali e telefoni grandi */
@media screen and (max-width: 768px) {
  #chaperones_description {
    font-size: 1.25rem;
  }

  #chaperonesbox::placeholder {
  font-size: 1.25rem;
}


  #chaperonesdes {
    font-size: 1.25rem;
    margin-bottom:60%;
  }

  #chaperonesbox {
    font-size: 1.25rem;
    padding: 10px; /* Ridotto per migliorare l'adattamento */
  }

  #chaperonesbutton {
    width: 160px; /* Ulteriore riduzione */
    font-size: 1.25rem;
  }
}

/* Smartphone */
@media screen and (max-width: 480px) {
  #chaperones_description {
    font-size: 1rem;
  }

  #chaperonesbox::placeholder {
  font-size: 1rem;
}


  #chaperonesdes {
    font-size: 1rem;
  }

  #chaperonesbox {
    font-size: 1rem;
    padding: 8px; /* Ulteriore riduzione del padding */
  }

  #chaperonesbutton {
    width: 140px; /* Ridotto per gli schermi più piccoli */
    font-size: 1rem;
  }
}

/*chaperones page*/

#predictionbutton {
  position: absolute;
  font-size: 20px;
  left: 430px;
  top: 90px;
  width: 170px;
  border: 1px solid black;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: #006886;
  font-family: inherit;
  margin: 0;
}

.navbar a.icon {
  float: right;
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child),
  .subnav .subnavbtn {
    display: none;
  }
  .navbar a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .navbar.responsive {
    position: relative;
  }
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .navbar.responsive .subnav {
    float: none;
  }
  .navbar.responsive .subnav-content {
    position: relative;
  }
  .navbar.responsive .subnav .subnavbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

div.pager {
  text-align: left;
}

div.pager span {
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8;
  text-align: center;
  cursor: pointer;
  background: #191919;
  color: #ccc;
  margin-right: 0.5em;
}

div.pager span.active {
  background: #fff;
  color: #191919;
  font-weight: bold;
  text-align: center;
}

#hidden-smiles,
#hidden-smiles-value {
}

/*Accessibilità*/

/* Focus visibile su tutti gli elementi interattivi */
a:focus, button:focus, submitbuttons:focus {
  outline: 1px solid black;  /* Aggiunge un bordo blu */
  background-color: #4B9C9C;   /* Cambia lo sfondo per renderlo visibile */
}

#chaperonesbutton:focus, #diseasesbutton:focus, #targetsbutton:focus, #treatmentsbutton:focus, #dt-length-0:focus, #download_disease:focus {outline: 1px solid black;  /* Aggiunge un bordo blu */
  background-color: #4B9C9C;   /* Cambia lo sfondo per renderlo visibile */}

input:focus , #dt-search-0:focus{
background-color:#D5F3F3;
}

/* Focus per i bottoni di navigazione */
.subnavbtn:focus, .subnav-content a:focus{
  outline: none; /* Rimuove il contorno di default del focus */
  background-color: #4B9C9C; /* Colore di sfondo chiaro per il focus */
  color: white; /* Colore del testo per una buona visibilità */

}


/*Accessibilità*/

/*Datatables*/


/* Stili di base (Mobile-First) */
/* Contenitore principale di DataTables */
.dataTables_wrapper {
  margin: 1rem; /* Margine generale per non attaccare ai bordi dello schermo */
  display: flex;
  flex-direction: column; /* Impila gli elementi verticalmente di default */
}

/* Sezione superiore dei controlli (lunghezza e ricerca) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  display: flex;
  flex-direction: column; /* Impila etichetta e input */
  align-items: flex-start; /* Allinea a sinistra gli elementi interni */
  margin-bottom: 1rem; /* Spazio tra i blocchi */
}

/* Stili comuni per input e select */
#dt-length-0,
#dt-search-0 {
  color: black;
  text-align:center;
  font-family: sans-serif;
  font-size: 1rem; /* Dimensione base per mobile */
  padding: 0.5rem 0.8rem;
  border: 1px solid white;
  background: white;
  margin-top: 0.5rem; /* Spazio tra etichetta e input */
  width: 90%; /* Occupa la maggior parte della larghezza disponibile */
  max-width: 300px; /* Limite per schermi più grandi */
}

#dt-search-0 {
   display:none;
}



#dt-length-0 {
  background: #006886;
  color: white;
  border: 1px solid white;
}

#dt-search-0:focus {
  border: 2px solid #006886;
  outline: none;
}

/* Etichette per input/select */
label[for="dt-length-0"],
label[for="dt-search-0"] {
  font-family: sans-serif;
  color: black; /* Colore scuro per leggibilità su sfondi chiari */
  font-size: 1rem;
  display: block; /* Ocupa la sua riga */
}

/* Nascondi etichetta ricerca di default come nel tuo codice */
label[for="dt-search-0"] {
  display: none;
}


/* Stili della tabella */
#target_variants {
  width: 100%; /* Larghezza completa del suo contenitore */
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-family: sans-serif;
  font-size: 1rem; /* Dimensione base */
  border-collapse: collapse;
  color: white;
  text-align: center;
}

#target_variants td,
#target_variants th{
  border: 1px solid white;
  padding: 0.8rem;
  background: #227282;
  text-align: center;
  font-size: 2rem;
}

#table_title{
  font-size: 2.5rem;
}


/* Downscaling: Screens with max-width 1440px (laptop) */
@media screen and (max-width: 1440px) {
#target_variants td,
#target_variants th,
#download_button{
  font-size: 2rem;
  

}

#table_title{
  font-size: 2.5rem;
}
}

/* Downscaling: Tablet Screens (max-width 768px) */
@media screen and (max-width: 768px) {

#table_title{
  font-size: 2rem;
}

#target_variants td,
#target_variants th,
#download_button{
  font-size: 1.5rem;
}

}

/* Downscaling: Mobile Screens (max-width 600px) */
@media screen and (max-width: 600px) {
#target_variants td,
#target_variants th,
#download_button{
  font-size: 1.25rem;
}

#table_title{
  font-size: 1.5rem;
}

}

/* Downscaling: Mobile Screens (max-width 480px) */
@media screen and (max-width: 480px) {
#target_variants td,
#target_variants th,
#download_button{
  font-size: 1rem;
}
#table_title{
  font-size: 1.25rem;
}

}




#target_variants th {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #006886;
  color: white;
}

/* Stili info e paginazione (sezione inferiore dei controlli) */
.dataTables_wrapper .dataTables_info {
  font-family: sans-serif;
  color: black;
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  order: 2; /* Definisce l'ordine in Flexbox per il mobile */
  width: 100%; /* Occupare la larghezza per stare sotto gli altri */
}

.dataTables_wrapper .dataTables_paginate {
  display: flex;
  flex-wrap: wrap; /* Permette ai pulsanti di andare a capo */
  justify-content: center; /* Centra i pulsanti di paginazione */
  margin-top: 1rem;
  margin-bottom: 1rem;
  order: 1; /* Definisce l'ordine in Flexbox per il mobile (sopra le info) */
  width: 100%;
}

.dt-paging-button {
  background: #006886 !important;
  border: 1px solid white !important;
  font-size: 2rem;
  padding: 0.6rem 1rem;
  margin: 0.3rem; /* Margine ridotto per schermi piccoli */
}

.dt-paging-button:hover {
  background: #227282 !important;
}

/* Pulsante di Download */
#download_button {
  width: 80%; /* Larghezza dinamica */
  max-width: 300px; /* Limite massimo */
  font-size: 2rem;
  border: 1px solid black;
  outline: none;
  color: white;
  padding: 1rem 1.2rem;
  background-color: #006886;
  font-family: inherit;
  margin: 2rem auto; /* Centrato orizzontalmente, spazio sopra/sotto */
  display: block; /* Per far funzionare margin: auto */
}

#download_button:hover {
  background: #227282;
}

#download_button:focus {
  outline: 1px solid black;
  background-color: #4B9C9C;
}

/* --- Media Queries (Desktop-First per i breakpoint) --- */

@media screen and (min-width: 600px) {
  /* Tablet orizzontali e piccoli laptop */

  /* Riorganizza i controlli superiori e inferiori in Flexbox */
  .dataTables_wrapper .dataTables_top,
  .dataTables_wrapper .dataTables_bottom {
    display: flex;
    justify-content: space-between; /* Spazia gli elementi */
    align-items: center; /* Allinea verticalmente */
    flex-wrap: wrap; /* Permette agli elementi di andare a capo se necessario */
    margin-bottom: 1.5rem;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    flex-direction: row; /* Metti etichetta e input sulla stessa riga */
    align-items: center;
    margin-bottom: 0; /* Rimuovi il margine inferiore quando sono in riga */
  }

  label[for="dt-length-0"],
  label[for="dt-search-0"] {
    margin-right: 0.5rem; /* Spazio tra label e input */
    display: inline-block; /* Per stare accanto all'input */
    font-size: 1.1rem;
  }

  #dt-length-0,
  #dt-search-0 {
    font-size: 1.1rem;
    width: auto; /* Lascia che la larghezza si adatti */
    margin-top: 0; /* Nessun margine superiore */
  }

  label[for="dt-search-0"] {
    display: inline-block; /* Rendi visibile l'etichetta per la ricerca */
    color: black;
  }

  .dataTables_wrapper .dataTables_info {
    order: 0; /* Ripristina l'ordine normale */
    text-align: left; /* Allinea a sinistra */
    width: auto; /* Larghezza automatica */
  }

  .dataTables_wrapper .dataTables_paginate {
    order: 0; /* Ripristina l'ordine normale */
    justify-content: flex-end; /* Allinea i pulsanti a destra */
    width: auto;
  }

  #target_variants {
    font-size: 1.1rem;
    width: 95%; /* Leggermente meno larga */
    margin: 1.5rem auto;
  }

  #target_variants td,
  #target_variants th {
    padding: 1rem;
  }


  #download_button {
    width: 250px; /* Larghezza leggermente fissa */
    font-size: 1.1rem;
  }
}

@media screen and (min-width: 1024px) {
  /* Laptop e desktop */

  .dataTables_wrapper {
    width: 90%; /* Limita la larghezza massima del wrapper */
    max-width: 1200px;
    margin: 2rem auto; /* Centra il wrapper */
  }

  #target_variants {
    font-size: 1.2rem;
    width: 100%; /* La tabella riempie il suo contenitore Flex */
  }

  #target_variants td,
  #target_variants th {
    padding: 1.1rem;
  }


  #dt-length-0,
  #dt-search-0,
  label[for="dt-length-0"],
  label[for="dt-search-0"],
  #target_variants_info {
    font-size: 1.2rem;
  }

  #download_button {
    width: 200px; /* Larghezza più piccola su desktop */
    font-size: 1.05rem;
  }
}

@media screen and (min-width: 1400px) {
  /* Schermi grandi */
  #target_variants,
  #dt-length-0,
  #dt-search-0,
  label[for="dt-length-0"],
  label[for="dt-search-0"],
  #target_variants_info,
  #download_button {
    font-size: 2rem; /* Un leggero aumento per la leggibilità */
  }
  #target_variants td, #target_variants th {
    padding: 1.2rem;
  }
  .dt-paging-button {
    padding: 0.7rem 1.1rem;
  }
}

#dt-search-0 {
  border: 2px solid black;
}

#dt-search-0:focus {
  border: 2px solid #006886; /* Un colore diverso quando è selezionato */
  outline: none; /* Rimuove il bordo predefinito del browser al focus */
}

@media screen and (max-width: 1400px) {
  .dt-paging-button {
  font-size: 2rem;
}
  #download_button {
    font-size: 2rem; /* Un leggero aumento per la leggibilità */
  }}

@media screen and (max-width: 768px) {
  .dt-paging-button {
  font-size: 1.5rem;
}
  #download_button {
    font-size: 1.5rem; /* Un leggero aumento per la leggibilità */
  }}

@media screen and (max-width: 600px) {

  .dt-paging-button {
  font-size: 1.25rem;
}
  #download_button {
    font-size: 1.25rem; /* Un leggero aumento per la leggibilità */
  }}

@media screen and (max-width: 480px) {

  .dt-paging-button {
  font-size: 1rem;
}
  #download_button {
    font-size: 1rem; /* Un leggero aumento per la leggibilità */
  }
}
  

.column-filter {
    width: 90%; /* Occupa il 90% della larghezza della cella contenitore */
    padding: 1rem 0rem;
    font-size:2rem;
    text-align:center;
}

.column-filter:focus {
    outline: 2px solid black; 
    border-color: black;    
    box-shadow: none;         
}

@media screen and (max-width: 1400px) {
.column-filter {
    font-size:2rem;
}
}

@media screen and (max-width: 768px) {
.column-filter {
    font-size:1.5rem;
}
}

@media screen and (max-width: 600px) {

.column-filter {
    font-size:1.25rem;
}
}

@media screen and (max-width: 480px) {
.column-filter {
    font-size:1rem;
}

}

/*Datatables*/