@font-face {
 font-family: Formular;
 src:  url("../fonts/formular-medium-trial.otf" ) format( "truetype" );
 font-style: normal;
}  

@font-face {
 font-family: OpenSans-Light;
 src:  url("../fonts/OpenSans-Light.ttf" ) format( "truetype" );
 font-weight: 300;
 font-style: normal;
}  


@font-face {
 font-family: OpenSans-Regular;
 src:  url("../fonts/OpenSans-Regular.ttf" ) format( "truetype" );
 font-weight: 300;
 font-style: normal;
}  


@font-face {
 font-family: OpenSans-Bold;
 src:  url("../fonts/OpenSans-Bold.ttf" ) format( "truetype" );
 font-weight: 700;
 font-style: normal;
} 

@font-face {
 font-family: Segoe;
 src:  url("../fonts/Segoe_UI.ttf" ) format( "truetype" );
 font-weight: 300;
 font-style: normal;
}  

@font-face {
 font-family: Sailec-Medium;
 src:  url("../fonts/Sailec-Medium.ttf" ) format( "truetype" );
 font-weight: 400;
 font-style: normal;
}  


/* Stili per scritta principale ------------------------------------------------------------------------------------------------*/ 

body {
 background-color: white; 
}

mark {
 background-color: #f2f20e; /*#fdfd20;*/ /* #f2ef2f;*/ /* #f2ef23; */ /* #fffc02; */
 border-radius: 2px 2px;
 padding: 0px 3px;
}

.grayed-out {
  color: gray;
}

.intest {
 text-align: center; 
 margin-top: 90px;
}
	
.a1 {
 font-family: Formular;
 font-size: 40px;
 font-weight: 500;
 letter-spacing: -1.5px;
 line-height: 54px;
}

* Nascondi inizialmente entrambi i paragrafi */
.desktop-text, .mobile-text {
  display: none;
}

/* Mostra il testo desktop su schermi grandi e nascondi quello mobile */
@media screen and (min-width: 1024px) {
  .desktop-text {
    display: block;
	letter-spacing: -1.75px;
  }
  .mobile-text {
    display: none;
  }
}

/* Mostra il testo mobile su schermi piccoli e nascondi quello desktop */
@media screen and (max-width: 1023px) {
  .mobile-text {
    display: block;
  }
  .desktop-text {
    display: none;
  }
}

@media screen and (min-width: 1536px) {
   .a1 {
      line-height: 52px;
   }
}


/* Stili per lo spinner di caricamento ------------------------------------------------------------------------- */

.loading-spinner {
  display: block;
  margin: 20px auto; /* Centra la rotellina */
  width: 40px;       /* Larghezza della rotellina */
  height: 40px;      /* Altezza della rotellina */
  border: 4px solid #d3d3d3; /* Bordo esterno */
  border-top: 4px solid #007BFF; /* Bordo superiore colorato (blu) */
  border-radius: 50%; /* Forma circolare */
  animation: spin 1s linear infinite; /* Animazione di rotazione */
}

@keyframes spin {
  from {
    transform: rotate(0deg); /* Rotazione iniziale */
  }
  to {
    transform: rotate(360deg); /* Rotazione completa */
  }
}

/* ---------------------------------------------------------------------------------------------------------------- */
	
.button-container {
  display: flex; 
  flex-direction: column; 
  align-items: center;
}

/* Stili icona cestino */	
.trash-button {
  flex: 0; /* dimensione del pulsante rimane fissa */
  font-size: 16px;
  background-color: transparent;
  border: 1px solid #ccc;
  padding: 8px 12px;
  cursor: pointer;
  margin-top: 20px;
}

.button-container button:nth-child(2) {
  margin-top: 36vh;
}



#expandButton {
 display: none;
}

/* Stili per creare rendere il div editabile come una textarea */
#textArea {
  width: 100%;
  box-sizing: border-box; 
}


/* Stile per il layout principale */
div {
  box-sizing: border-box;
}


/* STILI ELEMENTI SOTTO LA TEXTAREA -------------------------------------------------------------------------------------------------------------------------- */
	
/* Stili rettangolo sotto textarea che contiene: num. parole + pulsante scansiona */
.textArea_bottom {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  border: 1px solid #ccc; /* border: solid 1px #c6cdd5; */
  border-radius: 5px 5px;
  padding: 10px;
}


/* Stili per conta-parole sotto la textarea */
.stili_wordCount {
  font-family: Segoe;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.6px;
  color: black;
}


/* Stili pulsante scansione testo -------------------------------------------------------------------------------------- */ 

.scansiona_button {
  padding: 8px 12px;
  background-color: #0056b3; 
  color: #fff;
  border: none;
  border-radius: 5px 5px; 
  cursor: pointer;
  outline: none;
  align-items: center;
  font-family: Formular;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.scansiona_button:hover {
    background-color: #0056b3; 
	opacity: 88%;
}	


/* STILI ANELLO PERCENTUALE --------------------------------------------------------------------------------------------------- */

/* Dimensioni anello */
.progress-ring {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px;
}
	

/* Stili anello vuoto */
.progress-ring__circle {
  fill: none;
  stroke: #d3d3d3; /* colore grigio */
  stroke-width: 10;
}


/* Stili anello in progressione */
.progress-ring__circle--progress {
  fill: none;
  stroke: red; /* colore anello progressivo */
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.5s ease-out;
}


/* Scritta della percentuale dentro l'anello */
.progress-ring__text {
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  font-family: Montserrat;
  font-size: 24px;
  font-weight: bold;
  color: red; 
}

/* ----------------------------------------------------------------------------------------------------------------------------------- */

/* Stili scritta scansione: AI / Human (sotto l'anello) */
.ris_ring {
  width: 90%
  text-align: center; 
  font-family: OpenSans-Bold; 
  font-size: 18px; 
  line-height: 19px;
  letter-spacing: -0.9px;
  margin-top: 10px; 
}

.ris_ring_neutral {
  width: 90%
  text-align: center; 
  font-family: OpenSans-Regular; 
  font-size: 17px; 
  line-height: 22px;
  letter-spacing: -0.55px;
  margin-top: 10px; 
  color: #b7afaf;
}


/* Per nascondere il pulsante humanize */		
.hidden {
  display: none;
}


/* Stili involucro principale */		
.container_top {
  width: 90%;
  margin: 0 auto;
  margin-top: 25px;
  border: solid 1px #c1bcbc;
  border-radius: 5px 5px;
  padding: 15px; 
}

/* Stili involucro secondario che contiene i 3 blocchi */		
.container {
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start;
  gap: 10px;  
}


/* larghezza del div editabile (textarea) */
.cont_textArea {
  width: 85%;
}
	

/* Stili dedicati esclusivamente alla textarea (div editabile) ----------------------------------------------------------------------- */

.rett_form {
  font-family: "Segoe", sans-serif;
  font-size: 15px;
  line-height: 23px;
  /* letter-spacing: 0.2px;  */ 
  letter-spacing: 0.04px; 
  overflow-y: auto; 
  overflow-x: auto; 
  width: 100%; 
  height: 44vh;
  margin: 0 auto; 
  margin-top: 0px; 
  border: 1px solid #ccc; 
  border-radius: 5px 5px;
  box-shadow: 0 10px 20px rgba(1,1,1,0.1);  
  background-color: white;
  padding: 10px;
  scrollbar-width: thin; /* per Firefox */
  outline: none; 
  border-bottom: solid 0px;
  padding-right: 20px;
}

/* Personalizzazione per browser basati su WebKit */
.rett_form::-webkit-scrollbar {
  width: 16px; /* Larghezza dello scrollbar */
}

.rett_form::-webkit-scrollbar-track {
  background: #f1f1f1; /* Colore di sfondo del track */
  border-radius: 10px; /* Bordo arrotondato */
}

.rett_form::-webkit-scrollbar-thumb {
  background: #c6cdd5; /* Colore della thumb */
  border-radius: 10px; /* Bordo arrotondato */
  border: 4px solid transparent; /* Spaziatura interna */
  background-clip: padding-box; /* Clip del colore */
}

.rett_form::-webkit-scrollbar-thumb:hover {
  background: #a3abb5; /* Colore thumb al passaggio del mouse */
}

.rett_form::-webkit-scrollbar-button {
  width: 16px;
  height: 16px;
  background: #c6cdd5; /* Colore dei bottoni */
  border-radius: 0%;
}

.rett_form::-webkit-scrollbar-button:increment {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M4 6h8l-4 4z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

.rett_form::-webkit-scrollbar-button:decrement {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M4 10h8l-4-4z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

/* Per Firefox */
.rett_form {
  scrollbar-color: #c6cdd5 #f1f1f1; /* Colore thumb e track */
  scrollbar-width: auto; /* Puoi usare "thin" o "auto" */
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------- */


/* Stili per il placeholder textarea*/
.text_placeholder {
  font-family: 'OpenSans-Light', sans-serif;
  font-size: 17px;
  color: #b3b3b3;
  font-weight: 100px;
  pointer-events: none;
}

/* Stili contenitore di tutto il 3° blocco */
.cont_perc {
  border: solid 1px #c6cdd5; 
  border-radius: 10px 10px 5px 5px;
  box-shadow: 0 10px 20px rgba(1,1,1,0.1);  
  width: 30%; 
  padding-bottom: 20px;
}

/* Stili messaggio errore */

.msg_err {
  font-family: OpenSans-Bold, sans-serif;
  font-size: 15px;
  color: #d94040;
  letter-spacing: -0.46px;
}

.msg_err2 {
  font-family: OpenSans-Bold, sans-serif;
  font-size: 17px;
  color: #d94040;
  letter-spacing: -0.46px;
  margin-top: 10px;
  line-height: 22px; 
  border: solid 1px #d7d0d0; 
  display: inline-block; 
  border-radius: 10px 10px; 
  padding: 5px 10px;
}


.msg_err2 a {
  color: #d94040;
  text-decoration: underline;
  font-weight: bold;
}

.msg_err2 a:hover {
  text-decoration: none;
}



/* REGOLE LAPTOP --------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 1525px) {
   
   .container_top {
     width: 75%;
	 margin-top: 20px;
   }
   
   .cont_perc {
     width: 31%;
   }
   
   .intest {
     margin-top: 80px;
   }
   
   mark {
     background-color: #ffff7a;
   }

}

/* REGOLE 1920 --------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 1920px) {
    .container_top {
       width: 65%;
     }
	
	.intest {
	  margin-top: 90px;
	}
}


/* REGOLE MOBILE ----------------------------------------------------------------------------------------------------------------- */

@media (max-width: 768px) {
  
   .container_top {
     width: 97%;
	 margin-top: 20px;
  }
  
  .container {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center; 
    gap: 10px; 
    width: 100%; 
    box-sizing: border-box; 
  }

 

  .cont_textArea {
    width: 100%;
  }
  
  .button-container {
    display: flex;
    flex-direction: row; 
    gap: 20px; 
  }

  
  .trash-button {
    
	color: black;
  }
  
  .button-container button:nth-child(1) {
    margin-top: 5px;
  }
  
  .button-container button:nth-child(2) {
    margin-top: 5px;
  }

  
  .cont_perc {
    width: 80%;
  }
  
  .num_parole {
   display: none;
  }

  .a1 {
    font-size: 33px;
	line-height: 33px;
  }
}