:root {
    /*brand lime colors */
    --campfire-color-brand-lime-50: #b1ef42;
    --campfire-color-brand-lime-60: #97e013;
    --campfire-color-brand-lime-70: #79b50f;
    /*brand orange colors */
    --campfire-color-brand-orange-50: #ff911e;
    --campfire-color-brand-orange-60: #f57d00;
    --campfire-color-brand-orange-70: #c06200;
    /* neutral color */
    --campfire-color-neutral-10: #edefeb;
    --campfire-color-neutral-100: #1a1a1a;
    --campfire-color-neutral-20: #e3e5e8;
    --campfire-color-neutral-50: #b2b2b2;
    --campfire-color-neutral-70: #808080;
    --campfire-color-neutral-90: #333333;
    --campfire-color-neutral-black: #000000;
    --campfire-color-neutral-white: #ffffff;
    /* color opacity dark */
    --campfire-color-opacity-dark-0: #1a1a1a;
    --campfire-color-opacity-dark-10: #1a1a1a1a;
    --campfire-color-opacity-dark-30: #1a1a1a4d;
    --campfire-color-opacity-dark-50: #1a1a1a80;
    --campfire-color-opacity-dark-63: #1a1a1aa1;
    --campfire-color-opacity-dark-70: #1a1a1ab2;
    --campfire-color-opacity-dark-80: #1a1a1acc;
    --campfire-color-opacity-dark-90: #000000e5;
    /* color opacity light */
    --campfire-color-opacity-light-0: #ffffff;
    --campfire-color-opacity-light-20: #ffffff33;
    --campfire-color-opacity-light-40: #ffffff66;
    --campfire-color-opacity-light-50: #ffffff80;
    --campfire-color-opacity-light-53: #ffffff87;
    --campfire-color-opacity-light-70: #ffffffb2;
    /* color system green */
    --campfire-color-system-green-40: #57e08a;
    --campfire-color-system-green-50: #177d3d;
    /* color system red */
    --campfire-color-system-red-40: #feb4b0;
    --campfire-color-system-red-50: #ca0c02;
    /* font family */
    --campfire-font-family-default: Bankwest-Sans, sans-serif;
    /* font letter-spacing */
    --campfire-font-letter-spacing--050: -0.031rem;
    --campfire-font-letter-spacing--075: -0.047rem;
    --campfire-font-letter-spacing--100: -0.063rem;
    --campfire-font-letter-spacing--150: -0.094rem;
    --campfire-font-letter-spacing--300: -0.188;
    --campfire-font-letter-spacing-000: 0rem;
    --campfire-font-letter-spacing-025: 0.016;
    /* font size */
    --campfire-font-size-12: 0.75rem;
    --campfire-font-size-14: 0.875rem;
    --campfire-font-size-16: 1rem;
    --campfire-font-size-20: 1.25rem;
    --campfire-font-size-24: 1.5rem;
    --campfire-font-size-32: 2rem;
    --campfire-font-size-36: 2.25rem;
    --campfire-font-size-40: 2.5rem;
    --campfire-font-size-46: 2.875;
    --campfire-font-size-48: 3rem;
    --campfire-font-size-56: 3.5rem;
    --campfire-font-size-64: 4rem;
    --campfire-font-size-80: 5rem;
    --campfire-font-size-96: 6rem;
    --campfire-font-size-128: 8rem;
    /* font style */
    --campfire-font-style-italic: italic;
    /* font weight */
    --campfire-font-weight-bold: 600;
    --campfire-font-weight-regular: 400;
    /* size */
    --campfire-size-0: 0;
    --campfire-size-1: 1px;
    --campfire-size-2: 2px;
    --campfire-size-4: 4px;
    --campfire-size-6: 6px;
    --campfire-size-8: 8px;
    --campfire-size-10: 10px;
    --campfire-size-12: 12px;
    --campfire-size-14: 14px;
    --campfire-size-16: 16px;
    --campfire-size-20: 20px;
    --campfire-size-24: 24px;
    --campfire-size-28: 28px;
    --campfire-size-32: 32px;
    --campfire-size-36: 36px;
    --campfire-size-40: 40px;
    --campfire-size-44: 44px;
    --campfire-size-48: 48px;
    --campfire-size-56: 56px;
    --campfire-size-64: 64px;
    --campfire-size-80: 80px;
    --campfire-size-96: 96px;
    --campfire-size-112: 112px;
    --campfire-size-120: 120px;
    --campfire-size-128: 128px;
    --campfire-size-144: 144px;
    --campfire-size-160: 160px;
    --campfire-size-full: 9999px;
}

:root {
    /* border-radius */
    --campfire-border-radius-3xs: var(--campfire-size-4);
    --campfire-border-radius-2xs: var(--campfire-size-8);
    --campfire-border-radius-xs: var(--campfire-size-16);
    --campfire-border-radius-sm: var(--campfire-size-24);
    --campfire-border-radius-md: var(--campfire-size-32);
    --campfire-border-radius-full: var(--campfire-size-full);
    /* border-color */
    --campfire-static-border-accent-primary: var(--campfire-color-brand-lime-50);
    --campfire-static-border-brand-primary: var(--campfire-color-brand-orange-50);
    --campfire-static-border-negative-primary: var(--campfire-color-system-red-50);
    --campfire-static-border-neutral-divider: var(--campfire-color-neutral-20);
    --campfire-static-border-neutral-inverse: var(--campfire-color-neutral-white);
    --campfire-static-border-neutral-inverse-divider: var(--campfire-color-neutral-90);
    --campfire-static-border-neutral-inverse-subtle: var(--campfire-color-opacity-light-50);
    --campfire-static-border-neutral-primary: var(--campfire-color-opacity-dark-90);
    --campfire-static-border-neutral-subtle: var(--campfire-color-opacity-dark-50);
    --campfire-static-border-positive-primary: var(--campfire-color-system-green-50);
    /* frame */
    --campfire-static-frame-accent-primary: var(--campfire-color-brand-lime-50);
    --campfire-static-frame-brand-primary: var(--campfire-color-brand-orange-50);
    --campfire-static-frame-negative-primary: var(--campfire-color-system-red-50);
    --campfire-static-frame-neutral-inverse: var(--campfire-color-neutral-100);
    --campfire-static-frame-neutral-inverse-subtle: var(--campfire-color-neutral-90);
    --campfire-static-frame-neutral-primary: var(--campfire-color-neutral-white);
    --campfire-static-frame-neutral-subtle: var(--campfire-color-neutral-10);
    --campfire-static-frame-positive-primary: var(--campfire-color-system-green-50);
    /* icon */
    --campfire-static-icon-accent-primary: var(--campfire-color-brand-lime-50);
    --campfire-static-icon-brand-primary: var(--campfire-color-brand-orange-50);
    --campfire-static-icon-negative-primary: var(--campfire-color-system-red-50);
    --campfire-static-icon-neutral-inverse: var(--campfire-color-neutral-white);
    --campfire-static-icon-neutral-inverse-subtle: var(--campfire-color-opacity-light-53);
    --campfire-static-icon-neutral-primary: var(--campfire-color-opacity-dark-90);
    --campfire-static-icon-neutral-subtle: var(--campfire-color-opacity-dark-63);
    --campfire-static-icon-positive-primary: var(--campfire-color-system-green-50);
    /* interaction */
    --campfire-static-interaction-accent-mid: var(--campfire-color-brand-lime-70);
    --campfire-static-interaction-accent-subtle: var(--campfire-color-brand-lime-60);
    --campfire-static-interaction-brand-mid: var(--campfire-color-brand-orange-70);
    --campfire-static-interaction-brand-subtle: var(--campfire-color-brand-orange-60);
    --campfire-static-interaction-neutral-inverse: var(--campfire-color-neutral-black);
    --campfire-static-interaction-neutral-inverse-subtle: var(--campfire-color-neutral-90);
    --campfire-static-interaction-neutral-mid: var(--campfire-color-neutral-50);
    --campfire-static-interaction-neutral-subtle: var(--campfire-color-neutral-20);
    /* page */
    --campfire-static-page-accent-primary: var(--campfire-color-brand-lime-50);
    --campfire-static-page-brand-primary: var(--campfire-color-brand-orange-50);
    --campfire-static-page-neutral-inverse: var(--campfire-color-neutral-100);
    --campfire-static-page-neutral-primary: var(--campfire-color-neutral-white);
    --campfire-static-page-neutral-subtle: var(--campfire-color-neutral-10);
    /* state */
    --campfire-static-state-neutral-primary: var(--campfire-color-opacity-dark-30);
    --campfire-static-state-neutral-subtle: var(--campfire-color-opacity-dark-10);
    --campfire-static-state-none: var(--campfire-color-opacity-dark-0);
    /* text */
    --campfire-static-text-accent-primary: var(--campfire-color-brand-lime-50);
    --campfire-static-text-brand-primary: var(--campfire-color-brand-orange-50);
    --campfire-static-text-negative-primary: var(--campfire-color-system-red-50);
    --campfire-static-text-neutral-inverse: var(--campfire-color-neutral-white);
    --campfire-static-text-neutral-inverse-subtle: var(--campfire-color-opacity-light-53);
    --campfire-static-text-neutral-primary: var(--campfire-color-opacity-dark-90);
    --campfire-static-text-neutral-subtle: var(--campfire-color-opacity-dark-63);
    --campfire-static-text-positive-primary: var(--campfire-color-system-green-50);
    --campfire-stroke-weight-sm: 2px;
    --campfire-stroke-weight-xs: 1px;
    --campfire-static-state-neutral-subtle-on-dark: var(--campfire-color-opacity-light-20);
    --svg-static-icon-neutral-primary: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(19%) hue-rotate(80deg) brightness(109%) contrast(101%) opacity(0.9);
    --svg-static-icon-neutral-inverse: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(241deg) brightness(103%) contrast(103%);
    --svg-static-state-neutral-primary: brightness(0) saturate(100%) invert(0%) sepia(6%) saturate(2480%) hue-rotate(11deg) brightness(88%) contrast(80%) opacity(0.3);
    --svg-static-interaction-neutral-inverse: brightness(0) saturate(100%) invert(0%) sepia(36%) saturate(4234%) hue-rotate(36deg) brightness(93%) contrast(106%);
    --svg-static-icon-neutral-subtle: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(17%) hue-rotate(316deg) brightness(94%) contrast(80%) opacity(0.63);
    --svg-static-state-neutral-primary-on-dark: invert(100%) sepia(0%) saturate(7500%) hue-rotate(115deg) brightness(101%) contrast(106%) opacity(0.4);
    --svg-static-interaction-neutral-subtle: brightness(0) saturate(100%) invert(98%) sepia(2%) saturate(237%) hue-rotate(178deg) brightness(96%) contrast(89%);
    --svg-static-icon-neutral-inverse-subtle: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(115deg) brightness(101%) contrast(106%) opacity(0.53);
}

/* .light-theme { */
:root {
    --campfire-component-headerapp-background: var(--campfire-color-opacity-light-70);
    --campfire-component-notificationdot-border: var(--campfire-color-neutral-10);
    --campfire-opacity-semi-transparent: var(--campfire-color-opacity-dark-80);
    --campfire-opacity-transparent: var(--campfire-color-opacity-dark-0);
    --campfire-themed-border-accent-neutral-to-primary: var(--campfire-color-opacity-dark-90);
    --campfire-themed-border-accent-primary-to-neutral: var(--campfire-color-brand-lime-50);
    --campfire-themed-border-brand-neutral-to-primary: var(--campfire-color-opacity-dark-90);
    --campfire-themed-border-brand-primary-to-neutral: var(--campfire-color-brand-orange-50);
    --campfire-themed-border-negative-primary: var(--campfire-color-system-red-50);
    --campfire-themed-border-neutral-divider: var(--campfire-color-neutral-20);
    --campfire-themed-border-neutral-inverse: var(--campfire-color-neutral-white);
    --campfire-themed-border-neutral-inverse-divider: var(--campfire-color-neutral-90);
    --campfire-themed-border-neutral-inverse-subtle: var(--campfire-color-opacity-light-50);
    --campfire-themed-border-neutral-primary: var(--campfire-color-opacity-dark-90);
    --campfire-themed-border-neutral-subtle: var(--campfire-color-opacity-dark-50);
    --campfire-themed-border-positive-primary: var(--campfire-color-system-green-50);
    --campfire-themed-frame-accent-neutral-to-primary: var(--campfire-color-neutral-10);
    --campfire-themed-frame-accent-primary-to-neutral: var(--campfire-color-brand-lime-50);
    --campfire-themed-frame-brand-neutral-to-primary: var(--campfire-color-neutral-10);
    --campfire-themed-frame-brand-primary-to-neutral: var(--campfire-color-brand-orange-50);
    --campfire-themed-frame-negative-primary: var(--campfire-color-system-red-50);
    --campfire-themed-frame-neutral-inverse: var(--campfire-color-neutral-100);
    --campfire-themed-frame-neutral-inverse-subtle: var(--campfire-color-neutral-90);
    --campfire-themed-frame-neutral-primary: var(--campfire-color-neutral-white);
    --campfire-themed-frame-neutral-subtle: var(--campfire-color-neutral-10);
    --campfire-themed-frame-positive-primary: var(--campfire-color-system-green-50);
    --campfire-themed-icon-accent-neutral-to-primary: var(--campfire-color-opacity-dark-90);
    --campfire-themed-icon-accent-primary-to-neutral: var(--campfire-color-brand-lime-50);
    --campfire-themed-icon-brand-neutral-to-primary: var(--campfire-color-opacity-dark-90);
    --campfire-themed-icon-brand-primary-to-neutral: var(--campfire-color-brand-orange-50);
    --campfire-themed-icon-negative-primary: var(--campfire-color-system-red-50);
    --campfire-themed-icon-neutral-inverse: var(--campfire-color-neutral-white);
    --campfire-themed-icon-neutral-inverse-subtle: var(--campfire-color-opacity-light-53);
    --campfire-themed-icon-neutral-primary: var(--campfire-color-opacity-dark-90);
    --campfire-themed-icon-neutral-subtle: var(--campfire-color-opacity-dark-63);
    --campfire-themed-icon-positive-primary: var(--campfire-color-system-green-50);
    --campfire-themed-interaction-accent-mid: var(--campfire-color-brand-lime-70);
    --campfire-themed-interaction-accent-subtle: var(--campfire-color-brand-lime-60);
    --campfire-themed-interaction-brand-mid: var(--campfire-color-brand-orange-70);
    --campfire-themed-interaction-brand-subtle: var(--campfire-color-brand-orange-60);
    --campfire-themed-interaction-neutral-inverse: var(--campfire-color-neutral-black);
    --campfire-themed-interaction-neutral-inverse-subtle: var(--campfire-color-neutral-90);
    --campfire-themed-interaction-neutral-mid: var(--campfire-color-neutral-50);
    --campfire-themed-interaction-neutral-subtle: var(--campfire-color-neutral-20);
    --campfire-themed-page-accent-neutral-to-primary: var(--campfire-color-neutral-white);
    --campfire-themed-page-accent-primary-to-neutral: var(--campfire-color-brand-lime-50);
    --campfire-themed-page-brand-neutral-to-primary: var(--campfire-color-neutral-white);
    --campfire-themed-page-brand-primary-to-neutral: var(--campfire-color-brand-orange-50);
    --campfire-themed-page-neutral-inverse: var(--campfire-color-neutral-100);
    --campfire-themed-page-neutral-primary: var(--campfire-color-neutral-white);
    --campfire-themed-page-neutral-subtle: var(--campfire-color-neutral-10);
    --campfire-themed-state-neutral-primary: var(--campfire-color-opacity-dark-30);
    --campfire-themed-state-neutral-subtle: var(--campfire-color-opacity-dark-10);
    --campfire-themed-state-neutral-inverse-subtle: var(--campfire-color-opacity-light-20);
    --campfire-themed-state-neutral-inverse: var(--campfire-color-opacity-light-40);
    --campfire-themed-state-none: var(--campfire-color-opacity-dark-0);
    --campfire-themed-text-accent-neutral-to-primary: var(--campfire-color-opacity-dark-90);
    --campfire-themed-text-accent-primary-to-neutral: var(--campfire-color-brand-lime-50);
    --campfire-themed-text-brand-neutral-to-primary: var(--campfire-color-opacity-dark-90);
    --campfire-themed-text-brand-primary-to-neutral: var(--campfire-color-brand-orange-50);
    --campfire-themed-text-negative-primary: var(--campfire-color-system-red-50);
    --campfire-themed-text-neutral-inverse: var(--campfire-color-neutral-white);
    --campfire-themed-text-neutral-inverse-subtle: var(--campfire-color-opacity-light-53);
    --campfire-themed-text-neutral-primary: var(--campfire-color-opacity-dark-90);
    --campfire-themed-text-neutral-subtle: var(--campfire-color-opacity-dark-63);
    --campfire-themed-text-positive-primary: var(--campfire-color-system-green-50);
    --campfire-themed-state-neutral-inverse-subtle: var(--campfire-color-opacity-light-20);
    --campfire-themed-state-neutral-inverse: var(--campfire-color-opacity-light-40);
    --svg-themed-icon-neutral-primary: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(19%) hue-rotate(80deg) brightness(109%) contrast(101%) opacity(0.9);
    --svg-themed-icon-neutral-inverse: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(241deg) brightness(103%) contrast(103%);
    --svg-themed-state-neutral-primary: brightness(0) saturate(100%) invert(10%) sepia(0%) saturate(1808%) hue-rotate(144deg) brightness(105%) contrast(101%) opacity(0.3);
    --svg-themed-icon-neutral-subtle: brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(10%) hue-rotate(314deg) brightness(105%) contrast(101%) opacity(0.63);
    --svg-themed-icon-brand-neutral-to-primary: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(19%) hue-rotate(80deg) brightness(109%) contrast(101%) opacity(0.9);
    --svg-themed-interaction-neutral-inverse: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7500%) hue-rotate(327deg) brightness(96%) contrast(104%);
    --svg-themed-state-neutral-inverse: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(203deg) brightness(112%) contrast(101%) opacity(0.4);
    --svg-themed-interaction-neutral-subtle: brightness(0) saturate(100%) invert(94%) sepia(12%) saturate(47%) hue-rotate(177deg) brightness(99%) contrast(88%);
    --svg-themed-icon-neutral-inverse-subtle: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(115deg) brightness(101%) contrast(106%) opacity(0.53);
    --svg-themed-icon-negative-primary: brightness(0) saturate(100%) invert(14%) sepia(98%) saturate(3044%) hue-rotate(355deg) brightness(100%) contrast(115%);
    --svg-themed-icon-positive-primary: brightness(0) saturate(100%) invert(36%) sepia(89%) saturate(370%) hue-rotate(90deg) brightness(91%) contrast(100%);
}

.dark-theme {
    --campfire-component-headerapp-background: var(--campfire-color-opacity-dark-70);
    --campfire-component-notificationdot-border: var(--campfire-color-neutral-90);
    --campfire-opacity-semi-transparent: var(--campfire-color-opacity-dark-80);
    --campfire-opacity-transparent: var(--campfire-color-opacity-dark-0);
    --campfire-themed-border-accent-neutral-to-primary: var(--campfire-color-brand-lime-50);
    --campfire-themed-border-accent-primary-to-neutral: var(--campfire-color-opacity-dark-90);
    --campfire-themed-border-brand-neutral-to-primary: var(--campfire-color-brand-orange-50);
    --campfire-themed-border-brand-primary-to-neutral: var(--campfire-color-opacity-dark-90);
    --campfire-themed-border-negative-primary: var(--campfire-color-system-red-40);
    --campfire-themed-border-neutral-divider: var(--campfire-color-neutral-90);
    --campfire-themed-border-neutral-inverse: var(--campfire-color-opacity-dark-90);
    --campfire-themed-border-neutral-inverse-divider: var(--campfire-color-neutral-20);
    --campfire-themed-border-neutral-inverse-subtle: var(--campfire-color-opacity-dark-50);
    --campfire-themed-border-neutral-primary: var(--campfire-color-neutral-white);
    --campfire-themed-border-neutral-subtle: var(--campfire-color-opacity-light-50);
    --campfire-themed-border-positive-primary: var(--campfire-color-system-green-40);
    --campfire-themed-frame-accent-neutral-to-primary: var(--campfire-color-brand-lime-50);
    --campfire-themed-frame-accent-primary-to-neutral: var(--campfire-color-opacity-dark-70);
    --campfire-themed-frame-brand-neutral-to-primary: var(--campfire-color-brand-orange-50);
    --campfire-themed-frame-brand-primary-to-neutral: var(--campfire-color-neutral-90);
    --campfire-themed-frame-negative-primary: var(--campfire-color-system-red-40);
    --campfire-themed-frame-neutral-inverse: var(--campfire-color-neutral-white);
    --campfire-themed-frame-neutral-inverse-subtle: var(--campfire-color-neutral-10);
    --campfire-themed-frame-neutral-primary: var(--campfire-color-neutral-100);
    --campfire-themed-frame-neutral-subtle: var(--campfire-color-neutral-90);
    --campfire-themed-frame-positive-primary: var(--campfire-color-system-green-40);
    --campfire-themed-icon-accent-neutral-to-primary: var(--campfire-color-brand-lime-50);
    --campfire-themed-icon-accent-primary-to-neutral: var(--campfire-color-opacity-dark-90);
    --campfire-themed-icon-brand-neutral-to-primary: var(--campfire-color-brand-orange-50);
    --campfire-themed-icon-brand-primary-to-neutral: var(--campfire-color-opacity-dark-90);
    --campfire-themed-icon-negative-primary: var(--campfire-color-system-red-40);
    --campfire-themed-icon-neutral-inverse: var(--campfire-color-opacity-dark-90);
    --campfire-themed-icon-neutral-inverse-subtle: var(--campfire-color-opacity-dark-63);
    --campfire-themed-icon-neutral-primary: var(--campfire-color-neutral-white);
    --campfire-themed-icon-neutral-subtle: var(--campfire-color-opacity-light-53);
    --campfire-themed-icon-positive-primary: var(--campfire-color-system-green-40);
    --campfire-themed-interaction-accent-mid: var(--campfire-color-brand-lime-70);
    --campfire-themed-interaction-accent-subtle: var(--campfire-color-brand-lime-60);
    --campfire-themed-interaction-brand-mid: var(--campfire-color-brand-orange-70);
    --campfire-themed-interaction-brand-subtle: var(--campfire-color-brand-orange-60);
    --campfire-themed-interaction-neutral-inverse: var(--campfire-color-neutral-white);
    --campfire-themed-interaction-neutral-inverse-subtle: var(--campfire-color-neutral-20);
    --campfire-themed-interaction-neutral-mid: var(--campfire-color-neutral-50);
    --campfire-themed-interaction-neutral-subtle: var(--campfire-color-neutral-90);
    --campfire-themed-page-accent-neutral-to-primary: var(--campfire-color-brand-lime-50);
    --campfire-themed-page-accent-primary-to-neutral: var(--campfire-color-neutral-100);
    --campfire-themed-page-brand-neutral-to-primary: var(--campfire-color-brand-orange-50);
    --campfire-themed-page-brand-primary-to-neutral: var(--campfire-color-neutral-100);
    --campfire-themed-page-neutral-inverse: var(--campfire-color-neutral-white);
    --campfire-themed-page-neutral-primary: var(--campfire-color-neutral-100);
    --campfire-themed-page-neutral-subtle: var(--campfire-color-neutral-90);
    --campfire-themed-state-neutral-primary: var(--campfire-color-opacity-light-40);
    --campfire-themed-state-neutral-subtle: var(--campfire-color-opacity-light-20);
    --campfire-themed-state-neutral-inverse-subtle: var(--campfire-color-opacity-dark-10);
    --campfire-themed-state-neutral-inverse: var(--campfire-color-opacity-dark-30);
    --campfire-themed-state-none: var(--campfire-color-opacity-light-0);
    --campfire-themed-text-accent-neutral-to-primary: var(--campfire-color-brand-lime-50);
    --campfire-themed-text-accent-primary-to-neutral: var(--campfire-color-opacity-dark-90);
    --campfire-themed-text-brand-neutral-to-primary: var(--campfire-color-brand-orange-50);
    --campfire-themed-text-brand-primary-to-neutral: var(--campfire-color-opacity-dark-90);
    --campfire-themed-text-negative-primary: var(--campfire-color-system-red-40);
    --campfire-themed-text-neutral-inverse: var(--campfire-color-opacity-dark-90);
    --campfire-themed-text-neutral-inverse-subtle: var(--campfire-color-opacity-dark-63);
    --campfire-themed-text-neutral-primary: var(--campfire-color-neutral-white);
    --campfire-themed-text-neutral-subtle: var(--campfire-color-opacity-light-53);
    --campfire-themed-text-positive-primary: var(--campfire-color-system-green-40);
    --campfire-themed-state-neutral-inverse-subtle: var(--campfire-color-opacity-dark-10);
    --campfire-themed-state-neutral-inverse: var(--campfire-color-opacity-dark-30);
    --svg-themed-icon-neutral-primary: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(241deg) brightness(103%) contrast(103%);
    --svg-themed-icon-neutral-inverse: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(19%) hue-rotate(80deg) brightness(109%) contrast(101%) opacity(0.9);
    --svg-themed-state-neutral-primary: brightness(0) saturate(100%) invert(94%) sepia(81%) saturate(1%) hue-rotate(56deg) brightness(105%) contrast(101%) opacity(0.4);
    --svg-themed-icon-neutral-subtle: brightness(0) saturate(100%) invert(97%) sepia(99%) saturate(9%) hue-rotate(179deg) brightness(108%) contrast(100%) opacity(0.53);
    --svg-themed-icon-brand-neutral-to-primary: brightness(0) saturate(100%) invert(69%) sepia(46%) saturate(3232%) hue-rotate(342deg) brightness(101%) contrast(107%);
    --svg-themed-interaction-neutral-inverse: brightness(0) saturate(100%) invert(99%) sepia(100%) saturate(2%) hue-rotate(326deg) brightness(108%) contrast(100%);
    --svg-themed-state-neutral-inverse: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(3051%) hue-rotate(319deg) brightness(71%) contrast(80%) opacity(0.3);
    --svg-themed-interaction-neutral-subtle: brightness(0) saturate(100%) invert(17%) sepia(42%) saturate(0%) hue-rotate(173deg) brightness(109%) contrast(102%);
    --svg-themed-icon-neutral-inverse-subtle: brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(10%) hue-rotate(314deg) brightness(105%) contrast(101%) opacity(0.63);
}

/* --- spacing tokens --- */
:root {
    --campfire-spacing-none: var(--campfire-size-0);
    --campfire-spacing-2xs: var(--campfire-size-4);
    --campfire-spacing-xs: var(--campfire-size-8);
    --campfire-spacing-sm: var(--campfire-size-16);
    --campfire-spacing-md: var(--campfire-size-24);
    --campfire-spacing-lg: var(--campfire-size-32);
    --campfire-spacing-xl: var(--campfire-size-48);
    --campfire-spacing-2xl: var(--campfire-size-64);
}

/* Desktop styles (min-width: 768px) */
@media (min-width: 768px) {
    :root {
        /* --- font tokens --- */
        --campfire-font-size-display-lg: var(--campfire-font-size-128);
        --campfire-font-size-display-sm: var(--campfire-font-size-80);
        --campfire-font-size-headline-lg: var(--campfire-font-size-48);
        --campfire-font-size-headline-md: var(--campfire-font-size-32);
        --campfire-font-size-headline-sm: var(--campfire-font-size-24);
        --campfire-font-size-headline-xs: var(--campfire-font-size-14);
        --campfire-font-size-subheading-lg: var(--campfire-font-size-32);
        --campfire-font-size-subheading-md: var(--campfire-font-size-20);
        --campfire-font-size-subheading-sm: var(--campfire-font-size-16);
        --campfire-font-size-subheading-xs: var(--campfire-font-size-14);
        --campfire-font-size-body-lg: var(--campfire-font-size-20);
        --campfire-font-size-body-md: var(--campfire-font-size-16);
        --campfire-font-size-body-sm: var(--campfire-font-size-14);
        --campfire-font-size-body-xs: var(--campfire-font-size-12);
        --campfire-font-weight-display-lg: var(--campfire-font-weight-regular);
        --campfire-font-weight-display-sm: var(--campfire-font-weight-regular);
        --campfire-font-weight-headline-lg: var(--campfire-font-weight-regular);
        --campfire-font-weight-headline-md: var(--campfire-font-weight-regular);
        --campfire-font-weight-headline-sm: var(--campfire-font-weight-regular);
        --campfire-font-weight-headline-xs: var(--campfire-font-weight-regular);
        --campfire-font-weight-subheading-lg: var(--campfire-font-weight-regular);
        --campfire-font-weight-subheading-md: var(--campfire-font-weight-regular);
        --campfire-font-weight-subheading-sm: var(--campfire-font-weight-regular);
        --campfire-font-weight-subheading-xs: var(--campfire-font-weight-regular);
        --campfire-font-weight-body-lg-regular: var(--campfire-font-weight-regular);
        --campfire-font-weight-body-lg-bold: var(--campfire-font-weight-bold);
        --campfire-font-weight-body-md-regular: var(--campfire-font-weight-regular);
        --campfire-font-weight-body-md-bold: var(--campfire-font-weight-bold);
        --campfire-font-weight-body-sm-regular: var(--campfire-font-weight-regular);
        --campfire-font-weight-body-sm-bold: var(--campfire-font-weight-bold);
        --campfire-font-weight-body-xs-regular: var(--campfire-font-weight-regular);
        --campfire-font-weight-body-xs-bold: var(--campfire-font-weight-bold);
        --campfire-font-family-display-lg: var(--campfire-font-family-default);
        --campfire-font-family-display-sm: var(--campfire-font-family-default);
        --campfire-font-family-headline-lg: var(--campfire-font-family-default);
        --campfire-font-family-headline-md: var(--campfire-font-family-default);
        --campfire-font-family-headline-sm: var(--campfire-font-family-default);
        --campfire-font-family-headline-xs: var(--campfire-font-family-default);
        --campfire-font-family-subheading-lg: var(--campfire-font-family-default);
        --campfire-font-family-subheading-md: var(--campfire-font-family-default);
        --campfire-font-family-subheading-sm: var(--campfire-font-family-default);
        --campfire-font-family-subheading-xs: var(--campfire-font-family-default);
        --campfire-font-family-body-lg: var(--campfire-font-family-default);
        --campfire-font-family-body-md: var(--campfire-font-family-default);
        --campfire-font-family-body-sm: var(--campfire-font-family-default);
        --campfire-font-family-body-xs: var(--campfire-font-family-default);
        --campfire-font-letter-spacing-display-lg: var(--campfire-font-letter-spacing--300);
        --campfire-font-letter-spacing-display-sm: var(--campfire-font-letter-spacing--150);
        --campfire-font-letter-spacing-headline-lg: var(--campfire-font-letter-spacing--100);
        --campfire-font-letter-spacing-headline-md: var(--campfire-font-letter-spacing--50);
        --campfire-font-letter-spacing-headline-sm: var(--campfire-font-letter-spacing-000);
        --campfire-font-letter-spacing-headline-xs: var(--campfire-font-letter-spacing--025);
        --campfire-font-letter-spacing-subheading-lg: var(--campfire-font-letter-spacing-000);
        --campfire-font-letter-spacing-subheading-md: var(--campfire-font-letter-spacing-000);
        --campfire-font-letter-spacing-subheading-sm: var(--campfire-font-letter-spacing-025);
        --campfire-font-letter-spacing-subheading-xs: var(--campfire-font-letter-spacing-025);
        --campfire-font-letter-spacing-body-lg: var(--campfire-font-letter-spacing-000);
        --campfire-font-letter-spacing-body-md: var(--campfire-font-letter-spacing-000);
        --campfire-font-letter-spacing-body-sm: var(--campfire-font-letter-spacing-025);
        --campfire-font-letter-spacing-body-xs: var(--campfire-font-letter-spacing-025);
        --campfire-font-line-height-display-lg: var(--campfire-font-size-128);
        --campfire-font-line-height-display-sm: var(--campfire-font-size-96);
        --campfire-font-line-height-headline-lg: var(--campfire-font-size-64);
        --campfire-font-line-height-headline-md: var(--campfire-font-size-32);
        --campfire-font-line-height-headline-sm: var(--campfire-font-size-24);
        --campfire-font-line-height-headline-xs: var(--campfire-font-size-16);
        --campfire-font-line-height-subheading-lg: var(--campfire-font-size-32);
        --campfire-font-line-height-subheading-md: var(--campfire-font-size-24);
        --campfire-font-line-height-subheading-sm: var(--campfire-font-size-24);
        --campfire-font-line-height-subheading-xs: var(--campfire-font-size-20);
        --campfire-font-line-height-body-lg: var(--campfire-font-size-24);
        --campfire-font-line-height-body-md: var(--campfire-font-size-24);
        --campfire-font-line-height-body-sm: var(--campfire-font-size-20);
        --campfire-font-line-height-body-xs: var(--campfire-font-size-16);
        --campfire-font-style-body-lg-bold-italic: var(--campfire-font-style-bold-italic);
        --campfire-font-style-body-lg-italic: var(--campfire-font-style-italic);
        --campfire-font-style-body-md-bold-italic: var(--campfire-font-style-bold-italic);
        --campfire-font-style-body-md-italic: var(--campfire-font-style-italic);
        --campfire-font-style-body-sm-bold-italic: var(--campfire-font-style-bold-italic);
        --campfire-font-style-body-sm-italic: var(--campfire-font-style-italic);
        --campfire-font-style-body-xs-bold-italic: var(--campfire-font-style-bold-italic);
        --campfire-font-style-body-xs-italic: var(--campfire-font-style-italic);
        /* --- component tokens --- */
        --campfire-component-alert-max-width: 569px;
        --campfire-component-datastackitem-content-width: 1200px;
        --campfire-component-footer-margin: var(--campfire-spacing-none);
        --campfire-component-headerwebapp-nav-max-width: 1432px;
        --campfire-component-headerwebapp-top-nav-max-width: 1464px;
        --campfire-component-headerwebapp-ibs-top-nav-max-width: 1200px;
        --campfire-component-heading-large-hero-spacing: var(--campfire-spacing-xs);
        --campfire-component-heading-small-hero-spacing: var(--campfire-spacing-2xs);
        --campfire-component-heading-page-spacing: var(--campfire-spacing-none);
        --campfire-component-heading-section-spacing: var(--campfire-spacing-2xs);
        --campfire-component-heading-subsection-spacing: var(--campfire-spacing-2xs);
        --campfire-component-modal-sm-width: 344px;
        --campfire-component-modal-md-width: 688px;
        --campfire-component-modal-max-width: 1162px;
        --campfire-component-toast-max-width: 420px;
        /* --- grid tokens --- */
        --campfire-grid-columns: var(--campfire-size-12);
        --campfire-grid-gutter: var(--campfire-spacing-md);
        --campfire-grid-margin: var(--campfire-viewport-margin);
        /* --- section tokens --- */
        --campfire-section-gap: var(--campfire-spacing-md);
        --campfire-section-margin: var(--campfire-size-16);
        --campfire-section-padding: var(--campfire-size-48);
        /* --- viewport tokens --- */
        --campfire-viewport-margin: var(--campfire-size-20);
        --campfire-viewport-content-max-width: 1400px;
        --campfire-viewport-content-narrow-width: 926px;
        --campfire-viewport-2-column-column-gap: 143px;
        --campfire-viewport-2-column-second-column: 332px;
    }
}

@media (max-width: 1920px) {
    :root {
        --campfire-grid-margin: 260px;
        --campfire-component-footer-text-max-width: 1162px;
    }
}

@media (max-width: 1280px) {
    :root {
        --campfire-component-alert-max-width: 503px;
        --campfire-component-footer-text-max-width: 1030px;
        --campfire-component-modal-max-width: 1030px;
        --campfire-viewport-2-column-column-gap: 129px;
        --campfire-viewport-2-column-second-column: 292px;
    }
}

@media (max-width: 1024px) {
    :root {
        --campfire-component-alert-max-width: 564px;
        --campfire-component-footer-text-max-width: var(--campfire-size-full);
        --campfire-component-modal-max-width: var(--campfire-size-full);
        --campfire-viewport-2-column-column-gap: 108px;
        --campfire-viewport-2-column-second-column: 228px;
    }
}
/* Mobile styles (max-width: 767px) */
@media (max-width: 767px) {
    :root {
        /* --- font tokens --- */
        --campfire-font-size-display-lg: var(--campfire-font-size-56);
        --campfire-font-size-display-sm: var(--campfire-font-size-40);
        --campfire-font-size-headline-lg: var(--campfire-font-size-32);
        --campfire-font-size-headline-md: var(--campfire-font-size-20);
        --campfire-font-size-headline-sm: var(--campfire-font-size-16);
        --campfire-font-size-headline-xs: var(--campfire-font-size-12);
        --campfire-font-size-subheading-lg: var(--campfire-font-size-20);
        --campfire-font-size-subheading-md: var(--campfire-font-size-16);
        --campfire-font-size-subheading-sm: var(--campfire-font-size-14);
        --campfire-font-size-subheading-xs: var(--campfire-font-size-14);
        --campfire-font-size-body-lg: var(--campfire-font-size-20);
        --campfire-font-size-body-md: var(--campfire-font-size-16);
        --campfire-font-size-body-sm: var(--campfire-font-size-14);
        --campfire-font-size-body-xs: var(--campfire-font-size-12);
        --campfire-font-weight-display-lg: var(--campfire-font-weight-regular);
        --campfire-font-weight-display-sm: var(--campfire-font-weight-regular);
        --campfire-font-weight-headline-lg: var(--campfire-font-weight-regular);
        --campfire-font-weight-headline-md: var(--campfire-font-weight-regular);
        --campfire-font-weight-headline-sm: var(--campfire-font-weight-regular);
        --campfire-font-weight-headline-xs: var(--campfire-font-weight-regular);
        --campfire-font-weight-subheading-lg: var(--campfire-font-weight-regular);
        --campfire-font-weight-subheading-md: var(--campfire-font-weight-regular);
        --campfire-font-weight-subheading-sm: var(--campfire-font-weight-regular);
        --campfire-font-weight-subheading-xs: var(--campfire-font-weight-regular);
        --campfire-font-weight-body-lg-regular: var(--campfire-font-weight-regular);
        --campfire-font-weight-body-lg-bold: var(--campfire-font-weight-bold);
        --campfire-font-weight-body-md-regular: var(--campfire-font-weight-regular);
        --campfire-font-weight-body-md-bold: var(--campfire-font-weight-bold);
        --campfire-font-weight-body-sm-regular: var(--campfire-font-weight-regular);
        --campfire-font-weight-body-sm-bold: var(--campfire-font-weight-bold);
        --campfire-font-weight-body-xs-regular: var(--campfire-font-weight-regular);
        --campfire-font-weight-body-xs-bold: var(--campfire-font-weight-bold);
        --campfire-font-family-display-lg: var(--campfire-font-family-default);
        --campfire-font-family-display-sm: var(--campfire-font-family-default);
        --campfire-font-family-headline-lg: var(--campfire-font-family-default);
        --campfire-font-family-headline-md: var(--campfire-font-family-default);
        --campfire-font-family-headline-sm: var(--campfire-font-family-default);
        --campfire-font-family-headline-xs: var(--campfire-font-family-default);
        --campfire-font-family-subheading-lg: var(--campfire-font-family-default);
        --campfire-font-family-subheading-md: var(--campfire-font-family-default);
        --campfire-font-family-subheading-sm: var(--campfire-font-family-default);
        --campfire-font-family-subheading-xs: var(--campfire-font-family-default);
        --campfire-font-family-body-lg: var(--campfire-font-family-default);
        --campfire-font-family-body-md: var(--campfire-font-family-default);
        --campfire-font-family-body-sm: var(--campfire-font-family-default);
        --campfire-font-family-body-xs: var(--campfire-font-family-default);
        --campfire-font-letter-spacing-display-lg: var(--campfire-font-letter-spacing--100);
        --campfire-font-letter-spacing-display-sm: var(--campfire-font-letter-spacing--075);
        --campfire-font-letter-spacing-headline-lg: var(--campfire-font-letter-spacing-050);
        --campfire-font-letter-spacing-headline-md: var(--campfire-font-letter-spacing-000);
        --campfire-font-letter-spacing-headline-sm: var(--campfire-font-letter-spacing-000);
        --campfire-font-letter-spacing-headline-xs: var(--campfire-font-letter-spacing-025);
        --campfire-font-letter-spacing-subheading-lg: var(--campfire-font-letter-spacing-000);
        --campfire-font-letter-spacing-subheading-md: var(--campfire-font-letter-spacing-025);
        --campfire-font-letter-spacing-subheading-sm: var(--campfire-font-letter-spacing-025);
        --campfire-font-letter-spacing-subheading-xs: var(--campfire-font-letter-spacing-025);
        --campfire-font-letter-spacing-body-lg: var(--campfire-font-letter-spacing-000);
        --campfire-font-letter-spacing-body-md: var(--campfire-font-letter-spacing-000);
        --campfire-font-letter-spacing-body-sm: var(--campfire-font-letter-spacing-025);
        --campfire-font-letter-spacing-body-xs: var(--campfire-font-letter-spacing-025);
        --campfire-font-line-height-display-lg: var(--campfire-font-size-64);
        --campfire-font-line-height-display-sm: var(--campfire-font-size-48);
        --campfire-font-line-height-headline-lg: var(--campfire-font-size-40);
        --campfire-font-line-height-headline-md: var(--campfire-font-size-24);
        --campfire-font-line-height-headline-sm: var(--campfire-font-size-24);
        --campfire-font-line-height-headline-xs: var(--campfire-font-size-16);
        --campfire-font-line-height-subheading-lg: var(--campfire-font-size-24);
        --campfire-font-line-height-subheading-md: var(--campfire-font-size-24);
        --campfire-font-line-height-subheading-sm: var(--campfire-font-size-24);
        --campfire-font-line-height-subheading-xs: var(--campfire-font-size-20);
        --campfire-font-line-height-body-lg: var(--campfire-font-size-24);
        --campfire-font-line-height-body-md: var(--campfire-font-size-24);
        --campfire-font-line-height-body-sm: var(--campfire-font-size-20);
        --campfire-font-line-height-body-xs: var(--campfire-font-size-16);
        --campfire-font-style-body-lg-bold-italic: var(--campfire-font-style-bold-italic);
        --campfire-font-style-body-lg-italic: var(--campfire-font-style-italic);
        --campfire-font-style-body-md-bold-italic: var(--campfire-font-style-bold-italic);
        --campfire-font-style-body-md-italic: var(--campfire-font-style-italic);
        --campfire-font-style-body-sm-bold-italic: var(--campfire-font-style-bold-italic);
        --campfire-font-style-body-sm-italic: var(--campfire-font-style-italic);
        --campfire-font-style-body-xs-bold-italic: var(--campfire-font-style-bold-italic);
        --campfire-font-style-body-xs-italic: var(--campfire-font-style-italic);
        /* --- component tokens --- */
        --campfire-component-alert-max-width: var(--campfire-size-full);
        --campfire-component-datastackitem-content-width: 180px;
        --campfire-component-footer-margin: var(--campfire-spacing-xs);
        --campfire-component-footer-text-max-width: var(--campfire-size-full);
        --campfire-component-headerwebapp-nav-max-width: var(--campfire-size-full);
        --campfire-component-headerwebapp-top-nav-max-width: var(--campfire-size-full);
        --campfire-component-headerwebapp-ibs-top-nav-max-width: var(--campfire-size-full);
        --campfire-component-heading-large-hero-spacing: var(--campfire-spacing-none);
        --campfire-component-heading-small-hero-spacing: var(--campfire-spacing-none);
        --campfire-component-heading-page-spacing: var(--campfire-spacing-none);
        --campfire-component-heading-section-spacing: var(--campfire-spacing-none);
        --campfire-component-heading-subsection-spacing: var(--campfire-spacing-none);
        --campfire-component-modal-md-width: 343px;
        --campfire-component-modal-max-width: var(--campfire-size-full);
        --campfire-component-toast-max-width: var(--campfire-size-full);
        /* --- grid tokens --- */
        --campfire-grid-columns: var(--campfire-size-1);
        --campfire-grid-gutter: var(--campfire-spacing-sm);
        --campfire-grid-margin: var(--campfire-size-16);
        /* --- section tokens --- */
        --campfire-section-gap: var(--campfire-spacing-md);
        --campfire-section-margin: var(--campfire-size-0);
        --campfire-section-padding: var(--campfire-size-48);
        /* --- viewport tokens --- */
        --campfire-viewport-margin: var(--campfire-size-0);
        --campfire-viewport-content-max-width: var(--campfire-size-full);
        --campfire-viewport-content-narrow-width: var(--campfire-size-full);
        --campfire-viewport-2-column-column-gap: var(--campfire-stack-gap) --campfire-viewport-2-column-second-column: var(--campfire-size-full);
    }
}

@font-face {
    font-family: "Bankwest-Sans";
    src: url('../fonts/BankwestSans/BankwestSans-Display-Regular.woff2') format('woff'), url('../fonts/BankwestSans/BankwestSans-Display-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

.display-lg {
    font-family: var(--campfire-font-family-display-lg);
    font-weight: var(--campfire-font-weight-display-lg);
    font-size: var(--campfire-font-size-display-lg);
    line-height: var(--campfire-font-line-height-display-lg);
    letter-spacing: var(--campfire-font-letter-spacing-display-lg);
}

.display-sm {
    font-family: var(--campfire-font-family-display-sm);
    font-weight: var(--campfire-font-weight-display-sm);
    font-size: var(--campfire-font-size-display-sm);
    line-height: var(--campfire-font-line-height-display-sm);
    letter-spacing: var(--campfire-font-letter-spacing-display-sm);
}

.headline-lg {
    font-family: var(--campfire-font-family-headline-lg);
    font-weight: var(--campfire-font-weight-headline-lg);
    font-size: var(--campfire-font-size-headline-lg);
    line-height: var(--campfire-font-line-height-headline-lg);
    letter-spacing: var(--campfire-font-letter-spacing-headline-lg);
}

.headline-md {
    font-family: var(--campfire-font-family-headline-md);
    font-weight: var(--campfire-font-weight-headline-md);
    font-size: var(--campfire-font-size-headline-md);
    line-height: var(--campfire-font-line-height-headline-md);
    letter-spacing: var(--campfire-font-letter-spacing-headline-md);
}

.headline-sm {
    font-family: var(--campfire-font-family-headline-sm);
    font-weight: var(--campfire-font-weight-headline-sm);
    font-size: var(--campfire-font-size-headline-sm);
    line-height: var(--campfire-font-line-height-headline-sm);
    letter-spacing: var(--campfire-font-letter-spacing-headline-sm);
}

.headline-xs {
    font-family: var(--campfire-font-family-headline-xs);
    font-weight: var(--campfire-font-weight-headline-xs);
    font-size: var(--campfire-font-size-headline-xs);
    line-height: var(--campfire-font-line-height-headline-xs);
    letter-spacing: var(--campfire-font-letter-spacing-headline-xs);
}

.subheading-lg {
    font-family: var(--campfire-font-family-subheading-lg);
    font-weight: var(--campfire-font-weight-subheading-lg);
    font-size: var(--campfire-font-size-subheading-lg);
    line-height: var(--campfire-font-line-height-subheading-lg);
    letter-spacing: var(--campfire-font-letter-spacing-subheading-lg);
}

.subheading-md {
    font-family: var(--campfire-font-family-subheading-md);
    font-weight: var(--campfire-font-weight-subheading-md);
    font-size: var(--campfire-font-size-subheading-md);
    line-height: var(--campfire-font-line-height-subheading-md);
    letter-spacing: var(--campfire-font-letter-spacing-subheading-md);
}

.subheading-sm {
    font-family: var(--campfire-font-family-subheading-sm);
    font-weight: var(--campfire-font-weight-subheading-sm);
    font-size: var(--campfire-font-size-subheading-sm);
    line-height: var(--campfire-font-line-height-subheading-sm);
    letter-spacing: var(--campfire-font-letter-spacing-subheading-sm);
}

.subheading-xs {
    font-family: var(--campfire-font-family-subheading-xs);
    font-weight: var(--campfire-font-weight-subheading-xs);
    font-size: var(--campfire-font-size-subheading-xs);
    line-height: var(--campfire-font-line-height-subheading-xs);
    letter-spacing: var(--campfire-font-letter-spacing-subheading-xs);
}

.body-lg-regular {
    font-family: var(--campfire-font-family-body-lg);
    font-weight: var(--campfire-font-weight-body-lg-regular);
    font-size: var(--campfire-font-size-body-lg);
    line-height: var(--campfire-font-line-height-body-lg);
    letter-spacing: var(--campfire-font-letter-spacing-body-lg);
}

.body-lg-regular-italic {
    font-family: var(--campfire-font-family-body-lg);
    font-weight: var(--campfire-font-weight-body-lg-regular);
    font-style: var(--campfire-font-style-body-lg-italic);
    font-size: var(--campfire-font-size-body-lg);
    line-height: var(--campfire-font-line-height-body-lg);
    letter-spacing: var(--campfire-font-letter-spacing-body-lg);
}

.body-lg-bold {
    font-family: var(--campfire-font-family-body-lg);
    font-weight: var(--campfire-font-weight-body-lg-bold);
    font-size: var(--campfire-font-size-body-lg);
    line-height: var(--campfire-font-line-height-body-lg);
    letter-spacing: var(--campfire-font-letter-spacing-body-lg);
}

.body-lg-bold-italic {
    font-family: var(--campfire-font-family-body-lg);
    font-weight: var(--campfire-font-weight-body-lg-bold);
    font-style: var(--campfire-font-style-body-lg-bold-italic);
    font-size: var(--campfire-font-size-body-lg);
    line-height: var(--campfire-font-line-height-body-lg);
    letter-spacing: var(--campfire-font-letter-spacing-body-lg);
}

.body-md-regular {
    font-family: var(--campfire-font-family-body-md);
    font-weight: var(--campfire-font-weight-body-md-regular);
    font-size: var(--campfire-font-size-body-md);
    line-height: var(--campfire-font-line-height-body-md);
    letter-spacing: var(--campfire-font-letter-spacing-body-md);
}

.body-md-regular-italic {
    font-family: var(--campfire-font-family-body-md);
    font-weight: var(--campfire-font-weight-body-md-regular);
    font-style: var(--campfire-font-style-body-md-italic);
    font-size: var(--campfire-font-size-body-md);
    line-height: var(--campfire-font-line-height-body-md);
    letter-spacing: var(--campfire-font-letter-spacing-body-md);
}

.body-md-bold {
    font-family: var(--campfire-font-family-body-md);
    font-weight: var(--campfire-font-weight-body-md-bold);
    font-size: var(--campfire-font-size-body-md);
    line-height: var(--campfire-font-line-height-body-md);
    letter-spacing: var(--campfire-font-letter-spacing-body-md);
}

.body-md-bold-italic {
    font-family: var(--campfire-font-family-body-md);
    font-weight: var(--campfire-font-weight-body-md-bold);
    font-style: var(--campfire-font-style-body-md-bold-italic);
    font-size: var(--campfire-font-size-body-md);
    line-height: var(--campfire-font-line-height-body-md);
    letter-spacing: var(--campfire-font-letter-spacing-body-md);
}

.body-sm-regular {
    font-family: var(--campfire-font-family-body-sm);
    font-weight: var(--campfire-font-weight-body-sm-regular);
    font-size: var(--campfire-font-size-body-sm);
    line-height: var(--campfire-font-line-height-body-sm);
    letter-spacing: var(--campfire-font-letter-spacing-body-sm);
}

.body-sm-regular-italic {
    font-family: var(--campfire-font-family-body-sm);
    font-weight: var(--campfire-font-weight-body-sm-regular);
    font-style: var(--campfire-font-style-body-sm-italic);
    font-size: var(--campfire-font-size-body-sm);
    line-height: var(--campfire-font-line-height-body-sm);
    letter-spacing: var(--campfire-font-letter-spacing-body-sm);
}

.body-sm-bold {
    font-family: var(--campfire-font-family-body-sm);
    font-weight: var(--campfire-font-weight-body-sm-bold);
    font-size: var(--campfire-font-size-body-sm);
    line-height: var(--campfire-font-line-height-body-sm);
    letter-spacing: var(--campfire-font-letter-spacing-body-sm);
}

.body-sm-bold-italic {
    font-family: var(--campfire-font-family-body-sm);
    font-weight: var(--campfire-font-weight-body-sm-bold);
    font-style: var(--campfire-font-style-body-sm-bold-italic);
    font-size: var(--campfire-font-size-body-sm);
    line-height: var(--campfire-font-line-height-body-sm);
    letter-spacing: var(--campfire-font-letter-spacing-body-sm);
}

.body-xs-regular {
    font-family: var(--campfire-font-family-body-xs);
    font-weight: var(--campfire-font-weight-body-xs-regular);
    font-size: var(--campfire-font-size-body-xs);
    line-height: var(--campfire-font-line-height-body-xs);
    letter-spacing: var(--campfire-font-letter-spacing-body-xs);
}

.body-xs-regular-italic {
    font-family: var(--campfire-font-family-body-xs);
    font-weight: var(--campfire-font-weight-body-xs-regular);
    font-style: var(--campfire-font-style-body-xs-italic);
    font-size: var(--campfire-font-size-body-xs);
    line-height: var(--campfire-font-line-height-body-xs);
    letter-spacing: var(--campfire-font-letter-spacing-body-xs);
}

.body-xs-bold {
    font-family: var(--campfire-font-family-body-xs);
    font-weight: var(--campfire-font-weight-body-xs-bold);
    font-size: var(--campfire-font-size-body-xs);
    line-height: var(--campfire-font-line-height-body-xs);
    letter-spacing: var(--campfire-font-letter-spacing-body-xs);
}

.body-xs-bold-italic {
    font-family: var(--campfire-font-family-body-xs);
    font-weight: var(--campfire-font-weight-body-xs-bold);
    font-style: var(--campfire-font-style-body-xs-bold-italic);
    font-size: var(--campfire-font-size-body-xs);
    line-height: var(--campfire-font-line-height-body-xs);
    letter-spacing: var(--campfire-font-letter-spacing-body-xs);
}

/* Icons */
:root {
    --campfire-icon-info: url("/content/shared/images/icons/icon-info.svg");
    --campfire-icon-status-validated: url("/content/shared/images/icons/icon-status-validated.svg");
    --campfire-icon-status-error: url("/content/shared/images/icons/icon-status-error.svg");
    --campfire-icon-info-large: url("/content/shared/images/icons/icon-info-large.svg");
    --campfire-icon-info-large-inverse: url("/content/shared/images/icons/icon-info-large-inverse.svg");
    --campfire-icon-check: url("/content/shared/images/icons/icon-check.svg");
    --campfire-icon-success-check: url("/content/shared/images/icons/icon-success-check.svg");
    --campfire-icon-status-error-large: url("/content/shared/images/icons/icon-status-error-large.svg");
    --campfire-icon-status-error-large-inverse: url("/content/shared/images/icons/icon-status-error-large-inverse.svg");
    --campfire-icon-help: url("/content/shared/images/icons/icon-help.svg");
    --campfire-icon-eye-closed: url("/content/shared/images/icons/icon-eye-closed.svg");
    --campfire-icon-eye: url("/content/shared/images/icons/icon-eye.svg");
    --campfire-icon-eye-closed-subtle: url("/content/shared/images/icons/icon-eye-closed-subtle.svg");
    --campfire-icon-eye-subtle: url("/content/shared/images/icons/icon-eye-subtle.svg");
    --campfire-icon-close: url("/content/shared/images/icons/icon-close.svg");
    --campfire-icon-radio: url("/content/shared/images/icons/icon-radio.svg");
    --campfire-icon-radio-checked-positive: url("/content/shared/images/icons/icon-radio-checked-positive.svg");
    --campfire-icon-upright: url("/content/shared/images/icons/icon-arrow-upright-24-black.svg");
    --campfire-icon-spinner: url("/content/shared/images/icons/icon-spinner.svg");
    --campfire-icon-security: url("/content/shared/images/icons/icon-security.svg");
    --campfire-icon-edit: url("/content/shared/images/icons/icon-edit.svg");
    --campfire-icon-external: url("/content/shared/images/icons/icon-external.svg");
    --campfire-icon-shield: url("/content/shared/images/icons/icon-shield.svg");
}

html {
    background-color: var(--campfire-themed-page-neutral-primary);
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    min-width: 320px;

    scrollbar-gutter: stable;
}

*, *:before, *:after {
    box-sizing: inherit;
    word-wrap: break-word;
}

img {
    display: block;
}

body {
    height: 100%;
    font-family: var(--campfire-font-family-body-md);
    font-weight: var(--campfire-font-weight-body-md-regular);
    font-size: var(--campfire-font-size-body-md);
    line-height: var(--campfire-font-line-height-body-md);
    letter-spacing: var(--campfire-font-letter-spacing-body-md);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

/******* COMPONENTS *******/

/**consent-banner*/

.consent-header {
    background-color: var(--campfire-color-neutral-10);
    padding: var(--campfire-spacing-sm) 0 0 0;
}

.consent-banner-background {
    background-color: white
}

.consent-header-buffer {
    width: 100%;
    margin-top: var(--campfire-spacing-sm);
}

.consent-text-field.subtle {
    max-width: var(--campfire-viewport-content-max-width);
    margin-left: var(--campfire-size-10);
    margin-top: var(--campfire-size-6);
    color: var(--campfire-themed-text-neutral-subtle);
}

.consent-title {
    color: var(--campfire-themed-text-neutral-primary);
    margin-left: var(--campfire-size-10);
}

/** Header */

.header {    
    width: 100%;
    position: fixed;
    z-index: 1000;
    background-color: var(--campfire-themed-icon-neutral-inverse);
}

.header__logo-container {
    margin: 0 auto;
    max-width: var(--campfire-viewport-content-max-width);
    padding: var(--campfire-spacing-sm) var(--campfire-viewport-margin);
}

.header__logo-container .button-container {
    display: flex;
    justify-content: space-between;
}

.header-buffer {
    width: 100%;
    height: calc(var(--campfire-size-40) + var(--campfire-spacing-sm) * 2);
}

.header-buffer-for-banner {
    width: 100%;
    height: calc(var(--campfire-size-40) + var(--campfire-spacing-sm) * 10);
}

/** Login container */
.login-container {
    margin: 0 auto;
    max-width: 477px;
}


@media (max-width: 767px) {
    .header__logo-container {
        padding: 0 var(--campfire-spacing-sm);
    }

    .login-container {
        padding: 0 var(--campfire-spacing-sm);
    }

    .create-pan__inner-container {
        padding: 0 var(--campfire-spacing-sm);
    }
}

/** Create Pan container*/
.create-pan__outer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.create-pan__inner-container {
    max-width: 477px;
    display: flex;
    flex-direction: column;

    gap: var(--campfire-spacing-lg);
    padding-top: var(--campfire-section-padding);
    padding-bottom: var(--campfire-section-padding);

    justify-content: flex-start;
    align-items: center;
}

.hint-layout {
    display: flex;
    gap: var(--campfire-spacing-2xs);
    align-items: center;
    max-width: 327px;
    max-height: 20px;
}

/** Button */

/* Base + Primary */

.bw-btn, .bw-btn.primary {
    position: relative;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--campfire-spacing-2xs);

    border: none;
    border-radius: var(--campfire-border-radius-sm);
    min-width: var(--campfire-size-96);
    min-height: var(--campfire-size-40);
    padding: 0 var(--campfire-spacing-md) 0 var(--campfire-spacing-md);

    background-color: var(--campfire-themed-frame-neutral-inverse);
    cursor: pointer;

    color: var(--campfire-themed-text-neutral-inverse);
}

    .bw-btn.primary:hover:not(:disabled) {
        background-color: var(--campfire-themed-frame-brand-primary-to-neutral);
        color: var(--campfire-themed-text-brand-neutral-to-primary);
    }

    .bw-btn.primary:active:not(:disabled) {
        background-color: var(--campfire-themed-frame-brand-primary-to-neutral);
        color: var(--campfire-themed-text-brand-neutral-to-primary);
    }

        .bw-btn.primary:active:not(:disabled)::before {
            content: "";

            position: absolute;

            display: block;
            top: 0;
            left: 0;

            border-radius: inherit;
            width: 100%;
            height: 100%;

            background-color: var(--campfire-themed-state-neutral-primary);
        }

    .bw-btn:focus-visible:not(:disabled) {
        outline: 2px solid var(--campfire-static-border-neutral-primary);
        outline-offset: 4px;
    }

    .bw-btn:disabled {
        background-color: var(--campfire-themed-state-neutral-subtle);
        color: var(--campfire-themed-state-neutral-primary);
        cursor: auto;
    }

/** Network button */
.network-btn:disabled {
    background-color: var(--campfire-color-brand-orange-70);
}
/* Secondary */
.bw-btn.secondary {
    background: var(--campfire-themed-frame-neutral-primary);
    color: var(--campfire-themed-text-neutral-primary);
    border: 1px solid;
    border-color: var(--campfire-themed-border-brand-neutral-to-primary);
    border-radius: var(--campfire-border-radius-sm);
}

    .bw-btn.secondary:hover:not(:disabled) {
        background-color: var(--campfire-themed-state-neutral-subtle);
    }

    .bw-btn.secondary:active:not(:disabled) {
        background-color: var(--campfire-themed-state-neutral-primary);
    }

/* Tertiary */
.bw-btn.tertiary {
    background: none;
    border-radius: var(--campfire-border-radius-2xs);
    padding: 0 var(--campfire-spacing-2xs);
    color: var(--campfire-themed-text-neutral-primary);
    text-decoration: underline;
}

.bw-btn.tertiary:hover:not(:disabled) {
    text-decoration: none;
    background-color: var(--campfire-themed-state-neutral-subtle);
}

.bw-btn.tertiary:active:not(:disabled) {
    text-decoration: underline;
    background-color: var(--campfire-themed-state-neutral-primary);
}

/* ButtonLarge */
.bw-btn.lg, .bw-btn.lg.primary {
    gap: var(--campfire-spacing-md);
    padding: var(--campfire-spacing-xs) var(--campfire-spacing-xs) var(--campfire-spacing-xs) var(--campfire-spacing-xs);
    border-radius: var(--campfire-border-radius-full);
    justify-content: flex-start;
}

    .bw-btn.lg:active:not(:disabled) {
        justify-content: flex-end;
    }

    .bw-btn.lg .bw-btn__label {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .bw-btn.lg .bw-btn__icon {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding: var(--campfire-spacing-xs);
        border-radius: var(--campfire-border-radius-full);
        width: var(--campfire-size-48);
        height: var(--campfire-size-48);
    }

    .bw-btn.lg:active:not(:disabled) .bw-btn__icon, .bw-btn--lg:hover:not(:disabled) .bw-btn__icon {
        transform: rotate(45deg);
    }

.bw-btn.lg.brand:disabled {
    background-color: var(--campfire-themed-state-neutral-subtle);
    color: var(--campfire-static-state-neutral-primary);
}

    .bw-btn.lg.brand:disabled .bw-btn__icon {
        background-color: var(--campfire-themed-state-neutral-subtle);
    }

/* ButtonLarge Brand */
.bw-btn.lg.brand {
    width: 218px;
    background-color: var(--campfire-color-brand-orange-50);
    color: var(--campfire-static-text-neutral-primary);
}

    .bw-btn.lg:hover:not(:disabled) .bw-btn__icon, .bw-btn--lg:hover:not(:disabled) .bw-btn__icon {
        transform: rotate(45deg);
    }

    .bw-btn.lg.brand .bw-btn__icon {
        background-color: var(--campfire-static-frame-neutral-inverse);
    }

/** Icon Button */

.icon-btn {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: var(--campfire-border-radius-sm);
    text-align: inherit;
    background: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    width: var(--campfire-size-20);
    height: var(--campfire-size-20);
    min-width: var(--campfire-size-20);
    background-size: cover;
}

.icon-btn.help {
    background-image: var(--campfire-icon-help);
}

.icon-btn.eye-closed {
    background-image: var(--campfire-icon-eye-closed);
}

.icon-btn.eye {
    background-image: var(--campfire-icon-eye);
}

.icon-btn.eye-closed-subtle {
    background-image: var(--campfire-icon-eye-closed-subtle);
}

.icon-btn.eye-subtle {
    background-image: var(--campfire-icon-eye-subtle);
}

.icon-btn.security {
    background-image: var(--campfire-icon-security);
}

.icon-btn.edit {
    background-image: var(--campfire-icon-edit);
}

.icon-btn.external {
    background-image: var(--campfire-icon-external);
}

.icon-btn.shield {
background-image: var(--campfire-icon-shield);
margin-top: 2px;
}

.icon-btn.hide {
    display: none;
}

/** Override the default eye from MS edge */
::-ms-reveal {
    display: none;
}

.icon-btn.close {
    background-image: var(--campfire-icon-close);
}

    .icon-btn.close:hover:not(:disabled) {
        background-color: var(--campfire-themed-state-neutral-subtle);
    }

    .icon-btn.close:active:not(:disabled) {
        background-color: var(--campfire-themed-state-neutral-primary);
    }

    .icon-btn.close:focus-visible:not(:disabled) {
        outline: 2px solid var(--campfire-static-border-neutral-primary);
        outline-offset: 4px;
    }

    /* Hide clear button for input fields when not in use */
    .password-container:not(:hover, :active, :focus, :focus-visible, :focus-within)
      > .icon-btn.close:not(:hover, :active, :focus, :focus-visible, :focus-within) {
        background-image: none;
    }

.icon-btn.error
{
    background-image: var(--campfire-icon-status-error);
}

/* Link Stack */

.link-stack {
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-radius: var(--campfire-border-radius-sm);
    border: none;

    padding: var(--campfire-spacing-md);
    gap: var(--campfire-spacing-sm);
}

.link-stack.subtle {
    background-color: var(--campfire-themed-frame-neutral-subtle);
}

    .link-stack.subtle:hover:not(disabled) {
        background-color: var(--campfire-themed-state-neutral-subtle);
    }

    .link-stack.subtle:active:not(disabled) {
        background-color: var(--campfire-themed-state-neutral-primary);
    }

    .link-stack.subtle:focus-visible:not(disabled) {
        outline: 2px solid var(--campfire-static-border-neutral-primary);
        outline-offset: 4px;
    }

.link-stack.subtle .icon-upright {
    display: flex;
    align-items: center;
    justify-content: center;

    background-image: var(--campfire-icon-upright);
    background-color: var(--campfire-static-frame-accent-primary);
    background-repeat: no-repeat;
    background-position: center;

    border-radius: var(--campfire-border-radius-full);
    width: var(--campfire-size-40);
    height: var(--campfire-size-40);
}

/** Text Field */

/* Base */

.text-field {
    display: flex;
    gap: var(--campfire-spacing-sm);
    border-radius: var(--campfire-border-radius-sm);
}

    .text-field:not(:first-of-type) {
        margin-top: var(--campfire-size-1);
    }

.text-field__text-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--campfire-spacing-2xs);
}

.text-field__input, .text-field__input:focus {
    background: none;
    border: none;
    outline: none;
    padding: 0;
    color: var(--campfire-themed-text-neutral-primary);
}

.text-field__actions {
    display: flex;
    align-items: center;
    gap: var(--campfire-spacing-xs);
}

/* Basic */
.text-field.basic {
    position: relative;
    flex-direction: column;
    gap: var(--campfire-spacing-xs);
    margin: 0;
}

.text-field.basic .text-field__top-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: var(--campfire-size-24);
}

.text-field.basic .text-field__text-container {
    width: 100%;
    height: var(--campfire-size-48);
    padding: var(--campfire-spacing-2xs) var(--campfire-spacing-sm);
    border-radius: var(--campfire-border-radius-2xs);
    outline: var(--campfire-stroke-weight-xs) solid var(--campfire-themed-border-neutral-primary);
    gap: var(--campfire-spacing-xs);
    flex-grow: 0;
    justify-content: center;
}

    .text-field.basic .text-field__text-container:focus-within {
        outline-width: var(--campfire-stroke-weight-sm);
    }

    .text-field.basic .text-field__input-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: var(--campfire-spacing-2xs)
    }

/* Subtle */

.text-field.subtle {
    background-color: var(--campfire-themed-frame-neutral-subtle);
    padding: var(--campfire-spacing-md);
    border: 1px solid #0000;
}

    .text-field.subtle .text-field__top-label {
        color: var(--campfire-themed-text-neutral-subtle);
    }

    .text-field.subtle:has(.text-field__input:focus):not(.show-errors) {
        border: 1px solid var(--campfire-themed-border-neutral-primary);
    }

    .text-field.subtle.show-errors {
        border: var(--campfire-stroke-weight-xs) solid var(--campfire-themed-border-negative-primary);
    }


/** Action Bar */
.action-bar {
    display: flex;

    justify-content: space-between;
    align-items: center;
}

.action-bar.right-aligned {
    justify-content: flex-end;
}

.action-bar.left-aligned {
    justify-content: flex-start;
}

/** Checkbox field */
input[type=checkbox] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    outline: none;
    content: none;
}

.checkbox-field {
    display: flex;
    gap: var(--campfire-spacing-sm);
}

.checkbox-pan {
    width: var(--campfire-size-24);
    height: var(--campfire-size-24);
    vertical-align: top;
    border-radius: 4px;
    background-image: url("/content/shared/images/icons/icon-checkbox.svg");
    background-size: contain;
    outline: none;
}

    .checkbox-pan:checked:after {
        width: var(--campfire-size-24);
        height: var(--campfire-size-24);
        vertical-align: top;
        outline: none;
        content: url("/content/shared/images/icons/icon-checkbox-selected.svg");
    }

    .checkbox-pan:focus-visible {
        outline: -webkit-focus-ring-color auto 1px;
    }

/** PSA Card */
.psa-card {
    position: relative;
    border: var(--campfire-stroke-weight-xs) solid;
    border-radius: var(--campfire-border-radius-sm);
    padding: var(--campfire-spacing-sm);
}
    .psa-card .psa-content {
        gap: var(--campfire-spacing-sm)
    }

.psa-icon {
    width: var(--campfire-size-28);
    height: var(--campfire-size-28);
    display: inline-block;
    background-repeat: no-repeat;
}

.psa-type-bw, .psa-type-info, .psa-type-spanner {
    border-color: var(--campfire-themed-border-neutral-primary);
}
    .psa-type-bw .psa-icon,
    .psa-type-info .psa-icon,
    .psa-type-spanner .psa-icon {
        background: var(--campfire-icon-info-large);
    }

.psa-type-success {
    border-color: var(--campfire-themed-border-positive-primary);
}
    .psa-type-success .psa-icon {
        background: var(--campfire-icon-check);
    }

.psa-type-warn {
    border-color: var(--campfire-themed-border-negative-primary);
}
    .psa-type-warn .psa-icon {
        background: var(--campfire-icon-status-error-large);
    }

/** Accordion */

details[open] {
    padding-bottom: var(--campfire-spacing-sm);
}

details summary::-webkit-details-marker {
  display:none;
}

summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;

    padding: var(--campfire-spacing-sm) 0;
    gap: var(--campfire-spacing-sm);
    cursor: pointer;
}

summary::after {
    content: '';
    background: url('../images/icons/icon-chevron-down.svg');

    height: 20px;
    width: 20px;
    background-size: cover;
}

details[open] > summary::after {
    transform: rotate(180deg);
}

/** List */
ul {
    margin-top: 1rem;
    padding-left: var(--campfire-spacing-md);
}

/** Link */
a, a:visited {
    text-decoration: underline;
    color: var(--campfire-themed-text-neutral-primary);
}

/** Alert */
.bw-alert {
    display: flex;
    gap: var(--campfire-spacing-sm);

    padding: var(--campfire-spacing-sm);
    border-radius: var(--campfire-border-radius-sm);
    border-width: var(--campfire-stroke-weight-xs);
    border-style: solid;
}

.bw-alert.info {
    border-color: var(--campfire-themed-border-neutral-primary);
}

.bw-alert.positive {
    border-color: var(--campfire-themed-border-positive-primary);
}

.bw-alert.negative {
    border-color: var(--campfire-themed-border-negative-primary);
}

.bw-alert__icon {
    display: inline-block;
}

.bw-alert__heading {
    color: var(--campfire-themed-text-neutral-primary);
}

.bw-alert__content {
    color: var(--campfire-themed-text-neutral-subtle);
}

.bw-alert__content.alert__no-heading {
    color: var(--campfire-themed-text-neutral-primary);
    align-content: center
}

footer {
    display: block;
    text-align: left;
    width: 100%;
    max-width: var(--campfire-viewport-content-max-width);
    align-content: center;
    background-color: var(--campfire-themed-frame-neutral-subtle);
    margin-top: auto;
    margin-bottom: var(--campfire-spacing-xs);
    margin-left: var(--campfire-spacing-xs);
    margin-right: var(--campfire-spacing-xs);
    border-radius: var(--campfire-border-radius-md);
    min-height: var(--campfire-size-112);
}

    footer p.copyright-bankwest {
        align-content: center;
        margin: auto;
        color: var(--campfire-themed-text-neutral-subtle);
        font-family: var(--campfire-font-family-body-xs);
        font-weight: var(--campfire-font-weight-body-xs-regular);
        font-size: var(--campfire-font-size-body-xs);
        line-height: var(--campfire-font-line-height-body-xs);
        letter-spacing: var(--campfire-font-letter-spacing-body-xs);
        padding: var(--campfire-spacing-sm) var(--campfire-spacing-2xl);
    }

.footer-container:has(footer) {
    display: flex;
    position: sticky;
    top: 100vh;
    padding: var(--campfire-section-padding) var(--campfire-section-margin);
    padding-bottom: var(--campfire-spacing-xs);
    width: 100%;
    justify-content: center;
}

@media (max-width: 767px) {
    .bw-alert__icon {
        width: var(--campfire-size-24);
        height: var(--campfire-size-24);
        min-width: var(--campfire-size-24);
   }

   .bw-alert.info .bw-alert__icon {
        background-image: var(--campfire-icon-info);
   }

   .bw-alert.positive .bw-alert__icon {
        background-image: var(--campfire-icon-status-validated);
   }

   .bw-alert.negative .bw-alert__icon {
        background-image: var(--campfire-icon-status-error);
   }
}

@media (min-width: 768px) {
    .bw-alert__icon {
        width: var(--campfire-size-28);
        height: var(--campfire-size-28);
        min-width: var(--campfire-size-28);
    }

   .bw-alert.info .bw-alert__icon {
        background-image: var(--campfire-icon-info-large);
   }

   .bw-alert.positive .bw-alert__icon {
        background-image: var(--campfire-icon-check);
   }

   .bw-alert.negative .bw-alert__icon {
        background-image: var(--campfire-icon-status-error-large);
   }
}

/** Loading Spinner */

.loading-spinner:before {
    content: var(--campfire-icon-spinner);
    vertical-align: middle;
    width: var(--campfire-size-20);
    height: var(--campfire-size-20);
    animation: spin 1500ms linear none infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/** Loader Animation */

.loader-wrapper {
    display: block;
    height: var(--campfire-size-96);
    width: var(--campfire-size-96);
    transform: scale(0.5);
}

.loader-wrapper .dot {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: var(--campfire-static-icon-brand-primary);
    opacity: 0;
    transform: translate(0, 0);
    animation: 1000ms infinite forwards jump;
}

.loader-wrapper .dot:nth-of-type(2) {
    left: var(--campfire-size-32);
    animation-delay: 100ms;
}

.loader-wrapper .dot:nth-of-type(3) {
    left: var(--campfire-size-64);
    animation-delay: 200ms;
}

@keyframes jump {
    0% {
        height: 30px;
        opacity: 1;
        transform: translate(0, -8px);
        animation-timing-function: cubic-bezier(0.4, 0, 1, 0.4);
    }
    6% {
        height: var(--campfire-size-48);
        opacity: 1;
        transform: translate(0, -24px);
        animation-timing-function: cubic-bezier(0, 0.4, 0, 1);
    }
    40% {
        height: 30px;
        opacity: 1;
        transform: translate(0, -58px);
        animation-timing-function: cubic-bezier(0.75, 0.1, 0.75, 0.1);
    }
    94% {
        height: var(--campfire-size-48);
        opacity: 1;
        transform: translate(0, -8px);
        animation-timing-function: cubic-bezier(0, 0.4, 0, 1);
    }
    100% {
        opacity: 1;
        transform: translate(0, -4px);
    }
}

/** Modal */
::backdrop {
    background-color: var(--campfire-color-opacity-dark-70);
    /*transition: opacity .4s cubic-bezier(.25,.8,.25,1);*/
}

dialog {
    background-color: var(--campfire-themed-page-neutral-primary);
    padding: var(--campfire-spacing-md);
    border-radius: var(--campfire-border-radius-sm);
    border: none;
    width: var(--campfire-component-modal-md-width);
    max-width: var(--campfire-component-modal-max-width);
}

    dialog .dialog-content {
        display: flex;
        flex-direction: column;
        gap: var(--campfire-spacing-sm);
    }

.loader-modal {
    visibility: hidden;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--campfire-color-opacity-dark-70);
    color: var(--campfire-color-opacity-dark-70);
    padding: 0 var(--campfire-spacing-md) 0 var(--campfire-spacing-md);
}
    .loader-dialog {
        position: relative;
        display: flex;
        gap: 0;
        flex-direction: column;
        align-items: center;
        background-color: var(--campfire-themed-page-neutral-primary);
        padding: var(--campfire-spacing-xs) var(--campfire-spacing-md) var(--campfire-spacing-lg) var(--campfire-spacing-md);
        border-radius: var(--campfire-border-radius-sm);
        margin: 0 auto;
        top: 35%;
        border: none;
        max-width: var(--campfire-component-modal-sm-width);
    }

.bw-modal {
    display: flex;
    flex-direction: column;
    gap: var(--campfire-spacing-sm);
    background-color: var(--campfire-themed-page-neutral-primary);
    padding: var(--campfire-spacing-md);
    border-radius: var(--campfire-border-radius-sm);
    border: none;
}


/** ContentStackItem */
.content-stack-item {
    display: flex;
    flex-direction: row;
    padding-top: var(--campfire-spacing-2xs);
    padding-bottom: var(--campfire-spacing-2xs);
    gap: var(--campfire-spacing-sm);
}

/** list icon */
.list-icon {
    background-image: var(--campfire-icon-radio);
    width: var(--campfire-size-24);
    height: var(--campfire-size-24);
    min-width: var(--campfire-size-24);
    background-size: cover;
}

.list-icon.passed {
    background-image: var(--campfire-icon-radio-checked-positive);
}

/** Password */
.password-container {
    display: flex;
    align-items: center;
    min-height: var(--campfire-size-48);
    padding-top: var(--campfire-spacing-2xs);
    padding-bottom: var(--campfire-spacing-2xs);
    padding-left: var(--campfire-spacing-sm);
    padding-right: var(--campfire-spacing-sm);
    gap: var(--campfire-spacing-2xs);
    border: var(--campfire-stroke-weight-xs) solid var(--campfire-themed-border-neutral-subtle);
    border-radius: var(--campfire-border-radius-2xs)
}

    .password-container:hover:not(:focus-within) {
        background-color: var(--campfire-themed-state-neutral-subtle);
    }

    .password-container:focus-within {
        border: var(--campfire-stroke-weight-sm) solid var(--campfire-themed-border-neutral-primary);
        padding-left: calc(var(--campfire-spacing-sm) - (var(--campfire-stroke-weight-sm) - var(--campfire-stroke-weight-xs)));
        padding-right: calc(var(--campfire-spacing-sm) - (var(--campfire-stroke-weight-sm) - var(--campfire-stroke-weight-xs)));
    }
        .password-container:focus-within.show-errors {
            border: var(--campfire-stroke-weight-sm) solid var(--campfire-themed-border-negative-primary);
        }

    .password-container:hover:not(:focus-within) .eye, .password-container:hover:not(:focus-within) .eye-closed {
        color: var(--campfire-themed-icon-neutral-primary);
    }

    .password-container input {
        flex-grow: 1;
    }

.form-text-error {
    color: var( --campfire-static-text-negative-primary);
}

div.show-errors {
    border-color: var(--campfire-themed-border-negative-primary);
}