/*BOotstrap button: https://getbootstrap.com/docs/4.0/components/buttons/   */


body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .topnav {
    overflow: hidden;
    background-color: #333;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: #04AA6D;
    color: white;
  }
  
  .topnav .icon {
    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) {
    .topnav a:not(:first-child) {display: none;}
    .topnav 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) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
}



.collapsible_createteam {
  color: white;
  cursor: pointer;
  border: none;
  text-align: left;
  outline: none;
}

.active_createteam, .collapsible_createteam:hover {
  max-height: fit-content;
}

.content_createteam {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}



/* CARD */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #ffffff;
}

.left-card-part {
  padding-top: 15px;
}

.button-no-border{
  border:transparent !important;
  background: transparent !important;
  width: 36px !important;
  height: auto !important;
}

.button-no-border-big{
  border:transparent !important;
  background: transparent !important;
  width: 50px !important;
  height: auto !important;
}



/*Pagination*/
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}


/*Text area*/
.text_area_dimension{
  max-width: 1000px;
  text-align: center;
}

.text_area_dimension_big{
  width: 885px;
  height: 10%;
}

/*Survey creation*/
.question_title{
  font-weight: bold;
}





/*Background*/
.login_background{
  background-color: #6858AD; 
}

/*Button*/
.pfs-button-color{
  color: #fff;
  background-color: #6858AD;
  border-color: #6858AD;
}

/*Button fixed size */
.button-fixed-size{
  width: 250px;
}



/*TExt colors*/
.text_color_contrast{
  color: white !important;
}



@media (min-width: 991px) {
  .pfs-navbar-hide-large {
      display: none !important;
  }

  .pfs-content-no-margin-top {
      margin-top: 64px !important;
  }
}



/*Homepage*/
.homepage-header {
  max-width: 896px;
}

.graph-area-width{
  max-width: 896px;
  display: inline;
}

ul.pfs-tabs li a {
  text-transform: uppercase;
  color: #333333 !important;
  font-size: 12px;	
  font-weight: 500;	
  letter-spacing: 0.8px;	
  line-height: 16px;
  border-radius: 0 !important;
  padding: 10px 15px;
  outline: none;
  background-color: transparent;
}

ul.pfs-tabs li a.active {
  background-color: transparent !important;
  border-bottom: 2px solid #2288FF !important;
}

/*Project creation */
.project-create-header{
  max-width: 1400px;
}

/*Insert score button*/
.button-insert-score {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 5px 20px;
  margin: 1px;
  border: 1px solid #000000;
  border-radius: 5px;
  background: #6858AD;
  font: normal normal normal 15px arial;
  color: #ffffff !important;
  text-decoration: none;
  cursor:pointer;
}
.button-insert-score:hover,
.button-insert-score:focus {
  background: #7260c4;
  background: -webkit-gradient(linear, left top, left bottom, from(#7260c4), to(#7662cd));
  background: -moz-linear-gradient(top, #7260c4, #7662cd);
  background: linear-gradient(to bottom, #7260c4, #7662cd);
  color: #ffffff;
  text-decoration: none;
}
.button-insert-score:active {
  background: #393062;
  background: -webkit-gradient(linear, left top, left bottom, from(#393062), to(#6252ab));
  background: -moz-linear-gradient(top, #393062, #6252ab);
  background: linear-gradient(to bottom, #393062, #6252ab);
}

.button-border-svg{
  outline: 1px solid black;
  outline-offset: 2px;
}

.projectTips{
  font-style: italic;
  color:#c7c7c7
}


/*------------------------------------------Base generic------------------------------------------*/
.sidebar-text{
  font-size:16px;
  font-weight: bold;
}



/*------------------------------------------Project edit page------------------------------------------*/

.surveyresult_header{
  max-width: 3000px;
}

.big_graph{
  max-height: 5500px !important;
}

.small_graph{
  max-height: 400px;
}

.strict_graph{
  max-width: 500px;
}

.single-graph-area{
  max-width: 53% !important;
  margin-left: 105px;
}

.single-gauge-graph-area{
  max-width: 45% !important;
  margin-left: 165px;
}

.legend-list-ul{
	display: inline-flex; 
	flex-direction: row; 
	margin: 0px; 
	padding: 0px;
}

.legend-list-li{
	align-items: center; 
	cursor: pointer; 
	display: flex; 
	flex-direction: row; 
	margin-left: 10px;
}

.legend-list-span{
	border-width: 3px; 
	display: inline-block; 
	height: 20px; 
	margin-right: 10px; 
	width: 40px;
}

.legend-list-p{
	font-size: 20px;
	/*font-weight: bold;*/
	color: black !important; 
	margin: 0px; 
	padding: 0px;
}

.donut-inner {
  margin-top: -244px;
  margin-bottom: 100px;
}
.donut-inner h4 {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 40px;
  font-weight: bold;
  -webkit-text-stroke: 1px black;
}


/*------------- TABLE NOTES ------------*/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex; /* Centra il contenuto */
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra orizzontalmente */
  z-index: 1050; /* Assicura che l'overlay sia sopra altri contenuti */
  
}

.notes_text {
  background: #fff; /* Sfondo bianco per contrasto con overlay */
  padding: 20px; /* Spazio interno */
  border-radius: 8px; /* Angoli arrotondati */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombra per profondità */
  min-width: 300px; /* Larghezza minima */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1051; /* Assicura che la notes_text sia visibile sopra l'overlay */
}

.inputText {
  width: 100%; /* Utilizza tutta la larghezza disponibile */
  margin-bottom: 20px; /* Spazio tra textarea e bottone */
  border: 1px solid #ccc; /* Bordo sottile per definizione */
  border-radius: 4px; /* Angoli arrotondati */
  padding: 10px; /* Padding interno per il testo */
}

.cancelButton {
  display: block;
  width: 100%;
  padding: 10px 0;
  background-color: rgb(214, 1, 1);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 5px;
}

.saveButton {
  display: block; 
  width: 100%;
  padding: 10px 0; 
  background-color: #6858AD; 
  color: white; 
  border: none; 
  border-radius: 4px; 
  cursor: pointer; 
  margin-bottom: 5px;
}

.cancelButton:hover {
  background-color: #8c0000; /* Colore al passaggio del mouse per feedback */
}

.saveButton:hover {
  background-color: #4a3f7b; /* Colore al passaggio del mouse per feedback */
}

.saveButton .tooltip {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}

.saveButton:hover .tooltip {
  visibility: visible;
}

.notes_button {
  color: gray; /* Colore del bottone prima del salvataggio */
}

.notes_button[data-text] {
  color: green; /* Cambia colore se c'è del testo salvato */
}




/*------------- TENDENCIES TABLE CHART------------*/
.tendencies_table{
  width: 100%;
}

.tendencies_tbody{
  display: inline-grid;
  margin: auto;
}

.tendencies_tr{
  display: inline;
}

/*--------------- FILTER FEATURES ------------------*/
.filterfilterSidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #fff; /* Cambia il colore di sfondo qui */
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.filterfilterSidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.filterfilterSidebar a:hover {
  color: #f1f1f1;
}

.filterfilterSidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}

.openbtn {
  font-size:20px;
}

#main {
    transition: margin-right .5s;
}


/*-------------------------- PROJECT TABLE DESIGN ----------------------*/
/*DEFAULT_TABLE_IT_V2*/
/*...*/

/*DEFAULT_TABLE_IT*/
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-zlqz{background-color:#c0c0c0;border-color:inherit;font-weight:bold;text-align:center;vertical-align:top}
.tg .tg-i5lt{background-color:#fe0000;border-color:inherit;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-1ksz{background-color:#fcff2f;border-color:inherit;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-ev0v{background-color:#dae8fc;border-color:inherit;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-ehbx{background-color:#9698ed;border-color:inherit;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-7btt{border-color:inherit;font-weight:bold;text-align:center;vertical-align:top}
.tg .tg-fymr{border-color:inherit;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-0pky{border-color:inherit;text-align:center;vertical-align:top}  /*EDIT: Set text-lign : center */
.tg .tg-6e8n{background-color:#c0c0c0;border-color:inherit;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-x6qq{background-color:#dae8fc;border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-agym{background-color:#fcff2f;border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-xkfo{background-color:#9698ed;border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-tw5s{background-color:#fe0000;border-color:inherit;text-align:left;vertical-align:top}

/*TENDENCIES CHART FORMATTING*/
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-di3a{background-color:#DAE8FC;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-3i4o{background-color:#9698ED;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-dw9v{background-color:#FCFF2F;text-align:left;vertical-align:top}
.tg .tg-nx4l{background-color:#FE0000;text-align:left;vertical-align:top}
.tg .tg-v09l{background-color:#DAE8FC;text-align:left;vertical-align:top}
.tg .tg-hnce{background-color:#FCFF2F;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-5087{background-color:#9698ED;text-align:left;vertical-align:top}
.tg .tg-7mho{background-color:#FE0000;font-weight:bold;text-align:left;vertical-align:top}

#tendencies-chart td {
  width:50px;
  text-align:center;
}

#table-container {
  width: 500px;
  margin: 0 auto;
}

#it_table {
  width: 100%;
}


/* ---------------------- Modale disclaimer per PFS-79 ---------------------- */
.custom-modal {
  display: none; /* Nasconde la modale di default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5); /* Sfondo semi-trasparente */
  z-index: 10000; /* Assicura che sia sopra altri elementi */
}

.custom-modal-content {
  background-color: #fff;
  margin: 15% auto; /* Centra verticalmente */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Larghezza della modale */
  color: #000; /* Colore del testo nero */
}

.custom-modal-footer {
  text-align: right;
}