* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #f2f2f4;
    font-family: "Inter", "Helvetica Neue", "Segoe UI", Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 24px 20px;
}

.session-expired-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 12px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #7a4a00;
    background: #fff3cd;
    border-bottom: 1px solid #ffe69c;
}

.login-box {
    width: 900px;
    max-width: 100%;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 15, 15, .10), 0 2px 8px rgba(15, 15, 15, .04);
}

    .login-box > .row {
        align-items: stretch;
    }

/* Panel split to match the mockup: 45% form / 55% artwork */
@media (min-width: 992px) {
    .login-box .col-lg-5 {
        flex: 0 0 45%;
        max-width: 45%;
        width: 45%;
    }

    .login-box .col-lg-7 {
        flex: 0 0 55%;
        max-width: 55%;
        width: 55%;
    }
}

.left-side {
    padding: 28px 34px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo img {
    width: auto;
    height: 56px;
    margin-bottom:45px;
}

h2 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 24px 0;
    color: #0f0f0f;
}

h4 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 18px 0 14px;
    color: #0f0f0f;
}
.left-side h4 {
    margin:10px; 
}

.input-box {
    position: relative;
    margin-top: 18px;
}

    .input-box > i {
        position: absolute;
        top: 22px;
        left: 16px;
        transform: translateY(-50%);
        color: #E20074;
        font-size: 14px;
        line-height: 1;
        pointer-events: none;
    }

.form-control {
    height: 40px;
    border-radius: 8px;
    padding: 0 40px 0 42px;
    border: 1px solid #e6e6e9;
    font-size: 14px;
    color: #1a1a1a;
    box-shadow: none;
}

    .form-control::placeholder {
        color: #9a9a9e;
    }

    .form-control:focus {
        border-color: #E20074;
        box-shadow: 0 0 0 3px rgba(226, 0, 116, .10);
    }

/* The show/hide eye is also an .input-box > i, and that rule turns pointer events
   off so the leading field icon never swallows a click on the input. This one has
   to take clicks, so it turns them back on.

   The selector has to out-weigh `.input-box > i`, which sets left: 20px for the lock
   at the front of the field. A plain `.toggle` does not: one class loses to a class
   plus an element, so the eye kept that left along with its own right, stretched
   across the whole field as an absolutely positioned box pinned to both edges, and
   drew its glyph at the left — directly on top of the lock. Naming the element and
   both classes settles it. The pages that also carry #togglePassword never showed the
   fault, because an id outweighs everything here anyway. */
.input-box > i.toggle {
    position: absolute;
    top: 22px;
    transform: translateY(-50%);
    left: auto;
    right: 16px;
    cursor: pointer;
    color: #8a8a8e;
    font-size: 16px;
    line-height: 1;
    pointer-events: auto;
}

.input-box > i.toggle:hover {
    color: #1a1a1a;
}

#togglePassword {
    position: absolute;
    top: 22px;
    transform: translateY(-50%);
    left: auto;
    right: 16px;
    cursor: pointer;
    color: #8a8a8e;
    font-size: 16px;
    line-height: 1;
    pointer-events: auto;
}

    #togglePassword:hover {
        color: #1a1a1a;
    }


.password-grid #togglePassword {
    top: 18px;
    right: 5px;
}

/* ---------- Error text (left) + forgot link (right) share one tight row under the input ---------- */
.field-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 2px 12px;
    min-height: 17px;
}

    .field-row .val-msg {
        margin: 0;
        min-height: 0;
    }

    .field-row .field-link {
        margin: 0;
        margin-left: auto;
    }

span.val-msg:not(.field-validation-error),
span.val-msg:empty {
    display: none;
}

/* Show as block when validation fails */
span.val-msg.field-validation-error {
    display: block;
}


/* Email's own field-row carries nothing but its validation message (no
   field-link like the password row's "Forgot password?"), so it collapses
   to no space at all until Sign In is clicked — see the emailFieldRow
   script — instead of always reserving .field-row's usual min-height/margin
   for a message that isn't showing yet. */
#emailFieldRow {
    margin: 0 2px 0;
    min-height: 0;
}

#emailFieldRow.show-msg {
    margin: 6px 2px 12px;
    min-height: 17px;
}

.field-link {
    text-align: right;
    margin: 7px 0 0px;
    font-size: 13px;
}

    .field-link a {
        font-size: 11px;
        color: #E20074;
        font-weight: 700;
        text-decoration: none;
    }

        .field-link a:hover {
            color: #c10064;
            text-decoration: underline;
        }

/* The same treatment for the links on the pages that use _AuthLayout — "Back to sign
   in", "Forgot username?" and the rest. They had no rule at all, so they were coming
   out in Bootstrap's default blue while the login page's links were brand magenta.

   This has to out-rank .btn-link, which Resend OTP on the OTP page carries: equal
   specificity, so it wins on order, and login.css is linked after Bootstrap. */
.auth-link,
.btn-link.auth-link {
    font-size: 13px;
    color: #E20074;
    font-weight: 600;
    text-decoration: none;
}

    .auth-link:hover,
    .btn-link.auth-link:hover {
        color: #c10064;
        text-decoration: underline;
    }

/* .remember-row and its four .form-check rules were here. The "Remember me" checkbox
   they styled is gone from the sign-in form, and no other page on this sheet uses the
   class. */

.btn-login {
    background: #0f0f0f;
    color: #fff;
    height: 44px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    margin-top: 12px;
}

    .btn-login:hover, .btn-login:focus {
        background: #000;
        color: #fff;
    }

    /* Greyed while the form is still incomplete. :hover is overridden too, or the
       button would darken back to black under the cursor and look clickable. */
    .btn-login:disabled,
    .btn-login:disabled:hover,
    .btn-login:disabled:focus {
        background: #d5d3da;
        color: #fff;
        cursor: not-allowed;
        box-shadow: none;
        opacity: 1;
    }

/* The class is written for <button>, which centres its own label inside the fixed
   height on its own. An <a> does not — its text sits at the top of the 56px box and
   the underline stays on — so the two anchors wearing this class have to be told.
   Grid and flex parents blockify inline-flex, so .d-grid still stretches it full
   width. */
a.btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.divider {
    text-align: center;
    position: relative;
    margin: 14px 0;
    color: #9a9a9e;
    font-size: 13px;
}

    .divider::before {
        content: "";
        position: absolute;
        width: calc(50% - 26px);
        height: 1px;
        background: #e6e6e9;
        left: 0;
        top: 50%;
    }

    .divider::after {
        content: "";
        position: absolute;
        width: calc(50% - 26px);
        height: 1px;
        background: #e6e6e9;
        right: 0;
        top: 50%;
    }

.ms-btn {
    background: #E20074;
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: background .25s ease;
}

.ms-title,
.ms-sub {
    overflow-wrap: break-word;
}

    .ms-btn:hover {
        color: #fff;
        background: #c10064;
    }

.ms-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ms-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .ms-icon img {
        width: 18px;
    }

.ms-title {
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.3;
    white-space: nowrap;
}

.ms-sub {
    font-size: 12px;
    line-height: 1.3;
    color: rgba(255, 255, 255, .92);
}

.ms-btn .bi-chevron-right {
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}

.right-side {
    /* min-height keeps the old fixed size on short pages (login, forgot
       username/password); height:100% lets it stretch with .login-box > .row's
       align-items:stretch on taller pages (e.g. change password's extra
       password-rules panel) instead of leaving white space below a shorter,
       fixed-height panel. */
    min-height: 560px;
    height: 100%;
}

    .right-side img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* ---------- Validation messages (functionality) ---------- */
.val-msg {
    display: block;
    color: #E20074;
    font-size: 13px;
    line-height: 1.3;
    margin: 7px 0 16px 2px;
    min-height: 17px;
}

.form-control.input-validation-error {
    border-color: #E20074;
}

    .form-control.input-validation-error:focus {
        border-color: #E20074;
        box-shadow: 0 0 0 3px rgba(226, 0, 116, .12);
    }

.val-summary {
    color: #E20074;
    font-size: 14px;
    margin-bottom: 12px;
}

    .val-summary.validation-summary-valid {
        display: none;
    }

    .val-summary ul {
        margin: 0;
        padding-left: 18px;
    }

/* The login page's summary sits inside the form, under the password box, rather than
   above everything. In that position it is read as a message about the field just
   above it, so it loses the bullet and lines up with the other field messages — a
   one-item bulleted list under a single input looks like a stray fragment.

   Scoped to its own class because the other auth pages still show their summary at the
   top of the form, where the list styling is right. */
/* The lockout notice, under the sign-in button. Deliberately not magenta: it is two
   sentences of explanation with an instruction in it, and error-red across the whole
   block would bury the link that is the actual way out. */
.lock-note {
    margin-top: 18px;
    font-size: 13.5px;
    line-height: 1.65;
    color: #4a4a52;
    text-align: center;
}

    .lock-note a {
        color: #E20074;
        font-weight: 600;
        text-decoration: underline;
    }

        .lock-note a:hover {
            color: #c10064;
        }

/* "You cannot login here. Click here to login using your Microsoft Account." — shown
   just above SIGN IN when the account's website login is off but its Azure login is on.

   Magenta, because it is a refusal and should read like one. The link inside it stays a
   link colour rather than inheriting: it is the way out of the message, and magenta on
   magenta would leave nothing to show it can be clicked. */
.azure-note {
    margin: 2px 0 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #E20074;
    text-align: center;
}

    .azure-note a {
        color: #0d6efd;
        text-decoration: underline;
    }

        .azure-note a:hover {
            color: #0a58ca;
        }

.val-summary-inline {
    font-size: 13px;
    line-height: 1.4;
    margin: -6px 2px 14px;
}

    .val-summary-inline ul {
        list-style: none;
        padding-left: 0;
    }

.alert {
    border-radius: 12px;
    font-size: 14px;
}

/* The auth pages — forgot password, forgot username, reset, OTP — share this panel
   with the login page but carry a fraction of its content. .left-side centres its
   children, which on the login page is invisible because the form all but fills the
   panel, but left these pages' logo sitting well down from the top.

   So the logo is pinned instead, and everything after it is centred in what is left.
   The login page keeps its own markup and is untouched by this. */
.auth-side {
    justify-content: flex-start;
}

    .auth-side > .logo {
        flex: 0 0 auto;
    }

    .auth-side > .auth-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

/* auth-body moved these one level down from .left-side, so both parents are named
   rather than loosening the selector to a descendant one — .left-side p would also
   catch paragraphs inside the Microsoft sign-in block on the login page. */
.left-side > p,
.auth-body > p {
    color: #6c6c72;
    margin-bottom: 20px;
}

/* ---------- Sign-up: the two sections ---------- */

/* "Sign Up" and "Login Details". A rule across the panel rather than a plain heading,
   so the split is visible at a glance on a form this tall. */
.signup-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #0f0f0f;
    white-space: nowrap;
}

    .signup-section::after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        background: #ececf0;
    }

    /* The first one sits directly under the intro line and needs no gap above it. */
    .signup-section:first-of-type {
        margin-top: 0;
    }

/* ---------- Sign-up: profile picture ---------- */

.pic-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* The chosen image is set as a background rather than an <img>, so the same round
   element works both empty and filled without swapping elements around. */
.pic-preview {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 1px dashed #d9d7de;
    background: #faf9fb center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c0bec7;
    font-size: 24px;
}

    .pic-preview.has-image {
        border-style: solid;
        border-color: #ececf0;
    }

        /* The placeholder person icon has no business sitting on top of a real photo. */
        .pic-preview.has-image i {
            display: none;
        }

.pic-pick {
    min-width: 0;
}

    .pic-pick .field-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #4a4a52;
        margin-bottom: 7px;
    }

.pic-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pic-btn {
    border: 1px solid #e6e6e9;
    background: #fff;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #0f0f0f;
    cursor: pointer;
}

    .pic-btn:hover {
        border-color: #E20074;
        color: #E20074;
    }

    /* Muted until hovered. It sits next to the primary action and should not compete
       with it — nothing here is destructive, the file has not been uploaded yet. */
    .pic-btn.is-remove {
        color: #8a8794;
    }

        .pic-btn.is-remove:hover {
            border-color: #E20074;
            color: #E20074;
        }

/* Doubles as the chosen file's name, so it has to cope with a long one. */
.pic-note {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.5;
    color: #8a8794;
    overflow-wrap: anywhere;
}

    .pic-note.is-bad {
        color: #E20074;
    }

/* ---------- Sign-up: password rules and username availability ---------- */

/* The checklist under the password box. Each line starts as a hollow circle and fills
   in as the rule is met, so progress is visible without anything turning red — nothing
   here is an error until the form is actually submitted. */
/* ---------- OTP verification screen ---------- */

.otp-header {
    text-align: center;
    margin-bottom: 20px;
}

.otp-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #0f0f0f;
    margin: 0 0 10px;
}

.otp-sub {
    font-size: 13.5px;
    line-height: 1.6;
    color: #8a8794;
    margin: 0;
}

    .otp-sub strong {
        display: block;
        margin-top: 2px;
        color: #16151a;
        font-weight: 700;
    }

.otp-boxes {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 6px;
}

.otp-box {
    width: 46px;
    height: 54px;
    border: 1px solid #e6e6e9;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #16151a;
    box-shadow: none;
}

    .otp-box:focus {
        outline: none;
        border-color: #E20074;
        box-shadow: 0 0 0 3px rgba(226, 0, 116, .10);
    }

/* Overrides Bootstrap's .form-check padding/float trick, which is built for a
   left-aligned checkbox+label pair, not a centred one. */
.otp-remember {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    margin: 8px 0 4px;
}

    .otp-remember .form-check-input {
        float: none;
        margin: 0;
    }

    .otp-remember .form-check-label {
        margin: 0;
        color: #6c6c72;
    }

.otp-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 13px;
    text-align: center;
}

.otp-links-dot {
    color: #d9d7de;
}

/* ---------- OTP resend countdown ---------- */

/* Holds whichever of the two is showing — the countdown or the button — so the row
   they share keeps its shape as one is swapped for the other. */
.resend-slot {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
}

.resend-wait {
    color: #8a8794;
}

/* ---------- Change password ---------- */

/* Change password and Reset side by side. Change password takes the room it needs and
   Reset only as much as its word, so the primary action is plainly the primary one. */
.btn-row {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.btn-row .btn-login {
    flex: 1;
    margin-top: 0;
}

/* The secondary action. Outlined rather than filled: it throws typing away, so it
   should not look as inviting as the button that saves it. */
.btn-ghost-outline {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 22px;
    border: 1px solid #d9d7de;
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    color: #0f0f0f;
}

.btn-ghost-outline:hover {
    border-color: var(--magenta, #E20074);
    color: var(--magenta, #E20074);
}

/* "New password should be:" with the rules under it. The reset screen states the same
   list bare; here it sits in a panel, as the design asked. */
.pw-panel {
    background: #f2f2f4;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 20px 0 4px;
}

.pw-panel h6 {
    font-size: 14px;
    font-weight: 700;
    color: #16151a;
    margin-bottom: 8px;
}

/* The `* { padding: 0 }` reset at the top of this file takes the bullets' indent
   away, hence the explicit padding-left. */
.pw-panel ul {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.9;
    color: #4a4a52;
}
.pw-panel li {
    font-size:12px;
    line-height:17px;
}

/* The same rules stated rather than ticked off, for the reset password screen. That
   page has no live checklist behind it, so the list is what it is: what the password
   has to be. The `* { padding: 0 }` reset at the top of this file takes the bullets'
   indent away, hence the explicit padding-left. */
.pw-hints {
    margin: 18px 0 4px;
    padding: 12px 14px 12px 34px;
    border: 1px solid #ececf0;
    border-radius: 12px;
    background: #fafafb;
    font-size: 13px;
    line-height: 1.9;
    color: #4a4a52;
}

.pw-hints li {
    font-size: 12px;
    line-height: 17px;
}
.pw-rules {
    list-style: none;
    margin: 2px 0 10px;
    padding: 12px 14px;
    border: 1px solid #ececf0;
    border-radius: 12px;
    background: #fafafb;
}

    .pw-rules li {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 13px;
        line-height: 1.9;
        color: #8a8794;
        transition: color .15s ease;
    }

        .pw-rules li i {
            font-size: 13px;
            color: #c9c7d0;
        }

        .pw-rules li.met {
            color: #1c7c4a;
        }

            .pw-rules li.met i {
                color: #1c7c4a;
            }

/* Left, under the box, like every other message on this form. It used to be pushed to
   the far right so a server-side error and this line could not land on the same spot;
   they can now sit side by side, so setNote keeps quiet whenever the server has already
   printed something for this field. */
.name-note {
    margin-right: auto;
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
    color: #8a8794;
}

    .name-note.is-available { color: #1c7c4a; }
    .name-note.is-taken,
    .name-note.is-invalid { color: #E20074; }
    .name-note.is-checking { color: #8a8794; font-style: italic; }

/* The tick or cross inside the username box, in the slot the password eye uses.

   Written as `.input-box > i.name-mark` rather than `.name-mark` on purpose: the field's
   leading icon rule is `.input-box > i`, which pins every icon in the box to left:20px
   in brand magenta. A bare class loses to it on specificity and the mark would land on
   top of the @@ icon. left:auto is needed for the same reason — right alone does not
   undo an inherited left. */
.input-box > i.name-mark {
    left: auto;
    right: 18px;
    top: 24px;
    font-size: 14px;
    color: inherit;
}

    /* No icon class is set until there is a verdict, so an empty <i> renders nothing
       and the box looks untouched until the server has actually answered. */
    .input-box > i.name-mark.is-available { color: #1c7c4a; }
    .input-box > i.name-mark.is-taken { color: #E20074; }

.demo-hint {
    margin-top: 14px;
    font-size: 12px;
    color: #9a9a9e;
    text-align: center;
}

@media (max-width: 1199px) {
    .left-side {
        padding: 32px 36px;
    }
}

@media (max-width: 992px) {
    body {
        padding: 20px 16px;
    }

    .right-side {
        display: none;
    }

    .left-side {
        padding: 32px 24px;
    }

    h2 {
        font-size: 26px;
    }

    h4 {
        font-size: 18px;
        margin: 20px 0 16px;
    }

    .logo img {
        /* max-width: 240px;*/
    }
}