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

@define pageTurnTime: 0.4s;
@define pageTurnHalfTime: 0.2s;
@define pageOffsetRight: 348px;
@define pageOffsetLeft: -348px;
DOTAMonsterHunterHeroCodexPopup.PopupPanel
{
	width: 100%;
	height: 100%;
	border: 0px;
	padding: 0px;
	box-shadow: none;
	background-color: none;
	animation-name: none;
}

#MainContents
{
	width: fit-children;
	height: 100%;
	vertical-align: center;
	background-color: none;
}

.AsyncContents
{
	horizontal-align: center;
	width: fit-children;
	height: 100%;
}

.HeaderRegion
{
	margin-top: 48px;
	width: 1440px;
	horizontal-align: center;
	overflow: noclip;
}

.HeaderRegion .TitleContainer
{
	horizontal-align: center;
	flow-children: down;
	margin-bottom: 2px;
}

.HeaderRegion .TitleContainer .TitleEmblemContainer
{
	horizontal-align: center;
	margin-bottom: -12px;
}

.HeaderRegion .TitleContainer .AtlasDescription
{
	text-shadow: TextShadowMedium;
	color: TextColorLightest&88;
}

.HeaderRegion .StatsContainer
{
	vertical-align: bottom;
	horizontal-align: right;
	flow-children: right;
}

.HeaderRegion .Stat
{
	flow-children: down;
	margin-left: 16px;
}

.HeaderRegion .Stat .TopStat
{
	flow-children: right;
	horizontal-align: center;
}

.HeaderRegion .Stat .TopStat Label
{
	vertical-align: center;
	color: TextColorLightest;
	text-shadow: 0px 2px 8px black;
}

.HeaderRegion .Stat .TopStat .ExtraLarge
{
	font-weight: semi-bold;
	color: white;
	margin-right: 4px;
}

.HeaderRegion .Stat .StatLabel
{
	horizontal-align: center;
	color: TextColorLight;
	text-shadow: 0px 2px 8px black;
	margin-top: -6px;
	padding: 1px 5px 2px 8px;
	border: 1px solid transparent;
}

.ClaimableStats
{
	transition-property: transform;
	transition-duration: 0.1s;
}

.SomethingClaimable .ClaimableStats .StatLabel
{
	border-radius: 2px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #D4A75E ), to( #7d5b33 ) );
	vertical-align: bottom;
	border: 1px solid white;
	border-brush: WhiteGradientBorderStrong;
	box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4);
	color: white;
	transition-property: background-color;
	transition-duration: 0.1s;
}

.SomethingClaimable .ClaimableStats:hover .StatLabel
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #ffcb78 ), to( #996d3a ) );
}

.CodexContainer
{
	horizontal-align: center;
	vertical-align: center;
	width: 1440px;
	height: 840px;
	background-color: #1B0F09;
	box-shadow: 0px 3px 0px rgba(46, 33, 25, 0.8);
}

.CodexContainer .CodexContainerBorder
{
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255, 239, 194, 0.8);
	border-brush: gradient( radial, 50% 0%, 0% 0%, 80% 90%, from( white ), to( #655A4E ) );
	z-index: 1;
}

.CodexContainer .CodexBackground
{
	width: 100%;
	height: 100%;
	background-color: #181512;
	border: 1px solid #947f7216;
	margin: 6px;
}

.CodexContainer .CodexBackgroundTexture
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/events/monster_hunter/artwork/book_texture_png.vtex");
	background-size: cover;
	-s2-mix-blend-mode: screen;
	wash-color: rgb(255, 184, 129);
	opacity: 0.08;
	margin: 6px;
}

#CloseButtonContainer
{
	transition-property: transform, opacity;
	transition-duration: 0.1s;
}

.ShowingHeroStats #CloseButtonContainer
{
	opacity: 0;
	transform: translateX( 8px ) translateY( -8px );
	transition-delay: 0.2s;
}

#CloseButtonContainer .CloseButtonBackground
{
	background-color: #1B0F09;
}

.SigilBackground
{
	horizontal-align: center;
	vertical-align: center;
	margin-bottom: 100px;
	margin-right: 6px;
	width: 720px;
	height: width-percentage(100%);
	ignore-parent-flow: true;
	opacity-brush: gradient( radial, 50% 0%, 0% 0%, 80% 90%, from( #1a140e ), color-stop( 0.7, #1a140ec7 ), to( #18151200 ) );
	z-index: 2;
	opacity: 0.1;
}

#PrevPageButton,#NextPageButton
{
	transition-duration: 0.1s;
	transition-property: transform, opacity;
}

.BookBackground
{
	horizontal-align: center;
	vertical-align: center;
	width: 100%;
	height: 100%;
	padding: 60px 240px 60px 240px;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.2s;
}

.ShowingHeroStats .BookBackground
{
	opacity: 1;
}

.BookBackground .Page
{
	opacity: 1;
}

.PageNumber
{
	horizontal-align: center;
	vertical-align: bottom;
	color: black;
	opacity: 0.7;
	margin: 45px;
	font-family: defaultFont;
	font-size: 16px;
}

.Page
{
	width: 740px;
	height: 850px;
	vertical-align: center;
	horizontal-align: center;
}

.Page.Left
{
	transform: translateX( pageOffsetLeft );
	transform-origin: 100% 50%;
}

.Page.Left .PageBackgroundImage.Behind1
{
	transform: scale3d( 0.98, -0.98, 1 ) translateX( -14px );
	brightness: 0.4;
	saturation: 1.1;
}

.Page.Left .PageBackgroundImage.Behind2
{
	transform: scale3d( -0.98, 0.98, 1 ) translateX( -24px );
	brightness: 0.2;
	saturation: 1.2;
}

.Page.Left .SigilBackground
{
	transform: translateX( pageOffsetRight );
}

.Page.Left .PageNumber
{
	horizontal-align: left;
}

.Page.Right
{
	transform: translateX( pageOffsetRight );
	transform-origin: 0% 50%;
}

.Page.Right .PageBackgroundImage
{
	transform: scaleX( -1 ) scaleY( -1 );
}

.Page.Right .PageBackgroundImage.Behind1
{
	transform: scale3d( 0.98, 0.98, 1 ) translateX( 17px );
	brightness: 0.4;
	saturation: 1.1;
}

.Page.Right .PageBackgroundImage.Behind2
{
	transform: scale3d( 0.98, -0.98, 1 ) translateX( 25px );
	brightness: 0.2;
	saturation: 1.2;
}

.Page.Right .SigilBackground
{
	transform: translateX( pageOffsetLeft );
}

.Page.Right .PageNumber
{
	horizontal-align: right;
}

.PageBackgroundImage
{
	img-shadow: ImgShadowMedium;
	opacity-brush: gradient( linear, 75% 0%, 100% 0%, from( #ffffff ), to( #cab9a1 ) );
	width: 100%;
	height: 100%;
}

.PageBackgroundImage.Behind1,.PageBackgroundImage.Behind2
{
	opacity-brush: white;
}

.CodexHeroDetailsContainer
{
	horizontal-align: center;
	vertical-align: center;
	width: 100%;
	height: 100%;
	transition-property: transform, opacity;
	transition-duration: 0.2s;
	opacity: 0;
}

.ShowingHeroStats .CodexHeroDetailsContainer
{
	opacity: 1;
}

.ShowingHeroStats .CodexHeroDetailsContainer .CloseHeroPanelButton
{
	opacity: 1;
	transform: none;
}

.CodexHeroDetailsContainer .CloseHeroPanelButton
{
	horizontal-align: right;
	ignore-parent-flow: true;
	margin-top: 150px;
	margin-right: 60px;
	padding: 8px;
	border: 1.2px solid #745f429e;
	background-color: #6b4d4000;
	border-radius: 50%;
	transition-property: background-color, pre-transform-scale2d, transform, opacity;
	transition-duration: 0.15s;
	transition-timing-function: cubic-bezier(0, 0.9, 0, 0.9);
	transition-delay: 0s, 0s, 0.25s;
	opacity: 0;
	transform: scale3d( 1.2, 1.2, 1 );
}

.CodexHeroDetailsContainer .CloseHeroPanelButton:hover
{
	background-color: #6b4d402f;
}

.CodexHeroDetailsContainer .CloseHeroPanelButton:hover Image
{
	wash-color: black;
}

.CodexHeroDetailsContainer .CloseHeroPanelButton:active
{
	pre-transform-scale2d: 0.9;
}

.CodexHeroDetailsContainer .CloseHeroPanelButton Image
{
	wash-color: #745f42;
	width: 20px;
	height: 20px;
	transition-property: wash-color;
	transition-duration: 0.15s;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage
{
	width: 100%;
	padding: 48px 0px 54px;
	flow-children: down;
	height: fill-parent-flow(1);
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .TitleEmblemContainer
{
	horizontal-align: center;
	margin-top: 8px;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDetailsTitle
{
	horizontal-align: center;
	color: rgba(0, 0, 0, 0.9);
	font-weight: semi-bold;
	text-align: center;
	text-shadow: TextShadowWhite;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage #HeroImage
{
	horizontal-align: center;
	width: 400px;
	height: width-percentage(100%);
	img-shadow: 0px 0px 14px #905203;
	margin: 8px 0px;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage #HeroImage.PlayingSound
{
	animation-name: HeroShake;
	animation-duration: 0.05s;
	animation-iteration-count: 3;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .CodexHeroNameContainer
{
	flow-children: right;
	horizontal-align: center;
	margin-top: 8px;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .CodexHeroNameContainer .CodexHeroName
{
	color: black;
	font-weight: bold;
	text-align: center;
	line-height: 1.1;
	font-size: 36px;
	text-shadow: TextShadowWhite;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .CodexHeroNameContainer .Emblem
{
	vertical-align: center;
	margin: 0px 6px 1px;
	wash-color: #000000;
	width: 32px;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .CodexHeroNameContainer .Emblem.Right
{
	transform: scaleX( -1 );
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .StatDivider
{
	width: 1px;
	height: 100%;
	background-color: #69544b55;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .CodexHeroStatsContainer
{
	flow-children: right;
	horizontal-align: center;
	margin: 8px 64px;
	padding: 0px 24px;
	width: 100%;
	border: 1px solid #69544b55;
	border-left: 0px;
	border-right: 0px;
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( #FFFFFF00 ), color-stop( 0.2, white ), color-stop( 0.8, white ), to( #FFFFFF00 ) );
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #6b4d4000 ), color-stop( 0.2, #6b4d4033 ), color-stop( 0.8, #6b4d4033 ), to( #6b4d4000 ) );
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .CodexHeroStatsContainer .HeroStat
{
	width: fill-parent-flow( 1 );
	flow-children: down;
	border-right: 0px;
	padding-top: 8px;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .CodexHeroStatsContainer .HeroStat Label
{
	horizontal-align: center;
	text-align: center;
	color: black;
	text-shadow: TextShadowWhite;
	font-weight: semi-bold;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .CodexHeroStatsContainer .HeroStat .HeroStatLabel
{
	letter-spacing: 0.5px;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .CodexHeroStatsContainer .HeroStat .HeroStatValue
{
	margin-top: -8px;
	font-weight: semi-bold;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .MaterialsContainer
{
	horizontal-align: center;
	width: 100%;
	margin: 8px 64px;
	border: 1px solid #69544b55;
	border-left: 0px;
	border-right: 0px;
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( #FFFFFF00 ), color-stop( 0.2, white ), color-stop( 0.8, white ), to( #FFFFFF00 ) );
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #6b4d4000 ), color-stop( 0.2, #6b4d4033 ), color-stop( 0.8, #6b4d4033 ), to( #6b4d4000 ) );
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .MaterialsContainer #MaterialsList
{
	flow-children: right;
	horizontal-align: center;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .MaterialsContainer Label
{
	color: #6E5337;
	vertical-align: center;
	margin-left: 20px;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDescriptionContainer
{
	horizontal-align: center;
	width: 588px;
	height: fill-parent-flow(1);
	flow-children: down;
	padding: 12px 20px 14px;
	margin-top: -6px;
	opacity-mask: url("s2r://panorama/images/masks/soft_top_bottom_vscroll_psd.vtex");
	overflow: squish scroll;
	background-color: gradient( radial, 50% 0%, 0% 0%, 50% 100%, from( #4e333333 ), color-stop( 0.4, #76612b11 ), to( #6b4d4000 ) );
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDescriptionContainer .EmptyNotes
{
	horizontal-align: center;
	width: 550px;
	height: 520px;
	ignore-parent-flow: true;
	background-image: url("s2r://panorama/images/events/monster_hunter/artwork/page_lines_png.vtex");
	background-size: 100px 24px;
	background-img-opacity: 0.2;
	margin-top: 4px;
	visibility: collapse;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDescriptionContainer .EmptyNotes .QuestionMarks
{
	visibility: collapse;
	horizontal-align: center;
	color: #39312E;
	font-family: defaultFont;
	font-size: 17px;
	letter-spacing: -0.3px;
	margin-top: 3px;
	opacity: 0.8;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDescriptionContainer VerticalScrollBar
{
	width: 4px;
	wash-color: rgb(143, 120, 101);
	opacity: 0.6;
	margin: 16px 0px 24px;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDescriptionContainer .HeroDescription
{
	width: 99%;
	margin: 4px 0px;
	color: #39312E;
	horizontal-align: center;
	text-align: left;
	text-shadow: TextShadowWhite;
	visibility: collapse;
	font-family: defaultFont;
	font-size: 17px;
	letter-spacing: -0.4px;
	line-height: 1.43;
	background-image: url("s2r://panorama/images/events/monster_hunter/artwork/page_lines_png.vtex");
	background-size: 100px 24px;
	background-img-opacity: 0.2;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDescriptionContainer .HeroDescription .strikethrough
{
	text-decoration: line-through;
	color: rgb(144, 48, 48);
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDescriptionContainer .HeroDescription i
{
	font-style: italic;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDescriptionContainer .UnknownDescription
{
	visibility: collapse;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDescriptionContainer .Stub
{
	width: 40px;
	height: 17px;
	margin: 10px;
	background-image: url("s2r://panorama/images/control_icons/question_mark_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	wash-color: black;
	horizontal-align: center;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDescriptionContainer.Visible .HeroDescription
{
	visibility: visible;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDescriptionContainer.Visible .SignatureContainer
{
	visibility: visible;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDescriptionContainer.Visible .Stub
{
	visibility: collapse;
}

.CodexHeroDetailsContainer .CodexHeroDetailsPage .HeroDescriptionContainer.Blur
{
	blur: gaussian( 2.5 );
}

.CodexHeroDetailsContainer .RewardsInfoIncomplete
{
	width: fit-children;
	horizontal-align: center;
	visibility: collapse;
	flow-children: right;
}

.CodexHeroDetailsContainer .RewardsInfoIncomplete Label
{
	horizontal-align: center;
	color: #745F42;
	text-align: center;
}

.CodexHeroDetailsContainer .RewardsInfoIncomplete .InfoIcon
{
	width: 16px;
	height: 16px;
	wash-color: #745F42;
	opacity: 0.9;
}

.CodexHeroDetailsContainer .Page.Unknown .HeroDescriptionContainer,.CodexHeroDetailsContainer .Page.Locked .HeroDescriptionContainer
{
	height: 100%;
	width: 100%;
}

.CodexHeroDetailsContainer .Page.Unknown .RewardsInfoIncomplete,.CodexHeroDetailsContainer .Page.Locked .RewardsInfoIncomplete
{
	visibility: visible;
}

.CodexHeroDetailsContainer .Page.Unknown .RequiresPremiumContainer,.CodexHeroDetailsContainer .Page.Locked .RequiresPremiumContainer
{
	visibility: collapse;
}

.CodexHeroDetailsContainer .Page.Unknown .EmptyNotes,.CodexHeroDetailsContainer .Page.Locked .EmptyNotes
{
	visibility: visible;
}

.CodexHeroDetailsContainer .Emblem
{
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 44px;
	wash-color: black;
	transform: scaleY( -1 );
}

@keyframes 'HeroShake'
{
	0%
	{
		transform: none;
	}
	
	33%
	{
		transform: translateX( 3px );
	}
	
	66%
	{
		transform: translateX( -3px );
	}
	
	100%
	{
		transform: none;
	}
	
}

.PersonaSwitcher
{
	ignore-parent-flow: true;
	flow-children: right;
	margin-top: 55px;
	horizontal-align: center;
	visibility: collapse;
}

.PersonaSwitcher .PersonaSwitcherOption
{
	margin: 2px;
	color: #745F42;
	font-weight: bold;
	padding: 6px 16px;
	border-radius: 3px;
	border: 1px solid #745f42a1;
	text-transform: uppercase;
	font-size: 12px;
}

.PersonaSwitcher .PersonaSwitcherOption:selected
{
	background-color: #0003;
}

.PersonaSwitcher .PersonaSwitcherOption:hover
{
	box-shadow: 0px 0px solid #6E5337;
}

.HasPersona:not(.Locked) .PersonaSwitcher
{
	visibility: visible;
}

.ForewordContents
{
	width: 100%;
	padding: 48px 50px 0px 50px;
	flow-children: down;
	height: fill-parent-flow(1);
	visibility: collapse;
}

.ForewordContents .BorderContainer
{
	width: 100%;
	flow-children: down;
	padding: 10px;
	height: 100%;
}

.ForewordContents .Section
{
	flow-children: down;
	horizontal-align: center;
	overflow: squish;
}

.ForewordContents .Section.Title
{
	height: 225px;
	margin: -24px 0px 4px;
}

.ForewordContents .Section.Description
{
	width: 79%;
	margin: 12px 0px;
}

.ForewordContents .Section.Description Label
{
	font-size: 18px;
	text-align: center;
	vertical-align: center;
	font-style: normal;
	line-height: 1.3;
}

.ForewordContents .Section.Authors
{
	margin-top: 16px;
}

.ForewordContents .Section.Footnote
{
	height: 50px;
}

.ForewordContents .Section.Footnote Label
{
	vertical-align: bottom;
}

.ForewordContents .Section .BlankDivider
{
	height: 16px;
}

.ForewordContents .ComicBookContainer
{
	horizontal-align: center;
	margin-top: 20px;
	padding-bottom: 16px;
}

.ForewordContents .ComicBookContainer:hover .ComicBookCoverImage
{
	brightness: 1.5;
	transform: translateY( -3px );
	box-shadow: 0px 6px 32px -4px rgba(0, 0, 0, 0.8);
}

.ForewordContents .ComicBookContainer:hover .ComicBookCover
{
	background-color: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 0, 0, 0.4);
}

.ForewordContents .ComicBookContainer .ComicBookCover
{
	padding: 8px;
	background-color: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(0, 0, 0, 0.3);
	transition-property: background-color, border;
	transition-duration: 0.15s;
	transition-timing-function: cubic-bezier(0, 0.9, 0, 0.9);
}

.ForewordContents .ComicBookContainer .ComicBookCover .ComicBookCoverImage
{
	width: 180px;
	box-shadow: 0px 4px 24px -4px rgba(0, 0, 0, 0.4);
	transition-property: brightness, transform, box-shadow;
	transition-duration: 0.15s;
	transition-timing-function: cubic-bezier(0, 0.9, 0, 0.9);
}

.ForewordContents .ComicBookContainer .ShowComicButton
{
	horizontal-align: center;
	opacity: 1;
	transform: none;
	vertical-align: bottom;
	margin: 0px;
	y: 16px;
}

.ForewordContents .Sigil
{
	height: 90%;
	horizontal-align: center;
	vertical-align: bottom;
	wash-color: black;
	ignore-parent-flow: true;
	opacity: 0.3;
}

.ForewordContents Label
{
	opacity: 0.97;
	horizontal-align: center;
	color: black;
	letter-spacing: 0.5px;
	font-family: titleFont;
	text-align: center;
}

.ForewordContents Label.Uppercase
{
	text-transform: uppercase;
	text-align: center;
}

.ForewordContents Label.Title
{
	font-size: 44px;
	margin-top: 4px;
	font-weight: bold;
	letter-spacing: 5px;
}

.ForewordContents Label.Title.EvenWider
{
	margin-top: 0;
	font-size: 52px;
	opacity: 1;
}

.ForewordContents Label.Subtitle
{
	font-weight: semi-bold;
	font-size: 12px;
	transform: scale3d(1, 1, 1 );
	font-stretch: ultra-condensed;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: 0.93;
}

.ForewordContents Label.Subtitle.PreTitle
{
	margin-top: 45px;
}

.ForewordContents Label.Subtitle.SevenRealms
{
	margin-top: 9px;
	font-weight: bold;
	font-size: 16px;
	letter-spacing: 25px;
}

.Language_thai .ForewordContents Label.Subtitle.SevenRealms
{
	letter-spacing: 0px;
}

.ForewordContents Label.Small
{
	font-size: 14px;
	font-style: italics;
	margin: 0 15px;
	font-family: defaultFont;
}

.ForewordContents Label.Footnote
{
	opacity: 0.94;
	font-size: 13px;
	margin: 0 15px;
	font-family: defaultFont;
}

.ForewordContents Label.Unimportant
{
	opacity: 0.94;
}

.ForewordContents Label.Medium
{
	text-transform: none;
	font-family: Reaver;
	font-size: 18px;
}

.ForewordContents Label.Medium.Goodkind
{
	font-size: 18px;
}

.ForewordContents Label.Instructions
{
	vertical-align: center;
}

.ForewordContents .WideDivider
{
	width: 80%;
	height: 1px;
	background-color: #0006;
	horizontal-align: center;
}

.ForewordContents .MediumDivider
{
	width: 80%;
	height: 1px;
	background-color: #0006;
	horizontal-align: center;
}

.FirstPageBookBackgroundImage
{
	width: 100%;
	height: 100%;
	visibility: collapse;
	transform: scale3d( 1, 1, 1 );
}

.BookBackgroundImage
{
	width: 100%;
	height: 100%;
	transform: scale3d( 1, 1, 1 );
}

.Page.Right .BookBackgroundImage
{
	transform: scale3d( -1, 1, 1 );
}

.IsForeword.Page .SigilBackground
{
	visibility: collapse;
}

.IsForeword.Page .PageNumber
{
	visibility: collapse;
}

.IsForeword.Page.Left .FirstPageBookBackgroundImage
{
	visibility: visible;
}

.IsForeword.Page.Left .PageBackgroundImage
{
	visibility: collapse;
}

.IsForeword .CodexHeroDetailsPage
{
	visibility: collapse;
}

.IsForeword .ForewordContents
{
	visibility: visible;
}

.SignatureContainer
{
	height: 100px;
	horizontal-align: right;
	visibility: collapse;
}

.SignatureContainer Label
{
	color: #39312E;
	text-align: left;
	text-shadow: TextShadowWhite;
	font-size: 25px;
	font-family: defaultFont;
	margin-right: 14px;
}

#FieldNotesSignature
{
	horizontal-align: right;
	height: 100px;
	width: 300px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	visibility: collapse;
}

#FieldNotesSignature.Goodkind
{
	background-image: url("s2r://panorama/images/events/monster_hunter/atlas/goodkind_sig_png.vtex");
}

#FieldNotesSignature.Kerrick
{
	background-image: url("s2r://panorama/images/events/monster_hunter/atlas/kerrick_sig_png.vtex");
}

#FieldNotesSignature.Mossgrave
{
	background-image: url("s2r://panorama/images/events/monster_hunter/atlas/mossgrave_sig_png.vtex");
}

#FieldNotesSignature.Quibbins
{
	background-image: url("s2r://panorama/images/events/monster_hunter/atlas/quibbins_sig_png.vtex");
}

#FieldNotesSignature.QuibbinsDrunk
{
	background-image: url("s2r://panorama/images/events/monster_hunter/atlas/quibbins_drunk_sig_png.vtex");
}

.ShowSignatureImage .SignatureContainer #FieldNotesSignature
{
	visibility: visible;
}

.ShowSignatureImage .SignatureContainer Label
{
	visibility: collapse;
}

#CodexRewardsContainer
{
	horizontal-align: center;
	flow-children: right;
}

#CodexRewardsContainer Label
{
	horizontal-align: center;
	text-align: center;
	color: #745F42;
	text-shadow: TextShadowWhite;
}

#CodexRewardsContainer .Divider
{
	width: 100%;
	height: 1px;
	margin: 12px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #FFFFFF00 ), color-stop( 0.2, white ), color-stop( 0.8, white ), to( #FFFFFF00 ) );
	wash-color: #69544b;
	opacity: 0.5;
}

#CodexRewardsContainer .MaterialsRewardsContainer
{
	width: 260px;
	flow-children: down;
	margin: 8px;
	visibility: collapse;
}

.HasMaterialReward #CodexRewardsContainer .MaterialsRewardsContainer
{
	visibility: visible;
}

#CodexRewardsContainer .MaterialsRewardsContainer .TitleEmblemContainer
{
	margin-bottom: 8px;
}

#CodexRewardsContainer .MaterialsRewardsContainer .MaterialsDescription
{
	horizontal-align: center;
	text-align: center;
	font-weight: semi-bold;
	brightness: 0.8;
	letter-spacing: -0.2px;
}

#CodexRewardsContainer .MaterialsRewardsContainer #MaterialsList
{
	flow-children: right;
	horizontal-align: center;
	margin-top: 4px;
}

#CodexRewardsContainer .MaterialsRewardsContainer #MaterialsList DOTAMonsterHunterMaterial
{
	width: 60px;
	margin: -6px;
}

#CodexRewardsContainer .MaterialsRewardsContainer #ClaimMaterialRewardsButton
{
	horizontal-align: center;
	margin-top: 8px;
	visibility: collapse;
}

.Locked #CodexRewardsContainer .MaterialsRewardsContainer #ClaimMaterialRewardsButton
{
	visibility: collapse;
}

.MaterialsClaimable #CodexRewardsContainer .MaterialsRewardsContainer #ClaimMaterialRewardsButton
{
	visibility: visible;
}

.ClaimingMaterials #CodexRewardsContainer .MaterialsRewardsContainer #ClaimMaterialRewardsButton
{
	visibility: collapse;
	opacity: 0;
}

#CodexRewardsContainer .MaterialsRewardsContainer .MaterialsClaimedLabel
{
	margin-top: 10px;
	font-weight: bold;
	padding: 6px 16px;
	border-radius: 3px;
	border: 1px solid #745f42a1;
	transition-property: opacity;
	transition-duration: 0.3s;
	opacity: 1;
}

.MaterialsClaimable #CodexRewardsContainer .MaterialsRewardsContainer .MaterialsClaimedLabel,.Locked #CodexRewardsContainer .MaterialsRewardsContainer .MaterialsClaimedLabel
{
	opacity: 0;
}

#CodexRewardsContainer .StickerRewardsContainer
{
	width: 260px;
	flow-children: down;
	padding: 8px 8px 16px;
	visibility: collapse;
}

.HasStickerReward #CodexRewardsContainer .StickerRewardsContainer
{
	visibility: visible;
}

#CodexRewardsContainer .StickerRewardsContainer .TitleEmblemContainer
{
	margin-bottom: 8px;
}

#CodexRewardsContainer .StickerRewardsContainer .StickerPreviewContainer
{
	width: 86px;
	height: width-percentage(100%);
	horizontal-align: center;
	margin-bottom: 12px;
	transition-property: transform, brightness, opacity;
	transition-duration: 0.15s, 0.15s, 0.15s;
}

#CodexRewardsContainer .StickerRewardsContainer .StickerPreviewContainer:hover
{
	transform: scale3d( 1.06, 1.06, 1 );
	brightness: 1.2;
}

.Locked #CodexRewardsContainer .StickerRewardsContainer .StickerPreviewContainer:hover
{
	transform: none;
	brightness: 1;
}

#CodexRewardsContainer .StickerRewardsContainer .StickerPreviewContainer .QuestionMark
{
	horizontal-align: center;
	vertical-align: center;
	visibility: collapse;
}

.Locked #CodexRewardsContainer .StickerRewardsContainer .StickerPreviewContainer .QuestionMark
{
	visibility: visible;
	font-size: 40px;
	font-weight: semi-bold;
}

#CodexRewardsContainer .StickerRewardsContainer .StickerPreviewContainer #StickerPreviewModel
{
	width: 100%;
	height: 100%;
	horizontal-align: center;
	vertical-align: center;
	overflow: noclip;
}

.Locked #CodexRewardsContainer .StickerRewardsContainer .StickerPreviewContainer #StickerPreviewModel
{
	brightness: 0.4;
	saturation: 0;
	opacity: 0.4;
}

#CodexRewardsContainer .StickerRewardsContainer #ClaimStickerButton
{
	horizontal-align: center;
	margin-top: 8px;
	visibility: collapse;
}

.Locked #CodexRewardsContainer .StickerRewardsContainer #ClaimStickerButton
{
	visibility: collapse;
}

.StickerClaimable #CodexRewardsContainer .StickerRewardsContainer #ClaimStickerButton
{
	visibility: visible;
}

.ClaimingSticker #CodexRewardsContainer .StickerRewardsContainer #ClaimStickerButton
{
	visibility: collapse;
	opacity: 0;
}

#CodexRewardsContainer .StickerRewardsContainer .StickerClaimedLabel
{
	margin-top: 10px;
	font-weight: bold;
	padding: 6px 16px;
	border-radius: 3px;
	border: 1px solid #745f42a1;
	transition-property: opacity;
	transition-duration: 0.3s;
	opacity: 1;
}

.StickerClaimable #CodexRewardsContainer .StickerRewardsContainer .StickerClaimedLabel,.Locked #CodexRewardsContainer .StickerRewardsContainer .StickerClaimedLabel
{
	opacity: 0;
}

#CodexRewardsContainer .StickerRewardsContainer .PremiumContainer
{
	horizontal-align: center;
	flow-children: right;
	margin-top: 8px;
	border-radius: 3px;
	padding: 3px 8px;
	padding-left: 3px;
	transition-property: background-color;
	transition-duration: 0.15s;
	visibility: collapse;
}

#CodexRewardsContainer .StickerRewardsContainer .PremiumContainer:hover
{
	background-color: rgba(133, 105, 63, 0.237);
}

#CodexRewardsContainer .StickerRewardsContainer .PremiumContainer:hover Label
{
	color: gradient( linear, 0% 0%, 0% 100%, from( #2e1c00 ), to( #563c13 ) );
}

#CodexRewardsContainer .StickerRewardsContainer .PremiumContainer Image
{
	width: 24px;
	img-shadow: 0px 2px 8px black;
	margin-right: 6px;
}

#CodexRewardsContainer .StickerRewardsContainer .PremiumContainer Label
{
	vertical-align: center;
	color: gradient( linear, 0% 0%, 0% 100%, from( #5a3703 ), to( #785723 ) );
	font-weight: bold;
	letter-spacing: 0.2px;
	text-decoration: underline;
	transition-property: color;
	transition-duration: 0.15s;
}

.OwnsPremium #CodexRewardsContainer .StickerRewardsContainer .PremiumContainer
{
	visibility: collapse;
}

.Locked #CodexRewardsContainer .StickerRewardsContainer .PremiumContainer
{
	visibility: collapse;
}

.ReplayDialogueButton
{
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 52px;
	transition-property: opacity, transform;
	transition-duration: 0.2s;
	transition-delay: 0.2s;
	opacity: 0;
	transform: translateY( -8px );
}

.ShowingHeroStats .ReplayDialogueButton
{
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

.ShowComicButton
{
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 52px;
	transition-property: opacity, transform;
	transition-duration: 0.2s;
	transition-delay: 0s;
	opacity: 1;
	transform: none;
}

.ShowingHeroStats .ShowComicButton
{
	opacity: 0;
	transform: translateY( 8px );
	transition-delay: 0.2s;
}

.PrevPageButtonContainer
{
	vertical-align: center;
	horizontal-align: center;
	margin-right: 1420px;
}

.NextPageButtonContainer
{
	vertical-align: center;
	horizontal-align: center;
	margin-left: 1420px;
}

.CodexHeroListPaginationButton
{
	vertical-align: center;
}

#VisualNovel
{
	vertical-align: bottom;
	horizontal-align: center;
}

.ProgressionMechanicsContainer
{
	horizontal-align: center;
	vertical-align: bottom;
	flow-children: right;
	border-top: 1px solid rgba(255, 229, 195, 0.02);
	padding: 6px 20px 12px;
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( #FFFFFF00 ), color-stop( 0.3, white ), color-stop( 0.7, white ), to( #FFFFFF00 ) );
	tooltip-position: top;
	transition-property: opacity;
	transition-duration: 0.15s;
}

.ProgressionMechanicsContainer .ProgressionMechanicGroup
{
	flow-children: right;
	margin: 0px 8px;
}

.ProgressionMechanicsContainer .ProgressionMechanicGroup Label
{
	vertical-align: center;
	color: TextColorLight&66;
}

.ProgressionMechanicsContainer .ProgressionMechanicGroup DOTAMonsterHunterHeroImage
{
	width: 40px;
	height: 40px;
	margin-right: 4px;
}

.ShowingHeroStats .ProgressionMechanicsContainer
{
	opacity: 0;
}

.MatchStatsTitle,.CodexHeroStatsContainer
{
	visibility: collapse;
}

.IsHero .MatchStatsTitle,.IsHero .CodexHeroStatsContainer
{
	visibility: visible;
}

@keyframes 'PageInRightAnimation'
{
	0%
	{
		opacity: 0;
		transform: translateX( 16px );
	}
	
	30%
	{
		opacity: 0;
		transform: translateX( 16px );
	}
	
	100%
	{
		opacity: 1;
		transform: none;
	}
	
}

@keyframes 'PageOutRightAnimation'
{
	0%
	{
		opacity: 1;
		transform: none;
	}
	
	30%
	{
		opacity: 0;
		transform: translateX( -8px );
	}
	
	100%
	{
		opacity: 0;
		transform: translateX( -8px );
	}
	
}

@keyframes 'PageInLeftAnimation'
{
	0%
	{
		opacity: 0;
		transform: translateX( -16px );
	}
	
	30%
	{
		opacity: 0;
		transform: translateX( -16px );
	}
	
	100%
	{
		opacity: 1;
		transform: none;
	}
	
}

@keyframes 'PageOutLeftAnimation'
{
	0%
	{
		opacity: 1;
		transform: none;
	}
	
	30%
	{
		opacity: 0;
		transform: translateX( 8px );
	}
	
	100%
	{
		opacity: 0;
		transform: translateX( 8px );
	}
	
}

.Debug
{
	color: #ff00ff;
}

#HeroPortraitListPages
{
	height: fit-children;
	horizontal-align: center;
	margin-top: 20px;
	opacity: 1;
	transform: none;
	transition-duration: 0.3s;
	transition-property: transform, opacity;
	transition-timing-function: cubic-bezier(0, 0.9, 0, 0.9);
	transition-delay: 0s;
}

.ShowingHeroStats #HeroPortraitListPages
{
	opacity: 0;
	transform: scale3d( 0.95, 0.95, 1 );
}

#SortToggleContainer
{
	vertical-align: bottom;
	flow-children: right;
	margin-bottom: 2px;
	transition-property: transform, opacity;
	transition-duration: 0.15s;
	transform: none;
	opacity: 1;
}

.ShowingHeroStats #SortToggleContainer
{
	transform: translateY( 5px );
	opacity: 0;
}

#SortToggleContainer .SortLabel
{
	vertical-align: center;
	color: TextColorLight;
}

#SortToggleContainer RadioButton
{
	vertical-align: center;
	margin-left: 8px;
}

#SortToggleContainer RadioButton Label
{
	font-size: 15px;
	vertical-align: center;
	color: TextColorLight;
	margin-left: 6px;
}

#SortToggleContainer RadioButton:selected Label
{
	color: white;
	text-shadow: 0px 0px 12px rgba(255, 210, 164, 0.336);
}

.CodexHeroList
{
	horizontal-align: center;
	flow-children: right-wrap;
	opacity: 0;
}

.CodexHeroList.ActivePage
{
	opacity: 1;
}

.CodexHeroList.PageInLeft
{
	animation-name: PageInLeftAnimation;
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
}

.CodexHeroList.PageInRight
{
	animation-name: PageInRightAnimation;
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
}

.CodexHeroList.PageOutLeft
{
	animation-name: PageOutLeftAnimation;
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
}

.CodexHeroList.PageOutRight
{
	animation-name: PageOutRightAnimation;
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
}

.CodexHeroListPaginationContainer
{
	horizontal-align: center;
	vertical-align: bottom;
	flow-children: right;
	margin-bottom: 72px;
}

.CodexHeroListPaginationContainer .CodexHeroListPaginationButton
{
	vertical-align: center;
	margin: 0px 12px;
}

.CodexHeroListPaginationContainer .CarouselDot
{
	vertical-align: center;
}

.CodexHeroListPaginationContainer .CarouselDot .RadioBox
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #090706 ), to( #1B1411 ) );
	border: 1px solid white;
	border-brush: gradient( linear, 0% 0%, 0% 100%, from( #453D2E ), to( #4d4232 ) );
	min-width: 16px;
	min-height: 16px;
	box-shadow: none;
	margin: 0px 4px;
}

.CodexHeroListPaginationContainer .CarouselDot:selected .RadioBox
{
	border: 0px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #D4A75E ), to( #432c10 ) );
	box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 0.078);
}

.ShowingHeroStats .CodexHeroListPaginationContainer
{
	visibility: collapse;
}

@keyframes 'GlowHeroPortrait'
{
	0%
	{
		opacity: 0.06;
	}
	
	100%
	{
		opacity: 1;
	}
	
}

@keyframes 'GlowNewHero'
{
	0%
	{
		opacity: 0.3;
		brightness: 1;
	}
	
	100%
	{
		opacity: 1;
		brightness: 1.5;
	}
	
}

@keyframes 'GlowNewBadge'
{
	0%
	{
		brightness: 1;
	}
	
	100%
	{
		brightness: 1.5;
		transform: translateY( -2px );
	}
	
}

.MonsterHeroPortrait
{
	width: 168px;
	height: 180px;
	background-color: rgba(180, 161, 124, 0);
	transition-property: background-color;
	transition-duration: 0.1s;
}

.MonsterHeroPortrait .NewGlow
{
	width: 100%;
	height: width-percentage(100%);
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from( #ffd38c89 ), color-stop( 0.5, #ffa02c11 ), to( #d6aa7500 ) );
	visibility: collapse;
}

.MonsterHeroPortrait .NewBadge
{
	horizontal-align: center;
	text-transform: uppercase;
	margin-bottom: 24px;
	border-radius: 2px;
	padding: 1px 5px 2px 8px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( GreenLighter ), to( GreenLight ) );
	vertical-align: bottom;
	border: 1px solid white;
	border-brush: WhiteGradientBorderStrong;
	box-shadow: 0px 0px 0px 2px black;
	color: white;
	text-shadow: 0px 2px 8px black;
	font-weight: semi-bold;
	visibility: collapse;
}

.MonsterHeroPortrait .ClaimableBadge
{
	color: TextColorLightest;
	horizontal-align: center;
	vertical-align: bottom;
	padding: 3px;
	width: 100%;
	margin: 0px 8px 24px;
	font-weight: semi-bold;
	text-align: center;
	color: white;
	text-shadow: 0px 2px 8px black;
	letter-spacing: 1px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( rgba(0, 0, 0, 0) ), color-stop( 0.3, rgba(177, 137, 72, 0.6) ), color-stop( 0.5, rgba(177, 137, 72, 0.9) ), color-stop( 0.7, rgba(177, 137, 72, 0.6) ), to( rgba(0, 0, 0, 0) ) );
	border-left: 0px;
	border-right: 0px;
	border: 1px solid rgba(255, 229, 194, 0.3);
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( rgba(255, 255, 255, 0) ), color-stop( 0.2, rgb(255, 255, 255) ), color-stop( 0.8, rgb(255, 255, 255) ), to( rgba(255, 255, 255, 0) ) );
	visibility: collapse;
}

.MonsterHeroPortrait.Claimable .ClaimableBadge
{
	visibility: visible;
}

.MonsterHeroPortrait .CodexIndexText
{
	horizontal-align: center;
	vertical-align: bottom;
	color: TextColorLight;
	opacity: 0.3;
	visibility: collapse;
}

.MonsterHeroPortrait.Hidden
{
	opacity: 0;
}

.DebugControls
{
	width: 100%;
	opacity: 0.5;
	flow-children: right-wrap;
	visibility: collapse;
}

.DebugControls TextButton
{
	min-width: 49%;
	border: 1px solid black;
	background-color: purple;
}

.DebugControls TextButton#Stat1
{
	width: 100%;
}

.DebugControls TextButton#Clear
{
	width: 100%;
	background-color: #944094;
}

.DebugControls TextButton Label
{
	horizontal-align: center;
	font-size: 12px;
}

.DebugControls TextButton:hover
{
	brightness: 2;
}

.DebugControls TextButton:active
{
	brightness: 0.3;
}

.ShowDebugControls .DebugControls
{
	visibility: visible;
}

#ToggleDebug
{
	border: 2px solid purple;
	horizontal-align: left;
	vertical-align: bottom;
}

.DebugButtons
{
	vertical-align: bottom;
	horizontal-align: left;
	margin: 12px;
}

.Page
{
	animation-timing-function: linear;
}

.TurningPageForwards1 .StickerPreviewContainer,.TurningPageForwards2 .StickerPreviewContainer,.TurningPageBackwards1 .StickerPreviewContainer,.TurningPageBackwards2 .StickerPreviewContainer
{
	opacity: 0;
	transition-duration: 0.15s;
	transition-delay: 0.2s;
}

.TurningPageForwards1 #OldRightPage
{
	animation-name: PageTurnRightToLeft1;
	animation-duration: pageTurnHalfTime;
}

.TurningPageForwards1 #LeftPage
{
	visibility: collapse;
}

.TurningPageForwards2 #LeftPage
{
	animation-name: PageTurnRightToLeft2;
	animation-duration: pageTurnHalfTime;
}

.TurningPageForwards2 #OldLeftPage
{
	animation-name: PageFadeOut;
	animation-duration: pageTurnHalfTime;
	animation-fill-mode: forwards;
}

.TurningPageForwards2 #OldRightPage
{
	visibility: collapse;
}

.TurningPageBackwards1 #OldLeftPage
{
	animation-name: PageTurnLeftToRight1;
	animation-duration: pageTurnHalfTime;
}

.TurningPageBackwards1 #RightPage
{
	visibility: collapse;
}

.TurningPageBackwards1 #LeftPage
{
	animation-name: PageFadeIn;
	animation-duration: pageTurnHalfTime;
	animation-fill-mode: forwards;
}

.TurningPageBackwards2 #RightPage
{
	animation-name: PageTurnLeftToRight2;
	animation-duration: pageTurnHalfTime;
}

.TurningPageBackwards2 #OldLeftPage
{
	visibility: collapse;
}

@keyframes 'PageTurnRightToLeft1'
{
	0%
	{
		transform: translateX( pageOffsetRight );
	}
	
	100%
	{
		transform: rotateY( -89deg) scaleX(0.5) translateX( pageOffsetRight );
	}
	
}

@keyframes 'PageTurnRightToLeft2'
{
	0%
	{
		transform: rotateY( 89deg ) scaleX(0.5) translateX( pageOffsetLeft );
	}
	
	100%
	{
		transform: translateX( pageOffsetLeft );
	}
	
}

@keyframes 'PageTurnLeftToRight1'
{
	0%
	{
		transform: translateX( pageOffsetLeft );
	}
	
	100%
	{
		transform: rotateY( 89deg) scaleX(0.5) translateX( pageOffsetLeft );
	}
	
}

@keyframes 'PageTurnLeftToRight2'
{
	0%
	{
		transform: rotateY( -89deg ) scaleX(0.5) translateX( pageOffsetRight );
	}
	
	100%
	{
		transform: translateX( pageOffsetRight );
	}
	
}

@keyframes 'PageFadeIn'
{
	0%
	{
		opacity: 0;
	}
	
	42%
	{
		opacity: 0;
	}
	
	100%
	{
		opacity: 1;
	}
	
}

@keyframes 'PageFadeOut'
{
	60%
	{
		opacity: 0;
	}
	
	100%
	{
		opacity: 0;
	}
	
}