@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  /* none of vars */
  --font-family: Calibri, Verdana, sans-serif;
  --blue: hsl(185 91% 29%);
  --purple: hsl(313 54% 40%);

  /* haarlemmermeer vars */
  --haarlemmermeer-color-blue-80: hsl(185deg 90% 79%);
  --haarlemmermeer-color-grey-0: hsl(0 0% 0%);
  --haarlemmermeer-color-grey-100: hsl(0 0% 100%);
  --haarlemmermeer-color-grey-45: #757575;
  --haarlemmermeer-color-grey-85: hsl(210 14% 83%);
  --haarlemmermeer-color-grey-95: hsl(0 0% 95%);
  --haarlemmermeer-color-blue: var(--blue);
  --haarlemmermeer-color-blue-hover: hsl(186, 97%, 26%);
  --haarlemmermeer-color-purple: var(--purple);

  /* of vars */
  --haarlemmermeer-typography-sans-serif-font-family: var(--font-family);
  --haarlemmermeer-typography-scale-md-font-size: 22px;
  --haarlemmermeer-typography-scale-md-line-height: 1.35;
  --haarlemmermeer-typography-scale-sm-font-size: 16px;
  --haarlemmermeer-typography-scale-sm-line-height: 1.35;
  --haarlemmermeer-typography-weight-scale-bold-font-weight: 700;
  --haarlemmermeer-typography-weight-scale-normal-font-weight: 400;
  --haarlemmermeer-typography-weight-scale-semi-bold-font-weight: 500;
  --of-page-header-mobile-padding: 10px;
  --of-page-header-tablet-padding: 10px;
  --of-page-header-laptop-padding: 10px;
  --of-page-header-desktop-padding: 10px;
  --of-checkbox-bg: transparent;
  --utrecht-alert-error-background-color: #fff0f0;
  --utrecht-button-background-color: var(--haarlemmermeer-color-purple);
  --utrecht-button-border-radius: 0;
  --utrecht-button-border-width: 0;
  /* --utrecht-button-color: hsl(0 0% 100%); */
  --utrecht-button-font-size: 600;
  --utrecht-button-font-size: 0.875rem;
  --utrecht-button-hover-background-color: var(--haarlemmermeer-color-blue);
  --utrecht-button-margin-block-end: 8px;
  --utrecht-button-margin-block-start: 8px;
  --utrecht-button-margin-inline-end: 0;
  --utrecht-button-margin-inline-start: 0;
  --utrecht-button-padding-block-end: 10px;
  --utrecht-button-padding-block-start: 10px;
  --utrecht-button-padding-inline-end: 15px;
  --utrecht-button-padding-inline-start: 15px;
  --utrecht-button-secondary-action-background-color: var(--haarlemmermeer-color-purple);
  --utrecht-button-secondary-action-color: hsl(0 0% 100%);
  --utrecht-button-secondary-action-hover-background-color: transparent !important;
  --utrecht-button-appearance-focus-color: green;
  --utrecht-document-font-family: var(--haarlemmermeer-typography-sans-serif-font-family);
  --utrecht-document-background-color: hsl(0 0% 100%);
  --utrecht-document-color: hsl(0 0% 0%);
  --utrecht-document-font-size: 16px;
  --utrecht-document-line-height: 1.35;
  --utrecht-form-field-margin-block-end: 4px;
  --utrecht-form-field-margin-block-start: 4px;
  --utrecht-form-input-block-size: 44px;
  --utrecht-form-input-border-color: #ee8607;
  /* hsl(185 91% 29%); */
  --utrecht-form-input-border-width: 1px;
  --utrecht-form-input-color: hsl(0 0% 0%);
  --utrecht-form-input-focus-border-color: hsl(185deg 90% 79%);
  --utrecht-form-input-font-size: 14px;
  --utrecht-form-input-line-height: 18px;
  --utrecht-form-input-max-inline-size: 460px;
  --utrecht-form-input-padding-block-end: 0.3em;
  --utrecht-form-input-padding-block-start: 0.3em;
  --utrecht-form-input-padding-inline-end: 0.3em;
  --utrecht-form-input-padding-inline-start: 0.3em;
  --utrecht-form-input-placeholder-color: #757575;
  --utrecht-form-select-background-color: hsl(0 0% 100%);
  --utrecht-form-select-border-color: hsl(210 14% 83%);
  --utrecht-form-select-color: hsl(0 0% 0%);
  --utrecht-form-select-font-size: 1rem;
  --utrecht-heading-1-font-weight: var(--haarlemmermeer-typography-weight-scale-semi-bold-font-weight);
  --utrecht-heading-1-margin-block-end: 20px;
  --utrecht-heading-1-margin-block-start: 0;
  --utrecht-heading-2-margin-block-end: 30px;
  --utrecht-heading-2-margin-block-start: 0;
  --utrecht-heading-3-margin-block-end: 12px;
  --utrecht-heading-3-margin-block-start: 0;
  --utrecht-heading-4-font-size: 1.222em;
  --utrecht-heading-4-line-height: 1.35;
  --utrecht-heading-4-margin-block-end: 30px;
  --utrecht-heading-4-margin-block-start: 0;
  --utrecht-heading-font-weight: var(--haarlemmermeer-typography-weight-scale-bold-font-weight);
  --utrecht-link-background-color: hsl(0, 0%, 100%);
  --utrecht-ordered-list-item-margin-block-end: 1em;
  --utrecht-ordered-list-item-margin-block-start: 0;
  --utrecht-ordered-list-item-margin-inline-start: 2.3em;
  --utrecht-ordered-list-margin-block-end: 30px;
  --utrecht-ordered-list-margin-block-start: 0;
  --utrecht-page-footer-background-color: var(--haarlemmermeer-color-blue);
  --utrecht-page-footer-color: hsl(0 0% 100%);
  --utrecht-page-footer-padding-block-end: 20px;
  --utrecht-page-footer-padding-block-start: 20px;
  --utrecht-page-footer-padding-inline-end: 20px;
  --utrecht-page-footer-padding-inline-start: 20px;
  --utrecht-paragraph-font-size: 16px;
  --utrecht-paragraph-lead-font-size: 22px;
  --utrecht-paragraph-line-height: 1.35;
  --utrecht-separator-block-size: 1px;
  --utrecht-separator-color: hsl(0 0% 0%);
  --utrecht-separator-margin-block-end: 30px;
  --utrecht-separator-margin-block-start: 30px;
  --utrecht-space-block-2xl: 28px;
  --utrecht-space-block-2xs: 4px;
  --utrecht-space-block-3xl: 32px;
  --utrecht-space-block-3xs: 0;
  --utrecht-space-block-4xl: 36px;
  --utrecht-space-block-5xl: 40px;
  --utrecht-space-block-lg: 20px;
  --utrecht-space-block-md: 16px;
  --utrecht-space-block-sm: 12px;
  --utrecht-space-block-xl: 24px;
  --utrecht-space-block-xs: 8px;
  --utrecht-space-column-2xl: 28px;
  --utrecht-space-column-2xs: 4px;
  --utrecht-space-column-3xl: 32px;
  --utrecht-space-column-3xs: 0;
  --utrecht-space-column-4xl: 36px;
  --utrecht-space-column-5xl: 40px;
  --utrecht-space-column-lg: 20px;
  --utrecht-space-column-md: 16px;
  --utrecht-space-column-sm: 12px;
  --utrecht-space-column-xl: 24px;
  --utrecht-space-column-xs: 8px;
  --utrecht-space-inline-2xl: 2ch;
  --utrecht-space-inline-2xs: 0.25ch;
  --utrecht-space-inline-3xl: 3ch;
  --utrecht-space-inline-3xs: 0.125ch;
  --utrecht-space-inline-lg: 1.5ch;
  --utrecht-space-inline-md: 1ch;
  --utrecht-space-inline-sm: 0.75ch;
  --utrecht-space-inline-xl: 1.75ch;
  --utrecht-space-inline-xs: 0.5ch;
  --utrecht-space-row-2xl: 28px;
  --utrecht-space-row-2xs: 4px;
  --utrecht-space-row-3xl: 32px;
  --utrecht-space-row-3xs: 0;
  --utrecht-space-row-4xl: 36px;
  --utrecht-space-row-5xl: 40px;
  --utrecht-space-row-lg: 20px;
  --utrecht-space-row-md: 16px;
  --utrecht-space-row-sm: 12px;
  --utrecht-space-row-xl: 24px;
  --utrecht-space-row-xs: 8px;
  --utrecht-table-caption-font-size: 1.2em;
  --utrecht-table-caption-margin-block-end: 1em;
  --utrecht-table-cell-padding-block-end: 5px;
  --utrecht-table-cell-padding-block-start: 5px;
  --utrecht-table-cell-padding-inline-end: 9px;
  --utrecht-table-cell-padding-inline-start: 9px;
  --utrecht-table-header-background-color: hsl(0 0% 100%);
  --utrecht-table-header-color: hsl(0 0% 0%);
  --utrecht-table-header-font-weight: var(--haarlemmermeer-typography-weight-scale-bold-font-weight);
  --utrecht-table-heading-font-size: 20px;
  --utrecht-table-margin-block-end: 2em;
  --utrecht-table-row-alternate-even-background-color: hsl(0 0% 100%);
  --utrecht-table-row-alternate-odd-background-color: hsl(0 0% 95%);
  --utrecht-textarea-border-radius: 5px;
  --utrecht-textbox-min-block-size: 100px;
  --utrecht-textbox-min-inline-size: 460px;
  --utrecht-unordered-list-item-margin-block-end: 1em;
  --utrecht-unordered-list-item-margin-block-start: 0;
  --utrecht-unordered-list-item-margin-inline-start: 1.7em;
  --utrecht-unordered-list-margin-block-end: 1rem;
  --utrecht-unordered-list-margin-block-start: 0;
  --utrecht-unordered-list-marker-color: var(--haarlemmermeer-color-blue);
  --utrecht-unordered-list-marker-content: '>';
}

.medium {
  /* Montserrat Medium = 500 */
  font-weight: var(--haarlemmermeer-typography-weight-scale-semi-bold-font-weight);
  font-family: var(--haarlemmermeer-typography-sans-serif-font-family);
}

.semibold {
  /* Montserrat Semi-bold = 600 */
  font-weight: var(--haarlemmermeer-typography-weight-scale-bold-font-weight);
  font-family: var(--haarlemmermeer-typography-sans-serif-font-family);
}

.bold {
  /* Montserrat Bold = 700 */
  font-weight: var(--haarlemmermeer-typography-weight-scale-bold-font-weight);
  font-family: var(--haarlemmermeer-typography-sans-serif-font-family);
}

.extrabold {
  /* Montserrat Extra Bold = 800 */
  font-weight: 800;
  font-family: var(--haarlemmermeer-typography-sans-serif-font-family);
}

.black {
  /* Montserrat Black = 900 */
  font-weight: 900;
  font-family: var(--haarlemmermeer-typography-sans-serif-font-family);
}



@media (min-width: 768px) {
  .openforms-theme .utrecht-form-label {
    padding-top: 16px !important;
  }
}

.openforms-theme .utrecht-form-label {
  padding-top: 16px !important;
}

.openforms-form-control.openforms-form-control--content:not(.formio-component-content):not(:first-child) {
  padding-top: 0px !important;
  margin-top: 0px !important;
}


@media (min-width: 768px) {
  .openforms-form-control.openforms-form-control--content:not(.formio-component-content):not(:first-child) {
    padding-top: 0px !important;
    margin-top: 0px !important;
  }
}

.openforms-fieldset {
  border: none;
  border-width: none;
}

.openforms-fieldset .openforms-legend {
  margin: 0;
  padding: 1rem 0px;
  font-size: 1.25rem;
  font-weight: 600;
}

.utrecht-textbox.utrecht-textbox--openforms {
  font-weight: 400;
}

.utrecht-textarea.utrecht-textarea--openforms {
  font-weight: 400;
}

.openforms-form-control--select .selection .choices__item {
  background-color: transparent;
  color: var(--of-color-fg);
}

.utrecht-button {
  display: flex;
  margin: 0;
  padding: 10.003px 12px;
  box-sizing: border-box;

  border: 2px solid transparent;
  border: 1px solid #07838F;
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
  border-radius: 0;
  font-family: var(--of-typography-sans-serif-font-family);
  font-size: 1rem;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
  line-height: 1.333;
  text-decoration: none;
}

.utrecht-button--primary-action {
  display: inline-block;
  background-color: var(--haarlemmermeer-color-blue);
  color: var(--utrecht-document-background-color);
  border: 1px solid var(--haarlemmermeer-color-blue) !important;
}

.utrecht-button--secondary-action {
  background-color: transparent;
  border-color: var(--haarlemmermeer-color-blue) !important;
  border-bottom-color: var(--haarlemmermeer-color-blue) !important;
  border-right-color: var(--haarlemmermeer-color-blue) !important;
  border: 1px solid var(--haarlemmermeer-color-blue) !important;
  color: var(--haarlemmermeer-color-blue) !important;
}


.utrecht-button--secondary-action:not([aria-disabled="true"]):hover {
  border: 1px solid var(--haarlemmermeer-color-blue) !important;
  color: var(--haarlemmermeer-color-blue) !important;
  border-bottom-color: var(--haarlemmermeer-color-blue) !important;
  border-right-color: var(--haarlemmermeer-color-blue) !important;
  background-color: transparent !important;
}

.utrecht-button.utrecht-button--anchor {
  border: 1px solid var(--haarlemmermeer-color-blue) !important;
  color: var(--of-button-primary-fg) !important;
  border-bottom-color: var(--haarlemmermeer-color-blue) !important;
  border-right-color: var(--haarlemmermeer-color-blue) !important;
  background-color: var(--haarlemmermeer-color-blue) !important;
}

/* .utrecht-button.utrecht-button--anchor:not([aria-disabled="true"]):hover {
  border: 1px solid var(--haarlemmermeer-color-blue-hover)!important;
  color: var(--of-button-primary-fg)!important;
  border-bottom-color: var(--haarlemmermeer-color-blue-hover)!important;
  border-right-color: var(--haarlemmermeer-color-blue-hover)!important;
  border-color: var(--haarlemmermeer-color-blue-hover)!important;
  text-decoration: none;
  background-color: var(--haarlemmermeer-color-blue-hover)!important;
} */

.utrecht-button.utrecht-button--primary-action.utrecht-button--danger {
  background: transparent;
}

.utrecht-button.utrecht-button--danger {
  border: 1px solid var(--haarlemmermeer-color-purple) !important;
  color: var(--haarlemmermeer-color-purple);
}

.utrecht-button.utrecht-button--primary-action.utrecht-button--danger:not([aria-disabled="true"]):hover {
  color: var(--of-button-primary-fg) !important;
  background: var(--haarlemmermeer-color-purple);
}

.utrecht-button.utrecht-button--icon-only.utrecht-button--danger:not(.utrecht-button.utrecht-button--primary-action.utrecht-button--danger.utrecht-button.utrecht-button--danger) {
  border: none !important;
}

.fa-trash-can {
  color: var(--haarlemmermeer-color-purple) !important;
}

.fa-trash-can:hover {
  color: #8E3079 !important;
}

.browse {
  font-family: var(--utrecht-document-font-family, inherit) !important;
}

.openforms-list {
  padding: 30px 0 20px 8px !important;
  border: 1px solid #ececec !important;
  border-left-width: 4px !important;
}

.openforms-progress-indicator-item__label {
  color: var(--haarlemmermeer-color-purple) !important;
}

.openforms-progress-indicator-item__marker {
  color: var(--haarlemmermeer-color-purple) !important;
  /* border-left: 4px solid var(--haarlemmermeer-color-purple)!important; */
  background: transparent;
}

.openforms-progress-indicator-item {
  position: relative;
}

/* Dit is de paarse marker links van het geactiveerde item in het menu */
a.utrecht-link.utrecht-link--openforms.utrecht-link--current.utrecht-link--openforms-hover.utrecht-link--openforms-inherit::before {
  content: '';
  position: absolute;
  left: -12px;
  width: 4px;
  height: 21px;
  background-color: var(--haarlemmermeer-color-purple);
}

/* Deze zijn om van de 'Vorige stap' link een knop te maken */
.openforms-toolbar__list-item .utrecht-link.utrecht-link--openforms {
  background-color: var(--haarlemmermeer-color-blue);
  color: var(--utrecht-document-background-color);
  border: 1px solid var(--haarlemmermeer-color-blue) !important;
  display: flex;
  margin: 0;
  padding: 10.003px 12px;
  box-sizing: border-box;
  border: 2px solid transparent;
  border: 1px solid #07838F;
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
  border-radius: 0;
  font-family: var(--of-typography-sans-serif-font-family);
  font-size: 1rem;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
  line-height: 1.333;
  text-decoration: none;
}

.openforms-toolbar__list-item .utrecht-link.utrecht-link--openforms:hover:not(:disabled, [aria-disabled="true"], .utrecht-button--disabled) {
  background-color: var(--utrecht-button-primary-action-hover-background-color);
  color: var(--utrecht-document-background-color);
}

/* De 'Terug naar de website' knop op de dankpagina is zowel een button als een link, dus zou dubbele padding krijgen */
.openforms-toolbar__list-item .utrecht-link.utrecht-link--openforms>button.utrecht-button.utrecht-button--primary-action {
  padding: 0;
}

.openforms-formio-content a:hover {
  color: var(--haarlemmermeer-color-purple);
}

.utrecht-button.utrecht-button--submit.utrecht-button--primary-action.utrecht-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #CCCCCC !important;
  border: 1px solid #CCCCCC !important;
}

.openforms-body.openforms-body--wysiwyg a:hover {
  color: var(--haarlemmermeer-color-purple);
}

/*  Maak de markers van ordered- en unordered lists HLMR-paars */
ul li::marker,
ol li::marker {
  color: #9D2F87;
}

/*  Maak de markers van unordered lists vierkantjes, overeenkomstig hoe het op de haarlemmermeergemeente.nl website staat  */
.openforms-formio-content ul li {
  list-style: square;
}

/* Dankpagina knop geen padding plus kleur */
.utrecht-link--openforms .utrecht-button--secondary-action {
  padding: 0 0;
  color: white !important
}

.utrecht-button-link.utrecht-button-link--secondary-action,
.utrecht-button-link--secondary-action {
	border: 1px solid var(--haarlemmermeer-color-purple) !important;
}
.utrecht-button-link.utrecht-button-link--secondary-action:hover,
.utrecht-button-link--secondary-action:hover {
	border-color: var(--haarlemmermeer-color-purple) !important;
	border-bottom-color: var(--haarlemmermeer-color-purple) !important;
	border-right-color: var(--haarlemmermeer-color-purple) !important;
	border: 1px solid var(--haarlemmermeer-color-purple) !important;
	color: var(--haarlemmermeer-color-purple) !important;

}
.openforms-fieldset .openforms-fieldset__legend {
	margin-inline-start: 0;
	margin-left: 0;
	padding-inline: 0;
	font-weight: 600;
}

.openforms-form-navigation {
    display: grid;
    grid-template-rows: auto auto auto auto;
    row-gap: 20px;
	row-gap: 20px;
}	
.openforms-form-navigation .utrecht-icon {
	display: none !important;
}
.openforms-form-navigation .openforms-form-navigation__next-button {
	grid-row: 1;
}
.openforms-form-navigation .openforms-form-navigation__save-button {
	grid-row: 2;
	background-color: transparent;
    border-color: var(--haarlemmermeer-color-blue) !important;
    border-bottom-color: var(--haarlemmermeer-color-blue) !important;
    border-right-color: var(--haarlemmermeer-color-blue) !important;
    border: 1px solid var(--haarlemmermeer-color-blue) !important;
    color: var(--haarlemmermeer-color-blue) !important;
	padding: 10px 12px;
    text-decoration: none;
}
.openforms-form-navigation .openforms-previous-link {
	grid-row: 3;
	justify-content: center;
}
.openforms-form-navigation .openforms-abort-button {
	grid-row: 4;
	background-color: transparent;
	border-color: var(--haarlemmermeer-color-purple) !important;
	border-bottom-color: var(--haarlemmermeer-color-purple) !important;
	border-right-color: var(--haarlemmermeer-color-purple) !important;
	border: 1px solid var(--haarlemmermeer-color-purple) !important;
	color: var(--haarlemmermeer-color-purple) !important;
	padding: 10px 12px;
    text-decoration: none;
}


@media (min-width: 768px) {
	.openforms-form-navigation {
		display: grid;
		grid-template-columns: auto 1fr auto auto;
		grid-template-rows: auto auto auto auto;
		column-gap: 20px;
		row-gap: 20px;
	}	
	.openforms-form-navigation .openforms-form-navigation__next-button {
		grid-column: 4;
		grid-row: 1;
	}
	.openforms-form-navigation .openforms-form-navigation__save-button {
		grid-column: 3;
		grid-row: 1;
	}
	.openforms-form-navigation .openforms-previous-link {
		grid-column: 1;
		grid-row: 1;
	}
	.openforms-form-navigation .openforms-abort-button {
		grid-column: 1;
		grid-row: 2;
	}
}

@media (min-width: 769px) {
  #openforms-container {
    margin-bottom: 15px;
    background-color: white;
  }

  /* Zorg ervoor dat hierboven genoemde links ook een witte achtergrond hebben wanneer ze door afwijkende schermgrootte buiten het kader vallen */
  .a11y-toolbar .utrecht-link.utrecht-link--openforms {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: 400;
    background-color: white;
  }

  .a11y-toolbar__list-item>a::first-line {
    background-color: initial;
  }

  /* Maak de tekstkleur van de 'Tussentijds opslaan' knop wit als deze geactiveerd is */
  .utrecht-button[name="save"]:focus {
    color: white !important;
  }

  .utrecht-button[name="save"]:active {
    color: white !important;
  }

  /* Laat de 'Uitloggen' knop onder de 'Vorige stap' knop verschijnen (ipv. onder de 'Volgende stap') */
  .utrecht-button[name="abort"] {
    position: absolute;
    left: 0;
  }
  
}