.login-page { background: #f6fafb; }
.login-aside { color: #fff; background: radial-gradient(circle at 85% 18%, rgba(8,199,216,.14), transparent 30%), #07181d; }
.login-brand { display: inline-flex; align-self: flex-start; }
.login-brand img { display: block; width: 12rem; height: auto; }
.login-mark { display: block; width: 3.25rem; height: 3.25rem; }
.login-aside-copy { max-width: 32rem; }
.login-kicker { display: inline-block; margin-bottom: 1.5rem; padding: .55rem .9rem; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; font-size: .85rem; }
.login-aside-copy h2 { font-size: clamp(2.5rem, 4vw, 4.5rem); line-height: 1.1; font-weight: 700; letter-spacing: -.05em; }
.login-aside-copy p { max-width: 27rem; margin-top: 1.5rem; color: rgba(255,255,255,.82); font-size: 1.1rem; }
.login-aside-footer { color: rgba(255,255,255,.72); font-size: .9rem; }
.login-form-side { background: #f6fafb; }
.login-card { width: min(100%, 30rem); border-radius: 1.25rem; }
.login-card .text-primary, .login-card a { color: #087e9e !important; }
.login-eyebrow { letter-spacing: .12em; }
.login-card .form-control { border-radius: .6rem; font-size: 1rem; }
.login-card .btn { border-radius: .6rem; background: #087e9e; border-color: #087e9e; }
.login-card .btn:hover, .login-card .btn:focus { background: #066c88; border-color: #066c88; }
.login-card .form-control:focus { border-color: #08c7d8; box-shadow: 0 0 0 .22rem rgba(8,199,216,.15); }
.login-mobile-brand { padding: 1.5rem 1.5rem 0; }
.login-mobile-brand img { display: block; width: 10rem; height: auto; }
@media (max-width: 575px) { .login-card { box-shadow: none !important; } .login-card .card-body { padding: 1.75rem !important; } }