/* style.css */
/* © 2015-2021 Bernard Perrin */
/* https://opensource.org/licenses/UPL */
:root {
  /* derived from material palette */
  --dark-primary: #00796B;
  --default-primary: #009688;
  --light-primary: #B2DFDB;
  --text-primary: #FFFFFF;
  --accent: #FFEB3B;
  --primary-text: #212121;
  --secondary-text: #757575;
  --divider: #BDBDBD;
}

body {
  background-size: cover;
  margin: 0;
  border: 0;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-variant: slashed-zero;
  padding: 2px;
  background: #DDD;
}

h1,
canvas,
p {
  padding: 2px;
  margin: 0;
}

canvas {
  opacity: 0.5;
}

header {
  background-color: var(--dark-primary);
  color: var(--text-primary);
  text-align: left;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 16px;
  padding: 6px 4px;
}

footer {
  background-color: var(--dark-primary);
  color: var(--text-primary);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: left;
  font-size: 14px;
  /* TBD white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */
}

table {
  border-collapse: collapse;
  width: 99%;
  font-size: 14px;
  margin: 0 auto;
}

th {
  border: 1px solid var(--divider);
  background-color: var(--default-primary);
  color: var(--text-primary);
  text-overflow: ellipsis;
}

td {
  border: 1px solid var(--divider);
  color: black;
  padding: 3px;
}

div {
  margin-top: 0.5em;
}

#not-kb-result {
  font-family: "Liberation Mono", monospace;
}

.lettrine {
  color: Snow;
  border-radius: 10px;
  padding: 1px 4px 0 4px;
  font-family: monospace;
  font-size: large;
  border: 0;
}

.grey {
  background-color: DarkGrey;
}

.blue {
  background-color: blue;
}

.orange {
  background-color: DarkOrange;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.note {
  font-size: small;
}

.title {
  font-size: large;
}

.time {
  font-size: large;
  float: right;
  vertical-align: middle;
  padding-right: 12px;
  margin: 0;
}

.remain {
  font-size: x-small;
  padding-right: 4px;
  padding-top: 4px;
}

.calMoon {
  float: right;
  vertical-align: top;
}

.calEphIn {
  color: black;
  font-size: x-small;
}

.calEphOut {
  color: LightGrey;
  font-size: x-small;
}

.calDay {
  text-align: center;
}

.calTitle {
  font-size: large;
}

.calDayIn {
  color: black;
  font-size: large;
}

.calDayOut {
  color: LightGrey;
  font-size: large;
}

.kbResult {
  text-align: left;
}

.noborder {
  border: 0;
}

.userdoc {
  vertical-align: middle;
}

.bouton {
  border-radius: 4px;
  font-size: large;
  padding: 0 4px 0 4px;
}

.toRight {
  float: right;
}

.noDeco {
  margin: 0;
  border: 0;
  padding: 0
}

/* todo make alternate coloring a class and not a tag attribute */
tr:nth-child(odd) {
  background-color: Snow;
}

tr:nth-child(even) {
  background-color: white;
}

input {
  border-radius: 2px;
  border: 1px solid DarkGray;
  margin: 2px;
}

textarea {
  height: 15rem;
  width: 99%;
  margin: 0 auto;
  white-space: pre;
}

/* centering on top bar inspired by https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ */
#top-button {
  display: none;
  position: fixed;
  top: 3px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 99;
}

/* for game */
.gameFixed {
  height: 30px;
  width: 30px;
  font-size: x-large;
}

.sudoku {
  height: 40px;
  width: 40px;
  font-size: x-large;
  overflow: hidden;
  table-layout: fixed;
}

.gameExtra {
  background-color: Red;
}

.gameLarge {
  background-color: Green;
}

.gameSelect {
  background-color: lightGreen;
}

.gameNormal {
  background-color: White;
}

/* for planning */
.plaNeutral {
  background-color: White;
  font-size: x-small;
}

.plaMorning {
  background-color: #F7D0FC;
  font-size: x-small;
}

.plaDay {
  background-color: #D3F3FE;
  font-size: x-small;
}

.plaEvening {
  background-color: #D7FDD1;
  font-size: x-small;
}

.plaNight {
  background-color: #F4B6B5;
  font-size: x-small;
}

.plaPto {
  background-color: LightGray;
  font-size: x-small;
}

.plaBio {
  background-color: SaddleBrown;
  font-size: x-small;
}

.plaOrd {
  background-color: Gray;
  font-size: x-small;
}

.plaSac {
  background-color: Yellow;
  font-size: x-small;
}

/* conditional styles depending on output device */
@media (orientation: portrait) {
  body {
    background: #AAA;
  }
}