.zx-maintenance-notice {
    position: sticky;
    top: var(--zx-maintenance-admin-bar-height, 0px);
    z-index: 1000001;
    display: none;
    isolation: isolate;
    width: 100%;
    margin: calc(-1 * var(--zx-maintenance-page-offset, 0px)) 0 0;
    color: #122033;
    background: #edf7ff;
    border-bottom: 1px solid #c8e5fb;
    box-sizing: border-box;
}

:root {
    --zx-maintenance-notice-height: 0px;
    --zx-maintenance-admin-bar-height: 0px;
}

body.admin-bar {
    --zx-maintenance-admin-bar-height: 32px;
}

body.logged-in .zx-maintenance-notice,
html.zx-maintenance-customer .zx-maintenance-notice {
    display: block;
}

html.zx-maintenance-guest .zx-maintenance-notice {
    display: none !important;
}

html body.logged-in .header,
html.zx-maintenance-customer body .header {
    top: calc(
        var(--zx-maintenance-admin-bar-height, 0px) +
        var(--zx-maintenance-notice-height, 0px)
    ) !important;
}

html.zx-maintenance-guest body .header {
    top: var(--zx-maintenance-admin-bar-height, 0px) !important;
}

.zx-maintenance-notice__inner {
    display: grid;
    width: min(100% - 32px, 1280px);
    min-height: 44px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.zx-maintenance-notice__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 9px 0;
    box-sizing: border-box;
}

.zx-maintenance-notice__item + .zx-maintenance-notice__item {
    border-top: 1px solid #c8e5fb;
}

.zx-maintenance-notice__icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: #087ee5;
}

.zx-maintenance-notice p {
    margin: 0;
    color: #34465b;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0;
}

.zx-maintenance-notice strong {
    color: #081b30;
    font-weight: 700;
}

.zx-maintenance-notice__link {
    color: #006abd;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.zx-maintenance-notice__link:hover,
.zx-maintenance-notice__link:focus-visible {
    color: #081b30;
}

.zx-maintenance-notice__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .zx-maintenance-notice__inner {
        width: min(100% - 26px, 1280px);
    }

    .zx-maintenance-notice__item {
        align-items: flex-start;
        justify-content: flex-start;
        padding: 10px 0;
    }

    .zx-maintenance-notice__icon {
        margin-top: 1px;
    }

    .zx-maintenance-notice p {
        font-size: 13px;
    }
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        --zx-maintenance-admin-bar-height: 46px;
    }
}