#blazor-error-ui,
#components-reconnect-modal {
    background: color-mix(in srgb, var(--tblr-body-bg) 84%, transparent);
    backdrop-filter: blur(10px);
    color: var(--tblr-body-color);
    inset: 0;
    margin: 0;
    padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
    position: fixed;
    z-index: 2147483646;
}

#blazor-error-ui,
#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

.hoda-runtime-modal-content {
    align-items: center;
    display: flex;
    justify-content: center;
    min-block-size: 100%;
}

.hoda-runtime-dialog {
    background: color-mix(in srgb, var(--tblr-bg-surface) 96%, transparent);
    border: 1px solid var(--tblr-border-color);
    border-radius: 1rem;
    box-shadow: var(--tblr-box-shadow-lg);
    max-inline-size: 29rem;
    padding: clamp(1.75rem, 6vw, 2.75rem);
    text-align: center;
}

.hoda-runtime-icon {
    align-items: center;
    border-radius: 0.9rem;
    display: inline-flex;
    height: 4rem;
    justify-content: center;
    margin-block-end: 1.25rem;
    width: 4rem;
}

.hoda-runtime-icon-reconnect {
    background: color-mix(in srgb, var(--tblr-primary) 14%, transparent);
    color: var(--tblr-primary);
}

.hoda-runtime-icon-error {
    background: color-mix(in srgb, var(--tblr-danger) 14%, transparent);
    color: var(--tblr-danger);
}

.hoda-runtime-eyebrow {
    color: var(--tblr-primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin: 0 0 0.5rem;
}

.hoda-runtime-dialog h2 {
    color: var(--tblr-body-color);
    font-size: 1.3rem;
    line-height: 1.7;
    margin: 0;
}

.hoda-runtime-message {
    color: var(--tblr-secondary-color);
    line-height: 1.9;
    margin: 1rem 0 0;
}

.hoda-runtime-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    left: auto;
    position: static;
    top: auto;
}

.hoda-reconnect-message-show,
.hoda-reconnect-message-failed,
.hoda-reconnect-message-rejected,
.hoda-reconnect-retry-action,
.hoda-reconnect-reload-action {
    display: none;
}

#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-failed):not(.components-reconnect-rejected) .hoda-reconnect-message-show,
#components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-failed):not(.components-reconnect-rejected) .hoda-reconnect-message-show,
#components-reconnect-modal.components-reconnect-failed:not(.components-reconnect-rejected) .hoda-reconnect-message-failed,
#components-reconnect-modal.components-reconnect-rejected .hoda-reconnect-message-rejected {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed:not(.components-reconnect-rejected) .hoda-reconnect-retry-action,
#components-reconnect-modal.components-reconnect-rejected .hoda-reconnect-reload-action {
    display: flex;
}

#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-failed):not(.components-reconnect-rejected) .hoda-runtime-icon-reconnect .icon,
#components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-failed):not(.components-reconnect-rejected) .hoda-runtime-icon-reconnect .icon {
    animation: hoda-runtime-reconnect-spin 1.1s linear infinite;
}

@keyframes hoda-runtime-reconnect-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal.components-reconnect-show:not(.components-reconnect-failed):not(.components-reconnect-rejected) .hoda-runtime-icon-reconnect .icon,
    #components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-failed):not(.components-reconnect-rejected) .hoda-runtime-icon-reconnect .icon {
        animation: none;
    }
}