:root {
  /*Text Colors*/
  --text-primary: #03182b;
  --text-secondary: #4f5d6b;
  --text-tertiary: #818c95;
  --text-interaction: #0067b1;
  --text-error: #ff4d4f;
  --text-success: #2b8809;
  --text-reversed: #ffffff;
  --text-currency-header: #313336;
  --text-muted: #6b7280;

  /*Background Colors*/
  --bg-primary-default: #0067b1;
  --bg-secondary: #eff9fd;
  --bg-active: #0067b1;
  --bg-selected: #6b7280;
  --bg-success: #6cc24a;
  --bg-accent-light: #cffafe;
  --bg-accent-light-hover: #a5f3fc;
  --bg-tertiary: #ffffff;
  --bg-alert-alt: #1c2f40;
  --bg-disabled: #eef0f2;
  --bg-success-light: #e2f3db;
  --bg-reverse: #ffffff;
  --bg-accent: #00bbd3;
  --bg-primary-disable: #eef0f2;
  --bg-date-header: #a9c4e699;

  /*Border Colors*/
  --border-default: #e0e4e9;
  --border-active: #0067b1;
  --stroke-divider: #eef0f2;

  /* Chart data colors */
  --chart-data-0: #eaecf0;
  --chart-data-1: #0067b1;
  --chart-data-2: #5bc2e7;
  --chart-data-3: #f54c3e;
  --chart-data-4: #08be67;
  --chart-data-5: #615e9b;
  --chart-data-6: #ed6c1c;
  --chart-data-7: #f5c23e;

  --btn-bg-gradient: linear-gradient(90deg, #1e3a8a 0%, #3d8ba6 100%);
  --btn-bg-delete: #ff9091;

  --cat-bg-0: #0FA4E9;
  --cat-bg-1: #2463EB;
  --cat-bg-2: #17A34A;
  --cat-bg-3: #F97316;
  --cat-bg-4: #9333E9;
  --cat-bg-5: #6466F1;
  --cat-bg-others: #9ca0a8;

  --summary-gray: #eaecf0;
  --summary-green: #08be67;
  --summary-amber: #ed6c1c;
  --summary-red: #f54c3e;

  --svg-img-primary: #0067b1;
  --svg-img-secondary: #4f5d6b;

  /* font size */
  --primary-font-family: "Lato", sans-serif;
  --small-text-font-size: 12px;
  --normal-text-font-size: 14px;
  --medium-text-font-size: 16px;
  --large-text-font-size: 18px;
  --xlarge-text-font-size: 20px;
}

/*Start of Typography*/
.p1-regular {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.p3-regular {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.p4-regular,
.body-2-regular {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.h1-bold {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.h2-bold {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

.p1-bold {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.p2-regular {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.p2-bold,
.interaction-large {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.p3-bold,
.interaction-medium,
.body-1-bold {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.p4-bold {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

@media (min-width: 574px) {
  .without-scrollbar {
    padding-right: var(--scrollbar-width);
  }

  .page-container {
    max-width: 574px;
    margin: 0 auto;
  }
}