/* Lovink Keuzehulp CSS Stylesheet */

body{margin:0; padding:0; box-sizing:border-box; font-family:'Borna';}

#wrapper {
  --red:#E42C2A;
  --blue:#03298B;
  --lightBlue:#EDF0F7;
  --grey:#656565;

  --borderRadius:0 16px 0 16px;
}

/* Body */
#wrapper {font-family:'Borna'; font-weight:400; font-size:16px; width:100%; overflow-x:hidden;}
#wrapper .center {text-align:center;}

/* Button */
#wrapper #main .button.info {background:transparent; border:none; font-size:24px; position:relative; z-index:9;}
#wrapper #main .button.info:hover {cursor:pointer; color:var(--blue);}

/* Titles */
#wrapper .title {font-family:'Borna'; font-weight:700; margin:0;}
#wrapper h1.title {font-size:3rem; text-align:center;}
#wrapper h2.title {font-size:1.6rem;}
#wrapper h3.title {font-size:1.6rem;}
#wrapper h4.title {font-size:3rem;}
#wrapper h5.title {font-size:3rem;}
#wrapper h6.title {font-size:3rem;}

/* Content */
#wrapper {display:flex; min-height:100vh;}
#wrapper #main {width:100%; display:flex; justify-content:center;}
#wrapper #main .content {display:flex; flex-direction:column; gap:64px; padding:64px 32px;}
#wrapper #main .content .container {display:flex; flex-direction:column; gap:32px; max-width:640px;}
#wrapper #main .content .container .form-wrapper {display:flex; flex-direction:column; gap:32px;}
#wrapper #main .content .container .form-wrapper .form-row {display:flex; flex-direction:column; gap:16px;}
#wrapper #main .content .container .form-wrapper .form-row p {margin:0;}
#wrapper #main .content .container .form-wrapper .form-row .question {display:flex; flex-direction:column; gap:16px;}
#wrapper #main .content .container .form-wrapper .form-row .question .question-row {display:flex; flex-direction:column; gap:16px;}
#wrapper #main .content .container .form-wrapper .form-row .question .question-row.horizontal {flex-direction:row; align-items:center;}
#wrapper #main .content .container .form-wrapper .form-row .question .question-row.center {justify-content:center; align-items:center;}

#wrapper #main .content .container .form-wrapper .form-row .question .select-field {background:var(--lightBlue); border-radius:var(--borderRadius); border:2px solid var(--lightBlue); position:relative; }
#wrapper #main .content .container .form-wrapper .form-row .question .select-field:after {content:'\f078'; font-family:'FontAwesome'; position:absolute; right:12px; top:0; height:100%; display:flex; align-items:center; pointer-events:none; font-size:12px;}
#wrapper #main .content .container .form-wrapper .form-row .question .select-field select {background:transparent; border:none; font-size:18px; outline:none; appearance:none; cursor:pointer; font-family:'Borna'; padding:16px 32px;}

#wrapper #main .content .container .form-wrapper .form-row .question .select-field .dropdown {position:relative; width:100%; max-width:440px;}
#wrapper #main .content .container .form-wrapper .form-row .question .select-field .dropdown * {font-family:'Borna';}
#wrapper #main .content .container .form-wrapper .form-row .question .select-field .dropdown .dropdown-toggle {width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 32px; border:none; border-radius:10px; min-width:280px; background:transparent; font-size:18px; cursor:pointer;}
#wrapper #main .content .container .form-wrapper .form-row .question .select-field .dropdown .dropdown-options {position:absolute; left:0; right:0; border:1px solid var(--lightBlue); background:#fff; overflow:auto; display:none; z-index:999; border-bottom:none;}
#wrapper #main .content .container .form-wrapper .form-row .question .select-field .dropdown .dropdown-value {position:absolute; left:0; top:0; height:100%; width:100%; padding:0; margin:0; border:0; opacity:0; pointer-events:none;}
#wrapper #main .content .container .form-wrapper .form-row .question .select-field .dropdown.open .dropdown-options {display:block;}
#wrapper #main .content .container .form-wrapper .form-row .question .select-field .dropdown .dropdown-options .dropdown-option {border-bottom:1px solid var(--lightBlue); display:flex; align-items:center; gap:16px; padding:16px 32px; cursor:pointer;}
#wrapper #main .content .container .form-wrapper .form-row .question .select-field .dropdown .dropdown-options .dropdown-option .dropdown-option-image {width:32px; height:32px; object-fit:contain;}
#wrapper #main .content .container .form-wrapper .form-row .question .select-field .dropdown .dropdown-options .dropdown-option .dropdown-option-text {}

#wrapper #main .content .container .form-wrapper .form-row .question .input-field {background:var(--lightBlue); border-radius:var(--borderRadius); border:2px solid var(--lightBlue); position:relative; overflow:hidden; max-width:440px;}
#wrapper #main .content .container .form-wrapper .form-row .question .input-field label {background:var(--lightBlue); border-radius:var(--borderRadius); padding:0 16px;}
#wrapper #main .content .container .form-wrapper .form-row .question .input-field input {background:#fff; border:none; font-size:18px; outline:none; appearance:none; cursor:pointer; font-family:'Borna'; padding:16px 32px; width:100%;}
#wrapper #main .content .container .form-wrapper .form-row .question .input-field input[type="number"] {width:64px;}
#wrapper #main .content .container .form-wrapper .form-row .question .input-field input[type=number]::-webkit-inner-spin-button,
#wrapper #main .content .container .form-wrapper .form-row .question .input-field input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none; margin:0;}
#wrapper #main .content .container .form-wrapper .form-row .question .input-field input[type=number] {-moz-appearance:textfield;}

#wrapper #main .content .container .form-wrapper .form-row .question .radio-field.large {background:var(--lightBlue); border-radius:var(--borderRadius); padding:32px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between; border:4px solid var(--lightBlue); transition:border .3s;}
#wrapper #main .content .container .form-wrapper .form-row .question .radio-field.large:hover {cursor:pointer;}
#wrapper #main .content .container .form-wrapper .form-row .question .radio-field.large input[type="radio"] {display:none;}
#wrapper #main .content .container .form-wrapper .form-row .question .radio-field.large:has(input[type="radio"]:checked) {border-color:var(--blue);}
#wrapper #main .content .container .form-wrapper .form-row .question .radio-field.large .form-image img {max-width:256px;}
#wrapper #main .content .container .form-wrapper .form-row .question .radio-field.large .radio-label {font-size:24px; flex-shrink:0; color:var(--grey);}

#wrapper #main .content .container .form-wrapper .form-row .question .radio-field.small {display:inline-flex; justify-content:center; align-items:center; gap:12px; cursor:pointer; position:relative;}
#wrapper #main .content .container .form-wrapper .form-row .question .radio-field.small .radio-label {font-size:24px;}

#wrapper #main .content .container .form-wrapper .form-row .question .modal-wrapper {position:relative;}
#wrapper #main .content .container .form-wrapper .form-row .question .modal-wrapper .modal {position:absolute; top:-8px; left:calc(100% + 8px); display:inline-flex; padding:32px; text-align:left; border-radius:var(--borderRadius); z-index:999; width:400px; box-shadow:0 4px 16px rgba(0,0,0,.1); background:#fff; flex-direction:column; gap:16px; opacity:0; visibility:hidden; transform:translateY(-20px); transition:opacity .3s, transform .3s, visibility .3s;}
#wrapper #main .content .container .form-wrapper .form-row .question .modal-wrapper .modal.active {opacity:1; visibility:visible; transform:translateY(0);}
#wrapper #main .content .container .form-wrapper .form-row .question .modal-wrapper .modal .modal-content .title {font-weight:bold; margin-top:0; margin-bottom:16px;}
#wrapper #main .content .container .form-wrapper .form-row .question .modal-wrapper .modal .modal-content .body {line-height:1.8; color:var(--grey);}

#wrapper #main .content .container .form-wrapper .form-row .question .key {display:flex; align-items:center; justify-content:center; color:#fff; background:var(--red); border-radius:999px; width:48px; height:48px; font-size:24px; flex-shrink:0;}

#wrapper #main .content .container .form-wrapper .form-row.submit-wrapper {align-items:center;}
#wrapper #main .content .container .form-wrapper .form-row.submit-wrapper .submit {background:var(--blue); color:#fff; border:none; padding:12px 24px; border-radius:var(--borderRadius); font-size:20px; cursor:pointer;}
#wrapper #main .content .container .form-wrapper .form-row.submit-wrapper .submit i {margin-left:8px; font-weight:400; transition:transform .3s; font-size:16px;}
#wrapper #main .content .container .form-wrapper .form-row.submit-wrapper .submit:hover i {transform:translateX(4px);}

#wrapper #main .content .container .form-wrapper .form-row.voltage-level .question {flex-direction:row; align-items:center; justify-content:center;}

@media (max-width:1200px) {
  #wrapper #main .content {padding:32px 16px; gap:32px;}
  #wrapper #main .content .container {gap:16px;}
  #wrapper #main .content .container .form-wrapper {gap:16px;}
  #wrapper #main .content .container .form-wrapper .form-row {gap:16px;}
  #wrapper #main .content .container .form-wrapper .form-row .question {gap:16px;}
  #wrapper #main .content .container .form-wrapper .form-row .question .question-row {gap:16px;}
}

@media (max-width:800px) {
  #wrapper {font-size:14px; padding-bottom:128px;}
  #wrapper #main .content .container .form-wrapper .form-row.voltage-level .question {flex-direction:column}
  #wrapper #main .content .container .form-wrapper .form-row .question .question-row.horizontal {flex-direction:column; align-items:flex-start;}
  #wrapper #main .content .container .form-wrapper .form-row.options-page .question .question-row.horizontal {flex-direction:row;}
  #wrapper #main .content .container .form-wrapper .form-row .question .select-field {width:100%;}
  
  #wrapper #main .content .container .form-wrapper .form-row .question .input-field input[type="number"],
  #wrapper #main .content .container .form-wrapper .form-row .question .select-field .dropdown .dropdown-toggle {padding:8px 16px; min-width:196px; font-size:16px;}

  #wrapper #main .content .container .form-wrapper .form-row .question .radio-field.large {padding:16px; gap:8px; flex-direction:column;}
  #wrapper #main .content .container .form-wrapper .form-row .question .radio-field.large .radio-label {font-size:18px}

  #wrapper #main .content .container .form-wrapper .form-row .question .radio-field.small .radio-label {font-size:18px;}

  #wrapper #main .content .container .form-wrapper .form-row .question .radio-field.large .form-image img {max-width:196px;}

#wrapper #main .content .container .form-wrapper .form-row .question .input-field input {padding:8px 16px; font-size:16px;}

  #wrapper #main .content .container .form-wrapper .form-row .question .key {width:32px; height:32px; font-size:16px;}

  #wrapper h1.title {font-size:2.4rem;}
  #wrapper h2.title {font-size:1.4rem;}

  #wrapper #main .content .container .form-wrapper .form-row .question .modal-wrapper .modal {position:fixed; top:auto; bottom:0; left:0; width:calc(100% - 32px); padding:16px}
}

@media (max-width:640px) {
  #wrapper h1.title {font-size:2rem;}
  #wrapper h2.title {font-size:1.2rem;}
}