@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://innari.it/public/fonts/opendyslexic-regular-webfont.woff2') format('woff2'),
		 url('https://innari.it/public/fonts/OpenDyslexic3-Regular.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

body {

	  font-family: "Roboto", sans-serif;
	  font-weight: 400;
	  font-style: normal;
	  background-color: #e1e5f2;

	/* Impedisci il ridimensionamento della pagina */
	touch-action: manipulation;
	/* Impedisci la scalatura */
	zoom: reset;
	/* Impedisci il pinch-to-zoom */
	touch-zooming: none;
 }

		
	input::placeholder {
			color: grey;
			font-style: italic;
			font-size: 1em;
			}
			
		a {
		  text-decoration: none; /* Rimuove il sottolineato */
		  color: #274D9D; /* Mantiene il colore predefinito del testo del link */
		}
		a:hover {
		  color: 	#007ab8; /* Cambia colore al passaggio del mouse */
		}

		li {
		  margin-bottom: 0.5em; /* Distanza tra gli elementi dell'elenco */
}	
        #toggleButton {
            background-color: #216f34;
            color: #fff;
            padding: 5px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }




    #fixedDivTools {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 3; /* Assicura che il div sia sopra a tutti gli altri elementi */
		height: 50%;
		transition: left 0.5s ease; 
    }

    .fixedButtonTools {
        display: block;
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
		background-color: rgba(211, 211, 211, 0.3);
        border: none;
		color: #274D9D;
        border-radius: 50%;
        cursor: pointer;
		opacity: 0.5;
    }

    .fixedButtonTools img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }



        #divStrumentiAvanzati {
	/*		font-weight: normal;
            position: fixed;
			
            top: 1em;
            left: 30px;
            background-color: rgba(173, 216, 230, 0.9);
            padding: 10px;
            border-radius: 10px;
            transition: transform 0.3s ease-in-out;
			font-size: 100%;
	*/
	    position: fixed;
		border-radius: 20px;
        left: -500px; /* Inizialmente nascosto fuori dalla pagina */
        top: 50%;
        transform: translateY(-50%);
        width: 325px;
        /*height: 75vh;*/
		height: 100%;
        background-color: lightblue;
        transition: left 0.5s ease; /* Transizione di 0.5 secondi */
		border-radius: 10px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
		box-sizing: border-box;
		max-height: 100dvh;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
        }

       #divBottomBar {
	    position: fixed;
		border-radius: 0px;
        left: 0px; 
        bottom: 0px;
        width: 100%;
        height: 8.5vh; /*viene nuovamente fissato dalla function zoomPagina();*/ 
        background-color: #274D9D;
        transition: bottom 0.5s ease; /* Transizione di 0.5 secondi */
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
		font-size: 3vh;
		z-index: 10;

        }


        #divBoxRicerca {
	    position: fixed;
		border-radius: 20px;
        left: -500px; /* Inizialmente nascosto fuori dalla pagina */
        top: 50%;
        transform: translateY(-50%);
        width: 325px;
        /*height: 75vh;*/
		height: 100%;
        background-color: #e6e6e6;
        transition: left 0.5s ease; /* Transizione di 0.5 secondi */
		border-radius: 10px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
		color: black;
		box-sizing: border-box;
		max-height: 100dvh;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
        }

        #divUserBox {
	    position: fixed;
		border-radius: 20px;
        left: -500px; /* Inizialmente nascosto fuori dalla pagina */
        top: 50%;
        transform: translateY(-50%);
        width: 325px;
        /*height: 75vh;*/
		height: 100%;
        background-color: lightblue;
        transition: left 0.5s ease; /* Transizione di 0.5 secondi */
		border-radius: 10px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
		z-index: 11;
		box-sizing: border-box;
		max-height: 100dvh;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
        }

        .pulsanteColorato {
            background-color: #216f34;
            color: #fff;
            padding: 5px;
            border:none;
            cursor: pointer;
            border-radius: 5px;
        }
		.pulsanteColorato::placeholder {
            color: white;
        }		
        .pulsanteColoratoBlu {
            background-color: #274d9d;
            color: #fff;
            padding: 5px;
            border-radius: 5px;
            cursor: pointer;
            border:none;
			
        }		
        .selColorato {
            background-color: #216f34;
            color: #fff;
            padding: 1px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
			width: 8em;

        }
		.script {
		  text-decoration: none; /* Rimuove il sottolineato */
		  color: #274D9D; /* Mantiene il colore predefinito del testo del link */
		}
        .ts {
			/* Sposta il testo successivo più a sinistra */
			display: inline-block;
            margin-left: -0.04em;
			margin-right: 0.18em;
        }

        .fr {
            display: inline-block;
            vertical-align: middle;
            font-size: 90%;
            text-align: center;
            line-height: 1em;
			margin-top: -0.5em;
        }

        .fr span {
            display: block;
        }

        .fd {
            padding-top: .05em;
            border-top: .150em #E54235 solid;
			margin-bottom: 0.5em;
        }

        .c {
            position: relative;
            top: -1.2em;
            left: -1.3em;
            color: #E54235;
            font-size: 0.8em;
            letter-spacing: -0.05em;
			display: inline-block;
			overflow: visible;
			font-weight: 700;
			line-height: 1em;
			margin-top: 1.0em;
			margin-bottom: 0.0em;
			margin-right: -0.62em;
			
        }

		.c .fr {
			margin-right: -0.35em;
		}

		.c.cSyllable {
			margin-right: -0.54em;
		}

		.c.cSyllable .fr {
			margin-right: -0.28em;
		}

		.c.cJoined {
			width: 0;
			margin-right: 0;
		}

		.c.cJoined .fr {
			margin-right: 0;
		}
	

        .noc {
            letter-spacing: 0.8em;
        }

        .left {
			position: relative;
            left: -1.3em;
        }
		

        p {
            line-height: 1.9em;
            margin-bottom: 1em;
			white-space: nowrap;
        }


        p.testoAccordi {
            line-height: 0em;
            margin-bottom: 0em;
			white-space: nowrap;
        }

        p.soloTesto {
            line-height: 0.2em;
            margin-bottom: 1.0em;
			margin-top: 0.0em;
			white-space: nowrap;
		}
		
        p.testoSemplice {

		}
		

		
        p.Testo8 {
            line-height: 0.2em;
            margin-bottom: 1.0em;
			margin-top: 0.0em;
		}		
        p.titolo {
            font-weight: bold;
			font-size: 1.5em;
            margin-bottom: 0em;
			margin-top: 1em;
            line-height: 0em;
        }

        p.autore {
            margin-bottom: 2em;
            line-height: 1.0em;
            font-size: 0.9em;
            font-style: italic;
        }

        p.blank {
            margin-bottom: 0em;
            line-height: 0.0em;
            font-size: smaller;
            font-style: italic;
        }

        .divRelativo {
            background-color: lightblue;
            position: absolute;
            top: 0;
            right: 0;
        }

        .divBrano {
            margin-left: 1em;
			font-size: 1em;
			margin-top: -1.5em;
			width: 100%;
        }
		
        .divIntestazione {
            margin-top: 3em;
			margin-left: 4em;
			font-size: 3em;
        }		

        .titolo {
            font-weight: bold;
			font-size: 1.5em;
            margin-bottom: 0em;
			margin-top: 1em;
            line-height: 0.0em;
        }
        .iTab {
			font-size: 0.65em;
            margin-bottom: 0em;
			margin-top: 0em;
            line-height: 0.0em;
        }
		.tTab {
            margin-bottom: 1em;
            line-height: 2.0em;
            font-size: 0.9em;
            font-weight: bold;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis
        }	
		.tTab2 {
			border-bottom: 0.5em solid transparent;
            margin-bottom: 1em;
            line-height: 2.0em;
            font-size: 0.9em;
            font-weight: bold;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis
        }		
		.autore {
            margin-bottom: 1em;
            line-height: 2.0em;
            font-size: 0.9em;
            font-style: italic;
        }
	    .par {
            font-weight: bold;
			font-size: 1.0em;
			font-style: italic;
			color: #274D9D;
			margin-left: -0.8em;
            margin-bottom: 2em;
			margin-top: 2em;
            line-height: 1.0em;
        }

	    .parSoloTesto {
            font-weight: bold;
			font-size: 1.0em;
			font-style: italic;
			color: #274D9D;
			margin-left: -0.8em;
            margin-bottom: 1em;
			margin-top: 1.5em;
            line-height: 1.5em;
        }			
	    .space {	/* USATO SOLO PER FARE GLI SPAZI TRA ACCORDI */
          }			
	    .sel {
            width: 8em;
        }	
		.selButton {
            width: 10em;
        }	
		table.elencoBrani {
			padding: 8px;
			width: 100%;
			border-collapse: separate;
			margin-top: 20px;
			background-color: #f8f8fa; /*#f5d2d2;*/
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
		}	

		.whiteBox {
			padding: 15px;
			border-collapse: separate;
			margin-top: 20px;
			background-color: #e7ecef; 
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
			color: black;
		}	
		
		.whiteUserBox {
			padding: 15px;
			border-collapse: separate;
			margin-top: 20px;
			background-color: white; 
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
		}
		
		.searchBox {
			color: #274D9D;
			padding: 10px;
			font-size: 1.2em;
			border: 2px solid #ccc;
			border-radius: 5px;
			outline: none;
			transition: border-color 0.3s ease;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
			background-color: FloralWhite;
			z-index:0;
		}
		.nDIVp {
			position: relative;
		}		
		.nDIVf {
			width: calc(100% - 0px);
			position: absolute;
			left: calc(100% - 20px);
			top: calc(100% - 25px); 
		}		
		.nTABLEf {

			color: #274D9D;
			padding: 10px;
			font-size: 0.8em;
			border: 2px solid #ccc;
			border-radius: 5px;
			outline: none;
			transition: border-color 0.3s ease;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
			background-color: GhostWhite;
		}			


		.tabellaElenco {
		  width: 100%;
		 
			padding: 15px;
			border-collapse: collapse;
			margin-top: 20px;
			background-color: #e7ecef; 
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
		}

		/* Stile per le celle della tabella */
		.tabellaElenco td, .tabellaElenco th {
		  border: 0px solid #dddddd;
		  padding: 5px;
		  text-align: left;
		}

		/* Stile per le intestazioni */
		.tabellaElenco th {
		  background-color: #274d9d;
		  border-top-left-radius: 7px;
		  border-top-right-radius: 7px;
		  color: #ffffff; /* Testo bianco per contrastare con lo sfondo */
		}		

		.trDispari {
		  background-color: #E8EEF6;
		  
		}	
		.trPari {
		  background-color: #F3F3F3;
		  /* Testo bianco per contrastare con lo sfondo */
		}			
		.barraRicerca {
		  color: black; /* Testo bianco per contrastare con lo sfondo */
		}
		.soloTesto {
		  color: black; /* Testo bianco per contrastare con lo sfondo */
		}	
		.soloTestoInv {
		  color: white; /* Testo bianco per contrastare con lo sfondo */
		}
		.det {
			overflow:hidden; height:1; width:100%; overflow-Y:auto; word-wrap:break-word;
				/*font-family:Verdana;*/
				font-size:12pt;
				color:#666666;
				text-indent:0px;
				text-decoration:none;
				word-spacing:2px; 
				line-height:135%
		}		

		/* Separatore quando il brano viene visualizzato su due colonne */		
       .separator { 
			position: relative;
            top: 10px; /* Move the separator 20px down */
            border-right: 2px solid rgba(211, 211, 211, 0.3);
            padding-right: 5px; /* Space to the right of the separator */
			vertical-align: top;
			
        }
        .extra-space {
            padding-left: 30px; /* Additional space to move the second column 100px right */
        }		
		
		.sb { /*SECTION BOX - Un box che evidenzia una determinata sezione in un brano */
			background-color: #FFEA00;
			padding-top:1px;
			padding-left:30px;
			padding-bottom:10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
			border-radius: 20px;
			transform: translateX(-20px)
		}			

		#boxInformazioni .material-symbols-outlined,
		#divBottomBar .material-symbols-outlined,
		.fixedButtonTools .material-symbols-outlined {
			font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 40;
			vertical-align: middle;
		}

		#boxInformazioni .pulsanteColorato {
			border-radius: 8px;
			background: #1f7a3a;
			border: 1px solid rgba(255, 255, 255, 0.22);
			box-shadow: 0 5px 12px rgba(22, 34, 54, 0.14);
			font-weight: 800;
			transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
		}

		#boxInformazioni .pulsanteColorato:hover {
			background: #176730;
			box-shadow: 0 7px 16px rgba(22, 34, 54, 0.18);
			transform: translateY(-1px);
		}

		#boxInformazioni .pulsanteColorato:active {
			transform: translateY(0);
			box-shadow: 0 3px 8px rgba(22, 34, 54, 0.14);
		}

		#boxInformazioni #actualTranspose,
		#boxInformazioni button[alt="Home"] {
			background: #274d9d !important;
		}

		#boxInformazioni #actualTranspose:hover,
		#boxInformazioni button[alt="Home"]:hover {
			background: #1f4088 !important;
		}

		#boxInformazioni #pulsanteboxInformazioni {
			height: 1.05em !important;
			border-radius: 999px;
			box-shadow: none;
		}

/* v6.28 - Accordi multipli dentro le stesse graffe: separatore leggibile */
.c.cMulti {
    white-space: nowrap;
    letter-spacing: 0;
    min-width: max-content;
    margin-right: 0.05em;
}
.c.cMulti.cSyllable {
    margin-right: 0.18em;
}
.c.cMulti .cMultiToken {
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
}
.c.cMulti .cMultiToken .fr {
    margin-right: 0;
}
.c.cMulti .cMultiGap {
    display: inline-block;
    width: 1.05em;
    min-width: 1.05em;
    line-height: 1em;
}
.c.cMulti .fr + .cMultiGap {
    margin-left: 0;
}