/*==============================================================================
| base.css
|=============================================================================*/
* {
   /* overflow: hidden; No perchè non funziona l'autocomplete... */
}

html {
	overflow-y: scroll;	 /* Mostra   background-color: red; */
}

/*==============================================================================
| In Vue 3, anche se usi v-if, i tuoi elementi possono comparire per un istante (flash) 
| prima che Vue prenda il controllo del DOM e li nasconda, 
| specialmente se stai caricando Vue in modo classico via script (senza SSR o Vite). 
| Questo effetto si chiama spesso:
| "Flash of uncompiled content" (FOUC)
| Per evitarlo:
| <div id="app" v-cloak>
|=============================================================================*/
[v-cloak] {
  display: none;
}

/*==============================================================================
| Comuni
|=============================================================================*/
.div_hidden                { width: 0px !important; height: 0px !important; }
.height_100pc              { height: 100% !important; }
.width_100pc               { width: 100% !important; }
.grassetto                 { font-weight: 600; }

.height1                   { height:  1px; }
.height2                   { height:  2px; }
.height3                   { height:  3px; }
.height4                   { height:  4px; }
.height5                   { height:  5px; }
.height6                   { height:  6px; }
.height7                   { height:  7px; }
.height8                   { height:  8px; }
.height9                   { height:  90x; }
.height10                  { height: 10px; }

/*==============================================================================
| Background
|=============================================================================*/
.background_bianco		   { background-color: #ffffff !important; }
.background_nero		      { background-color: #000000 !important; }
.background_verde		      { background-color: #449d44 !important; }
.background_rosso		      { background-color: #FF0000 !important; }
.background_giallo		   { background-color: #FFFF33 !important; }
.background_blu   		   { background-color: #000080 !important; }
.background_blu_timido     { background-color: #d6e6fa !important; }
.background_azzurro        { background-color: #00AAC7 !important; }
.background_arancione	   { background-color: #ff8000 !important; }
.background_grigio_chiaro  { background-color: #DCDCDC !important; }
.background_grigio_medio   { background-color: #C0C0C0 !important; }
.background_grigio_scuro   { background-color: #696969 !important; }

/*==============================================================================
| Linee (sostituiscono HR) Esempio: GcEchoHRClass('linea_bianca');                  
|=============================================================================*/
.linea_bianca { border: 0; width: 100%; height: 1px; border-top: 1px solid white;}
.linea_nera   { border: 0; width: 100%; height: 1px; border-top: 1px solid black;}
.linea_rossa  { border: 0; width: 100%; height: 1px; border-top: 1px solid red;}


/*==============================================================================
| Colore testo
|=============================================================================*/
.testo_bianco		         { color: #ffffff !important; }
.testo_nero			         { color: #000000 !important; }
.testo_verde		         { color: #449d44 !important; }
.testo_rosso		         { color: #FF0000 !important; }
.testo_giallo		         { color: #FFFF33 !important; }
.testo_blu   		         { color: #000080 !important; }
.testo_azzurro             { color: #00AAC7 !important; }
.testo_arancione	         { color: #ff8000 !important; }
.testo_grigio_chiaro       { color: #DCDCDC !important; }
.testo_grigio_medio        { color: #C0C0C0 !important; }
.testo_grigio_scuro        { color: #696969 !important; }

/*==============================================================================
| Font-Size
|=============================================================================*/
.font_size_0_1em           { font-size: 0.1em !important; }
.font_size_0_2em           { font-size: 0.2em !important; }
.font_size_0_3em           { font-size: 0.3em !important; }
.font_size_0_4em           { font-size: 0.4em !important; }
.font_size_0_5em           { font-size: 0.5em !important; }
.font_size_0_6em           { font-size: 0.6em !important; }
.font_size_0_7em           { font-size: 0.7em !important; }
.font_size_0_8em           { font-size: 0.8em !important; }
.font_size_0_9em           { font-size: 0.9em !important; }
.font_size_1em             { font-size: 1em !important; }
.font_size_1_1em           { font-size: 1.1em !important; }
.font_size_1_2em           { font-size: 1.2em !important; }
.font_size_1_3em           { font-size: 1.3em !important; }
.font_size_1_4em           { font-size: 1.4em !important; }
.font_size_1_5em           { font-size: 1.5em !important; }
.font_size_1_6em           { font-size: 1.6em !important; }
.font_size_1_7em           { font-size: 1.7em !important; }
.font_size_1_8em           { font-size: 1.8em !important; }
.font_size_1_9em           { font-size: 1.9em !important; }
.font_size_2em             { font-size: 2em !important; }

/*==============================================================================
| Padding
|=============================================================================*/
.pad0             { padding: 0px; }
.pad1             { padding: 1px; }
.pad2             { padding: 2px; }
.pad3             { padding: 3px; }
.pad4             { padding: 4px; }
.pad5             { padding: 5px; }
.pad10            { padding: 10px; }

.padt0            { padding-top: 0px; }
.padt1            { padding-top: 1px; }
.padt2            { padding-top: 2px; }
.padt3            { padding-top: 3px; }
.padt4            { padding-top: 4px; }
.padt5            { padding-top: 5px; }
.padt10           { padding-top: 10px; }
.padt100          { padding-top: 100px; }

.padlr20          { padding: 0 20px 0 20px; }

.padb0            { padding-bottom: 0px; }
.padb1            { padding-bottom: 1px; }
.padb2            { padding-bottom: 2px; }
.padb3            { padding-bottom: 3px; }
.padb4            { padding-bottom: 4px; }
.padb5            { padding-bottom: 5px; }
.padb10           { padding-bottom: 10px; }
.padb100          { padding-bottom: 100px; }

/*==============================================================================
| Margin
|=============================================================================*/
.mar0             { margin: 0px; }
.mar1             { margin: 1px; }
.mar2             { margin: 2px; }
.mar3             { margin: 3px; }
.mar4             { margin: 4px; }
.mar5             { margin: 5px; }
.mart2            { margin-top: 2px; }
.mart5            { margin-top: 5px; }
.marb0            { margin-bottom: 0px; }
.marb5            { margin-bottom: 5px; }
.marb10           { margin-bottom: 10px; }
.martb5           { margin-top: 5px; margin-bottom: 5px; }

/*==============================================================================
| Text/Typography
|=============================================================================*/
.monospace        { font-family: monospace; font-size: 15px; }

/*==============================================================================
| Per Compatibilita' con Windows10
|=============================================================================*/
@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

/*==============================================================================
| Liste
|=============================================================================*/
/* Lista con frecce */
/* Lista con frecce */
.list-arrow {
    list-style: none;    /* rimuove pallini standard */
    padding-left: 0;
    margin: 0;
}

.list-arrow li {
    position: relative;
    padding-left: 20px;  /* spazio per la freccia */
    margin: 4px 0;
}

/* Freccia davanti a ogni li */
.list-arrow li::before {
    content: "➤";
    color: #000000;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Divider senza freccia */
.list-arrow li.divider::before {
    content: none;
}

/* Divider centrato */
.list-arrow li.divider {
    position: relative;
    height: 20px;             /* altezza totale del li */
    margin: 8px 0;            /* spazio sopra e sotto */
    padding: 0;               /* rimuove padding */
}

.list-arrow li.divider::after {
    content: "";
    position: absolute;
    top: 50%;                 /* centro verticale */
    left: 0;
    width: 100%;
    height: 1px;              /* spessore linea */
    background: rgba(255, 255, 255, 0.6); /* colore linea semi-trasparente */
    transform: translateY(-50%);
}

/*==============================================================================
| BackDrop 
|=============================================================================*/
/* Overlay sfocato */
.pagina-backdrop {
   background-color: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   z-index: 1040; /* default bootstrap */
   }
   
      
/*==============================================================================
| OffCanvas 
|=============================================================================*/
/* Overlay sfocato */
.offcanvas-backdrop {
   background-color: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   z-index: 1040; /* default bootstrap */
   }

   
/* Larghezza offcanvas al 25% */
.offcanvas-25 {
   width: 25vw;
   }

/* Su mobile, a tutto schermo */
@media (max-width: 768px) {
   .offcanvas-25 {
      width: 100vw;
      }
   }

/*==============================================================================
| Per risolvere il problema Modal: Content moves to the right 
|=============================================================================*/	
body.modal-open { overflow:hidden; padding-right:inherit !important; }

.modal .modal-body { /* Vertical scrollbar if necessary */
   max-height: 480px;
   overflow-y: auto;
}

/*==============================================================================
| Collapse icon
|=============================================================================*/
.collapse-icon {
    border: 1px solid;
}