body { background-color:#eeeeee; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif;}
	table, DIV.content { background-color: #CCCCCC; font-size: 100%; }
	P { font-size:14px; }
	td.copyright { font-size:10px; background-color:#AAAAAA}
	td.tittel { font-size:12px; background-color:#AAAAAA}
	td.meny { font-size: 12px; background-color:#AAAAAA}
	tr.green { background-color:#00FF66}
	tr.rapport { background-color:#FFCC66; border: thin solid black}
	.action { background-color: #AAAAAA; color:#000000; padding:3px}
	A.action { text-decoration: none }
	a.button { padding:2px 5px 0px 5px; text-decoration:none; border:#000000 1px solid; background:#AAAAAA; }
	a { text-decoration: none; color:#0000AA }
	a:hover { text-decoration:underline; color: #000000; }
	a.active {
		color: #EE0000;
		font-weight: bold;
	}
	wbr:after { content: "\00200B" }
	
	.inactive TD {
		color: #AAAAAA;
	}
	
	.pageheader {
		padding:0;
		text-align: left;
		padding-left: 763px;
		height:84px;
		background: #DDDDDD;
	}
	
	.pagefooter {
		font-size:10px;
		height:15px;
		width: 1220px;
		background-color:#AAAAAA;
		border-left:#000000 1px solid;
		border-right:#000000 1px solid;
		border-bottom:#000000 1px solid;
	}
	
	.pagewrap {
		width:1420px;
		overflow: inherit;
		border:#000000 1px solid;
		background-color:#CCCCCC;
		vertical-align:top;
	}
	
	.menuwrap {
		background-color:#AAAAAA;
		height:20px;
		margin:0px;
		padding:0px;
		vertical-align:top;
	}
	
	.curmenu {
		height:20px;
		float:left;
		padding-left:5px;
		vertical-align:top;
	}
	
	.menu {
 		height:20px;
 		float:right;
 		padding-right:5px;
 		vertical-align:top;
	}
	
	.content {
		padding: 5px;
		width: 1200px;
		box-sizing:  border-box;
	}
	
	.content_main {
		padding: 0px;
		width: 1220px;
	}
	
	.content_popup {
		padding: 5px;
		background-color: #CCCCCC;
		font-size: 12px;
	}

	DIV.radiogroupactions { position: absolute; margin-top: -20px; right: 10px; padding: 2px; text-align: right; background-color: #CCCCCC; }
	DIV.radiogroupactions SPAN { margin: 3px; }
	DIV.radiogroupname { color: #777777; background-color: #CCCCCC; position: absolute; margin-top: -22px; padding: 2px;}
	DIV.radiogroup { position: relative; border: 1px solid #777777; margin-top: 12px; margin-bottom: 10px; padding: 5px; padding-top: 10px;}
	
	SPAN.unselected { color: #AAAAAA; }
	
	DIV.error { border: 1px solid #FF0000; color: #FF0000; padding: 3px; margin: 2px 0px;}
	.error {
		color: #EE0000;
		font-weight: bold;
	}
	
	.progress { border: 1px solid #666600; width: 100px; height: 10px; float: left; margin-top: 5px;}
	.progress DIV { background-color: #999900; width: 0px; height: 10px;}
	
	TD.loginfo { font-size: 75%; width: 120px;}
	.logred { color: #DD0000; font-weight: bold; }
	TABLE.log { width: 600px; }
	
	
	.bugs {
		font-weight: bold;
		font-size: 11px;
	}
	
	.bugs TR.new {		background-color: #FFBBBB;	}
	.bugs TR.open {		background-color: #BBBBFF;	}
	.bugs TR.pending {background-color: #FFFFBB;	}
	.bugs TR.closed {	background-color: #BBFFBB;	}

	TD.report, TH.report {
		padding-bottom: 10px;
	}

	.report TH {
		text-align: left;
	}
	
	H1 {		font-size: 165%;	}
	H2 {		font-size: 150%;	}
	H3 {		font-size: 135%;	}
	H4 {		font-size: 120%;	}
	H5 {		font-size: 115%;	}
	H6 {		font-size: 110%;	}
	
	.content { font-size: 11px; }

	li.menu
		{
			display:inline;
			text-align: left;
		}

	td.adminmenu { background-color: #FFFFCC }
	
	tr.selectablerow TD {
		cursor: pointer;
	}
	
	tr.selectablerow:hover {
		background-color: #DDDDAA;
	}
	
	tr.selectablerow.selected {
		background-color: #AAAAAA;
	}

	.button
		{
			text-decoration:none;
			background:#AAAAAA;
			border:#000000 1px solid;
		}
	
	.hovertext {
		text-decoration: underline;
		cursor: pointer;
	}
		
	.imagebutton
		{
			cursor: pointer;
		}
		
	.list {
		width: 99%;
		border-collapse: collapse;
	}
	
	.list TH {
		background-color: #AAAAAA;
		padding-left: 4px;
		border: 1px solid #885511;
	}
	
	.list TD {
		border: 1px solid #AAAAAA;
		padding: 2px;
	}
	
	.list TH.action {
		background-color: #000000;
		color: #AAAAAA;
	}
	
	.list .action {
		width: 50px;
		text-align: center;
	}
	
	.list .center {
		text-align: center;
	}
	
	.list TD.action {
		border: 1px solid #FFFFCC;
	}
	
	.list TD.action A {
		display: block;
	}
	
	.list TR.type2 {
		background-color: #FF9999;
	}
	
	.list TR.type3 {
		background-color: #77DD77;
	}
	
	.list TR.hover {
		background-color: #FFEE77;
	}
	
	.list TD.hover {
		background-color: #FFEE77;
	}
	
	.list .divitem {
		height: 20px;
	}
	
	.list TD.section {
		background-color: rgba(0, 0, 255, 0.1);
	}
	
	.list TH.section {
		background-color: rgba(0, 0, 128, 0.2);
	}
	
	.list TR.deviation {
		background-color: rgba(255, 0, 0, 0.1);
	}
	
	A:HOVER IMG {
		opacity: 0.5;
		filter: alpha(opacity=50);
	}
	
	.list .action A:HOVER {
		text-decoration: none;
	}
	
	.list .dragdrop {
		border: 0px none;
		background-color: transparent;
	}
	
	.icon {
		border: 0px none;
		vertical-align: middle;
	}
	
	.sidebar {
		background-color: #FFE869;
		width: 255px;
		font-size: 11px;
	}
		
	.sidebar DIV, .sidebar TABLE {
		background-color: #FFE869;
	}
	
	.add {
		display: inline-block;
		min-width: 46px;
	}
	
	BUTTON {
		vertical-align: middle;
	}
	
	H2 {
		border-bottom: 1px solid #000000;
		padding-bottom: 2px;
	}
	
	INPUT { vertical-align: middle; }
	
	INPUT.number {
		width: 80px;
	}
	
	INPUT.checkbox {
		margin: 0px;
		padding: 0px;
		height:  14px;
	}
	
	LABEL.unselected {
		color: #999999;
	}
	
	LABEL.unselected INPUT {
		color: #999999;
		border-color: #999999;
		border-style: solid;
	}
	
	.pleasewait {
		background: #eeeeee;
		left: 0px;
		top: 0px;
		
		width: 100%;
		height: 200%;
		
		position: absolute;
		z-index: 10;
	}
	
	.pleasewait DIV {
		background-color: #CCCCCC;
		width: 300px;
		height: 200px;
		border: 1px solid #FF0000;
		padding: 30px;
		position: absolute;
		left: -150px;
		top: 0px;
		margin-left: 50%;
		margin-top: 200px;
	}
	
	.twolinemenu {
		margin-top: -12px;
		position: absolute;
	}
	
	.calendar {
		border-collapse: collapse;
	}
	
	.calendar TD {
		width: 30px;
		padding: 2px;
		text-align: center;
		vertical-align: middle;
	}
	
	.calendar TD.cur {
		background-color: #88FF88;
	}
	
	.dateinput {
		border: 1px solid #444444;
		background-color: #FFFFFF;
		display: inline-block;
	}
	
	.dateinput INPUT {
		width: 18px;
		border: 0px none;
		background-color: inherit;
		overflow: hidden;
		padding: 2px;
	}
	
	.content {
		width: 100%;
	}
	
	.content table {
		width: 95%;
	}
	
	.content .right tr td:nth-of-type(4) {
		width: 95px;
	}
	
	.content #scanner {
		opacity: 0;
		width: 0px;
		height: 0px;
	}
	
	.content .left {
		display: inline-block;
		vertical-align: top;
		width: 30%;
	}
	
	.content .left A {
		display: block;
	}
	
	.content .left TR {
		background-color: #FFF;
	}
	.content .left TR TD {
		padding: 2px;
		margin: 0px;
	}
	
	.content .left .selected {
		font-weight: bold;
		background-color: #DDFFDD;
	}
	
	.content .right {
		display: inline-block;
		vertical-align: top;
		width: 65%;
	}
	
	.content .right input {
		width: 90px;
		display: block;
		height: 100%;
		position: relative;
		box-sizing: border-box;
	}
	
	.content .order-items {
		border-spacing: 0;
		border-collapse: collapse;
	}

	.content .order-items TR > * {
		border: 2px solid #FFF;
		padding: 4px;
	}

	.content TR.done {
		font-weight: bold;
		background-color: #CCFFCC;
	}
	
	.content TR.next {
		font-size: 150%;
		background-color: #FFFFCC;
	}
	
	.content TR.last {
		background-color: #AAAAAA !important;
	}
	
	.content TR.last.done {
		background-color: #88CC88 !important;
	}
	
	.content H1.done {
		color: #DD0000;
	}
	
	.content TD.done A {
		color: #DD0000;
	}
	
	.content .left TD {
		vertical-align: top;
	}
	
	.content BUTTON {
		border: 1px solid #666;
		padding: 10px 25px;
		margin: 10px 10px 0px 0px;
		font-size: 18px;
	}
	
	.content .left .code {
		width: 70px;
	}
	
	.content .left TD {
		position: relative;
		height: 40px;
	}
	
	.content .left TD A {
		display: block;
		height: 100%;
	}
	
	.content .mini {
		color: #aaa;
		text-align: right;
		font-size: 12px;
		position: absolute;
		right: 2px;
		bottom: 2px;
		pointer-events: none;
	}
	
	.content .who {
		min-width: 40px;
	}
	
	.content .waitingBox {
    font-size: 15px;
    font-weight: bold;
    vertical-align: middle;
    display: inline-block;
    padding: 2px;
    background-color: #DDAA77;
    position: absolute;
    right: 2px;
    top: 2px;
		pointer-events: none;
	}
	
	.content TR.new * {
		background-color: #BBFFBB;
	}
	
	.content .trans {
		background-color: #CCCCFF !important;
	}
	
	.content .order-items img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}
	
	.content .order-items .file-container {
		position: relative;
	}
	
	.content .order-items .file-container::after {
		position: absolute;
		right: 0px;
		bottom: 0px;
		width: 32px;
		height: 32px;
		content: "∧";
		color: #FFFFFF;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		padding-top: 3px;
		background-color: rgba(0, 0, 0, 0.8);
		pointer-events: none;
		box-sizing: border-box;
		outline: 1px solid #ccc;
	}
	
	.content .order-items .file-cover {
		position: absolute;
		right: 0px;
		bottom: 0px;
		width: 32px;
		height: 32px;
		opacity: 0.5;
	}
	
	.content .transaction-log {
		border-collapse: separate;
		border-spacing: 5px;
		width: auto;
	}
	
	.content .transaction-log td {
		padding: 3px;
		margin: 2px;
		background-color: rgba(255, 255, 255, 0.5);
	}
	
	.overlay {
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		left: 0px;
		top: 0px;
		right: 0px;
		bottom: 0px;
		z-index: 100;
		width: 100%;
		height: 100%;
	}
	
	.overlay > * {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}
	
	
#scanIndicator {
  background-color: red;
  color: #FFF;
  border: 0px none;
  appearance: none;
  margin: 2px;
}

#scanIndicator.active {
  background-color: green;
}

p#waitingBoxText {
    background-color: #FFCCAA;
    display: block;
    padding: 5px;
    margin: 12px 0px;
    width: 200px;
    /* vertical-align: text-top; */
}

#waitingBox {
    font-size: 20px;
    font-weight: bold;
    vertical-align: middle;
    display: inline-block;
    padding: 5px;
    background-color: #DDAA77;
}

.hidden {
	display: none !important;
}

BUTTON.scannable {
	position: relative;
	width: 250px;
	background-color: #FFF;
	box-sizing: border-box;
	padding-bottom: 20px !important;
}

BUTTON.scannable::after {
	background-repeat: no-repeat;
	background-position: top center;
	position: absolute;
	content: "";
	bottom: 2px;
	left: 0px;
	height: 10px;
	width: 248px;
	background-color: white;
	box-sizing: border-box;
}

BUTTON.scannable.b-0::after { background-image: url(/barcode.php?b-0); }
BUTTON.scannable.b-1::after { background-image: url(/barcode.php?b-1); }
BUTTON.scannable.b-2::after { background-image: url(/barcode.php?b-2); }
BUTTON.scannable.b-3::after { background-image: url(/barcode.php?b-3); }
BUTTON.scannable.b-4::after { background-image: url(/barcode.php?b-4); }

#storage-items INPUT[type=text] {
	width: 100%;
}

#storage-items .w1 {
	width: 8.3%;
}

#storage-items .w2 {
	width: 16.6%;
}

#storage-items .w3 {
	width: 25%;
}

#storage-items .w4 {
	width: 33%;
}