:root {
  --mainWhite: #f5f5f5f5;
  --mainDark: #333333;
  --mainGreen: #317b22;
  --mainRed: #b80c09;
  --mainBlue: #05668d;
}

body {
  background: var(--mainWhite);
  color: var(--mainDark);
}
.budget-feedback,
.expense-feedback {
  display: none;
}

.budget-form {
  border: 0.15rem solid var(--mainGreen);
  padding: 1rem;
  border-radius: 0.25rem;
}
.expense-form {
  border: 0.15rem solid var(--mainRed);
  padding: 1rem;
  border-radius: 0.25rem;
}
.budget-submit {
  background: transparent;
  border: 0.1rem solid var(--mainGreen);
  color: var(--mainGreen);
}
.expense-submit {
  background: transparent;
  border: 0.1rem solid var(--mainRed);
  color: var(--mainRed);
}
.expense-submit:hover {
  background: var(--mainRed);
  color: var(--mainWhite);
}
.budget-submit:hover {
  background: var(--mainGreen);
  color: var(--mainDark);
}

.budget-input {
  border: 0.05rem solid var(--mainGreen) !important;
}
.expense-input {
  border: 0.05rem solid var(--mainRed) !important;
}
.expense-amount,
.expense-title {
  color: var(--mainRed);
}
.edit-icon {
  color: var(--mainBlue);
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none !important;
}
.delete-icon {
  color: var(--mainRed);
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none !important;
}
.edit-icon:hover {
  color: var(--mainBlue);
}
.delete-icon:hover {
  color: var(--mainRed);
}
.showItem {
  display: block;
}
.info-title {
  font-size: 1.5rem;
}
.budget {
  font-size: 1.6rem;
  color: var(--mainGreen);
}
.expense {
  font-size: 1.6rem;
  color: var(--mainRed);
}
.balance {
  font-size: 1.6rem;
}
.budget-icon,
.expense-icon,
.balance-icon {
  font-size: 2.5rem;
  color: var(--mainBlue);
}
.showRed {
  color: var(--mainRed);
}
.showGreen {
  color: var(--mainGreen);
}
.showBlack {
  color: var(--mainDark);
}
@media screen and (min-width: 992px) {
  .budget {
    font-size: 2.6rem;
    color: var(--mainGreen);
  }
  .expense {
    font-size: 2.6rem;
    color: var(--mainRed);
  }
  .balance {
    font-size: 2.6rem;
  }
  .budget-icon,
  .expense-icon,
  .balance-icon {
    font-size: 3.5rem;
    color: var(--mainBlue);
  }
}
.list-item {
  flex: 0 0 33.33%;
  text-align: center;
}
.expense-item {
  height: 2rem;
}