/* Custom properties for the default theme */
:root {
  --background-color: rgb(223, 222, 222);
  --background-color-bar: #aaa;
  --text-on-background: #111;
  --primary-color: #377ded;
  --text-on-primary: rgb(255, 255, 255);
  --box-size: 6em;
}
/* Custom properties for the dark theme */
[theme='dark'] {
  --background-color: rgb(29, 27, 27);
  --background-color-bar: rgb(68, 68, 68);
  --text-on-background: #fff;
  --primary-color: #5521a3;
  --text-on-primary: rgb(190, 181, 181);
}

/* Custom properites for the admin theme */
[theme='admin'] {
  --background-color: #111;
  --background-color-bar: #444;
  --text-on-background: #fff;
  --primary-color: #42f593;
  --text-on-primary: #111;
  font-size: .75em;
}
/* Whole page */
html {
  font-family:serif;
  background-color: var(--background-color);
  user-select: none;
  color: var(--text-on-background);
}
/* Container for the bus-list grid */
.container {
  display: grid;
  max-width: calc(10 * var(--box-size));
  margin: auto;
  padding: 10px;
  grid-template-columns: repeat(auto-fill, minmax(var(--box-size), 100fr));
}
/* Styles for each individual number box */
.number-box {
  background-color: transparent;
  width: auto;
  height: var(--box-size);
  text-align: center;
  color: var(--text-on-background);
}
/* Styles for number boxes that are arrived */
.number-box.arrived {
  background-color: var(--primary-color);
}
.container.edit .number-box,
.container.admin .number-box {
  cursor: pointer;
}
.container:not(.edit) .number-box.hidden {
  display: none;
}
.container.edit .number-box.hidden {
  opacity: 0.5;
}
/* Styles for the numbers inside number boxes */
.number-box .number {
  font-weight: bold;
  font-size: 3em;
  color: var(--text-on-background);
}
/* Styles for the numbers inside arrived number boxes */
.number-box.arrived .number {
  color: var(--text-on-primary);
}
/* Styles for the 'ARRIVED' text when its parent does not have the arrived class */
.number-box:not(.arrived) .arrived-text {
  display: none;
}
/* Styles for the 'ARRIVED' text when its parent has the arrived class */
.number-box.arrived .arrived-text {
  color: var(--text-on-primary);
  margin-top: 0.5em;
}
/* Styles for the buttons */
button,
input.btn {
  background-color: var(--primary-color);
  border: none;
  color: var(--text-on-primary);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  padding: 0.5em 1em;
  margin: 0.2em;
  font-size: 1.2em;
  font-weight: 500;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 0.2em;
}
/* Styles the Menu*/
.menu{
  margin-top: 1em;
  margin-left:1em;
  margin-right:1em;
  border-radius: 0.4em;
  border-bottom: 1px solid var(--primary-color);
}
/* Styles for hidden menus */
.menu.hidden {
  display: none;
}
/* Styles for refresh timer */
#refresh-timer {
  width: 100%;
}
/* Styles for the progress bars */
progress {
  background-color: var(--background-color-bar);
  border: 0;
}
progress::-webkit-progress-bar {
  background-color: var(--background-color-bar);
}
progress::-webkit-progress-value {
  background-color: var(--primary-color);
}
progress::-moz-progress-bar {
  background-color: var(--primary-color);
}
/* Styles for error message */
#error {
  font-family: monospace;
  color: red;
}
/* Styles for the overline class */
.overline {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5em;
}

@keyframes flash {
  from {
    border-color: #ffff;
  }
  to {
    border-color: #fff9;
  }
}
.container.admin .number-box.select {
  box-sizing: border-box;
  border-color: #fff;
  border-style: solid;
  border-width: 0.2em;
  animation: flash 0.5s ease-out 0s infinite alternate;
}
input.text {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  background-color: var(--background-color-bar);
  border-style: solid;
  border-color: var(--primary-color);
}
div.main {
  margin: auto;
}