body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow-x: scroll;
}

/* Content */

h1 {
  font-family: sans-serif;
  color: black;
  font-size: 20pt;
  font-weight: lighter;
  top: 0px;
}

h2 {
  font-size: 14pt;
  font-weight: lighter;
  position: fixed;
  margin-top: 0px;
}

/* Table */

table#facts, table#payments, table.month {
  display: table;
  font-size: 10pt;
  border-collapse: collapse;
  background-color: white;
}

table#facts, table#payments {
  display: inline-table;
  margin: 0 auto;
  margin: 0px 50px 50px 0px;
  position: absolute;
}

table#facts{
  min-width: 80%;
}

table.month {
  min-width: 450px;
  margin: 0px 0px 20px 0px;
}

table, td, th {
  border: 1px solid black;
}

td, th {
  padding: 4px 8px 4px 8px;
  text-align: center;
  outline: none;
  white-space: nowrap;
}

.faded {
  opacity: 0.4;
}
.faded th, .faded td {
  background-color: #ddd !important;
  font-weight: normal;
}
.faded:hover {
  opacity: 1;
}

td.faded {
  background-color: #fffaeb;
  opacity: 1;
}

tbody th {
  text-align: left;
  padding-right: 20px;
}

.today {
  background-color: #27f5c1 !important;
  font-weight: bold;
}

th, td {
  background-color: #fff0bf;
}

/*tr:nth-child(even) {
  background-color: #e8d5ff;
}
tr:nth-child(even) .today {
  background-color: #00cead;
}*/

thead th, thead td {
  background-color: #ff642e;
}

tbody tr.warning td.dates {
  background-color: #ff642e !important;
}

/* Sticky first column */
table#labels {
  display: inline-table;
  position: fixed;
  top: 135px;
  left: -300px;
  z-index: 10;
  font-size: 10pt;
  border-collapse: collapse;
  background-color: white;
}
table#labels.visible {
  left: 0px;
  transition: left 0.5s ease-in;
}

/* Tooltips */

.tooltip > .tooltip-inner {
  font-size: 9pt;
  position: relative;
  top: 12px;
}
.tooltip.top .tooltip-arrow {
  bottom: -12px !important;
}
.tooltip-inner strike {
  text-decoration: line-through;
  color: red;
}

/* Editable numbers */

.edited {
  background-color: #90dec4 !important;
  color: #333;
}
[data-id="cost-for-food"].edited, [data-id="cost-for-room"].edited, [data-id="cost-for-food"].edited:hover, [data-id="cost-for-room"].edited:hover {
  background-color: #333 !important;
  color: #fff955;
}
body.editable .editable {
  cursor: pointer;
}
body.editable td.editable:hover {
  background-color: #90dec4 !important;
}

/* Checkable boxes */
body.editable .checkable {
  cursor: pointer;
}
body.editable .editable:hover {
  background-color: #90dec4 !important;
}
.boolean.false {
  background-color: #fffaeb;
}
.boolean.n-a {
  background-color: grey;
  cursor: default !important;
}
.boolean.false.n-a:after, .boolean.true.n-a:after {
  content: "n/a";
}
.boolean.false:after {
  content: "no";
}
.boolean.true:after {
  content: "yes";
}
body.read-only .boolean.true:after {
  content: "";
}


/* Form */

form {
  text-align: right;
  float: left;
  position: absolute;
  padding: 0px;
}

label, button, input {
  font-family: sans-serif;
  font-size: 9pt;
  padding: 6px 6px 6px 6px;
  outline: none;
}

button:hover, input:hover {
  background-color: #eee;
}
input:focus {
  border-color: #00627e;
  background-color: white;
}
button:active {
  border-color: #00627e;
  background-color: white;
}

label {
  font-weight: bold;
}

input {
  padding: 6px 6px 6px 6px;
  margin: 3px;
  border: 1px #00c694 solid;
  background-color: white;
  width: 120px;
  text-align: center;
}

select {
  margin: 3px;
  font-family: sans-serif;
  font-size: 9pt;
  border: 1px #00c694 solid;
  background-color: white;
  text-align: center;
}

checkbox {
  border: 1px #00c694 solid;
}

button {
  width: 120px;
  margin: 3px;
  border: 1px #ff642e solid;
  background-color: white;
  font-weight: bold;
}

/* Payments */

.above-table-form{
  top: 80px;
  left: 467px;
}
.above-table-form input {
  width: 40px;
}
.above-table-form button {
  width: auto;
}
body[data-page="payment"] h1 {
  left: 30px;
  margin-top: 80px;
  position: absolute;
}
body[data-page="payment"] table#payments {
  left: 30px;
  top: 130px;
}

/* Range facts */

body[data-page="rangefacts"] h1 {
  margin-top: 55px;
  position: fixed;
  left: 230px;
}

body[data-page="rangefacts"] h2 {
  left: 230px;
  top: 95px;
}

body[data-page="rangefacts"] table#facts {
  top: 135px;
  left: 230px;
}

body[data-page="rangefacts"] form {
  top: 135px;
  margin: -3px;
  margin-left: 25px;
}

.tag {
  font-size: 9px;
  padding: 2px;
  margin: 1px;
  display: inline-block;
  background-color: #0e1d3c;
  color: #ffdcdc;
  font-weight: bold;
  max-width: 45px;
  max-height: 25px;
  overflow: hidden;
  white-space: nowrap;
  cursor: default;
}
.tag:hover {
  background-color: #444;
  max-width: none;
  max-height: none;
}

td.tags {
  padding: 0px;
  overflow:hidden;
}

/* Accounting */

body[data-page="accounting"] {
  margin: 70px 0px 0px 30px;
}
body[data-page="accounting"] h1 {
  margin-bottom: 11pt;
}
body[data-page="accounting"] .title-row {
  background-color: #90dec4;
}
table.month td, table.month th {
  background-color: #fffaeb;
}
table.month th.name {
  width: 130px;
  text-align: right;
  padding-right: 8px;
}
table.month tr.monthly-total th, table.month tr.monthly-total td {
  background-color: #fff0bf;
}
.monthly-total th {
  text-align: right;
}

tr.removed-from-list {
  opacity: 0.8;
  background-color: grey !important;
}

/* Co-owners */

body[data-page="co-owners"] {
  margin: 70px 0px 0px 30px;
}
body[data-page="co-owners"] h1 {
  margin-bottom: 11pt;
}

/* Anchor links offset (because of fixed header) */
a.anchor {
    display: block;
    position: relative;
    top: -50px;
    visibility: hidden;
}

/* For fixed position header on payments, we need some reliable widths */

/*thead .name {
  width: 170px;
  max-width: 170px;
  min-width: 170px;
  overflow: hidden;
}
tbody .name {
  width: 150px;
  max-width: 150px;
  min-width: 150px;
  overflow: hidden;
}
thead .dates, tbody .dates {
  padding: 4px 8px 4px 8px;
  width: 75px;
  max-width: 75px;
  overflow: hidden;
}
thead .invoice, tbody .invoice{
  width: 130px;
  max-width: 130px;
  min-width: 130px;
  overflow: hidden;
}
thead .paid, tbody .paid {
  width: 80px;
  max-width: 80px;
  min-width: 80px;
  overflow: hidden;
}
.sticky {
  display: none;
  position: fixed;
  margin-left: -1px;
  top: 35px;
  z-index: 100;
}
.sticky.visible {
  display: table-row;
}

table#payments, .sticky {
  width: 1195px;
}
body.read-only table#payments, body.read-only .sticky {
  width: 1200px;
}*/

body.please-refresh[data-page="payment"] table#payments {
  opacity: .8;
  top: 215px;
}
body.please-refresh table td, body.please-refresh table th {
  background-color: grey !important;
}
.please-refresh-message {
  display: none;
}
body.please-refresh .please-refresh-message {
  display: block;
  position: absolute;
  top: 100px;
  right: 100px;
  background-color: rgba(255, 192, 203, 0.6901960784313725);;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 999;
  font-size: 38px;
  padding: 10px 40px 30px 40px;
  font-weight: bold;
}