:root{
    --label-width: 84mm;
    --label-height: 124mm;
    --inner-margin: 3mm;
    --bleeds: 2mm;
    --text-size: 8pt;
    --prod-for-text: 8pt;
    --prod-for-color: #000000;
    --text-color: #000000;
    --header-01-size: 24pt;
    --header-01-color: #000000;
    --header-02-size: 16pt;
    --header-02-color: #000000;
    --nett-weight-size: 14pt;
    --weight-size: 34pt;
    --weight-color: #000000;
    --label_bg_color: #fff;
    --barcode-width: 34mm;
}

@media print{
    html{
        width: var(--label-width);
        min-height: var(--label-height);
        -webkit-print-color-adjust: exact;
        margin: 0mm !important;
        padding: 0mm !important;
    }
    
    body{
        width: var(--label-width);
        min-height: var(--label-height);
        -webkit-print-color-adjust: exact;
        margin: 0mm !important;
        padding: 0mm !important;
        overflow: hidden;
    }
    @page {
      size: var(--label-width) var(--label-height) portrait;
      min-width:var(--label-width) !important;
      min-height: var(--label-height) !important;
      margin: 0mm !important;
      padding: 0mm !important;
      overflow: hidden;
    }
    @page:left{
        margin-left: 0;
    }
    @page:right{
        margin-left: 0;
    }
    @page:first {
        size: var(--label-width) var(--label-height);
        margin: 0mm 0mm 0mm 0mm;
        padding: 0mm;
      }
      .break{
        page-break-after:always;
      }
    .noPrint{
      display: none !important;
    }
  }

/*------------DEFAULT ELEMENTS----------------*/
  input{
    width: 100px;
    margin-top: 10px;
    margin-bottom: 5px;
    float: left;
  }

  input[type=number]{
  height: 30px;
  border: 1px solid #c3c3c3;
  border-radius: 5px;
  }
  .hidden{
    display: none;
  }
  body{
    padding: 0;
    margin: 0;
    box-sizing:border-box;
    background-color: #646c79;
  }

  /*----------MENU ITEMS-----------*/

  .file-upload input {
    overflow: hidden;
    width: 0;
  }

  #menu{
    position:fixed;
    right: 20px;
    top: 40px;
    width:220px;
    height: fit-content;
    max-height: 380px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100vh;
    background-color: rgba(242, 242, 242, 1);
    padding: 25px;
    border-radius: 20px;
    transition: height .5s ease-in .2s;
  }
  .menuInactive{
    max-height: 0;
    transition: height .5s ease-in .2s;
  }
  #menu ul{
    color: #fff;
    margin: 0;
    list-style-type: none;
    align-items: center;
    text-align: center;
  }
  #menu ul li, .button{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 1em;
    width: 150px;
    height: 50px;
    line-height: 50px;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    color: var(--label_bg_color);
    transition: font-size .2s ease-in;
    background-color: #8bb8a3;
    text-align: center;
  }
  #menu ul li:hover, .button:hover{
    font-size: 1.1em;
    color: var(--label_bg_color);
    transition: font-size .2s ease-in;
  }
  #showMenu, #samples{
    position:absolute;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height:36px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 20px;
    color: #fff;
    top: -40px;
    left: 44%;
    background-color: #fc5350;
    border-radius: 20px;
  }
  #samples{
    left: 66%;
    cursor: pointer;
  }

  #sampleWindow{
    display: none;
    background-color: rgba(242, 242, 242, 1);
    padding: 50px;
    border-radius: 10px;
    border: 1px solid #c3c3c3;
    position: absolute;
    left: calc(50% - 200px);
    top: calc(30% - 125px);
    min-width: 400px;
    min-height: 250px;
  }
  #sampleWindow a{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-decoration: none;
    font-size: .8 em;
    color: #4d4e8e;
    line-height: 30px;
  }
#sampleWindow a:hover{
	color: #8bb8a3;
}

  #fieldSamplesWindowClose{
    width: 30px;
      height: 30px;
      cursor: pointer;
      background-color: #fc5350;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      line-height: 30px;
      text-align: center;
      color: var(--label_bg_color);
      font-size: 1em;
      border-radius: 5px;
      position: absolute;
      right: 10px;
      top: 10px;
  }

/*------------LABEL DIMENSION SETTING WINDOW-------------*/

  #setLblDimension{
    position: absolute;
    display: none;
    flex-direction: row;
    left: 25%;
    top: 10%;
    width: 44%;
    min-width: 620px;
    height: 560px;
    min-height: 560px;
    padding: 25px 50px;
    background-color: rgba(242, 242, 242, 1);
    border: 1px solid #c3c3c3;
    border-radius: 10px;
    align-items: center;
    justify-content: space-between;
  }
  
  #lblSizeForm{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
  }
  #labelSizeImg{
    display: flex;
    width: auto;
    height: 80%;
  }
  .lblSizeForm-Size{
	display: flex; 
	flex-direction: row; 
	justify-content: space-between;
  }
  .lblSizeForm-Size p{
	margin-bottom: 5px;
	margin-top: 20px
  }

  #lblSizeClose, #lblDataClose{
    position: absolute;
    right: 0px;
    top: 0px;
    margin-right: 25px;
    cursor: pointer;
  }
/*------------LABEL CONTENT SETTING WINDOW-------------*/
  #setLblData{
    position: absolute;
    display: none;
    flex-direction: row;
    left: 25%;
    top: 10%;
    min-width: 400px;
    height: 60%;
    min-height: 500px;
    padding: 25px 50px;
    background-color: rgba(242, 242, 242, 1);
    border: 1px solid #c3c3c3;
    border-radius: 10px;
    align-items: center;
    justify-content:flex-start;
  }
  #lblMargin, #lblBleeds{
	margin-top: 16px;
  }
  .productInputData{
	display: flex; 
	flex-direction: column;
	position: relative; 
	align-items: center;
  }
  .productInputData label{
	margin-right: 10px;
  }
  .productInputData input[type=text]{
	width: 400px;
	height: 30px;
	border: 1px solid #c3c3c3;
	border-radius: 5px;
  }
  .productInputDataSpan{
	display: flex; 
	flex-direction: row;
	align-items: center;
  }
  label{
    width: 120px;
    text-align:right;
  }

  textarea{
    width: 400px;
    height: 100px;
    border: 1px solid #c3c3c3;
    border-radius: 5px;
    }
    #lblProduceFor{
      height: 60px;
    }
    .fieldSettings{
      width: 30px;
      height: 30px;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      color: var(--label_bg_color);
      background-color: #febb65;
      border-radius: 5px;
      margin-left: 10px;
      margin-top: 2px;      
      text-align: center;
      line-height: 30px;
    }
    .fieldSettings:hover{
      color: var(--textColor);
      cursor: pointer;
    }

    #fieldSettingsWindow{
      width: 200px;
      height: 200px;
      display: none;
      position: absolute;
      left: 0px;
      top: 0px;
      flex-direction: column;
      background-color: rgba(242, 242, 242, 1);
      border-radius: 10px;
      border: 1px solid #c3c3c3;
      padding-left: 30px;
      padding-top: 30px;
      align-content: center;
    }
    #fontSettings{
      display: flex;
      flex-direction: column;
      align-content: center;
    }
    #fieldSettingsWindow input[type=number], input[type=color]{
        width: 150px;
    }
    #fieldSettingsWindowClose{
      width: 30px;
      height: 30px;
      cursor: pointer;
      background-color: #fc5350;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      line-height: 30px;
      text-align: center;
      color: var(--label_bg_color);
      font-size: 1em;
      border-radius: 5px;
      position: absolute;
      right: 10px;
      top: 10px;
    }

    #author{
      position: fixed;
      bottom: 0px;
      min-width: 400px;
      height: 40px;
      font-size: 1em;
      left: calc(50% - 200px);
      background-color: rgba(242, 242, 242, 1);
      padding: 20px 10px 5px 10px; 
      border-radius: 10px 10px 0 0;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      text-align: center;
      line-height: 10px;
      color: #646c79;
    }
    #author a{
      margin-top: 10px;
      line-height: 30px;
      text-decoration: none;
      color: #646c79;
      font-size: .75em;
      cursor: pointer;
    }

    #author a:hover{
      color: #febb65;
    }