.g_id_signin {
    width: 100% !important;
}

.g_id_signin iframe {
    width: 100% !important;
    min-width: 100% !important;
}

/* Page intro */
.page-intro {
    max-width: 920px;
    margin: 0.75rem auto 1.25rem;
    text-align: center;
    color: #333;
}
.page-intro .jumbotron {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #222;
}
.page-intro p {
    max-width: 920px;
    margin: 0.6rem auto;
    line-height: 1.6;
    color: #555;
}

/* Modernized login card */
.login-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 1.5rem;
    max-width: 820px;
    margin: 1rem auto;
    border: 1px solid rgba(0,0,0,0.03);
}
.login-grid { 
    display: flex; 
    gap: 1rem; 
    align-items: stretch; 
}
.login-col { 
    flex: 1 1 0; 
    min-width: 0;
}
.login-col.form { 
    padding-right: .75rem; 
    display:flex;flex-direction:column;justify-content:space-between;
}
.login-col.oauth { 
    padding-left: .75rem; 
    text-align: center;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
}

/* Form elements spacing */
.login-col .radTextBox, .login-col .RadTextBox {
    margin-bottom: .75rem;
}
.login-col .RadButton, .login-col .radButton {
    margin-top: .75rem;
    /* default button width on desktop */
    width: 60% !important;
}

/* Footer under oauth button */
.login-footer { margin-top: .9rem; font-size: .9rem; color: #666; }
.login-footer a { color: #2b6fbf; text-decoration: none; margin-left:.5rem; }

/* Make google button constrain nicely */
.login-col.oauth .g_id_signin { width: 100% !important; max-width: 320px; }

/* Remember row alignment: keep items on one line on desktop, allow wrap on mobile */
.remember-row { display:flex; align-items:center; gap:.5rem; margin-top:0.6rem; flex-wrap:nowrap; }
.remember-row .forgot-link { margin-left: auto; display:inline-block; }
.remember-row input[type="checkbox"], .remember-row label { display:inline-block; }

/* Small screens: stack and allow wrap for the remember row */
@media (max-width: 760px) {
    .login-grid { flex-direction: column; }
    .login-col.form { padding-right: 0; }
    .login-col.oauth { padding-left: 0; }
    .login-card { padding: 1rem; margin: 0.8rem auto; }
    .page-intro .jumbotron { font-size:1.25rem; }
    /* Make sign-in button full width on small screens */
    .login-col .RadButton, .login-col .radButton { width: 100% !important; }
    /* Ensure forgot link moves to its own line if cramped */
    .remember-row { flex-wrap:wrap; }
    .remember-row .forgot-link { width: 100%; margin-left: 0; text-align: right; order: 2; }
    .remember-row input[type="checkbox"], .remember-row label { order: 1; }
}

/* Scoped jumbotron styles for MSDS panels inside the login card */
.login-card .jumbotron {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #fbfbfb;
    border-radius: 6px;
}