body {
  margin: 0;
  padding: 0;
  height: 100%; 
  overflow: hidden;
}


.tool-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

#shortcodes {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

@media (hover: none) {
  #shortcodes {
    display: none;
  }
}


#saving {
  position: fixed;
  top: 108px;
  right: 20px;
}

#random-color {
  position: fixed;
  top: 54px;
  right: 20px;
}

  .settings {
    display: flex;
    width: 100%;
    padding-top: 0px;
    justify-content: flex-start;
    align-items: center;
  }

  .setting {
    display: flex;
    height: 54px;
    padding-top: 20px;
    padding-right: 10px;
    padding-left: 10px;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    outline: rgb(51, 51, 51) none 3px;
    outline-offset: 0px;
  }  

  .form {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: baseline;
  }

  canvas {
    position: fixed;
    top: 200px;
    left: 50px;
  }



  .labels {
    width: 100%;
    margin-right: 10px;
    align-self: auto;
    flex: 0 1 auto;
    font-size: 12px;
    font-weight: 400;
  }

  .text-field {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    border-style: none;
    border-width: 1px;
    border-color: black;
    outline: rgb(217, 217, 217) none 3px;
    outline-offset: 0px;
    font-size: 12px;
  }


/* hide spinner on number input fields */
  /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}


.short {
    width: 40px;
}