/* ════════════════════════════════════════════════════════════════
   EDUCATED 7.0 — Écran de connexion, direction « Studio »
   Fichier : wwwroot/css/login.css        Script : wwwroot/js/login.js
   Écran partagé plein écran : à gauche un panneau sombre (encre #0F0D24,
   grille fine, halos indigo et orange du logo) qui présente l'ERP — promesse,
   les 8 modules, trois atouts — ; à droite le formulaire XAF sur fond blanc.
   Marque #5351FB, Geist pour le texte, Sora pour les titres, aucun texte
   sous 12 px, focus visibles. Aucun chiffre ni donnée réelle avant connexion.
   Portée : classe « ed-login » posée sur <html> par login.js tant que le
   formulaire XAF (#logon-template-component) est affiché (pas de :has()).
   ════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   1. PAGE — deux panneaux plein écran
   ══════════════════════════════════════════════════════════════ */

html.ed-login,
html.ed-login body {
    margin: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

html.ed-login body {
    font-family: "Geist", system-ui, sans-serif !important;
    background: #FFFFFF !important;
    color: #14122B !important;
}

#logon-template-component.app {
    position: fixed !important;
    inset: 0 !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important;
    grid-template-rows: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
}


/* ══════════════════════════════════════════════════════════════
   2. PANNEAU GAUCHE — sombre, grille fine, halos du logo
   ══════════════════════════════════════════════════════════════ */

.logon-template-header {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    background:
        radial-gradient(620px 420px at 0% 0%, rgba(255, 93, 37, .16), transparent 62%),
        radial-gradient(760px 560px at 100% 100%, rgba(83, 81, 251, .42), transparent 64%),
        linear-gradient(180deg, #13102E 0%, #0F0D24 100%) !important;
}

    /* Grille fine, estompée vers les bords */
    .logon-template-header::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background-image:
            linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) !important;
        background-size: 48px 48px !important;
        -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 85%) !important;
        mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 85%) !important;
        pointer-events: none !important;
    }

    .logon-template-header > *:not(#logon-left-content) {
        display: none !important;
    }

#logon-left-content {
    position: relative !important;
    z-index: 1 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: clamp(28px, 5.5vh, 56px) clamp(32px, 4.4vw, 64px) clamp(22px, 4vh, 40px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
}

    #logon-left-content::-webkit-scrollbar { display: none !important; }

    #logon-left-content .ll-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        flex: none !important;
    }

    #logon-left-content .ll-logo svg { display: block !important; }

    #logon-left-content .ll-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 12px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 255, .16) !important;
        background: rgba(255, 255, 255, .05) !important;
        font: 600 12.5px/1 "Geist", system-ui, sans-serif !important;
        color: #E6E5FA !important;
        white-space: nowrap !important;
    }

        #logon-left-content .ll-badge .ll-dot {
            width: 7px !important;
            height: 7px !important;
            border-radius: 50% !important;
            background: #34D399 !important;
            box-shadow: 0 0 0 3px rgba(52, 211, 153, .18) !important;
        }

    #logon-left-content .ll-main {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: clamp(24px, 5vh, 56px) 0 clamp(16px, 3vh, 32px) !important;
        max-width: 640px !important;
    }

    #logon-left-content .ll-kicker {
        font: 600 12px/1.3 "Geist", system-ui, sans-serif !important;
        letter-spacing: .1em !important;
        text-transform: uppercase !important;
        color: #A9A6E8 !important;
        margin: 0 0 14px !important;
    }

    #logon-left-content .ll-title {
        margin: 0 0 16px !important;
        font: 700 clamp(30px, 3.3vw, 46px)/1.08 "Sora", "Geist", system-ui, sans-serif !important;
        letter-spacing: -.03em !important;
        color: #FFFFFF !important;
    }

        #logon-left-content .ll-title em {
            font-style: normal !important;
            color: #A5A4FF !important;
        }

    #logon-left-content .ll-sub {
        margin: 0 0 clamp(20px, 3.6vh, 34px) !important;
        max-width: 520px !important;
        font: 400 15px/1.6 "Geist", system-ui, sans-serif !important;
        color: #C4C2E6 !important;
    }

    /* ── Les 8 modules ── */
    #logon-left-content .ll-mods {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

        #logon-left-content .ll-mods li {
            display: flex !important;
            align-items: center !important;
            gap: 11px !important;
            min-width: 0 !important;
            padding: 10px 12px !important;
            border-radius: 12px !important;
            border: 1px solid rgba(255, 255, 255, .09) !important;
            background: rgba(255, 255, 255, .04) !important;
            backdrop-filter: blur(4px) !important;
        }

    #logon-left-content .ll-mod-ico {
        flex: none !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        display: grid !important;
        place-items: center !important;
        background: linear-gradient(160deg, rgba(124, 122, 255, .34), rgba(83, 81, 251, .18)) !important;
        border: 1px solid rgba(165, 164, 255, .22) !important;
        color: #DCDBFF !important;
    }

    #logon-left-content .ll-mod-t {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        min-width: 0 !important;
    }

        #logon-left-content .ll-mod-t b {
            font: 600 13.5px/1.25 "Geist", system-ui, sans-serif !important;
            color: #FFFFFF !important;
        }

        #logon-left-content .ll-mod-t small {
            font: 400 12px/1.3 "Geist", system-ui, sans-serif !important;
            color: #A3A0CC !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

    /* ── Trois atouts ── */
    #logon-left-content .ll-values {
        list-style: none !important;
        margin: clamp(16px, 3vh, 26px) 0 0 !important;
        padding: clamp(14px, 2.6vh, 22px) 0 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .1) !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

        #logon-left-content .ll-values li {
            display: flex !important;
            gap: 10px !important;
            align-items: flex-start !important;
            min-width: 0 !important;
            color: #A5A4FF !important;
        }

            #logon-left-content .ll-values li svg { flex: none !important; margin-top: 1px !important; }

        #logon-left-content .ll-values span {
            display: flex !important;
            flex-direction: column !important;
            gap: 2px !important;
            font: 400 12px/1.4 "Geist", system-ui, sans-serif !important;
            color: #A3A0CC !important;
        }

            #logon-left-content .ll-values span b {
                font: 600 13px/1.3 "Geist", system-ui, sans-serif !important;
                color: #FFFFFF !important;
            }

    #logon-left-content .ll-footer {
        flex: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 18px !important;
        font: 400 12px/1.3 "Geist", system-ui, sans-serif !important;
        color: #8E8BB8 !important;
    }

        #logon-left-content .ll-footer a {
            margin-left: auto !important;
            color: #B9B7E8 !important;
            text-decoration: none !important;
            border-radius: 4px !important;
        }

            #logon-left-content .ll-footer a:hover { color: #FFFFFF !important; }


/* ══════════════════════════════════════════════════════════════
   3. PANNEAU FORMULAIRE (droite)
   ══════════════════════════════════════════════════════════════ */

.logon-template-body {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    background: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 72px 40px !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.logon-main-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 !important;
    position: relative !important;
}

.logon-main.card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.ll-form-logo { display: none !important; }

.ll-kicker-form {
    display: block !important;
    margin: 0 0 8px !important;
    font: 600 12px/1.3 "Geist", system-ui, sans-serif !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #8A87A3 !important;
}

/* Aide (haut) et pied de page (bas) du panneau */
#ll-topbar {
    position: absolute !important;
    top: 26px !important;
    right: 36px !important;
    display: flex !important;
    gap: 18px !important;
}

    #ll-topbar a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font: 500 13px/1 "Geist", system-ui, sans-serif !important;
        color: #6E6A8A !important;
        text-decoration: none !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
    }

        #ll-topbar a:hover { background: #F3F2F9 !important; color: #342484 !important; }

#ll-bottombar {
    position: absolute !important;
    left: 40px !important;
    right: 40px !important;
    bottom: 22px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
    font: 400 12px/1.3 "Geist", system-ui, sans-serif !important;
    color: #8A87A3 !important;
}


/* ══════════════════════════════════════════════════════════════
   4. TITRE DU FORMULAIRE
   ══════════════════════════════════════════════════════════════ */

.logon-main .card-header,
.logon-main [role="heading"].card-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    text-align: left !important;
    padding: 0 !important;
    margin-bottom: 26px !important;
    font-size: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    position: relative !important;
}

    .logon-main .card-header::before,
    .logon-main [role="heading"].card-header::before {
        content: "Connexion";
        display: block !important;
        color: #14122B !important;
        font: 700 32px/1.1 "Sora", "Geist", system-ui, sans-serif !important;
        letter-spacing: -.025em !important;
        margin: 0 0 8px !important;
    }

    .logon-main .card-header::after,
    .logon-main [role="heading"].card-header::after {
        content: "Identifiez-vous avec le compte fourni par votre établissement.";
        display: block !important;
        font: 400 14.5px/1.5 "Geist", system-ui, sans-serif !important;
        color: #6E6A8A !important;
        max-width: 360px !important;
    }

    /* Sélecteur de langue XAF (composant réel) : à droite du titre */
    .logon-main .card-header .toolbar-language-switcher-wrapper {
        position: absolute !important;
        top: 2px !important;
        right: 0 !important;
        font-size: 12.5px !important;
    }

        .logon-main .card-header .toolbar-language-switcher-wrapper button {
            font-size: 12.5px !important;
            color: #6E6A8A !important;
            padding: 5px 9px !important;
            border-radius: 8px !important;
            border: 1px solid #ECEBF3 !important;
            background: #FFFFFF !important;
        }

            .logon-main .card-header .toolbar-language-switcher-wrapper button:hover {
                background: #F3F2F9 !important;
                color: #342484 !important;
            }

    .logon-main .card-header [role="heading"] { display: none !important; }

.logon-main .card-body {
    padding: 0 !important;
    margin-top: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   5. CHAMPS
   ══════════════════════════════════════════════════════════════ */

#logon-template-component .logon-main label.dxbl-fl-cpt {
    font: 600 13px/1.3 "Geist", system-ui, sans-serif !important;
    color: #2A2745 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 7px !important;
    display: block !important;
}

.logon-main .dxbl-fl-item { margin-bottom: 16px !important; }

#logon-template-component .logon-main .dxbl-fl {
    --dxbl-fl-caption-width-large-screen: 0px !important;
    --dxbl-fl-caption-width-small-screen: 0px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#logon-template-component .logon-main dxbl-form-layout-item,
#logon-template-component .logon-main .dxbl-fl-item,
#logon-template-component .logon-main .dxbl-fl-item-horizontal {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
}

#logon-template-component .logon-main .dxbl-fl-cpt {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    text-align: left !important;
    padding: 0 !important;
}

#logon-template-component .logon-main .dxbl-fl-ctrl {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 0 !important;
}

#logon-template-component .logon-main .dxbl-row {
    margin: 0 !important;
    width: 100% !important;
}

#logon-template-component .logon-main .dxbl-col,
#logon-template-component .logon-main [class*="dxbl-col-md-"] {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}

.logon-main input.dxbl-text-edit-input::placeholder {
    color: #A9A6BE !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.logon-main .dxbl-text-edit-input {
    border: none !important;
    background: transparent !important;
    padding: 0 14px !important;
    font: 400 15px/1 "Geist", system-ui, sans-serif !important;
    color: #14122B !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 100% !important;
    outline: none !important;
}

.logon-main dxbl-input-editor.dxbl-text-edit,
.logon-main dxbl-combo-box.dxbl-text-edit {
    border: 1px solid #DDDBEA !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: stretch !important;
    height: 48px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(20, 18, 43, .04) !important;
    position: relative !important;
    transition: border-color 150ms, box-shadow 150ms !important;
}

    .logon-main dxbl-input-editor.dxbl-text-edit:hover,
    .logon-main dxbl-combo-box.dxbl-text-edit:hover { border-color: #BDBBF9 !important; }

    .logon-main dxbl-input-editor.dxbl-text-edit:focus-within,
    .logon-main dxbl-combo-box.dxbl-text-edit:focus-within {
        border-color: #5351FB !important;
        box-shadow: 0 0 0 4px rgba(83, 81, 251, .14) !important;
    }

.logon-main dxbl-input-editor .dxbl-text-edit-input,
.logon-main dxbl-combo-box .dxbl-text-edit-input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 100% !important;
}

.logon-main .dxbl-edit-btn-dropdown {
    border: 0 !important;
    background: transparent !important;
    color: #8A87A3 !important;
}

.ll-input-ico-prefix {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    flex-shrink: 0 !important;
    color: #8A87A3 !important;
    pointer-events: none !important;
}

.logon-main .dxbl-text-edit:focus-within .ll-input-ico-prefix { color: #5351FB !important; }

.ll-has-prefix-icon .dxbl-text-edit-input { padding-left: 0 !important; }

.ll-input-eye-toggle {
    appearance: none !important;
    border: 0 !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    flex-shrink: 0 !important;
    color: #8A87A3 !important;
    cursor: pointer !important;
}

    .ll-input-eye-toggle:hover,
    .ll-input-eye-toggle[aria-pressed="true"] { color: #342484 !important; }

.logon-main .dxbl-checkbox .dxbl-checkbox-icon,
.logon-main input[type="checkbox"] { accent-color: #5351FB !important; }

.logon-main .dxbl-checkbox.dxbl-checked .dxbl-checkbox-icon,
.logon-main .dxbl-checkbox-icon.dxbl-checked {
    background: #5351FB !important;
    border-color: #5351FB !important;
}

.logon-main .dxbl-checkbox-label,
.logon-main .dxbl-fl-item label {
    font-size: 13.5px !important;
    color: #3A3756 !important;
}

.logon-main a,
.logon-main .dxbl-hyperlink {
    color: #5351FB !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
}

    .logon-main a:hover,
    .logon-main .dxbl-hyperlink:hover {
        color: #342484 !important;
        text-decoration: underline !important;
    }

/* ── Erreurs XAF : bandeau dans le formulaire, champ en rouge ── */
.logon-main .validation-message,
.logon-main .dxbl-fl-item .invalid,
.logon-main .xaf-validation-message {
    font-size: 12.5px !important;
    color: #A3243B !important;
}

.logon-main .alert-danger,
.logon-main .alert {
    display: flex !important;
    gap: 8px !important;
    align-items: flex-start !important;
    margin: 0 0 16px !important;
    padding: 11px 13px !important;
    border-radius: 12px !important;
    background: #FDEEF0 !important;
    border: 1px solid #F3C5CE !important;
    color: #8E1D31 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.logon-main dxbl-input-editor.dxbl-text-edit.invalid,
.logon-main dxbl-input-editor.dxbl-text-edit[aria-invalid="true"],
.logon-main dxbl-combo-box.dxbl-text-edit.invalid {
    border-color: #C0394F !important;
    box-shadow: 0 0 0 4px rgba(192, 57, 79, .1) !important;
}


/* ══════════════════════════════════════════════════════════════
   6. BOUTON SE CONNECTER (+ état occupé) ET LIGNE DE SÉCURITÉ
   ══════════════════════════════════════════════════════════════ */

.logon-toolbar {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

    .logon-toolbar .dxbl-btn-toolbar,
    .logon-toolbar .dxbl-btn-group { width: 100% !important; }

    .logon-toolbar .ActionLogOn,
    .logon-toolbar .dxbl-btn-primary {
        width: 100% !important;
        height: 50px !important;
        border-radius: 12px !important;
        background: #5351FB !important;
        border: 0 !important;
        font: 600 15px/1 "Geist", system-ui, sans-serif !important;
        color: #FFFFFF !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        box-shadow: 0 12px 26px -14px rgba(83, 81, 251, .9) !important;
        transition: background 150ms, box-shadow 150ms, transform 150ms !important;
        cursor: pointer !important;
    }

        .logon-toolbar .ActionLogOn:hover,
        .logon-toolbar .dxbl-btn-primary:hover {
            background: #4341E8 !important;
            box-shadow: 0 16px 30px -14px rgba(83, 81, 251, .95) !important;
        }

        .logon-toolbar .ActionLogOn:active,
        .logon-toolbar .dxbl-btn-primary:active { transform: translateY(1px) !important; }

    .logon-toolbar .dxbl-toolbar-btn-ellipsis { display: none !important; }

.ll-submit-arrow { display: inline-flex !important; align-items: center !important; transition: transform 150ms !important; }
.logon-toolbar .dxbl-btn-primary:hover .ll-submit-arrow { transform: translateX(2px) !important; }

.ll-submit-spin {
    display: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, .35) !important;
    border-top-color: #FFFFFF !important;
    animation: ll-spin .7s linear infinite !important;
}

@keyframes ll-spin { to { transform: rotate(360deg); } }

/* Envoi en cours : champs verrouillés, bouton occupé */
html.ll-busy .ll-submit-spin { display: inline-block !important; }
html.ll-busy .ll-submit-arrow { display: none !important; }
html.ll-busy .logon-toolbar .dxbl-btn-primary { pointer-events: none !important; background: #6E6CFC !important; }
html.ll-busy .logon-main .card-body dxbl-form-layout { opacity: .6 !important; pointer-events: none !important; transition: opacity .2s !important; }

#ll-secure {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    font: 400 12.5px/1.4 "Geist", system-ui, sans-serif !important;
    color: #6E6A8A !important;
}

    #ll-secure svg { flex: none !important; color: #2F8F5B !important; }

#logon-template-component .main,
#logon-template-component .main-content,
#logon-template-component .detail-view-content { background: transparent !important; }

/* ── Focus visibles (clavier) ── */
#logon-template-component .logon-toolbar .dxbl-btn:focus-visible,
#logon-template-component .ll-input-eye-toggle:focus-visible,
#logon-template-component a:focus-visible,
#logon-template-component .toolbar-language-switcher-wrapper button:focus-visible,
#logon-template-component .dxbl-checkbox:focus-within {
    outline: 2px solid #5351FB !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    .ll-submit-spin { animation-duration: 1.6s !important; }
}


/* ══════════════════════════════════════════════════════════════
   7. HAUTEUR RÉDUITE (portable 1366×768…) ET LARGEUR MOYENNE
   ══════════════════════════════════════════════════════════════ */

@media (max-height: 780px) {
    #logon-left-content .ll-values { display: none !important; }
    #logon-left-content .ll-sub { font-size: 14px !important; }
    #logon-left-content .ll-mods li { padding: 8px 10px !important; }
    .logon-template-body { padding: 60px 40px !important; }
}

@media (max-width: 1180px) {
    #logon-template-component.app { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
    #logon-left-content .ll-values { grid-template-columns: 1fr !important; gap: 10px !important; }
    #logon-left-content .ll-footer span:nth-child(2) { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   8. ÉCRANS ÉTROITS (tablette, téléphone) — formulaire seul
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    html.ed-login body { overflow: auto !important; }

    #logon-template-component.app {
        position: static !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        min-height: 100% !important;
        height: auto !important;
        background: #F5F4FA !important;
    }

    .logon-template-header { display: none !important; }

    .logon-template-body {
        min-height: 100vh !important;
        height: auto !important;
        padding: 64px 16px 72px !important;
        background: #F5F4FA !important;
        justify-content: flex-start !important;
    }

    .logon-main-container {
        max-width: 440px !important;
        margin-top: 4vh !important;
        padding: 26px 22px !important;
        background: #FFFFFF !important;
        border: 1px solid #E7E6F0 !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
    }

    .ll-form-logo { display: flex !important; margin: 0 0 22px !important; }

    #ll-topbar { top: 16px !important; right: 12px !important; }
    #ll-bottombar { left: 16px !important; right: 16px !important; bottom: 18px !important; }
    #ll-bottombar span:nth-child(2) { display: none !important; }
}

@media (max-width: 420px) {
    .logon-main-container { margin-top: 1vh !important; padding: 22px 16px !important; }

    .logon-main .card-header::before,
    .logon-main [role="heading"].card-header::before { font-size: 26px !important; }
}