.cookie_consent_banner_background {
    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    justify-content: center;

    width: 100%;

    padding: 1.5vh 0vw;

    background: rgba(0, 0, 0, 0.55);

    z-index: 1000;
}

/* While the banner is pending, keep the rest of the page from being interacted with underneath
   the dimmed backdrop (the banner background already covers the viewport width, this just stops
   scrolling behind it, matching the other full-screen info windows on the site). */
body.cookie_consent_pending {
    overflow: hidden;
}

.cookie_consent_banner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2vw;

    width: 90%;
    max-width: 900px;

    padding: 2vh 3vh;

    background-color: var(--primary_color);
    color: white;

    border: 1px var(--secondary_color) solid;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);

    font-family: Verdana;
}

.cookie_consent_text {
    flex: 1;

    font-size: small;
    line-height: 1.4;
}

.cookie_consent_link {
    color: white;
    text-decoration: underline;
}

.cookie_consent_buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vh;

    flex-shrink: 0;
}

.cookie_consent_reject_button {
    border: 1px white solid;
}

.cookie_consent_fallback_container {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100vh;

    padding: 5vh;
    box-sizing: border-box;

    background-color: var(--primary_color_dark, #121212);
}

.cookie_consent_fallback_message {
    max-width: 60ch;

    text-align: center;

    font-family: Verdana;
    font-size: large;
    color: white;
}

@media only screen and (max-width: 768px) {
    .cookie_consent_banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .cookie_consent_buttons {
        justify-content: center;
    }
}