/* Shadow on follow-ups */
.follow-up {
    border-bottom-color: #919191;
    -webkit-box-shadow: 6px 6px 0 0 hsla(0,0%,57%,.25);
    box-shadow: 6px 6px 0 0 hsla(0,0%,57%,.25);
}

/* Content frame */
[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;
}

/*  No breadcrumb border if content frame */
[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"]) .main-top__columns {
    --width-border: 0;
}

/* Contact button color for opening times in top tasks */
.opening-times .button.button-primary {
    --background-color: var(--root-color--secondary);
    --border-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-darkest);
    --border-left-color: var(--root-color--secondary);

    --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--secondary-dark);
    --border-right-color: var(--root-color--secondary-dark);
    --border-bottom-color: var(--root-color--secondary-darkest);
    --border-left-color: var(--root-color--secondary-dark);
    --background-color: var(--root-color--secondary-dark);
}

/* Readspeaker button */
.readspeaker__button.button.button--small .button__body {
    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);
}