html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background-image: url('../images/Logo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 28px;
    height: 28px;
}

/* SplashScreen: show the full SplashScreen.png image instead of a small icon inside
   a colored circle, and replace the spinning ring with a loading bar under the image. */
#applicationLoadingPanel .loading {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#applicationLoadingPanel .loading-border,
#applicationLoadingPanel .loading-floated-circle {
    display: none;
}

#applicationLoadingPanel .loading-image-wrapper {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent !important;
    border-radius: 0 !important;
}

#applicationLoadingPanel .loading-image {
    width: 320px;
    max-width: 60vw;
    height: auto;
}

#applicationLoadingPanel .loading-caption {
    display: none;
}

#applicationLoadingPanel .loading::after {
    content: "";
    display: block;
    margin-top: 0.5rem;
    width: 160px;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background-color: var(--dxds-color-border-secondary-default-rest, var(--bs-gray-300, #d9d9d9));
    background-image: linear-gradient(90deg, transparent, var(--dxds-color-content-primary-default-rest, var(--bs-primary, #337ab7)) 50%, transparent);
    background-size: 60px 100%;
    background-repeat: no-repeat;
    background-position: -60px 0;
    animation: splash-loading-bar 1.2s infinite linear;
}

@keyframes splash-loading-bar {
    to {
        background-position: 220px 0;
    }
}

/* ---------------------------------------------------------------------------
   Public sign-up page (Pages/Register.razor). The editors themselves are
   DevExpress components, so they pick up the application theme; these rules
   only build the page around them (card, header, spacing). Colors come from
   the Bootstrap theme variables the DevExpress theme link defines, so the page
   follows the theme instead of hard-coding a palette.
   --------------------------------------------------------------------------- */
.sf-register-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100%;
    padding: 2.5rem 1rem 3.5rem;
    background-color: var(--bs-tertiary-bg, #f5f6f8);
}

.sf-register-card {
    width: 100%;
    max-width: 40rem;
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
    overflow: hidden;
}

.sf-register-header {
    padding: 2rem 2rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.sf-register-logo {
    width: 150px;
    max-width: 60%;
    height: auto;
    margin-bottom: 1rem;
}

.sf-register-title {
    margin: 0 0 .5rem;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
}

.sf-register-subtitle {
    margin: 0 auto;
    max-width: 32rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--bs-secondary-color, #6c757d);
}

.sf-register-body {
    padding: 1.5rem 2rem 2rem;
}

/* The two group cards stack; keep them flush with the header/footer rules above
   and below them instead of the Form Layout's default gutter. */
.sf-register-form {
    margin: 0;
}

.sf-register-caption {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.sf-register-required::after {
    content: " *";
    color: var(--bs-danger, #dc3545);
}

.sf-register-hint {
    margin-top: .3125rem;
    font-size: .75rem;
    line-height: 1.35;
    color: var(--bs-secondary-color, #6c757d);
}

.sf-register-error {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    font-size: .875rem;
    border: 1px solid var(--bs-danger-border-subtle, #f1aeb5);
    border-left-width: .25rem;
    border-radius: .375rem;
    color: var(--bs-danger-text-emphasis, #58151c);
    background-color: var(--bs-danger-bg-subtle, #f8d7da);
}

.sf-register-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.sf-register-submit {
    min-width: 11rem;
}

.sf-register-legend {
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.sf-register-star {
    color: var(--bs-danger, #dc3545);
}

.sf-register-footer {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    font-size: .875rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Confirmation state shown in place of the form after a successful request. */
.sf-register-done {
    text-align: center;
    padding: 1rem 0 .5rem;
}

.sf-register-done-icon {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--bs-success-bg-subtle, #d1e7dd);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23198754'%3E%3Cpath d='M13.5 4.5 6.5 11.5 2.5 7.5l1.4-1.4 2.6 2.6 5.6-5.6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.75rem;
}

.sf-register-done-title {
    margin: .875rem 0 .5rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.sf-register-done-text {
    margin: 0 auto;
    max-width: 28rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--bs-secondary-color, #6c757d);
}

@media (max-width: 575.98px) {
    .sf-register-header {
        padding: 1.5rem 1.25rem 1rem;
    }

    .sf-register-body {
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .sf-register-actions {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}