@charset "utf-8";
/* CSS Document */
HTML, BODY {
	margin: 0;	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #000000;
	background: #f2f2f2;
}
a {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
}

a.backbutton {
	display: inline-block;
	width: 50px;
	height: 50px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,1);
	text-indent: -99999px;
	clear: both;
	margin-bottom: 15px;
	box-sizing: border-box;
	margin-right: 15px;
	vertical-align: top;
	font-size: 40px;
	position: relative;
}
a.backbutton:before {
	position: absolute;
	left: 0px;
	top: 0px;
	width: calc(100% - 3px);
	line-height: 50px;
	text-align: center;
	
	
	text-indent: 0px;
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f104";
}

a.newbutton {
	display: inline-block;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	line-height: 48px;
	border: 1px solid rgba(0,0,0,1);
	text-align: left;
	clear: both;
	margin-bottom: 15px;
	box-sizing: border-box;
	padding-right: 7px;
	padding-left: 7px;
	color: #000000;
	font-size: 20px;
	font-weight: normal;
	margin-right: 15px;
	vertical-align: top;
}
a.newbutton:before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f067";
	padding-right: 7px;
}

a.deletebutton {
	display: inline-block;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	line-height: 48px;
	border: 1px solid rgba(0,0,0,1);
	text-align: left;
	clear: both;
	margin-bottom: 15px;
	box-sizing: border-box;
	padding-right: 7px;
	padding-left: 7px;
	color: #000000;
	font-size: 20px;
	font-weight: normal;
	margin-right: 15px;
	vertical-align: top;
}
a.deletebutton:before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f1f8";
	padding-right: 7px;
}

a.editbutton {
	display: inline-block;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	line-height: 48px;
	border: 1px solid rgba(0,0,0,1);
	text-align: left;
	clear: both;
	margin-bottom: 15px;
	box-sizing: border-box;
	padding-right: 7px;
	padding-left: 7px;
	color: #000000;
	font-size: 20px;
	font-weight: normal;
	margin-right: 15px;
	vertical-align: top;
}
a.editbutton:before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f044";
	padding-right: 7px;
}

a.pdfDownload {
	display: inline-block;
    box-sizing: border-box;
    background: #e0dede;
    color: #000000;
    padding: 5px 12px;
    text-decoration: none;
    font-weight: normal;
    cursor: pointer;
    line-height: 32px;
    font-size: 20px;
	margin-top: 25px;
}
a.pdfDownload:before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f1c1";
	padding-right: 7px;
}

a.bulkTransfer {
	display: inline-block;
    box-sizing: border-box;
    background: #e0dede;
    color: #000000;
    padding: 5px 12px;
    text-decoration: none;
    font-weight: normal;
    cursor: pointer;
    line-height: 32px;
    font-size: 20px;
	margin-bottom: 15px;
}
a.bulkTransfer:before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f472";
	padding-right: 7px;
}

a.deleteCollection {
	display: inline-block;
    box-sizing: border-box;
    background: #e0dede;
    color: #000000;
    padding: 5px 12px;
    text-decoration: none;
    font-weight: normal;
    cursor: pointer;
    line-height: 32px;
    font-size: 20px;
	margin-top: 25px;
}
a.deleteCollection:before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f1f8";
	padding-right: 7px;
}

a.togglebutton {
	display: inline-block;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	line-height: 48px;
	border: 1px solid rgba(0,0,0,1);
	text-align: left;
	clear: both;
	margin-bottom: 15px;
	box-sizing: border-box;
	padding-right: 7px;
	padding-left: 7px;
	color: #000000;
	font-size: 20px;
	font-weight: normal;
	margin-right: 15px;
	vertical-align: top;
}
a.togglebutton.toggleon:before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f205";
	padding-right: 7px;
}
a.togglebutton.toggleoff:before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f204";
	padding-right: 7px;
}

h1 {
	margin-top: 0px;
}
div#content {
	padding: 25px 0px;
}
DIV.inner, ul.inner {
	width: 100%;
	min-width: 320px;
	max-width: 1240px;
	margin: 0px auto;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	padding: 10px;
}
a img {
	border:none;
	display: block;
}
.actioncomplete {
	padding: 7px;
	line-height: 24px;
    font-size: 18px;
	color: #005604;
	border: 1px solid rgba(0,0,0,0.2);
	text-align: center;
	background: rgba(0,0,0,0.05);
	margin-bottom: 25px;
}
div.norecords {
	padding: 7px;
	line-height: 24px;
    font-size: 18px;
	color: #b50c0c;
	border: 1px solid rgba(0,0,0,0.2);
	text-align: center;
	background: rgba(0,0,0,0.05);
	margin-bottom: 25px;
}
div.wrapper {
	overflow: hidden;
}
.hideable, .hideable1, .hideable2 {
	max-height: 5000px;
	overflow: hidden;
	
	-webkit-transition: max-height 500ms ease-in-out;
	-moz-transition: max-height 500ms ease-in-out;
	-o-transition: max-height 500ms ease-in-out;
	transition: max-height 500ms ease-in-out;
}
.hideable.hidden, .hideable1.hidden, .hideable2.hidden {
	max-height: 0px;
}
h2.small {
	font-size: 16px;
    margin: 0px 0px 15px 0px;
}

DIV.pagination {
	text-align: center;
	padding: 15px 0px 0px 0px;
	margin: 30px 0px 0px 0px;
	border-top: 1px dashed #e0dede;
}
.formatAsButton {
	cursor: pointer;
    line-height: 32px;
    font-size: 24px;
    padding: 10px 24px;
    text-decoration: none;
    font-weight: normal;
    height: auto;
    border: 0px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #e0dede;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: #000000;
    text-align: center;
	margin-top: 10px;
}
.button {
	cursor: pointer;
    line-height: 32px;
    font-size: 20px;
    padding: 0px 0px;
    text-decoration: none;
    font-weight: normal;
    height: auto;
    border: 0px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #e0dede;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: #000000;
    text-align: center;
	margin-bottom: 7px;
}
.table.collectionitems .cell .button:last-child {
	margin-bottom: 0px;
}

/* Table Generic */
div.table {
	font-size: 20px;
    line-height: 28px;
}
div.table .row {
	overflow: hidden;
	display: block;
}
div.table .row:nth-of-type(odd) {
	background: rgba(0,0,0,0.1);
}
div.table .row:nth-of-type(even) {
	background: rgba(0,0,0,0.15);
}
div.table .row.header {
	background: rgba(0,0,0,0.3);
	color: #ffffff;
}
div.table .row.header .cell {
	padding: 14px;
}
div.table .row div.cell {
	float: left;
	box-sizing: border-box;
	font-weight: normal;
}
div.table .row div.cell a, div.table.spacecells .row div.cell {
	font-weight: normal;
    display: block;
    width: 100%;
    height: 100%;
	padding: 14px;
	box-sizing: border-box;
}
div.table.spacecells .row div.cell a {
	padding: 0px;
}


/* Table Specific */
div.table.collectionlist .row {
	display: flex;
}
@media screen and (max-width: 1000px) {
	div.table.collectionlist .row .cell a {
		padding-top: 35px;
		padding-bottom: 35px;
	}
}
div.table.collectionlist .row .cell a {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

	/* Normal User Set */
div.table.collectionlist .row div.cell:nth-of-type(1) { /* Customer */
	width: calc( 100% - 200px - 90px - 130px );
}
div.table.collectionlist .row div.cell:nth-of-type(2) { /* Collection Type */
	width: 200px;
	text-align: center;
}
div.table.collectionlist .row div.cell:nth-of-type(3) { /* Status */
	width: 90px;
	text-align: center;
}
div.table.collectionlist .row div.cell:nth-of-type(3) a span {
	margin: 0px auto;
}
div.table.collectionlist .row div.cell:nth-of-type(4) { /* Call Now */
	width: 130px;
	text-align: center;
}

	/* Admin Set */
div.table.collectionlist.admin .row div.cell:nth-of-type(1) { /* Customer */
	width: calc( 100% - 220px - 200px - 240px - 180px );
}
div.table.collectionlist.admin .row div.cell:nth-of-type(2) { /* Driver */
	width: 220px;
	text-align: center;
}
div.table.collectionlist.admin .row div.cell:nth-of-type(3) { /* Collection Type */
	width: 200px;
	text-align: left;
}
div.table.collectionlist.admin .row div.cell:nth-of-type(4) { /* Status */
	width: 240px;
	text-align: center;
}
div.table.collectionlist.admin .row div.cell:nth-of-type(4) a span {
	margin: 0px auto;
}
div.table.collectionlist.admin .row div.cell:nth-of-type(5) { /* Added */
	width: 180px;
}


div.table.collectionlist .row:hover {
	background: rgba(0,0,0,0.35);
	color: #ffffff;
}
div.table.collectionlist .row.header:hover {
	background: rgba(0,0,0,0.3);
	color: #ffffff;
}
div.table.collectionlist .row.header select {
	cursor: pointer;
}

/* Table Specific */
div.table.collectionitems .row div.cell:nth-of-type(1) {
	width: 200px;
}
div.table.collectionitems .row div.cell:nth-of-type(2) {
	width: 150px;
}
div.table.collectionitems .row div.cell:nth-of-type(3) {
	width: calc( 100% - 200px - 150px - 150px );
}
div.table.collectionitems .row div.cell:nth-of-type(4) {
	width: 150px;
}

/* Table Specific */
div.table.vehiclelist .row div.cell:nth-of-type(1) {
	width: calc( 100% - 100px );
}
div.table.vehiclelist .row div.cell:nth-of-type(2) {
	width: 100px;
}

/* Table Specific */
div.table.productlist .row div.cell:nth-of-type(1) {
	width: calc( 100% - 300px - 180px );
}
div.table.productlist .row div.cell:nth-of-type(2) {
	width: 300px;
	word-break: break-all;
}
div.table.productlist .row div.cell:nth-of-type(3) {
	width: 180px;
}

/* Table Specific */
div.table.userlist .row div.cell:nth-of-type(1) {
	width: calc( 100% - 350px - 350px );
}
div.table.userlist .row div.cell:nth-of-type(2) {
	width: 350px;
}
div.table.userlist .row div.cell:nth-of-type(3) {
	width: 350px;
	
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* Table Specific */
div.table.customerlist .row div.cell:nth-of-type(1) {
	width: calc( 100% - 300px );
}
div.table.customerlist .row div.cell:nth-of-type(2) {
	width: 300px;
}

/* Table Specific */
div.table.customerlocationlist .row div.cell:nth-of-type(1) {
	width: 300px;
}
div.table.customerlocationlist .row div.cell:nth-of-type(2) {
	width: calc( 100% - 300px );
}

/* Table Specific */
div.table.customerproductlist .row div.cell:nth-of-type(1) {
	width: calc( 100% - 150px );
}
div.table.customerproductlist .row div.cell:nth-of-type(2) {
	width: 150px;
}

/* Table Specific */
div.table.billingrunlist .row div.cell:nth-of-type(1) {
	width: 100px;
}
div.table.billingrunlist .row div.cell:nth-of-type(2) {
	width: calc( 100% - 100px );
}

/* Table Specific */
div.table.transferpagev2 .row div.cell {
	padding: 10px;
}
div.table.transferpagev2 .row div.cell:nth-of-type(1) {
	width: 50px;
}
div.table.transferpagev2 .row div.cell:nth-of-type(2) {
	width: calc( 100% - 50px - 100px - 170px - 170px - 30% );
}
div.table.transferpagev2 .row div.cell:nth-of-type(3) {
	width: 100px;
}
div.table.transferpagev2 .row div.cell:nth-of-type(4) {
	width: 170px;
}
div.table.transferpagev2 .row div.cell:nth-of-type(5) {
	width: 170px;
}
div.table.transferpagev2 .row div.cell:nth-of-type(6) {
	width: 30%;
}


div.table.transferpagev2 .row {
	cursor: pointer;
}
div.table.transferpagev2 .row.header {
	cursor: auto;
}
div.table.transferpagev2 .row div.cell input[type=checkbox] {
	width: 30px;
	height: 30px;
	float: left;
	clear: none;
	margin: 0px;
    padding: 0px;
	box-sizing: border-box;
	cursor: pointer;
}
div.table.transferpagev2 .row div.cell input[type=checkbox]:focus{
	outline: 0;
}
div.table.transferpagev2 .row div.cell input[type=checkbox]:checked {
	background-image: url(/images/icon/tick.png);
	background-size: 60% auto;
	background-repeat: no-repeat;
	background-position: center;
	image-rendering: -webkit-optimize-contrast;
}


/* Stage 1 Form */
form#stage1form .wrapper .input-row:nth-of-type(1) {
	width: 200px;
	margin-right: 7px;
	float: left;
	clear: none;
}
form#stage1form .wrapper .input-row:nth-of-type(2) {
	width: 150px;
	margin-right: 7px;
	float: left;
	clear: none;
}
form#stage1form .wrapper .input-row:nth-of-type(3) {
	width: calc( 100% - 200px - 150px - 7px - 7px );
	float: left;
	clear: none;
}


/* Stage 2 Form */
form#stage2form .columns-2 {
	overflow: hidden;
}
form#stage2form .columns-2 .input-row:nth-of-type(odd) {
	float: left;
	width: calc( 50% - 10px );
	clear: left;
}
form#stage2form .columns-2 .input-row:nth-of-type(even) {
	float: right;
	width: calc( 50% - 10px );
	clear: right;
}
form#stage2form h3.small {
	font-size: 14px;
	margin: 0px;
}
DIV.input-row label[for=mtc] {
	float: right;
	width: calc( 100% - 46px - 2px );
	box-sizing: border-box;
	padding-left: 10px;
	padding-bottom: 0px;
	cursor: pointer;
}
DIV.input-row label[for=mtc] h3, DIV.input-row label[for=mtc] p {
	margin: 0px;
}
DIV.input-row input[type=checkbox]#mtc {
	width: 46px;
	height: 46px;
	float: left;
	clear: none;
	margin: 0px;
    padding: 0px;
	box-sizing: border-box;
	cursor: pointer;
}
DIV.input-row input[type=checkbox]#mtc:focus{
	outline: 0;
}
DIV.input-row input[type=checkbox]#mtc:checked {
	background-image: url(/images/icon/tick.png);
	background-size: 60% auto;
	background-repeat: no-repeat;
	background-position: center;
	image-rendering: -webkit-optimize-contrast;
}

div.unfocus {
	display: block;
	position: fixed;
	top: 10px;
	right: 10px;
	width: 60px;
	height: 60px;
	z-index: 9999;
    background: #e0dede;
	border: 1px solid rgba(255,255,255,0.4);
	background: #77dd77 url(/images/icon/close.png) no-repeat center;
	background-size: 60% auto;
	cursor: pointer;
}
@media screen and (min-width: 1230px) {
	div.unfocus {
		display: none;
	}
}
div.unfocus.hidden {
	display: none;
}


/* Hidden Error Field */
DIV.input-row input#hiddenerrorfield, DIV.input-row input#hiddenerrorfield2 {
	display: none;
	border: 0px;
	padding: 0px;
	margin: 0px;
}


/* Stage 3 Form */
form#stage3form .columns-2 {
	overflow: hidden;
}
form#stage3form .columns-2 .input-row:nth-of-type(odd) {
	float: left;
	width: calc( 50% - 10px );
	clear: left;
}
form#stage3form .columns-2 .input-row:nth-of-type(even) {
	float: right;
	width: calc( 50% - 10px );
	clear: right;
}
form#stage3form h3.small {
	font-size: 14px;
	margin: 0px;
}



form#stage3form .columns-2.vehicle .input-row:nth-of-type(even) {
	display: none;
}
form#stage3form .columns-2.vehicle .input-row.visible:nth-of-type(even) {
	display: block;
}
form#stage3form .columns-2.vehicle .input-row.wide:nth-of-type(odd) {
	width: 100%;
}


/* Stage 4 Form */
form#stage4form .columns-2 {
	overflow: hidden;
}
form#stage4form .columns-2 .input-row:nth-of-type(odd) {
	float: left;
	width: calc( 50% - 10px );
	clear: left;
}
form#stage4form .columns-2 .input-row:nth-of-type(even) {
	float: right;
	width: calc( 50% - 10px );
	clear: right;
}
form#stage4form h3.small {
	font-size: 14px;
	margin: 0px;
}


/* Stage 5 Form */
form#stage5form .columns-2 {
	overflow: hidden;
}
form#stage5form .columns-2 .input-row:nth-of-type(odd) {
	float: left;
	width: calc( 50% - 10px );
	clear: left;
}
form#stage5form .columns-2 .input-row:nth-of-type(even) {
	float: right;
	width: calc( 50% - 10px );
	clear: right;
}
form#stage5form h3.small {
	font-size: 14px;
	margin: 0px;
}


/* Stage Navigation */
div.stagenavigation {
	overflow: hidden;
	padding-top: 25px;
	clear: both;
}
a.previousstage {
	display: inline-block;
	float: left;
	box-sizing: border-box;
    background: #e0dede;
    color: #000000;
	padding: 10px 12px;
    text-decoration: none;
    font-weight: normal;
	cursor: pointer;
    line-height: 32px;
    font-size: 24px;
	padding-left: 30px;
	
	background-image: url(/images/icon/left-dark.png);
	background-size: auto 60%;
	background-repeat: no-repeat;
	background-position: left 10px top 50%;
	image-rendering: -webkit-optimize-contrast;
}
a.previousstage:hover {
	color: #b2b2b2;
}
a.nextstage {
	display: inline-block;
	float: right;
	box-sizing: border-box;
    background: #e0dede;
    color: #000000;
	padding: 10px 24px;
    text-decoration: none;
    font-weight: normal;
	cursor: pointer;
    line-height: 32px;
    font-size: 24px;
	padding-right: 30px;
	
	background-image: url(/images/icon/right-dark.png);
	background-size: auto 60%;
	background-repeat: no-repeat;
	background-position: right 10px top 50%;
	image-rendering: -webkit-optimize-contrast;
}
a.nextstage:hover {
	color: #b2b2b2;
}
a.nextstage.green {
	background-color: #77dd77;
	background-image: url(/images/icon/right-white.png);
	color: #ffffff;
}


/* Holder Of Waste Information */
div.holderofwasteinformation {
	overflow: hidden;
}
div.holderofwasteinformation div.field {
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.2);
	padding: 7px 15px;
	margin-bottom: 9px;
	clear: both;
}
div.holderofwasteinformation .split div.field {
	width: calc( 50% - 10px );
}
div.holderofwasteinformation .split div.field:nth-of-type(odd) {
	float: left;
	clear: left;
}
div.holderofwasteinformation .split div.field:nth-of-type(even) {
	float: right;
	clear: right;
}
div.holderofwasteinformation div.field h4 {
	float: left;
	display: inline-block;
	margin: 0px;
	font-size: 16px;
	width: 200px;
	box-sizing: border-box;
}
div.holderofwasteinformation div.field span {
	float: left;
	display: inline-block;
	margin: 0px;
	font-size: 16px;
	padding-left: 15px;
	width: calc( 100% - 200px );
	box-sizing: border-box;
}


/* Haulier Information */
div.haulierinformation {
	overflow: hidden;
}
div.haulierinformation div.field {
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.2);
	padding: 7px 15px;
	margin-bottom: 9px;
	clear: both;
}
div.haulierinformation .split div.field {
	width: calc( 50% - 10px );
}
div.haulierinformation .split div.field:nth-of-type(odd) {
	float: left;
	clear: left;
}
div.haulierinformation .split div.field:nth-of-type(even) {
	float: right;
	clear: right;
}
div.haulierinformation div.field h4 {
	float: left;
	display: inline-block;
	margin: 0px;
	font-size: 16px;
	width: 200px;
	box-sizing: border-box;
}
div.haulierinformation div.field span {
	float: left;
	display: inline-block;
	margin: 0px;
	font-size: 16px;
	padding-left: 15px;
	width: calc( 100% - 200px );
	box-sizing: border-box;
}


/* Transfer Detail Information */
div.transferdetailinformation {
	overflow: hidden;
}
div.transferdetailinformation div.field {
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.2);
	padding: 7px 15px;
	margin-bottom: 9px;
	clear: both;
}
div.transferdetailinformation .split div.field {
	width: calc( 50% - 10px );
}
div.transferdetailinformation .split div.field:nth-of-type(odd) {
	float: left;
	clear: left;
}
div.transferdetailinformation .split div.field:nth-of-type(even) {
	float: right;
	clear: right;
}
div.transferdetailinformation div.field h4 {
	float: left;
	display: inline-block;
	margin: 0px;
	font-size: 16px;
	width: 200px;
	box-sizing: border-box;
}
div.transferdetailinformation div.field span {
	float: left;
	display: inline-block;
	margin: 0px;
	font-size: 16px;
	padding-left: 15px;
	width: calc( 100% - 200px );
	box-sizing: border-box;
}


/* Signature System */
div.signature img, input[name=customersignatureprint], input[name=mtcsignatureprint] {
	width: 100%;
	height: calc( ( ( ( ( 1240px - 20px ) / 2 ) - 10px ) / 16 ) * 6 );
	box-sizing: border-box;
	border: 1px solid rgba(0,0,0,0.2);
}
div.field.signaturedisplay span {
	height: calc( ( ( ( ( 1240px - 20px ) / 2 ) - 10px - 200px - 30px - 15px ) / 16 ) * 6 );
}

@media screen and (max-width: 1240px) {
	div.signature img, input[name=customersignatureprint], input[name=mtcsignatureprint] {
		height: calc( ( ( ( ( 100vw - 20px ) / 2 ) - 10px ) / 16 ) * 6 );
	}
	div.field.signaturedisplay span {
		height: calc( ( ( ( ( 100vw - 20px ) / 2 ) - 10px - 200px - 30px - 15px ) / 16 ) * 6 );
	}
}

div.field.signaturedisplay img {
	float: left;
    display: inline-block;
    margin: 0px;
    font-size: 16px;
    padding-left: 15px;
    width: calc( 100% - 200px );
	height: auto;
    box-sizing: border-box;
}
div.signature {
	cursor: pointer;
	position: relative;
}
div.signature input {
	position: absolute;
	bottom: 0px;
	z-index: -9999;
	opacity: 0;
}

/* Signature Popup */
div.signature-box {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: rgba(0,0,0,0.6);
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;

	display: none;
	z-index: -99999;
}
div.signature-box.display {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	z-index: 99999;
}
div.signature-box .signature-inner {
	width: 600px;
	background: #ffffff;
	padding: 20px;
}
div.signature-box .signature-inner h3 {
	margin: 0px;
	padding: 0px;
	text-align: center;
	padding-bottom: 15px;
}
div.signature-box .signature-inner span.error {
	text-align: center;
	color: #6e0000;
	padding-bottom: 10px;
	display: none;
}
div.signature-box .signature-inner span.error.show {
	display: block;
}
div.signature-box .signature-inner canvas {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	border: 1px solid rgba(0,0,0,0.1);
	margin-bottom: 15px;
}
div.signature-box .signature-inner button {
	cursor: pointer;
    line-height: 24px;
    font-size: 16px;
    padding: 5px 12px;
    text-decoration: none;
    font-weight: normal;
    height: auto;
    border: 0px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #e0dede;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: #000000;
    text-align: center;
	margin-bottom: 15px;
}
div.signature-box .signature-inner button:last-of-type {
	margin-bottom: 0px;
}


/* Users Checkbox */
form#userform DIV.input-row div.data {
	padding-left: 25px;
}
form#userform DIV.input-row div.data div {
	overflow: hidden;
	margin-bottom: 7px;
}
form#userform DIV.input-row div.data label {
	float: right;
	width: calc( 100% - 46px - 2px );
	box-sizing: border-box;
	padding-left: 10px;
	padding-bottom: 0px;
	cursor: pointer;
	line-height: 46px;
}
DIV.input-row div.data input[type=checkbox] {
	width: 46px;
	height: 46px;
	float: left;
	clear: none;
	margin: 0px;
    padding: 0px;
	box-sizing: border-box;
	cursor: pointer;
}
DIV.input-row div.data input[type=checkbox]:focus{
	outline: 0;
}
DIV.input-row div.data input[type=checkbox]:checked {
	background-image: url(/images/icon/tick.png);
	background-size: 60% auto;
	background-repeat: no-repeat;
	background-position: center;
	image-rendering: -webkit-optimize-contrast;
}
form#userform DIV.input-row select {
	background-color: #ffffff;
}


/* stage 8 - Print Receipt */
div.notice {
	padding: 10px;
	border: 2px solid #e0dede;
	background: rgba(224, 222, 222, 0.2);
	color: #000000;
}
div.notice.green {
	border: 2px solid #77dd77;
	background: #77dd77;
	color: #ffffff;
}

/* Stage 20 - Bulk Transfer */
form#stage20form DIV.input-row div.data {
	padding-left: 0px;
}
form#stage20form DIV.input-row div.data div {
	overflow: hidden;
	margin-bottom: 7px;
}
form#stage20form DIV.input-row div.data label {
	float: right;
	width: calc( 100% - 46px - 2px );
	box-sizing: border-box;
	padding-left: 10px;
	padding-bottom: 0px;
	cursor: pointer;
	line-height: 46px;
}
form#stage20form .columns-2 {
	overflow: hidden;
}
form#stage20form .columns-2 .input-row:nth-of-type(odd) {
	float: left;
	width: calc( 50% - 10px );
	clear: left;
}
form#stage20form .columns-2 .input-row:nth-of-type(even) {
	float: right;
	width: calc( 50% - 10px );
	clear: right;
}
form#stage20form h3.small {
	font-size: 14px;
	margin: 0px;
}



/* Deletion Popover */
div.deletionPopoverWrapper {
	position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.6);
    z-index: 99984;
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
  	align-items: center;
 	justify-content: center;
}
div.deletionPopoverWrapper .middle {
    width: 500px;
    box-sizing: border-box;
    border: 1px solid #a9a8a8;
    background: #ffffff;
    color: #a9a8a8;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding: 40px;
    position: relative;
    text-align: center;
}
div.deletionPopoverWrapper .middle .close {
	display: block;
	height: 20px;
	width: 20px;
	position: absolute;
	top: 12px;
	right: 14px;
	cursor: pointer;
    
	background-image: url(/images/icons/close.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
div.deletionPopoverWrapper .middle h2 {
	margin: 0px;
	padding: 0px;
	padding-bottom: 25px;
	text-align: center;
}
div.deletionPopoverWrapper .middle p.message {
	margin: 0px;
	padding: 0px;
	padding-bottom: 25px;
}
div.deletionPopoverWrapper .middle .action {
	overflow: hidden;
}
div.deletionPopoverWrapper .middle .action .decline {
	box-sizing: border-box;
    border: 1px solid #a9a8a8;
    background: #730000;
    color: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px 20px;
    display: inline-block;
    float: left;
	cursor: pointer;
}
div.deletionPopoverWrapper .middle .action .accept {
	box-sizing: border-box;
    border: 1px solid #a9a8a8;
    background: #005604;
    color: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px 20px;
    display: inline-block;
    float: right;
}
div.deletionPopoverWrapper .middle .action .decline:hover, div.deletionPopoverWrapper .middle .action .accept:hover {
	-webkit-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.60);
	-moz-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.60);
	box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.60);
}
h2.paddingtop15 {
	padding-top: 15px;
}

form#productpricingform {
	margin-top: 25px;
}


a.printreceipt {
	font-size: 32px;
	line-height: 64px;
	padding: 25px;
	display: block;
	text-align: center;
	box-sizing: border-box;
    background: #e0dede;
    color: #000000;
}
a.printreceipt:hover {
	color: #b2b2b2;
}



div#sectionmenu {
	overflow: hidden;
	text-align: center;
}
div#sectionmenu .link {
	width: calc( 25% - 20px );
	margin: 10px;
	display: inline-block;
	padding: 15px;
	box-sizing: border-box;
	vertical-align: top;
}
div#sectionmenu .link:hover {
	background-color: #e0dede;
}
/*div#sectionmenu .link .icon {
	width: calc( (1220px / 4) - 20px - 30px );
	height: calc( ( ( (1220px / 4) - 20px - 30px ) / 160 ) * ( 150 * 0.6 ) );
	background-position: center;
	background-repeat: no-repeat;
	background-size: 60% auto;
	display: block;
	image-rendering: -webkit-optimize-contrast;
}*/
div#sectionmenu .link .icon::before {
	line-height: initial;
	font-size: 150px;
}

/*div#sectionmenu .link .icon.create_collection {
	background-image: url(/images/menu/create-collection.png);
}
div#sectionmenu .link:hover .icon.create_collection {
	background-image: url(/images/menu/create-collection-hover.png);
}*/

div#sectionmenu .link .icon.create_collection::before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f055";
}

/*div#sectionmenu .link .icon.collection {
	background-image: url(/images/menu/collection.png);
}
div#sectionmenu .link:hover .icon.collection {
	background-image: url(/images/menu/collection-hover.png);
}*/
div#sectionmenu .link .icon.collection::before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f4ce";
}

/*div#sectionmenu .link .icon.vehicle {
	background-image: url(/images/menu/vehicle.png);
}
div#sectionmenu .link:hover .icon.vehicle {
	background-image: url(/images/menu/vehicle-hover.png);
}*/
div#sectionmenu .link .icon.vehicle::before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f4df";
}

/*div#sectionmenu .link .icon.collection_type {
	background-image: url(/images/menu/collection-type.png);
}
div#sectionmenu .link:hover .icon.collection_type {
	background-image: url(/images/menu/collection-type-hover.png);
}*/
div#sectionmenu .link .icon.collection_type::before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f07c";
}

/*div#sectionmenu .link .icon.product {
	background-image: url(/images/menu/product.png);
}
div#sectionmenu .link:hover .icon.product {
	background-image: url(/images/menu/product-hover.png);
}*/
div#sectionmenu .link .icon.product::before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f217";
}

/*div#sectionmenu .link .icon.user {
	background-image: url(/images/menu/user.png);
}
div#sectionmenu .link:hover .icon.user {
	background-image: url(/images/menu/user-hover.png);
}*/
div#sectionmenu .link .icon.user::before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f007";
}

/*div#sectionmenu .link .icon.customer {
	background-image: url(/images/menu/customers.png);
}
div#sectionmenu .link:hover .icon.customer {
	background-image: url(/images/menu/customers-hover.png);
}*/
div#sectionmenu .link .icon.customer::before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0c0";
}

/*div#sectionmenu .link .icon.billing {
	background-image: url(/images/menu/billing.png);
}
div#sectionmenu .link:hover .icon.billing {
	background-image: url(/images/menu/billing-hover.png);
}*/
div#sectionmenu .link .icon.billing::before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f555";
}

div#sectionmenu .link span {
	display: block;
	text-align: center;
	padding: 7px;
	color: #000000;
	font-size: 18px;
}
/*div#sectionmenu .link:hover span {
	color: #f2f2f2;
}*/

@media screen and (max-width: 1230px) {
	div#sectionmenu .link {
		width: calc( 25% - 20px - 20px );
	}
	div#sectionmenu .link .icon::before {
		font-size: 120px;
	}
}
@media screen and (max-width: 1000px) {
	div#sectionmenu .link {
		width: calc( (100% / 3) - 20px - 20px );
	}
}
@media screen and (max-width: 780px) {
	div#sectionmenu .link {
		width: calc( 50% - 20px - 20px );
	}
}
@media screen and (max-width: 460px) {
	div#sectionmenu .link {
		width: calc( 100% - 20px - 20px );
	}
}



div#menu {
	background: #e0dede;
}
div#menu .inner {
	padding: 0px;
}
div#menu ul.right {
	float: right;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	border-left: 1px solid #cccccc;
}
div#menu ul.right li {
	float: left;
	border-right: 1px solid #cccccc;
}
div#menu ul.right li a, div#menu ul.right li span {
	display: block;
	padding: 15px;
	font-weight: normal;
	font-size: 18px;
}
div#menu ul.right li:hover a {
	background: #d4d2d2;
}


img.logo {
	width: 300px;
	height: auto;
	margin: 0px auto;
	display: block;
	margin-top: 30px;
	margin-bottom: 30px;
}

span.greenlight {
	background: #197f1e;
	width: 25px;
	height: 25px;
	display: inline-block;
	box-sizing: border-box;
	border: 2px solid #156e19;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: inset -2px 2px 4px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: inset -2px 2px 4px 0px rgba(0,0,0,0.2);
	box-shadow: inset -2px 2px 4px 0px rgba(0,0,0,0.2);
}
span.greenlight.small {
	width: 20px;
	height: 20px;
}
span.amberlight {
	background: #ff8726;
	width: 25px;
	height: 25px;
	display: inline-block;
	box-sizing: border-box;
	border: 2px solid #95480a;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: inset -2px 2px 4px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: inset -2px 2px 4px 0px rgba(0,0,0,0.2);
	box-shadow: inset -2px 2px 4px 0px rgba(0,0,0,0.2);
}
span.amberlight.small {
	width: 20px;
	height: 20px;
}
span.redlight {
	background: #af1414;
	width: 25px;
	height: 25px;
	display: inline-block;
	box-sizing: border-box;
	border: 2px solid #950a0a;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: inset -2px 2px 4px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: inset -2px 2px 4px 0px rgba(0,0,0,0.2);
	box-shadow: inset -2px 2px 4px 0px rgba(0,0,0,0.2);
}
span.redlight.small {
	width: 20px;
	height: 20px;
}


/* radio_triple */
div.radio_triple {
	overflow: hidden;
	text-align: center;
	margin-bottom: 12px;
}
div.radio_triple .radio {
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	width: calc( ( 100% / 3) - 8px );
	
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */

	vertical-align: top;
	margin-bottom: 12px;
}
div.radio_triple .radio:nth-of-type(3n+1) {
	margin-right: 8px;
	clear: left;
}
div.radio_triple .radio:nth-of-type(3n+2) {
	margin-left: 4px;
	margin-right: 4px;
}
div.radio_triple .radio:nth-of-type(3n+3) {
	margin-left: 8px;
	clear: right;
}
div.radio_triple .radio input {
	position: absolute;
	top: 20px;
	left: 15px;
	margin: 0px;
}
div.radio_triple .radio label {
	background: rgba(0,0,0,0.05);
	border: 1px solid rgba(0,0,0,0.2);
	padding: 15px;
	padding-left: 40px;
	display: block;
	text-align: left;
	cursor: pointer;

	vertical-align: top;
	min-height: 240px;
}
div.radio_triple .radio input[type="radio"]:checked+label{
	background: rgba(0,0,0,0.15);
} 



div.radio_triple .radio.hide input {
	opacity: 0;
	bottom: 0px;
	top: auto;
	left: calc( 50% - 8px );
}
div.radio_triple .radio.hide label {
	padding-left: 15px;
}



/* Deletion Popover */
div.deletionPopoverWrapper {
	position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.6);
    z-index: 99984;
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
  	align-items: center;
 	justify-content: center;
}
div.deletionPopoverWrapper .middle {
    width: 500px;
    box-sizing: border-box;
    border: 1px solid #a9a8a8;
    background: #171717;
    color: #a9a8a8;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding: 40px;
    position: relative;
}
div.deletionPopoverWrapper .middle .close {
	display: block;
	height: 20px;
	width: 20px;
	position: absolute;
	top: 12px;
	right: 14px;
	cursor: pointer;
    
	background-image: url(/images/icons/close.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
div.deletionPopoverWrapper .middle h2 {
	margin: 0px;
	padding: 0px;
	padding-bottom: 25px;
	text-align: center;
}
div.deletionPopoverWrapper .middle p.message {
	margin: 0px;
	padding: 0px;
	padding-bottom: 25px;
}
div.deletionPopoverWrapper .middle .action {
	overflow: hidden;
}
div.deletionPopoverWrapper .middle .action .decline {
	box-sizing: border-box;
    border: 1px solid #a9a8a8;
    background: #730000;
    color: #a9a8a8;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px 20px;
    display: inline-block;
    float: left;
	cursor: pointer;
}
div.deletionPopoverWrapper .middle .action .accept {
	box-sizing: border-box;
    border: 1px solid #a9a8a8;
    background: #005604;
    color: #a9a8a8;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px 20px;
    display: inline-block;
    float: right;
}
div.deletionPopoverWrapper .middle .action .decline:hover, div.deletionPopoverWrapper .middle .action .accept:hover {
	-webkit-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.60);
	-moz-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.60);
	box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.60);
}
h2.paddingtop15 {
	padding-top: 15px;
}

/* Popup confirmation */
div#popupConfirmation {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 999999;
	
	text-align: center;
    color: #ffffff;
    background: #008000;
    border: 2px solid #008000;
    line-height: 32px;
    padding: 0px 15px;
	
	-webkit-animation: seconds 1s forwards;
	animation: seconds 1s forwards;
	
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
}
@keyframes seconds {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		top: -100px; 
	}
}