/* CSS Document */
html,body {
  padding:0;
  margin:0;
  font:1em/1.4 verdana, Cambria, Georgia, sans-serif;
  color:#333;
  background:#4f4f4f;
  height:100%;
  width:100%;
}
#container{
     display: flex;
     position:fixed;
     top:50px;
     padding:0 0 0px;
     margin:0 auto;
     background:#6f6f6f;
     width:100%;
     height:calc(100%-90px);
}
#top_container{
     flex-grow: 1;
}
.slidecontainer {
  width: 100%; /* Width of the outside container */
}

.header {
  padding: 6px;
  background: #1abc9c;
  color: white;
  font-size: 20px;
}

.mask {
     float:left;
     margin-left:6px;
     margin-top:6px;
     width: 80px;
     height: 80px;
     border-style:solid;
     border-color:#000;     
     cursor:pointer;   
}  

.design-title {
   position:absolute;
   top:5px;
   left:30px;
   width:300px;
   background-color:#efbf1c;
   padding:2px;
   text-align:center;
}

.corner-log {
  background-color:yellow;
  z-index:2001;
}

#new-page {
    position:absolute;
    text-align:center;
    cursor:pointer;
    background-color:#efdf7c;
    padding:2px;
    z-index:2001;
}

.page-label {
     position:absolute;
     top:-26px;
     background-color:#efdf7c;
     padding:2px;
     z-index:3001;
}

.align-element {
     float:left;
     margin-left:6px;
     margin-top:6px;
     width: 80px;
     height: 80px;
     border-style:solid;
     border-color:#000;     
     cursor:pointer;
}

#circle-mask-fill {
   border-radius:50%; 
   background-color:#000;
}

#rect-round-mask-fill {
   border-radius:6px;
   background-color:#000; 
}

#circle-mask-border {
   border-radius:50%; 
   background-color:rgba(0,0,0,0.0);
   border-width:6px;
}

#rect-round-mask-border {
   border-radius:6px;
   background-color:rgba(0,0,0,0.0);
   border-width:6px;
}

progress {
     margin:10px 0 10px 0;
}

.art-size {
 float:left;
 width:55px;
 height:100%;
 padding:3px;
 border-style:solid;
 border-color:#000;
 border-radius:3px;
 border-width:1px;
 margin-left:2px;
 cursor:pointer;
 color:#fff;
 text-align:center;
 display: inline-block;
 text-decoration: none;
}
/* The slider itself */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #4CAF50;
  cursor: pointer;
}

.grid-vertical {
      float:left;
      position:absolute;
      top:0px;
      width:0.0px;
      z-index:21;
      border-color:#0f6fff;
      border-width: 0.5px;
      border-style:dashed;
}

.grid-horizontal {
      float:left;
      position:absolute;
      left:0px;
      height:0.0px;
      z-index:21;
      border-color:#0f6fff;
      border-width: 0.5px;
      border-style:dashed;

}


.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
.static {
        cursor: not-allowed;
}
.draggable {
        cursor: move;
}

.parent {
  pointer-events:none;        
}
.item_select {
    pointer-events:all;
}

.content {
   pointer-events:all; 
   background-color:#fff;
   position:absolute;
   transform-origin: top left; 
   z-index:21;
}

.content-border {
   pointer-events:all; 
   width:100%;
   height:100%;
   position:absolute;
   overflow: hidden;
   z-index:21;
}

.disableSelection{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0;
}
.child {
   pointer-events:all;  
   position:absolute;
   resize: none;
   z-index: 12; 
}
.backgnd{
   pointer-events:all;  
   position:absolute;
   z-index: 12; 
}



.child-border {
   z-index: 12;
   top:0px;
   left:0px;
   width:100%;
   height:100%;
   border-width:0px;
   border-color:rgb(0,192,255);
   border-style:dashed; 
   padding:0px;
   display:block;
   transform-origin: center;
   transform: rotate(0deg);
   opacity:1.0;
   pointer-events:all;   
   resize: none;
}
.child-container {
    position:absolute;
     pointer-events:none;  
     width:100%;
     height:100%;
     border-radius:0px;
     border: 0px solid rgb(0,0,0);
     overflow:hidden;
     resize: none;
}

.child-container-border
{
     position: absolute;
     pointer-events:none; 
     border-radius:0px;
     border: 0px solid rgb(0,0,0);
     z-index :1001;
     overflow:hidden;
     pointer-events:none; 
     resize: none;
}

.child-item {
     position:absolute;
     pointer-events:all;  
     width:100%;
     height:100%;
     resize: none;
}
.child-text {
     padding-left:8px;
     padding-right:8px;
     resize: none;
}
.sub-child {
   pointer-events:none; 
   position:absolute;
   border-width:0px;
   border-color:rgb(0,192,255);
   border-style:solid; 
   z-index: 12;
   resize: none;
}
.sub-text {
     text-align:start;
     font-size:25px;
     font-weight:700;
     color:rgb(255,255,0);
     resize: none;
}
.sub-child-item {
     pointer-events:all;  
     transform-origin: center;
     resize: none;
}
.sub-child-border {
     pointer-events:all;  
     transform-origin: center;
     z-index: 12;
     border-width:0px;
     border-color:rgb(0,192,255);
     border-style:dashed; 
     padding:0px;
     display:block;
     width:100%;
     height:100%;
     transform-origin: center;
     transform: rotate(0deg);
     opacity:1.0;  
     resize: none;
} 
.design-prop{
     cursor:pointer;
     border-width:1px;
     width:80px;
     height:24px;
     border-color:#000;
     border-style:solid;
     text-align:center;
     margin-left:36px;
     margin-top:6px;
}
.pick-child {
   pointer-events:none; 
   position:absolute;
   border-width:0px;
   border-color:rgb(0,192,255);
   border-style:solid; 
   z-index: 12;
}
.selection{
     text-align:center;
    
}

.select-text {
     float:left;
     min-width:64px;
     height:34px;
     color:#fff;
     background-color:#5e0000;
     border-radius:1px;
     margin-top:2px;
     cursor:pointer;
     font-size:15px; 
}
.side_menu{
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.side_menu::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

.guide{
    display: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
}

.guide-h{
    border-top: 1px dashed #55f; 
    width: 100%; 
    z-index:1001;
}

.guide-v{
    border-left: 1px dashed #55f; 
    height: 100%; 
    z-index:1001;
}

.actif-page{
     position: absolute;
     width:calc(100% + 4px);
     height:calc(100% + 4px);
     top:-2px;
     left:-2px;     
     pointer-events:none; 
     border: 2px solid rgb(0,192,255);
     z-index :4001;
}


.selection-box {
     position:    absolute;
     background:  rgba(170, 90, 60, 0.5);
     border:     1px dotted #000;
     z-index: 25;
}
.select-item {
     position:absolute;  
     pointer-events:all;   
}
.select-item-horiz{
     height:3px;
     cursor:ns-resize;
}
.select-item-vert{
     width:3px;
     cursor:ew-resize;
}
.select-item-circle{
    width:17px;
    height:17px;
    background-color:#ffffff;
    z-index:21;
    border-radius:50%;
    border-style:solid;
    border-width:1px;
    border-color:#000;
    cursor:move;
}

.drag{
    position: absolute;
    top: 200px;
    left: 100px;   
    pointer-events:all; 
}

.corner {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #fff;
  border-width: 1.0px;
  border-style: solid;
  border-color:#000;
  border-radius:50% 50% 50% 50%;  
  z-index:unset;
  pointer-events:none;
}

.rotate {
  left: -30px;
  width: 24px;
  height: 24px;
  z-index :1001;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  background-color: rgba(255,255,255,0.0);
  pointer-events:all;
} 

.top-left {
  left: -6px;
  top: -6px; 
  z-index :1001;
  pointer-events:none; 
}

.top-right {
  left: calc(100% - 6px);
  top: -6px;
  z-index :1001;
  pointer-events:none; 
}

.bottom-left {
  top: calc(100% - 6px);
  left: -6px;
  z-index :1001;
  pointer-events:none; 
}

.bottom-right {
  top: calc(100% - 6px);
  left: calc(100% - 6px);
  z-index :1001;
  pointer-events:none; 
}

.size-border {
     position: absolute;
     pointer-events:none; 
     border: 2px dashed rgb(0,192,255);
     z-index :1001;
     width:120px;
     height:40px;
}

.group-border {
     position: absolute;
     pointer-events:none; 
     border-radius:0px;
     border: 0px solid rgb(0,0,0);
     z-index :1001;
     overflow:hidden;
     pointer-events:none; 
}
   
.n {
    border-top: 2px dashed rgb(0,192,255);
}
 
.e {
    border-right: 2px dashed rgb(0,192,255);
}
 
.s {
    border-bottom: 2px dashed rgb(0,192,255);
}
 
.w {
    border-left: 2px dashed rgb(0,192,255);
}
p { margin:0 
}
.bg-svg {
  width: 100%;
  background-size: cover;
  height: 0;
  padding: 0; /* reset */
  padding-bottom: 92%;
  border: thin dotted darkgrey;
}

.colorize-box {
	float:left;
	border-width:1px;
	border-color:#000;
	border-style:solid;
}

.color-box {
    float:left;
    border-width:1px;
    border-color:#000;
    border-style:solid;
    width:40px;
    height:40px;
    border-radius:3px;
    margin-top:6px;
    margin-left:4px;
    cursor:pointer;
}

figure > div {
  margin: 1em auto;
}


input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 3px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: red;
    margin-top: -6px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]{
    /* fix for FF unable to apply focus style bug  */
    border: 1px solid white; 

    /*required for proper track sizing in FF*/
    width: 300px;
}

input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: red;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]:focus::-moz-range-track {
    background: #ccc;
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

canvas { display: block; background:transparent;}