/**********************************************************************************
    Stylesheet:     Login.css
    Description:    Styles for the Sign In (LogOn), Two-factor (VerifyCode),
                    Forgot Password and Change Password pages. PE-1709 login redesign.
**********************************************************************************/

body.body-login {
    background: radial-gradient(1200px 600px at 50% -10%, #FFF3EC 0%, #F7F8FA 55%, #F4F5F7 100%) !important;
    font-family: 'Inter Tight', system-ui, sans-serif;
}

.body-login #wrapper.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* width/max-width: main.css hard-codes
   `.container { width: 1280px !important; max-width: 1280px !important }` with no media
   query. Left alone, the login shell stays 1280px wide at every viewport and the card
   lands off-screen on a phone. The !importants here are needed to beat that pair —
   specificity alone does not win against !important. Must be `100%`, not `auto`:
   bootstrap's `.container` sets `margin-left/right: auto`, and a flex item with auto
   cross-axis margins is never stretched, so `auto` would collapse this to fit-content. */
.body-login #main.containerLogin {
    flex: 1;
    width: 100% !important;
    max-width: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    background: transparent;
}

.pdi-login {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: 'Inter Tight', system-ui, sans-serif;
}

.pdi-login a {
    color: #0F6FBF;
    text-decoration: none;
}

.pdi-login a:hover {
    color: #0B558F;
    text-decoration: underline;
}

.pdi-login .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #D0D5DD;
    flex: none;
}

.pdi-login__card {
    background: #FFFFFF;
    border: 1px solid #E9EBEF;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 40px -12px rgba(16,24,40,.14);
    padding: 36px 36px 28px;
}

.pdi-login__card fieldset {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.pdi-login__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pdi-login__brand img,
.pdi-login__hero img {
    height: 40px;
    width: auto;
    display: block;
    margin: 0;
}

.pdi-login__card h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.02em;
    color: #101828;
    text-align: center;
}

.pdi-login__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.pdi-login__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #EAF3FA;
    color: #0A6CB8;
}

.pdi-login__hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
}

.pdi-login__hero-text p {
    margin: 0;
    max-width: 290px;
    font-size: 14px;
    line-height: 1.55;
    color: #667085;
    text-wrap: pretty;
}

.pdi-login__hero-text p .strong {
    font-weight: 600;
    color: #344054;
}

.pdi-login__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pdi-login__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pdi-login__field label {
    font-size: 13px;
    font-weight: 500;
    color: #344054;
    margin: 0;
}

/* The `.body-login #main` prefix outranks main.css's
   `input[type="text"]:not(#mainEmailContainer *)` rule, whose :not(#id)
   argument gives it ID-level specificity; the !importants counter the
   !important font/color/placeholder rules in _forms.scss and main.scss. */
.body-login #main .pdi-login__field input[type="text"],
.body-login #main .pdi-login__field input[type="password"] {
    width: 100%;
    max-width: none;
    height: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: normal !important;
    color: #101828 !important;
    background: #FFFFFF;
    border: 1px solid #D5D9E0;
    border-radius: 9px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.body-login #main .pdi-login__field input[type="text"]:focus,
.body-login #main .pdi-login__field input[type="password"]:focus {
    border-color: #F26A32 !important;
    box-shadow: 0 0 0 4px rgba(242,106,50,.14);
}

.body-login #main .pdi-login__field--blue input[type="text"]:focus,
.body-login #main .pdi-login__field--blue input[type="password"]:focus {
    border-color: #0A6CB8 !important;
    box-shadow: 0 0 0 4px rgba(10,108,184,.14);
}

.body-login #main .pdi-login__field input::placeholder {
    color: #A3A9B3 !important;
    font-style: normal !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

.body-login #main .pdi-login__field input.is-mismatch {
    border-color: #FDA29B !important;
}

.body-login #main .pdi-login__field--blue input[type="text"].is-mismatch:focus,
.body-login #main .pdi-login__field--blue input[type="password"].is-mismatch:focus {
    border-color: #D92D20 !important;
    box-shadow: 0 0 0 4px rgba(217,45,32,.12);
}

.pdi-login__mismatch {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #D92D20;
}

.pdi-login__pw {
    position: relative;
    display: flex;
    align-items: center;
}

.body-login #main .pdi-login__pw input[type="text"],
.body-login #main .pdi-login__pw input[type="password"] {
    padding-right: 42px;
}

.pdi-login__pw .pdi-login__eye {
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    font-size: 15px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #98A2B3;
    float: none;
    z-index: 2;
}

.pdi-login__pw .pdi-login__eye:hover {
    background: #F2F4F7;
    color: #475467;
}

.pdi-login__strength {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 3px;
}

.pdi-login__strength-bars {
    display: flex;
    gap: 4px;
    flex: 1;
}

.pdi-login__strength-bars .bar {
    height: 4px;
    flex: 1;
    border-radius: 99px;
    background: #EFF1F4;
    transition: background .15s;
}

.pdi-login__strength[data-score="1"] .bar:nth-child(1) {
    background: #F79009;
}

.pdi-login__strength[data-score="2"] .bar:nth-child(-n+2) {
    background: #F79009;
}

.pdi-login__strength[data-score="3"] .bar {
    background: #12B76A;
}

.pdi-login__strength-label {
    font-size: 12px;
    font-weight: 600;
    min-width: 44px;
    text-align: right;
    color: transparent;
}

.pdi-login__strength[data-score="1"] .pdi-login__strength-label,
.pdi-login__strength[data-score="2"] .pdi-login__strength-label {
    color: #B54708;
}

.pdi-login__strength[data-score="3"] .pdi-login__strength-label {
    color: #12B76A;
}

.pdi-login__hint {
    margin: 0;
    font-size: 12.5px;
    color: #98A2B3;
}

.pdi-login__terms {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* flex-start, not center: on a narrow phone the terms text wraps to two lines and a
   centred checkbox floats between them. Identical to centred on one line. */
.pdi-login__terms label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    font-weight: normal;
    color: #475467;
    cursor: pointer;
    margin: 0;
}

.pdi-login__terms input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #0A6CB8;
    cursor: pointer;
    margin: 0;
    flex: none;
}

/* No nowrap: at this card width the longer branded terms text (CADEM) would
   overflow the card if Inter Tight hasn't loaded yet. Wrapping is the safe
   fallback; with the webfont it still sits on one line. */
.pdi-login__terms span {
    text-wrap: pretty;
}

.pdi-login__terms a {
    font-weight: 500;
}

.pdi-login__actions {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pdi-login__submit,
.pdi-login__submit[type="submit"] {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 12px 15px;
    font-family: inherit;
    /* !important: main.css sets `input { font-size: .8rem !important }` */
    font-size: 14px !important;
    font-weight: 600;
    border: none;
    border-radius: 9px;
    color: #fff;
    background: #0A6CB8;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 16px -6px rgba(10,108,184,.5);
    transition: background .15s, box-shadow .15s;
}

.pdi-login__submit:hover:not(:disabled) {
    background: #085894;
}

.pdi-login__submit:disabled {
    color: #98A2B3;
    background: #EFF1F4;
    cursor: not-allowed;
    box-shadow: none;
}

.pdi-login__center-link {
    font-size: 13.5px;
    font-weight: 500;
    text-align: center;
}

.pdi-login__divider {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pdi-login__divider::before,
.pdi-login__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E9EBEF;
}

.pdi-login__divider span {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    color: #98A2B3;
    white-space: nowrap;
}

.pdi-login__google {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 15px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    background: #FFFFFF;
    border: 1px solid #D5D9E0;
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.pdi-login__google:hover {
    background: #F9FAFB;
    border-color: #C3C9D2;
}

/* Disabled until the Terms of Use checkbox is checked (toggled by LogIn.js) */
.pdi-login__google.pdi-login__google--disabled {
    color: #98A2B3;
    background: #EFF1F4;
    border-color: #E9EBEF;
    cursor: not-allowed;
}

.pdi-login__google.pdi-login__google--disabled svg {
    filter: grayscale(1);
    opacity: .55;
}

/* Tooltip while disabled, shown on hover */
.pdi-login__google.pdi-login__google--disabled::after {
    content: 'Please accept the Terms of Use to sign in';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 260px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    color: #fff;
    background: #344054;
    border-radius: 6px;
    box-shadow: 0 4px 10px -2px rgba(16,24,40,.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
    pointer-events: none;
}

.pdi-login__google.pdi-login__google--disabled::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #344054;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
    pointer-events: none;
}

.pdi-login__google.pdi-login__google--disabled:hover::after,
.pdi-login__google.pdi-login__google--disabled:hover::before {
    opacity: 1;
    visibility: visible;
}

.pdi-login__copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 13px;
    color: #667085;
}

.pdi-login__copyright a {
    color: #667085;
}

.pdi-login .error {
    margin: 0;
    text-align: center;
    font-size: 13px;
}

.pdi-login .error:empty {
    display: none;
}

.pdi-login .error.error-lbl {
    color: #B42318;
}

.pdi-login__2fa-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 13.5px;
    font-weight: 500;
}

.pdi-login__2fa-links a {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    margin: 0;
}

.pdi-login__2fa-help {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 18px;
    border-top: 1px solid #F0F1F4;
}

.pdi-login__2fa-help p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #667085;
    text-wrap: pretty;
}

.pdi-login__2fa-help p.muted {
    color: #98A2B3;
}

.pdi-login__2fa-help a {
    font-weight: 500;
}