/* Prettified by Source 2 Viewer 11.1.0.0 - https://valveresourceformat.github.io */

.DOTARoadToTIQuest
{
	horizontal-align: center;
	vertical-align: top;
	flow-children: down;
	width: 100%;
	height: 100%;
}

@keyframes 'LoadFadeIn'
{
	0%
	{
		opacity: 0;
	}
	
	100%
	{
		opacity: 1;
	}
	
}

#QuestHeader
{
	horizontal-align: center;
	flow-children: down;
	padding: 0px 8px;
	width: 100%;
	margin-bottom: 16px;
	padding-top: 64px;
}

.QuestTypePlayer #QuestHeader
{
	padding-top: 48px;
}

#QuestHeader .Title
{
	horizontal-align: center;
	vertical-align: middle;
	font-size: 28px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #999;
}

#QuestDetails
{
	width: 100%;
	margin-bottom: 24px;
}

.QuestDetailsContainer
{
	horizontal-align: center;
	flow-children: right;
	padding: 12px 200px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( primaryColor4&00 ), color-stop( 0.3, secondaryColor2&44 ), color-stop( 0.6, secondaryColor2&44 ), to( primaryColor4&00 ) );
	background-color: gradient( linear, 0% 0%, 100% 0%, from( primaryColor4&00 ), color-stop( 0.3, primaryColor4&11 ), color-stop( 0.6, primaryColor4&11 ), to( primaryColor4&00 ) );
}

.QuestTypePlayer .QuestDetailsContainer
{
	padding-top: 0px;
	padding-bottom: 0px;
	overflow: noclip;
}

.QuestDetailsContainer #TeamLogo
{
	width: 88px;
	height: 88px;
	horizontal-align: center;
}

.QuestDetailsContainer #OpposingTeamLogo
{
	width: 88px;
	height: 88px;
	horizontal-align: center;
}

#QuestHeroesList
{
	horizontal-align: center;
	flow-children: right;
}

#QuestFooter
{
	flow-children: down;
	horizontal-align: center;
	margin-top: 24px;
	border-top: 1px solid white;
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( primaryColor4&00 ), color-stop( 0.3, primaryColor2&11 ), color-stop( 0.6, primaryColor2&11 ), to( primaryColor4&00 ) );
	width: 60%;
}

#QuestFooter .QuestExtraInstructions
{
	horizontal-align: center;
	margin-top: 8px;
	color: Grey;
	font-size: 16px;
}

.QuestPlayerInstructions,.QuestMatchInstructions
{
	text-align: center;
	horizontal-align: center;
	color: gradient( linear, 0% 0%, 0% 100%, from( LightestGrey ), to( LighterGrey ) );
	font-family: titleFont;
	font-size: 32px;
	letter-spacing: 0.2px;
	text-shadow: textShadowMedium;
	visibility: collapse;
}

.QuestTypeMatch .QuestMatchInstructions,.QuestTypePlayer .QuestPlayerInstructions
{
	visibility: visible;
}

.SubTitle
{
	color: gradient( linear, 0% 0%, 0% 100%, from( primaryColor1 ), to( primaryColor2 ) );
	text-shadow: textShadowSmall;
	margin-bottom: 4px;
}

#OpposingTeamName,#TeamName
{
	horizontal-align: center;
	text-align: center;
}

.MatchDetails
{
	flow-children: down;
	opacity: 0;
	vertical-align: center;
}

.LeagueDetailsLoaded .MatchDetails
{
	animation-name: LoadFadeIn;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	tooltip-position: left;
}

.LeagueDetailsLoaded .MatchDetails.OpposingTeam
{
	tooltip-position: right;
}

#MatchDescription
{
	horizontal-align: center;
	vertical-align: center;
	flow-children: down;
	padding: 0px 24px;
	opacity: 0;
}

.LeagueDetailsLoaded #MatchDescription
{
	animation-name: LoadFadeIn;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

#MatchOutcome
{
	horizontal-align: center;
	margin-bottom: -2px;
}

#MatchLeague,#MatchNumber
{
	horizontal-align: center;
}

#MatchDate
{
	horizontal-align: center;
}

#MatchDetailsButton
{
	horizontal-align: center;
	margin-top: 8px;
}

.PlayerTeamDetails
{
	flow-children: down;
	vertical-align: center;
	tooltip-position: top;
}

#PlayerDescription
{
	horizontal-align: center;
	vertical-align: middle;
	flow-children: down;
	padding-left: 16px;
}

#PlayerName
{
	text-align: center;
	color: white;
}

#PlayerRole
{
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #666;
}

#PlayerImageContainer
{
	horizontal-align: left;
	vertical-align: middle;
	ui-scale: 100%;
	width: 180px;
	height: 180px;
}

#AvatarImage,#PlayerImage
{
	width: 100%;
	height: 100%;
}

.MatchDetailsLoaded .QuestHero #HeroPlayerDetails
{
	animation-name: LoadFadeIn;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.QuestTypePlayer #HeroPlayerDetails
{
	visibility: collapse;
}

.HeroPlayerName
{
	font-weight: semi-bold;
	color: white;
	text-shadow: 0px 2px 6px black;
	horizontal-align: center;
	text-align: center;
	width: 100%;
}

#QuestDifficulty
{
	ignore-parent-flow: true;
	flow-children: right;
	margin: 24px;
}

#QuestDifficulty .DifficultyLabel
{
	margin-left: 2px;
	font-weight: semi-bold;
}

.EasyDifficulty #QuestDifficulty .DifficultyLabel
{
	color: winnerGreenLow;
}

.ModerateDifficulty #QuestDifficulty .DifficultyLabel
{
	color: #FF7D1F;
}

.HardDifficulty #QuestDifficulty .DifficultyLabel
{
	color: loserRed;
}

#QuestRewards
{
	ignore-parent-flow: true;
	flow-children: right;
	margin: 24px;
	margin-top: 48px;
}

#QuestRewards .PointIcon
{
	width: 24px;
	height: 24px;
	margin-left: 4px;
	wash-color: secondaryColor1;
	background-image: url("s2r://panorama/images/compendium/international2022/totalpoints_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	horizontal-align: middle;
	vertical-align: middle;
}

#QuestRewards .TrophyIcon
{
	width: 20px;
	height: 20px;
	margin-left: 4px;
	wash-color: secondaryColor1;
	background-image: url("s2r://panorama/images/control_icons/icon_league_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	horizontal-align: middle;
	vertical-align: middle;
	visibility: collapse;
}

.TrophyReward #QuestRewards .TrophyIcon
{
	visibility: visible;
}

.HeroPlayerStats
{
	font-weight: bold;
	color: rgba(255, 255, 255, 0.5);
	text-shadow: 0px 2px 6px black;
	horizontal-align: center;
	text-align: center;
	width: 100%;
	font-weight: normal;
}

.QuestHero
{
	width: 172px;
	height: width-percentage(133%);
	margin: 0px 8px;
	box-shadow: shadowMedium;
}

.QuestHero DOTAHeroMovie,.QuestHero DOTAHeroImage
{
	width: 100%;
	height: 100%;
}

.QuestHero .QuestCompleteBorder
{
	width: 100%;
	height: 100%;
	border: 3px solid white;
	border-brush: gradient( linear, 100% 0%, 0% 100%, from( primaryColor1 ), color-stop( 0.5, primaryColor3 ), to( primaryColor2 ));
	visibility: collapse;
}

.QuestHero #HeroPlayerDetails
{
	flow-children: down;
	vertical-align: bottom;
	width: 100%;
	padding: 16px 12px;
	opacity: 0;
}

.QuestHero .CompletedFX
{
	overflow: noclip;
	width: 180%;
	height: 180%;
	horizontal-align: center;
	vertical-align: bottom;
	visibility: collapse;
	transform: translateY( 106% );
	opacity-mask: url("s2r://panorama/images/masks/softedge_box_png.vtex");
	hue-rotation: 80deg;
}

.QuestHero .CompletedFXParticles
{
	width: 60%;
	height: 60%;
	horizontal-align: center;
	vertical-align: bottom;
	visibility: collapse;
	transform: translateY( 60px );
	opacity-mask: url("s2r://panorama/images/masks/softedge_box_png.vtex");
	hue-rotation: -180deg;
}

.QuestHero .CompletedCheckIcon,.QuestHero .HalfCompletedCheckIcon
{
	visibility: collapse;
	margin: 2px;
	horizontal-align: right;
	wash-color: primaryColor1;
	width: 36px;
	height: width-percentage(100%);
}

.QuestHero .HalfCompletedCheckIcon
{
	margin: 6px;
	width: 20px;
	tooltip-position: top;
}

.QuestHero.Completed
{
	animation-name: GlowQuestCompleteBorder;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

.QuestHero.Completed .CompletedFX,.QuestHero.Completed .CompletedFXParticles
{
	visibility: visible;
}

.QuestHero.Completed DOTAHeroMovie,.QuestHero.Completed DOTAHeroImage
{
	saturation: 0;
	wash-color: primaryColor3;
	opacity: 1;
}

.QuestHero.Completed .QuestCompleteBorder
{
	visibility: visible;
}

.QuestHero.Completed .CompletedCheckIcon
{
	visibility: visible;
}

.QuestHero.HalfProgress
{
	animation-name: GlowQuestCompleteBorder;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

.QuestHero.HalfProgress .HalfCompletedCheckIcon
{
	visibility: visible;
}

.ItemUsingCullingBlade .QuestHero.HalfProgress #HeroMovie,.ItemUsingCullingBlade .QuestHero.HalfProgress #HeroImage
{
	border: 2px solid white;
	brightness: 2;
	saturation: 1;
}

@keyframes 'GlowQuestCompleteBorder'
{
	0%
	{
		brightness: 1;
	}
	
	100%
	{
		brightness: 1.5;
	}
	
}

#CompletedIconContainer
{
	horizontal-align: center;
	vertical-align: bottom;
	padding: 4px 12px;
	border-radius: 3px;
	flow-children: right;
	margin-bottom: 12px;
	visibility: collapse;
}

#CompletedIconContainer .CompletionStatus
{
	font-weight: semi-bold;
	text-shadow: 0px 0px 12px rgba(255, 255, 255, 0.1);
	text-shadow: textShadowMedium;
	margin-bottom: 2px;
}

#CompletedIconContainer #HalfCompleteLabel,#CompletedIconContainer #CompleteLabel
{
	visibility: collapse;
}

#CompletedIconContainer #IncompleteLabel
{
	color: rgba(255, 255, 255, 0.5);
}

.Completed #CompletedIconContainer #CompleteLabel
{
	visibility: visible;
	color: white;
	font-size: 20px;
	margin-bottom: 0px;
}

.HalfProgress #CompletedIconContainer #HalfCompleteLabel
{
	visibility: visible;
	color: white;
}

#CompletedPip1,#CompletedPip2
{
	width: 24px;
	height: 24px;
	vertical-align: middle;
	horizontal-align: center;
	background-image: url("s2r://panorama/images/control_icons/star_outline_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 1;
	visibility: collapse;
}

.HalfProgress #CompletedPip1,.Completed #CompletedPip1,.Completed #CompletedPip2
{
	background-image: url("s2r://panorama/images/control_icons/star_filled_png.vtex");
}

