/* Page background color */
@media (min-width: 62rem) {
    [data-document-type]:not([data-document-type="50"]):not([data-document-type="51"]) {
        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: 3.5rem;
        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;
    }
}

/* Readspeaker button */
.readspeaker__button.button.button--small {
    --font-weight: var(--root-font-weight--semi-bold);
}

/* CTA Button */
.button.button--cta {
    --background-color: var(--root-color--support);
    --border-top-color: var(--root-color--support);
    --border-right-color: var(--root-color--support);
    --border-bottom-color: var(--root-color--support);
    --border-left-color: var(--root-color--support);
}

.button.button--cta:active,
.button.button--cta:focus,
.button.button--cta:hover {
    --border-top-color: var(--root-color--support-dark);
    --border-right-color: var(--root-color--support-dark);
    --border-bottom-color: var(--root-color--support-dark);
    --border-left-color: var(--root-color--support-dark);
    --background-color: var(--root-color--support-dark);
}

/* Top tasks */
.top-tasks-tile__description {
    margin-top: 0.5rem;
}

/* Contact button color for opening times in top tasks */
.opening-times .button.button-primary {
    --background-color: var(--root-color--support);
    --border-top-color: var(--root-color--support);
    --border-right-color: var(--root-color--support);
    --border-bottom-color: var(--root-color--support);
    --border-left-color: var(--root-color--support);
    --color: var(--root-color--white);
}

.opening-times .button.button-primary:hover,
.opening-times .button.button-primary:focus,
.opening-times .button.button-primary:active {
    --border-top-color: var(--root-color--support-dark);
    --border-right-color: var(--root-color--support-dark);
    --border-bottom-color: var(--root-color--support-dark);
    --border-left-color: var(--root-color--support-dark);
    --background-color: var(--root-color--support-dark);
}

/* Facets filter */
@media (min-width: 62rem) {
    .facets-filter .collapsible__button,
    .facets-filter .collapsible__panel {
        --color-background: transparent;
    }
}

/* Footer social 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--footer);
}

/* Footer image */
.page-footer {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='502' height='379' xmlns='http://www.w3.org/2000/svg' fill='%23004d84'%3E%3Cpath d='M502.003 241.841l.002 39.467c-32.333 33.31-69.898 67.088-112.44 97.66H269.688c94.907-36.82 172.674-88.126 232.316-137.127zm0 79.949L502 378.967h-57.476a730.814 730.814 0 0057.479-57.177zm.004-143.311v28.387C401.224 284.279 247.45 372.36 70.796 370.84c-97.48-.784-90.29-69.578-2.995-69.797 181.15-.51 334.277-65.377 434.205-122.565zM502 133.856v18.236c-104.596 53.623-268.084 114.982-432.076 86.772-84.846-14.629-61.623-70.917 14.576-58.697 165.364 26.526 318.6-10.721 417.5-46.311zm-350.26-56.512c126.213 49.53 260.557 39.76 350.264 23.136v13.575c-98.796 31.411-250.239 61.688-376.79 10.188-64.36-26.188-31.493-69.655 26.527-46.9zM258.963 9.896C340.388 63.72 434.71 74.744 502.002 74.01l.003 10.937C424.321 96.284 311.519 98.96 228.988 42.771c-42.963-29.265-8.957-58.636 29.974-32.875z' fill='%23004D84' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 30rem;
    background-position: 100% 100%
}

/* 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__row2:last-child:not(.section--color),
.column > .contact-page__row3:last-child:not(.section--color) {
    margin-bottom: 0;
    padding-bottom: 3rem;
}

/* CE Events table */
.button.table-events__button {
    --background-color: var(--root-color--secondary);
    --border-top-color: var(--root-color--secondary);
    --border-right-color: var(--root-color--secondary);
    --border-bottom-color: var(--root-color--secondary);
    --border-left-color: var(--root-color--secondary);
    --color: var(--root-color-text);
}

.button.table-events__button:hover,
.button.table-events__button:focus,
.button.table-events__button:active {
    --border-top-color: var(--root-color--secondary-dark);
    --border-right-color: var(--root-color--secondary-dark);
    --border-bottom-color: var(--root-color--secondary-dark);
    --border-left-color: var(--root-color--secondary-dark);
    --background-color: var(--root-color--secondary-dark);
}

/* Document type product */
[data-document-type="52"] .main-column > .ce-textpic:first-of-type ul:first-of-type,
[data-document-type="52"] .main-column > .page-title + .ce-textpic ul:first-of-type,
[data-document-type="52"] .main-column > .page-title + .top-links + .ce-textpic ul:first-of-type,
[data-document-type="52"] .main-column > .ce-shortcut:first-of-type + .ce-textpic ul:first-of-type,
[data-document-type="52"] .main-column > .page-title + .ce-shortcut + .ce-textpic ul:first-of-type,
[data-document-type="52"] .main-column > .page-title + .top-links + .ce-shortcut + .ce-textpic ul:first-of-type {
    font-weight: var(--root-font-weight--semi-bold);
}

/* CE Highlight menu */
.highlightmenu .card:not(.card--color) .card__title {
    --color: var(--root-color--support);
}