/*achtergrond formulierpagina*/
.view__body, .layout{
  	background-color: #fff;
}
.openforms-formio-content h3{
	color: #3D3D3C;
}
.openforms-theme .utrecht-page{
  --utrecht-page-background-color: #fff;
}
/*Knoppenbalk 'pagina afdrukken' en 'terug naar boven'. Deze balk is verwijderd met goedkeuring van Desiree Binders*/
.a11y-toolbar{
	display:none;
}
/*file alert dezelfde kleur als gewone alert*/
.file .alert {
   color: var(--of-color-danger);
}
/* Gemeente logo helemaal linksboven geplaatst*/
.page-header.page-header--has-logo .page-header__return-url{
	background-position: 0%;
}
/*Checkbox bij check krijgt volgende element een transparante rand eromheen*/
.openforms-checkbox :checked ~ .openforms-checkbox__label::after{
  border: 1px solid transparent;
}
/*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 heeft een gehele lijn rondom*/
.openforms-button--secondary{
  border-color: var(--of-button-anchor-color-border);
  border-width: 1px 1px 1px 1px;
}
/*Footer*/
.footer{
	background-color: var(--of-layout-bg);
}
/*Rand om een h3 heading van legend set weghalen en links uitlijnen*/
.openforms-fieldset{
  border: none;
}
.openforms-fieldset .openforms-legend{
	margin: 0 0 0 0;
	padding-left: 0px;
}
/*geenidee*/
.openforms-list__item:not(:last-child){
  margin-bottom: 0px;
  /*! border-top: 1px solid; */
}
/*Voortgangsindicator items - worden als inline block getoond en krijgen kleur afhankelijk van variable*/
.openforms-body--muted, .openforms-caption--muted, .openforms-subtitle--muted, .openforms-title--muted{
  display: inline-block;
  color: var(--of-color-fg);
}
/*Wanneer je hovert over een voortgangsitem krijgt het de primary kleur*/
.openforms-progress-indicator-item__label:hover{
  color: var(--of-color-primary);
}
/*Voortgangsindicator vinkje*/
.openforms-progress-indicator-item__marker{
  color: #E10019;
  font-size: 2rem;
  line-height: 55%;
}
/* titel formulierpagina - extra ruimte voor elemnet, extra ruimte onder en dikker maken*/
.openforms-react-modal__title, .openforms-title{
	padding-bottom: 12px;
	margin-bottom: 24px;
	font-weight: 700;
}
/* subtitel formulierpagina, lijn en ruimte */
.openforms-subtitle{
	border-bottom: 1px solid #E10019;
	padding-bottom: 10px;
}
/*Foutmelding op gehele pagina achtergrond layout bg, maar krijgt duidelijke en opvallende bovenrand*/
.openforms-alert.openforms-alert--error{
  background-color: var(--of-layout-bg);
  border-top: 2px solid var(--of-alert-error-bg);
}
/* Marge van 15 pixels boven melding om meer afstand te maken*/
.openforms-message, .openforms-message--error{
  margin-top: 15px;
}
/*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);
}
/*link dezelfde kleur als de tekst eromheen*/
.anchor--inherit{
  color: var(--of-color-fg);
}
/*Dropdownkeuze achtergrond hetzelfde als binnenkant, tekst zorgt voor leesbaarheid*/
.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;
}
/*Wanneer hover in dropdown verandert kleur naar primaire kleur en wordt tekstkleur aangepast om leesbaar te houden*/
.openforms-form-control--select .selection+.choices__list .choices__item:hover{
	background-color: var(--of-color-primary);
	color: var(--of-color-bg);
}
/* select item kruisje krijgt primaire kleur interface */
.choices__button{
  background-color: var(--of-color-primary);
}
/*Styling vanaf minimum 768px schermbreedte - tablets en grotere schrmen*/
@media only screen and (min-width: 768px) {
	/* Content  blok */
  .layout.layout--container{
	padding: 0px;
	margin-bottom: 110px;
  }
  /*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;
  }
  /*container progress indicator*/
  .openforms-progress-indicator{
    position: static;
    top: 5rem;
    border: none;
  }
  .openforms-list:not(.openforms-list--compact, .openforms-list--extra-compact) .openforms-list__item:not(:last-child){
	  margin-bottom: 0px;
  }
  /* Alle 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;
  }
  /* tekstparagraaf: algemeen*/
  .openforms-form-control.openforms-form-control--content [ref=html] p{
	line-height: 1.75;
	font-size: inherit;

}
}
}