/* ============================ */
/*  LUSANET PTMS                */
/*  VERSIE 1.0.00               */
/* ============================ */
/*  © 2007-2012 LuSaneT         */
/*  www.lusanet.nl              */
/* ============================ */
/*  Module elementen            */
/*  includes/modules.css        */
/* ============================ */

/* == BEVESTIGINGS KNOPPEN === */	
	.confirmDeleteButton {
		width: auto;
		margin: 5px;
		padding-left: 15px;
		padding-right: 15px;
		border: 1px solid #cc1800;
		background: linear-gradient(#ff4e37, #e61b00);
		text-shadow: 1px 1px 0 #cc1800;
	}
	.confirmDeleteButton:hover {
		background: linear-gradient(#ff604b, #fa1d00);
	}
	
	.confirmCancelButton {
		width: auto;
		margin: 5px;
		padding-left: 15px;
		padding-right: 15px;
		border: 1px solid #666666;
		background: linear-gradient(#9b9b9b, #737373);
		text-shadow: 1px 1px 0 #666666;
	}
	.confirmCancelButton:hover {
		background: linear-gradient(#a5a5a5, #7d7d7d);
	}

/* === SEARCH BOX === */
	.searchBox {
		width: 100%;
		margin-bottom: 20px;
		margin-top: 15px;
		color: #505050;
		font-size: 11px;
		font-weight: bold;
	}
	
	.searchBox input {
		width: 100%;
		height: 30px;
		font-size: 14px;
	}

	.searchBoxTwoColumns {
		clear: none;
		float: left;
		width: 46%;
		padding-left: 4%;
		border-left: 1px dotted #D0D0D0;
	}
	.searchBoxTwoColumns:first-of-type {
		padding-left: 0px;
		margin-right: 4%;
		border-left: 0px
	}
	
/* === COLLAPSE BOX === */
	.collapseBox {
		width: 100%;
		border-top: 1px dotted #505050;
	}

	.collapseBox .collapseToggle {
		position: relative;
		left: 50%;
		width: 145px;
		height: 15px;
		margin-left: -73px;
		margin-top: -9px;
		background-color: #F1F1F1;
		color: #505050;
		font-size: 10px;
		text-align: center;
		text-transform: uppercase;
		cursor: pointer;
	}
	
	.collapseBox .collapseContent {
		display: block;
		width: 100%;
		margin-top: 10px;
	}
	.collapseBox.collapsed .collapseContent {
		display: none;
	}

/* === INLINE BUTTON === */
	.inlineButton {
		display: inline-block;
		width: auto;
		height: 22px;
		padding-right: 3px;
		cursor: pointer;
		line-height: 21px;
		transition: background-color 0.15s;
	}
	.inlineButton:hover {
		background-color: #D3D3D3;
	}
	
	.inlineButton 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;
	}
	.inlineButton.save i {
		background-position: 0px 0px;
	}
	.inlineButton.cancel i {
		background-position: 0px -14px;
	}
	.inlineButton.add i {
		background-position: 0px -28px;
	}
	.inlineButton.delete i {
		background-position: 0px -42px;
	}
	.inlineButton.next i {
		background-position: 0px -56px;
	}

/* === FORM PAGE === */
	.formPageTable {
		width: 100%;
		max-width: 600px;
		border: 0px;
	}
	.formPageTable.fullWidth {
		max-width: none;
	}

	.formPageTable td {
		width: 70%;
		border-bottom: 1px dotted #D0D0D0;
		padding-bottom: 7px;
		padding-top: 7px;
		line-height: 20px;
		vertical-align: top;
	}
	.formPageTable.fullWidth td {
		width: 80%;	
	}
	.formPageTable.fullWidth td.halfValue {
		width: 30%;
	}

	.formPageTable td:first-of-type, .formPageTable .extraTitle {
		width: 30%;
		padding-right: 10px;
		color: #505050;
		font-size: 11px;
	}
	.formPageTable.fullWidth td:first-of-type, .formPageTable.fullWidth .extraTitle {
		width: 20%;	
	}
	.formPageTable .extraTitle {
		padding-left: 15px;
	}
	
	.formPageTable .title td {
		padding-bottom: 1px;
		padding-left: 2px;
		padding-top: 1px;
		background-color: #A0A0A0;
		color: #FFFFFF;
		font-size: 11px;
		text-shadow: 0px -1px 0px #505050;
		line-height: 20px;
	}

	.formPageTable input, .formPageTable textarea, .formPageTable select, .formPageInput {
		width: 100%;
		height: 22px;
		border: 1px solid #B1B1B1;
		padding-left: 3px;
		background-color: #FFFFFF;
		background: -moz-linear-gradient(top, #E6E6E6 0px, #FFFFFF 6px, #FFFFFF 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #E6E6E6 0px, #FFFFFF 6px, #FFFFFF 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #E6E6E6 0px, #FFFFFF 6px, #FFFFFF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
	.formPageTable input[type=checkbox], .formPageTable input[type=radio] {
		width: auto;
		height: auto;
	}
	.formPageTable select {
		padding-left: 0px;
	}
	.formPageTable textarea {
		height: 90px;
		padding: 1px;
	}
	.formPageTable input[readonly], .formPageTable textarea[readonly], .formPageInput[readonly] {
		background-color: #FAFAFA;
		background: -moz-linear-gradient(top, #E1E1E1 0px, #FAFAFA 6px, #FAFAFA 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #E1E1E1 0px, #FAFAFA 6px, #FAFAFA 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #E1E1E1 0px, #FAFAFA 6px, #FAFAFA 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		color: #505050;
	}
	.formPageTable input:read-only, .formPageTable textarea:read-only, .formPageInput:read-only {
		background-color: #FAFAFA;
		background: -moz-linear-gradient(top, #E1E1E1 0px, #FAFAFA 6px, #FAFAFA 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #E1E1E1 0px, #FAFAFA 6px, #FAFAFA 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #E1E1E1 0px, #FAFAFA 6px, #FAFAFA 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		color: #505050;
	} 
	
	.formPageTable input[disabled], .formPageTable textarea[disabled], .formPageTable select[disabled], .formPageInput[disabled] {
		background-color: #ECECEC;
		background: -moz-linear-gradient(top, #E1E1E1 0px, #ECECEC 6px, #ECECEC 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #E1E1E1 0px, #ECECEC 6px, #ECECEC 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #E1E1E1 0px, #ECECEC 6px, #ECECEC 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		color: #000000;
	}
	.formPageTable input[type=file] {
		background: none;
		border: 0px;
	}
	
	.formPageTable label {
		display: inline-block;
		width: calc(33% - 25px);
		padding-left: 3px;
		vertical-align: top;
		line-height: 20px;
	}
	.formPageTable td.labelWidth50 label {
		width: calc(50% - 22px);
	}
	.formPageTable td.labelFullWidth label {
		width: calc(100% - 22px);
	}
	.formPageTable td.labelAutoWidth label {
		width: auto;
		padding-right: 25px;
	}
	
	.formPageTable td.infoText {
		padding-bottom: 10px;
		padding-right: 0px;
		padding-top: 10px;
		color: #505050;
		font-style: italic;
		font-size: 11px;
		line-height: 19px;
	}
	
	.formPageTable .selectAll, .formPageTable .deselectAll {
		display: inline-block;
		width: 100px;
		height: 18px;
		margin-left: 5px;
		margin-top: 6px;
		color: #808080;
		font-size: 11px;
		text-transform: uppercase;
		cursor: pointer;
		transition: color 0.15s;
	}
	.formPageTable .selectAll::before, .formPageTable .deselectAll::before {
		display: inline-block;
		width: 14px;
		height: 14px;
		margin-right: 3px;
		font-family: FontAwesome;
		font-size: 14px;
	}
	.formPageTable .selectAll::before {
		content: "\f046";
	}
	.formPageTable .deselectAll::before {
		content: "\f096";
	}
	.formPageTable .selectAll:hover, .formPageTable .deselectAll:hover {
		color: #505050;
	}

	.formPageTable .hideCheckAll .selectAll, .formPageTable .hideCheckAll .deselectAll {
		display: none;
	}

	.financialField input {
		padding-left: 15px;
		padding-right: 5px;
		text-align: right;
	}
	.financialField::after {
		display: inline-block;
		position: relative;
		left: calc(-100% + 5px);
		width: 0px;
		height: 20px;
		content: "\20AC";
		color: #505050;
		line-height: 21px;
		text-align: center;
	}

	.percentageField input {
		padding-right: 20px;
		text-align: right;
	}
	.percentageField::after {
		display: inline-block;
		position: relative;
		left: -17px;
		width: 0px;
		height: 20px;
		content: "%";
		color: #505050;
		line-height: 21px;
		text-align: right;
	}

	.daysField input {
		padding-right: 50px;
		text-align: right;
	}
	.daysField::after {
		display: inline-block;
		position: relative;
		left: -45px;
		width: 0px;
		height: 20px;
		content: "dagen";
		color: #505050;
		line-height: 21px;
		text-align: right;
	}

	.formPageTable .statusGood {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 6px, #30ba30 7px, #30ba30 24px, rgba(0, 0, 0, 0) 25px);
		color: #FFFFFF;
		text-align: center;
	}
	
	.formPageTable .statusError {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 6px, #C00000 7px, #C00000 24px, rgba(0, 0, 0, 0) 25px);
		color: #FFFFFF;
		text-align: center;
	}

	.formPageTable td.addNewRowButton {
		text-align: center;
		cursor: pointer;
		color: #336699;
		font-size: 10px;
		text-transform: uppercase;
		line-height: 10px;
		transition: background-color 0.15s;
	}
	.formPageTable td.addNewRowButton:hover {
		background-color: #C9DDEF;
	}

	.formPageTable td.addNewRowButton i {
		margin-right: 2px;
		font-size: 13px;
	}

	.formPageTable i.encryptedField {
		display: block;
		float: right;
		width: 16px;
		height: 16px;
		margin-right: 2px;
		margin-top: 3px;
		background-image: url('../images/windownav_icons.png');
		background-position: 0px -448px;
		background-repeat: no-repeat;
		font-style: normal;
		filter: grayscale(100%);
	}
	.formPageTable i.encryptedField:hover {
		filter: grayscale(0%);
	}

	/* === LADEN WEERGEVEN === */
		.formPageTable input.loading:before {
			display: inline-block;
			width: 16px;
			height: 17px;
			margin-top: 10px;
			margin-left: -20px;
			color: #B1B1B1;
			font-family: FontAwesome;
			font-size: 16px;
			content: "\f1ce";
			animation: fa-spin 2s infinite linear;
		}

	/* === ACTIE KNOP BIJ VELD === */	
		.formPageTable .fieldAction input {
			width: calc(100% - 22px);
		}

		.formPageTable .fieldAction i {
			display: inline-block;
			width: 22px;
			height: 22px;
			border: 1px solid #B1B1B1;
			margin-left: -5px;
			background-color: #E1E1E1;
			background: linear-gradient(to bottom, #D7D7D7 0px, #E1E1E1 6px, #E1E1E1 100%);
			cursor: pointer;
			transition: background-color 0.15s;
		}
		.formPageTable .fieldAction i:hover {
			background: linear-gradient(to bottom, #68A1D8 0px, #77AADD 6px, #77AADD 100%);
		}
		.formPageTable .fieldAction i:before {
			width: 13px;
			height: 22px;
			margin-left: 3px;
			color: #505050;
			font-family: FontAwesome;
			font-size: 13px;
			font-style: normal;
			line-height: 20px;
			text-align: center;
		}
		.formPageTable .fieldAction i:hover:before {
			color: #FFFFFF;
		}
		.formPageTable .fieldAction i.phone:before {
			content: "\f095";
		}
		.formPageTable .fieldAction i.website:before {
			content: "\f08e";
		}
		.formPageTable .fieldAction i.coc:before {
			content: "\f08e";
		}
		.formPageTable .fieldAction i.email:before {
			content: "\f0e0";
		}

	/* === HELP BOX === */
		.formPageTable .helpBox {
			z-index: 20;
			position: fixed;
			display: none;
			width: 250px;
			height: auto;
			border: 1px solid #C0C000;
			background-color: #FFFEB9;
			font-size: 11px;
		}
		
		.formPageTable .helpBox:before {
			position: fixed;
			z-index: 20;
			display: block;
			width: 8px;
			height: 15px;
			margin-left: -8px;
			margin-top: 0px;
			background-image: url('../images/formpage_helpboxarrow.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
			content: " ";
		}
		
		.formPageTable .helpBox h6 {
			display: none;
		}
		
		.formPageTable .helpBox p {
			margin: 4px;
		}
		
/* === MANAGE PAGE === */
	.managePage table {
		width: 100%;
		margin-bottom: 30px;
		table-layout: fixed;
	}
	
	.managePage td {
		overflow: hidden;
		border-bottom: 1px dotted #C0C0C0;
		padding: 2px;
		line-height: 20px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.managePage tr[onclick] {
		cursor: pointer;
	}
	.managePage tr[onclick]:hover {
		background-color: #C0C0C0;
	}
		
	.managePage .header td {
		padding-bottom: 1px;
		padding-top: 1px;
		background-color: #A0A0A0;
		color: #FFFFFF;
		font-size: 11px;
		text-shadow: 0px -1px 0px #505050;
		text-transform: uppercase;
		cursor: pointer;
	}
	
	.managePage .header td.sortAsc:after, .managePage .header td.sortDesc:after {
		display: inline-block;
		width: 9px;
		height: 8px;
		margin-left: 5px;
		color: #F0F0F0;
		font-family: FontAwesome;
		font-size: 13px;
		line-height: 7px;
	}
	.managePage .header td.sortAsc:after {
		content: "\f106";
	}
	.managePage .header td.sortDesc:after {
		content: "\f107";	
	}
		
	.managePage .filters td {
		position: relative;
		height: 19px;
		background-color: #E0E0E0;
		background: -moz-linear-gradient(top, #bebebe 0%, #e0e0e0 15%, #e0e0e0 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #bebebe 0%, #e0e0e0 15%, #e0e0e0 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #bebebe 0%, #e0e0e0 15%, #e0e0e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		font-size: 11px;
		line-height: 17px;
	}
	.managePage .filters td:hover {
		overflow: visible;
	}
	.managePage .filters td:hover .listBox {
		display: block;
	}
	
	.managePage .filters td input[type=text] {
		width: 100%;
		height: 17px;
		border: 0px;
		background-color: #E0E0E0;
		font-size: 12px;
	}

	.managePage .filters td p {
		width: 100%;
		height: 17px;
		margin: 0px;
		padding: 0px;
		text-transform: uppercase;
	}
	.managePage .filters td p:after {
		position: absolute;
		display: inline-block;
		right: 3px;
		top: 1px;
		width: 13px;
		height: 13px;
		color: #686868;
		font-family: FontAwesome;
		font-size: 13px;
		content: "\f0d7";
	}
	
	.managePage .filters td .listBox {
		display: none;
		position: absolute;
		overflow-x: hidden;
		overflow-y: auto;
		left: 0px;
		width: auto;
		min-width: 100%;
		max-width: calc(100% + 30px);
		height: auto;
		max-height: 300px;
		padding-bottom: 5px;
		background-color: #E0E0E0;
		line-height: 17px;
		box-shadow: 2px 2px 3px rgba(150, 150, 150, 0.6);
		scrollbar-width: thin;
	}
	
	.managePage .filters td .listBox input[type=checkbox] {
		display: inline-block;
		width: 12px;
		height: 12px;
		vertical-align: bottom;
	}
	.managePage .filters td .listBox label {
		display: inline-block;
		clear: right;
		width: calc(100% - 20px);
		height: 20px;
		padding-left: 2px;
		line-height: 20px;
	}

	.managePage .filters td .listBox.dateRange {
		height: 120px;
		padding: 5px;
		padding-top: 0px;
	}
	
	.managePage .filters td .listBox.dateRange span {
		display: block;
		width: 100%;
		padding-top: 5px;
	}

	.managePage .filters td .listBox.dateRange input {
		display: block;
		width: 100%;
		height: 22px;
		border: 1px solid #B1B1B1;
		background-color: #FFFFFF;
		font-size: 11px;
	}

	.managePage .filters td .listBox.dateRange .inPageResultsButtonsBar div {
		width: 100%;
		border: 1px solid #C9C9C9;
	}
	.managePage .filters td .listBox.dateRange .inPageResultsButtonsBar div i {
		height: 12px;
		background-image: url('../images/windownav_icons.png');
	}

	/* === RESULTS BOX === */
		.inPageResultsBox {
			position: relative;
		}

		.managePage .resultsBox table, .inPageResultsBox table {
			width: 100%;
			table-layout: fixed;
		}
		
		.managePage .resultsBox td, .inPageResultsBox td {
			overflow: hidden;
			border-bottom: 1px dotted #C0C0C0;
			padding: 2px;
			line-height: 20px;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.managePage .resultsBox tr[onclick], .inPageResultsBox tr[onclick] {
			cursor: pointer;
		}
		.managePage .resultsBox tr[onclick]:hover, .inPageResultsBox tr[onclick]:hover {
			background-color: #C0C0C0;
		}
			
		.managePage .resultsBox .header td, .inPageResultsBox .header td {
			padding-bottom: 1px;
			padding-top: 1px;
			background-color: #A0A0A0;
			color: #FFFFFF;
			font-size: 11px;
			text-shadow: 0px -1px 0px #505050;
			text-transform: uppercase;
		}
		.inPageResultsBox .header td {
			background-color: transparent;
			color: #A0A0A0;
			font-size: 10px;
			text-shadow: none;
			line-height: 16px;
		}
		
		.inPageResultsBox h1, .inPageResultsBox .filters {
			display: none;
		}

	/* === CUSTOM STYLES === */
		.inPageResultsBox .primaryContactProcess, .inPageResultsBox .primaryContactFinancial, .inPageResultsBox .substantiveDecisions, .inPageResultsBox .inTestPanel, .inPageResultsBox .financialDecisions, .inPageResultsBox .fileTypes {
			display: inline-block;
			width: 14px;
			height: 14px;
			margin: 3px;
			background-image: url('../images/windownav_icons.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
			background-size: 14px;
			vertical-align: bottom;
		}
		.inPageResultsBox .primaryContactProcess {
			background-position: 0px -140px;
		}
		.inPageResultsBox .primaryContactFinancial {
			background-position: 0px -154px;
		}
		.inPageResultsBox .substantiveDecisions {
			background-position: 0px -238px;
		}
		.inPageResultsBox .inTestPanel {
			background-position: 0px -252px;
		}
		.inPageResultsBox .financialDecisions {
			background-position: 0px -266px;
		}

		.inPageResultsBox .fileTypes {
			background-image: none;
		}
		.inPageResultsBox .fileTypes::before {
			display: block;
			position: absolute;
			width: 16px;
			height: 16px;
			margin-left: -4px;
			margin-top: -3px;
			font-family: FontAwesome;
			font-size: 13px;
			font-style: normal;
			text-align: center;
		}
		.inPageResultsBox .fileTypes.pdf::before {
			content: "\f1c1";
		}

		.inPageResultsBox .totalsBar {
			position: absolute;
			bottom: -15px;
			left: -15px;
			width: calc(100% + 30px);
			height: 22px;
			padding-left: 15px;
			padding-right: 15px;
			background: linear-gradient(to bottom, #bebebe 0%, #e0e0e0 15%, #e0e0e0 100%);
			color: #303030;
			line-height: 21px;
		}

		.inPageResultsBox .totalsBar td {
			border-bottom: 0px;
			line-height: 21px;
		}

		.inPageResultsBox .componentIcon {
			display: inline-block;
			width: 16px;
			height: 16px;
			background-image: url('../images/devicecomponents_icons.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
			vertical-align: bottom;
		}
		.inPageResultsBox .componentIcon.case {
			background-position: 0px 0px;
		}
		.inPageResultsBox .componentIcon.cpu {
			background-position: 0px -16px;
		}
		.inPageResultsBox .componentIcon.dvd {
			background-position: 0px -32px;
		}
		.inPageResultsBox .componentIcon.gpu {
			background-position: 0px -48px;
		}
		.inPageResultsBox .componentIcon.hdd {
			background-position: 0px -64px;
		}
		.inPageResultsBox .componentIcon.mem {
			background-position: 0px -80px;
		}
		.inPageResultsBox .componentIcon.mb {
			background-position: 0px -96px;
		}
		.inPageResultsBox .componentIcon.pci {
			background-position: 0px -112px;
		}
		.inPageResultsBox .componentIcon.psu {
			background-position: 0px -128px;
		}
		.inPageResultsBox .componentIcon.screen {
			background-position: 0px -144px;
		}
		.inPageResultsBox .componentIcon.spk {
			background-position: 0px -160px;
		}
		.inPageResultsBox .componentIcon.sdc {
			background-position: 0px -176px;
		}
		.inPageResultsBox .componentIcon.sm2 {
			background-position: 0px -192px;
		}
		.inPageResultsBox .componentIcon.ssd {
			background-position: 0px -208px;
		}
		.inPageResultsBox .componentIcon.cam {
			background-position: 0px -224px;
		}
		
	/* === OPEN NEW WINDOW === */
		.managePage .newWindowCheckbox {
			z-index: 2;
			position: absolute;
			bottom: 5px;
			float: left;
		}
	
		.managePage .newWindowLabel {
			position: absolute;
			bottom: 0px;
			float: right;
			width: calc(100% - 60px);
			height: 28px;
			padding-left: 23px;
			border-top: 1px dotted #505050;
			background-color: #f1f1f1;
			color: #505050;
			font-size: 11px;
			line-height: 22px;
		}
		
	/* === IN PAGE BUTTON BAR === */
		.inPageResultsButtonsBar {
			width: 100%;
			height: 22px;
			margin-bottom: -5px;
		}
	
		.inPageResultsButtonsBar div {
			display: inline-block;
			width: auto;
			height: 22px;
			padding-left: 5px;
			padding-right: 10px;
			border-right: 1px solid #C9C9C9;
			color: #505050;
			font-size: 11px;
			line-height: 21px;
			cursor: pointer;
			transition: background-color 0.15s;
		}
		.inPageResultsButtonsBar div:hover {
			background-color: #C9C9C9;
		}
		
		.inPageResultsButtonsBar div i {
			display: block;
			clear: none;
			float: left;
			width: 12px;
			height: 12px;
			margin: 5px;
			background-image: url('../images/windownav_icons.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
			background-size: 12px;
		}
		.inPageResultsButtonsBar div.save i {
			background-position: 0px 0px;
		}
		.inPageResultsButtonsBar div.cancel i {
			background-position: 0px -12px;
		}
		.inPageResultsButtonsBar div.add i {
			background-position: 0px -24px;
		}
		.inPageResultsButtonsBar div.delete i {
			background-position: 0px -36px;
		}
		.inPageResultsButtonsBar div.next i {
			background-position: 0px -48px;
		}
		.inPageResultsButtonsBar div.processContact i {
			background-position: 0px -120px;
		}
		.inPageResultsButtonsBar div.financialContact i {
			background-position: 0px -132px;
		}
		.inPageResultsButtonsBar div.print i {
			background-position: 0px -156px;
		}

	/* === SELECTOR BUTTONS === */
		.managePage .selectorButtonsBar {
			position: absolute;
			bottom: 3px;
			float: right;
			width: calc(100% - 60px);
			height: 28px;
			background-color: #f1f1f1;
			color: #505050;
			font-size: 11px;
			line-height: 22px;
		}
		.managePage .selectorButtonsBar i {
			display: inline-block;
			width: 16px;
			height: 28px;
			margin-right: 5px;
			color: #A0A0A0;
			font-family: FontAwesome;
			font-size: 16px;
			font-style: normal;
			text-align: left;
			line-height: 28px;
			content: "\f148";
			transform: scaleX(-1);
		}

		.managePage .selectorButtonsBar div {
			display: inline-block;
			width: auto;
			height: 18px;
			padding-left: 33px;
			padding-right: 10px;
			border-right: 1px solid #C0C0C0;
			background-repeat: no-repeat;
			line-height: 18px;
			cursor: pointer;
			transition: background-color 0.15s;
		}
		.managePage .selectorButtonsBar div:hover {
			background-color: #C0C0C0;
		}
		.managePage .selectorButtonsBar.nothingSelected div {
			opacity: 0.5;
			cursor: default;
		}
		.managePage .selectorButtonsBar.nothingSelected div:hover {
			background-color: transparent;
		}

		.managePage .selectorButtonsBar div::before {
			display: inline-block;
			position: relative;
			width: 14px;
			height: 14px;
			margin-left: -23px;
			margin-right: 5px;
			margin-top: 2px;
			background-size: 14px auto;
			vertical-align: top;
			content: "";
		}
		.managePage .selectorButtonsBar div.add::before {
			background-image: url('../images/windownav_icons.png');
			background-position: 0px -28px;
		}
		.managePage .selectorButtonsBar div.print::before {
			background-image: url('../images/windownav_icons.png');
			background-position: 0px -182px;
		}
		.managePage .selectorButtonsBar div.mail::before {
			background-image: url('../images/windownav_icons.png');
			background-position: 0px -210px;
		}
		.managePage .selectorButtonsBar div.export::before {
			background-image: url('../images/windownav_icons.png');
			background-position: 0px -378px;
		}
		.managePage .selectorButtonsBar div.markSend::before {
			background-image: url('../images/windownav_icons.png');
			background-position: 0px -448px;
		}

		.managePage .selectorButtonsBar span.filterButton  {
			float: right;
			display: block;
			width: auto;
			height: 18px;
			margin-top: 6px;
			padding-left: 33px;
			padding-right: 10px;
			border-left: 1px solid #C0C0C0;
			background-repeat: no-repeat;
			line-height: 17px;
			cursor: pointer;
			transition: background-color 0.15s;
		}
		.managePage .selectorButtonsBar span.filterButton:hover {
			background-color: #C0C0C0;
		}
		.managePage .selectorButtonsBar span.filterButton::before {
			display: inline-block;
			position: relative;
			width: 14px;
			height: 14px;
			margin-left: -23px;
			margin-right: 5px;
			margin-top: 2px;
			background-image: url('../images/windownav_icons.png');
			background-position: 0px -364px;
			background-size: 14px auto;
			vertical-align: top;
			content: "";
		}

	/* === PRODUCTS === */
		.managePage .productPrices .current {
			color: #008000;
		}
		.managePage .productPrices .future {
			color: #505050;
		}
		.managePage .productPrices .inactive {
			color: #A0A0A0;
		}

	/* === PAYMENTS === */
		.managePage .payments i, .managePage .activityLog i {
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-left: auto;
			margin-right: auto;
			background-image: url('../images/managepage_icons.png');
			background-repeat: no-repeat;
			vertical-align: middle;
		}

		.managePage .payments i.paymentCash {
			background-position: 0px -48px;
		}

		.managePage .payments i.paymentBank {
			background-position: 0px -64px;
		}

		.managePage .payments i.paymentDeduct {
			background-position: 0px -80px;
		}

	/* === ACTIVITYLOG === */
		.managePage .activityLog i.insert {
			background-position: 0px -320px;
		}

		.managePage .activityLog i.update {
			background-position: 0px 0px;
		}

		.managePage .activityLog i.delete {
			background-position: 0px -336px;
		}

		.managePage .activityLog i.view {
			background-position: 0px -352px;
		}

		.managePage .activityLog i.other, .managePage .activityLog i.unknown {
			background-image: none;
		}

	/* === INVOICES === */
		.managePage .invoices i {
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-left: auto;
			margin-right: auto;
			background-image: url('../images/managepage_icons.png');
			background-repeat: no-repeat;
			vertical-align: middle;
		}

		.managePage .invoices i.type0 {
			background-position: 0px -368px;
		}

		.managePage .invoices i.type1 {
			background-position: 0px -384px;
		}

		.managePage .invoices i.statusConcept {
			background-position: 0px 0px;
		}

		.managePage .invoices i.statusFinal {
			background-position: 0px -96px;
		}

		.managePage .invoices i.statusSent {
			background-position: 0px -16px;
		}

		.managePage .invoices i.statusPaid {
			background-position: 0px -32px;
		}

	/* === RELATIONS === */
		.managePage .relations i {
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-left: auto;
			margin-right: auto;
			background-image: url('../images/managepage_icons.png');
			background-repeat: no-repeat;
			vertical-align: middle;
		}

		.managePage .relations i.active {
			background-position: 0px -32px;
		}

	/* === PROJECTS === */
		.managePage .projects i {
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-left: auto;
			margin-right: auto;
			background-image: url('../images/managepage_icons.png');
			background-repeat: no-repeat;
			vertical-align: middle;
		}

		.managePage .projects i.notStarted {
			background-position: 0px -304px;
		}
		
		.managePage .projects i.active {
			background-position: 0px -240px;
		}

		.managePage .projects i.onHold {
			background-position: 0px -288px;
		}

		.managePage .projects i.finished {
			background-position: 0px -32px;
		}

	/* === SALESSUBSCRIPTIONS === */
		.managePage .salesSubscriptions i {
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-left: auto;
			margin-right: auto;
			background-image: url('../images/managepage_icons.png');
			background-repeat: no-repeat;
			vertical-align: middle;
		}
		
		.managePage .salesSubscriptions i.active {
			background-position: 0px -240px;
		}

		.managePage .salesSubscriptions i.resigned {
			background-position: 0px -256px;
		}

		.managePage .salesSubscriptions i.stopped {
			background-position: 0px -272px;
		}

	/* === RELATION PASSWORDS === */
		.managePage .relationPasswords i {
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-left: auto;
			margin-right: auto;
			background-image: url('../images/managepage_icons.png');
			background-repeat: no-repeat;
			vertical-align: middle;
		}

		.managePage .relationPasswords i.ftp {
			background-position: 0px -112px;
		}

		.managePage .relationPasswords i.mysql {
			background-position: 0px -128px;
		}

		.managePage .relationPasswords i.linux {
			background-position: 0px -144px;
		}

		.managePage .relationPasswords i.windows {
			background-position: 0px -160px;
		}

		.managePage .relationPasswords i.pop3 {
			background-position: 0px -176px;
		}

		.managePage .relationPasswords i.he2013 {
			background-position: 0px -192px;
		}

		.managePage .relationPasswords i.o365 {
			background-position: 0px -208px;
		}

		.managePage .relationPasswords i.web {
			background-position: 0px -224px;
		}

	/* === RELATION CONTRACTS === */
		.managePage .relationContracts i {
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-left: auto;
			margin-right: auto;
			background-image: url('../images/managepage_icons.png');
			background-repeat: no-repeat;
			vertical-align: middle;
		}
		
		.managePage .relationContracts i.pending {
			background-position: 0px -16px;
		}

		.managePage .relationContracts i.expired {
			background-position: 0px -256px;
		}

		.managePage .relationContracts i.signed {
			background-position: 0px -32px;
		}

/* === PRODUCTGROUPS === */
	.productGroupsList {
		width: 100%;
		margin: 0px;
		padding: 0px;
	}

	.productGroupsList li {
		overflow: hidden;
		width: 100%;
		margin-bottom: 3px;
		margin-top: 3px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.productGroupsList > li > ul {
		margin: 0px;
		margin-left: 25px;
		padding: 0px;
	}

/* === INVOICE TOTALS BOX === */
	.invoiceTotalsBox {
		display: inline-block;
		width: 33%;
		margin-left: 36%;
	}

	.invoiceTotalsBox label {
		display: inline-block;
		width: 63%;
		padding-bottom: 1px;
		padding-top: 1px;
		margin-right: 2%;
		color: #505050;
		font-size: 11px;
	}
	.invoiceTotalsBox label.totalIncluding {
		margin-top: 7px;
		padding-top: 7px;
		border-top: 1px dotted #505050;
		color: #000000;
		font-size: 12px;
	}

	.invoiceTotalsBox label input, .invoiceTotalsBox label select {
		width: 50px;
		height: 16px;
		font-size: 11px;
	}

	.invoiceTotalsBox > span {
		display: inline-block;
		width: 33%;
	}
	.invoiceTotalsBox > span.totalIncluding {
		margin-top: 7px;
		padding-top: 4px;
		border-top: 1px dotted #505050;
	}

	.invoiceTotalsBox > span > input {
		width: 100%;
		height: 17px;
		border: 1px solid #B1B1B1;
		color: #505050;
		font-size: 11px;
	}
	.invoiceTotalsBox > span.totalIncluding input {
		height: 22px;
		color: #000000;
		font-size: 12px;
	}

/* === INVOICE TAX BOX === */
	.invoiceTaxBox {
		display: inline-block;
		width: 30%;
		border-collapse: collapse;
		border-spacing: 0px;
		table-layout: fixed;
	}

	.invoiceTaxBox td {
		width: 35%;
		height: 20px;
		padding: 1px;
		color: #505050;
		font-size: 11px;
	}
	.invoiceTaxBox td:first-of-type {
		width: 65%;
	}

	.invoiceTaxBox td > input {
		width: 100%;
		height: 17px;
		border: 1px solid #B1B1B1;
		color: #505050;
		font-size: 11px;
	}

/* === PURCHASE DELIVERY TOTALS BOX === */
	.purchaseDeliveryTotalsBox {
		display: inline-block;
		width: calc(100% + 30px - 17px);
		margin: -15px;
	}

	.purchaseDeliveryTotalsBox label {
		display: inline-block;
		width: 68%;
		padding-bottom: 1px;
		padding-top: 1px;
		padding-right: 10px;
		font-size: 11px;
		text-align: right;
	}

	.purchaseDeliveryTotalsBox input {
		width: 8%;
		height: 20px;
		border: 1px solid #B1B1B1;
		background-color: #F0F0F0;
		font-size: 12px;
		text-align: right;
	}

/* === PURCHASE INVOICE TOTALS BOX === */
	.purchaseInvoiceTotalsBox {
		display: inline-block;
		width: 33%;
		margin-left: 36%;
		margin-top: -10px;
		vertical-align: top;
	}

	.purchaseInvoiceTotalsBox label {
		display: inline-block;
		width: 32.4%;
		padding-bottom: 1px;
		padding-top: 1px;
		color: #505050;
		font-size: 11px;
		text-align: center;
	}

	.purchaseInvoiceTotalsBox > span {
		display: inline-block;
		width: 32.4%;
	}

	.purchaseInvoiceTotalsBox > span > input {
		width: 100%;
		height: 17px;
		border: 1px solid #B1B1B1;
		color: #505050;
		font-size: 11px;
	}

/* === DIRECT DEBIT TOTALS BOX === */
	.directDebitBatchTotalsBox {
		width: calc(100% + 16px);
		margin-top: -15px;
		margin-left: -16px;
	}

	.directDebitBatchTotalsBox label {
		display: inline-block;
		height: 22px;
		margin-top: 7px;
		padding-bottom: 1px;
		padding-top: 7px;
	}
	.directDebitBatchTotalsBox label.transactionsCount {
		width: 10%;
	}
	.directDebitBatchTotalsBox label.transactionsSum {
		width: 20%;
		margin-left: 53%;
		text-align: right;
	}

	.directDebitBatchTotalsBox input {
		height: 22px;
		border: 1px solid #B1B1B1;
	}
	.directDebitBatchTotalsBox input.transactionsCount {
		width: 4%;
		text-align: right;
	}
	.directDebitBatchTotalsBox .transactionsSum {
		display: inline-block;
		width: 11%;
	}
	.directDebitBatchTotalsBox .transactionsSum input {
		width: 100%;
	}

/* === SUBSCRIPTION RECURRENCE PATTERN TABLE === */
	.subscriptionRecurrencePatternTable {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0px;
		table-layout: fixed;
	}

	.subscriptionRecurrencePatternTable td {
		padding-bottom: 8px;
		padding-left: 15px;
		padding-top: 8px;
	}
	.subscriptionRecurrencePatternTable td.periodField {
		width: 25%;
		padding-left: 0px;
		padding-right: 7px;
		border-right: 1px dotted #D0D0D0;
	}

	.subscriptionRecurrencePatternTable .periodField input[type=radio] {
		margin-top: 1px;
		vertical-align: text-top;
	}

	.subscriptionRecurrencePatternTable .periodField label {
		display: inline-block;
		width: calc(100% - 30px);
		height: 18px;
		margin-bottom: 4px;
		line-height: 18px;
	}

	.subscriptionRecurrencePatternTable input[type=text], .subscriptionRecurrencePatternTable select {
		width: 25px;
		height: 18px;
		border: 1px solid #B1B1B1;
		background: linear-gradient(to bottom, #E6E6E6 0px, #FFFFFF 6px, #FFFFFF 100%);
		text-align: right;
	}
	.subscriptionRecurrencePatternTable select {
		width: 95px;
		text-align: left;
	}

/* === PROJECT HOURREGISTRATIONS === */
	.projectHoursTable {
		width: 450px;
		margin-left: auto;
		margin-right: auto;
	}

	.projectHoursTable td {
		width: 33.33%;
		padding-bottom: 10px;
		text-align: center;
	}

	.projectHoursTable tr.titles td {
		padding-bottom: 2px;
		padding-top: 10px;
		color: #505050;
		font-size: 11px;
	}

	.projectHoursTable input {
		width: 150px;
		border: 1px solid #B1B1B1;
		background: linear-gradient(to bottom, #E6E6E6 0px, #FFFFFF 6px, #FFFFFF 100%);
	}
	.projectHoursTable td.billingRate input {
		width: 75px;
	}

	.projectHoursTable input.activeTime {
		width: 150px;
		height: 28px;
		font-size: 18px;
		letter-spacing: 0.25pt;
		line-height: 26px;
		text-align: center;
	}

/* === ATTACHMENTS === */
	.attachmentsTable i {
		display: inline-block;
		width: 14px;
		height: 14px;
		margin-right: 7px;
		background-image: url('../images/windownav_icons.png');
		background-size: 14px auto;
		background-repeat: no-repeat;
		cursor: pointer;
		transition: opacity 0.15s;
	}
	.attachmentsTable i:hover {
		opacity: 0.6;
	}
	.attachmentsTable i.delete {
		background-position: 0px -42px;	
	}
	.attachmentsTable i.edit {
		background-position: 0px -98px;	
	}

/* === DASHBOARD === */
	.dashboardBox {
		width: 100%;
	}

	/* === NOTIFICATIONS === */
		.dashboardBox .notifications ul {
			width: 100%;
			margin: 0px;
			padding: 0px;
		}

		.dashboardBox .notifications li {
			width: 100%;
			margin-bottom: 5px;
			padding-left: 20px;
			list-style: none;
			line-height: 18px;
		}
		.dashboardBox .notifications li.W {
			font-weight: bold;
		}
		.dashboardBox .notifications li.E {
			color: #DE2100;
			font-weight: bold;
		}

		.dashboardBox .notifications li::before {
			position: relative;
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-left: -20px;
			margin-right: 7px;
			background-image: url('../images/notification_icons.png');
			background-repeat: no-repeat;
			vertical-align: middle;
			content: " ";
		}
		.dashboardBox .notifications li.N::before {
			background-position: 0px 0px;
		}
		.dashboardBox .notifications li.W::before {
			background-position: 0px -16px;
		}
		.dashboardBox .notifications li.E::before {
			background-position: 0px -32px;
		}

		.dashboardBox .notifications li i {
			display: none;
			float: right;
			width: 16px;
			height: 16px;
			font-family: FontAwesome;
			cursor: pointer;
			opacity: 0.5;
			transition: all 0.15s;
		}
		.dashboardBox .notifications li:hover i {
			display: block;
		}
		.dashboardBox .notifications li i:hover {
			opacity: 1;
		}

	/* === HOUR REGISTRATIONS === */
		.dashboardBox .hourRegistrations .name {
			display: inline-block;
			width: 120px;
			height: 22px;
			margin-bottom: 3px;
			line-height: 20px;
			vertical-align: top;
		}

		.dashboardBox .hourRegistrations .targetsBox {
			display: inline-block;
			overflow: hidden;
			width: calc(100% - 124px);
			height: 20px;
			margin-bottom: 3px;
			border: 1px solid #D0D0D0;
			vertical-align: top;
		}
		.dashboardBox .hourRegistrations .targetsBox:hover {
			overflow: visible;
		}

		.dashboardBox .hourRegistrations .targetsBox div[data-hours]::after {
			display: none;
			position: relative;
			left: 100%;
			top: 14px;
			width: 36px;
			height: 13px;
			margin-left: -18px;
			border-radius: 2px;
			background-color: rgba(251, 251, 251, 0.8);
			font-size: 9px;
			line-height: 13px;
			text-align: center;
			content: attr(data-hours);
		}
		.dashboardBox .hourRegistrations .targetsBox:hover div[data-hours]::after {
			display: block;
		}

		.dashboardBox .hourRegistrations .targetsBox .realized {
			width: 1px;
			height: 18px;
			background-color: #9cc5e6;
		}
		.dashboardBox .hourRegistrations .targetsBox .currentTarget {
			width: 1px;
			height: 18px;
			margin-top: -18px;
			/* background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0px,  rgba(0, 0, 0, 0) 3px, rgba(51, 102, 153, 1) 4px, rgba(0, 0, 0, 0) 4px); */
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(51, 102, 153, 0.5) 100%);
		}
		.dashboardBox .hourRegistrations .targetsBox .remainingTarget {
			width: 1px;
			height: 18px;
			margin-top: -18px;
			/* background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0px,  rgba(0, 0, 0, 0) 3px, rgba(51, 102, 153, 0.4) 4px, rgba(0, 0, 0, 0) 4px); */
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(51, 102, 153, 0.3) 100%);
		}


		.dashboardBox .hourRegistrations .axleScale {
			width: calc(100% - 124px);
			margin-left: 124px;
			margin-top: -5px;
		}

		.dashboardBox .hourRegistrations .axleScale div {
			display: inline-block;
			width: 36px;
			color: #808080;
			font-size: 9px;
			text-align: left;
		}
		.dashboardBox .hourRegistrations .axleScale div:last-of-type {
			margin-left: calc(100% - 76px);
			text-align: right;
		}

	/* === FINANCIAL TARGETS === */
		.dashboardBox .financialTargets .name {
			display: inline-block;
			width: 120px;
			height: 32px;
			margin-bottom: 3px;
			line-height: 30px;
			vertical-align: top;
		}

		.dashboardBox .financialTargets .targetsBox {
			display: inline-block;
			overflow: hidden;
			width: calc(100% - 124px);
			height: 30px;
			margin-bottom: 3px;
			border: 1px solid #D0D0D0;
			vertical-align: top;
		}
		.dashboardBox .financialTargets .targetsBox:hover {
			overflow: visible;
		}

		.dashboardBox .financialTargets .targetsBox div[data-hours]::after {
			display: none;
			position: relative;
			left: 100%;
			top: 22px;
			width: 60px;
			height: 13px;
			margin-left: -30px;
			border-radius: 2px;
			background-color: rgba(251, 251, 251, 0.8);
			font-size: 9px;
			line-height: 13px;
			text-align: center;
			content: attr(data-hours);
		}
		.dashboardBox .financialTargets .targetsBox:hover div[data-hours]::after {
			display: block;
		}
		.dashboardBox .financialTargets .targetsBox div:nth-child(2)[data-hours]::after {
			top: 32px;
		}
		.dashboardBox .financialTargets .targetsBox div:nth-child(3)[data-hours]::after {
			top: 42px;
		}

		.dashboardBox .financialTargets .targetsBox .realized {
			width: 1px;
			height: 28px;
			background-color: #9cc5e6;
		}
		.dashboardBox .financialTargets .targetsBox .currentTarget {
			width: 1px;
			height: 28px;
			margin-top: -28px;
			/* background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0px,  rgba(0, 0, 0, 0) 3px, rgba(51, 102, 153, 1) 4px, rgba(0, 0, 0, 0) 4px); */
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(51, 102, 153, 0.5) 100%);
		}
		.dashboardBox .financialTargets .targetsBox .remainingTarget {
			width: 1px;
			height: 28px;
			margin-top: -28px;
			/* background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0px,  rgba(0, 0, 0, 0) 3px, rgba(51, 102, 153, 0.4) 4px, rgba(0, 0, 0, 0) 4px); */
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(51, 102, 153, 0.3) 100%);
		}

		/* === OPENSTAAND BEDRAG === */
			.dashboardBox .financialTargets .targetsBox.unpaidBalance {
				height: 20px;
			}
				
			.dashboardBox .financialTargets .targetsBox.unpaidBalance .realized {
				width: 1px;
				height: 18px;
				background-color: #ffcc83;
			}
			.dashboardBox .financialTargets .targetsBox.unpaidBalance .currentTarget {
				width: 1px;
				height: 18px;
				margin-top: -18px;
				/* background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0px,  rgba(0, 0, 0, 0) 3px, rgba(204, 28, 0, 1) 4px, rgba(0, 0, 0, 0) 4px); */
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(204, 28, 0, 0.5) 100%);
			}

		.dashboardBox .financialTargets .axleScale {
			width: calc(100% - 124px);
			margin-left: 124px;
			margin-top: -5px;
		}

		.dashboardBox .financialTargets .axleScale div {
			display: inline-block;
			width: 60px;
			color: #808080;
			font-size: 9px;
			text-align: left;
		}
		.dashboardBox .financialTargets .axleScale div:last-of-type {
			margin-left: calc(100% - 125px);
			text-align: right;
		}

/* === PASSWORD AUTHENTICATE === */	
	.passwordAuthenticateBox p {
		width: 100%;
		margin-bottom: -10px;
		padding-right: 0px;
		padding-top: 10px;
		font-style: italic;
		font-size: 12px;
		line-height: 21px;
	}

	.passwordAuthenticateBox label {
		display: block;
		width: 100%;
		height: 16px;
		margin-top: 30px;
		color: #969696;
		font-size: 10px;
		text-transform: uppercase;
	}
	
	.passwordAuthenticateBox div.input {
		display: block;
		width: 100%;
		height: 30px;
		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+ */
	}

	.passwordAuthenticateBox div.input i {
		width: 28px;
		height: 28px;
		color: #969696;
		font-size: 15px;
		text-align: center;
		line-height: 31px;
	}
	
	.passwordAuthenticateBox div.input input {
		width: 90%;
		height: 28px;
		border: 0px;
		background-color: transparent;
	}
	
	.passwordAuthenticateBox input[type=button], .largeConfirmButton {
		width: 100%;
		height: 32px;
		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;
	}

/* === USERS RIGHTS TREE === */
	.systemUserRightsTree ul, .systemUserRightsTree li {
		margin: 0px;
		padding: 0px;
		list-style: none;
		line-height: 20px;
	}

	.systemUserRightsTree input {
		vertical-align: top;
		margin-right: 7px;
	}

	.systemUserRightsTree label {
		width: calc(100% - 35px);
	}

	.systemUserRightsTree > ul > li {
		padding-bottom: 10px;
	}

    .systemUserRightsTree > ul > li > i {
        display: inline-block;
        width: 7px;
        height: 14px;
        color: #808080;
        font-family: FontAwesome;
        font-size: 14px;
        font-style: normal;
        line-height: 14px;
        cursor: pointer;
    }
    .systemUserRightsTree > ul > li.unfold > i {
        content: "\f0d7";
    }

	.systemUserRightsTree > ul > li > ul {
        display: none;
		margin-left: 27px;
		font-weight: normal;
	}
    .systemUserRightsTree > ul > li.unfold > ul {
        display: block;
    }

/* === BANKING PARTICULARS === */
	.bankingParticularsList {
		margin: 0px;
		padding: 0px;
	}

	.bankingParticularsList li {
		margin-bottom: 7px;
		padding-left: 20px;
		line-height: 18px;
		list-style: none;
	}
	.bankingParticularsList li::before {
		position: relative;
		display: inline-block;
		width: 16px;
		height: 16px;
		margin-left: -20px;
		margin-right: 7px;
		background-image: url('../images/notification_icons.png');
		background-repeat: no-repeat;
		background-position: 0px -16px;
		vertical-align: middle;
		content: " ";
	}	

	.bookkeepingSurveys {
		margin-top: 30px;
	}

/* === PIVOT TABLE === */
	.pivotTable {
		position: relative;
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		border-spacing: 0px;
	}

	.pivotTable td {
		overflow: hidden;
		padding: 3px;
		padding-left: 5px;
		line-height: 17px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.pivotTable thead td {
		background-color: #A0A0A0;
		color: #FFFFFF;
		font-size: 11px;
		text-shadow: 0px -1px 0px #505050;
		text-transform: uppercase;
	}
	.pivotTable thead td span {
		transform: rotate(-45deg);
	}
	.pivotTable thead tr.sumsRow td {
		background-color: #C0C0C0;
		color: #303030;
		line-height: 13px;
		text-shadow: none;
	}

	.pivotTable tbody td {
		border: 1px dotted #C0C0C0;
	}

	.pivotTable td i {
		display: inline-block;
		width: 16px;
		height: 16px;
		background-image: url('../images/windownav_icons.png');
		background-repeat: no-repeat;
		font-style: normal;
		cursor: pointer;
		opacity: 0;
		transition: opacity 0.15s;
		filter: grayscale(50%);
	}
	.pivotTable td:hover i {
		opacity: 0.5;
	}
	.pivotTable td:hover i:hover {
		opacity: 1;
		filter: none;
	}

	/* === NAVIGATION === */
		.pivotTableNavigation {
			display: inline-block;
			width: calc(100% - 350px);
			height: 36px;
			list-style: none;
			margin: 0px;
			margin-bottom: 15px;
			margin-top: 15px;
			padding: 0px;
			border-bottom: 1px solid #E0E0E0;
			border-top: 1px solid #E0E0E0;
			transition: all 0.15s;
		}

		.pivotTableNavigation li {
			overflow: hidden;
			display: inline-block;
			width: 50px;
			height: 34px;
			color: #A0A0A0;
			font-family: "Eras ITC", "Eras Demi ITC";
			font-size: 13px;
			line-height: 34px;
			text-align: center;
			text-overflow: ellipsis;
			white-space: nowrap;
			cursor: pointer;
		}
		.pivotTableNavigation li:hover {
			color: #505050;
			background-color: #E0E0E0;
		}

		.pivotTableNavigation li.active {
			background-color: #77AADD;
			color: #FFFFFF;
			font-size: 17px;
			text-shadow: -1px 1px 0px #5588BB;
		}

	/* === SUM BOX === */
		.pivotTableSum {
			display: block;
			float: right;
			width: 300px;
			height: 36px;
			margin: 15px;
			margin-right: 0px;
			border: 1px solid #A0A0A0;
			background-color: #E0E0E0;
		}

		.pivotTableSum label {
			overflow: hidden;
			display: inline-block;
			width: 60%;
			height: 34px;
			padding: 6px;
			color: #A0A0A0;
			font-size: 10px;
			line-height: 12px;
			vertical-align: top;
		}
		.pivotTableSum label::first-line {
			color: #000000;
			font-size: 13px;
		}

		.pivotTableSum span {
			display: inline-block;
			width: 38%;
			height: 20px;
			margin-top: 6px;
			font-size: 14px;
			vertical-align: top;
		}

		.pivotTableSum input {
			width: 100%;
			height: 20px;
			border: 0px;
			background-color: transparent;
			font-size: 14px;
		}

	/* === BANKINGLEDGER === */
		.pivotTable.bankingLedger td.transactionDate {
			width: 7.5%;
		}

		.pivotTable.bankingLedger td.description {
			width: 25%;
		}
		.pivotTable.bankingLedger td.description i {
			float: right;
			background-position: 0px -496px;
		}

		.pivotTable.bankingLedger td.amount, .pivotTable.bankingLedger td[class^='ledgerAccount'], .pivotTable.bankingLedger td[class*=' ledgerAccount'] {
			width: 7.5%;
			padding-right: 5px;
			text-align: right;
		}
		.pivotTable.bankingLedger tbody td.amount {
			background-color: #E0E0E0;
		}

	/* === SALESJOURNAL === */
		.pivotTable.salesJournal td.date, .pivotTable.salesJournal td.invoiceId {
			width: 6%;
			text-align: center;
		}

		.pivotTable.salesJournal td.description {
			width: 25%;
		}
		.pivotTable.salesJournal td.description i {
			float: right;
			background-position: 0px -496px;
		}

		.pivotTable.salesJournal td.totalIncluding, .pivotTable.salesJournal td[class^='ledgerAccount'], .pivotTable.salesJournal td[class*=' ledgerAccount'], .pivotTable.salesJournal td.taxAmount {
			width: 7%;
			padding-right: 5px;
			text-align: right;
		}
		.pivotTable.salesJournal tbody td.totalIncluding {
			background-color: #E0E0E0;
		}

	/* === PURCHASEJOURNAL === */
		.pivotTable.purchaseJournal td.date, .pivotTable.purchaseJournal td.invoiceId {
			width: 6%;
			text-align: center;
		}

		.pivotTable.purchaseJournal td.description {
			width: 15%;
		}
		.pivotTable.purchaseJournal td.description i {
			float: right;
			background-position: 0px -496px;
		}

		.pivotTable.purchaseJournal td.totalIncluding, .pivotTable.purchaseJournal td[class^='ledgerAccount'], .pivotTable.purchaseJournal td[class*=' ledgerAccount'], .pivotTable.purchaseJournal td.taxAmount {
			width: 6.08%;
			padding-right: 5px;
			text-align: right;
		}
		.pivotTable.purchaseJournal tbody td.totalIncluding {
			background-color: #E0E0E0;
		}

	/* === TRIPREGISTRATIONS === */
		.pivotTableSum.tripRegistration div {
			display: inline-block;
			width: 38%;
			height: 34px;
		}

		.pivotTableSum.tripRegistration div span {
			width: 100%;
			margin-top: 0px;
			font-size: 13px;
		}
		.pivotTableSum.tripRegistration div span input {
			height: 16px;
			margin-top: 4px;
		}
		.pivotTableSum.tripRegistration div span.codeF {
			height: 14px;
			margin-top: -6px;
			color: #A0A0A0;
			font-size: 10px;
		}
		.pivotTableSum.tripRegistration div span.codeF input {
			height: 14px;
			margin-top: 0px;
			color: #A0A0A0;
			font-size: 10px;
		}

		.pivotTable.tripRegistrations td.date {
			width: 7%;
			text-align: center;
		}

		.pivotTable.tripRegistrations .startMileage, .pivotTable.tripRegistrations .halfwayMileage, .pivotTable.tripRegistrations .endMileage, .pivotTable.tripRegistrations .subtotalMileage {
			width: 5%;
			text-align: right;
		}
		.pivotTable.tripRegistrations tbody td.subtotalMileage {
			background-color: #E0E0E0;
		}
		.pivotTable.tripRegistrations .subtotalMileage i {
			float: left;
			background-position: 0px -112px;
		}

		.pivotTable.tripRegistrations .departureAddress, .pivotTable.tripRegistrations .arrivalAddress {
			width: 18%;
		}

		.pivotTable.tripRegistrations .remarks {
			width: 18%;
		}

		.pivotTable.tripRegistrations .employee {
			width: 11%;
		}

		.pivotTable.tripRegistrations .code {
			width: 4%;
		}

	/* === MONTH TOTALS === */
		.pivotTable.monthTotals .description {
			width: 15%;
			text-align: left;
		}

		.pivotTable.monthTotals td {
			width: 7.08%;
			text-align: right;
		}

	/* === SUBSCRIPTIONINVOICESSURVEY === */
		.pivotTable.subscriptionInvoicesSurvey td.customerId {
			width: 6%;
		}

		.pivotTable.subscriptionInvoicesSurvey td.customerName {
			width: 22%;
		}

		.pivotTable.subscriptionInvoicesSurvey td[class*='month'] {
			width: 6%;
			padding-right: 5px;
			text-align: right;
		}
		.pivotTable.subscriptionInvoicesSurvey td[class*='month'].growthEqual {
			background-color: #a8be4c;
		}
		.pivotTable.subscriptionInvoicesSurvey td[class*='month'].growthSmall {
			background-color: #ff9900;
		}
		.pivotTable.subscriptionInvoicesSurvey td[class*='month'].growthLarge {
			background-color: #ec4732;
		}

/* === VAT DECLARATIONS === */
	.formPageTable.vatDeclarationTable {
		max-width: none;
	}

	.formPageTable.vatDeclarationTable td {
		width: 15%;
	}
	.formPageTable.vatDeclarationTable td:first-of-type {
		width: 70%;
	}

/* === RELATIONS === */
	.relationStatisticsBox {
		height: 223px;
	}

	.relationStatisticsBox .marginGauge {
		overflow: hidden;
		width: 140px;
		height: 70px;
		background-image: url('../images/gauge_bg.svg');
	}

	.relationStatisticsBox .marginGauge svg {
		opacity: 0.7;
		width: 40px;
		height: 140px;
		margin-left: 50px;
	}

	.relationStatisticsBox .marginLabel {
		display: inline-block;
		width: 140px;
		height: 14px;
		margin-bottom: 10px;
		margin-top: 5px;
		color: #505050;
		font-size: 11px;
		text-align: center;
	}

	.relationStatisticsBox .historyTable {
		width: 100%;
		font-size: 11px;
		line-height: 15px;
		border-spacing: 0px 5px;
		table-layout: fixed;
	}

	.relationStatisticsBox .historyTable th {
		border: 0px !important;
		color: #A0A0A0;
		font-size: 10px;
		font-weight: normal;
		text-transform: uppercase;
	}

	.relationStatisticsBox .historyTable .label {
		width: 40px;
		color: #505050;
		text-align: left;
	}

	.relationStatisticsBox .historyTable .margin, .relationStatisticsBox .historyTable .mgMargin {
		width: 100px;
		height: 17px;
		border: 1px solid #D0D0D0;
		background-color: transparent;
		text-align: center;
	}
	.relationStatisticsBox .historyTable .mgMargin {
		width: 60px;
	}

	.relationStatisticsBox .historyTable .sales, .relationStatisticsBox .historyTable .profit, .relationStatisticsBox .historyTable .mgAmount {
		width: calc((100% - 210px) / 2);
		border-bottom: 1px dotted #D0D0D0;
		border-top: 1px dotted #D0D0D0;
		padding-right: 3px;
		text-align: right;
	}
	.relationStatisticsBox .historyTable .mgAmount {
		width: calc((50% - 110px) / 2);
	}

	.relationStatisticsBox .historyTable .growth {
		width: 70px;
		border-bottom: 1px dotted #D0D0D0;
		padding-right: 3px;
		text-align: right;
	}

	/* === MARGE TABEL === */
		.relationStatisticsBox .marginTable {
			width: 100%;
			font-size: 11px;
			line-height: 15px;
			table-layout: fixed;
		}

		.relationStatisticsBox .marginTable th {
			color: #A0A0A0;
			font-size: 10px;
			font-weight: normal;
			text-transform: uppercase;
		}

		.relationStatisticsBox .marginTable td {
			padding: 3px 0px;
			border-bottom: 1px dotted #D0D0D0;
		}

		.relationStatisticsBox .marginTable .period {
			width: calc(50% - 50px);
			border-left: 1px solid #D0D0D0;
		}

		.relationStatisticsBox .marginTable .label {
			overflow: hidden;
			width: 100px;
			color: #505050;
			text-align: left;
			text-overflow: ellipsis;
		}

		.relationStatisticsBox .marginTable .margin {
			width: 60px;
			background-color: transparent;
			text-align: center;
		}
		.relationStatisticsBox .marginTable .margin span {
			display: block;
			width: 100%;
			height: 13px;
			margin: 2px 0px;
			line-height: 13px;
		}

		.relationStatisticsBox .marginTable .revenue, .relationStatisticsBox .marginTable .costs {
			width: calc((50% - 110px) / 2);
			padding-right: 3px;
			text-align: right;
		}
		.relationStatisticsBox .marginTable .revenue {
			border-left: 1px solid #D0D0D0;
		}

/* === PRODUCT PRIJZEN AANPASSEN TABEL === */
	.productUpdatePricesTable {
		width: 100%;
	}

	.productUpdatePricesTable td:not(.subTable) {
		padding: 2px 0px;
		border-bottom: 1px dotted #D0D0D0;
	}

	.productUpdatePricesTable tr.category td.name {
		font-weight: bold;
	}

	.productUpdatePricesTable i::before {
		display: inline-block;
		width: 11px;
		height: 15px;
		color: #808080;
		font-family: FontAwesome;
		font-size: 14px;
		font-style: normal;
		line-height: 14px;
		cursor: pointer;
		content: "\f0d7";
	}
	.productUpdatePricesTable tr.folded i::before {
		content: "\f0da";
	}

	.productUpdatePricesTable .name {
		width: 50%;
	}
	.productUpdatePricesTable .name input {
		margin-right: 7px;
	}
	.productUpdatePricesTable .level2 .name {
		padding-left: 10px;
	}
	.productUpdatePricesTable .level3 .name {
		padding-left: 20px;
	}
	.productUpdatePricesTable .level4 .name {
		padding-left: 30px;
	}

	.productUpdatePricesTable .priceSince {
		width: 14%;
	}

	.productUpdatePricesTable .currentPrice, .productUpdatePricesTable .newPrice {
		width: 12%;
	}

	.productUpdatePricesTable .correction {
		width: 12%;
	}
	.productUpdatePricesTable .correction input[type=text] {
		width: calc(100% - 30px);
	}

	.productUpdatePricesTable input {
		width: 100%;
		height: 22px;
		border: 1px solid #B1B1B1;
		padding-left: 3px;
		background-color: #FFFFFF;
		background: -moz-linear-gradient(top, #E6E6E6 0px, #FFFFFF 6px, #FFFFFF 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #E6E6E6 0px, #FFFFFF 6px, #FFFFFF 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #E6E6E6 0px, #FFFFFF 6px, #FFFFFF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
	.productUpdatePricesTable input[type=checkbox], .productUpdatePricesTable input[type=radio] {
		width: auto;
		height: auto;
	}
	.productUpdatePricesTable input[disabled] {
		background-color: #ECECEC;
		background: -moz-linear-gradient(top, #E1E1E1 0px, #ECECEC 6px, #ECECEC 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #E1E1E1 0px, #ECECEC 6px, #ECECEC 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #E1E1E1 0px, #ECECEC 6px, #ECECEC 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		color: #000000;
	}

	.productUpdatePricesTable td.subTable.folded {
		display: none;
	}