body { padding: 5px; background: black; }
/* Loading spalsh screen */
div#loading { position: absolute; background-color: black; width: 99%; height: 99%; color: white; text-align: center; z-index: 10000;}
.sk-spinner-double-bounce.sk-spinner { width: 100px; height: 100px; position: relative; margin: 0 auto; }
.sk-spinner-double-bounce .sk-double-bounce1, .sk-spinner-double-bounce .sk-double-bounce2 
{ width: 100%; height: 100%; border-radius: 50%; background-color: #FFF; opacity: 0.6; position: absolute; top: 0; left: 0; animation: sk-doubleBounce 2s infinite ease-in-out; }
.sk-spinner-double-bounce .sk-double-bounce2 { animation-delay: -1s; }

@keyframes sk-doubleBounce {
  0%, 100% { transform: scale(0); }
  50% { transform: scale(1); } 
}

/*Help section */
a.helpButton { float: right; }
div#helpModal { display: none; position: absolute; z-index: 10000; width: 90%; height: 90%; top: 5%; left: 5%; bottom: 5%; right: 5%; background-color: whitesmoke; border-radius: 5px; padding: 20px; opacity: 0.95; overflow-y: scroll; }
ul#emojiLegend { list-style-type: none; padding: 0; padding: 0; }
span.emoji { font-size: 300%; line-height: 120%; display: inline-block; width: 75px; }

/* BS Bingo */
table.bsBingoTable { width: 100%; }
td.bsBingoCell { width: 20%; position: relative; border: 1px solid grey; font-weight: bold; color: white; }
td.bsBingoCellSelected { background-color: #d9edf7; color: black; }
td.bsBingoCellWon { background-color: #dff0d8; color: black; animation:bsBingoCellWon 2s linear 1; }
@keyframes bsBingoCellWon {
  0% { opacity: 0; }
  100% { opacity: 1; } 
}
td.bsBingoCell:after { content: ''; display: block; margin-top: 100%; }
div.bsBingoContent { position: absolute; top: 50%; bottom: 0; left: 0; right: 0; text-align: center; transform: translate(10%, -30%) rotate(-45deg)}
div#bsBingoContent12 { font-size: 400%; transform: translate(0, -55%); }

/* Adjust for mobile*/
@media (max-width: 650px) { 
    div.bsBingoContent { font-size: 75%;}
    div#bsBingoContent12 { font-size: 300%; transform: translate(0%, -100%); }
}
@media (max-width: 400px) { 
    div.bsBingoContent { font-size: 60%;}
}