/* ======================= */
/*  KOE KINDDOSSIER        */
/*  VERSIE 1.0.00          */
/* ======================= */
/*  (c) 2007-2020 LuSaneT  */
/*  www.lusanet.nl         */
/* ======================= */
/*  Module elementen       */
/* ======================= */

/*
.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: 20px;
			border: 1px solid #dddede;
			border-radius: 5px;
			box-shadow: 1px 1px 2px 0px #808080;
			background-color: #007599;
		}

		.systemLoginBox h2 {
			margin: 10px;
			margin-left: 30px;
			margin-bottom: 25px;
			padding: 0px;
			color: #FFFFFF;
			font-family: 'BPreplay Bold', sans-serif;
			font-weight: lighter;
			font-size: 20px;
			letter-spacing: 0.75pt;
			text-transform: uppercase;
		}
		
		.systemLoginBox p {
			width: 80%;
			margin: 0px;
			margin-left: 30px;
			margin-bottom: 20px;
			margin-top: -20px;
			padding: 0px;
			color: #a5ecff;
		}
				
		.systemLoginBox label {
			width: 80%;
			height: 15px;
			margin-left: 30px;
			color: #dddede;
			font-size: 11px;
			text-transform: uppercase;
		}
		
		.systemLoginBox input:not([type=checkbox]) {
			width: calc(100% - 60px);
			height: 25px;
			margin-bottom: 20px;
			margin-left: 30px;
			padding-left: 30px;
			border: 1px solid #808080;
			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: 24px;
			margin-right: 0px;
			margin-top: 5px;
			margin-right: 30px;
			padding: 0px;
			border: 0px;
			border-radius: 3px;
			background-color: #f46460;
			background-image: none;
			box-shadow: none;
			color: #FFFFFF;
			line-height: 24px;
			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: 12px;
			line-height: 35px;
			cursor: pointer;
		}
		.systemChooseRoleBox li:hover {
			background-color: #98bf0e;
			color: #FFFFFF;	
		}
		
		.systemChooseRoleBox li strong {
			font-size: 13px;
		}

/* === HOMEPAGE === */
	.homepageBox {
		margin-top: -30px;
	}

	.homepageBox div {
		clear: none;
		float: left;
		width: 30%;
		margin-left: 3%;
		margin-top: 30px;
		padding: 15px;
		border: 1px solid #007599;
		border-radius: 10px;
		background-color: #007599;
		color: #a5ecff;
		font-family: 'Open Sans', Verdana, Geneva, Tahoma, sans-serif;
		text-align: center;
		line-height: 16px;
		cursor: pointer;
		transition: all 0.2s ease;
	}
	.homepageBox div:first-line {
		color: #FFFFFF;
		font-family: 'BPreplay', sans-serif;
		font-size: 18px;
		letter-spacing: 1px;
		line-height: 23px;
	}
	.homepageBox div:hover {
		border: 1px solid #ea5c55;
		background: #ea5c55;
		color: #f4b3b0;
	}

	.homepageBox div.youngChild::after {
		display: block;
		float: right;
		margin-left: -5px;
		margin-top: -38px;
		width: 34px;
		height: 50px;
		background-image: url('../images/youngchild_logo.png');
		background-size: 34px auto;
		background-position: center center;
		background-repeat: no-repeat;
		filter: contrast(0.1) brightness(100);
		content: " ";
	}
				
/* === 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;
	}
	section .button {
		margin-top: -5px;
		margin-right: 5px;
	}
	
	#content .managePage .buttonsBar div:hover, section .button:hover {
		position: relative;
		opacity: 0.8;
	}
	
	#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, .logList div[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;
	}
	.logList div[data-title]:hover:after {
		left: auto;
		right: 0px;
		top: 25px;
	}
	.logList div[data-title] {
		position: relative;
	}

	/* === 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 #f46460;
			border-top: 1px solid #f46460;
			color: #f46460;
			font-size: 15px;
			font-weight: normal;
			text-align: center;
		}
		
		#content .managePage .filtersBox h2 {
			width: 200px;
			height: 16px;
			margin: 0px;
			background-color: #f46460;
			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 #f46460;
		}
		#content .managePage .filtersBox .filter.sortOrder {
			max-height: auto;
			background-color: #f9abab;
		}
		
		#content .managePage .filtersBox .filter h3 {
			width: 198px;
			height: 17px;
			margin: 0px;
			margin-bottom: 2px;
			padding-left: 3px;
			background-color: #f46460;
			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: #f46460;
			color: #f46460;
		}
		
		#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: none;
			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 table {
			width: 100%;
			border: 0px;
			margin: 0px;
			padding: 0px;
			border: 1px solid #007599;
			table-layout: fixed;
		}
		
		#content .managePage .resultsBox tr:hover td {
			background-color: #a5ecff;
		}
		
		#content .managePage .resultsBox tr.header {
			background-color: #007599;
			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: #007599;
		}
		
		#content .managePage .resultsBox td {
			overflow: hidden;
			padding-bottom: 3px;
			padding-top: 3px;
			padding-right: 5px;
			border-bottom: 1px solid #007599;
			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;
		}

/* === FORM PAGE === */
	/* === FORM TABLE === */
		.formPageTable {
			width: 80%;
			margin-bottom: 65px;
			border: 0px;
			border-spacing: 0px 1px;
		}
		.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: " ";
		}
		
		.formPageTable td {
			width: 75%;
			min-height: 16px;
			border: 1px solid #DCDCDC;
			vertical-align: top;
		}
		.formPageTable.fullWidth td {
			width: 80%;
		}
		.formPageTable td:first-of-type, .formPageTable td.extraTitle {
			width: 25%;
			padding-left: 5px;
			background-color: #DCDCDC;
			line-height: 20px;
			vertical-align: top;
		}
		.formPageTable.fullWidth td:first-of-type, .formPageTable.fullWidth td.extraTitle {
			width: 20%;
		}
		
		.formPageTable > tbody > tr.title td {
			border: 0px;
			border-left: 1px solid #007599;
		}
		.formPageTable > tbody > tr.title td:first-of-type {
			height: 20px;
			border: 1px solid #007599;
			background-color: #007599;
			color: #FFFFFF;
			font-size: 14px;
			line-height: 18px;
		}

		.formPageTable tr.columnTitles td {
			border-right: 1px solid #FFFFFF;
			background-color: #dcdcdc;
			text-align: center;
		}

		.formPageTable tr.fieldsHeader td {
			padding-left: 5px;
			background-color: #969696;
			color: #FFFFFF;
			font-weight: bold;
		}
		.formPageTable tr.fieldsHeader td:first-of-type {
			background-color: #DCDCDC;
			color: #000000;
			font-weight: normal;
		}
		
		.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 {
			width: 100%;
			height: 20px;
			border: 0px;
			background-color: transparent;
		}
		
		.formPageTable td input[type=text], .formPageTable td input[type=password], .formPageTable td input[type=date], .formPageTable td select {
			width: 100%;
			height: 20px;
			border: 0px;
			padding-left: 5px;
		}
		.formPageTable td input.number {
			padding-left: 0px;
			padding-right: 5px;
			text-align: right;
		}
		.formPageTable td input[type=date] {
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 12px;
		}
		.formPageTable td input.unverified, .formPageTable td textarea.unverified {
			color: #ea5c55;
		}
		
		.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: 28%;
			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 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 {
			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 {
			clear: none;
			float: right;
			width: 14px;
			height: 14px;
			margin-right: 3px;
			margin-top: 3px;
			background-image: url('../images/delete_icon.png');
			background-position: 0px -14px;
			background-repeat: no-repeat;
			cursor: pointer;
		}
		#content table .editIcon {
			background-image: url('../images/edit_icon.png');
		}
		#content table .deleteIcon:hover, #content table .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 .clipboardImageField {
			overflow: hidden;
			width: 100%;
			height: 100%;
			min-height: 100px;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
			color: #808080;
			font-size: 10px;
			font-style: italic;
			text-align: center;
			vertical-align: middle;
		}
		.formPageTable .clipboardImageField::first-line {
			font-weight: bold;
			font-size: 11px;
		}
		
	/* === HELP BOX === */
		.formPageTable .explanationIcon {
			display: block;
			float: right;
			width: 18px;
			height: 18px;
			background-image: url('../images/managepage_icons.png');
			background-position: 0px -18px;
			background-repeat: no-repeat;
			background-size: 18px auto;
			cursor: pointer;
		}
		.formPageTable .explanationIcon:hover {
			opacity: 0.8;
		}

		.formPageTable .helpBox {
			display: none;
			position: absolute;
			z-index: 21;
			width: 250px;
			height: auto;
			border: 1px solid #f7941e;
			background-color: #fcdfbc;
			font-size: 12px;
		}
		
		.formPageTable .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 {
			width: 100%;
			height: 14px;
			margin: 0px;
			padding-left: 4px;
			background-color: #f7941e;
			color: #FFFFFF;
			font-family: 'BPreplay', sans-serif;
			font-size: 12px;
			letter-spacing: 0.25pt;
			line-height: 13px;
		}
		
		.formPageTable .helpBox p {
			margin: 4px;
		}
		
	/* === BUTTONS BAR === */
		.formPageButtonsBar {
			position: fixed;
			z-index: 20;
			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.import {
			background-position: 8px -220px, 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;
		}

	/* === 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: #007599;
		}
		
		#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;
			margin-bottom: 65px;
		}
		.tabPaneBox:not(.noMargin):last-of-type {
			margin-bottom: 0px;
		}
		.tabPaneBox:not(.noMargin):last-of-type:after {
			display: block;
			width: 2px;
			height: 65px;
			content: " ";
		}
		
		.tabPaneBox .tabs {
			width: 100%;
			height: 19px;
		}
		
		.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: #f46460;
		}
		
		.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;	
		}
		#content .tabPaneBox section .formPageTable:last-of-type::after {
			display: none;
		}
		
/* === 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 select {
			width: 120px;
			margin-left: 3px;
			margin-right: 3px;
			margin-top: 5px;
			border: 1px solid #DCDCDC;
			vertical-align: top;
		}

	/* === PRIVACY VOORKEUREN === */
		.privacyPermissions {
			background-color: #FFFFFF;
		}

		.privacyPermissions span {
			position: relative;
			display: inline-block;
			width: 100%;
			padding-left: 5px;
			line-height: 22px;
		}
		.privacyPermissions span[data-title] {
			cursor: help;
		}
		.privacyPermissions span.notAllowed {
			color: #C50000;
			font-weight: bold;
		}
		.privacyPermissions span.unknown {
			color: #505050;
		}

		.privacyPermissions span::before {
			position: relative;
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-right: 5px;
			background-image: url('../images/privacypermissions_icons.png');
			background-position: 0px 16px;
			background-repeat: no-repeat;
			vertical-align: middle;
			content: "";
		}
		.privacyPermissions span.allowed::before {
			background-position: 0px 0px;
		}
		.privacyPermissions span.notAllowed::before {
			background-position: 0px -16px;
		}
		.privacyPermissions span.unknown::before {
			background-position: 0px -32px;
		}

		.privacyPermissions span[data-title]:hover::after {
			position: absolute;
			z-index: 20;
			left: 40px; 
			top: 25px;
			max-width: 100%;
			padding: 2px;
			padding-left: 5px;
			padding-right: 5px;
			box-shadow: 0px 0px 2px #808080;  
			background: linear-gradient(#758fc1, #47659f);
			color: #FFFFFF;
			font-size: 12px;
			font-weight: normal;
			line-height: 18px;
			content: attr(data-title);
		}

	/* === DATA CONTAINER === */
		.toggleDataContainer {
			overflow-x: hidden;
			width: 98%;
			margin-left: 1%;
			margin-right: 1%;
			padding: 10px;
			border: 1px solid #007599;
		}
		.toggleDataContainer.closed {
			overflow: hidden;
			height: 20px;
			padding-bottom: 0px;
			border: 1px solid #787878;
		}
		
		.toggleDataContainer > h6 {
			display: table;
			width: 110%;
			height: 20px;
			margin: 0px;
			margin-bottom: 10px;
			margin-left: -10px;
			margin-top: -10px;
			padding-left: 5px;
			background-color: #007599;
			color: #FFFFFF;
			font-size: 13px;
			font-weight: normal;
			line-height: 18px;
			cursor: pointer;
		}
		.toggleDataContainer > h6:before {
			position: absolute;
			z-index: 6;
			display: block;
			width: 11px;
			height: 11px;
			margin-left: -21px;
			margin-top: 3px;
			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: 5px;
			background-position: 0px -11px;	
		}
		
	/* === TOETS TABELLEN === */
		.dossierSiblingsTable, .dossierClassesTable, .dossierExamsTable, .dossierFormsTable, .dossierAttachmentsTable {
			width: 100%;
			border: 0px;
			border-spacing: 0px 1px;
		}
		
		.dossierSiblingsTable tr.title td, .dossierSiblingsTable tr.title td:first-of-type, .dossierClassesTable tr.title td, .dossierExamsTable tr.title td, .dossierFormsTable tr.title td, .dossierAttachmentsTable tr.title td {
			border: 0px;
			border-bottom: 1px solid #007599;
			background-color: #F5F5F5;
			color: #808080;
			font-size: 11px;
			line-height: 16px;
		}
		.dossierSiblingsTable tr.title td.form:hover, .dossierFormsTable tr.title td.form:hover, .dossierAttachmentsTable tr.title td.name:hover {
			background-color: #F5F5F5;
			cursor: default;
		}
		
		.dossierSiblingsTable td, .dossierSiblingsTable tr td:first-of-type, .dossierClassesTable td, .dossierExamsTable td, .dossierFormsTable td, .dossierAttachmentsTable td {
			padding: 1px;
			border: 1px solid #dcdcdc;
			background-color: #FFFFFF;
			line-height: 20px;
			vertical-align: top;
		}
		.dossierSiblingsTable td, .dossierClassesTable td {
			padding-left: 5px;
		}

		.dossierClassesTable td.schoolYear {
			width: 13%;
			background-color: #DCDCDC;
		}

		.dossierClassesTable td.class {
			width: 20%;
		}

		.dossierClassesTable td.learningYear {
			width: 7%;
		}

		.dossierClassesTable td.teachers {
			width: 30%;
		}
		
		.dossierClassesTable td.date {
			width: 15%;
		}
		
		.dossierExamsTable td.exam {
			width: 25%;
			padding-left: 5px;
			background-color: #DCDCDC;
		}
		
		.dossierExamsTable td.score {
			width: 10%;
			padding-right: 3px;
			text-align: right;
		}
		
		.dossierExamsTable td.date {
			width: 12.5%;
			padding-left: 3px;	
		}
		
		.dossierExamsTable td.text, .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: #f46460;
			cursor: pointer;
		}
		
		.dossierAttachmentsTable td.name {
			width: 42%;
			padding-left: 3px;
			background-color: #DCDCDC;
		}
		.dossierAttachmentsTable td.name:hover {
			background-color: #f46460;
			cursor: pointer;
		}
		.dossierAttachmentsTable td.version {
			width: 10%;
			padding-right: 3px;
			text-align: right;
		}
		.dossierAttachmentsTable td.date {
			width: 20%;
			padding-right: 3px;
			text-align: right;
		}
		.dossierAttachmentsTable td.author {
			width: 19%;
			padding-left: 3px;
		}
		.dossierAttachmentsTable td.buttons, .dossierSiblingsTable td.buttons {
			width: 9%;
			text-align: right;
		}
		
		.dossierAttachmentsTable td.buttons img, .dossierSiblingsTable td.buttons img {
			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 img:hover, .dossierSiblingsTable td.buttons img:hover {
			opacity: 0.7;
		}
		.dossierAttachmentsTable td.buttons img.history {
			background-position: 0px -16px;
		}
		.dossierAttachmentsTable td.buttons img.move {
			background-position: 0px -32px;
		}
		.dossierAttachmentsTable td.buttons img.delete {
			background-position: 0px -48px;
		}
		.dossierSiblingsTable td.buttons img.open {
			background-position: 0px -64px;
		}
		
		.dossierAttachmentsTable td.buttons img[alt]:hover:after {
		  content: attr(alt);
		  z-index: 20;
		  position: absolute;
		  left: 25px; 
		  top: 25px;
		  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; 
		}

		.dossierSiblingsTable td.name {
			width: 25%;
		}

		.dossierSiblingsTable td.birthdate {
			width: 20%;
		}

		.dossierSiblingsTable td.class {
			width: 21%;
		}
						
/* === 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: #f46460;
	}
	
/* === 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: #007599;
		font-family: 'BPreplay Bold', sans-serif;
		font-weight: normal;
		font-size: 24px;
		letter-spacing: 0.75pt;
		text-transform: uppercase;
	}
	#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, .bulkUploadTable div {
			width: 100%;
			height: 24px;
			border: 1px solid #808080;
			border-radius: 3px;
			background: linear-gradient(#dcdcdc, #c8c8c8);
		}
		.bulkUploadTable div {
			height: 20px;
			border: 0px;
		}
		
		#attachmentsFrame .uploadProgress div span, .bulkUploadTable 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;
		}
		.bulkUploadTable div span {
			height: 20px;
			line-height: 18px;
		}
		
		#attachmentsFrame .uploadProgress div b, .bulkUploadTable div b {
			display: block;
			width: 50%;
			height: 22px;
			background: linear-gradient(#98bf0e, #8ead0d);
		}

	/* === BULK UPLOAD === */
		.bulkUploadTable {
			width: 75%;
			margin-bottom: 65px;
			margin-top: -25px;
			border: 0px;
			table-layout: fixed;
		}

		.bulkUploadTable td {
			overflow: hidden;
			width: 30%;
			min-height: 20px;
			border-bottom: 1px solid #DCDCDC;
		}

		.bulkUploadTable td:first-of-type {
			width: 70%;
			padding-left: 7px;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.bulkUploadTable tr.header td {
			padding-bottom: 2px;
			padding-top: 2px;
			background-color: #007599;
			color: #FFFFFF;
		}

/* === INLINE BUTTON === */
	.inlineButton {
		display: inline-block;
		width: auto;
		height: 20px;
		margin: 3px;
		margin-left: 10px;
		padding-left: 10px;
		padding-right: 10px;
		border: 1px solid #808080;
		border-radius: 3px;
		background: linear-gradient(#00a7d4, #007599); 
		background-position: 8px 0px;
		background-repeat: repeat;
		color: #FFFFFF;
		line-height: 16px;
		cursor: pointer;
	}
	.inlineButton:hover {
		background: linear-gradient(#00c7fc, #0098c0);
		background-repeat: repeat;
	}

/* === APPS IN OPP === */
	td.oppAppCell.addButton, .weekScheduleDayTable td.addButton {
		width: 100%;
		height: 20px;
		padding-left: 0px;
		border-top: 1px solid #DCDCDC;
		background-color: #F0F0F0;
		text-align: center;
		cursor: pointer;
	}
	.weekScheduleDayTable td.addButton {
		border-top: 0px;
		background-color: #F5F5F5;
	}
	td.oppAppCell.addButton:hover, .weekScheduleDayTable td.addButton:hover {
		background-color: #DCDCDC;
	}
	
	td.oppAppCell.addButton i, .weekScheduleDayTable td.addButton i {
		display: inline-block;
		width: auto;
		height: 16px;
		margin: 2px;
		padding-left: 18px;
		background-image: url('../images/managepage_icons.png');
		background-position: 0px center;
		background-repeat: no-repeat;
		background-size: 13px 13px;
		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 {
			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 textarea {
			height: 38px;
		}
		.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;
		}

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

	.addressListBox div {
		clear: none;
		float: left;
		width: 30%;
		margin-bottom: 3%;
		margin-right: 3%;
		border: 1px solid #007599;
		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: #007599;
		color: #FFFFFF;
		font-size: 15px;
		font-weight: normal;
	}

/* === KINDERDAGBOEK === */
	.youngChildDiary .logo, .youngChildSurvey .logo {
		float: right;
		margin: 10px;
		margin-top: -10px;
		margin-right: 1%;
		width: 26px;
		height: 40px;
		background-image: url('../images/youngchild_logo.png');
		background-repeat: no-repeat;
		background-position: 0px 0px;
		background-size: contain;
	}
	.youngChildSurvey .logo {
		width: 33px;
		height: 50px;
		margin-top: -65px;
	}

	.youngChildDiary .toggleDataContainer {
		border: 1px solid #eadfcb;
		font-size: 13px;
	}

	.youngChildDiary .toggleDataContainer > h6 {
		height: 40px;
		background-color: #eadfcb;
		color: #000000;
	}

	.youngChildDiary .toggleDataContainer > h6 span {
		display: inline-block;
		width: 30.5%;
	}
	.youngChildDiary .toggleDataContainer > h6 span:nth-child(2) {
		text-align: center;
	}
	.youngChildDiary .toggleDataContainer > h6 span:nth-child(3) {
		text-align: right;
	}

	.printButton {
		clear: none;
		float: right;
		width: 24px;
		height: 24px;
		margin-left: 6px;
		margin-top: 3px;
		background-image: url('../images/formpagebuttonsbar_icons.png');
		background-position: 8px -110px;
		background-repeat: no-repeat;
		cursor: pointer;
	}
	.printButton:hover {
		position: relative;
		opacity: 0.8;
	}
	
	.printButton: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;
	}

	/* === EVALUATIES === */
		.youngChildDiary .evaluationTable {
			position: relative;
			width: 100%;
			border: 0px;
		}
		#content .tabPaneBox section .evaluationTable {
			margin-bottom: 20px;
		}

		.youngChildDiary tr td:first-of-type, .youngChildDiary tr td.extraTitle {
			width: 20%;
			background-color: transparent;
		}

		.youngChildDiary .evaluationTable td, .youngChildDiary .evaluationTable td:first-of-type {
			border: 1px solid #DCDCDC;
			vertical-align: top;
		}

		.youngChildDiary .evaluationTable i.addButton {
			position: absolute;
			z-index: 10;
			right: 0px;
			margin-top: -1px;
			display: inline-block;
			width: 22px;
			height: 22px;
			border: 1px solid #DCDCDC;
			background-image: url('../images/youngchild_managepage_icons.png?1');
			background-position: -2px -52px;
			background-repeat: no-repeat;
			cursor: pointer;
		}
		.youngChildDiary .evaluationTable i.addButton:hover {
			background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url('../images/youngchild_managepage_icons.png?1') -2px -52px;
		}
		.youngChildDiary .evaluationTable i.addButton[data-title]:hover:after {
			position: relative;
			content: attr(data-title);
			padding: 2px;
			padding-left: 5px;
			padding-right: 5px;
			color: #FFFFFF;
			position: absolute;
			right: 0px;
			top: 25px;
			white-space: nowrap; 
			z-index: 20;
			box-shadow: 0px 0px 2px #808080;  
			background: #f08646;
			font-size: 11px;
			font-style: normal;
		}

		.youngChildDiary .evaluationTable .courseTitle {
			width: 100%;
			height: 30px;
			vertical-align: top;
		}
		.youngChildDiary .evaluationTable .courseTitle.math {
			background-color: var(--youngchild-math-dark);
		}
		.youngChildDiary .evaluationTable .courseTitle.lang {
			background-color: var(--youngchild-lang-dark);
		}
		.youngChildDiary .evaluationTable .courseTitle.soem {
			background-color: var(--youngchild-soem-dark);
		}
		.youngChildDiary .evaluationTable .courseTitle.self {
			background-color: var(--youngchild-self-dark);
		}
		.youngChildDiary .evaluationTable .courseTitle.arts {
			background-color: var(--youngchild-arts-dark);
		}
		.youngChildDiary .evaluationTable .courseTitle.moto {
			background-color: var(--youngchild-moto-dark);
		}

		.youngChildDiary .evaluationTable .evaluationField {
			width: 75%;
		}

		.youngChildDiary .evaluationTable .evaluationField:not(.extraTitle), .youngChildDiary .evaluationTable .extraCare:not(.extraTitle) {
			position: relative;
			height: 40px;
			padding-left: 5px;
			background-color: #FFFFFF;
			cursor: pointer;
		}
		.youngChildDiary .evaluationTable .evaluationField:not(.extraTitle):hover::before, .youngChildDiary .evaluationTable .extraCare:not(.extraTitle):hover::before {
			display: block;
			opacity: 0.4;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background-color: #666666;
			background-image: url('../images/edit_largeicon.png');
			background-position: center center;
			background-repeat: no-repeat;
			content: "";
		}
		.youngChildDiary .evaluationTable .evaluationField textarea {
			height: 40px;
		}

		.youngChildDiary .evaluationTable .extraCare {
			width: 25%;
		}
		.youngChildDiary .evaluationTable .extraCare textarea {
			height: 40px;
		}

	/* === CHECKLIST === */
		.youngChildDiary .checklistTable {
			width: 100%;
			border: 1px solid #FFFFFF;
		}

		.youngChildDiary .checklistTable td div {
			overflow: hidden;
			width: 100%;
			height: 55px;
		}

		.youngChildDiary .checklistTable td, .youngChildDiary .controlTaskTable .fields td {
			overflow: hidden;
			height: 40px;
			padding: 5px;
			border: 1px solid #f5f5f5;
			table-layout: fixed;
			text-overflow: ellipsis;
			vertical-align: top;
		}
		.youngChildDiary .checklistTable tr:not(.fieldNames) td:not(.title), .youngChildDiary .controlTaskTable .fields td {
			position: relative;
			height: 60px;
			cursor: pointer;
		}

		.youngChildDiary .checklistTable tr:not(.fieldNames) td:not(.title):hover::before, .youngChildDiary .controlTaskTable .fields td:not(.title):hover::before {
			display: block;
			opacity: 0.4;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background-color: #666666;
			background-image: url('../images/edit_largeicon.png');
			background-position: center center;
			background-repeat: no-repeat;
			content: "";
		}

		.youngChildDiary .checklistTable td.title {
			height: 20px;
		}
		.youngChildDiary .checklistTable td.title span {
			display: inline-block;
			width: 50%;
		}
		.youngChildDiary .checklistTable td.title span:nth-child(2) {
			text-align: right;
		}

		.youngChildDiary .checklistTable.math td.title {
			background-color: var(--youngchild-math-dark);
		}
		.youngChildDiary .checklistTable.lang td.title {
			background-color: var(--youngchild-lang-dark);
		}
		.youngChildDiary .checklistTable.soem td.title {
			background-color: var(--youngchild-soem-dark);
		}
		.youngChildDiary .checklistTable.self td.title {
			background-color: var(--youngchild-self-dark);
		}
		.youngChildDiary .checklistTable.arts td.title {
			background-color: var(--youngchild-arts-dark);
		}
		.youngChildDiary .checklistTable.moto td.title {
			background-color: var(--youngchild-moto-dark);
		}

		.youngChildDiary .checklistTable .fieldNames td {
			padding-left: 5px;
			white-space: nowrap;
		}
		.youngChildDiary .checklistTable.math .fieldNames td {
			background-color: var(--youngchild-math-light);
		}
		.youngChildDiary .checklistTable.lang .fieldNames td {
			background-color: var(--youngchild-lang-light);
		}
		.youngChildDiary .checklistTable.soem .fieldNames td {
			background-color: var(--youngchild-soem-light);
		}
		.youngChildDiary .checklistTable.self .fieldNames td {
			background-color: var(--youngchild-self-light);
		}
		.youngChildDiary .checklistTable.arts .fieldNames td {
			background-color: var(--youngchild-arts-light);
		}
		.youngChildDiary .checklistTable.moto .fieldNames td {
			background-color: var(--youngchild-moto-light);
		}

		.youngChildDiary .checklistTable td.statusC, .youngChildDiary .controlTaskTable .fields td.statusC, .youngChildDiary .evaluationTable td.extraCare.statusC {
			background-color: var(--youngchild-status-extracare);
		}
		.youngChildDiary .checklistTable td.statusF, .youngChildDiary .controlTaskTable .fields td.statusF, .youngChildDiary .evaluationTable td.extraCare.statusF {
			background-color: var(--youngchild-status-finished);
		}
		.youngChildDiary .checklistTable td.statusA, .youngChildDiary .controlTaskTable .fields td.statusA, .youngChildDiary .evaluationTable td.extraCare.statusA {
			background-color: var(--youngchild-status-extraattention);
		}
		.youngChildDiary .checklistTable td.statusU, .youngChildDiary .controlTaskTable .fields td.statusU{
			background-color: var(--youngchild-status-notfinished);
		}
	
	/* === CONTROLETAAK FB TABEL === */
		.youngChildDiary .controlTaskTable {
			width: 100%;
			border: 0px;
		}

		.youngChildDiary .controlTaskTable td {
			width: 20%;
			padding: 5px;
			border: 1px solid #f5f5f5;
			table-layout: fixed;
			text-overflow: ellipsis;
			text-align: center;
			vertical-align: top;
		}

		.youngChildDiary .controlTaskTable td:first-of-type {
			background-color: transparent;
			text-align: left;
		}

		.youngChildDiary .controlTaskTable .fieldNames td {
			height: 30px;
			background-color: var(--youngchild-lang-light);
		}
		.youngChildDiary .controlTaskTable .fieldNames td:first-of-type {
			background-color: var(--youngchild-lang-dark);
			text-align: left;
		}

		.youngChildDiary .controlTaskTable .minTargets td {
			background-color: var(--youngchild-status-finished);
		}

		.youngChildDiary .controlTaskTable .ambitionTargets td {
			background-color: var(--youngchild-status-extraattention);
		}

		.youngChildDiary .controlTaskTable .fields td.title {
			background-color: var(--youngchild-lang-light);
			cursor: default;
		}

/* === EXAMSTABLE === */
	.examResultsTable tr.header td {
		position: relative;
		background-color: #dcdcdc;
		text-align: center;
	}

	#content table.examResultsTable .editIcon {
		display: none;
		position: absolute;
		right: 0px;
		top: 0px;
	}
	#content table.examResultsTable td:hover .editIcon {
		display: block;
	}