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

:after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body, html {
    font-size: 12px;
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.4;
    width: 100%;
    height: 100%;
    min-width: 320px;
    overflow: hidden
}

input, select {
    font-family: "Segoe UI", Arial, sans-serif
}

img, svg {
    vertical-align: middle
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: fixed;
    inset: 0;
    background: url('../img/bg.svg') center;
    background-size: cover;
}

.login-box {
    background: white;
    padding: 25px;
    width: 100%;
    max-width: 530px;
    border: 1px solid #494949;
    text-align: center;
}

.logo {
    max-width: 270px;
    margin: 60px 0;
}

input[type="text"], input[type="password"], input[type="email"] {
    width: 100%;
    max-width: 320px;
    padding: 6px;
    margin-bottom: 15px;
    border: 1px solid #aaabab;
    box-sizing: border-box;
    font-size: 1rem;
}

/* "Restore password" link under the username field, aligned to the right. */
.restorePassword {
    width: 100%;
    max-width: 320px;
    text-align: left;
    margin-top: -8px;
    margin-bottom: 12px;
    font-size: 12px;
    margin-left: 80px;
}

/* Password field with a trailing show/hide eye toggle. The bottom margin lives on
   the wrapper (not the input) so the absolutely-positioned toggle can center on the
   input box alone. */
.password-field {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 320px;
    margin-bottom: 15px;
}

.password-field input[type="text"],
.password-field input[type="password"] {
    width: 100%;
    max-width: 320px;
    padding-right: 34px;
    margin-bottom: 0;
    box-sizing: border-box;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

/* Eye icon drawn as an inline SVG with an explicit stroke colour so it renders as a
   black eye consistently across browsers, independent of emoji presentation. */
.password-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* When the password is revealed, overlay a diagonal slash on the eye
   (drawn in CSS so it renders consistently without an emoji-specific glyph). */
.password-toggle.revealed::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 2px;
    background: #3f3f3f;
    transform: translate(-50%, -50%) rotate(-45deg);
    pointer-events: none;
}

.errorMessage {
    display: inline-block;
    width: 100%;
    max-width: 320px;
    padding: 5px 0;
    text-align: left;
    color: red;
}

/* Informational message shown above reset/change-password forms. */
.infoMessage {
    display: inline-block;
    width: 100%;
    max-width: 320px;
    padding: 5px 0;
    margin-bottom: 10px;
    text-align: left;
    color: #3f3f3f;
}

/* Centre standalone messages that aren't a label above a form (e.g. the
   invalid/expired-link placeholder), so the line sits centred in the modal. */
.infoMessage.centered {
    text-align: center;
}

.logoutMessage {
    font-size: 12px;
}

.errorMessageBox {
    font-size: 14px;
    min-height: 100px;
}

.oneTimeCode {
    margin-bottom: 0;
}

.resendContainer {
    display: inline-block;
    width: 100%;
    max-width: 320px;
    padding: 5px 0;
    margin-bottom: 15px;
    text-align: left;
}

.resendContainer span {
    color: #216fb6;
}

.signInWith {
    margin: 10px;
    font-size: 14px;
    color: #3f3f3f;
}

.rememberMe {
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 320px;
    margin-bottom: 15px;
}

.rememberMe input {
    width: 15px;
    height: 15px;
    margin-right: 10px;
}

/* reCAPTCHA v2 renders a fixed-width (~304px) iframe; center it to match the
   other form fields, which sit centered within their 320px max-width. */
.g-recaptcha {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.selectedProvider {
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 320px;
    margin: 5px 0;
}

.selectedProvider input {
    width: 15px;
    height: 15px;
    margin-right: 10px;
}

.selectedProvider:nth-last-child {
    margin-bottom: 15px;
}

.btn {
    display: inline-block;
    width: 100%;
    max-width: 320px;
    padding: 7px 0;
    margin-bottom: 10px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #c7c7c7;
    color: white;
    background-color: #216fb6;
    box-sizing: border-box;
}

.mt10 {
    margin-top: 10px;
}

.btn:hover {
    color: #216fb6;
    background-color: #ffffff;
}

.btn.oauth {
    display: inline-flex;
    align-items: center;
    text-align: left;
    padding: 10px;
    border: 1px solid #216fb6;
    background-color: #ffffff;
    color: #000;
}

.btn.oauth:hover {
    background-color: #e8e8e8;
}

.btn.oauth img {
    width: 22px;
    height: 22px;
    margin-right: 10px;
}

.btn.cancel {
    max-width: 130px;
    margin: 15px;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 70px;
    padding: 5px;
    font-size: 12px;
    color: #3f3f3f;
}

footer a {
    font-size: 13px;
    color: #3f3f3f;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    footer {
        flex-direction: column;
        text-align: center;
        gap: 4px;
    }
}

@media (max-height: 650px) {
    .logo {
        margin: 20px 0;
    }
    footer {
        margin-top: 5px;
    }
}