* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 24px;
  line-height: 2rem;
  font-weight: 400;
  margin-bottom: 0.5em;
}

:root {
  --ns-main: #ffc917;
  --ns-darkblue: #003082;
  --ns-lightblue: #0063d3;
  --inputbackground: #dee5fe;
  --ns-white: #ffffff;
  --ns-grey: #070721;
  --ns-grey-10: #202037;
  --ns-grey-20: #39394d;
  --ns-grey-30: #515164;
  --ns-grey-40: #6a6a7a;
  --ns-grey-50: #838390;
  --ns-grey-60: #9c9ca6;
  --ns-grey-70: #b5b5bc;
  --ns-grey-80: #cdcdd3;
  --ns-grey-90: #e6e6e9;
  --ns-grey-94: #f0f0f2;
  --ns-red-alert: #db0029;
  --ns-green: #009a42;
  --ns-ovchip: #ff0098;
  --ns-ovorange: #ff7700;
  --ns-light-blue: #0079d3;
  --ns-light-blue-2: #005ca0;
  --ns-yellow-2: #ffb519;
  --ns-hover-blue: #004ba0;
}

legend {
  color: var(--ns-light-blue);
  font-size: 0.9rem;
  font-weight: 100;
  margin: 1em 0 1em 0;
}

header {
  background-color: var(--ns-main);
  height: 8vh;
  width: 100vw;
  padding: 1em;
  display: flex;
  gap: 0.5em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 2em;
}

body {
  font-family: NS Sans, Segoe UI, Myriad, Verdana, sans-serif;
  background-color: var(--ns-white);
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: var(--ns-grey-94);
}

h2 {
  color: var(--ns-darkblue);
}

fieldset {
  display: flex;
  flex-direction: column;
}

.tab-content {
  flex: 1;
}

.card {
  padding: 1em;
}
.vraagenIput {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0 0.5rem 0;
  padding: 0.2rem 0;
}

.uitkeringdetails {
  opacity: 1;
  max-height: 1000em;
  pointer-events: all;
  filter: saturate(1);
  transition: opacity 0.3s ease, max-height 0.5s ease, pointer-events 0.3s ease;
  overflow: hidden;
}

form:has(#uitkeringN:checked) .uitkeringdetails {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  filter: saturate(0);
  cursor: default;
}

.extrainfodatum {
  opacity: 1;
  max-height: 300em;
  pointer-events: all;
  filter: saturate(1);
  cursor: pointer;
  transition: opacity 0.3s ease, max-height 0.5s ease, pointer-events 0.3s ease;
}

form:has(#uitkeringstop1:checked) .extrainfodatum {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  filter: saturate(0);
  cursor: default;
}

/* Dit zorgt ervoor dat de classes die dingen verbergen alleen worden ge applied als er js is zodat als er geen js alles nog steeds werkt */

form {
  background-color: var(--ns-white);
  padding: 1em;
  width: 70vw;
  display: flex;
  gap: 2em;
  min-height: 80vh;
}
.radiobuttons {
  display: flex;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  gap: 1em;
}

.radiobuttons1 {
  display: flex;
  flex-direction: column;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

fieldset {
  border: none;
  gap: 0.5em;
}

b {
  font-weight: bold;
}
section {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease;
  width: 90%;
}

form:has(#tab1:checked) .sectie1,
form:has(#tab2:checked) .sectie2,
form:has(#tab3:checked) .sectie3,
form:has(#tab4:checked) .sectie4 {
  opacity: 1;
  max-height: 130vh;
}

nav {
  background-color: var(--ns-main);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
nav input[type="radio"] {
  display: none;
}

nav label {
  margin-bottom: 0.5em;
}

nav input[type="radio"]:checked + label {
  background-color: var(--ns-hover-blue);
}

label {
  font-size: 0.9rem;
}

/* button style komt van de NS website zelf */
.ns-button {
  display: inline-block;
  position: relative;
  height: 2.8125rem;
  padding: 0.625rem 1.125rem;
  vertical-align: top;
  width: 7.5rem;
  font-weight: 400;
  white-space: nowrap;
  background-color: var(--ns-light-blue);
  color: var(--ns-white);
  box-shadow: inset 0 -0.125rem 0 var(--ns-light-blue-2);
  text-align: center;
  line-height: 1.5625rem;
  font-size: 1rem;
  border: none;
  text-decoration: none;
  transition: box-shadow 0.15s ease-in-out;
}

.ns-button:hover {
  box-shadow: inset 0 -3.125rem 0 var(--ns-hover-blue);
  color: var(--ns-white);
  cursor: pointer;
  text-decoration: none;
}

#partnerDetails {
  opacity: 1;
  transition: opacity 0.3s ease, max-height 0.5s ease, pointer-events 0.3s ease;
  overflow: hidden;
}

form:has(#partnerN:checked) #partnerDetails {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  filter: saturate(0);
  cursor: default;
}

form:has(#partnerJ:checked) #partnerDetails {
  opacity: 1;
  max-height: 300em;
  pointer-events: all;
  filter: saturate(1);
  cursor: pointer;
}

.akteDetails {
  opacity: 0;
  max-height: 0;
  transition: opacity 0.3s ease, max-height 0.5s ease, pointer-events 0.3s ease;
  overflow: hidden;
}

form:has(#akteN:checked) .akteDetails {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  filter: saturate(0);
  cursor: default;
}

form:has(#akteJ:checked) .akteDetails {
  opacity: 1;
  max-height: 300em;
  pointer-events: all;
  filter: saturate(1);
  cursor: pointer;
}

.andersDetails {
  opacity: 0;
  max-height: 0;
  transition: opacity 0.3s ease, max-height 0.5s ease, pointer-events 0.3s ease;
  overflow: hidden;
}

form:has(#broerZus:checked) .andersDetails,
form:has(#vaderMoeder:checked) .andersDetails,
form:has(#neefNicht:checked) .andersDetails {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  filter: saturate(0);
  cursor: default;
}

form:has(#anders:checked) .andersDetails {
  opacity: 1;
  max-height: 300em;
  pointer-events: all;
  filter: saturate(1);
  cursor: pointer;
}

.andersDetails-2 {
  opacity: 0;
  max-height: 0;
  transition: opacity 0.3s ease, max-height 0.5s ease, pointer-events 0.3s ease;
  overflow: hidden;
}

form:has(#broerZus-2:checked) .andersDetails-2,
form:has(#vaderMoeder-2:checked) .andersDetails-2,
form:has(#neefNicht-2:checked) .andersDetails-2 {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  filter: saturate(0);
  cursor: default;
}

form:has(#anders-2:checked) .andersDetails-2 {
  opacity: 1;
  max-height: 300em;
  pointer-events: all;
  filter: saturate(1);
  cursor: pointer;
}

.andersDetails-3 {
  opacity: 0;
  max-height: 0;
  transition: opacity 0.3s ease, max-height 0.5s ease, pointer-events 0.3s ease;
  overflow: hidden;
}

form:has(#broerZus-3:checked) .andersDetails-3,
form:has(#vaderMoeder-3:checked) .andersDetails-3,
form:has(#neefNicht-3:checked) .andersDetails-3 {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  filter: saturate(0);
  cursor: default;
}

form:has(#anders-3:checked) .andersDetails-3 {
  opacity: 1;
  max-height: 300em;
  pointer-events: all;
  filter: saturate(1);
  cursor: pointer;
}
/*styling voor radio buttons https://www.ns.nl/formulieren/sponsorverzoek.html*/
/*https://www.ns.nl/platform/fundamentals/index.html stylesheet NS*/

input:not(input[type="radio"]) {
  background-color: var(--ns-grey-94);
  padding: 0.625rem 0.875rem;
  height: 2.5rem;
  transition: all 0.3s ease;
  border: none;
}

input:focus {
  border-color: var(--ns-lightblue);
}

input:user-invalid {
  background-image: linear-gradient(
    to left,
    var(--ns-red-alert) 5px,
    transparent 5px
  );
}

input:user-valid {
  background-image: linear-gradient(
    to left,
    var(--ns-green) 5px,
    transparent 5px
  );
}

input::user-valid:not(:focus) {
  border-color: var(--ns-green);
  background-image: linear-gradient(to left, #009a42 5px, transparent 5px);
  background-size: 100% 100%;
}

/* input:user-invalid:not(:placeholder-shown):not(:focus) {
  border-color: #db0029; 
  background-image: linear-gradient(to left, #db0029 5px, transparent 5px);
  background-size: 100% 100%;
}


input:required:invalid {
  border-color: #db0029; 
  background-image: none;
} */