html {
  width: 100%;
  position: relative;
  background-color: #fafbfc;
}

body {
  width: 100%;
  position: relative;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
@media only screen and (min-width: 992px) {
  body {
    font-size: 1.1em;
  }
}
@media only screen and (min-width: 1200px) {
  body {
    font-size: 1.2em;
  }
}

.page-container {
  min-height: 100vh;
}

header {
  height: 4em;
  background-color: #fff;
  border-bottom: 1px solid #e1e4e8;
}

main {
  padding-bottom: 3em;
  max-width: 800px;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) {
  main {
    max-width: 1000px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 1fr 1fr;
  }
}

footer {
  background-color: #fff;
  border-top: 1px solid #e1e4e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3em;
}

h1 {
  font-size: 2em;
  font-weight: 200;
}

h2 {
  font-size: 1.3em;
  font-weight: 300;
}

input, select {
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  appearance: none;
  outline: none;
  border-radius: 4px;
  padding: 4px;
}
input:focus, select:focus {
  box-shadow: 0 0 2px 1px #70c4fc;
}

select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='212121' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  min-width: max-content;
  padding-right: 1rem;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
table th {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-weight: 300;
  background-color: #fff;
  border-bottom: 1px solid #e1e4e8;
}
@media only screen and (max-width: 1199px) {
  table th {
    position: sticky;
    top: 9.2em;
  }
}
@media only screen and (max-width: 599px) {
  table tr:last-of-type td {
    border-bottom: none;
  }
  table tr td select {
    background-position-y: 0;
  }
}
table tr td {
  border-bottom: 1px solid #e1e4e8;
  height: 2em;
}
table tr td + td {
  border-left: 1px solid #e1e4e8;
}
table tr td * {
  border: none;
  border-radius: 0;
  height: 100%;
  width: 100%;
}
table tr td *:focus {
  box-shadow: inset 0 0 2px 1px #70c4fc;
}
table tr td input {
  margin: 0;
  padding: 0 4px;
}

.color-positive {
  color: #2e8540;
  font-weight: 500;
}

.color-negative {
  color: #981b1e;
  font-weight: 500;
}

.color-neutral {
  font-weight: 500;
}

.money-table, .budget-summary, .welcome {
  background-color: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 4px;
  margin: 1em;
  padding: 1em;
  display: block;
  position: relative;
}

@media only screen and (min-width: 1200px) {
  .welcome {
    grid-row: 1;
    grid-column: 1/span 2;
  }
}
.welcome p {
  font-weight: 300;
}
.welcome p + p {
  margin-top: 0.5em;
}

header {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
  background-color: #94bfa2;
}

footer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: center;
  font-size: 0.7em;
  line-height: 3em;
  background-color: #94bfa2;
}
@media only screen and (min-width: 400px) {
  footer {
    grid-template-columns: 1fr repeat(3, auto);
    grid-template-rows: 1fr;
    column-gap: 1em;
    padding: 0 1em;
  }
}
footer .legal {
  height: 1.5em;
  line-height: 1.5em;
}
@media only screen and (min-width: 400px) {
  footer .legal {
    height: 3em;
    line-height: 3em;
  }
  footer .legal:first-child {
    justify-self: left;
  }
}

.budget-summary {
  margin-bottom: 1em;
}
@media only screen and (max-width: 1199px) {
  .budget-summary {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}
.budget-summary .header {
  display: flex;
}
.budget-summary .header label {
  flex: 1 0 auto;
  align-self: center;
}
.budget-summary .header select {
  flex: 0 0 auto;
  height: 2em;
  background-position-y: 1px;
}
.budget-summary .row {
  display: flex;
  margin-top: 0.5em;
}
@media only screen and (min-width: 1200px) {
  .budget-summary .row {
    margin-top: 1em;
  }
}
.budget-summary .row label {
  font-weight: 300;
  flex: 1 0 auto;
}
.budget-summary .row span {
  flex: 0 0 auto;
}
@media only screen and (min-width: 1200px) {
  .budget-summary hr {
    margin-top: 1em;
  }
}
@media only screen and (max-width: 599px) {
  .budget-summary {
    border-left: none;
    border-right: none;
    border-radius: 0;
    margin: 0;
    margin-bottom: 1em;
  }
  .budget-summary .header select {
    background-position-y: -1px;
  }
}
@media only screen and (min-width: 1200px) {
  .budget-summary {
    grid-row: 2;
    grid-column: 1;
  }
}

.money-table {
  margin-bottom: 1em;
}
@media only screen and (max-width: 599px) {
  .money-table {
    border-left: none;
    border-right: none;
    border-radius: 0;
    margin: 0;
    margin-bottom: 1em;
    padding: 0 0.5em 0.5em 0.5em;
  }
}
@media only screen and (min-width: 1200px) {
  .money-table.income-table {
    grid-row: 2;
    grid-column: 2;
  }
}
@media only screen and (min-width: 1200px) {
  .money-table.expense-table {
    grid-row: 3;
    grid-column: 1/span 2;
  }
}

/*# sourceMappingURL=index.css.map */