html, button, input, select, textarea {
    color: #222;
}
html, body {
    margin:0;
    padding:0;
    height: 100%;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size:12px;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

* {box-sizing:border-box}

h2, h3 {
    font-weight: 500;
    font-family: 'Roboto Condensed';
}

h2 {font-size:18px;}
h3 {font-size:16px;}

.btn {
color: #fff;
background-color: #007bff;
border-color: #007bff;
display: block;
    width: 100%;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn:not([disabled]):not(.disabled) {
    cursor: pointer;
}

table#items {border-collapse: separate;border-spacing: 5px 10px;border: none;contain: strict;}
table#items tr {min-height:28px;height:28px}
table#items td {background-color:#eee;padding:5px 10px;height:48px;}
table#items td.size {text-align:center;width:48px;padding:0;background:none}
table#items td.fbsfbo {font-size:10px;background-color:#fff;line-height:40px;width:30px;padding:0;text-align:center}
table#items td.total, table#items td.factory {background-color:#fff;padding:0;}
table#items td.total .total-grid, table#items td.factory .factory-grid {display:grid;height:80px;gap:2px;max-width:102px}
table#items td.left, table#items td.inway {padding:0;background:none;position:relative}
table#items td.left .left-flex, table#items td.inway .inway-flex {display:flex;justify-content:flex-start;align-items:flex-end;height:100%}
table#items td.inway .inway-flex {flex-direction:column;justify-content:space-between}

table#items td.factory .factory-grid div {display:flex;justify-content:center;align-items:center;}
.factory-paid {grid-column-start:1;grid-column-end:1;grid-row-start:1;grid-row-end:1;text-align:center;justify-self:center;padding:3px;width:50px;font-size:14px;background-color:#EAD4D4}
.factory-prozent-paid {grid-column-start:1;grid-column-end:1;grid-row-start:2;grid-row-end:2;justify-self:center;text-align:center;width:50px;font-size:16px;font-weight: 500;background-color:#EAD4D4}
.factory-div {grid-column-start:2;grid-column-end:2;grid-row-start:1;grid-row-end:2;width:0px;background-color:#F0EAE0}
.factory-sold {grid-column-start:3;grid-column-end:3;grid-row-start:1;grid-row-end:1;text-align:center;justify-self:center;width:50px;padding:3px;font-size:14px;background-color:#CEE0E6}
.factory-prozent {grid-column-start:3;grid-column-end:3;grid-row-start:2;grid-row-end:2;justify-self:center;text-align:center;width:50px;font-size: 16px;font-weight: 500;background-color:#CEE0E6}
.factory-made {grid-column-start:1;grid-column-end:4;grid-row-start:3;grid-row-end:3;text-align:center;justify-self:center;padding:3px;font-size:14px;width:100%;background-color:#C6B4D8}

table#items tr.last td.article {visibility:hidden}

table#items td.inway .inway {display:flex;align-items:flex-end;height:80px;position:relative;width:100%}
table#items td.inway .inway-numbers {position:absolute;top:5px;right:5px;color:#A71666;font-weight:500;font-size:16px}
table#items tr.last td.inway .inway {align-items:center;}
table#items tr.last td.inway .inway-numbers {position:relative;top:auto;right:auto;width:100%;font-size:20px;text-align:center;}

.total-fbs, .total-fbo, .total-art {width:48px;justify-content:center;display: flex;align-items: center;}
.total-fbs {grid-column-start:1;grid-column-end:1;grid-row-start:1;grid-row-end:1;}
.total-fbo {grid-column-start:1;grid-column-end:1;grid-row-start:2;grid-row-end:2;}
.total-art {grid-column-start:2;grid-column-end:2;grid-row-start:1;grid-row-end:3;font-size:16px;font-weight:500}

.qty {font-size:14px;justify-content: center;;display: flex;align-items: center}
.qty-empty {}
.qty-grey {background-color: #ccc !important;}
.qty-no {background-color: #aa0000 !important; color:#fff; font-weight:600}
.qty-red {background-color: #ffa0a0 !important}
.qty-yellow {background-color: #ffffa0 !important}
.qty-green {background-color: #a0ffa0 !important}
.qty-1x {height:100%;}
.qty-2x {height:calc(50% - 1.5px)}
.qty-fbs.qty-2x {margin-bottom:3px}
.qty-fbw.qty-2x {margin-top:3px;position:relative}

.hidden {display: none!important;}
.hidden-invisible {display: none!important;opacity: 0!important;}
.visible {opacity: 1!important;}
.active {display: block!important;}

#spinner-wrap {position: fixed;width: 100%;height:100%;display: flex;align-items: center;top: 0;background: rgba(20, 20, 20, 0.8);z-index:2000;}
.pl, .pl:before, .pl:after {
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.pl {
    margin: 0 auto 1.5em auto;
    position: relative;
    width: 3em;
    height: 3em;
}
.pl:before, .pl:after {
    background: #aaa;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    transform-origin: 50% 100%; 
    clip-path: polygon(0 0,100% 0,50% 100%);
    -webkit-clip-path: polygon(0 0,100% 0,50% 100%);
}
.pl-origami {
    animation-name: origamiA;
    animation-timing-function: steps(4);
}
.pl-origami:before, .pl-origami:after {
    clip-path: polygon(50% 0,100% 100%,0% 100%);
    -webkit-clip-path: polygon(50% 0,100% 100%,0% 100%);
}
.pl-origami:before {
    animation-name: origamiB;
}
.pl-origami:after {
    animation-name: origamiC;
    transform: rotate(180deg);
}
@keyframes origamiA {
    from { transform: rotate(0) }
    to { transform: rotate(-360deg) }
}
@keyframes origamiB {
    from, 25%, 50%, 75%, to { opacity: 1; transform: translateZ(0) rotateX(0deg) }
    12.5%, 62.5% { opacity: 1; transform: translateZ(1px) rotateX(-180deg) }
    37.5%, 87.5% { opacity: 0; transform: translateZ(0) rotateX(0deg) }
}
@keyframes origamiC {
    from, 25%, 50%, 75%, to { opacity: 1; transform: translateZ(0) rotateZ(180deg) rotateX(0deg) }
    12.5%, 62.5% { opacity: 0; transform: translateZ(0) rotateZ(180deg) rotateX(0deg) }
    37.5%, 87.5% { opacity: 1; transform: translateZ(1px) rotateZ(180deg) rotateX(-180deg) }
}

#eventsdiv {font-size:14px}
#eventsdiv input, #eventsdiv select, #eventsdiv button {font-size:14px;padding:7px}
#eventsdiv button {background:#36F;color:#FFFFFF;border:solid 1px #36F; cursor:pointer}
#eventstable {font-family: 'Roboto Mono', monospace;margin-top:20px}
#eventstable td {padding:15px 20px 15px 0}