@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;1,600;1,700&display=swap');

@font-face {
	font-family: "NHL";
	src: url("/fonts/nhl.ttf");
}

@font-face {
  font-family: 'Balisong';
  src: url('/fonts/Balisong-Ultra-1a56.woff2') format('woff2');
}

:root {
	--bg-color-light: #f6f6f6;
	--bg-color-dark: #666;
	--fg-color-light: #f6f6f6;
	--fg-color-dark: #222;
	--subtle-border: 1px solid var(--bg-color-dark);
	--container-child-margin-hor: 40px;
	--header-margin-vert: 0px;
	--header-height: 95px;
	--foreground-disabled: #aaa;
	--homepage-section-vertical-gap: 15px;
	--textbox-fill-color: #eee;
	--textbox-padding: 10px;
	--chlp-text-colour: #ddd;
	--recent-play-color-fg: #2000FF;
	/* --recent-play-points-dont-count-color-fg: #8372f9; */
	--recent-play-points-dont-count-color-fg: #a99cff;
	--injured-icon-in-modal-side: 18px;
}

html {
	box-sizing: border-box;
	font-family: verdana, san-serif;
	font-size: 10pt;
	color: var(--fg-color-dark);
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height); /* height of sticky header, for internal links to account for the sticky header */
}

html, body {
	background-color: var(--bg-color-dark);
}

*, *:before, *:after {
	box-sizing: inherit;
}

.page-not-found {
	margin: auto;
}

body.under-construction .page-content {
	margin: auto;
	background: no-repeat center url("/images/under-construction-puck.png");
	filter: grayscale(100%) opacity(25%);
}

.page-not-found h1 {
	font-size: 50pt;
	font-style: normal;
}

.page-not-found .subtext {
	font-size: 20pt;
}

h1 {
	font-family: 'Balisong';
	font-size: 40pt;
	font-weight: 700;
	color: var(--bg-color-dark);
	margin: 0;
	display: inline;
}

.title-subtext {
	display: inline;
}

header {
	padding: 20px;
	position: relative;
	background-color: #000;
	margin: 0 !important;
	height: 130px;
}

header .summary-info {
	margin-top: 10px;
}

header .summary-info .title {
	margin-right: 5px;
}

header img.logo {
	height: 100px;
}

header .controls {
	position: absolute;
	right: 5px;
	bottom: 5px;
	display: flex;
	flex-direction: row;
	gap: 5px;
}

header h1 {
	display: inline-block;
	position: relative;
	top: -20px;
}

header h1 a {
	font-size: 60pt;
}

footer .summary-info .item {
	margin-bottom: 6px;
}

footer .summary-info .title {
	color: #ccc;
}


#seasonSelector {
	display: inline-block;
}

body {
	margin: 0;
	padding: 0;
	height: 100vh;
}

.full-height-grow {
	display: flex;
	flex-direction: column;
}

.container {
	/* width: 2090px; UPDATE: This is now set dynamically in master.php via PHP. */
	margin: 0 auto;
	/*padding: 0 var(--container-padding-hor);*/
	background-color: var(--bg-color-light);
	box-shadow: 12px 0 15px -4px rgba(60, 60, 60, 0.8), -12px 0 8px -4px rgba(60, 60, 60, 0.8);
	flex-grow: 1;
	
	display: flex;
	flex-direction: column;
	
	position: relative; /* For the placement of the environment info. */
}

.container .child-with-margin {
	margin-left: var(--container-child-margin-hor);
	margin-right: var(--container-child-margin-hor);
}

.page-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	margin: 10px !important;
}

#back-to-top {
    position: fixed;
    bottom: 30px;
	right: 30px;
    z-index: 9999;
    text-align: center;
    line-height: 30px;
    color: #888;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
	font-size: 1.0rem;
}

#back-to-top.show {
    opacity: 1;
}

nav {
	width: 100%;
	background-color: var(--bg-color-dark);
	margin: 0 var(--container-padding-hor-neg);
	text-transform: uppercase;
}

nav.nav {
	line-height: 2.3rem;
}

.nav li.active a {
	border-bottom: 3px solid red;
}

.nav ul {
	border-radius: 0
}

.nav a 
, .nav a:active
, .nav a:visited
{
	color: #fff;
	border-radius: 0;
}

.nav a:hover 
, .nav li:hover > a
, .nav li.nav-active > a
{
	color: #f00 !important;
}

nav form {
	z-index:1000; 
}
nav form, nav select {
	background-color: #000;
	color: #fff;
}
nav form select.year option {
	text-align: left;
}

img.injured {
	width: 10px;
	height: 10px;
	margin-top: 2px;
	/* filter: brightness(60%); */
	filter: saturate(70%);
}

img.injured:hover {
	cursor: pointer;
}

.modal img.injured {
	width: var(--injured-icon-in-modal-side);
	height: var(--injured-icon-in-modal-side);
	position: relative;
	top: 2px;
}

.points-dont-count img.injured {
	opacity: .4;
}

.new-item {
	position: absolute;
}

.fr-list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

/*
LOOK IN MASTER.PHP FOR THIS
.fr-container {
	width: 245px;
}
*/

.fr-container {
	display: flex;
	/* flex: 1 1 0px; */
	flex-direction: column;
	background-color: var(--bg-color-light);
	min-height: 200px;
	padding: 3px;
	margin: 0;
	border: 1px solid var(--bg-color-dark);
	color: var(--fg-color-dark);
}

.fr-header {
	border: var(--subtle-border);
	position: relative;
	text-decoration: none;
}

.fr-main-section {
	padding: 5px;
}

.fr-container .fr-totals-section {
	margin: var(--homepage-section-vertical-gap) 0;
	padding: 0 5px;
}

.fr-container .fr-totals-section.before-no-header-section {
	margin-bottom: 6px;
}

.fr-container .fr-total {
	display: flex;
}

.fr-container .fr-total .right {
	text-align: right;
	margin-left: 14px;
}

.fr-list .fr-total, .fr-list .pip-section-header, .fr-list .player {
	max-width: 218px;
}

.fr-list-regseason-pg .fr-container .players-in-pos {
	margin: var(--homepage-section-vertical-gap) 0;
}

.fr-list-regseason-pg .fr-container .players-in-pos:first-of-type {
	margin-top: 0;
}

.fr-list .all-star-player-count-phrase {
	display: none;
}

.waiver-wire .player {
	/* Purple */
	/* color: #b71ca6; */

	/* Blue */
	color: #0509e4;
	
	/* color: #8c39f0; */
	/* color: #1671ff; */
	/* color: #8f3dd3; */
	/* color: #0435c7; */
	/* color: #0040ff; */
}

.waiver-wire .player.ending {
	/* Pure orange */
	/* color: #ff8000; */
	
	/* Red orange */
	color: #e64d02;
}

.waiver-wire .player.ended {
	color: var(--foreground-disabled);
}

.waiver-wire .pip-section-header {
	display: none !important;
}

.fr-container .total {
	display: flex;
}


.fr-container .player,
.as-team .player,
.leaders .player
{
	display: flex;
	align-items: flex-end;
	min-height: 20px;
}

.hover-hit-zone {
	position: relative;
}

.hover-text {
	display: none;
	
	position: absolute;
	top: 0;
	right: -20px;
	color: black;
	background-color: #fff;
	padding: 2px;
	border: 1px solid #aaa;
	margin: 0 3px;
	z-index: 10;
}

.hover-text:hover {
	display: block;
}

.fr-container .player.points-dont-count {
	color: var(--foreground-disabled);
}

.points-delta {
	vertical-align: super;
	font-size: 7pt;
	/* color: #C314C3; */
	color: var(--recent-play-color-fg);
	text-align: left;
	font-weight: normal;
}

.legend .played-last-night .meaning
, .fr-container .player.played-in-time-span .right .points {
	color: var(--recent-play-color-fg);
	font-weight: bold;
}

.legend .clickable:hover {
	cursor: pointer;
}

.played-in-time-span {
}

.played-no-points {
}

.fr-container .player.overflow-player-for-pos:nth-child(1 of .overflow-player-for-pos) {
	border-top: 1px solid #bbb;
}
.fr-container .player.bottom-line {
	border-bottom: 1px solid #bbb;
}

.player .left {
	margin-right: 5px;
	width: 27px;
	min-width: 27px; /* Just width isn't enough. Perhaps width is not actually necessary. */
	font-size: 9pt;
	position: relative;
	top: -1px;
}

.fr-container .player > div,
.fr-container .pip-section-header > div,
.as-team .player > div {
	display: flex;
}

.franchise-abbr {
	text-transform: lowercase;
}

.fr-container .player.points-dont-count .team-abbr.is-eligible-playoffs-formatted {
	color: #888;
}

.fr-container .player .mid,
.as-team .player .mid {
	margin-right: 5px;
	white-space: nowrap;
	/* overflow: hidden; */
	/* text-overflow: ellipsis; */
	min-width: 0; /* Um, might need this. See: https://css-tricks.com/flexbox-truncated-text/ */
}

.fr-container .player .name {
  white-space: nowrap;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  max-width: 90px;
}

.player.has-game-today .team-abbr,
.team-abbr.has-game-today,
.players-page .team-list h3.has-game-today,
.legend .has-game-today .meaning {
	color: #299b00;
	/* color: #d50000; */
	/* font-weight: bold; */
}

.mid-right {
	flex-grow: 1;
}

.fr-container .right,
.fr-ranks-players-rolled-up .right,
.as-team .right {
	margin-left: 5px;
	text-align: right;
	display: flex;
	/* flex-direction: row; */
	flex-direction: row-reverse;
	/* gap: 3px; */
}

.fr-container .right .points {
	width: 42px; /* Must accommodate a points value of (.000) for some goalies. */
}

.fr-container .right .points-delta {
	width: 13px;
}

.fr-container .player.points-dont-count.played-in-time-span .right .points {
	font-weight: bold;
	color: var(--recent-play-points-dont-count-color-fg);
}

.fr-container .player.played-no-points .right .points {
	/* text-decoration: line-through; */
	/* color: #5F4003; */
}

.player-suffix-symbols {
	margin-left: 3px;
}

.nhl-logo {
	font-family: nhl;
	margin: 0 1px;
}

.fr-list-regseason-pg .nhl-logo + .nhl-logo,
.all-star-pg .nhl-logo + .nhl-logo {
	margin-left: 1px;
}

.fr-container .pip-section-header {
	display: flex;
	font-weight: bold;
	margin-bottom: 3px;
}

.fr-container .pip-section-header .left {
	flex-grow: 1;
	text-transform: uppercase;
}

.fr-container .pip-section-header .points {
}

.fr-item,
.fr-item.fr-header div {
	padding: 2px 5px;
	border: none;
}

.fr-item.fr-header {
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
}

.fr-item.fr-players {
	padding-top: 0;
}

.fr-item span:hover {
	overflow: visible;
}

.fr-item.fr-manager-name {
}

header .season
, header .env {
	display: inline-block;
	top: -15px;
	position: relative;
}

header .season {
	font-size: 20pt;
	font-weight: bold;
	color: var(--chlp-text-colour);
}

header .env {
	font-size: 20pt;
	font-weight: bold;
	min-height: 20px;
	text-transform: uppercase;
	margin-left: 10px;
}

div.env.dev {
	color: #f00;
}

div.env.test {
	color: #03a103; /* green */
}

div.env.production {
	opacity: 0;
}

header h1 a
, header h1 a:hover
, header h1 a:visited
, header h1 a:active
, header h1 a:focus
{
	text-decoration: none;
	color: var(--chlp-text-colour);
}

header .page-title {
	/* This behaves differently between browsers, so use PHP ucwords() instead.
	/* text-transform: capitalize; */
	height: 40px;
	margin-left: 20px;
	margin-top: 2px;
	font-family: "Balisong";
	font-size: 10pt;
	color: #fff;
	
	/* Desktop view */
	display: none;
}

footer {
	min-height: 110px;
	background-color: #000;
	color: var(--fg-color-light);
	display: flex;
	align-items: center;
}

footer .child-with-margin {
}

.legend h3 {
	margin: 10px 0;
}

.legend .items {
	display: flex;
	flex-direction: row;
	font-size: 11pt;
}

.legend .list-item {
	display: flex;
	flex-direction: row;
	margin-right: 30px;
}

.list-item.has-game-today .meaning .new-item {
	right: -20px;
	top: -14px;
}

.legend .list-item .symbol {
	margin-right: 5px;
}

.legend .list-item .meaning.has-info {
	pointer-events: none;
}

.legend .list-item .meaning.has-info::after {
	content: '\f059';
	font-family: "Font Awesome 6 free"; 
	font-weight: 400;
	position: relative;
	margin-left: 6px;
	top: -6px;
	cursor: pointer;
	pointer-events: all;
}

.is-ko-playoffs {
	color: var(--foreground-disabled);
}

.modal {
	font-size: 13pt;
}

.modal h1 {
	font-style: normal;
	font-size: 16pt;
	display: block;
	margin-bottom: 10px;
	text-align: center;
}

.modal h2 {
	font-size: 16pt;
}

.modal .field-title {
	font-weight: bold;
	margin: 0 0 6px;
}

.modal .field {
	margin: 12px 0;
}

.fr-ranks-players-rolled-up {
	display: flex;
	flex-direction: column;
	margin: 40px 0;
}

.fr-ranks-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: start;
	gap: 15px;
}

.fr-ranks {
	background-color: var(--textbox-fill-color);
	padding: var(--textbox-padding);
	width: 378px
}

.fr-ranks .headers .gaps {
	text-align: right;
}

.fr-ranks .gaps {
	min-width: 62px;
	text-align: right;
}

.fr-ranks-players-rolled-up h3 {
	margin-top: 0;
	text-transform: uppercase;
}

.fr-ranks-players-rolled-up .list-item {
	min-height: 20px;
}

.fr-ranks-players-rolled-up .list-item .left {
	width: 20px;
	margin-right: 3px;
}

.fr-ranks-players-rolled-up .list-item .rank {
	font-weight: bold;
}

.fr-ranks-players-rolled-up .list-item .mid {
}

.list-item .mid-right {
	flex-grow: 1;
}
	
.fr-ranks-players-rolled-up .list-item .right {
	text-align: right;
	margin-left: 5px;
}

/* PAGE: all-star.php */

.as-team {
	width: 250px;
}

.all-star-pg h2
, .playoffs h2 {
	margin: 40px 0 15px;
}

.all-star-pg h2:first-of-type
, .playoffs h2 {
	margin-top: 10px;
}

.all-star-pg .fr-total.all-star {
	font-weight: bold;
}

.all-star-pg .fr-container .fr-totals-section {
	margin: 10px 0;
}

.all-star-pg .fr-players {
	margin-top: 10px;
	margin-bottom: 10px;
}

.all-star-pg .goalies {
	/* Must be inline for the jQuery/JS divider line calculation to work. */
}

.all-star-pg .fr-container .players-in-pos.goal {
	margin: 10px 0 0;
}

.as-team-list {
	display: flex;
	gap: 0 15px;
}

.as-team-list .as-team {
	background-color: #eee;
	padding: 13px;
}

.as-team-list .as-team .header {
	display: flex;
	align-items: center;
	gap: 0 13px;
	border-bottom: 1px solid #a6a6a6;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.as-team-list .as-team img {
	width: 100px;
}
.as-team-list .as-team .players.tbd {
	min-width: 260px;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: 700;
}

.as-team-list .non-franchise-players {
	border-top: 1px solid #ccc;
	margin-top: 10px;
}

.is-traded {
	font-style: italic;
}

.is-eligible-playoffs-formatted {
	font-weight: 700;
}

/* PAGE: players.php (Players Page) */

.players-page .team-list {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.players-page .team-list .team {
	background-color: #eee;
	display: flex;
	flex-direction: column;
	padding: 15px;
	width: 217px;
	gap: 5px;
}

.players-page .team-list .team .team-logo img {
	height: 62px;
	display: block; 
}

.players-page .team-list .player {
	display: flex;
}

.players-page .team-list .player div {
	display: flex;
}

.players-page .mid-right {
	position: relative;
	margin: 0 3px;
}

.players-page .mid-right::before {
	content: '';
	position: absolute;
	width: 100%;
	border-bottom: 2px dotted #ccc;
	bottom: 2px;
	height: 5px;
	line-height: 5px;
}

.players-page .team-list .player .right {
	align-self: flex-end;
}

.players-page .team-list .team h3 {
	margin: 0 0 6px;
	font-size: 1.2rem;
	font-weight: 400;
	text-transform: uppercase;
}

.players-page .team-list .team h3.is-eligible-playoffs-formatted {
	/* color: #a00; */
	font-weight: 700;
}

.players-page h2 {
	margin-top: 35px;
}


/* END PAGE players-page.php */

/* PAGE: *** STANDINGS *** */

.standings .fr-ranks .header 
, .standings .fr-ranks .list-item {
	vertical-align: top;
}

.standings .fr-ranks .header  {
	font-weight: bold;
}

.standings .fr-ranks .rank {
	min-width: 15px;
}

.standings .fr-ranks .header .gap-to-top {
	font-size: 9.7pt;
}

.standings .fr-ranks .number {
	text-align: right;
}

.standings .points {
	min-width: 41px;
}

.standings .gap {
	min-width: 41px;
}

.standings .gap-to-top {
	min-width: 56px;
}

.standings .fr-ranks {
	display: flex;
	flex-direction: column;
}

.standings .fr-ranks > div {
	display: flex;
	flex-direction: row;
}

.standings .fr-ranks > div .fr-name {
	flex-grow: 1;
}

.standings .fr-ranks > div .number {
	align-self: flex-end;
}

/* END PAGE STANDINGS */

/* PAGE: *** PLAYOFFS *** */

.playoffs .page-content .standings .grid h3 {
	margin: 0;
}

.playoffs .page-content .fr-header {
}

.playoffs .page-content .fr-container {
	width: 478px;
}

.playoffs .page-content .column-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px 75px;
}

.playoffs .page-content .left-column {
	/* width: 1594px; */
}

.playoffs .page-content .right-column {
	/* align-self: flex-end; */
	gap: 15px;
}

.playoffs .page-content .fr-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: left;
}

.playoffs .page-content .fr-list .points-val {
	min-width: 34px;
}

.playoffs .page-content .fr-list .points-val.player-playoff-round-total {
	min-width: 50px;
}

.playoffs .page-content .fr-list .points-val div {
	display: inline-block;
}

.playoffs .page-content .fr-list .points-val .number {
	width: 20px;
}

.playoffs .page-content .fr-list .points-val .points-delta {
	min-width: 14px;
}

.playoffs .page-content .standings {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	/* width: 400px; */
	gap: 50px;
}

.playoffs .page-content .standings-grid {
	/* background-color: #eee; */
	/* height: 30px; */
}

.playoffs .page-content .standings-grid .row-header {
	padding-right: 4px;
}

.playoffs .page-content .standings-grid thead tr th {
	padding-left: 5px;
}

.playoffs .standings-grid td.fr-name {
	min-width: 207px;
}

.playoffs .page-content .standings-grid table thead tr {
	height: 36px;
	vertical-align: bottom;
}

.playoffs .page-content .fr-item.fr-players {
	margin: 10px 0;
}

.playoffs .page-content .fr-players table {
	border-collapse: collapse;
}
.playoffs .page-content .fr-players td {
	padding: 2px 7px;
}
.playoffs .page-content .fr-players tbody td, 
.playoffs .page-content .fr-players tfoot td.border {
	border: 1px solid #ccc;
}

.playoffs .page-content .fr-players tr.goalie td {
	background-color: #eee;
}

.playoffs .page-content .row-header, 
.playoffs .page-content .points-val {
	text-align: right;
}

.playoffs .page-content .fr-players thead, 
.playoffs .page-content .fr-players th, 
.playoffs .page-content .fr-players tfoot {
	font-weight: bold;
}
.playoffs .page-content .fr-players .player-name {
	width: 100%; /* It won't actually be. */
}

.playoffs .page-content .fr-players td i {
/*
	color: transparent;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #777;					
*/

}

.playoffs .page-content .points,
.playoffs .page-content .gap {
	text-align: right;
}

.playoffs .hover-text {
	left: 10px;
	top: 10px;
	right: auto;
}

.didnt-play-round,
.knocked-out,
.moves-to-next-round {
	color: #c8c8c8;
	text-align: center !important;
}

.standings-grid table {
	width: 100%;
}

.playoffs .page-content .legend {
	margin-top: 10px;
}

/* END PAGE: playoffs.php */


/* PAGE: leaders-by-pos.php */

.leaders {
}

.leaders .position-sections {
	display: flex;
	gap: 0 15px;
}

.leaders .section {
	background-color: var(--textbox-fill-color);
	padding: var(--textbox-padding);
}

.leaders .player-list {
	width: 300px;
}

.leaders .title-bar {
	display: flex;
	margin-bottom: 3px;
	flex-direction: row;
	gap: 0 4px;
	align-items: flex-end;
}

.leaders .title-label {
	font-weight: bold;
	margin: 0;
}

.leaders .player {
	gap: 0 4px;
	align-items: flex-end;
}

.leaders .player .left {
	display: flex;
	flex-direction: row;
	width: auto;
}

.leaders .player .left .franchise-abbr {
	width: 18px;
}

.leaders .player .left .metric {
	width: 27px;
	text-align: right;
	margin-right: 6px;
}

.leaders .right {
	text-align: right;
	display: flex;
}

.leaders .right .metric {
	width: 41px; /* Note: Longest metric might be, for example: "(105)" */
}

.leaders .right .metric:first-of-type {
	width: auto;
}

.leaders .title-bar .mid-right:before {
	border: 0;
}

/* END PAGE: leaders-by-pos.php */

#filters-section {
	display: flex;
	/* border: 1px solid #666; */
	/* background-color: white; */
	padding: 10px;
	margin: 10px 0;
	flex-direction: row;
	justify-content: space-between;
}

.filter {
	display: flex;
	flex-direction: row;
	gap: 0 10px;
}

/* **************************************************************************** */
/* FORM CONTROLS
/* **************************************************************************** */

button {
	color: #fff;
	background-color: #0861cb;
	padding: 10px;
}

select {
	padding: 0 4px 0 0;
}

select option {
	
}

/* IF YOU CHANGE max-width, THEN CHANGE min-width IN MASTER.PHP TOO!! */
@media (min-width: 901px) {
	.fr-list .fr-total.all-star .left {
		display: flex;
		flex-direction: row;
	}

	.fr-list .fr-total.all-star .left .title {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 1000px; /* Effectively no truncation for now. See CHLP-80 in Jira. */
		/* max-width: 98px; */
	}
}

/* IF YOU CHANGE max-width, THEN CHANGE min-width IN MASTER.PHP TOO!! */
@media (max-width: 900px) {
	:root {
		--header-height: 105px;
	}
	
	header {
		margin: 0 !important;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10;
		height: 100px;
		box-shadow: 0 4px 2px -2px gray;
		padding: 10px;
		height: var(--header-height);
	}
	
	header img.logo {
		height: 60px;
		margin-top: 15px;
	}
	
	header .page-title {
		position: absolute;
		top: 19px;
		right: 33px;
		display: unset;
	}
	
	header h1 a {
		font-size: 24pt;
	}
	
	div.season
	, div.env {
		left: -105px;
		top: 4px;
		font-size: 12pt;
	}
	
	div.section-selector {
		display: block !important;
	}
	
	div.section-selector select {
		max-width: 80px;
	}
	
	body, .container {
		padding: 0;
		margin: 0;
		width: 100%;
	}
	
	body { 
		margin: var(--header-height) 0 0;
	}
	
	body.under-construction .page-content {
		background-size: 100vw;
	}
	
	nav.nav {
		line-height: 4.4rem;
	}
	
	.nav-button {
		right: 0;
		top: -2px;
	}
	
	a.nav-button
	, a.nav-button:active
	, a.nav-button:hover
	, a.nav-button:visited {
		color: #fff;
		text-decoration: none;
	}
	
	.nav li.active a {
		color: #f00;
		border-bottom: 0px none;
	}
	
	.new-menu-item {
		position: static;
		top: auto;
		right: auto;
	}
	nav .options form {
		width: 100%;
		height: 100%;
	}
	nav .options form div.control {
		display: flex;
		width: auto !important; /* Why do I need !important here? Doesn't @media override? */
	}
	nav .options form div.control label {
		display: flex;
		width: 250px;
	}
	
	nav .new-item {
		top: 16px !important;
		left: 73px !important;
		right: auto !important;
	}
	
	.page-content.child-with-margin {
		margin: 0;
	}
	
	.fr-list,
	.as-team-list
	{
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: auto;	
	}
	
	.fr-container,
	.as-team {
		margin-top: 0;
		width: 100%;
		padding: 0;
	}

	.fr-list .fr-total, .fr-list .pip-section-header, .fr-list .player {
		max-width: unset;
	}

	.fr-container .right .points-delta {
		width: 13px;
	}
	
	.fr-container .player.spacer {
		display: none;
	}
	
	.mid-right {
		position: relative;
	}
	
	.mid-right::before {
		content: '';
		position: absolute;
		width: 100%;
		border-bottom: 2px dotted #ddd;
		bottom: 2px;
		height: 5px;
		line-height: 5px;
	}
	
	.fr-header {
		position: sticky;
		top: 0px;
		z-index: 1;
	}

	.fr-container .player .left,
	.as-team .player .left {
		width: 25px;
	}

	.legend, .fr-ranks-players-rolled-up {
		margin: 0 10px 0;
	}
	
	.fr-ranks-players-rolled-up {
	}
	
	.legend .items {
		flex-direction: column;
	}
	
	.legend .list-item {
		margin-bottom: 6px;
		display: flex;
		
	}
	
	.legend .symbol {
		text-align: center;
		width: 20px;
	}
	
	.legend .meaning {
		align-self: center;
	}

	.list-item.has-game-today .meaning .new-item {
		right: -39px;
		top: -1px;
	}

	.fr-ranks-group {
		flex-direction: column;
	}

	.fr-ranks {
		background-color: inherit;
		width: 100%;
	}
	
	.fr-ranks + .fr-ranks {
		margin-left: 0;
	}
	
	.players-page
	, .players-page .franchise-abbr {
		font-size: 9pt;
	}
	
	.players-page .player .left {
		width: 20px;
		margin-right: 3px;
	}

	.players-page .player .name {
		overflow: hidden;
		white-space: nowrap;
		max-width: 66px;
	}
	
	.players-page .team-list {
		gap: 7px;
	}
	
	.players-page .team-list .team {
		padding: 8px;
		width: 48%;
	}
	
	.nav-button, .nav-close {
		background-color: transparent;
	}
	
	/* PLAYOFFS PAGE */
	
	.playoffs .page-content .column-container {
		flex-direction: column;
	}
	
	.playoffs .page-content .standings {
		flex-direction: column;
		gap: 20px;
	}
	
	.playoffs .page-content .standings-grid table thead tr {
		height: auto;
	}
	
	.playoffs .page-content .fr-container,
	.playoffs .page-content .standings,
	.playoffs .page-content .left-column,
	.playoffs .page-content .right-column	{
		width: 100%;
	}
	
	.playoffs .page-content .fr-players td {
		padding-left: 6px;
		padding-right: 6px;
	}
	
	.leaders .position-sections {
		flex-direction: column;
	}

	.playoffs .standings-grid td.fr-name {
		min-width: auto;
	}
	
	.leaders .player-list {
		width: 100%;
	}
	
	.modal {
		margin-top: 100px;
	}

}