html {
  font-size: 10px;
}
body {
  font-family: -apple-system, Helvetica, Arial, sans-serif;
  margin: 18px 24px;
  font-size: 1.4rem;
  color: #333;
  line-height: 1.42857143;
}
#title {
  display: none;
  font-weight: bold;
  color: #b3b3b3;
  font-size: 16px;
  margin-bottom: 16px;
  text-align: center;
}
body .info,
body .charts,
body .reports {
  display: none;
}
body.info .info {
  display: block;
}
body.info .info .label {
  width: 200px;
  display: inline-block;
}
body.charts .charts {
  display: block;
  margin: 0 auto;
  max-width: 75%;
}
body.reports .reports {
  display: block;
}
body.reports .reports .reports-expenses .editable {
  outline: none;
  -webkit-user-modify: read-write;
  -webkit-user-modify: read-write-plaintext-only;
}
body.reports .reports .reports-expenses .editable:hover {
  background: lightgoldenrodyellow;
}
body.reports .reports .reports-expenses table {
  border-collapse: collapse;
  width: 100%;
}
body.reports .reports .reports-expenses thead {
  font-weight: bold;
}
body.reports .reports .reports-expenses td {
  border: 1px solid black;
  padding: 4px;
}
body.reports .reports .reports-expenses table {
  width: 100%;
}
body.reports .reports .reports-expenses table th,
body.reports .reports .reports-expenses table td {
  text-align: left;
  padding: 6px;
  border: 1px solid #ccc;
}
body.reports .reports .reports-expenses table .date {
  width: 120px;
  white-space: nowrap;
}
body.reports .reports .reports-expenses table .total {
  width: 180px;
  white-space: nowrap;
  text-align: right;
}
@page {
  margin: 10%;
  @top-left {
    content: "Receipts";
  }
  @top-right {
    content: "Page " counter(page);
  }
}
body.print .tab {
  display: none !important;
}
body.print thead {
  display: table-header-group;
}
body.print tr {
  page-break-before: auto;
  page-break-inside: avoid;
  page-break-after: avoid;
}
body.print tr * {
  page-break-before: avoid;
  page-break-inside: avoid;
  page-break-after: avoid;
}
.container {
  width: 100%;
  display: flex;
  margin-top: 18px;
  flex-wrap: wrap;
}
.container h1 {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 24px;
  border-bottom: 1px solid #b3b3b3;
  margin-top: 0;
}
.container .box {
  min-width: 600px;
  margin-right: 18px;
  margin-bottom: 36px;
  flex-grow: 1;
}
.container .grow {
  flex-grow: 1;
}
.container .legend table {
  width: 100%;
  table-layout: fixed;
}
.container .legend .color {
  width: 32px;
  text-align: center;
}
.container .legend .color span {
  display: inline-block;
  width: 30px;
  height: 12px;
  vertical-align: middle;
}
.container .legend .title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.container .legend .sum {
  text-align: right;
}
