[optional=True][is-hidden=True] {
    display: none;
}

.HnpEyemoveProjectInterestQuestion span:before {
    content: "Omschrijving ▼";
}

.HnpEyemoveProjectInterestQuestion .description ,
.HnpEyemoveProjectInterestQuestion .thumbnail {
    display: none;
}

.HnpEyemoveProjectInterestQuestion li.expanded span:before {
    content: "Verbergen ▲";
}

.HnpEyemoveProjectInterestQuestion li.expanded .description ,
.HnpEyemoveProjectInterestQuestion li.expanded .thumbnail {
    display: block;
}

*, ::before, ::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font: normal 18px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
    background: #3AAFAB;
    color: #fff;
    padding: 50px 0;
}

body ,
input {

}

#questionaire {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

form ,
#results {
    min-height: 50vh;
    overflow-y: auto;
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

form ul {
    list-style-type: none;
    padding: 0;
}

.error ,
form > ul > li > output {
    color: red;
    font-size: 80%;
}

form > ul > li {
    flex: 1 1 800px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

form > ul > li > label {
    flex: 0 0 200px;
}

form ,
form > ul {
    border: 0;
    margin: 0;
    padding: 0;
}

form > ul > li > label + *{
    flex: 1 1 400px;
}

#confirm ul > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 1vh 0;
}

#confirm ul > li > label {
    flex: 1 0 120px;
    max-width: 220px;
}

#confirm ul > li > label + * {
    flex: 1 0 220px;
}

.HiddenQuestion {
    display: none;
}

li.expanded>.toggleParentExpanded::after {
    content: "⯅";
}

.toggleParentExpanded::after {
    padding: 0 5px;
    content: "⯆";
}

/*
li>.models {
    display: none;
}
*/

li.expanded>.models, li.mandatory>.models {
    display: block;
}

li>.info {
    display: none;
}

li.expanded>.info {
    display: block;
}

.hidden {
    display: none;
}