.mz-loader-svg [class^=mz-loader-hex-] {
    fill: #5CC2E7;
    animation: hexPulse 2.4s ease-in-out infinite;
}

/* Staggered delays so they animate one after another */
.mz-loader-hex-1 { animation-delay: 0s!important;   }
.mz-loader-hex-2 { animation-delay: .2s!important; }
.mz-loader-hex-3 { animation-delay: 0.4s!important; }
.mz-loader-hex-4 { animation-delay: 0.6s!important; }
.mz-loader-hex-5 { animation-delay: 0.8s!important; }
.mz-loader-hex-6 { animation-delay: 1.0s!important; }
.mz-loader-hex-c { animation-delay: 1.2s!important; }

@keyframes hexPulse {
    0%, 100% {
        /* dim / “off” state */
        fill: #9eddf4;
    }
    35% {
        /* “on” / peak color */
        fill: #0e61a3;
    }
    60% {
        /* optional slightly darker for a nicer pulse */
        fill: #004b87
    }
}

.mz-view-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.mz-view-loader  .mz-loader-svg {
    width: 64px;
    height: auto;
}
.mz-view:not(.mz-view-loaded) .mz-view-inner {
    display: none;
}
.mz-view:not(.mz-view-loaded) {
    min-height: 120px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}