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

DOTAInternational2025PopupFantasyCraftHelp
{
	width: 1280px;
	height: 100%;
	margin: 24px;
	horizontal-align: center;
	vertical-align: center;
	flow-children: down;
	background-color: none;
	box-shadow: none;
	transition-property: transform, pre-transform-scale2d, opacity, background-color, height, box-shadow;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
	transition-delay: 0.0s;
}

DOTAInternational2025PopupFantasyCraftHelp.Hidden
{
	opacity: 0.0;
	pre-transform-scale2d: 1.25;
	transform: translateY( -10px );
	sound: "ui_custom_lobby_dialog_slide";
	box-shadow: 0 0 0px transparent;
}

.PopupContents
{
	width: 100%;
	height: fill-parent-flow(1);
	flow-children: down;
}

.DashOrnament
{
	horizontal-align: center;
	width: 100px;
}

.DashOrnament.Flipped
{
	transform: scaleY( -1 );
	brightness: 0.4;
}

.BackgroundImage
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/events/international_2025/backgrounds/galaxy_background_home_png.vtex");
	background-size: 180%;
	background-position: center top;
	ignore-parent-flow: true;
	opacity-brush: gradient( linear, 0% 20%, 0% 80%, from( #FFFFFF ), to( #554587 ) );
}

.PopupBorder
{
	width: 100%;
	height: 100%;
	ignore-parent-flow: true;
	border: 1px solid rgba(208, 208, 255, 0.02);
}

.TopDash
{
	width: 100%;
	height: 3px;
	background-color: gradient( linear, 0% 20%, 0% 80%, from( #FFFFFF ), to( #8d7893 ) );
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6);
}

.Body
{
	width: 100%;
	height: fill-parent-flow(1);
	opacity-mask: url("s2r://panorama/images/masks/soft_top_bottom_vscroll_psd.vtex");
	overflow: clip scroll;
	padding: 12px 48px;
	flow-children: right;
}

.Body #Choices
{
	flow-children: right-wrap;
	horizontal-align: center;
	padding-top: 12px;
	padding-bottom: 24px;
}

.Body VerticalScrollBar
{
	margin: 12px 0px 40px;
}

.Header
{
	width: 100%;
	padding: 24px 24px 12px;
}

.Header .PlayerChoiceTitle
{
	horizontal-align: center;
	text-transform: uppercase;
	font-family: titleFont;
	font-weight: normal;
	font-size: 28px;
	letter-spacing: 3px;
	color: white;
	text-shadow: 0px 0px 12px rgba(209, 124, 255, 0.3);
}

.Header #CloseButton
{
	horizontal-align: right;
}

.gem_shape1
{
	background-image: url("s2r://panorama/images/fantasy_craft/gem_shape_round_png.vtex");
}

.gem_shape2
{
	background-image: url("s2r://panorama/images/fantasy_craft/gem_shape_pear_png.vtex");
}

.gem_shape3
{
	background-image: url("s2r://panorama/images/fantasy_craft/gem_shape_cushion_png.vtex");
}

.gem_shape4
{
	background-image: url("s2r://panorama/images/fantasy_craft/gem_shape_princess_png.vtex");
}

.gem_shape5
{
	background-image: url("s2r://panorama/images/fantasy_craft/gem_shape_heart_png.vtex");
}

.gem_quality1
{
	background-image: url("s2r://panorama/images/rank_tier_icons/mini/rank1_psd.vtex");
}

.gem_quality2
{
	background-image: url("s2r://panorama/images/rank_tier_icons/mini/rank2_psd.vtex");
}

.gem_quality3
{
	background-image: url("s2r://panorama/images/rank_tier_icons/mini/rank3_psd.vtex");
}

.gem_quality4
{
	background-image: url("s2r://panorama/images/rank_tier_icons/mini/rank4_psd.vtex");
}

.gem_quality5
{
	background-image: url("s2r://panorama/images/rank_tier_icons/mini/rank5_psd.vtex");
}

.BodyLeft
{
	width: fill-parent-flow(1);
	height: fit-children;
	flow-children: down;
	margin-right: 24px;
	margin-bottom: 32px;
}

.BodyRight
{
	width: fill-parent-flow(1);
	height: fit-children;
	flow-children: down;
	margin-left: 24px;
}

.HelpHeader
{
	font-size: 24px;
	text-transform: uppercase;
	color: white;
	margin: 12px 0px 12px;
	font-weight: semi-bold;
	letter-spacing: 1.5px;
}

.HelpSubHeader
{
	font-size: 22px;
	font-family: titleFont;
	font-weight: normal;
	color: whitesmoke;
	margin-top: 20px;
	padding-top: 16px;
	margin-bottom: 4px;
	width: 100%;
	border-top: 1px solid rgba(202, 255, 241, 0.027);
}

.HelpDetail
{
	font-size: 17px;
	color: rgba(198, 212, 206, 0.8);
	line-height: 1.3;
}

.ShapeHelpTitle
{
	color: rgba(245, 245, 245, 0.8);
	font-family: titleFont;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: semi-bold;
	letter-spacing: 0.8px;
	margin-left: 2px;
	vertical-align: center;
}

.ShapeHelpExplainer
{
	color: rgba(198, 212, 206, 0.5);
	font-size: 16px;
	margin-left: 2px;
	vertical-align: center;
	margin-left: 8px;
}

.GemImage
{
	width: 18px;
	height: 18px;
	wash-color: #aaa;
	margin-right: 8px;
	img-shadow: 2px 2px 4px black;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: center;
}

.GemEntry
{
	margin-top: 6px;
	width: 100%;
}

.HorizontalRuler
{
	width: 100%;
	height: 1px;
	background-color: rgba(224, 205, 103, 0.3);
	margin-top: 8px;
}

.ColumnHolder
{
	width: 95%;
	horizontal-align: center;
	height: fit-children;
	flow-children: right;
}

.HelpColumn
{
	width: fill-parent-flow( 1.0 );
	height: fit-children;
	flow-children: down;
}

.ColumnTitle
{
	color: rgba(245, 245, 245, 0.8);
	font-family: titleFont;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: semi-bold;
	letter-spacing: 0.8px;
	margin-left: 2px;
	vertical-align: center;
}

.ColumnText
{
	color: rgba(198, 212, 206, 0.5);
	font-size: 16px;
	margin-left: 2px;
	vertical-align: center;
}

.SubTitle
{
	font-size: 20px;
	font-family: titleFont;
	color: #bbbbe5;
}

.StageDetails
{
	width: 100% height: fit-children;
	flow-children: down;
	margin-left: 16px;
	margin-right: 16px;
}

.StageDetails Label
{
	color: #BABDDB;
	text-shadow: 0px 2px 8px black;
}

.StageDetails .StageTitle
{
	margin-bottom: 12px;
	font-family: titleFont;
	font-size: 22px;
	color: whitesmoke;
	text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.6);
}

.StageDetails .RewardDetails
{
	width: 100%;
	height: fit-children;
	flow-children: down;
	margin-top: 12px;
}

.StageDetails .RewardDetails .TableHeaderContainer
{
	width: 100%;
	text-transform: uppercase;
}

.StageDetails .RewardDetails .TableHeaderContainer .TableHeader
{
	color: #dfa8f4;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 14px;
	margin-bottom: 4px;
	margin-top: 8px;
}

.StageDetails .RewardDetails .TableHeaderContainer .TableHeader.Right
{
	horizontal-align: right;
}

.StageDetails .RewardDetails #RewardBody
{
	width: 100%;
	height: fit-children;
	flow-children: down;
}

.StageDetails .RewardDetails .DotDotDot
{
	margin: 0px 8px;
	height: 1px;
	width: fill-parent-flow(1);
	vertical-align: center;
	background-color: rgba(142, 114, 188, 0.112);
}

.StageDetails .RewardDetails .RewardCellLine
{
	flow-children: right;
	width: 100%;
}

.StageDetails .RewardDetails .InfoRewards
{
	color: LighterGrey;
	text-align: center;
	horizontal-align: right;
	vertical-align: center;
	margin-bottom: 0px;
	padding-right: 24px;
	letter-spacing: 1.5px;
	background-image: bp_total_points;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
}