@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap");.transaction-row {
  border-bottom: 1px solid #dee2e6;
  transition: background-color 0.2s;
}

.transaction-row.expandable {
  cursor: pointer;
}

.transaction-row.expandable:hover {
  background-color: #f8f9fa;
}

.transaction-row td {
  padding: 0.75rem;
  vertical-align: middle;
}

.transaction-date {
  width: 100px;
  font-weight: 500;
}

.transaction-description {
  position: relative;
  padding-left: 2rem !important;
}

.expand-icon {
  position: absolute;
  left: 0.75rem;
  display: inline-block;
  transition: transform 0.2s;
  font-size: 0.8rem;
}

.expand-icon.expanded {
  transform: rotate(90deg);
}

.amount-cell {
  text-align: right;
  width: 120px;
  font-weight: 500;
}

.amount-cell.debit {
  color: #dc3545;
}

.amount-cell.credit {
  color: #28a745;
}

.amount-cell.balance {
  font-weight: 600;
  color: #333;
}

.line-items-header {
  background-color: #e9ecef;
  font-size: 0.85rem;
}

.line-items-header th {
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  color: #495057;
}

.line-item-row {
  background-color: #f8f9fa;
  font-size: 0.9rem;
}

.line-item-row td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e9ecef;
}

.text-right {
  text-align: right;
}

.document-row {
  background-color: #f8f9fa;
}

.document-row td {
  padding: 0.75rem;
}

.document-link {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
}

.document-link:hover {
  text-decoration: underline;
}

.button-as-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
  font-family: inherit;
  font-size: inherit;
}

.button-as-link:hover {
  text-decoration: underline;
}

.button-as-link:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.line-items-footer {
  background-color: #e9ecef;
  height: 3px;
}

.line-items-footer td {
  padding: 0;
}.account-activity-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

.activity-summary-section {
  flex: 0 0 auto;
}

.enhanced-table-container {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.activity-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border: 1px solid #dee2e6;
  font-size: 0.95rem;
}

.activity-table thead {
  background-color: #f8f9fa;
}

.activity-table .main-header th {
  padding: 0.75rem;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #dee2e6;
  text-align: left;
}

.activity-table .main-header th:first-child {
  width: 100px;
}

.activity-table .main-header th.text-right,
.activity-table td.text-right {
  text-align: right;
}

.activity-table tbody tr {
  transition: background-color 0.2s;
}

.activity-table tbody tr:hover {
  background-color: #f8f9fa;
}

.loading-cell {
  text-align: center;
  padding: 2rem;
  color: #6c757d;
}

/* Responsive layout for larger screens */
@media (min-width: 1200px) {
  .account-activity-container {
    flex-direction: row;
    align-items: flex-start;
  }

  .activity-summary-section {
    flex: 0 0 350px;
    margin-right: 1.5rem;
    position: sticky;
    top: 1rem;
  }

  .account-activity-container > .card {
    flex: 1;
    min-width: 0;
  }
}

/* Override default card styles to match V2 */
.account-activity-container .card {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  border-radius: 0.25rem;
}

.account-activity-container .card-header {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  padding: 0.75rem 1rem;
}

.account-activity-container .card-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}.button-as-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
  font-family: inherit;
  font-size: inherit;
  color: #007bff;
  text-decoration: none;
}

.button-as-link:hover {
  text-decoration: underline;
}

.button-as-link:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.button-as-link.link {
  font-weight: 500;
}
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-muniSteelBlue: #4d7e9b;
  --color-muniDarkGray: #464646;
  --color-muniEcrue: #cbb481;
  --color-muniMorningBlue: #8c998e;
  --color-boldBlue-50: #f3f7ff;
  --color-boldBlue-100: #e7f0ff;
  --color-boldBlue-500: #0d6efd;
  --color-boldBlue-600: #2563eb;
  --color-coolGray-50: #f9fafb;
  --color-coolGray-100: #f3f4f6;
  --color-coolGray-200: #e5e7eb;
  --color-coolGray-300: #d1d5db;
  --color-coolGray-400: #9ca3af;
  --color-coolGray-500: #6b7280;
  --color-coolGray-600: #4b5563;
  --color-coolGray-700: #374151;
  --color-coolGray-800: #1f2937;
  --color-coolGray-900: #111827;
  --color-rose-100: #ffe4e6;
  --color-rose-600: #e11d48;
  --color-pink-600: #db2777;
  --color-amber-100: #fef3c7;
  --color-amber-600: #d97706;
  --color-teal-100: #ccfbf1;
  --color-teal-600: #0d9488;
  --font-family-heading: "Montserrat", sans-serif;
  --font-family-body: "Roboto", sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 34px;
  --font-lineHeight-sm: 1.43;
  --font-lineHeight-base: 1.5;
  --font-lineHeight-lg: 1.56;
  --font-lineHeight-xl: 1.6;
  --font-lineHeight-2xl: 1.33;
  --font-lineHeight-4xl: 1.29;
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  --boxShadow-elevated: 0px 4px 4px rgba(0, 0, 0, 0.25);
  --boxShadow-base: 0px 1px 2px rgba(31, 41, 55, 0.08);
  --boxShadow-md: 0px 2px 4px rgba(31, 41, 55, 0.06),
    0px 4px 6px rgba(31, 41, 55, 0.1);
  --radius-sm: 4px;
  --height-brandBar: 70px;
}
/* ==========================================================================
 * Reset
 * ========================================================================== */
* {
  border: 0;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
*,
::before,
::after {
  background-repeat: no-repeat;
}
*:focus {
  outline: 2.5px solid var(--color-boldBlue-500);
}
input[type=radio],
input[type=checkbox] {
  outline: none;
}
.js-focus-visible *:focus:not(.focus-visible) {
  outline: none;
}
html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: none;
}
body {
  background-color: var(--color-coolGray-50);
  background-position: center top;
  background-repeat: repeat;
  color: var(--body-text-color, var(--color-black, #000000));
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: 1;
  text-decoration-skip: ink;
}
@media screen and (min-width: 2000px) {
  body {
    --body-background-color: var(--color-coolGray-100);
  }
}
body.has-open-menu {
  overflow: hidden;
}
section {
  background-color: var(--color-white);
  color: var(--color-black);
}
a {
  color: inherit;
  text-decoration: none;
}
:any-link {
  cursor: pointer;
}
button {
  border-radius: 0;
  color: inherit;
}
textarea {
  resize: vertical;
}
button,
optgroup,
select,
table,
textarea {
  appearance: none;
  background-color: transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
[type=number],
[type=search] {
  appearance: textfield;
}
input::-webkit-inner-spin-button,
input::-webkit-search-cancel-button,
input::-webkit-search-decoration {
  appearance: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: var(--font-size-base);
  font-weight: normal;
  line-height: var(--font-lineHeight-base);
}
ol,
ul {
  list-style: none;
}
address {
  font-style: normal;
}
img,
svg {
  max-height: 100%;
  max-width: 100%;
}
svg {
  fill: currentColor;
}
hr {
  border-bottom: 1px solid var(--color-coolGray-300);
  margin-bottom: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}
/* ==========================================================================
 * Box Sizing
 * ========================================================================== */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
/* ==========================================================================
 * Scroll Behavior
 * ========================================================================== */
* {
  scroll-behavior: smooth;
}
/* ==========================================================================
 * Selection
 * ========================================================================== */
::selection {
  background-color: var(--color-muniSteelBlue);
  color: var(--color-white);
}
/* ==========================================================================
 * Address Dropdown
 * ========================================================================== */
.address-dropdown {
  align-items: center;
  background-color: var(--color-coolGray-100);
  border-radius: var(--radius-sm);
  display: flex;
  font-size: var(--font-size-lg);
  gap: var(--spacing-sm);
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-lg);
}
.add-to-calendar--blue-sm {
  color: var(--color-boldBlue-500);
  font-size: var(--font-size-sm);
}
.add-to-calendar--flex-center {
  display: flex;
  align-items: center;
}
.add-to-calendar__icon {
  margin-left: var(--spacing-lg);
}
.add-to-calendar__icon + .add-to-calendar__text {
  margin-left: var(--spacing-xs);
}
/* ==========================================================================
 * App
 * ========================================================================== */
.app {
  --width-sidebar: 300px;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 2000px;
  min-height: 100vh;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .app {
    --width-sidebar: 320px;
  }
}
@media screen and (min-width: 2000px) {
  .app {
    box-shadow: var(--boxShadow-elevated);
    border-bottom: 2px solid var(--color-coolGray-300);
  }
}
.app__sign-in {
  margin-top: var(--height-brandBar);
}
.app__body {
  display: block;
  flex-grow: 1;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .app__body {
    display: flex;
  }
}
.app__sidebar {
  background-color: var(--color-boldBlue-50);
  flex-shrink: 0;
  flex-grow: 1;
  margin-top: var(--height-brandBar);
  max-width: var(--width-sidebar, 300px);
  overflow-y: auto;
  position: fixed;
  transition: all 0.2s ease-in-out;
  z-index: 1;
}
@media screen and (max-width: 1200px) {
  .app__sidebar {
    transform: translateX(-100%);
  }
}
@media screen and (max-width: 1200px) {
  .app--menu-open .app__sidebar {
    transform: translateX(0);
  }
}
.app__main {
  background-color: var(--color-coolGray-50);
  flex-grow: 1;
  position: relative;
  margin-left: var(--width-sidebar);
  margin-top: var(--height-brandBar);
}
@media screen and (max-width: 1200px) {
  .app__main {
    margin-left: 0;
  }
}
.app__main-overlay {
  background-color: var(--color-coolGray-900);
  bottom: 0;
  left: 0;
  opacity: 0.01;
  position: absolute;
  right: 0;
  top: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  z-index: 1;
}
.app--menu-open .app__main-overlay {
  opacity: 0.5;
  visibility: visible;
}
@media screen and (min-width: 1200px) {
  .app__main-overlay {
    display: none;
  }
}
.banners:not(:empty) {
  margin-bottom: var(--spacing-lg);
}
.card .error-banners {
  padding-right: var(--card-padding-x, var(--spacing-2xl));
  padding-left: var(--card-padding-x, var(--spacing-2xl));
}
.card .error-banners.no-padding {
  padding-right: 0;
  padding-left: 0;
}
.banner {
  align-items: center;
  background-color: var(--banner-bg, var(--color-coolGray-100));
  display: flex;
  padding: var(--spacing-sm);
  width: 100%;
}
.banner--primary, .banner--info {
  --banner-bg: var(--color-boldBlue-100);
  --banner-icon: var(--color-boldBlue-500);
}
.banner--secondary, .banner--warning {
  --banner-bg: var(--color-amber-100);
  --banner-icon: var(--color-amber-600);
}
.banner--success {
  --banner-bg: var(--color-teal-100);
  --banner-icon: var(--color-teal-600);
}
.banner--error {
  --banner-bg: var(--color-rose-100);
  --banner-icon: var(--color-rose-600);
}
.banner__icon {
  fill: var(--banner-icon, var(--color-coolGray-700));
  display: block;
  margin-left: var(--spacing-xs);
  margin-right: var(--spacing-sm);
  flex-shrink: 0;
}
.banner__icon path {
  fill: var(--banner-icon, var(--color-coolGray-700));
}
.banner__message {
  color: var(--banner-message, var(--color-coolGray-700));
  line-height: 1.4;
  padding-top: 2px;
}
.banner__close {
  color: var(--banner-message, var(--color-coolGray-700));
  display: block;
  line-height: 0;
  padding: var(--spacing-xs);
  margin-left: auto;
  flex-shrink: 0;
}
.banner + .banner {
  margin-top: var(--spacing-sm);
}
/* ==========================================================================
 * Brand Bar
 * ========================================================================== */
.brand-bar {
  --brand-bar-background-color: var(--color-white);
  --brand-bar-border-color: var(--color-muniEcrue);
  --brand-bar-box-shadow: var(--boxShadow-elevated);
  --brand-bar-text-color: var(--color-white);
  --brand-bar-logo-height: 36px;
  --brand-bar-logo-width: 223px;
  align-items: center;
  background-color: var(--brand-bar-background-color);
  border-bottom: 2px solid var(--brand-bar-border-color);
  box-shadow: var(--brand-bar-box-shadow);
  color: var(--brand-bar-text-color);
  display: flex;
  overflow: hidden;
  padding: var(--spacing-md);
  position: fixed;
  max-width: 100%;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
@media screen and (min-width: 2000px) {
  .brand-bar {
    left: 50%;
    max-width: 2000px;
    transform: translateX(-50%);
  }
}
.brand-bar--sticky {
  position: sticky;
}
.brand-bar--dark {
  --brand-bar-background-color: var(--color-muniDarkGray);
  --brand-bar-box-shadow: none;
  --brand-bar-border-color: var(--color-muniSteelBlue);
  --brand-bar-text-color: var(--color-white);
  --logo-primary-color: currentColor;
  --logo-secondary-color: currentColor;
}
.brand-bar__logo {
  display: block;
  height: var(--brand-bar-logo-height);
  line-height: 0;
  margin: 0;
  position: relative;
  width: var(--brand-bar-logo-width);
}
.brand-bar__menu-button {
  display: block;
  position: relative;
}
@media screen and (min-width: 1200px) {
  .brand-bar__menu-button {
    display: none;
  }
}
.brand-bar__close-button {
  display: none;
}
/* ==========================================================================
 * Button
 * ========================================================================== */
.button {
  align-items: center;
  background-color: var(--button-background-color, var(--color-white, #ffffff));
  border-color: var(--button-border-color, var(--color-coolGray-200, #e5e7eb));
  border-style: solid;
  border-width: var(--button-border-width, 2px);
  border-radius: var(--radius-sm, 4px);
  box-shadow: var(--boxShadow-base);
  color: var(--button-text-color, var(--color-coolGray-700, #374151));
  display: var(--button-display, inline-flex);
  font-family: var(--button-font-family, var(--font-family-heading));
  font-size: var(--button-font-size, var(--font-size-lg, 18px));
  font-weight: var(--button-font-weight, var(--font-weight-medium, 500));
  justify-content: center;
  line-height: var(--button-line-height, var(--font-lineHeight-lg, 1.56));
  margin-bottom: var(--button-margin-bottom, var(--spacing-md, 16px));
  margin-left: var(--button-margin-left, 0);
  margin-right: var(--button-margin-right, 0);
  margin-top: var(--button-margin-top, var(--spacing-md, 16px));
  padding: var(--button-padding, var(--spacing-sm) var(--spacing-md));
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
}
.button:hover {
  background-color: var(--button-background-color-hover, var(--color-coolGray-100, #f3f4f6));
  border-color: var(--button-border-color-hover, var(--color-coolGray-300, #d1d5db));
  color: var(--button-text-color-hover, currentColor);
}
.button:disabled {
  background-color: var(--button-background-color-disabled, var(--color-coolGray-100, #f3f4f6));
  border-color: var(--button-border-color-disabled, var(--color-coolGray-300, #d1d5db));
  color: var(--button-text-color-disabled, var(--color-coolGray-300, #d1d5db));
}
.button:last-child {
  --button-margin-bottom: 0;
}
.button--primary {
  --button-background-color: var(--color-boldBlue-500, #0d6efd);
  --button-background-color-hover: var(
    --color-boldBlue-600,
    #0b5ed7
  );
  --button-border-color: var(--color-boldBlue-500, #0d6efd);
  --button-border-color-hover: var(--color-white);
  --button-text-color-hover: var(--color-white);
  --button-text-color: var(--color-white);
}
.button--primary:disabled {
  background-color: var(--button-background-color-disabled, var(--color-coolGray-100, #f3f4f6));
  border-color: var(--button-border-color-disabled, var(--color-coolGray-300, #d1d5db));
  color: var(--button-text-color-disabled, var(--color-coolGray-300, #d1d5db));
}
.button--full-width {
  --button-display: flex;
  width: 100%;
}
.card__footer .button:not(:only-child) {
  flex-grow: 1;
}
.button__icon {
  --icon-color: var(--color-coolGray-500);
  flex-shrink: 0;
}
.button__icon + .button__text {
  margin-left: var(--spacing-sm);
}
/* ==========================================================================
 * Card
 * ========================================================================== */
.card {
  background-color: var(--card-background-color, #ffffff);
  border-radius: var(--card-radius, 0);
  border-width: var(--card-border-width, 1px);
  border-style: solid;
  border-color: var(--card-border-color, var(--color-coolGray-300));
  box-shadow: var(--card-shadow, var(--boxShadow-md));
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}
.grid .card {
  container-type: inline-size;
}
.modal__content .card {
  overflow-y: auto;
}
.card--height-fit {
  height: fit-content;
}
.card--rounded {
  --card-radius: var(--radius-sm, 4px);
}
.card--stacked + .card--stacked {
  margin-top: var(--spacing-lg);
}
.card--borderless {
  --card-border-color: transparent;
  --card-border-width: 0;
  --card-shadow: var(--boxShadow-elevated);
}
.card__header, .card__body {
  --card-padding-x: var(--spacing-lg);
}
@container (min-width: 450px) {
  .card__header, .card__body {
    --card-padding-x: var(--spacing-2xl);
  }
}
.card__header--is-modal, .card__body--is-modal {
  background: var(--color-coolGray-100);
  border-bottom: 2px solid var(--color-coolGray-300);
  border-top: 2px solid var(--color-coolGray-300);
}
.card__header {
  --heading-margin-bottom: 0;
  position: relative;
  padding: var(--card-padding-y, var(--spacing-lg)) var(--card-padding-x, var(--spacing-2xl));
  width: 100%;
}
.card__body {
  position: relative;
  padding: var(--card-padding-y, var(--spacing-lg)) var(--card-padding-x, var(--spacing-2xl));
  width: 100%;
}
.card__content {
  margin-bottom: var(--spacing-xl);
}
.card__footer {
  --button-margin-bottom: 0;
  --button-margin-top: 0;
  --button-border-width: 1px;
  background-color: var(--color-boldBlue-50);
  border-top: var(--border-1px-solid-coolgray300);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: flex-end;
  margin-top: auto;
  padding: var(--card-padding-y, var(--spacing-md)) var(--card-padding-x, var(--spacing-lg));
  position: relative;
  width: 100%;
}
.card__section:not(:last-child) {
  border-bottom: var(--border-1px-solid-coolgray300);
  margin-bottom: var(--spacing-lg);
}
.card__title {
  color: var(--color-muniSteelBlue);
}
.card__modal {
  width: 100%;
  max-width: 420px;
  margin: var(--spacing-xl) auto;
}
.card__header + .card__body {
  padding-top: 0;
}
.data-row + .card__title {
  margin-top: var(--spacing-xl);
}
.checkbox {
  margin-bottom: var(--spacing-sm);
  margin-left: var(--spacing-xs);
  margin-right: var(--spacing-md);
  transform: scale(1.5);
}
.consumption {
  max-width: 100%;
  position: relative;
}
.consumption-graph-container {
  max-width: 100%;
}
.consumption-ledger-container {
  max-height: 500px;
  max-width: 100%;
  position: relative;
  overflow: auto;
}
.consumption-nav__controls {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: auto;
  margin-bottom: var(--spacing-sm);
  max-width: 100%;
}
.consumption-nav__arrow {
  margin: 0;
}
.consumption-nav__controls-text {
  color: var(--color-coolGray-700);
  align-self: center;
  font-size: var(--font-size-lg);
}
.consumption-nav__resolution {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  border-radius: var(--border-radius-sm);
  background: var(--color-coolGray-100);
}
.consumption-nav__resolution-button {
  background: var(--color-coolGray-100);
  border-color: transparent;
  box-shadow: none;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
}
.consumption-nav__resolution-button:hover {
  background: var(--color-white);
}
.consumption-nav__resolution-button--active {
  background: var(--color-white);
  box-shadow: var(--boxShadow-base);
}
.consumption-nav .consumption-nav__active-button {
  background: var(--color-white);
  box-shadow: var(--boxShadow-base);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
}
/* ==========================================================================
 * Container
 * ========================================================================== */
.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.container--small {
  max-width: 600px;
}
.data-row {
  margin: 1rem 0;
}
.data-row--flex {
  display: flex;
  align-items: center;
}
.data-row:first-child {
  margin-top: 0;
}
.data-row__title {
  width: 200px;
  margin-right: var(--spacing-md);
}
.data-row__title--gray500 {
  color: var(--color-coolGray-500);
}
.data-row__title--gray700 {
  color: var(--color-coolGray-700);
}
.data-row__title--lg {
  font-size: var(--font-size-lg);
}
.data-row__title--tight {
  min-width: 60px;
  width: auto;
}
.data-row__value {
  color: var(--color-black);
}
.data-row__value--4xl-font-clamp {
  font-size: clamp(var(--font-size-xl), 5vw, var(--font-size-4xl));
  font-weight: var(--font-weight-bold);
}
.data-row__value--4xl {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
}
.data-row__value--gray {
  color: var(--color-coolGray-700);
}
.data-row__value--red {
  color: var(--color-rose-600);
}
.data-row__value--indent {
  margin-left: var(--spacing-md);
}
.data-row__text {
  line-height: 28px;
}
.data-row__text--lg {
  font-size: var(--font-size-lg);
}
.data-row__text--gray500 {
  color: var(--color-coolGray-700);
}
.data-row__box {
  background: var(--color-coolGray-50);
  border: var(--border-1px-solid-coolgray300);
  padding: 10px 12px;
}
.data-row__box-title {
  color: var(--color-coolGray-500);
  width: 200px;
  margin-right: var(--spacing-md);
}
.footer {
  width: 100%;
  margin-top: var(--spacing-4xl);
  max-height: 60px;
}
.footer__wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--color-boldBlue-50);
  padding: 20px;
  text-align: right;
  max-height: 60px;
}
.footer__link {
  color: var(--color-coolgray-700);
  margin: 0 10px 0 10px;
}
.footer__link:hover {
  text-decoration: underline;
}
.form__wrapper {
  display: block;
  width: 300px;
  margin: 10px auto;
}
.form__section {
  border-bottom: 1px solid var(--color-gray-300);
}
.form__row {
  margin-top: 10px;
}
.form__subcontainer--col {
  display: flex;
  flex-direction: column;
}
.graph {
  width: 100%;
}
.graph__label {
  text-align: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-coolGray-700);
  margin-bottom: -1rem;
}
.graph__average-line-text {
  font-size: var(--font-size-xs);
}
/* ==========================================================================
 * Grid
 * ========================================================================== */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}
@container (min-width: 1000px) {
  .grid {
    gap: var(--spacing-2xl);
  }
}
.grid--2 {
  grid-template-columns: 1fr;
}
@container (min-width: 800px) {
  .grid--2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid--2.grid--even {
    grid-template-columns: repeat(2, calc(50% - var(--spacing-2xl) * 0.5));
  }
}
/* ==========================================================================
 * Header
 * ========================================================================== */
.header {
  --heading-margin-bottom: 0;
  background-color: var(--header-background-color, var(--color-white));
  border-bottom: var(--header-border-bottom, --border-2px-solid-coolgray300);
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  width: 100%;
}
.header__nested {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--spacing-md);
}
/* Customer Header Switcher Styles */
.customer-header-switcher {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.customer-name-dropdown {
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin: 0;
  padding: 0.5rem 2rem 0.5rem 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
}
.customer-name-dropdown:focus {
  outline: 2px solid var(--color-blue-500);
  outline-offset: 2px;
  border-radius: 0.25rem;
}
.customer-name-dropdown:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.switching-indicator {
  font-size: var(--text-sm);
  color: var(--color-blue-600);
  font-style: italic;
}
/* ==========================================================================
 * Heading
 * ========================================================================== */
.heading {
  position: relative;
}
.heading--lg {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-lineHeight-xl);
  margin-bottom: var(--heading-margin-bottom, var(--spacing-sm));
}
.heading--xl {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-lineHeight-xl);
  margin-bottom: var(--heading-margin-bottom, var(--spacing-md));
}
.heading--2xl {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-lineHeight-2xl);
  margin-bottom: var(--heading-margin-bottom, var(--spacing-lg));
}
.heading--3xl {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-lineHeight-2xl);
  margin-bottom: var(--heading-margin-bottom, var(--spacing-lg));
}
.heading--4xl {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-lineHeight-4xl);
}
.modal__thank-you-message .heading {
  color: var(--color-muniSteelBlue);
}
.icon {
  color: var(--icon-color, currentColor);
  height: var(--icon-size, 1.2em);
  width: var(--icon-size, 1.2em);
}
.icon--xs {
  height: 16px;
  width: 16px;
}
.icon--sm {
  height: 18px;
  width: 18px;
}
.icon--md {
  height: 20px;
  width: 20px;
}
.icon--lg {
  height: 24px;
  width: 24px;
}
.icon--xl {
  height: 32px;
  width: 32px;
}
.icon--2xl {
  height: 40px;
  width: 40px;
}
.icon--3xl {
  height: 48px;
  width: 48px;
}
.icon--4xl {
  height: 56px;
  width: 56px;
}
.icon--muniSteelBlue {
  color: var(--color-muniSteelBlue);
}
.input--appearance-full {
  border: solid 1px var(--color-coolGray-200);
  box-shadow: var(--boxShadow-base);
  appearance: auto;
  border-radius: 4px;
  padding: var(--spacing-sm);
}
.input__modal {
  max-width: 375px;
}
.input__number-field {
  display: block;
  margin-left: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}
.input__number-field::placeholder {
  color: var(--color-coolGray-300);
}
.input__number-field:disabled {
  pointer-events: none;
}
.input__number-field--bordered {
  border: 1px solid var(--color-coolGray-300);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}
.label--mrgn-bttm-sm {
  margin-bottom: var(--spacing-sm);
}
.label--mrgn-bttm-md {
  margin-bottom: var(--spacing-md);
}
.label__text--sm {
  font-size: var(--font-size-sm);
}
.label__text--gray500 {
  color: var(--color-coolGray-500);
}
.label__text--gray700 {
  color: var(--color-coolGray-700);
}
.label--col {
  display: flex;
  flex-direction: column;
}
.label__with__icon {
  display: flex;
  align-content: center;
}
.label__text + .label__icon {
  margin-left: var(--spacing-xs);
}
label[for=iframesCardNumber],
label[for=iframesCardExpiration],
label[for=iframesCardCvv] {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}
.link {
  color: var(--link-color, var(--color-boldBlue-500));
}
.link--sm {
  font-size: var(--font-size-sm);
}
.link--flex-center {
  display: flex;
  align-items: center;
}
.link--with-icon {
  display: inline-flex;
  align-items: center;
}
.link--with-icon:hover {
  text-decoration: underline;
}
.link__icon {
  margin-left: var(--spacing-lg);
}
.link__icon--left {
  margin-left: 0;
}
.link__icon + .link__text {
  margin-left: var(--spacing-xs);
}
.link__icon--left + .link__text {
  padding-top: 2px;
  line-height: 0;
}
/* ==========================================================================
 * Logo
 * ========================================================================== */
.logo {
  display: block;
  height: auto;
  position: relative;
  width: 100%;
}
.logo__primary {
  fill: var(--logo-primary-color, var(--color-muniEcrue, #cbb481));
}
.logo__secondary {
  fill: var(--logo-secondary-color, var(--color-muniSteelBlue, #4d7e9b));
}
/* ==========================================================================
 * Main
 * ========================================================================== */
.main {
  container-type: inline-size;
  position: relative;
}
.main__content {
  padding: var(--spacing-xl);
  position: relative;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .menu-button {
    margin-right: var(--spacing-sm);
  }
}
@media screen and (max-width: 1199px) {
  .menu-button {
    align-items: center;
    display: flex;
    padding-right: var(--spacing-xs);
    position: relative;
    margin-right: var(--spacing-lg);
  }
}
.menu-button__icon {
  height: 40px;
  width: 40px;
  margin-right: var(--spacing-xs);
}
.menu-button__text {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: 500;
  line-height: 1;
  display: none;
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .menu-button__text {
    display: block;
  }
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
  z-index: 50;
  background: rgba(0, 0, 0, 0.6);
}
.modal {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  width: 600px;
  max-height: 750px;
  overflow: auto;
  background: var(--color-white);
  z-index: 100;
}
.modal.closed {
  display: none;
}
.modal--auto {
  width: auto;
}
.modal--wide {
  width: 800px;
}
.modal__close {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  font-size: var(--font-size-3xl);
  color: var(--color-gray-500);
  cursor: pointer;
  z-index: 10;
}
.modal__content {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: auto;
}
.modal__thank-you-message {
  background: var(--color-coolGray-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60vw;
}
.modal__thank-you-message-header {
  color: var(--color-muniSteelBlue);
  text-align: center;
  padding: 0 var(--spacing-sm);
}
.modal__footer {
  background-color: var(--color-boldBlue-100);
  padding: var(--spacing-xl);
  text-align: center;
  width: 100%;
}
/* ==========================================================================
 * Nav Item
 * ========================================================================== */
.nav-item {
  background-color: var(--nav-item-background-color, transparent);
  border: var(--border-1px-solid-transparent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  width: 100%;
}
.nav-item:hover {
  background-color: var(--nav-item-background-color-hover, var(--color-boldBlue-100));
  border-color: var(--nav-item-border-color-hover, var(--color-boldBlue-500));
  color: var(--nav-item-hover-color, var(--color-boldBlue-500));
}
.nav-item--active {
  --nav-item-icon-color: var(--color-white);
  --nav-item-text-color: var(--color-white);
  --nav-item-background-color-hover: var(--color-boldBlue-600);
  --nav-item-hover-color: var(--color-white);
  background-color: var(--color-boldBlue-500);
  color: var(--color-white);
}
.nav-item--pending {
  --nav-item-icon-color: var(--color-coolGray-500);
  background-color: var(--color--coolGray-100);
  color: var(--color-coolGray-700);
}
.nav-item--full-width {
  width: 100%;
}
.nav-item__icon {
  --icon-size: 24px;
  color: var(--nav-item-icon-color, var(--color-coolGray-500));
  margin-right: var(--spacing-md);
}
.nav-item:hover .nav-item__icon {
  color: var(--nav-item-hover-color, var(--color-boldBlue-500));
}
.nav-item__label {
  color: var(--nav-item-text-color, var(--color-coolGray-700));
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--font-size-xl);
  line-height: var(--font-lineHeight-xl);
}
.nav-item:hover .nav-item__label {
  color: var(--nav-item-hover-color, var(--color-boldBlue-500));
}
.pagination {
  display: flex;
  align-items: center;
}
.pagination__button {
  border: var(--border-1px-solid-coolgray300);
  box-shadow: var(--boxShadow-base);
  border-radius: 100px;
  height: 36px;
  width: 36px;
  display: grid;
  place-items: center;
}
.pagination__button--disabled {
  color: var(--color-coolGray-300);
}
.pagination__navbar {
  display: flex;
}
.pagination__nav-item {
  margin: 0 16px;
  display: grid;
  place-items: center;
  font-weight: var(--font-weight-medium);
  color: var(--color-coolGray-700);
}
.pagination__nav-item--active {
  background: var(--color-boldBlue-500);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  height: 24px;
  width: 24px;
  border-radius: 100px;
}
.pagination__nav-item:hover {
  cursor: pointer;
}
.paya-ach {
  height: 640px;
}
.paya-ach--submitted {
  height: 300px;
}
@media (max-width: 666px) {
  .paya-ach {
    height: 920px;
  }
}
.paya-cc {
  height: 620px;
}
.paya-cc--submitted {
  height: 300px;
}
.payment-method {
  display: flex;
  align-items: center;
  justify-items: start;
}
.payment-method__card {
  max-width: 343px;
  padding: var(--spacing-md);
  border-radius: 4px;
  border: 1.5px solid var(--color-muniMorningBlue);
  box-shadow: var(--boxShadow-base);
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-right: 24px;
}
.payment-method__card--expired {
  background: #fff1f2;
  border: 1px solid var(--color-coolGray-300);
}
.payment-method__card--name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-coolGray-500);
}
.payment-method__card--number {
  font-size: var(--font-size-lg);
  color: var(--color-coolGray-500);
}
.payment-method__action-container {
  display: flex;
  justify-content: space-between;
}
.payment-method__action {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
}
.payment-method__action--edit {
  color: var(--color-boldBlue-500);
}
.payment-method__action--trash {
  color: var(--color-rose-600);
}
.payment-method__action:hover {
  cursor: default;
}
.payment-method__status {
  display: flex;
  align-items: center;
}
.payment-method__status--primary {
  color: var(--color-teal-600);
}
.payment-method__status--expired {
  color: var(--color-rose-600);
}
.radio {
  display: flex;
  flex-direction: row;
  padding-left: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.radio--lg {
  padding: var(--spacing-md);
}
.radio--lg.radio--selected {
  background-color: var(--color-boldBlue-50);
}
.radio__button {
  margin-right: var(--spacing-md);
}
.radio__button:checked + .radio__label {
  font-weight: var(--font-weight-bold);
}
.radio__button:checked + .radio__label > span {
  font-weight: var(--font-weight-normal);
}
.radio__label > b {
  display: block;
  margin-bottom: var(--spacing-sm);
}
.radio__label > span {
  display: block;
  line-height: var(--font-lineHeight-sm);
  max-width: 38ch;
}
/* ==========================================================================
 * Section
 * ========================================================================== */
.section {
  padding-bottom: var(--spacing-lg);
  padding-top: var(--spacing-lg);
}
.section--4xl {
  padding-bottom: var(--spacing-4xl);
  padding-top: var(--spacing-4xl);
}
.section--center {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section--half-height {
  min-height: calc(50vh - var(--height-brandBar, 70px));
}
.section--full-height {
  min-height: calc(100vh - var(--height-brandBar, 70px));
}
.policy {
  padding-bottom: var(--spacing-2xl);
}
.policy__container {
  padding: var(--spacing-md);
}
.policy__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-lineHeight-xl);
  margin-bottom: var(--spacing-sm);
  color: var(--color-coolGray-700);
  padding: 0;
}
.policy__text {
  color: var(--color-coolGray-600);
  padding: 0;
  margin-bottom: var(--spacing-sm);
}
.policy__link {
  color: var(--color-boldBlue-500);
  padding: 0;
}
.policy__ul {
  list-style-type: initial;
  margin-left: var(--spacing-lg);
  padding: 0;
}
.policy__li {
  color: var(--color-coolGray-600);
  padding: 0;
  margin-bottom: var(--spacing-sm);
}
.policy--gray {
  color: var(--color-coolGray-600);
}
.select {
  appearance: none;
  background-color: inherit;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%230C0300%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-position: right 0.7em top 50%, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 0.65em auto, 100%;
  border: solid 1px var(--color-coolGray-200);
  border-radius: 4px;
  box-shadow: var(--boxShadow-base) inset;
  box-sizing: border-box;
  color: inherit;
  display: block;
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-sm) var(--spacing-md);
  position: relative;
}
.select::-ms-expand {
  display: none;
}
.select:enter:not([disabled]), .select:active {
  border: solid 1px var(--color-coolGray-200);
  box-shadow: var(--boxShadow-base) inset;
  text-decoration: none;
  z-index: 1;
}
.select::after {
  position: absolute;
  right: 0;
  top: 0;
}
.select__label {
  align-items: center;
  display: flex;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-sm);
}
.service_agreement {
  background-color: white;
  overflow: auto;
  height: 100vh;
}
.service_agreement__content {
  padding: 0 var(--spacing-xl);
}
.service_agreement__clause {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-2xl);
  color: var(--color-coolGray-700);
  font-weight: var(--font-weight-medium);
}
.service_agreement__container {
  max-width: 600px;
  max-height: 475px;
  border: solid 1.5px var(--color-coolGray-700);
  overflow-y: scroll !important;
  margin: auto;
  padding: var(--spacing-xl);
}
.service_agreement__section {
  color: var(--color-coolGray-700);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-lg);
  margin: var(--spacing-md) 0;
}
.service_agreement__list-item {
  margin-bottom: var(--spacing-xs);
  color: var(--color-coolGray-800);
  margin-left: var(--spacing-sm);
}
.service_agreement__copy {
  margin-bottom: var(--spacing-md);
  color: var(--color-coolGray-800);
}
.service_agreement__outer-list {
  list-style: decimal;
}
.service_agreement__inner-list {
  list-style: lower-alpha;
}
.service_agreement__innermost-list {
  list-style: lower-roman;
}
.service_agreement__container::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
}
.service_agreement__container::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
/* ==========================================================================
 * Sidebar
 * ========================================================================== */
.sidebar {
  border-right: var(--border-2px-solid-coolgray300);
  display: flex;
  flex-direction: column;
  height: calc(100% - var(--height-brandBar));
  padding: var(--sidebar-padding-y, var(--spacing-md)) var(--sidebar-padding-x, var(--spacing-md));
  width: 100%;
  z-index: 2;
}
@media screen and (min-width: 1200px) {
  .sidebar {
    --sidebar-padding-x: var(--spacing-xl);
    --sidebar-padding-y: var(--spacing-xl);
  }
}
.sidebar__header {
  display: none;
}
.sidebar__body {
  flex-grow: 1;
}
.sidebar__footer {
  margin-top: auto;
}
.table-container {
  overflow-x: auto;
  width: 100%;
}
.table {
  border-spacing: 0;
  width: 100%;
}
.consumption-ledger-container .table {
  position: static;
}
.table__rounded {
  border: var(--border-1px-solid-coolgray300);
  border-radius: 8px;
}
.table__head--rounded th:first-child {
  border-radius: 8px 0 0 0;
}
.table__head--rounded th:last-child {
  border-radius: 0 8px 0 0;
}
.table__tr {
  text-align: left;
}
.table__tr:nth-child(even) {
  background: var(--color-coolGray-50);
}
.table__tr:nth-child(even).table__tr--highlighted {
  background: var(--color-boldBlue-100);
}
.table__head .table__tr {
  border-spacing: 0;
}
.table__tr--highlighted {
  background: var(--color-boldBlue-100);
}
.table__th {
  padding: var(--spacing-sm);
  color: var(--color-coolGray-700);
  background: var(--color-coolGray-100);
  font-weight: 700;
}
.consumption-ledger-container .table__th {
  position: sticky;
  top: 0;
}
.table__th-button {
  align-items: flex-start;
  display: flex;
  font-weight: 700;
  gap: var(--spacing-xs);
}
.table__td {
  padding: var(--spacing-md) var(--spacing-sm);
}
.table__body {
  color: var(--color-coolGray-700);
}
.table__body--rounded .table__tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
.table__body--rounded .table__tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}
.table-filter {
  display: flex;
  align-items: center;
  border: var(--border-1px-solid-coolgray200);
  appearance: auto;
  box-shadow: var(--boxShadow-base);
  border-radius: 4px;
}
.table-filter__search-icon {
  color: var(--color-coolGray-300);
}
.color-cg1 {
  color: var(--color-coolGray-100);
}
.color-cg2 {
  color: var(--color-coolGray-200);
}
.color-cg3 {
  color: var(--color-coolGray-300);
}
.color-cg4 {
  color: var(--color-coolGray-400);
}
.color-cg5 {
  color: var(--color-coolGray-500);
}
.color-cg6 {
  color: var(--color-coolGray-600);
}
.color-cg7 {
  color: var(--color-coolGray-700);
}
.color-cg8 {
  color: var(--color-coolGray-800);
}
.color-cg9 {
  color: var(--color-coolGray-900);
}
.color-pink6 {
  color: var(--color-pink-600);
}
.color-white {
  color: var(--color-white);
}
.color-msb {
  color: var(--color-muniSteelBlue);
}
.color-bb5 {
  color: var(--color-boldBlue-500);
}
.heading-font {
  font-family: var(--font-family-heading);
}
.font-weight-norm {
  font-weight: var(--font-weight-normal);
}
.font-weight-med {
  font-weight: var(--font-weight-medium);
}
.font-weight-bold {
  font-weight: var(--font-weight-bold);
}
@keyframes shine {
  to {
    background-position: 100% 0;
  }
}
.loader:empty {
  width: 100%;
  height: var(--spacing-md);
  display: block;
  background: linear-gradient(to right, rgba(249, 250, 251, 0), rgba(249, 250, 251, 0.5) 50%, rgba(249, 250, 251, 0) 80%), var(--color-coolGray-200);
  background-repeat: repeat-y;
  background-size: 50px 200px;
  background-position: 0 0;
  animation: shine 2s infinite;
}
.loader--md:empty {
  height: var(--spacing-md);
}
.loader--heading:empty {
  width: 200px;
}
.loader--2xl:empty {
  height: var(--spacing-2xl);
}
.loader--3xl:empty {
  height: var(--spacing-3xl);
}
.loader--button:empty {
  min-height: 53px;
  min-width: 200px;
}
.loader--button-sm:empty {
  max-width: 200px;
  width: 200px;
}
.loader--radio:empty {
  height: 101px;
}
.m-auto {
  margin: auto;
}
.m-0 {
  margin: 0;
}
.m-xs {
  margin: var(--spacing-xs);
}
.m-sm {
  margin: var(--spacing-sm);
}
.m-md {
  margin: var(--spacing-md);
}
.m-lg {
  margin: var(--spacing-lg);
}
.m-xl {
  margin: var(--spacing-xl);
}
.m-2xl {
  margin: var(--spacing-2xl);
}
.m-3xl {
  margin: var(--spacing-3xl);
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mx-0 {
  margin-left: 0;
  margin-right: 0;
}
.mx-xs {
  margin-left: var(--spacing-xs);
  margin-right: var(--spacing-xs);
}
.mx-sm {
  margin-left: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}
.mx-md {
  margin-left: var(--spacing-md);
  margin-right: var(--spacing-md);
}
.mx-lg {
  margin-left: var(--spacing-lg);
  margin-right: var(--spacing-lg);
}
.mx-xl {
  margin-left: var(--spacing-xl);
  margin-right: var(--spacing-xl);
}
.mx-2xl {
  margin-left: var(--spacing-2xl);
  margin-right: var(--spacing-2xl);
}
.mx-3xl {
  margin-left: var(--spacing-3xl);
  margin-right: var(--spacing-3xl);
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.my-xs {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}
.my-sm {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}
.my-md {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.my-lg {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}
.my-xl {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}
.my-2xl {
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
}
.my-3xl {
  margin-top: var(--spacing-3xl);
  margin-bottom: var(--spacing-3xl);
}
.mt-auto {
  margin-top: auto;
}
.mt-0 {
  margin-top: 0;
}
.mt-xs {
  margin-top: var(--spacing-xs);
}
.mt-sm {
  margin-top: var(--spacing-sm);
}
.mt-md {
  margin-top: var(--spacing-md);
}
.mt-lg {
  margin-top: var(--spacing-lg);
}
.mt-xl {
  margin-top: var(--spacing-xl);
}
.mt-2xl {
  margin-top: var(--spacing-2xl);
}
.mt-3xl {
  margin-top: var(--spacing-3xl);
}
.mb-auto {
  margin-bottom: auto;
}
.mb-0 {
  margin-bottom: 0;
}
.mb-xs {
  margin-bottom: var(--spacing-xs);
}
.mb-sm {
  margin-bottom: var(--spacing-sm);
}
.mb-md {
  margin-bottom: var(--spacing-md);
}
.mb-lg {
  margin-bottom: var(--spacing-lg);
}
.mb-xl {
  margin-bottom: var(--spacing-xl);
}
.mb-2xl {
  margin-bottom: var(--spacing-2xl);
}
.mb-3xl {
  margin-bottom: var(--spacing-3xl);
}
.ml-auto {
  margin-left: auto;
}
.ml-0 {
  margin-left: 0;
}
.ml-xs {
  margin-left: var(--spacing-xs);
}
.ml-sm {
  margin-left: var(--spacing-sm);
}
.ml-md {
  margin-left: var(--spacing-md);
}
.ml-lg {
  margin-left: var(--spacing-lg);
}
.ml-xl {
  margin-left: var(--spacing-xl);
}
.ml-2xl {
  margin-left: var(--spacing-2xl);
}
.ml-3xl {
  margin-left: var(--spacing-3xl);
}
.mr-auto {
  margin-right: auto;
}
.mr-0 {
  margin-right: 0;
}
.mr-xs {
  margin-right: var(--spacing-xs);
}
.mr-sm {
  margin-right: var(--spacing-sm);
}
.mr-md {
  margin-right: var(--spacing-md);
}
.mr-lg {
  margin-right: var(--spacing-lg);
}
.mr-xl {
  margin-right: var(--spacing-xl);
}
.mr-2xl {
  margin-right: var(--spacing-2xl);
}
.mr-3xl {
  margin-right: var(--spacing-3xl);
}
.p-0 {
  padding: 0;
}
.p-xs {
  padding: var(--spacing-xs);
}
.p-sm {
  padding: var(--spacing-sm);
}
.p-md {
  padding: var(--spacing-md);
}
.p-lg {
  padding: var(--spacing-lg);
}
.p-xl {
  padding: var(--spacing-xl);
}
.p-2xl {
  padding: var(--spacing-2xl);
}
.p-3xl {
  padding: var(--spacing-3xl);
}
.p-0 {
  padding: 0;
}
.p-xs {
  padding: var(--spacing-xs);
}
.p-sm {
  padding: var(--spacing-sm);
}
.p-md {
  padding: var(--spacing-md);
}
.p-lg {
  padding: var(--spacing-lg);
}
.p-xl {
  padding: var(--spacing-xl);
}
.p-2xl {
  padding: var(--spacing-2xl);
}
.p-3xl {
  padding: var(--spacing-3xl);
}
.px-0 {
  padding-left: 0;
  padding-right: 0;
}
.px-xs {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}
.px-sm {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}
.px-md {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}
.px-lg {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}
.px-xl {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}
.px-2xl {
  padding-left: var(--spacing-2xl);
  padding-right: var(--spacing-2xl);
}
.px-3xl {
  padding-left: var(--spacing-3xl);
  padding-right: var(--spacing-3xl);
}
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.py-xs {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}
.py-sm {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}
.py-md {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}
.py-lg {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}
.py-xl {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}
.py-2xl {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}
.py-3xl {
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
}
.pt-0 {
  padding-top: 0;
}
.pt-xs {
  padding-top: var(--spacing-xs);
}
.pt-sm {
  padding-top: var(--spacing-sm);
}
.pt-md {
  padding-top: var(--spacing-md);
}
.pt-lg {
  padding-top: var(--spacing-lg);
}
.pt-xl {
  padding-top: var(--spacing-xl);
}
.pt-2xl {
  padding-top: var(--spacing-2xl);
}
.pt-3xl {
  padding-top: var(--spacing-3xl);
}
.pb-0 {
  padding-bottom: 0;
}
.pb-xs {
  padding-bottom: var(--spacing-xs);
}
.pb-sm {
  padding-bottom: var(--spacing-sm);
}
.pb-md {
  padding-bottom: var(--spacing-md);
}
.pb-lg {
  padding-bottom: var(--spacing-lg);
}
.pb-xl {
  padding-bottom: var(--spacing-xl);
}
.pb-2xl {
  padding-bottom: var(--spacing-2xl);
}
.pb-3xl {
  padding-bottom: var(--spacing-3xl);
}
.pl-0 {
  padding-left: 0;
}
.pl-xs {
  padding-left: var(--spacing-xs);
}
.pl-sm {
  padding-left: var(--spacing-sm);
}
.pl-md {
  padding-left: var(--spacing-md);
}
.pl-lg {
  padding-left: var(--spacing-lg);
}
.pl-xl {
  padding-left: var(--spacing-xl);
}
.pl-2xl {
  padding-left: var(--spacing-2xl);
}
.pl-3xl {
  padding-left: var(--spacing-3xl);
}
.pr-0 {
  padding-right: 0;
}
.pr-xs {
  padding-right: var(--spacing-xs);
}
.pr-sm {
  padding-right: var(--spacing-sm);
}
.pr-md {
  padding-right: var(--spacing-md);
}
.pr-lg {
  padding-right: var(--spacing-lg);
}
.pr-xl {
  padding-right: var(--spacing-xl);
}
.pr-2xl {
  padding-right: var(--spacing-2xl);
}
.pr-3xl {
  padding-right: var(--spacing-3xl);
}
.u-text-align-center {
  text-align: center;
}
.text-size-sm {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}
.text-size-base {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}
.text-size-lg {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}
.text-size-xl {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
}
.text-size-2xl {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-2xl);
}
.text-size-4xl {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-4xl);
}
.global-payments-container {
  min-height: 220px;
}
.global-payments-form__field-container {
  margin-bottom: 8px;
  margin-top: 8px;
}
.global-payments-form__field-container iframe {
  width: 100%;
}
.global-payments-form__select {
  border: 1px solid var(--color-coolGray-200);
  border-radius: 4px;
  box-shadow: var(--boxShadow-base);
  font-size: var(--font-size-base);
  padding: 8px;
  width: 100%;
}
.payment-details__row {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-md);
  width: fit-content;
  justify-content: space-between;
}
.payment-details__title {
  margin-right: var(--spacing-md);
  min-width: 130px;
  color: var(--color-coolGray-700);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}
.payment-details__value {
  color: var(--color-coolGray-700);
}
.payment-details__notice {
  color: var(--color-coolGray-700);
  margin-bottom: var(--spacing-sm);
}
.payment-details__notice--title {
  margin-right: var(--spacing-xs);
  color: var(--color-coolGray-700);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}
.paya-iframe {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .paya-iframe--ach {
    min-width: 800px;
  }
}