:root {
    --rba-navy: #031b3c;
    --rba-navy-deep: #02142f;
    --rba-blue: #1764e8;
}

.login-page {
    background: #fff;
}

.login-shell {
    grid-template-columns: 57.45% 42.55%;
}

.login-brand {
    justify-content: flex-start;
    padding: 48px 4vw;
    background:
        radial-gradient(circle at 40% 54%, rgba(19, 72, 136, .18), transparent 45%),
        linear-gradient(135deg, var(--rba-navy-deep), var(--rba-navy));
}

.login-brand::before {
    z-index: 0;
    width: 610px;
    height: 610px;
    top: 105px;
    right: -155px;
    border: 1px solid rgba(74, 136, 211, .17);
    background: transparent;
}

.login-brand::after {
    z-index: 0;
    width: 560px;
    height: 560px;
    top: 145px;
    right: -130px;
    bottom: auto;
    left: auto;
    border: 0;
    border-radius: 50%;
    background-image: url('/logorba.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 560px;
    filter: grayscale(1) brightness(1.8) sepia(.15) hue-rotate(165deg);
    opacity: .07;
}

.brand__logo {
    display: block;
    width: 215px;
    height: auto;
}

.login-brand > .brand {
    position: relative;
    z-index: 2;
}

.login-brand .brand-copy {
    position: relative;
    z-index: 2;
    margin: clamp(120px, 17vh, 190px) 0 0;
    max-width: 520px;
}

.login-brand .eyebrow {
    margin-bottom: 22px;
    color: #59adff;
    font-size: 11px;
    letter-spacing: 4px;
}

.login-brand .brand-copy h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 3.8vw, 58px);
    line-height: 1.12;
    letter-spacing: -2.2px;
}

.login-brand .brand-copy p {
    margin-top: 28px;
    color: #c3cee0;
    font-size: 15px;
    line-height: 1.6;
}

.rba-color-line {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    width: 244px;
    height: 4px;
    margin-top: 25px;
}

.rba-color-line i:nth-child(1) { background: #2794f4; }
.rba-color-line i:nth-child(2) { background: #69a63b; }
.rba-color-line i:nth-child(3) { background: #efb72d; }
.rba-color-line i:nth-child(4) { background: #ef2835; }

.login-dots {
    position: absolute;
    z-index: 2;
    left: 25px;
    bottom: 30px;
    width: 190px;
    height: 125px;
    background-image: radial-gradient(circle, #4da8ff 1.5px, transparent 1.8px);
    background-size: 23px 23px;
    mask-image: linear-gradient(90deg, #000 25%, transparent 100%);
    opacity: .9;
}

.login-art { display: none; }

.login-form-wrap {
    align-items: center;
    padding: 40px 5vw;
    background:
        radial-gradient(circle at 52% 42%, rgba(220, 231, 249, .2), transparent 38%),
        #fff;
}

.login-card {
    width: min(100%, 355px);
}

.login-symbol {
    width: 53px;
    height: 53px;
    margin: 0 auto 35px;
    overflow: hidden;
}

.login-symbol img {
    width: auto;
    height: 53px;
    max-width: none;
}

.mobile-brand { display: none !important; }

.login-card > .eyebrow {
    display: block;
    margin-bottom: 13px;
    color: #1764e8;
    text-align: center;
    font-size: 10px;
    letter-spacing: 3px;
}

.login-card h2 {
    margin: 0 0 9px;
    color: #07172f;
    text-align: center;
    font-size: 32px;
    letter-spacing: -1.2px;
}

.login-card > .muted {
    margin-bottom: 34px;
    text-align: center;
    font-size: 13px;
}

.login-card .field {
    gap: 10px;
    margin-bottom: 21px;
    color: #12213a;
    font-size: 12px;
}

.login-card .field input {
    height: 52px;
    padding-left: 45px;
    border-color: #d8e0eb;
    border-radius: 9px;
    background: #fbfcff;
    font-size: 12px;
}

.login-card .field:first-of-type input {
    border-color: #7cafff;
    box-shadow: 0 0 0 1px rgba(23, 100, 232, .05);
}

.login-card .input-icon {
    left: 14px;
    width: 19px;
    color: #74829a;
}

.login-card .input-icon svg,
.login-card .show-password svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.login-card .show-password {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    right: 10px;
    padding: 0;
    color: #7a89a3;
}

.login-options {
    margin: 2px 0 27px;
    color: #5d6b80;
    font-size: 11px;
}

.login-options input {
    width: 15px;
    height: 15px;
    margin: 0 7px 0 0;
    accent-color: var(--rba-blue);
    vertical-align: -3px;
}

.login-card .button--primary {
    min-height: 48px;
    border-radius: 8px;
    background: linear-gradient(90deg, #1764e8, #0756cf);
    box-shadow: 0 12px 25px rgba(23, 100, 232, .22);
}

.login-footer {
    display: grid;
    grid-template-columns: 120px 1px 1fr 1px auto;
    align-items: center;
    gap: 18px;
    width: 470px;
    margin: 56px 0 0 -58px;
    padding-top: 22px;
    border-top: 1px solid #dfe5ed;
    color: #45536b;
}

.login-footer > img { width: 120px; }
.login-footer > i { width: 1px; height: 34px; background: #dfe5ed; }
.login-footer > span { display: flex; flex-direction: column; gap: 3px; }
.login-footer b { font-size: 10px; }
.login-footer small { color: #78859a; font-size: 8px; }
.login-footer .secure-label { display: grid; grid-template-columns: 18px auto; align-items: center; column-gap: 7px; }
.login-footer .secure-label b { grid-row: 1 / 3; color: #5c6c85; font-size: 15px; }

.sidebar {
    overflow: hidden;
    background: linear-gradient(180deg, #031d40, #02152f);
}

.sidebar::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -55px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(77, 168, 255, .1);
    border-radius: 50%;
    pointer-events: none;
}

.sidebar__brand .brand__logo { width: 165px; }
.sidebar__brand { position: relative; z-index: 1; padding-bottom: 25px; }
.nav,.sidebar__user { position: relative; z-index: 1; }
.nav__item.active { box-shadow: inset 3px 0 #efb72d; }

@media (max-width: 1100px) {
    .login-brand { padding-inline: 4vw; }
    .login-footer { width: 420px; margin-left: -32px; gap: 13px; }
}

@media (max-width: 900px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-form-wrap { min-height: 100vh; padding: 34px 25px; }
    .login-card { width: min(100%, 390px); }
    .login-footer { width: 100%; margin: 45px 0 0; grid-template-columns: 105px 1px 1fr 1px auto; gap: 11px; }
    .login-footer > img { width: 105px; }
}

@media (max-width: 480px) {
    .login-symbol { margin-bottom: 27px; }
    .login-card h2 { font-size: 29px; }
    .login-footer { grid-template-columns: 95px 1px 1fr; }
    .login-footer > img { width: 95px; }
    .login-footer > i:last-of-type,.login-footer .secure-label { display: none; }
}