@font-face {
		font-family: 'aeromatics_b'; 
		src: url('/inc/aeromatics/b.eot'); 
		src: url('/inc/aeromatics/b.eot?#iefix') format('embedded-opentype'), 
			 url('/inc/aeromatics/b.woff') format('woff'), 
			 url('/inc/aeromatics/b.ttf') format('truetype')
	}

html {height: 100%}
body {font-family: arial, sans-serif; background: #ddd; display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; margin: 0; padding: 0 5%; box-sizing: border-box}
body > * {width: 100%}
a {color: blue}
header > * {border: 0px dashed blue; box-sizing: border-box}
header {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 80px}
footer {padding: 20px 0; height: 50px; font-size: 70%; color: gray}
input, textarea, select {font-family: arial, sans-serif; font-size: 100%}

#balance {font-weight: normal; font-size: 130%; line-height: 1}
#balance.negative {}
#balance.negative span:nth-child(1) {margin: 0 0 0 -7px}
#balance.negative div {}
#balance span:nth-child(2) {margin: 0 0 0 5px; font-weight: normal; font-size: 60%; color: #aaa}
#balance div {position: absolute; font-weight: normal; font-size: 60%; opacity: 0}
nav {display: flex; flex-wrap: wrap; justify-content: flex-end}
nav > * {display: flex; align-items: center; padding: 4px 12px; margin: 0 5px 0 5px; background: #eee; color: #000; border-radius: 25px; text-decoration: none}
nav > *:hover {background: white; cursor: pointer}
nav #count {display: inherit; width: 26px; height: 26px; margin: 0 8px 0 -8px; justify-content: center; align-items: center; background: teal; color: white; border-radius: 25px}
nav #count.exist {background: tomato}
nav .current {background: teal; color: white}
nav .current #count {background: white; color: teal}
#logout {width: 34px; height: 34px; padding: 0; justify-content: center; align-items: center; font-size: 110%; color: teal}
#logout:before {content: "✖"}
#logout:hover {background: #000; color: #fff}

#logo a {min-width: 150px; display: flex; align-items: center; float: left; font-weight: bold; font-size: 90%; line-height: 1; color: teal; text-decoration: none}
#logo svg {width: 50px; margin: 0 12px 0 0}
#logo path {fill: teal}
#logo a:hover {color: #b02}
#logo a:hover path {fill: #b02}
#user {float: right; text-align: right}

body.login {height: 100%; padding: 10px 35%; align-items: center}
body.m {height: 100%; padding: 10px 5%; align-items: center}
body.m h1 {font-size: 150%; border: 0px dashed silver; box-sizing: border-box}


#login input[type=submit], #login input[type=text], #login input[type=password] {width: 100%; margin: 0 0 15px 0; padding: 12px 15px; font-family: arial, sans-serif; background: white; border: none; box-sizing: border-box; font-size: 130%}
#login input[type=submit] {width: auto; float: right; background: teal; color: white}
#login input[type=submit]:hover {background: #b02}
#login div#remembered {float: left; font-size: 100%; margin: 15px 0 0 0}
#login div#remembered input {margin: 0 5px 0 15px}
#login div.error {font-size: 110%; font-weight: bold; color: red; margin: 0 0 15px 0}

.group {height: 50px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; background: #c3c3c3; margin: 1px 0 0 0; font-weight: normal; border-left: 4px solid teal; box-sizing: border-box; cursor: default}
.group:hover {background: #bbb}
.group div:nth-child(1) {padding: 0px 15px; flex-grow: 1; font-size: 130%}
.group span {font-weight: normal; color: #fff; opacity: 0.5}
.group div:nth-child(2) {color: cadetblue; font-weight: normal; font-size: 90%}
.group div:nth-child(3) {float: right; width: 50px; height: 50px; background-image: url(update.svg); background-repeat: no-repeat; background-position: center center; background-size: 20px; cursor: pointer}
.group b {color: teal}
.group .nexus {margin: 0 15px}
.group .nexus a {color: black}

span.status {background: black; font-size: 100%; padding: 5px 10px; margin: 0 15px; opacity: 1}
span.status.z2c0c9eed-56c9-11e9-9ff4-3150001c1b12 {/* Новый */ background: DarkOrange}
span.status.z2c0ca0e3-56c9-11e9-9ff4-3150001c1b13 {/* Подтвержден */ background: LimeGreen}
span.status.z6313f0d6-7878-11e9-9107-504800029bf7 {/* Предоплата */ background: LimeGreen}
span.status.z2c0ca2f2-56c9-11e9-9ff4-3150001c1b15 {/* Отгружен и не оплачен */ background: MediumVioletRed}
span.status.z2c0ca20c-56c9-11e9-9ff4-3150001c1b14 {/* Резерв */ background: MediumVioletRed}

#total_cost {padding: 8px 0; font-weight: bold; font-size: 135%; color: black}
#blank {display: none; position: absolute; left: 0; bottom: 0; width: 100%; height: 216px; border-top: 1px solid #d5d5d5; background: repeating-linear-gradient(-60deg, #d5d5d5, #d5d5d5 1px, #eee 1px, #eee 5px)}
#vat {font-size: 80%; color: #888; margin: 5px 0 20px 0}
#order_error {float: left; width: 78%; padding: 12px 0 12px 5%; font-weight: normal; color: tomato; box-sizing: border-box}

.updated {transform: rotate(2880deg); transition: transform 10s ease-out}

table {width: 100%; font-size: 100%; border-collapse: collapse}
.list {background: #eee; box-shadow: 0 0 20px #aaa}
.list thead {box-shadow: 0 3px 5px #ccc}
.list thead th {font-size: 75%; color: gray; text-shadow: 1px 1px 0px white; border-top: 1px solid #fff; border-left: 1px solid #ccc; border-bottom: 1px solid #bbb; background-image: linear-gradient(transparent 25%, #ccc)}
.list thead .num {width: 8%}
.list th, .list tbody td {padding: 12px; font-weight: normal; text-align: left; vertical-align: top; box-sizing: border-box}
.list thead th {padding: 5px 12px}
.list tbody tr:first-child {background-image: linear-gradient(#ddd, transparent 6%)}
.list tbody tr.selected:first-child {background-image: linear-gradient(#ccc, transparent 6%)}
.list tbody td {border-top: 1px solid #ccc; border-left: 1px dotted #eee}
.list tbody th:first-child {border-left: none}
.list tbody td:first-child {border-left: none}
.list tbody {background: white}
.list tbody tr.selected {background: cornsilk}
.list .cart {width: 3%; border-left: 1px solid transparent; cursor: pointer}
.list tbody tr:hover .cart:not(.selected) {background-image: url(cart0.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: 20px}
.list tbody tr:hover .cart:hover, .list .cart.selected {background-image: url(cart.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: 20px}
.list tbody {box-shadow: 0 1px 4px #ccc}
.list tfoot {border-bottom: 1px solid #ccc}
.list tfoot tr {}
.list tfoot th:nth-child(2) {padding: 20px 0 40px 12px}

.list tfoot .sticker {float: left; margin: 5px 0 0 0; font-family: 'aeromatics_b'; font-size: 100%; padding: 5px 8px; font-weight: normal; clear: both}
.list tfoot #payed.sticker {color: LimeGreen; border: 1px solid LimeGreen; transform: rotate(0deg)}
.list tfoot #shipped.sticker {color: MediumVioletRed; border: 1px solid MediumVioletRed; transform: rotate(0deg)}
.list tfoot h2 {font-size: 100%; margin: 0; padding: 20px 0 5px 0; font-weight: normal; clear: both}
.list tfoot input[type=text], .list tfoot select, .list tfoot textarea {width: 100%; height: 38px; font-size: 100%; background: white; border: 1px solid #ccc; padding: 9px 10px; box-sizing: border-box}
.list tfoot input[type=button] {float: left; margin: 0 0 0 0; padding: 10px 15px; border: none; background: teal; color: white; border-radius: 25px; cursor: pointer; box-sizing: border-box}
.list tfoot input[type=button]:hover {background: black}
.list tfoot input[type=button]:disabled {background: #bbb; cursor: default}
.list tfoot .num {width: 10%; border-left: 1px solid #ddd}
.list td.amount {position: relative; width: 130px; padding: 0; text-align: center}
.list td.amount input {width: 60px; margin: 0 auto; font-size: 100%; text-align: center; font-weight: normal; color: black; font-family: inherit; padding: 12px 0; border: none; background: transparent; outline: none; -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; box-sizing: border-box}
.list td.amount input.red {font-weight: bold; color: tomato}
.list .scale {width: 30px; height: 36px; background: transparent; padding: 0; font-size: 70%; color: silver; cursor: default; text-align: center; vertical-align: middle}
.list .scale:hover {background: transparent; font-size: 130%; color: teal}
.list td.amount div {position: absolute; top: 3px; user-select: none; -moz-user-select: none; -khtml-user-select: none; display: flex; justify-content: center; align-items: center;}
.list td.amount div:nth-child(1) {left: 1px}
.list td.amount div:nth-child(3) {right: 0px}
.list .sum {width: 6%}
.list .del {width: 40px; padding: 0; color: #aaa; text-align: center; vertical-align: middle; border-left: 1px solid transparent}
.list .del:hover {color: tomato; font-size: 140%; cursor: pointer}
.list input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0}
tr.edge td {padding: 0; height: 20px}
tr.edge td:first-child {padding: 0; border-top: 1px solid #d5d5d5; border-right: 1px solid #d5d5d5; background: repeating-linear-gradient(-60deg, #d5d5d5, #d5d5d5 1px, #eee 1px, #eee 5px)}

.list.order tbody td:nth-child(1) {padding: 0}
.list.order tbody td:nth-child(2) {padding-left: 6px; border-left: 1px solid transparent}
.list.order tbody td:first-child:before {float: left; width: 20px; height: 20px; margin: 11px 0 0 12px; background: #eee; border-radius: 25px; font-size: 80%; content: " "; text-align: center; vertical-align: top}
.list.order tbody td.red:first-child:before {/*content: "⚠";*/ background: tomato}

#order {}
#order div:nth-child(1) {width: 70%; padding: 0 4% 0 0; float: left; box-sizing: border-box}
#order div:nth-child(2) {width: 30%; float: left}
#order textarea {height: 118px; margin: 0 0 40px 0}

span.flaw {font-size: 60%; font-weight: bold; padding: 5px 7px; margin: 0 0 0 10px; color: tomato; border: 1px solid tomato; cursor: help}
td.discount {color: tomato; cursor: help}





.invoice > *:nth-child(1) {width: 50%; float: left}
.invoice > *:nth-child(2) {width: 50%; float: left; border: 1px solid #888 !important; background-color: #888 !important; color: white; border-radius: 0 !important; font-size: 80%}
.invoice > *:nth-child(2):hover {border: 1px solid teal !important; background-color: teal !important}
.invoice > *:nth-child(2):disabled {border: 1px solid #888 !important; background: #888 !important; color: #bbb !important; cursor: progress !important}
.invoice > *:nth-child(3) {position: relative; width: 100%; padding: 15px 0; min-height: 40px; clear: both}



#invoice {cursor: default}
#invoice.wait {cursor: progress}
#invoice.error {color: tomato; cursor: not-allowed}