html, body,section, input{
	margin:0px;
	padding:0px;	
	/*overflow:hidden;	*/
	
}

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}
section.etape3, body.etape3{
	overflow:hidden;	
	height:100%;
}

html, body,section, input, div{
	font-family:"Open Sans", sans-serif;
	color:#3e5059;
	font-size:15px;
	
}
svg.canvas rect{
	border:5px solid #FF0000;	
}
.editor {
    height: 100%;
	width:100%;
    position: absolute;
    top: 0;
    left: 0;
   /* margin-left: 78px;
    margin-top: 50px;*/
	background-image: url(../images/editor-background.png);
    background-repeat: repeat;
	background-position:-21px -21px;
}
.etape3-search:before{
	right:-4px;
}


.editor.dark {
	background-image: url(../images/editor-background-dark.png);

}
.editor .resizer{
	position:absolute;
    border: 1px dashed #57ac3e;
    pointer-events: none;
    z-index: 2;	
	opacity:0;
    /*visibility: hidden;*/
}

#svg-editor-canvas *{

    transform-origin: 0px 0px 0px;

}
.editor .resizer .ui-resizable-handle{
	position: absolute;
    width: 15px;
    height: 15px;
    background-color: #57ac3e;
    border: 2px solid white;
    border-radius: 16px;
    pointer-events: auto;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition-property: background-color, -webkit-transform;
    -moz-transition-property: background-color, -moz-transform;
    transition-property: background-color, transform;
    -webkit-transition-duration: 0.1s;
    -moz-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    transition-timing-function: linear;
}

.resizer .ui-resizable-handle:hover {
    background-color: #4a8738;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.ui-resizable-resizing .ui-resizable-handle
{
    background-color: #4a8738;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.ui-resizable-nw {
    top: -10px;
    left: -10px;
    cursor: nw-resize;
}

.editor .resizer .ui-resizable-handle.ui-resizable-n {
    cursor: n-resize;
    top: -8px;
    left: 50%;
    border-radius: 0;
	margin-left:-7px
}

.editor .resizer .ui-resizable-handle.ui-resizable-s {
    cursor: s-resize;
    bottom: -8px;
    left: 50%;
    border-radius: 0;
	margin-left:-7px
}

.editor .resizer .ui-resizable-handle.ui-resizable-w {
    cursor: w-resize;
    top: 50%;
    left: -8px;
    border-radius: 0;
	margin-top:-7px
}
.editor .resizer .ui-resizable-handle.ui-resizable-e {
    cursor: e-resize;
    top: 50%;
    right: -8px;
    border-radius: 0;
	margin-top:-7px
}

.ui-resizable-ne {
    top: -10px;
    right: -10px;
	cursor: url(../cursors/resize-cursor-ne.svg) 12 12, ne-resize;

	
}

.ui-resizable-sw {
    bottom: -10px;
    left: -10px;
    cursor: sw-resize;
}

.ui-icon, .ui-widget-content .ui-icon
{
      background-image : none;
}
.ui-resizable-se {
    bottom: -10px;
    right: -10px;
    cursor: se-resize;
}

.rotator-nw, .ui-rotatable-handle-nw {
    top: -30px;
    left: -30px;
	cursor:nesw-resize;	
   /* cursor: url(../cursors/rotate-cursor-nw.svg) 12  12, auto;*/
	/*background-color:green;*/
}
.rotator-ne, .ui-rotatable-handle-ne {
    top: -30px;
    right: -30px;
    cursor: url(../cursors/rotate-cursor-ne.svg), auto;
	/*background-color:red;*/
}

.rotator-sw,  .ui-rotatable-handle-sw {
    bottom: -30px;
    left: -30px;
    cursor: url(../cursors/rotate-cursor-sw.svg), auto;
	/*background-color:blue;*/
}

.rotator-se,  .ui-rotatable-handle-se {
    bottom: -30px;
    right: -30px;
    cursor: url(../cursors/rotate-cursor-se.svg), auto;
	/*background-color:#FF0;*/
}

.rotator, .ui-rotatable-handle {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 16px;
    pointer-events: auto;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.editor > * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.editor .resizer.active{
	opacity: 1 !important;
    visibility: visible;
}


.sidebar{
	z-index:6;
/*	position:absolute;*/
	position:fixed;
	height:100%;
	width:74px;
	    top: 50px;
	display:inline-block;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d5d7de+0,e0e1e8+100 */
	background: #E1E2EA; /* Old browsers */
	 -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	-webkit-transition: width 150ms ease-out;
    -ms-transition: width 150ms ease-out;
    transition: width 150ms ease-out;
}

.sidebar.active{
/*	width:65px;*/
}

/*
.sidebar.active .config-button:before{
	-webkit-transition: transform 150ms ease-out;
    -ms-transition: transform 150ms ease-out;
    transition: transform 150ms ease-out;
	transform: scale(1,1);
}

.sidebar.active .config-button:before{
	 transform: scale(0.9,0.9);
}*/


  
  .container-etape-bar
  {
      display:inline-block;
	  margin: 0px auto; 
	  margin-top:7px;
  }
  
  .etape-bar {
    margin:0px;
	padding:0px;
	float:left;
	margin-left:auto;
	margin-right:auto;
  }


  .edit-bar .active:before{
	  color:#0BADA4
  }
 .detail-shape.active svg *{
	  fill:#0BADA4
  }
  
  .detail-shape svg *{
	  fill:#9696A6;
  }
 

    
  .config-button{
	 font-size:14px;
	 text-align:center; 
	 padding:0px;
	 padding-top:15px;
	 padding-bottom:13px;
	 
	 position:relative;
	 cursor:pointer;
	 border-bottom:1px solid #CDCEDE;
	  -webkit-transition: background-color 150ms linear;
      -ms-transition: background-color 150ms linear;
      transition: background-color 150ms linear;
  }
  
  
  .config-button:hover{
	  background-color:#f0f1f5;
  }

  .config-button:before{
	  display:inline-block;
	  background-image: url(/images/sprite-icones-sidebar.png);
      background-repeat: no-repeat;
	  content:'';
	  width:52px;
	  margin-bottom:8px;
	 
  }
   .config-button.icon-textes:before{
	   	
		background-position:0px -14px;
		height:21px;
   }
   
    .config-button.icon-icones:before{
		background-position:0px -56px;
		height:24px;
	}
	
	.config-button.icon-finitions:before{
		background-position:0px -101px;
		height:25px;
	}
    .config-button.icon-background:before{
		background-position:0px -147px;
		height:27px;
	}

    .config-button.icon-undo:before{
		background-position:0px -195px;
		height:21px;
	}
    .config-button.icon-redo:before{
		background-position:0px -232px;
		height:21px;
	}
    .config-button.icon-tutoriel:before{
		background-position:0px -279px;
		height:20px;
	}
   
   .config-button.icon-info:before{
	   	
		background-position:0px -315px;
		height:27px;
   }
   
  
  .config-button.active{
	  background-color:#fff;
  }
  
  .edit-bar{
	/*padding:15px;*/
	z-index:4;
	position:fixed;
	    top: 50px;
	left:-195px;
	width:240px;
	height:100%;
	background-color:#fff;
	border-right:1px solid #e3e3e8;
	box-shadow:4px 0 8px -4px #e3e3e8;
	pointer-events: none;
	/*padding-top:15px;*/
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	padding-bottom:50px
	
}

.edit-bar.active{
	pointer-events:auto;
}



.title-block{
	border-bottom:1px solid #d3d4e5;
	font-size:14px;
	padding-bottom:5px;
	font-weight:bold;
	position:relative;
}

.icon-action{
	display:inline-block;
	cursor:pointer;
	height:30px;
	line-height:30px !important;
}

.icon-move-top{
	
}

.content-block{
	padding-top:12px;	
}

.content-block-color-picker{
	padding-top:10px;	
}
 
.separator{
	  color:#A7A6AA;
	  font-size:20px;
}

.config-block {
	margin-bottom:26px;	
}

.right-separator{
	border-right:1px solid #D9DAE6;
	padding-right:15px;
	margin-right:15px;
}

#select-area {
    border: 1px dotted #000;
    position: absolute;
	pointer-events:none;
	z-index:9999;
}

.search-bar-container{
	margin-bottom:15px;	
}

/*
@media screen and (max-width:768px) {
    html body .preview-logo-laptop {
        height: 240px !important;
    }
}

@media screen and (max-width:768px) {
    html body .preview-logo-laptop {
        height: 240px !important;
    }
}
*/
/* colorpciker */