/* Desktop only portion */
@media only screen and (min-width: 768px) {
	table.scheduleTable div.gameCellContent	{
	/* Though the class="grayBackground" is in html for both mobile and desktop, only desktop mode will show gray. This is because the HTML change was not looking clean, during roll outs, without this route */
		div.gameContentTitle.grayBackground { /* POTG */
			background: #E2E2E2;
			height:25px;
			line-height:25px;
			text-align: center;
			font-size:10px;
			font-weight:900;
			width:100%;
		}
		div.matchupName {
			text-align: center;
		}
	}
}
/* Below is mobile styling; other .responsiveScheduleDate CSS code block can be found in responsive.css */
.responsiveScheduleDate *{
	font-family:'Inter', 'Arial','Helvetica','Sans-serif','Sans' !important;	
	letter-spacing: normal;
}
.responsiveScheduleDate li .gameContentOuter {
	padding: unset !important;
}
.responsiveScheduleDate li .gameContentOuter .scheduledTeams {
	padding: 0.3em 0;
}
.responsiveScheduleDate .gameContentTitle {
	background: unset;
	border-top: #e2e2e2 1px solid;
	margin:0 0.3rem !important;
	padding-bottom: 0.2rem !important;
}
.responsiveScheduleDate .officiatedBy {
	border-top: #e2e2e2 1px solid;
	padding: 0.2rem 0.2rem !important;
	font-size: 0.9em;
}
.responsiveScheduleDate .gameRecapButton {
	display: grid;
	align-items: center;
	align-content: center;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	width: 100%;
	height: 2.5em;
}
.responsiveScheduleDate .gameRecapButton a {
	color:white !important; 
	padding:unset !important;
	height:100%;
	font-weight:600;
	text-align: center;
	text-decoration: none;
}
.responsiveScheduleDate .gameCellContent .potentialOpponents a, .responsiveScheduleDate .gameCellContent .teams a, .responsiveScheduleDate .gameCellContent .scheduledTeams a {
	font-weight: 500;
}

@supports(-moz-appearance:none) {
	.gameCellContent {
		height: auto !important;
	}	
}

/*	disabled schedule summary	*/
h3.scheduleDisabled{
	margin: 30px 100px;
}
div.scheduleSummary{
	margin: 20px 0 20px 50px;
	float:left;
	width: 170px;
}
div.scheduleSummary li{
	padding: 1px 8px;
	font-size:10px;
}
#scheduleSummary_Signup{
	clear:both;
	margin: 30px 100px;
}

/* outer container for each date */
div.gameDate{
	position:relative;
	clear:both;
	border-top: 2px solid #777;
	margin-bottom:1px;
	padding-bottom:20px;
	border-left:1px solid #fff;
}
div.gameDate.odd{
	border-left:1px solid #eee;
	background:#fbfbfb;
}

/* game date box	*/
div.gameDate h2{
	padding: 5px 0 5px 10px;
	background:#777;
	font-family:'Inter', 'Arial','Helvetica','Sans-serif','Sans' !important;	
	letter-spacing: normal;
}
div.gameDate h2 a{
	color:#fff;
	text-decoration:none;
	cursor:default;
}
span.scoreDisplay{
	font-size:10px;
	color:#555;
}
/*	playoffs	*/
div.playoffBanner{
	font-size:20px;
	font-weight:bold;
	text-align:left;
	padding: 14px;
	color:#777;
	position:relative;
}
div.playoffBanner a{
	position:absolute;
	right: 10px;
	top: 4px;
	font-size:12px;
}
/* content box */
div.leagueDateContent{
	position:relative;
	margin-left: 450px;
	margin-top:8px;
	width:270px;
	text-align:justify;
}
div.leagueDateContent div.teamThumbnail{
	position:absolute;
	left:0;
	top: 0;
	margin-left: -90px;
}
div.leagueDateContentItem{
	position:relative;
	margin-bottom: 12px;
	height:auto !important;
	height:60px;
	min-height:60px;
}

/* notes box */
div.leagueDateNotes{
	float:left;
	width:250px;
	margin:10px;
}
div.leagueDateNote{
	margin-bottom:12px;
}

/* double-headers */
div.doubleHeaders, div.byes{
	text-align:left;
	clear:left;
	float:left;
	width: 250px;
	margin:10px;
}
div.doubleHeaders h6, div.byes h6{
	color:#000;
}
div.doubleHeaders h6 a, div.byes h6 a {
	font-weight:normal;
	padding-left:4px;
}

/* tables for schedules */
table.scheduleTable{
	border-collapse: separate;
	margin:20px auto 0 auto;
	clear:both;
}
table.scheduleTable *{
	font-family:'Inter', 'Arial','Helvetica','Sans-serif','Sans';	
	letter-spacing: normal;
}

div.gameDate.odd table.scheduleTable th{
	background:#fbfbfb;
}

div.gameDate.even table.scheduleTable th{
	background:#fff;
}

/*	home/vis notes */
.gameDate .homeAndVisitor{
	text-align:center;
	margin-left: 100px;
}
#teamScheduleTable .homeOrVisitor{
	color:#aaa;
	font-size:11px;
}

/*	game cells	*/
table.scheduleTable td{
	width:199px;
	font-size:10px;
	padding: 7px 0;
	text-align:center;
	border:1px solid #ccc;	/* light borders between games */
	max-height: 200px;
	height: 100px;
	vertical-align: top;
}
table.scheduleTable.standardScheduleTable tr {
	td.gameTime{
		width: 110px;
		padding: 7px;
	}
	td div.gameCellContent {
		div.gameVS {
			font-size:10px;
			color:#000;			
			padding-left:7px;
		}
		div.teamColorSwatch_Small{
			left:7px;
			position:relative;
		}
	}
}

table.scheduleTable.flippedScheduleTable td{
	width:199px;
	font-size:10px;
	padding: unset;
	text-align:center;
	vertical-align:middle;
	border:1px solid #ccc;	/* light borders between games */
}

table.scheduleTable td a.editGameButton{
	font-size:11px;
	color:#000;
	border-radius: 5px;
	border-width: 1px;
	border-color: #aaa;
	background-color: #ddd;
	padding:3px;
}
.gameCellContent div.gameSlotEditElement{
	padding-top:10px;
	padding-bottom:5px;
}

/* Ad banner image */
img.scheduleBanner {
    width: 100%;
    max-height: 150px;
    object-fit: fill;
}

/* gameCellContent for both flipped and standard schedule table */
table.scheduleTable div.gameCellContent{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;

	div.scheduledTeams, div.gameContentTitle {
		flex: 0 0 auto;
	}
	div.gameRecapButton {
		margin: 8px auto;
		text-align: center;
		font-weight: 600;
		width: 70px;
		padding: 8px 0 5px 0;
		border-radius: 22px;
	}
	div.scheduledTeams{
		flex: 0 0 auto; 
		padding: 17px 5px 5px 5px;
		a.gameCellTeamOne, a.gameCellTeamTwo {
			font-size: 10px;
			font-weight:600;
			text-decoration: none;
			display: inline-block;
			color: #000;
			margin-left:3px;
		}	
		a.gameCellTeamOne:hover, a.gameCellTeamTwo:hover {
			background-color: unset;
			background:unset;
			color: #000;
			text-decoration:underline;
		}
	}	
	.bottomContent {
		margin-top: auto;
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
		align-self: stretch;
	}	
}
table.scheduleTable div.gameCellContent div.teams{ /* playoff */
	margin: 15px 10px;
	a {
		font-size: 10px;
		font-weight: 600;
		text-decoration: none;
		display: inline-block;
		color: #000;
		margin-left: 3px;
	}
}
.scheduleTable div.potentialOpponents{
	text-align:center;
	border:1px solid #ccc;
	margin:5px 10px;
}
.scheduleTable div.potentialOpponents a,.scheduleTable div.potentialOpponents div{
	font-size:9px !important;
	font-weight:500 !important;
}

table.scheduleTable div.gameContentMoreLink,
table.scheduleTable div.gameContentHeader {
	color:#777;
	font-size:10px;
	font-weight:200;
}
table.scheduleTable div.gameContentBody{
	font-size: 9px;
	font-weight:normal;
}
table.scheduleTable div.gameRecapButton {
	a {
		color: white;
		line-height: 17px;
		text-decoration: none;
		font-size:10px;
	}
	a:hover{
		background:unset !important;	
	}
}
table.scheduleTable div.gameRecapButton:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
/*	all column headers and row labels	*/
table.scheduleTable .rowLabel,
table.scheduleTable th{
	font-size:12px;
	font-weight:bold;
	color:#333;
}
table.scheduleTable th{
	text-align:center;
	padding: 10px 10px 6px 10px;
}	
table.scheduleTable tr td.rowLabel{
	background:transparent !important; 	/* to override zebras */
	text-align:right;
	width:auto;
	border:0;
}

/*	location / field headings	*/
table.scheduleTable .gameField{
	font-size:10px;
	font-weight:700;
	padding-bottom:4px;
	color:#000;
} 
table.scheduleTable .gameField div a{
	font-size: 12px;
	font-weight:600;
	padding-bottom:4px;
	color:#000;
}
table.scheduleTable .gameField div a:hover{
	text-decoration: underline;
	color:#000;
}
table.scheduleTable .gameFieldName {
	font-size: 10px;
	font-weight:400;
}

/* game time labels */
table.scheduleTable .gameTime, table.scheduleTable tr .gameTime span{
	font-size:10px;
	font-weight:700;
}

/* zebra-striping */
table.scheduleTable tr.odd td{
	background:#f5f5f5;
}
table.scheduleTable tr.even td{
	background:#fff;
}	
/* column or row between locations	*/
table.scheduleTable tr th.locationSpacer, table.scheduleTable tr td.locationSpacer{
	background:transparent;
	width:10px;
	padding:0;
	border:0;
	margin:0;
}

/*=================================
* 	STANDARD SCHEDULE STYLES	(column = field, row = time)
*==================================*/
/* top and bottom borders for game cells */
table.standardScheduleTable td.firstTime{		border-top:2px solid #000;	}
table.standardScheduleTable td.lastTime{		border-bottom:2px solid #000;	}
table.standardScheduleTable td.firstLastTime{	
	border-top:2px solid #000;
	border-bottom:2px solid #000;
}

/* left and right borders for game cells */	
table.standardScheduleTable td.firstField{		border-left:2px solid #000;	}
table.standardScheduleTable td.lastField{		border-right:2px solid #000;	}
table.standardScheduleTable td.firstLastField{
	border-left:2px solid #000;
	border-right:2px solid #000;
}
/* round corners */
table.standardScheduleTable td.firstTime.firstLastField{
	border-radius: 20px 20px 0 0;
}
table.standardScheduleTable td.firstTime.firstField{
	border-top-left-radius: 20px;
}
table.standardScheduleTable td.firstTime.lastField{
	border-top-right-radius: 20px;
}
table.standardScheduleTable td.lastTime.firstLastField{
	border-radius: 0 0 20px 20px;
}
table.standardScheduleTable td.lastTime.firstField{
	border-bottom-left-radius: 20px;
}
table.standardScheduleTable td.lastTime.lastField{
	border-bottom-right-radius: 20px;
}
table.standardScheduleTable td.firstLastTime.firstField{
	border-radius: 20px 0 0 20px;
}
table.standardScheduleTable td.firstLastTime.lastField{
	border-radius: 0 20px 20px 0;
}
table.standardScheduleTable td.firstLastTime.firstLastField{
	border-radius: 20px;
}
/*=================================
* 	FLIPPED SCHEDULE STYLES	(column = time, row = field)
*==================================*/
table.flippedScheduleTable tr td.gameField{
	width: 110px;
	padding: 7px;
}
table.flippedScheduleTable tr td div.gameCellContent {
	div.gameVS {
		font-size:10px;
		color:#000;			
		padding-left:15px;
	}
	div.teamColorSwatch_Small{
		left:7px;
		position:relative;
		display:inline-block;
	}
}
/* left and right borders for game cells */	
table.flippedScheduleTable td.firstTime{		border-left:2px solid #000;	}
table.flippedScheduleTable td.lastTime{		border-right:2px solid #000;	}
table.flippedScheduleTable td.firstLastTime{	
	border-left:2px solid #000;
	border-right:2px solid #000;
}

/* top and bottom borders for game cells */
table.flippedScheduleTable td.firstField{		border-top:2px solid #000;	}
table.flippedScheduleTable td.lastField{		border-bottom:2px solid #000;	}
table.flippedScheduleTable td.firstLastField{
	border-top:2px solid #000;
	border-bottom:2px solid #000;
}
table.flippedScheduleTable{
	td.firstField{		border-top:2px solid #000;	}
	td.lastField{		border-bottom:2px solid #000;	}
	td.firstLastTime{	
		border-left:2px solid #000;
		border-right:2px solid #000;
	}
/* round corners */
	td.firstTime.firstField{
		border-top-left-radius: 20px;
	}
	td.firstTime.lastField{
		border-bottom-left-radius: 20px;
	}
	td.firstTime.firstLastField{
		border-radius: 20px 0 0 20px; 
	}
	td.lastTime.firstLastField{
		border-radius: 0 20px 20px 0;
	}
	td.lastTime.firstField{
		border-top-right-radius: 20px;
	}
	td.lastTime.lastField{
		border-bottom-right-radius: 20px;
	}
	td.firstLastTime.firstLastField{
		border-radius: 20px;
	}
	td.firstLastTime.firstField{
		border-radius: 20px 0 0 20px;
	}
	td.firstLastTime.lastField{
		border-radius: 0 20px 20px 0;
	}
}
/**	schedules for the game detail popup and content actions... **/
/**	this one is used by admin, too	*/
#schedulePopUpLoading{
	width: 312px;
	margin: 30px auto;
	text-align:center;
}

div.public table.scheduleTable tr.odd td.hover{
	background-color:#EEE;
}	
div.public tr.even td.hover{
	background-color:#fafafa;
}
div.public table.scheduleTable a.hover{
	color:#fff;
	text-decoration:none;
}
div.public table.scheduleTable tr.odd td.linkHover{
	background-image:none; 
}	
div.public table.scheduleTable tr.even td.linkHover{
	background-image:none; 
}
div.public table.scheduleTable a.hover{
	color:#fff;
	text-decoration:none;
}
div.public table.scheduleTable tr.odd td.viewing,
div.public table.scheduleTable tr.even td.viewing,
div.public table.scheduleTable tr.odd td.viewing a,
div.public table.scheduleTable tr.even td.viewing a,
div.public table.scheduleTable tr.odd td.viewing div,
div.public table.scheduleTable tr.even td.viewing div,
div.public table.scheduleTable tr.odd td.viewing span,
div.public table.scheduleTable tr.even td.viewing span{
	color: #fff;
	background: #333;
}

/*	table showing teams and scores	*/
table.gameDetailTable td{
	vertical-align:middle;
	padding: 6px;
}
table.gameDetailTable tr.hasScores th{
	border-bottom: 1px solid #ddd;
}
table.gameDetailTable div.teamThumbnail{
	height: auto !important;
	height: 60px;
	min-height: 60px;
}
table.gameDetailTable tr.win td.icon{
	background:url(../graphics/win-indicator-arrow.gif) no-repeat 0 50%;
}
table.gameDetailTable td.hasIcon{
	width: 60px;
	padding: 2px 0 2px 18px;
}
table.gameDetailTable div.teamColorSwatch_Large{
	margin-top: 25px;
}
table.gameDetailTable td.noIcon{
	width: 20px;
	padding: 2px 0;
}
table.gameDetailTable td.noIcon div.teamThumbnail{
	width:auto;
}
table.gameDetailTable div.teamName{
	font-size: 15px;
	font-weight:bold;
	padding-bottom: 2px;
	width: 200px;
}
table.gameDetailTable td.teamName span.record{
	font-size:11px;
	font-weight:normal;
	color:#777;
	padding-right: 12px;
}
table.gameDetailTable td.teamName a{
	font-size:11px;
	font-weight:normal;
}
table.gameDetailTable .scoreComponent,
table.gameDetailTable .scoreTotal{
	text-align:center;
}
table.gameDetailTable th.scoreComponent, table.gameDetailTable th.scoreTotal{
	color:#999;
	border-bottom:1px solid #ddd;
	font-weight:100;
}
table.gameDetailTable th.scoreTotal{
	font-weight:bold;
}
table.gameDetailTable td.scoreComponent{
	color:#555;
	font-weight:bold;
}
table.gameDetailTable td.scoreTotal{
	font-size: 19px;
	font-weight:bold;
	padding: 6px 20px;
}

/*	game content and POTG in the popup	*/
#gameDetailPopup div.gameContent{
	width: 450px;
	margin: 12px 0 0 0;
	border-top: 1px dotted #ccc;
	padding: 12px 10px 0 10px;
}
#gameDetailPopup div.gameContent div.title,
#gameDetailPopup div.gameContent div.title span{
	font-weight:bold;
	font-size: 13px;
	margin-bottom: 4px;
}
#gameDetailPopup div.gameContent div.header{
	font-style:italic;
	margin-bottom: 3px;
}
#gameDetailPopup div.gameContent div.body{
	padding: 0;
}

/*=================================
* 	SCHEDULE STYLES FOR WHEN ScheduleMode IS SET TO TeamAssigment
*==================================*/
div.teamAssignmentTime{
	clear:left;
	margin-bottom:16px;
}
div.teamAssignmentTime * {
	font-family:'Inter', 'Arial','Helvetica','Sans-serif','Sans' !important;	
	letter-spacing: normal;
}
div.teamAssignmentTime div.timeHeading{
	float:left;
	width:80px;
	text-align:center;
	font-size:13px;
	background:#777;
	color:#fff;
	font-weight:700;
	padding: 2px 4px;
	height:16px;
}
div.teamAssignmentTime div.locationHeading{
	float:left;
	width:600px;
	padding: 2px 10px;
	height:16px;
}
div.locationHeading a{
	font-size: 13px;
	font-weight:bold;
}
div.timeAssignments{
	clear:left;
	border:1px solid #eee;
	padding: 6px 20px;
	width:700px;
	
}
div.timeAssignments div.teamAssignmentColumn{
	position:relative;
	float:left;
	width:335px;
	padding-top: 20px;
}
div.teamAssignmentColumn div.heading{
	position:absolute;
	top: 0;
	font-size:12px;
}
div.teamAssignmentColumn div.fieldHeading{
	left: 0px;
	font-size:9px;
}
div.teamAssignmentColumn div.scoreHeading{
	right: 3px;
	text-align:right;
	font-size:10px;
}
div.timeAssignments div.column_0{
	margin-right: 20px;
}
/*	actual slots with teams in them	*/
div.teamAssignmentSlot{
	position:relative;
	margin: 0 0 10px 0;
	border:1.5px solid #000;
	border-radius:8px;
	display:flex;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
div.teamAssignmentSlot div.fieldNumber{
	display:flex;
	align-items: center;
	justify-content: center;
	min-width:40px;
	width:55px;
	height:auto;
	font-weight:bold;
	text-align:center;
	color:#000;
	background:#eee;
	border-bottom-left-radius: 8px;
	border-top-left-radius: 8px;
}
div.teamAssignmentSlot div.slotContents{
	border-left:1px solid #000;
	height:auto !important;
	min-height:25px;
	width:100%;
	border-bottom-right-radius: 8px;
	border-top-right-radius: 8px;
	padding: 6px 10px 6px 3px;
}
div.teamAssignmentSlot div.slotContents div.label {
	padding-top:4px;
}
div.teamAssignmentSlot div.slotContents a.editGameButton {
	font-size: 11px !important;
	margin-left: 6px;
	background-color: #DDD;
	color: black;
	border-radius: 5px;
	border-width: 1px;
	border-color: #aaa;
	padding: 3px;
}	
div.teamAssignmentSlot div.teamAssignment{
	position:relative;
	padding-left: 3px;
	a {
		color: black;
		font-weight: 500;
	}
	hr {
		color:#ddd;
		border:0.5px solid;
	}
}
div.teamAssignmentSlot div.teamScore{
	position:absolute;
	top: 3px;
	right: 6px;
	text-align:right;
	font-size:11px;
	font-weight:bold;
}
div.teamAssignmentSlot div.gameContent{
	padding: 3px 10px 3px 20px;
	margin-top:10px;
	border-top:1px dotted #000;
	border-bottom:none;
	color:#555;
	font-size: 0.9em;
}