@define COLOR_INFO_BACKGROUND_BLUE: #224470dd;
@define COLOR_INFO_BACKGROUND_DARK_BLUE: #002233;
@define COLOR_INFO_TEXT_BLUE: #66aaff;

@define COLOR_INFO_BACKGROUND_GREEN: #004d1ada;
@define COLOR_INFO_BACKGROUND_GREEN_SOCIAL: #003800da;
@define COLOR_INFO_BACKGROUND_DARK_GREEN: #003312;
@define COLOR_INFO_TEXT_GREEN: #00e64d;

@define COLOR_INFO_BACKGROUND_ORANGE: #994d00ee;
@define COLOR_INFO_BACKGROUND_DARK_ORANGE: #663300;
@define COLOR_INFO_TEXT_ORANGE: #ffb366;

@define COLOR_INFO_BACKGROUND_RED: #660000ee;
@define COLOR_INFO_BACKGROUND_DARK_RED: #330000;
@define COLOR_INFO_TEXT_RED: #ff0000;

@define COLOR_INFO_BACKGROUND_GREY: #222222ee;
@define COLOR_INFO_BACKGROUND_GREY_SOCIAL: #222222da;
@define COLOR_INFO_BACKGROUND_DARK_GREY: #333333;
@define COLOR_INFO_TEXT_GREY: #ff0000;

@define COLOR_INFO_BACKGROUND_PURPLE: #0B0B27;
@define COLOR_INFO_BACKGROUND_PURPLE_SOCIAL: #222222da;
@define COLOR_INFO_BACKGROUND_DARK_PURPLE: #333333;
@define COLOR_INFO_TEXT_PURPLE: #ff0000;

@define maximum_length: 77%;

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

	50%
	{
		opacity: 1;
	}

	100%
	{
		opacity: 1.0;
	}
}

@keyframes 'VoteButtonAnim'
{
	0%
	{
		pre-transform-scale2d: 1.0;
		saturation: 1.0;
	}

	100%
	{
		pre-transform-scale2d: 1.1;
		saturation: 0.5;
	}
}

.addon-root {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-image: url("file://{images}/custom_game/loading_screen/bg.jpg");
}

.header {
	flow-children: right;
	width: maximum_length;
	height: 60%;
	margin: 10px 20px;
}

.top-left-container {
	width: 20%;
	height: 100%;
	margin-right: 1%;
	flow-children: down;
}

.profile-container {
	width: 100%;
	height: 40%;
	margin-bottom: 1%;
	box-shadow: -2px -2px 4px 4px #000000aa;
	background-color: #000000aa;
}

#HomeProfileContainer 
{
	height: 30%;
	flow-children: down;
	margin-bottom: 6px;
}

#HomeProfileContainer:hover #ProfileHeaderTitle
{
	color: white;
}

#HomeProfileContainer:hover #PopoutArrow
{
	wash-color: white;
}

#HomeProfileHeader {
	width: 336px;
	padding: 2px;
	min-height: 22px;
	height: 36px;
	horizontal-align: right;
	margin-top: 50px;
	margin-bottom: -30px;
	z-index: 1000;
	//background-color: gradient( linear, 100% 0%, 0% 0%, from( darkColor ), to( accentColor ) );
}

#HomeProfileHeader Label
{
	font-size: 18px;
	letter-spacing: 2px;
	padding-top: 4px;
	text-transform: uppercase;
}

#HomeProfileHeader Panel
{
	vertical-align: center;
	margin-left: 14px;
}

.TodayPageHeader
{
	background-color: #000000ee;
}

.DemoArrow
{
	width: 16px;
	height: 16px;
	margin-left: 10px;
	margin-right: 6px;
	margin-bottom: 0px;
	horizontal-align: right;

	background-image: url("s2r://panorama/images/control_icons/arrow_top_right_png.vtex");
	background-repeat: no-repeat;
	background-size: 14px 14px;
	wash-color: #A5ADA2ff;
}

#ProfileCard
{
	width: 100%;
	height: 100%;
	margin-top: 30px;
}

#vote-container {
	width: 100%;
	height: 70%;
	margin-top: 1%;
	box-shadow: -2px -2px 4px 4px #000000aa;
	background-color: #000000aa;
	flow-children: down;
}

.vote-header-container {
	width: 100%;
	height: 20%;
	flow-children: right;
}

.vote-title {
	margin-left: 10%;
	width: 80%;
	height: 100%;
	text-align: center center;
	font-size: 35px;
	color: #aaa;
}

.vote-label {
	width: 100%;
	height: 10%;
	margin-left: 30px;
	text-align: left center;
	font-size: 20px;
/*	letter-spacing: 1px; */
	text-shadow: 2px 2px 2px black;
	color: white;
}

.vote-check {
	margin-top: 10%;
	margin-left: 0px;
	text-overflow: shrink;
	text-align: center center;
}

.vote-change {
	width: 60%;
	height: 12%;
	align: center center;
	background-color: black;
}

.vote-change Label {
	width: 100%;
	height: 100%;
	font-size: 20px;
	margin-top: 9px;
	text-align: center center;
	text-shadow: 2px 2px 2px black;
}

.vote-info {
	width: 32px;
	height: 32px;
	margin-right: 5px;
	background-image: url("s2r://panorama/images/status_icons/information_psd.vtex");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	tooltip-position: right;
	tooltip-body-position: 50% 10%;
	wash-color: #888888;
}

.description-container {
	width: 80%;
	height: 100%;
	box-shadow: 0px 0px 10px #111;
	flow-children: down;
}

.description-background {
	width: 100%;
	height: 55%;
	background-image: url("file://{images}/custom_game/loading_screen/war_of_the_gods.jpg");
	background-position: 50% 0%;
	background-size: cover;
}

.description-text-container {
	width: 100%;
	height: 45%;
	background-color: COLOR_INFO_BACKGROUND_DARK_ORANGE;
	flow-children: down;
}

#loading-title-text {
	margin-top: 5%;
	width: 100%;
	font-size: 60px;
	text-align: center center;
	text-shadow: 2px 2px 4px black;
	text-transform: uppercase;
	color: gradient( linear, 0% 0%, 0% 100%, from( white ), color-stop( 0.5, #ffef8a ), to( #CFC26E ) );
}

#loading-subtitle-text {
	margin-top: 5%;
	width: 100%;
	font-size: 40px;
	text-align: center center;
	text-shadow: 2px 2px 4px black;
	text-transform: uppercase;
	color: gradient( linear, 0% 0%, 0% 100%, from( white ), color-stop( 0.5, #6E93CF ), to( #4C658D ) );
}

#loading-description-text {
	margin-top: 5%;
	width: 100%;
	font-size: 20px;
	text-align: center center;
	text-shadow: 2px 2px 4px black;
	font-weight: thin;
	color: white;
}

.footer {
	flow-children: down;
	width: maximum_length;
	height: 35%;
	margin: 10px 20px;
	box-shadow: -2px -2px 4px 4px #000000aa;
	background-color: #000000aa;
}

.bottom-button-container {
	width: 100%;
	height: 15%;
	flow-children: right;
	border-bottom: 2px solid black;
}

.bottom-tab-container {
	width: 100%;
	height: 85%;
}

.bottom-radio-button {
	height: 100%;
}

.bottom-radio-button Label {
	font-size: 22px;
	vertical-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: normal;
	color: #aaa;
}

.bottom-radio-button:Selected Label {
	text-shadow: 0px 0px 12px #5d7070;
}

.bottom-radio-separator {
	margin-left: 10px;
	margin-right: 5px;
	font-size: 22px;
	vertical-align: center;
	color: #aaa;
}

.bottom-radio-button > .RadioBox {
	visibility: collapse;
}

.bottom-footer-container {
	width: 100%;
	height: 100%;
}

.bottom-mods-container {
	flow-children: right;
	height: 100%;
}

.bottom-label {
	width: 90%;
	padding: 10% 3% 0% 3%;
	font-size: 20px;
	align: center center;
	color: #aaa;
}

.mod-cell {
	margin-left: 5px;
	margin-right: 5px;
	vertical-align: center;
	flow-children: none;
}

.mod-image-container {
	width: 285px;
	height: 214px;
	box-shadow: #00000088 -3px -3px 6px 6px;
	border: 1px solid black;
//	border-radius: 8px;
}

.mod-image-container:hover {
	saturation: 1.0;
}

.mod-image {
	width: 100%;
	height: 100%;
	pre-transform-scale2d: 1.0;
	transition-delay: 0.0s;
	saturation: 0.7;
	transition-property: saturation, pre-transform-scale2d;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
	z-index: 1;
}

.mod-image:hover {
	pre-transform-scale2d: 1.05;
	saturation: 1.0;
}

.mod-background {
	width: 100%;
	height: 100%;
	background-color: gradient( linear, 100% 0%, 100% 100%, from( #ffffff11) , color-stop ( .015, #ffffff06 ), color-stop ( .1, #ffffff05 ), color-stop ( .6, transparent), to( #00000077 ) );
}

.mod-footer {
	width: 100%;
	height: 30px;
	background-color: #000000dd;
	border-top: 1px solid #00000033;
	vertical-align: bottom;
	transition-property: height, background-color;
	transition-duration: 0.15s;
	transition-delay: 0.0s;
	transition-timing-function: ease-in-out;
//	border-bottom-left-radius: 8px;
//	border-bottom-right-radius: 8px;
}

.mod-name {
	height: 122px;
	font-size: 17px;
	margin-left: 8px;
	margin-top: 4px;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: normal;
	text-transform: none;
	color: #aaaaaa;
}

.container-main {
	width: 100%;
	height: 100%;
	flow-children: down;	
}

.vote-container-main {
	width: 100%;
	height: 100%;
	background-color: #000000ba;
	z-index: 10;
	opacity: 0;
	animation-duration: .41s;
	animation-name: VoteVisible;
	transition-duration: .2s;
	transition-property: opacity;
}

.vote-content {
	width: 65%;
	height: 55%;
	margin-left: 10%;
	padding: 0% 3% 0% 3%;
	align: left center;
	flow-children: down;
	background-image: url("file://{images}/custom_game/gg/gg_background.png");
	background-size: 100% 100%;
	border-radius: 50px;
}

.EnableVote .vote-button,
.EnableVote .vote-container-main {
	opacity: 1;
}

.vote-content-title {
	width: 100%;
	height: 10%;
	margin-top: 5%;
	margin-bottom: 10%;
	font-size: 50px;
	text-align: center center;
	text-shadow: 2px 2px 4px black;
	text-transform: uppercase;
	color: gradient( linear, 0% 0%, 0% 100%, from( white ), color-stop( 0.5, #ffef8a ), to( #CFC26E ) );
}

.vote-select-panel-container {
	width: 100%;
	height: 40%;
	flow-children: right;
}

.vote-select-panel {
	width: 23%;
	height: 100%;
	margin-left: 1%;
	margin-right: 1%;
	box-shadow: 0 0 10px #111;
	border-radius: 10px;
	background-color: #000000aa;
	flow-children: down;
}

.vote-select-title {
	align: center top;
	height: 10%;
	margin-top: 5%;
	margin-bottom: 5%;
	font-size: 30px;
	text-align: center center;
	text-shadow: 2px 2px 4px black;
	color: gradient( linear, 0% 0%, 0% 100%, from( white ), color-stop( 0.5, #ffef8a ), to( #CFC26E ) );
/*	text-transform: uppercase; */
	text-overflow: shrink;
	text-decoration: underline;
}

.vote-select-description {
	padding: 0px 10px 0px 10px;
	align: center center;
	text-shadow: 2px 2px 4px black;
	color: #909090;
	text-align: center center;
}

.vote-select-description {
	height: 60%;
	align: center top;
}

.vote-button {
	width: 80%;
	height: 15%;
	border-radius: 10px;
	saturation: 1.0;
	align: center center;
	background-color: black;
	opacity: 0;
}

.vote-button:hover {
	pre-transform-scale2d: 1.1;
	saturation: 0.5;
	animation-duration: .2s;
	animation-name: VoteButtonAnim;
	transition-duration: .2s;
	transition-property: saturation, pre-transform-scale2d;
}

.vote-button-label {
	font-size: 20px;
	align: center center;
	color: gradient( linear, 0% 0%, 0% 100%, from( #6E93CF ), color-stop( 0.5, #6E93CF ), to( #4C658D ) );
	text-shadow: 2px 2px 2px black;
}

.bottom-transifex-container {
	width: 100%;
	height: 100%;
	visibility: collapse;
}

.bottom-patreon-container {
	width: 100%;
	height: 100%;
	visibility: collapse;
}

.bottom-patreon-sub {
	width: 100%;
	height: 100%;
	align: center top;
	flow-children: right;
}

/*
#loading-title-text,
#loading-title-text-patreon,
#loading-title-text-promote,
#loading-title-text-vote {
	width: 100%;
	font-size: 36px;
}

#loading-title-text {
	color: COLOR_INFO_TEXT_GREEN;
}

#loading-title-text-patreon {
	color: COLOR_INFO_TEXT_ORANGE;
}

#loading-title-text-promote {
	color: COLOR_INFO_TEXT_BLUE;
}

#loading-title-text-vote {
	color: COLOR_INFO_TEXT_RED;
}
*/

#loading-content-text,
.loading-content-text-patreon,
#loading-content-text-promote,
#loading-content-text-vote {
	margin-bottom: 5px;
	font-size: 20px;
	color: #cccccc;
	width: 100%;
}

#loading-map-text {
	margin: 20px 0px;
	color: #ddddff;
	font-size: 24px;
}

#loading-link {
	background-color: COLOR_INFO_BACKGROUND_DARK_GREY;
	border: 2px solid COLOR_INFO_BACKGROUND_DARK_GREY;
	box-shadow: 0 0 10px #111;
}

#loading-link-promote {
	background-color: COLOR_INFO_BACKGROUND_DARK_GREY;
	border: 2px solid COLOR_INFO_BACKGROUND_DARK_GREY;
	box-shadow: 0 0 10px #111;
}

#loading-link-vote {
	background-color: COLOR_INFO_BACKGROUND_DARK_RED;
	border: 2px solid COLOR_INFO_BACKGROUND_DARK_RED;
	box-shadow: 0 0 10px #111;
}

.loading-link-patreon {
	width: 340px;
	height: 80px;
	background-image: url("file://{images}/custom_game/patreon.png");
	background-size: cover;
	border: 2px solid COLOR_INFO_BACKGROUND_DARK_GREY;
	box-shadow: 0 0 10px #111;
	transition-duration: 0.25s;
	transition-property: box-shadow;
	align: center top;
}

.loading-link-patreon:hover {
	box-shadow: 0 0 10px orange;
}

#loading-link-text,
#loading-link-text-promote {
	padding: 0px 10px;
	font-size: 24px;
	text-shadow: 0 0 5px #000;
	color: #cccccc;	
}

#loading-link-text:hover {
	text-decoration: underline;
	background-color: #003339;
}

#loading-link-text-promote:hover {
	text-decoration: underline;
	background-color: #003339;
}

.LoadingButtons {
	margin-left: 280px;
	overflow: scroll;
	flow-children: down;
	background-color: COLOR_INFO_BACKGROUND_GREY_SOCIAL;
	border-left: 2px solid COLOR_INFO_BACKGROUND_DARK_GREY;
	border-right: 2px solid COLOR_INFO_BACKGROUND_DARK_GREY;
	border-bottom: 2px solid COLOR_INFO_BACKGROUND_DARK_GREY;
}

.LoadingButtons Panel {
	padding: 0px 20px;
	flow-children: right;
}

.LoadingButtons Button:hover {
	box-shadow: 0 0 7px #333;
}

.LoadingButtons Button {
	border: 1px solid #333;
	padding: 5px 20px 3px;
	margin: 4px 12px 4px 0px;
	box-shadow: 0 0 5px  #222;
}

.LoadingButtons Label {
	font-size: 20px;
	color: #fff;
}

#BottomButtonBar {
	margin-left: 125px;
}

.SocialButtons {
	transition-duration: 0.25s;
	transition-property: pre-transform-scale2d;
}

.SocialButtons:hover {
	pre-transform-scale2d: 1.05;
}

#ImbaLoadingSocialOfficialWebsite { background-color: gradient(linear, 0% 0%, 0% 100%, from(#333), to(#111)); }
#ImbaLoadingSocialFacebook { background-color: gradient(linear, 0% 0%, 0% 100%, from(#22e), to(#111)); }
#ImbaLoadingSocialTwitter { background-color: gradient(linear, 0% 0%, 0% 100%, from(#0D91E2), to(#111)); }
#ImbaLoadingSocialReddit { background-color: gradient(linear, 0% 0%, 0% 100%, from(#ff6600), to(#111)); }
#ImbaLoadingSocialDiscordEn { background-color: gradient(linear, 0% 0%, 0% 100%, from(#7289DA), to(#111)); }
#ImbaLoadingSocialDiscordRu { background-color: gradient(linear, 0% 0%, 0% 100%, from(#7289DA), to(#111)); }

.DarkBlue {
	background-color: gradient(linear, 0% 0%, 0% 100%, from(#336), to(#111));
}

.VoteGameModeText {
	margin-left: 27px;
	font-size: 16px;
/*	letter-spacing: 1px; */
	text-shadow: 2px 2px 2px black;
}

.Active .VoteGameModeText {
	visibility: visible;
}

.Active #VoteGameModeText1
{
	color: yellow;
}

.Active #VoteGameModeText2
{
	color: orange;
}

.Active #VoteGameModeText3
{
	color: red;
}

.Active #VoteGameModeText4
{
	color: darkred;
}

.Active #VoteGameModeText5
{
	color: darkred;
}

.CGSRadio
{
	width: 100%;
	height: 100%;
	z-index: 2;
	visibility: collapse;
}

.Active .CGSRadio {
	visibility: visible;
}

.DonatorReward {
	height: 100%;
}

#MainVoteButton {
	opacity: 0;
}

.vote-select-panel-party {
	width: 100%;
	height: 100%;
	flow-children: down;
}

.vote-select-party {
	align: center top;
	height: 20%;
	margin-top: 5%;
	margin-bottom: 5%;
	font-size: 30px;
	text-align: center center;
	text-shadow: 2px 2px 4px black;
	color: gradient( linear, 0% 0%, 0% 100%, from( white ), color-stop( 0.5, #ffef8a ), to( #CFC26E ) );
/*	text-transform: uppercase; */
	text-overflow: shrink;
}

.vote-select-panel-party-progressbar-container {
	width: 50%;
	height: 50%;
	flow-children: none;
	align: center bottom;
}

.HealthProgressBar
{
	width: 100%;
	height: 20px;
	border-radius: 1px;
	border: 0px;
	background-color: black;
	vertical-align: middle;
	horizontal-align: right;
	box-shadow: fill #000 -3px -3px 6px 6px;
	transition-property: width;
	transition-duration: 0.5s;
}

#party_vote_progress_bar {
	transition-property: width;
	transition-duration: 0.5s;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #000000 ), color-stop( 0.3, #26890E ), color-stop( .5, #26890E ), to( #003200 ) );
}

#party_vote_progress_bar_Left {
	transition-property: width;
	transition-duration: 0.5s;
}

#party_vote_progress_bar_Right {
	transition-property: width;
	transition-duration: 0.5s;
}

.ProgressBarLeft
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #000000 ), color-stop( 0.3, #26890E ), color-stop( .5, #26890E ), to( #003200 ) );
	border-radius: 4px;
	border-top: 0px;
	transition-property: width;
	transition-duration: 0.5s;
}

.ProgressBarRight
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #222222FF ), to( black ) );
	transition-property: width;
	transition-duration: 0.5s;
}

.HealthProgressBarContainer
{
	width: 100%;
	margin-top: 6px;
	vertical-align: bottom;
}

.vote-select-panel-party-progressbar-labels {
	flow-children: right;
	align: center center;
	text-align: center;
}

.party-vote-count {
	align: center center;
	text-align: center;
}

.vote-select-panel-party-bottom-container {
	width: 100%;
	height: 80%;
	flow-children: down;
}

#party_vote_button {
	width: 40%;
	height: 40%;
	align: center top;
}

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

#WebsiteButton {
	opacity: 1;
}
