/* General */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

:root {
    --first-color: #000000;
    --accent-color: #ec6e26;
    --accent-color-light: #fdf0e9;
    --accent-color-medium: #f9d4c1;
    --accent-color-hover: #f65d05;
    --background-color: #ffffff;
    --breakline-color: #eeeeee;
    --border-color: #efefef;
    --footer-background-color: #161616;
    --more-info-background: #fafafa;
    --secondary-color: #7e7e7e;
    --action-color: #36369D;
    --action-color-light: #ECEDF6;
    --action-color-hover: #1D1D84;
    --warning-text-color: #b73e17;
    --primary-color: #dd5319;
    --positive-color-background: #e4f1da;
    --positive-color: #194c3c;
    --negative-color-background: #ffe4e9;
    --negative-color: #9e1349;

    --gap-desktop: 2rem;
    --gap-mobile: 1rem;
}

h1 {
    margin-bottom: 1.5rem;
}

h2 {
    margin-bottom: 1.25rem;
}

h3 {
    margin-bottom: 1rem;
}

section {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 1.5rem 0rem;
}

.container {
    max-width: 1440px;
    width: 100%;
    padding: 0rem 1.5rem;
}
.container-fluid {
    padding: 0 1.5rem;
    max-width: 1440px;
}

.row {
    display: block;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.row > * {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.align-center {
    align-items: center;
}
.col {
    flex: 1 0 0%;
}

.border-radius {
    border-radius: 1.5rem;
}

.bg-blue {
    background: var(--action-color-light);
}

.bg-orange {
    background: var(--accent-color-light);
}

.bg-info-section-image {
    background-image: url(images/Info_Section_Background.svg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
}

.padding {
    padding: 1.5rem;
}

.padding-x {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.padding-y {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.padding-top {
    padding-top: 1.5rem;
}

.padding-bottom {
    padding-bottom: 1.5rem;
}

.margin-top {
    margin-top: 1.5rem;
}

.overflow-hidden {
    overflow: hidden;
}

.w-100 {
    width: 100%;
}
.h-100 {
    height: 100%;
}

.fw-600 {
    font-weight: 600;
}
.display-1, .display-2 {
    line-height: 1.33;
    font-weight: 600;
}
.display-1 {
    font-size: 32px;
    margin-bottom: 1rem;
}
.display-2 {
    font-size: 20px;
    margin-bottom: 0.75rem;
}

.label {
    display: inline-block;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    background-color: var(--background-color);
    border-radius: 999px;
    color: var(--warning-text-color);
    padding: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .container {
        padding: 0;
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        padding: 0;
        max-width: 768px;
    }
}

@media (min-width: 960px) {
    .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0;
        max-width: 1024px;
    }
    .container-fluid {
        padding: 0 3rem;
    }
    .row {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
    .row > * {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .padding {
        padding: 3rem;
    }

    .padding-x {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .padding-y {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .padding-top {
        padding-top: 3rem;
    }

    .padding-bottom {
        padding-bottom: 3rem;
    }

    section {
        padding: 3rem 0rem;
    }

    .display-1 {
        font-size: 48px;
        margin-bottom: 1.5rem;
    }
    .display-2 {
        font-size: 30px;
        margin-bottom: 1.25rem;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
    .container-fluid {
        padding: 0 4rem;
    }
    .row {
        margin-left: -2rem;
        margin-right: -2rem;
    }

    .row > * {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .padding {
        padding: 4rem;
    }

    .padding-x {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .padding-y {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .padding-top {
        padding-top: 4rem;
    }

    .padding-bottom {
        padding-bottom: 4rem;
    }

    section {
        padding: 4rem 0rem;
    }
}

.skip {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

.skip:focus {
    left: 1.5rem;
    top: 1.5rem;
    width: auto;
    height: auto;
}
body {
    min-height: 100vh;
    margin: 0;
}

body{ display:flex; flex-direction:column; }
article{ flex:1; }

main {
    flex: 1 0 auto;
}

.section-header {
    display: flex;
    flex-direction: column;
}

.section-header.centered {
    align-items: center;
}

.section-header .title {
    color: var(--first-color);
    font-size: 3em;
}

.section-header .subtitle {
    width: fit-content;
    display: inline-block;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    background-color: var(--background-color);
    border-radius: 999px;
    color: var(--warning-text-color);
    padding: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {

    .section-header {
        margin-bottom: 1rem;
    }

    .section-header .title {
        font-size: 1.8em;
    }
}

.section-container {
    display: flex;
    flex-direction: column;
    max-width: 1440px;
    width: 100%;
    padding: 0rem 5rem;
    gap: 2rem;
}

@media (max-width: 768px) {
    .section-container {
        padding: 0rem 1rem;
        gap: 1rem;
    }
}

.primary {
    color: var(--first-color);
}

.secondary {
    color: var(--accent-color);
}

.button {
    text-decoration: none;
    font-weight: 600;
    padding: 1rem 2rem;
    font-size: 1em;
    border-radius: 0.5rem;
}

.button:hover {
    cursor: pointer;
}

.primary-button {
    background: var(--action-color);
    color: white;
    border: none;
    width: fit-content;
}

.primary-button:hover {
    background: var(--action-color-hover);
}

#jumbotronbutton {
    margin-top: 1rem;
}

.iconEnd {
    margin-left: 0.5rem;
}

.iconStart {
    margin-right: 0.5rem;
}

.iconLarge {
    font-size: x-large;
}

.button-container {
    display: flex;
    justify-content: center;
}

@media (max-width: 576px) {
    .button {
        padding: 0.5rem 1rem;
        text-align: center;
    }

    .iconEnd {
        margin-left: 0.5rem;
    }

    .iconStart {
        margin-right: 0.5rem;
    }
}

/* Header */
header-component {
    position: sticky;
    top: 0;
    z-index: 2;
}

.nav-header {
    background: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px 0px rgb(22 22 22 / 10%);
}

.nav-header button {
    background: none;
    border: none;
    cursor: pointer;
}

.responsive {
    width: 100%;
    height: auto;
}

#logo img{
    width: 250px;
    max-width: 50vw;
}

nav a {
    text-decoration: none;
    color: var(--first-color);
}

nav .nav-item {
    font-weight: 600;
    border-bottom: 3px solid transparent;
}

.nav-item a {
    padding: 0.75rem 1.5rem;
}

.sub-menu {
	position: absolute;
	width: 230px;
	display: none;
    margin-left: -170px;
    list-style-type: none;
}

.sub-menu li:hover, .nav-items li:hover ul li:last-child:hover {
    border-bottom: solid 3px;
    border-color: var(--primary-color);
}

.sub-menu li a{
    width: 100%;
}

#sub-menu-header {
    cursor: pointer;
}

#sub-menu-header:hover #sub-menu-header-icon-down, #sub-menu-header #sub-menu-header-icon-up {
    display: none;
}

#sub-menu-header:hover #sub-menu-header-icon-up, #sub-menu-header #sub-menu-header-icon-down {
    display: flex;
}

.nav-items {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    list-style-type: none;
    justify-content: flex-end;
    width: 100%;
}

.nav-item {
    display: flex;
    align-items: center;
    height: 3rem;
}

.nav-item:hover {
    border-bottom: 3px solid var(--primary-color);
}

.nav-item.active {
    border-bottom: 3px solid var(--primary-color);
}

.nav-item.active a {
    font-weight: 600;
}

nav {
    margin: 0.5rem 5rem;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.nav-items li:hover ul {
	display: flex;
    flex-direction: column;
    top: 3rem;
    background-color: var(--background-color);
    border-radius: 0.5rem;
    box-shadow: 0px 0px 10px 0px rgb(22 22 22 / 10%);
}

.nav-items li.nav-item.sub-menu-item {
    display: none;
}

.toggle {
    display: none;
}

@media screen and (max-width:1300px) {
    nav a {
        padding: 0;
    }
}

@media screen and (max-width: 960px) {
    nav {
        margin: 0.5rem 1rem;
        flex-direction: column;
    }

    nav a#logo {
        align-self: center;
    }

    .nav-items {
        justify-content: center;
        flex-wrap: wrap;
    }

    .nav-items li a {
        display: block;
        padding: 15px 5px;
        text-align: right;
        font-size: 1em;
    }

    .nav-items li.subitem a {
        padding: 15px;
    }

    .toggle {
        display: block;
        order: 1;
        font-size: 1.25em;
    }

    .toggle, .toggle .nf-icon {
        color: var(--accent-color);
    }

    .toggle, .toggle .nf-icon:hover {
        color: var(--accent-color-hover);
    }

    .nav-item {
        order: 2;
        width: 100%;
        text-align: center;
        display: none;
    }

    .active .nav-item {
       display: block;
    }
    
    .nav-items #sub-menu-header {
        display: none;
    }

    .nav-items.active li.nav-item.sub-menu-item {
        display: block;
    }
}

/* Footer */
.footer {
    display: flex;
    justify-content: center;
    background: var(--footer-background-color);
    background-image: url(images/Footer_Background.svg);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    padding: 3rem 1.5rem;
    margin-top: 3rem;
}

#enquete-page .footer, #herbeoordeling-page .footer {
    margin-top: 0rem;
}

.footer-container {
    display: flex;
    width: 100%;
    max-width: 1440px;
    justify-content: space-evenly;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .footer {
        justify-content: flex-start;
        padding: 2rem 1rem;
    }

    .footer-container{
        flex-direction: column;
    }
}

.footer-container #footer-logo {
    height: 40px;
}

.footer a {
    text-decoration: none;
    color: white;
}

ul.link-list {
    padding-left: 0;
}

.footer .link-list {
    display: flex;
    flex-direction: column;
    list-style-type: none;
}

.footer .link-list a {
    line-height: 2rem;
}

p {
    margin-bottom: 0.9rem;
    line-height: 1.5rem;
    color: var(--first-color);
}

#precheck-iframe{
    width: 100%;
    border: 0;
    margin-bottom: -1rem;
}

nfe-enquete-page, .herbeoordeling-form {
    height: 100vh;
    display: block;
}

#enquete-iframe, #herbeoordeling-iframe{
    width: 100%;
    height: 100%;
    border: 0;
}

.bg-image {
    width: 100%;
    height: 100%;
}

/* Jumbotron */
section#jumbotron .section-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 2.5rem;
    flex-wrap: wrap;
}

section#jumbotron .section-container .section-header {
    margin: 0;
}

section#jumbotron .section-container .item {
    display: flex;
    flex-grow: 1;
    flex-basis: 0;

    border-radius: 1rem;
    padding: 2.5rem;
    background: var(--action-color-light);
}

section#jumbotron .section-container .item.noodfondsgesloten {
    background: white;
}

section#jumbotron .section-container .item.noodfondsgesloten .subtitle {
    background-color: var(--accent-color-light);
}

section#jumbotron .section-container .item {
    max-height: fit-content;
}

@media (max-width: 960px) {
    section#jumbotron .section-container .item:not(:first-child) {
        display: none;
    }
}

/* Faq & Accordion */

#faq-info {
    background: var(--accent-color-light);
    background-image: url(images/Info_Section_Background.svg);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top;
    background-size: cover;
    padding: 0rem;
}

.faq-search {
    background: var(--action-color-light);
    padding: 4rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 960px) {
    .faq-search {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .faq-search {
        padding: 1rem;
    }
}

input[name="filter"] {
    width: 100%;
    padding: 1.5rem 1rem;
    font-size: 1em;
    border-radius: 1rem;
    border: 1px solid;
}

nfe-faq-sections {
    width: 100%;
}

.faq-content {
    display: flex;
    gap: 5rem;
    flex-direction: row;
}

nfe-faq-sections .faq-section:not(:first-child) {
    display: none;
}

section[id^="faq-section"] {
    align-items: flex-start;
}

section[id^="faq-section"] .section-container {
    width: 100%;
}

.accordion-item {
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: var(--breakline-color);
    color: var(--first-color);
}

.accordion nfe-faq-accordion-item:first-of-type .accordion-item {
    border-width: 1px 0px 1px 0px;
}

.accordion-item-title-container {
    padding: 1rem 0rem;
}

h2.accordion-item-title-container {
    padding-bottom: 0;
}

h2.accordion-item-title-container .accordion-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: none;
    border: none;
    font-weight: 700;
    font-size: 1em;
    text-align: left;
}

.accordion-button:hover {
    cursor: pointer;
}

.accordion-item-content {
    display: none;
    margin-bottom: 1rem;
}

.accordion-item-content.active {
    display: block;
}

.accordion-item-content p{
    white-space: pre-line;
}

.faq-navigation-container {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    justify-content: center;
    width: 20rem;
    padding-left: 0;
}

.faq-navigation-container.desktop {
    display: block;
}

.faq-navigation-container.mobile {
    display: none;
}

@media (max-width: 960px){
    .faq-navigation-container.desktop {
        display: none;
    }
    .faq-navigation-container.mobile {
        display: block;
    }
    select.faq-navigation-container.mobile {
        padding: 1.5rem 1rem;
        border-radius: 1rem;
        appearance: none;
        background-image: url(images/Select_Chevron_Down.svg);
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1.25em;
        font-size: 1em;
    }
}

@media (max-width: 960px) {
    section#faq-content {
        padding: 4rem 0rem;
    }

    .faq-content {
        flex-direction: column;
        gap: 1rem;
    }

    .faq-navigation-container {
        width: 100%;
    }
}

@media (max-width: 768px) {
    section#faq-content {
        padding: 2rem 0rem;
    }
}

.faq-navigation-item {
    padding: 1rem ;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
}

.faq-navigation-item button {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--first-color);
    font-weight: 600;
}

.faq-navigation-item.active {
    background-color: var(--action-color-light);
    border-left: 3px solid var(--action-color);
}

.faq-navigation-item:hover {
    background: var(--breakline-color);
    cursor: pointer;
}

/* Scroll to top */
[id] {
    scroll-margin-top: 7.5rem;
}

#toTopBtn {
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 99;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 1em;
}

/* Steps Howpage */
.step-number {
    width: 3rem;
    height: 3rem;
    background-color: var(--accent-color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    clear: both;
    border-radius: 2rem;
    padding: 2em;
    font-weight: 600;
}

nfe-situatiecheck-stepitem .step-number {
    background-color: var(--background-color);
}

.step-content {
    width: 100%;
}

.step-number span {
    color: var(--warning-text-color);
    font-size: 1.5em;
}

#how-list .section-container {
    width: 50%
}

@media (max-width: 1440px) {
    #how-list .section-container {
        width: 70%
    }
}

@media (max-width: 960px) {
    #how-list .section-container {
        width: 90%
    }
}

@media (max-width: 768px) {
    #how-list .section-container {
        width: 100%
    }
}

nfe-how-stepitem {
    display: flex;
    align-self: center;
    width: 100%;
    gap: 1rem;
}

nfe-how-stepitem .card {
    width: 100%;
}

@media (max-width: 576px) {
    nfe-how-stepitem, nfe-how-stepitem:nth-child(odd), nfe-how-stepitem:nth-child(even) {
        flex-direction: column;
        align-items: center;
    }

    nfe-how-stepitem .step-content{
        margin-left: 0rem;
    }
}

.step-content__title {
    color: var(--first-color);
    margin: 1rem 0;
}

section#how {
    margin-bottom: 0rem;
}

/* Card */
.card-container {
    display: flex;
    justify-content: space-around;
    gap: 2.5rem;
    flex-wrap: wrap;
}

icon-card, icon-card-clickable {
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
}

.card {
    padding: 2.5rem;
    color: var(--first-color);
    border-radius: 1rem;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

nfe-situatiecheck-list .card {
    background: none;
    padding: 0;
}

.card-link {
    text-decoration: none;
    color: var(--first-color);
}

@media (max-width: 768px) {
    .card {
        padding: 1rem;
        width: 100%;
    }

    .card-container {
        flex-direction: column;
        gap: 1rem;
    }
}

.card-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card__image {
    font-size: 1.5em;
    color: var(--warning-text-color);
}

.card__title {
    font-size: 1.5em;
    font-weight: 600;
}

.card-link .card:hover {
    cursor: pointer;
    color: white;
    background: var(--warning-text-color);
}

.card-link .card:hover .card__image {
    color: white;
}

.card-link:hover .link span {
    color: white;
}

/* Steps Homepage*/
homehow-stepitem {
    width: 100%;
}

homehow-stepitem .step-item img{
    max-width: 360px;
}

.step-wrapper {
    margin-bottom: 2rem;
    align-items: center;
}

.step-item {
    border-bottom: 1px solid var(--border-color);
}

.step-item > * {
    flex: 1 0 0%;
}

.step-item .step-content {
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
    flex-direction: column;
}

.step-item .step-image {
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
    width: 100%;
    height: 100%;
    margin-bottom: 1.5rem;
}

ol.section-container.how-short-container{
    list-style: none;
}
    
@media (max-width: 576px) {
    .step-item, .how-short-container homehow-stepitem:nth-of-type(even) .step-item {
        flex-direction: column;
        align-items: center;
    }

    .step-item .step-content{
        margin-bottom: 1rem;
    }
}

@media (min-width: 1024px) {

    .step-wrapper, .step-item {
        display: flex;
        flex-direction: row;
        gap: 2rem;
    }

    .step-wrapper {
        align-items: flex-start;
    }

    .step-item {
        align-items: center;
    }

    .step-item .step-image {
        margin: 0;
    }
}

#home-news .section-container .section-header {
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
}

#home-news .section-container .news-container {
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
    flex-direction: column;
}

.newsdate {
    color: var(--warning-text-color);
}

homenews-item:hover {
    cursor: pointer;
    background-color: var(--accent-color-light);
}

homenews-item .news-item{
    padding: 1rem;
    display: block;
    text-decoration: none;
}

homenews-item .news-item h2 {
    margin-bottom: 0;
}

homenews-item a:link, homenews-item a:visited, homenews-item a:hover {
    color: black;
}

.news-container homenews-item:not(:last-child) {
    border-bottom: 2px solid var(--border-color);
}

section#home-about {
    padding: 0rem;
}

section#home-how {
    padding-bottom: 0rem;
}

#home-about-bg {
    background: var(--accent-color-light);
    background-image: url(images/Home_About_Background.svg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
    background-size: cover;
    border-radius: 1.5rem;
}

#home-about-container {
    display: flex;
    flex-direction: column;
}

#home-about .section-content {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

#home-about .section-content .about-item {
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
    flex-direction: column;
    gap: 0.75rem;
}
#home-about .section-content .about-item strong {
    display: contents;
}


@media (max-width: 768px) {
    #home-about .section-container {
        padding: 2rem;
    }

    #home-about .section-content {
        flex-direction: column;
    }

    #home-about .section-content .about-item {
        flex-direction: row;
        align-items: center;
    }
}

#meerdoen, #how-support {
    background: var(--action-color-light);
}

.shopping-list {
    background-color: var(--accent-color-light);
    padding: 1rem;
    border-radius: 1rem;
}

.shopping-list .title {
    color: var(--accent-color);
}

ul {
    list-style-type: none;
    padding-left: 1.3em;
}

li {
    position: relative;
}

ul:not(.nav-items):not(.link-list):not(.faq-navigation-container):not(#home-about-list):not(#how-what-container):not(#how-who-container):not(.iconlist):not(#situatiecheck-list-section-container):not(.sub-menu) li::before {
    content: "\2022";
    font-weight: 600;
    font-size: 1.3em;
    display: inline-block;
    width: 1em;
    position: absolute;
    left: -1em;
    margin-top: -3px;
}

.circle {
    width: 3rem;
    height: 3rem;
    background: var(--background-color);
    color: var(--warning-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    clear: both;
    border-radius: 2rem;
    padding: 2em;
}

.circle .material-symbols-outlined {
    color: var(--warning-text-color);
    font-weight: 600;
}

.page-header .section-container {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin: 6rem 0rem;
}

#webapp-info .section-container {
    gap: 6rem;
}

#webapp-info .section-container .section-content {
    display: flex;
    flex-grow: 0.6;
    flex-basis: 0;
    flex-direction: column;
}

#aanvraagdoen-start .section-container nfe-aanvraagdoen-start {
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
}

#how-info .section-container {
    display: flex;
    gap: 6rem;
    flex-direction: row;
    width: 100%
}

@media (max-width: 768px) {
    .column {
        max-width: 100%;
    }

    #how-info .section-container, #webapp-info .section-container {
        gap: 2rem;
    }

    .page-header .section-container, #how-info .section-container {
        flex-direction: column;
        gap: 1rem;
        margin: 2rem 0rem
    }

    #how-info .section-container {
        flex-direction: column-reverse;
    }
}

section#doedesituatiecheck {
    padding: 0 0 4rem;
}

section#doedesituatiecheck .section-container{
    display: flex;
    flex-direction: row;
    gap: 6rem;
}

section#doedesituatiecheck .section-container .section-content {
    justify-content: center;
    gap: 0;
}

#doedesituatiecheck p{
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    section#doedesituatiecheck .section-container {
        gap: 1rem;
        flex-direction: column;
    }
}

nfe-how-page nfe-doedesituatiecheck section {
    padding-bottom: 0rem;
}

nfe-doedesituatiecheck .section-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
section#whoandwhat .section-container {
    display: flex;
    flex-direction: row;
    gap: 6rem;
}

#how-who, #how-what {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#how-who-container, #how-what-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.iconlist-item {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

p.iconlist-item-content {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    section#whoandwhat .section-container {
        gap: 1rem;
        flex-direction: column;
    }
}

nfe-how-who {
    background-color: white;
    padding: 2.5rem;
    border-radius: 1rem;
}

nfe-aanvraagdoen-start {
    display: block;
    background-color: white;
}

@media (max-width: 1024px) {
    nfe-aanvraagdoen-start {
        margin-top: 1.5rem;
    }
}

div #aanvraagdoen-start {
    flex-direction: column;
    display: flex;
    gap: 1rem;
    justify-content: space-evenly;
}

#aanvraagdoen-start h2, #aanvraagdoen-start h1 {
    margin-bottom: 0;
}

#aanvraagdoen-shoppinglist-container .iconlist {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

nfe-aanvraagdoen-iemandhelpen div.container-fluid {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

nfe-aanvraagdoen-iemandhelpen div .section-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

nfe-aanvraagdoen-iemandhelpen img {
    display: flex;
    max-width: 360px;
}

nfe-aanvraagdoen-iemandhelpen .no-bottom-padding {
    padding-bottom: 0rem;
}

#aanvraagdoen-shoppinglist-container {
    display: flex;
    gap: 1rem;
    flex-direction: row;
}

@media (max-width: 768px) {
    nfe-aanvraagdoen-iemandhelpen div.container-fluid {
        flex-direction: column;
        gap: 1rem;
        margin: 2rem 0rem;
    }

    #aanvraagdoen-shoppinglist-container {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    nfe-how-who {
        padding: 1rem;
    }
}

section.page-header {
    padding: 0rem;

}

#how-info .section-container {
    background: var(--accent-color-light);
    background-image: url(images/Info_Section_Background.svg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
    max-width: 1440px;
    border-radius: 1.5rem;
    margin-top: 3rem;
    padding: 4rem;
}

#about-info .section-container .section-content {
    max-width: 60%;
}

@media (max-width: 768px) {
    #about-info .section-container .section-content {
        max-width: 100%;
    }
}

#about-content .section-container {
    display: flex;
    flex-direction: row;
}

@media (max-width: 960px) {
    #about-content .section-container {
        flex-direction: column;
    }
}

#about-content .section-container .section-content {
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
    flex-direction: column;
}

#about-content .section-container .section-image {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    flex-basis: 0;
}

#about-content .section-image img {
    height: max-content;
}

faq-contact-button {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    margin: 1.5rem 0rem;
}

faq-contact-button .question {
    font-weight: 600;
}

faq-contact-button button {
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    border: none;
    color: var(--action-color);
    background-color: white;
}

faq-contact-button button:hover {
    cursor: pointer;
}

faq-contact-button button, faq-contact-button button .nf-icon {
    font-size: 1em;
}

faq-contact-button button:hover {
    color: var(--action-color-hover);
    background-color: var(--border-color);
}

faq-contact-button button:disabled {
    cursor: default;
}

faq-contact-button button:disabled.no {
    color: var(--negative-color);
    background-color: var(--negative-color-background);
}

faq-contact-button button:disabled.yes {
    color: var(--positive-color);
    background-color: var(--positive-color-background);
}

faq-contact-button .more-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--more-info-background);
    padding: 1rem;
    border-radius: 0.5rem;
}

nfe-news-newsitem h1.primary{
    font-size: 2em;
}

nfe-news-newsitem span.newsdate{
    font-size: 1em;
}

nfe-news-newsitem section {
    padding: 0rem 4rem;
}

nfe-news-list .news-container {
    display: flex;
    gap: 2rem;
    flex-direction: column;
    margin-bottom: 8em;
}

@media (max-width: 768px) {
    nfe-news-newsitem section{
        padding: 0rem 1rem;
    }

    nfe-news-newsitem section:last-child {
        padding-bottom: 2rem;
    }

    nfe-news-list .news-container {
        gap: 1rem;
        margin-bottom: 4em;
    }
}

nfe-news-list nfe-news-newsitem .section-content {
    padding: 0rem 2rem;
}

nfe-news-newsitem:not(:first-of-type):not(:last-of-type) .section-content {
    border-bottom: 1px solid var(--border-color);
}

nfe-news-list .news-container nfe-news-newsitem:first-of-type .section-content {
    background-color: white;
    border-radius: 1.5rem;
    box-shadow: 0px 0px 10px 0px rgb(22 22 22 / 10%);
    margin-top: -4rem;
    padding: 2rem;
}

nfe-news-newsitem .section-container {
    padding: 0rem 5rem;
}

@media (max-width: 768px) {
    nfe-news-newsitem .section-container {
        padding: 0rem;
    }

    nfe-news-list nfe-news-newsitem .section-content {
        padding: 1rem;
    }

    nfe-news-list .news-container nfe-news-newsitem:first-of-type .section-content {
        margin-top: -2rem;
        border-radius: 1rem;
    }
}

nfe-news-newsitem .featured {
    background-color: var(--accent-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.8em;;
}
nfe-news-newsitem .section-header .subtitle {
    display: flex;
    gap: 1rem;
    align-items: center;
}

#situatiecheck-list-section-container {
    display: flex;
    flex-direction: row;
    background-color: var(--accent-color-light);
    margin: 2rem;
    background-image: url(images/Home_About_Background.svg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
    background-size: cover;
    border-radius: 1.5rem;
}

nfe-situatiecheck-page #meer-uitleg-link {
    display: block;
}

#situatiecheck-list .steps-container {
    flex-direction: row;
}

@media (max-width: 768px) {
    #situatiecheck-list .steps-container {
        flex-direction: column;
    }
}

#termsofuse ol {
    padding-left: 2em;
}

#termsofuse ol li::before {
    left: -2em;
    position: absolute;
}

#termsofuse h2 {
    margin-top: 1em;
}

#termsofuse {
    counter-reset: chapter item;
}

#termsofuse h2:before {
    counter-increment: chapter;
    content: "Artikel " counter(chapter) ". ";
}

#termsofuse ol {
    list-style-type: none;
    counter-reset: item;
}

#termsofuse li:before {
    counter-increment: item;
    content: counter(chapter) "." counter(item) ".";
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

table, th, td {
    border: 2px solid var(--border-color);
}

th, td {
    padding: 1rem;
}

th {
    font-weight: 600;
    text-align: left;
}

#how-support .section-header {
    margin-bottom: 0;
}

how-support table, th, td {
    background: white;
}

.link, .link a, link a:visited {
    align-items: center;
    font-weight: bold;
    text-decoration: none;
    color: var(--first-color);
}

.link a:hover {
    color: var(--action-color-hover);
}

#privacystatement .section-container, #termsofuse .section-container {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.alert-messages button.close {
    background: none;
    border: none;
    color: black;
}

.alert-messages button.close:hover{
    cursor: pointer;
}

status-message, external-status {
    display: none;
    background-color: var(--accent-color-light);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    gap: 1rem;
    margin: 0 auto;
}

status-message .content, external-status .content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

status-message p, external-status p {
    margin-bottom: 0;
    font-weight: 600;
}

status-message .circle, external-status .circle {
    background-color: var(--warning-text-color);
}

status-message .nf-icon, external-status .nf-icon {
    font-size: 2em;
    color: black;
}

status-message .circle .nf-icon, external-status .circle .nf-icon {
    color: white;
}

@media (max-width: 768px) {
    status-message, external-status {
        padding: 1rem;
        gap: 1rem;
        flex-direction: column;
    }
}

nfe-transcription {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(1,1,1,0.4);
    display: none;
    justify-content: center;
    left: 0;
    top: 0;
}

nfe-transcription .modal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

nfe-transcription .modal {
    background-color: white;
    padding: 1rem;
    margin: auto 1rem;
}

nfe-transcription .modal {
    border-radius: 1rem;
    width: 60vw;
}

nfe-transcription .close {
    color: #aaaaaa;
    font-size: 32px;
    background: none;
    border: none;
}

nfe-transcription .modal-header {
    border-bottom: 1.5px solid #ccc;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nfe-transcription .close:hover,
nfe-transcription .close:focus {
    color: var(--first-color);
    text-decoration: none;
    cursor: pointer;
}

@font-face {
    font-family: 'fontello';
    src: url('font/fontello.eot');
    src: url('font/fontello.eot') format('embedded-opentype'),
         url('font/fontello.woff') format('woff'),
         url('font/fontello.ttf') format('truetype'),
         url('font/fontello.svg#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
  }

.nf-icon {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: never;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1;

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*Subset of icons from the tabler library, included with fontello*/
.nf-icon.icon-alert-triangle:after { content: '\e800'; }
.nf-icon.icon-bolt:after { content: '\e801'; }
.nf-icon.icon-browser:after { content: '\e802'; }
.nf-icon.icon-building:after { content: '\e803'; }
.nf-icon.icon-bulb:after { content: '\e804'; }
.nf-icon.icon-calculator:after { content: '\e805'; }
.nf-icon.icon-calendar:after { content: '\e806'; }
.nf-icon.icon-check:after { content: '\e807'; }
.nf-icon.icon-chevron-down:after { content: '\e808'; }
.nf-icon.icon-chevron-left:after { content: '\e809'; }
.nf-icon.icon-chevron-right:after { content: '\e80a'; }
.nf-icon.icon-chevron-up:after { content: '\e80b'; }
.nf-icon.icon-clock:after { content: '\e80c'; }
.nf-icon.icon-currency-euro:after { content: '\e80d'; }
.nf-icon.icon-device-mobile-off:after { content: '\e80e'; }
.nf-icon.icon-device-mobile:after { content: '\e80f'; }
.nf-icon.icon-devices:after { content: '\e810'; }
.nf-icon.icon-external-link:after { content: '\e811'; }
.nf-icon.icon-file-power:after { content: '\e812'; }
.nf-icon.icon-flame:after { content: '\e813'; }
.nf-icon.icon-info-circle:after { content: '\e814'; }
.nf-icon.icon-license:after { content: '\e815'; }
.nf-icon.icon-lock:after { content: '\e816'; }
.nf-icon.icon-mail:after { content: '\e817'; }
.nf-icon.icon-menu-2:after { content: '\e818'; }
.nf-icon.icon-message-circle:after { content: '\e819'; }
.nf-icon.icon-minus:after { content: '\e81a'; }
.nf-icon.icon-phone:after { content: '\e81b'; }
.nf-icon.icon-plus:after { content: '\e81c'; }
.nf-icon.icon-refresh:after { content: '\e81d'; }
.nf-icon.icon-star-filled:after { content: '\e81e'; }
.nf-icon.icon-star-half-filled:after { content: '\e81f'; }
.nf-icon.icon-star:after { content: '\e820'; }
.nf-icon.icon-thumb-down:after { content: '\e821'; }
.nf-icon.icon-thumb-up:after { content: '\e822'; }
.nf-icon.icon-trash:after { content: '\e823'; }
.nf-icon.icon-user-check:after { content: '\e824'; }
.nf-icon.icon-user:after { content: '\e825'; }
.nf-icon.icon-users:after { content: '\e826'; }
.nf-icon.icon-x:after { content: '\e827'; }

.screen-reader {
    display: none;
}

.aanvraagdoen-device-container {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.aanvraagdoen-device-container:last-of-type {
    border-bottom: 1px solid var(--border-color);
}

.aanvraagdoen-device-container .device-title-container {
    display: flex;
    justify-content: space-between;
    text-wrap: wrap;
}

.aanvraagdoen-device-container#device-1 .device-content  {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.aanvraagdoen-device-container#device-2 .device-content  {
    display: flex;
    flex-direction: column;
}

.aanvraagdoen-device-container#device-2 .device-content .download-buttons {
    display: flex;
    justify-content: space-between;
}

.aanvraagdoen-device-container#device-2 .device-title-container:hover {
    cursor: pointer
}

@media (max-width: 768px) {
    .aanvraagdoen-device-container {
        flex-direction: column;
    }
}

#aanvraagdoen-shoppinglist {
    display: flex;
    flex-direction: column;
}

ul#home-about-list, ul#how-who-container, ul#how-what-container, ul.iconlist, ul#situatiecheck-list-section-container, ul.sub-menu {
    padding-left: 0;
}

.break {
    flex-basis: 100%;
    height: 0;
}

.wrap {
    text-wrap: wrap;
}

#jumbotronbuttonGoToForm {
    margin-top: 15px;
}