/* Page type background colors */
[data-document-type="56"],
[data-document-type="77"],
[data-document-type="64"],
[data-document-type="66"] {
    background-color: var(--root-color-background--grey);
}

/* Orange lines on all cards */
.section .card:not(.card--image-none) {
    border-bottom-color: var(--root-color--contrast);
    border-bottom-style: solid;
    border-bottom-width: 0.2222rem;
}

/* Set triangle on card images */
.highlightmenu-list .card .card__visual {
    position: relative;
}

.highlightmenu-list .card .card__visual:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    top: 0;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 472 27' xmlns='http://www.w3.org/2000/svg' fill='%23fff' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M472 27V0L0 27h472z'/%3E%3C/svg%3E");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
}

.highlightmenu-list .card.card--color-primary .card__visual:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 472 27' xmlns='http://www.w3.org/2000/svg' fill='%23208279' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M472 27V0L0 27h472z'/%3E%3C/svg%3E");
}
.highlightmenu-list .card.card--color-secondary .card__visual:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 472 27' xmlns='http://www.w3.org/2000/svg' fill='%237b6957' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M472 27V0L0 27h472z'/%3E%3C/svg%3E");
}
.highlightmenu-list .card.card--color-support .card__visual:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 472 27' xmlns='http://www.w3.org/2000/svg' fill='%23666666' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M472 27V0L0 27h472z'/%3E%3C/svg%3E");
}

/* Footer triangle image */
.page-footer {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1200 51' xmlns='http://www.w3.org/2000/svg' fill='%23695745' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M1200 51V0H0l1200 51z'/%3E%3C/svg%3E");
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain
}

/* Footer social media icons */
.page-footer__columns .footer__element--icons .footer__link .link:active .icon,
.page-footer__columns .footer__element--icons .footer__link .link:focus .icon,
.page-footer__columns .footer__element--icons .footer__link .link:hover .icon {
    --color-icon: var(--root-color--secondary);
}

/* Top tasks background */
@media (min-width: 30rem) {
    .top-tasks-background::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        top: 0;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1200 51' xmlns='http://www.w3.org/2000/svg' fill='%23eee' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M0 0v51h1200L0 0z' fill-rule='nonzero'/%3E%3C/svg%3E");
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

/* Scroll button down */
@media (min-width: 30rem) {
    .scroll-button.scroll-button__down {
        bottom: 1rem;
    }
}

@media (min-width: 48rem) {
    .scroll-button.scroll-button__down {
        bottom: 1.5rem;
    }
}

@media (min-width: 62rem) {
    .scroll-button.scroll-button__down {
        bottom: 2rem;
    }
}
@media (min-width: 75rem) {
    .scroll-button.scroll-button__down {
        bottom: 3rem;
    }
}

/* Top tasks tile spikes */
@media (min-width: 62rem) {
    .top-tasks-tile_row-column-content{
        z-index: 1; /* Content needs to be above the pseudo class after */
    }

    .top-tasks-tile:after {
        background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 56 42' xmlns='http://www.w3.org/2000/svg' fill='%23665443' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M0 39.851S40.222 41.361 56 42v-4c-15.795.488-56 1.851-56 1.851zm0-10S40.222 31.361 56 32v-4c-15.795.488-56 1.851-56 1.851zm0-9S40.222 22.361 56 23v-4c-15.795.488-56 1.851-56 1.851zm0-10S40.222 12.361 56 13V9c-15.795.488-56 1.851-56 1.851zM56 4V0C40.205.488 0 1.851 0 1.851S40.222 3.361 56 4z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 1rem;
        content: "";
        height: 2.625rem;
        position: absolute;
        right: 0;
        width: 3.5rem
    }
}

/* Contact page row 2 and 3 white */
.contact-page__row2 {
    margin-top: 3rem;
}

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

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

/* CE Spotlight spikes */
.spotlight__visual::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 56 42' xmlns='http://www.w3.org/2000/svg' fill='%23eee' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M0 39.851S40.222 41.361 56 42v-4c-15.795.488-56 1.851-56 1.851zm0-10S40.222 31.361 56 32v-4c-15.795.488-56 1.851-56 1.851zm0-9S40.222 22.361 56 23v-4c-15.795.488-56 1.851-56 1.851zm0-10S40.222 12.361 56 13V9c-15.795.488-56 1.851-56 1.851zM56 4V0C40.205.488 0 1.851 0 1.851S40.222 3.361 56 4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    height: 4.5rem;
    position: absolute;
    top: 1.313rem;
    width: 4.5rem;
}

.spotlight--layout-1 .spotlight__visual,
.spotlight--layout-2 .spotlight__visual {
    position: relative;
}

.spotlight--layout-0 .spotlight__visual::after,
.spotlight--layout-1 .spotlight__visual::after {
    transform: rotate(180deg);
}

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

.spotlight--layout-1 .spotlight__visual::after {
    left: 2rem;
}

.spotlight--layout-2 .spotlight__visual::after {
    right: 0;
}

.spotlight--layout-5 .spotlight__visual::after {
    right: 0;
}

/* Top tasks tile spikes */
@media (min-width: 62rem) {
    .spotlight--layout-0 .spotlight__visual::after {
        left: 50%;
    }

    .spotlight--layout-1 .spotlight__visual::after {
        left: 2rem;
    }

    .spotlight--layout-2 .spotlight__visual::after {
        right: 2rem;
    }

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

/* Page header logo */
@media (max-width: 61.999rem) {
    .page-header__logo {
        margin-left: 0;
    }
}

@media (min-width: 20rem) {
    .page-header__logo {
        --width: 6rem;
    }
}

@media (min-width: 30rem) {
    .page-header__logo {
        --width: 11rem;
    }
}

@media (min-width: 48rem) {
    .page-header__logo {
        --width: 20rem;
    }
}

@media (min-width: 62rem) {
    .page-header__logo {
        --width: 23rem;
    }
}

/* Top Button "Mijn loket" */
.page-header__button-menu .button {
    --border-top-width: var(--root-border-width);
    --border-right-width: var(--root-border-width);
    --border-bottom-width: var(--root-border-width);
    --border-left-width: var(--root-border-width);
    --height: 3rem;
}

.page-header__button-menu .button.button-primary {
    --border-top-color: transparent;
    --border-right-color: transparent;
    --border-bottom-color: transparent;
    --border-left-color: transparent;
}

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

.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: 1rem;
    height: 1.5rem;
    width: 1.5rem;
}

@media (max-width: 29.999rem) {
    .page-header__button-menu .button .button__body {
        padding-left: 0;
    }

    .page-header__button-menu .button .button__body::before {
        display: none;
    }
}

@media (min-width: 30rem) and (max-width: 61.999rem) {
    .page-header__button-menu .button .button__body {
        padding-left: 2.5rem;
    }

    .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:%234d4d4d;fill-rule:nonzero;'/%3E%3C/svg%3E%0A");
        left: 0;
    }

    .page-header__button-menu .button:active .button__body::before,
    .page-header__button-menu .button:focus .button__body::before ,
    .page-header__button-menu .button:hover .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:%23218379;fill-rule:nonzero;'/%3E%3C/svg%3E%0A");
        left: 0;
    }
}

@media (max-width: 61.999rem) {
    .page-header__button-menu .button {
        --font-weight: var(--root-font-weight--bold);
    }

    .page-header__button-menu .button.button-primary {
        --color: #4d4d4d;
    }

    .page-header__button-menu .button.button-primary:active,
    .page-header__button-menu .button.button-primary:focus,
    .page-header__button-menu .button.button-primary:hover {
        --color: var(--root-color--primary);
    }

    .page-header__button-menu .button .button__body {
        --background-color: transparent;
        padding-right: 0;
    }

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

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