/*==============================================
	
	
	[MAIN.CSS]
	
	DESCRIPTION: This is where it begins..
	
	
===============================================*/
/* 
	Load libraries from backend 
*/
/*==============================================
	
	
	[BACKEND.CSS]
	
	DESCRIPTION: Contains includes from reused elements on the frontend
	
	
===============================================*/
/*==============================================
	
	
	[REFACTORFORM.CSS]
	
	DESCRIPTION: Contains iBurgerzaken components 
	
	
===============================================*/


.refactor div.table-wrapper table td .answer .control span,
.refactor td > div.button-container {
	display: inline-block;
}

.refactor .refactorquestion {
	visibility: visible;
}
.justificationrefactor .aq-container-caption {
	display: none;
}

/* GBAV Person Indicators - should still be refactored - Deprecated*/
.refactor div.button-container {
	display: inline-block;
	padding-left: 5px;
}

.refactor div.button-container:first-of-type {
	padding-left: 10px;
}

/*
	Overrule other templates THIS NEEDS ATTENTION
	TODO: Remove Overrules
*/

#wrapper article fieldset.refactor {
	height: auto;
}

ul.breadcrumbs + fieldset.refactor {
	margin-top: 10px;
}

.ui-dialog fieldset.refactor legend:not(.accesability-hidden),
#wrapper article div#column-1 fieldset.refactor legend:not(.accesability-hidden) {
	/* font-size:11pt; */
	font-weight: bold;
	display: inline-block;
	padding: 0 10px 0px 10px;
	text-transform: uppercase;
	position: relative;
	width: 100%;
}

/* Anything that comes after a legend*/
#wrapper article div#column-1 fieldset.refactor legend:not(.accesability-hidden) + *,
.ui-dialog fieldset.refactor legend:not(.accesability-hidden) + * {
	margin-top: 10px;
}

.ui-dialog fieldset.refactor legend + .headerbuttons_absolute,
.ui-dialog fieldset.refactor legend + .indicator,
#wrapper article div#column-1 fieldset.refactor legend + .headerbuttons_absolute,
#wrapper article div#column-1 fieldset.refactor legend + .indicator {
	margin-bottom: 7px;
	
}

/*
	Last element must always have some padding, due to dropdown-elements opening on the below instead of above-issues
*/

.aq-page-content > fieldset.refactor:last-of-type {
	padding-bottom: 60px;
}

/*==============================================
	Global rules 
===============================================*/

.refactor a,
.refactor a:before,
.refactor a:after {
	text-decoration: none; /* remove anchors default (IE9) styling  */
}

.refactor a[href*="//"],
.refactor a[href*="mailto:"] { /* Anchor that leads to something*/
	color: #0071cf;
}

.refactor:empty {
	display: none;
}

/* .refactor *:focus { */
	/* border-color: rgba(0, 113, 207, 1); */
/* } */

.refactor .hidden,
.refactor .hiddenImportant {
	display: none !important; /* We give this a important because sometimes it is not specific enough and might be overruled. */
}

.refactor .hide_answer > label+div,
.refactor .hide_question > label {
	visibility: hidden;
}

/* Generic Accesability hidden */
.refactor input[type=radio],
.ui-helper-hidden-accessible,
.ui-helper-hidden,
.refactor .accesability-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	/* Extra overrules */
	display: block !important;
	transform: scale(0.1) !important;
	max-width: 1px !important;
	max-height: 1px !important;
	line-height: 1px !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/*==============================================
	Sizing * elements
	
	NOTE: The only place where we use hardcoded widths
===============================================*/

.refactor .tiny input,
.refactor .tiny .inputsection,
.refactor input.tiny {
	max-width: calc(500px / 5);
}

.refactor .small input,
.refactor .small .inputsection,
.refactor input.small {
	max-width: calc(500px / 3);
}



/*==============================================
	Text
===============================================*/

.refactor i,
.refactor em {
	font-style: italic;
}
.refactor b,
.refactor strong {
	font-weight: bold;
}
.refactor sup {
	vertical-align: super;
}
.refactor sub {
	vertical-align: sub;
}

.refactor p,
.refactor span,
.refactor a {
	/* font-size: 10pt; */
	text-shadow: 1px 1px 0px rgba(0,0,0,0.050); /* improve readability*/
	color: inherit;
}

/* "Loose" text element within a fieldset (usually an explanation) */

fieldset.refactor > p {
	padding: 10px;
}
fieldset.refactor > p.bold {
	font-weight: bold;
}

/* Paragraph block within article */
.refactor article p {
	padding: 10px;
	white-space: normal;
}
.refactor .list {
	padding: 5px 10px;
}
.refactor ol.list {
	margin-left: 14px;
	list-style-type: decimal;
}
.refactor ul.list {
	margin-left: 18px;
	list-style-type: disc;
}
.refactor .list li {
	line-height: 1.5em;
}
.refactor ol.list li {
	padding-left: 5px;
}

/* Text directly under the header */
.refactor article #column-1 > p:first-child {
	padding: 0px 10px 10px 10px;
}

.refactor article #column-1 > .Tips + p {
	padding-top: 10px;
}


/*==============================================
	Blocks, Rows, Indicators, Inlinecontainer
===============================================*/
/*
	Border-lines creating sections
*/
.ui-dialog .aq-page-content > .task-wrapper > fieldset.refactor > legend:before,
#column-1 > fieldset.refactor > legend:before,
#column-1 > fieldset.refactor > legend:before,
.aq-page-content > fieldset.refactor > legend:before {
	content: "";
	display: block;
	width: calc(100% - 20px);
	position: absolute;
	top: calc(50% - 0px);
	height: 1px;
	background: #ebebeb;
	z-index: 0;
}

.ui-dialog .aq-page-content > .task-wrapper > fieldset.refactor > legend,
#column-1 > fieldset.refactor > legend,
.aq-page-content > fieldset.refactor > legend {
	width: 100%;
	position: relative;
	/* font-size: 11pt; */
    font-weight: bold;
    display: inline-block;
    padding: 0 10px 0px 10px;
    text-transform: uppercase;
}

.ui-dialog .aq-page-content > .task-wrapper > fieldset.refactor > legend > span,
#column-1 > fieldset.refactor > legend > span,
.aq-page-content > fieldset.refactor > legend > span {
	position: relative;
	z-index: 1;
	background: white;
	padding-right: 5px;
	display: inline-block;
}

/*
	separator 
*/

fieldset.refactor.separator > legend:before {
	content: "";
	position: absolute;
	width: calc(100% - 20px);
	height: 1px;
	border-top: 1px dashed #ebebeb;
	top: calc(50% - 1px);
	left: 10px;
	z-index: 0;
}

fieldset.refactor.separator > legend > span {
	position: relative;
	z-index: 1;
	background: white;
	padding-right: 5px;
}

/* separator no legend */

fieldset.refactor.separator-no-legend {
	position: relative;
	padding-top: 20px;
}
fieldset.refactor.separator-no-legend:before {
	content: "";
	position: absolute;
	width: calc(100% - 20px);
	height: 1px;
	border-top: 1px dashed #ebebeb;
	top: 10px;
	left: 10px;
	z-index: 0;	
}

/*
	Legend titles for defining statusses
*/

fieldset.refactor > legend > span.legend-title {
	position: relative;
	text-align: center;
	padding-left: 5px;
	padding-right: 10px;
	background: white;
	z-index: 1;
	display: inline-block;
}

fieldset.refactor > legend > span.legend-title > .legend-title-text {
	display: inline-block;
	background: #626060;
	color: white;
	padding: 2px 4px;
	border-radius: 2px;
	font-size: 7pt;
	vertical-align: top;
    line-height: 14px;
}

/* Fieldset underneath a fieldset
	or Fieldset with indent (each level increments)
*/
article .aq-page-content > fieldset.refactor > fieldset.refactor,
fieldset.refactor.fieldsetindent {
	padding-left: 20px;
}

/* Fieldset underneath a fieldset*/

/* Legends underneath a fieldset */

fieldset.refactor > fieldset > legend > span {
	font-weight: bold;
    text-transform: uppercase;
}

/*
	Fields general styling
*/

.refactor .refactor-field {
	/* font-size: 0; */
}

.refactor-field,
.refactor-inlinecontainer {
	display: block;
}

/*
	Row styling
*/

fieldset.refactor > div > .row,
fieldset.refactor > .row,
fieldset.refactor > .inlinebutton {
	padding: 5px 0;
}

.refactor .row {
	background: transparent;
	position: relative;
  /* transition */
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2 ease-in-out;
  transition: .2s ease-in-out;
}
.refactor .row:not(.refactor-multicolumn):hover{
	background: #F6FBFF;
}
.refactor .table-wrapper .row:hover { /* table-rows have their own styling */
    background: transparent;
}

/*
	Fieldset: grouping input elements
*/

fieldset.refactor {
	display: block; /* Custom.css overrides these */
	height: initial; /* Custom.css overrides these */
}

.refactor fieldset {
	margin: 0;
	min-width: 100%; /* required for tables responsive */
}

/*
Disabled because otherwise fieldsets will not scale to their width and go outside the parent container
fieldset.refactor {
	box-sizing: content-box;
}
*/

fieldset.refactor fieldset,
fieldset.refactor:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}
fieldset.refactor fieldset.radiofieldset {
	display: inline-block;
	vertical-align: top;
	min-width: inherit;
	min-width: auto;
}

/* 
	field: multicolumn
*/


.refactor .refactor-multicolumn .table-wrapper table th:first-of-type span {
	font-size: 10pt;
	font-weight: normal;
	padding-left: 50px;
	display: inline-block;
}

.refactor .refactor-multicolumn .table-wrapper table {
	table-layout: fixed;
}
.refactor .refactor-multicolumn .table-wrapper table tr {
	height: 40px;
}

.refactor .refactor-multicolumn .table-wrapper table tr th {
	min-width: 300px;
	width: auto;
}

.refactor .refactor-multicolumn .table-wrapper table tbody tr td,
.refactor .refactor-multicolumn .table-wrapper table tbody tr th,
.refactor .refactor-multicolumn .table-wrapper table tbody tr:first-of-type td {
	border: 0;
}

.refactor .refactor-multicolumn .table-wrapper table tbody tr td {
	width: calc((100% - 300px) / 2);
}

.refactor .refactor-multicolumn .table-wrapper table tbody tr td.gewijzigd span:not(:empty) {
	background: #414141;
    border-radius: 2px;
    color: white;
    padding: 3px;
	font-weight: bold;
}

/* Caption header */
.refactor.refactor-multicolumn caption {
	text-align: left;
}
.refactor.refactor-multicolumn caption span {
	font-weight: bold;
	text-transform: uppercase;
	padding-left: 30px;
}

/* Hover states*/
.refactor.refactor-multicolumn.row:hover {
	background: transparent;
}

.refactor .refactor-multicolumn .table-wrapper table tbody tr th,
.refactor .refactor-multicolumn .table-wrapper table tbody tr:hover th {
	border-bottom: 1px solid transparent;
}

.refactor .refactor-multicolumn .table-wrapper table tbody tr:hover th,
.refactor .refactor-multicolumn .table-wrapper table tbody tr:hover td {
	background: rgba(0, 113, 207, 0.1);
	-webkit-transition: .2s ease-in-out;
    -moz-transition: .2 ease-in-out;
    transition: .2s ease-in-out;
}

/*
	Indicator: messages
*/

.refactor .indicator {
	display: block;
	width: calc(100% - 20px);
	min-height: 30px;
	padding-left: 30px; /* for indicator sign */
	position: relative;
	border: 1px solid #ebebeb;
	margin: 20px 20px 0 10px;
	height: auto;
}

.refactor .indicator:before {
	text-align: center;
	font-size: 20px;
	font-weight: normal;
	content: "";
	display: block;
	background: lightgrey;
	position: absolute;
	left: 0;
	top: 0;
	line-height: 30px;
	width: 30px;
	height: 100%;
	color: white;
	text-shadow: 1px 1px rgba(0,0,0,0.1); /* iconshadow */
}

.refactor .indicator p {
	display: inline-block;
	padding: 5px;
}

.refactor .indicator p span {
	font-size: 12px;
}

.refactor .indicator.indicator-Goed {
	border-color: rgba(8, 167, 1, 0.2);
}

.refactor .indicator.indicator-Goed:before {
	background: #08a701;
	content: "\e102";
}
.refactor .indicator.indicator-infoMessage {
	border-color: #0071cf;
}

.refactor .indicator.indicator-infoMessage:before {
	background: #0071cf;
	content: "\e191";
}

.refactor .indicator.indicator-Fout {
	border-color: rgba(219, 1, 1, 0.2);
}

.refactor .indicator.indicator-Fout:before {
	background: #db0101;
	content: "\e192";
}

.refactor .indicator.indicator-Waarschuwing {
	border-color: rgba(219, 206, 1, 0.2);
}

.refactor .indicator.indicator-Waarschuwing:before {
	background: #dbce01;
	content: "\e137";
}

.refactor .indicator.indicator-Onbekend {
	border-color: rgba(0, 113, 207, 0.2);
}

.refactor .indicator.indicator-Onbekend:before {
	background: #0071cf;
	content: "\e193";
}

/*
	Inlinecontainer: Through a presentationstyle/class on a parent fieldset
*/

.refactor.inlinecontainer > fieldset > *:not(legend):not(.dropdownbutton),
.refactor.inlinecontainer > div {
	max-width: 500px;
	margin-left: 306px;
}


/*==============================================
	Input, Textarea, Label, Combobox, Boolean, Required Field, Error, File-upload, Errormessage
===============================================*/

/*
	input: label
*/

.refactor label {
	width: 300px;
	display: inline-block;
	height: 100%;
	cursor: default;
	vertical-align: top;
	padding: 5px 10px 8px 50px;
	/* font-size: 10pt; */
    margin-right: -4px;
}

.refactor.break_label label {
	word-break: break-word;
}

.refactor label+div{
	display: inline-block;
	vertical-align: top;
	margin-left: 10px; /* room for required space */
	width: calc(100% - 310px);
	position: relative;
}

.refactor label.accesability-hidden+div {
	margin-left: 0;
	width: calc(100% - 10px);
}

.refactor label+div[role] { /* aria-element*/
	max-width: 500px;
}

.refactor select,
.refactor input:not(.editorcheckbox) {
	border: 1px solid #CCC;
	max-width: 500px;
	padding: 5px;
	margin: 0;
	width: 100%;
	letter-spacing: 0.33px;
	line-height: 18px;
	display: inline-block;
	vertical-align: middle;
	min-height: 30px; /* required for inputbuttons afterwards */
	border-radius: 0; /* required for proper iOS styling */ 
	-webkit-border-radius: 0px; /* required for proper iOS styling */ 
}

.refactor input:disabled {
	opacity: 0.2;
	cursor: auto;
}

/*	readonly / answer > span or Text*/

.refactor .readonly label+div,
.refactor label+div.answer > .Text:first-of-type  {
	padding-top: 5px;
}

.refactor label+div.answer > .Text:last-of-type {
	padding-bottom: 5px;
}

.refactor.textwrapper label+div .Text {
	padding: 0;
}

/*
	input: dropdown / ui-menu / inputsection
*/

.refactor .ui-menu {
	box-shadow: none;
}

.refactor .inputsection {
	display: inline-block;
	max-width: 500px;
	width: 100%;
	position: relative;
}

.refactor .autocomplete .inputsection {
	/* font-size: 0; */
}

.refactor .autocomplete .inputsection > .explain {
	margin-left: -4px;
}

.refactor .inputsection.has-datepicker,
.refactor .inputsection.has-datepicker + .error-message {
	max-width: calc((500px / 3) + 29px);
}

/*
	input: checkbox
*/

.refactor .checkbox input[type="checkbox"] { /* Can't use display none  or visibility hidden since else this wont be focusable */
	display: inline-block; 
	width: 0;
	height: 0;
	opacity: 0;
	min-height: 0;
	max-height: 0;
	margin: 0;
	padding: 0;
	position: fixed;
	z-index: -100;
	top: 0;
	left: 0;
}

.refactor .checkbox input[type="checkbox"] + label {
	background: white;
	border: transparent;
	display: inline-block;
	padding: 0;
}

.refactor .checkbox input[type="checkbox"] + label > span {
	vertical-align: top;
}

.refactor .checkbox:focus input[type="checkbox"] + label:before,
.refactor .checkbox input[type="checkbox"]:focus + label:before { /* needs specific focus styling since the element itself is not focussed */
	border-color: #0071cf;
}

.refactor ul.checkbox {
	line-height: 18px;
	width: auto;
	display: inline-block;
}

.refactor .checkbox li:not(:last-of-type) {
	margin-bottom: 5px;
}

.refactor .checkbox li label {
	padding: 5px 10px 5px 5px;
	border: 1px solid #CCC;
	cursor: pointer;
	display: inline-block;
	/*background-color: white;*/
	width: auto;
}

.refactor .answer input[type=checkbox]+label:before {
	content: " ";
	border: 1px solid #CCC;
	margin-top: 1px;
	margin-right: 5px;
	width: 15px;
	height: 15px;
	display: inline-block;
	vertical-align: top;
	-moz-box-shadow: inset #fff 0px 0px 0px 1px;
	-webkit-box-shadow: inset #fff 0px 0px 0px 1px;
	box-shadow: inset #fff 0px 0px 0px 1px;
	background-color: white;
}

.refactor .answer input[type=checkbox]:checked+label:before {
	background-color: #08a701;
}
.refactor .answer input[type=checkbox]:disabled:checked+label:before {
	background-color: #ccc;
}

/* table checkbox */

.refactor table .checkbox input[type="checkbox"] + label {
    width: auto;
    padding: 5px;
	background: transparent;
}

/* required checkbox */

.refactor .required .checkbox {
	display: inline-block;
	width: 100%;
	max-width: 500px;
	border: 1px solid #CCC;
	padding: 5px;
	background-color: white;
}

.refactor .required .checkbox label {
	width: 100%;
}

/* horizontal checkbox*/
.refactor .horizontal .checkbox li {
	display: inline-block;
	position: relative;
	padding-left: 13px;
	margin-bottom: 0;
}

.refactor .horizontal .checkbox li:nth-child(2) { /* first list element is always a hidden checkbox */
	padding-left: 0;
}

.refactor .horizontal .checkbox li:before {
	position: absolute;
	content: "";
	height: 1px;
	background: #CCC;
	width: 13px;
	left: 0;
	top: 15px;
}

.refactor .horizontal .checkbox li:nth-child(2):before { /* first list element is always a hidden checkbox */
	display: none;
}

/*	Explain after a checkbox */
.refactor .checkbox + .explain {
	display: block;
	width: 100%;
	border-left: 1px solid #CCC;
	margin-top: 10px;
}

/*
	input: checkbox toggle
*/

.checkbox .toggle + label {
	cursor: pointer;
}

/* row input: checkbox toggle */
.row.toggle .answer.has-boolean {
	min-height: 29px;
}

.row.toggle .answer.has-boolean .radiofieldset {
	vertical-align: middle;
}

.row.toggle .answer.has-boolean .radiofieldset label {
	width: auto;
    text-align: center;
    padding: 6px 5px 5px 5px;
    background: transparent;
}

/*
	input: boolean
	has .answer class so that readonly fields will not have any trouble
*/

.refactor .answer.has-boolean {
    white-space: nowrap;
	width: auto; /* This is for the :focus border-around */
}

.refactor .answer .boolean {
	border: 1px solid #CCC;
	display: inline-block;
	padding: 0;
	position: relative;
	margin-right: 13px;
	background: white;
	vertical-align: top;
	/*max-height: 30px;  Fix styling in other browsers than Chrome 
	height: 30px;*/
}

.refactor .answer .boolean.boolean-false {
	margin-right: 0px;
}

.refactor .answer .boolean:not(.boolean-false):after {
	position: absolute;
	top: 14px;
	width: 13px;
	height: 1px;
	background: #CCC;
	border-top: 1px solid #CCC;
	text-align: center;
	content: "";
	right: -14px;
	color: #fff;
}
.refactor .answer .boolean:last-of-type:after {
	display: none;
}
.refactor input[type=radio],
.refactor input[type=checkbox] {
	width: auto;
}
.refactor input[type=radio]+label {
	margin: 0;
	width: 100%;
	padding: 6px;
	cursor: pointer;
	padding-left: 30px;
	position: relative;
	line-height: 16px;
}
.refactor .answer .boolean span {
	display: inline-block;
	vertical-align: top;
	/*margin: 0 5px;*/
	line-height: 15px;
}

.refactor .answer input[type=radio]+label:before {
	content: " ";
	border: 1px solid #CCC;
	width: 15px;
	height: 15px;
	display: inline-block;
	vertical-align: top;
	-moz-box-shadow: inset #fff 0px 0px 0px 1px;
	-webkit-box-shadow: inset #fff 0px 0px 0px 1px;
	box-shadow: inset #fff 0px 0px 0px 1px;
	background: white;
	line-height: 15px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: calc(50% - (15px / 2 ));
	left: 6px;
}
.refactor input[type=radio]:checked+label:before {
	background: #08a701;
}

.refactor .boolean-true input[type=radio]:checked+label:before {
	background: #08a701;
}

.refactor .boolean-false input[type=radio]:checked+label:before {
	background: #db0101;
}

/* boolean: fix for non-wrapping container (inline-block font-size: 0 alternative)*/

.refactor .boolean-true + .boolean-false {
	margin-left: -4px;
}

.refactor fieldset.radiofieldset + .explain,
.refactor .boolean-false + .explain {
	margin-left: -4px;
}

.refactor fieldset.radiofieldset + .explain + .explain-hidden,
.refactor .boolean-false + .explain + .explain-hidden {
	max-width: 155px;
}

/* 
	Scrollfield
*/

/* Field that has to scroll because it can contain a lot of content */

.refactor .readonly.scrollfield .answer {
	max-width: 500px;
	max-height: 200px;
	min-height: 40px;
	overflow: auto;
}

.refactor .readonly.scrollfield .answer .scrollfield-list > span {
	display: inline-block;
    width: 25%;
    padding: 2px;
}

/*
	Radio
*/

.refactor .radio {
	display: inline-block;
	border: 1px solid #CCC;
	padding-right: 5px;
	background: white;
	max-width: 500px;
	position: relative;
	z-index: 0;
}

/* Vertical Radio */

.refactor .vertical .radio {
	border: 0;
	background: transparent;
	max-width: none;
}

.refactor .vertical .radio li {
	display: inline-block;
	position: relative;
	z-index: 2;
}

.refactor .vertical .radio li label {
	border: 1px solid #CCC;
	background: white; /* transparent otherwise */
}

.refactor .vertical .radio li:not(:nth-child(2)) { /* First element always hidden */
	padding-left: 10px;
    margin-left: -2px;
    z-index: 2;
}

/* line in between */
.refactor .vertical .radio li:not(:nth-child(2)):before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 1px);
    height: 1px;
    width: 10px;
    background: #CCC;
}

/* Yes/No Radio */

.refactor .vertical.radiobutton_ja_nee .radio li:not(:last-of-type) input[type=radio]:checked+label:before {
	background-color: #08a701;
}
.refactor .vertical.radiobutton_ja_nee .radio li:last-of-type input[type=radio]:checked+label:before {
	background-color: #db0101;
}

/* Yes/No Radio with Explain */

.refactor .vertical.radiobutton_ja_nee .radio {
	padding-right: 0;
}

.refactor .vertical.radiobutton_ja_nee .radio li label {
	min-height: 30px;
}

.refactor .vertical.radiobutton_ja_nee .explain {
	margin-left: -4px;
}

/*
	input: required field styling
*/

.refactor-field.required > label+div:not(.has-explain) > .datefield-wrapper:before,
.refactor-field.required > label+div:not(.has-explain):before,
.refactor-field.required > label+div.has-explain > div.datefield-wrapper:before,
.refactor-field.required > label+div.has-explain > div.inputsection:before,
.refactor-inlinecontainer.required > label+div:before,
.refactor-fieldbarcodeinput.required > label+div:before, /* Reisdocuments */
.refactor-fileupload.required > div:before, /* file upload styling */
.refactor-field.required.documentselection > div > div:first-of-type:before, /* document selection styling*/
.refactor-field.required.readonly.has-1-stickybutton > div:before /* Readonly field that can be editted through stickybutton*/
 {
	position: absolute;
	top: 0;
	width: 10px;
	height: 100%;
	background: #ebebeb;
	border: 1px solid #ccc;
	border-right: 0;
	text-align: center;
	content: "*";
	display: inline-block;
	left: -10px;
	font-size: 10pt;
	color: #8a8c8a; /* color: #CCC; before */
    text-shadow: 0px 0px 6px white;
}

.refactor-field.required.error > label+div:not(.has-explain):before,
.refactor-inlinecontainer.required.error > label+div:not(.has-explain):before,
.refactor-field.textarea.required.error .inputsection:before,
.refactor-field.integer.required.error .inputsection:before,
.refactor-field.required.error > label+div > div.inputsection:before,
.refactor-field.required.error > label+div.has-explain>div.inputsection:before {
	background: #db0101;
	border: 1px solid #db0101;
	color: #fff;
	z-index: 1;
}





/* readonly required field*/

.refactor-field.readonly.required > label+div:before,
.refactor-inlinecontainer.readonly.required > label+div:before,
.refactor-field.readonly.required.error > label+div:before,
.refactor-inlinecontainer.readonly.required.error > label+div:before,
.refactor-field.readonly.required > label+div.has-explain>div.inputsection:before {
	content: "";
	display: none;
}

/*
	input: currency field styling
*/

.refactor .refactor input.currency {
	padding-left: 20px;
	max-width: calc(500px / 3); /* Same width as datefield */
}

/* Euro Sign */
.refactor .prefix {
	position: absolute;
	z-index: 11;
	line-height: 30px;
	width: 20px;
	text-align: center;
	left: 0;
	top: 0;
	opacity: 0.5;
}

/* currency readonly field */
.refactor .readonly .prefix {
	line-height: 30px;
	opacity: 1;
	width: 10px;
	text-align: left;
}

.refactor .readonly .prefix + span {
	padding-left: 10px;
	line-height: 20px;
}

/*
	input: integer field styling
*/

.refactor .integer .inputsection,
.refactor .integer .inputsection + .error-message, /* errorsection should match width */
.refactor input.integer,
.refactor .integer input.integer {
	max-width: calc(500px / 3);  /* Same width as datefield */
}

/*
	input: inlinecontainer 
*/

.refactor-inlinecontainer .inlinecontainer-wrapper {
	white-space: nowrap;
}

.refactor-inlinecontainer .inlinecontainer-wrapper .answer {
	display: inline-block;
	width: auto;
	position: relative;
	vertical-align: top;
}

.refactor-inlinecontainer .inlinecontainer-wrapper > .answer:not(:first-of-type):not(.no-value),
.refactor-inlinecontainer .inlinecontainer-wrapper > .answer ~ .answer:not(.readonly) {
	padding-left: 13px;
}

.refactor-inlinecontainer .inlinecontainer-wrapper > .answer:not(:first-of-type):not(.no-value):before,
.refactor-inlinecontainer .inlinecontainer-wrapper > .answer ~ .answer:not(.readonly):before {
	position: absolute;
	content: "";
	height: 1px;
	background: #CCC;
	width: 13px;
	left: 0;
	top: 15px;	
}

.refactor-inlinecontainer .inlinecontainer-wrapper > .answer.readonly:not(:first-of-type):not(.no-value):before { /* Readonly */
	top: 10px;
	width: 5px;
    left: 5px;
}

.refactor-inlinecontainer .inlinecontainer-wrapper > .answer.readonly.no-value + .answer.readonly {
	padding-left: 0;
}
.refactor-inlinecontainer .inlinecontainer-wrapper > .answer.readonly.no-value + .answer.readonly:before {
	display: none;
}


.refactor-inlinecontainer .inlinecontainer-wrapper .answer > .error-message {
	display: none;
}

/* inlinecontainer with text elements*/

.refactor-inlinecontainer .inlinecontainer-wrapper .Text {
	padding: 0;
	line-height: 18px;
}
.refactor-inlinecontainer .inlinecontainer-wrapper .Text:first-of-type {
	padding-top: 5px;
}

/* inlinecontainer with partial date */
.refactor-inlinecontainer.partialdate .inlinecontainer-wrapper > .answer ~ .answer.datefieldwrapper  {
	padding-left: 0;
}
.refactor-inlinecontainer.partialdate .inlinecontainer-wrapper > .answer ~ .answer.datefieldwrapper .date-picker-button:before  {
	border-left: 0;
}
.refactor-inlinecontainer.partialdate .inlinecontainer-wrapper .datefieldwrapper:before {
	display: none;
}

.refactor-inlinecontainer.partialdate .inlinecontainer-wrapper > .answer + .error-message {
	max-width: 217px;
}

/*
	input: required field error styling
*/

.refactor .error select,
.refactor .error input ,
.refactor .error div.boolean {
	border: 1px solid #db0101;
}

.refactor .error div.boolean:after {
	border-top: 1px solid #db0101;
}

/* these are jQuery UI elements */

.refactor .error .datefield-wrapper input.datepicker + div.date-picker-button:before {
	border-color: #db0101; 
}

/*
	input: errormessage
*/

.refactor .error-message,
.refactor .error-message ul {
	display: block;
	max-width: 500px;
	border: 1px solid #db0101;
	border-top: 0;
	background: #db0101;
	margin: 0;
	position: relative;
}

.refactor .error-message ul {
	line-height: 12pt;
}

.refactor .error-message p,
.refactor .error-message ul li {
	color: white;
	font-weight: bold;
	font-size: 8pt;
	padding: 0 5px;
}

.refactor .error-message ul li {

}

/* errormessage specifics */
.refactor .separate-date-time + .error-message,
.refactor .datefield-wrapper + .error-message,
.refactor input.currency + .error-message,
.refactor input.integer + .error-message {
	width: calc(500px / 3);
	min-width: 1px; /* overrule aquima.css */
}

/* textarea error : behaves differently because within a wrapper*/
.refactor .error.textarea .error-message:before {
	display: block;
	content: "";
	position: absolute;
	width: 10px;
	height: calc(100% + 1px);
	left: -11px;
	top: 0;
	border: 0;
	display: block;
	background: #db0101;
	/* overrule aquima.css */
	-moz-transform: rotate(0deg) skew(0deg);
	-ms-transform: rotate(0deg) skew(0deg);
	-o-transform: rotate(0deg) skew(0deg);
	-webkit-transform: rotate(0deg) skew(0deg);
	transform: rotate(0deg) skew(0deg);
}

/* inputsection integer error */
/* inputsection datepicker error */
.refactor .error.integer .error-message:before,
.refactor.error.required > div .inputsection + .error-message:before {
    display: block;
    content: "";
    position: absolute;
    width: 11px;
    height: calc(100% + 1px);
	top: 0;
    left: -11px;
    background-color: #db0101;
	-webkit-transform: initial; /* aquima.css "rotate" overrule */
}
/*
	input: textarea
*/

.refactor textarea {
	width: 100%;
	max-width: 500px;
	padding: 5px;
	border-style: solid;
	border-width: 1px;
	border-color: #CCC;
	letter-spacing: 0.33px;
	/* outline: none; */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: inline-block; /* required for proper iOS styling */ 
    vertical-align: top; /* required for proper iOS styling */ 
 	-webkit-appearance: none; /* required for proper iOS styling */ 
	border-radius: 0; /* required for proper iOS styling */ 
	-webkit-border-radius: 0px; /* required for proper iOS styling */ 
}

/* editor */
.refactor .jqte {
	margin: 0 0 0 50px;
	width: calc(100% - 50px);
	max-width: 761px;
}

/*
	textarea-wrapper
*/

.refactor .textarea-wrapper {
	/* overflow: auto; */
	/* font-size: 0; */
}

.refactor .textarea-wrapper + .explain {
	width: 100%;
	max-width: 500px;
	border-top: 0;
	border-left: 1px solid #CCC; 
}

/* textarea help */


/*==============================================
	Datasetstyling
===============================================*/

.dataset-wrapper {
	margin-bottom: 10px;
	padding-left: 10px;
	position: relative;
}

.dataset-wrapper:last-of-type {
	margin-bottom: 0;
}

.dataset-wrapper .dataset-header {
	padding: 10px;
	border: 1px solid #ebebeb;
}

.dataset-wrapper:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	width: 10px;
	background: #ebebeb;
}

.dataset-wrapper .dataset-date {
	font-weight: bold;
	display: table-cell;
	min-width: 100px;
}

.dataset-wrapper .dataset-title {
	display: table-cell;
}

.dataset-wrapper .dataset-content {
	padding: 10px;
	border: 1px solid #ebebeb;
	border-top: 0;
}

.dataset-wrapper .dataset-content:empty {
	padding: 0;
	border: 0;
}


/*==============================================
	Button
===============================================*/
 
.refactor .buttondisplay,
.refactor button {
	padding: 6px;
	line-height: 14px;
	min-height: 30px;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	background: #ebebeb;
	border: 1px solid #CCC;
	color: #626060;
	position: relative;
	text-decoration: none; /* only required for buttondisplay */
	z-index: 0; /* required for jQueryUI Dropdown menu's to prevent overlay*/
	-webkit-appearance: none; /* Required for iOS to remove rounded corners */
    border-radius: 0; /* Required for iOS to remove rounded corners */
	font-size: .95em;
    letter-spacing: -0.5px;
}

.refactor .buttondisplay:hover,
.refactor button:hover {
	background: #5a5a5a;
	color: white;
	-webkit-appearance: none; /* Required for iOS to remove rounded corners */
    border-radius: 0; /* Required for iOS to remove rounded corners */
}

.refactor .buttondisplay:focus:active, /* Required for IE11 */
.refactor .buttondisplay:focus,
.refactor button:focus:active, /* Required for IE11 */
.refactor button:focus {
	background: #0071cf;
	color: white;
}

.refactor .buttondisplay > span,
.refactor button > span {
	vertical-align: middle;
	color: #626060;
	/* white-space: nowrap;  prevent breaking of text in buttons */
}

.refactor .buttondisplay:hover > span,
.refactor .buttondisplay:focus > span,
.refactor .buttondisplay:focus:active > span, /* Required for IE11 */
.refactor button:hover > span,
.refactor button:focus > span,
.refactor button:focus:active > span {
	color: white;
}

/* disabled states*/
.refactor .buttondisplay.disabled,
.refactor button:disabled {
	opacity: 0.2;
	cursor: auto;
}

.refactor button:disabled span,
.refactor button:disabled:hover,
.refactor .buttondisplay.disabled span,
.refactor .buttondisplay.disabled:hover {
	background: transparent;
	color: #626060;
}

/*
	independant button / buttonwrapper under fieldset
*/

fieldset.refactor > button {
	margin-top: 10px;
	margin-bottom: 10px;
	width: calc(100% - 50px);
	margin-left: 25px;
}

fieldset.refactor > button.Werkstation {
	width: auto;
	background: white;
	margin-left: 10px;
}

fieldset.refactor > button.Werkstation:hover {
	background: #5a5a5a;
	color: white;
}

/*
	nostretchbutton
*/

fieldset.refactor > button.no-stretch {
	width: auto;
}

 /* 
	inlinebutton
*/

.refactor .inlinebutton {
	margin-left: 310px;
	margin-top: 10px;
	width: 100%;
	max-width: 500px;
}

/*
	inlinebutton: wrapper - should not have margin-left! Define inlinecontainer higherup!
*/

.refactor .inlinebuttonwrapper {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.refactor .inlinebuttonwrapper > div {
	display: table-cell;
}

.refactor .inlinebuttonwrapper > div:not(:last-of-type) {
	padding-right: 2px;
}

/*
	inlinebutton: wrapper - when directly under a fieldset (no inline-container)
*/

fieldset.refactor > .inlinebuttonwrapper {
	margin-left: 310px;
	width: calc(100% - 310px);
	max-width: 500px;
}

fieldset.refactor > .inlinebuttonwrapper button {
	margin-left: 0;
}

 /* 
	stickybutton
*/

.refactor .stickybutton-wrapper {
	display: inline-block;
	vertical-align: top;
	padding-left: 13px;
	position: relative;
}

.refactor .stickybutton-wrapper:before {
	position: absolute;
	content: "";
	height: 1px;
	background: #CCC;
	width: 13px;
	left: 0;
	top: 15px;	
}

.refactor .stickybutton {
	width: auto;
	vertical-align: top;
}

/* stickybutton no-connection*/
.refactor .stickybutton-wrapper.no-connection {
	padding-left: 24px;
}

.refactor .stickybutton-wrapper.no-connection:before {
	height: 100%;
	width: 1px;
	top: -3px;
	padding-bottom: 7px;
	left: 11px;
	opacity: 0.5;
}

 /* 
	iconbutton
*/

.refactor .buttondisplay.iconbutton,
.refactor .buttondisplay.iconbutton > span,
.refactor button.iconbutton,
.refactor button.iconbutton > span {
	font-size: 0;
}

.refactor .buttondisplay.iconbutton > span,
.refactor button.iconbutton > span {
	display: none;
}

.refactor .buttondisplay.iconbutton:before,
.refactor button.iconbutton:before {
	content: "\e101";
	padding: 0;
	font-size: 20px;
	vertical-align: top;
}

/*
	button: rows
*/

.refactor .has-1-button .inlinebutton:first-of-type,
.refactor .has-2-button .inlinebutton:first-of-type,
.refactor .has-3-button .inlinebutton:first-of-type,
.refactor .has-4-button .inlinebutton:first-of-type,
.refactor .has-5-button .inlinebutton:first-of-type {
	margin-left: 310px;
	margin-top: 10px;
}

.refactor .has-1-button .inlinebutton:not(:first-of-type),
.refactor .has-2-button .inlinebutton:not(:first-of-type),
.refactor .has-3-button .inlinebutton:not(:first-of-type),
.refactor .has-4-button .inlinebutton:not(:first-of-type),
.refactor .has-5-button .inlinebutton:not(:first-of-type) {
	margin-left: 5px;
	margin-top: 10px;
}

.refactor .has-1-button button.inlinebutton {
	max-width: 500px;
}

.refactor .has-2-button button.inlinebutton {
	max-width: calc(500px / 2);
}

.refactor .has-2-button button.inlinebutton:not(:first-of-type) {
	max-width: calc(500px / 2 - 5px);
}

.refactor .has-3-button button.inlinebutton {
	max-width: calc(500px / 3);
}

.refactor .has-3-button button.inlinebutton:not(:first-of-type) {
	max-width: calc(500px / 3 - 5px);
}

.refactor .has-4-button button.inlinebutton {
	max-width: calc(500px / 4);
}

.refactor .has-4-button button.inlinebutton:not(:first-of-type) {
	max-width: calc(500px / 4 - 5px);
}

.refactor .has-5-button button.inlinebutton {
	max-width: calc(500px / 5);
}

.refactor .has-5-button button.inlinebutton:not(:first-of-type) {
	max-width: calc(500px / 5 - 5px);
}

 /* 
	buttonwrapper 
*/

.refactor .buttonwrapper {
	display: table;
	table-layout: fixed;
	width: 100%;
	max-width: 500px;
    margin-left: 306px;
	padding-bottom: 5px;
}

.refactor .buttonwrapper  > * {
	display: table-cell;
	width: auto;
}

.refactor .buttonwrapper  > *:not(:last-child) {
	padding-right: 2px;
}

.refactor .buttonwrapper button {
	overflow: hidden;
    text-overflow: ellipsis;
}

/*
	button: sticky rows
*/

/* 
	stickybutton datefield 
*/

.refactor .has-1-stickybutton .datefield-wrapper,
.refactor .has-2-stickybutton .datefield-wrapper,
.refactor .has-3-stickybutton .datefield-wrapper {
	display: inline-block;
}


/* 
	stickybutton separate date+timefield 
*/

.refactor .has-1-stickybutton.separate_date_time .separate-date-time,
.refactor .has-2-stickybutton.separate_date_time .separate-date-time,
.refactor .has-3-stickybutton.separate_date_time .separate-date-time {
	display: inline-block;
}

/* 
	stickybutton checkbox 
*/

.refactor .has-1-stickybutton .checkbox,
.refactor .has-2-stickybutton .checkbox,
.refactor .has-3-stickybutton .checkbox {	
	display: inline-block;
	max-width: 500px;
	border: 1px solid #CCC;
	padding: 5px;
	background-color: white;
}

.refactor .has-1-stickybutton .checkbox li label,
.refactor .has-2-stickybutton .checkbox li label,
.refactor .has-3-stickybutton .checkbox li label {
	display: inline-block;
}

/* horizontal stickybutton checkbox */

.refactor .horizontal.has-1-stickybutton .checkbox li,
.refactor .horizontal.has-2-stickybutton .checkbox li,
.refactor .horizontal.has-3-stickybutton .checkbox li {
	margin-bottom: 0;
}

.refactor .horizontal.has-1-stickybutton .stickybutton-wrapper,
.refactor .horizontal.has-2-stickybutton .stickybutton-wrapper,
.refactor .horizontal.has-3-stickybutton .stickybutton-wrapper {
	margin-top: 5px;
}

/* 
	stickybutton readonly
*/

.refactor .readonly.has-1-stickybutton > .answer,
.refactor .readonly.has-2-stickybutton > .answer,
.refactor .readonly.has-3-stickybutton > .answer   {
	padding-top: 0; /* required so that we can simulate an inputfield */
}

.refactor .readonly.has-1-stickybutton > .answer > span,
.refactor .readonly.has-2-stickybutton > .answer > span,
.refactor .readonly.has-3-stickybutton > .answer > span,
.refactor .readonly.has-1-stickybutton .inputsection > span,
.refactor .readonly.has-2-stickybutton .inputsection > span,
.refactor .readonly.has-3-stickybutton .inputsection > span  {
	display: inline-block;
	width: 100%;
	max-width: 500px;
	line-height: 28px;
	border: 1px solid #CCC;
	background: #FDFDFD;
	padding-left: 5px;
}

.refactor .readonly.has-1-stickybutton > .answer > span:empty,
.refactor .readonly.has-2-stickybutton > .answer > span:empty,
.refactor .readonly.has-3-stickybutton > .answer > span:empty,
.refactor .readonly.has-1-stickybutton .inputsection > span:empty,
.refactor .readonly.has-2-stickybutton .inputsection > span:empty,
.refactor .readonly.has-3-stickybutton .inputsection > span:empty {
	min-height: 30px;
	display: inline-block;
}

/* with explain */

.refactor .has-1-stickybutton.readonly .has-explain .inputsection > span,
.refactor .has-2-stickybutton.readonly .has-explain .inputsection > span,
.refactor .has-3-stickybutton.readonly .has-explain .inputsection > span {
	width: calc(100% - 30px);
}

.refactor .has-1-stickybutton.readonly .explain,
.refactor .has-2-stickybutton.readonly .explain,
.refactor .has-3-stickybutton.readonly .explain {
	text-align: center;
	background: white;
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-top: 1px solid #CCC;
	border-left: 0;
} 

.refactor .has-1-stickybutton.readonly .explain:before,
.refactor .has-2-stickybutton.readonly .explain:before,
.refactor .has-3-stickybutton.readonly .explain:before {
	font-size: 24px;
	padding-top: 1px;
}

.refactor .has-1-stickybutton.readonly .explain-hidden,
.refactor .has-1-stickybutton.readonly .explain:hover ~ .explain-hidden,
.refactor .has-2-stickybutton.readonly .explain-hidden,
.refactor .has-2-stickybutton.readonly .explain:hover ~ .explain-hidden,
.refactor .has-3-stickybutton.readonly .explain-hidden,
.refactor .has-3-stickybutton.readonly .explain:hover ~ .explain-hidden {
	border-top: 0;
}

/* currencyfield*/
.refactor .has-1-stickybutton.readonly > .answer > span.prefix,
.refactor .has-2-stickybutton.readonly > .answer > span.prefix,
.refactor .has-3-stickybutton.readonly > .answer > span.prefix {
	width: 20px;
	padding-left: 0;
	border-color: transparent;
	background: transparent;
}

.refactor .has-1-stickybutton.readonly > .answer > span.prefix + span,
.refactor .has-2-stickybutton.readonly > .answer > span.prefix + span,
.refactor .has-3-stickybutton.readonly > .answer > span.prefix + span {
	padding-left: 20px;
}

/* 
	headerbuttons fieldsetspecific + accordeon (headerbuttons_absolute)
*/

fieldset.refactor > .headerbuttons_absolute,
.has-subaccordeon > div > .headerbuttons_absolute {
	margin-top: 5px;
	margin-bottom: 5px;
	padding-left: 10px;
}

fieldset.refactor > fieldset.refactor > .headerbuttons_absolute {
	padding-left: 10px; /* subfieldset */
}

.refactor .headerbuttons_absolute {
	position: static;
	margin: 0px 10px;
	width: auto;
	display: block;
	padding: 0 5px 10px 5px;
	border-bottom: 1px dashed #ebebeb;
}

.refactor .headerbuttons_absolute:empty {
	display: none;
}

.refactor .headerbuttons_absolute > :first-child { /* can be button, can be div */
	margin-left: 10px;
}

.refactor .headerbuttons_absolute a.buttondisplay,
.refactor .headerbuttons_absolute button {
	background: white;
	display: inline-block;
	width: auto;
	margin-left: 5px;
}

.refactor .headerbuttons_absolute a.buttondisplay:hover,
.refactor .headerbuttons_absolute button:hover {
	background: #5a5a5a;
	color: white;
}

.refactor .headerbuttons_absolute a.buttondisplay:disabled:hover,
.refactor .headerbuttons_absolute a.buttondisplay:disabled:hover:before,
.refactor .headerbuttons_absolute button:disabled:hover,
.refactor .headerbuttons_absolute button:disabled:hover:before {
	background: white;
	color: inherit;
}

.refactor .headerbuttons_absolute a.buttondisplay:focus,
.refactor .headerbuttons_absolute button:focus {
	background: #0071cf;
	color: white;
}

/* Uploadbutton within headerbutton (for popup) */
.refactor .headerbuttons_absolute > .fileupload {
	display: inline-block;
	padding: 0;
}
.refactor .headerbuttons_absolute > .fileupload > div {
	width: auto;
	line-height: 30px;
	display: inline-block;
	margin: 0;
}
.refactor .headerbuttons_absolute > .fileupload > label {
	display: none;
}
.refactor .headerbuttons_absolute > .fileupload button {
	width: 100%;
}
.refactor .headerbuttons_absolute button + .fileupload {
	margin-left: 5px;
}

.refactor .headerbuttons_absolute > .fileupload + button {
	margin-left: 10px;
}
/* Document Generation headerbutton */
.refactor .headerbuttons_absolute > .dropdownbutton {
	display: inline-block;
	padding: 0;
	vertical-align: top;
	margin-left: 5px;
}
.refactor .headerbuttons_absolute > .dropdownbutton > .answer .dropdowntoggle {
	background: white;
}

.refactor .headerbuttons_absolute > .dropdownbutton > .answer {
	margin-left: 0;
}

.refactor .headerbuttons_absolute > .dropdownbutton > .answer button {
	margin-left: 0;
	width: 100%;
}

/* 
	button icons
	fieldset icons
*/

/* button / icon colors */
.refactor button.icon_bg_white {
	background: white;
}
.refactor button.icon_bg_green {
	background: #08a701;
} 
.refactor button.icon_bg_blue {
	background: #0071cf;
}
.refactor button.icon_bg_red {
	background: #db0101;
} 
.refactor button.icon_bg_orange{
	background: #dbce01;
}

.refactor button[class*="icon_bg_"],
.refactor button[class*="icon_bg_"] > span {
	color: white; /* set the color white to any button that has a background-color*/
}

.refactor button[class*="icon_bg_"]:disabled,
.refactor button[class*="icon_bg_"]:disabled > span{
	background: inherit;
	color: inherit;
}

body [class*="mce-icon_"] button:before,
.refactor [class*="icon_"]:before,
fieldset.refactor[class*="icon_"]:before {
	display: inline-block;
	vertical-align: middle;
	font-size: 20px;
	padding-right: 5px;
	font-weight: normal;
}

body [class*="mce-icon_"] button * {
	display: none;
}

/* fieldset icons */
fieldset.refactor[class*="icon_"] {
	padding-left: 30px;
	position: relative;
}
fieldset.refactor[class*="icon_"]:before { 
	position: absolute;
    padding: 0;
	left: 10px;
    top: 0;
}

@-moz-document url-prefix() { /* Firefox Hack for displaying icons in a fieldset (=Firefox Bug!) */
	fieldset.refactor[class*="icon_"]:before {
		top: auto;
		bottom: 100%;
	}
}


/* 
	letter-icons
*/
.refactor button[class*="icon_letter_"]:before,
.refactor button[class*="icon_letter_"] > span:before {
	font-size: 28px;
    text-indent: -5px;
}

/* icon_research */
.refactor .buttondisplay.icon_onderzoek:before,
.refactor button.icon_onderzoek:before,
.refactor span.icon_onderzoek:before,
fieldset.refactor.icon_onderzoek:before {
    content: "\e272";
}

/* icon_list */
.refactor .buttondisplay.icon_lijst:before,
.refactor button.icon_lijst:before,
.refactor span.icon_lijst:before,
fieldset.refactor.icon_lijst:before {
	content: "\e171";
}

/* icon_flag */
.refactor .buttondisplay.icon_vlag:before,
.refactor button.icon_vlag:before,
.refactor span.icon_vlag:before,
fieldset.refactor.icon_vlag:before {
	content: "\e197";
}

/* icon_fileupload */
.refactor .buttondisplay.icon_fileupload:before,
.refactor button.icon_fileupload:before,
.refactor span.icon_fileupload:before,
fieldset.refactor.icon_fileupload:before {
	content: "\e210";
}

/* icon_start */
.refactor .buttondisplay.icon_start:before,
.refactor button.icon_start:before,
.refactor span.icon_start:before,
fieldset.refactor.icon_start:before {
	content: "\e151";
}
/* icon_reload */
.refactor .buttondisplay.icon_reload:before,
.refactor button.icon_reload:before,
.refactor span.icon_reload:before,
fieldset.refactor.icon_reload:before {
	content: "\e106";
}

/* icon_id_card */
.refactor .buttondisplay.icon_idkaart:before,
.refactor button.icon_idkaart:before,
.refactor span.icon_idkaart:before,
fieldset.refactor.icon_idkaart:before {
	content: "\e195";
}

/* icon_suitcase */
.refactor .buttondisplay.icon_koffer:before,
.refactor button.icon_koffer:before,
.refactor span.icon_koffer:before,
fieldset.refactor.icon_koffer:before {
	content: "\e196";
}

/* icon_documents_stacked */
.refactor .buttondisplay.icon_documenten_gestapeld:before,
.refactor button.icon_documenten_gestapeld:before,
.refactor span.icon_documenten_gestapeld:before,
fieldset.refactor.icon_documenten_gestapeld:before {
	content: "\e181";
}

/* icon_trashcan */
.refactor .buttondisplay.icon_prullenbak:before,
.refactor button.icon_prullenbak:before,
.refactor span.icon_prullenbak:before,
fieldset.refactor.icon_prullenbak:before {
	content: "\e167";
}

/* background specific for trashcanbutton */
.refactor .buttondisplay.icon_prullenbak:hover,
.refactor button.icon_prullenbak:hover,
.refactor button.icon_prullenbak:focus {
	background: #db0101;
}

/* icon_pencil */
.refactor .buttondisplay.icon_potlood:before,
.refactor button.icon_potlood:before,
.refactor span.icon_potlood:before,
fieldset.refactor.icon_potlood:before {
	content: "\e198";
}

/* icon_undo */
.refactor .buttondisplay.icon_ongedaan_maken:before,
.refactor button.icon_ongedaan_maken:before,
.refactor span.icon_ongedaan_maken:before,
fieldset.refactor.icon_ongedaan_maken:before {
	content: "\e288";
}

/* icon_floppy */
.refactor .buttondisplay.icon_diskette:before,
.refactor button.icon_diskette:before,
.refactor span.icon_diskette:before,
fieldset.refactor.icon_diskette:before {
	content: "\e199";
}

/* icon_fullscreen */
.refactor .buttondisplay.icon_fullscreen:before,
.refactor button.icon_fullscreen:before,
.refactor span.icon_fullscreen:before,
fieldset.refactor.icon_fullscreen:before {
	content: "\e164";
}

/* icon_check */
.refactor .buttondisplay.icon_check:before,
.refactor button.icon_check:before,
.refactor span.icon_check:before,
fieldset.refactor.icon_check:before { 
	content: "\e102";
}

/* icon_traveldocuments */
.refactor .buttondisplay.icon_reisdocumenten:before,
.refactor button.icon_reisdocumenten:before,
.refactor span.icon_reisdocumenten:before,
fieldset.refactor.icon_reisdocumenten:before { 
	content: "\e207";
}

/* icon_couple */
.refactor .buttondisplay.icon_stel:before,
.refactor button.icon_stel:before,
.refactor span.icon_stel:before,
fieldset.refactor.icon_stel:before { 
	content: "\e239";
}

/* icon_family */
.refactor .buttondisplay.icon_familie:before,
.refactor button.icon_familie:before,
.refactor span.icon_familie:before,
fieldset.refactor.icon_familie:before { 
	content: "\e240";
}

/* icon_heart */
.refactor .buttondisplay.icon_hart:before,
.refactor button.icon_hart:before,
.refactor span.icon_hart:before,
fieldset.refactor.icon_hart:before { 
	content: "\e241";
}

/* icon_none */
.refactor .buttondisplay.icon_geen:before,
.refactor button.icon_geen:before,
.refactor span.icon_geen:before,
fieldset.refactor.icon_geen:before { 
	content: "";
}

/* icon_brokenheart */
.refactor .buttondisplay.icon_gebrokenhart:before,
.refactor button.icon_gebrokenhart:before,
.refactor span.icon_gebrokenhart:before,
fieldset.refactor.icon_gebrokenhart:before { 
	content: "\e289";
}

/* icon_crown */
.refactor .buttondisplay.icon_kroon:before,
.refactor button.icon_kroon:before,
.refactor span.icon_kroon:before,
fieldset.refactor.icon_kroon:before { 
	content: "\e290";
}

/* icon_votebox */
.refactor .buttondisplay.icon_stembox:before,
.refactor button.icon_stembox:before,
.refactor span.icon_stembox:before,
fieldset.refactor.icon_stembox:before { 
	content: "\e293";
}

/* background specific for submitbutton */
.refactor .buttondisplay.icon_check:focus,
.refactor button.icon_check:focus {
	background: #08a701;
}

/* icon_lens */
.refactor button.iconsearch:before, /* old presentationstyle, should use icon_loep */
.refactor .buttondisplay.icon_loep:before,
.refactor button.icon_loep:before,
.refactor span.icon_loep:before,
fieldset.refactor.icon_loep:before {
	content: "\e135";
}

/* icon_eye */
.refactor .buttondisplay.icon_oog:before,
.refactor button.icon_oog:before,
.refactor span.icon_oog:before,
fieldset.refactor.icon_oog:before {
	content: "\e175";
}

/* icon_door */
.refactor .buttondisplay.icon_deur:before,
.refactor button.icon_deur:before,
.refactor span.icon_deur:before,
fieldset.refactor.icon_deur:before {
	content: "\e170";
}

/* icon_handout */
.refactor .buttondisplay.icon_uitreiken:before,
.refactor button.icon_uitreiken:before,
.refactor span.icon_uitreiken:before,
fieldset.refactor.icon_uitreiken:before {
	content: "\e209";
}

/* icon_cross */
.refactor .buttondisplay.icon_kruis:before,
.refactor button.icon_kruis:before,
fieldset.refactor.icon_kruis:before,
.mce-icon_kruis button:before,
.refactor button.icon_kruisje:before,
fieldset.refactor.icon_kruisje:before {
	content: "\e101";
}

/* icon_idocument */
.refactor .buttondisplay.icon_idocument:before,
.refactor button.icon_idocument:before,
fieldset.refactor.icon_idocument:before {
	content: "\e178";
}

/* icon_stop */
.refactor .buttondisplay.icon_stop:before,
.refactor button.icon_stop:before,
fieldset.refactor.icon_stop:before {
	content: "\e192";
}

/* icon_folder */
.refactor .buttondisplay.icon_map:before,
.refactor button.icon_map:before,
fieldset.refactor.icon_map:before {
	content: "\e223";
}

/* icon_memo */
.refactor .buttondisplay.icon_memo:before,
.refactor button.icon_memo:before,
fieldset.refactor.icon_memo:before {
	content: "\e221";
}

/* icon_person */
.refactor .buttondisplay.icon_persoon:before,
.refactor button.icon_persoon:before,
fieldset.refactor.icon_persoon:before {
	content: "\e131";
}

/* icon_whatsapp */
.refactor .buttondisplay.icon_whatsapp:before,
.refactor button.icon_whatsapp:before,
fieldset.refactor.icon_whatsapp:before {
	content: "\e283";
}

/* icon_house */
.refactor .buttondisplay.icon_huis:before,
.refactor button.icon_huis:before,
fieldset.refactor.icon_huis:before {
	content: "\e139";
}

/* icon_printer*/
.refactor .buttondisplay.icon_printer:before,
.refactor button.icon_printer:before,
fieldset.refactor.icon_printer:before {
	content: "\e222";
}

/* icon_letter / icon_email */
.refactor .buttondisplay.icon_brief:before,
.refactor button.icon_brief:before,
.refactor span.icon_brief:before,
fieldset.refactor.icon_brief:before {
	content: "\e226";
}

/* icon_paper */
.refactor .buttondisplay.icon_papier:before,
.refactor button.icon_papier:before,
fieldset.refactor.icon_papier:before {
	content: "\e220";
}

/* icon_cellphone */
.refactor .buttondisplay.icon_mobiel:before,
.refactor button.icon_mobiel:before,
fieldset.refactor.icon_mobiel:before {
	content: "\e225";
}

/* icon_@sign */
.refactor .buttondisplay.icon_apenstaartje:before,
.refactor button.icon_apenstaartje:before,
fieldset.refactor.icon_apenstaartje:before {
	content: "\e227";
}

/* icon_letter_r*/
.refactor .buttondisplay.icon_letter_r:before,
.refactor button.icon_letter_r:before,
fieldset.refactor.icon_letter_r:before {
	content: "\e286";
}

/* icon_letter_i*/
.refactor .buttondisplay.icon_letter_i:before,
.refactor button.icon_letter_i:before,
fieldset.refactor.icon_letter_i:before {
	content: "\e285";
}

/* icon_letter_v*/
.refactor .buttondisplay.icon_letter_v:before,
.refactor button.icon_letter_v:before,
fieldset.refactor.icon_letter_v:before {
	content: "\e287";
}

/* icon_icommunity*/
.refactor .buttondisplay.icon_icommunity:before,
.refactor button.icon_icommunity:before,
fieldset.refactor.icon_icommunity:before {
	content: "\e284";
}

/* icon_button_pdf*/
.refactor .buttondisplay.icon_button_pdf:before,
.refactor button.icon_button_pdf:before,
fieldset.refactor.icon_button_pdf:before {
	content: "\e213";
}

/* icon_back */
.refactor .buttondisplay.icon_terug:before,
.refactor button.icon_terug:before,
fieldset.refactor.icon_terug:before {
	content: "\e228";
}

/* icon_next */
.refactor .buttondisplay.icon_volgende:before,
.refactor button.icon_volgende:before,
fieldset.refactor.icon_volgende:before {
	content: "\e224";
}

/* icon_electricity */
.refactor .buttondisplay.icon_stroom:before,
.refactor button.icon_stroom:before,
fieldset.refactor.icon_stroom:before {
	content: "\e229";
}

/* icon_refresh */
.refactor .buttondisplay.icon_ververs:before,
.refactor button.icon_ververs:before,
fieldset.refactor.icon_ververs:before {
	content: "\e230";
}

/* icon_plus */
.refactor .buttondisplay.icon_plus:before,
.refactor span.icon_plus:before,
.refactor button.icon_plus:before,
fieldset.refactor.icon_plus:before {
	content: "\e231";
}

/* icon_minus */
.refactor .buttondisplay.icon_min:before,
.refactor button.icon_min:before,
fieldset.refactor.icon_min:before {
	content: "\e232";
}

/* icon_download */
.refactor .buttondisplay.icon_download:before,
.refactor button.icon_download:before,
.refactor span.icon_download:before,
fieldset.refactor.icon_download:before {
	content: "\E201";
}

/* icon_checkbox */
.refactor .buttondisplay.icon_checkbox:before,
.refactor .mce-icon_checkbox button:before,
.refactor button.icon_checkbox:before,
fieldset.refactor.icon_checkbox:before {
	content: "\e234";
}

/* icon_variable */
.refactor .mce-icon_variable button:before,
.refactor .buttondisplay.icon_variable:before,
.refactor button.icon_variable:before,
fieldset.refactor.icon_variable:before {
	content: "\e312";
}

/* icon_loopblock */
.refactor .mce-icon_loopblock button:before,
.refactor .buttondisplay.icon_loopblock:before,
.refactor button.icon_loopblock:before,
fieldset.refactor.icon_loopblock:before {
	content: "\e311";
}
/* icon_repeatblock */
.refactor .mce-icon_reusableblock button:before,
.refactor .buttondisplay.icon_reusableblock:before,
.refactor button.icon_reusableblock:before,
fieldset.refactor.icon_reusableblock:before {
	content: "\e314";
}

/* icon_riskprofile */
.refactor .buttondisplay.icon_risicoprofiel:before,
.refactor button.icon_risicoprofiel:before,
fieldset.refactor.icon_risicoprofiel:before,
.refactor .buttondisplay.iconrisicoprofiel:before,
.refactor button.iconrisicoprofiel:before,
fieldset.refactor.iconrisicoprofiel:before {
	content: "\e274";
}

/* hoverstate for checkbox*/
.refactor .buttondisplay.icon_checkbox:hover:before,
.refactor .mce-icon_checkbox button:hover:before,
.refactor button.icon_checkbox:hover:before,
fieldset.refactor.icon_checkbox:hover:before {
	content: "\e233";
}
.refactor .buttondisplay.icon_checkbox:hover,
.refactor button.icon_checkbox:hover,
.refactor .mce-icon_checkbox button:hover,
fieldset.refactor.icon_checkbox:hover > legend {
	background: #0071cf;
	color: white;
}
/* icon_checkbox_fill_checked */
.refactor .buttondisplay.icon_checkbox_fill_checked:before,
.refactor button.icon_checkbox_fill_checked:before,
fieldset.refactor.icon_checkbox_fill_checked:before {
	content: "\e233";
}

/* icon_lock */
.refactor .buttondisplay.icon_slot:before,
.refactor button.icon_slot:before,
fieldset.refactor.icon_slot:before {
	content: "\e109";
}

/* icon_info*/
.refactor .buttondisplay.icon_info:before,
.refactor button.icon_info:before,
fieldset.refactor.icon_info:before {
	content: "\e191";
}

/* icon_coffin*/
.refactor .buttondisplay.icon_kist:before,
.refactor button.icon_kist:before,
fieldset.refactor.icon_kist:before {
	content: "\e297";
}

/* icon_history*/
.refactor .buttondisplay.icon_geschiedenis:before,
.refactor button.icon_geschiedenis:before,
fieldset.refactor.icon_geschiedenis:before {
	content: "\e296";
}

/* icon_copy*/
.refactor .buttondisplay.icon_kopie:before,
.refactor button.icon_kopie:before,
fieldset.refactor.icon_kopie:before {
	content: "\e310";
}

/* icon brp and gbav are smaller icons, and need correction for Firefox*/
.firefox .refactor button.icon_brp,
.firefox .refactor button.icon_gba,
.firefox .refactor button.icon_gbav,
.firefox fieldset.refactor.icon_brp,
.firefox fieldset.refactor.icon_gba,
.firefox fieldset.refactor.icon_gbav {
	line-height: 14px;
}

.refactor button.icon_brp:before,
fieldset.refactor.icon_brp:before {
	content: "\e163";
	font-size: 45px;
}

.refactor button.icon_gbav:before,
fieldset.refactor.icon_gbav:before {
	content: "\e134";
	font-size: 45px;
}

.refactor button.icon_gba:before,
fieldset.refactor.icon_gba:before {
	content: "\e133";
	font-size: 45px;
}

/* filetypes icons */

.refactor button.icon_docx:before {
	content: "\e212";
	font-size: 40px;
}

.refactor button.icon_pdf:before {
	content: "\e213";
	font-size: 40px;
}

.refactor button.icon_xlxs:before {
	content: "\e214";
	font-size: 40px;
}

.refactor button.icon_csv:before {
	content: "\e215";
	font-size: 40px;
}

.refactor button.icon_zip:before {
	content: "\e217";
	font-size: 40px;
}

.refactor button.icon_txt:before {
	content: "\e218";
	font-size: 40px;
}

.refactor button.icon_tmp:before {
	content: "\e219";
	font-size: 40px;
}

.refactor button.icon_boolean {
	padding-right: 27px;
}
.refactor button.icon_boolean > span {
	vertical-align: baseline;
}
/* Icon Boolean */
.refactor button.icon_boolean:after {
	content: " ";
    border: 1px solid #CCC;
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: top;
    -moz-box-shadow: inset #fff 0px 0px 0px 1px;
    -webkit-box-shadow: inset #fff 0px 0px 0px 1px;
    box-shadow: inset #fff 0px 0px 0px 1px;
    background: white;
    line-height: 15px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: calc(50% - (15px / 2 ));
    right: 6px;
}

.refactor button.icon_boolean.icon_boolean_true:after {
	background-color: #0071cf;
}

/*===============================================

	Proces configuration icon-styling
	
===============================================*/

#product_title[class*="icon"] {
	position: relative;
}
#product_title[class*="icon"]:before {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    font-size: 30px;
    font-weight: normal;
    left: 0;
    top: 0;
    width: 45px;
    text-align: center;
    line-height: 50px;
}

#product_title.icondocument:before {
	content: "\e276";
}

#product_title.icon_verkiezing:before {
	content: "\e293";
}

#product_title.icon_begraafplaats:before {
	content: "\e292";
}

#product_title.iconnaw:before {
    content: "\e203";
}

/* 
	input: help-text styling
*/

.refactor .has-explain input{
	width: calc(100% - 30px);
	vertical-align: top;
}

.refactor .explain {
	width: 30px;
	height: 30px;
	max-height: 30px;
	padding: 0;
	margin: 0;
	display: inline-block;
	vertical-align: top;
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-top: 1px solid #CCC;
	text-align: center;
	background: white;
	cursor: help;
}

.refactor .explain:before {
	display: inline-block;
	content: "\E177";
	font-size: 24px;
	padding-top: 1px;
}

.refactor .explain-hidden {
	margin-top: -1px;
	border-right: 1px solid rgba(204, 204, 204, 0);
	border-bottom: 1px solid rgba(204, 204, 204, 0);
	border-left: 1px solid rgba(204, 204, 204, 0);
	overflow: hidden;
	background-color: transparent;
	max-height: 0;
	cursor: help;
	
	-webkit-transition:  max-height 1s ease, border-color 1s ease, background-color 1s ease;
	-moz-transition: max-height 1s ease, border-color 1s ease, background-color 1s ease;
	transition: max-height 1 ease, border-color 1s ease, background-color 1s ease;
}

.refactor .explain-hidden p {
	max-height: 0;
	white-space: normal;
	color: transparent;
	padding: 5px;
	font-size: 8pt;
	
	-webkit-transition:  max-height 1s ease, color 1s ease;
	-moz-transition: max-height 1s ease, color 1s ease;
	transition: max-height 1 ease, color 1s ease;
}

.refactor .explain:focus ~ .explain-hidden p,
.refactor .explain:hover ~ .explain-hidden p,
.refactor .explain-hidden:focus p,
.refactor .explain-hidden:hover p {
	max-height: 500px;
	overflow: hidden;
	color: inherit;
}

.refactor .explain:focus ~ .explain-hidden,
.refactor .explain:hover ~ .explain-hidden,
.refactor .explain-hidden:focus,
.refactor .explain-hidden:hover {
	background-color: #f5f5f5;
	border-right: 1px solid rgba(204, 204, 204, 1);
	border-bottom: 1px solid rgba(204, 204, 204, 1);
	border-left: 1px solid rgba(204, 204, 204, 1);
	max-height: 500px;
}

/* readonly */
.refactor .readonly .explain {
	border: 0;
	background: transparent;
	max-height: 20px;
}
.refactor .readonly .explain:before {
	padding-top: 0px;
    font-size: 18px;
}

.refactor .readonly .explain ~ .explain-hidden {
	border-top: 1px solid rgba(204, 204, 204, 0);
}
.refactor .readonly .explain:hover ~ .explain-hidden {
	border-top: 1px solid rgba(204, 204, 204, 1);
}

/* 
	input: generic search
*/

.refactor .searchinputwrapper {
	display: inline-block;
	width: 100%;
	max-width: 500px;
	/* font-size: 0; */
}

.refactor .searchinputwrapper input {
	line-height: 18px; /* required for firefox */
}

.refactor .searchinputwrapper > button {
	width: 60px; /* will contain BRP/ GBA / GBAV buttons has to have absolute buttons due to fontcharacter to wide*/
	min-height: 30px;
	position: relative;
	line-height: 0;
}

.refactor .searchinputwrapper > button:before {
	position: absolute;
	top: 15px;
	left: 0;
	right: 0;
}

/* 
	has 1 button
*/

.refactor .has-1-button .searchinputwrapper > button {
	border-left: 0;
}

.refactor .has-1-button .searchinputwrapper > button:disabled + .explain,
.refactor .has-1-button .searchinputwrapper > button:disabled ~ .explain-hidden { /* For Advanced searching, hide stuff*/
	opacity: 0.2;
}

.refactor .has-1-button .searchinputwrapper input {
	width: calc(100% - 60px);
}

/* explain */
.refactor .has-1-button.has-explain .searchinputwrapper input {
	width: calc(100% - 60px - 30px);
}

/* 
	has 2 button
*/
.refactor .has-2-button .searchinputwrapper > button {
	border-left: 0;
}

.refactor .has-2-button .searchinputwrapper input {
	width: calc(100% - 120px);
}

/* explain */
.refactor .has-2-button.has-explain .searchinputwrapper input {
	width: calc(100% - 120px - 30px);
}

/*==============================================

	In-proces searchresults (dropdown)
	
===============================================*/

/* searchresults dropdown */
.refactor .searchdiv .searchresultsdropdown {
	max-width: 500px;
	width: 100%;
	position: absolute;
	z-index: 2;
}
.refactor .searchdiv .searchresultsdropdown ul {
	border: 1px solid #CCC;
	border-top: 0;
	background: white;
}
.refactor .searchdiv .searchresultsdropdown li {
	position: relative;
	padding: 5px 5px 5px 20px;
	border-bottom: 1px solid #ebebeb;
	cursor: pointer;
}
.refactor .searchdiv .searchresultsdropdown li:nth-child(odd) {
	background: #f8f8f8;
}
.refactor .searchdiv .searchresultsdropdown li button {
	display: none;
}
.refactor .searchdiv .searchresultsdropdown li strong {
	font-size: 85%;
    border-radius: 2px;
    padding: 0 3px;
    margin-left: 5px;
}

.refactor .searchdiv .searchresultsdropdown li strong.deceased:before {
	content: "\e141";
    padding-right: 2px;
    display: inline-block;
    vertical-align: bottom;
}

/* Gender Indicator */
.refactor .searchdiv .searchresultsdropdown li:not(.moresearchresults):before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 10px;
}
.refactor .searchdiv .searchresultsdropdown .Man:before {
	background: #9094f5;
}
.refactor .searchdiv .searchresultsdropdown .Vrouw:before {
	background: #f79b9d;
}
/* More results */
.refactor .searchdiv .searchresultsdropdown li.moresearchresults{
	text-align: center;
	border-top: 1px solid #CCC;
	border-bottom: 0;
	padding: 5px;
}
.refactor .searchdiv .searchresultsdropdown li:nth-last-child(2) {
	border-bottom: 0;  
}
.refactor .searchdiv .searchresultsdropdown li.moresearchresults p:nth-child(1){
	font-weight: bold;
}
.refactor .searchdiv .searchresultsdropdown li.moresearchresults p:nth-child(1):after {
    content: "\e166";
    font-weight: normal;
    font-size: 12px;
    padding-left: 2px;
    line-height: 21px;
    vertical-align: top;
}
.refactor .searchdiv .searchresultsdropdown li.moresearchresults p:nth-child(2) {
	line-height: 8px;
	padding-bottom: 6px;
}
.refactor .searchdiv .searchresultsdropdown li.moresearchresults p:nth-child(2) span{
	font-size: 10px;
}
/* searchresults - hover and focus */
.refactor .searchdiv .searchresultsdropdown li:focus,
.refactor .searchdiv .searchresultsdropdown li:hover {
	background: #5a5a5a;
    color: white;
}
.refactor .searchdiv .searchresultsdropdown li:focus strong,
.refactor .searchdiv .searchresultsdropdown li:hover strong {
    background: white;
    color: #5a5a5a;
}

/* searchresults ~ warning messages */
.refactor .searchresultmessages {
	width: 100%;
	max-width: 500px;
	margin-left: 310px;
}

.refactor .searchresultmessages li {
	vertical-align: top;
	line-height: 28px;
	border: 1px solid #ebebeb;
	position: relative;
	padding: 0 0 0 35px;
	background: white;
}

.refactor .searchresultmessages li:before {
	content: "\e137";
	background: #edb101;
	width: 28px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	text-align: center;
	font-size: 22px;
	color: white;
	display: inline-block;
}

/* searchresults ~ tagwords */
.refactor #searchresultwrapper {
	max-width: 500px;
	display: block;
	padding: 10px 0;
}

/*==============================================

	Datepicker Date+Timepicker
	
===============================================*/

/*
	Datepicker
*/

.refactor .datefield-wrapper {
	display: block;
	max-width: calc(500px / 3);
}

.refactor .table-wrapper .datefield-wrapper {
	max-width: none;
}

.refactor .datefield-wrapper input,
.refactor .datefield-wrapper .date-picker-button {
	display: inline-block;
	vertical-align: top;
}

.refactor .datefield-wrapper input {
	width: calc(100% - 30px);
	min-width: 0px; /* required to overrule aquima.css*/
}

.refactor .datefield-wrapper .date-picker-button {
	background: #ebebeb;
	display: inline-block;
	 /* transition */
	 -webkit-transition: .2s;
	 -moz-transition: .2s;
	 transition: .2s;
	cursor: pointer;
}

.refactor .datefield-wrapper .date-picker-button:hover {
	background: #5a5a5a;
	color: white;
}

.refactor .datefield-wrapper .date-picker-button:focus {
	background: #0071cf;
	color: white;
}

.refactor .datefield-wrapper .date-picker-button:before {
	content: "\e194";
	font-size: 24px;
	display: inline-block;
	width: 30px;
	height: 30px;
	text-align: center;
	border-color: #ccc;
	border-style: solid;
	border-width: 1px 1px 1px 0px;
}
.refactor .partialdate .datefield-wrapper .date-picker-button:before {
	border-width: 1px;
}

/* Datefield-wrapper that has explain */

.refactor .has-explain .datefield-wrapper {
	display: inline-block;
	max-width: calc(500px / 3 - 1px);
}

.refactor .has-explain .datefield-wrapper + .explain:hover ~ .explain-hidden {
  max-width: calc(500px / 3 + 29px);
 }

/*
	Date+timePicker 
	TODO: Wrap the input.time in a wrapper element so we can add a timeselction button
*/

.refactor .separate-date-time .datefield-wrapper,
.refactor .separate-date-time input.time {
	display: inline-block;
	vertical-align: top;
}

.refactor .separate-date-time input.time {
	width: calc(500px / 10);
	margin-left: 11px;
	min-width: 0px; /* required to overrule aquima.css*/
}

.hide_date .datefield-wrapper { /* hide datepicker */
	display: none !important;
}


/*==============================================
	files
===============================================*/

/*
	documentselection / dropdownbutton
*/

.refactor .dropdownbutton.has-question > * {
	display: inline-block;
	vertical-align: top;
}

.refactor .dropdownbutton.has-question > .answer {
	margin-left: 10px;
}	

.refactor .dropdownbutton > .answer {
	margin-left: 310px; /* no label + space for required */
	max-width: 500px;
	position: relative;
	width: 100%;
}

.refactor .dropdownbutton > .answer > * {
	font-size: inherit;
}

.refactor .dropdownbutton .dropdownbuttons {
	margin-top: -1px;
}

.refactor .dropdownbutton .dropdownbuttons li.divAsDropdown {
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	background: none;
}

.refactor .dropdownbutton .dropdownbuttons button.divAsDropdown {
	margin: 0;
	min-height: 30px;
}

/* toggle display of dropdownbutton*/
.refactor .dropdownbutton .answer .dropdownbuttons ul {
	width: 100%;
	position: absolute;
	z-index: 10;
	display: none;
}
/* popup */
.ui-dialog .refactor .dropdownbutton .answer .dropdownbuttons ul {
	z-index: 5000;
}

.refactor .dropdownbutton.expanded .answer .dropdownbuttons ul {
	display: block;
}

.refactor .dropdownbutton .answer .dropdownsubmit {
	margin-right: 30px;
}

.refactor .dropdownbutton .answer .dropdownsubmit > button {
	width: 100%;
	min-height: 30px;
	margin: 0;
}

.refactor .question_above label {
	display: block;
	width: auto;
	padding-left: 10px;
}
.refactor .question_above label+div {
	width: auto;
}
.refactor .question_above label+div .jqte {
	margin: 0;
}

/* dropdownsection*/

.refactor .dropdownbutton .answer .dropdowntoggle {
	display: inline-block;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 30px;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	background: #ebebeb;
	cursor: pointer;
	min-height: 30px;
}

.refactor .dropdownbutton .answer .dropdowntoggle:after {
	display: inline-block;
	pointer-events: none;
	content: "";
	position: absolute;
	right: 7px;
	top: 9px;
	z-index: 1;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 14px solid rgba(0, 0, 0, 0.5);
	opacity: 1;
	/* transition */
	-webkit-transition:  .2s ease-in-out;
	-moz-transition:  .2s ease-in-out;
	transition:  .2s ease-in-out;
}

.refactor .dropdownbutton .answer .dropdownsubmit button:disabled + .dropdowntoggle {
	opacity: 0.2;
	cursor: auto;
}

.refactor .dropdownbutton .answer .dropdownbuttons ul:hover {
	max-height: 5000px;
}

.refactor .dropdownbutton .answer .dropdownbuttons ul:hover:after {
	opacity: 0;
}

.refactor .dropdownbutton .answer .dropdownbuttons ul li button {
	padding-right: 30px; /* required for dropdown arrow */
}

.refactor .dropdownbutton .answer .dropdownbuttons ul li:not(:last-child) button {
	border-bottom: 0px;
}


/*
	Documentscan
*/

.refactor .twainscanresult,
.refactor .documentscanresult {
    display: inline-block;
    width: calc(100% - 500px);
    min-width: auto;
    vertical-align: top;
	overflow: auto;
}
.refactor .twainscanresult {
	width: 100%;
}

.refactor .oribi_progressbar {
	margin: 10px 30px 5px 30px;
}
.refactor .oribi_progressbar span {
    height: 18px;
    position: relative;
    display: inline-block;
    background: #0071CF;
    color: white;
    width: 0%;
	padding-left: 10px;
}
.refactor .oribi_progressbar.error span {
    background: #db0101;
}
.refactor .oribi_status {
	margin: 10px 30px;
}
.refactor.fieldset.documentscan {
	height: 100px;
}
.refactor.fieldset.documentscan +
.refactor.fieldset +
.refactor.fieldset,
.refactor.fieldset.documentscan +
.refactor.fieldset {
	height: calc(100% - 100px);
}
.justificationrefactor +
.refactor.fieldset.documentscan +
.refactor.fieldset +
.refactor.fieldset,
.justificationrefactor +
.refactor.fieldset.documentscan +
.refactor.fieldset {
	height: calc(100% - 174px);
}

.refactor .oribi_image_wrapper {
	width: 500px;
	height: calc(100% - 30px);
	display: inline-block;
	position: relative;
}
.refactor .oribi_image_wrapper.twain_scan_image {
	width: 100%;
	display: block;
	margin-top: 20px;
	height: calc(100% - 90px);
	overflow: auto;
}

.refactor .oribi_image {
	margin-left: 30px;
	max-height: 100%;
}
.refactor .twain_scan_image .oribi_image {
	max-height: initial;
}
.refactor .oribi_rect {
	margin-left: 30px;
	border: 2px dotted #999;
	position: absolute;
	cursor: move;
}

.refactor .documentscanresult label {
    width: 100%;
	padding-left: 10px;
}
.refactor .documentscanresult .inlinecontainer-wrapper {
	margin-left: 0;
}
.refactor .documentscanresult .answer {
    margin: 5px 0 8px 0;
    width: 100%;
	padding-left: 10px;
}

.refactor .documentscanresult .inlinecontainer-wrapper .answer {
	width: auto;
}


/*
	filedownload
*/

.refactor .filedownloadswrapper {
	/*display: table;
	width: 100%;
	table-layout: fixed;*/
	padding: 5px 0;
	background: transparent;
	padding-left: 310px;
	/* transition */
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2 ease-in-out;
	transition: .2s ease-in-out;
}
.refactor label+.filedownloadswrapper {
	padding-left: 0;
}

.refactor .filedownloadswrapper ul li {
	position: relative;
	width: 100%;
	max-width: 500px;
}

.refactor .filedownloadswrapper ul li:not(:last-of-type) {
    margin-bottom: 10px;
}

.refactor .filedownloadswrapper:hover {
	background: #F6FBFF;
}

.refactor .file {
	display: inline-block;
	min-height: 75px;
	position: relative;
	padding: 10px 85px 10px 85px;
	border: 1px solid #ebebeb;
	background: white;
	cursor: pointer;
	width: 100%;
	text-decoration: none;
}
.refactor .file > span {
	display: block;
	text-decoration: none;
	font-size: .85em;
}
.refactor .file > span.filename {
	font-weight: bold;
	word-break: break-all;
	padding-bottom: 5px;
}

.refactor .file > span.filename,
.refactor .file > span.filesize {
	padding-right: 35px; /* required for removebutton*/
}

.refactor .file:before,
.refactor .file:after {
	position: absolute;
	text-align: center;
	left: 0;
	top: 0;
	content: "";
	width: 75px;
	height: 100%;
	font-size: 50px;
	line-height: 75px;
}
.refactor .file:after{
	content: "\E201";
	left: auto;
	right: 0;
	opacity: 0.1;
	color: #5a5a5a;
	border-left: 1px solid #525252;
	/* transition */
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2 ease-in-out;
	transition: .2s ease-in-out;
	transition-delay: .5s;
}

.refactor .file:focus {
	border-color: #0071cf;
}

.refactor .file:hover:after,
.refactor .file:focus:after {
	opacity: 1;
}

.refactor .file:focus:after,
.refactor .file:hover:after {
	background: #0071cf;
	color: white;
	border-left: 1px solid transparent;
}

/* readonly */
.refactor .file.readonly {
	cursor: default;
}
.refactor .file.readonly:after {
	display: none;
}

/* deletebutton */

.refactor .file + button { /* this is the deletebutton that always comes after the anchor*/
	position: absolute;
	top: 0;
	right: 76px;
	margin: 6px 6px 0px 0px;
	width: 30px;
	height: 30px;
	border: 0;
	opacity: 0.4;
	padding: 0;
	background: transparent;
}

.refactor .file + button > span {
	font-size: 0;
	display: none;
}

.refactor .file + button:before {
	content: "\e101";
	text-align: center;
	padding: 0;
}

.refactor .file:hover + button {
	opacity: 0.4;
}

.refactor .file + button:hover,
.refactor .file + button:focus {
	background: red;
	color: white;
	opacity: 1;
}

.refactor .file:before {
	background-position: center center;
	background-repeat: no-repeat;
}

/* Incorrect uploaded file styling */
.refactor .file.oordeel-Fouticon_document {
	border-color: #db0101;
}

.refactor .file.oordeel-Fouticon_document:before {
	content: "\e192";
	color: white;
	background: #db0101;
}

.refactor .file.oordeel-Fouticon_document:after {
	display: none;
}

/* Delete button */
.refactor .file.oordeel-Fouticon_document + button {
	right: 0;
	width: 75px;
	height: 100%;
	margin: 0;
}

.file.icon_document:before {
    font-size: 40px;
    text-align: center;
    color: white;
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-indent: 5px;
    margin-top: 10px;
    margin-left: 10px;
	background-image: none;
	content: "\e211";
}
.file.document_default:before {
	background: #693885;
}
.file.document_docx:before, 
.file.document_doc:before {
	content: "\e212";
	background: #2B5797;
}
.file.document_txt:before {
	content: "\e218";
	background: #DECA42;
}
.file.document_xlsx:before, 
.file.document_xls:before {
	content: "\e214";
	background: #1E7145;
}
.file.document_pdf:before {
	content: "\e213";
	background: #D70A0A;
}
.file.document_xml:before {
	content: "\e279";
	background: #58C2B4;
}
.file.document_pptx:before,
.file.document_ppt:before {
	content: "\e282";
	background: #D04525;
}
.file.document_gnome:before {
	content: "\e235";
	background: #693885;
}
.file.document_realmedia:before {
	content: "\e280";
	background: #E28228;
}
.file.document_audio:before {
	content: "\e281";
	background: #5486B5;
}
.file.document_application_pak:before,
.file.document_zip:before {
	content: "\e217";
	background: #693885;
}

/*
	fileupload
*/

.refactor .fileupload > div {
	width: 100%;
	max-width: 500px;
	position: relative;
	z-index: 0;
}


.refactor .fileupload .hiddenfileinput {
	display: none;
}

.refactor .fileupload .fileuploadoverlay {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 15;
	opacity: 0;
}

.ie9 .refactor .fileupload .fileuploadoverlay {
	display: none; /* required or else HTML5 strict error occurs (input cant trigger another input) */
}

.refactor label.fileupload {
	margin: 0;
	cursor: pointer;
	text-align: center;
	width: 100%;
	background: white;
	border: 1px solid #CCC;
	padding: 0;
	position: relative;
	z-index: 1;
	pointer-events: none;
	line-height: 14px;
  /* transition */
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2 ease-in-out;
  transition: .2s ease-in-out;
}

.refactor label.fileupload span {
	position: relative;
	display: inline-block;
	padding: 6px;
	line-height: 16px;
	pointer-events: none;
	padding-left: 30px;
}

.refactor div.fileupload.disabled:before,
.refactor label.fileupload span:before {
    display: inline-block;
    position: absolute;
    left: 5px;
    line-height: 20px;
    top: calc(50% - 10px);
    content: "\e210";
    font-size: 20px;
    font-weight: normal;
    pointer-events: none;
}

/* hoverstate + hoverstate for ie9*/

.refactor .fileupload label.fileupload:hover,
.refactor .fileupload .fileuploadoverlay:hover ~ label.fileupload,
.ie9 .refactor .fileupload label.fileupload:hover {
	background: #5a5a5a;
}

.refactor .fileupload label.fileupload:hover > span,
.refactor .fileupload .fileuploadoverlay:hover ~ label.fileupload > span,
.ie9 .refactor .fileupload label.fileupload:hover > span {
	color: white;
}

.refactor .fileupload label.fileupload:focus,
.refactor .fileupload .fileuploadoverlay:focus ~ label.fileupload,
.ie9 .refactor .fileupload label.fileupload:focus {
	background: #0071cf;
}
.refactor .fileupload label.fileupload:focus > span,
.refactor .fileupload .fileuploadoverlay:focus ~ label.fileupload > span,
.ie9 .refactor .fileupload label.fileupload:focus > span {
	color: white;
}

/*
	fileupload in table
*/

.refactor table .fileupload > label {
	display: none;
}

.refactor table .fileupload > div {
	margin: 0;
	max-width: 35px;
}

.refactor table .fileupload > div > label.fileupload {
	background-color: #ebebeb;
	line-height: 28px; /* Required for IE */
}

.refactor table .fileupload > div > label span {
	font-size: 0;
}

.refactor table .fileupload label.fileupload span:before {
	left: calc(50% - 11px);
}


/*==============================================
	Popups
===============================================*/

.ui-dialog.ui-widget-content {
	background: white;
	border-color: #535353;
}

.ui-dialog {
	z-index: 20;
}

/*
	Popup: Titlebar
*/

.ui-dialog > .ui-dialog-titlebar {
	background: #343434;
	position: relative;
	/* margin-bottom: 10px; */
	min-height: 36px;
	padding: 2px 10px;
}

.ui-dialog > .ui-dialog-titlebar header > *,
.ui-dialog > .ui-dialog-titlebar > * {
	color: white;
	font-weight: bold;
	font-size: 10pt;
	line-height: 30px;
}

.ui-dialog .ui-dialog-title {
	margin: 0;
	float: left;
}

/* close button positioning */
.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-close {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	width: 40px;
	height: auto;
	display: inline-block;
	text-align: center;
	border: 0;
	background-color: transparent;
	font-size: 0;
}

.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-close:before {
	content: "\e101";
	font-size: 25px;
	position: static;
	color: white;
	width: 100%;
	height: 100%;
	display: block;
	text-align: center;
	line-height: 36px;
	padding: 0;
	margin: 0;
	background: transparent;
	  /* transition */
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2 ease-in-out;
  transition: .2s ease-in-out;
}

.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-close:focus:before,
.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-close:hover:before {
	background: red;
}

.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-close > span {
	display: none;
}

/* popupdocument selection alignleft */
.ui-dialog .refactor .documentselection.alignleft > .answer {
	padding-left: 0px;
}

/*
	Disabled button transitions to avoid IE10 browser crash
*/
.ui-dialog .aq-page-content button,
.ui-dialog .aq-page-content button > span,
.ui-dialog .aq-page-content .refactor label.fileupload {
	transition: none !important;
}

/*
	Aantekeningen
*/

.refactor .aantekeningen {
	width: 100%;
	/*padding: 0 25px;*/
	text-align: left;
	vertical-align: top;
	/* font-size: 0; */
}

.refactor .aantekeningen > * {
	font-size: inherit;
}

.refactor .aantekening {
	display: inline-block;
	vertical-align: top;
	width: calc((100% / 3) - 13px);
	border: 1px solid #CCC;
	margin: 5px;
	position: relative;
	padding-left: 10px;
	overflow-x: auto;
}

/* aantekening: text-wrapper */
.refactor .aantekening > div {
	padding: 10px;
	text-align: left;
}

.refactor .aantekening > div h2 {
	display: table;
	width: 100%;
}

.refactor .aantekening > div h2 > * {
	display: table-cell;
}

.refactor .aantekening > div h2 > :first-child {
	width: 100%;
}

.refactor .aantekening > div h2 > :last-child {
	text-align: right;
}

/* aantekening - text */
.refactor .aantekening > div p > span {
	display: block;
}

.refactor .aantekening .aantekening-title {
	font-weight: bold;
	font-size: 120%;
}

.refactor .aantekening .aantekening-date {
	font-size: 80%;
	border-bottom: 1px dashed #ebebeb;
	padding-bottom: 5px;
}

.refactor .aantekening .aantekening-date .aantekening-lock-user,
.refactor .aantekening .aantekening-date .aantekening-lock-date,
.refactor .aantekening .aantekening-date .aantekening-lock-user-date {
	font-size: 8pt;
	display: block;
	font-weight: bold;
}

.refactor .aantekening .aantekening-tag {
	border-bottom: 1px dashed #ebebeb;
	padding: 5px 0;
}

.refactor .aantekening .aantekening-tag > span {
	padding-right: 5px;
	position: relative;
	padding-left: 15px;
	display: block;
}

.refactor .aantekening .aantekening-tag > span:before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	position: absolute;
	top: calc(50% - 5px);
	left: 0;
	background: #414141;
}

.refactor .aantekening .aantekening-message {
	padding-top: 5px;
	word-break: break-word;
}

/* aantekening: button overlay */
.refactor .aantekening > button {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	border-color: transparent;
}

.refactor .aantekening > button:focus:active {
    background: transparent;
    border-color: #0071cf;
}

.refactor .aantekening > button > span {
	font-size: 0;
}

/* aantekening: prio indicator */
.refactor .aantekening:before {
	position: absolute;
	width:10px;
	height: 100%;
	background: #ebebeb;
	content: "";
	display: block;
	top:0;
	left:0;
}

/* aantekening: prio laag */
.refactor .aantekening.prioriteit-Laag {
	border-color: #CCC;
}
.refactor .aantekening.prioriteit-Laag:before {
	background-color: #ebebeb;
}
/* aantekening: prio normaal */
.refactor .aantekening.prioriteit-Normaal:before {
	background-color: #dbce01;
}
.refactor .aantekening.prioriteit-Normaal {
	border-color: #dbce01;
}
/* aantekening: prio hoog */
.refactor .aantekening.prioriteit-Hoog {
	border-color: #db0101;
}
.refactor .aantekening.prioriteit-Hoog:before {
	background-color: #db0101;
}
/* aantekening: beeindigd */
.refactor .aantekening.beeindigd {
	opacity: 0.5;
}
.refactor .aantekening.beeindigd:hover {
	opacity: 1;
}


/*
 * Google maps
 */
.contactmaps {
	margin: 0 10px 10px 10px;
	padding: 0;
	width: 100%;
}

.contactmaps .maps {
	width: 100%;
	height: 360px;
}

/*==============================================
	Open Layers Overrules
===============================================*/

.ol-zoom.ol-control {
	background: transparent;
	border-radius: 0;
}

.ol-zoom.ol-control:hover {
	background: transparent;
}

.ol-zoom .ol-zoom-in, 
.ol-zoom .ol-zoom-out {
	font-size: 0;
    padding: 0;
    height: 39px;
    width: 39px;
    text-align: center;
    line-height: 39px;
    background: rgba(245, 245, 245, 0.5);
}

.ol-zoom-in:before {
	content: "\E231";
    font-size: 35px;
}

.ol-zoom-out:before {
    content: "\E232";
    font-size: 35px;
}


.districtTitle {
    padding: 0 50px;
    height: 39px;
    text-align: center;
    line-height: 39px;
    background: #fff;
	display: inline-block;
	border: 1px solid #CCC;
	color: #626060;
	margin: 1px;
	font-weight: 700;
}
.ui-dialog .districtTitle {
	margin-left: 100px;
}
.ui-dialog .districtTitle.alignleft {
	margin-left: 0;
}

.districtTitle:hover {
    background: #5a5a5a;
    color: white;
}

/* Copyright */
.ol-attribution {
	opacity: 0.1;
}
.ol-attribution:hover {
	opacity: 1;
}

/*==============================================
	jquery TE Rules
===============================================*/
.jqte ul,
.jqte ol {
	margin-left: 17px;
}
.jqte ol {
	list-style-type: decimal;
}
.jqte ul {
	list-style-type: disc;
}
.jqte_titleText {
	background: #EEE;
	border: 1px solid #bbb;
}

/*==============================================

	Popup: Annuleren
	
===============================================*/

.private .ui-dialog.annuleren .refactor p {
    padding: 70px 10px 10px 10px;
    line-height: 20px;
    text-align: center;
}

/*==============================================

	Proces Specific Rules: Eerste Inschrijving
	
===============================================*/
.refactor .eersteinschrijving fieldset:before { /* Icons */
	display: inline-block;
    font-size: 20px;
	line-height: 20px;
    position: absolute;
    left: 10px;
    top: 8px;
    color: #6e6e6e;
}

@-moz-document url-prefix() { /* Firefox Hack for displaying icons in firefox in the right location at proces eerste inschrijving, this is the only fix due to the elements are not visible in the DOM (=Firefox Bug!) */
	.refactor .eersteinschrijving fieldset:before {
        bottom: calc(100% + 6px) !important;
		top: auto !important;
    }
}

.refactor .eersteinschrijving fieldset.icon_gebrokenhart:before {
    font-size: 17px;
    text-indent: -1px;
}

/* Only apply on top level */
.refactor .eersteinschrijving > .listitem legend > .listitem-title {
    width: 100%;
    max-width: 175px;
}
.refactor .eersteinschrijving > .listitem legend > .listitem-subtitle > span {
    text-transform: none;
    font-weight: 500;
}

#wrapper article .eersteinschrijving fieldset.refactor.listitem > legend {
    padding: 8px 10px 8px 20px !important;
}

.refactor .eersteinschrijving > .listitem legend > .listitem-title > span {
    padding-left: 10px;
}

/*  Category 5 should have a devider */
#wrapper article .eersteinschrijving > fieldset.refactor.listitem:nth-child(5) {
    padding-bottom: 30px;
    position: relative;
}
#wrapper article .eersteinschrijving > fieldset.refactor.listitem:nth-child(5):after {
    content: "";
    display: block;
    height: 1px;
    background-color: #ebebeb;
    position: absolute;
    bottom: 10px;
    left: 40px;
    right: 40px;
}

/*==============================================

	Proces Specific Rules: Onderhouden Begraafplaatsen
	
===============================================*/

@-moz-document url-prefix() { /* Firefox Hack for displaying icons in firefox in the right location at proces eerste inschrijving, this is the only fix due to the elements are not visible in the DOM (=Firefox Bug!) */
	.OnderhoudenBegraafplaatsen fieldset:before {
        bottom: 100% !important;
		top: auto !important;
    }
}

#wrapper article .OnderhoudenBegraafplaatsen > fieldset.refactor > div > fieldset.listitem.active {
	margin-bottom: 0;
	padding-bottom: 0;
}

#wrapper article .OnderhoudenBegraafplaatsen > fieldset.refactor > div > fieldset.listitem.active > div > fieldset > div fieldset {
	margin-bottom: 0;
}

/*==============================================

	Proces Specific Rules: iVerkiezingen
	
===============================================*/

/*
	Volledig Scherm View
*/

/*
	Map
*/

#wrapper article .ui-dialog .OnderhoudenStemdistricten fieldset.districtMap {
	height: 50%;
	overflow: hidden;
	position: relative;
}

#wrapper article .ui-dialog .OnderhoudenStemdistricten fieldset.districtMap legend span {
	display: none;
}

#wrapper article  div#column-1 .ui-dialog .OnderhoudenStemdistricten fieldset.districtMap > .headerbuttons_absolute {
	position: absolute;
	z-index: 2;
	left: 100px;
	margin: 0;
	padding: 0;
	margin-top: 9px;
}

#wrapper article .ui-dialog .OnderhoudenStemdistricten fieldset.districtMap > .map {
	position: relative;
	z-index: 1;
}

#wrapper article .ui-dialog .OnderhoudenStemdistricten fieldset.districtMap > .headerbuttons_absolute > button {
    margin: 0;
    font-weight: bold;
    line-height: 27px;
    height: 39px;
    font-weight: bold;
    vertical-align: middle;
}

/*
	Map Info
*/


#wrapper article .ui-dialog .OnderhoudenStemdistricten fieldset.mapInfo {
	height: 40%;
	overflow: auto;
}

#wrapper article .ui-dialog .OnderhoudenStemdistricten fieldset.mapInfo legend span {
	display: none;
}

/*
	Map Todo Info
*/

#wrapper article .ui-dialog .OnderhoudenStemdistricten fieldset.notAssignedZipcodes {
	height: 10%;
	overflow: auto;
	padding: 0 20px;
}

#wrapper article .ui-dialog .OnderhoudenStemdistricten fieldset.notAssignedZipcodes > legend span {
	display: inline-block;
	padding-top: 20px;
}



/*==============================================
	Responsive Rules
===============================================*/

@media (max-width:1350px) { 
	
	/* Max-width removers for elements */
	.refactor select, 
	.refactor input,
	.refactor .fileupload > div,
	.refactor .filedownloadswrapper ul li,
	.refactor .inputsection,
	.refactor textarea,
	.refactor .textarea-wrapper + .explain,
	.refactor .explain-hidden,
	.refactor .error-message, 
	.refactor .error-message ul	{
		max-width: initial;
	}

	.refactor div.task-content section {
		padding: 5px;
	}
	
	.refactor label,
	.refactor .rechts,
	.refactor .links	{
		display: block;
		padding: 0;
		margin: 0;
	}
	
	.refactor label {
		padding-left: 10px;
		padding-bottom: 5px;
	}
	
	.refactor .readonly label+div {
		padding-left: 10px;
	}
	
	.refactor .filedownloadswrapper {
		padding-left: 10px;
	}
	
	.refactor .quicksearch,
	.refactor .inlinebutton {
		padding-left: 0px;
	}
	
	/* Fileupload */
	.refactor label+div,
	.refactor .fileupload > div	{
		width: calc(100% - 20px); /* correct margin */
	}
	
	/* Dropdownbutton & Buttonwrapper*/
	.refactor .buttonwrapper,
	.refactor .dropdownbutton > .answer	{
		margin-left: 0;
		max-width: initial;
	}
	
	/* Headerbuttons absolute	*/
	fieldset.refactor > .headerbuttons_absolute {
		padding-left: 0;
	}
	
	/* BRP Meldingen */
	fieldset.refactor > .brpmeldingen li {
		margin-left: 0;
	}
	
	/* First level fieldset */
	article .aq-page-content > fieldset.refactor > fieldset.refactor {
		padding-left: 10px;
	}
	
	/* Datatables Filter */
	.refactor .dataTables_filter {
		float: left;
		margin-left: 10px;
	}
}

/*==============================================
	
	
	[ACCORDEON.CSS]
	
	DESCRIPTION: Contains styling for the expendable / minimisable accordeon
	within iBz.
	
	
===============================================*/

/*
	Accordeon Wrapper 
*/

.accordeonwrapper {
	border: 1px solid #ebebeb;
	margin-bottom: 10px;
	margin-top: 5px;
}
.accordeonwrapper .accordeonwrapper {
	margin: 0 20px;
}

#wrapper article #column-1 > .accordeonwrapper section > fieldset {
	padding-bottom: 0;
}

.accordeonwrapper > section > fieldset:last-of-type {
	padding-bottom: 0;
}

/*
	Accordeon NoGroup (contains listitems, and have no relevance)
*/

#wrapper article div#column-1  .accordeonwrapper.accordeon-nogroup {
	border: none;
	margin-bottom: 0;
}

#wrapper article div#column-1  .accordeonwrapper.accordeon-nogroup fieldset.refactor.listitem legend {
	border: 1px solid rgba(0,0,0,0.10);
}

#wrapper article div#column-1  .accordeonwrapper.accordeon-nogroup fieldset.refactor.listitem legend:hover {
	border-color: #0071cf;
}
#wrapper article div#column-1  .accordeonwrapper.accordeon-nogroup fieldset.refactor.listitem legend:hover:before {
	background-color: #0071cf;
}

#wrapper article #column-1 > .accordeonwrapper.accordeon-nogroup section > fieldset {
	padding-bottom: 10px;
}


/*
	Title of legend per section
*/

/*
	Listitem
*/
fieldset.refactor.listitem {
	position: relative;
}

.ui-dialog fieldset.refactor.listitem,
#wrapper article fieldset.refactor.listitem {
	margin-bottom: 0;
	border-width: 0px;
	margin-top: 10px;
	/* Room for focus */
	padding-right: 10px;
	padding-left: 20px;
}

.ui-dialog fieldset.refactor.listitem.active,
#wrapper article fieldset.refactor.listitem.active,
.ui-dialog fieldset.refactor.listitem.active:last-of-type
/* #wrapper article fieldset.refactor.listitem.active:last-of-type  */
{
	margin-bottom: 20px;
}

.ui-dialog fieldset.refactor.listitem > div,
#wrapper article fieldset.refactor.listitem > div {
	display: none;
}

.ui-dialog fieldset.refactor.listitem.active > div,
#wrapper article fieldset.refactor.listitem.active > div {
	display: block;
}

/* Last listitem */
.ui-dialog fieldset.refactor.listitem:last-of-type, 
#wrapper article fieldset.refactor.listitem:last-of-type {
	margin-bottom: 10px;
}

/* Only listitem */
#wrapper article fieldset.refactor.listitem.single-listitem {
	margin-bottom: 10px;
}

/* Legend / line-through styling*/

.refactor .listitem > legend {
	width: 100%;
	position: relative;
	cursor: pointer;
	z-index: 1;
}

/* border for listitems*/
#wrapper article div#column-1 fieldset.refactor.listitem legend,
fieldset.refactor.listitem legend /* popups */ {
	padding: 10px;
	/*border: 1px solid #bcbcbc;*/
}
#wrapper article div#column-1 fieldset.refactor.listitem.active legend,
#wrapper article div#column-1 fieldset.refactor.listitem.active legend:hover {
	border-color: transparent;
}

.refactor .listitem > legend > span {
	z-index: 2;
	position: relative;
	/* required for spans to not overlay child spans */
	line-height: 18px;
	min-height: 18px; 
}

.refactor .listitem > legend > span, 
.refactor .listitem > legend > span > span {
	overflow-y: hidden;
    overflow-x: hidden;
}

.refactor .listitem > legend > span > span {
	background: white;
}

.refactor .listitem > legend > span > span:empty {
	background: transparent;
}

.refactor .listitem > legend > span:after {
	
}

.refactor .listitem > legend:before {
	content: "";
	left: 20px;
	width: calc(100% - 50px);
	height: 1px;
	position: absolute;
	top: calc(50% - 0px);
	background: #ebebeb;
	pointer-events: none;
}

/*
	Expand/collapse icons
*/

/* Icons on the right side */
.refactor .listitem > legend:after {
	display: inline-block;
	position: absolute;
	font-size: 20px;
	line-height: 20px;
	right: 3px;
	top: calc(50% - 10px);
	font-weight: bold;
	opacity: 0.5;
	z-index: 2;
	pointer-events: none;
}

.refactor .listitem > legend:after {
	content: "\e231";
}

.refactor .listitem.active > legend:after {
	content: "\e232";
}

/* 
	Titles 
*/

.refactor .listitem .listitem-title,
.refactor .listitem .listitem-subtitle {
	display: inline-block;
	pointer-events: none;
}

.refactor .listitem .listitem-title > span {
	padding-right: 8px;
}

/* Start listitem with an icon*/
fieldset.listitem.refactor[class*="icon_"] .listitem-title { 
	padding-left: 10px;
}
fieldset.listitem.refactor[class*="icon_"]:before {
    font-size: 15px;
}
/* End listitem with an icon*/

.refactor .listitem .listitem-subtitle,
.refactor .listitem .listitem-subtitle > span {
	color: #6e6e6e;
}

.refactor .listitem .listitem-subtitle > span {
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 5px;
}

.refactor .listitem .listitem-subtitle:before {
	content: "";
	width: 5px;
	vertical-align: middle;
	height: 1px;
	margin-top: -3px;
	background-color: #CCC;
	display: inline-block;
	padding-right: 5px;
	display: none;
}

/*
	Title Sexelement
*/
.refactor .listitem .listitem-subtitle.Vrouw,
.refactor .listitem .listitem-subtitle.Man {
	width: 18px;
	border-radius: 100%;
	transform: translateY(1px);
	-ms-transform: translateY(1px);
	-webkit-transform: translateY(1px);
}

.refactor .listitem .listitem-subtitle.Vrouw {
	background: #f79b9d;
}

.refactor .listitem .listitem-subtitle.Man {
	background: #9094f5;
}

.refactor .listitem .listitem-subtitle.Vrouw:after,
.refactor .listitem .listitem-subtitle.Man:after {
	background: transparent;
	color: white;
	font-size: 12px;
	display: inline-block;
	vertical-align: top;
}

.refactor .listitem .listitem-subtitle.Vrouw:after {
	padding-left: 2px;
}

/*
	- Title Statuselement
	- Dataheader Statuselement
*/
.refactor .listitem ul.data span[class*="status-"],
.refactor .listitem > legend span[class*="status-"] {
	color: white;
	background-color: #535353;
	border-radius: 3px;
	margin-left: 5px;
    padding-left: 16px;
	position: relative;
	max-height: 17px;
}
.refactor .listitem > legend span[class*="status-"] > span,
.refactor .listitem ul.data span[class*="status-"] > span {
	color: white;
	background-color: inherit;
	margin: 0 2px;
	font-size: 10px;
    display: inline-block;
    vertical-align: top;
    line-height: 17px;
}

/* Indicator Status*/

.refactor .listitem > legend span[class*="status-"] :before,
.refactor .listitem ul.data span[class*="status-"] :before {
	position: absolute;
    top: 0;
	bottom:0;
    left: -1px;
    text-align: center;
    width: 20px;
    border-radius: 3px 0 0 3px;
    font-size: 15px;
    font-weight: normal;
}

.refactor .listitem > legend:hover span[class*="status-"] {
	color: white;
}

/* Specific Status */

.status-investigation > span:before {
	content: "\e135";
	background: #dbce01;
}

.status-deceased > span:before {
    content: "\e141";
	background: #db0101;
}

/* 
	Focus Styling
*/

.refactor .listitem > legend:focus {
	/* outline: 0; */
}

.refactor .listitem > legend:focus:before {
	background: #0071cf;
}

.refactor .listitem > legend:focus span,
.refactor .listitem > legend:focus:after {
	color: #0071cf;
	opacity: 1;
}

/* 
	Hover Styling
*/

.refactor .listitem > legend:hover {
	/* outline: 0; */
}

.refactor .listitem > legend:hover:before {
	/*background: #0071cf;*/
}

.refactor .listitem > legend:hover span,
.refactor .listitem > legend:hover:after {
	color: #0071cf;
	opacity: 1;
}

/*
	Error Styling
*/
.refactor .listitem.has-error:before,
.refactor .listitem.has-error > legend,
.refactor .listitem.has-error > legend .listitem-title span,
.refactor .listitem.has-error > legend .listitem-subtitle span,
.refactor .listitem.has-error > legend:hover > span {
    color: #db0101;
}
/*==============================================
	
	
	[TABLE.REFACTOR.CSS]
	
	DESCRIPTION: Contains several <table> styling (workstation,rijbewijzen,printers etc)
	
	
===============================================*/


.refactor .table-wrapper {
	display: block;
	padding: 10px 20px;
	/*border: 1px solid #ebebeb;*/
	/* overflow-x: auto; Removed due to dropdowns inside TD that can extend the table
	overflow-y: none; */
	position: relative;
}

.refactor .table-wrapper .table {
	position: relative;
}

.refactor .table-wrapper:empty {
	display: none;
}

.refactor .table-wrapper.overflow {
	overflow-x: auto;
	overflow-y: none; 
}

.refactor table {
	width: 100%;
	display: table;
	border-collapse: separate;
}

.refactor table thead th:first-of-type {
	border-right: 1px solid transparent;
}

.refactor .table-wrapper table span {
	vertical-align: middle;
}

/* Eurosign */
.refactor .table-wrapper table span > span {
	vertical-align: baseline;
	padding-right: 2px;
}
.refactor .table-wrapper table .prefix {
	position: static;
	opacity: 1;
	padding-right: 5px;
}

/*
	stamtabel
*/

.refactor .table-wrapper table.stamtabel td {
	padding: 1px 10px;
}

.refactor .table-wrapper table.stamtabel td.dataTables_empty {
	padding: 10px;
}

/*	table sorting sorting_asc */
.refactor .table-wrapper table thead th:after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 8px solid white;
	opacity: 0;
	position: absolute;
	right: 3px;
	top: 0;
	margin-top: 10px;
	pointer-events: none;
}
.refactor .table-wrapper table thead th:empty {
	text-align: center;
}
.refactor .table-wrapper table thead th:empty:after {
	margin: 0;
}

.refactor .table-wrapper table thead th.sorting_asc:after {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 8px solid white;
	border-top: 0;
	opacity: 1;
}

.refactor .table-wrapper table thead th.sorting_desc:after {
	opacity: 1;
}

.refactor .table-wrapper table thead th.sorting_asc,
.refactor .table-wrapper table thead th.sorting_desc,
.refactor .table-wrapper table thead th.sorting_asc > span,
.refactor .table-wrapper table thead th.sorting_desc > span ,
.refactor .table-wrapper table thead th.sorting_asc > a > span,
.refactor .table-wrapper table thead th.sorting_desc > a > span {
	background: #0071cf;
	color: white;
}
.refactor .datatable.table-wrapper table thead th.sorting > span,
.refactor .table-wrapper table thead th.sorting > span,
.refactor .table-wrapper table thead th.sorting > a {
	text-decoration: none;
	width: 100%;
    display: block;
	top: 0;
    height: 100%;
}

.refactor .table-wrapper table.dataTable tr.odd td.sorting_1,
.refactor .table-wrapper table.dataTable tr.even td.sorting_1 {
	background: rgba(0, 113, 207, 0.1);
}

/* table rows */

.refactor .table-wrapper table thead tr th {
	background: white;
}

.refactor .table-wrapper table thead tr.sorting,
.refactor .table-wrapper table thead tr.sorting_desc,
.refactor .table-wrapper table thead tr.sorting_asc {
	white-space: nowrap;
}

.refactor .table-wrapper table td,
.refactor .table-wrapper table th {
	padding: 5px;
	max-width: 500px;
	display: table-cell;
	position: relative;
}
.refactor .table-wrapper table th {
	padding: 0;
}

.refactor .multiple_table_wrapper tbody th > span,
.refactor .table-wrapper table thead th > span,
.refactor .table-wrapper table thead th > a {
	padding: 5px;
    display: inline-block;
    line-height: normal;
}
.refactor .datatable.table-wrapper table thead th > span:empty {
	padding: 0;
}
.refactor .datatable.table-wrapper table thead th > span,
.refactor .table-wrapper table thead th.sorting > a {
	padding-right: 12px;
}

.refactor .table-wrapper table th.sorting_disabled {
	cursor: default;
	padding: 5px;
}

.refactor .table-wrapper table td {
	/* transition */
	-webkit-transition: .2s;
	-moz-transition: .2s;
	transition: .2s;
}

.refactor .table-wrapper table td.hiddenCell,
.refactor .table-wrapper table td:empty {
	padding: 0;
}

/* table borders: check if they have content*/
.refactor .table-wrapper table tbody td.hiddenCell,
.refactor .table-wrapper table tbody td:empty {
	border-left: 0px solid transparent;
	width: 0px;
}
.refactor .table-wrapper table tbody td,
.refactor .table-wrapper table tbody td:first-of-type {
	border-left: 1px solid #ebebeb;
	border-top: 0;
	border-bottom: 1px solid #ebebeb;
}
.refactor .table-wrapper table tbody tr:first-of-type td {
	border-top: 1px solid #ebebeb;
}

.refactor .table-wrapper table tbody td:last-of-type {
	border-right: 1px solid #ebebeb;
}

/* remove border for footers, since this is usually a 'totaalbedrag'*/
.refactor .table-wrapper table tfoot td {
	border: 0;
	font-weight: bold;
	padding: 15px 5px;
}

/* row-hover + column selected */
.refactor .table-wrapper .sorted_1 td:nth-child(1),
.refactor .table-wrapper .sorted_2 td:nth-child(2),
.refactor .table-wrapper .sorted_3 td:nth-child(3),
.refactor .table-wrapper .sorted_4 td:nth-child(4),
.refactor .table-wrapper .sorted_5 td:nth-child(5),
.refactor .table-wrapper .sorted_6 td:nth-child(6),
.refactor .table-wrapper .sorted_7 td:nth-child(7),
.refactor .table-wrapper .sorted_8 td:nth-child(8),
.refactor .table-wrapper .sorted_9 td:nth-child(9),
.refactor .table-wrapper .sorted_10 td:nth-child(10),

.refactor .table-wrapper table tbody tr:hover td,
.refactor .table-wrapper table tbody tr:hover th{ 
	background: rgba(0, 113, 207, 0.1);
	border-color: white;
}

/* locked row-hover */
.refactor .table-wrapper table tbody tr.locked:hover td,
.refactor .table-wrapper table tbody tr.locked:hover th{
    background: rgba(219, 1, 1, 0.1);
}

.refactor .table-wrapper table tbody tr.odd {
	background-color: rgba(248, 248, 248, 0.5);
}

.refactor .table-wrapper .table table tbody tr:hover td.prioriteit-medium {
	background-color: #dbce01;
}

.refactor .table-wrapper .table table tbody tr:hover td.prioriteit-high {
	background-color: #db0101;
}

.refactor .table-wrapper .table table tbody tr:hover td.prioriteit-checked  /* prio none: true (green) */ {
	background-color: #08a701;
}

.refactor .table-wrapper .table table tbody tr:hover td.prioriteit-unchecked  /* prio none: false (red) */ {
	/*background-color: #db0101;*/
}

/*
	table paginate 
*/

/*  number of items shown*/
.refactor .dataTables_length label {
	padding: 0;
	width: 100px;
	position: relative;
	font-size: 0; /* Required to hide inline text */
}

.refactor .dataTables_length label select,
.refactor .dataTables_length label option {
	font-size: 13px; /* Should be same as <html> font-size */
	max-height: 30px;
}

.refactor .dataTables_paginate {
	display: table;
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

.refactor .dataTables_info {
	margin-top: 10px;
}

.refactor .dataTables_paginate > *,
.refactor .dataTables_paginate > span > a {
	display: table-cell;
}

.refactor .dataTables_paginate > span {
	display: table;
	width: 100%;
	border-spacing: 2px 0px;
}

.refactor .dataTables_paginate > span > span {
	opacity: 0.4;
	cursor: default;
}

.refactor a.paginate_button.current {
	cursor: default;
	font-weight: bold;
	border-color: transparent;
}

.refactor .paginate_button.previous,
.refactor .paginate_button.next {
	width: 25%;
	padding: 10px;
	border: 1px solid #CCC;
	position: relative;
}

.refactor .paginate_button.NextPage:before,
.refactor .paginate_button.PreviousPage:before,
.refactor .paginate_button.previous:before,
.refactor .paginate_button.next:before {
	content: "\e166";
	position: absolute;
	display: inline-block;
	margin-right: 10px;
	top: 5px;
	font-size: 25px;
	color: #414141;
}

.refactor .paginate_button.previous:hover:before,
.refactor .paginate_button.next:hover:before {
	color: white;
}

.refactor .paginate_button.PreviousPage:before,
.refactor .paginate_button.previous:before {
	left: 10px;
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.refactor .paginate_button.NextPage:before,
.refactor .paginate_button.next:before {
	right: 10px;
}

/* disabled button*/
.refactor .paginate_button.disabled {
	border-color: transparent;
	font-weight: bold;
	cursor: default;
	pointer-events: none;
}

.refactor .paginate_button.disabled.previous,
.refactor .paginate_button.disabled.next,
.refactor .paginate_button.disabled.PreviousPage,
.refactor .paginate_button.disabled.NextPage {
	visibility: hidden;
}

.refactor .dataTables_paginate > span > a {
	padding: 10px;
	border: 1px solid #CCC;
}

.refactor .dataTables_paginate a {
	position: relative;
}

.refactor .dataTables_paginate a:hover {
	cursor: pointer;
	background: #5a5a5a;
	color: white;
}
.refactor .dataTables_paginate a:hover:before {
	color: white;
}

.refactor .dataTables_paginate a:focus {
	cursor: pointer;
	background: #0071cf;
	color: white;
}
.refactor .dataTables_paginate a:focus:before {
	color: white;
}

.refactor .dataTables_paginate a.current:focus,
.refactor .dataTables_paginate a.current:hover {
	cursor: default;
	background: inherit;
	color: inherit;
}
.refactor .dataTables_paginate a.PreviousPage,
.refactor .dataTables_paginate a.NextPage {
	border: 1px solid #CCC;
	color: transparent;
}

/* 
	Datatable 
*/

.refactor .datatable.table-wrapper table td > span {
	display: block;
}

.refactor .datatable.table-wrapper table th:first-of-type span {
	display: block;
}

.refactor .datatable.table-wrapper table tbody tr:nth-child(odd) {
	background-color: #f5f5f5;
}

.refactor .datatable.table-wrapper table thead tr:hover th.sorting_asc,
.refactor .datatable.table-wrapper table thead tr:hover th.sorting_desc {
	background-color: #0071cf;
}

.refactor .datatable.table-wrapper table thead tr:hover th {
	background: transparent;
}

/* datatables processing message */

.refactor .dataTables_processing {
	padding: 5px 10px 20px 10px;
	z-index: 1;
}

/*
	Table content (default)
*/

/* boolean */
.refactor .table-wrapper table td.boolean:after {
	content: "";
}

/* button */
.refactor .table-wrapper table td button {
	width: 100%;
}

/* iconbutton */
.refactor .table-wrapper table td.has-iconbutton {
	width: 50px; /* if the has-iconbutton is being used, make sure that ALL prev and next table-rows have buttons with iconbutton too! */
}

.refactor .table-wrapper table td.has-button {
	text-align: center;
}

.refactor .table-wrapper table td  a.iconbutton.buttondisplay,
.refactor .table-wrapper table td  button.iconbutton {
	max-width: 35px;
}



/*
	document-mimetype-cell, document-filename-cell, document-createdate-cell, document-createdby-cell
*/

.refactor .table-wrapper table .document-mimetype-cell,
.refactor .table-wrapper table .document-createdate-cell,
.refactor .table-wrapper table .document-createdby-cell  {
    width: 150px;
}

.refactor .table-wrapper table .document-mimetype-cell div,
.refactor .table-wrapper table .document-mimetype-cell span,
.refactor .table-wrapper table .document-createdate-cell div,
.refactor .table-wrapper table .document-createdate-cell span,
.refactor .table-wrapper table .document-createdby-cell div,
.refactor .table-wrapper table .document-createdby-cell span {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*	No break text */
.refactor table span.no-break {
  white-space: nowrap;
  padding-right: 10px;
}

/* prio / status */
.refactor .table-wrapper table td.status span,
.refactor .inlineicon.iconfield span {
	display: none;
}

.refactor .table-wrapper.datacontent_afhandelenbevestigingverhuizing table th:first-of-type {
	font-size: 10pt;
}

.refactor .worklist .table-wrapper table:not(.multicolumn) th:not(.subheader):first-of-type, /* Prioriteiten are always displayed in the first TH */
.refactor .table-wrapper table td.prioriteit-low,
.refactor .table-wrapper table td.prioriteit-medium,
.refactor .table-wrapper table td.prioriteit-high,
.refactor .table-wrapper table td.prioriteit-checked,
.refactor .table-wrapper table td.prioriteit-unchecked {
	font-size: 0;
	padding: 0;
	width: 15px;
}

.refactor .table-wrapper table td.prioriteit-low {
	border-right: 1px solid rgba(255,255,255,0); /* prio low*/
}

.refactor .table-wrapper table .prioriteit-low,
.refactor .table-wrapper table tr:hover .prioriteit-low {
	/*background-color: rgba(255,255,255,0);	 prio low */
}

.refactor .table-wrapper table .prioriteit-medium,
.refactor .table-wrapper table tr:hover .prioriteit-medium /* prio medium */ {
	background-color: #dbce01;
}

.refactor .table-wrapper table .prioriteit-high,
.refactor .table-wrapper table tr:hover .prioriteit-high  /* prio high */ {
	background-color: #db0101;
}

.refactor .table-wrapper table .prioriteit-checked,
.refactor .table-wrapper table tr:hover .prioriteit-checked  /* prio none: true (green) */ {
	background-color: #08a701;
}

.refactor .table-wrapper table .prioriteit-unchecked,
.refactor .table-wrapper table tr:hover .prioriteit-unchecked  /* prio none: false (red) */ {
	/*background-color: #db0101;*/
}

.refactor .inlineicon {
	white-space: nowrap;
}

.refactor .inlineicon:before {
	content: "";
	padding-right: 5px;
	font-size: 25px;
	line-height: 0px;
	vertical-align: middle;
}

.refactor .table-wrapper table caption {
	border: 0;
	font-size: 11pt;
    font-weight: bold;
    padding: 0 10px 0 0;
    text-transform: uppercase;
	position: relative;
	text-align: left;
}

.refactor .table-wrapper table caption:before,
.refactor .table-wrapper table caption:before {
	content: "";
    display: block;
    width: calc(100% - 20px);
    position: absolute;
    top: calc(50% - 0px);
    height: 1px;
    background: #ebebeb;
    z-index: 0;
}
.refactor .table-wrapper.multiple_table_wrapper table {
	padding-left: 20px;
}

.refactor .table-wrapper table caption span {
	position: relative;
    z-index: 2; /* 0: horizontal line 1: table-wrapper-overlay*/
    background: white;
    padding-right: 5px;
    display: inline-block;
}

.refactor .table-wrapper table thead tr th.status {
	font-size: 0;
}

.refactor .table-wrapper table thead tr th.subheader,
.refactor .table-wrapper table tbody tr th.subheader {
	border: 0;
	padding: 20px 0 10px 0;
}
.refactor .table-wrapper table thead tr th.subheader div,
.refactor .table-wrapper table tbody tr th.subheader div {
	border: 0;
    font-weight: bold;
    padding: 0 10px 0 0;
    text-transform: uppercase;
	position: relative;
}
.refactor .table-wrapper table thead tr th.subheader div span,
.refactor .table-wrapper table tbody tr th.subheader div span {
	position: relative;
    z-index: 1;
    background: white;
    padding-right: 5px;
    display: inline-block;
}
.refactor .table-wrapper table tbody th {
	border-bottom: 1px solid #ebebeb;
}
.refactor .table-wrapper table tbody tr:hover th,
.refactor .table-wrapper table tbody tr:hover th.subheader {
	background: none;
	border-bottom: 0;
}
.refactor .table-wrapper table tbody tr:hover th {
	border-bottom: 1px solid #ebebeb;
}

/* Color Sexes */

.refactor .table-wrapper table tbody tr:hover .genderMan {
    background: #9094f5;
}
.refactor .table-wrapper table tbody tr:hover .genderVrouw {
	background: #f79b9d;
}

/* Icons Sexes
.refactor .inlineicon.genderMan:after,
.refactor .inlineicon.genderVrouw:after {
    font-weight: bold;
    font-size: 20px;
    margin-right: 10px;
    display: inline-block;
    border-radius: 100%;
    background: white;
    height: 25px;
    line-height: 25px;
    width: 25px;
    text-align: center;
}

.refactor .inlineicon.genderMan:after {
    content: "\e242";
    transform: rotate(45deg);
}

.refactor .inlineicon.genderVrouw:after {
    content: "\e243";
}
*/

/* icons reisdocumenten */

.refactor .inlineicon.soort-onbekend:before, /* Onbekend */
.refactor .inlineicon.soort-reisdocument-voor-vreemdelingen:before /* Reisdocument voor vreemdelingen */ 
{
	content: "\E202";
}

.refactor .inlineicon.soort-identiteitskaart:before, /* Identiteitskaart */
.refactor .inlineicon.soort-europese-identiteitskaart:before, /* Europese identiteitskaart */
.refactor .inlineicon.soort-identiteitskaart-toeristenkaart-a:before, /* Identiteitskaart (toeristenkaart) A */
.refactor .inlineicon.soort-identiteitskaart-toeristenkaart-b:before, /* Identiteitskaart (toeristenkaart) B */
.refactor .inlineicon.soort-identiteitskaart-toeristenkaart-c:before, /* Identiteitskaart (toeristenkaart) C */
.refactor .inlineicon.soort-nederlandse-identiteitskaart:before, /* Nederlandse identiteitskaart */
.refactor .inlineicon.soort-gemeentelijke-identiteitskaart:before /* Gemeentelijke Identiteitskaart */ 
{
	content: "\E203";
}

.refactor .inlineicon.soort-nooddocument-reisdocument-vreemdelingen:before, /* Nooddocument (model reisdocument vreemdelingen) */ 
.refactor .inlineicon.soort-noodpaspoort-model-nationaal-paspoort:before, /* Noodpaspoort (model nationaal paspoort) */ 
.refactor .inlineicon.soort-noodpaspoort:before, /* Noodpaspoort */
.refactor .inlineicon.soort-noodpaspoort-model-reisdocument-vluchtelingen:before /* Nooddocument (model reisdocument vluchtelingen) */ 
{
	content: "\E216";
}

.refactor .inlineicon.soort-laissez-passer:before, /* Laissez-passer */
.refactor .inlineicon.soort-faciliteitenpaspoort:before, /* Faciliteitenpaspoort */
.refactor .inlineicon.soort-nationaal-paspoort:before, /* Nationaal paspoort */
.refactor .inlineicon.soort-reisdocument-voor-vluchtelingen:before, /* Reisdocument voor vluchtelingen */ 
.refactor .inlineicon.soort-tweede-paspoort:before, /* Tweede paspoort */ 

.refactor .inlineicon.soort-reisdocument-ouder1:before, /* Reisdocument ouder1 */
.refactor .inlineicon.soort-reisdocument-ouder2:before, /* Reisdocument ouder2 */
.refactor .inlineicon.soort-reisdocument-voogd:before, /* Reisdocument voogd */
.refactor .inlineicon.soort-reisdocument-moeder:before, /* Reisdocument moeder */
.refactor .inlineicon.soort-reisdocument-vader:before /* Reisdocument vader */
{
	content: "\E204";
}

.refactor .inlineicon.soort-kaart-met-paspoortboekje-64-pag:before, /* Kaart met paspoortboekje, 64 pag */
.refactor .inlineicon.soort-kaart-met-paspoortboekje-32-pag:before, /* Kaart met paspoortboekje, 32 pag */
.refactor .inlineicon.soort-kaart-zonder-paspoortboekje:before /* Kaart zonder paspoortboekje */ 
{
	content: "\E207";
}

.refactor .inlineicon.soort-diplomatiek-paspoort:before, /* Diplomatiek paspoort */
.refactor .inlineicon.soort-dienstpaspoort:before, /* Dienstpaspoort */
.refactor .inlineicon.soort-tweede-paspoort-zakenpaspoort:before, /* Tweede paspoort (zakenpaspoort) */
.refactor .inlineicon.soort-nationaal-paspoort-zakenpaspoort:before /* Nationaal paspoort (zakenpaspoort) */ 
{
	content: "\E205";
}

/* Indications Begraafplaatsen*/

.refactor .table-wrapper table.dataTable tr.odd td.vrij,
.refactor .table-wrapper table.dataTable tr.even td.vrij {
	background: #08a701;
}
.refactor .table-wrapper table.dataTable tr.odd td.overledene_in_het_graf,
.refactor .table-wrapper table.dataTable tr.even td.overledene_in_het_graf {
	background: #dbce01;
}
.refactor .table-wrapper table.dataTable tr.odd td.vol,
.refactor .table-wrapper table.dataTable tr.even td.vol {
	background: #db0101;
}
.refactor .table-wrapper table.dataTable tr.odd td.afstand,
.refactor .table-wrapper table.dataTable tr.even td.afstand {
	background: #0071cf;
}

/* icons files */

/* Indications */

.refactor tr td:first-of-type.inlineicon {
	padding-right: 0; /* remove padding because you are in the prio */
}

.refactor .icon-naam-overig_icon:before { /* Generic File - will show an X because it will not be saved */
	content: "\e101";
}

.refactor .inlineicon.icon-naam-pdf_icon:before { /* PDF */
	content: "\E213";
}

.refactor .inlineicon.icon-naam-word_icon:before { /* Word */
	content: "\E212";
}

.refactor .inlineicon.icon-naam-excel_icon:before { /* Excel */
	content: "\E214";
}

.refactor .inlineicon.icon-naam-image_icon:before {  /* Image */
	content: "\E235";
}

.refactor .inlineicon.icon-naam-mail_icon:before {  /* E mail */
	content: "\E226";
}

.refactor .inlineicon.icon-naam-note_icon:before { /* TXT */
	content: "\E218";
}

.refactor .inlineicon.icon-naam-zip_icon:before { /* ZIP */
	content: "\E217";
}

.refactor .inlineicon.icon-naam-file_icon:before { /* any other file */
	content: "\E220";
}

/*
	Voter table styling
*/

.refactor .datacontent_voters .table table thead th:first-of-type {
	width: 15px;
}

.refactor .datacontent_voters .table table thead th:first-of-type > span {
	font-size: 0;
}

.refactor .datacontent_voters table td .status-,
.refactor .datacontent_voters table td .status-false,
.refactor .datacontent_voters table td .status-true {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	min-height: 40px; /* required for IE9 / IE10 */
}

.refactor .datacontent_voters table td .status-true {
	background: #db0101;
}

/*
	Procesconfiguration Styling
*/

.refactor .datacontent_processconfiguration .table table thead th:first-of-type {
	width: 15px;
}

.refactor .datacontent_processconfiguration .table table thead th:first-of-type > span {
	font-size: 0;
}

/*
	Dossierlist Styling
*/
.refactor .datacontent_dossierlist table td .status- > span,
.refactor .datacontent_dossierlist table td .status-false > span,
.refactor .datacontent_dossierlist table td .status-true > span {
	display: none;
}

/* Prio datacontent_dossierlist indicator */
.refactor .geforceerdafhandelen .datatable.table-wrapper.datacontent_dossierlist table tr th:nth-child(1),
.refactor .geforceerdafhandelen .datatable.table-wrapper.datacontent_dossierlist table tr td:nth-child(1) {
	width: 15px;
	padding: 0;
	position: relative;
	font-size: 0;
}
.refactor .geforceerdafhandelen .datatable.table-wrapper.datacontent_dossierlist table th:first-of-type span {
	font-size: 0;
}

/* In/Out-going datacontent_dossierlist indicator */
.refactor .datatable.table-wrapper.datacontent_dossierlist table tr td:nth-child(2) {
	position: relative;
	text-align: center;
}

.refactor .datacontent_dossierlist table td .status-,
.refactor .datacontent_dossierlist table td .status-false,
.refactor .datacontent_dossierlist table td .status-true {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	min-height: 40px; /* required for IE9 / IE10 */
}

.refactor .datacontent_dossierlist table td .status-true {
	background: #db0101;
}

/*
	Workstation Styling
	Printer Styling
	Locations styling
*/

.refactor .datacontent_locaties td:first-of-type,
.refactor .printersWorkstation td:first-of-type {
	width: 100%;
}
.refactor .zaakbetrokkene td:first-of-type {
	width: 160px;
}
.refactor .wachtendetaken td button:not(.iconbutton),
.refactor .dossierlistFollowUp {
	white-space: nowrap;
	min-width: 140px;
}
.refactor .dossierlistFollowUp {
	min-width: 217px;
}

/*Fix for Firefox**/
.refactor .procesconfig table td button.iconbutton,
.refactor .wachtendetaken table td button.iconbutton,
.refactor .worklist table td button.iconbutton,
.refactor .datacontent_ajax table td button.iconbutton  {
	width: 35px;
}

.refactor .printersWorkstation table td.has-button {
	min-width: 45px; /* required for Firefox */
}

.refactor .table-wrapper.printersWorkstation {
	overflow: visible;	/* required to get dropdowns enabled*/	
}

.refactor .datacontent_workstation.table-wrapper table tbody td:empty {
  border-left: 1px solid #ebebeb;
}

/*
	Raas Station Styling
*/

.refactor .datacontent_onderhoudenraasberichten table td .status-OPEN > span,
.refactor .datacontent_onderhoudenraasberichten table td .status-FINISHED > span,
.refactor .datacontent_onderhoudenraasberichten table td .status-WARNING > span,
.refactor .datacontent_onderhoudenraasberichten table td .status-ERROR > span,
.refactor .datacontent_onderhoudenraasberichten table td .type-INCOMING > span,
.refactor .datacontent_onderhoudenraasberichten table td .type-OUTGOING > span {
	display: none;
}

/* Prio onderhoudenraasberichten indicator */
.refactor .datatable.table-wrapper.datacontent_onderhoudenraasberichten table tr th:nth-child(1),
.refactor .datatable.table-wrapper.datacontent_onderhoudenraasberichten table tr td:nth-child(1) {
	width: 15px;
	padding: 0;
	position: relative;
}

/* In/Out-going onderhoudenraasberichten indicator */
.refactor .datatable.table-wrapper.datacontent_onderhoudenraasberichten table tr td:nth-child(2) {
	position: relative;
	text-align: center;
}

/* Deceased indication */
.refactor .table-wrapper .deceased:before {
	content: "\E141";
	font-size: 22pt;
}

.refactor .datacontent_onderhoudenraasberichten table td .status-OPEN,
.refactor .datacontent_onderhoudenraasberichten table td .status-FINISHED,
.refactor .datacontent_onderhoudenraasberichten table td .status-WARNING,
.refactor .datacontent_onderhoudenraasberichten table td .status-ERROR {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	min-height: 40px; /* required for IE9 / IE10 */
}

.refactor .datacontent_onderhoudenraasberichten table td .status-OPEN {
	
}
.refactor .datacontent_onderhoudenraasberichten table td .status-FINISHED {
	background: #08a701;
}
.refactor .datacontent_onderhoudenraasberichten table td .status-ERROR {
	background: #db0101;
}
.refactor .datacontent_onderhoudenraasberichten table td .status-WARNING {
	background: #dbce01;
}

/* Type */
.refactor .datacontent_onderhoudenraasberichten table td .type-INCOMING:before,
.refactor .datacontent_onderhoudenraasberichten table td .type-OUTGOING:before {
	font-size: 26px;
}
.refactor .datacontent_onderhoudenraasberichten table td .type-INCOMING:before {
	content: "\e228";
}
.refactor .datacontent_onderhoudenraasberichten table td .type-OUTGOING:before {
	  content: "\e224";
}

/*
	Rijbewijzen Table Styling
*/

.refactor .rijbewijzen .inlineicon:before {
	font-size: 75px;
	margin-left: -5px;
	pointer-events: none;
}

.refactor .rijbewijzen .categorie-am:before {
	content: "\e253";
}

.refactor .rijbewijzen .categorie-a1:before {
	content: "\e252";
}

.refactor .rijbewijzen .categorie-a2:before {
	content: "\e252";
}

.refactor .rijbewijzen .categorie-a:before {
	content: "\e250";
}

.refactor .rijbewijzen .categorie-b1:before {
	content: "\e256";
}

.refactor .rijbewijzen .categorie-b:before {
	content: "\e258";
}

.refactor .rijbewijzen .categorie-c1:before {
	content: "\e249";
}

.refactor .rijbewijzen .categorie-c:before {
	content: "\e251";
}

.refactor .rijbewijzen .categorie-d1:before {
	content: "\e245";
}

.refactor .rijbewijzen .categorie-d:before {
	content: "\e254";
}

.refactor .rijbewijzen .categorie-be:before {
	content: "\e257";
}

.refactor .rijbewijzen .categorie-c1e:before {
	content: "\e248";
}

.refactor .rijbewijzen .categorie-ce:before {
	content: "\e247";
}

.refactor .rijbewijzen .categorie-d1e:before {
	content: "\e244";
}

.refactor .rijbewijzen .categorie-de:before {
	content: "\e255";
}

.refactor .rijbewijzen .categorie-t:before {
	content: "\e246";
}

/* Hack for displaying table's within fieldsets and enabling overflow */
@-moz-document url-prefix() { 
    fieldset.has-table {
        display: table-cell !important;
    }
}

/*==============================================
	
	
	[JUSTIFICATION.CSS]
	
	DESCRIPTION: Contains styling for the justification messages within iBz + BRP messages + validation.
	
	
===============================================*/

.justificationrefactor + .brpmeldingenrefactor {
	border-top: 1px solid #ebebeb;
}

/*===============================

	Justification Messages Wrapper
	
===============================*/

.justification {
	display: block;
	height: auto;
	width: auto;
}

.justification.sticky {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background: white;
	z-index: 10;
}

.justification h3 {
	display: none;
}

/* Wrapper for justification in refactorproces*/
.justificationrefactor {
	margin: 5px 10px 10px 10px
}

.justificationrefactor:empty {
	display: none;
}

/* Fix for justifications in popups, should be removed after refactor */
.ui-dialog .justification {
	clear: both;
}

/* 
	Justification Messages
*/

.justification ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.justification ul li {
	padding: 5px 5px 5px 35px;
	border:1px solid #CCC;
	margin-bottom: 2px;
	position: relative;
	font-size: 0.95em;
	overflow: hidden;
	line-height: 20px;
}

.justification ul li:before {
	position: absolute;
	content: "";
	display: inline-block;
	width: 30px;
	line-height: 30px;
	left: 0;
	top: 0;
	height: 100%;
	text-align: center;
	background: #ebebeb;
	font-size: 21px;
	color: white;
}

/* Error */
.justification ul li.error{
	border-color: #db0101;
	border-width: 2px;
	font-weight: bold;
}
.justification ul li.error:before {
	background: #db0101;
	content: "\e192";
}

/* Warning */
.justification ul li.warning {
	border-color: #dbce01;
}
.justification ul li.warning:before {
	background: #dbce01;
	content: "\e137";
	font-size: 24px;
}

/* Info */
.justification ul li.infoMessage {
	border-color: #0071cf;
}
.justification ul li.infoMessage:before {
	background: #0071cf;
	content: "\e191";
}

/* Succes */
.justification ul li.succes,
.justification ul li.accepted {
	border-color: #08a701;
}
.justification ul li.succes:before,
.justification ul li.accepted:before {
	background: #08a701;
	content: "\e158";
}

/* Notition */
.justification ul li.notition {
	border-color: #ebebeb;
}
.justification ul li.notition:before {
	background: #6e6e6e;
	content: "\e221";
}



/* 
	Justification Messages with Button
*/

.justification .has-button > span {
	padding: 0 0 4px 0;
	display: block;
}

.justification .has-button button {
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
	text-align: left;
}


/*===============================

	Validation brp_meldingen wrapper
	
===============================*/

/* Wrapper for justification in refactorproces*/
.brpmeldingenrefactor {
	margin: 5px 10px 10px 10px;
	position: relative; /* Required for title positioning */
	padding-top: 14px;
}

.brpmeldingenrefactor:empty {
	display: none;
}

/* Validation brp_meldingen title */

.brpmeldingenrefactor .brp_meldingen h3 {
	display: block;
	position: absolute;
	left: 0;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10pt;
	top: -10px;
	background: white;
	padding-right: 5px;
}

.brpmeldingenrefactor .brp_meldingen h3  span {
	color: #414141;
}

.brp_meldingen {
	display: block;
	height: auto;
	width: auto;
	display: block;
}

.brp_meldingen h3 {
	display: none;
}

/*
	Validation brp_meldingen message
*/

.brp_meldingen ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.brp_meldingen ul li {
	padding: 5px 5px 5px 35px;
	border:1px solid #CCC;
	margin-bottom: 2px;
	position: relative;
	font-size: 0.95em;
	overflow: hidden;
	line-height: 20px;
}

.brp_meldingen ul li:before {
	position: absolute;
	content: "";
	display: inline-block;
	width: 30px;
	line-height: 30px;
	left: 0;
	top: 0;
	height: 100%;
	text-align: center;
	background: #ebebeb;
	font-size: 21px;
	color: white;
}

/* Error */
.brp_meldingen ul li.Fout{
	border-color: #db0101;
	border-width: 2px;
	font-weight: bold;
}
.brp_meldingen ul li.Fout:before {
	background: #db0101;
	content: "\e192";
}

/* Warning */
.brp_meldingen ul li.Waarschuwing {
	border-color: #dbce01;
}
.brp_meldingen ul li.Waarschuwing:before {
	background: #dbce01;
	content: "\e137";
	font-size: 24px;
}

/* Info */
.brp_meldingen ul li.I,
.brp_meldingen ul li.Onbekend {
	border-color: #0071cf;
}
.brp_meldingen ul li.I:before,
.brp_meldingen ul li.Onbekend:before {
	background: #0071cf;
	content: "\e191";
}

/* Succes */
.brp_meldingen ul li.Goed {
	border-color: #08a701;
}
.brp_meldingen ul li.Goed:before {
	background: #08a701;
	content: "\e158";
}

/* Inline BRP indicator*/

.brp_meldingen ul li .brp-indicator:before {
	content: "BRP";
	font-size: 8pt;
	font-family: inherit;
	font-weight: bold;
	color: white;
	background: #626060;
	display: inline-block;
	margin-right: 5px;
	padding: 0px 2px;
	border: 1px solid #626060;
	border-radius: 2px;
	margin-top: -1px;
	margin-bottom: -1px;
}

.brp_meldingen ul li .brp-meldingomschrijving,
.brp_meldingen ul li .brp-actie {
	font-weight: normal;
	opacity: 0.8;
	display: block;
	margin-left: 30px;
	border: 1px solid #efefef;
	padding: 3px;
	margin-top: 3px;
	z-index: 2;
}

/* Inline */
.brp_meldingen ul li .brp-actie {
	position: relative;
	/* transition */
	-webkit-transition: .2s;
	-moz-transition: .2s;
	transition: .2s;
}

.brp_meldingen ul li .brp-actie > span {
	position: relative;
	pointer-events: none;
	z-index: 2;
}

.brp_meldingen ul li .brp-actie > button {
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
	text-align: left;
	font-size: 100%;
}

/* button: hoverstate */

.brp_meldingen ul li .brp-actie:hover {
	background: #5a5a5a;
	color: white;
}

.brp_meldingen ul li .brp-actie:hover button:before,
.brp_meldingen ul li .brp-actie:hover button > span {
	color: white;
}

.brp_meldingen ul li .brp-actie > button:before {
  content: "\e195";
  margin-left: 5px;
  margin-right: 5px;
  font-size: 22px;
  line-height: 18px;
  display: inline-block;
  vertical-align: top;
}

/* Indicators */
.brp_meldingen ul li .brp-meldingomschrijving.type-F,
.brp_meldingen ul li .brp-meldingomschrijving.type-W,
.brp_meldingen ul li .brp-meldingomschrijving.type-I,
.brp_meldingen ul li .brp-meldingomschrijving.type-O {
	padding-left: 25px;
	position: relative;
}

.brp_meldingen .type-F:before,
.brp_meldingen .type-W:before,
.brp_meldingen .type-I:before,
.brp_meldingen .type-O:before {
	content: "";
	display: inline-block;
	padding: 4px;
	background: #ebebeb;
	border: 1px solid #CCC;
	left: 7px;
	top: 7px;
	position: absolute;
}

.brp_meldingen .type-F:before {
	background: #db0101;
	border-color: #db0101;
}

.brp_meldingen .type-W:before {
	background: #dbce01;
	border-color: #dbce01;
}

.brp_meldingen .type-I:before {
	background: #0071cf;
	border-color: #0071cf;
}

/*
	Validation Messages : Messages returned from BRP
	
	NOTE: UNDERLYING CSS SHOULD STILL BE REFACTORED
	
*/


.validation {
	padding: 5px 0;
}

.validation-message:before {
	position: absolute;
	content: "";
	display: inline-block;
	width: 30px;
	line-height: 30px;
	left: 0;
	top: 0;
	height: 100%;
	text-align: center;
	background: #ebebeb;
	font-size: 21px;
	color: white;
}

.validation-message {
	padding: 5px 5px 5px 35px;
	border: 1px solid #CCC;
	margin-bottom: 2px;
	position: relative;
	overflow: hidden;
	min-height: 30px;
}

/* Error */
.validation-message-F {
	border-color: #db0101;
	border-width: 2px;
	font-weight: bold;
}

.validation-message-F:before {
	background: #db0101;
	content: "\e192";
}

/* Succes / Info */
.validation-message-I {
	border-color: #0071cf;
}

.validation-message-I:before {
	background: #0071cf;
	content: "\e191";
}
/*==============================================
	
	
	[FORM_NAVIGATION.CSS]
	
	DESCRIPTION: Contains styling for the navigation of processes (bottom-nav)
	
	
===============================================*/

#wrapper article fieldset.form_navigation {
	height: auto;
}

/* Simulate a display table through div's */
.form_navigation > div {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  /* font-size: 0; */
  text-align: center;
}

.form_navigation > div > div {
  display: table-cell;
  margin: 0;
  padding: 0;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

/* style the buttons */
.refactor .form_navigation button, /* specific for popups */
.form_navigation button {
  padding: 0 12px;
  width: 100%;
  margin: 0;
	line-height: 19px;
	/* font-size: 14px; */
	display: inline-block;
	height: 100%;
	vertical-align: top;
  text-align: center;
  font-weight: normal;
  border: 1px solid #bcbcbc;
  background: white;
  color: #626060;
  position: relative;
  opacity: 0.8;
  /* border-radius */
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.form_navigation button > span {
	position: relative;
    display: inline-block;
	vertical-align: top;
    width: 100%;
    height: 100%;
	line-height: 20px;
	color: #626060;
	/* Space for arrows  */
	padding: 14px;
}

/* popup check icon */
.refactor .form_navigation button.validate span:before {
    content: "\e102";
    margin-right: 5px;
    font-size: 20px;
    display: inline-block;
    vertical-align: top;
}

.refactor .form_navigation button.validate:hover span:before {
	color: white;
}

/* General icon styling section */
.form_navigation button.icon_pijl_links span:before,
.form_navigation button.icon_pijl_rechts span:before {
  font-size: 22px;
  position: absolute;
  display: inline-block;
  content: "\E166";
  opacity: 0.2;
  top: calc(50% - 11px);
  /* transition */
  -webkit-transition: 2s;
  -moz-transition: 2s;
  transition: 2s;
}

.form_navigation div > div button.icon_pijl_links span:before {
  left: 0;
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.form_navigation div > div button.icon_pijl_rechts span:before {
  right: 0;
}

.form_navigation button:hover > span {
	color: #626060;
}

.form_navigation button:hover > span:before {
  opacity: 1;
  color: #626060;
}

/* Default button hover state */
.form_navigation button:hover {
  background: #f5f5f5;
  opacity: 1;
}

/* Whatever happens overrule dem styles! */
.form_navigation button:disabled {
  opacity: 0.2 !important;
  background: white !important;
  cursor: default !important;
  -webkit-animation: none !important;
  animation: none !important;
}

.form_navigation button span:disabled {
  color: #626060 !important;
}

/* Special statusses styles */
.form_navigation button.buttongreen:hover > span,
.form_navigation button.buttongreen:hover > span:before,
.form_navigation button.buttonblue:hover > span,
.form_navigation button.buttonblue:hover > span:before {
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

/* Focus action */
.refactor .form_navigation button:focus {
	background: #0071cf;
}
.refactor .form_navigation button:focus:hover *,
.refactor .form_navigation button:focus:hover :before,
.refactor .form_navigation button:focus:hover :after {
	color: white;
}

/* Check action */
.form_navigation button.buttonblue:hover {
  background: #0071cf;
  color: white;
}

/* Confirm action */
.form_navigation button.buttongreen {
  background: #08a701;
  opacity: 0.6;
}

.form_navigation button.buttongreen span {
  color: white;
}

.form_navigation button.buttongreen:hover {
  opacity: 1;
}

/* Generic Animation when hovering over button */
.form_navigation div > div button.icon_pijl_links:hover:before {
  -webkit-animation: previous_fill 1s 1;
  -webkit-animation-delay: .5s;
  animation: previous_fill 1s 1;
  animation-delay: .5s;
}

.form_navigation div > div button.icon_pijl_rechts:hover:before {
  -webkit-animation: next_fill 1s 1;
  -webkit-animation-delay: .5s;
  animation: next_fill 1s 1;
  animation-delay: .5s;
}

.form_navigation button:before {
  content: "";
  position: absolute;
  display: block;
  background: transparent;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  opacity: 0;
  background: rgba(255, 255, 255, 0.4);
  -webkit-filter: blur(1px);
}

@-webkit-keyframes next_fill {
  10% {
    opacity: .8;
  }

  100% {
    left: 90%;
    opacity: 0;
  }
}

@keyframes next_fill {
  10% {
    opacity: .8;
  }

  100% {
    left: 90%;
    opacity: 0;
  }
}

@-webkit-keyframes previous_fill {
  10% {
    opacity: .8;
  }

  100% {
    right: 90%;
    opacity: 0;
  }
}

@keyframes previous_fill {
  10% {
    opacity: .8;
  }

  100% {
    right: 90%;
    opacity: 0;
  }
}

/*==============================================
	
	
	[JQUERY.LONG-PRESS.CSS]
	
	DESCRIPTION:  Contains styling for displaying special characters (diacrieten)
	within iBz. Can be viewed when long-pressing a key within an inputfield in iBz
	
	
===============================================*/


.long-press-popup .content {
  width: 600px;
  margin: 0 auto;
}

#ta {
  width: 100%;
  height: 200px;
  font-size: 30px;
  padding: 12px;
}

.long-press-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  padding-top: 20px;
  margin: 0;
  font-size: 60px;
  z-index: 9999;
}

.long-press-popup li {
  display: inline-block;
  list-style: none;
  padding: 10px 34px;
  margin-right: 20px;
  margin-bottom: 20px;
  background: #000000;
  cursor: pointer;
  color: white;
  border: solid 4px black;
  border-radius: 0px;
}

.long-press-popup .selected {
  border-color: white;
  -webkit-box-shadow: 0 0 18px rgba(255, 255, 255, 0.75);
  -moz-box-shadow: 0 0 18px rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.75);
}

.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle; }
  .select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none; }
    .select2-container .select2-selection--single .select2-selection__rendered {
      display: block;
      padding-left: 8px;
      padding-right: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .select2-container .select2-selection--single .select2-selection__clear {
      position: relative; }
  .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px; }
  .select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 32px;
    user-select: none;
    -webkit-user-select: none; }
    .select2-container .select2-selection--multiple .select2-selection__rendered {
      display: inline-block;
      overflow: hidden;
      padding-left: 8px;
      text-overflow: ellipsis;
      white-space: nowrap; }
  .select2-container .select2-search--inline {
    float: left; }
    .select2-container .select2-search--inline .select2-search__field {
      box-sizing: border-box;
      border: none;
      font-size: 100%;
      margin-top: 5px;
      padding: 0; }
      .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
        -webkit-appearance: none; }

.select2-dropdown {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 1051; }

.select2-results {
  display: block; }

.select2-results__options {
  list-style: none;
  margin: 0;
  padding: 0; }

.select2-results__option {
  padding: 6px;
  user-select: none;
  -webkit-user-select: none; }
  .select2-results__option[aria-selected] {
    cursor: pointer; }

.select2-container--open .select2-dropdown {
  left: 0; }

.select2-container--open .select2-dropdown--above {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.select2-container--open .select2-dropdown--below {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.select2-search--dropdown {
  display: block;
  padding: 4px; }
  .select2-search--dropdown .select2-search__field {
    padding: 4px;
    width: 100%;
    box-sizing: border-box; }
    .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
      -webkit-appearance: none; }
  .select2-search--dropdown.select2-search--hide {
    display: none; }

.select2-close-mask {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 99;
  background-color: #fff;
  filter: alpha(opacity=0); }

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 4px; }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px; }
  .select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold; }
  .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999; }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
      border-color: #888 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      height: 0;
      left: 50%;
      margin-left: -4px;
      margin-top: -2px;
      position: absolute;
      top: 50%;
      width: 0; }

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
  float: left; }

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  left: 1px;
  right: auto; }

.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #eee;
  cursor: default; }
  .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
    display: none; }

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #888 transparent;
  border-width: 0 4px 5px 4px; }

.select2-container--default .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text; }
  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    width: 100%; }
    .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
      list-style: none; }
  .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #999;
    margin-top: 5px;
    float: left; }
  .select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-top: 5px;
    margin-right: 10px; }
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px; }
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #999;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px; }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: #333; }

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
  float: right; }

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  margin-left: 5px;
  margin-right: auto; }

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 2px;
  margin-right: auto; }

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid black 1px;
  outline: 0; }

.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: #eee;
  cursor: default; }

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
  display: none; }

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa; }

.select2-container--default .select2-search--inline .select2-search__field {
  background: transparent;
  border: none;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: textfield; }

.select2-container--default .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto; }

.select2-container--default .select2-results__option[role=group] {
  padding: 0; }

.select2-container--default .select2-results__option[aria-disabled=true] {
  color: #999; }

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #ddd; }

.select2-container--default .select2-results__option .select2-results__option {
  padding-left: 1em; }
  .select2-container--default .select2-results__option .select2-results__option .select2-results__group {
    padding-left: 0; }
  .select2-container--default .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -1em;
    padding-left: 2em; }
    .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
      margin-left: -2em;
      padding-left: 3em; }
      .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
        margin-left: -3em;
        padding-left: 4em; }
        .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
          margin-left: -4em;
          padding-left: 5em; }
          .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
            margin-left: -5em;
            padding-left: 6em; }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #5897fb;
  color: white; }

.select2-container--default .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px; }

.select2-container--classic .select2-selection--single {
  background-color: #f7f7f7;
  border: 1px solid #aaa;
  border-radius: 4px;
  outline: 0;
  background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
  background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
  background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
  .select2-container--classic .select2-selection--single:focus {
    border: 1px solid #5897fb; }
  .select2-container--classic .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px; }
  .select2-container--classic .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-right: 10px; }
  .select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: #999; }
  .select2-container--classic .select2-selection--single .select2-selection__arrow {
    background-color: #ddd;
    border: none;
    border-left: 1px solid #aaa;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
    background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
    background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
    background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); }
    .select2-container--classic .select2-selection--single .select2-selection__arrow b {
      border-color: #888 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      height: 0;
      left: 50%;
      margin-left: -4px;
      margin-top: -2px;
      position: absolute;
      top: 50%;
      width: 0; }

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
  float: left; }

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  border: none;
  border-right: 1px solid #aaa;
  border-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  left: 1px;
  right: auto; }

.select2-container--classic.select2-container--open .select2-selection--single {
  border: 1px solid #5897fb; }
  .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
    background: transparent;
    border: none; }
    .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
      border-color: transparent transparent #888 transparent;
      border-width: 0 4px 5px 4px; }

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
  background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
  background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
  background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
  background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); }

.select2-container--classic .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text;
  outline: 0; }
  .select2-container--classic .select2-selection--multiple:focus {
    border: 1px solid #5897fb; }
  .select2-container--classic .select2-selection--multiple .select2-selection__rendered {
    list-style: none;
    margin: 0;
    padding: 0 5px; }
  .select2-container--classic .select2-selection--multiple .select2-selection__clear {
    display: none; }
  .select2-container--classic .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px; }
  .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
    color: #888;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px; }
    .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: #555; }

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  float: right; }

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  margin-left: 5px;
  margin-right: auto; }

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 2px;
  margin-right: auto; }

.select2-container--classic.select2-container--open .select2-selection--multiple {
  border: 1px solid #5897fb; }

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.select2-container--classic .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
  outline: 0; }

.select2-container--classic .select2-search--inline .select2-search__field {
  outline: 0;
  box-shadow: none; }

.select2-container--classic .select2-dropdown {
  background-color: white;
  border: 1px solid transparent; }

.select2-container--classic .select2-dropdown--above {
  border-bottom: none; }

.select2-container--classic .select2-dropdown--below {
  border-top: none; }

.select2-container--classic .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto; }

.select2-container--classic .select2-results__option[role=group] {
  padding: 0; }

.select2-container--classic .select2-results__option[aria-disabled=true] {
  color: grey; }

.select2-container--classic .select2-results__option--highlighted[aria-selected] {
  background-color: #3875d7;
  color: white; }

.select2-container--classic .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px; }

.select2-container--classic.select2-container--open .select2-dropdown {
  border-color: #5897fb; }
/*==============================================
	
	
	[COMBOBOX.CSS]
	
	DESCRIPTION: Contains styling for autocomplete dropdown input elements based
	on the select2 library.
	
	
===============================================*/
/*
	Combobox / Selection Generic
*/

/* Dropdown Results*/
.select2-container--default .select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
	border-radius: 0;
	border-color: #cccccc;
}

/* Focus */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #0071cf;
}

/*
	Combobox / Selection Defaults
*/

.select2-container {
	width: 100%;
	max-width: 500px;
}

/* Single (default) */
.select2-container .select2-selection--single {
	height: 30px;
	position: relative;
}

.select2-container--default .select2-selection--single {
	border-radius: 0;
	border-color: #ccc;
}

/* Rendered */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 60px;
	position: relative;
	line-height: 27px;
	color: inherit;
	letter-spacing: 0.33px;
	font-weight: bold;
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__rendered:not([title]) {
	opacity: 0.7;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	font-weight: normal;
	font-size: .90em;
	color: inherit;
	/* transition */
	-webkit-transition: .2s;
	-moz-transition: .2s;
	transition: .2s;
}

@supports (-ms-ime-align:auto) { /* Placeholder EDGE opacity Fix */
	.select2-container--default .select2-selection--single .select2-selection__placeholder  { 
		opacity: 1;
	} 
}

/* Clear */
.select2-container--default .select2-selection--single .select2-selection__clear {
    font-size: 0;
    float: none;
    position: absolute;
    right: 30px;
    width: 30px;
    line-height: 0;
    text-align: center;
	font-weight: bold;
}
.select2-container--default .select2-selection--single .select2-selection__clear:before {
    content: "\e101";
    font-size: 15px;
    color: #ccc;
    line-height: 30px;
}

/* Arrow-Down */
.select2-container--default .select2-selection--single .select2-selection__arrow {
	position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    text-align: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: inline-block;
    border-color: #ccc transparent transparent transparent;
    border-style: solid;
    border-width: 13px 8px 0 8px;
    height: 0;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    width: 0;
    left: calc(50% - 8px);
    top: calc(50% - 6px);
}

/* Arrow-Up */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent #CCC transparent;
    border-width: 0 8px 13px 8px;
}

/* With Explain */
.has-explain .select2-container {
	width: calc(100% - 30px);
}

/* In a table */
.refactor .table-wrapper table span > span.dropdown-wrapper,
.refactor .table-wrapper table span > span.selection {
	padding: 0;
}

/*
	States
*/

/* Selected */
.select2-container--default .select2-results__option[aria-selected=true] {
	background: #5a5a5a;
	color: white;	
}
/* Hover */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: #0071cf;
	color: white;
}

/*==============================================
	
	
	[TIMEOUT.CSS]
	
	DESCRIPTION: Contains styling for the timeout top-overlay within iBz. This is visible
	when the user is about to be kicked out of the system because of inactivity.
	
	
===============================================*/

#timeoutText {
	display: block;
	width: 100%;
	position: fixed;
	top: 0;
	background: #0071cf;
	z-index: 999999999;
}

#timeoutText p {
	display: table;
	width:100%;
	table-layout: fixed;
}

#timeoutText p > * {
	color: white;
	font-weight: bold;
	font-size: 13pt;
	line-height: 27pt;
	padding: 8px;
	display: table-cell;
	text-align: center;
}

#timeoutText p > a > span {
	width: 80%;
	background: white;
	border: 1px solid #CCC;
	color: #626060;
	display: inline-block;
}
/*==============================================
	
	
	[PROCESNAGIVATION.CSS]
	
	DESCRIPTION: Contains styling for the/each proces navigation (topnavigation)
	
	
===============================================*/


/*
	Procesnavigation styling (also known as topbar nav)
*/

.proces_navigation {
	position: relative;
	width: 100%;
}

/* Wrapping left and right container */

.proces_navigation > ul {
	display: table;
	width: 100%;
	padding: 8px 0; /* padding excluding borders*/
}

.proces_navigation > ul.has-dropdownmenu {
	position: absolute;
	padding: 0;
}

.proces_navigation > ul > li {
	display: table-cell;
	vertical-align: top;
}

.proces_navigation > ul > li:last-of-type {
	text-align: right;
}

.proces_navigation > ul > li:first-of-type {
	text-align: left;
}

.proces_navigation > ul > li > ul {
	display: block;
}

/* 
	Buttoncontainers
*/

.proces_navigation > ul > li > ul > li {
	display: inline-block;
	vertical-align: top;
	margin-right: 5px;
}

.proces_navigation > ul > li > ul > li:last-of-type {
	margin-right: 0; /* last button should align perfectly to the right side */
}

/*
	Buttons * ~ Based upon refactorbuttons / through class refactor on parent *
*/

.proces_navigation button {
	background: white;
	padding-left: 30px;	
	min-height: 30px;
}

.proces_navigation button:before {
	position: absolute;
	left: 6px;
	top: 6px;
}

/* disabled state */

.proces_navigation button:disabled,
.proces_navigation button:disabled:hover,
.proces_navigation button:disabled:hover span,
.proces_navigation button:disabled span {
	background: white;
}

.proces_navigation button span {
	vertical-align: top;
	letter-spacing: -0.5px;
	font-size: .95em;
}

.proces_navigation .has-dropdownmenu button {
	margin-top: 8px;
}

/*
	Dropdownmenu + Dropdown button
*/

.proces_navigation .dropdownmenu {
	padding: 6px;
	border: 1px solid transparent;
	line-height: 30px;
	background: white;
	z-index: 11;
	/* transition */
	-webkit-transition: 0s ease-in-out;
	-moz-transition: 0s ease-in-out;
	transition: 0s ease-in-out;
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s;
}

.proces_navigation .dropdownmenu li {
	text-align: center;
	z-index: 3;
}

.proces_navigation .dropdownmenu li:first-child {
	display: inline-block;
	width: 100%;
	cursor: default;
	pointer-events: none;
	padding: 6px;
    line-height: 15px;
	font-size: .95em;
    letter-spacing: -0.5px;
    margin-top: -1px;
	border: 1px solid #CCC;
	position: relative;
	padding-right: 25px;
	padding-left: 30px;
	min-height: 30px; /* default min height, can be removed */
	/* transition */
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s;
}

/* Arrow Down */
.proces_navigation .dropdownmenu li:first-child:after {
	display: inline-block;
	content: "";
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 10px solid rgba(0, 0, 0, 0.2);
	position: absolute;
	right: 7px;
	top: 10px;
	/* transition */
	-webkit-transition: .2s ease-in-out;
	-moz-transition:  .2s ease-in-out;
	transition:  .2s ease-in-out;
}

.proces_navigation .dropdownmenu li:first-child span {
	/* transition */
	-webkit-transition: .2s ease-in-out;
	-moz-transition:  .2s ease-in-out;
	transition:  .2s ease-in-out;
}

.proces_navigation .dropdownmenu li:first-child span:before {
	display: inline-block;
	vertical-align: top;
	font-size: 20px;
	padding-right: 5px;
	font-weight: normal;
	position: absolute;
	left: 6px;
	top: 7px;
}

.proces_navigation .dropdownmenu li:not(:first-child) {
	opacity: 0;
	display: none;
	/* animation */
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
 	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* Dropdownmenu hover state ~ Activating dropdown*/

.proces_navigation .dropdownmenu:hover {
	border: 1px solid #CCC;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	transition: .3s;
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s;
	position: relative;
}

.proces_navigation .dropdownmenu:hover li:first-child {
	border: 1px solid transparent;
}

.proces_navigation .dropdownmenu:hover li:first-child span {
	color: #bfbfbf;
}

.proces_navigation .dropdownmenu:hover li:first-child:after {
	border-top-color: rgba(0,0,0,0.025);
}

.proces_navigation .dropdownmenu:hover li:not(:first-child) {
	opacity: 1;
	display: block;
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*
	Responsive rules, based on JS: _initResponsiveElements 
*/

.proces_navigation-break .proces_navigation > ul > li > ul > li > button > span {
	font-size: 0;
}

.proces_navigation-break .proces_navigation > ul > li > ul > li > button:before {
	padding-right: 0;
}

@media (max-width: 900px) {
	.proces_navigation > ul.has-dropdownmenu {
		position: relative;
	}
}

/*=====================================

	POPUP STYLING: DEPRICATED
	Underlying code should be removed as soon as popups are refactored!
	This is NOT the way we want to fix this. :-(
	
	- Dropdown menus will not work.
	
=====================================*/

/* Wrapping container for left/right*/
.ui-dialog-content .proces_navigation > .aq-container-content {
	/* display: table; */
	/* width: 100%; */
}

.ui-dialog-content .proces_navigation > .aq-container-content > .aq-container {
	/* display: table-cell; */
}

/* Most right button */
.ui-dialog-content .proces_navigation > .aq-container-content > .aq-container:last-of-type {
	/* text-align: right; */
}

/* Buttons themselves*/
.ui-dialog-content .proces_navigation .button-container {
	/* display: inline-block; */
	/* width: auto; */
}

/* Icons will not work due to input elements */
.ui-dialog-content .proces_navigation .button-container input {
	/* background: white;
	/* font-size: 10pt; */
	/* /* transition */
	/* -webkit-transition: .2s ease-in-out; */
	/* -moz-transition:  .2s ease-in-out; */
	/* transition:  .2s ease-in-out; */
}

.ui-dialog-content .proces_navigation .button-container input:not(:disabled):hover {
	/* background: #5a5a5a; */
	/* color: white; */
}


.standalonetask .proces_navigation > .aq-container-content {
	/* display: table; */
	/* width: 100%; */
}

.standalonetask .proces_navigation > .aq-container-content > .aq-container {
	/* display: table-cell; */
}

/* Most right button */
.standalonetask .proces_navigation > .aq-container-content > .aq-container:last-of-type {
	/* text-align: right; */
}

/* Buttons themselves*/
.standalonetask .proces_navigation .button-container {
	/* display: inline-block; */
	/* width: auto; */
}

/* Icons will not work due to input elements */
.standalonetask .proces_navigation .button-container input {
	/* background: white; */
	/* font-size: 10pt; */
	/* /* transition */ 
	/* -webkit-transition: .2s ease-in-out; */
	/* -moz-transition:  .2s ease-in-out; */
	/* transition:  .2s ease-in-out; */
}

.standalonetask .proces_navigation .button-container input:not(:disabled):hover {
	/* background: #5a5a5a; */
	/* color: white; */
}
/*==============================================
	
	
	[DEBUG.CSS]
	
	DESCRIPTION: Contains styling for the "debugbar" aka development debug 
	options for the business engineer.
	
	
===============================================*/


.ui-dialog.debugInstanceDetails .aq-page-content.no-procesnavigation,
.ui-dialog.debugInstanceDetails .ui-dialog-content > article,
.debugbarMain .ui-dialog-content > article,
.debugbarMain #mainpage article,
.debugbarMain #mainpage {
	height: 100%;
}
.debugInstanceDetails .ui-dialog-content article form {
	height: auto;
}
.debugbar .refactor .buttonwrapper {
	margin-left: 0;
}
.debugbar .errorMessage {
	color: #db0101;
}
.debugbar li > div {
	width: 60%;
	display: inline-block;
}
.debugbar li > div span {
	font-weight: bold;
}
.debugbar li > div .collapse,
.debugbar li > div .expand {
	padding: 5px;
	display: inline-block;
	cursor: pointer;
	width: 20px;
}
.debugbar li > div .noexpand {
	display: inline-block;
	width: 20px;
}
.debugbar .debugSessionMain ul ul ul {
	margin-left: 20px;
}
.debugbar .debugSessionMain > ul > li {
	margin-bottom: 1px;
}
.debugbar .debugSessionMain .createInstance {
	width: 40%;
	display: inline-block;
	vertical-align: top;
}
.debugbar a.showInstance {
	text-decoration: underline;
	cursor: pointer;
	display: inline;
}

.debugbar ul.rel {
    padding: 10px 0 10px 10px;
    border-left: 1px solid rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.04);
}


.debugbar .refactor .table-wrapper table th:first-of-type,
.debugbar .refactor .table-wrapper table th:first-of-type span {
	font-size: 10pt;
	width: auto;
}
.debugbar .refactor .table-wrapper table tbody th:first-of-type {
	border: 1px solid #ebebeb;
	border-right: 0;
	border-top: 0;
	padding: 5px;
	vertical-align: top;
}
.debugbar .refactor .table-wrapper table tbody tr:first-of-type th:first-of-type {
	border-top: 1px solid #ebebeb;
}
.debugbar .refactor .table-wrapper table td {
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
}
.debugbar .refactor .table-wrapper table td a {
	text-decoration: underline;
}
.debugbar .refactor .table-wrapper table tbody tr:hover th { 
	background: rgba(0, 113, 207, 0.1);
	border-color: white;
}
.debugbar fieldset.refactor > legend:before {
	content: "";
	display: block;
	width: calc(100% - 20px);
	position: absolute;
	top: calc(50% - 0px);
	height: 1px;
	background: #ebebeb;
	z-index: 0;
}

.debugbar fieldset.refactor > legend {
	width: 100%;
	position: relative;
    font-weight: bold;
    display: inline-block;
    padding: 0 10px 0px 10px;
    text-transform: uppercase;
}

.debugbar fieldset.refactor > legend > span {
	position: relative;
	z-index: 1;
	background: white;
	padding-right: 5px;
	display: inline-block;
}
.debugbar .refactor .has-1-stickybutton .checkbox {
	max-width: 100%;
}
.debugbar .refactor .has-1-stickybutton .checkbox li {
	width: 100%;
	max-width: 100%;
}

/*
	Tables
*/

.debugbar .refactor .table-wrapper table th:first-of-type span {
	display: initial;
}
/*==============================================
	
	
	[PICKER.CSS]
	
	DESCRIPTION: Contains styling for the inline datepicker (not hidden behind a button),  
	shown within huwelijksproces. Dependancy on refactorform.	
	
	
===============================================*/


/*==============================================

	Inline Datepicker
	
===============================================*/

.datepicker-wrapper {
    display: block;
    overflow-x: auto;
	border: 1px solid #CCC;
	margin: 0px auto 0px auto;
	width: 100%;
	padding-top: 10px;
}

.private .datepicker-wrapper { /* Civil Servant */
	max-width: 500px;
	margin-left: 310px;
}

.public .contentcaroussel_availability .datepicker-wrapper { /* Civilian */
	border-left: 0;
	border-right: 0;
	border-top: 0;
	/*margin-top: 10px;*/
}

.datepicker-wrapper button {
	border: 0;
	padding: 8px;
	font-size: 1.2em;
}
/*
	TopNav
*/

.pickerheader-nav,
.pickerheader-nav > * > * {
	display: table;
	width: 100%;
	table-layout: fixed;
}
.pickerheader-nav > *,
.pickerheader-nav > * > * > * {
	display: table-cell;
	vertical-align: top;
}

.datepicker-wrapper-topnav button {
	padding: 0;
}

/* Month / Yearpicker  */
.datepicker-wrapper-topnav > .pickerheader-month-year {
	vertical-align: middle;
}

.datepicker-wrapper-topnav > .pickerheader-month-year > div {
	display: table;
	table-layout: fixed;
	width: 100%;
}

.datepicker-wrapper-topnav > .pickerheader-month-year > div > div {
	display: table-cell;
}

.datepicker-wrapper-topnav select {
    height: 51px;
    border: 0;
	text-align: center;
	font-weight: bold;
	min-width: 0;
}

/* Prev / Next button */
.datepicker-wrapper-topnav .picker__nav--prev span,
.datepicker-wrapper-topnav .picker__nav--next span {
	position: absolute !important;
	height: 1px; 
	width: 1px; 
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.datepicker-wrapper-topnav .picker__nav--prev:before,
.datepicker-wrapper-topnav .picker__nav--next:before {
	content: "\e166";
	font-size: 35px;
	line-height: 51px;
}

.datepicker-wrapper-topnav .picker__nav--prev {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

/*
	Header
*/

.datepicker-wrapper-topnav {
	border-top: 1px solid #CCC;
}

.datepicker-wrapper thead th {
	padding: 6px;
	text-align: center;
	line-height: calc(51px / 2);
	border-bottom: 1px solid #CCC;
}

/* Any day */
.datepicker-wrapper .picker__day {
	background: white;
}
/* Today */
.datepicker-wrapper .picker__day--today {
	box-shadow: inset 0 0 1px;
}

/* Focussed */
.datepicker-wrapper .picker__day:focus {
	background: white;
	box-shadow: inset 0 0 1px #0071cf;
}
.datepicker-wrapper .picker__day:focus > span {
	color: #626060;
}	

/* Disabled */
.datepicker-wrapper .picker__day--disabled,
.datepicker-wrapper .picker__day--disabled > span,
.datepicker-wrapper .picker__day--disabled:hover,
.datepicker-wrapper .picker__day--disabled:hover > span,
.datepicker-wrapper .picker__day--disabled:focus,
.datepicker-wrapper .picker__day--disabled:hover > span {
	background: #ebebeb;
	color: #626060;
	font-style: italic;
	cursor: default;
	opacity: 0.8;
}
/* Selected */
.datepicker-wrapper .picker__day--selected,
.datepicker-wrapper .picker__day--selected > span,
.datepicker-wrapper .picker__day--selected:hover,
.datepicker-wrapper .picker__day--selected:hover > span,
.datepicker-wrapper .picker__day--selected:focus,
.datepicker-wrapper .picker__day--selected:focus > span {
	background: #08a701;
	color: white;
	font-weight: bold;
}

/* Out of focus (other month) */
.datepicker-wrapper .picker__day--outfocus ,
.datepicker-wrapper .picker__day--outfocus > span,
.datepicker-wrapper .picker__day--outfocus:hover,
.datepicker-wrapper .picker__day--outfocus:hover > span,
.datepicker-wrapper .picker__day--outfocus:focus,
.datepicker-wrapper .picker__day--outfocus:focus > span {
	font-style: italic;
}

/*==============================================

	Inline Timepicker
	
===============================================*/


.timepicker-wrapper {
	overflow: auto;
}

.private .timepicker-wrapper { /* Civil Servant */
	margin-left: 0;
	max-width: 810px;
	margin-bottom: 20px;
}

.public .timepicker-wrapper {
	padding-bottom: 20px;
	background: #f9f9f9;
	border-left: 1px solid #bcbcbc;
	border-right: 1px solid #bcbcbc;
	border-bottom: 1px solid #bcbcbc;
}

@-moz-document url-prefix() { /* Firefox Hack for displaying table's within fieldsets and enabling overflow */
	fieldset.fieldsetWrapper,
    fieldset.contentcaroussel_availability {
        display: table-cell !important;
    }
}

/*
	Header
*/

.timepicker-wrapper thead tr {
	background: #f9f9f9;
}

.private .timepicker-wrapper thead tr {
	background: white;
}

.timepicker-wrapper thead th {
	line-height: calc(51px / 2);
	text-align: center;
}

.timepicker-wrapper thead th > span {
	display: block;
	line-height: 15px;
	padding-left: 5px;
	padding-right: 5px;
}

.timepicker-wrapper thead th > span.starttime {
	padding-top: 20px;
}

.timepicker-wrapper th:not(:first-child) {
	border-bottom: 1px solid #CCC;
}

/*
	Body
*/

.timepicker-wrapper tbody span {
	line-height: 34px;
}

.timepicker-wrapper tbody th span {
	font-weight: bold;
	text-align: right;
	width: 100%;
	display: inline-block;
	vertical-align: top;
	background: #f9f9f9;
	padding-right: 10px;
	border-right: 1px solid #CCC;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 200px;
	overflow-x: hidden;
}


.timepicker-wrapper tbody th.groupName {
	background: #EBEBEB;
}

.timepicker-wrapper tbody th.groupName span {
	/*text-transform: uppercase;
	color: #979595;
	font-weight: bold;
	padding-left: 10px;*/
	width: 1px; 
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0;
	border: 0;
}

.timepicker-wrapper tbody td:not(:first-child) {
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
}

/* Buttons */
.timepicker-wrapper .has-button.btn-cell {
	position: relative;
}

.timepicker-wrapper th:first-of-type {
	width: 200px;
}
.timepicker-wrapper th.groupName {
    border-bottom: 1px solid #CCC;
    border-right: 1px solid #CCC;
}

.timepicker-wrapper td {
	background: #ebebeb;
}

.timepicker-wrapper th.groupName ~ td:not(:last-of-type) {
	border-right: 1px solid transparent;
}

.timepicker-wrapper button {
	position: relative;
	border: 0;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	line-height: 100%;
	padding: 0;
	line-height: 33px;
	display: inline-block;
	vertical-align: top;
}

.timepicker-wrapper button:before {
	content: "\e107";
	color: white;
	opacity: 0;
}
.timepicker-wrapper button:hover:before {
	opacity: 1;
}

.refactor .timepicker-wrapper button { /* Needs more specific selector */
	background: white;
}

.refactor .timepicker-wrapper button:focus {
	background: #0071cf;
	z-index: 20;
}

/* 
	Hover and Selected styling
*/

.timepicker-wrapper button:hover {
	background: #5a5a5a !important; /* Important added to overrule row-highlighting from stickytable */
	color: white !important; /* Important added to overrule row-highlighting from stickytable */
} 

.timepicker-wrapper button.checked {
	background-color: #08a701 !important; /* Important added to overrule row-highlighting from stickytable */
	color: white !important; /* Important added to overrule row-highlighting from stickytable */
}

.timepicker-wrapper button.checked:before{
	opacity: 1;
	content: "\e102";
	background-color: #08a701 !important; /* Important added to overrule row-highlighting from stickytable */
	color: white !important; /* Important added to overrule row-highlighting from stickytable */
}
.timepicker-wrapper button span {
	position: absolute !important;
	height: 1px; 
	width: 1px; 
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/*==============================================

	Inline Timepicker : Stickytable
	
===============================================*/

.stickytable-wrapper {
	position: relative;
	max-height: 500px; /* For the browsers that cant calculate the height */
    max-height: calc(100vh / 2);
    overflow: auto;
}

.ie9 .stickytable-wrapper {
	height: 300px; /* IE9 fix thet removes ghost padding at the bottom*/
}

.stickytable-wrapper .stickytable-column {
	height: 100%;
}

.stickytable-wrapper .stickytable-overlay,
.stickytable-wrapper .stickytable-header,
.stickytable-wrapper .stickytable-column {
	position: absolute;
	z-index: 5;
}

.stickytable-overlay > *,
.stickytable-header > *,
.stickytable-column > * {
	display: inline-block;
	vertical-align: top;
}

/*
	Stickytable
*/

/* Stickytable Header*/

.stickytable-header {
	display: inline-block;
}
.stickytable-header > div {
	display: table;
	width: 100%;
	table-layout: fixed;
	white-space: nowrap;
}
.stickytable-header > div > div {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	background: #f9f9f9;
}

.private .stickytable-header > div > div {
	background: white;
}

.stickytable-header > div > div {
	border-bottom: 1px solid #CCC;
}

.stickytable-header > div > div > span {
    font-weight: bold;
    line-height: 15px;
    display: block;
}

/* Stickytable Column*/
.stickytable-column > div {
	display: table;
	width: 100%;
}
.stickytable-column > div > div {
	display: table-row;
}

.stickytable-column > div > div > div {
    font-weight: bold;
    text-align: right;
    /*width: 100%;*/
    display: table-cell;
    vertical-align: middle;
    background: #f9f9f9;
    padding-right: 10px;
    border-right: 1px solid #CCC;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 150px;
    overflow-x: hidden;
}

.stickytable-column > div > div > div > span {
	max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.stickytable-column > div > div.groupName > div,
.private .stickytable-column > div > div.groupName > div {
	background: #EBEBEB;
	color: #979595;
	text-transform: uppercase;
}

.private .stickytable-column > div > div > div {
	background: white;
}

/* Stickytable Overlay*/
.stickytable-wrapper .stickytable-overlay {
	background: #f9f9f9;
	z-index: 6;
}

.private .stickytable-wrapper .stickytable-overlay {
	background: white;
}

/*
	Row/Column header hightlight
*/

.stickytable-header .sticky-hover,
.stickytable-column .sticky-hover > div {
	transition: .2s ease-in-out all;
	background: #343434 !important;
	color: white !important;
}

/*==============================================

	Inline Timepicker : Row/Column highlighting
	
===============================================*/

.timepicker-wrapper td.timeslotUnavailable {
	background: #ebebeb!important;
}

.timepicker-wrapper .selected-column-1 tbody tr td.has-button:nth-child(1),
.timepicker-wrapper .selected-column-2 tbody tr td.has-button:nth-child(2),
.timepicker-wrapper .selected-column-3 tbody tr td.has-button:nth-child(3),
.timepicker-wrapper .selected-column-4 tbody tr td.has-button:nth-child(4),
.timepicker-wrapper .selected-column-5 tbody tr td.has-button:nth-child(5),
.timepicker-wrapper .selected-column-6 tbody tr td.has-button:nth-child(6),
.timepicker-wrapper .selected-column-7 tbody tr td.has-button:nth-child(7),
.timepicker-wrapper .selected-column-8 tbody tr td.has-button:nth-child(8),
.timepicker-wrapper .selected-column-9 tbody tr td.has-button:nth-child(9),
.timepicker-wrapper .selected-column-10 tbody tr td.has-button:nth-child(10),
.timepicker-wrapper .selected-column-11 tbody tr td.has-button:nth-child(11),
.timepicker-wrapper .selected-column-12 tbody tr td.has-button:nth-child(12),
.timepicker-wrapper .selected-column-13 tbody tr td.has-button:nth-child(13),
.timepicker-wrapper .selected-column-14 tbody tr td.has-button:nth-child(14),
.timepicker-wrapper .selected-column-15 tbody tr td.has-button:nth-child(15),
.timepicker-wrapper .selected-column-16 tbody tr td.has-button:nth-child(16),
.timepicker-wrapper .selected-column-17 tbody tr td.has-button:nth-child(17),
.timepicker-wrapper .selected-column-18 tbody tr td.has-button:nth-child(18),
.timepicker-wrapper .selected-column-19 tbody tr td.has-button:nth-child(19),
.timepicker-wrapper .selected-column-20 tbody tr td.has-button:nth-child(20),
.timepicker-wrapper .selected-column-21 tbody tr td.has-button:nth-child(21),
.timepicker-wrapper .selected-column-22 tbody tr td.has-button:nth-child(22),
.timepicker-wrapper .selected-column-23 tbody tr td.has-button:nth-child(23),
.timepicker-wrapper .selected-column-24 tbody tr td.has-button:nth-child(24),
.timepicker-wrapper .selected-column-25 tbody tr td.has-button:nth-child(25),
.timepicker-wrapper .selected-column-26 tbody tr td.has-button:nth-child(26),
.timepicker-wrapper .selected-column-27 tbody tr td.has-button:nth-child(27),
.timepicker-wrapper .selected-column-28 tbody tr td.has-button:nth-child(28),
.timepicker-wrapper .selected-column-29 tbody tr td.has-button:nth-child(29),
.timepicker-wrapper .selected-column-30 tbody tr td.has-button:nth-child(30),
.timepicker-wrapper .selected-column-31 tbody tr td.has-button:nth-child(31),
.timepicker-wrapper .selected-column-32 tbody tr td.has-button:nth-child(32),
.timepicker-wrapper .selected-column-33 tbody tr td.has-button:nth-child(33),
.timepicker-wrapper .selected-column-34 tbody tr td.has-button:nth-child(34),
.timepicker-wrapper .selected-column-35 tbody tr td.has-button:nth-child(35),
.timepicker-wrapper .selected-column-36 tbody tr td.has-button:nth-child(36),
.timepicker-wrapper .selected-column-37 tbody tr td.has-button:nth-child(37),
.timepicker-wrapper .selected-column-38 tbody tr td.has-button:nth-child(38),
.timepicker-wrapper .selected-column-39 tbody tr td.has-button:nth-child(39),
.timepicker-wrapper .selected-column-40 tbody tr td.has-button:nth-child(40),
.timepicker-wrapper .selected-column-41 tbody tr td.has-button:nth-child(41),
.timepicker-wrapper .selected-column-42 tbody tr td.has-button:nth-child(42),
.timepicker-wrapper .selected-column-43 tbody tr td.has-button:nth-child(43),
.timepicker-wrapper .selected-column-44 tbody tr td.has-button:nth-child(44),
.timepicker-wrapper .selected-column-45 tbody tr td.has-button:nth-child(45),
.timepicker-wrapper .selected-column-46 tbody tr td.has-button:nth-child(46),
.timepicker-wrapper .selected-column-47 tbody tr td.has-button:nth-child(47),
.timepicker-wrapper .selected-column-48 tbody tr td.has-button:nth-child(48),
.timepicker-wrapper .selected-column-49 tbody tr td.has-button:nth-child(49),
.timepicker-wrapper .selected-column-50 tbody tr td.has-button:nth-child(50),
.timepicker-wrapper .selected-column-51 tbody tr td.has-button:nth-child(51),
.timepicker-wrapper .selected-column-52 tbody tr td.has-button:nth-child(52),
.timepicker-wrapper .selected-column-53 tbody tr td.has-button:nth-child(53),
.timepicker-wrapper .selected-column-54 tbody tr td.has-button:nth-child(54),
.timepicker-wrapper .selected-column-55 tbody tr td.has-button:nth-child(55),
.timepicker-wrapper .selected-column-56 tbody tr td.has-button:nth-child(56),
.timepicker-wrapper .selected-column-57 tbody tr td.has-button:nth-child(57),
.timepicker-wrapper .selected-column-58 tbody tr td.has-button:nth-child(58),
.timepicker-wrapper .selected-column-59 tbody tr td.has-button:nth-child(59),
.timepicker-wrapper .selected-column-60 tbody tr td.has-button:nth-child(60),
.timepicker-wrapper .selected-column-61 tbody tr td.has-button:nth-child(61),
.timepicker-wrapper .selected-column-62 tbody tr td.has-button:nth-child(62),
.timepicker-wrapper .selected-column-63 tbody tr td.has-button:nth-child(63),
.timepicker-wrapper .selected-column-64 tbody tr td.has-button:nth-child(64),
.timepicker-wrapper .selected-column-65 tbody tr td.has-button:nth-child(65),
.timepicker-wrapper .selected-column-66 tbody tr td.has-button:nth-child(66),
.timepicker-wrapper .selected-column-67 tbody tr td.has-button:nth-child(67),
.timepicker-wrapper .selected-column-68 tbody tr td.has-button:nth-child(68),
.timepicker-wrapper .selected-column-69 tbody tr td.has-button:nth-child(69),
.timepicker-wrapper .selected-column-70 tbody tr td.has-button:nth-child(70) {
	background: #CDEDCC;
}

.timepicker-wrapper .selected-column-1 tbody tr td:nth-child(1) button,
.timepicker-wrapper .selected-column-2 tbody tr td:nth-child(2) button,
.timepicker-wrapper .selected-column-3 tbody tr td:nth-child(3) button,
.timepicker-wrapper .selected-column-4 tbody tr td:nth-child(4) button,
.timepicker-wrapper .selected-column-5 tbody tr td:nth-child(5) button,
.timepicker-wrapper .selected-column-6 tbody tr td:nth-child(6) button,
.timepicker-wrapper .selected-column-7 tbody tr td:nth-child(7) button,
.timepicker-wrapper .selected-column-8 tbody tr td:nth-child(8) button,
.timepicker-wrapper .selected-column-9 tbody tr td:nth-child(9) button,
.timepicker-wrapper .selected-column-10 tbody tr td:nth-child(10) button,
.timepicker-wrapper .selected-column-11 tbody tr td:nth-child(11) button,
.timepicker-wrapper .selected-column-12 tbody tr td:nth-child(12) button,
.timepicker-wrapper .selected-column-13 tbody tr td:nth-child(13) button,
.timepicker-wrapper .selected-column-14 tbody tr td:nth-child(14) button,
.timepicker-wrapper .selected-column-15 tbody tr td:nth-child(15) button,
.timepicker-wrapper .selected-column-16 tbody tr td:nth-child(16) button,
.timepicker-wrapper .selected-column-17 tbody tr td:nth-child(17) button,
.timepicker-wrapper .selected-column-18 tbody tr td:nth-child(18) button,
.timepicker-wrapper .selected-column-19 tbody tr td:nth-child(19) button,
.timepicker-wrapper .selected-column-20 tbody tr td:nth-child(20) button,
.timepicker-wrapper .selected-column-21 tbody tr td:nth-child(21) button,
.timepicker-wrapper .selected-column-22 tbody tr td:nth-child(22) button,
.timepicker-wrapper .selected-column-23 tbody tr td:nth-child(23) button,
.timepicker-wrapper .selected-column-24 tbody tr td:nth-child(24) button,
.timepicker-wrapper .selected-column-25 tbody tr td:nth-child(25) button,
.timepicker-wrapper .selected-column-26 tbody tr td:nth-child(26) button,
.timepicker-wrapper .selected-column-27 tbody tr td:nth-child(27) button,
.timepicker-wrapper .selected-column-28 tbody tr td:nth-child(28) button,
.timepicker-wrapper .selected-column-29 tbody tr td:nth-child(29) button,
.timepicker-wrapper .selected-column-30 tbody tr td:nth-child(30) button,
.timepicker-wrapper .selected-column-31 tbody tr td:nth-child(31) button,
.timepicker-wrapper .selected-column-32 tbody tr td:nth-child(32) button,
.timepicker-wrapper .selected-column-33 tbody tr td:nth-child(33) button,
.timepicker-wrapper .selected-column-34 tbody tr td:nth-child(34) button,
.timepicker-wrapper .selected-column-35 tbody tr td:nth-child(35) button,
.timepicker-wrapper .selected-column-36 tbody tr td:nth-child(36) button,
.timepicker-wrapper .selected-column-37 tbody tr td:nth-child(37) button,
.timepicker-wrapper .selected-column-38 tbody tr td:nth-child(38) button,
.timepicker-wrapper .selected-column-39 tbody tr td:nth-child(39) button,
.timepicker-wrapper .selected-column-40 tbody tr td:nth-child(40) button,
.timepicker-wrapper .selected-column-41 tbody tr td:nth-child(41) button,
.timepicker-wrapper .selected-column-42 tbody tr td:nth-child(42) button,
.timepicker-wrapper .selected-column-43 tbody tr td:nth-child(43) button,
.timepicker-wrapper .selected-column-44 tbody tr td:nth-child(44) button,
.timepicker-wrapper .selected-column-45 tbody tr td:nth-child(45) button,
.timepicker-wrapper .selected-column-46 tbody tr td:nth-child(46) button,
.timepicker-wrapper .selected-column-47 tbody tr td:nth-child(47) button,
.timepicker-wrapper .selected-column-48 tbody tr td:nth-child(48) button,
.timepicker-wrapper .selected-column-49 tbody tr td:nth-child(49) button,
.timepicker-wrapper .selected-column-50 tbody tr td:nth-child(50) button,
.timepicker-wrapper .selected-column-51 tbody tr td:nth-child(51) button,
.timepicker-wrapper .selected-column-52 tbody tr td:nth-child(52) button,
.timepicker-wrapper .selected-column-53 tbody tr td:nth-child(53) button,
.timepicker-wrapper .selected-column-54 tbody tr td:nth-child(54) button,
.timepicker-wrapper .selected-column-55 tbody tr td:nth-child(55) button,
.timepicker-wrapper .selected-column-56 tbody tr td:nth-child(56) button,
.timepicker-wrapper .selected-column-57 tbody tr td:nth-child(57) button,
.timepicker-wrapper .selected-column-58 tbody tr td:nth-child(58) button,
.timepicker-wrapper .selected-column-59 tbody tr td:nth-child(59) button,
.timepicker-wrapper .selected-column-60 tbody tr td:nth-child(60) button,
.timepicker-wrapper .selected-column-61 tbody tr td:nth-child(61) button,
.timepicker-wrapper .selected-column-62 tbody tr td:nth-child(62) button,
.timepicker-wrapper .selected-column-63 tbody tr td:nth-child(63) button,
.timepicker-wrapper .selected-column-64 tbody tr td:nth-child(64) button,
.timepicker-wrapper .selected-column-65 tbody tr td:nth-child(65) button,
.timepicker-wrapper .selected-column-66 tbody tr td:nth-child(66) button,
.timepicker-wrapper .selected-column-67 tbody tr td:nth-child(67) button,
.timepicker-wrapper .selected-column-68 tbody tr td:nth-child(68) button,
.timepicker-wrapper .selected-column-69 tbody tr td:nth-child(69) button,
.timepicker-wrapper .selected-column-70 tbody tr td:nth-child(70) button {
	background: #CDEDCC;
}
/*==============================================
	
	
	[DATEPICKER.CSS]
	
	DESCRIPTION: Contains styling for the jquery ui datepicker.
	
	
===============================================*/

/*
	UI-Datepicker
*/

.ui-datepicker {
	max-width: 300px;
	width: 100%;
	display: none;
	position: absolute;
	font-size: 10pt;
	padding: 0;
	margin: 0;
	border: 1px solid #cccccc;
	background: white;
}

/* UI-Datepicker: header */
.ui-datepicker-header {
	display: table;
	table-layout: fixed;
	width: 100%;
}

.ui-datepicker-header > * {
	display: table-cell;
	vertical-align: top;
	text-align: center;
	padding: 3px;
}

.ui-datepicker-header > * > span {
	display: inline-block;
}

.ui-datepicker-title {
	display: table-caption;
	width: 100%;
	text-align: center;
	font-weight: bold;
	text-transform: capitalize;
	background: #0071cf;
}

.ui-datepicker-title span {
	line-height: 30px;
	color: white;
}

/* 
	UI-Datepicker: header-navigation
*/
.ui-datepicker-prev,
.ui-datepicker-next {
	border-bottom: 1px solid #ebebeb;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
	display: none;
}

.ui-datepicker-next:after,
.ui-datepicker-prev:after {
	line-height: 30px;
	content: "\e166";
	display: inline-block;
	font-family: "iburgerzaken";
	font-size: 25px;
}
.ui-datepicker-prev:after {
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}

/* Hoverstate */

.ui-datepicker-next:hover,
.ui-datepicker-prev:hover {
	background: #5a5a5a;
	cursor: pointer;
}

.ui-datepicker-next:hover:after,
.ui-datepicker-prev:hover:after {
	color: white;
}


/* UI-Datepicker: calendar */

.ui-datepicker-calendar {
	display: table;
	table-layout: fixed;
	width: 100%;
	color: #414141;
}

.ui-datepicker-calendar th {
	padding: 1px;
}

.ui-datepicker-calendar td {
	padding: 1px;
}

.ui-datepicker-calendar a,
.ui-datepicker-calendar span {
	display: block;
	padding: 6px;
	width: 100%;
	height: 100%;
	position: relative;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	border: 1px solid transparent;
	color: #414141;
}

/* UI-Datepicker: hoverstates */

.ui-datepicker-other-month {
	opacity: 0.4;
}

.ui-datepicker-other-month:hover {
	opacity: 1;
}

.ui-datepicker-calendar .ui-state-hover {
	border: 1px solid #CCC;
	color: white;
	background: #0071cf;
}

/*
	UI-Datepicker state colors
*/
.ui-datepicker-calendar .ui-state-highlight {
	border: 1px solid #CCC;
}

.ui-datepicker-calendar .ui-state-active {
	border: 1px solid #CCC;
	background: #08a701;
	color: white;
	font-weight: bold;
	border: 1px solid #CCC;
}
/*==============================================
	
	
	[APPOINTMENTS.CSS]
	
	DESCRIPTION: Contains styling for external appointment system-plugin - 
	currently only used within Rijbewijzen-app
	
	
===============================================*/

/*==============================================
	appointmentdatetime
	- Used for civilian side Rijbewijzen
===============================================*/

.appointmentdatetime {
	max-width: 500px;
    display: block;
    overflow-x: auto;
	border: 1px solid #CCC;
	margin-bottom: 20px;
}

.appointmentdatetime.appointDate {
	max-width: 300px;
	background: white;
}
.appointmentWrapper .timePickerWapper {
	background: white;
}


.appointmentWrapper .initCreate.icon_calendar:before {
    content: "\e194";
}

.appointmentWrapper .autocomplete-clear-button {
	display: none!important;
}

/*
	Datepicker
*/

.appointmentdatetime .table-nav {
	height: 40px;
}

.appointmentdatetime .table-nav .month {
	display: inline-block;
	position: relative;
	width: calc(100% - 80px);
}

.appointmentdatetime .table-nav .month > div {
	display: table;
	width: 100%;
}

.appointmentdatetime .table-nav .month > div > * {
	display: table-cell;	
	vertical-align: middle;
	text-align: center;
	padding: 5px;
	height: 40px;
}

.appointmentdatetime .table-nav .month > div > a {
	width: 40px;
	font-size: 0;
}

.appointmentdatetime .table-nav .month a:before {
    content: "\e166";
    font-size: 28px;
    line-height: 40px;
	position: absolute;
	top: 0;
	width: 40px;
	height: 40px;
	background-color: #ebebeb;
}

.appointmentdatetime .table-nav .month a.prev:before {
	left: 0;
    border-top: 1px solid #CCC;
    border-left: 1px solid #CCC;
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}

.appointmentdatetime .table-nav .month a.prev.disabled {
	opacity: 0.2;
	cursor: default;
}

.appointmentdatetime .table-nav .month a.next:before {
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	right: 0;
}

.appointmentdatetime .table-nav .month > div > span {
	width: calc(100% - 80px);
}

.appointmentdatetime .table-nav .year {
	display: inline-block;
	width: 80px;
    line-height: 40px;
    vertical-align: top;
	text-align: center;
}

.appointmentdatetime .table-datepicker table {
	table-layout: fixed;
}

.appointmentdatetime .table-datepicker th,
.appointmentdatetime .table-datepicker td {
	padding: 8px;
    text-align: center;
    vertical-align: middle;
}

.appointmentdatetime .table-datepicker th {
    padding-bottom: 10px;
    border-bottom: 1px solid #ebebeb;
}

/* Other month */

.appointmentdatetime .table-datepicker td.omonth span {
	color: rgba(0,0,0,0.5);
	font-style: italic;
}

/* Not selectable */

.appointmentdatetime .table-datepicker .not-selectable {
	background: rgba(0,0,0,0.03);
}

/* Hoverstates */

.appointmentdatetime .table-datepicker td:not(.not-selectable):not(.selected):hover {
	background: rgba(0, 113, 207, 0.2);
	cursor: pointer;
}

/* ActiveStates */

.appointmentdatetime .table-datepicker td.selected,
.appointmentdatetime .table-datepicker td.selected span {
	background-color: rgb(0, 113, 207);
    color: white;
	font-weight: bold;
}

/*
	Timepicker
*/

.appointmentdatetime .table-timepicker table {
	table-layout: fixed;
}

.appointmentdatetime .table-timepicker td {
	padding: 5px;
	width: 44px;
}

.appointmentdatetime .table-timepicker td:not(:last-of-type) {
    border-right: 1px solid #ebebeb;
}

.appointmentdatetime .table-timepicker td span {
	display: block;
	text-align: center;
}

/* Hoverstates */

.appointmentdatetime .table-timepicker td:not(.not-selectable):not(.selected):hover {
	background: rgba(0, 113, 207, 0.2);
	cursor: pointer;
}

/* ActiveStates */

.appointmentdatetime .table-timepicker td.selected,
.appointmentdatetime .table-timepicker td.selected span {
	background-color: rgb(0, 113, 207);
    color: white;
}

/*==============================================
	MockOorkondeQR
	- Used for civilian side Rijbewijzen
===============================================*/

.AfspraakRijbewijsOorkonde {
	position: relative;
	box-sizing: border-box !important;
	margin: 0 20px 20px 20px !important;
	border: 1px dashed #CCC !important;
	width: calc(100% - 60px)!important;
	min-width: 0!important;
	padding: 20px 10px 30px 10px !important;
}

.AfspraakRijbewijsOorkonde > legend {
	padding-top: 10px !important;
	position: absolute !important;
	top: 5px;
}

.AfspraakRijbewijsOorkonde > legend + p.Text {
	font-weight: bold !important;
	text-transform: uppercase !important;
}

.AfspraakRijbewijsOorkonde > legend:before {
	display: none !important;
}

.AfspraakRijbewijsOorkonde > fieldset {
	padding-bottom: 0px !important;
}

.AfspraakRijbewijsOorkonde > fieldset > legend {
	padding-left: 0px !important;
	width: calc(100% - 40px)!important;
	padding-top: 10px !important;
	padding-bottom: 5px !important;
}

.AfspraakRijbewijsOorkonde > * {
	padding-left: 20px !important;
}

.AfspraakRijbewijsOorkonde .row,
.AfspraakRijbewijsOorkonde .answer {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

.AfspraakRijbewijsOorkonde label {
	padding-left: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}

.AfspraakRijbewijsOorkonde .qrcode{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	background-size: contain;
	z-index: 1001;
}

.AfspraakRijbewijsOorkonde > OpgemaaktNaamRijbewijsOorkonde >fieldset > legend > span {
	font-weight: normal;
    text-transform: capitalize;
}

.OpgemaaktNaamRijbewijsOorkonde > * {
display: inline-block;
}

.OpgemaaktNaamRijbewijsOorkonde > div.row:last-child > label {
display: none;
}
/* 
	Load default overrules 
*/
/*==============================================
	
	
	[FRONTENDBASE.CSS]
	
	DESCRIPTION: This is where it begins..
	
	
	INDEX: 
		1= Font definitions
		2= Resets
		3= Generic
		4= Skeleton
		4~= Elements
	
	
===============================================*/

/*
	OpenSans Font
	- @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
*/

@font-face {
	font-family: 'Open Sans';
	src: url('../../fonts/OpenSans-Extrabold.eot');
	src: url('../../fonts/OpenSans-Extrabold.eot?#iefix') format('embedded-opentype'),
		url('../../fonts/OpenSans-Extrabold.woff') format('woff'),
		url('../../fonts/OpenSans-Extrabold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../../fonts/OpenSans-Semibold.eot');
	src: url('../../fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
		url('../../fonts/OpenSans-Semibold.woff') format('woff'),
		url('../../fonts/OpenSans-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face { /* Duplicate with above / else unreachable by OorkondeImage*/
	font-family: 'Open_Sans_Semibold';
	src: url('../../fonts/OpenSans-Semibold.eot');
	src: url('../../fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
		url('../../fonts/OpenSans-Semibold.woff') format('woff'),
		url('../../fonts/OpenSans-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: bold;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../../fonts/OpenSans-SemiboldItalic.eot');
	src: url('../../fonts/OpenSans-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
		url('../../fonts/OpenSans-SemiboldItalic.woff') format('woff'),
		url('../../fonts/OpenSans-SemiboldItalic.ttf') format('truetype');
	font-weight: 600;
	font-style: italic;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../../fonts/OpenSans-ExtraboldItalic.eot');
	src: url('../../fonts/OpenSans-ExtraboldItalic.eot?#iefix') format('embedded-opentype'),
		url('../../fonts/OpenSans-ExtraboldItalic.woff') format('woff'),
		url('../../fonts/OpenSans-ExtraboldItalic.ttf') format('truetype');
	font-weight: 800;
	font-style: italic;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../../fonts/OpenSansLight-Italic.eot');
	src: url('../../fonts/OpenSansLight-Italic.eot?#iefix') format('embedded-opentype'),
		url('../../fonts/OpenSansLight-Italic.woff') format('woff'),
		url('../../fonts/OpenSansLight-Italic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../../fonts/OpenSans-Light.eot');
	src: url('../../fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
		url('../../fonts/OpenSans-Light.woff') format('woff'),
		url('../../fonts/OpenSans-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../../fonts/OpenSans-Italic.eot');
	src: url('../../fonts/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
		url('../../fonts/OpenSans-Italic.woff') format('woff'),
		url('../../fonts/OpenSans-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../../fonts/OpenSans.eot');
	src: url('../../fonts/OpenSans.eot?#iefix') format('embedded-opentype'),
		url('../../fonts/OpenSans.woff') format('woff'),
		url('../../fonts/OpenSans.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../../fonts/OpenSans-BoldItalic.eot');
	src: url('../../fonts/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
		url('../../fonts/OpenSans-BoldItalic.woff') format('woff'),
		url('../../fonts/OpenSans-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../../fonts/OpenSans-Bold.eot');
	src: url('../../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
		url('../../fonts/OpenSans-Bold.woff') format('woff'),
		url('../../fonts/OpenSans-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

/*
	iBurgerzaken Font
*/

@font-face {
  font-family: "iburgerzaken";
  src: url("../../fonts/iburgerzaken.eot");
  src: url("../../fonts/iburgerzaken.eot?#iefix") format("embedded-opentype"),
		url("../../fonts/iburgerzaken.woff") format("woff"), 
		url("../../fonts/iburgerzaken.ttf") format("truetype"), 
		url("../../fonts/iburgerzaken.svg#iburgerzaken") format("svg");
  font-weight: normal;
  font-style: normal;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

ins {
  background-color: #ff9;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

ul, ol {
  list-style: none;
}

pre, code, kbd, samp {
  font-family: monospace, sans-serif;
}

input[type="radio"] {
  vertical-align: text-bottom;
}

input[type="checkbox"] {
  vertical-align: bottom;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
}

label, input[type="button"], input[type="submit"], input[type="image"], button {
  cursor: pointer;
}

button {
  width: auto;
  overflow: visible;
}

a:focus {
  outline: thin dotted;
}

a:hover, a:active {
  outline: 0;
}

svg:not(:root) {
  overflow: hidden;
}

html {
  height: 100%;
}

body {
  height: 100%;
  width: 100%;
}

/* correction overrules */

th {
  font-weight: bold;
  text-align: left;
}

td, th {
  vertical-align: middle;
}

/*
	Generic
*/

:before,
:after {
	font-family: "iburgerzaken";
	font-weight: normal;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
}

html {
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	font-family: "Open Sans", "Verdana", "sans-serif";
	font-weight: normal;
    font-size: 13px;
    color: #626060;
}

* {
	box-sizing: inherit;
	font-family: inherit;
	color: inherit;
}

html, body {
	overflow: hidden;
	height: 100%;
}

/*
	Inline Elements
*/

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
}

input,
select,
textarea {
	font-size: inherit;
	font-weight: bold;
}

/*
	Input & Placeholder Text
	Vendor specifics have to be declared separate in order to work
*/

::placeholder { /* Generic */
    letter-spacing: initial;
	font-weight: normal;
	font-size: .90em;
    opacity: 0.75;
	transition: .2s;
}

:focus::placeholder { /* Generic */
	opacity: 1;
}

textarea::-webkit-input-placeholder, /* Chrome */
select::-webkit-input-placeholder,
input::-webkit-input-placeholder {
	opacity: 0.75;
	font-weight: normal;
	font-size: .90em;
	-webkit-transition: .2s;
	transition: .2s;
}

textarea:-moz-placeholder, /* FF */
select:-moz-placeholder,
input:-moz-placeholder {
    opacity: 0.75;
	font-weight: normal;
	font-size: .90em;
	-moz-transition: .2s;
	transition: .2s;
}

textarea::-moz-placeholder, /* FF */
select::-moz-placeholder,
input::-moz-placeholder {
    opacity: 0.75;
	font-weight: normal;
	font-size: .90em;
	-moz-transition: .2s;
	transition: .2s;
}

textarea:-ms-input-placeholder, /* IE */
select:-ms-input-placeholder,
input:-ms-input-placeholder {
    opacity: 0.75;
	font-weight: normal;
	font-size: .90em;
	transition: .2s;
}

textarea::-ms-input-placeholder, /* Edge */
select::-ms-input-placeholder,
input::-ms-input-placeholder {
    opacity: 1; /* Bug in edge :( */
	font-weight: normal;
	font-size: .90em;
	transition: .2s;
}

/* Hover */

textarea:hover::-webkit-input-placeholder, /* Chrome */
select:hover::-webkit-input-placeholder,
input:hover::-webkit-input-placeholder {
	opacity: 1;
}

textarea:hover:-moz-placeholder, /* FF */
select:hover:-moz-placeholder,
input:hover:-moz-placeholder {
	opacity: 1;
}

textarea:hover::-moz-placeholder,  /* FF */
select:hover::-moz-placeholder,
input:hover::-moz-placeholder {
	opacity: 1;
}

textarea:hover:-ms-input-placeholder, /* IE */
select:hover:-ms-input-placeholder,
input:hover:-ms-input-placeholder {
	opacity: 1;
}

textarea:hover::-ms-input-placeholder, /* Edge */
select:hover::-ms-input-placeholder,
input:hover::-ms-input-placeholder {
	opacity: 1;
}

/*==============================================
	Non-selectable Elements
===============================================*/

.refactor .topnavigation *, /* Breadcrumb */
.ambient_carousel nav *, /* Carousel overlaying navigation */
.accesability-wrapper * /* Accesability Tools */
{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


/*==============================================
	DebugBar
===============================================*/

.devtools {
	position: fixed;
	top: 0;
	right: 0;
	background: blue;
	padding: 20px;
	text-decoration: none;
	z-index: 9999;
}

.devtools span {
	color: white;
	font-weight: bold;
}

.debugbarMain {
	display: none;
}


/*==============================================
	Center aka Global Wrapper
===============================================*/

body {
	background: #f9f9f9;
	overflow-y: scroll;
}

#center {
	min-height: 100%;
	position: relative;
}

#center > .refactor {
	min-height: 100%;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - (1200px / 2));
}


/*==============================================
	Wrapper : Form is the global wrapper
===============================================*/

.refactor form {
	min-height: calc(100% - 125px); /* minus headersize */
	position: relative;
	background: white;
	border-left: 1px solid #bcbcbc;
	border-right: 1px solid #bcbcbc;
}


.refactor #wrapper {
	padding-right: 260px; /* Makes room for Aside */

}

/*==============================================
	Topnavigation : Pagetitle + Usability navigation
===============================================*/

.refactor .topnavigation {
	padding: 10px 20px;
	background: #f8f8f8;
	border-bottom: 1px solid #bcbcbc;
	border-top: 1px solid #bcbcbc;
}

.refactor .topnavigation .pagetitle {
	position: relative;
}

.refactor .topnavigation .pagetitle > span {
	font-size: 180%;
	font-weight: 500;
	display: inline-block;
	vertical-align: middle;
}

.refactor .topnavigation .pagetitle:before {
	display: inline-block;
	font-size: 40px;
	line-height: 20px;
	vertical-align: middle;
	text-indent: -10px;
	margin-right: 10px;
}

/*
	Pagetitle Icons
*/

/* Proces Verhuizing */
/* Proces Emigratie */
.pagetitle.verhuizing:before,
.pagetitle.emigratie:before {
	content: "\e262";
}
/* Proces Rijbewijzen */
.pagetitle.aanvraag-rijbewijs:before {
	content: "\e263";
}
/* Proces Geboorte */
.pagetitle.geboorte:before {
	content: "\e240";
}
/* Proces Huwelijk */
/* Proces Partnerschap */
.pagetitle.aangifte-huwelijk:before,
.pagetitle.aangifte-partnerschap:before,
.pagetitle.huwelijk:before,
.pagetitle.partnerschap:before  {
	content: "\e266";
}
/* Proces Overlijden */
.pagetitle.overlijden:before {
	content: "\e265";
}
/* Proces Aanvraag afschrift burgerlijke stand */
/* Proces Verzoek geheimhouding persoonsgegevens */
/* Proces Aanvraag bewijs van nederlandschap */
/* Proces Aanvraag bewijs van in leven zijn */
/* Proces Wijziging naamgebruik */
/* Proces Aanvraag Uittreksel BRP */
.pagetitle.aanvraag-afschrift-burgerlijke-stand:before,
.pagetitle.verzoek-geheimhouding-persoonsgegevens:before,
.pagetitle.aanvraag-bewijs-van-nederlanderschap:before,
.pagetitle.aanvraag-bewijs-van-in-leven-zijn:before,
.pagetitle.wijziging-naamgebruik:before,
.pagetitle.aanvraag-uittreksel-brp {
	content: "\e276";
}

/* Proces Aanvraag Reisdocument */
.pagetitle.aanvraag-reisdocument:before {
	content: "\e264";
}

/*==============================================
	Loader : Overlay
===============================================*/

.aquima-portlet-loader {
	display: block;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.3);
	cursor: progress;
}

.ajax-loader  {
	display: inline-block;
	width: 70px;
	height: 70px;
	position: absolute;
	top: calc(50% - 16px);
	left: calc(50% - 16px);
	font-size: 0;
	z-index: 99999;
	color: transparent;
	cursor: progress;
}

.ajax-loader:before, 
.ajax-loader:after {
	content: "";
	display: inline-block;
	background-color: white;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 0;
	left: 0;

	-webkit-animation: cubemove 1.8s infinite ease-in-out;
	animation: cubemove 1.8s infinite ease-in-out;
}

.ajax-loader:after {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

@-webkit-keyframes cubemove {
	25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
	50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
	75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
	100% { -webkit-transform: rotate(-360deg) }
}

@keyframes cubemove {
	25% { 
	transform: translateX(42px) rotate(-90deg) scale(0.5);
	-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
	} 50% { 
	transform: translateX(42px) translateY(42px) rotate(-179deg);
	-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
	} 50.1% { 
	transform: translateX(42px) translateY(42px) rotate(-180deg);
	-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
	} 75% { 
	transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
	-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
	} 100% { 
	transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	}
}

/*
	Overlay: Loader IE9
*/

.ie9 .ajax-loader:before, 
.ie9 .ajax-loader:after {
	display: none;
}

.ie9 .ajax-loader {
	background-image: url('../backend/images/custom/ajax-loader.gif');
	width: 220px;
	height: 20px;
	left: calc(50% - 110px);
	top: calc(50% - 10px);
}

/*==============================================
	Header
===============================================*/

.refactor header:not(.popupheader) {
	display: block;
	width: 100%;
	height: 125px;
	background: url('../../frontend-base/images/header1.png');
	background-color: #414141;
	background-repeat: no-repeat;
	background-position: left top;
	position: relative;
	border-left: 1px solid #bcbcbc;
	border-right: 1px solid #bcbcbc;
}

/*==============================================
	Article
===============================================*/

.refactor article {
	width: 100%;
	display: inline-block;
	vertical-align: top;
	max-width: 940px;
}

/*
	Article Tips
*/

.refactor .tips {
	border: 1px solid #ebebeb;
	background: #f9f9f9;
	padding: 5px 20px 5px 40px;
	position: relative;
}

/* Tips: Icon*/
.refactor .tips:before {
	content: "\e191";
	font-size: 20px;
	position: absolute;
	left: 0;
	top: 0;
	line-height: 30px;
	width: 40px;
	text-align: center;
	display: block;
}

.refactor .tips h3 {
	text-transform: uppercase;
	font-weight: bold;
	line-height: 30px;
	position: relative;
	z-index: 1;
	display: block;
	position: relative;
}

.refactor .tips h3 span {
	z-index: 1;
	position: relative;
	background: #f9f9f9;
	padding-right: 10px;
	display: inline-block;
}

/* Tips: Linethrough */

.refactor .tips h3:after {
	content: "";
	display: block;
	width: 100%;
	position: absolute;
	top: calc(50% - 0px);
	left: 0px;
	height: 1px;
	background: #ebebeb;
	z-index: 0;
}

.refactor .tips p {
	padding: 0;
}

/* 
	Reset default styling caused by global exclude
*/
.refactor .tips > div * {
	white-space: normal;
	white-space: initial;
}
.refactor .tips > div ul {
	list-style-type: square;
}

/* Tips: sibbling elements */

.refactor .tips + div,
.refactor .tips + .justificationrefactor,
.refactor .tips + fieldset {
	margin-top: 10px;
}

.refactor .tips + .Text {
	padding-top: 10px;
}


/*
	Article Form
*/

.refactor form article {
	padding: 0 20px 20px 20px;
}



/* Bottom navigation */


.refactor form article #column-1 {
	padding-bottom: 80px; /* Bottom navigation positioning*/
}

/*==============================================
	Article : Notifications
===============================================*/

.refactor .notificationDiv {
	display: block;
	width: 100%;
}

.refactor .notificationDiv .contentDiv h4 {
	display: none;
}

.refactor .notificationDiv .contentDiv {
	padding: 5px 5px 5px 35px;
	border:1px solid #CCC;
	margin-bottom: 2px;
	position: relative;
	overflow: hidden;
}

.refactor .notificationDiv .contentDiv:before {
	position: absolute;
	content: "";
	display: inline-block;
	width: 30px;
	line-height: 30px;
	left: 0;
	top: 0;
	height: 100%;
	text-align: center;
	background: #ebebeb;
	font-size: 21px;
	color: white;
}

/* Error */
.refactor .notificationDiv .tn-box-error .contentDiv {
	border-color: #db0101;
	border-width: 2px;
	font-weight: bold;
}

.refactor .notificationDiv .tn-box-error .contentDiv:before {
	background: #db0101;
	content: "\e192";
}



/*==============================================
	Aside
===============================================*/

.refactor aside {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	max-width: calc(1200px - 940px); /* centersize minus article size */
	padding: 10px 20px;
	background: #f8f8f8;
	border-left: 1px solid #bcbcbc;
	border-top: 1px solid #bcbcbc;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
}

.refactor aside > a,
.refactor aside > button:not(:last-of-type) {
	margin-bottom: 20px;
}

/*
	Aside: Tips - DEPRECATED (Now in article)
*/

.refactor aside .tips {
	border: 1px solid #ebebeb;
	border-bottom: 0;
}

.refactor aside .tips h3 {
	padding: 10px 15px;
	font-weight: bold;
	border-bottom: 1px solid #ebebeb;
}

.refactor aside .tips p {
	padding: 15px;
}

.refactor aside .tips p:last-of-type {
	border-bottom: 1px solid #ebebeb;
}

/*
	Aside: Fieldset 
*/

.refactor aside fieldset {
	border-bottom: 0;
}

.refactor aside fieldset button {
	margin: 0;
	width: 100%;
}

/* Legend */
.refactor aside fieldset legend {
	padding: 10px 15px;
	font-weight: bold;
	border-top: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #ebebeb;
	width: 100%;
}

/* Table */
.refactor aside .table-wrapper {
	padding: 0;
}

/* 
	Favorieten 
*/
.refactor aside fieldset legend + .table-wrapper table tbody td:last-of-type {
	border-left: 0px;
}

/* Favorieten bottom-border */
.refactor aside fieldset legend + .table-wrapper {
	border-bottom: solid 1px #ebebeb;
}
.refactor aside fieldset legend + .table-wrapper table tbody tr:last-of-type td {
	border-bottom: 0px;
}

.refactor aside fieldset legend + .table-wrapper table tbody td:first-of-type {
	width: 100%;
	padding-left: 15px;
}

/*
	Aside: Buttons
*/

.refactor aside button {
	position: relative;
	padding-left: 40px; /* Padding for button */
}

.refactor aside button:before {
	position: absolute;
	left: 0;
	top: calc(50% - 8px);
	/*height: 100%;*/
	width: 40px;
	text-align: center;
	padding-right: 0;
}

/*==============================================
	Text Elements
===============================================*/

.refactor p, 
.refactor span,
.refactor a {
	/*font-size: 10pt;*/
}

.refactor .Text {
	padding: 10px;
}

/*==============================================
	Button Elements
===============================================*/

.refactor button,
.refactor button:disabled span,
.refactor button:disabled:hover {
	background: #f9f9f9;
}

.refactor button.ol-zoom-in,
.refactor button.ol-zoom-out {
	background-color: rgba(0,60,136,.5);
}

.refactor .button-big,
.refactor .bigbutton,
.refactor .buttonbig {
	padding: 20px;
}

/* 
	DigiD Styling
	Eherkenning Styling
*/

.refactor button.DigidLoginButton,
.refactor button.EHerkenningLoginButton  {
	padding: 20px;
}

.refactor button.DigidLoginButton span,
.refactor button.EHerkenningLoginButton span{
	padding-left: 45px;
	position: relative;
}

.refactor button.DigidLoginButton span:before,
.refactor button.EHerkenningLoginButton span:before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	top: calc(50% - 15px);
	background-size: contain;
	width: 30px;
	height: 30px;
}

/* DigiD Login */
.refactor button.DigidLoginButton span:before {
	background: url('../../frontend-base/images/digid.png') no-repeat;
}
.refactor button.DigidLoginButton:hover {
	background: #e17000;
}

/* DigiD Logout*/

.refactor button.DigidLogoutButton:hover {
	background: #db0101;
}

/* Eherkenning Login */
.refactor button.EHerkenningLoginButton span:before {
	background: url('../../frontend-base/images/eherkenning.png') no-repeat;
}

.refactor button.EHerkenningLoginButton:hover {
	background-color:#492683
}
.refactor button.EHerkenningLoginButton:hover > span {
	color: white;
}

/* 
	iDEAL Styling 
*/

/* iDEAL */

.refactor button.IdealButton  {
	padding: 20px;
}

.refactor button.IdealButton:hover {
	background: #cc0066;
}

.refactor button.IdealButton span{
	padding-left: 35px;
	position: relative;
}

.refactor button.IdealButton span:before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	top: -7px;
	background: url('../../frontend-base/images/ideal.png') no-repeat;
	background-size: contain;
	width: 30px;
	height: 30px;
}

/*==============================================
	Input Elements
===============================================*/

/* 
	Required input field styling (*)
*/

.refactor-field.required > label+div:not(.has-explain)>.datefield-wrapper:before,
.refactor-field.required > label+div:not(.has-explain):before,
.refactor-field.required > label+div.has-explain>div.datefield-wrapper:before,
.refactor-field.required > label+div.has-explain>div.inputsection:before,
.refactor-inlinecontainer.required > label+div:before,
/* document selection styling*/
.refactor-field.required.documentselection > div > div:first-of-type:before {
	position: absolute;
	top: 0;
	width: 10px;
	height: 100%;
	background: #ebebeb;
	border: 1px solid #ccc;
	border-right: 0;
	box-sizing: border-box;
	text-align: center;
	content: "*";
	left: -10px;
	/* color: #CCC; */
	font-weight: bold;
	font-family: tahoma;
	font-size: 11px;
	line-height: 20px;
}

/*
	Selects
*/

.refactor select {
	-webkit-appearance: none; /* required for proper iOS styling for native elements */ 
}


/*
	UI-widget aka every UI element
*/

.ui-widget {
	border: 1px solid #CCC;
	background: white;
	/* display: inline-block; */
	color: #414141;
}

.ui-menu {
	border-top: 0px;
}

.ui-menu,
.ui-datepicker {
	box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.2);
}

.ui-widget li a {
	display: block;
	padding: 4px;
	padding-left: 10px;
	border-bottom: 1px solid rgba(0,0,0,0.010);
}

.ui-widget li:last-of-type a {
	border-bottom: 0;
}

/* UI-widget hover and ui-state-focus*/
.ui-state-focus,
.refactor .ui-state-active,
.ui-widget li a:hover {
	background: #0071cf;
	color: white;
}

.ui-autocomplete {
	position: absolute;
	z-index: 100 !important;
	max-height: 200px;
	overflow: auto;
}


/* Dialog */
.ui-dialog-content > article > section,
.ui-dialog-content > article {
	display: inline-block;
	height: 100%;
	width: 100%;
}

.ui-dialog .task-content-only,
.ui-dialog .task-wrapper {
	min-height: 100%;
    height: auto;
}

.ui-dialog .aq-page-content {
	height: calc(100% - 51px);
	overflow: auto;
}

/*
	Popup: Confirm/Cancel proces
*/

.ui-dialog .ui-dialog-content {
	padding: 10px;
}

.ui-dialog .ui-dialog-buttonset > * {
    display: inline-block;
    width: calc(50% - 20px);
    margin: 10px;
}

.ui-dialog .form_navigation > div > div {
	whitespace: nowrap;
}

.ui-dialog .form_navigation button > span {
	padding-left: 0;
	padding-right: 0;
}

/*==============================================
	Justification
===============================================*/

.refactor .justificationrefactor {
	margin: 0 0 20px 0;
}

/*inline justification message*/
fieldset.refactor .justificationrefactor {
	margin:10px;
}

/*==============================================
	Article Bottom Navigation aka Form Navigation
===============================================*/

#wrapper article fieldset.form_navigation {
	width: calc(100% - 300px);
	bottom: 20px;
	min-width: 0;
	position: absolute;
}

#wrapper article fieldset.form_navigation button {
	padding: 0 20px;
}

/*==============================================
	Search Results
===============================================*/


.refactor .searchresultlist {
	margin-top: 10px;
}

.refactor .searchresultlist li {
	position: relative;
	border: 1px solid #CCC;
 	display: block;
  	padding: 10px 10px 10px 60px;
    max-width: 500px;
    margin: 0 0 5px 311px;
}

.refactor .searchresultlist li:before {
	content: '\e139';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 50px;
	text-align: center;
	top: calc(50% - 10px);
    line-height: 20px;
	font-size: 25px;
}

.refactor .searchresultlist li:hover,
.refactor .searchresultlist li:hover * {
	background-color:#5a5a5a;
	color:white;
}
.refactor .searchresultlist li button {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background: none;
	border: 0;
}
.refactor .searchresultlist li button:hover {
	background: none;
}

.refactor .searchresultlist li button > span {
	position: absolute !important;
	width: 1px; 
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.refactor .searchresultlist li p {
	padding:0;
}

/*==============================================
	Voorbereiding page
===============================================*/

.refactor.voorbereiding form article {
	margin-top: 20px;
}

/*==============================================
	Bevestiging page
===============================================*/

.page-bevestiging fieldset.refactor > .row {
	padding: 0;
}

.page-bevestiging .refactor label {
	padding-top: 1px;
	padding-bottom: 1px;
}

.page-bevestiging .refactor .readonly label+div, 
.page-bevestiging .refactor label+div.answer > .Text:first-of-type {
	padding-top: 0;
}

/* Euro Sign */
.page-bevestiging .refactor .readonly .prefix  {
	line-height: 20px;
}

/*==============================================
	Oorkonde page
===============================================*/

.refactor.oorkonde form article {
	margin-top: 20px;
}

.refactor.oorkonde form article #column-1 {
	padding-bottom: 0;
}

.refactor.oorkonde .buttonwrapper {
	margin-left: 10px;
	width: calc(100% - 20px);
	max-width: none;
}

/*
	Oorkonde Image
*/

.refactor.oorkonde .oorkonde-wrapper {
	text-align: center;
	overflow: auto;
}

#wrapper article div#column-1 fieldset.refactor legend + .oorkonde-wrapper {
	margin-top: 20px; /* Overrule for standard first element coming after a legend*/
	margin-bottom: 20px;
}

/*
	Social Buttons
*/

.refactor.oorkonde .ebutton {
	padding: 14px;
}

.refactor.oorkonde .icon-twitter span,
.refactor.oorkonde .icon-facebook span {
	vertical-align: middle;
}

.refactor.oorkonde .icon-twitter span:before {
	content: "\e186";
	font-size: 30px;
	vertical-align: top;
	line-height: 20px;
}

.refactor.oorkonde .icon-facebook span:before {
	content: "\e267";
	font-size: 30px;
	vertical-align: top;
	line-height: 20px;
}

/* Social Buttons: hoverstates */

.refactor.oorkonde .icon-twitter:hover,
.refactor.oorkonde .icon-twitter:focus {
	background: #3b88c3;
}

.refactor.oorkonde .icon-facebook:hover,
.refactor.oorkonde .icon-facebook:focus {
	background: #3a5795;
}

/* Social Popup */
#twitter_popup {
	text-align: center;
	font-size: 10pt;
}

#twitter_popup .twtextdiv,
#twitter_popup .twbottompanel {
	display: inline-block;
	text-align: left;
	width: calc(100% - 20px);
}

#twitter_popup .twbottompanel,
#twitter_popup .twbottompanel .twbtn {
	margin-top: 10px;
}

#twitter_popup .twbottompanel .twbtn {
	padding: 14px;
	display: block;
	width: 100%;
	background: white;
	border: 1px solid #CCC;
	/* transition */
	-webkit-transition: .2s;
	-moz-transition: .2s;
	transition: .2s;
}

#twitter_popup .twbottompanel .twbtn:hover {
	background: #626060;
	color: white;
}

#twitter_popup .twtextdiv .twtxareadiv textarea {
	max-width: none;
	width: calc(100% - 5px);
}

/* 
	Aside buttons 
*/

.refactor aside button {
	background: white;
}

/*	Aangifte Annuleren */

.DigidLogoutButton:before {
	content: "\e170";
	font-size: 20px;
}

/*	Filedownload container */
.refactor.oorkonde aside .file {
	padding: 5px;
	min-height: 0;
	padding-left: 40px;
	border-color: #CCC;
}

.refactor.oorkonde aside .file span,
.refactor.oorkonde aside .file:after {
	display: none;
}

.refactor.oorkonde aside .file:before {
    content: "\E201";
    width: 40px;
    height: 100%;
    background: transparent;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    margin: 0;
    color: inherit;
}

.refactor.oorkonde aside .file p {
	text-align: center;
}

.refactor.oorkonde aside .file:hover p,
.refactor.oorkonde aside .file:focus p,
.refactor.oorkonde aside .file:hover p strong,
.refactor.oorkonde aside .file:focus p strong {
	color: white;
}

/* Digital Signing */

canvas.imgSignature{
	border:1px solid #bfbfbf;
	width:500px;
	height:200px;
}

/* SkipLinks */
a.skipLink {
	background-color: #0071cf;
	border: 1px solid #bcbcbc;
	display: block;
	left: -1000em;
	padding: 0.8em;
	position: absolute;
	color: white;
	font-weight: bold;
}
a.skipLink:active,
a.skipLink:focus {
    top: 1em;
    left: 1em;
}

/* 
	Load components 
*/
/*==============================================
	
	
	[BREADCRUMB.CSS]
	
	DESCRIPTION: Contains the styling for the breadcrumb component
	which shows the steps throughout a proces.
	
	
===============================================*/

/*==============================================
	Article sidemenu aka Breadcrumb
===============================================*/

.refactor .sidemenu:empty {
	padding: 10px;
}

.refactor .sidemenu {
	padding: 20px;
	position: relative;
	z-index: 0;
}

.refactor .sidemenu ul {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.refactor .sidemenu ul li {
	display: table-cell;
	position: relative;
}

/* 
	Buttons with arrows
*/

.refactor .sidemenu ul li a > span,
.refactor .sidemenu ul li span > span {
	z-index: 2;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.refactor .sidemenu ul li a,
.refactor .sidemenu ul li > span {
	display: block;
	padding: 20px 20px 20px 40px;
	text-align: center;
	position: relative;
	background: #f9f9f9;
	text-decoration: none;
	white-space: nowrap;
}

.refactor .sidemenu ul li a:before,
.refactor .sidemenu ul li > span:before {
	content: "";
	z-index: 1;
	width: 41px;
	height: 41px;
	background: inherit;
	display: inline-block;
	position: absolute;
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	right: -14px;
	top: 9px;
}

/* Style an arrow after the anchor or span */
.refactor .sidemenu ul li a:after,
.refactor .sidemenu ul li > span:after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 52px;
	height: 52px;
	top: 4px;
	right: -22px;

	border-right: 8px solid white;
	border-top: 9px solid white;
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Hide the last element arrow after the anchor or span*/
.refactor .sidemenu ul li:last-of-type a:after,
.refactor .sidemenu ul li:last-of-type > span:after,
.refactor .sidemenu ul li:last-of-type a:before,
.refactor .sidemenu ul li:last-of-type > span:before {
	display: none;
}

/*
	Status
*/

/* Active (as last to overrule oordeel state) */
.refactor .sidemenu ul li.active a {
	background: #0071cf;
	color: white;
	font-weight: bold;
}

/* Disabled */
.refactor .sidemenu ul li.disabled span {
	background: #ebebeb;
	color: grey;
}

/* Error */
.refactor .sidemenu ul li.oordeel-Fout a {
	background: #db0101;
	color: white;
}

/* Warning */
.refactor .sidemenu ul li.oordeel-Waarschuwing a {
	background: #dbce01;
	color: white;
}

/* Done / Succes */
.refactor .sidemenu ul li.oordeel-Goed a {
	background: #08a701;
	color: white;
}


/*	Status and active */
.refactor .sidemenu ul li.active.oordeel-Goed a  {
	background: #0071cf;
}
.refactor .sidemenu ul li.active.oordeel-Fout a {
	background: #0071cf;
}
.refactor .sidemenu ul li.active.oordeel-Waarschuwing a {
	background: #0071cf;
}	
/*==============================================
	
	
	[CAROUSEL.CSS]
	
	DESCRIPTION: Contains the styling for the carousel shown
	in each process during the beginning. Also contains the content-carousel
	used in the huwelijk proces.
	
	
===============================================*/


.refactor .carousel-wrapper {
	min-height: 500px;
}

.refactor #column-1 > .carousel-wrapper {
	margin-bottom: 20px;
}

/* Above: Temporarily Styles for refactor */

.carousel-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 1200px;
	max-height: 600px;
	margin: 0 auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
    border: 1px solid #bfbfbf;
}

.carousel-wrapper.contentcaroussel {
	border: none;
}

/* never show images in a carousel */
.ambient_carousel img,
.content_carousel img {
	display: none;
}

/* Navigational part of the header */
.content_carousel > header nav {
	display: inline-block;
}

.content_carousel > header nav ul li {
	background: #f8f8f8;
}

.content_carousel > header nav ul li a span:before {
	content: "X";
	padding-left: 5px;
	padding-right: 5px;
}

.content_carousel > header nav ul li a span {
	font-size: 15pt;
	padding-left: 10px;
}

.content_carousel > header nav ul li a {
	display: block;
	height: 100%;
	text-decoration: none;
}

.content_carousel > header nav ul li.active {
	background:white;
	position: relative;
}

.content_carousel > header nav ul li.active:after {
	content: "";
	display: block;
	width: 100%;
	position: absolute;
	background: white;
	bottom: -1px;
	height: 1px;
	z-index: 1;
}

.content_carousel > header nav ul li {
	border: 1px solid #bfbfbf;
	border-bottom: 0px;
	width: 250px;
	margin-right: 2px;
	height: 100%;
}

/* Define font-icons */
.content_carousel > header nav ul li a span:before,
.content_carousel section.selectables > nav ul li a.favourite:before,
.content_carousel section.selectables > nav a:before,
.content_carousel section.content .intro > header > div > a:before,
.content_carousel.details section.content .description > nav > ul li > a:before,
.content_carousel section.content .intro > header > div > a.showinfo:after,
.ambient_carousel nav > a:before  {
	display: inline-block;
	font-size: 35px;
	color: #343434;
	font-weight: normal;
	text-decoration: none;
}

/* Top part of carousel */
.content_carousel {
	/*max-height: 600px;*/
	position: absolute;
	right: 0;
	top: 0;
	left: 0;
	bottom: 0;
	/*margin-top: 10px;*/
	/* align it in the center */
	/*max-width: 1000px;
	margin: 0 auto;*/
}

.content_carousel > header {
	padding-left: 251px;
	line-height: 50px;
	display: block;
}

.content_carousel header * {
	transition: 0s;
}

.content_carousel header section, 
.content_carousel header nav ul li,
.content_carousel header nav  {
	display: inline-block;
}

.content_carousel header section {	
	width: 250px;
	line-height: 30px;
}

.content_carousel section.search {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	background:#f8f8f8;
	border-top: 1px solid #bfbfbf;
}

.content_carousel section.search fieldset {
	width: 100%;
	height: 100%;
	text-align: center;
}

.content_carousel section.search fieldset legend {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.content_carousel section.search input {
	width: 90%;
	height: 30px;
	margin: 5%;
	border: 1px solid #bfbfbf;
	padding-left: 5px;
}

.content_carousel section.selectables > * {
	margin-right: -3px;
}

/* bottom part */
.content_carousel section.selectables {
	display: block;
	background: #f8f8f8;
	width: 100%;
	height: 100%;
	border-bottom: 1px solid #bfbfbf;
}

.content_carousel section.selectables > nav {
	display: inline-block;
	width: 250px;
	vertical-align: top;
	max-height: 100%;
	height: 100%;
	overflow: hidden;
	border-left: 1px solid #bfbfbf;
	padding-top: 55px;
}

.content_carousel section.selectables > nav ul {
	margin-top: 47px;
    overflow: hidden;
}

.content_carousel section.selectables > nav ul li a:not(.favourite){
	font-weight: bold;
	padding-left: 30px;
	display: block;
	padding-top: 16px;
	padding-bottom: 16px;
	color: #343434;
	text-decoration: none;
}

.content_carousel section.selectables > nav ul li a.favourite:focus:before,
.content_carousel section.selectables > nav ul li:hover a.favourite:before {
	opacity: 1;
	/* transition */
	-webkit-transition: .2s;
	-moz-transition: .2s;
	transition: .2s;
}

.content_carousel section.selectables > nav ul li a.favourite {
	width:30px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 0;
}

.content_carousel section.selectables > nav ul li a.favourite:before {
	font-size: 15pt;
	content: "\e190";
	color: #0071cf;
	display: inline-block;
	position: absolute;
	top: calc(50% - 11px); /* 50% minus the half of the height of the object */
	width: 100%;
	text-align: center;
	opacity: 0;
}

.content_carousel section.selectables > nav ul li a.favourite.selected:before {
	opacity: 1;
	content: "\e156";
}

.content_carousel section.selectables > nav ul li {
	position: relative;
		/* transition */
	-webkit-transition: .1s;
	-moz-transition: .1s;
	transition: .1s;
}

.content_carousel section.selectables > nav ul li a span {
    text-overflow: ellipsis;
    width: 100%;
    display: inline-block;
    overflow: hidden;
}


/* active element + hoverstates */

/* Focus */
.content_carousel section.selectables > nav ul li a:focus,
.content_carousel section.content .intro > header > div > a:focus,
.content_carousel.details section.content .description > nav > ul li > a:focus,
.content_carousel.details section.content .description > nav > ul li.active > a:focus {
	background: #0071cf;
}
/* Active */
.content_carousel section.selectables > nav ul li.active,
.content_carousel section.selectables > nav ul li:hover,
.content_carousel section.content .intro > header > div > a:hover,
.content_carousel.details section.content .description > nav > ul li > a:hover {
	background: #5a5a5a;
}

.content_carousel section.selectables > nav ul li a:focus,
.content_carousel section.selectables > nav ul li a:focus span,
.content_carousel section.selectables > nav ul li:hover a,
.content_carousel section.selectables > nav ul li:hover a span,
.content_carousel section.selectables > nav ul li a.favourite:focus,
.content_carousel section.selectables > nav ul li a.favourite:focus:before,
.content_carousel section.selectables > nav ul li.active a span,
.content_carousel section.selectables > nav ul li.active a,
.content_carousel section.content .intro > header > div > a:focus:before,
.content_carousel section.content .intro > header > div > a:hover:before,
.content_carousel section.content .intro > header > div > a:focus:after,
.content_carousel section.content .intro > header > div > a:hover:after,
.content_carousel.details section.content .description > nav > ul li > a:hover,
.content_carousel.details section.content .description > nav > ul li > a:focus,
.content_carousel.details section.content .description > nav > ul li > a:hover:before,
.content_carousel.details section.content .description > nav > ul li > a:focus:before,
.content_carousel.details section.content .description > nav > ul li.active > a:focus  {
	color: white;
	text-decoration: none;
}

.content_carousel section.selectables > nav ul li.active a:before {
	opacity: 1;
}

.content_carousel section.selectables > nav ul li:focus a.favourite:before,
.content_carousel section.selectables > nav ul li:hover a.favourite:before,
.content_carousel section.selectables > nav ul li.active a.favourite:before,
.content_carousel section.selectables > nav ul li.active a.favourite.selected:before {
	color: #dbce01;
}


.content_carousel section.selectables > nav > a {
	border-top: 1px solid #bfbfbf;
	border-bottom: 1px solid #bfbfbf;
	box-sizing: content-box;
	position: absolute;
	z-index: 2;
	cursor: pointer;
	
	display:block;
	width:100%;
	text-align: center;
	background: white;
	margin: 0;
	min-height: 45px;
	/*padding: 5px 0;*/
}

.content_carousel section.selectables > nav > a:active {
	background: #f8f8f8;
}

.content_carousel section.selectables > nav > a:before,
.content_carousel section.selectables > nav > a:after {
	text-decoration: none;
}

.content_carousel section.selectables > nav > a.previous:before {
	
	content: "\e154";
	/* rotate icon*/
   -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.content_carousel section.selectables > nav > a.next:before {
	content: "\e154";
	/* rotate icon*/
   -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.content_carousel section.selectables > nav > a.next {
	border-bottom: 0;
}

.content_carousel section.selectables > nav ul + a {
	bottom: 0;
}

.content_carousel section.selectables > nav {
	position: relative;
}

/* right part of content */
.content_carousel section.content {
	display: inline-block;
	width: calc(100% - 250px);
	position: relative;
	height: 100%;
	padding: 10px;
	border-right: 1px solid #bfbfbf;
	border-top: 1px solid #bfbfbf;
	border-left: 1px solid #bfbfbf;
	background: white;
}

.content_carousel section.content > article {
	position: absolute;
	bottom: 10px;
	left: 11px;/* counter the padding of the section*/
	z-index: 5;
	color: white;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	opacity: 0;
	padding: 0;
}


/* animation */

.content_carousel section.content > article.active,
.ambient_carousel li.active .imgreplacer {
	-webkit-animation: fader .5s;
	animation: fader .5s;
	opacity: 1;
}

.content_carousel section.content > article.active {
	z-index: 6;
}

.content_carousel section.content > article:not(.active) {
	display: none;
}

@-webkit-keyframes fader {
    from {opacity: 0.8;}
    to {opacity: 1;}
}

@keyframes fader {
    from {opacity: 0.8;}
    to {opacity: 1;}
}


.content_carousel section.content > article .imgreplacer,
.content_carousel section.content > article img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	position: absolute;
	z-index: -1;
}

.content_carousel section.content .intro {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	background: rgba(0,0,0, 0.5);
	padding: 15px;
}

.content_carousel section.content .intro > header {
	position: relative;
	background: none;
	width: 100%;
	height: 100%;
	border: 0;
}
.content_carousel section.content .intro > header * {
	display: initial;
}
.content_carousel section.content .intro > header p {
	display: block;
	color: white;
}

.content_carousel section.content .intro > header .handles button {
	display: none;
}

.content_carousel section.content .intro > header > * {
	display: block;
}

.content_carousel section.content .intro > header > h2 {
	font-size: 20pt;
	font-weight: bold;
	padding-bottom: 10px;
	padding-right: 145px; /* Keep the buttons in place please */
	line-height: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	color: white;
}

.content_carousel.details section.content .intro > header > h2 {
	white-space: nowrap;
	color: white;
}

.content_carousel section.content .intro > header > div {
	position: absolute;
	right: 0;
	top: 0;
}

.content_carousel section.content .intro > header > div > a {
	width: 40px;
	height: 40px;
	background: white;
	display: inline-block;
	margin-left: 15px;
	border: 1px solid #bfbfbf;
	text-align: center;
	text-decoration: none;
}

.content_carousel section.content .intro > header > div > a:active {
	background: #f8f8f8;
}

.content_carousel section.content .intro > header > div > a.showinfo {
	width: 80px;
	/* transition */
	-webkit-transition: .2s;
	-moz-transition: .2s;
	transition: .2s;
}

.content_carousel section.content .intro > header > div > a:before {
	padding-top: 2px;
}

.content_carousel section.content .intro > header > div > a.showinfo:before {
	content: "\e191";
}

.content_carousel section.content .intro > header > div > a.addfavourite:before {
	content: "\e189"
}

.content_carousel section.content .intro > header > div > a.showinfo:after {
	content: "\e154";
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

/* active/selected state */

.content_carousel section.content .intro > header > div > .selected:before,
.content_carousel section.content .intro > header > div > .selected {
	background: #0071cf;
	color: white;
	border-color: #3B8ED3;
}

.content_carousel.details section.content .intro > header > div > a.showinfo:after {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

/* Details view */

.content_carousel .description {
	display: none;
}

.content_carousel.details .description {
	display: block;
}

.content_carousel.details section.content .intro {
	position: static;
}

.content_carousel.details section.content .intro > header > p {
	display: none;
}

.content_carousel.details section.content .intro > header > h2 {
	padding-bottom: 0;
}

.content_carousel.details section.content .description {
	background: white;
	color: black;
	height: calc(100% - 70px);
}

.content_carousel.details section.content .description > nav {
	padding-top: 13px;
	line-height: 20px;
}

.content_carousel.details section.content .description > nav > ul li {
	display: inline-block;
}

.content_carousel.details section.content .description > nav > ul li.active > a {
	background: white;
	position: relative;
	text-decoration: none;
	/* color: inherit; */
}

.content_carousel.details section.content .description > nav > ul li.active > a:before {
	/* color: inherit; */
}

.content_carousel.details section.content .description > nav > ul li.active > a:after {
	display: block;
	content: "";
	height: 1px;
	background: white;
	position: absolute;
	bottom: -1px;
	z-index: 1;
	left: 0;
	right: 0;
}

.content_carousel.details section.content .description > nav > ul li > a {
	font-size: 10pt;
	display: block;
	font-weight: bold;
	padding: 13px 15px 10px 40px;
	position: relative;
	border: 1px solid #bfbfbf;
	margin-right: 10px;
	background: #f8f8f8;
	text-decoration: none;
}

.content_carousel.details section.content .description > nav > ul li > a:before {
	font-size: 20pt;
	content: "\e150";
	position: absolute;
	left: 7px;
	top: 13px;
}

.content_carousel.details section.content .description > nav > ul li.Tab_Info > a:before,
.content_carousel.details section.content .description > nav > ul li.Tab_Info_Ambtenaar > a:before {
	content: "\e150";
}

.content_carousel.details section.content .description > nav > ul li.Tab_Foto > a:before,
.content_carousel.details section.content .description > nav > ul li.Tab_Foto_Ambtenaar > a:before {
	content: "\e142";
}

.content_carousel.details section.content .description > nav > ul li.Tab_Video > a:before,
.content_carousel.details section.content .description > nav > ul li.Tab_Video_Ambtenaar > a:before {
	content: "\e176";
}

.content_carousel.details section.content .description > div {
	position: absolute;
	left: 0;
	top: 127px;
	bottom: 3px;
	right: 0;
	border: 1px solid #bfbfbf;
	overflow: auto;
	min-width: 200px;
	overflow-y: scroll;
}

.content_carousel .carousel-wrapper {
	height: 100%;
	min-height: 100%;
	background-color: rgba(0,0,0,1);
}

.content_carousel.details section.content .description > div > * {
	display: inline-block;
	vertical-align:top;
}

.content_carousel.details section.content .description > div > section {
	display: none;
}

.content_carousel.details section.content .description > div > section.active {
	width: 100%;
	height: 100%;
	position: relative;
	padding: 20px;
	display: inline-block;
}

.content_carousel.details section.content .description > div > section.Tab_Kaart {
	padding: 0;
}

.content_carousel.details section.content .description > div > section.movies h3 {
	display: none;
}

.content_carousel.details section.content .description > div > section.movies .moviewrapper {
	width: 100%;
	height: 100%;
	text-align: center;
	position: relative;
}

.content_carousel.details section.content .description > div > aside {
	width: 200px;
	padding: 20px 0 20px 20px;
}

.content_carousel.details section.content .description p,
.content_carousel.details section.content .description h3,
.content_carousel.details section.content .description h4 {
	font-size: 10pt;
	padding: 0;
	padding-bottom: 10px;
	padding-right: 10px;
	color: black;
}

.content_carousel .ambient_carousel nav  {
	top: 0;
	left: 0;
	right: 0;
	max-width: none;
	height: calc(100% - 40px);
}

.content_carousel .ambient_carousel nav > a {
	height: calc(100% - 40px);
}


.content_carousel .ambient_carousel .ambient-explain {
	height: 40px;
	bottom: 0;
}

.content_carousel .ambient_carousel .ambient-explain:focus {
	background:#0071cf;
	color: white;
}

.content_carousel.details section.content .ambient_carousel .ambient-explain p {
	color: white;
	height: 35px;
	padding: 0;
}	

/* text-information rows */

.content_carousel .row label {
	width: 150px;
	padding: 5px 10px 8px 10px
}

.content_carousel .row label + div {
	width: calc(100% - 161px);
}

/* ambient_carousel */

.ambient_carousel {
	position: absolute;
	height: 100%;
	width: 100%;
}

.content_carousel .ambient_carousel {
	position: relative;
	background-color: rgba(0,0,0,1);
}

.ambient_carousel ul li .imgreplacer,
.ambient_carousel ul li img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	position: absolute;
	z-index: 0;
}

.content_carousel .ambient_carousel ul li .imgreplacer,
.content_carousel .ambient_carousel ul li img {
	width: 100%;
	height: 100%;
	z-index: 0;
	max-width: calc(100% - 135px);
	left: calc((100% / 4) / 2);
}

.ambient_carousel nav {
    left: 0;
    max-width: none;
    width: 100%;
	height: 100%;
}

.ambient_carousel > ul li:not(.active) {
	display: none;
}


/*
		ambient header
*/

.ambient_carousel .ambient-explain {
	display: block;
	position: absolute;
	bottom: 0;
	height: 85px;
	width: 100%;
	right: 0;
	left: 0;
	z-index: 5;
	background: rgba(0,0,0, 0.5);
	padding: 0 15px 15px 15px;
	overflow: hidden;
}

.ambient_carousel .ambient-title {
	font-size: 20pt;
	font-weight: bold;
	color: white;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: normal;
}

.ambient_carousel .ambient-explain p {
	font-size: 10pt;
	color: white;
	padding: 0;
	overflow: hidden;
}

.ambient_carousel nav {
	position: absolute;
	z-index: 1;
}

.ambient_carousel nav > a {
	display: inline-block;
	vertical-align: top;
	width: 25%;
	height: calc(100% - 125px);
	cursor: pointer;
	/* transition */
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2 ease-in-out;
	transition: .2s ease-in-out;
}

.ambient_carousel.no-description nav > a {
	height: calc(100% - 40px);
}

.ambient_carousel nav > a:hover {
	background-color: rgba(255,255,255,0.3);
}

.ambient_carousel nav > a:hover:before {
	opacity: 1;
}

.ambient_carousel nav > a.next {
	position: absolute;
	right: 0;
}

.ambient_carousel nav > a:before {
	font-size: 70px;
	
	display: block;
	height: 70px;
	position: relative;
	top: calc(50% - 35px);
	text-align: center;
	
	opacity: 0;
	content: "\e154";
	color: rgba(255,255,255,0.5);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	/* transition */
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2 ease-in-out;
	transition: .2s ease-in-out;
}

.ambient_carousel nav > a.next:before {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}

.ambient_carousel nav:hover > a {
	opacity: 1;
}


.ambient_carousel nav > div {
	vertical-align: top;
	display: block;
	height: 40px;
	position: relative;
	font-size: 0;
}

.ambient_carousel nav ul {
	/*display: table;*/
	width: 100%;
	height: 100%;
	background: rgba(0,0,0, 0.5);
	padding: 0 5px;
}

.ambient_carousel nav ul li {
	display: inline-block;
	text-align: center;
	height: 100%;
}

.ambient_carousel nav ul li.active a:before {
	background: white;
}

.ambient_carousel nav ul li a:focus:before {
	background: #0071cf;
}

.ambient_carousel nav ul li a  {
	font-size: 0;
	margin: 10px 0 10px 10px;
	display: block;
}

.ambient_carousel nav ul li a:before {
	content: "";
	display: inline-block;
	border: 1px solid #bfbfbf;
	width: 20px;
	height: 20px;
	background: #414141;
	margin-top: calc(50% - 10px);
}



/*==============================================
	Content Carousel Header
	- Requires crazy selectors due to fieldset overrules
===============================================*/
#wrapper article div#column-1 fieldset.refactor.contentcaroussel_header {
	display: table;
	padding-bottom: 0;
}
#wrapper article div#column-1 fieldset.refactor.contentcaroussel_header legend {
	display: none;
}

#wrapper article div#column-1 fieldset.refactor.contentcaroussel_header .buttonwrapper {
	margin-left: 0;
    max-width: none;
	padding-bottom: 0;
}

#wrapper article div#column-1 fieldset.refactor.contentcaroussel_header .buttonwrapper > * {
	padding-right: 0;
}

#wrapper article div#column-1 fieldset.refactor.contentcaroussel_header .buttonwrapper > *:not(:last-child) > button {
	border-right: 0;
}

#wrapper article div#column-1 fieldset.refactor.contentcaroussel_header .buttonwrapper button {
	border-bottom: 0;
	padding: 20px;
    text-align: left;
}

#wrapper article div#column-1 fieldset.refactor.contentcaroussel_header .buttonwrapper button span {
	font-size: 12pt;
	font-weight: bold;
}

/*
	Tab Icons
*/

.contentcaroussel_header .trouwlocatie:before,
.contentcaroussel_header .trouwambtenaar:before,
.contentcaroussel_header .trouwdatum:before  {
	vertical-align: top;
	font-weight: normal;
	font-size: 35px;
	padding-right: 5px;
}

.contentcaroussel_header .trouwlocatie:before {
	content: "\e169";
}

.contentcaroussel_header .trouwambtenaar:before {
	content: "\e168";
}

.contentcaroussel_header .trouwdatum:before {
	content: "\e194";
}

/*
	Active States
*/

.contentcaroussel_header .trouwambtenaar.active,
.contentcaroussel_header .trouwambtenaar.active > span,
.contentcaroussel_header .trouwlocatie.active, 
.contentcaroussel_header .trouwlocatie.active > span,
.contentcaroussel_header .trouwdatum.active, 
.contentcaroussel_header .trouwdatum.active > span {
	background:	#0071cf;
	color: white;
	cursor: default;
}



/*==============================================
	Responsive Styling: Breakpoint 250 + 250px = 500
===============================================*/
@media (max-width:500px) {
	
/*
	Content Carousel
*/
	.carousel-wrapper.contentcaroussel {
		max-height: none;
		min-height: 0;
	}
	.content_carousel {
		position: static;
	}
	
	.content_carousel section.selectables > nav ul {
		margin: 0;
		max-height: 160px;
		overflow-y: auto;
		border-top: 1px solid #CCC;
	}

	.content_carousel section.selectables > nav {
		display: block;
		width: 100%;
		padding-top: 51px;
		border-right: 1px solid #CCC;
	}
	
	.content_carousel section.selectables > nav > a {
		display: none;
	}
	
	.content_carousel section.search input {
		margin: 10px;
	}
	
	.content_carousel section.content .intro > header > div {
		position: static;
		display: table;
		width: 100%;
		table-layout: fixed;
	}
	
	.content_carousel section.content {
		position: relative;
		width: 100%;
		padding: 0;
	}

	.content_carousel section.content > article {
		position: static;
		display: none;
		margin: 0;
		width: 100%;
		height: auto;
	}

	.content_carousel section.content > article.active {
		display: block;
	}
	
	.content_carousel section.content > article:not(.active) {
		display: none !important;
	}

	.content_carousel section.content > article .imgreplacer, 
	.content_carousel section.content > article img {
		position: static;
		width: 100%;
		min-height: 200px;
	}
	
	.content_carousel section.content .intro {
		position: static
	}

	.content_carousel section.content .intro > header > h2,
	.content_carousel.details section.content .intro > header > h2 {
		padding-right: 0;
	}
	
	.content_carousel section.content .intro > header > h2,
	.content_carousel.details section.content .intro > header > h2,
	.content_carousel section.content .intro > header > p,
	.content_carousel.details section.content .intro > header > p {
		display: none;
	}
	
	.content_carousel.details section.content .description > div {
		position: static;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
	}
	
	.content_carousel section.content .intro > header > div > a,
	.content_carousel section.content .intro > header > div > a.showinfo	{
		display: table-cell;
		vertical-align: top;
		width: auto;
		height: auto;
		margin: 0;
	}
	
	.content_carousel.details section.content .description > nav > ul li > a {
		border-bottom: 0;
	}
	.content_carousel.details section.content .description > nav > ul li:first-of-type > a {
		border-left: 0;
	}
	
	
/* 	Content_carousel Force: Scrollbar for webkit browsers */

	.refactor .content_carousel .items::-webkit-scrollbar {
		-webkit-appearance: none;
	}

	.refactor .content_carousel .items::-webkit-scrollbar:vertical {
		width: 12px;
	}

	.refactor .content_carousel .items::-webkit-scrollbar:horizontal {
		height: 12px;
	}

	.refactor .content_carousel .items::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, .5);
		border: 2px solid #F8F8F8;
	}

	.refactor .content_carousel .items::-webkit-scrollbar-track {
		border-radius: 10px;  
		background-color: transparent;
	}

	.refactor .content_carousel .items::-webkit-scrollbar-button {
		background-color: rgba(0,0,0,0.1);
		width: 4px;
	}
	
} /* end @media max-width 500px*/

/*==============================================
	Content Carousel Availability
	- Used in Marriage Intake page
===============================================*/

#wrapper article div#column-1 fieldset.refactor.contentcaroussel_availability {
	border: 1px solid #CCC;
	padding-bottom: 0;
}

#wrapper article div#column-1 fieldset.refactor.contentcaroussel_availability + fieldset {
	margin-top: 10px;
}

#wrapper article div#column-1 fieldset.refactor.contentcaroussel_availability > legend {
	display: none;
}



/* 
	Load gamifications.
*/
/*==============================================
	
	
	[GAMIFICATION.CSS]
	
	DESCRIPTION: Contains styling rules for all the civilian gamification
	processes. 
	
	
===============================================*/

/*==============================================
	Gamification Generic
===============================================*/

.refactor .gamification-0,
.refactor .gamification-1,
.refactor .gamification-2,
.refactor .gamification-3,
.refactor .gamification-4,
.refactor .gamification-5,
.refactor .gamification-6,
.refactor .gamification-7,
.refactor .gamification-8,
.refactor .gamification-9 {
	width: 100%;
	height: 285px;
	border: 1px solid #bcbcbc;
	background: white;
	margin-bottom: 20px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.refactor .gamification-0 {
	background-image: url('../../frontend-base/images/gamification/0.png');
}

.refactor .gamification-1 {
	background-image: url('../../frontend-base/images/gamification/1.png');
}

.refactor .gamification-2 {
	background-image: url('../../frontend-base/images/gamification/2.png');
}

.refactor .gamification-3 {
	background-image: url('../../frontend-base/images/gamification/3.png');
}

.refactor .gamification-4 {
	background-image: url('../../frontend-base/images/gamification/4.png');
}

.refactor .gamification-5 {
	background-image: url('../../frontend-base/images/gamification/5.png');
}

.refactor .gamification-6,
.refactor .gamification-7,
.refactor .gamification-8,
.refactor .gamification-9 {
	background-image: url('../../frontend-base/images/gamification/6.png');
	
}

/*==============================================
	Gamification Specific
===============================================*/

/* Geboorte */
.geboorte .gamification-1 {
	background-image: url('../images/gamification/geboorte/1.png');
}
.geboorte .gamification-2 {
	background-image: url('../images/gamification/geboorte/3.png');
}
.geboorte .gamification-3 {
	background-image: url('../images/gamification/geboorte/4.png');
}
.geboorte .gamification-4 {
	background-image: url('../images/gamification/geboorte/5.png');
}
.geboorte .gamification-5 {
	background-image: url('../images/gamification/geboorte/7.png');
}
/* Huwelijk */
.huwelijk .gamification-1 {
	background-image: url('../images/gamification/huwelijk/1.png');
}
.huwelijk .gamification-2 {
	background-image: url('../images/gamification/huwelijk/3.png');
}
.huwelijk .gamification-3 {
	background-image: url('../images/gamification/huwelijk/5.png');
}
.huwelijk .gamification-4 {
	background-image: url('../images/gamification/huwelijk/6.png');
}
.huwelijk .gamification-5 {
	background-image: url('../images/gamification/huwelijk/7.png');
}
/* Verhuizing */
.verhuizing .gamification-1 {
	background-image: url('../images/gamification/verhuizing/1.png');
}
.verhuizing .gamification-2 {
	background-image: url('../images/gamification/verhuizing/3.png');
}
.verhuizing .gamification-3 {
	background-image: url('../images/gamification/verhuizing/5.png');
}
.verhuizing .gamification-4 {
	background-image: url('../images/gamification/verhuizing/6.png');
}
.verhuizing .gamification-5 {
	background-image: url('../images/gamification/verhuizing/7.png');
}
/* Rijbewijs */
.rijbewijs .gamification-1 {
	background-image: url('../images/gamification/rijbewijs/1.png');
}
.rijbewijs .gamification-2 {
	background-image: url('../images/gamification/rijbewijs/3.png');
}
.rijbewijs .gamification-3 {
	background-image: url('../images/gamification/rijbewijs/5.png');
}
.rijbewijs .gamification-4 {
	background-image: url('../images/gamification/rijbewijs/6.png');
}
.rijbewijs .gamification-5 {
	background-image: url('../images/gamification/rijbewijs/7.png');
}
/* Reisdocument */
.reisdocument .gamification-1 {
	background-image: url('../images/gamification/reisdocument/1.png');
}
.reisdocument .gamification-2 {
	background-image: url('../images/gamification/reisdocument/2.png');
}
.reisdocument .gamification-3 {
	background-image: url('../images/gamification/reisdocument/4.png');
}
.reisdocument .gamification-4 {
	background-image: url('../images/gamification/reisdocument/5.png');
}
.reisdocument .gamification-5 {
	background-image: url('../images/gamification/reisdocument/7.png');
}
/* Overlijden */
.overlijden .gamification-1 {
	background-image: url('../images/gamification/overlijden/1.png');
}
.overlijden .gamification-2 {
	background-image: url('../images/gamification/overlijden/3.png');
}
.overlijden .gamification-3 {
	background-image: url('../images/gamification/overlijden/5.png');
}
.overlijden .gamification-4 {
	background-image: url('../images/gamification/overlijden/6.png');
}
.overlijden .gamification-5 {
	background-image: url('../images/gamification/overlijden/7.png');
}
/* Aanvraag stempas */
.aanvraagstempas .gamification-1 {
	background-image: url('../images/gamification/verkiezing/1.png');
}
.aanvraagstempas .gamification-2 {
	background-image: url('../images/gamification/verkiezing/3.png');
}
.aanvraagstempas .gamification-3 {
	background-image: url('../images/gamification/verkiezing/4.png');
}
.aanvraagstempas .gamification-4 {
	background-image: url('../images/gamification/verkiezing/5.png');
}
.aanvraagstempas .gamification-5 {
	background-image: url('../images/gamification/verkiezing/7.png');
}
/* 
	Wijziging Naamgebruik
	Verzoek Verstrekkingsbeperking
	Aanvraaguittreksel BRP
	Bewijs van in leven zijn
	Aanvraag afschrift Burgelijke stand
	Verklaring Omtrent Gedrag
*/

.verklaringomtrentgedrag .gamification-1,
.wijzigingnaamgebruik .gamification-1,
.verzoekverstrekkingsbeperking .gamification-1,
.bewijsvannederlanderschap .gamification-1,
.bewijsvaninlevenzijn .gamification-1,
.aanvraaguittrekselbrp .gamification-1,
.aanvraaguittrekselbs .gamification-1,
.aanvraagafschriftbs .gamification-1 {
	background-image: url('../images/gamification/verzoek/1.png');
}
.verklaringomtrentgedrag .gamification-2,
.wijzigingnaamgebruik .gamification-2,
.verzoekverstrekkingsbeperking .gamification-2,
.bewijsvannederlanderschap .gamification-2,
.bewijsvaninlevenzijn .gamification-2,
.aanvraaguittrekselbrp .gamification-2,
.aanvraaguittrekselbs .gamification-2,
.aanvraagafschriftbs .gamification-2 {
	background-image: url('../images/gamification/verzoek/2.png');
}
.verklaringomtrentgedrag .gamification-3,
.wijzigingnaamgebruik .gamification-3,
.verzoekverstrekkingsbeperking .gamification-3,
.bewijsvannederlanderschap .gamification-3,
.bewijsvaninlevenzijn .gamification-3,
.aanvraaguittrekselbrp .gamification-3,
.aanvraaguittrekselbs .gamification-3,
.aanvraagafschriftbs .gamification-3 {
	background-image: url('../images/gamification/verzoek/4.png');
}
.verklaringomtrentgedrag .gamification-4,
.wijzigingnaamgebruik .gamification-4,
.verzoekverstrekkingsbeperking .gamification-4,
.bewijsvannederlanderschap .gamification-4,
.aanvraaguittrekselbrp .gamification-4,
.aanvraaguittrekselbs .gamification-4,
.aanvraagafschriftbs .gamification-4 {
	background-image: url('../images/gamification/verzoek/5.png');
}
.bewijsvaninlevenzijn .gamification-4 {
	background-image: url('../images/gamification/verzoek/6.png');
}
.verklaringomtrentgedrag .gamification-5,
.wijzigingnaamgebruik .gamification-5,
.verzoekverstrekkingsbeperking .gamification-5,
.bewijsvannederlanderschap .gamification-5,
.bewijsvaninlevenzijn .gamification-5,
.aanvraaguittrekselbrp .gamification-5,
.aanvraaguittrekselbs .gamification-5,
.aanvraagafschriftbs .gamification-5 {
	background-image: url('../images/gamification/verzoek/7.png');
}



/* 
	Load oorkonde configuration.
*/
/*==============================================
	
	
	[OORKONDE.CSS]
	
	DESCRIPTION: Contains styling for oorkonde page
	
	
===============================================*/

#oorkondeCanvas.geb {
	background: rgb(175, 190, 93);
}
#oorkondeCanvas.geb p.municipality:before {
	content: "\e261";
}

#oorkondeCanvas.huwelijk {
	background: rgb(143, 93, 190);
}
#oorkondeCanvas.huwelijk p.municipality:before {
	content: "\e266";
}

#oorkondeCanvas.verhuizing {
	background: rgb(93, 190, 95);
}
#oorkondeCanvas.verhuizing p.municipality:before {
	content: "\e262";
}

#oorkondeCanvas.emigratie {
	background: rgb(93, 190, 95);
}
#oorkondeCanvas.emigratie p.municipality:before {
	content: "\e262";
}

#oorkondeCanvas.uitbrp {
	background: rgb(93, 95, 190);
}
#oorkondeCanvas.uitbrp p.municipality:before {
	content: "\e266";
}

/*
	Load proces specific css for intake page.
*/
/*==============================================
	
	
	[INTAKE.CSS]
	
	DESCRIPTION: Contains specific styling for the intake (first page) of a
	proces
	
	
===============================================*/

/*==============================================

	Intake page
	
===============================================*/

/*==============================================

	Intake Huwelijk
	
===============================================*/
.huwelijk .voorbereiding .timepicker-wrapper {
	border: 0;
}
/*==============================================

	Intake Geboorte
	
===============================================*/
/*
	Geboortebuttons
*/

.geboorte .voorbereiding .buttonwrapper {
	max-width: none;
    margin-left: 0px;
}

/*
	Buttons
*/
.geboorte button.buttonboy,
.geboorte button.buttongirl,
.geboorte button.buttontwin {
	min-height: 120px;
}

.geboorte button.buttonboy span,
.geboorte button.buttongirl span,
.geboorte button.buttontwin span {
	font-weight: bold;
}

.geboorte button.buttonboy:hover {
	background: rgba(93,95,190,1);
}
.geboorte button.buttongirl:hover {
	background: rgba(187,93,190,1);
}
.geboorte button.buttontwin:hover {
	background: rgba(93,190,134,1);
}

/* Icons */
.geboorte .buttongirl:before,
.geboorte .buttonboy:before,
.geboorte .buttontwin:before {
	content: "\e101";
	display: block;
    font-size: 60px;
    line-height: 70px;
}

.geboorte .buttongirl:before {
	content: "\e243";
}
.geboorte .buttonboy:before {
	content: "\e242";
	transform: rotate(45deg);
}
.geboorte .buttontwin:before {
	content: "\e261";
}

/* 
	Load responsive rules
*/
/*==============================================
	
	
	[RESPONSIVE.CSS]
	
	DESCRIPTION: Contains the adjustment rules for responsive styling 
	for several mobile resolutions.
	
	
===============================================*/


/*==============================================
	Responsive Styling: Desktops
===============================================*/

@media (max-width: 1350px) {
	.content_carousel .row label {
		padding-bottom: 5px;
		font-weight: bold;
	}
	.content_carousel .row label + div {
		padding-left: 0;
		padding-bottom: 10px;
	}
	.content_carousel.details section.content .description > nav > ul li {
		max-width: 25%;
	}
	.content_carousel.details section.content .description > nav > ul li > a {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
} /* end @media max-width 1350px*/


/*==============================================
	Responsive Styling: Desktops
===============================================*/

@media (max-width:1260px) {

#center > .refactor {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

} /* end @media max-width 1260px*/

/*==============================================
	Responsive Styling: Desktops
===============================================*/

@media (max-width: 1024px) {

/*
	Oorkonde Image
*/
#oorkondeCanvas {
	width: 100% !important; /* overrule inline styling */
	height: auto !important; /* overrule inline styling */
}
	
/*
	Carousel
*/

.content_carousel .ambient_carousel ul li .imgreplacer, 
.content_carousel .ambient_carousel ul li img, .ambient_carousel nav {
	left: 0;
	right: 0;
	max-width: none;
}

.content_carousel.details section.content .description > nav > ul li > a {
	padding-right: 5px;
}

.content_carousel.details section.content .description > nav > ul li > a > span:last-of-type {
	overflow: hidden;
    width: 1px;
    display: block;
    text-indent: 100px;
	white-space: nowrap;
}

} /* end @media max-width 1024px */

/*==============================================
	Responsive Styling: Tablets & Mobiles-BigScreen
===============================================*/

@media (max-width:800px) {
	
@-moz-document url-prefix() { /* Hack for displaying table's within fieldsets and enabling overflow */
    fieldset {
        display: table-cell !important;
    }
}

#center > .refactor {
	position: static;
}

.refactor #wrapper {
	padding-right: 0;
}

.refactor form,
.refactor header:not(.popupheader) {
	border-left: 0;
	border-right: 0;
}

#wrapper article fieldset.form_navigation {
	position: static;
	max-width: none;
	width: 100%;
}

.refactor aside {
	position: static;
	max-width: none;
	width: 100%;
	padding: 20px 10px;
	border-left: 0;
}
/*
	Buttons (are all presented as big buttons for easy touch-interaction
*/

fieldset.refactor > button {
	margin-left: 0;
	width: 100%;
	padding: 20px;
}

.refactor form article #column-1 {
	padding-bottom: 0;
}

/*
	Pagetitle
*/

.refactor .topnavigation .pagetitle:before {
	display: none;
}

/* 
	Table
*/
.refactor .table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; /* forces scrollbar on iOS */
	max-width: none;
}

.refactor .table-wrapper table {
	white-space: nowrap;
	width: 100%;
}

/* 	Table-wrapper Force: Scrollbar for webkit browsers */

.refactor .table-wrapper::-webkit-scrollbar {
    -webkit-appearance: none;
}

.refactor .table-wrapper::-webkit-scrollbar:vertical {
    width: 12px;
}

.refactor .table-wrapper::-webkit-scrollbar:horizontal {
    height: 12px;
}

.refactor .table-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border: 2px solid #ffffff;
}

.refactor .table-wrapper::-webkit-scrollbar-track {
    border-radius: 10px;  
	background-color: transparent;
}

.refactor .table-wrapper::-webkit-scrollbar-button {
	background-color: rgba(0,0,0,0.1);
    width: 4px;
}

/* Table-wrapper overlay */

.table-wrapper-overlay {
	position: relative;
}

.table-wrapper-overlay:before,
.table-wrapper-overlay:after {
	pointer-events: none;
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	width: 21px;
	z-index: 1;
}

.table-wrapper-overlay:before {
	left: 0;
    border-left: 1px solid white;
	background: rgba(255,255,255,1);
	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}

.table-wrapper-overlay:after {
	right: 0;
    border-right: 1px solid white;
	background: rgba(255,255,255,0);
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}

/* 
	Gamification 
*/
.gamification-0,
.gamification-1,
.gamification-2,
.gamification-3,
.gamification-4,
.gamification-5,
.gamification-6,
.gamification-7,
.gamification-8,
.gamification-9 {
	display: none;
}

/* 
	Carousel 
*/
.refactor #column-1 > .carousel-wrapper {
	margin-top: 0;
	margin-bottom: 10px;
}

/*
	Form Navigation
*/

.refactor .form_navigation button, 
.form_navigation button {
	opacity: 1;
}

/*
	Article
*/

.refactor form article {
	padding: 0 10px 20px 10px;
}

/*
	Aside
*/

.refactor aside button,
.refactor aside a.buttondisplay {
	padding: 20px 20px 20px 40px;
}

/* 
	Breadcrumb 
*/

.refactor .sidemenu {
	padding: 20px 10px 10px 10px;
}

.refactor .sidemenu ul,
.refactor .sidemenu ul li {
	display: block;
}

.refactor .sidemenu ul li a:after,
.refactor .sidemenu ul li span:after{
	display: none;
}

/* Arrow right*/
.refactor .sidemenu ul li > a:before,
.refactor .sidemenu ul li > span:before {
    left: 22px;
    top: 20px;
    border-right: 4px solid #CCC;
    border-bottom: 4px solid #CCC;
    width: 15px;
    height: 16px;
}

/* Cube */
.refactor .sidemenu ul li:last-child > a:before,
.refactor .sidemenu ul li:last-child > span:before {
    display: block;
    width: 14px;
    height: 14px;
    top: 22px;
    transform: rotate(0deg) translateX(-1px);
    border: 0px solid #CCC;
    background-color: #CCC;
}

.refactor .sidemenu ul li {
	border-style: solid;
    border-width: 0 1px 1px 1px;
    border-color: rgba(0,0,0,0.2);
}

.refactor .sidemenu ul li:first-of-type {
	border-top: 1px solid rgba(0,0,0,0.2);
}

.refactor .sidemenu ul li a span:before {
	padding-right: 10px;
}

.sidemenu ul li > span,
.sidemenu ul li > a {
	padding: 4px;
}

.refactor .sidemenu ul li a, 
.refactor .sidemenu ul li > span {
	padding: 20px 20px 20px 60px;
}

.refactor .sidemenu ul li a > span, 
.refactor .sidemenu ul li span > span {
	text-align: left;
}

/*
	Responsive Arrows
*/

/* Active arrow-right */
.refactor .sidemenu ul li.active > a:before, 
.refactor .sidemenu ul li.active > span:before {
	border-color: white;
	transform: rotate(-45deg) translateX(-4px);
}

/* Active arrow-right last menu item*/
.refactor .sidemenu ul li.active:last-child > a:before, 
.refactor .sidemenu ul li.active:last-child > span:before {
	background-color: transparent;
    border-right: 4px solid white;
    border-bottom: 4px solid white;
}

/* Succes + Error + Warning arrow*/
.refactor .sidemenu ul li.oordeel-Goed > a:before, 
.refactor .sidemenu ul li.oordeel-Goed > span:before,
.refactor .sidemenu ul li.oordeel-Waarschuwing > a:before, 
.refactor .sidemenu ul li.oordeel-Waarschuwing > span:before,
.refactor .sidemenu ul li.oordeel-Fout > a:before, 
.refactor .sidemenu ul li.oordeel-Fout > span:before {
	border-color: white;
}

.refactor .sidemenu ul li.oordeel-.active,
.refactor .sidemenu ul li.oordeel-Goed,
.refactor .sidemenu ul li.oordeel-Fout,
.refactor .sidemenu ul li.oordeel-Waarschuwing {
	display: block;
}

/*
	State indicators
*/

.refactor .sidemenu ul li.oordeel-Goed a span:before,
.refactor .sidemenu ul li.oordeel-Fout a span:before,
.refactor .sidemenu ul li.oordeel-Waarschuwing a span:before {
	display: inline-block;
    position: absolute;
    right: 0;
	top: calc(50% - 12px);
    font-size: 25px;
}

/* Goed */
.refactor .sidemenu ul li.oordeel-Goed a span:before {
	content: "\e102";
}

/* Fout */
.refactor .sidemenu ul li.oordeel-Fout a span:before {
	 content: "\e101";
}

/* Waarschuwing */
.refactor .sidemenu ul li.oordeel-Waarschuwing a span:before {
	 content: "\e112";
}

/*
	Bread-crumb Out-of-screen
*/

.sidemenu-toggle {
	display: block;
    width: 55px;
}

.sidemenu-toggle:before {
	display: inline-block;
	vertical-align: middle;
	content: "\e153";
    font-size: 40px;
}

.sidemenu-toggle span {
	display: inline-block;
	vertical-align: middle;
}

/* Transition */

.refactor .sidemenu {
	padding-top: 0;
}

.refactor .sidemenu ul {
	overflow: hidden;
	transition: max-height;
	transition-duration: 0.33s;
	transition-timing-function: ease-in-out;
	/*max-height: 100vh;*/
	max-height: 0;
	padding-top: 10px;
}

.refactor .sidemenu.out-of-screen ul {
	overflow: hidden;
	/*max-height: 0px;*/
	max-height: 100vh;
}

/* 
	Labels 
*/
.refactor label {
	width: auto;
}

.refactor label span {
	
}


/*
	Booleans
*/

.refactor .answer .boolean span {

}

/* 
	Radiobutton Vertical
*/

.refactor .radio {
	width: 100%;
	padding-right: 0;
}

.refactor input[type=radio]+label {
	background: white;
	padding-left: 30px;
}

.refactor input[type=radio]:checked+label {
	background-color: rgba(8, 167, 1, 0.2);
}

.refactor .boolean-true input[type=radio]:checked+label,
.refactor .boolean-false input[type=radio]:checked+label {
	background-color: white;
}

/* 
	Radiobutton Horizontal
*/

.refactor .vertical .radio {
	border: 1px solid #CCC;
}

.refactor .vertical .radio li {
	display: block;
}

.refactor .vertical .radio li:not(:nth-child(2)) {
	margin-left: 0;
	padding-left: 0;
}

.refactor .vertical .radio li:not(:nth-child(2)):before {
	display: none;
}

.refactor .vertical .radio li label {
	border: 0;
}

/* 
	Filedownload 
*/

.refactor .filedownloadswrapper {
	padding-left: 10px;
}

/* 
	Fileupload 
*/

.refactor .fileupload > div {
	width: calc(100% - 10px);
}

/*
	Buttonwrapper
*/

.refactor .buttonwrapper {
	margin-left: 10px;
	margin-right: 0;
    width: calc(100% - 20px);
	display: block;
}

.refactor .buttonwrapper > * {
	display: block;
}

.refactor .buttonwrapper  > *:not(:last-child) {
	padding-right: 0;
}

/*
	facebook / twitterbutton
*/

.refactor.oorkonde .icon-facebook span:before,
.refactor.oorkonde .icon-twitter span:before {
    display: block;
    margin-bottom: 5px;
}

/* 
	Popups 
*/

.ui-dialog {
    right: 10%!important;
    left: 10% !important;
    width: 80% !important;
}

.ui-datepicker {
    right: 10%!important;
    left: 10% !important;
	width: 80% !important;
    max-width: none!important;
}

/*
	DebugBar
*/

.devtools {
	display: none;
}

/*==============================================
	Voorbereiding page
===============================================*/

.refactor.voorbereiding aside:empty {
	display: none;
}

.refactor.voorbereiding form article {
	margin-top: 10px;
}

/*==============================================
	Oorkonde page
===============================================*/

.refactor.oorkonde aside .file {
	padding: 20px 20px 20px 40px;
}

.refactor.oorkonde aside .file:before {
	line-height: 60px;
}

/*==============================================
	Huwelijk
===============================================*/

#wrapper article div#column-1 fieldset.refactor.contentcaroussel_header .buttonwrapper {
	width: 100%;
}

#wrapper article div#column-1 fieldset.refactor.contentcaroussel_header .buttonwrapper > * > button {
	border-right: 0;
}

/*==============================================
	Geboorte
===============================================*/


} /* end @media max-width 800px*/


/*==============================================
	Responsive Styling: Mobiles-SmallScreen
===============================================*/

@media (max-width:500px) {

/*
	Form Navigation
*/
.form_navigation > div,
.form_navigation > div > div {
	display: block;
}

.form_navigation > div > div:not(:last-of-type) {
	margin-bottom: 5px;
}

/*
	Topnavigation with accesability enabled
*/

.accesability-enabled {
	display: block;
}

.accesability-enabled > .sidemenu-toggle,
.accesability-enabled > .pagetitle {
	display: inline-block;
	width: auto;
}

.accesability-enabled > .sidemenu-toggle {
	padding-right: 20px;
}

.accesability-enabled > .accesability-wrapper {
	padding-top: 10px;
	display: block;
	text-align: left;
}

.accesability-enabled > .accesability-wrapper > * {
	display: inline-block;
	width: auto;
}

.accesability-wrapper > div:not(:last-of-type) {
	margin-left: 5px;
}


} /* end @media max-width 500px*/


/*==============================================
	Responsive Styling: Mobiles-SmallScreen
===============================================*/

@media (max-width:320px) {
	
/*
	Popup : Confirm/Cancel proces
*/

.ui-dialog .ui-dialog-content {
	overflow: auto;
	height: auto !important; /* Overrule for inline calculations*/
}

/*
	Pagetitle & Accesability
*/

.refactor .topnavigation .pagetitle:before {
	display: none;
}

.refactor .topnavigation {
	padding-left: 10px;
	padding-right: 10px;
}

/*
	Stickytable
*/

/* 	Stickytable-wrapper Force: Scrollbar for webkit browsers */

.refactor .stickytable-wrapper::-webkit-scrollbar {
    -webkit-appearance: none;
}

.refactor .stickytable-wrapper::-webkit-scrollbar:vertical {
    width: 12px;
}

.refactor .stickytable-wrapper::-webkit-scrollbar:horizontal {
    height: 12px;
}

.refactor .stickytable-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border: 2px solid #ffffff;
}

.refactor .stickytable-wrapper::-webkit-scrollbar-track {
    border-radius: 10px;  
	background-color: transparent;
}

.refactor .stickytable-wrapper::-webkit-scrollbar-button {
	background-color: rgba(0,0,0,0.1);
    width: 4px;
}


/*
	Datepicker
*/

.pickerheader-nav > * {
	display: block;
}

/*
	Tables
*/

.table-wrapper-overlay:before,
.table-wrapper-overlay:after {
	width: 41px;
}

}	/* end @media max-width 320px*/

/* 
	Load accesability rules (overrules everything)
*/
/*==============================================
	
	
	[ACCESABILITY.CSS]
	
	DESCRIPTION: Contains the styling for several states of accesability.
	This means zoom-levels and color/contrast-levels.
	
	REMEMBER: This is not required by any municipality or laws!
	
	
===============================================*/


/*==============================================
	Accesability
===============================================*/

.accesability-enabled {
    display: table;
    width: 100%;
}

.accesability-enabled > * {
    display: table-cell;
    vertical-align: middle;
}

.accesability-wrapper {
	text-align: right;
	white-space: nowrap;
}

.accesability-wrapper > *:not(:last-of-type) {
    margin-right: 5px;
}

/* 
	Module 
*/
.accesability {
    border: 1px solid #ccc;
    vertical-align: middle;
    background: white;
	white-space: nowrap;
    padding: 2px 5px;
	display: inline-block;
}

.accesability > a {
	vertical-align: middle;
	display: inline-block;
	text-decoration: none;
}

.accesability > a:before {
	font-weight: bold;
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
}

.accesability > a.decrease:before {
	content: '\e232';
}

.accesability > a.increase:before {
	content: '\e231';
}

.accesability:before {
	display: inline-block;
	vertical-align: middle;
    content: '\e101';
    font-size: 20px;
	padding-right: 5px;
}

/* text-size */

.accesability.textsize:before {
	content: '\e128';
}

/* contrast */

.accesability.contrast:before {
	content: '\e175';
}

/*
	Hiders
*/
.contrast-0 .accesability.contrast > a.decrease:before,
.textsize-0 .accesability.textsize > a.decrease:before,
.contrast-2 .accesability.contrast > a.increase:before,
.textsize-4 .accesability.textsize > a.increase:before {
	opacity: 0.1;
}

/*==============================================

	Text-size
	
===============================================*/

/* 
	Textsize General Overrule
*/
.refactor.public.textsize-1 .prefix,
.refactor.public.textsize-2 .prefix,
.refactor.public.textsize-3 .prefix,
.refactor.public.textsize-4 .prefix {
	position: static;
}

/* 
	Datepicker / Timepicker  General Overrule
*/
.refactor.public.textsize-1 .datepicker-wrapper th > span,
.refactor.public.textsize-1 .timepicker-wrapper th > span,
.refactor.public.textsize-1 .datepicker-wrapper td button > span,
.refactor.public.textsize-1 .timepicker-wrapper td button > span,
.refactor.public.textsize-2 .datepicker-wrapper th > span,
.refactor.public.textsize-2 .timepicker-wrapper th > span,
.refactor.public.textsize-2 .datepicker-wrapper td button > span,
.refactor.public.textsize-2 .timepicker-wrapper td button > span,
.refactor.public.textsize-3 .datepicker-wrapper th > span,
.refactor.public.textsize-3 .timepicker-wrapper th > span,
.refactor.public.textsize-3 .datepicker-wrapper td button > span,
.refactor.public.textsize-3 .timepicker-wrapper td button > span,
.refactor.public.textsize-4 .datepicker-wrapper th > span,
.refactor.public.textsize-4 .timepicker-wrapper th > span,
.refactor.public.textsize-4 .datepicker-wrapper td button > span,
.refactor.public.textsize-4 .timepicker-wrapper td button > span {
	overflow: hidden;
    word-break: normal;
}


/*
	Text-size 1
*/

/* Normal Text*/
.refactor.public.textsize-1 p,
.refactor.public.textsize-1 legend > span,
.refactor.public.textsize-1 legend > span > span,
.refactor.public.textsize-1 button,
.refactor.public.textsize-1 button > span,
.refactor.public.textsize-1 label > span,
.refactor.public.textsize-1 a > span,
.refactor.public.textsize-1 li > span,
.refactor.public.textsize-1 li > span > span,
.refactor.public.textsize-1 th > span,
.refactor.public.textsize-1 td > div > span,
.refactor.public.textsize-1 td > a,
.refactor.public.textsize-1 tfoot td,
.refactor.public.textsize-1 tfoot td > span,
.refactor.public.textsize-1 .radio li > label,
.refactor.public.textsize-1 .readonly > .answer > span,
.refactor.public.textsize-1 .readonly > .answer.has-explain > .inputsection > span,
.refactor.public.textsize-1 input,
.refactor.public.textsize-1 textarea,
.refactor.public.textsize-1 .ui-menu-item > a {
	font-size: 12pt;
	line-height: normal;
	word-break: break-all; /* firefox doesnt know break-word so use break-all instead */
	word-break: break-word;
}
/* Comboboxbuttons*/
.refactor.public.textsize-1 button {
	max-height: none;
}
/* Titles */
.refactor.public.textsize-1 .pagetitle > span {
	font-size: 18pt;
	line-height: normal;
}
/* Datepicker button */
.refactor.public.textsize-1 .datefield-wrapper .date-picker-button:before {
    height: 33px;
    line-height: 33px;
}
/* Explain */
.refactor.public.textsize-1 .explain {
	height: 33px;
    line-height: 33px;
}
.refactor.public.textsize-1 .boolean-false + .explain {
	height: 35px;
    line-height: 34px;
}

/*
	Text-size 2
*/

/* Normal Text*/
.refactor.public.textsize-2 p,
.refactor.public.textsize-2 legend > span,
.refactor.public.textsize-2 legend > span > span,
.refactor.public.textsize-2 button,
.refactor.public.textsize-2 button > span,
.refactor.public.textsize-2 label > span,
.refactor.public.textsize-2 a > span,
.refactor.public.textsize-2 li > span,
.refactor.public.textsize-2 li > span > span,
.refactor.public.textsize-2 th > span,
.refactor.public.textsize-2 td > div > span,
.refactor.public.textsize-2 td > a,
.refactor.public.textsize-2 tfoot td,
.refactor.public.textsize-2 tfoot td > span,
.refactor.public.textsize-2 .radio li > label,
.refactor.public.textsize-2 .readonly > .answer > span,
.refactor.public.textsize-2 .readonly > .answer.has-explain > .inputsection > span,
.refactor.public.textsize-2 input,
.refactor.public.textsize-2 textarea,
.refactor.public.textsize-2 .ui-menu-item > a {
	font-size: 14pt;
	line-height: normal;
	word-break: break-all; /* firefox doesnt know break-word so use break-all instead */
	word-break: break-word;
}
/* Comboboxbuttons*/
.refactor.public.textsize-2 button {
	max-height: none;
}
/* Titles */
.refactor.public.textsize-2 .pagetitle > span {
	font-size: 20pt;
	line-height: normal;
}
/* Datepicker button */
.refactor.public.textsize-2 .datefield-wrapper .date-picker-button:before {
	height: 37px;
    line-height: 37px;
}
/* Explain */
.refactor.public.textsize-2 .explain {
	height: 37px;
    line-height: 37px;
}
.refactor.public.textsize-2 .boolean-false + .explain {
	height: 39px;
    line-height: 38px;
}

/*
	Text-size 3
*/

/* Normal Text*/
.refactor.public.textsize-3 p,
.refactor.public.textsize-3 legend > span,
.refactor.public.textsize-3 legend > span > span,
.refactor.public.textsize-3 button,
.refactor.public.textsize-3 button > span,
.refactor.public.textsize-3 label > span,
.refactor.public.textsize-3 a > span,
.refactor.public.textsize-3 li > span,
.refactor.public.textsize-3 li > span > span,
.refactor.public.textsize-3 th > span,
.refactor.public.textsize-3 td > div > span,
.refactor.public.textsize-3 td > a,
.refactor.public.textsize-3 tfoot td,
.refactor.public.textsize-3 tfoot td > span,
.refactor.public.textsize-3 .radio li > label,
.refactor.public.textsize-3 .readonly > .answer > span,
.refactor.public.textsize-3 .readonly > .answer.has-explain > .inputsection > span,
.refactor.public.textsize-3 input,
.refactor.public.textsize-3 textarea,
.refactor.public.textsize-3 .ui-menu-item > a {
	font-size: 16pt;
	line-height: normal;
	word-break: break-all; /* firefox doesnt know break-word so use break-all instead */
	word-break: break-word;
}
/* Comboboxbuttons*/
.refactor.public.textsize-3 button {
	max-height: none;
}
/* Titles */
.refactor.public.textsize-3 .pagetitle > span {
	font-size: 22pt;
	line-height: normal;
}
/* Datepicker button */
.refactor.public.textsize-3 .datefield-wrapper .date-picker-button:before {
	height: 40px;
    line-height: 40px;
}
/* Explain */
.refactor.public.textsize-3 .explain {
	height: 40px;
    line-height: 40px;
}
.refactor.public.textsize-3 .boolean-false + .explain {
    height: 42px;
    line-height: 41px;
}

/*
	Text-size 4
*/

/* Normal Text*/
.refactor.public.textsize-4 p,
.refactor.public.textsize-4 legend > span,
.refactor.public.textsize-4 legend > span > span,
.refactor.public.textsize-4 button,
.refactor.public.textsize-4 button > span,
.refactor.public.textsize-4 label > span,
.refactor.public.textsize-4 a > span,
.refactor.public.textsize-4 li > span,
.refactor.public.textsize-4 li > span > span,
.refactor.public.textsize-4 th > span,
.refactor.public.textsize-4 td > div > span,
.refactor.public.textsize-4 td > a,
.refactor.public.textsize-4 tfoot td,
.refactor.public.textsize-4 tfoot td > span,
.refactor.public.textsize-4 .radio li > label,
.refactor.public.textsize-4 .readonly > .answer > span,
.refactor.public.textsize-4 .readonly > .answer.has-explain > .inputsection > span,
.refactor.public.textsize-4 input,
.refactor.public.textsize-4 textarea,
.refactor.public.textsize-4 .ui-menu-item > a {
	font-size: 18pt;
	line-height: normal;
	word-break: break-all; /* firefox doesnt know break-word so use break-all instead */
	word-break: break-word;
}
/* Comboboxbuttons*/
.refactor.public.textsize-4 button {
	max-height: none;
}
/* Titles */
.refactor.public.textsize-4 .pagetitle > span {
	font-size: 24pt;
	line-height: normal;
}
/* Datepicker button */
.refactor.public.textsize-4 .datefield-wrapper .date-picker-button:before {
	height: 44px;
    line-height: 44px;
}
/* Explain */
.refactor.public.textsize-4 .explain {
	height: 44px;
    line-height: 44px;
}
.refactor.public.textsize-4 .boolean-false + .explain {
	height: 46px;
    line-height: 45px;
}

/*==============================================

	Contrast 1
	
===============================================*/
/*
	General Overrule
*/
.refactor.public.contrast-1 *,
.refactor.public.contrast-1 *:before,
.refactor.public.contrast-1 *:after {
	color: black !important;
	background-color: white !important;
	border-color: black !important;
	transition: none !important;
	animation: none !important;
}

body.refactor.public.contrast-1,
body.refactor.public.contrast-1 #center {
	background: grey !important;
}


/*
	Carousel Overrule
*/
.refactor.public.contrast-1 .ambient_carousel nav,
.refactor.public.contrast-1 .ambient_carousel nav > a,
.refactor.public.contrast-1 .ambient_carousel nav > a:before {
	background-color: transparent !important;
}

/*
	Timepicker overrule
*/

.refactor.public.contrast-1 .timepicker-wrapper td {
	background: black !important;
}

/*
	Opacity Overrule
*/

.refactor.public.contrast-1 .file:after,
.refactor.public.contrast-1 .form_navigation button {
	opacity: 1 !important;
}

/*
	Checkbox
	Carousel Active
*/

.refactor.public.contrast-1 input[type=radio]:checked+label:before,
.refactor.public.contrast-1 .ambient_carousel nav ul li.active a:before {
	background: black !important;
}

/* 
	Breadcrumb 
*/
.refactor.public.contrast-1 .sidemenu ul li :before,
.refactor.public.contrast-1 .sidemenu ul li :after {
	border-color: white !important;
}
.refactor.public.contrast-1 .sidemenu ul li a:after, 
.refactor.public.contrast-1 .sidemenu ul li > span:after {
	background-color: transparent!important;
}

.refactor.public.contrast-1 .sidemenu ul li :before,
.refactor.public.contrast-1 .sidemenu ul li :after,
.refactor.public.contrast-1 .sidemenu ul li > a > span,
.refactor.public.contrast-1 .sidemenu ul li > span > span {
	background-color: inherit !important;
}
/* 
	Breadcrumb States 
*/

.refactor.public.contrast-1 .sidemenu ul li.oordeel-Goed a > span,
.refactor.public.contrast-1 .sidemenu ul li.oordeel-Fout a > span,
.refactor.public.contrast-1 .sidemenu ul li.active a > span {
	color: white!important;
}

.refactor.public.contrast-1 .sidemenu ul li.active a {
	background-color: #005193 !important;
}
.refactor.public.contrast-1 .sidemenu ul li.oordeel-Goed a {
	background-color: #044a02 !important;
}
.refactor.public.contrast-1 .sidemenu ul li.oordeel-Fout a {
	background-color: #9c0101 !important;
}
.refactor.public.contrast-1 .sidemenu ul li.oordeel-Waarschuwing a {
	background-color: #dbce01 !important;
}
.refactor.public.contrast-1 .sidemenu ul li.oordeel-Waarschuwing a > span {
	color: black!important;
}
/*
	Error states
*/

.refactor.public.contrast-1 .error-message,
.refactor.public.contrast-1 .error-message p,
.refactor.public.contrast-1 .error-message ul,
/* Communication Error */
.refactor.public.contrast-1 .notificationDiv .contentDiv:before {
	background: #9c0101 !important;
	color: white !important;
}
.refactor.public.contrast-1 .notificationDiv .contentDiv:before {
	color: white !important;
}

/* 
	Justification States 
*/

/* Error */
.refactor.public.contrast-1 .justification ul li.error{
	border-color: #9c0101 !important;
}
.refactor.public.contrast-1 .justification ul li.error:before {
	background: #9c0101 !important;
}

/* Warning */
.refactor.public.contrast-1 .justification ul li.warning {
	border-color: #dbce01 !important;
}
.refactor.public.contrast-1 .justification ul li.warning:before {
	background: #dbce01 !important;
}
/* Info */
.refactor.public.contrast-1 .justification ul li.infoMessage {
	border-color: #005193 !important;
}
.refactor.public.contrast-1 .justification ul li.infoMessage:before {
	background: #005193 !important;
}

/* Succes */
.refactor.public.contrast-1 .justification ul li.succes,
.refactor.public.contrast-1 .justification ul li.accepted {
	border-color: #044a02 !important;
}
.refactor.public.contrast-1 .justification ul li.succes:before,
.refactor.public.contrast-1 .justification ul li.accepted:before {
	background: #044a02 !important;
}

/*
	Form navigation
*/

.refactor.public.contrast-1 .form_navigation button.buttongreen,
.refactor.public.contrast-1 .form_navigation button.buttongreen * {
	background: #044a02 !important;
	color: white !important;
}

/*
	General Overrules
*/

/* Overrule table */
.refactor.public.contrast-1 table thead th:first-of-type,
/* Overrule input delete-button*/
.refactor.public.contrast-1 .ui-combobox button.autocomplete-clear-button {
	border-color: transparent !important;
}

/* Overrule DropdownArrow */
.refactor .ui-combobox button.ui-combobox-toggle:before {
	border-left-color: transparent!important;
	border-right-color: transparent!important;
}

/* Overrule textarea-info / Inline Icon*/
.refactor.public.contrast-1 .explain:before,
.refactor.public.contrast-1 .inlineicon:before {
	background-color: transparent !important;
}

/*==============================================

	Contrast 2
	
===============================================*/
/*
	General Overrule
*/
.refactor.public.contrast-2 *,
.refactor.public.contrast-2 *:before,
.refactor.public.contrast-2 *:after {
	color: white !important;
	background-color: black !important;
	border-color: white !important;
	transition: none !important;
	animation: none !important;
}

body.refactor.public.contrast-2,
body.refactor.public.contrast-2 #center {
	background: grey !important;
}

/*
	Carousel Overrule
*/
.refactor.public.contrast-2 .ambient_carousel nav,
.refactor.public.contrast-2 .ambient_carousel nav > a,
.refactor.public.contrast-2 .ambient_carousel nav > a:before {
	background-color: transparent !important;
}

/*
	Timepicker overrule
*/

.refactor.public.contrast-2 .timepicker-wrapper td {
	background: white !important;
}

/*
	Opacity Overrule
*/

.refactor.public.contrast-2 .file:after,
.refactor.public.contrast-2 .form_navigation button {
	opacity: 1 !important;
}

/*
	Checkbox
	Carousel Active
*/

.refactor.public.contrast-2 input[type=radio]:checked+label:before,
.refactor.public.contrast-2 .ambient_carousel nav ul li.active a:before {
	background: white !important;
}

/* 
	Breadcrumb 
*/
.refactor.public.contrast-2 .sidemenu ul li :before,
.refactor.public.contrast-2 .sidemenu ul li :after {
	border-color: black !important;
}
.refactor.public.contrast-2 .sidemenu ul li a:after, 
.refactor.public.contrast-2 .sidemenu ul li > span:after {
	background-color: transparent!important;
}

.refactor.public.contrast-2 .sidemenu ul li :before,
.refactor.public.contrast-2 .sidemenu ul li :after,
.refactor.public.contrast-2 .sidemenu ul li > a > span,
.refactor.public.contrast-2 .sidemenu ul li > span > span {
	background-color: inherit !important;
}
/* 
	Breadcrumb States 
*/
.refactor.public.contrast-2 .sidemenu ul li.active a {
	background-color: #005193 !important;
}
.refactor.public.contrast-2 .sidemenu ul li.oordeel-Goed a {
	background-color: #044a02 !important;
}
.refactor.public.contrast-2 .sidemenu ul li.oordeel-Fout a {
	background-color: #9c0101 !important;
}
.refactor.public.contrast-2 .sidemenu ul li.oordeel-Waarschuwing a {
	background-color: #dbce01 !important;
}
.refactor.public.contrast-2 .sidemenu ul li.oordeel-Waarschuwing a > span {
	color: black!important;
}

/*
	Error states
*/

.refactor.public.contrast-2 .error-message,
.refactor.public.contrast-2 .error-message p,
.refactor.public.contrast-2 .error-message ul,
/* Communication Error */
.refactor.public.contrast-2 .notificationDiv .contentDiv:before {
	background: #9c0101 !important;
}

/* 
	Justification States 
*/

/* Error */
.refactor.public.contrast-2 .justification ul li.error{
	border-color: #9c0101 !important;
}
.refactor.public.contrast-2 .justification ul li.error:before {
	background: #9c0101 !important;
}

/* Warning */
.refactor.public.contrast-2 .justification ul li.warning {
	border-color: #dbce01 !important;
}
.refactor.public.contrast-2 .justification ul li.warning:before {
	background: #dbce01 !important;
}
/* Info */
.refactor.public.contrast-2 .justification ul li.infoMessage {
	border-color: #005193 !important;
}
.refactor.public.contrast-2 .justification ul li.infoMessage:before {
	background: #005193 !important;
}

/* Succes */
.refactor.public.contrast-2 .justification ul li.succes,
.refactor.public.contrast-2 .justification ul li.accepted {
	border-color: #044a02 !important;
}
.refactor.public.contrast-2 .justification ul li.succes:before,
.refactor.public.contrast-2 .justification ul li.accepted:before {
	background: #044a02 !important;
}

/*
	Form navigation
*/

.refactor.public.contrast-2 .form_navigation button.buttongreen,
.refactor.public.contrast-2 .form_navigation button.buttongreen * {
	background: #044a02 !important;
}

/*
	General Overrules
*/

/* Overrule table */
.refactor.public.contrast-2 table thead th:first-of-type,
/* Overrule input delete-button*/
.refactor.public.contrast-2 .ui-combobox button.autocomplete-clear-button {
	border-color: transparent !important;
}

/* Overrule DropdownArrow */
.refactor .ui-combobox button.ui-combobox-toggle:before {
	border-left-color: transparent!important;
	border-right-color: transparent!important;
}

/* Overrule textarea-info / inline-icon */
.refactor.public.contrast-2 .explain:before,
.refactor.public.contrast-2 .inlineicon:before {
	background-color: transparent !important;
}

/*==============================================

	Contrast 1 + 2 generic overrules
	
===============================================*/
/* Loaderpage*/

.refactor.public.contrast-2 .aquima-portlet-loader,
.refactor.public.contrast-1 .aquima-portlet-loader,
.refactor.public.contrast-2 .ajax-loader-background,
.refactor.public.contrast-1 .ajax-loader-background,
.refactor.public.contrast-1 .ajax-loader,
.refactor.public.contrast-2 .ajax-loader {
	background-color: transparent!important;
}


/*==============================================

	Contrast + Textsize generic breadcrumb overrules
	
===============================================*/

.refactor.public[class*="textsize-"]:not(.textsize-0):not(.textsize-1) ul li a,
.refactor.public[class*="textsize-"]:not(.textsize-0):not(.textsize-1) ul li a > span,
.refactor.public[class*="textsize-"]:not(.textsize-0):not(.textsize-1) ul li > span,
.refactor.public[class*="textsize-"]:not(.textsize-0):not(.textsize-1) ul li > span > span {
	white-space: normal;
}

/* hide display of arrows */

.refactor.public[class*="textsize-"]:not(.textsize-0):not(.textsize-1) .sidemenu ul li :before,
.refactor.public[class*="textsize-"]:not(.textsize-0):not(.textsize-1) .sidemenu ul li :after,
.refactor.public[class*="contrast-"]:not(.contrast-0) .sidemenu ul li :before,
.refactor.public[class*="contrast-"]:not(.contrast-0) .sidemenu ul li :after {
	display: none;
	transform: initial;
}