@namespace pfcol "modules.webdialog";
@namespace pfres "WFWidgets.DropDown";
@namespace pfres "WFWidgets.DatePicker";
@namespace pfres "WFWidgets.Progression";
@namespace pfres "WFWidgets.Stack";
@namespace pfres "WFWidgets.Line";
@namespace pfres "WFWidgets.Layout";
@namespace pfres "WFWidgets.Frame";
@namespace pfres "WFWidgets.Slider";
@namespace pfres "WFWidgets.Annotations";
@namespace pfres "WFWidgets.AutoSuggest";
@namespace pfres "WFWidgets.Checkbox";
@namespace pfres "WFWidgets.FileUpload";
@namespace pfres "WFWidgets.Popup";
@namespace pfres "WFWidgets.Toolbar";
@namespace pfres "WFWidgets.MenuSet";
@namespace pfres "WFWidgets.CommandItem";
@namespace pfres "WFWidgets.CommandItemSeparator";
@namespace pfres "WFWidgets.CommandItemContainer";
@namespace pfres "WFWidgets.AccordionMenu";
@namespace pfres "WFWidgets.Display";
@namespace pfres "WFWidgets.TagField";
@namespace pfres "WFWidgets.TreeView";
@namespace pfres "WFWidgets.FramedContent";
@namespace pfres "WFWidgets.ArrayOfControls";
@namespace pfres "WFWidgets.Overlay";
@namespace pfres "WFWidgets.MapQuest";
@namespace pfres "WFWidgets.VirtualScrollbar";
@namespace pfres "WFWidgets.ListColumn";
@namespace pfres "WFWidgets.ListColumnSet";
@namespace pfres "WFWidgets.List";
@namespace pfres "WFWidgets.TemplateList";
@namespace pfres "WFWidgets.Gantt";
@namespace pfres "WFWidgets.TinyMCE";
@namespace pfres "WFWidgets.Tooltip";
@namespace pfres "WFWidgets.CalendarView";
@namespace pfres "WFWidgets.DayView";
@namespace pfres "WFWidgets.MonthView";
@namespace pfres "WFWidgets.Dashboard";
@namespace pfres "WFWidgets.ToggleGroup";
@namespace pfres "WFWidgets.ToggleButtons";
@namespace pfres "WFWidgets.Select";
@namespace pfres "WFWidgets.TextArea";
@namespace pfres "WFWidgets.Template";
@namespace pfres "WFWidgets.WebElement";
@namespace pfres "WFWidgets.Window";
@namespace pfres "WFWidgets.Control";
@namespace pfres "WFWidgets.ControlPrefix";
@namespace pfres "WFWidgets.Layered";
@namespace pfres "WFWidgets.Input";
@namespace pfres "WFWidgets.GroupBox";
@namespace pfres "WFWidgets.IconBox";
@namespace pfres "WFWidgets.ListView";
@namespace pfres "Widgets.Listbox";
@namespace pfres "Widgets.Hyperlink";
@namespace pfres "Widgets.IconLink";
@namespace pfres "Widgets.Button";
@namespace pfres "Widgets.Dialog";
@namespace pfres "WFWidgets.AzureMaps";
@namespace pfres "WFWidgets.MapSidebar";
@namespace pfres "WFWidgets.VSplitter";
@namespace pfres "WFWidgets.Splitter";
@namespace pfres "WFWidgets.Panel";
@namespace pfres "WFWidgets.Grid";
@namespace pfres "WFWidgets.DevExtremeChart";
@namespace pfres "WFWidgets.FDViewer";
@namespace pfres "WFWidgets.PDFViewer";
@namespace pfres "WFWidgets.Scheduler";
@namespace pfres "WFWidgets.SignaturePad";
@namespace pfres "WFWidgets.TileView";
@namespace pfres "WFWidgets.TinyMCE6";
@namespace pfres "WFWidgets.Dialog";
@namespace pfres "Controls.MenuButton";
@namespace pfres "Widgets.Menu";
@namespace pfres "WFWidgets.Menu";
@namespace pfres "WFWidgets.ImageViewer";
@namespace pfres "DataGrid.Text";
@namespace pfres "DataGrid.Checkbox";
@namespace pfres "DataGrid.Button";
@namespace pfres "DataGrid.Combobox";
@namespace pfres "WFWidgets.HorizontalRule";
@namespace pfres "WFWidgets.EmptyLine";
@namespace pfres "WFWidgets.XMLViewer";
@namespace pfres "WFWidgets.Dummy";
@namespace pfres "DataGrid.Autosuggest";
@namespace pfres "WFWidgets.TabContainer";
@namespace pfres "DataGrid.Date";
@namespace pfres "WFWidgets.BarcodeScanner";

/* WF Resource "WFWidgets.DropDown" (6EDB::1987::6EDB::631) */

.wf-dropdown {
	border: 1px solid #808080;
	background-color: white;
	box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
}

/* WF Resource "WFWidgets.DatePicker" (6EDB::1987::6EDB::632) */

.wf-datepicker {
	display: block;
	min-width: 300px;	/* De datepicker kan ook als losse control worden ingezet */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.wf-dropdown > .wf-datepicker {
	width: 300px;
}

.wf-datepicker a,
.wf-datepicker a:hover {
	text-decoration: none;
}

.wf-datepicker.wf-datepicker-disabled a {
	cursor: default;
}

.wf-datepicker-loader {
	width: 40px;
	font-size: 16px;
	text-align: center;
	padding: 3px;
	box-sizing: border-box;
}

/*/-----------------------/ DatePicker - Header /---------------/*/

.wf-datepicker > .header {
	white-space: nowrap;
	background-color: white;
	font-weight: bold;
}

.wf-datepicker > .header a { 
	color: #3498DB;
}

.wf-datepicker > .header > div {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	padding: 5px;
	border-radius: 4px;
	line-height: 25px;
	height: 25px;
}

.wf-datepicker:not(.wf-datepicker-disabled) > .header > div:hover {
	background-color: #F0F0F0;
	cursor: pointer;
}

.wf-datepicker > .header > .browser,
.wf-datepicker > .header > .close {
	width: 20px;
	font-size: 150%;
}

.wf-datepicker > .header > .close {
	font-weight: normal;
	color: #ccc;
	padding: 5px;
}

.wf-datepicker > .header > .titlebar {
	width: 100%;
}

.wf-datepicker.wf-datepicker-disabled > .header > .browser {
    visibility: hidden;
}

/*/-----------------------/ DatePicker - Views /---------------/*/

.wf-datepicker > .views {
	height: 200px;
}

.wf-datepicker > .views > .period-view a {
	color : #6f7b8a;
}

.wf-datepicker > .views > .period-view td {
	position: relative; /*alleen vanwege de .today:before positionering*/
	text-align: center;
	width: 25%;
	height: 1.5em;
	border-radius: 4px;
	cursor: default;
	white-space: nowrap;
}

.wf-datepicker > .views > .period-view,
.wf-datepicker > .views > .period-view > table {
	height: 100%;
}

.wf-datepicker > .views > .period-view > table {
	width: 100%;
	empty-cells: show;
	border-collapse: collapse;
}

.wf-datepicker > .views > .period-view > table > tbody {
	background-color: white;
}

.wf-datepicker > .views > .period-view .today:before {
	position: absolute;
	content: " ";
	/*Deze specifieke hoogte zorgt voor een acceptabel resultaat in IE11, zonder hoogte lukt dat niet.*/
	height: 23px;
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
	border: 1px solid #303030;
	border-radius: 4px;
}

.wf-datepicker > .views > .period-view .today.current:before {
	border-color: white;
}

.wf-datepicker > .views > .period-view .weekend {
	background-color: #F8F8F8;
	border-radius: 0px;
}

.wf-datepicker > .views > .period-view .current {
	background-color: #2877A8;
	border-radius: 4px;
}

.wf-datepicker > .views > .period-view .current a{
	color: white;
}

.wf-datepicker > .views > .period-view .disabled a,
.wf-datepicker > .views > .period-view .previous-period a,
.wf-datepicker > .views > .period-view .next-period a {
	color: #d0d3d8;
}

.wf-datepicker > .views > .period-view .disabled a {
	cursor: default;
}

.wf-datepicker:not(.wf-datepicker-disabled) > .views > .period-view .data td:not(.disabled):hover {
	background-color: #F0F0F0;
	cursor: pointer;
}

.wf-datepicker:not(.wf-datepicker-disabled) > .views > .period-view .data td.current:hover {
	background-color: #3498DB;
}

/*/-----------------------/ DatePicker - Day View /---------------/*/

.wf-datepicker > .views > .period-view.days td {
	width: 12.5%;
}

.wf-datepicker > .views > .period-view.days .data td:first-child {
	border-right: 1px solid #000000de;
}

/*/-----------------------/ DatePicker - Week View /---------------/*/

.wf-datepicker > .views > .period-view.weeks td {
	width: 12.5%;
	border-radius: 0px;
}

.wf-datepicker > .views > .period-view.weeks .data td:first-child {
	border-right: 1px solid #000000de;
}

/*In weekmodus highlighten we heel de weekrij*/
.wf-datepicker > .views > .period-view.weeks .data:hover td:not(.disabled) {
	background-color: #F0F0F0;
}

.wf-datepicker:not(.wf-datepicker-disabled) > .views > .period-view.weeks .data:hover td.current {
	background-color: #3498DB;
}

/* WF Resource "WFWidgets.Progression" (6EDB::1987::6EDB::661) */

.wf-progression {
	display: block;
	white-space: nowrap;
	margin-bottom: 8px;
}

.wf-progression .bar {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 1.8em;

	vertical-align: top;
	text-align: center;
	overflow: hidden;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 1px solid #CCCCCC;

	background-color: white;
	color: black;
}

.wf-progression .mask {
	position: absolute;
	top: 0px;
	left: -100%;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.wf-progression.continuous .mask,
.wf-progression.failed .mask {
	left: 0
}

.wf-progression .progress {
	position: absolute;
	top: 0px;
	left: 100%;
	width: 100%;
	height: 100%;

	background-color: #305080;
	color: white;
}

.wf-progression.continuous .progress {
	left: -50px;
	width: 200%;
	background-color: #305080;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%,	transparent);
	background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-size: 50px 50px;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: continuous;
	animation-name: continuous;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

@-webkit-keyframes continuous {from {left: -50px;} to {left: 0px;}}
@keyframes continuous {from {left: -50px;} to {left: 0px;}}

.wf-progression.failed .progress {
	left: 0;
	background-color: #800000;
}

.wf-progression .percentage {
	display: inline-block;
	line-height: 1.7em;
	font-weight: bold;
}

.wf-progression.continuous .percentage {
	display: none;
}

.wf-progression.cancellable {
	padding-right: 2.2em; /* 1.8em + 0.4em */
}

.wf-progression .cancel {
	display: none;

	text-decoration:none;
	margin: 0;
	outline: none;
	border: 0;
	background-color: #D0D0D0;
	color: white;
	font-weight: bold;
	padding: 0;
	width: 1.125em;	/* 1.8em / 160% */
	height: 1.125em;
	line-height: 1em;
	font-size: 160%;
	margin-left: 0.25em; /* 0.4em / 160% */
	text-align: center;
}

.wf-progression.cancellable .cancel {
	display: inline-block;
}

.wf-progression .cancel:hover {
	background-color: red;
}

.wf-progression .message {
	display: block;
	text-align: center;
}


/* WF Resource "WFWidgets.Stack" (6EDB::1987::6EDB::652) */

.wf-stack {
	box-sizing:border-box;
}
.wf-stack.vflex {
	height: 100%;
}
.wf-stack-flex {
	margin-bottom: 6px;	/* only margin-bottom will be handled properly by the code */
}
/* semi-zichtbaar houden i.v.m. berekeningen afmetingen sub-controls */
.wf-stack-flex.wf-stack-hidden {
	margin-bottom: 0px;
}
.wf-stack-flex.last {
	margin-bottom: 0px;
}
.wf-stack-flex.vflex {
	position: relative;
	box-sizing:content-box;
}
.wf-stack-flex>.wf-stack-content {
	padding-bottom: 0.1px;	/* stop propagation of outer margins on elements inside this one */
}
.wf-stack-flex.vflex>.wf-stack-content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding-bottom: 0px;	/* not needed as position:absolute stops the margin-propagation */
}

/* WF Resource "WFWidgets.Line" (6EDB::1987::6EDB::651) */

.wf-line {
	display:flex;
	flex-direction:row;
}
.wf-line.vflex {
	height: 100%;
}
/* semi-zichtbaar houden i.v.m. berekeningen afmetingen sub-controls (#138705/#124094) */
.wf-line-hidden {
	height: 0;
	overflow: hidden;
}
.hbox-cell {
	padding-right: 4px;
}
.hbox-cell.last {
	padding-right:0px;
}
.hbox-cell.flex:not(.hbox-cell-hidden) {
	flex-grow: 1;
	flex-shrink: 1;
	overflow: auto;
}
/* semi-zichtbaar houden i.v.m. berekeningen afmetingen sub-controls (#124094) */
.hbox-cell-hidden {
	width: 0;
/*	height: 0;*/ /* levert wazige layout-problemen op (#365687) */
	overflow: hidden;
	padding-right: 0;
}


/* WF Resource "WFWidgets.Layout" (6EDB::1987::6EDB::654) */

.wf-layout.vflex {
	height: 100%;
}
.wf-layout > span {
	box-sizing: content-box;
}

/* WF Resource "WFWidgets.Frame" (6EDB::1987::6EDB::653) */

.wf-frame.vflex {
	height: 100%;
}

/* WF Resource "WFWidgets.Slider" (6EDB::1987::6EDB::657) */

/*
div.wf-slider[.discrete]
  div.slider
    div.total
    div.overlay
      div.progress
      div.handle
*/

.wf-slider {
	height: 2em;
	white-space: nowrap;
	padding-left: 0.5em;
	padding-right: 0.5em;
	cursor: pointer;
	margin-bottom: 4px;
}
.wf-slider .slider {
	position: relative;
	height: 100%;
}
.wf-slider .overlay {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	white-space: nowrap;
}
.wf-slider .overlay .progress {
	display: inline-block;
	width: 0%;
	height: 100%;
	overflow: hidden;
	transition: width 0.1s ease;
}
.wf-slider .overlay .handle {
	display: inline-block;
	border: 1px solid white;
	box-sizing: border-box;
	height: 100%;
	width: 0.80em;
	margin-left: -0.40em;
	border-radius: 3px;
	background-color: #C0C0C0;
	position:relative;
}

.wf-slider .bar {
	height: 0.5em;
	box-sizing: border-box;
	position: relative;
	top: 0.75em;
	border-radius: 3px;
	background-color: #D0D0D0;
}
.wf-slider .overlay .bar {
	background-color: #305080;
}

.wf-slider.discrete {
	display: inline-block;
	height: auto;
	padding: 0;
}
.wf-slider.discrete .overlay .handle {
	display: none;
}
.wf-slider.discrete i.icon {
	font-size: 2em;
	padding-left: 5px;
	padding-right: 5px;
	color: #808080;
}
.wf-slider.discrete.disabled i.icon {
	color: #CCCCCC;
}
.wf-slider.discrete .progress i.icon {
	color: yellow;
	text-shadow: 0px 0px 1px black;
}


/* WF Resource "WFWidgets.Annotations" (6EDB::1987::6EDB::646) */

.wf-annotations {
	display: grid;
  	grid-template-columns: 1fr auto;
	white-space: nowrap;
	box-sizing: border-box;
	x-border: 1px solid #CCCCCC;
	height: 500px;
	box-sizing: border-box;
}
.wf-annotations.vflex {
	height: 100%;
}
.wf-annotations.disabled {
	padding-right: 0px;
}
.wf-annotations > .panel {
	display: inline-block;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color:#E0E0E0;
	box-shadow: inset 0px 0px 2px rgba(0,0,0,0.2);
	vertical-align: top;
	text-align: center;
	box-sizing: border-box;
	border: 1px solid #CCCCCC;
}
.wf-annotations > .tools {
	display: inline-block;
	min-width: 40px;
	box-sizing: border-box;
	border-left: 1px solid #CCCCCC;
	height: 100%;
	vertical-align: top;
	padding-left: 4px;
	padding-right: 4px;
}
.wf-annotations.disabled > .tools {
	display: none;
}

/*Old styling, remove when Switch 'US 32.538 Annotatie' (6EDB::2944::6EDB::6007 is no longer relevant*/
.wf-annotations > .tools .action {
	display: flex;
	width: 32px;
	height: 32px;
	border: 1px solid #CCCCCC;
	box-shadow: 1px 1xp 2px rgba(0,0,0,0.5);
	text-align: center;
	line-height: 32px;
	margin-bottom: 4px;
	background-color: white;
	color #595959;
	cursor: pointer;
	justify-content: center;
	align-items: center;
}

.wf-annotations > .tools > .action.disabled {
	box-shadow: none;
	color: #CCCCCC;
	cursor: default;
}

.wf-annotations > .tools > .action.disabled > img {
	opacity: 0.3;
}

.wf-annotations > .tools > .action.active {
	box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
	background-color: #F2B21B;
	border: 1px solid #AD8016;
	color: #5B430B;
}

/*New styling, Switch 'US 32.538 Annotatie' (6EDB::2944::6EDB::6007)*/
.wf-annotations > .tools .action-container {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wf-annotations > .tools > .action-container label {
	display: flex;
}

.wf-annotations > .tools > .action-container .action {
	display: flex;	
}

.wf-annotations > .tools > .action-container > .action {
	display: flex;
	width: 32px;
	height: 32px;
	border: 1px solid #CCCCCC;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	text-align: center;
	line-height: 32px;
	margin-bottom: 4px;
	background-color: white;
	color: #595959;
	cursor: pointer;
	justify-content: center;
	align-items: center;
}
.wf-annotations > .tools > .action-container > .action.disabled {
	box-shadow: none;
	color: #CCCCCC;
	cursor: default;
}
.wf-annotations > .tools > .action-container > .action.disabled > img {
	opacity: 0.3;
}
.wf-annotations > .tools > .action-container > .action.active {
	box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
	background-color: #F2B21B;
	border: 1px solid #AD8016;
	color: #5B430B;
}
.wf-annotations > .panel > .info {
	position:relative;
	font-size:12pt;
	top:50%;
	margin-top:-6pt;
	line-height:12pt;
	color:#595959;
	text-shadow:1px 1px white;
}
.wf-annotations > .panel > .content {
	display: inline-block;
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
	margin: 10px;
}
.wf-annotations > .panel > .content > .source > img {
	display: block;
}
.wf-annotations > .panel > .content > canvas {
	position: absolute;
	top: 0px;
	left: 0px;
}


/* WF Resource "WFWidgets.AutoSuggest" (6EDB::1987::6EDB::633) */


/* TODO: Komt niet overeen met een specifieke AutoSuggest widget. De autosuggest bestaat uit onderdelen zoals de AutoMenu, AutoPopup en AutoInput widgets. Hadden die los gestyled moeten worden of is zo combineren goed genoeg? */

.wf-autosuggest-title {
	padding: 3px;
	padding-top: 8px;
	border-bottom: 1px dotted #808080;
	font-weight: bold;
}

.wf-autosuggest-noitems,
.wf-autosuggest-incomplete,
.wf-autosuggest-loading {
	padding: 3px;
	color: #808080;
}

.wf-autosuggest-loading img {
	margin-right: 5px;
	vertical-align: top;
}
.wf-autosuggest-dropdown {
	border: 0px;
	background-color: transparent;
	box-shadow: none;
}

.wf-autosuggest-popup {
	border: 1px solid #808080;
	background-color: white;
	box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
	min-width: 250px;
	max-height: 400px;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

.wf-autosuggest-menuitems {
	list-style-type: none;
	padding: 3px; /*0 2px 0 2px;*/
	margin: 0;
}

.wf-autosuggest-menuitems li {
	white-space: nowrap;
	overflow: hidden;
}

.wf-autosuggest-menuitems li.cursor {
	background-color: #3399FF;
	color: white;
}

.wf-autosuggest-group .wfi-control-control {
	border: 1px solid #CCC;
	box-sizing: border-box;
	margin-bottom: 7px;
	min-height: 28px;
}

.wf-autosuggest-group .wfi-control-control.wf-illegal {
	border-color: #D43F39;
}

.wf-autosuggest-group .wfi-control-control.wf-suspect {
	border-color: #EAA211;
}

.wf-autosuggest-group .wf-input input {
	border: none;
	height: 2em;
}

.wf-autosuggest-group .wf-input {
	padding-bottom: 0;
}

.wf-autosuggest-group .wf-input-buttons {
	vertical-align: top;
}

.wf-autosuggest-group .wf-input-button {
	border-top: none;
	border-right: none;
	margin-bottom: -1px;
	height: 28px;
}

.wf-autosuggest-group .wf-illegal .wf-input-button,
.wf-autosuggest-group .wf-suspect .wf-input-button {
	margin-bottom: 0px;
}


/* WF Resource "WFWidgets.Checkbox" (6EDB::1987::6EDB::640) */


/* TODO: heeft stijlregels beginnend met ".wf-control" en ".wf-control-prefix". Is dat wel zuiver? */
/* TODO: heeft een placeholder voor "fancy checkboxes" (Style block 'Fancy checkboxes and radiobuttons' (6EDB::3256::4A6499::649)). Is dat iets wat we generiek aan willen zetten? */

.wf-control .wf-checkbox {
	display: inline-block;
	padding: 4px 0px;
	margin: 2px 0;
}
.wf-control-prefix .wf-checkbox {
	display: inline;
	padding: 0;
	margin: 0;
}

/* #175020: Hide extra label element that allows for "fancy checkboxes". Override in fancy checkbox styling */
.wf-checkbox label {
	display: none;
}

.wf-control-prefix {
	margin:0px 5px 0px 0px;
	padding:2px 0px 2px 0px;	/* top/bottom via padding i.p.v. margin i.v.m. vflex */
}


/* WF Resource "WFWidgets.FileUpload" (6EDB::1987::6EDB::648) */

.wf-upload form {
	display: inline-block;
}

/*************Button styling**************/

.wf-upload-button {
	white-space: nowrap;
	box-sizing: border-box;
}

.wf-upload-button.flex .wf-upload-primary {
	min-width: 125px;
}

.wf-upload-button.flex .wf-upload-primary {
	width: 100%;
	min-width: 0px;
}

.wf-upload-button .widgets-button.wf-upload-primary {
	white-space: nowrap;
	text-align: center;
}

.wf-upload-button .wf-upload-secondary {
	width: auto;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left-width: 0px;
	min-width: 32px;
	padding-right: 0px;
	padding-left: 0px;
}

.wf-upload-button .wf-upload-hasnext {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-right: 0px;
}

.wf-upload-button img {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

.wf-upload-button .upload-label {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
}

.wf-upload-button.flex .upload-label {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
}

.wf-upload-button.flex img + .upload-label {
	max-width: calc(100% - 20px);
}


.wf-upload-button label.wf-upload-secondary.has-sublabel > i.icon,
.wf-upload-button label.wf-upload-secondary.has-sublabel > img {
	display: none;
}

.wf-upload-button i.icon {
	color: #404040;
	width: 16px;
	height: 16px;
}

.wf-upload-button .googledrive-new .new-label::after {
	content: "\f0d7";
	font-family: "Font Awesome 6 Pro Solid";
	margin-left: 5px;
	margin-right: 5px;
	color: #808080;
}

.wf-upload-button .googledrive-new {
	width: auto;
	min-width: 32px;
	margin-left: 5px;
}
.wf-upload-button .googledrive-new .new-label {
	margin-left: 5px;
}

.wf-upload-button .wf-upload-onedrive img {
	opacity: 0.7;
}


.wf-upload-button .widgets-button {
	box-sizing: border-box;
}
.wf-upload-button.flex .widgets-button {
	margin-right: 0px;
}

.wf-upload-button label > span {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
}

.wf-upload-button label.has-sublabel > span {
	padding-left: 0px;
	padding-right: 0px;
	width: calc(100% - 40px);
}

.wf-upload-button label.has-sublabel .upload-sublabel {
	display: inline-block;
}

.wf-upload-button label .upload-sublabel {
	display: none;
	width: 35px;
	margin-left: 5px;
}

/********Drag-and-drop styling***********/

.wf-upload-dragdrop {
	min-height: 150px;	/*zorgt ervoor dat-ie groeit als de labels gaan wrappen*/
	padding: 5px;
	box-sizing: border-box;
}
.wf-upload-dragdrop form {
	height: 100%;
	width: 100%;
	box-sizing: border-box;
}
.wf-upload-dragdrop form label {
	margin: 0px;
	height: 100%;
}

.wf-upload-dragzone {
	/**Display: block will result in a small dropzone in IE10 and IE11**/
	display: inline-block;			
	width: 100%;
	box-sizing: border-box;
	border: 1px dashed #BBB;
	padding: 5px;	
	margin: 5px 0 5px 0;
	text-align: center;
	cursor: pointer;
}
.wf-upload-dragzone.wf-upload-disabled {
	cursor: default;
}

.wf-upload-dragzone,
.wf-upload-dragzone.wf-upload-disabled.dragging,
.wf-upload-dragzone.wf-upload-disabled:hover {
	background-color: transparent;
}

.wf-upload-dragzone.dragging,
.wf-upload-dragzone:hover {
	background-color: #F3F8FE;
}

.wf-upload-dragzone .dragzone-icon {
	display: inline-block;
	line-height: 60px;
	height: 60px;
	width: 60px;
}

.wf-upload-dragzone .dragzone-icon i {
	font-size: 30pt;
	vertical-align: middle;
	color: #AAB2BD;
}

.wf-upload-dragzone .upload-label {
	font-size: 15pt;
	font-weight: 600;
	color: #B9BFC8;
	padding: 5px 0;
	white-space: normal;
}

.wf-upload-dragzone .upload-sublabel {
	margin-bottom: 10px;
}

.wf-upload-dragzone .upload-progress,
.wf-upload-dragzone .upload-sublabel {
	font-weight: 600;
	color: #8F8F8F;
	white-space: normal;
}


/* WF Resource "WFWidgets.Popup" (6EDB::1987::6EDB::645) */

.wf-popup {
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(128, 128, 128);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
}

.wf-popup-placeholder {
	min-width: 60px;
	min-height: 25px;
	text-align: center;
	line-height: 25px;
	padding: 2px 5px;
}

/* WF Resource "WFWidgets.Toolbar" (6EDB::1987::6EDB::643) */

.wf-toolbar {
	display: inline-block;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: top;
	box-sizing: border-box;
	padding-top: 1px;
	padding-bottom: 1px;
}

.wf-toolbar-inner {
	display: table;
	width: 100%;
	white-space: nowrap;
}

.wf-toolbar-inner-left {
	display: table-cell;
	padding-left:5px;
	/*width: 100%; #111.237 */
}

.wf-toolbar-inner-right {
	display: table-cell;
	text-align: right;
}

a.wf-toolbar-overflow-button,
a.wf-toolbar-overflow-button:hover {
	display: inline-block;
	min-width: 16px;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
}

.wf-iconsize-32 a.wf-toolbar-overflow-button {
	font-size: 200%;
	line-height: 32px;
	min-width: 24px;
}

.wf-toolbar .wf-cmditem,
.wf-toolbar .wf-cmditem:hover {
	border: 0px;
	padding: 0 3px;
}

.wf-toolbar .wf-cmditem > span:not(:first-child) {
	padding-left: 3px;
}

.wf-toolbar .wf-cmditem-icon img {
	padding: 1px;
	vertical-align: top;
}

/* WF Resource "WFWidgets.MenuSet" (6EDB::1987::6EDB::644) */

.wf-menuset {
	display: inline-block;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	border: 1px solid #ddd;
	vertical-align: top;
	box-sizing: border-box;
}

/* WF Resource "WFWidgets.CommandItem" (6EDB::1987::6EDB::647) */

/* CMDITEM */

.wf-cmditem {
    background-color: rgb (255, 255, 255);
    box-sizing: border-box;
    border: 1px solid rgb(20, 20, 20);
    outline-offset: -1px;
    color: rgb(20, 20, 20);
    text-decoration: none;
    white-space: nowrap;
    padding: 0 8px;
}
a.wf-cmditem:hover {
    border: 1px solid rgb(194, 224, 255);
    outline: 1px solid rgb(51, 153, 255);
    outline-offset: -1px;
    text-decoration: none;
    background-color: #C2E0FF;
}

.wf-cmditem > .wf-cmditem-icon,
.wf-cmditem > .wf-cmditem-label,
.wf-cmditem > .wf-cmditem-dropdown {
    text-align: center;
    display: inline-block;
}

/* LINK LARGE ICON */

.wf-iconsize-32 a.wf-cmditem,
.wf-iconsize-32 a.wf-cmditem > .wf-cmditem-icon,
.wf-iconsize-32 a.wf-cmditem > .wf-cmditem-label {
	line-height: 32px;
}

.wf-iconsize-32 a.wf-cmditem .wf-cmditem-icon i {
	font-size: 200%;
	line-height: 32px;
	min-width: 32px;
}

.wf-iconsize-32 .wf-cmditem img {
	padding: 0;
}
.wf-iconsize-32 .wf-cmditem .wf-cmditem-dropdown i {
	vertical-align: middle;
}
.wf-iconsize-32 a.wf-cmditem i, .wf-iconsize-32 a.wf-cmditem img {
	vertical-align: top;
}

/* CMDITEM SELECTORS */

a.wf-cmditem.wf-selector-disabled {
	cursor: default;
	opacity: 0.5;
}

a.wf-cmditem.wf-selector-disabled:hover {
	outline: 1px solid transparent;
	background:transparent;
}

a.wf-cmditem.wf-selector-checked {
	outline: 1px solid #3399FF;
}

/* POPUP(MENU) */

.wf-popup a.wf-cmditem,
.wf-popupmenu a.wf-cmditem {
	text-decoration: none;
	color: rgb(20,20, 20);
}

.wf-popup .wf-cmditem,
.wf-popupmenu .wf-cmditem {
	display: block;
	padding-left: 32px;
	padding-right: 16px;
	position: relative; 
	min-height: 2em;
	box-sizing: border-box;
	min-width: 12em;
	border: none;
}

.wf-popup .wf-cmditem:hover,
.wf-popupmenu .wf-cmditem:hover {
	background-color: #C2E0FF;
	outline: 1px solid #3399FF;
	border: none;
}

.wf-popup .wf-cmditem .wf-cmditem-label,
.wf-popupmenu .wf-cmditem .wf-cmditem-label {
	display: inline-block;
	height: 100%;
	padding: 0 8px;
	line-height: 2em;
	border-left: 1px solid #bbb;
	box-sizing: border-box;
}

.wf-popup .wf-cmditem .wf-cmditem-icon,
.wf-popupmenu .wf-cmditem .wf-cmditem-icon {
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	width: 32px;
	height:100%;
	text-align: center;
	vertical-align: middle;
	line-height: 2em;
}

.wf-cmditem-icon img {
    padding-top: 4px;
    vertical-align: top;
}

.wf-popup .wf-cmditem .wf-cmditem-dropdown,
.wf-popupmenu .wf-cmditem .wf-cmditem-dropdown {
	position: absolute;
	top:0;
	right: 0;
	bottom: 0;
	width: 16px;
	line-height: 2em;
	text-align: center;
}

.wf-popup .wf-cmditem-separator,
.wf-popupmenu .wf-cmditem-separator {
	display: block;
	height: 1px;
	background-color: #bbb;
	margin-left:32px;
}


/* WF Resource "WFWidgets.CommandItemSeparator" (6EDB::1987::6EDB::665) */

.wf-cmditem-separator {
	background-color: #d8d8d8;
}

.wf-horizontal-align .wf-cmditem-separator {
	display:inline-block;
	width: 1px;
	margin: 2px;
}

.wf-vertical-align .wf-cmditem-separator {
	display:block;
	height: 1px;
}

/* WF Resource "WFWidgets.CommandItemContainer" (6EDB::1987::6EDB::743) */

.wf-cmditem-container.wf-horizontal-align {
	white-space: nowrap;
}

.wf-cmditem-container.wf-horizontal-align,
.wf-cmditem-container.wf-horizontal-align > a.wf-cmditem,
.wf-cmditem-container.wf-horizontal-align > div.wf-cmditem {
	display: inline-block;
}

.wf-cmditem-container.wf-vertical-align,
.wf-cmditem-container.wf-vertical-align > a.wf-cmditem,
.wf-cmditem-container.wf-vertical-align > div.wf-cmditem {
	display: block;
}

/* WF Resource "WFWidgets.AccordionMenu" (6EDB::1987::6EDB::662) */

.wf-accordionmenu {
	outline: 0px;
}

.wf-accordionmenu.vflex {
	height: 100%;
	overflow: auto;
}
.wf-accordionmenu ul.content {
	padding: 0;
	margin: 0;
}
.wf-accordionmenu li.level {
	list-style: none;	
}

.wf-accordionmenu .title {
	white-space: nowrap;
	cursor: pointer;
	min-height: 2em;
	line-height: 2em;
	x-border-bottom: 1px solid white;
	margin-bottom: 1px;
}
.wf-accordionmenu .title:last-child {
	margin-bottom: 0px;
}
.wf-accordionmenu .title:hover {
	background-color: #EEEEFF;
}

.wf-accordionmenu .title>.label {
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 0.5em;
	box-sizing: border-box;
	line-height: 1em;
	vertical-align: top;
}
.wf-accordionmenu .title>.state {
	display: inline-block;
	height: 100%;
	width: 24px;
	position: relative;
	text-align: center;	
	vertical-align: top;
}
.wf-accordionmenu .title>.state:after {
	font-family: 'Font Awesome 6 Pro Solid';
	content: '\f105';
	opacity: 0.2;
}
.wf-accordionmenu .title:hover>.state:after {
	opacity: 1.0;
}
.wf-accordionmenu .title>.state.expanded {
}
.wf-accordionmenu .title>.state.expanded:after {
	font-family: 'Font Awesome 6 Pro Solid';
	content: '\f107';
	opacity: 1.0;
}
.wf-accordionmenu .title.hasstate {
	padding-right: 24px;
}

.wf-accordionmenu ul.content {
	overflow: hidden;
	padding-left: 8px;
}
.wf-accordionmenu div.level-0>ul.content {
	padding-left: 0px;
}
.wf-accordionmenu li.level.active>.title {
	background-color: #FFF3B2;
	color: black;
}
.wf-accordionmenu li.level.selected>.title {
	background-color: gold;
}



.wf-accordionmenu li.level-1>.title {
	background-color: #305080;
	color: white;
	padding-top: 0px;
	padding-bottom: 0px;
	min-height: 3em;
	line-height: 3em;
}
.wf-accordionmenu li.level-1>.title>.state:after {
	opacity: 1;
}
.wf-accordionmenu li.level-1>.title:hover {
	color: gold;
	cursor: pointer;
	background-color: #305080;
}
.wf-accordionmenu li.level-1>.title>.label {
	line-height: 2em;
}


/* WF Resource "WFWidgets.Display" (6EDB::1987::6EDB::637) */

.wf-display {
	display: block;
	white-space: normal;
	padding-bottom:6px;
}
.wf-display.vflex {
	height: 100%;
	overflow: auto;
}

.wf-display-input {
	margin: 1px;
	padding: 4px 0px 4px 0px;
}

.wf-display-simple {
	margin: 0;
	padding: 0;
}

.wf-display.wf-display-border-none {
	border-style: none;
	border-width: 0px;
	border-color: #ccc;
}

.wf-display.wf-display-border-solid {
	border-style: solid;
	border-width: 1px;
	border-color: #ccc;
	padding: 4px;
	border-radius: 2px;
	box-sizing: border-box;
}

.wf-display.wf-display-border-inset {
	border-style: inset;
	border-width: 1px;
	border-color: #ccc;
	padding: 4px;
	border-radius: 2px;
	box-sizing: border-box;
}

/* WF Resource "WFWidgets.TagField" (6EDB::1987::6EDB::649) */

.wf-tagfield {
	padding: 5px 5px 0px 0px;	
	white-space: normal;
}

.wf-tag {
	display: inline-block;
	margin: 0px 0px 5px 5px;
	background-color: #f5f5f5;
	border:1px solid #DDD;
	border-radius:2px;
	white-space: nowrap;
	position: relative;
}

.wf-tag.deletable {
	padding-right: 18px;
}

.wf-tagfield-disabled .wf-tag {
	padding-right: 0;
}

.wf-tag .label {
	display: inline-block;
	padding: 2px 5px;
	cursor: default;
	white-space: normal;
	line-height: 1.5em;
}

.wf-tagfield.zoomable .wf-tag .label {
	cursor: pointer;
}

.wf-tag:hover {
	border:1px solid #999999;
}

.wf-tag .delete{
	position: absolute;
	top: 0px;
	bottom: 0px;	
	right: 0px;	
	text-align: center;
	font-size: 18px;
}

.wf-tag .delete a {
	color: #a6a6a6;
	display: inline-block;
	width: 18px;
	height: 100%;
	line-height: 24px;
	max-height: 1.6em;
	text-decoration: none;
}

.wf-tagfield-disabled .wf-tag .delete{ 
	display: none;
}

.wf-tag .delete a:hover {
	text-decoration: none;
	color: #666;
}

.wf-tagfield-list {
	padding: 0px;
}

.wf-tagfield-list .wf-tag {
	padding-right: 0px;
	margin:0px 2px 2px 0px;
}

.wf-tagfield-list .wf-tag:last-child {
	margin-right: 0px;
}

.wf-tagfield-list .wf-tag.deletable {
	padding-right: 18px;
}

.wf-tagfield-list .wf-tag .delete a {
	line-height: 1.3em;
	vertical-align: top;
}

.wf-tagfield-list .wf-tag:hover {
	background-color: #eee;
}

.wf-tagfield-list .wf-tag.stacked:last-child {
	margin-bottom: 0px;
}

.wf-tagfield-list .wf-tag > .label {
	padding: 2px 5px;
}

.wf-tagfield-list.stacked .wf-tag {
	display: block;
	border:0px;
	background:transparent;
	margin-bottom: 2px;
	margin-right:0px;
	padding-left:0px;
}

.wf-tagfield-list.stacked {
	padding-top:4px;
}

.wf-tagfield-list.stacked .wf-tag:hover {
	border:0px;
}

.wf-tagfield-list.stacked .wf-tag > .label {
	padding:0px 0px 2px 0px;
}

.wf-itemset .widgets-button {
	margin-top:2px;
}

.wf-itemset .widgets-button.button-small {
	font-size:11px;
	line-height:18px;
	padding:1px 5px;
	border:1px solid #DDD;
}

/* WF Resource "WFWidgets.TreeView" (6EDB::1987::6EDB::635) */

.wf-treeview {
	outline: none;
	overflow: auto;
}
.wf-treeview.vflex {
	height: 100%;
}
.wf-treeview .treeitem {
	display: block;
	padding-left: 20px;
	background: transparent url("../../images/treeview.gif") -100px 0px repeat-y;
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
}
.wf-treeview .treeitem .label {
	display: inline-block;
	margin-left: -18px;
	text-decoration: none;
	padding: 1px 2px 1px 2px;
	color: black;
	outline: none;
}
.wf-treeview .treeitem .label img {
	border: 0px;
	width: 16px;
	height: 16px;
	vertical-align: top;
	margin-top: 2px;
	margin-right: 4px;
}
.wf-treeview .treelast {
	background: transparent url("../../images/treeview.gif") -100px -8px no-repeat;
}
.wf-treeview .treeitem .icon {
	display: inline-block;
	position: relative;
	left: -20px;
	width: 20px;
	height: 20px;
	background: transparent url("../../images/treeview.gif") -40px 0px no-repeat;
	vertical-align: top;
}
.wf-treeview .treecollapsed>.icon {
	background: transparent url("../../images/treeview.gif") -80px 0px no-repeat;
	cursor: pointer;
}
.wf-treeview .treecollapsed>.treeitem {
	display: none;
}
.wf-treeview .treeexpanded>.icon {
	background: transparent url("../../images/treeview.gif") -60px 0px no-repeat;
	cursor: pointer;
}
.wf-treeview .treeselected>.label {
	background-color: #3399FF;
	color: white;
}
.wf-treeview .treefocused>.label {
	outline: 1px dotted gray;
}
.wf-treeview .treeloading>.icon {
	width: 20px;
	height: 20px;
	background: transparent url("../../images/treeloading.gif") 0px 0px no-repeat;
}
.wf-treeview .treeroot {
	padding: 0;
	background: transparent;
	display: inline-block;
}
.wf-treeview .treeroot>.icon {
	background: transparent;
}


/* WF Resource "WFWidgets.FramedContent" (6EDB::1987::6EDB::656) */

.ipad .wf-framedcontent-control,
.iphone .wf-framedcontent-control {
	overflow: inherit; /* 90313 */
}

.wf-framedcontent-component.vflex {
	height: 100%;
}

/* #305720: Geen padding/margin/border op de iframe i.v.m. size-berekeningen */
.wf-framedcontent {
	padding: 0;
	margin: 0;
	border: none;
}
.wf-framedcontent.vflex {
	height: 100%;
}

/* WF Resource "WFWidgets.ArrayOfControls" (6EDB::1987::6EDB::684) */

.widgets-arrayofcontrols.vflex {
	height: 100%;
}

.widgets-arrayofcontrols.horizontal {
	white-space: normal;
}

.widgets-arrayofcontrols.horizontal.nowrap {
	white-space: nowrap;
}

.widgets-arrayofcontrols.horizontal > .horizontal-container {
	display: inline-block;
	min-width: 250px;
	padding: 10px;
	white-space: nowrap;
	vertical-align: top;
}

/* WF Resource "WFWidgets.Overlay" (6EDB::1987::6EDB::726) */

.wf-overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;

	z-index: 1;
	transition: width 0.2s, height 0.2s;
}

.wf-overlay:not(.left) {
	right: 0;
}
.wf-overlay:not(.right) {
	left: 0;
}
.wf-overlay.left:not(.active),
.wf-overlay.right:not(.active) {
	width: 0;
}
.wf-overlay:not(.top) {
	bottom: 0;
}
.wf-overlay:not(.bottom) {
	top: 0;
}
.wf-overlay.top:not(.active),
.wf-overlay.bottom:not(.active) {
	height: 0;
}

.wf-overlay>.wf-overlay-content {
	position: absolute;
	width: 100vw;
	height: 100vh;
	overflow: auto;
}
.wf-overlay.left>.wf-overlay-content {
	right: 0;
}
.wf-overlay.right>.wf-overlay-content {
	left: 0;
}
.wf-overlay.top>.wf-overlay-content {
	bottom: 0;
}
.wf-overlay.bottom>.wf-overlay-content {
	top: 0;
}

/* WF Resource "WFWidgets.MapQuest" (6EDB::1987::6EDB::731) */

/** MAPQUEST CONTROL **/
.wf-mapquest {
	width: 100%;
	height: 500px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.wf-mapquest.vflex {
	height: 100%;
}

.wf-mapquest > .mq-grid-container {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template: 'map toggle sidebar';
	grid-template-columns: 1fr auto auto;
	overflow: hidden;
}

.mq-grid-container > .mapQuestContainer {
	grid-area: map;
	height: 100%;
	z-index: 1;
}

.mq-grid-container > .sidebar {
	grid-area: sidebar;
	height: 100%;
	width: 260px;
	overflow: auto;
	box-sizing: border-box;
	/*    transition: width 0.2s ease-in-out;*/
}

.mq-grid-container > .sidebar.collapsed {
	width: 0px;
	padding: 0px;
	overflow: hidden;
	border: none;
}

.mq-grid-container > .sidebar.collapsed > .backdrop {
	width: 0px;
	padding: 0px;
	overflow: hidden;
	border: none;
}

.mq-grid-container > .sidebar.collapsed > .routeinfo {
	width: 0px;
	padding: 0px;
	overflow: hidden;
	border: none;
}

.mq-grid-container > .sidebar > .backdrop {
	display: inline-block;
	position: absolute;
	z-index: 2;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
	height: 100%;
	width: 260px;
	box-sizing: border-box;
	overflow: hidden;
	clip-path: inset(1px 0px 0px -15px)
	/*    transition: width 0.2s ease-in-out;*/
}

.mq-grid-container > .sidebar > .routeinfo {
	width: 260px;
	padding: 5px;
	height: 100%;
	z-index: 4;
	position: absolute;
	background-color: white;
	display: inline-block;
	/*hier heb je de border!*/
	box-sizing: border-box;
	overflow: auto;
	/*    transition: width 0.2s ease-in-out;*/
}

.mq-grid-container > .sidebar > .routeinfo {
	scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.2);
	scrollbar-width: thin;
}

.mq-grid-container > .routeinfo::-webkit-scrollbar {
	width: 8px !important;
	height: 8px !important;
}

.mq-grid-container > .routeinfo::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
}

.mq-grid-container > .routeinfo::-webkit-scrollbar-track {
	background-color: rgba(255, 255, 255, 0.2);
}

.mq-grid-container > .toggle {
	grid-area: toggle;
	background-color: lightgray;
	height: 100%;
	cursor: pointer;
	position: relative;
	width: 0px;
	left: 1px;
}

.mq-grid-container > .toggle.collapsed {
	left: 1px;
}

.mq-grid-container > .toggle p {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-100%, -50%);
	display: inline-block;
	width: 26px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background-color: white;
	border-radius: 4px 0px 0px 4px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
	clip-path: inset(-15px 1px -15px -15px);
	z-index: 3;
	font-weight: 900;
}

.mq-grid-container > .toggle i {
	font-family: "Font Awesome 6 Pro Solid";
	font-style: normal;
}

.mq-grid-container > .toggle i:before {
	content: "\f0da";
}

.mq-grid-container > .toggle.collapsed i:before {
	content: "\f0d9";
}

.wf-mapquest > .hidden {
	display: none;
}

.mq-lane-circle {
	box-sizing: border-box;
	border-style: solid;
	border-width: 2px;
	border-radius: 50%;
	height: 10px;
	width: 10px;
}

.mq-lane-linefill {
	flex-grow: 1;
}

.mq-lane-line {
	box-sizing: border-box;
	width: 6px;
	border-style: solid;
	border-width: 0px 2px 0px 0px;
}

.mq-lane {
	width: 10px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
}

.mq-info-part > .mq-info-spacer, .mq-info-part > .mq-info-symbol {
	width: 27px;
	flex-shrink: 0;
	text-align: center;
	margin-left: -3px;
}

.mq-info-part {
	display: flex;
	flex-direction: row;
}

.mq-info-part:not(:last-child) > .mq-info-description {
	border-bottom: 1px solid rgb(230, 230, 230);
	padding-bottom: 4px;
	margin-bottom: 4px;
}

.mq-info-part > .mq-info-description {
	margin-left: 5px;
	flex-grow: 1;
	overflow: auto;
	white-space: normal;
}

.mq-info-description.mq-border-left {
	box-sizing: border-box;
	border-left: 1px solid rgb(230, 230, 230);
	margin: 0px;
	padding: 0px 5px;
}

.mq-info-route {
	box-sizing: border-box;
	background-color: white;
	padding: 5px;
	border-radius: 6px;
	border: 1px solid rgb(200, 200, 200);
}

.mq-info-route:not(:last-child) {
	margin-bottom: 10px;
}

.mq-info-title {
	display: flex;
	flex-direction: row;
}

.mq-info-title > div {
	border-width: 0px 0px 2px 0px;
	border-style: solid;
	flex-grow: 1;
	overflow: hidden;
	white-space: normal;
}

.mq-lane-top {
	height: 5px;
}

.mq-info-singles.spacer {
	margin-top: 10px;
}

/* WF Resource "WFWidgets.VirtualScrollbar" (6EDB::1987::6EDB::690) */

.wf-virtualscrollbar {
	width: 100%;
	height: 100%;
	background-color: #F0F0F0;
	vertical-align: top;
	overflow: hidden;
	padding-bottom: 34px;
	box-sizing: border-box;
}
.wf-virtualscrollbar > .wf-vsb-first,
.wf-virtualscrollbar > .wf-vsb-last {
	height: 17px;
	text-align: center;
	line-height: 17px;
}
.wf-virtualscrollbar > .wf-vsb-first:hover,
.wf-virtualscrollbar > .wf-vsb-last:hover {
	background-color: #DADADA;
}
.wf-virtualscrollbar > .wf-vsb-first:active,
.wf-virtualscrollbar > .wf-vsb-last:active {
	background-color: #606060;
}
.wf-virtualscrollbar > .wf-vsb-first:active svg,
.wf-virtualscrollbar > .wf-vsb-last:active svg {
	stroke: white;
}


.wf-virtualscrollbar > .wf-vsb-first {
	top: 0;
	overflow: hidden;
}
.wf-virtualscrollbar > .wf-vsb-first svg,
.wf-virtualscrollbar > .wf-vsb-last svg {
	stroke: #606060;
}
.wf-virtualscrollbar > .wf-vsb-last {
	bottom: 0;
	overflow: hidden;
}

.wf-virtualscrollbar > .wf-vsb-previous,
.wf-virtualscrollbar > .wf-vsb-next {
	position: relative;
	background-color: transparent;
	height: 10%;									/* these two and the .wf-lsb-bar height should add up to 100% */ 
}
.wf-virtualscrollbar > .wf-vsb-previous:active,
.wf-virtualscrollbar > .wf-vsb-next:active {
	background-color: #DADADA;
}

.wf-virtualscrollbar > .wf-vsb-bar {
	background-color: #CDCDCD;
	height: 80%;									/* this and the .wf-lsb-previous and .wf-lsb-next height should add up to 100% */
	position: relative;
	top: 0px;										/* use this to 'shift' it while actively scrolling */
	margin-left: 1px;
	margin-right: 1px;
	transition: top 0.2s ease-out;
}
.wf-virtualscrollbar > .wf-vsb-bar:hover {
	background-color: #A6A6A6;
}
.wf-virtualscrollbar > .wf-vsb-bar:active,
.wf-virtualscrollbar > .wf-vsb-bar-active,
.wf-virtualscrollbar > .wf-vsb-bar-active:hover {
	background-color: #606060;
	transition: none;
}


/* WF Resource "WFWidgets.ListColumn" (6EDB::1987::6EDB::667) */

.wf-listcolumn {
	display: inline-block;
	box-sizing: border-box;
	position: relative;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	outline: none;
	cursor: pointer;
	color: #303030;
	border: 1px solid #CCC;
	line-height: 2em;
}
.wf-listcolumn.lc-right {
	text-align: right;
}
.wf-listcolumn.lc-center {
	text-align: center;
}
.wf-listcolumn.lc-left,
.wf-listcolumn.lc-hasactions {
	text-align: left;
}
.wf-listcolumn.lc-touching,
.wf-listcolumn.lc-resizing {
	border-color: #7AA4C0;
	background-color: #C9E7F7;
}
.wf-listcolumn .lc-label {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;		/* overflow:hidden puts the bottom of the label on the baseline; override */

	padding-left: 4px;
	padding-right: 4px;
}
.wf-listcolumn .lc-resize {
	position: absolute;
	top: 0;
	bottom: 0;
	right: -3px;
	width: 6px;
	cursor: e-resize;
	z-index: 1;
}
.wf-listcolumn > .lc-sort {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	padding-right: 16px;
	cursor: pointer;
}
.wf-listcolumn.lc-hasactions > .lc-sort > .lc-label,
.wf-listcolumn.lc-left > .lc-sort > .lc-label {
	width: auto;
	max-width: 100%;
}
.wf-listcolumn .lc-sort .lc-sort-icon:after {
	vertical-align: middle;
	height: 2px;
	line-height: 2px;

	color: #808080;
	padding: 0 4px 0 4px;
}
.wf-listcolumn .lc-sort-descending .lc-sort-icon:after {
	font-family: 'Font Awesome 6 Pro Solid';
	content: '\f0d7';
}
.wf-listcolumn .lc-sort-ascending .lc-sort-icon:after {
	font-family: 'Font Awesome 6 Pro Solid';
	content: '\f0d8';
}
.wf-listcolumn > .lc-actions {
	display: inline-block;
	height: 100%;
}
.wf-listcolumn > .lc-actions > .lc-filter {
	display: inline-block;
	border-left: 1px solid #CCC;
	height: 100%;

	cursor: pointer;
}
.wf-listcolumn > .lc-actions > .lc-filter:hover {
	cursor: pointer;
	border-color: #7AA4C0;
	background-color: #C9E7F7;
}
.wf-listcolumn > .lc-actions > .lc-filter .lc-filter-icon {
	display: inline-block;
	vertical-align: middle;
	
	height: 2px;
	line-height: 2px;

	text-shadow: 0px 0px 1px #808080, 1px 1px 0px white;
	margin: 0;
}
.wf-listcolumn > .lc-actions > .lc-filter .lc-filter-icon:after {
	font-family: 'Font Awesome 6 Pro Solid';
	content: '\00a0\f0d7\00a0';
}

/* WF Resource "WFWidgets.ListColumnSet" (6EDB::1987::6EDB::668) */

.wf-listcolumnset {
	display:inline-block;
	box-sizing:border-box;
	min-width: 100%;

	white-space: nowrap;
	vertical-align: top;
	overflow: hidden;

	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.wf-listcolumnset > .wf-listcolumn {
	border-width: 0 1px 0 1px;
}

/* WF Resource "WFWidgets.List" (6EDB::1987::6EDB::715) */

/* VISUAL STYLING */


.wf-list .item.focus {
	outline: 1px dotted #ccc;
}

.wf-list .item.selected {
	background-color: #e0e0ff;
}


.wf-list .item-new {
	opacity: 1;
	transition: opacity 0.4s;
}

.wf-list .item.item-template {
	opacity: 0.5;
}

/* FUNCTIONAL STYLING */

.wf-list {
	box-sizing: border-box;
}

.wf-list {
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	height: 500px;
}

.wf-list.vflex {
	height: 100%;
}
.wf-list .vl-list {
	height: 100%;
	border: 1px solid #ccc;
	border-radius: 2px;
	position: relative;
	box-sizing: border-box;
}
.wf-list .vl-search input {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 2px;
	margin-top: 2px;
	line-height: 1.5em;
	padding: 3px;
}

.wf-list .vl-anchor {
	position: relative;
	height: 0px;
	box-sizing: border-box;
	padding-right: 0px;	/* calculated (vertical scrollbar width) */
	overflow: visible;
}
.wf-list .vl-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	overflow: hidden;
	background-color: white;
}
.wf-list .vl-bottom {
	position: absolute;
	bottom: 0px;		/* calculated (horizontal scrollbar height) */
	left: 0;
	right: 0;
	z-index: 1;
	overflow: hidden;
	background-color: white;
}

.wf-list .vl-scroll {
	height: 100%;
	overflow: auto;
	box-sizing: border-box;
	background-color: white;
	border-width: 0px;	/* DO NOT add a border to the scroll element */

	-webkit-overflow-scrolling: auto;	/* should help with overscrolling, but doesn't seem to work on more recent versions of safari/iOS */
	overscroll-behavior: none;
}

.wf-list .vl-content {
	position: relative;	/* required for position-calculations */
	padding-top: 0px;	/* calculated (header height) */
	padding-bottom: 0px;	/* calculated (footer height) */
}



/* VIRTUAL LIST SCROLLBAR OVERRIDE */

.wf-list .vl-list .vl-scrollbar {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 17px;						/* overridden on the element by the actual width of the vertical scrollbar */
	bottom: 0;
	background-color: #F0F0F0;
	padding-bottom: 17px;				/* overridden on the element by the height of the horizontal scrollbar */
}
.wf-list .vl-list.virtual.vscroll .vl-scrollbar {
	display: block;
}
.wf-list .vl-list:not(.hscroll) .vl-scrollbar {
	padding-bottom: 0px !important;		/* important to override inline styling on the element */
}

.wf-list .vl-list .vl-hscrollbar {
	display: none;
	position: absolute;
	left: 0;
	right: 17px;						/* overridden on the element by the actual width of the vertical scrollbar */
	bottom: 0;
	height: 17px;						/* overridden on the element by the actual height of the horizontal scrollbar */
	overflow-y: hidden;
	overflow-x: scroll;
}
.wf-list .vl-list.virtual.hscroll .vl-hscrollbar {
	display: block;
}
.wf-list .vl-list:not(.vscroll) .vl-hscrollbar {
	right: 0 !important;
}

.wf-list .vl-list.virtual {
	padding-right: 17px;				/* overridden on the element by the actual width of the vertical scrollbar */
	padding-bottom: 17px;				/* overridden on the element by the actual height of the horizontal scrollbar */
	box-sizing: border-box;
}
.wf-list .vl-list:not(.virtual),
.wf-list .vl-list.virtual:not(.vscroll) {
	padding-right: 0px !important;
}
.wf-list .vl-list:not(.virtual),
.wf-list .vl-list.virtual:not(.hscroll) {
	padding-bottom: 0px !important;
}

.wf-list .vl-list.virtual .vl-scroll {
	overflow-x: auto;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;    /* Edge/IE */
}
.wf-list .vl-list.virtual .vl-scroll::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
}



/* VIRTUAL LIST TOUCH SELECTION */

.wf-list .vl-item,
.wf-list .vl-header,
.wf-list .vl-footer {
	display: grid;
	grid-template-columns: auto 1fr;
	-ms-grid-template-columns: auto 1fr;
}
.wf-list .vl-item {
	position: relative;
}
.wf-list .vl-editor {
	position: absolute;
	z-index: 2;
	outline: 1px solid black;
	padding-bottom: 1px;
	box-sizing: content-box;
	/* size/position set via javascript */
}
.wf-list .vl-editor .vl-nexteditor {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	overflow: hidden;
}
.wf-list .vl-list .vl-select {
	display: none;
}

.wf-list .vl-list.vl-touch .vl-select {
	display: grid;
	width: 2em;
	border-right: 1px solid #CCC;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.wf-list .vl-content .vl-select {
	align-items: flex-start;
	padding-top: 3px;
}
.wf-list .vl-header .vl-select {
	border-bottom: 1px solid #CCC;
}
.wf-list .vl-item .vl-select::after {
	font-size: 120%;
	font-family: 'Font Awesome 6 Pro Solid';
	content: '\F096';
	x-content: '\2610';
}
.wf-list .vl-item.selected .vl-select::after {
	font-size: 120%;
	font-family: 'Font Awesome 6 Pro Solid';
	content: '\F14A';
	x-content: '\2611';
}



.wf-list .vl-cp-line {
	display: table-row;
}
.wf-list .focus .vl-cp-line {
	outline: 1px dotted #ccc;
}
.wf-list.wf-listview .selected .vl-cp-line {
	background-color: #e0e0ff;
}
.wf-list.wf-datagrid .selected .vl-cp-line {
	outline: 1px solid black;
	position: relative;
	z-index: 1;
}

.wf-list .vl-cp-cell {
	display: table-cell;
	box-sizing: border-box;
	vertical-align: top;
	white-space: nowrap;
	border-bottom: 1px solid #eee;
	border-right: 1px solid #eee;
}
.vl-cp-cell.left {
	text-align: left;
}
.vl-cp-cell.right {
	text-align: right;
}
.vl-cp-cell.center {
	text-align: center;
}
.vl-cp-cell.wrapped {
	white-space:normal;
}

.wf-list .vl-cp-cell-content {
	margin-right: -1px;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
	padding: 2px 4px 2px 4px;
}
/* override all column-sizing for correct autosize measurements */
.wf-list .vl-ruler .vl-cp-cell-content {
	width: auto !important;
}
.wf-list .vl-cp-cell-content.vl-cp-icon-content .vl-cp-icon {
	text-align: center;
	line-height: 16px;
}
.wf-list .vl-cp-cell-content .vl-cp-icon img {
	vertical-align: top;
}
.wf-list .vl-cp-cell-content.vl-cp-editor-disabled .vl-cp-icon {
	opacity: 0.5;
	filter: grayscale(100%);
}
.wf-list .vl-cp-cell-content.vl-cp-icontext-content {
	display: grid;
	grid-template-columns: 16px 1fr;
	grid-template-rows: 1fr;
	gap: 6px;
	grid-template-areas: "icon text";

	display: -ms-grid;
	-ms-grid-columns: 22px 1fr; /* 16+6px to compensate for lack of 'gap' support */
	-ms-grid-rows: 1fr;
	
}
.wf-list .vl-cp-cell-content.vl-cp-icontext-content .vl-cp-icon {
	grid-area: icon;
	-ms-grid-column: 1;
	-ms-grid-row: 1;
}
.wf-list .vl-cp-cell-content.vl-cp-icontext-content .vl-cp-text {
	grid-area: text;
	-ms-grid-column: 2;
	-ms-grid-row: 1;
}

.wf-list .vl-cp-info {
	display: inline-block;
}
/* hide the dummy line as it's only needed for the correct width */
.wf-list .vl-cp-info > .vl-cp-sizer {
	height: 0;
	overflow: hidden;
}
.wf-list .vl-cp-info > .vl-cp-message {
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
	border-right: 1px solid #eee;
	padding: 2px 4px 2px 4px;
	text-align: center;
	color: #666;
}



/* LIST HEADER OVERRIDES */

.wf-list .vl-header .wf-listcolumnset {
	border-top: 0;
}
.wf-list .vl-footer .wf-listcolumnset {
	border-bottom: 0;
}
.wf-list .vl-header .wf-listcolumn,
.wf-list .vl-footer .wf-listcolumn {
	border-left: 0;
}

/* WF Resource "WFWidgets.TemplateList" (6EDB::1987::6EDB::680) */


.wf-templatelist {
	height: 400px;
	border: 1px solid black;
	box-sizing: border-box;
	white-space: normal;
}
.wf-templatelist.vflex {
	height: 100%;
}
.wf-templatelist:not(.vflex) {
	margin-bottom: 6px;	/* 393555 */
}

.wf-templatelist > .items {
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	transition: opacity 0.2s ease-in;
	position: relative;
}
.wf-templatelist.loading > .items {
	opacity: 0;
	transition: opacity 0s;
}

.wf-templatelist > .items > .item {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-top: 5px;
}

.wf-templatelist > .items > .next,
.wf-templatelist > .items > .previous {
	text-align: center;
	min-height: 10px;
}

.wf-templatelist > .items > .next.loading:after,
.wf-templatelist > .items > .previous.loading:after {
	font-size: 150%;
	font-family: "Courier New";
	content: "...";
	display: inline-block;
	overflow: hidden;
	width: 0;
}
.wf-templatelist > .items > .next.loading:after,
.wf-templatelist > .items > .previous.loading:after {
	animation: wf-templatelist-ellipsis steps(4,end) 1200ms infinite;
}

@keyframes wf-templatelist-ellipsis {
	to {
		width: 2.5em;
	}
}

/* WF Resource "WFWidgets.Gantt" (6EDB::1987::6EDB::711) */

/** GANTT CONTROL **/
.wf-gantt {
	box-sizing: border-box;
	display: -ms-grid;
	-ms-grid-columns: auto auto 1fr auto;
	-ms-grid-rows: auto 1fr auto;
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	grid-template-rows: auto 1fr auto;
	grid-template-areas: "corner splitter header vscroll" "legend splitter chart chart" "hscroll hscroll chart chart";
	height: 100%;
}

.wf-gantt.vflex {
	height: 100%;
}

.wf-gantt {
	user-select: none;
}

.wf-gantt > .gantt-corner {
	overflow-x: hidden;
	grid-area: corner;
	-ms-grid-column-span: 1;
	-ms-grid-column: 1;
	-ms-grid-row: 1;
}

.wf-gantt > .gantt-corner > .buttons > .active {
	background-color: #666;
	color: white;
}

.wf-gantt > .gantt-header {
	overflow-x: scroll;
	grid-area: header;
	-ms-grid-column: 3;
	-ms-grid-row: 1;
}

.wf-gantt > .gantt-legend {
	overflow-y: scroll;
	grid-area: legend;
	-ms-grid-column: 1;
	-ms-grid-row: 2;
}

.wf-gantt > .gantt-splitter {
	grid-area: splitter;
	-ms-grid-column: 2;
	-ms-grid-row-span: 2;
	-ms-grid-row: 1;
}

.wf-gantt > .gantt-chart {
	overflow: auto;
	position: relative;
	grid-area: chart;
	-ms-grid-column: 3;
	-ms-grid-row: 2;
	-ms-grid-column-span: 2;
	-ms-grid-row-span: 2;
}

.wf-gantt > .hscroll {
	grid-area: hscroll;
	-ms-grid-column-span: 2;
	-ms-grid-column: 1;
	-ms-grid-row: 3;
}

.wf-gantt > .vscroll {
	grid-area: vscroll;
	-ms-grid-column: 4;
	-ms-grid-row: 1;
}

.wf-gantt > .gantt-header,
.wf-gantt > .gantt-legend {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wf-gantt > .gantt-header::-webkit-scrollbar,
.wf-gantt > .gantt-legend::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
}

.wf-gantt > .gantt-corner {
	border: 1px solid #cccccc;
	border-bottom: 0px;
	border-right: 0px;
}

.wf-gantt > .gantt-header {
	border: 1px solid #cccccc;
	border-left: 0px;
	border-bottom: 0px;
}

.wf-gantt > .gantt-legend {
	border: 1px solid #cccccc;
	border-right: 0px;
}

.wf-gantt > .gantt-chart {
	border: 1px solid #cccccc;
	border-left: 0px;
}

.wf-gantt > .gantt-corner,
.wf-gantt > .gantt-header {
	background-color: #f3f5f7;
}

.wf-gantt > .gantt-header > svg.gantt-header {
	display: inherit;
}

.wf-gantt > .gantt-legend {
	position: relative;
}

.wf-gantt > .gantt-splitter {
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	right: 0;
	width: 3px;
	height: 100%;
	cursor: col-resize;
}

.wf-gantt > .gantt-splitter:hover {
	background: #cccccc;
}

.wf-gantt.vflex {
	height: 100%;
}

/** GANTT SVG **/
.gantt-grid-background {
	fill: none;
}

.gantt-grid-header {
	fill: #ffffff;
	stroke: #cccccc;
	stroke-width: 1.4;
}

.gantt-grid-row-line {
	stroke: #cccccc;
}

.gantt-grid-row.selected {
	fill: rgba(0, 116, 232, 0.5);
}

.gantt-tick {
	stroke: #cccccc;
	stroke-width: 0.5;
}

.gantt-tick.thick {
	stroke-width: 1.5;
}

.vertline {
	stroke-width: 2;
}

.gantt-today-highlight {
	fill: #fcf8e3;
	opacity: 0.5;
}

.gantt-link-anchor {
	stroke: black;
}

.bar {
	stroke: black;
}

.bar.selected {
	-webkit-filter: drop-shadow( 0 4px 8px hsla(0, 0%, 0%, 0.3));
	filter: drop-shadow( 0 4px 8px hsla(0, 0%, 0%, 0.3));
	outline: 2px dashed rgba(0, 0, 0, 0.3);
}

.gantt-text {
	dominant-baseline: central;
}

.gantt-arrow {
	fill: rgba(0, 0, 0, 0.87);
	dominant-baseline: central;
	text-anchor: start;
	cursor: pointer;
}

.gantt-select-mode .bar,
.gantt-select-mode .milestone {
	cursor: pointer;
}

.gantt-move-mode .bar,
.gantt-move-mode .milestone {
	cursor: grab;
}

.gantt-link-mode .bar,
.gantt-link-mode .milestone {
	cursor: alias;
}


/* WF Resource "WFWidgets.TinyMCE" (6EDB::1987::6EDB::630) */


/* TODO: Stijlregels startend met ".wf-modal-fixed". Terecht? */

.wf-tinymce textarea {
	width:100%;
	height: 300px;
	margin-top: 30px;	/* "reserve" some space for tinyMCE's toolbar */
}

.wf-tinymce.vflex textarea {
	height: 100% !important;
	margin-top:0px;
}


.wf-tinymce-placeholder {
	border: 1px solid #CCC;
	text-align: center;
	color: #808080;
	background-color: white;
	line-height: 50px;
}

.wf-tinymce-placeholder.vflex {
	height: 100%;
}


.wf-tinymce.vflex {
	height:100%;
}
.wf-tinymce.vflex>.mce-container {
	box-sizing: border-box;
	height:100%;
}
.wf-tinymce.vflex>.mce-container>.mce-container-body {
	box-sizing: border-box;
	padding-bottom:28px;
	height:100%;
}
.wf-tinymce.vflex.notoolbar>.mce-container>.mce-container-body {
	padding-bottom: 0px;
}
.wf-tinymce.vflex .mce-edit-area {
	box-sizing:border-box;
	height: 100%;
}
.ipad .wf-tinymce.vflex .mce-edit-area {
	-webkit-overflow-scrolling: touch;
	overflow: auto;
}
.wf-tinymce.vflex .mce-edit-area iframe {
	height: 100% !important;
}

.wf-modal-fixed .mce-floatpanel,
.wf-modal-fixed .mce-tooltip {
	position: fixed;
}

/* WF Resource "WFWidgets.Tooltip" (6EDB::1987::6EDB::669) */

.tooltip {
	max-width: 500px;
	background-color: #FFFFFF;
	border: 1px solid #CCC;
	position: absolute;
	padding: 3px;
	z-index: 1601;
	border-radius: 3px;
	box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
	text-align:left;
}

.tooltip.fixed {
	padding: 4px 12px;
}

.tooltip.fixed a.close,
.tooltip.fixed a.close:hover {
	position: absolute;
	top: 0px;
	right: 2px;
	color: #AAA;
	text-decoration:none;
}

.tooltip-constrained {
	max-width: 450px;
	max-height: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tooltip-loading {
	box-sizing: border-box;
	position: relative;
	width: 60px;
	height: 40px;
	overflow: hidden;
}

/* https://loading.io/css/ */
.tooltip-loading > div {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -14px;
	margin-top: -14px;
	width: 28px;
	height: 28px;

	opacity: 0;
	animation: tt-fadeIn ease-in 1;
	animation-fill-mode: forwards;
	animation-duration: 1s;
}

.tooltip-loading > div:after {
	content: " ";
	display: block;
	width: 20px;
	height: 20px;
	margin: 1px;
	border-radius: 50%;
	border: 4px solid #c0c0c0;
	border-color: #c0c0c0 transparent #c0c0c0 transparent;
	animation: tt-spin 1.2s linear infinite;
}

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

@keyframes tt-fadeIn {
	from { opacity:0; }
	to { opacity:1; }
}

/* WF Resource "WFWidgets.CalendarView" (6EDB::1987::6EDB::663) */


/***** CALENDAR *****/

.wf-calendar-active {
	cursor: wait !important;
}

/***** PAST/PRESENT/FUTURE *****/

.calendar-past {
	color: #696863;
}


/* WF Resource "WFWidgets.DayView" (6EDB::1987::6EDB::745) */


/***** PAST/PRESENT/FUTURE *****/

.dayview-header.calendar-today {
	color: #0081F2;
}

/***** DAYVIEW *****/

.dayview {
	position: relative;
	height: 100%;
	height: 700px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.dayview.vflex {
	height: 100%;
}

.dayview-daycol {
	width: 14.2857%;					/* 100% / day-count */
}

.dayview-top {
	padding-right: 35px;			/* hour-width*/
	overflow: hidden;
	box-sizing: border-box;
	border-left: 1px solid transparent;
	white-space: nowrap;
}

.dayview-headercontent {
	position:relative;
	display: inline-block;
	width: 100%;
	overflow:hidden;
	vertical-align: top;
}

.dayview-headers {
	height: 20px;		/* was 1.5em, maar dan krijg je sub-pixel-positioning problemen*/
	overflow: hidden;
	box-sizing:border-box;
}

.dayview-header {
	display: inline-block;
	height: 100%;
	vertical-align: top;
	text-align: center;
	overflow: hidden;
	box-sizing: border-box;
}
.dayview-header:last-child {
	border-right: 0;
}

.dayview-resource-headers {
	display: none;
}
.dayview-multiresource .dayview-resource-headers {
	display: block;
	height: 20px;		/* was 1.5em, maar dan krijg je sub-pixel-positioning problemen*/
	overflow: hidden;
	box-sizing: border-box;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	white-space: nowrap;
}

.dayview-resource-header {
	display: inline-block;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
	border-right: 1px solid #ccc;
	white-space: nowrap;
}
.dayview-multiresource .dayview-resource-header {
	border: 0;
	padding-left: 3px;
	padding-right: 3px;
}
.dayview-resource-header:last-child {
	border-right: 0;
}

.dayview-resource-repr {
	display: inline-block;
	height: 100%;

	overflow: hidden;
	text-align: center;

	box-sizing: border-box;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
.dayview-multiresource .dayview-resource-repr {
	border-right: 1px solid #ccc;
	border-left: 0;
}
.dayview-resource-repr:first-child {		/* first-child for IE8 (does not support last-child) */
	border-left: 0;
}
.dayview-multiresource .dayview-resource-repr:first-child {
	border-left: 1px solid #ccc;
}

.dayview-event-headers {
	overflow: hidden;
	box-sizing: border-box;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-top: 1px solid #ccc;
	white-space: nowrap;
}
.dayview-multiresource .dayview-event-headers {
	top: 3em;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-top: 0;
}

.dayview-dayevent {
	display: inline-block;
	box-sizing: border-box;
	border-right: 1px solid #ccc;
	height: 100%;
	cursor: pointer;
	vertical-align: top;
}
.dayview-multiresource .dayview-dayevent {
	border: 0;
	padding-left: 3px;
	padding-right: 3px;
}
.dayview-dayevent:last-child {
	border-right: 0;
}

.dayview-events {
	display: inline-block;
	min-height:20px;
	height: 100%;
	vertical-align: top;
	box-sizing: border-box;
	border-top: 0;
	border-left: 1px solid #ccc;
	overflow: auto;
}
.dayview-multiresource .dayview-events {
	border-right: 1px solid #ccc;
	border-left: 0;
	border-top: 1px solid #ccc;
}
.dayview-events:first-child {		/* first-child for IE8 (does not support last-child) */
	border-left: 0;
}
.dayview-multiresource .dayview-events:first-child {
	border-left: 1px solid #ccc;
}

.dayview-event {
	position: relative;
	display: block;

	margin: 1px;
	border: 1px solid #404080;
	background-color: rgb(200,200,255);
	overflow:hidden;
	box-sizing:border-box;
	color: black;
}





.dayview-body {
	position: absolute;
	top: 20px;					/* initial header-height */
	bottom: 0;
	left: 0;
	right: 0;

	overflow-x: hidden;
	overflow-y: auto;

	box-sizing: border-box;
	x-border-top: 1px solid #ccc;
	border: 1px solid #ccc;
}

.dayview-content {
	position: relative;
	height: 1440px;					/* hour-count * hour-height */

	overflow: hidden;
}

.dayview-hours {
	position: relative;
	height: 0px;
}

.dayview-hour {
	position: relative;
	height: 60px;					/* hour-height */

	box-sizing: border-box;
	border-bottom: 1px solid #ccc;

	white-space: nowrap;
	overflow: hidden;
}

.dayview-hourset .dayview-hour:not(:last-child) {
	border-bottom: 0px;
}

.dayview-hourrepr {
	display: inline-block;
	width: 35px;					/* hour-width */

	vertical-align: top;
	box-sizing: border-box;

	text-align: right;
	padding-right: 5px;
	padding-top: 5px;
	color: black;
}

.dayview-hourdivider {
	display: inline-block;
	width: 100%;
	height: 50%;

	box-sizing: border-box;
	border-bottom: 1px dotted #ccc;

	vertical-align: top;
}

.dayview-hourset .dayview-hourdivider {
	border-bottom: 0px;
}

.dayview-hoursizer {
	position: absolute;
	bottom:0;
	left: 0;
	width: 35px;
	height: 4px;
	cursor: ns-resize;
}
.dayview-hoursizer:hover {
	background-color: #ddd;
}

.dayview-days {
	height: 100%;

	padding-right: 35px;			/* hour-width */

	white-space: nowrap;
}

.dayview-hourspacer {
	display: inline-block;
	width: 35px;					/* hour-width */
}

.dayview-calendar {
	display: inline-block;
	width: 100%;
	height: 100%;

	overflow:hidden;

	box-sizing: border-box;
	border-left: 1px solid #ccc;

	white-space:nowrap;
}
.dayview-multiresource .dayview-calendar {
	x-border-left: 1px solid transparent;
	x-border-right: 1px solid transparent;
	border-top: 0;
}

.dayview-day {
	display: inline-block;
	height: 100%;

	vertical-align: top;

	box-sizing: border-box;
	border-right: 1px solid #ccc;
}
.dayview-multiresource .dayview-day {
	border: 0;
	padding-left: 3px;
	padding-right: 3px;
}
.dayview-day:last-child {
	border-right: 0;
}

.dayview-resource {
	display: inline-block;
	width: 100%;
	height: 100%;

	vertical-align: top;
	box-sizing: border-box;
	border-left: 1px solid #ccc;	
	background-color: #eee;
}
.dayview-multiresource .dayview-resource {
	border-right: 1px solid #ccc;
	border-left: 0;
}
.dayview-resource:first-child {		/* first-child for IE8 (does not support last-child) */
	border-left: 0;
}
.dayview-multiresource .dayview-resource:first-child {
	border-left: 1px solid #ccc;
}

.dayview-overlay-spacer {
	height: 100%;
}
.dayview-overlay {
	position: relative;
	height: 100%;

	box-sizing: border-box;
}

.dayview-resource-containers .dayview-overlay {
		left: 8px;
}

.dayview-resource-containers .dayview-overlay-spacer {
	padding-right: 8px;
}

.dayview-resource-containers .dayview-selection {
		margin-left: 8px;
}

.dayview-container {
	background-color: rgba(48,128,80,0.1);
	color: #8DB99E;
	white-space: nowrap;
	padding-right: 8px;
}

.dayview-container .edge {
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	height: 100%;
	width: 8px;
	background-color: #8DB99E;
}

.dayview-container .title {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	white-space: normal;
	vertical-align: top;
	padding: 2px;
	text-align: center;
	font-weight: bold;
}

.dayview-availables {
	
}

.dayview-available {
	margin-top: 0px;				/* avail-start-hour * hour-height */
	height: 0px;					/* avail-length * hour-height */
	margin-bottom: 0px;				/* -(margin-top + height) */

	box-sizing: border-box;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background-color: white;
}

.dayview-nowcontainer {
	position: relative;
	height: 0;
}

.dayview-nowmarker {
	position: absolute;
	top: -100px;
	width: 100%;
	height: 2px;
	background-color: red;
	x-z-index: 1;
}

.dayview-dayclaim {
	position: absolute;
	width: 100%;
}

.dayview-claim {
	position: relative;
	display: block;

	height: 100%;

	margin-left: 2px;
	margin-right: 2px;
	border: 1px solid #404080;
	border-radius: 4px;
	background-color: rgb(200,200,255);
	x-color: white;
	overflow:hidden;
	box-sizing:border-box;
	color: black;
	cursor: pointer;
	padding: 2px;
}
.dayview-claimheader {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	border-color: inherit;
}
.dayview-claimtime {
	font-size: 85%;
}

.dayview-claim-sizer {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: -10px;
	height: 20px;

	cursor: ns-resize;
}

.dayview-dayclaim-active .dayview-claim {
	border-color: red;
}

.dayview-claimhelper {
	position: absolute;
	width: 100%;
	left: 0%;
}
.dayview-claimhelper .dayview-claim {
	box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.dayview-claimhelper.ghost {
	opacity: 0.7;
}
.dayview-selection {
	margin-top: 0px;				/* avail-start-hour * hour-height */
	height: 0px;					/* avail-length * hour-height */
	margin-bottom: 0px;				/* -(margin-top + height) */

	box-sizing: border-box;
	border-top: 1px solid #C0C0FF;
	border-bottom: 1px solid #C0C0FF;
	background-color: #E0E0FF;

	overflow: hidden;
}

.dayview-selection.postponed span {
	position: relative;
	top: 50%;
	margin-top: -1em;

	color: #9191A5;
	display: block;
	line-height: 2em;
	text-align: center;
}
.dayview-selection.postponed span:before {
	content: "+";
	font-size:200%;
	font-weight: bold;
}

.device-category-phone .dayview-hourrepr {
	font-size: 80%;
}

.device-category-phone .dayview-header {
	font-size: 90%;
}

/* WF Resource "WFWidgets.MonthView" (6EDB::1987::6EDB::744) */

/***** PAST/PRESENT/FUTURE *****/

.monthview-day.calendar-today {
	color: #0081F2;
}

.monthview-day.calendar-excluded {
	color: #ccc;
}

/***** MONTHVIEW *****/

.monthview {
	position:relative;
	height:100%;
	height: 700px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.monthview.vflex {
	height: 100%;
}

.monthview-header {
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:2em;

	overflow:hidden;

	box-sizing:border-box;
}

.monthview-dayheader {
	display:inline-block;
	width:14.285%;
	height:2em;

	line-height:2em;

	box-sizing:border-box;
	padding-left:10px;
	text-overflow: ellipsis;
}

.monthview-view {
	position:absolute;
	top:2em;
	bottom:0;
	left:0;
	right:0;

	overflow: hidden;

	box-sizing:border-box;
	border:1px solid #ccc;
	white-space:nowrap;
}

.monthview-month {
	display:inline-block;
	width:100%;
	height:100%;
	padding-left:10px;
	padding-right:10px;
}
.monthview-month:first-child {
	padding-left:0;
}
.monthview-month:last-child {
	padding-right:0;
}

.monthview-week {
	x-height:16.666%;

	white-space:nowrap;
}

.monthview-month-4 .monthview-week {
	height: 25%;
}

.monthview-month-5 .monthview-week {
	height: 20%;
}

.monthview-month-6 .monthview-week {
	height: 16.666%;
}

.monthview-day {
	display:inline-block;
	width:14.285%;
	height:100%;

	box-sizing:border-box;
	border: 1px solid #ccc;
	background-color: white;
	vertical-align: top;
	font-weight: normal;
}

.monthview-dayrepr {
	text-align: right;

	font-weight: bold;
	box-sizing:border-box;
	border-bottom: 1px dashed #ccc;
	padding-right: 5px;
}

.monthview-claim {
	display: block;

	margin: 1px;
	border: 1px solid #404080;
	background-color: rgb(200,200,255);
	overflow:hidden;
	box-sizing:border-box;
	color: black;
	padding: 2px;
	white-space: nowrap;
	cursor: pointer;
}

.monthview-claimtime {
	display: inline-block;
	font-size: 70%;
	margin-right: 4px;
}
.monthview-claimlabel {
	display: inline-block;
}

/* WF Resource "WFWidgets.Dashboard" (6EDB::1987::6EDB::716) */

.wf-db-dashboard {
	transition: padding 0.3s;
	transition-delay: 50ms;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.wf-db-dashboard a {
	text-decoration: none;
	color: #303030;
}
.wf-db-dashboard span.dashboard-no-url {
	color: #999999;
}

.wf-db-dashboard a:hover {
	text-decoration: underline;
}

.wf-db-designmode.vflex {
	padding-bottom: 194px; /*berekend obv hoogte library*/
}

.wf-db-designmode.collapsed.vflex {
	padding-bottom: 32px; /*berekend obv hoogte library in collapsed status*/
}

.wf-db-resizing-horizontal,
.wf-db-resizing-horizontal .wf-db-block-overlay {
	cursor: ew-resize !important;
}

.wf-db-resizing-vertical,
.wf-db-resizing-vertical .wf-db-block-overlay {
	cursor: ns-resize !important;
}

.wf-db-dragging {
	cursor: move !important;
}

.wf-db-resizing-horizontal .resize,
.wf-db-resizing-vertical .resize,
.wf-db-dragging .resize,
.wf-db-dragging .wf-db-block-overlay-toolbar {
	display: none;
}

/**********BORDER STYLING BEGIN*****************/

.wf-db-lib-block,
.wf-db-block-content {
	border: 1px solid #e7ecf1 !important;
	box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.03);
	border-radius: 2px;
}

/**********BORDER STYLING END*****************/


/**********LIBRARY BEGIN*****************/


.wf-db-library {
	box-sizing: border-box;
	margin-bottom: 0;
	height: 0;
	overflow: hidden;
	white-space: normal;
	transition: height 0.3s, margin 0.3s;
	transition-delay: 50ms;
}

.wf-db-designmode .wf-db-library{
	/*totaal hiervan bepaalt .wf-db-designmode.vflex */
	height: 184px;	/*auto kan helaas niet, omdat de transitions dan niet werken*/
	margin-bottom: 10px;
}

.wf-db-designmode.collapsed .wf-db-library{
	/*hoogte hiervan is van invloed op .wf-db-designmode.collapsed.vflex*/
	height: 22px;
}

.wf-db-library .wf-db-lib-collapser {
	background-color: #ddd;
	text-align: center;
	color: white;
	cursor: pointer;
	border-top-width: 0 !important;
}

.wf-db-library .wf-db-lib-collapser,
.wf-db-library .wf-db-lib-apps,
.wf-db-designmode.collapsed .wf-db-library .wf-db-lib-apps{
	height: 0px;
	transition: height 0.3s;
	transition-delay: 50ms;
}

.wf-db-dashboard.wf-db-designmode .wf-db-library .wf-db-lib-apps {
	overflow-x: hidden;
	overflow-y: auto;
	border-bottom-width: 0 !important;
}

.wf-db-designmode .wf-db-library .wf-db-lib-apps{
	height: 162px;	/*auto kan helaas niet, omdat de transitions dan niet werken*/
}

.wf-db-designmode.collapsed .wf-db-library .wf-db-lib-apps{
	height: 0px;
}

.wf-db-designmode .wf-db-library .wf-db-lib-collapser {
	height: 20px;
}

.wf-db-library .wf-db-lib-collapser,
.wf-db-library .wf-db-lib-apps {
	border: 1px solid #ddd;
	border-radius: 2px;
}

.wf-db-lib-block {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	margin: 5px;
	padding: 5px;
	height: 40px;
	line-height: 30px;
	width: 200px;
	background-color: white;
	color: #555;
	transition: height 0.3s;
	transition-delay: 50ms;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wf-db-lib-block:hover {
	background-color: #F2F2F2;
}

/*A block inserted from the library into the grid */
.wf-db-block .wf-db-lib-block {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.wf-db-lib-app {
	cursor: move;
}

.wf-db-lib-container {
	cursor: pointer;
	padding-right: 15px;
}

.wf-db-lib-block .wf-db-lib-label{
	font-size: 10pt;
	display: inline;
}

.wf-db-lib-icon {
	font-size: 18pt;
	display: inline-block;
	vertical-align: top;
	width: 35px;
	text-align: center;
}

.wf-db-lib-container-icon {
	width: auto;
	position: absolute;
	right: 5px;
	top: 5px;
}


/**********LIBRARY END*****************/

/**********GRID BEGIN*****************/

.wf-db-grid {
	position: relative;
	transition: height 0.3s, width 0.3s;
	transition-delay: 50ms;
	overflow: hidden;
}

.wf-db-dashboard.vflex .wf-db-grid {
	height: 100%;
	overflow-y: auto;
}

.wf-db-block {
	display: inline-block;
	position: absolute;
	box-sizing: border-box;	
	vertical-align: top;
	transition-delay: 50ms;
	transition: top 0.3s, left 0.3s, width 0.3s, height 0.3s;
	margin-bottom: 15px;	/* om te zorgen dat het onderste block ook nog z'n box-shadow heeft. In sync houden met margin */
}

.wf-db-block-content {
	background-color: white;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	white-space: normal;
	overflow: hidden; /*normaliter wordt alleen tijdens het designen eventueel buiten de lijntjes getekend. Na de designactie zou dit rechtgetrokken moeten zijn. */
}

.wf-db-block-content .widget-content{ 
	overflow: hidden;
}

.wf-db-block .wf-db-block-content .dashboard-block {
	border: none;
	border-radius: 2px;
}

.wf-db-block-overlay {
	display: none;	
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: lightGrey;
	opacity: 0.1;
	cursor: move;
}

.wf-db-designmode .wf-db-block-overlay {
	display: block;
}

.wf-db-block-content .dashboard-toolbar {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-block;
	x-width: 16px;
	vertical-align: top;
	z-index: 1;
}

.wf-db-block-content .dashboard-toolbar span.splitbutton > a {
	font-size: 1.4em;
	color: #CCC;
	display: inline-block;
	width: 10px;
	text-align: center;
	text-decoration: none;
}

.wf-db-block-content .dashboard-toolbar span.splitbutton > a:hover {
	color: #888;
}

.wf-db-block-content .dashboard-toolbar .widgets-popupmenu-container a {
	display: inline-block;
}

.wf-db-designmode .wf-db-block-content .dashboard-toolbar {
	display: none;
}

.wf-db-block .wf-db-resize-overlay {
	background-color: lightGrey;
	position: absolute;
	opacity: 0.4;
	z-index: 1;
	top: 0;
}

.wf-db-block-overlay .wf-db-block-overlay-toolbar,
.wf-db-block-overlay .resize {
	position: absolute;
}

.wf-db-block-overlay .wf-db-block-overlay-toolbar span,
.wf-db-block-overlay .resize {
	opacity: 0;
}

.wf-db-block-overlay .wf-db-block-overlay-toolbar {
	right: 5px;
	top: 5px;
}

.wf-db-block-overlay .wf-db-block-overlay-toolbar a,
.wf-db-block-overlay .wf-db-block-overlay-toolbar a:hover {
	color: black;
	text-decoration: none;
}

.wf-db-block .wf-db-block-overlay:hover,
.wf-db-block .wf-db-block-overlay:hover .resize,
.wf-db-block .wf-db-block-overlay:hover .wf-db-block-overlay-toolbar span {
	opacity: 0.4;
}

.wf-db-block .wf-db-block-overlay .resize:hover,
.wf-db-block .wf-db-block-overlay .wf-db-block-overlay-toolbar span:hover  {
	opacity: 1.0;
}

.wf-db-resizing-horizontal .wf-db-block .wf-db-block-overlay:hover,
.wf-db-resizing-vertical .wf-db-block .wf-db-block-overlay:hover,
.wf-db-dragging .wf-db-block .wf-db-block-overlay:hover {
	opacity: 0.1;
}

.wf-db-block-overlay .resize {
	color: black;
	font-size: 25px;
	line-height: 25px;
}

.wf-db-block-overlay .resize.vertical {
	left: 50%;
	cursor: ns-resize;
}

.wf-db-block-overlay .resize.bottom {
	bottom: 5px;
}

.wf-db-block-overlay .resize.horizontal {
	top: 50%;
	cursor: ew-resize;
}

.wf-db-block-overlay .resize.left {
	left: 5px;
}

.wf-db-block-overlay .resize.right {
	right: 5px;
}

.wf-db-block.wf-db-dragging {
	z-index: 1;
}

.wf-db-dragging .wf-db-block.wf-db-dragging .wf-db-block-overlay {
	opacity: 0.6;
}


/**********GRID END*****************/


/**********BLOCK CONTENT BEGIN *****/
.wf-db-block-content .dashboard-block .widget-container{
	padding: 10px;
	border: none;
}

.wf-db-block-content .dashboard-block .widget-container.dashboard-no-padding{
	padding: 0;
}

.wf-db-block-content .dashboard-block .widget-header-title {
	padding-right: 16px;
	white-space: nowrap;
	display: block;
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
}

.wf-db-block-content .dashboard-title {
	display: inline-block;	
	width: 100%;
	font-size: 1.4em;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 10px;
}

.wf-db-block-content .widget-header.dashboard-no-title {
	height: 0px;
}	

.wf-db-block-content .dashboard-block-content,
.wf-db-block-content .dashboard-block-content .field-table-wrap {
	overflow:hidden;
	display:block;
}

.wf-db-block-content .dashboard-block-reduced-size td,
.wf-db-block-content .dashboard-block-reduced-size .field-table-wrap td {
	line-height: 15px;
}

/*webcontent-container-h3-boxed zet er zelf ook een border omheen, dat maken we hier ongedaan*/
.wf-db-block-content .dashboard-block-content .webcontent-container-h3-boxed {
	border:none;
	background: transparent;
	padding:0px;
}

/**********BLOCK CONTENT END *******/

/**********MINI APP SPECIFIC BEGIN**/

.wf-db-block-content .dashboard-block-tile-icon {
	display: inline-block;
	vertical-align: top;
	width: 125px;
}

.wf-db-block-content .grid-colored-icons .dashboard-block-tile-icon .menu-item-icon {
	width: auto;	/*voorkomen dat bij een te groot getal deze naar beneden zakt wegens te weinig ruimte*/
}

/**********MINI APP SPECIFIC END**/

/* WF Resource "WFWidgets.ToggleGroup" (6EDB::1987::6EDB::638) */

.wf-togglegroup-control {
	overflow: hidden;
}

.wf-togglegroup-control .toggle {
	width: 20px;
	vertical-align: top;
	margin: 3px 3px 0px 3px;

}

.wf-togglegroup-control .label {
	display:inline-block;
	white-space:normal;
	padding-right: 28px;
	margin-bottom: 2px;
}

.wf-togglegroup-control > .label.wf-suspect{
	color:#EAA211;
}

.wf-togglegroup {
	margin:2px 0px;
}

.wf-togglegroup-group {
	padding:4px 0px;
}

.wf-togglegroup-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(100px, calc(100% / 1)), 1fr));
	grid-auto-flow: dense;
}


/* WF Resource "WFWidgets.ToggleButtons" (6EDB::1987::6EDB::639) */

.wf-togglebuttons {
	display: table;
	table-layout: fixed;
	border-collapse: collapse;
}
.wf-togglebuttons.flex {
	width: 100%;
}

.wf-togglebuttons > .tb-container.line {
	display: table-row;
}
.wf-togglebuttons > .tb-container.line > div {
	display: table-cell;
}
.wf-togglebuttons > .tb-container.line button {
	width:100%;
	margin-left: 0px;
	margin-right: 0px;
}
.wf-togglebuttons > .tb-container.line button.wf-togglebutton.wf-suspect{
	border: 1px solid #EAA211;
    box-shadow: inset 0px 0px 2px 4px #EAA211;
}
.wf-togglebuttons > .tb-container.line > div:not(:first-child) button {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}
.wf-togglebuttons > .tb-container.line > div:not(:last-child) button {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.wf-togglebuttons > .tb-container.wrap {
	display: block;
	white-space: normal;
}

.wf-togglebuttons > .tb-container.flat button {
	border: 1px solid transparent;
	background-color: transparent;
	padding: 3px;
	cursor: pointer;
}
.wf-togglebuttons > .tb-container.flat button.active {
	border: 1px solid #3399ff;
	background-color: #c2e0ff;
}

.wf-togglebuttons button.active {
	box-shadow: 2px 2px 6px rgba(0,0,0,0.15) inset;
}

/* WF Resource "WFWidgets.Select" (6EDB::1987::6EDB::634) */

.wfi-select {
	display: block;
	/* width: 100% */ /* display:block takes care of the 100% width. Setting it explicitly causes the box to expand the moment icon-padding is added */
	padding: 0;
	white-space: nowrap;
	overflow: hidden;
}

.wfi-select select {
	display: inline-block;
	width: 100%;
	margin: 0;
/*	height: calc(1.5em+10px); */ /* styling to get it to work in the webclient? */
}

.wf-select {
	padding-bottom: 4px;
}

.wf-select select {
	border: 1px solid #CCC;
	background-color: white;
	padding: 4px;
	border-radius: 2px;
}

.wf-select-disabled select {
	background-color: #F2F2F2;
	color: #3D3D3D;
	text-shadow: 1px 1px 0px white;
}

/* WF Resource "WFWidgets.TextArea" (6EDB::1987::6EDB::629) */

.wfi-textarea {
	display: block;
	white-space: normal;
}

.wfi-textarea textarea {
	display: inline-block;
	width: 100%;
	white-space: pre-wrap;
	resize: vertical;
	margin: 0;
}
.wfi-textarea.vflex textarea,
.wfi-textarea.autosizing textarea {
	resize: none;
}

.wf-textarea {
	min-height: 4em;
	height: 150px;
	padding-bottom: 4px;
	box-sizing: border-box;
	position: relative;
}
.wf-textarea.vflex {
	height: 100%;
}

.wf-textarea textarea {
	box-sizing: border-box;
	border: 1px solid #CCC;
	border-radius: 2px;
	background-color: white;
	padding: 4px;
	overflow: auto;
	outline: none;
	height: 100%;
	line-height: 1.5em;
}

.wf-textarea textarea:focus {
	outline: none;
}

.wf-textarea-disabled textarea {
	background-color: #F2F2F2;
	color: #3D3D3D;
	text-shadow: 1px 1px 0px white;
}

/* WF Resource "WFWidgets.Template" (6EDB::1987::6EDB::746) */

.wf-template.vflex {
	height: 100%;
}

/* WF Resource "WFWidgets.WebElement" (6EDB::1987::6EDB::747) */

.wf-webelement {
	white-space: normal;
}
.wf-webelement.vflex,
.vflex-auto {
	height: 100%;
	box-sizing: border-box;
}

/* WF Resource "WFWidgets.Window" (6EDB::1987::6EDB::636) */


/* TODO: Heeft generieke styling voor ".mist" elementen. Hadden die niet globaler moeten staan? */

.mist {
	background-color: rgba(0,0,0,0.3);
	text-align: center;
	white-space: nowrap;
}

.wf-window {
	position: absolute;
	display: block;
	top: 10px;
	left: 10px;
	-webkit-overflow-scrolling: touch;
}

.wf-window .sizer {
	position: absolute;
	bottom: 0;
	right: 0;
	cursor: nw-resize;
}

.wf-window > .content > .loading {
	background: #E0E0E4 url('../../images/window-loader.gif') center center no-repeat;
}

.wf-window {
	/* don't set minimum size here. Set it on .wf-window>.content instead */
	background-color: white;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	border:none;
	border-radius: 4px;
	box-sizing: content-box;

	display: grid;
	grid-template-rows: auto auto auto;
	grid-template-columns: auto;
	grid-template-areas: "header" "content" "footer";

	display: -ms-grid;
	-ms-grid-rows: auto auto auto;
	-ms-grid-columns: auto;
}

.wf-window.wf-window-fullscreen,
.wf-window.wf-window-stripped {
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 1fr;

	-ms-grid-rows: auto 1fr auto;
	-ms-grid-columns: 1fr;
}

.wf-window-stripped {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius: 0;
}

.wf-window > .header {
	grid-area: header;
	-ms-grid-row: 1;
	-ms-grid-column: 1;

	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr auto;
	grid-template-areas: "title actions";
	align-items: center;

	display: -ms-grid;
	-ms-grid-rows: 1fr;
	-ms-grid-columns: 1fr auto;

	min-height: 20px;
	cursor: default;
	background: #F4F4F4;
	border-bottom: 1px solid #DDD;
	line-height: 25px;
	padding: 10px 4px 10px 10px;
	border-radius: 4px 4px 0px 0px;
}

.wf-window > .header .title {
	grid-area: title;
	-ms-grid-row: 1;
	-ms-grid-column: 1;

	font-size: 1.4em;
	text-shadow: 1px 1px 1px white;
}

.wf-window > .header .actions {
	grid-area: actions;
	-ms-grid-row: 1;
	-ms-grid-column: 2;

	display: inline-flex;
	align-items: center;
}

.wf-window > .header .actions a {
	display: inline-block;
	color: #ccc;
	text-decoration: none;
	text-shadow: 1px 1px 1px white;
	font-size: 150%;
	width: 28px;
	text-align: center;
}

.wf-window > .header .actions a.maximize {
	font-size: 140%;
}

.wf-window > .header .actions a.disabled {
	opacity: 0.3;
	cursor: default;
}

.wf-window > .header .actions a:not(.disabled):hover {
	color: white;
	text-shadow: 0px 0px 2px white;
}

/* #305720: NO BORDER/PADDING/MARGIN on .content; the element needs to be "clean" for accurate size-measurements */
.wf-window > .content {
	grid-area: content;
	-ms-grid-row: 2;
	-ms-grid-column: 1;

	position: relative;
	overflow: auto;
	min-width: 200px;
	min-height: 60px;
	border: none;
	margin: 0;
	padding: 0;
}

.wf-window > .footer {
	grid-area: footer;
	-ms-grid-row: 3;
	-ms-grid-column: 1;

	display: block;
	position: relative;
	min-height: 12px;
	white-space: nowrap;
	padding:10px;
	border-top:1px solid #f2f2f2;
}

.wf-window > .sizer {
	width: 24px;
	height: 24px;
	background: transparent url("../../images/window-sizer.gif") no-repeat bottom right;
	opacity: 0.5;
}

.wf-window > .content > .dialog {
	padding: 10px;
	height:100%;
	box-sizing:border-box;
}

.wf-window > .content > .dialog > .display:not(.hidden) {
	padding: 5px 0px 5px 0px;
}

/* #142496/#152748 - intentionally make the dialog just a bit too big for its container to avoid a peekaboo bug in Safari on iPads/iPhones */
.ipad .wf-window > .content > .dialog {
	box-sizing: content-box;
	border-bottom: 1px solid transparent;
}

/* WF Resource "WFWidgets.Control" (6EDB::1987::6EDB::621) */

.wf-control {
	display: block;
	padding: 0;
	margin: 0;
	white-space: nowrap;
	x-overflow: hidden; /* experimentally disabled (#95918) */
	box-sizing: border-box;
}

.wf-control.vflex {
	height: 100%;
}

.wfi-control-label,
.wfi-control-control {
	display: inline-block;
	vertical-align: top;
}

.wfi-control-control {
	height: 100%;
}

.wfi-control-control fieldset {
	display: block;
	padding: 4px;
}

span.wfi-label {
	display: block;
	padding: 0;
	margin: 0;
	white-space: nowrap;
}

span.wfi-label label {
	display: inline-block;
	box-sizing:border-box;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 1px 0px;
}

.wf-control legend.wfi-label label {
	padding: 0px 4px;
}

span.wfi-control-icon-1 {
	padding-right: 22px;
}
span.wfi-control-icon-2 {
	padding-right: 44px;
}

.wfi-label .icon {
	width: 16px;
	height: 16px;
	vertical-align: top;
	cursor: default;
	color: #999999;
	padding: 7px 3px 0px 3px;
	font-size: 1.2em;
}
.wf-control i.icon,
.wf-control a i.icon {
	display: inline-block;
	text-align: center;
}

.wf-control .wfi-label label {
	height: 2.2em; /* best when the same as .wf-input input (either px or input and label should use the same font) */
	display: inline-block;
	padding: 4px 0px 4px 0px;
}

.wf-control .wf-label-above label {
	height: auto;	/* meerregelige labels toestaan */
	min-height: 2.2em;
	white-space: normal;
}

.wf-control legend.wf-label label {
	height: auto;
}

.wf-control .wf-label img {
	margin-top: 4px;
}



.wf-control .wf-illegal label,
.wf-control i.icon.wf-illegal {
	color: #D43F39;
}
.wf-control .wf-illegal input,
.wf-control .wf-illegal select,
.wf-control .wf-illegal textarea {
	border-color: #D43F39;
}
.wf-control .wf-illegal input[type="checkbox"] {
	box-shadow: 0px 0px 2px 2px #D43F39;
}
.wf-control .wf-illegal .wf-togglegroup-control input[type="checkbox"] {
	box-shadow: none;
}

.wf-control .wf-suspect label,
.wf-control i.icon.wf-suspect {
	color: #EAA211;
}
.wf-control .wf-suspect input,
.wf-control .wf-suspect select,
.wf-control .wf-suspect textarea {
	border-color: #EAA211;
}
.wf-control .wf-suspect input[type="checkbox"] {
	box-shadow: 0px 0px 2px 2px #EAA211;
}
.wf-control .wf-suspect .wf-togglegroup-control input[type="checkbox"] {
	box-shadow: none;
}

.wf-control i.icon.wf-nicetohave {
	color: #109DD9;
}

.wf-control i.icon.wf-custom {
	color: #06967F;
}

.wf-bounded-control {
	max-width: 450px;
	min-width: 350px;
}
/* stijl voor die situaties waarin de label er niet toe doet voor de breedte */
.wf-bounded-nolabel {
	max-width: 225px;
	min-width: 175px;
}

/* WF Resource "WFWidgets.ControlPrefix" (6EDB::1987::6EDB::641) */

.wfi-control-prefix {
	display: block;
	padding: 0;
	margin: 0;
	white-space: nowrap;
}

.wfi-control-prefix .icon {
	display: inline-block;
	color: #999999;
	padding: 1px 0px 0px 5px;
	font-size: 1.2em;
}

.wfi-control-prefix-layered {
	display: block;
}

.wfi-control-prefix-layered img {
	margin-left: 4px;
	margin-top: 4px;
}

.wfi-control-prefix-container {
	display:inline-block;
	overflow:hidden;
	text-overflow:ellipsis;
	vertical-align:top;
	max-width:100%;
}

.wfi-control-prefix-control {
	vertical-align:middle;
	margin-right: 0.2em;
}

.wf-control-prefix {
	margin:0px 5px 0px 0px;
	padding:2px 0px 2px 0px;	/* top/bottom via padding i.p.v. margin i.v.m. vflex */
}

/* WF Resource "WFWidgets.Layered" (6EDB::1987::6EDB::748) */

.wf-input {
	padding-bottom: 4px;	/* via padding, niet margin i.v.m. vflex */
}

/* WF Resource "WFWidgets.Input" (6EDB::1987::6EDB::623) */

.wfi-input {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	white-space: nowrap;
}

.wfi-input input,
.wfi-input .fauxinput {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

.wfi-input-buttons {
	display: inline-block;
	padding: 0;
	margin: 0;
}

.wfi-input-button {
	display: inline-block;
	box-sizing: border-box;
}

.wfi-input-button img {
	display: inline-block;
	border: 0;
	width: 16px;
	height: 16px;
/*	vertical-align: middle;*/
}

.wf-input input::-ms-clear {
	display: none;
}

.wf-input input,
.wf-input .fauxinput,
.wf-input-button {
	height: 2.2em; /* either specify in pixels, or make sure both the input and the .wf-input-button use the same font (tends to differ in some browsers) */
	border: 1px solid #CCC;
	border-radius: 2px;
	-webkit-appearance:none;
	vertical-align: top;
}

.wf-input input,
.wf-input .fauxinput {
	background-color: white;
	padding: 4px;
	overflow: hidden;
}

.wf-input-disabled input,
.wf-input-disabled .fauxinput {
	background-color: #F2F2F2;
	color: #3D3D3D;
	text-shadow: 1px 1px 0px white;
}

.wf-input input:focus {
	outline: none;
}

.wf-input input.focus-input:focus {
	outline: 1px solid #000000;
}

.wf-input-disabled input:focus {
	text-shadow: none;
}

.wf-input .clear {
	display: inline-block;
	box-sizing: border-box;
	visibility: hidden;		/* no display:none due to issues with the opacity-transition */
	opacity: 0;
	width: 20px;
	margin: 0 0 0 -20px;
	line-height: 1.1em;
	height: 1.1em;
	font-size:200%;
	vertical-align: top;
	color: #CCCCCC;
	border: 1px solid #cccccc;
	border-left: none;
	background-color: white;
	text-align: center;
	transition:none;
	text-decoration: none;
}
.wf-illegal .wf-input .clear {
	border-color: #D43F39;
}
.wf-suspect .wf-input .clear {
	border-color: #EAA211;
}
.wf-input .clearable:hover .clear,
.wf-input input:focus + .clear {
	display: inline-block;
	visibility: visible;
	opacity: 1;
}
.wf-input .clearable input:focus + .clear {
	transition: none;
}
.wf-input .clearable:hover .clear {
	transition: opacity 0.1s ease 0.3s;
}
.wf-input .clearable .clear:hover {
	transition: none;
}
.wf-input .clear:hover {
	text-decoration:none;
}
.wf-input .clearable:hover input {
	padding-right: 21px;
	transition: padding 0s ease 0.3s;
}
.wf-input .clearable input:focus {
	padding-right: 21px;
	transition: none;
}

.wf-input-button {
	outline: none;
	cursor: pointer;
	margin-left: -1px;
	padding: 4px;
	color: #404040;
	border: 1px solid #CCC;
	background: #EDEDED;
 	box-shadow: inset 0px 0px 1px 1px white, inset 0px -0.75em 2px 1px #E0E0E0;
}

.wf-input-button,
.wf-input-button:hover {
	text-decoration: none;
}

:root *> .wf-input-button { /* all but IE6-8 */
	filter: none;
}

.wf-input-button::-moz-focus-inner {
	border: 0;
}

.wf-input-button:focus {
	border-color: #7AA4C0;
	box-shadow: inset 0px 0px 1px 1px #9ED3F7, inset 0px -0.75em 2px 1px #D8D8D8;
}

.wf-input-button img {
	vertical-align: middle;
}

.wf-input-button span {
	display: inline-block;
	min-width: 3.5em;
	text-align: center;
}

.wf-input-button:hover {
	cursor: pointer;
	border-color: #7AA4C0;
	background-color: #C9E7F7;
	box-shadow: 0px 0px 2px 2px #C9E7F7, inset 0px 0px 1px 1px white, inset 0px -0.75em 2px 1px #8CCAEB;
}

:root *> .wf-input-button:hover { /* all but IE6-8 */
	filter: none;
}

.wf-input-button:hover:active {
	box-shadow: 0px 0px 2px 2px #C9E7F7, inset 0px 0px 0px 1px #516D7F, inset 0px -0.75em 2px 1px #8CCAEB;
}


.wf-input-button-disabled,
.wf-input-button-disabled:hover {
	cursor: default;
	border-color: #CCC;
	background: #EDEDED; 
	color: #6D6D6D;
	text-shadow: 1px 1px 0px white;
	box-shadow: none;
}

.wf-input-button-disabled:hover:active {
	box-shadow: none;
}

.wf-input-button-disabled img {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
	-webkit-filter: grayscale(1);
	filter: gray;	/* IE6-9 */
}


/* WF Resource "WFWidgets.GroupBox" (6EDB::1987::6EDB::666) */

/* TODO: hoort de wf-label-fieldset wel hier te zitten? We zouden eigenlijk op generieker niveau de
 fieldset zelf moeten stylen, maar dat is geen optie meer omdat we voor vflex-ness een omliggend
 element nodig hebben... (#218733) */

.wf-groupbox,
.wf-label-fieldset {
	padding: 0.6em 0 0.1em 0;
	box-sizing: border-box;
}
.wf-groupbox.vflex {
	height: 100%;
}
.wf-groupbox:not(.vflex) > fieldset {
	margin-bottom: 5px;
}

.wf-groupbox > fieldset,
.wf-label-fieldset > fieldset {
	border: 1px solid #EAEAEA;
	border-radius: 4px;
	box-sizing: border-box;
	padding: 0.75em 10px 5px 10px;
	height: 100%;
	margin: 0;
}
.wf-label-fieldset-nolabel > fieldset {
	padding-top: 0.25em;
}

.wf-groupbox-collapsable > fieldset > legend {
	cursor: pointer;
}

.wf-groupbox-collapse img {
	vertical-align: top;
}

.wf-groupbox > fieldset > legend,
.wf-label-fieldset > fieldset > legend {
	font-weight:bold;
	color:#505050;
	height: 0;				
	position: relative;
	top: -0.65em;
	padding: 0 5px;
}

.wf-groupbox > fieldset > .container {
	box-sizing:border-box;
	height: 100%;
}


/* WF Resource "WFWidgets.IconBox" (6EDB::1987::6EDB::683) */

.wf-iconbox {
	box-sizing:border-box;
}
.wf-iconbox.vflex {
	height: 100%;
}
.wf-iconbox-container {
	box-sizing: border-box;
	height: 100%;
}

/* WF Resource "WFWidgets.ListView" (6EDB::1987::6EDB::659) */


/* View: Content */

.wf-view .view-panel {
	background-color: white;
	overflow: auto;
	border-left: 1px solid #707070;
	border-right: 1px solid #707070;
}

/* #102127 - mogelijkerwijs achterhaalde hack
.ipad .wf-view .view-panel {
	overflow: inherit;	/ #78200 /
}
*/
.wf-view .view-panel-noheader {
	border-top: 1px solid #707070;
}

.wf-view .view-panel-nofooter {
	border-bottom: 1px solid #707070;
}

.wf-view .view-panel,
.wf-view .view-title,
.wf-view .view-footer {
	padding-left: 3px; /* All 3 elements at once. These MUST be the same for IE6/IE7 */
	padding-right: 3px;
}

.wf-view table {
	empty-cells: show;
	border-collapse: collapse;
}

.wf-view thead {
	border-bottom: 1px solid #707070;
}

.wf-view thead th {
	text-align: left;
	border-bottom: 1px solid #707070;
	padding: 4px;
	white-space: nowrap;
}

.wf-view tbody td {
	border-bottom: 1px dotted #707070;
	padding: 4px;
	vertical-align: top;
	white-space: nowrap;
}
.wf-view tbody td[data-column="dialog"] {
	padding-left: 20px;
	border-left: 52px solid #F0F0F0;
}
.view-row-expanded .view-expansion-column {
	background-color: #F0F0F0;
}


.wf-view td.right,
.wf-view th.right,
.wf-view td.right input,
.wf-view td.right textarea {
	text-align: right;
}

.wf-view td.center,
.wf-view th.center,
.wf-view td.center input,
.wf-view td.center textarea {
	text-align: center;
}

.wf-view td.right>*,
.wf-view td.right>.wrap>*,
.wf-view td.right>.ellipsis>* {
	margin-left: auto;
}

.wf-view td.center>*,
.wf-view td.center>.wrap>*,
.wf-view td.center>.ellipsis>* {
	margin-left: auto;
	margin-right: auto;
}

.wf-view div.wrap {
	white-space: normal;
	overflow: hidden;
}
.wf-view div.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wf-view td.nolabel .mandatory input,
.wf-view td.nolabel .mandatory select {
	background-color: #FFE0E0;
}

.wf-view td.nolabel .widgets-iconlink-disabled {
	cursor: default;
}


/* View: Title */

.wf-view .view-title {
	border: 1px solid #707070;
	padding-top: 2px;
	padding-bottom: 2px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-color: #ADB6CB;
	font-weight: bold;
	color: #36393F;
}


/* View: Footer */

.wf-view .view-footer {
	border-bottom: 1px solid #DDD;
	border-top: 1px solid #DDD;
	background-color: #F2F2F2;
	padding-top: 3px;
	padding-bottom: 3px;
}

.wf-view .view-actions {
	line-height: 1.5em;
}

.wf-view .view-selection-actions {
	float: left;
	margin-right: 10px;
}

.wf-view .view-actions .view-pageselect {
	display: inline-block;
	float: right;
	white-space: nowrap;
} 

.wf-view .view-actions .view-info {
	display: inline-block;
	float: left;
	white-space: nowrap;
	padding-left:5px;
	color: #808080;
} 

.wf-view .view-actions .view-pageof {
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
}

.wf-view .view-footer .clear {
	clear: both;
}



/* View: Empty row */

.wf-view .view-emptyrow {
	text-align: center;
	color: #707070;
}

/* View: Column headers */

.wf-view .view-column-sortable {
	cursor: pointer;
}

.wf-view .sorticon {
	font-family: Courier;
	font-size: 10pt;
	color: #707070;
	margin-left: 4px;
}


/* Selection column */

.wf-view .view-selection-column .wf-checkbox,
.wf-view .view-selection-column .wf-checkbox {
	margin: 0;
	padding: 0;
}

.device-category-tablet .wf-view .view-selection-column input,
.device-category-phone .wf-view .view-selection-column input {
	width: 20px;
	height: 20px;
}

/* Delete column & Task menu column*/

.view-delete-column i,
.view-taskmenu-column i {
	font-size:16px;
	opacity:0.8;
	border:1px solid #DDD;
	border-color: #E6E6E6 #E6E6E6 #959999;
	border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	padding:4px 5px 3px 5px;
	border-radius:2px;
	background: linear-gradient(to bottom, #FFFFFF 0%, #E6E6E6 100%) repeat scroll 0 0 	rgba(0, 0, 0, 0);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}

.view-delete-column i:hover,
.view-taskmenu-column i:hover {
	text-decoration: none;
	border:1px solid #CCC;
	opacity:1.0;
	cursor:pointer;
	background:#F2f2f2;
}

.view-delete-column .widgets-iconlink-disabled i,
.view-delete-column .widgets-iconlink-disabled i:hover,
.view-taskmenu-column .widgets-iconlink-disabled i,
.view-taskmenu-column .widgets-iconlink-disabled i:hover {
	color: #CCC;
	opacity: 0.5;
	background: #F2f2f2;
	border:1px solid #DDD;
	cursor: auto;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.view-delete-column a, .view-taskmenu-column a {
	color:#808080;
}


.device-category-phone .view-delete-column,
.device-category-tablet .view-delete-column,
.device-category-phone .view-taskmenu-column,
.device-category-tablet .view-taskmenu-column {
	font-size: 20px;
}


/* View: navigation buttons */

.wf-view .view-button {
	display: inline-block;
	padding: 0px;
	margin: 0px 2px;
	text-decoration: none;
	color: #AAA;
	width: 20px;
	text-align: center;
}

.wf-view .current.view-button,
.wf-view .current.view-button:hover {
	background-color: #BBB;
	border: 2px solid #CCC;
	color: #7A818E;
}

.wf-view .view-button:hover {
	background-color: #CCC;
}

.wf-view .view-button.gap:hover {
	background-color: transparent;
}

.wf-view .view-button:active {
	position: relative;
	top: 1px;
	left: 1px;
}

.wf-view .view-button-disabled,
.wf-view .view-button-disabled:hover,
.wf-view .view-button-disabled:active {
	background-color: inherit;
	cursor: default;
	color: #CCC;
	top: 0px;
	left: 0px;
}

/* View: sub-controls */

.wf-view .widgets-checkbox {
	width: auto;
}


/* WF-VIEW */

.wf-view table {
	width: 100%;
}

.wf-view {
	margin-bottom:6px;
}

.wf-view.vflex {
	box-sizing: border-box;
	height: 100%;
	margin-bottom: 0px;
}
.wf-view.vflex > .view-panel {
	height: 100%;
}

.wf-view .view-panel, .wf-view .view-title, .wf-view .view-footer {
	padding-left:0px;
	padding-right:0px;
}

.wf-view thead {
	border-bottom: 1px solid #C0C0C0;
	border-top: 1px solid #C0C0C0;
}

.wf-view .view-panel-nofooter {
	border-bottom:none;
}

.wf-view thead th {
	border-bottom:none;
	white-space: normal;
}

.wf-view .view-panel-noheader {
	border-top:none;
}

.wf-view .view-panel {
	border:none;
}

.wf-view thead th, .wf-view tbody td, .wf-view tfoot td {
	padding: 6px;
}

.wf-view tbody td {
	border-bottom: 1px solid #f2f2f2;
}

.wf-view tfoot td {
	border-top: 1px solid #C0C0C0;
}

.wf-view thead th.view-selection-column {
	border-right: none;
}

.wf-view .wf-stack {
	margin-top: 0px;
}

.wf-view a.widgets-hyperlink {
	color: #117696;
	text-decoration:none;
}

.wf-view a.widgets-hyperlink:hover {
	text-decoration:underline;
}

.wf-view tr.view-row-marked {
	background-color: #f2f2f2;
}

.wf-view.clickable tbody tr:hover {
	background-color: #f2f2f2;
}

.wf-view.layoutfixed table {
	table-layout: fixed;
}

/*#91.194*/
.mobile-app-mode .wf-view.clickable tbody tr:hover{
	background-color: transparent;
}

.wf-view.clickable tbody td.clickable {
	cursor: pointer;
}

.listview-minimal-padding thead th, .listview-minimal-padding tbody td
{
	padding: 2px;
} 	

/* END WF-VIEW */


.wf-view thead {
	border-top:1px solid #f2f2f2;
}

.wf-view thead th {
	background:#FFF;
	color:#666;
	font-weight:normal;
	text-transform:uppercase;
	letter-spacing:0.5px;
	font-size:12px;
	border-bottom:2px solid #F2F2F2;
}

.wf-view thead th:hover {
	background:#F2F2F2;
}

.wf-view tbody td,
.wf-view tfoot td {
	padding:10px 5px;
}

.wf-view thead th {
	padding:4px 5px;
}

.view-emptyrow {
	height:50px;
	line-height:30px;
}

.view-emptyrow td {
	color:#808080;
}

/* volledige breedte is niet handig binnen listviews (#365687) */
.wf-view .wf-line {
	display: inline-flex;
}

/* WF Resource "Widgets.Listbox" (6EDB::1987::6EDB::750) */


/***************************** WF: Listbox **********************/
/* Base application complete, Base controls */

/********** LISTBOX **********/

.widgets-listbox {
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.widgets-listbox.vflex {
	height: 100%;
	box-sizing: border-box;
}

.widgets-listbox.vflex .listbox-data {
	height: 100%;
}

.widgets-listbox .listbox-title img {
	vertical-align: top;
	margin-right: 5px;
}

.widgets-listbox .listbox-title {
	margin-top: 2px;
	padding: 2px 4px 2px 4px;
}

.widgets-listbox .listbox,
.widgets-listbox .row,
.widgets-listbox .selectedrow,
.widgets-listbox .header,
.widgets-listbox .cell {
	border: 1px solid #A5ACB2;
	white-space: nowrap;
}

.widgets-listbox .cell {
	vertical-align: top;
}

.widgets-listbox .cell img {
	border: 0px;
}

.widgets-listbox .listbox {
	border-spacing: 0px;
	border-collapse: collapse;
	empty-cells: show;
	margin: 0px 0px 5px 0px;
}

.widgets-listbox .listbox-data {
	overflow: auto;
}

/* #175020: Hide extra label element that allows for "fancy checkboxes". Override in fancy checkbox styling */
.widgets-listbox .listbox-mark + .label,
.widgets-listbox .listbox-markall + .label {
	display: none;
}
.widgets-listbox .listbox-markall {
	opacity: 0.7;
}

/* #102127 - mogelijkerwijs achterhaalde hack
.ipad .widgets-listbox .listbox-data {
	overflow: inherit;	/ #78200 /
}
*/
.widgets-listbox .right {
	text-align: right;
}
.widgets-listbox .center {
	text-align: center;
}

.widgets-listbox .head {
  border-bottom:1px solid #DDD;
}

.widgets-listbox .odd {
	background-color: white;
}

.widgets-listbox .anchor {
	text-decoration: none;
	color: black;
}

.widgets-listbox .even {
	background-color: #E8EEF9;
}

.widgets-listbox .row,
.widgets-listbox .header,
.widgets-listbox .cell {
	padding: 1px 3px 1px 3px;
	margin: 0px 0px 0px 0px;
	cursor: pointer;
}

.widgets-listbox .marked {
	background-color: #D3D5E2;
}

.widgets-listbox .hover {
	background-color: #D4D5D8;
}

.widgets-listbox .selected {
	background-color: #A0201E;
}

.widgets-listbox .selected a {
	color: white;
}

.widgets-listbox .emptyrow {
	text-align: center;
	height: 2em;
	line-height: 2em;
	color: #808080;
}

.widgets-listbox .filtercell {
	padding: 0;
	margin: 0;
}
.widgets-listbox .filtermessage {
	white-space: nowrap;
	padding: 1px 20px 1px 4px;
	outline: 1px solid #CC8616;
	background-color: #FFE4AB;
	overflow: hidden;
}

.widgets-listbox .filtermessage span {
	display: inline-block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.widgets-listbox .filtermessage a {
	vertical-align: top;
}

.widgets-listbox .filterchoice {
	margin-left: 0;
	padding-left: 0;
	padding-right: 0;
	min-width: 1em;
	text-align: center;
}

.filterchoicepopup {
	border: 1px solid #808080;
	background-color: white;
	box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
	text-align: left;
	white-space: nowrap;
	padding: 4px;
}
.filterchoicepopup .wf-togglegroup-control .label {
	white-space: nowrap;
}

.widgets-listbox .filterrow a {
	display: inline-block;
	text-align: center;
	width: 20px;
	font-weight: bold;
	color: #CC8616;
	text-decoration: none;
}

.widgets-listbox .buttonbar {
}

.widgets-listbox .navigation,
.widgets-listbox .buttons,
.widgets-listbox .tasks,
.widgets-listbox .filter {
	display: inline-block;
}

.widgets-listbox .filter,
.widgets-listbox .navigation {
	white-space: nowrap;
	padding-top: 2px;
	padding-bottom: 2px;
}

.widgets-listbox .filter,
.widgets-listbox .buttons {
	margin: 0px 20px 0px 0px;
}

.widgets-listbox .navigation .position {
	text-align: center;
}


/***************************** WF: Listbox overlay **********************/
/* Base application complete, Base Controls overlay, Portal centered (Standard) */

/* <<START>> LISTBOX */

.widgets-listbox table {
	width: 100%;
	border-collapse: collapse;
	border-left: 1px solid #DDD;
	border-right: 1px solid #DDD;
}

.widgets-listbox .listbox, .widgets-listbox .row, .widgets-listbox .selectedrow, .widgets-listbox .header, .widgets-listbox .cell {
	border: none;
	padding: 6px;
	background-color: transparent;
	
}

.widgets-listbox .row, .widgets-listbox .row td {
	border-bottom: 1px dotted #C0C0C0;
	line-height: 16px;
}

.widgets-listbox .header, .widgets-listbox th {
	text-align: left;
}

.widgets-listbox .emptycell {
	text-align:center;
}

.widgets-listbox .listbox {
	border-bottom: 1px solid #DDD;
	padding: 0px;
}

.widgets-listbox a:hover {
	text-decoration: none;
}

.widgets-listbox .hover, .widgets-listbox .hover td, .widgets-listbox .selected, .widgets-listbox .selected td {
	background-color: #f2f2f2;
} 

.widgets-listbox .listbox {
	width: 100%;
	max-width: 100%;
}

.widgets-listbox a, .widgets-listbox .selected a {
	color:#404040;
}

.widgets-listbox .right {
	text-align: right;
}
.widgets-listbox .center {
	text-align: center;
}

/*
.widgets-listbox {
	overflow-y: hidden;
}
*/

.actionbar {
	display:inline-block;
	/* inline-block fix voor IE(8):*/
	margin-right:1px;
}

.actionbar .search, .actionbar .navigation {
	margin-right:10px;
}

.widgets-listbox .buttonbar {
	display:inline-block;
	/* inline-block fix voor IE(8):*/
	margin-right:1px;
}

.widgets-listbox .cell img {
	vertical-align:middle;
}


/* <<EINDE>> LISTBOX */



/**************************** Tables overlay **************************/
/* Professional sidebar overlay */

.widgets-listbox .listbox thead {
	border-top:1px solid #f2f2f2;
}

.widgets-listbox .listbox thead th {
	background:#FFF;
	color:#666;
	font-weight:normal;
	text-transform:uppercase;
	letter-spacing:0.5px;
	font-size:12px;
	border-bottom:2px solid #F2F2F2;
}

.widgets-listbox .listbox thead th:hover {
	background:#F2F2F2;
}

.widgets-listbox .listbox tbody td, .widgets-listbox .listbox tfoot td {
	padding:10px 5px;
}

.widgets-listbox .listbox thead th{
	padding:4px 5px;
}

.widgets-listbox .emptyrow {
	height:50px;
	line-height:30px;
}

.widgets-listbox .emptyrow td {
	color:#808080;
}

/* WF Resource "Widgets.Hyperlink" (6EDB::1987::6EDB::658) */

.widgets-hyperlink {
	padding: 5px 0;
	white-space: normal;
}
.widgets-hyperlink a {
	display: inline-block;
	line-height: 1.5em;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	vertical-align: top; /* avoid overhang spacing on the .widgets-hyperlink element due to the overflow:hidden baseline shift */
}
.widgets-hyperlink i.icon {
	margin-right:5px;
}
.widgets-hyperlink img {
	width: 16px;
	height: 16px;
	border: 0px;
	margin-right: 5px;
	vertical-align: text-bottom;
}

/* WF Resource "Widgets.IconLink" (6EDB::1987::6EDB::751) */

.widgets-iconlink {
	padding: 5px 0;
}

.widgets-iconlink img {
	vertical-align:text-bottom;
}

/* WF Resource "Widgets.Button" (6EDB::1987::6EDB::655) */


/* TODO: moet in z'n geheel anders opgepakt worden. Alternatieve css klassen eruit en overal waar buttons gebruikt worden de "widgets-button" toevoegen? */

button::-moz-focus-inner,input[type='button']::-moz-focus-inner {
	border-width: 0;
	padding: 0;
}

.widgets-button, .filterbutton, .filterchoice, .navigation input {	
	display: inline-block;
	padding: 4px 7px;
	margin-bottom: 0;
/*	font-size: 1em; /* lijkt nodig om de font-size van de parent over te nemen... */
/*	line-height: 1.5em;*/
	font-size: 13px;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	white-space: nowrap;
}

.widgets-button {
	margin-right:5px;
	margin-bottom:5px;
	text-decoration:none;
}
.wf-line .widgets-button,
.widgets-button.flex {
	margin-right:0px;
}

.navigation input {
	margin-right:3px;
}

.widgets-button.flex {
	width: 100%;
}

.widgets-button > .icon {
	/* zou in theorie gelijk moeten zijn aan de label-margin om het geheel netjes te centreren,
	maar dan lijkt het alsof hij te ver naar rechts staat. Opzettelijke "bias" naar links, dus */
	margin-left: 0px;
	margin-right: 0px;
}
.widgets-button > img.icon {
	vertical-align:top;
}
.widgets-button > .label {
	margin-left: 5px;
	margin-right: 5px;
}

.widgets-button:hover, .widgets-button-active, .filterbutton:hover, .filterchoice:hover, .navigation input:hover
{
	text-decoration: none;
	-webkit-transition: background-position .1s linear;
	-moz-transition: background-position .1s linear;
	-o-transition: background-position .1s linear;
	transition: background-position .1s linear;
}

.widgets-button-disabled, .navigation input[disabled],.navigation input.position, .navigation input.position:hover  {
	cursor: default;
	background-image: none;
	opacity: .85;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.navigation input.position, .navigation input.position:hover {
	background:#f2f2f2;
	cursor: default;
	border:1px solid #DDD;
}

.button-large.widgets-button {
	font-size: 17.5px;
	padding: 11px 19px;
}

.button-small.widgets-button {
	font-size: 11.9px;
	padding: 2px 10px;
}

.button-mini.widgets-button {
	font-size: 10.5px;
	padding: 0 6px;
}



.widgets-button, input[type='button'] {
	border:1px solid #CCC;	
	border-radius:2px;
	box-shadow:2px 2px 4px #f2f2f2;
	background:#F9F9F9;
	color:#444;
	-webkit-appearance: none;
}

.widgets-button-disabled.widgets-button, .widgets-button[disabled] {
	opacity:0.5;
	box-shadow:none;
	cursor:default;
}

.widgets-button:hover, input[type='button']:hover {
	background:#FFF;
	box-shadow:none;
}


/* WF Resource "Widgets.Dialog" (6EDB::1987::6EDB::760) */

.widgets-dialog {
	border: 0px;
	width: 100%;
	background-color: transparent;
}

.widgets-dialog.vflex {
	height: 100%;
	box-sizing: border-box;
}
.widgets-dialog.vflex>.container {
	height: 100%;
	overflow: auto;
}

.widgets-dialog>.title {
	display: none;
}

/* note: .display is technically a sub-element of widgets-dialog,
   but is also used by a display content within the dialog */
.display .displayblock {
	margin-bottom: 3px;
	position: relative;
	white-space:normal;
	padding: 2px;
}

.display i.icon {
	position: absolute;
	left: 5px;
	top: 4px;
	font-size: 1.2em;
	line-height: 20px;
}

.display .error {
	border: 1px solid #E5ACAC;
	background-color: #FFEAEA;
	color: #D43F39;
}
.display .error i.icon {
	color: #D43F39;
}

.display .suspect {
	border: 1px solid #E8DA47;
	background-color: #FFF6E8;
	color: #BC820F;
}
.display .suspect i.icon {
	color: #EAA211;
}

.display .info {
	border: 1px solid #3A85FF;
	background-color: #E5EFFF;
	color: #0F96C6;
}
.display .info i.icon {
	color: #109DD9;
}

.display ul {
	list-style-type: none;
	margin: 0px;
	padding-left: 22px;
	padding-right: 20px;
}

.display ul li {
	margin: 3px 0;
	padding: 0px;
}

.widgets-dialog>.buttonbox {
	display:none;
}

.widgets-dialog>.status {
	display: none;
}

/* WF Resource "WFWidgets.AzureMaps" (6EDB::1987::6EDB::736) */



/* WF Resource "WFWidgets.MapSidebar" (6EDB::1987::6EDB::738) */



/* WF Resource "WFWidgets.VSplitter" (6EDB::1987::6EDB::752) */

.wf-vsplitter {
	position:relative;
	height:100%;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.wf-vsplitter .top {
	overflow:auto;
}
.wf-vsplitter .lower {
	position:relative;
}
.wf-vsplitter .bottom {
	overflow:auto;
	height:100%;
}

.wf-vsplitter .splitter {
	border-bottom:1px solid #CCC;
	border-top:1px solid #CCC;
	border-left:none;
	border-right:none;
	cursor:n-resize;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

/* WF Resource "WFWidgets.Splitter" (6EDB::1987::6EDB::753) */

.wf-splitter {
	white-space:nowrap;
	position: relative;
}

.wf-splitter.vflex {
	height:100%;
	position: static;
}

.wf-splitter > div {
	height: 100%;
	overflow: hidden;
}

.wf-splitter .splitter {
	display: inline-block;
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
	cursor:e-resize;
	box-sizing:border-box;
	height: 100%;
	vertical-align: top;
	position: absolute;
}
.wf-splitter.vflex .splitter {
	position: static;
}
.wf-splitter.dragging {
	position:relative;
}
.wf-splitter.dragging:after {
	content: "";
	position:absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.wf-splitter > div > .left,
.wf-splitter > div > .right {
	display:inline-block;
	height:100%;
	vertical-align:top;
	overflow:auto;
}

/* WF Resource "WFWidgets.Panel" (6EDB::1987::6EDB::754) */


.wf-panel-valign {
	display: inline-block;
	width:0px;
	height:80vh;	/* panel wordt gecentreerd op basis van dit element */
	vertical-align:middle;
}

.wf-panel {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	overflow:hidden;
	max-width: 90vw;
	vertical-align: middle;

	border: 1px solid #CCC;
	background-color: white;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	border-radius: 3px;
}

/* Content panel */

.wf-panel>.content {
	overflow: auto;
	max-height: 90vh;
}
.wf-panel.hasactions>.content {
	max-height: calc(90vh - 40px);
}
.wf-panel>.actions {
	display: none;
}
.wf-panel.hasactions>.actions {
	display: block;
}

/* Actions */

.wf-panel>.actions {
	border-top: 1px solid #CCC;
	box-sizing: border-box;
	height: 40px;
	white-space:nowrap;
}
.wf-panel>.actions>.action {
	width: 100%;
	display: inline-block;
	text-align:center;
	border: 0;
	border-left: 1px solid #ccc;
	height: 100%;
	box-sizing:border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	padding:0;
}
.wf-panel>.actions>.action:first-child {
	border-left: 0px;
}
.wf-panel>.actions>.action.default {
	background-color: #C0E0FF;
}

.wf-panel>.actions>.action:first-child:nth-last-child(2),
.wf-panel>.actions>.action:first-child:nth-last-child(2) ~ .action {
	width: 50%;
}

.wf-panel>.actions>.action:first-child:nth-last-child(3),
.wf-panel>.actions>.action:first-child:nth-last-child(3) ~ .action {
	width: 33.33%;
}

/* Icon */

.wf-panel>.content>.icon {
	width: 80px;
	display: none;
	vertical-align: top;
	padding-top: 30px;
}
.wf-panel.hasicon>.content>.icon {
	display: inline-block;
}
.wf-panel>.content>.display {
	display: inline-block;
	width: 100%;
	box-sizing:border-box;
	padding-right:20px;
	padding-left: 20px;
}
.wf-panel.hasicon>.content>.display {
	width: calc(100% - 80px);
	padding-left: 0px;
}

/* Display */

.wf-panel>.content>.display>.title {
	font-size: 120%;
	font-weight: bold;
	text-align: left;
	padding: 15px 0px 0px 0px;
}
.wf-panel>.content>.display>.message {
	text-align: left;
	padding: 10px 0px;
	white-space:normal;
}

.wf-panel>.close,
.wf-panel>.close:hover {
	position:absolute;
	top: 0px;
	right: 4px;
	font-size: 150%;
	color: #ccc;
	text-decoration: none;
}


/* WF Resource "WFWidgets.Grid" (6EDB::1987::6EDB::755) */

/* BASE WIDGET */

.wf-grid {
	height: 500px;
	-webkit-user-select: none;
	user-select: none;
}

.wf-grid.vflex {
	height: 100%;
}

/* CSS GRID */

.wf-grid {
	box-sizing: border-box;

	display: -ms-grid;
	-ms-grid-columns: auto 1fr auto;
	-ms-grid-rows: auto 1fr auto;

	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"corner  columns  vscroll"
		"rows    grid     grid"
		"hscroll grid     grid";
}
.wf-grid > .columns {
	overflow-x: scroll;

	-ms-grid-column: 2;
	-ms-grid-row: 1;

	grid-area: columns;
}
.wf-grid > .rows {
	overflow-y: scroll;

	-ms-grid-column: 1;
	-ms-grid-row: 2;

	grid-area: rows;
}
.wf-grid > .grid {
	overflow: auto;
	position: relative;		/* needed to determine cells within view */

	-ms-grid-column: 2;
	-ms-grid-row: 2;
	-ms-grid-column-span: 2;
	-ms-grid-row-span: 2;

	grid-area: grid;
}

.wf-grid > .vscroll {
	-ms-grid-column: 3;
	-ms-grid-row: 1;
	grid-area: vscroll;
}

.wf-grid > .hscroll {
	-ms-grid-column: 1;
	-ms-grid-row: 3;
	grid-area: hscroll;
}

.wf-grid > .rows,
.wf-grid > .columns {
	scrollbar-width: none;    /* firefox */
	-ms-overflow-style: none;    /* Edge/IE */
}

.wf-grid > .rows::-webkit-scrollbar,
.wf-grid > .columns::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
}

/* CONTENT (FUNCTIONAL) */

.wf-grid table {
    table-layout: fixed;
    empty-cells: show;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0px;
    border: 0px solid transparent;
    border-style: hidden;
}
.wf-grid td {
	vertical-align: top;
	border: 1px solid #eee;
	padding: 4px;
	overflow: hidden;
}
.wf-grid td.header.collapsed,
.wf-grid td.header.expanded {
	cursor: pointer;
}

.wf-grid .cell.clickable {
	cursor: pointer;
}

td.header.collapsed:before,
td.header.expanded:before {
	display: inline-block;
	font-family: 'Font Awesome 6 Pro Solid';
	width: 1.4em;
	text-align: center;
	vertical-align: top;
}
td.header.collapsed:before {
	content: '\f054';
}
td.header.expanded:before {
	content: '\f078';
}

.wf-grid > .columns {
	border: 1px solid #ccc;
	border-bottom-width: 0px;
}
.wf-grid > .rows {
	border: 1px solid #ccc;
	border-right-width: 0px;
}
.wf-grid > .grid {
	border: 1px solid #ccc;
}

.wf-grid > .columns > .vguard,
.wf-grid > .grid > .vguard,
.wf-grid > .rows > .hguard,
.wf-grid > .grid > .hguard {
	display: inline-block;
	vertical-align: top;
}

.wf-grid > .columns > .vguard > table {
	width: 100%;
}
.wf-grid:not(.hscroll) > .columns > .vguard > table {
	border-right: 1px solid #ccc;
}
.wf-grid > .rows > .rowcontent > table {
} 
.wf-grid:not(.vscroll) > .rows > .hguard > table {
	border-bottom: 1px solid #ccc;
}
.wf-grid > .grid > .hguard > table {
	width: 100%;
}
.wf-grid:not(.hscroll) > .grid > .hguard > table {
	border-right: 1px solid #ccc;
}
.wf-grid:not(.vscroll) > .grid > .hguard > table {
	border-bottom: 1px solid #ccc;
}

/* LOADING CELLS */

div.cellloading {
	text-align: center;
}

div.celltemplate {
	filter: blur(3px);
	opacity: 0.2;
}

/* VISUAL STYLING */

.wf-grid table,
.wf-grid > .columns,
.wf-grid > .rows,
.wf-grid > .grid {
	border-color: #CCC;
}
.wf-grid td {
	border-color: #eee;
}

td.header.collapsed:before,
td.header.expanded:before {
	color: #AAA;
}

tr.category {
	background-color: #CCC;
}
tr.category td {
	padding: 4px;
	color: white;
}
tr.category td.header:before {
	color: white;
}


/* WF Resource "WFWidgets.DevExtremeChart" (6EDB::1987::6EDB::756) */

.wf-graph.vflex {
	height: 100%;
}

.wf-graph-container {
	height: 100%;
	position: relative;
}

.wf-graph-placeholder {
	text-align: center;
	color: #808080;
	line-height: 50px;
}

.wf-graph.vflex .wf-graph-placeholder{
	height: 100%;
}

.dxc-tooltip {
	z-index: 1601;	/*zorgen dat de tooltip bovenop de modal komt*/
}

/* WF Resource "WFWidgets.FDViewer" (6EDB::1987::6EDB::761) */

.wf-fdviewer {
	height: 600px;
	border: 1px solid #333;
	box-sizing: border-box;
	overflow: auto;
}

.wf-fdviewer.vflex {
	height: 100%;
}

.wf-fdviewer iframe {
	border-width: 0;
	display: block;
}

.wf-fdviewer .wf-display {
	padding: 6px;
	box-sizing: border-box;
}

@media print {
	.wf-fdviewer {
		border: 0;
	}
}			

/* WF Resource "WFWidgets.PDFViewer" (6EDB::1987::6EDB::763) */

.wf-pdfviewer {
	width: 100%;
}

.wf-pdfviewer.vflex {
	height: 100%;
	overflow: hidden;
}

.wf-pdfviewer > iframe {
	box-sizing: border-box;
	height: 100%;
	width: 100%;
}

/* WF Resource "WFWidgets.Scheduler" (6EDB::1987::6EDB::764) */

.wf-scheduler {
	position: relative;
	height: 650px;
	width: 100%;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.wf-scheduler.vflex {
	height: 100%;
}

.wf-scheduler .wf-scrollpanel {
	white-space: nowrap;
}

.wf-scheduler .wf-scrollpanel>.vpanel {
	position: absolute;
	left: 0px;
	right: 0px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.wf-scheduler .wf-scrollpanel>.top {
	top: 0px;
	x-z-index: 5;
}
.wf-scheduler .wf-scrollpanel>.middle {
	top: 0px;
	bottom: 0px;
	overflow-y: scroll;
}
.wf-scheduler .wf-scrollpanel>.bottom {
	bottom: 0px;
}
.wf-scheduler .wf-scrollpanel>.vpanel>.hpanel {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	margin: 0;
	padding: 0;
}
.wf-scheduler .wf-scrollpanel .scrollable {
	overflow-x: auto;				/* moet expliciet gezet zijn voordat Opera de juiste scrollWidth op lijkt te willen leveren */
	overflow-y: hidden;
}
.wf-scheduler .wf-scrollpanel>.top>.content>.scrollable {
	overflow: hidden;
}

.wf-scheduler .wf-scrollpanel>.vpanel>.content {
	padding: 0;
}

.wf-scheduler .hpanel {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.wf-scheduler .hscroll {
	overflow-y: hidden;
	overflow-x: auto;
	line-height: 0px;
}

.wf-scheduler .left,
.wf-scheduler .right {
	width: 0px;	/* resized programmatically. Needs to be 0 initially for proper sizing */
}

.wf-scheduler table {
	table-layout: fixed;
	empty-cells: show;
	width: 100%;
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0px;
	border: 0px solid transparent;	/* "border-style: hidden" truuk om de buitenste border van de table volledig uit te zetten. 0px is nodig voor IE8 */
	border-style: hidden;
}

.wf-scheduler .sentinel {
	line-height: 0px;
}

.wf-scheduler .top table {
	height: 100%;
}

.wf-scheduler td {
	overflow: hidden;
}

.wf-scheduler table td {
	vertical-align: top;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
.wf-scheduler table td.resource {
	text-align: left;
}

.wf-scheduler table td.right>div {
	text-align: right;
	padding-right: 5px;
}

.wf-scheduler table td.center>div {
	text-align: center;
}

.wf-scheduler table td.left>div {
	text-align: left;
	padding-left: 5px;
}


.wf-scheduler .wfs-container {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: green;
}

.wf-scheduler .wfs-container div {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}

.wf-scheduler .slot {
	min-height: 1.3em;
	height: 1.3em;
}



.wf-scheduler .top .scrollable {
	height: 100%;
}
.wf-scheduler .top .hpanel {
	height: 100%;
}
.wf-scheduler .middle .hpanel {
	min-height: 100%;
}

/* header rijen moeten een vaste hoogte hebben */
.wf-scheduler .header {
	height: 1.3em;
}
.wf-scheduler .header td {
	text-overflow: ellipsis;
}

.wf-scheduler .group,
.wf-scheduler .grouptext {
	position: relative;
	/*height: 100%; /* veroorzaakt wazige border-collapse problemen in IE11?! */
}


.wf-scheduler .cell,
.wf-scheduler .group,
.wf-scheduler .grouptext {
	padding-top: 1px;
}

.wf-scheduler .group {
	position: relative;
}
.wf-scheduler .groupoverflow {
	display: none;
}
.wf-scheduler .overflowing .groupoverflow {
	display: block;
	position: absolute;
	cursor: pointer;
	font-size: 6px;
	height: 8px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	line-height: 8px;
	color: #808080;
	background-color: white;
	box-shadow: 0px -2px 2px 0px white;
	border-top: 1px solid #808080;
}

.wf-scheduler .overflow {
	border: 1px solid #A0A0A0;
	background-color: white;
	position: absolute;
	height: auto;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	padding-top: 1px;
}

.wf-scheduler .claim,
.wf-scheduler-dragcontainer .claim {
	height: 1.5em;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: white;
	border: 1px solid #A0A0A0;
	overflow: hidden;
	margin-bottom: 1px;
	margin-left: 1px;
	margin-right: 1px;
	text-align: left;
	cursor: default;
	text-align: center;
	border-radius: 6px;
	font-size: 11px;
}

.wf-scheduler .claim.faded,
.wf-scheduler-dragcontainer .claim.faded {
	opacity: 0.5;
}

.wf-scheduler .claim.fixed {
	background-color: #E0E0E0;
}

.wf-scheduler .claim {
	margin: 2px;
}

.wf-scheduler .vpanel.top .claim, .wf-scheduler .overflow .claim {
	margin:4px;
}

.wf-scheduler .cell .label {
	/* padding equal to the border of 1 claim to ensure that a line is exactly one claim
	   in height, except when it contains multiple claims */
	padding-top: 1px;
	padding-bottom: 1px;
}

/* cursor-overrides to be applied to the body element */ 
.wf-scheduler-active,
.wf-scheduler-active .claim {
	cursor: wait !important;
}

.wf-scheduler-dragging,
.wf-scheduler-dragging .claim {
	cursor: pointer !important;
}

.wf-scheduler-cancelling {
	cursor: no-drop !important;
}

/* note: the dragcontainer element is added to the body, not the wf-scheduler itself */ 
.wf-scheduler-dragcontainer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0px;
	height: 0px;
	display: hidden;
	cursor: pointer;
}
.wf-scheduler-dragcontainer .claim {
	margin-top: 0;
	box-shadow: 2px 2px 1px rgba(0,0,0,0.5);
}


.wf-scheduler .groupsizer {
	position: absolute;
	height: 4px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

.wf-scheduler .resource > div {
	padding-left: 5px;
}

/* NON-FUNCTIONAL STYLING (COLORS) */

/* full-height, non-visible, emtpy span to give the label a baseline it can align to */
.wf-scheduler .groups .grouptext:after {
	display: inline-block;
	height: 100%;
	width: 0px;
	content: '';
}
.wf-scheduler .groups .grouptext .label {
	display: inline-block;
	vertical-align: bottom;
	padding-bottom: 5px;
}

.wf-scheduler .groupsizer:hover {
	background-color: #C0C0C0;
	cursor: s-resize;
}

.wf-scheduler .highlight:not([colspan]) {
	background-color: #C6DCFF;
}
.wf-scheduler .highlight:not([colspan]) .weekend {
	background-color: #B3C7E5;
}

.wf-scheduler .highlight .highlight {
	background-color: #8B9AAF;
}

.wf-scheduler .header {
	background-color: #7499bd;
}

.wf-scheduler .header td {
	color: #fff;
}

.wf-scheduler .weekend, .wf-scheduler .holiday {
	background: #EAEAEA;
}

.wf-scheduler .vpanel.top .groups .weekend, .wf-scheduler .vpanel.top .groups .holiday {
	background:#EAEAEA;
}

.wf-scheduler .header .weekend, .wf-scheduler .header .holiday {
	background-color: #7499bd;
}

.wf-scheduler .vpanel.top table td {
	border:1px solid #7499bd;
}

.wf-scheduler .vpanel.middle table td {
	border:1px solid #ddd;
}

.wf-scheduler .vpanel {
	border:1px solid #7499bd;
}

/* vpanel: border onder, plus boven bij de eerste */

.wf-scheduler .vpanel {
	border:none;
	border-bottom:1px solid  #7499bd;
}

.wf-scheduler .vpanel:first-child {
	border-top:1px solid  #7499bd;
}

/* vpanel: border links, plus rechts bij de laatste */

.wf-scheduler .vpanel > .hpanel {
	border:none;
	border-left:1px solid #7499bd;
} 

/* de 2px is een trucje, bij 1 valt hij net buiten beeld */

.wf-scheduler .vpanel > .hpanel:last-child {
	border-right:2px solid #7499bd;
} 

/* in de footer willen we geen borders */

.wf-scheduler .vpanel.bottom, .wf-scheduler .vpanel.bottom > .hpanel{
	border:none;
}

.wf-scheduler .wf-scheduler-large-header td {
	font-size: 22px;
	line-height:35px;
	font-weight:100;
}


/* WF Resource "WFWidgets.SignaturePad" (6EDB::1987::6EDB::766) */

.wf-signature {
	margin-bottom: 5px;
}

.wf-signature > .wf-signature-wrapper {
	position: relative;
	border: 1px solid #CCC;
}

.wf-signature.wf-signature-disabled > .wf-signature-wrapper{
	background-color: #f2f2f2;
}

.wf-signature.wf-signature-disabled > .wf-signature-clear {
	display: none;
}

.wf-signature > .wf-signature-wrapper > .wf-signature-blocker {
	position: absolute;
	display: none;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

.wf-signature.wf-signature-disabled > .wf-signature-wrapper > .wf-signature-blocker {
	display: block;
}

/* WF Resource "WFWidgets.TileView" (6EDB::1987::6EDB::767) */

/* TileView */

.wf-tileview {
	box-sizing: border-box;
	height: 400px;
	width: 100%;
	overflow: hidden;
	overflow-x: auto;
	white-space: nowrap;
	text-align: center;
	padding-bottom: 15px;
}
.wf-tileview.vflex,
.wf-tileview.vflex > .wf-tileview-content {
	height: 100%;
}

.wf-tileview-header, .wf-tileview-footer {
	line-height: normal;
	overflow: hidden; /* om margins binnen het block te houden */
}

.wf-tileview-column {
	display: inline-block;
	min-width: 300px;
	box-sizing:border-box;
	height: 100%;
	padding-bottom:30px; /*moet overeenkomen met .wf-tileview-column-titleline-height en height */ 
	vertical-align:top;
	border: 1px solid #DDDDDD;
	background-color: #F2F2F2;
}

.wf-tileview-column-title {
	line-height: 30px;
	height: 30px;
	font-size: large;
	font-weight: bold;
}
.wf-tileview-items {
	postition: relative; /* om .wf-tileview-item.selected goed in beeld te kunnen scrollen */
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing:border-box;
}
.wf-tileview-item {
	padding: 5px 5px 0px 5px;
}
.wf-tileview-item-content {
	height:100%;
	box-sizing:border-box;
	text-align:left;
	background-color: #FAFAFA;
	border: 1px solid #DDDDDD;
	white-space: normal;
	position: relative; /* om wf-tileview-item-action relatief te kunnen positioneren */
}

.wf-tileview-item-content > div {
	margin: 5px;
}

.wf-tileview-item-content a.wf-tileview-item-action {
	opacity: 0.3;
	text-decoration: none;
	color: #000000;
}
a.wf-tileview-item-action:hover {
	opacity: 1;
}

.wf-tileview-item.selected > .wf-tileview-item-content {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.28);
	outline: 2px solid rgba(0, 0, 0, 0.3);
}

.wf-tileview-item.drag-source > .wf-tileview-item-content {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.28);
	outline: 2px solid rgba(0, 0, 0, 0.3);
	opacity: 0.5;
}

.wf-tileview-loader,
.wf-tileview-items > i {
	color: #B0B1B2;
}

/* TileView - states */

.wf-tileview-readonly.wf-tileview-content {
	opacity: 0.5;
}

.wf-tileview-readonly a.wf-tileview-item-action {
	display: none;
}

body.wf-tileview-drop-disabled {
	cursor: not-allowed !important;
}

.wf-tileview-drop-enabled.wf-tileview-column > .wf-tileview-items {
	cursor: pointer !important;
}
.wf-tileview-drop-disabled.wf-tileview-column > .wf-tileview-items {
	opacity: 0.3;
}

/* WF Resource "WFWidgets.TinyMCE6" (6EDB::1987::6EDB::768) */

.wf-tinymce6 {
	position: relative;	/* force a new stacking context (#399836) */
	z-index: 1;			/* ^^^ */
}

.wf-tinymce6.vflex {
	height:100%;
}


/* WF Resource "WFWidgets.Dialog" (6EDB::1987::6EDB::771) */

.wf-dialog {
	display: -ms-grid;
	display: grid;
	grid-gap: 5px;
	grid-template-areas: "content" "footer";
	-ms-grid-rows: 1fr auto;
	-ms-grid-columns: 1fr;
	grid-template-rows: 1fr auto;
	grid-template-columns: 1fr;
	height: 100%;
	box-sizing: border-box;
}
.wf-dialog.nofooter {
	/* remove footer entirely to prevent applying grid-gap */
	grid-template-areas: "content";
	-ms-grid-rows: 1fr;
	grid-template-rows: 1fr;
}
.wf-dialog.vflex {
	/* used if the content of the dialog can stretch based on available space */
}
.wf-dialog.tiny {
	/* used if the screen real estate is at a premium */
}
.wf-window .wf-dialog {
	padding: 0;
	grid-gap: 0;
}

.wf-dialog > .content {
	grid-area: content;
	-ms-grid-column: 1;
	-ms-grid-row: 1;
	box-sizing: border-box;
	overflow: hidden;		/* container takes care of the scroll-bar */
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: minmax(0,1fr) auto;
	-ms-grid-columns: 1fr;
	grid-template-rows: minmax(0,1fr) auto;
	grid-template-columns: 1fr;
}
.wf-dialog.tiny > .content {
	overflow: auto;
	-ms-grid-rows: minmax(auto,1fr) auto;
	grid-template-rows: minmax(auto,1fr) auto;
}

.wf-dialog > .content > .container {
	-ms-grid-column: 1;
	-ms-grid-rown: 1;
	max-height: 100%;
	overflow: auto;
	box-sizing: border-box;
}
.wf-window .wf-dialog > .content > .container {
	padding: 10px;
}
.wf-window .wf-dialog > .content > .display {
	padding: 0 10px;
}
.wf-dialog.tiny > .content > .container {
	max-height: none;
	height: auto;
	overflow: visible;		/* if tiny, scrollbar shifts to the content element */
}
.wf-dialog.vflex > .content > .container {
	/* vflex content requires a fixed outer height, even if tiny */
	max-height: none;
	height: 100%;
}

.wf-dialog > .content > .display {
	/* no functional styling required unless we want to set a max-height (and overflow: auto) */
	-ms-grid-column: 1;
	-ms-grid-row: 2;
}

.wf-dialog > .footer {
	grid-area: footer;
	-ms-grid-column: 1;
	-ms-grid-row: 2;
	white-space: nowrap;
}
.wf-window .wf-dialog > .footer {
	border-top: 1px solid #ccc;
	padding: 10px 10px 5px 10px;
}
.wf-dialog > .footer > .buttons {
	display: inline-block;
}
.wf-dialog > .footer > .info {
	display: inline-block;
	width: 100%;
	vertical-align: top;
}
.wf-dialog > .footer.stack > div {
	display: block;
	white-space: normal;
}


/* WF Resource "Controls.MenuButton" (6EDB::1987::6EDB::777) */

/* TODO: de control voegt een CSS klasse toe op de widget; waar hoort dan de CSS te staan? Is dit dan een variant op de widgets-button? */

.wf-menubutton.widgets-button:after {
	content:" ";
	border:4px solid transparent;
	border-top:4px solid #444;
	position:absolute;
	top:38%;
	right:10px;
} 

.wf-menubutton.widgets-button {
	padding-right:20px;
}


/* WF Resource "Widgets.Menu" (6EDB::1987::6EDB::762) */

.widgets-popupmenu {
	display: block;
	background-color: white;
	border: 1px solid #BFBFBF;
	box-shadow: 0px 0px 8px rgba(0,0,0,0.3), inset 24px 0px 0px 0px #F0F0F0;
	padding: 1px;
	text-align: left;
}

/* tijdelijke hack om de combinatie van nieuwe $Widgets.Popup en oude Widgets.Menu goed te laten gaan. Als het goed is wordt Widgets.Menu uiteindelijk uitgefaseerd en dan valt deze hack vanzelf weer weg */
.widgets-popupmenu.noborder {
	border: 0px;
}

.widgets-popupmenu .menuitem {
	display: block;
	border: 1px solid transparent;
	white-space: nowrap;
}

.widgets-popupmenu .menuitem a {
	color: black;
	text-decoration: none;
}

.widgets-popupmenu .menuitem img {
	width: 16px;
	height: 16px;
	padding: 1px;
	border: 0px;
}

.widgets-popupmenu .menuitem-disabled a {
	color: #6D6D6D;
}

.widgets-popupmenu .menuitem.menuitem-disabled:hover {
	background-color: transparent;
}

.widgets-popupmenu .menuitem.menuitem-disabled a:hover {
	cursor:default;
}

.widgets-popupmenu .menuitem-icon {
	vertical-align: top;
	display: inline-block;
	width: 18px;
	height: 18px;
	text-align: center;
	border: 1px solid transparent;
}

.widgets-popupmenu .menuitem-checked .menuitem-icon {
	border: 1px solid #3399FF;
	background-color: #C4E1FF;
}

.widgets-popupmenu .menuitem-disabled {
	opacity:0.5;
}

.widgets-popupmenu .menuitem-label {
	padding: 0.1em;
	padding-left: 1.0em;
	padding-right: 1.0em;
}

.widgets-popupmenu .menuseparator {
	border-bottom: 1px solid #CCC;
	height: 0px;
	margin: 0.3em;
	margin-left: 27px;
	margin-right: 3px;
}
/*
a.widgets-hyperlink.menu-button-link {
	padding-right:20px;
}

a.menubutton-dropdown-icon:after, .menu-button-link:after {
	content:" ";
	border:4px solid transparent;
	border-top:4px solid #FFF;
	position:absolute;
	top:45%;
	right:9px;
}

.menu-button-link:after  {
	content:"";
	position:absolute;
	top:45%;
	right:9px;
}
*/
/*
a.menubutton-dropdown-icon {
	padding-right:25px !important;
	position:relative;
}
*/
/* Drop down menu items styling overlay */

.widgets-popupmenu .menuitem a {
	display: inline-block;
	color:#808080; 
	line-height:25px;
}

.device-category-tablet .widgets-popupmenu .menuitem a,
.device-category-phone .widgets-popupmenu .menuitem a{
	line-height:30px;
}

/* Popup container with carret*/

.menubutton-popupmenu:after {
	content: " ";
	border:8px solid transparent;
	border-bottom:8px solid #FFFFFF;
	position:absolute;
	top:-15px;
	right:7px;
}

.widgets-popupmenu-container-leftalign .menubutton-popupmenu:after {
	right: auto;
	left: 7px;
}

.menubutton-popupmenu {
	background-color: #FFFFFF;
	border:1px solid #D8D8D8;
	border-radius:3px;
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
	box-shadow: 0 2px 4px rgba(0,0,0,.2);
	position:relative;
	top:4px;
}

.widgets-popupmenu .menuitem:hover {
	border: 1px solid transparent;
	background-color: #E5E5E5;
}

.widgets-popupmenu-container-rightalign {
  right: 0px; 
  position: absolute;
  z-index: 200;
}

.widgets-popupmenu-container-leftalign {
  left: 0px; 
  position: absolute;
  z-index: 200;
}

.widgets-popupmenu-container:after {
    content: " ";
    border: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    position: absolute;
    top: -9px;
}

.widgets-popupmenu-container .widgets-popupmenu:after {
    content: " ";
    border: 6px solid transparent;
    border-bottom: 6px solid #FFFFFF;
    position: absolute;
    top: -12px;
    z-index: 800;
}

.widgets-popupmenu-container.widgets-popupmenu-container-rightalign:after {
	right: 7px;
}

.widgets-popupmenu-container.widgets-popupmenu-container-leftalign:after {
	left: 7px;
}

.widgets-popupmenu-container .widgets-popupmenu{
	background:#FFF;
	color:#444;
}

.widgets-popupmenu-container .menuitem {
	display: block;
}

.widgets-popupmenu-container .menuitem a {
	width: 100%;
	text-align:left;
	font-weight:normal;
}

.widgets-popupmenu-container .menuitem a i {
	display:inline-block;
	width:14px;
	padding-left:3px;
	text-align:center;
}

.widgets-popupmenu-container .menuitem a:hover {
	color:#808080;
}


/* WF Resource "WFWidgets.Menu" (6EDB::1987::6EDB::779) */

.wf-menu-noitems {
	padding: 0px 8px;
	line-height: 2em;
}

/* WF Resource "WFWidgets.ImageViewer" (6EDB::1987::6EDB::782) */

.wf-imageviewer {
	overflow: auto;
}

.wf-imageviewer.vflex {
	height: 100%;
}

.wf-imageviewer.zoomable {
	cursor: zoom-in;
}

.wf-imageviewer.zoomable.zoomedIn {
	cursor: zoom-out;
}

.wf-imageviewer.zoomable.zoomedIn img {
	max-width: none;
}

.wf-imageviewer.zoomable img {
	max-width: 100%;
}

/* WF Resource "DataGrid.Text" (6EDB::1987::6EDB::788) */

.dg-editor-text {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: minmax(0,1fr) auto;
}

.dg-editor-text input {
	box-sizing: border-box;
	border: 0px;
	outline: 0px;
	padding: 2px 4px 2px 4px;
	margin: 0;
	border-radius: 0px;
	background-color: #FFFFC8;
}

.dg-editor-text.disabled-background input {
	background-color: #F0F0F0;
}

.dg-editor-text-button {
	border:0px;
	border-left: 1px solid #ccc;
	height:100%;
	background-color:#EEE;
	color: #333;
}

.dg-editor-text.left input {
	text-align: left;
}

.dg-editor-text.right input {
	text-align: right;
}

.dg-editor-text.center input {
	text-align: center;
}

/* WF Resource "DataGrid.Checkbox" (6EDB::1987::6EDB::790) */

.dg-editor-checkbox {
	width: 100%;
	outline: 0px;
	margin: 0;
	text-align: center;
}

/* WF Resource "DataGrid.Button" (6EDB::1987::6EDB::789) */

.dg-editor-button {
	width: 100%;
	height: 100%;
	border: 1px solid #ccc;
	border-radius: 0px;
	outline: 0px;
}
.dg-editor-button.disabled,
.dg-editor-button.disabled:hover {
	color: rgba(51,51,51,0.5);
	cursor: default;
	background-color: #eee;
}

/* WF Resource "DataGrid.Combobox" (6EDB::1987::6EDB::798) */

.dg-editor-combobox {
	width: 100%;
	height: 100%;
}

.dg-editor-combobox input {
	display: inline-block;
	box-sizing:border-box;
	outline: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
}

.dg-editor-combobox.disabled-background input {
	background-color: #F0F0F0;
}

.dg-editor-combobox .editor {
	display: -ms-grid;
	display: grid;
	-ms-grid-template-columns: 1fr auto;
	grid-template-columns: 1fr auto;
}

.dg-editor-combobox-button {
	height:100%;
	color: #333;
	background-color: white;
	border: 0;
}

.dg-editor-combobox-dropdown {
	border: 0px;
	background-color: transparent;
	box-shadow: none;
}

.dg-editor-combobox.left input {
	text-align: left;
}

.dg-editor-combobox.right input {
	text-align: right;
}

.dg-editor-combobox.center input {
	text-align: center;
}

/* WF Resource "WFWidgets.HorizontalRule" (6EDB::1987::6EDB::803) */

.wf-horizontalrule {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "label hr";
	grid-gap: 5px;
	height:2.2em;
	line-height:2.2em;
}
.wf-horizontalrule.nolabel {
	grid-template-columns: 1fr;
	grid-template-areas: "hr";
}

.wf-horizontalrule > .label {
	grid-area: label;
}

.wf-horizontalrule.nolabel .label {
	display: none;
}

.wf-horizontalrule > .horizontalrule{
	grid-area: hr;
	border-bottom: 1px solid #ccc;
	height: 50%;
}

/* WF Resource "WFWidgets.EmptyLine" (6EDB::1987::6EDB::805) */

.wf-emptyline{
	height: 1.5em;
}

/* WF Resource "WFWidgets.XMLViewer" (6EDB::1987::6EDB::807) */

.wf-xmlviewer {
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr;
    font-family: monospace;
}

.xmlViewerButtons{
	height: auto;
}

.xmlTree {
	word-wrap: break-word;
	white-space: normal;
	height: 100%;
	overflow: scroll;
	padding:0 0 0 0.5em;
}

.xml-element {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	position: relative;
}

.xml-element::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 0;
    left: 0;
    width: 0;
	border-left: dotted 1px #aabbff;
}

.xml-element.noKids::before{
	width: 0;
}

.xml-content {
	margin: 0 0 0 1em;
	border: none;
	max-width: calc(100% - 1em);
}

.xmlTree pre {
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
}

.xml-tag,
.xml-closing-tag {
	display: inline-block;
	color: #305080;
}

.xml-tagname {
	display: inline-block;
	color: #305080;
}

.xml-tagwrapper {
	padding: 0 0 0 1em;
}

.xml-attribute {
	display: inline-block;
	margin: 0 0 0 0.5em;
}

.xml-attribute-key {
	color: #618aa1;
}

.xml-attribute-value {
	color: #a34100;
}

.xml-attribute-key::after {
	content: "=";
}

.xml-attribute-value::before,
.xml-attribute-value::after {
	content: '"';
}

.xml-comment {
	color: #494;
}

.xml-comment::before {
	content: "<!--";
}

.xml-comment::after {
	content: "-->";
}

.xml-cdata {
	color: #494;
}

.xml-cdata::before {
	content: "<![CDATA[";
}

.xml-cdata::after {
	content: "]]>";
}

.plusMin {
	position: absolute;
	width: 11px;
	height: 11px;
	top: 0px;
	left: -5px;
	color: #000000;
	font-size: 15px;
	text-align: center;
	cursor: pointer;
}

.plusMin::after {
	content: "\f107";
    font-family: "Font Awesome 6 Pro Solid";
}

.simpleElement div {
	display: inline-block;
	white-space:pre-wrap;
}

.simpleElement .xml-content {
    display: inline-block;
    margin: 0 1em 0 1em;
	max-width: calc(100% - 2em);
}

/* NO KIDS */
.noKids .plusMin {
	display: none;
}

.noKids.xml-element {
	border-left: none;
}

.xml-element.noKids::before {
    border: none;
}

.xml-element.simpleElement::before {
	border:none;
}

.noKids .xml-opening-tag-end::before {
	content: "/";
}

.noKids .xml-tagwrapper {
	padding: 0;
}

/* COLLAPSED */
.xml-collapsed.xml-element {
	border-left: none;
}

.xml-element.xml-collapsed::before{
	border:none;
}

.xml-collapsed .xml-content {
	display: none;
}

.xml-collapsed .xml-closing-tag {
	display: inline;
}

.xml-collapsed .xml-closing-tag::before {
	content: "...";
}

.xml-collapsed .plusMin::after {
	content: "\f105";
	font-family: "Font Awesome 6 Pro Solid";
}

/* COLLAPSED & TREE VIEW */

.xmlTree.treeView .xml-collapsed .xml-attribute {
	display: none;
}

.xmlTree.treeView .xml-collapsed .xml-tagwrapper::after {
	content: "...";
}

/* TREE VIEW */

.xmlTree.treeView .xml-tag,
.xmlTree.treeView .xml-closing-tag {
	display: none;
}

.xmlTree.treeView .xml-tagname {
    color: #FFFFFF;
    background-color: #aa6600;
    border-radius: 3px;
    padding: 2px 3px;
}

.xmlTree.treeView .xml-tagname:first-letter {
	text-transform: uppercase;
}

.xmlTree.treeView .xml-element {
	border-left: none;
	margin-top: 3px;
}

.xmlTree.treeView .xml-element::before {
	border-left-color: #d86;
}

.xmlTree.treeView .plusMin {
	display: block;
	color: #000;
}

.xmlTree.treeView .xml-attribute {
	display: block;
	margin: 0 0 0 2em;
}

.xmlTree.treeView .xml-attribute-key {
	margin: 0 0.5em 0 0;
	color: #B87333;
}

.xmlTree.treeView .xml-attribute-value {
	color: #666666;
}

.xmlTree.treeView .xml-attribute-key::after {
	content: ":";
}

.xmlTree.treeView .xml-attribute-key::before {
	content: "@";
}

.xmlTree.treeView .xml-attribute-value::before,
.xmlTree.treeView .xml-attribute-value::after {
	content: "";
}

.xmlTree.treeView .xml-comment {
	color: #494;
}

.xmlTree.treeView .xml-comment::before {
	content: "";
}

.xmlTree.treeView .xml-comment::after {
	content: "";
}

.xmlTree.treeView .xml-cdata {
	color: #494;
}

.xmlTree.treeView .xml-cdata::before {
	content: "";
}

.xmlTree.treeView .xml-cdata::after {
	content: "";
}

.xmlTree.treeView .xml-collapsed.xml-element {
	border-left: none;
}

/* NO KIDS & TREE VIEW */

.xmlTree.treeView .noKids.noAttributes .plusMin {
	display: none;
}

.xmlTree.treeView .noKids.noAttributes.xml-element {
	border-left: none;
}

.xmlTree.treeView .noKids .xml-tagwrapper {
	padding: 0 0 0 1em;
}
.xmlTree.treeView
	.noKids.noAttributes.xml-element.xml-collapsed
	.xml-tagwrapper::after {
	content: "";
}

/* XML Error */
.xmlTree .XMLError{
	color: #dd4444;
	font-size: 20px;
}

.errorDiv{
	counter-reset: line;
}

.errorDiv .errorPre {
    position: relative;
    padding-left: 5em;
}

.errorPre:nth-child(even){
	background-color: #fafafa;
}

.errorPre:nth-child(odd){
	background-color: #eee;
}

.xmlTree.treeView .errorPre:nth-child(even){
	background-color: #eee;
}

.xmlTree.treeView .errorPre:nth-child(odd){
	background-color: #fafafa;
}

.errorPre::before {
    content: "Line " counter(line);
    counter-increment: line;
    position: absolute;
    left: 0;
    width: 5em;
    color: #999;
}


/* WF Resource "WFWidgets.Dummy" (6EDB::1987::6EDB::809) */

.wf-dummy {
	display: none;
}

/* WF Resource "DataGrid.Autosuggest" (6EDB::1987::6EDB::812) */

.dg-editor-autosuggest {
	width:100%;
	height:100%;
}

.dg-editor-autosuggest > .editor {
	display:grid;
	grid-template-columns: 1fr auto;
	height:100%;
}

.dg-editor-autosuggest > .editor > input {
	display: inline-block;
	box-sizing:border-box;
	outline:0;
	width:100%;
	height:100%;
	margin:0;
	border:0;
	background-color: #FFFFC8;
}

.dg-editor-autosuggest.disabled-background input {
	background-color: #F0F0F0;
}


.dg-editor-autosuggest.left input {
	text-align: left;
}

.dg-editor-autosuggest.right input {
	text-align: right;
}

.dg-editor-autosuggest.center input {
	text-align: center;
}

/* WF Resource "WFWidgets.TabContainer" (6EDB::1987::6EDB::819) */

.wf-tabcontainer .tabs li a {
	padding:7px;
	display:inline-block;
}

.wf-tabcontainer .tab-active a {
	padding:9px;
}
.wf-tabcontainer .tabs ul{
	padding: 0; 
	margin:0;
	position:relative; 
	vertical-align:bottom; 
	list-style-type: none;
	margin-bottom:0px;
}

.wf-tabcontainer.vflex {
	box-sizing:border-box;
	height: 100%;
}
.wf-tabcontainer.vflex .dialog {
	box-sizing: border-box;
	height: 100%;
	overflow: auto;
}

.wf-tabcontainer.hidetabs > .tabs,
.wf-tabcontainer.hidetabs > .divider {
	display: none;
}

/* default styling tab menu items*/

.wf-tabcontainer .tabs li{
	display:inline-block;
	padding:0px;
	margin-left:0px;
	position:relative;
	vertical-align:bottom;
	background-color: #F2F2F2;
	border: 1px solid #CCC;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
}

.wf-tabcontainer li.tab-active{
	background-color: #FFFFFF;
	top:1px;
	z-index:2;
}

.wf-tabcontainer .tabs li a{
	color: #595959;
	text-decoration:none;
}

.wf-tabcontainer .tabs li a:hover{
	background-color: #FFFFFF;
	border-radius: 5px 5px 0 0;		/* radius+1 om te vermijden dat de achtergrondkleur over de lijnen van de li valt */
	text-decoration:none;
}

.wf-tabcontainer .dialog {
	clear: both;
	padding: 10px;
	border: 1px solid #CCC;
	overflow-x: auto;
	overflow-y: visible;
	border-radius: 0 4px 4px 4px;
}

.wf-tabcontainer-hidetabs .dialog {
	padding: 0px;
	border-width: 0;
	overflow: auto;
	border-radius: 0px;
}

.macintosh .wf-tabcontainer .dialog,
.ipad .wf-tabcontainer .dialog {
	overflow: inherit;	/* #86034 */
}

.macintosh .wf-tabcontainer.vflex .dialog,
.ipad .wf-tabcontainer.vflex .dialog {
	overflow: auto;		/* als alles vflex is zou bovenstaande (en deze) hack weg moeten kunnen */
}

.tab img {
	vertical-align: text-bottom;
	margin-right: 5px;
}

 
.wf-tabcontainer .tabs li a i {
	position:relative;
	left:-2px;
}

/* WF Resource "DataGrid.Date" (6EDB::1987::6EDB::821) */

.dg-editor-date {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: minmax(0,1fr) auto;
}

.dg-editor-date input {
	border: 0px;
	outline: 0px;
	padding: 2px 4px 2px 4px;
	border-radius: 0px;
	height: 100%;
	background-color: #FFFFC8;
}

.dg-editor-date.disabled-background input {
	background-color: #F0F0F0;
}

/* Aangezien het duidelijk is welke elementen er zich hierbinnen bevinden, komen we ermee weg door hier kort-door-de-bocht te gaan */
.dg-editor-date div,
.dg-editor-date span {
	height: 100%;
}

.dg-editor-date .wf-input-button {
	padding: 2px 6px 0px 6px;
	border: 0px;
	border-left: 1px solid #ccc;
	height: 100%;
	background-color: #EEE;
	color: #333;
	cursor: auto;
	margin: 0px;
	box-shadow: none;
	border-radius: 0px;
	padding-inline: 6px;
}

.dg-editor-date .wf-input-button:hover:active {
	box-shadow: none;
}

.dg-editor-date.left input {
	text-align: left;
}

.dg-editor-date.right input {
	text-align: right;
}

.dg-editor-date.center input {
	text-align: center;
}

/* WF Resource "WFWidgets.BarcodeScanner" (6EDB::1987::6EDB::832) */

.wf-barcodescanner {
	height: 300px;
	white-space: normal;
}

.wf-barcodescanner.vflex {
	height: 100%;
}

.wf-barcodescanner video {
	width: 100%;
	height: 100%;
	display: block;
}