.loader-container {
    display: flex;
    position: fixed;
    z-index: 1;
    flex-direction: column;
    place-content: center center;
    align-items: center;
    background: transparent;
    inset: 0;

    --base-font-stack:
        blinkmacsystemfont, -apple-system, "Segoe UI", roboto, oxygen, ubuntu,
        cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", helvetica,
        arial, sans-serif;
}

esp-root:not(:empty) + .loader-container {
    display: none;
}

#esp-init-loader {
    max-width: 100px;
    animation: 2s linear infinite svg-animation;
}

@keyframes svg-animation {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

@keyframes circle-animation {
    0%,
    25% {
        transform: rotate(0);
        stroke-dashoffset: 280;
    }

    50%,
    75% {
        transform: rotate(45deg);
        stroke-dashoffset: 45;
    }

    100% {
        transform: rotate(360deg);
        stroke-dashoffset: 280;
    }
}

#esp-init-loader circle {
    display: block;
    transform-origin: 50% 50%;
    animation: 1.4s ease-in-out infinite both circle-animation;
    stroke-width: 10px;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 0;
    fill: transparent;
}

#esp-init-loader .spinner-color-start {
    stop-color: var(
        --spinner-color-start,
        var(--custom-accent, var(--rgb-accent-500, #d23b21))
    );
}

#esp-init-loader .spinner-color-end {
    stop-color: var(
        --spinner-color-end,
        var(--custom-primary, var(--rgb-primary-500, #397593))
    );
}

#esp-init-loader-message {
    display: none;
    align-items: flex-end;
    margin: 2rem;
    color: #000000;
    font-family: Clarivate, "Clarivate Regular", var(--base-font-stack);
    font-size: 1.5rem;
}

#esp-init-loader-message img {
    max-height: 33px;
}

#esp-init-loader-message strong {
    font-family: Clarivate, "Clarivate Bold", var(--base-font-stack);
}