body {
	background-color: rgb(62,199,62);
	background-image: radial-gradient(ellipse at center, rgba(62,199,62,1) 16%, rgba(0,128,0,1) 100%);
	background-repeat:  no-repeat ;
	background-position: 50% 50%, 50% 50%;
	height: 100vh;
	max-height: 100vh;
	font-family:
		/* 1 */ -apple-system, BlinkMacSystemFont,
		/* 2 */ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
		/* 3 */ "Helvetica Neue", sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-size: 16px;
}

body > * { 
	flex: 0 0;
}

body > main {
	overflow-y: auto;
	flex: 1 0;
	align-items: center;
	position:relative;
}

body > nav {
	width: 100vw;
	background-color: white;
	height: 2.4rem;
	min-height: 2.4rem;
}



body > nav > div {
	display: flex;
	height: 100%;
}
body > nav > div  > span {
	display: inline-block;
	flex: 1 0 auto;
	text-align: center;
	height: 2.4rem;
	line-height: 2.4rem;
	background-color: #eeeeea;
	border-left: 2px #999 solid;
}
body > nav > div  > span:hover {
	cursor: pointer;
}
main > dialog {
	position: relative;
}
main > section {
	position: relative;
	padding: 0.5rem;
	background:#fff;
	-webkit-overflow-scrolling: touch;
}

.runlist {
	margin-bottom: 1em;
	display: block;
}
#run_items {
	display: block;

}

.run_item {
	display: flex;
	flex-direction: row;
	width: 100%;
	margin-bottom: 1em;

}

@media ( max-width: 600px ) {
	.run_item {
		display: block;
	}
}
.run_item  > div {
	padding: 1ch;
}
.run_item  header {
	font-weight: bold;

}

.run_item  header div:last-child {
	float: right;
	text-align: right;
}

.run_item > div:first-child {
	flex-grow: 1;
}
.run_item  > div:last-child {

}

/*-----29-05-2018 added feature mark incomplete------*/
.btn-mark_incomplete
{
	display:none !important;
}

.run_item.completedjob>div>header>.btn-mark_incomplete
{
	display:block !important;
}
/*-----29-05-2018 added feature mark incomplete------*/

.completedjob.hidden{
	outline: 1px red solid;
	display: none;
}


.run_item.jobcancel div, .run_item.completedjob div  {
	display: none;

}
.run_item.jobcancel > div:first-child, .run_item.completedjob > div:first-child   {
	display: block;
}
.run_item.jobcancel {
	background-color: maroon;
	color: white;
	font-size: .8em;
}
.run_item.jobcancel:before {
	content: "\2718: "
}

.run_item.completedjob {
	background-color: lightgoldenrodyellow;
	color: black;
	font-size: .8em;
}
.run_item.completedjob:before {
	content: "\002714: "
}

.run_item  > div:last-child > button {
	display: block;
	width: 100%;
}
.run_item  > div:last-child > button[data-action=ReportDocket] {
	display: none;
	width: 100%;
}

.run_item_note {
	border: 1px solid grey;
	box-shadow: 2px 2px 4px gray;
	padding: 1ch
}

.run_item_note table {
	border-top: 1px dotted gray;
	border-collapse: collapse;

}
.run_item_note table td, .run_item_note table th {
	border: 1px solid lightgray;
}

.runlist_note {
	text-align: center;
	border: 2px dashed #fff;
	color: #fff;
	background-color: #000;
	font-weight: bold;
	padding: 0.25em;
	display: block;
}
.runlist_disposal .run_item_note {
    border-left: 1em solid gold;
}

.runlist_disposal > div:last-child > button[data-action=ReportBinNotOut]{
	display: block;
}
.runlist_disposal > div:last-child > button[data-action=ReportDocket]{
	display: block;
}

.runlist_alert .run_item_note:before {
    content: "Customer must be called before the collection";
	color: #F00;
	font-weight: bold;
	text-align: center;
}

.runlist_newjob .run_item_note {
    border-left: 1em solid green;
}


input.camera_input {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
label.camera_input {
    font-size: 1.25em;
    font-weight: 700;
    color: #000;
	border: 1px black solid;
	padding: 1ch;
    display:block;
	cursor: pointer; /* "hand" cursor */
	text-align: center;
}

.checkbox { 
	padding: .4rem;
	margin-bottom: .5em;
    padding: .4rem;
    margin-bottom: .5em;
    display: block;
    font-size: 1.2rem;
}
.checkbox:hover {
	background-color: rgba(0,0,0,.1)
}
.checkbox input[type=checkbox] {
	height: 1.2rem
}



dialog.requesting:after, main > section.requesting:after  {
	background: rgba(1, 1, 1, 0.8) no-repeat scroll 0 0;
    box-sizing: border-box;
    color: #fff;
    font-size: 40px;
    bottom:0;
    left: 0;
    padding-top: 25%;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
	display:block;
	content: url('/_res/images/hourglass.svg')
}


.blocklist li {
	display: block;
}
.blocklist li label {
	outline: 1px rgba(99,99,99,0.3) solid

}


#connection, .up, .down {
	position: relative;
	display: inline-block;
}

.up:after, .down:after {
	content: attr(title);
    font-size: .6rem;
    position: absolute;
    right: 0;
	bottom: -1em;
	width:100%;
	text-align: center;
}

.up.animated {
	color: green;
}
.down.animated {
	color: green;
}


footer .form-message {
	text-align: center;
}