.tenant-branding-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem 0.5rem;
    text-align: center;
}

.tenant-branding-logo img {
    max-height: 72px;
    max-width: min(320px, 90vw);
    object-fit: contain;
}

.tenant-branding-title {
    margin: 0;
    font-size: 1rem;
    color: #4b5563;
}

.tenant-web-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.tenant-login-body {
    margin: 0;
    min-height: 100vh;
    background: #e8e8e8;
}

.tenant-login-main {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
}

html[data-k3-tile-tenant-branding="true"] .tenant-login-body .heading {
    color: var(--k3-tile-monochrome-color);
}

html[data-k3-tile-tenant-branding="true"] .tenant-login-body .form .input:focus {
    border-inline-color: var(--k3-tile-monochrome-color);
}

html[data-k3-tile-tenant-branding="true"] .tenant-login-body .form .login-button {
    background: var(--k3-tile-monochrome-color);
    color: var(--k3-tile-monochrome-contrast);
    box-shadow: color-mix(in srgb, var(--k3-tile-monochrome-color) 45%, transparent) 0px 20px 10px -15px;
}

html[data-k3-tile-tenant-branding="true"] .tenant-login-body .form .forgot-password a,
html[data-k3-tile-tenant-branding="true"] .tenant-login-body .agreement a {
    color: var(--k3-tile-monochrome-color);
}

html[data-k3-tile-tenant-branding="true"] .start-static-shell .result-item:hover {
    border-color: color-mix(in srgb, var(--k3-tile-monochrome-color) 35%, #ffffff);
}

html[data-k3-tile-tenant-branding="true"] .account-static-body .account-table tbody tr:hover {
    background: color-mix(in srgb, var(--k3-tile-monochrome-color) 8%, #ffffff);
}