@charset "UTF-8"; /* CSS Document */
@font-face{ font-family:mc; src:url(/app/css/adobe-clean-regular.ttf); font-weight:100; }
@font-face{ font-family:mc; src:url(/app/css/adobe-clean-semibold.ttf); font-weight:400; }

:root{ --b1:#222; --c1:#3CC; --w1:#FFF; --b2:#333; --c2:#399; --w2:#CCC; --l1:#C00; }
*{ box-sizing:border-box; }

/* HTML */
body{ background:#EEE; font:100 16px/20px mc; margin:0px; }
h1, h2, h3, h4, h5, h6, h7, h8, h9{ margin:0px; padding:0px; font-size:100%; display:block; }
ul, li{ margin:0px; padding:0px; list-style:none; }
span{ vertical-align:middle; }
a{ text-decoration:none; color:inherit; }
a:hover{ text-decoration:none; color:inherit; }
input{ width:100%; -webkit-appearance:none; }
input:focus, textarea:focus{ outline-width:0; outline:none; }
textarea{ border:2px solid #DDD; background:#fff; width:100%; padding:5px; font:100 14px/20px mc; color:#000; margin:0; -webkit-appearance:none; }
textarea.sml{ height:60px; }
textarea.mid{ height:120px; }
textarea.big{ height:240px; }
select{ border:2px solid #DDD; background:#fff; width:100%; height:30px; font:100 14px/20px mc; color:#000; margin:0; -webkit-appearance:none; }

/* LOGIN */
.lgn-wrp{ width:100%; height:100%; text-align:center; }
.lgn{ padding:20px 0; text-align:center; text-transform:uppercase; }
.lgn h1{ font:100 30px/30px mc; padding:20px 0 0 0; color:var(--b1); }
.lgn h2{ font:100 24px/24px mc; padding:10px 0; color:var(--b2); }
.lgn p{ font:100 14px/24px mc; }
.lgn input{ border-radius:4px; }
.lgn input[type="text"], .lgn input[type="password"]{ border:1px solid #DDD; width:260px; height:40px; background:#FFF; color:var(--b1); font:100 14px/20px mc; padding:4px 8px; }
.lgn input[type="submit"], .lgn input[type="button"]{ width:120px; height:30px; border:0; background:var(--c2); padding:5px; font:100 14px/20px mc; color:#FFF; margin-top:20px; cursor:pointer; }
.lgn h4{ text-align:center; font:100 12px/18px mc; margin:8px 0; }
.lgn input[type="password"].err{ border:2px solid var(--c2); background:var(--c1); color:#FFF; }
.lgn input[type="password"].chk{ border:2px solid #096; background:#3C9; color:#FFF; }

/* BARRA */
header{ position:fixed; top:0; left:0; width:200px; height:100%; background:var(--w1); z-index:900; overflow:hidden; border-right:4px solid #CCC; }
header.off{ width:0; }
.bar{ position:relative; height:100%; background:#EEE; }
.bar ul{ background:var(--w1); }
.bar li{ color:#666; border-bottom:1px solid #CCC; background:#FFF; padding:4px 8px; }
.bar a{ display:inline-block; padding:8px; width:100%; height:100%; }
.bar-ext{ text-align:left; position:absolute; bottom:0; left:0; width:100%; font:100 14px/24px mc; color:#666; }
.bar-ext li{ padding:4px 8px; color:#666; border-top:1px solid #CCC; border-bottom:0; }
.bar-ext li.men-set{ background:var(--c1); color:#FFF; }
.bar li:hover, .bar-ext li:hover{ background:var(--c2); color:#FFF; }
.bar-ext li:last-child{ padding:8px; }
/*.bar-ext li:first-child{ text-align:left; padding:8px; border-top:0; }*/

.menu{ display:none; position:fixed; top:48px; left:0; width:100%; height:48px; padding:0 10px; border-top:1px solid var(--c1); border-bottom:2px solid var(--c1); background:#FFF; }
.menu li{ display:inline-block; margin:10px 0; vertical-align:top; }
.menu li.sep{ font:900 18px/24px mc; color:var(--b2); }
.menu li span{ margin-right:6px; }
.men-hom{ cursor:pointer; text-align:center; padding:0; margin:0; border:0; }
.men-sep{ height:180px; }
.men-btn{ cursor:pointer; }
.ext-btn{ cursor:pointer; font:900 18px/24px mc; color:var(--c2); }

.ext{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.5); overflow:hidden; padding:20px; display:none; z-index:1; }
.ext-wrp{ position:relative; width:calc(100% - 200px); height:100%; border-radius:10px; border:1px solid #CCC; background:#EEE; margin-left:200px; overflow:hidden; }
.ext-fld{ padding:20px; overflow:auto; height:calc(100% - 40px); }
.ext-bar{ position:relative; padding:5px; background:var(--b2); }
.ext-bar h2{ font:400 18px/24px mc; color:var(--c2); color:#FFF; }
.ext-bar ul{ position:absolute; top:5px; right:5px; }
.ext-bar li{ display:inline-block; margin-left:5px; min-width:24px; padding:3px 6px; font:400 14px/20px mc; background:#FFF; color:var(--b2); border-radius:5px; text-transform:uppercase; text-align:center; cursor:pointer; }
.ext-bar li:hover{ background:var(--c1); color:var(--w1); }

iframe{ width:100%; height:460px; border:5px solid var(--c2); background:#FFF; border-radius:10px; }
video{ max-height:480px; border:5px solid var(--c2); border-radius:10px; }

#eco-get{ display:inline-block; padding:10px; margin:20px; background:var(--c2); border-radius:5px; cursor:pointer; }
#eco-get:hover{ background:var(--b2); }
#eco-img{ float:left; }
#eco-img li{ float:left; border-radius:5px; width:33.33%; padding:5px; }
#eco-img img{ border-radius:5px; width:100%; border:5px solid #FFF; }

/* STRUTTURA */
section{ position:relative; width:100%; background:#EEE; }

article{ float:left; }
article h3{ font:100 18px/32px mc; color:var(--c2); margin-top:20px; }

footer{ position:fixed; top:0; right:0; width:200px; height:100%; background:var(--c2); z-index:900; overflow:auto; }
footer.big{ background:#DDD; width:400px; padding:0 2px; font:100 12px/20px mc; }
footer h2{ font:100 18px/24px mc; color:#FFF; padding:0 10px; }
footer li{ margin:4px; padding:4px; border-radius:2px; background:var(--c1); font:100 14px/20px mc; color:#FFF; cursor:pointer; }
footer li span{ border-radius:2px; padding:0 2px; background:#FFF; font:100 16px/24px mc; color:var(--c1); letter-spacing:2px; }
footer li:hover{ background:#FFF; color:var(--c1); }

nav{ position:fixed; top:0; left:0; width:100%; padding:10px 10px 10px 210px; background:var(--c2); z-index:1; }
nav h2{ font:100 24px/30px mc; color:var(--c2); color:#FFF; }
nav ul{ position:fixed; top:10px; right:10px; }
nav li{ display:inline-block; margin-left:5px; padding:5px 10px; font:100 14px/20px mc; background:#FFF; color:var(--b2); border-radius:2px; text-transform:uppercase; }

hr{ clear:both; border:0; height:30px; margin:20px 0; border-bottom:10px solid #CCC;}

.data, .list{ display:none; padding:60px 10px 10px 210px; }
.listx{ padding:10px; margin:0; }
.att{ display:block !important; }

.fil{ background:var(--c1); margin-bottom:10px; padding:5px 0; border-radius:2px; }
.fil li{ display:inline-block; margin:0 0 0 5px; }
.fil li.btn{ background:var(--b2); border:0; font:100 13px/20px mc; padding:4px 8px; margin-top:1px; text-transform:uppercase; color:var(--w1); border-radius:2px; }
.fil li.num{ float:right; color:#FFF; padding:5px; }
.fil input{ background:#FFF; border:0; border-radius:2px; width:100%; height:30px; padding:5px; font:100 16px/20px mc; color:#333; }

.mod{ float:left; clear:both; display:block; content:' '; }
.modx{ clear:none; }
.modg{ padding:40px 0; }
.mod-bar{ padding:10px; }
.mod-bar li:first-child{ font:100 18px/24px mc; color:var(--c2); text-transform:uppercase; }
.mod-itm{ float:left; position:relative; padding:10px; }
.mod-itmx{ clear:both; }
.mod-lbl{ position:absolute; top:12px; left:0; padding:0 20px; width:100%; font:400 13px/13px mc; color:var(--b2); text-transform:uppercase; opacity:0.5; }
.mod-ext{ background:var(--w2); color:#FFF; font:100 12px/14px mc; padding:1px 4px; }
.mod-el{ }
.mod input[type="text"], .mod textarea{ background:#FFF; border:0; border-bottom:2px solid #CCC; width:100%; height:48px; padding:20px 10px 8px 10px; font:100 18px/20px mc; }
.mod input[type="text"]:disabled{ background:#CFF; }
.mod textarea.sml{ height:60px; }
.mod textarea.mid{ height:120px; }
.mod textarea.big{ height:240px; }

.mod label{ width:30px; height:30px; position:absolute; top:30px; left:20px; cursor:pointer; background:#FFF; border:2px solid #CCC; border-radius:4px; }
.mod label:after{ content:''; width:8px; height:4px; position:absolute; top:8px; left:7px; border:4px solid #666; border-top:none; border-right:none; background:transparent; opacity:0; transform:rotate(-45deg); }
.mod input[type="checkbox"], .mod input[type="radio"]{ height:36px; }
.mod input[type="checkbox"]:focus + label:after, .mod input[type="radio"]:focus + label:after{ opacity:0.3; }
.mod input[type="checkbox"]:checked + label:after, .mod input[type="radio"]:checked + label:after{ opacity:1; }
.mod input[type="button"]{ border:0; border-radius:5px; background:var(--c1); color:var(--w1); padding:8px 0; font:100 16px/24px mc; text-transform:uppercase; }
.mod input[type="button"]:hover, .mod input[type="button"]:focus:hover{ background:var(--b2); cursor:pointer; }
.mod input[type="button"]:focus{ background:var(--c2); }

.mod-lst{ position:absolute; top:58px; left:0; width:calc(100% - 20px); max-height:160px; margin:0 10px; z-index:1; display:none; background:#DDD; border-bottom:2px solid #BBB; overflow:hidden; }
.lst-itm{ background:var(--w1); color:var(--b2); padding:4px 6px; border-bottom:1px solid var(--b2); cursor:pointer; }
.lst-itm:hover{ color:var(--w1); background:var(--b2); }

.rng{ display:flex; flex-direction:row; }
circle:nth-child(1){ stroke-dashoffset:0; stroke:var(--w2); }

.rng-big, .rng-big svg, .rng-big circle{ width:300px; height:300px; }
.rng-big circle{ position:absolute; fill:none; stroke-width:20; transform:translate(20px, 20px); stroke-dasharray:760; stroke-linecap:round; }
.rng-big circle:nth-child(2){ stroke-dashoffset:0; stroke:var(--c2); animation:percent 1.5s linear; animation-delay:1s; }
.rng-big .rng-num{ position:relative; bottom:170px; left:0; width:calc(100% - 20px); text-align:center; color:var(--b2); }
.rng-big h2{ font-size:44px; }
.rng-big h4{ font:100 14px/14px mc; text-transform:uppercase; margin-top:10px; }
.rng-big h5{ font:100 13px/13px mc; text-transform:uppercase; margin-top:5px; opacity:.7; }
.rng-big span{ font-size:20px; opacity:.5; }

.rng-mid, .rng-mid svg, .rng-mid circle{ width:150px; height:150px; }
.rng-mid circle{ position:absolute; fill:none; stroke-width:10; transform:translate(10px, 10px); stroke-dasharray:330; stroke-linecap:round; }
.rng-mid circle:nth-child(2){ stroke-dashoffset:0; stroke:var(--c1); animation:percent 1.5s linear; animation-delay:1s; }
.rng-mid .rng-num{ position:relative; bottom:100px; left:0; width:calc(100% - 10px); text-align:center; color:var(--b2); }
.rng-mid h2{ font-size:24px; }
.rng-mid h4{ font:100 11px/11px mc; text-transform:uppercase; margin-top:5px; }
.rng-mid span{ font-size:12px; opacity:.5; }

/* ELENCHI */
table{ position:relative; width:100%; border-radius:5px 5px 2px 2px; overflow:hidden; border-bottom:16px solid var(--c1); }
tr{ position:relative; border-top:1px solid #CCC; }
tr:first-child{ background:var(--c2); color:#FFF; text-transform:uppercase; font:400 14px/24px mc; }
tr.r0{ background:#EEE; }
tr.r1{ background:#FFF; }
tr.sel:hover{ background:var(--b1); color:var(--w2); cursor:pointer; }
td{ padding:4px; border-left:1px solid #CCC; border-top:1px solid #CCC; font:100 16px/24px mc; }
tr:first-child>td{ border-top:0; }
td:first-child{ border-left:0; }
td>span{ border-radius:2px; display:inline-block; text-align:center; text-transform:uppercase; cursor:pointer; padding: 0 4px; box-sizing: border-box; }
td>span.sts{ font:100 13px/28px mc; width:100%; color:#FFF; }
td>span.inf{ font:100 13px/20px mc; margin:4px; background:var(--w2); color:#666; }
td>span.sts:hover{ background:var(--c1); }
td>a, td>ico{ background:#FFF; border:1px solid #CCC; border-radius:4px; display:inline-block; text-align: center; margin-right:4px; color:#333; padding:2px 6px; cursor:pointer; }
btn{ background:#FFF; border-radius:2px; display:inline-block; height:24x; margin-right:4px; color:#FFF; padding:2px 6px; cursor:pointer; text-transform:uppercase; }
btn:hover{ background:var(--b1); }
td>gps{ border-radius:2px; background:var(--c2); color:#FFF; width:100%; display:inline-block; font:400 14px/28px mc; cursor:pointer; padding: 0 4px; box-sizing: border-box; }

.gps{ background:#FFF; width:24px; height:24px; border-radius:50%; border:3px solid #CCC; vertical-align:middle; margin-right:4px; }
.gps:hover{ cursor:pointer; background:var(--b1); color:#FFF; }
.gps-act{ background:#3C9; color:#FFF; }

@keyframes percent{ 0% { stroke-dashoffset:0; stroke-width:0; } }

#upl{ position:fixed; top:0; left:0; width:100%; height:100%; display:none; background:rgba(161,53,98,0.25); z-index:10; }
.upl-wrp{ position:fixed; top:20%; left:50%; width:40%; margin-left:-20%; background:#FFF; border-radius:5px; padding:10px; }
.upl ul{ position:relative; width:100%; height:100%; }
.upl-ext{ position:absolute; top:-10px; right:-10px; border-radius:50%; background:#FFF; width:30px; height:30px; text-align:center; font:100 16px/30px mc; }
.upl-ext:hover{ background:#FF0; cursor:pointer; }
.upl-txt{ font:100 18px/26px mc; color:var(--c2); margin-bottom:30px; border-bottom:2px solid var(--c1); }
.upl-txt span{ font:100 14px/26px mc; color:var(--b2); text-transform:uppercase; margin-left:10px; }
.upl input[type="button"]{ width:180px; height:30px; padding:0 10px; background:var(--b1); color:#FFF; font:100 14px/20px mc; border-radius:2px; cursor:pointer; border:0; }
.upl input[type="button"]:hover{ background:var(--c2); }
.upl li{ margin:10px 0 30px 0; }
.upl label{ padding:10px; color:#FFF; font:100 14px/20px mc; border-radius:2px; cursor:pointer; border:0; }

/* LOADING */
#load{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(245,245,245,0.8); z-index:997; display:none; text-align:center; padding:25% 0px; }
.load-wrap{ width:320px; height:90px; margin:20px auto; padding:0 2px; font:100 12px/26px mc; color:#FFF; text-transform:uppercase; display:none; }
.load-item{ float:left; width:100%; text-align:left; margin:2px 0px; padding:0 0 0 5px; }
.load-item span{ display:inline-block; float:right; font:900 16px/26px mc; width:50px; text-align:right; background:#cd7722; padding:0 5px; }

/* UPLOAD */
input[type="file"]{ display:none; }
.upload{ padding:40px 10px; background:#F6F6F6; border:5px dashed #DDD; text-align:center; font:700 18px/24px mc; color:#999; cursor:pointer; }
.upload:hover{ background:#FF9; }
.upload span{ display:block; margin:10px; font:100 14px/16px mc; }
.upload-wrap{ padding:75px 5px 5px 5px; }
.upload-item{ float:left; padding:5px; }

/* MESSAGGI */
#msg{ position:fixed; top:30%; left:50%; margin-left:-160px; display:none; z-index:999; text-align:center; }
.msg-item{ position:relative; width:320px; background:#FFF; border:1px solid #CCC; border-radius:5px; padding:20px; font:100 16px/24px mc; }

/* ICONE */
.ico{ display:inline-block; vertical-align:middle; background:url(/app/css/sprite.png); background-repeat:no-repeat; background-size:500px 200px; }

.ico-16{ width:16px; height:16px; }
.ico-16-eye{ background-position:-16px -56px; }
.ico-16-pen{ background-position:-32px -56px; }
.ico-16-del{ background-position:-128px -56px; }

.ico-24{ width:24px; height:24px; }

.ico-32{ width:32px; height:32px; }
.ico-32-pht{ background-position:-256px 0; }

.ico-logo{ width:129px; height:80px; background-position:0 -125px; }
.ico-logo:hover{ filter:brightness(50) saturate(0); }

/* FORMATTAZIONE */
.w5{ width:5%; }
.w10{ width:10%; }
.w15{ width:15%; }
.w20{ width:20%; }
.w25{ width:25%; }
.w30{ width:30%; }
.w35{ width:35%; }
.w40{ width:40%; }
.w50{ width:50%; }
.w60{ width:60%; }
.w70{ width:70%; }
.w75{ width:75%; }
.w80{ width:80%; }
.w100{ width:100%; }

.cx{ text-align:center;}
.dx{ text-align:right; }

.bk-red{ background:#F66; }
.bk-grn{ background:#3C9; }


@media screen and (max-width:1024px) {
	
	.w5, .w10, .w15, .w20, .w25, .w30, .w35, .w40, .w50{ width:50%; }
	.w60, .w70, .w75, .w80, .w100{ width:100%; }
	
	.modx, .modg{ width:100%; }
	.logo{ text-align:center; }
	
}
@media screen and (max-width:480px) {
	.w5, .w10, .w15, .w20, .w25, .w30, .w35, .w40, .w50{ width:100%; }
}