body {
  background-color: white; }

#numbers table th, .board table th, .ball .ballNumber, .prize .prizeAmount {
  font-family: Arial,Helvetica,Verdana,sans-serif;
  color: #990100;
  text-align: center; }

#content {
  margin: 1em 0px;
  display: table;
  width: 40em;
  height: 40em;
  margin-left: auto;
  margin-right: auto;
  background-color: #fad37f; }

#info, #remainingBalls, #boards, #actions, #prizeContainer {
  box-sizing: border-box;
  padding: 0.5em 1em;
  display: table;
  width: 100%; }

#numbers table, #remainingBalls table, .board table, .prize table {
  width: 95%;
  height: 95%;
  margin: auto; }

#numbers table th, .board table th {
  width: 100%;
  height: 1em;
  border: solid #eab470 1px;
  background-color: #f9bb42; }

#numbers table td, #remainingBalls table td, .board table td, .prize table td {
  border: solid #ff9b00 1px;
  font-family: Arial,Helvetica,Verdana,sans-serif;
  background-color: white;
  color: #ff9b00;
  text-align: center;
  cursor: default; }

#info {
  padding-top: 1em;
  padding-bottom: 0px;
  height: 50%; }

#numbers {
  display: table-cell;
  width: 60%; }
  #numbers table {
    height: 100%; }
    #numbers table td {
      border-radius: 50%;
      opacity: 0.3; }
      #numbers table td.show {
        transition: all 0.8s ease-out;
        opacity: 1; }

#nextNumber {
  display: table-cell;
  position: relative;
  width: 40%; }

.ball, .buttonContainer {
  display: table;
  position: absolute;
  box-sizing: border-box; }

.ball {
  background-color: white;
  width: 10em;
  height: 10em;
  margin: 16%;
  border-radius: 50%;
  padding: 1.5em;
  box-shadow: inset 0px 0px 25px #8e8e8e; }
  .ball .ballNumber {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 4em;
    border-radius: 50%;
    border: 5px solid #990100;
    width: 200px; }
  .ball .hidden {
    color: transparent; }

#remainingBalls {
  margin-bottom: 0.5em;
  height: 5%; }
  #remainingBalls table {
    height: 100%; }
    #remainingBalls table td {
      border-radius: 50%;
      background-color: #fad37f; }
      #remainingBalls table td.filled {
        transition: all 0.8s ease-out;
        background-color: white; }

#boards {
  padding-top: 1em;
  border-top: solid #ffffff 1px;
  height: 30%; }

.board table td.light .cross, .board table td .cross {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-image: url("../img/matched.png");
  background-repeat: no-repeat;
  top: 0px;
  left: 0px; }

.board {
  display: table-cell;
  width: 25%; }
  .board table td {
    position: relative; }
    .board table td.star {
      background-color: #fad37f; }
    .board table td.light {
      transition: all 0.8s ease-out;
      background-color: #fad37f; }
      .board table td.light .cross {
        transition: all 0.8s ease-out;
        opacity: 0.2; }
    .board table td .cross {
      opacity: 0; }
    .board table td .checked {
      transition: all 0.8s ease-out;
      opacity: 1; }

#actions {
  padding-bottom: 1em;
  padding-top: 0px;
  height: 15%; }

.bingoButton {
  display: table-cell;
  width: 8em;
  height: 2em;
  border-radius: 1em;
  color: white;
  background: linear-gradient(#b0b500, #4b7100);
  margin: 12%;
  border: 0px; }

#turbo {
  display: table-cell;
  width: 20%; }

#prizes {
  display: table-cell;
  width: 60%; }

#prizeContainer {
  padding: 0px;
  height: 100%; }

.prize {
  display: table-cell;
  height: 100%;
  width: 15%;
  padding-top: 0.5em;
  border-radius: 0.5em; }
  .prize table {
    border-spacing: 1px;
    width: 90%;
    height: 75%; }
    .prize table td {
      margin: 0px; }
      .prize table td.matched {
        background-color: #fad37f; }
  .prize .prizeAmount {
    font-size: 0.9em; }

.winninClassWon {
  background-color: #ff9b00;
  transition: all 0.8s ease-out; }

#play {
  position: relative;
  display: table-cell;
  width: 20%; }

.disabled {
  background: lightgray; }

#winningInfo {
  padding: 1em;
  width: 23.5em;
  height: 10em;
  margin: auto;
  background: linear-gradient(#ff9b00, #f9bb42);
  border-radius: 5px;
  text-align: center;
  color: white;
  font-family: Arial,Helvetica,Verdana,sans-serif; }

.popupTitle {
  font-size: 2em;
  margin: 0px; }

.prizePopupAmount {
  color: #990100;
  font-family: Arial,Helvetica,Verdana,sans-serif;
  font-weight: bold;
  font-size: 3em;
  margin: 25px; }