/* TWK 08-01-2025
 * Op basis van CSS gemeente Leiden
*/
/*@import url(https://fonts.googleapis.com/css?family=Ubuntu);*/
@import url(https://fonts.bunny.net/css?family=roboto);


/* Variabelen */
:root {
	--Ultramarijnblauw: #164194; /*Huisstijl 2025,  Was #003794 */
	--Donkerrood: #b71c1c;
	--Lichtgrijs: #f4f4f4;
	--Donkergrijs: #666666;
}


body.orbeon {
	font-family: "roboto",Verdana,sans-serif;
	font-size: 16px;
	/*background-color : #AAA; */
	color : #000;
}
	
.orbeon {
	font-family: "roboto",Verdana,sans-serif;
}  
 
.fr-noscript-choice {
	display:none;
}

/* Loading knop opvallender */ 
.orbeon .xforms-loading-loading {
	background-color: #C44;
	color: #FFF;
	padding: 10px;
	position: absolute;
	right: 2em;
	margin: 20px 50%;
	z-index: 10;
}

/* Logo Urk kleiner en iets ruimte onder de browserrand */
.headerImage {
	max-height: 80px;
	padding-top: 5px;
}

/* Labels van de radio button komen onder de button in plaats van er achter. Dit verhelpt dat. */
.small div.block-layout-vertical span span label {
	width: 80%;
}

.orbeon .xforms-label,
.orbeon label {
	/*font-size : 14px; 
	font-weight : 400; */
	line-height: 1.6em;  /*Leiden*/
	margin: .5em 0px .5em 0px;
	font-size: 15px;
	font-weight: 700;
}

/* Tabknoppen weghalen die niet relevant zijn */
.fr-formnavigation .button-irrelevant {
	display:none;
}
	
/* Uitgeschakeld 4-5-2023 omdat anders de naam van het uploadbestand niet getoond wordt  
span.xforms-output-appearance-xxforms-download a {
		display: none;
} */

 
/* Achtergrondkleur formulier, Let op. pas dit ook aan bij Verplichte velden: Achtergrondkleur blok */
/*
.fr-border {
	background-color : #FBFBFB;
}
/*

/* Link kleur (tip: gelijk aan kleur van knoppen) */
.orbeon a {
	color: var(--Ultramarijnblauw);
	text-decoration: underline !important;
}

.orbeon a:hover {
	color: rgb(18,115,161);
	text-decoration: underline !important;
}

/* Titelbalk Achtergrondkleur */
.orbeon .navbar-inverse .navbar-inner {
	position : relative;
	/*background-color : var(--Ultramarijnblauw);*/
	background-color : transparent;
	/*border-radius: 5px;*/
}

/* Titelbalk Tekst */
.orbeon .navbar-inverse .navbar-inner .container h1 {
	font-family: "roboto",Verdana,sans-serif;
	font-weight : 400;
	/*color: yellow;*/
	color : var(--Ultramarijnblauw);
}

/* Titelbalk Padding. Door transparante achtegrond moet de titel naar links. origineel: 5px 20px */
.orbeon .navbar-inverse .navbar-inner {
 padding: 5px 0;
}

/* Koppen */
.orbeon h1 .xforms-control .xforms-output-output { /* Titelbalk */
	font-size: 38px;
}

.orbeon h2 .xforms-control .xforms-output-output {
	font-size: 24px;
}

.orbeon h3 .xforms-control .xforms-output-output {
	font-size: 18px;
	font-weight : 400;
}

/* Tekst(kleur) paginakoppen */
.orbeon h2,.orbeon h3,.orbeon h4,.orbeon h5,.orbeon h6, .block_title {
	font-family: "roboto", Arial,Verdana,sans-serif;
	color : var(--Ultramarijnblauw); 
}

/* Afstand tussen de regels */
.orbeon h1, .orbeon h2, .orbeon h3 {
	line-height: 25px;
}

/* Ondermarge h3 is standaard 10. Dat is te veel, verwijderd (twk) */
.orbeon h3 {
	margin: 0 0 0 0;
}  

/* Padding boven block_title is standaard 2em. Dat is te veel. (twk) */
.block_title {
	padding-top: 0.5em;
	padding-bottom: 1px;
}

.orbeon .block_title h3 div.xforms-output-output,
.orbeon .intext_title h3 {
	font-size: 16px;
	font-weight: 700;
	/* margin-top: 1em; */
}

/* Lettertype van menu buttons iets groter */
.orbeon .fr-formnavigation button.btn, .yui-button.yui-push-button, .fr-formnavigation .yui-skin-sam .yui-button button {
	font-size: 14px;
}

/* Kleuren actief menu-item  */
.fr-formnavigation span.button-active button, .cookieLawBanner a:focus, .orbeon .btn:focus, .orbeon .btn:active, .orbeon .btn.active {
	background-color: rgb(2,0,157,0.12);
	color: var(--Ultramarijnblauw);
	font-weight: 700;
}

/* Kleuren (menu) buttons */
.yui-skin-sam .yui-button button, .orbeon button.close, .orbeon button.btn {
	font-family: "roboto",Verdana,sans-serif;
	font-weight : 400;
	background-color : var(--Ultramarijnblauw);
	border-color :  var(--Ultramarijnblauw);
	border-radius: 5px;
	transition-property: all;
	transition-timing-function: linear;
	transition-duration: 0.2s;
}

/* Kleuren (menu)buttons mouse-over */
.orbeon .btn:hover, .orbeon .btn:focus, .orbeon button.close:hover, .orbeon button.close:focus {
	color: #FFF;
	background-color : #0247bd;
	border-color : #FFF; 
}

.fr-formnavigation span.button-relevant.button-inactive.problem button::after {  /* Icoontje als niet alle verplichte velden zijn gevuld */
	content: "\f06a";
	font-family: "Font Awesome 5 Free";
	font-weight: 700;
	padding-left: 6px;
	color: #ef5350;
}

/* Verplichte velden: Veldkader en schaduwkleur */
/* UITGEZET VOOR LEIDEN CSS
	.orbeon .xforms-required input, .orbeon .xforms-required textarea, .xforms-required-empty .xforms-input-input, .orbeon .xforms-required input[type="radio"], .orbeon .xforms-required input[type="checkbox"] {
	  border-color : var(--Ultramarijnblauw);
	  box-shadow:  0px 0px 2px 1px #99D6E0;
	}
*/

/* Verplichte velden: Achtergrondkleur blok */

.xforms-required  {
	background-color : var(--Lichtgrijs);
	padding-top : 5px;
	padding-bottom : 5px;}

/* UITGEZET VOOR LEIDEN CSS
	.xforms-required  {
	  background-color : #f0f0f0;
	  margin: 2px 2px 2px 2px;
	  padding: 5px 10px 0px 10px;
	  border-radius: 5px;
	}
	  
	.verplicht {
	  background-color : #f0f0f0;
	  margin: 2px 2px 5px 2px;
	  padding: 5px 10px 0px 10px;
	  border-radius: 5px;
	}
	.xforms-required {
		background-color: #f0f0f0;
	}

	.nietVerplicht {
	  background-color : #f0f0f0;
	  margin: 2px 2px 10px 2px;
	  padding: 5px 10px 0px 10px;
	  border-radius: 5px;
	}
*/

/* Breedte van de vragen */
.block-layout-horizontal .xforms-label, div.block-layout-horizontal .xforms-label {
		width: 50%;
}

/*.block-layout-horizontal .xforms-label, div.block-layout-horizontal .xforms-label,*/
.block-layout-horizontal .xforms-label,
.block-layout-vertical .xforms-label {
	color: var(--Ultramarijnblauw);
}

/* Inputvelden */
.orbeon .xforms-input-input, .orbeon select, .orbeon textarea, .orbeon input[type="text"], .orbeon input[type="password"], .orbeon input[type="datetime"], .orbeon input[type="datetime-local"], .orbeon input[type="date"], .orbeon input[type="month"], .orbeon input[type="time"], .orbeon input[type="week"], .orbeon input[type="number"], .orbeon input[type="email"], .orbeon input[type="url"], .orbeon input[type="search"], .orbeon input[type="tel"], .orbeon input[type="color"], .orbeon .uneditable-input {
	width: 90%;
	height: 2em;
	font-size: 1.2em;
}

.orbeon textarea {
		height: 8em;
}

/* antwoorden van radiobuttons en checkboxes standaard gewicht */
div.block-layout-vertical label.radio, div.block-layout-vertical label.checkbox {
	font-weight: 400;
}

/* Datum en tijd */
/*
.orbeon .xforms-input input.xforms-type-date, .orbeon .xforms-input input.xforms-type-time {
	width: 100%; 
}*/


/* Bedrag */
.orbeon .input-append, .orbeon .input-prepend {
	font-size: 1em;
}
.orbeon .input-append .add-on, .orbeon .input-prepend .add-on {
	height: 1.8em;
	margin-left: 0px;
	margin-top:	0px;
	}
/*
.xbl-fr-number-visible-input xbl-html-input .xforms-input-input {
	font-size: 1.2em;
}*/
/*
.orbeon .xbl-fr-number .fr-field-width-natural input, .orbeon .xbl-fr-currency .fr-field-width-natural input {
	width: 100%; 
}  */

/* Opvallende tekst groter */
.orbeon .opvallend {
	font-weight: 700;
	font-size: 1.5em !important ;
}


/* Verplichte velden: kleur van de asterisk '*' */
.xforms-required label em, .mandatory-text div em {
	color: #B4000B; }


/* Standaard velden: kleur kader */
.orbeon .xforms-required.xforms-empty input,
.orbeon .xforms-required.xforms-empty textarea,
.xforms-required-empty .xforms-input-,
.orbeon .xforms-required.xforms-empty select,
.orbeon .xforms-required input,
.orbeon .xforms-required textarea,
.xforms-required-empty .xforms-input-input,
.orbeon .xforms-required input[type="radio"],
.orbeon .xforms-required input[type="checkbox"],
.orbeon select,
.orbeon textarea,
.orbeon input[type="text"],
.orbeon input[type="password"],
.orbeon input[type="datetime"],
.orbeon input[type="datetime-local"],
.orbeon input[type="date"],
.orbeon input[type="month"],
.orbeon input[type="time"],
.orbeon input[type="week"],
.orbeon input[type="number"],
.orbeon input[type="email"],
.orbeon input[type="url"],
.orbeon input[type="search"],
.orbeon input[type="tel"],
.orbeon input[type="color"],
.orbeon .uneditable-input {
	/*border-color: #DDD;
	border-width: 2px;*/
	box-shadow: 0px 0px 0px 0px #ccc;
	border-color: #CCC;
	border-width: 2px;
	/*box-shadow: 0px 0px 0px 0px #BADBEE; */
}  


/* Kleur pijltjes voor uitleg bij een vraag */
.xforms-hint::before {
	color : var(--Ultramarijnblauw); 
}

/* Kleur kader foutieve velden */
.orbeon .xforms-invalid.xforms-visited .xforms-input-input, .orbeon .xforms-invalid.xforms-visited input[type="password"], .orbeon textarea.xforms-invalid.xforms-visited, .orbeon .xforms-required.xforms-invalid.xforms-visited textarea {
	border-color: var(--Donkerrood);
	border-width: 1px;  
}

/* Kleur tekst foutmelding of waarschuwing */
.orbeon .xforms-invalid > .xforms-alert.xforms-active, .orbeon .xforms-alert.xforms-active.xforms-invalid {
	background-color: transparent;
	color : var(--Donkerrood); 
	border: none;
}

/*verberg het pijltje bij de foutmelding */
.orbeon .xforms-invalid > .xforms-alert.xforms-active:before {
	display: none;
}

/* Kleur kader en schaduw van het huidig actieve veld */
.orbeon textarea:focus, .orbeon input[type="text"]:focus, .orbeon .xforms-required.xforms-invalid.xforms-visited textarea:focus, .orbeon .xforms-required.xforms-visited textarea:focus {
	border-color : var(--Ultramarijnblauw);
	box-shadow: 0px 0px 2px 1px #ccc; 
}

/* Achtergrondkleur responsive menu button */
#collapseTriggerLabel { 
	background-color: var(--Ultramarijnblauw); 
}

/* Achtergrondkleur responsive menu button actief */
#collapseTrigger:checked ~ #collapseTriggerLabel {
	background-color: #828282;
}

/* OGONE Button */

.orbeon .ogone-amount-div {
	color: var(--Ultramarijnblauw);
	font-weight: 700;
	display: inline-block;
}
.orbeon .ogone span img {
	margin: 2px;
}
/*
.orbeon .ogone .span {
	width: 260px;
}
.orbeon .ogone span button {
	background-color: #288877;
}
.orbeon .ogone button span::after {
	content: "\f023";
	font-family: "Font Awesome 5 Free";
	font-weight: 700;
	padding-left: 12px;
	color: #fff;
}
.orbeon .ogone span button span {
	text-align: center;
	color: #fff;
	font-weight: 700;
}

*/


/****************************************/
/*************** LEIDEN *****************/
/****************************************/

.orbeon .orbeon-portlet-body,
.orbeon .xforms-output-output,
.orbeon .xforms-label,
.orbeon label,
.orbeon button,
.orbeon .btn,
.orbeon .xforms-alert.xforms-active,
.orbeon .digid-button .yui-button.yui-push-button,
.xforms-required label em,
.mandatory-text div em,
.orbeon .xforms-visited > .xforms-alert.xforms-active,
.orbeon .xforms-visited.xforms-alert.xforms-active,
.orbeon .xforms-hint-appearance-inline .xforms-hint,
.orbeon .navbar .fr-language-choice,
.orbeon .navbar .fr-goto-content {
	font-family: "roboto",Verdana,sans-serif;
	font-size: 15px;
}


/* verplichte vragen geen label */
.orbeon .verplicht h3 .xforms-output-output::after {
	content: "\f069";
	font-size: .6em;
	font-family: "Font Awesome 5 Free";
	font-weight: 700;
	color:#e17100;
	vertical-align: top;
	margin-left: 4px;
	position: relative;
}

.orbeon .verplicht .xforms-label,
.orbeon .verplicht .block-layout-horizontal .xforms-label,
.orbeon .groep.upload .xforms-label {
	display: none;
}


/* box--group */

.orbeon .box--group,
.orbeon .groep {
	display: block;
	background-color: var(--Lichtgrijs);
	padding: 0.1rem 1.5rem 0.5rem 1.5rem;
	border-radius: 0.5rem;
	margin-bottom: 1.5rem;
	margin-left: 1em;  /*groepblokken laten inspringen*/
}

.orbeon .groep .groep {
	padding: 0
}

.orbeon .box--group div > .block-layout-vertical, 
.orbeon .groep div > .block-layout-vertical{
	background-color: var(--Lichtgrijs);
	padding: 0;
	
}
.orbeon .box--group .inleiding,
.orbeon .groep .inleiding {
	padding-left: 1em;
	border-left: 6px solid var(--Donkergrijs);
	margin-bottom: 0.5em;
}

.orbeon .groep .message--belangrijk,
.orbeon .groep .message--info,
.orbeon .groep .message--stop {
	margin: 1em 0;
}

.orbeon .groep .message--belangrijk .xforms-output,
.orbeon .groep .message--info .xforms-output,
.orbeon .groep .message--stop .xforms-output {
	margin: 2em auto 1em auto;
	padding: 0.5em 0.5em 1em 0.5em;
	padding-left: 3.2em;
	border-radius: 0.5em;
}

.orbeon .groep h3::before {  /* blokje voor de title van het blok */
	content: " ";
	display: inline-block;
	position: relative;
	background-color: rgb(2,0,157,0.35);
	width: .5em;
	height: 0.8em;
	bottom: -2px;
	margin-right: .5em;
	margin-left: -1em;
	border-radius: 0px;
	vertical-align: top; 
}

/* MESSAGE--BELANGRIJK */

.orbeon .message--belangrijk .xforms-output {
	display: block;
	padding: 6px;
	padding-left: 3.2em;
	margin: 2em 0;
	background-color: #fff4dc;
	color: #222;
	border-radius: 5px
}
.orbeon .message--belangrijk .xforms-output::before {
	content: "\f06a";
	font-family: "Font Awesome 5 Free";
	font-size: 1.6em;
	line-height: 1em;
	font-weight: 700;
	padding: 0 12px;
	color: #d37500;
	float: left;
	margin-left: -2em;
}
.orbeon .message--belangrijk .xforms-output h3 {
	color: #222;
}


/* MESSAGE--INFO */

.orbeon .message--info .xforms-output, 
.orbeon .message--jsLoaded .xforms-output {
	display: block;
	padding: 12px;
	margin: 2em 0;
	background-color: #e4e4ed;
	color: #222;
	border-radius: 5px
}

.orbeon .message--info .xforms-output::before {
	content: "\f05a";
	font-family: "Font Awesome 5 Free";
	font-size: 1.6em;
	line-height: 1em;
	font-weight: 700;
	padding: 0 12px;
	/*color: #222;*/
	color: #00f;
	float: left;
	margin-left: -2em;
}

.orbeon .message--info .xforms-output h3, 
.orbeon .message--jsLoaded .xforms-output h3 {
	color: #222;
}
.orbeon .message--info li, 
.orbeon .message--jsLoaded li {
	margin-bottom: 1em;
}

.orbeon .groep .message--belangrijk .xforms-output,
.orbeon .groep .message--info .xforms-output {
	border: 1px solid #3643df;
}

.orbeon .message--jsLoaded {
	opacity: 0;
} 

@keyframes jsloadmsg { 
	100% { opacity: 1; }
}

@keyframes jsloader { 
	100% { opacity: 0; }
}

.orbeon .message--jsLoaded{
	animation: jsloadmsg .5s forwards;
	animation-delay:6s;
	position: relative;
	top: -60px;
}

.orbeon .jsLoader {
	opacity: 1;
	margin: 0 50%;
	animation: jsloader .1s forwards;
	animation-delay:5s;
	position: relative;
	bottom: -40px;
}

.orbeon .jsLoader div {
	display: block;
	width: 80px;
	height: 40px;
	margin-left: -50px;
	background-size: 100% 100%;
	background-image: url(images/bars-1s-38px.svg);
	background-position: bottom;
	color: transparent;
}

/* MESSAGE--STOP */

.orbeon .message--stop .xforms-output {
	display: block;
	padding: 6px;
	padding-left: 3.2em;
	margin: 2em 0;
	background-color: var(--Donkerrood);
	color: #fff;
	border-radius: 5px;
}
.orbeon .message--stop .xforms-output::before {
	content: "\f057";
	font-family: "Font Awesome 5 Free";
	font-size: 1.6em;
	line-height: 1em;
	font-weight: 700;
	padding: 0 12px;
	color: #eee;
	float: left;
	margin-left: -2em;
}
.orbeon .message--stop .xforms-output *,
.orbeon .message--stop .xforms-output h3 {
	color: #eee;
}
.info {
	display: block;
	padding: 1em;
	margin: 0 0 2em 0;
	background-color: #cddc39;
	border-radius: 1em;
}
.info .xforms-output {
	display: block;
}
.belangrijk {
	padding-left: 3.2em;
	color: #222222;
}
.belangrijk .xforms-output::before {
	display: block;
	width: auto;
	content: "\f06a";
	font-family: "Font Awesome 5 Free";
	font-size: 2em;
	line-height: 0.8em;
	font-weight: 700;
	position: absolute;
	float: left;
	margin-left: -1.2em;
}


/* Overzicht */

.orbeon .overzicht .xforms-required,
.orbeon .box--overzicht .xforms-required {
	margin: 0;
	padding: 0;
}
.orbeon .overzicht .xforms-output,
.orbeon .box--overzicht .xforms-output {
	display: inline-block;
	width: 100%;
	font-weight: 300;
}
.orbeon .overzicht .block_title,
.orbeon .box--overzicht .block_title {
	margin-top: 2em;
	display: inline-block;
	width: 100%;
}
.orbeon .overzicht .block_title .xforms-output-output,
.orbeon .box--overzicht .block_title .xforms-output-output {
	font-size: 1.2em;
	font-weight: 700;
	color: #2b3445;
	padding: .125em, 0;
	background-color: #f3f3f3;
	border-bottom: solid 5px #eee;
	padding-left: .5em;
	margin-left: -0.5em;
}
.orbeon .overzicht .xforms-label,
.orbeon .box--overzicht .xforms-label {
	font-size: 1em;
	margin: .25em 0px .25px 0px;
	padding: 0;
	font-weight: 700;
	display: inline-block;
	width: 100%;
}
.orbeon .overzicht .xforms-type-date span,
.orbeon .box--overzicht .xforms-type-date span {
	margin-left: 5px;
}
.orbeon .overzicht .xforms-mediatype-text-html div span,
.orbeon .box--overzicht .xforms-mediatype-text-html div span {
	font-size: 1em;
	font-weight: 700;
}




/* Uitgeschakelde buttons (disabled) */
/*
.orbeon .btn.disabled, .orbeon .btn[disabled], .orbeon .btn.disabled:hover, .orbeon .btn[disabled]:hover {
	background-color: #DDD;
	border : none; 
	color : #AAA; 
} */


/* Standaard velden: kleur kader */
/*
.orbeon select, .orbeon textarea, .orbeon input[type="text"], .orbeon input[type="password"], .orbeon input[type="datetime"], .orbeon input[type="datetime-local"], .orbeon input[type="date"], .orbeon input[type="month"], .orbeon input[type="time"], .orbeon input[type="week"], .orbeon input[type="number"], .orbeon input[type="email"], .orbeon input[type="url"], .orbeon input[type="search"], .orbeon input[type="tel"], .orbeon input[type="color"], .orbeon .uneditable-input {
	border-color : #AAA; 
} */

/* kleur pijltjes voor foutmelding of waarschuwing */
/*
.xforms-alert::before {
	color : #000; }
*/

/* Tekstkleur Waarschuwing versturen onvolledig ingevuld formulier */
/*
.warningtxt, .warningtxt+span {
	color : #F00000; }
*/

/* Achtergrondtkleur Waarschuwing versturen onvolledig ingevuld formulier */
/*
.warningtxt, .warningtxt+span {
	background-color : #FFE6E6; }
*/

/* Kleur van de RAND om help popup (alle border kleuren hieronder horen gelijk) */
/*
.orbeon .popover              { border-color       : #000; }
.orbeon .popover.right .arrow { border-right-color : #000; }
.orbeon .popover.left .arrow  { border-left-color  : #000; }
*/

/* Achtergrondkleur popup (alle kleuren horen gelijk) */
/*
.orbeon .popover.right .arrow:after  { border-right-color: #FAFAFA; }
.orbeon .popover.left .arrow:after   { border-left-color : #FAFAFA; }
.orbeon .popover                     { background-color  : #FAFAFA; }
*/

/* Kleuren popup titel */
/*
.orbeon .popover-title
	{ border-bottom : 1px dashed #BBB;
		background-color : #FAFAFA; }
*/