:root{
	--app-height: 100%;
	--app-header-height: 12vh;
	--app-body-height: calc(
							var(--appHeight) 
							- var(--app-header-height)
						);
	--app-tab-height: 6vh;
	--app-content-height: calc(
							var(--app-body-height) 
							- var(--app-tab-height)
						);
	--title-height: 6vh;
	--points-log-circle-stack-height: 13vh;
	--points-log-offset:0vh;
	--region-selector-height:3vh;
	--meRow-height:10.5vh;
	--leaderboard-bottom-offset:1vh;
	
}

body{
	font-family:"Anton";
}

.centered{
	margin-left:auto;
	margin-right:auto;
}

/**  colors  */

.pointsPrimary{
	color: #bc202e;
}

.pointsSecondary{
	color: #f2cb16;
}

.pointsBlack{
	color: #000000;
}

.pointsWhite{
	color: #ffffff;
}

.pointsGrey{
	color: #888888;
}

.pointsBackgroundPrimary{
	background-color: #bc202e;
	color:#ffffff;
}

.pointsBackgroundSecondary{
	background-color: #f2cb16;
	color:#ffffff;
}

.pointsBackgroundBlack{
	background-color: #000000;
	color:#ffffff;
}

.pointsBackgroundWhite{
	background-color: #ffffff;
	color:#000000;
}

.pointsBackgroundGrey{
	background-color: #888888;
	color:#ffffff;
}

.raised{
	box-shadow: 0.1vw 0.1vh calc(.1vw + .1vh) black;
}

/* mobile style */
.appHeader{
	
	height:var(--app-header-height);
	width:100vw;
	left:0px;
	top:0px;
	font-size:calc(1vw + 1vh);
}

.appLoginHeight{
	height: 82vh;
}

.dashboardDimensions{
	width:100%;
	height:calc(calc(var(--appHeight) - var(--app-header-height)) - var(--app-tab-height));
}

.dashboardTitleMajor{
	font-size:calc(3vw + 4vh);
	text-transform:uppdercase;
}

.dashboardTitleMinor{
	font-size:calc(.9vw + 1.8vh);
	line-height:calc(.9vw + 1.8vh);
	text-transform:uppdercase;
}

.pointsMessage{
	font-size: calc(2vw + 4vh);
	top:4vh;
	right:3vw;
	cursor:pointer;
}

.pointsFeedback{
	top:calc(2vw + 9vh);
	right:3vw;
}

.backToLeaguePagePosition{
	position:relative;
	margin-left: auto;
	margin-right: auto;
	margin-top:1vh;
}

.backToLeaguePage{
	position:relative;
	-webkit-text-stroke: .2vw black;
	font-size: calc(1.5vw + 3vh);
	width:60vw;
	text-align:center;
	border: solid 1px black;
}



.backgroundBannerDimensions{
	width:100%;
	height:7vh;
}

.appHeader #content{
	height:7vh;
}

.actsIconContainer{
	width: 7vh;
	height: 7vh;
	display: inline-block;
	left:1vw;
}

.actsBannerText{
	display:inline-block;
	font-size: calc(5vw + 1.5vh);
}

.actsMinorBannerText{
	display:inline-block;
	font-size: calc(3vw + 1vh);
}

.appBody{
	width:100vw;
	height:calc(calc(var(--appHeight) - var(--app-header-height)) - var(--app-tab-height));
	left:0px;
	top:0px;
	font-size:calc(1vw + 1vh);
	overflow-y:scroll;
}

.appPointsLogBody{
	width:100vw;
	height:calc(calc(calc(var(--appHeight) - var(--app-header-height)) - var(--app-tab-height)) - var(--points-log-offset));
	left:0px;
	top:0px;
	font-size:calc(1vw + 1vh);
	overflow-y:scroll;
}

#playerHome{
	width:100%;
	height:calc(calc(var(--appHeight) - 18vh) - var(--app-tab-height));
}

.desktopAppTabBar{
	
	display:none;
}

.appTabBar{
	width:100%;
	text-align:center;
	background-color:#bc202e;
	color:white;
	font-size:calc(1.5vw + 1.5vh);
	height:var(--app-tab-height);
}

.orientationOverlay{
	font-size:5vw;
	width:100vw;
	height:100vh;
	position:fixed;
	bottom:0px;
	left:0px;
	z-index:10000000;
	display:none;
}

.appTabBottom{
	box-sizing:border-box;
	font-size:calc(1vw + 2.25vh);
	text-align:center;
	background-color:#bc202e;
	color:white;
	height: var(--app-tab-height);
	width:33.333%;
	-webkit-text-stroke: .2vw black;
}


.regionChoices{
	display:none;
	position:absolute;
	z-index:100;
	width: 40vw;
	padding:0px;
	max-height:50vh;
	overflow-y:scroll;
}

.seasonChoices{
	display:none;
	position:absolute;
	z-index:100;
	width: 40vw;
	margin-left:40vw;
	padding:0px;
	max-height:50vh;
	overflow-y:scroll;
}

.regionChoice{
	font-size: calc(1vw + 2vh);
	width: 40vw;
	padding:1vw;
	pointer:cursor;
}

.seasonChoice{
	font-size: calc(1vw + 2vh);
	width: 40vw;
	padding:1vw;
	pointer:cursor;
}




.table{
	display: table;
}

.desktopTable{
	display: none;
}

.tr{
	display: table-row;
}

.td{
	display: table-cell;
}

.th-row{
	display: table-header-group;
}

.boxScore{
	border-collapse:collapse;
	width:80vw;
	font-size:calc(1vw + 2vh);
}

.boxScoreLabel{
	text-align:center;
}

.boxScoreTd{
	border:solid 1.5vw #000000;
	padding-top: 2vh;
}

.boxScoreInfo{
	text-align:center;
	font-size:calc(3vw + 6vh);
	line-height:calc(4vw + 8vh);
}

.playerPageInfoSection{
	width:80vw;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
	font-size:calc(1vw + 2.5vh);
	line-height:calc(3vw + 4vh);
}

#desktopLogButton{
	display:none;
}

#mobileLogButton{
	background-color:#bc202e;
	color:white;
	text-align:center;
	width:40vw;
	height:12vw;
	margin-top:5vh;
	margin-left:auto;
	margin-right:auto;
	display:block;
	font-size:calc(1.25vw + 1.75vh);
	line-height:calc(1.5vw + 2.25vh);
	padding:calc(1vw + 1.25vh);
}

#phoneDisplayed{
	width:fit-content;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#phoneDisplayed::-webkit-input-placeholder { /* Edge */
  text-align:center;
}

#phoneDisplayed:-ms-input-placeholder { /* Internet Explorer 10-11 */
  text-align:center;
}

#phoneDisplayed::placeholder {
  text-align:center;
}

#heroCoinContainer{
	height:22vh;
}

#guardianPointsContainer{
	height:22vh;
}


.pointsPlayerRow{
	height:10vh;
	text-align: left;
	border-bottom:solid 1px black;
	font-size: calc(.75vw + 1.5vh);
}

.playerName{
	overflow:hidden;
	white-space:nowrap;
}

.playerLeague{
	overflow:hidden;
	white-space:nowrap;
	font-size:calc(.4vw + .8vh);
}

.inline{
	display:inline-block;
}

.dekstopInline{
	display:block;
}

.regionSelector{
	width: 40vw;
	height: var(--region-selector-height);
	padding: 1vw;
	margin-left: 5vw;
	text-align: left;
	border: solid 1px black;
	border-bottom: none;
	cursor:pointer;
}

.seasonSelector{
	width: 40vw;
	height: var(--region-selector-height);
	padding: 1vw;
	margin-left: 0px;
	text-align: left;
	border: solid 1px black;
	border-bottom: none;
	cursor:pointer;
}

.pointsPlacementBlock{
	width: 12%;
	height:10vh;
	border-right:solid 1px black;
	vertical-align:top;
}

.pointsPlacement{
	height:4vh;
	margin-top:3vh;
	margin-bottom:3vh;
	text-align:center;
}



.pointsPlayerBlock{
	width: 50%;
	height: 9vh;
	text-align:left;
}

.meBlock{
	width: 90vw;
	height:10.5vh;
	border: solid 1px black;
	border-top: solid .5vh darkgrey;
}

.pointsContainer{
	width:15vw;
	font-size:calc(.75vw + 1.5vh);
	padding:1vw;
}

.awardedPlacementBlock{
	width:30%;
	border-right:solid 1px black;
	text-align:center;
	height:fit-content;
	padding:1vw;
	box-sizing:content-box;
}

.awardedPointsPlayerRow{
	border-bottom:solid 1px black;
}

.awardedPointsPlayerBlock{
	width: 66%;
	text-align:left;
	height:13vh;
	vertical-align:top;
	padding:1vw;
}

.awardedPlayerName{
	overflow:hidden;
	white-space:nowrap;
	display:block;
}

.awardedPlayerLeague{
	overflow:hidden;
	white-space:nowrap;
	display:block;
}

.awardedPointsContainer{
	width:15vw;
	font-size:calc(1vw + 2vh);
	padding:1vw;
}

.awardedPlayerNameBlock{
	width:35%;
	height:5vh;
	margin-top:4vh;
	margin-bottom:4vh;
	font-size:calc(1vw + 2vh);
	padding:1vw;
}

.leaderboardFirstResponder{
	width:5vw;
	height:5vw;
}

.pointsHeroCoinsNumber{
	display:inline-block;
}

.pointsImageContainer{
	width:calc(1vw + 1vh);
}

.pointsRegionBlock{
	margin-right:2vw;
	font-size: calc(.75vw + 1.25vh);
	bottom:1vh;
}

.pointsCircle{
	font-size:calc(2.5vw + 4.75vh);
	-webkit-text-stroke-width: .2vw;
	-webkit-text-stroke-color: #000000;
	width:17vh;
	height:17vh;
}

.shadowDownRight{
	box-shadow: 0.5vw 0.5vh calc(1vw + 1vh) black;
}

.shadowDownLeft{
	box-shadow: -0.5vw 0.5vh calc(1vw + 1vh) black;
}

.pointsCircleLabel{
	font-size: calc(1.5vw + 3vh);
	line-height:calc(2.25vw + 4.5vh);
	margin-top: 2vh;
}

.pointsCircleIndicatorLabel{
	font-size: calc(2.5vw + 4.75vh);
}

.guardianPointsLabel{
	width:35vw;
	padding-right:1vw;
}

.offsetTopLeft{
	top:-4vh;
	left:-2vh;
}

.offsetTopRight{
	top:-4vh;
	right:-2vh;
}

.leaderboardHeight{
	height: calc(
		var(--app-content-height) 
		- calc(
			calc(
				var(--points-log-offset)
				+ calc(
					var(--title-height) 
					+ calc(
						var(--region-selector-height) 
						+ var(--me-block-height)
					)
				)
				+ var(--leaderboard-bottom-offset)
			)
		)
	);
}

.leaderboardWidth{
	width:90vw;
}

.initialAvatarContainer{
	font-size:calc(1vw + 2vh);
	width:12vw;
	height:12vw;
	text-align:center;
	padding:2vw;
}

.nameAvatarDimension{
	width:calc(.1125 * var(--appHeight));
	height:calc(.1125 * var(--appHeight));
	box-sizing:border-box;
	padding:1vw;
}

.minorLeaderboardFirstResponder{
	width:4vw;
	height:4vw;
}

.leaderboardPlacementFontSize{
	font-size:calc(1.5vw + 3vh);
}

.nameAvatarFont{
	font-size:calc(.075 * var(--appHeight));
}

.titleHeight{
	height:calc(var(--title-height) - 1vh);
}

.pointsLogOffset{
	margin-top: var(--points-log-offset);
}

.pointsLogSelectorStack{
	margin-left:5vw;
}

.pointsLogSelector{
	width: 40vw;
	padding: 1vw;
	text-align: left;
	border: solid 1px black;
	border-bottom: none;
	cursor:pointer;
}

.pointsLogTypeChoices{
	display:none;
	position:absolute;
	z-index:100;
	width: 40vw;
	padding:0px;
	max-height:50vh;
	overflow-y:scroll;
}

.pointsLogTypeChoice{
	font-size: calc(1vw + 2vh);
	width: 40vw;
	padding:1vw;
	pointer:cursor;
}

.pointsLogRow{
	/*height:10vh;*/
	text-align: left;
	border-bottom:solid 1px black;
	font-size: calc(.5vw + 1vh);
}

.pointsLogPointsBlock{
	width: 18%;
	padding:.9vh;
	border-right:solid 1px black;
	font-size:calc(.7vw + 1.45vh);
	text-align:left;
}

.pointsLogIcon{
	height:4vh;
	margin-top:3vh;
	margin-bottom:3vh;
	text-align:center;
}

.pointsLogDateBlock{
	width: 20%;
	height: 7vh;
	text-align:left;
	vertical-align:top;
}

.pointsLogItemHeight{
	height:8vh;
}

.pointsLogItemCellHeight{
	height:7vh;
}

.pointsLogItemInfo{
	margin-left: 18%;
	width:calc(90vw - 18%);
}

.pointsLogDate{
	overflow:hidden;
	white-space:nowrap;
	height:7vh;
	padding-top:2.5vh;
	padding-bottom:2.25vh;
}

.pointsLogCourseNameBlock{
	vertical-align:top;
	width:23%;
}

.pointsLogCourseName{
	width: 100%;
}

.pointsLogWhatForContainer{
	width:44%;
	text-align:right;
}

.pointsLogWhatFor{
	margin-left:auto;
	margin-right:0px;
	font-size:calc(.5vw + 1vh);
}

.pointsLogCircleStack{
	text-align:center;
	width: 11vh;
	height: 13vh;
	font-size:calc(.75vw + 1.5vh);
}

.pointsLogCircle{
	width:10vh;
	height:10vh;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	padding:0px;
}

.pointsLogListHeight{
	height: calc(
		var(--app-content-height) 
		- calc(
			calc(
				calc(
					var(--title-height) + var(--points-log-circle-stack-height)
				)
			 	+ var(--points-log-offset)
			)
			+ 1vh
		)
	);
}

.imageSmall{
	width:calc(1vw + 1vh);
}

.imageMedium{
	width:calc(1.25vw + 1.5vh);
}

.imageLarge{
	width:calc(1.5vw + 2vh);
}

.imageLarge{
	width:calc(1.5vw + 2vh);
}

.imageXLarge{
	width:calc(2vw + 2.5vh);
}

.imageXXLarge{
	width:calc(4vw + 5vh);
}

.imageXXXLarge{
	width:calc(7vw + 9vh);
}

.imageXXXXLarge{
	width:calc(12vw + 15vh);
}

.trophySize{
	width:50%;
}

#leaderboardRegion{
	font-size:calc(2vw + 4vh);
	text-decoration: underline;
	cursor: pointer;
}

#leaderboardContestType{
	text-decoration:underline;
	cursor:pointer;
	font-size:calc(1.5vw + 3vh);
	color: #555555;
}

.pointsButton{
	margin-top:1vh;
}

.pointsDialogTitle{
	color:black;
	font-weight:bold;
	text-transform:uppercase;
	font-size:calc(3vw + 4vh);
}

.pointsDialogSubtitle{
	color:black;
	font-weight:bold;
	text-transform:uppercase;
	font-size:calc(2vw + 3vh);
}




@media screen and (min-aspect-ratio: 1/1){
	/* wider mobile and desktop/laptop style adjustments */
	
	:root{
		--app-tab-height:0vh;
		
		--app-header-height: 18vh;
		
		--app-body-height: calc(
							var(--appHeight)
							- var(--app-header-height)
						);
		--app-content-height: calc(
							var(--app-body-height) 
							- var(--app-tab-height)
						);
		--title-height: 9vh;
		--points-log-circle-stack-height: 30vh;
		--points-log-offset:10vh;
		--region-selector-height:8vh;
		--meRow-height:9.5vh;
		--leaderboard-bottom-offset:4vh;
	}
	
	.desktopInline{
		display:inline-block;
	}
	
	.appBody{
		height:calc(calc(var(--appHeight) - var(--app-header-height)) - var(--app-tab-height));
	}
	
	.backgroundBannerDimensions{
		width:100%;
		height:11vh;
	}
	
	.appHeader{
		height:var(--app-header-height);
		width:100vw;
	}
	
	.offsetTopLeft{
		top:-10vh;
		left:-8vh;
	}
	
	.offsetTopRight{
		top:-10vh;
		right:-8vh;
	}
	
	.dashboardTitleMajor{
		font-size:calc(1.5vw + 3vh);
	}

	.dashboardTitleMinor{
		font-size:calc(1vw + 2vh);
	}
	
	.pointsMessage{
		top:15vh;
	}
	
	.pointsFeedback{
		top:calc(9vw + 9vh);
	}
	
	.backToLeaguePagePosition{
		position:absolute;
		left:2vw;
		bottom:2vh;
	}
	
	.backToLeaguePage{
		cursor:pointer;
		width:20vw;
		font-size: calc(1vw + 2vh);
	}
	
	.pointsCircle{
		-webkit-text-stroke-width: .05vw;
		width:40vh;
		height:40vh;
		border-width:calc(.25vw + .25vh);
	}
	
	.pointsCircleLabel{
		font-size:calc(1.5vw + 3vh);
	}
	
	.appHeader #content{
		height:10vh;
	}
	
	.actsIconContainer{
		width: 10vh;
		height: 10vh;
	}
	
	.appTabBar{
		display:none;
	}
	
	.desktopAppTabBar{
		width:calc(100vw - 50vh);
		height:7vh;
		text-align:center;
		background-color:#F7F8F9;
		color:black;
		font-size:calc(1.5vw + 1.5vh);
		border: solid 1px #bc202e;
		position:relative;
		top:11vh;
		margin-left:auto;
		margin-right:auto;
	}
	
	.appTabTop{
		box-sizing:border-box;
		font-size:calc(1vw + 1.5vh);
		text-align:center;
		background-color:white;
		color:#bc202e;
		border:solid 1px #bc202e;
		height: calc(7vh - 2px);
		padding-left:1vw;
		padding-right:1vw;
		cursor:default;
	}
	
	.desktopTable{
		display: table;
	}
	
	.imageXXXXLarge{
		width: calc(6vw + 7.5vh);
	}
	
	.boxScore{
		width:40vw;
	}
	
	.boxScoreTd{
		border:solid 1vw #000000;
	}
	
	.coinLabel{
		padding-left:2vw;
	}
	
	.guardianPointsLabel{
		padding-right:9vw;
		width:33vw;
	}
	
	.leaderboardOffset{
		top: 13vh;
	}
	
	.leaderboardWidth{
		width:70vw;
	}
	
	.nameAvatarDimension{
		width:calc(.1125 * var(--appHeight));
		height:calc(.1125 * var(--appHeight));
		box-sizing:border-box;
		padding:.5vw;
	}
	
	.nameAvatarFont{
		font-size:calc(.06 * var(--appHeight));
	}
	
	.minorNameAvatarDimension{
		width:8vh;
		height:8vh;
		padding:.5vw;
	}
	
	.minorNameAvatarFont{
		font-size:calc(1vw + 2vh);
	}
	
	.leaderboardPlacementFontSize{
		font-size:calc(1vw + 2vh);
	}
	
	.awardedPlacementBlock{
		height:fit-content;
		width:15%;
		padding:1vh;
		box-sizing:content-box;
	}
	
	.awardedPointsPlayerBlock{
		height:11vh;
		width:80%;
		padding:0px;
	}
	
	.awardedPlayerNameBlock{
		height:11vh;
		font-size:calc(.75vw + 1.5vh);
		margin:0px;
		padding-top:2vh;
		padding-bottom:2vh;
	}
	
	.trophySize{
		width:13%;
	}
	
	.awardedPointsContainer{
		font-size:calc(.75vw + 1.5vh);
	}
	
	.pointsPlayerRow{
		height:9vh;
		font-size:calc(.5vw + 1vh);
	}
	
	.pointsPlacementBlock{
		height:9vh;
	}
	
	.pointsPlacement{
		height: 9vh;
		padding: 3vh 0px;
		margin:0px;
	}
	
	.minorLeaderboardGP{
		font-size:calc(.75vw + 1.5vh);
	}
	
	.leaderboardFirstResponder{
		width:3vw;
		height:3vw;
	}
	
	.minorLeaderboardFirstResponder{
		width:2vw;
		height:2vw;
	}
	
	
	.meBlock{
		height: var(--meRow-height);
		width:70vw;
	}
	
	.regionSelector{
		width: 20vw;
		height: var(--region-selector-height);		
		margin-left:15vw;
	}
	
	.seasonSelector{
		width: 20vw;
		height: var(--region-selector-height);
	}
	
	.regionChoices{
		width:25vw;
	}
	
	.regionChoice{
		width:25vw;
		font-size:calc(1vw + 1vh);
	}
	
	.seasonChoices{
		width:25vw;
		margin-left:25vw;
	}
	
	.seasonChoice{
		width:25vw;
		font-size:calc(1vw + 1vh);
	}
	
	.titleHeight{
		height:calc(var(--title-height) - 1vh);
	}
	
	.pointsLogPointsBlock{
		width:10vh;
		overflow:hidden;
		padding:.25vw;
		font-size:calc(.4vw + .9vh);
	}
	
	.pointsLogCircleStack{
		width: 23vh;
		height: 30vh;
		font-size: calc(1.5vh + 3vh)
	}
	
	.pointsLogCircle{
		width:22vh;
		height:22vh;
	}
	
	.pointsLogListHeight{
		height: calc(
					var(--app-content-height) 
					- calc(
						calc(
							calc(
									var(--title-height) 
									+ var(--points-log-circle-stack-height)
								)
						 	+ var(--points-log-offset)
						)
						+ 1vh
					)
				);
	}
	
	.pointsLogCourseNameBlock{
		width:33%;
	}
	
	.pointsLogItemInfo{
		margin-left: 10vh;
		width:calc(90vw - 10vh);
	}
	
	.pointsDialogTitle{
		font-size:calc(1.5vw + 3vh);
	}
	
	.pointsDialogSubtitle{
		font-size:calc(1vw + 2vh);
	}
	
	#heroCoinContainer{
		height:50vh;
	}
	
	#guardianPointsContainer{
		height:50vh;
	}
	
	#desktopLogButton{
		background-color:#bc202e;
		color:white;
		text-align:center;
		width:10vw;
		height:10vw;
		display:block;
		font-size:calc(1vw + 1vh);
		cursor:pointer;
	}
	
	#mobileLogButton{
		display:none;
	}
	
	
}

.away{
	background-color:#000000;
	color:white;
	cursor:pointer;
}

.unselectable {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Chrome/Safari/Opera */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
}