@charset "UTF-8";
/*************************************
	Variables
*************************************/
/*************************************
	MIXINS
*************************************/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  table,
  #table {
    margin-right: 0;
    margin-left: 0;
    border: 0;
    display: block !important;
    overflow: hidden; }

  div#table {
    padding-left: 8px;
    padding-right: 8px; }

  .container {
    padding: 0 4px; }

  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: inline-block !important;
    overflow: hidden; }

  .col-auto {
    width: 100%;
    display: block;
    overflow: hidden; }

  .table_scan {
    /* Hide table headers (but not display: none;, for accessibility) */
    /*
	Label the data
	*/ }
    .table_scan thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px; }
    .table_scan tr {
      margin-bottom: 34px; }
    .table_scan td {
      /* Behave  like a "row" */
      border: none;
      position: relative;
      padding-left: 40% !important;
      text-align: left !important;
      padding-top: 2px !important;
      padding-bottom: 2px !important;
      min-height: 30px !important;
      float: left;
      width: 100%; }
      .table_scan td:first-of-type {
        border-top: 0 !important; }
    .table_scan td:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 6px;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
      font-weight: 700;
      padding-top: 2px !important;
      padding-bottom: 2px !important;
      margin-top: -6px; }
    .table_scan .save-data {
      padding-top: 4px !important; }
    .table_scan td:nth-of-type(1):before {
      content: "Löschen"; }
    .table_scan td:nth-of-type(2):before {
      content: "Store/MA/RNr."; }
    .table_scan td:nth-of-type(3):before {
      content: "EAN"; }
    .table_scan td:nth-of-type(4):before {
      content: "ANr."; }
    .table_scan td:nth-of-type(5):before {
      content: "Artikel"; }
    .table_scan td:nth-of-type(6):before {
      content: "#Soll"; }
    .table_scan td:nth-of-type(7):before {
      content: "#Ist"; }
    .table_scan td:nth-of-type(8) {
      cursor: pointer;
      margin-top: 14px;
      background-color: #fff !important;
      border-radius: 6px;
      border: 2px #8ec037 solid !important;
      padding-top: 8px !important;
      padding-bottom: 8px !important; }
      .table_scan td:nth-of-type(8) img {
        width: 40px !important; } }
a.icon {
  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s; }
  a.icon:hover span {
    opacity: 0.4;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s; }

.file-upload {
  background-image: url("data:image/svg+xml,%3Csvg version='1.2' baseProfile='tiny' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 384 512' xml:space='preserve'%3E%3Cpath fill='%238EC037' d='M224,136V0H24C10.7,0,0,10.7,0,24v464c0,13.3,10.7,24,24,24h336c13.3,0,24-10.7,24-24V160H248 C234.8,160,224,149.2,224,136z M289.2,352H224v80c0,8.8-7.2,16-16,16h-32c-8.8,0-16-7.2-16-16v-80H94.8c-14.3,0-21.4-17.3-11.3-27.4 L180,229c6.6-6.6,17.4-6.6,24,0l96.4,95.7C310.6,334.7,303.5,352,289.2,352z M377,105L279.1,7c-4.5-4.5-10.6-7-17-7H256v128h128 v-6.1C384,115.6,381.5,109.5,377,105z'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 20px;
  height: 30px;
  margin: 32px 0 0 6px;
  display: inline-block; }

.refresh {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M483.515 28.485L431.35 80.65C386.475 35.767 324.485 8 256 8 123.228 8 14.824 112.338 8.31 243.493 7.971 250.311 13.475 256 20.301 256h28.045c6.353 0 11.613-4.952 11.973-11.294C66.161 141.649 151.453 60 256 60c54.163 0 103.157 21.923 138.614 57.386l-54.128 54.129c-7.56 7.56-2.206 20.485 8.485 20.485H492c6.627 0 12-5.373 12-12V36.971c0-10.691-12.926-16.045-20.485-8.486zM491.699 256h-28.045c-6.353 0-11.613 4.952-11.973 11.294C445.839 370.351 360.547 452 256 452c-54.163 0-103.157-21.923-138.614-57.386l54.128-54.129c7.56-7.56 2.206-20.485-8.485-20.485H20c-6.627 0-12 5.373-12 12v143.029c0 10.691 12.926 16.045 20.485 8.485L80.65 431.35C125.525 476.233 187.516 504 256 504c132.773 0 241.176-104.338 247.69-235.493.339-6.818-5.165-12.507-11.991-12.507z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #fff;
  padding: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-size: 20px 16px;
  width: 28px;
  height: 24px;
  display: inline-block; }

.icon {
  padding: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  display: block;
  float: right;
  color: green;
  -webkit-transition: all 0.1s ease-in-out 0s;
  -moz-transition: all 0.1s ease-in-out 0s;
  -ms-transition: all 0.1s ease-in-out 0s;
  -o-transition: all 0.1s ease-in-out 0s;
  transition: all 0.1s ease-in-out 0s; }
  .icon:hover {
    -webkit-transition: all 0.1s ease-in-out 0s;
    -moz-transition: all 0.1s ease-in-out 0s;
    -ms-transition: all 0.1s ease-in-out 0s;
    -o-transition: all 0.1s ease-in-out 0s;
    transition: all 0.1s ease-in-out 0s;
    transform: scale(1.1); }
  .icon > * {
    display: inline-block; }
  .icon.wordpress {
    margin-top: -2px; }
    .icon.wordpress i {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119.3 8 8 119.2 8 256c0 136.7 111.3 248 248 248s248-111.3 248-248C504 119.2 392.7 8 256 8zM33 256c0-32.3 6.9-63 19.3-90.7l106.4 291.4C84.3 420.5 33 344.2 33 256zm223 223c-21.9 0-43-3.2-63-9.1l66.9-194.4 68.5 187.8c.5 1.1 1 2.1 1.6 3.1-23.1 8.1-48 12.6-74 12.6zm30.7-327.5c13.4-.7 25.5-2.1 25.5-2.1 12-1.4 10.6-19.1-1.4-18.4 0 0-36.1 2.8-59.4 2.8-21.9 0-58.7-2.8-58.7-2.8-12-.7-13.4 17.7-1.4 18.4 0 0 11.4 1.4 23.4 2.1l34.7 95.2L200.6 393l-81.2-241.5c13.4-.7 25.5-2.1 25.5-2.1 12-1.4 10.6-19.1-1.4-18.4 0 0-36.1 2.8-59.4 2.8-4.2 0-9.1-.1-14.4-.3C109.6 73 178.1 33 256 33c58 0 110.9 22.2 150.6 58.5-1-.1-1.9-.2-2.9-.2-21.9 0-37.4 19.1-37.4 39.6 0 18.4 10.6 33.9 21.9 52.3 8.5 14.8 18.4 33.9 18.4 61.5 0 19.1-7.3 41.2-17 72.1l-22.2 74.3-80.7-239.6zm81.4 297.2l68.1-196.9c12.7-31.8 17-57.2 17-79.9 0-8.2-.5-15.8-1.5-22.9 17.4 31.8 27.3 68.2 27.3 107 0 82.3-44.6 154.1-110.9 192.7z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center center;
      background-color: #fff;
      background-size: contain;
      width: 24px;
      height: 24px;
      margin: 12px 0 0 6px; }
  .icon.view {
    padding-top: 0;
    margin-top: 14px; }
    .icon.view i {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center center;
      background-repeat: no-repeat;
      background-color: #fff;
      background-size: contain;
      width: 24px;
      height: 24px;
      padding-top: 0;
      margin: 0 0 0 6px; }
  .icon.bgg {
    margin-top: 7px; }
    .icon.bgg i {
      background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 25.4 37.9' viewBox='0 0 25.4 37.9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='m24.9 7-3.8 1 3.7-8-23.9 8.8 1.3 10.5-2.2 2.2 6.6 16.5 14-5.2 4.9-11.4-2.1-2z' fill='%23ff5100' fill-rule='evenodd'/%3E%3C/svg%3E");
      background-color: #fff;
      background-repeat: no-repeat;
      background-size: contain;
      width: 28px;
      height: 28px;
      padding-top: 0;
      margin: 0 0 0 6px; }
  .icon.bggv {
    margin-top: 7px; }
    .icon.bggv i {
      background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 25.4 37.9' viewBox='0 0 25.4 37.9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='m23.3 19.4 1.6-12.4-3.8 1 3.7-8-23.9 8.8 1.3 10.5-2.2 2.2 6.6 16.5 14-5.2 4.9-11.4zm-2.5-5.2-1.5.2-5.4 14.6h-3.7l-5.4-14.6-1.5-.2v-2h6.7v2l-1.4.2 3.2 10.1.2.9h.1l.2-.9 3.2-10.1-1.4-.2v-2h6.6v2z' fill='%23ff5100' fill-rule='evenodd'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: contain;
      width: 28px;
      height: 28px;
      padding-top: 0;
      margin: 0 0 0 6px; }

hr {
  margin-top: 14px;
  margin-bottom: 14px; }

.hidden {
  display: none; }

.total_price {
  text-align: right; }

#about,
.nav.navbar {
  display: block; }

body {
  font-family: system-ui;
  text-align: left;
  background-color: #333;
  color: #fff; }

.hidden {
  display: none; }

.glyphicon {
  color: #fff; }

.total_price {
  text-align: right; }

#about,
.nav.navbar {
  display: block; }

.hide {
  display: none; }

table {
  text-align: left; }

.total td:eq(4) {
  text-align: right; }

.overlay__close {
  display: block;
  float: left; }

input {
  color: #333; }

/*.container {width:80%; text-align-center;}
*/
.overlay {
  position: fixed;
  width: 280px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  /* Negative half of height. */
  margin-left: -140px;
  /* Negative half of width. */ }
  .overlay video {
    width: 280px; }

#ean_input {
  margin-top: 12px;
  margin-bottom: 20px;
  padding: 4px; }

td.editable {
  background-color: #e3f0f7; }

#settings {
  background-color: #444;
  color: #fff;
  padding: 6px 6px 0;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px; }
  #settings a {
    color: #fff;
    font-weight: 500;
    padding-left: 6px;
    padding-right: 6px;
    display: inline-block; }
  #settings select,
  #settings input {
    color: #fff;
    min-height: 30px;
    background-color: #666;
    border: 0;
    margin-bottom: 6px; }
    #settings select::placeholder,
    #settings input::placeholder {
      color: #9d9d9d;
      opacity: 1;
      /* Firefox */ }
  #settings input {
    width: 110px; }
  #settings #videoSource {
    width: calc(100% - 30px);
    margin-bottom: 6px; }

.process_line {
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  padding: 9px 0; }
  .process_line.line_not_processed::before {
    color: #9f4b4b;
    content: "unbearbeitet"; }
  .process_line.line_processed::before {
    color: #568356;
    content: "bearbeitet"; }

#scanner {
  width: 240px;
  height: 240px;
  display: block;
  margin: 0 auto 12px; }

#dummy-output {
  padding: 16px;
  background-color: #eee; }

.save-data img {
  width: 24px;
  height: 20px; }
  .save-data img.ic_failed, .save-data img.ic_success {
    width: 24px; }

.hidden {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important; }

.select {
  position: relative; }

.led-container {
  background-size: cover;
  padding: 0;
  display: inline-block;
  float: right;
  position: absolute;
  right: 2px;
  top: -7px; }
  .led-container .led-box {
    height: 20px;
    width: 25%;
    margin: 10px 0;
    float: left; }
  .led-container .led-box p {
    font-size: 12px;
    text-align: center;
    margin: 1em; }
  .led-container .led-green {
    transform: scale(0.5);
    margin: 0 auto;
    width: 24px;
    height: 24px;
    background-color: #ABFF00;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px; }
  .led-container .led-grey {
    transform: scale(0.5);
    margin: 0 auto;
    width: 24px;
    height: 24px;
    background-color: #666;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #999 0 -1px 9px, #aaa 0 2px 12px; }
  .led-container .led-red {
    transform: scale(0.5);
    margin: 0 auto;
    width: 24px;
    height: 24px;
    background-color: #e00;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px; }

.reading_progress {
  width: 350px;
  margin: 14px auto 0; }
  .reading_progress .progress_number p {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #546de5;
    margin: 0;
    text-align: right; }
  .reading_progress .progress_inner {
    margin-bottom: 30px; }
  .reading_progress .bar_container {
    width: 100%;
    height: 10px;
    border-radius: 30px;
    background: #dcdde1; }
  .reading_progress .progress_bar {
    width: 0%;
    border-radius: 30px;
    height: 10px;
    background: #d9534f; }

.single-filter {
  border-right: 1px solid #999;
  padding: 6px 20px 6px 14px;
  display: inline-block; }
  .single-filter:first-of-type {
    padding-left: 0; }
  .single-filter:last-of-type {
    border: 0; }

.resultstable tr {
  background-color: #333; }
  .resultstable tr:hover td {
    background-color: #20454a !important; }
  .resultstable tr.marked td {
    background-color: #4a2920 !important; }
  .resultstable tr td.green {
    font-weight: 700;
    background-color: #334433; }
.resultstable tr:nth-of-type(2n+2) {
  background-color: #222; }
.resultstable .delete_line {
  font-weight: 700;
  color: #d9534f;
  cursor: pointer; }

.get_results, .calc_diffs {
  float: right;
  margin-right: 12px; }

.page-auswertung_alt {
  background-color: #1e1922; }
  .page-auswertung_alt .resultstable td.purple {
    background-color: #435; }

.input-field button {
  font-weight: 600; }
  .input-field button.scan {
    background-color: #666; }

#canvas {
  display: none; }
  #canvas + .output {
    display: inline-block;
    width: 1px;
    height: 1px;
    overflow: hidden; }

.button_container {
  text-align: center;
  padding: 4px 0;
  width: 100%; }
  .button_container #startbutton {
    display: block;
    width: 90%;
    margin: 0 auto;
    padding: 14px 12px;
    background-color: #666;
    color: #ffffff;
    border-radius: 6px;
    opacity: 1; }
    .button_container #startbutton:hover, .button_container #startbutton:active {
      text-decoration: none; }
    .button_container #startbutton.inactive {
      opacity: 0.5; }

.scan_status {
  display: block;
  margin-top: 24px !important;
  text-align: center;
  background-color: #333;
  padding: 12px 6px 4px;
  min-width: 70%;
  max-width: 300px;
  margin: 0 auto; }
  .scan_status.error {
    background-color: #d9534f; }

.single-result {
  display: block;
  overflow: hidden;
  margin-bottom: 2em; }
  .single-result .single-row {
    display: inline-block;
    width: 100%;
    border-top: 1px solid #ddd;
    font-size: 1em; }
    .single-result .single-row:nth-of-type(2n+1) {
      background-color: #444; }
    .single-result .single-row .left, .single-result .single-row .right {
      display: inline-block;
      padding: 3px 0; }
    .single-result .single-row .left {
      width: 106px;
      font-weight: 600;
      padding-left: 10px;
      font-size: 80%;
      padding-top: 5px; }
    .single-result .single-row .right {
      min-width: calc( 100% - 110px );
      float: right;
      padding-left: 10px; }
    .single-result .single-row .full {
      text-align: center; }
    .single-result .single-row .save-data {
      cursor: pointer;
      margin-top: 22px;
      background-color: #d9534f !important;
      border-radius: 4px;
      border: 1px #d43f3a solid !important;
      padding-top: 8px !important;
      padding-bottom: 8px !important; }
      .single-result .single-row .save-data img {
        width: 40px !important; }
      .single-result .single-row .save-data.success {
        background-color: #222 !important;
        border: 1px #000 solid !important; }
    .single-result .single-row.editable .right {
      background-color: #1e6287; }
    .single-result .single-row.delete_line .right {
      font-weight: 700;
      color: #d9534f;
      cursor: pointer; }

.the-filters select, .the-filters input {
  background-color: #333; }