/* Login shares the registration page's light, geometric form language. */
.fox-guest #login .fox-login-dialog { width: min(920px, calc(100vw - 30px)); max-width: 920px; margin: 24px auto; }
.fox-guest #login .fox-login-card {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    min-height: 545px;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(17,22,28,.24);
}
.fox-guest #login .fox-login-form-panel { min-width: 0; padding: clamp(28px, 4.5vw, 56px); }
.fox-guest #login .fox-login-heading { position: relative; margin-bottom: 28px; }
.fox-guest #login .fox-login-brand { display: inline-block; margin-bottom: 34px; color: #b15d12; font-size: .81rem; font-weight: 800; letter-spacing: .03em; }
.fox-guest #login .fox-login-heading h2 { max-width: 370px; margin: 0 0 8px; color: #202329; font-size: clamp(1.55rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.15; }
.fox-guest #login .fox-login-heading p { margin: 0; color: #66707a; font-size: .88rem; line-height: 1.5; }
.fox-guest #login .fox-login-close { position: absolute; top: -7px; right: -8px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; color: #59636e; background: transparent; font-size: 1.15rem; cursor: pointer; }
.fox-guest #login .fox-login-close:hover { color: #b45c0f; background: #fff2e3; }
.fox-guest #login .fox-login-fields, .fox-guest #login .fox-login-fields form { width: 100%; max-width: none; margin: 0; }
.fox-guest #login .fox-login-fields form { padding: 0; border: 0; background: transparent; box-shadow: none; }
.fox-guest #login .fox-login-fields .login-panel { padding: 0; }
.fox-guest #login .fox-login-fields .form-group { margin-bottom: 18px; }
.fox-guest #login .fox-login-fields label { display: block; margin: 0 0 7px; color: #393d43; font-size: .82rem; font-weight: 750; }
.fox-guest #login .fox-login-fields .input-group { height: 49px; }
.fox-guest #login .fox-login-fields .input-group-prepend { margin-right: 0; }
.fox-guest #login .fox-login-fields .input-group-text,
.fox-guest #login .fox-login-fields .form-control { height: 49px; border-color: #cfd5db !important; background: #fff !important; }
.fox-guest #login .fox-login-fields .input-group-text { width: 45px; justify-content: center; border-radius: 8px 0 0 8px; color: #ac671f; }
.fox-guest #login .fox-login-fields .form-control { border-left: 0; border-radius: 0 8px 8px 0; color: #25282d; font-size: .9rem; }
.fox-guest #login .fox-login-fields .form-control:focus { border-color: #e98b29 !important; box-shadow: 0 0 0 3px rgba(241,148,51,.14); }
.fox-guest #login .fox-login-fields .text-right .cursor-pointer { display: inline-block; margin-top: 8px; padding: 0 !important; color: #b65f10; font-size: .8rem !important; font-weight: 750; text-decoration: none; }
.fox-guest #login .fox-login-fields .text-right .cursor-pointer:hover { text-decoration: underline; }
.fox-guest #login .fox-login-fields .btn-primary { width: 100%; min-height: 49px; margin-top: 6px; border: 1px solid #e9891f; border-radius: 8px; color: #201a13; background: #f5a13c; font-size: .9rem; font-weight: 800; }
.fox-guest #login .fox-login-fields .btn-primary:hover { border-color: #ed8f22; color: #201a13; background: #ffb25c; }
.fox-guest #login .fox-login-fields .alert-login:empty { display: none; }
.fox-guest #login .fox-login-fields .alert-login:not(:empty) { margin-bottom: 16px; border-radius: 8px; font-size: .8rem; }
.fox-guest #login .fox-login-register { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e2e5e8; color: #7b838c; font-size: .81rem; }
.fox-guest #login .fox-login-register a { margin-left: 4px; color: #c66c12; font-weight: 800; text-decoration: none; }
.fox-guest #login .fox-login-register a:hover { text-decoration: underline; }
.fox-guest #login .fox-login-art-panel { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(140deg, #f5f6f6 2%, #e7eaec 55%, #f8f9f9); }
.fox-guest #login .fox-login-art-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 26%, rgba(255,255,255,.62) 26.2%, transparent 27.5%), linear-gradient(45deg, transparent 46%, rgba(163,173,184,.12) 46.2%, transparent 48%), linear-gradient(135deg, rgba(255,255,255,.3) 22%, transparent 22%, transparent 75%, rgba(255,255,255,.24) 75%); }
.fox-guest #login .fox-login-art-grid { display: none; }
.fox-guest #login .fox-login-art-panel img { position: relative; z-index: 1; display: block; width: min(116%, 580px); max-width: none; height: auto; margin-top: auto; margin-left: -5%; filter: drop-shadow(0 22px 28px rgba(32,28,24,.14)); }

html[data-fox-theme="dark"] .fox-guest #login .fox-login-card { border-color: #434b55; background: #242b34; }
html[data-fox-theme="dark"] .fox-guest #login .fox-login-brand { color: #ffb466; }
html[data-fox-theme="dark"] .fox-guest #login .fox-login-heading h2,
html[data-fox-theme="dark"] .fox-guest #login .fox-login-fields label { color: #f1f3f5; }
html[data-fox-theme="dark"] .fox-guest #login .fox-login-heading p,
html[data-fox-theme="dark"] .fox-guest #login .fox-login-register { color: #b8c3ce; }
html[data-fox-theme="dark"] .fox-guest #login .fox-login-close { color: #c6cdd5; }
html[data-fox-theme="dark"] .fox-guest #login .fox-login-fields .input-group-text,
html[data-fox-theme="dark"] .fox-guest #login .fox-login-fields .form-control { border-color: #4a5562 !important; color: #f0f2f5; background: #171e27 !important; }
html[data-fox-theme="dark"] .fox-guest #login .fox-login-register { border-color: #3f4a56; }
html[data-fox-theme="dark"] .fox-guest #login .fox-login-art-panel { background: linear-gradient(140deg, #20252e, #2b3037 55%, #171c24); }

@media (max-width: 680px) {
    .fox-guest #login .fox-login-dialog { width: min(500px, calc(100vw - 20px)); margin: 10px auto; }
    .fox-guest #login .fox-login-card { display: flex; flex-direction: column; max-height: calc(100vh - 20px); overflow-y: auto; }
    .fox-guest #login .fox-login-form-panel { padding: 22px; }
    .fox-guest #login .fox-login-brand { margin-bottom: 17px; }
    .fox-guest #login .fox-login-heading { margin-bottom: 21px; }
    .fox-guest #login .fox-login-art-panel { min-height: 120px; max-height: 120px; order: -1; }
    .fox-guest #login .fox-login-art-panel img { width: 170px; margin: -20px 0 -100px; }
}
@media (max-width: 390px) {
    .fox-guest #login .fox-login-art-panel { display: none; }
}