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

CitadelPopupRosterSelect
{
	width: 100%;
	height: 100%;
	background-color: #000000;
	background-image: url("s2r://panorama/images/main_menu/pick_screen/smoke_bg_psd.vtex");
	background-size: cover;
}

#RosterMainBG
{
	width: 100%;
	height: 100%;
	opacity: 1;
}

#HeroScenePanelBacker
{
	width: 100%;
	height: 100%;
	horizontal-align: center;
	margin-right: 00px;
	margin-left: 130px;
	margin-bottom: 60px;
	margin-right: 100px;
	margin-left: 0px;
	opacity: 1;
	blur: gaussian(2px);
	opacity: .03;
	pre-transform-scale2d: 1.1;
}

.AspectRatio21x9 #HeroScenePanelBacker
{
	margin-right: 0px;
}

#CustomHeroBackground
{
	ignore-parent-flow: true;
	width: 100%;
	height: 100%;
	ui-scale: 100%;
	opacity: 1;
}

@keyframes 'BGGroove'
{
	0%
	{
		transform: skew(-10deg);
	}

	50%
	{
		transform: skew(10deg);
	}

	100%
	{
		transform: skew(-10deg);
	}

}

.clampwidth
{
	width: 100%;
	height: 100%;
	horizontal-align: center;
}

#HeroScenePanel
{
	width: 100%;
	height: 100%;
	horizontal-align: center;
	background-color: #00000001;
	opacity-mask: url("s2r://panorama/images/masks/hero_roster_psd.vtex");
	max-width: 2000px;
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 0.21s;
	transform: translateX(150px);
	opacity-brush: gradient( linear, 50% 50%, 100% 100%, from( #ffffff ), to( #000000 ) );
}

#HeroScenePanel.SceneLoaded
{
	opacity: 1;
}

#HeroScenePanelMask
{
	width: 128px;
	height: 128px;
	background-color: white;
	pre-transform-scale2d: 0;
	horizontal-align: right;
	margin: 24px;
	saturation: 0;
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 1.21s;
}

#HeroScenePanelBlur
{
	width: 100%;
	height: 100%;
	background-image: url("panel://HeroScenePanel");
	background-size: contain;
	horizontal-align: center;
	vertical-align: center;
	max-width: 2000px;
	opacity-mask: url("panel://HeroScenePanelMask")-1;
	contrast: 1.4;
	brightness: 1.0;
	transform: translateX(150px);
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 1.21s;
	opacity: 0.3;
}

#HeroScenePanelBlur .FilmGrain
{
	width: 200%;
	height: 200%;
	overflow: noclip;
	opacity: 0.28;
	background-color: red;
	background-image: url("s2r://panorama/images/textures/filmgrain_psd.vtex");
	background-size: 512px;
	animation-name: HeroMezzotintMotion;
	-s2-mix-blend-mode: screen;
	animation-duration: 182ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-frame-time: 64ms;
}

#HeroStats
{
	flow-children: down;
	horizontal-align: right;
	vertical-align: middle;
}

#HeroStats .statHoverIcon
{
	margin: 5px 0px;
	width: 46px;
	height: 36px;
	background-color: offWhite;
	border-radius: 50px 0px 0px 50px;
	opacity: 0.1;
	transition-property: background-color, pre-transform-scale2d, opacity;
	transition-duration: 0.05s;
}

#HeroStats .statHoverIcon:hover
{
	background-color: offWhite;
	opacity: 1;
}

.prereleaseOnly #HeroStats
{
	visibility: collapse;
}

#HeroStats .statIcon
{
	width: 20px;
	height: 20px;
	vertical-align: middle;
	horizontal-align: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	wash-color: offBlack;
}

#HeroStats #WeaponStats .statIcon
{
	background-image: url("s2r://panorama/images/hud/core/icon_courage.vsvg");
}

#HeroStats #VitalityStats .statIcon
{
	background-image: url("s2r://panorama/images/hud/core/icon_fortitude.vsvg");
}

#HeroStats #SpiritStats .statIcon
{
	background-image: url("s2r://panorama/images/hud/core/icon_spirit.vsvg");
}

#HeroStats #MiscStats .statIcon
{
	wash-color: none;
	width: 30px;
	height: 30px;
}

@keyframes 'HeroMezzotintMotion'
{
	0%
	{
		transform: translateX(-54px) translateY(-24px);
	}

	20%
	{
		transform: translateX(44px) translateY(-34px);
	}

	30%
	{
		transform: translateX(34px) translateY(-44px);
	}

	40%
	{
		transform: translateX(-24px) translateY(-54px);
	}

	50%
	{
		transform: translateX(-124px) translateY(-54px);
	}

	60%
	{
		transform: translateX(-24px) translateY(-154px);
	}

	70%
	{
		transform: translateX(-84px) translateY(-14px);
	}

	80%
	{
		transform: translateX(-94px) translateY(-14px);
	}

	90%
	{
		transform: translateX(-42px) translateY(-76px);
	}

	100%
	{
		transform: translateX(-0px) translateY(-14px);
	}

}

#HeroInfo
{
	flow-children: down;
	width: 600px;
	padding: 0px;
	horizontal-align: right;
	margin: 50px;
	vertical-align: bottom;
	overflow: noclip;
	visibility: collapse;
}

.ShowingHero #HeroInfo
{
	visibility: visible;
}

#HeroInfo #GunTag
{
	horizontal-align: right;
	visibility: collapse;
	animation-name: TagGroove2;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

#HeroInfo #GunTag Label
{
	font-family: block;
	font-size: 30px;
	text-transform: uppercase;
	color: offWhite;
	padding: 0px 10px;
}

#HeroInfo #HeroName
{
	font-size: 160px;
	text-overflow: shrink;
	max-height: 120px;
	max-width: 650px;
	font-weight: bold;
	font-family: block;
	text-transform: uppercase;
	text-align: center;
	horizontal-align: center;
}

.Language_english #HeroInfo #HeroName
{
	visibility: collapse;
}

.Language_japanese #HeroInfo #HeroName
{
	font-size: 55px;
}

.EnglishHeroNames #HeroInfo #HeroName
{
	visibility: collapse;
}

.hero_priest #HeroInfo #HeroName
{
	visibility: visible;
}

.hero_graf #HeroInfo #HeroName
{
	visibility: visible;
}

.hero_fortuna #HeroInfo #HeroName
{
	visibility: visible;
}

.hero_swan #HeroInfo #HeroName
{
	visibility: visible;
}

.hero_skyrunner #HeroInfo #HeroName
{
	visibility: visible;
}

.hero_druid #HeroInfo #HeroName
{
	visibility: visible;
}

#HeroInfo #HeroLogo
{
	width: 600px;
	height: 160px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	visibility: collapse;
	wash-color: offWhite;
	horizontal-align: middle;
	margin-bottom: 30px;
}

.Language_english #HeroInfo #HeroLogo
{
	visibility: visible;
}

.Language_japanese #HeroInfo #HeroLogo
{
	visibility: visible;
}

.EnglishHeroNames #HeroInfo #HeroLogo
{
	visibility: visible;
}

.hero_atlas #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/abrams.vsvg");
}

.hero_bebop #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/bebop.vsvg");
}

.hero_bookworm #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/paige.vsvg");
	height: 200px;
	margin-bottom: 10px;
}

.hero_nano #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/calico.vsvg");
}

.hero_doorman #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/doorman.vsvg");
}

.hero_drifter #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/drifter.vsvg");
	margin-bottom: 10px;
}

.hero_dynamo #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/dynamo.vsvg");
}

.hero_frank #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/victor.vsvg");
}

.hero_orion #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/grey_talon.vsvg");
	margin-bottom: 0px;
}

.hero_haze #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/haze.vsvg");
	height: 140px;
	width: 550px;
}

.hero_astro #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/holliday.vsvg");
}

.hero_inferno #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/infernus.vsvg");
	width: 550px;
}

.hero_tengu #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/ivy.vsvg");
}

.hero_kelvin #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/kelvin.vsvg");
}

.hero_ghost #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/lady_geist.vsvg");
}

.hero_lash #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/lash.vsvg");
	height: 180px;
}

.hero_forge #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/mcginnis.vsvg");
}

.hero_mirage #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/mirage.vsvg");
	height: 200px;
	margin-bottom: 10px;
}

.hero_krill #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/mo_krill.vsvg");
}

.hero_chrono #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/paradox.vsvg");
}

.hero_synth #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/pocket.vsvg");
	height: 250px;
}

.hero_punkgoat #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/billy.vsvg");
}

.hero_gigawatt #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/seven.vsvg");
}

.hero_shiv #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/shiv.vsvg");
	height: 200px;
}

.hero_magician #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/sinclair.vsvg");
}

.hero_vampirebat #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/mina.vsvg");
	margin-bottom: -30px;
	height: 200px;
}

.hero_hornet #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/vindicta.vsvg");
	margin-bottom: 5px;
}

.hero_viscous #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/viscous.vsvg");
	height: 180px;
}

.hero_warden #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/warden.vsvg");
}

.hero_wraith #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/wraith.vsvg");
	width: 550px;
}

.hero_viper #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/vyper.vsvg");
	height: 220px;
	margin-bottom: 5px;
}

.hero_yamato #HeroInfo #HeroLogo
{
	background-image: url("s2r://panorama/images/heroes/hero_names/yamato.vsvg");
}

.hero_haze #HeroInfo #HeroLogo
{
	opacity-brush: gradient( linear, 40% 0%, 100% 0%, from( #ffffff ), to( #ffffff30) );
}

.hero_priest #HeroInfo #HeroLogo
{
	visibility: collapse;
}

.hero_graf #HeroInfo #HeroLogo
{
	visibility: collapse;
}

.hero_fortuna #HeroInfo #HeroLogo
{
	visibility: collapse;
}

.hero_swan #HeroInfo #HeroLogo
{
	visibility: collapse;
}

.hero_skyrunner #HeroInfo #HeroLogo
{
	visibility: collapse;
}

.hero_druid #HeroInfo #HeroLogo
{
	visibility: collapse;
}

#HeroInfo #HeroTags
{
	horizontal-align: center;
	padding: 0px 0px 10px 0px;
	flow-children: right;
	overflow: noclip;
}

#HeroInfo #HeroTags .heroTag
{
	padding: 5px;
	height: 50px;
}

#HeroInfo #HeroTags .heroTag .tagBacker
{
	width: 100%;
	height: 96%;
	background-color: black;
	margin: 1px;
}

.hero_atlas #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: abramsColor;
	box-shadow: 0px 0px 1px abramsColor;
}

.hero_bebop #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: bebopColor;
	box-shadow: 0px 0px 1px bebopColor;
}

.hero_bookworm #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: bookwormColor;
	box-shadow: 0px 0px 1px bookwormColor;
}

.hero_nano #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: nanoColor;
	box-shadow: 0px 0px 1px nanoColor;
}

.hero_doorman #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: doormanColor;
	box-shadow: 0px 0px 1px doormanColor;
}

.hero_drifter #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: drifterColor;
	box-shadow: 0px 0px 1px drifterColor;
}

.hero_dynamo #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: dynamoColor;
	box-shadow: 0px 0px 1px dynamoColor;
}

.hero_frank #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: frankColor;
	box-shadow: 0px 0px 1px frankColor;
}

.hero_orion #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: orionColor;
	box-shadow: 0px 0px 1px orionColor;
}

.hero_haze #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: hazeColor;
	box-shadow: 0px 0px 1px hazeColor;
}

.hero_astro #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: astroColor;
	box-shadow: 0px 0px 1px astroColor;
}

.hero_inferno #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: infernoColor;
	box-shadow: 0px 0px 1px infernoColor;
}

.hero_tengu #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: tenguColor;
	box-shadow: 0px 0px 1px tenguColor;
}

.hero_kelvin #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: kelvinColor;
	box-shadow: 0px 0px 1px kelvinColor;
}

.hero_ghost #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: ghostColor;
	box-shadow: 0px 0px 1px ghostColor;
}

.hero_lash #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: lashColor;
	box-shadow: 0px 0px 1px lashColor;
}

.hero_forge #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: forgeColor;
	box-shadow: 0px 0px 1px forgeColor;
}

.hero_mirage #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: mirageColor;
	box-shadow: 0px 0px 1px mirageColor;
}

.hero_krill #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: krillColor;
	box-shadow: 0px 0px 1px krillColor;
}

.hero_chrono #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: chronoColor;
	box-shadow: 0px 0px 1px chronoColor;
}

.hero_synth #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: synthColor;
	box-shadow: 0px 0px 1px synthColor;
}

.hero_priest #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: priestColor;
	box-shadow: 0px 0px 1px priestColor;
}

.hero_punkgoat #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: punkgoatColor;
	box-shadow: 0px 0px 1px punkgoatColor;
}

.hero_gigawatt #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: gigawattColor;
	box-shadow: 0px 0px 1px gigawattColor;
}

.hero_shiv #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: shivColor;
	box-shadow: 0px 0px 1px shivColor;
}

.hero_magician #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: magicianColor;
	box-shadow: 0px 0px 1px magicianColor;
}

.hero_vampirebat #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: vampirebatColorDk;
	box-shadow: 0px 0px 1px vampirebatColorDk;
}

.hero_hornet #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: hornetColor;
	box-shadow: 0px 0px 1px hornetColor;
}

.hero_viscous #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: viscousColor;
	box-shadow: 0px 0px 1px viscousColor;
}

.hero_viper #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: viperColor;
	box-shadow: 0px 0px 1px viperColor;
}

.hero_warden #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: wardenColor;
	box-shadow: 0px 0px 1px wardenColor;
}

.hero_wraith #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: wraithColor;
	box-shadow: 0px 0px 1px wraithColor;
}

.hero_yamato #HeroInfo #HeroTags .heroTag .tagBacker
{
	background-color: yamatoColor;
	box-shadow: 0px 0px 1px yamatoColor;
}

#HeroInfo #HeroTags .heroTag Label
{
	font-family: block;
	font-size: 30px;
	text-transform: uppercase;
	color: offWhite;
	margin: 1px;
	padding: 0px 10px;
	max-width: 200px;
	text-overflow: shrink;
	max-height: 36px;
	text-align: center;
}

.hero_vampirebat #HeroInfo #HeroTags .heroTag Label
{
	color: vampirebatColor;
}

.hero_hornet #HeroInfo #HeroTags .heroTag Label
{
	color: offBlack;
}

.hero_punkgoat #HeroInfo #HeroTags .heroTag Label
{
	color: offBlack;
}

.hero_magician #HeroInfo #HeroTags .heroTag Label
{
	color: offBlack;
}

.hero_viper #HeroInfo #HeroTags .heroTag Label
{
	color: offBlack;
}

#HeroInfo #HeroTags .heroTag.Tag1
{
	x: 0px;
	y: 10px;
	transform: rotateZ(-3deg);
}

#HeroInfo #HeroTags .heroTag.Tag2
{
	x: 170px;
	y: 45px;
	margin-top: 10px;
	transform: rotateZ(3deg);
}

.hero_frank #HeroInfo #HeroTags .heroTag.Tag2
{
	y: 45px;
	x: 220px;
}

.hero_vampirebat #HeroInfo #HeroTags .heroTag.Tag2
{
	y: 40px;
	x: 200px;
}

#HeroInfo #HeroTags .heroTag.Tag3
{
	x: 350px;
	y: 10px;
	transform: rotateZ(5deg);
}

#HeroInfo #HeroTags .Tag1 .tagBacker
{
	animation-name: TagGroove1;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

#HeroInfo #HeroTags .Tag2 .tagBacker
{
	animation-name: TagGroove2;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

#HeroInfo #HeroTags .Tag3 .tagBacker
{
	animation-name: TagGroove3;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

.prereleaseOnly #HeroInfo #HeroTags
{
	visibility: collapse;
}

@keyframes 'TagGroove1'
{
	0%
	{
		transform: rotateZ(-3deg);
	}

	25%
	{
		transform: rotateZ(-3deg);
	}

	26%
	{
		transform: rotateZ(2deg);
	}

	50%
	{
		transform: rotateZ(2deg);
	}

	51%
	{
		transform: rotateZ(-1deg);
	}

	75%
	{
		transform: rotateZ(-1deg);
	}

	76%
	{
		transform: rotateZ(0deg);
	}

	100%
	{
		transform: rotateZ(0deg);
	}

}

@keyframes 'TagGroove2'
{
	0%
	{
		transform: rotateZ(4deg);
	}

	25%
	{
		transform: rotateZ(4deg);
	}

	26%
	{
		transform: rotateZ(-1deg);
	}

	50%
	{
		transform: rotateZ(-1deg);
	}

	51%
	{
		transform: rotateZ(0deg);
	}

	75%
	{
		transform: rotateZ(0deg);
	}

	76%
	{
		transform: rotateZ(2deg);
	}

	100%
	{
		transform: rotateZ(2deg);
	}

}

@keyframes 'TagGroove3'
{
	0%
	{
		transform: rotateZ(-3deg);
	}

	25%
	{
		transform: rotateZ(-3deg);
	}

	26%
	{
		transform: rotateZ(-1deg);
	}

	50%
	{
		transform: rotateZ(-1deg);
	}

	51%
	{
		transform: rotateZ(2deg);
	}

	75%
	{
		transform: rotateZ(2deg);
	}

	76%
	{
		transform: rotateZ(0deg);
	}

	100%
	{
		transform: rotateZ(0deg);
	}

}

#HeroAbilities
{
	horizontal-align: center;
	vertical-align: bottom;
	width: 450px;
	height: 100px;
	flow-children: right;
	ui-scale: 90%;
	opacity: 1;
	visibility: collapse;
}

.ShowingHero #HeroAbilities
{
	visibility: visible;
}

.hero_atlas #HeroAbilities
{
	wash-color: abramsColor;
}

.hero_bebop #HeroAbilities
{
	wash-color: bebopColor;
}

.hero_bookworm #HeroAbilities
{
	wash-color: bookwormColor;
}

.hero_nano #HeroAbilities
{
	wash-color: nanoColor;
}

.hero_doorman #HeroAbilities
{
	wash-color: doormanColor;
}

.hero_drifter #HeroAbilities
{
	wash-color: drifterColor;
}

.hero_dynamo #HeroAbilities
{
	wash-color: dynamoColor;
}

.hero_frank #HeroAbilities
{
	wash-color: frankColor;
}

.hero_orion #HeroAbilities
{
	wash-color: orionColor;
}

.hero_haze #HeroAbilities
{
	wash-color: hazeColor;
}

.hero_astro #HeroAbilities
{
	wash-color: astroColor;
}

.hero_inferno #HeroAbilities
{
	wash-color: infernoColor;
}

.hero_tengu #HeroAbilities
{
	wash-color: tenguColor;
}

.hero_kelvin #HeroAbilities
{
	wash-color: kelvinColor;
}

.hero_ghost #HeroAbilities
{
	wash-color: ghostColor;
}

.hero_lash #HeroAbilities
{
	wash-color: lashColor;
}

.hero_forge #HeroAbilities
{
	wash-color: forgeColor;
}

.hero_mirage #HeroAbilities
{
	wash-color: mirageColor;
}

.hero_krill #HeroAbilities
{
	wash-color: krillColor;
}

.hero_chrono #HeroAbilities
{
	wash-color: chronoColor;
}

.hero_synth #HeroAbilities
{
	wash-color: synthColor;
}

.hero_priest #HeroAbilities
{
	wash-color: priestColor;
}

.hero_punkgoat #HeroAbilities
{
	wash-color: punkgoatColor;
}

.hero_gigawatt #HeroAbilities
{
	wash-color: gigawattColor;
}

.hero_shiv #HeroAbilities
{
	wash-color: shivColor;
}

.hero_magician #HeroAbilities
{
	wash-color: magicianColor;
}

.hero_vampirebat #HeroAbilities
{
	wash-color: vampirebatColor;
}

.hero_hornet #HeroAbilities
{
	wash-color: hornetColor;
}

.hero_viscous #HeroAbilities
{
	wash-color: viscousColor;
}

.hero_viper #HeroAbilities
{
	wash-color: viperColor;
}

.hero_warden #HeroAbilities
{
	wash-color: wardenColor;
}

.hero_wraith #HeroAbilities
{
	wash-color: wraithColor;
}

.hero_yamato #HeroAbilities
{
	wash-color: yamatoColor;
}

#HeroAbilities CitadelAbilityIcon
{
	horizontal-align: center;
	vertical-align: bottom;
	tooltip-position: top;
}

.prereleaseOnly #HeroAbilities
{
	visibility: collapse;
}

#RosterInfo
{
	horizontal-align: right;
	vertical-align: top;
	margin-top: 180px;
	margin-right: 70px;
	width: 420px;
	flow-children: down;
	visibility: collapse;
}

#RosterInfo #RosterCardImage
{
	background-image: url("s2r://panorama/images/main_menu/roster_cards_example_png.vtex");
	width: 300px;
	height: 170px;
	background-repeat: no-repeat;
	background-size: contain;
	saturation: 0.9;
	horizontal-align: middle;
	margin-top: -10px;
	margin-bottom: 5px;
}

.selected
{
	font-weight: bold;
	color: offWhite;
}

.priority
{
	color: #f7cf6a;
	font-weight: bold;
}

.high_priority
{
	color: #a464ff;
	font-weight: bold;
}

#RosterInstructions
{
	background-color: offWhite&60;
	width: 100%;
	flow-children: down;
	padding: 20px;
	color: offBlack;
}

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

#RosterInstructions Label
{
	color: offBlack;
}

#RosterInstructions .title
{
	font-weight: bold;
	font-size: 22px;
}

#RosterInstructions .desc
{
	font-weight: semi-bold;
	font-size: 17px;
	color: offBlack;
	opacity: 0.9;
}

#RosterInstructions .hint
{
	font-weight: semi-bold;
	font-size: 16px;
	color: offBlack&ea;
	margin-bottom: 5px;
}

.space_bottom
{
	margin-bottom: 10px;
}

.InlineGlyph
{
	max-height: 26px;
	max-width: 26px;
	background-color: offBlack&ee;
	padding: 3px;
	border-radius: 3px;
	opacity: 1;
	vertical-align: middle;
}

#NoHeroSelectedContainer
{
	width: fit-children;
	vertical-align: bottom;
	horizontal-align: center;
	background-color: #000000;
	padding: 10px 20px;
	background-color: rgba(225, 62, 62, 1);
}

#NoHeroSelectedContainer Label
{
	text-align: center;
	horizontal-align: center;
}

.HasValidRoster #NoHeroSelectedContainer
{
	visibility: collapse;
}

#NoHeroSelectedContainer .NoHeroDesc
{
	font-size: 18px;
	font-weight: semi-bold;
	horizontal-align: middle;
	text-align: center;
	margin-bottom: 0px;
	width: fit-children;
	color: offWhite;
}

#NoHeroSelectedContainer .NoHeroBottom
{
	font-size: 18px;
	font-weight: medium;
	color: #ffffff90;
	visibility: collapse;
}

#HeroRowContainer
{
	flow-children: down;
	vertical-align: top;
	horizontal-align: left;
	background-size: 100% 100%;
	height: 100%;
	padding: 50px 0px;
	padding-left: 80px;
	max-width: 1800px;
	z-index: 2;
}

.AspectRatio21x9 #HeroRowContainer
{
	horizontal-align: center;
	margin-right: 1400px;
}

#HeroRowContainer .ModeTitle
{
	font-size: 24px;
	font-weight: bold;
	font-family: block;
	letter-spacing: 0px;
	opacity: 0.5;
	text-transform: uppercase;
	color: #629e85;
	vertical-align: middle;
	margin-left: 20px;
}

#HeroRowContainer .PageTitle
{
	font-size: 56px;
	font-weight: bold;
	text-transform: uppercase;
	font-family: block;
	opacity: 0.6;
	horizontal-align: middle;
	font-family: oracle;
	color: #7a9392;
	margin-bottom: 15px;
	text-overflow: shrink;
	max-height: 80px;
}

.SelectingSingleHero #HeroRowContainer .PageTitle.Roster
{
	visibility: collapse;
}

#HeroRowContainer .PageTitle.SingleHero
{
	visibility: collapse;
}

.SelectingSingleHero #HeroRowContainer .PageTitle.SingleHero
{
	visibility: visible;
}

#HeroRowContainer #NameTest
{
	flow-children: down;
	horizontal-align: middle;
	width: 100%;
}

#HeroRowContainer .lineBreak
{
	background-image: url("s2r://panorama/images/main_menu/pick_screen/temp/linebreak_psd.vtex");
	width: 60%;
	horizontal-align: middle;
	height: 10px;
	background-size: contain;
	background-repeat: no-repeat;
	wash-color: #7a9392;
	vertical-align: middle;
	opacity: 0.2;
	margin-top: 5px;
}

#HeroRowContainer #GridContainer
{
	width: 630px;
	height: 710px;
	flow-children: down;
	overflow: squish scroll;
}

#HeroRowContainer #GridContainer #RosterHeroes
{
	flow-children: right-wrap;
	width: 100%;
	vertical-align: top;
	horizontal-align: left;
	padding: 20px;
	overflow: noclip;
}

#HeroRowContainer #GridContainer #RosterHeroes .HeroCard
{
	tooltip-position: right;
}

#HeroRowContainer #GridContainer #Categories
{
	height: 550px;
	width: 100%;
}

#HeroRowContainer #GridContainer .heroCategory
{
	flow-children: down;
}

#HeroRowContainer #GridContainer .heroGroup
{
	width: 100%;
	height: 100%;
}

#HeroRowContainer #GridContainer .groupTitle
{
	font-size: 16px;
	text-transform: uppercase;
	font-family: block;
	opacity: 0.5;
}

.Language_schinese #HeroRowContainer #nameTest,.Language_brazilian #HeroRowContainer #nameTest,.Language_czech #HeroRowContainer #nameTest,.Language_french #HeroRowContainer #nameTest,.Language_german #HeroRowContainer #nameTest,.Language_italian #HeroRowContainer #nameTest,.Language_indonesian #HeroRowContainer #nameTest,.Language_japanese #HeroRowContainer #nameTest,.Language_koreana #HeroRowContainer #nameTest,.Language_latam #HeroRowContainer #nameTest,.Language_polish #HeroRowContainer #nameTest,.Language_russian #HeroRowContainer #nameTest,.Language_spanish #HeroRowContainer #nameTest,.Language_thai #HeroRowContainer #nameTest,.Language_turkish #HeroRowContainer #nameTest,.Language_ukrainian #HeroRowContainer #nameTest
{
	visibility: collapse;
}

@keyframes 'CardPulse'
{
	0%
	{
		pre-transform-scale2d: 1;
		transform: translateX(0px) rotateZ(0deg);
	}

	50%
	{
		pre-transform-scale2d: 1.02;
		transform: translateX(0px) rotateZ(0.5deg);
	}

	100%
	{
		pre-transform-scale2d: 1;
		transform: translateX(0px) rotateZ(0deg);
	}

}

.PageTitle Label
{
	font-size: 26px;
	font-weight: bold;
	font-family: sans;
	letter-spacing: 0px;
	opacity: 0.5;
}

#ConfirmButtonContainer
{
	horizontal-align: middle;
	vertical-align: bottom;
	margin-bottom: 0px;
	height: 220px;
	z-index: 999;
	width: 600px;
}

.SelectingSingleHero:not(.SingleHeroRequiresConfirm) #ConfirmButtonContainer
{
	visibility: collapse;
}

#ConfirmButtonContainer .RosterError
{
	font-weight: semi-bold;
	font-style: italic;
	margin-bottom: 0px;
	font-size: 16px;
	font-family: block;
	color: #c65f3d;
	text-transform: uppercase;
	padding: 2px 10px;
	border-radius: 3px;
	horizontal-align: middle;
}

.HasValidRoster #ConfirmButtonContainer .RosterError
{
	visibility: collapse;
}

#ConfirmButton
{
	flow-children: right;
	opacity: 0.2;
	width: 100%;
	height: 100%;
	visibility: visible;
}

#ConfirmButton:hover:enabled
{
	sound: "UI.HeroCard.Hover";
}

#ConfirmButton #PlayButtonFX
{
	width: 560px;
	height: 180px;
	vertical-align: middle;
	ignore-parent-flow: true;
	horizontal-align: center;
	opacity: 0;
	margin-left: 130px;
	margin-bottom: 30px;
	transition-property: opacity;
	transition-duration: 0.2s;
}

#ConfirmButton .buttonContent
{
	margin-top: 40px;
	horizontal-align: left vertical-align: middle;
	z-index: 2;
	horizontal-align: middle;
	min-width: 300px;
}

#ConfirmButton .buttonContent .btn_bg
{
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	wash-color: rgb(18, 18, 18);
	transition-property: background-color, transform, background-image, border;
	transition-duration: 0.2s;
}

#ConfirmButton .buttonContent .btn_texture
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/main_menu/pick_screen/temp/play_box_psd.vtex");
	background-size: 100% 100%;
	opacity: 0.2;
	wash-color: #93aead;
}

.HasValidRoster #ConfirmButton
{
	visibility: visible;
	opacity: 1;
}

.HasValidRoster #ConfirmButton:hover .btn_bg
{
	transform: rotateZ(-3deg);
}

.HasValidRoster #ConfirmButton:hover .btn_texture
{
	background-image: url("s2r://panorama/images/main_menu/pick_screen/temp/play_box_fill_psd.vtex");
	transform: rotateZ(-3deg);
	opacity: 1;
	wash-color: offWhite;
}

.HasValidRoster #ConfirmButton:hover Label
{
	font-style: italic;
	color: offBlack;
}

.HasValidRoster #ConfirmButton:hover #PlayButtonFX
{
	opacity: 1;
}

.HasValidRoster #ConfirmButton:hover #playTest
{
	wash-color: offBlack;
	opacity: 1;
}

.HasValidRoster #ConfirmButton:active
{
	sound: "UI.Roster.Confirm";
}

#ConfirmButton Label
{
	font-size: 54px;
	font-weight: bold;
	color: offWhite&ee;
	font-family: oracle;
	text-transform: uppercase;
	vertical-align: middle;
	horizontal-align: middle;
	transition-duration: 0.2s;
	padding: 0px 60px;
	text-overflow: shrink;
	max-width: 300px;
}

#ConfirmButton:disabled
{
	opacity: 0.1;
	saturation: 0;
}

#ConfirmButton:hover .btn_fx
{
	opacity: 1;
}

.EscapeButton
{
	vertical-align: bottom;
	margin: 16px;
	flow-children: right;
	opacity: 0.2;
	transition-property: brightness;
	transition-timing-function: ease-in-out;
	transition-duration: 0.10s;
}

.EscapeButton:hover
{
	brightness: 2.0;
}

.EscapeButton Label
{
	font-size: 20px;
	font-weight: bold;
	color: offWhite&88;
	text-transform: uppercase;
	vertical-align: center;
	margin-top: -4px;
	font-family: block;
	padding-top: 1px;
	margin-left: 6px;
	margin-top: -2px;
	color: #969087;
}

.PartyStatus
{
	horizontal-align: right;
	flow-children: down;
	margin-top: 16px;
	visibility: collapse;
}

.ShowPartyMembers .PartyStatus
{
	visibility: visible;
}

.PartyStatus #PartyMembers
{
	flow-children: right;
	padding-right: 16px;
}

.PartyStatus #PartyMembers .PartyMember
{
	width: 100px;
	height: 100px;
	margin-left: 16px;
}

.PartyStatus #PartyMembers .PartyMember #AvatarImage
{
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.PartyStatus #PartyMembers .PartyMember .ReadyStatus
{
	width: 24px;
	height: 24px;
	background-color: #00ff00;
	horizontal-align: right;
	vertical-align: bottom;
	border-radius: 50%;
	visibility: collapse;
}

.PartyStatus #PartyMembers .PartyMember.IsReady .ReadyStatus
{
	visibility: visible;
}

.PartyStatus .PartyReadyCount
{
	horizontal-align: center;
	font-family: block;
	margin-top: 4px;
}

@define QuickSearchFadeOutTime: 1.0s;
CitadelQuickSearch
{
	vertical-align: middle;
	width: 100%;
	transition-property: pre-transform-scale2d, opacity;
	transition-duration: 0.2s;
}

CitadelQuickSearch Label
{
	width: 100%;
	text-align: center;
	text-overflow: clip;
	font-size: 100px;
	font-weight: normal;
	color: white;
	text-transform: uppercase;
}

CitadelQuickSearch.Hidden
{
	pre-transform-scale2d: 2;
	wash-color: red;
}

@keyframes 'QuickSearchFadeOut'
{
	0%
	{
		opacity: 1.0;
	}

	100%
	{
		opacity: 0.0;
	}

}

.QuickSearchAnimation
{
	animation-name: QuickSearchFadeOut;
	animation-duration: QuickSearchFadeOutTime;
}

#LoreButton
{
	width: 40px;
	height: 40px;
	horizontal-align: right;
	vertical-align: bottom;
	margin: 10px;
	border-radius: 50%;
	border: 2px solid offWhite&20;
	transition-property: background-color;
	transition-duration: 0.1s;
}

#LoreButton:hover
{
	background-color: offWhite;
}

#LoreButton:hover .loreIcon
{
	wash-color: offBlack;
	background-img-opacity: 0.8;
}

.prereleaseOnly #LoreButton
{
	visibility: collapse;
}

.loreIcon
{
	width: 22px;
	height: 22px;
	horizontal-align: center;
	vertical-align: center;
	background-image: url("s2r://panorama/images/icons/icon_book.vsvg");
	background-size: contain;
	background-img-opacity: 0.3;
}
