@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@font-face {
    font-family: 'music';
    src: url('OPUSSTD.OTF') format('opentype');
}
body { font-family: 'Montserrat', sans-serif; margin: 0;}
div, p, fieldset {box-sizing: border-box;}
table { border-collapse: collapse; margin:auto;}
div {margin: auto;}
.edit{cursor: pointer; width: 20px; height: 20px;  background: url(../images/ico_edit_off.png) center center no-repeat; background-size: contain;}
.edit:hover { background: url(../images/ico_edit_on.png) center center no-repeat; background-size: contain; }
h2 {margin: auto;  text-align: center;}
.semimod { width: 30px; height: 20px; -webkit-border-radius: 6px; margin: auto 3px;
-moz-border-radius: 6px; text-align: center;
border-radius: 6px; background: #cccccc; font-size: 16px; font-weight: bold; cursor: pointer;}
.semimod:hover, .semimodselected {background:  rgba(220, 12, 0, 0.94); color: white;}
ul.biglist { font-weight: bold; font-size: 120%; list-style: circle ;}
.indicatore{ position: absolute; width: 45px; height: 80px; border: 1px dashed gray; left: 90px; bottom: 100px;}
.image-map-container {	position: relative;  display:inline-block;}
.image-map-container img {  display:block;}
.image-map-container .map-selector {position: absolute;display: none;  left:0;  top:0px;  width: 16px; height: 10px; background: gray; opacity: 0.7;}
table.tbloption{ margin-top: 20px;}
.indicatore{ position: absolute; width: 45px; height: 80px; border: 1px dashed gray; left: 90px; bottom: 100px;}
.manuale {position: relative; background: black; width: 100%; padding: 6px 0; font-size: 160%; font-weight: bold; font-family: 'Hammersmith One', sans-serif; color: white; text-align: center;}
.manualesmart {width: 100%; font-size: 120%; font-weight: bold; font-family: 'Hammersmith One', sans-serif; color: white; text-align: right; line-height: 50px;}
#menudiv { background: #00ad95; margin-bottom: 30px;}
#wrapper { width: 100%;}
ul.sommario { list-style: circle;}
ul.sommario li a{ text-decoration: none; color: darkblue; font-weight: bold;}
fieldset.sommariofield { margin: 10px auto; text-align: left; }
fieldset.sommariofield legend{cursor: pointer;}
.titolo { font-weight: bold; text-align: center ; font-size: 150%; text-transform: uppercase;}
.subtitle { font-weight: bold; border-bottom: 1px solid; text-align: left ; padding-left: 20px; font-size: 110%; color: #15AF96; margin-top: 15px; text-transform: uppercase;
display: inline-block;}
.subsubtitle {margin: 15px auto auto auto; font-weight: bold; text-align: center ; font-size: 16px; color: black; text-transform: uppercase;}
.rivspec { position: absolute; top: -10px; left: -10px; font-size: 65%; text-transform: uppercase; white-space: nowrap;  font-weight: bold;}
table.centered { text-align: center;}
p { margin: 15px auto; text-align: justify;}
.main {width: 70%; text-align: left;}
p.definizione { color: #15AF96; font-size: 100%; font-weight: bold; text-align: justify;}
p span { font-weight: bold;}
.esempio:before{content: "esempio:"; }
.tblschema th{ padding: 3px 6px; font-size: 20px; border: 1px solid gray;}
.tblschema th span, .tblschema td, .tbloption th span, .tbloption td{ font-size: 12px; font-weight: normal; padding: 0 2px;}
.tblschema td.tdspace , .tdspace td{ font-size: 14px; padding: 2px 6px;}
a.eselink, .opendialog { color: crimson; font-weight: bold; cursor: pointer;}
.evidence {color: #E30613; font-weight: bold; }
a.eselink:hover, .opendialog:hover {color: cornflowerblue;}
.valid {position: absolute; bottom: 75px; width: 20px; height: 20px; background: url(../esempi/valid.png) center center no-repeat; background-size: cover;}}
.ui-widget { font-size: 80%;}
.small { font-size: 10px; }
table.buttoncontainer { width: 100%; margin: 15px auto 5px auto;}
table.buttoncontainer td { width: 35%; text-align: left; padding: 0 5px;}
table.buttoncontainer th { width: 30%; text-align: center;}
.estatus { float: left; color: gray; font-size: 90%;}
.ereport { float: right; cursor: pointer; width: 30px; height: 30px; background: url(../img/ireport.png) center center no-repeat; background-size: contain;}
.play{float: right;cursor: pointer; width: 30px; height: 30px; background: url(../img/play.png) center center no-repeat; background-size: contain;}
.keyicon{ float: right; width: 30px; height: 30px; cursor: pointer; background: url(../img/ikeyboard.png) center center no-repeat; background-size: contain; }

.ereport, .play,.keyicon { margin: 4px; }
.ereport:hover, .play:hover, .keyicon:hover { opacity: 0.8;}
.wrap-collabsible {position: relative;}
input.toggle[type='checkbox'], input.atoggle[type='checkbox'] {
  display: none;
}
.lbl-toggle {float: right;cursor: pointer; width: 38px; height: 36px; background: url(../img/settings.png) center bottom no-repeat; background-size: 30px; transition: all 0.55s ease-out;}
/*.toggle:checked + .lbl-toggle{ border: 1px solid gray;  border-top: none;}*/
.collapsible-content {  max-height: 0px;  overflow: hidden;  background: white;position: absolute; bottom: 0; right: 0; width: 40px;
  transition: max-height .25s ease-in-out;
}
.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 100vh; border: 1px solid gray; 
  /*border-bottom: none;*/
}
.presume th{ padding: 0 4px; font-size: 85%;}
.presume { margin: 5px auto;}
.percbar {width: 80px; border: 1px solid gray; height: 18px; line-height: 18px; font-size: 11px; font-weight: bold;}
.percfatti { float: left; height: 100%; border-right:1px solid gray;  background: lime; line-height: 18px; font-size: 11px;}
.accordion-wrapper {margin: 20px auto;   font-weight: bold; font-size: 110%;    color: #15AF96;    text-align: center;
    border-top: 3px solid #15AF96; border-bottom: 3px solid #15AF96; padding: 5px;}
.acclbl-toggle {display: block; font-weight: bold; font-size: 1.2rem;
text-transform: uppercase; text-align: center; padding: 6px; cursor: pointer; border-radius: 7px; transition: all 0.25s ease-out;}

.acclbl-toggle:hover {  background: #e8e8e8;}

.acclbl-toggle::before {
  content: ' ';
  display: inline-block;
border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;

  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform .2s ease-out;
}
.atoggle:checked + .acclbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.atoggle:checked + .acclbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
   background: #e8e8e8;
}


.accordion-content {  max-height: 0px;  overflow: hidden;  background: white; 
  transition: max-height .25s ease-in-out;
  color: black; overflow: auto;
}
.atoggle:checked + .acclbl-toggle + .accordion-content {
  max-height: 100vh;  padding: 15px 5px; 
}
.votook { color: green;}
.votono {color: red;}
.tblreport {width: 100%;}
.tblreport td { padding: 5px; font-size: 90%;} 
.tblreport th { padding: 0 5px; font-size: 90%;} 
.tblreport td.mini { font-size: 70%;}
.navigate { cursor: pointer;}
.navigate:hover { color: darkblue;}
#poprecordcont { max-height: 350px; overflow-y: auto;}
.egreen { color: green;}
.etodo{ color: red;}
.tblreport th.newcap{ background: #649bc1; color: white; text-align: right; padding: 3px 15px 3px 0;}
.deldiv {margin: auto;  width: 14px; height: 14px; background: #fff url(../img/ndele_off.png) no-repeat center center; background-size: contain; }
.deldiv:hover{margin: auto; width: 14px; height: 14px; background:#fff url(../img/ndele_on.png) no-repeat center center; background-size: contain;}

map {  display: inline;}
map area { cursor: pointer;}
map area:hover{ background: red;}
span.nota{ font-size: 70%;}
span.nota:before{ content: "[";}
span.nota:after{ content: "]";}
#keyboard { max-width: 425px; overflow-x: auto; margin-top: 22px;}
#keyboard img { border: 1px solid gray; cursor: pointer;}
input.notasel { width: 30px;}
input.errato, .errato { border: 1px solid red;}
.interlegend {margin:10px auto 5px auto;font-weight:bold; text-align:center}
table.tblrispgradi th { border: none; padding: 1px 2px 1px 6px; font-size: 90%;}

.taglio{position: absolute; width: 30px; height: 8px; background: url(../esempi/taglio.png) center center no-repeat; background-size: cover;} 
.tagliodo{position: absolute; width: 30px; height: 3px; background: url(../esempi/tagliomini.png) center center no-repeat; background-size: cover;} 
.tagliot, .tagliotb, .tagliodwb{position: absolute; width: 30px; height: 2px; left: 11px; bottom: 5.2px; background: url(../esempi/taglio.png) center center no-repeat; background-size: cover;} 
.taglioup, .taglioupb{position: absolute; width: 30px; height: 2px; left: 11px; bottom: 11px; background: url(../esempi/taglio.png) center center no-repeat; background-size: cover;} 
.tagliodw{position: absolute; width: 30px; height: 2px; left: 11px; bottom: -1px; background: url(../esempi/taglio.png) center center no-repeat; background-size: cover;} 

.tagliotb, .taglioupb, .tagliodwb{left: -4px;}
.tagliodwb { bottom: -1px;}
.notan{ background: url(../esempi/n.png) center center no-repeat; background-size: cover;} 

.notad{ background: url(../esempi/dn.png) center center no-repeat; background-size: cover;} 
.notab{ background: url(../esempi/bn.png) center center no-repeat; background-size: cover;} 
.notadd{ background: url(../esempi/ddn.png) center center no-repeat; background-size: cover;} 
.notabb{ background: url(../esempi/bbn.png) center center no-repeat; background-size: cover;} 
.accnota, .accnotan{width: 38px; height: 12px; position: absolute; left: 120px; background: url(../esempi/aan.png) center center no-repeat; background-size: cover; }
.accnotab{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/anb.png) center center no-repeat; background-size: cover; }
.accnotabb{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/anbb.png) center center no-repeat; background-size: cover; }
.accnotad{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/and.png) center center no-repeat; background-size: cover; }
.accnotadd{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/andd.png) center center no-repeat; background-size: cover; }
.nota1 { left: 60px;}
.nota2 { left: 160px;}

.diesis{width: 12px; height: 27px; background: url(../esempi/diesis.png) center center no-repeat; background-size: cover; }
.bemolle{width: 12px; height: 27px; background: url(../esempi/bemolle.png) center center no-repeat; background-size: cover; }
.stem{ position: absolute; width: 1px; height: 32px; border-left: 1px solid black;}
.accnotasem{width: 38px; height: 12px; position: absolute; left: 120px; background: url(../esempi/sem.png) center center no-repeat; background-size: cover; }
.accnotamin{width: 38px; height: 12px; position: absolute; left: 120px; background: url(../esempi/min.png) center center no-repeat; background-size: cover; }
div.fotoaccordocont { float:left; margin: 8px; border: 2px solid #054c4c; padding: 5px;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.pdfscheda{background:url('../img/pdf.png') no-repeat center center; 
   background-size: contain;  width:30px; height: 30px; float: left; cursor: pointer;}
   
.breve, .whole, .quarter, .half, .eighth, .semicroma, .biscroma { position: absolute; font-family: 'music'; font-size: 33pt; line-height: 33px;}
.stemdw {text-transform: uppercase;}
.breve:before { content: 'W';}
.whole:before { content: 'w';}
.quarter:before { content: 'q'; position: absolute;  bottom: -5px;}
.half:before { content: 'h'; position: absolute;  bottom: -5px;}
.eighth:before { content: 'e'; position: absolute;  bottom: -5px;}
.semicroma:before { content: 'x'; position: absolute;  bottom: -5px;}

table.tblfotoaccordo th {color: #054c4c; text-align: center; line-height: 23px; }
fieldset.schedaaccordo {margin: 25px auto; display: inline-block}
fieldset.schedaaccordo legend { text-indent: 10px; font-weight: bold; color: #15AF96; font-size: 120%;}
fieldset.schedaaccordo legend span{ color: black; font-weight: bold;}

.fotoaccordo { font-weight: bold; width: 117px; height: 71px; position: relative; background: url(../img/fotoaccordo.png) left center no-repeat; background-size: cover;}
.notainfoto { left:40px; top: 14px; width: 33px; height: 10px;}
table.risiederisolve {font-size: 20px; text-align: center; float: right; font-weight: bold;}
table.risiederisolve th{ padding: 3px 15px; color: #054c4c;}
table.risiederisolve td.frecciar { width: 39px; background: url(../img/frecciar.png) center center no-repeat; background-size: contain; }
table.risiederisolve td.obblighi {padding: 0; font-size: 15px; font-weight: bolder; color: crimson;}
table.tblrisonote td {padding: 0; font-size: 14px; padding: 2px;  font-weight:normal}
table.tblrisonote td span { font-weight: bold;}
.headrivolti { width: 100%; font-weight: bold; text-transform: uppercase; color: darkcyan; margin: 15px auto 5px auto;}
.clear { clear: both;}
.risonota {margin-top: 5px; font-size: 80%; text-align: justify; max-width: 650px;}
.obbnota{width: 24px; height: 6px; top: 10px; position: absolute; left: 32px; background: url(../esempi/obbnota.png) center center no-repeat; background-size: cover; }
.risnota{width: 7px; height: 7px; top:  9px; margin:1px 0; position: absolute; left: 70px; background: url(../esempi/noteris.png) center center no-repeat; background-size: cover; }
.disc:before {  content:'';  background:url('../esempi/disc.png') no-repeat center center; background-size: contain; margin: -3px 0 0 12px; width:24px; height: 12px; display: block;}
.asc:before { content:'';  background:url('../esempi/asc.png') no-repeat center center; background-size: contain; margin: -5px 0 0 14px;  width:24px; height: 12px; display: block; }
.tie:before { content:'';  background:url('../esempi/tie.png') no-repeat center center; background-size: contain; margin: -8px 0 0 12px;  width:24px; height: 12px; display: block; }
.ntmi {top: 12.5px;} .ntre {top: 16px;} .ntdo {top: 19.5px;} .ntsi {top: 23px;} .ntla {top: 24px;} .ntsol {top: 27px;}
.adiesis{width: 10px; height: 22px; position: absolute; left: 4px; top: -4px; background: url(../esempi/diesis.png) center center no-repeat; background-size: cover; }
.abemolle{width: 10px; height: 22px; position: absolute; left: 4px; top: -4px; background: url(../esempi/bemolle.png) center center no-repeat; background-size: cover; }
.abequadro{width: 10px; height: 22px; position: absolute; left: 4px; top: -4px; background: url(../esempi/bequadro.png) center center no-repeat; background-size: cover; }

.diesis{width: 10px; height: 22px; position: absolute; left: -14px; top: 14px; background: url(../esempi/diesis.png) center center no-repeat; background-size: cover; }
.bemolle{width: 10px; height: 22px; position: absolute; left: -14px; top: 14px; background: url(../esempi/bemolle.png) center center no-repeat; background-size: cover; }
.bequadro{width: 10px; height: 22px; position: absolute; left: -14px; top: 14px; background: url(../esempi/bequadro.png) center center no-repeat; background-size: cover; }
.keydiesis{width: 10px; height: 22px; background: url(../esempi/diesis.png) center center no-repeat; background-size: cover; }
.keybemolle{width: 10px; height: 22px; background: url(../esempi/bemolle.png) center center no-repeat; background-size: cover; }

.kdiesis{width: 10px; height: 22px;  position: absolute; background: url(../esempi/diesis.png) center center no-repeat; background-size: cover; }
.kbemolle{width: 10px; height: 22px; position: absolute;margin-left: 0; background: url(../esempi/bemolle.png) center center no-repeat; background-size: cover; }
.grado { position: absolute; bottom: -18px; text-align: center; font-size: 110%; font-weight: bold; font-family: Times new roman; margin-left: 21px;}
.gradom { position: absolute; bottom: -22px; text-align: center; font-size: 110%; font-weight: bold; font-family: Times new roman; margin-left: 2px;}
.accnota3{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/an3.png) center center no-repeat; background-size: cover; }
.accnotab3{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/anb3.png) center center no-repeat; background-size: cover; }
.accnotabb3{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/anbb3.png) center center no-repeat; background-size: cover; }
.accnotad3{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/and3.png) center center no-repeat; background-size: cover; }
.accnotadd3{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/andd3.png) center center no-repeat; background-size: cover; }
.notagrayed {opacity: 0.35;}
.accnota5{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/an5.png) center center no-repeat; background-size: cover; }
.accnotab5{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/anb5.png) center center no-repeat; background-size: cover; }
.accnotabb5{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/anbb5.png) center center no-repeat; background-size: cover; }
.accnotad5{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/and5.png) center center no-repeat; background-size: cover; }
.accnotadd5{width: 38px; height: 18px; position: absolute; left: 120px; background: url(../esempi/andd5.png) center center no-repeat; background-size: cover; }

#keyboardcontain {display: none;}
.percorso {font-size: 90%; margin: 10px auto; border: 3px solid #00ad95; padding: 10px; display: inline-block; text-align: left;}
ul.ulpercorso { list-style: square; color:#00ad95 ;}
ul.ulpercorso li {color: black; font-weight:bold; font-size: 95%; }
ul.ulpercorso li span{ color: #00ad95; font-weight: bold; font-size: 95%;}

.lineriso{ width: 30px; height: 2px; position: absolute;}
.ascendente { border-bottom: 1px solid red; transform: rotate(-15deg); transform-origin: -50% 0%}
.discendente { border-bottom: 1px solid blue; transform: rotate(15deg);  transform-origin: 50% 0%}
.legatoup {height: 15px; border-radius: 80%; border-bottom:none; border-top: 1px solid #171717; }
.legatodw {height: 15px; border-radius: 80%; border-top:none; border-bottom: 1px solid #171717; } 
.accnotavuota {cursor: pointer; width: 38px; height: 18px; position: absolute; left: 120px;}
.unisonol{ left: 112px;}
.unisonor{ left: 130px;}
.accunisono {margin-left: 15px;}
.unileft{margin-left: -7px;}
.uniright{margin-left: 7px;}
.pentagramma {width: 252px; height: 110px; background: url(../esempi/pentagramma.jpg) center center no-repeat; background-size: contain; position: relative;}
.pentagrammas {width: 252px; height: 110px; background: url(../esempi/pentagrammasem.jpg) center center no-repeat; background-size: contain; position: relative;}
.pentagrammadoppio {cursor:pointer; width: 298px; height: 188px; background: url(../esempi/pentagrammadoppio.png) center center no-repeat; background-size: contain; position: relative;}
.pentagramma3b {cursor:pointer; width: 400px; height: 188px; background: url(../esempi/pentagramma3b.png) center center no-repeat; background-size: contain; position: relative;}
.pentagramma3ris {cursor:pointer; width: 557px; height: 198px; background: url(../img/penta3riso.png) center center no-repeat; background-size: contain; position: relative;}
.pentagramma4rissen {cursor:pointer; width: 700px; height: 198px; background: url(../img/penta4risos.png) center center no-repeat; background-size: contain; position: relative;}
span.tonindication{color: #004dfb; font-weight: bold; font-size: 120%;}

.cellstaffvl {position: relative; width: 86px; height: 48px;  background: url(../esempi/vlcell.png) center center no-repeat; background-size: cover;}
.cellstaffbass {position: relative; width: 86px; height: 48px;  background: url(../esempi/basscell.png) center center no-repeat; background-size: cover;}
span.obblighi { font-weight: bold; color: crimson; font-style: normal;}
.pentagrammalarge {cursor:crosshair; width: 500px; height: 188px; background: url(../esempi/pentagrammalarge.png) center center no-repeat; background-size: contain; position: relative;}
.bar {position: absolute; width: 1px; height: 147px; bottom: 15px; left: 170px; background: black;}
.bargroup0 {position: absolute; width: 1px; height: 147px; bottom: 15px; left: 165px; background: black;}
.bargroup1 {position: absolute; width: 1px; height: 147px; bottom: 15px; left: 330px; background: black;}
#pentagrammadoppiosl, .pentawritablen {cursor:crosshair; width: 298px; height: 188px; background: url(../esempi/pentagrammadoppiosl.png) center center no-repeat; background-size: contain; position: relative;}
.tcontainer{width: 130px; height: 81px;  background-size: cover; position: relative;}
/*#result,#result0,#result1,#result2,#result3, #result4, #result5, #result6, #result7, #result8 , #result9 { margin-top: 15px; width: 50px; height: 50px;}
.interrogation {background: url(../esempi/interrogation.png) center center no-repeat; background-size: contain; }*/
.fullstaff {cursor:pointer;height: 188px; background: url(../img/fullstaff.png) center center repeat-x; position: relative;}
.staffcleffs {position: absolute; width: 64px; height: 188px; left: -1px; top: 0; background: url(../img/scleffs.png) no-repeat center center; padding: 0; margin: 0;}
.fullstaff:before{ content:''; position: absolute; width: 64px; height: 188px; left: -1px; top: 0; background: url(../img/scleffs.png)   }
.bassbar{ position: absolute; width: 8px; height: 188px; margin-right: 12px; top: 0; background: url(../img/bar.png)  no-repeat center center;  }
.bassbard{ position: absolute; width: 8px; height: 188px; margin-right: 12px; top: 0; background: url(../img/doublebar.png) no-repeat center center;  }
.fullstaff:after{ content:''; position: absolute; width: 8px; height: 188px; right: 0px; top: 0; background: url(../img/doublebar.png) no-repeat center center; }
.error {background: url(../img/rispostano.png) center center no-repeat; background-size: contain; }
.ok {background: url(../img/rispostasi.png) center center no-repeat; background-size: contain; }
.restest {float: right; margin: 0; width: 30px; height: 30px; }

.realtime { border:none; margin:auto; padding: 5px; background: white;}
.realtime legend {font-weight: bold; color: #15AF96; text-align: center; display: contents; border-top: 3px solid white; border-bottom: 3px solid white;}
.legend {margin: 4px auto; font-weight: bold; font-size: 110%; color: #15AF96; text-align: center; border-top: 3px solid #15AF96; border-bottom: 3px solid #15AF96;}
.legend table td { font-weight: bold; font-size: 110%; color: #15AF96; text-align: center;}

.eresult {background:url('../img/esercizio.png') no-repeat center center;  background-size: 25px;  width:30px; height: 30px; display: inline-block; }
.eresultok {background:url('../img/eserciziook.png') no-repeat center center;  background-size: 25px;  width:30px; height: 30px; display: inline-block; }
.esercizio { margin: 25px auto;}
.keyplace, .hscroll { overflow-x: auto; overflow-y: hidden; width: 100%;}
.hscroll { margin: 35px auto 0 auto; padding-bottom: 20px;}

.centered { text-align: center; margin: auto;}
.realtime:after{
     content:'';
 height: 36px; border-top: 3px solid #15AF96; width: 100%; margin-top: 15px;
    border-bottom: 3px solid #15AF96; display: block;
}
.nextcapther { margin-top: 15px; 
    width: 100%; text-align: center; text-transform: uppercase; 
    margin: 20px auto; 
    font-weight: bold;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: center;
    padding: 6px;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
    background:#dadada;
}
.nextcapther:hover { background: #e8e8e8;}
.prevcapther{
    display: inline-block;
    float: left;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid gray;
    vertical-align: middle;
    margin-left: .7rem;
     margin-top: .7rem;
    transform: translateY(-2px);
    transition: transform .2s ease-out;
}
.prosegui::after {
    content: ' ';
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid black;
    vertical-align: middle;
    margin-left: .7rem;
    transform: translateY(-2px);
    transition: transform .2s ease-out;
}
.nextchapt { font-size: 70%; text-transform: uppercase; color: gray;}


.tblrisposta div {background: gainsboro; font-weight: bold; cursor: pointer; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; border: 1px solid gray; padding: 2px 4px;}
.tblrisposta div.selected, .tblrisposta div:hover {background: cornflowerblue; color: white;}
.anota, .anotaf {cursor: pointer; width: 38px; height: 12px; position: absolute; left: 122px; background: url(../esempi/aan.png) center center no-repeat; background-size: cover;}
.anota3 {cursor: pointer; width: 38px; height: 12px; position: absolute; left: 130px; background: url(../esempi/3n.png) center center no-repeat; background-size: contain;}
.anota5 {cursor: pointer; width: 38px; height: 12px; position: absolute; left: 130px; background: url(../esempi/5n.png) center center no-repeat; background-size: contain;}
.anotavuota {cursor: pointer; width: 25px; height: 12px; position: absolute; left: 130px;}
.opahid {opacity: 0;}
.anota.tagliot, .anota3.tagliot,.anota3.tagliot {left: 4px;}
.questions {margin: auto; text-align: center; font-weight: bold; color: #005aff;}
button.verifica { background: #02a9af; margin: 10px auto; cursor: pointer; color: white; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
button.verifica:hover{ background: brown;}
.pentawritable { cursor: crosshair;}
.reale5 { height: 20px; width: 5px; position: absolute; left:40px; text-indent: 8px; font-size: 75%; border: 2px solid red; border-left: none; color: blue;}
.reale8 { height: 45px; width: 5px; position: absolute; left:40px; text-indent: 8px; font-size: 75%; border: 2px solid red; border-left: none; color: blue;}

#serror {width: 6px; height: 50px; border: 1px solid red; border-right: none; position: absolute; left: 110px; bottom: 105px;}
#lerror {width: 6px; height: 80px; border: 1px solid red; border-right: none; position: absolute; left: 200px; bottom: 70px;}
.acleft_1{ left: 95px;}
div.rotatev {
        white-space: nowrap;
        background: white;
    position: absolute;
    bottom: 15px;
    left: -40px;
    font-size: 13px;
    font-weight: bold;
    transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.nascosto { display: none;}    
  
div.attenzione, .attenzione{ color: crimson; margin: 15px auto; text-align: justify;}
div.attenzione:before, .attenzione:before{
  content:'';
  background:url('../esempi/attenzione.png') no-repeat center center; 
   background-size: contain;
  width:20px; height: 20px; display: block; margin-left:-15px
}
span.cifrato {font-size: 12px; writing-mode: vertical-rl;  text-orientation: upright; letter-spacing: -5px;}
div.cifrato {position: absolute; bottom:78px; left: 138px; font-size: 12px; font-weight: bold; writing-mode: vertical-rl;  text-orientation: upright; letter-spacing: -5px;}
div.cifrato5d {position: absolute; bottom:70px; left: 138px; width: 10px; height: 10px; background: url(../img/5dim.png) center center no-repeat; background-size: cover;}
div.cifrato7d {position: absolute; bottom:70px; left: 138px; width: 10px; height: 10px; background: url(../img/7dim.png) center center no-repeat; background-size: cover;}
.bassedit {position: absolute; bottom:78px; font-size: 10px;}
.bassedit input { width: 30px; font-size: 11px;}
div.cifratoopt {color:#b1a6a6; position: absolute; bottom:70px; left: 138px; font-size: 12px; font-weight: bold; writing-mode: vertical-rl;  text-orientation: upright;}
span.dim {font-size: 12px; text-decoration: line-through;}
.smartshow { display: none;}
button, .bottone {white-space: nowrap; display: inline-block; cursor: pointer; color: #E30613; margin: 20px auto 10px auto; background: #a92727; font-weight: bold;font-size: 12px;letter-spacing: 2px;color: white; padding: 6px 30px; text-align: center; }
button {background: #15AF96;margin: 0 auto;}
.bottone:hover { background: #15AF96;}
button:hover {background: #a92727; }
.green {background: #27a997; }
.green:hover { background: #127168;}
table.modulo th { text-align: right; padding:3px 6px;}
table.modulo input { padding: 3px;}
table.modulo td { padding: 6px 3px;}
.incompleto { border: 1px solid red;}
.errormsg {margin: 20px auto;text-align: center; font-size: 22px; color: red; font-weight: bold;}
.upad table { color: white; margin-right: 10px; cursor: pointer; font-size: 65%; font-weight: normal; }
.upad { position: absolute; right: 0;  top: 10px; color: white;}
.uicon {cursor:pointer; margin-right: 6px; width: 25px; height: 25px; background: url(../img/account.png) no-repeat center center; background-size: contain; }
.hicon {background:black url(../img/document.png) no-repeat left center; }
.logouticon { background:black url(../img/logout.png) no-repeat left center;}
.hicon, .logouticon{cursor: pointer; width: 105px; background-position: 6px; height: 30px;  background-size: 18px;  line-height: 30px;  margin:0 0 0 35px; padding:2px 0 2px 15px;  font-size: 52%; font-weight: normal; }
.hicon:hover, .logouticon:hover {background-color: #9c0000;}
.imgesempio {width: 100%;}
@media (min-width: 1200px) {
    
    }
@media (min-width: 768px) and (max-width: 980px) {
body { font-size: 90%}
    }

@media (max-width: 767px) {
  .main, p, p.attenzione, div.attenzione, subtitle {width: 100%; padding: 0 10px;}
  .smarthide{display: none;}  .smartshow { display: block;} #tblmenu { width: 95%;}
  #jetmenu {margin: 10px auto 0 auto;}
    .uicon { margin-right: 2px; width: 20px; height: 20px;}
  .upad { top: 6px;}
  .percbar { width: 60px;}
  .presume th { font-size: 75%;}
  .upad table { color: white; margin-right: 3px; cursor: pointer; font-size:70%;}
  fieldset.sommariofield { margin: 10px auto; text-align: left; width: 100%;}
  /*.hicon, .logouticon { hbackground-size: 15px;} */

  body { font-size: 75%}
  p { margin-bottom: 15px; }
  .tblschema th{ padding: 3px; font-size: 16px;}
.tblschema th span, .tblschema td{ font-size: 10px; font-weight: normal; padding: 0 2px;}
.tblschema td.tdspace , .tdspace td{ font-size: 12px; padding: 2px 3px;}
.subtitle {padding-left: 10px; font-size: 16px;}
.subsubtitle {font-size: 14px; }
fieldset.schedaaccordo {display: inline-flex;}
    }
    
@media (max-width: 480px) {
  main {width: 100%; padding: 0 10px;}  
  .imgesempio { max-width: 100%;}
  body { font-size: 70%}
  p { margin-bottom: 10px; }
  fieldset.schedaaccordo {display: inline-flex;}
  .subtitle {padding-left: 5px; font-size: 15px;}
.subsubtitle {font-size: 13px; }
    .tblschema th{ padding: 3px; font-size: 14px;}
.tblschema th span, .tblschema td{ font-size: 9px; font-weight: normal; padding: 0 2px;}
.tblschema td.tdspace , .tdspace td{ font-size: 11px; padding: 2px;}
    }