:root {
  --tpl-col0: #f44336;
  --tpl-fg0: #000;
  --tpl-col1: #e91e63;
  --tpl-fg1: #000;
  --tpl-col2: #9c27b0;
  --tpl-fg2: #fff;
  --tpl-col3: #673ab7;
  --tpl-fg3: #fff;
  --tpl-col4: #3f51b5;
  --tpl-fg4: #fff;
  --tpl-col5: #2196f3;
  --tpl-fg5: #000;
  --tpl-col6: #03a9f4;
  --tpl-fg6: #000;
  --tpl-col7: #00bcd4;
  --tpl-fg7: #000;
  --tpl-col8: #009688;
  --tpl-fg8: #000;
  --tpl-col9: #4caf50;
  --tpl-fg9: #000;
  --tpl-col10: #8bc34a;
  --tpl-fg10: #000;
  --tpl-col11: #cddc39;
  --tpl-fg11: #000;
  --tpl-col12: #ffeb3b;
  --tpl-fg12: #000;
  --tpl-col13: #ffc107;
  --tpl-fg13: #000;
  --tpl-col14: #ff9800;
  --tpl-fg14: #000;
  --tpl-col15: #ff5722;
  --tpl-fg15: #000;
  --tpl-col16: #795548;
  --tpl-fg16: #fff;
  --tpl-col17: #9e9e9e;
  --tpl-fg17: #000;
  --tpl-col18: #607d8b;
  --tpl-fg18: #000;
  --tpl-col19: #ffffff;
  --tpl-fg19: #000;
  --tpl-col20: #000000;
  --tpl-fg20: #fff;
}

.rotate-device {
  max-width: 50vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
  padding: 2.5rem;
}
.rotate-device img {
  width: 100%;
  height: 100%;
  display: block;
}

#loading_overlay {
  background: #000;
}

body #tapeform option[value=col0],
body #tapeform [data-value=col0],
body #tapeform #preview [data-col=col0],
body #tapeform .col0 {
  background-color: var(--tpl-col0);
  color: var(--tpl-fg0);
}
body #tapeform option[value=col1],
body #tapeform [data-value=col1],
body #tapeform #preview [data-col=col1],
body #tapeform .col1 {
  background-color: var(--tpl-col1);
  color: var(--tpl-fg1);
}
body #tapeform option[value=col2],
body #tapeform [data-value=col2],
body #tapeform #preview [data-col=col2],
body #tapeform .col2 {
  background-color: var(--tpl-col2);
  color: var(--tpl-fg2);
}
body #tapeform option[value=col3],
body #tapeform [data-value=col3],
body #tapeform #preview [data-col=col3],
body #tapeform .col3 {
  background-color: var(--tpl-col3);
  color: var(--tpl-fg3);
}
body #tapeform option[value=col4],
body #tapeform [data-value=col4],
body #tapeform #preview [data-col=col4],
body #tapeform .col4 {
  background-color: var(--tpl-col4);
  color: var(--tpl-fg4);
}
body #tapeform option[value=col5],
body #tapeform [data-value=col5],
body #tapeform #preview [data-col=col5],
body #tapeform .col5 {
  background-color: var(--tpl-col5);
  color: var(--tpl-fg5);
}
body #tapeform option[value=col6],
body #tapeform [data-value=col6],
body #tapeform #preview [data-col=col6],
body #tapeform .col6 {
  background-color: var(--tpl-col6);
  color: var(--tpl-fg6);
}
body #tapeform option[value=col7],
body #tapeform [data-value=col7],
body #tapeform #preview [data-col=col7],
body #tapeform .col7 {
  background-color: var(--tpl-col7);
  color: var(--tpl-fg7);
}
body #tapeform option[value=col8],
body #tapeform [data-value=col8],
body #tapeform #preview [data-col=col8],
body #tapeform .col8 {
  background-color: var(--tpl-col8);
  color: var(--tpl-fg8);
}
body #tapeform option[value=col9],
body #tapeform [data-value=col9],
body #tapeform #preview [data-col=col9],
body #tapeform .col9 {
  background-color: var(--tpl-col9);
  color: var(--tpl-fg9);
}
body #tapeform option[value=col10],
body #tapeform [data-value=col10],
body #tapeform #preview [data-col=col10],
body #tapeform .col10 {
  background-color: var(--tpl-col10);
  color: var(--tpl-fg10);
}
body #tapeform option[value=col11],
body #tapeform [data-value=col11],
body #tapeform #preview [data-col=col11],
body #tapeform .col11 {
  background-color: var(--tpl-col11);
  color: var(--tpl-fg11);
}
body #tapeform option[value=col12],
body #tapeform [data-value=col12],
body #tapeform #preview [data-col=col12],
body #tapeform .col12 {
  background-color: var(--tpl-col12);
  color: var(--tpl-fg12);
}
body #tapeform option[value=col13],
body #tapeform [data-value=col13],
body #tapeform #preview [data-col=col13],
body #tapeform .col13 {
  background-color: var(--tpl-col13);
  color: var(--tpl-fg13);
}
body #tapeform option[value=col14],
body #tapeform [data-value=col14],
body #tapeform #preview [data-col=col14],
body #tapeform .col14 {
  background-color: var(--tpl-col14);
  color: var(--tpl-fg14);
}
body #tapeform option[value=col15],
body #tapeform [data-value=col15],
body #tapeform #preview [data-col=col15],
body #tapeform .col15 {
  background-color: var(--tpl-col15);
  color: var(--tpl-fg15);
}
body #tapeform option[value=col16],
body #tapeform [data-value=col16],
body #tapeform #preview [data-col=col16],
body #tapeform .col16 {
  background-color: var(--tpl-col16);
  color: var(--tpl-fg16);
}
body #tapeform option[value=col17],
body #tapeform [data-value=col17],
body #tapeform #preview [data-col=col17],
body #tapeform .col17 {
  background-color: var(--tpl-col17);
  color: var(--tpl-fg17);
}
body #tapeform option[value=col18],
body #tapeform [data-value=col18],
body #tapeform #preview [data-col=col18],
body #tapeform .col18 {
  background-color: var(--tpl-col18);
  color: var(--tpl-fg18);
}
body #tapeform option[value=col19],
body #tapeform [data-value=col19],
body #tapeform #preview [data-col=col19],
body #tapeform .col19 {
  background-color: var(--tpl-col19);
  color: var(--tpl-fg19);
}
body #tapeform option[value=col20],
body #tapeform [data-value=col20],
body #tapeform #preview [data-col=col20],
body #tapeform .col20 {
  background-color: var(--tpl-col20);
  color: var(--tpl-fg20);
}

#tapeform {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
  background: rgba(0, 0, 0, 0.25);
  padding: 2.5rem;
  border-radius: 1rem;
}
#tapeform label {
  display: block;
}
#tapeform select {
  width: auto;
}
#tapeform .colorbar {
  display: flex;
}
#tapeform .colorbar button {
  flex-grow: 1;
  height: 2.5rem;
  min-width: 0.5rem;
  margin: 0;
  cursor: pointer;
  border: none;
  z-index: 0;
}
#tapeform .colorbar button.active {
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(0, 0, 0, 0.5), inset 0 0 2px 1px rgba(0, 0, 0, 0.75);
  z-index: 10;
  border-left: none !important;
}
@media (max-width: 768px) {
  #tapeform .colorbar button {
    height: 1.5rem;
  }
}
#tapeform .colorbar button + button {
  border-left: solid 1px rgba(0, 0, 0, 0.1);
}
#tapeform .colorsel button {
  text-shadow: none;
  border: solid 2px rgba(255, 255, 255, 0.5);
}
#tapeform .colorsel button span {
  opacity: 0;
  color: rgba(0, 0, 0, 0.5);
}
#tapeform .colorsel button[data-value="9"] span {
  color: rgba(255, 255, 255, 0.5);
}
#tapeform .colorsel button.active span {
  opacity: 1;
}
#tapeform .colorsel button:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}
#tapeform [data-value="0"], #tapeform #preview .editable[data-col="0"], #tapeform .col0 {
  background: #fe3f3f;
}
#tapeform [data-value="1"], #tapeform #preview .editable[data-col="1"], #tapeform .col1 {
  background: #ff6600;
}
#tapeform [data-value="2"], #tapeform #preview .editable[data-col="2"], #tapeform .col2 {
  background: #ffcc00;
}
#tapeform [data-value="3"], #tapeform #preview .editable[data-col="3"], #tapeform .col3 {
  background: #3fcb3f;
}
#tapeform [data-value="4"], #tapeform #preview .editable[data-col="4"], #tapeform .col4 {
  background: #00cbb2;
}
#tapeform [data-value="5"], #tapeform #preview .editable[data-col="5"], #tapeform .col5 {
  background: #4c4ce5;
}
#tapeform [data-value="6"], #tapeform #preview .editable[data-col="6"], #tapeform .col6 {
  background: #cb65e5;
}
#tapeform [data-value="7"], #tapeform #preview .editable[data-col="7"], #tapeform .col7 {
  background: #ffffff;
}
#tapeform [data-value="8"], #tapeform #preview .editable[data-col="8"], #tapeform .col8 {
  background: #b2b2b2;
}
#tapeform [data-value="9"], #tapeform #preview .editable[data-col="9"], #tapeform .col9 {
  background: #000000;
  color: #fff;
}
#tapeform #preview {
  background: #fff;
  padding: 2rem;
  margin: 2rem 0;
}
#tapeform #preview .preview-wrapper {
  border: solid 1px #000;
}
#tapeform #preview > div {
  width: 100%;
}
#tapeform #preview .preview-name {
  height: 2rem;
  border-bottom: solid 2px #000;
  color: #000;
  line-height: 2rem;
  font-size: 2rem;
  display: flex;
}
@media (max-width: 768px) {
  #tapeform #preview .preview-name {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
#tapeform #preview .preview-name input, #tapeform #preview .preview-name span {
  flex-grow: 1;
  text-align: center;
  font-family: helvetica, arial black, sans serif;
  font-weight: 700;
}
#tapeform #preview .preview-name input:last-child, #tapeform #preview .preview-name span:last-child {
  background: #000;
  color: #fff;
}
#tapeform #preview .preview-name input:not(:last-child), #tapeform #preview .preview-name span:not(:last-child) {
  cursor: text;
}
#tapeform #preview .preview-name input.editable, #tapeform #preview .preview-name span.editable {
  min-width: 1em;
  outline: none;
  caret-color: transparent;
  z-index: 1;
}
#tapeform #preview .preview-name input.editable:focus, #tapeform #preview .preview-name span.editable:focus {
  background: var(--primary);
  color: #fff !important;
  box-shadow: 0 0 0 8px var(--primary), 0 0 0 9px rgba(0, 0, 0, 0.75);
  z-index: 10;
}
#tapeform #preview .preview-name input.editable:hover, #tapeform #preview .preview-name span.editable:hover {
  background: var(--primary);
  color: #fff !important;
}
#tapeform #preview .preview-name input #lto_type, #tapeform #preview .preview-name span #lto_type {
  min-width: 2em;
}
#tapeform #preview .preview-barcode {
  max-height: 4rem;
  height: 4rem;
  overflow: hidden;
  text-align: center;
}
#tapeform #preview .preview-barcode img {
  width: 100%;
  padding-left: 7%;
  padding-right: 7%;
}
#tapeform #preview .preview-barcode span {
  font-family: "Libre Barcode 39";
  color: #000;
  background: #fff;
  font-size: 6.7rem;
  line-height: 4rem;
  margin-top: 0;
  display: inline-block;
  transform: scale(1, 2);
  margin-top: 4rem;
}
@media (max-width: 768px) {
  #tapeform #preview .preview-barcode span {
    font-size: 5rem;
    margin-top: 2rem;
  }
}
#tapeform #preview .preview-footer {
  display: none;
}
#tapeform #preview[data-type=DLT] #lto_type {
  display: none;
}
#tapeform #preview[data-type=DLT] .preview-name {
  height: 3rem;
  line-height: 3rem;
  font-size: 3rem;
  border-bottom: solid 3px #000;
}
#tapeform #preview[data-type=DLT] .preview-barcode {
  max-height: 3.64rem;
  height: 3.64rem;
  border-bottom: solid 3px #000;
}
#tapeform #preview[data-type=DLT] .preview-footer {
  display: block;
  height: 2.8rem;
}
#tapeform #preview[data-type=DLT] .preview-footer div {
  height: 2.1rem;
  border-bottom: solid 1px #000;
}
#tapeform .flex-row {
  display: flex;
  align-items: flex-end;
}
#tapeform .flex-row > div {
  flex-grow: 0;
}
#tapeform .flex-row > div:nth-child(3) {
  padding-left: 1rem;
}
#tapeform #num_pages {
  width: 6rem;
}

span.editable {
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  -ms-user-select: all !important;
}
span.editable::-moz-selection {
  background: rgba(255, 255, 255, 0) !important;
}
span.editable::-webkit-selection {
  background: rgba(255, 255, 255, 0) !important;
}
span.editable::selection {
  background: rgba(255, 255, 255, 0) !important;
}