.app-loading-modern {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(280px, calc(100% - 48px));
    min-width: 0;
    margin-inline: auto;
    place-items: center;
    box-sizing: border-box;
    color: #17324d;
}

.app-loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 264px;
    max-width: 100%;
    min-height: 156px;
    border: 1px solid rgb(143 163 189 / 24%);
    border-radius: 18px;
    padding: 28px 30px 27px;
    background:
        radial-gradient(ellipse at 50% 0, rgb(222 234 247 / 55%), transparent 72%),
        linear-gradient(155deg, #ffffff, #fbfcfe);
    box-shadow:
        0 2px 4px rgb(22 42 70 / 3%),
        0 16px 38px rgb(22 42 70 / 8%),
        inset 0 1px 0 rgb(255 255 255 / 90%);
    text-align: center;
    isolation: isolate;
}

.app-loading-brand {
    display: block;
    color: #17324d;
    font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.app-loading-caption {
    display: block;
    margin-top: 8px;
    color: #5d6c7c;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.5;
}

.app-loading-track {
    position: relative;
    width: 132px;
    max-width: 100%;
    height: 3px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 3px;
    background: #e1e9f2;
}

.app-loading-runner {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: 48%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, #5795ca 26%, #1b65a7 74%, transparent);
    transform: translateX(-110%);
    animation: app-loading-travel 1.6s cubic-bezier(.45, 0, .3, 1) infinite;
}

.app-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    width: auto;
    margin: 0;
    padding: 24px;
    border-radius: inherit;
    background: rgb(255 255 255 / 54%);
    cursor: progress;
}

.app-loading-bootstrap {
    margin: 32vh auto 0;
}

.app-loading-accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

html[data-loading-style="legacy"] .app-loading-modern,
html:not([data-loading-style="legacy"]) .app-loading-legacy {
    display: none;
}

@keyframes app-loading-travel {
    0% {
        transform: translateX(-110%);
        opacity: .35;
    }

    22%, 78% {
        opacity: 1;
    }

    100% {
        transform: translateX(220%);
        opacity: .35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-runner {
        animation: none;
        transform: translateX(54%);
        opacity: .7;
    }
}

.app-loading-legacy-wrapper {
    display: contents;
}

.app-loading-legacy-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    padding: 24px;
    place-items: center;
    background: rgb(255 255 255 / 54%);
    cursor: progress;
}