/* qwixx.css */
.cell {
  text-align: center;
  vertical-align: middle;
  border: thin solid black;
  flex: 1;
  position: relative;
  font-size: 20px;
  font-size: 6vw;
}
.cellRow {
  font-size: 20px;
  font-size: 6vw;
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
}
.cellRowContainer {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  flex: 5;
}
.invisible {
  visibility: hidden;
}
@media (orientation: portrait) {
  .cellRow {
    width: 100%;
    flex-flow: column nowrap;
    font-size: 4vh;
  }
  .cellRowContainer {
    width: 100%;
    flex-flow: row nowrap;
    flex: 12;
  }
  .dice {
    font-size: 200%;
  }
}
@media (orientation: landscape) {
  .cell {
    font-size: 4vw;
  }
  .dice {
    font-size: 140%;
  }
}
.allContainer {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}
html,
body {
  height: 100%;
  margin: 0;
}
.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.otherRow {
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  flex: 1;
}
.inactiveCell {
  background-color: #d3d3d3c2;
}
.confirmButton {
  box-sizing: border-box;
  height: 70%;
  width: 70%;
  border: thick solid black;
}
.overlayCell {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.redCell {
  background-color: #FFa3a3;
  color: #ff0000;
}
.yellowCell {
  background-color: #ffffa6;
  color: #cccc06;
}
.greenCell {
  background-color: #bcffc1;
  color: #00ff15;
}
.blueCell {
  background-color: #7d92f0;
  color: #b0bfff;
}
.errorCell {
  background-color: #d3d3d3;
  color: black;
}
.allContainer div,
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.dice {
  font-family: sans-serif;
}