html {
    /* Tenant-agnostic fallback: used only if a tenant stylesheet fails to load. Not a brand. */

    /* Primary - login button */
    --tenant-primary: #6c757d;
    --tenant-primary-dark: #5a6268;
    --tenant-primary-darker: #495057;

    /* Secondary - forgot-password button */
    --tenant-secondary: #6c757d;
    --tenant-secondary-dark: #5a6268;
    --tenant-secondary-darker: #495057;

    /* Logo aspect ratio (width/height) - lets a fixed-height box fit each tenant's actual logo
       shape instead of forcing every logo into the same square and leaving dead space around it */
    --tenant-login-logo-ratio: 1;
}

/* Background + logo (--tenant-login-background/-logo come from the tenant stylesheet) */
.container-fluid {
    height: 100vh;
    background: var(--tenant-login-background);
    background-repeat: no-repeat;
    background-size: cover;
}

#logo {
    /* Fixed height + per-tenant aspect-ratio gives each logo its real proportions, but a wide
       logo (e.g. a brand reusing a horizontal nav logo here) would otherwise balloon out to
       several hundred px wide at this height - max-width caps that so every tenant's logo stays
       within a consistent footprint, same idea as the standardized side-nav logo box. */
    margin-top: 20px;
    background: var(--tenant-login-logo) no-repeat;
    background-position: center;
    background-size: contain;
    height: 150px;
    width: auto;
    max-width: 300px;
    aspect-ratio: var(--tenant-login-logo-ratio);
}

/* Primary button */
.btn-primary {
    background-color: var(--tenant-primary);
    border-color: var(--tenant-primary-dark);
}

.btn-primary:hover {
    background-color: var(--tenant-primary-dark);
    border-color: var(--tenant-primary-darker);
}

/* Secondary button (forgot password) */
#forgot {
    background-color: var(--tenant-secondary) !important;
    border-color: var(--tenant-secondary-dark) !important;
    color: #ffffff !important;
}

#forgot:hover {
    background-color: var(--tenant-secondary-dark) !important;
    border-color: var(--tenant-secondary-darker) !important;
    color: #ffffff !important;
}