
/* Rainbow on toptask header and card  */
.highlightmenu .card:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.5rem;
    background: linear-gradient(90deg, var(--root-color--primary) 0%, #C9CE26 100%);
    transform: translate(0,50%);
    z-index: 1;
}

.highlightmenu .card {
    position: relative;
}

.highlightmenu .card:after {
    background: linear-gradient(90deg, #C9CE26 0%, var(--root-color--primary) 100%);
}

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

/* Set background color for circle social links */
.page-footer__columns .footer__link .link:active,
.page-footer__columns .footer__link .link:focus,
.page-footer__columns .footer__link .link:hover {
    --color: var(--root-color--primary);
}

/* No borders on contactpage collapsible */
[data-document-type="64"] .collapsible:not(.accordion__item) {
    border: 0;
    margin-bottom: 0.25rem;
    --color-border-horizontal: transparent;
}

[data-document-type="64"] .collapsible__button:focus,
[data-document-type="64"] .collapsible__button:hover {
    --color-background: #FBFCF0;
}

/* Differentiate footer links hover color from social links hover color */
:not(.footer-social-media-links__container) > .footer__link-list .link:hover,
:not(.footer-social-media-links__container) > .footer__link-list .link:focus,
:not(.footer-social-media-links__container) > .footer__link-list .link:active {
    --color: var(--root-color--white-darkest);
}

/* Smaller icones to balance links */
.footer-social-media-links__container {
    margin-top: 1em;
}

.page-footer__columns .footer__element--icons .link {
    height: 2em;
    width: 2em;
}

/* Top Button "Mijn Dijk en Waard" */
.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:%2300629B;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:%23005181;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: #00629B;
    }

    .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;
    }
}
