@font-face {font-family:'Droid Sans';src:local('Droid Sans'), url('/DroidSans-webfont.woff') format('woff'),url('/DroidSans-webfont.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

body{font-family:'Droid Sans',sans-serif;width:100%;min-width:480px;margin:0;padding:0;box-sizing:border-box;background:#eee}
@media only screen and (min-device-width:768px) and (orientation:portrait){body{max-width:768px}}
article{display:block;padding:0 .25em 1em}
table{width:100%;box-sizing:border-box;table-layout:fixed;text-align:center;border-collapse:collapse}

ul{list-style:none;padding:0}
@media screen and (max-width:768px){td input[type=button]{min-height:2em}}

.green tbody tr,tr.green{background:#9F9}.green tbody tr:nth-child(even),tr:nth-child(even).green{background:#8E8}
.purple tbody tr,tr.purple{background:#99F}.purple tbody tr:nth-child(even),tr:nth-child(even).purple{background:#88E}
.sky tbody tr,tr.sky{background:#9FF}.sky tbody tr:nth-child(even),tr:nth-child(even).sky{background:#8EE}
.magenta tbody tr,tr.magenta{background:#F9F}.magenta tbody tr:nth-child(even),tr:nth-child(even).magenta{background:#E8E}
.orange tbody tr,tr.orange{background:#F93}.orange tbody tr:nth-child(even),tr:nth-child(even).orange{background:#E82}
.pink tbody tr,tr.pink{background:#F99}.pink tbody tr:nth-child(even),tr:nth-child(even).pink{background:#E88}
.yellow tbody tr,tr.yellow{background:#FF3}.yellow tbody tr:nth-child(even),tr:nth-child(even).yellow{background:#EE2}
.red tbody tr,tr.red{background:#F33}.red tbody tr:nth-child(even),tr:nth-child(even).red{background:#E22}
.darkgreen tbody tr,tr.darkgreen{background:#9C9}.darkgreen tbody tr:nth-child(even),tr:nth-child(even).darkgreen{background:#8B8}
.lightgreen tbody tr,tr.lightgreen{background:#CFC}.lightgreen tbody tr:nth-child(even),tr:nth-child(even).lightgreen{background:#BEB}
.lightorange tbody tr,tr.lightorange{background:#F9C}.lightorange tbody tr:nth-child(even),tr:nth-child(even).lightorange{background:#E8B}
.lightpurple tbody tr,tr.lightpurple{background:#C9F}.lightpurple tbody tr:nth-child(even),tr:nth-child(even).lightpurple{background:#B8E}

.orderno span{color:#444}

.Customers{color:purple}
.ManufacturingInfo{color:green}
.DispatchInfo{color:blue}
.ExternalArtwork{color:darkred}

.pagination{text-align:center;min-width:200px}
.pagination input{background:transparent;border:0;padding:0;margin:0;font-size:1em;width:3em;text-align:center;outline:0;color:inherit}
.pagination input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pagination input[type="number"]{-moz-appearance:textfield}
.pagination a{display:inline-block;padding:0.25em;color:inherit;cursor:pointer}.current{text-decoration:underline;cursor:}

th{background:#000;background:linear-gradient(#333,#000);color:#FFF;padding:3px;box-sizing:border-box}
td,th{border:1px solid #888}tbody tr{background:#FFF}tbody tr:nth-child(even){background:#EEE}
td input{width:100%;box-sizing:border-box;text-align:center}
td input[type=button]{width:95%;height:95%;margin:0 2.5%;min-height:1.5em;white-space:normal}
td input[type=checkbox]{margin:0;width:1em;height:1em}
.tablet td input[type=button]{min-height:4em;width:80%;margin:10%}
th.ordertype{width:40px}th.orderno{width:85px}
th.quantity,th.DATE,th.SR{width:75px}
td.blank,td:empty{background:#333}
td.alert{background:#F11 !important;color:#000 !important;font-weight:bold}tr:nth-child(even) td.alert{background:#E00 !important}
td.warn{background:#FF1 !important;color:#000 !important;font-weight:bold}tr:nth-child(even) td.warn{background:#EE0 !important}
td.active{background:#1F1 !important;color:#000 !important;font-weight:bold}tr:nth-child(even) td.active{background:#0E0 !important}
td select{width:100%;margin:0;padding:0.5em 0}
tr.complete{background:#9FF}tr.complete:nth-child(even){background:#8EE}
tr.complete td.alert,tr.complete td.warn{background:transparent !important}
.viewonly td.action,.viewonly th.action{display:none}
td.comment{white-space:pre-wrap;overflow-wrap:break-word}

thead.filter {position:sticky;top:100px;background:#000}
thead.filter tr:nth-child(2){background:#AAC}thead.filter td:empty{background:#99B}
thead.filter input,thead.filter select{background: inherit;appearance: none;border:none;margin:0 !important;padding:0.25em !important;text-align:center;font-size:1rem;width:100% !important}
thead.filter input:not(:placeholder-shown),thead.filter select:not(:has( option[value=""]:checked)){background:#FFF;color: #e1302a;font-weight: bold;overflow: hidden;text-overflow: ellipsis;}

input[type=text]:focus,select:focus,textarea:focus{box-shadow:0 0 .5em #00F}
input[type=text]{padding-left:0.5em}
input[type=checkbox],input[type=radio]{width:1em;height:1em;margin:0;padding:0;vertical-align:middle;border:none}
input[type=button].checkpass{width:45%;background:#6F6;background:linear-gradient(to bottom,#DFD,#1A1)}
input[type=button].checkfail{width:45%;background:#F66;background:linear-gradient(to bottom,#FDD,#D11)}
textarea{box-sizing:border-box;max-width:100%}

.modalDialog{display:none;text-align:center;position:fixed;top:0;right:0;bottom:0;left:0;color:#000;background:rgba(222,222,222,0.8);z-index:10;opacity:0;transition:opacity 100ms ease-in;pointer-events: none;overflow:scroll}
.modalDialog.show{display:inherit;opacity:1;pointer-events:auto}
.modalDialog>div{width:100%;max-width:480px;position:relative;margin:auto;padding:1em;border-radius:.75em;border:1px solid #333;box-shadow:0 0 .5em #333;background:#fff;background:linear-gradient(#fff,#ccc)}
.modalDialog h2{text-align:center}
.modalDialog input,.modalDialog select,.modalDialog textarea{display:block;margin:0.5em auto}
.close{color:#333;position:absolute;top:0;right:0;width:2em;line-height:2em;text-align:center;text-decoration:none;font-weight:bold;cursor:pointer}.close:hover{color:#F00}

#PageNav a{font-size:14px;text-decoration:none;color:#inherit}

#SearchFilter{margin:0;margin-bottom:2px}
#SearchFilter ul{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;list-style:none;margin:0 auto;max-width:1000px}
#SearchFilter li{margin:0 0.25em;padding:0 0.25em}
#SearchFilter li input[type=text]{padding:0 0.5em}
#RepLi{order:10}
#SalesReps{display:-webkit-flex;display:flex;}
#SalesReps label{display:inline-block;font-size:10px;margin:0 1.5px;vertical-align:top;text-align:center}
#SalesReps input[type=checkbox]{display:block;width:12px;height:12px;margin:0px 1px}	
#Order{width:50px;padding:0 0.5em}#Customer{width:230px;padding:0 0.5em}#Product{width:200px;padding:0 0.5em}

#Search{display:block}
#Confirm{display:inherit;margin:10px auto;font-size:18px}#Comment{width:300px;max-height:150px;resize:vertical}
.Error{color:#F33}

.customername,.productname,.comment{text-align:left;padding-left:.25em}
.orderno{text-align:right;padding-right:.25em}

header{
	background:#FFF;
	color:#000;
	border-top: 3px solid #e1302a;
	border-bottom: 1px solid #3333;
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
	display: block;
	position: sticky;
	top:0;
	width: 100%;
	text-align:left;
	z-index:1;
}

#SiteMenu,#MobNav{
	background:#000;
	color:#FFF;
}
	
header > nav > ul {
	display:-webkit-flex;display:flex;
	-webkit-flex-wrap:wrap;flex-wrap:wrap;
	-webkit-justify-content:center;justify-content:center;
	margin:0;
	padding:0;
}
	
header > nav > ul > li {
	-webkit-flex:0 1 auto;flex: 0 1 auto;
	margin:0;
	padding:0;
	position:relative;
	transition:all linear 0.1s;
}
		
header > nav > ul > li:hover {
	background: #0008;
	z-index: 2;
}
			
header > nav > ul > li span + div {
	background:#e4002b;
	border-radius:0 0 2px 2px;
	box-shadow:0 3px 1px rgba(0,0,0,.05);
	display:none;
	font-size:1rem;
	position:absolute;
	width:195px;
}
			
header > nav > ul > li:hover span + div {
	display: block;
}
				
header > nav > ul > li span + div > ul > li {
	margin: 0;
	padding: 0;
}
					
header > nav > ul > li span + div > ul > li > a {
	color: inherit;
	display: block;	
	letter-spacing: 1px;
	padding: .25rem 1rem;
	text-decoration: none;
	text-transform: uppercase;
}
						
header > nav > ul > li span + div > ul > li:hover > a {
	background-color: #0008;
}
	
header > nav > ul > li > a , header > nav > ul > li > span {
	color:inherit;
	display:-webkit-flex;display: flex;
	-webkit-align-items:flex-start;align-items: flex-start;
	font-size:1.25rem;
	font-weight:200;
	letter-spacing:1px;
	padding:.25rem 1rem;
	text-decoration: none;
	text-shadow:0 1px 1px rgba(0,0,0,.1);
	transition:all linear 0.1s;
	cursor:pointer;
}
			
header > nav > ul > li > a > div > span {
	margin: 4px 0 0;  
}

header hr{
	margin:0
}

#MobNav{display:none;margin:0}
#MobSearch,#MobPage{display:none !important}
#MobNav>li{display:inline-block;margin:14px;width:3em;height:3em}
@media screen and (max-width:768px){
	td input[type=button]{min-height:2em}
	input,select,textarea,#PageNav a{font-size:16px !important}
	#MobNav{display:block}
	#MobNav>li a{width:100%;height:100%;display:block}
	#SiteMenu li:first-child{display:none}
	header hr{display:none}
	header nav,#SearchFilter{display:none}
	header nav:target,#SearchFilter:target{display:block}
	.drf td:nth-child(4), .drf th:nth-child(4), .drf td:nth-child(5), .drf th:nth-child(5), .drf td:nth-child(6), .drf th:nth-child(6), .drf td:nth-child(8), .drf th:nth-child(8){display:none}
	header>nav>ul,header>form>ul{-webkit-flex-direction:column;flex-direction:column}
	header>nav>ul>li span{background:grey}
	header>nav>ul>li span+div{display:block;position:inherit;width:inherit;box-shadow:none;border:none}
	/*#mobnav:not(:target)>a:first-of-type, #mobnav:target > a:last-of-type*/
	#SearchFilter li{padding:0 2em;width:100%;box-sizing:border-box}
	.SFS,.SFL,.SC{max-width:initial;min-width:initial;width:100%}
	#SalesReps{flex-wrap:wrap}
	#SalesReps input[type=checkbox]{width:2em;height:2em}
	td input[type=button]{width:95%;height:95%;margin:0 2.5%;-webkit-appearance: none;-webkit-border-radius: 0;border-radius:0;background:#6F6;background:linear-gradient(to bottom,#DDD,#CCC);min-height:1.5em;max-height:3em;min-width:1.5em;max-width:6em;white-space:normal}
	article{padding:0}
	.modalDialog{width:100%;height:100%}
	.modalDialog>div{max-height:100%;-webkit-overflow-scrolling:touch;overflow-y:scroll;}
	.modalDialog>div{max-width:100%;box-sizing:border-box;position:relative;margin:0% auto;padding:1em;border-radius:.75em;border:1px solid #333;box-shadow:0 0 .5em #333;background:#fff;background:linear-gradient(#fff,#ccc)}
	article h1{margin:0;text-align:center;background:#888;color:#FFF}
	article form{margin:0}
	article hr{display:none;margin:0}
}	

.sballlogo{margin:.2rem .5rem}