/* =========================== */
/*  ARIENS LEERLINGDOSSIER     */
/*  VERSIE 1.0.00              */
/* =========================== */
/*  © 2007-2012 LuSaneT Group  */
/*  www.lusanet.nl             */
/* =========================== */
/*  Module elementen           */
/*  includes/modules.css       */
/* =========================== */

/*
.warning, .notEditable {
	clear: both;
	float: none;
	width: 560px;
	margin: 50px;
	margin-left: 65px;
	padding-left: 70px;
	background-image: url('../images/icon_warning.jpg');
	background-position: 0px 0px;
	background-repeat: no-repeat;
	font-size: 14px;
	line-height: 20px;
}
.notEditable {
	background-image: url('../images/icon_noteditable.jpg');
}

.warning strong, .notEditable strong {
	color: #FF9900;
	font-size: 23px;
	font-weight: bold;
	line-height: 50px;
}
.notEditable strong {
	color: #808080;
}
*/
/* === SYSTEM === */
	/* === LOGIN === */
		.systemLoginBox {
			width: 450px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 100px;
			padding-top: 25px;
			border: 1px solid #dddede;
			border-radius: 3px;
			box-shadow: 1px 1px 2px 0px #808080;
			background-color: #EEEEEE;
		}

		.systemLoginBox h2 {
			margin: 10px;
			margin-left: 30px;
			margin-bottom: 25px;
			margin-top: -10px;
			padding: 0px;
			color: #808080;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 20px;
			font-weight: normal;
		}
	
		.systemLoginBox p {
			width: 80%;
			margin: 0px;
			margin-left: 30px;
			margin-bottom: 25px;
			padding: 0px;
			color: #808080;
		}
				
		.systemLoginBox label {
			width: 80%;
			height: 15px;
			margin-left: 30px;
			color: #808080;
			font-size: 10px;
			text-transform: uppercase;
		}
		
		.systemLoginBox input:not([type=checkbox]) {
			width: 80%;
			height: 25px;
			margin-bottom: 20px;
			margin-left: 30px;
			padding-left: 30px;
			border: 1px solid #C0C0C0;
			box-shadow: 1px 1px 1px 0px #d7d7d7 inset;
			background-image: url('../images/loginscreen_fieldicons.png');
			background-position: 2px -24px;
			background-repeat: no-repeat;
		}
		.systemLoginBox input[type=text] {
			background-position: 2px 2px;	
		}
		
		.systemLoginBox a {
			display: block;
			clear: none;
			float: left;
			margin-left: 30px;
			color: #808080;
			font-size: 11px;
			text-decoration: none;
			line-height: 20px;
		}
		.systemLoginBox a:hover {
			color: #000000;
			text-decoration: underline;
		}
		
		.systemLoginBox input[type=button], .systemLoginBox.exportFilesBox input[type=submit] {
			clear: none;
			float: right;
			width: 100px;
			height: 20px;
			margin-right: 0px;
			margin-top: 5px;
			margin-right: 30px;
			padding: 0px;
			border: 0px;
			border-radius: 3px;
			background-color: #98bf0e;
			background-image: none;
			box-shadow: none;
			color: #FFFFFF;
			text-align: center;
		}
		
		/* === EXPORT FILES BOX === */
			.systemLoginBox.exportFilesBox {
				margin-top: 150px;
			}
			
			#content .systemLoginBox.exportFilesBox h1 {
				margin-left: 30px;
				margin-bottom: 15px;
			}
			
			.systemLoginBox.exportFilesBox p {
				color: #505050;
				line-height: 19px;
			}
			.systemLoginBox.exportFilesBox p.errorMessage {
				padding: 8px;
				border-radius: 3px;
				background-color: #c00e11;
				color: #FFFFFF;
				text-align: center;
			}
			
			.systemLoginBox.exportFilesBox input[type=submit] {
				float: none;
				width: 80%;
			}
		
	/* === 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: 35px;
			margin: 20px;
			margin-left: 0px;
			padding-left: 10px;
			border: 1px solid #808080;
			background-color: #EEEEEE;
			font-size: 11px;
			line-height: 35px;
			cursor: pointer;
		}
		.systemChooseRoleBox li:hover {
			background-color: #98bf0e;
			color: #FFFFFF;	
		}
		
		.systemChooseRoleBox li strong {
			font-size: 12px;
		}

/* === WAARSCHUWING BOX === */
	.warningBoxTitle {
		margin: 0px;
		margin-bottom: -10px;
		color: #f7941e;
		font-size: 13px;
	}

	.warningBox {
		width: calc(100% - 6px);
		height: auto;
		margin-bottom: 15px;
		margin-left: 3px;
		margin-top: 15px;
		padding: 5px;
		background-color: #f7941e;
		border: 1px solid #FFFFFF;
		box-shadow: 0px 0px 0px 3px #f7941e;
		color: #FFFFFF;
		text-shadow: 1px 1px 0px #995607;
	}

	.warningBox li {
		margin: 3px;
		margin-left: 20px;
		list-style: square;
	}

	.noticeBoxTitle {
		margin: 0px;
		margin-bottom: -10px;
		color: #808080;
		font-size: 13px;
	}

	.noticeBox {
		width: calc(100% - 6px);
		height: auto;
		margin-bottom: 15px;
		margin-left: 3px;
		margin-top: 15px;
		padding: 5px;
		background-color: #FFFFFF;
		border: 1px solid #FFFFFF;
		box-shadow: 0px 0px 0px 3px #DCDCDC;
		color: #000000;
	}

	.noticeBox li {
		margin: 3px;
		margin-left: 20px;
		list-style: square;
	}

/* === HOMEPAGE === */
	.homepageBox div {
		clear: none;
		float: left;
		width: 30%;
		margin-left: 3%;
		margin-top: 20px;
		padding: 15px;
		border: 1px solid #92278f;
		background: linear-gradient(#a12b9d, #92278f);
		color: #ecb8ea;
		text-align: center;
		line-height: 16px;
		cursor: pointer;
	}
	.homepageBox div:first-line {
		color: #FFFFFF;
		font-size: 18px;
		letter-spacing: 1px;
		line-height: 23px;
	}
	.homepageBox div:hover {
		border: 1px solid #f7941e;
		background: linear-gradient(#f8a646, #f7941e);
		color: #fcd6a8;
	}

	.homepageBox div.groupTitle {
		clear: both;
		width: 97%;
		height: 27px;
		margin-bottom: -10px;
		margin-top: 30px;
		padding: 0px;
		border: 0px;
		border-bottom: 1px dotted #92278f;
		background: transparent;
		color: #92278f;
		cursor: default;
	}
	.homepageBox div.groupTitle:first-line {
		color: #92278f;
		font-size: 17px;
	}
				
/* === MANAGE PAGE === */
	#content .managePage {
		width: 100%;
		padding: 0px;
	}
	
	#content .managePage > h1 {
		clear: none;
		float: left;
		width: 80%;
	}
	
	#content .managePage .buttonsBar {
		clear: none;
		float: left;
		width: 20%;
		height: 31px;
	}
	
	#content .managePage .buttonsBar div, section .button {
		clear: none;
		float: right;
		width: 24px;
		height: 24px;
		margin-left: 6px;
		margin-top: 3px;
		background-image: url('../images/managepage_icons.png');
		background-position: 0px 0px;
		background-repeat: no-repeat;
		cursor: pointer;
	}
	#content .managePage .buttonsBar div.rights {
		background-position: 0px -48px;
	}
	section .button {
		margin-top: -5px;
		margin-right: 5px;
	}
	
	#content .managePage .buttonsBar div:hover, section .button:hover {
		position: relative;
		opacity: 0.8;
	}
	.formPageTable span[data-title]:hover {
		position: relative;
		cursor: help;
	}
	
	#content .managePage .buttonsBar div[data-title]:hover:after, section .button[data-title]:hover:after, .educationAppsSurvey i[data-title]:hover:after, .educationApps i[data-title]:hover:after, .formPageTable span[data-title]:hover:after, .weekScheduleDayTable td.time i[data-title]:hover:after {
	  content: attr(data-title);
	  padding: 2px;
	  padding-left: 5px;
	  padding-right: 5px;
	  color: #FFFFFF;
	  position: absolute;
	  left: 25px; 
	  top: 25px;
	  white-space: nowrap; 
	  z-index: 20;
	  box-shadow: 0px 0px 2px #808080;  
	  background: linear-gradient(#758fc1, #5977b5);  
	  font-size: 11px;
	}
	.educationAppsSurvey i[data-title]:hover:after {
		position: relative;
	}
	.educationAppsSurvey i.selected[data-title]:hover:after {
		position: relative;
		top: 0px;
	}
	.formPageTable span[data-title]:hover:after {
		left: 17px;
		top: 17px;
	}

	/* === FILTERS BOX === */
		#content .managePage .filtersBox {
			clear: none;
			float: left;
			width: 200px;
			margin-right: 50px;
		}
		
		#content .managePage .filtersBox h1 {
			width: 200px;
			height: 20px;
			margin: 0px;
			border-bottom: 1px solid #f7931d;
			border-top: 1px solid #f7931d;
			color: #f7931d;
			font-size: 15px;
			font-weight: normal;
			text-align: center;
		}
		
		#content .managePage .filtersBox h2 {
			width: 200px;
			height: 16px;
			margin: 0px;
			background-color: #f7931d;
			color: #FFFFFF;
			font-size: 11px;
			font-weight: normal;
			line-height: 14px;
			text-align: center;
		}
		
		#content .managePage .filtersBox .filter {
			overflow: hidden;
			width: 200px;
			max-height: 128px;
			margin-top: 20px;
			border: 1px solid #f7931d;
		}
		#content .managePage .filtersBox .filter.sortOrder {
			background-color: #fcd6a8;
			max-height: none;
		}
		
		#content .managePage .filtersBox .filter h3 {
			width: 198px;
			height: 17px;
			margin: 0px;
			margin-bottom: 2px;
			padding-left: 3px;
			background-color: #f7931d;
			color: #FFFFFF;
			font-size: 12px;
			font-weight: normal;
		}
		
		#content .managePage .filtersBox .filter hr {
			width: 198px;
			height: 2px;
			margin-bottom: 5px;
			margin-top: 5px;
			background-color: #f7931d;
			color: #f7931d;
		}
		
		#content .managePage .filtersBox .filter input {
			width: 100%;
			height: 20px;
			border: 0px;
			margin: 0px;
		}
		
		#content .managePage .filtersBox .filter input[type=radio], #content .managePage .filtersBox .filter input[type=checkbox] {
			clear: left;
			float: left;
			display: inline;
			width: 13px;
			height: 13px;
			margin: 4px;
		}
		#content .managePage .filtersBox .filter input[type=radio]:last-of-type, #content .managePage .filtersBox .filter input[type=checkbox]:last-of-type {
			margin-bottom: 8px;
		}
		
		#content .managePage .filtersBox .filter label {
			clear: right;
			float: left;
			overflow: hidden;
			display: inline;
			width: 175px;
			height: 13px;
			margin-bottom: 4px;
			margin-top: 4px;
			line-height: 11px;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		#content .managePage .filtersBox .filter br {
			clear: both;
			float: none;
		}
		
		#content .managePage .filtersBox .filter span {
			position: relative;
			display: inline-block;
			width: 100%;
			height: 20px;
			background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
			color: #5977b5;
			font-size: 11px;
			text-align: center;
			cursor: pointer;
		}
		#content .managePage .filtersBox .filter span:hover {
			color: #000000;
		}
		
	/* === RESULTS BOX === */
		#content .managePage .resultsBox {
			overflow: hidden;
			clear: none;
			float: left;
			width: 75%;
		}

		#content .managePage .resultsBox h2 {
			margin: 0px;
			margin-bottom: 5px;
			margin-top: 35px;
			padding: 0px;
			color: #90268f;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 19px;
			font-weight: normal;
		}
		
		#content .managePage .resultsBox table {
			width: 100%;
			border: 0px;
			margin: 0px;
			padding: 0px;
			border: 1px solid #90268f;
			table-layout: fixed;
		}
		
		#content .managePage .resultsBox tr:hover td {
			background-color: #ecb8ec;
		}
		
		#content .managePage .resultsBox tr.header {
			background-color: #90268f;
			color: #FFFFFF;
			cursor: default;
		}
		#content .managePage .resultsBox tr.header td {
			padding-bottom: 2px;
			padding-top: 2px;
		}
		#content .managePage .resultsBox tr.header:hover td {
			background-color: #90268f;
		}
		
		#content .managePage .resultsBox td {
			overflow: hidden;
			padding-bottom: 3px;
			padding-top: 3px;
			padding-right: 5px;
			border-bottom: 1px solid #90268f;
			table-layout: fixed;
			white-space: nowrap;
			text-overflow: ellipsis;
			cursor: pointer;
		}
		#content .managePage .resultsBox td:first-of-type {
			padding-left: 5px;	
		}
		#content .managePage .resultsBox tr:last-of-type td {
			border-bottom: 0px;
		}

		/* === STUDENTS === */
			#content .managePage .resultsBox .studentsManagepage tr.Y td:first-of-type {
				background-image: url('../images/managepage_icons.png');
				background-position: right -26px;
				background-repeat: no-repeat;
			}

		/* === EDKU STATISTICS === */
			#content .managePage .resultsBox.edkuStatistics div {
				display: inline-block;
				width: 46%;
				margin: 2%;
			}

			#content .managePage .resultsBox.edkuStatistics h2 {
				margin: 0px;
				margin-bottom: 3px;
				padding: 0px;
				color: #90268f;
				font-family: Verdana, Geneva, Tahoma, sans-serif;
				font-size: 16px;
				font-weight: normal;
			}

			#content .managePage .resultsBox.edkuStatistics table td.index {
				width: 20px;
			}

			#content .managePage .resultsBox.edkuStatistics table td.name {
				width: calc(80% - 20px);
			}

			#content .managePage .resultsBox.edkuStatistics table td.percentage {
				width: 20%;
				text-align: right;
			}

/* === FORM PAGE === */
	/* === FORM TABLE === */
		.formPageTable {
			width: 80%;
			border: 0px;
			border-spacing: 0px 1px;
			margin-bottom: 65px;
		}
		.formPageTable.fullWidth {
			width: 100%;
		}
		.formPageTable:not(.noMargin):last-of-type {
			margin-bottom: 0px;
		}
		.formPageTable:not(.noMargin):last-of-type:after {
			display: block;
			width: 2px;
			height: 65px;
			content: " ";
		}
		.tabPaneBox section.formPageTable:last-of-type:after {
			height: 0px;
		}
		
		.formPageTable td {
			width: 75%;
			min-height: 16px;
			border: 1px solid #DCDCDC;
			vertical-align: top;
		}
		.formPageTable.fullWidth td {
			width: 80%;
		}
		.formPageTable td:first-of-type:not(.noTitle), .formPageTable td.extraTitle {
			width: 25%;
			padding-left: 5px;
			background-color: #DCDCDC;
			line-height: 20px;
			vertical-align: top;
		}
		.formPageTable.fullWidth td:first-of-type:not(.noTitle), .formPageTable.fullWidth td.extraTitle {
			width: 20%;
		}
		
		.formPageTable tr.title td {
			border: 0px;
			border-left: 1px solid #90268f;
		}
		.formPageTable tr.title td:first-of-type {
			height: 20px;
			border: 1px solid #90268f;
			background-color: #90268f;
			color: #FFFFFF;
			font-size: 14px;
			line-height: 18px;
		}

		.formPageTable tr.subtitles td {
			background-color: #dcdcdc;
			font-size: 11px;
			font-style: italic;
			text-align: center;
		}
	
		.formPageTable .examResultField {
			width: 13.5%;
			padding-right: 3px;
			line-height: 20px;
			text-align: right;
		}
		.formPageTable .examResultField.date {
			width: 21%;
			padding-left: 3px;
			text-align: left;
		}

		.formPageTable tr.validatorError td {
			border-color: #ee1d23;
		}
		.formPageTable tr.validatorError td:first-of-type {
			background-color: #ee1d23;
			color: #FFFFFF;
			vertical-align: top;
		}
		
		.formPageTable tr.validatorError td:first-of-type:before {
			position: absolute;
			z-index: 6;
			display: block;
			width: 16px;
			height: 16px;
			margin-left: -25px;
			margin-top: 2px;
			background-image: url('../images/formpage_validationerror.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
			content: " ";
		}
		
		.formPageTable td.spacer, .formPageTable td.spacer:first-of-type {
			width: 100%;
			height: 20px;
			border: 0px;
			background-color: #FFFFFF;
		}
		
		.formPageTable td input[type=text], .formPageTable td input[type=date], .formPageTable td input[type=number], .formPageTable td input[type=password], .formPageTable td select {
			width: 100%;
			height: 20px;
			border: 0px;
			padding-left: 5px;
			background-color: #FFFFFF;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 12px;
		}
		.formPageTable td input[type=text]:disabled, .formPageTable td input[type=date]:disabled, .formPageTable td input[type=number]:disabled, .formPageTable td input[type=password]:disabled, .formPageTable td select:disabled {
			background-color: #C0C0C0;
		}
		.formPageTable td input.number {
			padding-left: 0px;
			padding-right: 5px;
			text-align: right;
		}
		.formPageTable td input.unverified, .formPageTable td textarea.unverified {
			color: #ed1c24;
		}
		
		.formPageTable td textarea {
			width: 100%;
			height: 62px;
			border: 0px;
			padding-left: 5px;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 12px;
		}
		
		.formPageTable td label {
			display: inline-block;
			width: calc(32% - 22px);
			margin-right: 1%;
			padding-left: 5px;
		}
		.formPageTable td.fullLabel label {
			clear: right;
			display: block;
			width: 100%;
			min-height: 20px;
			padding-left: 25px;
		}
		.formPageTable td.fullLabel input {
			float: left;
		}
		
		.formPageTable td.halfLabel label {
			overflow: hidden;
			width: 45%;
			margin-top: 1px;
			text-overflow: ellipsis;
		}

		.formPageTable td.inlineLabel label {
			width: fit-content;
			margin-top: 1px;
			margin-right: 20px;
		}
		
		.formPageTable td input:disabled, .formPageTable td input[readonly=readonly], .formPageTable td select:disabled, .formPageTable td textarea:disabled {
			color: #505050;
			background-color: #F0F0F0;
		}
		
		.formPageTable .logList {
			padding-left: 10px;
			padding-right: 10px;
			background-color: #F0F0F0;
			color: #303030;
		}
		
		.formPageTable .logList > p, .formPageTable .logList > div {
			margin-bottom: 0px;
			padding-bottom: 12px;
			border-bottom: 1px solid #DCDCDC;
		}
		.formPageTable .logList > p:last-of-type, .formPageTable .logList > div:last-of-type {
			border-bottom: 0px;
		}
		.formPageTable .logList > div {
			clear: none;
			margin-top: 16px;
		}
		
		.formPageTable .logList .editMode, .formPageTable .logList .deleteMode {
			position: relative;	
		}
		
		.formPageTable .logList .editMode:after, .formPageTable .logList .deleteMode:after {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(240, 240, 240, 0.9);
			color: #8DC63F;
			font-weight: bold;
			vertical-align: middle;
			text-align: center;
			text-shadow: 1px 1px 1px #FFFFFF;
			content: "U bent dit item aan het bewerken";
		}
		.formPageTable .logList .deleteMode:after {
			color: #ed1c24;
			content: "Klik op opslaan om dit item te verwijderen";
		}
	
		.formPageTable .hideCheckAll .selectAll, .formPageTable .hideCheckAll .deselectAll {
			display: none !important;
		}	
	
		#content table .logList .deleteIcon, #content table .logList .editIcon {
			margin-left: 3px;
			margin-top: 16px;
		}
		
		#content table .deleteIcon, #content table .editIcon, .weekScheduleDayTable .targetsField p .editIcon, .weekScheduleDayTable .targetsField p .deleteIcon {
			clear: none;
			float: right;
			width: 14px;
			height: 14px;
			margin-right: 3px;
			margin-top: 3px;
			padding-bottom: 0px;
			border-bottom: 0px;
			background-image: url('../images/delete_icon.png');
			background-position: 0px -14px;
			background-repeat: no-repeat;
			cursor: pointer;
		}
		#content table .editIcon, .weekScheduleDayTable .targetsField p .editIcon {
			background-image: url('../images/edit_icon.png');
		}
		.weekScheduleDayTable .targetsField p .editIcon, .weekScheduleDayTable .targetsField p .deleteIcon {
			display: none;
		}
		.weekScheduleDayTable .targetsField p:hover .editIcon, .weekScheduleDayTable .targetsField p:hover .deleteIcon {
			display: inline-block;
		}
		#content table .deleteIcon:hover, #content table .editIcon:hover, .weekScheduleDayTable .targetsField p .deleteIcon:hover, .weekScheduleDayTable .targetsField p .editIcon:hover {
			background-position: 0px 0px;
		}
		
		.formPageTable tr.collapsibleClosed td:first-of-type, .formPageTable tr.collapsibleOpen td:first-of-type {
			cursor: pointer;
		}
		.formPageTable tr.collapsibleClosed td:first-of-type:before, .formPageTable tr.collapsibleOpen td:first-of-type:before {
			position: absolute;
			margin-left: -23px;
			display: block;
			width: 11px;
			height: 11px;
			background-image: url('../images/datacontainer_toggleicons.png');
			background-position: 0px -22px;
			background-repeat: no-repeat;
			content: " ";
			transition: transform 0.15s;
		}
		.formPageTable tr.collapsibleEmpty td:first-of-type:before {
			background-position: 0px -11px;
		}
		.formPageTable tr.collapsibleOpen td:first-of-type:before {
			transform: rotate(90deg);
		}

		.formPageTable .clipboardImage, .formPageTable .clipboardImageField {
			overflow: hidden;
			width: 100%;
			height: 400px;
			margin-bottom: 15px;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
		}
		.formPageTable .clipboardImage {
			cursor: pointer;
		}
		.formPageTable .clipboardImage:hover {
			filter: brightness(105%);
		}

		.formPageTable .clipboardImageField {
			overflow: hidden;
			width: 100%;
			height: 100px;
			color: #808080;
			font-size: 10px;
			font-style: italic;
			text-align: center;
			vertical-align: middle;
		}
		.formPageTable .clipboardImageField::first-line {
			font-weight: bold;
			font-size: 11px;
		}

		.formPageTable .clipboardImage i {
			display: none;
			float: right;
			width: 14px;
			height: 14px;
			margin-right: 7px;
			margin-top: 7px;
			background-image: url('../images/delete_icon.png');
			background-position: 0px -14px;
			background-repeat: no-repeat;
			outline: 7px solid rgba(255, 255, 255, 0.5);
			cursor: pointer;
		}
		.formPageTable .clipboardImage:hover i {
			display: block;
		}
		.formPageTable .clipboardImage i:hover {
			background-position: 0px 0px;
		}
		
		.tinyMceField {
			position: inherit !important;
			width: 100%;
			min-height: 80px;
			padding-left: 5px;
			border: 1px solid #DCDCDC;
			background-color: #FFFFFF;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 12px;
		}
		.tinyMceField p {
			margin-bottom: 10px;
			margin-top: 0px;
		}

		.formPageTable td.studentPhoto {
			width: 150px;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		.formPageTable .oppTargetErgo td:first-of-type::before {
			position: absolute;
			display: block;
			width: 40px;
			height: 15px;
			margin-left: -28px;
			margin-top: 20px;
			color: #303030;
			font-size: 10px;
			font-weight: bold;
			text-align: center;
			line-height: 12px;
			transform: rotate(-90deg);
			content: "ERGO";
		}

	/* === HELP BOX === */
		@keyframes helpBoxFade {
			from { opacity: 0; }
			to { opacity: 1; }
		}

		.targetGroupModelTable td:hover > .helpBox, .explanationIcon:hover > .helpBox {
			display: block;
			animation-name: helpBoxFade;
  			animation-duration: 0.5s;
		}

		.formPageTable .helpBox, .targetGroupModelTable .helpBox, .explanationIcon .helpBox {
			z-index: 6;
			display: none;
			position: absolute;
			width: 250px;
			height: auto;
			border: 1px solid #f7941e;
			background-color: #fcdfbc;
			font-size: 11px;
		}
		.targetGroupModelTable .helpBox {
			left: calc(100% + 14px);
			top: 0px;
			z-index: 2;
		}
		
		.formPageTable .helpBox::before, .targetGroupModelTable .helpBox::before {
			position: absolute;
			z-index: 6;
			display: block;
			width: 12px;
			height: 12px;
			margin-left: -12px;
			margin-top: -1px;
			background-image: url('../images/formpage_helpboxarrow.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
			content: " ";
		}
		
		.formPageTable .helpBox h6, .targetGroupModelTable .helpBox h6 {
			width: 100%;
			height: 12px;
			margin: 0px;
			background-color: #f7941e;
			color: #FFFFFF;
			font-size: 10px;
			line-height: 10px;
		}
		
		.formPageTable .helpBox p, .targetGroupModelTable .helpBox p {
			margin: 4px;
		}

		.explanationIcon {
			position: relative;
			display: block;
			float: right;
			width: 16px;
			height: 16px;
			background-image: url('../images/formpagebuttonsbar_icons.png');
			background-repeat: no-repeat;
			background-position: 0px -268px;
			cursor: help;
		}
		
	/* === BUTTONS BAR === */
		.formPageButtonsBar {
			position: fixed;
			z-index: 6;
			bottom: 20px;
			width: 100%;
			max-width: 1000px;
			height: 24px;
			border: 1px solid #808080;
			outline: 20px solid rgba(255, 255, 255, 0.8);
			border-radius: 3px;
			background: linear-gradient(#E6E6E6, #DCDCDC);
		}
		
		.formPageButtonsBar div {
			clear: none;
			float: left;
			width: auto;
			height: 22px;
			padding-left: 30px;
			padding-right: 10px;
			background-image: url('../images/formpagebuttonsbar_icons.png'), url('../images/formpagebuttonsbar_divider.png');
			background-position: 8px 22px, right 3px;
			background-repeat: no-repeat, no-repeat;
			line-height: 21px;
			cursor: pointer;
		}
		.formPageButtonsBar div:hover {
			background-color: #F0F0F0;
		}
		.formPageButtonsBar div.disabled {
			opacity: 0.4;
			cursor: default;	
		}
		.formPageButtonsBar div.disabled:hover {
			background-color: transparent;
		}
		
		.formPageButtonsBar div.back {
			background-position: 8px 0px, right 3px;
		}
		.formPageButtonsBar div.next {
			float: right;
			padding-left: 10px;
			padding-right: 30px;
			background-position: 108px -22px, left 3px;
		}
		.formPageButtonsBar div.save {
			background-position: 8px -44px, right 3px;
		}
		.formPageButtonsBar div.cancel {
			background-position: 8px -66px, right 3px;
		}
		.formPageButtonsBar div.delete {
			background-position: 8px -88px, right 3px;
		}
		.formPageButtonsBar div.print {
			background-position: 8px -110px, right 3px;
		}
		.formPageButtonsBar div.archive {
			background-position: 8px -132px, right 3px;
		}
		.formPageButtonsBar div.reactivate {
			background-position: 8px -154px, right 3px;
		}
		.formPageButtonsBar div.sign {
			background-position: 8px -176px, right 3px;
		}
		.formPageButtonsBar div.word {
			background-position: 8px -198px, right 3px;
		}
		.formPageButtonsBar div.lock {
			background-position: 8px -242px, right 3px;
		}

		/* === FORMPAGEBUTTON === */
			.formPageButton {
				display: inline-block;
				width: auto;
				height: 22px;
				margin: 7px;
				padding-left: 30px;
				padding-right: 10px;
				border: 1px solid #808080;
				border-radius: 3px;
				background: url('../images/formpagebuttonsbar_icons.png'), linear-gradient(#E6E6E6, #DCDCDC);
				background-position: 8px 22px, 0px 0px;
				background-repeat: no-repeat, repeat;
				line-height: 20px;
				cursor: pointer;
			}
			.formPageButton:hover {
				filter: brightness(105%);
			}
			.formPageButton:active {
				margin-top: 8px;
			}

			.formPageButton.print {
				background-position: 8px -110px, 0px 0px;
			}

	/* === FORM SELECTOR === */
		.formSelector {
			width: 100%;
			height: auto;
			margin-bottom: 65px;
		}
		
		.formSelector input, .formSelector label {
			margin-bottom: 10px;
		}

	/* === SELECTOR === */
		#selectorFrame {
			display: none;
			width: 780px;
			height: auto;
			padding: 20px;
			padding-right: 0px;
			background-color: #FFFFFF;
		}

	/* === WINDOW CONFIRM MESSAGE === */
		.confirmationOverlay::before {
			position: fixed;
			z-index: 20;
			left: 0px;
			right: 0px;
			top: 0px;
			bottom: 0px;
			background-color: transparent;
			background-image: url('../images/overlay_background.png');
			background-position: 0px 0px;
			background-repeat: repeat;
			content: " ";
		}

		.windowConfirmMessage {
			position: fixed;
			left: 50% !important;
			top: 50% !important;
			margin: 0px !important;
			z-index: 21;
			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);
			transform: translateX(-50%) translateY(-50%);
		}
		
		.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);
		}

	/* === CONFIRMFRAME === */
		#confirmFrame {
			display: none;
			width: 80%;
			max-width: 500px;
			height: auto;
			margin: auto;
			padding: 20px;
			padding-right: 0px;
			background-color: #FFFFFF;
		}
		
		#confirmFrame label {
			display: inline-block;
			width: 43%;
			margin-right: 1%;
			padding-left: 5px;
		}
		
		#confirmFrame p {
			margin: 0px;
			text-align: center;
		}
		
		#confirmFrame div.button {
			clear: none;
			float: left;
			width: 45%;
			margin-top: 20px;
			padding: 6px;
			padding-bottom: 10px;
			padding-top: 10px;
			background-color: #0072bc;
			color: #FFFFFF;
			font-size: 14px;
			font-weight: bold;
			text-align: center;
			cursor: pointer;
		}
		#confirmFrame div.button:first-of-type {
			margin-right: 5%;
		}
		#confirmFrame div.button:hover {
			background-color: #00aeef;
		}
		
		#confirmFrame div.close {
			clear: both;
			float: none;
			width: 95%;
			height: 20px;
			margin-top: 20px;
			padding: 3px;
			background-color: #666666;
			color: #FFFFFF;
			font-size: 12px;
			font-weight: bold;
			text-align: center;
			cursor: pointer;
		}
		#confirmFrame div.close:hover {
			background-color: #92278f;
		}
	
	/* === LOGIN FRAME === */
		#loginFrame {
			display: none;
			width: 445px;
			height: 165px;
			background-color: #FFFFFF;
		}
		
		#loginFrame .systemLoginBox {
			margin: 0px;
		}
		
	/* === TAB PANE BOX === */
		.tabPaneBox {
			width: 100%;
			height: auto;
		}
		.tabPaneBox::after {
			display: block;
			width: 2px;
			height: 65px;
			content: " ";
		}
		
		.tabPaneBox .tabs {
			width: 100%;
			height: 19px;
		}
		.tabPaneBox .tabs.sticky {
			position: sticky;
			z-index: 8;
			top: 0px;
			height: 29px;
			padding-top: 10px;
			background-color: #FFFFFF;
		}
		
		.tabPaneBox .tabs span {
			display: inline-block;
			width: auto;
			height: 20px;
			border: 1px solid #dcdcdc;
			border-bottom: 0px;
			margin-right: 2px;
			padding-left: 8px;
			padding-right: 8px;
			background: linear-gradient(to top, #c8c8c8 0%, #ffffff 100%);
			line-height: 17px;
			color: #676767;
			cursor: pointer;
		}
		.tabPaneBox .tabs span:hover {
			background: linear-gradient(to top, #aaaaaa 0%, #ffffff 100%);	
		}
		.tabPaneBox .tabs span.active {
			background: #f5f5f5;
			color: #ed028c;
		}
		
		.tabPaneBox section {
			display: none;
			width: 100%;
			padding: 10px;
			padding-bottom: 20px;
			padding-top: 20px;
			border: 1px solid #dcdcdc;
			background-color: #f5f5f5;
		}
		.tabPaneBox section.active {
			display: block;	
		}
		
		#content .tabPaneBox section .formPageTable {
			margin-bottom: 0px;
			margin-left: 12px;
		}
		
/* === LEERLING DOSSIER === */
	/* === NAVIGATIE PIJLEN === */
		.quickNavButtons {
			float: right;
			width: 200px;
			height: 32px;
			margin-top: -65px;
		}

		.quickNavButtons i {
			display: inline-block;
			width: 32px;
			height: 32px;
			background-image: url('../images/quicknav_icons.png');
			background-repeat: no-repeat;
			cursor: pointer;
		}
		.quickNavButtons i:active {
			margin-top: 1px;
		}
		.quickNavButtons i.previous {
			background-position: 0px 0px;
		}
		.quickNavButtons i.next {
			background-position: 0px -32px;
		}
		.quickNavButtons i.disabled {
			opacity: 0.3;
			cursor: default;
		}
		.quickNavButtons i.digit {
			margin-right: 10px;
			border: 1px solid #808080;
			border-radius: 3px;
			background-image: none;
			background: linear-gradient(#E6E6E6, #DCDCDC);
			font-size: 16px;
			font-style: normal;
			text-align: center;
			line-height: 28px;
		}
		.quickNavButtons i.digit.active {
			border: 1px solid #0077a0;
			background: #00aeef;
			color: #FFFFFF;
		}

		.quickNavButtons select {
			width: 120px;
			margin-left: 3px;
			margin-right: 3px;
			margin-top: 5px;
			border: 1px solid #DCDCDC;
			vertical-align: top;
		}

	/* === PERSONALIA TABEL === */
		.personalDataTable {
			width: 100%;
		}

		.personalDataTable tr td {
			width: 60%;
		}
		.personalDataTable tr td:first-of-type {
			width: 20%;
		}

		.personalDataTable td.photo {
			width: 150px;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			vertical-align: middle;
		}

		.personalDataTable td.photo .addButton {
			display: none;
			width: 80%;
			margin-left: 10%;
			border: 1px solid #DCDCDC;
		}
		.personalDataTable td.photo.empty .addButton, .personalDataTable td.photo:hover .addButton {
			display: block;
		}

		.personalDataTable td.photoFill {
			width: calc(20% - 150px);
			border: 0px;
		}

		.personalDataTable tr.classLabels td:not(:first-of-type) {
			width: 12%;
			background-color: #dcdcdc;
			text-align: center;
		}

		.personalDataTable tr.classFields td {
			width: 12%;
			text-align: center;
		}
		.personalDataTable tr.classFields td:first-of-type {
			width: 20%;
			background-color: #FFFFFF;
		}

	/* === MEDICATIE TIJDSCHEMA === */
		.formPageTable .timetableTable {
			width: 100%;
			border: 0px;
		}

		.formPageTable .timetableTable .time {
			padding-left: 0px;
			width: 15%;
		}

		.formPageTable .timetableTable .description {
			width: 85%;
		}

	/* === DATA CONTAINER === */
		.toggleDataContainer {
			overflow-x: hidden;
			width: 98%;
			margin-left: 1%;
			margin-right: 1%;
			padding: 10px;
			border: 1px solid #00aeef;
		}
		.toggleDataContainer.closed {
			overflow: hidden;
			height: 16px;
			padding-bottom: 0px;
			border: 1px solid #787878;
		}
		
		.toggleDataContainer h6 {
			display: table;
			width: 110%;
			height: 16px;
			margin: 0px;
			margin-bottom: 10px;
			margin-left: -10px;
			margin-top: -10px;
			padding-left: 5px;
			background-color: #00aeef;
			color: #FFFFFF;
			font-size: 11px;
			font-weight: normal;
			line-height: 14px;
			cursor: pointer;
		}
		.toggleDataContainer h6:before {
			position: absolute;
			z-index: 6;
			display: block;
			width: 11px;
			height: 11px;
			margin-left: -22px;
			background-image: url('../images/datacontainer_toggleicons.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
			content: " ";
		}
		.toggleDataContainer.closed h6 {
			background-color: #787878;
		}
		.toggleDataContainer.closed h6:before {
			margin-top: 2px;
			background-position: 0px -11px;	
		}
		
	/* === TOETS TABELLEN === */
		.dossierExamsTable, .dossierFormsTable, .dossierAttachmentsTable {
			width: 100%;
			border: 0px;
			border-spacing: 0px 1px;
		}
		
		.dossierExamsTable tr.title td, .dossierFormsTable tr.title td, .dossierAttachmentsTable tr.title td {
			border: 0px;
			border-bottom: 1px solid #00aeef;
			background-color: #F5F5F5;
			color: #808080;
			font-size: 11px;
			line-height: 16px;
		}
		.dossierFormsTable tr.title td.form:hover, .dossierAttachmentsTable tr.title td.name:hover, .dossierAttachmentsTable tr.title td.incidentDate:hover {
			background-color: #F5F5F5;
			cursor: default;
		}
		
		.dossierExamsTable td, .dossierFormsTable td, .dossierAttachmentsTable td {
			padding: 1px;
			border: 1px solid #dcdcdc;
			background-color: #FFFFFF;
			line-height: 20px;
			vertical-align: top;
		}
		
		.dossierExamsTable td.exam {
			width: 25%;
			padding-left: 5px;
			background-color: #DCDCDC;
		}
		
		.dossierExamsTable td.score {
			width: 8.33%;
			padding-right: 3px;
			text-align: right;
		}
		
		.dossierExamsTable td.date, .dossierExamsTable td.text {
			width: 12.5%;
			padding-left: 3px;	
		}

		.dossierFormsTable td.text {
			width: 22.5%;
			padding-left: 3px;
		}

		.dossierFormsTable td.form {
			width: 55%;
			padding-left: 3px;
			background-color: #DCDCDC;
		}
		.dossierFormsTable td.form:hover {
			background-color: #ffde00;
			cursor: pointer;
		}
		
		.dossierAttachmentsTable td.name, .dossierAttachmentsTable td.incidentDate {
			width: 42%;
			padding-left: 3px;
			background-color: #DCDCDC;
		}
		.dossierAttachmentsTable td.incidentDate {
			width: 20%;
		}
		.dossierAttachmentsTable td.name:hover, .dossierAttachmentsTable td.incidentDate:hover {
			background-color: #ffde00;
			cursor: pointer;
		}
		.dossierAttachmentsTable td.incidentClass {
			width: 29%;
			padding-left: 3px;
		}
		.dossierAttachmentsTable td.version {
			width: 7%;
			padding-right: 3px;
			text-align: right;
		}
		.dossierAttachmentsTable td.date {
			width: 17%;
			padding-right: 3px;
			text-align: right;
		}
		.dossierAttachmentsTable td.author {
			width: 19%;
			padding-left: 3px;
		}
		.dossierAttachmentsTable td.buttons {
			width: 15%;
			text-align: right;
		}
		
		.dossierAttachmentsTable td.buttons span {
			position: relative;
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-left: 4px;
			margin-right: 4px;
			margin-top: 2px;
			background-image: url('../images/attachments_icons.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
			cursor: pointer;
		}
		.dossierAttachmentsTable td.buttons span:hover {
			opacity: 0.7;
		}
		.dossierAttachmentsTable td.buttons span.history {
			background-position: 0px -16px;
		}
		.dossierAttachmentsTable td.buttons span.move {
			background-position: 0px -32px;
		}
		.dossierAttachmentsTable td.buttons span.delete {
			background-position: 0px -48px;
		}
		.dossierAttachmentsTable td.buttons span.rename {
			background-position: 0px -64px;
		}
		.dossierAttachmentsTable td.buttons span.ojaVisible {
			background-position: 0px -128px;
		}
		.dossierAttachmentsTable td.buttons span.ojaInvisible {
			background-position: 0px -144px;
		}

		.dossierAttachmentsTable td.buttons span[data-title]:hover:after {
			content: attr(data-title);
			z-index: 20;
			position: absolute;
			right: 25px;
			top: 5px;
			padding: 2px;
			padding-left: 5px;
			padding-right: 5px;
			box-shadow: 0px 0px 2px #808080;  
			background: linear-gradient(#758fc1, #5977b5); 
			color: #FFFFFF;
			font-size: 11px;
			white-space: nowrap;
		}

/* === RAPPORTAGES OVERZICHT === */
	.reportsListBox {
		width: 100%;
		height: auto;
	}
	
	.reportsListBox div {
		overflow: hidden;
		clear: none;
		float: left;
		width: 21%;
		margin-left: 2%;
		margin-right: 2%;
		margin-bottom: 40px;
		padding: 10px;
		padding-top: 70px;
		border: 1px solid #f7941e;
		background-image: url('../images/reports_icons.png');
		background-position: center 10px;
		background-repeat: no-repeat;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
	}
	.reportsListBox div:hover {
		background-color: #ffde00;
	}

	.reportsListBox h2 {
		clear: both;
		width: 97%;
		height: 27px;
		margin-left: 2%;
		margin-top: 30px;
		padding: 0px;
		border: 0px;
		border-bottom: 1px dotted #f7941e;
		background: transparent;
		color: #f7941e;
		font-weight: normal;
		letter-spacing: 1px;
		line-height: 23px;
		text-align: center;
	}
	
/* === ABSENTIES === */
	.absenceSignals {
		width: 75%;
		margin: 0px;
		margin-bottom: 20px;
		padding: 10px;
		border: 2px solid #f7941e;
		background-color: #fde7cd;
	}
	
	.absenceSignals > li {
		margin-left: 15px;
		margin-bottom: 5px;
		padding-left: 5px;
	}

	.formPageTable td.absencePagingButtons {
		height: 40px;
		border: none;
	}

	.absencePagingButtons div {
		clear: none;
		float: left;
		width: 33%;
		height: 26px;
		margin: 5px;
		padding-right: 36px;
		background-image: url('../images/quicknav_icons.png');
		background-position: right -28px;
		background-repeat: no-repeat;
		background-size: 28px auto;
		color: #505050;
		font-size: 11px;
		line-height: 14px;
		text-align: right;
		cursor: pointer;
	}
	.absencePagingButtons div:active {
		margin-top: 6px;
	}
	.absencePagingButtons div:first-of-type {
		margin-right: calc(33% - 20px);
		padding-left: 36px;
		padding-right: 0px;
		background-position: left 0px;
		text-align: left;
	}
	.absencePagingButtons div::first-line {
		color: #000000;
		font-weight: bold;
		font-size: 12px;
	}
	
/* === ATTACHMENTSFRAME === */
	#attachmentsFrame {
		overflow: auto;
		display: none;
		width: 80%;
		max-width: 800px;
		height: auto;
		margin: auto;
		padding: 20px;
		background-color: #FFFFFF;
	}
	
	#attachmentsFrame h1, #attachmentsFrame h2 {
		clear: none;
		float: left;
		width: 80%;
		margin: 0px;
		margin-bottom: 35px;
		padding: 0px;
		color: #98bf0e;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 24px;
		font-weight: normal;
	}
	#attachmentsFrame h2 {
		width: 100%;
		margin-bottom: 5px;
		margin-top: 25px;
		font-size: 18px;
	}

	#attachmentsFrame .closeButton {
		width: 100%;
		height: 20px;
		margin-bottom: -10px;
		margin-top: 20px;
		background-color: #5977b5;
		color: #FFFFFF;
		text-align: center;
		line-height: 20px;
		cursor: pointer;
	}
	#attachmentsFrame .closeButton:hover {
		background-color: #0061c8;
	}
	
	#attachmentsFrame .formPageButtonsBar {
		position: relative;
		bottom: auto;
		margin-top: -30px;
	}
	
	#attachmentsFrame label {
		margin-bottom: 5px;
		padding-left: 5px;
		line-height: 20px;
	}
	
	/* === UPLOAD PROGRESS === */
		#attachmentsFrame .uploadProgress {
			position: absolute;
			display: none;
			width: 100%;
			background-color: #FFFFFF;
		}
		
		#attachmentsFrame .uploadProgress p {
			font-weight: bold;
			text-align: center;
		}
		#attachmentsFrame .uploadProgress p:first-of-type {
			font-weight: normal;
		}
	
		#attachmentsFrame .uploadProgress div {
			width: 100%;
			height: 24px;
			border: 1px solid #808080;
			border-radius: 3px;
			background: linear-gradient(#dcdcdc, #c8c8c8);
		}
		
		#attachmentsFrame .uploadProgress div span {
			display: block;
			width: 100%;
			height: 22px;
			margin-top: -22px;
			color: #FFFFFF;
			text-align: center;
			text-shadow: 1px 1px 0px #808080;
			line-height: 22px;
		}
		
		#attachmentsFrame .uploadProgress div b {
			display: block;
			width: 50%;
			height: 22px;
			background: linear-gradient(#98bf0e, #8ead0d);
		}

/* === INLINE BUTTON === */
	.inlineButton {
		display: inline-block;
		width: auto;
		height: 24px;
		margin: 20px;
		padding-left: 30px;
		padding-right: 10px;
		border: 1px solid #808080;
		border-radius: 3px;
		background: url('../images/formpagebuttonsbar_icons.png'), linear-gradient(#f4d8f4, #e498e2);
		background-position: 8px 0px;
		background-repeat: no-repeat, repeat;
		line-height: 21px;
		cursor: pointer;
	}
	.inlineButton:hover {
		background: url('../images/formpagebuttonsbar_icons.png'), linear-gradient(#ecb8ea, #dc78d9);
		background-repeat: no-repeat, repeat;
	}
	
	.inlineButton.export {
		background-position: 8px -154px;	
	}

	.inlineButtonSmall {
		display: inline-block;
		width: auto;
		height: 20px;
		margin: 3px;
		padding-left: 7px;
		border: 1px solid #A0A0A0;
		border-radius: 3px;
		background: linear-gradient(#e6e6e6, #bebebe);
		background-position: 0px 0px;
		background-repeat: repeat;
		line-height: 16px;
		cursor: pointer;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.inlineButtonSmall:hover {
		background: linear-gradient(#d2d2d2, #aaaaaa);
	}

	.inlineEditButton {
		width: 16px;
		height: 16px;
		margin-left: 4px;
		margin-right: 4px;
		margin-top: 2px;
		background-image: url('../images/attachments_icons.png');
		background-position: 0px -64px;
		background-repeat: no-repeat;
		cursor: pointer;
	}
	.inlineEditButton:hover {
		opacity: 0.7;
	}
	
	.oppGraphIcon {
		display: inline-block;
		opacity: 0.8;
		width: 16px;
		height: 16px;
		margin: 3px;
		background-image: url('../images/formpagebuttonsbar_icons.png');
		background-position: 0px -223px;
		background-repeat: no-repeat;
		cursor: pointer;
	}
	.oppGraphIcon:hover {
		opacity: 1;
	}

/* === APPS IN OPP === */
	.addButton {
		width: 100%;
		height: 20px;
		padding-left: 0px;
		border-top: 1px solid #DCDCDC;
		background-color: #F0F0F0;
		text-align: center;
		cursor: pointer;
	}
	.weekScheduleDayTable td.addButton, .timetableTable td.addButton {
		border-top: 0px;
		background-color: #F5F5F5;
	}
	.weekScheduleDayTable .targetsField .addButton {
		background-color: #FFFFFF;
	}
	.addButton:hover, .weekScheduleDayTable .targetsField .addButton:hover, .weekScheduleDayTable td.addButton:hover, .timetableTable td.addButton:hover {
		background-color: #DCDCDC;
	}
	
	.addButton i {
		display: inline-block;
		width: auto;
		height: 16px;
		margin: 2px;
		padding-left: 18px;
		background-image: url('../images/managepage_icons.png');
		background-position: 0px 0px;
		background-repeat: no-repeat;
		background-size: 14px auto;
		font-size: 11px;
		font-style: normal;
		line-height: 13px;
	}
	
	/* === OVERZICHT TABEL === */
		.educationAppsSurvey {
			clear: none;
			float: left;
			width: 47%;
			margin: 1.5%;
			border: 1px solid #DCDCDC;
		}
		
		#attachmentsFrame .educationAppsSurvey h2 {
			width: 100%;
			height: 21px;
			margin-top: 0px;
			padding-left: 5px;
			background-color: #DCDCDC;
			color: #000000;
			font-size: 13px;
		}
		
		.educationAppsSurvey i, .educationApps i {
			display: block;
			clear: none;
			float: left;
			width: 36px;
			height: 36px;
			margin: 5px;
			border-radius: 8px;
			background-repeat: no-repeat;
			background-position: 0px 0px;
			background-size: contain;
			cursor: pointer;
		}
		
		.formPageTable td.educationApps {
			background-color: #F0F0F0;
		}
		
		.formPageTable td.educationApps i {
			width: 30px;
			height: 30px;
		}
		
		.formPageTable td.educationApps input {
			width: 64px;
			margin-top: 11px;
			border: 1px solid #C0C0C0;
		}
		
		.educationAppsSurvey i.selected {
			border: 2px solid #00C000;
			box-shadow: 0px 0px 5px rgba(0, 128, 0, 0.8);
		}
		
		.educationAppsSurvey i.selected:before {
			display: block;
			width: 32px;
			height: 32px;
			border-radius: 6px;
			background-color: rgba(0, 0, 0, 0.2);
			background-image: url('../images/statusmessages_icons.png');
			background-position: center 3px;
			background-repeat: no-repeat;
			opacity: 0.95;
			content: " ";
		}

/* === SIGNAALVERZUIM ALERT === */
	#attachmentsFrame .signalAbsenceBox h1 {
		width: 100%;
		color: #ed1c24;
		margin-bottom: 5px;
	}
	
	#attachmentsFrame .signalAbsenceBox h2 {
		border-bottom: 1px dotted #f7941e;
		color: #f7941e;
	}
	
	.signalAbsenceBox p {
		color: #505050;
		font-style: italic;
		letter-spacing: 0.3pt;
	}
	
	.signalAbsenceBox ul {
		padding-left: 20px;
	}
	
	.signalAbsenceBox input {
		width: 100%;
		height: 22px;
		margin-top: 30px;
		border: 1px solid #808080;
		background-color: #DCDCDC;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
	}
	
	.signalAbsenceBox li {
		list-style: square;
	}

/* === WEEKROOSTER === */
	/* === DAGROOSTER === */
		.weekScheduleDayTable {
			width: 100%;
			border: 0px;
		}

		.weekScheduleDayTable td {
			border-bottom: 1px solid #808080;
			line-height: 20px;
			vertical-align: top;			
		}
		.weekScheduleDayTable tr.firstFieldsRow td, .weekScheduleDayTable tr.secondFieldsRow td {
			border-bottom: 1px solid #DCDCDC;
		}

		.weekScheduleDayTable .header td {
			padding-left: 5px;
			background-color: #f5f5f5;
			font-size: 11px;
			font-style: italic;
			text-align: center;
		}

		.weekScheduleDayTable .time {
			width: 10%;
		}

		.weekScheduleDayTable .course {
			width: 20%;
		}

		.weekScheduleDayTable .planning {
			width: 30%;
		}

		.weekScheduleDayTable .notes {
			width: 30%;
		}
		.weekScheduleDayTable .notes > p {
			margin: 0px;
			padding: 0px;
			border-left: 1px solid #DCDCDC;
			background-color: #FFFFFF;
			font-size: 11px;
			line-height: 15px;
			text-align: center;
		}
		.weekScheduleDayTable .notes .tinyMceField {
			height: auto;
			min-height: 65px;
			overflow: auto;
		}
		.weekScheduleDayTable tr.firstFieldsRow td.notes {
			border-bottom: 1px solid #808080;
		}

		.weekScheduleDayTable input, .weekScheduleDayTable select, .weekScheduleDayTable textarea {
			width: 100%;
			border: 0px;
			border-bottom: 1px solid #DCDCDC;
			border-left: 1px solid #DCDCDC;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 12px;
		}
		.weekScheduleDayTable textarea {
			height: 80px;
		}
		.weekScheduleDayTable .tinyMceField {
			width: 293px;
			height: auto;
			min-height: 80px;
		}

		.weekScheduleDayTable .medicationField, .weekScheduleDayTable .targetsField {
			height: auto;
			min-height: 65px;
			padding-left: 5px;
			border: 1px solid #DCDCDC;
			background-color: #FFFFFF;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 12px;
		}
		.weekScheduleDayTable .targetsField {
			padding-left: 0px;
		}
		.weekScheduleDayTable .targetsField p {
			margin: 0px;
			margin-bottom: 7px;
			margin-left: 5px;
			padding: 0px;
		}

		.weekScheduleDayTable td.time i.blockAdd, .weekScheduleDayTable td.time i.blockDelete, .weekScheduleDayTable td.time i.blockFold, .weekScheduleDayTable td.time i.blockUnfold {
			position: relative;
			display: none;
			width: 16px;
			height: 16px;
			margin: 5px;
			background-image: url('../images/attachments_icons.png');
			background-position: 0px -80px;
			background-repeat: no-repeat;
			cursor: pointer;
		}
		.weekScheduleDayTable td.time i.blockDelete {
			background-position: 0px -48px;
		}
		.weekScheduleDayTable td.time i.blockFold {
			background-position: 0px -96px;
		}
		.weekScheduleDayTable tr.folded td.time i.blockFold {
			display: none;
		}
		.weekScheduleDayTable td.time i.blockUnfold {
			background-position: 0px -112px;
		}
		.weekScheduleDayTable tr:not(.folded) td.time i.blockUnfold {
			display: none;
		}
		.weekScheduleDayTable td.time i:hover {
			opacity: 0.7;
		}
		.weekScheduleDayTable td.time:hover i {
			display: inline-block;
		}

/* === ADRESSENLIJST === */
	.addressListBox {
		width: 100%;
	}

	.addressListBox div {
		clear: none;
		float: left;
		width: 30%;
		margin-bottom: 3%;
		margin-right: 3%;
		border: 1px solid #00aeef;
		padding: 10px;
		color: #303030;
		line-height: 20px;
	}

	.addressListBox div h3 {
		width: calc(100% + 20px);
		margin-bottom: 5px;
		margin-left: -10px;
		margin-right: 0px;
		margin-top: -10px;
		padding-bottom: 4px;
		padding-left: 10px;
		padding-top: 2px;
		background-color: #00aeef;
		color: #FFFFFF;
		font-size: 15px;
		font-weight: normal;
	}

	.addressListBox div h3 .editIcon {
		clear: none;
		float: right;
		width: 14px;
		height: 14px;
		margin-right: 3px;
		margin-top: 3px;
		background-image: url('../images/edit_icon.png');
		background-position: 0px -14px;
		background-repeat: no-repeat;
		cursor: pointer;
	}
	.addressListBox div h3 .editIcon:hover {
		background-position: 0px 0px;
	}

/* === LVS MOTORIEK TABEL === */
	.motoricsTable .tableCell {
		fill: #FFFFFF;
		stroke-width: 1;
		stroke:#DCDCDC;
	}

	.motoricsTable .tableRowLabel {
		fill:#DCDCDC;
		stroke: #FFFFFF;
	}

	.motoricsTable .optionCircle, .motoricsTable .resultCircle {
		fill: #FFFFFF;
		stroke: #000000;
	}
	.motoricsTable.inputMode .optionCircle {
		cursor: pointer;
	}

	.motoricsTable.inputMode .resultCircle, .motoricsTable.inputMode .resultLine {
		display: none;
	}

	#motoricsTooltip {
		display: none;
		position: fixed;
		z-index: 20;
		left: 25px;
		top: 25px;
		padding: 2px;
		padding-left: 5px;
		padding-right: 5px;
		background: linear-gradient(#758fc1, #5977b5);  
		color: #FFFFFF;
		font-size: 11px;
		white-space: nowrap;
		box-shadow: 0px 0px 2px #808080;
	}

/* === VERANTWOORDING TOETSGEGEVENS === */
	/* === TOETSRESULTATEN TABEL === */
		.schoolExamAnalyses .resultsTable {
			width: 100%;
			max-width: 600px;
			margin-bottom: 30px;
			border: 1px solid #808080;
		}

		.schoolExamAnalyses .resultsTable td {
			padding: 3px;
			border: 1px solid #DCDCDC;
			line-height: 18px;
			vertical-align: top;
		}

		.schoolExamAnalyses .resultsTable .title td {
			background-color: #DCDCDC;
			text-align: center;
		}
		.schoolExamAnalyses .resultsTable .title:first-of-type td {
			font-weight: bold;
		}

		.schoolExamAnalyses .resultsTable .course {
			width: 25%;
		}
		.schoolExamAnalyses .resultsTable .results {
			width: 12.5%;
			text-align: center;
		}
		.schoolExamAnalyses .resultsTable .endGoal {
			background-color: #00aeef;
		}
		.schoolExamAnalyses .resultsTable .accomplished {
			background-color: #8dc63f;
		}
		.schoolExamAnalyses .resultsTable .notAccomplished {
			background-color: #f7941e;
		}
		.schoolExamAnalyses .resultsTable .decrease {
			background-color: #ed1c24;
		}

	/* === ANALYSE TABEL === */
		.schoolExamAnalyses .analysisTable {
			width: 60%;
			margin-bottom: 60px;
			border: 1px solid #808080;
		}

		.schoolExamAnalyses .analysisTable td:first-of-type {
			padding: 3px;
		}

		.schoolExamAnalyses .analysisTable .columnTitles td {
			padding: 3px;
			background-color: #DCDCDC;
			text-align: center;
		}

		.schoolExamAnalyses .analysisTable .course {
			width: 15%;
		}
		.schoolExamAnalyses .analysisTable .analysis, .schoolExamAnalyses .analysisTable .actions {
			width: 42.5%;
		}

/* === DOELGROEPENMODEL TABEL === */
	.targetGroupModelTable {
		width: 100%;
		margin-bottom: 35px;
		border-spacing: 1px 1px;
	}
	.targetGroupModelTable:not(.noMargin):last-of-type {
		margin-bottom: 0px;
	}
	.targetGroupModelTable:not(.noMargin):last-of-type:after {
		display: block;
		width: 2px;
		height: 65px;
		content: " ";
	}

	.targetGroupModelTable tr.title td {
		height: 20px;
		border: 0px;
		background-color: #90268f;
		color: #FFFFFF;
	}
	.targetGroupModelTable tr.title td.level {
		border: 0px;
	}

	.targetGroupModelTable tr.subTitle td {
		height: 18px;
		background-color: #DCDCDC;
		font-style: italic;
	}

	.targetGroupModelTable tr.score td {
		height: 40px;
	}

	.targetGroupModelTable td.scoreCategory {
		width: 15%;
		padding-left: 5px;
		background-color: #DCDCDC;
		font-weight: bold;
		line-height: 20px;
		vertical-align: top;
	}

	.targetGroupModelTable td.label {
		width: 30%;
		padding-left: 5px;
		background-color: #DCDCDC;
		font-size: 11px;
	}
	.targetGroupModelTable td.label.half {
		width: 15%;
	}

	.targetGroupModelTable tr td.level {
		position: relative;
		width: 10%;
		border: 1px solid #DCDCDC;
		font-size: 11px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
	}
	.targetGroupModelTable tr td.level.half {
		width: 5%;
	}
	.targetGroupModelTable tr td.level.active {
		background-color: #00aeef;
		color: #FFFFFF;
	}

	.targetGroupModelTable .helpBox p {
		color: #000000;
		text-align: left;
	}

/* === TICKET DETAILS === */
	.ticketHeader {
		display: grid;
		grid-template-columns: auto 150px;
		width: 100%;
	}

	#content .ticketHeader h1 {
		display: inline-block;
		margin-bottom: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ticketHeader .status {
		height: 24px;
		border-radius: 10px;
		background: #DCDCDC;
		text-align: center;
		line-height: 24px;
	}
	.ticketHeader .status.O, .ticketHeader .status.P, .ticketHeader .status.WT {
		background-color: hsl(205, 100%, 92%);
		color: hsl(205, 99%, 35%);
	}
	.ticketHeader .status.AR {
		background-color: hsl(43, 100%, 92%);
		color: hsl(43, 99%, 35%);
	}
	.ticketHeader .status.SN, .ticketHeader .status.SC, .ticketHeader .status.C {
		background-color: hsl(169, 100%, 92%);
		color: hsl(169, 99%, 35%);
	}
	.ticketHeader .status.WC {
		background-color: hsl(29, 100%, 92%);
		color: hsl(29, 99%, 35%);
	}

	/* === DETAILS TABEL === */
		.ticketDetailsTable {
			width: 100%;
			border-spacing: 0px 1px;
			margin-bottom: 40px;
		}

		.ticketDetailsTable td {
			padding-left: 5px;
			line-height: 20px;
		}

		.ticketDetailsTable td.label {
			width: 15%;
			background-color: #DCDCDC;
			vertical-align: top;
		}

		.ticketDetailsTable td.value {
			width: 18%;
			border-bottom: 1px solid #DCDCDC;
			border-top: 1px solid #DCDCDC;
			border-right: 1px solid #DCDCDC;
		}