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

DOTAMonsterHunterTutorialPopup.PopupPanel
{
	border: 0px;
	padding: 0px;
	box-shadow: none;
	background-color: none;
	flow-children: down;
}

.PopupTopLeftTexture
{
	width: 800px;
	-s2-mix-blend-mode: screen;
	brightness: 0.4;
}

.PopupBottomRightTexture
{
	width: 600px;
	horizontal-align: right;
	vertical-align: bottom;
	transform: scale3d( -1, -1, 1 );
	-s2-mix-blend-mode: screen;
	brightness: 0.3;
}

.SigilContainer
{
	opacity-brush: gradient( linear, 0% 0%, 0% 70%, from( #FFFFFF ), to( #FFFFFF00 ) );
}

.MainContentsContainer
{
	background-color: rgba(34, 24, 18, 1);
	border: 1px solid #AC997B;
	padding: 4px;
}

.MainContentsContainer .MainContents
{
	width: 1280px;
	height: 800px;
	background-color: #000;
	background-color: gradient( radial, 0% 0%, 0% 0%, 100% 100%, from( #261D18 ), to( #000000 ) );
	box-shadow: inset 0px 0px 0px 1px #ffe2b411;
	transition-property:height;
	transition-duration: 0.2s;
}

.MainContentsContainer .MainContents.ShowLongVersion
{
	height: 960px;
}

.MainContentsContainer .MainContents .TitleEmblemContainer
{
	horizontal-align: center;
}

.MainContentsContainer .MainContents .Dismiss
{
	ignore-parent-flow: true;
	horizontal-align: center;
	vertical-align: bottom;
	margin: 40px;
	margin-top: 20px;
	ui-scale: 120%;
	width: 260px;
}

.DragonsSection
{
	width: 100%;
	padding: 24px;
	padding-bottom: 0px;
	flow-children: down;
	margin-top: 48px;
	margin-bottom: 24px;
	background-color: gradient( radial, 50% 0%, 0% 0%, 50% 100%, from( rgba(168, 76, 42, 0.2) ), color-stop( 0.5, rgba(168, 76, 42, 0.1) ), to( #ffffff00 ) );
	border-top: 1px solid white;
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( #ffffff00 ), color-stop( 0.5, rgba(177, 147, 94, 0.6) ), to( #ffffff00 ) );
}

.DragonsSection .Heading
{
	horizontal-align: center;
	color: TextColorLighter;
	text-shadow: 0px 3px 12px black;
}

.DragonsSection .DragonsContent
{
	width: 100%;
	margin: 12px 60px;
	flow-children: right;
}

.DragonsSection .DragonsContent .TextContent
{
	vertical-align: center;
	width: 50%;
	color: TextColorLightest&88;
	text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
	line-height: 1.2;
	margin: 12px;
}

.DragonsSection .DragonsContent .DragonImage
{
	width: 50%;
	horizontal-align: center;
	margin: 12px;
}

.GearSection
{
	width: 100%;
	padding: 24px;
	padding-bottom: 0px;
	flow-children: down;
	margin-top: 30px;
	margin-bottom: -24px;
	background-color: gradient( radial, 50% 0%, 0% 0%, 50% 100%, from( rgba(168, 76, 42, 0.2) ), color-stop( 0.5, rgba(168, 76, 42, 0.1) ), to( #ffffff00 ) );
	border-top: 1px solid white;
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( #ffffff00 ), color-stop( 0.5, rgba(177, 147, 94, 0.6) ), to( #ffffff00 ) );
}

.GearSection .Heading
{
	horizontal-align: center;
	color: TextColorLighter;
	text-shadow: 0px 3px 12px black;
}

.GearSection .GearContent
{
	width: 100%;
	margin: -28px 60px;
	flow-children: right;
}

.GearSection .GearContent .GearImage
{
	width: 50%;
	vertical-align: center;
	transform: scale3d( 1.05, 1.05, 1 );
	margin: 12px;
}

.GearSection .GearContent .GearText
{
	width: 50%;
	vertical-align: center;
	flow-children: down;
	margin: 12px;
}

.GearSection .GearContent .GearText Label
{
	text-align: left;
}

.GearSection .GearContent .GearText .TextContent
{
	horizontal-align: center;
	color: TextColorLightest&88;
	text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
	line-height: 1.2;
}

.GearSection .GearContent .GearText .PurchasePrice
{
	color: TextColorLightest&CC;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 238, 212, 0.1);
	border-brush: gradient( linear, 20% 0%, 80% 0%, from( #FFFFFF ), to( #FFFFFF00 ) );
	width: 100%;
}

.GearSection .GearContent .GearText .PurchaseButton
{
	margin: 24px 0px;
}

.Contents
{
	flow-children: down;
	width: 100%;
	height: 100%;
	padding: 52px 100px;
}

.Contents VerticalScrollBar
{
	width: 4px;
}

.ShortContents
{
	flow-children: right;
	margin-bottom: 30px;
	width: 100%;
}

.ShortContents .Column
{
	width: 33.3%;
	flow-children: down;
	height: fit-children;
	overflow: noclip;
}

.ShortContents .Column .Title
{
	text-transform: uppercase;
	letter-spacing: 1px;
	color: TextColorGradientSilver;
	font-weight: semi-bold;
	text-align: center;
	horizontal-align: center;
	margin: 8px;
	font-size: 19px;
}

.ShortContents .Column .Description
{
	color: TextColorLightest&66;
	text-align: center;
	font-size: 16px;
	margin: 0px 20px;
}

.ShortContents .ColumnImage
{
	width: 100%;
	height: width-percentage(100%);
	horizontal-align: center;
	vertical-align: center;
	margin: -16px 0px;
}

.ShortContents .ColumnImage.Atlas
{
	padding: 20px;
}

.ShowLongVersion .ShortContents
{
	visibility: collapse;
}

.MoreDetailsContainer
{
	width: 80%;
	padding: 8px;
	vertical-align: bottom;
	horizontal-align: center;
	transition-property: transform;
	transition-duration: 0.1s;
	border: 1px solid rgba(255, 252, 220, 0.03);
	background-color: gradient( linear, 10% 0%, 90% 0%, from( #00000000 ), color-stop( 0.5, #c7ab8a08 ), to( #00000000 ) );
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( #FFFFFF00 ), color-stop( 0.5, #FFFFFF ), to( #FFFFFF00 ) );
}

.MoreDetailsContainer Label
{
	horizontal-align: center;
	font-size: 13px;
	text-transform: uppercase;
	text-shadow: 0px 2px 8px black;
	color: TextColorGradientGold;
}

.MoreDetailsContainer:hover
{
	brightness: 2.0;
	transform: scale3d( 1.05, 1.05, 1);
}

.ShowLongVersion .MoreDetailsContainer
{
	visibility: collapse;
}

.TutorialNotDone .MoreDetailsContainer
{
	visibility: collapse;
}

.LongContents
{
	width: 100%;
	height: 100%;
	overflow: squish scroll;
	margin-bottom: 100px;
	opacity-mask: url("s2r://panorama/images/masks/soft_top_bottom_vscroll_psd.vtex");
	flow-children: down;
	visibility: collapse;
}

.ShowLongVersion .LongContents
{
	visibility: visible;
}

.IntroductionLabel
{
	text-align: center;
	margin: 0px 80px;
	color: TextColorLighter;
	font-size: 22px;
	text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
	margin-bottom: 24px;
}

.Section
{
	width: 100%;
	flow-children: right;
	padding: 0px 24px;
}

.Section .TextColumn
{
	width: 50%;
	vertical-align: center;
	flow-children: down;
	overflow: noclip;
}

.Section .TextColumn .SectionTitle
{
	width: 100%;
	flow-children: right;
	margin-bottom: 16px;
}

.Section .TextColumn .SectionTitle .SectionTitleBackground
{
	ignore-parent-flow: true;
	width: 100%;
	height: 100%;
	margin-left: 20px;
	background-color: gradient( radial, 0% 100%, 0% 0%, 100% 100%, from( rgba(168, 76, 42, 0.242) ), color-stop( 0.5, rgba(168, 90, 42, 0.119) ), to( #ffffff00 ) );
	border-bottom: 1px solid white;
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( rgba(177, 147, 94, 0.6) ), to( #ffffff00 ) );
}

.Section .TextColumn .SectionTitle Label
{
	text-transform: uppercase;
	font-size: 26px;
	color: TextColorGradientSilver;
	font-weight: semi-bold;
	vertical-align: center;
	text-shadow: 0px 2px 12px black;
	margin: 4px 0px;
}

.Section .TextColumn .SectionTitle .HeaderIconContainer
{
	overflow: noclip;
	vertical-align: center;
	margin-right: 16px;
}

.Section .TextColumn .SectionTitle .HeaderIconContainer .HeaderIconBackground
{
	width: 42px;
	height: width-percentage( 100% );
	horizontal-align: center;
	vertical-align: center;
	box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.258);
	background-color: rgb(26, 17, 8);
	border: 1px solid rgba(177, 147, 94, 0.5);
	transform: rotateZ( 45deg );
}

.Section .TextColumn .SectionTitle .HeaderIconContainer .HeaderIcon
{
	width: 36px;
	height: width-percentage( 100% );
	horizontal-align: center;
	vertical-align: center;
	background-image: url("s2r://panorama/images/events/monster_hunter/artwork/quest_main_objective_icon_psd.vtex");
	background-size: cover;
	saturation: 0;
	wash-color: #ffdca4;
	vertical-align: center;
}

.Section .TextColumn .TextContent
{
	margin: 8px 0px;
	color: TextColorLightest&88;
	text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
	line-height: 1.2;
	margin-right: 12px;
	margin-left: 20px;
}

.Section .ImageColumn
{
	width: 50%;
	overflow: noclip;
}

.Section .ImageColumn .SectionImage
{
	vertical-align: center;
	horizontal-align: center;
	width: 90%;
	overflow: noclip;
}

.SectionDivider
{
	width: 100%;
	height: 1px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( rgba(255, 255, 255, 0) ), color-stop( 0.3, rgb(255, 255, 255) ), color-stop( 0.7, rgb(255, 255, 255) ), to( rgba(255, 255, 255, 0) ) );
	wash-color: rgb(255, 230, 193);
	opacity: 0.05;
}

.YourTarget,.HuntingYou
{
	color: TextColorLighter;
	margin-top: 11%;
	horizontal-align: center;
}

.YourTarget
{
	x: -18%;
}

.HuntingYou
{
	x: 18%;
}