* {
	font-family: "Lato", "Arial", "Helvetica", "Lucida", "sans-serif";
}

body {
	background-image: url("../images/webb.png");
	margin: 0;
}

body.modal-open {
	overflow: hidden;
	position: fixed;
}

body ul {
	list-style-type: none;
}

body h1 {
	white-space: pre-line;
	text-align: center;
	font-size: 45px;
}

.mainBodyContainer {
	display: flex;
	flex-direction: row;
}

.main {
	flex-grow: 1;
	overflow: hidden;
}

.pageTitle {
	display: flex;
	align-items: center;
	background-color: #a1a1a1;
	width: 100%;
	height: 65px;
	margin: 0;
	color: #fff;
	font-size: 40px;
	text-align: left;
	padding: 0 0 0 30px;
}

.defaultButton {
	appearance: none;
	background-color: #fafbfc;
	border: 1px solid rgba(27, 31, 35, .15);
	border-radius: 6px;
	box-shadow: rgba(27, 31, 35, .04) 0 1px 0, rgba(255, 255, 255, .25) 0 1px 0 inset;
	box-sizing: border-box;
	color: #24292e;
	cursor: pointer;
	transition: background-color .2s cubic-bezier(.3, 0, .5, 1);
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	vertical-align: middle;
	white-space: nowrap;
	word-wrap: break-word;
	line-height: 20px;
	list-style: none;
	padding: 6px 16px;
}

.defaultButton:hover {
	background-color: #f3f4f6;
	text-decoration: none;
	transition-duration: .1s;
}

.defaultButton:active {
	background-color: #edeff2;
	box-shadow: rgba(225, 228, 232, .2) 0 1px 0 inset;
	transition: none 0s;
}

.defaultButton:focus {
	outline: 1px transparent;
}

.defaultButton:before {
	display: none;
}

.defaultButton:-webkit-details-marker {
	display: none;
}

.button-white {
	background: none;
	appearance: none;
	color: #fff;
	border: 0;
	cursor: pointer;
	font-size: 20px;
}

.button-white:hover {
	background-color: #000;
	text-decoration: none;
	transition-duration: .1s;
}

.button-white:active {
	background-color: #000;
	transition: none 0s;
}

.button-white:focus {
	background-color: #000;
}

.button-white:disabled {
	cursor: not-allowed;
}

.button-black {
	background: none;
	appearance: none;
	color: #000;
	border: 0;
	cursor: pointer;
	font-size: 20px;
}

.button-black:hover {
	color: #fff;
	background-color: #000;
	text-decoration: none;
	transition-duration: .1s;
}

.button-black:active {
	color: #fff;
	background-color: #000;
	transition: none 0s;
}

.button-black:focus {
	color: #fff;
	background-color: #000;
}

.disabled {
	cursor: not-allowed;
	pointer-events: none;
	opacity: .6;
}

#privacyPolicyText {
	background-color: #fff;
	text-align: center;
	padding: 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
	margin-left: 20%;
	margin-right: 20%;
}

.navbar {
	background-color: #f15a25;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
	width: 100%;
	height: 60.8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.navbar ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.navbar li {
	display: inline;
	float: left;
}

.navbar a {
	font-size: 18px;
	display: block;
	color: #fff;
	text-align: center;
	padding: 20px 20px 20px;
	text-decoration: none;
}

.navbar img {
	width: 160px;
	height: 100%;
	background-color: #fff;
	float: left;
}

.navbar:first-child {
	padding-left: 5px;
}

.dropbtn {
	background-color: #f15a25;
	border: 0;
	padding: 20px 20px 20px;
	color: #fff;
	font-size: 18px;
}

@media only screen and (max-width: 445px) {
	.dropbtn {
		padding: 0;
	}
}

.dropdown .dropbtn {
	cursor: pointer;
	margin: 0;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.navbar a:hover, .dropbtn:hover, .dropbtn:focus {
	background-color: #111;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	z-index: 1;
}

.dropdown-content a {
	color: #000;
	text-align: left;
	display: block;
	padding: 12px 16px;
}

.dropdown-content a:hover {
	background-color: #ddd;
}

.show {
	display: block !important;
}

#notificationBell {
	display: inline-block;
	color: #fff;
	font-size: 20px;
	padding: 15px;
	cursor: pointer;
}

#notificationBell:hover {
	color: #000;
}

#top-nav-hamburger-menu {
	display: none;
}

@media only screen and (max-width: 800px) {
	#top-nav-hamburger-menu {
		display: block;
	}
}

.sidenav {
	width: 160px;
	min-width: 160px;
	background-color: #1a1a1a;
}

.sidenav ul {
	list-style-type: none;
	padding-left: 0;
	font-size: 20px;
}

.sidenav li {
	padding: 12px 0 12px 0;
	padding-left: 10px;
	cursor: pointer;
	color: #fff;
}

.sidenav li:hover {
	background-color: #9cc7ff;
}

.sidenav li a {
	width: 60px;
	text-align: center;
}

.navbarLinkContainer li.active {
	background-color: #9cc7ff;
}

@media only screen and (max-width: 800px) {
	#side-nav-left {
		display: none;
		position: absolute;
		height: 100%;
	}
}

.frmLogin {
	margin: auto;
	width: 18em;
	padding: 8px;
}

form li {
	padding: 5px;
}

.frmLogin input[type=text], .frmLogin input[type=password] {
	height: 30px;
	width: 85%;
}

@media only screen and (max-width: 600px) {
	.frmLogin input[type=text], .frmLogin input[type=password] {
		width: 100%;
	}
}

.frmLogin input[type=submit] {
	height: 25px;
	width: 8em;
	background-color: #f15a25;
	border: 0;
	font-size: 16px;
	color: #fff;
}

.frmLogin input[type=submit]:hover {
	background-color: #cf410d;
	cursor: pointer;
}

.loginlogo {
	width: 60%;
}

.loginborder {
	margin-left: 33%;
	margin-right: 33%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
	background-color: #fff;
}

.loginborder h1 {
	font-weight: 500;
}

.center {
	margin: auto;
	width: 18em;
	padding: 8px;
}

@media only screen and (max-width: 1100px) {
	.loginborder {
		margin-left: 28%;
		margin-right: 28%;
	}
}

@media only screen and (max-width: 950px) {
	.loginborder {
		margin-left: 25%;
		margin-right: 25%;
	}
}

@media only screen and (max-width: 800px) {
	.loginborder {
		margin-left: 20%;
		margin-right: 20%;
	}
}

@media only screen and (max-width: 600px) {
	.loginborder {
		margin-left: 10%;
		margin-right: 10%;
	}

	.loginborder ul {
		padding-left: 0;
	}

	.frmLogin {
		width: auto;
		display: flex;
		justify-content: center;
	}

	.center {
		width: auto;
		display: flex;
		justify-content: center;
	}
}

.cbRememberMe {
	display: inline;
}

#loginhr {
	display: block;
	height: 2px;
	border: 0;
	border-top: 3px solid #ccc;
	padding: 0;
	width: 80%;
}

@media only screen and (max-width: 600px) {
	#loginhr {
		width: 85%;
	}
}

.tabLinksAndContent {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
}

.tab {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}

.tab button {
	background-color: inherit;
	float: left;
	border: 0;
	outline: 0;
	cursor: pointer;
	padding: 14px 16px;
	transition: .3s;
}

.tab button:hover {
	background-color: #ddd;
}

.tab button.active {
	background-color: #ccc;
}

.tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: 0;
	background-color: #fff;
}

@media only screen and (max-width: 600px) {
	.tabLinksAndContent {
		min-width: 360px;
	}
}

#mainOrderTableActions, #mainOrderTableFilters {
	padding: 6px 12px;
	border: 1px solid #ccc;
	background-color: #fff;
}

#mainOrderTableFilters {
	display: none;
}

#orderFilterArrow {
	padding: 9px 7px;
	margin-left: -4px;
}

#filterOptionshr {
	display: block;
	height: 2px;
	border: 0;
	border-top: 3px solid #ccc;
	padding: 0;
}

#mainOrderTableFilterPresets {
	display: flex;
}

.orderFilterGrid {
	display: grid;
	grid-template-columns: 200px 200px 200px 200px 200px 200px;
	grid-template-rows: 80px 80px 80px;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	font-size: 18px;
	margin-top: 10px;
	margin-left: 15px;
	grid-template-areas: "a b c d e f" "g h i i j j" "k k k k k k";
}

.companyFilterGridItem {
	grid-area: a;
}

.customerFilterGridItem {
	grid-area: b;
}

.partStatusFilterGridItem {
	grid-area: c;
}

.partColorFilterGridItem {
	grid-area: d;
}

.partMaterialFilterGridItem {
	grid-area: e;
}

.partFinishFilterGridItem {
	grid-area: f;
}

.statusFilterGridItem {
	grid-area: g;
}

.highPriorityFilterGridItem {
	grid-area: h;
}

.dateFilterGridItem {
	grid-area: i;
}

#dueDateRangeFilterGridItem {
	grid-area: j;
}

.filterBtnGridItem {
	grid-area: k;
}

@media only screen and (max-width: 1514px) {
	.orderFilterGrid {
		display: grid;
		grid-template-columns: 200px 200px 200px 200px;
		grid-template-rows: 80px 80px 80px 80px;
		grid-template-areas: "a b c d" "e f g h" "i i j j" "k . . .";
	}
}

@media only screen and (max-width: 1071px) {
	.orderFilterGrid {
		display: grid;
		grid-template-columns: 200px 200px 200px;
		grid-template-rows: 80px 80px 80px 80px 80px;
		grid-template-areas: "a b c" "d e f" "g h ." "i i i" "j j j" "k . .";
	}
}

@media only screen and (max-width: 849px) {
	.orderFilterGrid {
		grid-template-columns: 200px 200px;
		grid-template-rows: 80px 80px 80px 80px 80px 80px 80px;
		grid-template-areas: "a b" "c d" "e f" "g h" "i i" "j j" "k .";
	}
}

.selectContainer select {
	cursor: pointer;
	width: 150px;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #fff 0%, #e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}

.selectContainer select::-ms-expand {
	display: none;
}

.selectContainer select:hover {
	border-color: #888;
}

.selectContainer select:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	color: #222;
	outline: 0;
}

.selectContainer select option {
	font-weight: normal;
}

.selectStyling {
	height: 32px;
	font-size: 100%;
	border-radius: 4px;
	background-color: #fff;
	border: 1px solid #aaa;
}

@media only screen and (max-width: 600px) {
	.orderFilterGrid select {
		width: 140px !important;
	}
}

#dateReceivedSingleDateContainer {
	display: none;
}

#dateReceivedDateRangeContainer {
	display: none;
}

#dueDateSingleDateContainer {
	display: none;
}

#dueDateDateRangeContainer {
	display: none;
}

.filterBtnGridItem {
	display: flex;
	justify-content: left;
	align-items: center;
}

@media only screen and (max-width: 710px) {
	.filterBtnGridItem {
		justify-content: center;
	}
}

.button-styling {
	font-size: 20px;
	border-radius: 4px;
	padding: 13px;
	margin-left: 20px;
	border: 2px solid #ccc;
	cursor: pointer;
}

.button-styling:hover {
	background-color: rgba(204, 204, 204, .8);
}

.button-styling:active {
	trans: translateY(2px);
}

.textInputContainer input[type=text], .timeInputContainer input[type=time], .numberInputContainer input[type=number] {
	border-radius: 4px;
	border: 2px solid #ccc;
	box-sizing: border-box;
	padding: .6em 1.4em .5em .8em;
	font-size: 16px;
	max-width: 203px;
}

.textInputContainer input[type=text]:focus, .timeInputContainer input[type=time]:focus, .numberInputContainer input[type=number]:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	color: #222;
	outline: 0;
}

@media only screen and (max-width: 600px) {
	.orderFilterGrid input[type=text] {
		width: 100%;
	}
}

.dateInputContainer input[type=date] {
	cursor: text;
	padding: .6em 1.4em .5em .8em;
	width: 172px;
	max-width: 100%;
	border-radius: 4px;
	border: 2px solid #ccc;
	box-sizing: border-box;
	margin-top: 5px;
	font-size: 16px;
	max-height: 39px;
}

.dateInputContainer input[type=date]:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	color: #222;
	outline: 0;
}

#dateReceivedOrderFilterSelect, #dueDateOrderFilterSelect {
	width: 200px;
}

.dateOrderFilterLabel {
	display: block;
}

.dateRangeFilterContainer {
	display: inline;
}

@media only screen and (max-width: 600px) {
	.orderFilterGrid input[type=date] {
		font-size: 14px;
	}
}

.cbContainer {
	display: block;
	position: relative;
	display: block;
	padding-left: 35px;
	cursor: pointer;
}

.lateOrdersFilterGridItem {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.cbContainer input {
	cursor: pointer;
	position: absolute;
	opacity: 0;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
}

.cbContainer:hover input ~ .checkmark {
	background-color: #ccc;
}

.cbContainer input:checked ~ .checkmark {
	background-color: #2196f3;
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.cbContainer input:checked ~ .checkmark:after {
	display: block;
}

.cbContainer .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

#searchInput {
	background-image: url("../images/searchicon.png");
	background-position: 10px 12px;
	background-repeat: no-repeat;
	width: 40%;
	font-size: 16px;
	padding: 12px 20px 12px 40px;
	border: 1px solid #ddd;
	margin-bottom: 12px;
	margin-top: 12px;
	border-radius: 4px;
	border: 2px solid #ccc;
	box-sizing: border-box;
}

@media only screen and (max-width: 900px) {
	#searchInput {
		width: 50%;
	}
}

@media only screen and (max-width: 800px) {
	#searchInput {
		width: 60%;
	}
}

@media only screen and (max-width: 700px) {
	#searchInput {
		width: 70%;
	}
}

@media only screen and (max-width: 600px) {
	#searchInput {
		width: 95%;
	}
}

.orderListH1 {
	background-color: #fff;
	margin: 15px auto;
	width: 284px;
	padding-top: 10px;
	padding-bottom: 10px;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
	border-radius: 8px;
	border: 1px solid #d3d3d3;
}

#orderStatusFilterContainer {
	overflow: hidden;
	background-color: #fff;
	border: 1px solid #ccc;
}

#orderStatusFilterContainer ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0;
}

#orderStatusFilterContainer li {
	flex-grow: 1;
	flex-basis: auto;
	margin: .25em 0;
	padding: 0 2px;
	text-align: center;
	border-left: 1px solid #ccc;
}

#orderStatusFilterContainer li:first-child {
	border-left: 0;
}

#orderStatusFilterContainer button {
	background-color: #fff;
	border: 0;
	cursor: pointer;
	color: #00f;
}

#orderStatusFilterContainer li:first-of-type button {
	color: #000;
	font-weight: bold;
}

#orderTableContainer {
	position: relative;
}

.overFlowX {
	overflow-x: auto;
}

table {
	font-family: arial, sans-serif;
	border-collapse: collapse;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
}

thead tr {
	background-color: #f15a25;
	color: #fff;
}

td, th {
	border: 1px solid #c0c0c0;
	text-align: left;
	padding: 8px;
}

tbody tr:nth-child(even) {
	background-color: #ddd;
}

.high {
	background-color: #f00;
}

.reprint {
	background-color: #ffeca9;
}

.orderTable tbody tr:hover td {
	background-color: #2196f3;
	cursor: pointer;
}

#rowAmountContainer {
	display: inline-block;
	margin: 10px 30px 0 0;
}

#rowAmountContainer label {
	font-size: 17px;
	margin-right: 5px;
}

#rowAmountContainer select {
	font-size: 14px;
	width: 55px;
	height: 23px;
}

.loadingSpinner {
	font-size: 60px !important;
}

#orderTableSpinner {
	display: none;
	z-index: 2;
	width: 100%;
	height: 100%;
	position: absolute;
	justify-content: center;
	align-items: center;
}

.darkenedOverlay {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .3);
	z-index: 1;
}

.sortableColumnHeader {
	cursor: pointer;
}

#orderManagerNoOrdersFound {
	width: 175px;
	margin: auto;
	padding: 10px;
	background-color: #fff;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
}

#orderTablePagination {
	margin-top: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#orderTablePagination button {
	margin-left: 2px;
	margin-right: 2px;
	font-size: 16px;
	background-color: #f15a25;
	color: #fff;
	border: 0;
	padding: 6px;
	width: 55px;
}

#orderTablePagination button:hover {
	background-color: #cf410d;
	cursor: pointer;
}

#orderTablePagination button:disabled, #orderTablePagination button[disabled] {
	opacity: .65;
	cursor: default;
	background-color: #f15a25;
}

#orderTablePagination input {
	min-height: 24px;
	margin-left: 3px;
	margin-right: 3px;
	width: 60px;
	text-align: center;
}

.modal {
	display: none;
	position: fixed;
	z-index: 99;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: #000;
	background-color: rgba(0, 0, 0, .4);
}

.modal-content {
	background-color: #fefefe;
	margin: 40px  auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: .4s;
	animation-name: animatetop;
	animation-duration: .4s;
	background-image: url("../images/triangle-mosaic.png");
}

.close {
	color: #aaa;
	float: right;
	font-size: 40px;
	font-weight: bold;
}

.close:hover, .close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

@-webkit-keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

.partTable {
	box-shadow: none;
}

.partHeaderGrid {
	display: grid;
	grid-template-areas: "a g h i" "b g h ." "c j . ." "d j . ." "e . . ." "f . . .";
	grid-template-rows: 55px 40px minmax(40px, auto) 40px 40px 40px;
	margin-bottom: 10px;
	border-left: 5px solid #f15a25;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
	padding: 10px 10px 10px 0;
}

.orderCompanyGridItem {
	grid-area: a;
	border-bottom-color: #f15a25;
}

.orderCompanyGridItem p {
	font-size: 25px;
	font-weight: 700;
}

.orderCompanyGridItem img {
	width: 120px;
	height: 60px;
}

.partOverallStatusGridItem {
	grid-area: g;
}

.partOverallStatusGridItem p, .orderStatusGridItem p {
	border-top: 2px solid #000;
	padding: 10px;
	width: 115px;
}

.partOverallStatusGridItem span, .orderStatusGridItem span {
	font-weight: 600;
}

.orderStatusGridItem {
	grid-area: h;
}

.orderExtNumGridItem {
	grid-area: b;
	border-bottom-color: #808080;
}

.orderCustomerGridItem {
	grid-area: c;
	border-bottom-color: #f15a25;
}

.orderCustomerGridItem p {
	margin-bottom: 2px;
}

.orderDueDateGridItem {
	grid-area: d;
	display: flex;
	align-items: center;
	justify-content: left;
	border-bottom-color: #808080;
}

.orderDateRecGridItem {
	grid-area: e;
	border-bottom-color: #f15a25;
}

.orderCostGridItem {
	grid-area: f;
	border-bottom-color: #808080;
}

.orderPrintPageGridItem {
	font-size: 28px;
}

#orderPriorityContainer {
	display: grid;
	grid-template-columns: 1fr repeat(1, auto) 1fr;
	justify-items: center;
	color: #000;
	font-size: 30px;
	margin-bottom: 8px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
}

#order-details-hamburger-menu-button {
	margin-right: auto;
	margin-left: 30px;
	padding: 0 10px 0 10px;
}

#order-details-priority {
	grid-column-start: 2;
}

#orderPriorityContainer p {
	margin-top: 10px;
	margin-bottom: 10px;
}

#order-details-order-actions {
	display: none;
	background-color: #000;
	position: absolute;
	min-width: 170px;
	width: 170px;
}

#order-details-order-actions ul {
	padding: 0;
}

#order-details-order-actions button {
	width: 100%;
	text-align: left;
	padding: 7px 10px;
}

#order-details-order-actions button:hover {
	background-color: #9cc7ff;
}

.modalCloseGridItem {
	grid-area: i;
}

#editOrderPriorityGridItem {
	grid-area: j;
	display: none;
}

.modalButtonsContainer {
	display: flex;
	justify-content: space-evenly;
	padding-top: 10px;
	padding-bottom: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
	margin-bottom: 10px;
	background-color: #f15a25;
}

.modalButtonsContainer button {
	font-size: 14px;
	border-radius: 4px;
	padding: 8px;
	border: 0;
	background: #f15a25;
	color: #fff;
	cursor: pointer;
}

.modalButtonsContainer button:hover {
	background-color: #ccc;
}

#selOrderPriority {
	margin-top: 15px;
	max-width: 130px;
	display: flex;
	justify-content: center;
}

@media only screen and (max-width: 850px) {
	.orderPrintPageGridItem {
		display: flex;
		justify-content: start;
		align-items: end;
	}
}

@media only screen and (max-width: 800px) {
	.partHeaderGrid {
		grid-template-areas: "a g i" "b g ." "c h ." "d h ." "e . ." "f . .";
		grid-template-rows: 55px 55px minmax(55px, auto) 55px 55px 55px;
	}

	.orderPrintPageGridItem {
		justify-content: center;
		align-items: normal;
	}
}

@media only screen and (max-width: 600px) {
	.partHeaderGrid {
		grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "k";
		border-left: 0;
		grid-template-rows: 55px 40px minmax(40px, auto) 45px 40px 40px;
	}

	.orderCompanyGridItem {
		grid-area: a;
		border-left: 5px solid #f15a25;
	}

	.orderCompanyGridItem p {
		margin-left: 5px;
	}

	.modalCloseGridItem {
		grid-area: a;
	}

	.orderExtNumGridItem {
		grid-area: b;
		border-left: 5px solid #f15a25;
	}

	.orderExtNumGridItem p {
		margin-left: 5px;
	}

	.orderCustomerGridItem {
		grid-area: c;
		border-left: 5px solid #f15a25;
	}

	.orderExtNumGridItem p {
		margin-left: 5px;
	}

	.orderDueDateGridItem {
		grid-area: d;
		border-left: 5px solid #f15a25;
	}

	.orderDueDateGridItem p, .orderDueDateGridItem input {
		margin-left: 5px;
	}

	.orderDateRecGridItem {
		grid-area: e;
		border-left: 5px solid #f15a25;
	}

	.orderDateRecGridItem p {
		margin-left: 5px;
	}

	.orderCostGridItem {
		grid-area: f;
		border-left: 5px solid #f15a25;
	}

	.orderCostGridItem p {
		margin-left: 5px;
	}

	.orderPriorityGridItem {
		grid-area: g;
		display: flex;
		justify-content: center;
	}

	.orderPriorityGridItem p {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.partOverallStatusGridItem {
		grid-area: h;
		display: flex;
		justify-content: center;
		margin-top: 10px;
	}

	.orderStatusGridItem {
		grid-area: i;
		display: flex;
		justify-content: center;
	}

	.orderPrintPageGridItem {
		margin-bottom: 10px;
	}

	.partEditStatusGridItem {
		margin-bottom: 10px;
	}

	#editOrderPriorityContainer {
		display: grid;
		justify-content: center;
		padding-top: 15px;
	}

	.downloadFilesContainer {
		margin-left: 10px;
	}
}

#notesSaveBtn {
	align-self: flex-end;
	font-size: 14px;
	border-radius: 4px;
	padding: 8px;
	border: 2px solid #ccc;
	cursor: pointer;
}

.partEditStatusGridItem div {
	align-self: flex-end;
}

.partEditStatusGridItem button:hover, #notesSaveBtn:hover {
	background-color: rgba(204, 204, 204, .8);
}

.statusEditing {
	display: none;
	justify-content: flex-end;
}

.statusEditing select {
	margin-top: 10px;
	margin-bottom: 15px;
	width: 150px;
	display: block;
}

.statusEditing label {
	font-weight: 600;
}

.statusEditing div {
	margin-right: 10px;
}

#btnSaveChanges {
	display: none;
}

.webOrderValue {
	display: none;
}

.btnEditIcon {
	font-size: 22px;
	border: 0;
	background-color: #fff;
}

.btnEditIcon:hover {
	cursor: pointer;
}

.staticDueDate {
	display: inline;
}

#inpEditDueDate, #inpEditCustomer, #selEditCompany {
	display: none;
	cursor: text;
	border: 2px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 16px;
}

#inpEditCustomer {
	width: 140px;
}

#inpEditDueDate:focus, #inpEditCustomer:focus, #selEditCompany {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	color: #222;
	outline: 0;
}

#btnSaveDueDate, #btnSaveCompany, #btnSaveCustomer {
	display: none;
	margin-left: 4px;
}

.leftHeaderCells {
	margin-left: 5px;
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	width: 210px;
	display: flex;
	align-items: end;
}

.leftHeaderCells p {
	margin-bottom: 2px;
}

@media only screen and (max-width: 600px) {
	.leftHeaderCells {
		width: 220px;
	}
}

#qrCode {
	display: none;
	width: 150px;
	height: 150px;
}

#printIcon {
	color: #fff;
	font-size: 24px;
	padding: 0;
}

.partQuantityInput {
	display: none;
}

#shippingAddressGridItem, #shippingMethodGridItem, #webOrderNumGridItem {
	display: none;
}

#selStatusModal {
	margin-top: 15px;
	display: none;
	width: 140px;
}

@media only screen and (max-width: 500px) {
	#orderDetailsTabLinksAndContent {
		min-width: initial;
	}
}

#Parts {
	overflow: scroll;
	background: url(/images/triangle-mosaic.png);
}

.partInfoGrid {
	display: grid;
	grid-template-areas: "a b b b b b" "c d e f f f" "g h h h i j" "k l m n o p" "q r r r r r" "s t t t t t";
}

.partInfoGrid p {
	display: inline;
}

.partInfoGrid div {
	border: 1px solid #c0c0c0;
	padding: 3px;
}

.partInfoGrid select {
	width: 100%;
	font-size: 16px;
	display: none;
}

.partTable img {
	padding: 0;
	margin: 0;
	width: 100%;
	display: block;
	object-fit: fill;
}

.imgCell {
	min-width: 100px;
	width: 233px;
	max-width: 233px;
	object-fit: fill;
}

.partTable td {
	padding: 0;
}

.partTable tbody tr {
	border-bottom: 3px solid #000;
	border-top: 3px solid #000;
}

.partTable tfoot td {
	border: 0;
	text-align: right;
	padding-top: 4px;
}

.partTable tfoot tr {
	border: 0;
}

.partTable tfoot td:nth-child(4) {
	text-align: center;
}

.partLineNumber {
	text-align: center;
}

.greyed {
	background-color: #989898;
	color: #fff;
}

.partFileLabelGridItem {
	grid-area: a;
}

.partFileGridItem {
	grid-area: b;
}

.partFileGridItem p {
	word-break: break-all;
}

.partVolumeLabelGridItem {
	grid-area: c;
}

.partVolumeGridItem {
	grid-area: d;
}

.partBoxLabelGridItem {
	grid-area: e;
}

.partBoxGridItem {
	grid-area: f;
}

.partMaterialLabelGridItem {
	grid-area: g;
}

.partMaterialGridItem {
	grid-area: h;
}

.partColorLabelGridItem {
	grid-area: i;
}

.partColorGridItem {
	grid-area: j;
}

.partFinishLabelGridItem {
	grid-area: k;
}

.partFinishGridItem {
	grid-area: l;
}

.partUnitsLabelGridItem {
	grid-area: m;
}

.partUnitsGridItem {
	grid-area: n;
}

.partStatusLabelGridItem {
	grid-area: o;
}

.partStatusGridItem {
	grid-area: p;
	padding: 0;
}

.partAdditionalOptionsLabelGridItem {
	grid-area: q;
}

.partAdditionalOptionsGridItem {
	grid-area: r;
}

.partAdditionalOptionsGridItem p {
	margin: 0;
}

.partAdditionalOptionsGridItem p:not(:last-child)::after {
	content: ", ";
}

.partCommentLabelGridItem {
	grid-area: s;
}

.partCommentGridItem {
	grid-area: t;
}

.cellCenter {
	text-align: center;
	vertical-align: middle;
}

#partTableCertificateLabel {
	padding: 3px;
}

#partTableCertificates {
	padding-left: 3px;
}

#partTableCertificates p {
	display: inline;
}

#partTableCertificates p:not(:last-child)::after {
	content: ", ";
}

.black {
	background-color: #000;
	color: #fff;
}

.red {
	background-color: #f00;
	color: #fff;
}

.blue {
	background-color: #00f;
	color: #fff;
}

.green {
	background-color: #008000;
	color: #fff;
}

.yellow {
	background-color: #ff0;
	color: #000;
}

.orange {
	background-color: #ffa500;
	color: #fff;
}

.pink {
	background-color: #ffc0cb;
	color: #fff;
}

.purple {
	background-color: #800080;
	color: #fff;
}

.darkpurple {
	background-color: #551a8b;
	color: #fff;
}

.neongreen {
	background-color: #39ff14;
	color: #fff;
}

.neonyellow {
	background-color: #fff01f;
	color: #fff;
}

.neonpink {
	background-color: #ff10f0;
	color: #fff;
}

#selectRowHeader {
	display: none;
}

.cellHide {
	display: none;
}

.partStatus {
	border: 0 !important;
}

.partQuantityInput {
	text-align: center;
}

.partQuantityCell, .partCostCell {
	display: flex;
	align-items: center;
	justify-content: center;
}

.checkUnitStar {
	height: 20px;
	width: 20px;
}

.partDetailSel {
	min-width: 80px;
}

@media only screen and (max-width: 600px) {
	#Parts {
		overflow: scroll;
	}
}

.insertImageCell {
	display: flex;
	justify-content: center;
}

.insertImage {
	max-height: 136px;
	max-width: 100px;
}

.insertInfoContainer {
	vertical-align: top;
}

.insertInfoGrid {
	display: grid;
	grid-template-areas: "a b b b b b" "c d d d d d";
}

.insertTypeLabelGridItem {
	grid-area: a;
}

.insertTypeGridItem {
	grid-area: b;
}

.insertThreadLabelGridItem {
	grid-area: c;
}

.insertThreadGridItem {
	grid-area: d;
}

.insertInfoGrid div {
	border: 1px solid #c0c0c0;
	padding: 3px;
}

.orderHistoryText, .internalNoteHistoryText {
	margin-bottom: 5px;
	border: 1px solid #999;
	outline: 0;
	padding: 5px;
	background: transparent url(/images/input-text-8.jpg) repeat-x;
	width: 477px;
	min-height: 50px;
	line-height: 1.6;
	background-color: #fff;
	margin-left: 40px;
	white-space: pre-wrap;
}

.orderHistoryTimeStamp, .internalNoteHistoryTimeStamp {
	margin-bottom: 20px;
	font-size: 14px;
	margin-left: 40px;
	color: #808080;
}

@media only screen and (max-width: 720px) {
	.orderHistoryText, .internalNoteHistoryText {
		width: auto;
		height: auto;
	}
}

@media only screen and (max-width: 550px) {
	.orderHistoryText, .internalNoteHistoryText {
		margin-left: 10px;
	}

	.orderHistoryTimeStamp, .internalNoteHistoryTimeStamp {
		margin-left: 10px;
	}
}

#Notes {
	background: url(/images/triangle-mosaic.png);
}

#noteHistoryTitle {
	margin-left: 40px;
	margin-bottom: 5px;
	margin-top: 35px;
}

.notesContent label, .notesContent input {
	display: block;
}

.orderNotesTextArea {
	border: 1px solid #808080;
	min-height: 50px;
	height: auto;
	min-width: 50%;
	width: auto;
	max-width: 60%;
	line-height: 1.6;
	margin-top: 0;
	margin-bottom: 20px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #fff;
}

.customNotesTextArea {
	min-width: 59%;
	width: auto;
	max-width: 60%;
	margin-bottom: 5px;
	min-height: 60px;
	height: auto;
	line-height: 1.6;
}

.saveMessage {
	display: none;
	opacity: 0;
}

#savedSuccessfully {
	color: #008000;
}

#savedUnsuccessfully {
	color: #f00;
}

.saveMessage.show {
	animation: anime 10s 1;
}

#internalNoteSelect {
	margin-bottom: 10px;
	width: 175px;
}

@keyframes anime {
	0% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

#charCount {
	display: block;
	margin-bottom: 5px;
}

@media only screen and (max-width: 600px) {
	.orderNotesTextArea {
		min-width: 85%;
		max-width: 90%;
	}

	.customNotesTextArea {
		min-width: 88%;
		max-width: 90%;
		min-height: 60px;
	}

	.saveMessage {
		margin-top: 10px;
	}
}

@media only screen and (max-width: 550px) {
	#Notes ul {
		margin-left: 10px;
		padding-left: 0;
	}

	#noteHistoryTitle {
		margin-left: 10px;
	}
}

#OrderHistoryContent {
	background: url(/images/triangle-mosaic.png);
}

#OrderHistoryTitle {
	margin-left: 40px;
	margin-top: 10px;
	margin-bottom: 5px;
}

.noHistory {
	margin-left: 40px;
}

@media only screen and (max-width: 550px) {
	#OrderHistoryTitle {
		margin-left: 10px;
	}

	.noHistory {
		margin-left: 10px;
	}
}

.centerContent {
	display: grid;
	justify-content: center;
}

#startScanContainer {
	display: inline;
}

#QRScanContent {
	width: 508px;
	border: 10px solid #f15a25;
}

#stopScanContainer {
	display: flex;
	justify-content: center;
}

#btnStopScan {
	margin: 10px;
}

#QRScanInformation {
	display: grid;
	grid-template-areas: "a a" "b c" "b d";
}

#selectCameraGridItem {
	grid-area: a;
	display: flex;
	justify-content: center;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 8px;
}

#QRorderListGridItem {
	grid-area: b;
	margin: 8px;
}

#QRstatusGridItem {
	grid-area: c;
	margin: 8px;
}

#QRResultResponse {
	grid-area: d;
	border: 1px solid #000;
	border-radius: 3px;
	min-height: 45px;
	margin: 8px;
	padding-left: 5px;
	padding-top: 5px;
	overflow: auto;
	background: #fff;
}

#QRListContainer {
	border: 1px solid #000;
	border-radius: 3px;
	min-height: 100px;
	margin: 0;
	overflow-y: auto;
	padding-left: 5px;
	padding-top: 5px;
	background: #fff;
}

#QRStatusContainer {
	border: 1px solid #000;
	border-radius: 3px;
	min-height: 30px;
	padding-left: 5px;
	padding-top: 5px;
	background: #fff;
}

#cameraSelect {
	min-width: 150px;
	width: 180px;
	margin-left: 10px;
}

#cameraSelectLabel {
	display: grid;
	align-items: center;
	font-size: 18px;
}

#QRStatusLabel, #QRListLabel {
	font-size: 18px;
}

#reader {
	width: 500px;
}

@media screen and (max-width: 600px) {
	#QRScanContent {
		width: initial;
		margin-left: 10px;
		margin-right: 10px;
		display: grid;
		grid-template-areas: "a" "b" "c";
		grid-template-columns: auto;
	}

	#reader {
		grid-area: a;
	}

	#stopScanContainer {
		grid-area: b;
	}

	#QRScanInformation {
		grid-area: c;
		display: grid;
		grid-template-areas: "a" "b" "c" "d";
		justify-content: center;
	}

	#selectCameraGridItem {
		grid-area: a;
		display: block;
	}

	#QRstatusGridItem {
		grid-area: b;
	}

	#QRorderListGridItem {
		grid-area: c;
	}

	#QRResultResponse {
		grid-area: d;
	}

	#cameraSelect {
		margin-left: 0;
	}

	#btnScanQR {
		width: 50%;
		margin: 0 auto;
	}
}

#addOrderContainer {
	width: 200px;
	margin: 10px auto;
	border: 2px solid #000;
	background-color: #fff;
}

#frmAddOrder {
	padding: 5px;
}

#frmAddOrder > * {
	margin-bottom: 5px;
}

#manualAddOrderDetailsGrid {
	display: grid;
	grid-template: "a b c" "d e f" "g . ." "h h h";
	background-color: #fff;
	padding: 15px;
}

#manualCompanyGridItem {
	grid-area: a;
}

#manualPriorityGridItem {
	grid-area: b;
}

#manualOrderNumberGridItem {
	grid-area: c;
}

#manualCustomerGridItem {
	grid-area: d;
	margin-top: 15px;
}

#manualDateRecievedGridItem {
	grid-area: e;
	margin-top: 15px;
}

#manualDueDateGridItem {
	grid-area: f;
	margin-top: 15px;
}

#manualDateRecievedGridItem input[type=time] {
	cursor: text;
}

#manualTotalCostGridItem {
	grid-area: g;
	margin-top: 15px;
}

#manualOrderCommentGridItem { 
	grid-area: i;
	margin-top: 15px;
}

.manualAddPartDetailsGrid {
	display: grid;
	grid-template: "a b c" "d e f" "g h h" "i j k"  "l l l";
	background-color: #fff;
	padding: 15px;
}

.manualAddPartDetailsGrid:nth-child(n + 3) {
	border-top: 1px solid #000;
}

.manualFileNameGridItem {
	grid-area: a;
}

.manualBoxDimensionsGridItem {
	grid-area: b;
}

.manualMaterialGridItem {
	grid-area: c;
}

.manualFinishGridItem {
	grid-area: d;
	margin-top: 15px;
}

.manualColorGridItem {
	grid-area: e;
	margin-top: 15px;
}

.manualUnitsGridItem {
	grid-area: f;
	margin-top: 15px;
}

.manualQuantityGridItem {
	grid-area: g;
	margin-top: 15px;
}

.manualPartCostGridItem {
	grid-area: h;
	margin-top: 15px;
}

.manualPartCommentGridItem {
	grid-area: i;
	margin-top: 15px;
}
.manualPartUploadGridItem {
	grid-area: j;
	margin-top: 15px;
}
.manualPartUploadInfoGridItem {
	grid-area: k;
	margin-top: 15px;
}
.manualAddGridItem select, .manualAddGridItem input, .manualAddGridItem textarea {
	display: block;
}

#manualOrderDetailsTitle, #manualPartDetailsTitle {
	background-color: #f15a25;
	padding: 10px;
	color: #fff;
}

#manualPartDetailsTitle {
	margin-top: 15px;
}

#manualAddOrderDetailsGrid select, #manualAddOrderDetailsGrid input[type=date], .manualAddPartDetailsGrid select, .manualPartCostGridItem input[type=date] {
	width: 203px;
}

#manualAddButtonContainer {
	display: flex;
	align-items: center;
	flex-direction: column;
}

#manualAddButtonContainer button {
	font-size: 18px;
	margin-top: 10px;
}

#manual-add-additional-part-button {
	width: 200px;
}

#manual-add-order-button {
	width: 150px;
}

.manualTextAreas {
	width: 460px;
	height: 112px;
}

input[type=number] {
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

.number-input-container {
	border: 2px solid #ddd;
	display: inline-flex;
}

.number-input-container, .number-input-container * {
	box-sizing: border-box;
}

.number-input-container button {
	outline: 0;
	-webkit-appearance: none;
	background-color: #eee;
	border: 0;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	cursor: pointer;
	margin: 0;
	position: relative;
	padding: 0;
}

.number-input-container button:before, .number-input-container button:after {
	display: inline-block;
	position: absolute;
	content: "";
	width: .5rem;
	height: 2px;
	background-color: #212121;
	transform: translate(-50%, -50%);
}

.number-input-container button.plus:after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.number-input-container input[type=number] {
	font-family: sans-serif;
	max-width: 4.5rem;
	padding: .5rem;
	border: 0;
	text-align: center;
	outline: 0;
}

.number-input-container {
	border: solid #c2c4c6;
	border-width: 2px;
}

.textarea-styling {
	border-radius: 4px;
	border: 2px solid #ccc;
	box-sizing: border-box;
	padding: .6em 1.4em .5em .8em;
	font-size: 16px;
}

.textarea-styling:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	color: #222;
	outline: 0;
}

footer {
	position: static;
	left: 0;
	bottom: 0;
	width: 100%;
	line-height: 60px;
	text-align: center;
	z-index: -1;
}

.boxShadow {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
}

.dropzone_part {
	border: 2px dashed #ccc;
	width: 380px;
	min-height: 30px;
	font-size: 18px;
	color: #777;
	text-align: center;
	padding: 40px;
	border-radius: 20px;
	margin: 10px;
}
label {
	margin-bottom: 10px;
}
.dropzone_part .dz-size.dz-filename {
	float: left;
	width: 60%;
}
.dropzone_part .dz-preview {
	margin: 0 ! important;
	padding: 0 ! important;
	width: 90%;
}

.cjc-canvas {
	background: url(/img/canvas-back-grid.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin: 10px auto;
	text-align: center;
	padding: 5px;
	border: none;
	overflow: hidden;
}

.manualBoxDimensionsInput {
	width: 60px;
	display: inline-block ! important;
}