#zms-page-loader {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--zms-page-loader-z-index, 2147483647);
    width: 100%;
    height: var(--zms-page-loader-height-desktop, 3px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, visibility 0s linear .18s;
    direction: ltr;
    transform: translateZ(0);
    isolation: isolate;
    box-shadow: 0 3px var(--zms-page-loader-shadow-blur, 14px) rgba(0, 0, 0, var(--zms-page-loader-shadow-opacity, .34));
}

#zms-page-loader.is-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

#zms-page-loader__bar {
    width: 0;
    height: 100%;
    background: var(--zms-page-loader-color, #135f9e);
    border-radius: 0 999px 999px 0;
    box-shadow:
        0 0 var(--zms-page-loader-glow-size, 12px) color-mix(in srgb, var(--zms-page-loader-color, #135f9e) 78%, transparent),
        0 2px calc(var(--zms-page-loader-shadow-blur, 14px) * .55) rgba(0, 0, 0, var(--zms-page-loader-shadow-opacity, .34));
    transition: width .22s ease-out, opacity .18s ease;
    will-change: width, opacity;
}

#zms-page-loader.is-finishing #zms-page-loader__bar {
    transition: width .14s ease-out, opacity .24s ease .08s;
}


@media (max-width: 767px) {
    #zms-page-loader {
        height: var(--zms-page-loader-height-mobile, 5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    #zms-page-loader,
    #zms-page-loader__bar {
        transition-duration: .01ms !important;
    }
}