[data-document-type="64"] {
    background-color: var(--root-color-background--grey);
}

/* Red lines */
.top-tasks-header {
    border-bottom: 0.5rem solid var(--root-color--secondary);
}

.page-footer {
    border-top: 0.5rem solid var(--root-color--secondary);
}

.card:not(.card--image-none):not(.card--color) .card__link,
.card__no-link,
.section.section--color .card:not(.card--color) .card__link {
    border-bottom-color: var(--root-color--primary);
    border-bottom-style: solid;
    border-bottom-width: 0.25rem;
}

.card.card--button,
.card.card--color .card__link {
    border-bottom-color: var(--root-color--secondary);
    border-bottom-style: solid;
    border-bottom-width: 0.5rem;
}

/* Contact page */
.contact-page__row2,
.contact-page__row3 {
    background-color: var(--root-color--white);
}

.contact-page__row2 {
    margin-top: 3rem;
    padding-top: 1rem;
}

.column > .contact-page__row3:last-child:not(.section--color) {
    margin-bottom: 0;
    padding-bottom: 3rem;
}

@media (min-width: 62rem) {
    /* Page background color */
    [data-document-type]:not([data-document-type="50"]):not([data-document-type="51"]):not([data-document-type="66"]) {
        background-color: var(--root-color-background--grey);
    }

    [data-document-type]:not([data-document-type="50"]):not([data-document-type="51"]):not([data-document-type="56"]):not([data-document-type="64"]):not([data-document-type="66"]):not([data-document-type="1"].layout-1) .main-column {
        background-color: var(--root-color--white);
        margin-top: 3rem;
        margin-bottom: 6rem;
        position: relative;
    }

    /* Using a pseudo element here, because adding the outline to .main-column itself will fail in FF */
    [data-document-type]:not([data-document-type="50"]):not([data-document-type="51"]):not([data-document-type="56"]):not([data-document-type="64"]):not([data-document-type="66"]):not([data-document-type="1"].layout-1) .main-column::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        outline: 3rem solid var(--root-color--white);
        pointer-events: none;
    }

    .page-header__menu {
        --color-background: transparent;
    }

    .page-header__menu__text {
        --color-text: var(--root-color--white);
        --color-text__active: var(--root-color--white);
        --color-text__hover: var(--root-color--white);
    }

    .page-header__search__button {
        --color-border: var(--root-color--primary);
        --color-background: var(--root-color--support);
        --color-text: var(--root-color--primary);
    }

    .page-header__search__button:hover,
    .page-header__search__button:focus {
        --color-border: var(--root-color--primary);
        --color-background: var(--root-color--support-darkest);
        --color-text: var(--root-color--primary);
    }

    /* Spotlight triangle over image */
    .spotlight--layout-0 .spotlight__visual::after,
    .spotlight--layout-5 .spotlight__visual::before {
        background-size: 100% 100%;
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
        width: 7.188rem;
        z-index: 1;
    }

    .spotlight--layout-0 .spotlight__visual::after {
        left: 50%;
    }

    .spotlight--layout-5 .spotlight__visual::before {
        right: 50%;
    }

    .spotlight--layout-0:not(.section--color) .spotlight__visual::after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='115' height='345' fill='%23ffffff'%3E%3Cpath d='M0 0l115 172L0 345z'/%3E%3C/svg%3E");
    }

    .spotlight--layout-0.section--color-primary .spotlight__visual::after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='115' height='345' fill='%23004289'%3E%3Cpath d='M0 0l115 172L0 345z'/%3E%3C/svg%3E");
    }

    .spotlight--layout-0.section--color-secondary .spotlight__visual::after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='115' height='345' fill='%23dd052b'%3E%3Cpath d='M0 0l115 172L0 345z'/%3E%3C/svg%3E");
    }

    .spotlight--layout-0.section--color-support .spotlight__visual::after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='115' height='345' fill='%23fed925'%3E%3Cpath d='M0 0l115 172L0 345z'/%3E%3C/svg%3E");
    }

    .spotlight--layout-0.section--color-grey .spotlight__visual::after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='115' height='345' fill='%23E4E4E2'%3E%3Cpath d='M0 0l115 172L0 345z'/%3E%3C/svg%3E");
    }

    .spotlight--layout-5:not(.section--color) .spotlight__visual::before {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='115' height='345' fill='%23ffffff'%3E%3Cpath d='M115,345L0,173L115,0L115,345Z'/%3E%3C/svg%3E");
    }

    .spotlight--layout-5.section--color-primary .spotlight__visual::before {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='115' height='345' fill='%23004289'%3E%3Cpath d='M115,345L0,173L115,0L115,345Z'/%3E%3C/svg%3E");
    }

    .spotlight--layout-5.section--color-secondary .spotlight__visual::before {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='115' height='345' fill='%23dd052b'%3E%3Cpath d='M115,345L0,173L115,0L115,345Z'/%3E%3C/svg%3E");
    }

    .spotlight--layout-5.section--color-support .spotlight__visual::before {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='115' height='345' fill='%23fed925'%3E%3Cpath d='M115,345L0,173L115,0L115,345Z'/%3E%3C/svg%3E");
    }

    .spotlight--layout-5.section--color-grey .spotlight__visual::before {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='115' height='345' fill='%23E4E4E2'%3E%3Cpath d='M115,345L0,173L115,0L115,345Z'/%3E%3C/svg%3E");
    }
}

/* Top Button "Mijn Tholen" */
.page-header__button-menu .button.button-support {
    --border-top-color: transparent;
    --border-right-color: transparent;
    --border-bottom-color: transparent;
    --border-left-color: transparent;
    --background-color: transparent;
    --color: var(--root-color--white);
}

.page-header__button-menu .button .button__body {
    padding-right: 0;
    padding-left: 2rem;
    position: relative;
}

.page-header__button-menu .button.button-support .button__body {
    --font-size: 0.937em;
}

.page-header__button-menu .button .button__body::before {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='100%25' height='100%25' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M7.5,0C3.36,0 0,3.36 0,7.5C0,11.64 3.36,15 7.5,15C11.64,15 15,11.64 15,7.5C15,3.36 11.64,0 7.5,0ZM7.5,2.25C8.745,2.25 9.75,3.255 9.75,4.5C9.75,5.745 8.745,6.75 7.5,6.75C6.255,6.75 5.25,5.745 5.25,4.5C5.25,3.255 6.255,2.25 7.5,2.25ZM7.5,12.9C5.625,12.9 3.968,11.94 3,10.485C3.023,8.993 6,8.175 7.5,8.175C8.993,8.175 11.977,8.993 12,10.485C11.033,11.94 9.375,12.9 7.5,12.9Z' style='fill:white;fill-rule:nonzero;'/%3E%3C/svg%3E%0A");
    content: "";
    position: absolute;
    left: 0;
    height: 1.5rem;
    width: 1.5rem;
}

.page-header__button-menu .icon {
    display: none;
}

.page-header__button-menu .button.button-support:active,
.page-header__button-menu .button.button-support:focus,
.page-header__button-menu .button.button-support:hover {
    --border-top-color: var(--root-color--support-dark);
    --border-right-color: var(--root-color--support-dark);
    --border-bottom-color: var(--root-color--support-darkest);
    --border-left-color: var(--root-color--support-dark);
    --background-color: var(--root-color--support-dark);
}
@media (max-width: 61.999rem) {
    .page-header__logo {
        margin-left: 0rem;
        margin-right: 0rem;
    }
}

@media (min-width: 62rem) {
    .page-header__button-menu .button.button-support {
        --background-color: var(--root-color--support);
        --border-radius: var(--root-border-radius);
        --border-top-color: var(--root-color--support);
        --border-right-color: var(--root-color--support);
        --border-bottom-color: var(--root-color--support-darkest);
        --border-left-color: var(--root-color--support);
        --color: var(--root-color--primary);
    }

    .page-header__button-menu .button .button__body {
        padding-left: 3.5rem;
        padding-right: 1.25rem;
        color: var(--root-color--primary);
    }

    .page-header__button-menu .button .button__body::before {
        background-image: url("data:image/svg+xml,%0A%3Csvg width='100%25' height='100%25' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M7.5,0C3.36,0 0,3.36 0,7.5C0,11.64 3.36,15 7.5,15C11.64,15 15,11.64 15,7.5C15,3.36 11.64,0 7.5,0ZM7.5,2.25C8.745,2.25 9.75,3.255 9.75,4.5C9.75,5.745 8.745,6.75 7.5,6.75C6.255,6.75 5.25,5.745 5.25,4.5C5.25,3.255 6.255,2.25 7.5,2.25ZM7.5,12.9C5.625,12.9 3.968,11.94 3,10.485C3.023,8.993 6,8.175 7.5,8.175C8.993,8.175 11.977,8.993 12,10.485C11.033,11.94 9.375,12.9 7.5,12.9Z' style='fill:rgb(0,67,138);fill-rule:nonzero;'/%3E%3C/svg%3E%0A");
        left: 1rem;
    }
}