@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
* { margin: 0; padding: 0; }
body { font-size: 11px; }
input  { font-size: 11px; padding: 2px; }
select { font-size: 11px; padding: 2px; }
a { color: black; }
table { border-spacing: 0; border-collapse: collapse; }

.side {
  position: fixed;
  top: 0; left: 0;
  width: 84px;
  margin: 16px;
}
.side-items { list-style: none; }
.content { padding: 0 0 16px 116px; }
.input-area { height: 48px; display: table-cell; vertical-align: middle; }
.table-area { width: 100%; height: calc(100vh - 64px); overflow: hidden; }
.float-left { float: left; }
.right { text-align: right; }
.red { color: red; }

.dialog .input-area { width: 900px; }
.dialog button { padding: 2px 8px; }

/* for balance sheet */
table.balance-sheet { margin: 16px 0; }
.balance-sheet th, .balance-sheet td {
  border: 1px solid black; padding: 2px 0;
  text-align: center; vertical-align: middle;
}
.balance-sheet th { font-weight: normal; }
td.balance-min-label { font-size: 8px; }
td.balance-amount { text-align: right; padding-right: 6px; }
td.balance-amount-slash {
  background-image: linear-gradient(-11.5deg, transparent 49%, black 49%, black 51%, transparent 51%, transparent);
}

/* for statement */
.statements th, .statements td { border: none; padding: 16px 0 0 0; vertical-align: top; }
.statement th, .statement td {
  border: 1px solid black; padding: 2px 0;
  text-align: center; vertical-align: middle;
}
.statement th { font-weight: normal; }
.statement-title { font-weight: bold; }
td.statement-amount { text-align: right; padding-right: 6px; }

/* for ledger */
.ledger-search { padding: 4px 0; }
.ledger-search label { margin-right: 4px; }
.ledger-search input { margin-right: 8px; }

/* for ledger account buttons */
#account-buttons { padding: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.ac-btn { border: 1px solid #bbb; border-radius: 3px; padding: 2px 6px; font-size: 10px; cursor: pointer; background: #f5f5f5; }
.ac-btn:hover { background: #2980b9; color: #fff; border-color: #2980b9; }
#msg { font-size: 11px; color: #888; margin-left: 8px; }

/* for pikaday */
.is-outside-current-month { cursor: pointer; }
.is-outside-current-month:hover .pika-button {
  color: #fff; background: #ff8000;
  box-shadow: none; border-radius: 3px; opacity: 1.0;
}