/* Prettified by Source 2 Viewer 11.1.0.0 - https://valveresourceformat.github.io */

.DashboardPage
{
	flow-children: down;
}

.RewardsTitle
{
	color: white;
	font-size: 40px;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.MainContents
{
	width: 100%;
	height: fill-parent-flow( 1.0 );
	flow-children: right;
}

.StatusPanel
{
	height: 100%;
	width: 300px;
	background-color: #0009;
	margin-right: 12px;
	flow-children: down;
	padding: 12px;
}

#LevelShield
{
	width: 140px;
	height: 140px;
	horizontal-align: center;
}

.ProgressBarContainer
{
	width: 100%;
}

.ProgressBarContainer Label
{
	horizontal-align: center;
	color: white;
	text-shadow: 2px 2px 4px black;
}

.AvailableRewards
{
	horizontal-align: center;
	color: white;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 20px;
	margin-top: 4px;
}

.RewardTokenSection
{
	flow-children: down;
	width: 100%;
}

.RewardTokenDisplay
{
	flow-children: right;
}

.RewardTokenImage
{
	width: 80px;
	height: 80px;
	background-color: #666;
	border-radius: 50%;
	border: 2px solid black;
	box-shadow: 2px 2px 4px black;
}

.RewardTokenImage Label
{
	vertical-align: middle;
	horizontal-align: center;
	color: white;
	font-size: 64px;
}

.RewardTokenImageIcon
{
	width: 48px;
	height: 48px;
	vertical-align: middle;
	horizontal-align: center;
	background-image: url("s2r://panorama/images/control_icons/starfilled_psd.vtex");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.RewardTokenDetails
{
	flow-children: down;
	vertical-align: middle;
	margin-left: 8px;
}

.RewardTokenAmount
{
	font-size: 36px;
	color: white;
}

.RewardTokenType
{
	font-size: 16px;
	color: #666;
	text-transform: uppercase;
}

.RewardTokenClaimButton
{
	width: 100%;
}

.UnclaimedText
{
	margin-top: 24px;
	horizontal-align: center;
}

#ClaimRewardButton
{
	horizontal-align: center;
}

#ClaimRewardButton Label
{
	text-align: center;
}

.HelpLabel
{
	color: #666;
	font-size: 16px;
	text-align: center;
	horizontal-align: center;
}

#PurchaseLevelsButton
{
	margin-top: 20px;
	horizontal-align: center;
}

.RewardsPanel
{
	flow-children: down;
	width: fill-parent-flow( 1.0 );
	height: 100%;
	background-color: #0009;
}

.RewardTierList
{
	flow-children: down;
	width: 100%;
	overflow: squish scroll;
	opacity: 0.99;
}

.RewardTier
{
	flow-children: down;
	horizontal-align: center;
	margin-bottom: 16px;
	width: 100%;
}

.RewardTierHeader
{
	flow-children: right;
	width: 100%;
	padding: 4px 12px;
}

.RewardTierTitle
{
	font-size: 28px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: white;
}

.RewardTierReceived
{
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #999;
	vertical-align: bottom;
}

.RewardTierRarity
{
	text-transform: uppercase;
	letter-spacing: 4px;
	vertical-align: middle;
	color: #b759f3;
}

.RewardProgressFragments
{
	vertical-align: middle;
	flow-children: right;
	tooltip-position: top;
	tooltip-body-position: 50% 50%;
}

.RewardProgressFragment
{
	vertical-align: middle;
	width: 20px;
	height: 20px;
	wash-color: #666;
	background-image: url("s2r://panorama/images/control_icons/socket_full_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.RewardProgressFragment.Completed
{
	wash-color: winnerGreen;
}

.RewardTierProgressContainer Label
{
	color: white;
	text-shadow: 2px 2px 4px black;
	horizontal-align: center;
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.2s;
}

.RewardTierProgressContainer:hover Label
{
	opacity: 1.0;
}

.EscalatingOddsIcon
{
	vertical-align: middle;
	width: 24px;
	height: 24px;
	margin-left: 4px;
	background-image: url("s2r://panorama/images/control_icons/escalation_arrow_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.RewardTierItems
{
	width: 100%;
	flow-children: right;
	margin: 0px 6px 12px 6px;
}

.RewardItem
{
	width: fill-parent-flow( 1.0 );
	height: 260px;
	margin: 0px 6px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #333 ), to( black ) );
	border: 1px solid black;
	saturation: 0.2;
	brightness: 0.2;
}

.RewardItem.Received
{
	saturation: 1.0;
	brightness: 1.0;
}