:root {
  --kf-header: #333;
  --kf-header2: black;

  --kf-k-bg: #222;
  --kf-k-border: #222;
  --kf-k-input: #001;
  --kf-k-btn-bg: #BFA;
  --kf-k-header: white;
  --kf-k-label: #08C;
  --kf-k-last-label: #06A;
  --kf-k-textarea: #FFC;

  --kf-k-td-head-bg: #CCC;
  --kf-k-td-section-bg: #EEE;

  --kf-k-calibpat2-bg: #333;

  --kf-k-invalid-border: #FFD800;
  --kf-k-invalid-bg: yellow;
  --kf-k-disabled: #F00;
}
[data-theme="dark"] {
  --kf-header: #CCC;
  --kf-header2: white;

  --kf-k-bg: #222;
  --kf-k-border: #222;
  --kf-k-input: #001;
  --kf-k-btn-bg: #BFA;
  --kf-k-header: yellow;
  --kf-k-label: #C7254E;
  --kf-k-last-label: #E57;
  --kf-k-textarea: #300;

  --kf-k-td-head-bg: #222;
  --kf-k-td-section-bg: #333;

  --kf-k-invalid-border: #FFD800;
  --kf-k-invalid-bg: yellow;
  --kf-k-disabled: #F00;
}
div#calibpat {
  #gcode-out { height: 100%; }
  img { width: 100%; }
  h1 { color: var(--kf-header); }
  h2, h3 { color: var(--kf-header); }
}
table#kfactor {
  border-collapse: separate;
  border-spacing: 0px;
  border: thin solid var(--kf-k-border);
  height: 100%;
  width: 100%;

  h1, h2, h3, h4, h5 { color: var(--kf-k--header); }

  tr {
    height: 100%;
    border: thin solid var(--kf-k-border);
  }
  th, td {
    padding: 8px;
    vertical-align: middle;
  }
  th {
    width: 14%;
    text-align: right;
  }
  td:nth-child(2) {
    width: 7%;
    min-width: 7%;
  }
  td:nth-child(3) {
    width: 45%;
    font-size: 80%;
  }
  td.options { text-align: center; }

  tr.head td { background-color: var(--kf-k-td-head-bg); }
  td.section { background-color: var(--kf-k-td-section-bg); }

  td.td-output {
    width: 34% !important;
    min-width: 34% !important;
    max-width: 34% !important;
    padding: 0;
  }
  textarea {
    font-family: $font-family-monospace;
    font-size: 90%;
    border: none;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    resize: none;
    background: var(--kf-k-textarea);
  }

  input { color: #000; }
  input[type="number"] { width: 140px; }

  select {
    width: 140px;
    color: var(--kf-k--header);
  }
  #button2 { background: var(--kf-k-btn-bg); }

  label {
    color: var(--kf-k-label);
    font-weight: bold;
    padding-top: 4px;
    text-transform: capitalize;
  }
  label:after {
    display: inline;
    content: ":";
  }

  .calibpat2 td, .calibpat2 th {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    vertical-align: middle;
    background-color: var(--kf-k-td-head-bg);
  }
  .calibpat2 td:nth-child(3) { font-size: inherit; }
  .calibpat2 label { color: var(--kf-k-last-label); }

  .disabled {
    color: var(--kf-k-disabled);
    font-weight: bold;
    display: block;
    width: 150px;
    float: left;
    opacity: 0.5;
  }

  .invalidDiv, .invalidSize, .invalidNumber { background-color: var(--kf-k-invalid-bg); }
  :invalid {
    box-shadow: 0 0 3px var(--kf-k-invalid-border);
    outline: 1px solid #FC0;
  }
}