styles.css

/* Root global variables */
:root {
  /* --chart-background-color: gray; */
  --chart-background-color: transparent;
  --empty-color: azure;
  /* --empty-color: transparent; */
  --wait-box: yellow;
  --processing-box: #00ff00;
  --switch-box: #ff0000;
}

/* Flex stuff */
.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

.align-items-center {
  align-items: center;
}

.align-items-start {
  align-items: flex-start;
}

.center {
  justify-content: center;
}

.evenly {
  justify-content: space-evenly;
}

.between {
  justify-content: space-between;
}

.wrap {
  flex-wrap: wrap;
}

.flex-grow {
  flex-grow: 1;
}

.stretch {
  align-items: stretch;
}

/* Base CSS items */
.button {
  width: 100px;
  cursor: pointer;
}

.box {
  color: white;
  padding: 5px;
  margin: 2px;
  /* border: 1px solid #87cefa; */
  border: none;
  border-radius: 4px;
  /* font-size: 16px; */
  color: #333333;
  min-width: 0px !important;
  width: auto !important;
  height: 100px;
}

/* CSS Colors */
.blue {
  background: #87cefa;
}

.green {
  background: #2e8b57;
  color: #fff;
}

.red {
  background: red;
}

.yellow {
  background: yellow;
}

/* Etc */

.mw-200 {
  max-width: 200px;
}

.mw-50 {
  max-width: 50px;
}
.mh-100 {
  max-height: 100px;
}

.p-5 {
  padding: 2px;
  margin: 2px;
}

.pm-0 {
  padding: 0px;
  margin: 0px;
}

.small-text {
  font-size: 10px;
}