body, table, h1, h2, h3 {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

h1, h2, h3 {
  font-weight: bold;
}

body, table {
  font-size: 12px;
}

h1 {
  font-size: 16px;
}

h2 {
  font-size: 14px;
}

h3 {
  font-size: 13px;
}

a {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-decoration: none;
  color: #666666;
}

a:hover {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-decoration: none;
  color: #cc3328;
}

form, textarea, input, select, checkbox { 
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 12px;
  color: black;
}

body {
  background-color: white;
}

.bg0 {
  background-color: #c9d8d8;
}
.bg0-active {
  background-color: #fcebb1;
}

.bg1 {
  background-color: #e6f2f2;
}

.sign {
  background-color: #c9d8d8;
}
.sign-active {
  background-color: #ffcccc;
}

.admin {
  background-color: #fcebb1;
}

input[type="text"], input[type="date"], input[type="email"], textarea {
  padding-top: 3px;
  padding-bottom: 3px;
  border: solid black 1px;
  border-radius: 2px;
  box-sizing: border-box;
  &:invalid {
    background-color: #ffe0e0;
  }
}

label {
  color: #c00000;
  font-size: 70%;
  position: absolute;
  transform: translateX(calc(-100% - 4px));
  text-align: right;
}

td.cal {
  padding: 5px 0px 5px 0px;
  box-sizing: border-box;
}

td.hdr {
  font-size: 9px;
  text-align: center;
}

td.over {
  background-color: #dddddd;
}

table.list {
  border-collapse: collapse;
}

tr.list {
  border-top: 1px solid black;
#  vertical-align: text-top;
}

tr.list:nth-child(even) {
  background-color: #e6f2f2;
}

td.list {
  padding: 10px;
}

th.list {
  padding: 10px;
  font-weight: normal;
}

button.weekday, button.weekend, button.booking0, button.booking1, button.booking2, button.bookingVormerkung, button.bookingBaumassnahme, button.bookingAbgeschlossen, button.savenotes {
  width: 100%;
  max-width: calc(100%);
  height: 100%;
  box-sizing: border-box;
  font-size: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  border: solid black 1px;
  border-radius: 2px;
  &:hover {
    opacity: .7;
  }
}

button.weekday {
  background-color: #cccccc;
}

button.weekend {
  background-color: #ccccff;
}

button.booking0 {
  background-color: #ffcccc;
}

button.booking1 {
  background-color: #ffcc66;
}

button.booking2 {
  background-color: #ff66cc;
}

button.bookingVormerkung {
  background-color: #eeeeee;
}

button.bookingBaumassnahme {
  background-color: #ffffff;
}

button.bookingAbgeschlossen {
  background-color: #cccccc;
}

button.savenotes {
  font-size: 20px;
  padding-left: 0px;
  padding-right: 0px;
  margin-left: 0px;
  margin-right: 0px;
  background-color: #dddddd;
  &:hover {
    opacity: .7;
    background-color: #ddffdd;
  }
}

.clip {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hidden {
  display: none;
}

legend {
  background-color: white;
  margin-left: auto;
}

footer {
  width: calc(100% - 1em);
  position: fixed;
  left: 0%;
  bottom: 1em;
  text-align: right;
  font-size: 10px;
  opacity: .5;
}