/*------------------------------------------------------------------------------
** Kleuren
**----------------------------------------------------------------------------*/

:root {
    /* kleurcodes via variabelen. NB, dit werkt niet in IE, vandaar dat in de css de variabele de gewone definitie (tbv IE) overload. */
    /* dit werkt niet in IE! https://stackoverflow.com/questions/45955538/workaround-for-css-variables-in-ie*/
/* schema volgens zijmenu
	--MF_light_color_1: #E9F2F3;
	--MF_light_color_2: #D4E6E8;
	--MF_light_color_3: #BDD8DB;
    --MF_medium_color_1: #8CBAC0;	
	--MF_medium_color_2: #6BA7AE;
	--MF_medium_color_3: #487E84;
*/
	--MF_light_color_1: #E9F5F6;  /*  #E5F4F4;  */ 
	--MF_light_color_2: #CFE9EC;
	--MF_light_color_3: #B6DEE2;  /* 8CBAC0 vind ik te donker voor de menu-toggles tov accent 1 */
  --MF_medium_color_1: #7FC4CC;	
	--MF_medium_color_2: #5BB4BE;
	--MF_medium_color_3: #4198A2;
	--MF_dark_text_color_1: #365E63; /* niet voor vlakvulling gebruiken! alleen voor tekst ivm contrast */
/* todo: IE-kleuren (fallback) rechttrekken */
}

input:focus, select:focus, textarea:focus, div.ax-input:focus, .ax-ahd-edit .ax-relatie:focus, .selectize-input.focus, .verschillend_waarschuwing:focus, .ax-zv-relatie:focus {
	outline: 0;
	box-shadow: 0 0 0 2pt #5BB4BE; /*  BL todo blauwe tint: 3A97EE, groene tint: 64c0c4*/
	box-shadow: 0 0 0 2pt var(--MF_medium_color_2); 
}s

ul.jqtree-tree li.jqtree-selected>.jqtree-element, div.lijst>ul>li.list-selected, div.lijst-context-lvl>a.list-selected, .kop-geselecteerd {
	background: none repeat scroll 0% 0% #FFF;
}

textarea:hover, input:hover, .fvd-input:hover, select:hover, div.lijst>ul>li.selectable:hover, .select2-results .select2-highlighted, .select2-container>a:hover, a.twd-plus:hover, .dropdown-menu li>a:hover, .dropdown-submenu:hover>a, div.ax-fvd-relonder:hover, div.ax-fvd-relatie:hover, .flex-dropdown-menu ul ul li:hover, .sidebar-nav a:hover, .sidebar-nav a:focus:hover, span.ax-zv-display-relatie:hover {
	background: none repeat scroll 0% 0% #E9F2F3; 
	background: none repeat scroll 0% 0% var(--MF_light_color_1); /*  BL blauwe tint: C8D6F6, groene tint: BCE8F1 te heftig > E9F2F3*/
}

a {
	color: #004d2f;
/*	color: #4B66A7;  dit is blauw, die hierboven groen */
/* dit is dus de <a href> tag . Komt o.a voor in het kruimelpad en in thesaurussen */
}

a:focus {
	outline: 0;
	box-shadow: none;
	color: #64c0c4;
}

a:hover {
	text-decoration: underline;
}

a.a-no-link, a.a-no-link:focus, a.a-no-link:hover {
    color:rgb(0, 0, 0);
    text-decoration: none;
}

header a:focus {
	color: #64c0c4;
}

#pagina-gids:focus {
	color: white;
}



/*
* overloaden apex menu kleuren, expaned menu werkt nog niet 
*/
/*
doet alleen het label
.a-Menu-inner button.a-Menu-label[aria-expanded="true"] {
	background: #4198a2 !important;
	color: #FFF;
}

.a-Menu-inner button.a-Menu-label[aria-expanded="false"] {
	background: #FFF !important;
	color: #000;
}

deze moeten we hebben onchanged attribute aria-expanded=""...
.a-Menu-inner .a-Menu-labelContainer {
	background: #4198a2 !important;
	color: #FFF;
}

.a-Menu-inner .a-Menu-accelContainer {
	background: #4198a2 !important;
	color: #FFF;
}

.a-Menu-inner .icon-menu-sub {
	background: #4198a2 !important;
	color: #FFF;
}
.a-Menu-inner .icon-menu-sub {
	background: #FFF !important;
	color: #000;
}

.a-Menu .a-Menu-item .is-expanded, .a-Menu .a-Menu-item .aria-expanded
{
	background: #4198a2 !important;
	background: var(--MF_medium_color_3) !important;
	color: #FFF;
}

.a-Menu .a-Menu-item[aria-expanded="true"]
{
	background: #4198a2 !important;
	background: var(--MF_medium_color_3) !important;
	color: #FFF;
}
*/

/* doet niet helemaal wat we willen  
.a-Toolbar-group button.a-Toolbar-item[aria-expanded="true"] { 
	background: #7FC4CC !important;
	background: var(--MF_medium_color_1) !important;
	color: #000;
}
*/

/*
* overloaden apex menu kleuren, blijkt niet volledig, vastzetten moet nog uitgezocht */
.a-Menu .a-Menu-item.is-focused
{
	background: #7FC4CC !important; /* rgb(107, 182, 184) !important;*/ 
	background: var(--MF_medium_color_1) !important;
	color: #000; /* #FFF */
}
/**/

/*Multiselect shuttle pllugin .ms-elem-selectable.ms-hover 
.ms-elem-selectable.ms-hover
{
	background: rgb(107, 182, 184) !important;
    color: #FFF;
}
*/


/*------------------------------------------------------------------------------
** Transformaties
**----------------------------------------------------------------------------*/

.spin {
	-webkit-animation: spin 8s infinite linear;
	animation: spin 8s infinite linear;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(360deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(360deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
.fade {
	-webkit-animation: fade 8s infinite linear;
	animation: fade 8s infinite linear;
}

@-webkit-keyframes fade {
	0% {
		opacity: 1;
	}
	8% {
		opacity: 0;
	}
	16% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	28% {
		opacity: 0;
	}
	36% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	48% {
		opacity: 0;
	}
	56% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fade {
	0% {
		opacity: 1;
	}
	8% {
		opacity: 0;
	}
	16% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	28% {
		opacity: 0;
	}
	36% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	48% {
		opacity: 0;
	}
	56% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

.fa-spin-reverse {
	-webkit-animation: fa-spin-reverse 2s infinite linear;
	animation: fa-spin-reverse 2s infinite linear;
}

@-webkit-keyframes fa-spin-reverse {
	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	0% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@keyframes fa-spin-reverse {
	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	0% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

/*------------------------------------------------------------------------------
** Standaard HTML elementen
**----------------------------------------------------------------------------*/

* {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background: #FFF url(../images/bg-ree.jpg) bottom center no-repeat fixed;
	color: #000;
}

li, p {
	font-size: inherit;
}

dt {
	font-weight: bold;
}

/*------------------------------------------------------------------------------
** Invoervelden
**----------------------------------------------------------------------------*/

div.selectize-input {
	border: 1 solid #d0d0d0;
	/*min-height: 31px;*/
}

/* heb ik uitgezet voor Scanning on Demand. Dit behoort natuurlijk met een eigen css te worden geregeld anders wordt overal deze breedte ingesteld.
input.hasDatepicker {
	min-width: 200px;
}
*/
.t-Form-inputContainer {
	display: -webkit-flex!important;
	display: -ms-flexbox!important;
	display: flex!important;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.t-Form-field, .t-Form-inputContainer input.datepicker, .t-Form-inputContainer input.password, .t-Form-inputContainer input.popup_lov, .t-Form-inputContainer input.text_field, .t-Form-inputContainer input[type=text], .t-Form-inputContainer select.selectlist, .t-Form-inputContainer select.yes_no, .t-Form-inputContainer select[multiple], .t-Form-inputContainer span.display_only, .t-Form-inputContainer textarea.textarea, .t-Form-select, .t-Form-textarea, .u-TF-item--datepicker, .u-TF-item--select, .u-TF-item--text, .u-TF-item--textarea, .ms-container {
	max-width: 100%;
}

.t-Form-required>.a-Icon {
	display: none;
}

.t-Form-required:after {
	content: "*";
	color: #e60000;
	margin-left: 2px;
	margin-right: -3px;
}

.t-Form-field, .t-Form-inputContainer input.datepicker, .t-Form-inputContainer input.password, .t-Form-inputContainer input.popup_lov, .t-Form-inputContainer input.text_field, .t-Form-inputContainer input[type=text], .t-Form-inputContainer select.selectlist[size="1"], .t-Form-inputContainer select.yes_no, .t-Form-select[size="1"], .u-TF-item--datepicker, .u-TF-item--select, .u-TF-item--text {
	height: 2.8rem;
}

.t-Form-inputContainer, .t-Form-inputContainer.col, .t-Form-labelContainer, .t-Form-labelContainer.col {
	padding: .3rem;
}

input, textarea, select {
	border: none;
	padding: 5px;
}

input:read-only, textarea:read-only {
	background: #DDD;
}

.t-Form-label {
	vertical-align: text-top;
}

.t-Form-inputContainer fieldset.radio_group:focus {
	outline: 0;
	box-shadow: none;
}

.t-Form-inputContainer span.display_only {
	padding-top: 6px;
	border: none;
}

.t-Form--stretchInputs .t-Form-fieldContainer.override_no_form_stretch select, .t-Form--stretchInputs .t-Form-fieldContainer.override_no_form_stretch fieldset, .t-Form--stretchInputs .t-Form-fieldContainer.override_no_form_stretch input.popup_lov, .t-Form--stretchInputs .t-Form-fieldContainer.override_no_form_stretch table, .t-Form--stretchInputs .t-Form-fieldContainer.override_no_form_stretch td.lov, .t-Form--stretchInputs .t-Form-fieldContainer.override_no_form_stretch textarea, .t-Form-fieldContainer--stretchInputs.override_no_form_stretch fieldset, .t-Form-fieldContainer--stretchInputs.override_no_form_stretch input.popup_lov, .t-Form-fieldContainer--stretchInputs.override_no_form_stretch table, .t-Form-fieldContainer--stretchInputs.override_no_form_stretch td.lov, .t-Form-fieldContainer--stretchInputs.override_no_form_stretch textarea {
	width: auto;
	-webkit-flex: inherit;
	-ms-flex: inherit;
	flex: inherit;
}

.t-Form--stretchInputs .t-Form-fieldContainer fieldset, .t-Form--stretchInputs .t-Form-fieldContainer input.popup_lov, .t-Form--stretchInputs .t-Form-fieldContainer table, .t-Form--stretchInputs .t-Form-fieldContainer td.lov, .t-Form--stretchInputs .t-Form-fieldContainer textarea, .t-Form-fieldContainer--stretchInputs fieldset, .t-Form-fieldContainer--stretchInputs input.popup_lov, .t-Form-fieldContainer--stretchInputs table, .t-Form-fieldContainer--stretchInputs td.lov, .t-Form-fieldContainer--stretchInputs textarea body .ui-datepicker td a.ui-state-default, body .ui-datepicker td span.ui-state-default, .selectize-lov {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

body .ui-datepicker td a.ui-state-default:hover, body .ui-datepicker td span.ui-state-default:hover {
	background: #D4E6E8;  /* fallback IE */
	background: var(--MF_light_color_2);
	/* BL: was background: #C8D6F6;  */
}

body .ui-widget-header {
	background: #E6E6E7;
}

a.quick-pick-link {
	color: #4B66A7;
	text-decoration: underline;
	font-size: 0.9em;
}

span.display_only {
	margin-bottom: 5px;
	display: inline-block;
}

.verberg-input {
	/* (File) inputs verbergen maar wel laten functioneren om fraaiere alternatieven te kunnen gebruiken */
	opacity: 0;
	position: absolute;
	border: none;
	margin: 0px;
	padding: 0px;
	top: 0px;
	right: 0px;
}

/* Icoon + naam van beschrijving met kadertje eromheen */

div.ax-beschrijving {
	background: #FFF;
	border-radius: 4px;
	margin: 1px 2px 3px 2px;
	float: left;
	vertical-align: middle;
	min-height: 18px;
	line-height: 16px;
	padding: 1px 8px 1px 4px;
	-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

div.ax-beschrijving>img {
	background: #E7E7E7;
	padding: 0px;
	border-radius: 2px;
	border: 1px solid rgba(204, 204, 204, 0.52);
	vertical-align: middle;
	margin-right: 5px;
}

div.ax-beschrijving>span {
	vertical-align: middle;
}

div.ax-beschrijving:hover {
	background: #EEE;
}

.ax-readonly div.ax-beschrijving, .ax-readonly div.ax-beschrijving:hover {
	background: #FFF;
	cursor: default;
}

span.t-Form-error, span.error-text {
	color: #8e0000;
}

ul.mutiselect-readonly {
	margin: 0.4rem 3.2rem;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	min-width: 0;
}

/*------------------------------------------------------------------------------
** Page templates (niet in maisflexis_v3.0 ? ) 
**----------------------------------------------------------------------------*/

.t-Body.no_header_or_nav .t-Body-side {
	margin-top: 10px;
}

/*------------------------------------------------------------------------------
** Scherm header
**----------------------------------------------------------------------------*/

.t-Header {
	background: none repeat scroll 0% 0% #4198A2; 
	background: none repeat scroll 0% 0% var(--MF_medium_color_3);  /* BL was 4198A2 */
	z-index: 1001;
}

.t-Header-logo-link {
	line-height: 3rem;
	text-decoration: none;
	color: #fff;
}

.t-Header-logo-link span {
	font-size: 24px;
}

.top-right-icon:last-of-type {
	margin-left: 10px;
}

.top-right-icon:first-of-type {
	margin-right: 10px;
}

.top-right-icon {
	float: right;
	color: #FFF;
	padding: 8px;
}

.top-right-icon:focus {
	box-shadow: none;
}

.top-right-icon:hover {
	font-weight: bold;
}

.t-Breadcrumb {
	padding: 0px 13px;
}

.t-Header-navBar {
	display: none;
}

.ax-top-menu {
	padding: 6px;
	/*display: inline-block;*/
	float: right;
}

.ax-top-menu .dropbutton, .ax-top-menu .dropbutton ul {
	padding: 0px;
	margin: 0px;
}

.ax-top-menu .dropbutton>li {
	box-shadow: none;
	background: inherit;
}

.ax-top-menu .dropbutton>li>a {
	color: #FFF;
}

.ax-top-menu .dropbutton ul a>i.fa {
	color: #888888;
	margin-right: 6px;
}

.ax-top-menu .dropbutton>li:hover, .ax-top-menu .dropbutton.dropbutton-open>li:hover {
	background: #4FB3BF;
}

.ax-top-menu .dropbutton>li>a>i {
	color: #EEE;
}

.t-Button.t-Button--header.t-Button--headerTree {
	min-width: 40px;
}

#gebruiker_menu .ax-region-body {
	width: 300px;
}

#gebruiker_menu .ax-region-body .t-Form-inputContainer, #gebruiker_menu .ax-region-body .t-Form-labelContainer {
	padding: 0px;
}

#P0_GLOBALE_MELDING {
	position: absolute;
	top: 8px;
	left: 210px;
	font-size: 1.2em;
	z-index: 796;
	color: rgb(255, 255, 255);
	background: #016064;
	padding: 4px;
	border-radius: 5px;
	font-weight: bold;
}

/*------------------------------------------------------------------------------
** Body
**----------------------------------------------------------------------------*/

.t-Body {
	margin-top: 40px;
}

body.dialogstyle .t-Body {
	margin-top: 0px;
}

.t-Body-title {
	background: #FFF;
	box-shadow: none;
}

.t-Body-title:after {
	content: none;
}

.t-Body-side {
	box-shadow: none;
}

.t-Body-content {
	padding-bottom: 15px;
}

.t-Body-content {
	margin-top: 22px  !important;
}

body.dialogstyle .t-Body-content {
	margin-top: 0px  !important;
}

/*------------------------------------------------------------------------------
** Footer
**----------------------------------------------------------------------------*/

.t-Footer {
	display: none;
}

#apexDevToolbarMenu {
	border: none;
	padding: 0;
	margin: 0;
}

/*------------------------------------------------------------------------------
** Buttons
**----------------------------------------------------------------------------*/

.t-Button, body .ui-dialog .ui-dialog-buttonpane button, .ax-button, .a-Toolbar-groupContainer.a-Toolbar-groupContainer--end .a-Button {
	/* BL: .a-Toolbar-groupContainer.a-Toolbar-groupContainer--end .a-Button zijn de knoppen rechts bovein een IG. eventueel nog uit te splitsen in .js-actionButton en .js-menuButton */
	display: inline-block;
	padding: 8px 8px;
	margin: 1px 2px 3px 2px;
	min-width: 60px;
	background: #D4E6E8; /*  BL: was CEDCEE; BCE8F1 te heftig; E9F2F3 is te flets tov het grijs, accent1 (D4E6E8) is beter */
	background: var(--MF_light_color_2);
	color: #111;
	font-weight: bold;
	border-radius: 3px;
	border: none;
	transition: background-color 100ms linear;
	box-shadow: none;
	cursor: pointer;
	text-align: center;
	line-height: 1.5em;
}

.ax-button2 {
	margin: 4px 2px 4px 2px !important;
}

.ax-button>* {
	vertical-align: middle;
}

.ax-button>i.fa {
	margin-right: 5px;
}

.ax-button.small {
	padding-top: 3px;
	padding-bottom: 3px;
}

.ax-button.light {
	background: #4198A2;  /* BL was #3c868f;  */
	background: var(--MF_medium_color_3);
	color: #FFF;
}

.ax-button.light:hover {
	background: #5BB4BE;  /* BL was #4ba8b4; */
	background: var(--MF_medium_color_2);
}

.ax-button.disabled, .ax-button.disabled:hover, .ax-button.dark.disabled, .ax-button.dark.disabled:hover, .ax-button.light.disabled, .ax-button.light.disabled:hover {
	cursor: default;
	background: #888888;
	color: #DDD
}

.t-Button.t-Button--hot, body .ui-dialog .ui-dialog-buttonpane button:first-of-type, .ax-button.dark {
	background-color: #4198A2; /*#487E84;*/ /* BL: was 2d61a6; groenig: 267C86 is te heftig ; 5B9DA4 (50%) is het net niet, 8CBAC0 (65%) is te licht voor witte letters */
	background-color: var(--MF_medium_color_3);  /* 3 */
	color: #FFF;  /* #FFF; BL text zwart ipv wit? dat is totaal niet hot */
}

.t-Button.t-Button--hot:hover, body .ui-dialog .ui-dialog-buttonpane button:first-of-type:hover, .ax-button.dark:hover {
	background: #5BB4BE;  /* 6BA7AE; */ /* BL: was 598ED4;  1e groen; 4BA8B4,  accent2 (BDD8DB) is te licht; 5B9DA4 (50% verschil te klein); */
	background: var(--MF_medium_color_2);
}

.t-Button.t-Button--icon {
	padding: 8px 0px;
	min-width: 1em;
}

.t-Button:hover, body .ui-dialog .ui-dialog-buttonpane button:hover, .ax-button:hover, .a-Toolbar-groupContainer.a-Toolbar-groupContainer--end .a-Button:hover   { 
	background: #8CBAC0;
	background: var(--MF_medium_color_1);
}
/* BL: 7BACEB - dit doet de hover in de pagina, niet in het voorkeuren menu :))  45AEBA te heftig?) ; BDD8DB (accent2) val niet genoeg op; 7BB1B7 (60%) kan;  nu 65% */

.t-Button.t-Button--header {
	color: #FFF;
	border: none;
}

.t-Button.t-Button--icon {
	background: none;
}

.t-Button.t-Button--icon:focus {
	outline: 0;
	box-shadow: none;
}

.t-Button.t-Button--icon:hover>span.t-Icon {
	font-weight: bold;
}

/*.t-Button  .oss-button, body .ui-dialog .ui-dialog-buttonpane button .oss-button {*/
.t-Button.oss-button {
    /*display: inline-block !important;*/
    white-space: normal  !important;
    word-wrap: break-word !important;    
    width: 100%  !important;
    margin-left: 4px !important;
    /*inline-size: min-content !important;*/
}

.t-Button.oss-right {
    word-wrap: normal !important;
    /*display: inline-block !important;*/
    width: 100%  !important;
    margin-right: 4px !important;
    /*inline-size: min-content  !important;*/
}

.ax-icon-button {
	display: inline-block;
	padding: 5px;
	cursor: pointer;
	outline: 0;
	box-shadow: none;
}

.ax-icon-button:hover, .ax-icon-button:hover i.fa {
	font-weight: bold;
}

.ax-icon-button.disabled {
	color: rgba(204, 204, 204, 0.5);
	cursor: default;
}

.ax-icon-button.disabled:hover {
	font-weight: normal;
}

/*------------------------------------------------------------------------------
** Navigatie zijbalk
**----------------------------------------------------------------------------*/

.t-TreeNav.a-TreeView {
	display: block;
}

.t-TreeNav .a-TreeView-node--topLevel>.a-TreeView-content .a-TreeView-label {
	font-size: inherit;
}

.t-TreeNav .a-TreeView-content .a-TreeView-label:focus {
	box-shadow: none;
}

.t-TreeNav .a-TreeView-toggle:hover {
	background: #BDD8DB ;
	background: var(--MF_light_color_3);
	color: #EEE;
}
/* BL  #92A8DA;  #D4E6E8 is de gewone optie, dus de toggle iets donkerder -> #bdd8db */

.t-TreeNav .a-TreeView-node--topLevel ul .a-TreeView-toggle {
	width: 32px;
	height: 32px;
	padding: 8px 8px 8px 7px;
	margin: 0;
}

.t-TreeNav .a-TreeView-node--topLevel>ul>.a-TreeView-node {
	padding-left: 5px;
}

.t-TreeNav .a-TreeView-toggle:hover {
	width: 30px;
	padding: 12px 8px 12px 7px
}

.a-TreeView-node {
	padding: 3px 0 0 5px;
}

.a-TreeView-node.is-collapsible>.a-TreeView-row {
	background: #D4E6E8;  /* fallback IE */
	background: var(--MF_light_color_2);
	/* background: rgba(212, 230, 232, 1);  BL */
}

.t-TreeNav .a-TreeView-node--topLevel ul {
	padding: 0px;
	margin-left: 10px;
	position: relative;
}

.t-TreeNav.a-TreeView .is-collapsible>.a-TreeView-toggle:before, 
.t-TreeNav.a-TreeView .is-expandable>.a-TreeView-toggle::before {
	color: #333;
}

.t-TreeNav .a-TreeView-node--topLevel>ul ul {
	margin-left: 10px;
}

.a-TreeView-row.is-selected, .a-TreeView-row.is-selected.is-hover {
	background-color: #E9F2F3;
    background-color: var(--MF_light_color_1);
	/* background-color: rgba(212, 230, 232, 0.5);  BL */
}

.t-TreeNav .a-TreeView-node--topLevel>.a-TreeView-content.is-selected .fa {
	color: #333;
}

.a-TreeView-content.is-selected .a-Icon:before, 
.a-TreeView-content.is-selected .a-TreeView-label {
	color: #333;
	font-weight: bold;
}

.t-TreeNav .a-TreeView-row {
	background-color: #E9F2F3;  /* BL - waarom was dit rgba(212, 230, 232, 0.5); ??? dat is D4E6E8 maar dan 0.5 transparant? */
    background-color: var(--MF_light_color_1);
}

.t-TreeNav .a-TreeView-row.is-hover {
	background: #D4E6E8;  /* fallback IE */
	background: var(--MF_light_color_2);
}
/*#C8D6F6;   BvtL was rgba(212, 230, 232, 1)   */

.t-TreeNav .a-TreeView-node--topLevel>.a-TreeView-content .fa {
	color: #888;
}

.a-TreeView-row.is-focused, .a-TreeView-row.is-selected.is-focused {
	background-color: #E9F2F3;
    background-color: var(--MF_light_color_1);
	/* background-color: rgba(212, 230, 232, 0.5); BL */
}

.t-TreeNav .a-TreeView-node--topLevel>.a-TreeView-content {
	padding: 0px 0px 0px 1px;
	text-overflow: clip;
}

.t-TreeNav ul li ul span.fa {
	display: none;
}

.a-TreeView ul {
	padding: 0px 0 16px 0;
}

.ax-mf-versie {
	position: absolute;
	bottom: 0px;
	left: 0px;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
	padding: 4px 3px;
	font-size: 0.8em;
	color: #555;
}

/*------------------------------------------------------------------------------
** Regions
**----------------------------------------------------------------------------*/

.t-Region {
	border: none;
	border-radius: 1px;
	background-color: #ececec;
}

body.content_width_no_limit .t-Region, body.content_width_no_limit .apex-rds-container, body.content_width_no_limit .plugin_bladwijzerbalk_wrap {
	max-width: 100%;
}

body.content_width_extra_wide .t-Region, body.content_width_extra_wide .apex-rds-container, body.content_width_extra_wide .plugin_bladwijzerbalk_wrap {
	max-width: 1500px;
}

body.content_width_wide .t-Region, body.content_width_wide .apex-rds-container, body.content_width_wide .plugin_bladwijzerbalk_wrap {
	max-width: 1200px;
}

body.content_width_narrow .t-Region, body.content_width_narrow .apex-rds-container, body.content_width_narrow .plugin_bladwijzerbalk_wrap {
	max-width: 800px;
}

.t-Region-header {
	font-weight: bold;
	border-radius: 1px 1px 0 0;
	border-bottom: 4px solid #FFF;
	background: #ececec;
	color: #222;
}

.t-Region .t-Region-body {
	font-size: inherit;
	white-space: normal;
}

.t-SubRegion .t-Region-header {
	border: none;
	padding: 5px;
	font-size: inherit;
}

.t-Region.t-SubRegion {
	box-shadow: none;
	margin-top: 15px;
	margin-bottom: 15px; /* van 0 naar 15 ivm knoppen die in vervolg-divs in de header kunnen staan en naar boven uitsteken */
}
/*     MF-4411 - Zie Styling pagina 18
.t-SubRegion .t-Region-header .t-Region-title {
	font-style: italic;
}
*/
.t-Region .t-Region-header .t-Region-title button:last-of-type {
	position: absolute;
	top: 8px;
	right: 10px;
}

/*****************
** Dropdown region
*****************/

.ax-dropdown-region {
	float: right;
	overflow: visible;
	position: relative;
}

.ax-dropdown-region .ax-dropdown-region {
	background: #BCE8F1; /*  BL: was CEDCEE; */
}

.ax-dropdown-region .ax-dropdown-region>.ax-region-title {
	background: #BCE8F1; /*  BL: was CEDCEE; */
	color: #111;
}

.ax-dropdown-region .ax-region-title {
	text-align: center;
	color: #FFF;
	padding: 12px 8px;
	cursor: pointer;
	transition: background-color 150ms linear;
}

@media screen and (min-width: 640px) {
	.ax-dropdown-region .ax-region-title {
		min-width: 100px;
		padding: 12px;
	}
	.ax-dropdown-region>.ax-region-body {
		min-width: 100px;
	}
}

.ax-dropdown-region>.ax-region-body {
	display: none;
	position: absolute;
	top: 100%;
	right: 0%;
	border: 3px solid #65ACB4;
	background: #FFF;
	padding: 10px;
}

.ax-dropdown-region:hover .ax-region-title {
	background: rgba(255, 255, 255, 0.19);
}

.ax-dropdown-region:hover>.ax-region-body {
	display: block;
}

.ax-dropdown-region>.ax-region-body>* {
	width: 100%;
}

.ax-dropdown-region .t-Button.t-Button--icon {
	background: #E9F2F3;
	background: var(--MF_light_color_1);
	font-weight: normal;
}
/*BL: was CEDCEE . BCE8F1 is te heftig*/ 


.ax-dropdown-region .t-Button.t-Button--icon:hover {
	background: #D4E6E8;
	background: var(--MF_light_color_2);
}
/* BL: was 7BACEB -   45AEBA geprobeerd, dat is te heftig */

.ax-dropdown-region>.ax-region-body>*+* {
	margin: 5px 0px 0px 0px;
}

.t-Body-actions .t-Region+.t-Region, .t-Body-side .t-Region+.t-Region {
	margin-top: 10px;
}

.apex-rds {
	width: 100%;
	background-color: #016064;
	color: #EEE;
	font-weight: bold;
	display: table;
	table-layout: fixed;
	margin: 0px;
	padding: 0px;
}

.apex-rds li {
	display: table-cell;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	min-width: 1em;
	-webkit-transition: width 0.1s ease-in-out;
	-moz-transition: width 0.1s ease-in-out;
	-o-transition: width 0.1s ease-in-out;
	transition: width 0.1s ease-in-out;
}

.apex-rds li.apex-rds-selected {
	background-color: #008F95;
}

.apex-rds li.apex-rds-selected a {
	color: #FFF;
}

.apex-rds a {
	width: 100%;
	color: #CCC;
	text-decoration: none;
	box-shadow: none;
	padding: 6px;
}

.t-Region.a-Collapsible .t-Button--hideShow {
	display: none;
}

.t-Region.a-Collapsible .t-Region-header .t-Region-headerItems--title, .t-Region.a-Collapsible .t-Region-header .t-Region-headerItems--controls {
	cursor: pointer;
}

.t-Region.a-Collapsible .t-Region-headerItems--controls:before {
	content: "\f0d7";
	display: inline-block;
	font: normal normal normal 14px/1 "Font Apex Small";
	font-size: 1.5em;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #666;
	padding: 8px;
}

.t-Region.a-Collapsible.is-closed .t-Region-headerItems--controls:before {
	content: "\f0d8";
}

.t-MessageRegion {
	border: 1px solid #bce8f1;
	border: 1px solid var(--MF_light_color_2);
	background-color: #d9edf7;
	background-color: var(--MF_light_color_1);
	color: #31708f;
	color: var(--MF_dark_text_color_1);
}

.t-MessageRegion a {
	border-bottom-style: dashed;
	border-bottom-width: 1px;
}

.plugin_bladwijzerbalk_wrap {
	position: absolute;
	top: 29px;
	left: 12px;
	right: 12px;
}

.t-Dialog-header .plugin_bladwijzerbalk_wrap {
	right: 29px;
}

.plugin_bladwijzerbalk {
	height: 30px;
	width: 100%;
	list-style: none;
	background-color: #4198A2;
	background-color: var(--MF_medium_color_3);/* #016064;   BL  donkercyaan */ 
	color: #EEE;
	font-weight: bold;
	display: table;
	table-layout: fixed;
	margin: 0px;
	padding: 0px;
}

.plugin_bladwijzerbalk>div {
	display: table-cell;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	min-width: 1em;
	transition: width 0.1s ease-in-out;
	box-sizing: border-box;
	padding: 7px 5px;
	cursor: pointer;
}

.plugin_bladwijzerbalk>div:hover {
background: var(--MF_medium_color_2); /* #008F95;  /* BL donker medium cyaan */
	color: #FFF;
}

.plugin_bladwijzerbalk_spacer {
	width: 100%;
	height: 30px;
}

/*------------------------------------------------------------------------------
** Interactive Grids
**----------------------------------------------------------------------------*/

.a-IG-header {
	background: #fff !important; 
}

.a-GV-hdr {
	/*background: #FAFAFA; lichtere kleur axties balk*/
	background: #fff !important;
}

.a-IG .a-GV-row.is-selected td
{
/*	background: #487E84 !important; *//* ivm dialoog*/  /*lichtere kleur #50afb9*/  /* BL  test was 4198A2 */  
/*
	background: var(--MF_medium_color_3) !important;
	color: #FFF;
*/
	background: #E9F2F3 !important; 
  background: var(--MF_light_color_1)!important;
	color: rgb(0, 0, 0);
}

.a-IG .a-GV-table tr.is-selected .a-GV-cell
{
/*
	background: #487E84 !important; *//* ivm dialoog*/  /*lichtere kleur #50afb9*/  /* BL  test was 4198A2 */
/*
	background: var(--MF_medium_color_3) !important;
	color: #FFF;
*/
	background: #E9F2F3 !important;  
    background: var(--MF_light_color_1)!important;
	color: rgb(0, 0, 0);
}

.hide-selection .a-IG .a-GV-row.is-selected td {
	background: #FFF !important;  /* oorsponkelijke kleur als de selectie verborgen moet worden  */
	color: #000;
}

/*Cell selected*/
.a-GV.a-GV--selectCells .a-GV-cell.is-selected {
  background: var(--MF_light_color_1)!important;
	color: rgb(0, 0, 0);
}

.hide-selection .a-GV-footer {
	display: none;
}

.a-IG .link_voor_regel:focus {
	box-shadow: none;
	outline: 0;
}
/* ?? waar wordt dit gebruikt, wit op wit is niet handig.
.a-IG tr.is-selected .a-GV-cell a {
	color: #FFF !important;
}
*/
.a-IG .a-GV-cell.is-focused {
	box-shadow: inset 0 0 0 1px #4198A2;
	box-shadow: inset 0 0 0 1px var(--MF_medium_color_3);
} 

.a-IG .a-GV-cell span.fa-pencil {
	font-size: 2em;
	color: rgb(30, 30, 30);
}

.a-IG  tr.is-selected .a-GV-cell span.fa-pencil {
	font-size: 2em;
	color: rgb(30, 30, 30);  /* BL #FFF;*/ 
}

.a-IG .a-GV-headerLabel {
	white-space: normal;
}

/* let op dit geeft problemen bij multi select */
.a-IG td.column-wrap {
	white-space: normal;
}

/* white-space: normal; d.w.z. terugloop woorden leidt tot problemen bij mulit select (de select kolom scaalt niet mee)
.a-IG td {
	white-space: normal;
}
*/
/* opruimen ...
.hide-selection .a-IG  tr.is-selected .a-GV-cell span.fa-pencil {
	font-size: 2em;
	color:  var(--MF_medium_color_3);   // comment: BL #00613c; 
}
*/
/*  werkt nog niet 
 .a-IG :not(.is-selected) .a-GV-cell a .fa-pencil {
	color: #000;
}
*/

/* BL test dit is m! maar helaas ook de Zoek-button.... */
/*
.a-Toolbar-groupContainer.a-Toolbar-groupContainer--end .a-Button.js-actionButton {
    background-color: #ff0000;
    color: #00ff00;
    font-weight: inherit;
}
*/
/* dit werkt! alleen gaan met .a-Button alle IG-knoppen mee. met .a-Button.js-actionButton gaat ook de zoekbutton mee
.a-Button  {
    background-color: #00ff00;
    color: #ff0000;
    font-weight: inherit;
}
 BL */

.a-IG .ax-td-link {
	cursor: pointer;
}

/*
.a-IG .ax-regel-link {
	cursor: pointer;
}
*/
/* gaat niet werken voor want button kolommen worden ook grijs, bovendien kreeg ik het niet aan de praat */
.a-IG tr.ax-regel-link:hover {
	background: #CFE9EC;  /* BL rgb(220, 220, 220); */
	background: var(--MF_light_color_2);
}

/*------------------------------------------------------------------------------
** Interactive reports
**----------------------------------------------------------------------------*/

.a-IRR {
	border: none;
}

.a-IRR-header {
	background: #FFF;
	border-bottom: 2px solid #ececec;
}

.a-IRR-toolbar {
	background: none;
}

.a-IRR-headerLink {
	color: #111;
}

.a-IRR tr[data-href] {
	cursor: pointer;
}

/* BL: deze doet alleen iets met de eerste cel */
.a-IRR a.link-voor-regel {
	color: inherit;
	text-decoration: none;
}

.a-IRR a.ax-kolom-link {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	padding: 8px 12px;
	width: 100%;
	height: 100%;
}

.a-IRR td.ax-kolom-link {
	padding: 8px 12px;
}

.a-IRR a.link-voor-regel:focus {
	box-shadow: none;
	outline: 0;
	}
/* BL  hoe hover van regel IR?? */
/*.a-IRR td.link-voor-regel:hover { */
/*	background-color: #CFE9EC;  *//* BL rgb(220, 220, 220); */
/*	background-color: var(--MF_light_color_2); */
/*	background: #FF0000;  *//* BL rgb(220, 220, 220); */
/*}*/
 /* BL   BL - dit doet alleen de cel??: 
.a-IRR td.ax-regel-link:hover {
	background: #CFE9EC; 
	background: var(--MF_light_color_2); 
}
*/
.a-IRR .ax-regel-link {
	cursor: pointer;
}

.a-IRR .lov-waarde-0, .a-IRR .lov-waarde-1, .a-IRR .lov-waarde-2, .a-IG .lov-waarde-0, .a-IG .lov-waarde-1, .a-IG .lov-waarde-2 {
	display: inline-block;
	font: normal normal normal 14px/1 "Font Apex Small";
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;
}

.a-IRR .lov-waarde-0:before, .a-IRR .lov-waarde-2:before, .a-IG .lov-waarde-0:before, .a-IG .lov-waarde-2:before {
	content: "\f00d";
}

.a-IRR .lov-waarde-1:before, .a-IG .lov-waarde-1:before {
	content: "\f00c";
}

.a-IRR .lov-waarde-0, .a-IRR .lov-waarde-2, .a-IG .lov-waarde-0, .a-IG .lov-waarde-2  {
	color: #ff7171;
	text-align: center;
	width: 100%;
	background: #ffffff;
}

.a-IRR .lov-waarde-1, .a-IG .lov-waarde-1  {
	color: #24ce24;
	text-align: center;
	width: 100%;
	background: #ffffff;
}

.a-IRR .link-waarde, .a-IG .link-waarde {
	display: inline-block;
    width: 100%;
}

.a-IRR .lov-radio-0 {
	color: #000000;
	text-align: center;
	width: 100%;
	background: #ffffff;
}

.a-IRR .lov-radio-1 {
	color: #000000;
	text-align: center;
	width: 100%;
	background: #ffffff;
}

.a-IRR .lov-radio-0:before {
	content: "\f10c";
}

.a-IRR .lov-radio-1:before {
	content: "\f111";
}

/* Speciale uitbreiding op IRR die regels selecteerbaar maakt */

.a-IRR .report-selectable-row {
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.a-IRR .report-selectable-row td {
	transition: background-color 0.25s ease;
}

.a-IRR .report-selectable-row.row-selected.row-active td {
	background: #CFE9EC; /* BL was: #267c86; */
	background: var(--MF_light_color_2)!important;
	color: #000;  /* BL #EEE; */
}

.a-IRR .report-selectable-row.row-selected td {
/*	background: #487E84 !important; *//* ivm dialoog*/  /* BL test was 4198a2 */
/*	background: var(--MF_medium_color_3) !important; */
	background: #E9F2F3 !important;  
    background: var(--MF_light_color_1)!important; /* net zo licht als IR */
	color: #000;  /* BL #EEE; */
}

/* BL dit hieronder hoor thelemaal niet in IR sectie! afgesplitst van de styling hierboven van IR selected row */
.ax-ddb-dropdown-menu .ax-ddb-dropdown-menu-item:hover
, .ui-dialog-titlebar.ui-widget-header
, .ui-icon-closethick {
	background: #487E84 !important; /* ivm dialoog*/  /* BL test was 4198a2 */
	background: var(--MF_medium_color_3) !important; 
	color: #EEE;
}

/* wanneer een standaard penseel( pencil) icoon moet worden getoond moet worden getoond in een interactive report: */
.a-IRR span.fa-pencil {
	font-size: 2em;
	color: rgb(30, 30, 30);
}

.a-IRR  tr.is-selected span.fa-pencil {
	font-size: 2em;
	color: rgb(30, 30, 30);  
}

.a-IRR-table tr th[id="LINK"]{
	width: 40px;
}

.a-IRR-table tr td[headers="LINK"] {
	width: 40px;
}
/*standaard penseel( pencil) icoon IRR*/

/* collapsible region header is grijs i.p.v. wit, probeersel: 
.t-Region-header.bg_white {
	background: #fff !important; 
}
*/

/*.ui-dialog-titlebar.ui-widget-header, .ui-icon-closethick {
	background: #4198A2 !important;
	color: #fff
}*/

/*------------------------------------------------------------------------------
** Tabular forms
**----------------------------------------------------------------------------*/

.rechten_tabel tr:hover {
	background: #BBB;
}

.rechten_tabel td.t-Report-cell {
	font-size: 1em;
	line-height: 1em;
	padding: 3px 15px;
}

.rechten_tabel td.t-Report-cell>input {
	cursor: pointer;
}

.rechten_tabel td.t-Report-cell>input:focus {
	box-shadow: none;
}

.t-Report input[type="checkbox"] {
	visibility: visible;
	width: auto;
	cursor: pointer;
}

.t-Report-cell2  td.t-Report-cell{
		padding:2px 4px;
	}

/*------------------------------------------------------------------------------
** Custom checkboxes
**----------------------------------------------------------------------------*/

.ax-checkbox {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #FFF;
	cursor: pointer;
	box-sizing: border-box;
	padding: 0px;
	font-size: 1.5em;
	min-height: 1em;
	border: 1px solid #AAA;
	border-radius: 3px;
}

.ax-checkbox i {
	vertical-align: top;
}

input[type="text"].ax-checkbox-hidden {
	visibility: hidden;
	width: 0px;
	height: 0px;
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
}

.a-IRR-controlsCheckboxLabel {
	border: none;
	box-shadow: none;
	width: auto;
	height: auto;
}

.a-IRR-controlsCheckboxLabel:before {
	opacity: 1;
	transition: none;
	width: auto;
	height: auto;
	position: relative;
}

.a-IG-controlsCheckboxLabel {
	border: none;
	box-shadow: none;
	width: auto;
	height: auto;
}

.a-IG-controlsCheckboxLabel:before {
	opacity: 1;
	transition: none;
	width: auto;
	height: auto;
	position: relative;
}

/*------------------------------------------------------------------------------
** Popups / dialogs
**----------------------------------------------------------------------------*/

.ax-dialog-page>iframe {
	width: 100%;
	height: 100%;
	min-width: 100%;
}

.dialoog-pagina .t-Body-title {
	top: 0px;
	left: 0px;
	height: 36px;
}

.dialoog-pagina .t-Body-title .plugin_bladwijzerbalk_wrap {
	position: fixed;
	top: 0px;
	left: 9px;
	right: 9px;
}

.dialoog-pagina .t-Body-title .plugin_bladwijzerbalk_spacer {
	display: none;
}

body.dialog_open {
	/* Fixed positioning and no body scrolling for mobile */
	overflow: hidden;
	position: fixed;
	width: 100%;
}

body .ui-dialog {
	box-shadow: 0 1px 14px 0 rgba(0, 0, 0, 0.7), 0 16px 48px 0 rgba(0, 0, 0, 0.5);
	background: #FFF;
}

body .ui-dialog .ui-dialog-title {
	font-size: inherit;
	font-weight: bold;
	float: none;
	width: 100%;
	margin-right: 30px;
}

body .ui-front {
	z-index: 3001;
}

body .ui-widget-overlay {
	z-index: 1001;
}

body .ui-dialog .ui-button.ui-dialog-titlebar-close {
	box-shadow: none;
	background: none;
}

body .ui-dialog .ui-button.ui-dialog-titlebar-close .ui-icon-closethick {
	left: 0%;
	margin-left: 0px;
	width: 2em;
	height: 2em;
	margin-top: 0px;
	top: 0%;
}

body .ui-dialog .ui-button.ui-dialog-titlebar-close .ui-icon-closethick:before {
	font-size: 2em;
}

.ui-dialog .ui-widget-content, .ui-dialog.ui-widget-content {
	border: none;
}

.ui-dialog {
	z-index: 1001;
	background: #ececec;
	border-radius: 6px;
	padding: 5px;
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
}

body .ui-dialog.ui-dialog--apex .ui-dialog-content {
	padding: 0px;
}

@media only screen and (max-width:424px) {
	body .ui-dialog .ui-dialog-titlebar.ui-widget-header {
		border-bottom: 0;
	}
}

body .ui-dialog .ui-dialog-titlebar.ui-widget-header {
	background: #ececec;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 4px solid #FFF;
	text-align: center;
}

body select {
	background-color: white;
}

.t-Dialog .t-Body-content {
	margin: 2px 9px;
}

.t-Dialog select.selectlist {
	width: 100%;
}

body .ax-dialog.ui-dialog {
	z-index: 1002;
	background: #FFF;
	border-radius: 10px;
}

body .ui-dialog .ui-resizable-handle.ui-resizable-n {
	height: 10px;
	z-index: 1005 !important;
}

body .ui-dialog .ui-resizable-handle.ui-resizable-e {
	width: 10px;
	z-index: 1005 !important;
}

body .ui-dialog .ui-resizable-handle.ui-resizable-s {
	height: 10px;
	z-index: 1005 !important;
}

body .ui-dialog .ui-resizable-handle.ui-resizable-w {
	width: 10px;
	z-index: 1005 !important;
}

.ui-resizable-se { width: 10px; height: 10px; z-index: 1005 !important;}

.ui-resizable-sw { width: 10px; height: 10px; z-index: 1005 !important; }

.ui-resizable-nw { width: 10px; height: 10px; z-index: 1005 !important; }

.ui-resizable-ne { width: 10px; height: 10px; z-index: 1005 !important;}

body .ui-dialog.ax-dialog .ax-dialog-title {
	font-weight: bold;
	text-align: center;
	margin: 0px;
	cursor: pointer;
	background: none repeat scroll 0% 0% #37818a;
	color: #FFF;
	height: 38px;
	padding: 11px;
}

body .ui-dialog.ax-dialog .ui-dialog-titlebar .fa-exclamation-triangle {
	color: #dbde11;
	vertical-align: middle;
}

body .ui-dialog.ax-dialog .ax-dialog-buttons {
	text-align: center;
	padding: 10px 0px 5px 0px;
}

.ui-widget-content a {
	color: #4B66A7;
}

.mf_popup.showNow {
	display: block !important;
}

.mf_popup {
	display: none;
}

.ui-dialog.dialog-open .mf_popup {
	display: block;
}

body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	text-align: center;
	float: none;
}

.ui-dialog.ui-widget-content, .t-DialogRegion-body, .t-ButtonRegion {
	background: #ececec;
}

/* Verplaatst vanuit looplijsten.css */

.modalDiv, .ui-dialog-content {
	background-color: #fff !important;
}

.modalDiv, .dialogButtons {
	cursor: default;
}

.msgBoxDialogIcon {
	margin: 5px;
	margin-right: 10px;
	vertical-align: middle;
	background: #fff;
	float: left;
	clear: both;
}

.contentDiv {
	padding: 12px;
}

body .ui-dialog .ui-dialog-content {
	outline: 0;
	overflow: auto;
	margin: 5px 10px;
}

body .ui-dialog.iframe-dialog .ui-dialog-content {
	padding: 0px;
	margin: 0px;
}

body .ui-dialog.iframe-dialog .ui-dialog-content>div {
	height: 100%;
	min-width: 900px;
	min-height: 500px;
}

body .ui-dialog.iframe-dialog iframe {
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px
}

/*------------------------------------------------------------------------------
** Overlays
**----------------------------------------------------------------------------*/

body.ax-bezig {
	position: relative;
}

.ax-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0px;
	display: none;
	z-index: 99999999;
}

.ax-overlay.local {
	z-index: 1000;
}

.ax-overlay>.cover {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0px;
	background: none repeat scroll 0% 0% #EEE;
	opacity: 0.5;
}

.ax-overlay .spinwrapper {
	position: absolute;
	top: 25%;
	left: 50%;
	text-align: center;
	color: #555;
}

.ax-overlay .spinwrapper>i.fa-spinner {
	position: relative;
	left: -50%;
	top: -50%;
	font-size: 8em;
	opacity: 0.75;
}

.ax-overlay .progresswrapper {
	left: -50%;
	position: relative;
	font-size: 1.5em;
	line-height: 1em;
	margin-top: 10px;
	padding: 8px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.5);
	opacity: 0.75;
}

/*------------------------------------------------------------------------------
** Fancy radio buttons
**----------------------------------------------------------------------------*/

/* MF-4459 */
.fancyRadio div.apex-item-option {
	display: inline;
}

.fancyRadio .apex-item-option>label, .fancyRadio[role="group"] label, fieldset.fancyRadio label {
	/*.fancyRadio label {*/
	display: inline-block;
	margin: 4px;
	background-color: #EFEFEF;
	border-radius: 4px;
	border: 1px solid #D0D0D0;
	/*overflow: auto;*/
	min-width: 70px;
}

@media only screen and (max-width:620px) {
	.fancyRadio label {
		width: 99%;
	}
}

.fancyRadio label span {
	text-align: center;
	padding: 16px 12px;
	display: inline-block;
	line-height: 100%;
	/*vertical-align: middle;*/
	cursor: pointer;
	min-width: 100px;
}

.fancyRadio label span:hover {
	background: var(--MF_light_color_2);  /* MF5392 -  #CCC */
	border-radius: 4px; /* MF-4670 */
}

.fancyRadio label input {
	position: absolute;
	top: -20px;
}
/*var(--MF_light_color_1);*/
.fancyRadio input:checked+span {
	background-color: var(--MF_medium_color_3); /* MF5392 -  #404040; */
	color:  #F7F7F7; /* kleur van text */
	border-radius: 4px;
}

/* Verfraaing voor standaard radio buttons */

/*.radio_group.radioHorizontal>br {
	display: none;
}*/
.radio_group.radioHorizontal>div.apex-item-option {
	display: inline; /* MF-4548 */
}

/* Fraaiere checkboxes */
input[type="checkbox"], input[type="radio"] {
	visibility: hidden;
	width: 0px;
}

/*correct  algnment Display only in dialogs*/
.t-Dialog .t-Form-inputContainer span.display_only{
  padding-top: 4px;
}

/* todo?
.t-Form-inputContainer span.display_only{
  font-weight: normal;
}
*/
.t-Form-inputContainer .checkbox_group input[type=checkbox]:checked+label, .t-Form-inputContainer .radio_group input[type=radio]:checked+label {
  font-weight: normal;
}

input[type="checkbox"]+label, input[type="radio"]+label {
	cursor: pointer;
	user-select: none;
}

input[type="checkbox"]+label:before, input[type="radio"]+label:before {
	content: " ";		
	background: #FFF;
	width: 18px;
	height: 18px;
	border: 1px solid #E0E0E0;
	box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, .05) inset;
	/*border-radius: 2px;
	margin-right: 10px;*/
	padding: 3px;
	cursor: pointer;
	vertical-align: middle;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/*margin-top: 1px;
	margin-bottom: 1px;*/
	display: inline-block;
	font: normal normal normal 21px/1 "Font Apex Small";
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	color: #555;
	text-align: left;
}

input[type="checkbox"]+label:before {
	border-radius: 2px;
}

input[type="radio"]+label:before {
  border-radius: 50%;
}

input[type="checkbox"]:checked+label:before {
	content: "\f00c";
	color: green;
}

input[type="radio"]:checked+label:before {
	content: "\f111";
	color: #707070 !important;
}

.t-Form-inputContainer .checkbox_group input[type=checkbox]:checked+label, .t-Form-inputContainer .radio_group input[type=radio]:checked+label {
  font-weight: normal;
}

input[type="checkbox"]:disabled:checked+label:before, input[type="radio"]:disabled:checked+label:before {
	/*color: #888;*/
	background-color: #DDD;
}

input[type="checkbox"]:disabled+label, input[type="checkbox"]:disabled+label:before, input[type="radio"]:disabled+label, input[type="radio"]:disabled+label:before {
	cursor: default;
	background-color: #DDD;
}


/*
.cbx_selector {
    margin: auto !important;
    width: 16px !important;
}
*/
.checkbox_small input[type="checkbox"]+label:before, input[type="radio"]+label:before {
	width: 16px;
	height: 16px;
	font: normal normal normal 16px/1 "Font Apex Small";
  margin: auto !important;
  display: block !important;
}

.checkbox_row input[type="checkbox"]+label:before, input[type="radio"]+label:before {
    margin: auto !important;
    display: inline-block !important;
}

th.header_small {
    width: 20px;
}

.a-IG input[type="checkbox"]+label:before, .a-IG input[type="radio"]+label:before {
	transform: translate(-6px, 0px); /*transform: translate(-6px, -6px);*/
}

.a-IG .a-Toolbar-toggleButton .a-Button {
    padding-top: 5px;
    padding-right: 12px;
    padding-bottom: 4px;
    padding-left: 12px;
}

.t-Button.t-Button--noUI.t-Button--helpButton.js-itemHelp {
	min-width: 22px;
	padding: 0px 0px;
	box-sizing: border-box;
	min-height: 22px;
}

.t-Button.t-Button--noUI.t-Button--helpButton.js-itemHelp:focus {
	outline: 0;
}

.t-Button.t-Button--noUI.t-Button--helpButton.js-itemHelp>span {
	opacity: .5;
}

.t-Button.t-Button--noUI.t-Button--helpButton.js-itemHelp:hover>span {
	opacity: 0.8;
	font-weight: bold;
}

/*------------------------------------------------------------------------------
** Tooltips
**----------------------------------------------------------------------------*/
/* MF-6994 - tbv gebruik tooltip bij IG op p139: */
.ui-tooltip-content {  
    background:rgba(255,255,255,1) !important;
    color: #000000 !important;
	word-wrap: break-word !important; 
	white-space: pre-wrap  !important;
}

.ui-tooltip {
    width: 600px !important;
    max-width: 600px !important;
    opacity:1 !important;
    background-color: rgba(255,255,255,1) !important;
}

/*------------------------------------------------------------------------------
** Overig
**----------------------------------------------------------------------------*/

.experimenteel {
	color: #e60000;
	margin-right: 5px;
}

.param-experimenteel:before {
	content: "\f0c3";
	font-family: 'Font APEX Small' !important;
	color: #e60000;
	margin-left: 2px;
	margin-right: -3px;
}

.t-Alert--horizontal .t-Alert-body {
	font-size: unset;
}

.t-Body-content > .t-Body-alert { /* toevoeging van 1e class maakt dat dit niet op de login-pagina geldt --> daar werkt het niet lekker bij dismiss */
	max-width: 1200px;
	margin-left: 12px;
}
.t-Body-alert > .t-Alert--warning > .t-Alert-wrap {
	border-style: solid;
	border-color: #000;
	border-width: 2px;
}

.t-Alert-icon {
	color: red;
}

.t-Alert--success .t-Alert-icon {
	color: green;
}

.t-Alert--page.t-Alert--success.is-visible {
	background: #d4e6e8;  /*#c0c0c0*/
	background: var(--MF_light_color_2);
	/* dit valt iets meer op tegen een witte achtergrond */
	/*border-style: solid;
	border-color: #000;
	border-width: 2px;*/
}

.nowrap {
	white-space: nowrap;
}

.align-right {
	text-align: right;
}

.enlargeButton>span {
	line-height: 3em;
	min-width: 150px;
}

hr {
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(65, 152, 162, 0), #4198A2, rgba(65, 152, 162, 0));   /* BL todo? 21-4-8 */
	/* https://css-tricks.com/examples/hrs/ */
}

.stop-scrolling {
	overflow: hidden;
	height: 100%;
	width: 100%;
	position: fixed;
}

.rodeNotificatie {
	color: #D8000C;
	background: #FFBABA;
	border: 1px solid #D8000C;
	padding: 6px;
}

/*------------------------------------------------------------------------------
** Voor kleine schermen
**----------------------------------------------------------------------------*/

@media only screen and (max-width:470px) {
	div.t-Body-contentInner {
		padding: 0 0 0 0;
	}
}

/*------------------------------------------------------------------------------
** Timeout popup
**----------------------------------------------------------------------------*/

body .ui-dialog.timeout_dialog>.ui-dialog-content {
	padding: 10px;
	text-align: center;
}

/*------------------------------------------------------------------------------
** "Aan de slag" region
**----------------------------------------------------------------------------*/

.aan-de-slag-met .tegel {
	display: none;
	background: #FFF;
	border-radius: 3px;
	margin-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
	color: black;
	-webkit-transition: background-color 100ms ease-out;
	-moz-transition: background-color 100ms ease-out;
	-o-transition: background-color 100ms ease-out;
	transition: background-color 100ms ease-out;
	cursor: pointer;
	height: auto;
}

.aan-de-slag-met .tegel:hover {
	background-color: #FFF;
	background: #E9F2F3;  /* BL - waarom was dit rgba(212, 230, 232, 0.5); ??? dat is D4E6E8 maar dan 0.5 transparant? */
    background: var(--MF_light_color_1);
}
/* #C8D6F6;  BL */

.aan-de-slag-met .tegel>* {
	vertical-align: middle;
	display: inline-block;
}

.aan-de-slag-met .tegel>i {
	font-size: 3em;
	padding: 8px 10px;
	width: 70px;
	text-align: center
}

.aan-de-slag-met .tegel>a {
	padding: 16px 10px;
	font-weight: bold;
	color: #222;
}

.aan-de-slag-met .tegel>.uitleg {
	opacity: 0;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
	margin-left: 40px;
}

.aan-de-slag-met .tegel:hover>.uitleg {
	opacity: 1;
}

.aan-de-slag-met .regel.zichtbaar>.tegel {
	display: block;
}

.aan-de-slag-met .regel.huidige>.regel>.tegel {
	display: block;
}

.aan-de-slag-met .beschrijven.fa {
	color: #007B28;
}

.aan-de-slag-met .behoud.fa {
	color: #DE000D;
}

.aan-de-slag-met .depot.fa {
	color: #DE000D;
}
.aan-de-slag-met .bestand.fa {
	color: hsl(298, 88%, 49%);
}

.depot_button {
	color: #DE000D;
}

.aan-de-slag-met .studiezaal.fa {
	color: #F49B00;
}

.aan-de-slag-met .exporteren.fa {
	color:  #FFD700;
}

.aan-de-slag-met .vernietigen.fa {
	color:  #ff5e00;
}

/*  voor redesign menu */
.aan-de-slag-met .importeren.fa {
	color:  #FFD700;
}

/*  voor redesign menu */
.aan-de-slag-met .orderadministratie.fa {
	color:  #3CB371;
}

.aan-de-slag-met .beheren.fa {
	color: #478CC6;
}

/*  voor redesign menu */
.aan-de-slag-met .inrichting.fa {
	color: #0057A8;
}

/*  voor redesign menu */
.aan-de-slag-met .technischbeheer.fa {
	color: #9C006B;
}

.aan-de-slag-met .rapportages.fa {
	color: #AA7D55;
}

.aan-de-slag-met .bezoekers.fa {
	color: rgb(73, 135, 135);
}

.aan-de-slag-met .achtergrondtaken.fa {
	color: #b042f4;
}

a.aan-de-slag-regel {
	display: block;
	height: 53px;
	background: #DDD;
	border-radius: 3px;
	margin-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
	color: black;
	-webkit-transition: background-color 100ms ease-out;
	-moz-transition: background-color 100ms ease-out;
	-o-transition: background-color 100ms ease-out;
	transition: background-color 100ms ease-out;
}

a.aan-de-slag-regel:hover {
	background: #EEE;
}

a.aan-de-slag-regel>i.fa {
	font-size: 3em;
	padding: 8px 10px;
	width: 70px;
	text-align: center
}

a.aan-de-slag-regel>span {
	padding: 16px 10px;
	font-weight: bold;
	color: #222;
	vertical-align: top;
	display: inline-block;
}

.ax-nav-menu {
	list-style-type: none;
	margin: 0px;
}

.ax-nav-menu li a {
	display: block;
	height: 53px;
	background: #FFF;
	border-radius: 3px;
	margin-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
	color: black;
	-webkit-transition: background-color 100ms ease-out;
	-moz-transition: background-color 100ms ease-out;
	-o-transition: background-color 100ms ease-out;
	transition: background-color 100ms ease-out;
}

.ax-nav-menu li a:hover {
	background: #eaf3f4;
}

.ax-nav-menu li a>i.fa {
	font-size: 3em;
	padding: 10px;
	width: 70px;
	text-align: center
}

.ax-nav-menu li a>span {
	padding: 16px 10px;
	font-weight: bold;
	color: #222;
	vertical-align: top;
	display: inline-block;
}

.ax-nav-menu .uitleg {
	display: inline-block;
	height: 100%;
	vertical-align: top;
	padding: 15px
}

.ax-nav-menu .uitleg>span {
	vertical-align: middle;
	opacity: 0;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
}

.ax-nav-menu li:hover .uitleg>span {
	opacity: 1;
}

.ax-nav-menu .beschrijven.fa {
	color: #007B28;
}

.ax-nav-menu .depot.fa {
	color: #DE000D;
}

.ax-nav-menu .studiezaal.fa {
	color: #F49B00;
}

/*  voor redesign menu */
.ax-nav-menu .importeren.fa {
	color:  #FFD700;
}

/*  voor redesign menu */
.ax-nav-menu .orderverwerking.fa {
	color:  #3CB371;
}

/* redesign - obsolete: */
.ax-nav-menu .edepot.fa {
	color: #478CC6;
}

/* redesign obsolete: */
.ax-nav-menu .uitwisselen.fa {
	color: #9C006B;
}

.ax-nav-menu .beheren.fa {
	color: #478CC6;
}

/*  voor redesign menu */
.ax-nav-menu  .inrichting.fa {
	color: #0057A8;
}

/*  voor redesign menu */
.ax-nav-menu .technischbeheer.fa {
	color: #9C006B;
}

.ax-nav-menu .rapportages.fa {
	color: #AA7D55;
}

.ax-nav-menu .bezoekers.fa {
	color: rgb(73, 135, 135);
}

span.a-TreeView-toggle:before {
	font-size: 14px;
}


/*------------------------------------------------------------------------------
** Bestand uploaden item
**----------------------------------------------------------------------------*/

.bestand-uploaden {
	width: 100%;
}

.bestand-uploaden>input[type=file] {
	opacity: 0;
	position: absolute;
	border: none;
	margin: 0px;
	padding: 0px;
	top: 0px;
	right: 0px;
	height: 0px;
	width: 0px;
}

.bestand-uploaden>span {
	display: inline-block;
	background: #FFF;
	padding: 4px;
	color: #555;
	width: 100%;
	cursor: pointer;
}

.bestand-uploaden>span:hover {
	background: #EEE;
}

.bestand-uploaden.gekozen>span {
	cursor: default;
	color: #000;
	vertical-align: middle;
}

.bestand-uploaden.gekozen>span:hover {
	background: #FFF;
}

.bestand-uploaden>div.progress {
	background: rgba(0, 128, 0, 0.17);
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 0%;
	display: none;
}

.bestand-uploaden>i.fa-cog, .bestand-uploaden>i.fa-check {
	position: absolute;
	left: 5px;
	top: 5px;
	font-size: 24px;
	display: none;
}

.bestand-uploaden>i.fa-cog {
	color: #555;
}

.bestand-uploaden>i.fa-check {
	color: green;
}

.bestand-uploaden.uploaden>span, .bestand-uploaden.klaar>span {
	padding-left: 30px;
}

.bestand-uploaden.uploaden>div.progress {
	display: block;
}

.bestand-uploaden.uploaden>i.fa-cog, .bestand-uploaden.klaar>i.fa-check {
	display: block;
}

/*------------------------------------------------------------------------------
** Hack, intentie is om iconen in dropdownmenu niet te *vet*ten, maar werkt nog niet goed helaas
**----------------------------------------------------------------------------*/

.ax-dropdown-region .t-Button.t-Button--icon:hover .fa {
	font-weight: normal;
}

/*------------------------------------------------------------------------------
** Schaduwen
**----------------------------------------------------------------------------*/

.shadowText {
	text-shadow: 2px 2px 4px #000000;
	/* http://www.w3schools.com/css/css3_shadows.asp */
}

.fullShadowText {
	text-shadow: 1px 1px 2px black, 0 0 5px darkblue;
	/* http://www.w3schools.com/css/css3_shadows.asp */
}

/*------------------------------------------------------------------------------
** Statuskleuren
**----------------------------------------------------------------------------*/

.warning-yellow {
	color: #ffe850;
}

.info-blue {
	color: #2E68E5;
}

.info-white {
	color: #ffffff;
}

.error-red {
	color: #F91A23;
}

.success-green {
	color: #DFF2BF;
}

/*------------------------------------------------------------------------------
** Gekleurde statuspanels (gebruik als messagePanel icm xxxPanel)
**----------------------------------------------------------------------------*/

.messagePanel {
	border: 1px solid;
	padding: 5px;
	/*margin: 3px 0 0 0;*/
	text-align: center;
	font-size: 0.9em;
	/*display: inline-block;*/
}

.messagePanel::before {
	font-family: "Font Apex Small";
	font-size: 1.8em;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	margin-right: 4px;
	vertical-align: middle;
}

.infoPanel {
	background: #BDE5F8;
	color: #00529B;
}

.infoPanel::before {
	content: "\f05a";
}

.successPanel {
	background: #DFF2BF;
	color: #4F8A10;
}

.successPanel {
	content: "\f00c";
}

.warningPanel {
	background: #FEEFB3;
	color: #9F6000;
}

.warningPanel::before {
	content: "\f071";
}

.errorPanel {
	background: #FEEFB3;
	color: #9F6000;
}

.errorPanel::before {
	content: "\f057";
}

/*------------------------------------------------------------------------------
** Tbv printen
**----------------------------------------------------------------------------*/

@media print {
	.no-print, .no-print *, .t-Body-topButton {
		display: none !important;
	}
}

/*------------------------------------------------------------------------------
** Pagina gids
**----------------------------------------------------------------------------*/

#page-guide-wrapper {
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	z-index: 9999999999999;
	pointer-events: none;
}

#page-guide-wrapper .page-guide-shadow {
	position: absolute;
	pointer-events: none;
	background: rgba(55, 195, 211, 0.5);    /* BL todo 21-4-8 */
	box-shadow: inset 0 0 0 2pt rgba(5, 229, 255, 0.75);   /* BL todo 21-4-8 */
}

#page-guide-wrapper .page-guide-arrow {
	position: absolute;
	pointer-events: none;
	font-size: 40px;
	color: rgba(5, 229, 255, 0.75);  /* BL todo 21-4-8 */
}

#page-guide-wrapper .arrow-left.page-guide-arrow {
	transform: rotate(90deg);
}

#page-guide-wrapper .arrow-top.page-guide-arrow {
	transform: rotate(180deg);
}

#page-guide-wrapper .arrow-right.page-guide-arrow {
	transform: rotate(270deg);
}

#page-guide-wrapper .page-guide-control {
	position: absolute;
	background: rgb(41, 103, 110);   /* BL todo 21-4-8 */
	bottom: 20px;
	left: 50px;
	right: 50px;
	height: 20%;
	max-height: 200px;
	border-radius: 10px;
	z-index: 2;
	pointer-events: all;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.7);
}

#page-guide-wrapper .page-guide-control .page-guide-prev, #page-guide-wrapper .page-guide-control .page-guide-next, #page-guide-wrapper .page-guide-control .page-guide-first, #page-guide-wrapper .page-guide-control .page-guide-last {
	color: #FFF;
	position: absolute;
	cursor: pointer;
	z-index: 3;
}

#page-guide-wrapper .page-guide-control .page-guide-first, #page-guide-wrapper .page-guide-control .page-guide-last {
	font-size: 25px;
}

#page-guide-wrapper .page-guide-control .page-guide-prev, #page-guide-wrapper .page-guide-control .page-guide-next {
	font-size: 45px;
}

#page-guide-wrapper .page-guide-control .page-guide-prev:hover, #page-guide-wrapper .page-guide-control .page-guide-next:hover, #page-guide-wrapper .page-guide-control .page-guide-first:hover, #page-guide-wrapper .page-guide-control .page-guide-last:hover {
	font-weight: bold;
}

#page-guide-wrapper.first .page-guide-first, #page-guide-wrapper.first .page-guide-prev {
	display: none;
}

#page-guide-wrapper.last .page-guide-last, #page-guide-wrapper.last .page-guide-next {
	display: none;
}

#page-guide-wrapper .page-guide-control .page-guide-first {
	left: 12px;
	top: 77px;
}

#page-guide-wrapper .page-guide-control .page-guide-prev {
	left: 12px;
	top: 17px;
}

#page-guide-wrapper .page-guide-control .page-guide-next {
	right: 12px;
	top: 17px;
}

#page-guide-wrapper .page-guide-control .page-guide-last {
	right: 12px;
	top: 77px;
}

#page-guide-wrapper .page-guide-control .page-guide-contents {
	position: absolute;
	left: 50px;
	bottom: 10px;
	top: 10px;
	right: 50px;
	background: #FFF;
	border-radius: 10px;
	border: 4px solid rgb(69, 174, 186);   /* BL todo 21-4-8 */
	text-align: left;
	padding: 8px;
	color: #000;
	font-weight: normal;
	white-space: pre-wrap;
	line-height: 2em;
	overflow-x: hidden;
	overflow-y: auto;
}

#page-guide-wrapper .page-guide-control .page-guide-title {
	position: absolute;
	left: 70px;
	top: -17px;
	background: #FFF;
	border-radius: 10px;
	border: 4px solid rgb(69, 174, 186);   /* BL todo 21-4-8 */
	text-align: left;
	padding: 2px 12px;
	color: #000;
	font-weight: normal;
	white-space: pre-wrap;
	line-height: 2em;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 2;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.7);
}

#page-guide-wrapper .page-guide-control .page-guide-list {
	position: absolute;
	bottom: 100%;
	left: 143px;
	overflow-y: auto;
	max-height: 400px;
	background: #FFF;
	border-radius: 10px;
	border: 4px solid rgb(69, 174, 186);   /* BL todo 21-4-8 */
	padding: 4px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.7);
}

#page-guide-wrapper .page-guide-control .page-guide-list li {
	cursor: pointer;
}

#page-guide-wrapper .page-guide-control .page-guide-list li:hover {
	background: #EEE;
}

#page-guide-wrapper .page-guide-control .page-guide-title:hover {
	background: #EEE;
}

#page-guide-wrapper .page-guide-control .page-guide-close {
	position: absolute;
	background: rgb(41, 103, 110);   /* BL todo 21-4-8 */
	top: -30px;
	right: 20px;
	height: 30px;
	width: 100px;
	border-radius: 10px;
	z-index: 2;
	pointer-events: all;
	text-align: center;
	padding: 7px;
	color: #FFF;
	font-weight: bold;
	text-decoration: underline;
	cursor: pointer;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.7);
}

/*------------------------------------------------------------------------------
** On-line / Off-line toggle
**----------------------------------------------------------------------------*/

.hideWhenWrongOnlineState
/*, .reqOffline*/
{
	display: none;
}

/*------------------------------------------------------------------------------
** Tekstafbreking
**----------------------------------------------------------------------------*/

/* http://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css?answertab=active#tab-top */

.max-lines-4 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-height: 1.1em;
	line-clamp: 4;
  /* fallback */
	max-height: 4.5em;
	/* fallback */
	-webkit-line-clamp: 4;
	/* number of lines to show */
	-webkit-box-orient: vertical;
}

/*------------------------------------------------------------------------------
** Ondersteuning voor vertaling van de applicatie
**----------------------------------------------------------------------------*/

textarea.vertaling {
	width: 100%;
}

.vertaal_fouten {
	color: red;
	font-size: 28px;
	width: 100%;
	padding-left: 3px;
	cursor: pointer;
}

.vertaal_fouten:hover {
	font-weight: bold;
}

.prompt_niet_vertaald {
	color: red;
	font-weight: bold;
	background: black;
}

.prompts_vertalen {
	table-layout: fixed;
	width: 100%;
	text-align: left;
}

.prompts_vertalen tr {
	cursor: pointer;
}

.prompts_vertalen td {
	padding: 2px;
	overflow: hidden;
	white-space: pre-wrap;
}

.prompts_vertalen tr:hover td {
	background: #dedede;
}

.prompts_vertalen td.incompleet {
	background: #ffe7ba;
}

.prompts_vertalen tr.ontbreekt {
	background: #ffc6c6;
}

.prompts_vertalen tr.ontkoppeld {
	background: #fff3c6;
}

.bewerk-vertaling table {
	table-layout: fixed;
	width: 100%;
}

.bewerk-vertaling td {
	overflow: hidden;
}

.bewerk-vertaling input {
	width: 100%;
	border: 1px solid #CCC;
}

.checkbox_column {
	width: 200px;
	text-align: center; 
	vertical-align: middle; 
}

/*
.check {
	width: 10%;
	border: 1px solid rgb(228, 22, 22);
}
*/
.bewerk-vertaling .bewerken td:first-of-type {
	width: 100px;
}

/* Fraaiere key / value tabellen */

.key_value_table {
	width: 100%;
}

.key_value_table td, .key_value_table th {
	height: 29px;
	padding: 2px 0px;
}

.key_value_table th {
	font-weight: bold;
}

.key_value_table td:first-of-type {
	text-align: right;
	min-width: 150px;
	padding-right: 6px;
	vertical-align: top;
	padding-top: 5px;
}

.key_value_table td[colspan="2"] {
	text-align: left;
}

.instructiontext, .apex-help-dialog {
	white-space: pre-wrap;
}

/*.t-DialogRegion-body {
	background: #EEE;
}*/

.disabled-link {
	pointer-events: none;
	cursor: default;
}

/*------------------------------------------------------------------------------
** Overige
**----------------------------------------------------------------------------*/

a.external_link::after {
	content: "\f08e"; /* "external-link" */
	font-family: "FontAwesome";
	font-weight: 900;
	margin-left: 6px;
}

li.t-Tabs-item.is-active {
	border: 1px solid #c0c0c0;
}

.verborgen {
	display: none;
}

iframe.iFrameKaal {
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	min-height: 500px;
}

/* MF-4002 */
.newQP > a {
	margin: 0 4px;
}

/* MF-4681 */
.aet-small {
	max-width: 16px;
	max-height: 16px;
}

/* MF-4829 */
.fa-commenting-o:before {
	content:"\f27e";
}

/* lijsten binnen lijsten binnen helpteksten */
.apex-help-dialog ul ul {
	margin: 0.5em 2.6em;
}

/**
* In het geval van de getallen 1 of 0 in de database met betekenis ja/naa true/false:
* vinkjes en kruisjes op dezelfde manier weergeven
* 
**/
.column_check.fa {
    font-size: 14px;   
} 

.column_check.fa-check {
    color: #00bc00;    
}

.column_check.fa-times {
    color: #f20000;
}


/**
*  kruisje in de inputs voor QST's
**/
th.qst_th_input span.deleteicon {
	position: relative;
	padding: 0 0 0 0 !important;
	width: 100%;
}
th.qst_th_input span.deleteicon span.deletebutton {
	position: absolute;
	display: block;
	top: 3px;
	right: 3px;
	cursor: pointer;
	color: rgb(128, 128, 128);
}
th.qst_th_input span.deleteicon input {
	padding-right: 16px;
	box-sizing: border-box;
}


/**
*  ten behoeve van kiezen behandelwijzen p89
**/
.vert_scroll {
	overflow-x: visible  !important;
	overflow-y: auto !important; 
	height: 570px;
}

.no_scroll .a-IRR-tableContainer {
	overflow: hidden !important; 
}