/* #12029: the TRAISR sign-in pages - Login, RecoverPassword (Reset my password) and SetPassword (the emailed link) - in
   the look of the account emails and the Change Password page (McMLib AccountMessageLayout, Account/ChangePassword.aspx).
   Self-contained: these pages load no theme, Kendo or Bootstrap sheet. Linked with ?q=CacheBusting.TagDedupe. */
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.acct { margin: 0; color: #1f2a33; font: 15px/1.5 'Segoe UI', Arial, Helvetica, sans-serif;
            background: #0f2c42 linear-gradient(160deg, #0f2c42 0%, #1b4f73 55%, #1f6f93 100%) fixed; }

/* Login keeps its Earth video behind the card; the gradient above shows until it plays, and on the other pages. */
.acct-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -2; }
body.acct-video::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
                          background: linear-gradient(180deg, rgba(8, 24, 38, .35) 0%, rgba(8, 24, 38, .6) 100%); }

.acct-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
             padding: 32px 16px; }
.acct-card { width: 100%; max-width: 400px; background: #fff; border-top: 4px solid #27a1c8; border-radius: 12px;
             padding: 26px 28px 24px; box-shadow: 0 18px 48px rgba(4, 18, 30, .35), 0 2px 6px rgba(4, 18, 30, .2); }
.acct-logo { display: block; width: 150px; height: 35px; margin: 0 0 18px; }
.acct-card h1 { margin: 0 0 14px; font-size: 22px; line-height: 1.3; font-weight: 600; color: #1b4f73; }
.acct-card p { margin: 0 0 14px; }
.acct-note { font-size: 13px; color: #5b6872; }

/* Messages. A Label / Literal holder with no text takes no room. */
.acct-alert { display: block; margin: 0 0 16px; padding: 10px 12px; border-radius: 6px; font-size: 13.5px; line-height: 1.45;
              background: #fdecea; border: 1px solid #e3b4b0; color: #8f2f29; }
.acct-alert:empty { display: none; }
.acct-alert-info { background: #e8f4fb; border-color: #9fd0e8; color: #17607d; }
.acct-alert strong { display: block; margin-bottom: 2px; }
.acct-alert span { display: block; margin-top: 6px; }

/* Fields */
.acct-field { margin: 0 0 14px; }
.acct-field label { display: block; margin: 0 0 5px; font-size: 13px; font-weight: 600; color: #33424d; }
.acct-field input[type=text], .acct-field input[type=password] { display: block; width: 100%; height: 42px; padding: 8px 12px;
            border: 1px solid #c3ccd3; border-radius: 6px; font: inherit; color: inherit; background: #fff; }
.acct-field input:focus { outline: none; border-color: #27a1c8; box-shadow: 0 0 0 3px rgba(39, 161, 200, .25); }
.acct-err { display: block; margin-top: 5px; font-size: 12.5px; color: #b8322d; }
.acct-pw { position: relative; }
.acct-pw input[type=text], .acct-pw input[type=password] { padding-right: 64px; }
.acct-show { position: absolute; top: 5px; right: 5px; height: 32px; padding: 0 10px; border: 0; border-radius: 5px;
             background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: #1b6e94; cursor: pointer; }
.acct-show:hover, .acct-show:focus { background: #eef6fa; outline: none; }
.acct-check { display: flex; align-items: center; margin: 2px 0 18px; font-size: 14px; }
.acct-check input { width: 16px; height: 16px; margin: 0 8px 0 0; accent-color: #1b4f73; }
.acct-check label { margin: 0; font-weight: normal; color: #33424d; cursor: pointer; }

/* Buttons and links */
.acct-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px; border-radius: 6px;
            font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.acct-btn-block { display: flex; width: 100%; }
.acct-btn-primary { background: #1b4f73; border: 1px solid #1b4f73; color: #fff; }
.acct-btn-primary:hover, .acct-btn-primary:focus { background: #153d5a; border-color: #153d5a; color: #fff; }
.acct-btn-secondary { background: #fff; border: 1px solid #c3ccd3; color: #1f2a33; }
.acct-btn-secondary:hover, .acct-btn-secondary:focus { background: #f2f5f7; color: #1f2a33; }
.acct-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.acct-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 16px; font-size: 14px; }
.acct-links a { color: #1b6e94; font-weight: 600; text-decoration: none; }
.acct-links a:hover, .acct-links a:focus { text-decoration: underline; }

/* A heading with a round icon: "Check your email", "This link can't be used". */
.acct-title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.acct-title h1 { margin: 0; }
.acct-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
             background: #e3f3e6; color: #2b7a34; }
.acct-icon-warn { background: #fdf1e1; color: #b26a00; }

@media (max-width: 420px) {
    .acct-wrap { padding: 20px 12px; justify-content: flex-start; }
    .acct-card { padding: 22px 20px 20px; }
}