.login-content{
   margin: 20px;
}

.error{
	color: red;
}
.msg{
	color: red;
}

.menu{
	 border: thin;
  	 border-color: red;
  	 border-width: medium;
}
.panel-content{
	color: red;
}

/* ============================================================
 * Indigo login/auth-familie — BS5-redesign (12-07-2026)
 * Geladen door de 11 offcanvas-pagina's (login, wachtwoord,
 * setup, 2FA, helpdesk, error). Gecentreerde compositie,
 * zwevende kaart, sociale knoppen, typografisch watermerk.
 * ============================================================ */
body {
    background: linear-gradient(160deg, #f9fafb 0%, #edf2f8 45%, #dfe9f4 100%);
}
body::after {
    content: "Indigo";
    position: fixed; right: 4vw; bottom: 3vh;
    font-size: clamp(90px, 8vw, 150px); font-weight: 700; letter-spacing: 2px;
    color: #337ab7; opacity: .05;
    pointer-events: none; user-select: none; z-index: 0;
}
.page-header {
    text-align: center;
    margin: 26px 0 6px !important;
    /* !important verslaat het inline padding-left:30px-restant op de h1/h3's (titel stond ~15px uit het midden) */
    padding: 0 15px 9px !important;
    font-size: 26px; color: #2c3e50;
    border-bottom: 0 !important;
}
.row-offcanvas {
    justify-content: center;
    margin-left: 0 !important; margin-right: 0 !important;
}
.row-offcanvas > .col-sm-1,
.row-offcanvas > .col-sm-3:not(.sidebar-offcanvas) { display: none; }
.sidebar-offcanvas {
    order: 3; flex: 0 0 100%;
    width: 100%; max-width: none; margin-top: 6px;
}
.sidebar-offcanvas .nav-sidebar { display: flex !important; justify-content: center; gap: 26px; }
.sidebar-offcanvas .nav-sidebar > li > a { padding: 6px 10px; }
/* Vaste kaartbreedte (verhouding als Jortt/ParnasSys: ~420px), los van schermbreedte.
 * col-4-pagina's (login, 2FA, forgot, …) -> 490 kolom = 420 kaart;
 * col-6 (setupWachtwoord, label+veld-rijen) en col-8 (Kentalis) -> 620 = 550 kaart. */
.row-offcanvas > .main.col-md-4 { flex: 0 0 auto; width: 490px; max-width: 100%; }
.row-offcanvas > .main.col-md-6,
.row-offcanvas > .main.col-md-8 { flex: 0 0 auto; width: 620px; max-width: 100%; }
/* Center-patroon (col-10 offset-1 e.d.) in de kaart -> volle kaartbreedte,
 * zodat velden en knoppen even breed zijn. Label+veld-rijen (col-sm-*) blijven staan. */
.login-content .card-body .col-10,
.login-content .card-body .col-8 { flex: 0 0 100%; width: 100%; max-width: 100%; padding: 0; }
.login-content .card-body :is(.col-10, .col-8):is(.offset-1, .offset-2) { margin-left: 0; }
.login-content .card-body .row { margin-left: 0; margin-right: 0; }
/* Ruimer verticaal ritme in de kaart (referenties ~24px) */
.login-content .card-body .mb-3 { margin-bottom: 20px !important; }
/* Rijen die alleen een hidden (csrf-)input bevatten geven loze witruimte onderin de kaart */
.login-content .card-body .row:has(> [class*="col-"] > input[type=hidden]:only-child) { display: none; }
.card {
    position: relative; z-index: 1;
    border: 0; border-radius: 12px;
    box-shadow: 0 16px 48px rgba(30, 60, 90, .14);
    overflow: hidden;
}
.card-header.text-bg-primary {
    background: linear-gradient(135deg, #3d82bd, #2c6395) !important;
    padding: 15px; font-size: 17px; border: 0;
}
.card-header h4 { margin: 0; font-size: 18px; }
.card-body { padding: 28px 32px; }
/* Geneste card-body's (setupAccount, setupWachtwoord(Error), securitycode) niet dubbel bekleden */
.login-content .card-body .card-body { padding: 0; }
/* p-5-infoblokken (48px) passen niet in de vaste kaartbreedte */
.login-content .p-5 { padding: 24px !important; }
/* Lege BS3-spacer-kolommen in de kaart geven flex-gaten */
.login-content .card-body [class*="col-"]:empty { display: none; }
/* Smalle kaarten (col-md-4): label bóven veld i.p.v. col-sm-4/8 naast elkaar */
.main.col-md-4 .card-body .row > label[class*="col-sm-"] { flex: 0 0 100%; width: 100%; padding: 0; margin-bottom: 5px; }
.main.col-md-4 .card-body .row > label[class*="col-sm-"] + [class*="col-sm-"] { flex: 0 0 100%; width: 100%; padding: 0; }
/* Footer-knoppenrij (setupAccount/setupWachtwoord): kolommen op inhoud i.p.v. 33%-grid */
.login-content footer.footer { display: flex; }
.login-content footer.footer [class*="col-md-"] { width: auto; flex: 0 0 auto; padding: 0; }
/* Feedback-teksten kregen hun afstand van de (nu verborgen) csrf-row */
.login-content .card-body .text-danger, .login-content .card-body .text-warning { margin-bottom: 12px; }
.input-group {
    border: 1px solid #ccd6e0; border-radius: 8px; overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.input-group:focus-within { border-color: #337ab7; box-shadow: 0 0 0 3px rgba(51, 122, 183, .15); }
.input-group-text { background: #fff; border: 0; color: #8aa2b8; padding-left: 14px; }
.input-group .form-control { border: 0; height: 44px; box-shadow: none; font-size: 15px; }
/* geen "verplicht veld"-geel (indigo.css input:required) op de auth-kaart: alles is hier verplicht */
.login-content .input-group .form-control:required { background-color: #fff; }
.input-group .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #212529 !important;
}
/* Smalle schermen: compactere marges zodat de lange placeholder
 * ("Gebruikersnaam of e-mailadres") niet afkapt */
@media (max-width: 480px) {
    .login-content { margin: 12px 0; }
    .card-body { padding: 22px 18px; }
    .input-group .form-control::placeholder { font-size: 13px; }
}
.btn-primary {
    height: 44px; font-size: 15px;
    border-radius: 8px; border: 0;
    box-shadow: 0 6px 18px rgba(51, 122, 183, .28);
}
/* Succes/annuleer-knoppen (forgotPassword, setupAccount) in dezelfde stijltaal */
.login-content .btn-success, .login-content .btn-danger {
    height: 44px; font-size: 15px; padding: 6px 18px;
    border-radius: 8px; border: 0;
}
.btn-link { font-size: 14px; }
.btn-social {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin: 0;
    padding: 9px 14px;
    border: 1px solid #ccd6e0; border-radius: 8px;
    background: #fff; color: #333; font-size: 14px; text-decoration: none;
}
.btn-social:hover, .btn-social:focus { background: #f5f8fb; color: #333; text-decoration: none; }
.social-login { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.social-divider {
    display: flex; align-items: center; gap: 12px;
    color: #9ab0c4; font-size: 13px;
}
.social-divider::before, .social-divider::after {
    content: ""; flex: 1; height: 1px; background: #e3eaf2;
}
/* Organisatiekeuze (swvselection.jsp) — zelfde stijltaal als de auth-kaart */
.swv-selection { max-width: 560px; margin: 0 auto; }
.swv-selection-intro { margin-bottom: 20px; color: #4a5a68; }
.swv-selection .list-group-item {
    border-color: #e3eaf2; padding: 11px 16px;
    font-size: 15px; color: #2c5f8d;
}
.swv-selection .list-group-item-action::after {
    content: "\203A"; float: right; color: #9ab0c4; font-size: 17px; line-height: 1;
}
.swv-selection .list-group-item-action:hover,
.swv-selection .list-group-item-action:focus { background: #f5f8fb; color: #234c71; }