* {
	margin: 0px;
	padding: 0px;
	border: none;
/*	max-width: 100%;*/
	box-sizing: border-box;
	font-weight: normal;
}

html {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
}
/*new*/
body {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-width: 100vw;
	max-width: 100vw;
	background-image: url('../../Includes/Images/Page/background.png');/* wallpaper safrai.com*/
	background-repeat: none;
	background-size: cover;
	background-attachment: fixed;
}

header {
	box-sizing: border-box;
	width: 100%;
/*	padding: 1em;*/
	margin-bottom: 1em;
	background-color: black;
	z-index: 100;
	border-bottom: 1px solid white;
}

h1 {
	font-size: 3em;
	margin-right: 0.5em;
	margin-top: 0.3em;
	text-align: right;
	line-height: 70%;
	font-weight: bold;
	font-variant: small-caps;
	color: white;
}

h1 span {
	display: none;
}

main {
	display: inline-block;
/*	clear: left;*/
	padding: 2em;
	min-height: 100%;
	margin: auto;
	max-width: 100%;
	background-color: white;
	border-radius: 0.5em;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow-x: auto;

}

footer {
	background-color: black;
	color: white;
	text-align: center;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	padding: 0.5em;
	margin-top: 1em;
}

footer a, footer a:visited, footer a:active {
	text-decoration: none;
	color: white;
}

h2 {
	font-size: 1.5em;
	font-weight: bold;
	font-variant: small-caps;
	text-align: left;
	position: sticky;
	left: 0;
	margin-bottom: 1em;
}

h3 {
	font-size: 1.2em;
	font-weight: bold;
	font-variant: small-caps;
	text-align: left;
	margin-bottom: 1em;
}

h4 {
	font-size: 1em;
	font-weight: bold;
	font-variant: small-caps;
	text-align: left;
	margin-bottom: 1em;
}

h5 {
	font-size: 1em;
	font-weight: bold;
	text-align: left;
	margin-bottom: 1em;
}

@media screen and (min-width: 40em) {
	h1 {
		font-size: 5em;
	}
}

p {
	max-width: 80em;
	margin-bottom: 1em;
	line-height: 1.5em;
}

input, select, textarea {
	padding: 1em;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
}

input[type=number] {
	padding: 0.5em;
	padding-right: 0;
}

input[type=submit], button {
	background-color: black;
	color: white;
	border: 1px solid black;
	cursor: pointer;
	border-radius: 5px;
	padding: 1em;
	-webkit-appearance: none;
}

main input[type=submit] {
	width: 100%;
}

/* Login Form*/
 /* Bordered form */
form.modal-content {
	border: 3px solid #f1f1f1;
}

/* Full-width inputs */
input[type=email], input[type=password] {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
}

/* Set a style for all buttons */
button#login {
	position: absolute;
	top: 1em;
	left: 1em;
	color: white;
	padding: 14px 20px;
	margin: auto-right;
	border: none;
	cursor: pointer;
	width: 6em;
}

button#login, .modal-content input[type=submit] {
	background-color: #04AA6D;
	border-color: #04AA6D;
}

/* Add a hover effect for buttons */
button:hover {
  opacity: 0.8;
}

/* Extra style for the cancel button (red) */
.cancelbtn {
	background-color: #f44336;
  	border-color: #f44336;
}

/* Add padding to containers */
.container {
  padding: 16px;
}

/* The "Forgot password" text */
span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
} 

 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
  text-align:center;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 30em; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
} 
/* End of login form*/

/*signup form*/
#signupform, #passwordresetform, #contactform {
	max-width: 80em;
}

#signupform input, #passwordresetform input, #contactform input  {
	width: 100%;
	margin-bottom: 1em;
}

#signupform input[type=select] {
	display: block;
	width: 100%;
}

#signupform div {
	width: 33.3%;
	float: left;
	margin-bottom: 1em;
}

#signupform div label{
	display: block;
}

#signupform div.alert {
	width: 100%
}

#contactform textarea {
	width: 100%;
	height: 10em;
	margin-bottom: 1em;
}

nav {
	box-sizing: border-box;
	display: block;
	max-width: 100%;
	margin-top: 1em;
}

nav a {
	display: block;
	text-decoration: none;
	color: white;
	box-sizing: border-box;
}

nav>a:first-child {/*hamburger menu*/
	font-size: 1.8em;
}

nav ul {
	box-sizing: border-box;
	color: white;
	background-color: black;
	list-style-type: none;
	display: block;
	width: 100%;
	max-width: 40em;
	margin-left: auto;
	font-size: 20px;
}

nav ul.admin {
	max-width: 50em;
}

ul#nav>li {
	border-bottom: 1px solid white;
}

ul.nav {
	display: none;
}

ul.nav.visible {
	position: relative;
	display: block;
	top: 2em;
	margin-top:0;
}

nav li {
	box-sizing: border-box;
	position: relative;
	display: block;
	text-align: center;
}

nav li a {
	padding: 0.5em 0;
}

nav .icon {
	display: block;
	float: right;
	margin-right: 1em;
}

nav li:hover {
	background-color: #04AA6D;
}

nav li:hover>ul {
	display: block;
	background-color: #515151;
}

nav li ul {
	display: none;
}

nav li>ul li {
	display: block;
	border-top: 1px solid white;
}

nav li>ul li:hover>ul {
	background-color: #a9a9a9;
}

/* Hide the link that will open and close the nav bar on small screens */
@media screen and (min-width: 52em) {
	nav {
		margin-top: 1em;
		margin-right: 1em;
	}

	nav .icon {
	  display: none;
	}
	
	nav ul {
		font-size: 1em;
	}
	
	nav li {
		display: inline-block;
		width: 10em;
		background-color: black;
	}
	
	ul#nav {
		display: block;
		margin-left: auto;
	}
	
	ul.nav.visible {
		position: static;
		display: block;
	}
	
	ul#nav>li {
		float: left;
		border-left: 1px solid white;
		border-bottom: none;
	}
	
	ul#nav>li:first-child {
		border-left: none;
	}
	
	nav li:hover>ul {
		position: absolute;
		display: block;
		top: 2.2em;
		margin-top:0;
	}
	
	nav li>ul li:hover {
		border-left: 1px solid #04AA6D;
		border-right: 1px solid #04AA6D;
	}
	
	nav li ul li:hover ul {
		left: -10.05em;
		top: -0.05px;
	}
}

div#pagebackground {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	width: 100%;
	background-color: white;
	opacity: 0.8;
	margin: 0;
	padding: 2em;
	text-align: center;
	border-top: 4px solid white;
}

form#scopeform {
	display: inline-block;
	margin: 0 auto 1em auto;
	padding: 1em;
	background-color: white;
	border-radius: 0.5em;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

form#scopeform label:after {
	content:":";
	margin-right: 0.3em;
}

/* this is where the <main> definition was*/

select, input, button, radio {
	font-size: 1em;
}

span.info_tile {
	display: inline-block;
	height: 1em;
	width: 1em;
	background-color: black;
	color: white;
	font: italic bold 30px "Brush Script MT";
	margin: auto;
	text-align: center;
	line-height: 1em;
	border-radius: 0.2em;
	align-self: center;
}

img.helmet {
	width: 50px;
	height: auto;
}

img.flip {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

span.rank::after {
	content: "."
}

span.rank.tied {
	display: none;
}

.bordered {
	display: inline-block;
	border: 1px solid black;
	padding: 0.5em;
	border-radius: 0.5em;
}

.flex-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1em;
}

.display_wall {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;	
}

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

span.AFC {
	display: inline-block;
	background-color: #ce1126;
	color: white;
	padding: 0.5em;
	border-radius: 0.5em;
	margin-bottom: 1em;
	width: 4em;
}

.NFC {
	display: inline-block;
	background-color: #003b66;
	color: white;
	padding: 0.5em;
	border-radius: 0.5em;
	margin-bottom: 1em;
	width: 4em;
}

table {
	box-sizing: content-box;
	display: table;
	border-collapse: collapse;
	margin: auto;
	white-space: nowrap;
	background-color: white;
	max-width: 100%;
}

caption {
	text-align: left;
	font-weight: bold;
	font-variant: small-caps;
}

thead {
	background-color: white;
	background-clip: padding-box;
}

thead tr:last-child th {
	background-color: black;
	color: white;
	border: 1px solid white;
	background-clip: padding-box;
}

thead th {
	border: 1px solid white;
	background-clip: padding-box;
}

thead th.sortable:hover {
	cursor: s-resize;
}

tfoot {
	border-top: 1px solid gray;
	border-top-style: double;
}

td, th {
	padding: 0.1em 0.2em;
	text-align: center;
}

th.sort_col, td.sort_col {
	font-weight: bold;
}

th a {
    display: block;
	text-decoration: none;
	color: inherit;
}

tr {
	height: 2em;
}

th, thead {
	z-index: 10;
	font-weight: normal;
}

tbody tr:nth-of-type(odd),
tbody tr:nth-of-type(odd) th, 
tfoot tr:nth-of-type(odd),
tfoot tr:nth-of-type(odd) th {
	background-color: white;
}

tbody tr:nth-of-type(even),
tbody tr:nth-of-type(even) th,
tfoot tr:nth-of-type(even),
tfoot tr:nth-of-type(even) th  {
	background-color: #f2f2f2;
}

tbody tr:hover,
tbody tr:hover th,
tbody tr.user:hover,
tbody tr.user:hover td,
tbody tr.user:hover th,
tbody tr.user:nth-of-type(odd):hover th,
tbody tr.user:nth-of-type(even):hover th
 {
	background-color:#FFFFE0;
}

table.ranked thead tr th:first-child, table.ranked thead tr th:nth-child(2) {
	z-index: 20;
	background-color: white;
}

table.ranked thead tr:last-child th:first-child, table.ranked thead tr:last-child th:nth-child(2) {
	background-color: black;
}

table.ranked tbody th:nth-child(1) {
	text-align: right;
}

table.ranked tbody th:nth-child(2),
table.ranked tfoot th:nth-child(2) {
	text-align: left;
}

table.datatable td {
	text-align: right;
}

/* Flip Cards */

/* The flip card container */
.flip_card_outer {
	margin: auto;
	background-color: transparent;
	perspective: 1000px;
}

/* This container is needed to position the front and back side */
.flip_card_inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
	vertical-align: middle;
}

/* Do a horizontal flip when the mouse moves over the flip box container 
.flip_card_outer:hover .flip_card_inner {
  transform: rotateY(-180deg);
}
*/
/* Do a horizontal flip when the flip class is toggled via js */
.flip_card_outer.flip .flip_card_inner {
  transform: rotateY(-180deg);
}

/* Position the front and back side */
.flip_card_front, .flip_card_back {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: white;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
	vertical-align: middle;
}

/* turn the back card over to start with */
.flip_card_back {
	transform: rotateY(-180deg);
}

/* Legends */

span.legend {
	display: inline-block;
	margin-top: 3em;
	border: 1px solid black;
	border-radius: 0.5em;
	text-align: left;
}

span.legend h3 {
	background-color: blue;
	color: white;
}

span.legend span {
	display: inline-block;
	margin: auto;
	border-radius: 0.5em;
}

/*sticky container*/

div.scroll_wrapper {
	display: block;
	overflow: auto;
	max-height: 100vh;
	max-width: 100%;
	padding-right: 1.5em;
}

div.scroll_wrapper > table {
	
	caption {
		position: sticky;
		left: 0;
	}
	
	thead {
		position: sticky;
		top: 0;
		z-index: 2;
	}
	
	thead th:first-of-type {
		z-index: 4;
	}
	
	thead th:nth-of-type(2) {
		z-index: 3;
	}
	
	tbody tr th:last-of-type {
		position: sticky;
		left: 0;
		z-index: 1;
	}
	
	tfoot tr th:last-of-type {
		position: sticky;
		left: 0;
		z-index: 1;
	}
}

table.ranked thead {
	position: sticky;
	top: 0;
}

table.ranked tr th:nth-of-type(1) {
	z-index: 2;
}

table.ranked tr th:nth-of-type(2) {
	z-index: 2;
	position: sticky;
	left: 0;
}

table.ranked tbody td {
	text-align: right;
}

table.ranked tbody tr th:nth-child(1),
table.weeklyresults tbody tr td:nth-last-child(1),
table.weeklyresults tbody tr td:nth-last-child(2) {
	text-align: right;
}

table.weeklyresults tbody td:nth-last-child(2) {
	font-weight: bold;
	padding-right: 0.8em;
}

table.ranked tbody tr th:nth-child(2){
	text-align: left;
}

table.weeklyresults thead img {
	object-fit: none;
}

table.weeklyresults tbody tr {
	height: 2.3em;
}

table.weeklyresults tbody tr td {
	text-align: center;
}

table weeklyresults thead th>time {
	display: none;
}

span.weekly_pick {
	display: inline-block;
}

span.game_result {
	display: inline-block;
/*	font-weight: bold;
	font-size:1.2em;*/
}

span.game_result.win {
	
}

span.game_result.loss {
	color: #cc0000;
}

span.game_result.loss span.w_score {
	background-color: #cc0000;
}

span.game_result.tie {
	color: orange;
}


span.game_result span.w_score{
	background-color: black;
}

span.w_lock {
	border: 0.1em solid black;
	padding: 0.3em;
	border-radius: 0.3em;
}

span.w_lock.old {
	border-color: inherit;
}

span.m_lock {
	border: 0.2em solid black;
	padding: 0.2em;
	border-radius: 0.3em;
}

span.m_lock.no_eval {
	border-color: #5A5A5A;
}

span.w_lock.wrong_winner, 
span.m_lock.wrong_lock {
	border-color: #cc0000;
}

span.weekly_pick span, span.game_result span{
	display: inline-block;
	padding: 0.1em 0.2em;
}

span.l_score {
	
}

span.w_score {
	color: white;
	border-radius: 0.2em;
}

.correct_score {
	color: blue;
	
	span.w_score {
		background-color: blue;
	}
}

.fg_bracket {
	color: green;
	
	span.w_score {
		background-color: green;
	}
}

.td_bracket {
	color: orange;
	
	span.w_score {
		background-color: orange;
	}	
}

.correct_winner {
	color: black;
}

span.correct_winner span.w_score {
	background-color: black;
}

.wrong_winner, .negative_value {
	color: #cc0000;
}

span.wrong_winner span.w_score {
	background-color: #cc0000;
}

span.no_eval {
	color: #5A5A5A;
}

span.no_eval span.w_score {
	background-color: #5A5A5A;
}

span.preliminary {
	font-style: italic;
}

div.pick_wall, div.eliminator_pick_wall {
	display: flex;
	flex-direction: column;
}

@media screen and (min-width: 80em) {
	div.pick_wall {
		flex-direction: row;
	}

}

@media screen and (min-width: 45em) {
	div.eliminator_pick_wall {
		flex-direction: row;
	}

}

div.tile_container {
	display: flex;
	flex-direction: column;
	align-content: center;
}

div.game_tile, div.small_game_tile, div.multiplier_tile {/*small_game_tile and multiplier_tile are used in the rules page*/
	display: flex;
	flex-direction: column;
	margin: 0.3em;
	background-color: white;
	border: 1px solid black;
	border-radius: 0.5em;
/*	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}

div.game_tile time {
	display:block;
}

div.game_tile label, div.small_game_tile label {
	display: none;
}

div.entry_tile * {
	margin:0.1em;
}

div.lock_tile, div.icon_tile {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
/*
div.icon_tile * {
	flex-shrink: 0;
	flex-grow: 0;
}
*/
div.lock_type_tile {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

div.entry_tile {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

div.pick_tile {
	display: flex;
	flex-direction: column;
	align-items: center;
}

div.away_tile, div.home_tile {
	display: flex;
	flex-direction: row;
}

div.away_tile a, div.home_tile a, .entry_tile img {
	flex-shrink:0;
/*	flex-basis: 100%;*/
}

div.eliminator_pick_wall div.away_tile, div.eliminator_pick_wall div.home_tile {
	width: 6em;
}

div.eliminator_pick_wall div.away_tile {
	justify-content: right;
}

/*
div.entry_tile input[type=number] {
	background-color: gray;
}
*/
@media screen and (min-width: 44em) {
	
	div.entry_tile {
		align-items: center; /* necessary to keep the stadium icon from expanding in height to fill the space*/
	}
	
	div.pick_tile, div.lock_tile {
		flex-direction: row;
	}
	
	div.home_tile {
		flex-direction: row-reverse;
	}
	
	div.lock_type_tile {
		flex-direction: column-reverse;
	}
	
	div.icon_tile {
		flex-direction: row;
	}

}

@media screen and (min-width: 20em) {
	
	div.entry_tile {
		align-items: center; /* necessary to keep the stadium icon from expanding in height to fill the space*/
	}
	
	div.eliminator_pick_wall div.pick_tile {
		flex-direction: row;
	}
	
	div.eliminator_pick_wall div.home_tile {
		flex-direction: row-reverse;
	}
	
	div.eliminator_pick_wall div.icon_tile {
		flex-direction: row;
	}

}


div.schedule_wall {
	margin: auto;
	display: inline-flex;
	flex-direction: row;
	background-color: white;
	margin: auto;
}

div.schedule_wall div.team_wall {
	display: flex;
	flex-direction: column;
	align-content: center;
	margin: 0.5em;
}

div.schedule_tile {
	display: flex;
	flex-direction: column;
	align-content: center;
}

div.week_tile, div.team_tile {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 0.5em;
	margin: 0.1em;
	padding: 0.1em;
	height:2.2em;
}

div.week_tile:nth-child(even) {
	background-color: #f2f2f2;
	border: 0.1em solid #f2f2f2;
}

div.week_tile:nth-child(odd) {
	background-color: white;
	border: 0.1em solid #f2f2f2;
}

div.week_tile span {
	display:inline-block;
}

div.week_tile span.week {
	width: 2em;
}

div.week_tile span.day {
	width: 3em;
}

div.week_tile span.game_result {
	width: 5em;
}

div.schedule_tile div.div_game {
	border-color: blue;
}

div.schedule_tile div.week_tile.common_game {
	
}

div.week_tile img {
	-webkit-transform: scale(0.5, 0.5);
	transform: scale(0.5, 0.5);
}

div.week_tile img.flip {
  -webkit-transform: scale(-0.5, 0.5);
  transform: scale(-0.5, 0.5);
}

div.week_tile img.home_team {
	margin-left:2em;
}

div.week_tile img.away_team {
	margin-right:2em;
}

div.common_game.highlight {
	background-color: blue;
}

/*Divisional Picks Page */

div.season_pick_wall {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 0.5em;
}

@media screen and (min-width: 70em) {
	div.season_pick_wall {
		flex-direction: row;
	}

}

div.conference_tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 0.5em;
}

div.conference_pick_tile {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 0.5em;
}

div.division_tile {
	display: flex;
	flex-direction: column;
	border-radius: 0.5em;
	border: 1px solid black;
	margin: 0.5em;
}

div.division_tile .heading {
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
}

div.division_tile a img {
	flex-basis: 50px;
	flex-grow: 0;
	flex-shrink: 0;
}

div.team_pick_tile {
	display: flex;
	flex-direction: row;
	margin: 0.3em;
}

img.team_pick.incorrect {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  max-height: 30px;
  width: auto;
}

/*Formatting for Alerts*/
.alert {
	margin: 1em;
	padding: 0.5em 1em;
	border-left-style: solid;
	border-width: 0.3em;
	text-align: left;
}

.alert.danger {
  background-color: #ffdddd;
  border-color: #f44336;
}

.alert.success {
  background-color: #ddffdd;
  border-color: #04AA6D;
}

.alert.info {
  background-color: #e7f3fe;
  border-color: #2196F3;
}


.alert.warning {
  background-color: #ffffcc;
  border-color: #ffeb3b;
}

/*Formatting for Season Pick Info Box */
.season_pick_info {
	display: inline-block;
	margin: auto;
	margin-bottom: 2em;
	border: 1px solid black;
	border-radius: 0.5em;
	text-align: left;
}

.season_pick_info img {
	float: left;
}

.season_pick_info.sb {
	display: block;
	width: 10em;
}

.season_pick_info.sb img {
	float: none;
}

.season_pick_info div {
	padding: 0.3em;
}

.season_pick_info.full_width {
	display: block;
}

.tile_heading,
.title  {
	color: white;
	background-color: black;
	border: 1px solid black;
	padding: 0.3em;
	border-top-left-radius: 0.4em;
	border-top-right-radius: 0.4em;
}

.info_box {
	display: inline-block;
	margin: auto;
	margin-bottom: 2em;
	border: 1px solid black;
	border-radius: 0.5em;
	text-align: left;
	
	.population {
		font-size: 2em;
		font-weight: bold;
		text-align: center;
	}
}


/*Divisional Pickresults*/

table.divisionalresults {
	margin-right: 2em;
}

table.divisionalresults thead tr:first-of-type th,
table.divisionalresults thead tr:nth-of-type(2) th {
	background-color: white;
}

table.divisionalresults colgroup.conference col {
	min-width: 6em;
}

table.divisionalresults tbody:nth-of-type(odd) {
	background-color: white;
}

table.divisionalresults tbody:nth-of-type(even), table.divisionalresults tbody:nth-of-type(even) th {
	background-color: #f2f2f2;
}

table.divisionalresults tbody tr,
table.divisionalresults tbody tr:hover th,
table.divisionalresults tbody tr:nth-of-type(even) th {
	background-color: inherit;
}

table.divisionalresults tbody tr {
	display: none;
}

table.divisionalresults tbody:hover tr, table.divisionalresults tbody tr:nth-of-type(1) {
	display: table-row;
}
/*SB Pickresults*/

table.sbresults {
	a {
		display: inline;
	}
}

/* Eliminator Results*/

table.eliminatorresults:not(.ranked) thead th:first-of-type,
table.divisionalresults:not(.ranked) thead th:first-of-type {
	position: sticky;
	left:0;
}

table.eliminatorresults .flip_card_outer {
	width: 50px;
	min-height: 39px;
}

table.eliminatorresults tbody tr {
	height: 45px;
}

table.eliminatorresults tbody tr td a img {
	vertical-align: bottom;
}

/* Total Standings*/
table.totalstandings thead tr th {
	background-color: black;
	color: white;
	border: 1px solid white;
}

table.totalstandings.ranked thead th {/*no cells are positioned sticky*/
	position: static;
	z-index: 1;
	background-color: black;
	color: white;
	border: 1px solid white;
}

table.totalstandings.ranked thead tr:first-child th:first-child, table.totalstandings.ranked thead tr:first-child th:nth-child(2) {
	z-index: 20;
	background-color: black;
}

table.totalstandings.ranked thead tr:first-child th:nth-child(2) {
	position: sticky;
	left: 0;
}

table.totalstandings.ranked thead tr:nth-child(2) th:first-child, table.totalstandings.ranked thead tr:nth-child(2) th:nth-child(2) {
	z-index: 2;
	background-color: black;
}

table.weeklyresultsranking {
	
	thead th {
		white-space: normal;
	}
	
	td {
		padding: 0em 1em;
	}
	
	td:nth-of-type(9) {
		color: #cc0000;
	}
	
	td:nth-of-type(11) {
		color: orange;
	}
	
	td:nth-of-type(12) {
		color: green;
	}
	
	td:nth-of-type(13) {
		color: blue;
	}
}

table.weeklylocksranking {
	
	thead th {
		white-space: normal;
	}
	
	td {
		padding: 0em 1em;
	}
	
	td:nth-of-type(6),
	td:nth-of-type(11),
	td:nth-of-type(16),
	td:nth-of-type(17),
	td:nth-of-type(18) {
		color: #cc0000;
	}
	
}

table.scoring_history {
	
	thead th:first-of-type {
		position: sticky;
		left: 0;
	}
	
	th:first-of-type {
		text-align: left;
		border-right: 1px solid gray;
	}
	
	td {
		border-left: 1px solid gray;
	}
}

table.scoring_history th:first-of-type {
	text-align: left;
}

/*Countdaown Timer*/
#timer_tile {
	display: flex;
	flex-direction: column;
	padding: 1em;
	margin-bottom: 1em;
	justify-content: center;
	align-items: center;
	max-width: 14em;
	margin: auto;
}

@media screen and (min-width: 60em) {
	#timer_tile {
		flex-direction: row;
		max-width: initial;
	}

}

#timer_tile span {
	display: inline-block;
	width: 2.5em;
	font-size: 5em;
}

tr.user td, tr.user th, tr.user:nth-of-type(odd) th, tr.user:nth-of-type(even) th, tbody:nth-of-type(odd) tr.user th, tbody:nth-of-type(even) tr.user th {
	background-color: lightgray;
}

/* Rules Page*/
/*
#results_table th:nth-child(3), #results_table td:nth-child(3), #results_table td:nth-child(4) {
	text-align: center;
}
*/
#results_table td {
	text-align: center;
}

#results_table tbody td:last-child, #results_table tbody td:nth-child(2) {
	text-align: left;
	white-space: normal;
}

#widget-wall {
	display: inline-flex;
	flex-direction: column;
	border: 1px solid black;
	border-radius: 0.5em;
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

#widget-wall>div:first-child {
	margin-bottom: 2em;
}

#widget-display {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
}

#widget_table thead tr:last-child {
	white-space: normal;
}

#widget_table thead img {
	object-fit: none;
}

#widget_body tr td {
	text-align: center;
}

#multiplier tbody th {
	text-align: left;
}

div.small_game_tile, div.multiplier_tile {
	margin: 0;
}

div.small_game_tile div.entry_tile {
	justify-content: space-evenly;
}

div.multiplier_tile span {
	margin: 0.3em;
}

#widget-display .small_game_tile, #widget-display .bordered, #widget-display .multiplier_tile {
	margin: 0.25em;
}

#widget-display {
	float: left;
}

#season_picks tbody th, #season_picks tbody td  {
	text-align: left;
	white-space: normal;
}

#season_picks tbody tr:nth-child(3) td {
	text-align: center;
}

/*Team info*/

table.schedule td, table.schedule th {
	padding-left: 0.5em;
	padding-right: 0.5em;
} 

table.schedule tr {
	height: 2.4em;
}

table.schedule img {
	height: 1.7em;
	width: auto;
}

table.schedule td.home_team {
	text-align: right;
}

table.schedule td.away_team {
	text-align: left;
}

/*Records*/

table.records {
	margin-top: 0em;
}

table.records:not(:last-of-type) {
	margin-right: 2em;
	margin-bottom: 2em; 
}

table.records tbody:nth-of-type(odd) td, table.records tbody:nth-of-type(odd) th {
	background-color: white;
}

table.records tbody:nth-of-type(even) td, table.records tbody:nth-of-type(even) th {
	background-color: #f2f2f2;
}

table.records tbody tr {
	height: inherit;
}

table.records tbody th {
	vertical-align: top;
	text-align: right;
	font-weight: bold;
}

table.records tbody th, table.records tbody td {
	padding: 0.2em 0.4em;
}

table.records tbody td {
	text-align: center;
}

table.records tbody td:first-of-type,
table.records tbody td:nth-of-type(2) {
	text-align: left;
}

table.records tr.user td {
	font-weight: bold;
} 

table.records tr.current td {
	font-style: italic;
}

table.teamrecords img.helmet {
	height: 2em;
	width: auto;
	margin: -0.6em 0;
}

table.records.teamrecords tbody th, table.records.teamrecords td {
	padding: 0.6em 0.4em;
}

div.spacer {
	flex: 0 0 100%;
}

@media screen and (min-width: 60em) {
	div.spacer {
		flex: 0 0 auto;
	}
}

table.infotable thead th {
	color: white;
	background-color: black;
}

table.infotable {
	width: 17em;
	margin-bottom: 6em;
}

table.infotable tr {
	height: 2.4em;
}

table.infotable th {
	text-align: left;
}

table.weekly_overview thead th {
	background-color: black;
	color: white;
	border: 1px solid white;
	background-clip: padding-box;
}

table.weekly_overview tr:first-of-type th:nth-of-type(2) {
		position: sticky;
		left: 0;
	}

table.weekly_overview thead tr:first-of-type {
	th:first-of-type {
		border-right: 1px solid black;
	}
	
	 th:nth-of-type(2) {
		border-left: 1px solid black;
	}
}

table.weekly_overview tbody th {
	text-align: left;
}

table.weekly_overview tbody td {
	width: 5em;
}

table.weekly_overview tbody tr:nth-child(2),
table.weekly_overview tbody tr:nth-child(10),
table.weekly_overview tbody tr:nth-child(15),
table.weekly_overview tbody tr:nth-child(20),
table.weekly_overview tbody tr:nth-child(27) {
	border-top:1px dotted gray;
}

table.weekly_overview tbody tr.summary_row {
	
}

table.weekly_overview tbody tr.detail_row th:last-of-type {
	padding-left:1.5em;
}

table.weekly_overview tbody td:last-child,
table.weekly_overview tbody td:nth-last-child(5) {
	border-left:1px dotted darkgray;
}

/*Toggle Switch*/

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 4.4em;
  height: 2.5em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  -webkit-transition: .8s;
  transition: .8s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.7em;
  width: 1.7em;
  left: 0.4em;
  bottom: 0.4em;
  background-color: white;
  -webkit-transition: .8s;
  transition: .8s;
}
/*
input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
*/
input:checked + .slider:before {
  -webkit-transform: translateX(1.9em);
  -ms-transform: translateX(1.9em);
  transform: translateX(1.9em);
}

/* Rounded sliders */
.slider.round {
  border-radius: 2.5em;
}

.slider.round:before {
  border-radius: 50%;
}

.tile {
	padding: 0.5em;
	width: 20em;
	margin: 1em auto;
	border: 1px solid black;
	border-radius: 0.5em;
	text-align: center;
	background-color: white;
}

.tile>* {
	vertical-align: middle;
}

/*Result Entry*/
/*score wall, two wall halves, game tile*/
div.result_wall, div.result_wall div {
	display: flex;
	flex-direction: column;
}

/* the game tile*/
div.result_wall > div > div {
	margin: 0.3em;
	background-color: white;
	border: 1px solid black;
	border-radius: 0.5em;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: space-between;
	width: 18em;
}

div.result_wall > div > div > time {
	text-align: left;
	flex-basis: 100%;
}

div.result_wall > div > div > div {
	flex-direction: row;
}

div.result_wall > div > div > div { /*the entry tile in the game tile*/
	margin: 0.1em;
}

div.result_wall > div > div > div:nth-child(2), div.result_wall > div > div > div:nth-child(4) {
/*	flex-basis: 7em;*/
}

div.result_wall > div > div > div:last-child { /*the status entry tile for the checkboxes*/
	flex-direction: column;
}


@media screen and (min-width: 30em) {
	
	div.result_wall > div > div {
		width: 27em;
	}
	
	div.result_wall > div > div > div {
		align-content: center;
	}
	
	div.result_wall > div > div > div > div:nth-child(1) {
		flex-direction: row;
	}
	
	div.result_wall > div > div > div > div:nth-child(2) {
		flex-direction: row-reverse;
	}
	
	div.result_wall > div > div > div:last-child {
		justify-content: space-around;
	}
	
	div.result_wall > div > div > div:last-child > div { /*the status entry tile for the checkboxes*/
	flex-direction: row;
}

}

@media screen and (min-width: 60em) {
	div.result_wall {
		flex-direction: row;
	}
}
/*
div.result_wall button {
	flex-basis: 3em;
	margin: 0.1em;
}

div.result_wall button:first-child {
	background-color: blue;
	flex-basis: 21em;
}

div.result_wall button:nth-child(2) {
	background-color: green;
	flex-basis: 11em;
}
*/



/* the entry part of the game tile
div.result_wall > div > div > div, div.result_wall > div > div > div > div:nth-child(1) {
	flex-direction: row;
}
*/
/* the field and helmet container*/
div.result_wall > div > div > div > div > div {
	
}