style.css

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

html.loading,
html.loading body {
  height: 100%;
}

html.loading body {
  display: flex;
  justify-content: center;
  align-items: center;
}

html.loading #app {
  display: none;
}

#loader {
  display: none;
  margin: auto;
}

html.loading #loader {
  display: block;
}

h1 {
  text-align: center;
  padding: 25px 0;
}

.month {
  margin: 15px;
  padding: 15px;
  background-color: #f5f5f5;
  cursor: pointer;
}

.month:hover {
  background-color: #e5e5e5;
}

.month-description {
  font-weight: bold;
}

.delta-indicator-no-change {
  color: gray;
}

.delta-indicator-increase {
  color: green;
}

.delta-indicator-decrease {
  color: red;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active em versões anteriores a 2.1.8 */ {
  opacity: 0;
}

.month .details {
  background-color: white;
  margin-top: 10px;
}

.month .details table {
  margin-bottom: 0;
}

.amount-column {
  width: 200px;
}

.negative-amount {
  color: red;
}