/* Login-only compatibility: table columns work without Grid or modern viewport units. */
#login{display:table;table-layout:fixed;width:100%;height:100vh;min-height:0}
#login[hidden]{display:none!important}
#login .login-art,#login .login-panel{display:table-cell;min-height:0;vertical-align:middle}
#login .login-art{width:52.38%;vertical-align:top}
#login .login-panel{width:47.62%}
#login .login-form{margin:0 auto;max-width:440px}
#login .login-form h2,#login .login-story h1,#login .login-story p,#login .login-help{overflow-wrap:break-word;word-wrap:break-word}
#login .field input{min-width:0}
#login .login-story h1{font-size:64px}
#login .login-form :focus{outline:3px solid #9aebb6;outline:3px solid var(--brand-focus,#9aebb6);outline-offset:3px}
#login .field input:focus{outline:none}
#login .field:focus-within{border-color:#9aebb6;border-color:var(--brand-focus,#9aebb6)}
@media(min-width:1800px){#login .login-story h1{font-size:82px}}
@media(max-width:1100px){#login .login-story h1{font-size:52px}}
@media(max-height:760px) and (min-width:701px){
 #login .login-art{padding-top:26px;padding-bottom:26px}
 #login .login-story{margin-top:45px}
 #login .login-story h1{font-size:54px;margin:20px 0}
 #login .login-panel{padding:28px 32px 60px}
 #login .login-form>.muted{margin-bottom:22px}
 #login .login-form>label:not(.remember){margin-top:15px}
 #login .remember{margin:17px 0 22px}
 #login .login-help{margin-top:18px}
 #login .login-art-footer,#login .login-panel-footer{bottom:22px}
}
@media(max-height:600px) and (min-width:701px){
 #login .login-art{padding-top:22px}
 #login .login-brand{width:160px}
 #login .login-story{margin-top:30px}
 #login .login-story h1{font-size:44px}
 #login .login-story p,#login .login-tags,#login .login-art-footer,#login .login-panel-footer{display:none}
 #login .login-panel{padding:22px 30px}
 #login .login-form h2{font-size:29px;margin:10px 0}
 #login .login-form>.muted{margin-bottom:16px}
 #login .login-form>label:not(.remember){margin-top:12px;margin-bottom:6px}
 #login .field{min-height:44px}
 #login .field input{padding:7px 0}
 #login .remember{margin:14px 0 18px}
 #login .login-submit{min-height:44px;padding:11px 18px}
 #login .login-help{margin-top:14px}
}
@media(max-height:480px) and (min-width:701px){
 #login .login-form>.muted,#login .login-help{display:none}
 #login .login-panel{padding:16px 28px}
 #login .login-story{margin-top:20px}
 #login .login-story h1{font-size:38px}
}
@media(max-width:700px){
 #login{display:block;height:auto;min-height:100vh}
 #login .login-art{display:none}
 #login .login-panel{display:block;width:100%;min-height:100vh;padding:32px 26px 76px}
 #login .mobile-brand{display:block;width:180px;height:auto;margin:0 auto 24px}
 #login .login-form{max-width:440px}
 #login .login-panel-footer{bottom:22px;left:0;right:0;justify-content:center}
}
@media(max-width:700px) and (max-height:600px){
 #login .login-panel{padding:20px 26px 28px}
 #login .mobile-brand{width:130px;margin-bottom:12px}
 #login .login-form h2{font-size:26px;margin:8px 0}
 #login .login-form>.muted,#login .login-help,#login .login-panel-footer{display:none}
 #login .login-form>label:not(.remember){margin-top:10px;margin-bottom:6px}
 #login .field{min-height:44px}
 #login .field input{padding:7px 0}
 #login .remember{margin:14px 0}
 #login .login-submit{min-height:44px;padding:11px 18px}
}