/* ============================================================
   ZUPPCODE
   NANOBAR REFERENCE COMPONENT V1
   ============================================================ */

.zp-hbr-nanobar {
    --zp-nano-bg: #111923;
    --zp-nano-fg: #f8fafc;
    --zp-nano-muted: rgba(255,255,255,.62);

    --zp-nano-height: 34px;
    --zp-nano-font-size: 12px;

    --zp-nano-marquee-time: 24s;

    position: relative;
    z-index: 40;

    width: 100%;

    overflow: hidden;

    background:
        var(--zp-nano-bg) !important;

    color:
        var(--zp-nano-fg);

    font-size:
        var(--zp-nano-font-size);

    transition:
        opacity .22s ease,
        transform .22s ease;
}


/* ============================================================
   FONTOS:
   régi hardcoded separator pseudo-elemek nullázása.
   A separator kizárólag a rendererből jöhet.
   ============================================================ */

.zp-hbr-nanobar__track > span::before,
.zp-hbr-nanobar__track > span::after,
.zp-hbr-nanobar__lane > span::before,
.zp-hbr-nanobar__lane > span::after {
    content:
        none !important;

    display:
        none !important;
}


/* ============================================================
   APPEARANCE
   ============================================================ */

.zp-hbr-nanobar--appearance-dark {
    --zp-nano-bg: #111923;
    --zp-nano-fg: #f8fafc;
    --zp-nano-muted: rgba(255,255,255,.62);
}


.zp-hbr-nanobar--appearance-accent {
    --zp-nano-bg: #f5a000;
    --zp-nano-fg: #111820;
    --zp-nano-muted: rgba(17,24,32,.62);
}


.zp-hbr-nanobar--appearance-light {
    --zp-nano-bg: #f4f6f8;
    --zp-nano-fg: #152131;
    --zp-nano-muted: #68788a;
}


/* ============================================================
   SIZE
   ============================================================ */

.zp-hbr-nanobar--size-compact {
    --zp-nano-height: 27px;
    --zp-nano-font-size: 10px;
}


.zp-hbr-nanobar--size-normal {
    --zp-nano-height: 34px;
    --zp-nano-font-size: 12px;
}


.zp-hbr-nanobar--size-large {
    --zp-nano-height: 43px;
    --zp-nano-font-size: 13px;
}


/* ============================================================
   STRUCTURE
   ============================================================ */

.zp-hbr-nanobar__inner {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;

    gap: 16px;

    min-height:
        var(--zp-nano-height);
}


.zp-hbr-nanobar__track {
    min-width: 0;

    flex: 1;

    overflow: hidden;
}


.zp-hbr-nanobar__message {
    font-weight: 650;

    letter-spacing: .01em;
}


/* ============================================================
   ENTRY EFFECT
   FONTOS:
   az entry animation az INNER elemen fut.
   Így nem ütközik a root scroll/close transformmal.
   ============================================================ */

.zp-hbr-nanobar--entry-fade
.zp-hbr-nanobar__inner {
    animation:
        zpNanoEntryFade
        .40s
        ease;
}


.zp-hbr-nanobar--entry-slide-down
.zp-hbr-nanobar__inner {
    animation:
        zpNanoEntrySlideDown
        .44s
        cubic-bezier(.2,.8,.2,1);
}


.zp-hbr-nanobar--entry-expand
.zp-hbr-nanobar__inner {
    transform-origin:
        top center;

    animation:
        zpNanoEntryExpand
        .42s
        cubic-bezier(.2,.8,.2,1);
}


@keyframes zpNanoEntryFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes zpNanoEntrySlideDown {

    from {
        opacity: 0;

        transform:
            translateY(-12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes zpNanoEntryExpand {

    from {
        opacity: 0;

        transform:
            scaleY(.2);
    }

    to {
        opacity: 1;

        transform:
            scaleY(1);
    }
}


/* ============================================================
   BACKGROUND EFFECT
   FONTOS:
   nem a root animation property-jét használjuk.
   ============================================================ */

.zp-hbr-nanobar--bg-gradient::before {
    content: "";

    position: absolute;
    z-index: 1;

    inset: 0;

    pointer-events: none;

    background-size:
        240%
        240%;

    animation:
        zpNanoGradient
        8s
        ease
        infinite;
}


.zp-hbr-nanobar--appearance-dark.zp-hbr-nanobar--bg-gradient::before {
    background-image:
        linear-gradient(
            110deg,
            #0d141d,
            #263a50,
            #111923,
            #314a62
        );
}


.zp-hbr-nanobar--appearance-accent.zp-hbr-nanobar--bg-gradient::before {
    background-image:
        linear-gradient(
            110deg,
            #e88d00,
            #ffb41f,
            #f39a00,
            #ffc13d
        );
}


.zp-hbr-nanobar--appearance-light.zp-hbr-nanobar--bg-gradient::before {
    background-image:
        linear-gradient(
            110deg,
            #f8fafc,
            #e5ebf0,
            #ffffff,
            #dfe7ed
        );
}


@keyframes zpNanoGradient {

    0% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }

    100% {
        background-position:
            0% 50%;
    }
}


/* ------------------------------------------------------------
   SHIMMER
   ------------------------------------------------------------ */

.zp-hbr-nanobar--bg-shimmer::after {
    content: "";

    position: absolute;
    z-index: 2;

    top: 0;
    bottom: 0;

    left: -30%;

    width: 18%;

    pointer-events: none;

    opacity: .22;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.9),
            transparent
        );

    transform:
        skewX(-18deg);

    animation:
        zpNanoShimmer
        5.2s
        ease-in-out
        infinite;
}


@keyframes zpNanoShimmer {

    0%,
    65% {
        left: -30%;
    }

    100% {
        left: 125%;
    }
}


/* ============================================================
   STATIC MODE
   ============================================================ */

.zp-hbr-nanobar__track--static {
    position: relative;

    text-align: center;

    white-space: nowrap;
}


.zp-hbr-nanobar--static
.zp-hbr-nanobar__message {
    display: none;
}


.zp-hbr-nanobar--static
.zp-hbr-nanobar__message.is-active {
    display: inline-block;
}


/* ------------------------------------------------------------
   STATIC MESSAGE TRANSITIONS
   ------------------------------------------------------------ */

.zp-nano-message-fade {
    animation:
        zpNanoMessageFade
        .38s
        ease;
}


.zp-nano-message-slide-up {
    animation:
        zpNanoMessageSlideUp
        .40s
        cubic-bezier(.2,.8,.2,1);
}


.zp-nano-message-slide-left {
    animation:
        zpNanoMessageSlideLeft
        .40s
        cubic-bezier(.2,.8,.2,1);
}


@keyframes zpNanoMessageFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes zpNanoMessageSlideUp {

    from {
        opacity: 0;

        transform:
            translateY(7px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes zpNanoMessageSlideLeft {

    from {
        opacity: 0;

        transform:
            translateX(13px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


/* ============================================================
   MARQUEE MODE
   ============================================================ */

.zp-hbr-nanobar__runner {
    display: flex;
    align-items: center;

    width: max-content;

    will-change:
        transform;
}


.zp-hbr-nanobar__lane {
    display: flex;
    align-items: center;

    flex: none;

    white-space: nowrap;
}


.zp-hbr-nanobar--marquee
.zp-hbr-nanobar__runner {
    animation:
        zpNanoMarquee
        var(--zp-nano-marquee-time)
        linear
        infinite !important;
}


.zp-hbr-nanobar--speed-slow {
    --zp-nano-marquee-time:
        38s;
}


.zp-hbr-nanobar--speed-normal {
    --zp-nano-marquee-time:
        24s;
}


.zp-hbr-nanobar--speed-fast {
    --zp-nano-marquee-time:
        14s;
}


.zp-hbr-nanobar[data-zp-marquee-direction="right"]
.zp-hbr-nanobar__runner {
    animation-direction:
        reverse !important;
}


.zp-hbr-nanobar--pause-hover:hover
.zp-hbr-nanobar__runner {
    animation-play-state:
        paused !important;
}


@keyframes zpNanoMarquee {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }
}


/* ------------------------------------------------------------
   CONFIGURÁLHATÓ SEPARATOR

   Semmilyen content:"•" nincs itt.
   A szöveg kizárólag a config_json-ból renderelődik.
   ------------------------------------------------------------ */

.zp-hbr-nanobar__separator {
    display: inline-flex;
    align-items: center;

    flex: none;

    margin:
        0
        17px;

    color:
        var(--zp-nano-muted);

    font-size:
        .88em;

    font-weight:
        700;
}


/* ============================================================
   CTA
   ============================================================ */

.zp-hbr-nanobar__cta {
    display: inline-flex;
    align-items: center;

    flex: none;

    color: inherit;

    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;
}


/* ARROW */

.zp-hbr-nanobar--cta-arrow
.zp-hbr-nanobar__cta::after {
    content: "→";

    display: inline-block;

    margin-left: 6px;

    transition:
        transform .18s ease;
}


.zp-hbr-nanobar--cta-arrow
.zp-hbr-nanobar__cta:hover::after {
    transform:
        translateX(4px);
}


/* UNDERLINE */

.zp-hbr-nanobar--cta-underline
.zp-hbr-nanobar__cta {
    position: relative;
}


.zp-hbr-nanobar--cta-underline
.zp-hbr-nanobar__cta::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;

    bottom: -2px;

    height: 1px;

    background:
        currentColor;

    transition:
        right .20s ease;
}


.zp-hbr-nanobar--cta-underline
.zp-hbr-nanobar__cta:hover::after {
    right: 0;
}


/* PULSE */

.zp-hbr-nanobar--cta-pulse
.zp-hbr-nanobar__cta {
    animation:
        zpNanoCtaPulse
        2.7s
        ease-in-out
        infinite;
}


@keyframes zpNanoCtaPulse {

    0%,
    82%,
    100% {
        transform:
            scale(1);
    }

    90% {
        transform:
            scale(1.045);
    }
}


/* ============================================================
   CLOSE
   ============================================================ */

.zp-hbr-nanobar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: none;

    width: 24px;
    height: 24px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: inherit;

    font: inherit;
    font-size: 18px;
    line-height: 1;

    opacity: .56;

    cursor: pointer;

    transition:
        opacity .15s ease,
        background-color .15s ease;
}


.zp-hbr-nanobar__close:hover {
    opacity: 1;

    background:
        rgba(127,127,127,.14);
}


.zp-hbr-nanobar.is-closing {
    opacity: 0;

    transform:
        translateY(-110%);

    pointer-events: none;
}


/* ============================================================
   PROGRESS
   ============================================================ */

.zp-hbr-nanobar__progress {
    position: absolute;
    z-index: 5;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background:
        currentColor;

    opacity: .34;

    transform-origin:
        left center;

    animation:
        zpNanoProgress
        var(--zp-nano-progress-time, 5s)
        linear;

    pointer-events: none;
}


@keyframes zpNanoProgress {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }
}


/* ============================================================
   SCROLL HIDE
   ============================================================ */

.zp-hbr-nanobar.is-scroll-hidden {
    opacity: 0;

    transform:
        translateY(-110%);

    pointer-events: none;
}


/* ============================================================
   DEVICE VISIBILITY
   ============================================================ */

@media (min-width: 1025px) {

    .zp-hbr-nanobar--hide-desktop {
        display:
            none !important;
    }
}


@media
    (min-width: 768px)
    and
    (max-width: 1024px) {

    .zp-hbr-nanobar--hide-tablet {
        display:
            none !important;
    }
}


@media (max-width: 767px) {

    .zp-hbr-nanobar--hide-mobile {
        display:
            none !important;
    }


    .zp-hbr-nanobar__inner {
        gap: 8px;
    }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (
    prefers-reduced-motion:
        reduce
) {

    .zp-hbr-nanobar,
    .zp-hbr-nanobar *,
    .zp-hbr-nanobar::before,
    .zp-hbr-nanobar::after {
        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;
    }
}

/* ZUPPCODE NANOBAR BACKGROUND EFFECTS V2 START */


/* ============================================================
   EFFECT ENGINE
   ============================================================ */

.zp-hbr-nanobar {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    --zp-nb-fx-a:
        rgba(93, 170, 255, .42);

    --zp-nb-fx-b:
        rgba(181, 95, 255, .34);

    --zp-nb-fx-c:
        rgba(46, 225, 190, .32);

    --zp-nb-fx-highlight:
        rgba(255, 255, 255, .48);

    --zp-nb-fx-pattern:
        rgba(255, 255, 255, .15);

    --zp-nb-fx-dark-pattern:
        rgba(15, 23, 42, .12);
}


.zp-hbr-nanobar--appearance-light {
    --zp-nb-fx-a:
        rgba(37, 99, 235, .24);

    --zp-nb-fx-b:
        rgba(147, 51, 234, .20);

    --zp-nb-fx-c:
        rgba(5, 150, 105, .18);

    --zp-nb-fx-highlight:
        rgba(255, 255, 255, .75);

    --zp-nb-fx-pattern:
        rgba(15, 23, 42, .09);

    --zp-nb-fx-dark-pattern:
        rgba(15, 23, 42, .10);
}


.zp-hbr-nanobar--appearance-dark {
    --zp-nb-fx-a:
        rgba(96, 165, 250, .34);

    --zp-nb-fx-b:
        rgba(192, 132, 252, .30);

    --zp-nb-fx-c:
        rgba(45, 212, 191, .26);

    --zp-nb-fx-highlight:
        rgba(255, 255, 255, .34);

    --zp-nb-fx-pattern:
        rgba(255, 255, 255, .12);

    --zp-nb-fx-dark-pattern:
        rgba(255, 255, 255, .10);
}


.zp-hbr-nanobar--appearance-accent {
    --zp-nb-fx-a:
        rgba(255, 255, 255, .30);

    --zp-nb-fx-b:
        rgba(255, 213, 79, .25);

    --zp-nb-fx-c:
        rgba(255, 255, 255, .20);

    --zp-nb-fx-highlight:
        rgba(255, 255, 255, .58);

    --zp-nb-fx-pattern:
        rgba(255, 255, 255, .16);

    --zp-nb-fx-dark-pattern:
        rgba(0, 0, 0, .10);
}


/*
 * A tartalom mindig az effekt fölött.
 */
.zp-hbr-nanobar__inner {
    position: relative;

    z-index: 3;
}


/*
 * Az effekt rétegek.
 */
.zp-hbr-nanobar::before,
.zp-hbr-nanobar::after {
    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 1;
}


/*
 * NONE
 */
.zp-hbr-nanobar--bg-none::before,
.zp-hbr-nanobar--bg-none::after {
    content: none;
}


/* ============================================================
   1. MOVING GRADIENT
   ============================================================ */

.zp-hbr-nanobar--bg-gradient::before {
    content: "";

    inset: -50%;

    background:
        linear-gradient(
            115deg,
            transparent 10%,
            var(--zp-nb-fx-a) 32%,
            var(--zp-nb-fx-b) 52%,
            var(--zp-nb-fx-c) 70%,
            transparent 92%
        );

    background-size:
        220% 220%;

    animation:
        zp-nb-fx-gradient
        7s
        ease-in-out
        infinite;
}


@keyframes zp-nb-fx-gradient {

    0% {
        transform:
            translate3d(
                -18%,
                -4%,
                0
            )
            rotate(-3deg);
    }

    50% {
        transform:
            translate3d(
                18%,
                4%,
                0
            )
            rotate(3deg);
    }

    100% {
        transform:
            translate3d(
                -18%,
                -4%,
                0
            )
            rotate(-3deg);
    }
}


/* ============================================================
   2. SHIMMER
   ============================================================ */

.zp-hbr-nanobar--bg-shimmer::before {
    content: "";

    width: 38%;

    left: -48%;

    right: auto;

    background:
        linear-gradient(
            100deg,
            transparent 0%,
            transparent 18%,
            var(--zp-nb-fx-highlight) 50%,
            transparent 82%,
            transparent 100%
        );

    filter:
        blur(1px);

    transform:
        skewX(-18deg);

    animation:
        zp-nb-fx-shimmer
        2.8s
        ease-in-out
        infinite;
}


@keyframes zp-nb-fx-shimmer {

    0% {
        transform:
            translateX(0)
            skewX(-18deg);
    }

    100% {
        transform:
            translateX(410%)
            skewX(-18deg);
    }
}


/* ============================================================
   3. AURORA
   ============================================================ */

.zp-hbr-nanobar--bg-aurora::before {
    content: "";

    inset:
        -120%
        -20%;

    background:
        radial-gradient(
            ellipse at 18% 50%,
            var(--zp-nb-fx-a),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 52% 40%,
            var(--zp-nb-fx-b),
            transparent 45%
        ),
        radial-gradient(
            ellipse at 82% 58%,
            var(--zp-nb-fx-c),
            transparent 42%
        );

    filter:
        blur(14px)
        saturate(1.25);

    animation:
        zp-nb-fx-aurora
        7s
        ease-in-out
        infinite
        alternate;
}


@keyframes zp-nb-fx-aurora {

    0% {
        transform:
            translate3d(
                -5%,
                -3%,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                4%,
                4%,
                0
            )
            scale(1.08);
    }

    100% {
        transform:
            translate3d(
                8%,
                -2%,
                0
            )
            scale(.98);
    }
}


/* ============================================================
   4. SPOTLIGHT
   ============================================================ */

.zp-hbr-nanobar--bg-spotlight::before {
    content: "";

    width: 55%;

    left: -60%;

    right: auto;

    background:
        radial-gradient(
            ellipse at center,
            var(--zp-nb-fx-highlight) 0%,
            var(--zp-nb-fx-a) 26%,
            transparent 70%
        );

    filter:
        blur(7px);

    animation:
        zp-nb-fx-spotlight
        5s
        ease-in-out
        infinite;
}


@keyframes zp-nb-fx-spotlight {

    0% {
        transform:
            translateX(0);
    }

    50% {
        transform:
            translateX(285%);
    }

    100% {
        transform:
            translateX(0);
    }
}


/* ============================================================
   5. STRIPES
   ============================================================ */

.zp-hbr-nanobar--bg-stripes::before {
    content: "";

    inset:
        -100%
        -30%;

    background:
        repeating-linear-gradient(
            120deg,
            transparent 0,
            transparent 18px,
            var(--zp-nb-fx-pattern) 19px,
            var(--zp-nb-fx-pattern) 27px,
            transparent 28px,
            transparent 46px
        );

    animation:
        zp-nb-fx-stripes
        6s
        linear
        infinite;
}


@keyframes zp-nb-fx-stripes {

    from {
        transform:
            translate3d(
                -50px,
                0,
                0
            );
    }

    to {
        transform:
            translate3d(
                50px,
                0,
                0
            );
    }
}


/* ============================================================
   6. DOTS
   ============================================================ */

.zp-hbr-nanobar--bg-dots::before {
    content: "";

    background:
        radial-gradient(
            circle,
            var(--zp-nb-fx-pattern) 1.6px,
            transparent 1.8px
        );

    background-size:
        18px 18px;

    animation:
        zp-nb-fx-dots
        8s
        linear
        infinite;
}


@keyframes zp-nb-fx-dots {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            72px 36px;
    }
}


/* ============================================================
   7. GRID
   ============================================================ */

.zp-hbr-nanobar--bg-grid::before {
    content: "";

    background-image:
        linear-gradient(
            var(--zp-nb-fx-pattern) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--zp-nb-fx-pattern) 1px,
            transparent 1px
        );

    background-size:
        28px 28px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 15%,
            #000 85%,
            transparent
        );

    animation:
        zp-nb-fx-grid
        10s
        linear
        infinite;
}


@keyframes zp-nb-fx-grid {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            56px 28px,
            56px 28px;
    }
}


/* ============================================================
   8. SWEEP
   ============================================================ */

.zp-hbr-nanobar--bg-sweep::before {
    content: "";

    width: 24%;

    left: -34%;

    right: auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--zp-nb-fx-highlight),
            var(--zp-nb-fx-a),
            transparent
        );

    filter:
        blur(3px);

    transform:
        skewX(-24deg);

    animation:
        zp-nb-fx-sweep
        3.4s
        cubic-bezier(
            .4,
            0,
            .2,
            1
        )
        infinite;
}


@keyframes zp-nb-fx-sweep {

    0% {
        transform:
            translateX(0)
            skewX(-24deg);

        opacity: 0;
    }

    15% {
        opacity: .95;
    }

    75% {
        opacity: .95;
    }

    100% {
        transform:
            translateX(560%)
            skewX(-24deg);

        opacity: 0;
    }
}


/* ============================================================
   9. PULSE GLOW
   ============================================================ */

.zp-hbr-nanobar--bg-pulse-glow::before {
    content: "";

    inset:
        -180%
        5%;

    background:
        radial-gradient(
            ellipse at center,
            var(--zp-nb-fx-a) 0%,
            var(--zp-nb-fx-b) 24%,
            transparent 64%
        );

    filter:
        blur(12px);

    animation:
        zp-nb-fx-pulse-glow
        3s
        ease-in-out
        infinite;
}


@keyframes zp-nb-fx-pulse-glow {

    0%,
    100% {
        opacity:
            .35;

        transform:
            scale(.82);
    }

    50% {
        opacity:
            1;

        transform:
            scale(1.14);
    }
}


/* ============================================================
   EXTRA DEPTH
   ============================================================ */

.zp-hbr-nanobar--bg-aurora::after,
.zp-hbr-nanobar--bg-gradient::after,
.zp-hbr-nanobar--bg-pulse-glow::after {
    content: "";

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .08),
            transparent
        );

    opacity:
        .65;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (
    prefers-reduced-motion:
    reduce
) {

    .zp-hbr-nanobar::before,
    .zp-hbr-nanobar::after {
        animation:
            none !important;
    }
}


/* ZUPPCODE NANOBAR BACKGROUND EFFECTS V2 END */

/* ZUPPCODE NANOBAR IMAGE SEPARATOR V1 START */

.zp-hbr-nanobar__separator--image {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;
}


.zp-hbr-nanobar__separator--image img {
    display:
        block;

    width:
        var(
            --zp-nb-separator-width,
            18px
        );

    max-width:
        64px;

    height:
        auto;

    max-height:
        1.45em;

    object-fit:
        contain;
}


/*
 * Dekoratív separatornál semmilyen
 * pseudo content nem jelenhet meg.
 */
.zp-hbr-nanobar__separator::before,
.zp-hbr-nanobar__separator::after {
    content:
        none !important;

    display:
        none !important;
}

/* ZUPPCODE NANOBAR IMAGE SEPARATOR V1 END */

/* ZUPPCODE NANOBAR TEXT SEPARATOR WHITESPACE V2 START */

.zp-hbr-nanobar__separator--text {
    white-space:
        pre;

    flex:
        0 0 auto;
}

/* ZUPPCODE NANOBAR TEXT SEPARATOR WHITESPACE V2 END */