:root {
    --homeplate-blue: #1e4fe0;
    --homeplate-navy: #0b1a3a;
    --homeplate-mist: #eef3fb;
    --homeplate-yellow: #ffc83d;
}

.navbar-brand {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    height: 56px;
    max-width: 245px;
}
.navbar-brand #logo_web { display: block; width: min(148px, 30vw); height: auto; max-height: 34px; object-fit: contain; }
.navbar-brand .hp-header-name { color: var(--homeplate-blue); font-size: 12px; font-weight: 800; letter-spacing: .2px; }
.dark-logo, .light-logo { max-height: 38px; }
.hp-auth-logo { display: block; width: min(280px, 72vw); height: auto; margin: 0 auto 28px; }
.hp-auth-logo--small { width: min(190px, 64vw); margin: 0 0 28px; }

.hp-page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background: #f3f6fc;
    opacity: 1;
    visibility: visible;
    transition: opacity .22s ease, visibility .22s ease;
}
.hp-page-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.hp-page-loader__content { display: grid; justify-items: center; gap: 13px; color: var(--homeplate-navy); }
.hp-page-loader__mark { width: 66px; height: 66px; }
.hp-page-loader__ring {
    width: 26px; height: 26px; border: 3px solid #d9e2f5; border-top-color: var(--homeplate-blue);
    border-radius: 50%; animation: hp-loader-spin .78s linear infinite;
}
.hp-page-loader__name { margin: 0; font: 800 17px/1.2 Urbanist, Nunito, sans-serif; letter-spacing: -.3px; }
.hp-page-loader__caption { color: #66728c; font: 500 12px/1.4 Urbanist, Nunito, sans-serif; }
@keyframes hp-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hp-page-loader, .hp-page-loader__ring { transition: none; animation: none; } }
@media (max-width: 420px) { .navbar-brand { gap: 5px; padding-right: 6px; } .navbar-brand #logo_web { width: 118px; } .navbar-brand .hp-header-name { font-size: 10px; } }