html
* { font-family: lato, sans-serif; font-weight:300; user-select: none; }
a { text-decoration:none !important; color: #333; }
input { color: #333 !important; width:100%; border: 0; border-bottom:1px solid #888; padding:4px 0; margin-top:4px; outline: none; border-radius:0; }
head,body { overflow: hidden; background-color: #eee; }
select { width:100%; padding:8px; border:0; border-bottom:1px solid #888; margin-top:20px; outline: none; border-radius:0; background-color: white; }
p { margin-block-end: 0; }
b { font-weight:bold; }
body { }
body { font-size: 16px; }
input, select { font-size: 100%; }

.highlight { background-color: #ddd; font-weight:normal; }
.redold { color: #ec0c30; }
.grn { color: #090; }
.red { color: #d2543c; }

div.container
{
	background-color: white;
	margin:20px 0;
	border:1px outset;
	border-radius: 10px;
	padding: 10px;
}

.fieldtag {
	font-size: 10px;
	color: #d2543c;
	text-align: left;
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}

.btn {
	border: 2px outset;
	color: #444;
	background-color: white;
	padding: 8px 20px;
	border-radius: 10px !important;
	font-size: 20px;
	font-weight: bold;
	outline: none;
}

.btn-small {
	font-size: 18px;
	padding: 2px 10px;
	margin: 10px 10px 10px 0;
}

.auditbtn {
	border: 1px outset;
	color: #444;
	background-color: white;
	padding: 3px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 200 !important;
	outline: none;
	width: 62px;
	height:80px;
	line-height: 1em;
}

.auditbtn img { margin-bottom: 4px; }
.auditbtn.single { line-height: 2em; }

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

div.bigredbtn, div.biggreybtn, input.bigredbtn, input.bigredbtn, button.bigredbtn, button.biggreybtn { 
	width:80%;
	height: 40px; 
	margin: 10px auto 0px;
	padding: 0; 
	line-height: 40px;  
	color:#333; 
	font-weight:700; 
	font-size: 16px;
	display:inline-block; 
	border-radius: 10px !important;
	border: 1px outset;
	text-align: center;
	text-transform: uppercase;
}

div.bigredbtn, input.bigredbtn, button.bigredbtn { 
	background-color:#fff; 
}

div.biggreybtn, input.biggreybtn, button.biggreybtn {
	color: black;
	background-color:#fff; 
}

.squarebtn {
	display: inline-block;
	background-color: #fff;
	width: 150px;
	height: 150px; 
	margin: 9px;
	color:#333; 
	font-weight:400; 
	font-size: 15px;
	display:inline-block; 
	border-radius: 10px !important;
	border: 1px outset;
	text-align: center;
	float: left;
}

.squarebtn.tl { margin-left: 0; margin-right: 9px; }
.squarebtn.tr { margin-left: 19px; margin-right: 0px; }
.squarebtn.bl { margin-left: 0; margin-right: 9px; }
.squarebtn.br { margin-left: 9px; margin-right: 0px;  }


.uploadsquare {
	width: 150px; 
	height: 160px; 
	overflow: hidden; 
	float: left;
}

.uploadsquare form { width: 170px; }


input.red {
	border-bottom: 1px solid #444;
	background-color: inherit;
	margin:20px 0;
	text-align: center;
}

div.normal {
	margin: 80px auto 10%;
	padding-bottom:20px;
	width: 90%;
	QQcolor: black;
	weight: 300;
	text-align: center;
}

div.error {
	border:1px solid #ec0c30;
	border-radius: 5px;
	margin: 20px 10px;
	padding:10px;
	font-size: 20px;
	font-weight: bold; 
	color: #ec0c30;
}

div.toppadding { height: 40px; }

div#banner { 
	position:absolute; 
	z-index:1;
	top:0; 
	left:0; 
	width:100%; 
	height:70px; 
	line-height:70px; 
	color: white; 
	background-color: #000;
	font-size: 20px;
	text-align: center;
}

div#homebanner { 
	position:absolute; 
	z-index:2;
	top:0; 
	left:0; 
	width:100%; 
	height:90px; 
	color: white; 
	background-color: #ec0c30;
	background-image: url("/img/bannerbg2.png");
	background-repeat: repeat-x;
	font-family: lato, sans-serif; 
	font-weight: 300; 
	text-align: center; 
}

div.hp-info {
	margin-top:20px;
	font-size:12px;
}

div.scanblock {
	display: none;
	margin: 20px 0;
}


div#photos {
	display: none;
	height: 300px;
	overflow-y: scroll;
	border:1px solid #aaa;
	font-size:12px;
}

div#overlay {
	z-index: 100;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	background-color: #000;
	display: none;
}

div#overlay img {
	margin: auto;
	vertical-align: middle;
}

div#overlay2 {
	z-index: 100;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	background-color: #eee;
	display: none;
}

div#overlay3 {
	z-index: 100;
	position: absolute;
	top: 70px;
	left: 0;
	width: 100%;
	height: calc(100% - 70px);
	background-color: #eee;
	display: none;
}


img#spinner {
	position:fixed;
	top:150px;
	left:50%;
	transform: translate(-50%,0);
}

div#spinmsg {
	margin: 150px auto;
	text-align: center;
	font-size: 18px;
	display:none;
}


div.scaninfo {
	font-size: 12px;
	text-align: left;
	line-height: 1.2em;
	margin-top: 10px;
}

div.scaninfo span {
	display: inline-block;
	width: 40px;
}

div.scaninfo.red b {
	color: #ec0c30;
}

div.scaninfo.grn b {
	color: #090;
}

div#interactive2 {
	width: 240px;
	height: 320px;
	background-color:#aaa;
}

video {
	position: absolute;
	left: 0;
	top: 0;
}

div#overlay, div#edit_overlay { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	overflow: hidden; 
	background-color: #000; 
	opacity: 0.5; 
	z-index: 30; 
	display: none;
}

div#edit_overlay {
	top: 70px;
	opacity: 1;
	background-color: white;
}

div#spinner {
	position: absolute; 
	height:100%;
	width:100%;
	opacity: 1;
	background-color:#fff; 
	font-size: 17px; 
	font-weight:bold; 
	z-index:100; 
	display:none;
}

div#popup, div#confirm {
	position: absolute; 
	top:0; 
	left:45px; 
	width: 260px;
	margin:130px 0 20px; 
	border: 1px outset; 
	border-radius:10px; 
	background-color:#f2f2f2; 
	font-size: 17px; 
	font-weight:bold; 
	padding:10px; 
	z-index:50; 
	display:none;
}

div#confirm {
	background-color:#e8e8e8;
}

div#popupmsg, div#confirmmsg {
	font-size: 17px; 
	font-weight: bold;
}

div#popupButton, div#confirmbtn {
	margin:30px 0 0; 
	padding-bottom:10px; 
	border-top:1px solid #888;
}


div#popupButton button, div#popupButton button {
	float: right;
	margin-top: 10px;
}

div#confirmbtn button {
	float: right;
}
	
div#edit_window {
	position: absolute; 
	top:0; 
	left:0; 
	margin:20px 20px 20px; 
}

table.edit { 
	width: 100%; 
	max-width: 500px; 
	padding-right: 10px;
}

table.edit tr { 
	height: 15px;
}

table.edit td { 
	vertical-align: middle;
	text-align: left;
	padding:2px 6px;
	height: 15px;
}

table.edit input { 
	margin: 5px 0 0 0;
	width: 100%;
	padding: 5px 2px;
}

table.edit select {
	margin: 5px 0 0 0;
	background-color: white;
	width: 100%;
	padding: 5px 2px;
}

div.locker {
	float: left;
	width: 80px;
	height: 90px;
	display: inline-block;
	margin: 10px 4px 4px;
	font-size: 28px;
	font-weight: 600;
	line-height: 38px;
}

div.auditblock {
	display: inline-block;
	text-align: left; 
	margin-left: 10px;
	margin-top: 4px;
	vertical-align: top;
	width: 200px;
	line-height: 25px;
}

div.auditblock img {
	vertical-align: middle;
}

div.reslist {
	height: 175px;
	border:1px solid #aaa;
	border-radius: 5px;
	overflow-y: scroll;
}
	
div.reslist span {
	display:inline-block;
	width: 100%;
	line-height: 2em;
	height: 2em;
}

div.reslist span.highlight {
	background-color: #ddd;
}

div#parcellist {
	width:240px;
	height:125px;
	overflow-y: scroll;
}

div#parcellist div {
	border-bottom: 1px solid #aaa;
	padding:5px;
	text-align: left;
	font-size:12px;
	font-weight: bold;
}

div#lockerpin {
	font-size: 32px;
	font-weight: bold;
	padding: 8x 0;
	width: 120px;
	margin: 15px auto;
	border: 1px solid black;
}