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

	50%
	{
		opacity: 0.9;
	}

	100%
	{
		opacity: 1.0;
	}
}

@keyframes 'color_transition'
{
	0%
	{
		brightness:  1;
	}

	50%
	{
		brightness:  1.6;
	}

	100%
	{
		brightness:  1;
	}
}

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

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

@keyframes 'breathe_ancient'
{
	0%
	{
		box-shadow: inset #eb4b4b 0 0 1px 0;
	}

	50%
	{
		box-shadow: inset #eb4b4b 0 0 4px 0;
	}

	100%
	{
		box-shadow: inset #eb4b4b 0 0 1px 0;
	}
}

@keyframes 'breathe_arcana'
{
	0%
	{
		box-shadow: inset #88ff4d 0 0 1px 0;
	}

	50%
	{
		box-shadow: inset #88ff4d 0 0 4px 0;
	}

	100%
	{
		box-shadow: inset #88ff4d 0 0 1px 0;
	}
}

@keyframes 'breathe_immortal'
{
	0%
	{
		box-shadow: inset #e6b800 0 0 1px 0;
	}

	50%
	{
		box-shadow: inset #e6b800 0 0 4px 0;
	}

	100%
	{
		box-shadow: inset #e6b800 0 0 1px 0;
	}
}

@keyframes 'breathe_legendary'
{
	0%
	{
		box-shadow: inset #d32ce6 0 0 1px 0;
	}

	50%
	{
		box-shadow: inset #d32ce6 0 0 4px 0;
	}

	100%
	{
		box-shadow: inset #d32ce6 0 0 1px 0;
	}
}

.Battlepass
{
	width: 100%;
	height: 100%;
	z-index: -10;
}

#BattlepassButtonContainer
{
	margin-top: 3.7%;
	align: center top;
	flow-children: down;
}

#BattlepassButtonContainer.PW
{
	margin-left: 10%;
	margin-top: 0%;
	align: left top;
}

#SafeToLeave {
	width: 250px;
	max-width: 400px;
	padding-left: 10px;
	padding-right: 10px;
	height: 40px;
	background-color: green;
	horizontal-align: center;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	visibility: collapse;
}

#SafeToLeave Label {
	align: center center;
	color: white;
	text-transform: uppercase;
	text-align: center center;
	font-size: 14px;
}

#BattlepassButton
{
	background-image: url("file://panorama/images/custom_game/battlepass/battlepass_new.png");
	background-size: 28px;
	vertical-align: top;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.5;
	wash-color: #CDF;
	transition-property: opacity;
	transition-duration: 0.2s;
}

#BattlepassButton:hover
{
	opacity: 1.0;
}

#BattlepassButton:active
{
	opacity: 1.0;
}

#BattlepassWindow
{
	width: 820px;
	height: 840px;
	transform: translate3d( 45%, 0, 0px );
	margin-bottom: 100px;
	background-color: gradient( linear, 100% 0, 0% 0%, from( #13161a ), color-stop( 0.4, #13161a ), to( #2b3139ee ) );
	border-top:  1px solid #3a363a;	
	border-left:  1px solid #3a363a;
	border-bottom: 1px solid #1d2126;	
	border-right: 1px solid #1d2126;
	box-shadow: 0px 0px 12px 0px #000000a5;
	align: right center;
	flow-children: down;
	padding: 10px;
	transition-property: transform;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
}

#BattlepassWindow.setvisible {
	visibility: visible;
	transform: translate3d( 0, 0, 0px );
}

#BattlepassWindow.sethidden {
	transform: translate3d( 100%, 0, 0px );
}

#InfoContent
{
	width: 100%;
	/* height: 200px; */
	/* background-color:  #ddd; */
	flow-children: down;
}

#BattlepassInfoContainer,
#DonatorInfoContainer,
#LeaderboardInfoContainer,
#SettingsInfoContainer {
	width: 100%;
	height: 520px;
	flow-children: down;
	padding: 5px;
}

#LeaderboardInfoContainer {
	height: 550px;
}

#LocalPlayerInfoContainer {
	width: 100%;
	height: 60px;
}

#LocalPlayerInfo {
	align: center bottom;
}

.LeaderboardTableWrapper {
	width: 100%;
	background-color: #040c1850;
	height: 445px;
	padding-bottom: 10px;
	overflow:  squish scroll;
	flow-children: down;
}

#BattlepassButtons {
	margin-top:  -40px;
	margin-right:  10px;
	margin-bottom: 15px;
	width: 30%;
	flow-children: right;
	align:  right top;
}


#DonatorInfoContainer,
#LeaderboardInfoContainer,
#SettingsInfoContainer {
	visibility: collapse;
}

#InfoHeader {
	width: 100%;
	height: 50px;
	background-color: #2c4d6015;
	border-bottom: 1px solid #29353b;
	margin-bottom: 20px;
}

.LeaderboardButtonLabel {
	text-align: center;
	font-size: 19px;
	color:#daebff;
	align:  center center;
}

#Rank,
#SteamAvatar,
#XP,
#IMR {
	height: 90%;
	align:  center center;
	flow-children: right;
}

#Rank,
#SteamAvatar,
#XP {
	background-color: #2b323fa4;
}

#Rank {
	margin: 0px 2px 3px 0px;
}

#SteamAvatar,
#XP {
	margin: 0px 2px 3px 2px;
}

#IMR {
	margin: 0px 0px 3px 2px;
}

#Rank:hover,
#SteamAvatar:hover,
#XP:hover,
#RoundOrderLeft:hover,
.RoundOrder:hover,
#RoundOrderRight:hover {
	background-color: #303848;
}

#RoundOrderLeft {
	horizontal-align: left;
	background-image: url("s2r://panorama/images/control_icons/arrow_solid_left_png.vtex");
}

.RoundOrder {
	width:  56%;
	height: 100%;
	align: center center;
	background-color: #2b323fa4;
}

#RoundOrderLabel {
	align:  center center;
	font-size: 19px;
	color: #daebff;
}

#RoundOrderRight {
	horizontal-align: right;
	background-image: url("s2r://panorama/images/control_icons/arrow_solid_right_png.vtex");
}

.LeaderboardArrowButton {
	width:  20%;
	height:  100%;
	background-color: #2b323fa4;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.LeaderboardRankLabel,
.LeaderboardXPLabel,
.LeaderboardAvatarLabel,
.LeaderboardAvatar_altLabel
{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 19px;
	color:#daebff;
}

.LeaderboardIMR {
	text-align: center;
	font-size: 19px;
	color:#daebff;	
}

.LeaderboardAvatarDiretide {
	width: 40%;
	height: 100%;
	text-align: center;
	font-size: 19px;
	color:#daebff;
}

/* Leaderboard Legend */
.LeaderboardLegend {
	width: 100%;
	height: 40px;
	flow-children: right;
	/* border-bottom: 1px solid white; */
}

/* Leaderboard */
.LeaderboardGames {
	width: 100%;
	height: 45px;
	flow-children: right-wrap;
	border-top: 1px solid #3f464ecc;
}

.LeaderboardRank {
	width: 10%;	
	text-align: center;
	font-size: 19px;
	color:#daebff;
	align:  center center;
}

.LeaderboardAvatar {
	width: 15%;
	height: 90%;
	border: 0;
	align:  center top;
}

.LeaderboardXP {
	width: 50%;
	align:  center center;
}

.LeaderboardIMR {
	width: 25%;
	align:  center center;
}

#PlayerContent
{
	width: 100%;
	height: fit-children;
	flow-children: right;
}

#RadiantPlayers
{
	width: 50%;
	height: fit-children;
	background-color: #005000da;
	flow-children: down;
}

#DirePlayers
{
	width: 50%;
	height: fit-children;
	background-color: #500000da;
	flow-children: down;
}

.TeamTitle {
	width: 100%;
	height: 40px;
	text-align: center;
	font-size: 24px;
	font-weight: bolder;
	color:#fff;
}

#TabsButtonWrapper {
	border-top:  1px solid #29353b;
	padding-top:  10px;
	padding-bottom:  10px;
	width: 100%;
	flow-children: down;
	background-color:  gradient( linear, 0% 0, 0 100%, from( #414f6245 ), color-stop( 0.9, #13161a00 ), to( #13161a00 ) );
	/* background-color: #414f62; */
}

.MiniTabButtonContainer {
	flow-children: right;
	width: 100%;
	align:  center top;
	background-color: #04050780;
	margin: 10px 5px 0;
	padding: 4px 10px 0px;
	visibility: collapse;
}
.sub_nav_tab {	
	padding:  9px 10px;
	flow-children: right;
}
.sub_nav_tab Label {
	transition-property: color, text-shadow;
	transition-duration: 0.2s;
	text-transform: uppercase;
//	letter-spacing: 0.5px;
	color: #606366;
}
.sub_nav_tab.active Label,
.sub_nav_tab:hover Label {
	color: #e9ebed;
	text-shadow: 1px 1px 8px 2.0 #6ab5ff12;
}
.tab_separator {
	align: center center;
	margin: 0 20px;
}
.tab_separator Label {
	color: #606366;
}
#TabButtonContainer {
	flow-children: right;
	margin-left:  10px;
	margin-right:  10px;
	align:  center top;
}
#CloseButton {
	width: 90px;
	height: 37px;
	align: left center;
}
#CloseButtonImage {
	width: 37px;
	height: 37px;
	align: left center;
	background-image: url("file://panorama/images/custom_game/battlepass/assets/close.png");
	opacity: 0.5;
}
#CloseButton:hover #CloseButtonImage {
	opacity: 1;
}
#SettingsButton {
	width: 37px;
	height: 37px;
	align: right center;
}
#SettingsButtonImage {
	width: 37px;
	height: 37px;
	align: left center;
	background-image: url("s2r://panorama/images/control_icons/gear_png.vtex");
	background-size: cover;
	opacity: 0.5;
}
#SettingsButton:hover #SettingsButtonImage {
	opacity: 1;
}
.color_animation {	
	animation-name: color_transition;
	animation-duration: 3.0s;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}
#OverviewTabButton,
#DonatorTabButton,
#LeaderboardTabButton {
	width: 230px;
	height: 47px;
	padding-left: 30px;
	align: left center;
	margin-right: -18px;
	transition-property: brightness;
	transition-duration: 0.2s;
}

#OverviewTabButton .text,
#DonatorTabButton .text,
#LeaderboardTabButton .text {
	font-size: 19px;
//	letter-spacing: 1px;
	text-transform: uppercase;
	align: left center;
	padding-left: 30px;
	margin-top: 0px;
}
#OverviewTabButton .image,
#DonatorTabButton .image,
#LeaderboardTabButton .image {
	width: 14px;
	height: 18px;
	align: left center;
	margin-top: -1px;
}	
#OverviewTabButton {
	background-image: url("file://panorama/images/custom_game/battlepass/assets/btn_battlepass.png");
}

#OverviewTabButton:hover, #OverviewTabButton:active,
#DonatorTabButton:hover, #DonatorTabButton:active,
#LeaderboardTabButton:hover, #LeaderboardTabButton:active {
	brightness:  2;
	animation-name:  none;
}
#OverviewTabButton .text {
	color: #ceebf2;
	text-shadow: 1px 1px 2px 2.0 #1a424ca2;
}
#OverviewTabButton .image {
	background-image: url("file://panorama/images/custom_game/battlepass/assets/btn_battlepass_icon.png");
}
#DonatorTabButton {
	background-image: url("file://panorama/images/custom_game/battlepass/assets/btn_donator.png");
}
#DonatorTabButton .text {
	color: #faf3e4;
	text-shadow: 1px 1px 2px 2.0 #5b4618a2;
}
#DonatorTabButton .image {
	background-image: url("file://panorama/images/custom_game/battlepass/assets/btn_donator_icon.png");
}
#LeaderboardTabButton {
	background-image: url("file://panorama/images/custom_game/battlepass/assets/btn_leaderboard.png");
}
#LeaderboardTabButton .text {
	color: #f3d0d0;
	text-shadow: 1px 1px 2px 2.0 #2a0505a2;
}
#LeaderboardTabButton .image {
	background-image: url("file://panorama/images/custom_game/battlepass/assets/btn_leaderboard_icon.png");
}

.ButtonClass:hover {
	saturation: 1.0;
}

.ButtonClass:active {
	saturation: 0.6;
}

.Tops {
	width: 100%;
	height: fit-children;
	flow-children: down;
}

.imbar-progress-bar
{
	width: 100%;
	border-radius: 10px;
	background-color: #282f39;
	height: 28px;
	vertical-align: center;
	overflow:  clip;
}

.ProgressBarLeft
{
	border-radius:  0 6px 6px 0;
	background-color: gradient( linear,  100% 0%, 0 0 , from (#0a9153), color-stop( 0.5, #09bb6a ), to(#0a9153));
}

#ProgressBar_Right
{
	background-color: gradient( linear, 0% 0%, 0 0%, from( #222222FF ), to( black ) );
}

.imbar-lvl
{
	width: 35%;
	font-size: 16px;
	margin-top: 2px;
	margin-left: 15px;
	color: white;
	vertical-align: center;
	horizontal-align: left;
	text-align: left;
	opacity: 1;
	text-shadow: 1px 1px 2px 2.0 #00000030;
}
.imbar-rank-wrapper {
	width: 30%;
	flow-children:  right;
	align: center center;
}
.imbar-rank
{
	margin-top: 2px;
	font-size: 14px;
	color: white;
	vertical-align: center;
	horizontal-align: left;
	text-align: left;
	opacity: 1;
	text-transform: uppercase;
	border-radius: 5px;
	margin-left: 8px;

	text-shadow: 1px 1px 2px 3.0 #00000030;
}

.imbar-rank-cicle {
	width: 12px;
	height: 12px;
	align:  center center;
	border-radius: 50%;
	opacity: 0.9;
	box-shadow: 0px 0px 2px 0px #00000085;
	brightness: 0.9;
}

.imbar-xp
{
	width: 40%;
	margin-top: 2px;
	margin-right: 18px;
	font-size: 16px;
	color: white;
	vertical-align: center;
	horizontal-align: right;
	text-align: right;
	opacity: 1;
//	letter-spacing: 0.5px;
	text-shadow: 1px 1px 2px 2.0 #00000030;
}

.LeaderboardInGamePlayers {
	width: 100%;
	flow-children: right;
}

/* Labels */
.HoldoutLabelSmall
{
	color: #b2baaf;
	text-transform: uppercase;
	text-align: center;

	font-family: Radiance,FZKai-Z03,TH Sarabun New,YDYGO 540;
//	letter-spacing: 2px;
	text-overflow: clip;

	align: center center;
	text-align: center;	
	text-shadow: 1px 1px 2px 3.0 #000000ee;
	font-size: 22px;
}

.HoldoutLabelSmall_alt
{
	color: white;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 2px 2.0 #00000011;

	font-family: Radiance,FZKai-Z03,TH Sarabun New,YDYGO 540;
	font-size: 14px;
//	letter-spacing: 2px;
	text-overflow: clip;

	horizontal-align: center;
	text-align: center;	
	margin-bottom: 12px;
	text-shadow: 1px 1px 2px 3.0 #000000;
}

.HoldoutLabelSmall.Header
{
	width: 95px;
}

#RoshanLevel_alt
{
	margin-top: 5%;
	margin-left: 2%;
	horizontal-align: left;
	color: white;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 2px 2.0 #00000011;

	font-family: Radiance,FZKai-Z03,TH Sarabun New,YDYGO 540;
//	letter-spacing: 2px;
	text-overflow: clip;

	text-align: center;
	text-shadow: 1px 1px 2px 3.0 #000000;
	font-size: 16px;
}

/* Game Info */
.GameModeValues
{
	width: 100%;
	margin-bottom: 20px;
	flow-children: right;
}

.GameModeLabelPanel
{
	width: 26%;
	margin-left: 3%;
	margin-right: 3%;
	flow-children: down;
}

.GameModeValuePanel
{
	width: 15%;
	margin-left: 2%;
	flow-children: down;
	font-size: 13px;
}

.Separator {
	width: 1px;
	height: 100%;
	background-color: #303e45bb;
}

.ImbaGameInfoLabel
{
	margin-top: 3px;
	horizontal-align: left;
	font-size: 14px;
	color: #a2a99e;
	vertical-align: top;
//	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center center;
	text-shadow: 0px 0px 3px 2 #00000050;
	color: #a2a99e;
	line-height: 16px;
	/* color: #A3B5D0dd; */
}

#ComingSoonPanel, #TabTitlePanel {
	width: 100%;
	height: 40px;
	background-color: #39404855;
	align: left top;
	padding-left: 20px;	
}
#ComingSoon, #TabTitlePanel Label {
	color: #99a8ad;
	text-transform: uppercase;
	text-align: center center;
	font-size: 16px;
	align: left center;
	margin-top:  2px;
	text-overflow: shrink;
}

.BattlepassRow {
	width: 100%;
	height: 100%;
	align: center center;
	/* background-color: #000000ba; */
	flow-children: right;
	overflow: scroll squish;
}

.BattlepassReward {
	width: 127px;
	height: 100%;
	margin-left: 2px;
	margin-right: 2px;
	flow-children: down;
}

.BattlepassRewardImage {
	width: 100%;
	height: 80%;
	background-size: cover;
	background-position: 0% 0%;
}

.BattlepassRewardImageLabelContainer {
	width: 100%;
	height: 100%;
	background-color: #000000aa;
}

#BattlepassRewardImageLabel {
	font-size: 16px;
//	letter-spacing: 1px;
	padding: 80px 0px;
	text-transform: uppercase;
	text-overflow: shrink;
	text-align: center center;
	text-shadow: 0px 0px 4px 4 #000000a5;
	color: #b8c5ca;
	line-height: 14px;
}

.BattlepassRewardImageLabelContainer:hover {
	background-color: none;
	transition-property: background-color;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

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

.BattlepassRewardTitleContainer {
	width: 100%;
	height: 20%;
	box-shadow: 0px 2px 6px 0px #000000a5;
	background-color: #000000aa;
	flow-children: down;
}

.BattlepassRewardTitle {
	height: 50%;
	horizontal-align: center;
}

.BattlepassRewardRarity {
	height: 50%;
	horizontal-align: center;
}

.BattlepassReward:hover .BattlepassRewardPanelUnlocked {
	opacity: 0;
}

.BattlepassRewardIcon {
	width: 253px;
	height: 100%;
	border: 1px solid #38424b;
	box-shadow: 0px 2px 6px 0px #000000a5;
}

.BattlepassRewardIcon_locked {
	wash-color: #000000a0;
	brightness: 0.6;
}

.BattlepassRewardIcon_unreleased {
	wash-color: #000000a0;
	brightness: 0.6;
}

.BattlepassRewardHeroIcon {
	width: 25px;
	height: 25px;
	horizontal-align: right;
	background-size: cover;
}

.BattlepassRewardLabel {
	font-size: 12px;
//	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center center;
	text-shadow: 0px 0px 3px 3 #00000070;
	color: #99a8ad;
	width: 100%;
	height: 100%;
	margin: 30% 2px 0px 2px;
}
.BattlepassRewardLabel.unlocked {
	background-color: #2a3440;
	border: 1px solid #1c2328;
	margin-top:  5px;
	box-shadow: 0px 0 0 0px #00000000;
}
.BattlepassRewardLabel.locked {
	background-color: #282a2d;
	border-color: #1c2328;
	margin-top:  -2px;
}
.BattlepassRewardLabel.unreleased {
	background-color: #282a2d;
	border-color: #1c2328;
	margin-top:  -2px;
}

.BattlepassRewardPanelUnlocked {
	width: 100%;
	height: 100%;
	background-color: #000000ba;
}

.BattlepassRewardLabelLocked {
	width: 100%;
	horizontal-align: left;
	font-size: 12px;
	vertical-align: top;
//	letter-spacing: 1px;
	text-transform: uppercase;
	text-overflow: shrink;
	text-align: center center;
	text-shadow: 0px 0px 4px 4 #000000a5;
	color: red;
	brightness:  1.5;
	line-height: 14px;
}

.BattlepassRewardLabelUnlocked {
	font-size: 12px;
//	letter-spacing: 1px;
	padding: 0 5px;
	text-transform: uppercase;
	text-overflow: shrink;
	text-align: center center;
	text-shadow: 0px 0px 4px 4 #000000a5;
	color: #b8c5ca;
	line-height: 14px;
}

.BattlepassRewardLabelUnreleased {
	width: 100%;
	horizontal-align: left;
	font-size: 12px;
	vertical-align: top;
//	letter-spacing: 1px;
	text-transform: uppercase;
	text-overflow: shrink;
	text-align: center center;
	text-shadow: 0px 0px 4px 4 #000000a5;
	color: orange;
	brightness:  1.5;
	line-height: 14px;
}

#PatreonTableWrapper,
#CompanionTableWrapper,
#StatueTableWrapper,
#EmblemTableWrapper {
	overflow: squish scroll;
	flow-children: down;
	height: 470px;
	width: 100%;
	visibility: collapse;
}

#CompanionTableWrapper {
	visibility: visible;
}

.DonatorRow {
	width: 100%;
	height: 185px;
	margin-top: 5px;
	margin-bottom: 3px;
	horizontal-align: left;
	flow-children: right;
/*	overflow: noclip scroll; */
}

.DonatorReward {
	width: 153px;
	height: 100%;
	margin-left: 2px;
	margin-right: 2px;
	flow-children: down;
	background-color: #000000;
}
.DonatorReward Button {
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #021419 ), to( #1a2b30 ) );
	align: center center;
	margin-top:  12px;
	border-bottom: 1px solid #052730;
	border-right: 1px solid #052730;
	border-top: 1px solid #0c2831;
	border-left: 1px solid #0c2831;
}
.DonatorReward Label {
	color:  #b1b1b1;
	margin: 2px;
	font-size: 13px;
//	letter-spacing: 0.4px;
	box-shadow: none;
}

.DonatorReward:hover {
	background-color: #141617;
}

.DonatorReward:active {
	background-color: #000000aa;
}

#CompanionNotification {
	width: 100%;
	height: 40px;
	background-color: none;
	align: center center;
	visibility: visible;
	margin-bottom: 15px;
}

#CompanionNotification.success,
#CompanionNotification.failure {
	background-color: green;
	animation-name: fade_full;
	animation-duration: 3.0s;
	animation-timing-function: ease-in;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	visibility: visible;
}

#CompanionNotification.failure {
	background-color: darkred;
}

#CompanionNotification.not_donator {
	animation-duration: 3.0s;
	animation-name: fade_full;
	animation-timing-function: ease-in;
	animation-direction: alternate;
	animation-iteration-count: 1;
	background-color: #905000da;
	visibility: visible;
}

#CompanionNotification.not_donator:hover {
	background-color: #804000da;
}

#CompanionNotification.not_donator:active {
	background-color: #703000da;
}

#CompanionNotificationLabel {
	padding: 10% 0% 10% 0%;
	color: white;
	text-align: center center;
	align: center center;
	font-size: 18px;
	text-overflow: shrink;
}

.CompanionNew {
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #3366ffba ), to( #414849ba ) );
}

.CompanionUnique {
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #997300ba ), to( #414849ba ) );
}

#DonatorOptions {
	width: 100%;
	height: 15%;
	margin-bottom: 5px;
	background-color: #000000da;
	padding: 10px;
}

#DonatorOptionsToggle {
	wash-color: #CDF;
}

#DonatorOptionsToggle
{
	width: 33%;
	height: 100%;
	align: left center;
	saturation: 0.9;
}

#DonatorOptionsToggleLabel {
	align: center center;
	color: white;
	text-align: center center;
	font-size: 16px;
}

.companion_enabled {
	background-color: #000090ba;
}

.companion_enabled:hover {
	background-color: #000060ba;
}

.companion_enabled:active
{
	saturation: 1.0;
	background-color: #000030ba;
}

.companion_disabled {
	background-color: #500000ba;
}

.companion_disabled:hover {
	background-color: #400000ba;
}

.companion_disabled:active
{
	saturation: 1.0;
	background-color: #300000ba;
}

.BattlepassButton {
	width: 190px;
	height: 40px;
	margin-left: 10px;
	margin-bottom: 5px;
	align:  left center;
	border-bottom: 1px solid #333333;
	border-right: 1px solid #333333;
	border-top: 1px solid #555555;
	border-top: 1px solid #555555;
	padding: 5px 20px;
	background-color:  gradient( linear, 0% 0, 0 100%, from( #394048 ), color-stop( 0.9, #4b565e ), to( #4b565e ) );
	flow-children: right;
	transition-property: pre-transform-scale2d, brightness;
	transition-duration: 0.1s;
	transition-timing-function: ease-in;	
	box-shadow: 0px 2px 6px 0px #000000a5;
}

.BattlepassButton Label {
	align: center center;
	color: #eaebeb;
	text-align: center center;
	font-size: 19px;
	font-weight: normal;
//	letter-spacing: 2px;
	margin-top: 2px;
	text-transform: uppercase;
	text-shadow: 1px 1px 3px 2.0 #00000025;
}

.RefreshBattlepass {
	width: 20px;
	height: 20px;
	margin-left: 6px;
	margin-right: 6px;
	background-image: url("s2r://panorama/images/control_icons/refresh_psd.vtex");
	background-size: 100% 100%;
	align: left center;
}

.BattlepassButton:hover {
	brightness: 1.6;
}

.RefreshBattlepass.Active {
	animation-name: refresh;
	animation-duration: 0.55s;
	animation-delay: 0.15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-direction: reverse;
}

/* colors */
.common_border {
	box-shadow: inset #b0c3d9 0 0 4px 0;
}

.uncommon_border {
	box-shadow: inset #5e98d9 0 0 4px 0;
}

.rare_border {
	box-shadow: inset #4b69ff 0 0 4px 0;
}

.mythical_border {
	box-shadow: inset #8847ff 0 0 4px 0;
}

.legendary_border {
	animation-name: breathe_legendary;
	animation-duration: 2.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}

.immortal_border {
	animation-name: breathe_immortal;
	animation-duration: 2.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}

.arcana_border {
	animation-name: breathe_arcana;
	animation-duration: 2.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}

.ancient_border {
	animation-name: breathe_ancient;
	animation-duration: 2.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}

.common_text {
	color: #b0c3d9;
}

.uncommon_text {
	color: #5e98d9;
}

.rare_text {
	color: #4b69ff;
}

.mythical_text {
	color: #8847ff;
}

.legendary_text {
	color: #d32ce6;
}

.immortal_text {
	color: #b28a33;
}

.arcana_text {
	color: #ade55c;
}

.ancient_text {
	color: #eb4b4b;
}

.gold {
	color: gold;
}

.blue {
	color: dodgerblue;
}

.patreon_donator_row {
	margin-top: 1px;
	margin-bottom: 1px;
	width: 100%;
	height: 150px;
	flow-children: right;
	background-color: #000000aa;
	border-radius: 5px;
	border: 1px solid #1d2126;
}

.patreon_donator_row Image {
	margin: 10px;
	width: 25%;
	height: 100%;
	align: left center;
	border-radius: 5px;
	border: 1px solid #1d2126;
}

.patreon_donator_row_center {
	margin: 10px;
	width: 50%;
	height: 100%;
	background-color: #000000aa;
}

.SettingsButtonClass {
	width: 500px;
	margin-bottom: 5px;
	align:  center top;
	border-bottom: 1px solid #333333;
	border-right: 1px solid #333333;
	border-top: 1px solid #555555;
	border-top: 1px solid #555555;
	padding: 5px 20px;
	background-color:  gradient( linear, 0% 0, 0 100%, from( #394048 ), color-stop( 0.9, #4b565e ), to( #4b565e ) );
	flow-children: right;
	transition-property: pre-transform-scale2d, brightness;
	transition-duration: 0.1s;
	transition-timing-function: ease-in;	
	box-shadow: 0px 2px 6px 0px #000000a5;
}

.SettingsButtonClass Label {
	align: center center;
	color: #eaebeb;
	text-align: center center;
	font-size: 14px;
	font-weight: normal;
//	letter-spacing: 2px;
	margin-top: 2px;
	text-transform: uppercase;
	text-shadow: 1px 1px 3px 2.0 #00000025;
	text-overflow: shrink;
}

.SettingsButtonClass:hover {
	brightness: 1.6;
}

.BattlepassPlayerRow {
	width: 100%;
	height: 25%;
	margin-top: 5px;
	/* background-color: #000000ba; */
	flow-children: right;
}

#BattlepassRewardContainer {
	width: 100%;
	height: 520px;
	flow-children: down;
	opacity-mask: url("s2r://panorama/images/masks/softedge_horizontal_png.vtex");
}

#PlayerSteamAvatar {
	width: 100px;
	height: 100px;
}

.ContainerLevel {
	height: 100%;
	flow-children: down;
}

.RewardContainerLevel {
	height: 80%;
	flow-children: right;
}

.BattlepassRewardLabelContainer {
	width: 100%;
	height: 10%;
	box-shadow: 0px 1px 8px 0px #000000a2;
}

.RewardEquipped {
	width: 20%;
	height: 20%;
	background-image: url("s2r://panorama/images/status_icons/econtooltip_equipped_psd.vtex");
	horizontal-align: right;
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 100%;
	wash-color: #B3DFDC;
}

#PanelImbaXP 
{
	width: 50%;
	padding: 3px 10px 5px;
	align: center center;
//	background-color: #0d061dcc;
}
#LevelContainer
{
	flow-children: right;
	align: center top;
	width: 100%;
	padding: 0 3px;
}
#LevelContainerChild {
	align: left top;
	flow-children: right;
	margin-right:  15px;
	margin-top: 1px;
}
#LevelContainerChild2 {
	align: right top;
}
#LevelLabel
{
	color: #c3b9d8;
	font-family: Radiance,FZKai-Z03,TH Sarabun New,YDYGO 540;
	font-size: 16px;
	align: center top;
}

#ImbaXPRank0,
#ImbaXPRank1,
#ImbaXPRank2,
#ImbaXPRank3,
#ImbaXPRank4,
#ImbaXPRank5,
#ImbaXPRank6,
#ImbaXPRank7,
#ImbaXPRank8,
#ImbaXPRank9,
#ImbaXPRank10,
#ImbaXPRank11,
#ImbaXPRank12,
#ImbaXPRank13,
#ImbaXPRank14,
#ImbaXPRank15,
#ImbaXPRank16,
#ImbaXPRank17,
#ImbaXPRank18,
#ImbaXPRank19,
#ImbaXPRank20,
#ImbaXPRank21,
#ImbaXPRank22,
#ImbaXPRank23
{

	font-family: Radiance,FZKai-Z03,TH Sarabun New,YDYGO 540;
	font-size: 16px;
	align: center top;
	/*margin-top: 1px;*/
	/*margin-right: 5%;
	margin-bottom: 1px;
	font-size: 16px;
	font-weight: bold;
	color: white;
	text-shadow: 0 0 3px #000000cc;
	align: center center;*/
}

#ImbaXP0,
#ImbaXP1,
#ImbaXP2,
#ImbaXP3,
#ImbaXP4,
#ImbaXP5,
#ImbaXP6,
#ImbaXP7,
#ImbaXP8,
#ImbaXP9,
#ImbaXP10,
#ImbaXP11,
#ImbaXP12,
#ImbaXP13,
#ImbaXP14,
#ImbaXP15,
#ImbaXP16,
#ImbaXP17,
#ImbaXP18,
#ImbaXP19,
#ImbaXP20,
#ImbaXP21,
#ImbaXP22,
#ImbaXP23
{
	font-family: Radiance,FZKai-Z03,TH Sarabun New,YDYGO 540;
	font-size: 16px;
	color: #fefeff;
	align: center center;
	opacity: 0.5;
}

#ImbaXPEarned0,
#ImbaXPEarned1,
#ImbaXPEarned2,
#ImbaXPEarned3,
#ImbaXPEarned4,
#ImbaXPEarned5,
#ImbaXPEarned6,
#ImbaXPEarned7,
#ImbaXPEarned8,
#ImbaXPEarned9,
#ImbaXPEarned10,
#ImbaXPEarned11,
#ImbaXPEarned12,
#ImbaXPEarned13,
#ImbaXPEarned14,
#ImbaXPEarned15,
#ImbaXPEarned16,
#ImbaXPEarned17,
#ImbaXPEarned18,
#ImbaXPEarned19,
#ImbaXPEarned20,
#ImbaXPEarned21,
#ImbaXPEarned22,
#ImbaXPEarned23
{
	visibility: collapse;
}

#ImbaLvl0,
#ImbaLvl1,
#ImbaLvl2,
#ImbaLvl3,
#ImbaLvl4,
#ImbaLvl5,
#ImbaLvl6,
#ImbaLvl7,
#ImbaLvl8,
#ImbaLvl9,
#ImbaLvl10,
#ImbaLvl11,
#ImbaLvl12,
#ImbaLvl13,
#ImbaLvl14,
#ImbaLvl15,
#ImbaLvl16,
#ImbaLvl17,
#ImbaLvl18,
#ImbaLvl19,
#ImbaLvl20,
#ImbaLvl21,
#ImbaLvl22,
#ImbaLvl23
{

	font-family: Radiance,FZKai-Z03,TH Sarabun New,YDYGO 540;
	font-size: 16px;
	align: center bottom;
	color: #c3b9d8;
	/*font-size: 16px;
	font-weight: bold;
	margin-top: 2px;
	margin-left: 3%;
	color: white;
	align: left center;
	opacity: 0.75;*/
}

#XPProgressBar0,
#XPProgressBar1,
#XPProgressBar2,
#XPProgressBar3,
#XPProgressBar4,
#XPProgressBar5,
#XPProgressBar6,
#XPProgressBar7,
#XPProgressBar8,
#XPProgressBar9,
#XPProgressBar10,
#XPProgressBar11,
#XPProgressBar12,
#XPProgressBar13,
#XPProgressBar14,
#XPProgressBar15,
#XPProgressBar16,
#XPProgressBar17,
#XPProgressBar18,
#XPProgressBar19,
#XPProgressBar20,
#XPProgressBar21,
#XPProgressBar22,
#XPProgressBar23
{
	width: 100%;
	height: 20px;
	vertical-align: bottom;
	horizontal-align: center;
	flow-children: right;
}

#XPProgressBar0_Left,
#XPProgressBar1_Left,
#XPProgressBar2_Left,
#XPProgressBar3_Left,
#XPProgressBar4_Left,
#XPProgressBar5_Left,
#XPProgressBar6_Left,
#XPProgressBar7_Left,
#XPProgressBar8_Left,
#XPProgressBar9_Left,
#XPProgressBar10_Left,
#XPProgressBar11_Left,
#XPProgressBar12_Left,
#XPProgressBar13_Left,
#XPProgressBar14_Left,
#XPProgressBar15_Left,
#XPProgressBar16_Left,
#XPProgressBar17_Left,
#XPProgressBar18_Left,
#XPProgressBar19_Left,
#XPProgressBar20_Left,
#XPProgressBar21_Left,
#XPProgressBar22_Left,
#XPProgressBar23_Left
{
	background-color: gradient( linear,  100% 0%, 0 0 , from (#3e3060), color-stop( 0.5, #58418b ), to(#3e3060));
	border-radius: 50px 0 0 50px;
	border-top: 0px;
}

#XPProgressBar0_Right,
#XPProgressBar1_Right,
#XPProgressBar2_Right,
#XPProgressBar3_Right,
#XPProgressBar4_Right,
#XPProgressBar5_Right,
#XPProgressBar6_Right,
#XPProgressBar7_Right,
#XPProgressBar8_Right,
#XPProgressBar9_Right,
#XPProgressBar10_Right,
#XPProgressBar11_Right,
#XPProgressBar12_Right,
#XPProgressBar13_Right,
#XPProgressBar14_Right,
#XPProgressBar15_Right,
#XPProgressBar16_Right,
#XPProgressBar17_Right,
#XPProgressBar18_Right,
#XPProgressBar19_Right,
#XPProgressBar20_Right,
#XPProgressBar21_Right,
#XPProgressBar22_Right,
#XPProgressBar23_Right
{
	background-color: #2d2839;
	border-radius:  0 50px 50px 0;
}

#XPProgressBarContainer0,
#XPProgressBarContainer1,
#XPProgressBarContainer2,
#XPProgressBarContainer3,
#XPProgressBarContainer4,
#XPProgressBarContainer5,
#XPProgressBarContainer6,
#XPProgressBarContainer7,
#XPProgressBarContainer8,
#XPProgressBarContainer9,
#XPProgressBarContainer10,
#XPProgressBarContainer11,
#XPProgressBarContainer12,
#XPProgressBarContainer13,
#XPProgressBarContainer14,
#XPProgressBarContainer15,
#XPProgressBarContainer16,
#XPProgressBarContainer17,
#XPProgressBarContainer18,
#XPProgressBarContainer19,
#XPProgressBarContainer20,
#XPProgressBarContainer21,
#XPProgressBarContainer22,
#XPProgressBarContainer23
{
	vertical-align: bottom;
	height: 40px;
	width: 100%;
}

#ChatContainer {
	margin-top:  20px;
}

#GameChatEntry {
	height: 32px;
	margin-top: 2px;
	background-color: #000000aa;
	font-size: 16px;
	padding: 6px 3px 5px 8px;
	color: white;
	font-weight: bold;
	font-family: Radiance,FZLanTingHei-R-GBK,TH Sarabun New,YDYGO 540,Gulim,MingLiU;
	text-overflow: clip;
	border-radius: 3px;
}

.companion_scene {
	width: 100%;
	height: 100%;
	margin-top: -5px;
	opacity-mask: url("s2r://panorama/images/masks/hero_model_opacity_mask_png.vtex");
}
