@font-face {
  font-family: 'TT Norms';
  src: url(/fonts/TTNorms-Regular.woff2) format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'TT Norms';
  src: url(/fonts/TTNorms-Medium.woff2) format('woff2');
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0px;
  font-display: swap;
}
@font-face {
  font-family: 'TT Norms';
  src: url(/fonts/TTNorms-Bold.woff2) format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Wells Fargo Sans';
  src: url(/fonts/WellsFargoSans_Rg.ttf) format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Variables for font customizations */
  --font: 'TT Norms', sans-serif;
  --headingFont: 'TT Norms', sans-serif;
  --buttonFont: 'TT Norms', sans-serif;
  /* ----- */

  --headerHeight: 60px;
  --appBodyPadding: var(--headerHeight);
  --footerHeight: 100px;
  --pbaHeight: 56px;

  --marginBase: 8px;
  --paddingBase: 8px;
  --screenPaddingX: calc(var(--paddingBase) * 3);

  /* Adaptive safe area variable is set dynamically on Android 15+ only */
  /* Use adaptive safe area with fallback to env() */
  --screenPaddingTop: max(
    var(--screenPaddingX),
    var(--adaptive-safe-area-top, env(safe-area-inset-top))
  );

  --screenPaddingBottom: max(
    var(--screenPaddingX),
    var(--adaptive-safe-area-bottom, env(safe-area-inset-bottom))
  );

  --screenPaddingValues: var(--screenPaddingTop) var(--screenPaddingX)
    var(--screenPaddingBottom);

  --containerBorderRadius: 12px;
  --defaultBorderRadius: 8px;
  --smallBorderRadius: 8px;
  --miniBorderRadius: 4px;

  --primary: #21253d;
  --primaryDesaturated: #4d5373;
  --darkModeBg: var(--gray-1000);
  --darkModeBgRgbValues: var(--gray-1000-rgb-values);

  --white: #ffffff;
  --gray-50: #fafbff;
  --gray-100: #f4f6fa;
  --gray-200: #edeff5;
  --gray-300: #d8dae5;
  --gray-400: #c1c4d6;
  --gray-500: #8d93b2;
  --gray-600: #696f8c;
  --gray-700: var(--primaryDesaturated);
  --gray-800: #33374d;
  --gray-900: var(--primary);
  --gray-950: #181c30;
  --gray-1000: #0b0e1e;
  --gray-1000-rgb-values: 11, 14, 30;
  --black: black;

  --info-50: #f3f6ff;
  --info-100: #ebf0ff;
  --info-200: #d6e0ff;
  --info-300: #9db5ff;
  --info: #3366ff;
  --info-500: #2952cc;
  --info-600: #1f3d99;
  --info-700: #152d77;
  --info-800: #0c1b47;

  --success-50: #f5fbf8;
  --success-100: #eef8f4;
  --success-200: #dcf2ea;
  --success-300: #a3e6cd;
  --success: #52bd94;
  --success-500: #429777;
  --success-600: #317159;
  --success-700: #124633;
  --success-800: #0d281e;

  --warn-50: #fffaf1;
  --warn-100: #ffefd2;
  --warn-200: #ffdfa6;
  --warn-300: #ffd079;
  --warn: #ffb020;
  --warn-500: #976811;
  --warn-600: #66460d;
  --warn-700: #4f370e;
  --warn-800: #2b1e08;

  --error-50: #fdf4f4;
  --error-100: #f9dada;
  --error-200: #f4b6b6;
  --error-300: #ee9191;
  --error: #d14343;
  --error-500: #a73636;
  --error-600: #7d2828;
  --error-700: #611c1c;
  --error-800: #3c1010;

  --darkModeTextHigh: var(--white);
  --darkModeTextMedium: var(--gray-300);
  --darkModeTextLow: var(--gray-500);
  --darkModePlaceholderColor: var(--gray-500);
  --lightModePlaceholderColor: var(--gray-600);

  --iconToneOne: var(--gray-300);
  --iconToneTwo: var(--gray-700);

  --ease-in-out-back: cubic-bezier(0.68, -0.6, 0, 1.5);
  --button-hover: all 100ms cubic-bezier(0.46, 0.03, 0.52, 0.96);

  /* a11y focus indicator */
  --focus-indicator-border-radius: 10px;
  --focus-indicator-outline-size: 2px;
  --focus-indicator-outline-offset: 2px;
  --focus-indicator-outline-space-per-side: calc(
    var(--focus-indicator-outline-size) + var(--focus-indicator-outline-offset)
  );
  --focus-indicator-outline-color: var(--gray-900);
  --darkMode-focus-indicator-outline-color: var(--darkModeTextHigh);
  --btn-min-height: 56px;

  /* Layout variables */
  --max-width: 600px;
}

* {
  font-family: var(--font);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 500;
}

strong {
  font-weight: 700;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

html {
  font-size: 10px;
  -webkit-tap-highlight-color: transparent;
  height: 100vh;
}

body {
  font-size: 1.6rem;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  font-feature-settings: 'kern';
  user-select: none;
  height: 100%;
  color: var(--gray-900);
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
legend {
  font-family: var(--headingFont);
  color: var(--gray-900);
  font-weight: 500;
  font-style: normal;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark legend {
  color: var(--darkModeTextHigh);
}

h1:focus,
h2:focus,
h3:focus,
h4:focus,
h5:focus,
h6:focus {
  outline: none;
}

fieldset {
  border: none;
}

/* Headers */
.h-900 {
  font-size: 3.2rem;
  line-height: 4rem;
}
.h-800 {
  font-size: 2.4rem;
  line-height: 3.2rem;
}

h2,
.h-700 {
  font-size: 2rem;
  line-height: 2.4rem;
}

h3,
.h-600 {
  font-size: 1.8rem;
  line-height: 2.4rem;
}

.h-500,
legend {
  font-size: 1.6rem;
  line-height: 2.4rem;
}

.h-400 {
  font-size: 1.4rem;
  line-height: 2.4rem;
}

.h-300 {
  font-size: 1.2rem;
  line-height: 1.6rem;
}

.h-200 {
  font-size: 1.2rem;
  line-height: 1.6rem;
  text-transform: uppercase;
}

.h-100 {
  font-size: 1rem;
  line-height: 1.6rem;
  text-transform: uppercase;
}

p,
.paragraph {
  font-family: var(--font);
  color: var(--gray-600);
  font-style: normal;
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin-top: 8px;
}

.dark p,
.dark .paragraph {
  color: var(--gray-500);
}

/* Paragraphs */
.p-400 {
  font-size: 1.8rem;
}

.p-300 {
  font-size: 1.6rem;
}

.p-200 {
  font-size: 1.4rem;
  line-height: 2rem;
}

.p-100 {
  font-size: 1.2rem;
  line-height: 1.6rem;
}

/* do not group these placeholder rules */
/* Microsoft Edge */
::-ms-input-placeholder {
  color: var(--gray-800);
}
/* modern browsers */
::placeholder {
  color: var(--lightModePlaceholderColor);
  opacity: 1; /* Firefox needs this */
}

.content-only {
  border: none;
  background-color: inherit;
}

.touchable {
  transition: 100ms linear opacity;
}

a,
.link {
  cursor: pointer;
  display: block;
  font-size: 1.6rem;
  margin-top: 16px;
  text-align: center;
  line-height: 3.2rem;
  transition: opacity 250ms linear;
}

@media (max-height: 639px) {
  a,
  .link {
    font-size: 1.4rem;
  }
}

a:hover,
a:active,
.link:hover,
.link:active {
  opacity: 0.7;
}

button:hover {
  cursor: pointer;
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dark .ul-container {
  background-color: var(--white) !important;
}

ul {
  list-style-type: none;
}

button:focus-visible {
  border-radius: var(--focus-indicator-border-radius);
  outline: var(--focus-indicator-outline-size) solid
    var(--focus-indicator-outline-color);
  outline-offset: var(--focus-indicator-outline-offset);
  transform: translateZ(0);
}

.dark button:focus-visible {
  outline: var(--focus-indicator-outline-size) solid
    var(--darkMode-focus-indicator-outline-color);
}

.focus-visible-width:focus-visible {
  transform: translateZ(0);
  margin-left: var(--focus-indicator-outline-space-per-side);
  margin-right: var(--focus-indicator-outline-space-per-side);
  width: calc(
    100% - var(--focus-indicator-outline-space-per-side) * 2
  ) !important;
}

.link-focus-visible:focus-visible {
  border-radius: var(--focus-indicator-border-radius);
  outline: var(--focus-indicator-outline-size) solid
    var(--focus-indicator-outline-color);
}

.dark .link-focus-visible:focus-visible {
  outline: var(--focus-indicator-outline-size) solid
    var(--darkMode-focus-indicator-outline-color);
}

.action-list .btn {
  margin-top: calc(var(--marginBase) * 2);
}

.action-list .btn.disabled {
  pointer-events: none;
}

/* Helps prevent uncessarcy selection of content */
button,
.btn,
a,
.link {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* Removes Chrome and IE 'X' icon in inputs with type="search" */
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* NEW STYLES HELPERS */
.fw-medium {
  font-weight: 500;
}

/* END NEW STYLES */