@font-face {
  font-family: "Retail";
  src: url("../fonts/Retail-Bold.woff") format("woff");
  font-weight: 600;
}

@font-face {
  font-family: "Retail Text";
  src: url("../fonts/Retail_Text-Regular.woff") format("woff");
}

@font-face {
  font-family: "Swear Text Demo";
  src: url("../fonts/SwearText-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Swear Text Demo";
  src: url("../fonts/SwearBanner-Bold.woff2") format("woff2");
  font-weight: 600;
}

@font-face {
  font-family: "Forevs";
  src: url("../fonts/Forevs-Regular.woff") format("woff");
}

@font-face {
  font-family: "Forevs";
  src: url("../fonts/Forevs-Bold.woff") format("woff");
  font-weight: 600;
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
	box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
	margin: 0;
}
/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
/*
  5. Improve media defaults
*/
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}
/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
	font: inherit;
}
/*
  7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}
/*
  8. Create a root stacking context
*/
#root, #__next {
	isolation: isolate;
}

button {
	appearance: none;
	border: none;
}

:root {
	--sans: Retail, sans-serif;
	--sansMono: Retail Text;
	--serif: Forevs, serif;
	--baseText: #FFEFD7;
	--baseBorder: #444444ff;
	--selectedTextBackgroundColor: #66666633;
	--goldColor: #FFED79;
	--blueAPTextColor: #80EEFF;
	--offWhite: #FFEFD7;
	--offBlack: #10130D;
	--silvered: #C6C6C6;
	--soulColor: #70F8C1;
	--shardColor: #99FFD6;
	--brandGreen: #C4FF47;
	--ritualGreen: #65951D;
	--ritualGreenLight: #7CBC1D;
	--geistBookColor: #33A357;
	--geistBookDarkColor: #0E381B;
	--buildsColor: #4D7EC8;
	--buildsDarkColor: #365B92;
	--buildsLightColor: #85B5FF;
	--team1Color: #BF9A53;
	--team1ColorBright: #FBDCA0;
	--team1ColorDark: #937600;
	--team1ColorNeutral: #55503E;
	--team2Color: #5B79E6;
	--team2ColorBright: #BDCBFF;
	--team2ColorDark: #4156A0;
	--team2ColorNeutral: #54596C;
	--courageLightColor: #FFD18D;
	--courageBrightColor: #EC9719;
	--courageColor: #9D620B;
	--courageDarkColor: #7F540E;
	--courageDarkerColor: #302306;
	--fortitudeLightColor: #D3FC96;
	--fortitudeBrightColor: #7BBA1D;
	--fortitudeColor: #649717;
	--fortitudeDarkColor: #4C7113;
	--fortitudeDarkerColor: #1F3400;
	--spiritLightColor: #E7C8FF;
	--spiritBrightColor: #CE90FF;
	--spiritColor: #8A55B3;
	--spiritDarkColor: #613484;
	--spiritDarkerColor: #362147;

	--brandGreen: #C4FF47;
	--colorCommonOffWhite: rgb(243, 240, 231);
	--colorCommonOffWhiteA35: rgba(243, 240, 231, 0.35);
	--colorCommonDarkGray: #2e2c27;
	--colorCommonDarkestGray: #1a1a1a;
	--colorEnemy: #FF410D;
	--colorModsShop: #FFDB79;
	--colorGold: #FFED79;
	--colorUpgrades: #00FFFF;
	--colorTeam1: #E7B659;
	--colorTeam2: #5B79E6;
	--baseText: #FFEFD7;
	--baseBorder: #444444ff;
	--selectedTextBackgroundColor: #66666633;
	--goldColor: #FFED79;
	--blueAPTextColor: #80EEFF;
	--brandGreen: #C4FF47;
	--ritualGreen: #65951D;
	--ritualGreenLight: #7CBC1D;
	--offWhite: #FFEFD7;
	--offBlack: #10130D;
	--soulColor: #70F8C1;
	--shardColor: #99FFD6;
	--team1Color: #BF9A53;
	--team1ColorBright: #FBDCA0;
	--team1ColorDark: #7B6A26;
	--team1ColorDarker: #534716;
	--team2Color: #5B79E6;
	--team2ColorBright: #BDCBFF;
	--team2ColorDark: #4156A0;
	--team2ColorDarker: #2D3C70;
	--courageLightColor: #FFD18D;
	--courageBrightColor: #EC9719;
	--courageColor: #9D620B;
	--courageDarkColor: #7F540E;
	--courageDarkerColor: #302306;
	--fortitudeLightColor: #D3FC96;
	--fortitudeBrightColor: #7BBA1D;
	--fortitudeColor: #649717;
	--fortitudeDarkColor: #4C7113;
	--fortitudeDarkerColor: #1F3400;
	--spiritLightColor: #E7C8FF;
	--spiritBrightColor: #CE90FF;
	--spiritColor: #8A55B3;
	--spiritDarkColor: #613484;
	--spiritDarkerColor: #362147;
	--weaponColor: #E58A00;
	--weaponColorFaded: #FFA82622;
	--armorColor: #00FF99;
	--armorColorFaded: #00FF9922;
	--techColor: #00DDFF;
	--techColorFaded: #245359;
	--favColor: #FFDB4C;
	--weaponModsColor: rgb(229, 138, 0);
	--armorModsColor: rgb(0, 178, 107);
	--techModsColor: rgb(0, 155, 178);
	--defaultBGColor0: #21201C;
	--defaultBGColor1: #2E2C27;
	--defaultBGColor2: #3B3832;
	--defaultBGColor3: #47443D;
	--defaultBGColor4: #545047;
	--weaponBGColor0: #402600;
	--weaponBGColor1: #4D2E00;
	--weaponBGColor2: #663D00;
	--weaponBGColor3: #804C00;
	--weaponBGColor4: #8C5400;
	--armorBGColor0: #1A3329;
	--armorBGColor1: #204033;
	--armorBGColor2: #264C3D;
	--armorBGColor3: #346651;
	--armorBGColor4: #3A735C;
	--techBGColor0: #153033;
	--techBGColor1: #1F474C;
	--techBGColor2: #245359;
	--techBGColor3: #2E6A73;
	--techBGColor4: #337680;
	--favBGColor1: #4D3800;
	--favBGColor3: #664A00;
	--favBGColor4: #735400;
	--laneYellowColor: #CFAF3B;
	--laneOrangeColor: #CE742D;
	--laneBlueColor: #2DA0CA;
	--lanePurpleColor: #CC2CC2;
	--atlasColor: #2092AE;
	--astroColor: #8E4C31;
	--bebopColor: #9F4734;
	--chronoColor: #983952;
	--forgeColor: #46689B;
	--ghostColor: #2D795A;
	--gigawattColor: #DC9833;
	--hazeColor: #AC6133;
	--hornetColor: #A2C7E5;
	--infernoColor: #E05151;
	--tenguColor: #B373D9;
	--kelvinColor: #74ABBC;
	--lashColor: #424B56;
	--mirageColor: #84673C;
	--krillColor: #684B85;
	--orionColor: #5EB083;
	--synthColor: #545F95;
	--nanoColor: #583f57;
	--shivColor: #A43C87;
	--dynamoColor: #D0B945;
	--viscousColor: #88C363;
	--wardenColor: #556178;
	--wraithColor: #944D78;
	--wreckerColor: #7F2DB1;
	--yamatoColor: #6E9080;
	--akimboColor: #C7B4AB;
	--ballistaColor: #BD63A4;
	--kaliColor: #D7AE61;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	justify-content: center;
	align-items: center;
	color: var(--baseText);
	font-family: var(--sansMono);
	background-color: #000;
}

span {
	color: var(--offWhite);
	font-size: 18px;
}

progress {
	appearance: none;
	display: block;
	width: 320px;
	height: 22px;
	border-radius: 50px;
	background-color: #000000ff;
	border: none;
	overflow: hidden;

	&::-webkit-progress-bar {
		background: black;
	}

	&::-webkit-progress-value { background: linear-gradient(to right, #222222FF, #444f52FF) }
	&::-moz-progress-bar { background: linear-gradient(to right, #222222FF, #444f52FF) }
}

.LeftRightFlow {
	display: flex;
	flex-direction: row;
}

.TopBottomFlow {
	display: flex;
	flex-direction: column;
}

.AlignHorizontalCenter {
	horizontal-align: center;
}

.AlignVerticalCenter {
	vertical-align: center;
}

.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: 50px;
	font-weight: bold;
}

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

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

.body_md {
	font-size: 20px;
	font-weight: medium;
	opacity: 0.8;
}

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

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

.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: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: var(--offWhite);
}

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

.SecondaryButton.green Label {
	color: var(--offWhite);
}

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

.SecondaryButton.green:enabled:hover Label {
	color: var(--offWhite);
}

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

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

.SecondaryButton.light.fill:enabled:hover {
	background-color: var(--offWhite);
}

.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: var(--offWhite);
}

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

.SecondaryButton.dark.fill:enabled:hover Label {
	color: var(--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: var(--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: var(--offWhite);
}

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

.SecondaryButton.red.fill:enabled:hover Label {
	color: var(--offWhite);
}

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

.SecondaryButton.green.fill Label {
	color: var(--offWhite);
}

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

.SecondaryButton.green.fill:enabled:hover Label {
	color: var(--offWhite);
}

.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: var(--offWhite);
}

.LinkButton:hover Label {
	color: var(--offWhite);
}

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

.goldIcon {
	flex-shrink: 0;
	background-color: var(--shardColor);
	height: 26px;
	width: 15px;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-image: url("../panorama/images/hud/icons/icon_soul.svg");
}

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

#InfoIcon:hover {
	wash-color: white;
	brightness: 2.0;
}

.PageTitle Label {
	font-size: 70px;
	font-family: serif;
	font-weight: bold;
	color: var(--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: var(--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: var(--offWhite);
	font-size: 18px;
	font-weight: medium;
	font-style: italic;
}

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 silvered&50;
	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: silvered&90;
	font-weight: semi-bold;
	horizontal-align: center;
	vertical-align: middle;
	padding: 6px 15px;
	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: var(--offWhite)&60;
	background-color: var(--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;
}

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

DropDown,CitadelSettingsEnumDropDown {
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #292e2e ), to( #191e1e ) );
	background-image: url("../panorama/images/control_icons/arrow_dropdown_png.png");
	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("../panorama/images/control_icons/arrow_dropdown_disabled_png.png");
}

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

DropDown Label,CitadelSettingsEnumDropDown Label {
	width: 100%;
	margin: 0px 29px 0px 6px;
	font-size: 18px;
	color: var(--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 {
	margin-top: 4px;
	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 #5e686966;
	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( #e7f6f5 ), to( #333399 ) );
	border: 3px solid #000000;
	box-shadow: #5b62bf77 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 #697879;
}

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

RadioButton > Label {
	color: baseText;
	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: white;
	transition-property: color, text-shadow;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

RadioButton:enabled:hover > Label {
	color: white;
	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);
}

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

VerticalScrollBar .ScrollThumb,HTMLVerticalScrollBar .ScrollThumb {
	transform-origin: 0% 50%;
	transform: scale3D(1, 1, 1);
	min-height: 32px;
	background-color: #ffffff33;
	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: ritualGreen;
}

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

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: 40px;
	color: white;
	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%;
}

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

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;
}