@charset "utf-8";

/* Common */

#root {
  margin: 1em;
}

.disclaimer {
  font-size: small;
  margin-top: 2em;
}

.disclaimer h3 {
  margin: 0.5em 0;
}

.disclaimer p {
  margin: 0.25em 0;
}

/* Input Field */

div.inputField input {
  box-sizing: border-box;
  padding: 0.5em;
  width: 100%;
}

div.inputField div.errors {
  margin-top: 0.5em;
}

div.inputField span.error {
  color: red;
}

div.inputField span.warning {
  color: orange;
}

div.inputField span.info {
  color: blue;
}

/* Segmented Control */

div.segmentedControl {
  display: none;
  margin: 1em 0;
}

div.segment {
  border: 1px solid gray;
  border-left: none;
  flex: 1;
  padding: 0.5em;
  text-align: center;
}

div.segment:first-child {
  border-left: 1px solid gray;
  border-radius: 0.5em 0 0 0.5em;
}

div.segment:last-child {
  border-radius: 0 0.5em 0.5em 0;
}

div.segment.selected {
  background-color: lightgray;
}

/* Schedule Table */

table#schedule {
  border-collapse: collapse;
  margin: 1.5em 0;
}

table#schedule th, table#schedule td {
  border: 1px solid gray;
  padding: 0.5em;
  vertical-align: top;
}

table#schedule td.margin {
  border: none;
  border-right: 1.5em solid transparent;
  padding: 0;
}

table#schedule td.date, table#schedule td.start_time {
  white-space: nowrap;
}

table#schedule td del {
  color: gray;
}

/* Calendar */

table#calendar {
  border-collapse: collapse;
  margin: 1.5em 0;
}

table#calendar col.not_last {
  border-right: 1px dashed gray;
}

table#calendar col.last {
  border-right: 1px solid gray;
}

table#calendar tr {
  height: 1em;
}

table#calendar th, table#calendar td {
  text-align: center;
  vertical-align: middle;
}

table#calendar th.date, table#calendar td.hour, table#calendar td.cell {
  border: 1px solid gray;
  padding: 0.5em;
}

table#calendar td.dummy {
  padding: 0;
}

table#calendar td.margin {
  border-right: 1.5em solid transparent;
  padding: 0;
}

table#calendar td.cell {
  line-height: 1.5em;
  white-space: nowrap;
}

table#calendar td del {
  color: gray;
}

table#calendar td.gap {
  background-color: whitesmoke;
  border-bottom: 1px solid gray;
}

/* Mobile Device Support */

@media screen and (max-width: 499px) {
  div.segmentedControl {
    display: flex;
  }

  table#schedule.hidden, table#calendar.hidden {
    display: none;
  }
}