header {
  /*position: fixed;*/
  width: 100%;
  background: #efeff5;
  z-index: 1;
}

footer {
  background: #efeff5;
  padding: 10px 20px;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#container {
  flex: 1 1 0%;
  overflow: auto;
}

#content {
  /*margin-top: 90px;
  padding: 10px;*/
}

#user, #menu {
  float: left;
  width: 100%;
}

#user {
  padding: 5px;
}

#user button .glyphicon {
  margin: 5px;
}

#records .dates {
  margin-left: 10px;
}

.income:before {
  content: " + ";
}

.expense:before {
  content: " - ";
}

.income {
  color: green;
}

.expense {
  color: red;
}

.react-datepicker__input-container {
  width: inherit;
}

.react-datepicker-wrapper {
  width: 100%;
}

.react-datepicker {
  font-size: 1.3rem !important;
}

.react-datepicker__current-month {
  font-size: 1.5rem !important;
}

.react-datepicker__header {
  padding-top: 6px !important;
}

.react-datepicker__navigation {
  top: 13px !important;
}

.react-datepicker__day-name, .react-datepicker__day {
  margin: 0.5rem !important;
}

.w-100 {
  width: 100%;
}

.overflow-hidden {
  overflow: hidden;
}

.btn.active {
  z-index: 0!important;
}

.list-group .list-group-item.header {
  background-color: #efeff5;
}

.labels {
  padding: 5px;
}

.labels .btn .glyphicon {
  margin-right: 5px;
}

.labels .btn.label-item {
  color: #ffffff;
  /*mix-blend-mode: difference;*/
}

.labels .unlabeled {
  color: #000000;
}

.chart-wrapper {
  height: 300px;
}

.vcenter {
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
}