/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
	margin: 0 0 60px 0;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  height: 50px; /* Set the fixed height of the footer here */
  line-height: 50px; /* Vertically center the text there */
  background-color: #f5f5f5;
  font-size: 19px;
}
.footer a { color: #176783; }
/* ------------------------------------------------ */
body { background-image: url('../images/KS_WaterTexture.jpg'); }
body, h1, h2, h3, button { font-family: 'Raleway',sans-serif; }
#notLoggedIn {
	width: 66%;
    margin: 50px auto;
    text-align: center;
}
#notLoggedIn h1 { color: orange; }
#cleverLoginInfo { text-align: center; }
#notLoggedIn, #optionsDisplay, #optionsDisplay h1, #cleverLoginInfo, #controls { color: #FFFFFF; }
a#cleverHelpLink { color: #DDDDFF; font-size: 0.8em; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-weight: 900; }
.jsgrid { font-size: 13px; }
.jsgrid-pager { color: #FFFFFF; }
.jsgrid-pager-page a { color: darkorange; }
.jsgrid-pager-nav-button a { color: orange; }
.jsgrid-cell { overflow: hidden; }
/* ---- Buttons ---- */
#butScrollToTop {
	display: none;
	position: fixed;
	bottom: 60px;
	right: 60px;
}
button { cursor: pointer; }
.selectionButton0, .selectionButton1, .selectionButton2, .selectionButton3, .selectionButton4, .selectionButton5 {
	color: #FFFFFF;
	border: none;
	width: 100%;
	min-height: 85px;
	font-size: 24px;
	font-weight: 900;
	border-radius: .25rem;
	background-size: 100% 100%;
	padding: 16px;
	height: 100%;
	text-stroke: 1px #000000;
	text-shadow: 1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000000;
  	-webkit-font-smoothing: antialiased;
	cursor: pointer;
}
.selectionButton0 { background-color: #F18620; background-image: url('../images/OrangeButton.png'); }
.selectionButton1 { background-color: #E62B57; background-image: url('../images/RedButton.png'); }
.selectionButton2 { background-color: #49BB91; background-image: url('../images/TealButton.png'); }
.selectionButton3 { background-color: #974299; background-image: url('../images/PurpleButton.png'); }
.selectionButton4 { background-color: #F1C924; background-image: url('../images/YellowButton.png'); }
.selectionButton5 { background-color: #288CC6; background-image: url('../images/BlueButton.png'); }

#connectCode { font-size: 1.55em; }

/* ---- Table ---- */
.tableRow0 { background-color: #F09999; }
.tableRow1 { background-color: #F7E097; }
.tableRow2 { background-color: #A9DAC3; }
.tableRow3 { background-color: #C197C5; }
.tableRow4 { background-color: #7FB80D; }
/* Player Colors*/
.player1 { color: #CB1F3C; font-weight: bold; }
.player2 { color: #3CB381; font-weight: bold; }
.player3 { color: #FBBB00; /*E4C200;*/ font-weight: bold; }
.player4 { color: #9B1DC2; font-weight: bold; }

.correctQuestion { color: #00BB00; }
.jsgrid-cell a:not([href]):not([tabindex]):hover {
	text-decoration: underline;
}

/* New grid */
.headerCell, .resultCell {
	display: inline-grid;
	padding: 3px;
}
.headerCell p {
    margin-top: 1rem;
    margin-bottom: 0rem;
}
.shortRow p {
	margin: 0em !important;
}
#dataGrid { display: -webkit-box; }
#dataGrid > div { margin: auto; }
.dbHeadear {
	display: flex;
	font-weight: bold;
	font-size: 0.9em;
	color: #000000;
	text-align: center;
}
.shortRow {
	height: 2em;
	padding-bottom: 0;
}
.emptyGroup { width: 575px; }
.gamePlayedGroup {
	width: 360px;
	background-color: #7FB8DD !important;
}
.cardGroupBackground { background-color: #B0D0E9; }
.cardsPlayedGroup { width: 300px; }
.ngssLSGroup {
	width: 480px;
	background-color: #E5E4E4;
}

.ngssGroup {
	width: 520px;
	background-color: #D5D4D4;
}

.nameCell { width: 200px; }
.coPlayerCell { width: 200px; }
.timeCell { width: 50px; }
.winnerCell { width: 125px; }

.nameCell, .coPlayerCell, .winnerCell {
    white-space: nowrap;
    overflow: hidden;
}

.cabalCell {
	width: 60px;
	background-color: #C5E0D3;
	color: #000000;
	text-align: center;
}
.userResultRow { height: 2em; }
.userResultRow:nth-child(even) > .cabalCell { background-color: #BED9CC; }
.cardsPlayedCell {
	width: 75px;
	color: #000000;
	text-align: center;
}
.nameCell, .coPlayerCell, .timeCell, .winnerCell {
	color: #000000;
}
.resultCell  a {
	font-weight: 300;
	color: #000000;
}

[data-toggle="popover2"] {
	cursor: help;
}

.resultCell  a:hover {
	font-weight: bold;
	color: #000000;
}

.nameCell, .timeCell { background-color: #FFFFFF; }
.userResultRow:nth-child(even) > .nameCell, .userResultRow:nth-child(even) > .timeCell { background-color: #e9e8e8; }
.coPlayerCell, .winnerCell { background-color: #E5E4E4; }
.userResultRow:nth-child(even) > .coPlayerCell, .userResultRow:nth-child(even) > .winnerCell { background-color: #D5D4D4; }
.snailPlayed { background-color: #F7E097; }
.snailPlayed.svHeaderCell:nth-child(odd),
.userResultRow:nth-child(even) > .snailPlayed { background-color: #f0d792;}
.enviroPlayed { background-color: #C197C5; }
.enviroPlayed.svHeaderCell:nth-child(odd),
.userResultRow:nth-child(even) > .enviroPlayed { background-color: #b58fba;}
.predatorPlayed { background-color: #F09999; }
.predatorPlayed.svHeaderCell:nth-child(odd),
.userResultRow:nth-child(even) > .predatorPlayed { background-color: #e8949a;}
.sepPlayed { background-color: #F2CA46; }
.sepPlayed.svHeaderCell:nth-child(odd),
.userResultRow:nth-child(even) > .sepPlayed  { background-color: #ebbc44; }

.ngssCell {
	width: 40px;
	color: #000000;
	background-color: #E5E4E4;
	text-align: center;
}
.ngssCell:nth-child(even) {  background-color: #FFFFFF; }
.userResultRow:nth-child(even) > .ngssCell { background-color: #D5D4D4; }
.userResultRow:nth-child(even) > .ngssCell:nth-child(even) { background-color: #E9E8E8; }
/* Student View */
.studentViewCell {
	padding: 3px;
	background-color: #F3F4F3;
	color: #000000;
	display: table-row;
}
.studentViewCell:nth-child(even) { background-color: #E9E8E8; }

.svRow:nth-child(even) { background-color: #E9E8E8; }
.svRow:nth-child(even) > .svCell:nth-child(odd) { background-color: #D5D4D4; }
.svCell:nth-child(odd) { background-color: #DEDDDD; }
.svCell:nth-child(odd) .svRow:nth-child(even) { background-color: #D5D4D4; }

.svReengagementCell { display: none; }
.svRowCell, .svCardFamilyCell, .svDOKCell, .svCardCell, .svCorrectCell, .svStandardsCell  {
	display: inline-block;
	padding: 3px;
	display: table-cell;
}
.svRowCell a { color: #000000; }
.svRowCell { width: 1200px; }
.svCardFamilyCell { width: 16%; }
.svDOKCell { width: 5%; }
.svCardCell { width: 10%; }
.svCorrectCell { width: 5%; }
.svStandardsCell { width: 24%; font-size: 0.9em; }
.svReengagementCell { width: 0; }

.redCell { background-color: #D94238 !important; }
.greenCell { background-color: #94C881 !important; }
.yellowCell { background-color: #EFEB71 !important; }

.svTitle { height: 75px; }
.svRow { height: 60px; }
.totalRow { height: 35px; }
.svTitle, .svCell, .svDOKCell {text-align: center;}
.svRow > .svCardFamilyCell {text-align: right;}

.svTitle > div { vertical-align: bottom; }
.svRow > div { vertical-align: bottom; }

.popover-header { font-weight: bold !important; }

.googleHeaderProfile {
	border-radius: 50%;
	margin-right: 6px;
	height: 46px;
	margin-bottom: -18px;
	margin-top: -18px;
}
/* --- Spinner ---- */
.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}