@define slot0color: #0038AC;
@define slot1color: #17B271;
@define slot2color: #6B006B;
@define slot3color: #8F8D00;
@define slot4color: #903C00;

@define slot5color: #A9306C;
@define slot6color: #6B7F0F;
@define slot7color: #188FAC;
@define slot8color: #004A13;
@define slot9color: #5D3B00;

@define COMMON_COLOR: #b0c3d9;
@define UNCOMMON_COLOR: #5e98d9;
@define RARE_COLOR: #4b69ff;
@define MYTHICAL_COLOR: #8847ff;
@define LEGENDARY_COLOR: #d32ce6;
@define IMMORTAL_COLOR: #b28a33;
@define ARCANA_COLOR: #ade55c;
@define ANCIENT_COLOR: #eb4b4b;

@define HeroTransitionDuration: 0.46s;

@keyframes 'color_transition'
{
	0%
	{
		opacity:  0.2;
	}

	50%
	{
		opacity:  0.4;
	}

	100%
	{
		opacity:  0.2;
	}
}

@keyframes 'color_transition_bright'
{
	0%
	{
		opacity:  0.5;
	}

	50%
	{
		opacity:  1;
	}

	100%
	{
		opacity:  0.5;
	}
}

@keyframes 'fade_in'
{
	0%
	{
		opacity: 0.0;
	}

	50%
	{
		opacity: 0.0;
	}

	100%
	{
		opacity: 1.0;
	}
}

@keyframes 'level_up'
{
	0%
	{
		box-shadow: inset gold 0 0 0px 0;
	}

	50%
	{
		box-shadow: inset gold 0 0 5px 0;
	}

	100%
	{
		box-shadow: inset gold 0 0 0px 0;
	}
}

@keyframes 'level_rare'
{
	0%
	{
		box-shadow: inset RARE_COLOR 0 0 0px 0;
	}

	50%
	{
		box-shadow: inset RARE_COLOR 0 0 5px 0;
	}

	100%
	{
		box-shadow: inset RARE_COLOR 0 0 0px 0;
	}
}

@keyframes 'level_mythical'
{
	0%
	{
		box-shadow: inset MYTHICAL_COLOR 0 0 0px 0;
	}

	50%
	{
		box-shadow: inset MYTHICAL_COLOR 0 0 5px 0;
	}

	100%
	{
		box-shadow: inset MYTHICAL_COLOR 0 0 0px 0;
	}
}

@keyframes 'level_legendary'
{
	0%
	{
		box-shadow: inset LEGENDARY_COLOR 0 0 0px 0;
	}

	50%
	{
		box-shadow: inset LEGENDARY_COLOR 0 0 5px 0;
	}

	100%
	{
		box-shadow: inset LEGENDARY_COLOR 0 0 0px 0;
	}
}

@keyframes 'level_immortal'
{
	0%
	{
		box-shadow: inset IMMORTAL_COLOR 0 0 0px 0;
	}

	50%
	{
		box-shadow: inset IMMORTAL_COLOR 0 0 5px 0;
	}

	100%
	{
		box-shadow: inset IMMORTAL_COLOR 0 0 0px 0;
	}
}

@keyframes 'level_arcana'
{
	0%
	{
		box-shadow: inset ARCANA_COLOR 0 0 0px 0;
	}

	50%
	{
		box-shadow: inset ARCANA_COLOR 0 0 5px 0;
	}

	100%
	{
		box-shadow: inset ARCANA_COLOR 0 0 0px 0;
	}
}

@keyframes 'level_ancient'
{
	0%
	{
		box-shadow: inset ANCIENT_COLOR 0 0 0px 0;
	}

	50%
	{
		box-shadow: inset ANCIENT_COLOR 0 0 5px 0;
	}

	100%
	{
		box-shadow: inset ANCIENT_COLOR 0 0 0px 0;
	}
}

@keyframes 'level_down'
{
	0%
	{
		border: 0px solid red;
	}

	50%
	{
		border: 2px solid red;
	}

	100%
	{
		border: 0px solid red;
	}
}


DOTAPostGame
{
	width: 100%;
	height: 100%;

	vertical-align: top;
	horizontal-align: center;

	opacity: 0.0;
}


DOTAPostGame.PageVisible
{
	opacity: 1.0;
}

/* cvar dota_toggle_hero_movie_mode */

.HeroMovieMode #EconItemContainer,
.HeroMovieMode #MatchDetailsContainer
{
	visibility: collapse;
}


/* States of visibility */

#ContainerLoading, #ContainerDataNotFound, #ContainerLoaded
{
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.2s;
}

DOTAPostGame.MatchDataLoading #ContainerLoading,
DOTAPostGame.MatchDataNotFound #ContainerDataNotFound,
DOTAPostGame.MatchDataLoaded #ContainerLoaded
{
	opacity: 1.0;
}

/* Loading Container */
#ContainerLoading
{
	width: 1920px;
	height: 1080px;
	horizontal-align: center;
	flow-children: right;
	background-color: #000000B7;
}

#ContainerLoading Panel.Spinner
{
	horizontal-align: center;
	vertical-align: middle;
	width: 28px;
	height: 28px;
	wash-color: #a5ada2ff;
	margin: 0px;
}

#ContainerLoading Panel.Spinner.Shadow
{
	margin-left: 0px;
	margin-top: 2px;
	wash-color: #000000ff;
	opacity: 0.8;
}

#ContainerLoading Label
{
	margin-left: 10px;
	vertical-align: middle;
	text-shadow: 2px 2px 2px #000000ff;
}

/* Data Not Found Container */
#ContainerDataNotFound
{
	horizontal-align: center;
	vertical-align: middle;
	margin-bottom: 300px;
	margin-top: 150px;
}

#ContainerDataNotFound Label
{
	font-size: 24px;
	text-shadow: 1px 1px 4px #000;
}


/* Loaded Container */

#ContainerLoaded
{
	width: 100%;
	height: 100%;
	horizontal-align: center;
}

#ContainerHeader
{
	height: 100px;
	margin-bottom: 100px;
	background-color: #000000B7;
}

#DetailsHeaderTop
{
	background-color: #000000B7;
	padding-top: 15px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 15px;
}

#HeaderRow
{
	width: 1392px;
	height: 72px;
	margin-top: 100px;
	horizontal-align: center;
	z-index: 10;
}

.ProgressVisible #HeaderRow
{
	visibility: visible;
}

#CloseButton
{
	horizontal-align: right;
	margin-left: 16px;
	tooltip-position: top;
	tooltip-body-position: 50% 50%;

	opacity: 0.0;
}

.ShowingJustFinishedMatch:not(.ProgressVisible) #CloseButton
{
	opacity: 1.0;
}

#HideProgressButton
{
	width: 24px;
	height: 24px;

	vertical-align: middle;
	margin-right: 12px;

	tooltip-position: top;
	tooltip-body-position: 50% 50%;

	background-image: url("s2r://panorama/images/control_icons/arrow_left_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	wash-color: #768e8d;

	visibility: collapse;
}

.ProgressVisible.ViewingProgressSummary #HideProgressButton
{
	visibility: visible;
}

#ProgressScreenButtons
{
	flow-children: right;
	horizontal-align: center;
	padding-left: 6px;
	vertical-align: middle;
}

.ProgressScreenButton
{
	width: 21px;
	height: 21px;
	margin-right: 8px;

	tooltip-position: top;
	tooltip-body-position: 50% 50%;

	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	wash-color: #768e8d;
}

.ProgressScreenButton:hover
{
	wash-color: #fff;
}

.ProgressScreenButton:active
{
	wash-color: #ccc;
}

.ProgressScreenButton.HeroBadgeProgress		{ background-image: url("s2r://panorama/images/control_icons/hero_progress_icon_png.vtex"); }
.ProgressScreenButton.HeroRelicsProgress	{ background-image: url("s2r://panorama/images/control_icons/relic_progress_icon_png.vtex"); }
.ProgressScreenButton.CavernsProgress		{ background-image: url("s2r://panorama/images/control_icons/bp2019_jungle_icon_png.vtex"); }
.ProgressScreenButton.MVPProgress		{ background-image: url("s2r://panorama/images/control_icons/bp2019_mvp_icon_png.vtex"); }
.ProgressScreenButton.BattlePassProgress	{ background-image: url("s2r://panorama/images/control_icons/battlepass_logo_grayscale_small_png.vtex"); }
.ProgressScreenButton.RubickArcanaProgress	{ background-image: url("s2r://panorama/images/control_icons/rubick_arcana_post_game_progress_icon_png.vtex"); }
.Season_NewBloom2019 .ProgressScreenButton.EventPointsProgress	{ background-image: url("s2r://panorama/images/control_icons/newbloom_2019_post_game_progress_icon_psd.vtex"); }
.ProgressScreenButton.CoachRatingProgress	{ background-image: url("s2r://panorama/images/coaching/coach_icon_png.vtex"); }
.ProgressScreenButton.PlayerMatchSurveyProgress	{ background-image: url("s2r://panorama/images/control_icons/player_match_survey_icon_png.vtex"); }


/* Details Selector (tabs) */

#DetailsSelectorRow
{
	margin-top: 13px;
	margin-bottom: 3px;
	width: 700px;
	flow-children: right;
	horizontal-align: left;
}

.DetailsSelector
{
	vertical-align: bottom;
}

.DetailsSelector .RadioBox
{
	visibility: collapse;
}

.DetailsSelector Label
{
	font-size: 19px;
//	letter-spacing: 1px;
	color: #8e9795;
	text-transform: uppercase;
	margin-left: 0px;
	font-weight: thinner;

}

.DetailsSelector:hover Label
{
	color: white;
}

.DetailsSelector:selected Label
{
	color: white;
}

.DetailsSelector:disabled Label
{
	color: #aaaaaa11;
}

.DetailsSelector:disabled:hover Label
{
	color: #aaaaaa11;
}

.DetailsSelectorSeparator
{
	margin: 0px 19px;
	font-size: 19px;
	color: #8e9795;
	vertical-align: bottom;
}

.ShowOnlyIfMatchMetadata
{
	visibility: collapse;
}

.MetadataExistenceFound .ShowOnlyIfMatchMetadata
{
	visibility: visible;
}

.ShowOnlyIfCM
{
	visibility: collapse;
}

.DraftVisible .ShowOnlyIfDraftVisible
{
	visibility: visible;
}

/* Match details - game mode, matchid etc */

#OverviewControls
{
	vertical-align: bottom;
	horizontal-align: center;
	width: 1392px;
	height: 105px;

	transition-property: opacity, transform;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

#MatchDetailsContainer
{
	horizontal-align: center;
	vertical-align: bottom;
	flow-children: right;

	margin-bottom: 16px;
	opacity: 1;

	transition-property: opacity, transform;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

#MatchDetailsContainer Label
{
	font-weight: thin;
}

.MatchDetailsPairContainer
{
	flow-children: right;
	vertical-align: middle;
	margin: 0px 16px;
}

.MatchDetailsPairContainer .MatchDetailsLabel
{
	text-transform: uppercase;
	margin-right: 4px;
}


#ReplayStatuses
{
	vertical-align: bottom;

	transition-property: opacity;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

#DownloadReplay Label
{
	margin-right: 4px;
	font-size: 18px;
	color: #355872;
}

#MatchDetailsContainer.ReplayReady #DownloadReplay Label
{
	visibility: visible;
}

#ClosePostGameButton
{
	horizontal-align: right;
	vertical-align: bottom;
	margin-right: 26px;
	margin-bottom: 16px;

}

#DownloadReplay
{
	margin-left: 16px;

}

#DownloadReplay Label
{
	visibility: visible;
	color: #62a2d2;
	border: 1px solid #1C303F;
	padding: 5px 5px 2px 8px;

	transition-property: color, border;
	transition-timing-function: ease-in-out;
	transition-duration: 0.05s;
}

#DownloadReplayWhenReady
{
	height: 24px;
	padding: 0px;
	padding-right: 6px;
	vertical-align: middle;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 3px;
}

#DownloadReplayWhenReady  .TickBox
{
	border: 2px solid #355872;
	width: 14px;
	height: 14px;
	margin-top: -1px;
}

#DownloadReplayWhenReady:selected Label,
#DownloadReplayWhenReady:hover Label
{
	color: #62a2d2;
}

#DownloadReplay:hover Label
{
	color: white;
	border: 1px solid #62a2d2;
}

#DownloadReplay:active Label
{
	color: #444444;
	border: 1px solid #62a2d244;
}

#DownloadReplayWhenReady Label
{
	font-size: 18px;
	text-align: right;
	text-transform: uppercase;
}

#DurationContainer #DurationLabel
{
	text-transform: uppercase;
	text-align: center;
}

#DurationContainer #GameModeLabel
{
	text-transform: uppercase;
	color: white;
//	letter-spacing: 2px;
	text-align: center;
	horizontal-align: center;
	margin-bottom: 6px;
	font-weight: bold;
}

#DownloadReplayWhenReady Label
{
	margin: 0px;
	vertical-align: middle;
	margin-top: 1px;
	margin-left: 6px;
	margin-right: 6px;
}

#ReplayUnavailable,
#ReplayPending
{
	vertical-align: middle;
	margin-top: 2px;
}

#ReplayUnavailable
{
	margin-top: 2px;
	margin-right: 12px;
}

#ReplayPending .Spinner
{
	width: 16px;
	height: 16px;
	wash-color: #546C7F;
	margin-right: 8px;
}

#GameModeLabel
{
	margin-left: 0px;
}


/* Overview */

#ContainerDetails
{
	flow-children: none;
	width: 100%;
	height: 100%;
	horizontal-align: center;
	overflow: noclip;

	transition-property: opacity;
	transition-duration: 0.3s;
}

#DetailsOverview
{
	width: 100%;
	//margin-top: 32px;
}

#NormalGameOverview
{
	width: 100%;
	transition-property: blur, saturation, wash-color, opacity;
	transition-duration: 0.45s;
	transition-delay: 0.0s;
	transition-timing-function: ease-in;
}

#NormalGameOverview.CommentsVisible
{
	blur: gaussian( 5 );
	wash-color: #657b7baa;
	saturation: 0.25;
}

DOTAPostGame.CustomGame #NormalGameOverview,
DOTAPostGame.EventGame #NormalGameOverview,
#CustomGameOverview,
#EventGameOverview
{
	visibility: collapse;
}

DOTAPostGame.CustomGame #CustomGameOverview
{
	visibility: visible;
}

DOTAPostGame.EventGame #EventGameOverview
{
	visibility: visible;
}

#DetailsGraphs
{
	flow-children: down;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 15px;
}

.GraphShadow
{
	//transform: translateY(-120px);
	//blur: gaussian(1, 1, 3);
	//wash-color: yellow;
}

#NormalMatchPlayers
{
	flow-children: down;
	horizontal-align: center;
}

#NormalMatchPlayers					{ width: 2322px; }
#NormalMatchPlayers.PermanentBuffs1 { width: 2430px; }
#NormalMatchPlayers.PermanentBuffs2 { width: 2430px; }
#NormalMatchPlayers.PermanentBuffs3 { width: 2480px; }
#NormalMatchPlayers.PermanentBuffs4 { width: 2530px; }
#NormalMatchPlayers.PermanentBuffs5 { width: 2590px; }

.GameModeAbilityDraft #NormalMatchPlayers				  { width: 1944px; }
.GameModeAbilityDraft #NormalMatchPlayers.PermanentBuffs1 { width: 1952px; }
.GameModeAbilityDraft #NormalMatchPlayers.PermanentBuffs2 { width: 1952px; }
.GameModeAbilityDraft #NormalMatchPlayers.PermanentBuffs3 { width: 2002px; }
.GameModeAbilityDraft #NormalMatchPlayers.PermanentBuffs4 { width: 2052px; }
.GameModeAbilityDraft #NormalMatchPlayers.PermanentBuffs5 { width: 2102px; }

.ShowMMRLegend #NormalMatchPlayers					{ width: 1840px; }
.ShowMMRLegend #NormalMatchPlayers.PermanentBuffs1	{ width: 1948px; }
.ShowMMRLegend #NormalMatchPlayers.PermanentBuffs2	{ width: 1948px; }
.ShowMMRLegend #NormalMatchPlayers.PermanentBuffs3	{ width: 1998px; }
.ShowMMRLegend #NormalMatchPlayers.PermanentBuffs4	{ width: 2048px; }
.ShowMMRLegend #NormalMatchPlayers.PermanentBuffs5	{ width: 2098px; }

#RightColumn
{
	width: 360px;
	height: 100%;
	flow-children: down;
}

#ContainerLeave
{
	background-color: #000000B7;
	height: 100px;
	width: 100%;
	margin-left: 20px;
}

#LeaveButton
{
	horizontal-align: center;
	vertical-align: center;
	width: 200px;
}

#LeaveButton Label
{
	margin-top: 0px;
	horizontal-align: center;
	vertical-align: center;
}

/* Team Name/Logo */
Panel.TeamIdentificationRow
{
	flow-children: right;
	visibility: collapse;
}

Panel.TeamIdentificationRow Label
{
	vertical-align: middle;
}

#2_TeamLogoDefault
{
	background-image: url("s2r://panorama/images/team_icons/radiant_png.vtex");
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.RadiantHasCustomLogo #2_TeamLogoDefault
{
	visibility: collapse;
}

.TeamLogo
{
	visibility: collapse;
}

.HasCustomLogo .TeamLogo
{
	visibility: visible;
}

.LobbyTeamIconDefault
{
	margin-top: 5px;
	width: 46px;
	height: 46px;
	margin-right: 10px;
	border: 1px solid black;
	vertical-align: middle;
	margin-left: 16px;
	box-shadow: inset 3px 3px 6px 6px #000000dd;
	opacity: 1;
	transition-property: opacity, wash-color;
	transition-duration: .4s;
}

.RadiantHasCustomLogo .OverviewUGCTeamLogo
{
	visibility: visible;
	width: 60px;
	height: 60px;
	margin-right: 5px;
	margin-left: 5px;
}

.TeamName.StatRowHeight
{
	padding-top: 1px;
}

.LobbyTeamIcon
{
	margin-left: 6px;
	margin-top: 8px;
	width: 44px;
	height: 44px;
	margin-top: 10px;
	margin-left: 15px;
	margin-right: 10px;
	opacity: 1;
	transition-property: opacity, wash-color;
	transition-duration: .4s;
}


.GraphPlayerNetWorth .LobbyTeamIcon,
.GraphPlayerLevel .LobbyTeamIcon
{
	opacity: 0;
}

.TeamIdentificationRow Label
{
	font-size: 20px;
	font-weight: bold;
	/* letter-spacing: 1px; */
}

#TeamName
{
	text-shadow: 0px 0px 6px 1.0 #9BE40C8F;
}

#3_TeamName
{
	text-shadow: 0px 0px 6px 1.0 #E74D088F;
}


/* Player Row Legend */

Panel.PlayerRowLegend
{
	width: 100%;
	flow-children: right;
	background-color: #0d1214ff;
	background-color: transparent;
	border-color: transparent;
	padding-right: 32px;
}

.PlayerRowLegendContainer
{
	flow-children: right;
	vertical-align: bottom;
}

.PlayerRowLegendContainer Label
{
	max-height: 32px;
	text-overflow: shrink;
}

.PlayerRowLegend Label
{
	text-transform: uppercase;
	font-size: 18px;
	font-weight: thin;

	color: #768e8dff;
	tooltip-position: top;
	tooltip-body-position: 75%;
}

.GoldIcon
{
	background-image: url("s2r://panorama/images/hud/icon_gold_psd.vtex");
	background-size: 100% 100%;
	width: 24px;
	height: 24px;
}

.CampsStackedIcon
{
	background-image: url("s2r://panorama/images/hud/icon_camps_stacked_psd.vtex");
	background-size: 100% 100%;
	width: 24px;
	height: 24px;
}

#OverviewStats .GoldIcon
{
	pre-transform-scale2d: .5;
	margin-right: -3px;
	opacity: .6;
}

#BasicStats .GoldIcon
{
	pre-transform-scale2d: 0.8;
	margin-right: 2px;
	opacity: 1;
	margin-top: 3px;
}

.KillMatrixLegend .GoldIcon
{
	color: #C48103;
	horizontal-align: right;

	vertical-align: bottom;
	margin-bottom: 4px;

	tooltip-position: top;
	tooltip-body-position: 50% 50%;
}

.SupportItemsLegend .GoldIcon
{
	margin-right: 65px;
}

.SupportItemsLegend .CampsStackedIcon
{
	wash-color: #C48123;
	horizontal-align: right;

	vertical-align: bottom;
	margin-bottom: 4px;

	tooltip-position: top;
	tooltip-body-position: 50% 50%;
	margin-right: 5px;
}

.PlayerRowLegend .LegendKills
{
	text-align: center;
}

.PlayerRowLegend .LegendDeaths
{
	text-align: center;
}

.PlayerRowLegend .LegendAssists
{
	text-align: center;
}

.PlayerRowLegend .LegendItems
{
}

.PlayerRowLegend .LegendGold
{
	text-align: right;
	horizontal-align: right;
	color: #C48103;
}

.PlayerRowLegend .LegendLastHits
{
	text-align: right;
	tooltip-arrow-position: 75% 50%;
}

.PlayerRowLegend .LegendDenies
{
	text-align: left;
	tooltip-arrow-position: 35% 50%;
}

.PlayerRowLegend .LegendGoldPerMin
{
	text-align: right;
	tooltip-arrow-position: 70% 50%;
	color: #C48103;
}

.PlayerRowLegend .LegendXPPerMin
{
	text-align: right;
	tooltip-arrow-position: 65% 50%;
}

.PlayerRowLegend .LegendTalentTree
{
	text-align: center;
}

.PlayerRowLegend #MMRChange
{
	text-align: right;
	tooltip-arrow-position: 65% 50%;
}

.MMRChangePositive .MMRChange
{
	color: #74b14a;
}

.MMRChangeNegative .MMRChange
{
	color: #d84535;
}

.PlayerRowLegend .LegendHeroHealing
{
	text-align: right;
	tooltip-arrow-position: 65% 50%;
}

.PlayerRowLegend .LegendMMRChange
{
	text-align: right;
	tooltip-arrow-position: 25% 50%;
}

/* Player Row */

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

Panel.PlayerRow
{
	width: 100%;
	flow-children: right;
	//padding-left: 64px;
}

Panel.PlayerRow Label, Panel.PlayerRow DOTAHeroImage
{
	margin-bottom: 0px;
	vertical-align: middle;
	text-align: center;
	font-size: 18px;
}

/* Panel.PlayerRow DOTATalentDisplay
{
	vertical-align: middle;
} */

#HeroIcon,
#Player
{
	visibility: collapse;
}

#PlayerRowLegend
{
	margin-left: 406px;
}

.PlayerRowContainer
{
	flow-children: right;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	background-color: #00000077;
}

.StatRowHeight .PlayerRowContainer {
	height: 100%;
}

#NormalMatchPlayers .PlayerRowContainer
{
	padding-left: 406px;
	padding-right: 28px;
}


DOTAPostGameSupportItemsRow .PlayerRowContainer
{
	width: 100%;
	padding-right: 16px;
	padding-left: 16px;
}




Panel.PlayerRow Panel#Player
{
	width: 195px;
	flow-children: right;
}

Panel.PlayerRow Panel#Player #AvatarImage
{
	margin-top: 2px;
	margin-left: 4px;
	margin-right: 4px;
	height: 24px;
	width: 24px;
}

Panel.PlayerRow Panel#Player Label.PlayerName
{
	white-space: nowrap;
	width: 155px;
	color: #a6bebdff;
}

Panel.PlayerRow Panel#Player:hover Label.PlayerName
{
	color: white;
}

Panel.PlayerRow Panel#Hero
{
	width: 200px;
	flow-children: right;
	visibility: collapse;
}


Panel.PlayerRow Panel#Hero #HeroIcon
{
	height: 20px;
	width: height-percentage( 177.78% );
	margin-top: 5px;
	margin-right: 4px;
}

Panel.PlayerRow Panel#Hero Label.HeroName
{
	white-space: nowrap;
	width: 157px;
	color: #a6bebdff;
}

Panel.PlayerRow Panel#Hero:hover Label.HeroName
{
	color: white;
}

Panel.PlayerRow Label.Level
{
	text-align: center;
	width: 52px;
}

Panel.PlayerRow Label.Deaths,
Panel.PlayerRow Label.Assists
{
	text-align: center;
	font-size: 26px;
	color: #666C66;
}

Panel.PlayerRow Label.Kills
{
	text-align: center;
	font-size: 26px;
	color: white;
}



Panel.PlayerRow Label.Gold
{
	text-align: right;
	color: #B18E0A;
}


Panel.PlayerRow Label.NetWorth
{
	text-align: right;
	color: #E7BA01FF;
	font-size: 22px;
	text-overflow: shrink;
	text-align: center;
}

Panel.PlayerRow Label.LastHits
{
	text-align: right;
}

Panel.PlayerRow Label.Denies
{
	text-align: left;
}

Panel.PlayerRow Label.GoldPerMin
{
	text-align: right;
	color: #E7BA01;
	text-overflow: shrink;
}

Panel.PlayerRow Label.XPPerMin,
Panel.PlayerRow Label.HeroDamage,
Panel.PlayerRow Label.HeroHealing,
Panel.PlayerRow Label.MMRChange
{
	text-align: center;
}

Panel.PlayerRow Label.TowerDamage
{
	text-align: right;
}

DOTAItemImage.ItemIcon
{
	vertical-align: middle;
	width: 53px;
	height: 39px;
	margin-left: 2px;
	margin-right: 2px;
	tooltip-position: right;
	tooltip-body-position: 3%;
	background-color: #00000066;
	border: 1px solid black;
}

.ItemIcon.Empty
{
	border: 2px solid black;
}

DOTAAbilityImage.ADAbilityIcon
{
	vertical-align: middle;
	width: 53px;
	height: 53px;
	margin-left: 2px;
	margin-right: 2px;
	tooltip-position: right;
	tooltip-body-position: 3%;
	background-color: #00000066;
	border: 1px solid black;
}

#EventGameOverview
{
	flow-children: down;
	height: 100%;
	horizontal-align: center;
	width: 1040px;
}

#CustomGameOverview
{
	flow-children: down;
	height: 100%;
	horizontal-align: center;
	width: 1040px;
}

#CustomGameOverviewHeader
{
	margin-top: 20px;
	flow-children: right;
	horizontal-align: center;
}

#CustomGameName
{
	font-size: 50px;
	text-transform: uppercase;
}

.CustomGameField
{
	flow-children: down;
	margin-top: 10px;
	margin-left: 30px;
}

.CustomGameField .DetailsHeaderLabel
{
	text-transform: uppercase;
	font-size: 18px;
}
.CustomGameField Label
{
	text-align: right;
	horizontal-align: right;
}

#CustomGameOverview .MatchInfo
{
	margin-top: 30px;
	margin-bottom: 30px;
}

/* Custom Games Players */
#CustomGameMatchPlayers
{
	horizontal-align: center;
	flow-children: down;
	width: 1040px;
	padding-top: 10px;
}

Panel.CustomGameMatchTwoTeams
{
	padding-top: 10px;
	width: 100%;
	flow-children: right;
	padding-left: 0px;
}

Panel.CustomGameMatchTeam
{
	flow-children: down;
	width: 490px;
	margin: 5px 0px 5px 20px;
	horizontal-align: center;
	box-shadow: 0px 0px 5px #000000;
}

Panel.CustomGameMatchTeam.Left
{
	margin-left: 0px;
}

Panel.CustomGameMatchTeam.Winner
{
	//box-shadow: 0px 0px 5px #00a72f3f;
}

/* Custom Game Player Row Legend */

Panel.CustomGamePlayerRowLegend
{
	width: 490px;
	flow-children: right;
	padding-top: 4px;
	padding-bottom: 2px;
	background-color: #0d1214ff;
}

Panel.CustomGamePlayerRowLegend Label, Panel.CustomGamePlayerRowLegend Image
{
	text-transform: uppercase;
	font-size: 16px;
	color: #768e8dff;
	tooltip-position: top;
	tooltip-body-position: 75%;
}

Panel.CustomGamePlayerRowLegend Image.LegendWinner
{
	width: 16px;
	height: 16px;
	margin-top: 1px;
	margin-left: 8px;
	margin-right: 10px;
	wash-color: #00a72fcf;
	opacity: 0.0;
}

Panel.CustomGameMatchTeam.Winner Panel.CustomGamePlayerRowLegend Image.LegendWinner
{
	opacity: 1.0;
}

Panel.CustomGamePlayerRowLegend Label.LegendPlayer
{
	width: 132px;
}

Panel.CustomGamePlayerRowLegend Label.LegendLevel
{
	width: 60px;
	padding-right: 10px;
	text-align: right;
}

Panel.CustomGamePlayerRowLegend Label.LegendHero
{
	padding-left: 40px;
	width: 165px;
}

Panel.CustomGamePlayerRowLegend Label.LegendKills
{
	text-align: center;
	width: 30px;
}

Panel.CustomGamePlayerRowLegend Label.LegendDeaths
{
	text-align: center;
	width: 30px;
}

Panel.CustomGamePlayerRowLegend Label.LegendAssists
{
	text-align: center;
	width: 30px;
}


/* Custom Game Player Row */

Panel.CustomGamePlayerRow
{
	background-color: #0000009a;
	width: 490px;
	flow-children: right;
	padding-top: 2px;
	padding-bottom: 2px;
}

Panel.CustomGamePlayerRow Label, Panel.CustomGamePlayerRow DOTAHeroImage
{
	margin-top: 3px;
	margin-bottom: 3px;
	vertical-align: middle;
	font-size: 18px;
}

Panel.CustomGamePlayerRow Panel#Player
{
	width: 171px;
	flow-children: right;
	visibility: visible;
}

Panel.CustomGamePlayerRow Panel#Player #AvatarImage
{
	margin-left: 4px;
	height: 30px;
	width: height-percentage( 100% );
}

Panel.CustomGamePlayerRow Panel#Player Label.PlayerName
{
	white-space: nowrap;
	width: 140px;
	color: #a6bebdff;
	margin-left: 2px;
}

Panel.CustomGamePlayerRow Panel#Player:hover Label.PlayerName
{
	color: white;
}

Panel.CustomGamePlayerRow Label.Level
{
	width: 55px;
	padding-right: 11px;
	text-align: right;
}

Panel.CustomGamePlayerRow Panel#Hero
{
	width: 166px;
	flow-children: right;
}

Panel.CustomGamePlayerRow Panel#Hero #HeroIcon
{
	height: 20px;
	width: height-percentage( 177.78% );
	margin-top: 5px;
	margin-right: 4px;
	visibility: visible;
}

Panel.CustomGamePlayerRow Panel#Hero Label.HeroName
{
	white-space: nowrap;
	width: 123px;
	color: #a6bebdff;
}

Panel.CustomGamePlayerRow Panel#Hero:hover Label.HeroName
{
	color: white;
}

Panel.CustomGamePlayerRow Label.Kills,
Panel.CustomGamePlayerRow Label.Deaths,
Panel.CustomGamePlayerRow Label.Assists
{
	width: 30px;
	text-align: center;
}


/* Replays */
.ReplayExistence
{
	//margin-top: 40px;
	width: fit-children;
	flow-children: right;
	vertical-align: bottom;

	visibility: collapse;

	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 0.32s;

	horizontal-align: center;
}

.ReplayExistence Button
{
	horizontal-align: right;
	margin-left: 30px;
	margin-right: 30px;
}

.ReplayExistence Button.BlueButton
{
	margin-top: 0px;
	margin-bottom: 0px;
	height: fit-children;
}

.ReplayExistence Label
{
	color: #2090DA;
	margin-top: 2px;
	padding-bottom: 2px;
	vertical-align: center;
	horizontal-align: right;
	font-size: 20px;
//	letter-spacing: 2px;
}

#WatchReplayHighlightsButton
{
	visibility: collapse;
}

DOTAPostGame.ReplayExistenceUnknown #ReplayExistenceUnknown,
DOTAPostGame.ReplayExistenceCDNFound #ReplayExistenceCDNFound,
DOTAPostGame.ReplayExistenceDownloading #ReplayExistenceDownloading,
DOTAPostGame.ReplayExistenceDecompressing #ReplayExistenceDecompressing,
DOTAPostGame.ReplayExistenceError #ReplayExistenceError,
DOTAPostGame.ReplayExistenceDiskFound #ReplayExistenceDiskFound,
DOTAPostGame.ReplayExistenceWrongEngine #ReplayExistenceWrongEngine,
DOTAPostGame.ReplayExistenceNotExpected #ReplayExistenceNotExpected
{
	visibility: visible;
}

#ReplayExistenceRequestedNotification Label
{
	font-size: 18px;
//	letter-spacing: 2px;
	text-overflow: shrink;
}

#ReplayExistenceCDNNotFound,
#ReplayExistenceRequestedNotification
{
	visibility: collapse;
}

DOTAPostGame.ReplayExistenceCDNNotFound #ReplayExistenceCDNNotFound,
DOTAPostGame.ReplayExistenceRequestedNotification #ReplayExistenceRequestedNotification
{
	visibility: visible;
	opacity: 1;
}

#ReplayExistenceDownloading,
#ReplayExistenceDecompressing
{
	flow-children: down;
}

.MatchDetailsProgress
{
	width: 400px;
	height: 7px;
	border: 1px solid black;
}

.MatchDetailsProgress .ProgressBarLeft
{
	background-color: #2090DA;
}

#LeagueImage
{
	height: 75px;
	width: 205px;
	tooltip-position: top;
	tooltip-body-position: 50% 50%;
	vertical-align: middle;

	visibility: collapse;

	transition-property: brightness;
	transition-duration: 0.2s;
}
.HasLeague #LeagueImage
{
	visibility: visible;
}
#LeagueImage:hover
{
	brightness: 2.0;
}
#LeagueImage:active
{
	brightness: 1.5;
}

.MatchDetailsLabel
{
	color: #355872;
}

.MatchDetailsValue
{
	color: #5785a8;
}

.AverageQueueTimeMedium .AverageQueueTime.MatchDetailsValue
{
	color: #b6883a;
}

.AverageQueueTimeHigh .AverageQueueTime.MatchDetailsValue
{
	color: #990000;
}

.MaxQueueTimeMedium .MaxQueueTime.MatchDetailsValue
{
	color: #b6883a;
}

.MaxQueueTimeHigh .MaxQueueTime.MatchDetailsValue
{
	color: #990000;
}

.MediumBadBehavior .BehaviorScore.MatchDetailsValue
{
	color: #b6883a;
}

.HighBadBehavior .BehaviorScore.MatchDetailsValue
{
	color: #990000;
}

.MatchDetailsLink Label
{
	color: #546C7F;
	text-decoration: underline;
}
.MatchDetailsLink:hover Label
{
	color: white;
}

.MatchDetailsCategory
{
	flow-children: down;
	margin-left: 24px;
	vertical-align: bottom;
}

#MatchIdentity
{
	flow-children: down;
	vertical-align: bottom;
}

.HideMatchID #MatchIDContainer
{
	visibility: collapse;
}

#MatchID
{
	margin-left: 4px;
}

#MatchmakingStats
{
	flow-children: down;
	vertical-align: bottom;
	visibility: collapse;
}
.HasMatchmakingStats #MatchmakingStats
{
	visibility: visible;
}

#WeekendTourneyPanel
{
	visibility: collapse;
}
.IsWeekendTourneyMatch #WeekendTourneyPanel
{
	visibility: visible;
}

#ReplayVoteForMVP
{
	visibility: collapse;
}
.MVPEnabled #ReplayVoteForMVP
{
	visibility: visible;
}

/* Guides */
.GuideContainer
{
	vertical-align: bottom;
	horizontal-align: right;
	flow-children: down;
	visibility: collapse;
}

.UsedWorkshopGuide .GuideContainer
{
	visibility: visible;
}

.UsedWorkshopGuide.RightExpanded .GuideContainer
{
	visibility: collapse;
}

.GuideContainer Label
{
	padding-top: 4px;
	text-transform: uppercase;
	vertical-align: center;
}

.GuideName
{
	font-size: 20px;
	horizontal-align: right;
	color: #b6883a;
}

.VotingGroup
{
	horizontal-align: right;
	flow-children: right;
	visibility: collapse;
}

.NeedsToVoteForGuide .VotingGroup
{
    visibility: visible;
}

#VoteUpButton
{
	flow-children: right;
	margin-left: 8px;
	tooltip-position: top;
	tooltip-body-position: 50% 50%;
	tooltip-arrow-position: 50% 50%;
}

#VoteDownButton
{
	flow-children: right;
	margin-left: 4px;
	tooltip-position: top;
	tooltip-body-position: 50% 50%;
	tooltip-arrow-position: 50% 50%;
}

.VoteIcon
{
	width: 24px;
	height: 24px;
	wash-color: #7595B5;
	margin-bottom: 2px;
    margin-right: 3px;
	border-radius: 3px;

	transition-property: wash-color;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

.VoteIconFlipped
{
	transform: scaleX(-1) scaleY(-1);
	margin-top: 2px;
	margin-bottom: 0px;
}

#VoteUpButton:hover .VoteIcon
{
	wash-color: #A4E84A;
}

.VotedYes #VoteUpButton .VoteIcon
{
	wash-color: #A4E84A;
}

#VoteDownButton:hover .VoteIcon
{
	wash-color: #cc4422;
}

.VotedNo #VoteDownButton .VoteIcon
{
	wash-color: #cc4422;
}

#VoteDownButton:active .VoteIcon, #VoteUpButton:active .VoteIcon
{
	background-color: #000000ff;
}

.FavoriteGroup
{
	flow-children: right;
	horizontal-align: right;
}

.NeedsToVoteForGuide .FavoriteGroup
{
	visibility: collapse;
}

ToggleButton#FavoriteStar
{
    margin-left: 8px;
    vertical-align: top;
	width: 24px;
	height: 24px;
    padding: 0px 0px;
    background-image: url("s2r://panorama/images/control_icons/star_favorite_psd.vtex");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    wash-color: #444444;
}

ToggleButton#FavoriteStar:hover
{
	wash-color: #4582ad;
}

ToggleButton#FavoriteStar:selected
{
	background-image: url("s2r://panorama/images/control_icons/star_favorite_selected_psd.vtex");
	wash-color: #65b9f5;
}

ToggleButton#FavoriteStar:selected:hover
{
	wash-color: #7ee6ff;
}

// hide parts of the toggle button we don't want
ToggleButton#FavoriteStar .TickBox { visibility: collapse; }
ToggleButton#FavoriteStar .Label { visibility: collapse; }

/* Stats Tab */

#DetailsAbilities
{
	flow-children: down;
	width: 1482px;
	height: 100%;
	margin-left: 64px;
	padding-right: 224px;

	visibility: collapse;
}

.HasAbilities #DetailsAbilities
{
	visibility: visible;
}

#AbilityUpgradesRowLegendContainer
{
	flow-children: right;
	vertical-align: bottom;
	margin-left: 4px;
	tooltip-position: top;
	tooltip-body-position: 50%;
}

Panel.AbilityUpgradesRowLegend
{

	background-color: transparent;
	border-color: transparent;
	width: 100%;
	vertical-align: bottom;
}

.AbilityUpgradesRowLegend Label
{
	text-transform: uppercase;
	font-size: 18px;
	color: #768E8D;
}

.AbilityUpgradesRowLegend Label.AbilityUpgradeTitle
{
	width: 46px;
	margin-left: 4px;
	margin-right: 11px;
	visibility: collapse;
}

.AbilityUpgradesRowLegend .LegendLevelNumber
{
	text-align: center;
	width: 50px;
}

.AbilityUpgradesRow
{
	background-color: #0000009a;
	width: 100%;
	flow-children: right;
	height: 28px;
	padding-top: 0px;
	padding-bottom: 2px;
}

.AbilityUpgradesRow.StatRowHeight
{
	height: 54px;
	margin-bottom: 6px;
}

.AbilityUpgradesRow .Player
{
	width: 180px;
	flow-children: right;
	margin-right: 4px;
}

.AbilityUpgradesRow DOTAAvatarImage
{
	margin-top: 2px;
	margin-left: 4px;
	margin-right: 4px;
	height: 24px;
	width: 24px;
}

.AbilityUpgradesRow DOTAHeroImage
{
	height: 20px;
	width: height-percentage( 177.78% );
	margin-top: 5px;
	margin-right: 17px;

}

.AbilityUpgradesRow DOTAAbilityImage
{
	width: 42px;
	height: 42px;
	vertical-align: middle;
	margin-left: 8px;
	saturation: .65;
	wash-color: #00000085;
	border: 1px solid black;
	margin-top: 5px;
}

.AbilityUpgradesRow .EmptyAbilityUpgrade
{
	brightness: 2.0;
}

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

Panel.AbilityUpgradesRow .Player Label.PlayerName
{
	white-space: nowrap;
	width: 155px;
	color: #a6bebdff;
	margin-top: 3px;
	margin-bottom: 3px;
	vertical-align: middle;
	font-size: 18px;

}

Panel.AbilityUpgradesRow .Player:hover Label.PlayerName
{
	color: white;
}

DOTAAbilityImage.AbilityIsUltimate
{
}

DOTAAbilityImage.AbilityMaxLevel
{
	saturation: 1;
	wash-color: #00000000;
	border: 1px solid #6CABAD32;
}

DOTAAbilityImage.AbilityMaxLevel.AbilityIsUltimate
{

}


/* Basic Graphs Tab */

#DetailsBasicGraphs
{
	///flow-children: down;

	width: 1392px;
	//width: 100%;
	//margin-right: 264px;
	height: 100%;
	padding: 0px;
	opacity: 0;
	horizontal-align: center;
}

#DetailsBasicGraphs.TabSelected
{
	opacity: 1;
}

.TransitionFade
{
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 0.32s;
}

#DetailsPlayerNetWorthGraphCanvas,
#DetailsPlayerLevelGraphCanvas,
#DetailsBasicGraphsCanvas
{
	margin-top: 55px;
	margin-left: 114px;
	width: 1282px;
	height: 659px;
	opacity: 0;

	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 0.32s;
}

#DetailsPersonalCanvas
{
	margin-left: 114px;
	width: 1282px;
	height: 710px;
	opacity: 0;

	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 0.32s;
}

#DetailsPersonalNoData
{
	width: 600px;
	margin-left: 114px;
	margin-top: 100px;
	horizontal-align: center;
	visibility: collapse;
}

.PersonalGraphDataInvalid #DetailsPersonalNoData
{
	visibility: visible;
}

.AspectRatio16x10 #DetailsPlayerNetWorthGraphCanvas,
.AspectRatio16x10 #DetailsPlayerLevelGraphCanvas,
.AspectRatio16x10 #DetailsBasicGraphsCanvas,
.AspectRatio16x10 #DetailsPersonalCanvas
{
	margin-left: 214px;
}

.AspectRatio4x3 #DetailsPlayerNetWorthGraphCanvas,
.AspectRatio4x3 #DetailsPlayerLevelGraphCanvas,
.AspectRatio4x3 #DetailsBasicGraphsCanvas,
.AspectRatio4x3 #DetailsPersonalCanvas
{
	margin-left: 344px;
}

.AspectRatio16x10 #PlayerItemsGraphContainer
{
	margin-left: 382px;
}

.AspectRatio4x3 #PlayerItemsGraphContainer
{
	margin-left: 366px;
}

.AspectRatio16x10 #DetailsBasicGraphsTopTeam, .AspectRatio16x10 #DetailsBasicGraphsBottomTeam
{
	margin-left: 248px;
}

.AspectRatio4x3 #DetailsBasicGraphsTopTeam, .AspectRatio4x3 #DetailsBasicGraphsBottomTeam
{
	margin-left: 368px;
}

.AspectRatio16x10 #GraphButtonContainer
{
	margin-left: 206px;
}

.AspectRatio4x3 #GraphButtonContainer
{
	margin-left: 336px;
}

.AspectRatio16x10 #GraphButtonContainer .BlueButton
{
	width: 282px;
}

.AspectRatio4x3 #GraphButtonContainer .BlueButton
{
	width: 252px;
}


.GraphTeamNetWorth #DetailsBasicGraphsCanvas
{
	opacity: 1;
}

#PlayerItemsGraphContainer
{
	margin-top: 60px;
	margin-left: 378px;
	//margin-left: 58px;
	padding-right: 96px;
	width: fit-children;
	width: 100%;
	overflow: scroll clip;
	height: 100%;
	border-left: 2px solid #505050;
	opacity: 0;
	//visibility: collapse;

	transition-property: opacity;
	transition-duration: .32s;
}

.GraphsVisible.GraphPlayerItems #PlayerItemsGraphContainer,
.GraphPlayerNetWorth #DetailsPlayerNetWorthGraphCanvas,
.GraphPlayerLevel #DetailsPlayerLevelGraphCanvas
{
	opacity: 1;
}

#DetailsPlayerItemsGraphCanvas
{
	width: 2000px;
	height: 100%;
	//opacity: 1;
	//transition-property: opacity;
	//transition-duration: .32s;
}

.GraphPlayerItems #DetailsPlayerItemsGraphCanvas
{
	//opacity: 1;
}

#PlayerItemsGraphContainer #HorizontalScrollBar
{
	opacity: 1.0;
	margin: 0px;
	height: 8px;
}

#DetailsScoreboardContainer #HorizontalScrollBar
{
	opacity: 1.0;
	height: 8px;
}

.PlayerItemPurchaseTooltipTarget
{
	width: 20px;
	height: 20px;
	background-color: none;

	//border: 1px solid white;

	transform: translateX( -5px ) translateY( -5px );
	tooltip-position: right;
	tooltip-body-position: 3%;
}

.PlayerItemPurchase_ItemNode
{
	flow-children: none;
	margin-left: -15px;
	margin-top: 8px;
	width: 38px;
	height: 58px;
	background-size: cover;
	//wash-color: #16367C;
}

#MultipleItemBG
{
	width: 38px;
	height: 58px;
	background-size: 36px 55px;
	background-repeat: no-repeat;
	background-position: 50%;
	overflow: noclip;
	margin-left: 0px;
	margin-top: -1px;

	z-index: -2;
}

.PlayerItemPurchase_ItemNode.ItemCount2 #MultipleItemBG { background-image: url("s2r://panorama/images/status_icons/stackeditems_1_psd.vtex"); }
.PlayerItemPurchase_ItemNode.ItemCount3 #MultipleItemBG { background-image: url("s2r://panorama/images/status_icons/stackeditems_2_psd.vtex"); }
.PlayerItemPurchase_ItemNode.ItemCount4 #MultipleItemBG { background-image: url("s2r://panorama/images/status_icons/stackeditems_3_psd.vtex"); }

#PlayerRow0 #MultipleItemBG { wash-color: slot0color; }
#PlayerRow1 #MultipleItemBG { wash-color: slot1color; }
#PlayerRow2 #MultipleItemBG { wash-color: slot2color; }
#PlayerRow3 #MultipleItemBG { wash-color: slot3color; }
#PlayerRow4 #MultipleItemBG { wash-color: slot4color; }
#PlayerRow5 #MultipleItemBG { wash-color: slot5color; }
#PlayerRow6 #MultipleItemBG { wash-color: slot6color; }
#PlayerRow7 #MultipleItemBG { wash-color: slot7color; }
#PlayerRow8 #MultipleItemBG { wash-color: slot8color; }
#PlayerRow9 #MultipleItemBG { wash-color: slot9color; }



.PlayerItemPurchase_NodeCountLabel
{
	horizontal-align: center;
	color: white;
}

.XAxisLabel
{
	color: #6E7D87;
	width: 60px;
	text-align: right;
	transform: translateX( -65px ) translateY( -20px );
}

.GraphPlayerItems .XAxisLabel
{
	//height: 100%;
	color: #ffffff;
	transform: translateX( -1px ) translateY( -368px );
	text-align: left;
	border: 0px solid #ffffff11;
	border-left: 2px solid #ffffff11;
	padding-left: 6px;
	padding-top: 2px;
}

.GraphPlayerItems .XAxisLabel.FinalTime
{
	font-weight: bold;
	font-size: 22px;
	background-color: #C7D0E4;
	color: black;
	width: 74px;
	text-align: center;
	padding: 0px;
	padding-top: 2px;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}


.PlayerItemPurchase_ItemImage
{
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid #555687;
	background-color: black;
	pre-transform-scale2d: 0.9;
	horizontal-align: center;

	animation-duration: .81s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;

	transition-property: brightness, pre-transform-scale2d;
	transition-timing-function: ease-in-out;
	transition-duration: 0.1s;
}

.ItemRecipe #ItemImage.PlayerItemPurchase_ItemImage
{
	width: 32px;
	height: 32px;
	margin-top: 3px;
	border-radius: 0px;
	border-width: 0px;
	background-color: none;
}


.PlayerItemPurchase_ItemImage:hover
{
	pre-transform-scale2d: 1;
	brightness: 2;

}


// consumables, DOTA_ITEM_QUALITY_CONSUMABLE
.PlayerItemPurchase_ItemImage.ItemQuality0
{
	visibility: visible;
}

// most components, DOTA_ITEM_QUALITY_PLAIN
.PlayerItemPurchase_ItemImage.ItemQuality1
{
	visibility: visible;
}

.PlayerSlot0 .PlayerItemPurchase_ItemImage { border-color: slot0color; }
.PlayerSlot1 .PlayerItemPurchase_ItemImage { border-color: slot1color; }
.PlayerSlot2 .PlayerItemPurchase_ItemImage { border-color: slot2color; }
.PlayerSlot3 .PlayerItemPurchase_ItemImage { border-color: slot3color; }
.PlayerSlot4 .PlayerItemPurchase_ItemImage { border-color: slot4color; }
.PlayerSlot5 .PlayerItemPurchase_ItemImage { border-color: slot5color; }
.PlayerSlot6 .PlayerItemPurchase_ItemImage { border-color: slot6color; }
.PlayerSlot7 .PlayerItemPurchase_ItemImage { border-color: slot7color; }
.PlayerSlot8 .PlayerItemPurchase_ItemImage { border-color: slot8color; }
.PlayerSlot9 .PlayerItemPurchase_ItemImage { border-color: slot9color; }


.ItemName_item_aegis .PlayerItemPurchase_ItemImage
{
	animation-name: AegisPulse;
	animation-duration: 2s;
	border-width: 4px;
	box-shadow: inset 0px 0px 3px 3px #000000;
}

.ItemName_item_rapier .PlayerItemPurchase_ItemImage
{
	animation-name: RapierPulse;
	animation-timing-function: ease-in-out;
	animation-duration: 1.0s;
	box-shadow: 0px 0px 6px #ffffff;
}



@keyframes 'AegisPulse'
{
	0%
	{
		brightness: 1;

	}


	50%
	{
		brightness: 2;

	}

	100%
	{
		brightness: 1;

	}
}


@keyframes 'RapierPulse'
{
	0%
	{
		brightness: 1;
		box-shadow: 0px 0px 4px #fFBE3B66;
	}


	50%
	{
		brightness: 2;
		box-shadow: 0px 0px 8px #fFBE3Bff;
	}

	100%
	{
		brightness: 1;
		box-shadow: 0px 0px 4px #fFBE3B66;
	}
}




// consumables, DOTA_ITEM_QUALITY_CONSUMABLE
.PlayerItemPurchase_ItemImage.ItemQuality0
{
	visibility: visible;
}

// most components, DOTA_ITEM_QUALITY_PLAIN
.PlayerItemPurchase_ItemImage.ItemQuality1
{
	visibility: visible;
}


.PlayerNetWorthTooltipTarget
{
	//border: 1px solid white;
	tooltip-position: right;
	tooltip-body-position: 3%;

	transition-property: background-color;
	transition-timing-function: ease-in-out;
	transition-duration: 0.0s;
}

.PlayerNetWorthTooltipTarget:hover
{
	background-color: #ffffff04;
}

#GraphButtonContainer
{
	width: 100%;
	flow-children: right;
	margin-left: 106px;
	margin-top: 2px;
	horizontal-align: center;
	vertical-align: top;
}


#PinnedPersonalButtonContainer
{
	width: 100%;
	flow-children: down;
	margin-left: 106px;
	margin-top: 2px;
	horizontal-align: center;
	vertical-align: top;
}

#PinnedPersonalButtonContainer .BlueButton,
#GraphButtonContainer .BlueButton
{
	width: 306px;
	border-color: #4C575F44;
	background-color: #3A444433;
}

#PinnedPersonalButtonContainer .RadioBox
{
	margin-top: 6px;
	margin-left: 8px;
}

#GraphButtonContainer .BlueButton:hover
{
	border-color: #4C575Fff;
	//background-color: #3A444433;
}

#GraphButtonContainer .BlueButton:selected
{
	background-color: #4C575F;
}

#GraphButtonContainer .BlueButton Label
{
	horizontal-align: center;
	margin: 0px;
	margin-top: 4px;
	horizontal-align: center;
	vertical-align: middle;
	text-align: left;
//	letter-spacing: 1px;
	color: #768E8D;
}

#GraphButtonContainer .BlueButton:selected Label
{
	color: #ffffff;
}

#GraphButtonContainer .RadioBox
{
	visibility: collapse;
}

#DetailsBasicGraphsKey
{
	margin-top: 714px;
	flow-children: right;
	horizontal-align: center;
	visibility: collapse;
}

#DetailsPersonalStatKey
{
	margin-top: 700px;
	flow-children: right;
	horizontal-align: center;
	visibility: collapse;
	margin-left: 120px;
	vertical-align: center;
}

.GraphTeamNetWorth #DetailsBasicGraphsKey
{
	visibility: visible;
}

.KeyColorBox
{
	vertical-align: middle;
	margin-left: 5px;
	margin-right: 5px;
	width: 34px;
	height: 3px;
}

#ExperienceKeyColorBox
{
	background-color: #ACC9EDFF;
}

#NetWorthKeyColorBox
{
	background-color: #FFD455FF;
}

#WinProbabilityKeyColorBox
{
	background-color: #6eb663FF;
}

#WinProbability
{
	flow-children: right;
	visibility: collapse;
}

.HasWinProbability #WinProbability
{
	visibility: visible;
}

#DetailsPersonalStatKey Label,
#DetailsBasicGraphsKey Label
{
	color: #697881;
	margin-top: 4px;
	font-size: 16px;
//	letter-spacing: 1px;
	text-align: right;
	text-transform: uppercase;
	vertical-align: center;
	margin-right: 30px;
}

#GraphLabels
{
	width: 100%;
	height: 700px;
}

.BasicGraphs.GraphTeamNetWorth #GraphLabels
{
	margin-top: 55px;
}

.GraphYAxisLabel
{
	width: 100%;
	color: #6E7D87;
	text-align: right;
	visibility: collapse;
	padding-top: 1px;
	padding-bottom: -2px;
	margin-right: 6px;
	background-color: #00000033;

}

.PersonalGraphs .GraphYAxisLabel
{
	width: 1272px;
}

.GraphYAxisLabel.LineVisible
{
	visibility: visible;
}

#DetailsBasicGraphsTopTeam, #DetailsBasicGraphsBottomTeam
{
	font-size: 20px;
	margin-left: 7px;
	font-weight: bold;
//	letter-spacing: 1px;
	margin-left: 148px;
}

.GraphTeamName
{
	opacity: 1;
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 0.32s;
}

.GraphPlayerNetWorth .GraphTeamName,
.GraphPlayerLevel .GraphTeamName,
.GraphPlayerItems .GraphTeamName
{
	opacity: 0;
}



#DetailsBasicGraphsTopTeam
{
	color: white;
	text-shadow: 0px 0px 6px 1.0 #9BE40C8F;
	margin-top: 87px;
	font-size: 26px;
//	letter-spacing: 1px;
	font-weight: thin;
}

#DetailsBasicGraphsBottomTeam
{
	color: white;
	text-shadow: 0px 0px 6px 1.0 #E74D088F;
	margin-top: 640px;
	font-size: 26px;
//	letter-spacing: 1px;
	font-weight: thin;
}

/* Voting */

#VotingContainer
{
	margin-top: 14px;
	flow-children: right;
	margin-bottom: 10px;
}

Image.VotingButtonNegative, Image.VotingButtonPositive
{
	width: height-percentage( 87.5% );
	height: 24px;
	wash-color: #000000aa;
	margin-left: 2px;
}

Panel.VotingButtonsContainer
{
	height: 100%;
	flow-children: right;
	visibility: collapse;
}

DOTAPostGame.LocalVoteNone #VotingButtonsLocalNone
{
	visibility: visible;
}

DOTAPostGame.LocalVotePositive #VotingButtonsLocalVoted,
DOTAPostGame.LocalVoteNegative #VotingButtonsLocalVoted
{
	visibility: visible;
}

Panel.VotingButtonsContainer Image
{
	background-size: 87.5% 87.5%;
	background-repeat: no-repeat;
}

Image.VotingButtonPositive
{
	background-image: url( 'file://{images}/icon_thumb_up.png' );
}

Image.VotingButtonNegative
{
	background-image: url( 'file://{images}/icon_thumb_down.png' );
}

DOTAPostGame.LocalVotePositive Image.VotingButtonPositive
{
	wash-color: #00FF00aa;
}

DOTAPostGame.LocalVoteNegative Image.VotingButtonNegative
{
	wash-color: #FF0000aa;
}

#VotingButtonsLocalNone Image.VotingButtonPositive:hover
{
	wash-color: #768e8daa;
}

#VotingButtonsLocalNone Image.VotingButtonNegative:hover
{
	wash-color: #768e8daa;
}

#VotingBlock
{
	margin-right: 5px;
	flow-children: down;
}

#VotingBarContainer
{
	width: 270px;
	height: 10px;
	background-color: #434343;
	flow-children: right;
	margin-top: 7px;
}

#VotingBarPositive
{
	background-color: #2ee52e;
	height: 100%;
	width: 67%;
}

#VotingBarNegative
{
	background-color: #b61e0e;
	height: 100%;
	width: 33%;
}

#VotingText
{
	padding-top: 2px;
	font-size: 14px;
	text-transform: uppercase;
}

/* Comments */

#CommentsFlyout
{
	horizontal-align: right;
	height: 100%;
	flow-children: right;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000 ), color-stop( 0.1, #00000000 ), to( #00000000 ) );

	transform: translateX( 420px );

	transition-property: transform, background-color;
	transition-duration: 0.4s;
}

.RightExpanded #CommentsFlyout
{
	transform: translateX( 460px );
}

/* Don't show match discussion for the real post-game, as it's more for specators and it's confusing to
   have both that and chat. Also don't show it for solo bot matches. */
.ShowingJustFinishedMatch #CommentsFlyout,
.IsSoloBotMatch #CommentsFlyout
{
	visibility: collapse;
}

#CommentsFlyout.CommentsVisible
{
	transform: none;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000 ), color-stop( 0.1, #000000ff ), to( #000000ff ) );
}

@define commentsBorderColor: #060606;

#CommentsFlyoutTab
{
	width: 40px;
	height: 300px;
	overflow: clip;
	background-color: #23262A;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	border-left: 1px solid commentsBorderColor;
	border-top: 1px solid commentsBorderColor;
	border-bottom: 1px solid commentsBorderColor;
	border-right: 0px solid commentsBorderColor;
	vertical-align: middle;
}

#CommentsFlyoutTab:hover
{
	background-color: #262B35;
}

#CommentsFlyoutTab:hover #CommentsHeader
{
	color: white;
}

#CommentsFlyoutTab:hover #CommentIcon
{
	wash-color: white;
}



#CommentsHeader
{
	text-align: center;
	font-size: 18px;
//	letter-spacing: 2px;
	text-transform: uppercase;
	margin-left: 4px;
	width: 300px;
	height: 35px;
	transform-origin: 0px 300px;
	transform: translateY( 300px ) rotateZ( -90deg ) translateX( 5px );
	color: #546C7F;
}

#ContainerComments
{
	horizontal-align: right;
	flow-children: down;
	padding: 16px;
	background-color: #23262A;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #23262A ), to( #1B1D21 ) );

	width: 420px;
	height: 100%;
	border-top: 1px solid commentsBorderColor;
	border-bottom: 1px solid commentsBorderColor;
}



#CommentTextEntryContainer
{
	margin-top: 15px;
	width: 100%;
	flow-children: right;
}

#CommentTextEntryAvatarImage
{
	width: 34px;
	height: 34px;
	margin-right: 5px;
}

#CommentsStatusLoading,
#CommentsStatusNone
{
	visibility: collapse;
	visibility: collapse;

	text-align: center;
	width: 100%;
	margin-top: 230px;
	color: #546C7F;
}

DOTAPostGame.CommentsStatusLoading #CommentsStatusLoading
{
	visibility: visible;
}

DOTAPostGame.CommentsStatusNone #CommentsStatusNone
{
	visibility: visible;
}

#Comments
{
	margin-top: 10px;
	width: 100%;
	flow-children: down;
	overflow: clip scroll;
	//padding-right: 20px;
	padding-bottom: 16px;
}

#CommentTextEntry
{
	width: 100%;
	height: 34px;
}

#PlaceholderText
{
	height: 100%;
	padding-top: 2px;
}

#CommentsFlyout Panel.Comment
{
	width: 100%;
	margin-top: 15px;
	flow-children: down;
	border-bottom: 1px solid #595B5E55;
}

#CommentAvatarImage
{
	width: 34px;
	height: 34px;
	margin-right: 5px;
	margin-top: 3px;
}

Panel.CommentWho
{
	flow-children: right;
}

Panel.CommentWhoWords
{
	flow-children: down;
}

Label.CommentPersonaName
{
	font-size: 18px;
	color: #a6bebdff;
}

Label.CommentPersonaName:hover
{
	color: #ffffffff;
}

Label.CommentTimestamp
{
	font-size: 12px;
	color: #858d82ff;
}

Label.CommentText
{
	margin-top: 10px;
	margin-bottom: 15px;
	font-size: 16px;
	width: 320px;
}

#ContainerCenter
{
	width: 100%;
	height: 100%;
	background-color: #000000B7;
	//overflow: scroll clip;
	//flow-children: right;
	horizontal-align: center;
//	opacity-mask: url("s2r://panorama/images/masks/armory_opacity_mask_png.vtex");
}

.PlusPerPlayerVisible #ContainerCenter,
.PersonalGraphsVisible #ContainerCenter
{
	border-top: 2px solid #8a6936;
	background-color: gradient( linear, 0% 0%, 0% 20%, from( #433620cc ), to( #141b21cc ) );
}


#DetailsScoreboardContainer
{
	width: 100%;
	flow-children: right;
	overflow: scroll clip;
	horizontal-align: center;
	background-color: #000000B7;
}

#ContainerCenter HorizontalScrollBar
{
	margin-left: 352px;
}

#ContainerCenterOld
{
	width: 100%;
	height: 100%;
	horizontal-align: center;

	//visibility: collapse;
}

#DetailsScoreboard
{
	//padding-left: 350px;
	visibility: visible;
}


// Pages

.DetailsPanel
{
	//visibility: collapse;
	width: 1392px;
	width: fit-children;
	height: 100%;
	horizontal-align: center;
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 0.32s;
}

.DetailsPanel.TabSelected
{
	//visibility: visible;
	opacity: 1;
}


#ContainerOverview
{
	visibility: visible;
	width: 1040px;
}

// Overview Heroes

#OverviewHeroes
{
	width: 100%;
	height: fit-children;
}

.RightVignette
{
	visibility: collapse;
}

.RightVignette
{
	visibility: collapse;
}

#RightHeroes
{
	horizontal-align: right;
}

#LeftHeroes
{
	horizontal-align: left;
}

.OverviewCoaches
{
	margin-top: 107px;
	visibility: collapse;
	transition-property: opacity;
	transition-duration: 0.3s;
}
.OverviewCoaches.HasCoaches
{
	visibility: visible;
}


.LeftExpanded #LeftCoaches,
.RightExpanded #RightCoaches
{
	opacity: 0.0;
}


#LeftCoaches
{
	horizontal-align: left;
	transform: translateX( 210px );
}
.AspectRatio16x10 #LeftCoaches
{
	transform: translateX( 96px );
}
.AspectRatio4x3 #LeftCoaches
{
	transform: translateX( 24px );
}

#RightCoaches
{
	horizontal-align: right;
	transform: translateX( -210px );
}
.AspectRatio16x10 #RightCoaches
{
	transform: translateX( -96px );
}
.AspectRatio4x3 #RightCoaches
{
	transform: translateX( -23px );
}

.CoachesCarousel
{
	width: 76px;
	margin-top: 24px;
}

.CoachesCarousel DOTAPostGameOverviewCoach
{
	opacity: 0.0;

	transition-property: opacity;
	transition-duration: 0.2s;
}

.CoachesCarousel DOTAPostGameOverviewCoach.Focused
{
	opacity: 1.0;
}

.CoachesCarouselNav
{
	horizontal-align: center;
}

.OverviewHeroTeamContainer
{
	height: 860px;
	width: 50%;
	flow-children: none;
	transition-property: width, transform;
	transition-timing-function: linear;
	transition-duration: 0.32s;
	//transition-delay: 0.32s;
}

#LeftHeroStats
{
	horizontal-align: left;
}

#RightHeroStats
{
	horizontal-align: right;
}



.HeroStats
{
	height: 860px;
	width: 50%;

}

.RadiantSlot0 { transform:  translateX( 292px ); }
.RadiantSlot1 { transform:  translateX( 420px ); }
.RadiantSlot2 { transform:  translateX( 548px ); }
.RadiantSlot3 { transform:  translateX( 676px ); }
.RadiantSlot4 { transform:  translateX( 804px ); }

.DireSlot0 { transform:  translateX( 28px ); }
.DireSlot1 { transform:  translateX( 156px ); }
.DireSlot2 { transform:  translateX( 284px ); }
.DireSlot3 { transform:  translateX( 412px ); }
.DireSlot4 { transform:  translateX( 540px ); }

.AspectRatio16x10 .RadiantSlot0 { transform:  translateX( 178px ); }
.AspectRatio16x10 .RadiantSlot1 { transform:  translateX( 306px ); }
.AspectRatio16x10 .RadiantSlot2 { transform:  translateX( 434px ); }
.AspectRatio16x10 .RadiantSlot3 { transform:  translateX( 562px ); }
.AspectRatio16x10 .RadiantSlot4 { transform:  translateX( 690px ); }

.AspectRatio16x10 .DireSlot0 { transform:  translateX( 48px ); }
.AspectRatio16x10 .DireSlot1 { transform:  translateX( 176px ); }
.AspectRatio16x10 .DireSlot2 { transform:  translateX( 304px ); }
.AspectRatio16x10 .DireSlot3 { transform:  translateX( 432px ); }
.AspectRatio16x10 .DireSlot4 { transform:  translateX( 560px ); }

.AspectRatio4x3 .RadiantSlot0 { transform:  translateX( 50px ); }
.AspectRatio4x3 .RadiantSlot1 { transform:  translateX( 178px ); }
.AspectRatio4x3 .RadiantSlot2 { transform:  translateX( 306px ); }
.AspectRatio4x3 .RadiantSlot3 { transform:  translateX( 434px ); }
.AspectRatio4x3 .RadiantSlot4 { transform:  translateX( 562px ); }

.AspectRatio4x3 .DireSlot0 { transform:  translateX( 48px ); }
.AspectRatio4x3 .DireSlot1 { transform:  translateX( 176px ); }
.AspectRatio4x3 .DireSlot2 { transform:  translateX( 304px ); }
.AspectRatio4x3 .DireSlot3 { transform:  translateX( 432px ); }
.AspectRatio4x3 .DireSlot4 { transform:  translateX( 560px ); }

.AspectRatio4x3 .AnyCoachesInMatch .RadiantSlot0 { transform:  translateX( 102px ); }
.AspectRatio4x3 .AnyCoachesInMatch .RadiantSlot1 { transform:  translateX( 219px ); }
.AspectRatio4x3 .AnyCoachesInMatch .RadiantSlot2 { transform:  translateX( 336px ); }
.AspectRatio4x3 .AnyCoachesInMatch .RadiantSlot3 { transform:  translateX( 453px ); }
.AspectRatio4x3 .AnyCoachesInMatch .RadiantSlot4 { transform:  translateX( 570px ); }

.AspectRatio4x3 .AnyCoachesInMatch .DireSlot0 { transform:  translateX( 31px ); }
.AspectRatio4x3 .AnyCoachesInMatch .DireSlot1 { transform:  translateX( 148px ); }
.AspectRatio4x3 .AnyCoachesInMatch .DireSlot2 { transform:  translateX( 265px ); }
.AspectRatio4x3 .AnyCoachesInMatch .DireSlot3 { transform:  translateX( 382px ); }
.AspectRatio4x3 .AnyCoachesInMatch .DireSlot4 { transform:  translateX( 499px ); }


.RadiantSlot0.Collapsed,
.RadiantSlot1.Collapsed,
.RadiantSlot2.Collapsed,
.RadiantSlot3.Collapsed,
.RadiantSlot4.Collapsed,
.DireSlot0.Collapsed,
.DireSlot1.Collapsed,
.DireSlot2.Collapsed,
.DireSlot3.Collapsed,
.DireSlot4.Collapsed,
.RadiantSlot0.Expanded,
.RadiantSlot1.Expanded,
.RadiantSlot2.Expanded,
.RadiantSlot3.Expanded,
.RadiantSlot4.Expanded,
.DireSlot0.Expanded,
.DireSlot1.Expanded,
.DireSlot2.Expanded,
.DireSlot3.Expanded,
.DireSlot4.Expanded
{
	transform: translateX( 0px );
}

.OverviewHeroContainer
{
	height: 662px;
	width: 128px;
	padding-left: 6px;
	padding-right: 6px;
	horizontal-align: left;
	z-index: 1;

	transition-property:  opacity, width, height, transform, z-index;
	transition-timing-function: ease-in-out, linear;
	transition-duration: HeroTransitionDuration,  HeroTransitionDuration, HeroTransitionDuration, 0s, 0s;
}

.OverviewHeroContainer.RadiantSlot0,
.OverviewHeroContainer.RadiantSlot1,
.OverviewHeroContainer.RadiantSlot2,
.OverviewHeroContainer.RadiantSlot3,
.OverviewHeroContainer.RadiantSlot4,
.OverviewHeroContainer.DireSlot0,
.OverviewHeroContainer.DireSlot1,
.OverviewHeroContainer.DireSlot2,
.OverviewHeroContainer.DireSlot3,
.OverviewHeroContainer.DireSlot4
{
	transition-duration: HeroTransitionDuration,  HeroTransitionDuration, HeroTransitionDuration, HeroTransitionDuration, 0s;
}

.AspectRatio4x3 .AnyCoachesInMatch .OverviewHeroContainer
{
	width: 120px;
}

.HeroCenterContent
{
	transform: translateY(130px);

	width: 100%;

	//height: 600px;
	height: 100%;

	transition-property: width, height, transform;
	transition-timing-function: linear;
	transition-duration: HeroTransitionDuration;
}


.OverviewHeroContainer.HeroNotHovered .OverviewHeroRender
{
	transition-delay:  HeroTransitionDuration;
}

.OverviewHeroContainer.HeroNotHovered.Collapsed .OverviewHeroRender
{
	transition-delay:  0s;
}


.OverviewHeroContainer.Collapsed,
.OverviewHeroContainer.Expanded
{
	width: 960px;
	height: 800px;
	transform:  translateX( 0px );
	z-index: 1;
	transition-duration: HeroTransitionDuration,  HeroTransitionDuration, HeroTransitionDuration, HeroTransitionDuration, HeroTransitionDuration;
}

.OverviewHeroContainer.HeroNotHovered
{
	transition-delay: 0s, HeroTransitionDuration;
	z-index: -1;
}

.OverviewHeroContainer.Collapsed
{
	opacity: 0;
	z-index: -5;
}

.OverviewHeroContainer.HeroNotHovered.Collapsed
{
	transition-duration: HeroTransitionDuration, 0s, 0s, 0s, HeroTransitionDuration;
	transition-delay: 0s, 0s;
}



.AspectRatio16x9 .OverviewHeroContainer.Expanded
{
}

.OverviewHeroContainer.HeroNotHovered .HeroCenterContent
{
	transition-delay: HeroTransitionDuration;
}

.OverviewHeroContainer.HeroNotHovered.Collapsed .HeroCenterContent
{
	transition-duration: 0s;
	transition-delay: 0s;
}

.OverviewHeroContainer.Collapsed .HeroCenterContent,
.OverviewHeroContainer.Expanded .HeroCenterContent
{
	transform: translateY(0px);
}

/*.OverviewHeroContainer.Collapsed .HeroCenterContent #HeroBackground,*/
.OverviewHeroContainer.Expanded .HeroCenterContent #HeroBackground
{
	height: 800px;
	//  height: 900px;
	//  border: 1px solid red;
}

/*.OverviewHeroContainer.Collapsed .HeroCenterContent #HeroBackground
{
	box-shadow: none;
	border: 1px solid transparent;
}
*/

.HeroContainerTeamLogo
{
	opacity: 0;
	width: 200px;
	height: 200px;
	margin-top: 132px;
	pre-transform-scale2d: 2;
	horizontal-align: center;
	blur: gaussian( 1, 1, 1);
	horizontal-align: left;
	margin-left: 150px;
	z-index: -6;

	transition-property: opacity, blur;
	transition-duration: HeroTransitionDuration;
	transition-timing-function: ease-in-out;
}

#RightLargeTeamLogo
{
	margin-right: 150px;
	horizontal-align: right;
}

.LeftExpanded.RadiantHasCustomLogo.LargeRadiantTeamIcons #LeftLargeTeamLogo,
.RightExpanded.DireHasCustomLogo.LargeDireTeamIcons #RightLargeTeamLogo
{
	opacity: 0.05;
	blur: gaussian( 2, 2, 2);
}

#HeroBackground
{
	width: 100%;
	height: 423px;
	border: 1px solid transparent;
	overflow: clip;

	transition-property: border-radius, height, background-color, border;
	transition-duration: HeroTransitionDuration, HeroTransitionDuration, HeroTransitionDuration, .04s;
	transition-timing-function: ease-in-out;
}

.HeroImageOverlay
{
	height: 100px;
	width: 100%;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #00000088 ), color-stop( 0.5, #00000022 ), to( #00000000 ) );

	transition-property: border-radius, background-color;
	transition-duration: .1s;
	transition-timing-function: ease-in-out;
}


.LocalPlayer
{
	animation-duration: .8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

Panel.LocalPlayer .PlayerRowContainer,
Panel.LocalPlayer.AbilityUpgradesRow,
DOTAPostGameKillMatrixRow.LocalPlayer .PlayerRowContainer,
DOTAPostGameSupportItemsRow.LocalPlayer .PlayerRowContainer
{
	background-color: #333333;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #373C3B ), color-stop( 0.4, #505959 ), color-stop( 0.6, #505959 ), to( #2F3535 ) );
}

#DetailsScoreboardContainer.TabSelected Panel.LocalPlayer,
#DetailsScoreboardContainer.TabSelected DOTAPostGameKillMatrixRow.LocalPlayer,
#DetailsScoreboardContainer.TabSelected DOTAPostGameSupportItemsRow.LocalPlayer
{
	animation-name: FadeIn;
}


@keyframes 'FadeIn'
{
	0%
	{
		brightness: 0.2;
	}


	50%
	{
		brightness: 2;
	}

	100%
	{
		brightness: 1;
	}
}



.PlayerName.LocalPlayer
{
	//margin-left: 0px;
	//padding-left: 0px;
}

#LocalPlayerTag
{
	width: 4px;
	background-color: white;
	height: 100%;
	visibility: collapse;
}

.LocalPlayer #LocalPlayerTag
{
	visibility: visible;
	margin-right: 18px;
	box-shadow: 0px 0px 4px #ffffff55;
}

.LocalPlayer .HeroImageOverlay
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #35672066 ), color-stop( 0.3, #35672022 ), to( #35672000 ) );
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #F6F6F644 ), color-stop( 0.3, #F6F6F622 ), to( #F6F6F600 ) );

}

DOTAPostGameOverviewHero.Collapsed .HeroImageOverlay,
DOTAPostGameOverviewHero.Collapsed.LocalPlayer .HeroImageOverlay,
DOTAPostGameOverviewHero.Expanded .HeroImageOverlay,
DOTAPostGameOverviewHero.Expanded.LocalPlayer .HeroImageOverlay
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #00000000 ), color-stop( 0.3, #00000000 ), to( #00000000 ) );
}

.PlayerRow.LocalPlayer Label
{
	text-shadow: 1px 1px 3px 3.0 #000000;
	brightness: 2;
}

.HeroBackgroundImage
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/backgrounds/postgameherobackground_psd.vtex");
	background-size: cover;
	overflow: noclip;
	opacity: 1;
	transition-property: opacity;
	transition-duration: 0.12s;

}

DOTAPostGameOverviewHero.Expanded .HeroBackgroundImage
{
	opacity: 0;
	transition-delay: .36s;
}

DOTAPostGameOverviewHero.HeroNotHovered.Collapsed .HeroBackgroundImage
{
	opacity: 0;
	transition-delay: 0s;
	transition-duration: .36s;
}

DOTAPostGameOverviewHero.HeroNotHovered .HeroBackgroundImage
{
	transition-delay: .36s;
	transition-duration: .1s;
}


#RightHeroes .HeroBackgroundImage
{
	background-image: url("s2r://panorama/images/backgrounds/postgameherobackground_dire_psd.vtex");
	background-position: 100% 0%;
}


.LocalPlayer #HeroBackground
{
	border: 1px solid #A0a0a066;
	border-bottom: 0px solid transparent;
}

.HeroSelectGlow
{
	width: 100%;
	height: 100%;
	opacity: 0;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #70A87A00 ), color-stop( 0.4, #B4FAB6ee ), to( #70A87A99 ) );
	//background-color: red;
	transition-property: opacity;
	transition-duration: 0.10s;
	vertical-align: middle;
}

#RightHeroes .HeroSelectGlow
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #9B513600 ), color-stop( 0.4, #C66756ee), to( #9B513699 ) );
}




.OverviewHeroRender
{
	width: 278px;
	height: 700px;
	transform: translateX( -90px ) translateY( -120px );
	opacity: 0.01; /* hack to make sure that Paint is called which will actually cause it to load */
	pre-transform-scale2d: 1.0;
	opacity-mask: url("s2r://panorama/images/masks/softedge_circle_png.vtex")0;

	transition-property: brightness, opacity, width, height, transform, pre-transform-scale2d, opacity-mask ;
	transition-duration: 0.10s, 1s, 0.6s;
	transition-timing-function: linear;

}


.Expanded DOTAPostGameOverviewHero.Collapsed .OverviewHeroRender,
.Expanded DOTAPostGameOverviewHero.Expanded .OverviewHeroRender
{
	width: 900px;
	height: 900px;
	horizontal-align: left;
	transform: translateX(-64px) translateY(-100px);
	opacity-mask: url("s2r://panorama/images/masks/softedge_circle_png.vtex")1;
	transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0.25s;
}

.AspectRatio16x10 .Expanded DOTAPostGameOverviewHero.Collapsed .OverviewHeroRender,
.AspectRatio16x10 .Expanded DOTAPostGameOverviewHero.Expanded .OverviewHeroRender
{
	transform: translateX(-164px) translateY(-100px);
}

.AspectRatio16x10 #RightHeroes.Expanded DOTAPostGameOverviewHero.Collapsed .OverviewHeroRender,
.AspectRatio16x10 #RightHeroes.Expanded DOTAPostGameOverviewHero.Expanded .OverviewHeroRender
{
	transform: translateX(128px) translateY(-100px);
}

.AspectRatio4x3 .Expanded DOTAPostGameOverviewHero.Collapsed .OverviewHeroRender,
.AspectRatio4x3 .Expanded DOTAPostGameOverviewHero.Expanded .OverviewHeroRender
{
	transform: translateX(-264px) translateY(-100px);
}

.AspectRatio4x3 #RightHeroes.Expanded DOTAPostGameOverviewHero.Collapsed .OverviewHeroRender,
.AspectRatio4x3 #RightHeroes.Expanded DOTAPostGameOverviewHero.Expanded .OverviewHeroRender
{
	transform: translateX(64px) translateY(-100px);
}

.Expanded DOTAPostGameOverviewHero.Collapsed .OverviewHeroRender
{
	transition-duration: 0s;
}

.OverviewHeroRender.SceneLoaded
{
	opacity: 1;
	pre-transform-scale2d: 1;
	transition-duration: 0.10s, 0.3s, HeroTransitionDuration, HeroTransitionDuration, HeroTransitionDuration, HeroTransitionDuration, 0.2s;
}


.Hovered .OverviewHeroRender
{
	brightness: 1.6;
}

#RightHeroes DOTAPostGameOverviewHero.Collapsed .OverviewHeroRender,
#RightHeroes DOTAPostGameOverviewHero.Expanded .OverviewHeroRender
{
	transform: translateX(240px) translateY(-100px);
}

DOTAPostGameOverviewHero #PartyIndex
{
	width: 100%;
	height: 130px;

	vertical-align: bottom;
	margin-bottom: 238px;

	background-size: 100%;
	background-repeat: no-repeat;

	transition-property: opacity;
	transition-duration: .1s;
	z-index: 0;
	visibility: collapse;
}

/* Dire on the right */
/* DOTAPostGameOverviewHero.PartyIndex3 #PartyIndex,
DOTAPostGameOverviewHero.PartyIndex4 #PartyIndex
{
	horizontal-align: right;
} */

/* DOTAPostGameOverviewHero.PartyIndex1 #PartyIndex { background-image: url("s2r://panorama/images/post_game_party_index_1_psd.vtex"); }
DOTAPostGameOverviewHero.PartyIndex2 #PartyIndex { background-image: url("s2r://panorama/images/post_game_party_index_2_psd.vtex"); }
DOTAPostGameOverviewHero.PartyIndex3 #PartyIndex { background-image: url("s2r://panorama/images/post_game_party_index_3_psd.vtex"); }
DOTAPostGameOverviewHero.PartyIndex4 #PartyIndex { background-image: url("s2r://panorama/images/post_game_party_index_4_psd.vtex"); } */

DOTAPostGameOverviewHero.PartyIndex1 #PartyIndex { background-color: gradient( linear, 0% 100%, 0% 0%, from( #02AB9770 ), color-stop( 0.5, #02AB9770 ), to( #02AB9700 ) ); border-bottom: 2px solid rgb(117, 238, 224); }
DOTAPostGameOverviewHero.PartyIndex2 #PartyIndex { background-color: gradient( linear, 0% 100%, 0% 0%, from( #00B32D70 ), color-stop( 0.5, #00B32D70 ), to( #00B32D00 ) ); border-bottom: 2px solid rgb(60, 238, 105); }
DOTAPostGameOverviewHero.PartyIndex3 #PartyIndex { background-color: gradient( linear, 0% 100%, 0% 0%, from( #EE010180 ), color-stop( 0.5, #EE010180 ), to( #EE010100 ) ); border-bottom: 2px solid rgb(255, 106, 118); }
DOTAPostGameOverviewHero.PartyIndex4 #PartyIndex { background-color: gradient( linear, 0% 100%, 0% 0%, from( #F7680180 ), color-stop( 0.5, #F7680180 ), to( #F7680100 ) ); border-bottom: 2px solid rgb(255, 167, 51); }

DOTAPostGameOverviewHero.PartyIndex1 #PartyIndex,
DOTAPostGameOverviewHero.PartyIndex2 #PartyIndex,
DOTAPostGameOverviewHero.PartyIndex3 #PartyIndex,
DOTAPostGameOverviewHero.PartyIndex4 #PartyIndex
{
	visibility: visible;
}

DOTAPostGameOverviewHero.Expanded #PartyIndex
{
	opacity: 0;
	transition-delay: HeroTransitionDuration;
}


.OverviewHeroPlayerNameExpanded,
.OverviewHeroPlayerName
{
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 8px;
	pre-transform-scale2d: 1;
	transform: translateX( 0px) translateY(0px);
	opacity: 1;
	transition-property: transform, opacity, pre-transform-scale2d;
	transition-timing-function: linear, ease-in-out;
	transition-duration: .1s;
}

.OverviewHeroPlayerNameExpanded
{
	vertical-align: bottom;
	margin: 0px;
	margin-bottom: 26px;
}


.OverviewHeroPlayerNameExpanded Label,
#BotPlayerName
{
	horizontal-align: left;

	color: #99B3B3;
	font-size: 38px;
	font-weight: thin;
	text-shadow: 1px 1px 3px 3.0 #000000;
	text-overflow: shrink;
	margin-right: 4px;
}


.IndividualStatsContainer #BotPlayerName
{
	font-size: 38px;
}

.OverviewHeroContainer #BotPlayerName
{
	horizontal-align: center;
}

.LocalPlayer .OverviewHeroPlayerNameExpanded Label
{
	font-weight: bold;
}

.OverviewHeroPlayerName
{
	horizontal-align: center;
	opacity: 1;
	height: 24px;
	text-align: center;
	transform:  scaleX(1) scaleY(1) translateX( 0px) translateY(0px);
}

.OverviewHeroPlayerName Label,
#BotPlayerName
{
	font-size: 18px;
	font-weight: thin;
	text-align: center;
	text-shadow: 1px 1px 3px 3.0 #000000;
	text-overflow: shrink;
}

DOTAUserName.OverviewHeroPlayerName Label .PersonaName
{
	color: #99B3B3;
}

DOTAUserName.OverviewHeroPlayerNameExpanded Label .PersonaName
{
	color: #CAD3D2;
}



.LocalPlayer .OverviewHeroPlayerNameExpanded Label .PersonaName,
.LocalPlayer .OverviewHeroPlayerName Label .PersonaName
{
	color: white;
	font-weight: bold;
	brightness: 1;
}

.HeroCenterContent:hover DOTAUserName.OverviewHeroPlayerName Label .PersonaName,
#BotPlayerName
{
	color: white;
}

.OverviewHeroPlayerNameExpanded
{
	pre-transform-scale2d: 1;
	opacity: 1;
}

DOTAPostGameOverviewHero.Expanded .OverviewHeroPlayerName
{
	opacity: 0;
	transition-delay: HeroTransitionDuration;
	transition-duration: 0.32s;
}

#ExpandedPlayerNameContainer,
#PlayerNameContainer
{
	transform: translateX( 0px) translateY(0px);
	width: 100%;

	transition-property: transform, opacity, pre-transform-scale2d;
	transition-timing-function: linear;
	transition-duration: .1s;
}

#ExpandedPlayerNameContainer
{
	transform: translateX( 0px) translateY(-3px);
}



.OverviewHeroStats
{
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 238px;
	flow-children: down;
	padding-bottom: 8px;
	width: 100%;
	height: 160px;
	background-color: gradient( linear, 0% 100%, 0% 0%, from( #000000b2 ), color-stop( 0.4, #000000b2  ), to( #00000000 ) );
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	transition-property: opacity;
	transition-timing-function: linear;
	transition-duration: 0s;
	z-index: 1;
}

.Expanded .OverviewHeroStats
{
	opacity: 0;
	transition-delay: HeroTransitionDuration;
	transition-duration: .32s;
}

#HeroStatsFooter
{
	width: 500px;
	flow-children: right;
	vertical-align: bottom;
	transform: translateX(0px);
	transition-property: transform;
	transition-timing-function: ease-in-out;
	transition-timing-function: linear;
	transition-duration: .32s;
}

DOTAPostGameOverviewHero.Expanded #HeroStatsFooter
{
	transform: translateX(256px);
}

#RightHeroes DOTAPostGameOverviewHero.Expanded #HeroStatsFooter
{
	transform: translateX(16px);
}

#OverviewStats
{
	horizontal-align: center;
	vertical-align: bottom;
	horizontal-align: center;
	margin-bottom: 6px;
	flow-children: down;

	width: 100px;
	//border: 1px solid blue;
}

.OverviewStat
{
	horizontal-align: center;
	flow-children: right;
}

#OverviewStatHeroBadge
{
	ui-scale: 60%;
	horizontal-align: center;
}

#OverviewStatHeroBadge.NoTier
{
	visibility: collapse;
}

.StatLabel
{
	width: 0;
	height: 0;
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: linear;
	transition-duration: .32s;
}

DOTAPostGameOverviewHero.Expanded .StatLabel
{
	width: fit-children;
	height: fit-children;
	opacity: 1;
}


.CenterBuffer
{
	//background-color: #ff000022;
	transition-duration: 0.32s;
}

DOTAPostGameOverviewHero.Expanded .BufferLeft
{
	width: fill-parent-flow( 0.0 );
}


.OverviewHeroNetWorth
{
	horizontal-align: center;

	color: #b6883a;
	text-shadow: 0px 2px 1px black;
}

.OverviewHeroKills
{
	color: white;
	text-shadow: 0px 2px 1px black;
}

.OverviewHeroDeathsAssists
{
	color: rgb(150, 150, 150);
	text-shadow: 0px 2px 1px black;

}

.OverviewKDAContainer
{
	horizontal-align: center;
	flow-children: right;
}

.OverviewKDAContainer Label
{
	font-weight: bold;
}

/*
// green background in most cases, except if the local player is on dire
#LeftHeroes #HeroBackground,
.LocalPlayerIsDire #RightHeroes #HeroBackground
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #1A2319 ), color-stop( 0.4, #263521 ), to( #000000 ) );
}
// red background in most cases, except if the local player is on dire
#RightHeroes #HeroBackground,
.LocalPlayerIsDire #LeftHeroes #HeroBackground
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #140E0E ), color-stop( 0.4, #2A1E1E ), to( #000000 ) );
}
#RightHeroes .LocalPlayer #HeroBackground,
#LeftHeroes .LocalPlayer #HeroBackground
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #BEFF1200 ), color-stop( 0.4, #BEFF1255 ), to( #000000 ) );
}
*/

#HeroBackground.Hovered .HeroSelectGlow
{
	opacity: 1;
}

.Collapsed #HeroBackground.Hovered .HeroSelectGlow,
.Expanded #HeroBackground.Hovered .HeroSelectGlow
{
	opacity: 0;
}

#HeroBackground.InBetween .HeroImageOverlay,
#HeroBackground.InBetween .HeroSelectGlow
{
	transition-delay: HeroTransitionDuration;
}

.LocalPlayer #HeroBackground.InBetween
{
	transition-delay: 0.s, 0.s, 0.s, HeroTransitionDuration;
}

DOTAPostGameOverviewHero.Collapsed #HeroBackground,
DOTAPostGameOverviewHero.Expanded #HeroBackground
{
	border: 1px solid transparent;
}

// Overview Header

#OverviewTopSection
{
	width: 1392px;
	horizontal-align: center;
	height: fit-children;
	overflow: noclip;
}

.GameTimeTextLabel,
.VictoryTextLabel
{

	font-size: 50px;
	font-weight: thin;
	color: #B4FAB6;
	horizontal-align: center;
	vertical-align: center;
	text-shadow: 3px 3px 4px 2.0 #000000aa;
	padding: 2px;
	padding-top: 0px;
	padding-bottom: 0px;
	width: 440px;
	height: 72px;
	text-overflow: shrink;
}

.GameTimeTextLabel {
	color: white;
	text-align: center center;
}

.VictoryBanner
{
	height: 50px;
	width: 700px;
	horizontal-align: center;
	vertical-align: center;
	margin-top: 30px;
	margin-bottom: 26px;
	opacity:1;


	transition-property: opacity, transform;
	transition-duration: .3s;
	transition-timing-function: ease-in-out;
}

#2_VictoryBanner
{
	transform: translateX( -400px );
	visibility: collapse;
}

.RightExpanded #MatchDetailsContainer,
.LeftExpanded #MatchDetailsContainer
{
	opacity: 0;
}

.RightExpanded .TeamScore,
.LeftExpanded .TeamScore,
.LeftExpanded #DurationContainer,
.RightExpanded #DurationContainer,
.LeftExpanded #VictoryBanner,
.LeftExpanded #TeamNameContainer
{
	opacity:0;
}

.GameMode1v1.RightExpanded .TeamScore,
.GameMode1v1.LeftExpanded .TeamScore,
.GameMode1v1.LeftExpanded #DurationContainer,
.GameMode1v1.RightExpanded #DurationContainer,
.GameMode1v1.LeftExpanded #VictoryBanner,
.GameMode1v1.LeftExpanded #TeamNameContainer
{
	opacity:1;
}

.RadiantVictory #VictoryBanner
{
	visibility: visible;
}

#VictoryBanner
{
	transform: translateX( 400px );
	visibility: collapse;
}

.VictoryBannerBackground
{
	margin-top: 17px;
	margin-bottom: 0px;
	width: 100%;
	height: 100%;
	opacity-mask: url("s2r://panorama/images/masks/softedge_vertical_softer_png.vtex");

}

#VictoryBanner .VictoryBannerBackground
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000 ), color-stop( .2, #5bb10b77 ), to( #00000000 ) );
}

.LocalPlayerIsDire #VictoryBanner .VictoryBannerBackground
{
	/* background-color: gradient( linear, 0% 0%, 100% 0%,  from( #00000000 ), color-stop( .2, #ae332177 ), to( #00000000 ) ); */
}

#3_VictoryBanner .VictoryBannerBackground
{
	background-color: gradient( linear, 100% 0%, 0% 0%,  from( #00000000 ), color-stop( .2, #ae332177 ), to( #00000000 ) );
}

.LocalPlayerIsDire #VictoryBanner .VictoryBannerBackground
{
	/* background-color: gradient( linear, 100% 0%, 0% 0%,  from( #00000000 ), color-stop( .2, #5bb10b77 ), to( #00000000 ) ); */
}

#TeamNameContainer
{
	flow-children: right;
	margin-left: 32px;
	margin-top: 30px;
	horizontal-align: left;
	vertical-align: middle;
	visibility: collapse;
}

.RadiantVictory #TeamNameContainer,
.RadiantHasTeamID #TeamNameContainer
{
	visibility: visible;
}

#VictoryText
{
	horizontal-align: left;
	color: #B4FAB6;
}

.OverviewTeamLogo
{
	visibility: collapse;
	width: 60px;
	height: 60px;
}

.LocalPlayerIsDire #2_VictoryText
{
	//color: #FA755F;
}

.LocalPlayerIsDire #3_VictoryText
{
	//color: #B4FAB6;
}

#TeamNameContainer
{
	flow-children: left;
	margin-right: 32px;
	horizontal-align: right;
	vertical-align: middle;
	visibility: collapse;
	margin-top: 24px;
}

.DireVictory #TeamNameContainer,
.DireHasTeamID #TeamNameContainer
{
	visibility: visible;
}

#3_VictoryText
{
	horizontal-align: right;
	text-align: right;
	color: #FA755F;
}

.TeamScore
{
	font-size: 80px;
	color: white;
	horizontal-align: center;
	flow-children: down;
	padding-left: 26px;
	padding-right: 26px;
	font-weight: thin;
	margin-top: 30px;

	transition-property: opacity, transform;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

#Score
{
	text-shadow: 0px 0px 24px 1.0 #009900aa;
	transform: translateX( -110px );
}

#3_Score
{
	text-shadow: 0px 0px 24px 1.0 #990000aa;
	transform: translateX( 110px );
}

#DurationContainer
{
	flow-children: down;
	horizontal-align: center;
	vertical-align: center;
	height: fit-children;
	margin-top: 0px;

	transition-property: opacity, transform;
	transition-duration: .3s;
	transition-timing-function: ease-in-out;
}

#DurationContainer Label
{
	horizontal-align: center;
	font-size: 14px;
	font-weight: thin;
//	letter-spacing: 2px;
	text-align: center;
}

#DurationContainer .DurationValue
{
	margin-top: 0px;
	font-size: 30px;
}


DOTAPostGameOverviewHero #OverviewHeroHoverControls
{
	//visibility: collapse;
	flow-children: none;
	width: 100%;

	height: 422px;
	vertical-align: top;
	//margin-top: 24px;

	//padding-bottom: 30px;
}

DOTAPostGameOverviewHero:hover #OverviewHeroHoverControls
{
	visibility: visible;
}

#MVPStarContainer
{
	vertical-align: top;
	width: fit-children;
	height: 30px;
	margin-top: 300px;
	flow-children: right;
	horizontal-align: center;
}

DOTAPostGameOverviewHero.Expanded #MVPStarContainer
{
	visibility: collapse;
}

.MVPStar
{
	background-image: url("s2r://panorama/images/control_icons/bp2019_mvp_icon_png.vtex");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
	//transform: rotateZ( -90deg );

	transition-property: transform;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;

	visibility: visible;

	width: 25px;
	height: 25px;

	margin-left: 0px;
	margin-right: 0px;
}

.MVPVotes_0 #MVPStar1,
.MVPVotes_0 #MVPStar2,
.MVPVotes_0 #MVPStar3
{
	visibility: collapse;
}

.MVPVotes_1 #MVPStar1,
.MVPVotes_2 #MVPStar1,
.MVPVotes_3 #MVPStar1,
.MVPVotes_2 #MVPStar2,
.MVPVotes_3 #MVPStar2,
.MVPVotes_3 #MVPStar3
{
	wash-color: yellow;
	//transform: rotateZ( 0deg );
}

#OverviewHeroMVPButton
{
	background-image: url("s2r://panorama/images/control_icons/bp2019_mvp_icon_png.vtex");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 60% 60%;
	transform: rotateZ( 0deg);

	box-shadow: fill -8px -8px 20px 16px #000000;

	tooltip-position: top;
	tooltip-body-position: 50% 0%;

	background-color: gradient( linear, 0% 100%, 0% 0%, from( #edc422 ), to( #ffcc00 ) );

	transition-property: background-color, wash-color, transform, opacity-mask, opacity, pre-transform-scale2d;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;

	visibility: collapse;
}

#OverviewHeroMVPButton:hover
{
	wash-color: #ffffff;
	//border: 2px solid black;
}

#OverviewHeroMVPButton:active
{
	wash-color: #aaaaaa;
	border: 3px solid black;
}

DOTAPostGameOverviewHero.CanMVPVote #OverviewHeroMVPButton
{
	visibility: visible;
}

.OverviewHeroExpandButton
{
	height: 100%;
	width: 100%;
	visibility: visible;
}

DOTAPostGameOverviewHero #OverviewHeroReportButton
{
	background-image: url("s2r://panorama/images/conduct/report_flag_png.vtex");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
	//transform: rotateZ( 180deg);

	wash-color: #dd3C1C;


	tooltip-position: top;
	tooltip-body-position: 50% 0%;

	//background-color: gradient( linear, 0% 100%, 0% 0%, from( #770000 ), to( #aa0000 ) );

	transition-property: background-color, wash-color, transform, opacity-mask, opacity, pre-transform-scale2d;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;

	visibility: collapse;
}

 DOTAPostGameOverviewHero.CanReport #OverviewHeroReportButton
{
	visibility: visible;
}

 DOTAPostGameOverviewHero #OverviewHeroTipButton
{
	background-image: url("s2r://panorama/images/conduct/bp_points_png.vtex");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
	//transform: rotateZ( 180deg);

	wash-color: #0493ff;


	tooltip-position: top;
	tooltip-body-position: 50% 0%;

	//background-color: gradient( linear, 0% 100%, 0% 0%, from( #770000 ), to( #aa0000 ) );

	transition-property: background-color, wash-color, transform, opacity-mask, opacity, pre-transform-scale2d;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;

	visibility: collapse;
}

DOTAPostGameOverviewHero.CanTip #OverviewHeroTipButton
{
	visibility: visible;
}

DOTAPostGameOverviewHero #OverviewHeroFavoriteButton
{
	background-image: url("s2r://panorama/images/control_icons/party_finder_icon_add_png.vtex");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
	//transform: rotateZ( 180deg);

	tooltip-position: top;
	tooltip-body-position: 50% 0%;

   	wash-color: #9862E9;

	transition-property: background-color, wash-color, transform, opacity-mask, opacity, pre-transform-scale2d;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;

	visibility: collapse;
}

DOTAPostGameOverviewHero.CanFavorite #OverviewHeroFavoriteButton
{
	visibility: visible;
}


.DrawerButton
{
	width: 25px;
	height: 25px;
	margin-left: 2px;
	margin-right: 2px;
	horizontal-align: center;
}

#OverviewHeroCommendButton
{
	background-image: url("s2r://panorama/images/conduct/commend_star_png.vtex");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
	transform: rotateZ( 0deg);

	wash-color: #35aa14;

	tooltip-position: top;
	tooltip-body-position: 50% 0%;

	//background-color: gradient( linear, 0% 100%, 0% 0%, from( #007700 ), to( #00aa00 ) );

	transition-property: background-color, wash-color, transform, opacity-mask, opacity, pre-transform-scale2d;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;

	visibility: collapse;
}

DOTAPostGameOverviewHero.CanCommend #OverviewHeroCommendButton
{
	visibility: visible;
}

#OverviewHeroReportButton:hover,
#OverviewHeroCommendButton:hover,
#OverviewHeroFavoriteButton:hover,
#OverviewHeroTipButton:hover
{
	wash-color: #ffffff;
	//border: 2px solid black;
}

#OverviewHeroReportButton:active,
#OverviewHeroCommendButton:active,
#OverviewHeroFavoriteButton:active
{
	wash-color: #aaaaaa;
	border: 3px solid black;
}

DOTAPostGameOverviewHero .OverviewHeroInviteButton
{
	visibility: collapse;
}

DOTAPostGameOverviewHero.CanInvite .OverviewHeroInviteButton,
DOTAPostGameOverviewHero.CanSuggestInvite .OverviewHeroInviteButton
{
	visibility: visible;
}

.OverviewHeroInviteButton
{
	background-image: url("s2r://panorama/images/control_icons/plus_png.vtex");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 60% 60%;
	transform: rotateZ( 0deg);

	box-shadow: fill -8px -8px 20px 16px #000000;

	margin-bottom: 64px;

	tooltip-position: top;
	//tooltip-arrow-position: -24px;
	tooltip-body-position: 50% 0%;

	background-color: gradient( linear, 0% 100%, 0% 0%, from( #3E4B51 ), to( #5C9C68 ) );
	wash-color: #ABEAA8;
	// border-radius: 4px;

	transition-property: background-color, wash-color, transform, opacity-mask, opacity, pre-transform-scale2d;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
}

.OverviewHeroInviteButton
{
	//horizontal-align: right;
	width: 48px;
	height: 48px;
	vertical-align: bottom;
	opacity: 0;
	pre-transform-scale2d: 0.6;
	transition-property: opacity, pre-transform-scale2d, background-color, wash-color, transform, opacity-mask;
	transition-duration: 0.12s;
	border: 1px solid black;
}

.OverviewHeroInviteButton:hover
{
	wash-color: #ffffff;
}
.OverviewHeroInviteButton:active
{
	wash-color: #aaaaaa;
}

.OverviewHeroInviteButton:hover,
.Hovered .OverviewHeroInviteButton
{
	opacity: 1;
}


.OverviewHeroContainer.Expanded .OverviewHeroExpandButton
{
	visibility: collapse;
}

.Expanded .OverviewHeroExpandButton
{
	visibility: collapse;
}

#OverviewHeroContractButton
{
	horizontal-align: center;
	width: 128px;
	margin-right: 542px;
	margin-top: 18px;
	opacity: 0;
	transition-property: opacity;
	transition-duration: HeroTransitionDuration;
	transition-delay: HeroTransitionDuration;
	background-color: #63636322;
	padding: 12px 14px 10px 14px;

}

.AspectRatio16x10 #OverviewHeroContractButton
{
	margin-right: 616px;
}

.AspectRatio4x3 #OverviewHeroContractButton
{
	margin: 0px;
	margin-top: 96px;
	horizontal-align: left;
	margin-left: 52px;
	width: fit-children;
}

.AspectRatio16x10 #RightHeroes #OverviewHeroContractButton
{
	margin-left: 616px;
	margin-right: 0px;
}

.AspectRatio4x3 #RightHeroes #OverviewHeroContractButton
{
	margin: 0px;
	margin-top: 96px;
	horizontal-align: right;
	margin-right: 52px;
	width: fit-children;
}

#OverviewHeroContractButton:hover
{
	background-color: #63636366;
}
#OverviewHeroContractButton:hover Label
{
	color: white;
}

#OverviewHeroContractButton Label
{
	text-transform: uppercase;
//	letter-spacing: 2px;
	text-align: center;
	font-size: 14px;
}

#RightHeroes #OverviewHeroContractButton
{
	margin-left: 542px;
	margin-right: 0px;
}


.OverviewHeroContainer.Expanded #OverviewHeroContractButton
{
	opacity: 1;
	transition-duration: 0.0s;
	transition-delay: 0.0s;
}

.GameMode1v1 .OverviewHeroContainer.Expanded #OverviewHeroContractButton
{
	opacity: 0;
	transition-duration: 0.0s;
	transition-delay: 0.0s;
}




#DetailsDraft
{
	flow-children: down;
	width: 100%;
	height: 1200px;
	padding: 20px;
}

.DraftTitle
{
	margin-top: 20px;
	font-size: 30px;
}

.DraftContainer
{
	width: 100%;
	horizontal-align: center;
	height: 100%;
	flow-children: right;
	margin-top: 30px;
}

.DraftTeamContainer
{
	flow-children: down;
	width: 500px;
}

.PickBanContainer
{
	margin-top: 20px;
	flow-children: right;
	width: 100%;
}

.PicksContainer, .BansContainer
{
	flow-children: down;
	margin-right: 20px;
}

.PickImage, .BanImage
{
	width: 110px;
	height: 64px;
	margin-bottom: 14px;
}

.BanImage
{
	width: 48px;
}

#Penalty
{
	visibility: collapse;
}

.RadiantDraftPenalty #2_Penalty
{
	visibility: visible;
}

.DireDraftPenalty #3_Penalty
{
	visibility: visible;
}

#DetailsHeatmaps
{
	flow-children: down;
	width: 100%;
	height: 1200px;
	padding: 20px;
	background-color: #003300;
}

#DetailsHeatmapsTimelineSlider
{
	width: 1800px;
}

.DetailsHeatmapsBlock
{
	flow-children: none;
	width: 500px;
	height: 500px;
}

.DetailsHeatmapsMinimap
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/textures/minimap_game_png.vtex");
	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;
	saturation: 0;
	brightness: 0.35;
}

.DetailsHeatmapsHeatmap
{
	width: 100%;
	height: 100%;
}

.HeatmapRadiantHeroIcon, .HeatmapDireHeroIcon
{
	width: 32px;
	height: 32px;
	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;
	wash-color: white;
	margin-top: -16px;
	margin-left: -16px;
}

.HeatmapRadiantHeroIcon
{
	background-image: url("s2r://panorama/images/textures/minimap_hero_team_psd.vtex");
}

.HeatmapDireHeroIcon
{
	background-image: url("s2r://panorama/images/textures/minimap_hero_enemy_psd.vtex");
}

#Heatmap_2_Hero1 { wash-color: rgb( 51, 117, 255 ); }
#Heatmap_2_Hero2 { wash-color: rgb( 102, 255, 191 ); }
#Heatmap_2_Hero3 { wash-color: rgb( 191, 0, 191 ); }
#Heatmap_2_Hero4 { wash-color: rgb( 243, 240, 11 ); }
#Heatmap_2_Hero5 { wash-color: rgb( 255, 107, 0 ); }
#Heatmap_3_Hero1 { wash-color: rgb( 254, 134, 194 ); }
#Heatmap_3_Hero2 { wash-color: rgb( 161, 180, 71 ); }
#Heatmap_3_Hero3 { wash-color: rgb( 101, 217, 247 ); }
#Heatmap_3_Hero4 { wash-color: rgb( 0, 131, 33 ); }
#Heatmap_3_Hero5 { wash-color: rgb( 164, 105, 0 ); }

/* Plus Per Player Checkboxes */

.PlusPerPlayerCheckboxContainer
{
	width: 42px;
	height: 100%;
	vertical-align: middle;
	horizontal-align: right;
	wash-color: black;
	background-color: black;

	transition-property: width, wash-color, opacity;
	transition-duration: .4s;

	opacity: 0.0;
}

#PlusPerPlayerSelectedToggleButton
{
	vertical-align: middle;
	width: 42px;
	height: 20px;
	horizontal-align: right;
	opacity: 0;
	transition-property: opacity;
	transition-duration: .4s;
}

#PlusPerPlayerSelectedToggleButton .RadioBox
{
	horizontal-align: center;
}

.PlusPerPlayerVisible #PlusPerPlayerSelectedToggleButton,
.PlusPerPlayerVisible .PlusPerPlayerCheckboxContainer
{
	opacity: 1.0;
	wash-color: white;
}

/* End Plus Per Player Checkboxes */

/* Damage Details Tab */

#DetailsDamage
{
	flow-children: down;
	width: 100%;
	padding-left: 370px;
}

#DetailsDamageTable
{
	margin-top: 16px;
	margin-left: 0px;
	flow-children: down;
	padding: 18px 20px;
	padding-right: 0px;
	//background-color: rgba( 0, 0, 0, 0.4 );
}

#DetailsDamageTableRows
{
	flow-children: down;
	overflow: clip scroll;
	max-height: 561px;
	padding-right: 10px;
	margin-bottom: 0px;
}

.DetailsDamageHeader
{
	flow-children: right;
	margin-bottom: 20px;
}

.DetailsDamageHeader DOTAHeroImage
{
	width: 78px;
	margin-right: 10px;
}

.DetailsDamageHeader #DetailsDamageHeroSource
{
	margin-right: 12px;
}

.DetailsDamageRow
{
	flow-children: right;
	margin-bottom: 10px;
}

.BorderBottom
{
	border-bottom: 2px solid #768e8d;
}

.DetailsDamageRow Image,
.DetailsDamageRow DOTAAbilityImage,
.DetailsDamageRow Label
{
	width: 78px;
	height: 78px;
	margin-right: 10px;
//	letter-spacing: 1px;
}

.DetailsDamageHeader Label.DamageTotal
{
	width: 78px;
	height: 44px;
	background-color: #00000077;
	padding-top: 14px;
	color: #DDDDDD;
	text-shadow: 1px 1px 1px #00000077;
}

.DetailsDamageHeader Label.DamageTotal,
.DetailsDamageRow Label.DamageTotal
{
	text-align: center;
	padding-right: 0px;
	text-transform: uppercase;
	font-size: 15px;
//	letter-spacing: 2px;
}

.DetailsDamageRow Image,
.DetailsDamageRow DOTAAbilityImage,
.DetailsDamageRow Label.DamageTotal
{
	//margin-right: 25px;
}

.DetailsDamageRow Label.Total,
.DetailsDamageHeader Label.DamageTotal
{
	margin-left: 0px;
}

.DetailsDamageRow Image.DamageBasicIcon
{
	wash-color: #99AABB;
	saturation: 0;
}

.DetailsDamageRow Label
{
	background-color: #00000077;
	text-align: center;
	padding-top: 28px;
	//padding-right: 14px;
	color: #DDDDDD;
	text-shadow: 1px 1px 1px #00000077;
}

.DetailsDamageRow.DamageTotalBottom Image
{
	opacity: 0.0;
}

/* End Damage Details Tab */


/* Buff Details Tab */

#DetailsBuff
{
	flow-children: down;
	width: 100%;
	padding-left: 370px;
}

#DetailsBuffTable
{
	margin-top: 10px;
	margin-left: 0px;
	flow-children: down;
	padding: 20px;
	padding-right: 0px;
	background-color: rgba( 0, 0, 0, 0.4 );
}

#DetailsBuffTableRows
{
	flow-children: down;
	overflow: clip scroll;
	max-height: 561px;
	padding-right: 10px;
	margin-bottom: 10px;
}

.DetailsBuffHeader
{
	flow-children: right;
	margin-bottom: 20px;
}

.DetailsBuffHeader DOTAHeroImage
{
	width: 78px;
	margin-right: 10px;
}

.DetailsBuffHeader #DetailsBuffHeroSource
{
	margin-right: 25px;
}

.DetailsBuffRow
{
	flow-children: right;
	margin-bottom: 10px;
}

.DetailsBuffRow Image,
.DetailsBuffRow DOTAAbilityImage,
.DetailsBuffRow Label
{
	width: 78px;
	height: 78px;
	margin-right: 10px;
}

.DetailsBuffRow Image,
.DetailsBuffRow DOTAAbilityImage
{
	margin-right: 25px;
}

.DetailsBuffRow Label
{
	background-color: #00000077;
	text-align: center;
	padding-top: 28px;
	//padding-right: 14px;
	color: #DDDDDD;
	text-shadow: 1px 1px 1px #000000;
}

.DetailsBuffRow.DurationTotalBottom Image
{
	opacity: 0.0;
}

/* End Buff Details Tab */


#DropsContainer
{
	width: 100%;
	height: 94px;
	flow-children: right;
	vertical-align: middle;
	vertical-align: bottom;
	opacity: 1;

	//background-color: black;

	transition-property: opacity;
	transition-duration: 0.3s;
}

.HeroHovered.Expanded #DropsContainer
{
	opacity: 0;

}

#LeftMarginEcon
{

}

DOTAPostGameOverviewHero.Expanded #LeftMarginEcon
{

}

#LeftMarginEcon,
#RightMarginEcon
{
	transition-timing-function: linear;
	transition-duration: .051s;
}

#EconRewardsContainer
{
	height: 130px;
	flow-children: right-wrap;
	opacity: 1;

	transition-property: position, opacity;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

.Expanded #EconRewardsContainer
{
	opacity: 0;
	transition-duration: HeroTransitionDuration;
	transition-delay: HeroTransitionDuration;
}

#RightHeroes DOTAPostGameOverviewHero.Expanded #RightMarginEcon
{
	width: 12px;
	//width: fill-parent-flow ( 0 );
}

#RightHeroes DOTAPostGameOverviewHero.Expanded #LeftMarginEcon
{
	width: fill-parent-flow ( 1 );
}

DOTAPostGameOverviewHero.Expanded #LeftMarginEcon
{
	width: 18px;
	//width: fill-parent-flow ( 0 );
}

#EconRewardsContainer DOTAEconItem
{
	width: 36px;
	height: 36px;
	margin: 0px;

	border: 1px solid black;

	vertical-align: middle;

}

#DetailsSupportItems
{
	width: fit-children;
	height: 100%;
	flow-children: down;
	visibility: collapse;
}

.HasSupportItems #DetailsSupportItems
{
	visibility: visible;
}

DOTAPostGameSupportItemsRow
{
	flow-children: right;
	margin-left: 64px;
	padding-left: 12px;
	padding-right: 16px;
	//background-color: #440000;
	width: 382px;
}

.MaxItems4 DOTAPostGameSupportItemsRow{ width: 412px; }
.MaxItems5 DOTAPostGameSupportItemsRow{ width: 468px; }
.MaxItems6 DOTAPostGameSupportItemsRow{ width: 523px; }
.MaxItems7 DOTAPostGameSupportItemsRow{ width: 578px; }

.SupportItemCount
{
	horizontal-align: right;
	vertical-align: bottom;
	text-align: center;
	font-size: 16px;
	margin-right: -4px;
	margin-top: -14px;
	background-color: #121A20;
	border-radius: 5px;
	padding: 4px;
	padding-left: 6px;
	padding-right: 5px;
	padding-bottom: 0;
}

.asd
{
	//width: 100%;
	horizontal-align: right;
	text-align: center;
	font-size: 16px;
	margin-top: -16px;
	background-color: #121A20;
	//border-radius: 5px;
	padding: 1px;
	padding-right: 3px;
	padding-left: 3px;
}

.SupportItemsValue
{
	vertical-align: center;
	color: #E7BA01FF;
}

.SupportItemsTeamContainer
{
	flow-children: down;
}

#SupportItemContainer
{
	flow-children: right;
	vertical-align: middle;
	margin-top: 3%;
	margin-bottom: 3%;
}

#SupportItemsValue
{
	horizontal-align: right;
	margin-right: 57px;
}

.SupportItemsCampsStacked
{
	vertical-align: center;
	color: baseText;
	horizontal-align: right;
	margin-right: 0px;
}

#DetailsSupportItems .PlayerRowContainer
{
	flow-children: none;
}

.ItemEntry
{
	//height: 60px;
	margin-right: 16px;

}

.ItemEntry DOTAItemImage
{
	vertical-align: center;
}

.ItemEntry .ItemIcon
{
	width: 36px;
	height: 27px;
}

#DetailsPicks
{
	height: 100%;
	flow-children: down;

	visibility: collapse;
}

#PicksTitle
{
	width: 80px;
	text-align: center;
}

.HasPicks #DetailsPicks
{
	visibility: visible;
}

.GameModeAbilityDraft.HasPicks #DetailsPicks
{
	visibility: collapse;
}

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

.PicksTeamContainer Label
{
	height: 54px;
	margin-bottom: 6px;
	width: 100%;
	padding-top: 14px;
	text-align: right;
	padding-right: 44px;
	font-size: 18px;
	color: #FFFFFF;
	wash-color: #A5ADA2;
}

.PicksTeamContainer Label.HeroWasRandomed
{
	background-image: url("s2r://panorama/images/control_icons/random_dice_psd.vtex");
	background-position: 41px 18px;
	background-size: 14px 14px;
	background-repeat: no-repeat;
}

#DetailsKillMatrix
{
	width: 475px;
	height: 100%;
	flow-children: down;

	visibility: collapse;
}

.HasKillMatrix #DetailsKillMatrix
{
	visibility: visible;
}

.KillMatrixContainer
{
	width: 100%;
	horizontal-align: center;
	height: 100%;
	flow-children: down;
}

.KillMatrixTeamContainer
{
	flow-children: down;
	//width: 620px;
}

DOTAPostGameKillMatrixRow
{
	flow-children: right;
	margin-left: 64px;
	padding-left: 12px;
	padding-right: 0px;
}

DOTAPostGameKillMatrixRow #MainHeroImage
{
	width: 110px;
	height: 64px;
	margin-bottom: 14px;
	margin-right: 4px;
	visibility: collapse;
}

DOTAPostGameKillMatrixRow .KillContainer
{
	flow-children: down;
	vertical-align: center;
	margin-left: 4px;
	width: 60px;
	height: 100%;
}

#TotalKills
{
	flow-children: right;
	background-color: #212C3384;
	width: 64px;
	margin-left: 12px;
	border: 1px solid #00000077;
	border-left: 2px solid #00000077;
	border-right: 2px solid #00000077;
}

.KillMatrixTotalKills
{
	vertical-align: center;
	font-size: 26px;
	text-align: center;
	horizontal-align: center;
	margin-top: 6px;
	color: white;
}

.VictimHero
{
	margin-top: 0px;
	width: 35px;
	height: 35px;
	wash-color: #444444;
	horizontal-align: center;
	saturation: 0;
	contrast: .85;
}

.LocalPlayer .VictimHero
{
	opacity: .5;
}

DOTAPostGameKillMatrixRow.Victim_0_Active #VictimHero0,
DOTAPostGameKillMatrixRow.Victim_1_Active #VictimHero1,
DOTAPostGameKillMatrixRow.Victim_2_Active #VictimHero2,
DOTAPostGameKillMatrixRow.Victim_3_Active #VictimHero3,
DOTAPostGameKillMatrixRow.Victim_4_Active #VictimHero4,
DOTAPostGameKillMatrixRow.Victim_4_Active #VictimHero5,
DOTAPostGameKillMatrixRow.Victim_4_Active #VictimHero6,
DOTAPostGameKillMatrixRow.Victim_4_Active #VictimHero7,
DOTAPostGameKillMatrixRow.Victim_4_Active #VictimHero8,
DOTAPostGameKillMatrixRow.Victim_4_Active #VictimHero9
{
	wash-color: none;
	saturation: 1;
	contrast: 1;
	opacity: 1;
}

.VictimDeathCount
{
	visibility: collapse;
	//width: 100%;
	horizontal-align: right;
	text-align: center;
	font-size: 16px;
	margin-top: -14px;
	background-color: #121A20;
	border-radius: 5px;
	padding: 3px;
	padding-left: 6px;
	padding-right: 5px;
	padding-bottom: 0;
}

#TotalKills .VictimDeathCount
{
	visibility: visible;
	color: #6F6F70;
	background-color: none;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
	margin-top: 4px;
}

DOTAPostGameKillMatrixRow.Victim_0_Active #VictimDeathCount0,
DOTAPostGameKillMatrixRow.Victim_1_Active #VictimDeathCount1,
DOTAPostGameKillMatrixRow.Victim_2_Active #VictimDeathCount2,
DOTAPostGameKillMatrixRow.Victim_3_Active #VictimDeathCount3,
DOTAPostGameKillMatrixRow.Victim_4_Active #VictimDeathCount4,
DOTAPostGameKillMatrixRow.Victim_4_Active #VictimDeathCount5,
DOTAPostGameKillMatrixRow.Victim_4_Active #VictimDeathCount6,
DOTAPostGameKillMatrixRow.Victim_4_Active #VictimDeathCount7,
DOTAPostGameKillMatrixRow.Victim_4_Active #VictimDeathCount8,
DOTAPostGameKillMatrixRow.Victim_4_Active #VictimDeathCount9
{
	visibility: visible;
}


/* DAMAGE RECEIVED */

#DetailsDamageReceived
{
	width: 258px;
	height: 100%;
	padding-left: 0px;
	flow-children: down;

	visibility: collapse;
}

.HasDamageReceived #DetailsDamageReceived
{
	visibility: visible;
}

.DamageReceivedTeamContainer
{
	flow-children: down;
}

.DamageReceivedTeamContainer .PlayerRowContainer
{
	margin-bottom: 6px;
}

.StatRowHeight.DamageReceivedLegend
{
	padding-top: 9px;
	width: 220px;
	flow-children: down;
	padding-bottom: 0px;
}

.DamageReceivedSubLegend
{
	padding-top: 1px;
	width: 100%;
}

.DamageReceivedSubLegend Label.DamageReceivedSubTitlePre
{
	horizontal-align: left;
	width: 50%;
	text-align: center;
}

.DamageReceivedSubLegend Label.DamageReceivedSubTitlePost
{
	horizontal-align: right;
	width: 50%;
	text-align: center;
}

#DetailsDamageReceived .DamageReceivedTitle
{
	font-size: 14px;
	font-weight: normal;
	text-align: center;
	color: #6D726B;
	text-align: center;
	horizontal-align: center;
}

#DamageReceivedPreValue,
#DamageReceivedPostValue
{
	text-align: right;
	margin-right: 30px;
	width: 80px;
	vertical-align: center;
	color: baseText;
	margin-top: 4px;
}

#DamageReceivedPostValue
{
	margin-right: 20px;
}

.PlayerRowContainer .InfoIcon
{
	margin-right: 10px;
	margin-bottom: 5px;
}

/* DAMAGE DEALT */

#DetailsDamageDealt
{
	width: 228px;
	height: 100%;
	padding-left: 0px;
	flow-children: down;
}

.DamageDealtTeamContainer
{
	flow-children: down;
}

.DamageDealtTeamContainer .PlayerRowContainer
{
	margin-bottom: 6px;
}

.StatRowHeight.DamageDealtLegend
{
	padding-top: 9px;
	width: 220px;
	flow-children: down;
	padding-bottom: 0px;
}

.DamageDealtSubLegend
{
	padding-top: 1px;
	width: 100%;
}

.DamageDealtSubLegend Label.DamageDealtSubTitleHero
{
	horizontal-align: left;
	width: 50%;
	text-align: center;
}

.DamageDealtSubLegend Label.DamageDealtSubTitleBuilding
{
	horizontal-align: right;
	width: 50%;
	text-align: center;
}

#DetailsDamageDealt .DamageDealtTitle
{
	font-size: 14px;
	font-weight: normal;
	text-align: center;
	color: #6D726B;
	text-align: center;
	horizontal-align: center;
}

#DamageDealtHeroValue,
#DamageDealtBuildingValue
{
	text-align: right;
	margin-right: 30px;
	margin-top: 4px;
	width: 80px;
	vertical-align: center;
	color: baseText;
}


/* DEATH STATS */

#DetailsDeathStats
{
	width: 228px;
	height: 100%;
	padding-left: 0px;
	flow-children: down;

	visibility: collapse;
}

.HasDeathStats #DetailsDeathStats
{
	visibility: visible;
}

.DeathStatsTeamContainer
{
	flow-children: down;
}

.DeathStatsTeamContainer .PlayerRowContainer
{
	margin-bottom: 6px;
}

.StatRowHeight.DeathStatsLegend
{
	padding-top: 9px;
	width: 210px;
	flow-children: down;
	padding-bottom: 0px;
}

.DeathStatsSubLegend
{
	flow-children: right;
}

.DeathStatsSubLegend Label.DeathStatsSubTitleGold,
.DeathStatsSubLegend Label.DeathStatsSubTitleTime
{
	text-align: right;
	padding-right: 30px;
}

.DeathStatsSubLegend Label.DeathStatsSubTitleGold
{
	width: 110px;
	color: #C48103;
}

.DeathStatsSubLegend Label.DeathStatsSubTitleTime
{
	width: 100px;
}

#DetailsDeathStats .DeathStatsTitle
{
	font-size: 14px;
	font-weight: normal;
	text-align: center;
	color: #6D726B;
	text-align: center;
	horizontal-align: center;
}

#DeathStatsTimeValue,
#DeathStatsGoldValue
{
	text-align: right;
	margin-right: 30px;
	vertical-align: center;
	margin-top: 4px;
}

#DeathStatsTimeValue
{
	width: 70px;
}

#DeathStatsGoldValue
{
	width: 80px;
}

#DeathStatsTimeValue
{
	color: baseText;
}

#DeathStatsGoldValue
{
	color: #E7BA01;
}



/* NO METADATA */

#NoMetadataStats
{
	flow-children: down;
	width: 250px;
	horizontal-align: center;
}

.NoMetadataStatsRow
{
	margin-top: 16px;
	flow-children: right;
}

.NoMetadataStat
{
	width: fill-parent-flow( 1.0 );
	flow-children: down;
}

.NoMetadataStat Label
{
	width: 100%;
	text-align: center;
}

.NoMetadataStatLabel
{
	font-size: 18px;
	text-transform: uppercase;
}
.NoMetadataStatValue
{
	font-size: 24px;
}


.HasPlayerMetadata #NoMetadataStats
{
	visibility: collapse;
}


.IndividualStatsContainer
{
	opacity: 0;
	margin-top: 96px;
	width: 384px;
	height: 100%;
	margin-left: 0px;
	margin-right: 34px;
	horizontal-align: right;
	flow-children: down;
	pre-transform-scale2d: .9;

	transition-property: opacity, pre-transform-scale2d;
	transition-duration: HeroTransitionDuration;
	transition-delay: HeroTransitionDuration;
	transition-timing-function: ease-in-out;
}


.LeftExpanded #LeftHeroStats .IndividualStatsContainer,
.RightExpanded #RightHeroStats .IndividualStatsContainer
{
	opacity: 1;
	pre-transform-scale2d: 1;
	transition-delay: 0s;
	transition-duration: 0.12s;
}


.LeftExpanded #IndividualStatsHeader,
.LeftExpanded #IndividualStats,
.LeftExpanded #HeroItemsContainer,
.RightExpanded #IndividualStatsHeader,
.RightExpanded #IndividualStats,
.RightExpanded #HeroItemsContainer
{
	opacity: 1;
}



#IndividualStatsHeader
{
	width: 384px;
	height: 120px;
	overflow: noclip;
	opacity: 0;

	transition-property: opacity, transform;
	transition-duration: 0.24s;
	transition-delay: HeroTransitionDuration;
	transition-timing-function: ease-in-out;
}

.IndividualStatsTitle
{
	text-transform: uppercase;
	//margin-left: 16px;
//	letter-spacing: 1px;
	horizontal-align: center;
	font-size: 14px;
	color: #99B3B3;
}

.IndividualStatsTitle.StatsTitleLowerCase
{
	text-transform: none;
}

#PerformanceBar .IndividualStatsTitle
{
	font-size: 12px;
	vertical-align: bottom;
	margin-bottom: -16px;
}

#IndividualStats
{
	width: 384px;
	height: 312px;
	border: 1px solid black;
	horizontal-align: right;
	margin-bottom: 64px;
	background-color: #000000ef;
	background-color: #00000000;
	border: 1px solid #2B3843;
	border: 1px solid transparent;

	visibility: collapse;

	opacity: 0;
	transition-property: opacity, transform;
	transition-duration: 0.24s;
	transition-delay: 0.66s;
	transition-timing-function: ease-in-out;
}

.HasPlayerMetadata #IndividualStats
{
	visibility: visible;
}

.HeroCenterContent .IndividualStatsContainer
{
	visibility: collapse;
}

#RightHeroStats .IndividualStatsContainer
{
	horizontal-align: left;
	margin-left: 34px;
	margin-right: 0px;
}

DOTAPostGameOverviewHero.Expanded #IndividualStats
{
	opacity: 1;
	transition-duration: 0s;
	transition-delay: 0s;
}

.PlayStyleRow
{
	horizontal-align: center;
	margin-top: 6px;
	margin-right: 16px;
}

.PlayStyleBar
{
	width: 200px;
	height: 4px;
	border: 0px solid transparent;
	box-shadow: none;
	vertical-align: middle;
	background-color: #354248;
	margin-left: 12px;
	margin-right: 12px;
	overflow: noclip;

}

.PlayStyleBar .ProgressBarLeft
{
	width: 32px;
	background-color: #AFDF8F;
	box-shadow: fill 0px 0px 12px #AFDF8F55;

	transition-property: width;
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;

}

ProgressBar.PlayStyleBar
{
	border-radius: 0px;
}

.PlayStyleValueLabel,
.PlayStyleLabel
{
	color: #99B3B3;
	width: 32px;
	font-size: 14px;
	text-transform: uppercase;
	text-align: left;
	text-overflow: shrink;
	text-shadow: 0px 0px 3px 3 #000000;
}

.PlayStyleLabel
{
	width: 72px;
	text-align: right;
}

#PerformancePanel
{
	width: 334px;
	height: 154px;
	horizontal-align: center;

	border: 1px solid #111111;
	margin-bottom: 12px;
	margin-top: 12px;
	padding-top: 8px;
	background-color: #354248;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #35424854 ), to( #3542482a ) );
}

.IsBot #PerformancePanel
{
	visibility: collapse;
}

.BotDifficultyLabel
{
	horizontal-align: center;
	color: #aaa;
	font-size: 18px;
	margin-top: 10px;
	visibility: collapse;
}

.IsBot.BotDifficulty_Passive .BotDifficultyPassive,
.IsBot.BotDifficulty_Easy .BotDifficultyEasy,
.IsBot.BotDifficulty_Medium .BotDifficultyMedium,
.IsBot.BotDifficulty_Hard .BotDifficultyHard,
.IsBot.BotDifficulty_Unfair .BotDifficultyUnfair
{
	visibility: visible;
}

#VersusAverages
{
	width: 100%;
	vertical-align: top;
	horizontal-align: center;
}

#PerformanceBar
{
	background-image: url("s2r://panorama/images/textures/performancebar_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	width: 300px;
	height: 22px;
	horizontal-align: center;
	vertical-align: bottom;
	overflow: noclip;
	margin-bottom: 24px;
}

#PerformanceHeroIcon
{
	width: 28px;
	height: 28px;
	horizontal-align: center;
	margin-top: -5px;

	transform: translateX( 105px);

	transition-property: transform;
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;
}

#AveragesContainer
{
	width: 100%;
	horizontal-align: center;
	padding-left: 16px;
	padding-right: 16px;
}

.AveragesLabelColumn
{
	//border: 1px solid green;
}

.AveragesColumn
{
	//width: 141px;
	margin-top: 26px;
	//flow-children: down;
	//border: 1px solid blue;
	margin-left: 0px;
}

.AveragesContainer, .BestContainer
{
	flow-children: right;
	horizontal-align: center;
}

.AveragesValue
{
	font-size: 16px;
	color: #AFDF8F;
	text-align: left;
	horizontal-align: left;
	margin-left: 8px;
}

#RightAverageColumn
{
	horizontal-align: right;
	margin-left: 32px;
}

.BestValue
{
	font-size: 16px;
	color: #f3ee06;
	width: 32px;
}
.BestLabel
{
	text-transform: uppercase;
	text-align: right;
	horizontal-align: right;
	font-size: 16px;
	margin-right: 4px;
	color: #99B3B3;
}

#BestGPMContainer,
#BestXPMContainer,
#BestKillsContainer,
#BestAssistsContainer
{
	visibility:collapse;
}

.GPMRecord #BestGPMContainer,
.XPMRecord #BestXPMContainer,
.KillsRecord #BestKillsContainer,
.AssistsRecord #BestAssistsContainer
{
	visibility:visible;
}
#AverageGPMContainer,
#AverageXPMContainer,
#AverageKillsContainer,
#AverageAssistsContainer
{
	visibility:visible;
}
.GPMRecord #AverageGPMContainer,
.XPMRecord #AverageXPMContainer,
.AssistsRecord #AverageAssistsContainer,
.KillsRecord #AverageKillsContainer
{
	visibility:collapse;
}
.BadKills .KillsAvgValues,
.BadGPM .GPMAvgValues,
.BadXPM .XPMAvgValues,
.BadAssists .AssistsAvgValues,
.BadDeaths .DeathsAvgValues
{
	color: #FA755F;
}
.GoodKills .KillsAvgValues,
.GoodGPM .GPMAvgValues,
.GoodXPM .XPMAvgValues,
.GoodAssists .AssistsAvgValues,
.GoodDeaths .DeathsAvgValues

{
	color:green;
}

.LeftAverages
{
	horizontal-align: left;
}

.RightAverages
{
	horizontal-align: right;
}


.AveragesLabel
{
	text-transform: uppercase;
	text-align: right;
	horizontal-align: right;
	font-size: 16px;
	margin-right: 4px;
	color: #99B3B3;
}

#AvatarNameContainer
{
	border-radius: 12px;
	vertical-align: bottom;
	flow-children: right;
	//height: 48px;
	width: 100%;
	background-color: black;
	background-color: gradient( linear, 0% 100%, 0% 0%, from( #000000ff ), to( #00000000 ) );
}


#PlayerAvatarImage
{
	width: 64px;
	height: 64px;
	border: 1px solid #222222;
	margin: 8px;

	border-bottom-left-radius: 8px;

	background-image: url("s2r://panorama/images/bot_icon_easy_png.vtex");
	background-size: contain;

	horizontal-align: center;
	transform: translateX(0px);
	background-color: black;
	margin-right: 12px;
	opacity: 1;
	pre-transform-scale2d: 1;
	transition-property: opacity, transform, pre-transform-scale2d;
	transition-duration: 0.25s;
	transition-delay: 0.4s, 0s, 0.4s;
}

DOTAPostGameHeroStats.IsBot #PlayerAvatarImage
{
	visibility: collapse;
}

DOTAPostGameHeroStats .BotIcon
{
	width: 64px;
	height: 64px;

	margin: 8px;

	border: 1px solid #222222;
	border-bottom-left-radius: 8px;

	background-image: url("s2r://panorama/images/bot_icon_easy_png.vtex");
	background-size: contain;

	horizontal-align: center;
	transform: translateX(0px);
	margin-right: 12px;
	opacity: 1;
	pre-transform-scale2d: 1;
	transition-property: opacity, transform, pre-transform-scale2d;
	transition-duration: 0.25s;
	transition-delay: 0.4s, 0s, 0.4s;

	visibility: collapse;
}

.PinnedPlayerRow .BotIcon
{
	width: 36px;
	height: 36px;
	vertical-align: middle;
	horizontal-align: center;

	border: 1px solid #222222;
	border-bottom-left-radius: 8px;

	background-image: url("s2r://panorama/images/bot_icon_easy_png.vtex");
	background-size: contain;

	visibility: collapse;
}

.BotDifficulty_Passive.IsBot .BotIcon,
.BotDifficulty_Easy.IsBot .BotIcon,
.BotDifficulty_Medium.IsBot .BotIcon,
.BotDifficulty_Hard.IsBot .BotIcon,
.BotDifficulty_Unfair.IsBot .BotIcon
{
	visibility: visible;
}

.BotDifficulty_Passive .BotIcon
{
	background-image: url("s2r://panorama/images/bot_icon_passive_png.vtex");
}

.BotDifficulty_Easy .BotIcon
{
	background-image: url("s2r://panorama/images/bot_icon_easy_png.vtex");
}

.BotDifficulty_Medium .BotIcon
{
	background-image: url("s2r://panorama/images/bot_icon_medium_png.vtex");
}

.BotDifficulty_Hard .BotIcon
{
	background-image: url("s2r://panorama/images/bot_icon_hard_png.vtex");
}

.BotDifficulty_Unfair .BotIcon
{
	background-image: url("s2r://panorama/images/bot_icon_unfair_png.vtex");
}

#EconItemContainer
{
	max-width: 64px;
	flow-children: right-wrap;

	opacity: 0;
	vertical-align: middle;
	margin-bottom: 45px;
	margin-left: 10px;

	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-delay: 0.44s;
	transition-duration: 0.34s;
}

.LeftExpanded #LeftHeroStats #EconItemContainer,
.RightExpanded #RightHeroStats #EconItemContainer
{
	opacity: 1;
	transition-delay: 0s;
}

#RightHeroStats #EconItemContainer
{
	horizontal-align: right;
	margin-left: 0px;
	margin-right: 6px;
	flow-children: left-wrap;
}




#EconItemContainer DOTAEconItem
{
	width: 46px;
	height: 46px;
}

#MainHeroImage
{
	visibility: collapse;
	//opacity: 1;
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 0.34s;
}

DOTAPostGameOverviewHero.Collapsed #MainHeroImage
{
	opacity: 1;
	saturation: .3;
	brightness: .2;
}

DOTAPostGameOverviewHero.Collapsed:hover #MainHeroImage
{
	opacity: 1;
	saturation: 1;
	brightness: 1;
}

DOTAPostGameOverviewHero.Expanded #MainHeroImage
{
	opacity: 1;
	margin-top: 195px;
	margin-left: 12px;
	margin-right: 12px;
}

#RightHeroes #MainHeroImage
{
	horizontal-align: right;
}

#PlayerPic
{
	visibility: collapse;
	horizontal-align: left;
	margin-right: 16px;
	margin-bottom: 2px;
	width: 120px;
	height: 120px;
	margin-top: -4px;

	horizontal-align: right;
}

.PlayerPicVisible #PlayerPic
{
	visibility: visible;
}

/*
#RightHeroStats #PlayerPic
{
	horizontal-align: left;
	margin-left: 16px;
}
*/

.PlayerPicVisible.Expanded  #PlayerPic
{
//  visibility: visible;
}

.PinnedColumn
{
	horizontal-align: center;
	height: 100%;
	width: 318px;
	//padding-left: 16px;
	background-color: #000000aa;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #222424 ), to( #121A1F ) );
	border: 1px solid #222222;
	border-top-width: 0px;
	border-bottom-width: 0px;
	//box-shadow: fill 0px 0px 12px #000000;
}

#BottomTeam
{
	vertical-align: bottom;
	margin-bottom: 19px;
}

.SlidingName.TeamBlock
{
	background-color: transparent;
	horizontal-align: left;
	margin-left: 72px;
}

.DireTeamTitle .SlidingName.TeamBlock
{
	background-color: #161B1D;
}


.PinnedTeamHeader
{
	width: 100%;
}

.PinnedTeamScore
{
	margin-top: -8px;
	margin-left: 6px;
}

.Multiteam .PinnedTeamScore {
	margin-top: 12px;
}

#TeamScore
{
	font-size: 18px;
	//color: white;
	font-weight: thin;
	opacity: 1;
	text-transform: uppercase;
}

.Multiteam #TeamScore {

}

#PinnedHeroesLeftMargin
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #000000dd ), to( #000000ff ) );
	width: 32px;
	height: 100%;
}

#PinnedHeroesRightMargin
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #000000ff ), to( #00000000 ) );
	width: 16px;
	height: 100%;
}

#PinnedHeroesFarRightMargin
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #000000ff ), to( #00000000 ) );
	width: 32px;
	height: 100%;
	horizontal-align: right;
}

#PinnedHeroes {
	height: 100%;
	/* width: 156px; */
	transform: translateX(-740px);
	opacity: 0;
	transition-property: transform, opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 0.34s, .5s;
}

.Multiteam #PinnedHeroes {
	
}

.ScoreboardVisible #PinnedHeroes,
.GraphsVisible #PinnedHeroes,
.PlusPerPlayerVisible #PinnedHeroes
{
	transform: translateX(0px);
	opacity: 1;
}


// simplified pinned heroes for player graphs legend

.AvatarWell
{
	wash-color: black;
}
/*.GraphsVisible.GraphPlayerLevel .AvatarWell,
.GraphsVisible.GraphPlayerNetWorth .AvatarWell
{
	wash-color: black;
}
.PlusPerPlayerVisible .AvatarWell
{
	wash-color: black;
}
*/
.LobbyTeamIconDefault
{
	opacity: 0;
	wash-color: black;
}
/*.GraphsVisible.GraphPlayerLevel .LobbyTeamIconDefault,
.GraphsVisible.GraphPlayerNetWorth .LobbyTeamIconDefault,
.PlusPerPlayerVisible .LobbyTeamIconDefault
{
	opacity: 0;
	wash-color: black;
}*/

.WinnerPanel, .SlidingName
{
	transform: translateX(-42px);
}
/*.GraphsVisible.GraphPlayerLevel .WinnerPanel,
.GraphsVisible.GraphPlayerNetWorth .WinnerPanel,
.GraphsVisible.GraphPlayerLevel .SlidingName,
.GraphsVisible.GraphPlayerNetWorth .SlidingName
{
	transform: translateX(-42px);
}
*/
.PlusPerPlayerVisible .WinnerPanel,
.PlusPerPlayerVisible .SlidingName
{
	transform: translateX(-42px);
}

.GraphPlayerLevel .ScoreboardVisible .SlidingName,
.GraphPlayerNetWorth .ScoreboardVisible .SlidingName
{
	transform: translateX(0px);
}

.StatRowHeight
{
	height: 60px;
}

.Multiteam .StatRowHeight
{
	height: 40px;
}

#PlayerItemsRowContainer
{
	flow-children: down;
	width: 2000px;
	height: 100%;
	//visibility: collapse;
}

.PlayerItemsGraphRow
{
	height: 54px;
	width: 100%;
	margin-bottom: 6px;
}

.PlayerItemsGraphRow.PlayerSlot4
{
	margin-bottom: 67px;
}

.BGLine
{
	height: 1px;
	width: 100%;
	vertical-align: middle;

	margin-right: 100px;
}

.PlayerSlot0 .BGLine
{
	background-color: slot0color;
}

.PlayerSlot1 .BGLine
{
	background-color: slot1color;
}

.PlayerSlot2 .BGLine
{
	background-color: slot2color;
}

.PlayerSlot3 .BGLine
{
	background-color: slot3color;
}

.PlayerSlot4 .BGLine
{
	background-color: slot4color;
}

.PlayerSlot5 .BGLine
{
	background-color: slot5color;
}

.PlayerSlot6 .BGLine
{
	background-color: slot6color;
}

.PlayerSlot7 .BGLine
{
	background-color: slot7color;
}

.PlayerSlot8 .BGLine
{
	background-color: slot8color;
}

.PlayerSlot9 .BGLine
{
	background-color: slot9color;
}



#PinnedHeroes .StatRowHeight
{
	border-color: transparent;
	//background-color: transparent;
}

.StatRowHeight.TeamName
{
	background-color: #00000033;
	margin-left: 0px;
	margin-bottom: 0px;
	height: 60px;
}

.Multiteam .StatRowHeight.TeamName {
	height: 40px;
}

.StatSectionTitle.StatRowHeight
{
	border-color: transparent;
	background-color: transparent;
}

.StatSectionTitle Label
{
	vertical-align: bottom;
	text-transform: uppercase;
	font-size: 18px;
	font-weight: thin;

	color: #768e8dff;
}

.Multiteam .DamageDealtSubTitleHero,
.Multiteam .DamageDealtSubTitleBuilding {
	font-size: 14px;
}

.KillMatrixLegend
{
	width: 354px;
}

.SupportItemsLegend
{
	width: 424px;
}

.MaxItems4 .SupportItemsLegend { width: 452px; }
.MaxItems5 .SupportItemsLegend { width: 514px; }
.MaxItems6 .SupportItemsLegend { width: 569px; }
.MaxItems7 .SupportItemsLegend { width: 624px; }


#KillMatrixHeader
{
	width: 475px;
}

#KillMatrixTitle
{
	margin-left: 76px;
}

#KillMatrixTitleTotal
{
	horizontal-align: right;
}

.HeroIcon
{
	padding-bottom: 6px;
	padding-top: 6px;
	vertical-align: middle;
}

.HeroIcon #HeroImage
{
	background-color: #000000de;
	width: 74px;
	height: 42px;
	vertical-align: middle;
	border: 1px solid black;
}

.Multiteam .HeroIcon {
	padding-top: 0px;
	padding-bottom: 0px;
}

.HeroIcon #HeroBadge
{
	ui-scale: 36%;
	vertical-align: bottom;
	transform: translateX( -6px ) translateY( 6px );
}

.HeroIcon #HeroBadge.NoTier
{
	visibility: collapse;
}

#PlayerAvatar
{
	width: 36px;
	height: 36px;
	vertical-align: middle;
	horizontal-align: center;
}

.AvatarWell
{
	width: 42px;
	height: 42px;
	vertical-align: middle;
	margin-left: 6px;

	wash-color: white;

	transition-property: width, wash-color;
	transition-duration: .4s;
}

.PinnedPlayerRow.IsBot .BotIcon
{
	visibility: visible;
}


.GraphCheckboxContainer
{
	width: 42px;
	height: 100%;
	vertical-align: middle;
	horizontal-align: right;
	//margin-right: 4px;
	//visibility: collapse;
	wash-color: black;

	transition-property: width, wash-color, opacity;
	transition-duration: .4s;

	opacity: 0.0;
}

#Graph_2_SelectedToggleButton,
#Graph_3_SelectedToggleButton
{
	//vertical-align: middle;
	margin-top: 12px;
	width: 42px;
	height: 20px;
	horizontal-align: right;
	opacity: 0;
	transition-property: opacity;
	transition-duration: .4s;
}


.DireVictory #Graph_3_SelectedToggleButton,
.RadiantVictory #Graph_2_SelectedToggleButton
{
	background-color: #CAD3E7;
}

#Graph_2_SelectedToggleButton .TickBox,
#Graph_3_SelectedToggleButton .TickBox
{
	horizontal-align: center;
}


.GraphsVisible.GraphPlayerNetWorth #Graph_3_SelectedToggleButton,
.GraphsVisible.GraphPlayerNetWorth #Graph_2_SelectedToggleButton,
.GraphsVisible.GraphPlayerNetWorth .GraphCheckboxContainer,
.GraphsVisible.GraphPlayerLevel #Graph_3_SelectedToggleButton,
.GraphsVisible.GraphPlayerLevel #Graph_2_SelectedToggleButton,
.GraphsVisible.GraphPlayerLevel .GraphCheckboxContainer
{
	opacity: 1;
}

.GraphsVisible.GraphPlayerNetWorth .GraphCheckboxContainer,
.GraphsVisible.GraphPlayerLevel .GraphCheckboxContainer
{
	wash-color: white;
}

#GraphSelectedToggleButton
{
	horizontal-align: center;
	vertical-align: middle;
	wash-color: white;
	height: 100%;
	padding: 0px;
	saturation: 0;
	transition-duration: 0s;
}


#GraphSelectedToggleButton:selected
{
	saturation: 1;
}

#GraphSelectedToggleButton:hover
{
	brightness: 2;
	background-color: #222C3255;
}

#GraphSelectedToggleButton .TickBox
{
	background-image: url("s2r://panorama/images/control_icons/eye_visibility_deselect_psd.vtex");
	background-size: 26px 18px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 42px;
	height:  42px;
	horizontal-align: center;
	vertical-align: middle;
	border: 0px solid transparent;
	background-color: none;
	box-shadow: none;
	opacity: .15;
	transition-duration: 0s;
}


#GraphSelectedToggleButton:selected .TickBox
{
	background-image: url("s2r://panorama/images/control_icons/eye_visibility_psd.vtex");
	opacity: 1;
	texture-sampling: alpha-only;
}

.GraphPlayerLevel #GraphSelectedToggleButton .TickBox,
.GraphPlayerNetWorth #GraphSelectedToggleButton .TickBox
{
	//pre-transform-scale2d: 1;
}

#GraphColorKey
{
	width: 100%;
	height: 2px;
	margin-bottom: 10px;
	vertical-align: bottom;
	background-color: white;
}

.NameAndHero .HeroLevelLabel
{
	background-color: black;
	/* vertical-align: bottom; */
	/* horizontal-align: right; */
	width: 24px;
	height: 24px;
	color: #E7D291;
	background-color: #825404;
	background-color: transparent;
	border: 1px solid #E7D29188;
	border-radius: 50%;
	font-size: 14px;
	font-weight: thin;
	padding: 0px;
	padding-top: 3px;
	padding-right: 1px;
	box-shadow: fill 0px 0px 12px #000000;
	margin-left: 12px;
	margin-top: -3px;
	text-align: center;
}

.NameAndHero
{
	width: 178px;
}

.SlidingName
{
	height: 54px;
	horizontal-align: right;
	background-color: #151718;
	transition-property: transform;
	transition-duration: .4s;
}

.LocalPlayer .SlidingName
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #373C3B ), color-stop( 0.4, #505959 ), color-stop( 0.6, #505959 ), to( #2F3535 ) );
}

.Multiteam .SlidingName {
	flow-children: right;
}


.PlayerName
{
	//padding-left: 6px;
	margin-left: 16px;

	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	flow-children: right;
}

#PlayerRowClickTarget
{
	height: 54px;
	//flow-children: right;
	width: 300px;
	background-color: #00000077;
}

#PlayerNameScoreboard
{
	white-space: nowrap;
	width: 170px;
	height: 30px;
	wash-color: #b9d3d3;
}

.Multiteam #PlayerNameScoreboard {
	height: 24px;
}

.IsBot #PlayerNameScoreboard
{
	visibility: collapse;
}

.LocalPlayer #PlayerNameScoreboard
{
	wash-color: white;
}


.PlayerName:hover #PlayerNameScoreboard
{
	wash-color: white;
}

.ScoreboardVisible .LocalPlayer.PlayerName
{
	animation-name: Pulse;
}

@keyframes 'Pulse'
{
	0%
	{
		brightness: 0.2;
	}


	50%
	{
		brightness: 3;
	}

	100%
	{
		brightness: 1;
	}
}



.NameAndHero Label
{
	vertical-align: middle;
	padding-left: 12px;
	padding-right: 12px;
	font-size: 22px;
	font-weight: thin;
	text-overflow: shrink;
//	letter-spacing: 1px;
}

.LocalPlayer .NameAndHero Label
{
	color: white;
	font-weight: bold;
	brightness: 1;
}

.Multiteam .NameAndHero Label
{
	font-size: 18px;
}

.LocalPlayer Label.LevelAndHero
{
	color: #cccccc;
	font-weight: normal;
	brightness: 1;
}
.LocalPlayer Label.HeroLevelLabel
{
	font-weight: normal;
}

.NameAndHero .LevelAndHero
{
	font-size: 14px;
	text-transform: uppercase;
	color: #6D726B;
	text-overflow: shrink;
	padding-left: 6px;
	font-weight: normal;
	margin-bottom: 4px;
}

.PinnedTeam
{
	horizontal-align: center;
	/* margin-top: 32px; */
	flow-children: down;
}

#Pinned_3_Names,
#Pinned_3
{
	//vertical-align: bottom;
	//margin-bottom: 32px;
}

#TeamName
{

	color: white;
	margin-left: 6px;
	margin-top: 6px;
	font-size: 26px;
	/* letter-spacing: 1px; */
	font-weight: thin;
	vertical-align: middle;
	text-overflow: shrink;
	height: 36px;
}

.Multiteam #TeamName {
	font-size: 24px;
}


// Custom Portrait Position Modifiers
#HeroModel.npc_dota_hero_abyssal_underlord { margin-top: -20px; margin-left: -54px; }
#HeroModel.npc_dota_hero_arc_warden { margin-left: 50px; }
#HeroModel.npc_dota_hero_abaddon { margin-top: 20px; margin-left: -20px; }
#HeroModel.npc_dota_hero_alchemist { margin-top: 0px; margin-left: -30px; }
#HeroModel.npc_dota_hero_axe { margin-top: 20px; margin-left: 40px; }
#HeroModel.npc_dota_hero_bane { margin-top: 10px; margin-left: -20px; }
#HeroModel.npc_dota_hero_batrider { margin-top: -60px; margin-left: -30px; }
#HeroModel.npc_dota_hero_beastmaster { margin-top: 10px; margin-left: -10px; }
#HeroModel.npc_dota_hero_bloodseeker { margin-top: -30px; margin-left: -20px; }
#HeroModel.npc_dota_hero_broodmother { margin-top: -80px; margin-left: -25px; }
#HeroModel.npc_dota_hero_bristleback { margin-top: -10px; margin-left: 15px; }
#HeroModel.npc_dota_hero_brewmaster { margin-top: 0px; margin-left: 10px; }
#HeroModel.npc_dota_hero_bounty_hunter { margin-top: -10px; margin-left: -15px; }
#HeroModel.npc_dota_hero_crystal_maiden { margin-top: 0px; margin-left: 12px; }
#HeroModel.npc_dota_hero_clinkz { margin-top: -10px; margin-left: 0px; }
#HeroModel.npc_dota_hero_chen { margin-top: -40px; margin-left: 16px; }
#HeroModel.npc_dota_hero_dazzle { margin-top: -10px; margin-left: 8px; }
#HeroModel.npc_dota_hero_dark_seer { margin-top: -10px; margin-left: -40px; }
#HeroModel.npc_dota_hero_disruptor { margin-top: 0px; margin-left: 18px; }
#HeroModel.npc_dota_hero_drow_ranger { margin-top: 0px; margin-left: 18px; }
#HeroModel.npc_dota_hero_doom_bringer { margin-top: 0px; margin-left: -10px; }
#HeroModel.npc_dota_hero_dragon_knight { margin-top: 10px; margin-left: 34px; }
#HeroModel.npc_dota_hero_death_prophet { margin-top: 30px; margin-left: 14px; }
#HeroModel.npc_dota_hero_earthshaker { margin-top: -30px; margin-left: -24px; }
#HeroModel.npc_dota_hero_elder_titan { margin-top: -30px; margin-left: -10px; }
#HeroModel.npc_dota_hero_ember_spirit { margin-top: -30px; margin-left: 30px; }
#HeroModel.npc_dota_hero_furion { margin-top: -30px; margin-left: 20px; }
#HeroModel.npc_dota_hero_faceless_void { margin-top: 10px; margin-left: 0px; }
#HeroModel.npc_dota_hero_gyrocopter { margin-top: -50px; margin-left: -34px; }
#HeroModel.npc_dota_hero_huskar { margin-top: -40px; margin-left: -50px; }
#HeroModel.npc_dota_hero_jakiro { margin-top: 0px; margin-left: -60px; }
#HeroModel.npc_dota_hero_juggernaut { margin-left: 20px; }
#HeroModel.npc_dota_hero_leshrac { margin-top: 10px; margin-left: -34px; }
#HeroModel.npc_dota_hero_life_stealer { margin-top: -60px; margin-left: -44px; }
#HeroModel.npc_dota_hero_lina { margin-left: 10px; }
#HeroModel.npc_dota_hero_lion { margin-left: 22px; }
#HeroModel.npc_dota_hero_lich { margin-top: 20px; margin-left: 22px; }
#HeroModel.npc_dota_hero_luna { margin-top: -30px; margin-left: -42px; }
#HeroModel.npc_dota_hero_lone_druid { margin-top: -10px; margin-left: -20px; }
#HeroModel.npc_dota_hero_lycan { margin-top: -30px; margin-left: -22px; }
#HeroModel.npc_dota_hero_mirana { margin-top: -40px; margin-left: -10px; }
#HeroModel.npc_dota_hero_meepo { margin-top: -60px; margin-left: 0px; }
#HeroModel.npc_dota_hero_morphling { margin-left: -30px; }
#HeroModel.npc_dota_hero_magnataur { margin-top: 0px; margin-left: -35px; }
#HeroModel.npc_dota_hero_nevermore { margin-top: 20px; margin-left: 0px; }
#HeroModel.npc_dota_hero_nyx_assassin { margin-top: -40px; margin-left: -10px; }
#HeroModel.npc_dota_hero_naga_siren { margin-top: -10px; margin-left: 20px; }
#HeroModel.npc_dota_hero_night_stalker { margin-top: 10px; margin-left: 10px; }
#HeroModel.npc_dota_hero_necrolyte { margin-top: -30px; margin-left: 10px; }
#HeroModel.npc_dota_hero_ogre_magi { margin-top: 0px; margin-left: -20px; }
#HeroModel.npc_dota_hero_oracle { margin-top: -40px; margin-left: -40px; }
#HeroModel.npc_dota_hero_omniknight { margin-top: -10px; margin-left: 10px; }
#HeroModel.npc_dota_hero_obsidian_destroyer { margin-top: -30px; margin-left: -16px; }
#HeroModel.npc_dota_hero_phoenix { margin-top: 0px; margin-left: -50px; }
#HeroModel.npc_dota_hero_phantom_lancer { margin-top: 0px; margin-left: -30px; }
#HeroModel.npc_dota_hero_phantom_assassin { margin-top: -10px; margin-left: -10px; }
#HeroModel.npc_dota_hero_pudge { margin-top: -40px; margin-left: -50px; }
#HeroModel.npc_dota_hero_pugna { margin-top: 10px; margin-left: 6px; }
#HeroModel.npc_dota_hero_queenofpain { margin-top: 0px; margin-left: 16px; }
#HeroModel.npc_dota_hero_razor { margin-top: 0px; margin-left: 10px; }
#HeroModel.npc_dota_hero_rattletrap { margin-top: -20px; margin-left: 8px; }
#HeroModel.npc_dota_hero_riki { margin-top: -40px; margin-left: -20px; }
#HeroModel.npc_dota_hero_sand_king { margin-top: -60px; margin-left: -20px; }
#HeroModel.npc_dota_hero_sven { margin-top: 0px; margin-left: 16px; }
#HeroModel.npc_dota_hero_silencer { margin-top: 0px; margin-left: 12px; }
#HeroModel.npc_dota_hero_slark { margin-top: -60px; margin-left: -20px; }
#HeroModel.npc_dota_hero_skywrath_mage { margin-top: -60px; margin-left: 0px; }
#HeroModel.npc_dota_hero_spirit_breaker { margin-top: -60px; margin-left: -20px; }
#HeroModel.npc_dota_hero_shredder { margin-top: -40px; margin-left: -22px; }
#HeroModel.npc_dota_hero_shadow_demon { margin-top: 20px; margin-left: 0px; }
#HeroModel.npc_dota_hero_shadow_shaman { margin-top: -60px; margin-left: 10px; }
#HeroModel.npc_dota_hero_sniper { margin-top: -30px; margin-left: 6px; }
#HeroModel.npc_dota_hero_skeleton_king { margin-top: 20px; margin-left: 14px; }
#HeroModel.npc_dota_hero_shadow_shaman { margin-top: -50px; margin-left: 10px; }
#HeroModel.npc_dota_hero_techies { margin-top: -60px; margin-left: 10px; }
#HeroModel.npc_dota_hero_templar_assassin { margin-top: -10px; margin-left: 30px; }
#HeroModel.npc_dota_hero_tiny { margin-top: -40px; margin-left: -22px; }
#HeroModel.npc_dota_hero_treant { margin-top: 0px; margin-left: -60px; }
#HeroModel.npc_dota_hero_tinker { margin-top: -40px; margin-left: -20px; }
#HeroModel.npc_dota_hero_tidehunter { margin-top: -40px; margin-left: -50px; }
#HeroModel.npc_dota_hero_troll_warlord { margin-top: 0px; margin-left: -50px; }
#HeroModel.npc_dota_hero_tusk { margin-top: 0px; margin-left: 25px; }
#HeroModel.npc_dota_hero_ursa { margin-top: 0px; margin-left: -60px; }
#HeroModel.npc_dota_hero_undying { margin-top: 20px; margin-left: -20px; }
#HeroModel.npc_dota_hero_vengefulspirit { margin-top: -10px; margin-left: 30px; }
#HeroModel.npc_dota_hero_venomancer { margin-top: -60px; margin-left: -32px; }
#HeroModel.npc_dota_hero_viper { margin-top: -60px; margin-left: -42px; }
#HeroModel.npc_dota_hero_visage { margin-top: -50px; margin-left: -26px; }
#HeroModel.npc_dota_hero_wisp { margin-top: 50px; margin-left: 10px; }
#HeroModel.npc_dota_hero_winter_wyvern { margin-top: -60px; margin-left: -20px; }
#HeroModel.npc_dota_hero_weaver { margin-top: -80px; margin-left: -50px; }
#HeroModel.npc_dota_hero_warlock { margin-top: -80px; margin-left: 0px; }
#HeroModel.npc_dota_hero_witch_doctor { margin-top: -30px; margin-left: -40px; }
#HeroModel.npc_dota_hero_zuus { margin-top: -20px; margin-left: 0px; }
#HeroModel.npc_dota_hero_pangolier { margin-top: -60px; margin-left: 5px; }

// StatWidths

.ItemsContainer
{
	flow-children: right;
	vertical-align: middle;
}

.ADAbilitiesContainer
{
	flow-children: right;
	vertical-align: middle;
}

.BackpackItemsContainer
{
	flow-children: right;
	vertical-align: middle;
}

.AdditionalItems.npc_dota_hero_lone_druid .ItemsContainer
{
	flow-children: right-wrap;
	margin-top: 0px;
	margin-left: 0px;
	width: 116px;
	vertical-align: middle;
}

#LoneDruid,
#LoneDruidBear
{
	width: 53px;
	height: 30px;
	visibility: collapse;
	vertical-align: middle;
	border-radius: 5px;
		border: 1px solid black;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

#LoneDruid
{
	background-image: url("s2r://panorama/images/heroes/npc_dota_hero_lone_druid_png.vtex");
	margin-left: 32px;
	margin-right: 6px;
}

#LoneDruidBear
{
	background-image: url("s2r://panorama/images/heroes/npc_dota_hero_spirit_bear_png.vtex");
	margin-left: 4px;
	margin-right: 6px;
}

.AdditionalItems.npc_dota_hero_lone_druid #LoneDruid,
.AdditionalItems.npc_dota_hero_lone_druid #LoneDruidBear
{
	visibility: visible;
}

#AdditionalItemsContainer.ItemsColumn
{
	width: 116px;
	height: 65px;
	margin-left: 4px;
}
#AdditionalItemsContainer
{
	visibility: collapse;
	flow-children: right-wrap;
}


.AdditionalItems.npc_dota_hero_lone_druid #ItemsContainer DOTAItemImage.ItemIcon,
.AdditionalItems.npc_dota_hero_lone_druid #AdditionalItemsContainer DOTAItemImage.ItemIcon
{
	width: 34px;
	height: 26px;
	vertical-align: top;
	margin: 0px;
	background-color: #00000066;
	border: 1px solid black;
}


.AdditionalItems.npc_dota_hero_lone_druid #AdditionalItemsContainer
{
	visibility: visible;
	margin: 0px;
	margin-right: -13px;
}

.TalentTreeColumn
{
	width: 50px;
	visibility: collapse;
}

.HasMetaDataForPlayers .TalentTreeColumn
{
	visibility: visible;
}

#TalentTree
{
	width: 50px;
	height: 50px;
	
	tooltip-body-position: 50% 50%;
	visibility: collapse;
}

.HasMetaDataForPlayers #TalentTree
{
	visibility: visible;
}



.KillsColumn,
.DeathsColumn,
.AssistsColumn
{
	width: 52px;
	//border: 1px solid red;
}

.ItemsColumn
{
	width: 342px;
	//border: 1px solid red;
	margin-left: 32px;
}

.AbilitiesColumn
{
	width: 228px;
	//border: 1px solid red;
	margin-left: 32px;
	visibility: collapse;
}

.GameModeAbilityDraft .AbilitiesColumn
{
	visibility: visible;
}

.BackpackItemsColumn
{
	width: 172px;
	//border: 1px solid red;
	margin-left: 32px;
}

.GoldColumn,
.NetWorthColumn
{
	width: 64px;
	//border: 1px solid red;
	margin-left: 32px;
	margin-right: 16px;
	tooltip-position: top;
	tooltip-body-position: 50% 50%;
}

.PermanentBuffsColumn
{
	margin-left: 32px;
}

				 .PermanentBuffsColumn { width: 0px;	margin-right: 0px; }
.PermanentBuffs1 .PermanentBuffsColumn { width: 100px;	margin-right: 8px; }
.PermanentBuffs2 .PermanentBuffsColumn { width: 100px;	margin-right: 8px; }
.PermanentBuffs3 .PermanentBuffsColumn { width: 150px;	margin-right: 8px; }
.PermanentBuffs4 .PermanentBuffsColumn { width: 200px;	margin-right: 8px; }
.PermanentBuffs5 .PermanentBuffsColumn { width: 250px;	margin-right: 8px; }

.LastHitsColumn
{
	width: 42px;
	margin-right: 4px;
}

.DeniesColumn
{
	width: 32px;
	text-align: left;
}

.GPMColumn,
.XPMColumn
{
	width: 42px;
	//border: 1px solid red;
	margin-left: 32px;
	text-overflow: shrink;
}

.MMRColumn
{
	width: 100px;
	margin-right: 32px;

	visibility: collapse;
}

.ShowMMRLegend .MMRColumn
{
	visibility: visible;
}

.HeroHealingColumn
{
	margin-left: 32px;
	width: 60px;
}

.BackSlash
{
	margin-left: 6px;
	margin-right: 6px;
	color: #666C66;
}

#SocialTools
{
	vertical-align: bottom;
	//horizontal-align: center;
	margin-bottom: 96px;
	//visibility: collapse;

}

#SocialTools .ButtonBevel
{
	margin-right: 10px;
}

.WinnerPanel
{
	height: 32px;
	padding: 0px;
	//overflow: noclip;
	padding-left: 2px;
	horizontal-align: right;
	visibility: collapse;
	transition-property: transform;
	transition-duration: .4s;
}

.WinnerTag
{
	width: 80px;
	text-overflow: shrink;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
//	letter-spacing: 2px;
	color: black;
	text-shadow: 0px 0px 8px 1 #000000;
	background-color: #CAD3E7;
	//width: 100px;
	height: 20px;
	text-align: center;
	padding-top: 2px;
	z-index: 1;
}

.WinnerSides
{
	width: 14px;
	height: 14px;
	background-color: #CAD3E7;
	transform: rotateZ(45deg) translateY(3px);
	margin-right: -7px;
	margin-left: 0px;
	z-index: 0;
}

#Winner
{
	margin-top: 12px;
}

.Multiteam #Winner {
	transform: translateX(0px);
	horizontal-align: right;
}

DOTAPostGameOverviewHero.CanReport:hover #ButtonDrawer,
DOTAPostGameOverviewHero.CanCommend:hover #ButtonDrawer,
DOTAPostGameOverviewHero.CanTip:hover #ButtonDrawer,
DOTAPostGameOverviewHero.CanVoteMVP:hover #ButtonDrawer,
DOTAPostGameOverviewHero.CanFavorite:hover #ButtonDrawer,
DOTAPostGameOverviewHero:hover #ButtonDrawer
{
	visibility: visible;
	opacity: 1.0;
}

.OverviewHeroContainer #ButtonDrawer
{
	width: fit-children;
	min-width: 100px;
	horizontal-align: center;
	height: 40px;

	margin-top: 90px;
	margin-left: 4px;
	margin-right: 4px;

	z-index: 1;

	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.25s;
}

.ButtonDrawerContents
{
	width: fit-children;
	horizontal-align: center;
	flow-children: right;
	vertical-align: center;
}

.OverviewHeroContainer.IsBot #PlayerName, .OverviewHeroContainer.IsBot #MVPVote
{
	visibility: collapse;
}

#BotPlayerName
{
	visibility: collapse;
}

.OverviewHeroContainer.IsBot #BotPlayerName
{
	visibility: visible;
}

#HeroItemsContainer
{
	width: 266px;
	height: 142px;
	flow-children: right-wrap;
	vertical-align: middle;
	horizontal-align: center;
	margin-top: 16px;
	margin-left: 16px;

	opacity: 0;

	transition-property: opacity, transform;
	transition-duration: 0.24s;
	transition-delay: 0.56s;
	transition-timing-function: ease-in-out;
}


#HeroItemsContainer .ItemIcon
{
	width: 72px;
	height: 54px;
	margin: 0px;
	margin-right: 16px;
	margin-bottom: 16px;
	border: 3px solid black;
	vertical-align: top;
}


DOTAPostGameOverviewHero.Expanded #HeroItemsContainer
{
	opacity: 1;
	transition-duration: 0s;
	transition-delay: 0s;
}

#ScrubberContainer
{
	flow-children: right;
	vertical-align: bottom;
	horizontal-align: center;
	//width: 505px;
	margin-bottom: 14px;
	opacity: 0;
	transform: translateX(0px);

	visibility: collapse;

	transition-property: opacity, transform;
	transition-duration: .3s;
}

.HasItemSnapshots #ScrubberContainer
{
	visibility: visible;
}

#ScrubberContainer #SliderThumb
{
	width: fit-children;
	height: 42px;
	padding-right: 2px;
	padding-left: 2px;
}

.PreGame #SliderThumb
{
	wash-color: white;
}

#ScrubberContainer #SliderThumb:hover
{
	brightness: 1.5;
}

#ItemScrubber
{
	width: 782px;
	max-width: 782px;
	min-width: 782px;
	height: 48px;
}


#PreGameLabel
{
	width: 61px;
	height: 16px;
	text-overflow: shrink;
	font-size: 12px;
	text-transform: uppercase;
	horizontal-align: center;
	color: white;
	padding-top: -1px;
	text-align: center;
	visibility: collapse;
	text-shadow: 0px 1px 2px 2 #000000ff;
}

.PreGame #ScrubberTime
{
	color: #888888;
}

#ScrubberTime
{
	font-size: 26px;
	text-align: center;
	horizontal-align: center;
	vertical-align: middle;
	color: white;
	margin-bottom: 1px;
	margin-top: 2px;

	font-weight: thin;
	background-color: black;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 4px;
	border-radius: 4px;
}

.PreGame #ScrubberTime
{
	font-size: 24px;
	text-align: center;
	horizontal-align: center;
	vertical-align: middle;
	color: white;
	margin-top: 2px;

	font-weight: thin;
	background-color: black;
	padding-left: 6px;
	padding-right: 6px;
	padding-bottom: -6px;
	border-radius: 4px;
	padding-top: -3px;
}


.PreGame #PreGameLabel
{
	visibility: visible;
}

.RightExpanded #ScrubberContainer,
.LeftExpanded #ScrubberContainer
{
	opacity: 0.25;
}


.RightExpanded #ScrubberContainer:hover,
.LeftExpanded #ScrubberContainer:hover
{
	opacity: 1;
}

.PermanentBuffs
{
	flow-children: right;
	vertical-align: middle;
}

.PermanentBuff
{
	tooltip-position: right;
	tooltip-body-position: 3%;
}

#PermanentBuffIcon
{
	vertical-align: middle;
	width: 38px;
	height: 38px;
	margin-right: 12px;
	border: 1px solid #000000;
}

#PermanentBuffStackCount
{
	padding-top: 19px;
	padding-right: 3px;
	width: 38px;
	text-align: right;
	font-size: 18px;
	text-shadow: 1px 1px 3px 3.0 #000000;
	brightness: 2.0;
	text-overflow: shrink;
}

.TopBarHero
{
	background-color: #000000de;
	width: 116px;
	height: 64px;
	border: 1px solid black;
	margin-right: 12px;
	saturation: .4;
	brightness: .4;
	pre-transform-scale2d: .98;
	border: 2px solid transparent;

	transition-property: opacity, transform, brightness, saturation, pre-transform-scale2d, border;
	transition-duration: .2s;
}

.TopBarHero.Selected:enabled:hover,
.TopBarHero.Selected
{
	saturation: 1;
	brightness: 1;
	pre-transform-scale2d: 1;
	border: 2px solid #99B3B355;
}

.TopBarHero:enabled:hover
{
	saturation: 1;
	brightness: .8;
	pre-transform-scale2d: 1;

}

.TopBarHero:active
{
	wash-color: #000000a5;
}

.TopBarHeroContainer
{
	transform: translateY(108px);
	margin-top: 16px;
	//width:    621px;
	flow-children: right;
	horizontal-align: center;
	opacity: 0;
	transition-property: opacity, transform;
	transition-duration: 0.3s;
}

.GameMode1v1.RightExpanded #TopRight,
.GameMode1v1.LeftExpanded #TopLeft
{
	opacity: 0;
}

.RightExpanded #TopRight,
.LeftExpanded #TopLeft
{
	transform: translateY(0px);
	opacity: 1;
}

#TopLeft
{

	margin-right: 684px;
}

#TopRight
{
	margin-left: 708px;
}

.HeroNav
{
	border: 1px solid white;
}

.HeroNav.Selected
{
	border: 1px solid red;
}


#LvlHero
{
	horizontal-align: left;
	vertical-align: bottom;
	margin-left: 86px;
	margin-bottom: 2px;
}

#HeroLevel,
#HeroName
{
	text-transform: uppercase;
	font-size: 18px;
//	letter-spacing: 2px;

	color: #6A9561;
	opacity: 0;
	text-align: left;
	margin-bottom: 4px;
	text-shadow: 1px 1px 3px 3 #000000ff;

	transition-property: opacity, transform;
	transition-duration: 0.3s;
	transition-delay: HeroTransitionDuration;
}

.RightExpanded #RightHeroStats #HeroLevel,
.LeftExpanded #LeftHeroStats #HeroLevel,
.LeftExpanded #LeftHeroStats #HeroName,
.RightExpanded #RightHeroStats #HeroName
{
	opacity: 1;
	transition-duration: 0.12s;
	transition-delay: 0s;
	horizontal-align: left;
}

#ReloadPageButton
{
	width: 32px;
	height: 32px;
	border-color: blue;
	background-color: red;
}


#BasicStats
{
	vertical-align: bottom;
	horizontal-align: right;
	opacity: 0;
	margin-right: 512px;
	margin-left: 0px;
	margin-bottom: 64px;

	transition-property: opacity;
	transition-duration: 0.3s;
	transition-delay: HeroTransitionDuration;
}

.LeftExpanded #LeftHeroStats #BasicStats,
.RightExpanded #RightHeroStats #BasicStats
{
	opacity: 1;
	transition-delay: 0s;
	transition-duration: 0.26s;
}

#RightHeroStats #BasicStats
{
	horizontal-align: left;
	margin-left: 512px;
	margin-right: 0px;
}

#BasicStats .OverviewHeroNetWorth
{
	font-size: 24px;
	text-shadow: 0px 1px 3px 3.0 #000000;
}

#BasicStats .OverviewHeroDeathsAssists,
#BasicStats .OverviewHeroKills
{
	font-size: 32px;
	text-shadow: 0px 1px 3px 3.0 #000000;
}

.MatchInfo
{
	horizontal-align: center;
	flow-children: right;
	vertical-align: bottom;
}

.MatchInfo Label
{
	text-shadow: 0px 1px 3px #000;
}

.SummaryLoadingSpinner
{
	flow-children: right;
	horizontal-align: center;
	vertical-align: middle;
}

#CommentsVisibleClearBox
{
	width: 100%;
	height: 100%;
	visibility: collapse;
}

#CommentsVisibleClearBox.CommentsVisible
{
	visibility: visible;
}

#CommentIcon
{
	width: 24px;
	height: 24px;
	horizontal-align: center;
	margin-top: 8px;
	wash-color: #536B7E;
	wash-color: #2090DA;
	background-image: url("s2r://panorama/images/control_icons/comment_psd.vtex");
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: 0;
	pre-transform-scale2d: .2;

	transition-property: opacity, pre-transform-scale2d;
	transition-duration: 0.3s;
	transition-delay: HeroTransitionDuration;
}

.CommentsStatusSome #CommentIcon
{
	opacity: 1;
	pre-transform-scale2d: 1;
}

.IsLocalPlayer
{
	visibility: collapse;
}

.LocalPlayer .IsLocalPlayer
{
	visibility: visible;
}

.NotLocalPlayer
{
	visibility: visible;
}

.LocalPlayer .NotLocalPlayer
{
	visibility: collapse;
}

#MVPVote
{
	horizontal-align: center;
	visibility: collapse;
	background-image: url("s2r://panorama/images/hud/player_mvp_crown_png.vtex");
	background-repeat: no-repeat;
	background-size: contain;
	width: 27px;
	height: 23px;
	margin-top: 30px;
	z-index: 10;

	tooltip-position: right;
	tooltip-body-position: 50% 50%;
}

.WasAwardedMVP #MVPVote
{
	visibility: visible;
}

.IsBot .IndividualStatsContainer #PlayerName, .IsBot .IndividualStatsContainer #MVPVote
{
	visibility: collapse;
}

.IndividualStatsContainer #BotPlayerName
{
	visibility: collapse;
}

.IsBot .IndividualStatsContainer #BotPlayerName
{
	visibility: visible;
}

.CrestIcon
{
	width: 21px;
	height: 21px;
	margin-top: 0px;
	margin-bottom: -3px;
	margin-left: -3px;
	transform: translateY( 4px );
}


DOTAPostGameOverviewHeroContainer.Expanded #RankTierContainer,
DOTAPostGameOverviewHeroContainer.Expanded .RoleText
{
	visibility: collapse;
}


DOTAPostGameOverviewHeroContainer #RankTierContainer
{
	margin-top: 2px;
	horizontal-align: center;
}

.RankTierContainer
{
	vertical-align: bottom;

	width: 88px;
	height: 88px;
	margin-bottom: 20px;

	tooltip-position: bottom;
	tooltip-body-position: 50% 10%;

	background-size: 100%;
	visibility: collapse;

	ui-scale: 90%;
}

.PinnedPlayerRow .RankTierContainer
{
	horizontal-align: right;
	height: 55px;
	width: 55px;
	margin-bottom: 0px;
}

.Ranked .RankTierContainer
{
	visibility: visible;
}

.Ranked.GraphsVisible .RankTierContainer
{
	visibility: collapse;
}

.Ranked.GraphsVisible.GraphTeamNetWorth .RankTierContainer,
.Ranked.GraphsVisible.GraphPlayerItems .RankTierContainer
{
	visibility: visible;
}

.RankTierContainer #RankTier, .RankTierContainer #RankPips
{
	width: 100%;
	height: 100%;
	background-size: 100%;
}

.RankTierContainer #BackgroundFX, .RankTierContainer #EliteFX
{
	width: 100%;
	height: 100%;
	visibility: collapse;
	opacity-mask: url("s2r://panorama/images/masks/softedge_box_irregular_png.vtex");
}


.RankTierContainer #LevelUpFX
{
	width: 100%;
	height: 100%;
	visibility: collapse;
	opacity-mask: url("s2r://panorama/images/masks/softedge_box_irregular_png.vtex");
}

.RankTierContainer #RankLeaderboard
{
	color: #F7E5c3;
//	letter-spacing: 1px;
	font-size: 18px;
	text-align: center;
	text-shadow: 2px 2px #00000080;
	horizontal-align: center;
	vertical-align: bottom;

	background-color: #00000060;
	width: 100%;
	visibility: collapse;
}

.HasLeaderboardRank #RankLeaderboard
{
	visibility: visible;
}

.RadiantVictory #LeftHeroes #BackgroundFX,
.RadiantVictory #Pinned_2 #BackgroundFX,
.RadiantVictory #LeftHeroes #LevelUpFX,
.RadiantVictory #Pinned_2 #LevelUpFX
{
	visibility: visible;
}
.RadiantVictory #LeftHeroes .RankDataMissing #BackgroundFX,
.RadiantVictory #Pinned_2 .RankDataMissing #BackgroundFX,
.RadiantVictory #LeftHeroes .RankDataMissing #LevelUpFX,
.RadiantVictory #Pinned_2 .RankDataMissing #LevelUpFX
{
	visibility: collapse;
}

.DireVictory #RightHeroes #BackgroundFX,
.DireVictory #Pinned_3 #BackgroundFX,
.DireVictory #RightHeroes #LevelUpFX,
.DireVictory #Pinned_3 #LevelUpFX
{
	visibility: visible;
}
.DireVictory #RightHeroes .RankDataMissing #BackgroundFX,
.DireVictory #Pinned_3 .RankDataMissing #BackgroundFX,
.DireVictory #RightHeroes .RankDataMissing #LevelUpFX,
.DireVictory #Pinned_3 .RankDataMissing #LevelUpFX
{
	visibility: collapse;
}

/* Basic Graphs Tab */

#DetailsBasicGraphs
{
	///flow-children: down;

	width: 1392px;
	//width: 100%;
	//margin-right: 264px;
	height: 100%;
	padding: 0px;
	opacity: 0;
	horizontal-align: center;
}

#DetailsBasicGraphs.TabSelected
{
	opacity: 1;
}

.TransitionFade
{
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 0.32s;
}


/* Personal Performance Graphs Tab */

#DetailsPersonalPerf
{
	///flow-children: down;

	width: 1392px;
	//width: 100%;
	//margin-right: 264px;
	height: 100%;
	padding: 0px;
	opacity: 0;
	horizontal-align: center;
}

#DetailsPersonalPerf.TabSelected
{
	opacity: 1;
}

.GraphPersonalKills #DetailsPersonalCanvas,
.GraphPersonalDeaths #DetailsPersonalCanvas,
.GraphPersonalAssists #DetailsPersonalCanvas,
.GraphPersonalLastHits #DetailsPersonalCanvas,
.GraphPersonalDenies #DetailsPersonalCanvas,
.GraphPersonalNetWorth #DetailsPersonalCanvas,
.GraphPersonalNetWorth #DetailsPersonalStatKey,
.GraphPersonalKills #DetailsPersonalStatKey,
.GraphPersonalDeaths #DetailsPersonalStatKey,
.GraphPersonalAssists #DetailsPersonalStatKey,
.GraphPersonalLastHits #DetailsPersonalStatKey,
.GraphPersonalDenies #DetailsPersonalStatKey
{
	opacity: 1;
	visibility: visible;
}


.TransitionFade
{
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 0.32s;
}

.StatContainer
{
	flow-children: right;
	background-color: #222222ff;
	padding: 2px 6px;
	margin-top: 8px;
	margin-left: 10px;
	visibility: collapse;
	height: 72px;
}

.PersonalStats1 .Stat0
{
	visibility: visible;
}

#PinnedStats
{
	vertical-align: bottom;
	height: 770px;
	width: 380px;
	transform: translateX(-740px);
	opacity: 1;
	transition-property: transform, opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 0.34s, .5s;
}

.PersonalGraphsVisible #PinnedStats
{
	transform: translateX(0px);
	opacity: 1;
}

#PinnedStatsLeftMargin
{
	width: 32px;
	height: 100%;
}


#PostGameProgress
{
	opacity: 0.0;

	transition-property: opacity;
	transition-duration: 0.3s;
}
.ProgressVisible #PostGameProgress
{
	opacity: 1.0;
}

.ProgressPending #ContainerDetails,
.ProgressMVPVote #ContainerDetails,
.ProgressVisible #ContainerDetails
{
	opacity: 0.0;
}

#PerformanceMarkers
{
	width: 296px;
	horizontal-align: center;
	height: 32px;
	vertical-align: bottom;
	z-index: 0;
	flow-children: right;
	margin-bottom: 8px;
	opacity: .2;
}

.RecentMatchPerformanceContainer
{
	width: fill-parent-flow(1);
	flow-children: down;
}

.PerformanceIndicator
{
	width: 16px;
	height: 6px;
	background-image: url("s2r://panorama/images/control_icons/arrow_solid_up_png.vtex");
	background-size: 100%;
	background-repeat: no-repeat;
	horizontal-align: center;
	wash-color: #6a9a70;
}

.PerformanceIndicator.CPip,
.PerformanceIndicator.DPip
{
	transform: scale3d( 1, -1, 1 ) translateY(-2px);
	wash-color: #99554a;
}

.DGrade .PerformanceIndicator.APip,
.DGrade .PerformanceIndicator.BPip,
.CGrade .PerformanceIndicator.APip,
.CGrade .PerformanceIndicator.BPip,
.CGrade .PerformanceIndicator.DPip,
.BGrade .PerformanceIndicator.APip,
.BGrade .PerformanceIndicator.CPip,
.BGrade .PerformanceIndicator.DPip,
.AGrade .PerformanceIndicator.CPip,
.AGrade .PerformanceIndicator.DPip
{
	opacity: 0;
}



.RankTierImage
{
	width: 60px;
	height: 60px;
	background-size: 100%;
	transition-property: wash-color;
}

#RankTierDropDown
{
	height: 56px;
	width: 226px;
	margin-left: 8px;
}

#RankRadio1 .RadioBox,
#RankRadio2 .RadioBox,
#RankRadio3 .RadioBox,
#RankRadio4 .RadioBox,
#RankRadio5 .RadioBox,
#RankRadio6 .RadioBox,
#RankRadio7 .RadioBox
{
	vertical-align: center;
}


#RankRadio1
{
	margin-left: 20px;
}

.RoleText
{
	text-align: center;
	color: #ccc;
	font-size: 14px;
	vertical-align: bottom;
	horizontal-align: center;
}

// Battlepass XP

.es-player-xp-container {
	width: 450px;
}

.es-player-xp {
	flow-children: none; 
	width: 300px;
	vertical-align: center;
	background-color: black;
	border: 1px solid #222;
	height: 26px;
	box-shadow: 0 0 5px 0 #00000022 inset;
}

.level-up {
	animation-name: level_up;
	animation-duration: 2.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}

.level-down {
	animation-name: level_down;
	animation-duration: 2.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}

#es-player-xp-progress { 

	background-color: gradient( linear, 0% 0%, 0% 100%, from( #006E2E ),  to( #00540E ) );
	border-radius: 1px;
	width: 0%;
	height: 24px;
	transition-property: width;
	transition-duration: 2s;
}

#es-player-xp-progress-diff { 

	background-color: gradient( linear, 0% 0%, 0% 100%, from( #B2A603 ),  to( #857D05 ) );
	border-radius: 1px;
	width: 0%;
	height: 24px;
	transition-property: width;
	transition-duration: 2s;
}

.es-player-xp Label {
	color: #fff;
	width: 100%;
	font-size: 16px;
	vertical-align: center;
	padding: 2px 5px;
}

#es-player-xp-rank { text-align: right; }
#es-player-xp-level { text-align: left; }
#es-player-xp-xp { text-align: right; }

#es-player-xp-rank-name {
	vertical-align: center;
	text-align: center;
}

#es-player-xp-earned,
#es-player-xp-booster {
	width: 70px;
	vertical-align: center;
	text-align: center;
	text-overflow: shrink;
}

#es-player-xp-booster {
	color: white;
}

.es-player-line-text {
	font-size: 16px;
}

.es-legend-rank { width: 80px; }

.es-text-red { color: #f03333; }
.es-text-green { color: #72a144; }
.es-text-white { color: #ffffff; }

// End Screen Disconnect Button

#DisconnectButton
{
	width: 330px;
	height: 33px;

	min-width: 330px;
	min-height: 48px;

	padding: 4px 12px 4px 12px;

	margin-bottom: 5%;

	background-color: gradient( linear, 0% 0%, 0% 100%, from( #722217 ), to( #DD4A29 ) );
	background-image: url("s2r://panorama/images/backgrounds/background_play_button_2x_png.vtex");
	background-size: 328px 50px;

	border-top: 1px solid #ffffff05;
	border-right: 1px solid #00000088;
	border-left: 1px solid #ffffff05;
	border-bottom: 1px solid #00000088;

//	visibility: collapse;

	align: center bottom;
}

#DisconnectButton Image
{
	wash-color: red;
	width: 26px;
	height: 26px;
	margin: 2px;
	margin-left: 6px;
}

.DisconnectLabel
{
	margin-top: 4px;
	vertical-align: middle;
	horizontal-align: center;
}

#DisconnectButton Label
{
	text-transform: uppercase;
	color: white;
	font-size: 26px;
}

#DisconnectButton:hover Label
{
	color: red;
}

#DisconnectButton:active
{
	sound: "ui_custom_lobby_quit";
}

// Reward panel

#RewardContainer {
	width: 100%;
	padding: 1%;
	align: center center;
	flow-children: right;
}

.es-player-reward-container {
	padding: 25px;
	margin-right: 25%; /* not sure why this is required so panels don't overlap */
	width: 24%;
	animation-name: fade_in;
	animation-duration: 1.25s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #000000aa ), to( #000000da ) );
	border-radius: 20px;
	flow-children: down;
	align: center center;
}

.es-player-reward-description {
	align: center center;
	font-size: 24px;
}

.es-player-reward-name {
	margin-top: 20px;
	align: center center;
}

.es-player-reward-rarity {
	margin-top: 20px;
	align: center center;
}

.es-player-reward-image {
	margin-top: 20px;
	width: 250px;
	height: 220px;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	align: center center;
}

.es-player-reward-button {
	margin-top: 20px;
	padding: 5px;
	align: center center;
	width: 50%;
	background-image: url("s2r://panorama/images/backgrounds/background_play_button_2x_png.vtex");
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #404040 ), to( #606060 ) );
}

.es-player-reward-button_label {
	text-align: center;
	width: 100%;
}

.level-rare {
	animation-name: level_rare;
	animation-duration: 2.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}

.level-mythical {
	animation-name: level_mythical;
	animation-duration: 2.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}

.level-immortal {
	animation-name: level_immortal;
	animation-duration: 2.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}

.level-arcana {
	animation-name: level_arcana;
	animation-duration: 2.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}

.level-ancient {
	animation-name: level_ancient;
	animation-duration: 2.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}