/* fonts and other extra's*/
@font-face {
    font-family:Scalasans;
    src: url(assets/otf/scalasans.otf);
  }@font-face {
    font-family:Scalasansbold ;
    src: url(assets/otf/scala-sans-bold.otf);
  }@font-face {
    font-family:Scalasanslight ;
    src: url(assets/otf/scala-sans-light.otf);
  }
input,
textarea {
  padding-right: 0;         /* remove extra padding on the right */
  box-sizing: border-box;   /* ensure width includes padding */
  text-indent: 0;  
  padding-left: 0;   /* no left padding */
}

.formfield{
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
    background-color: var(--color);
    resize:none;
    font-family:Arial, Helvetica, sans-serif;
    border:none;
    outline:none;
    text-align: var(--align);
    font-size: var(--fontsize);
    z-index: 1000;

  }.formfield:hover{
    outline: solid 1px;
  }.singleLine{
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
    background-color: var(--color);
    resize:none;
    font-family:Arial, Helvetica, sans-serif;
    border:none;
    outline:none;
    text-align: var(--align);
    font-size: var(--fontsize);
    z-index: 1000;
        -webkit-appearance: none; /* removes iOS default styling */
    appearance: none;
    resize: none; 
  }.singleLine:hover{
    outline: solid 1px;
  }

  .checkmark{
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
    background-color: var(--color);
    resize:none;
    font-family:Arial, Helvetica, sans-serif;
    border:none;
    outline:none;
    outline: solid 1px;
    z-index: 1000;
  }.checkmark:hover{
    outline: solid 2px;
  }.checkmarkDiamond{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;   /* or a fixed size, e.g., 10px */
    height: 40%;  /* same as above */
    background-color: black;
    transform: translate(-50%, -50%) rotate(45deg);
    resize:none;
    font-family:Arial, Helvetica, sans-serif;
    border:none;
    outline:none;
    z-index: 1001;
  }
  .tickbox{
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
    background-color: var(--color);
    resize:none;
    font-family:Arial, Helvetica, sans-serif;
    border:none;
    outline: solid 0.5px;
    z-index: 1000;
    border-radius: 50%;
  }.tickbox:hover{
    outline: solid 2px;
  }
.programmableButton{
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: var(--width);
  height: var(--height);
  background-color: var(--color);
  resize:none;
  font-family:Arial, Helvetica, sans-serif;
  border:none;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: var(--align);
  text-align: var(--align);
  font-size: var(--fontsize);
}.programmableButton:hover{
  outline: solid 1px;
}

  .textbox{
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
    color: var(--color);
    text-align: var(--align);
    background-color: transparent; /* while page making, otherwise transparent */
    font-size: var(--fontsize);
    resize:none;
    font-family: var(--fontfamiliy);
    border:none;
    outline:none;
    z-index: 1000;
  }
  .asset{
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
    z-index: -1;
  }
    .assetDiv{
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
    z-index: -1;
  }
.assetDiv,
.asset {
  pointer-events: none; /* Ignore clicks */
}

.assetDiv *:not(.asset),
.asset * {
  pointer-events: auto; /* Re-enable clicks for all children */
}
  .bevelledBox {
  left: var(--left);
  top: var(--top);
  position: absolute;
  width:  calc(var(--width));
  height: calc(var(--height));
  clip-path:  polygon(var(--bevel) 0px,calc(var(--width) - var(--bevel)) 0px,calc(var(--width)) var(--bevel),calc(var(--width))  calc(var(--height) - var(--bevel)),calc(var(--width) - var(--bevel))  calc(var(--height)),var(--bevel)  calc(var(--height)),0px  calc(var(--height) - var(--bevel)),0px var(--bevel));
  background: var(--color); 
  z-index: -1;
}.bevelledBox::after{
  content: "";
  position: absolute;
  top:calc(var(--bevel)/4);
  left: calc(var(--bevel)/4);
  width:  calc(var(--width) - var(--bevel)/2);
  height: calc(var(--height) - var(--bevel)/2 );
  clip-path: polygon(

  calc(var(--bevel)) 0px,
  calc(var(--width) - var(--bevel)*1.5) 0px,

  calc(var(--width) - var(--bevel)/2) calc(var(--bevel)),
  calc(var(--width) - var(--bevel)/2) calc(var(--height) - var(--bevel)*1.5),

  calc(var(--width) - var(--bevel)*1.5) calc(var(--height) - var(--bevel)/2),
  calc(var(--bevel)) calc(var(--height) - var(--bevel)/2),
  
  0px calc(var(--height) - var(--bevel)*1.5),
  0px calc(var(--bevel)),

  calc(var(--bevel)) 0px,

  calc(var(--bevel) + 2px) 2px,
  2px calc(var(--bevel) + 2px),
  2px calc(var(--height) - var(--bevel)*1.5 - 2px),
 
  calc(var(--bevel) + 2px) calc(var(--height) - var(--bevel)/2 - 2px),
  calc(var(--width) - var(--bevel)*1.5 - 2px) calc(var(--height) - var(--bevel)/2 - 2px),
  
  calc(var(--width) - var(--bevel)/2 - 2px) calc(var(--height) - var(--bevel)*1.5 - 2px),
  calc(var(--width) - var(--bevel)/2 - 2px) calc(var(--bevel) + 2px),

  calc(var(--width) - var(--bevel)*1.5 - 2px) 2px,
  calc(var(--bevel) + 2px) 2px
  );
  background: rgb(255, 255, 255); 
  z-index: -1;
} 

#tooltip{
    white-space:pre-wrap;
}


.pageBackground{
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: 630px;
    height: 900px;
    z-index: -100;
    background-color: transparent;
}
.header{
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: 650px;
    z-index: -100;
}

.frame{
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: var(--width);
  height: var(--height);
  background-color: white;
  z-index: -1;
  clip-path:  polygon(var(--bevel) 0px,calc(var(--width) - var(--bevel)) 0px,calc(var(--width)) var(--bevel),calc(var(--width))  calc(var(--height) - var(--bevel)),calc(var(--width) - var(--bevel))  calc(var(--height)),var(--bevel)  calc(var(--height)),0px  calc(var(--height) - var(--bevel)),0px var(--bevel));
} .corner {
  width: var(--width); /* Set desired width */
  height: var(--width); /* Maintain aspect ratio */
  position: absolute; /* Positioning */
  top: var(--top); /* Set top position */
  left: var(--left);
  transform: var(--rotate);
  user-select: none;
}.horizontalline{
  height: 20px;
  width: 20px;
  position: absolute;
  top: var(--top);
  left:var(--left);
  transform: var(--scale);
  display: block;
  margin: auto;
  user-select: none;
}.spellLineAsset{
  position: absolute;
  top: 10px;
  left: 5px;
  height: 1px;
  width: 190px;
  background-color: black;
}.imageHolder{
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
    background-color: transparent;
    color: white;
    overflow: hidden;
    text-indent: -99999999999px;
    white-space: nowrap;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}.imageHolderUploadButton{
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
    background-color: transparent;
    color: transparent;
    opacity: 0;
}.imageHolderUploadButton:hover{
  cursor:pointer;
}

.not-selectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}