/* CSS Document */


/*
color: #9E9E9E; labels
color: #525252; content
error: #CB0003;	

verde scuro:  rgba(36,43,0,1);
verde:        rgba(79, 95, 0, 1);
verde chiaro: rgba(128, 213, 38, 1);

*/


/* */
.demon-cloned{											}
.demon-to-clone{		display:none !important;		}

/* */
.form-group.demon-hide,
.demon-hide{				display:none !important;		}


/* */
.demon-delete{			display:none !important;		}
.demon-to-delete{										}


/* */
.demon-mask{						position:fixed;	top:50%; left:50%; 	margin:-55px auto auto -55px;			}
.demon-mask-backdrop{		position:fixed;	top:0; bottom:0; left:0; right:0;		background-color:rgba(0,0,0,0.5);			}




/* Side Feature */
.demon-sf{			  position:fixed;		right:-24px;	top:0px;  bottom:0; padding-top:8px; 	font-size:14px;  font-family:Arial, Helvetica, sans-serif;	line-height:1; color:#9E9E9E;   
                  background-color:rgba(0,0,0,0);   transition:all .5s .2s;  
}
.demon-sf *{      margin:0;   padding:0;  font-size:inherit; font-family:inherit; line-height:inherit;  color:inherit;   }
.demon-sf button{ cursor:pointer;   }

/* */
.sf-utility-show{		                  padding-right:400px; 			}
.sf-utility-show .navbar.fixed-top{   right:400px;  }


/* Side Feature - Handle */
.demon-sf .sf-handle{           position:relative; width:38px;	 height:30px;	  margin:8px 0 8px 0;	cursor:pointer;		color:#FFF;   
                                background-color:rgba(0,0,0,0.4);	  border-radius:5px 0 0 5px;   white-space:nowrap;
                                transition:background-color .3s, margin .5s;
}
.demon-sf .sf-handle > *{       opacity:0.4; fill:#FFFFFF; transition:opacity .3s;  }
.demon-sf .sf-handle .sf-ico{   width:30px;  height:30px; 	background-repeat:no-repeat;	background-position:center; 	background-size:80% auto;  transition:fill .3s;	  }
.demon-sf .sf-handle .sf-badge{	position:absolute;	display:inline-block;		top:-4px;	left:-4px;	border-radius:50%;		padding:2px 5px;	
                                font-size:11px;		line-height:12px;	 font-weight: bold;	color:#fff;		white-space: nowrap;	vertical-align: baseline;
                                background-color:#CB0003;
}

.demon-sf:hover:not(.sf-hidden){	  background-color:rgba(0,0,0,1); padding-left:16px;  right:0px; }
.demon-sf:hover:not(.sf-hidden) *{  opacity:1 !important;  }

.demon-sf .sf-handle:hover{		      background-color:rgba(255,255,255,1);      }
.demon-sf .sf-handle:hover *{	      fill:#000000;  }

.demon-sf .sf-badge.badge-changed{  animation:badge-changed 1s linear forwards;   transform-origin:24px 0px;  }

@keyframes badge-changed {
  0%    { opacity:1;   transform:scale(2); }
  100%  { opacity:0.4; transform:scale(1); }
}





/* Side Feature - Head */
.demon-sf .sf-header{   height:48px;   padding:0px 16px;  border-bottom:2px solid rgba(0,0,0,0.3);  
                        display:flex;  align-items:center; justify-content: space-between !important;  
}
.sf-header .sf-title{   font-size:28px;  }

/* Side Feature - Content */
.demon-sf .sf-content{	
                      position:fixed;		display:none;		right:0; 	top:0;  bottom:0;	left:calc(100% - 400px);	overflow:hidden;
											background-color:#FFF;			      border-left:2px solid rgba(0,0,0,0.3);	
}

.sf-content .sf-body{ height:calc(100% - 96px);	overflow-y:scroll;    }

.sf-content .sf-body::after,
.sf-content .sf-body::before{   position:fixed;  right:16px; display:block; content:''; height:10px;  width:calc(400px - 18px);  z-index:10;  pointer-events:none; }
.sf-content .sf-body::after{    bottom:48px;   background-image:linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%);     }
.sf-content .sf-body::before{   top:48px;      background-image:linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);    }

/*  */
.sf-content .sf-ins{				padding-bottom:16px;		}
.sf-content .sf-ins h2{			font-size:28px;   margin:0;		padding:24px 16px 8px 16px;  }
.sf-content .sf-ins h3{			font-size:22px;   margin:0;		padding:16px 16px 8px 16px;  }
.sf-content .sf-ins h4{			font-size:18px;   margin:0;		padding:8px  16px 8px 16px;  }
.sf-content .sf-ins h5{			font-size:16px;   margin:0;		padding:8px  16px 8px 16px;  }

.sf-content .sf-ins h2,
.sf-content .sf-ins h3,
.sf-content .sf-ins h4,
.sf-content .sf-ins h5,
.sf-content .sf-ins strog,			
.sf-content .sf-ins b{				color:#525252;	}

/*  */
.sf-content .sf-row{   display:flex;   flex-wrap:wrap;  }
.sf-content .sf-col-1{ flex:0 1 50%;   padding:8px 16px;    display:flex;  align-items:center;   }
.sf-content .sf-col-2{ flex:0 1 100%;  padding:8px 16px;    display:flex;  align-items:center;  }



/* Side Feature - Footer */
.demon-sf .sf-footer{		    height:48px;  padding:0px 16px;	  border-top:2px solid rgba(0,0,0,0.3);	
                            display:flex;  align-items:center; justify-content: space-between !important;  
}
.demon-sf .sf-btn{					padding:5px 15px;	color:rgba(36,43,0,1); 				background-color:#FFF;		border:2px solid rgba(36,43,0,1);	border-radius:17px;	 transition:all .4s;	}
.demon-sf .sf-btn:hover{											color:rgba(255, 255, 255, 1);	background-color:rgba(79, 95, 0, 1);		border-color:rgba(79, 95, 0, 1);  box-shadow:0 0 0 3px rgba(79, 95, 0, 0.4);  	}
.demon-sf .sf-btn:focus{		box-shadow:0 0 0 6px rgba(79, 95, 0, 0.6); 								}

.demon-sf .sf-btn-close{    padding:0; font-size:20px; text-align:center;  width:24px; height:24px;  }


/* Side Feature - Check */
.demon-sf .sf-check{										padding:10px 16px 0 16px;		}
.demon-sf .sf-check label::after,
.demon-sf .sf-check label::before{			position:absolute;	content:''; 	display:block;	transition:left .2s, background-color .2s, box-shadow .4s;		}

.demon-sf .sf-check {				margin:0;				}
.demon-sf .sf-check  input[type="checkbox"]{			position:absolute !important;			opacity:0;	width:1px !important; height:1px !important;  visibility:hidden;		}

.demon-sf .sf-check  label::after{		height:18px;	width:18px;	left:2px;	top:2px;	border-radius:100%;		background-color:rgba(128, 128, 128, 1);		}
.demon-sf .sf-check  label::before{		height:22px;	width:44px;	left:0;		top:0;		border-radius:11px;		background-color:rgba(227, 227, 227, 1);	 	} 

.demon-sf .sf-check  label:hover::before{		box-shadow:0 0 0 3px rgba(128, 128, 128, 0.4); 	}

.demon-sf .sf-check  input:checked + label::after{	background-color:rgba(79, 95, 0, 1);	left:22px;			} 
.demon-sf .sf-check  input:checked + label::before{	background-color:rgba(128, 213, 38, 1);	} 

.demon-sf .sf-check  input:checked + label:hover::before{		box-shadow:0 0 0 3px rgba(128, 213, 38, 0.4); 	}

.demon-sf .sf-check  input + label{									cursor:pointer;		position:relative;	padding:4px 5px 4px 50px; 	} 

.demon-sf .sf-check  input[disabled] + label,
.demon-sf .sf-check  input[readonly] + label{				cursor:default;		opacity:0.35;		} 





/* Feature Note */
.sf-note-show{			                padding-right:400px;	}
.sf-note-show .sf-content.sf-note{  display:block !important;        }

.sf-note.sf-handle .sf-ico{   /* background-image:url(../imgs/sprite.svg#note_bg); */   }

/* Feature Note - Version */ 
.sf-note .vr-selector{		    padding:4px 5px;	max-width:80%;	}

/* */
.sf-note .sf-note-item{           transition:color .4s, background-color .4s;   padding:8px 16px;       }
.sf-note .sf-note-item > b{       font-size:18px;   padding:0 8px;  }
.sf-note .sf-note-item:hover,
.sf-note .sf-note-item.selected{	color:#525252;   background-color:#E7E7E7;	}
.sf-note .sf-note-item ul{        padding:8px 0 0 46px;  }
.sf-note .sf-note-item li{        padding-bottom:4px;    }

/* Feature Note - High Light */ 
.sf-note-hl{										opacity:0.8;		}
.sf-note-hl.sf-note-nb{					box-shadow:inset 0 0 10px #008700;		}
.sf-note-hl.sf-note-action{			box-shadow:inset 0 0 10px #0005d7;		}





/* Feature Inspector */
.sf-inspector-show{			                      padding-right:400px;		}
.sf-inspector-show .sf-content.sf-inspector,
.sf-inspector-show .sf-inspector.sf-mapper,
.sf-inspector-show .sf-inspector.sf-helper{   display:block !important;          }

.sf-inspector.sf-handle .sf-ico{   /*  background-image:url(../imgs/sprite.svg#inspector_bg);*/    }

/* Feature Inspector - Reset mouse */
.dapp-cursor.cursor-inspector,
.dapp-cursor.cursor-inspector *,
.dapp-cursor.cursor-inspector *:hover{
	                                     cursor:default;
}

/* Feature Inspector - Overlay */
.sf-inspector.sf-mapper,
.sf-inspector.sf-helper{  display:none;  position:absolute;  top:1px; left:1px; right:0; bottom:0;  overflow:hidden; }

.sf-inspector.sf-mapper{  background-color:rgba(0,0,0,0.05);    }


/* Hover - Select */
.sf-inspector-item{       display:none;  position:absolute;  margin:0; padding:0;    pointer-events:none;   }
.sf-inspector-item.show{  display:block; } 

/* Hover */
.sf-inspector-item.sf-hover{       border:1px solid rgba(128, 213, 38, 0.8);  }
.sf-inspector-item.sf-hover.show{  display:block; }  

/* Select */
.sf-inspector-item.sf-select{      border:1px solid rgba(79, 95, 0, 0.8);  }
.sf-inspector-item.sf-select.show{ display:block; }  

/* */ 
.sf-guide-line{         position:absolute;   margin:0; padding:0;    }

.sf-guide-line.line-w1,
.sf-guide-line.line-w2{ width:5000px;  height:0;  left:-1500px;     }
.sf-guide-line.line-h1,
.sf-guide-line.line-h2{ height:5000px; width:0;   top:-1500px;       }

.sf-guide-line.line-w1{ border-top:1px dashed rgba(79, 95, 0, 0.8);     top:-1px;     }
.sf-guide-line.line-w2{ border-bottom:1px dashed rgba(79, 95, 0, 0.8);  bottom:-1px;  }
.sf-guide-line.line-h1{ border-left:1px dashed rgba(79, 95, 0, 0.8);    left:-1px;    }
.sf-guide-line.line-h2{ border-right:1px dashed rgba(79, 95, 0, 0.8);   right:-1px;   }

/* Punti rotondi
.sf-guide-dot{         position:absolute;  margin:0; padding:0; width:6px; height:6px;   border-radius:50%;  background-color:#FFF;  border:1px solid rgba(79, 95, 0, 0.8); }

.sf-guide-dot.dot-1{   left:-3px;   top:-3px;   }
.sf-guide-dot.dot-2{   right:-3px;  top:-3px;   }
.sf-guide-dot.dot-3{   right:-3px;  bottom:-3px;   }
.sf-guide-dot.dot-4{   left:-3px;   bottom:-3px;   }
*/
/* Punti romboidali */
.sf-guide-dot{        position:absolute;  margin:0; padding:0; width:7px; height:7px;  background-color:rgba(128, 213, 38, 0.2);  border:1px solid rgba(79, 95, 0, 1); 
                      transform:rotate(45deg);
}

.sf-guide-dot.dot-1{   left:-4px;   top:-4px;   }
.sf-guide-dot.dot-2{   right:-4px;  top:-4px;   }
.sf-guide-dot.dot-3{   right:-4px;  bottom:-4px;   }
.sf-guide-dot.dot-4{   left:-4px;   bottom:-4px;   }



/* */ 
.sf-dist-line{         display:none; position:absolute;   margin:0; padding:0;     }
.sf-dist-line.show{    display:block;   }

.sf-dist-line.line-w1,
.sf-dist-line.line-w2{ height:0;     }
.sf-dist-line.line-h1,
.sf-dist-line.line-h2{ width:0;      }

.sf-dist-line.line-w1{ border-top:1px solid rgba(79, 95, 0, 1);     right:calc(100% + 1px);   top:50%;   }
.sf-dist-line.line-w2{ border-top:1px solid rgba(79, 95, 0, 1);     left:calc(100% + 1px);    top:50%;   }
.sf-dist-line.line-h1{ border-left:1px solid rgba(79, 95, 0, 1);    bottom:calc(100% + 1px);  left:50%;  }
.sf-dist-line.line-h2{ border-left:1px solid rgba(79, 95, 0, 1);    top:calc(100% + 1px);     left:50%;  }

/* */
.sf-dist-endw,
.sf-dist-endh{         position:absolute;  margin:0; padding:0;   width:0; height:0;   }

.sf-dist-endw{         border-left:1px solid rgba(79, 95, 0, 1);  height:5px;  }
.sf-dist-endh{         border-top:1px solid rgba(79, 95, 0, 1);   width:5px;   }

.sf-dist-endw.end-left{    left:0;   top:-3px  }
.sf-dist-endw.end-right{   right:0;  top:-3px  }
.sf-dist-endh.end-top{     top:0;    left:-3px; }
.sf-dist-endh.end-bottom{  bottom:0; left:-3px; }

/* */
.sf-dist-label{          position:absolute;  padding:5px 3px 6px 5px; border-radius:5px; font-size:12px;  line-height:12px;  color:rgba(79, 95, 0, 1); background-color:#FFF;   }

.sf-dist-line.line-w1 > .sf-dist-label{   top:5px;   left:5px; }
.sf-dist-line.line-w2 > .sf-dist-label{   top:5px;   right:5px;  }
.sf-dist-line.line-h1 > .sf-dist-label{   left:5px;  bottom:5px;   }
.sf-dist-line.line-h2 > .sf-dist-label{   left:5px;  top:5px;      }

.sf-dist-line > .sf-dist-label.sf-dist-labelw{   left:auto;  right:5px;    }
.sf-dist-line > .sf-dist-label.sf-dist-labelh{   top:auto;   bottom:5px;    }


/* Feature Inspector - Content */
.sf-inspector .sf-category{   border-bottom:1px solid rgba(0,0,0,0.2);   padding-bottom:8px;  }
.sf-inspector .sf-group{      border-bottom:1px solid rgba(0,0,0,0.1);   padding:4px 0;  }
.sf-inspector .sf-group:last-child{  border-bottom:none;  }



/* Feature Inspector - Tree */
.sf-content .sf-tree{    position:relative;  }
.sf-tree       .tree-list{   display:none;  position:absolute;  top:100%;   left:0; right:0;   background-color:rgba(128, 213, 38, 1); }
.sf-tree:hover .tree-list{   display:block;   }


.sf-tree::before {  content:' ';  height:0;  width:0;  top:19px; right:16px;  position:absolute; pointer-events:none;   
                    transition:transform .3s;  transform-origin:8px 4px; 
                    border:solid transparent; border-color:rgba(255, 255, 255, 0);  border-top-color:#FFF;  border-width:8px;  margin-left:-8px;    
}
.sf-tree:hover::before{  transform:rotate(180deg);  }

.sf-tree   .tree-item{   display:flex;   background-color:rgba(79, 95, 0, 1);   box-shadow:0 0 8px rgba(79, 95, 0, 1);    }

.sf-tree   .tree-tag,
.sf-tree   .tree-css,
.sf-tree   .tree-label{  display:inline-block;  padding-right:4px; }

.sf-tree   .tree-tag{    font-size:18px; color:#FFF;     }
.sf-tree   .tree-css{    font-size:14px; color:#FFF;                padding-top:2px;  }
.sf-tree   .tree-label{  font-size:10px; text-transform:uppercase;  padding-top:4px; }

.sf-tree > .tree-item{     padding:16px 16px;   }

.sf-tree > .tree-list  .tree-item{        background-color:rgba(79, 95, 0, 1);  padding:8px 16px;   border-top:1px solid rgba(128, 213, 38, 0.2);     
                                          transition:background-color .3s;  cursor:pointer;
}
.sf-tree > .tree-list  .tree-item:hover{      background-color:rgba(79, 95, 0, .9);     }

.sf-tree > .tree-list  .tree-item.tree-body{  background-color:rgba(36, 43, 0, 0.8);  cursor:default;  }



/* */
.sf-inspector .sf-label{					}
.sf-inspector .sf-value{				color:#525252;  font-weight:bold;	  padding-left:4px;  }

/* */
.sf-inspector .sf-preview-rgba{       display:inline-block;  width:24px; height:24px;   margin:0 4px 0 8px;  border:1px solid rgba(79, 95, 0, 0.8);  overflow:hidden;
                                      background-image:url("../imgs/inspector/rgba-back.png");  background-position:0 0;  
}
.sf-inspector .sf-preview-rgba > div{ display:inline-block;  width:24px; height:24px;    } 
.sf-inspector .sf-preview-img{        display:inline-block;  width:200px; height:200px;   margin:0 8px 0 0;  
                                      background-repeat:no-repeat;  background-size:contain;  background-position:center center;  border:1px solid rgba(79, 95, 0, 0.8);  
} 


/* */
.sf-inspector .sf-converted{  background-color:rgba(0,0,0,0.8);  color:#FFF;  padding:16px;   margin:8px 0;  line-height:18px;   }

.sf-converted .sfv-konst{    color:#C75E5F;  }
.sf-converted .sfv-graph{    color:#7577C5;  }
.sf-converted .sfv-dim{      color:#75AD6C;  }
.sf-converted .sfv-rgba{     color:#C7B229;  }
.sf-converted .sfv-string{   color:#49A2C8;  }

/* */
.sf-unconverted{     padding:16px;       }






/*  Z-Index */
.demon-mask{						z-index:990201;	}
.demon-mask-backdrop{		z-index:990200;	}

.sf-inspector-item{    z-index:1; }
.sf-guide-line{        z-index:2; }
.sf-guide-dot{         z-index:3; }
.sf-dist-line{         z-index:4; }

.sf-helper{            z-index:999099; }
.sf-mapper{            z-index:999100; }

.demon-sf{             z-index:999900; }
.demon-sf .sf-handle{  z-index:999901; }
.demon-sf .sf-content{ z-index:999902; }

/* */
.NOTE{		display:none;		}





@media ( max-width:575.900px ){
	
  /* Side Feature - Content */
  
  .demon-sf .sf-content{	left:30%;				box-shadow:0 0 10px rgba(0,0,0,0.8);			}
  .demon-sf .sf-content .sf-ins .sf-btn-close{		right:8px;					}
	.demon-sf .sf-content .sf-ins h2{							font-size:18px; 		}

  .sf-note-show{			    padding-right:0%;		}
	.sf-inspector-show{			padding-right:0%;		}

  /* Feature Note */
	.sf-note .vr-selector label{		display:none;		}
	

	

}