﻿/* ============================ */
/*  LUSANET PTMS                */
/*  VERSIE 1.0.00               */
/* ============================ */
/*  © 2007-2012 LuSaneT         */
/*  www.lusanet.nl              */
/* ============================ */
/*  Basis elementen             */
/*  includes/base.css           */
/* ============================ */

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;	
}

html, body {
	overflow: hidden;
	height: 99%;
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #BFD0DF;
	background-image: url('../images/body_background.jpg');
	background-position:  0px 0px;
	background-size: cover;
	color: #000000;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
}
body::after {
	display: block;
	position: fixed;
	bottom: 25px;
	right: 40px;
	width: 185px;
	height: 50px;
	background-image: url('../images/logo.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
	content: "";
}

input, select, textarea {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	background-color: #FFFFFF;
}
input:disabled, select:disabled, textarea:disabled {
	background-color: #F0F0F0;
}

.noSelect {
	-webkit-touch-callout: none; /* iOS Safari */
  	-webkit-user-select: none;   /* Chrome/Safari/Opera */
  	-khtml-user-select: none;    /* Konqueror */
  	-moz-user-select: none;      /* Firefox */
  	-ms-user-select: none;       /* IE/Edge */
  	user-select: none;           /* non-prefixed version, currently not supported by any browser */
}

div, .floatBreak {
	clear: both;
	float: none;
}

/* === LOGIN PAGE === */
	.loginBox {
		z-index: 10;
		overflow: hidden;
		position: fixed;
		left: 500px;
		top: 200px;
		width: 500px;
		height: 315px;
		border: 1px solid #969696;
		border-radius: 4px;
		background-color: #F1F1F1;
		box-shadow: 0px 0px 8px rgba(30, 30, 30, 0.6);
	}
	
	.loginBox label {
		display: block;
		width: 85%;
		height: 16px;
		margin-left: 7.5%;
		margin-top: 30px;
		color: #969696;
		font-size: 10px;
		text-transform: uppercase;
	}
	
	.loginBox div.input {
		display: block;
		width: 85%;
		height: 30px;
		margin-left: 7.5%;
		border: 1px solid #969696;
		border-radius: 4px;
		background-color: #FFFFFF;
		background: -moz-linear-gradient(top, #C8C8C8 0%, #FFFFFF 15%, #FFFFFF 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #C8C8C8 0%, #FFFFFF 15%, #FFFFFF 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #C8C8C8 0%, #FFFFFF 15%, #FFFFFF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}

	.loginBox div.input i {
		width: 28px;
		height: 28px;
		color: #969696;
		font-size: 15px;
		text-align: center;
		line-height: 31px;
	}
	
	.loginBox div.input input {
		width: 90%;
		height: 28px;
		border: 0px;
		background-color: transparent;
	}
	
	.loginBox input[type=button] {
		width: 85%;
		height: 32px;
		margin-left: 7.5%;
		margin-top: 35px;
		border: 1px solid #969696;
		border-radius: 4px;
		background-color: #5588BB;
		background: -moz-linear-gradient(top, #5588BB 0%, #336699 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #5588BB 0%, #336699 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #5588BB 0%, #336699 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		color: #FFFFFF;
		font-family: "Eras ITC", "Eras Medium ITC";
		text-align: center;
		text-shadow: 0 -1px 0 #003366;
		font-size: 16px;
		cursor: pointer;
	}
	
	.loginBox span {
		display: inline-block;
		width: 42%;
		margin-left: 1%;
		margin-top: 15px;
		color: #808080;
		font-size: 11px;
		text-align: right;
		cursor: pointer;
	}
	.loginBox span:first-of-type {
		margin-left: 7.5%;
		text-align: left;
	}
	.loginBox span:hover {
		color: #000000;
		text-decoration: underline;
	}

	/* === CHOOSE ROLE === */
		.systemChooseRoleBox, .systemChooseRoleBox li {
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		
		.systemChooseRoleBox {
			width: 50%;
			margin-left: auto;
			margin-right: auto;
			margin-top: 30px;
		}
		
		.systemChooseRoleBox li {
			width: 100%;
			height: 30px;
			margin: 20px;
			margin-left: 0px;
			padding-left: 10px;
			border: 1px solid #808080;
			border-radius: 4px;
			background-color: #D0D0D0;
			font-size: 11px;
			line-height: 30px;
			cursor: pointer;
		}
		.systemChooseRoleBox li:hover {
			background-color: #808080;
			color: #FFFFFF;
		}
		
		.systemChooseRoleBox li strong {
			font-size: 12px;
		}
		
/* === HEADER === */
	body > header {
		z-index: 2;
		position: fixed;
		left: 0px;
		right: 0px;
		top: 0px;
		width: 100%;
		height: 42px;
		padding-left: 15px;
		background-color: #77AADD;
		background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(129, 180, 231, 0.4) 10%, rgba(129, 180, 231, 0.4) 90%, rgba(47, 122, 183, 0.4) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(129, 180, 231, 0.4) 10%, rgba(129, 180, 231, 0.4) 90%, rgba(47, 122, 183, 0.4) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(129, 180, 231, 0.4) 10%, rgba(129, 180, 231, 0.4) 90%, rgba(47, 122, 183, 0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		box-shadow: 0px 1px 2px rgba(30, 30, 30, 0.4);
	}
	
	body > header div {
		overflow: hidden;
		display: inline-block;
		width: auto;
		max-width: 175px;
		height: 28px;
		margin-top: 7px;
		margin-right: 8px;
		padding-left: 30px;
		padding-right: 4px;
		border: 1px solid #77AADD;
		border-radius: 3px;
		background-color: transparent;
		background: -moz-linear-gradient(top, #d4e4f2 0%, rgba(212, 228, 242, 0.5) 25%, rgba(212, 228, 242, 0.5) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #d4e4f2 0%, rgba(212, 228, 242, 0.5) 25%, rgba(212, 228, 242, 0.5) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #f3f8fb 0%, rgba(212, 228, 242, 0.5) 25%, rgba(212, 228, 242, 0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		font-size: 11px;
		white-space: nowrap;
		text-overflow: ellipsis;
		line-height: 24px;
		cursor: pointer;
	}
	body > header div:hover {
		background-color: #c5dced;
	}
	
	body > header div:before {
		position: absolute;
		display: block;
		margin-left: -21px;
		margin-top: 6px;
		width: 16px;
		height: 16px;
		background-image: url('../images/module_icons.png');
		background-repeat: no-repeat;
		background-size: 16px auto;
		content: "";
	}
	body > header div.products:before {
		background-position: center -48px;
	}
	body > header div.relations:before {
		background-position: center 0px;
	}
	body > header div.salesInvoices:before {
		background-position: center -16px;
	}
	body > header div.purchaseInvoices:before {
		background-position: center -32px;
	}
	body > header div.salesSubscriptions:before {
		background-position: center -64px;
	}
	body > header div.system:before {
		background-position: center -80px;
	}
	body > header div.projects:before {
		background-position: center -96px;
	}
	body > header div.relationPasswords:before {
		background-position: center -112px;
	}
	body > header div.banking:before {
		background-position: center -128px;
	}
	body > header div.bookkeeping:before {
		background-position: center -144px;
	}
	body > header div.customerDevices:before {
		background-position: center -160px;
	}
	
	body > header div.active {
		border: 1px solid #5588BB;
		background-color: #D4E4F2;
		cursor: default;
	}
	
	body > header div.account {
		display: block;
		float: right;
		width: auto;
		max-width: none;
		height: 32px;
		margin: 0px;
		margin-top: 5px;
		padding-left: 15px;
		padding-right: 15px;
		border: 0px;
		border-left: 1px solid #77AADD;
		border-radius: 0px;
		background: transparent none;
		color: #FFFFFF;
		font-size: 14px;
		line-height: 30px;
		cursor: default;
	}
	body > header div.account:hover {
		background-color: #F1F1F1;
		color: #000000;
	}
	body > header div.account::before {
		display: none;
	}
	
	body > header div.account ul {
		display: none;
		position: absolute;
		width: 210px;
		margin: 0px;
		margin-left: -125px;
		padding: 15px;
		list-style: none;
		background-color: #F1F1F1;
		box-shadow: 0px 1px 2px rgba(30, 30, 30, 0.4);
	}
	body > header div.account:hover ul {
		display: block;
	}

	body > header div.account ul li {
		width: 180px;
		padding: 8px;
		padding-right: 32px;
		border-top: 1px solid #B4B4B4;
		color: #000000;
		font-size: 12px;
		text-align: right;
		cursor: pointer;
		line-height: 16px;
	}
	body > header div.account ul li:first-of-type {
		border-top: 0px;
	}
	body > header div.account ul li:hover {
		background-color: #DDDDDD;
	}
	
	body > header div.account ul li:before {
		position: absolute;
		display: block;
		margin-left: 148px;
		width: 14px;
		height: 14px;
		color: #505050;
		font-family: FontAwesome;
		font-weight: normal;
		font-size: 14px;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	body > header div.account ul li.logout:before {
		content: "\f011";
	}
	body > header div.account ul li.changepassword:before {
		content: "\f084";
	}
	body > header div.account ul li.changefunction:before {
		content: "\f074";
	}

/* === NAV === */
	body > nav {
		z-index: 1;
		position: fixed;
		bottom: 0px;
		left: 0px;
		top: 42px;
		width: 260px;
		border-right: 1px solid #969696;
		background-color: #F1F1F1;
		background: -moz-linear-gradient(left, #F1F1F1 0%, #F1F1F1 98%, #B4B4B4 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #F1F1F1 0%,#F1F1F1 98%,#B4B4B4 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #F1F1F1 0%,#F1F1F1 98.5%,#B4B4B4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		transition: left 0.8s;
	}
	body > nav.collapsed {
		left: -250px;
	}
	
	body > nav .collapseButton {
		position: absolute;
		display: block;
		width: 13px;
		height: 29px;
		margin-top: 20px;
		margin-left: 257px;
		background-image: url('../images/nav_arrow.png');
		background-position: 0px 0px;
		background-repeat: no-repeat;
		cursor: pointer;
	}
	body > nav .collapseButton:before {
		display: block;
		width: 10px;
		height: 29px;
		font-size: 15px;
		line-height: 26px;
		content: "\00ab";
		transition: transform 0.8s;
	}
	body > nav.collapsed .collapseButton:before {
		transform: rotate(180deg);
	}
	
	body > nav > ul {
		overflow: auto;
		width: 71px;
		height: 100%;
		margin: 0px;
		padding: 0px;
		border-right: 1px solid #dcdcdc;
		list-style: none;
	}
	
	body > nav > ul > li {
		overflow: hidden;
		width: 70px;
		margin: 0px;
		padding-bottom: 10px;
		padding-top: 47px;
		color: #202020;
		font-family: "Eras ITC", "Eras Demi ITC";
		font-size: 13px;
		text-align: center;
		transition: background-color 0.15s;
		cursor: pointer;
	}
	body > nav > ul > li:before {
		position: absolute;
		display: block;
		margin-top: -36px;
		width: 70px;
		height: 32px;
		background-image: url('../images/module_icons.png');
		background-repeat: no-repeat;
		content: " ";
	}
	body > nav > ul > li.products:before {
		background-position: center -96px;
	}
	body > nav > ul > li.relations:before {
		background-position: center 0px;
	}
	body > nav > ul > li.salesInvoices:before {
		background-position: center -32px;
	}
	body > nav > ul > li.purchaseInvoices:before {
		background-position: center -64px;
	}
	body > nav > ul > li.system:before {
		background-position: center -160px;
	}
	body > nav > ul > li.projects:before {
		background-position: center -192px;
	}
	body > nav > ul > li.relationPasswords:before {
		background-position: center -224px;
	}
	body > nav > ul > li.banking:before {
		background-position: center -256px;
	}
	body > nav > ul > li.bookkeeping:before {
		background-position: center -288px;
	}
	body > nav > ul > li.customerDevices:before {
		background-position: center -320px;
	}
	body > nav > ul > li:hover {
		background-color: #DDDDDD;
	}
	body > nav > ul > li.active {
		overflow: visible;
		background-color: #77AADD;
		color: #ECF3FA;
		text-shadow: -1px 1px 0px #5588BB;
	}
	
	body > nav > ul > li > ul {
		display: none;
		position: absolute;
		top: 0px;
		left: 70px;
		width: 187px;
		margin: 0px;
		margin-top: 20px;
		padding: 0px;
		list-style: none;
		text-shadow: none;
	}
	body > nav > ul > li.active > ul {
		display: block;
	}
	
	body > nav > ul > li > ul > li {
		margin: 0px;
		padding: 5px;
		padding-left: 20px;
		color: #505050;
		font-family: "Eras ITC", "Eras Medium ITC";
		font-weight: normal;
		text-align: left;
		cursor: pointer;
		transition: background-color 0.15s;
	}
	body > nav > ul > li > ul > li:before {
		position: absolute;
		display: block;
		margin-left: -10px;
		width: 16px;
		height: 16px;
		color: #808080;
		font-family: FontAwesome;
		font-weight: normal;
		font-size: 11px;
		line-height: 16px;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		content: "\f105";
		transition: margin-left 0.15s;
	}
	body > nav > ul > li > ul > li:hover {
		background-color: #DDDDDD;
	}
	body > nav > ul > li > ul > li:hover:before {
		margin-left: -12px;
		color: #000000;
	}
	
	body > nav > ul > li > ul > li > sup {
		display: inline-block;
		width: 18px;
		margin-left: 5px;
		background-color: #E0E0E0;
		border-radius: 25%;
		color: #5588BB;
		text-align: center;
	}
	
	body > nav .companyLogo {
		position: absolute;
		bottom: 10px;
		left: 102px;
		width: 120px;
		height: 51px;
		background-image: url('../images/nav_companylogo.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size:  contain;
	}
	
/* === WINDOWS === */
	.windowBox {
		z-index: 10;
		overflow: hidden;
		position: fixed;
		border: 1px solid #969696;
		border-radius: 4px;
		background-color: #F1F1F1;
		box-shadow: 0px 0px 8px rgba(30, 30, 30, 0.6);
	}
	
	.windowBox.inactive {
		opacity: 0.9;	
	}
	
	.windowBox.inactive:before {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgba(221, 221, 221, 0.63);
		content: " ";
	}
	
	.windowBox .resizeBlockSW, .windowBox .resizeBlockSE {
		position: absolute;
		bottom: 0px;
		width: 10px;
		height: 10px;
		background-color: transparent;
	}
	.windowBox .resizeBlockSW {
		left: 0px;
		cursor: sw-resize;
	}
	.windowBox .resizeBlockSE {
		right: 0px;
		cursor: se-resize;
	}
	
	.windowBox > .content {
		overflow: auto;
		padding-left: 30px;
		padding-right: 30px;
	}
	
	.windowBox > .content h2 {
		width: 100%;
		height: 34px;
		margin: 0px;
		margin-top: 30px;
		padding: 0px;
		color: #222222;
		font-family: "Eras ITC", "Eras Medium ITC";
		font-size: 17px;
		font-weight: normal;
		line-height: 34px;
	}
	
	.windowBox > .content a {
		text-decoration: underline;
		cursor: pointer;
	}
	.windowBox > .content a:hover  {
		color: #5588BB;
	}
	.windowBox > .content a:visited {
		color: #000000;
	}
	
	/* === LOADING MESSAGE === */
		.windowBox.loading {
			filter: blur(2px);
		}
		.windowBox.loading:before {
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.63);
			content: " ";
		}
	
		.windowLoadingMessage {
			overflow: hidden;
			position: fixed;
			width: 450px;
			height: 25px;
			background-color: transparent;
			font-size: 16px;
			text-align: center;
			vertical-align: middle;
		}
		.windowLoadingMessage i {
			font-size: 20px;
			line-height: 21px;
		}

	/* === CONFIRMATION MESSAGE === */
		.confirmationOverlay:before {
			position: absolute;
			z-index: 1;
			display: block;
			width: 100%;
			height: 100%;
			background-color: rgba(241, 241, 241, 0.8);
			content: " ";
		}
		
		.windowConfirmMessage {
			position: absolute;
			z-index: 2;
			overflow: hidden;
			width: 400px;
			height: 125px;
			padding: 15px;
			border: 1px solid #D0D0D0;
			border-radius: 4px;
			background-color: #FBFBFB;
			line-height: 22px;
			text-align: center;
			box-shadow: 0px 0px 4px rgba(30, 30, 30, 0.6);
		}
		
		.windowConfirmMessage .cancelButton, .windowConfirmMessage .confirmButton {
			clear: none;
			float: left;
			width: 40%;
			height: 22px;
			margin: 5%;
			padding-left: 15px;
			padding-right: 15px;
			border: 1px solid #666666;
			border-radius: 4px;
			background: linear-gradient(#9b9b9b, #737373);
		  	color: #FFFFFF;
		  	font-size: 11px;
			line-height: 19px;
			text-align: center;
			text-shadow: 1px 1px 0 #666666;
		  	text-transform: uppercase;
			cursor: pointer;
			transition: background 0.3s;
		}
		.windowConfirmMessage .cancelButton:hover {
		  	background: linear-gradient(#a5a5a5, #7d7d7d);
		}

		.windowConfirmMessage .confirmButton {
			border: 1px solid #27a56a;
			background: linear-gradient(#5dd99f, #2cba77);
			text-shadow: 1px 1px 0 #27a56a;
		}
		.windowConfirmMessage .confirmButton:hover {
		  	background: linear-gradient(#6ddda9, #30ca82);
		}
		
	/* === UPLOADING MESSAGE === */
		.windowUploadProgress {
			overflow: hidden;
			position: fixed;
			width: 450px;
			height: auto;
			background-color: transparent;
			font-size: 16px;
			text-align: center;
			vertical-align: middle;
		}

		.windowUploadProgress p {
			margin: 0px;
			margin-bottom: 10px;
			padding-bottom: 5px;
			border-bottom: 1px solid #5588BB;
			color: #5588BB;
			text-align: center;
		}
		
		.windowUploadProgress p i {
			margin-right: 10px;
			font-size: 20px;
		}
		
		.windowUploadProgress table {
			width: 100%;
			border: 0px;
		}
		
		.windowUploadProgress table td.filename {
			width: calc(100% - 150px);
			padding-bottom: 1px;
			padding-top: 1px;
			border-top: 1px dotted #C0C0C0;
			font-size: 13px;
			text-align: left;
		}
		
		.windowUploadProgress table td.statusbar {
			width: 150px;
			height: 22px;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 0px, rgba(255, 255, 255, 0.0) 1px, #858585 2px, #676767 19px, rgba(255, 255, 255, 0.0) 19px);
			font-size: 13px;
			text-align: center;
		}
		
		.windowUploadProgress table td.statusbar span {
			display: block;
			width: 100%;
			height: 22px;
			margin-top: -22px;
			color: #FFFFFF;
			font-size: 12px;
			text-align: center;
			text-shadow: 1px 1px 0px #888888;
			line-height: 20px;
		}
		
		.windowUploadProgress table td.statusbar b {
			display: block;
			width: 1px;
			height: 22px;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 0px, rgba(255, 255, 255, 0.0) 1px, #98bf0e 2px, #8ead0d 19px, rgba(255, 255, 255, 0.0) 19px);
			transition: width 0.5s;
		}
		.windowUploadProgress table td.statusbar b.error {
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 0px, rgba(255, 255, 255, 0.0) 1px, #ce1800 2px, #ba1500 19px, rgba(255, 255, 255, 0.0) 19px);
		}
	
	.windowBox header {
		width: 100%;
		height: 36px;
		border-bottom: 1px solid #B1B1B1;
		padding-left: 18px;
		background-color: #E5E5E5;
		background: -moz-linear-gradient(top, #fbfbfb 0%, #d3d3d3 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #fbfbfb 0%,#d3d3d3 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #fbfbfb 0%,#d3d3d3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		cursor: move;
	  	-webkit-touch-callout: none; /* iOS Safari */
	  	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	  	-khtml-user-select: none;    /* Konqueror */
	  	-moz-user-select: none;      /* Firefox */
	  	-ms-user-select: none;       /* IE/Edge */
	  	user-select: none;           /* non-prefixed version, currently not supported by any browser */
	}
	
	.windowBox header h2 {
		clear: none;
		float: left;
		overflow: hidden;
		width: auto;
		max-width: calc(100% - 90px);
		height: 36px;
		margin: 0px;
		margin-left: 30px;
		padding: 0px;
		color: #222222;
		font-family: "Eras ITC", "Eras Medium ITC";
		font-size: 17px;
		font-weight: normal;
		text-overflow: ellipsis;
		text-shadow: 0px 1px 0px #F0F0F0;
		white-space: nowrap;
		line-height: 34px;
	}
	.windowBox header h2:before {
		position: absolute;
		display: block;
		width: 24px;
		height: 24px;
		margin-left: -32px;
		margin-top: 6px;
		background-image: url('../images/module_icons.png');
		background-repeat: no-repeat;
		background-size: 24px auto;
		background-position: center 24px;
		content: " ";
	}
	.windowBox header h2.products:before {
		background-position: center -72px;
	}
	.windowBox header h2.relations:before {
		background-position: center 0px;
	}
	.windowBox header h2.salesInvoices:before {
		background-position: center -24px;
	}
	.windowBox header h2.purchaseInvoices:before {
		background-position: center -48px;
	}
	.windowBox header h2.salesSubscriptions:before {
		background-position: center -96px;
	}
	.windowBox header h2.system:before {
		background-position: center -120px;
	}
	.windowBox header h2.projects:before {
		background-position: center -144px;
	}
	.windowBox header h2.relationPasswords:before {
		background-position: center -168px;
	}
	.windowBox header h2.banking:before {
		background-position: center -192px;
	}
	.windowBox header h2.bookkeeping:before {
		background-position: center -216px;
	}
	.windowBox header h2.customerDevices:before {
		background-position: center -240px;
	}
	.windowBox header h2.loading:before {
		content: "\f0ad";
	}
	
	.windowBox header div {
		clear: none;
		float: right;
		width: 19px;
		height: 36px;
		border-left: 1px solid #FFFFFF;
		color: #000000;
		font-family: FontAwesome;
		font-size: 12px;
		line-height: 36px;
		text-align: center;
		cursor: pointer;
		transition: background-color 0.15s;
	}
	.windowBox header div:hover {
		background-color: #F1F1F1;
	}
	.windowBox header div.close {
		background-color: rgba(192, 0, 0, 0.7);
		color: #FFFFFF;
	}
	.windowBox header div.close:before {
		content: "\f00d";
	}
	.windowBox header div.close:hover {
		background-color: #F00000;
		color: #FFFFFF;
	}
	.windowBox header div.refresh.hidden {
		visibility: hidden;
	}
	.windowBox header div.refresh:before {
		content: "\f021";
	}
	.windowBox header div.minimize:before {
		content: "\f068";
	}
	.windowBox header div.maximize:before {
		content: "\f096";
	}
	.windowBox[data-maximized="1"] header div.maximize:before {
		content: "\f2d2";
	}
	
	/* === NAVIGATION === */
		.windowBox nav {
			display: none;
			width: 100%;
			height: 32px;
			background-color: #C9DDEF;
			padding-left: 18px;
		}
		
		.windowBox nav div {
			display: inline-block;
			width: auto;
			height: 22px;
			margin-top: 5px;
			padding-left: 8px;
			padding-right: 12px;
			border-right: 1px solid #77AADD;
			line-height: 22px;
			cursor: pointer;
			transition: background-color 0.15s;
		}
		.windowBox nav div:hover {
			background-color: #77AADD;
		}
		.windowBox nav div.quickNav {
			overflow: hidden;
			width: 32px;
			padding-left: 4px;
			padding-right: 4px;
		}
		.windowBox nav div.quickNav.next {
			position: absolute;
			right: 0px;
		}
		.windowBox nav div.quickNav.back {
			position: absolute;
			right: 32px;
		}
		
		.windowBox nav i {
			display: block;
			clear: none;
			float: left;
			width: 14px;
			height: 14px;
			margin: 4px;
			margin-right: 6px;
			background-image: url('../images/windownav_icons.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
			background-size: 14px;
		}
		.windowBox nav div.save i {
			background-position: 0px 0px;
		}
		.windowBox nav div.cancel i {
			background-position: 0px -14px;
		}
		.windowBox nav div.add i {
			background-position: 0px -28px;
		}
		.windowBox nav div.delete i {
			background-position: 0px -42px;
		}
		.windowBox nav div.next i {
			background-position: 0px -56px;
		}
		.windowBox nav div.goback i {
			background-position: 0px -70px;
		}
		.windowBox nav div.refresh i {
			background-position: 0px -84px;
		}
		.windowBox nav div.edit i {
			background-position: 0px -98px;
		}
		.windowBox nav div.archive i {
			background-position: 0px -112px;
		}
		.windowBox nav div.activate i {
			background-position: 0px -126px;
		}
		.windowBox nav div.processContact i {
			background-position: 0px -140px;
		}
		.windowBox nav div.financialContact i {
			background-position: 0px -154px;
		}
		.windowBox nav div.back i {
			background-position: 0px -168px;
		}
		.windowBox nav div.download i {
			background-position: 0px -196px;
		}
		.windowBox nav div.mail i {
			background-position: 0px -210px;
		}
		.windowBox nav div.clone i {
			background-position: 0px -224px;
		}
		.windowBox nav div.play i {
			background-position: 0px -280px;
		}
		.windowBox nav div.pause i {
			background-position: 0px -294px;
		}
		.windowBox nav div.stop i {
			background-position: 0px -308px;
		}
		.windowBox nav div.hourRegistration i {
			background-position: 0px -322px;
		}
		.windowBox nav div.status i {
			background-position: 0px -336px;
		}
		.windowBox nav div.print i {
			background-position: 0px -350px;
		}
		.windowBox nav div.export i {
			background-position: 0px -378px;
		}
		.windowBox nav div.passwordReset i {
			background-position: 0px -392px;
		}
		.windowBox nav div.notificationVisible i {
			background-position: 0px -406px;
		}
		.windowBox nav div.notificationHidden i {
			background-position: 0px -420px;
		}
	
	/* === STATUS MESSAGES === */
		.windowBox .statusMessages {
			overflow: hidden;
			position: absolute;
			top: 36px;
			left: 12.5%;
			width: 75%;
			height: auto;
			min-height: 20px;
			margin: 0px;
			padding: 0px;
			background-color: #C0C0C0;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			box-shadow: 0px 0px 4px rgba(30, 30, 30, 0.6);
			list-style: none;
		}
		
		.windowBox .statusMessages li {
			width: 100%;
			padding: 3px;
			padding-left: 35px;
			border-top: 1px dotted rgba(255, 255, 255, 0.3);
			color: #FFFFFF;
			line-height: 20px;
		}
		.windowBox .statusMessages li:before {
			display: block;
			position: absolute;
			width: 16px;
			height: 16px;
			margin-left: -25px;
			font-family: FontAwesome;
			font-size: 14px;
			text-align: center;
		}
		.windowBox .statusMessages li.good {
			background-color: #26a067;
		}
		.windowBox .statusMessages li.good:before {
			content: "\f00c";
		}
		.windowBox .statusMessages li.warning {
			background-color: #c07b0e;
		}
		.windowBox .statusMessages li.warning:before {
			content: "\f071";
		}
		.windowBox .statusMessages li.error {
			background-color: #c00e11;
		}
		.windowBox .statusMessages li.error:before {
			content: "\f00d";
		}
		
	/* === LOCKED BAR === */
		.windowBox .content .lockedNoticeBar {
			width: calc(100% + 60px);
			height: 26px;
			margin-left: -30px;
			margin-bottom: 5px;
			padding-left: 30px;
			background-color: #fff4d3;
			box-shadow: 0 0 5px #C0C0C0;
			color: #644800;
			font-size: 11px;
			font-weight: bold;
			line-height: 24px;
		}
		.windowBox .content .lockedNoticeBar i {
			padding-right: 10px;
			font-size: 15px;
			font-weight: normal;
			line-height: 25px;
		}
		
	/* === SECTIONS === */
		.windowBox .content section {
			clear: both;
			float: none;
			margin: 1%;
			margin-top: 15px;
			padding: 15px;
			border: 1px solid #D0D0D0;
			background-color: #FBFBFB;
		}
		.windowBox .content section.twoColumns {
			clear: none;
			float: left;
			width: 48%;
		}
		.windowBox .content section.tabbed {
			margin-top: 27px;
		}
		.windowBox .content div.twoColumns {
			clear: none;
			float: left;
			width: 50%;
		}
		
		.windowBox .content section > h3 {
			display: table;
			position: relative;
			top: -10px;
			height: 20px;
			margin: 0px;
			margin-top: -14px;
			margin-left: -7px;
			padding-left: 7px;
			padding-right: 7px;
			background: linear-gradient(to bottom, #F1F1F1 0%, #F1F1F1 49.9%, #FBFBFB 50%, #FBFBFB 100%);
			color: #5588BB;
			font-size: 11px;
			font-weight: normal;
			line-height: 18px;
		}
		
		.windowBox .content section.tabbed > ul {
			display: block;
			margin: 0px;
			margin-top: -34px;
			margin-left: -16px;
			padding: 0px;
			list-style: none;
		}
		
		.windowBox .content section.tabbed > ul > li {
			display: inline-block;
			overflow: hidden;
			width: auto;
			height: 19px;
			margin: 0px;
			margin-right: 5px;
			padding: 0px;
			padding-left: 7px;
			padding-right: 7px;
			border: 1px solid #D0D0D0;
			border-top-left-radius: 3px;
			border-top-right-radius: 3px;
			background-color: #E5E5E5;
			background: -moz-linear-gradient(top, #fbfbfb 0%, #d3d3d3 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, #fbfbfb 0%,#d3d3d3 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, #fbfbfb 0%,#d3d3d3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			color: #808080;
			font-size: 11px;
			cursor: pointer;
			line-height: 18px;
		}
		.windowBox .content section.tabbed > ul > li:hover {
			background-color: #F1F1F1;
			background: -moz-linear-gradient(top, #F1F1F1 0%, #C9C9C9 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, #F1F1F1 0%,#C9C9C9 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, #F1F1F1 0%,#C9C9C9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */	
		}
		.windowBox .content section.tabbed > ul > li.active {
			border-bottom: 0px;
			background: #FBFBFB;
			color: #5588BB;
		}
		
		.windowBox .content section article {
			display: none;
			width: 100%;
			height: auto;
			margin-top: 8px;
		}
		
		.windowBox .content section .scrollBox {
			overflow: auto;
			width: 100%;
			height: 200px;
		}
		
		.windowBox .content *[data-title], .windowBox .content i[data-fatitle] {
			cursor: help;
		}
		.windowBox .content *[data-title]:hover:before, .windowBox .content i[data-fatitle]:hover:after {
		  	z-index: 30;
		  	position: absolute;
		  	margin-top: 20px;
		  	padding: 3px;
		  	padding-left: 7px;
		  	padding-right: 7px;
		  	border-radius: 4px;
		  	background: linear-gradient(#65a1d1, #357db1);
		  	box-shadow: 0px 0px 5px rgba(128, 128, 128, 0.8);
		  	color: #FFFFFF;
		  	font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 11px;
			text-shadow: 0px -1px 0px #336699;
			text-transform: none;
			line-height: 16px;
		  	white-space: nowrap; 
		  	content: attr(data-title);
		  	opacity: 1;
	  	}
	  	.windowBox .content i[data-fatitle]:hover:after {
			margin-left: 0.5em;
			margin-top: 1em;
			content: attr(data-fatitle);
		}
	  	
/* === RELOGIN SCHERM === */
	body.blurAll * {
		filter: blur(2px);	
	}
	#reloginOverlay * {
		filter: none;
	}
	
	#reloginOverlay {
		display: none;
		position: fixed;
		z-index: 50;
		width: 100%;
		height: 100%;
		bottom: 0px;
		left: 0px;
		right: 0px;
		top: 0px;
		background-color: rgba(30, 30, 30, 0.70);
		filter: none;
	}
	
	#reloginOverlay .windowBox {
		left: 50%;
		top: 50%;
		width: 600px;
		height: 260px;
		margin-left: -300px;
		margin-top: -130px;
	}
	
	#reloginOverlay .windowBox header {
		cursor: default;
	}
	
	#reloginOverlay .windowBox p {
		width: 85%;
		margin-bottom: -10px;
		margin-left: 7.5%;
		padding-right: 0px;
		padding-top: 10px;
		font-style: italic;
		font-size: 12px;
		line-height: 21px;
	}

/* === RECORD ROWS === */
	.recordRowsBox {
		overflow-x: hidden;
		overflow-y: scroll;
		width: calc(100% + 30px);
		height: 270px;
		margin: -15px;
		margin-top: -11px;
		margin-bottom: 15px;
		background-color: #C0C0C0;
	}

	.recordRowsBox table {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0px;
		table-layout: fixed;
	}

	.recordRowsBox table td {
		border: 1px solid #B1B1B1;
		background-color: #FFFFFF;
	}
	.recordRowsBox table tr td:first-of-type {
		border-left: 0px;
	}

	.recordRowsBox table thead td {
		height: 22px;
		border-top: 0px;
		background: linear-gradient(to bottom, #E6E6E6 0px, #FFFFFF 6px, #FFFFFF 100%);
		color: #505050;
		font-size: 11px;
		font-weight: normal;
		text-align: center;
	}

	.recordRowsBox table td input[type=text], .recordRowsBox table td select {
		width: 100%;
		height: 20px;
		margin: 0px;
		border: 0px;
	}
	.recordRowsBox table td input:disabled, .recordRowsBox table td input:read-only, .recordRowsBox table td select:disabled {
		background-color: #F0F0F0;
	}

	.recordRowsBox table .rowAction {
		display: block;
		position: absolute;
		width: 20px;
		height: 16px;
		margin-left: -19px;
		font-family: FontAwesome;
		font-size: 14px;
		font-style: normal;
		line-height: 16px;
		cursor: pointer;
	}
	.recordRowsBox table .rowAction.add {
		margin-top: 15px;
		color: #5588BB;
	}
	.recordRowsBox table .rowAction.add:hover {
		color: #77AADD;
	}
	.recordRowsBox table .rowAction.delete {
		margin-top: 2px;
		color: #C00000;
	}
	.recordRowsBox table .rowAction.delete:hover {
		color: #FF0000;
	}

	/* === SALESINVOICES === */
		.recordRowsBox.salesInvoices .type {
			overflow: hidden;
			width: 4%;
		}
		.recordRowsBox.salesInvoices .type select, .recordRowsBox.salesSubscriptions .type select {
			width: calc(100% + 25px);
			height: 16px;
			margin-top: 2px;
			background-image: url('../images/rowtype_icons.png');
			background-position: 5px 20px;
			background-repeat: no-repeat;
			text-align: right;
		}
		.recordRowsBox.salesInvoices .type select[data-value='1'], .recordRowsBox.salesSubscriptions .type select[data-value='1'] {
			background-position: 5px 0px;
		}
		.recordRowsBox.salesInvoices .type select[data-value='2'], .recordRowsBox.salesSubscriptions .type select[data-value='2'] {
			background-position: 5px -16px;
		}
		.recordRowsBox.salesInvoices .type select[data-value='3'], .recordRowsBox.salesSubscriptions .type select[data-value='3'] {
			background-position: 5px -32px;
		}
		.recordRowsBox.salesInvoices .type select[data-value='4'], .recordRowsBox.salesSubscriptions .type select[data-value='4'] {
			background-position: 5px -48px;
		}
		.recordRowsBox.salesInvoices .type select[data-value='5'], .recordRowsBox.salesSubscriptions .type select[data-value='5'] {
			background-position: 0px -64px;
		}

		.recordRowsBox.salesInvoices .productId {
			width: 10%;
		}
		.recordRowsBox.salesInvoices .productId input, .recordRowsBox.salesSubscriptions .productId input {
			text-transform: uppercase;
		}

		.recordRowsBox.salesInvoices .description {
			width: 30%;
		}

		.recordRowsBox.salesInvoices .ledgerAccount {
			width: 11%;
		}

		.recordRowsBox.salesInvoices .number {
			width: 9%;
		}
		.recordRowsBox.salesInvoices .number input {
			text-align: right;
		}

		.recordRowsBox.salesInvoices .unitType {
			width: 7%;
		}

		.recordRowsBox.salesInvoices .taxRate {
			width: 7%;
		}

		.recordRowsBox.salesInvoices .price {
			width: 11%;
		}

	/* === SALESSUBSCRIPTIONS === */
		.recordRowsBox.salesSubscriptions .type {
			overflow: hidden;
			width: 4%;
		}

		.recordRowsBox.salesSubscriptions .productId {
			width: 10%;
		}

		.recordRowsBox.salesSubscriptions .description {
			width: 48%;
		}

		.recordRowsBox.salesSubscriptions .number {
			width: 9%;
		}
		.recordRowsBox.salesSubscriptions .number input {
			text-align: right;
		}

		.recordRowsBox.salesSubscriptions .unitType {
			width: 7%;
		}

		.recordRowsBox.salesSubscriptions .price {
			width: 11%;
			white-space: nowrap;
		}

		.recordRowsBox.salesSubscriptions .price i, .purchaseInvoiceTotalsBox .financialField i {
			position: absolute;
			display: block;
			width: 16px;
			height: 16px;
			margin-left: 20px;
			margin-top: -19px;
			background-image: url('../images/windownav_icons.png');
			background-repeat: no-repeat;
			background-position: 0px -112px;
			font-style: normal;
			cursor: pointer;
			opacity: 0;
			transition: opacity 0.15s;
			filter: grayscale(50%);
		}
		.recordRowsBox.salesSubscriptions .price:hover i, .purchaseInvoiceTotalsBox .financialField:hover i {
			opacity: 0.5;
		}
		.recordRowsBox.salesSubscriptions .price:hover i:hover, .purchaseInvoiceTotalsBox .financialField:hover i:hover {
			opacity: 1;
			filter: none;
		}

	/* === DIRECTDEBITBATCHES === */
		.recordRowsBox.directDebitBatches .selector {
			width: 4%;
			text-align: center;
		}
		
		.recordRowsBox.directDebitBatches .invoiceId {
			width: 8%;
			text-align: center;
		}

		.recordRowsBox.directDebitBatches .invoiceDate, .recordRowsBox.directDebitBatches .customerId {
			width: 10%;
			text-align: center;
		}

		.recordRowsBox.directDebitBatches .defaultDescription {
			width: 4%;
			text-align: center;
		}

		.recordRowsBox.directDebitBatches .description {
			width: 43%;
		}

		.recordRowsBox.directDebitBatches .price {
			width: 11%;
		}

	/* === INVOICE REMINDER === */
		.recordRowsBox.salesInvoiceReminders .invoiceId {
			width: 8%;
			text-align: center;
		}

		.recordRowsBox.salesInvoiceReminders .invoiceDate, .recordRowsBox.salesInvoiceReminders .customerId {
			width: 10%;
			text-align: center;
		}

		.recordRowsBox.salesInvoiceReminders .customerName {
			overflow: hidden;
			width: 30%;
			padding-left: 5px;
			line-height: 20px;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.recordRowsBox.salesInvoiceReminders .reminder {
			width: 10%;
			text-align: center;
		}

		.recordRowsBox.salesInvoiceReminders .reminder i {
			display: inline-block;
			width: 12px;
			height: 12px;
			margin-right: 4px;
			color: #808080;
			font-family: FontAwesome;
			font-size: 12px;
			font-style: normal;
			vertical-align: baseline;
			line-height: 20px;
			text-align: center;
		}

	/* === PURCHASEORDERS === */
		.recordRowsBox.purchaseOrders tbody td {
			vertical-align: top;
		}

		.recordRowsBox.purchaseOrders .productId {
			width: 10%;
		}
		.recordRowsBox.purchaseOrders .productId input {
			text-transform: uppercase;
		}

		.recordRowsBox.purchaseOrders .description input.serials {
			position: relative;
			width: calc(416% - 5px);
			padding: 3px;
			border-top: 1px solid #C5C5C5;
			font-style: italic;
			font-size: 11px;
		}

		.recordRowsBox.purchaseOrders .description {
			width: 24%;
		}

		.recordRowsBox.purchaseOrders .ledgerAccount {
			width: 13%;
		}

		.recordRowsBox.purchaseOrders .customer {
			width: 13%;
		}
		.recordRowsBox.purchaseOrders .customer.datalistSuccess input, .recordRowsBox.purchaseOrders .customer.datalistFail input {
			width: calc(100% - 25px);
		}
		.recordRowsBox.purchaseOrders .customer.datalistSuccess::before, .recordRowsBox.purchaseOrders .customer.datalistFail::before {
			display: inline-block;
			width: 20px;
			height: 20px;
			background-color: rgba(255, 255, 255, 0.8);
			color: #26a067;
			font-family: FontAwesome;
			font-size: 16px;
			line-height: 20px;
			content: "\f058";
			text-align: center;
		}
		.recordRowsBox.purchaseOrders .customer.datalistFail::before {
			color: #c00e11;
			content: "\f057";
		}

		.recordRowsBox.purchaseOrders .number {
			width: 6%;
		}
		.recordRowsBox.purchaseOrders .number input {
			text-align: right;
		}

		.recordRowsBox.purchaseOrders .unitType {
			width: 7%;
		}

		.recordRowsBox.purchaseOrders .taxRate {
			width: 7%;
		}

		.recordRowsBox.purchaseOrders .price {
			width: 11%;
		}

	/* === PURCHASEORDERS DELIVERY === */
		.recordRowsBox.purchaseOrderDelivery .productId {
			width: 10%;
			padding-left: 3px;
			text-transform: uppercase;
		}

		.recordRowsBox.purchaseOrderDelivery .serialno {
			background-color: transparent;
			font-style: italic;
			text-align: right;
		}
		.recordRowsBox.purchaseOrderDelivery .serialno input {
			width: 60%;
		}

		.recordRowsBox.purchaseOrderDelivery .description {
			width: 26%;
			padding-left: 3px;
		}

		.recordRowsBox.purchaseOrderDelivery .customer {
			width: 25%;
			padding-left: 3px;
		}

		.recordRowsBox.purchaseOrderDelivery .unitType {
			width: 7%;
			padding-left: 3px;
		}

		.recordRowsBox.purchaseOrderDelivery .number {
			width: 8%;
		}
		.recordRowsBox.purchaseOrderDelivery .number input {
			text-align: right;
		}

	/* === PURCHASEORDERS SELECTORS === */
		.recordRowsBox.purchaseOrderSelector {
			height: 400px;
			margin-bottom: 0px;
		}

		.recordRowsBox.purchaseOrderSelector .selector {
			width: 5%;
			text-align: center;
		}

		.recordRowsBox.purchaseOrderSelector .invoiceId {
			width: 10%;
			text-align: center;
		}

		.recordRowsBox.purchaseOrderSelector .supplierInvoiceId {
			width: 15%;
			text-align: center;
		}

		.recordRowsBox.purchaseOrderSelector .supplier {
			width: 40%;
			padding-left: 5px;
		}

		.recordRowsBox.purchaseOrderSelector .date {
			width: 15%;
			text-align: center;
		}

		.recordRowsBox.purchaseOrderSelector .price {
			width: 15%;
			padding-right: 5px;
			text-align: right;
		}

	/* === PURCHASEINVOICES === */
		.recordRowsBox.purchaseInvoices .description {
			width: 47%;
		}

		.recordRowsBox.purchaseInvoices .ledgerAccount {
			width: 15%;
		}

		.recordRowsBox.purchaseInvoices .customer {
			width: 15%;
		}
		.recordRowsBox.purchaseInvoices .customer.datalistSuccess input, .recordRowsBox.purchaseInvoices .customer.datalistFail input {
			width: calc(100% - 25px);
		}
		.recordRowsBox.purchaseInvoices .customer.datalistSuccess::before, .recordRowsBox.purchaseInvoices .customer.datalistFail::before {
			display: inline-block;
			width: 20px;
			height: 20px;
			background-color: rgba(255, 255, 255, 0.8);
			color: #26a067;
			font-family: FontAwesome;
			font-size: 16px;
			line-height: 20px;
			content: "\f058";
			text-align: center;
		}
		.recordRowsBox.purchaseInvoices .customer.datalistFail::before {
			color: #c00e11;
			content: "\f057";
		}

		.recordRowsBox.purchaseInvoices .price {
			width: 11%;
		}

		.recordRowsBox.purchaseInvoices .taxRate {
			width: 7%;
		}

	/* === BANKING TRANSACTIONS === */
		.recordRowsBox.bankingTransactions {
			height: 550px;
			margin-bottom: -15px;
		}

		.recordRowsBox.bankingTransactions td {
			border-bottom: 1px dotted #B1B1B1;
		}
		.recordRowsBox.bankingTransactions .subrow td {
			border-top: 1px dotted #B1B1B1;
		}

		.recordRowsBox.bankingTransactions .date {
			width: 10%;
			background-color: #E3E3E3;
			color: #505050;
			text-align: center;
		}

		.recordRowsBox.bankingTransactions .bookkeepingDescription {
			width: 25%;
		}
		.recordRowsBox.bankingTransactions .transactionDescription {
			overflow: hidden;
			width: 17%;
			padding-left: 5px;
			background-color: #E3E3E3;
			color: #505050;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.recordRowsBox.bankingTransactions .totalAmount {
			width: 11.5%;
			background-color: #E3E3E3;
		}
		.recordRowsBox.bankingTransactions .totalAmount input {
			color: #505050;
		}

		.recordRowsBox.bankingTransactions .rowAmount {
			width: 11.5%;
		}

		.recordRowsBox.bankingTransactions .ledgerAccount {
			width: 13%;
		}

		.recordRowsBox.bankingTransactions .reference {
			width: 10%;
		}

		.recordRowsBox.bankingTransactions .rowIndent {
			background-color: transparent;
		}

		.recordRowsBox.bankingTransactions .validationError {
			background-color: #f57373;
		}

	/* === PAYMENTBATCHES === */
		.recordRowsBox.paymentBatches .blank {
			background-color: #C0C0C0;
			border: 0px;
		}

		.recordRowsBox.paymentBatches .selector {
			width: 5%;
			text-align: center;
		}
		
		.recordRowsBox.paymentBatches .invoiceId {
			width: 10%;
			text-align: center;
		}

		.recordRowsBox.paymentBatches .invoiceDate {
			width: 15%;
			text-align: center;
		}
		.recordRowsBox.paymentBatches .price {
			width: 17%;
		}

		.recordRowsBox.paymentBatches .supplier {
			width: 25%;
			padding-left: 5px;
		}
		.recordRowsBox.paymentBatches .bankAccount {
			width: 20%;
			padding-left: 5px;
		}
		.recordRowsBox.paymentBatches .paymentDescription {
			width: 38%;
			padding-left: 5px;
		}

		.recordRowsBox.paymentBatches .titleRow td, .recordRowsBox.paymentBatches .titleRow input {
			background-color: #ECECEC;
			font-weight: bold;
		}

	/* === TRIPREGISTRATIONS === */
		.recordRowsBox.tripRegistrations .date {
			width: 10%;
		}

		.recordRowsBox.tripRegistrations .mileage {
			width: 8%;
		}
		.recordRowsBox.tripRegistrations .mileage input {
			text-align: right;
		}

		.recordRowsBox.tripRegistrations .address {
			width: 17%;
		}

		.recordRowsBox.tripRegistrations .remarks {
			width: 13%;
		}

		.recordRowsBox.tripRegistrations .code {
			width: 7%;
		}