body {
  background-color: white;
  color: black;
  height: 100%;
  margin: 5em 10%;
}

h1, h2, div, span, label {
  -moz-user-select: none;
}

value {
  -moz-user-select: text;
}

a {
  text-decoration: none;
}

div.buttons {
  position: absolute;
  right: 5%;
}

div.buttons > button {
  margin: 1em;
}

/* Auth */

form, values {
  display: grid;
  grid-template-columns: max-content max-content;

  grid-gap: 8px;
  gap: 8px;
  align-items: center;
}

form > label,
values label {
  grid-column: 1;
  justify-self: start;

}

form > select,
form > input,
values value,
values div {
  grid-column: 2;
  justify-self: start;
}

form > span,
form > button {
  grid-column: 3;
  justify-self: start;
}

header {
  font-weight: bold;
}

#authResult {
  margin-top: 2em;
}


/* Customer */

values label {
  margin-right: 1em;
}

values value {
  padding: 0.2em 0.3em;
}

/* Table for licenses and payments */

table {
  border-collapse: collapse;
}

th, td {
  padding: 0.2em 0.5em;
  border: 1px solid grey;
}


/* Licenses */

tr.license-trial td {
}

tr.license-paid td.licenseType {
}

tr.license-reimbursed td.licenseType {
  font-weight: bold;
}

/*
td.start,
td.end {
  padding: 0 0.4em;
}
*/


/* Payments */

tr.payment-paid {
}

tr.payment-reimbursed {
  color: red;
}

td.invoice {
}

tr.payment-total {
  font-weight: bold;
}

td.currencyValue {
  text-align: right;
}

/* Next Payments */

#upcomingPayments p {
  max-width: 50em;
}

/* Actions */

/* Tabs */

.tab,
.tab:not(:checked) + .tabs,
.tab:not(:checked) + .tabs + .tabpanel {
  display: none;
}

.tabs span {
  border: 1px solid;
}

.tabs label {
  border: 1px solid transparent;
  background-color: lightgrey;
  cursor: pointer;
}

.tabpanel {
  border: 1px solid;
  padding: 1em 1ch;
  display: inline-grid;
}

textarea {
  height: 8em;
  width: 18em;
}

/* Font Awesome icons */
/* all icons are clickable */
.fa {
  cursor: pointer;
}

/* delete icon is red */
.fa-times-circle {
  color: red;
}