@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

@layer user {
    :root {
        --color-blue: oklch(0.44 0.11 250);
        --color-red: oklch(0.56 0.18 38);
        --body-font-family: "Source Sans 3", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --body-font-size: 1.125rem;
        --body-font-weight: 400;
        --body-line-height: 1.5;
        --body-color: var(--gray-800);
        --body-bg: var(--gray-100);
        --cassiopeia-color-primary: var(--color-blue);
        --cassiopeia-font-family-headings: var(--body-font-family);
        --cassiopeia-font-weight-headings: 600;
        --heading-color: var(--black);
        --link-color: var(--color-blue);
        --link-hover-color: var(--color-red);
        --outline-width: max(2px, 0.15em);
        --outline-style: dotted;
        --outline-color: currentcolor;
        --outline-offset: max(2px, 0.15em);
        --timing-slow: 1000ms;
        --timing-medium: 400ms;
        --timing-fast: 250ms;
        --easing-in: cubic-bezier(0.8, 0, 0.7, 1);
        --easing-out: cubic-bezier(0, 0, 0.2, 1);
        --easing-inout: cubic-bezier(0.4, 0, 0.2, 1);
        --box-shadow: 4px 4px var(--gray-200);
        --anchor-underline-color: currentcolor;
        --anchor-underline: none;
        --anchor-underline-style: solid;
        --anchor-underline-thickness: max(0.08em, 1px);
        --anchor-underline-offset: 0.25em;
        --anchor-underline-hover: underline;
        --anchor-underline-hover-thickness: max(0.08em, 1px);
        --anchor-underline-hover-offset: 0.15em;
    }

    :focus-visible {
        outline: var(--outline-color) var(--outline-style) var(--outline-width);
        outline-offset: var(--outline-offset)
    }

    html {
        background-color: var(--body-bg);
    }

    body {
        font-optical-sizing: auto;
        font-style: normal;
    }

    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 0;
    }

    h1, .h1 {
        font-size: 1.5rem;
    }

    /* 24 */
    h2, .h2 {
        font-size: 1.25rem;
    }

    /* 20 */
    h3, .h3 {
        font-size: 1.125rem;
    }

    /* 18 */
    h4, .h4 {
        font-size: 1rem;
    }

    /* 16 */
    h5, .h5 {
        font-size: 0.875rem;
    }

    /* 14 */
    h6, .h6 {
        font-size: 0.75rem;
    }
	
	.infoblock h2.card-title {margin-bottom: 0.5rem;}

    /* 12 */
    p,
    ol,
    ul,
    figure,
    address {
        margin-block: unset;
    }

    .balance-text,
    .balance-text > * {
        text-wrap: balance;
    }

    .card {
        --card-bg: var(--white);
        box-shadow: var(--card-box-shadow, none);
    }

    .input-group {
        gap: 1em;
    }

    /* ALLE LINKS */
    a,
    button,
    .mod-list li a,
    a:not([class]) {
        --anchor-underline-color: currentcolor;
        --anchor-underline-hover-color: currentcolor;
        text-decoration-color: var(--anchor-underline-color);
        text-decoration-line: var(--anchor-underline);
        text-decoration-style: var(--anchor-underline-style);
        text-decoration-thickness: var(--anchor-underline-thickness);
        text-underline-offset: var(--anchor-underline-offset);
        transition: text-decoration-color .3s, text-underline-offset .3s;
    }

    a:focus,
    a:hover,
    button:hover,
    button:focus,
    .mod-list li a:hover,
    .mod-list li a:focus,
    a:not([class]):hover,
    a:not([class]):focus {
        text-decoration-color: var(--anchor-underline-hover-color);
        text-decoration-line: var(--anchor-underline-hover);
        text-decoration-thickness: var(--anchor-underline-hover-thickness);
        text-underline-offset: var(--anchor-underline-hover-offset);
    }

    a[target="_blank"]:not(:has(img))::after {
        font-weight: 600;
        content: " \f08e";
        font-family: "Font Awesome 6 Free", emoji;
        font-size: 0.75rem;
    }

    .com-content-article__body a, .intro-onderzoeken a {
        --anchor-underline: underline;
    }

    .btn.btn-primary {
        --cassiopeia-color: var(--link-color);
        --cassiopeia-color-hover: var(--link-hover-color);
        --btn-padding-x: 1.5rem;
        --btn-padding-y: 1rem;
        --btn-font-weight: 700;
        --anchor-underline-color: currentcolor;
        --anchor-underline-hover-color: currentcolor;
        display: inline-flex;
        gap: .5rem;
        align-items: center;
        box-shadow: var(--box-shadow);
        transition: all var(--timing-medium) var(--easing-in);
		text-decoration: unset;
    }

    .btn.btn-primary::after {
        content: "\f054";
        font-family: "Font Awesome 6 Free", emoji;
        font-size: 1.125rem;
    }

    @media screen and (prefers-reduced-motion: no-preference) {
        .btn.btn-primary:hover,
        .btn.btn-primary:focus {
            transform: translate(3px, 3px);
            box-shadow: 1px 1px #cccccc;
        }
    }

    .metismenu.mod-menu a,
    .metismenu.mod-menu button {
        --anchor-underline-color: transparent;
        --anchor-underline-hover-color: transparent;
        --link-color: var(--black);
        color: var(--link-color);
    }

    .metismenu.mod-menu a:hover,
    .metismenu.mod-menu a:focus,
    .metismenu.mod-menu button:hover,
    .metismenu.mod-menu button:focus {
        --anchor-underline-color: transparent;
        --anchor-underline-hover-color: transparent;

        color: var(--link-hover-color);
    }

    .bottom-b .mod-menu a,
    .bottom-b .mod-menu button {
        --link-color: var(--color-blue);
        color: var(--link-color);
    }

    .bottom-b .mod-menu a:hover,
    .bottom-b .mod-menu button:hover {
        --link-hover-color: var(--color-red);
        color: var(--link-hover-color);
    }

    a.btn.btn-sm.btn-info {
        --card-bg: var(--link-color);
        --card-border: none;
        --card-hover--bg: var(--link-hover-color)
    }

    .btn.btn-secondary {
        --btn-padding-x: 2rem;
        --btn-padding-y: unset;
        --btn-color: var(--link-color);
        --btn-bg: transparent;
        --btn-border-color: transparent;
        --btn-hover-color: var(--link-hover-color);
        --btn-hover-bg: transparent;
        --btn-hover-border-color: transparent;
        --btn-font-size: var(--body-font-size);
        --anchor-underline-color: currentcolor;
        --anchor-underline-hover-color: currentcolor;
    }

    .readmore > .btn-secondary {
        position: relative;
        text-align: initial;
        text-wrap: balance;
        padding-inline-start: 2ch;
    }

    .readmore > .btn-secondary > [class^="icon-"] {
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 50%;
        transform: translateY(-50%);
    }

    /* STRUCTUUR TEMPLATE */
    .container-top-c > *, .container-top-d > *, .container-top-e > * {
        flex: 1;
        margin: 0.5em 0;
    }

    .container-top-c {
        position: relative;
        grid-area: top-c;
    }

    .container-top-d {
        position: relative;
        grid-area: top-d;
    }

    .container-top-e {
        position: relative;
        grid-area: top-e;
    }

    @supports (display: grid) {
        .site-grid {
            display: grid;
            grid-template-areas:
	".banner banner banner banner."
	".top-a top-a top-a top-a."
	".top-b top-b top-b top-b."
	".top-c top-c top-c top-c."
	".top-d top-d top-d top-d."
	".top-e top-e top-e top-e."
	".comp comp comp comp."
	".side-r side-r side-r side-r."
	".side-l side-l side-l side-l."
	".bot-a bot-a bot-a bot-a."
	".bot-b bot-b bot-b bot-b.";
        }
    }

    @media (width >= 992px) {
        .site-grid {
            grid-template-areas:
	".banner banner banner banner."
	".top-a top-a top-a top-a."
	".top-b top-b top-b top-b."
	".top-c top-c top-c top-c."
	".top-d top-d top-d top-d."
	".top-e top-e top-e top-e."
	".side-l comp comp side-r."
	".bot-a bot-a bot-a bot-a."
	".bot-b bot-b bot-b bot-b."
        }
    }

    /*!* MENU *!*/
    .container-header {
        display: grid;
        grid-template-columns: [full-start] minmax(0px, 1fr) [main-start] repeat(4, minmax(0px, 19.875rem)) [main-end] minmax(0px, 1fr) [full-end];
        grid-template-areas: ". logo logo nav nav .";
        gap: 0 1rem;
        background: var(--white);
        z-index: 10000;
    }

    .container-header .container-topbar {
        grid-area: top;
    }

    .container-header .container-below-top {
        grid-area: below;
        justify-content: flex-end;
    }

    .container-header .grid-child:has(.navbar-brand) {
        grid-area: logo;
    }

    .container-header .container-nav {
        grid-area: nav;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-block: unset;
    }

    @media (width >= 991.98px) {
        .container-header .container-nav {
            justify-content: space-between;
        }
        .container-header {
            grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr)[full-end];
            grid-template-areas: ". logo nav nav nav .";
            gap: 0 1rem;
        }

        .container-header:has(.container-below-top, .container-topbar) {
            grid-template-areas: ". top top below below ." ". logo nav nav nav .";
        }
    }

    .container-header .grid-child.containber-nav {
        padding-block: unset;
    }

    .container-header .mod-menu {
        color: currentcolor;
    }

    .container-header .active > a {
        --anchor-underline-color: transparent;
        --anchor-underline-hover-color: transparent;

        color: var(--link-hover-color);
    }

    @media (width >= 992px) {
        .metismenu.mod-menu .mm-collapse > li.level-2.parent .mm-toggler,
        .container-header .metismenu .level-2.parent > ul {
            display: none
        }
    }

    .container-header .metismenu > li > a:hover:after,
    .container-header .metismenu > li > button:hover:before,
    .container-header .metismenu > li.active > a:after,
    .container-header .metismenu > li.active > button:before {
        background: var(--link-hover-color);
        opacity: 0;
    }

    .container-header .metismenu > li > a:hover:after,
    .container-header .metismenu > li > button:hover:before {
        opacity: 1;
    }

    .metismenu.mod-menu .mm-toggler:after {
        content: " ";
        display: block;
        inline-size: 1.5rem;
        block-size: 1.5rem;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        transition: transform 500ms cubic-bezier(.195, .4, .45, .785) 0s;
        background-image: url("data:image/svg+xml,%3Csvg style='fill: %23000;' xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='m8.069 23.498 10.286-10.286c.67-.669.67-1.755 0-2.424L8.069.502a1.716 1.716 0 0 0-2.424 0 1.716 1.716 0 0 0 0 2.424L14.719 12l-9.074 9.074a1.716 1.716 0 0 0 0 2.424 1.716 1.716 0 0 0 2.424 0Z'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 14px 14px;
        border: none;
    }

    .mm-active > .metismenu.mod-menu .mm-toggler:after,
    .metismenu.mod-menu .mm-toggler[aria-expanded=true]:after {
        content: "";
        transform: rotate(-90deg);
    }

    .container-header .metismenu > li.active > a:after,
    .container-header .metismenu > li.active > button:before {
        opacity: 1;
    }

    .metismenu.mod-menu .mm-toggler,
    .metismenu.mod-menu .metismenu-item {
        font-weight: 600;
    }

    .metismenu.mod-menu .mm-collapse {
        margin-block-start: .5rem;
    }

    .metismenu.mod-menu .mm-collapse .metismenu-item + .metismenu-item {
        border-top: 1px dotted #E5E5E5;
    }

    .container-header .navbar-toggler {
        color: var(--white);
        cursor: pointer;
        border: 1px solid var(--white);
        background: var(--link-color);
    }

    @media (width < 992px) {
        body:has(.navbar-toggler[aria-expanded=true]) {
            overflow: hidden;
        }

        nav.navbar:has(.navbar-toggler) {
            position: fixed;
            inset-block-start: 1rem;
            inset-inline-start: 8rem;
            inset-inline-end: 1rem;
        }

        nav.navbar:has(.navbar-toggler[aria-expanded=true]) {
            inset-inline-start: 1rem;
        }

        nav.navbar:has(.navbar-toggler[aria-expanded=true]):before {
            content: '';
            inset: 0;
            position: fixed;
            background: var(--color-blue);
            z-index: -1;
            opacity: .5;
        }

        .navbar-toggler {
            pointer-events: initial;
            margin-inline-start: auto;
            margin-inline-end: .5rem;
            aspect-ratio: 1;
        }

        .navbar-collapse {
            background: var(--white);
            border-radius: var(--border-radius-xl);
            overflow-y: auto;
            max-height: calc(100vh - 4rem);
        }

        .nav-header {
            flex-basis: 100%;
            justify-content: space-between;
        }

        .metismenu.mod-menu .mm-toggler {
            block-size: 2rem;
        }

        .metismenu.mod-menu .metismenu-item {
            align-items: normal;
            justify-content: space-between;
        }

        .metismenu.mod-menu .parent > ul {
            position: initial;
            flex-direction: column;
            flex: 1;
            justify-content: flex-start;
        }

        .metismenu.mod-menu .parent > [aria-expanded="true"] + ul {
            display: flex;
        }

        .metismenu.mod-menu .metismenu-item > ul {
            box-shadow: none;
        }

        .metismenu.mod-menu .mm-collapse > li.parent > ul {
            background-color: transparent;
        }

        .container-header .metismenu > li.level-1 > ul {
            min-inline-size: unset;
        }

        .metismenu.mod-menu .metismenu-item:not(.level-1) > ul,
        .metismenu.mod-menu .metismenu-item:not(.level-2) > ul {
            margin-inline-end: unset;
            flex-basis: 100%;
        }
    }

    /* CARD styling */
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .card-header > h2 {
        font-size: 1.5rem;
    }

    .card-header > span {
        margin-bottom: unset;
    }

    /* SLIDER HOME */
    .container-banner {
        margin: unset;
    }

    .container-banner.full-width .mod-randomimage {
        display: none;
        inline-size: 100%;
        max-block-size: 16rem;
        overflow: hidden;
    }

    .homepage .container-banner.full-width .mod-randomimage {
        max-block-size: 24rem;
    }

    .container-banner.full-width .mod-randomimage img {
        inline-size: 100%;
    }

    .container-banner.full-width .mod-randomimage + .banner {
        margin-block-start: 1rem;
    }

    @media (min-width: 992px) {
        .container-banner.full-width .mod-randomimage {
            display: block;
        }

        .container-banner.full-width .mod-randomimage + .banner {
            margin-block-start: unset;
        }
    }

    /* AFBEELDING NIEUWS */
    .item-image {
        clip-path: polygon(0 88%, 100% 95%, 100% 0%, 0 0);
    }

    .item-image--clean {
        clip-path: unset;
    }

    .item-image.left,
    .item-image.right {
        float: none;
    }

    .com-content-article .item-image {
        display: flex;
        flex-direction: column;
        align-items: end;
    }

    @media (width >= 576px) {
        .com-content-article .item-image {
            inline-size: 40%;
            float: right;
            margin-inline-start: .5em;
            margin-block-end: .5em;
        }
    }

    .blog-item .item-image {
        margin: unset;
    }

    .blog-item .readmore {
        margin-block-start: auto;
        margin-block-end: unset;
    }

    figure.mod-articles-image.item-image::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(84, 122, 153, 0.2);
        pointer-events: none;
    }

    .boxed .blog-item {
        box-shadow: var(--box-shadow);
        border: 1px solid #eeeeee;
    }

    .boxed .blog-item .item-image + .item-content {
        padding-block-start: unset;
    }

    .boxed .blog-item .item-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding-inline: 1.25em;
        padding-block-end: 1.25em;
    }

    .boxed .blog-item .item-content .page-header > * {
        min-block-size: 2.75em;
    }

    .site.nieuws .blog-item .item-content > .page-header {
        order: 2;
    }

    .site.nieuws .blog-item .item-content > .article-info {
        order: 1;
        margin: 0;
    }

    .site.nieuws .blog-item .item-content > p {
        order: 3;
    }

    .article-info {
        font-size: .9375rem;
    }

    /* 3 BLOKKEN zoektips - collectie - bezoek */
    .container-banner {
        display: grid;
        place-items: center;
    }

    @media (width >= 992px) {
        .infoblock {
            position: absolute;
        }
    }

    .infoblock [class^="col-"] {
        display: flex;
    }

    .text-bg-infoblock {
        --card-spacer-y: clamp(
                1rem,
                calc(1rem + (2 - 1) * (100vw - 36rem) / (62 - 36)),
                2rem
        );

        --card-spacer-x: 2rem;
        --card-border-color: transparent;
        --card-border-radius: .75rem;
        --card-color: var(--white);
        --card-bg: oklch(from var(--color-blue) l calc(c - 0.06) h / calc(alpha - 0.1));
        --link-color: var(--card-color);
        --link-hover-color: var(--card-color);
        --anchor-underline-color: transparent;
        flex: 1;
        transition: all var(--timing-medium) var(--easing-in);
    }

    @media screen and (prefers-reduced-motion: no-preference) {
        .text-bg-infoblock:hover {
            transform: translateY(-.5rem);
        }
    }

    /* KRUIMELPAD */
    .container-component > :first-child,
    .container-component main {
        margin-block-start: 0;
    }

    .mod-breadcrumbs {
        background: transparent;
        font-size: .938rem;
    }

    .mod-breadcrumbs__wrapper + * {
        margin-block-start: 0;
    }

    .mod-breadcrumbs__divider {
        display: none;
    }

    /* NIEUWS MODULE HOME */
    .mod-articles-grid > li {
        display: flex;
    }

    .mod-articles-grid > li > * {
        flex: 1;
    }

    .mod-articles-item-content {
        flex: 1;
    }

    .mod-articles-item-content .readmore {
        margin-block-start: auto;
    }

    .card-clean {
        --card-spacer-y: 0;
        --card-spacer-x: 0;
        --card-border-width: 0;
        --card-border-color: transparent;
        --card-border-radius: 0;
        --card-bg: transparent;
        --card-cap-bg: transparent;
    }

    .cards-shadow .card {
        --card-box-shadow: var(--box-shadow);
    }

    .cards-shift .card {
        transition: all var(--timing-medium) var(--easing-in);
    }

    @media screen and (prefers-reduced-motion: no-preference) {
        .cards-shift .card:hover {
            transform: translateY(-.5rem);
        }
    }

    .cards-shadow .card .mod-articles-title {
        min-block-size: 2.75em;
    }

    .cards-shadow .card .mod-articles-item-content {
        display: flex;
        flex-direction: column;
    }

    .cards-shadow .card .mod-articles-item-content > * {
        padding-inline: 1.25rem;
    }

    .cards-shadow .card .mod-articles-item-content > *:last-child {
        padding-block-end: 1.25rem;
    }

    .cards-shadow .card .mod-articles-item-content figure {
        order: -1;
        padding: unset;
        margin-block: unset;
    }

    .cards-agenda .card .mod-articles-item-content {
        display: grid;
        grid-template-columns: 3em 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
        "date title"
        "date article";
        gap: unset;
        padding-inline: unset;
        padding-block-end: unset;
    }

    .cards-agenda .card .mod-articles-item-content > *:not(.list-unstyled) {
        padding-block: .75rem;
        padding-inline: .75rem;
        margin: unset;
    }

    .cards-agenda .card .mod-articles-item-content .mod-articles-title {
        grid-area: title;
        padding-block-end: unset;
        min-block-size: unset;
    }

    .cards-agenda .card .list-unstyled {
        grid-area: date;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        background: #98c561;
    }

    .cards-agenda .card .list-unstyled * {
        margin: unset;
    }

    .cards-agenda .card .list-unstyled [class*="icon"] {
        display: none;
    }

    .cards-agenda .card p {
        grid-area: article;
    }

    .cards-nieuws .card .mod-articles-item-content > figure {
        order: -1;
    }

    .cards-nieuws .card .mod-articles-item-content > .list-unstyled {
        order: 0;
        margin: 0;
        font-size: .85rem;
    }

    .cards-nieuws .card .mod-articles-item-content > .mod-articles-title {
        order: 1;
    }

    .cards-nieuws .card .mod-articles-item-content > p {
        order: 2;
    }

    .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
        color: var(--link-hover-color);
        background-color: var(--white);
        border-color: unset;
        text-decoration: underline;
    }

    /* BLOK BENEDEN Menu Footer 1-2-3 */
    .grid-child.container-bottom-b {
        display: flex;
        flex-direction: column;
        grid-column: full;
        margin-top: 2rem;
        padding-block: 3rem;
        background: oklch(from var(--color-blue) calc(l + 0.53) calc(c - 0.1) h);
    }

    .grid-child.container-bottom-b > div {
        margin-inline: auto;
        padding-inline: 1rem;
        --grid-max-col-count: 4;
        --grid-min-col-size: 20ch;
        --grid-gap: 1rem;

        /* calculations, do not touch */
        --grid-col-size-calc: calc(
                (100% - var(--grid-gap) * var(--grid-max-col-count)) /
                var(--grid-max-col-count)
        );
        --grid-col-min-size-calc: min(
                100%,
                max(var(--grid-min-col-size), var(--grid-col-size-calc))
        );

        display: grid;
        gap: var(--grid-gap);

        grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-min-size-calc), 1fr)
  );
    }

    .container-bottom-b .card {
        --card-border-color: transparent;
        --card-border-radius: 0;
        --card-spacer-x: 0;
        --card-spacer-y: 0;
        --card-cap-padding-x: 0;
        --card-cap-padding-y: .5rem;
        --card-bg: transparent;
        --card-cap-bg: transparent;
    }

    .container-bottom-b .active > a {
        --link-color: oklch(from var(--link-hover-color) calc(l - 0.06) c h);
    }

    .container-bottom-b .mod-menu li {
        display: flex;
        align-items: center;
        gap: 1ch;
    }

    .container-bottom-b .mod-menu li::before {
        font-weight: 900;
        content: "\f054";
        font-family: "Font Awesome 6 Free", emoji;
        font-size: 0.75rem;
    }

    /* Footer */
    @media (max-width: 991.98px) {
        .footer .grid-child {
            padding-inline: 1rem;
            align-items: flex-start;
            gap: 2rem;
        }
    }

    .container-footer {
        --link-color: var(--white);
        margin-block-start: 0;
        background: oklch(from var(--color-blue) l calc(c - 0.07) h);
    }


    .container-footer .mod-menu {
        flex-direction: column;
        gap: 1ch;
    }

    .container-footer .mod-menu:last-child {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .container-footer .mod-menu:last-child > li:first-child {
        flex-basis: 100%
    }

    @media (min-width: 992px) {
        .container-footer .mod-menu {
            flex-direction: row;
        }

        .container-footer .mod-menu:last-child > li:first-child {
            flex-basis: unset;
        }
    }

    .container-footer .mod-menu li {
        display: flex;
        align-items: center;
        gap: 1ch;
    }

    .container-footer .mod-menu:first-child li::before {
        font-weight: 900;
        content: "\f054";
        font-family: "Font Awesome 6 Free", emoji;
        font-size: 0.75rem;
    }

    /* RECHTERKANT */
    .container-sidebar-right {
        padding-block-start: 1.313rem;
    }

    .container-sidebar-right .active > a {
        --link-color: var(--link-hover-color);
    }

    .container-sidebar-right .card {
        --card-border-radius: 0;
        --card-bg: var(--white);
        --card-box-shadow: var(--box-shadow);
    }

    .container-sidebar-right .mod-menu li + li {
        border-top: 1px solid var(--gray-200);
    }

    @media (width >= 992px) {
        .container-sidebar-right .mod-menu__toggle-sub {
            display: none !important;
        }
    }

    /* INHOUD / CONTENT */
    .main-top.card.intro-onderzoeken {
        --card-spacer-y: 0;
        --card-spacer-x: 0;
        --card-border-radius: unset;
        --card-box-shadow: var(--box-shadow);
        margin-block-end: 1em;
    }


    [data-rlta-element="panel-content"] > * + * {
        margin-block-start: 1em;
    }

    .com-content-article.item-page, .com-tags.tag-category, .com-tags-tag-list.tag-category {
        padding-inline: clamp(1rem, calc(1rem + (2 - 1) * (100vw - 36rem) / (62 - 36)), 4rem);
        padding-block: clamp(1rem, calc(1rem + (2 - 1) * (100vw - 36rem) / (62 - 36)), 4rem);
        box-shadow: var(--box-shadow);
        border: 1px solid #eeeeee;
        background: #ffffff;
    }

    .com-content-category-blog h1, .page-header h1 {
        margin-bottom: 1rem;
        color: #000000;
        font-size: 1.875rem;
    }

    .tabel-prijs {
        display: table;
        width: 100%;
        background: #f5f5f5;
    }

    .tabel-prijs .row {
        display: flex;
        width: 100%;
    }

    .cell-links {
        width: 75%;
        border-bottom: 1px solid #cccccc;
        background: #f5f5f5;
    }

    .cell-rechts {
        width: 25%;
        border-bottom: 1px solid #cccccc;
        background: #f5f5f5;
    }

    .imglinks {
        float: left;
        margin: 0 20px 20px 0;
    }

    .imgrechts {
        float: right;
        margin: 0 0 20px 20px;
    }

    /* TABEL GENEALOGIE */
    .bevolking {
        table-layout: fixed;
        font-size: 1rem;
    }

    .bevolking td:nth-child(4),
    .bevolking th:nth-child(4) {
        width: 30%;
        white-space: normal;
        word-break: break-word;
    }

    /* TAGS & GERELATEERD*/
    .com-tags-compact__items {
        margin-top: 1.25rem;
    }

    .moduletable .jo-related-articles {
        margin: 1.25rem 0 0 0;
    }

    .moduletable .jo-related-articles .main-title {
        font-size: 1.125rem;
        margin-bottom: 1rem;
        color: #000000;
        border-bottom: 0;
    }

    .moduletable .jo-related-articles .read-more {
        text-decoration: none;
        font-size: 1.125rem;
        display: block;
        margin-top: 10px;
        color: #13558B;
    }

    .moduletable .jo-related-articles .article-item {
        padding: 1.25rem;
        box-shadow: var(--box-shadow);
        border: 1px solid #eeeeee;
    }

    .moduletable .jo-related-articles .article-text {
        font-size: 1.125rem;
        font-weight: 400;
        font-style: normal;
        line-height: 1.5;
        color: #333333;
    }

    .moduletable .jo-related-articles p {
        margin-bottom: 0;
    }

    .moduletable .jo-related-articles .article-item.odd, .moduletable .jo-related-articles .article-item.even {
        background: #ffffff;
    }

    .com-tags__description {
        margin-top: 1rem;
    }

    ul.tags.list-inline {
        margin-bottom: 0;
    }

    .tags .list-inline-item {
        margin: 0 0.25rem 0.375rem 0;
    }

    /* FORMULIER */
    .com-finder__form,
    .formContainer {
        accent-color: var(--link-color);
    }

    .formContainer > .formRow > * {
        display: grid;
        gap: 1.5em;
    }

    .com-finder__form .form-inline,
    .rsform-block {
        display: grid;
    }

    .com-finder__form .form-inline > label,
    .rsform-block .formControlLabel {
        margin-block-end: .5rem;
        font-weight: 600;
    }

    .rsform-block .formBody {
        display: grid;
    }

    .com-finder__form .awesomplete {
        inline-size: min(100%, 75ch);
    }

    .rsform-block .rsform-input-box,
    .rsform-block .rsform-text-box {
        max-inline-size: 75ch;
        padding: .5em .75em;
        background: var(--gray-100);
        border: 1px solid var(--gray-200);
        box-shadow: var(--box-shadow);
    }

    .com-finder__form .form-control {
        padding: 1rem .75rem;
        background: var(--gray-100);
        border: 1px solid var(--gray-200);
        box-shadow: var(--box-shadow);
    }

    .rsform-block .rsform-input-box.rsform-error,
    .rsform-block .rsform-text-box.rsform-error {
        border-color: var(--link-hover-color);
    }

    .rsform-block label {
        display: flex;
        gap: .5rem;
    }

    .rsform-block .formValidation {
        order: -1;
    }

    .formError.formError {
        font-weight: 400;
    }

    .rsform-block .formDesription:empty {
        display: none;
    }

    .rsform-block [type="submit"] {
        inline-size: fit-content;
    }

    .rsform-block [type="submit"]::after {
        font-family: "Font Awesome 6 Free", emoji;
    }

    /* TAB BOVEN ONDERZOEKEN */
    .mod-custom [data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions] > [data-rlta-element=panel],
    .mod-custom [data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions] > [data-rlta-element=button] {
        margin-block-end: 0 !important;
        border-radius: 0 !important;
    }

    .mod-custom [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions] > [data-rlta-element=button],
    .mod-custom [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions] > [data-rlta-element=panel],
    .mod-custom [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=tabs] > [data-rlta-element=panels] > [data-rlta-element=panel],
    .mod-custom [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions] > [data-rlta-element=button][data-rlta-state=open],
    .mod-custom [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions] > [data-rlta-element=button][data-rlta-state=opening] {
        border: unset;
        border-radius: unset;
    }

    [data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions] > [data-rlta-element=panel] {
        padding-inline: unset
    }

    [data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions][data-rlta-icons=true] > [data-rlta-element=button]:not([data-rlta-state=closed]):after {
        content: "";
        transform: rotate(-90deg);
    }

    [data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions][data-rlta-icons=true] > [data-rlta-element=button]:after {
        content: " " !important;
        display: block;
        inline-size: 1.5rem;
        block-size: 1.5rem;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        transition: transform 500ms cubic-bezier(.195, .4, .45, .785) 0s;
        background-image: url("data:image/svg+xml,%3Csvg style='fill: %23000;' xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='m8.069 23.498 10.286-10.286c.67-.669.67-1.755 0-2.424L8.069.502a1.716 1.716 0 0 0-2.424 0 1.716 1.716 0 0 0 0 2.424L14.719 12l-9.074 9.074a1.716 1.716 0 0 0 0 2.424 1.716 1.716 0 0 0 2.424 0Z'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 14px 14px;
    }


    /* BREEKPUNTEN */
    @media (max-width: 992px) {
        .container-banner, .container-top-b > * {
            margin: 0;
        }
    }

    /* ========================================
       COLLAPSIBLE SIDEBAR STYLES
       ======================================== */
    .btn-sidebar-toggle {
        display: none;
        grid-column: 5 / 6;
        grid-row: 6;
        align-items: center;
        justify-self: start;
        margin-inline-start: auto;
        margin-block-end: -2.8rem;
        z-index: 9;
        transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .btn-sidebar-toggle:after {
        content: " ";
        display: block;
        inline-size: 1.5rem;
        block-size: 1.5rem;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        transition: transform 500ms cubic-bezier(.195, .4, .45, .785) 0s;
        background-image: url("data:image/svg+xml,%3Csvg style='fill: %23000;' xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='m8.069 23.498 10.286-10.286c.67-.669.67-1.755 0-2.424L8.069.502a1.716 1.716 0 0 0-2.424 0 1.716 1.716 0 0 0 0 2.424L14.719 12l-9.074 9.074a1.716 1.716 0 0 0 0 2.424 1.716 1.716 0 0 0 2.424 0Z'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 14px 14px;
    }

    .btn-sidebar-toggle[aria-expanded="true"]:after {
        transform: rotate(180deg);
    }

    @media (width >= 992px) {
        .btn-sidebar-toggle {
            display: flex;
        }

        .grid-child.container-sidebar-right {
            max-width: 100%;
            transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
            padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
            margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: right center;
        }

        /* Component area with smooth transition */
        .grid-child.container-component {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* When sidebar is collapsed */
        .site-grid.sidebar-collapsed {
            grid-template-areas:
            ".banner banner banner banner."
            ".top-a top-a top-a top-a."
            ".top-b top-b top-b top-b."
            ".top-c top-c top-c top-c."
            ".top-d top-d top-d top-d."
            ".top-e top-e top-e top-e."
            ".side-l comp comp comp."
            ".bot-a bot-a bot-a bot-a."
            ".bot-b bot-b bot-b bot-b.";
        }

        /* Smoothly collapse the sidebar */
        .site-grid.sidebar-collapsed .grid-child.container-sidebar-right {
            display: none;
        }

        @media screen and (prefers-reduced-motion: no-preference) {
            .site-grid.sidebar-collapsed .btn-sidebar-toggle {
                transform: translateX(-.75rem);
            }
        }

        /* When sidebar is collapsed, change 2-column layout to 3 columns if element exists */
        .site-grid.sidebar-collapsed .blog-items.columns-2 {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }

    .com_picturae > .site-grid {
        background: var(--body-bg);
    }

    .com_picturae #advanced-search .form-control {
        background: transparent;
        border-color: transparent;
        padding: unset;
    }

    .com-content-article__body > * + * {
        margin-block-start: 1em;
    }

    .com_picturae fieldset + fieldset {
        margin-block-start: unset;
    }

    .meta-data {
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 1rem;
        background: #98c561;
        inline-size: 10ch;
        padding: .5em 1em;
    }


    .cards-shadow .card.card--position-inline-start {
        flex-direction: row;
    }

    .cards-shadow .card.card--position-inline-end {
        flex-direction: row-reverse;
    }

    .cards-shadow .card.card--position-block-start {
        flex-direction: column;
    }

    .cards-shadow .card.card--position-block-end {
        flex-direction: column-reverse;
    }

    .mod-jo-related-articles .mod-articles-image {
        padding: .5em .5em 0em .5em;
        flex: 0 0 10rem;
        margin-block-end: unset;
    }

    .mod-jo-related-articles .mod-articles-image img {
        block-size: 100%;
        object-fit: cover;
        border-radius: var(--border-radius);
    }

    .cards-shadow .card.card--position-inline-start .card-body {
        padding-inline: calc(.5 * var(--card-spacer-x)) var(--card-spacer-x);
    }

    .moduletable:has(> .mod-jo-related-articles) {
        margin-block-start: 2rem;
        display: flex;
        flex-direction: column;
        gap: .75rem;
    }

    button:disabled {
        cursor: not-allowed;
        pointer-events: unset !important;
    }

} /* end @layer user */