/* --- custom form elements --- */
/* rounded */
.dropdown-custom-container,
.dropdown-custom-container-incomplete{
position: relative;
}
.dropdown-custom-container:after,
.dropdown-custom-container-incomplete:after{
position: absolute;
content: "";
top: 19px;
right: 20px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: var(--dim-grey) transparent transparent transparent;
}
.dropdown-custom-container-incomplete:after{
border-color: var(--salmon) transparent transparent transparent;
}
select.dropdown-custom,
select.dropdown-custom-incomplete{
appearance: none;
background-color: transparent;
margin: 0;
width: 100%;
font-family: var(--font-rubik);
font-weight: var(--font-weight-medium);
font-size: 16px;
background-color: #FFF;
color: var(--orange);
padding: var(--padding-m) var(--padding-l) var(--padding-m) var(--padding-xl);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
border: 1px solid var(--soft-grey);
cursor: pointer;
outline: none;
}
select.dropdown-custom-incomplete{
background-color: var(--light-salmon);
color: var(--salmon);
border: 1px solid var(--salmon);
}
select.dropdown-custom::-ms-expand,
select.dropdown-custom-incomplete::-ms-expand{
display: none;
}
/* flat */
.dropdown-custom-container-flat{
position: relative;
}
.dropdown-custom-container-flat:after{
position: absolute;
content: "";
top: 9px;
right: 0px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: var(--salmon) transparent transparent transparent;
}
select.dropdown-custom-flat{
appearance: none;
background-color: transparent;
margin: 0;
width: 100%;
font-family: var(--font-rubik);
font-weight: var(--font-weight-regular);
font-size: var(--font-l);
background-color: var(--light-grey);
color: var(--orange);
padding: 2px 16px var(--padding-xs) 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: 0px;
border-bottom: 1px solid var(--salmon);
cursor: pointer;
outline: none;
}
select.dropdown-custom-flat::-ms-expand{
display: none;
}
/* minimal */
.dropdown-custom-container-minimal{
position: relative;
width: 180px;
}
.dropdown-custom-container-minimal:after{
position: absolute;
content: "";
top: 14px;
right: 12px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: var(--dark-blue) transparent transparent transparent;
}
select.dropdown-custom-minimal{
appearance: none;
background-color: transparent;
margin: 0;
width: 180px;
font-family: var(--font-karla);
font-weight: var(--font-bold);
font-size: 17px;
letter-spacing: -0.023em;
background-color: var(--real-white);
color: var(--dark-blue);
padding: 5px 16px 8px 12px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: 0px;
border-bottom: 1px solid var(--dark-blue);
cursor: pointer;
outline: none;
}
select.dropdown-custom-minimal::-ms-expand{
display: none;
}
input[type='radio']:after {
width: 20px;
height: 20px;
border-radius: 20px;
top: -2px;
left: -2px;
position: relative;
background-color: var(--white);
border: 1px solid var(--salmon);
content: '';
display: inline-block;
visibility: visible;
}
input[type='radio']:checked:after {
width: 20px;
height: 20px;
border-radius: 20px;
top: -2px;
left: -2px;
position: relative;
background-color: var(--orange);
border: 1px solid var(--orange);
content: '';
display: inline-block;
visibility: visible;
}
input[type='radio']:disabled:after {
width: 20px;
height: 20px;
border-radius: 20px;
top: -2px;
left: -2px;
position: relative;
background-color: var(--white);
border: 1px solid var(--dim-grey);
content: '';
display: inline-block;
visibility: visible;
}
.input-title,
.input-title-orange,
.input-title-incomplete{
font-family: var(--font-karla);
font-weight: var(--font-regular);
font-size: var(--font-l);
color: var(--dim-grey);
}
.input-title-incomplete{
color: var(--salmon);
}
.input-title-orange{
color: var(--orange);
}
.input-aanvraag{
font-family: var(--font-rubik);
font-weight: var(--font-weight-semibold);
font-size: 16px;
color: var(--orange);
background-color: #FFF;
border: 1px solid var(--soft-grey);
letter-spacing: -0.012em;
text-align: left;
width: 100%;
padding: var(--padding-m) var(--padding-l) var(--padding-m) var(--padding-l);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
outline: none;
}
.input-aanvraag-incomplete{
font-family: var(--font-rubik);
font-weight: var(--font-weight-semibold);
font-size: 16px;
color: var(--salmon);
background-color: var(--light-salmon);
border: 1px solid var(--salmon);
letter-spacing: -0.012em;
text-align: left;
width: 100%;
padding: var(--padding-m) var(--padding-l) var(--padding-m) var(--padding-l);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
outline: none;
}
.input-submit{
background-color: var(--orange);
font-family: var(--font-karla);
font-size: 19px;
font-weight: var(--font-semibold);
letter-spacing: -0.022em;
color: var(--white);
text-decoration: none;
padding: 18px 28px;
border: 0px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
transition: all 440ms;
}
.input-submit:hover{
background-color: var(--orange2);
color: var(--white);
padding: 18px 32px;
border: 0px;
text-decoration: none;
transition: all 440ms;
}
.input-feedback-element{
font-family: var(--font-rubik);
font-size: var(--font-l);
font-weight: var(--font-regular);
letter-spacing: 0.012em;
color: var(--dark-blue);
background-color: #FFF;
padding: 4px 12px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.02);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.02);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.02);
border: 0px solid var(--dark-blue);
display: inline-block;
margin: 0px var(--padding-xs) var(--padding-s) var(--padding-xs);
}
.aanvraag-progress-step{
color: var(--dim-grey);
background-color: var(--white);
}
.aanvraag-progress-step-active{
color: var(--white);
background-color: var(--salmon);
}
.aanvraag-progress-step-completed{
color: var(--turquoise);
background-color: var(--white);
}