bp_international2018_rewards.css

@define rareTextColor: #9ede4c;
@define veryRareTextColor: #fd9d55;
@define extremelyRareTextColor: #fddb87;
@define cosmicallyRareTextColor: #8847FF;



#RewardsTab
{
	width: 100%;
	height: 100%;
	flow-children: right;
	padding-left: 264px;
	padding-right: 232px;
	overflow: scroll clip;
	//opacity-mask: url("s2r://panorama/images/masks/armory_opacity_mask_png.vtex");
}

.LowVisualQuality #RewardsTab
{
	opacity-mask: none;
}

.AspectRatio16x10 #RewardsTab
{
	padding-left: 204px;
	padding-right: 136px;
}

#RewardsTabBackground
{
	width: 100%;
	height: 100%;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #000000ff ), to( #00000033 ) );
}

.RewardCategoryContainer
{
	height: 90%;
	vertical-align: middle;
	margin-right: 32px;
	margin-bottom: 24px;

}

.RewardCategoryBody
{
	height: 100%;
	border: BRD;
	background-color: black;
	//border-radius: 10px;
	border-width: 2px;
	margin-top: -20px;
	z-index: 0;
}

.LowVisualQuality .RewardCategoryBody
{
	border-radius: 0px;
}

.PrestigeReward .RewardCategoryBody
{
	//padding-right: 16px;

	padding-top: 16px;
}



.RewardCategoryTitle
{
	font-size: 24px;
	font-weight: thin;
	color: accentColor;
	text-transform: uppercase;
	letter-spacing: 2px;
	horizontal-align: center;
	background-color: black;
	padding-left: 24px;
	padding-right: 24px;


	z-index: 1;
	border-right: BRD;
	border-left: BRD;
	border-width: 2px;

}

#QuestRewardsBlock > Panel
{
	height: 100%;
	width: fit-children;
}

.PrestigeReward .RewardCategoryBody > Panel
{
	height: fit-children;
	width: fit-children;
	margin: 16px;

}

#KunkkaPrestige,
.FakeRewardImage
{
	width: 156px;
	height: 175px;
}

#KunkkaPrestige .SingleItemLabel,
.FakeRewardImage .SingleItemLabel
{
	z-index: 2;
	vertical-align: bottom;
	visibility: visible;
	margin-bottom: -1px;
}

#KunkkaPrestige,
.FakeRewardImage
{
	tooltip-position: right;
	tooltip-body-position: 50% 50%;
}

.FakeRewardImage Image
{
	border-radius: 8px;
	margin: 8px;
}

.FakeRewardImage.Promise Image
{
	width: 130%;
	height: 130%;
	horizontal-align: center;
	vertical-align: center;
	overflow: noclip;
}

#BabyRoshContainer
{
	z-index: 2;
	width: 156px;
	height: 156px;
	overflow: noclip;
}

#PrestigeRewardsPanel .InfoIcon
{
	horizontal-align: right;
	vertical-align: top;
	wash-color: accentColorBright;
	z-index: 5;
	margin-left: -18px;
}

#BabyRoshContainer:hover #RoshanModel
{
	brightness: 1.2;
	wash-color: white;

}

#RoshanModel
{
	width: 356px;
	height: 356px;
	horizontal-align: center;
	vertical-align: middle;
	wash-color: #C6E2EB;
	transition-property: brightness, wash-color;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.SingleItemLabel
{
	font-size: 14px;
	color: textColoredMediumColor;
	text-transform: uppercase;
	visibility: collapse;
	text-align: center;
	horizontal-align: center;
}

.SingleItemReward .SingleItemLabel
{
	visibility: visible;
}
.CampaignRewardContainer
{
	height: 100%;
	width: 300px;
	margin: 6px;
	margin-top: 32px;
	border: 1px solid transparent;
}

.CampaignRewardImage
{
	saturation: .2;
	brightness: .1;
	contrast: .99;
	border-radius: 4px;
	border: 1px solid transparent;
//	pre-transform-scale2d: .9;
	height: 100%;
	width: 300px;
	margin: 12px;
	margin-top: 24px;
	background-position: 100% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: clip;
	transition-property: border, saturation, brightness, contrast, pre-transform-scale2d;
	transition-duration: 0.1s, 0.25s;
	transition-timing-function: ease-in-out;
}

.CampaignRewardContainer:hover .CampaignRewardImage
{
	saturation: .55;
	brightness: .5;
	contrast: 1;
}

.CampaignRewardContainer:hover .QuestRewardModel
{
	saturation: .85;
	brightness: .85;
	contrast: 1;
}

.CampaignRewardContainer.ItemOwned:hover .QuestRewardModel
{
	saturation: 1;
	brightness: 1.2;
	contrast: 1;
}


.CampaignRewardContainer:hover
{
	//border: 1px solid #99C2D4;
}



.SelfEventNeedsActivate #RewardsTab .CampaignRewardImage,
.GlobalEventPurchasable.SelfEventNotActive #RewardsTab .CampaignRewardImage,
.ItemOwned .CampaignRewardImage,
#Questline4 .CampaignRewardImage
{
	saturation: 1;
	pre-transform-scale2d: 1;
	brightness: 1;
	contrast: 1;
	border-radius: 4px;
}

.QuestlineReward
{
	margin: 0px 4px 1px 4px;
}
#Questline1
{
	margin-left: 10px;
}
#Questline3
{
	margin-right: 10px;
}

// #Questline1 .CampaignRewardImage { background-image: url("s2r://panorama/images/compendium/international2018/campaignrewards/support_psd.vtex"); }
// #Questline2 .CampaignRewardImage { background-image: url("s2r://panorama/images/compendium/international2018/campaignrewards/mid_psd.vtex"); }
// #Questline3 .CampaignRewardImage { background-image: url("s2r://panorama/images/compendium/international2018/campaignrewards/carry_psd.vtex"); }



.QuestlineReward DOTAEventGoal
{
	width: 100%;
	vertical-align: bottom;
	margin-bottom: 10px;
	visibility: collapse;
}


#Questline4
{
	height: 100%;
	//visibility: collapse;
	margin-left: 0px;
}

#Questline4.ItemOwned
{
	visibility: visible;
}

#NewBloomReward
{
	text-transform: uppercase;
	vertical-align: bottom;
	width: 154px;
	horizontal-align: center;
	text-align: center;
	margin-bottom: 32px;
	color:#DCA618;
	text-shadow: 0px 0px 13px 1.0 #841700;
}

#IntroBlock
{
	width: 520px;
	background-color: #1B2E49;
	border-radius: 10px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #11492b00 ), to( #11492b40 ) );
}

.QuestRewardGradient
{
	width: 100%;
	height: 100%;
	background-color: gradient( linear, 0% 0%, 0% 80%, from( #0000 ), color-stop( 0.5, #000e), to( #000f ) );
	z-index: 0;
}

.LowVisualQuality #IntroBlock
{
	border-radius: 0px;
}

#IntroSceneContainer
{
	opacity-mask: url("s2r://panorama/images/masks/softedge_circle_png.vtex");
	width: 300px;
	height: 300px;
	vertical-align: bottom;
	horizontal-align: center;
	margin-bottom: 84px;
	saturation: 1;
	wash-color: white;
	brightness: 1;
	hue-rotation: -20deg;

	transition-property: brightness, saturation, wash-color;
	transition-duration: 0.15s;

}

#IntroSceneContainer:hover,
#IntroSceneContainer.Hovered
{
	saturation: 1;
	wash-color: white;
	brightness: 1;
}

#IntroScene
{
	width: 100%;
	height: 100%;
	//saturation: 1.5;
	//brightness: 2;
	opacity: 0;
	transition-duration: 1s;
	transition-property: opacity;
}

#IntroScene.SceneLoaded
{
	opacity: 1;


}

#IntroBlock .RewardCategoryBody
{
	width: 100%;
	border: 2px solid transparent;
	background-color: none;
	margin-top: -20px;
	overflow: noclip;

}

#IntroText
{
	color: #666666;
	width: 500px;
	font-size: 20px;
	margin: 16px;
	margin-top: 42px;
	text-shadow: 1px 1px 1px 2.0 black;
}

HorizontalScrollBar
{
	width: 1392px;
	horizontal-align: center;
	margin-bottom: 20px;
	background-color: #31191866;


	/* Fall 2016 */
	background-color: #202621dd;

	/* Winter 2017 */
	background-color: #202426dd;

	/* TI8 */
	background-color: bp_color3;
}

HorizontalScrollBar .ScrollThumb
{
	background-color: #45201D;
	transition-property: brightness;
	transition-duration: .2s;

	/* Fall 2016 */
	background-color: #39443a;

	/* Winter 2017 */
	background-color: #393a44;

	/* TI8 */
	background-color: bp_color10;
}

HorizontalScrollBar:hover .ScrollThumb
{
	background-color: #933A2B;
	brightness: 2;

	/* Fall 2016 */
	background-color: #5b7642;

	/* Winter 2017 */
	background-color: #426176;

	/* TI8 */
	background-color: bp_color10;


}


.TrophyContainer,
.PrestigeRewardSquare
{
	width: 172px;
	height: 172px;
	//border: 1px solid red;
	margin-left: 8px;
	margin-right: 8px;
}

.PrestigeRewardSquare
{
	tooltip-position: bottom;
	tooltip-body-position: 50% 50%;
}


#InitialRewards .PrestigeRewardSquare
{
	tooltip-position: right;
}

.PrestigeRewardSquare:hover .InitialRewardImage,
.PrestigeRewardSquare:hover .PrestigeRewardImage
{
	pre-transform-scale2d: 1.1;
	saturation: 1;
	wash-color: white;
}

.PrestigeRewardSquare:hover .TauntBackground.PrestigeRewardImage
{
	pre-transform-scale2d: 0.8;
}

#CourierRewardPanel:hover .CourierReward,
.PrestigeRewardSquare.ItemOwned .PrestigeRewardImage,
.LevelQualifies.PrestigeRewardSquare:hover .PrestigeRewardImage
{
	//pre-transform-scale2d: 1.1;
	saturation: 1;
	wash-color: white;
}

.PrestigeRewardSquare.TauntsReward:hover .PrestigeRewardImage
{
	pre-transform-scale2d: 0.60;
}


#Taunts #Brewmaster:hover,
#Taunts #Centaur:hover
{
	pre-transform-scale2d: 0.90;
}

#Taunts #Brewmaster.LevelQualifies,
#Taunts #Centaur.LevelQualifies
{
	saturation: 1;
	wash-color: white;
}

.TrophyBackground,
.PrestigeRewardBackground
{
	width: 148px;
	height: 148px;
	border-radius: 10px;
	background-color:#1F1F1F;
	vertical-align: middle;
	horizontal-align: center;
}

.InitialRewardImage,
.PrestigeRewardImage
{
	width: 162px;
	height: 162px;
	horizontal-align: center;
	vertical-align: middle;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	tooltip-position: bottom;

	transition-property: pre-transform-scale2d, wash-color, saturation;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.PrestigeRewardImage
{
	saturation: 0;
	wash-color: #371A17ee;
}



.SelfEventNeedsActivate #RewardsTab .PrestigeRewardImage,
.GlobalEventPurchasable.SelfEventNotActive #RewardsTab .PrestigeRewardImage,
.LevelQualifies .PrestigeRewardImage
{
	saturation: 1;
	wash-color: white;
}

.TauntBackground
{
	width: 172px;
	height: 114px;
	background-image: url("s2r://panorama/images/econ/taunts/dota_icon_taunt_venomancer_little_friend_png.vtex");
	background-size: contain;
	background-color: blue;
	transform: rotateX(30deg) rotateY(30deg) rotateZ(-10deg);
	pre-transform-scale2d: .8;
	border-radius: 0.1px;
	border: 3px solid black;

	box-shadow: #00000088 fill -6px -3px 12px 12px;

}

.ShadowedRewardBackground
{
	box-shadow: #000000 fill -9px -9px 18px 18px;
}

#Taunts #Centaur
{
	transform: rotateX(30deg) rotateY(-20deg) rotateZ(10deg)  translateY(-40px) translateX(30px) translateZ(30px);

	background-image: url("s2r://panorama/images/econ/taunts/fall_2016_battle_pass_taunt_centaur_png.vtex");
	pre-transform-scale2d: .6;
}

#Taunts #Brewmaster
{

	transform: rotateX(30deg) rotateY(30deg) rotateZ(-10deg) translateY(20px) translateX(-10px) translateZ(35px);
	background-image: url("s2r://panorama/images/econ/taunts/fall_2016_battle_pass_taunt_brewmaster_png.vtex");
}

#Fountain .PrestigeRewardImage { background-image: url("s2r://panorama/images/compendium/international2018/prestigerewards/fountain_psd.vtex"); }
#TeleportFX .PrestigeRewardImage { background-image: url("s2r://panorama/images/compendium/international2018/prestigerewards/teleport_psd.vtex"); }
#Emoticons .PrestigeRewardImage { background-image: none; }
#LoadScreens .PrestigeRewardImage { background-image: url("s2r://panorama/images/compendium/international2018/prestigerewards/loadscreens_psd.vtex"); }
#EffigyBlock .PrestigeRewardImage { background-image: url("s2r://panorama/images/compendium/international2018/prestigerewards/effigyblock_psd.vtex"); }
#BlinkFX .PrestigeRewardImage { background-image: url("s2r://panorama/images/compendium/international2018/prestigerewards/blink_psd.vtex"); }
#EulFX .PrestigeRewardImage { background-image: url("s2r://panorama/images/compendium/international2018/prestigerewards/eul_fx_psd.vtex"); }
#ForceStaffFX .PrestigeRewardImage { background-image: url("s2r://panorama/images/compendium/international2018/prestigerewards/forcestaff_psd.vtex"); }
#Effigy .PrestigeRewardImage { background-image: url("s2r://panorama/images/compendium/international2018/prestigerewards/effigyblock_psd.vtex"); }
#SeasonalTerrain .PrestigeRewardImage { background-image: url("s2r://panorama/images/compendium/international2018/prestigerewards/terrain_psd.vtex"); }
#BattleCupTickets .PrestigeRewardImage { background-image: url("s2r://panorama/images/compendium/international2018/prestigerewards/battlecup_psd.vtex"); }

.LoadScreenImage
{
	width: 160px;
	height: 90px;
	//background-color: red;
	background-size: cover;
	background-repeat: no-repeat;
	pre-transform-scale2d: .75;
	border-radius: 1px;
	box-shadow: #000000ee fill -6px -6px 12px 12px;
	saturation: 0;
	wash-color: #371A17ee;
	transition-property: pre-transform-scale2d, wash-color, saturation, brightness;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.GlobalEventPurchasable.SelfEventNotActive .LoadScreenImage,
.SelfEventNeedsActivate .LoadScreenImage,
.LoadScreenImage
.LoadScreenImage:hover,
.LoadScreenImage.LevelQualifies
{
	saturation: 1;
	wash-color: white;
}

.LoadScreenImage:hover
{
	saturation: 1;
	wash-color: white;
	brightness: 2;
	pre-transform-scale2d: .8;
}

#LoadScreen1:hover
{
	pre-transform-scale2d: .7;
}


#LoadScreen1
{
	transform: rotateX(30deg) rotateY(-20deg) rotateZ(10deg)  translateY(0px) translateX(30px) translateZ(30px);
	background-image: url("s2r://panorama/images/compendium/international2018/prestigerewards/loadscreen1_png.vtex");
	pre-transform-scale2d: .65;
}
#LoadScreen2
{
	transform: rotateX(30deg) rotateY(30deg) rotateZ(-10deg) translateY(35px) translateX(-10px) translateZ(35px);
	background-image: url("s2r://panorama/images/compendium/international2018/prestigerewards/loadscreen2_png.vtex");

}
#LoadScreen3
{
	transform: rotateX(30deg) rotateY(-10deg) rotateZ(5deg) translateY(90px) translateX(20px) translateZ(65px);
	background-image: url("s2r://panorama/images/compendium/international2018/prestigerewards/loadscreen3_png.vtex");
}

#WeatherFX .PrestigeRewardImage
{
	saturation: 0;
	wash-color: #371A17ee;
}

#Ash
{
	background-image: url("s2r://panorama/images/compendium/spring2016/prestigerewards/weather_fx_psd.vtex");
	pre-transform-scale2d: .8;
	transform: translateX(10px) translateY(10px);
}

#Spring:hover,
#Ash:hover,
#Spring.LevelQualifies,
#Ash.LevelQualifies
{
	saturation: 1;
	wash-color: white;
}

#Spring:hover
{
	pre-transform-scale2d: 0.7;
}
#Ash:hover
{
	pre-transform-scale2d: 0.9;
}

#Spring
{
	background-image: url("s2r://panorama/images/compendium/spring2016/prestigerewards/weather_fx_2_psd.vtex");
	pre-transform-scale2d: .6;
	transform: translateX(-30px) translateY(-30px);

}

#Emoticons .PrestigeRewardImage
{
	saturation: 1;
	brightness: 1;
	wash-color: none;


}

#Emoticons:hover .EmoticonSet
{
	saturation: 1;
	brightness: 1;
	wash-color: none;
}

#Courier,
.UpgradableCourierContainer,
.UpgradableWardContainer,
#AegisBox
{
	overflow: noclip;
}

.UpgradableWard,
#UpgradingCourier
{
	width: 360px;
	height: 360px;
	vertical-align: middle;
	horizontal-align: center;
	margin-top: 0px;
	pre-transform-scale2d: 1;

	transition-property: saturation, brightness, wash-color, pre-transform-scale2d;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

#UpgradingCourier
{
	margin-left: -12px;
	margin-top: -24px;
}

.UpgradableWard
{
	width: 300px;
	height: 300px;
	transform: translateX(-50px) translateY(-20px);
	saturation: 0;
	brightness: 3;
	wash-color: #371A17ee;
}

.GlobalEventPurchasable.SelfEventNotActive .UpgradableWard,
.LevelQualifies .UpgradableWard
{
	saturation: 1;
	brightness: 1;
	wash-color: white;
}


#Courier:hover #FirstCourier,
#EvolvingWard:hover .UpgradableWard,
#EvolvingWard:hover #UpgradingWard,
#Courier:hover #UpgradingCourier
{
	pre-transform-scale2d: 1.1;
	saturation: 1;
	brightness: 1;
	wash-color: white;
}


#LegionCommanderContainer
{
	width: 620px;
	height: 100%;
	transform: translateX(74px);
	vertical-align: bottom;
	horizontal-align: right;
	z-index: -1;
	//visibility: collapse;
}

#LegionCommander
{
	width: 100%;
	height: 100%;


	saturation: 0;
	brightness: 3;
	wash-color: #371A17ee;
	opacity: 0;

	transition-property: saturation, brightness, wash-color, pre-transform-scale2d, opacity;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}


#LegionCommander.SceneLoaded
{
	opacity: 1;
}

.LevelQualifies #LegionCommander,
#LegionCommander.Hovered,
.SelfEventUpsell #LegionCommander
{
	saturation: 1;
	brightness: 1;
	wash-color: white;
}

#LegionCommander.Hovered
{
	saturation: .8;
}

.SelfEventUpsell #LegionCommander.Hovered,
.LevelQualifies #LegionCommander.Hovered
{
	saturation: 1;
	brightness: 2;
}

#Aegis
{
	width: 300px;
	height: 300px;
	vertical-align: middle;
	horizontal-align: center;
	saturation: 0;
	brightness: 3;
	wash-color: #371A17ee;
	pre-transform-scale2d: 1;

	transition-property: saturation, wash-color, brightness, pre-transform-scale2d;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.SelfEventUpsell #Aegis,
.LevelQualifies #Aegis
{
	saturation: 1;
	brightness: 1;
	wash-color: white;
}

#AegisBox:hover #Aegis
{
	saturation: 1;
	brightness: 1;
	pre-transform-scale2d: 1.1;
	wash-color: white;
}

#PrestigeTiles
{
	//margin-right: 360px;
	margin-right: 16px;
}

#PrestigeNote,
#WheelInfo Label,
#15Info Label
{
	width: 600px;
	horizontal-align: center;
	margin-top: 16px;
	color: #BBB9B5;
}

#PrestigeDesc
{
	//visibility: collapse;
	vertical-align: bottom;
	margin-bottom: 6px;
	margin-left: 32px;
	margin-right: 32px;
}

.CourierReward
{
	saturation: .3;
	wash-color: #000000dd;
	width: 220px;
	height: 140px;
	margin-left: -20px;
	margin-top: 0px;
	transition-property: saturation, wash-color;
	transition-duration: 0.15s, 0.25s;
	transition-timing-function: ease-in-out;
}

.LevelCheck
{
	visibility: collapse;
}

.LevelCheck.LevelQualifies
{
	visibility: visible;
}



.Courier
{
	opacity: 0;
	saturation: 0;
	wash-color: #182231ee;
}

.Courier.LevelQualifies
{
	opacity: 1;
	saturation: 1;
	wash-color: #00000000;
}
.Courier.LevelQualifies:hover
{
	opacity: 1;
	saturation: 1;
	wash-color: #00000000;
}



#DemiHero
{
	saturation: 1;
	wash-color: #00000000;
	width: 420px;
	height: 676px;
	margin-left: -60px;
	margin-right: -60px;
	transform: translateY(100px);
}

.SelfEventNeedsActivate #RewardsTab .CourierReward,
.GlobalEventPurchasable.SelfEventNotActive #RewardsTab .CourierReward
{
	saturation: 1;
	brightness: 1;
	wash-color: #00000000;
}

.CourierReward.Skin2
{
	hue-rotation: 180deg;
}

.CourierReward.Skin3
{
	hue-rotation: 280deg;
}

#CourierRewardPanel:hover .CourierReward
{
	saturation: 1;
	wash-color: #00000000;
	transition-duration: 0.35s, 0.15s;
}

.CourierRewardShadow
{
	width: 220px;
	height: 140px;
	margin-left: -20px;
	margin-top: 0px;
	wash-color: black;
	transform: translateY(10px);
	blur: gaussian (2, 2, 4);
	opacity: .8;
}


.StyleSelector
{
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 8px;
}

.StyleSelect
{
	width: 16px;
	height: 16px;
	border-radius: 50%;
	margin-left: 12px;
	margin-right: 12px;
}

.OnTop
{
	z-index: 5;
}


/*TREASURES

<Panel id="TreasureContainer" class="LeftRightFlow">
<Panel id="TreasureContents" class="TopBottomFlow">
<Panel class="TreasureRow LeftRightFlow">
<Panel class="TreasureIcon"/>
<Panel class="TreasureList TopBottomFlow">
<Panel class="TreasuresContainer">
<Panel class="Treasure"/>
<Panel class="Treasure"/>
<Panel class="Treasure"/>
<Panel class="Treasure"/>
<Panel class="Treasure"/>
</Panel>
<Label class="TreasureName" text="Winter Cache I"/>
*/
#TreasureContainer
{
	height: 100%;
	//width: 1000px;
}

.TreasureRow
{
	padding-top: 0px;
	margin-bottom: 8px;
}

.TreasureRow:hover .Treasure
{
	saturation: .55;
	brightness: .5;
	contrast: 1;
}

.TreasureRow.Unreleased:hover .Treasure
{
	saturation: 1;
	brightness: 1;
	contrast: 1;
}

.TreasureRow:hover .Treasure.ItemOwned
{
	saturation: 1;
	brightness: 1;
	contrast: 1;
}

.TreasureIcon:hover
{
	pre-transform-scale2d: 1.1;
}

.TreasureRow.Unreleased .TreasureIcon
{
	wash-color: bp_color10;
	saturation: .5;
	opacity: 1;
}

.TreasureRow:hover .TreasureName
{
	color: #61BEF0;
}

.TreasureRow.Unreleased:hover .TreasureName
{
	color: #333333;
}

#TreasureContents
{
	margin-top: 22px;
	margin-left: 24px;
	margin-right: 24px;
	vertical-align: top;
	vertical-align: middle;
}

.TreasureIcon
{
	background-size: cover;
	background-position: 50% 0%;
	background-repeat: no-repeat;

	width: 128px;
	height: 128px;
	pre-transform-scale2d: 1;

	transition-property: pre-transform-scale2d;
	transition-duration: 0.15s;
	transition-timing-function: ease-in-out;
}


.Unreleased .TreasureIcon:hover
{
	pre-transform-scale2d: 1;
}

#Treasure1Icon { background-image: url("s2r://panorama/images/econ/tools/ti8_immortal_treasure_1_png.vtex"); }
#Treasure2Icon { background-image: url("s2r://panorama/images/econ/tools/ti8_immortal_treasure_2_png.vtex"); }
#Treasure3Icon { background-image: url("s2r://panorama/images/econ/tools/ti8_immortal_treasure_3_png.vtex"); }

.Treasure
{
	background-color: bp_color10&22;
	background-size: contain;
	background-repeat: no-repeat;
	width: 108px;
	height: 108px;

	margin-left: 6px;
	margin-right: 6px;
	tooltip-position: right;
	tooltip-body-position: 0% 50%;
	tooltip-arrow-position: 50%;

	saturation: .2;
	brightness: .045;
	border-radius: 14px;
	border: 1px solid transparent;
	contrast: .99;
	pre-transform-scale2d: 0.8;
	transition-property: border, saturation, brightness, contrast, pre-transform-scale2d;
	transition-duration: 0.1s, 0.25s;
	transition-timing-function: ease-in-out;
}


.UnknownTreasure
{
	background-color: bp_color10&22;
	background-size: contain;
	background-repeat: no-repeat;
	width: 108px;
	height: 108px;

	margin-left: 6px;
	margin-right: 6px;
	tooltip-position: right;
	tooltip-body-position: 0% 50%;
	tooltip-arrow-position: 50%;
	//wash-color: #06B2E0;

	padding: 36px;

	saturation: .2;
	brightness: .045;
	border-radius: 14px;
	border: 1px solid transparent;
	contrast: .99;
	pre-transform-scale2d: 0.8;
	transition-property: border, saturation, brightness, contrast, pre-transform-scale2d;
	transition-duration: 0.1s, 0.25s;
	transition-timing-function: ease-in-out;
}

.CacheTreasure .Treasure.RareImage,
.CacheTreasure .Treasure.UltraRareImage,
.CacheTreasure .Treasure.ExtremelyRareImage,
.CacheTreasure .Treasure.VeryRareImage,
.CacheTreasure .Treasure.CosmicallyRareImage
{
	width: 130px;
}

.CacheTreasure .Treasure
{
	width: 63px;
}


#TreasureRow1 .Treasure
{
	tooltip-body-position: 0% 20%;
}

#TreasureRow2 .Treasure
{
	tooltip-body-position: 0% 40%;
}

#TreasureRow3 .Treasure
{
	tooltip-body-position: 0% 80%;
}

#TreasureRow4 .Treasure
{
	tooltip-body-position: 0% 88%;
}

.Unreleased .Treasure
{
	saturation: 1;
	brightness: 1;
	contrast: 1;
}

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


.UltraRareImage,
.CosmicallyRareImage,
.VeryRareImage,
.ExtremelyRareImage,
.RareImage
{
	width: 216px;
	border-radius: 10px;
	margin-left: 8px;
	margin-right: 0px;
	background-size: cover;
	background-position: 50% 50%;
}

#WheelInfo,
#15Info
{
	width: 320px;
	vertical-align: middle;
	padding: 16px;
	margin-top: 32px;
	vertical-align: middle;
}

#15Info
{
	visibility: collapse;
}

#WheelInfo
{
	margin-top: 0px;
	padding: 0px;
	padding-right: 16px;
}

#ExtraRewards
{
	margin-left: 16px;
	margin-right: 16px;
	height: 100%;
}

#SpinWheel,
#15Levels
{
	background-image: url("s2r://panorama/images/compendium/spring2016/linagameinfo_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	width: 155px;
	height: 136px;
	pre-transform-scale2d: 1;
	horizontal-align: center;

	transition-property: pre-transform-scale2d;
	transition-duration: 0.15s;
	transition-timing-function: ease-in-out;
}

#SpinWheel
{
	width: 225px;
	height: 226px;
	background-image: url("s2r://panorama/images/compendium/international2018/spinwheel_psd.vtex");
}

#WheelInfo Label,
#15Info Label
{
	width: 100%;
	margin-top: 0px;
}

#WheelInfo Label
{
	margin-top: -20px;
}

.Treasure:hover
{
	saturation: .55;
	brightness: .5;
	contrast: 1;
	border: 1px solid bp_color9;
}

.Unreleased .Treasure:hover
{
	border: 1px solid transparent;
}

.SelfEventNeedsActivate #RewardsTab .Treasure,
.GlobalEventPurchasable.SelfEventNotActive #RewardsTab .Treasure,
.Treasure.ItemOwned
{
	saturation: 1;
	brightness: 1;
	contrast: 1;
	pre-transform-scale2d: 1;
	border-radius: 4px;
	border: 2px solid black;
}


.Treasure.ItemOwned:hover
{
	pre-transform-scale2d: 1.04;
}

.SelfEventNeedsActivate .Treasure:hover .OwnedFrame,
.GlobalEventPurchasable.SelfEventNotActive .Treasure:hover .OwnedFrame,
.Treasure.ItemOwned:hover .OwnedFrame
{
	brightness: 8;
}

.CampaignRewardImage:hover .InspectIcon,
.Treasure:hover .InspectIcon
{
	opacity: 1;
}

.TreasuresContainer
{
	overflow: noclip;
}

.OwnedFrame
{
	background-image: url("s2r://panorama/images/compendium/winter/setowned_psd.vtex");
	background-size: contain;
	width: 100%;
	height: 100%;
	opacity: 0;

	transition-property: brightness;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.CacheTreasure .OwnedFrame
{
	background-image: url("s2r://panorama/images/compendium/spring2016/setowned_cache_psd.vtex");
}

/* sample override item for auto generated treasure list
#TreasureListItemOverride_20937_1
{
	width:100%;
	height:100%;
	background-image: url("s2r://panorama/images/econ/loading_screens/blazing_wing_loading_screen_png.vtex");
	background-size: cover;
}

*/

.InspectIcon
{
	background-image: url("s2r://panorama/images/control_icons/icon_search_png.vtex");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;

	width: 32px;
	height: 32px;
	vertical-align: bottom;
	horizontal-align: right;
	margin: 6px;
	box-shadow: #000000ee fill -6px -6px 12px 12px;
	border-radius: 50%;
	opacity: 0;

	transition-property: opacity, pre-transform-scale2d;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.Unreleased .InspectIcon
{
	visibility: collapse;
}

.TreasureIcon .InspectIcon
{
	opacity: .25;
	wash-color: bp_color9;

	margin: 8px;
}

.TreasureIcon:hover .InspectIcon
{
	opacity: .75;
}

.SelfEventNeedsActivate .OwnedFrame,
.GlobalEventPurchasable.SelfEventNotActive .OwnedFrame,
.ItemOwned .OwnedFrame
{
	opacity: 1;
}

.UltraRareImage .OwnedFrame,
.VeryRareImage .OwnedFrame,
.ExtremelyRareImage .OwnedFrame,
.CosmicallyRareImage .OwnedFrame,
.RareImage .OwnedFrame
{
	background-image: url("s2r://panorama/images/compendium/setownedrare_psd.vtex");
	background-size: 213px 104px;

}

.CacheTreasure .UltraRareImage .OwnedFrame,
.CacheTreasure .VeryRareImage .OwnedFrame,
.CacheTreasure .ExtremelyRareImage .OwnedFrame,
.CacheTreasure .CosmicallyRareImage .OwnedFrame,
.CacheTreasure .RareImage .OwnedFrame
{
	background-image: url("s2r://panorama/images/compendium/spring2016/setownedrare_cache_psd.vtex");
	background-size: 126px 104px;
}


.UltraRareImage .OwnedFrame
{
	brightness: 3;
	saturation: .8;
}

.CosmicallyRareImage .OwnedFrame
{
	brightness: 3;
	hue-rotation: 240deg;
}

.RareImage .OwnedFrame
{
	hue-rotation: 60deg;
}

.VeryRareImage .OwnedFrame
{
	brightness: 2;
	saturation: 1;
}

.ExtremelyRareImage .OwnedFrame
{
	hue-rotation: 60deg;
}

.RareImage
{
	box-shadow: #9EDE4C12 -3px -3px 6px 6px;
}

.VeryRareImage
{
	box-shadow: #FD9D5511 -3px -3px 6px 6px;
}

.ExtremelyRareImage
{
	box-shadow: #9EDE4C12 -3px -3px 6px 6px;
}

.UltraRareImage
{
	box-shadow: #FDDB8733 -3px -3px 6px 6px;
}

.CosmicallyRareImage
{
	box-shadow: #8847FF33 -3px -3px 6px 6px;
}

.Unreleased .RareImage,
.Unreleased .UltraRareImage,
.Unreleased .ExtremelyRareImage,
.Unreleased .CosmicallyRareImage,
.Unreleased .VeryRareImage
{
	box-shadow: none;
}

.TreasureNameContainer
{
	width: 100%;
}

.TreasureName
{
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: accentColor;
	margin-left: 12px;
	margin-top: 4px;

	transition-property: color;
	transition-duration: 0.12s;
	transition-timing-function: ease-in-out;

}

.Unreleased .TreasureName
{
	color: #333333;
}
.TreasureNameLine
{
	width: fill-parent-flow( 1.0 );
	height: 1px;
	vertical-align: middle;
	background-color: #333333;
	margin-left: 5px;
	margin-right: 0px;
	margin-bottom: 3px;
}

.FullLine .TreasureNameLine
{
	margin-right: 0px;
}

.RareLine
{
	width: 100%;
	height: 1px;
	vertical-align: middle;
	background-color: bp_color10;
}

#TreasureContents .RareLine
{
	width: 100%;
	height: 0px;
	vertical-align: middle;
	background-color: bp_color10;
	margin-top: -17px;
	margin-bottom: 16px;
}

.RareTreasureContainer .RareLine
{
	margin-top: 32px;
	visibility: collapse;
}


.ButtonDark
{
	visibility: collapse;

}

.ButtonDark Label
{
	margin: 0px;
	padding: 0px;

}

.RareItems
{
	height: 262px;
	width: 108px;
	border-radius: 8px;
	background-color: #233445;
	margin-left: 12px;
	margin-right: 12px;
}

.RareTreasureContainer
{
	height: 620px;
	margin-top: 32px;
	margin-right: 32px;
}

#TopRares
{

}

#BottomRares
{
	vertical-align: bottom;
	margin-bottom: 48px;
}


#RarityLabels
{
	horizontal-align: right;
	margin-top: -16px;
	transform: translateY(0px);
}

#VeryRareLabel,
#UltraRareLabel,
#CosmicallyRareLabel,
#RareLabel
{
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-left: 8px;
}


#VeryRareLabel
{
	color: veryRareTextColor;
	width: 216px;
	text-align: center;
}


#RareLabel
{
	color: rareTextColor;
	width: 216px;
	text-align: center;
	margin-left: 8px;
}


#UltraRareLabel
{
	color: extremelyRareTextColor;
	width: 216px;
	text-align: center;
}


#CosmicallyRareLabel
{
	color: cosmicallyRareTextColor;
	width: 216px;
	text-align: center;
}




.MiniHeroIcon
{
	background-image: url("s2r://panorama/images/status_icons/clock_psd.vtex");
	background-size: contain;
	width: 46px;
	height: 46px;
	horizontal-align: center;
	vertical-align: middle;
	saturation: 0;
	wash-color: bp_color10;
}


.ComingSoon
{
	color: bp_color10;
}

.ComingSoonLabel
{
	opacity: 0;
	padding-left: 8px;
	padding-right: 12px;
	transition-property: opacity;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
	background-color: black;
}

.TreasureRow:hover .ComingSoonLabel
{
	opacity: 1;
}

.TrophyReward .RewardCategoryBody
{
	padding-right: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	height: fit-children;
	horizontal-align: center;
}

.TrophyReward .RewardCategoryBody > DOTATrophyOwned
{
	margin-left: 16px;
	margin-top: 16px;
}

DOTATrophyOwned
{
	height: 224px;
	width: 140px;
}

#EventTimeLeft
{
	horizontal-align: center;
}

#RewardCount
{
	font-size: 38px;
	color: #92D23E;
	font-weight: thin;
	text-shadow: 0px 0px 4px 3.0 black;
}

#PrestigeDesc,
#InitialPurchase,
#QuestNote,
#CosmicallyRareNote,
#RecycleNote
{
	horizontal-align: center;
	vertical-align: bottom;
	color: accentColor;
	//margin-right: 36px;
	//margin-bottom: 48px;
	font-size: 18px;
	font-weight: thin;
}

#RecycleNote
{
	margin-bottom: 16px;
}

#InitialPurchase
{
	width: 760px;
	margin-bottom: 0px;
	margin-top: 12px;
	height: 100%;
	horizontal-align: center;
	vertical-align: bottom;
}

#QuestNote
{
	width: 652px;
	margin-bottom: 0px;
	height: 100%;
	text-align: center;
}

#CosmicallyRareNote
{
	width: 280px;
	margin-bottom: 0px;
	height: 100%;
	text-align: center;
}
.InfusableIcon
{
	width: 24px;
	height: 24px;
	background-image: url("s2r://panorama/images/compendium/infusableicon_psd.vtex");

	background-color: #000000dd;
	border-radius: 3px;
	background-size: contain;
	horizontal-align: left;
	vertical-align: bottom;
	margin: 4px;
	tooltip-position: bottom;
	wash-color: #B15BE1;
}

.InfusableIcon:hover
{
	brightness: 1.5;
}

.InfusableText
{
	color: white;
	text-align: left;
	text-transform: uppercase;
	padding-left: 7px;
	padding-top: 5px;
	padding-bottom: 4px;
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #4b2460dd ), to( #69318d ) );
	font-size: 14px;

	//text-shadow: 1px 1px 2px 4.0 black;
	width: 100%;
	opacity: 0;
	margin-top: 3px;
	margin-left: 3px;
	margin-right: 3px;

	transition-property: opacity;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;

}

.InfusableHover .InfusableText
{
	opacity: 1;
}

#BuyLevelsButton
{
	//width: 300px;
	min-width: 200px;
	height: 32px;
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 84px;
}

#BuyLevelsButton.Hovered:enabled,
#BuyLevelsButton:hover:enabled
{
	background-color: accentColor;
}

#BuyLevelsButton:active
{
	background-color: bp_color1;
	border: 1px solid black;
}

#BuyLevelsButton Label
{
	text-align: center;
	horizontal-align: center;
	vertical-align: middle;
	color: black;
	margin: 0px;
	padding: 0px;
	margin-top: 2px;
}

#QuestRewardsBlock
{
	height: 624px;
	//width: 100%;
}

#CosmicallyRareReward
{
	height: 624px;
	//width: 100%;
}

.PurchaseImage
{
	width: 100%;
	height: 100%;
	horizontal-align: center;
	vertical-align: middle;
	wash-color: black;
	opacity: 0.001;
}


#PrestigeRewardsBlock
{
	//visibility: collapse;
}

#LCInfo
{
	height: 200px;
	opacity: 0;
	vertical-align: bottom;
	color: white;
	text-shadow: 0px 0px 4px 2.0 #000000;
	padding: 6px;
	background-color: gradient( linear, 0% 0%, 0% 50%, from( #00000000 ), to( #000000dd ) );

	transition-property: opacity;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.QuestRewardInfo
{
	opacity: 0;
	vertical-align: bottom;
	color: white;
	text-shadow: 0px 0px 4px 2.0 #000000;
	padding: 6px;
	background-color: gradient( linear, 0% 0%, 0% 20%, from( #00000000 ), to( #000000dd ) );

	transition-property: opacity;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}


.QuestlineReward:hover #LCInfo
{
	opacity: 1;
}

.LevelContainer
{
	horizontal-align: center;
	vertical-align: bottom;
}

.LevelPip
{
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #1F1F1F;
	margin-left: 4px;
	margin-right: 4px;
	border: 1px solid #CB2E3444;

	/* Fall 2016 */
	border: 1px solid #4fcb2e44;

	/* Winter 2017 */
	border: 1px solid #3899dd44;

	/* TI8 */
	border: 1px solid bp_color7&44;
}

.LevelPip.LevelQualifies
{
	background-color: #ABCAA2;
}

#PrestigeRewardsBlock .PrestigeRewardSquare
{
	height: 192px;
}

#PrestigeRewardsBlock .RewardCategoryBody
{
	height: 100%;
	width: fit-children;
}

.LevelContainer Label
{
	margin-bottom: -8px;
	font-weight: bold;

	/* Fall 2016 */
	color: #317023;

	/* Winter 2017 */
	color: #316f9b;

	/* TI8 */
	color: backgroundBrightColor;
}

.EmoticonSet
{
	saturation: 0;
	wash-color: #371A17ee;
	flow-children: down;
	width: 100%;
	height: 100%;

	transition-property: pre-transform-scale2d, wash-color, saturation;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.GlobalEventPurchasable.SelfEventNotActive .EmoticonSet
{
	saturation: 1;
	wash-color: white;
}

.EmoticonSet.LevelQualifies
{
	saturation: 1;
	wash-color: white;
}

.EmoticonSet DOTAEmoticon
{
	margin: 4px;
	width: 50px;
	height: 50px;
}

#IP_Emoticons DOTAEmoticon
{
	width: 42px;
	height: 42px;
	margin: 4px;
	margin-top: 6px;
}

.UpgradableWardContainer,
.UpgradableCourierContainer
{
	//	visibility: collapse;
}

#FirstCourier
{
	saturation: 0;
	brightness: .8;
	wash-color: bp_color2;
}

.GlobalEventPurchasable.SelfEventNotActive #FirstCourier,
#FirstCourier.LevelQualifies
{
	saturation: 1;
	brightness: 1;
	wash-color: white;
}

.GlobalEventPurchasable.SelfEventNotActive #FirstCourier,
.GlobalEventPurchasable.SelfEventNotActive #UpgradingWard.UpgradableWardContainer,
.UpgradableWardContainer.LevelQualifies,
.UpgradableCourierContainer.LevelQualifies
{
	visibility: visible;
}

#Courier.LevelQualifies #UpgradingWard,
#Courier.LevelQualifies #FirstCourier
{
	visibility: visible;
}

#UpgradingWard.LevelQualifies,
#FirstCourier.LevelQualifies
{
	visibility: visible;
}

.UpgradableCourierContainer Label
{
	margin-bottom: -8px;
	color: bp_battlePassLogoColor;
	font-weight: bold;
	horizontal-align: center;
	vertical-align: bottom;
	text-transform: uppercase;
}
#Courier .PrestigeRewardSquare
{
	margin: 0px;
}

#UpgradingWard,
#FirstCourier
{
	transition-property: saturation, brightness, wash-color, pre-transform-scale2d;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
	//visibility: collapse;
}

#LCHitBox
{
	//border: 1px solid red;
	tooltip-position: left;
	tooltip-body-position: 50% 50%;
	width: 440px;
	height: 620px;
	horizontal-align: right;
	z-index: 5;
	//visibility: collapse;
}

#LCHitBox .InspectIcon,
DOTAItemCollectible .InspectIcon
{
	opacity: .15;
	margin-right: 8px;
	margin-bottom: 8px;
	wash-color: #aaaaaa;
}

#LCHitBox .InspectIcon
{
}


#LCHitBox:hover .InspectIcon,
DOTAItemCollectible:hover .InspectIcon
{
	opacity: 1;
	wash-color: white;
}


#LeaderListContainer
{
	width: 333px;
	height: 202px;
	margin-top: 8px;
	margin-left: 660px;
	visibility: collapse;
}

#TimeLeftDate,
#TimeLeftLabel,
#EventClock Label
{
	text-transform: uppercase;
	color: textBrightColor;
	letter-spacing: 2px;
	font-size: 24px;
	font-weight: thin;
	margin-top: 108px;
	horizontal-align: center;
}

#EventClock Label
{
	font-size: 32px;
	margin-top: 2px;
	//horizontal-align: center;
}

#TimeLeftDate
{
	font-size: 44px;
	margin: 0px;
	margin-top: 10px;
	color: white;
}

#EventClock
{
	horizontal-align: center;
}

#EventClock .TimeLeft
{
	color: textMediumColor;
	font-size: 24px;
	margin-right: 16px;
	vertical-align: bottom;
	margin-bottom: 4px;
	margin-left: 4px;
}


.QuestRewardModel.Hovered #InspectIcon
{
	opacity: 0.85;
}

.QuestRewardModel.Hovered
{
	pre-transform-scale2d: 1;
	brightness: 2.5;
}

.QuestlineReward:hover .InspectIcon,
.QuestlineReward .InspectIcon
{
	opacity: .15;
	margin-right: 8px;
	margin-bottom: 8px;
	wash-color: #aaaaaa;
}


.QuestRewardModelContainer
{
	height: 100%;
	width: 350px;
	opacity-mask: url("s2r://panorama/images/masks/softedge_box_png.vtex");
	overflow: clip;
}

.QuestRewardModel
{
	margin: 24px;
	margin-top: 14px;
	height: 900px;
	width: 900px;
	border: 1px solid red;
	transform: translateX(-330px) translateY(-140px);
	horizontal-align: left;
	pre-transform-scale2d: 1.0;
	brightness: 0.45;
	contrast: 1.04;
	saturation: .2;
	opacity: 0;
	transition-property: opacity, wash-color, pre-transform-scale2d, brightness, saturation, contrast;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	z-index: 2;
}

.ItemOwned .QuestRewardModel
{
	brightness: 1;
	contrast: 1;
	saturation: 1;
}


.QuestRewardModel.EconSetLoaded
{
	opacity: 1;
}

.QuestRewardModel:hover .InspectIcon,
.QuestRewardModel .InspectIcon
{
	opacity: .15;
	margin-right: 8px;
	margin-bottom: 8px;
	wash-color: #aaaaaa;
}

.RewardItemPanel
{
	width: 140px;
	height: 140px;
}

.ChatWheelReward
{
	width: 140px;
	height: 140px;
}

.ChatWheelRewardTitle
{
	font-size: 10px;
}


DOTAItemCollectible
{
	width: 200px;
	height: 200px;
}

.RewardCarousel
{
	flow-children: right;
	width: 140px;
	height: 140px;
	horizontal-align: center;
	opacity: 0.999;
}

.RewardBackgroundContainer
{
	border: BRD;
	border-width: 2px;
	width: 140px;
	height: 140px;
	margin: 8px;
	border-radius: 12px;
}

.RewardCarouselNav
{
	max-width: 150px;
	width: 100%;
	height: 30px;
}

.CarouselReward
{
	transition-property: opacity,position, wash-color, saturation;
	transition-duration: 0.5s;
}

.CarouselReward.Offscreen
{
	opacity: 0.0;
}

.RewardSpacer
{
	width: 156px;
}

DOTABattlePassReward
{
	flow-children: down;
	margin-bottom: 14px;
}

.CarouselItemReward > Label
{
	horizontal-align: right;
	vertical-align: bottom;

	margin-right: 11px;
	margin-bottom: 7px;

	font-size: 24px;
	color: white;
	font-weight: bold;
	text-shadow: 1px 1px 0px black;

	visibility: collapse;
}

.PaginationArrow
{
	visibility: collapse;
}

.CarouselItemReward.ShowQuantity > Label
{
	visibility: visible;
}

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

.CarouselReward.Locked
{
	saturation: 0;
	wash-color: #000a;

}

.CarouselReward.Locked:hover
{
	saturation: 1;
	wash-color: #0000;
}

.CarouselRewardImage
{
	width: 100%;
	height: 100%;
	margin: 8px;
	border-radius: 8px;
	border: BRD;
}

.CarouselItemModelReward
{
	width: 100%;
	height: 100%;
	overflow: clip;
	opacity-mask: url("s2r://panorama/images/masks/softedge_box_png.vtex");
}

.CarouselItemModelReward #EconItemModelPreview
{
	width: 400px;
	height: 300px;

	horizontal-align: center;
	vertical-align: middle;

	transform: translateY( -10px );

	opacity: 0;

	transition-property: opacity;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
}

.CarouselItemModelReward #EconItemModelPreview.EconSetLoaded
{
	opacity: 1.0;
}

.CarouselEconItem
{
	width: 100%;
	height: 100%;
	border-radius: 8px;
}

.HideEconIcon .CarouselEconItem
{
	opacity: 0.001;
}


.HideEconItem .CarouselEconItem
{
	visibility: collapse;
}

#TerrainScene
{
	width: 100%;
	height: 100%;

	margin: 6px;
	border-radius: 8px;
}

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


.ChatWheelReward
{
	width: 100%;
	horizontal-align: center;
	padding: 8px;

	background-color: bp_rewardsList_LevelContainer_background_color;
}

.ChatWheelRewardHeader
{
	flow-children: right;
}

.ChatWheelIcon
{
	width: 64px;
	height: 64px;
	margin-right: 4px;
	horizontal-align: center;
	wash-color: bp_battlePassLogoColor;

	vertical-align: middle;

	background-image: url("s2r://panorama/images/settings_chatwheel_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.ChatWheelRewardTitle
{
	text-transform: uppercase;
	horizontal-align: center;
	font-size: 20px;
	letter-spacing: 1px;
	color: textColoredVeryBrightColor;
}

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

#ChatWheelMessages
{
	vertical-align: middle;
	width: 100%;
	flow-children: down;
	margin-top: 4px;
}

.ChatWheelMessage.ChatWheelMessageIsSpray
{
	margin-left: 0px;
	margin-bottom: 4px;
	horizontal-align: center;
}

.ChatWheelMessage
{
	flow-children: right;
}

.ChatWheelMessageIcon
{
	width: 20px;
	height: 20px;
	background-image: url("s2r://panorama/images/control_icons/chat_wheel_icon_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.ChatWheelMessageAll
{
	visibility: collapse;
}
.ChatWheelMessage.ChatWheelMessageSendToAll .ChatWheelMessageAll
{
	visibility: visible;
}

#ChatWheelMessageSoundButton
{
	width: 20px;
	height: 20px;

	background-image: url("s2r://panorama/images/hud/reborn/icon_scoreboard_mute_sound_psd.vtex");
	background-repeat: no-repeat;
	background-size: contain;

	visibility: collapse;
}

.ChatWheelMessage.ChatWheelMessageHasSound:not(.ChatWheelMessageIsSpray) #ChatWheelMessageSoundButton
{
	visibility: visible;
}

#ChatWheelMessageSoundButton:hover
{
	brightness: 2.0;
}
#ChatWheelMessageSoundButton:active
{
	brightness: 1.5;
}

.ChatWheelMessage > Label
{
	text-overflow: shrink;
	font-size: 15px;
	color: white;
	margin-left: 2px;
	text-shadow: 2px 2px 0px black;
}

.ChatWheelMessageDesc
{
	width: 98px;
	max-height: 41px;
}

.ChatWheelMessage.ChatWheelMessageSendToAll	.ChatWheelMessageDesc
{
	width: 64px;
}

/* Spray Wheel */
.SprayWheelReward
{
	flow-children: down;

	width: 140px;
	height: 140px;
	horizontal-align: center;
	padding: 8px;


	background-color: gradient( linear, 0% 0%, 0% 100%, from( #88fcbd20 ), to( #222000 ) );

}

.SprayWheelRewardHeader
{
	flow-children: right;
}

.SprayWheelImage
{
	width: 64px;
	height: 64px;
	horizontal-align: center;
	vertical-align: middle;
	visibility: collapse;
}

.ChatWheelMessage.ChatWheelMessageIsSpray .SprayWheelImage
{
	visibility: visible;
}

.SprayWheelTitle
{
	visibility: collapse;
	text-transform: uppercase;
	color: accentColor;
	width: 100%;
	text-align: center;
}

.ChatWheelReward.IsSprayReward .SprayWheelTitle
{
	visibility: visible;
}

.SprayWheelRewardTitle
{
	text-transform: uppercase;
	horizontal-align: center;
	font-size: 16px;
	letter-spacing: 1px;
	color: textColoredVeryBrightColor;
}

#SprayWheelImages
{
	vertical-align: middle;
	horizontal-align: center;
	width: 114px;
	height: 90px;
	flow-children: right-wrap;
	margin-top: 4px;
}

.SprayWheelImage
{
	flow-children: right;
}

.SprayWheelImageIcon
{
	width: 20px;
	height: 20px;
	background-image: url("s2r://panorama/images/control_icons/chat_wheel_icon_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#SprayWheelImage
{
	margin-top: 10px;
	width: height-percentage( 100% );
	height: 128px;
}

#SprayWheelImage:hover
{
	brightness: 2.0;
}
#SprayWheelImage:active
{
	brightness: 1.5;
}

#SprayWheelImageSoundButton
{
	width: 20px;
	height: 20px;
	vertical-align: center;

	background-image: url("s2r://panorama/images/hud/reborn/icon_scoreboard_mute_sound_psd.vtex");
	background-repeat: no-repeat;
	background-size: contain;

	visibility: collapse;
}

.SprayWheelImage.SprayWheelImageHasSound #SprayWheelImageSoundButton
{
	visibility: visible;
}

#SprayWheelImageSoundButton:hover
{
	brightness: 2.0;
}
#SprayWheelImageSoundButton:active
{
	brightness: 1.5;
}

#TreasureListItem_12299
{
	width: 100px;
}
#TreasureListItem_12296
{
	width: 100px;
	margin-right: 5px;
}