@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 {
  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;
}

/*  Zorg er voor dat de 'Printen' en 'Terug naar boven' links binnen het hoofdkader met witte achtergrond vallen. Nodig voor toegankelijkheid/contrast */
@media (min-width: 992px) {
#openforms-container {
        margin-bottom: -50px;
        margin-right: -25px;
        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;
  background-color: white;
}*/

@media (max-width: 768px) {
  .a11y-toolbar {
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 15px;
  }
    
  .a11y-toolbar .utrecht-link.utrecht-link--openforms {
    background: white;
    padding-left: 10px;
    padding-right: 10px;
  }
}


@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 {
	margin-left: auto;
	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; 
}

/* Verberg het StUF zaaknummer en de downloadlink + icoon */
.openforms-app--no-progress-indicator .openforms-title {
  display: none;
}
.openforms-body .utrecht-link.utrecht-link--openforms {
  display: none;
}

/* Verberg de downloadknop */
.fa-download{
  display: none;
}


.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;
	}
}