@import "elements";

// Fonts

@font-face {
  font-family: 'Barlow Condensed';
  font-weight: bold;
  font-style: italic;
  src: local('BarlowCondensed-BoldItalic'), url(../fonts/BarlowCondensed-BoldItalic.woff) format('woff');
}

@font-face {
  font-family: 'Tomorrow';
  font-weight: 500;
  src: local('Tomorrow-Medium'), url(../fonts/Tomorrow-Medium.ttf) format('truetype');
}

.barlow {
	font-family: 'Barlow Condensed';
	font-weight: bold;
	font-style: italic;
}

.tomorrow {
	font-family: 'Tomorrow', sans-serif;
	font-weight: 500;
}

.proxima {
	font-family: "proxima-nova", sans-serif;
	font-weight: 500;
}

// Colors

@white: #fff;
@black: #000;
@blue: #05adea;
@green: #75aa3b;
@red: #d0021b;
@gold: #f0bf02;
@gold1: #fee100;
@goldMetallic: #D9B166;
@orange: #f05501;
@gray0: #101010;
@gray1: #1F1F1F;
@gray2: #272727;
@gray3: #333;
@gray4: #777;
@gray5: #D8D8D8;
@gray6: #e6e6e6;
@hydro: #7CE2E6;
@hydroDark: #27b9be;

// Team Colors

@team-color-bears: #f05501;
@team-color-bucs: #d6002f;
@team-color-dolphins: #75b5d4;
@team-color-dragons: #366f33;
@team-color-gophers: #8229cb;
@team-color-huskies: #8229cb;
@team-color-ice: #ccc;
@team-color-ice-2: #ccc;
@team-color-inferno: #f05501;
@team-color-lumberjacks: #366f33;
@team-color-mist: #ccc;
@team-color-outlaws: #555;
@team-color-shadow: #555;
@team-color-smoke: #555;
@team-color-smoke-2: #555;
@team-color-stars: #475b9b;
@team-color-supergiants: #d6002f;
@team-color-wolverines: #475b9b;

@team-color-amethyst: #8229cb;
@team-color-cobalt: #0056B7;
@team-color-serpentine: #366f33;
@team-color-zinc: #9BC9E7;

@team-color-tbd: #404040;
@team-color-awards: @goldMetallic;
@team-color-officials: @gold;

// Teams not in use

// @team-color-Breakers: #75B5D4;
// @team-color-Cobras: #D6002F;
// @team-color-Cardinals: #D6002F;
// @team-color-Ducks: #FFEA00;
// @team-color-Eclipse: #D6002F;
// @team-color-Hawkeyes: #FFEA00;
// @team-color-Knights: #92A2AF;
// @team-color-Nova: #F23A58;
// @team-color-Phoenix: #F05501;
// @team-color-Scorch: #FF0038;
// @team-color-Valkyrie: #92A2AF;
// @team-color-Vapor: #ccc;
// @team-color-Venom: #D6002F;
// @team-color-Volt: #C9FD02;

// X7

@team-color-X7Hydro: @hydro;
@team-color-X7Slate: #C1C1C1;

// Duo Cup 4

// @team-color-Aviators: #9BC9E7;
// @team-color-Cowbears: #C35619;
// @team-color-Goats: #CF3881;
// @team-color-HouseOfHavoc: #F05524;
// @team-color-LilBros: #D6002F;
// @team-color-Speedy: #88AE01;
// @team-color-SunGirls: #9E45F3;
// @team-color-Supernovaz: #3B7CF4;
// @team-color-SweedishFish: #F23A58;
// @team-color-TigerClaw: #F0BF02;
// @team-color-Unicorns: #F884A0;
// @team-color-UniversityOfHemmerHouse: #BF074F;

// Duo Cup 5

// @accentColorDuoCup5: #BC4F27;

// @team-color-Armadillos: #CF9DA9;
// @team-color-Bandits: #ccc;
// @team-color-Coyotes: #F6CA34;
// @team-color-Deadeye: #999;
// @team-color-Dustdevils: #9A8443;
// @team-color-Lizards: #88AE01;
// @team-color-OwlEaters: #B3A07F;
// @team-color-Rattlesnakes: #9A8443;
// @team-color-Ropers: #C3E6EA;
// @team-color-Sidewinders: #ccc;
// @team-color-Slingers: #8B071D;
// @team-color-Stars: #F6CA34;
// @team-color-Vultures: #8B071D;
// @team-color-Wranglers: #C3E6EA;

// Border Radius

@radius0: 20px;
@radius1: 16px;
@radius2: 12px;
@radius3: 8px;
.borderRadius0 {.border-radius(@radius0,@radius0,@radius0,@radius0);}
.borderRadius1 {.border-radius(@radius1,@radius1,@radius1,@radius1);}
.borderRadius2 {.border-radius(@radius2,@radius2,@radius2,@radius2);}
.borderRadius3 {.border-radius(@radius3,@radius3,@radius3,@radius3);}

// Shadow {
.standardShadow {.box-shadow (0 0 20px 0 @gray1);}

// Media Queries

@desktop: ~"screen and (max-width: 1900px)";
@tablet: ~"screen and (max-width: 1024px)";
@tabletPortrait: ~"screen and (max-width: 720px)";
@phoneLandscape: ~"screen and (max-width: 600px)";
@phoneLandscapeSmall: ~"screen and (max-height: 400px)";
@phone: ~"screen and (max-width: 400px)";
@phoneSmall: ~"screen and (max-width: 360px)";

// Dimensions

@navHeight: 90px;
@navHeightPhone: 70px;

// iOS safe area insets

@safeAreaTop: env(safe-area-inset-top);
@safeAreaBottom: env(safe-area-inset-bottom);
@safeAreaLeft: env(safe-area-inset-left);
@safeAreaRight: env(safe-area-inset-right);

// Basics

* {
	margin: 0;
	padding: 0;
	.box-sizing(border-box);
} 

html,body,input,textarea {
	.proxima;
	font-size: 16px;
	line-height: 20px;
}
	
html,body {
	width: 100%;
	min-height: 100vh;
	min-width: 320px;
	background-color: @gray1;
	color: @white;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding-top: calc(@navHeight + 20px);

	@media @phoneLandscape {
		// padding-top: 20px;
		padding-top: calc(@navHeightPhone + 20px);
	}

	overflow-x: hidden;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;

	&::-webkit-scrollbar-track {
		background-color: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background-color: @gray2;
		border: 2px solid @gray1;
		border-left: none;

		&:hover {
			background-color: @gray3;
		}
	}

	&::-webkit-scrollbar {
		width: 10px;
		background-color: transparent;

		@media @phoneLandscape {
			width: 0;
		}
	}
}

h1 {
	.flexCenter;
	flex-direction: column;
	height: 175px;
	font-size: 40px;
	line-height: 40px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	color: @blue;

	// 20 Years special colors
	color: @goldMetallic;

	// Duo Cup 5 special colors
	// body.duocup &,
	// body.schedule &,
	// body.scores &,
	// body.standings &,
	// body.team &,
	// body.household & {
	// 	color: @accentColorDuoCup5;
	// }

	body.x7 & {
		color: @team-color-X7Hydro;
	}

	span {
		font-size: 16px;
		font-weight: normal;
		line-height: 20px;
		letter-spacing: 0;
		text-transform: none;
	}

	img {
		margin-top: 20px;
	}
}

h2 {
	font-size: 30px;
	line-height: 40px;
	text-transform: uppercase;
	text-align: center;

	&.blue {
		margin: 30px auto;
		color: @blue;

		// 20 Years special colors
		color: @goldMetallic;

		// Duo Cup 5 special colors
		// body.duocup &,
		// body.schedule &,
		// body.scores &,
		// body.standings &,
		// body.team & {
		// 	color: @accentColorDuoCup5;
		// }
	}

	span {
		display: block;
		font-size: 16px;
		font-weight: normal;
		line-height: 20px;
		letter-spacing: 0;
		text-transform: none;
	}
}

h3 {
	font-size: 20px;
	line-height: 30px;
	text-transform: uppercase;
	text-align: center;
}

h4 {
	font-size: 18px;
	line-height: 20px;
	text-transform: uppercase;
	text-align: center;

	span {
		display: block;
		font-size: 16px;
		font-weight: normal;
		line-height: 20px;
		letter-spacing: 0;
		text-transform: none;
	}

	&.gold {
		color: @gold;
	}

	& + p {
		margin-top: 20px;
	}
}

.blue {
	body.x7 & {
		color: @team-color-X7Hydro;
	}
}

strong {
	&.blue {
		color: @blue;

		// 20 Years special colors
		color: @goldMetallic;

		// Duo Cup 5 special colors
		// body.duocup & {
		// 	color: @accentColorDuoCup5;
		// }

	}
}

p {
	margin: 0 auto 10px auto;

	img {
		width: 100%;
		height: auto;
		margin-top: 20px;
	}
}

a {
	.flexCenter;
	text-decoration: none;
	border: none;
	outline: none;
	color: @white;
	cursor: pointer;
	.noselect;
	color: @blue;

	// 20 Years special colors
	color: @goldMetallic;

	&.location {
		color: @gold;
		padding-right: 10px;

		&:hover {
			.transition(opacity);
			.opacity(0.7);

			@media @tabletPortrait {
				.opacity(1);
			}
		}
	}

	&.navigate {
		justify-content: flex-start;
		max-width: 240px;
		height: 60px;
		margin: 0 auto;
		.borderRadius2;
		background-color: @gray3;
		font-weight: bold;
		color: @white;
		.transition(background-color);

		.icon {
			width: 50px;
			height: 60px;
			filter: brightness(0) invert(1);

			&.duocup,
			&.season,
			&.x7 {
				width: 100%;
				background-size: auto 50px;
			}
		}
		
		&:hover {
			background-color: @gray4;

			@media @tabletPortrait {
				background-color: @gray3;
			}
		}

		&.blue {
			background-color: @blue;

			@media @tabletPortrait {
				background-color: @blue;

				// 20 Years special colors
				background-color: @goldMetallic;
			}

			// 20 Years special colors
			color: @gray3;
			background-color: @goldMetallic;
		}

		&.playoffInfo {
			max-width: 150px;
			height: 45px; 
			margin-top: 10px;
			background-color: @goldMetallic;
			color: @gray2;
			.borderRadius3;

			// Temporarily hide playoff info buttons when not ready for viewing
			display: none;
			
			.icon {
				filter: none;
			}

			.icon.brackets {
				& + span:after {
					//content: " Bracket";
					content: " Playoff Info";
				}
			}
			
			&.division-1 {
				display: none;
			}
			
			// &.division-4,
			// &.division-5 {
			// 	.icon.brackets {
			// 		& + span:after {
			// 			content: " Playoff Info";
			// 		}
			// 	}
			// }
			
			// &.division-x {
			// 	.icon.brackets {
			// 		& + span:after {
			// 			content: " Series Info";
			// 		}
			// 	}
			// }

			@media @tabletPortrait {
				background-color: @gold;
			}
		}
	}

	&.cta {
		text-align: center;
		background-color: @blue;

		// 20 Years special colors
		color: @gray3;
		background-color: @goldMetallic;

		span {
			width: 100%;
		}

		@media @tabletPortrait {
			background-color: @blue !important;

			// 20 Years special colors
			background-color: @goldMetallic !important;
		}

		&.gold {
			background-color: @gold;
			color: @gray2;
		
			&:hover {
				background-color: @gray5;
	
				@media @tabletPortrait {
					background-color: @gold;
				}
			}
		}
	}
}

.nowrap {
	white-space: nowrap;
}

.noselect {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.description {
	color: @gray4;

	&.blue {
		color: @blue;
	}

	&.gold {
		color: @gold;
	}

	&.green {
		color: @green;
	}

	&.hydro {
		color: @hydro;
	}

	&.orange {
		color: @orange;
	}
}

.flexCenter {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flexVertical {
	flex-direction: column;
}

// .sticky  {
// 	position: sticky;
// 	position: -webkit-sticky;
// 	top: 0;
// 	z-index: 1;
// }

.hide {
	display: none;
}

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

&.gold {
	color: @gold;
}

&.centered {
	text-align: center;
}

&.inline {
	display: inline;
}

.fallback {
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	color: @gray5;
}

.textDivider {
	display: block;
	width: 100%;
	height: 2px;
	margin: 40px 0;
	background-color: @gray3;
}

// 20 Years Logo

p {
	&.logo-20-years {
		margin: 20px auto 0 auto;

		 img {
			width: 240px;
			height: auto;
			justify-self: center;
		}
			
		& + h1 {
			height: 150px;
		}
	}
}

// Duo Cup 5 Logo

p {
	&.logo-duo-cup-5 {
		margin: 20px auto 0 auto;

		 img {
			width: 120px;
			height: auto;
			justify-self: center;
		}
			
		& + h1 {
			height: 150px;
		}
	}
}

// Icons

.icon,
.logo,
.jersey {
	display: inline-block;
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;

	&.location {
		width: 25px;
		height: 20px;
		background-size: 25px auto;
		background-image: url('/images/icon-location.svg');
	}

	&.division {
		&.division-x,
		&.division-1,
		&.division-2,
		&.division-3,
		&.division-4,
		&.division-5 {
			width: 40px;
			height: 40px;
		}


		&.division-x {
			background-image: url('/images/icon-division-x.svg');
		}

		&.division-1 {
			background-image: url('/images/icon-division-1.svg');
		}

		&.division-2 {
			background-image: url('/images/icon-division-2.svg');
		}

		&.division-3 {
			background-image: url('/images/icon-division-3.svg');
		}

		&.division-4 {
			background-image: url('/images/icon-division-4.svg');
		}

		&.division-5 {
			background-image: url('/images/icon-division-5.svg');
		}

		// Duo Cup

		&.division-apaulo,
		&.division-gemini,
		&.division-genesis,
		&.division-tiffany,
		&.division-explorers {
			width: 40px;
			height: 40px;
		}


		&.division-apaulo {
			background-image: url('/images/icon-division-apaulo.svg');
		}

		&.division-gemini {
			background-image: url('/images/icon-division-gemini.svg');
		}

		&.division-genesis {
			background-image: url('/images/icon-division-genesis.svg');
		}
		&.division-tiffany {
			background-image: url('/images/icon-division-tiffany.svg');
		}

		&.division-explorers {
			background-image: url('/images/icon-division-explorers.svg');
		}
	}

	&.duofootballclub {
		width: 150px;
		height: 50px;
		background-image: url('/images/logo-duofootballclub.svg');

		nav & {
			@media @phoneLandscape {
				width: 50px;
				background-image: url('/images/logo-dc.svg');
			}
		}
	}

	&.brackets {
		background-image: url('/images/icon-brackets.svg');
	}

	&.calendar {
		background-image: url('/images/icon-calendar.svg');
	}

	&.dc {
		background-image: url('/images/logo-dc.svg');
	}

	&.duocup {
		background-image: url('/images/icon-duo-cup.svg');
	}

	&.info {
		background-image: url('/images/icon-info.svg');
	}

	&.leaderboard {
		background-image: url('/images/icon-leaderboard.svg');
	}

	&.overview {
		background-image: url('/images/icon-overview.svg');
	}

	&.schedule {
		background-image: url('/images/icon-schedule.svg');
	}

	&.season {
		background-image: url('/images/icon-season.svg');
	}

	&.scores {
		background-image: url('/images/icon-scores.svg');
	}

	&.standings {
		background-image: url('/images/icon-standings.svg');
	}

	&.x7 {
		background-image: url('/images/icon-x7.svg');
	}
}

// Radio {

.swappableContentSelector,
.radio {
	display: flex;
    position: relative;
	width: 100%;
	margin-top: 10px;
	.borderRadius2;
	background-color: @gray3;
	border: 4px solid @gray3;
	.standardShadow;
	.noselect;
	overflow: hidden;

	.button,
	label {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		background-color: transparent;
		.borderRadius3;
		font-weight: bold;
		//text-transform: uppercase;
		font-size: 20px;
		color: @gray4;

		&:hover {
			color: @white;
			.transition(color);

			@media @tabletPortrait {
				color: @gray4;
			}
		}

		&.on {
			background-color: @gold;
			color: @gray3;
		}
	}
}

.swappableContentSelector {
	height: 50px;
}


/* Radio */
.radio {
	flex-wrap: wrap;

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

	.break {
		width: 100%;
		height: 2px;
		background-color: @gray2;
		flex-shrink: 0;
	}

	label {
		position: relative;
		z-index: 1;
		flex-wrap: wrap;
		cursor: pointer;
		color: @gray5;

		> span {
			display: inline-block;
			flex-grow: 0;
			white-space: nowrap;
			margin: auto;
			text-align: center;
			font-size: 16px;
			line-height: 20px;
			padding: 15px 0;
			font-weight: normal;
		}

		strong {
			display: block;
			font-size: 18px;
		}

		&.on {
			background-color: @blue;

			// 20 Years special colors
			background-color: @goldMetallic;

			& ~ .border {
				display: none !important;
			}
		}
	}

	&.required {

		.border {
			display: block;
			position: absolute;
			z-index: 0;
			width: 100%;
			height: 100%;
			.borderRadius2;

			.submitted & {
				border: 4px solid @red;
			}
		}
	}
}

// Layout

.content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	padding: 0 10px 10px 10px;
}

.photoBackground {
	position: fixed;
	top: @navHeight;
	z-index: 0;
	width: 100%;
	height: 100%;
	min-width: 320px;
	
	img {
		width: 100%;
		height: 100%;
		min-height: 240px;
		object-fit: cover;
		.opacity(0.3);

		@media @phoneLandscape {
			height: 245px;
			object-position: 50% 0;
			.opacity(1);
		}
	}

	@media @phoneLandscape {
		position: absolute;
		top: @navHeightPhone;
		height: auto;
		//display: none;

		& + #subnav {
			margin-top: 245px;
		}

		& + .content {
			padding-top: 220px;
		}
	}
}

// Navigation

#nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	height: @navHeight;
	padding: @safeAreaTop 50px 0 50px;

	@media @tabletPortrait {
		padding: @safeAreaTop 20px 0 20px;
	}

	@media @phoneLandscape {
		justify-content: center;
		height: @navHeightPhone;
	}

	@media @phone {
		padding-left: 15px;
		padding-right: 15px;
		min-width: 290px;
	}

	a {
		padding: 0 15px;
		.borderRadius3;

		@media @phone {
			padding-left: 10px;
			padding-right: 10px;
		}
	}

	.group {
		gap: 20px;

		&:last-child {
			width: 180px;
			justify-content: flex-end;
		}

		@media @tabletPortrait {
			gap: 10px;
		}

		@media @phoneLandscape {
			justify-content: space-between;
			
			&:first-child {
				flex: 1;
			}
			
			&:nth-child(2) {
				flex: 3;
			}
			
			&:last-child {
				display: none;
			}
		}
	}
}

#subnav {
	overflow: hidden;
	.borderRadius3;
	z-index: 1;

	a {
		padding: 0 30px;

		.icons& {
			padding: 0 20px 0 10px;
		}

		@media @tabletPortrait {
			padding-left: 15px;
			padding-right: 15px;

			.icons& {
				padding-left: 15px;
				padding-right: 15px;
			}
		}

		@media @phoneSmall {
			.icons& {
				padding-left: 10px;
				padding-right: 10px;
			}
		}
	}

	&.calendar a.calendar,
	&.overview a.overview,
	&.schedule a.schedule,
	&.scores a.scores,
	&.standings a.standings,
	&.assignments a.assignments,
	&.report a.report {
		color: @white;
		background-color: @blue;

		// 20 Years special colors
		color: @gray3;
		background-color: @goldMetallic;

		// Duo Cup 5 special colors
		//background-color: @accentColorDuoCup5;

		.x7 & {
			background-color: @hydro;
			color: @gray3;
		}

		.icon {
			//filter: brightness(0) invert(1);

			// 20 Years special colors
			filter: none;

			.x7 & {
				filter: none;
			}
		}
	}
}

nav {
	.box-sizing(content-box);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background-color: @gray6;
	.standardShadow;

	@media @phone {
		gap: 0;
	}

	.group {
		.flexCenter;
	}

	a {
		.flexCenter;
		flex-shrink: 0;
		min-width: 50px;
		height: 50px;
		font-weight: bold;
		color: @gray3;
		.transition(background-color);

		@media @tabletPortrait {
			font-size: 14px;

			.icon + span {
				display: none;
			}
		}

		.icon {
			width: 40px;
			height: 40px;
			background-size: auto 50px;

			&.duocup {
				width: 56px;

				@media @phone {
					background-size: auto 40px;
					width: 45px;
				}
			}

			&.season {
				width: 94px;

				@media @phone {
					background-size: auto 40px;
					width: 75px;
				}
			}

			&.x7 {
				width: 50px;

				@media @phone {
					background-size: auto 40px;
					width: 40px;
				}
			}
		}

		&:hover {
			background-color: @white;

			&.home {
				background-color: transparent;
				.transition(opacity);
				.opacity(0.7);
			}

			@media @tabletPortrait {
				background-color: transparent;
				.opacity(1) !important;
			}
		}

		&.on {
			color: @white;
			background-color: @blue;

			// 20 Years special colors
			color: @gray3;
			background-color: @goldMetallic;

			// .icon:not(.x7) {
			// 	filter: brightness(0) invert(1);
			// }

			// Duo Cup 5 special colors
			// &.duocup {
			// 	background-color: @accentColorDuoCup5;
			// }

			@media @tabletPortrait {
				padding: 0 15px 0 5px;

				&.donate {
					padding: 0 15px;
				}

				// span:nth-child(2) {
				// 	display: initial;
				// }
			}
		}

		&.home {
			@media @phone {
				padding: 0;
			}
		}

		&.duocup { .duocup & { .on; } }
		&.season { .season & { .on; } }
		&.x7 { 
			.x7 & { 
				.on; 
				background-color: @team-color-X7Hydro;
			} 
		}
		&.schedule { .schedule & { .on; } }
		&.scores { .scores & { .on; } }
		&.standings { .standings & { .on; } }
		&.donate { .donate & { .on; } }
	}
}

.tile.calendar {
	display: flex;
	flex-direction: column;
	justify-items: stretch;
	text-align: center;
	.noselect;

	.title,
	.daysOfWeek,
	.day,
	.week {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		flex-grow: 1;
		flex-shrink: 0;
	}

	.daysOfWeek {
		.day {
			font-size: 14px;
			font-weight: bold;
			padding-bottom: 0;
		}
	}

	.title {
		padding: 10px 0;
		text-transform: uppercase;
		font-weight: bold;
		background-color: @gray3;
		font-size: 18px;
	}

	.day {
		padding: 5px 0;
		color: @white;
		flex-direction: column;
		line-height: 14px;

		&.none {
			color: @gray4;
		}

		span {
			//.barlow;
			display: block;
			font-size: 12px;
		}
	}

	.week {
		font-weight: bold;

		.day {
			border: 4px solid @gray2;
			.borderRadius3;

			&.practice {
				background-color: @blue;

				.x7 & {
					background-color: @hydroDark;
				}
			}

			&.game {
				background-color: @green;
			}

			&.other {
				background-color: @orange;
			}

			&.off {
				background-color: @red;
			}
		}
	}
}

#standingsContent {
	display: flex;
	flex-direction: column;
	min-height: 1400px;
	padding-top: 10px;

	> section {
		order: 1;

		&.division-x {
			order: 6;
		}

		// Hide records for some divisions during Championship week and all divisions at end of season
		&.division-1,
		&.division-2,
		&.division-3,
		&.division-4,
		&.division-x {
			.results {
				display: none;
			}
		}
	}
}

// Flag-Based Standings

.flagLeaderboard {
	flex-direction: column;

	h4 {
		color: @gray4;
	}

	a.navigate {
		margin-top: 5px;
		padding-right: 20px;
		background-image: none;
	}
}

.leaderboardSummary {

	// Preseason - temporarily hide top 3 summary
	// h4,
	// .flags {
	// 	display: none;
	// }

	.flagLeaderboard {
		.flags {
			max-width: 300px;
			margin-left: auto;
			margin-right: auto;
	
			.flag:nth-child(n+4) {
				display: none;
			}
		}
	}
}

//Hide records for Division X and 4 teams during phase 1 of the season
// section.division-4,
// section.division-x {
// 	section:not(.flagLeaderboard) {
// 		display: none;
// 	}
// }
//
// section.division-x {
// 	section:not(.flagLeaderboard) {
// 		display: none;
// 	}
// }#s

.leaderboard {
	section.division-1,
	section.division-2, 
	section.division-3, 
	section.division-4, 
	section.division-5, 
	section.division-x {
		display: none;
	}

	&.division-4 section.division-4 {
		display: block;
	}

	&.division-5 section.division-5 {
		display: block;
	}

	&.division-x section.division-x {
		display: block;
	}

	& > section > section {
		display: none !important;

		&.flagLeaderboard{
			display: flex !important;
		}
	}
}

.flags {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-left: 10px;

	.flag {
		display: flex;
		flex-direction: column;
		width: 72px;

		> * {
			display: flex !important;
			justify-content: center;
			padding: 0 5px 5px 5px;
			//color: @gray3;
			color: @gray4;
			font-size: 12px;
			text-transform: uppercase;
			font-weight: bold;

			.division-5 & {
				color: @gray4;
			}
		}

		.ranking {
			padding-top: 5px;
			font-size: 16px;
			line-height: 16px;
			//color: @gold !important;
			color: @white !important;
			.barlow;

			.division-x & {
				// color: @gold1 !important;
				color: @white !important;
			}

			.division-5 & {
				color: @red !important;
			}
		}

		.top,
		.bottom {
			width: 100%;
			background-size: 100% auto;
			background-repeat: no-repeat;
			background-image: url('/images/division-4-flag.svg');

			.division-x & {
				background-image: url('/images/division-x-flag.svg');
			}

			.division-5 & {
				background-image: url('/images/division-5-flag.svg');
			}
		}

		.top {
			padding-top: 5px;
			background-position: 50% top;
		}

		.middle {
			flex-grow: 1;
			justify-content: flex-start;
			//background-color: @gold;
			background-color: @gray3;
			flex-direction: column;

			.division-x & {
				// background-color: @gold1;
				background-color: @white;
			}

			.division-5 & {
				background-color: @gray3;
			}

			> * {
				display: flex !important;
			}
		}

		.photo {
			margin: 0 auto 10px auto;
			width: 52px;
			height: auto;
			margin-bottom: 10px;
		}
	
		&:nth-child(n+4) .photo {
			display: none;
		}

		.number {
			width: 100%;
			height: auto;
			//margin-bottom: 20px;
		}

		.stickers {
			width: 100%;
			display: grid !important;
    		grid-template-columns: 1fr 1fr;
    		grid-template-rows: auto;
			gap: 5px;
			margin-top: 20px;

			.sticker {
				width: 100%;
				max-height: 48px;
				margin-top: -10px;
				height: auto;
				object-fit: contain;

				&:nth-child(3n) {
					grid-column: span 2;
				}

				.division-x & {
					max-height: 38px;
					grid-column: span 1;
					margin-top: -10px;
				}

				&:nth-child(odd) {
					.division-x & {
						grid-column: span 1;
						margin-left: -10px;
					}
				}
				
				&:nth-child(even) {
					.division-x & {
						grid-column: span 1;
						margin-left: 10px;
					}
				}
			}

			.division-x & {
				grid-template-columns: 1fr;
			}
		}

		.playerPoints {
			margin: 10px auto 0 auto;
			.barlow;
			font-size: 16px;
		}

		.bottom {
			height: 48px;
			background-position: 50% bottom;
			flex-direction: column;
			align-items: center;
			line-height: 12px;

			// .division-x & {
			// 	height: 32px;
			// }
		}
	}
}

// Officials Assignments
.assignments {
	display: flex;
	flex-direction: column;

	@media @phoneSmall {
		font-size: 14px;
	}

	.row {
		display: flex;
		border-top: 1px solid @gray3;
		align-items: center;
		padding-right: 10px;

		&.head {
			background-color: @gray3;
			font-weight: bold;
			.borderRadius3;
			border: none;

			@media @phoneSmall {
				font-size: 12px;
			}
		}

		&:nth-child(2) {
			border: none;
		}
	}

	.column {
		flex: 1;
		display: flex;
		align-items: center;
		//justify-content: flex-end;
		justify-content: center;
		gap: 5px;
		padding: 5px 0 5px 10px;
		white-space: nowrap;

		&:first-child {
			justify-content: flex-start;
		}

		&:nth-last-child(5) {
			font-size: 12px;

			& ~ .column {
				font-size: 12px;
			}
		}
	}

	.icon.division {
		width: 20px;
		height: 20px;

		display: none;
	}

	.assignment {
		font-weight: bold;
		color: @gray4;
		text-transform: uppercase;

		.field {
			color: @blue;
		}

		&.off {
			color: @red;
			font-size: 12px;
		}
	}
}

// Footer 

footer {
	flex-direction: column;
	z-index: 1;
	width: 100%;
	margin-top: 50px;
	padding: 50px;
	background-color: @gray6;
	font-size: 14px;
	line-height: 24px;
	color: @gray4;

	strong {
		color: @gray3;
	}

	@media @tablet {
		padding-left: 20px;
		padding-right: 20px;
	}

	// @media @phoneLandscape {
	// 	padding-bottom: calc(@navHeightPhone + 50px);
	// }

	> * {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.teams {

		// Temporarily disable footer team links in preseason
		// a {
		// 	pointer-events: none !important;
		// }

		* {
			flex-grow: 1;
		}

		@media @tablet {
			gap: 20px;
		}

		.nowrap {
			display: flex;
			
			// @media @tabletPortrait {
			// 	min-width: 50%;
			// }

			// @media @tablet {
			// 	min-width: 33.3%;
			// }

			@media @tablet {
				min-width: 100%;
			}
		}

		.logo {
			width: 40px;
			height: 40px;
			flex-shrink: 0;
		}

		& + .links {
			margin-top: 50px;
			padding-top: 50px;
			border-top: 2px solid @gray5;
		}

	}

	.links {
		gap: 20px;
		justify-content: space-between;
		padding-right: 25px;

		@media @phoneLandscape {
			flex-direction: column;
		}

		a {
			display: inline-block;
			color: @gray4;
		}

		.duofootballclub {
			@media @tabletPortrait {
				width: 100%;
			}
		}

		.nowrap {
			@media @phoneLandscape {
				margin: 25px auto 0 auto;
				text-align: center;
			}
		}
	}
}

// Tile

.nextUp {
	overflow: visible !important;

	> header {
		.border-radius(@radius1,0,0,@radius1);
	}

	&:after {
		display: none;
	}

	> header:after {
		.flexCenter;
		position: absolute;
		top: -20px;
		height: 30px;
		padding: 0 10px;
		content: "NEXT UP";
		background-color: @gold;
		font-weight: bold;
		color: @gray1;
		.borderRadius3;

		.orange& {
			background-color: @orange;
		}
	}
}

// Temporarily hide/show Sunshine Acres household specific media day tiles

// .sunshineAcresOnly {
// 	display: none !important;
// }

// .tile.media + .tile.media {
// 	.nextUp;
// }

// h1 {
// 	&.av,
// 	&.bonnies,
// 	&.hemmer,
// 	&.lorens,
// 	&.neely,
// 	&.scottys,
// 	&.markwell,
// 	&.fumusa,
// 	&.jenner,
// 	&.starke,
// 	&.fumusa,
// 	&.markwell {
// 		& ~ .tile.media {
// 			display: none !important;
// 		}

// 		& + .tile.media.sunshineAcresOnly {
// 			display: block !important;
// 		}
// 	}
// }

.tile {
	position: relative;
	.borderRadius1;
	background-color: @gray2;
	overflow: hidden;

	.household & {
		&:nth-child(2) {
			.nextUp;
		}
	}

	.schedule &,
	.household & {
		&:after {
			content: "";
			position: absolute;
			top: 0;
			width: 100%;
			height: 5px;
			background-color: @blue;

			// Duo Cup 5 special colors
			//background-color: @accentColorDuoCup5;
		}
	}

	&.camp:after {
		background-color: @hydro;
	}

	&.other:after {
		background-color: @orange;
	}

	&.game {
		&:after {
			background-color: @green;
		}
	}


	// Temporarily hide playoff and champ week tile times until we have schedule figured out
	// &.Playoffs,
	// &.Championships {
	// 	section {
	// 		display: none;
	// 	}

	// 	header {
	// 		margin-bottom: 0 !important;

	// 		&:after {
	// 			content: "Times TBD ";
	// 			font-size: 20px;
	// 			line-height: 50px;
	// 			font-weight: bold;
	// 			text-transform: uppercase;
	// 			text-align: center;
	// 			color: @white;
	// 		}
	// 	}
	// }

	&.scrimmage:after {
		display: none;
	}

	&.playoffs {
		line-height: 0;
		margin-top: 20px;

		img {
			width: 100%;
			height: auto;
		}
	}

	> header {
		.flexCenter;
		flex-direction: column;
		padding: 15px 10px;
		position: relative;

		&.stuck {
			//margin: 0 -15px;
			// background-color: @gray3;
			// border-bottom: 1px solid @gray1;

			// &:after {
			// 	display: none;
			// }
		}
	}

	// Sub Section Grouping - usually division or time block

	> section {
		padding: 0 10px 10px 10px;

		&:first-child {
			padding-top: 10px;
		}

		.copy&,
		.duocup &,
		.donate &,
		.register & {
			padding: 30px;

			p {
				margin-bottom: 24px;
				line-height: 24px;
			}
		}

		header {
			.flexCenter;
			gap: 5px;
			min-height: 50px;
			padding: 5px;
			background-color: @gray3;
			.borderRadius2;
			.standardShadow;

			.division {
				order: 1;

				& + h3 {
					color: @gray4;
				}
			}
		}

		& + section.divided {
			border-top: 2px solid @gray3;
		}

		// Matchup or Team Info

		> section {
			display: flex;
			padding: 10px 15px 10px 5px;
			border-bottom: 2px solid @gray3;

			&.householdEntry {
				margin: 0 15px;
				padding: 0;
			}

			.roster& {
				gap: 0;
				flex-wrap: wrap;
				padding: 0;
			}

			.buckets &,
			&:last-child {
				border: none;
			}

			> * {
				flex: 1;
			}

			* {
				.nowrap;

				&:not(.logo):not(.icon):not(img):empty {
					display: none;
				}
			}

			// Score report SMS link
			> a {
				padding-right: 35px;
				background-size: 50px auto;
				background-position: right -15px top 50%;
				background-repeat: no-repeat;
				background-image: url('/images/icon-disclosure-gold.svg');

				&:hover {
					.opacity(0.7);
					.transition(opacity);

					@media @tabletPortrait {
						.opacity(1);
					}
				}
			}

			.teams,
			.people {
				flex-grow: 1;
			}

			.people {
				&:nth-last-child(2) {
					margin-right: 20px;
				}
			}

			.buckets {
				margin-top: 10px;
				.flexCenter;

				.logo {
					width: 40px;
					height: 40px;
				}

				.divider {
					display: inline-flex !important;
					width: 2px;
					height: 52px;
					margin: 0 10px;
					background-color: @gray4;
					.border-radius(1px,1px,1px,1px);
				}
			}

			.info,
			.results {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: center;
				flex-grow: 0;
				margin-left: auto;
				margin-right: 0;
				color: @gray4;

				.time {
					font-weight: bold;
					color: @white;
				}

				.division {
					margin: 0 auto;
				}

				.field {
					&:before {
						.game& {
							content: "Field ";
						}
					}
				}

				// Preseason schedule launch - temporarily hide practice time ranges
				// .practice& {
				// 	display: none !important;
				// }
			}
		}

	}

	& + * {
		margin-top: 20px;
	}

	// Hiding and changing some things for team page game tiles
	.team & {
		> header {
			background-color: @gray3;
		}

		section header {
			display: none;
		}
	}

	.schedule &,
	.household & {
		> header {
			background-color: @gray3;
			margin-bottom: 10px;
		}
	}
}

// Special classes just for playoff and Duo Cup results

// section {
// 	&.division-1,
// 	&.division-2,
// 	&.division-3,
// 	&.division-4,
// 	&.division-5,
// 	&.division-x,
// 	&.division-explorers,
// 	&.division-genesis,
// 	&.division-apaulo,
// 	&.division-tiffany,
// 	&.division-gemini {
// 		.results {
// 			display: none !important;
// 		}
// 	}

// 	&.division-x,
// 	&.division-4 {
// 		.standings & {
// 			.number {
// 				display: none;
// 			}

// 			.description {
// 				display: block;

// 				&:after {
// 					content: "2 Game Series";
// 				}
// 			}
// 		}
// 	}
// }

.standings {

	section > .description {
		display: none;
		text-align: center;
		padding: 20px;
	}

	.teamLine {
		&.outlaws,
		&.bucs,
		&.serpentine,
		&.mist {
			color: @gold;

			&:after {
				.barlow;
				content: "CHAMPS";
				margin-left: auto;
				margin-right: 0;
			}
		}
	}
}

// Teams

@teamsArray: 
e("bears"), 
e("bucs"), 
e("dolphins"), 
e("dragons"), 
e("gophers"), 
e("huskies"), 
e("inferno"), 
e("ice") true e("division-4"),
e("ice-2") true e("division-4"),
e("lumberjacks"), 
e("mist"), 
e("outlaws"), 
e("shadow"),  
e("smoke") true e("division-4"), 
e("smoke-2") true e("division-4"), 
e("stars"), 
e("supergiants"), 
e("wolverines"), 

e("amethyst"), 
e("cobalt"),  
e("serpentine"), 
e("zinc"), 

e("officials"), 
e("awards"), 
e("tbd");

.teamsLoop(@teamsCount:1) when(@teamsCount <= length(@teamsArray)) {
	@teamName: extract(extract(@teamsArray, @teamsCount),1);
	@hasJersey: extract(extract(@teamsArray, @teamsCount),2);
	@teamJersey: extract(extract(@teamsArray, @teamsCount),3);
	@teamJerseyImage: "team-jersey-@{teamJersey}";
	@colorVariable: "team-color-@{teamName}";
	
	.logo.@{teamName} {
		background-image: url('/images/team-logo-@{teamName}.svg?v260516');
	}

	.personLine .logo.@{teamName} when(@hasJersey = true) {
		background-image: url('/images/@{teamJerseyImage}.svg?v260516');
	}

	.@{teamName} {
		// Turning off team colors on team name in schedule/lists for now
		// .teamHeader,.personLine .number,& +.teamName, .personLine .role { color: @@colorVariable; }
		.teamHeader,.personLine .number, .personLine .role { color: @@colorVariable; }
	}

	.teamsLoop(@teamsCount + 1);
}

.teamsLoop();

.logo {
	flex-shrink: 0;

	//Special class overrides for destiny and alliance team jerseys on household pages
	// &.ice { 
	// 	.personLine & {background-image: url('/images/team-jersey-division-4.svg');}
	// }
	// &.nova { 
	// 	.personLine & {background-image: url('/images/team-jersey-division-x.svg');}
	// }
	// &.scorch { 
	// 	.personLine & {background-image: url('/images/team-jersey-division-5.svg');}
	// }
	// &.smoke { 
	// 	.personLine & {background-image: url('/images/team-jersey-division-4.svg');}
	// }
	// &.vapor { 
	// 	.personLine & {background-image: url('/images/team-jersey-division-5.svg');}
	// }
	// &.volt { 
	// 	.personLine & {background-image: url('/images/team-jersey-division-x.svg');}
	// }

	// &.eclipse-phoenix,
	// &.valkyrie-phoenix,
	// &.valkyrie-venom,
	// &.valkyrie-eclipse,
	// &.venom-eclipse,
	// &.venom-phoenix {
	// 	& ~ .teamName {
	// 		.teamLine & {
	// 			line-height: 20px;
	// 			white-space: normal;
	// 			max-width: 75px;
	// 		}
	// 	}
	// }

	// &.eclipse-phoenix { 
	// 	& ~ .jersey {background-image: url('/images/team-jersey-eclipse-phoenix.svg?v260516');}
	// }

	// &.valkyrie-phoenix { 
	// 	& ~ .jersey {background-image: url('/images/team-jersey-valkyrie-phoenix.svg?v260516');}
	// }

	// &.valkyrie-venom { 
	// 	& ~ .jersey {background-image: url('/images/team-jersey-valkyrie-venom.svg?v260516');}
	// }

	// &.valkyrie-eclipse { 
	// 	& ~ .jersey {background-image: url('/images/team-jersey-valkyrie-eclipse.svg?v260516');}
	// }

	// &.venom-eclipse {
	// 	& ~ .jersey {background-image: url('/images/team-jersey-venom-eclipse.svg?v260516');}
	// }

	// &.venom-phoenix {
	// 	& ~ .jersey {background-image: url('/images/team-jersey-venom-phoenix.svg?v260516');}
	// }

	// Duo Cup 4

	// &.aviators { background-image: url('/images/team-logo-aviators.svg?v260516'); }
	// &.cowbears { background-image: url('/images/team-logo-cowbears.svg?v260516'); }
	// &.house-of-havoc { background-image: url('/images/team-logo-house-of-havoc.svg?v260516'); }
	// &.lil-bros { background-image: url('/images/team-logo-lil-bros.svg?v260516'); }
	// &.goats { background-image: url('/images/team-logo-goats.svg?v260516'); }
	// &.speedy { background-image: url('/images/team-logo-speedy.svg?v260516'); }
	// &.sun-girls { background-image: url('/images/team-logo-sun-girls.svg?v260516'); }
	// &.supernovaz { background-image: url('/images/team-logo-supernovaz.svg?v260516'); }
	// &.sweedish-fish { background-image: url('/images/team-logo-sweedish-fish.svg?v260516'); }
	// &.tiger-claw { background-image: url('/images/team-logo-tiger-claw.svg?v260516'); }
	// &.unicorns { background-image: url('/images/team-logo-unicorns.svg?v260516'); }
	// &.university-of-hemmer-house { 
	// 	background-image: url('/images/team-logo-university-of-hemmer-house.svg?v260516'); 
		
	// 	& + .teamName {
	// 		white-space: normal;
	// 		line-height: auto;

	// 		.teamLine & {
	// 			line-height: 20px;
	// 		}
	// 	}
	// }

	// Duo Cup 5

	// &.armadillos { background-image: url('/images/team-logo-armadillos.svg?v260516'); }
	// &.bandits { background-image: url('/images/team-logo-bandits.svg?v260516'); }
	// &.coyotes { background-image: url('/images/team-logo-coyotes.svg?v260516'); }
	// &.deadeye { background-image: url('/images/team-logo-deadeye.svg?v260516'); }
	// &.dustdevils { background-image: url('/images/team-logo-dustdevils.svg?v260516'); }
	// &.lizards { background-image: url('/images/team-logo-lizards.svg?v260516'); }
	// &.owl-eaters { background-image: url('/images/team-logo-owl-eaters.svg?v260516'); }
	// &.rattlesnakes { background-image: url('/images/team-logo-rattlesnakes.svg?v260516'); }
	// &.ropers { background-image: url('/images/team-logo-ropers.svg?v260516'); }
	// &.sidewinders { background-image: url('/images/team-logo-sidewinders.svg?v260516'); }
	// &.slingers { background-image: url('/images/team-logo-slingers.svg?v260516'); }
	// &.stars { background-image: url('/images/team-logo-stars.svg?v260516'); }
	// &.vultures { background-image: url('/images/team-logo-vultures.svg?v260516'); }
	// &.wranglers { background-image: url('/images/team-logo-wranglers.svg?v260516'); }
}

//Override for TBD team name
.tbd { .teamHeader,.personLine .number,& +.teamName { color: @team-color-tbd; } }

// .eclipse-phoenix,
// .valkyrie-phoenix,
// .valkyrie-venom,
// .valkyrie-eclipse,
// .venom-eclipse,
// .venom-phoenix {
// 	.teamHeader,.personLine .number { color: @gray4; }
// 	&.jersey.away {
// 		display: inline-flex !important;
// 		background-image: url('/images/team-jersey-alliance-away.svg?v260516') !important;
// 	}
// }

// Hiding future schedules only for the individual Division X pods
// .valkyrie,
// .venom,
// .eclipse,
// .phoenix {
// 	& ~ h2 {
// 		display: none;

// 		& ~ .tile {
// 			display: none;
// 		}
// 	}
// }

// Duo Cup 4

// .aviators { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Aviators; } }
// .cowbears { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Cowbears; } }
// .house-of-havoc { .teamHeader,.personLine .number,& +.teamName { color: @team-color-HouseOfHavoc; } }
// .lil-bros  {.teamHeader,.personLine .number,& +.teamName { color: @team-color-LilBros; } }
// .goats  {.teamHeader,.personLine .number,& +.teamName { color: @team-color-Goats; } }
// .speedy { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Speedy; } }
// .sun-girls { .teamHeader,.personLine .number,& +.teamName { color: @team-color-SunGirls; } }
// .supernovaz { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Supernovaz; } }
// .sweedish-fish { .teamHeader,.personLine .number,& +.teamName { color: @team-color-SweedishFish; } }
// .tiger-claw { .teamHeader,.personLine .number,& +.teamName { color: @team-color-TigerClaw; } }
// .unicorns { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Unicorns; } }
// .university-of-hemmer-house { .teamHeader,.personLine .number,& +.teamName { color: @team-color-UniversityOfHemmerHouse; } }

// .aviators { .teamHeader,.personLine .number { color: @team-color-Aviators; } }
// .cowbears { .teamHeader,.personLine .number { color: @team-color-Cowbears; } }
// .house-of-havoc { .teamHeader,.personLine .number { color: @team-color-HouseOfHavoc; } }
// .lil-bros  {.teamHeader,.personLine .number { color: @team-color-LilBros; } }
// .goats  {.teamHeader,.personLine .number { color: @team-color-Goats; } }
// .speedy { .teamHeader,.personLine .number { color: @team-color-Speedy; } }
// .sun-girls { .teamHeader,.personLine .number { color: @team-color-SunGirls; } }
// .supernovaz { .teamHeader,.personLine .number { color: @team-color-Supernovaz; } }
// .sweedish-fish { .teamHeader,.personLine .number { color: @team-color-SweedishFish; } }
// .tiger-claw { .teamHeader,.personLine .number { color: @team-color-TigerClaw; } }
// .unicorns { .teamHeader,.personLine .number { color: @team-color-Unicorns; } }
// .university-of-hemmer-house { .teamHeader,.personLine .number { color: @team-color-UniversityOfHemmerHouse; } }

// .aviators,
// .cowbears,
// .house-of-havoc,
// .lil-bros,
// .goats,
// .speedy,
// .sun-girls,
// .supernovaz,
// .sweedish-fish,
// .tiger-claw,
// .unicorns,
// .university-of-hemmer-house { 
// 	.teamHeader {
// 		flex-direction: column;
// 		margin-bottom: 30px;

// 		.logo {
// 			width: 240px;
// 			height: 240px;
// 		}

// 		.teamName {
// 			max-width: 325px;
// 			text-align: center;

// 			&:after {
// 				display: block;
// 				font-size: 18px;
// 			}
// 		}
// 	}
// }

// .aviators .teamHeader .teamName::after {content: "AV";}
// .cowbears .teamHeader .teamName::after {content: "Combined";}
// .house-of-havoc .teamHeader .teamName::after {content: "Hemmer + Scotty's";}
// .lil-bros .teamHeader .teamName::after {content: "Bonnie's";}
// .goats .teamHeader .teamName::after {content: "Bonnie's + Neely";}
// .speedy .teamHeader .teamName::after {content: "AV";}
// .sun-girls .teamHeader .teamName::after {content: "Loren's";}
// .supernovaz .teamHeader .teamName::after {content: "Loren's + Neely";}
// .sweedish-fish .teamHeader .teamName::after {content: "SCOTTY'S + AV";}
// .tiger-claw .teamHeader .teamName::after {content: "Scotty's";}
// .unicorns .teamHeader .teamName::after {content: "Free Agents";}
// .university-of-hemmer-house .teamHeader .teamName::after {content: "Hemmer";}

// Duo Cup 5

// .armadillos { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Armadillos; } }
// .bandits { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Bandits; } }
// .coyotes { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Coyotes; } }
// .deadeye { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Deadeye; } }
// .dustdevils { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Dustdevils; } }
// .lizards { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Lizards; } }
// .owl-eaters { .teamHeader,.personLine .number,& +.teamName { color: @team-color-OwlEaters; } }
// .rattlesnakes { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Rattlesnakes; } }
// .ropers { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Ropers; } }
// .sidewinders { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Sidewinders; } }
// .slingers { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Slingers; } }
// .stars { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Stars; } }
// .vultures { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Vultures; } }
// .wranglers { .teamHeader,.personLine .number,& +.teamName { color: @team-color-Wranglers; } }

// .armadillos,
// .bandits,
// .coyotes,
// .deadeye,
// .dustdevils,
// .lizards,
// .owl-eaters,
// .rattlesnakes,
// .ropers,
// .sidewinders,
// .slingers,
// .stars,
// .vultures,
// .wranglers { 
// 	.teamHeader {
// 		flex-direction: column;
// 		margin-bottom: 30px;

// 		.logo {
// 			width: 240px;
// 			height: 240px;
// 		}

// 		.teamName {
// 			max-width: 325px;
// 			text-align: center;

// 			&:after {
// 				display: block;
// 				font-size: 18px;
// 			}
// 		}
// 	}
// }

// .armadillos .teamHeader .teamName::after {content: "Neely";}
// .bandits .teamHeader .teamName::after {content: "Whiteman";}
// .coyotes .teamHeader .teamName::after {content: "Hemmer";}
// .deadeye .teamHeader .teamName::after {content: "Scotty's";}
// .dustdevils .teamHeader .teamName::after {content: "Scotty's";}
// .lizards .teamHeader .teamName::after {content: "Combined";}
// .owl-eaters .teamHeader .teamName::after {content: "Loren's";}
// .rattlesnakes .teamHeader .teamName::after {content: "Loren's";}
// .ropers .teamHeader .teamName::after {content: "Bonnie's";}
// .sidewinders .teamHeader .teamName::after {content: "Whiteman";}
// .slingers .teamHeader .teamName::after {content: "AV";}
// .stars .teamHeader .teamName::after {content: "Hemmer";}
// .vultures .teamHeader .teamName::after {content: "AV";}
// .wranglers .teamHeader .teamName::after {content: "Bonnie's";}

// X7 specific

.personLine.hydro .number {
	color: @team-color-X7Hydro;
}

.personLine.slate .number {
	color: @team-color-X7Slate;
}

.x7gear {
	display: flex;
	gap: 5px;
	border-top: 2px solid @gray3 !important;
	padding-top: 20px !important;

	.checklist ol {
		padding-left: 18px;
		margin-top: 10px;
		color: @gray5;
	}
}

.x7jersey {
	display: block !important;
	width: 130px;
	height: 130px;
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;

	&.slate {
		background-image: url('/images/x7-gear-jersey-slate.svg?v260516');
	}

	&.polar {
		background-image: url('/images/x7-gear-jersey-polar.svg?v260516');
	}

	&.hydro {
		background-image: url('/images/x7-gear-jersey-hydro.svg?v260516');
	}

	&.both {
		background-image: url('/images/x7-gear-jersey-both.svg?v260516');
	}
}

.teamHeader {
	.flexCenter;
	padding-top: 20px;

	.logo {
		width: 128px;
		height: 128px;
	}

	.teamName {
		.barlow;
		font-size: 40px;
		line-height: 35px;
		text-transform: uppercase;
	}
}

a.teamLine,
a.personLine {

	// Temporarily disable Division X team links
	// &.phoenix,
	// &.venom,
	// &.valkyrie,
	// &.eclipse {
	// 	pointer-events: none !important;
	// }

	// Preseason schedule launch - temporarily disable team links & logos
	// pointer-events: none !important;
	// .logo:not(.officials) {
	// 	display: none !important;
	// }

	&.tbd,
	&.supergiants,
	&.ice-2,
	&.smoke-2 {
		pointer-events: none;
	}

	&:hover {
		.opacity(0.7);
		.transition(opacity);

		@media @tabletPortrait {
			.opacity(1) !important;
		}
	}
}

.teamLine {
	.logo.none {
		display: none;

		& ~ * {
			display: none;
		}
	}
}

#standingsContent {
	// Postseason Tiebreak Points
	
	a.teamLine.amethyst .results:after {
		content: "Tiebreak 246";
	}

	a.teamLine.cobalt .results:after {
		content: "Tiebreak 192";
	}
	
	a.teamLine.serpentine .results:after {
		content: "Tiebreak 174";
	}
	
	a.teamLine.zinc .results:after {
		content: "Tiebreak 153";
	}
}

.teamLine,
.personLine {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 40px;
	gap: 5px;
	color: @white;

	> * {
		display: inline-flex;
		align-items: center;
	}

	.logo {
		width: 52px;
		height: 52px;
	}

	.jersey {
		width: 52px;
		height: 52px;
	}


	.logo,
	.jersey {
		.practice &,
		.media & {
			display: none;
		}
	}

	.jersey {
		display: none;
	}

	.number,
	.teamName,
	.personName {
		justify-content: center;
	}

	.number,
	.teamName {
		.barlow;
		font-size: 20px;
		line-height: 30px;
	}

	.number {
		width: 30px;
	}

	.teamName {
		text-transform: uppercase;
		//color: @gray5;
	}

	.personName {
		display: flex;
		font-weight: bold;

		.last {
			padding-left: 5px;
		}
	}

	// .number {
	// 	display: none;
	// }

	.role  {
		color: @white;
		font-weight: bold;
		padding-right: 5px;

		.media &  {
			display: none;
		}

		.household & {
			font-weight: normal;
			color: @gray4;
			padding-left: 5px;
			padding-right: 0;
		}

		& ~ .last {
			display: none;
		}
	}

	&.win * {
		font-weight: bold;
		color: @gold !important;
	}

	&.loss {
		& * {
			color: @gray4 !important;
		}

		.logo {
			filter: grayscale(100%);
			.opacity(0.6);
		}
	}
}

.personLine {
	border-bottom: 2px solid @gray3;

	&:last-child {
		border-bottom: none;
	}
}

/* FORMS */

input,
textarea,
select,
.StripeElement {
	.box-sizing(border-box);
	width: 100%;
	.borderRadius3;
	outline: none;
}

.invalidAppearance {
	border-color: @red;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 10px 10px;
	background-image: url("/images/marketing-form-icon-required.png");
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select,
.StripeElement {
	border: 2px solid @gray4;
	background-color: @white;
	padding: 15px 0 15px 10px;
	margin: 10px 0 0 0;

	&::-webkit-input-placeholder {
		color: fade(@gray4,50%);
	}

	&:focus,
	.StripeElement--focus& {
		border-color: @blue !important;
		
		// 20 Years special colors
		border-color: @goldMetallic !important;

			// .icon:not(.x7) {
			// 	filter: brightness(0) invert(1);
			// }
	}

	.StripeElement--invalid& {
    	.invalidAppearance;
	}

	&:required {
		.submitted & {
			.invalidAppearance;
		}
	}

	&:valid {
		background-image: none !important;
    	border-color: @gray3 !important;
	}

	.StripeElement {
		padding: 14px 12px;
	}
	
	.StripeElement--invalid {
		padding: 12px 10px;
	}
	
	.StripeElement--webkit-autofill {
		background-color: #fefde5 !important;
	}
}

input[type="date"] {
	-webkit-min-logical-width: ~'calc(100% - 16px)';
	-webkit-min-logical-height: 46px;
	-webkit-appearance: none;
}

.StripeElement {
	padding-top: 14px;
	padding-bottom: 14px;
}

.StripeElement--empty {
	.submitted & {
		.invalidAppearance;
	}
}

textarea {resize: none;}

input[type="submit"] {
	display: block;
	font-weight: bold;
	.proxima;
	color:@white;
	background: @green;
	padding: 15px;
	text-align: center;
	border: none;
	margin-top: 30px;
	cursor: pointer;
}

ul {
	margin: 0 !important;
	padding: 0 !important;

	li {
		margin: 0 !important;
		list-style: none;
		text-align: left;
	}

	&.hs-error-msgs {
		li {
			padding: 10px 15px;
			background-color: @red;
			color: @white;
		}
	}
}

.submitted-message {
	padding: 20px;
	background-color: @green;
	color: @white;
	.border-radius(2px,2px,2px,2px);

	p {
		margin: 0;
	}
}

.fields {
	.box-sizing(border-box);
	display: flex;
	gap: 1px;
	margin: 15px 0 0 0;
    background-color: @black;
	.border-radius(2px,2px,2px,2px);
	overflow: hidden;

	.button {
		background-color: @gray2;
		flex: 1;
		.border-radius(0,0,0,0);
		font-family: "Barlow Condensed";
		font-weight: bold;
		font-style: italic;
		text-transform: uppercase;
		font-size: 24px;
		letter-spacing: 0;
		color: @gray4;

		&.on {
			background-color: @gold;
			color: @black;
		}
	}
}

/* Donation Form */

.formSelector {
	margin: 30px 0;
}

.donationForm {
	.button {
		margin-top: 10px;
		padding: 15px 10px;
		width: 100%;
		flex: 1;
		background-color: @green;
		.borderRadius3;
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;
		font-size: 20px;
		color: @white;
		.transition(background-color);

		&:hover {
			background-color: @blue;
			
			// 20 Years special colors
			background-color: @goldMetallic;

			@media @tabletPortrait {
				background-color: @green;
			}
		}
	}
}

progress {
    -webkit-appearance: none;
    appearance: none;
    margin: 5px 0 20px 0;
    width: 100%;
    height: 24px;
	padding: 8px 0;
    cursor: pointer;

    &::-webkit-progress-bar {
        background-color: @gray3;
        height: 8px;
        .border-radius(4px,4px,4px,4px);
    }

    &::-webkit-progress-value {
        background-color: @blue;

		// 20 Years special colors
		background-color: @goldMetallic;

        height: 8px;
        .border-radius(4px,4px,4px,4px);
    }
}

.alert {
	padding: 10px 20px;
	background-color: @red;
	text-align: center;
	line-height: 20px;
	margin: 10px 0;
	.borderRadius3;
}

.securePayment {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
	font-size: 12px;
	.opacity(0.3);
}

.paymentIcon {
	background-size: 50px auto;
	background-position: left 50% top -2px;
	background-repeat: no-repeat;

	&.securePaymentStripe {
		background-image: url('/images/icon-secure-payment-stripe.svg');
		width: 45px;
		height: 50px;
	}
	
	&.securePaymentLock {
		background-image: url('/images/icon-secure-payment-lock.svg');
		width: 30px;
		height: 50px;
	}
}

.keyframes(spinnerAnimation, {
	0% {
		.rotation(0deg);
	}

	100% {
		.rotation(360deg);
	}
});

.loader {
	display: none;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 133px;
	width: 100%;
	z-index: 1;

	@media @phone {
		bottom: 109px;
	}

	@spinnerSize: 24px;

	.spinner {
		.box-sizing(border-box);
		border: 2px solid @white;
		border-left-color: fade(@white,20%);
	}

	.spinner,
	.spinner:after {
		border-radius: 50%;
		width: @spinnerSize;
		height: @spinnerSize;
		display: block;
	}

}

.submitting {
	> *:not(.loader) {
		.opacity(0.3);
		pointer-events: none;
	}

	.loader {
		display: flex;

		.spinner {
			.animation(spinnerAnimation,0.8s,infinite,linear);
		}
	}

	.button {
		font-size: 0;
	}
}

/* GAME CLOCK */

.clock {
	width: 100%;
	height: 100%;
	overflow: hidden;

	nav {
		display: none;
				
		@media @desktop {
			display: flex;
		}
				
		@media @phoneLandscapeSmall {
			display: none;
		}
	}

	// Special styling to show schedule and standings next to clock

	#standingsContent,
	#scheduleContent {
		position: absolute;
		right: 10px;
		bottom: 10px;
		min-height: auto;
		padding-top: 5px;

		> section{
			padding-top: 5px;
			padding-bottom: 0;

			> section {
				padding-top: 5px;
				padding-bottom: 5px;
			}
		}
	}

	// #standingsContent {
	// 	top: 10px;
	// 	flex-wrap: wrap;

	// 	.division-x,
	// 	.division-4 {
	// 		//display: none;

	// 		.navigate {
	// 			display: none;
	// 		}
	// 	}

	// 	& ~ .countdown {
	// 		font-size: 725px;
	// 		line-height: 725px;
	// 		padding-right: 280px;
				
	// 		@media @desktop {
	// 			padding-right: 0;
	// 		}
	// 	}

	// 	.results {
	// 		padding-left: 10px;
	// 	}
	// }

	#scheduleContent,
	#standingsContent {
		left: 10px;
		flex-direction: row;

		& ~ .countdown {
			font-size: 625px;
			line-height: 625px;
			padding-bottom: 370px;
		}

		& ~ .clockFooter {
			display: none;
		}

		h1 {
			display: none;
		}

		.description {
			display: none;
		}

		.tile > header {
			display: none;
		}
		
		.tile ~ .tile {
			display: none;
		}

		.navigate {
			display: none;
		}
	}

	#scheduleContent .tile,
	#standingsContent {
		display: flex;
		flex: 1;
		gap: 10px;
		background-color: transparent;

		> section {
			.borderRadius1;
			padding-top: 10px;
			flex: 1;
			background-color: @gray2;
		}
	}

	#scheduleContent {

		.tile {
			width: 100%;

			.field {
				color: @white;
			}

			.teamLine.tbd {
				display: none;
			}
		}

		// Temporarily make clock smaller for Championship .week
		& ~ .countdown {
			font-size: 380px;
			line-height: 380px;
			padding-bottom: 570px;
		}
	}

	#standingsContent {
		height: 446px;

		.flagLeaderboard {
			height: 100%;
			overflow: hidden;
		}

		// Temporarily adjust flag leaderboard display during playoffs
		.division-4 .flagLeaderboard .flags,
		.division-x .flagLeaderboard .flags {
			.ranking {
				display: none !important;
			}

			.number {
				width: 50%;
				margin: 0 auto;
			}

			.playerPoints {
				margin-top: 0;
			}
		}

		// Temporarily hide flag leaderboard for final week
		.flagLeaderboard {
			display: none;
		}
	}

	body {
		width: 100%;
		height: 100%;
		padding-top: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: @black;

		.countdown {
			.box-sizing(border-box);
			width: 0;
			height: 0;
			margin: 0;
			padding-bottom: 170px;
			position: absolute;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			//.barlow;
			.tomorrow;

			// font-size: 850px;
			// line-height: 850px;
			font-size: 650px;
			line-height: 650px;

			background: @black;
			letter-spacing: 20px;
				
			@media @desktop {
				font-size: 150px;
				line-height: 150px;
				letter-spacing: 5px;
				padding-top: 20px;
				padding-bottom: 0;
			}

			&.pregame,
			&.break,
			&.postgame {
				.description {
					//color: @white !important;
					color: @black !important;
				}
				
				color: @black !important;

				& + .clockFooter .clockLogo {
					filter: brightness(0);
				}
			}

			&.pregame {
				background-color: @green !important;
			}

			&.break,
			&.postgame {
				//background-color: @blue !important;
				background-color: @goldMetallic !important;
			}

			&.active {
				position: static;
				width: 100%;
				height: 100%;

				+ .active {
					width: 0;
					height: 0;
					position: absolute;
				}
			}

			&.twoMinWarning:not(.break):not(.pregame){
				background-color: @gold !important;
				color: @black;
			}

			.min,.colon,.sec {
				@media @desktop {
					font-size: 100px;
				}
				
				@media @tabletPortrait {
					font-size: 150px;

					// Special 20 Years styling
					font-size: 90px;
				}
			}

			.min,.sec {
				width: 860px;
			}

			.min {
				text-align: right;
			}

			.colon {
				text-align: center;
				font-size: 600px;

					// Special Duo Cup styling
					//font-size: 510px;

					// Special 20 Years styling
					font-size: 400px;
				
				@media @desktop {
					font-size: 100px;
				}
				
				@media @tabletPortrait {
					font-size: 150px;

					// Special 20 Years styling
					font-size: 90px;
				}
			}

			.noClock {
				text-align: center;
				font-size: 25px;
				line-height: 30px;
				max-width: 300px;
				margin: auto 20px;
				letter-spacing: 0;

				& ~ * {
					display: none;
				}
			}

			.sec {
				text-align: left;
			}
		}

		.description {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			font-size: 100px;
			line-height: 150px;
			letter-spacing: 0;
			text-align: center;

				// Special 20 Years styling
				text-transform: uppercase;
				font-size: 80px;
				line-height: 120px;
		
			@media @desktop {
				top: @navHeight;
				margin-bottom: 0;
				font-size: 50px;
				line-height: 75px;
			}
		
			@media @phoneLandscape {
				font-size: 30px;
				top: @navHeightPhone;
			}
		
			@media @phoneLandscapeSmall {
				top: 0;
			}
		}

		.clockFooter {
			.flexCenter;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 220px;
		
			@media @desktop {
				display: none;
			}

			.clockLogo {
				width: 536px;
				height: 120px;
				margin: auto;
				background-size: contain;
				background-position: 50% 50%;
				background-repeat: no-repeat;
				//background-image: url('/images/clock-logo.svg');
				background-image: url('/images/logo-20-years.svg');

		
				@media @desktop {
					width: 60px;
					height: 60px;
					background-size: auto 45px;
					background-position: 0 50%;
				}
			}
		}
	}
}