/* Vars */
:root{
  --color-before : transparent;
  --color-after : transparent;
  --color: #FFD000;
}

*{
  box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} 

body{
	margin: 0; 
  font-size: 16px; 
  font-family: sans-serif;
  background: #BFBFBF;
  line-height: 1.2;
  color: #000;
  font-family: "sligoil", sans-serif;
  overflow: hidden;
}

h1{
  margin-top: 0;;
  font-weight:normal;
  text-transform: uppercase;
  font-size: 14px;
  font-family: "anka", sans-serif;
}

h2{
  margin-top: 0;
  margin-bottom: 0;
  font-weight:normal;
  text-transform: uppercase;
  font-size: 20px;
  color: #000;
  font-family: "anka", sans-serif;
  margin-bottom: 15px;
}

h2:before{
  content: "●";
  margin-right: 10px;
}

h3{
 text-transform: uppercase;
 font-size: 1em;
 font-weight:normal;
 font-family: "anka";
 margin-bottom: 10px;
 margin-left: -12px;
 margin-top: 15px;
}

h3:before{
  content: "•";
  margin-right: 3px;
}

img{
  width: 100%;
  vertical-align: top;
}

/*section:not(:first-child){
  border-top: 1px solid #000;
  padding: 20px 0px;
}*/

button, input[type="button"]{
  font-family: "sligoil";
  border: none;
  outline: 1px dotted #000;
  background: #FFF;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 1em;
  line-height: 1.4;
  /*font-weight: bold;*/
  display: inline-block;
  /*position: relative;*/
  /*top: 1px;*/
  margin-right: 5px;
  margin-left: 20px;
}

button:hover {
  background-color: var(--color);
}

label{
  text-transform: uppercase; 
  font-weight:normal;
  margin-right: 0px;
  font-size: 12.5px;
}

input[type="text"]{
  width: 100px;
  margin-left: -5px;
}

input[type="number"]{
  width: 45px;
  margin-left: -5px;
}

textarea{
 width: 100%;
 font-family: "sligoil";
 padding: 5px;
}

.row{
  display: flex;
  flex-wrap: wrap;
}

#js-template{
  display: none;
}

.hide{
  display: none;
}

.preview-panel{
  position: fixed;
  z-index: 999;
  top: 10px; 
  left:20px;
}

#ui-panel{
  width: 350px;
  background: lightgrey; 
  position: fixed;
  top: 0; 
  right:0;
  bottom: 0;
}

.scrollBox{
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0;
  right: 0;
  overflow-y: auto;
  padding: 20px 15px;
}
#add-content, 
#edit-background, 
.scrollBox .edit{
  padding: 20px 0;
  position: relative;
}

#add-content{
  /*padding-top: 0;*/
}


#edit-background{
  margin-bottom: 20px;
}

.scrollBox .delete-btn{
  font-size: 10px;
  position: absolute;
  right:5px;
  top:20px;
}

#page-setting{
  padding-top: 0;
}

.scrollBox textarea{
 width: calc(100% - 40px);
 margin-left: 20px;
 margin-bottom: 15px;
}

.scrollBox .gui-group{
  margin-left: 20px;
  font-size: 12.5px;
}

.scrollBox .gui-group > div{
  margin-bottom: 5px;
}

.scrollBox .edit-functions .gui-group{
   margin-bottom: 5px;
}

.scrollBox #edit-background .gui-group{
  padding-bottom: 15px;
}

.scrollBox #edit-background .background-pattern-page{
  border: none;
}

#fileInput {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#fileInput + label {
  outline: 1px dotted #000;
  background: #FFF;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 1em;
  line-height: 1.4;
  /*font-weight: bold;*/
  display: inline-block;
  text-transform: capitalize;
}

#fileInput + label:hover {
    background-color: var(--color);
}

#fileInput + label {
  cursor: pointer;
}

#fileInput:focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}

#generate-pattern-btn{
  font-size: 0.85em;
}

.download-section{
  border-top: 1px solid #000;
  /*background: #FFF;*/
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}


/*----- CSS PANEL ----- */

#css-panel{
  width: 350px;
  background: lightgrey; 
  padding: 20px;
  padding-top: 70px;
  position: fixed;
  z-index: 3;
  top: 0px; 
  left:0;
  bottom: 0;
}

#css-panel textarea{
  height: 78vh;
}

#html-panel {
  position: fixed;
  top:0;
}

/*----- POSTER ----- */

#canvas-wrapper{
  /*width: calc(100% - 340px);*/
  width: calc(100% - 700px);
  /*width: 100%;*/
  /*height: 100vh;*/
  left: 350px;
  position: relative;
  top:0;
  pointer-events: none;
  overflow: scroll;
}

#poster{
  background: #FFF; 
  /*width: calc(100% - 800px); */
  /*height: calc(100vh - 100px);*/
  width: 29.7cm;
  height:42cm;
  transform: scale(0.4);
  transform-origin: top left;
  margin-top: 20px;
  /*top:50%;*/
  margin-left: calc((100% - 450px) - ((100% - 450px) / 2));
  /*margin-left: 45%;*/
  /*top:-68%;*/
  /*margin-left: 50%;*/
  /*padding: 1cm;*/
  position: relative;
  overflow:hidden;
  /*background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='65px' width='65px'><text x='30' y='40' fill='000' font-size='40'></text></svg>");*/
}

#poster.portrait-style{
  width: 29.7cm;
  height:42cm;
  transform: scale(0.4);
  /*transform-origin: top left;*/
  margin-top: 20px;
  margin-left: calc((100% - 450px) - ((100% - 450px) / 2));
}

#poster.landscape-style{
  width: 42cm;
  height:29.7cm;
  transform: scale(0.32);
  /*transform-origin: top left;*/
  margin-top: 20px;
  margin-left: calc((100% - 500px) - ((100% - 500px) / 2));
}

#poster.square-format-style{
  width: 32.5cm;
  height:32.5cm;
  transform: scale(0.4);
  /*transform-origin: top left;*/
  margin-top: 20px;
  margin-left: calc((100% - 480px) - ((100% - 480px) / 2));
}

#poster.export-style{
  margin:0 !important;
}

.export-style .block .info{
  display: none;
}

.export-style .block{
  border:none !important;
  outline: none !important;
}

.export-style #grid{
  display: none !important;
}



/* ------ Background -------- */
/* Generative */
#generative-background{
  display: flex;
  flex-wrap: wrap;
}

.shape{
  width: 8cm;
  height: 8cm;
  /*background: #000;*/
  /*position: absolute;*/
}

.shape.circle{
  border-radius: 100%;
}

/*------------ Dynamic JS ---------------- */
.block{
  padding: 10px;
  position: absolute;
  top: 1cm;
  left:1cm;
  z-index:1;
  max-width: 100%;
  overflow-wrap: break-word;
  font-family: Arial, sans-serif;
}

.block .info{
  position: absolute;
  font-size: 30px;
  color: blue;
  top: -40px;
  left: 0;
}

.text-block{
  outline: 1px solid blue;
  font-size: 60px;
  width: 90%;
}

.image-block {
  outline: 1px solid red;
  padding: 0;
  width: 90%;
  margin:0;
}

.image-block .info{
  color: red;
}

.editCss{
  height: 250px;
}

/* ----------- GRID --------------- */
#grid{
  width: 100%;
  /*height: calc(100vh - 100px);*/
  height: 42cm;
  position: absolute;
  top: 0;
  left:0;
  display: none;
}

#grid.active{
  display: block;
}

#grid-col{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.grid-el-col{
  height:42cm;
  /*height: calc(100vh - 100px);*/
  width: 4%;
  border-right: 1px solid magenta;
}

#grid-row{
  /*height: calc(100vh - 100px);*/
  height:42cm;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
}

.grid-el-row{
  height:1cm;
  width: 100%;
  border-bottom: 1px solid magenta;
}

/* ------ Progression bar ------- */
#progression{
  height: 20px;
  width: 30px;
  background: var(--color);
  position: fixed;
  pointer-events: none;
  bottom: 0;
  left:0;
  z-index: 100;
}

/* ----- Preview Panel -------- */
#preview, 
#grid-btn, 
#previewfull{
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.85em;
  margin-left: 0;
}

#preview.active, 
#previewfull.active,
#grid-btn.active{
  background-color: var(--color);
}

.zoom {
  display: inline-block;
}

#zoomin-btn{
  margin-right:0;
  margin-left: 6px;
}

#zoomout-btn{
  margin-left:0;
  margin-right: 0;
}


/* ----------- Preview mode ----------- */

body.preview-mode{
  background: #3F3F3F;
}


body.preview-mode #poster{
  overflow: hidden;
}


body.preview-mode .block .info{
  display: none;
}

body.preview-mode .block{
  outline:none !important;
}

body.preview-mode #grid{
  display: none;
}

/* ----------- Full mode ----------- */

body.full-mode{
  background: #3F3F3F;
}


body.full-mode #poster{
  overflow: hidden;
}


body.full-mode .block .info{
  display: none;
}

body.full-mode .block{
  outline:none !important;
}

body.full-mode #grid{
  display: none;
}

body.full-mode #css-panel,
body.full-mode #ui-panel, 
body.full-mode #progression{
  display: none;
}

@media print{
  @page{
    size: A3;
    margin:0;
  }

  body{
    background: #FFF;
  }

  #ui-panel, 
  #preview, 
  #progression, 
  .preview-panel,
  #css-panel{
    display: none;
  }

  #canvas-wrapper{
    width: 100%;
    height: auto;
  }

  #poster{
    margin:0;
    width:100%;
    height: 100%;
    background: #FFF;
    /*transform: scale(1);*/
  }

  .block .info{
    display: none;
  }

  .block{
    border:none !important;
    outline: none !important;
  }

}