main div.site-wide-banner-wrapper {
    width: 100%;
}

main div.site-wide-banner-container.background-notice {
    background-color: #FBF198;
}

main div.site-wide-banner-container.background-info {
    background-color: rgb(20, 122, 243);
}

main div.site-wide-banner-container.background-warning {
    background-color: rgb(246, 133, 17);
}

main div.site-wide-banner-container.background-light {
    background-color: #ffffff;
}

main div.site-wide-banner-container.background-success {
    background-color: rgb(0, 143, 93);
}

main div.site-wide-banner-container.background-neutral {
    background-color: rgb(44, 44, 44);
}

main div.site-wide-banner-container.background-info div,
main div.site-wide-banner-container.background-warning div,
main div.site-wide-banner-container.background-success div,
main div.site-wide-banner-container.background-neutral div {
    color: white;
}

main div.site-wide-banner-wrapper .site-wide-banner-content {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
    justify-content: center;
    padding: 8px 0;
}

main div.site-wide-banner-wrapper .site-wide-banner-text,
main div.site-wide-banner-wrapper .site-wide-banner-block-wrapper,
main div.site-wide-banner-wrapper .site-wide-banner-button-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

main div.site-wide-banner-wrapper .site-wide-banner-close-button {
    width: 32px;
    height: 32px;
    background: transparent url('../../icons/dismiss.svg') no-repeat center;
    cursor: pointer;
    border: none;
    border-left: 2px solid #22222233;
}

main div.site-wide-banner-container.background-warning .site-wide-banner-close-button,
main div.site-wide-banner-container.background-info .site-wide-banner-close-button,
main div.site-wide-banner-container.background-neutral .site-wide-banner-close-button,
main div.site-wide-banner-container.background-success .site-wide-banner-close-button {
    border-left: 2px solid #ffffff;
    background: transparent url('../../icons/dismiss-white.svg') no-repeat center;
}

main div.site-wide-banner-container.background-warning .site-wide-banner-button-container a,
main div.site-wide-banner-container.background-info .site-wide-banner-button-container a,
main div.site-wide-banner-container.background-neutral .site-wide-banner-button-container a,
main div.site-wide-banner-container.background-success .site-wide-banner-button-container a {
    border-color: #ffffff;
    color: #ffffff;
}

main .fixed-banner {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 100000;
    background: white;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

@media screen and (min-width:320px) and (max-width:1024px) {
    main div.site-wide-banner-wrapper div.site-wide-banner-content {
        flex-direction: column;
        align-items: last baseline;
        width: 100%;
        justify-content: end;
        gap: 12px;
    }

    main div.site-wide-banner-wrapper div.site-wide-banner-text {
        gap: 8px;
        align-items: flex-start;
    }

    main div.site-wide-banner-wrapper div.site-wide-banner-button-container {
        margin: unset;
        width: 100%;
        justify-content: flex-end;
    }

    main div.site-wide-banner-wrapper div.site-wide-banner-block-wrapper {
        padding: 20px 0;
        gap: 10px;
    }

    main div.site-wide-banner-wrapper div.site-wide-banner-close-button {
        width: 32px;
        border-left: 2px solid #22222233;
        background: transparent;
        cursor: pointer;
        position: relative;
    }

    main div.site-wide-banner-wrapper div.site-wide-banner-close-button {
        --before-top: 0px;
        position: relative;
    }

    main div.site-wide-banner-wrapper div.site-wide-banner-close-button::before {
        content: '';
        position: absolute;
        top: var(--before-top, 0);
        left: 0;
        width: 32px;
        height: 32px;
        background-size: 20px 20px;
    }

}