/* ================= Huisstijl kleuren =================== */
/* ==     	     Zwols blauw: #0047bb               == */
/* ==     	     Contrasterend blauw: #140b88       == */
/* ==     	     Lichtblauw: #e8e7f3                == */
/* ==     	     Magenta: #de1b76                   == */
/* ==     	     Zwart: #000               	        == */
/* ==     	     Wit: #fff                	        == */
/* ======================================================= */ 



/* ======================================================= */
/* =================== Pagina styling ==================== */
/* ======================================================= */ 
	
	/* == achtergrond formulierpagina ==*/
	.view__body, 
	.layout { 
		background-color: #fff;}
	.openforms-theme .utrecht-page{
		--utrecht-page-background-color: #fff; }
	/* == Knoppenbalk 'pagina afdrukken' en 'terug naar boven' ==*/
	.a11y-toolbar{
		display:none; }
	/* == Gemeente logo ==*/
	.page-header.page-header--has-logo .page-header__return-url{
		background-position: 0%; }
	/* == witruimte boven  ==*/
	.page-header{
		padding: 31px; }
	/* == Pagina contentblok  ==*/	
	.openforms-layout .openforms-layout__row{
		padding-left: 0px;
		padding-right: 0px; }
	/* == tussenruimte formulier en navigatie ==*/
	.openforms-layout .openforms-layout__column:first-child:not(last-child){
		margin-right: auto;}
	/* == container formulier ==*/
	.openforms-card{
		max-width: 80ch; } 
	 /* == container formulier en voortgangsindicator ==*/
	.openforms-card, .openforms-progress-indicator{
		padding: 0px; }
	/* == container formulier ==*/
	.openforms-card .openforms-card__body, 
	.openforms-progress-indicator 
	.openforms-card__body{
		margin-top: 0px;}

	/* == Footer == */
	.footer{
		background-color: var(--of-layout-bg);
		padding: 0px; }
	.footer .footer__nav{
		padding-left: 20px;
		padding-right: 20px }
	.utrecht-page footer { 
		background-color: #e8e7f3;
		color: black;}
/* ======================================================= */
/* ================== Mobiele weergave =================== */
/* ======================================================= */ 		

	/* == formuliertitel mobiele weergave ==*/
	.openforms-progress-indicator .openforms-progress-indicator__form-title{
		white-space: normal;
		text-align: left; }	
		
/* ======================================================= */
/* =================== Element styling =================== */
/* ======================================================= */	

	/* == titel formulierpagina == */
	.openforms-react-modal__title, 
	.openforms-title{
		padding-bottom: 12px;
		margin-bottom: 24px;
		font-weight: 700; }
	/* == subtitel formulierpagina == */
	.openforms-subtitle{
		border-bottom: 1px solid #CAD6DA;
		padding-bottom: 10px;}
	/* == Foutmelding op gehele pagina ==*/
	.openforms-alert.openforms-alert--error{
		background-color: var(--of-layout-bg);
		border-top: 2px solid var(--of-alert-error-bg);}

	/* == Foutmelding bij formuliervelden ==*/
	.openforms-form-control.formio-error-wrapper, 
	.openforms-form-control.has-error{
		background-color: var(--of-layout-bg);
		border-bottom: 4px solid var(--of-alert-error-bg);
		border-left: none; }
	.openforms-message, 
	.openforms-message--error{
		margin-top: 15px;}
	/* == tekstparagraaf: algemeen ==*/
	.openforms-form-control.openforms-form-control--content [ref=html] p{
		line-height: 1.75;
		font-size: inherit;}
	/* == tekstparagraaf: verwijderen ongewenste marge ==*/
	.openforms-form-control.openforms-form-control--content [ref=html] p:not(:last-child){
		margin-bottom: 0px;}
	
/* ======================================================= */
/* ===================== Componenten ===================== */
/* ======================================================= */

	/* == Dropdownkeuze achtergrond == */
	.openforms-form-control--select .selection .choices__item{
		background-color: var(--of-color-bg);
		color: var(--of-color-fg); }
	[ref=component] .choices__list--dropdown, 
	[ref=editForm] .choices__list--dropdown {
		background-color: #fff; }
	.openforms-form-control--select .selection+.choices__list .choices__item:hover{
		background-color: var(--of-color-primary);
		color: var(--of-color-bg); }
		
	/* == select item kruisje == */
	.choices__button{
	background-color: var(--of-color-primary); }
	
	/* == Datumkiezer ==*/
	.flatpickr-calendar{
		border: 1px solid var(--of-field-border-color);
		border-radius: 0; }
	.flatpickr-day{
		border-radius: 0;}
	.flatpickr-day:hover{
		background-color: #fff;
		border-color: var(--of-button-primary-bg)}
	.flatpickr-day.today{
		border: 1px solid var(--of-field-border-color);
		background-color: var(--of-field-border-color);
		color: #fff;}
	.flatpickr-day.endRange, 
	.flatpickr-day.endRange.inRange, 
	.flatpickr-day.endRange.nextMonthDay, 
	.flatpickr-day.endRange.prevMonthDay, 
	.flatpickr-day.endRange:focus, 
	.flatpickr-day.endRange:hover, 
	.flatpickr-day.selected, 
	.flatpickr-day.selected.inRange, 
	.flatpickr-day.selected.nextMonthDay, 
	.flatpickr-day.selected.prevMonthDay, 
	.flatpickr-day.selected:focus, 
	.flatpickr-day.selected:hover, 
	.flatpickr-day.startRange, 
	.flatpickr-day.startRange.inRange, 
	.flatpickr-day.startRange.nextMonthDay, 
	.flatpickr-day.startRange.prevMonthDay, 
	.flatpickr-day.startRange:focus, 
	.flatpickr-day.startRange:hover{
		background-color: var(--of-color-primary);
		border-color: var(--of-color-primary); }
	.anchor--inherit{
		color: var(--of-color-fg);}

	/* == Checkbox == */
	.openforms-checkbox :checked ~ .openforms-checkbox__label::after{
		border: 1px solid transparent;}		

/* ======================================================= */
/* ============ Zijbalk (Voortgangsindicator) ============ */
/* ======================================================= */

 /* == Voortgangsindicator container ==*/
  .openforms-progress-indicator{
    padding: padding: 0px 0px 15px 0px;
    position: sticky;
    top: 5rem;
    border: 1px solid #dbe7ea;
  }
 /* == Voortgangsindicator inhoud ==*/
  .openforms-caption + .openforms-list{
    margin-top:-8px;
  }
  .openforms-list:not(.openforms-list--compact, .openforms-list--extra-compact) .openforms-list__item:not(:last-child){
	  margin-bottom: 0px;
  }
 /* == Voortgangsindicator header ==*/
  .openforms-caption{
    padding: 30px;
    font-size: 24px;
	background-color: #e8e7f3;}
	
/* == Voortgangsindicator items == */`
	.openforms-body--muted, 
	.openforms-caption--muted, 
	.openforms-subtitle--muted, 
	.openforms-title--muted {
		display: inline-block;
		font-size: 1.125rem;
		color: var(--of-color-fg); }
	.openforms-anchor{
		display: inline-block;
		padding: 12px 20px 12px 12px;
		border-left: none; }
	.openforms-list {
		margin-bottom: 20px;
		line-height: 0; }
	.openforms-progress-indicator-item{
		display: block ruby;
		padding-left: 7px;
		padding-top: 2px;
		padding-bottom: 2px; }
	.openforms-progress-indicator-item:hover{
		background-color: #eff4f6;
		width: 100%;}
	.openforms-progress-indicator-item__label:hover{
		color: var(--of-color-primary);}
	.openforms-anchor--active{
		padding-bottom: 9px;}
	.openforms-progress-indicator-item .openforms-progress-indicator-item__marker{
		height: 18px;
		padding-top: -10px;
		padding-left: 7px;}
	.utrecht-link--current { 
		font-size:x-large;}

	/* == Voortgangsindicator vinkje ==*/
	.openforms-progress-indicator-item__marker{
		color: var(--of-color-success);
		font-size: 2rem;
		line-height: 55%; }	
	
/* ======================================================= */
/* ======================= Knoppen ======================= */
/* ======================================================= */

	.openforms-button:not([aria-disabled=true]), 
	.openforms-form-control--image button[ref=takePictureButton]:not([aria-disabled=true]), 
	.openforms-form-control--image button[ref=toggleCameraMode]:not([aria-disabled=true]){
		height: 48px;
		padding: 11px 16px; }
	.utrecht-button-link {
		background-color: #0047bb;
	}
	
	/* == Knoppen -- disabled ==*/
	.openforms-toolbar__list-item button.utrecht-button--disabled { 
	 background-color: #e8e7f3; }
	.utrecht-button--submit { 
	  background-color: #140b88 }

	/* == Footerknoppen == */
	.footer .list__item { 
		color: var(--of-color-fg);
		font-size: 12px; }
    .footer .footer__nav .list{
		border-top: 3px solid var(--of-color-primary);
		padding: 35px 0px 35px 0px;}
	.openforms-list__item:not(:last-child){
		margin-bottom: 0px;}

	/* == Terugknop == */
	.openforms-button--anchor{
		background-color: #fff;
		border-color: var(--of-button-anchor-color-border);
		border-width: 1px 1px 1px 1px; }
	.openforms-button--anchor:hover{
		color: var(--of-color-primary)!important;
		border-color: var(--of-color-primary)!important;
		border-width: 1px 1px 1px 1px;
		text-decoration: none!important;}
 
	/* == Formulier opslaan knop == */
	.openforms-button--secondary{
		border-color: var(--of-button-anchor-color-border);
		border-width: 1px 1px 1px 1px; }
	.openforms-button--secondary:hover{
		background-color: #fff!important;
		color: var(--of-color-primary)!important;
		border-color: var(--of-color-primary)!important;
		border-width: 1px 1px 1px 1px; }
		
	/* == rode knoppen (opnieuw starten, uitloggen etc.) == */
	.openforms-button--danger{
		background-color: #D70D0D; }
	.openforms-button--danger, 
	.openforms-button--danger:hover, 
	.openforms-button--danger:active{
		border: none;}
		
	/* == Vertaalknoppen == */
	.utrecht-link-button, 
	.utrecht-link-button--html-button, 
	.utrecht-link-button--inline, 
	.utrecht-link-button--pressed{
		border: none;
		color: var(--of-color-primary)!important;
		text-decoration: underline;}

	/* == Hover == */
	.utrecht-button--secondary-action:hover {
		background-color: #e8e7f3!important;
		color: #000!important;}	
 
	.utrecht-button--primary-action:hover {
		background-color: #e8e7f3!important;
		color: #000!important;}		

/* =========================================================================*/
/* ========== Styling vanaf minimum 768px schermbreedte  ===================*/
/* =========================================================================*/

@media only screen and (min-width: 768px) {
 /* == Content  blok ==*/
  .layout.layout--container{
	padding: 0px;
	margin-bottom: 110px;
  }

/* =========================================================================*/
/* ========== Link op DigiD log inactiveretn             ===================*/
/* =========================================================================*/

.openforms-login-button-logo {
  pointer-events: none;
  cursor: default;
}

/* ====================================================== */
/* ==               Update tbv PodiumD  4.3           == */
/* ====================================================== */

.openforms-previous-link { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.5em; 
    padding: 0.5em 1em; 
    border-radius: 0; 
    border: 0.1em solid #b1b1b1; 
    background-color: #fff; 
    color: #1a1a1a; 
    font: 500 1em/1.5em "Arial", sans-serif; 
    text-decoration: none !important; 
    cursor: pointer; 
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; 
    -webkit-tap-highlight-color: transparent; }

.openforms-previous-link:hover, 
.openforms-previous-link:focus { 
    background-color: #e6e6e6; 
    border-color: #666; 
    color: #000; 
    text-decoration: none !important; }

.openforms-previous-link:active { 
    background-color: #ccc; 
    border-color: #444; }

.openforms-previous-link .utrecht-icon { 
    display: inline-flex; 
    margin-right: 0.25em; }

.openforms-previous-link[aria-disabled="true"] { 
    opacity: 0.6; 
    cursor: not-allowed; 
    pointer-events: none; }

.utrecht-button-link { 
    background-color: #0047bb; }

@media (max-width: 767px) { 
    .openforms-previous-link { 
        width: 100%; 
        justify-content: center; 
        margin-bottom: 0.5em; } }

@media only screen and (min-width: 768px) { 
    .openforms-previous-link { 
        display: inline-flex; 
        width: auto; 
        margin-bottom: 0; } }