html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- Account pages (login / collega toevoegen) ----------
   These are static server-rendered forms (sign-in needs the HTTP response to set the cookie), where
   MudBlazor input components cannot bind. Plain inputs are styled here to match MudBlazor's outlined
   fields, using the theme's CSS variables so they follow the app colours. */
.vp-auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--mud-palette-background-gray);
}

.vp-auth-brand {
    text-align: center;
    margin-bottom: 24px;
}

.vp-auth-brand .vp-auth-name {
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--mud-palette-primary);
}

.vp-auth-brand .vp-auth-tagline {
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.vp-auth-card {
    width: 100%;
    max-width: 420px;
}

.vp-field {
    margin-bottom: 20px;
}

.vp-field label {
    display: block;
    margin-bottom: 6px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.vp-field input,
.vp-field select {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.vp-field input:hover,
.vp-field select:hover {
    border-color: var(--mud-palette-text-primary);
}

.vp-field input:disabled,
.vp-field select:disabled {
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-lines-inputs);
}

.vp-field input:focus,
.vp-field select:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

/* Override the template's green/red outlines with a MudBlazor-like error border. */
.vp-field input.valid.modified {
    outline: none;
}

.vp-field input.invalid {
    outline: none;
    border-color: var(--mud-palette-error);
}

.vp-field .validation-message {
    margin-top: 4px;
    font-size: .75rem;
    color: var(--mud-palette-error);
}

.vp-hint {
    margin-top: 4px;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.vp-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: .875rem;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.vp-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--mud-palette-primary);
}

.vp-muted {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

/* Inloggen in twee stappen (2FA): the setup steps, the QR code (always black on white, whatever the theme, or phones cannot
   read it; drawn by js/qr.js), the key to type over and the recovery codes. */
.vp-steps {
    padding-left: 20px;
    margin: 0;
}

.vp-steps > li {
    margin-bottom: 16px;
}

.vp-qr {
    width: 200px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 8px 0;
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.vp-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.vp-key {
    font-size: .9rem;
    word-break: break-all;
}

.vp-recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.vp-recovery-codes code {
    font-size: 1rem;
    padding: 4px 8px;
    text-align: center;
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Handleiding: sticky table of contents beside the chapters; one column on small screens. */
.vp-manual { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.vp-manual-toc { position: sticky; top: 80px; }
.vp-manual-link { display: block; padding: 5px 8px; border-radius: 6px; color: var(--mud-palette-text-primary); text-decoration: none; font-size: .9rem; }
.vp-manual-link:hover, .vp-manual-link:focus-visible { background: var(--mud-palette-action-default-hover); }
.vp-manual-body { display: grid; gap: 40px; max-width: 780px; }
.vp-manual-body section { scroll-margin-top: 80px; }
.vp-manual-body td:first-child { white-space: nowrap; vertical-align: top; width: 1%; }
.vp-manual-lead { max-width: 70ch; }
@media (max-width: 960px) {
    .vp-manual { grid-template-columns: 1fr; }
    .vp-manual-toc { position: static; }
}

/* The number next to a tab name on the company page. */
.vp-tab-count { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; font-size: 12px; line-height: 20px; text-align: center; background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-primary); }
.vp-tab-count-warn { background: var(--mud-palette-warning); color: var(--mud-palette-text-primary); }
/* Text for a screen reader only (the tab counts say what they count). */
.vp-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }