/*BASE*/


:root {
  --blue: #1e90ff;
  --margine: 10px;
  --colore-sfondo:#ededed;		
  --colore-sfondo-scuro:#000;	
  --colore-pulsanti:#333;
  --colore-pulsanti-attivo:#000;
  --radius:15px;	
}

*,
*::before,
*::after {
  box-sizing: border-box; }

body, html{margin:0; padding:0; width:100%;font-style: normal; font-size:0.9em; color:#111; background: var(--colore-sfondo); font-family: 'Roboto', sans-serif; font-style: normal;
  font-weight: 300;
}	


table{font-family: 'Roboto', sans-serif; font-style: normal;
  font-weight: 300;}


.campo{width:100%; display:block; margin:10px 0px; line-height:50px; height:50px; }


h1, h2, h3, h4{display:block; width:100%;}
h1{font-size:2em}

a{text-decoration:none; color:#111}
a:hover{color:#111}

.sottolineato{text-decoration:underline}
.t-center{text-align:center}
.t-right{text-align: right}
.testo_destra{text-align: right}
.t-left{text-align:left;}
.fit{display:block;width:100%;}
.mtop{padding-top:var(--margine);}
.ptop{padding-top:20px}
.mbottom{padding-bottom:var(--margine)}
.sezione{display:inline-block; width:100%;}
.margini{padding:var(--margine) 0px;}
.iniziale{padding:var(--margine) 0px 0px 0px;}
.add-top{margin-top:10px}
.foto_griglia{float:left; width:100%; margin-bottom:30px;}

.border-top{border-top:1px solid #000}
.border-bottom{border-bottom:1px solid #000}

.tabellona{display:table; box-sizing: border-box; width:100%; height:100%; position:relative;}

.cella{display:table-cell;}
.cella.bassa{vertical-align: bottom}
.cella.media{vertical-align: middle}



	.pulsante{ border:none;
    background-image:none;
    background-color:transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;display:inline-block; width:70%; padding:15px 10px; box-sizing: border-box; background:var(--colore-pulsanti); color:#fff; margin-top:10px; max-width:160px}
	.pulsante:hover{color:#fff; background:var(--colore-pulsanti-attivo);}

/*DEDICATO*/


		  #header{position: relative; width:100%; height:auto; background:#fff;  float:left;}
		#testata{float:left; width:100%; height:auto; padding:10px; box-sizing: border-box;}
		  #logo{float:left; width:auto; height:60px; line-height:60px; margin:0px;width:auto }
		  #logo img{display: inline-block; height:40px; margin:10px 0px; width:auto}
		  #utente{float:right; width:auto;  text-align:right; line-height:60px;}

#menu_secondario{float:left; width:100%; line-height:30px; text-align:right; background:#ccc}
#menu_secondario a{display:inline-block; margin:0px 10px;}
.menu_link{color:#666!important; display:inline-block; margin:0 20px}
.menu_link:hover{color:#222!important; display:inline-block; margin:0 20px}
#titolo_pagina{float:left; width:100%; text-align:center; padding:20px 0px}
		  #contenuto{float:left; width:100%; min-height:100%;  padding:0px; box-sizing: border-box; position:relative;}
	

/*PULSANTIERA*/

		  
	      #pulsantiera{margin:2% 0%; padding:0;  width:100%; float:left; }
		  #pulsantiera ul{margin:0; padding:0; list-style: none; width:100%; float:left; }
		  #pulsantiera li{margin:1%; padding:0; list-style: none; width:48%; height:46vw; float:left; background:var(--colore-sfondo); text-align:center; position: relative}
		  #pulsantiera li .tabella{cursor:pointer}
		  #pulsantiera li .nome{position:absolute; bottom:0; width:100%; left:0; line-height:30px;}
		  




/*LOGIN*/


 		
	  
		#login{display:inline-block; width:100%; max-width:400px; border-radius:var(--radius); background:#fff; padding:40px 20px; }
	  	.blocco_login{display:inline-block; width:100%;  box-sizing: border-box; margin:20px 0px}
		.recupera{float:left; width:100%; margin-top:10px }





/*POPUP*/

	#intestazione{ width:100%; height:auto; background:var(--colore-sfondo-scuro); text-align:center; position:relative;}
	#intestazione span{position:relative; right:0px; top:0px; height:50px; width:100%; text-align:center; color:#fff; font-size:1.3em}
	#intestazione .chiudi{position:absolute; right:0px; top:0px; height:50px; width:50px; text-align:center; background:var(--colore-pulsanti); color:#fff}
	#intestazione .chiudi img{height:20px}

	
	#popup{position:relative; display:block; background:#fff; width:100%; height:100vh; box-sizing: border-box}
		



	#blocco_fisso{position:fixed;  left:0; width:80%; height:100%; top:60px;}
	#blocco_scroll{position:fixed;  right:0; width:20%; height:100%;overflow:scroll; top:60px;}
	
	.colonna_sx{position:relative; float:left; width:15%; margin:0;  text-align:center; padding:0px 10px; box-sizing: border-box}
	.colonna_sx .tit{line-height:40px; display:block; width:100%; padding:0 10px; box-sizing: border-box; color:#fff; background: #111}
	.colonna_dx{position:relative; float:left; width:100%; padding:0px 10px; box-sizing: border-box}
	
	.colonna_centro{position:relative; height:100%;float:left; width:85%; background: var(--colore-sfondo); display: table; text-align:center; padding:0px 40px; box-sizing: border-box}
	.colonna_centro .cella{display:table-cell; vertical-align: middle}
	.colonna_centro .cella .scatto{display:block;width:100%; height:100%; object-fit: contain;}
	.colonna_centro .freccia_sx{position:absolute; top:50%; left:10px; width:20px; height:50px; line-height:50px; }
	.colonna_centro .freccia_dx{position:absolute; top:50%; right:10px; width:20px; height:50px; line-height:50px;}
	.colonna_centro .freccia_sx img, .colonna_centro .freccia_dx img{width:20px;}
	
	#griglia{position:absolute; top:20px; right:20px;  width:40px; height:40px; line-height: 40px; text-align:center;  border:1px solid #000}
	#griglia:hover{background:#ccc}
	#griglia img{ display:block; margin:10px; width:20px; height:20px; }

	
	#stato{position:relative; display:block; width:100%; list-style:none;margin:0; padding:0;}
	#stato li a{display:block; width:100%; line-height:40px; border-bottom:1px solid #fff; text-align:center; background:var(--colore-sfondo); text-transform: uppercase}
	#stato li a:hover{background:var(--colore-sfondo-scuro); color:#fff}
	#stato li:last-child a{border-bottom:none; }
	
	
	.pannello{float:left;width:100%; margin:0; padding:0px; box-sizing: border-box;}
	.riga{float:left; width:100%; text-align:center}
	
	.pannello .riga .strumenti{float:left;  display:block; margin:0 0 10px 0px; padding:0; list-style:none; text-align: left}
	.pannello .riga .strumenti li{float:left; display:inline-block; margin-right:10px}
	.pannello .riga .strumenti li a{display:inline-block; width:40px; height:40px; line-height: 40px; text-align:center;  border:1px solid #000}
	.pannello .riga .strumenti li a.sel, .pannello .riga .strumenti li a:hover {background:#ccc}
	.pannello .riga .strumenti li a img{display:inline-block; height:16px;  margin:0; padding:0;}

	.pannello .riga .colori{display:block;margin:0 0 10px 0px; padding:0; list-style:none; text-align: left}
	.pannello .riga .colori li{display:inline-block; }
	.pannello .riga .colori li a{display:inline-block; width:20px; height:20px; line-height:20px; text-align:center; border:1px solid #000}
	.pannello .riga .colori li a.nero{background:#000}
	.pannello .riga .colori li a.arancione{background:#ff9937}
	.pannello .riga .colori li a.verde{background:#759b6c}
	.pannello .riga .colori li a.rosso{background:#f71113}
	
	.pannello .riga .box_commento{display:block; width:100%; height:5vh; min-height:100px; background:#fff; box-sizing: border-box; margin:0; padding:0; margin-top:10px}
	
	.box_storico{float:left; width:100%; margin:0px 0px; background:#fff; box-sizing: border-box;}
	.box_storico .storico_riga{float:left; width:100%; width:100%; text-align:left; background:#fff;}
	.box_storico .storico_riga .intestazione{float:left; width:100%; padding:5px; box-sizing: border-box; line-height:20px}
	.box_storico .storico_riga .intestazione .id{float:left; width:10%; font-weight:600; line-height:20px }
	.box_storico .storico_riga .intestazione .autore{float:left;width:80%; line-height:20px}
	.box_storico .storico_riga .intestazione .cestino{float:left;width:10%; text-align: right; height:20px; line-height:20px}
	.box_storico .storico_riga .intestazione .cestino img{display:inline-block;height:12px;}
	.box_storico .storico_riga .thumb{float:left;box-sizing: border-box; width:20%}
	.box_storico .storico_riga .thumb img{float:left; height:auto; width:100%}
	.box_storico .storico_riga .descrizione{float:left; width:70%; padding:5px; box-sizing: border-box; background:#fff}

.accordion {display:block;width:100%;margin: 0 auto;}
.accordion-header,.accordion-body { background:#444;}
.accordion-header { padding: 0px 10px; line-height:40px; color: #fff; cursor: pointer;transition: all .3s;text-transform: uppercase;}
.accordion__item {}
.accordion__item .accordion__item {}
.accordion-header:hover {background: #000;position: relative;z-index: 5;}
.accordion-body { background: #f4f4f4; color: #111; display: none;}
.accordion-body__contents { display:inline-block; padding: 20px 10px;box-sizing: border-box;width:100%;}
.accordion:first-child > .accordion__item > .accordion-header {border-bottom: 1px solid #fff;}
.accordion__item > .accordion-header:after { content: "\f3d0";  font-family: IonIcons; font-size: 1.2em; float: right;  position: relative; top: -2px;  transition: .3s all; transform: rotate(0deg);}
.accordion__item.active > .accordion-header:after {transform: rotate(-180deg);}
.accordion__item.active .accordion-header { background: #000;}
.accordion__item .accordion__item .accordion-header {background: #ccc;color: #111;}	
.accordion__item .accordion__item .accordion-header.commento {background:#c0a695;color: #111;}	
.accordion__item .accordion__item .accordion-header.fix {background:#739056;color: #111;}		
.accordion__item .accordion__item .accordion-header.contributo {background:#8b9ca4;color: #111;}	

.commento .intestazione{background:#c0a695}
.box_storico.commento{border:1px solid #c0a695; }
.fix .intestazione{background:#739056}
.box_storico.fix{border:1px solid #739056; }
.contributo .intestazione{background:#8b9ca4}
.box_storico.contributo{border:1px solid #8b9ca4; }	
	
.delete{float:left; display:block; width:100%; margin:20px 0px; }