@charset "UTF-8";
/* public-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/public-sans-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* public-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/fonts/public-sans-v21-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don’t have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
    scroll-behavior: auto !important;
  }
}
.container {
  margin: 0 auto;
  max-width: var(--container-max-width);
  width: var(--container-width);
}

.row {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.accent-text {
  color: var(--accent-color);
}

.btn {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  border-radius: var(--spacing-xs);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  padding: var(--spacing-md);
  text-decoration: none;
}
.btn--primary {
  background-color: var(--bg-color-dark);
  color: var(--text-color-light);
}
.btn--primary:hover {
  background-color: var(--bg-color-medium);
}
.btn--secondary {
  background-color: var(--bg-color);
  color: #201f24;
}
.btn--secondary:hover {
  background-color: #ffffff;
  border-color: var(--border-color);
}
.btn--destroy {
  background: #c94736;
  color: #ffffff;
}
.btn--destroy:hover {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%), #c94736;
}
.btn--pagination {
  align-items: center;
  background: none;
  border-color: var(--border-color);
  display: inline-flex;
  gap: var(--spacing-md);
  height: var(--spacing-xxxl);
  justify-content: center;
}
.btn--pagination:hover {
  background: #98908b;
  color: var(--text-color-light);
}
.btn--pagination:hover svg * {
  fill: var(--text-color-light);
}
.btn--pagination.active {
  background: var(--bg-color-dark);
  color: var(--text-color-light);
}

.btn--tertiary {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  align-items: center;
  background: none;
  border: none;
  color: #696868;
  cursor: pointer;
  display: inline-flex;
  gap: var(--spacing-sm);
  text-decoration: none;
}
.btn--tertiary:hover {
  color: #201f24;
}
.btn--tertiary:hover svg * {
  fill: #201f24;
}

.card {
  flex: 1;
  background-color: var(--card-bg);
  border-radius: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--card-padding);
}
.card__title-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.card-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}

.dark-bg {
  background-color: var(--bg-color-dark);
  color: var(--text-color-light);
}
.dark-bg h1,
.dark-bg h2,
.dark-bg h3,
.dark-bg h4,
.dark-bg h5,
.dark-bg h6 {
  color: var(--text-color-medium);
}

.large-text {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.light-text {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #696868;
}

.red-text {
  color: #c94736;
}

.divider {
  height: 1px;
  background-color: #f2f2f2;
}

.dropdown-container {
  align-items: center;
  display: flex;
  gap: var(--spacing-xs);
}
.dropdown {
  position: relative;
}
.dropdown__label {
  color: #696868;
  display: none;
}
.dropdown__btn {
  background: none;
  border: none;
  cursor: pointer;
}
.dropdown__btn > * {
  display: none;
}
.dropdown__btn .mobile-icon {
  display: block;
  height: 20px;
  width: 20px;
}
.dropdown__btn .mobile-icon svg {
  width: 100%;
  height: auto;
}
.dropdown__btn::after {
  content: "";
  cursor: pointer;
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: var(--spacing-md);
  background: transparent;
  z-index: 1;
}
.dropdown__divider {
  width: 100%;
}
.dropdown__menu {
  align-items: flex-start;
  background: #ffffff;
  border-radius: var(--spacing-xs);
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.25);
  display: none;
  flex-direction: column;
  gap: var(--spacing-sm);
  right: 0;
  padding: var(--spacing-sm) var(--spacing-lg);
  position: absolute;
  top: calc(100% + var(--spacing-md));
}
.dropdown__option.selected {
  font-weight: 700;
}
.dropdown__btn:hover + .dropdown__menu, .dropdown__menu:hover {
  display: flex;
}

.input-row {
  align-items: center;
  display: flex;
  gap: var(--spacing-xl);
  justify-content: flex-end;
}
.input-row .search-bar {
  flex: 1;
  position: relative;
}
.input-row .search-bar input {
  padding-right: calc(var(--spacing-lg) + 2 * var(--spacing-md));
  width: 100%;
  color: red;
}
.input-row .search-bar input::placeholder {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #98908b;
}
.input-row .search-bar svg {
  position: absolute;
  right: var(--spacing-lg);
  top: 50%;
  transform: translateY(-50%);
}

.hide-on-mobile {
  display: none;
}

.show-on-mobile {
  display: flex;
}

@media (min-width: 48rem) {
  .card-container {
    flex-direction: row;
    gap: var(--spacing-xxl);
  }
  .card {
    padding: var(--spacing-xxl);
  }
  .dropdown__label {
    display: block;
  }
  .dropdown__btn {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--spacing-xs);
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    position: relative;
  }
  .dropdown__btn > * {
    display: block;
  }
  .dropdown__btn .mobile-icon {
    display: none;
  }
  .dropdown__btn span {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
  }
  .dropdown__btn svg {
    transition: transform 0.3 ease-in-out;
  }
  .dropdown__btn:hover svg {
    transform: rotateZ(-180deg);
  }
  .dropdown__menu {
    left: 0;
  }
  .hide-on-mobile {
    display: flex;
  }
  .show-on-mobile {
    display: none;
  }
}
:root {
  --primary-color: #1e3a8a;
  --primary-hover: #1e40af;
  --accent-color: #277c78;
  --bg-color: #f8f4f0;
  --bg-color-medium: #696868;
  --bg-color-dark: #201f24;
  --text-color: #201f24;
  --text-color-light: #ffffff;
  --text-color-medium: #b3b3b3;
  --border-color: #98908b;
  --card-bg: #ffffff;
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.25rem;
  --spacing-xl: 1.5rem;
  --spacing-xxl: 2rem;
  --spacing-xxxl: 2.5rem;
  --container-max-width: 90rem;
  --container-width: 90%;
  --card-padding: var(--spacing-xl) var(--spacing-lg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #3b82f6;
    --primary-hover: #60a5fa;
    --bg-color: #201f24;
    --bg-color-dark: #f2f2f2;
    --text-color: #f2f2f2;
    --text-color-light: #201f24;
    --text-color-medium: #696868;
    --card-bg: #201f24;
  }
  .card {
    border: 1px solid var(--border-color);
  }
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "Public Sans", sans-serif;
  letter-spacing: 0px;
  line-height: 1.6;
  padding: var(--spacing-xl) 0 calc(4 * var(--spacing-xl));
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

h3 {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}

h4 {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
}

p {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}

header {
  position: fixed;
  bottom: 0;
  border-radius: var(--spacing-xs) var(--spacing-xs) 0 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
header .main-nav {
  padding: var(--spacing-xs) 0 0;
}
header .main-nav .logo {
  display: none;
}
header .main-nav .nav__list {
  align-items: center;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
}
header .nav__item {
  border-bottom: var(--spacing-xxs) solid transparent;
  border-radius: var(--spacing-xs) var(--spacing-xs) 0 0;
  max-width: 104px;
  position: relative;
  padding: var(--spacing-xs) 0;
}
header .nav__item a {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  text-decoration: none;
}
header .nav__item a span {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  display: none;
  font-weight: 700;
}
header .nav__item:hover a {
  color: #ffffff;
}
header .nav__item:hover:not(.active) svg * {
  fill: #ffffff;
}
header .nav__item.active {
  background-color: #ffffff;
  border-bottom-color: var(--accent-color);
}
header .nav__item.active svg * {
  fill: var(--accent-color);
  stroke: var(--accent-color);
}
header .nav__buttons {
  display: none;
}

footer {
  text-align: center;
}

main#overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}
main#overview .left,
main#overview .right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.overview-pots .card,
.overview-budgets .card {
  gap: var(--spacing-lg);
}

.pots-container,
.budgets-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.pot-total {
  align-items: center;
  background-color: var(--bg-color);
  border-radius: var(--spacing-sm);
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}
.pot-total__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.pot-container,
.budget-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: var(--spacing-md);
}

.pot,
.budget {
  border-left: 4px solid #277c78;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  padding-left: var(--spacing-md);
}
.pot p,
.budget p {
  font-weight: 700;
}

.pot[data-tag=green],
.budget[data-tag=green],
.bill[data-tag=green] {
  border-left-color: #277c78;
}
.pot[data-tag=navy],
.budget[data-tag=navy],
.bill[data-tag=navy] {
  border-left-color: #626070;
}
.pot[data-tag=cyan],
.budget[data-tag=cyan],
.bill[data-tag=cyan] {
  border-left-color: #82c9d7;
}
.pot[data-tag=yellow],
.budget[data-tag=yellow],
.bill[data-tag=yellow] {
  border-left-color: #f2cdac;
}

.overview-transactions .card {
  gap: var(--spacing-xxl);
}

.transaction-list,
.bills-list {
  display: grid;
  gap: var(--spacing-lg);
}
.transaction-list__image,
.bills-list__image {
  border-radius: 100vh;
  max-height: 2rem;
  max-width: 2rem;
  overflow: hidden;
}
.transaction-list__item,
.bills-list__item {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.transaction-list__image-and-title,
.bills-list__image-and-title {
  align-items: center;
  display: flex;
  gap: var(--spacing-md);
}
.transaction-list__image-and-title p,
.bills-list__image-and-title p {
  font-weight: 700;
}
.transaction-list__value-and-date,
.bills-list__value-and-date {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.transaction-list__value-and-date .value,
.bills-list__value-and-date .value {
  font-weight: 700;
}
.transaction-list__value-and-date .value.positive,
.bills-list__value-and-date .value.positive {
  color: #277c78;
}
.transaction-list__value-and-date .date,
.bills-list__value-and-date .date {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #696868;
}

.chart {
  position: relative;
}
.chart p {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.budgets-container {
  padding: var(--spacing-xs) 0;
}

.overview-recurring .card {
  gap: var(--spacing-xxl);
}

.recurring-bills-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.recurring-bills-container .bill {
  align-items: center;
  background-color: var(--bg-color);
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: var(--spacing-xs);
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-md);
}
.recurring-bills-container .bill h3 {
  color: #696868;
}
.recurring-bills-container .bill p {
  font-weight: 700;
}

@media (min-width: 48rem) {
  :root {
    --card-padding: var(--spacing-xxl);
  }
  header .nav__item a {
    color: #b3b3b3;
  }
  header .nav__item a span {
    display: block;
  }
  header .nav__item.active a {
    color: #201f24;
  }
  .overview .card {
    padding: var(--spacing-xl);
  }
  .pots-container {
    display: grid;
    grid-template-columns: 2fr 3fr;
    column-gap: var(--spacing-lg);
  }
  .budgets-container {
    flex-direction: row;
  }
  .budgets-container .chart {
    flex: 1;
    max-width: 240px;
    margin: 0 auto;
  }
  .budget-container {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 64rem) {
  body {
    display: flex;
    padding: 0;
  }
  header {
    border-radius: 0 var(--spacing-md) var(--spacing-md) 0;
    position: relative;
  }
  header .container {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    max-height: 100vh;
    min-width: 300px;
    padding: 0 var(--spacing-xl) 0 0;
    transition: min-width 0.5s ease-in-out;
  }
  header .main-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing-xl);
    max-height: 800px;
    padding: 0;
  }
  header .main-nav .logo {
    display: flex;
    padding: var(--spacing-xxxl) var(--spacing-xxl);
  }
  header .main-nav .logo .small {
    max-width: 0;
  }
  header .main-nav .logo .small,
  header .main-nav .logo .large {
    overflow: hidden;
    transition: max-width 0.5s ease-in-out;
  }
  header .main-nav .nav__list {
    gap: var(--spacing-xxs);
    grid-template-columns: 1fr;
  }
  header .nav__buttons {
    display: block;
    padding: 0 var(--spacing-xxl);
  }
  header .nav__buttons .btn--tertiary {
    cursor: pointer;
    gap: var(--spacing-md);
  }
  header .nav__buttons .btn--tertiary:hover {
    color: #ffffff;
  }
  header .nav__buttons .btn--tertiary:hover svg * {
    fill: #ffffff;
  }
  header .nav__buttons span {
    display: inline-block;
    transition: max-width 0.5s ease-in-out;
    max-width: 500px;
    overflow: hidden;
    white-space: nowrap;
  }
  header #minimize-btn svg {
    transition: transform 0.5s ease-in-out;
  }
  header .nav__item {
    border: none;
    border-radius: 0 var(--spacing-xs) var(--spacing-xs) 0;
    max-width: none;
    padding: var(--spacing-md) var(--spacing-xxl);
  }
  header .nav__item a {
    flex-direction: row;
    gap: var(--spacing-md);
  }
  header .nav__item a span {
    display: inline-block;
    transition: max-width 0.5s ease-in-out;
    max-width: 500px;
    overflow: hidden;
    white-space: nowrap;
  }
  header.minimized .container {
    min-width: 0;
  }
  header.minimized .nav__item > a > span,
  header.minimized .nav__buttons > button > span {
    max-width: 0;
  }
  header.minimized .main-nav > .logo .small {
    max-width: 500px;
  }
  header.minimized .main-nav > .logo .large {
    max-width: 0;
  }
  header.minimized #minimize-btn svg {
    transform: rotateZ(180deg);
  }
  main {
    flex: 1;
    margin: 0 auto;
    max-width: var(--container-max-width);
    padding: var(--spacing-xxl) var(--spacing-xxxl);
  }
  main > * .container {
    margin: 0;
    width: 100%;
  }
  main#overview {
    align-content: start;
    column-gap: var(--spacing-xl);
    grid-template-columns: 3fr 2fr;
    row-gap: var(--spacing-xxl);
  }
  main#overview .overview {
    grid-column: 1/-1;
  }
  main#overview .left,
  main#overview .right {
    gap: var(--spacing-xxl);
  }
  .pots-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .overview-budgets {
    flex: 1;
  }
  .overview-budgets .container {
    display: flex;
    height: 100%;
  }
  .budgets-container {
    align-items: center;
    flex: 1;
    gap: var(--spacing-md);
  }
}
input {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--spacing-xs);
  color: var(--text-color);
  padding: var(--spacing-sm) var(--spacing-lg);
}

.transactions h1,
.recurring-bills h1 {
  margin-bottom: var(--spacing-xxl);
}

.transactions .card {
  gap: var(--spacing-xl);
}
.transactions .transaction-list__item > .transaction-list__category,
.transactions .transaction-list__item > .transaction-list__date,
.transactions .transaction-list__headers,
.transactions .transaction-list__divider.first-divider {
  display: none;
}
.transactions .transaction-list__category {
  font-weight: 400;
}
.transactions .transaction-list__image-and-title .text {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.transactions .dropdown-container {
  text-wrap: nowrap;
}
.transactions .page-buttons-container,
.transactions .page-buttons {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.transactions .page-buttons-container {
  padding-top: var(--spacing-xl);
}
.transactions .page-buttons {
  gap: var(--spacing-xs);
}
.transactions .page-buttons .btn--pagination {
  max-width: var(--spacing-xxxl);
}

@media (min-width: 48rem) {
  .transactions .transaction-list__item > .transaction-list__category,
  .transactions .transaction-list__item > .transaction-list__date,
  .transactions .transaction-list__headers,
  .transactions .transaction-list__divider.first-divider {
    display: flex;
  }
  .transactions .transaction-list__image-and-title {
    flex: 1;
  }
  .transactions .transaction-list__image-and-title .transaction-list__category {
    display: none;
  }
  .transactions .transaction-list__value-and-date .date {
    display: none;
  }
  .transactions .transaction-list__item {
    gap: var(--spacing-xxl);
  }
  .transactions .transaction-list__item > *, .transactions .transaction-list__item.tranasction-list__header {
    min-width: 88px;
  }
  .transactions .transaction-list__header,
  .transactions .transaction-list__category,
  .transactions .transaction-list__date {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #696868;
  }
  .transactions .transaction-list__header:first-child {
    flex: 1;
  }
  .transactions .transaction-list__header:last-child {
    align-self: flex-end;
    text-align: end;
  }
}
@media (min-width: 64rem) {
  .transactions .input-row .search-bar {
    flex: 1;
    margin-right: auto;
    max-width: 320px;
  }
  .transactions .input-row .search-bar input {
    width: 100%;
  }
}
.budget-summary .card {
  margin: var(--spacing-xxl) 0 var(--spacing-lg);
}
.budget-summary .spending-summary h2 {
  margin-bottom: 1.25em;
}
.budget-summary .budget-container {
  grid-template-columns: 1fr;
}
.budget-summary .budget {
  flex-direction: row;
}
.budget-summary .budget .light-text {
  padding-left: 0.5em;
}

.budget-cards > .container > .card {
  row-gap: var(--spacing-lg);
}

.pots-cards > .container > .card {
  gap: var(--spacing-xxl);
}

.budget-cards .container,
.pots-cards .container {
  display: grid;
  gap: var(--spacing-lg);
}
.budget-cards .budget-color,
.pots-cards .budget-color {
  border-radius: 100vh;
  flex-shrink: 0;
  height: var(--spacing-md);
  margin-right: var(--spacing-md);
  width: var(--spacing-md);
}
.budget-cards .budget__bar,
.budget-cards .pot__bar,
.pots-cards .budget__bar,
.pots-cards .pot__bar {
  background-color: #f8f4f0;
  border-radius: var(--spacing-xxs);
  height: var(--spacing-xxl);
  margin: calc(-1 * var(--spacing-xxs)) 0;
  position: relative;
  padding: var(--spacing-xxs);
  z-index: 1;
}
.budget-cards .budget__bar__spent, .budget-cards .budget__bar__saved,
.budget-cards .pot__bar__spent,
.budget-cards .pot__bar__saved,
.pots-cards .budget__bar__spent,
.pots-cards .budget__bar__saved,
.pots-cards .pot__bar__spent,
.pots-cards .pot__bar__saved {
  border-radius: var(--spacing-xxs);
  height: calc(var(--spacing-xxl) - var(--spacing-xxs) * 2);
  position: relative;
  z-index: 2;
}
.budget-cards .pot__bar,
.pots-cards .pot__bar {
  height: var(--spacing-xs);
  margin: calc(-1 * var(--spacing-md)) 0 var(--spacing-sm);
  padding: 0;
}
.budget-cards .pot__bar__saved,
.pots-cards .pot__bar__saved {
  height: var(--spacing-xs);
}
.budget-cards .pot__bar + .row > .percentage,
.pots-cards .pot__bar + .row > .percentage {
  color: #696868;
  font-weight: 700;
}
.budget-cards .budget__spent-remaining,
.pots-cards .budget__spent-remaining {
  justify-content: flex-start;
}
.budget-cards .budget__spent-remaining > *,
.pots-cards .budget__spent-remaining > * {
  flex: 1;
}
.budget-cards .budget__transactions,
.pots-cards .budget__transactions {
  background-color: #f8f4f0;
  padding: var(--spacing-md);
}
.budget-cards .budget__transactions h3,
.pots-cards .budget__transactions h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}
.budget-cards .budget__transactions .transaction-list__image,
.pots-cards .budget__transactions .transaction-list__image {
  display: none;
}
.budget-cards .budget__transactions .divider,
.pots-cards .budget__transactions .divider {
  background-color: #696868;
  opacity: 0.15;
}

.pots__buttons {
  align-items: stretch;
  gap: var(--spacing-md);
}
.pots__buttons .btn {
  flex: 1;
}

main#pots .title-row {
  margin-bottom: var(--spacing-xxl);
}

@media (min-width: 48rem) {
  .budget-cards .budget__transactions .transaction-list__image {
    display: block;
  }
}
@media (min-width: 64rem) {
  main#budgets,
  .pots-cards > .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xxl) var(--spacing-lg);
  }
  main#budgets .title-row,
  .pots-cards > .container .title-row {
    grid-column: 1/-1;
  }
  main#budgets .budget-summary .card,
  .pots-cards > .container .budget-summary .card {
    margin: 0;
  }
  main#budgets .budget-summary .budgets-container,
  .pots-cards > .container .budget-summary .budgets-container {
    align-items: stretch;
    flex-direction: column;
    gap: var(--spacing-xxl);
  }
}
.bills-list__item {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: var(--spacing-xs);
}
.bills-list__date, .bills-list__value-and-date {
  grid-row: 2;
}
.bills-list__value-and-date,
.bills-list .right-align {
  justify-self: end;
}

.bills-card {
  gap: var(--spacing-xl);
}

.summary-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.bills-list__headers,
.bills-list__divider.first-divider {
  display: none;
}

.bills-list__date {
  align-items: center;
  display: flex;
  gap: var(--spacing-xs);
}
.bills-list__date .paid-icon,
.bills-list__date .due-soon-icon {
  display: none;
}
.bills-list__date.red .due-soon-icon {
  display: block;
}
.bills-list__date.green {
  color: #277c78;
}
.bills-list__date.green .paid-icon {
  display: block;
}
.bills-list__date p {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
}

.bills-list__date.red + .bills-list__value-and-date {
  color: #c94736;
}

@media (min-width: 48rem) {
  .bills-list__headers,
  .bills-list__divider.first-divider {
    display: grid;
  }
  .summary-cards {
    flex-direction: row;
    grid-column: 1/-1;
  }
  .bills-list__item {
    gap: var(--spacing-xxl);
    grid-template-columns: 4fr 1fr 2fr;
    justify-items: start;
  }
  .bills-list__date, .bills-list__value-and-date {
    grid-row: 1;
  }
  .bills-list__date {
    justify-content: space-between;
    justify-self: stretch;
  }
  .bills-list__image-and-title {
    grid-column: 1;
    grid-row: 1;
  }
  .recurring-bills .card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .recurring-bills .card-container .bills-card {
    grid-column: 1/-1;
  }
}
@media (min-width: 64rem) {
  .recurring-bills .card-container {
    grid-template-columns: 1fr 2fr;
  }
  .recurring-bills .card-container .summary-cards {
    justify-content: flex-start;
    flex-direction: column;
    grid-column: 1/1;
  }
  .recurring-bills .card-container .summary-cards > * {
    flex-grow: 0;
  }
  .recurring-bills .card-container .bills-card {
    grid-column: 2/span 1;
    grid-row: 1;
  }
}