:root {--body-bg-color: #f2f2f2;
	--font-family: Arial, Helvetica, sans-serif;
	--font-size: 14px;
	--font-color: #000080;
	--h3-text-color: #d2691e;
	--odd-bg-color: #f2f2f2;
	--odd-sel-color: #f7e6B1;
	--even-bg-color: #dbe5f1;
	--even-sel-color: #f8c27c;
	--hover-color: #00B894;
	--division-bg-color: #27417d;
	--division-font-weight: 600;
	--head-text-color: #ffffff;
	--date-bg-color: #4663a6;
	--time-bg-color: #2d8bc5;
	--time-font-weight: 550;
	--team-bg-color: #27417d;
	--game-winner-color: #d2691e;}
	
* {-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--font-family);
	font-size: var(--font-size);}
  
html,body {width: 100%;
	height: 100%;}

/* .schedule-game:not([data-hide]) {font-size: 200%;} */

input[type="radio"] {display: none;}

label {cursor: pointer;
    user-select: none;
    font-size: inherit;}

[data-hide] {display: none;}

.game-status[data-hide] {display: block;
    color: var(--time-bg-color);}

#select-dropdown label[data-hide] {display: none;}

.schedule-game[data-hide], .schedule-time-wrapper[data-hide], .schedule-day[data-hide] {display: none;}

#schedule-wrapper {display: flex;
    flex-direction: column;
    position: relative;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: #550000;}

#page-head {width: 100%;
	/* height: 30px; */
    flex: 0 0 30px;
	top: 0;
	display: flex;
	position: relative;
	justify-content: center;
    align-items: center;
	background-color: var(--team-bg-color);
	z-index: 2;
	color: var(--h3-text-color);
	font-size: 18px;
	overflow: hidden;}

#page-head .page-title-normal {font-size: inherit;}

#page-head .page-title-bold {font-size: inherit;
	font-weight: 600;
    padding: 0 .25em;}

.page-select {display: flex;
    position: relative;
    flex: 0 0 25px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    background-color: var(--team-bg-color);
    color: var(--odd-sel-color);}

#select-dropdown-close {display: none;}

#select-dropdown-close + label {display: flex;
    align-items: center;}

#select-dropdown-close + label::after {content: "▸";
    font-size: 150%;
    padding-left: .2em;
    text-shadow: 0 0 .3em white;}

#select-dropdown-close:checked + label::after {content: "▾";}

#select-dropdown-close:checked + label + #select-dropdown {display: flex;}

#select-dropdown {display: none;
    position: absolute;
    flex-direction: column;
    align-items: center;
    top: 30px;
    font-size: 18px;
    background-color: var(--team-bg-color);
    color: var(--odd-sel-color);
    overflow: auto;
    z-index: 3;}

#select-dropdown label {display: block;
    padding: 3px 10px;
    width: 100%;
    text-align: center;}

#select-dropdown label:hover {background-color: var(--h3-text-color);}

div#schedule {display: block;
	position: relative;
    flex: 1 1 auto;
	/* height: calc(100% - 75px); */
	width: 100%;
	background-color: var(--odd-bg-color);
	overflow: auto;}
	
div#schedule-foot {display: flex;
    flex: 0 0 45px;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	/* height: 45px; */
	background-color: var(--team-bg-color);}
	
div#schedule-foot .icon-image {flex: 0 0 50px;
	height: 30px;
	padding: 0 10px;}

div.schedule-date {width: 100%;
	padding: 2px;
	display: block;
	text-align: center;
	color: var(--head-text-color);
	background-color: var(--date-bg-color);
	font-size: 16px;
	font-weight: 700;
	position: -webkit-sticky;
  	position: sticky;
  	top: 0px;
  	z-index: 2;}

div.schedule-time-wrapper {display: block;
	position: relative;
	width: 90%;
	min-width: 260px;
	max-width: 350px;
	margin: 10px auto;
	border: 3px solid var(--date-bg-color);
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 0 10px var(--date-bg-color);
	z-index: 1;}

div.schedule-time {display: block;
	width: 100%;
	padding: 2px;
	position: relative;
	text-align: center;
	color: var(--head-text-color);
	background-color: var(--date-bg-color);
	font-weight: var(--time-font-weight);}

div.schedule-game {display: flex;
	flex-wrap: wrap;
	font-weight: 600;}

div.schedule-game div {padding: 2px 4px;
	white-space: nowrap;}

div.schedule-game[data-bye] div,
div.schedule-game[data-bye] div > * {font-style: italic;
	color: rosybrown}

/* div.schedule-game div[data-hide] {color: var(--time-bg-color);} */

div.game-info-row {background-color: var(--time-bg-color);
	color: var(--head-text-color);
	/*width: 100%;*/}

span.team-record {font-size: 80%;
	padding-left: 3px;}

div.game-number {flex: 0 0 15%;
	text-align: left;
	color: orange;}

div.schedule-game div.game-number {padding-top: 1px;}

/* .summary-link {cursor: pointer;
	text-decoration: underline;
	color: blue;} */
.summary-link {font-size: inherit;}

.summary-link[data-hide] {display: none;}

div.game-diamond {flex: 0 0 40%;
	text-align: left;}
	
div.game-status{flex: 1 0 45%;
	text-align: right;}

div.game-team-row {background-color: var(--odd-bg-color);
	color: var(--font-color);
	/*width: 100%;*/}
	
div.game-away-team {flex: 0 0 85%;
	text-align: left;}
	
div.game-away-score {flex: 1 1 15%;
	text-align: right;}
	
div.game-at-symbol {flex: 0 1 8%;
	text-align: left;
	font-size: 13px;
	color: var(--h3-text-color);
	font-weight: bold;}	
	
div.game-home-team {flex: 0 0 77%;
	text-align: left;}
	
div.game-home-score {flex: 1 1 15%;
	text-align: right;}

div.game-winner {color: var(--game-winner-color);}

div.game-status[data-status="played"] {color: #00b894;}

div.game-status[data-status="not reported"] {color: #ff0000;}
	
div.current-selection div.schedule-date {color: orange;}

div.current-selection div.game-team-row {background-color: var(--odd-sel-color);}

[data-overflow="overflow"] {font-stretch: ultra-condensed;}

@media only screen and (min-width: 540px) and (max-width: 799px)
{
	div.schedule-time-wrapper {min-width: 520px;
		max-width: 620px;}
		
	/* .game-away-team, .game-away-score, .game-at-symbol, .game-home-score, .game-home-team {border: 1px solid red;} */
	
	div.game-away-team {flex: 0 0 40%;
		text-align: right;}
	
	div.game-away-score {flex: 0 0 7%;}
		
	div.game-at-symbol {flex: 0 1 auto;
		text-align: center;}
	
	div.game-home-score {order: 7;
		flex: 0 0 7%;
		text-align: left;}
		
	div.game-home-team {order: 8;
		flex: 1 1 40%;
		text-align: left;}
}

@media only screen and (min-width: 800px)
{	
	div.schedule-time-wrapper, div.schedule-game, div.schedule-game div {all: unset;}
	
    div.schedule-game div[data-hide] {display: none;}

	div.current-selection div.game-team-row {all: unset;}
	
	div#schedule {height: calc(100% - 60px);}
	
	div#schedule-foot {display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		/*align-items: normal;*/
		position: relative;
		height: 30px;
		background-color: var(--team-bg-color);}
		
	div#schedule-foot .icon-image {flex: 0 0 50px;
		height: 25px;
		padding: 0 10px;
		/*margin-top: 3px;*/}
		
	div.schedule-day {width: 784px;
		margin: 10px auto;
		border: 3px solid var(--date-bg-color);
		box-shadow: 0 0 10px var(--date-bg-color);
		border-radius: 5px 5px 5px 5px;}
	
	div.schedule-date:hover {color: var(--hover-color);}
	
	div.current-selection div.schedule-date:hover {color: var(--hover-color);}
	
	div.schedule-date:hover ~ div.schedule-time-wrapper div.schedule-time {color: var(--hover-color);}
	
	div.schedule-date:hover ~ div.schedule-time-wrapper div.schedule-game {background-color: var(--hover-color);}
	
	div.schedule-date:hover ~ div.schedule-time-wrapper div.schedule-game div {color: white;}
		
	div.schedule-time {background-color: var(--time-bg-color);}
	
	div.schedule-time:hover {color: var(--hover-color);}
	
	div.schedule-time:hover ~ div.schedule-game {background-color: var(--hover-color);}
	
	div.schedule-time:hover ~ div.schedule-game div {color: white;}
		
	div.schedule-game {display: flex;
		flex-wrap: nowrap;
		position: relative;
		width: 100%;
		margin: 0;
		border: 0;
		font-weight: 500;
		background-color: var(--odd-bg-color);}
	
	div.schedule-game div, div.current-selection div.game-team-row {color: var(--font-color);
		padding: 3px 4px;
		font-size: 12px;
		white-space: nowrap;}
	
	div.schedule-game.even-row {background-color: var(--even-bg-color);}
	
	div.current-selection div.schedule-game {background-color: var(--odd-sel-color);}
	
	div.current-selection div.even-row {background-color: var(--even-sel-color);}
	
	div.schedule-game:hover {background-color: var(--hover-color);}
	
	div.schedule-game:hover div.game-number {color: white;}
		
	div.schedule-game:hover div.game-at-symbol {color: white;}
	
	.current-selection div.schedule-game:hover {background-color: var(--hover-color);}
		
	div.schedule-game div.game-number {flex: 0 0 40px;
		order: 1;
		padding-top: 2px;
		text-align: left;
		color: var(--h3-text-color);
		font-weight: bold;}
	
	div.schedule-game div.game-diamond {flex: 0 0 60px;
		order: 2;
		text-align: left;}
		
	div.schedule-game div.game-away-team {flex: 0 0 200px;
		max-width: 200px;
		order: 3;
		text-align: right;}
		
	div.schedule-game div.game-away-score {flex: 0 0 35px;
		order: 4;
		text-align: right;}
		
	div.schedule-game div.game-at-symbol {flex : 0 0 24px;
		order: 5;
		text-align: center;
		font-size: 11px;
		color: orange;
		font-weight: bold;}
	
	div.schedule-game div.game-home-score {flex: 0 0 35px;
		order: 6;
		text-align: left;}
	
	div.schedule-game div.game-home-team {flex: 0 0 200px;
		max-width: 200px;
		order: 7;
		text-align: left;}
		
	div.schedule-game div.game-status {flex: 0 0 120px;
		order: 8;
		text-align: left;}
	
	div.game-status[data-status="played"] {color: #006400;}
	
	div.game-status[data-status="not reported"] {color: #ff0000;}
	
	div.schedule-game div.game-winner {color: var(--game-winner-color);
		font-weight: bolder;}
	
	div.schedule-game:hover div {color: white;}
	
	div.game-team-row[data-overflow="overflow"] {font-stretch: condensed;}
}