<button class="c-button js-pop-up-trigger ">
<span class="c-button__text">toggle pop-up</span>
</button>
<div class="c-pop-up c-pop-up--dark js-pop-up">
<div class="c-pop-up__container">
<div class="c-pop-up__content c-bubble c-bubble--small-corners">
<div class="c-pop-up__header">
<h3 class="c-pop-up__title">Rekentool</h3>
<button class="c-pop-up__button c-button c-button--close">
<span class="fal fa-times c-bubble__icon" aria-hidden="true"></span>
</button>
</div>
<fieldset class="l-form__fieldset c-formfieldset ">
<div class="l-grid l-grid--with-spacing l-grid--align-middle">
<div class="l-grid__col l-grid__col--12 l-grid__col--5@desktop">
<div class="l-form__subtitle">
Wat is je bruto maandinkomen?
</div>
</div>
<div class="l-grid__col l-grid__col--7@desktop">
<div class="l-grid l-grid--with-spacing l-grid--align-middle">
<div class="c-formfield l-grid__col l-grid__col--6@desktop">
<label class="c-formfield__container ">
<div class="c-input ">
<div class="c-input__wrapper
">
<input id="" class="c-input__field" type="text" name="monthlyIncome" placeholder="€ 0" value="" />
</div>
</div>
</label>
</div>
<div class="c-formfield c-formfield--select-alternative l-grid__col l-grid__col--6@desktop">
<label class="c-formfield__container ">
<div class="c-input c-input--select ">
<div class="c-input__wrapper
c-input__wrapper--with-icon
">
<select class="c-input__select" id="monthlyIncomePeriod" name="monthlyIncomePeriod">
<option selected disabled>maand</option>
<option value="">optie 1</option>
<option value="">optie 2</option>
<option value="">optie 3</option>
</select>
<span class="c-input__icon far fa-chevron-down"></span>
</div>
</div>
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="l-form__fieldset c-formfieldset ">
<div class="l-grid l-grid--with-spacing l-grid--align-middle">
<div class="l-grid__col l-grid__col--12 l-grid__col--5@desktop">
<div class="l-form__subtitle">
vakantiegeld?
</div>
</div>
<div class="l-grid__col l-grid__col--7@desktop ">
<div class="l-grid l-grid--with-spacing l-grid--align-middle">
<div class="c-formfield c-formfield__item l-grid__col--2">
<label class="c-formfield__container ">
<input class="c-formfield__input" type="radio" name="hasHolidayPay" value="ja" />
<span class="c-formfield__holder">
<span class="fa fa-circle c-formfield__icon"></span>
</span>
<p class="c-formfield__label">ja</p>
</label>
</div>
<div class="c-formfield c-formfield__item l-grid__col--2">
<label class="c-formfield__container ">
<input class="c-formfield__input" type="radio" name="hasHolidayPay" value="nee" checked />
<span class="c-formfield__holder">
<span class="fa fa-circle c-formfield__icon"></span>
</span>
<p class="c-formfield__label">nee</p>
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="l-form__fieldset c-formfieldset ">
<div class="l-grid l-grid--with-spacing l-grid--align-middle">
<div class="l-grid__col l-grid__col--12 l-grid__col--5@desktop">
<div class="l-form__subtitle">
percentage vakantiegeld op basis van je brutoloon?
</div>
</div>
<div class="l-grid__col l-grid__col--7@desktop">
<div class="l-grid l-grid--with-spacing l-grid--align-middle">
<div class="c-formfield c-formfield__item l-grid__col l-grid__col--12">
<label class="c-formfield__container ">
<div class="c-input ">
<div class="c-input__wrapper
">
<input id="" class="c-input__field" type="text" name="monthlyIncome" placeholder="8" value="" />
</div>
</div>
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="l-form__fieldset c-formfieldset ">
<div class="l-grid l-grid--with-spacing l-grid--align-middle">
<div class="l-grid__col l-grid__col--12 l-grid__col--5@desktop">
<div class="l-form__subtitle">
Vaste 13de maand?
</div>
</div>
<div class="l-grid__col l-grid__col--7@desktop ">
<div class="l-grid l-grid--with-spacing l-grid--align-middle">
<div class="c-formfield c-formfield__item l-grid__col--2">
<label class="c-formfield__container ">
<input class="c-formfield__input" type="radio" name="hasThirteenthMonth" value="ja" />
<span class="c-formfield__holder">
<span class="fa fa-circle c-formfield__icon"></span>
</span>
<p class="c-formfield__label">ja</p>
</label>
</div>
<div class="c-formfield c-formfield__item l-grid__col--2">
<label class="c-formfield__container ">
<input class="c-formfield__input" type="radio" name="hasThirteenthMonth" value="nee" checked />
<span class="c-formfield__holder">
<span class="fa fa-circle c-formfield__icon"></span>
</span>
<p class="c-formfield__label">nee</p>
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="l-form__fieldset c-formfieldset ">
<div class="l-grid l-grid--with-spacing l-grid--align-middle">
<div class="l-grid__col l-grid__col--12 l-grid__col--5@desktop">
<div class="l-form__subtitle">
Hoeveel bedraagt je 13de maand?
</div>
</div>
<div class="l-grid__col l-grid__col--7@desktop">
<div class="l-grid l-grid--with-spacing l-grid--align-middle">
<div class="c-formfield c-formfield__item l-grid__col l-grid__col--12">
<label class="c-formfield__container ">
<div class="c-input ">
<div class="c-input__wrapper
">
<input id="" class="c-input__field" type="text" name="thirteenthMonth" placeholder="€ 0" value="" />
</div>
</div>
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="l-grid l-form__fieldset c-formfieldset ">
<div class="l-grid__col c-pop-up__footnote ">
<span>Bruto jaarinkomen?</span>
<span class="c-pop-up__footnote-result">€ 0,00</span>
</div>
</fieldset>
<div class="c-pop-up__submit">
<button class="c-button ">
<span class="c-button__text">Bevestig inkomen</span>
</button>
</div>
</div>
</div>
</div>
