:root {
    /* ---- Brand Specific (design system) ---- */
    --brand-primary:         #4399C9;   /* Primary */
    --brand-primary-light:   #79E2FF;   /* Primary Light */
    --brand-primary-rgb:     67, 153, 201;
    --brand-primary-dark:    #1D3E67;   /* Brand Gradient 1 */
    --brand-primary-darker:  #006085;   /* Brand Gradient 2 */
    --brand-secondary:       #1D3E67;   /* Secondary */
    --brand-secondary-light: #0573A4;   /* Secondary Light */
    --brand-tertiary:        #F9737B;   /* Tertiary */
    --brand-tertiary-light:  #FA915A;   /* Tertiary Light */

    --lpx-content-text-rgb: 50, 81, 104;
    --lpx-content-bg-rgb: 243, 244, 246;
    --lpx-primary-rgb: 67, 153, 201;
    --lpx-secondary-rgb: 108, 93, 211;
    --lpx-brand-rgb: 67, 153, 201;
    --lpx-success-rgb: 79, 191, 103;
    --lpx-info-rgb: 67, 138, 167;
    --lpx-warning-rgb: 255, 159, 56;
    --lpx-danger-rgb: 192, 13, 73;
    --lpx-light-rgb: 240, 244, 247;
    --lpx-dark-rgb: 6, 42, 68;
    --lpx-navbar-color-rgb: 255, 255, 255;
    --lpx-navbar-text-color-rgb: 68, 95, 114;
    --lpx-navbar-active-text-color-rgb: 18, 65, 99;
    --lpx-text-white-rgb: 255, 255, 255;
    --lpx-logo-reverse: var(--logo-reverse);
    --lpx-primary-one: #1D3E67;
    --lpx-primary-two: #4399C9;
    --lpx-primary-three: #79E2FF;
    --lpx-secondary: #1D3E67;
    --lpx-success: #4fbf67;
    --lpx-status-temp-active: #74BC1F;
    --lpx-status-temp-inactive: #dd2a0b;
    --lpx-status-temp-color: var(--lpx-primary-two);
    --lpx-status-temp-text: #fff;
    --lpx-info: #438aa7;
    --lpx-warning: #ff9f38;
    --lpx-danger: #c00d49;
    --lpx-brand: #4399C9;
    --lpx-hover: #1D3E67;
    --lpx-brand-text: #fff;
    --lpx-container-active-text: #fff;
    --lpx-text-white: #fff;
    --lpx-radius: 0.5rem;
    --lpx-primary-gradient: linear-gradient(90deg, var(--lpx-primary-two) 0%, var(--lpx-primary-two) 35%, var(--lpx-primary-two) 100%);
    --lpx-logo: url(/images/vantagepay/logo.png);
    --lpx-merchant-logo: url(/images/vantagepay/portal-logo.png);
    --lpx-portal-logo: url(/images/vantagepay/merchant-logo.png);
    --lpx-logo-color: url(/images/vantagepay/logo-color.png);
    --lpx-logo-icon: url(/images/vantagepay/logo-only.png);
    --lpx-light: #f0f4f7;
    --lpx-dark: #062a44;
    --lpx-navbar-color: #fff;
    --lpx-navbar-text-color: #445f72;
    --lpx-navbar-active-text-color: #124163;
    --lpx-navbar-active-bg-color: #f3f6f9;
    --lpx-card-bg: #fff;
    --lpx-card-title-text-color: #062a44;
    --lpx-content-bg: #f3f4f6;
    --lpx-content-text: #325168;
    --lpx-border-color: #e8eef3;
    --lpx-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);
    --brand-accent: var(--brand-primary);

    /* Brand ramp — the design system's Brand Gradient 1-5. Overriding the ramp
       here replaces the derived default for cards and sector charts alike. */
    --brand-ramp-1: #1D3E67;
    --brand-ramp-2: #006085;
    --brand-ramp-3: #0573A4;
    --brand-ramp-4: #0582AC;
    --brand-ramp-5: #4399C9;

    /* Role overrides: VantagePay's strong brand surface is the dark navy
       secondary (Figma binds nav + filled actions to Brand Specific/Secondary),
       while --brand-primary stays the accent/selection colour. */
    --navbar-bg: var(--brand-ramp-1);
    --btn-primary-bg: var(--brand-ramp-1);
    --btn-primary-bg-hover: var(--brand-ramp-2);
    --btn-primary-bg-active: var(--brand-ramp-3);
    --btn-secondary-fg-hover: var(--brand-ramp-2);

    /* Chart palette (Figma "Visualization Colours"). Partner-scoped for now:
       accent-1 doubles as Bootstrap's compiled $primary in the shared base, so
       the shared default cannot move without also shifting $primary. */
    --accent-1: #1C6EC8;
    --accent-2: #F5923C;
    --accent-3: #6AB975;
    --accent-4: #E05F59;
    --accent-5: #796CB9;
    --accent-6: #E889D5;
}
  

.lpx-brand-logo {
    background-image: var(--lpx-logo-color);
    background-position: left 0px;
    background-repeat: no-repeat;
    background-size: auto 32px;
    height: 32px;
}

.lpx-brand-logo-reverse {
    background-image: var(--lpx-logo);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: auto 32px;
    height: 32px;
}

.lpx-logo-icon {
    background-image: var(--lpx-logo-icon);
    background-position: left 0px;
    background-repeat: no-repeat;
    background-size: auto 32px;
    height: 32px;
}

.lpx-brand-logo.lpx-login-big-logo {
    -webkit-transform: translateX(-50%);
    background-position: center;
    background-size: contain;
    display: block;
    height: 250px;
    left: 50%;
    position: absolute;
    top: calc(50vh - 125px);
    transform: translateX(-50%);
    width: 50%;
    z-index: 1;
}

.lpx-login-image-area {
    background-image: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    left: 0;
    max-height: 100vh;
    min-height: 100vh;
    position: fixed;
    top: 0;
    width: 50vw;
}
body { background-image: none !important; background-color: var(--lpx-content-bg) !important; }

.landing-layout { background: linear-gradient(180deg, #4399C9 0%, #1D3E67 100%) !important; }

.lpx-sidebar { background: var(--lpx-primary-gradient) !important; }

.lpx-sidebar .lpx-logo-container { background-color: transparent !important; }

/* Component overrides */
.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-select:focus {
    border-color: var(--brand-primary-light);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--brand-primary);
}

.pagination {
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25);
    --bs-pagination-active-bg: var(--brand-primary);
    --bs-pagination-active-border-color: var(--brand-primary);
}

.progress {
    --bs-progress-bar-bg: var(--brand-primary);
}

.list-group {
    --bs-list-group-active-bg: var(--brand-primary);
    --bs-list-group-active-border-color: var(--brand-primary);
}

.btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25);
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25);
}

.appbar-impersonation-icon {
    color: var(--brand-primary-dark);
}

.merchant-support-menu-item-active {
    background: var(--brand-primary);
    color: var(--serene);
}