:host(.mount) {
    opacity: 1;
    transform: ;
    display: block !important;
}

:host {
    all: initial;
    --bg: var(--bg);
    font: inherit;
    order: 1000;
    display: none;
    width: 100%;
    letter-spacing: inherit;
    font-size: 10px !important;
    isolation: isolate;
    position: fixed;
    opacity: 0;
    transition: opacity 500ms;
    z-index: 9999999;
    padding: 0 1em;
    line-height: 1.375;
}
button {
    border-radius: 0.25em;
    padding: 0.625em 1em;
    cursor: pointer;
    border-color: transparent;
}
button:last-of-type {
    background-color: var(--btnBg);
}
button:last-of-type:hover {
    background-color: var(--btnHover);
    /* filter: invert(95%) drop-shadow(0px 0px 1em #00000020);*/
    /* box-shadow: inset 0 0 100px 100px rgb(255 255 255 / 10%);*/
}
#sub {
    box-shadow: var(--shadow);
    display: flex;
    gap: 2em;
    margin-inline: auto;
    max-width: 1280px;
    border-radius: 0.5em;
    align-items: center;
    padding: 2em 2.5em;
}

[vw] {
    max-width: 100%!important;
    border-radius:0!important;
}
.sdiv {
    display: flex;
    justify-content: end;
    gap: 1em;
    flex-grow:1;
    flex-shrink:0;
}
#preferences {
    padding-block:initial;
}
#preferences:not([hidden]) + #reject {
    color: var(--bg);
    background-color: var(--color);
}

#preferences:not([hidden]) + #reject:hover {
    background-color: var(--sndBtnHover);
}

#preferences,
#preferences[hidden] + #reject {
    color: var(--color); /* same as banner banner color*/
    background-color: var(--bg); /* same as banner bg*/
}

#preferences:hover,
#preferences[hidden] + #reject:hover {
    text-decoration: underline;
}

a {
    color: inherit;
    text-decoration: underline;
}
.fdiv {
    flex-grow: 1;
    color: var(--color);
}

p,
h3 {
    margin: 0;
}
h3 > p {
    font-size: 1em !important;
}

button.lg,
h3.lg,
.lg p {
    font-size: 1.875em;
}
button.md,
h3.md,
.md p {
    font-size: 1.5em;
}
button.sm,
h3.sm,
.sm p {
    font-size: 1.25em;
}

button.xs,
h3.xs,
.xs p {
    font-size: 1em;
}

@media screen and (max-width: 640px) {
    #sub {
        flex-direction: column;
        border-radius: 0.5em 0.5em 0 0;
    }

    h3 {
        line-height: 2;
    }
    :host {
        bottom: 0.5em !important;
        max-height: 300px;
        overflow-y: scroll;
        padding: 0 0.5em;
    }
    .sdiv {
        width: 100%;
    }
    .sdiv,
    #button-group {
        flex-wrap: wrap;
    }
    .sdiv button,
    #button-group button {
        flex-basis: 100%;
    }
    #reject {
        order: 3;
    }
    button.lg,
    h3.lg,
    .lg p {
        font-size: 1.5em;
    }
    button.md,
    h3.md,
    .md p {
        font-size: 1.25em;
    }
    button.sm,
    h3.sm,
    .sm p {
        font-size: 1em;
    }
    button.xs,
    h3.xs,
    .xs p {
        font-size: 0.875em;
    }
}