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

@define sans: Retail Demo, Noto Sans, sans-serif;
@define sansMono: Retail Text Demo, Noto Sans;
@define serif: Reaver, serif;
@define block: VALVEPulp, Noto Sans, sans-serif;
@define oracle: VALVEOccult, Reaver, sans-serif;
@define numericSans: MingLiu, Retail Demo, Noto Sans, sans-serif;
@define numericSerif: Gulim, Reaver, serif;
@define baseText: #FFEFD7;
@define baseBorder: #444444ff;
@define selectedTextBackgroundColor: #66666633;
@define colorEnemy: #FF410D;
@define goldColor: #FFED79;
@define blueAPTextColor: #80EEFF;
@define colorCommonOffWhite: rgb(243, 240, 231);
@define colorCommonOffWhiteA35: rgba(243, 240, 231, 0.35);
@define colorCommonDarkGray: #2e2c27;
@define colorCommonDarkestGray: #1a1a1a;
@define colorGold: #FFED79;
@define offWhite: #FFEFD7;
@define offBlack: #10130D;
@define silvered: #C6C6C6;
@define soulColor: #70F8C1;
@define shardColor: #99FFD6;
@define brandGreen: #5FE69E;
@define ritualGreen: #65951D;
@define ritualGreenLight: #7CBC1D;
@define geistBookColor: #33A357;
@define geistBookDarkColor: #0E381B;
@define buildsColor: #4D7EC8;
@define buildsDarkColor: #365B92;
@define buildsDarkerColor: #243650;
@define buildsLightColor: #85B5FF;
@define steamBlue: #1A9FFF;
@define colorUpgrades: #00FFFF;
@define apCurrencyColor: #d8b8ff;
@define team1Color: #BF9A53;
@define team1ColorBright: #FBDCA0;
@define team1ColorDark: #937600;
@define team1ColorDarker: #423A1D;
@define team1ColorNeutral: #55503E;
@define team2Color: #5B79E6;
@define team2ColorBright: #BDCBFF;
@define team2ColorDark: #4156A0;
@define team2ColorDarker: #243265;
@define team2ColorNeutral: #54596C;
@define courageLightColor: #FFD18D;
@define courageBrightColor: #EC9719;
@define courageColor: #9D620B;
@define courageDarkColor: #7F540E;
@define courageDarkerColor: #302306;
@define fortitudeLightColor: #D3FC96;
@define fortitudeBrightColor: #7BBA1D;
@define fortitudeColor: #649717;
@define fortitudeDarkColor: #4C7113;
@define fortitudeDarkerColor: #1F3400;
@define spiritLightColor: #E7C8FF;
@define spiritBrightColor: #CE90FF;
@define spiritColor: #8A55B3;
@define spiritDarkColor: #613484;
@define spiritDarkerColor: #362147;
@define ingameHudBlur: gaussian(2,2,2);
@define menuBlur: mipmapgaussian( 4, 4, 4);
@define weaponColor: #E58A00;
@define weaponColorFaded: #FFA82622;
@define armorColor: #00FF99;
@define armorColorFaded: #00FF9922;
@define techColor: #00DDFF;
@define techColorFaded: #245359;
@define favColor: #FFDB4C;
@define weaponColorBright: #E58A00;
@define weaponColorMedium: #C87903;
@define weaponColorDark: #7F4F05;
@define armorColorBright: #00F794;
@define armorColorMedium: #00A664;
@define armorColorDark: #274C3D;
@define techColorBright: #00DDFF;
@define techColorMedium: #009BB2;
@define techColorDark: #245359;
@define defaultBGColor1: #333333;
@define defaultBGColor2: #404040;
@define defaultBGColor3: #4D4D4D;
@define defaultBGColor4: #595959;
@define rank0Color: #333333;
@define rank1Color: #6A3E1E;
@define rank2Color: #882355;
@define rank3Color: #5C6DAB;
@define rank4Color: #719C47;
@define rank5Color: #DDA326;
@define rank6Color: #EE4F57;
@define rank7Color: #B47FEB;
@define rank8Color: #955138;
@define rank9Color: #7C7C7C;
@define rank10Color: #C39751;
@define rank11Color: #5CE9A9;
@define abramsColor: #2092AE;
@define bookwormColor: #258F63;
@define priestColor: #7354CA;
@define frankColor: #658B6F;
@define drifterColor: #9D2C2B;
@define doormanColor: #B77528;
@define magicianColor: #6B6B6B;
@define vampirebatColor: #A9171E;
@define vampirebatColorDk: #200B0B;
@define viperColor: #A7AD00;
@define punkgoatColor: #D4AD0E;
@define atlasColor: #2092AE;
@define astroColor: #A35A1B;
@define bebopColor: #9F4734;
@define chronoColor: #983952;
@define forgeColor: #23549D;
@define ghostColor: #218440;
@define gigawattColor: #CC861E;
@define hazeColor: #AC6133;
@define hazeColorDk: #20130A;
@define hornetColor: #A2C7E5;
@define infernoColor: #C93C26;
@define tenguColor: #9D8CA9;
@define kelvinColor: #74ABBC;
@define lashColor: #4174BB;
@define mirageColor: #6A2E68;
@define krillColor: #C58428;
@define orionColor: #5EB083;
@define synthColor: #858617;
@define nanoColor: #572798;
@define shivColor: #E52A68;
@define dynamoColor: #D0B945;
@define viscousColor: #319826;
@define wardenColor: #4D68A3;
@define wraithColor: #944D78;
@define wreckerColor: #7F2DB1;
@define yamatoColor: #625789;
@define laneYellowColor: #F9D506;
@define laneBlueColor: #437CDC;
@define lanePurpleColor: #C241A8;
@define laneGreenColor: #309746;
@define akimboColor: #C7B4AB;
@define ballistaColor: #BD63A4;
@define kaliColor: #D7AE61;
@define soundMainMenuHover: "UI.MainMenu.Hover";
@define soundMainMenuActivate: "UI.MainMenu.Activate";
@define soundPlayButtonClicked: "";
@define soundHeroCardHover: "UI.HeroCard.Hover";
@define soundHeroCardActivate: "UI.HeroCard.Activate";
@define soundSocialMenuHover: "";
@define soundSocialMenuActivate: "Citadel_UI.SocialMenu_Activate";
@define keybindBGColor: #e8e4ea;
@define keybindHousingBGColor: #ACA395;
@define ominousGreen: #69e799;
@define deeplyOminousGreen: #47A36C;
@define alternateProgressBarYellow: #9DCF40;
@define vivaciousGreen: #142304;
@define debuffColor: #D74949;
@define silencedDebuffColor: #bc1dca;
@define stunnedDebuffColor: #ff0000;
@define stunnedColor: #5e3a3a;
Label
{
	color: offWhite;
	font-size: 18px;
}

.LeftRightFlow
{
	flow-children: right;
}

.TopBottomFlow
{
	flow-children: down;
}

.AlignHorizontalCenter
{
	horizontal-align: center;
}

.AlignVerticalCenter
{
	vertical-align: center;
}

.FillWidth
{
	width: fill-parent-flow( 1.0 );
}

.FillHeight
{
	height: fill-parent-flow( 1.0 );
}

.Hidden
{
	visibility: collapse;
}

.display
{
	font-family: serif;
}

.silvered
{
	color: silvered;
}

.uppercase
{
	text-transform: uppercase;
}

.align_center
{
	text-align: center;
	horizontal-align: center;
}

.h1
{
	font-size: 70px;
	font-weight: bold;
}

.h2
{
	font-size: 40px;
	font-weight: bold;
	font-family: block;
	color: offWhite&88;
}

.h3
{
	font-size: 30px;
	font-weight: bold;
}

.h4
{
	font-size: 20px;
	font-weight: bold;
}

.body_lg
{
	font-size: 26px;
	font-weight: medium;
}

.body_md
{
	font-size: 18px;
	font-weight: medium;
	color: offWhite&44;
}

.body_sm
{
	font-size: 18px;
	font-weight: medium;
}

.body_xs
{
	font-size: 16px;
	font-weight: medium;
	opacity: 0.6;
}

Label
{
	font-family: sans;
}

#TitleLabel
{
	max-width: 600px;
	color: offWhite&aa;
}

Button:hover
{
	sound: soundMainMenuHover;
}

Button:active
{
	sound: soundMainMenuActivate;
}

.PrimaryButton
{
	background-size: cover;
	border: 15px solid #C6C6C600;
	border-image: url("s2r://panorama/images/global/btn_primary_frame.vsvg");
	border-image-slice: 20px fill;
	border-image-width: 20;
	border-image-outset: 8px;
	border-image-repeat: repeat;
	padding: 0px 10px;
	height: 70px;
	margin: 8px;
	transition-property: background-color, wash-color;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

.PrimaryButton Label
{
	font-size: 34px;
	color: offBlack;
	font-family: serif;
	font-weight: bold;
	horizontal-align: center;
	vertical-align: middle;
	margin-bottom: 2px;
	text-align: center;
	horizontal-align: center;
	font-weight: bold;
}

.PrimaryButton:enabled:hover
{
	wash-color: offWhite;
}

.PrimaryButton:disabled
{
	opacity: 0.3;
	brightness: 0.3;
}

.PrimaryButton:active Label
{
	transform: translateY(1px);
}

.PrimaryButton:active
{
	wash-color: #666;
}

.PrimaryButton.dark
{
	border: 15px solid offBlack&00;
	border-image: url("s2r://panorama/images/global/btn_primary_frame_drk.vsvg");
}

.PrimaryButton.dark Label
{
	color: silvered;
}

.PrimaryButton:disabled
{
	opacity: 0.3;
	brightness: 0.3;
}

.PrimaryButton.dark:hover Label
{
	font-style: italic;
}

.PrimaryButton:active
{
	wash-color: #666;
}

.SecondaryButton
{
	border: 2px solid offWhite&44;
	padding: 0px 10px;
	border-radius: 50px;
	padding: 6px 15px;
	margin: 8px;
	vertical-align: middle;
	transition-property: background-color, wash-color, border;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

.SecondaryButton Label
{
	font-size: 18px;
	color: offWhite&44;
	font-weight: semi-bold;
	horizontal-align: center;
	vertical-align: middle;
	margin-bottom: 2px;
	text-align: center;
	horizontal-align: center;
	font-family: block;
	text-overflow: shrink;
	transition-property: color, wash-color;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

.SecondaryButton:enabled:hover
{
	wash-color: offWhite&60;
	background-color: offWhite&60;
}

.SecondaryButton:enabled:hover Label
{
	color: offBlack;
}

.SecondaryButton:disabled
{
	opacity: 0.3;
	brightness: 0.3;
}

.SecondaryButton:active Label
{
	transform: translateY(1px);
}

.SecondaryButton:active
{
	wash-color: #666;
}

.SecondaryButton.hasIcon
{
	flow-children: right;
}

.SecondaryButton.small Label
{
	font-size: 16px;
}

.buttonIcon
{
	margin-right: 5px;
	width: 15px;
	height: 15px;
}

.iconOnly .buttonIcon
{
	margin-right: 0px;
}

.SecondaryButton.light
{
	border: 2px solid silvered&50;
}

.SecondaryButton.light Label
{
	color: silvered&90;
}

.SecondaryButton.light:enabled:hover
{
	background-color: silvered;
	border: 2px solid silvered&00;
}

.SecondaryButton.light:enabled:hover Label
{
	color: offBlack;
}

.SecondaryButton.light .buttonIcon
{
	wash-color: silvered;
}

.SecondaryButton.light.outline:hover .buttonIcon
{
	wash-color: offBlack;
}

.SecondaryButton.dark
{
	border: 2px solid offBlack&50;
}

.SecondaryButton.dark Label
{
	color: offBlack&90;
}

.SecondaryButton.dark:enabled:hover
{
	background-color: offBlack;
}

.SecondaryButton.dark:enabled:hover Label
{
	color: offWhite;
}

.SecondaryButton.green
{
	border: 2px solid ritualGreen;
}

.SecondaryButton.green Label
{
	color: offWhite;
}

.SecondaryButton.green:enabled:hover
{
	background-color: ritualGreen;
}

.SecondaryButton.green:enabled:hover Label
{
	color: offWhite;
}

.SecondaryButton.light.fill
{
	background-color: offWhite&44;
	border: 2px solid offWhite&00;
}

.SecondaryButton.light.fill Label
{
	color: offBlack;
}

.SecondaryButton.light.fill:enabled:hover
{
	background-color: offWhite&88;
}

.SecondaryButton.light.fill:enabled:hover Label
{
	color: offBlack;
}

.SecondaryButton.light.fill .buttonIcon
{
	wash-color: offBlack;
}

.SecondaryButton.light.fill:hover .buttonIcon
{
	wash-color: offBlack;
}

.SecondaryButton.dark.fill
{
	background-color: offBlack&50;
	border: 0px solid offBlack&00;
}

.SecondaryButton.dark.fill Label
{
	color: offWhite;
}

.SecondaryButton.dark.fill:enabled:hover
{
	background-color: offBlack;
}

.SecondaryButton.dark.fill:enabled:hover Label
{
	color: offWhite;
}

.SecondaryButton.red
{
	border: 2px solid colorEnemy&50;
}

.SecondaryButton.red.dark
{
	border: 2px solid colorEnemy&90;
}

.SecondaryButton.red Label
{
	color: silvered&90;
}

.SecondaryButton.red.dark Label
{
	color: offBlack;
}

.SecondaryButton.red:enabled:hover
{
	background-color: colorEnemy&50;
	border: 2px solid colorEnemy&00;
}

.SecondaryButton.red:enabled:hover
{
	border: 2px solid colorEnemy&90;
	background-color: colorEnemy;
}

.SecondaryButton.red:enabled:hover Label
{
	color: offWhite;
}

.SecondaryButton.red .buttonIcon
{
	wash-color: silvered;
}

.SecondaryButton.red:hover .buttonIcon
{
	wash-color: silvered;
}

.SecondaryButton.red.fill
{
	background-color: colorEnemy&70;
	border: 0px solid colorEnemy&00;
}

.SecondaryButton.red.fill Label
{
	color: offWhite;
}

.SecondaryButton.red.fill:enabled:hover
{
	background-color: colorEnemy;
}

.SecondaryButton.red.fill:enabled:hover Label
{
	color: offWhite;
}

.SecondaryButton.green.fill
{
	background-color: ritualGreen&50;
	border: 0px solid ritualGreen&00;
}

.SecondaryButton.green.fill Label
{
	color: offWhite;
}

.SecondaryButton.green.fill:enabled:hover
{
	background-color: ritualGreen;
}

.SecondaryButton.green.fill:enabled:hover Label
{
	color: offWhite;
}

.TertiaryButton
{
	border: 2px solid silvered&50;
	padding: 0px 10px;
	border-radius: 50px;
	padding: 6px 15px;
	margin: 8px;
	vertical-align: middle;
	transition-property: background-color, wash-color, border;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

.TertiaryButton Label
{
	font-size: 18px;
	color: silvered&90;
	font-weight: semi-bold;
	horizontal-align: center;
	vertical-align: middle;
	margin-bottom: 2px;
	text-align: center;
	horizontal-align: center;
	text-overflow: shrink;
	transition-property: color, wash-color;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

.TertiaryButton:enabled:hover
{
	wash-color: offWhite&60;
	background-color: offWhite&60;
}

.TertiaryButton:enabled:hover Label
{
	color: offBlack;
}

.TertiaryButton:disabled
{
	opacity: 0.3;
	brightness: 0.3;
}

.TertiaryButton:active Label
{
	transform: translateY(1px);
}

.TertiaryButton:active
{
	wash-color: #666;
}

.TertiaryButton.Activated
{
	sound: "ui_quit_menu_fadeout";
}

.TertiaryButton.hasIcon
{
	flow-children: right;
}

.TertiaryButton.small Label
{
	font-size: 16px;
}

.buttonIcon
{
	margin-right: 5px;
	width: 15px;
	height: 15px;
}

.iconOnly .buttonIcon
{
	margin-right: 0px;
}

.TertiaryButton.light
{
	border: 2px solid silvered&50;
}

.TertiaryButton.light Label
{
	color: silvered&90;
}

.TertiaryButton.light:enabled:hover
{
	background-color: silvered;
	border: 2px solid silvered&00;
}

.TertiaryButton.light:enabled:hover Label
{
	color: offBlack;
}

.TertiaryButton.light .buttonIcon
{
	wash-color: silvered;
}

.TertiaryButton.light.outline:hover .buttonIcon
{
	wash-color: offBlack;
}

.TertiaryButton.dark
{
	border: 2px solid offBlack&50;
}

.TertiaryButton.dark Label
{
	color: offBlack&90;
}

.TertiaryButton.dark:enabled:hover
{
	background-color: offBlack;
}

.TertiaryButton.dark:enabled:hover Label
{
	color: offWhite;
}

.TertiaryButton.green
{
	border: 2px solid ritualGreen;
}

.TertiaryButton.green Label
{
	color: offWhite;
}

.TertiaryButton.green:enabled:hover
{
	background-color: ritualGreen;
}

.TertiaryButton.green:enabled:hover Label
{
	color: offWhite;
}

.TertiaryButton.light.fill
{
	background-color: silvered&aa;
	border: 2px solid silvered&00;
}

.TertiaryButton.light.fill Label
{
	color: offBlack;
}

.TertiaryButton.light.fill:enabled:hover
{
	background-color: offWhite;
}

.TertiaryButton.light.fill:enabled:hover Label
{
	color: offBlack;
}

.TertiaryButton.light.fill .buttonIcon
{
	wash-color: offBlack;
}

.TertiaryButton.light.fill:hover .buttonIcon
{
	wash-color: offBlack;
}

.TertiaryButton.dark.fill
{
	background-color: offBlack&50;
	border: 0px solid offBlack&00;
}

.TertiaryButton.dark.fill Label
{
	color: offWhite;
}

.TertiaryButton.dark.fill:enabled:hover
{
	background-color: offBlack;
}

.TertiaryButton.dark.fill:enabled:hover Label
{
	color: offWhite;
}

.TertiaryButton.red
{
	border: 2px solid colorEnemy&50;
}

.TertiaryButton.red.dark
{
	border: 2px solid colorEnemy&90;
}

.TertiaryButton.red Label
{
	color: silvered&90;
}

.TertiaryButton.red.dark Label
{
	color: offBlack;
}

.TertiaryButton.red:enabled:hover
{
	background-color: colorEnemy&50;
	border: 2px solid colorEnemy&00;
}

.TertiaryButton.red:enabled:hover
{
	border: 2px solid colorEnemy&90;
	background-color: colorEnemy;
}

.TertiaryButton.red:enabled:hover Label
{
	color: offWhite;
}

.TertiaryButton.red .buttonIcon
{
	wash-color: silvered;
}

.TertiaryButton.red:hover .buttonIcon
{
	wash-color: silvered;
}

.TertiaryButton.red.fill
{
	background-color: colorEnemy&70;
	border: 0px solid colorEnemy&00;
}

.TertiaryButton.red.fill Label
{
	color: offWhite;
}

.TertiaryButton.red.fill:enabled:hover
{
	background-color: colorEnemy;
}

.TertiaryButton.red.fill:enabled:hover Label
{
	color: offWhite;
}

.TertiaryButton.green.fill
{
	background-color: ritualGreen&50;
	border: 0px solid ritualGreen&00;
}

.TertiaryButton.green.fill Label
{
	color: offWhite;
}

.TertiaryButton.green.fill:enabled:hover
{
	background-color: ritualGreen;
}

.TertiaryButton.green.fill:enabled:hover Label
{
	color: offWhite;
}

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

	50%
	{
		pre-transform-scale2d: 1.05;
		transform: translateX(3px) rotateZ(-1deg);
	}

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

}

.LinkButton
{
	vertical-align: middle;
	transition-property: background-color, wash-color, border;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

.LinkButton Label
{
	font-size: 18px;
	color: silvered&90;
	font-weight: semi-bold;
	horizontal-align: center;
	vertical-align: middle;
	border-bottom: 2px solid silvered&90;
	margin-bottom: 2px;
	text-align: center;
	horizontal-align: center;
	text-overflow: shrink;
	transition-property: color, wash-color;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

.LinkButton:hover
{
	wash-color: offWhite;
}

.LinkButton:hover Label
{
	color: offWhite;
}

.buttonIcon
{
	margin-right: 5px;
	width: 15px;
	height: 15px;
	background-repeat: no-repeat;
}

.goldIcon
{
	background-image: url("s2r://panorama/images/hud/icons/icon_soul.vsvg");
	wash-color: shardColor;
	height: 26px;
	width: 15px;
	background-size: contain;
	background-repeat: no-repeat;
}

#InfoIcon,.InfoIcon
{
	vertical-align: center;
	height: 18px;
	width: 18px;
	background-size: 100% 100%;
	background-image: url("s2r://panorama/images/control_icons/info_icon.vsvg");
	horizontal-align: left;
	z-index: 3;
	transition-property: brightness;
	brightness: 0.2;
	transition-duration: 0.2s;
	tooltip-position: right;
}

#InfoIcon:hover,.InfoIcon:hover
{
	brightness: 0.7;
}

.PageTitle Label
{
	font-size: 48px;
	font-family: block;
	color: offWhite;
	horizontal-align: center;
}

@keyframes 'ProbablyUnlocalizedAnimation'
{
	0%
	{
		pre-transform-scale2d: 0.95;
	}

	50%
	{
		pre-transform-scale2d: 1.05;
	}

	100%
	{
		pre-transform-scale2d: 0.95;
	}

}

Label.ProbablyUnlocalizedText
{
	background-color: red;
	color: yellow;
	animation-name: ProbablyUnlocalizedAnimation;
	animation-duration: 0.4s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

TextEntry
{
	border: 1px solid baseBorder;
	width: 352px;
	height: 36px;
	padding: 4px 7px 3px 7px;
	background-color: #00000050;
	font-size: 18px;
	color: offWhite;
	text-overflow: clip;
	white-space: nowrap;
}

TextEntry:disabled
{
	border-color: #44444440;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #11111140 ), to( #22222240 ) );
	color: #999999ff;
}

TextEntry #PlaceholderText
{
	opacity: 0.3;
	transition-property: opacity;
	transition-duration: 0.2s;
	margin-top: 2px;
	color: offWhite;
	font-size: 18px;
	font-weight: medium;
	font-style: italic;
	text-overflow: shrink;
}

TextEntry:focus #PlaceholderText,TextEntry.HasInput #PlaceholderText
{
	opacity: 0.0;
}

.TextEntryIMECandidateRow
{
	flow-children: right;
	background-color: #000000;
}

.TextEntryIMECandidateRowPrefix
{
	font-size: 20px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #000000;
	vertical-align: middle;
}

.TextEntryIMECandidateRowSuffix
{
	font-size: 25px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #333333;
	vertical-align: middle;
}

.TextEntryIMECandidateRow.Highlight .TextEntryIMECandidateRowSuffix
{
	background-color: #4444FF;
}

.TextEntryIMEReadingString
{
	font-size: 20px;
	font-weight: normal;
	color: #DDDDDD;
	background-color: #333333;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
	border: 1px solid #FFFFFF;
}

.TextEntryIMEReadingString.NoReadingString
{
	visibility: collapse;
}

.TextEntryIMECandidateList
{
	color: #DDDDDD;
	background-color: #333333;
	flow-children: down;
	border: 1px solid #FFFFFF;
}

TextEntryIMEControls
{
	flow-children: down;
}

TextEntryAutocomplete
{
	width: 320px;
	flow-children: down;
	background-color: #3d4448;
	color: #e1e1e1;
	font-size: 28px;
	overflow: squish scroll;
	z-index: 0;
	opacity: 1.0;
	box-shadow: fill #00000066 0px 0px 6px 0px;
}

TextEntryAutocomplete > Label
{
	width: 100%;
	padding: 6px 0px 2px 0px;
	margin-top: 0px 0px;
	margin-right: 0px;
	margin-left: 0px;
	padding-left: 16px;
	color: #ffffff99;
	background-color: #3d4448;
	font-size: 18px;
	font-weight: normal;
	z-index: 0;
	border-top: 1px solid #00000066;
	border-bottom: 1px solid #00000066;
	transition-property: background-color;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

TextEntryAutocomplete > Label:hover
{
	background-color: #585e62;
}

TextEntryAutocomplete > Label:focus
{
	background-color: #585e62;
}

TextEntry.ThinTextEntry
{
	height: 32px;
	font-size: 18px;
}

.PopupButton
{
	border: 2px solid offWhite&44;
	padding: 0px 10px;
	border-radius: 50px;
	margin: 8px;
	vertical-align: middle;
	transition-property: background-color, wash-color, border;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

.PopupButton Label
{
	font-size: 18px;
	color: offWhite&44;
	font-family: block;
	horizontal-align: center;
	vertical-align: middle;
	padding: 6px 12px 4px;
	margin-bottom: 2px;
	text-align: center;
	horizontal-align: center;
	text-overflow: shrink;
	transition-property: color, wash-color;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

.PopupButton:enabled:hover
{
	wash-color: offWhite&60;
	background-color: offWhite&60;
}

.PopupButton:enabled:hover Label
{
	color: offBlack;
}

.PopupButton:disabled
{
	opacity: 0.3;
	brightness: 0.3;
}

.PopupButton:active Label
{
	transform: translateY(1px);
}

.PopupButton:active
{
	wash-color: #666;
}

DropDown,CitadelSettingsEnumDropDown
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #292e2e ), to( #191e1e ) );
	background-image: url("s2r://panorama/images/control_icons/arrow_dropdown_png.vtex");
	background-repeat: no-repeat;
	background-position: right 38px 35%;
	background-size: 32px 32px;
	box-shadow: #00000055 0px 0px 1px 3px ;
	border: 2px solid #5e686966;
	font-size: 24px;
	width: 352px;
	height: 36px;
	padding: 4px 8px;
	z-index: 1;
	transition-property: background-color, border;
	transition-duration: 0.15s;
	transition-timing-function: linear;
}

DropDown:enabled:hover,CitadelSettingsEnumDropDown:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #393e3e ), to( #292e2e ) );
}

DropDown:focus .TickBox,CitadelSettingsEnumDropDown:focus .TickBox
{
	text-overflow: clip;
	white-space: nowrap;
}

DropDown:disabled
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #292e2e ), to( #191e1e ) );
	border: 2px solid #3b414266;
	background-image: url("s2r://panorama/images/control_icons/arrow_dropdown_disabled_png.vtex");
}

DropDown.DropDownMenuVisible:focus,CitadelSettingsEnumDropDown.DropDownMenuVisible:focus
{
	animation-name: none;
}

DropDown Label,CitadelSettingsEnumDropDown Label
{
	width: 100%;
	margin: 0px 29px 0px 6px;
	font-size: 18px;
	color: offWhite;
	transition-property: color;
	transition-duration: 0.15s;
	transition-timing-function: linear;
}

DropDown:focus Label,CitadelSettingsEnumDropDown:focus Label
{
	color: white;
}

DropDown:disabled Label
{
	color: #444444;
}

DropDown.DropDownMenuVisible:focus Label,CitadelSettingsEnumDropDown.DropDownMenuVisible:focus Label
{
	color: white;
}

DropDownMenu
{
	width: 352px;
	flow-children: down;
	background-color: #3d4448;
	color: #e1e1e1;
	font-size: 28px;
	overflow: squish scroll;
	z-index: 0;
	transform: translateY(-40px);
	opacity: 0.0;
	transition-property: opacity, transform;
	transition-duration: 0.15s;
	transition-timing-function: ease-in;
	box-shadow: fill #00000066 0px 0px 6px 0px ;
}

DropDownMenu Label
{
	width: 100%;
	padding: 6px 0px 2px 0px;
	margin-top: 0px 0px;
	margin-right: 0px;
	margin-left: 0px;
	padding-left: 16px;
	font-family: sans;
	background-color: #3d4448;
	font-size: 18px;
	font-weight: medium;
	opacity: 0.9;
	z-index: 0;
	border-top: 1px solid #00000066;
	border-bottom: 1px solid #00000066;
	transition-property: background-color;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

DropDownMenu Label:hover
{
	background-color: #585e62;
}

DropDownMenu.DropDownMenuVisible
{
	opacity: 1.0;
	max-height: 444px;
	transition-property: box-shadow;
	transform: translateY(0px);
}

DropDown.ThinDropDown
{
	height: 32px;
	background-size: 24px 24px;
	background-position: right 32px 35%;
}

.ThinDropDown Label
{
	font-size: 18px;
}

ToggleButton,CitadelSettingsCheckbox
{
	flow-children: right;
	padding: 1px 4px;
	color: white;
	transition-property: background-color, box-shadow, color;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

ToggleButton .TickBox,CitadelSettingsCheckbox .TickBox
{
	width: 18px;
	height: 18px;
	vertical-align: center;
	background-color: black;
	border: 2px solid #5e686966;
	box-shadow: #00000055 0px 0px 1px 3px ;
	transition-property: background-color, box-shadow, color, border, background-image, wash-color, pre-transform-scale2d;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

ToggleButton:selected .TickBox,CitadelSettingsCheckbox:selected .TickBox
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #e7f6f5 ), to( #a0d6d7 ) );
	border: 3px solid #000000;
	box-shadow: #5b62bf77 0px 0px 8px 0px ;
}

ToggleButton:hover .TickBox,CitadelSettingsCheckbox:hover .TickBox
{
	border: 2px solid #697879;
}

ToggleButton Label,CitadelSettingsCheckbox Label
{
	font-size: 16px;
	margin-left: 8px;
	color: baseText;
	transition-property: color;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

ToggleButton:enabled:hover Label,CitadelSettingsCheckbox:enabled:hover Label
{
	color: #d2d6d1;
}

ToggleButton:selected Label,CitadelSettingsCheckbox:selected Label
{
	color: white;
}

ToggleButton:disabled Label,CitadelSettingsCheckbox:disabled Label
{
	color: #333333;
}

ToggleButton:disabled .TickBox,CitadelSettingsCheckbox:disabled .TickBox
{
	border-color: #333333;
}

ToggleButton:disabled:selected .TickBox,CitadelSettingsCheckbox:disabled:selected .TickBox
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #222222 ), to( #333333 ) );
	border: 3px solid #000000;
	box-shadow: #33333377 0px 0px 8px 0px ;
}

RadioButton
{
	background-color: none;
	flow-children: right;
	color: white;
	transition-property: background-color, box-shadow, color, brightness;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

RadioButton > .RadioBox
{
	min-width: 20px;
	min-height: 20px;
	border-radius: 50%;
	background-color: gradient( radial, 50% 50%, 0% 0%, 10% 10%, from( #000000 ), to( #000000 ) );
	border: 2px solid #8c7e7022;
	box-shadow: #00000055 0px 0px 1px 3px ;
	transition-property: background-color, box-shadow, color, border;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

RadioButton:selected > .RadioBox
{
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from( offWhite ), to( #8c7e70) );
	background-color: offWhite;
	border: 3px solid #000000;
	box-shadow: #8c7e7033 0px 0px 6px 0px ;
	transition-property: background-color;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
}

RadioButton:enabled:hover > .RadioBox
{
	border: 2px solid #8c7e7044;
}

RadioButton:enabled:selected:hover > .RadioBox
{
	border: 3px solid #000000;
}

RadioButton > Label
{
	color: offWhite&44;
	margin-left: 8px;
	font-size: 16px;
	transition-property: color;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

CitadelSettingsEnum RadioButton > Label
{
	font-size: 18px;
	color: #7d8688;
}

RadioButton:selected > Label
{
	color: offWhite;
	transition-property: color, text-shadow;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

RadioButton:enabled:hover > Label
{
	color: offWhite;
	transition-property: color;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

RadioButton:disabled > .RadioBox
{
	color: transparent;
	box-shadow: #33333377 0px 0px 8px 0px ;
	background-color: #00000000;
}

RadioButton:disabled:selected > .RadioBox
{
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from( #e7f6f533 ), to( #33339933 ) );
}

RadioButton:disabled > Label
{
	color: #333333;
}

Slider
{
	width: 30px;
	height: 130px;
	margin-bottom: 20px;
}

#ReticleSection Slider
{
	margin-bottom: 10px;
}

#SliderTrack
{
	height: 120px;
	width: 16px;
	background-color: #283842;
	align: center center;
	background-color: black;
	border: 2px solid #5e686966;
	box-shadow: #00000055 0px 0px 1px 3px ;
	z-index: 2;
}

SlottedSlider.HorizontalSlider .SliderNotch
{
	margin-top: 14px;
	border-bottom: 2px solid #5e686966;
	border-left:2px solid #5e686966;
	border-right:2px solid #5e686966;
	background-color: black;
	width: 12px;
	height: 12px;
	vertical-align: bottom;
	z-index: 3;
}

#SliderTrackProgress
{
	width: 10px;
	height: 99%;
	background-color: gradient( linear, 0% 100%, 0% 0%, from( #222222FF ), to( #444f52FF ) );
	align: center center;
	border-radius: 3px;
	z-index: 3;
}

#SliderThumb
{
	background-color: gradient( radial, 50% 50%, -5% -5%, 60% 60%, from( #91a5b9 ), to( #444f52 ) );
	border-radius: 13%;
	width: 30px;
	height: 16px;
	box-shadow: fill black 7px 1px 11px 0px;
	z-index: 4;
}

ClientUIDialogPanel #SliderThumb
{
	box-shadow: none;
}

#SliderThumb:hover
{
	background-color: gradient( radial, 50% 50%, -5% -5%, 60% 60%, from( #b8c5d3 ), to( #444f52 ) );
}

Slider.HorizontalSlider,SlottedSlider.HorizontalSlider
{
	width: 420px;
	height: 30px;
}

Slider.HorizontalSlider #SliderTrack,SlottedSlider.HorizontalSlider #SliderTrack
{
	height: 16px;
	width: 100%;
	padding: 10px;
}

Slider.HorizontalSlider #SliderTrackProgress,SlottedSlider.HorizontalSlider #SliderTrackProgress
{
	width: 100%;
	height: 10px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #222222FF ), to( #444f52FF ) );
	box-shadow: inset black -2px 1px 3px 0px;
	margin-left: 1px;
}

Slider.HorizontalSlider #SliderTrackProgress:disabled,SlottedSlider.HorizontalSlider #SliderTrackProgress:disabled
{
	width: 100%;
	height: 10px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #010101FF ), to( #333333FF ) );
	box-shadow: inset black -2px 1px 3px 0px;
	margin-left: 1px;
}

Slider.HorizontalSlider #SliderThumb,SlottedSlider.HorizontalSlider #SliderThumb
{
	background-color: gradient( radial, 50% 50%, -5% -5%, 60% 60%, from( #91a5b9 ), to( #444f52 ) );
	border-radius: 13%;
	width: 16px;
	height: 30px;
}

Slider.HorizontalSlider #SliderThumb:hover,SlottedSlider.HorizontalSlider #SliderThumb:hover
{
	background-color: gradient( radial, 50% 50%, -5% -5%, 60% 60%, from( #b8c5d3 ), to( #444f52 ) );
}

Slider.HorizontalSlider #SliderThumb:disabled,SlottedSlider.HorizontalSlider #SliderThumb:disabled
{
	background-color: #333333;
}

.SliderTick
{
	width: 4px;
	height: 14px;
	background-color: #3B4242;
}

.ButtonBevel
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #373d45 ), to( #4d5860 ) );
	border-style: solid;
	border-width: 1px;
	padding: 4px 10px;
	transition-property: background-color, opacity;
	transition-duration: 0.05s;
	transition-timing-function: linear;
	box-shadow: #00000055 0px 0px 4px 0px ;
	min-width: 192px;
	min-height: 36px;
	border-radius: 8px;
}

.ButtonBevel.Green
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #2a481f ), to( #226326 ) );
}

.ButtonBevel.DarkGreen
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #1a2c13 ), to( #18441b ) );
	border-top-color: #223524;
	border-left-color: #2c4d30;
	border-bottom-color: #091009;
	border-right-color: #132615;
}

.ButtonBevel.Bronze
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #b9894c ), to( #dca157) );
	border-top-color: #e0a75e;
	border-left-color: #dca35b;
	border-bottom-color: #8d683a;
	border-right-color: #8f6b3c;
}

.ButtonBevel.Plus
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #877f4f ), to( #a79c5b ) );
	border-top-color: #b4a442;
	border-left-color: #aea463;
	border-bottom-color: #635e3b;
	border-right-color: #756f45;
}

.ButtonBevel:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #4c5561 ), to( #6c7d88 ) );
}

.ButtonBevel.Green:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #226528 ), to( #288a36 ) );
}

.ButtonBevel.DarkGreen:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #17421b ), to( #185321 ) );
	border-top-color: #000000;
	border-left-color: #000000;
	border-bottom-color: #172a16;
	border-right-color: #152716;
}

.ButtonBevel.Bronze:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #dda45a ), to( #fcb965 ) );
	border-top-color: #f2b362;
	border-left-color: #edb062;
	border-bottom-color: #966f3e;
	border-right-color: #966f3e;
}

.ButtonBevel.Plus:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #a79d63 ), to( #c2b56b ) );
	border-top-color: #cab84b;
	border-left-color: #c6bb72;
	border-bottom-color: #7c764b;
	border-right-color: #8e8755;
}

.ButtonBevel:disabled
{
	wash-color: #AAAAAA;
	saturation: 0;
}

.ButtonBevel.Bronze:disabled
{
	saturation: 0.75;
}

.ButtonBevel.Plus:disabled
{
	saturation: 0.75;
}

.ButtonBevel:disabled Label
{
	color: #333333;
}

.ButtonBevel:active
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #393939), to( #555555 ) );
	sound: "ui_generic_button_click";
}

.ButtonBevel.Green:active
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #1f3d25), to( #2b562c ) );
}

.ButtonBevel.DarkGreen:active
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #132416), to( #183019 ) );
	border-top-color: #09110a;
	border-left-color: #0f1b10;
	border-bottom-color: #1f3820;
	border-right-color: #172c19;
}

.ButtonBevel.Bronze:active
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #4d391f), to( #9b713c ) );
	border-top-color: #684e2d;
	border-left-color: #6d522f;
	border-bottom-color: #977242;
	border-right-color: #906c3f;
}

.ButtonBevel.Plus:active
{
	color: #DCD086;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #877f4f ), to( #a79c5b ) );
	border-top-color: #635e3b;
	border-left-color: #756f45;
	border-bottom-color: #b4a442;
	border-right-color: #aea463;
}

.ButtonBevel Label
{
	margin-top: 2px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #FFFFFF;
	horizontal-align: center;
	text-align: center;
	vertical-align: middle;
	text-shadow: 2px 2px 0px 1.0 #000000;
	transition-property: color;
	transition-duration: 0.35s;
	transition-timing-function: ease-in-out;
}

.ButtonBevel:active Label
{
	transform: translateY(1px);
}

.BlueButton
{
	margin: 8px;
	border: 1px solid #3366aa55;
	height: 34px;
	background-color: #3366aa11;
}

.BlueButton Label
{
	margin: 0px 24px 0px 24px;
	color: #66aadd;
	font-size: 16px;
	letter-spacing: normal;
	text-transform: uppercase;
	vertical-align: middle;
}

.BlueButton:enabled:hover Label
{
	color: white;
}

.BlueButton:enabled:hover
{
	border: 1px solid #22aaffaa;
	background-color: #3366aa44;
}

.BlueButton:active
{
	background-color: #23468a44;
	sound: "ui_select_blue";
}

.BlueButton:active Label
{
	color: #76baed;
}

.BlueButton:disabled
{
	wash-color: #000000DD;
	saturation: 0;
}

VerticalScrollBar,HTMLVerticalScrollBar
{
	width: 8px;
	margin: 0px, 8px, 0px 8px;
	border-radius: 0px;
	height: 100%;
	horizontal-align: right;
	vertical-align: center;
	layout-position: fixed;
	background-color: #00000070;
	transition-property: transform;
}

VerticalScrollBar .ScrollThumb,HTMLVerticalScrollBar .ScrollThumb
{
	transform-origin: 0% 50%;
	transform: scale3D(1, 1, 1);
	min-height: 32px;
	background-color: #96908733;
	border-radius: 4px;
	transition-property: position;
	transition-property: background-color, transform, position;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

VerticalScrollBar:hover .ScrollThumb,HTMLVerticalScrollBar:hover .ScrollThumb
{
	background-color: #96908788;
}

VerticalScrollBar:active .ScrollThumb,HTMLVerticalScrollBar:active .ScrollThumb
{
	background-color: #969087;
}

HorizontalScrollBar,HTMLHorizontalScrollBar
{
	height: 12px;
	margin: 0px;
	width: 100%;
	background-color: rgba(0, 0, 0, 0);
	border-radius: 0px;
	horizontal-align: left;
	vertical-align: bottom;
	box-shadow: fill #00000055 2px -1px 3px 1px ;
	layout-position: fixed;
	transition-property: transform;
}

HorizontalScrollBar .ScrollThumb,HTMLHorizontalScrollBar .ScrollThumb
{
	height: 12px;
	min-width: 32px;
	border-top: 1px solid #aaaaaa22;
	border-bottom: 1px solid #000000aa;
	background-color: #566767;
	transition-property: background-color, transform, position;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

HorizontalScrollBar:hover .ScrollThumb,HTMLHorizontalScrollBar:hover .ScrollThumb
{
	background-color: #566767;
}

HorizontalScrollBar:active .ScrollThumb,HTMLHorizontalScrollBar:active .ScrollThumb
{
	background-color: #566767;
}

VerticalScrollBar,VerticalScrollBar .ScrollThumb,HorizontalScrollBar,HorizontalScrollBar .ScrollThumb HTMLHorizontalScrollBar,HTMLHorizontalScrollBar .ScrollThumb,HTMLVerticalScrollBar,HTMLVerticalScrollBar .ScrollThumb
{
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

VerticalScrollBar.MouseDown,VerticalScrollBar.MouseDown .ScrollThumb,HorizontalScrollBar.MouseDown,HorizontalScrollBar.MouseDown .ScrollThumb HTMLHorizontalScrollBar.MouseDown,HTMLHorizontalScrollBar.MouseDown .ScrollThumb,HTMLVerticalScrollBar.MouseDown,HTMLVerticalScrollBar.MouseDown .ScrollThumb
{
	transition-duration: 0.01s;
}

@define ContextMenuFadoutTime: 0.2s;
@define contextmenu_zindex: 10000100;
.ContextMenu
{
	width: 100%;
	height: 100%;
	transition-property: opacity, transform;
	transition-duration: ContextMenuFadoutTime;
	transition-timing-function: ease-in-out;
	opacity: 1.0;
	z-index: contextmenu_zindex;
	visibility: visible;
	overflow: noclip;
}

.ContextMenu.Destructing
{
	transform: translatex( 0px );
	opacity: 0.0;
}

SimpleContextMenu .ContextMenuBody
{
	padding: 5px;
	flow-children: down;
	width: 230px;
	opacity: 1.0;
	background-color: #212828;
	border: 2px solid black;
	box-shadow: fill 4px 4px 4px #0009;
}

SimpleContextMenu.Wider .ContextMenuBody
{
	width: 250px;
}

SimpleContextMenu.ExtraWide .ContextMenuBody
{
	width: 300px;
}

SimpleContextMenu .ContextMenuBody Button
{
	width: 100%;
	padding: 6px 10px 6px 10px;
	margin: 0px 0px;
	border: 1px solid black;
	background-color: #00000040;
}

SimpleContextMenu .ContextMenuBody Label
{
	font-size: 20px;
	font-weight: bold;
	horizontal-align: left;
}

SimpleContextMenu .ContextMenuBody Button:enabled:hover
{
	background-color: #00000080;
}

SimpleContextMenu .ContextMenuBody Button:enabled:hover Label
{
	color: white;
}

SimpleContextMenu .ContextMenuBody Button:disabled Label
{
	color: #444444;
}

SimpleContextMenu.BuildContextMenu .ContextMenuBody Label
{
	font-size: 20px;
	color: white;
	horizontal-align: left;
	text-overflow: shrink;
}

ProgressBar
{
	width: 320px;
	height: 22px;
	border-radius: 50px;
	background-color: #000000ff;
}

.ProgressBarLeft
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #222222FF ), to( #444f52FF ) );
}

CitadelTooltipProfileCard #Contents
{
	background-color: transparent;
	padding: 0px;
	border: 0px solid transparent;
	box-shadow: none;
	transition-delay: 0.2s;
}

.InlineGlyph
{
	height: 40px;
	width: 40px;
	background-size: 100% 100%;
	background-texture-size: 80px 80px;
	background-repeat: no-repeat;
}

.keybind
{
	background-color: #000000;
	border-radius: 3px;
	color: #fff;
	padding: 3px;
	font-weight: semi-bold;
}

.light .MouseGlyphBackground
{
	background-color: offWhite;
}

.light .MouseButton1
{
	background-image: url("s2r://panorama/images/glyphs/mouse1.vsvg");
}

.light .MouseButton2
{
	background-image: url("s2r://panorama/images/glyphs/mouse2.vsvg");
}

.light .MouseButton3
{
	background-image: url("s2r://panorama/images/glyphs/mouse3.vsvg");
}

.light .MouseButton4
{
	background-image: url("s2r://panorama/images/glyphs/mouse4.vsvg");
}

.light .MouseButton5
{
	background-image: url("s2r://panorama/images/glyphs/mouse5.vsvg");
}

.light .MouseWheelUp
{
	background-image: url("s2r://panorama/images/glyphs/mousewheelup.vsvg");
}

.light .MouseWheelDown
{
	background-image: url("s2r://panorama/images/glyphs/mousewheeldown.vsvg");
}

.dark .MouseButton1
{
	background-image: url("s2r://panorama/images/glyphs/mouse1_dark.vsvg");
}

.dark .MouseButton2
{
	background-image: url("s2r://panorama/images/glyphs/mouse2_dark.vsvg");
}

.dark .MouseButton3
{
	background-image: url("s2r://panorama/images/glyphs/mouse3_dark.vsvg");
}

.dark .MouseButton4
{
	background-image: url("s2r://panorama/images/glyphs/mouse4_dark.vsvg");
}

.dark .MouseButton5
{
	background-image: url("s2r://panorama/images/glyphs/mouse5_dark.vsvg");
}

.dark .MouseWheelUp
{
	background-image: url("s2r://panorama/images/glyphs/mousewheelup_dark.vsvg");
}

.dark .MouseWheelDown
{
	background-image: url("s2r://panorama/images/glyphs/mousewheeldown_dark.vsvg");
}

.KeyboardArrowUp
{
	background-image: url("s2r://panorama/images/glyphs/keyboard_arrow_up.vsvg");
}

.KeyboardArrowDown
{
	background-image: url("s2r://panorama/images/glyphs/keyboard_arrow_down.vsvg");
}

.KeyboardArrowLeft
{
	background-image: url("s2r://panorama/images/glyphs/keyboard_arrow_left.vsvg");
}

.KeyboardArrowRight
{
	background-image: url("s2r://panorama/images/glyphs/keyboard_arrow_right.vsvg");
}

.PlayerFeedbackContainer
{
	margin-top: 10px;
	width: 100%;
	height: 30px;
	horizontal-align: center;
}

.PlayerFeedbackContainer:hover
{
	brightness: 1.5;
}

.PlayerFeedbackButton
{
	flow-children: right;
	horizontal-align: middle;
	padding: 3px 10px;
	border-radius: 3px;
	background-color: #00000080;
	vertical-align: middle;
	border: 1px solid offWhite&30;
	opacity: 1;
	brightness: 0.5;
	tooltip-position: bottom;
}

.PlayerFeedbackButton:hover
{
	brightness: 1.3;
	opacity: 1;
	saturation: 1;
	border: 1px solid offWhite&00;
}

#PlayerReportContainer
{
	visibility: collapse;
}

.CanReportPlayers #PlayerReportContainer
{
	visibility: visible;
}

#PlayerReportContainer,.localplayer #PlayerReportContainer,.CanReportPlayers .localplayer #PlayerReportContainer,.CanReportPlayers .localplayer.PlayerSnippet:hover #PlayerReportContainer,.CanReportPlayers .localplayer.Selected #PlayerReportContainer,.ReportedPlayer #PlayerReportContainer,.ReportedPlayer.PlayerSnippet:hover #PlayerReportContainer
{
	opacity: 1;
	brightness: 0.5;
}

.CanReportPlayers #ReportPlayerButton
{
	opacity: 0.4;
}

.botplayer #ReportPlayerButton,.localplayer #ReportPlayerButton
{
	visibility: collapse;
}

.ReportedPlayer #ReportPlayerButton,.IsInParty #ReportPlayerButton
{
	opacity: 0;
}

#ReportPlayerButton:hover
{
	background-color: rgb(149, 43, 43);
}

.reportLabel
{
	font-weight: semi-bold;
	font-size: 16px;
	text-overflow: shrink;
	margin-bottom: 2px;
	color: offWhite&70;
}

.reportedLabel
{
	font-weight: semi-bold;
	font-size: 16px;
	margin-bottom: 2px;
	color: offWhite;
	visibility: collapse;
}

#reportIcon
{
	width: 15px;
	height: 15px;
	margin-right: 8px;
	vertical-align: middle;
	background-image: url("s2r://panorama/images/icons/icon_report.vsvg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	wash-color: offWhite;
	opacity: 0.7;
}

#ReportedPlayerLabel,.ReportedPlayer #ReportPlayerButton
{
	visibility: collapse;
}

.ReportedPlayer #ReportedPlayerLabel
{
	visibility: visible;
}

#PlayerCommendContainer
{
	ignore-parent-flow: true;
	horizontal-align: center;
	vertical-align: top;
	visibility: collapse;
}

.CanCommendPlayers #PlayerCommendContainer
{
	visibility: visible;
}

#CommendPlayerButton
{
	width: 35px;
	height: 35px;
	border-radius: 100px;
	horizontal-align: center;
	border: 2px solid offWhite&30;
}

.CanCommendPlayers .localplayer #PlayerCommendContainer,.CanCommendPlayers .localplayer.PlayerSnippet:hover #PlayerCommendContainer,.CanCommendPlayers .localplayer.Selected #PlayerCommendContainer
{
	opacity: 1;
	brightness: 0.5;
}

.CanReportPlayers #CommendPlayerButton
{
	opacity: 1;
}

.botplayer #CommendPlayerButton,.localplayer #CommendPlayerButton
{
	visibility: collapse;
}

.CommendedPlayer #CommendPlayerButton
{
	opacity: 0;
}

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

#commendIcon
{
	background-image: url("s2r://panorama/images/icons/icon_thumbsup.vsvg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	wash-color: offWhite;
	opacity: 0.5;
	margin-bottom: 1px;
	width: 15px;
	height: 15px;
	horizontal-align: center;
	vertical-align: center;
}

#CommendPlayerButton:hover #commendIcon
{
	wash-color: offBlack;
	opacity: 0.9;
}

#CommendedPlayerLabel,.CommendedPlayer #CommendPlayerButton
{
	visibility: collapse;
}

.CommendedPlayer #CommendedPlayerLabel
{
	visibility: visible;
}

@define toastExitDuration: 0.1s;
#ToastManager
{
	vertical-align: top;
	horizontal-align: right;
	margin-top: 400px;
	height: 100%;
	flow-children: down;
}

#ToastManager > .ToastPanel
{
	opacity: 0.0;
	transform: translateX( 40px );
	transition-property: position, opacity, transform;
	transition-duration: toastExitDuration;
}

#ToastManager > .ToastPanel.ToastVisible
{
	opacity: 1.0;
	transform: none;
}

.ExampleToast
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #595959 ), to( #444 ) );
	box-shadow: 4px 4px 12px #00000044;
	margin-bottom: 8px;
	padding: 0px 20px 0px 0px;
	border-radius: 5px 0px 0px 5px;
	flow-children: right;
}

.ExampleToast:active
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #595959 ), to( #444 ) );
}

.ExampleToast CitadelHeroImage,.ExampleToast Image
{
	vertical-align: middle;
	width: 100px;
	height: 40px;
}

.ExampleToast Label
{
	vertical-align: middle;
	margin-left: 12px;
	font-size: 15px;
	font-weight: bold;
	color: offWhite;
}

.ExampleToastTextContainer
{
	flow-children:down;
}

.ToastPanel #DismissToast
{
	margin-left: 0px;
	width: 30px;
	height: 30px;
	vertical-align: center;
	horizontal-align: right;
	background-size: auto 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("s2r://panorama/images/icons/icon_x.vsvg");
}

.CommendToast
{
	padding-right: 4px;
	horizontal-align: right;
}

.CommendToast Label
{
	margin-right: 8px;
}

.CommendToast #CommendPlayerButton
{
	visibility: collapse;
	vertical-align: center;
	margin: 4px;
	margin-right: 6px;
}

.CommendToast:not(.AlreadyCommended) #CommendPlayerButton
{
	visibility: visible;
}

.CommendToast #HeroImage
{
	width: 60px;
	height: 60px;
	border-radius: 5px 0px 0px 5px;
	background-color: #00000090;
}

.CommendToast .commendIcon
{
	background-color: black;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 80% 80%;
	visibility: collapse;
}

.commendIcon
{
	width: 70px;
	height: 70px;
	horizontal-align: center;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 1;
	wash-color: offWhite;
	background-image: url("s2r://panorama/images/icons/icon_thumbsup.vsvg");
}

.Friendly .commendIcon
{
	background-image: url("s2r://panorama/images/main_menu/menu_images/commend_friendly_png.vtex");
}

.Teamwork .commendIcon
{
	background-image: url("s2r://panorama/images/main_menu/menu_images/commend_teamwork_png.vtex");
}

.Skilled .commendIcon
{
	background-image: url("s2r://panorama/images/main_menu/menu_images/commend_skilled_png.vtex");
}

.QuickbuyPurchaseToast
{
	horizontal-align: right;
	width: fit-children;
	flow-children: right;
	padding: 6px;
	background-color: shardColor&70;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #259776 ), to( shardColor&70 ) );
	opacity: 1;
	ui-scale: 120%;
}

.QuickbuyPurchaseToast .QuickbuyItem
{
	opacity: 1;
}

.QuickbuyPurchaseToast .QuickbuyItem #ItemContentPanel
{
	flow-children: right;
}

.QuickbuyPurchaseToast .QuickbuyItem .QuickbuyLabel
{
	opacity: 1;
	color: offBlack;
	font-size: 12px;
	margin-left: 0px;
}

.HeroReleaseVotesRemainingToast
{
	horizontal-align: right;
	width: fit-children;
	flow-children: right;
	padding: 6px 16px 6px 2px;
	background-color: shardColor&70;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #259776 ), to( shardColor&70 ) );
	opacity: 1;
	ui-scale: 120%;
	opacity-mask: url("s2r://panorama/images/main_menu/text_speckle_mask_main_psd.vtex") 0.3;
	opacity-mask-scale: 100% 200%;
}

.AchievementToast
{
	margin-bottom: 8px;
	flow-children: right;
}

.AchievmentToastContainer
{
	border-radius: 3px 0px 0px 3px;
	background-texture-size: 28px 28px;
	background-image: url("s2r://panorama/images/textures/diagonal_stripes.vsvg");
	background-color: gradient( radial, 50% 50%, -5% -5%, 60% 60%, from( #FF5656), to( #78191B ) );
	background-img-opacity: 0.03;
	flow-children: right;
	padding: 0px 20px 0px 0px;
	box-shadow: 4px 4px 12px #00000044;
}

.AchievementToast #HeroImage
{
	width: 60px;
	height: 60px;
	background-color: #00000090;
	border-radius: 5px 0px 0px 5px;
}

.AchievementToast Label
{
	vertical-align: middle;
	margin-left: 12px;
	font-size: 15px;
	font-weight: bold;
	color: #fff6e9;
	text-shadow: 0px 0px 4px #000000cc;
}

.AchievementToastTextContainer
{
	flow-children:down;
}

.AchievementImage
{
	background-image: url("s2r://panorama/images/seasonal/2024/achievement_icon_psd.vtex");
	background-size: contain;
	width: 60px;
	height: 60px;
	margin-right: 8px;
	img-shadow: 0px 0px 20px #00000088;
	vertical-align: center;
	z-index: 2;
}

SimpleContextMenu .ContextMenuBody
{
	padding: 5px;
	flow-children: down;
	width: 230px;
	opacity: 1.0;
	background-color: #212828;
	border: 2px solid black;
	box-shadow: fill 4px 4px 4px #0009;
}

SimpleContextMenu.Wider .ContextMenuBody
{
	width: 250px;
}

SimpleContextMenu.ExtraWide .ContextMenuBody
{
	width: 300px;
}

SimpleContextMenu .ContextMenuBody Button
{
	width: 100%;
	padding: 6px 10px 6px 10px;
	margin: 0px 0px;
	border: 1px solid black;
	background-color: #00000040;
	transition-property: background-color;
	transition-duration: 0.2s;
}

SimpleContextMenu .ContextMenuBody Label
{
	horizontal-align: left;
}

SimpleContextMenu .ContextMenuBody Button:enabled:hover
{
	background-color: #00000080;
}

SimpleContextMenu .ContextMenuBody Button:enabled:hover Label
{
	color: white;
}

SimpleContextMenu .ContextMenuBody Button:disabled Label
{
	color: #444444;
}

@define mousepanningcursorsize: 64px;
#MousePanningImage
{
	wash-color: #ffffffff;
	visibility: visible;
	width: mousepanningcursorsize;
	height: mousepanningcursorsize;
	z-index: 10;
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

.MousePanning #MousePanningImage
{
	opacity: 0.5;
}

CitadelHTMLPanel TextTooltip
{
	opacity: 0.0;
}

.InlineAttributeIcon
{
	width: 20px;
	height: 20px;
	margin-right: 2px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.InlineAttributeIcon.Fortitude
{
	background-image: url("s2r://panorama/images/shop/keystat_fortitude_png.vtex");
}

.InlineAttributeIcon.Courage
{
	background-image: url("s2r://panorama/images/shop/keystat_courage_png.vtex");
}

.InlineAttributeIcon.Spirit
{
	background-image: url("s2r://panorama/images/icons/properties/spirit.vsvg");
	wash-color: spiritBrightColor;
}

.InlineAttributeIcon.Slow,.InlineAttributeIcon.Slowing,.InlineAttributeIcon.SlowResistance
{
	background-image: url("s2r://panorama/images/upgrades/property_slow_large_psd.vtex");
}

.InlineAttributeIcon.Stun
{
	background-image: url("s2r://panorama/images/hud/modifiers/icon_stun.vsvg");
}

.InlineAttributeIcon.DamageAmp
{
	background-image: url("s2r://panorama/images/damage_psd.vtex");
	wash-color: offWhite;
}

.InlineAttributeIcon.SpiritDamage,.InlineAttributeIcon.BonusSpiritDamage,.InlineAttributeIcon.SpiritDPS,.InlineAttributeIcon.SpiritIcon
{
	background-image: url("s2r://panorama/images/icons/properties/damage_magic_color.vsvg");
}

.InlineAttributeIcon.Heals,.InlineAttributeIcon.Healing,.InlineAttributeIcon.Heal,.InlineAttributeIcon.Regen,.InlineAttributeIcon.MaxHealth
{
	background-image: url("s2r://panorama/images/icons/properties/heal.vsvg");
	wash-color: armorColor;
}

.InlineAttributeIcon.Debuff
{
	background-image: url("s2r://panorama/images/hud/modifiers/icon_toxic.vsvg");
	wash-color: #99f051;
}

.InlineAttributeIcon.MeleeDamage
{
	background-image: url("s2r://panorama/images/hud/core/icon_damage_melee_psd.vtex");
	wash-color: courageBrightColor;
}

.InlineAttributeIcon.ReducedFireRate,.InlineAttributeIcon.BonusFireRate,.InlineAttributeIcon.FireRate
{
	background-image: url("s2r://panorama/images/icons/properties/fire_rate.vsvg");
	wash-color: courageBrightColor;
}

.InlineAttributeIcon.BonusMoveSpeed,.InlineAttributeIcon.MoveSpeed,.InlineAttributeIcon.BonusSprintSpeed
{
	background-image: url("s2r://panorama/images/icons/properties/move_speed.vsvg");
	wash-color: armorColor;
}

.InlineAttributeIcon.WeaponDamage,.InlineAttributeIcon.BonusWeaponDamage,.InlineAttributeIcon.BulletDamage
{
	background-image: url("s2r://panorama/images/icons/properties/damage_bullet_color.vsvg");
}

.InlineAttributeIcon.BulletResist
{
	background-image: url("s2r://panorama/images/upgrades/property_bullet_armor_psd.vtex");
	wash-color: courageBrightColor;
}

.InlineAttributeIcon.SpiritResist
{
	background-image: url("s2r://panorama/images/upgrades/property_tech_armor_psd.vtex");
	wash-color: spiritBrightColor;
}

.InlineAttributeIcon.CombatBarrier
{
	background-image: url("s2r://panorama/images/upgrades/property_bullet_armor_psd.vtex");
	wash-color: offWhite;
}

.InlineAttributeIcon.Immobilize
{
	background-image: url("s2r://panorama/images/hud/modifiers/immobilize_psd.vtex");
	wash-color: offWhite;
}

.InlineAttributeIcon.StaminaRegenPerSecond
{
	background-image: url("s2r://panorama/images/hud/modifiers/immobilize_psd.vtex");
	wash-color: #a9f0a1;
}

.InlineAttributeIcon.KnockBack,.InlineAttributeIcon.KnockUp,.InlineAttributeIcon.Pull,.InlineAttributeIcon.Pulls,.InlineAttributeIcon.Pulling,.InlineAttributeIcon.Drag
{
	background-image: url("s2r://panorama/images/icons/properties/condition_knockdown.vsvg");
	wash-color: offWhite;
}

.InlineAttributeIcon.PureDamage
{
	background-image: url("s2r://panorama/images/hud/core/icon_damage_force.vsvg");
	wash-color: white;
}

.InlineAttributeIcon.Silence
{
	background-image: url("s2r://panorama/images/icons/properties/condition_silence.vsvg");
	wash-color: spiritBrightColor;
}

.InlineAttributeName
{
	font-weight: bold;
}

.InlineAttributeName.Fortitude
{
	color: #7bb02a;
}

.InlineAttributeName.Courage
{
	color: #9d620b;
}

.InlineAttributeName.Spirit
{
	color: #e1a0ff;
}

.InlineAttributeName.Slow,.InlineAttributeName.Slowing,.InlineAttributeName.SlowResistance,.InlineAttributeName.Debuff,.InlineAttributeName.ReducedFireRate,.InlineAttributeName.BonusMoveSpeed,.InlineAttributeName.MoveSpeed,.InlineAttributeName.FireRate,.InlineAttributeName.BonusFireRate,.InlineAttributeName.BonusSprintSpeed
{
	color: offWhite;
}

.InlineAttributeName.Stun,.InlineAttributeName.Immobilize
{
	color: offWhite;
}

.InlineAttributeName.DamageAmp
{
	color: offWhite;
}

.InlineAttributeName.SpiritDamage,.InlineAttributeName.SpiritDPS,.InlineAttributeName.BonusSpiritDamage,.InlineAttributeName.SpiritResist
{
	color: spiritBrightColor;
}

.InlineAttributeName.Heals,.InlineAttributeName.Healing,.InlineAttributeName.Heal,.InlineAttributeName.Regen,.InlineAttributeName.MaxHealth
{
	color: #99f051;
}

.InlineAttributeName.MeleeDamage,.InlineAttributeName.WeaponDamage,.InlineAttributeName.BonusWeaponDamage,.InlineAttributeName.BulletResist,.InlineAttributeName.BulletDamage
{
	color: courageBrightColor;
}

.InlineAttributeName.StaminaRegenPerSecond
{
	color: #a9f0a1;
}

.InlineAttributeName.KnockBack,.InlineAttributeName.KnockUp,.InlineAttributeName.Pull,.InlineAttributeName.Pulls,.InlineAttributeName.Pulling,.InlineAttributeName.Drag
{
	color: offWhite;
}

.InlineAttributeName.PureDamage
{
	color: white;
}

.InlineAttributeName.Silence
{
	color: #e1a0ff;
}

.InlineHeroIcon
{
	width: 32px;
	height: 32px;
}

AsyncDataPanel > .AsyncContainer
{
	width: 100%;
	height: 100%;
	visibility: collapse;
}

AsyncDataPanel.AsyncFailureState > .AsyncFailureContainer,AsyncDataPanel.AsyncLoadingState > .AsyncLoadingContainer,AsyncDataPanel.AsyncSuccessState > .AsyncSuccessContainer
{
	visibility: visible;
}

AsyncDataPanel > .AsyncFailureContainer Label
{
	color: #ccc;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 18px;
	vertical-align: middle;
	horizontal-align: center;
	text-align: center;
	padding: 0px 8px;
}

AsyncDataPanel > .AsyncLoadingContainer
{
	horizontal-align: center;
}

AsyncDataPanel > .AsyncLoadingContainer .Wrapper
{
	flow-children: down;
	horizontal-align: center;
	vertical-align: center;
}

AsyncDataPanel > .AsyncLoadingContainer .Spinner
{
	horizontal-align: center;
	wash-color: #999;
	width: 32px;
	height: 32px;
	background-image: url("s2r://panorama/images/control_icons/spinner_png.vtex");
	background-size: contain;
	animation-name: RotateIcon;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

AsyncDataPanel > .AsyncLoadingContainer Label
{
	color: #999;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 18px;
	horizontal-align: center;
	text-align: center;
	padding: 0px 8px;
	margin-top: 6px;
}

.outdated_build_label
{
	color: red;
}

NumberEntry
{
	flow-children: right;
	width: 100px;
	height: 36px;
}

NumberEntry #TextEntry
{
	width: fill-parent-flow( 1.0 );
	height: 100%;
	background-color: black;
}

NumberEntry .ChangeValueButtons
{
	flow-children: down;
	margin-left: 2px;
}

NumberEntry .ChangeValueButtons .ChangeValueButton
{
	width: 18px;
	height: 18px;
	border: 1px solid baseBorder;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #111111FF ), to( #222222FF ) );
}

NumberEntry .ChangeValueButtons .ChangeValueButton:disabled
{
	brightness: 0.5;
}

NumberEntry .ChangeValueButtons .ChangeValueButton:hover:enabled
{
	brightness: 2.0;
}

NumberEntry .ChangeValueButtons .ChangeValueButton:active
{
	brightness: 1.5;
}

NumberEntry .ChangeValueButtons .ChangeValueButton .ChangeValueButtonLabel
{
	text-align: center;
	vertical-align: middle;
	horizontal-align: center;
	margin-top: -3px;
}

@keyframes 'RotateIcon'
{
	0%
	{
		pre-transform-rotate2d: 0deg;
	}

	100%
	{
		pre-transform-rotate2d: 360deg;
	}

}

@keyframes 'RotateInner'
{
	0%
	{
		pre-transform-rotate2d: 0deg;
	}

	100%
	{
		pre-transform-rotate2d: 360deg;
	}

}

@keyframes 'RotateOuter'
{
	0%
	{
		pre-transform-rotate2d: 0deg;
	}

	100%
	{
		pre-transform-rotate2d: -360deg;
	}

}

@keyframes 'WaitingPulse'
{
	0%
	{
		pre-transform-scale2d: 1;
	}

	50%
	{
		pre-transform-scale2d: 0.9;
	}

	100%
	{
		pre-transform-scale2d: 1;
	}

}

@keyframes 'WaitingPulseMid'
{
	0%
	{
		pre-transform-scale2d: 1;
	}

	50%
	{
		pre-transform-scale2d: 0.8;
	}

	100%
	{
		pre-transform-scale2d: 1;
	}

}

@keyframes 'WaitingPulseEye'
{
	0%
	{
		pre-transform-scale2d: 1;
	}

	50%
	{
		pre-transform-scale2d: 0.7;
	}

	100%
	{
		pre-transform-scale2d: 1;
	}

}

@keyframes 'WaitingPulseLight'
{
	0%
	{
		pre-transform-scale2d: 1;
	}

	50%
	{
		pre-transform-scale2d: 0.94;
	}

	100%
	{
		pre-transform-scale2d: 1;
	}

}
