<?xml version="1.0" encoding="utf-8"?>
<style title="Style By K&W Studio" description="By K&W Studio" user_selectable="1" base_version_id="2020970" export_version="2">
  <assets/>
  <templates>
    <template title="EWRporta_articles.less" type="public" addon_id="" version_id="2101" version_string="2.1.0.1"><![CDATA[.porta-article-pager { margin-top: -(@xf-elementSpacer); }
.porta-article-loader { display: none; text-align: center; }

.porta-article-item
{
	margin-bottom: @xf-elementSpacer;
	
	.porta-article-header
	{
		display: block;
		overflow: hidden;
		position: relative;
		
		.porta-header-image
		{
			background-position: center;
			background-size: cover;
			height: @xf-EWRporta_header_height;
		}
		
		.porta-header-medio
		{
			background-position: center;
			background-size: cover;
			height: @xf-EWRporta_medio_height;
		}
	
		.porta-header-text
		{
			position: absolute; bottom: 0; left: 0; right: 0;
			.xf-EWRporta_header_title;

			>span
			{
				position: absolute; bottom: 0; left: 0; right: 0;
				padding: 0 @xf-elementSpacer;
			}
		}

		.porta-header-play
		{
			position: absolute;
			top: 0; bottom: 20px; left: 0; right: 0;

			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.far
			{
				color: @xf-textColorAttention;
				font-size: 100px;
				text-shadow: 1px 1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, -1px -1px 0 #000000;
			}
		}
	}

	.porta-article-date
	{
		float: left;
		padding: @xf-paddingLarge 0;
		margin-left: @xf-EWRporta_dateblock_margin;

		.porta-date-block
		{
			.xf-messageUserBlock;
			width: 50px;
			padding: 10px;
			text-align: center;
			text-transform: uppercase;
			white-space: nowrap;

			b { display: block; font-size: 1.5em; }
		}
	}

	.message-inner { display: block; }
	.message-body .bbWrapper { display: inline; }
	.block-header { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.porta-masonry
{
	margin: 0 ~"calc(-@{xf-sidebarSpacer} / 2)";
	
	.porta-article-item
	{
		display: inline-block;
		width: ~"calc(100% / @xf-EWRporta_masonry_columns)";
		
		.porta-article-container
		{
			margin: 0 ~"calc(@xf-sidebarSpacer / 2)";
		}
	}
}

.porta-article-status
{
	display: none;
	
	.porta-article-ellipse
	{
		font-size: 20px;
		position: relative;
		width: 4em;
		height: 1em;
		margin: 10px auto;

		.loader-ellipse-dot
		{
			display: block;
			width: 1em;
			height: 1em;
			border-radius: 0.5em;
			background: @xf-textColor;
			position: absolute;
			animation-duration: 0.5s;
			animation-timing-function: ease;
			animation-iteration-count: infinite;
		}

		.loader-ellipse-dot:nth-child(1),
		.loader-ellipse-dot:nth-child(2) { left: 0; }
		.loader-ellipse-dot:nth-child(3) { left: 1.5em; }
		.loader-ellipse-dot:nth-child(4) { left: 3em; }

		@keyframes reveal { from { transform: scale(0.001); } to { transform: scale(1); } }
		@keyframes slide { to { transform: translateX(1.5em) } }

		.loader-ellipse-dot:nth-child(1) { animation-name: reveal; }
		.loader-ellipse-dot:nth-child(2),
		.loader-ellipse-dot:nth-child(3) { animation-name: slide; }
		.loader-ellipse-dot:nth-child(4) { animation-name: reveal; animation-direction: reverse; }
	}
}

@media (max-width: @xf-responsiveWide)

{
	.porta-masonry
	{
		.porta-article-item
		{
			width: ~"calc(100% / @xf-EWRporta_masonry_wide)";
		}
	}
}

@media (max-width: @xf-responsiveMedium)
{
	.porta-masonry
	{
		margin: 0 (-@xf-pageEdgeSpacer / 2);

		.porta-article-item
		{
			width: ~"calc(100% / @xf-EWRporta_masonry_medium)";
			
			.porta-article-date
			{
				margin-left: -10px;
				
				.porta-date-block
				{
					width: auto;
					padding: 10px 5px;
					transform: rotate(180deg);
					writing-mode: vertical-rl;
					
					b { display: inline; font-size: initial; }
				}
			}
		}
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.porta-masonry
	{
		.porta-article-item
		{
			display: block;
			width: 100%;

			.porta-article-container
			{
				margin: 0;
			}
			
			.porta-article-date
			{
				display: none;
			}
		}
	}
}]]></template>
    <template title="MAIL_CONTAINER" type="email" addon_id="XF" version_id="2020032" version_string="2.2.0 Beta 2"><![CDATA[<!DOCTYPE html>
<html lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}" style="font-size: 62.5%;">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<base href="{$xf.options.boardUrl}/">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="format-detection" content="telephone=no">
	<title>{$subject}</title>
</head>
<body dir="{$xf.language.text_direction}" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="bodyTable" border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
	<td align="center" valign="top" id="bodyTableContainer">
		<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="table-layout: fixed;" dir="{$xf.language.text_direction}">
		<tr>
			<td class="header" align="center" valign="top">
				<a href="{{ link('canonical:index') }}">{$xf.options.boardTitle}</a>
			</td>
		</tr>
		<tr>
			<td class="content" align="{{ $xf.isRtl ? 'right' : 'left' }}" valign="top">

{$html|raw}

			</td>
		</tr>
		<tr>
			<td class="footer" align="center" valign="top">
				<div>{{ phrase('visit_board_html', {'board_url': link('canonical:index'), 'board_title': $xf.options.boardTitle}) }}</div>

				<xf:if contentcheck="true">
					<div class="footerExtra"><xf:contentcheck>{{ phrase('email_footer_html') }}</xf:contentcheck></div>
				</xf:if>
			</td>
		</tr>
		</table>
	</td>
</tr>
</table>

</body>
</html>

<mail:text>
{$text}

-----------------------------

{{ phrase('visit_board_text', {'board_title': $xf.options.boardTitle, 'board_url': link('canonical:index')}) }}

{{ phrase('email_footer_text') }}
</mail:text>]]></template>
    <template title="PAGE_CONTAINER" type="public" addon_id="XF" version_id="2020270" version_string="2.2.2"><![CDATA[<!DOCTYPE html>

<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
<xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
<xf:set var="$title"><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" /></xf:set>
<xf:set var="$description"><xf:description /></xf:set>

<xf:set var="$uix_htmlClasses"></xf:set>

<xf:if is="property('uix_pageWidthToggle') != 'disabled'">
	<xf:comment> UI.X width toggle class</xf:comment>
	<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_page--{{$uix_pageWidth}}</xf:set>
</xf:if>

<xf:if is="property('uix_navigationType') == 'sidebarNav'">
	<xf:comment> UI.X sidebar navigation toggle class</xf:comment>
	<xf:if is="!$uix_sidebarNavCollapsed">
		<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} sidebarNav--active</xf:set>
	</xf:if>
</xf:if>

	<meta name="apple-mobile-web-app-title" content="{{ $xf.options.boardShortTitle ?: $xf.options.boardTitle }}">
	<xf:if is="property('publicIconUrl')">
		<link rel="apple-touch-icon" href="{{ base_url(property('publicIconUrl', true)) }}">
	<xf:elseif is="property('publicMetadataLogoUrl')" />
		<link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl')) }}" />
</xf:if>

<xf:if is="property('uix_collapsibleSidebar')">
	<xf:comment> UI.X sidebar toggle class</xf:comment>
	<xf:if is="$uix_sidebarCollapsed">
		<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_sidebarCollapsed</xf:set>
	</xf:if>
</xf:if>

<xf:if is="{$uix_showWelcomeSection}">
	<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_hasWelcomeSection</xf:set>
</xf:if>

<xf:comment>SectionLinks Breakpoints</xf:comment>
<xf:set var="$uix_subNavContentStatic" value="0" />

<xf:comment>--------- COMPONENT MARKUP MACROS ---------
	Markup for components can/should be added here in an XF:set if
	we want the components to have variably set locations
</xf:comment>

<xf:comment> --- Sidebar trigger --- </xf:comment>

<xf:set var="$uix_sidebarTrigger__content">
	<xf:if is="{$sidebar}">
		<xf:if is="property('uix_collapsibleSidebar') && {$uix_canCollapseSidebar}">
			<a class="uix_sidebarTrigger__component uix_sidebarTrigger {{ (property('uix_sidebarTriggerPosition') == 'sectionLinks') ? 'p-navgroup-link' : 'button'}}" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}" rel="nofollow">
				<xf:fa icon="fa-ellipsis-v" class="mdi mdi-dots-vertical" />
				<span class="uix_sidebarTrigger--phrase">{{ phrase('th_sidebar_uix') }}</span>
			</a>
		</xf:if>
		<xf:if is="property('uix_sidebarMobileCanvas')">
			<a class="uix_sidebarCanvasTrigger uix_sidebarTrigger__component p-navgroup-link" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}">
				<xf:fa icon="fa-ellipsis-v" class="mdi mdi-dots-vertical" />
				<span class="uix_sidebarTrigger--phrase">{{ phrase('th_sidebar_uix') }}</span>
			</a>
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_sidebarTrigger__component" arg-location="" arg-content="">
	<xf:if is="({$location} == property('uix_sidebarTriggerPosition')) || ({$location} == 'navigation')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Search bar --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:set var="$uix_search__component">
		<xf:if is="$xf.visitor.canSearch()">
			<div class="uix_searchBar">
				<div class="uix_searchBarInner">
					<form action="{{ link('search/search') }}" method="post" class="uix_searchForm" data-xf-init="quick-search">
						<a class="uix_search--close">
							<xf:fa icon="fa-window-close" />
						</a>
						<xf:textbox autocomplete="off" class="js-uix_syncValue uix_searchInput uix_searchDropdown__trigger" data-uixsync="search" name="keywords" placeholder="{{ phrase('search...') }}" aria-label="{{ phrase('search') }}" data-menu-autofocus="true" />
						<a href="{{ link('search') }}"
						   class="uix_search--settings u-ripple"
						   data-xf-key="{{ phrase('shortcut.search_menu')|for_attr }}"
						   aria-label="{{ phrase('search')|for_attr }}"
						   aria-expanded="false"
						   aria-haspopup="true"
						   title="{{ phrase('search')|for_attr }}">
							<xf:fa icon="fa-cog" />
						</a>
						<span class="<xf:if is="property('uix_searchButton')">uix_search--submit</xf:if> uix_searchIcon">
							<xf:fa icon="fa-search" />
						</span>
						<xf:csrf />
					</form>
				</div>

				<xf:if is="property('uix_searchIconBehavior') != 'dropdown'">
					<a class="uix_searchIconTrigger p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search u-ripple"
					   aria-label="{{ phrase('search') }}"
					   aria-expanded="false"
					   aria-haspopup="true"
					   title="{{ phrase('search') }}">
						<i aria-hidden="true"></i>
					</a>
				</xf:if>

				<xf:if is="property('uix_searchIconBehavior') != 'expand'">
					<a href="{{ link('search') }}"
					   class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search u-ripple js-uix_minimalSearch__target"
					   data-xf-click="menu"
					   aria-label="{{ phrase('search') }}"
					   aria-expanded="false"
					   aria-haspopup="true"
					   title="{{ phrase('search') }}">
						<i aria-hidden="true"></i>
					</a>
				</xf:if>

				<div class="menu menu--structural menu--wide" data-menu="menu" aria-hidden="true">
					<form action="{{ link('search/search') }}" method="post"
						  class="menu-content"
						  data-xf-init="quick-search">
						<h3 class="menu-header">{{ phrase('search') }}</h3>
						<!--[XF:search_menu:above_input]-->
						<div class="menu-row">
							<xf:if is="$searchConstraints">
								<div class="inputGroup inputGroup--joined">
									<xf:textbox name="keywords"
												class="js-uix_syncValue"
												data-uixsync="search"
												placeholder="{{ phrase('search...') }}"
												aria-label="{{ phrase('search') }}"
												data-menu-autofocus="true" />
									<xf:select name="constraints"
											   class="js-quickSearch-constraint"
											   aria-label="{{ phrase('search_within') }}">
										<xf:option value="">{{ phrase('everywhere') }}</xf:option>
										<xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint">
											<xf:option value="{$constraint|json}">{$constraintName}</xf:option>
										</xf:foreach>
									</xf:select>
								</div>
								<xf:else />
								<xf:textbox name="keywords"
											class="js-uix_syncValue"
											data-uixsync="search"
											placeholder="{{ phrase('search...') }}"
											aria-label="{{ phrase('search') }}"
											data-menu-autofocus="true" />
							</xf:if>
						</div>

						<!--[XF:search_menu:above_title_only]-->
						<div class="menu-row">
							<xf:checkbox standalone="true">
								<xf:option name="c[title_only]">
									<xf:label>
										{{ phrase('search_titles_only') }}

										<xf:if is="$xf.options.enableTagging">
											<span tabindex="0" role="button"
												  data-xf-init="tooltip" data-trigger="hover focus click" title="{{ phrase('tags_will_also_be_searched') }}">

												<xf:fa icon="far fa-question-circle" class="u-muted u-smaller" />
											</span>
										</xf:if>
									</xf:label>
								</xf:option>
							</xf:checkbox>
						</div>
						<!--[XF:search_menu:above_member]-->
						<div class="menu-row">
							<div class="inputGroup">
								<span class="inputGroup-text" id="ctrl_search_menu_by_member">{{ phrase('by:') }}</span>
								<input type="text" class="input" name="c[users]" data-xf-init="auto-complete" placeholder="{{ phrase('member')|for_attr }}" aria-labelledby="ctrl_search_menu_by_member" />
							</div>
						</div>
						<div class="menu-footer">
							<span class="menu-footer-controls">
								<xf:button type="submit" class="button--primary" icon="search" />
								<xf:button href="{{ link('search') }}">{{ phrase('advanced_search...') }}</xf:button>
							</span>
						</div>

						<xf:csrf />
					</form>
				</div>


				<div class="menu menu--structural menu--wide uix_searchDropdown__menu" aria-hidden="true">
					<form action="{{ link('search/search') }}" method="post"
						  class="menu-content"
						  data-xf-init="quick-search">
						<!--[XF:search_menu:above_input]-->
						<xf:if is="$searchConstraints">
							<div class="menu-row">

								<div class="inputGroup">
									<input name="keywords"
										   class="js-uix_syncValue"
										   data-uixsync="search"
										   placeholder="{{ phrase('search...') }}"
										   aria-label="{{ phrase('search') }}"
										   type="hidden" />
									<xf:select name="constraints"
											   class="js-quickSearch-constraint"
											   aria-label="{{ phrase('search_within') }}">
										<xf:option value="">{{ phrase('everywhere') }}</xf:option>
										<xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint">
											<xf:option value="{$constraint|json}">{$constraintName}</xf:option>
										</xf:foreach>
									</xf:select>
								</div>
							</div>
							<xf:else />
							<input name="keywords"
								   class="js-uix_syncValue"
								   data-uixsync="search"
								   placeholder="{{ phrase('search...') }}"
								   aria-label="{{ phrase('search') }}"
								   type="hidden" />
						</xf:if>

						<!--[XF:search_menu:above_title_only]-->
						<div class="menu-row">
							<xf:checkbox standalone="true">
								<xf:option name="c[title_only]">
									<xf:label>
										{{ phrase('search_titles_only') }}

										<xf:if is="$xf.options.enableTagging">
											<span tabindex="0" role="button"
												  data-xf-init="tooltip" data-trigger="hover focus click" title="{{ phrase('tags_will_also_be_searched') }}">

												<xf:fa icon="far fa-question-circle" class="u-muted u-smaller" />
											</span>
										</xf:if>
									</xf:label>
								</xf:option>
							</xf:checkbox>
						</div>
						<!--[XF:search_menu:above_member]-->
						<div class="menu-row">
							<div class="inputGroup">
								<span class="inputGroup-text">{{ phrase('by:') }}</span>
								<input class="input" name="c[users]" data-xf-init="auto-complete" placeholder="{{ phrase('member') }}" />
							</div>
						</div>
						<div class="menu-footer">
							<span class="menu-footer-controls">
								<xf:button type="submit" class="button--primary" icon="search" />
								<xf:button href="{{ link('search') }}" rel="nofollow">{{ phrase('th_advanced_uix...') }}</xf:button>
							</span>
						</div>

						<xf:csrf />
					</form>
				</div>
			</div>
		</xf:if>
	</xf:set>
</xf:if>

<xf:macro name="uix_search__component" arg-content="!" arg-location="!">
	<xf:if is="(property('uix_searchPosition') == {$location}) || ({$location} == 'navigation')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- whats new --- </xf:comment>

<xf:if is="!property('uix_removeWhatsNewButtons')">
<xf:set var="$uix_whatsNew__component">
	<a href="{{ link('whats-new') }}"
	   class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
	   title="{{ phrase('whats_new')|for_attr }}">
		<i aria-hidden="true"></i>
		<span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
	</a>
</xf:set>
</xf:if>

<xf:macro name="uix_whatsNew__component" arg-content="!" arg-location="!">
	<xf:if is="({$xf.visitor.user_id} && property('uix_userTabsPosition') == {$location}) || ({$location} == 'navigation')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- login tabs --- </xf:comment>

<xf:set var="$uix_loginTabs__component">
	<xf:if is="{$template} != 'login'">
		<xf:if is="property('uix_loginStyle') == 'dropdown'">
			<a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn" data-xf-click="menu">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
			<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true" data-href="{{ link('login') }}"></div>
		<xf:elseif is="property('uix_loginStyle') == 'modal'" />
			<a href="{{ link('login') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" data-xf-click="overlay" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
		<xf:elseif is="property('uix_loginStyle') == 'link'" />
			<a href="{{ link('login') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
		<xf:elseif is="property('uix_loginStyle') == 'slidingPanel'" />
			<a href="{{ link('login') }}" id="uix_loginPanel--trigger" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" rel="nofollow" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
		</xf:if>
	</xf:if>
	<xf:if is="{$template} != 'register_form'">
		<xf:if is="property('uix_loginStyle') != 'link'">
			<a href="{{ link('register') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--register" data-xf-click="overlay" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
			</a>
		<xf:else />
			<a href="{{ link('register') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--register" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
			</a>
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_loginTabs__component" arg-content="!" arg-location="!">
	<xf:if is="property('uix_loginTriggerPosition') == {$location} || ({$location} == 'navigation')">
		<xf:if is="{$location} == 'tablinks'">
		</xf:if>
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- user tabs --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:set var="$uix_userTabs__component">
		<xf:if is="$xf.visitor.user_state == 'rejected' OR $xf.visitor.user_state == 'disabled'">
			<a href="{{ link('account') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--user">
				<xf:avatar user="$xf.visitor" size="xxs" href="" title="" />
				<span class="p-navgroup-linkText">{$xf.visitor.username}</span>
			</a>

			<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="p-navgroup-link">
				<span class="p-navgroup-linkText">{{ phrase('log_out') }}</span>
			</a>
			<xf:else />
			<a href="{{ link('account') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--user"
			   data-xf-click="menu"
			   data-xf-key="{{ phrase('shortcut.visitor_menu')|for_attr }}"
			   data-menu-pos-ref="< .p-navgroup"
			   title="{$xf.visitor.username}"
			   aria-expanded="false"
			   aria-haspopup="true">
				<xf:avatar user="$xf.visitor" size="xxs" href="" title="" />
				<span class="p-navgroup-linkText">{$xf.visitor.username}</span>
			</a>
			<div class="menu menu--structural menu--wide menu--account" data-menu="menu" aria-hidden="true"
				 data-href="{{ link('account/visitor-menu') }}"
				 data-load-target=".js-visitorMenuBody">
				<div class="menu-content js-visitorMenuBody">
					<div class="menu-row">
						{{ phrase('loading...') }}
					</div>
				</div>
			</div>

			<a href="{{ link('conversations') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}"
			   data-badge="{$xf.visitor.conversations_unread|number}"
			   data-xf-click="menu"
			   data-xf-key="{{ phrase('shortcut.conversations_menu')|for_attr }}"
			   data-menu-pos-ref="< .p-navgroup"
			   title="{{ phrase('conversations')|for_attr }}"
			   aria-label="{{ phrase('inbox')|for_attr }}"
			   aria-expanded="false"
			   aria-haspopup="true">
				<i aria-hidden="true"></i>
				<span class="p-navgroup-linkText">{{ phrase('nav_inbox') }}</span>
			</a>
			<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
				 data-href="{{ link('conversations/popup') }}"
				 data-nocache="true"
				 data-load-target=".js-convMenuBody">
				<div class="menu-content">
					<h3 class="menu-header">{{ phrase('conversations') }}</h3>
					<div class="js-convMenuBody">
						<div class="menu-row">{{ phrase('loading...') }}</div>
					</div>
					<div class="menu-footer menu-footer--split">
						<div class="menu-footer-main">
							<ul class="listInline listInline--bullet">
								<li><a href="{{ link('conversations') }}">{{ phrase('show_all') }}</a></li>
								<xf:if is="$xf.visitor.canStartConversation()">
									<li><a href="{{ link('conversations/add') }}">{{ phrase('start_new_conversation') }}</a></li>
								</xf:if>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<a href="{{ link('account/alerts') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--alerts js-badge--alerts badgeContainer{{ $xf.visitor.alerts_unviewed ? ' badgeContainer--highlighted' : '' }}"
			   data-badge="{$xf.visitor.alerts_unviewed|number}"
			   data-xf-click="menu"
			   data-xf-key="{{ phrase('shortcut.alerts_menu')|for_attr }}"
			   data-menu-pos-ref="< .p-navgroup"
			   title="{{ phrase('alerts')|for_attr }}"
			   aria-label="{{ phrase('alerts')|for_attr }}"
			   aria-expanded="false"
			   aria-haspopup="true">
				<i aria-hidden="true"></i>
				<span class="p-navgroup-linkText">{{ phrase('nav_alerts') }}</span>
			</a>
			<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
				 data-href="{{ link('account/alerts-popup') }}"
				 data-nocache="true"
				 data-load-target=".js-alertsMenuBody">
				<div class="menu-content">
					<h3 class="menu-header">{{ phrase('alerts') }}</h3>
					<div class="js-alertsMenuBody">
						<div class="menu-row">{{ phrase('loading...') }}</div>
					</div>
					<div class="menu-footer menu-footer--split">
						<div class="menu-footer-main">
							<ul class="listInline listInline--bullet">
								<li><a href="{{ link('account/alerts') }}">{{ phrase('show_all') }}</a></li>
								<li><a href="{{ link('account/alerts/mark-read') }}" class="js-alertsMarkRead">{{ phrase('mark_read') }}</a></li>
								<li><a href="{{ link('account/preferences') }}">{{ phrase('preferences') }}</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</xf:if>
	</xf:set>
</xf:if>

<xf:macro name="uix_userTabs__component" arg-content="!" arg-location="!">
	<xf:if is="property('uix_userTabsPosition') == {$location} || ({$location} == 'navigation')">
		<xf:if is="{$location} == 'tablinks'">
		</xf:if>
		{$content}
	</xf:if>
</xf:macro>

<xf:set var="$uix_socialMediaContent">
	<xf:include template="uix_socialMedia" />
</xf:set>

<xf:macro name="uix_socialMedia__component" arg-content="" arg-location="">
	<xf:if is="(property('uix_socialMediaPosition') == {$location}) || ({$location} == 'copyright')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Visitor tabs --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="" arg-searchContent="!" arg-location="!" arg-whatsNewContent="!" arg-visitorContent="!" arg-loginTabsContent="!">
		<xf:if contentcheck="true">
			<xf:contentcheck>
				<xf:if contentcheck="true">
					<div class="p-navgroup p-account {{ $xf.visitor.user_id ? 'p-navgroup--member' : 'p-navgroup--guest' }}">
						<xf:contentcheck>
							<xf:if is="$xf.visitor.user_id">
								<xf:macro name="uix_userTabs__component" arg-content="{$visitorContent}" arg-location="{$location}" />
								<xf:else />
								<xf:macro name="uix_loginTabs__component" arg-content="{$loginTabsContent}" arg-location="{$location}" />
							</xf:if>
						</xf:contentcheck>
					</div>
				</xf:if>
				<xf:if contentcheck="true">
					<div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}">
						<xf:contentcheck>
							<xf:macro name="uix_whatsNew__component" arg-content="{$whatsNewContent}" arg-location="{$location}" />
							<xf:macro name="uix_search__component" arg-content="{$searchContent}" arg-location="{$location}" />
						</xf:contentcheck>
					</div>
				</xf:if>
				<xf:macro name="uix_socialMedia__component" arg-content="{$socialMediaContent}" arg-location="{$location}" />
			</xf:contentcheck>
		</xf:if>
	</xf:macro>
</xf:if>

<xf:comment> --- Titlebar --- </xf:comment>

<xf:set var="$uix_titlebar__component">
	<xf:if is="!{$uix_hidePageTitle} || ( {$pageAction} && !property('uix_pageActionBreadcrumb') && (!property('uix_removePageAction') || {{ !in_array({$template}, ['forum_list', 'forum_new_posts', 'thtopics_forum_newest_posts', 'thtrending_trending_view', 'thtopics_forum_latest_threads', 'thtopics_topic_list']) }} )
			   )">
		<xf:if is="$headerHtml is not empty">
			<div class="p-body-header">
				<div class="pageContent">
					{$headerHtml|raw}
				</div>
			</div>
			<xf:elseif contentcheck="true" />
			<div class="p-body-header">
				<div class="pageContent">
					<xf:contentcheck>
						<xf:if contentcheck="true">
							<div class="uix_headerInner">
								<xf:contentcheck>
									<xf:if contentcheck="true">
										<div class="p-title {{ $noH1 ? 'p-title--noH1' : '' }}">
											<xf:contentcheck>
												<xf:if is="!$noH1">
													<h1 class="p-title-value">{$h1}</h1>
												</xf:if>
											</xf:contentcheck>
										</div>
									</xf:if>

									<xf:if is="$description is not empty">
										<div class="p-description">{$description}</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</xf:if>
						<xf:if contentcheck="true">
							<div class="uix_headerInner--opposite">
								<xf:contentcheck>
									<xf:if is="!property('uix_pageActionBreadcrumb') && (!property('uix_removePageAction') || ({$template} != 'forum_list') )">
										<xf:if contentcheck="true">
											<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
										</xf:if>
									</xf:if>
									<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="titlebar" />
								</xf:contentcheck>
							</div>
						</xf:if>
					</xf:contentcheck>
				</div>
			</div>
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_titlebar__component" arg-location="!" arg-content="!">
	<xf:if is="property('uix_titlebarLocation') === {$location}">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Sidebar --- </xf:comment>

<xf:set var="$uix_sidebar__component">
	<xf:if is="$sidebar">
		<div uix_component="MainSidebar" class="p-body-sidebar">
			<div data-ocm-class="offCanvasMenu-backdrop"></div>
			<div class="uix_sidebarInner {{ (property('uix_stickySidebar') == 'top') ? ' uix_stickyBodyElement' : '' }}">
				<div class="uix_sidebar--scroller">
					<xf:ad position="container_sidebar_above" />
					<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="sidebar" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
					<xf:foreach loop="$sidebar" value="$sidebarHtml">
						{$sidebarHtml}
					</xf:foreach>
					<xf:ad position="container_sidebar_below" />
				</div>
			</div>
		</div>
	</xf:if>
</xf:set>

<xf:macro name="uix_sidebar__component" arg-location="!" arg-content="!">
	<xf:if is="property('uix_sidebarLocation') === {$location}">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Logo --- </xf:comment>

<xf:set var="$srcset">{{ property('publicLogoUrl2x') ? base_url(property('publicLogoUrl2x')) . ' 2x' : '' }}</xf:set>

<xf:set var="$uix_logo__component">
	<div class="p-header-logo p-header-logo--image">
		<a class="uix_logo" href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
			<xf:if is="property('publicLogoUrl') || property('publicLogoUrl2x')">
				<img src="{{ base_url(property('publicLogoUrl')) }}" srcset="{$srcset}" alt="{$xf.options.boardTitle}"
					 width="{{ property('publicLogoWidth') ?: '' }}" height="{{ property('publicLogoHeight') ?: '' }}" />
				<xf:else />
				<div class="uix_logo--text"><xf:if is="{{ property('uix_logoIcon') }}"><i class="{{ property('uix_logoIcon') }} uix_logoIcon"></i></xf:if>{{ property('uix_logoText') }}</div>
			</xf:if>
		</a>
		<xf:if is="property('uix_logoSmall')">
			<a class="uix_logoSmall" href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
				<img src="{{ base_url(property('uix_logoSmall')) }}"
					 alt="{$xf.options.boardTitle}"
					 />
			</a>
		</xf:if>
	</div>
</xf:set>

<xf:macro name="uix_logo__component" arg-content="!">
	{$content}
</xf:macro>

<xf:comment> --- staff bar --- </xf:comment>

<xf:set var="$uix_staffbar__component">
	<xf:if contentcheck="true">
		<div class="p-staffBar <xf:if is="{{ property('uix_stickyStaffBar') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-xf-init="{{ property('uix_stickyStaffBar') ? 'sticky-header' : ''}}">
			<div class="pageContent">
				<xf:contentcheck>
					<xf:macro name="uix_socialMedia__component" arg-content="{$uix_socialMediaContent}" arg-location="staffBarLeft" />
					<xf:if contentcheck="true">
						<xf:comment> --- add primary side staff bar content here ---</xf:comment>
						<xf:set var="$uix_alwaysStaffBar" value="1" />
						<div class="p-staffBar-inner hScroller" data-xf-init="h-scroller">
							<div class="hScroller-scroll">
								<xf:contentcheck>
									<xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
										<a href="{{ link('approval-queue') }}" class="p-staffBar-link badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}">
											{{ phrase('approval_queue') }}
										</a>
									</xf:if>

									<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total">
										<a href="{{ link('reports') }}"
										   class="p-staffBar-link badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}"
										   data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}"
										   title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:')|for_attr . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
									</xf:if>

									<xf:if contentcheck="true">
										<a class="p-staffBar-link menuTrigger" data-xf-key="alt+m" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('moderator') }}</a>
										<div class="menu" data-menu="menu" aria-hidden="true">
											<div class="menu-content">
												<h4 class="menu-header">{{ phrase('moderator_tools') }}</h4>
												<xf:contentcheck>
													<!--[XF:mod_tools_menu:top]-->
													<xf:if is="$xf.visitor.is_moderator">
														<a href="{{ link('approval-queue') }}" class="menu-linkRow">{{ phrase('approval_queue') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
														<a href="{{ link('reports') }}" class="menu-linkRow" title="{{ $xf.session.reportCounts.lastBuilt ? 'Last report update: ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
													</xf:if>
													<!--[XF:mod_tools_menu:bottom]-->
												</xf:contentcheck>
											</div>
										</div>
									</xf:if>

									<xf:if is="$xf.visitor.is_admin">
										<a href="{{ base_url('admin.php') }}" class="p-staffBar-link" target="_blank">{{ phrase('admin') }}</a>
									</xf:if>

									<xf:if contentcheck="true">
										<a href="{{ base_url('admin.php') }}" target="_blank" class="p-staffBar-link menuTrigger uix_adminTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">
											<xf:if is="$xf.visitor.is_admin">
												{{ phrase('admin') }}
												<xf:else />
												{{ phrase('moderator') }}
											</xf:if>
										</a>
										<div class="menu" data-menu="menu" aria-hidden="true">
											<div class="menu-content">
												<h4 class="menu-header">{{ phrase('moderator_tools') }}</h4>
												<xf:contentcheck>
													<!--[XF:mod_tools_menu:top]-->
													<xf:if is="$xf.visitor.is_admin">
														<a href="{{ base_url('admin.php') }}" target="_blank" class="menu-linkRow">{{ phrase('admin') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator">
														<a href="{{ link('approval-queue') }}" class="menu-linkRow">{{ phrase('approval_queue') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
														<a href="{{ link('reports') }}" class="menu-linkRow" title="{{ $xf.session.reportCounts.lastBuilt ? 'Last report update: ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
														<a href="{{ link('approval-queue') }}" class="menu-linkRow badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}">
															{{ phrase('approval_queue') }}
														</a>
													</xf:if>

													<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total">
														<a href="{{ link('reports') }}"
														   class="menu-linkRow badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}"
														   data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}"
														   title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update') . date_time($xf.session.reportCounts.lastBuilt) : '' }}">
															{{ phrase('reports') }}
														</a>
													</xf:if>
													<!--[XF:mod_tools_menu:bottom]-->
												</xf:contentcheck>
											</div>
										</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</div>
					</xf:if>

					<xf:if contentcheck="true">
						<div class="p-nav-opposite">
							<xf:if is="property('uix_staffBarBreakpoint') != '100%'">
								<xf:set var="$uix_responsiveStaffBar" value="1" />
								<xf:else />
								<xf:set var="$uix_alwaysStaffBar" value="1" />
							</xf:if>
							<xf:contentcheck>
								<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="staffBar" />
							</xf:contentcheck>
						</div>
					</xf:if>

				</xf:contentcheck>
			</div>
		</div>
	</xf:if>
</xf:set>

<xf:if is="!{$uix_alwaysStaffBar} && {$uix_responsiveStaffBar}">
	<xf:set var="$uix_htmlClasses">{$uix_htmlClasses} uix_responsiveStaffBar</xf:set>
</xf:if>

<xf:macro name="uix_staffbar__component" arg-content="!">
	{$content}
</xf:macro>

<xf:comment> --- section links --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:set var="$subNavHtml">
		<xf:if contentcheck="true">
			<div class="p-sectionLinks">
				<div class="pageContent">
					<xf:contentcheck>
						<xf:if is="property('uix_viewportWidthRemoveSubNav') != '100%'">
							<xf:if is="$selectedNavChildren is not empty">
								<xf:set var="$uix_subNavContentStatic" value="1" />
								<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_hasSectionLinks</xf:set>
								<div class="p-sectionLinks-inner hScroller" data-xf-init="h-scroller">
									<div class="hScroller-scroll">
										<ul class="p-sectionLinks-list">
											<xf:foreach loop="$selectedNavChildren" key="$navId" value="$navEntry" i="$i">
												<li>
													<xf:macro name="nav_entry" arg-navId="{$navId}" arg-nav="{$navEntry}" arg-shortcut="alt+{$i}" />
												</li>
											</xf:foreach>
										</ul>
									</div>
								</div>
							</xf:if>
							<xf:if contentcheck="true">
								<div class="p-nav-opposite">
									<xf:contentcheck>
										<xf:if contentcheck="true">
											<xf:set var="$uix_subNavContentStatic" value="1" />
											<xf:contentcheck>
												<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="tablinks" />
											</xf:contentcheck>
										</xf:if>
										<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="sectionLinks" />
									</xf:contentcheck>
								</div>
							</xf:if>
						</xf:if>
					</xf:contentcheck>
				</div>
			</div>
			<xf:elseif is="{$selectedNavEntry}" />
			<div class="p-sectionLinks p-sectionLinks--empty"></div>
		</xf:if>
	</xf:set>
</xf:if>

<xf:comment> --- UIX sidebar navigation --- </xf:comment>

<xf:set var="$uix_sidebarNav__component">
	<div class="uix_sidebarNav">
		<div class="uix_sidebarNav__inner {{ property('uix_stickySidenav') ? 'uix_stickyBodyElement' : '' }}">
			<div class="uix_sidebar--scroller">
				<xf:if contentcheck="true">
					<ul class="uix_sidebarNavList js-offCanvasNavSource">
						<xf:contentcheck>
							<xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
								<li class="uix_sidebarNavList__listItem">
									<xf:macro name="nav_entry"
											  arg-sidebarNav="1"
											  arg-navId="{$navSection}"
											  arg-nav="{$navEntry}"
											  arg-selected="{{ $navSection == $pageSection }}"
											  arg-shortcut="{$i}"/>
								</li>
							</xf:foreach>
						</xf:contentcheck>
					</ul>
				</xf:if>
				<xf:if is="$xf.visitor.user_id">
					<ul class="uix_sidebarNavList">
						<li><div class="p-navEl {{$uix_myAccountLinks == 'profile' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="profile" href="{{ link('members', $xf.visitor) }}" class="p-navEl-link">{{ phrase('th_profile_uix') }}</a></div></div></li>
						<li><div class="p-navEl {{$uix_myAccountLinks == 'alerts' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="alerts" href="{{ link('account/alerts') }}" class="p-navEl-link">{{ phrase('alerts')}}</a></div></div></li>
						<li><div class="p-navEl {{$uix_myAccountLinks == 'settings' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="settings" href="{{ link('account/preferences') }}" class="p-navEl-link">{{ phrase('settings')}}</a></div></div></li>
					</ul>
				</xf:if>
				<xf:if contentcheck="true">
					<div class="uix_sidebarNav__inner__widgets">
						<xf:contentcheck>
							{$uix_sidebarNavWidgets|raw}
						</xf:contentcheck>
					</div>
				</xf:if>
			</div>
		</div>
	</div>
</xf:set>

<xf:macro name="uix_sidebarNav__component" arg-content="!">
	{$content}
</xf:macro>

<xf:comment> --- UIX main tab component --- </xf:comment>

<xf:set var="$uix_mainTabsOffset">
	[
		{
			"breakpoint": "0",
			"offset": "0"
		}
	<xf:if is="{$uix_responsiveStaffBar} && !{$uix_alwaysStaffBar}">
	,{
		"breakpoint": "{{ property('uix_staffBarBreakpoint')|escape('json') }}",
		"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
	}	
	</xf:if>
	<xf:if is="{$uix_alwaysStaffBar}">
	,{
		"breakpoint": "0",
		"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
	}	
	</xf:if>
	<xf:if is="{{property('publicNavSticky')}} != 'none'">
			,{
				"breakpoint": "0",
				"offset": "{{property('uix_stickyNavHeight')|escape('json')}}"
			}		
	<xf:if is="{{property('publicNavSticky')}} == 'all' && {$uix_subNavContentStatic}" />		
			,{
				"breakpoint": "{{ property('uix_viewportWidthRemoveSubNav')|escape('json') }}",
				"offset": "{{(property('uix_stickySectionLinkHeight'))|escape('json')}}"
			}
	</xf:if>
	]
</xf:set>

<xf:set var="$uix_mainTabComponent">
	<xf:if contentcheck="true">
		<div data-xf-init="{{ property('uix_mainTabsSticky') ? 'sticky-header' : ''}}" class="block uix_mainTabBar {{ (property('uix_mainTabsSticky') && property('uix_removeHeaderWrapper')) ? 'uix_stickyBar' : ''}}" data-top-offset-breakpoints="{$uix_mainTabsOffset|for_attr}">
			<div class="block-tabHeader tabs hScroller" data-xf-init="h-scroller">
				<span class="hScroller-scroll">
					<xf:contentcheck>
						<xf:if is="{$uix_mainTabSets}">
							<xf:set var="$uix_hasMainTabs" value="1" />
							<xf:macro template="uix_mainTabSets" name="{$uix_mainTabSets}" arg-activeTab="{$uix_mainTabActive}" />
						</xf:if>
					</xf:contentcheck>
				</span>
			</div>
		</div>
	</xf:if>
</xf:set>

<xf:macro name="uix_mainTabComponent" arg-content="!" arg-location="!">
	<xf:if is="property('uix_tabBarLocation') === {$location} && property('uix_enableMainTabs')">
		{{$content}}
	</xf:if>
</xf:macro>

<xf:comment> --- Canvases --- </xf:comment>

<xf:macro name="uix_canvasTab" arg-icon="!" arg-location="!" arg-canvas="!" arg-type="!">
	<xf:if is="{$location} == {$canvas}">
		<div class="uix_canvasTab uix_canvasTab__{{$type}}" data-target="uix_canvasPanel__{{$type}}">
			<xf:fa icon="fa-{$icon}" />
		</div>
	</xf:if>
</xf:macro>

<xf:macro name="uix_canvasTabs" arg-location="!">
	<div class="uix_canvas__tabs">
		<xf:macro name="uix_canvasTab" arg-icon="list" arg-type="navigation" arg-location="{{property('uix_canvas_location_navigation')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="grid" arg-type="sidebar" arg-location="{{property('uix_canvas_location_sidebar')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="user" arg-type="account" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="email" arg-type="conversations" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="alert" arg-type="alerts" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="star" arg-type="custom" arg-location="{{property('uix_canvas_location_custom')}}" arg-canvas="{$location}"/>
	</div>
</xf:macro>

<xf:comment>
	<xf:set var="$uix_whatsNew__component">
		<a href="{{ link('whats-new') }}"
		   class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
		   aria-label="{{ phrase('whats_new')|for_attr }}"
		   title="{{ phrase('whats_new') }}">
			<i aria-hidden="true"></i>
			<span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
		</a>
	</xf:set>

	<xf:macro name="uix_whatsNew__component" arg-content="!" arg-location="!">
		<xf:if is="property('uix_userTabsPosition') == {$location}">
			{$content}
		</xf:if>
	</xf:macro>
</xf:comment>

<xf:comment> --- breadcrumb --- </xf:comment>

<xf:if is="!{$uix_hideBreadcrumb}">
	<xf:set var="$uix_breadcrumbCrumbContent">
		<xf:set var="$position" value="{{ 0 }}" />

		<xf:set var="$rootBreadcrumb" value="{$navTree.{$xf.options.rootBreadcrumb}}" />
		<xf:if is="$rootBreadcrumb AND $rootBreadcrumb.href != $xf.uri AND $rootBreadcrumb.href != $xf.fullUri">
			<xf:set var="$position" value="{{ $position + 1 }}" />
			<xf:macro name="crumb"
					  arg-position="{$position}"
					  arg-href="{$rootBreadcrumb.href}"
					  arg-value="{$rootBreadcrumb.title}" />
		</xf:if>

		<xf:if is="$selectedNavEntry AND $selectedNavEntry.href AND $selectedNavEntry.href != $xf.uri AND $selectedNavEntry.href != $xf.fullUri AND $selectedNavEntry.href != $rootBreadcrumb.href">
			<xf:set var="$position" value="{{ $position + 1 }}" />
			<xf:macro name="crumb"
					  arg-position="{$position}"
					  arg-href="{$selectedNavEntry.href}"
					  arg-value="{$selectedNavEntry.title}" />
		</xf:if>
		<xf:foreach loop="$breadcrumbs" value="$breadcrumb" if="$breadcrumb.href != $xf.uri AND $breadcrumb.href != $xf.fullUri">
			<xf:set var="$position" value="{{ $position + 1 }}" />
			<xf:macro name="crumb"
					  arg-position="{$position}"
					  arg-href="{$breadcrumb.href}"
					  arg-value="{$breadcrumb.value}" />
		</xf:foreach>
	</xf:set>
</xf:if>

<xf:set var="$breadcrumbCount">{{ count($breadcrumbs)|default(0) }}</xf:set>
<xf:set var="$navEntryCount">{{ $selectedNavEntry == null ? 0 : 1 }}</xf:set>

<xf:if is="{$uix_breadcrumbCrumbContent} && ({{ ($navEntryCount|escape + $breadcrumbCount|escape) != 1 }} || !property('uix_hideSingleCrumb'))">
	<xf:set var="$uix_breadcrumbHasCrumbs" value="1" />
</xf:if>

<xf:macro name="breadcrumbs" arg-breadcrumbHasCrumbs="!" arg-crumbContent="!" arg-variant="">
	<xf:if contentcheck="true">
		<div class="breadcrumb block {{ $variant ? 'p-breadcrumb--' . $variant : '' }}">
			<div class="pageContent">
				<xf:contentcheck>
					<xf:if is="{$breadcrumbHasCrumbs}">
						<xf:if contentcheck="true">
							<ul class="p-breadcrumbs {{ $variant ? 'p-breadcrumbs--' . $variant : '' }}"
								itemscope itemtype="https://schema.org/BreadcrumbList">
								<xf:contentcheck>
									{{ $crumbContent }}
								</xf:contentcheck>
							</ul>
						</xf:if>
					</xf:if>
				</xf:contentcheck>
			</div>
		</div>
	</xf:if>
</xf:macro>

<xf:macro name="crumb" arg-href="!" arg-value="!" arg-position="{{ 0 }}">
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a href="{$href}" itemprop="item">
			<xf:if is="{$href} == {$xf.homePageUrl} && property('uix_homeCrumbIcon')">
				<xf:fa icon="fa-home" />
				<span style="display: none;" itemprop="name">{$value}</span>
				<xf:else />
				<span itemprop="name">{$value}</span>
			</xf:if>
		</a>
		<xf:if is="$position"><meta itemprop="position" content="{$position}" /></xf:if>
	</li>
</xf:macro>


<xf:comment> --- Top breadcrumb ---</xf:comment>

<xf:set var="$uix_topBreadcrumb__component">
	<xf:ad position="container_breadcrumb_top_above" />
	<xf:macro name="breadcrumbs"
			  arg-crumbContent="{$uix_breadcrumbCrumbContent}"
			  arg-breadcrumbHasCrumbs="{$uix_breadcrumbHasCrumbs}" />
	<xf:ad position="container_breadcrumb_top_below" />
</xf:set>

<xf:macro name="uix_topBreadcrumb__component" arg-location="" arg-content="!">
	<xf:if is="property('uix_topBreadcrumbLocation') === {$location}">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- bottom breadcrumb --- </xf:comment>

<xf:set var="$uix_bottomBreadcrumb__component">
	<xf:if is="!property('uix_removeBottomBreadcrumb')">
		<xf:ad position="container_breadcrumb_bottom_above" />
		<xf:macro name="breadcrumbs"
				  arg-crumbContent="{$uix_breadcrumbCrumbContent}"
				  arg-breadcrumbHasCrumbs="{$uix_breadcrumbHasCrumbs}"
				  arg-variant="bottom" />
		<xf:ad position="container_breadcrumb_bottom_below" />
	</xf:if>
</xf:set>

<xf:macro name="uix_bottomBreadcrumb__component" arg-content="!" arg-location="!">
	<xf:if is="property('uix_bottomBreadcrumbLocation') == {$location}">
		{$content}
	</xf:if>
</xf:macro>


<xf:comment>------ NOTICES ---------</xf:comment>

<xf:set var="$uix_notices">
	<xf:if is="!{$uix_hideNotices}">
		<xf:if is="$notices.block">
			<xf:macro template="notice_macros" name="notice_list" arg-type="block" arg-notices="{$notices.block}" />
		</xf:if>

		<xf:if is="$notices.scrolling">
			<xf:macro template="notice_macros" name="notice_list" arg-type="scrolling" arg-notices="{$notices.scrolling}" />
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_notices" arg-location="!" arg-content="!">
	<xf:if is="{$location} == property('uix_noticeLocation')">
		{{$content}}
	</xf:if>
</xf:macro>

<xf:comment>------ FOOTER ---------</xf:comment>

<xf:set var="$uix_footer">
	<footer class="p-footer" id="footer">

		<xf:if is="!{$uix_hideExtendedFooter} && property('uix_enableExtendedFooter')">
			<xf:include template="uix_extendedFooter" />
		</xf:if>

		<div class="p-footer-inner">
			<div class="pageContent">
				<div class="p-footer-row">
					<xf:if contentcheck="true">
						<div class="p-footer-row-main">
							<ul class="p-footer-linkList p-footer-choosers">
								<xf:contentcheck>
									<xf:if is="(property('uix_pageWidthToggle') != 'disabled') && $uix_canTogglePageWidth">
										<li><a id="uix_widthToggle--trigger" data-xf-init="tooltip" title="{{ phrase('th_toggle_width_uix') }}" rel="nofollow"><xf:fa icon="fa-compress-alt" /></a></li>
									</xf:if>
									<xf:if is="$xf.visitor.canChangeStyle() && !{{ property('uix_hideStyleChoose') }}">
										<li><a href="{{ link('misc/style') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('style_chooser') }}" rel="nofollow">{$xf.style.title}</a></li>
									</xf:if>
									<xf:if is="$xf.visitor.canChangeLanguage()">
										<li><a href="{{ link('misc/language') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('language_chooser') }}" rel="nofollow"><i class="fa fa-globe" aria-hidden="true"></i> {$xf.language.title}</a></li>
									</xf:if>
								</xf:contentcheck>
							</ul>
						</div>
					</xf:if>
				</div>
				<div class="p-footer-row-opposite">
					<ul class="p-footer-linkList">
						<xf:if is="$xf.visitor.canUseContactForm()">
							<xf:if is="$xf.contactUrl">
								<li><a href="{$xf.contactUrl}" data-xf-click="{{ ($xf.options.contactUrl.overlay OR $xf.options.contactUrl.type == 'default') ? 'overlay' : '' }}">{{ phrase('contact_us') }}</a></li>
							</xf:if>
						</xf:if>

						<xf:if is="$xf.tosUrl">
							<li><a href="{$xf.tosUrl}">{{ phrase('terms_and_rules') }}</a></li>
						</xf:if>

						<xf:if is="$xf.privacyPolicyUrl">
							<li><a href="{$xf.privacyPolicyUrl}">{{ phrase('privacy_policy') }}</a></li>
						</xf:if>

						<xf:if is="$xf.helpPageCount">
							<li><a href="{{ link('help') }}">{{ phrase('help') }}</a></li>
						</xf:if>

						<xf:if is="$xf.homePageUrl">
							<li><a href="{$xf.homePageUrl}">{{ phrase('home') }}</a></li>
						</xf:if>

						<li><a href="#top" title="{{ phrase('top') }}" data-xf-click="scroll-to"><i class="fa fa-arrow-up" aria-hidden="true"></i></a></li>

						<li><a href="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}"><span aria-hidden="true"><i class="fa fa-rss"></i><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li>
					</ul>
				</div>
			</div>
		</div>

		<div class="p-footer-copyrightRow">
			<div class="pageContent">
				<div class="uix_copyrightBlock">
					<xf:if contentcheck="true">
						<div class="p-footer-copyright">
							<xf:contentcheck>
								<xf:copyright />
								<xf:callback class="ThemeHouse\Core\Branding" method="renderStyleBranding" /><xf:set var="$thBrandingDisplayed" value="1" />
								{{ phrase('extra_copyright') }}
							</xf:contentcheck>
						</div>
					</xf:if>

					<xf:if contentcheck="true">
						<div class="p-footer-debug">
							<xf:contentcheck>
								<xf:macro template="debug_macros" name="debug"
										  arg-controller="{$controller}"
										  arg-action="{$actionMethod}"
										  arg-template="{$template}" />
							</xf:contentcheck>
						</div>
					</xf:if>
				</div>
				<xf:comment>
					<xf:macro name="uix_socialMedia" arg-location="copyright" template="uix_socialMedia" />
				</xf:comment>
				<xf:macro name="uix_socialMedia__component" arg-content="{$uix_socialMediaContent}" arg-location="copyright" />
			</div>
		</div>
	</footer>
</xf:set>

<xf:macro name="uix_footer" arg-insideContent="!" arg-location="!" arg-content="!">
	<xf:if is="($insideContent && {$location} == 'insideContent') || ($location == 'bottom' && !$insideContent)">
		{{$content}}
	</xf:if>
</xf:macro>

<xf:comment>------ END COMPONENT MARKUP MACROS ---------</xf:comment>

<xf:set var="$thUixFontSize" value="{{ 62.5 * (14 + $xf.visitor.Option.thuix_font_size * 2) / 14 }}" />

<html id="XF" lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}"
	  style="font-size: {$thUixFontSize}%;"
	  data-app="public"
	  data-template="{$template}"
	  data-container-key="{$containerKey}"
	  data-content-key="{$contentKey}"
	  data-logged-in="{{ $xf.visitor.user_id ? 'true' : 'false' }}"
	  data-cookie-prefix="{$xf.cookie.prefix}"
	  data-csrf="{{ csrf_token()|escape('js') }}"
	  class="has-no-js {{ $template ? 'template-' . $template : '' }} {$uix_htmlClasses} {$uix_additionalHtmlClasses}"
	  {{ $xf.runJobs ? ' data-run-jobs=""' : '' }}>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

		<xf:comment> -- moved to top to use in macros
			<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
			<xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
			<xf:set var="$title"><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" /></xf:set>
			<xf:set var="$description"><xf:description /></xf:set>
		</xf:comment>

		<title>{$title}</title>
		<link rel="manifest" href="{{ base_url('webmanifest.php') }}">
		<xf:if is="property('metaThemeColor')">
			<meta name="theme-color" content="{{ parse_less_color(property('metaThemeColor')) }}" />
			<meta name="msapplication-TileColor" content="{{ property('metaThemeColor') }}">
		</xf:if>
		<meta name="apple-mobile-web-app-title" content="{{ $xf.options.boardShortTitle ?: $xf.options.boardTitle }}">
		<xf:if is="property('publicIconUrl')">
			<link rel="apple-touch-icon" href="{{ base_url(property('publicIconUrl', true)) }}">
		</xf:if>

		<xf:foreach loop="$head" value="$headTag">
			{$headTag}
		</xf:foreach>

		<xf:if is="!$head.meta_site_name && $siteName is not empty">
			<xf:macro template="metadata_macros" name="site_name" arg-siteName="{$siteName}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_type">
			<xf:macro template="metadata_macros" name="type" arg-type="website" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_title">
			<xf:macro template="metadata_macros" name="title" arg-title="{{ page_title() ?: $siteName }}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_description && $description is not empty && $pageDescriptionMeta">
			<xf:macro template="metadata_macros" name="description" arg-description="{$description}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_share_url">
			<xf:macro template="metadata_macros" name="share_url" arg-shareUrl="{$xf.fullUri}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_image_url && property('publicMetadataLogoUrl')">
			<xf:macro template="metadata_macros" name="image_url"
					  arg-imageUrl="{{ base_url(property('publicMetadataLogoUrl'), true) }}"
					  arg-output="{{ true }}" />
		</xf:if>

		<xf:macro template="helper_js_global" name="head" arg-app="public" />

		<xf:if is="property('publicFaviconUrl')">
			<link rel="icon" type="image/png" href="{{ base_url(property('publicFaviconUrl'), true) }}" sizes="32x32" />
		</xf:if>
		<xf:if is="property('publicMetadataLogoUrl')">
			<link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl'), true) }}" />
		</xf:if>
		<xf:include template="google_analytics" />

		<xf:set var="$uix_stickyStaffBarHeight" value="0" />

		<xf:if is="property('uix_stickyStaffBar') && ({$uix_responsiveStaffBar} || {$uix_alwaysStaffBar})">
			<xf:set var="$uix_stickyStaffBarHeight" value="{{property('uix_stickyStaffBarHeight')}}" />
		</xf:if>

	</head>

	<body data-template="{$template}">
		<xf:include template="page_style" />
		<div id="jumpToTop"></div>

		<xf:comment> -- Not currently supporting Sidebar navigation when page style is not covered ---
			<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') != 'covered'">
				<xf:macro name="uix_sidebarNav__component" arg-content="{$uix_sidebarNav__component}" />
			</xf:if>
		</xf:comment>

		<div class="uix_pageWrapper--fixed">
			<div class="p-pageWrapper" id="top">

				<xf:if is="!{{property('uix_removeHeaderWrapper')}}">
				<div class="uix_headerContainer">
					<div class="uix_headerContainer--stickyFix"></div>
				</xf:if>
					<xf:macro name="uix_staffbar__component" arg-content="{$uix_staffbar__component}" />

					<xf:set var="$uix_headerContent">
						<xf:if contentcheck="true">
							<div class="p-header-content">
								<xf:contentcheck>
									<xf:if is="property('uix_viewportShowLogoBlock') != '0'">
										<xf:macro name="uix_logo__component" arg-content="{$uix_logo__component}" />
									</xf:if>

									<xf:if contentcheck="true">
										<div class="p-nav-opposite">
											<xf:contentcheck>
												<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="header" />
											</xf:contentcheck>
										</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</xf:if>
					</xf:set>

					<xf:macro name="uix_logoBlock" arg-content="">
						<xf:if contentcheck="true">
							<header class="p-header p-header--hasExtraContent" id="header">
								<div class="p-header-inner">
									{$content}
									<xf:contentcheck>
										<xf:ad position="container_header" />
									</xf:contentcheck>

								</div>
							</header>
							<xf:else />
							<header class="p-header" id="header">
								<div class="p-header-inner">
									{$content}
								</div>
							</header>
						</xf:if>
					</xf:macro>

					<xf:if is="{{ !property('uix_navAboveHeader') }}">
						<xf:macro name="uix_logoBlock" arg-content="{$uix_headerContent}" />
					</xf:if>

					<xf:set var="$navHtml">
						<nav class="p-nav">
							<div class="p-nav-inner">
								<xf:if is="!{$uix_hideNavigation}">
									<xf:set var="$uix_badgeCounter" value="{{$xf.visitor.conversations_unread + $xf.visitor.alerts_unread}}" />
									<xf:if is="{{ property('uix_visitorTabsMobile') == 'canvas' }}">
										<xf:set var="$uix_visitorTabCanvas" value="1" />
										<xf:else />
										<xf:set var="$uix_visitorTabCanvas" value="0" />
									</xf:if>
									<a class="p-nav-menuTrigger {{ $uix_visitorTabsMobile == 'canvas' ? 'js-badge--alerts js-badge--conversations' : '' }} badgeContainer{{ ($uix_visitorTabCanvas && ($xf.visitor.alerts_unread || $xf.visitor.conversations_unread)) ? ' badgeContainer--highlighted' : '' }}" data-badge="{$uix_badgeCounter|number}" data-xf-click="off-canvas" data-menu=".js-headerOffCanvasMenu" role="button" tabindex="0">
										<i aria-hidden="true"></i>
										<span class="p-nav-menuText">{{ phrase('menu') }}</span>
									</a>
									<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') == 'covered'">
										<a class="p-nav-menuTrigger uix_sidebarNav--trigger" id="uix_sidebarNav--trigger" rel="nofollow">
											<i aria-hidden="true"></i>
											<span class="p-nav-menuText">{{ phrase('menu') }}</span>
										</a>
									</xf:if>
								</xf:if>

								<xf:macro name="uix_logo__component" arg-content="{$uix_logo__component}" />

								<xf:if is="!{$uix_hideNavigation}">
									<xf:if is="property('uix_navigationType') != 'sidebarNav' || property('uix_pageStyle') != 'covered'">
										<div class="p-nav-scroller hScroller" data-xf-init="h-scroller" data-auto-scroll=".p-navEl.is-selected">
											<div class="hScroller-scroll">
												<ul class="p-nav-list js-offCanvasNavSource">
													<xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
														<li>
															<xf:macro name="nav_entry"
																	  arg-navId="{$navSection}"
																	  arg-nav="{$navEntry}"
																	  arg-selected="{{ $navSection == $pageSection }}"
																	  arg-shortcut="{$i}" />
														</li>
													</xf:foreach>
												</ul>
											</div>
										</div>
									</xf:if>

									<xf:if is="property('uix_activeNavTitle')">
										<div class="uix_activeNavTitle">
											<span>
												<xf:if is="{$uix_mobileActiveNav}">
													{{ $uix_mobileActiveNav }}
													<xf:elseif is="{$selectedNavEntry.href}" />
													{$selectedNavEntry.title}
													<xf:else />
												</xf:if>
											</span>
										</div>
									</xf:if>
								</xf:if>

								<xf:macro name="uix_search__component" arg-location="navigationLeft" arg-content="{$uix_search__component}" />

								<xf:if contentcheck="true">
									<div class="p-nav-opposite">
										<xf:contentcheck>
											<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="navigation" />
											<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="navigation" />
										</xf:contentcheck>
									</div>
								</xf:if>
							</div>
							<xf:comment>
							<xf:macro template="uix_megaMenu" name="uix_megaMenu" />
							</xf:comment>
						</nav>
					</xf:set>
					
					<xf:set var="$uix_navOffset">
						[
							{
								"breakpoint": "0",
								"offset": "0"
							}
							<xf:if is="{$uix_responsiveStaffBar} && !{$uix_alwaysStaffBar} && {{ property('uix_stickyStaffBar') }}">
							,{
								"breakpoint": "{{ property('uix_staffBarBreakpoint')|escape('json') }}",
								"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
							}	
							</xf:if>
							<xf:if is="{$uix_alwaysStaffBar} && {{ property('uix_stickyStaffBar') }}">
							,{
								"breakpoint": "0",
								"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
							}	
							</xf:if>
						]
					</xf:set>

					<xf:if is="property('publicNavSticky') == 'primary'">
						<div class="p-navSticky p-navSticky--primary <xf:if is="{{ (property('publicNavSticky') !== 'none') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-top-offset-breakpoints="{$uix_navOffset|for_attr}" data-xf-init="sticky-header">
							{$navHtml|raw}
						</div>
						{$subNavHtml|raw}
						<xf:elseif is="property('publicNavSticky') == 'all'" />
						<div class="p-navSticky p-navSticky--all <xf:if is="{{ (property('publicNavSticky') !== 'none') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-top-offset-breakpoints="{$uix_navOffset|for_attr}" data-xf-init="sticky-header">
							{$navHtml|raw}
							{$subNavHtml|raw}
						</div>
						<xf:else />
						{$navHtml|raw}
						{$subNavHtml|raw}
					</xf:if>

					<xf:if is="{{ property('uix_navAboveHeader') }}">
						<xf:macro name="uix_logoBlock" arg-content="{$uix_headerContent}" />
					</xf:if>

					<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="header" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
					<xf:macro name="uix_topBreadcrumb__component" arg-location="header" arg-content="{$uix_topBreadcrumb__component}" />
					<xf:macro name="uix_mainTabComponent" arg-location="header" arg-content="{$uix_mainTabComponent}" />
					<xf:macro name="uix_titlebar__component" arg-location="header" arg-content="{$uix_titlebar__component}" />
					{{$uix_headerExtra|raw }}
				<xf:if is="!{{property('uix_removeHeaderWrapper')}}">
				</div>
				</xf:if>

				<xf:comment> --- UI.X off canvas start ---</xf:comment>
				<div class="offCanvasMenu offCanvasMenu--nav js-headerOffCanvasMenu" data-menu="menu" aria-hidden="true" data-ocm-builder="navigation">
					<div class="offCanvasMenu-backdrop" data-menu-close="true"></div>
					<div class="offCanvasMenu-content">
						<xf:include template="uix_canvasTabs" />
						<xf:include template="uix_canvasPanels" />

						<xf:macro name="canvasNavPanel">
							<div class="offCanvasMenu-header">
								{{ phrase('menu') }}
								<a class="offCanvasMenu-closer" data-menu-close="true" role="button" tabindex="0" aria-label="{{ phrase('close')|for_attr }}"></a>
							</div>
							<xf:if is="$xf.visitor.user_id">
								<div class="p-offCanvasAccountLink">
									<a href="{{ link('account') }}" class="offCanvasMenu-link">
										<xf:avatar user="$xf.visitor" size="xxs" href="" />
										{$xf.visitor.username}
									</a>
									<hr class="offCanvasMenu-separator" />
								</div>
							</xf:if>
							<div class="js-offCanvasNavTarget"></div>
							<xf:if is="$xf.visitor.user_id">
								<div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'profile' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="profile" href="{{ link('members', $xf.visitor) }}" class="offCanvasMenu-link">{{ phrase('th_profile_uix') }}</a></div></div>
								<div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'alerts' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="alerts" href="{{ link('account/alerts') }}" class="offCanvasMenu-link">{{ phrase('alerts')}}</a></div></div>
								<div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'settings' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="settings" href="{{ link('account/preferences') }}" class="offCanvasMenu-link">{{ phrase('settings')}}</a></div></div>
							</xf:if>
							<xf:if contentcheck="true">
								<div class="uix_sidebarNav__inner__widgets">
									<xf:contentcheck>
										{$uix_sidebarNavWidgets|raw}
									</xf:contentcheck>
								</div>
							</xf:if>
						</xf:macro>
						<div class="offCanvasMenu-installBanner js-installPromptContainer" style="display: none;" data-xf-init="install-prompt">
							<div class="offCanvasMenu-installBanner-header">{{ phrase('install_app') }}</div>
							<xf:button class="js-installPromptButton">{{ phrase('install') }}</xf:button>
						</div>
					</div>
				</div>

				<xf:macro name="uix_titlebar__component" arg-location="belowHeader" arg-content="{$uix_titlebar__component}" />

				<div class="p-body">

					<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') == 'covered'">
						<xf:macro name="uix_sidebarNav__component" arg-content="{$uix_sidebarNav__component}" />
					</xf:if>

					<div class="p-body-inner {{ $removePageWrapper ? 'p-body-inner-none' : ''}}">
						<xf:if is="!is_addon_active('ThemeHouse/UIX') && $xf.visitor.is_admin">
							<div class="blockMessage blockMessage--error blockMessage--errorUixAddon">
								<h2 style="margin: 0 0 .5em 0">UI.X Error</h2>
								<p>
									It appears that you do not have the UI.X Add-on installed. Please install this add-on to ensure your style works as expected. You can download the UI.X add-on <a href="https://www.themehouse.com/xenforo/2/addons/uix-addon">here</a>.
								</p>
								<xf:button href="https://www.themehouse.com/help/documentation/uix2" class="button--primary">
									<xf:fa icon="fa-exclamation-triangle" /> View Documentation
								</xf:button>
							</div>
						</xf:if>
						<!--XF:EXTRA_OUTPUT-->

						<xf:macro name="uix_notices" arg-location="aboveMainContainer" arg-content="{$uix_notices}" />

						<xf:macro name="uix_titlebar__component" arg-location="aboveMainContainer" arg-content="{$uix_titlebar__component}" />

						<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="aboveMainContainer" arg-showWelcomeSection="{$uix_showWelcomeSection}" />

						<xf:macro name="uix_topBreadcrumb__component" arg-location="aboveMainContainer" arg-content="{$uix_topBreadcrumb__component}" />

						<xf:macro name="uix_mainTabComponent" arg-location="aboveMainContainer" arg-content="{$uix_mainTabComponent}" />

						<xf:macro template="browser_warning_macros" name="javascript" />
						<xf:macro template="browser_warning_macros" name="browser" />

<xf:if is="count($xf.reactionsActive) > 1 AND $xf.visitor.user_id">
	<script type="text/template" id="xfReactTooltipTemplate">
		<div class="tooltip-content-inner">
			<div class="reactTooltip">
				<xf:foreach loop="$xf.reactionsActive" key="$reactionId" value="$reaction">
					<xf:reaction id="{$reactionId}" tooltip="true" />
				</xf:foreach>
			</div>
		</div>
	</script>
</xf:if>
						<div uix_component="MainContainer" class="uix_contentWrapper">

							<xf:macro name="uix_notices" arg-location="mainContainerTop" arg-content="{$uix_notices}" />

							<xf:ad position="container_content_above" />
							<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="mainContainerTop" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
							<xf:macro name="uix_topBreadcrumb__component" arg-location="mainContainerTop" arg-content="{$uix_topBreadcrumb__component}" />
							<xf:macro name="uix_titlebar__component" arg-location="mainContainerTop" arg-content="{$uix_titlebar__component}" />
							<xf:macro name="uix_mainTabComponent" arg-location="mainContainerTop" arg-content="{$uix_mainTabComponent}" />

							<div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}">
								<xf:comment>
								<xf:if is="$sideNav">
									<div class="p-body-sideNavCol"></div>
								</xf:if>
								<div class="p-body-contentCol"></div>
								<xf:if is="$sidebar">
									<div class="p-body-sidebarCol"></div>
								</xf:if>
								</xf:comment>
								<xf:if is="$sideNav">
									<div class="p-body-sideNav">
										<div class="p-body-sideNavTrigger">
											<xf:button class="button--link" data-xf-click="off-canvas" data-menu="#js-SideNavOcm">
												{{ $sideNavTitle ?: phrase('navigation') }}
											</xf:button>
										</div>
										<div class="p-body-sideNavInner {{ (property('uix_stickySidebar') == 'top') ? ' uix_stickyBodyElement' : '' }}" data-ocm-class="offCanvasMenu offCanvasMenu--blocks" id="js-SideNavOcm" data-ocm-builder="sideNav">
											<div class="uix_sidebar--scroller">
												<div data-ocm-class="offCanvasMenu-backdrop" data-menu-close="true"></div>
												<div data-ocm-class="offCanvasMenu-content">
													<div class="p-body-sideNavContent">
														<xf:ad position="container_sidenav_above" />
														<xf:foreach loop="$sideNav" value="$sideNavHtml">
															{$sideNavHtml}
														</xf:foreach>
														<xf:ad position="container_sidenav_below" />
													</div>
												</div>
											</div>
										</div>
									</div>
								</xf:if>

								<xf:macro name="uix_sidebar__component" arg-content="{$uix_sidebar__component}" arg-location="left" />
								<div uix_component="MainContent" class="p-body-content">
									<!-- ABOVE MAIN CONTENT -->
									<xf:macro name="uix_notices" arg-location="aboveMainContent" arg-content="{$uix_notices}" />
									<xf:macro name="uix_topBreadcrumb__component" arg-location="aboveMainContent" arg-content="{$uix_topBreadcrumb__component}" />
									<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="aboveMainContent" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
									<xf:macro name="uix_titlebar__component" arg-location="aboveMainContent" arg-content="{$uix_titlebar__component}" />
									<xf:macro name="uix_mainTabComponent" arg-location="aboveMainContent" arg-content="{$uix_mainTabComponent}" />
									<div class="p-body-pageContent">
										<xf:macro name="uix_notices" arg-location="mainContentTop" arg-content="{$uix_notices}" />
										<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="mainContentTop" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
										<xf:macro name="uix_topBreadcrumb__component" arg-location="mainContentTop" arg-content="{$uix_topBreadcrumb__component}" />
										<xf:macro name="uix_titlebar__component" arg-location="mainContentTop" arg-content="{$uix_titlebar__component}" />
										<xf:macro name="uix_mainTabComponent" arg-location="mainContentTop" arg-content="{$uix_mainTabComponent}" />
										{$content|raw}
										<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="mainContentBottom" />
									</div>
									<!-- BELOW MAIN CONTENT -->
									<xf:ad position="container_content_below" />
									<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="belowMainContent" />
								</div>

								<xf:macro name="uix_sidebar__component" arg-content="{$uix_sidebar__component}" arg-location="right" />
							</div>
							<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="mainContainerBottom" />
						</div>
						<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="belowMainContainer" />
						<xf:macro name="uix_footer" arg-location="insideContent" arg-content="{$uix_footer}" arg-insideContent="{{ property('uix_footerInsideContent')}}" />
					</div>
				</div>

				<xf:macro name="uix_footer" arg-location="bottom" arg-content="{$uix_footer}" arg-insideContent="{{ property('uix_footerInsideContent')}}" />

				<xf:if contentcheck="true">
					<div class="uix_fabBar uix_fabBar--active">
						<xf:contentcheck>
							<xf:if is="property('scrollJumpButtons')">
								<div class="u-scrollButtons js-scrollButtons" data-trigger-type="{{ property('scrollJumpButtons') }}">
									<xf:button href="#top" class="button--scroll ripple-JsOnly" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-up" /><span class="u-srOnly">{{ phrase('top') }}</span></xf:button>
									<xf:if is="property('scrollJumpButtons') != 'up'">
										<xf:button href="#footer" class="button--scroll ripple-JsOnly" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-down" /><span class="u-srOnly">{{ phrase('bottom') }}</span></xf:button>
									</xf:if>
								</div>
							</xf:if>
							<xf:if is="property('uix_fab') != 'never'">
								<xf:if contentcheck="true">
									<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
								</xf:if>
							</xf:if>
						</xf:contentcheck>
					</div>
				</xf:if>
				<xf:if is="(property('uix_fab') != 'never') && !property('uix_fabScroll')">
					<xf:if contentcheck="true">
						<div class="uix_fabBar uix_fabBar--mirror">
							<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
						</div>
					</xf:if>
				</xf:if>
				<xf:if is="property('uix_visitorTabsMobile') == 'tabbar'">
					<xf:macro name="uix_tabBar" template="uix_tabBar" />
				</xf:if>
			</div>
		</div>

		<div class="u-bottomFixer js-bottomFixTarget">
			<xf:if is="$notices.floating">
				<xf:macro template="notice_macros" name="notice_list" arg-type="floating" arg-notices="{$notices.floating}" />
			</xf:if>
			<xf:if is="$notices.bottom_fixer">
				<xf:macro template="notice_macros" name="notice_list" arg-type="bottom_fixer" arg-notices="{$notices.bottom_fixer}" />
			</xf:if>
		</div>

		<xf:include template="uix_config" />

		<xf:macro template="helper_js_global" name="body" arg-app="public" arg-jsState="{$jsState}" />
		
		<xf:if is="count($xf.reactionsActive) > 1">
			<script type="text/template" id="xfReactTooltipTemplate">
			<div class="tooltip-content-inner">
				<div class="reactTooltip">
					<xf:foreach loop="$xf.reactionsActive" key="$reactionId" value="$reaction">
						<xf:reaction id="{$reactionId}" tooltip="true" />
				</xf:foreach>
				</div>
				</div>
			</script>
		</xf:if>

		<xf:if is="property('uix_loginStyle') == 'slidingPanel'">
			<div class="uix__loginForm uix__loginForm--login">
				<div class="uix__loginForm--panel">
					<xf:include template="login">
						<xf:set var="$uix_loginPreventAutoFocus" value="1" />
					</xf:include>
				</div>
				<div class="uix__loginForm--mask"></div>
			</div>
		</xf:if>

		{$ldJsonHtml|raw}

	</body>
</html>

<xf:macro name="nav_entry" arg-sidebarNav="" arg-navId="!" arg-nav="!" arg-selected="{{ false }}" arg-shortcut="">
	<div class="p-navEl {{ !$sidebarNav ? 'u-ripple' : '' }} {{ $selected ? 'is-selected' : '' }}" {{ $nav.children ? 'data-has-children="true"' : '' }}>
		<xf:if is="$sidebarNav">
			<div class="p-navEl__inner u-ripple">
				</xf:if>
			<xf:if is="$nav.href">
				<xf:macro name="nav_link"
						  arg-navId="{$navId}"
						  arg-nav="{$nav}"
						  arg-class="p-navEl-link {{ $nav.children ? 'p-navEl-link--splitMenu' : '' }}"
						  arg-shortcut="{{ $nav.children ? false : $shortcut }}" />
				<xf:if is="$nav.children">
					<a data-xf-key="{$shortcut}"
					   data-xf-click="menu"
					   data-menu-pos-ref="< .p-navEl"
					   class="p-navEl-splitTrigger"
					   role="button"
					   tabindex="0"
					   aria-label="{{ phrase('toggle_expanded')|for_attr }}"
					   aria-expanded="false"
					   aria-haspopup="true">
					</a>
				</xf:if>
				<xf:elseif is="$nav.children" />
				<a data-xf-key="{$shortcut}"
				   class="p-navEl-linkHolder"
				   data-menu-pos-ref="< .p-navEl"
				   data-xf-click="menu"
				   role="button"
				   tabindex="0"
				   aria-expanded="false"
				   aria-haspopup="true">
					<xf:macro name="nav_link"
							  arg-navId="{$navId}"
							  arg-nav="{$nav}"
							  arg-class="p-navEl-link p-navEl-link--menuTrigger" />
				</a>
				<xf:else />
				<xf:macro name="nav_link"
						  arg-navId="{$navId}"
						  arg-nav="{$nav}"
						  arg-class="p-navEl-link"
						  arg-shortcut="{$shortcut}" />
			</xf:if>
			<xf:if is="$nav.children">
				<xf:if is="!{$sidebarNav}">
					<div class="menu menu--structural" data-menu="menu" aria-hidden="true">
						<div class="menu-content">
							<xf:foreach loop="$nav.children" key="$childNavId" value="$child">
								<xf:macro name="nav_menu_entry"
										  arg-navId="{$childNavId}"
										  arg-nav="{$child}" />
							</xf:foreach>
						</div>
					</div>
				</xf:if>
			</xf:if>
			<xf:if is="{$sidebarNav} && $nav.children && property('uix_tablinksInSideNav')">
				<a class="uix_sidebarNav--trigger <xf:if is="!property('uix_sideNavCollapsed') && $selected">is-expanded</xf:if>" rel="nofollow"><xf:fa icon="fa-chevron-down" /></a>
			</xf:if>
			<xf:if is="$sidebarNav">
				</div>
		</xf:if>
		<xf:if is="property('uix_tablinksInSideNav')">
			<xf:if is="{$sidebarNav}">
				<div <xf:if is="$nav.children">data-menu="false"</xf:if> class="uix_sidebarNav__subNav <xf:if is="!property('uix_sideNavCollapsed') && $selected">subNav--expand</xf:if>">
			<div class="uix_sidebarNav__subNavInner">
				<xf:foreach loop="$nav.children" key="$childNavId" value="$child">
					<xf:macro name="nav_menu_entry"
							  arg-navId="{$childNavId}"
							  arg-nav="{$child}" />
				</xf:foreach>
			</div>
			</div>
		</xf:if>
	</xf:if>
</div>
</xf:macro>

<xf:macro name="nav_link" arg-navId="!" arg-nav="!" arg-class="" arg-titleHtml="" arg-shortcut="{{ false }}">
	<xf:set var="$tag" value="{{ $nav.href ? 'a' : 'span' }}" />
	<{$tag} {{ $nav.href ? 'href="' . $nav.href . '"' : '' }}
			class="{$class} {$nav.attributes.class}"
			{{ attributes($nav.attributes, ['class']) }}
			{{ $shortcut !== false ? 'data-xf-key="' . $shortcut . '"' : '' }}
			data-nav-id="{$navId}"><xf:if is="$nav.icon"><xf:fa icon="{$nav.icon}" /> </xf:if><span>{{ $titleHtml ? $titleHtml|raw : $nav.title }}</span><xf:if is="$nav.counter"> <span class="badge badge--highlighted">{$nav.counter|number}</span></xf:if></{$tag}>
</xf:macro>

<xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0">
	<xf:macro name="nav_link"
			  arg-navId="{$navId}"
			  arg-nav="{$nav}"
			  arg-class="menu-linkRow u-ripple u-indentDepth{$depth} js-offCanvasCopy" />
	<xf:if is="$nav.children">
		<xf:foreach loop="$nav.children" key="$childNavId" value="$child">
			<xf:macro name="nav_menu_entry"
					  arg-navId="{$childNavId}"
					  arg-nav="{$child}"
					  arg-depth="{{ $depth + 1 }}" />
		</xf:foreach>
		<xf:if is="$depth == 0">
			<hr class="menu-separator" />
		</xf:if>
	</xf:if>
</xf:macro>]]></template>
    <template title="account_alerts" type="public" addon_id="XF" version_id="2020031" version_string="2.2.0 Beta 1"><![CDATA[<xf:title>{{ phrase('alerts') }}</xf:title>
<xf:page option="uix_myAccountLinks" value="alerts" />

<xf:wrap template="account_wrapper" />

<div class="block">
	<div class="block-outer"><xf:trim>
		<div class="block-outer-opposite">
			<div class="buttonGroup">
				<xf:button href="{{ link('account/alerts/mark-read') }}"
					class="button--link" overlay="true">
					{{ phrase('mark_read') }}
				</xf:button>
			</div>
		</div>
	</xf:trim></div>

	<div class="block-container">
		<div class="block-body">
			<xf:if is="$alerts is not empty">
				<ol class="listPlain" data-xf-init="alerts-list">
				<xf:foreach loop="$alerts" value="$alert">
					<li data-alert-id="{$alert.alert_id}"
						class="alert js-alert block-row block-row--separated {{ $alert.isUnreadInUi() ? 'is-unread' : '' }}">
						<xf:macro template="alert_macros" name="row" arg-alert="{$alert}" />
					</li>
				</xf:foreach>
				</ol>
			<xf:elseif is="$page <= 1" />
				<div class="block-row">{{ phrase('you_do_not_have_any_recent_alerts') }}</div>
			<xf:else />
				<div class="block-row">{{ phrase('no_alerts_can_be_shown') }}</div>
			</xf:if>
		</div>
	</div>

	<xf:pagenav link="account/alerts" page="{$page}" perpage="{$perPage}" total="{$totalAlerts}"
		wrapperclass="block-outer block-outer--after" />
</div>]]></template>
    <template title="account_preferences" type="public" addon_id="XF" version_id="2020031" version_string="2.2.0 Beta 1"><![CDATA[<xf:title>{{ phrase('preferences') }}</xf:title>
<xf:page option="uix_myAccountLinks" value="settings" />

<xf:wrap template="account_wrapper" />

<xf:form action="{{ link('account/preferences') }}" ajax="true" class="block" data-force-flash-message="true">
	<div class="block-container">
		<div class="block-body">
			<xf:if is="$xf.visitor.canChangeStyle()">

				<xf:selectrow name="user[style_id]" value="{$xf.visitor.style_id}"
					label="{{ phrase('style') }}">

					<xf:option value="0">{{ phrase('use_default_style:') }} {$defaultStyle.title}</xf:option>
					<xf:foreach loop="$styles" value="$style">
						<xf:option value="{$style.style_id}">{$style.title}{{ !$style.user_selectable ? ' *' : '' }}</xf:option>
					</xf:foreach>
				</xf:selectrow>
			<xf:else />
				<xf:hiddenval name="user[style_id]">{$xf.visitor.style_id}</xf:hiddenval>
			</xf:if>

			<xf:if is="$xf.visitor.canChangeLanguage()">
				<xf:selectrow name="user[language_id]" value="{$xf.visitor.language_id}"
					label="{{ phrase('language') }}">

					<xf:foreach loop="$languages" value="$language">
						<xf:option value="{$language.language_id}">{$language.title}{{ !$language.user_selectable ? ' *' : '' }}</xf:option>
					</xf:foreach>
				</xf:selectrow>
			<xf:else />
				<xf:hiddenval name="user[language_id]">{{ $xf.visitor.language_id ?: $xf.options.defaultLanguageId }}</xf:hiddenval>
			</xf:if>

			<xf:selectrow name="user[timezone]" value="{$xf.visitor.timezone}"
				label="{{ phrase('time_zone') }}">

				<xf:options source="$timeZones" />
			</xf:selectrow>

			<xf:macro template="helper_account" name="email_options_row" arg-showConversationOption="{{ true }}" />

			<xf:checkboxrow label="{{ phrase('content_options') }}">
				<xf:option value="watch_no_email" name="option[creation_watch_state]" checked="{{ $xf.visitor.Option.creation_watch_state ? true : false  }}"
					label="{{ phrase('automatically_watch_content_you_create...') }}">
					<xf:checkbox>
						<xf:option value="watch_email" name="option[creation_watch_state]" checked="{{ $xf.visitor.Option.creation_watch_state == 'watch_email' }}"
							label="{{ phrase('and_receive_email_notifications') }}" />
					</xf:checkbox>
				</xf:option>
				<xf:option value="watch_no_email" name="option[interaction_watch_state]" checked="{{ $xf.visitor.Option.interaction_watch_state ? true : false  }}"
					label="{{ phrase('automatically_watch_content_you_interact_with...') }}">
					<xf:checkbox>
						<xf:option value="watch_email" name="option[interaction_watch_state]" checked="{{ $xf.visitor.Option.interaction_watch_state == 'watch_email' }}"
							label="{{ phrase('and_receive_email_notifications') }}" />
					</xf:checkbox>
				</xf:option>
				<xf:option name="option[content_show_signature]" checked="{$xf.visitor.Option.content_show_signature}"
					label="{{ phrase('show_peoples_signatures_with_their_messages') }}" />
			</xf:checkboxrow>

			<xf:macro template="helper_account" name="activity_privacy_row" />

			<xf:macro template="custom_fields_macros" name="custom_fields_edit" arg-type="users" arg-group="preferences" arg-set="{$xf.visitor.Profile.custom_fields}" />

			<xf:if is="$xf.options.enableNotices && (count($xf.session.dismissedNotices) > 0)">
				<hr class="formRowSep" />

				<xf:checkboxrow>
					<xf:option name="restore_notices"
						label="{{ phrase('restore_dismissed_notices') }}"
						hint="{{ phrase('restore_dismissed_notices_hint') }}" />
				</xf:checkboxrow>
			</xf:if>

			<xf:if is="$xf.visitor.canUsePushNotifications()">
				<xf:formrow label="{{ phrase('push_notifications') }}" rowtype="button" explain="{{ phrase('enable_push_explain') }}">
					<xf:button class="is-disabled" data-xf-init="push-toggle">
						{{ phrase('push_checking_device_capabilities...') }}
					</xf:button>
				</xf:formrow>

				<xf:checkboxrow label="">
					<xf:option name="option[push_on_conversation]" checked="{$xf.visitor.Option.push_on_conversation}"
						label="{{ phrase('receive_push_notification_when_new_conversation_message_is_received') }}" />
				</xf:checkboxrow>

<xf:js>
					jQuery.extend(true, XF.config, {
						skipPushNotificationSubscription: true,
						skipPushNotificationCta: true
					});

					jQuery.extend(XF.phrases, {
						push_enable_label: "{{ phrase('push_enable_label')|escape('js') }}",
						push_disable_label: "{{ phrase('push_disable_label')|escape('js') }}",
						push_not_supported_label: "{{ phrase('push_not_supported_label')|escape('js') }}",
						push_blocked_label: "{{ phrase('push_blocked_label')|escape('js') }}"
					});
				</xf:js>
			<xf:else />
				<xf:hiddenval name="option[push_on_conversation]">{$xf.visitor.Option.push_on_conversation}</xf:hiddenval>
			</xf:if>
		</div>

		<xf:if is="$alertOptOuts is not empty">
			<xf:css src="notification_opt_out.less" />
			<h2 class="block-formSectionHeader"><span class="block-formSectionHeader-aligner">{{ phrase('receive_notification_when_someone...') }}</span></h2>
			<div class="block-body">
				<xf:set var="$canPush" value="{{ $xf.visitor.canUsePushNotifications() }}" />
				<xf:foreach loop="$alertOptOuts" key="$contentType" value="$options">
					<xf:foreach loop="$options" key="$action" value="$label">
						<xf:formrow label="{$label}" data-content-type="{$contentType}" data-action="{$action}">
							<ul class="notificationChoices">
								<li class="notificationChoices-choice notificationChoices-choice--alert">
									<xf:checkbox standalone="true">
										<xf:option name="alert[{$contentType}_{$action}]"
											data-xf-init="{{ $canPush ? 'disabler' : '' }}" data-container="< .notificationChoices | .notificationChoices-choice--push"
											checked="{{ $xf.visitor.Option.doesReceiveAlert($contentType, $action) }}"
											label="{{ phrase('alert') }}" />
									</xf:checkbox>
								</li>
								<xf:if is="$canPush">
									<li class="notificationChoices-choice notificationChoices-choice--push">
										<xf:checkbox standalone="true">
											<xf:option name="push[{$contentType}_{$action}]"
												checked="{{ $xf.visitor.Option.doesReceivePush($contentType, $action) }}"
												label="{{ phrase('push') }}" />
										</xf:checkbox>
										<xf:hiddenval name="push_shown[{$contentType}_{$action}]">1</xf:hiddenval>
									</li>
								</xf:if>
							</ul>
						</xf:formrow>
					</xf:foreach>
					<hr class="formRowSep" />
				</xf:foreach>

			</div>
		</xf:if>

		<xf:submitrow icon="save" sticky="true" />
	</div>
</xf:form>]]></template>
    <template title="account_visitor_menu" type="public" addon_id="XF" version_id="2020035" version_string="2.2.0 Beta 5"><![CDATA[<xf:if contentcheck="true">
	<h4 class="menu-tabHeader tabs" data-xf-init="tabs" role="tablist">
		<span class="hScroller" data-xf-init="h-scroller">
			<span class="hScroller-scroll">
				<a href="{{ link('account') }}" class="tabs-tab is-active" role="tab" tabindex="0" aria-controls="{{ unique_id('accountMenu') }}">{{ phrase('your_account') }}</a>
			<xf:contentcheck>
				<xf:if is="$xf.visitor.canViewBookmarks()">
					<a href="{{ link('account/bookmarks') }}" class="tabs-tab" role="tab" tabindex="0" aria-controls="{{ unique_id('accountMenuBookmarks') }}">{{ phrase('bookmarks') }}</a>
				</xf:if>
				<!--[XF:account_tabs:bottom]-->
			</xf:contentcheck>
			</span>
		</span>
	</h4>
	<xf:set var="$hasTabs" value="{{ true }}" />
</xf:if>

<xf:set var="$accountHtml">
	<div class="menu-row menu-row--alt">
		<xf:macro name="visitor_panel_row" />
	</div>

	<xf:macro name="visitor_panel_row">
		<div class="contentRow contentRow--alignMiddle">
			<div class="contentRow-figure">
				<span class="avatarWrapper">
					<xf:avatar user="{$xf.visitor}" size="s" href="" notooltip="true" />
					<xf:if is="$xf.visitor.canUploadAvatar()">
						<a class="avatarWrapper-update" href="{{ link('account/avatar') }}" data-xf-click="overlay"><span>{{ phrase('edit') }}</span></a>
					</xf:if>
				</span>
			</div>
			<div class="contentRow-main">
				<h3 class="contentRow-header"><xf:username user="$xf.visitor" rich="true" notooltip="true" /></h3>
				<div class="contentRow-lesser">
					<xf:usertitle user="$xf.visitor" />
				</div>
			</div>
		</div>
				<div class="contentRow-minor">
					<!--[XF:stats_pairs:above_messages]-->
					<dl class="pairs pairs--justified fauxBlockLink">
						<xf:if is="property('uix_visitorPanelIcons')">
							<xf:fa icon="fa-comments" />
						<xf:else />
							<dt>{{ phrase('messages') }}</dt>
						</xf:if>
						<dd>
							<a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="fauxBlockLink-linkRow u-concealed">
								{$xf.visitor.message_count|number}
							</a>
						</dd>
					</dl>
					<!--[XF:stats_pairs:above_reactions]-->
					<dl class="pairs pairs--justified fauxBlockLink">
						<xf:if is="property('uix_visitorPanelIcons')">
							<xf:fa icon="fa-thumbs-up" />
						<xf:else />
							<dt>{{ phrase('reaction_score') }}</dt>
						</xf:if>
						<dd>
							<a href="{{ link('account/reactions') }}" class="fauxBlockLink-linkRow u-concealed">
								{$xf.visitor.reaction_score|number}
							</a>
						</dd>
					</dl>
					<!--[XF:stats_pairs:above_points]-->
					<xf:if is="$xf.options.enableTrophies">
						<dl class="pairs pairs--justified fauxBlockLink">
							<xf:if is="property('uix_visitorPanelIcons')">
								<xf:fa icon="fa-trophy" />
							<xf:else />
								<dt>{{ phrase('trophy_points') }}</dt>
							</xf:if>
							<dd>
								<a href="{{ link('members/trophies', $xf.visitor) }}" data-xf-click="overlay" class="fauxBlockLink-linkRow u-concealed">
									{$xf.visitor.trophy_points|number}
								</a>
							</dd>
						</dl>
					</xf:if>
				</div>
	</xf:macro>

	<!--[XF:menu_separator:below_visitor_panel]-->
	<hr class="menu-separator menu-separator--hard" />

	<ul class="listPlain listColumns listColumns--narrow listColumns--together">
		<!--[XF:content_links:top]-->
		<xf:if is="$xf.options.enableNewsFeed">
			<li><a href="{{ link('whats-new/news-feed') }}" class="menu-linkRow">{{ phrase('news_feed') }}</a></li>
		</xf:if>
		<li><a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="menu-linkRow">{{ phrase('your_content') }}</a></li>
		<li><a href="{{ link('account/reactions') }}" class="menu-linkRow">{{ phrase('reactions_received') }}</a></li>
		<!--[XF:content_links:bottom]-->
	</ul>

	<!--[XF:menu_separator:below_content_links]-->
	<hr class="menu-separator" />

	<ul class="listPlain listColumns listColumns--narrow listColumns--together">
		<!--[XF:account_links:top]-->
		<li><a href="{{ link('account/account-details') }}" class="menu-linkRow">{{ phrase('account_details') }}</a></li>
		<li><a href="{{ link('account/security') }}" class="menu-linkRow">{{ phrase('password_and_security') }}</a></li>
		<li><a href="{{ link('account/privacy') }}" class="menu-linkRow">{{ phrase('privacy') }}</a></li>
		<li><a href="{{ link('account/preferences') }}" class="menu-linkRow">{{ phrase('preferences') }}</a></li>
		<xf:if is="$xf.visitor.canEditSignature()">
			<li><a href="{{ link('account/signature') }}" class="menu-linkRow">{{ phrase('signature') }}</a></li>
		</xf:if>
		<xf:if is="$xf.app.userUpgradeCount">
			<li><a href="{{ link('account/upgrades') }}" class="menu-linkRow">{{ phrase('account_upgrades') }}</a></li>
		</xf:if>
		<xf:if is="$xf.app.connectedAccountCount">
			<li><a href="{{ link('account/connected-accounts') }}" class="menu-linkRow">{{ phrase('connected_accounts') }}</a></li>
		</xf:if>
		<li><a href="{{ link('account/following') }}" class="menu-linkRow">{{ phrase('following') }}</a></li>
		<li><a href="{{ link('account/ignored') }}" class="menu-linkRow">{{ phrase('ignoring') }}</a></li>
		<!--[XF:account_links:bottom]-->
	</ul>

	<!--[XF:menu_separator:below_account_links]-->
	<hr class="menu-separator" />

	<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="menu-linkRow">{{ phrase('log_out') }}</a>

	<xf:if is="$xf.visitor.canPostOnProfile()">
		<xf:form action="{{ link('members/post', $xf.visitor) }}" ajax="true"
			data-redirect="off"
			data-reset-complete="true"
			data-no-auto-focus="true"
			class="menu-footer">

			<span class="u-srOnly" id="ctrl_message">{{ phrase('update_your_status:') }}</span>
			<xf:textarea name="message" rows="1" autosize="true"
				maxlength="{$xf.options.profilePostMaxLength}"
				placeholder="{{ phrase('update_your_status...') }}"
				data-xf-init="focus-trigger user-mentioner emoji-completer" data-display="< :next" aria-labelledby="ctrl_message" />
			<div class="u-hidden u-hidden--transition u-inputSpacer">
				<xf:button type="submit" class="button--primary" icon="reply">{{ phrase('post_verb') }}</xf:button>
			</div>
		</xf:form>
	</xf:if>
</xf:set>

<xf:if is="$hasTabs">
	<ul class="tabPanes">
		<li class="is-active" role="tabpanel" id="{{ unique_id('accountMenu') }}">
			{$accountHtml|raw}
		</li>
		<xf:if is="$xf.visitor.canViewBookmarks()">
			<li role="tabpanel" id="{{ unique_id('accountMenuBookmarks') }}"
				data-href="{{ link('account/bookmarks-popup') }}"
				data-load-target=".js-bookmarksMenuBody">
				<div class="js-bookmarksMenuBody">
					<div class="menu-row">{{ phrase('loading...') }}</div>
				</div>
				<div class="menu-footer menu-footer--close">
					<a href="{{ link('account/bookmarks') }}" class="js-bookmarkShowAllLink">{{ phrase('show_all...') }}</a>
				</div>
			</li>
		</xf:if>
		<!--[XF:account_tab_panes:bottom]-->
	</ul>
<xf:else />
	{$accountHtml|raw}
</xf:if>]]></template>
    <template title="account_wrapper" type="public" addon_id="XF" version_id="2010035" version_string="2.1.0 Beta 5"><![CDATA[<xf:sidenav>
	<div class="block">
		<div class="block-container">
			<h3 class="block-header">{{ phrase('your_account') }}</h3>
			<div class="block-body">
				<!--[XF:profile_links:top]-->
				<a class="blockLink" href="{{ link('members', $xf.visitor) }}">{{ phrase('your_profile') }}</a>
				<a class="blockLink {{ $pageSelected == 'alerts' ? 'is-selected' : '' }}" href="{{ link('account/alerts') }}">
					{{ phrase('alerts') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'reactions' ? 'is-selected' : '' }}" href="{{ link('account/reactions') }}">
					{{ phrase('reactions_received') }}
				</a>
				<xf:if is="$xf.visitor.canViewBookmarks()">
					<a class="blockLink {{ $pageSelected == 'bookmarks' ? 'is-selected' : '' }}" href="{{ link('account/bookmarks') }}">
						{{ phrase('bookmarks') }}
					</a>
				</xf:if>
				<!--[XF:profile_links:bottom]-->
			</div>

			<h3 class="block-minorHeader">{{ phrase('settings') }}</h3>
			<div class="block-body">
				<!--[XF:settings_links:top]-->
				<a class="blockLink {{ $pageSelected == 'account_details' ? 'is-selected' : '' }}" href="{{ link('account/account-details') }}">
					{{ phrase('account_details') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'security' ? 'is-selected' : '' }}" href="{{ link('account/security') }}">
					{{ phrase('password_and_security') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'privacy' ? 'is-selected' : '' }}" href="{{ link('account/privacy') }}">
					{{ phrase('privacy') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'preferences' ? 'is-selected' : '' }}" href="{{ link('account/preferences') }}">
					{{ phrase('preferences') }}
				</a>
				<xf:if is="$xf.visitor.canEditSignature()">
					<a class="blockLink {{ $pageSelected == 'signature' ? 'is-selected' : '' }}" href="{{ link('account/signature') }}">
						{{ phrase('signature') }}
					</a>
				</xf:if>
				<xf:if is="$xf.app.userUpgradeCount">
					<a class="blockLink {{ $pageSelected == 'upgrades' ? 'is-selected' : '' }}" href="{{ link('account/upgrades') }}">
						{{ phrase('account_upgrades') }}
					</a>
				</xf:if>
				<xf:if is="$xf.app.connectedAccountCount">
					<a class="blockLink {{ $pageSelected == 'connected_account' ? 'is-selected' : '' }}" href="{{ link('account/connected-accounts') }}">
						{{ phrase('connected_accounts') }}
					</a>
				</xf:if>
				<a class="blockLink {{ $pageSelected == 'following' ? 'is-selected' : '' }}" href="{{ link('account/following') }}">
					{{ phrase('following') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'ignored' ? 'is-selected' : '' }}" href="{{ link('account/ignored') }}">
					{{ phrase('ignoring') }}
				</a>
				<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="blockLink">{{ phrase('log_out') }}</a>
				<!--[XF:settings_links:bottom]-->
			</div>
		</div>
	</div>
</xf:sidenav>
<xf:page option="sideNavTitle">{{ phrase('your_account') }}</xf:page>

<xf:breadcrumb href="{{ link('account') }}">{{ phrase('your_account') }}</xf:breadcrumb>

{$innerContent|raw}]]></template>
    <template title="app.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[@_nav-elTransitionSpeed: @xf-animationSpeed;
@_navAccount-hPadding: @xf-paddingLarge;
@uix_sidebarNavBreakpoint: {{ property('pageWidthMax')  + 1 + ( 2 * (property('uix_sidebarNavWidth') + property('elementSpacer')) ) }}px;

.u-anchorTarget
{
	.m-stickyHeaderConfig(@xf-publicNavSticky);
	height: (@_stickyHeader-height + @_stickyHeader-offset);
	margin-top: -(@_stickyHeader-height + @_stickyHeader-offset);
}

@supports (scroll-padding-top: 10px)
{
	html:not(.has-browser-safari)
	{
		.m-stickyHeaderConfig(@xf-publicNavSticky);
		scroll-padding-top: (@_stickyHeader-height + @_stickyHeader-offset);
	}

	html:not(.has-browser-safari) .u-anchorTarget
	{
		height: 0;
		margin-top: 0;
	}
}

.uix_pageWidth--wrapped {
	width: 100%;
	<xf:if is="property('uix_pageStyle') == 'wrapped'">
		.m-pageWidth();
	</xf:if>
}

.p-pageWrapper
{
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	// .xf-pageBackground();

	.is-modalOverlayOpen &
	{
		& when (unit(xf-default(@xf-overlayMaskBlur, 0)) > 0)
		{
			filter: blur(@xf-overlayMaskBlur);
		}
	}
	
	flex-grow: 1;
	<xf:if is="property('uix_pageStyle') == 'wrapped'">
		.xf-uix_pageWrapper();
		@media (min-width: {{ property('responsiveEdgeSpacerRemoval') + 1 }}px) {
			margin-top: @xf-pageEdgeSpacer;
			margin-bottom: @xf-pageEdgeSpacer;
			padding: @xf-pageEdgeSpacer;
		}
	
		@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
			border: none;
			box-shadow: none;
		}
	</xf:if>
}

// RESPONSIVE HEADER

.p-offCanvasAccountLink
{
	display: none;
	
	.avatar {margin-right: 24px;}
}

@media (max-width: @xf-responsiveNarrow)
{
	.p-offCanvasAccountLink, .p-offCanvasRegisterLink
	{
		display: block;
	}
}

@media (max-width: @xf-pageWidthMax) {
	#uix_widthToggle--trigger {display: none;}
}

#uix_widthToggle--trigger:hover {cursor: pointer;}

.uix_page--fixed #uix_widthToggle--trigger .fa--xf:before {
	.m-faBase();
	.m-faContent(@fa-var-expand-alt);
}

{{ include('app_staffbar.less') }}
<xf:if is="{{ property('uix_viewportShowLogoBlock') }} != '100%'">
	{{ include('app_header.less') }}
</xf:if>
{{ include('app_stickynav.less') }}
{{ include('app_nav.less') }}
{{ include('app_sectionlinks.less') }}
{{ include('app_body.less') }}
{{ include('app_breadcrumbs.less') }}
{{ include('app_title.less') }}
{{ include('app_footer.less') }}
{{ include('app_inlinemod.less') }}
{{ include('app_ignored.less') }}
{{ include('app_username_styles.less') }}
{{ include('app_user_banners.less') }}
{{ include('app_alerts.less') }}
{{ include('app_content_vote.less') }}]]></template>
    <template title="app_alerts.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[.alert
{
	&.is-unread
	{
		.xf-contentHighlightBase();
	}
}

.alertToggler
{
	text-decoration: none !important;
	padding: @xf-paddingMedium;
	margin-right: -@xf-paddingMedium;

	.alert &
	{
		opacity: 0;
	}

	.alert:hover &,
	.has-touchevents &
	{
		opacity: 1;
	}
}

.alertToggler-icon
{
	font-size: .75em;
	font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);

	.is-unread &
	{
		font-weight: @faWeight-solid;
	}
}

<xf:if is="property('uix_iconFontFamily') != 'fontawesome'">
.alert {
	.alertToggler-icon:before {content: '\F0766';}
	&.is-unread .alertToggler-icon:before {content: '\F0765';}
}
</xf:if>]]></template>
    <template title="app_body.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ######################################### MAIN BODY #################################

.p-body
{
	display: flex;
	align-items: stretch;
	flex-grow: 1;
	min-height: 1px; // IE11 workaround - related to #139187
	position: relative;
}

.p-body-inner
{
	width: 100%;
	<xf:if is="property('uix_pageStyle') != 'wrapped'">
	.m-pageWidth();
	.m-pageInset();
	<xf:else />
	@media (min-width: {{ property('responsiveEdgeSpacerRemoval') + 1 }}px ) {
		flex-grow: 1;
	}
	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		.m-pageWidth();
		.m-pageInset(); 
	}
	</xf:if>
	transition: ease-in-out max-width .3s, ease-in-out left .3s, ease-in-out width .3s;
	display: flex;
	flex-direction: column;
	.m-clearFix();
	position: relative;
	left: 0;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: @xf-elementSpacer;

	.uix_page--fluid & {
		transition: @uix_moveIn max-width .3s, @uix_moveIn left .3s, @uix_moveIn width .3s;
	}

	&.p-body-inner-none {
		max-width: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/*
	> * {
	margin-bottom: 20px;

	&:last-child {margin-bottom: 0;}
}
	*/

	.p-body-header
	{
		margin-bottom: @xf-elementSpacer;
	}

}

.uix_contentWrapper {
	// margin-bottom: @xf-elementSpacer;
	flex-grow: 1;
	<xf:if is="property('uix_contentWrapper') == 1">
	padding: @xf-pageEdgeSpacer;
	.xf-uix_contentWrapperStyle();
	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		padding: {{ property('pageEdgeSpacer') / 2 }}px;
	margin-left: -{{ property('pageEdgeSpacer') / 2 }}px;
margin-right: -{{ property('pageEdgeSpacer') / 2 }}px;
border: none;
box-shadow: none;
}
</xf:if>
}

.p-body-main
{
	// display: table;
	table-layout: fixed;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
	margin-bottom: auto;
	min-height: 1px; // IE11 workaround - related to #139187
}

.p-body-content
{
	// display: table-cell;
	vertical-align: top;
	@media ( min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
		<xf:if is="{{ property('uix_sidebarLocation') == 'right' }}">
		transition: ease-in width .2s, ease-in max-width .2s;

		.uix_sidebarCollapsed & {
			transition: ease-in width .2s .2s, ease-in max-width .2s .2s;
		}
		<xf:else />
		transition: @uix_moveOut width .2s, ease-in max-width .2s;
		.uix_sidebarCollapsed & {
			transition: ease-in width .2s .2s, ease-in max-width .2s .2s;
		}
		</xf:if>
}
	flex-grow: 1;
	max-width: 100%;
	width: 100%;

	.p-body-main--withSidebar &,
	.p-body-main--withSideNav &
	{
		// don't let the ad overflow the sidebar area -- this can happen due to how the Adsense JS works
		ins.adsbygoogle
		{
			// -10px gives a little buffer or helps account for no scrollbar being considered
			max-width: calc(~'100vw - 10px - @{xf-pageEdgeSpacer} - @{xf-pageEdgeSpacer} - @{xf-sidebarWidth} - @{xf-sidebarSpacer}');

			@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px )
			{
				// window wider than the max width, so limit to the display area without the sidebar
				max-width: calc(~'@{xf-pageWidthMax} - @{xf-pageEdgeSpacer} - @{xf-pageEdgeSpacer} - @{xf-sidebarWidth} - @{xf-sidebarSpacer}');
			}

			@media (max-width: @xf-uix_sidebarBreakpoint)
			{
				// sidebar/sidenav have been moved/hidden
				max-width: 100vw;
			}
		}
	}

	.p-body-main--withSideNav &
	{
		@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
			width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
			max-width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
			display: inline-block;
		}
	}

	.p-body-main--withSidebar &
	{
		@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
			width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
			max-width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
			display: inline-block;
		}
	}

	@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
		.p-body-main--withSidebar.p-body-main--withSideNav & {
			width: calc(~"100% - {{ (property('sidebarWidth') + property('elementSpacer')) * 2 }}px");
			max-width: calc(~"100% - {{ (property('sidebarWidth') + property('elementSpacer')) * 2 }}px");
			display: inline-block;
		}
	}
}

.p-body-pageContent
{
	> .tabs--standalone:first-child
	{
		margin-bottom: (@xf-elementSpacer) / 2;
	}
}

.p-body-pageContent {
	<xf:if is="property('uix_contentWrapper') == 2">
	.xf-uix_contentWrapperStyle();
	padding: @xf-pageEdgeSpacer;

	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		padding: {{ property('pageEdgeSpacer') / 2 }}px;
	margin-left: -{{ property('pageEdgeSpacer') / 2 }}px;
margin-right: -{{ property('pageEdgeSpacer') / 2 }}px;
border: none;
box-shadow: none;
}
</xf:if>
}

.p-body-sideNav
{
	display: table-cell;
	vertical-align: top;
	width: @xf-sidebarWidth;
	float: left;
}

.p-body-sideNavTrigger
{
	display: none;
}

.p-body-sidebar
{
	// display: table-cell;
	display: inline-block;
	vertical-align: top;
	width: @xf-sidebarWidth;

	.contentRow-figure .avatar--m
	{
		// make these avatars a bit smaller in the sidebar so the content has more space
		.m-avatarSize(@avatar-m * 2 / 3);
	}
}

.p-body-sideNavCol,
.p-body-contentCol,
.p-body-sidebarCol
{
	display: table-column;
}

.p-body-sideNavCol,
.p-body-sidebarCol
{
	width: @xf-sidebarWidth;
}

// .block[data-widget-id],
.p-body-sideNav,
.p-body-sidebar,
// .uix_extendedFooterRow,
.columnContainer-sidebar {
	.block-container {
		.xf-uix_sidebarWidgetWrapper();
	}

	.block-minorHeader,
	.block-header
	{
		display: flex;
		align-items: center;
		padding: @xf-uix_widgetPadding;
		.xf-uix_sidebarWidgetHeading();
	}

	.block-minorHeader:before,
	.block-header:before {
		.m-faBase();
		font-size: @xf-uix_iconSize !important;
		padding-right: @xf-paddingMedium;
		color: @xf-textColorMuted;
	}

	.block-footer {
		padding: @xf-uix_widgetPadding;
		.xf-uix_sidebarWidgetFooter();
	}

	.block-row {
		padding: @xf-uix_widgetPadding;
		.xf-uix_sidebarBlockRow();
	}
}

// ----  Widget icons -----

.p-body-sidebar .block .block-minorHeader:before,
.p-body-sideNavContent .block .block-minorHeader:before, 
.p-body-sidebar .block .block-header:before,
.uix_extendedFooterRow .block .block-minorHeader:before,
.p-body-sideNavContent .block .block-header:before{
	.m-faBase();
}

// .block[data-widget-definition],
// .block[data-widget-key], 
.p-body-sideNav, .p-body-sidebar, .uix_extendedFooterRow {
	<xf:if is="{{ property('uix_defaultSidebarIcon') }}">
	.block-minorHeader:before,
	.block-header:before, {
		.m-faContent(@fa-var-file-alt);
	}
	</xf:if>

	.block[data-widget-definition="th_userNavigation"] .block-minorHeader:before {
		.m-faContent(@fa-var-user);
	}
	.block[data-widget-definition="members_online"] .block-minorHeader:before {
		.m-faContent(@fa-var-users);
	}
	.block[data-widget-definition="board_totals"] .block-minorHeader:before,
	.block[data-widget-definition="online_statistics"] .block-minorHeader:before,
	.block[data-widget-definition="forum_statistics"] .block-minorHeader:before {
		.m-faContent(@fa-var-chart-bar);
	}
	.block[data-widget-definition="share_page"] .block-minorHeader:before {
		.m-faContent(@fa-var-share);
	}
	.block[data-widget-definition="most_messages"] .block-minorHeader:before {
		.m-faContent(@fa-var-comments);
	}
	.block[data-widget-definition="find_member"] .block-minorHeader:before {
		.m-faContent(@fa-var-search);
	}
	.block[data-widget-definition="new_threads"] .block-minorHeader:before,
	.block[data-widget-definition="new_profile_posts"] .block-minorHeader:before,
	.block[data-widget-definition="new_posts"] .block-minorHeader:before{
		.m-faContent(@fa-var-comment);
	}
	.block[data-widget-definition="birthdays"] .block-minorHeader:before{
		.m-faContent(@fa-var-birthday-cake);
	}
	.block[data-widget-definition="th_navigation"] .block-minorHeader:before{
		.m-faContent(@fa-var-list);
	}
	body .block[data-widget-key="thuix_footer_facebookWidget"] .block-minorHeader:before {
		.m-faBase('Brands');
		.m-faContent(@fa-var-facebook);
	}
	body .block[data-widget-definition="thuix_footer_twitterWidget"] .block-minorHeader:before{
		.m-faBase('Brands');
		.m-faContent(@fa-var-twitter);
	}
	form[data-xf-init*="poll-block"] .block-minorHeader:before {
		.m-faContent(@fa-var-poll);
	}
}

// xpress WP widget support

.p-body-sidebar .block-xpress {
	.block-minorHeader:before {
		.m-faContent(@fa-var-file-alt);
	}
	&.widget_media_gallery .block-minorHeader:before,
	&.widget_media_audio .block-minorHeader:before {
		.m-faContent(@fa-var-image);
	}
	&.widget_calendar .block-minorHeader:before {
		.m-faContent(@fa-var-calendar);
	}
	&.widget_recent_comments .block-minorHeader:before {
		.m-faContent(@fa-var-comments);
	}
	&.widget_search .block-minorHeader:before {
		.m-faContent(@fa-var-search);
	}
}

<xf:if is="!property('uix_sidebarIcons')">
.p-body-sidebar .block .block-minorHeader:before,
.p-body-sideNavContent .block .block-minorHeader:before, 
.p-body-pageContent .block .block-minorHeader:before,
.p-body-sidebar .block .block-header:before,
.p-body-sideNavContent .block .block-header:before, 
.p-body-pageContent .block .block-header:before {display: none !important;}
</xf:if>

<xf:if is="!property('uix_footerIcons')">
.uix_extendedFooterRow .block .block-minorHeader:before {display: none !important;}
</xf:if>

.uix_extendedFooterRow .block-minorHeader:before {
	font-size: @xf-uix_iconSize !important;
	padding-right: @xf-paddingMedium;
}

<xf:if is="property('uix_visitorPanelIcons')">
	.block[data-widget-definition="visitor_panel"]

	.pairs {
		dt:after {display: none;}
	}
</xf:if>

.p-body-content,
.p-body-sideNav,
.p-body-sideNavContent,
.uix_sidebarInner
{
	> :first-child
	{
		margin-top: 0;
	}

	> :last-child
	{
		margin-bottom: 0;
	}
}

@media (max-width: @xf-uix_sidebarBreakpoint )
{

	.p-body-sideNavCol,
	.p-body-contentCol,
	.p-body-sidebarCol
	{
		display: none;
		width: auto;
	}

	/*
	.p-body-main,
	.p-body-content
	{
	display: block;
}
	*/

	.p-body-content {flex-grow: 1; width: 100%;}

	.p-body-sideNav
	{
		display: block;
		width: 100%;
	}

	.p-body-sideNavTrigger
	{
		margin-bottom: ((@xf-elementSpacer) / 2);
		text-align: center;

		.button:before
		{
			.m-faBase();
			font-size: 120%;
			vertical-align: middle;
			display: inline-block;
			margin: -4px 6px -4px 0;
			.m-faContent(@fa-var-bars); //, .88em
		}

		.has-js &
		{
			display: block;
		}
	}

	.has-js .p-body-sideNavInner:not(.offCanvasMenu)
	{
		display: none;

		.m-transitionFadeDown();
	}

	.has-no-js .p-body-sideNavInner
	{
		margin-bottom: @xf-elementSpacer;
	}

	.p-body-sidebar
	{
		width: 100%;
		float: none;
		order: 1;
		flex-grow: 1;
		display: block;
		margin-top: @xf-elementSpacer;

		.uix_sidebarInner {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			flex-grow: 1;
			margin: 0 -((@xf-pageEdgeSpacer) / 2);
		}

		.uix_sidebarInner .uix_sidebar--scroller > *
		{
			margin: 0 ((@xf-pageEdgeSpacer) / 2) @xf-elementSpacer;
			min-width: @xf-sidebarWidth;
			flex: 1 1 @xf-sidebarWidth;

			.block-container {
				margin-left: 0;
				margin-right: 0;
			}

			&:last-child
			{
				margin-bottom: @xf-elementSpacer;
			}
		}

		.uix_sidebarInner.offCanvasMenu-content .uix_sidebar--scroller > * {
			flex: auto;
			min-width: 0;
		}

		// add an invisible block to ensure that the last row has the correct widths
		&:after
		{
			display: block;
			content: '';
			height: 0;
			margin: 0 ((@xf-pageEdgeSpacer) / 2);
			min-width: @xf-sidebarWidth;
			flex: 1 1 @xf-sidebarWidth;
		}

		.block-container
		{
			display: flex;
			flex-direction: column;
			height: 100%;

			.block-footer
			{
				margin-top: auto;
			}
		}
	}

	.p-body-main--withSideNav,
	.p-body-main--withSidebar
	{
		.p-body-content { padding: 0; }
	}
}

.uix_sidebarCollapsed .uix_sidebarInner {
	overflow: hidden;
}

@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
	.p-body-sideNavContent
	{
		// this is likely to contain blocks that overflow the container so account for that
		margin: 0 -@xf-pageEdgeSpacer;
		padding: 0 @xf-pageEdgeSpacer;

		.offCanvasMenu &
		{
			margin: 0;
			padding: 0;
		}
	}

	.p-body-sidebar
	{
		display: block;
		margin-left: 0;
		margin-right: 0;

		.uix_sidebarInner > *
		{
			// margin-left: 0;
			// margin-right: 0;
			min-width: 0;
		}
	}
}]]></template>
    <template title="app_breadcrumbs.less" type="public" addon_id="XF" version_id="2020070" version_string="2.2.0"><![CDATA[.breadcrumb {
	<xf:if is="property('uix_pageStyle') == 'fixed'">
	.m-pageWidth();
	</xf:if>

	.pageContent {
		<xf:if is="property('uix_pageStyle') != 'fixed'">
		.m-pageWidth();
		</xf:if>
	}
	
	.p-body-inner & {
		max-width: 100%;
		width: 100%;
		padding-left: 0;
		padding-right: 0;

		.pageContent {
			max-width: 100%;
			width: 100%;		
			padding-left: 0;
			padding-right: 0;
		}
	}
}


.p-pageWrapper .breadcrumb {
	@media (min-width: @xf-responsiveNarrow) {
		.xf-uix_breadcrumbWrapper();
	}
	
	&.p-breadcrumb--bottom {
		.xf-uix_breadcrumbWrapperBottom();
	}
	
	.pageContent {
		display: flex;
		align-items: center;
		
		> *:not(:last-child) {margin-right: @xf-paddingMedium;}
	}
	
	.uix_breadcrumb--opposite {
		margin-left: auto;
		display: inline-flex;
		align-items: center;
		
		> *:not(:last-child) {margin-right: 5px;}
	}
}

.p-breadcrumbs
{
	.m-listPlain();
	.m-clearFix();

	// margin-bottom: 5px;
	// line-height: 1.5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-grow: 1;
	@media (min-width: @xf-responsiveNarrow) {
		.xf-uix_breadcrumbStyle();
	}
	
	i {font-size: @xf-uix_iconSize;}

	&.p-breadcrumbs--bottom
	{
		// margin-top: @xf-elementSpacer;
		margin-bottom: 0;
	}

	> li
	{
		float: left;
		font-size: @xf-fontSizeSmall;
		display: flex;
		align-items: center;
		font-size: inherit;

		a
		{
			display: inline-block;
			vertical-align: bottom;
			max-width: 300px;
			.m-overflowEllipsis();
			.xf-uix_breadcrumbItem();
		}

		&:after,
		&:before
		{
			.m-faBase();
			// font-size: 90%;
			// color: @xf-textColorMuted;
		}

		&:after
		{
			.m-faContent(@fa-var-angle-right, false ltr); //, .5em
			.m-faContent(@fa-var-angle-left, false, rtl); //, .5em
			margin: 0 .5em;
		}
		
		&:first-child {
			padding-left: 0;
		}

		&:last-child
		{
			
			&:after {display: none;}
			a
			{
				font-weight: @xf-fontWeightHeavy;
				.xf-uix_breadcrumbItem__active();
				
				
			}
		}
	}
}

@media (max-width: @xf-responsiveMedium)
{
	.p-breadcrumbs > li a
	{
		max-width: 200px;
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.p-breadcrumbs
	{
		> li
		{
			font-size: @xf-fontSizeSmallest;
			display: none;
			padding-left: 0;
			
			a {
				display: inline-flex;
				align-items: center;				
			}

			&:last-child
			{
				// display: block;
				display: flex;
			}

			a
			{
				max-width: 90vw;
				color: inherit !important;
				&:hover {text-decoration: none;}
			}

			&:after
			{
				display: none;
			}

			a:before
			{
				.m-faBase();
				.m-faContent(@fa-var-chevron-left, .72em, ltr);
				.m-faContent(@fa-var-chevron-right, .72em, rtl);
				// margin-right: .5em;
				font-size: @xf-uix_iconSizeLarge !important;
				color: inherit;
			}
		}
	}
}]]></template>
    <template title="app_footer.less" type="public" addon_id="XF" version_id="2010032" version_string="2.1.0 Beta 2"><![CDATA[// ######################################### FOOTER #################################

<xf:comment> may have been removed at xf2 beta
.p-footer-debug-list
 {
	 // color: xf-default(@xf-publicFooterLink--color, inherit);

	.pairs--debug
	{
		display: inline;
		padding-right: 4px;

		> dt,
		> dd
		{
			display: inline;
			color: inherit;

			a {padding: 0;}
		}
	}
 }
</xf:comment>

.p-footer
{
	display: flex;
	flex-direction: column;
	.xf-publicFooter();

	// a {.xf-publicFooterLink();}
}

.p-footer-inner
{
	order: @xf-uix_footerMenuOrder;
	<xf:if is="property('uix_pageStyle') != 'covered' && !property('uix_forceCoverFooterMenu')">
		.m-pageWidth();
		.m-pageInset();
	</xf:if>
	padding-top: @xf-paddingMedium;
	padding-bottom: @xf-paddingMedium;
	.xf-uix_footerMenu();

	.pageContent {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		<xf:if is="property('uix_pageStyle') == 'covered' || property('uix_forceCoverFooterMenu')">
			.m-pageWidth();
			.m-pageInset();
			<xf:if is="(property('uix_pageStyle') != 'wrapped')">
				padding:0;
			</xf:if>
		</xf:if>
	}

	a {
		.xf-publicFooterLink();
	}
}

.p-footer-copyrightRow {
	order: @xf-uix_copyrightOrder;
	<xf:if is="property('uix_pageStyle') != 'covered' && !property('uix_forceCoverCopyright')">
	.m-pageWidth();
	.m-pageInset();
	</xf:if>
	.xf-uix_footerCopyrightRow();

	.pageContent {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		<xf:if is="property('uix_pageStyle') == 'covered' || property('uix_forceCoverCopyright')">
			.m-pageWidth();
			.m-pageInset();
			<xf:if is="(property('uix_pageStyle') != 'wrapped')">
				padding:0;
			</xf:if>
		</xf:if>
	}

	.p-footer-debug-list li a {
		color: inherit;

		&:hover {color: inherit; text-decoration: underline;}
	}
}

/* commented out in beta 1 (Ian)
.p-footer-row
{
	.m-clearFix();

	margin-bottom: -@xf-paddingLarge;
}

.p-footer-row-main
{
	float: left;
	margin-bottom: @xf-paddingLarge;
}

.p-footer-row-opposite
{
	float: right;
	margin-bottom: @xf-paddingLarge;
}
*/

.p-footer-linkList
{
	.m-listPlain();
	// .m-clearFix();
	display: inline-flex;
	flex-wrap: wrap;
    align-items: center;
	> li
	{
		/* commented out in beta 1 (Ian)
		float: left;
		margin-right: .5em;
		margin: @xf-paddingMedium;
		*/

		&:last-child
		{
			margin-right: 0;
		}

		a
		{
			padding: 6px;
			border-radius: @xf-borderRadiusSmall;
			display: inline-block;

			&:hover
			{
				.xf-uix_footerLinkHover();
				text-decoration: none;
				// background-color: fade(@xf-publicFooterLink--color, 10%);
			}
		}
	}

	&.p-footer-choosers {
		margin: -6px;
		a {
			margin: 6px;
			.xf-uix_footerChooser();


			&:hover {.xf-uix_footerChooserHover();}

			// i {display: none;}
		}
	}
}

.p-footer-rssLink
{
	> span
	{
		position: relative;
		top: -1px;

		display: inline-block;
		width: 1.44em;
		height: 1.44em;
		line-height: 1.44em;
		text-align: center;
		font-size: .8em;
		background-color: #FFA500;
		border-radius: 2px;
	}

	.fa-rss
	{
		color: white;
	}
}

/*
.p-footer-copyright
{
	margin-top: @xf-elementSpacer;
	text-align: center;
	font-size: @xf-fontSizeSmallest;
}

.p-footer-debug
{
	margin-top: @xf-paddingLarge;
	text-align: right;
	font-size: @xf-fontSizeSmallest;
}
*/

@media (max-width: @xf-responsiveMedium)
{
	.p-footer-row-main,
	.p-footer-row-opposite
	{
		float: none;
	}

	.p-footer-copyright
	{
		text-align: left;
		padding: 0 4px; // aligns with other links
	}
}]]></template>
    <template title="app_header.less" type="public" addon_id="XF" version_id="2020034" version_string="2.2.0 Beta 4"><![CDATA[// MAIN HEADER ROW

.p-header
{
	.xf-publicHeader();
	<xf:if is="property('uix_pageStyle') == 'fixed'">
		.m-pageWidth();
	</xf:if>

	.p-header-logo img {max-width: @xf-uix_logoWidth;}

	a
	{
		color: inherit;
	}
	
	.p-header-logo img {width: 100%;}
}

.p-header-inner
{
	.m-pageInset();
	<xf:if is="property('uix_pageStyle') != 'fixed'">
		.m-pageWidth();
	</xf:if>
	position: relative;
}

.p-header-content
{
	// padding: @xf-paddingMedium 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	max-width: 100%;
	
	<xf:if is="property('uix_viewportCenterLogo') == '100%'">
		justify-content: center;
		flex-direction: column;
		
		.p-nav-opposite {margin-top: @xf-paddingLarge; margin-left: 0;}
		.p-header-logo {margin-right: 0;}
	</xf:if>
	
	@media (max-width: @xf-uix_viewportCenterLogo) {
		justify-content: center;
		flex-direction: column;
		
		.p-nav-opposite {margin-top: @xf-paddingLarge; margin-left: 0;}
		.p-header-logo {margin-right: 0;}
	}
}

.p-header-logo
{
	vertical-align: middle;
	// margin-right: auto;

	a
	{
		color: inherit;
		text-decoration: none;
	}

	&.p-header-logo--text
	{
		font-size: @xf-fontSizeLargest;
	}

	&.p-header-logo--image
	{
		img
		{

			&[src$="/xenforo-logo.svg"]
			{
				height: 36px;
			}
			// vertical-align: bottom;
			// max-width: 100%;
			// max-height: 200px;
		}
	}

	.uix_logoIcon {.xf-uix_logoIconStyle();}
}


@media (max-width: @xf-responsiveNarrow)
{
	.p-header-logo
	{
		// max-width: 100px;

		&.p-header-logo--text
		{
			font-size: @xf-fontSizeLarge;
			font-weight: @xf-fontWeightNormal;
			.m-overflowEllipsis();
		}
	}

	.p-navgroup-link
	{
		.p-navGroup--member &
		{
			margin-left: 5px;

			&:first-of-type
			{
				margin-left: 0;
			}
		}

	}
}
]]></template>
    <template title="app_inlinemod.less" type="public" addon_id="XF" version_id="2020031" version_string="2.2.0 Beta 1"><![CDATA[// #################################### INLINE MOD BUTTON ################

.inlineModButton
{
	display: inline-block;
	position: relative;

	i:before
	{
		display: inline-block;
		.m-faBase();
		.m-faContent(@fa-var-check-square, 1em); //, .88em
		vertical-align: -1px;
		font-size: 1.2em;
		margin: -.2em 0;
		line-height: 1;
	}

	&.inlineModButton--noIcon i
	{
		display: none;
	}

	&.is-mod-active
	{
		color: @xf-textColorAttention;

		.inlineModButton-count
		{
			display: inline;
		}
	}

	&:not(.inlineModButton--withLabel)
	{
		.inlineModButton-label
		{
			.m-visuallyHidden();
		}
	}
}

.inlineModButton-count
{
	display: none;
	position: absolute;
	top: -3px;
	left: -6px;
	.xf-contentHighlightBase();
	border: @xf-borderSize solid @xf-borderColorAccentContent;
	border-radius: @xf-borderRadiusSmall;
	padding: 1px 2px;
	font-size: 9px;
	line-height: 1;

	.inlineModButton--noIcon &
	{
		position: static;
		font-size: 80%;
		padding-top: 0;
		padding-bottom: 0;
	}
}

// #################################### INLINE MOD BAR ################

.inlineModBar
{
	.xf-inlineModBar();
	.m-transitionFadeDown();
	.m-clearFix();

	.input,
	.button
	{
		padding-top: @xf-paddingSmall;
		padding-bottom: @xf-paddingSmall;
		height: auto;
		line-height: inherit;
	}

	&.is-active:first-of-type
	{
		.m-dropShadow(0, 0, 8px, 3px, 0.3);
	}
}

.inlineModBar-inner
{
	.m-pageWidth();
	.m-pageInset();

	display: flex;
	align-items: center;
}

.inlineModBar-controls
{
	.m-listPlain();
	margin-right: auto;

	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: 35px;
	max-width: 100%;

	> li
	{
		float: left;
		display: inline-block;
		margin-right: 1em;

		&:last-child
		{
			margin-right: 0;
		}
	}
}

.inlineModBar-close
{
	float: right;
	margin-left: 1em;
	order: 2;
}

.inlineModBar-title
{
	font-weight: @xf-fontWeightHeavy;
}

.button.inlineModBar-goButton
{
	font-size: @xf-fontSizeNormal;
	line-height: 1.5; // matches select
	min-width: 0;
}

.inlineModBarCover
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	cursor: pointer;
}]]></template>
    <template title="app_nav.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[// navEl / Navigation Elements for header navigation

.p-navEl
{
	.m-clearFix();
	display: inline-flex;
	align-items: center;
}

.p-navEl-linkHolder
{
	float: left;
}

.p-navEl-link
{
	float: left;
	// .m-transition(opacity, background; @_nav-elTransitionSpeed);
	text-decoration: none !important;
	max-height: 100%;

	&.p-navEl-link--menuTrigger
	{
		cursor: pointer;

		&:after
		{
			.m-menuGadget(); // .58em
			opacity: .5;
			.m-transition(opacity; @_nav-elTransitionSpeed);
		}

		&:hover:after
		{
			opacity: 1;
		}
	}
}

.p-navEl-splitTrigger
{
	float: left;
	opacity: .5;
	cursor: pointer;
	text-decoration: none;
	.m-transition(all; @_nav-elTransitionSpeed);

	&:after
	{
		.m-menuGadget(); // .58em
		line-height: 1;
	}

	&:hover
	{
		opacity: 1;
		text-decoration: none;
	}
}

// HEADER NAV ROW

.p-nav
{
	.xf-publicNav();
	<xf:if is="property('uix_pageStyle') == 'fixed'">
		.m-pageWidth();
	</xf:if>

	transition: ease-in .15s all;

	a:not(.button)
	{
		color: inherit;
	}

	.p-navSticky.is-sticky &
	{
		.p-nav-list .p-navEl.is-selected,
		.p-account
		{
			border-radius: 0;
		}
	}
}

a.uix_logo {
	text-decoration: none;
}

.p-nav-inner
{

	<xf:if is="property('uix_pageStyle') == 'covered'">
		.m-pageWidth();
                .m-pageInset(0px);
	</xf:if>
	position: relative;
	<xf:if is="property('uix_navigationBarHeight')">
		height: @xf-uix_navigationBarHeight;
	</xf:if>

	.p-header-logo {
		display: inline-flex;
		align-items: center;
		margin-right: @xf-paddingLarge;
		
		.uix_logo {
			display: flex;
		}

		&.p-header-logo--image img {
			max-height: calc(@xf-uix_navigationBarHeight - (@xf-uix_navLogoVertSpacing * 2));

			.is-sticky & {
				max-height: calc(@xf-uix_stickyNavHeight - (@xf-uix_navLogoVertSpacing * 2));
			}
		}
	}

	.m-clearFix();
	display: flex;
	align-items: center;
}

.p-nav .uix_activeNavTitle {
	.xf-uix_activeNavTitleStyle();
	display: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	@media (max-width: @xf-publicNavCollapseWidth) and (min-width: @xf-responsiveNarrow) {
		display: inline-block;
	}
}

.p-nav .p-nav-menuTrigger
{
	display: none;
	vertical-align: middle;
	align-self: center;
	// margin-left: max(0px, @xf-pageEdgeSpacer - 6px);
	margin-right: 5px;
	padding: 0 8px;

	&:hover
	{
		text-decoration: none;
		cursor: pointer;
	}

	i:after
	{
		.m-faBase();
		font-size: @xf-fontSizeLargest;
		.m-faContent(@fa-var-bars);
		vertical-align: bottom;
		font-size: @xf-uix_iconSizeLarge;
	}

	.p-nav-menuText
	{
		display: none;
	}
}
<xf:if is="property('uix_logoSmall')">
.uix_logoSmall
{
	<xf:if is="property('uix_brandmarkImage__breakpoint') != '100%'">
		display: none;
	</xf:if>
	// max-width: 100px;
	align-self: center;

	img
	{
		display: block;
		max-height: @header-navHeight;

		&:not([src$=".svg"])
		{
			width: auto;
		}
	}
}

<xf:if is="property('uix_brandmarkImage__breakpoint') == '100%'">
	.p-header-logo.p-header-logo--image .uix_logo {display: none;}
</xf:if>

@media (max-width: {{ property('uix_brandmarkImage__breakpoint') - 1 }}px) {
	.uix_logoSmall {display: inline-block;}
	.p-header-logo.p-header-logo--image .uix_logo {display: none;}
}
</xf:if>

.uix_logo--text {
	display: flex;
	align-items: center;
	white-space: nowrap;
	.xf-uix_logoText__style();
	
	&:hover {
		text-decoration: none;
	}
}

<xf:if is="property('uix_logoTextBreakpoint')">
@media (max-width: @xf-uix_logoTextBreakpoint) {
	.uix_logo--text {font-size: @xf-uix_responsiveLogoFontSize;}
}
</xf:if>

.p-nav-scroller
{
	margin-right: auto;
	max-width: 100%;

	.hScroller-scroll:not(.is-calculated)
	{
		// IE11 seems to want to flash a vertical scrollbar without this here
		overflow: hidden;
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-publicNav--background-color, transparent),
			xf-default(@xf-publicNav--color, ~""),
			xf-intensify(@xf-publicNav--color, 10%)
		);
	}
}

.p-nav-list
{
	.m-listPlain();
	.m-clearFix();
	display: flex;
	align-items: center;

	font-size: 0;

	// this applies padding that will be contained within the scroller.
	// it needs font-size 0 to not create extra space though
	/*
	&:before,
	&:after
	{
		display: inline-block;
		width: @xf-pageEdgeSpacer;
		content: '';
	}
	*/

	> li
	{
		display: inline-block;
		vertical-align: bottom;
		font-size: @xf-fontSizeNormal;

		&:first-child
		{
			margin-left: 0;
		}
	}

	.badgeContainer:after {margin-left: 4px;}

	.m-navElHPadding(@xf-publicNavPaddingH);

	.p-navEl
	{
		.xf-publicNavTab();
		.m-transition(all; @_nav-elTransitionSpeed);

		&.is-selected
		{
			.xf-publicNavSelected();

			.p-navEl-link
			{

				<xf:if is="{{ property('uix_viewportWidthRemoveSubNav') }} != '100%'">
				@media (min-width: {{ property('uix_viewportWidthRemoveSubNav') + 1 }}px ) {
					padding-right: @xf-publicNavPaddingH; // since the split trigger is hidden
				}
				</xf:if>

				&:hover
				{
					background: none;
					text-decoration: none;
					color: inherit;
				}
			}

			.p-navEl-splitTrigger
			{
				<xf:if is="{{ property('uix_viewportWidthRemoveSubNav') }} != '100%'">
					@media (min-width: {{ property('uix_viewportWidthRemoveSubNav') + 1 }}px ) {
						display: none;
					}
				</xf:if>
			}
		}

		&:not(.is-selected):not(.is-menuOpen)
		{
			&:hover,
			// .p-navEl-link:hover,
			// .p-navEl-splitTrigger:hover
			{
				.xf-publicNavTabHover();
			}

			.p-navEl-link:hover,
			.p-navEl-splitTrigger:hover {
				text-decoration: none;
				color: inherit;
			}
		}

		&.is-menuOpen
		{
			.xf-publicNavTabMenuOpen();
			border-top-left-radius: xf-default(@xf-publicNavSelected--border-top-left-radius, 0);
			border-top-right-radius: xf-default(@xf-publicNavSelected--border-top-right-radius, 0);
			// .m-dropShadow(0, 5px, 10px, 0, .35);
			a
			{
				// text-decoration: none;
				// opacity: 1;
			}
		}

	}

	.p-navEl-link,
	.p-navEl-splitTrigger
	{
		padding-top: @xf-publicNavPaddingV;
		padding-bottom: @xf-publicNavPaddingV;
		display: inline-flex;
		align-items: center;

		&:hover {background: none !important;}
	}
}

.p-navSticky--primary.is-sticky
{
	.p-nav-list
	{
		.p-navEl-link.p-navEl-link--splitMenu
		{
			padding-right: ((@xf-publicNavPaddingH) / 4);
		}

		.p-navEl.is-selected .p-navEl-splitTrigger
		{
			display: inline;
			position: relative;

			&:before
			{
				content: '';
				position: absolute;
				left: 0;
				top: 5px;
				bottom: 5px;
				width: 0;
				border-left: @xf-borderSize solid fade(xf-default(@xf-publicNavSelected--color, transparent), 35%);
			}
		}
	}
}

@media (max-width: @xf-publicNavCollapseWidth)
{
	.has-js
	{
		.p-nav-inner
		{
			// min-height: 45px;
		}
		.p-nav .p-nav-menuTrigger
		{
			display: inline-flex;
		}
		.p-sectionLinks .p-sectionLinks--group {
			display: none;
		}
		.p-nav-scroller
		{
			display: none;
		}
	}
}

// ACCOUNT/VISITOR/SEARCH SECTION

.p-nav-opposite
{
	margin-left: auto;
	// margin-right: @xf-pageEdgeSpacer;
	text-align: right;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
}

.p-navgroup
{
	float: left;
	.m-clearFix();
	// background: @xf-publicHeaderAdjustColor;
	border-top-left-radius: @xf-borderRadiusMedium;
	border-top-right-radius: @xf-borderRadiusMedium;
	display: inline-flex;

	&.p-discovery
	{
		// margin-left: .5em;

		&.p-discovery--noSearch
		{
			margin-left: 0;
		}
		// i {line-height: 1;}

	}

	.p-navgroup-linkText {padding-left: @xf-paddingSmall;}
}

<xf:if is="property('uix_removeVisitorTabsText')">
@media (max-width: @xf-uix_viewportRemoveVisitorTabsText) {
	.p-navgroup.p-navgroup--member .p-navgroup-linkText, .p-discovery .p-navgroup-linkText {display: none;}
	
	.p-navgroup.p-navgroup--member .p-navgroup-link i,
	.p-navgroup.p-discovery .p-navgroup-link i {
		&:after, &:before {
			font-size: @xf-uix_iconSizeLarge;
		}
	}
}
</xf:if>

<xf:if is="property('uix_removeRegisterText')">
@media (max-width: @xf-uix_viewportRemoveRegisterText) {
	.p-navgroup--guest .p-navgroup-linkText {display: none;}
	
	.p-navgroup.p-navgroup--guest .p-navgroup-link i {
		&:after, &:before {
			font-size: @xf-uix_iconSizeLarge;
		}
	}	
}
</xf:if>

<xf:if is="property('uix_condenseVisitorTabs')">
@media (max-width: @xf-uix_viewportCondenseVisitorTabs) {
	.p-account.p-navgroup--member {
		.p-navgroup-link--conversations {display: none;}
		.p-navgroup-link--alerts {display: none;}
	}
}
</xf:if>

.p-navgroup-link
{
	float: left;
	padding: (@xf-publicNavPaddingV / 2);
	// border-left: 1px solid @xf-publicHeaderAdjustColor;
	display: inline-flex;
	align-items: center;

	<xf:if is="property('uix_removeVisitorTabsText')">
	@media (max-width: @xf-uix_viewportRemoveVisitorTabsText) {
		padding: @xf-paddingSmall calc(@xf-paddingSmall * 2);
	}
	</xf:if>

	&:first-of-type
	{
		border-top-left-radius: @xf-borderRadiusMedium;
		border-left: none;
	}

	&:last-of-type
	{
		border-top-right-radius: @xf-borderRadiusMedium;
	}

	&:hover
	{
		text-decoration: none;
		// background: xf-intensify(@xf-publicHeaderAdjustColor, 5%);
	}

	&.p-navgroup-link--user
	{
		.m-overflowEllipsis();
		max-width: 150px;

		.avatar
		{
			// .m-avatarSize((@xf-fontSizeNormal) * (@xf-lineHeightDefault));
			.m-avatarSize(@xf-uix_iconSizeLarge);
			margin: 1px 0;

			@media (min-width: @xf-uix_removeVisitorTabsText) {
				.m-avatarSize(@xf-uix_iconSize);
				font-size: 11px;
			}
		}
	}

	&.badgeContainer
	{
		// opacity: .6;
		position: relative;

		&:after
		{
			position: absolute;
			// left: (@_navAccount-hPadding - 6px);
			// top: (@xf-publicNavPaddingV - 2px);
			right: 2px;
			top: 3px;
			padding: 1px 3px;
			margin: 0;
			font-size: 10px;
			line-height: 11px;
		}

		&:hover,
		&.badgeContainer--highlighted
		{
			// opacity: 1;
		}
	}

	&.is-menuOpen
	{
		.xf-publicNavTabMenuOpen();
		// .m-dropShadow(0, 5px, 10px, 0, .35);
		opacity: 1;
	}

	/*
	&.p-navgroup-link--iconic
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1.2em;
			text-align: center;
		}
	}
	*/

	&.p-navgroup-link--conversations
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1em;
			.m-faContent(@fa-var-envelope, 1em);
		}
	}

	&.p-navgroup-link--alerts
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1em;
			.m-faContent(@fa-var-bell, 1em);
		}
	}

	&.p-navgroup-link--bookmarks i:after
	{
		.m-faContent(@fa-var-bookmark); //, .75em
	}

	&.p-navgroup-link--whatsnew i:after
	{
		.m-faBase();
		.m-faContent(@fa-var-bolt, .5em);
		width: auto;
	}

	&.p-navgroup-link--search i:after
	{
		.m-faBase();
		.m-faContent(@fa-var-search);
	}

	&.p-navgroup-link--logIn
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1em;
			.m-faContent(@fa-var-key);
		}
	}

	&.p-navgroup-link--register
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1em;
			.m-faContent(@fa-var-clipboard);
		}
	}
}

.p-navgroup-link--whatsnew
{
	display: none;

	.p-navgroup-link:first-of-type& + .p-navgroup-link
	{
		border-top-left-radius: @xf-borderRadiusMedium;
		border-left: none;
	}
}

<xf:if is="property('uix_visitorTabsMobile') != 'initial'">
	@media (max-width: @xf-responsiveNarrow) {
		.p-navgroup.p-account {
			.p-navgroup-link--user {display: none;}
			.p-navgroup-link--conversations {display: none;}
			.p-navgroup-link--alerts {display: none;}
		}
		<xf:if is="property('uix_visitorTabsMobile') == 'tabbar'">
			.p-navgroup.p-discovery {
				.p-navgroup-link--whatsnew {display: none;}
			}
		</xf:if>
	}
</xf:if>

@media (max-width: @xf-responsiveWide)
{
	/*
	.p-navgroup-link
	{
		&.p-navgroup-link--iconic .p-navgroup-linkText,
		&.p-navgroup-link--textual i
		{
			display: none;
		}
		&.p-navgroup-link--textual
		{
			.m-overflowEllipsis();
			max-width: 110px;
		}

		&.p-navgroup-link--iconic i:after
		{
			text-align: center;
		}
	}
	*/
}


@media (max-width: @xf-publicNavCollapseWidth)
{
	.p-navgroup-link--whatsnew
	{
		display: inline-flex;

		.p-navgroup-link:first-of-type& + .p-navgroup-link
		{
			// border-top-left-radius: 0;
			// border-left: 1px solid @xf-publicHeaderAdjustColor;
		}
	}

	.has-js
	{
		.p-nav-opposite
		{
			align-self: center;
			// margin-right: max(0px, @xf-pageEdgeSpacer - 6px);

			.p-navgroup
			{
				background: none;
			}

			.p-navgroup-link
			{
				border: none;
				border-radius: @xf-borderRadiusMedium;

				&.is-menuOpen
				{
					.m-borderBottomRadius(0);
				}

				&.badgeContainer
				{
					opacity: 1;
				}
			}
		}
	}
}

/*
@media (max-width: 359px)
{
	.p-navgroup-link&.p-navgroup-link--user
	{
		display: none;
	}
}

@media (max-width: 374px)
{
	.p-navgroup-link.p-navgroup-link--register
	{
		display: none;
	}
}
*/

.p-navgroup .p-navgroup-link i {
	&:after, &:before {
		@media (min-width: @xf-uix_viewportRemoveRegisterText) {
			font-size: @xf-uix_iconSize;
			// padding-right: @xf-paddingMedium;
		}
	}
}

<xf:if is="property('uix_rightAlignNavigation')">
	@media (min-width: @xf-publicNavCollapseWidth) {
		.p-nav-inner .p-nav-opposite,
		.p-sectionLinks .p-nav-opposite {margin-left: 0;}

		.p-nav-inner .p-nav-scroller,
		.p-sectionLinks .p-sectionLinks-inner {margin-right: 0; margin-left: auto;}
	}
</xf:if>]]></template>
    <template title="app_prepend.less" type="public" addon_id="XF" version_id="2020051" version_string="2.2.0 Release Candidate 1"><![CDATA[.m-pageWidth(@min-width: @xf-pageEdgeSpacer)
{
	/*
	max-width: @xf-pageWidthMax;
	padding: 0 @xf-pageEdgeSpacer;
	margin: 0 auto;
	*/
}

.m-pageInset(@defaultPadding: @xf-pageEdgeSpacer)
{
	/*
	padding-left: @defaultPadding;
	padding-right: @defaultPadding;

	// iPhone X/Xr/Xs support
	@supports(padding: max(0px))
	{
		&
		{
			padding-left: ~"max(@{defaultPadding}, env(safe-area-inset-left))";
			padding-right: ~"max(@{defaultPadding}, env(safe-area-inset-right))";
		}
	}
	*/
}

.m-navElHPadding(@padding)
{
	.p-navEl-link
	{
		padding: 0 @padding;

		&.p-navEl-link--splitMenu
		{
			padding-right: ((@padding) / 8);
		}

		&.p-navEl-link--menuTrigger
		{
			padding-right: ((@padding) / 3); // equal to splitTrigger padding-right

			&:after
			{
				padding-left: ((@padding) / 4 + (@padding) / 3); // equal to splitMenu padding-right + splitTrigger padding-left
			}
		}
	}

	.p-navEl-splitTrigger
	{
		padding: 0 ((@padding) / 3);
	}
}]]></template>
    <template title="app_sectionlinks.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[// SUB SECTION LINKS

.p-sectionLinks
{
	.xf-publicSubNav();
	<xf:if is="property('uix_pageStyle') == 'fixed'">
		.m-pageWidth();
	</xf:if>
	
	transition: ease-in .15s all;
	
	.p-sectionLinks--group {
		display: flex; 
		align-items: center;
		
		<xf:if is="property('uix_rightAlignNavigation')">
			&:first-child {
				margin-left: auto;
			}
		</xf:if>
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-publicSubNav--background-color, transparent),
			xf-default(@xf-publicSubNav--color, ~""),
			xf-default(@xf-publicSubNavElHover--color, ~"")
		);
	}
	
	.p-nav-opposite a:not(.button)
	{
		color: inherit;

		&:hover {
			.xf-publicSubNavElHover();
		}
	}

	&.p-sectionLinks--empty
	{
		height: 10px;
		display: none;
	}

	.pageContent {
		display: flex;
		align-items: center;
		position: relative;
		justify-content: space-between;
		<xf:if is="property('publicNavSticky')">
			min-height: @xf-uix_stickySectionLinkHeight;
			height: @xf-uix_stickySectionLinkHeight;
		</xf:if>
		<xf:if is="property('uix_pageStyle') == 'covered'">
			.m-pageWidth();
		</xf:if>
	}

	.p-navgroup .p-navgroup-link i:after,
	.p-navSearch-trigger i:after {font-size: @xf-uix_iconFont;}
	.p-navgroup-link.p-navgroup-link--user .avatar {
		font-size: @xf-uix_iconSizeLarge;
		.m-avatarSize(@xf-uix_iconSize);
	}
	.p-navSearch-trigger,
	.p-navgroup .p-navgroup-link {padding: @xf-paddingSmall;}
}

.p-sectionLinks-inner
{
	// .m-clearFix();
	// .m-pageWidth();

	@defaultPadding:  max(0px, @xf-pageEdgeSpacer - @xf-publicSubNavPaddingH);
	.m-pageInset(@defaultPadding);
	margin-right: auto;
}


.p-sectionLinks-list
{
	.m-listPlain();

	font-size: 0;

	a
	{
		color: inherit;
	}

	> li
	{
		display: inline-block;
	}

	.m-navElHPadding(@xf-publicSubNavPaddingH);

	.p-navEl
	{
		font-size: @xf-publicSubNav--font-size;
		// padding-top: @xf-paddingMedium;
		// padding-bottom: @xf-paddingMedium;
		height: @xf-uix_stickyStaffBarHeight;

		&:hover
		{
			.xf-publicSubNavElHover();

			a
			{
				text-decoration: @xf-publicSubNavElHover--text-decoration;
			}
		}
		<xf:comment>
		&.is-menuOpen
		{
			.xf-publicSubNavElMenuOpen();
			.m-borderBottomRadius(0);
			.m-dropShadow(0, 5px, 10px, 0, .35);
		}
		</xf:comment>
	}

	.p-navEl-link,
	.p-navEl-splitTrigger
	{
		padding-top: @xf-publicSubNavPaddingV;
		padding-bottom: @xf-publicSubNavPaddingV;
	}
}

<xf:if is="(property('uix_searchPosition') != 'tablinks') &&
	(property('uix_loginTriggerPosition ') != 'tablinks') &&
	(property('uix_userTabsPosition ') != 'tablinks')">

	@media (max-width: @xf-publicNavCollapseWidth) {
		.has-js .p-sectionLinks-inner
		{
			display: none;
		}
	}

</xf:if>]]></template>
    <template title="app_staffbar.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ######################################### STAFF BAR #################################

.p-staffBar
{
	.xf-publicStaffBar();
		<xf:if is="property('uix_pageStyle') == 'fixed'">
			.m-pageWidth();
			.m-pageInset();
		</xf:if>

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-publicStaffBar--background-color, transparent),
			xf-default(@xf-publicStaffBar--color, ~""),
			xf-intensify(@xf-publicStaffBar--color, 10%)
		);
	}
	
	<xf:if is="{{ property('uix_stickyStaffBar')}}">
	@supports (position: sticky) or (position: -webkit-sticky)
	{
		&
		{
			position: -webkit-sticky;
			position: sticky;
			top: 0;

			&.is-sticky-broken,
			&.is-sticky-disabled
			{
				position: static;
				top: auto;
			}
		}
	}
	</xf:if>

	.pageContent {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		position: relative;
		height: 100%;
		<xf:if is="property('uix_pageStyle') == 'covered'">
			.m-pageWidth();
			.m-pageInset();
		</xf:if>
		
		min-height: @xf-uix_stickyStaffBarHeight;

		.p-nav-opposite a:not(.button)
		{
			color: inherit;

			&:hover {.xf-uix_staffBarTabHover();}
		}
		
		a {
			.xf-uix_staffBarTab();
			
			&:hover {.xf-uix_staffBarTabHover();}
		}

	}


}

.p-staffBar-inner
{
	.m-clearFix();
	// padding-top: @xf-paddingMedium;
	//padding-bottom: @xf-paddingMedium;
}

.p-staffBar-link
{
	display: inline-block;
	vertical-align: top;
	color: inherit;
	padding: 4px @xf-paddingMedium;
	margin-right: .35em;
	.xf-uix_staffBarTab();

	&:last-child
	{
		margin-right: 0;
	}

	&:hover
	{
		text-decoration: none;
		// background: xf-diminish(@xf-publicStaffBar--background-color, 6%);
		border-radius: @xf-borderRadiusSmall;
		.xf-uix_staffBarTabHover();
	}
}]]></template>
    <template title="app_stickynav.less" type="public" addon_id="XF" version_id="2020070" version_string="2.2.0"><![CDATA[// STICKY NAV SETUP

<xf:if is="property('publicNavSticky')">

.p-pageWrapper .p-navSticky
{
	z-index: @zIndex-1;

	&.is-sticky
	{
		z-index: @zIndex-4;
		// .m-dropShadow(0, 2px, 5px, 0px, .26);
		<xf:if is="!{{ property('uix_removeHeaderWrapper')}}">
		position: fixed !important;
		top: 0;
		bottom: auto !important;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		</xf:if>

		<xf:if is="property('uix_pageStyle') == 'wrapped' && !property('uix_removeHeaderWrapper')">
		@uix_pageSpacerTotal: @xf-pageEdgeSpacer * 2;
		@uix_adjustedWrappedPageWidth: @xf-pageWidthMax - @uix_pageSpacerTotal;

		width: 100vw !important;
		@media (min-width: @xf-responsiveEdgeSpacerRemoval) {
			width: ~'calc(100vw - @{uix_pageSpacerTotal}) !important';
		}

		@media (min-width: @uix_adjustedWrappedPageWidth) {
			width: @uix_adjustedWrappedPageWidth !important;	
		}
		</xf:if>

		> * {box-shadow: @xf-uix_elevation1; border-radius: 0 !important;}

		.p-nav {.xf-uix_stickyNavigationStyle();}

		.p-sectionLinks {.xf-uix_sectionLinksStickyStyle();}

		<xf:if is="property('uix_pageStyle') != 'covered'">
		// .m-pageWidth();
		padding: 0 !important;

		</xf:if>

		<xf:if is="property('uix_pageStyle') == 'fluid'">
		> * {
			max-width: 100%;
		}
		</xf:if>

		.p-nav-inner {
			height: @xf-uix_stickyNavHeight;

			.p-navEl,
			.p-navEl-link {max-height: @xf-uix_stickyNavHeight;}
		}

		<xf:if is="property('publicNavSticky')">
		.p-sectionLinks {
			border-bottom: 0;

			.pageContent {
				height: @xf-uix_stickySectionLinkHeight;
			}
		}
		</xf:if>
	}

	<xf:if is="{{ property('uix_removeHeaderWrapper')}}">
	@supports (position: sticky) or (position: -webkit-sticky)
	{
		&
		{
			position: -webkit-sticky;
			position: sticky;
			top: 0;

			&.is-sticky-broken,
			&.is-sticky-disabled
			{
				position: static;
				top: auto;
			}
		}
	}
	</xf:if>
}

</xf:if>

<xf:if is="property('uix_mainTabsSticky')">
.uix_headerContainer .uix_mainTabBar.is-sticky {
	position: fixed !important;
	bottom: auto !important;
	left: 0;
	right: 0;
	@media (max-width: @xf-uix_search_maxResponsiveWidth ) {z-index: 500;}
	margin: 0 auto;
	border-radius: 0 !important;

	.tabs-tab {height: @xf-uix_mainTabsHeight;}

	box-shadow: @xf-uix_elevation1;

	<xf:if is="property('uix_pageStyle') == 'wrapped' && !property('uix_removeHeaderWrapper')">
	width: @xf-pageWidthMax - (@xf-pageEdgeSpacer * 2) !important;
	</xf:if>
}

.uix_mainTabBar.is-sticky {
	box-shadow: @xf-uix_elevation1;
	z-index: 300;
}

</xf:if>

<xf:if is="property('uix_stickyStaffBar')">
.p-staffBar.is-sticky {
	<xf:if is="!{{ property('uix_removeHeaderWrapper')}}">
	position: fixed !important;
	bottom: auto !important;
	top: 0 !important;
	left: 0;
	right: 0;
	margin: 0 auto;
	</xf:if>
	z-index: 500;
	border-radius: 0 !important;
	.xf-uix_stickyStaffbarStyle();
	height: @xf-uix_stickyStaffBarHeight;

	<xf:if is="property('publicNavSticky') == 'none'">
	box-shadow: @xf-uix_elevation1;
	</xf:if>

	<xf:if is="property('uix_pageStyle') == 'wrapped'&& !property('uix_removeHeaderWrapper')">
	width: @xf-pageWidthMax - (@xf-pageEdgeSpacer * 2) !important;
	</xf:if>
}

<xf:if is="{{ property('uix_removeHeaderWrapper')}}">
.p-staffBar {
	@supports (position: sticky) or (position: -webkit-sticky)
	{
		&
		{
			position: -webkit-sticky;
			position: sticky;
			top: 0;

			&.is-sticky-broken,
			&.is-sticky-disabled
			{
				position: static;
				top: auto;
			}
		}
	}
}
</xf:if>

</xf:if>]]></template>
    <template title="app_title.less" type="public" addon_id="XF" version_id="2020051" version_string="2.2.0 Release Candidate 1"><![CDATA[.p-body-header {
	<xf:if is="property('uix_pageStyle') == 'fixed'">
	.m-pageWidth();
	</xf:if>

	.pageContent {
		<xf:if is="property('uix_pageStyle') != 'fixed'">
		.m-pageWidth();
		</xf:if>
	}
	
	.p-body-inner & {
		max-width: 100%;
		width: 100%;
		padding-left: 0;
		padding-right: 0;

		.pageContent {
			max-width: 100%;
			width: 100%;		
			padding-left: 0;
			padding-right: 0;
		}
	}
}

.p-pageWrapper > .p-body-header .pageContent {
	min-height: 36px;
}

.p-pageWrapper .p-body-header {
	.xf-uix_titlebar();
	
	.pageContent {
		display: flex;
		align-items: center;
		
		.p-title-pageAction {margin-top: 0;}
		
		@media(max-width: @xf-responsiveMedium) {
			flex-wrap: wrap;
		}
	}
	
	.contentRow {flex-grow: 1;}
	.uix_headerInner {
		margin: 5px;
		margin-left: 0;
		flex-grow: 1;
	}
	
	.uix_headerInner--opposite {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
		margin-left: auto;
		margin-right: 0;
	}
	
	.uix_headerInner + .uix_headerInner--opposite {
		margin: 5px auto;
	}
	
	.p-title
	{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		max-width: 100%;

		&.p-title--noH1
		{
			flex-direction: row-reverse;
		}

		.p-title-pageAction {
			margin: 5px 0;
		}
	}

	.p-title-value
	{
		padding: 0;
		margin: 0 0 3px 0;
		font-size: @xf-fontSizeLargest;
		font-weight: @xf-fontWeightNormal;
		margin-right: auto;
		min-width: 0;
		.xf-uix_pageTitle();

		.has-no-flexbox &
		{
			float: left;
		}
	}

	.p-title-pageAction
	{
		margin-left: @xf-paddingLarge;
		
		@media(max-width: @xf-responsiveNarrow) {
			margin-left: 0;
			margin-top: @xf-paddingLarge;
		}
		
		.has-no-flexbox &
		{
			float: right;
		}
	}

	.p-description
	{
		margin: 0;
		padding: 0;
		font-size: inherit;
		color: inherit;
	}
}

.p-title-pageAction .button + .button {margin-left: @xf-paddingMedium;}

@media (max-width: @xf-responsiveNarrow)
{
	.p-title-value
	{
		font-size: @xf-fontSizeLarger;
	}
}]]></template>
    <template title="app_user_banners.less" type="public" addon_id="XF" version_id="2000470" version_string="2.0.4"><![CDATA[.m-userBannerVariation(@color; @bg; @border: false)
{
	color: @color;
	background: @bg;
	border-color: xf-intensify(@bg, 10%);
	border-radius: @xf-borderRadiusMedium;

	& when (iscolor(@border))
	{
		border-color: @border;
	}
}

.userBanner
{
	font-size: 75%;
	font-size: 11px;
	font-weight: @xf-fontWeightNormal;
	font-style: normal;
	padding: 1px @xf-paddingMedium;
	padding: 1px 3px;
	border: 1px solid transparent;
	border-radius: @xf-borderRadiusSmall;
	text-align: center;
	display: inline-block;

	strong
	{
		font-weight: inherit;
	}

	// variations
	&.userBanner--hidden
	{
		background: none;
		border: none;
		box-shadow: none;
	}

	&.userBanner--staff,
	&.userBanner--primary
	{
		.m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
		.m-userBannerVariation(#fff, @xf-uix_primaryColor, @xf-uix_primaryColor);
	}

	&.userBanner--accent
	{
		.m-userBannerVariation(#fff, @xf-uix_secondaryColor, @xf-uix_secondaryColor);
	}

	&.userBanner--red { .m-userBannerVariation(white, #d80000); }
	&.userBanner--green { .m-userBannerVariation(white, green); }
	&.userBanner--olive { .m-userBannerVariation(white, olive); }
	&.userBanner--lightGreen { .m-userBannerVariation(black, #ccf9c8, #bee8ba); }
	&.userBanner--blue { .m-userBannerVariation(white, #0008e3); }
	&.userBanner--royalBlue { .m-userBannerVariation(white, royalblue); }
	&.userBanner--skyBlue { .m-userBannerVariation(white, #7cc3e0); }
	&.userBanner--gray { .m-userBannerVariation(white, gray); }
	&.userBanner--silver { .m-userBannerVariation(black, silver); }
	&.userBanner--yellow { .m-userBannerVariation(black, #ffff91, #e6e687); }
	&.userBanner--orange { .m-userBannerVariation(black, #ffcb00); }
}]]></template>
    <template title="approval_queue.less" type="public" addon_id="XF" version_id="2010035" version_string="2.1.0 Beta 5"><![CDATA[.approvalQueue
{
	.block-container.approvalQueue-item--approve
	{
		.message,
		.message-cell--user,
		.message-cell--extra
		{
			background: @xf-inlineModHighlightColor;
		}

		.message .message-userArrow:after
		{
			border-right-color: @xf-inlineModHighlightColor;
		}
	}

	.block-container.approvalQueue-item--delete
	{
		.message-cell--user,
		.message-cell--main
		{
			opacity: 0.25;
		}
	}

	.block-container.approvalQueue-item--spam
	{
		border-color: red;

		.message-cell--user,
		.message-cell--main
		{
			opacity: 0.25;
		}
	}
}]]></template>
    <template title="bb_code.less" type="public" addon_id="XF" version_id="2020270" version_string="2.2.2"><![CDATA[@_bbCodeBlock-spacing: .5em;
@_bbCodeBlock-paddingV: @xf-paddingMedium;
@_bbCodeBlock-paddingH: @xf-paddingLarge;
@_bbCodeBlock-expandTriggerHeight: (@xf-bbCodeBlockExpandHeight) / 2;

.bbCodeBlock
{
	display: flow-root;
	margin: @_bbCodeBlock-spacing 0;
	.xf-bbCodeBlock();

	&.bbCodeBlock--quote
	{
		.bbCodeBlock-content
		{
			font-size: @xf-fontSizeSmall;
		}
	}
}

.bbCodeBlock-title
{
	padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH;
	.xf-bbCodeBlockTitle();
	.m-clearFix();
}

a.bbCodeBlock-sourceJump
{
	color: inherit;
	text-decoration: none;

	&:hover
	{
		text-decoration: underline;
	}

	&:after
	{
		.m-faBase();
		.m-faContent(@fa-var-arrow-circle-up); //, 1em
		display: inline-block;
		margin-left: 5px;
	}
}

.bbCodeBlock-content
{
	position: relative;
	padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH;
	.m-clearFix();
}

.bbCodeBlock--code .bbCodeBlock-content {background-color: @xf-contentBg; color: @xf-textColor;}

.bbCodeBlock-expandLink
{
	display: none;
	position: absolute;
	top: (@xf-bbCodeBlockExpandHeight) + (@_bbCodeBlock-paddingV * 2) - (@_bbCodeBlock-expandTriggerHeight);
	left: 0;
	right: 0;
	height: @_bbCodeBlock-expandTriggerHeight;
	cursor: pointer;
	z-index: @zIndex-1;

	.m-gradient(
		fade(@xf-bbCodeBlock--background-color, 0%),
		xf-default(@xf-bbCodeBlock--background-color, transparent),
		transparent,
		0%,
		60%
	);

	a
	{
		position: absolute;
		bottom: @_bbCodeBlock-paddingV;
		left: 0;
		right: 0;
		text-align: center;
		font-size: @xf-fontSizeSmall;
		color: @xf-textColorAttention;
		text-decoration: none;
	}
}

.bbCodeBlock--screenLimited
{
	.bbCodeBlock-content
	{
		max-height: 300px;
		max-height: 70vh;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
}

.bbCodeBlock--expandable
{
	overflow: hidden;
	.m-transition(-xf-height, height, padding, margin, border;);

	.bbCodeBlock-content
	{
		overflow: hidden;

		.bbCodeBlock:not(.bbCodeBlock--expandable) .bbCodeBlock-content
		{
			overflow: visible;
		}
		.bbCodeBlock.bbCodeBlock--screenLimited .bbCodeBlock-content
		{
			overflow: auto;
		}
	}

	.bbCodeBlock-expandContent
	{
		max-height: @xf-bbCodeBlockExpandHeight;
		overflow: hidden;
	}

	&.is-expandable
	{
		.bbCodeBlock-expandLink
		{
			display: block;
		}
	}

	&.is-expanded
	{
		.bbCodeBlock-expandContent
		{
			max-height: none;
		}

		.bbCodeBlock-expandLink
		{
			display: none;
		}
	}
}

.bbCodeBlock--unfurl
{
	.xf-contentHighlightBase();

	padding: @_bbCodeBlock-paddingV;
	width: 650px;
	max-width: 100%;
	border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;

	overflow: hidden;

	.contentRow-header
	{
		margin: 0;
		font-size: @xf-fontSizeNormal;
		font-weight: normal;
		.m-overflowEllipsis();
	}

	.contentRow-snippet
	{
		font-size: @xf-fontSizeSmaller;
		font-style: normal;
	}

	.contentRow-minor
	{
		font-size: @xf-fontSizeSmaller;
	}

	&.is-pending
	{
		opacity: 0.5;

		&.is-recrawl
		{
			opacity: 1;
		}
	}

	&.is-simple
	{
		.contentRow-figure
		{
			display: none;
		}
	}

	.bbCodeBlockUnfurl-icon
	{
		width: 12px;
		vertical-align: -2px;
	}
}

.bbCodeCode
{
	margin: 0;
	padding: 0;

	.has-hiddenscroll &
	{
		// solely to workaround this Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=914844
		// TODO: remove when fixed
		padding-bottom: @xf-paddingLarge;
	}

	font-family: @xf-fontFamilyCode;
	font-size: @xf-fontSizeSmall;
	line-height: @xf-lineHeightDefault;
	-ltr-rtl-text-align: left;

	direction: ltr;
	white-space: pre;
	position: relative;

	.m-tabSize();

	code
	{
		font-family: inherit;
	}

	.prism-token
	{
		&.prism-comment,
		&.prism-prolog,
		&.prism-doctype,
		&.prism-cdata
		{
			& when (@xf-styleType = light) { color: #a50; }
			& when (@xf-styleType = dark) { color: #8292a2; }
		}

		&.prism-constant
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #f92672; }
		}

		&.prism-tag
		{
			& when (@xf-styleType = light) { color: #170; }
			& when (@xf-styleType = dark) { color: #f92672; }
		}

		&.prism-boolean
		{
			& when (@xf-styleType = light) { color: #219; }
			& when (@xf-styleType = dark) { color: #ae81ff; }
		}

		&.prism-symbol,
		&.prism-atrule,
		&.prism-keyword
		{
			& when (@xf-styleType = light) { color: #708; }
			& when (@xf-styleType = dark) { color: #e6db74; }
		}

		&.prism-selector,
		&.prism-function
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #e6db74; }
		}

		&.prism-deleted
		{
			color: #d44;
		}

		&.prism-inserted
		{
			color: #292;
		}

		&.prism-string,
		&.prism-attr-value
		{
			& when (@xf-styleType = light) { color: #a11; }
			& when (@xf-styleType = dark) { color: #a6e22e; }
		}

		&.prism-number
		{
			& when (@xf-styleType = light) { color: #164; }
			& when (@xf-styleType = dark) { color: #ae81ff; }
		}

		&.prism-attr-name,
		&.prism-char,
		&.prism-builtin
		{
			& when (@xf-styleType = light) { color: #00c; }
			& when (@xf-styleType = dark) { color: #a6e22e; }
		}

		&.prism-regex,
		&.prism-important,
		&.prism-variable,
		&.prism-package
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #fd971f; }
		}

		&.prism-class-name,
		&.prism-important,
		&.prism-bold
		{
			& when (@xf-styleType = light) { color: #00f; }
			& when (@xf-styleType = dark) { color: #e6db74; }
		}

		&.prism-bold
		{
			font-weight: bold;
		}

		&.prism-italic,
		&.prism-constant
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #f92672; }

			font-style: italic;
		}

		&.prism-entity
		{
			cursor: help;
		}
	}
}

.bbCodeInline
{
	margin: 0;
	.xf-bbCodeInlineCode();
	font-family: @xf-fontFamilyCode;
	line-height: @xf-lineHeightDefault;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	white-space: pre-wrap;
}

.bbCodeSpoiler
{
	margin: @_bbCodeBlock-spacing 0;
}

.bbCodeSpoiler-button
{
	.has-no-js & { display: none; }
}

.bbCodeSpoiler-content
{
	.m-hiddenEl(true);
	.has-no-js & { display: block !important; }

	> .bbCodeBlock--spoiler
	{
		margin: .2em 0 0;
	}
}

.bbCodeInlineSpoiler
{
	background-color: rgba(0, 0, 0, 0);
	color: rgba(0, 0, 0, 0);
	text-shadow: @xf-textColorMuted 0 0 14px;
	cursor: pointer;

	a, span
	{
		color: inherit !important;;

		.has-js &
		{
			pointer-events: none;
		}
	}

	.smilie
	{
		filter: blur(8px) grayscale(90%);
	}

	&:hover
	{
		text-shadow: @xf-textColorMuted 0 0 10px;
	}
}]]></template>
    <template title="category_view" type="public" addon_id="XF" version_id="2020031" version_string="2.2.0 Beta 1"><![CDATA[<xf:title>{$category.title}</xf:title>
<xf:description>{$category.description|raw}</xf:description>

<xf:if is="!$category.isSearchEngineIndexable()">
	<xf:head option="metaNoindex"><meta name="robots" content="noindex" /></xf:head>
</xf:if>

<xf:macro template="metadata_macros" name="canonical_url" arg-canonicalUrl="{{ link('canonical:categories', $category) }}" />

<xf:macro template="category_macros" name="category_page_options" arg-category="{$category}" />
<xf:breadcrumb source="$category.getBreadcrumbs(false)" />

<xf:if is="$nodeTree">
	<div class="block uix_nodeList block">
		<div class="block-outer"><xf:trim>
			<xf:if contentcheck="true">
				<div class="block-outer-opposite">
					<div class="buttonGroup">
					<xf:contentcheck>
						<xf:if is="$xf.visitor.user_id && $hasForumDescendents">
							<xf:button href="{{ link('categories/mark-read', $category, {'date': $xf.time}) }}"
								class="button--link" overlay="true">
								{{ phrase('mark_read') }}
							</xf:button>
						</xf:if>
					</xf:contentcheck>
					</div>
				</div>
			</xf:if>
		</xf:trim></div>
		<div class="block-container">
			<div class="block-body">
				<xf:macro template="forum_list" name="node_list"
					arg-children="{$nodeTree}"
					arg-extras="{$nodeExtras}"
					arg-depth="2" />
			</div>
		</div>
	</div>
<xf:else />
	<div class="blockMessage">{{ phrase('there_is_nothing_to_display') }}</div>
</xf:if>

<xf:widgetpos id="category_view_sidebar" context-category="{$category}" position="sidebar" />
]]></template>
    <template title="code_editor.less" type="public" addon_id="XF" version_id="2020032" version_string="2.2.0 Beta 2"><![CDATA[/* XF-RTL:disable */

.codeEditor
{
	// standard editor with fixed-width font and 55% screen height, used when the code editor is the primary
	// editable element on screen
	&.CodeMirror
	{
		height: 55vh;
		direction: ltr;

		.xf-input();
		font-family: @xf-fontFamilyCode;
		padding: 0;
		-ltr-rtl-border-color: @xf-borderColorHeavy @xf-borderColorLight @xf-borderColorLight @xf-borderColorHeavy;

		//color: @xf-inputTextColor;
		//background: @xf-inputBgColor;
		//border: @xf-borderSize solid;
		//border-radius: @xf-borderRadiusMedium;

		.m-inputZoomFix();

		&.CodeMirror-focused
		{
			.xf-inputFocus();
		}

		&.CodeMirror-simplescroll
		{
			.CodeMirror-sizer
			{
				// Bit hacky but solves issue with the simplescroll bars overlapping the content
				padding-right: 30px !important;
			}
		}
	}

	// short editor, taking only 30% of the vertical height
	&.codeEditor--short
	{
		height: 30vh;
	}

	// show an editor that shrinks to a very small height for very little content
	&.codeEditor--autoSize
	{
		height: auto;

		.CodeMirror-lines
		{
			min-height: (@xf-fontSizeNormal * @xf-lineHeightDefault * 2) + 8px; // 2 lines, 4px padding from .CodeMirror-lines
		}
	}

	// like --autoSize, but shrinks to a single line when empty
	&.codeEditor--oneLine
	{
		min-height: auto;
	}

	// use proportional font - use this when syntax highlighting is useful, but not imperative, like HTML-enabled descriptions
	&.codeEditor--proportional
	{
		font-family: @xf-fontFamilyUi;
	}
}

[disabled] + .codeEditor,
[disabled] + .codeEditor.CodeMirror-focused
{
	.xf-inputDisabled();
}

[readonly] + .codeEditor,
[readonly] + .codeEditor.CodeMirror-focused
{
	background: mix(xf-default(@xf-input--background-color, @xf-contentBg), xf-default(@xf-inputDisabled--background-color, @xf-paletteNeutral1));
}

// Default CSS (mostly)
{{ include('codemirror.less') }}

// Extra stuff for DARK styles, taking values from CodeMirror's DARCULA theme
.cm-s-default
{
	& when (@xf-styleType = dark)
	{
		&.CodeMirror
		{
			.CodeMirror-cursor { border-left: 1px solid #dddddd; }
			.CodeMirror-activeline-background { background: #3A3A3A; }
			.CodeMirror-selected { background: #085a9c; }
			.CodeMirror-gutters { background: rgb(72, 72, 72); border-right: 1px solid grey; color: #606366 }
			.CodeMirror-matchingbracket { background-color: #3b514d; color: yellow !important; }
		}

		span.cm-keyword { font-weight: bold; color: #CC7832; }
		span.cm-atom { font-weight: bold; color: #CC7832; }
		span.cm-number { color: #6897BB; }
		span.cm-def { color: #FFC66D; }
		span.cm-variable { color: #A9B7C6; }
		span.cm-property { color: #A9B7C6; }
		span.cm-operator { color: #A9B7C6; }
		span.cm-variable-2 { color: #A9B7C6; }
		span.cm-variable-3,
		span.cm-comment { color: #808080; }
		span.cm-string { color: #6A8759; }
		span.cm-string-2 { color: #6A8759; }
		span.cm-meta { color: #BBB529; }
		span.cm-qualifier { color: #6A8759; }
		span.cm-builtin { color: #A9B7C6; }
		span.cm-bracket { color: #A9B7C6; }
		span.cm-tag { color: #CC7832; }
		span.cm-attribute { color: #6A8759; }
		span.cm-link { color: #287BDE; }
		span.cm-error { color: #BC3F3C; }
		span.cm-invalidchar { color: #BC3F3C; }
		span.cm-type { color: #A9B7C6; }
	}
	// background-color: #fff;
}

/* XF-RTL:enable */]]></template>
    <template title="content_vote_macros" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[<xf:macro name="vote_control"
	arg-link="!"
	arg-content="!"
	arg-extraClass="">

	<xf:set var="$currentVote" value="{{ $content.getVisitorContentVote() }}" />
	<xf:set var="$canVote" value="{{ $content.canVoteOnContent() }}" />
	<div class="contentVote {{ $currentVote ? 'is-voted' : '' }} js-contentVote {$extraClass}" data-xf-init="content-vote" data-content-id="{{ $content.getEntityContentTypeId() }}">
		<a href="{{ $canVote ? link($link, $content, {'type' : 'up'}) : 'javascript:' }}"
			class="contentVote-vote {{ $canVote ? '' : 'is-disabled' }} contentVote-vote--up {{ ($currentVote == 'up') ? 'is-voted' : '' }}"
			data-vote="up"><span class="u-srOnly">{{ phrase('upvote') }}</span></a>

		<span class="contentVote-score {{ $content.vote_score > 0 ? 'is-positive' : ''  }} {{ $content.vote_score < 0 ? 'is-negative' : ''  }} js-voteCount"
			data-score="{$content.vote_score}">{$content.vote_score_short}</span>

		<xf:if is="$content.isContentDownvoteSupported()">
			<a href="{{ $canVote ? link($link, $content, {'type' : 'down'}) : 'javascript:' }}"
				class="contentVote-vote {{ ($canVote AND $content.canDownvoteContent()) ? '' : 'is-disabled' }} contentVote-vote--down {{ ($currentVote == 'down') ? 'is-voted' : '' }}"
				data-vote="down"><span class="u-srOnly">{{ phrase('downvote') }}</span></a>
		</xf:if>
</div>

</xf:macro>

<xf:macro name="vote_display" arg-content="!" arg-extraClass="">

	<div class="contentVote js-contentVote contentVote--display {{ $content.getVisitorContentVote() ? 'is-voted' : '' }} {$extraClass}" data-content-id="{{ $content.getEntityContentTypeId() }}">
		<span class="contentVote-score {{ $content.vote_score > 0 ? 'is-positive' : ''  }} {{ $content.vote_score < 0 ? 'is-negative' : ''  }} js-voteCount" data-score="{$content.vote_score}">{$content.vote_score_short}</span>
		<span class="contentVote-description">{{ $content.vote_score == 1 ? phrase('vote_noun') : phrase('votes') }}</span>
	</div>

</xf:macro>

<xf:macro name="vote_display_placeholder" arg-extraClass="">

	<div class="contentVote contentVote--display contentVote--placeholder {$extraClass}">
		<span class="contentVote-score">-</span>
		<span class="contentVote-description">{{ phrase('votes') }}</span>
	</div>

</xf:macro>]]></template>
    <template title="conversation_list" type="public" addon_id="XF" version_id="2011072" version_string="2.1.10 Patch 2"><![CDATA[<xf:title page="{$page}">{{ phrase('conversations') }}</xf:title>

<xf:js src="xf/inline_mod.js" min="1" />

<xf:pageaction if="$xf.visitor.canStartConversation()">
	<xf:button href="{{ link('conversations/add') }}" class="button--cta" icon="write">{{ phrase('start_conversation') }}</xf:button>
</xf:pageaction>

<div class="block" data-xf-init="inline-mod" data-type="conversation" data-href="{{ link('inline-mod') }}">
	<div class="block-outer">
		<xf:pagenav
			page="{$page}" perpage="{$perPage}" total="{$total}"
			link="conversations" params="{$filters}"
			wrapperclass="block-outer-main" />
		<div class="block-outer-opposite">
			<div class="buttonGroup">
				<xf:macro template="inline_mod_macros" name="button"
					arg-variant="inlineModButton--withLabel"
					arg-label="{{ phrase('selected') }}"
					arg-tooltip="{{ false }}" />
			</div>
		</div>
	</div>

	<div class="block-container">
		<div class="block-filterBar">
			<div class="filterBar">
				<xf:if contentcheck="true">
					<ul class="filterBar-filters">
					<xf:contentcheck>
						<xf:if is="$filters.starter_id AND $starterFilter">
							<li><a href="{{ link('conversations', null, $filters|replace('starter_id', null)) }}"
								class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
								{{ phrase('started_by_x', {'name': $starterFilter.username}) }}</a></li>
						</xf:if>
						<xf:if is="$filters.receiver_id AND $receiverFilter">
							<li><a href="{{ link('conversations', null, $filters|replace('receiver_id', null)) }}"
								class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
								{{ phrase('received_by_x', {'name': $receiverFilter.username}) }}</a></li>
						</xf:if>
						<xf:if is="$filters.starred">
							<li><a href="{{ link('conversations', null, $filters|replace('starred', null)) }}"
								class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
								<span class="filterBar-filterToggle-label">{{ phrase('show_only:') }}</span>
								{{ phrase('starred') }}</a></li>
						</xf:if>
						<xf:if is="$filters.unread">
							<li><a href="{{ link('conversations', null, $filters|replace('unread', null)) }}"
								class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
								<span class="filterBar-filterToggle-label">{{ phrase('show_only:') }}</span>
								{{ phrase('filter_unread') }}</a></li>
						</xf:if>
					</xf:contentcheck>
					</ul>
				</xf:if>

				<a class="filterBar-menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('filters') }}</a>
				<div class="menu" data-menu="menu" aria-hidden="true">
					<div class="menu-content">
						<h4 class="menu-header">{{ phrase('show_only:') }}</h4>
						<xf:form action="{{ link('conversations/filters') }}">
							<div class="menu-row menu-row--separated">
								<xf:radio name="filter_type">
									<xf:option value="" selected="{{ !$starterFilter AND !$receiverFilter }}">{{ phrase('show_all_conversations') }}</xf:option>
									<xf:option value="started" selected="{{ $starterFilter ? true : false }}" data-hide="true"
										label="{{ phrase('started_by...') }}">

										<xf:textbox name="starter" value="{{ $starterFilter ? $starterFilter.username : '' }}" ac="single"
											maxlength="{{ max_length($xf.visitor, 'username') }}"/>
									</xf:option>
									<xf:option value="received" selected="{{ $receiverFilter ? true : false }}" data-hide="true"
										label="{{ phrase('received_by...') }}">

										<xf:textbox name="receiver" value="{{ $receiverFilter ? $receiverFilter.username : '' }}" ac="single"
											maxlength="{{ max_length($xf.visitor, 'username') }}" />
									</xf:option>
								</xf:radio>
							</div>
							<div class="menu-row menu-row--separated">
								<xf:checkbox>
									<xf:option name="starred" selected="{$filters.starred}" label="{{ phrase('starred_conversations') }}" />
									<xf:option name="unread" selected="{$filters.unread}" label="{{ phrase('unread_conversations') }}" />
								</xf:checkbox>
							</div>

							<div class="menu-footer">
								<span class="menu-footer-controls">
									<xf:button type="submit" class="button--primary">{{ phrase('filter') }}</xf:button>
								</span>
							</div>
							<xf:hiddenval name="apply">1</xf:hiddenval>
						</xf:form>
					</div>
				</div>
			</div>
		</div>

		<div class="block-body">
			<xf:if is="$userConvs is not empty">
				<div class="structItemContainer">
					<xf:foreach loop="$userConvs" value="$userConv">
						<xf:macro template="conversation_list_macros" name="item" arg-userConv="{$userConv}" />
					</xf:foreach>
				</div>
				<xf:else />
				<div class="block-row">{{ phrase('there_no_conversations_to_display') }}</div>
			</xf:if>
		</div>
		<div class="block-footer block-footer--split uix_conversationsFooterMobile">
			<div class="block-footer-main">
				<a href="{{ link('conversations') }}">{{ phrase('show_all...') }}</a>
			</div>
			<xf:if is="$xf.visitor.canStartConversation()">
				<div class="block-footer-opposite">
					<a href="{{ link('conversations/add') }}">{{ phrase('start_new_conversation') }}</a>					
				</div>
			</xf:if>
		</div>
	</div>

	<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}"
		link="conversations" params="{$filters}"
		wrapperclass="block-outer block-outer--after" />
</div>

<xf:widgetpos id="conversation_list_sidebar" position="sidebar" />]]></template>
    <template title="conversation_list_macros" type="public" addon_id="XF" version_id="2010370" version_string="2.1.3"><![CDATA[<xf:macro name="item"
	arg-userConv="!"
	arg-allowInlineMod="{{ true }}">

	<xf:css src="structured_list.less" />

	<div class="structItem structItem--conversation {{ $userConv.isUnread() ? 'is-unread' : '' }} js-inlineModContainer" data-author="{{ $userConv.Master.Starter.username ?: $userConv.Master.username }}">
		<div class="structItem-cell structItem-cell--icon">
			<div class="structItem-iconContainer">
				<xf:avatar user="$userConv.Master.Starter" size="s" defaultname="{$userConv.Master.username}" />
			</div>
		</div>
		<div class="structItem-cell structItem-cell--main" data-xf-init="touch-proxy">
			<xf:if contentcheck="true">
				<ul class="structItem-statuses">
				<xf:contentcheck>
					<xf:if is="$userConv.is_starred">
						<li>
							<i class="structItem-status structItem-status--starred" aria-hidden="true" title="{{ phrase('starred')|for_attr }}"></i>
							<span class="u-srOnly">{{ phrase('starred') }}</span>
						</li>
					</xf:if>
					<xf:if is="!$userConv.Master.conversation_open">
						<li>
							<i class="structItem-status structItem-status--locked" aria-hidden="true" title="{{ phrase('locked')|for_attr }}"></i>
							<span class="u-srOnly">{{ phrase('locked') }}</span>
						</li>
					</xf:if>
				</xf:contentcheck>
				</ul>
			</xf:if>

			<a href="{{ link('conversations/unread', $userConv) }}" class="structItem-title" data-tp-primary="on">{$userConv.title}</a>

			<div class="structItem-minor">
				<xf:if contentcheck="true">
					<ul class="structItem-extraInfo">
					<xf:contentcheck>
						<xf:if is="$allowInlineMod">
							<li><xf:checkbox standalone="true">
								<xf:option value="{$userConv.conversation_id}" class="js-inlineModToggle" />
							</xf:checkbox></li>
						</xf:if>
					</xf:contentcheck>
					</ul>
				</xf:if>

				<ul class="structItem-parts">
					<li>
						<ul class="listInline listInline--comma listInline--selfInline">
							<li><xf:username user="$userConv.Master.Starter" defaultname="{$userConv.Master.username}" title="{{ phrase('conversation_starter') }}" /></li><xf:trim>
							</xf:trim><xf:foreach loop="$userConv.Master.recipients" value="$recipient" if="{$recipient.user_id} != {$userConv.Master.user_id}"><xf:trim>
								<li><xf:username user="{$recipient}" defaultname="{{ phrase('unknown_member') }}" /></li>
							</xf:trim></xf:foreach>
						</ul>
					</li>
					<li class="structItem-startDate"><a href="{{ link('conversations', $userConv) }}" rel="nofollow"><xf:date time="{$userConv.Master.start_date}" /></a></li>
					<xf:if is="$userConv.reply_count >= $xf.options.messagesPerPage">
						<span class="structItem-pageJump">
						<xf:foreach loop="{{ last_pages($userConv.reply_count + 1, $xf.options.messagesPerPage, $xf.options.lastPageLinks) }}" value="$p">
							<a href="{{ link('conversations', $userConv, {'page': $p}) }}">{$p}</a>
						</xf:foreach>
						</span>
					</xf:if>
				</ul>
			</div>
		</div>
		<div class="structItem-cell structItem-cell--meta">
			<dl class="pairs pairs--justified">
				<dt>{{ phrase('replies') }}</dt>
				<dd>{$userConv.reply_count|number}</dd>
			</dl>
			<dl class="pairs pairs--justified structItem-minor">
				<dt>{{ phrase('participants') }}</dt>
				<dd>{$userConv.Master.recipient_count|number}</dd>
			</dl>
		</div>
		<div class="structItem-cell structItem-cell--latest">
			<a href="{{ link('conversations/latest', $userConv) }}" rel="nofollow"><xf:date time="{$userConv.last_message_date}" class="structItem-latestDate" /></a>
			<div class="structItem-minor"><xf:username user="{$userConv.Master.last_message_cache}" /></div>
		</div>
	</div>
</xf:macro>]]></template>
    <template title="conversation_message_macros" type="public" addon_id="XF" version_id="2010036" version_string="2.1.0 Beta 6"><![CDATA[<xf:macro name="message" arg-message="!" arg-conversation="!" arg-position="" arg-lastRead="{{ null }}">
	<xf:css src="message.less" />
	<article class="message message--conversationMessage {{ $message.isIgnored() ? ' is-ignored' : '' }} {{ $message.isUnread($lastRead) ? 'is-unread' : '' }} js-message" data-author="{{ $message.User.username ?: $message.username }}">
		<span class="u-anchorTarget" id="convMessage-{$message.message_id}"></span>
		<div class="message-inner">
			<div class="message-cell message-cell--user">
				<xf:macro template="message_macros" name="user_info" arg-user="{$message.User}" arg-fallbackName="{$message.username}" />
			</div>
			<div class="message-cell message-cell--main">
				<div class="message-main js-quickEditTarget">
					<div class="message-content">
						<header class="message-attribution">
							<a href="{{ link('conversations/messages', $message) }}" class="message-attribution-main u-concealed" rel="nofollow">
								<xf:date time="{$message.message_date}" />
							</a>
							<span class="message-attribution-opposite">
								<xf:if is="$message.isUnread($lastRead)">
									<span class="message-newIndicator">{{ phrase('new') }}</span>
								</xf:if>
								<xf:if is="$position">#{$position|number}</xf:if>
							</span>
						</header>

						<xf:if is="$message.isIgnored()">
							<div class="messageNotice messageNotice--ignored">
								{{ phrase('you_are_ignoring_content_by_this_member') }}
							</div>
						</xf:if>

						<div class="message-userContent lbContainer js-lbContainer"
							 data-lb-id="message-{$message.message_id}"
							 data-lb-caption-title="{{ $message.User ? $message.User.username : $message.username }}"
							 data-lb-caption-desc="{{ date_time($message.message_date) }}">

							<article class="message-body js-selectToQuote">
								{{ bb_code($message.message, 'conversation_message', $message) }}
								<div class="js-selectToQuoteEnd">&nbsp;</div>
							</article>

							<xf:if is="$message.attach_count">
								<xf:macro template="message_macros" name="attachments"
										  arg-attachments="{$message.Attachments}"
										  arg-message="{$message}"
										  arg-canView="{{ true }}" />
							</xf:if>
						</div>

						<xf:macro template="message_macros" name="signature" arg-user="{$message.User}" />
					</div>
					<div class="reactionsBar js-reactionsList {{ $message.reactions ? 'is-active' : '' }}">
						<xf:reactions content="{$message}" link="conversations/messages/reactions" />
					</div>
					<footer class="message-footer">
						<xf:if contentcheck="true">
							<div class="message-actionBar actionBar">
								<xf:contentcheck>
									<xf:if contentcheck="true">
										<div class="actionBar-set actionBar-set--external">
											<xf:contentcheck>
												<xf:react content="{$message}" link="conversations/messages/react" list="< .js-message | .js-reactionsList" />

												<xf:if is="$conversation.canReply()">
													<xf:set var="$quoteLink">{{ link('conversations/reply', $conversation, {'quote': $message.message_id}) }}</xf:set>
													<xf:if is="$xf.options.multiQuote">
														<a href="{$quoteLink}"
														   class="actionBar-action actionBar-action--mq u-jsOnly js-multiQuote"
														   title="{{ phrase('toggle_multi_quote_tooltip')|for_attr }}"
														   data-message-id="{$message.message_id}"
														   data-mq-action="add">
															{{ phrase('quote') }}
														</a>
													</xf:if>
													<a href="{$quoteLink}"
													   class="actionBar-action actionBar-action--reply"
													   title="{{ phrase('reply_quoting_this_message')|for_attr }}"
													   data-xf-click="quote"
													   data-quote-href="{{ link('conversations/messages/quote', $message) }}">{{ phrase('reply') }}</a>

												</xf:if>
											</xf:contentcheck>
										</div>
									</xf:if>

									<xf:if contentcheck="true">
										<div class="actionBar-set actionBar-set--internal">
											<xf:contentcheck>
												<xf:if is="$message.canReport()">
													<a href="{{ link('conversations/messages/report', $message) }}" class="actionBar-action actionBar-action--report" data-xf-click="overlay">{{ phrase('report_verb') }}</a>
												</xf:if>

												<xf:if is="$message.canEdit()">
													<xf:js src="xf/message.js" min="1" />
													<a href="{{ link('conversations/messages/edit', $message) }}"
													   class="actionBar-action actionBar-action--edit"
													   data-xf-click="quick-edit"
													   data-editor-target="< .js-quickEditTarget">{{ phrase('edit') }}</a>
												</xf:if>

												<xf:if is="$message.canCleanSpam()">
													<a href="{{ link('spam-cleaner', $message) }}"
													   class="actionBar-action actionBar-action--spam actionBar-action--menuItem"
													   data-xf-click="overlay">{{ phrase('spam') }}</a>
												</xf:if>

												<xf:if is="$xf.visitor.canViewIps() && $message.ip_id">
													<a href="{{ link('conversations/messages/ip', $message) }}"
													   class="actionBar-action actionBar-action--ip"
													   data-xf-click="overlay">{{ phrase('ip') }}</a>
												</xf:if>
											</xf:contentcheck>
										</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</xf:if>
					</footer>
				</div>
			</div>
		</div>
	</article>
</xf:macro>]]></template>
    <template title="core.less" type="email" addon_id="XF" version_id="2020036" version_string="2.2.0 Beta 6"><![CDATA[// NOTE: THIS DOES NOT HAVE ACCESS TO public:setup.less automatically!
// THE LESS HERE SHOULD BE KEPT AS SIMPLE AS POSSIBLE

// UI.X Font Sizes

/* solution for pxs */
@fontSizeNormal: unit(10 * @xf-fontSizeNormal, px);
@fontSizeLargest: unit(10 * @xf-fontSizeLargest, px);
@fontSizeSmall: unit(10 * @xf-fontSizeSmall, px);

/* solution for rems
@fontSizeNormal: (0.625 * @xf-fontSizeNormal);
@fontSizeLargest: (0.625 * @xf-fontSizeLargest);
@fontSizeSmall: (0.625 * @xf-fontSizeSmall);
*/

body
{
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;

	background-color: @xf-emailBg;
	font-size: @fontSizeNormal;
	font-family: @xf-emailFont;
	line-height: @xf-lineHeightDefault;
	color: @xf-emailTextColor;
}

table
{
	border-spacing: 0;
	mso-table-lspace: 0pt;
	mso-table-rspace: 0pt;
}

table,
td
{
	border-collapse: collapse;
}

a
{
	color: @xf-emailLinkColor;
	text-decoration: none;
}

.bbImage
{
	width: auto;
	height: auto;
	max-width: 100%;
}

#bodyTable
{
	height: 100% !important;
	width: 100% !important;
	margin: 0;
	padding: 0;
	background-color: @xf-emailBg;
}

#bodyTableContainer
{
	background-color: @xf-emailBg;
}

.container
{
	width: 100%;
	max-width: 600px;
}

.header
{
	color: @xf-emailHeaderColor;
	padding: @xf-paddingMedium @xf-paddingLarge;
	border-top-left-radius: @xf-borderRadiusMedium;
	border-top-right-radius: @xf-borderRadiusMedium;
	font-family: @xf-emailFont;
	font-size: @fontSizeLargest;
	line-height: @xf-lineHeightDefault;
}

.header a
{
	color: @xf-emailHeaderColor;
}

.content
{
	background-color: @xf-emailContentBg;
	border-radius: @xf-borderRadiusSmall;
	color: @xf-emailTextColor;
	padding: @xf-paddingLarge;
	font-size: @fontSizeNormal;
	font-family: @xf-emailFont;
	line-height: @xf-lineHeightDefault;
}

.content .bbImage
{
	max-width: 100%;
}

.content > p:first-child
{
	margin-top: 0;
}

.content > p:last-child
{
	margin-bottom: 0;
}

.footer
{
	padding: @xf-paddingMedium @xf-paddingLarge;
	text-align: center;
	color: @xf-emailTextColorMuted;
	font-size: @fontSizeSmall;
	font-family: @xf-emailFont;
	line-height: @xf-lineHeightDefault;
}

.footer a
{
	color: @xf-emailTextColorMuted;
	text-decoration: underline;
}

.footerExtra
{
	margin-top: 1em;
}

h2
{
	font-size: @fontSizeLargest;
	font-weight: normal;
	margin: @xf-paddingLarge 0;
	padding: 0;
}

hr
{
	border: 0;
	border-bottom: @xf-borderSize solid @xf-emailBorderColor;
}

div.message
{
	border-left: @xf-borderSizeFeature solid @xf-borderColorFeature;
	margin: @xf-paddingLarge 0;
	padding: @xf-paddingLarge;
}

div.quote
{
	border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
	border-top: @xf-borderSize solid @xf-emailBorderColor;
	border-bottom: @xf-borderSize solid @xf-emailBorderColor;
	border-right: @xf-borderSize solid @xf-emailBorderColor;
	background: @xf-emailContentAltBg;
	margin: @xf-paddingLarge 0;
	padding: @xf-paddingLarge;
}

.quote-name
{
	color: @xf-textColorAttention;
	font-size: @fontSizeSmall;
	margin-bottom: @xf-paddingMedium;
}

pre.code
{
	margin: @xf-paddingLarge 0;
	padding: @xf-paddingLarge;
	border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
	border-top: @xf-borderSize solid @xf-emailBorderColor;
	border-bottom: @xf-borderSize solid @xf-emailBorderColor;
	border-right: @xf-borderSize solid @xf-emailBorderColor;
	background: @xf-emailContentAltBg;
	max-width: 600px;
	overflow: auto;
}

.textLink
{
	color: @xf-emailTextColor;
	text-decoration: none;
}

.linkBar
{
	padding: @xf-paddingMedium;
	background-color: @xf-emailContentAltBg;
	border-top: @xf-borderSize solid @xf-emailBorderColor;
}

.button
{
	display: inline-block;
	padding: 5px 10px;
	border: none;
	border-radius: @xf-borderRadiusMedium;
	color: @xf-buttonTextColor;
	text-decoration: none;
	.xf-buttonBase();
	.xf-buttonDefault();
	.xf-buttonPrimary();
	font-size: @fontSizeSmall;
	background-color: @xf-buttonPrimaryBg;
}

.buttonFake
{
	display: inline-block;
	padding: 5px 10px;
	font-size: @fontSizeSmall;
}

.minorText,
.unsubscribeLink
{
	font-size: @fontSizeSmall;
	color: @xf-emailTextColorMuted;
}

.minorText a,
.unsubscribeLink a
{
	color: @xf-emailTextColorMuted;
	text-decoration: underline;
}

.unsubscribeLink
{
	margin-top: 1em;
	text-align: center;
}

.mediaPlaceholder,
.spoilerPlaceholder
{
	border-radius: @xf-borderRadiusSmall;
	margin: @xf-paddingMedium 0;
	padding: @xf-paddingMedium;
	font-size: @fontSizeLargest;
	line-height: 3;
	text-align: center;
	border: @xf-borderSize solid @xf-emailBorderColor;
	background-color: @xf-emailContentAltBg;
}

.inlineSpoilerPlaceholder
{
	font-size: @xf-fontSizeSmall;
	background-color: @xf-contentAltBg;
	border: @xf-borderSize solid @xf-borderColorLight;
	border-radius: @xf-borderRadiusSmall;
	padding: 1px @xf-paddingSmall;
}

.u-opposite { text-align: right; }

// ################################ ACTIVITY SUMMARY ###############################

.p-activitySummary #bodyTableContainer
{
	padding: 0;
}

.summaryContentWrapper
{
	padding: 0 @xf-paddingLarge;
	max-width: 1200px;
}

.summaryHeaderBar
{
	color: @xf-chromeTextColor;
	background: @xf-chromeBg;
	font-family: @xf-emailFont;
	font-size: @xf-fontSizeLargest;
	line-height: @xf-lineHeightDefault;
	padding: @xf-paddingMedium @xf-paddingLarge;

	a
	{
		color:@xf-chromeTextColor;
	}

	img
	{
		max-height: 200px;
		vertical-align: bottom;

		&.logo-svg
		{
			max-width: 200px;
		}
	}
}

.summaryOuterHeader
{
	width: 100%;
	table-layout: fixed;
	margin: @xf-paddingLargest 0;
}

.summaryOuterHeader-content
{
	font-size: @xf-fontSizeLarger;
	font-weight: @xf-fontWeightNormal;
	color: @xf-emailTextColorMuted;
}

.summaryBlock
{
	color: @xf-emailTextColor;
	background-color: @xf-emailContentBg;
	border: @xf-borderSize solid @xf-emailBorderColor;
	border-radius: @xf-borderRadiusSmall;
	border-collapse: separate;

	width: 100%;
	table-layout: fixed;
	margin: @xf-paddingLargest 0;
}

.summaryBlock-header
{
	font-size: @xf-fontSizeLarger;
	color: @xf-majorHeadingTextColor;
	background: @xf-majorHeadingBg;
	border-bottom: @xf-borderSize solid @xf-borderColorLight;
	border-top-left-radius: @xf-borderRadiusSmall;
	border-top-right-radius: @xf-borderRadiusSmall;
	padding: @xf-blockPaddingV @xf-blockPaddingH;

	a
	{
		color: @xf-majorHeadingTextColor;
	}
}

.statsGroup
{
	display: flex;
	flex-flow: row wrap;
	font-size: @xf-fontSizeLarge;
}

.stat
{
	flex: auto;
	vertical-align: top;
	margin-right: @xf-paddingMedium;
	margin-bottom: @xf-paddingMedium;
}

.stat-label
{
	font-size: @xf-fontSizeSmall;
	color: @xf-emailTextColorMuted;
}

.p-activitySummary .content.content--attribution,
.p-activitySummary .content.content--footer,
.p-activitySummary .content.content--footer table
{
	font-size: @xf-fontSizeSmall;
	color: @xf-emailTextColorMuted;

	a:not(.button)
	{
		color: inherit;
		text-decoration: underline;
	}
}]]></template>
    <template title="core.less" type="public" addon_id="XF" version_id="2020270" version_string="2.2.2"><![CDATA[// ########################## GLOBAL BASE SETUP #######################

html
{
	font: @xf-fontSizeNormal / @xf-lineHeightDefault sans-serif;
	font-family: @xf-fontFamilyUi;
	font-weight: @xf-fontWeightNormal;
	color: @xf-textColor;
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	background-color: @xf-pageBg;

	/* // just a reminder that we *might* want this at some point
	-ms-text-size-adjust: none;
	-webkit-text-size-adjust: none;*/
}

body {
	font-size: @xf-fontSizeNormal;
}

button, input, optgroup, select, textarea
{
	font-family: @xf-fontFamilyUi;
	line-height: @xf-lineHeightDefault;
}

img
{
	max-width: 100%;
	height: auto;
}

b, strong
{
	font-weight: @xf-fontWeightHeavy;
}

a
{
	.xf-link();

	&:hover
	{
		.xf-linkHover();
	}
}

svg
{
	fill: currentColor;
}

{{ include('core_setup.less') }}
{{ include('core_utilities.less') }}
{{ include('core_list.less') }}
{{ include('core_categorylist.less') }}
{{ include('core_block.less') }}
{{ include('core_blockmessage.less') }}
{{ include('core_blockstatus.less') }}
{{ include('core_blocklink.less') }}
{{ include('core_blockend.less') }}
{{ include('core_fixedmessage.less') }}
{{ include('core_button.less') }}
{{ include('core_meter_bar.less') }}

// ################################# INPUTS & FORMS #####################

{{ include('core_input.less') }}
{{ include('core_formrow.less') }}

{{ include('core_collapse.less') }}
{{ include('core_badge.less') }}
{{ include('core_tooltip.less') }}
{{ include('core_menu.less') }}
{{ include('core_offcanvas.less') }}
{{ include('core_tab.less') }}
{{ include('core_overlay.less') }}
{{ include('core_globalaction.less') }}
{{ include('core_avatar.less') }}
{{ include('core_datalist.less') }}
{{ include('core_filter.less') }}
{{ include('core_contentrow.less') }}
{{ include('core_pagenav.less') }}
{{ include('core_hscroller.less') }}

// FLASH MESSAGES
.flashMessage
{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: @zIndex-9;
	.xf-flashMessage();

	.m-transitionFadeDown(@xf-animationSpeed);
}

// AUTOCOMPLETE
.autoCompleteList
{
	.m-autoCompleteList();
	margin-top: 2px;

	&.autoCompleteList--inherit
	{
		font-size: inherit;

		li
		{
			padding: @xf-paddingLarge;
			line-height: inherit;
		}
	}
}

// #################################### TAGS ##############################
// note that while this is related to tags, it's commonly used so just include it

.tagList,
.tagList > dt,
.tagList > dd
{
	display: inline;
	padding: 0;
	margin: 0;
}

.tagItem
{
	display: inline-block;
	max-width: 100%;
	padding: 0 6px 1px;
	margin: 0 0 2px;
	border-radius: @xf-borderRadiusMedium;
	font-size: @xf-fontSizeSmaller;
	.xf-chip();
	.xf-uix_tag();

	a&:hover
	{
		text-decoration: none;
		color: @xf-chip--color;
		.xf-chipHover();
		.xf-uix_tagHover();
	}
}

// ############################# MISC #########################

.recaptcha
{
	&.input
	{
		box-sizing: content-box;
		max-width: 100%;
	}

	img
	{
		max-width: 100%;
	}
}

.likesBar
{
	.m-transitionFadeDown();
	.xf-minorBlockContent();
	border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
	padding: @xf-paddingMedium;
	font-size: @xf-fontSizeSmaller;
	margin-top: @xf-paddingMedium;
	.xf-uix_messageLikes();
}

.likeIcon
{
	&:before
	{
		.m-faBase();
		.m-faContent(@fa-var-thumbs-up); //, 1em
		color: @xf-textColorFeature;
		//margin-right: .2em;
	}
}

.reactionsBar
{
	.m-transitionFadeDown();
	.xf-minorBlockContent();
	border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
	padding: @xf-paddingMedium;
	font-size: @xf-fontSizeSmaller;
	margin-top: @xf-paddingMedium;
	.xf-uix_messageLikes();

	&:last-child {
		margin-top: @xf-messagePadding;
	}
}

.reactionSummary
{
	display: inline-block;
	.m-listPlain();
	line-height: 16px;
	height: 16px;
	margin: 0 -2px;
	vertical-align: text-top;

	> li
	{
		display: inline-block;
		height: 20px;
		width: 20px;
		padding: 2px;
		margin: -2px 0;
		background: @xf-contentBg;
		border-radius: 50%;
		position: relative;
		margin-left: -6px;

		&:nth-child(1)
		{
			z-index: 3;
			margin-left: 0;
		}

		&:nth-child(2)
		{
			z-index: 2;
		}

		&:nth-child(3)
		{
			z-index: 1;
		}
	}

	.reaction
	{
		position: absolute;
		top: 0;

		&.reaction
		{
			// increase specificity to override .reaction.reaction--<size>
			display: block;
		}
	}
}

.reactionsBar,
.message-responseRow
{
	.reactionSummary
	{
		> li
		{
			background: @xf-contentAltBg;
		}

		.reaction
		{
			top: 2px;
		}
	}
}

.reactTooltip
{
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;

	.reaction
	{
		margin: @xf-paddingSmall;
		.m-transition(transform);

		&:hover
		{
			.m-transform(scale(1.2));
		}
	}
}

.colorChip
{
	display: inline-block;
	border: @xf-borderSize solid @xf-borderColor;
	border-radius: @xf-borderRadiusMedium;
	padding: 1px;
	width: 100px;
}
.colorChip-inner
{
	display: block;
	background-color: transparent;
	border-radius: @xf-borderRadiusSmall;
	height: 1em;
}
.colorChip-value
{
	display: none;
}

	pre.sf-dump
{
	// not ideal, but then again neither is the default of 99999...
	z-index: @zIndex-1 !important;
}

.grecaptcha-badge
{
	z-index: @zIndex-5;
}

// Bookmarking links for 2.1
.bookmarkLink
{
	&:before
	{
		.m-faBase();
		.m-faContent(@fa-var-bookmark);
		font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);
	}
	&.is-bookmarked
	{
		&:before
		{
			font-weight: @faWeight-solid;
		}
	}

	&.bookmarkLink--highlightable.is-bookmarked
	{
		color: @xf-textColorAttention;

		&:hover
		{
			color: @xf-textColorAccentContent;
		}
	}

	span
	{
		margin-left: .35em;
	}
}

.dragHandle
{
	cursor: move;
	touch-action: none;

	&:before
	{
		.m-faBase();
		.m-faContent(@fa-var-bars);
	}

	.is-undraggable &
	{
		visibility: hidden;
		cursor: default;
	}
}

.memberProfileBanner
{
	background-size: cover !important;
	background-position-x: center !important;
	background-repeat: no-repeat !important;

	&.memberProfileBanner--small
	{
		height: 150px;
		margin-bottom: @xf-paddingMedium;
	}

	&.memberProfileBanner--empty
	{
		display: none;
	}
}

.solutionIcon
{
	display: inline-flex;
	padding: @xf-paddingMedium;
	font-size: @xf-uix_iconSizeLarge;
	line-height: 1;
	color: @xf-textColorMuted;
	.m-transition();

	a&
	{
		color: @xf-textColorMuted;
		text-decoration: none;
	}

	&:before
	{
		.m-faBase();
		.m-faContent(@fa-var-check-circle);
		font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);
	}

	&.is-solution
	{
		color: @xf-votePositiveColor;
		opacity: 1;

		&:before
		{
			font-weight: @faWeight-solid;
		}
	}
}

{{ include('core_action_bar.less') }}
{{ include('core_labels.less') }}
{{ include('core_pikaday.less') }}
{{ include('core_reaction.less') }}
{{ include('core_smilie.less') }}
{{ include('core_bbcode.less') }}

// RESOLUTION OUTPUT

.debugResolution
{
	font-size: @xf-fontSizeSmallest;
	.debugResolution-output:before
	{
		content: "Full @{xf-responsiveWide} - @{xf-pageWidthMax}";
		@media (min-width: @xf-pageWidthMax) { content: "Max > @{xf-pageWidthMax}"; }
		@media (max-width: @xf-responsiveWide) { content: "Wide < @{xf-responsiveWide}"; }
		@media (max-width: @xf-responsiveMedium) { content: "Medium < @{xf-responsiveMedium}"; }
		@media (max-width: @xf-responsiveNarrow) { content: "Narrow < @{xf-responsiveNarrow}"; }
	}
}]]></template>
    <template title="core_action_bar.less" type="public" addon_id="XF" version_id="2020070" version_string="2.2.0"><![CDATA[.actionBar
{
	.m-clearFix();
}

.actionBar-set
{
	&.actionBar-set--internal
	{
		float: left;
		// margin-left: -3px;

		> .actionBar-action:first-child
		{
			margin-left: 0;
		}
	}

	&.actionBar-set--external
	{
		float: right;
		// margin-right: -3px;

		> .actionBar-action:last-child
		{
			margin-right: 0;
		}
	}
}

.actionBar .actionBar-action
{
	display: inline-block;
	padding: 3px;
	border: 1px solid transparent;
	border-radius: @xf-borderRadiusMedium;
	margin-left: 5px;
	.xf-uix_messageControl();

	&:hover {
		.xf-uix_messageControlHover();
	}

	&:before
	{
		.m-faBase();
		font-size: 1.1em;
		padding-right: 2px;
	}

	&.actionBar-action--menuTrigger
	{
		display: none;

		&.is-displayed
		{
			display: inline;
		}

		&:after
		{
			.m-menuGadget();
		}
	}

	&.actionBar-action--inlineMod
	{
		label
		{
			color: @xf-linkColor;
			font-size: 120%;
			// vertical-align: -2px;
		}

		input
		{
			.m-checkboxAligner();
		}
	}

	&.actionBar-action--mq
	{
		&:before { .m-faContent("@{fa-var-plus}\20");} // plus

		&.is-selected
		{
			background-color: @xf-contentHighlightBg;
			border-color: @xf-borderColorHighlight;

			&:before { .m-faContent("@{fa-var-minus}\20");} // minus
		}
	}

	&.actionBar-action--postLink
	{
		text-decoration: inherit !important;
		color: inherit !important;
	}

	&.actionBar-action--reply:before { .m-faContent("@{fa-var-reply}");}
	&.actionBar-action--like:before { .m-faContent("@{fa-var-thumbs-up}");}

	&.actionBar-action--reaction:not(.has-reaction) .reaction-text
	{
		color: inherit;
	}

	&.actionBar-action--view
	{
		background: @xf-contentBg;
		color: @xf-linkColor;
		.m-buttonBorderColorVariation(@xf-borderColor);
		padding-left: @xf-paddingLarge;
		padding-right: @xf-paddingLarge;

		&:hover,
		&:active,
		&:focus
		{
			text-decoration: none;
			background: @xf-contentHighlightBg;
		}
	}
	&.actionBar-action--reply:before { .m-faContent("@{fa-var-reply}\20");} // reply
	&.actionBar-action--comment:before { .m-faContent("@{fa-var-reply}\20");} // reply
	&.actionBar-action--like.unlike:before { .m-faContent("@{fa-var-thumbs-down}\20");}// thumbs up
	&.actionBar-action--reaction.reaction--imageHidden i:before { .m-faContent("@{fa-var-thumbs-up}\20");}
	&.actionBar-action--report:before { .m-faContent("@{fa-var-exclamation-circle}\20");}
	&.actionBar-action--delete:before { .m-faContent("@{fa-var-trash}\20");}
	&.actionBar-action--edit:before { .m-faContent("@{fa-var-edit}\20");}
	&.actionBar-action--ip:before { .m-faContent("@{fa-var-globe}\20");}
	&.actionBar-action--history:before { .m-faContent("@{fa-var-history}\20");}
	&.actionBar-action--warn:before { .m-faContent("@{fa-var-warning}\20");}
	&.actionBar-action--spam:before { .m-faContent("@{fa-var-warning}\20");}
}

@media (max-width: @xf-responsiveMedium)
{
	.actionBar .actionBar-action
	{
		&.actionBar-action--menuItem
		{
			display: none !important;
		}

		&.actionBar-action--menuTrigger
		{
			display: inline;
		}
	}
}]]></template>
    <template title="core_avatar.less" type="public" addon_id="XF" version_id="2010170" version_string="2.1.1"><![CDATA[// ################################### AVATARS #############################

.m-uix_avatarShape() {
	<xf:if is="property('uix_avatarShape') == 1">
		border-radius: 100%;
	<xf:elseif is="property('uix_avatarShape') == 2" />
		border-radius: 0;
	<xf:elseif is="property('uix_avatarShape') == 3" />
		-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
		clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	<xf:elseif is="property('uix_avatarShape') == 4" />
		-webkit-clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
		clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
	<xf:elseif is="property('uix_avatarShape') == 5" />
		-webkit-clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
		clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
	<xf:elseif is="property('uix_avatarShape') == 6" />
		-webkit-clip-path: polygon(0 50%, 15% 15%, 50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%);
		clip-path: polygon(0 50%, 15% 15%, 50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%);
	</xf:if>
}

.avatar
{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: @xf-avatarBorderRadius;
	vertical-align: top;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	.m-uix_avatarShape();

	img { background-color: @xf-avatarBg; }

	&.avatar--default
	{
		&.avatar--default--dynamic,
		&.avatar--default--text
		{
			font-family: @xf-avatarDynamicFont;
			font-weight: normal;
			text-align: center;
			text-decoration: none !important;

			// this works with the flex box approach
			line-height: 1;

			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			
		}

		&.avatar--default--text
		{
			color: xf-default(@xf-textColorMuted, black) !important;
			background: mix(xf-default(@xf-textColorMuted, black), xf-default(@xf-avatarBg, white), 25%) !important;

			> span:before { content: ~"'@{xf-avatarDefaultTextContent}'"; }
		}

		&.avatar--default--image
		{
			background-color: @xf-avatarBg;
			background-image: url(@xf-avatarDefaultImage);
			background-size: cover;
			> span { display: none; }
		}
	}

	&:hover
	{
		text-decoration: none;
	}

	&.avatar--updateLink
	{
		position: relative;
	}

	&.avatar--separated
	{
		border: 1px solid @xf-avatarBg;
	}

	&.avatar--square
	{
		border-radius: 0;
	}

	&.avatar--xxs
	{
		.m-avatarSize(@avatar-xxs);
	}

	&.avatar--xs
	{
		.m-avatarSize(@avatar-xs);
	}

	&.avatar--s
	{
		.m-avatarSize(@avatar-s);
	}

	&.avatar--m
	{
		.m-avatarSize(@avatar-m);
	}

	&.avatar--l
	{
		.m-avatarSize(@avatar-l);
	}

	&.avatar--o
	{
		.m-avatarSize(@avatar-o);
	}

	img:not(.cropImage)
	{
		.m-hideText;
		display: block;
		border-radius: inherit;
		width: 100%;
		height: 100%;
	}

	&:not(a)
	{
		cursor: inherit;
	}
}

.memberHeader-avatar .avatar {border-radius: @xf-avatarBorderRadius;}

.avatar-update
{
	width: 100%;
	height: 30px;
	bottom: -30px;
	position: absolute;

	.m-hiddenLinks();
	.m-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), #000);
	.m-transition();

	padding: @xf-paddingSmall;
	overflow: hidden;

	font-family: @xf-fontFamilyUi;
	font-size: @xf-fontSizeSmaller;
	line-height: @xf-lineHeightDefault;

	display: none;
	align-items: center;
	justify-content: center;

	.avatar--updateLink &
	{
		display: flex;
	}

	.has-touchevents &,
	.avatar:hover &
	{
		bottom: 0;
	}

	a
	{
		text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
		color: #fff;

		&:hover
		{
			text-decoration: none;
		}
	}
}

.avatarWrapper
{
	display: inline-block;
	position: relative;
}

.avatarWrapper-update
{
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: .8em;
	color: #fff;
	text-decoration: none;
	opacity: 0;
	.m-transition(opacity);

	&:before
	{
		content: '';
		position: absolute;
		top: -100%;
		bottom: 0;
		left: 0;
		right: 0;
		.m-borderBottomRadius(xf-default(@xf-avatarBorderRadius, 0));
		.m-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .9), #000, 60%);
		opacity: .75;
		.m-transition(opacity);
		pointer-events: none;
	}

	span
	{
		// so it sits on top of the BG
		position: relative;
	}

	&:hover
	{
		color: #fff;
		text-decoration: none;

		&:before
		{
			opacity: 1;
		}
	}

	.avatarWrapper:hover &,
	.has-touchevents &
	{
		opacity: 1;
	}

	&.avatarWrapper-update--small,
	.avatar--s + &
	{
		font-size: @xf-fontSizeSmall;
		padding-bottom: .2em;
	}
}]]></template>
    <template title="core_badge.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// #################################################### BADGES ###########################

.badge,
.badgeContainer:after
{
	display: inline-block;
	padding: 2px 4px 1px;
	margin: -2px 0 -2px 4px;
	font-size: 80%;
	line-height: 1;
	font-weight: @xf-fontWeightNormal;
	.xf-badge();
}

.badgeContainer
{
	&:after
	{
		content: attr(data-badge);
		display: none;
	}

	&.badgeContainer--visible:after
	{
		display: inline-block;
	}
}

.badge.badge--highlighted,
.badgeContainer.badgeContainer--highlighted:after
{
	display: inline-block;
	.xf-badgeHighlighted();
}]]></template>
    <template title="core_block.less" type="public" addon_id="XF" version_id="2020036" version_string="2.2.0 Beta 6"><![CDATA[// ################################# BLOCKS ##################

.blocks
{
	margin-bottom: @xf-elementSpacer;

	&:last-child
	{
		margin-bottom: 0;
	}

	.block
	{
		margin-bottom: (@xf-elementSpacer / 2);

		&:last-child
		{
			margin-bottom: 0;
		}
	}

	&.blocks--close .block
	{
		margin-bottom: (@xf-elementSpacer / 4);
	}

	&.blocks--separated
	{
		+ .blocks
		{
			padding-top: @xf-elementSpacer;
			border-top: @xf-borderSize solid @xf-borderColor;
		}
	}
}

.blocks-header
{
	font-size: @xf-fontSizeLarger;
	font-weight: @xf-fontWeightNormal;
	color: @xf-textColorMuted;

	margin: 0;
	padding: 0;
	margin-bottom: 5px;

	&.blocks-header--strong
	{
		color: @xf-textColorDimmed;

		.blocks-desc
		{
			color: @xf-textColorMuted;
		}
	}
}

.blocks-textJoiner
{
	display: table;
	width: 100%;
	margin-bottom: (@xf-elementSpacer / 2);
	padding: 0 @xf-paddingMedium;

	> span
	{
		display: table-cell;
		position: relative;

		&:before
		{
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			border-top: @xf-borderSize solid @xf-borderColor;
		}
	}

	> em
	{
		display: table-cell;
		padding: 0 @xf-paddingLarge;
		width: 1%;
		white-space: nowrap;
		// font-size: @xf-fontSizeLargest;
		line-height: 1;
		font-style: normal;
		text-align: center;
		
		font-weight: 400;
		color: @xf-textColorMuted;
		text-transform: lowercase;
	}
}


.block
{
	margin-bottom: @xf-elementSpacer;
	
	&:last-child {margin-bottom: 0;}

	&.block--close
	{
		margin-bottom: 5px;
	}

	&.block--treeEntryChooser
	{
		.block-header
		{
			font-size: @xf-fontSizeLarge;

			.block-desc
			{
				font-size: @xf-fontSizeSmallest;
			}
		}

		.block-row
		{
			padding-top: 6px;
			padding-bottom: 6px;
		}

		.contentRow
		{
			&.is-disabled
			{
				opacity: 0.5;
			}
		}

		.contentRow-title
		{
			font-size: @xf-fontSizeNormal;
		}

		.contentRow-minor
		{
			font-size: @xf-fontSizeSmaller;
		}

		.contentRow-suffix
		{
			font-size: @xf-fontSizeSmall;
		}
	}
}

.block-outer
{
	padding-bottom: @xf-blockPaddingV;
	.m-clearFix();
	.xf-uix_blockOuter();

	&:empty
	{
		display: none;
	}

	&.block-outer--after
	{
		padding-top: @xf-blockPaddingV;
		padding-bottom: 0;
	}

	&.block-outer--padded
	{
		padding-left: @xf-blockPaddingH;
		padding-right: @xf-blockPaddingH;
	}

	.block-outer-hint
	{
		font-size: @xf-fontSizeSmall;
		color: @xf-textColorMuted;
	}
}
.block-outer-main, .block-row-main { float: left; }
.block-outer-opposite, .block-row-opposite { float: right; }
.block-outer-middle, .block-row-middle { text-align: center; }

.block-container
{
	.xf-contentBase();
	.xf-blockBorder()
	border-radius: @xf-blockBorderRadius;

	//.m-transition(border, margin;); // edgeSpacerRemoval
	.xf-uix_blockContainer();
	&.block-container--none
	{
		background: none;
		border: none;
		color: @xf-textColor;
		padding: 0;
		box-shadow: none;
	}
}

@media (min-width: @xf-responsiveEdgeSpacerRemoval)
{
	@{block-noStripSel} > :first-child,
	.block-topRadiusContent,
	@{block-noStripSel} > .block-body:first-child > .blockLink:first-child
	{
		border-top-left-radius: @block-borderRadius-inner;
		border-top-right-radius: @block-borderRadius-inner;
	}

	@{block-noStripSel} > :last-child,
	.block-bottomRadiusContent,
	@{block-noStripSel} > .block-body:last-child > .blockLink:last-child,
	@{block-noStripSel} > .tabPanes:last-child > [role=tabpanel] > :last-child,
	@{block-noStripSel} > .tabPanes:last-child > [role=tabpanel] > .block-body > :last-child
	{
		border-bottom-left-radius: @block-borderRadius-inner;
		border-bottom-right-radius: @block-borderRadius-inner;
	}

	@{block-noStripSel} > .block-body:first-child > .dataList:first-child,
	.block-topRadiusContent.dataList,
	.block-topRadiusContent > .dataList:first-child
	{
		tbody:first-child .dataList-row:first-child,
		thead:first-child .dataList-row:first-child
		{
			> .dataList-cell:first-child { border-top-left-radius: @block-borderRadius-inner; }
			> .dataList-cell:last-child { border-top-right-radius: @block-borderRadius-inner; }
		}
	}

	@{block-noStripSel} > .block-body:first-child > .formRow:first-child,
	.block-topRadiusContent.formRow,
	.block-topRadiusContent > .formRow:first-child
	{
		> dt { border-top-left-radius: @block-borderRadius-inner; }
		> dd { border-top-right-radius: @block-borderRadius-inner; }
	}

	@{block-noStripSel} > .block-body:last-child > .dataList:last-child,
	.block-bottomRadiusContent.dataList,
	.block-bottomRadiusContent > .dataList:last-child
	{
		tbody:last-child .dataList-row:last-child
		{
			> .dataList-cell:first-child { border-bottom-left-radius: @block-borderRadius-inner; }
			> .dataList-cell:last-child { border-bottom-right-radius: @block-borderRadius-inner; }
		}
	}

	@{block-noStripSel} > .block-body:last-child > .formRow:last-child,
	.block-bottomRadiusContent.formRow,
	.block-bottomRadiusContent > .formRow:last-child
	{
		> dt { border-bottom-left-radius: @block-borderRadius-inner; }
		> dd { border-bottom-right-radius: @block-borderRadius-inner; }
	}

	@{block-noStripSel} > .block-body:last-child .formSubmitRow:not(.is-sticky),
	@{block-noStripSel} > .formSubmitRow:not(.is-sticky):last-child,
	.block-bottomRadiusContent > .formSubmitRow:not(.is-sticky)
	{
		> dt { border-bottom-left-radius: @block-borderRadius-inner; }
		> dd { border-bottom-right-radius: @block-borderRadius-inner; }

		.formSubmitRow-bar
		{
			border-bottom-left-radius: @block-borderRadius-inner;
			border-bottom-right-radius: @block-borderRadius-inner;
		}
	}
}

.block-header
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-blockHeader();

	.m-clearFix();
	.m-hiddenLinks();

	&.block-header--separated
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}

	.block-desc
	{
		color: fade(@xf-blockHeader--color, 70);
		.m-textColoredLinks();
	}
}

.block-minorHeader
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-blockMinorHeader();

	.m-clearFix();
	.m-hiddenLinks();

	.block-body + &
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}

	.block-desc
	{
		.m-textColoredLinks();
	}

	&--spaced
	{
		margin-top: @xf-paddingSmall;
	}

	&--small
	{
		font-size: @xf-fontSizeSmall;
	}
}

.block-tabHeader
{
	padding: 0;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	.xf-blockTabHeader();
	.m-tabsTogether(xf-default(@xf-blockTabHeader--font-size, @xf-fontSizeNormal));

	.tabs-tab
	{
		padding: @xf-blockPaddingV @xf-blockPaddingH;
		border-bottom: @xf-borderSizeFeature solid transparent;
		.xf-uix_blockTabHeaderTab();

		&:hover
		{
			color: @xf-blockTabHeaderSelected--color;
			background: fade(@xf-blockTabHeaderSelected--color, 10%);
		}

		&.is-active
		{
			background: none;
			.xf-blockTabHeaderSelected();
		}
	}

	.block-tabHeader-extra
	{
		float: right;
		color: inherit;
		font-size: @xf-blockTabHeader--font-size;
		padding: @xf-blockPaddingV @xf-blockPaddingH;
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-blockTabHeader--background-color, transparent),
			xf-default(@xf-blockTabHeader--color, ~""),
			xf-default(@xf-blockTabHeaderSelected--color, ~"")
		);
	}
}

.block-minorTabHeader
{
	padding: 0;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	.xf-blockMinorTabHeader();
	.m-tabsTogether(xf-default(@xf-blockMinorTabHeader--font-size, @xf-fontSizeNormal));

	.tabs-tab
	{
		padding: @xf-blockPaddingV @xf-blockPaddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
		border-bottom: @xf-borderSizeFeature solid transparent;

		&:hover
		{
			color: @xf-blockMinorTabHeaderSelected--color;
		}

		&.is-active
		{
			background: none;
			.xf-blockMinorTabHeaderSelected();
		}
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-blockMinorTabHeader--background-color, transparent),
			xf-default(@xf-blockMinorTabHeader--color, ~""),
			xf-default(@xf-blockMinorTabHeaderSelected--color, ~"")
		);
	}
}

.block-filterBar
{
	padding: (@xf-blockPaddingH / 2) (@xf-blockPaddingH / 2);
	.xf-blockFilterBar();

	&.block-filterBar--standalone
	{
		padding: @xf-paddingMedium @xf-paddingMedium;
		border: @xf-borderSize solid @xf-borderColor;
		border-radius: @block-borderRadius-inner;

		@media (max-width: @xf-responsiveEdgeSpacerRemoval)
		{
			border-radius: 0;
			border-left: none;
			border-right: none;
		}
	}

	.filterBar-filterToggle
	{
		background: mix(
			xf-default(@xf-blockFilterBar--color, @xf-linkColor),
			xf-default(@xf-blockFilterBar--background-color, transparent),
			8%
		);
	}

	.filterBar-filterToggle,
	.filterBar-menuTrigger
	{
		&:hover
		{
			text-decoration: none;
			background: mix(
				xf-default(@xf-blockFilterBar--color, @xf-linkColor),
				xf-default(@xf-blockFilterBar--background-color, transparent),
				16%
			);
		}
	}
}

.block-textHeader
{
	margin: @xf-blockPaddingV/2 0;
	padding: 0;
	font-weight: @xf-fontWeightNormal;
	.xf-blockTextHeader();

	.m-clearFix();
	.m-hiddenLinks();

	&.block-textHeader--scaled
	{
		font-size: inherit;
	}

	.block-textHeader-highlight
	{
		color: @xf-textColor;
	}

	.block-desc
	{
		.m-textColoredLinks();
	}

	&:first-child
	{
		margin-top: 0;
	}
}

.block-formSectionHeader
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-formSectionHeader();

	.m-clearFix();
	.m-hiddenLinks();

	.block-desc
	{
		.m-textColoredLinks();
	}

	.block-container > &:first-child,
	.block-body--collapsible &:first-child,
	.block-header + &
	{
		border-top: none;
	}

	.block-formSectionHeader-aligner
	{
		@_blockPaddingShift: (unit(@xf-formLabelWidth) / 100) * (@xf-blockPaddingH);
display: inline-block;
		text-align: right;
		min-width: @xf-formLabelWidth;
		min-width: ~"calc((@{xf-formLabelWidth}) - (@{_blockPaddingShift}) - (@{xf-formRowPaddingHInner}) - (@{xf-borderSize}))";
		max-width: 100%;
		
		.menu & {
			display: inline;
			text-align: left;
			min-width: 0;
			padding-left: 0;
		}

		@media (max-width: @xf-formResponsive)
		{
			display: inline;
			text-align: left;
			min-width: 0;
			padding-left: 0;
		}
	}
	
	.menu & {padding-left: @xf-formRowPaddingHOuter;}

	@media (max-width: @xf-formResponsive)
	{
		padding-left: @xf-formRowPaddingHOuter;
	}

	.block-formSectionHeader-multiChecker
	{
		float: right;
	}

	&--small
	{
		font-size: @xf-fontSizeNormal;
	}
}

.block-desc,
.blocks-desc
{
	display: block;
	// font-size: @xf-fontSizeSmaller;
	// font-weight: @xf-fontWeightNormal;
	.xf-uix_categoryDescription();
}

.block-body
{
	.m-listPlain();
	.xf-uix_blockBody();

	&.block-body--collapsible
	{
		.has-no-js & { display: block; }

		.m-transitionFadeDown();
	}

	&.block-body--contained
	{
		overflow: auto;
		max-height: 300px;
		max-height: 70vh;
	}

	&.block-body--containedFixed
	{
		overflow-x: auto;
		max-height: 300px;
	}
}

.block-row
{
	margin: 0;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.m-clearFix();

	&.block-row--toEdge
	{
		padding-left: 0;
		padding-right: 0;
	}

	&.block-row--alt
	{
		.xf-contentAltBase();
	}

	&.block-row--minor
	{
		font-size: @xf-fontSizeSmall;
	}

	&.block-row--separated
	{
		// padding-top: (@xf-blockPaddingV) * 2;
		// padding-bottom: (@xf-blockPaddingV) * 2;
		padding-bottom: @xf-blockPaddingV;
		padding-top: @xf-blockPaddingV;

		+ .block-row
		{
			border-top: @xf-borderSize solid @xf-borderColorLight;
		}
	}

	&.block-row--connectAbove
	{
		padding-bottom: (@xf-blockPaddingV) * 2;

		.block-body > &:last-child
		{
			padding-bottom: @xf-blockPaddingV;
		}
	}

	&.block-row--highlighted
	{
		.xf-contentHighlightBase();
	}

	&.block-row--clickable:hover
	{
		.xf-contentHighlightBase();
	}

	&.is-mod-selected
	{
		background: @xf-inlineModHighlightColor;
	}

	> pre
	{
		&:first-child { margin-top: 0; }
		&:last-child { margin-bottom: 0; }
	}
}

.block-separator
{
	margin: 0;
	padding: 0;
	border: none;
	border-top: @xf-borderSize solid @xf-borderColorLight;
}

.block-footer
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.xf-blockFooter();
	.m-clearFix();

	&:first-child
	{
		border: none;
	}

	[data-app=admin] &
	{
		.block-footer-counter,
		.block-footer-select
		{
			line-height: 30px;
		}
	}

	&:not(.block-footer--split)
	{
		.block-footer-counter
		{
			float: left;
		}

		.block-footer-controls
		{
			float: right;
		}
	}
	
	.block-footer-controls .button,
	.block-footer-counter .button {
		.xf-uix_buttonSmall();
	}

	&.block-footer--split
	{
		display: flex;
		align-items: center;

		.block-footer-main,
		.block-footer-counter
		{
			flex-grow: 1;
		}

		.block-footer-select:not(:last-child)
		{
			margin: 0 1em;
		}

		.block-footer-opposite,
		.block-footer-controls
		{
			margin-left: auto;
		}
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.block-outer
	{
		text-align: center;
	}

	.block-outer-main,
	.block-outer-opposite
	{
		float: none;
		text-align: center;
	}

	.block-outer-main + .block-outer-opposite
	{
		margin-top: @xf-paddingMedium;
	}
}]]></template>
    <template title="core_blockend.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// This contains rules that apply to various block and block-related systems. This file should be included
// after all of the primary definitions to ensure the rules override.

.blockMessage,
.blockStatus,
.block-row
{
	p:first-child
	{
		margin-top: 0;
	}

	p:last-child
	{
		margin-bottom: 0;
	}
}

@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
	.block-container,
	.blockMessage
	{
		margin-left: -@xf-pageEdgeSpacer * .5;
		margin-right: -@xf-pageEdgeSpacer * .5;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.blockStatus
	{
		margin-left: -@xf-pageEdgeSpacer * .5;
		margin-right: -@xf-pageEdgeSpacer * .5;
		border-radius: 0;
		border-right: none;
	}

	.blockMessage.blockMessage--none
	{
		margin-left: 0;
		margin-right: 0;
	}
}]]></template>
    <template title="core_blockmessage.less" type="public" addon_id="XF" version_id="2020034" version_string="2.2.0 Beta 4"><![CDATA[// ############################ BLOCK MESSAGE ###################

.block-rowMessage
{
	margin: @xf-blockPaddingV 0;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.xf-blockBorder();
	border-radius: @xf-blockBorderRadius;

	.m-clearFix();

	&:first-child
	{
		margin-top: 0;
	}

	&:last-child
	{
		margin-bottom: 0;
	}

	&.block-rowMessage--small
	{
		font-size: @xf-fontSizeSmall;
		padding: @xf-blockPaddingV/2 @xf-blockPaddingH/2;
	}

	&.block-rowMessage--center
	{
		text-align: center;
	}

	.m-blockMessageVariants();
}

.blockMessage
{
	margin-bottom: @xf-elementSpacer;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.xf-contentBase();
	.xf-blockBorder();
	border-radius: @xf-blockBorderRadius;
	.xf-uix_blockMessage();

	.m-clearFix();

	//.m-transition(border, margin;); // edgeSpacerRemoval

	&.blockMessage--none
	{
		background: none;
		border: none;
		color: @xf-textColor;
		padding: 0;
		box-shadow: none;
	}

	&.blockMessage--close
	{
		margin-top: 5px;
		margin-bottom: 5px;
	}

	&.blockMessage--small
	{
		font-size: @xf-fontSizeSmall;
		padding: @xf-paddingMedium;
	}

	&.blockMessage--center
	{
		text-align: center;
	}

	.m-blockMessageVariants();
}

.blockMessage--iconic,
.block-rowMessage--iconic
{
	text-align: left;
	position: relative;
	// padding-left: 4em;
	min-height: 4em;
	display: flex;
	align-items: center;

	&:before
	{
		.m-faBase();
		top: 0;
		// left: @xf-blockPaddingV;
		font-size: @xf-uix_iconSizeLarge !important;
		padding-right: @xf-paddingLarge;
	}
}

.m-blockMessageVariants()
{
	// note: the double && is correct here -- it enforces output like ".x.x--variant". The extra specificity helps
	// prevent issues from things like media query overrides.

	&&--highlight
	{
		.xf-contentHighlightBase();
	}
	&--highlight&--iconic:before
	{
		.m-faContent(@fa-var-info-circle);
	}

	&&--important
	{
		.xf-contentAccentBase();
		border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
		padding: @xf-paddingMedium;

		a { .xf-contentAccentLink(); }
	}
	&--important&--iconic:before
	{
		.m-faContent(@fa-var-exclamation-circle);
		color: @xf-textColorAttention;
		color: @xf-important-featureColor;
	}

	&&--alt
	{
		.xf-contentAltBase();
	}

	&&--success
	{
		border-left: @xf-borderSizeFeature solid @xf-successFeatureColor;
		background: @xf-successBg;
		color: @xf-successColor;

		.m-textColoredLinks();
	}
	&--success&--iconic:before
	{
		.m-faContent(@fa-var-check-circle);
		color: @xf-success-featureColor;
	}

	&&--warning
	{
		border-left: @xf-borderSizeFeature solid @xf-warningFeatureColor;
		background: @xf-warningBg;
		color: @xf-warningColor;

		.m-textColoredLinks();
	}
	&--warning&--iconic:before
	{
		.m-faContent(@fa-var-exclamation-triangle);
		color: @xf-warning-featureColor;
	}

	&&--error
	{
		border-left: @xf-borderSizeFeature solid @xf-errorFeatureColor;
		background: @xf-errorBg;
		color: @xf-errorColor;

		.m-textColoredLinks();
	}
	&--error&--iconic:before
	{
		.m-faContent(@fa-var-times-circle);
		color: @xf-error-featureColor;
	}
}]]></template>
    <template title="core_button.less" type="public" addon_id="XF" version_id="2020051" version_string="2.2.0 Release Candidate 1"><![CDATA[// ############################ BUTTONS #################

.button,
button.button
a.button // needed for specificity over a:link
{
	.m-buttonBase();

	.button-text {display: inline-flex; align-items: center;}

	a
	{
		color: inherit;
		text-decoration: none;
	}

	&:hover,
	&:focus {
		.xf-uix_buttonHover();
	}

	&:active {
		.xf-uix_buttonActive();
	}

	.xf-buttonDefault();
	.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));

	&.button--primary
	{
		.xf-buttonPrimary();
		.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonPrimary--background-color, transparent));

		&:hover,
		&:focus {.xf-uix_buttonPrimaryHover();}

		&:active {.xf-uix_buttonPrimaryActive();}
	}

	&.button--cta
	{
		.xf-buttonCta();
		.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonCta--background-color, transparent));

		&:hover,
		&:focus {.xf-uix_buttonCtaHover();}

		&:active {.xf-uix_buttonCtaActive();}
	}

	&.button--link
	{
		// block colors
		// background: @xf-contentBg;
		// color: @xf-linkColor;
		// .m-buttonBorderColorVariation(@xf-borderColor);
		.xf-uix_buttonSmall();
		.xf-uix_buttonLink();

		&:hover,
		&:focus
		{
			text-decoration: none;
			// background: @xf-contentHighlightBg;
			.xf-uix_buttonHover();
		}

		&:active {
			.xf-uix_buttonActive();
		}
	}
	&.button--plain
	{
		background: none;
		color: @xf-linkColor;
		border: none;

		&:hover,
		&:active,
		&:focus
		{
			text-decoration: none;
			background: none;
		}
	}

	&.button--alt
	{
		// block colors
		background-color: @xf-contentHighlightBg;
		color: @xf-linkColor;
		.m-buttonBorderColorVariation(@xf-paletteColor2);

		&:hover,
		&:active,
		&:focus
		{
			background-color: @xf-paletteColor1;
			color: @xf-linkColor;
		}
	}

	&.button--longText
	{
		.m-overflowEllipsis();
		max-width: 100%;
		display: inline-block;
	}

	&.is-disabled
	{
		.xf-buttonDisabled();
		// .m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));

		&:hover,
		&:active,
		&:focus
		{
			.xf-buttonDisabled();
			// background: xf-default(@xf-buttonDisabled--background-color, transparent) !important;
		}
	}

	&.button--scroll
	{
		// background: fade(xf-default(@xf-buttonDefault--background-color, transparent), 75%);
		.xf-buttonPrimary();
		padding: 5px 8px;
		.m-dropShadow();

		&:hover,
		&:focus {.xf-uix_buttonPrimaryHover();}

		&:active {.xf-uix_buttonPrimaryActive();}
	}

	&.button--normal
	{
		font-size: @xf-fontSizeNormal;
	}

	&.button--small
	{
		font-size: @xf-fontSizeSmall;
		padding: 3px 6px;
		.xf-uix_buttonSmall();
	}

	&.button--smaller
	{
		font-size: @xf-fontSizeSmaller;
		padding: 2px 5px;
	}

	&.button--fullWidth
	{
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	&.button--adminStyleAsset
	{
		&.is-disabled
		{
			visibility: hidden;
		}
		&.is-modify
		{
			.m-buttonIcon(@fa-var-pencil);
		}
		&.is-revert
		{
			.m-buttonIcon(@fa-var-history);
		}
	}

	&.button--wrap
	{
		white-space: normal;
	}

	&.button--icon
	{
		> .button-text:before,
		.button-icon
		{
			.m-faBase();
		}

		> .button-text:before,
		> .fa--xf:before,
		.button-icon
		{
			// font-size: 120%;
			font-size: @xf-uix_iconSize;
			vertical-align: -.1em;
			display: inline-block;
			// margin: -.255em 6px -.255em 0;
			margin-right: .2em;
			// content: '';
		}

		> .fa--xf
		{
			// helps fix a button alignment issue (Chrome only)
			line-height: inherit;
		}

		/*
		> .button-text:before
		{
		.m-faBase();
		// font-size: 120%;
		font-size: @xf-uix_iconSize;
		vertical-align: middle;
		display: inline-block;
		// margin: -.255em 6px -.255em 0;
		margin-right: .2em;
	}
		*/

		.button-icon
		{
			height: 1em;
			vertical-align: 0;
		}

		&.button--iconOnly
		{
			> .button-text:before,
			> i.fa--xf:before,
			.button-icon
			{
				margin-left: 0;
				margin-right: 0;
			}
		}

		&.button--padded
		{
			> .button-text:before,
			> i.fa--xf:before,
			.button-icon
			{
				margin-top: 0;
				margin-bottom: 0;
			}
		}

		&--add { 
			.m-buttonIcon(@fa-var-plus-square, 0.88em);  // fa-plus-square
		}
		&--import { 
			.m-buttonIcon(@fa-var-upload, 0.1.13em); // fa-upload
		}
		&--export, &--download { 
			.m-buttonIcon(@fa-var-download, 1.13em); // fa-download
		}
		&--redirect	    {
			.m-buttonIcon(@fa-var-external-link, 1em);
		}
		&--edit	{ 
			.m-buttonIcon(@fa-var-pencil, 1.13em); // fa-pencil
		}
		&--save	{ 
			.m-buttonIcon(@fa-var-save, 0.88em); // fa-floppy-o
		}
		&--delete { 
			.m-buttonIcon(@fa-var-trash-o, 0.79em); 
		}
		&--reply { 
			.m-buttonIcon(@fa-var-mail-reply, 1.13); // fa-reply
		}
		&--quote { 
			.m-buttonIcon(@fa-var-quote-left, 1.13em); 
		}
		&--purchase	{ 
			.m-buttonIcon(@fa-var-shopping-basket, 1.13em); 
		}
		&--payment { 
			.m-buttonIcon(@fa-var-credit-card, 1.13em); 
		}
		&--convert { 
			.m-buttonIcon(@fa-var-flash, .75em); 
		}
		&--search { 
			.m-buttonIcon(@fa-var-search, 1em); 
		}
		&--sort { 
			.m-buttonIcon(@fa-var-sort, 0.63em); 
		}
		&--upload { 
			.m-buttonIcon(@fa-var-upload, 1.13em); 
		}
		&--attach { 
			.m-buttonIcon(@fa-var-paperclip, 1em); 
		}			
		&--login { 
			.m-buttonIcon(@fa-var-lock, 0.88em); 
		}
		&--rate { 
			.m-buttonIcon(@fa-var-star, 1.13em); 
		}
		&--config { 
			.m-buttonIcon(@fa-var-cog, 1em); 
		}
		&--refresh { 
			.m-buttonIcon(@fa-var-refresh, 1em); 
		}
		&--translate { 
			.m-buttonIcon(@fa-var-globe, .97em); 
		}
		&--vote { 
			.m-buttonIcon(@fa-var-check-circle-o, 1em); 
		}
		&--result { 
			.m-buttonIcon(@fa-var-bar-chart-o, 1.15em); 
		}
		&--history { 
			.m-buttonIcon(@fa-var-history, 1em); 
		}
		&--cancel  {
			.m-buttonIcon(@fa-var-ban, 1em); 
		}
		&--close { 
			.m-buttonIcon(@fa-var-times, .69em); 
		}
		&--preview { 
			.m-buttonIcon(@fa-var-eye, 1.13em); 
		}
		&--conversation { 
			.m-buttonIcon(@fa-var-comments-o, 1.13em); 
		}
		&--write { 
			.m-buttonIcon(@fa-var-edit, 1.13em);
		}
		&--download	{ 
			.m-buttonIcon(@fa-var-download, .93em); 
		}
		&--bolt { 
			.m-buttonIcon(@fa-var-bolt, .75em); 
		}
		&--list	{ 
			.m-buttonIcon(@fa-var-list, 1em); 
		}
		&--prev { 
			.m-buttonIcon(@fa-var-chevron-left, .63em); 
		}
		&--next	{ 
			.m-buttonIcon(@fa-var-chevron-right, .63em); 
		}
		&--confirm { 
			.m-buttonIcon(@fa-var-check, 1em); 
		}
		&--disable { 
			.m-buttonIcon(@fa-var-power-off, 1em); 
		}
		&--markRead { 
			.m-buttonIcon(@fa-var-check-square-o, .88em); 
		}
		&--user {
			.m-buttonIcon(@fa-var-user, .88em);
		}
		&--userCircle {
			.m-buttonIcon(@fa-var-user-circle, .97em);
		}
		&--notificationsOn { 
			.m-buttonIcon(@fa-var-bell-o, 1.25em); // actually only .88em, but as we use this as a toggle, make it the same width as bell-slash
		}
		&--notificationsOff { 
			.m-buttonIcon(@fa-var-bell-slash-o, 1.25em); 
		}
		&--show { 
			.m-buttonIcon(@fa-var-eye, 1.25em); // actually only 1.13em, but it's a toggle 
		} 
		&--hide	{
			.m-buttonIcon(@fa-var-eye-slash, 1.25em);
		}
		&--merge { 
			.m-buttonIcon(@fa-var-compress, .88em); 
		}
		&--move { 
			.m-buttonIcon(@fa-var-share, 1.13em); 
		}
		&--copy { 
			.m-buttonIcon(@fa-var-clone, .88em); 
		}
		&--approve, &--unapprove { 
			.m-buttonIcon(@fa-var-shield, 1em); 
		}
		&--delete, &--undelete { 
			.m-buttonIcon(@fa-var-trash-o, .88em); 
		}
		&--stick, &--unstick { 
			.m-buttonIcon(@fa-var-thumb-tack, .75em); 
		}
		&--lock { 
			.m-buttonIcon(@fa-var-lock, .88em); 
		}
		&--unlock { 
			.m-buttonIcon(@fa-var-unlock, .88em); 
		}
		&--bookmark
		{
			.m-buttonIcon(@fa-var-bookmark);

			&.is-bookmarked .button-text:before
			{
				font-weight: @faWeight-solid;
				color: @xf-textColorAttention;
			}
		}		
	}

	&.button--provider
	{
		> .button-text:before,
		.button-icon
		{
			.m-faBase('Brands');
			font-size: 120%;
			vertical-align: middle;
			display: inline-block;
			margin: -4px 6px -4px 0;
		}

		.button-icon
		{
			height: 1em;
			vertical-align: 0;
		}

		&--facebook
		{
			.m-buttonColorVariation(#3B5998, white);
			.m-buttonIcon(@fa-var-facebook, 1em);
			
			.button-text {display: inline;}
		}

		&--twitter
		{
			.m-buttonColorVariation(#1DA1F3, white);
			.m-buttonIcon(@fa-var-twitter, 1em);
		}

		&--google
		{
			.m-buttonColorVariation(white, #444);
			border-color: #e9e9e9;

			> .button-text:before
			{
				display: none;
			}
		}

		&--github
		{
			.m-buttonColorVariation(#666666, white);
			.m-buttonIcon(@fa-var-github, .97em);
		}

		&--linkedin
		{
			.m-buttonColorVariation(#0077b5, white);
			.m-buttonIcon(@fa-var-linkedin, .88em);
		}

		&--microsoft
		{
			.m-buttonColorVariation(#00bcf2, white);
			.m-buttonIcon(@fa-var-windows, .88em);
		}

		&--yahoo
		{
			.m-buttonColorVariation(#410093, white);
			.m-buttonIcon(@fa-var-yahoo, .88em);
		}
	}

	// button-text and button-menu are always children of button--splitTrigger
	// but are defined here for reasons of specificity, as these border colors
	// are overwritten by .m-buttonBorderColorVariation()

	> .button-text { border-right: @xf-borderSize solid transparent; }
	> .button-menu { border-left: @xf-borderSize solid transparent; }

	&.button--splitTrigger
	{
		.m-clearFix();
		padding: 0;
		font-size: 0;
		display: inline-block;

		button.button-text
		{
			background: transparent;
			border: none;
			border-right: @xf-borderSize solid transparent;
			color: inherit;
		}

		> .button-text,
		> .button-menu
		{
			.xf-buttonBase();
			display: inline-block;

			&:hover
			{
				&:after
				{
					opacity: 1;
				}
			}
		}

		> .button-text
		{
			.m-borderRightRadius(0);
		}

		> .button-menu
		{
			.m-borderLeftRadius(0);
			padding-right: xf-default(@xf-buttonBase--padding-right, 0);// * (2/3);
			padding-left: xf-default(@xf-buttonBase--padding-left, 0);// * (2/3);

			&:after
			{
				.m-menuGadget(); // .58em
				opacity: .5;
			}
		}
	}
}

.buttonGroup
{
	display: inline-block;
	vertical-align: top;
	.m-clearFix();

	&.buttonGroup--aligned
	{
		vertical-align: middle;
	}

	> .button
	{
		float: left;

		&:not(:first-child)
		{
			border-left: none;
		}

		&:not(:first-child):not(:last-child)
		{
			border-radius: 0;
		}

		&:first-child:not(:last-child)
		{
			.m-borderRightRadius(0);
		}

		&:last-child:not(:first-child)
		{
			.m-borderLeftRadius(0);
		}
	}

	> .buttonGroup-buttonWrapper
	{
		float: left;

		&:not(:first-child) > .button
		{
			border-left: none;
		}

		&:not(:first-child):not(:last-child) > .button
		{
			border-radius: 0;
		}

		&:first-child:not(:last-child) > .button
		{
			.m-borderRightRadius(0);
		}

		&:last-child:not(:first-child) > .button
		{
			.m-borderLeftRadius(0);
		}
	}
}

.toggleButton
{
	> input
	{
		display: none;
	}

	> span
	{
		.xf-buttonDisabled();
		.m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));
	}

	&.toggleButton--small > span
	{
		font-size: @xf-fontSizeSmaller;
		padding: @xf-paddingSmall;
	}

	> input:checked + span
	{
		.xf-buttonDefault();
		.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));
	}
}

.u-scrollButtons
{
	position: fixed;
	bottom: 30px;
	<xf:if is="property('uix_fab') == 'always'">
	bottom: 100px;
	<xf:elseif is="property('uix_fab') == 'mobile'" />
	@media(max-width: {{ property('uix_fabVw') - 1 }}px ) {
		bottom: 100px;
	}
	</xf:if>
	<xf:if is="(property('uix_visitorTabsMobile') == 'tabbar') && ( property('uix_fab') != 'never' )">
	@media (max-width: @xf-responsiveNarrow) {
		bottom: {{ property('paddingLarge') + 23 + 100 }}px;
}
</xf:if>
right: (@xf-pageEdgeSpacer) / 2;
.has-hiddenscroll &
{
	right: 20px;
}
z-index: @zIndex-9;
.m-transition(opacity; @xf-animationSpeed);
opacity: 0;
display: none;
&.is-transitioning
{
	display: flex;
}
&.is-active
{
	display: flex;
	opacity: 1;
}
.button
{
	font-size: 14px;
	display: flex;
	height: 24px;
	line-height: 24px;
	+ .button
	{
		margin-left: @xf-paddingMedium;
	}
}
}

.block-outer-opposite .button {
	.xf-uix_buttonSmall();
}]]></template>
    <template title="core_categorylist.less" type="public" addon_id="XF" version_id="2020036" version_string="2.2.0 Beta 6"><![CDATA[// ################################ CATEGORY LIST #######################

@_categoryListTogglerWidth: 1em;
@_categoryListTogglerPaddingH: (@xf-blockPaddingH / 2);

.categoryList
{
	display: none;
	.m-listPlain();

	&.is-active
	{
		display: block;
	}
}

.categoryList-item
{
	padding: 0;
	text-decoration: none;
	font-size: @xf-fontSizeNormal;

	&.categoryList-item--small
	{
		font-size: @xf-fontSizeSmall;
	}

	.categoryList
	{
		padding-left: @xf-paddingLarge;
	}
}

.categoryList-itemDesc
{
	display: block;
	font-size: @xf-fontSizeSmaller;
	font-weight: @xf-fontWeightNormal;
	color: @xf-textColorMuted;
	margin-top: -@xf-blockPaddingV;

	.m-overflowEllipsis();
}

.categoryList-header
{
	padding: @xf-blockPaddingV 0;
	margin: 0;
	color: @xf-textColorFeature;
	text-decoration: none;
	font-weight: @xf-fontWeightHeavy;

	&.categoryList-header--muted
	{
		color: @xf-textColorMuted;
	}

	.m-clearFix();
	.m-hiddenLinks();
}

.categoryList-itemRow
{
	display: flex;
	min-width: 0;
	align-items: center;
}

.categoryList-link
{
	display: block;
	flex-grow: 1;
	padding: (@xf-blockPaddingV / 2) @xf-blockPaddingH;
	text-decoration: none;

	.m-overflowEllipsis();

	&:hover
	{
		text-decoration: none;
	}

	&.is-selected
	{
		font-weight: @xf-fontWeightHeavy;
	}

	.categoryList-toggler + &,
	.categoryList-togglerSpacer + &
	{
		padding-left: 0;
	}
}

.categoryList-label
{
	margin-left: auto;
	align-self: center;
	padding-right: @_categoryListTogglerPaddingH;
}

.categoryList-toggler
{
	display: inline-block;
	padding: (@xf-blockPaddingV / 2) @_categoryListTogglerPaddingH;
	text-decoration: none;
	flex-grow: 0;
	line-height: 1;

	&:hover
	{
		text-decoration: none;
	}

	&:after
	{
		.m-faBase();
		// font-size: 80%;
		.m-faContent(@fa-var-chevron-down, @_categoryListTogglerWidth);
	}

	&.is-active:after
	{
		.m-faContent(@fa-var-chevron-up, @_categoryListTogglerWidth);
	}
}

.categoryList-togglerSpacer
{
	display: inline-block;
	visibility: hidden;
	padding: (@xf-blockPaddingV / 2) (@xf-blockPaddingH / 2);

	&:after
	{
		.m-faBase();
		// font-size: 80%;
		.m-faContent(@fa-var-chevron-down, @_categoryListTogglerWidth);
	}
}]]></template>
    <template title="core_contentrow.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ########################################### CONTENT ROWS ############################

@_contentRow-faderHeight: 150px;
@_contentRow-faderCoverHeight: (@_contentRow-faderHeight) / 2;

.contentRow
{
	display: flex;

	&.contentRow--alignMiddle
	{
		align-items: center;
	}

	&.is-deleted
	{
		opacity: .7;

		.contentRow-header,
		.contentRow-title
		{
			text-decoration: line-through;
		}
	}
}

.m-figureFixed(@size)
{
	width: @size;

	img,
	i.fa,
	i.fal,
	i.far,
	i.fas,
	i.fab,
	i.fad,
	.avatar
	{
		max-height: @size;
	}
}

.contentRow-figure
{
	vertical-align: top;
	white-space: nowrap;
	word-wrap: normal;
	text-align: center;

	img,
	i.fa,
	i.fal,
	i.far,
	i.fas,
	i.fab,
	i.fad,
	.avatar
	{
		vertical-align: bottom;
	}

	&.contentRow-figure--fixedBookmarkIcon
	{
		.m-figureFixed(48px);
	}

	&.contentRow-figure--fixedSmall
	{
		.m-figureFixed(60px);
	}

	&.contentRow-figure--fixedMedium
	{
		.m-figureFixed(100px);

		&.contentRow-figure--fixedMedium--fluidWidth
		{
			width: auto;
			max-width: 200px;
		}
	}

	&.contentRow-figure--fixedLarge
	{
		.m-figureFixed(200px);
	}

	&.contentRow-figure--text
	{
		font-size: @xf-fontSizeLargest;
	}
}

.contentRow-figureContainer
{
	position: relative;

	.contentRow-figureSeparated
	{
		position: absolute;
		right: -5px;
		bottom: -5px;

		.m-avatarSize(@avatar-s / 2 + 2px);
	}
}

.contentRow-figureIcon
{
	text-align: center;
	color: @xf-textColorFeature;


	img,
	i.fa,
	i.fal,
	i.far,
	i.fas,
	i.fab,
	i.fad
	{
		width: 64px;
		overflow: hidden;
		white-space: nowrap;
		word-wrap: normal;
		border-radius: @xf-borderRadiusMedium;

		.contentRow-figure--fixedBookmarkIcon &
		{
			width: 48px;
		}
	}
}

.contentRow-main
{
	flex: 1;
	min-width: 0;
	vertical-align: top;
	padding-left: @xf-paddingLarge;

	&:before
	{
		// because of line height, there appears to be extra space at the top of this
		content: '';
		display: block;
		margin-top: -.18em;
	}

	&.contentRow-main--close
	{
		padding-left: @xf-paddingMedium;
	}

	&:first-child
	{
		padding-left: 0;
	}
}

.contentRow-header
{
	margin: 0;
	padding: 0;
	font-weight: @xf-fontWeightHeavy;
	font-size: @xf-fontSizeLarge;
}

.contentRow-title
{
	margin: 0;
	padding: 0;
	font-weight: @xf-fontWeightNormal;
	font-size: @xf-fontSizeLarge;
}

.contentRow-snippet
{
	font-size: @xf-fontSizeSmall;
	margin: .25em 0;
}

.contentRow-muted
{
	color: @xf-textColorMuted;
}

.contentRow-lesser
{
	font-size: @xf-fontSizeSmall;
}

.contentRow-suffix
{
	padding-left: @xf-paddingMedium;
	white-space: nowrap;
	word-wrap: normal;
}

.contentRow-faderContainer
{
	position: relative;
	overflow: hidden;
}

.contentRow-faderContent
{
	max-height: 150px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 100px, transparent 150px);
	mask-image: linear-gradient(to bottom, #000 100px, transparent 150px);
}

.contentRow-fader
{
	position: absolute;
	top: (@_contentRow-faderHeight) + ((@xf-paddingMedium) * 2) - (@_contentRow-faderCoverHeight);
	left: 0;
	right: 0;
	height: @_contentRow-faderCoverHeight;
	@supports not (-webkit-mask-image) or not (mask-image) {
		.m-gradient(fade(@xf-contentBg, 0%), @xf-contentBg, transparent, 0%, 80%);
	}
}

.contentRow-minor
{
	font-size: @xf-fontSizeSmall;
	color: @xf-textColorMuted;

	time {color: @xf-textColorDimmed;}

	&.contentRow-minor--hideLinks
	{
		.m-hiddenLinks();
		a {text-decoration: underline;}
	}

	&.contentRow-minor--smaller
	{
		font-size: @xf-fontSizeSmaller;
	}

	&.contentRow-minor--singleLine
	{
		.m-overflowEllipsis();
	}
}

.contentRow-spaced
{
	margin: .5em 0;

	&:last-child
	{
		margin-bottom: 0;
	}
}

.contentRow-extra
{
	float: right;
	padding-left: @xf-paddingMedium;
	font-size: @xf-fontSizeSmallest;

	&.contentRow-extra--small
	{
		font-size: @xf-fontSizeSmall;
		color: @xf-textColorMuted;
	}

	&.contentRow-extra--normal
	{
		font-size: @xf-fontSizeNormal;
		color: @xf-textColorMuted;
	}

	&.contentRow-extra--large
	{
		font-size: @xf-fontSizeLarge;
		color: @xf-textColorMuted;
	}

	&.contentRow-extra--larger
	{
		font-size: @xf-fontSizeLarger;
		color: @xf-textColorMuted;
	}

	&.contentRow-extra--largest
	{
		font-size: @xf-fontSizeLargest;
		color: @xf-textColorMuted;
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.contentRow-figure
	{
		&.contentRow-figure--fixedBookmarkIcon
		{
			width: @avatar-xs;
		}

		.avatar--s
		{
			.m-avatarSize(@avatar-xs);
		}
	}

	.contentRow--hideFigureNarrow
	{
		.contentRow-figure
		{
			display: none;
		}

		.contentRow-main
		{
			padding-left: 0;
		}
	}
}]]></template>
    <template title="core_datalist.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ################################# DATA LISTS ###################

.dataList
{
	max-width: 100%;

	&.dataList--separated
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
		border-bottom: @xf-borderSize solid @xf-borderColorLight;
	}

	&.dataList--separatedTop
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}

	&.dataList--separatedBottom
	{
		border-bottom: @xf-borderSize solid @xf-borderColorLight;
	}

	&.dataList--contained
	{
		overflow-x: auto;
		max-height: 300px;
		max-height: 85vh;
	}

	&.dataList--containedFixed
	{
		overflow-x: auto;
		max-height: 300px;
	}

	@media (max-width: @xf-responsiveMedium)
	{
		overflow-x: auto;
	}
}

.dataList-table
{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.dataList-rowGroup
{
	&.is-hidden
	{
		display: none;
	}
}

.m-adjustDataListCellPadding(@paddingV; @paddingH)
{
	padding: @paddingV @paddingH;

	&.dataList-cell--action,
	&.dataList-cell--link
	{
		padding: 0;

		a,
		label,
		.dataList-blockLink
		{
			padding: @paddingV @paddingH;
		}
	}
}

.dataList-row
{
	&:hover:not(.dataList-row--noHover):not(.dataList-row--header):not(.is-spHovered),
	.is-spActive &.is-spChecked
	{
		background: fade(@xf-contentHighlightBg, 50%);
	}

	.is-spActive &.is-spHovered
	{
		background: fade(@xf-contentHighlightBg, 75%);
	}

	.is-spActive &:not(.dataList-row--noHover):not(.dataList-row--header):not(.is-spChecked) *
	{
		color: @xf-textColorMuted;
	}

	&.dataList-row--header
	{
		.dataList-cell
		{
			.xf-dataListHeader();
			.m-adjustDataListCellPadding(@xf-dataListPaddingV/2, @xf-dataListPaddingH);
			.m-textColoredLinks();
			text-align: left;

			&.dataList-cell--min
			{
				text-align: center;
			}
		}
	}

	&.dataList-row--subSection
	{
		.dataList-cell
		{
			.xf-dataListSection();
			.m-adjustDataListCellPadding(@xf-dataListPaddingV/2, @xf-dataListPaddingH);

			a { color: inherit; }
		}

		&:hover:not(.dataList-row--noHover) .dataList-cell
		{
			.xf-dataListSection(background);
		}
	}

	&.dataList-row--note
	{
		.dataList-cell
		{
			text-align: center;
		}
	}

	&.dataList-row--deleted
	{
		.dataList-cell
		{
			opacity: .5;
		}
	}

	&.dataList-row--highlighted
	{
		font-weight: @xf-fontWeightHeavy;
	}

	&.dataList-row--custom
	{
		> .dataList-cell:first-child
		{
			border-left: @xf-borderSizeFeature solid red;
		}

		.dataList-cell--link a
		{
			color: red;
		}
	}

	&.dataList-row--parentCustom
	{
		> .dataList-cell:first-child
		{
			border-left: @xf-borderSizeFeature solid orange;
		}

		.dataList-cell--link a
		{
			color: orange;
		}
	}

	&.dataList-row--protected
	{
		> .dataList-cell:first-child
		{
			border-left: @xf-borderSizeFeature solid @xf-borderColorFeature;
		}
	}

	&.is-hidden
	{
		display: none;
	}

	&.dataList-row--disabled
	{
		.dataList-cell--link a
		{
			color: @xf-textColorMuted;
			.m-transition();
		}
	}

	&.dataList-row--opposite,
	&.dataList-row--header.dataList-row--opposite
	{
		.dataList-cell
		{
			text-align: right;

			&:first-of-type
			{
				text-align: left;
			}
		}
	}

	&.dataList-row--opposite,
	&.dataList-row--header.dataList-row--opposite
	{
		.dataList-cell
		{
			text-align: right;

			&:first-of-type
			{
				text-align: left;
			}
		}
	}

	&.dataList-row--opposite,
	&.dataList-row--header.dataList-row--opposite
	{
		.dataList-cell
		{
			text-align: right;

			&:first-of-type
			{
				text-align: left;
			}
		}
	}

	tbody:last-child &:last-child .dataList-cell
	{
		border-bottom: none;
	}
}

.dataList-cell {
	vertical-align: middle;
	padding: @xf-dataListPaddingV @xf-dataListPaddingH;
	border-bottom: @xf-borderSize solid @xf-borderColorFaint;

	&.dataList-cell--main {
		min-width: 180px;
	}

	&.dataList-cell--minWidth {
		min-width: 17vw;
		min-width: ~"min(17vw, 250px)";
	}

	&.dataList-cell--link,
	&.dataList-cell--action {
		padding: 0;
	}

	&.dataList-cell--alt,
	&.dataList-cell--action {
		background: @xf-contentAltBg;
	}

	&.dataList-cell--highlighted {
		background: @xf-contentHighlightBg;
	}

	&.dataList-cell--separated {
		border-left: @xf-borderSize solid @xf-borderColorFaint;
	}

	&.dataList-cell--min,
	&.dataList-cell--action,
	&.dataList-cell--iconic,
	&.dataList-cell-fa
	{
		width: 1%;
		white-space: nowrap;
		word-wrap: normal;
		text-align: center;
	}

	&.dataList-cell--number
	{
		text-align: right;
	}

	&.dataList-cell--number
	{
		text-align: right;
	}

	&.dataList-cell--action {
		font-size: @xf-fontSizeSmaller;
	}

	&.dataList-cell--action,
	&.dataList-cell--link {
		cursor: pointer;
		text-decoration: none;

		&.dataList-cell--alt:hover,
		&.dataList-cell--action:hover {
			background: @xf-contentHighlightBg;
		}

		a,
		label,
		.dataList-blockLink {
			padding: @xf-dataListPaddingV @xf-dataListPaddingH;
			display: block;
			height: 100%;
			text-decoration: none;
			cursor: pointer;
		}

		input {
			cursor: pointer;
		}
	}

	&.dataList-cell--action a:not(.iconic) {
		//	padding: @xf-dataListPaddingV @xf-dataListPaddingH * 2;
	}

	&.dataList-cell--iconic,
	&.dataList-cell--fa
	{
		padding: 0;
		font-size: 125%;
		min-width: 2.5em;
		position: relative;
		text-align: center;
	}

	&.dataList-cell--iconic
	{
		> a.iconic > i
		{
			.iconicIcon(false);
		}

		> .iconic
		{
			position: absolute;

			// fill the cell
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			> i
			{
				&:before,
				&:after
				{
					left: 50%;
					margin-left: -.5em; // half of icon width

					top: 50%;
					margin-top: -.5em; // half of icon height
				}
			}

			> input[type=checkbox] + i
			{
				&:before,
				&:after
				{
					margin-top: -.7em;
					margin-left: -.4375em; // half of .fa-check-square width
				}
			}

			> input[type=radio] + i
			{
				&:before,
				&:after
				{
					margin-top: -.7em;
					margin-left: -.5em; // half of .fa-check-square width
<?xml version="1.0" encoding="utf-8"?>
<style title="Style By K&W Studio" description="By K&W Studio" user_selectable="1" base_version_id="2020970" export_version="2">
  <assets/>
  <templates>
    <template title="EWRporta_articles.less" type="public" addon_id="" version_id="2101" version_string="2.1.0.1"><![CDATA[.porta-article-pager { margin-top: -(@xf-elementSpacer); }
.porta-article-loader { display: none; text-align: center; }

.porta-article-item
{
	margin-bottom: @xf-elementSpacer;
	
	.porta-article-header
	{
		display: block;
		overflow: hidden;
		position: relative;
		
		.porta-header-image
		{
			background-position: center;
			background-size: cover;
			height: @xf-EWRporta_header_height;
		}
		
		.porta-header-medio
		{
			background-position: center;
			background-size: cover;
			height: @xf-EWRporta_medio_height;
		}
	
		.porta-header-text
		{
			position: absolute; bottom: 0; left: 0; right: 0;
			.xf-EWRporta_header_title;

			>span
			{
				position: absolute; bottom: 0; left: 0; right: 0;
				padding: 0 @xf-elementSpacer;
			}
		}

		.porta-header-play
		{
			position: absolute;
			top: 0; bottom: 20px; left: 0; right: 0;

			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.far
			{
				color: @xf-textColorAttention;
				font-size: 100px;
				text-shadow: 1px 1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, -1px -1px 0 #000000;
			}
		}
	}

	.porta-article-date
	{
		float: left;
		padding: @xf-paddingLarge 0;
		margin-left: @xf-EWRporta_dateblock_margin;

		.porta-date-block
		{
			.xf-messageUserBlock;
			width: 50px;
			padding: 10px;
			text-align: center;
			text-transform: uppercase;
			white-space: nowrap;

			b { display: block; font-size: 1.5em; }
		}
	}

	.message-inner { display: block; }
	.message-body .bbWrapper { display: inline; }
	.block-header { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.porta-masonry
{
	margin: 0 ~"calc(-@{xf-sidebarSpacer} / 2)";
	
	.porta-article-item
	{
		display: inline-block;
		width: ~"calc(100% / @xf-EWRporta_masonry_columns)";
		
		.porta-article-container
		{
			margin: 0 ~"calc(@xf-sidebarSpacer / 2)";
		}
	}
}

.porta-article-status
{
	display: none;
	
	.porta-article-ellipse
	{
		font-size: 20px;
		position: relative;
		width: 4em;
		height: 1em;
		margin: 10px auto;

		.loader-ellipse-dot
		{
			display: block;
			width: 1em;
			height: 1em;
			border-radius: 0.5em;
			background: @xf-textColor;
			position: absolute;
			animation-duration: 0.5s;
			animation-timing-function: ease;
			animation-iteration-count: infinite;
		}

		.loader-ellipse-dot:nth-child(1),
		.loader-ellipse-dot:nth-child(2) { left: 0; }
		.loader-ellipse-dot:nth-child(3) { left: 1.5em; }
		.loader-ellipse-dot:nth-child(4) { left: 3em; }

		@keyframes reveal { from { transform: scale(0.001); } to { transform: scale(1); } }
		@keyframes slide { to { transform: translateX(1.5em) } }

		.loader-ellipse-dot:nth-child(1) { animation-name: reveal; }
		.loader-ellipse-dot:nth-child(2),
		.loader-ellipse-dot:nth-child(3) { animation-name: slide; }
		.loader-ellipse-dot:nth-child(4) { animation-name: reveal; animation-direction: reverse; }
	}
}

@media (max-width: @xf-responsiveWide)
{
	.porta-masonry
	{
		.porta-article-item
		{
			width: ~"calc(100% / @xf-EWRporta_masonry_wide)";
		}
	}
}

@media (max-width: @xf-responsiveMedium)
{
	.porta-masonry
	{
		margin: 0 (-@xf-pageEdgeSpacer / 2);

		.porta-article-item
		{
			width: ~"calc(100% / @xf-EWRporta_masonry_medium)";
			
			.porta-article-date
			{
				margin-left: -10px;
				
				.porta-date-block
				{
					width: auto;
					padding: 10px 5px;
					transform: rotate(180deg);
					writing-mode: vertical-rl;
					
					b { display: inline; font-size: initial; }
				}
			}
		}
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.porta-masonry
	{
		.porta-article-item
		{
			display: block;
			width: 100%;

			.porta-article-container
			{
				margin: 0;
			}
			
			.porta-article-date
			{
				display: none;
			}
		}
	}
}]]></template>
    <template title="MAIL_CONTAINER" type="email" addon_id="XF" version_id="2020032" version_string="2.2.0 Beta 2"><![CDATA[<!DOCTYPE html>
<html lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}" style="font-size: 62.5%;">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<base href="{$xf.options.boardUrl}/">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="format-detection" content="telephone=no">
	<title>{$subject}</title>
</head>
<body dir="{$xf.language.text_direction}" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="bodyTable" border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
	<td align="center" valign="top" id="bodyTableContainer">
		<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="table-layout: fixed;" dir="{$xf.language.text_direction}">
		<tr>
			<td class="header" align="center" valign="top">
				<a href="{{ link('canonical:index') }}">{$xf.options.boardTitle}</a>
			</td>
		</tr>
		<tr>
			<td class="content" align="{{ $xf.isRtl ? 'right' : 'left' }}" valign="top">

{$html|raw}

			</td>
		</tr>
		<tr>
			<td class="footer" align="center" valign="top">
				<div>{{ phrase('visit_board_html', {'board_url': link('canonical:index'), 'board_title': $xf.options.boardTitle}) }}</div>

				<xf:if contentcheck="true">
					<div class="footerExtra"><xf:contentcheck>{{ phrase('email_footer_html') }}</xf:contentcheck></div>
				</xf:if>
			</td>
		</tr>
		</table>
	</td>
</tr>
</table>

</body>
</html>

<mail:text>
{$text}

-----------------------------

{{ phrase('visit_board_text', {'board_title': $xf.options.boardTitle, 'board_url': link('canonical:index')}) }}

{{ phrase('email_footer_text') }}
</mail:text>]]></template>
    <template title="PAGE_CONTAINER" type="public" addon_id="XF" version_id="2020270" version_string="2.2.2"><![CDATA[<!DOCTYPE html>

<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
<xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
<xf:set var="$title"><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" /></xf:set>
<xf:set var="$description"><xf:description /></xf:set>

<xf:set var="$uix_htmlClasses"></xf:set>

<xf:if is="property('uix_pageWidthToggle') != 'disabled'">
	<xf:comment> UI.X width toggle class</xf:comment>
	<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_page--{{$uix_pageWidth}}</xf:set>
</xf:if>

<xf:if is="property('uix_navigationType') == 'sidebarNav'">
	<xf:comment> UI.X sidebar navigation toggle class</xf:comment>
	<xf:if is="!$uix_sidebarNavCollapsed">
		<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} sidebarNav--active</xf:set>
	</xf:if>
</xf:if>

	<meta name="apple-mobile-web-app-title" content="{{ $xf.options.boardShortTitle ?: $xf.options.boardTitle }}">
	<xf:if is="property('publicIconUrl')">
		<link rel="apple-touch-icon" href="{{ base_url(property('publicIconUrl', true)) }}">
	<xf:elseif is="property('publicMetadataLogoUrl')" />
		<link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl')) }}" />
</xf:if>

<xf:if is="property('uix_collapsibleSidebar')">
	<xf:comment> UI.X sidebar toggle class</xf:comment>
	<xf:if is="$uix_sidebarCollapsed">
		<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_sidebarCollapsed</xf:set>
	</xf:if>
</xf:if>

<xf:if is="{$uix_showWelcomeSection}">
	<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_hasWelcomeSection</xf:set>
</xf:if>

<xf:comment>SectionLinks Breakpoints</xf:comment>
<xf:set var="$uix_subNavContentStatic" value="0" />

<xf:comment>--------- COMPONENT MARKUP MACROS ---------
	Markup for components can/should be added here in an XF:set if
	we want the components to have variably set locations
</xf:comment>

<xf:comment> --- Sidebar trigger --- </xf:comment>

<xf:set var="$uix_sidebarTrigger__content">
	<xf:if is="{$sidebar}">
		<xf:if is="property('uix_collapsibleSidebar') && {$uix_canCollapseSidebar}">
			<a class="uix_sidebarTrigger__component uix_sidebarTrigger {{ (property('uix_sidebarTriggerPosition') == 'sectionLinks') ? 'p-navgroup-link' : 'button'}}" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}" rel="nofollow">
				<xf:fa icon="fa-ellipsis-v" class="mdi mdi-dots-vertical" />
				<span class="uix_sidebarTrigger--phrase">{{ phrase('th_sidebar_uix') }}</span>
			</a>
		</xf:if>
		<xf:if is="property('uix_sidebarMobileCanvas')">
			<a class="uix_sidebarCanvasTrigger uix_sidebarTrigger__component p-navgroup-link" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}">
				<xf:fa icon="fa-ellipsis-v" class="mdi mdi-dots-vertical" />
				<span class="uix_sidebarTrigger--phrase">{{ phrase('th_sidebar_uix') }}</span>
			</a>
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_sidebarTrigger__component" arg-location="" arg-content="">
	<xf:if is="({$location} == property('uix_sidebarTriggerPosition')) || ({$location} == 'navigation')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Search bar --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:set var="$uix_search__component">
		<xf:if is="$xf.visitor.canSearch()">
			<div class="uix_searchBar">
				<div class="uix_searchBarInner">
					<form action="{{ link('search/search') }}" method="post" class="uix_searchForm" data-xf-init="quick-search">
						<a class="uix_search--close">
							<xf:fa icon="fa-window-close" />
						</a>
						<xf:textbox autocomplete="off" class="js-uix_syncValue uix_searchInput uix_searchDropdown__trigger" data-uixsync="search" name="keywords" placeholder="{{ phrase('search...') }}" aria-label="{{ phrase('search') }}" data-menu-autofocus="true" />
						<a href="{{ link('search') }}"
						   class="uix_search--settings u-ripple"
						   data-xf-key="{{ phrase('shortcut.search_menu')|for_attr }}"
						   aria-label="{{ phrase('search')|for_attr }}"
						   aria-expanded="false"
						   aria-haspopup="true"
						   title="{{ phrase('search')|for_attr }}">
							<xf:fa icon="fa-cog" />
						</a>
						<span class="<xf:if is="property('uix_searchButton')">uix_search--submit</xf:if> uix_searchIcon">
							<xf:fa icon="fa-search" />
						</span>
						<xf:csrf />
					</form>
				</div>

				<xf:if is="property('uix_searchIconBehavior') != 'dropdown'">
					<a class="uix_searchIconTrigger p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search u-ripple"
					   aria-label="{{ phrase('search') }}"
					   aria-expanded="false"
					   aria-haspopup="true"
					   title="{{ phrase('search') }}">
						<i aria-hidden="true"></i>
					</a>
				</xf:if>

				<xf:if is="property('uix_searchIconBehavior') != 'expand'">
					<a href="{{ link('search') }}"
					   class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search u-ripple js-uix_minimalSearch__target"
					   data-xf-click="menu"
					   aria-label="{{ phrase('search') }}"
					   aria-expanded="false"
					   aria-haspopup="true"
					   title="{{ phrase('search') }}">
						<i aria-hidden="true"></i>
					</a>
				</xf:if>

				<div class="menu menu--structural menu--wide" data-menu="menu" aria-hidden="true">
					<form action="{{ link('search/search') }}" method="post"
						  class="menu-content"
						  data-xf-init="quick-search">
						<h3 class="menu-header">{{ phrase('search') }}</h3>
						<!--[XF:search_menu:above_input]-->
						<div class="menu-row">
							<xf:if is="$searchConstraints">
								<div class="inputGroup inputGroup--joined">
									<xf:textbox name="keywords"
												class="js-uix_syncValue"
												data-uixsync="search"
												placeholder="{{ phrase('search...') }}"
												aria-label="{{ phrase('search') }}"
												data-menu-autofocus="true" />
									<xf:select name="constraints"
											   class="js-quickSearch-constraint"
											   aria-label="{{ phrase('search_within') }}">
										<xf:option value="">{{ phrase('everywhere') }}</xf:option>
										<xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint">
											<xf:option value="{$constraint|json}">{$constraintName}</xf:option>
										</xf:foreach>
									</xf:select>
								</div>
								<xf:else />
								<xf:textbox name="keywords"
											class="js-uix_syncValue"
											data-uixsync="search"
											placeholder="{{ phrase('search...') }}"
											aria-label="{{ phrase('search') }}"
											data-menu-autofocus="true" />
							</xf:if>
						</div>

						<!--[XF:search_menu:above_title_only]-->
						<div class="menu-row">
							<xf:checkbox standalone="true">
								<xf:option name="c[title_only]">
									<xf:label>
										{{ phrase('search_titles_only') }}

										<xf:if is="$xf.options.enableTagging">
											<span tabindex="0" role="button"
												  data-xf-init="tooltip" data-trigger="hover focus click" title="{{ phrase('tags_will_also_be_searched') }}">

												<xf:fa icon="far fa-question-circle" class="u-muted u-smaller" />
											</span>
										</xf:if>
									</xf:label>
								</xf:option>
							</xf:checkbox>
						</div>
						<!--[XF:search_menu:above_member]-->
						<div class="menu-row">
							<div class="inputGroup">
								<span class="inputGroup-text" id="ctrl_search_menu_by_member">{{ phrase('by:') }}</span>
								<input type="text" class="input" name="c[users]" data-xf-init="auto-complete" placeholder="{{ phrase('member')|for_attr }}" aria-labelledby="ctrl_search_menu_by_member" />
							</div>
						</div>
						<div class="menu-footer">
							<span class="menu-footer-controls">
								<xf:button type="submit" class="button--primary" icon="search" />
								<xf:button href="{{ link('search') }}">{{ phrase('advanced_search...') }}</xf:button>
							</span>
						</div>

						<xf:csrf />
					</form>
				</div>


				<div class="menu menu--structural menu--wide uix_searchDropdown__menu" aria-hidden="true">
					<form action="{{ link('search/search') }}" method="post"
						  class="menu-content"
						  data-xf-init="quick-search">
						<!--[XF:search_menu:above_input]-->
						<xf:if is="$searchConstraints">
							<div class="menu-row">

								<div class="inputGroup">
									<input name="keywords"
										   class="js-uix_syncValue"
										   data-uixsync="search"
										   placeholder="{{ phrase('search...') }}"
										   aria-label="{{ phrase('search') }}"
										   type="hidden" />
									<xf:select name="constraints"
											   class="js-quickSearch-constraint"
											   aria-label="{{ phrase('search_within') }}">
										<xf:option value="">{{ phrase('everywhere') }}</xf:option>
										<xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint">
											<xf:option value="{$constraint|json}">{$constraintName}</xf:option>
										</xf:foreach>
									</xf:select>
								</div>
							</div>
							<xf:else />
							<input name="keywords"
								   class="js-uix_syncValue"
								   data-uixsync="search"
								   placeholder="{{ phrase('search...') }}"
								   aria-label="{{ phrase('search') }}"
								   type="hidden" />
						</xf:if>

						<!--[XF:search_menu:above_title_only]-->
						<div class="menu-row">
							<xf:checkbox standalone="true">
								<xf:option name="c[title_only]">
									<xf:label>
										{{ phrase('search_titles_only') }}

										<xf:if is="$xf.options.enableTagging">
											<span tabindex="0" role="button"
												  data-xf-init="tooltip" data-trigger="hover focus click" title="{{ phrase('tags_will_also_be_searched') }}">

												<xf:fa icon="far fa-question-circle" class="u-muted u-smaller" />
											</span>
										</xf:if>
									</xf:label>
								</xf:option>
							</xf:checkbox>
						</div>
						<!--[XF:search_menu:above_member]-->
						<div class="menu-row">
							<div class="inputGroup">
								<span class="inputGroup-text">{{ phrase('by:') }}</span>
								<input class="input" name="c[users]" data-xf-init="auto-complete" placeholder="{{ phrase('member') }}" />
							</div>
						</div>
						<div class="menu-footer">
							<span class="menu-footer-controls">
								<xf:button type="submit" class="button--primary" icon="search" />
								<xf:button href="{{ link('search') }}" rel="nofollow">{{ phrase('th_advanced_uix...') }}</xf:button>
							</span>
						</div>

						<xf:csrf />
					</form>
				</div>
			</div>
		</xf:if>
	</xf:set>
</xf:if>

<xf:macro name="uix_search__component" arg-content="!" arg-location="!">
	<xf:if is="(property('uix_searchPosition') == {$location}) || ({$location} == 'navigation')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- whats new --- </xf:comment>

<xf:if is="!property('uix_removeWhatsNewButtons')">
<xf:set var="$uix_whatsNew__component">
	<a href="{{ link('whats-new') }}"
	   class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
	   title="{{ phrase('whats_new')|for_attr }}">
		<i aria-hidden="true"></i>
		<span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
	</a>
</xf:set>
</xf:if>

<xf:macro name="uix_whatsNew__component" arg-content="!" arg-location="!">
	<xf:if is="({$xf.visitor.user_id} && property('uix_userTabsPosition') == {$location}) || ({$location} == 'navigation')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- login tabs --- </xf:comment>

<xf:set var="$uix_loginTabs__component">
	<xf:if is="{$template} != 'login'">
		<xf:if is="property('uix_loginStyle') == 'dropdown'">
			<a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn" data-xf-click="menu">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
			<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true" data-href="{{ link('login') }}"></div>
		<xf:elseif is="property('uix_loginStyle') == 'modal'" />
			<a href="{{ link('login') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" data-xf-click="overlay" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
		<xf:elseif is="property('uix_loginStyle') == 'link'" />
			<a href="{{ link('login') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
		<xf:elseif is="property('uix_loginStyle') == 'slidingPanel'" />
			<a href="{{ link('login') }}" id="uix_loginPanel--trigger" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" rel="nofollow" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
		</xf:if>
	</xf:if>
	<xf:if is="{$template} != 'register_form'">
		<xf:if is="property('uix_loginStyle') != 'link'">
			<a href="{{ link('register') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--register" data-xf-click="overlay" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
			</a>
		<xf:else />
			<a href="{{ link('register') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--register" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
			</a>
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_loginTabs__component" arg-content="!" arg-location="!">
	<xf:if is="property('uix_loginTriggerPosition') == {$location} || ({$location} == 'navigation')">
		<xf:if is="{$location} == 'tablinks'">
		</xf:if>
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- user tabs --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:set var="$uix_userTabs__component">
		<xf:if is="$xf.visitor.user_state == 'rejected' OR $xf.visitor.user_state == 'disabled'">
			<a href="{{ link('account') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--user">
				<xf:avatar user="$xf.visitor" size="xxs" href="" title="" />
				<span class="p-navgroup-linkText">{$xf.visitor.username}</span>
			</a>

			<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="p-navgroup-link">
				<span class="p-navgroup-linkText">{{ phrase('log_out') }}</span>
			</a>
			<xf:else />
			<a href="{{ link('account') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--user"
			   data-xf-click="menu"
			   data-xf-key="{{ phrase('shortcut.visitor_menu')|for_attr }}"
			   data-menu-pos-ref="< .p-navgroup"
			   title="{$xf.visitor.username}"
			   aria-expanded="false"
			   aria-haspopup="true">
				<xf:avatar user="$xf.visitor" size="xxs" href="" title="" />
				<span class="p-navgroup-linkText">{$xf.visitor.username}</span>
			</a>
			<div class="menu menu--structural menu--wide menu--account" data-menu="menu" aria-hidden="true"
				 data-href="{{ link('account/visitor-menu') }}"
				 data-load-target=".js-visitorMenuBody">
				<div class="menu-content js-visitorMenuBody">
					<div class="menu-row">
						{{ phrase('loading...') }}
					</div>
				</div>
			</div>

			<a href="{{ link('conversations') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}"
			   data-badge="{$xf.visitor.conversations_unread|number}"
			   data-xf-click="menu"
			   data-xf-key="{{ phrase('shortcut.conversations_menu')|for_attr }}"
			   data-menu-pos-ref="< .p-navgroup"
			   title="{{ phrase('conversations')|for_attr }}"
			   aria-label="{{ phrase('inbox')|for_attr }}"
			   aria-expanded="false"
			   aria-haspopup="true">
				<i aria-hidden="true"></i>
				<span class="p-navgroup-linkText">{{ phrase('nav_inbox') }}</span>
			</a>
			<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
				 data-href="{{ link('conversations/popup') }}"
				 data-nocache="true"
				 data-load-target=".js-convMenuBody">
				<div class="menu-content">
					<h3 class="menu-header">{{ phrase('conversations') }}</h3>
					<div class="js-convMenuBody">
						<div class="menu-row">{{ phrase('loading...') }}</div>
					</div>
					<div class="menu-footer menu-footer--split">
						<div class="menu-footer-main">
							<ul class="listInline listInline--bullet">
								<li><a href="{{ link('conversations') }}">{{ phrase('show_all') }}</a></li>
								<xf:if is="$xf.visitor.canStartConversation()">
									<li><a href="{{ link('conversations/add') }}">{{ phrase('start_new_conversation') }}</a></li>
								</xf:if>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<a href="{{ link('account/alerts') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--alerts js-badge--alerts badgeContainer{{ $xf.visitor.alerts_unviewed ? ' badgeContainer--highlighted' : '' }}"
			   data-badge="{$xf.visitor.alerts_unviewed|number}"
			   data-xf-click="menu"
			   data-xf-key="{{ phrase('shortcut.alerts_menu')|for_attr }}"
			   data-menu-pos-ref="< .p-navgroup"
			   title="{{ phrase('alerts')|for_attr }}"
			   aria-label="{{ phrase('alerts')|for_attr }}"
			   aria-expanded="false"
			   aria-haspopup="true">
				<i aria-hidden="true"></i>
				<span class="p-navgroup-linkText">{{ phrase('nav_alerts') }}</span>
			</a>
			<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
				 data-href="{{ link('account/alerts-popup') }}"
				 data-nocache="true"
				 data-load-target=".js-alertsMenuBody">
				<div class="menu-content">
					<h3 class="menu-header">{{ phrase('alerts') }}</h3>
					<div class="js-alertsMenuBody">
						<div class="menu-row">{{ phrase('loading...') }}</div>
					</div>
					<div class="menu-footer menu-footer--split">
						<div class="menu-footer-main">
							<ul class="listInline listInline--bullet">
								<li><a href="{{ link('account/alerts') }}">{{ phrase('show_all') }}</a></li>
								<li><a href="{{ link('account/alerts/mark-read') }}" class="js-alertsMarkRead">{{ phrase('mark_read') }}</a></li>
								<li><a href="{{ link('account/preferences') }}">{{ phrase('preferences') }}</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</xf:if>
	</xf:set>
</xf:if>

<xf:macro name="uix_userTabs__component" arg-content="!" arg-location="!">
	<xf:if is="property('uix_userTabsPosition') == {$location} || ({$location} == 'navigation')">
		<xf:if is="{$location} == 'tablinks'">
		</xf:if>
		{$content}
	</xf:if>
</xf:macro>

<xf:set var="$uix_socialMediaContent">
	<xf:include template="uix_socialMedia" />
</xf:set>

<xf:macro name="uix_socialMedia__component" arg-content="" arg-location="">
	<xf:if is="(property('uix_socialMediaPosition') == {$location}) || ({$location} == 'copyright')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Visitor tabs --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="" arg-searchContent="!" arg-location="!" arg-whatsNewContent="!" arg-visitorContent="!" arg-loginTabsContent="!">
		<xf:if contentcheck="true">
			<xf:contentcheck>
				<xf:if contentcheck="true">
					<div class="p-navgroup p-account {{ $xf.visitor.user_id ? 'p-navgroup--member' : 'p-navgroup--guest' }}">
						<xf:contentcheck>
							<xf:if is="$xf.visitor.user_id">
								<xf:macro name="uix_userTabs__component" arg-content="{$visitorContent}" arg-location="{$location}" />
								<xf:else />
								<xf:macro name="uix_loginTabs__component" arg-content="{$loginTabsContent}" arg-location="{$location}" />
							</xf:if>
						</xf:contentcheck>
					</div>
				</xf:if>
				<xf:if contentcheck="true">
					<div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}">
						<xf:contentcheck>
							<xf:macro name="uix_whatsNew__component" arg-content="{$whatsNewContent}" arg-location="{$location}" />
							<xf:macro name="uix_search__component" arg-content="{$searchContent}" arg-location="{$location}" />
						</xf:contentcheck>
					</div>
				</xf:if>
				<xf:macro name="uix_socialMedia__component" arg-content="{$socialMediaContent}" arg-location="{$location}" />
			</xf:contentcheck>
		</xf:if>
	</xf:macro>
</xf:if>

<xf:comment> --- Titlebar --- </xf:comment>

<xf:set var="$uix_titlebar__component">
	<xf:if is="!{$uix_hidePageTitle} || ( {$pageAction} && !property('uix_pageActionBreadcrumb') && (!property('uix_removePageAction') || {{ !in_array({$template}, ['forum_list', 'forum_new_posts', 'thtopics_forum_newest_posts', 'thtrending_trending_view', 'thtopics_forum_latest_threads', 'thtopics_topic_list']) }} )
			   )">
		<xf:if is="$headerHtml is not empty">
			<div class="p-body-header">
				<div class="pageContent">
					{$headerHtml|raw}
				</div>
			</div>
			<xf:elseif contentcheck="true" />
			<div class="p-body-header">
				<div class="pageContent">
					<xf:contentcheck>
						<xf:if contentcheck="true">
							<div class="uix_headerInner">
								<xf:contentcheck>
									<xf:if contentcheck="true">
										<div class="p-title {{ $noH1 ? 'p-title--noH1' : '' }}">
											<xf:contentcheck>
												<xf:if is="!$noH1">
													<h1 class="p-title-value">{$h1}</h1>
												</xf:if>
											</xf:contentcheck>
										</div>
									</xf:if>

									<xf:if is="$description is not empty">
										<div class="p-description">{$description}</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</xf:if>
						<xf:if contentcheck="true">
							<div class="uix_headerInner--opposite">
								<xf:contentcheck>
									<xf:if is="!property('uix_pageActionBreadcrumb') && (!property('uix_removePageAction') || ({$template} != 'forum_list') )">
										<xf:if contentcheck="true">
											<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
										</xf:if>
									</xf:if>
									<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="titlebar" />
								</xf:contentcheck>
							</div>
						</xf:if>
					</xf:contentcheck>
				</div>
			</div>
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_titlebar__component" arg-location="!" arg-content="!">
	<xf:if is="property('uix_titlebarLocation') === {$location}">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Sidebar --- </xf:comment>

<xf:set var="$uix_sidebar__component">
	<xf:if is="$sidebar">
		<div uix_component="MainSidebar" class="p-body-sidebar">
			<div data-ocm-class="offCanvasMenu-backdrop"></div>
			<div class="uix_sidebarInner {{ (property('uix_stickySidebar') == 'top') ? ' uix_stickyBodyElement' : '' }}">
				<div class="uix_sidebar--scroller">
					<xf:ad position="container_sidebar_above" />
					<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="sidebar" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
					<xf:foreach loop="$sidebar" value="$sidebarHtml">
						{$sidebarHtml}
					</xf:foreach>
					<xf:ad position="container_sidebar_below" />
				</div>
			</div>
		</div>
	</xf:if>
</xf:set>

<xf:macro name="uix_sidebar__component" arg-location="!" arg-content="!">
	<xf:if is="property('uix_sidebarLocation') === {$location}">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Logo --- </xf:comment>

<xf:set var="$srcset">{{ property('publicLogoUrl2x') ? base_url(property('publicLogoUrl2x')) . ' 2x' : '' }}</xf:set>

<xf:set var="$uix_logo__component">
	<div class="p-header-logo p-header-logo--image">
		<a class="uix_logo" href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
			<xf:if is="property('publicLogoUrl') || property('publicLogoUrl2x')">
				<img src="{{ base_url(property('publicLogoUrl')) }}" srcset="{$srcset}" alt="{$xf.options.boardTitle}"
					 width="{{ property('publicLogoWidth') ?: '' }}" height="{{ property('publicLogoHeight') ?: '' }}" />
				<xf:else />
				<div class="uix_logo--text"><xf:if is="{{ property('uix_logoIcon') }}"><i class="{{ property('uix_logoIcon') }} uix_logoIcon"></i></xf:if>{{ property('uix_logoText') }}</div>
			</xf:if>
		</a>
		<xf:if is="property('uix_logoSmall')">
			<a class="uix_logoSmall" href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
				<img src="{{ base_url(property('uix_logoSmall')) }}"
					 alt="{$xf.options.boardTitle}"
					 />
			</a>
		</xf:if>
	</div>
</xf:set>

<xf:macro name="uix_logo__component" arg-content="!">
	{$content}
</xf:macro>

<xf:comment> --- staff bar --- </xf:comment>

<xf:set var="$uix_staffbar__component">
	<xf:if contentcheck="true">
		<div class="p-staffBar <xf:if is="{{ property('uix_stickyStaffBar') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-xf-init="{{ property('uix_stickyStaffBar') ? 'sticky-header' : ''}}">
			<div class="pageContent">
				<xf:contentcheck>
					<xf:macro name="uix_socialMedia__component" arg-content="{$uix_socialMediaContent}" arg-location="staffBarLeft" />
					<xf:if contentcheck="true">
						<xf:comment> --- add primary side staff bar content here ---</xf:comment>
						<xf:set var="$uix_alwaysStaffBar" value="1" />
						<div class="p-staffBar-inner hScroller" data-xf-init="h-scroller">
							<div class="hScroller-scroll">
								<xf:contentcheck>
									<xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
										<a href="{{ link('approval-queue') }}" class="p-staffBar-link badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}">
											{{ phrase('approval_queue') }}
										</a>
									</xf:if>

									<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total">
										<a href="{{ link('reports') }}"
										   class="p-staffBar-link badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}"
										   data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}"
										   title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:')|for_attr . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
									</xf:if>

									<xf:if contentcheck="true">
										<a class="p-staffBar-link menuTrigger" data-xf-key="alt+m" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('moderator') }}</a>
										<div class="menu" data-menu="menu" aria-hidden="true">
											<div class="menu-content">
												<h4 class="menu-header">{{ phrase('moderator_tools') }}</h4>
												<xf:contentcheck>
													<!--[XF:mod_tools_menu:top]-->
													<xf:if is="$xf.visitor.is_moderator">
														<a href="{{ link('approval-queue') }}" class="menu-linkRow">{{ phrase('approval_queue') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
														<a href="{{ link('reports') }}" class="menu-linkRow" title="{{ $xf.session.reportCounts.lastBuilt ? 'Last report update: ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
													</xf:if>
													<!--[XF:mod_tools_menu:bottom]-->
												</xf:contentcheck>
											</div>
										</div>
									</xf:if>

									<xf:if is="$xf.visitor.is_admin">
										<a href="{{ base_url('admin.php') }}" class="p-staffBar-link" target="_blank">{{ phrase('admin') }}</a>
									</xf:if>

									<xf:if contentcheck="true">
										<a href="{{ base_url('admin.php') }}" target="_blank" class="p-staffBar-link menuTrigger uix_adminTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">
											<xf:if is="$xf.visitor.is_admin">
												{{ phrase('admin') }}
												<xf:else />
												{{ phrase('moderator') }}
											</xf:if>
										</a>
										<div class="menu" data-menu="menu" aria-hidden="true">
											<div class="menu-content">
												<h4 class="menu-header">{{ phrase('moderator_tools') }}</h4>
												<xf:contentcheck>
													<!--[XF:mod_tools_menu:top]-->
													<xf:if is="$xf.visitor.is_admin">
														<a href="{{ base_url('admin.php') }}" target="_blank" class="menu-linkRow">{{ phrase('admin') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator">
														<a href="{{ link('approval-queue') }}" class="menu-linkRow">{{ phrase('approval_queue') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
														<a href="{{ link('reports') }}" class="menu-linkRow" title="{{ $xf.session.reportCounts.lastBuilt ? 'Last report update: ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
														<a href="{{ link('approval-queue') }}" class="menu-linkRow badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}">
															{{ phrase('approval_queue') }}
														</a>
													</xf:if>

													<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total">
														<a href="{{ link('reports') }}"
														   class="menu-linkRow badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}"
														   data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}"
														   title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update') . date_time($xf.session.reportCounts.lastBuilt) : '' }}">
															{{ phrase('reports') }}
														</a>
													</xf:if>
													<!--[XF:mod_tools_menu:bottom]-->
												</xf:contentcheck>
											</div>
										</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</div>
					</xf:if>

					<xf:if contentcheck="true">
						<div class="p-nav-opposite">
							<xf:if is="property('uix_staffBarBreakpoint') != '100%'">
								<xf:set var="$uix_responsiveStaffBar" value="1" />
								<xf:else />
								<xf:set var="$uix_alwaysStaffBar" value="1" />
							</xf:if>
							<xf:contentcheck>
								<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="staffBar" />
							</xf:contentcheck>
						</div>
					</xf:if>

				</xf:contentcheck>
			</div>
		</div>
	</xf:if>
</xf:set>

<xf:if is="!{$uix_alwaysStaffBar} && {$uix_responsiveStaffBar}">
	<xf:set var="$uix_htmlClasses">{$uix_htmlClasses} uix_responsiveStaffBar</xf:set>
</xf:if>

<xf:macro name="uix_staffbar__component" arg-content="!">
	{$content}
</xf:macro>

<xf:comment> --- section links --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:set var="$subNavHtml">
		<xf:if contentcheck="true">
			<div class="p-sectionLinks">
				<div class="pageContent">
					<xf:contentcheck>
						<xf:if is="property('uix_viewportWidthRemoveSubNav') != '100%'">
							<xf:if is="$selectedNavChildren is not empty">
								<xf:set var="$uix_subNavContentStatic" value="1" />
								<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_hasSectionLinks</xf:set>
								<div class="p-sectionLinks-inner hScroller" data-xf-init="h-scroller">
									<div class="hScroller-scroll">
										<ul class="p-sectionLinks-list">
											<xf:foreach loop="$selectedNavChildren" key="$navId" value="$navEntry" i="$i">
												<li>
													<xf:macro name="nav_entry" arg-navId="{$navId}" arg-nav="{$navEntry}" arg-shortcut="alt+{$i}" />
												</li>
											</xf:foreach>
										</ul>
									</div>
								</div>
							</xf:if>
							<xf:if contentcheck="true">
								<div class="p-nav-opposite">
									<xf:contentcheck>
										<xf:if contentcheck="true">
											<xf:set var="$uix_subNavContentStatic" value="1" />
											<xf:contentcheck>
												<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="tablinks" />
											</xf:contentcheck>
										</xf:if>
										<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="sectionLinks" />
									</xf:contentcheck>
								</div>
							</xf:if>
						</xf:if>
					</xf:contentcheck>
				</div>
			</div>
			<xf:elseif is="{$selectedNavEntry}" />
			<div class="p-sectionLinks p-sectionLinks--empty"></div>
		</xf:if>
	</xf:set>
</xf:if>

<xf:comment> --- UIX sidebar navigation --- </xf:comment>

<xf:set var="$uix_sidebarNav__component">
	<div class="uix_sidebarNav">
		<div class="uix_sidebarNav__inner {{ property('uix_stickySidenav') ? 'uix_stickyBodyElement' : '' }}">
			<div class="uix_sidebar--scroller">
				<xf:if contentcheck="true">
					<ul class="uix_sidebarNavList js-offCanvasNavSource">
						<xf:contentcheck>
							<xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
								<li class="uix_sidebarNavList__listItem">
									<xf:macro name="nav_entry"
											  arg-sidebarNav="1"
											  arg-navId="{$navSection}"
											  arg-nav="{$navEntry}"
											  arg-selected="{{ $navSection == $pageSection }}"
											  arg-shortcut="{$i}"/>
								</li>
							</xf:foreach>
						</xf:contentcheck>
					</ul>
				</xf:if>
				<xf:if is="$xf.visitor.user_id">
					<ul class="uix_sidebarNavList">
						<li><div class="p-navEl {{$uix_myAccountLinks == 'profile' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="profile" href="{{ link('members', $xf.visitor) }}" class="p-navEl-link">{{ phrase('th_profile_uix') }}</a></div></div></li>
						<li><div class="p-navEl {{$uix_myAccountLinks == 'alerts' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="alerts" href="{{ link('account/alerts') }}" class="p-navEl-link">{{ phrase('alerts')}}</a></div></div></li>
						<li><div class="p-navEl {{$uix_myAccountLinks == 'settings' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="settings" href="{{ link('account/preferences') }}" class="p-navEl-link">{{ phrase('settings')}}</a></div></div></li>
					</ul>
				</xf:if>
				<xf:if contentcheck="true">
					<div class="uix_sidebarNav__inner__widgets">
						<xf:contentcheck>
							{$uix_sidebarNavWidgets|raw}
						</xf:contentcheck>
					</div>
				</xf:if>
			</div>
		</div>
	</div>
</xf:set>

<xf:macro name="uix_sidebarNav__component" arg-content="!">
	{$content}
</xf:macro>

<xf:comment> --- UIX main tab component --- </xf:comment>

<xf:set var="$uix_mainTabsOffset">
	[
		{
			"breakpoint": "0",
			"offset": "0"
		}
	<xf:if is="{$uix_responsiveStaffBar} && !{$uix_alwaysStaffBar}">
	,{
		"breakpoint": "{{ property('uix_staffBarBreakpoint')|escape('json') }}",
		"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
	}	
	</xf:if>
	<xf:if is="{$uix_alwaysStaffBar}">
	,{
		"breakpoint": "0",
		"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
	}	
	</xf:if>
	<xf:if is="{{property('publicNavSticky')}} != 'none'">
			,{
				"breakpoint": "0",
				"offset": "{{property('uix_stickyNavHeight')|escape('json')}}"
			}		
	<xf:if is="{{property('publicNavSticky')}} == 'all' && {$uix_subNavContentStatic}" />		
			,{
				"breakpoint": "{{ property('uix_viewportWidthRemoveSubNav')|escape('json') }}",
				"offset": "{{(property('uix_stickySectionLinkHeight'))|escape('json')}}"
			}
	</xf:if>
	]
</xf:set>

<xf:set var="$uix_mainTabComponent">
	<xf:if contentcheck="true">
		<div data-xf-init="{{ property('uix_mainTabsSticky') ? 'sticky-header' : ''}}" class="block uix_mainTabBar {{ (property('uix_mainTabsSticky') && property('uix_removeHeaderWrapper')) ? 'uix_stickyBar' : ''}}" data-top-offset-breakpoints="{$uix_mainTabsOffset|for_attr}">
			<div class="block-tabHeader tabs hScroller" data-xf-init="h-scroller">
				<span class="hScroller-scroll">
					<xf:contentcheck>
						<xf:if is="{$uix_mainTabSets}">
							<xf:set var="$uix_hasMainTabs" value="1" />
							<xf:macro template="uix_mainTabSets" name="{$uix_mainTabSets}" arg-activeTab="{$uix_mainTabActive}" />
						</xf:if>
					</xf:contentcheck>
				</span>
			</div>
		</div>
	</xf:if>
</xf:set>

<xf:macro name="uix_mainTabComponent" arg-content="!" arg-location="!">
	<xf:if is="property('uix_tabBarLocation') === {$location} && property('uix_enableMainTabs')">
		{{$content}}
	</xf:if>
</xf:macro>

<xf:comment> --- Canvases --- </xf:comment>

<xf:macro name="uix_canvasTab" arg-icon="!" arg-location="!" arg-canvas="!" arg-type="!">
	<xf:if is="{$location} == {$canvas}">
		<div class="uix_canvasTab uix_canvasTab__{{$type}}" data-target="uix_canvasPanel__{{$type}}">
			<xf:fa icon="fa-{$icon}" />
		</div>
	</xf:if>
</xf:macro>

<xf:macro name="uix_canvasTabs" arg-location="!">
	<div class="uix_canvas__tabs">
		<xf:macro name="uix_canvasTab" arg-icon="list" arg-type="navigation" arg-location="{{property('uix_canvas_location_navigation')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="grid" arg-type="sidebar" arg-location="{{property('uix_canvas_location_sidebar')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="user" arg-type="account" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="email" arg-type="conversations" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="alert" arg-type="alerts" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="star" arg-type="custom" arg-location="{{property('uix_canvas_location_custom')}}" arg-canvas="{$location}"/>
	</div>
</xf:macro>

<xf:comment>
	<xf:set var="$uix_whatsNew__component">
		<a href="{{ link('whats-new') }}"
		   class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
		   aria-label="{{ phrase('whats_new')|for_attr }}"
		   title="{{ phrase('whats_new') }}">
			<i aria-hidden="true"></i>
			<span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
		</a>
	</xf:set>

	<xf:macro name="uix_whatsNew__component" arg-content="!" arg-location="!">
		<xf:if is="property('uix_userTabsPosition') == {$location}">
			{$content}
		</xf:if>
	</xf:macro>
</xf:comment>

<xf:comment> --- breadcrumb --- </xf:comment>

<xf:if is="!{$uix_hideBreadcrumb}">
	<xf:set var="$uix_breadcrumbCrumbContent">
		<xf:set var="$position" value="{{ 0 }}" />

		<xf:set var="$rootBreadcrumb" value="{$navTree.{$xf.options.rootBreadcrumb}}" />
		<xf:if is="$rootBreadcrumb AND $rootBreadcrumb.href != $xf.uri AND $rootBreadcrumb.href != $xf.fullUri">
			<xf:set var="$position" value="{{ $position + 1 }}" />
			<xf:macro name="crumb"
					  arg-position="{$position}"
					  arg-href="{$rootBreadcrumb.href}"
					  arg-value="{$rootBreadcrumb.title}" />
		</xf:if>

		<xf:if is="$selectedNavEntry AND $selectedNavEntry.href AND $selectedNavEntry.href != $xf.uri AND $selectedNavEntry.href != $xf.fullUri AND $selectedNavEntry.href != $rootBreadcrumb.href">
			<xf:set var="$position" value="{{ $position + 1 }}" />
			<xf:macro name="crumb"
					  arg-position="{$position}"
					  arg-href="{$selectedNavEntry.href}"
					  arg-value="{$selectedNavEntry.title}" />
		</xf:if>
		<xf:foreach loop="$breadcrumbs" value="$breadcrumb" if="$breadcrumb.href != $xf.uri AND $breadcrumb.href != $xf.fullUri">
			<xf:set var="$position" value="{{ $position + 1 }}" />
			<xf:macro name="crumb"
					  arg-position="{$position}"
					  arg-href="{$breadcrumb.href}"
					  arg-value="{$breadcrumb.value}" />
		</xf:foreach>
	</xf:set>
</xf:if>

<xf:set var="$breadcrumbCount">{{ count($breadcrumbs)|default(0) }}</xf:set>
<xf:set var="$navEntryCount">{{ $selectedNavEntry == null ? 0 : 1 }}</xf:set>

<xf:if is="{$uix_breadcrumbCrumbContent} && ({{ ($navEntryCount|escape + $breadcrumbCount|escape) != 1 }} || !property('uix_hideSingleCrumb'))">
	<xf:set var="$uix_breadcrumbHasCrumbs" value="1" />
</xf:if>

<xf:macro name="breadcrumbs" arg-breadcrumbHasCrumbs="!" arg-crumbContent="!" arg-variant="">
	<xf:if contentcheck="true">
		<div class="breadcrumb block {{ $variant ? 'p-breadcrumb--' . $variant : '' }}">
			<div class="pageContent">
				<xf:contentcheck>
					<xf:if is="{$breadcrumbHasCrumbs}">
						<xf:if contentcheck="true">
							<ul class="p-breadcrumbs {{ $variant ? 'p-breadcrumbs--' . $variant : '' }}"
								itemscope itemtype="https://schema.org/BreadcrumbList">
								<xf:contentcheck>
									{{ $crumbContent }}
								</xf:contentcheck>
							</ul>
						</xf:if>
					</xf:if>
				</xf:contentcheck>
			</div>
		</div>
	</xf:if>
</xf:macro>

<xf:macro name="crumb" arg-href="!" arg-value="!" arg-position="{{ 0 }}">
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a href="{$href}" itemprop="item">
			<xf:if is="{$href} == {$xf.homePageUrl} && property('uix_homeCrumbIcon')">
				<xf:fa icon="fa-home" />
				<span style="display: none;" itemprop="name">{$value}</span>
				<xf:else />
				<span itemprop="name">{$value}</span>
			</xf:if>
		</a>
		<xf:if is="$position"><meta itemprop="position" content="{$position}" /></xf:if>
	</li>
</xf:macro>


<xf:comment> --- Top breadcrumb ---</xf:comment>

<xf:set var="$uix_topBreadcrumb__component">
	<xf:ad position="container_breadcrumb_top_above" />
	<xf:macro name="breadcrumbs"
			  arg-crumbContent="{$uix_breadcrumbCrumbContent}"
			  arg-breadcrumbHasCrumbs="{$uix_breadcrumbHasCrumbs}" />
	<xf:ad position="container_breadcrumb_top_below" />
</xf:set>

<xf:macro name="uix_topBreadcrumb__component" arg-location="" arg-content="!">
	<xf:if is="property('uix_topBreadcrumbLocation') === {$location}">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- bottom breadcrumb --- </xf:comment>

<xf:set var="$uix_bottomBreadcrumb__component">
	<xf:if is="!property('uix_removeBottomBreadcrumb')">
		<xf:ad position="container_breadcrumb_bottom_above" />
		<xf:macro name="breadcrumbs"
				  arg-crumbContent="{$uix_breadcrumbCrumbContent}"
				  arg-breadcrumbHasCrumbs="{$uix_breadcrumbHasCrumbs}"
				  arg-variant="bottom" />
		<xf:ad position="container_breadcrumb_bottom_below" />
	</xf:if>
</xf:set>

<xf:macro name="uix_bottomBreadcrumb__component" arg-content="!" arg-location="!">
	<xf:if is="property('uix_bottomBreadcrumbLocation') == {$location}">
		{$content}
	</xf:if>
</xf:macro>


<xf:comment>------ NOTICES ---------</xf:comment>

<xf:set var="$uix_notices">
	<xf:if is="!{$uix_hideNotices}">
		<xf:if is="$notices.block">
			<xf:macro template="notice_macros" name="notice_list" arg-type="block" arg-notices="{$notices.block}" />
		</xf:if>

		<xf:if is="$notices.scrolling">
			<xf:macro template="notice_macros" name="notice_list" arg-type="scrolling" arg-notices="{$notices.scrolling}" />
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_notices" arg-location="!" arg-content="!">
	<xf:if is="{$location} == property('uix_noticeLocation')">
		{{$content}}
	</xf:if>
</xf:macro>

<xf:comment>------ FOOTER ---------</xf:comment>

<xf:set var="$uix_footer">
	<footer class="p-footer" id="footer">

		<xf:if is="!{$uix_hideExtendedFooter} && property('uix_enableExtendedFooter')">
			<xf:include template="uix_extendedFooter" />
		</xf:if>

		<div class="p-footer-inner">
			<div class="pageContent">
				<div class="p-footer-row">
					<xf:if contentcheck="true">
						<div class="p-footer-row-main">
							<ul class="p-footer-linkList p-footer-choosers">
								<xf:contentcheck>
									<xf:if is="(property('uix_pageWidthToggle') != 'disabled') && $uix_canTogglePageWidth">
										<li><a id="uix_widthToggle--trigger" data-xf-init="tooltip" title="{{ phrase('th_toggle_width_uix') }}" rel="nofollow"><xf:fa icon="fa-compress-alt" /></a></li>
									</xf:if>
									<xf:if is="$xf.visitor.canChangeStyle() && !{{ property('uix_hideStyleChoose') }}">
										<li><a href="{{ link('misc/style') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('style_chooser') }}" rel="nofollow">{$xf.style.title}</a></li>
									</xf:if>
									<xf:if is="$xf.visitor.canChangeLanguage()">
										<li><a href="{{ link('misc/language') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('language_chooser') }}" rel="nofollow"><i class="fa fa-globe" aria-hidden="true"></i> {$xf.language.title}</a></li>
									</xf:if>
								</xf:contentcheck>
							</ul>
						</div>
					</xf:if>
				</div>
				<div class="p-footer-row-opposite">
					<ul class="p-footer-linkList">
						<xf:if is="$xf.visitor.canUseContactForm()">
							<xf:if is="$xf.contactUrl">
								<li><a href="{$xf.contactUrl}" data-xf-click="{{ ($xf.options.contactUrl.overlay OR $xf.options.contactUrl.type == 'default') ? 'overlay' : '' }}">{{ phrase('contact_us') }}</a></li>
							</xf:if>
						</xf:if>

						<xf:if is="$xf.tosUrl">
							<li><a href="{$xf.tosUrl}">{{ phrase('terms_and_rules') }}</a></li>
						</xf:if>

						<xf:if is="$xf.privacyPolicyUrl">
							<li><a href="{$xf.privacyPolicyUrl}">{{ phrase('privacy_policy') }}</a></li>
						</xf:if>

						<xf:if is="$xf.helpPageCount">
							<li><a href="{{ link('help') }}">{{ phrase('help') }}</a></li>
						</xf:if>

						<xf:if is="$xf.homePageUrl">
							<li><a href="{$xf.homePageUrl}">{{ phrase('home') }}</a></li>
						</xf:if>

						<li><a href="#top" title="{{ phrase('top') }}" data-xf-click="scroll-to"><i class="fa fa-arrow-up" aria-hidden="true"></i></a></li>

						<li><a href="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}"><span aria-hidden="true"><i class="fa fa-rss"></i><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li>
					</ul>
				</div>
			</div>
		</div>

		<div class="p-footer-copyrightRow">
			<div class="pageContent">
				<div class="uix_copyrightBlock">
					<xf:if contentcheck="true">
						<div class="p-footer-copyright">
							<xf:contentcheck>
								<xf:copyright />
								<xf:callback class="ThemeHouse\Core\Branding" method="renderStyleBranding" /><xf:set var="$thBrandingDisplayed" value="1" />
								{{ phrase('extra_copyright') }}
							</xf:contentcheck>
						</div>
					</xf:if>

					<xf:if contentcheck="true">
						<div class="p-footer-debug">
							<xf:contentcheck>
								<xf:macro template="debug_macros" name="debug"
										  arg-controller="{$controller}"
										  arg-action="{$actionMethod}"
										  arg-template="{$template}" />
							</xf:contentcheck>
						</div>
					</xf:if>
				</div>
				<xf:comment>
					<xf:macro name="uix_socialMedia" arg-location="copyright" template="uix_socialMedia" />
				</xf:comment>
				<xf:macro name="uix_socialMedia__component" arg-content="{$uix_socialMediaContent}" arg-location="copyright" />
			</div>
		</div>
	</footer>
</xf:set>

<xf:macro name="uix_footer" arg-insideContent="!" arg-location="!" arg-content="!">
	<xf:if is="($insideContent && {$location} == 'insideContent') || ($location == 'bottom' && !$insideContent)">
		{{$content}}
	</xf:if>
</xf:macro>

<xf:comment>------ END COMPONENT MARKUP MACROS ---------</xf:comment>

<xf:set var="$thUixFontSize" value="{{ 62.5 * (14 + $xf.visitor.Option.thuix_font_size * 2) / 14 }}" />

<html id="XF" lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}"
	  style="font-size: {$thUixFontSize}%;"
	  data-app="public"
	  data-template="{$template}"
	  data-container-key="{$containerKey}"
	  data-content-key="{$contentKey}"
	  data-logged-in="{{ $xf.visitor.user_id ? 'true' : 'false' }}"
	  data-cookie-prefix="{$xf.cookie.prefix}"
	  data-csrf="{{ csrf_token()|escape('js') }}"
	  class="has-no-js {{ $template ? 'template-' . $template : '' }} {$uix_htmlClasses} {$uix_additionalHtmlClasses}"
	  {{ $xf.runJobs ? ' data-run-jobs=""' : '' }}>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

		<xf:comment> -- moved to top to use in macros
			<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
			<xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
			<xf:set var="$title"><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" /></xf:set>
			<xf:set var="$description"><xf:description /></xf:set>
		</xf:comment>

		<title>{$title}</title>
		<link rel="manifest" href="{{ base_url('webmanifest.php') }}">
		<xf:if is="property('metaThemeColor')">
			<meta name="theme-color" content="{{ parse_less_color(property('metaThemeColor')) }}" />
			<meta name="msapplication-TileColor" content="{{ property('metaThemeColor') }}">
		</xf:if>
		<meta name="apple-mobile-web-app-title" content="{{ $xf.options.boardShortTitle ?: $xf.options.boardTitle }}">
		<xf:if is="property('publicIconUrl')">
			<link rel="apple-touch-icon" href="{{ base_url(property('publicIconUrl', true)) }}">
		</xf:if>

		<xf:foreach loop="$head" value="$headTag">
			{$headTag}
		</xf:foreach>

		<xf:if is="!$head.meta_site_name && $siteName is not empty">
			<xf:macro template="metadata_macros" name="site_name" arg-siteName="{$siteName}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_type">
			<xf:macro template="metadata_macros" name="type" arg-type="website" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_title">
			<xf:macro template="metadata_macros" name="title" arg-title="{{ page_title() ?: $siteName }}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_description && $description is not empty && $pageDescriptionMeta">
			<xf:macro template="metadata_macros" name="description" arg-description="{$description}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_share_url">
			<xf:macro template="metadata_macros" name="share_url" arg-shareUrl="{$xf.fullUri}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_image_url && property('publicMetadataLogoUrl')">
			<xf:macro template="metadata_macros" name="image_url"
					  arg-imageUrl="{{ base_url(property('publicMetadataLogoUrl'), true) }}"
					  arg-output="{{ true }}" />
		</xf:if>

		<xf:macro template="helper_js_global" name="head" arg-app="public" />

		<xf:if is="property('publicFaviconUrl')">
			<link rel="icon" type="image/png" href="{{ base_url(property('publicFaviconUrl'), true) }}" sizes="32x32" />
		</xf:if>
		<xf:if is="property('publicMetadataLogoUrl')">
			<link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl'), true) }}" />
		</xf:if>
		<xf:include template="google_analytics" />

		<xf:set var="$uix_stickyStaffBarHeight" value="0" />

		<xf:if is="property('uix_stickyStaffBar') && ({$uix_responsiveStaffBar} || {$uix_alwaysStaffBar})">
			<xf:set var="$uix_stickyStaffBarHeight" value="{{property('uix_stickyStaffBarHeight')}}" />
		</xf:if>

	</head>

	<body data-template="{$template}">
		<xf:include template="page_style" />
		<div id="jumpToTop"></div>

		<xf:comment> -- Not currently supporting Sidebar navigation when page style is not covered ---
			<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') != 'covered'">
				<xf:macro name="uix_sidebarNav__component" arg-content="{$uix_sidebarNav__component}" />
			</xf:if>
		</xf:comment>

		<div class="uix_pageWrapper--fixed">
			<div class="p-pageWrapper" id="top">

				<xf:if is="!{{property('uix_removeHeaderWrapper')}}">
				<div class="uix_headerContainer">
					<div class="uix_headerContainer--stickyFix"></div>
				</xf:if>
					<xf:macro name="uix_staffbar__component" arg-content="{$uix_staffbar__component}" />

					<xf:set var="$uix_headerContent">
						<xf:if contentcheck="true">
							<div class="p-header-content">
								<xf:contentcheck>
									<xf:if is="property('uix_viewportShowLogoBlock') != '0'">
										<xf:macro name="uix_logo__component" arg-content="{$uix_logo__component}" />
									</xf:if>

									<xf:if contentcheck="true">
										<div class="p-nav-opposite">
											<xf:contentcheck>
												<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="header" />
											</xf:contentcheck>
										</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</xf:if>
					</xf:set>

					<xf:macro name="uix_logoBlock" arg-content="">
						<xf:if contentcheck="true">
							<header class="p-header p-header--hasExtraContent" id="header">
								<div class="p-header-inner">
									{$content}
									<xf:contentcheck>
										<xf:ad position="container_header" />
									</xf:contentcheck>

								</div>
							</header>
							<xf:else />
							<header class="p-header" id="header">
								<div class="p-header-inner">
									{$content}
								</div>
							</header>
						</xf:if>
					</xf:macro>

					<xf:if is="{{ !property('uix_navAboveHeader') }}">
						<xf:macro name="uix_logoBlock" arg-content="{$uix_headerContent}" />
					</xf:if>

					<xf:set var="$navHtml">
						<nav class="p-nav">
							<div class="p-nav-inner">
								<xf:if is="!{$uix_hideNavigation}">
									<xf:set var="$uix_badgeCounter" value="{{$xf.visitor.conversations_unread + $xf.visitor.alerts_unread}}" />
									<xf:if is="{{ property('uix_visitorTabsMobile') == 'canvas' }}">
										<xf:set var="$uix_visitorTabCanvas" value="1" />
										<xf:else />
										<xf:set var="$uix_visitorTabCanvas" value="0" />
									</xf:if>
									<a class="p-nav-menuTrigger {{ $uix_visitorTabsMobile == 'canvas' ? 'js-badge--alerts js-badge--conversations' : '' }} badgeContainer{{ ($uix_visitorTabCanvas && ($xf.visitor.alerts_unread || $xf.visitor.conversations_unread)) ? ' badgeContainer--highlighted' : '' }}" data-badge="{$uix_badgeCounter|number}" data-xf-click="off-canvas" data-menu=".js-headerOffCanvasMenu" role="button" tabindex="0">
										<i aria-hidden="true"></i>
										<span class="p-nav-menuText">{{ phrase('menu') }}</span>
									</a>
									<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') == 'covered'">
										<a class="p-nav-menuTrigger uix_sidebarNav--trigger" id="uix_sidebarNav--trigger" rel="nofollow">
											<i aria-hidden="true"></i>
											<span class="p-nav-menuText">{{ phrase('menu') }}</span>
										</a>
									</xf:if>
								</xf:if>

								<xf:macro name="uix_logo__component" arg-content="{$uix_logo__component}" />

								<xf:if is="!{$uix_hideNavigation}">
									<xf:if is="property('uix_navigationType') != 'sidebarNav' || property('uix_pageStyle') != 'covered'">
										<div class="p-nav-scroller hScroller" data-xf-init="h-scroller" data-auto-scroll=".p-navEl.is-selected">
											<div class="hScroller-scroll">
												<ul class="p-nav-list js-offCanvasNavSource">
													<xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
														<li>
															<xf:macro name="nav_entry"
																	  arg-navId="{$navSection}"
																	  arg-nav="{$navEntry}"
																	  arg-selected="{{ $navSection == $pageSection }}"
																	  arg-shortcut="{$i}" />
														</li>
													</xf:foreach>
												</ul>
											</div>
										</div>
									</xf:if>

									<xf:if is="property('uix_activeNavTitle')">
										<div class="uix_activeNavTitle">
											<span>
												<xf:if is="{$uix_mobileActiveNav}">
													{{ $uix_mobileActiveNav }}
													<xf:elseif is="{$selectedNavEntry.href}" />
													{$selectedNavEntry.title}
													<xf:else />
												</xf:if>
											</span>
										</div>
									</xf:if>
								</xf:if>

								<xf:macro name="uix_search__component" arg-location="navigationLeft" arg-content="{$uix_search__component}" />

								<xf:if contentcheck="true">
									<div class="p-nav-opposite">
										<xf:contentcheck>
											<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="navigation" />
											<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="navigation" />
										</xf:contentcheck>
									</div>
								</xf:if>
							</div>
							<xf:comment>
							<xf:macro template="uix_megaMenu" name="uix_megaMenu" />
							</xf:comment>
						</nav>
					</xf:set>
					
					<xf:set var="$uix_navOffset">
						[
							{
								"breakpoint": "0",
								"offset": "0"
							}
							<xf:if is="{$uix_responsiveStaffBar} && !{$uix_alwaysStaffBar} && {{ property('uix_stickyStaffBar') }}">
							,{
								"breakpoint": "{{ property('uix_staffBarBreakpoint')|escape('json') }}",
								"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
							}	
							</xf:if>
							<xf:if is="{$uix_alwaysStaffBar} && {{ property('uix_stickyStaffBar') }}">
							,{
								"breakpoint": "0",
								"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
							}	
							</xf:if>
						]
					</xf:set>

					<xf:if is="property('publicNavSticky') == 'primary'">
						<div class="p-navSticky p-navSticky--primary <xf:if is="{{ (property('publicNavSticky') !== 'none') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-top-offset-breakpoints="{$uix_navOffset|for_attr}" data-xf-init="sticky-header">
							{$navHtml|raw}
						</div>
						{$subNavHtml|raw}
						<xf:elseif is="property('publicNavSticky') == 'all'" />
						<div class="p-navSticky p-navSticky--all <xf:if is="{{ (property('publicNavSticky') !== 'none') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-top-offset-breakpoints="{$uix_navOffset|for_attr}" data-xf-init="sticky-header">
							{$navHtml|raw}
							{$subNavHtml|raw}
						</div>
						<xf:else />
						{$navHtml|raw}
						{$subNavHtml|raw}
					</xf:if>

					<xf:if is="{{ property('uix_navAboveHeader') }}">
						<xf:macro name="uix_logoBlock" arg-content="{$uix_headerContent}" />
					</xf:if>

					<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="header" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
					<xf:macro name="uix_topBreadcrumb__component" arg-location="header" arg-content="{$uix_topBreadcrumb__component}" />
					<xf:macro name="uix_mainTabComponent" arg-location="header" arg-content="{$uix_mainTabComponent}" />
					<xf:macro name="uix_titlebar__component" arg-location="header" arg-content="{$uix_titlebar__component}" />
					{{$uix_headerExtra|raw }}
				<xf:if is="!{{property('uix_removeHeaderWrapper')}}">
				</div>
				</xf:if>

				<xf:comment> --- UI.X off canvas start ---</xf:comment>
				<div class="offCanvasMenu offCanvasMenu--nav js-headerOffCanvasMenu" data-menu="menu" aria-hidden="true" data-ocm-builder="navigation">
					<div class="offCanvasMenu-backdrop" data-menu-close="true"></div>
					<div class="offCanvasMenu-content">
						<xf:include template="uix_canvasTabs" />
						<xf:include template="uix_canvasPanels" />

						<xf:macro name="canvasNavPanel">
							<div class="offCanvasMenu-header">
								{{ phrase('menu') }}
								<a class="offCanvasMenu-closer" data-menu-close="true" role="button" tabindex="0" aria-label="{{ phrase('close')|for_attr }}"></a>
							</div>
							<xf:if is="$xf.visitor.user_id">
								<div class="p-offCanvasAccountLink">
									<a href="{{ link('account') }}" class="offCanvasMenu-link">
										<xf:avatar user="$xf.visitor" size="xxs" href="" />
										{$xf.visitor.username}
									</a>
									<hr class="offCanvasMenu-separator" />
								</div>
							</xf:if>
							<div class="js-offCanvasNavTarget"></div>
							<xf:if is="$xf.visitor.user_id">
								<div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'profile' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="profile" href="{{ link('members', $xf.visitor) }}" class="offCanvasMenu-link">{{ phrase('th_profile_uix') }}</a></div></div>
								<div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'alerts' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="alerts" href="{{ link('account/alerts') }}" class="offCanvasMenu-link">{{ phrase('alerts')}}</a></div></div>
								<div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'settings' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="settings" href="{{ link('account/preferences') }}" class="offCanvasMenu-link">{{ phrase('settings')}}</a></div></div>
							</xf:if>
							<xf:if contentcheck="true">
								<div class="uix_sidebarNav__inner__widgets">
									<xf:contentcheck>
										{$uix_sidebarNavWidgets|raw}
									</xf:contentcheck>
								</div>
							</xf:if>
						</xf:macro>
						<div class="offCanvasMenu-installBanner js-installPromptContainer" style="display: none;" data-xf-init="install-prompt">
							<div class="offCanvasMenu-installBanner-header">{{ phrase('install_app') }}</div>
							<xf:button class="js-installPromptButton">{{ phrase('install') }}</xf:button>
						</div>
					</div>
				</div>

				<xf:macro name="uix_titlebar__component" arg-location="belowHeader" arg-content="{$uix_titlebar__component}" />

				<div class="p-body">

					<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') == 'covered'">
						<xf:macro name="uix_sidebarNav__component" arg-content="{$uix_sidebarNav__component}" />
					</xf:if>

					<div class="p-body-inner {{ $removePageWrapper ? 'p-body-inner-none' : ''}}">
						<xf:if is="!is_addon_active('ThemeHouse/UIX') && $xf.visitor.is_admin">
							<div class="blockMessage blockMessage--error blockMessage--errorUixAddon">
								<h2 style="margin: 0 0 .5em 0">UI.X Error</h2>
								<p>
									It appears that you do not have the UI.X Add-on installed. Please install this add-on to ensure your style works as expected. You can download the UI.X add-on <a href="https://www.themehouse.com/xenforo/2/addons/uix-addon">here</a>.
								</p>
								<xf:button href="https://www.themehouse.com/help/documentation/uix2" class="button--primary">
									<xf:fa icon="fa-exclamation-triangle" /> View Documentation
								</xf:button>
							</div>
						</xf:if>
						<!--XF:EXTRA_OUTPUT-->

						<xf:macro name="uix_notices" arg-location="aboveMainContainer" arg-content="{$uix_notices}" />

						<xf:macro name="uix_titlebar__component" arg-location="aboveMainContainer" arg-content="{$uix_titlebar__component}" />

						<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="aboveMainContainer" arg-showWelcomeSection="{$uix_showWelcomeSection}" />

						<xf:macro name="uix_topBreadcrumb__component" arg-location="aboveMainContainer" arg-content="{$uix_topBreadcrumb__component}" />

						<xf:macro name="uix_mainTabComponent" arg-location="aboveMainContainer" arg-content="{$uix_mainTabComponent}" />

						<xf:macro template="browser_warning_macros" name="javascript" />
						<xf:macro template="browser_warning_macros" name="browser" />

<xf:if is="count($xf.reactionsActive) > 1 AND $xf.visitor.user_id">
	<script type="text/template" id="xfReactTooltipTemplate">
		<div class="tooltip-content-inner">
			<div class="reactTooltip">
				<xf:foreach loop="$xf.reactionsActive" key="$reactionId" value="$reaction">
					<xf:reaction id="{$reactionId}" tooltip="true" />
				</xf:foreach>
			</div>
		</div>
	</script>
</xf:if>
						<div uix_component="MainContainer" class="uix_contentWrapper">

							<xf:macro name="uix_notices" arg-location="mainContainerTop" arg-content="{$uix_notices}" />

							<xf:ad position="container_content_above" />
							<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="mainContainerTop" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
							<xf:macro name="uix_topBreadcrumb__component" arg-location="mainContainerTop" arg-content="{$uix_topBreadcrumb__component}" />
							<xf:macro name="uix_titlebar__component" arg-location="mainContainerTop" arg-content="{$uix_titlebar__component}" />
							<xf:macro name="uix_mainTabComponent" arg-location="mainContainerTop" arg-content="{$uix_mainTabComponent}" />

							<div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}">
								<xf:comment>
								<xf:if is="$sideNav">
									<div class="p-body-sideNavCol"></div>
								</xf:if>
								<div class="p-body-contentCol"></div>
								<xf:if is="$sidebar">
									<div class="p-body-sidebarCol"></div>
								</xf:if>
								</xf:comment>
								<xf:if is="$sideNav">
									<div class="p-body-sideNav">
										<div class="p-body-sideNavTrigger">
											<xf:button class="button--link" data-xf-click="off-canvas" data-menu="#js-SideNavOcm">
												{{ $sideNavTitle ?: phrase('navigation') }}
											</xf:button>
										</div>
										<div class="p-body-sideNavInner {{ (property('uix_stickySidebar') == 'top') ? ' uix_stickyBodyElement' : '' }}" data-ocm-class="offCanvasMenu offCanvasMenu--blocks" id="js-SideNavOcm" data-ocm-builder="sideNav">
											<div class="uix_sidebar--scroller">
												<div data-ocm-class="offCanvasMenu-backdrop" data-menu-close="true"></div>
												<div data-ocm-class="offCanvasMenu-content">
													<div class="p-body-sideNavContent">
														<xf:ad position="container_sidenav_above" />
														<xf:foreach loop="$sideNav" value="$sideNavHtml">
															{$sideNavHtml}
														</xf:foreach>
														<xf:ad position="container_sidenav_below" />
													</div>
												</div>
											</div>
										</div>
									</div>
								</xf:if>

								<xf:macro name="uix_sidebar__component" arg-content="{$uix_sidebar__component}" arg-location="left" />
								<div uix_component="MainContent" class="p-body-content">
									<!-- ABOVE MAIN CONTENT -->
									<xf:macro name="uix_notices" arg-location="aboveMainContent" arg-content="{$uix_notices}" />
									<xf:macro name="uix_topBreadcrumb__component" arg-location="aboveMainContent" arg-content="{$uix_topBreadcrumb__component}" />
									<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="aboveMainContent" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
									<xf:macro name="uix_titlebar__component" arg-location="aboveMainContent" arg-content="{$uix_titlebar__component}" />
									<xf:macro name="uix_mainTabComponent" arg-location="aboveMainContent" arg-content="{$uix_mainTabComponent}" />
									<div class="p-body-pageContent">
										<xf:macro name="uix_notices" arg-location="mainContentTop" arg-content="{$uix_notices}" />
										<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="mainContentTop" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
										<xf:macro name="uix_topBreadcrumb__component" arg-location="mainContentTop" arg-content="{$uix_topBreadcrumb__component}" />
										<xf:macro name="uix_titlebar__component" arg-location="mainContentTop" arg-content="{$uix_titlebar__component}" />
										<xf:macro name="uix_mainTabComponent" arg-location="mainContentTop" arg-content="{$uix_mainTabComponent}" />
										{$content|raw}
										<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="mainContentBottom" />
									</div>
									<!-- BELOW MAIN CONTENT -->
									<xf:ad position="container_content_below" />
									<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="belowMainContent" />
								</div>

								<xf:macro name="uix_sidebar__component" arg-content="{$uix_sidebar__component}" arg-location="right" />
							</div>
							<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="mainContainerBottom" />
						</div>
						<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="belowMainContainer" />
						<xf:macro name="uix_footer" arg-location="insideContent" arg-content="{$uix_footer}" arg-insideContent="{{ property('uix_footerInsideContent')}}" />
					</div>
				</div>

				<xf:macro name="uix_footer" arg-location="bottom" arg-content="{$uix_footer}" arg-insideContent="{{ property('uix_footerInsideContent')}}" />

				<xf:if contentcheck="true">
					<div class="uix_fabBar uix_fabBar--active">
						<xf:contentcheck>
							<xf:if is="property('scrollJumpButtons')">
								<div class="u-scrollButtons js-scrollButtons" data-trigger-type="{{ property('scrollJumpButtons') }}">
									<xf:button href="#top" class="button--scroll ripple-JsOnly" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-up" /><span class="u-srOnly">{{ phrase('top') }}</span></xf:button>
									<xf:if is="property('scrollJumpButtons') != 'up'">
										<xf:button href="#footer" class="button--scroll ripple-JsOnly" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-down" /><span class="u-srOnly">{{ phrase('bottom') }}</span></xf:button>
									</xf:if>
								</div>
							</xf:if>
							<xf:if is="property('uix_fab') != 'never'">
								<xf:if contentcheck="true">
									<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
								</xf:if>
							</xf:if>
						</xf:contentcheck>
					</div>
				</xf:if>
				<xf:if is="(property('uix_fab') != 'never') && !property('uix_fabScroll')">
					<xf:if contentcheck="true">
						<div class="uix_fabBar uix_fabBar--mirror">
							<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
						</div>
					</xf:if>
				</xf:if>
				<xf:if is="property('uix_visitorTabsMobile') == 'tabbar'">
					<xf:macro name="uix_tabBar" template="uix_tabBar" />
				</xf:if>
			</div>
		</div>

		<div class="u-bottomFixer js-bottomFixTarget">
			<xf:if is="$notices.floating">
				<xf:macro template="notice_macros" name="notice_list" arg-type="floating" arg-notices="{$notices.floating}" />
			</xf:if>
			<xf:if is="$notices.bottom_fixer">
				<xf:macro template="notice_macros" name="notice_list" arg-type="bottom_fixer" arg-notices="{$notices.bottom_fixer}" />
			</xf:if>
		</div>

		<xf:include template="uix_config" />

		<xf:macro template="helper_js_global" name="body" arg-app="public" arg-jsState="{$jsState}" />
		
		<xf:if is="count($xf.reactionsActive) > 1">
			<script type="text/template" id="xfReactTooltipTemplate">
			<div class="tooltip-content-inner">
				<div class="reactTooltip">
					<xf:foreach loop="$xf.reactionsActive" key="$reactionId" value="$reaction">
						<xf:reaction id="{$reactionId}" tooltip="true" />
				</xf:foreach>
				</div>
				</div>
			</script>
		</xf:if>

		<xf:if is="property('uix_loginStyle') == 'slidingPanel'">
			<div class="uix__loginForm uix__loginForm--login">
				<div class="uix__loginForm--panel">
					<xf:include template="login">
						<xf:set var="$uix_loginPreventAutoFocus" value="1" />
					</xf:include>
				</div>
				<div class="uix__loginForm--mask"></div>
			</div>
		</xf:if>

		{$ldJsonHtml|raw}

	</body>
</html>

<xf:macro name="nav_entry" arg-sidebarNav="" arg-navId="!" arg-nav="!" arg-selected="{{ false }}" arg-shortcut="">
	<div class="p-navEl {{ !$sidebarNav ? 'u-ripple' : '' }} {{ $selected ? 'is-selected' : '' }}" {{ $nav.children ? 'data-has-children="true"' : '' }}>
		<xf:if is="$sidebarNav">
			<div class="p-navEl__inner u-ripple">
				</xf:if>
			<xf:if is="$nav.href">
				<xf:macro name="nav_link"
						  arg-navId="{$navId}"
						  arg-nav="{$nav}"
						  arg-class="p-navEl-link {{ $nav.children ? 'p-navEl-link--splitMenu' : '' }}"
						  arg-shortcut="{{ $nav.children ? false : $shortcut }}" />
				<xf:if is="$nav.children">
					<a data-xf-key="{$shortcut}"
					   data-xf-click="menu"
					   data-menu-pos-ref="< .p-navEl"
					   class="p-navEl-splitTrigger"
					   role="button"
					   tabindex="0"
					   aria-label="{{ phrase('toggle_expanded')|for_attr }}"
					   aria-expanded="false"
					   aria-haspopup="true">
					</a>
				</xf:if>
				<xf:elseif is="$nav.children" />
				<a data-xf-key="{$shortcut}"
				   class="p-navEl-linkHolder"
				   data-menu-pos-ref="< .p-navEl"
				   data-xf-click="menu"
				   role="button"
				   tabindex="0"
				   aria-expanded="false"
				   aria-haspopup="true">
					<xf:macro name="nav_link"
							  arg-navId="{$navId}"
							  arg-nav="{$nav}"
							  arg-class="p-navEl-link p-navEl-link--menuTrigger" />
				</a>
				<xf:else />
				<xf:macro name="nav_link"
						  arg-navId="{$navId}"
						  arg-nav="{$nav}"
						  arg-class="p-navEl-link"
						  arg-shortcut="{$shortcut}" />
			</xf:if>
			<xf:if is="$nav.children">
				<xf:if is="!{$sidebarNav}">
					<div class="menu menu--structural" data-menu="menu" aria-hidden="true">
						<div class="menu-content">
							<xf:foreach loop="$nav.children" key="$childNavId" value="$child">
								<xf:macro name="nav_menu_entry"
										  arg-navId="{$childNavId}"
										  arg-nav="{$child}" />
							</xf:foreach>
						</div>
					</div>
				</xf:if>
			</xf:if>
			<xf:if is="{$sidebarNav} && $nav.children && property('uix_tablinksInSideNav')">
				<a class="uix_sidebarNav--trigger <xf:if is="!property('uix_sideNavCollapsed') && $selected">is-expanded</xf:if>" rel="nofollow"><xf:fa icon="fa-chevron-down" /></a>
			</xf:if>
			<xf:if is="$sidebarNav">
				</div>
		</xf:if>
		<xf:if is="property('uix_tablinksInSideNav')">
			<xf:if is="{$sidebarNav}">
				<div <xf:if is="$nav.children">data-menu="false"</xf:if> class="uix_sidebarNav__subNav <xf:if is="!property('uix_sideNavCollapsed') && $selected">subNav--expand</xf:if>">
			<div class="uix_sidebarNav__subNavInner">
				<xf:foreach loop="$nav.children" key="$childNavId" value="$child">
					<xf:macro name="nav_menu_entry"
							  arg-navId="{$childNavId}"
							  arg-nav="{$child}" />
				</xf:foreach>
			</div>
			</div>
		</xf:if>
	</xf:if>
</div>
</xf:macro>

<xf:macro name="nav_link" arg-navId="!" arg-nav="!" arg-class="" arg-titleHtml="" arg-shortcut="{{ false }}">
	<xf:set var="$tag" value="{{ $nav.href ? 'a' : 'span' }}" />
	<{$tag} {{ $nav.href ? 'href="' . $nav.href . '"' : '' }}
			class="{$class} {$nav.attributes.class}"
			{{ attributes($nav.attributes, ['class']) }}
			{{ $shortcut !== false ? 'data-xf-key="' . $shortcut . '"' : '' }}
			data-nav-id="{$navId}"><xf:if is="$nav.icon"><xf:fa icon="{$nav.icon}" /> </xf:if><span>{{ $titleHtml ? $titleHtml|raw : $nav.title }}</span><xf:if is="$nav.counter"> <span class="badge badge--highlighted">{$nav.counter|number}</span></xf:if></{$tag}>
</xf:macro>

<xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0">
	<xf:macro name="nav_link"
			  arg-navId="{$navId}"
			  arg-nav="{$nav}"
			  arg-class="menu-linkRow u-ripple u-indentDepth{$depth} js-offCanvasCopy" />
	<xf:if is="$nav.children">
		<xf:foreach loop="$nav.children" key="$childNavId" value="$child">
			<xf:macro name="nav_menu_entry"
					  arg-navId="{$childNavId}"
					  arg-nav="{$child}"
					  arg-depth="{{ $depth + 1 }}" />
		</xf:foreach>
		<xf:if is="$depth == 0">
			<hr class="menu-separator" />
		</xf:if>
	</xf:if>
</xf:macro>]]></template>
    <template title="account_alerts" type="public" addon_id="XF" version_id="2020031" version_string="2.2.0 Beta 1"><![CDATA[<xf:title>{{ phrase('alerts') }}</xf:title>
<xf:page option="uix_myAccountLinks" value="alerts" />

<xf:wrap template="account_wrapper" />

<div class="block">
	<div class="block-outer"><xf:trim>
		<div class="block-outer-opposite">
			<div class="buttonGroup">
				<xf:button href="{{ link('account/alerts/mark-read') }}"
					class="button--link" overlay="true">
					{{ phrase('mark_read') }}
				</xf:button>
			</div>
		</div>
	</xf:trim></div>

	<div class="block-container">
		<div class="block-body">
			<xf:if is="$alerts is not empty">
				<ol class="listPlain" data-xf-init="alerts-list">
				<xf:foreach loop="$alerts" value="$alert">
					<li data-alert-id="{$alert.alert_id}"
						class="alert js-alert block-row block-row--separated {{ $alert.isUnreadInUi() ? 'is-unread' : '' }}">
						<xf:macro template="alert_macros" name="row" arg-alert="{$alert}" />
					</li>
				</xf:foreach>
				</ol>
			<xf:elseif is="$page <= 1" />
				<div class="block-row">{{ phrase('you_do_not_have_any_recent_alerts') }}</div>
			<xf:else />
				<div class="block-row">{{ phrase('no_alerts_can_be_shown') }}</div>
			</xf:if>
		</div>
	</div>

	<xf:pagenav link="account/alerts" page="{$page}" perpage="{$perPage}" total="{$totalAlerts}"
		wrapperclass="block-outer block-outer--after" />
</div>]]></template>
    <template title="account_preferences" type="public" addon_id="XF" version_id="2020031" version_string="2.2.0 Beta 1"><![CDATA[<xf:title>{{ phrase('preferences') }}</xf:title>
<xf:page option="uix_myAccountLinks" value="settings" />

<xf:wrap template="account_wrapper" />

<xf:form action="{{ link('account/preferences') }}" ajax="true" class="block" data-force-flash-message="true">
	<div class="block-container">
		<div class="block-body">
			<xf:if is="$xf.visitor.canChangeStyle()">

				<xf:selectrow name="user[style_id]" value="{$xf.visitor.style_id}"
					label="{{ phrase('style') }}">

					<xf:option value="0">{{ phrase('use_default_style:') }} {$defaultStyle.title}</xf:option>
					<xf:foreach loop="$styles" value="$style">
						<xf:option value="{$style.style_id}">{$style.title}{{ !$style.user_selectable ? ' *' : '' }}</xf:option>
					</xf:foreach>
				</xf:selectrow>
			<xf:else />
				<xf:hiddenval name="user[style_id]">{$xf.visitor.style_id}</xf:hiddenval>
			</xf:if>

			<xf:if is="$xf.visitor.canChangeLanguage()">
				<xf:selectrow name="user[language_id]" value="{$xf.visitor.language_id}"
					label="{{ phrase('language') }}">

					<xf:foreach loop="$languages" value="$language">
						<xf:option value="{$language.language_id}">{$language.title}{{ !$language.user_selectable ? ' *' : '' }}</xf:option>
					</xf:foreach>
				</xf:selectrow>
			<xf:else />
				<xf:hiddenval name="user[language_id]">{{ $xf.visitor.language_id ?: $xf.options.defaultLanguageId }}</xf:hiddenval>
			</xf:if>

			<xf:selectrow name="user[timezone]" value="{$xf.visitor.timezone}"
				label="{{ phrase('time_zone') }}">

				<xf:options source="$timeZones" />
			</xf:selectrow>

			<xf:macro template="helper_account" name="email_options_row" arg-showConversationOption="{{ true }}" />

			<xf:checkboxrow label="{{ phrase('content_options') }}">
				<xf:option value="watch_no_email" name="option[creation_watch_state]" checked="{{ $xf.visitor.Option.creation_watch_state ? true : false  }}"
					label="{{ phrase('automatically_watch_content_you_create...') }}">
					<xf:checkbox>
						<xf:option value="watch_email" name="option[creation_watch_state]" checked="{{ $xf.visitor.Option.creation_watch_state == 'watch_email' }}"
							label="{{ phrase('and_receive_email_notifications') }}" />
					</xf:checkbox>
				</xf:option>
				<xf:option value="watch_no_email" name="option[interaction_watch_state]" checked="{{ $xf.visitor.Option.interaction_watch_state ? true : false  }}"
					label="{{ phrase('automatically_watch_content_you_interact_with...') }}">
					<xf:checkbox>
						<xf:option value="watch_email" name="option[interaction_watch_state]" checked="{{ $xf.visitor.Option.interaction_watch_state == 'watch_email' }}"
							label="{{ phrase('and_receive_email_notifications') }}" />
					</xf:checkbox>
				</xf:option>
				<xf:option name="option[content_show_signature]" checked="{$xf.visitor.Option.content_show_signature}"
					label="{{ phrase('show_peoples_signatures_with_their_messages') }}" />
			</xf:checkboxrow>

			<xf:macro template="helper_account" name="activity_privacy_row" />

			<xf:macro template="custom_fields_macros" name="custom_fields_edit" arg-type="users" arg-group="preferences" arg-set="{$xf.visitor.Profile.custom_fields}" />

			<xf:if is="$xf.options.enableNotices && (count($xf.session.dismissedNotices) > 0)">
				<hr class="formRowSep" />

				<xf:checkboxrow>
					<xf:option name="restore_notices"
						label="{{ phrase('restore_dismissed_notices') }}"
						hint="{{ phrase('restore_dismissed_notices_hint') }}" />
				</xf:checkboxrow>
			</xf:if>

			<xf:if is="$xf.visitor.canUsePushNotifications()">
				<xf:formrow label="{{ phrase('push_notifications') }}" rowtype="button" explain="{{ phrase('enable_push_explain') }}">
					<xf:button class="is-disabled" data-xf-init="push-toggle">
						{{ phrase('push_checking_device_capabilities...') }}
					</xf:button>
				</xf:formrow>

				<xf:checkboxrow label="">
					<xf:option name="option[push_on_conversation]" checked="{$xf.visitor.Option.push_on_conversation}"
						label="{{ phrase('receive_push_notification_when_new_conversation_message_is_received') }}" />
				</xf:checkboxrow>

				<xf:js>
					jQuery.extend(true, XF.config, {
						skipPushNotificationSubscription: true,
						skipPushNotificationCta: true
					});

					jQuery.extend(XF.phrases, {
						push_enable_label: "{{ phrase('push_enable_label')|escape('js') }}",
						push_disable_label: "{{ phrase('push_disable_label')|escape('js') }}",
						push_not_supported_label: "{{ phrase('push_not_supported_label')|escape('js') }}",
						push_blocked_label: "{{ phrase('push_blocked_label')|escape('js') }}"
					});
				</xf:js>
			<xf:else />
				<xf:hiddenval name="option[push_on_conversation]">{$xf.visitor.Option.push_on_conversation}</xf:hiddenval>
			</xf:if>
		</div>

		<xf:if is="$alertOptOuts is not empty">
			<xf:css src="notification_opt_out.less" />
			<h2 class="block-formSectionHeader"><span class="block-formSectionHeader-aligner">{{ phrase('receive_notification_when_someone...') }}</span></h2>
			<div class="block-body">
				<xf:set var="$canPush" value="{{ $xf.visitor.canUsePushNotifications() }}" />
				<xf:foreach loop="$alertOptOuts" key="$contentType" value="$options">
					<xf:foreach loop="$options" key="$action" value="$label">
						<xf:formrow label="{$label}" data-content-type="{$contentType}" data-action="{$action}">
							<ul class="notificationChoices">
								<li class="notificationChoices-choice notificationChoices-choice--alert">
									<xf:checkbox standalone="true">
										<xf:option name="alert[{$contentType}_{$action}]"
											data-xf-init="{{ $canPush ? 'disabler' : '' }}" data-container="< .notificationChoices | .notificationChoices-choice--push"
											checked="{{ $xf.visitor.Option.doesReceiveAlert($contentType, $action) }}"
											label="{{ phrase('alert') }}" />
									</xf:checkbox>
								</li>
								<xf:if is="$canPush">
									<li class="notificationChoices-choice notificationChoices-choice--push">
										<xf:checkbox standalone="true">
											<xf:option name="push[{$contentType}_{$action}]"
												checked="{{ $xf.visitor.Option.doesReceivePush($contentType, $action) }}"
												label="{{ phrase('push') }}" />
										</xf:checkbox>
										<xf:hiddenval name="push_shown[{$contentType}_{$action}]">1</xf:hiddenval>
									</li>
								</xf:if>
							</ul>
						</xf:formrow>
					</xf:foreach>
					<hr class="formRowSep" />
				</xf:foreach>

			</div>
		</xf:if>

		<xf:submitrow icon="save" sticky="true" />
	</div>
</xf:form>]]></template>
    <template title="account_visitor_menu" type="public" addon_id="XF" version_id="2020035" version_string="2.2.0 Beta 5"><![CDATA[<xf:if contentcheck="true">
	<h4 class="menu-tabHeader tabs" data-xf-init="tabs" role="tablist">
		<span class="hScroller" data-xf-init="h-scroller">
			<span class="hScroller-scroll">
				<a href="{{ link('account') }}" class="tabs-tab is-active" role="tab" tabindex="0" aria-controls="{{ unique_id('accountMenu') }}">{{ phrase('your_account') }}</a>
			<xf:contentcheck>
				<xf:if is="$xf.visitor.canViewBookmarks()">
					<a href="{{ link('account/bookmarks') }}" class="tabs-tab" role="tab" tabindex="0" aria-controls="{{ unique_id('accountMenuBookmarks') }}">{{ phrase('bookmarks') }}</a>
				</xf:if>
				<!--[XF:account_tabs:bottom]-->
			</xf:contentcheck>
			</span>
		</span>
	</h4>
	<xf:set var="$hasTabs" value="{{ true }}" />
</xf:if>

<xf:set var="$accountHtml">
	<div class="menu-row menu-row--alt">
		<xf:macro name="visitor_panel_row" />
	</div>

	<xf:macro name="visitor_panel_row">
		<div class="contentRow contentRow--alignMiddle">
			<div class="contentRow-figure">
				<span class="avatarWrapper">
					<xf:avatar user="{$xf.visitor}" size="s" href="" notooltip="true" />
					<xf:if is="$xf.visitor.canUploadAvatar()">
						<a class="avatarWrapper-update" href="{{ link('account/avatar') }}" data-xf-click="overlay"><span>{{ phrase('edit') }}</span></a>
					</xf:if>
				</span>
			</div>
			<div class="contentRow-main">
				<h3 class="contentRow-header"><xf:username user="$xf.visitor" rich="true" notooltip="true" /></h3>
				<div class="contentRow-lesser">
					<xf:usertitle user="$xf.visitor" />
				</div>
			</div>
		</div>
				<div class="contentRow-minor">
					<!--[XF:stats_pairs:above_messages]-->
					<dl class="pairs pairs--justified fauxBlockLink">
						<xf:if is="property('uix_visitorPanelIcons')">
							<xf:fa icon="fa-comments" />
						<xf:else />
							<dt>{{ phrase('messages') }}</dt>
						</xf:if>
						<dd>
							<a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="fauxBlockLink-linkRow u-concealed">
								{$xf.visitor.message_count|number}
							</a>
						</dd>
					</dl>
					<!--[XF:stats_pairs:above_reactions]-->
					<dl class="pairs pairs--justified fauxBlockLink">
						<xf:if is="property('uix_visitorPanelIcons')">
							<xf:fa icon="fa-thumbs-up" />
						<xf:else />
							<dt>{{ phrase('reaction_score') }}</dt>
						</xf:if>
						<dd>
							<a href="{{ link('account/reactions') }}" class="fauxBlockLink-linkRow u-concealed">
								{$xf.visitor.reaction_score|number}
							</a>
						</dd>
					</dl>
					<!--[XF:stats_pairs:above_points]-->
					<xf:if is="$xf.options.enableTrophies">
						<dl class="pairs pairs--justified fauxBlockLink">
							<xf:if is="property('uix_visitorPanelIcons')">
								<xf:fa icon="fa-trophy" />
							<xf:else />
								<dt>{{ phrase('trophy_points') }}</dt>
							</xf:if>
							<dd>
								<a href="{{ link('members/trophies', $xf.visitor) }}" data-xf-click="overlay" class="fauxBlockLink-linkRow u-concealed">
									{$xf.visitor.trophy_points|number}
								</a>
							</dd>
						</dl>
					</xf:if>
				</div>
	</xf:macro>

	<!--[XF:menu_separator:below_visitor_panel]-->
	<hr class="menu-separator menu-separator--hard" />

	<ul class="listPlain listColumns listColumns--narrow listColumns--together">
		<!--[XF:content_links:top]-->
		<xf:if is="$xf.options.enableNewsFeed">
			<li><a href="{{ link('whats-new/news-feed') }}" class="menu-linkRow">{{ phrase('news_feed') }}</a></li>
		</xf:if>
		<li><a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="menu-linkRow">{{ phrase('your_content') }}</a></li>
		<li><a href="{{ link('account/reactions') }}" class="menu-linkRow">{{ phrase('reactions_received') }}</a></li>
		<!--[XF:content_links:bottom]-->
	</ul>

	<!--[XF:menu_separator:below_content_links]-->
	<hr class="menu-separator" />

	<ul class="listPlain listColumns listColumns--narrow listColumns--together">
		<!--[XF:account_links:top]-->
		<li><a href="{{ link('account/account-details') }}" class="menu-linkRow">{{ phrase('account_details') }}</a></li>
		<li><a href="{{ link('account/security') }}" class="menu-linkRow">{{ phrase('password_and_security') }}</a></li>
		<li><a href="{{ link('account/privacy') }}" class="menu-linkRow">{{ phrase('privacy') }}</a></li>
		<li><a href="{{ link('account/preferences') }}" class="menu-linkRow">{{ phrase('preferences') }}</a></li>
		<xf:if is="$xf.visitor.canEditSignature()">
			<li><a href="{{ link('account/signature') }}" class="menu-linkRow">{{ phrase('signature') }}</a></li>
		</xf:if>
		<xf:if is="$xf.app.userUpgradeCount">
			<li><a href="{{ link('account/upgrades') }}" class="menu-linkRow">{{ phrase('account_upgrades') }}</a></li>
		</xf:if>
		<xf:if is="$xf.app.connectedAccountCount">
			<li><a href="{{ link('account/connected-accounts') }}" class="menu-linkRow">{{ phrase('connected_accounts') }}</a></li>
		</xf:if>
		<li><a href="{{ link('account/following') }}" class="menu-linkRow">{{ phrase('following') }}</a></li>
		<li><a href="{{ link('account/ignored') }}" class="menu-linkRow">{{ phrase('ignoring') }}</a></li>
		<!--[XF:account_links:bottom]-->
	</ul>

	<!--[XF:menu_separator:below_account_links]-->
	<hr class="menu-separator" />

	<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="menu-linkRow">{{ phrase('log_out') }}</a>

	<xf:if is="$xf.visitor.canPostOnProfile()">
		<xf:form action="{{ link('members/post', $xf.visitor) }}" ajax="true"
			data-redirect="off"
			data-reset-complete="true"
			data-no-auto-focus="true"
			class="menu-footer">

			<span class="u-srOnly" id="ctrl_message">{{ phrase('update_your_status:') }}</span>
			<xf:textarea name="message" rows="1" autosize="true"
				maxlength="{$xf.options.profilePostMaxLength}"
				placeholder="{{ phrase('update_your_status...') }}"
				data-xf-init="focus-trigger user-mentioner emoji-completer" data-display="< :next" aria-labelledby="ctrl_message" />
			<div class="u-hidden u-hidden--transition u-inputSpacer">
				<xf:button type="submit" class="button--primary" icon="reply">{{ phrase('post_verb') }}</xf:button>
			</div>
		</xf:form>
	</xf:if>
</xf:set>

<xf:if is="$hasTabs">
	<ul class="tabPanes">
		<li class="is-active" role="tabpanel" id="{{ unique_id('accountMenu') }}">
			{$accountHtml|raw}
		</li>
		<xf:if is="$xf.visitor.canViewBookmarks()">
			<li role="tabpanel" id="{{ unique_id('accountMenuBookmarks') }}"
				data-href="{{ link('account/bookmarks-popup') }}"
				data-load-target=".js-bookmarksMenuBody">
				<div class="js-bookmarksMenuBody">
					<div class="menu-row">{{ phrase('loading...') }}</div>
				</div>
				<div class="menu-footer menu-footer--close">
					<a href="{{ link('account/bookmarks') }}" class="js-bookmarkShowAllLink">{{ phrase('show_all...') }}</a>
				</div>
			</li>
		</xf:if>
		<!--[XF:account_tab_panes:bottom]-->
	</ul>
<xf:else />
	{$accountHtml|raw}
</xf:if>]]></template>
    <template title="account_wrapper" type="public" addon_id="XF" version_id="2010035" version_string="2.1.0 Beta 5"><![CDATA[<xf:sidenav>
	<div class="block">
		<div class="block-container">
			<h3 class="block-header">{{ phrase('your_account') }}</h3>
			<div class="block-body">
				<!--[XF:profile_links:top]-->
				<a class="blockLink" href="{{ link('members', $xf.visitor) }}">{{ phrase('your_profile') }}</a>
				<a class="blockLink {{ $pageSelected == 'alerts' ? 'is-selected' : '' }}" href="{{ link('account/alerts') }}">
					{{ phrase('alerts') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'reactions' ? 'is-selected' : '' }}" href="{{ link('account/reactions') }}">
					{{ phrase('reactions_received') }}
				</a>
				<xf:if is="$xf.visitor.canViewBookmarks()">
					<a class="blockLink {{ $pageSelected == 'bookmarks' ? 'is-selected' : '' }}" href="{{ link('account/bookmarks') }}">
						{{ phrase('bookmarks') }}
					</a>
				</xf:if>
				<!--[XF:profile_links:bottom]-->
			</div>

			<h3 class="block-minorHeader">{{ phrase('settings') }}</h3>
			<div class="block-body">
				<!--[XF:settings_links:top]-->
				<a class="blockLink {{ $pageSelected == 'account_details' ? 'is-selected' : '' }}" href="{{ link('account/account-details') }}">
					{{ phrase('account_details') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'security' ? 'is-selected' : '' }}" href="{{ link('account/security') }}">
					{{ phrase('password_and_security') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'privacy' ? 'is-selected' : '' }}" href="{{ link('account/privacy') }}">
					{{ phrase('privacy') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'preferences' ? 'is-selected' : '' }}" href="{{ link('account/preferences') }}">
					{{ phrase('preferences') }}
				</a>
				<xf:if is="$xf.visitor.canEditSignature()">
					<a class="blockLink {{ $pageSelected == 'signature' ? 'is-selected' : '' }}" href="{{ link('account/signature') }}">
						{{ phrase('signature') }}
					</a>
				</xf:if>
				<xf:if is="$xf.app.userUpgradeCount">
					<a class="blockLink {{ $pageSelected == 'upgrades' ? 'is-selected' : '' }}" href="{{ link('account/upgrades') }}">
						{{ phrase('account_upgrades') }}
					</a>
				</xf:if>
				<xf:if is="$xf.app.connectedAccountCount">
					<a class="blockLink {{ $pageSelected == 'connected_account' ? 'is-selected' : '' }}" href="{{ link('account/connected-accounts') }}">
						{{ phrase('connected_accounts') }}
					</a>
				</xf:if>
				<a class="blockLink {{ $pageSelected == 'following' ? 'is-selected' : '' }}" href="{{ link('account/following') }}">
					{{ phrase('following') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'ignored' ? 'is-selected' : '' }}" href="{{ link('account/ignored') }}">
					{{ phrase('ignoring') }}
				</a>
				<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="blockLink">{{ phrase('log_out') }}</a>
				<!--[XF:settings_links:bottom]-->
			</div>
		</div>
	</div>
</xf:sidenav>
<xf:page option="sideNavTitle">{{ phrase('your_account') }}</xf:page>

<xf:breadcrumb href="{{ link('account') }}">{{ phrase('your_account') }}</xf:breadcrumb>

{$innerContent|raw}]]></template>
    <template title="app.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[@_nav-elTransitionSpeed: @xf-animationSpeed;
@_navAccount-hPadding: @xf-paddingLarge;
@uix_sidebarNavBreakpoint: {{ property('pageWidthMax')  + 1 + ( 2 * (property('uix_sidebarNavWidth') + property('elementSpacer')) ) }}px;

.u-anchorTarget
{
	.m-stickyHeaderConfig(@xf-publicNavSticky);
	height: (@_stickyHeader-height + @_stickyHeader-offset);
	margin-top: -(@_stickyHeader-height + @_stickyHeader-offset);
}

@supports (scroll-padding-top: 10px)
{
	html:not(.has-browser-safari)
	{
		.m-stickyHeaderConfig(@xf-publicNavSticky);
		scroll-padding-top: (@_stickyHeader-height + @_stickyHeader-offset);
	}

	html:not(.has-browser-safari) .u-anchorTarget
	{
		height: 0;
		margin-top: 0;
	}
}

.uix_pageWidth--wrapped {
	width: 100%;
	<xf:if is="property('uix_pageStyle') == 'wrapped'">
		.m-pageWidth();
	</xf:if>
}

.p-pageWrapper
{
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	// .xf-pageBackground();

	.is-modalOverlayOpen &
	{
		& when (unit(xf-default(@xf-overlayMaskBlur, 0)) > 0)
		{
			filter: blur(@xf-overlayMaskBlur);
		}
	}
	
	flex-grow: 1;
	<xf:if is="property('uix_pageStyle') == 'wrapped'">
		.xf-uix_pageWrapper();
		@media (min-width: {{ property('responsiveEdgeSpacerRemoval') + 1 }}px) {
			margin-top: @xf-pageEdgeSpacer;
			margin-bottom: @xf-pageEdgeSpacer;
			padding: @xf-pageEdgeSpacer;
		}
	
		@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
			border: none;
			box-shadow: none;
		}
	</xf:if>
}

// RESPONSIVE HEADER

.p-offCanvasAccountLink
{
	display: none;
	
	.avatar {margin-right: 24px;}
}

@media (max-width: @xf-responsiveNarrow)
{
	.p-offCanvasAccountLink, .p-offCanvasRegisterLink
	{
		display: block;
	}
}

@media (max-width: @xf-pageWidthMax) {
	#uix_widthToggle--trigger {display: none;}
}

#uix_widthToggle--trigger:hover {cursor: pointer;}

.uix_page--fixed #uix_widthToggle--trigger .fa--xf:before {
	.m-faBase();
	.m-faContent(@fa-var-expand-alt);
}

{{ include('app_staffbar.less') }}
<xf:if is="{{ property('uix_viewportShowLogoBlock') }} != '100%'">
	{{ include('app_header.less') }}
</xf:if>
{{ include('app_stickynav.less') }}
{{ include('app_nav.less') }}
{{ include('app_sectionlinks.less') }}
{{ include('app_body.less') }}
{{ include('app_breadcrumbs.less') }}
{{ include('app_title.less') }}
{{ include('app_footer.less') }}
{{ include('app_inlinemod.less') }}
{{ include('app_ignored.less') }}
{{ include('app_username_styles.less') }}
{{ include('app_user_banners.less') }}
{{ include('app_alerts.less') }}
{{ include('app_content_vote.less') }}]]></template>
    <template title="app_alerts.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[.alert
{
	&.is-unread
	{
		.xf-contentHighlightBase();
	}
}

.alertToggler
{
	text-decoration: none !important;
	padding: @xf-paddingMedium;
	margin-right: -@xf-paddingMedium;

	.alert &
	{
		opacity: 0;
	}

	.alert:hover &,
	.has-touchevents &
	{
		opacity: 1;
	}
}

.alertToggler-icon
{
	font-size: .75em;
	font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);

	.is-unread &
	{
		font-weight: @faWeight-solid;
	}
}

<xf:if is="property('uix_iconFontFamily') != 'fontawesome'">
.alert {
	.alertToggler-icon:before {content: '\F0766';}
	&.is-unread .alertToggler-icon:before {content: '\F0765';}
}
</xf:if>]]></template>
    <template title="app_body.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ######################################### MAIN BODY #################################

.p-body
{
	display: flex;
	align-items: stretch;
	flex-grow: 1;
	min-height: 1px; // IE11 workaround - related to #139187
	position: relative;
}

.p-body-inner
{
	width: 100%;
	<xf:if is="property('uix_pageStyle') != 'wrapped'">
	.m-pageWidth();
	.m-pageInset();
	<xf:else />
	@media (min-width: {{ property('responsiveEdgeSpacerRemoval') + 1 }}px ) {
		flex-grow: 1;
	}
	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		.m-pageWidth();
		.m-pageInset(); 
	}
	</xf:if>
	transition: ease-in-out max-width .3s, ease-in-out left .3s, ease-in-out width .3s;
	display: flex;
	flex-direction: column;
	.m-clearFix();
	position: relative;
	left: 0;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: @xf-elementSpacer;

	.uix_page--fluid & {
		transition: @uix_moveIn max-width .3s, @uix_moveIn left .3s, @uix_moveIn width .3s;
	}

	&.p-body-inner-none {
		max-width: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/*
	> * {
	margin-bottom: 20px;

	&:last-child {margin-bottom: 0;}
}
	*/

	.p-body-header
	{
		margin-bottom: @xf-elementSpacer;
	}

}

.uix_contentWrapper {
	// margin-bottom: @xf-elementSpacer;
	flex-grow: 1;
	<xf:if is="property('uix_contentWrapper') == 1">
	padding: @xf-pageEdgeSpacer;
	.xf-uix_contentWrapperStyle();
	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		padding: {{ property('pageEdgeSpacer') / 2 }}px;
	margin-left: -{{ property('pageEdgeSpacer') / 2 }}px;
margin-right: -{{ property('pageEdgeSpacer') / 2 }}px;
border: none;
box-shadow: none;
}
</xf:if>
}

.p-body-main
{
	// display: table;
	table-layout: fixed;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
	margin-bottom: auto;
	min-height: 1px; // IE11 workaround - related to #139187
}

.p-body-content
{
	// display: table-cell;
	vertical-align: top;
	@media ( min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
		<xf:if is="{{ property('uix_sidebarLocation') == 'right' }}">
		transition: ease-in width .2s, ease-in max-width .2s;

		.uix_sidebarCollapsed & {
			transition: ease-in width .2s .2s, ease-in max-width .2s .2s;
		}
		<xf:else />
		transition: @uix_moveOut width .2s, ease-in max-width .2s;
		.uix_sidebarCollapsed & {
			transition: ease-in width .2s .2s, ease-in max-width .2s .2s;
		}
		</xf:if>
	}
	flex-grow: 1;
	max-width: 100%;
	width: 100%;

	.p-body-main--withSidebar &,
	.p-body-main--withSideNav &
	{
		// don't let the ad overflow the sidebar area -- this can happen due to how the Adsense JS works
		ins.adsbygoogle
		{
			// -10px gives a little buffer or helps account for no scrollbar being considered
			max-width: calc(~'100vw - 10px - @{xf-pageEdgeSpacer} - @{xf-pageEdgeSpacer} - @{xf-sidebarWidth} - @{xf-sidebarSpacer}');

			@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px )
			{
				// window wider than the max width, so limit to the display area without the sidebar
				max-width: calc(~'@{xf-pageWidthMax} - @{xf-pageEdgeSpacer} - @{xf-pageEdgeSpacer} - @{xf-sidebarWidth} - @{xf-sidebarSpacer}');
			}

			@media (max-width: @xf-uix_sidebarBreakpoint)
			{
				// sidebar/sidenav have been moved/hidden
				max-width: 100vw;
			}
		}
	}

	.p-body-main--withSideNav &
	{
		@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
			width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
			max-width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
			display: inline-block;
		}
	}

	.p-body-main--withSidebar &
	{
		@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
			width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
			max-width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
			display: inline-block;
		}
	}

	@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
		.p-body-main--withSidebar.p-body-main--withSideNav & {
			width: calc(~"100% - {{ (property('sidebarWidth') + property('elementSpacer')) * 2 }}px");
			max-width: calc(~"100% - {{ (property('sidebarWidth') + property('elementSpacer')) * 2 }}px");
			display: inline-block;
		}
	}
}

.p-body-pageContent
{
	> .tabs--standalone:first-child
	{
		margin-bottom: (@xf-elementSpacer) / 2;
	}
}

.p-body-pageContent {
	<xf:if is="property('uix_contentWrapper') == 2">
	.xf-uix_contentWrapperStyle();
	padding: @xf-pageEdgeSpacer;

	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		padding: {{ property('pageEdgeSpacer') / 2 }}px;
	margin-left: -{{ property('pageEdgeSpacer') / 2 }}px;
margin-right: -{{ property('pageEdgeSpacer') / 2 }}px;
border: none;
box-shadow: none;
}
</xf:if>
}

.p-body-sideNav
{
	display: table-cell;
	vertical-align: top;
	width: @xf-sidebarWidth;
	float: left;
}

.p-body-sideNavTrigger
{
	display: none;
}

.p-body-sidebar
{
	// display: table-cell;
	display: inline-block;
	vertical-align: top;
	width: @xf-sidebarWidth;

	.contentRow-figure .avatar--m
	{
		// make these avatars a bit smaller in the sidebar so the content has more space
		.m-avatarSize(@avatar-m * 2 / 3);
	}
}

.p-body-sideNavCol,
.p-body-contentCol,
.p-body-sidebarCol
{
	display: table-column;
}

.p-body-sideNavCol,
.p-body-sidebarCol
{
	width: @xf-sidebarWidth;
}

// .block[data-widget-id],
.p-body-sideNav,
.p-body-sidebar,
// .uix_extendedFooterRow,
.columnContainer-sidebar {
	.block-container {
		.xf-uix_sidebarWidgetWrapper();
	}

	.block-minorHeader,
	.block-header
	{
		display: flex;
		align-items: center;
		padding: @xf-uix_widgetPadding;
		.xf-uix_sidebarWidgetHeading();
	}

	.block-minorHeader:before,
	.block-header:before {
		.m-faBase();
		font-size: @xf-uix_iconSize !important;
		padding-right: @xf-paddingMedium;
		color: @xf-textColorMuted;
	}

	.block-footer {
		padding: @xf-uix_widgetPadding;
		.xf-uix_sidebarWidgetFooter();
	}

	.block-row {
		padding: @xf-uix_widgetPadding;
		.xf-uix_sidebarBlockRow();
	}
}

// ----  Widget icons -----

.p-body-sidebar .block .block-minorHeader:before,
.p-body-sideNavContent .block .block-minorHeader:before, 
.p-body-sidebar .block .block-header:before,
.uix_extendedFooterRow .block .block-minorHeader:before,
.p-body-sideNavContent .block .block-header:before{
	.m-faBase();
}

// .block[data-widget-definition],
// .block[data-widget-key], 
.p-body-sideNav, .p-body-sidebar, .uix_extendedFooterRow {
	<xf:if is="{{ property('uix_defaultSidebarIcon') }}">
	.block-minorHeader:before,
	.block-header:before, {
		.m-faContent(@fa-var-file-alt);
	}
	</xf:if>

	.block[data-widget-definition="th_userNavigation"] .block-minorHeader:before {
		.m-faContent(@fa-var-user);
	}
	.block[data-widget-definition="members_online"] .block-minorHeader:before {
		.m-faContent(@fa-var-users);
	}
	.block[data-widget-definition="board_totals"] .block-minorHeader:before,
	.block[data-widget-definition="online_statistics"] .block-minorHeader:before,
	.block[data-widget-definition="forum_statistics"] .block-minorHeader:before {
		.m-faContent(@fa-var-chart-bar);
	}
	.block[data-widget-definition="share_page"] .block-minorHeader:before {
		.m-faContent(@fa-var-share);
	}
	.block[data-widget-definition="most_messages"] .block-minorHeader:before {
		.m-faContent(@fa-var-comments);
	}
	.block[data-widget-definition="find_member"] .block-minorHeader:before {
		.m-faContent(@fa-var-search);
	}
	.block[data-widget-definition="new_threads"] .block-minorHeader:before,
	.block[data-widget-definition="new_profile_posts"] .block-minorHeader:before,
	.block[data-widget-definition="new_posts"] .block-minorHeader:before{
		.m-faContent(@fa-var-comment);
	}
	.block[data-widget-definition="birthdays"] .block-minorHeader:before{
		.m-faContent(@fa-var-birthday-cake);
	}
	.block[data-widget-definition="th_navigation"] .block-minorHeader:before{
		.m-faContent(@fa-var-list);
	}
	body .block[data-widget-key="thuix_footer_facebookWidget"] .block-minorHeader:before {
		.m-faBase('Brands');
		.m-faContent(@fa-var-facebook);
	}
	body .block[data-widget-definition="thuix_footer_twitterWidget"] .block-minorHeader:before{
		.m-faBase('Brands');
		.m-faContent(@fa-var-twitter);
	}
	form[data-xf-init*="poll-block"] .block-minorHeader:before {
		.m-faContent(@fa-var-poll);
	}
}

// xpress WP widget support

.p-body-sidebar .block-xpress {
	.block-minorHeader:before {
		.m-faContent(@fa-var-file-alt);
	}
	&.widget_media_gallery .block-minorHeader:before,
	&.widget_media_audio .block-minorHeader:before {
		.m-faContent(@fa-var-image);
	}
	&.widget_calendar .block-minorHeader:before {
		.m-faContent(@fa-var-calendar);
	}
	&.widget_recent_comments .block-minorHeader:before {
		.m-faContent(@fa-var-comments);
	}
	&.widget_search .block-minorHeader:before {
		.m-faContent(@fa-var-search);
	}
}

<xf:if is="!property('uix_sidebarIcons')">
.p-body-sidebar .block .block-minorHeader:before,
.p-body-sideNavContent .block .block-minorHeader:before, 
.p-body-pageContent .block .block-minorHeader:before,
.p-body-sidebar .block .block-header:before,
.p-body-sideNavContent .block .block-header:before, 
.p-body-pageContent .block .block-header:before {display: none !important;}
</xf:if>

<xf:if is="!property('uix_footerIcons')">
.uix_extendedFooterRow .block .block-minorHeader:before {display: none !important;}
</xf:if>

.uix_extendedFooterRow .block-minorHeader:before {
	font-size: @xf-uix_iconSize !important;
	padding-right: @xf-paddingMedium;
}

<xf:if is="property('uix_visitorPanelIcons')">
	.block[data-widget-definition="visitor_panel"]

	.pairs {
		dt:after {display: none;}
	}
</xf:if>

.p-body-content,
.p-body-sideNav,
.p-body-sideNavContent,
.uix_sidebarInner
{
	> :first-child
	{
		margin-top: 0;
	}

	> :last-child
	{
		margin-bottom: 0;
	}
}

@media (max-width: @xf-uix_sidebarBreakpoint )
{

	.p-body-sideNavCol,
	.p-body-contentCol,
	.p-body-sidebarCol
	{
		display: none;
		width: auto;
	}

	/*
	.p-body-main,
	.p-body-content
	{
	display: block;
}
	*/

	.p-body-content {flex-grow: 1; width: 100%;}

	.p-body-sideNav
	{
		display: block;
		width: 100%;
	}

	.p-body-sideNavTrigger
	{
		margin-bottom: ((@xf-elementSpacer) / 2);
		text-align: center;

		.button:before
		{
			.m-faBase();
			font-size: 120%;
			vertical-align: middle;
			display: inline-block;
			margin: -4px 6px -4px 0;
			.m-faContent(@fa-var-bars); //, .88em
		}

		.has-js &
		{
			display: block;
		}
	}

	.has-js .p-body-sideNavInner:not(.offCanvasMenu)
	{
		display: none;

		.m-transitionFadeDown();
	}

	.has-no-js .p-body-sideNavInner
	{
		margin-bottom: @xf-elementSpacer;
	}

	.p-body-sidebar
	{
		width: 100%;
		float: none;
		order: 1;
		flex-grow: 1;
		display: block;
		margin-top: @xf-elementSpacer;

		.uix_sidebarInner {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			flex-grow: 1;
			margin: 0 -((@xf-pageEdgeSpacer) / 2);
		}

		.uix_sidebarInner .uix_sidebar--scroller > *
		{
			margin: 0 ((@xf-pageEdgeSpacer) / 2) @xf-elementSpacer;
			min-width: @xf-sidebarWidth;
			flex: 1 1 @xf-sidebarWidth;

			.block-container {
				margin-left: 0;
				margin-right: 0;
			}

			&:last-child
			{
				margin-bottom: @xf-elementSpacer;
			}
		}

		.uix_sidebarInner.offCanvasMenu-content .uix_sidebar--scroller > * {
			flex: auto;
			min-width: 0;
		}

		// add an invisible block to ensure that the last row has the correct widths
		&:after
		{
			display: block;
			content: '';
			height: 0;
			margin: 0 ((@xf-pageEdgeSpacer) / 2);
			min-width: @xf-sidebarWidth;
			flex: 1 1 @xf-sidebarWidth;
		}

		.block-container
		{
			display: flex;
			flex-direction: column;
			height: 100%;

			.block-footer
			{
				margin-top: auto;
			}
		}
	}

	.p-body-main--withSideNav,
	.p-body-main--withSidebar
	{
		.p-body-content { padding: 0; }
	}
}

.uix_sidebarCollapsed .uix_sidebarInner {
	overflow: hidden;
}

@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
	.p-body-sideNavContent
	{
		// this is likely to contain blocks that overflow the container so account for that
		margin: 0 -@xf-pageEdgeSpacer;
		padding: 0 @xf-pageEdgeSpacer;

		.offCanvasMenu &
		{
			margin: 0;
			padding: 0;
		}
	}

	.p-body-sidebar
	{
		display: block;
		margin-left: 0;
		margin-right: 0;

		.uix_sidebarInner > *
		{
			// margin-left: 0;
			// margin-right: 0;
			min-width: 0;
		}
	}
}]]></template>
    <template title="app_breadcrumbs.less" type="public" addon_id="XF" version_id="2020070" version_string="2.2.0"><![CDATA[.breadcrumb {
	<xf:if is="property('uix_pageStyle') == 'fixed'">
	.m-pageWidth();
	</xf:if>

	.pageContent {
		<xf:if is="property('uix_pageStyle') != 'fixed'">
		.m-pageWidth();
		</xf:if>
	}
	
	.p-body-inner & {
		max-width: 100%;
		width: 100%;
		padding-left: 0;
		padding-right: 0;

		.pageContent {
			max-width: 100%;
			width: 100%;		
			padding-left: 0;
			padding-right: 0;
		}
	}
}


.p-pageWrapper .breadcrumb {
	@media (min-width: @xf-responsiveNarrow) {
		.xf-uix_breadcrumbWrapper();
	}
	
	&.p-breadcrumb--bottom {
		.xf-uix_breadcrumbWrapperBottom();
	}
	
	.pageContent {
		display: flex;
		align-items: center;
		
		> *:not(:last-child) {margin-right: @xf-paddingMedium;}
	}
	
	.uix_breadcrumb--opposite {
		margin-left: auto;
		display: inline-flex;
		align-items: center;
		
		> *:not(:last-child) {margin-right: 5px;}
	}
}

.p-breadcrumbs
{
	.m-listPlain();
	.m-clearFix();

	// margin-bottom: 5px;
	// line-height: 1.5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-grow: 1;
	@media (min-width: @xf-responsiveNarrow) {
		.xf-uix_breadcrumbStyle();
	}
	
	i {font-size: @xf-uix_iconSize;}

	&.p-breadcrumbs--bottom
	{
		// margin-top: @xf-elementSpacer;
		margin-bottom: 0;
	}

	> li
	{
		float: left;
		font-size: @xf-fontSizeSmall;
		display: flex;
		align-items: center;
		font-size: inherit;

		a
		{
			display: inline-block;
			vertical-align: bottom;
			max-width: 300px;
			.m-overflowEllipsis();
			.xf-uix_breadcrumbItem();
		}

		&:after,
		&:before
		{
			.m-faBase();
			// font-size: 90%;
			// color: @xf-textColorMuted;
		}

		&:after
		{
			.m-faContent(@fa-var-angle-right, false ltr); //, .5em
			.m-faContent(@fa-var-angle-left, false, rtl); //, .5em
			margin: 0 .5em;
		}
		
		&:first-child {
			padding-left: 0;
		}

		&:last-child
		{
			
			&:after {display: none;}
			a
			{
				font-weight: @xf-fontWeightHeavy;
				.xf-uix_breadcrumbItem__active();
				
				
			}
		}
	}
}

@media (max-width: @xf-responsiveMedium)
{
	.p-breadcrumbs > li a
	{
		max-width: 200px;
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.p-breadcrumbs
	{
		> li
		{
			font-size: @xf-fontSizeSmallest;
			display: none;
			padding-left: 0;
			
			a {
				display: inline-flex;
				align-items: center;				
			}

			&:last-child
			{
				// display: block;
				display: flex;
			}

			a
			{
				max-width: 90vw;
				color: inherit !important;
				&:hover {text-decoration: none;}
			}

			&:after
			{
				display: none;
			}

			a:before
			{
				.m-faBase();
				.m-faContent(@fa-var-chevron-left, .72em, ltr);
				.m-faContent(@fa-var-chevron-right, .72em, rtl);
				// margin-right: .5em;
				font-size: @xf-uix_iconSizeLarge !important;
				color: inherit;
			}
		}
	}
}]]></template>
    <template title="app_footer.less" type="public" addon_id="XF" version_id="2010032" version_string="2.1.0 Beta 2"><![CDATA[// ######################################### FOOTER #################################

<xf:comment> may have been removed at xf2 beta
.p-footer-debug-list
 {
	 // color: xf-default(@xf-publicFooterLink--color, inherit);

	.pairs--debug
	{
		display: inline;
		padding-right: 4px;

		> dt,
		> dd
		{
			display: inline;
			color: inherit;

			a {padding: 0;}
		}
	}
 }
</xf:comment>

.p-footer
{
	display: flex;
	flex-direction: column;
	.xf-publicFooter();

	// a {.xf-publicFooterLink();}
}

.p-footer-inner
{
	order: @xf-uix_footerMenuOrder;
	<xf:if is="property('uix_pageStyle') != 'covered' && !property('uix_forceCoverFooterMenu')">
		.m-pageWidth();
		.m-pageInset();
	</xf:if>
	padding-top: @xf-paddingMedium;
	padding-bottom: @xf-paddingMedium;
	.xf-uix_footerMenu();

	.pageContent {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		<xf:if is="property('uix_pageStyle') == 'covered' || property('uix_forceCoverFooterMenu')">
			.m-pageWidth();
			.m-pageInset();
			<xf:if is="(property('uix_pageStyle') != 'wrapped')">
				padding:0;
			</xf:if>
		</xf:if>
	}

	a {
		.xf-publicFooterLink();
	}
}

.p-footer-copyrightRow {
	order: @xf-uix_copyrightOrder;
	<xf:if is="property('uix_pageStyle') != 'covered' && !property('uix_forceCoverCopyright')">
	.m-pageWidth();
	.m-pageInset();
	</xf:if>
	.xf-uix_footerCopyrightRow();

	.pageContent {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		<xf:if is="property('uix_pageStyle') == 'covered' || property('uix_forceCoverCopyright')">
			.m-pageWidth();
			.m-pageInset();
			<xf:if is="(property('uix_pageStyle') != 'wrapped')">
				padding:0;
			</xf:if>
		</xf:if>
	}

	.p-footer-debug-list li a {
		color: inherit;

		&:hover {color: inherit; text-decoration: underline;}
	}
}

/* commented out in beta 1 (Ian)
.p-footer-row
{
	.m-clearFix();

	margin-bottom: -@xf-paddingLarge;
}

.p-footer-row-main
{
	float: left;
	margin-bottom: @xf-paddingLarge;
}

.p-footer-row-opposite
{
	float: right;
	margin-bottom: @xf-paddingLarge;
}
*/

.p-footer-linkList
{
	.m-listPlain();
	// .m-clearFix();
	display: inline-flex;
	flex-wrap: wrap;
    align-items: center;
	> li
	{
		/* commented out in beta 1 (Ian)
		float: left;
		margin-right: .5em;
		margin: @xf-paddingMedium;
		*/

		&:last-child
		{
			margin-right: 0;
		}

		a
		{
			padding: 6px;
			border-radius: @xf-borderRadiusSmall;
			display: inline-block;

			&:hover
			{
				.xf-uix_footerLinkHover();
				text-decoration: none;
				// background-color: fade(@xf-publicFooterLink--color, 10%);
			}
		}
	}

	&.p-footer-choosers {
		margin: -6px;
		a {
			margin: 6px;
			.xf-uix_footerChooser();


			&:hover {.xf-uix_footerChooserHover();}

			// i {display: none;}
		}
	}
}

.p-footer-rssLink
{
	> span
	{
		position: relative;
		top: -1px;

		display: inline-block;
		width: 1.44em;
		height: 1.44em;
		line-height: 1.44em;
		text-align: center;
		font-size: .8em;
		background-color: #FFA500;
		border-radius: 2px;
	}

	.fa-rss
	{
		color: white;
	}
}

/*
.p-footer-copyright
{
	margin-top: @xf-elementSpacer;
	text-align: center;
	font-size: @xf-fontSizeSmallest;
}

.p-footer-debug
{
	margin-top: @xf-paddingLarge;
	text-align: right;
	font-size: @xf-fontSizeSmallest;
}
*/

@media (max-width: @xf-responsiveMedium)
{
	.p-footer-row-main,
	.p-footer-row-opposite
	{
		float: none;
	}

	.p-footer-copyright
	{
		text-align: left;
		padding: 0 4px; // aligns with other links
	}
}]]></template>
    <template title="app_header.less" type="public" addon_id="XF" version_id="2020034" version_string="2.2.0 Beta 4"><![CDATA[// MAIN HEADER ROW

.p-header
{
	.xf-publicHeader();
	<xf:if is="property('uix_pageStyle') == 'fixed'">
		.m-pageWidth();
	</xf:if>

	.p-header-logo img {max-width: @xf-uix_logoWidth;}

	a
	{
		color: inherit;
	}
	
	.p-header-logo img {width: 100%;}
}

.p-header-inner
{
	.m-pageInset();
	<xf:if is="property('uix_pageStyle') != 'fixed'">
		.m-pageWidth();
	</xf:if>
	position: relative;
}

.p-header-content
{
	// padding: @xf-paddingMedium 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	max-width: 100%;
	
	<xf:if is="property('uix_viewportCenterLogo') == '100%'">
		justify-content: center;
		flex-direction: column;
		
		.p-nav-opposite {margin-top: @xf-paddingLarge; margin-left: 0;}
		.p-header-logo {margin-right: 0;}
	</xf:if>
	
	@media (max-width: @xf-uix_viewportCenterLogo) {
		justify-content: center;
		flex-direction: column;
		
		.p-nav-opposite {margin-top: @xf-paddingLarge; margin-left: 0;}
		.p-header-logo {margin-right: 0;}
	}
}

.p-header-logo
{
	vertical-align: middle;
	// margin-right: auto;

	a
	{
		color: inherit;
		text-decoration: none;
	}

	&.p-header-logo--text
	{
		font-size: @xf-fontSizeLargest;
	}

	&.p-header-logo--image
	{
		img
		{

			&[src$="/xenforo-logo.svg"]
			{
				height: 36px;
			}
			// vertical-align: bottom;
			// max-width: 100%;
			// max-height: 200px;
		}
	}

	.uix_logoIcon {.xf-uix_logoIconStyle();}
}


@media (max-width: @xf-responsiveNarrow)
{
	.p-header-logo
	{
		// max-width: 100px;

		&.p-header-logo--text
		{
			font-size: @xf-fontSizeLarge;
			font-weight: @xf-fontWeightNormal;
			.m-overflowEllipsis();
		}
	}

	.p-navgroup-link
	{
		.p-navGroup--member &
		{
			margin-left: 5px;

			&:first-of-type
			{
				margin-left: 0;
			}
		}

	}
}
]]></template>
    <template title="app_inlinemod.less" type="public" addon_id="XF" version_id="2020031" version_string="2.2.0 Beta 1"><![CDATA[// #################################### INLINE MOD BUTTON ################

.inlineModButton
{
	display: inline-block;
	position: relative;

	i:before
	{
		display: inline-block;
		.m-faBase();
		.m-faContent(@fa-var-check-square, 1em); //, .88em
		vertical-align: -1px;
		font-size: 1.2em;
		margin: -.2em 0;
		line-height: 1;
	}

	&.inlineModButton--noIcon i
	{
		display: none;
	}

	&.is-mod-active
	{
		color: @xf-textColorAttention;

		.inlineModButton-count
		{
			display: inline;
		}
	}

	&:not(.inlineModButton--withLabel)
	{
		.inlineModButton-label
		{
			.m-visuallyHidden();
		}
	}
}

.inlineModButton-count
{
	display: none;
	position: absolute;
	top: -3px;
	left: -6px;
	.xf-contentHighlightBase();
	border: @xf-borderSize solid @xf-borderColorAccentContent;
	border-radius: @xf-borderRadiusSmall;
	padding: 1px 2px;
	font-size: 9px;
	line-height: 1;

	.inlineModButton--noIcon &
	{
		position: static;
		font-size: 80%;
		padding-top: 0;
		padding-bottom: 0;
	}
}

// #################################### INLINE MOD BAR ################

.inlineModBar
{
	.xf-inlineModBar();
	.m-transitionFadeDown();
	.m-clearFix();

	.input,
	.button
	{
		padding-top: @xf-paddingSmall;
		padding-bottom: @xf-paddingSmall;
		height: auto;
		line-height: inherit;
	}

	&.is-active:first-of-type
	{
		.m-dropShadow(0, 0, 8px, 3px, 0.3);
	}
}

.inlineModBar-inner
{
	.m-pageWidth();
	.m-pageInset();

	display: flex;
	align-items: center;
}

.inlineModBar-controls
{
	.m-listPlain();
	margin-right: auto;

	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: 35px;
	max-width: 100%;

	> li
	{
		float: left;
		display: inline-block;
		margin-right: 1em;

		&:last-child
		{
			margin-right: 0;
		}
	}
}

.inlineModBar-close
{
	float: right;
	margin-left: 1em;
	order: 2;
}

.inlineModBar-title
{
	font-weight: @xf-fontWeightHeavy;
}

.button.inlineModBar-goButton
{
	font-size: @xf-fontSizeNormal;
	line-height: 1.5; // matches select
	min-width: 0;
}

.inlineModBarCover
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	cursor: pointer;
}]]></template>
    <template title="app_nav.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[// navEl / Navigation Elements for header navigation

.p-navEl
{
	.m-clearFix();
	display: inline-flex;
	align-items: center;
}

.p-navEl-linkHolder
{
	float: left;
}

.p-navEl-link
{
	float: left;
	// .m-transition(opacity, background; @_nav-elTransitionSpeed);
	text-decoration: none !important;
	max-height: 100%;

	&.p-navEl-link--menuTrigger
	{
		cursor: pointer;

		&:after
		{
			.m-menuGadget(); // .58em
			opacity: .5;
			.m-transition(opacity; @_nav-elTransitionSpeed);
		}

		&:hover:after
		{
			opacity: 1;
		}
	}
}

.p-navEl-splitTrigger
{
	float: left;
	opacity: .5;
	cursor: pointer;
	text-decoration: none;
	.m-transition(all; @_nav-elTransitionSpeed);

	&:after
	{
		.m-menuGadget(); // .58em
		line-height: 1;
	}

	&:hover
	{
		opacity: 1;
		text-decoration: none;
	}
}

// HEADER NAV ROW

.p-nav
{
	.xf-publicNav();
	<xf:if is="property('uix_pageStyle') == 'fixed'">
		.m-pageWidth();
	</xf:if>

	transition: ease-in .15s all;

	a:not(.button)
	{
		color: inherit;
	}

	.p-navSticky.is-sticky &
	{
		.p-nav-list .p-navEl.is-selected,
		.p-account
		{
			border-radius: 0;
		}
	}
}

a.uix_logo {
	text-decoration: none;
}

.p-nav-inner
{

	<xf:if is="property('uix_pageStyle') == 'covered'">
		.m-pageWidth();
                .m-pageInset(0px);
	</xf:if>
	position: relative;
	<xf:if is="property('uix_navigationBarHeight')">
		height: @xf-uix_navigationBarHeight;
	</xf:if>

	.p-header-logo {
		display: inline-flex;
		align-items: center;
		margin-right: @xf-paddingLarge;
		
		.uix_logo {
			display: flex;
		}

		&.p-header-logo--image img {
			max-height: calc(@xf-uix_navigationBarHeight - (@xf-uix_navLogoVertSpacing * 2));

			.is-sticky & {
				max-height: calc(@xf-uix_stickyNavHeight - (@xf-uix_navLogoVertSpacing * 2));
			}
		}
	}

	.m-clearFix();
	display: flex;
	align-items: center;
}

.p-nav .uix_activeNavTitle {
	.xf-uix_activeNavTitleStyle();
	display: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	@media (max-width: @xf-publicNavCollapseWidth) and (min-width: @xf-responsiveNarrow) {
		display: inline-block;
	}
}

.p-nav .p-nav-menuTrigger
{
	display: none;
	vertical-align: middle;
	align-self: center;
	// margin-left: max(0px, @xf-pageEdgeSpacer - 6px);
	margin-right: 5px;
	padding: 0 8px;

	&:hover
	{
		text-decoration: none;
		cursor: pointer;
	}

	i:after
	{
		.m-faBase();
		font-size: @xf-fontSizeLargest;
		.m-faContent(@fa-var-bars);
		vertical-align: bottom;
		font-size: @xf-uix_iconSizeLarge;
	}

	.p-nav-menuText
	{
		display: none;
	}
}
<xf:if is="property('uix_logoSmall')">
.uix_logoSmall
{
	<xf:if is="property('uix_brandmarkImage__breakpoint') != '100%'">
		display: none;
	</xf:if>
	// max-width: 100px;
	align-self: center;

	img
	{
		display: block;
		max-height: @header-navHeight;

		&:not([src$=".svg"])
		{
			width: auto;
		}
	}
}

<xf:if is="property('uix_brandmarkImage__breakpoint') == '100%'">
	.p-header-logo.p-header-logo--image .uix_logo {display: none;}
</xf:if>

@media (max-width: {{ property('uix_brandmarkImage__breakpoint') - 1 }}px) {
	.uix_logoSmall {display: inline-block;}
	.p-header-logo.p-header-logo--image .uix_logo {display: none;}
}
</xf:if>

.uix_logo--text {
	display: flex;
	align-items: center;
	white-space: nowrap;
	.xf-uix_logoText__style();
	
	&:hover {
		text-decoration: none;
	}
}

<xf:if is="property('uix_logoTextBreakpoint')">
@media (max-width: @xf-uix_logoTextBreakpoint) {
	.uix_logo--text {font-size: @xf-uix_responsiveLogoFontSize;}
}
</xf:if>

.p-nav-scroller
{
	margin-right: auto;
	max-width: 100%;

	.hScroller-scroll:not(.is-calculated)
	{
		// IE11 seems to want to flash a vertical scrollbar without this here
		overflow: hidden;
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-publicNav--background-color, transparent),
			xf-default(@xf-publicNav--color, ~""),
			xf-intensify(@xf-publicNav--color, 10%)
		);
	}
}

.p-nav-list
{
	.m-listPlain();
	.m-clearFix();
	display: flex;
	align-items: center;

	font-size: 0;

	// this applies padding that will be contained within the scroller.
	// it needs font-size 0 to not create extra space though
	/*
	&:before,
	&:after
	{
		display: inline-block;
		width: @xf-pageEdgeSpacer;
		content: '';
	}
	*/

	> li
	{
		display: inline-block;
		vertical-align: bottom;
		font-size: @xf-fontSizeNormal;

		&:first-child
		{
			margin-left: 0;
		}
	}

	.badgeContainer:after {margin-left: 4px;}

	.m-navElHPadding(@xf-publicNavPaddingH);

	.p-navEl
	{
		.xf-publicNavTab();
		.m-transition(all; @_nav-elTransitionSpeed);

		&.is-selected
		{
			.xf-publicNavSelected();

			.p-navEl-link
			{

				<xf:if is="{{ property('uix_viewportWidthRemoveSubNav') }} != '100%'">
				@media (min-width: {{ property('uix_viewportWidthRemoveSubNav') + 1 }}px ) {
					padding-right: @xf-publicNavPaddingH; // since the split trigger is hidden
				}
				</xf:if>

				&:hover
				{
					background: none;
					text-decoration: none;
					color: inherit;
				}
			}

			.p-navEl-splitTrigger
			{
				<xf:if is="{{ property('uix_viewportWidthRemoveSubNav') }} != '100%'">
					@media (min-width: {{ property('uix_viewportWidthRemoveSubNav') + 1 }}px ) {
						display: none;
					}
				</xf:if>
			}
		}

		&:not(.is-selected):not(.is-menuOpen)
		{
			&:hover,
			// .p-navEl-link:hover,
			// .p-navEl-splitTrigger:hover
			{
				.xf-publicNavTabHover();
			}

			.p-navEl-link:hover,
			.p-navEl-splitTrigger:hover {
				text-decoration: none;
				color: inherit;
			}
		}

		&.is-menuOpen
		{
			.xf-publicNavTabMenuOpen();
			border-top-left-radius: xf-default(@xf-publicNavSelected--border-top-left-radius, 0);
			border-top-right-radius: xf-default(@xf-publicNavSelected--border-top-right-radius, 0);
			// .m-dropShadow(0, 5px, 10px, 0, .35);
			a
			{
				// text-decoration: none;
				// opacity: 1;
			}
		}

	}

	.p-navEl-link,
	.p-navEl-splitTrigger
	{
		padding-top: @xf-publicNavPaddingV;
		padding-bottom: @xf-publicNavPaddingV;
		display: inline-flex;
		align-items: center;

		&:hover {background: none !important;}
	}
}

.p-navSticky--primary.is-sticky
{
	.p-nav-list
	{
		.p-navEl-link.p-navEl-link--splitMenu
		{
			padding-right: ((@xf-publicNavPaddingH) / 4);
		}

		.p-navEl.is-selected .p-navEl-splitTrigger
		{
			display: inline;
			position: relative;

			&:before
			{
				content: '';
				position: absolute;
				left: 0;
				top: 5px;
				bottom: 5px;
				width: 0;
				border-left: @xf-borderSize solid fade(xf-default(@xf-publicNavSelected--color, transparent), 35%);
			}
		}
	}
}

@media (max-width: @xf-publicNavCollapseWidth)
{
	.has-js
	{
		.p-nav-inner
		{
			// min-height: 45px;
		}
		.p-nav .p-nav-menuTrigger
		{
			display: inline-flex;
		}
		.p-sectionLinks .p-sectionLinks--group {
			display: none;
		}
		.p-nav-scroller
		{
			display: none;
		}
	}
}

// ACCOUNT/VISITOR/SEARCH SECTION

.p-nav-opposite
{
	margin-left: auto;
	// margin-right: @xf-pageEdgeSpacer;
	text-align: right;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
}

.p-navgroup
{
	float: left;
	.m-clearFix();
	// background: @xf-publicHeaderAdjustColor;
	border-top-left-radius: @xf-borderRadiusMedium;
	border-top-right-radius: @xf-borderRadiusMedium;
	display: inline-flex;

	&.p-discovery
	{
		// margin-left: .5em;

		&.p-discovery--noSearch
		{
			margin-left: 0;
		}
		// i {line-height: 1;}

	}

	.p-navgroup-linkText {padding-left: @xf-paddingSmall;}
}

<xf:if is="property('uix_removeVisitorTabsText')">
@media (max-width: @xf-uix_viewportRemoveVisitorTabsText) {
	.p-navgroup.p-navgroup--member .p-navgroup-linkText, .p-discovery .p-navgroup-linkText {display: none;}
	
	.p-navgroup.p-navgroup--member .p-navgroup-link i,
	.p-navgroup.p-discovery .p-navgroup-link i {
		&:after, &:before {
			font-size: @xf-uix_iconSizeLarge;
		}
	}
}
</xf:if>

<xf:if is="property('uix_removeRegisterText')">
@media (max-width: @xf-uix_viewportRemoveRegisterText) {
	.p-navgroup--guest .p-navgroup-linkText {display: none;}
	
	.p-navgroup.p-navgroup--guest .p-navgroup-link i {
		&:after, &:before {
			font-size: @xf-uix_iconSizeLarge;
		}
	}	
}
</xf:if>

<xf:if is="property('uix_condenseVisitorTabs')">
@media (max-width: @xf-uix_viewportCondenseVisitorTabs) {
	.p-account.p-navgroup--member {
		.p-navgroup-link--conversations {display: none;}
		.p-navgroup-link--alerts {display: none;}
	}
}
</xf:if>

.p-navgroup-link
{
	float: left;
	padding: (@xf-publicNavPaddingV / 2);
	// border-left: 1px solid @xf-publicHeaderAdjustColor;
	display: inline-flex;
	align-items: center;

	<xf:if is="property('uix_removeVisitorTabsText')">
	@media (max-width: @xf-uix_viewportRemoveVisitorTabsText) {
		padding: @xf-paddingSmall calc(@xf-paddingSmall * 2);
	}
	</xf:if>

	&:first-of-type
	{
		border-top-left-radius: @xf-borderRadiusMedium;
		border-left: none;
	}

	&:last-of-type
	{
		border-top-right-radius: @xf-borderRadiusMedium;
	}

	&:hover
	{
		text-decoration: none;
		// background: xf-intensify(@xf-publicHeaderAdjustColor, 5%);
	}

	&.p-navgroup-link--user
	{
		.m-overflowEllipsis();
		max-width: 150px;

		.avatar
		{
			// .m-avatarSize((@xf-fontSizeNormal) * (@xf-lineHeightDefault));
			.m-avatarSize(@xf-uix_iconSizeLarge);
			margin: 1px 0;

			@media (min-width: @xf-uix_removeVisitorTabsText) {
				.m-avatarSize(@xf-uix_iconSize);
				font-size: 11px;
			}
		}
	}

	&.badgeContainer
	{
		// opacity: .6;
		position: relative;

		&:after
		{
			position: absolute;
			// left: (@_navAccount-hPadding - 6px);
			// top: (@xf-publicNavPaddingV - 2px);
			right: 2px;
			top: 3px;
			padding: 1px 3px;
			margin: 0;
			font-size: 10px;
			line-height: 11px;
		}

		&:hover,
		&.badgeContainer--highlighted
		{
			// opacity: 1;
		}
	}

	&.is-menuOpen
	{
		.xf-publicNavTabMenuOpen();
		// .m-dropShadow(0, 5px, 10px, 0, .35);
		opacity: 1;
	}

	/*
	&.p-navgroup-link--iconic
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1.2em;
			text-align: center;
		}
	}
	*/

	&.p-navgroup-link--conversations
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1em;
			.m-faContent(@fa-var-envelope, 1em);
		}
	}

	&.p-navgroup-link--alerts
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1em;
			.m-faContent(@fa-var-bell, 1em);
		}
	}

	&.p-navgroup-link--bookmarks i:after
	{
		.m-faContent(@fa-var-bookmark); //, .75em
	}

	&.p-navgroup-link--whatsnew i:after
	{
		.m-faBase();
		.m-faContent(@fa-var-bolt, .5em);
		width: auto;
	}

	&.p-navgroup-link--search i:after
	{
		.m-faBase();
		.m-faContent(@fa-var-search);
	}

	&.p-navgroup-link--logIn
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1em;
			.m-faContent(@fa-var-key);
		}
	}

	&.p-navgroup-link--register
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1em;
			.m-faContent(@fa-var-clipboard);
		}
	}
}

.p-navgroup-link--whatsnew
{
	display: none;

	.p-navgroup-link:first-of-type& + .p-navgroup-link
	{
		border-top-left-radius: @xf-borderRadiusMedium;
		border-left: none;
	}
}

<xf:if is="property('uix_visitorTabsMobile') != 'initial'">
	@media (max-width: @xf-responsiveNarrow) {
		.p-navgroup.p-account {
			.p-navgroup-link--user {display: none;}
			.p-navgroup-link--conversations {display: none;}
			.p-navgroup-link--alerts {display: none;}
		}
		<xf:if is="property('uix_visitorTabsMobile') == 'tabbar'">
			.p-navgroup.p-discovery {
				.p-navgroup-link--whatsnew {display: none;}
			}
		</xf:if>
	}
</xf:if>

@media (max-width: @xf-responsiveWide)
{
	/*
	.p-navgroup-link
	{
		&.p-navgroup-link--iconic .p-navgroup-linkText,
		&.p-navgroup-link--textual i
		{
			display: none;
		}
		&.p-navgroup-link--textual
		{
			.m-overflowEllipsis();
			max-width: 110px;
		}

		&.p-navgroup-link--iconic i:after
		{
			text-align: center;
		}
	}
	*/
}


@media (max-width: @xf-publicNavCollapseWidth)
{
	.p-navgroup-link--whatsnew
	{
		display: inline-flex;

		.p-navgroup-link:first-of-type& + .p-navgroup-link
		{
			// border-top-left-radius: 0;
			// border-left: 1px solid @xf-publicHeaderAdjustColor;
		}
	}

	.has-js
	{
		.p-nav-opposite
		{
			align-self: center;
			// margin-right: max(0px, @xf-pageEdgeSpacer - 6px);

			.p-navgroup
			{
				background: none;
			}

			.p-navgroup-link
			{
				border: none;
				border-radius: @xf-borderRadiusMedium;

				&.is-menuOpen
				{
					.m-borderBottomRadius(0);
				}

				&.badgeContainer
				{
					opacity: 1;
				}
			}
		}
	}
}

/*
@media (max-width: 359px)
{
	.p-navgroup-link&.p-navgroup-link--user
	{
		display: none;
	}
}

@media (max-width: 374px)
{
	.p-navgroup-link.p-navgroup-link--register
	{
		display: none;
	}
}
*/

.p-navgroup .p-navgroup-link i {
	&:after, &:before {
		@media (min-width: @xf-uix_viewportRemoveRegisterText) {
			font-size: @xf-uix_iconSize;
			// padding-right: @xf-paddingMedium;
		}
	}
}

<xf:if is="property('uix_rightAlignNavigation')">
	@media (min-width: @xf-publicNavCollapseWidth) {
		.p-nav-inner .p-nav-opposite,
		.p-sectionLinks .p-nav-opposite {margin-left: 0;}

		.p-nav-inner .p-nav-scroller,
		.p-sectionLinks .p-sectionLinks-inner {margin-right: 0; margin-left: auto;}
	}
</xf:if>]]></template>
    <template title="app_prepend.less" type="public" addon_id="XF" version_id="2020051" version_string="2.2.0 Release Candidate 1"><![CDATA[.m-pageWidth(@min-width: @xf-pageEdgeSpacer)
{
	/*
	max-width: @xf-pageWidthMax;
	padding: 0 @xf-pageEdgeSpacer;
	margin: 0 auto;
	*/
}

.m-pageInset(@defaultPadding: @xf-pageEdgeSpacer)
{
	/*
	padding-left: @defaultPadding;
	padding-right: @defaultPadding;

	// iPhone X/Xr/Xs support
	@supports(padding: max(0px))
	{
		&
		{
			padding-left: ~"max(@{defaultPadding}, env(safe-area-inset-left))";
			padding-right: ~"max(@{defaultPadding}, env(safe-area-inset-right))";
		}
	}
	*/
}

.m-navElHPadding(@padding)
{
	.p-navEl-link
	{
		padding: 0 @padding;

		&.p-navEl-link--splitMenu
		{
			padding-right: ((@padding) / 8);
		}

		&.p-navEl-link--menuTrigger
		{
			padding-right: ((@padding) / 3); // equal to splitTrigger padding-right

			&:after
			{
				padding-left: ((@padding) / 4 + (@padding) / 3); // equal to splitMenu padding-right + splitTrigger padding-left
			}
		}
	}

	.p-navEl-splitTrigger
	{
		padding: 0 ((@padding) / 3);
	}
}]]></template>
    <template title="app_sectionlinks.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[// SUB SECTION LINKS

.p-sectionLinks
{
	.xf-publicSubNav();
	<xf:if is="property('uix_pageStyle') == 'fixed'">
		.m-pageWidth();
	</xf:if>
	
	transition: ease-in .15s all;
	
	.p-sectionLinks--group {
		display: flex; 
		align-items: center;
		
		<xf:if is="property('uix_rightAlignNavigation')">
			&:first-child {
				margin-left: auto;
			}
		</xf:if>
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-publicSubNav--background-color, transparent),
			xf-default(@xf-publicSubNav--color, ~""),
			xf-default(@xf-publicSubNavElHover--color, ~"")
		);
	}
	
	.p-nav-opposite a:not(.button)
	{
		color: inherit;

		&:hover {
			.xf-publicSubNavElHover();
		}
	}

	&.p-sectionLinks--empty
	{
		height: 10px;
		display: none;
	}

	.pageContent {
		display: flex;
		align-items: center;
		position: relative;
		justify-content: space-between;
		<xf:if is="property('publicNavSticky')">
			min-height: @xf-uix_stickySectionLinkHeight;
			height: @xf-uix_stickySectionLinkHeight;
		</xf:if>
		<xf:if is="property('uix_pageStyle') == 'covered'">
			.m-pageWidth();
		</xf:if>
	}

	.p-navgroup .p-navgroup-link i:after,
	.p-navSearch-trigger i:after {font-size: @xf-uix_iconFont;}
	.p-navgroup-link.p-navgroup-link--user .avatar {
		font-size: @xf-uix_iconSizeLarge;
		.m-avatarSize(@xf-uix_iconSize);
	}
	.p-navSearch-trigger,
	.p-navgroup .p-navgroup-link {padding: @xf-paddingSmall;}
}

.p-sectionLinks-inner
{
	// .m-clearFix();
	// .m-pageWidth();

	@defaultPadding:  max(0px, @xf-pageEdgeSpacer - @xf-publicSubNavPaddingH);
	.m-pageInset(@defaultPadding);
	margin-right: auto;
}


.p-sectionLinks-list
{
	.m-listPlain();

	font-size: 0;

	a
	{
		color: inherit;
	}

	> li
	{
		display: inline-block;
	}

	.m-navElHPadding(@xf-publicSubNavPaddingH);

	.p-navEl
	{
		font-size: @xf-publicSubNav--font-size;
		// padding-top: @xf-paddingMedium;
		// padding-bottom: @xf-paddingMedium;
		height: @xf-uix_stickyStaffBarHeight;

		&:hover
		{
			.xf-publicSubNavElHover();

			a
			{
				text-decoration: @xf-publicSubNavElHover--text-decoration;
			}
		}
		<xf:comment>
		&.is-menuOpen
		{
			.xf-publicSubNavElMenuOpen();
			.m-borderBottomRadius(0);
			.m-dropShadow(0, 5px, 10px, 0, .35);
		}
		</xf:comment>
	}

	.p-navEl-link,
	.p-navEl-splitTrigger
	{
		padding-top: @xf-publicSubNavPaddingV;
		padding-bottom: @xf-publicSubNavPaddingV;
	}
}

<xf:if is="(property('uix_searchPosition') != 'tablinks') &&
	(property('uix_loginTriggerPosition ') != 'tablinks') &&
	(property('uix_userTabsPosition ') != 'tablinks')">

	@media (max-width: @xf-publicNavCollapseWidth) {
		.has-js .p-sectionLinks-inner
		{
			display: none;
		}
	}

</xf:if>]]></template>
    <template title="app_staffbar.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ######################################### STAFF BAR #################################

.p-staffBar
{
	.xf-publicStaffBar();
		<xf:if is="property('uix_pageStyle') == 'fixed'">
			.m-pageWidth();
			.m-pageInset();
		</xf:if>

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-publicStaffBar--background-color, transparent),
			xf-default(@xf-publicStaffBar--color, ~""),
			xf-intensify(@xf-publicStaffBar--color, 10%)
		);
	}
	
	<xf:if is="{{ property('uix_stickyStaffBar')}}">
	@supports (position: sticky) or (position: -webkit-sticky)
	{
		&
		{
			position: -webkit-sticky;
			position: sticky;
			top: 0;

			&.is-sticky-broken,
			&.is-sticky-disabled
			{
				position: static;
				top: auto;
			}
		}
	}
	</xf:if>

	.pageContent {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		position: relative;
		height: 100%;
		<xf:if is="property('uix_pageStyle') == 'covered'">
			.m-pageWidth();
			.m-pageInset();
		</xf:if>
		
		min-height: @xf-uix_stickyStaffBarHeight;

		.p-nav-opposite a:not(.button)
		{
			color: inherit;

			&:hover {.xf-uix_staffBarTabHover();}
		}
		
		a {
			.xf-uix_staffBarTab();
			
			&:hover {.xf-uix_staffBarTabHover();}
		}

	}


}

.p-staffBar-inner
{
	.m-clearFix();
	// padding-top: @xf-paddingMedium;
	//padding-bottom: @xf-paddingMedium;
}

.p-staffBar-link
{
	display: inline-block;
	vertical-align: top;
	color: inherit;
	padding: 4px @xf-paddingMedium;
	margin-right: .35em;
	.xf-uix_staffBarTab();

	&:last-child
	{
		margin-right: 0;
	}

	&:hover
	{
		text-decoration: none;
		// background: xf-diminish(@xf-publicStaffBar--background-color, 6%);
		border-radius: @xf-borderRadiusSmall;
		.xf-uix_staffBarTabHover();
	}
}]]></template>
    <template title="app_stickynav.less" type="public" addon_id="XF" version_id="2020070" version_string="2.2.0"><![CDATA[// STICKY NAV SETUP

<xf:if is="property('publicNavSticky')">

.p-pageWrapper .p-navSticky
{
	z-index: @zIndex-1;

	&.is-sticky
	{
		z-index: @zIndex-4;
		// .m-dropShadow(0, 2px, 5px, 0px, .26);
		<xf:if is="!{{ property('uix_removeHeaderWrapper')}}">
		position: fixed !important;
		top: 0;
		bottom: auto !important;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		</xf:if>

		<xf:if is="property('uix_pageStyle') == 'wrapped' && !property('uix_removeHeaderWrapper')">
		@uix_pageSpacerTotal: @xf-pageEdgeSpacer * 2;
		@uix_adjustedWrappedPageWidth: @xf-pageWidthMax - @uix_pageSpacerTotal;

		width: 100vw !important;
		@media (min-width: @xf-responsiveEdgeSpacerRemoval) {
			width: ~'calc(100vw - @{uix_pageSpacerTotal}) !important';
		}

		@media (min-width: @uix_adjustedWrappedPageWidth) {
			width: @uix_adjustedWrappedPageWidth !important;	
		}
		</xf:if>

		> * {box-shadow: @xf-uix_elevation1; border-radius: 0 !important;}

		.p-nav {.xf-uix_stickyNavigationStyle();}

		.p-sectionLinks {.xf-uix_sectionLinksStickyStyle();}

		<xf:if is="property('uix_pageStyle') != 'covered'">
		// .m-pageWidth();
		padding: 0 !important;

		</xf:if>

		<xf:if is="property('uix_pageStyle') == 'fluid'">
		> * {
			max-width: 100%;
		}
		</xf:if>

		.p-nav-inner {
			height: @xf-uix_stickyNavHeight;

			.p-navEl,
			.p-navEl-link {max-height: @xf-uix_stickyNavHeight;}
		}

		<xf:if is="property('publicNavSticky')">
		.p-sectionLinks {
			border-bottom: 0;

			.pageContent {
				height: @xf-uix_stickySectionLinkHeight;
			}
		}
		</xf:if>
	}

	<xf:if is="{{ property('uix_removeHeaderWrapper')}}">
	@supports (position: sticky) or (position: -webkit-sticky)
	{
		&
		{
			position: -webkit-sticky;
			position: sticky;
			top: 0;

			&.is-sticky-broken,
			&.is-sticky-disabled
			{
				position: static;
				top: auto;
			}
		}
	}
	</xf:if>
}

</xf:if>

<xf:if is="property('uix_mainTabsSticky')">
.uix_headerContainer .uix_mainTabBar.is-sticky {
	position: fixed !important;
	bottom: auto !important;
	left: 0;
	right: 0;
	@media (max-width: @xf-uix_search_maxResponsiveWidth ) {z-index: 500;}
	margin: 0 auto;
	border-radius: 0 !important;

	.tabs-tab {height: @xf-uix_mainTabsHeight;}

	box-shadow: @xf-uix_elevation1;

	<xf:if is="property('uix_pageStyle') == 'wrapped' && !property('uix_removeHeaderWrapper')">
	width: @xf-pageWidthMax - (@xf-pageEdgeSpacer * 2) !important;
	</xf:if>
}

.uix_mainTabBar.is-sticky {
	box-shadow: @xf-uix_elevation1;
	z-index: 300;
}

</xf:if>

<xf:if is="property('uix_stickyStaffBar')">
.p-staffBar.is-sticky {
	<xf:if is="!{{ property('uix_removeHeaderWrapper')}}">
	position: fixed !important;
	bottom: auto !important;
	top: 0 !important;
	left: 0;
	right: 0;
	margin: 0 auto;
	</xf:if>
	z-index: 500;
	border-radius: 0 !important;
	.xf-uix_stickyStaffbarStyle();
	height: @xf-uix_stickyStaffBarHeight;

	<xf:if is="property('publicNavSticky') == 'none'">
	box-shadow: @xf-uix_elevation1;
	</xf:if>

	<xf:if is="property('uix_pageStyle') == 'wrapped'&& !property('uix_removeHeaderWrapper')">
	width: @xf-pageWidthMax - (@xf-pageEdgeSpacer * 2) !important;
	</xf:if>
}

<xf:if is="{{ property('uix_removeHeaderWrapper')}}">
.p-staffBar {
	@supports (position: sticky) or (position: -webkit-sticky)
	{
		&
		{
			position: -webkit-sticky;
			position: sticky;
			top: 0;

			&.is-sticky-broken,
			&.is-sticky-disabled
			{
				position: static;
				top: auto;
			}
		}
	}
}
</xf:if>

</xf:if>]]></template>
    <template title="app_title.less" type="public" addon_id="XF" version_id="2020051" version_string="2.2.0 Release Candidate 1"><![CDATA[.p-body-header {
	<xf:if is="property('uix_pageStyle') == 'fixed'">
	.m-pageWidth();
	</xf:if>

	.pageContent {
		<xf:if is="property('uix_pageStyle') != 'fixed'">
		.m-pageWidth();
		</xf:if>
	}
	
	.p-body-inner & {
		max-width: 100%;
		width: 100%;
		padding-left: 0;
		padding-right: 0;

		.pageContent {
			max-width: 100%;
			width: 100%;		
			padding-left: 0;
			padding-right: 0;
		}
	}
}

.p-pageWrapper > .p-body-header .pageContent {
	min-height: 36px;
}

.p-pageWrapper .p-body-header {
	.xf-uix_titlebar();
	
	.pageContent {
		display: flex;
		align-items: center;
		
		.p-title-pageAction {margin-top: 0;}
		
		@media(max-width: @xf-responsiveMedium) {
			flex-wrap: wrap;
		}
	}
	
	.contentRow {flex-grow: 1;}
	.uix_headerInner {
		margin: 5px;
		margin-left: 0;
		flex-grow: 1;
	}
	
	.uix_headerInner--opposite {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
		margin-left: auto;
		margin-right: 0;
	}
	
	.uix_headerInner + .uix_headerInner--opposite {
		margin: 5px auto;
	}
	
	.p-title
	{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		max-width: 100%;

		&.p-title--noH1
		{
			flex-direction: row-reverse;
		}

		.p-title-pageAction {
			margin: 5px 0;
		}
	}

	.p-title-value
	{
		padding: 0;
		margin: 0 0 3px 0;
		font-size: @xf-fontSizeLargest;
		font-weight: @xf-fontWeightNormal;
		margin-right: auto;
		min-width: 0;
		.xf-uix_pageTitle();

		.has-no-flexbox &
		{
			float: left;
		}
	}

	.p-title-pageAction
	{
		margin-left: @xf-paddingLarge;
		
		@media(max-width: @xf-responsiveNarrow) {
			margin-left: 0;
			margin-top: @xf-paddingLarge;
		}
		
		.has-no-flexbox &
		{
			float: right;
		}
	}

	.p-description
	{
		margin: 0;
		padding: 0;
		font-size: inherit;
		color: inherit;
	}
}

.p-title-pageAction .button + .button {margin-left: @xf-paddingMedium;}

@media (max-width: @xf-responsiveNarrow)
{
	.p-title-value
	{
		font-size: @xf-fontSizeLarger;
	}
}]]></template>
    <template title="app_user_banners.less" type="public" addon_id="XF" version_id="2000470" version_string="2.0.4"><![CDATA[.m-userBannerVariation(@color; @bg; @border: false)
{
	color: @color;
	background: @bg;
	border-color: xf-intensify(@bg, 10%);
	border-radius: @xf-borderRadiusMedium;

	& when (iscolor(@border))
	{
		border-color: @border;
	}
}

.userBanner
{
	font-size: 75%;
	font-size: 11px;
	font-weight: @xf-fontWeightNormal;
	font-style: normal;
	padding: 1px @xf-paddingMedium;
	padding: 1px 3px;
	border: 1px solid transparent;
	border-radius: @xf-borderRadiusSmall;
	text-align: center;
	display: inline-block;

	strong
	{
		font-weight: inherit;
	}

	// variations
	&.userBanner--hidden
	{
		background: none;
		border: none;
		box-shadow: none;
	}

	&.userBanner--staff,
	&.userBanner--primary
	{
		.m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
		.m-userBannerVariation(#fff, @xf-uix_primaryColor, @xf-uix_primaryColor);
	}

	&.userBanner--accent
	{
		.m-userBannerVariation(#fff, @xf-uix_secondaryColor, @xf-uix_secondaryColor);
	}

	&.userBanner--red { .m-userBannerVariation(white, #d80000); }
	&.userBanner--green { .m-userBannerVariation(white, green); }
	&.userBanner--olive { .m-userBannerVariation(white, olive); }
	&.userBanner--lightGreen { .m-userBannerVariation(black, #ccf9c8, #bee8ba); }
	&.userBanner--blue { .m-userBannerVariation(white, #0008e3); }
	&.userBanner--royalBlue { .m-userBannerVariation(white, royalblue); }
	&.userBanner--skyBlue { .m-userBannerVariation(white, #7cc3e0); }
	&.userBanner--gray { .m-userBannerVariation(white, gray); }
	&.userBanner--silver { .m-userBannerVariation(black, silver); }
	&.userBanner--yellow { .m-userBannerVariation(black, #ffff91, #e6e687); }
	&.userBanner--orange { .m-userBannerVariation(black, #ffcb00); }
}]]></template>
    <template title="approval_queue.less" type="public" addon_id="XF" version_id="2010035" version_string="2.1.0 Beta 5"><![CDATA[.approvalQueue
{
	.block-container.approvalQueue-item--approve
	{
		.message,
		.message-cell--user,
		.message-cell--extra
		{
			background: @xf-inlineModHighlightColor;
		}

		.message .message-userArrow:after
		{
			border-right-color: @xf-inlineModHighlightColor;
		}
	}

	.block-container.approvalQueue-item--delete
	{
		.message-cell--user,
		.message-cell--main
		{
			opacity: 0.25;
		}
	}

	.block-container.approvalQueue-item--spam
	{
		border-color: red;

		.message-cell--user,
		.message-cell--main
		{
			opacity: 0.25;
		}
	}
}]]></template>
    <template title="bb_code.less" type="public" addon_id="XF" version_id="2020270" version_string="2.2.2"><![CDATA[@_bbCodeBlock-spacing: .5em;
@_bbCodeBlock-paddingV: @xf-paddingMedium;
@_bbCodeBlock-paddingH: @xf-paddingLarge;
@_bbCodeBlock-expandTriggerHeight: (@xf-bbCodeBlockExpandHeight) / 2;

.bbCodeBlock
{
	display: flow-root;
	margin: @_bbCodeBlock-spacing 0;
	.xf-bbCodeBlock();

	&.bbCodeBlock--quote
	{
		.bbCodeBlock-content
		{
			font-size: @xf-fontSizeSmall;
		}
	}
}

.bbCodeBlock-title
{
	padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH;
	.xf-bbCodeBlockTitle();
	.m-clearFix();
}

a.bbCodeBlock-sourceJump
{
	color: inherit;
	text-decoration: none;

	&:hover
	{
		text-decoration: underline;
	}

	&:after
	{
		.m-faBase();
		.m-faContent(@fa-var-arrow-circle-up); //, 1em
		display: inline-block;
		margin-left: 5px;
	}
}

.bbCodeBlock-content
{
	position: relative;
	padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH;
	.m-clearFix();
}

.bbCodeBlock--code .bbCodeBlock-content {background-color: @xf-contentBg; color: @xf-textColor;}

.bbCodeBlock-expandLink
{
	display: none;
	position: absolute;
	top: (@xf-bbCodeBlockExpandHeight) + (@_bbCodeBlock-paddingV * 2) - (@_bbCodeBlock-expandTriggerHeight);
	left: 0;
	right: 0;
	height: @_bbCodeBlock-expandTriggerHeight;
	cursor: pointer;
	z-index: @zIndex-1;

	.m-gradient(
		fade(@xf-bbCodeBlock--background-color, 0%),
		xf-default(@xf-bbCodeBlock--background-color, transparent),
		transparent,
		0%,
		60%
	);

	a
	{
		position: absolute;
		bottom: @_bbCodeBlock-paddingV;
		left: 0;
		right: 0;
		text-align: center;
		font-size: @xf-fontSizeSmall;
		color: @xf-textColorAttention;
		text-decoration: none;
	}
}

.bbCodeBlock--screenLimited
{
	.bbCodeBlock-content
	{
		max-height: 300px;
		max-height: 70vh;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
}

.bbCodeBlock--expandable
{
	overflow: hidden;
	.m-transition(-xf-height, height, padding, margin, border;);

	.bbCodeBlock-content
	{
		overflow: hidden;

		.bbCodeBlock:not(.bbCodeBlock--expandable) .bbCodeBlock-content
		{
			overflow: visible;
		}
		.bbCodeBlock.bbCodeBlock--screenLimited .bbCodeBlock-content
		{
			overflow: auto;
		}
	}

	.bbCodeBlock-expandContent
	{
		max-height: @xf-bbCodeBlockExpandHeight;
		overflow: hidden;
	}

	&.is-expandable
	{
		.bbCodeBlock-expandLink
		{
			display: block;
		}
	}

	&.is-expanded
	{
		.bbCodeBlock-expandContent
		{
			max-height: none;
		}

		.bbCodeBlock-expandLink
		{
			display: none;
		}
	}
}

.bbCodeBlock--unfurl
{
	.xf-contentHighlightBase();

	padding: @_bbCodeBlock-paddingV;
	width: 650px;
	max-width: 100%;
	border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;

	overflow: hidden;

	.contentRow-header
	{
		margin: 0;
		font-size: @xf-fontSizeNormal;
		font-weight: normal;
		.m-overflowEllipsis();
	}

	.contentRow-snippet
	{
		font-size: @xf-fontSizeSmaller;
		font-style: normal;
	}

	.contentRow-minor
	{
		font-size: @xf-fontSizeSmaller;
	}

	&.is-pending
	{
		opacity: 0.5;

		&.is-recrawl
		{
			opacity: 1;
		}
	}

	&.is-simple
	{
		.contentRow-figure
		{
			display: none;
		}
	}

	.bbCodeBlockUnfurl-icon
	{
		width: 12px;
		vertical-align: -2px;
	}
}

.bbCodeCode
{
	margin: 0;
	padding: 0;

	.has-hiddenscroll &
	{
		// solely to workaround this Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=914844
		// TODO: remove when fixed
		padding-bottom: @xf-paddingLarge;
	}

	font-family: @xf-fontFamilyCode;
	font-size: @xf-fontSizeSmall;
	line-height: @xf-lineHeightDefault;
	-ltr-rtl-text-align: left;

	direction: ltr;
	white-space: pre;
	position: relative;

	.m-tabSize();

	code
	{
		font-family: inherit;
	}

	.prism-token
	{
		&.prism-comment,
		&.prism-prolog,
		&.prism-doctype,
		&.prism-cdata
		{
			& when (@xf-styleType = light) { color: #a50; }
			& when (@xf-styleType = dark) { color: #8292a2; }
		}

		&.prism-constant
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #f92672; }
		}

		&.prism-tag
		{
			& when (@xf-styleType = light) { color: #170; }
			& when (@xf-styleType = dark) { color: #f92672; }
		}

		&.prism-boolean
		{
			& when (@xf-styleType = light) { color: #219; }
			& when (@xf-styleType = dark) { color: #ae81ff; }
		}

		&.prism-symbol,
		&.prism-atrule,
		&.prism-keyword
		{
			& when (@xf-styleType = light) { color: #708; }
			& when (@xf-styleType = dark) { color: #e6db74; }
		}

		&.prism-selector,
		&.prism-function
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #e6db74; }
		}

		&.prism-deleted
		{
			color: #d44;
		}

		&.prism-inserted
		{
			color: #292;
		}

		&.prism-string,
		&.prism-attr-value
		{
			& when (@xf-styleType = light) { color: #a11; }
			& when (@xf-styleType = dark) { color: #a6e22e; }
		}

		&.prism-number
		{
			& when (@xf-styleType = light) { color: #164; }
			& when (@xf-styleType = dark) { color: #ae81ff; }
		}

		&.prism-attr-name,
		&.prism-char,
		&.prism-builtin
		{
			& when (@xf-styleType = light) { color: #00c; }
			& when (@xf-styleType = dark) { color: #a6e22e; }
		}

		&.prism-regex,
		&.prism-important,
		&.prism-variable,
		&.prism-package
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #fd971f; }
		}

		&.prism-class-name,
		&.prism-important,
		&.prism-bold
		{
			& when (@xf-styleType = light) { color: #00f; }
			& when (@xf-styleType = dark) { color: #e6db74; }
		}

		&.prism-bold
		{
			font-weight: bold;
		}

		&.prism-italic,
		&.prism-constant
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #f92672; }

			font-style: italic;
		}

		&.prism-entity
		{
			cursor: help;
		}
	}
}

.bbCodeInline
{
	margin: 0;
	.xf-bbCodeInlineCode();
	font-family: @xf-fontFamilyCode;
	line-height: @xf-lineHeightDefault;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	white-space: pre-wrap;
}

.bbCodeSpoiler
{
	margin: @_bbCodeBlock-spacing 0;
}

.bbCodeSpoiler-button
{
	.has-no-js & { display: none; }
}

.bbCodeSpoiler-content
{
	.m-hiddenEl(true);
	.has-no-js & { display: block !important; }

	> .bbCodeBlock--spoiler
	{
		margin: .2em 0 0;
	}
}

.bbCodeInlineSpoiler
{
	background-color: rgba(0, 0, 0, 0);
	color: rgba(0, 0, 0, 0);
	text-shadow: @xf-textColorMuted 0 0 14px;
	cursor: pointer;

	a, span
	{
		color: inherit !important;;

		.has-js &
		{
			pointer-events: none;
		}
	}

	.smilie
	{
		filter: blur(8px) grayscale(90%);
	}

	&:hover
	{
		text-shadow: @xf-textColorMuted 0 0 10px;
	}
}]]></template>
    <template title="category_view" type="public" addon_id="XF" version_id="2020031" version_string="2.2.0 Beta 1"><![CDATA[<xf:title>{$category.title}</xf:title>
<xf:description>{$category.description|raw}</xf:description>

<xf:if is="!$category.isSearchEngineIndexable()">
	<xf:head option="metaNoindex"><meta name="robots" content="noindex" /></xf:head>
</xf:if>

<xf:macro template="metadata_macros" name="canonical_url" arg-canonicalUrl="{{ link('canonical:categories', $category) }}" />

<xf:macro template="category_macros" name="category_page_options" arg-category="{$category}" />
<xf:breadcrumb source="$category.getBreadcrumbs(false)" />

<xf:if is="$nodeTree">
	<div class="block uix_nodeList block">
		<div class="block-outer"><xf:trim>
			<xf:if contentcheck="true">
				<div class="block-outer-opposite">
					<div class="buttonGroup">
					<xf:contentcheck>
						<xf:if is="$xf.visitor.user_id && $hasForumDescendents">
							<xf:button href="{{ link('categories/mark-read', $category, {'date': $xf.time}) }}"
								class="button--link" overlay="true">
								{{ phrase('mark_read') }}
							</xf:button>
						</xf:if>
					</xf:contentcheck>
					</div>
				</div>
			</xf:if>
		</xf:trim></div>
		<div class="block-container">
			<div class="block-body">
				<xf:macro template="forum_list" name="node_list"
					arg-children="{$nodeTree}"
					arg-extras="{$nodeExtras}"
					arg-depth="2" />
			</div>
		</div>
	</div>
<xf:else />
	<div class="blockMessage">{{ phrase('there_is_nothing_to_display') }}</div>
</xf:if>

<xf:widgetpos id="category_view_sidebar" context-category="{$category}" position="sidebar" />
]]></template>
    <template title="code_editor.less" type="public" addon_id="XF" version_id="2020032" version_string="2.2.0 Beta 2"><![CDATA[/* XF-RTL:disable */

.codeEditor
{
	// standard editor with fixed-width font and 55% screen height, used when the code editor is the primary
	// editable element on screen
	&.CodeMirror
	{
		height: 55vh;
		direction: ltr;

		.xf-input();
		font-family: @xf-fontFamilyCode;
		padding: 0;
		-ltr-rtl-border-color: @xf-borderColorHeavy @xf-borderColorLight @xf-borderColorLight @xf-borderColorHeavy;

		//color: @xf-inputTextColor;
		//background: @xf-inputBgColor;
		//border: @xf-borderSize solid;
		//border-radius: @xf-borderRadiusMedium;

		.m-inputZoomFix();

		&.CodeMirror-focused
		{
			.xf-inputFocus();
		}

		&.CodeMirror-simplescroll
		{
			.CodeMirror-sizer
			{
				// Bit hacky but solves issue with the simplescroll bars overlapping the content
				padding-right: 30px !important;
			}
		}
	}

	// short editor, taking only 30% of the vertical height
	&.codeEditor--short
	{
		height: 30vh;
	}

	// show an editor that shrinks to a very small height for very little content
	&.codeEditor--autoSize
	{
		height: auto;

		.CodeMirror-lines
		{
			min-height: (@xf-fontSizeNormal * @xf-lineHeightDefault * 2) + 8px; // 2 lines, 4px padding from .CodeMirror-lines
		}
	}

	// like --autoSize, but shrinks to a single line when empty
	&.codeEditor--oneLine
	{
		min-height: auto;
	}

	// use proportional font - use this when syntax highlighting is useful, but not imperative, like HTML-enabled descriptions
	&.codeEditor--proportional
	{
		font-family: @xf-fontFamilyUi;
	}
}

[disabled] + .codeEditor,
[disabled] + .codeEditor.CodeMirror-focused
{
	.xf-inputDisabled();
}

[readonly] + .codeEditor,
[readonly] + .codeEditor.CodeMirror-focused
{
	background: mix(xf-default(@xf-input--background-color, @xf-contentBg), xf-default(@xf-inputDisabled--background-color, @xf-paletteNeutral1));
}

// Default CSS (mostly)
{{ include('codemirror.less') }}

// Extra stuff for DARK styles, taking values from CodeMirror's DARCULA theme
.cm-s-default
{
	& when (@xf-styleType = dark)
	{
		&.CodeMirror
		{
			.CodeMirror-cursor { border-left: 1px solid #dddddd; }
			.CodeMirror-activeline-background { background: #3A3A3A; }
			.CodeMirror-selected { background: #085a9c; }
			.CodeMirror-gutters { background: rgb(72, 72, 72); border-right: 1px solid grey; color: #606366 }
			.CodeMirror-matchingbracket { background-color: #3b514d; color: yellow !important; }
		}

		span.cm-keyword { font-weight: bold; color: #CC7832; }
		span.cm-atom { font-weight: bold; color: #CC7832; }
		span.cm-number { color: #6897BB; }
		span.cm-def { color: #FFC66D; }
		span.cm-variable { color: #A9B7C6; }
		span.cm-property { color: #A9B7C6; }
		span.cm-operator { color: #A9B7C6; }
		span.cm-variable-2 { color: #A9B7C6; }
		span.cm-variable-3,
		span.cm-comment { color: #808080; }
		span.cm-string { color: #6A8759; }
		span.cm-string-2 { color: #6A8759; }
		span.cm-meta { color: #BBB529; }
		span.cm-qualifier { color: #6A8759; }
		span.cm-builtin { color: #A9B7C6; }
		span.cm-bracket { color: #A9B7C6; }
		span.cm-tag { color: #CC7832; }
		span.cm-attribute { color: #6A8759; }
		span.cm-link { color: #287BDE; }
		span.cm-error { color: #BC3F3C; }
		span.cm-invalidchar { color: #BC3F3C; }
		span.cm-type { color: #A9B7C6; }
	}
	// background-color: #fff;
}

/* XF-RTL:enable */]]></template>
    <template title="content_vote_macros" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[<xf:macro name="vote_control"
	arg-link="!"
	arg-content="!"
	arg-extraClass="">

	<xf:set var="$currentVote" value="{{ $content.getVisitorContentVote() }}" />
	<xf:set var="$canVote" value="{{ $content.canVoteOnContent() }}" />
	<div class="contentVote {{ $currentVote ? 'is-voted' : '' }} js-contentVote {$extraClass}" data-xf-init="content-vote" data-content-id="{{ $content.getEntityContentTypeId() }}">
		<a href="{{ $canVote ? link($link, $content, {'type' : 'up'}) : 'javascript:' }}"
			class="contentVote-vote {{ $canVote ? '' : 'is-disabled' }} contentVote-vote--up {{ ($currentVote == 'up') ? 'is-voted' : '' }}"
			data-vote="up"><span class="u-srOnly">{{ phrase('upvote') }}</span></a>

		<span class="contentVote-score {{ $content.vote_score > 0 ? 'is-positive' : ''  }} {{ $content.vote_score < 0 ? 'is-negative' : ''  }} js-voteCount"
			data-score="{$content.vote_score}">{$content.vote_score_short}</span>

		<xf:if is="$content.isContentDownvoteSupported()">
			<a href="{{ $canVote ? link($link, $content, {'type' : 'down'}) : 'javascript:' }}"
				class="contentVote-vote {{ ($canVote AND $content.canDownvoteContent()) ? '' : 'is-disabled' }} contentVote-vote--down {{ ($currentVote == 'down') ? 'is-voted' : '' }}"
				data-vote="down"><span class="u-srOnly">{{ phrase('downvote') }}</span></a>
		</xf:if>
	</div>

</xf:macro>

<xf:macro name="vote_display" arg-content="!" arg-extraClass="">

	<div class="contentVote js-contentVote contentVote--display {{ $content.getVisitorContentVote() ? 'is-voted' : '' }} {$extraClass}" data-content-id="{{ $content.getEntityContentTypeId() }}">
		<span class="contentVote-score {{ $content.vote_score > 0 ? 'is-positive' : ''  }} {{ $content.vote_score < 0 ? 'is-negative' : ''  }} js-voteCount" data-score="{$content.vote_score}">{$content.vote_score_short}</span>
		<span class="contentVote-description">{{ $content.vote_score == 1 ? phrase('vote_noun') : phrase('votes') }}</span>
	</div>

</xf:macro>

<xf:macro name="vote_display_placeholder" arg-extraClass="">

	<div class="contentVote contentVote--display contentVote--placeholder {$extraClass}">
		<span class="contentVote-score">-</span>
		<span class="contentVote-description">{{ phrase('votes') }}</span>
	</div>

</xf:macro>]]></template>
    <template title="conversation_list" type="public" addon_id="XF" version_id="2011072" version_string="2.1.10 Patch 2"><![CDATA[<xf:title page="{$page}">{{ phrase('conversations') }}</xf:title>

<xf:js src="xf/inline_mod.js" min="1" />

<xf:pageaction if="$xf.visitor.canStartConversation()">
	<xf:button href="{{ link('conversations/add') }}" class="button--cta" icon="write">{{ phrase('start_conversation') }}</xf:button>
</xf:pageaction>

<div class="block" data-xf-init="inline-mod" data-type="conversation" data-href="{{ link('inline-mod') }}">
	<div class="block-outer">
		<xf:pagenav
			page="{$page}" perpage="{$perPage}" total="{$total}"
			link="conversations" params="{$filters}"
			wrapperclass="block-outer-main" />
		<div class="block-outer-opposite">
			<div class="buttonGroup">
				<xf:macro template="inline_mod_macros" name="button"
					arg-variant="inlineModButton--withLabel"
					arg-label="{{ phrase('selected') }}"
					arg-tooltip="{{ false }}" />
			</div>
		</div>
	</div>

	<div class="block-container">
		<div class="block-filterBar">
			<div class="filterBar">
				<xf:if contentcheck="true">
					<ul class="filterBar-filters">
					<xf:contentcheck>
						<xf:if is="$filters.starter_id AND $starterFilter">
							<li><a href="{{ link('conversations', null, $filters|replace('starter_id', null)) }}"
								class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
								{{ phrase('started_by_x', {'name': $starterFilter.username}) }}</a></li>
						</xf:if>
						<xf:if is="$filters.receiver_id AND $receiverFilter">
							<li><a href="{{ link('conversations', null, $filters|replace('receiver_id', null)) }}"
								class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
								{{ phrase('received_by_x', {'name': $receiverFilter.username}) }}</a></li>
						</xf:if>
						<xf:if is="$filters.starred">
							<li><a href="{{ link('conversations', null, $filters|replace('starred', null)) }}"
								class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
								<span class="filterBar-filterToggle-label">{{ phrase('show_only:') }}</span>
								{{ phrase('starred') }}</a></li>
						</xf:if>
						<xf:if is="$filters.unread">
							<li><a href="{{ link('conversations', null, $filters|replace('unread', null)) }}"
								class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
								<span class="filterBar-filterToggle-label">{{ phrase('show_only:') }}</span>
								{{ phrase('filter_unread') }}</a></li>
						</xf:if>
					</xf:contentcheck>
					</ul>
				</xf:if>

				<a class="filterBar-menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('filters') }}</a>
				<div class="menu" data-menu="menu" aria-hidden="true">
					<div class="menu-content">
						<h4 class="menu-header">{{ phrase('show_only:') }}</h4>
						<xf:form action="{{ link('conversations/filters') }}">
							<div class="menu-row menu-row--separated">
								<xf:radio name="filter_type">
									<xf:option value="" selected="{{ !$starterFilter AND !$receiverFilter }}">{{ phrase('show_all_conversations') }}</xf:option>
									<xf:option value="started" selected="{{ $starterFilter ? true : false }}" data-hide="true"
										label="{{ phrase('started_by...') }}">

										<xf:textbox name="starter" value="{{ $starterFilter ? $starterFilter.username : '' }}" ac="single"
											maxlength="{{ max_length($xf.visitor, 'username') }}"/>
									</xf:option>
									<xf:option value="received" selected="{{ $receiverFilter ? true : false }}" data-hide="true"
										label="{{ phrase('received_by...') }}">

										<xf:textbox name="receiver" value="{{ $receiverFilter ? $receiverFilter.username : '' }}" ac="single"
											maxlength="{{ max_length($xf.visitor, 'username') }}" />
									</xf:option>
								</xf:radio>
							</div>
							<div class="menu-row menu-row--separated">
								<xf:checkbox>
									<xf:option name="starred" selected="{$filters.starred}" label="{{ phrase('starred_conversations') }}" />
									<xf:option name="unread" selected="{$filters.unread}" label="{{ phrase('unread_conversations') }}" />
								</xf:checkbox>
							</div>

							<div class="menu-footer">
								<span class="menu-footer-controls">
									<xf:button type="submit" class="button--primary">{{ phrase('filter') }}</xf:button>
								</span>
							</div>
							<xf:hiddenval name="apply">1</xf:hiddenval>
						</xf:form>
					</div>
				</div>
			</div>
		</div>

		<div class="block-body">
			<xf:if is="$userConvs is not empty">
				<div class="structItemContainer">
					<xf:foreach loop="$userConvs" value="$userConv">
						<xf:macro template="conversation_list_macros" name="item" arg-userConv="{$userConv}" />
					</xf:foreach>
				</div>
				<xf:else />
				<div class="block-row">{{ phrase('there_no_conversations_to_display') }}</div>
			</xf:if>
		</div>
		<div class="block-footer block-footer--split uix_conversationsFooterMobile">
			<div class="block-footer-main">
				<a href="{{ link('conversations') }}">{{ phrase('show_all...') }}</a>
			</div>
			<xf:if is="$xf.visitor.canStartConversation()">
				<div class="block-footer-opposite">
					<a href="{{ link('conversations/add') }}">{{ phrase('start_new_conversation') }}</a>					
				</div>
			</xf:if>
		</div>
	</div>

	<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}"
		link="conversations" params="{$filters}"
		wrapperclass="block-outer block-outer--after" />
</div>

<xf:widgetpos id="conversation_list_sidebar" position="sidebar" />]]></template>
    <template title="conversation_list_macros" type="public" addon_id="XF" version_id="2010370" version_string="2.1.3"><![CDATA[<xf:macro name="item"
	arg-userConv="!"
	arg-allowInlineMod="{{ true }}">

	<xf:css src="structured_list.less" />

	<div class="structItem structItem--conversation {{ $userConv.isUnread() ? 'is-unread' : '' }} js-inlineModContainer" data-author="{{ $userConv.Master.Starter.username ?: $userConv.Master.username }}">
		<div class="structItem-cell structItem-cell--icon">
			<div class="structItem-iconContainer">
				<xf:avatar user="$userConv.Master.Starter" size="s" defaultname="{$userConv.Master.username}" />
			</div>
		</div>
		<div class="structItem-cell structItem-cell--main" data-xf-init="touch-proxy">
			<xf:if contentcheck="true">
				<ul class="structItem-statuses">
				<xf:contentcheck>
					<xf:if is="$userConv.is_starred">
						<li>
							<i class="structItem-status structItem-status--starred" aria-hidden="true" title="{{ phrase('starred')|for_attr }}"></i>
							<span class="u-srOnly">{{ phrase('starred') }}</span>
						</li>
					</xf:if>
					<xf:if is="!$userConv.Master.conversation_open">
						<li>
							<i class="structItem-status structItem-status--locked" aria-hidden="true" title="{{ phrase('locked')|for_attr }}"></i>
							<span class="u-srOnly">{{ phrase('locked') }}</span>
						</li>
					</xf:if>
				</xf:contentcheck>
				</ul>
			</xf:if>

			<a href="{{ link('conversations/unread', $userConv) }}" class="structItem-title" data-tp-primary="on">{$userConv.title}</a>

			<div class="structItem-minor">
				<xf:if contentcheck="true">
					<ul class="structItem-extraInfo">
					<xf:contentcheck>
						<xf:if is="$allowInlineMod">
							<li><xf:checkbox standalone="true">
								<xf:option value="{$userConv.conversation_id}" class="js-inlineModToggle" />
							</xf:checkbox></li>
						</xf:if>
					</xf:contentcheck>
					</ul>
				</xf:if>

				<ul class="structItem-parts">
					<li>
						<ul class="listInline listInline--comma listInline--selfInline">
							<li><xf:username user="$userConv.Master.Starter" defaultname="{$userConv.Master.username}" title="{{ phrase('conversation_starter') }}" /></li><xf:trim>
							</xf:trim><xf:foreach loop="$userConv.Master.recipients" value="$recipient" if="{$recipient.user_id} != {$userConv.Master.user_id}"><xf:trim>
								<li><xf:username user="{$recipient}" defaultname="{{ phrase('unknown_member') }}" /></li>
							</xf:trim></xf:foreach>
						</ul>
					</li>
					<li class="structItem-startDate"><a href="{{ link('conversations', $userConv) }}" rel="nofollow"><xf:date time="{$userConv.Master.start_date}" /></a></li>
					<xf:if is="$userConv.reply_count >= $xf.options.messagesPerPage">
						<span class="structItem-pageJump">
						<xf:foreach loop="{{ last_pages($userConv.reply_count + 1, $xf.options.messagesPerPage, $xf.options.lastPageLinks) }}" value="$p">
							<a href="{{ link('conversations', $userConv, {'page': $p}) }}">{$p}</a>
						</xf:foreach>
						</span>
					</xf:if>
				</ul>
			</div>
		</div>
		<div class="structItem-cell structItem-cell--meta">
			<dl class="pairs pairs--justified">
				<dt>{{ phrase('replies') }}</dt>
				<dd>{$userConv.reply_count|number}</dd>
			</dl>
			<dl class="pairs pairs--justified structItem-minor">
				<dt>{{ phrase('participants') }}</dt>
				<dd>{$userConv.Master.recipient_count|number}</dd>
			</dl>
		</div>
		<div class="structItem-cell structItem-cell--latest">
			<a href="{{ link('conversations/latest', $userConv) }}" rel="nofollow"><xf:date time="{$userConv.last_message_date}" class="structItem-latestDate" /></a>
			<div class="structItem-minor"><xf:username user="{$userConv.Master.last_message_cache}" /></div>
		</div>
	</div>
</xf:macro>]]></template>
    <template title="conversation_message_macros" type="public" addon_id="XF" version_id="2010036" version_string="2.1.0 Beta 6"><![CDATA[<xf:macro name="message" arg-message="!" arg-conversation="!" arg-position="" arg-lastRead="{{ null }}">
	<xf:css src="message.less" />
	<article class="message message--conversationMessage {{ $message.isIgnored() ? ' is-ignored' : '' }} {{ $message.isUnread($lastRead) ? 'is-unread' : '' }} js-message" data-author="{{ $message.User.username ?: $message.username }}">
		<span class="u-anchorTarget" id="convMessage-{$message.message_id}"></span>
		<div class="message-inner">
			<div class="message-cell message-cell--user">
				<xf:macro template="message_macros" name="user_info" arg-user="{$message.User}" arg-fallbackName="{$message.username}" />
			</div>
			<div class="message-cell message-cell--main">
				<div class="message-main js-quickEditTarget">
					<div class="message-content">
						<header class="message-attribution">
							<a href="{{ link('conversations/messages', $message) }}" class="message-attribution-main u-concealed" rel="nofollow">
								<xf:date time="{$message.message_date}" />
							</a>
							<span class="message-attribution-opposite">
								<xf:if is="$message.isUnread($lastRead)">
									<span class="message-newIndicator">{{ phrase('new') }}</span>
								</xf:if>
								<xf:if is="$position">#{$position|number}</xf:if>
							</span>
						</header>

						<xf:if is="$message.isIgnored()">
							<div class="messageNotice messageNotice--ignored">
								{{ phrase('you_are_ignoring_content_by_this_member') }}
							</div>
						</xf:if>

						<div class="message-userContent lbContainer js-lbContainer"
							 data-lb-id="message-{$message.message_id}"
							 data-lb-caption-title="{{ $message.User ? $message.User.username : $message.username }}"
							 data-lb-caption-desc="{{ date_time($message.message_date) }}">

							<article class="message-body js-selectToQuote">
								{{ bb_code($message.message, 'conversation_message', $message) }}
								<div class="js-selectToQuoteEnd">&nbsp;</div>
							</article>

							<xf:if is="$message.attach_count">
								<xf:macro template="message_macros" name="attachments"
										  arg-attachments="{$message.Attachments}"
										  arg-message="{$message}"
										  arg-canView="{{ true }}" />
							</xf:if>
						</div>

						<xf:macro template="message_macros" name="signature" arg-user="{$message.User}" />
					</div>
					<div class="reactionsBar js-reactionsList {{ $message.reactions ? 'is-active' : '' }}">
						<xf:reactions content="{$message}" link="conversations/messages/reactions" />
					</div>
					<footer class="message-footer">
						<xf:if contentcheck="true">
							<div class="message-actionBar actionBar">
								<xf:contentcheck>
									<xf:if contentcheck="true">
										<div class="actionBar-set actionBar-set--external">
											<xf:contentcheck>
												<xf:react content="{$message}" link="conversations/messages/react" list="< .js-message | .js-reactionsList" />

												<xf:if is="$conversation.canReply()">
													<xf:set var="$quoteLink">{{ link('conversations/reply', $conversation, {'quote': $message.message_id}) }}</xf:set>
													<xf:if is="$xf.options.multiQuote">
														<a href="{$quoteLink}"
														   class="actionBar-action actionBar-action--mq u-jsOnly js-multiQuote"
														   title="{{ phrase('toggle_multi_quote_tooltip')|for_attr }}"
														   data-message-id="{$message.message_id}"
														   data-mq-action="add">
															{{ phrase('quote') }}
														</a>
													</xf:if>
													<a href="{$quoteLink}"
													   class="actionBar-action actionBar-action--reply"
													   title="{{ phrase('reply_quoting_this_message')|for_attr }}"
													   data-xf-click="quote"
													   data-quote-href="{{ link('conversations/messages/quote', $message) }}">{{ phrase('reply') }}</a>

												</xf:if>
											</xf:contentcheck>
										</div>
									</xf:if>

									<xf:if contentcheck="true">
										<div class="actionBar-set actionBar-set--internal">
											<xf:contentcheck>
												<xf:if is="$message.canReport()">
													<a href="{{ link('conversations/messages/report', $message) }}" class="actionBar-action actionBar-action--report" data-xf-click="overlay">{{ phrase('report_verb') }}</a>
												</xf:if>

												<xf:if is="$message.canEdit()">
													<xf:js src="xf/message.js" min="1" />
													<a href="{{ link('conversations/messages/edit', $message) }}"
													   class="actionBar-action actionBar-action--edit"
													   data-xf-click="quick-edit"
													   data-editor-target="< .js-quickEditTarget">{{ phrase('edit') }}</a>
												</xf:if>

												<xf:if is="$message.canCleanSpam()">
													<a href="{{ link('spam-cleaner', $message) }}"
													   class="actionBar-action actionBar-action--spam actionBar-action--menuItem"
													   data-xf-click="overlay">{{ phrase('spam') }}</a>
												</xf:if>

												<xf:if is="$xf.visitor.canViewIps() && $message.ip_id">
													<a href="{{ link('conversations/messages/ip', $message) }}"
													   class="actionBar-action actionBar-action--ip"
													   data-xf-click="overlay">{{ phrase('ip') }}</a>
												</xf:if>
											</xf:contentcheck>
										</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</xf:if>
					</footer>
				</div>
			</div>
		</div>
	</article>
</xf:macro>]]></template>
    <template title="core.less" type="email" addon_id="XF" version_id="2020036" version_string="2.2.0 Beta 6"><![CDATA[// NOTE: THIS DOES NOT HAVE ACCESS TO public:setup.less automatically!
// THE LESS HERE SHOULD BE KEPT AS SIMPLE AS POSSIBLE

// UI.X Font Sizes

/* solution for pxs */
@fontSizeNormal: unit(10 * @xf-fontSizeNormal, px);
@fontSizeLargest: unit(10 * @xf-fontSizeLargest, px);
@fontSizeSmall: unit(10 * @xf-fontSizeSmall, px);

/* solution for rems
@fontSizeNormal: (0.625 * @xf-fontSizeNormal);
@fontSizeLargest: (0.625 * @xf-fontSizeLargest);
@fontSizeSmall: (0.625 * @xf-fontSizeSmall);
*/

body
{
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;

	background-color: @xf-emailBg;
	font-size: @fontSizeNormal;
	font-family: @xf-emailFont;
	line-height: @xf-lineHeightDefault;
	color: @xf-emailTextColor;
}

table
{
	border-spacing: 0;
	mso-table-lspace: 0pt;
	mso-table-rspace: 0pt;
}

table,
td
{
	border-collapse: collapse;
}

a
{
	color: @xf-emailLinkColor;
	text-decoration: none;
}

.bbImage
{
	width: auto;
	height: auto;
	max-width: 100%;
}

#bodyTable
{
	height: 100% !important;
	width: 100% !important;
	margin: 0;
	padding: 0;
	background-color: @xf-emailBg;
}

#bodyTableContainer
{
	background-color: @xf-emailBg;
}

.container
{
	width: 100%;
	max-width: 600px;
}

.header
{
	color: @xf-emailHeaderColor;
	padding: @xf-paddingMedium @xf-paddingLarge;
	border-top-left-radius: @xf-borderRadiusMedium;
	border-top-right-radius: @xf-borderRadiusMedium;
	font-family: @xf-emailFont;
	font-size: @fontSizeLargest;
	line-height: @xf-lineHeightDefault;
}

.header a
{
	color: @xf-emailHeaderColor;
}

.content
{
	background-color: @xf-emailContentBg;
	border-radius: @xf-borderRadiusSmall;
	color: @xf-emailTextColor;
	padding: @xf-paddingLarge;
	font-size: @fontSizeNormal;
	font-family: @xf-emailFont;
	line-height: @xf-lineHeightDefault;
}

.content .bbImage
{
	max-width: 100%;
}

.content > p:first-child
{
	margin-top: 0;
}

.content > p:last-child
{
	margin-bottom: 0;
}

.footer
{
	padding: @xf-paddingMedium @xf-paddingLarge;
	text-align: center;
	color: @xf-emailTextColorMuted;
	font-size: @fontSizeSmall;
	font-family: @xf-emailFont;
	line-height: @xf-lineHeightDefault;
}

.footer a
{
	color: @xf-emailTextColorMuted;
	text-decoration: underline;
}

.footerExtra
{
	margin-top: 1em;
}

h2
{
	font-size: @fontSizeLargest;
	font-weight: normal;
	margin: @xf-paddingLarge 0;
	padding: 0;
}

hr
{
	border: 0;
	border-bottom: @xf-borderSize solid @xf-emailBorderColor;
}

div.message
{
	border-left: @xf-borderSizeFeature solid @xf-borderColorFeature;
	margin: @xf-paddingLarge 0;
	padding: @xf-paddingLarge;
}

div.quote
{
	border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
	border-top: @xf-borderSize solid @xf-emailBorderColor;
	border-bottom: @xf-borderSize solid @xf-emailBorderColor;
	border-right: @xf-borderSize solid @xf-emailBorderColor;
	background: @xf-emailContentAltBg;
	margin: @xf-paddingLarge 0;
	padding: @xf-paddingLarge;
}

.quote-name
{
	color: @xf-textColorAttention;
	font-size: @fontSizeSmall;
	margin-bottom: @xf-paddingMedium;
}

pre.code
{
	margin: @xf-paddingLarge 0;
	padding: @xf-paddingLarge;
	border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
	border-top: @xf-borderSize solid @xf-emailBorderColor;
	border-bottom: @xf-borderSize solid @xf-emailBorderColor;
	border-right: @xf-borderSize solid @xf-emailBorderColor;
	background: @xf-emailContentAltBg;
	max-width: 600px;
	overflow: auto;
}

.textLink
{
	color: @xf-emailTextColor;
	text-decoration: none;
}

.linkBar
{
	padding: @xf-paddingMedium;
	background-color: @xf-emailContentAltBg;
	border-top: @xf-borderSize solid @xf-emailBorderColor;
}

.button
{
	display: inline-block;
	padding: 5px 10px;
	border: none;
	border-radius: @xf-borderRadiusMedium;
	color: @xf-buttonTextColor;
	text-decoration: none;
	.xf-buttonBase();
	.xf-buttonDefault();
	.xf-buttonPrimary();
	font-size: @fontSizeSmall;
	background-color: @xf-buttonPrimaryBg;
}

.buttonFake
{
	display: inline-block;
	padding: 5px 10px;
	font-size: @fontSizeSmall;
}

.minorText,
.unsubscribeLink
{
	font-size: @fontSizeSmall;
	color: @xf-emailTextColorMuted;
}

.minorText a,
.unsubscribeLink a
{
	color: @xf-emailTextColorMuted;
	text-decoration: underline;
}

.unsubscribeLink
{
	margin-top: 1em;
	text-align: center;
}

.mediaPlaceholder,
.spoilerPlaceholder
{
	border-radius: @xf-borderRadiusSmall;
	margin: @xf-paddingMedium 0;
	padding: @xf-paddingMedium;
	font-size: @fontSizeLargest;
	line-height: 3;
	text-align: center;
	border: @xf-borderSize solid @xf-emailBorderColor;
	background-color: @xf-emailContentAltBg;
}

.inlineSpoilerPlaceholder
{
	font-size: @xf-fontSizeSmall;
	background-color: @xf-contentAltBg;
	border: @xf-borderSize solid @xf-borderColorLight;
	border-radius: @xf-borderRadiusSmall;
	padding: 1px @xf-paddingSmall;
}

.u-opposite { text-align: right; }

// ################################ ACTIVITY SUMMARY ###############################

.p-activitySummary #bodyTableContainer
{
	padding: 0;
}

.summaryContentWrapper
{
	padding: 0 @xf-paddingLarge;
	max-width: 1200px;
}

.summaryHeaderBar
{
	color: @xf-chromeTextColor;
	background: @xf-chromeBg;
	font-family: @xf-emailFont;
	font-size: @xf-fontSizeLargest;
	line-height: @xf-lineHeightDefault;
	padding: @xf-paddingMedium @xf-paddingLarge;

	a
	{
		color:@xf-chromeTextColor;
	}

	img
	{
		max-height: 200px;
		vertical-align: bottom;

		&.logo-svg
		{
			max-width: 200px;
		}
	}
}

.summaryOuterHeader
{
	width: 100%;
	table-layout: fixed;
	margin: @xf-paddingLargest 0;
}

.summaryOuterHeader-content
{
	font-size: @xf-fontSizeLarger;
	font-weight: @xf-fontWeightNormal;
	color: @xf-emailTextColorMuted;
}

.summaryBlock
{
	color: @xf-emailTextColor;
	background-color: @xf-emailContentBg;
	border: @xf-borderSize solid @xf-emailBorderColor;
	border-radius: @xf-borderRadiusSmall;
	border-collapse: separate;

	width: 100%;
	table-layout: fixed;
	margin: @xf-paddingLargest 0;
}

.summaryBlock-header
{
	font-size: @xf-fontSizeLarger;
	color: @xf-majorHeadingTextColor;
	background: @xf-majorHeadingBg;
	border-bottom: @xf-borderSize solid @xf-borderColorLight;
	border-top-left-radius: @xf-borderRadiusSmall;
	border-top-right-radius: @xf-borderRadiusSmall;
	padding: @xf-blockPaddingV @xf-blockPaddingH;

	a
	{
		color: @xf-majorHeadingTextColor;
	}
}

.statsGroup
{
	display: flex;
	flex-flow: row wrap;
	font-size: @xf-fontSizeLarge;
}

.stat
{
	flex: auto;
	vertical-align: top;
	margin-right: @xf-paddingMedium;
	margin-bottom: @xf-paddingMedium;
}

.stat-label
{
	font-size: @xf-fontSizeSmall;
	color: @xf-emailTextColorMuted;
}

.p-activitySummary .content.content--attribution,
.p-activitySummary .content.content--footer,
.p-activitySummary .content.content--footer table
{
	font-size: @xf-fontSizeSmall;
	color: @xf-emailTextColorMuted;

	a:not(.button)
	{
		color: inherit;
		text-decoration: underline;
	}
}]]></template>
    <template title="core.less" type="public" addon_id="XF" version_id="2020270" version_string="2.2.2"><![CDATA[// ########################## GLOBAL BASE SETUP #######################

html
{
	font: @xf-fontSizeNormal / @xf-lineHeightDefault sans-serif;
	font-family: @xf-fontFamilyUi;
	font-weight: @xf-fontWeightNormal;
	color: @xf-textColor;
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	background-color: @xf-pageBg;

	/* // just a reminder that we *might* want this at some point
	-ms-text-size-adjust: none;
	-webkit-text-size-adjust: none;*/
}

body {
	font-size: @xf-fontSizeNormal;
}

button, input, optgroup, select, textarea
{
	font-family: @xf-fontFamilyUi;
	line-height: @xf-lineHeightDefault;
}

img
{
	max-width: 100%;
	height: auto;
}

b, strong
{
	font-weight: @xf-fontWeightHeavy;
}

a
{
	.xf-link();

	&:hover
	{
		.xf-linkHover();
	}
}

svg
{
	fill: currentColor;
}

{{ include('core_setup.less') }}
{{ include('core_utilities.less') }}
{{ include('core_list.less') }}
{{ include('core_categorylist.less') }}
{{ include('core_block.less') }}
{{ include('core_blockmessage.less') }}
{{ include('core_blockstatus.less') }}
{{ include('core_blocklink.less') }}
{{ include('core_blockend.less') }}
{{ include('core_fixedmessage.less') }}
{{ include('core_button.less') }}
{{ include('core_meter_bar.less') }}

// ################################# INPUTS & FORMS #####################

{{ include('core_input.less') }}
{{ include('core_formrow.less') }}

{{ include('core_collapse.less') }}
{{ include('core_badge.less') }}
{{ include('core_tooltip.less') }}
{{ include('core_menu.less') }}
{{ include('core_offcanvas.less') }}
{{ include('core_tab.less') }}
{{ include('core_overlay.less') }}
{{ include('core_globalaction.less') }}
{{ include('core_avatar.less') }}
{{ include('core_datalist.less') }}
{{ include('core_filter.less') }}
{{ include('core_contentrow.less') }}
{{ include('core_pagenav.less') }}
{{ include('core_hscroller.less') }}

// FLASH MESSAGES
.flashMessage
{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: @zIndex-9;
	.xf-flashMessage();

	.m-transitionFadeDown(@xf-animationSpeed);
}

// AUTOCOMPLETE
.autoCompleteList
{
	.m-autoCompleteList();
	margin-top: 2px;

	&.autoCompleteList--inherit
	{
		font-size: inherit;

		li
		{
			padding: @xf-paddingLarge;
			line-height: inherit;
		}
	}
}

// #################################### TAGS ##############################
// note that while this is related to tags, it's commonly used so just include it

.tagList,
.tagList > dt,
.tagList > dd
{
	display: inline;
	padding: 0;
	margin: 0;
}

.tagItem
{
	display: inline-block;
	max-width: 100%;
	padding: 0 6px 1px;
	margin: 0 0 2px;
	border-radius: @xf-borderRadiusMedium;
	font-size: @xf-fontSizeSmaller;
	.xf-chip();
	.xf-uix_tag();

	a&:hover
	{
		text-decoration: none;
		color: @xf-chip--color;
		.xf-chipHover();
		.xf-uix_tagHover();
	}
}

// ############################# MISC #########################

.recaptcha
{
	&.input
	{
		box-sizing: content-box;
		max-width: 100%;
	}

	img
	{
		max-width: 100%;
	}
}

.likesBar
{
	.m-transitionFadeDown();
	.xf-minorBlockContent();
	border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
	padding: @xf-paddingMedium;
	font-size: @xf-fontSizeSmaller;
	margin-top: @xf-paddingMedium;
	.xf-uix_messageLikes();
}

.likeIcon
{
	&:before
	{
		.m-faBase();
		.m-faContent(@fa-var-thumbs-up); //, 1em
		color: @xf-textColorFeature;
		//margin-right: .2em;
	}
}

.reactionsBar
{
	.m-transitionFadeDown();
	.xf-minorBlockContent();
	border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
	padding: @xf-paddingMedium;
	font-size: @xf-fontSizeSmaller;
	margin-top: @xf-paddingMedium;
	.xf-uix_messageLikes();

	&:last-child {
		margin-top: @xf-messagePadding;
	}
}

.reactionSummary
{
	display: inline-block;
	.m-listPlain();
	line-height: 16px;
	height: 16px;
	margin: 0 -2px;
	vertical-align: text-top;

	> li
	{
		display: inline-block;
		height: 20px;
		width: 20px;
		padding: 2px;
		margin: -2px 0;
		background: @xf-contentBg;
		border-radius: 50%;
		position: relative;
		margin-left: -6px;

		&:nth-child(1)
		{
			z-index: 3;
			margin-left: 0;
		}

		&:nth-child(2)
		{
			z-index: 2;
		}

		&:nth-child(3)
		{
			z-index: 1;
		}
	}

	.reaction
	{
		position: absolute;
		top: 0;

		&.reaction
		{
			// increase specificity to override .reaction.reaction--<size>
			display: block;
		}
	}
}

.reactionsBar,
.message-responseRow
{
	.reactionSummary
	{
		> li
		{
			background: @xf-contentAltBg;
		}

		.reaction
		{
			top: 2px;
		}
	}
}

.reactTooltip
{
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;

	.reaction
	{
		margin: @xf-paddingSmall;
		.m-transition(transform);

		&:hover
		{
			.m-transform(scale(1.2));
		}
	}
}

.colorChip
{
	display: inline-block;
	border: @xf-borderSize solid @xf-borderColor;
	border-radius: @xf-borderRadiusMedium;
	padding: 1px;
	width: 100px;
}
.colorChip-inner
{
	display: block;
	background-color: transparent;
	border-radius: @xf-borderRadiusSmall;
	height: 1em;
}
.colorChip-value
{
	display: none;
}

	pre.sf-dump
{
	// not ideal, but then again neither is the default of 99999...
	z-index: @zIndex-1 !important;
}

.grecaptcha-badge
{
	z-index: @zIndex-5;
}

// Bookmarking links for 2.1
.bookmarkLink
{
	&:before
	{
		.m-faBase();
		.m-faContent(@fa-var-bookmark);
		font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);
	}
	&.is-bookmarked
	{
		&:before
		{
			font-weight: @faWeight-solid;
		}
	}

	&.bookmarkLink--highlightable.is-bookmarked
	{
		color: @xf-textColorAttention;

		&:hover
		{
			color: @xf-textColorAccentContent;
		}
	}

	span
	{
		margin-left: .35em;
	}
}

.dragHandle
{
	cursor: move;
	touch-action: none;

	&:before
	{
		.m-faBase();
		.m-faContent(@fa-var-bars);
	}

	.is-undraggable &
	{
		visibility: hidden;
		cursor: default;
	}
}

.memberProfileBanner
{
	background-size: cover !important;
	background-position-x: center !important;
	background-repeat: no-repeat !important;

	&.memberProfileBanner--small
	{
		height: 150px;
		margin-bottom: @xf-paddingMedium;
	}

	&.memberProfileBanner--empty
	{
		display: none;
	}
}

.solutionIcon
{
	display: inline-flex;
	padding: @xf-paddingMedium;
	font-size: @xf-uix_iconSizeLarge;
	line-height: 1;
	color: @xf-textColorMuted;
	.m-transition();

	a&
	{
		color: @xf-textColorMuted;
		text-decoration: none;
	}

	&:before
	{
		.m-faBase();
		.m-faContent(@fa-var-check-circle);
		font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);
	}

	&.is-solution
	{
		color: @xf-votePositiveColor;
		opacity: 1;

		&:before
		{
			font-weight: @faWeight-solid;
		}
	}
}

{{ include('core_action_bar.less') }}
{{ include('core_labels.less') }}
{{ include('core_pikaday.less') }}
{{ include('core_reaction.less') }}
{{ include('core_smilie.less') }}
{{ include('core_bbcode.less') }}

// RESOLUTION OUTPUT

.debugResolution
{
	font-size: @xf-fontSizeSmallest;
	.debugResolution-output:before
	{
		content: "Full @{xf-responsiveWide} - @{xf-pageWidthMax}";
		@media (min-width: @xf-pageWidthMax) { content: "Max > @{xf-pageWidthMax}"; }
		@media (max-width: @xf-responsiveWide) { content: "Wide < @{xf-responsiveWide}"; }
		@media (max-width: @xf-responsiveMedium) { content: "Medium < @{xf-responsiveMedium}"; }
		@media (max-width: @xf-responsiveNarrow) { content: "Narrow < @{xf-responsiveNarrow}"; }
	}
}]]></template>
    <template title="core_action_bar.less" type="public" addon_id="XF" version_id="2020070" version_string="2.2.0"><![CDATA[.actionBar
{
	.m-clearFix();
}

.actionBar-set
{
	&.actionBar-set--internal
	{
		float: left;
		// margin-left: -3px;

		> .actionBar-action:first-child
		{
			margin-left: 0;
		}
	}

	&.actionBar-set--external
	{
		float: right;
		// margin-right: -3px;

		> .actionBar-action:last-child
		{
			margin-right: 0;
		}
	}
}

.actionBar .actionBar-action
{
	display: inline-block;
	padding: 3px;
	border: 1px solid transparent;
	border-radius: @xf-borderRadiusMedium;
	margin-left: 5px;
	.xf-uix_messageControl();

	&:hover {
		.xf-uix_messageControlHover();
	}

	&:before
	{
		.m-faBase();
		font-size: 1.1em;
		padding-right: 2px;
	}

	&.actionBar-action--menuTrigger
	{
		display: none;

		&.is-displayed
		{
			display: inline;
		}

		&:after
		{
			.m-menuGadget();
		}
	}

	&.actionBar-action--inlineMod
	{
		label
		{
			color: @xf-linkColor;
			font-size: 120%;
			// vertical-align: -2px;
		}

		input
		{
			.m-checkboxAligner();
		}
	}

	&.actionBar-action--mq
	{
		&:before { .m-faContent("@{fa-var-plus}\20");} // plus

		&.is-selected
		{
			background-color: @xf-contentHighlightBg;
			border-color: @xf-borderColorHighlight;

			&:before { .m-faContent("@{fa-var-minus}\20");} // minus
		}
	}

	&.actionBar-action--postLink
	{
		text-decoration: inherit !important;
		color: inherit !important;
	}

	&.actionBar-action--reply:before { .m-faContent("@{fa-var-reply}");}
	&.actionBar-action--like:before { .m-faContent("@{fa-var-thumbs-up}");}

	&.actionBar-action--reaction:not(.has-reaction) .reaction-text
	{
		color: inherit;
	}

	&.actionBar-action--view
	{
		background: @xf-contentBg;
		color: @xf-linkColor;
		.m-buttonBorderColorVariation(@xf-borderColor);
		padding-left: @xf-paddingLarge;
		padding-right: @xf-paddingLarge;

		&:hover,
		&:active,
		&:focus
		{
			text-decoration: none;
			background: @xf-contentHighlightBg;
		}
	}
	&.actionBar-action--reply:before { .m-faContent("@{fa-var-reply}\20");} // reply
	&.actionBar-action--comment:before { .m-faContent("@{fa-var-reply}\20");} // reply
	&.actionBar-action--like.unlike:before { .m-faContent("@{fa-var-thumbs-down}\20");}// thumbs up
	&.actionBar-action--reaction.reaction--imageHidden i:before { .m-faContent("@{fa-var-thumbs-up}\20");}
	&.actionBar-action--report:before { .m-faContent("@{fa-var-exclamation-circle}\20");}
	&.actionBar-action--delete:before { .m-faContent("@{fa-var-trash}\20");}
	&.actionBar-action--edit:before { .m-faContent("@{fa-var-edit}\20");}
	&.actionBar-action--ip:before { .m-faContent("@{fa-var-globe}\20");}
	&.actionBar-action--history:before { .m-faContent("@{fa-var-history}\20");}
	&.actionBar-action--warn:before { .m-faContent("@{fa-var-warning}\20");}
	&.actionBar-action--spam:before { .m-faContent("@{fa-var-warning}\20");}
}

@media (max-width: @xf-responsiveMedium)
{
	.actionBar .actionBar-action
	{
		&.actionBar-action--menuItem
		{
			display: none !important;
		}

		&.actionBar-action--menuTrigger
		{
			display: inline;
		}
	}
}]]></template>
    <template title="core_avatar.less" type="public" addon_id="XF" version_id="2010170" version_string="2.1.1"><![CDATA[// ################################### AVATARS #############################

.m-uix_avatarShape() {
	<xf:if is="property('uix_avatarShape') == 1">
		border-radius: 100%;
	<xf:elseif is="property('uix_avatarShape') == 2" />
		border-radius: 0;
	<xf:elseif is="property('uix_avatarShape') == 3" />
		-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
		clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	<xf:elseif is="property('uix_avatarShape') == 4" />
		-webkit-clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
		clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
	<xf:elseif is="property('uix_avatarShape') == 5" />
		-webkit-clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
		clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
	<xf:elseif is="property('uix_avatarShape') == 6" />
		-webkit-clip-path: polygon(0 50%, 15% 15%, 50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%);
		clip-path: polygon(0 50%, 15% 15%, 50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%);
	</xf:if>
}

.avatar
{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: @xf-avatarBorderRadius;
	vertical-align: top;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	.m-uix_avatarShape();

	img { background-color: @xf-avatarBg; }

	&.avatar--default
	{
		&.avatar--default--dynamic,
		&.avatar--default--text
		{
			font-family: @xf-avatarDynamicFont;
			font-weight: normal;
			text-align: center;
			text-decoration: none !important;

			// this works with the flex box approach
			line-height: 1;

			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			
		}

		&.avatar--default--text
		{
			color: xf-default(@xf-textColorMuted, black) !important;
			background: mix(xf-default(@xf-textColorMuted, black), xf-default(@xf-avatarBg, white), 25%) !important;

			> span:before { content: ~"'@{xf-avatarDefaultTextContent}'"; }
		}

		&.avatar--default--image
		{
			background-color: @xf-avatarBg;
			background-image: url(@xf-avatarDefaultImage);
			background-size: cover;
			> span { display: none; }
		}
	}

	&:hover
	{
		text-decoration: none;
	}

	&.avatar--updateLink
	{
		position: relative;
	}

	&.avatar--separated
	{
		border: 1px solid @xf-avatarBg;
	}

	&.avatar--square
	{
		border-radius: 0;
	}

	&.avatar--xxs
	{
		.m-avatarSize(@avatar-xxs);
	}

	&.avatar--xs
	{
		.m-avatarSize(@avatar-xs);
	}

	&.avatar--s
	{
		.m-avatarSize(@avatar-s);
	}

	&.avatar--m
	{
		.m-avatarSize(@avatar-m);
	}

	&.avatar--l
	{
		.m-avatarSize(@avatar-l);
	}

	&.avatar--o
	{
		.m-avatarSize(@avatar-o);
	}

	img:not(.cropImage)
	{
		.m-hideText;
		display: block;
		border-radius: inherit;
		width: 100%;
		height: 100%;
	}

	&:not(a)
	{
		cursor: inherit;
	}
}

.memberHeader-avatar .avatar {border-radius: @xf-avatarBorderRadius;}

.avatar-update
{
	width: 100%;
	height: 30px;
	bottom: -30px;
	position: absolute;

	.m-hiddenLinks();
	.m-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), #000);
	.m-transition();

	padding: @xf-paddingSmall;
	overflow: hidden;

	font-family: @xf-fontFamilyUi;
	font-size: @xf-fontSizeSmaller;
	line-height: @xf-lineHeightDefault;

	display: none;
	align-items: center;
	justify-content: center;

	.avatar--updateLink &
	{
		display: flex;
	}

	.has-touchevents &,
	.avatar:hover &
	{
		bottom: 0;
	}

	a
	{
		text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
		color: #fff;

		&:hover
		{
			text-decoration: none;
		}
	}
}

.avatarWrapper
{
	display: inline-block;
	position: relative;
}

.avatarWrapper-update
{
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: .8em;
	color: #fff;
	text-decoration: none;
	opacity: 0;
	.m-transition(opacity);

	&:before
	{
		content: '';
		position: absolute;
		top: -100%;
		bottom: 0;
		left: 0;
		right: 0;
		.m-borderBottomRadius(xf-default(@xf-avatarBorderRadius, 0));
		.m-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .9), #000, 60%);
		opacity: .75;
		.m-transition(opacity);
		pointer-events: none;
	}

	span
	{
		// so it sits on top of the BG
		position: relative;
	}

	&:hover
	{
		color: #fff;
		text-decoration: none;

		&:before
		{
			opacity: 1;
		}
	}

	.avatarWrapper:hover &,
	.has-touchevents &
	{
		opacity: 1;
	}

	&.avatarWrapper-update--small,
	.avatar--s + &
	{
		font-size: @xf-fontSizeSmall;
		padding-bottom: .2em;
	}
}]]></template>
    <template title="core_badge.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// #################################################### BADGES ###########################

.badge,
.badgeContainer:after
{
	display: inline-block;
	padding: 2px 4px 1px;
	margin: -2px 0 -2px 4px;
	font-size: 80%;
	line-height: 1;
	font-weight: @xf-fontWeightNormal;
	.xf-badge();
}

.badgeContainer
{
	&:after
	{
		content: attr(data-badge);
		display: none;
	}

	&.badgeContainer--visible:after
	{
		display: inline-block;
	}
}

.badge.badge--highlighted,
.badgeContainer.badgeContainer--highlighted:after
{
	display: inline-block;
	.xf-badgeHighlighted();
}]]></template>
    <template title="core_block.less" type="public" addon_id="XF" version_id="2020036" version_string="2.2.0 Beta 6"><![CDATA[// ################################# BLOCKS ##################

.blocks
{
	margin-bottom: @xf-elementSpacer;

	&:last-child
	{
		margin-bottom: 0;
	}

	.block
	{
		margin-bottom: (@xf-elementSpacer / 2);

		&:last-child
		{
			margin-bottom: 0;
		}
	}

	&.blocks--close .block
	{
		margin-bottom: (@xf-elementSpacer / 4);
	}

	&.blocks--separated
	{
		+ .blocks
		{
			padding-top: @xf-elementSpacer;
			border-top: @xf-borderSize solid @xf-borderColor;
		}
	}
}

.blocks-header
{
	font-size: @xf-fontSizeLarger;
	font-weight: @xf-fontWeightNormal;
	color: @xf-textColorMuted;

	margin: 0;
	padding: 0;
	margin-bottom: 5px;

	&.blocks-header--strong
	{
		color: @xf-textColorDimmed;

		.blocks-desc
		{
			color: @xf-textColorMuted;
		}
	}
}

.blocks-textJoiner
{
	display: table;
	width: 100%;
	margin-bottom: (@xf-elementSpacer / 2);
	padding: 0 @xf-paddingMedium;

	> span
	{
		display: table-cell;
		position: relative;

		&:before
		{
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			border-top: @xf-borderSize solid @xf-borderColor;
		}
	}

	> em
	{
		display: table-cell;
		padding: 0 @xf-paddingLarge;
		width: 1%;
		white-space: nowrap;
		// font-size: @xf-fontSizeLargest;
		line-height: 1;
		font-style: normal;
		text-align: center;
		
		font-weight: 400;
		color: @xf-textColorMuted;
		text-transform: lowercase;
	}
}


.block
{
	margin-bottom: @xf-elementSpacer;
	
	&:last-child {margin-bottom: 0;}

	&.block--close
	{
		margin-bottom: 5px;
	}

	&.block--treeEntryChooser
	{
		.block-header
		{
			font-size: @xf-fontSizeLarge;

			.block-desc
			{
				font-size: @xf-fontSizeSmallest;
			}
		}

		.block-row
		{
			padding-top: 6px;
			padding-bottom: 6px;
		}

		.contentRow
		{
			&.is-disabled
			{
				opacity: 0.5;
			}
		}

		.contentRow-title
		{
			font-size: @xf-fontSizeNormal;
		}

		.contentRow-minor
		{
			font-size: @xf-fontSizeSmaller;
		}

		.contentRow-suffix
		{
			font-size: @xf-fontSizeSmall;
		}
	}
}

.block-outer
{
	padding-bottom: @xf-blockPaddingV;
	.m-clearFix();
	.xf-uix_blockOuter();

	&:empty
	{
		display: none;
	}

	&.block-outer--after
	{
		padding-top: @xf-blockPaddingV;
		padding-bottom: 0;
	}

	&.block-outer--padded
	{
		padding-left: @xf-blockPaddingH;
		padding-right: @xf-blockPaddingH;
	}

	.block-outer-hint
	{
		font-size: @xf-fontSizeSmall;
		color: @xf-textColorMuted;
	}
}
.block-outer-main, .block-row-main { float: left; }
.block-outer-opposite, .block-row-opposite { float: right; }
.block-outer-middle, .block-row-middle { text-align: center; }

.block-container
{
	.xf-contentBase();
	.xf-blockBorder()
	border-radius: @xf-blockBorderRadius;

	//.m-transition(border, margin;); // edgeSpacerRemoval
	.xf-uix_blockContainer();
	&.block-container--none
	{
		background: none;
		border: none;
		color: @xf-textColor;
		padding: 0;
		box-shadow: none;
	}
}

@media (min-width: @xf-responsiveEdgeSpacerRemoval)
{
	@{block-noStripSel} > :first-child,
	.block-topRadiusContent,
	@{block-noStripSel} > .block-body:first-child > .blockLink:first-child
	{
		border-top-left-radius: @block-borderRadius-inner;
		border-top-right-radius: @block-borderRadius-inner;
	}

	@{block-noStripSel} > :last-child,
	.block-bottomRadiusContent,
	@{block-noStripSel} > .block-body:last-child > .blockLink:last-child,
	@{block-noStripSel} > .tabPanes:last-child > [role=tabpanel] > :last-child,
	@{block-noStripSel} > .tabPanes:last-child > [role=tabpanel] > .block-body > :last-child
	{
		border-bottom-left-radius: @block-borderRadius-inner;
		border-bottom-right-radius: @block-borderRadius-inner;
	}

	@{block-noStripSel} > .block-body:first-child > .dataList:first-child,
	.block-topRadiusContent.dataList,
	.block-topRadiusContent > .dataList:first-child
	{
		tbody:first-child .dataList-row:first-child,
		thead:first-child .dataList-row:first-child
		{
			> .dataList-cell:first-child { border-top-left-radius: @block-borderRadius-inner; }
			> .dataList-cell:last-child { border-top-right-radius: @block-borderRadius-inner; }
		}
	}

	@{block-noStripSel} > .block-body:first-child > .formRow:first-child,
	.block-topRadiusContent.formRow,
	.block-topRadiusContent > .formRow:first-child
	{
		> dt { border-top-left-radius: @block-borderRadius-inner; }
		> dd { border-top-right-radius: @block-borderRadius-inner; }
	}

	@{block-noStripSel} > .block-body:last-child > .dataList:last-child,
	.block-bottomRadiusContent.dataList,
	.block-bottomRadiusContent > .dataList:last-child
	{
		tbody:last-child .dataList-row:last-child
		{
			> .dataList-cell:first-child { border-bottom-left-radius: @block-borderRadius-inner; }
			> .dataList-cell:last-child { border-bottom-right-radius: @block-borderRadius-inner; }
		}
	}

	@{block-noStripSel} > .block-body:last-child > .formRow:last-child,
	.block-bottomRadiusContent.formRow,
	.block-bottomRadiusContent > .formRow:last-child
	{
		> dt { border-bottom-left-radius: @block-borderRadius-inner; }
		> dd { border-bottom-right-radius: @block-borderRadius-inner; }
	}

	@{block-noStripSel} > .block-body:last-child .formSubmitRow:not(.is-sticky),
	@{block-noStripSel} > .formSubmitRow:not(.is-sticky):last-child,
	.block-bottomRadiusContent > .formSubmitRow:not(.is-sticky)
	{
		> dt { border-bottom-left-radius: @block-borderRadius-inner; }
		> dd { border-bottom-right-radius: @block-borderRadius-inner; }

		.formSubmitRow-bar
		{
			border-bottom-left-radius: @block-borderRadius-inner;
			border-bottom-right-radius: @block-borderRadius-inner;
		}
	}
}

.block-header
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-blockHeader();

	.m-clearFix();
	.m-hiddenLinks();

	&.block-header--separated
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}

	.block-desc
	{
		color: fade(@xf-blockHeader--color, 70);
		.m-textColoredLinks();
	}
}

.block-minorHeader
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-blockMinorHeader();

	.m-clearFix();
	.m-hiddenLinks();

	.block-body + &
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}

	.block-desc
	{
		.m-textColoredLinks();
	}

	&--spaced
	{
		margin-top: @xf-paddingSmall;
	}

	&--small
	{
		font-size: @xf-fontSizeSmall;
	}
}

.block-tabHeader
{
	padding: 0;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	.xf-blockTabHeader();
	.m-tabsTogether(xf-default(@xf-blockTabHeader--font-size, @xf-fontSizeNormal));

	.tabs-tab
	{
		padding: @xf-blockPaddingV @xf-blockPaddingH;
		border-bottom: @xf-borderSizeFeature solid transparent;
		.xf-uix_blockTabHeaderTab();

		&:hover
		{
			color: @xf-blockTabHeaderSelected--color;
			background: fade(@xf-blockTabHeaderSelected--color, 10%);
		}

		&.is-active
		{
			background: none;
			.xf-blockTabHeaderSelected();
		}
	}

	.block-tabHeader-extra
	{
		float: right;
		color: inherit;
		font-size: @xf-blockTabHeader--font-size;
		padding: @xf-blockPaddingV @xf-blockPaddingH;
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-blockTabHeader--background-color, transparent),
			xf-default(@xf-blockTabHeader--color, ~""),
			xf-default(@xf-blockTabHeaderSelected--color, ~"")
		);
	}
}

.block-minorTabHeader
{
	padding: 0;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	.xf-blockMinorTabHeader();
	.m-tabsTogether(xf-default(@xf-blockMinorTabHeader--font-size, @xf-fontSizeNormal));

	.tabs-tab
	{
		padding: @xf-blockPaddingV @xf-blockPaddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
		border-bottom: @xf-borderSizeFeature solid transparent;

		&:hover
		{
			color: @xf-blockMinorTabHeaderSelected--color;
		}

		&.is-active
		{
			background: none;
			.xf-blockMinorTabHeaderSelected();
		}
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-blockMinorTabHeader--background-color, transparent),
			xf-default(@xf-blockMinorTabHeader--color, ~""),
			xf-default(@xf-blockMinorTabHeaderSelected--color, ~"")
		);
	}
}

.block-filterBar
{
	padding: (@xf-blockPaddingH / 2) (@xf-blockPaddingH / 2);
	.xf-blockFilterBar();

	&.block-filterBar--standalone
	{
		padding: @xf-paddingMedium @xf-paddingMedium;
		border: @xf-borderSize solid @xf-borderColor;
		border-radius: @block-borderRadius-inner;

		@media (max-width: @xf-responsiveEdgeSpacerRemoval)
		{
			border-radius: 0;
			border-left: none;
			border-right: none;
		}
	}

	.filterBar-filterToggle
	{
		background: mix(
			xf-default(@xf-blockFilterBar--color, @xf-linkColor),
			xf-default(@xf-blockFilterBar--background-color, transparent),
			8%
		);
	}

	.filterBar-filterToggle,
	.filterBar-menuTrigger
	{
		&:hover
		{
			text-decoration: none;
			background: mix(
				xf-default(@xf-blockFilterBar--color, @xf-linkColor),
				xf-default(@xf-blockFilterBar--background-color, transparent),
				16%
			);
		}
	}
}

.block-textHeader
{
	margin: @xf-blockPaddingV/2 0;
	padding: 0;
	font-weight: @xf-fontWeightNormal;
	.xf-blockTextHeader();

	.m-clearFix();
	.m-hiddenLinks();

	&.block-textHeader--scaled
	{
		font-size: inherit;
	}

	.block-textHeader-highlight
	{
		color: @xf-textColor;
	}

	.block-desc
	{
		.m-textColoredLinks();
	}

	&:first-child
	{
		margin-top: 0;
	}
}

.block-formSectionHeader
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-formSectionHeader();

	.m-clearFix();
	.m-hiddenLinks();

	.block-desc
	{
		.m-textColoredLinks();
	}

	.block-container > &:first-child,
	.block-body--collapsible &:first-child,
	.block-header + &
	{
		border-top: none;
	}

	.block-formSectionHeader-aligner
	{
		@_blockPaddingShift: (unit(@xf-formLabelWidth) / 100) * (@xf-blockPaddingH);

		display: inline-block;
		text-align: right;
		min-width: @xf-formLabelWidth;
		min-width: ~"calc((@{xf-formLabelWidth}) - (@{_blockPaddingShift}) - (@{xf-formRowPaddingHInner}) - (@{xf-borderSize}))";
		max-width: 100%;
		
		.menu & {
			display: inline;
			text-align: left;
			min-width: 0;
			padding-left: 0;
		}

		@media (max-width: @xf-formResponsive)
		{
			display: inline;
			text-align: left;
			min-width: 0;
			padding-left: 0;
		}
	}
	
	.menu & {padding-left: @xf-formRowPaddingHOuter;}

	@media (max-width: @xf-formResponsive)
	{
		padding-left: @xf-formRowPaddingHOuter;
	}

	.block-formSectionHeader-multiChecker
	{
		float: right;
	}

	&--small
	{
		font-size: @xf-fontSizeNormal;
	}
}

.block-desc,
.blocks-desc
{
	display: block;
	// font-size: @xf-fontSizeSmaller;
	// font-weight: @xf-fontWeightNormal;
	.xf-uix_categoryDescription();
}

.block-body
{
	.m-listPlain();
	.xf-uix_blockBody();

	&.block-body--collapsible
	{
		.has-no-js & { display: block; }

		.m-transitionFadeDown();
	}

	&.block-body--contained
	{
		overflow: auto;
		max-height: 300px;
		max-height: 70vh;
	}

	&.block-body--containedFixed
	{
		overflow-x: auto;
		max-height: 300px;
	}
}

.block-row
{
	margin: 0;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.m-clearFix();

	&.block-row--toEdge
	{
		padding-left: 0;
		padding-right: 0;
	}

	&.block-row--alt
	{
		.xf-contentAltBase();
	}

	&.block-row--minor
	{
		font-size: @xf-fontSizeSmall;
	}

	&.block-row--separated
	{
		// padding-top: (@xf-blockPaddingV) * 2;
		// padding-bottom: (@xf-blockPaddingV) * 2;
		padding-bottom: @xf-blockPaddingV;
		padding-top: @xf-blockPaddingV;

		+ .block-row
		{
			border-top: @xf-borderSize solid @xf-borderColorLight;
		}
	}

	&.block-row--connectAbove
	{
		padding-bottom: (@xf-blockPaddingV) * 2;

		.block-body > &:last-child
		{
			padding-bottom: @xf-blockPaddingV;
		}
	}

	&.block-row--highlighted
	{
		.xf-contentHighlightBase();
	}

	&.block-row--clickable:hover
	{
		.xf-contentHighlightBase();
	}

	&.is-mod-selected
	{
		background: @xf-inlineModHighlightColor;
	}

	> pre
	{
		&:first-child { margin-top: 0; }
		&:last-child { margin-bottom: 0; }
	}
}

.block-separator
{
	margin: 0;
	padding: 0;
	border: none;
	border-top: @xf-borderSize solid @xf-borderColorLight;
}

.block-footer
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.xf-blockFooter();
	.m-clearFix();

	&:first-child
	{
		border: none;
	}

	[data-app=admin] &
	{
		.block-footer-counter,
		.block-footer-select
		{
			line-height: 30px;
		}
	}

	&:not(.block-footer--split)
	{
		.block-footer-counter
		{
			float: left;
		}

		.block-footer-controls
		{
			float: right;
		}
	}
	
	.block-footer-controls .button,
	.block-footer-counter .button {
		.xf-uix_buttonSmall();
	}

	&.block-footer--split
	{
		display: flex;
		align-items: center;

		.block-footer-main,
		.block-footer-counter
		{
			flex-grow: 1;
		}

		.block-footer-select:not(:last-child)
		{
			margin: 0 1em;
		}

		.block-footer-opposite,
		.block-footer-controls
		{
			margin-left: auto;
		}
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.block-outer
	{
		text-align: center;
	}

	.block-outer-main,
	.block-outer-opposite
	{
		float: none;
		text-align: center;
	}

	.block-outer-main + .block-outer-opposite
	{
		margin-top: @xf-paddingMedium;
	}
}]]></template>
    <template title="core_blockend.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// This contains rules that apply to various block and block-related systems. This file should be included
// after all of the primary definitions to ensure the rules override.

.blockMessage,
.blockStatus,
.block-row
{
	p:first-child
	{
		margin-top: 0;
	}

	p:last-child
	{
		margin-bottom: 0;
	}
}

@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
	.block-container,
	.blockMessage
	{
		margin-left: -@xf-pageEdgeSpacer * .5;
		margin-right: -@xf-pageEdgeSpacer * .5;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.blockStatus
	{
		margin-left: -@xf-pageEdgeSpacer * .5;
		margin-right: -@xf-pageEdgeSpacer * .5;
		border-radius: 0;
		border-right: none;
	}

	.blockMessage.blockMessage--none
	{
		margin-left: 0;
		margin-right: 0;
	}
}]]></template>
    <template title="core_blockmessage.less" type="public" addon_id="XF" version_id="2020034" version_string="2.2.0 Beta 4"><![CDATA[// ############################ BLOCK MESSAGE ###################

.block-rowMessage
{
	margin: @xf-blockPaddingV 0;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.xf-blockBorder();
	border-radius: @xf-blockBorderRadius;

	.m-clearFix();

	&:first-child
	{
		margin-top: 0;
	}

	&:last-child
	{
		margin-bottom: 0;
	}

	&.block-rowMessage--small
	{
		font-size: @xf-fontSizeSmall;
		padding: @xf-blockPaddingV/2 @xf-blockPaddingH/2;
	}

	&.block-rowMessage--center
	{
		text-align: center;
	}

	.m-blockMessageVariants();
}

.blockMessage
{
	margin-bottom: @xf-elementSpacer;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.xf-contentBase();
	.xf-blockBorder();
	border-radius: @xf-blockBorderRadius;
	.xf-uix_blockMessage();

	.m-clearFix();

	//.m-transition(border, margin;); // edgeSpacerRemoval

	&.blockMessage--none
	{
		background: none;
		border: none;
		color: @xf-textColor;
		padding: 0;
		box-shadow: none;
	}

	&.blockMessage--close
	{
		margin-top: 5px;
		margin-bottom: 5px;
	}

	&.blockMessage--small
	{
		font-size: @xf-fontSizeSmall;
		padding: @xf-paddingMedium;
	}

	&.blockMessage--center
	{
		text-align: center;
	}

	.m-blockMessageVariants();
}

.blockMessage--iconic,
.block-rowMessage--iconic
{
	text-align: left;
	position: relative;
	// padding-left: 4em;
	min-height: 4em;
	display: flex;
	align-items: center;

	&:before
	{
		.m-faBase();
		top: 0;
		// left: @xf-blockPaddingV;
		font-size: @xf-uix_iconSizeLarge !important;
		padding-right: @xf-paddingLarge;
	}
}

.m-blockMessageVariants()
{
	// note: the double && is correct here -- it enforces output like ".x.x--variant". The extra specificity helps
	// prevent issues from things like media query overrides.

	&&--highlight
	{
		.xf-contentHighlightBase();
	}
	&--highlight&--iconic:before
	{
		.m-faContent(@fa-var-info-circle);
	}

	&&--important
	{
		.xf-contentAccentBase();
		border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
		padding: @xf-paddingMedium;

		a { .xf-contentAccentLink(); }
	}
	&--important&--iconic:before
	{
		.m-faContent(@fa-var-exclamation-circle);
		color: @xf-textColorAttention;
		color: @xf-important-featureColor;
	}

	&&--alt
	{
		.xf-contentAltBase();
	}

	&&--success
	{
		border-left: @xf-borderSizeFeature solid @xf-successFeatureColor;
		background: @xf-successBg;
		color: @xf-successColor;

		.m-textColoredLinks();
	}
	&--success&--iconic:before
	{
		.m-faContent(@fa-var-check-circle);
		color: @xf-success-featureColor;
	}

	&&--warning
	{
		border-left: @xf-borderSizeFeature solid @xf-warningFeatureColor;
		background: @xf-warningBg;
		color: @xf-warningColor;

		.m-textColoredLinks();
	}
	&--warning&--iconic:before
	{
		.m-faContent(@fa-var-exclamation-triangle);
		color: @xf-warning-featureColor;
	}

	&&--error
	{
		border-left: @xf-borderSizeFeature solid @xf-errorFeatureColor;
		background: @xf-errorBg;
		color: @xf-errorColor;

		.m-textColoredLinks();
	}
	&--error&--iconic:before
	{
		.m-faContent(@fa-var-times-circle);
		color: @xf-error-featureColor;
	}
}]]></template>
    <template title="core_button.less" type="public" addon_id="XF" version_id="2020051" version_string="2.2.0 Release Candidate 1"><![CDATA[// ############################ BUTTONS #################

.button,
button.button
a.button // needed for specificity over a:link
{
	.m-buttonBase();

	.button-text {display: inline-flex; align-items: center;}

	a
	{
		color: inherit;
		text-decoration: none;
	}

	&:hover,
	&:focus {
		.xf-uix_buttonHover();
	}

	&:active {
		.xf-uix_buttonActive();
	}

	.xf-buttonDefault();
	.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));

	&.button--primary
	{
		.xf-buttonPrimary();
		.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonPrimary--background-color, transparent));

		&:hover,
		&:focus {.xf-uix_buttonPrimaryHover();}

		&:active {.xf-uix_buttonPrimaryActive();}
	}

	&.button--cta
	{
		.xf-buttonCta();
		.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonCta--background-color, transparent));

		&:hover,
		&:focus {.xf-uix_buttonCtaHover();}

		&:active {.xf-uix_buttonCtaActive();}
	}

	&.button--link
	{
		// block colors
		// background: @xf-contentBg;
		// color: @xf-linkColor;
		// .m-buttonBorderColorVariation(@xf-borderColor);
		.xf-uix_buttonSmall();
		.xf-uix_buttonLink();

		&:hover,
		&:focus
		{
			text-decoration: none;
			// background: @xf-contentHighlightBg;
			.xf-uix_buttonHover();
		}

		&:active {
			.xf-uix_buttonActive();
		}
	}
	&.button--plain
	{
		background: none;
		color: @xf-linkColor;
		border: none;

		&:hover,
		&:active,
		&:focus
		{
			text-decoration: none;
			background: none;
		}
	}

	&.button--alt
	{
		// block colors
		background-color: @xf-contentHighlightBg;
		color: @xf-linkColor;
		.m-buttonBorderColorVariation(@xf-paletteColor2);

		&:hover,
		&:active,
		&:focus
		{
			background-color: @xf-paletteColor1;
			color: @xf-linkColor;
		}
	}

	&.button--longText
	{
		.m-overflowEllipsis();
		max-width: 100%;
		display: inline-block;
	}

	&.is-disabled
	{
		.xf-buttonDisabled();
		// .m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));

		&:hover,
		&:active,
		&:focus
		{
			.xf-buttonDisabled();
			// background: xf-default(@xf-buttonDisabled--background-color, transparent) !important;
		}
	}

	&.button--scroll
	{
		// background: fade(xf-default(@xf-buttonDefault--background-color, transparent), 75%);
		.xf-buttonPrimary();
		padding: 5px 8px;
		.m-dropShadow();

		&:hover,
		&:focus {.xf-uix_buttonPrimaryHover();}

		&:active {.xf-uix_buttonPrimaryActive();}
	}

	&.button--normal
	{
		font-size: @xf-fontSizeNormal;
	}

	&.button--small
	{
		font-size: @xf-fontSizeSmall;
		padding: 3px 6px;
		.xf-uix_buttonSmall();
	}

	&.button--smaller
	{
		font-size: @xf-fontSizeSmaller;
		padding: 2px 5px;
	}

	&.button--fullWidth
	{
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	&.button--adminStyleAsset
	{
		&.is-disabled
		{
			visibility: hidden;
		}
		&.is-modify
		{
			.m-buttonIcon(@fa-var-pencil);
		}
		&.is-revert
		{
			.m-buttonIcon(@fa-var-history);
		}
	}

	&.button--wrap
	{
		white-space: normal;
	}

	&.button--icon
	{
		> .button-text:before,
		.button-icon
		{
			.m-faBase();
		}

		> .button-text:before,
		> .fa--xf:before,
		.button-icon
		{
			// font-size: 120%;
			font-size: @xf-uix_iconSize;
			vertical-align: -.1em;
			display: inline-block;
			// margin: -.255em 6px -.255em 0;
			margin-right: .2em;
			// content: '';
		}

		> .fa--xf
		{
			// helps fix a button alignment issue (Chrome only)
			line-height: inherit;
		}

		/*
		> .button-text:before
		{
		.m-faBase();
		// font-size: 120%;
		font-size: @xf-uix_iconSize;
		vertical-align: middle;
		display: inline-block;
		// margin: -.255em 6px -.255em 0;
		margin-right: .2em;
	}
		*/

		.button-icon
		{
			height: 1em;
			vertical-align: 0;
		}

		&.button--iconOnly
		{
			> .button-text:before,
			> i.fa--xf:before,
			.button-icon
			{
				margin-left: 0;
				margin-right: 0;
			}
		}

		&.button--padded
		{
			> .button-text:before,
			> i.fa--xf:before,
			.button-icon
			{
				margin-top: 0;
				margin-bottom: 0;
			}
		}

		&--add { 
			.m-buttonIcon(@fa-var-plus-square, 0.88em);  // fa-plus-square
		}
		&--import { 
			.m-buttonIcon(@fa-var-upload, 0.1.13em); // fa-upload
		}
		&--export, &--download { 
			.m-buttonIcon(@fa-var-download, 1.13em); // fa-download
		}
		&--redirect	    {
			.m-buttonIcon(@fa-var-external-link, 1em);
		}
		&--edit	{ 
			.m-buttonIcon(@fa-var-pencil, 1.13em); // fa-pencil
		}
		&--save	{ 
			.m-buttonIcon(@fa-var-save, 0.88em); // fa-floppy-o
		}
		&--delete { 
			.m-buttonIcon(@fa-var-trash-o, 0.79em); 
		}
		&--reply { 
			.m-buttonIcon(@fa-var-mail-reply, 1.13); // fa-reply
		}
		&--quote { 
			.m-buttonIcon(@fa-var-quote-left, 1.13em); 
		}
		&--purchase	{ 
			.m-buttonIcon(@fa-var-shopping-basket, 1.13em); 
		}
		&--payment { 
			.m-buttonIcon(@fa-var-credit-card, 1.13em); 
		}
		&--convert { 
			.m-buttonIcon(@fa-var-flash, .75em); 
		}
		&--search { 
			.m-buttonIcon(@fa-var-search, 1em); 
		}
		&--sort { 
			.m-buttonIcon(@fa-var-sort, 0.63em); 
		}
		&--upload { 
			.m-buttonIcon(@fa-var-upload, 1.13em); 
		}
		&--attach { 
			.m-buttonIcon(@fa-var-paperclip, 1em); 
		}			
		&--login { 
			.m-buttonIcon(@fa-var-lock, 0.88em); 
		}
		&--rate { 
			.m-buttonIcon(@fa-var-star, 1.13em); 
		}
		&--config { 
			.m-buttonIcon(@fa-var-cog, 1em); 
		}
		&--refresh { 
			.m-buttonIcon(@fa-var-refresh, 1em); 
		}
		&--translate { 
			.m-buttonIcon(@fa-var-globe, .97em); 
		}
		&--vote { 
			.m-buttonIcon(@fa-var-check-circle-o, 1em); 
		}
		&--result { 
			.m-buttonIcon(@fa-var-bar-chart-o, 1.15em); 
		}
		&--history { 
			.m-buttonIcon(@fa-var-history, 1em); 
		}
		&--cancel  {
			.m-buttonIcon(@fa-var-ban, 1em); 
		}
		&--close { 
			.m-buttonIcon(@fa-var-times, .69em); 
		}
		&--preview { 
			.m-buttonIcon(@fa-var-eye, 1.13em); 
		}
		&--conversation { 
			.m-buttonIcon(@fa-var-comments-o, 1.13em); 
		}
		&--write { 
			.m-buttonIcon(@fa-var-edit, 1.13em);
		}
		&--download	{ 
			.m-buttonIcon(@fa-var-download, .93em); 
		}
		&--bolt { 
			.m-buttonIcon(@fa-var-bolt, .75em); 
		}
		&--list	{ 
			.m-buttonIcon(@fa-var-list, 1em); 
		}
		&--prev { 
			.m-buttonIcon(@fa-var-chevron-left, .63em); 
		}
		&--next	{ 
			.m-buttonIcon(@fa-var-chevron-right, .63em); 
		}
		&--confirm { 
			.m-buttonIcon(@fa-var-check, 1em); 
		}
		&--disable { 
			.m-buttonIcon(@fa-var-power-off, 1em); 
		}
		&--markRead { 
			.m-buttonIcon(@fa-var-check-square-o, .88em); 
		}
		&--user {
			.m-buttonIcon(@fa-var-user, .88em);
		}
		&--userCircle {
			.m-buttonIcon(@fa-var-user-circle, .97em);
		}
		&--notificationsOn { 
			.m-buttonIcon(@fa-var-bell-o, 1.25em); // actually only .88em, but as we use this as a toggle, make it the same width as bell-slash
		}
		&--notificationsOff { 
			.m-buttonIcon(@fa-var-bell-slash-o, 1.25em); 
		}
		&--show { 
			.m-buttonIcon(@fa-var-eye, 1.25em); // actually only 1.13em, but it's a toggle 
		} 
		&--hide	{
			.m-buttonIcon(@fa-var-eye-slash, 1.25em);
		}
		&--merge { 
			.m-buttonIcon(@fa-var-compress, .88em); 
		}
		&--move { 
			.m-buttonIcon(@fa-var-share, 1.13em); 
		}
		&--copy { 
			.m-buttonIcon(@fa-var-clone, .88em); 
		}
		&--approve, &--unapprove { 
			.m-buttonIcon(@fa-var-shield, 1em); 
		}
		&--delete, &--undelete { 
			.m-buttonIcon(@fa-var-trash-o, .88em); 
		}
		&--stick, &--unstick { 
			.m-buttonIcon(@fa-var-thumb-tack, .75em); 
		}
		&--lock { 
			.m-buttonIcon(@fa-var-lock, .88em); 
		}
		&--unlock { 
			.m-buttonIcon(@fa-var-unlock, .88em); 
		}
		&--bookmark
		{
			.m-buttonIcon(@fa-var-bookmark);

			&.is-bookmarked .button-text:before
			{
				font-weight: @faWeight-solid;
				color: @xf-textColorAttention;
			}
		}		
	}

	&.button--provider
	{
		> .button-text:before,
		.button-icon
		{
			.m-faBase('Brands');
			font-size: 120%;
			vertical-align: middle;
			display: inline-block;
			margin: -4px 6px -4px 0;
		}

		.button-icon
		{
			height: 1em;
			vertical-align: 0;
		}

		&--facebook
		{
			.m-buttonColorVariation(#3B5998, white);
			.m-buttonIcon(@fa-var-facebook, 1em);
			
			.button-text {display: inline;}
		}

		&--twitter
		{
			.m-buttonColorVariation(#1DA1F3, white);
			.m-buttonIcon(@fa-var-twitter, 1em);
		}

		&--google
		{
			.m-buttonColorVariation(white, #444);
			border-color: #e9e9e9;

			> .button-text:before
			{
				display: none;
			}
		}

		&--github
		{
			.m-buttonColorVariation(#666666, white);
			.m-buttonIcon(@fa-var-github, .97em);
		}

		&--linkedin
		{
			.m-buttonColorVariation(#0077b5, white);
			.m-buttonIcon(@fa-var-linkedin, .88em);
		}

		&--microsoft
		{
			.m-buttonColorVariation(#00bcf2, white);
			.m-buttonIcon(@fa-var-windows, .88em);
		}

		&--yahoo
		{
			.m-buttonColorVariation(#410093, white);
			.m-buttonIcon(@fa-var-yahoo, .88em);
		}
	}

	// button-text and button-menu are always children of button--splitTrigger
	// but are defined here for reasons of specificity, as these border colors
	// are overwritten by .m-buttonBorderColorVariation()

	> .button-text { border-right: @xf-borderSize solid transparent; }
	> .button-menu { border-left: @xf-borderSize solid transparent; }

	&.button--splitTrigger
	{
		.m-clearFix();
		padding: 0;
		font-size: 0;
		display: inline-block;

		button.button-text
		{
			background: transparent;
			border: none;
			border-right: @xf-borderSize solid transparent;
			color: inherit;
		}

		> .button-text,
		> .button-menu
		{
			.xf-buttonBase();
			display: inline-block;

			&:hover
			{
				&:after
				{
					opacity: 1;
				}
			}
		}

		> .button-text
		{
			.m-borderRightRadius(0);
		}

		> .button-menu
		{
			.m-borderLeftRadius(0);
			padding-right: xf-default(@xf-buttonBase--padding-right, 0);// * (2/3);
			padding-left: xf-default(@xf-buttonBase--padding-left, 0);// * (2/3);

			&:after
			{
				.m-menuGadget(); // .58em
				opacity: .5;
			}
		}
	}
}

.buttonGroup
{
	display: inline-block;
	vertical-align: top;
	.m-clearFix();

	&.buttonGroup--aligned
	{
		vertical-align: middle;
	}

	> .button
	{
		float: left;

		&:not(:first-child)
		{
			border-left: none;
		}

		&:not(:first-child):not(:last-child)
		{
			border-radius: 0;
		}

		&:first-child:not(:last-child)
		{
			.m-borderRightRadius(0);
		}

		&:last-child:not(:first-child)
		{
			.m-borderLeftRadius(0);
		}
	}

	> .buttonGroup-buttonWrapper
	{
		float: left;

		&:not(:first-child) > .button
		{
			border-left: none;
		}

		&:not(:first-child):not(:last-child) > .button
		{
			border-radius: 0;
		}

		&:first-child:not(:last-child) > .button
		{
			.m-borderRightRadius(0);
		}

		&:last-child:not(:first-child) > .button
		{
			.m-borderLeftRadius(0);
		}
	}
}

.toggleButton
{
	> input
	{
		display: none;
	}

	> span
	{
		.xf-buttonDisabled();
		.m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));
	}

	&.toggleButton--small > span
	{
		font-size: @xf-fontSizeSmaller;
		padding: @xf-paddingSmall;
	}

	> input:checked + span
	{
		.xf-buttonDefault();
		.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));
	}
}

.u-scrollButtons
{
	position: fixed;
	bottom: 30px;
	<xf:if is="property('uix_fab') == 'always'">
	bottom: 100px;
	<xf:elseif is="property('uix_fab') == 'mobile'" />
	@media(max-width: {{ property('uix_fabVw') - 1 }}px ) {
		bottom: 100px;
	}
	</xf:if>
	<xf:if is="(property('uix_visitorTabsMobile') == 'tabbar') && ( property('uix_fab') != 'never' )">
	@media (max-width: @xf-responsiveNarrow) {
		bottom: {{ property('paddingLarge') + 23 + 100 }}px;
}
</xf:if>
right: (@xf-pageEdgeSpacer) / 2;
.has-hiddenscroll &
{
	right: 20px;
}
z-index: @zIndex-9;
.m-transition(opacity; @xf-animationSpeed);
opacity: 0;
display: none;
&.is-transitioning
{
	display: flex;
}
&.is-active
{
	display: flex;
	opacity: 1;
}
.button
{
	font-size: 14px;
	display: flex;
	height: 24px;
	line-height: 24px;
	+ .button
	{
		margin-left: @xf-paddingMedium;
	}
}
}

.block-outer-opposite .button {
	.xf-uix_buttonSmall();
}]]></template>
    <template title="core_categorylist.less" type="public" addon_id="XF" version_id="2020036" version_string="2.2.0 Beta 6"><![CDATA[// ################################ CATEGORY LIST #######################

@_categoryListTogglerWidth: 1em;
@_categoryListTogglerPaddingH: (@xf-blockPaddingH / 2);

.categoryList
{
	display: none;
	.m-listPlain();

	&.is-active
	{
		display: block;
	}
}

.categoryList-item
{
	padding: 0;
	text-decoration: none;
	font-size: @xf-fontSizeNormal;

	&.categoryList-item--small
	{
		font-size: @xf-fontSizeSmall;
	}

	.categoryList
	{
		padding-left: @xf-paddingLarge;
	}
}

.categoryList-itemDesc
{
	display: block;
	font-size: @xf-fontSizeSmaller;
	font-weight: @xf-fontWeightNormal;
	color: @xf-textColorMuted;
	margin-top: -@xf-blockPaddingV;

	.m-overflowEllipsis();
}

.categoryList-header
{
	padding: @xf-blockPaddingV 0;
	margin: 0;
	color: @xf-textColorFeature;
	text-decoration: none;
	font-weight: @xf-fontWeightHeavy;

	&.categoryList-header--muted
	{
		color: @xf-textColorMuted;
	}

	.m-clearFix();
	.m-hiddenLinks();
}

.categoryList-itemRow
{
	display: flex;
	min-width: 0;
	align-items: center;
}

.categoryList-link
{
	display: block;
	flex-grow: 1;
	padding: (@xf-blockPaddingV / 2) @xf-blockPaddingH;
	text-decoration: none;

	.m-overflowEllipsis();

	&:hover
	{
		text-decoration: none;
	}

	&.is-selected
	{
		font-weight: @xf-fontWeightHeavy;
	}

	.categoryList-toggler + &,
	.categoryList-togglerSpacer + &
	{
		padding-left: 0;
	}
}

.categoryList-label
{
	margin-left: auto;
	align-self: center;
	padding-right: @_categoryListTogglerPaddingH;
}

.categoryList-toggler
{
	display: inline-block;
	padding: (@xf-blockPaddingV / 2) @_categoryListTogglerPaddingH;
	text-decoration: none;
	flex-grow: 0;
	line-height: 1;

	&:hover
	{
		text-decoration: none;
	}

	&:after
	{
		.m-faBase();
		// font-size: 80%;
		.m-faContent(@fa-var-chevron-down, @_categoryListTogglerWidth);
	}

	&.is-active:after
	{
		.m-faContent(@fa-var-chevron-up, @_categoryListTogglerWidth);
	}
}

.categoryList-togglerSpacer
{
	display: inline-block;
	visibility: hidden;
	padding: (@xf-blockPaddingV / 2) (@xf-blockPaddingH / 2);

	&:after
	{
		.m-faBase();
		// font-size: 80%;
		.m-faContent(@fa-var-chevron-down, @_categoryListTogglerWidth);
	}
}]]></template>
    <template title="core_contentrow.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ########################################### CONTENT ROWS ############################

@_contentRow-faderHeight: 150px;
@_contentRow-faderCoverHeight: (@_contentRow-faderHeight) / 2;

.contentRow
{
	display: flex;

	&.contentRow--alignMiddle
	{
		align-items: center;
	}

	&.is-deleted
	{
		opacity: .7;

		.contentRow-header,
		.contentRow-title
		{
			text-decoration: line-through;
		}
	}
}

.m-figureFixed(@size)
{
	width: @size;

	img,
	i.fa,
	i.fal,
	i.far,
	i.fas,
	i.fab,
	i.fad,
	.avatar
	{
		max-height: @size;
	}
}

.contentRow-figure
{
	vertical-align: top;
	white-space: nowrap;
	word-wrap: normal;
	text-align: center;

	img,
	i.fa,
	i.fal,
	i.far,
	i.fas,
	i.fab,
	i.fad,
	.avatar
	{
		vertical-align: bottom;
	}

	&.contentRow-figure--fixedBookmarkIcon
	{
		.m-figureFixed(48px);
	}

	&.contentRow-figure--fixedSmall
	{
		.m-figureFixed(60px);
	}

	&.contentRow-figure--fixedMedium
	{
		.m-figureFixed(100px);

		&.contentRow-figure--fixedMedium--fluidWidth
		{
			width: auto;
			max-width: 200px;
		}
	}

	&.contentRow-figure--fixedLarge
	{
		.m-figureFixed(200px);
	}

	&.contentRow-figure--text
	{
		font-size: @xf-fontSizeLargest;
	}
}

.contentRow-figureContainer
{
	position: relative;

	.contentRow-figureSeparated
	{
		position: absolute;
		right: -5px;
		bottom: -5px;

		.m-avatarSize(@avatar-s / 2 + 2px);
	}
}

.contentRow-figureIcon
{
	text-align: center;
	color: @xf-textColorFeature;


	img,
	i.fa,
	i.fal,
	i.far,
	i.fas,
	i.fab,
	i.fad
	{
		width: 64px;
		overflow: hidden;
		white-space: nowrap;
		word-wrap: normal;
		border-radius: @xf-borderRadiusMedium;

		.contentRow-figure--fixedBookmarkIcon &
		{
			width: 48px;
		}
	}
}

.contentRow-main
{
	flex: 1;
	min-width: 0;
	vertical-align: top;
	padding-left: @xf-paddingLarge;

	&:before
	{
		// because of line height, there appears to be extra space at the top of this
		content: '';
		display: block;
		margin-top: -.18em;
	}

	&.contentRow-main--close
	{
		padding-left: @xf-paddingMedium;
	}

	&:first-child
	{
		padding-left: 0;
	}
}

.contentRow-header
{
	margin: 0;
	padding: 0;
	font-weight: @xf-fontWeightHeavy;
	font-size: @xf-fontSizeLarge;
}

.contentRow-title
{
	margin: 0;
	padding: 0;
	font-weight: @xf-fontWeightNormal;
	font-size: @xf-fontSizeLarge;
}

.contentRow-snippet
{
	font-size: @xf-fontSizeSmall;
	margin: .25em 0;
}

.contentRow-muted
{
	color: @xf-textColorMuted;
}

.contentRow-lesser
{
	font-size: @xf-fontSizeSmall;
}

.contentRow-suffix
{
	padding-left: @xf-paddingMedium;
	white-space: nowrap;
	word-wrap: normal;
}

.contentRow-faderContainer
{
	position: relative;
	overflow: hidden;
}

.contentRow-faderContent
{
	max-height: 150px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 100px, transparent 150px);
	mask-image: linear-gradient(to bottom, #000 100px, transparent 150px);
}

.contentRow-fader
{
	position: absolute;
	top: (@_contentRow-faderHeight) + ((@xf-paddingMedium) * 2) - (@_contentRow-faderCoverHeight);
	left: 0;
	right: 0;
	height: @_contentRow-faderCoverHeight;
	@supports not (-webkit-mask-image) or not (mask-image) {
		.m-gradient(fade(@xf-contentBg, 0%), @xf-contentBg, transparent, 0%, 80%);
	}
}

.contentRow-minor
{
	font-size: @xf-fontSizeSmall;
	color: @xf-textColorMuted;

	time {color: @xf-textColorDimmed;}

	&.contentRow-minor--hideLinks
	{
		.m-hiddenLinks();
		a {text-decoration: underline;}
	}

	&.contentRow-minor--smaller
	{
		font-size: @xf-fontSizeSmaller;
	}

	&.contentRow-minor--singleLine
	{
		.m-overflowEllipsis();
	}
}

.contentRow-spaced
{
	margin: .5em 0;

	&:last-child
	{
		margin-bottom: 0;
	}
}

.contentRow-extra
{
	float: right;
	padding-left: @xf-paddingMedium;
	font-size: @xf-fontSizeSmallest;

	&.contentRow-extra--small
	{
		font-size: @xf-fontSizeSmall;
		color: @xf-textColorMuted;
	}

	&.contentRow-extra--normal
	{
		font-size: @xf-fontSizeNormal;
		color: @xf-textColorMuted;
	}

	&.contentRow-extra--large
	{
		font-size: @xf-fontSizeLarge;
		color: @xf-textColorMuted;
	}

	&.contentRow-extra--larger
	{
		font-size: @xf-fontSizeLarger;
		color: @xf-textColorMuted;
	}

	&.contentRow-extra--largest
	{
		font-size: @xf-fontSizeLargest;
		color: @xf-textColorMuted;
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.contentRow-figure
	{
		&.contentRow-figure--fixedBookmarkIcon
		{
			width: @avatar-xs;
		}

		.avatar--s
		{
			.m-avatarSize(@avatar-xs);
		}
	}

	.contentRow--hideFigureNarrow
	{
		.contentRow-figure
		{
			display: none;
		}

		.contentRow-main
		{
			padding-left: 0;
		}
	}
}]]></template>
    <template title="core_datalist.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ################################# DATA LISTS ###################

.dataList
{
	max-width: 100%;

	&.dataList--separated
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
		border-bottom: @xf-borderSize solid @xf-borderColorLight;
	}

	&.dataList--separatedTop
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}

	&.dataList--separatedBottom
	{
		border-bottom: @xf-borderSize solid @xf-borderColorLight;
	}

	&.dataList--contained
	{
		overflow-x: auto;
		max-height: 300px;
		max-height: 85vh;
	}

	&.dataList--containedFixed
	{
		overflow-x: auto;
		max-height: 300px;
	}

	@media (max-width: @xf-responsiveMedium)
	{
		overflow-x: auto;
	}
}

.dataList-table
{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.dataList-rowGroup
{
	&.is-hidden
	{
		display: none;
	}
}

.m-adjustDataListCellPadding(@paddingV; @paddingH)
{
	padding: @paddingV @paddingH;

	&.dataList-cell--action,
	&.dataList-cell--link
	{
		padding: 0;

		a,
		label,
		.dataList-blockLink
		{
			padding: @paddingV @paddingH;
		}
	}
}

.dataList-row
{
	&:hover:not(.dataList-row--noHover):not(.dataList-row--header):not(.is-spHovered),
	.is-spActive &.is-spChecked
	{
		background: fade(@xf-contentHighlightBg, 50%);
	}

	.is-spActive &.is-spHovered
	{
		background: fade(@xf-contentHighlightBg, 75%);
	}

	.is-spActive &:not(.dataList-row--noHover):not(.dataList-row--header):not(.is-spChecked) *
	{
		color: @xf-textColorMuted;
	}

	&.dataList-row--header
	{
		.dataList-cell
		{
			.xf-dataListHeader();
			.m-adjustDataListCellPadding(@xf-dataListPaddingV/2, @xf-dataListPaddingH);
			.m-textColoredLinks();
			text-align: left;

			&.dataList-cell--min
			{
				text-align: center;
			}
		}
	}

	&.dataList-row--subSection
	{
		.dataList-cell
		{
			.xf-dataListSection();
			.m-adjustDataListCellPadding(@xf-dataListPaddingV/2, @xf-dataListPaddingH);

			a { color: inherit; }
		}

		&:hover:not(.dataList-row--noHover) .dataList-cell
		{
			.xf-dataListSection(background);
		}
	}

	&.dataList-row--note
	{
		.dataList-cell
		{
			text-align: center;
		}
	}

	&.dataList-row--deleted
	{
		.dataList-cell
		{
			opacity: .5;
		}
	}

	&.dataList-row--highlighted
	{
		font-weight: @xf-fontWeightHeavy;
	}

	&.dataList-row--custom
	{
		> .dataList-cell:first-child
		{
			border-left: @xf-borderSizeFeature solid red;
		}

		.dataList-cell--link a
		{
			color: red;
		}
	}

	&.dataList-row--parentCustom
	{
		> .dataList-cell:first-child
		{
			border-left: @xf-borderSizeFeature solid orange;
		}

		.dataList-cell--link a
		{
			color: orange;
		}
	}

	&.dataList-row--protected
	{
		> .dataList-cell:first-child
		{
			border-left: @xf-borderSizeFeature solid @xf-borderColorFeature;
		}
	}

	&.is-hidden
	{
		display: none;
	}

	&.dataList-row--disabled
	{
		.dataList-cell--link a
		{
			color: @xf-textColorMuted;
			.m-transition();
		}
	}

	&.dataList-row--opposite,
	&.dataList-row--header.dataList-row--opposite
	{
		.dataList-cell
		{
			text-align: right;

			&:first-of-type
			{
				text-align: left;
			}
		}
	}

	&.dataList-row--opposite,
	&.dataList-row--header.dataList-row--opposite
	{
		.dataList-cell
		{
			text-align: right;

			&:first-of-type
			{
				text-align: left;
			}
		}
	}

	&.dataList-row--opposite,
	&.dataList-row--header.dataList-row--opposite
	{
		.dataList-cell
		{
			text-align: right;

			&:first-of-type
			{
				text-align: left;
			}
		}
	}

	tbody:last-child &:last-child .dataList-cell
	{
		border-bottom: none;
	}
}

.dataList-cell {
	vertical-align: middle;
	padding: @xf-dataListPaddingV @xf-dataListPaddingH;
	border-bottom: @xf-borderSize solid @xf-borderColorFaint;

	&.dataList-cell--main {
		min-width: 180px;
	}

	&.dataList-cell--minWidth {
		min-width: 17vw;
		min-width: ~"min(17vw, 250px)";
	}

	&.dataList-cell--link,
	&.dataList-cell--action {
		padding: 0;
	}

	&.dataList-cell--alt,
	&.dataList-cell--action {
		background: @xf-contentAltBg;
	}

	&.dataList-cell--highlighted {
		background: @xf-contentHighlightBg;
	}

	&.dataList-cell--separated {
		border-left: @xf-borderSize solid @xf-borderColorFaint;
	}

	&.dataList-cell--min,
	&.dataList-cell--action,
	&.dataList-cell--iconic,
	&.dataList-cell-fa
	{
		width: 1%;
		white-space: nowrap;
		word-wrap: normal;
		text-align: center;
	}

	&.dataList-cell--number
	{
		text-align: right;
	}

	&.dataList-cell--number
	{
		text-align: right;
	}

	&.dataList-cell--action {
		font-size: @xf-fontSizeSmaller;
	}

	&.dataList-cell--action,
	&.dataList-cell--link {
		cursor: pointer;
		text-decoration: none;

		&.dataList-cell--alt:hover,
		&.dataList-cell--action:hover {
			background: @xf-contentHighlightBg;
		}

		a,
		label,
		.dataList-blockLink {
			padding: @xf-dataListPaddingV @xf-dataListPaddingH;
			display: block;
			height: 100%;
			text-decoration: none;
			cursor: pointer;
		}

		input {
			cursor: pointer;
		}
	}

	&.dataList-cell--action a:not(.iconic) {
		//	padding: @xf-dataListPaddingV @xf-dataListPaddingH * 2;
	}

	&.dataList-cell--iconic,
	&.dataList-cell--fa
	{
		padding: 0;
		font-size: 125%;
		min-width: 2.5em;
		position: relative;
		text-align: center;
	}

	&.dataList-cell--iconic
	{
		> a.iconic > i
		{
			.iconicIcon(false);
		}

		> .iconic
		{
			position: absolute;

			// fill the cell
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			> i
			{
				&:before,
				&:after
				{
					left: 50%;
					margin-left: -.5em; // half of icon width

					top: 50%;
					margin-top: -.5em; // half of icon height
				}
			}

			> input[type=checkbox] + i
			{
				&:before,
				&:after
				{
					margin-top: -.7em;
					margin-left: -.4375em; // half of .fa-check-square width
				}
			}

			> input[type=radio] + i
			{
				&:before,
				&:after
				{
					margin-top: -.7em;
					margin-left: -.5em; // half of .fa-check-square width
				<?xml version="1.0" encoding="utf-8"?>
<style title="Style By K&W Studio" description="By K&W Studio" user_selectable="1" base_version_id="2020970" export_version="2">
  <assets/>
  <templates>
    <template title="EWRporta_articles.less" type="public" addon_id="" version_id="2101" version_string="2.1.0.1"><![CDATA[.porta-article-pager { margin-top: -(@xf-elementSpacer); }
.porta-article-loader { display: none; text-align: center; }

.porta-article-item
{
	margin-bottom: @xf-elementSpacer;
	
	.porta-article-header
	{
		display: block;
		overflow: hidden;
		position: relative;
		
		.porta-header-image
		{
			background-position: center;
			background-size: cover;
			height: @xf-EWRporta_header_height;
		}
		
		.porta-header-medio
		{
			background-position: center;
			background-size: cover;
			height: @xf-EWRporta_medio_height;
		}
	
		.porta-header-text
		{
			position: absolute; bottom: 0; left: 0; right: 0;
			.xf-EWRporta_header_title;

			>span
			{
				position: absolute; bottom: 0; left: 0; right: 0;
				padding: 0 @xf-elementSpacer;
			}
		}

		.porta-header-play
		{
			position: absolute;
			top: 0; bottom: 20px; left: 0; right: 0;

			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.far
			{
				color: @xf-textColorAttention;
				font-size: 100px;
				text-shadow: 1px 1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, -1px -1px 0 #000000;
			}
		}
	}

	.porta-article-date
	{
		float: left;
		padding: @xf-paddingLarge 0;
		margin-left: @xf-EWRporta_dateblock_margin;

		.porta-date-block
		{
			.xf-messageUserBlock;
			width: 50px;
			padding: 10px;
			text-align: center;
			text-transform: uppercase;
			white-space: nowrap;

			b { display: block; font-size: 1.5em; }
		}
	}

	.message-inner { display: block; }
	.message-body .bbWrapper { display: inline; }
	.block-header { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.porta-masonry
{
	margin: 0 ~"calc(-@{xf-sidebarSpacer} / 2)";
	
	.porta-article-item
	{
		display: inline-block;
		width: ~"calc(100% / @xf-EWRporta_masonry_columns)";
		
		.porta-article-container
		{
			margin: 0 ~"calc(@xf-sidebarSpacer / 2)";
		}
	}
}

.porta-article-status
{
	display: none;
	
	.porta-article-ellipse
	{
		font-size: 20px;
		position: relative;
		width: 4em;
		height: 1em;
		margin: 10px auto;

		.loader-ellipse-dot
		{
			display: block;
			width: 1em;
			height: 1em;
			border-radius: 0.5em;
			background: @xf-textColor;
			position: absolute;
			animation-duration: 0.5s;
			animation-timing-function: ease;
			animation-iteration-count: infinite;
		}

		.loader-ellipse-dot:nth-child(1),
		.loader-ellipse-dot:nth-child(2) { left: 0; }
		.loader-ellipse-dot:nth-child(3) { left: 1.5em; }
		.loader-ellipse-dot:nth-child(4) { left: 3em; }

		@keyframes reveal { from { transform: scale(0.001); } to { transform: scale(1); } }
		@keyframes slide { to { transform: translateX(1.5em) } }

		.loader-ellipse-dot:nth-child(1) { animation-name: reveal; }
		.loader-ellipse-dot:nth-child(2),
		.loader-ellipse-dot:nth-child(3) { animation-name: slide; }
		.loader-ellipse-dot:nth-child(4) { animation-name: reveal; animation-direction: reverse; }
	}
}

@media (max-width: @xf-responsiveWide)
{
	.porta-masonry
	{
		.porta-article-item
		{
			width: ~"calc(100% / @xf-EWRporta_masonry_wide)";
		}
	}
}

@media (max-width: @xf-responsiveMedium)
{
	.porta-masonry
	{
		margin: 0 (-@xf-pageEdgeSpacer / 2);

		.porta-article-item
		{
			width: ~"calc(100% / @xf-EWRporta_masonry_medium)";
			
			.porta-article-date
			{
				margin-left: -10px;
				
				.porta-date-block
				{
					width: auto;
					padding: 10px 5px;
					transform: rotate(180deg);
					writing-mode: vertical-rl;
					
					b { display: inline; font-size: initial; }
				}
			}
		}
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.porta-masonry
	{
		.porta-article-item
		{
			display: block;
			width: 100%;

			.porta-article-container
			{
				margin: 0;
			}
			
			.porta-article-date
			{
				display: none;
			}
		}
	}
}]]></template>
    <template title="MAIL_CONTAINER" type="email" addon_id="XF" version_id="2020032" version_string="2.2.0 Beta 2"><![CDATA[<!DOCTYPE html>
<html lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}" style="font-size: 62.5%;">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<base href="{$xf.options.boardUrl}/">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="format-detection" content="telephone=no">
	<title>{$subject}</title>
</head>
<body dir="{$xf.language.text_direction}" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="bodyTable" border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
	<td align="center" valign="top" id="bodyTableContainer">
		<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="table-layout: fixed;" dir="{$xf.language.text_direction}">
		<tr>
			<td class="header" align="center" valign="top">
				<a href="{{ link('canonical:index') }}">{$xf.options.boardTitle}</a>
			</td>
		</tr>
		<tr>
			<td class="content" align="{{ $xf.isRtl ? 'right' : 'left' }}" valign="top">

{$html|raw}

			</td>
		</tr>
		<tr>
			<td class="footer" align="center" valign="top">
				<div>{{ phrase('visit_board_html', {'board_url': link('canonical:index'), 'board_title': $xf.options.boardTitle}) }}</div>

				<xf:if contentcheck="true">
					<div class="footerExtra"><xf:contentcheck>{{ phrase('email_footer_html') }}</xf:contentcheck></div>
				</xf:if>
			</td>
		</tr>
		</table>
	</td>
</tr>
</table>

</body>
</html>

<mail:text>
{$text}

-----------------------------

{{ phrase('visit_board_text', {'board_title': $xf.options.boardTitle, 'board_url': link('canonical:index')}) }}

{{ phrase('email_footer_text') }}
</mail:text>]]></template>
    <template title="PAGE_CONTAINER" type="public" addon_id="XF" version_id="2020270" version_string="2.2.2"><![CDATA[<!DOCTYPE html>

<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
<xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
<xf:set var="$title"><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" /></xf:set>
<xf:set var="$description"><xf:description /></xf:set>

<xf:set var="$uix_htmlClasses"></xf:set>

<xf:if is="property('uix_pageWidthToggle') != 'disabled'">
	<xf:comment> UI.X width toggle class</xf:comment>
	<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_page--{{$uix_pageWidth}}</xf:set>
</xf:if>

<xf:if is="property('uix_navigationType') == 'sidebarNav'">
	<xf:comment> UI.X sidebar navigation toggle class</xf:comment>
	<xf:if is="!$uix_sidebarNavCollapsed">
		<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} sidebarNav--active</xf:set>
	</xf:if>
</xf:if>

	<meta name="apple-mobile-web-app-title" content="{{ $xf.options.boardShortTitle ?: $xf.options.boardTitle }}">
	<xf:if is="property('publicIconUrl')">
		<link rel="apple-touch-icon" href="{{ base_url(property('publicIconUrl', true)) }}">
	<xf:elseif is="property('publicMetadataLogoUrl')" />
		<link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl')) }}" />
</xf:if>

<xf:if is="property('uix_collapsibleSidebar')">
	<xf:comment> UI.X sidebar toggle class</xf:comment>
	<xf:if is="$uix_sidebarCollapsed">
		<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_sidebarCollapsed</xf:set>
	</xf:if>
</xf:if>

<xf:if is="{$uix_showWelcomeSection}">
	<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_hasWelcomeSection</xf:set>
</xf:if>

<xf:comment>SectionLinks Breakpoints</xf:comment>
<xf:set var="$uix_subNavContentStatic" value="0" />

<xf:comment>--------- COMPONENT MARKUP MACROS ---------
	Markup for components can/should be added here in an XF:set if
	we want the components to have variably set locations
</xf:comment>

<xf:comment> --- Sidebar trigger --- </xf:comment>

<xf:set var="$uix_sidebarTrigger__content">
	<xf:if is="{$sidebar}">
		<xf:if is="property('uix_collapsibleSidebar') && {$uix_canCollapseSidebar}">
			<a class="uix_sidebarTrigger__component uix_sidebarTrigger {{ (property('uix_sidebarTriggerPosition') == 'sectionLinks') ? 'p-navgroup-link' : 'button'}}" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}" rel="nofollow">
				<xf:fa icon="fa-ellipsis-v" class="mdi mdi-dots-vertical" />
				<span class="uix_sidebarTrigger--phrase">{{ phrase('th_sidebar_uix') }}</span>
			</a>
		</xf:if>
		<xf:if is="property('uix_sidebarMobileCanvas')">
			<a class="uix_sidebarCanvasTrigger uix_sidebarTrigger__component p-navgroup-link" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}">
				<xf:fa icon="fa-ellipsis-v" class="mdi mdi-dots-vertical" />
				<span class="uix_sidebarTrigger--phrase">{{ phrase('th_sidebar_uix') }}</span>
			</a>
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_sidebarTrigger__component" arg-location="" arg-content="">
	<xf:if is="({$location} == property('uix_sidebarTriggerPosition')) || ({$location} == 'navigation')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Search bar --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:set var="$uix_search__component">
		<xf:if is="$xf.visitor.canSearch()">
			<div class="uix_searchBar">
				<div class="uix_searchBarInner">
					<form action="{{ link('search/search') }}" method="post" class="uix_searchForm" data-xf-init="quick-search">
						<a class="uix_search--close">
							<xf:fa icon="fa-window-close" />
						</a>
						<xf:textbox autocomplete="off" class="js-uix_syncValue uix_searchInput uix_searchDropdown__trigger" data-uixsync="search" name="keywords" placeholder="{{ phrase('search...') }}" aria-label="{{ phrase('search') }}" data-menu-autofocus="true" />
						<a href="{{ link('search') }}"
						   class="uix_search--settings u-ripple"
						   data-xf-key="{{ phrase('shortcut.search_menu')|for_attr }}"
						   aria-label="{{ phrase('search')|for_attr }}"
						   aria-expanded="false"
						   aria-haspopup="true"
						   title="{{ phrase('search')|for_attr }}">
							<xf:fa icon="fa-cog" />
						</a>
						<span class="<xf:if is="property('uix_searchButton')">uix_search--submit</xf:if> uix_searchIcon">
							<xf:fa icon="fa-search" />
						</span>
						<xf:csrf />
					</form>
				</div>

				<xf:if is="property('uix_searchIconBehavior') != 'dropdown'">
					<a class="uix_searchIconTrigger p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search u-ripple"
					   aria-label="{{ phrase('search') }}"
					   aria-expanded="false"
					   aria-haspopup="true"
					   title="{{ phrase('search') }}">
						<i aria-hidden="true"></i>
					</a>
				</xf:if>

				<xf:if is="property('uix_searchIconBehavior') != 'expand'">
					<a href="{{ link('search') }}"
					   class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search u-ripple js-uix_minimalSearch__target"
					   data-xf-click="menu"
					   aria-label="{{ phrase('search') }}"
					   aria-expanded="false"
					   aria-haspopup="true"
					   title="{{ phrase('search') }}">
						<i aria-hidden="true"></i>
					</a>
				</xf:if>

				<div class="menu menu--structural menu--wide" data-menu="menu" aria-hidden="true">
					<form action="{{ link('search/search') }}" method="post"
						  class="menu-content"
						  data-xf-init="quick-search">
						<h3 class="menu-header">{{ phrase('search') }}</h3>
						<!--[XF:search_menu:above_input]-->
						<div class="menu-row">
							<xf:if is="$searchConstraints">
								<div class="inputGroup inputGroup--joined">
									<xf:textbox name="keywords"
												class="js-uix_syncValue"
												data-uixsync="search"
												placeholder="{{ phrase('search...') }}"
												aria-label="{{ phrase('search') }}"
												data-menu-autofocus="true" />
									<xf:select name="constraints"
											   class="js-quickSearch-constraint"
											   aria-label="{{ phrase('search_within') }}">
										<xf:option value="">{{ phrase('everywhere') }}</xf:option>
										<xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint">
											<xf:option value="{$constraint|json}">{$constraintName}</xf:option>
										</xf:foreach>
									</xf:select>
								</div>
								<xf:else />
								<xf:textbox name="keywords"
											class="js-uix_syncValue"
											data-uixsync="search"
											placeholder="{{ phrase('search...') }}"
											aria-label="{{ phrase('search') }}"
											data-menu-autofocus="true" />
							</xf:if>
						</div>

						<!--[XF:search_menu:above_title_only]-->
						<div class="menu-row">
							<xf:checkbox standalone="true">
								<xf:option name="c[title_only]">
									<xf:label>
										{{ phrase('search_titles_only') }}

										<xf:if is="$xf.options.enableTagging">
											<span tabindex="0" role="button"
												  data-xf-init="tooltip" data-trigger="hover focus click" title="{{ phrase('tags_will_also_be_searched') }}">

												<xf:fa icon="far fa-question-circle" class="u-muted u-smaller" />
											</span>
										</xf:if>
									</xf:label>
								</xf:option>
							</xf:checkbox>
						</div>
						<!--[XF:search_menu:above_member]-->
						<div class="menu-row">
							<div class="inputGroup">
								<span class="inputGroup-text" id="ctrl_search_menu_by_member">{{ phrase('by:') }}</span>
								<input type="text" class="input" name="c[users]" data-xf-init="auto-complete" placeholder="{{ phrase('member')|for_attr }}" aria-labelledby="ctrl_search_menu_by_member" />
							</div>
						</div>
						<div class="menu-footer">
							<span class="menu-footer-controls">
								<xf:button type="submit" class="button--primary" icon="search" />
								<xf:button href="{{ link('search') }}">{{ phrase('advanced_search...') }}</xf:button>
							</span>
						</div>

						<xf:csrf />
					</form>
				</div>


				<div class="menu menu--structural menu--wide uix_searchDropdown__menu" aria-hidden="true">
					<form action="{{ link('search/search') }}" method="post"
						  class="menu-content"
						  data-xf-init="quick-search">
						<!--[XF:search_menu:above_input]-->
						<xf:if is="$searchConstraints">
							<div class="menu-row">

								<div class="inputGroup">
									<input name="keywords"
										   class="js-uix_syncValue"
										   data-uixsync="search"
										   placeholder="{{ phrase('search...') }}"
										   aria-label="{{ phrase('search') }}"
										   type="hidden" />
									<xf:select name="constraints"
											   class="js-quickSearch-constraint"
											   aria-label="{{ phrase('search_within') }}">
										<xf:option value="">{{ phrase('everywhere') }}</xf:option>
										<xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint">
											<xf:option value="{$constraint|json}">{$constraintName}</xf:option>
										</xf:foreach>
									</xf:select>
								</div>
							</div>
							<xf:else />
							<input name="keywords"
								   class="js-uix_syncValue"
								   data-uixsync="search"
								   placeholder="{{ phrase('search...') }}"
								   aria-label="{{ phrase('search') }}"
								   type="hidden" />
						</xf:if>

						<!--[XF:search_menu:above_title_only]-->
						<div class="menu-row">
							<xf:checkbox standalone="true">
								<xf:option name="c[title_only]">
									<xf:label>
										{{ phrase('search_titles_only') }}

										<xf:if is="$xf.options.enableTagging">
											<span tabindex="0" role="button"
												  data-xf-init="tooltip" data-trigger="hover focus click" title="{{ phrase('tags_will_also_be_searched') }}">

												<xf:fa icon="far fa-question-circle" class="u-muted u-smaller" />
											</span>
										</xf:if>
									</xf:label>
								</xf:option>
							</xf:checkbox>
						</div>
						<!--[XF:search_menu:above_member]-->
						<div class="menu-row">
							<div class="inputGroup">
								<span class="inputGroup-text">{{ phrase('by:') }}</span>
								<input class="input" name="c[users]" data-xf-init="auto-complete" placeholder="{{ phrase('member') }}" />
							</div>
						</div>
						<div class="menu-footer">
							<span class="menu-footer-controls">
								<xf:button type="submit" class="button--primary" icon="search" />
								<xf:button href="{{ link('search') }}" rel="nofollow">{{ phrase('th_advanced_uix...') }}</xf:button>
							</span>
						</div>

						<xf:csrf />
					</form>
				</div>
			</div>
		</xf:if>
	</xf:set>
</xf:if>

<xf:macro name="uix_search__component" arg-content="!" arg-location="!">
	<xf:if is="(property('uix_searchPosition') == {$location}) || ({$location} == 'navigation')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- whats new --- </xf:comment>

<xf:if is="!property('uix_removeWhatsNewButtons')">
<xf:set var="$uix_whatsNew__component">
	<a href="{{ link('whats-new') }}"
	   class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
	   title="{{ phrase('whats_new')|for_attr }}">
		<i aria-hidden="true"></i>
		<span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
	</a>
</xf:set>
</xf:if>

<xf:macro name="uix_whatsNew__component" arg-content="!" arg-location="!">
	<xf:if is="({$xf.visitor.user_id} && property('uix_userTabsPosition') == {$location}) || ({$location} == 'navigation')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- login tabs --- </xf:comment>

<xf:set var="$uix_loginTabs__component">
	<xf:if is="{$template} != 'login'">
		<xf:if is="property('uix_loginStyle') == 'dropdown'">
			<a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn" data-xf-click="menu">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
			<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true" data-href="{{ link('login') }}"></div>
		<xf:elseif is="property('uix_loginStyle') == 'modal'" />
			<a href="{{ link('login') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" data-xf-click="overlay" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
		<xf:elseif is="property('uix_loginStyle') == 'link'" />
			<a href="{{ link('login') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
		<xf:elseif is="property('uix_loginStyle') == 'slidingPanel'" />
			<a href="{{ link('login') }}" id="uix_loginPanel--trigger" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" rel="nofollow" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
			</a>
		</xf:if>
	</xf:if>
	<xf:if is="{$template} != 'register_form'">
		<xf:if is="property('uix_loginStyle') != 'link'">
			<a href="{{ link('register') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--register" data-xf-click="overlay" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
			</a>
		<xf:else />
			<a href="{{ link('register') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--register" data-follow-redirects="on">
				<i></i>
				<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
			</a>
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_loginTabs__component" arg-content="!" arg-location="!">
	<xf:if is="property('uix_loginTriggerPosition') == {$location} || ({$location} == 'navigation')">
		<xf:if is="{$location} == 'tablinks'">
		</xf:if>
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- user tabs --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:set var="$uix_userTabs__component">
		<xf:if is="$xf.visitor.user_state == 'rejected' OR $xf.visitor.user_state == 'disabled'">
			<a href="{{ link('account') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--user">
				<xf:avatar user="$xf.visitor" size="xxs" href="" title="" />
				<span class="p-navgroup-linkText">{$xf.visitor.username}</span>
			</a>

			<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="p-navgroup-link">
				<span class="p-navgroup-linkText">{{ phrase('log_out') }}</span>
			</a>
			<xf:else />
			<a href="{{ link('account') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--user"
			   data-xf-click="menu"
			   data-xf-key="{{ phrase('shortcut.visitor_menu')|for_attr }}"
			   data-menu-pos-ref="< .p-navgroup"
			   title="{$xf.visitor.username}"
			   aria-expanded="false"
			   aria-haspopup="true">
				<xf:avatar user="$xf.visitor" size="xxs" href="" title="" />
				<span class="p-navgroup-linkText">{$xf.visitor.username}</span>
			</a>
			<div class="menu menu--structural menu--wide menu--account" data-menu="menu" aria-hidden="true"
				 data-href="{{ link('account/visitor-menu') }}"
				 data-load-target=".js-visitorMenuBody">
				<div class="menu-content js-visitorMenuBody">
					<div class="menu-row">
						{{ phrase('loading...') }}
					</div>
				</div>
			</div>

			<a href="{{ link('conversations') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}"
			   data-badge="{$xf.visitor.conversations_unread|number}"
			   data-xf-click="menu"
			   data-xf-key="{{ phrase('shortcut.conversations_menu')|for_attr }}"
			   data-menu-pos-ref="< .p-navgroup"
			   title="{{ phrase('conversations')|for_attr }}"
			   aria-label="{{ phrase('inbox')|for_attr }}"
			   aria-expanded="false"
			   aria-haspopup="true">
				<i aria-hidden="true"></i>
				<span class="p-navgroup-linkText">{{ phrase('nav_inbox') }}</span>
			</a>
			<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
				 data-href="{{ link('conversations/popup') }}"
				 data-nocache="true"
				 data-load-target=".js-convMenuBody">
				<div class="menu-content">
					<h3 class="menu-header">{{ phrase('conversations') }}</h3>
					<div class="js-convMenuBody">
						<div class="menu-row">{{ phrase('loading...') }}</div>
					</div>
					<div class="menu-footer menu-footer--split">
						<div class="menu-footer-main">
							<ul class="listInline listInline--bullet">
								<li><a href="{{ link('conversations') }}">{{ phrase('show_all') }}</a></li>
								<xf:if is="$xf.visitor.canStartConversation()">
									<li><a href="{{ link('conversations/add') }}">{{ phrase('start_new_conversation') }}</a></li>
								</xf:if>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<a href="{{ link('account/alerts') }}"
			   class="p-navgroup-link u-ripple p-navgroup-link--iconic p-navgroup-link--alerts js-badge--alerts badgeContainer{{ $xf.visitor.alerts_unviewed ? ' badgeContainer--highlighted' : '' }}"
			   data-badge="{$xf.visitor.alerts_unviewed|number}"
			   data-xf-click="menu"
			   data-xf-key="{{ phrase('shortcut.alerts_menu')|for_attr }}"
			   data-menu-pos-ref="< .p-navgroup"
			   title="{{ phrase('alerts')|for_attr }}"
			   aria-label="{{ phrase('alerts')|for_attr }}"
			   aria-expanded="false"
			   aria-haspopup="true">
				<i aria-hidden="true"></i>
				<span class="p-navgroup-linkText">{{ phrase('nav_alerts') }}</span>
			</a>
			<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
				 data-href="{{ link('account/alerts-popup') }}"
				 data-nocache="true"
				 data-load-target=".js-alertsMenuBody">
				<div class="menu-content">
					<h3 class="menu-header">{{ phrase('alerts') }}</h3>
					<div class="js-alertsMenuBody">
						<div class="menu-row">{{ phrase('loading...') }}</div>
					</div>
					<div class="menu-footer menu-footer--split">
						<div class="menu-footer-main">
							<ul class="listInline listInline--bullet">
								<li><a href="{{ link('account/alerts') }}">{{ phrase('show_all') }}</a></li>
								<li><a href="{{ link('account/alerts/mark-read') }}" class="js-alertsMarkRead">{{ phrase('mark_read') }}</a></li>
								<li><a href="{{ link('account/preferences') }}">{{ phrase('preferences') }}</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</xf:if>
	</xf:set>
</xf:if>

<xf:macro name="uix_userTabs__component" arg-content="!" arg-location="!">
	<xf:if is="property('uix_userTabsPosition') == {$location} || ({$location} == 'navigation')">
		<xf:if is="{$location} == 'tablinks'">
		</xf:if>
		{$content}
	</xf:if>
</xf:macro>

<xf:set var="$uix_socialMediaContent">
	<xf:include template="uix_socialMedia" />
</xf:set>

<xf:macro name="uix_socialMedia__component" arg-content="" arg-location="">
	<xf:if is="(property('uix_socialMediaPosition') == {$location}) || ({$location} == 'copyright')">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Visitor tabs --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="" arg-searchContent="!" arg-location="!" arg-whatsNewContent="!" arg-visitorContent="!" arg-loginTabsContent="!">
		<xf:if contentcheck="true">
			<xf:contentcheck>
				<xf:if contentcheck="true">
					<div class="p-navgroup p-account {{ $xf.visitor.user_id ? 'p-navgroup--member' : 'p-navgroup--guest' }}">
						<xf:contentcheck>
							<xf:if is="$xf.visitor.user_id">
								<xf:macro name="uix_userTabs__component" arg-content="{$visitorContent}" arg-location="{$location}" />
								<xf:else />
								<xf:macro name="uix_loginTabs__component" arg-content="{$loginTabsContent}" arg-location="{$location}" />
							</xf:if>
						</xf:contentcheck>
					</div>
				</xf:if>
				<xf:if contentcheck="true">
					<div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}">
						<xf:contentcheck>
							<xf:macro name="uix_whatsNew__component" arg-content="{$whatsNewContent}" arg-location="{$location}" />
							<xf:macro name="uix_search__component" arg-content="{$searchContent}" arg-location="{$location}" />
						</xf:contentcheck>
					</div>
				</xf:if>
				<xf:macro name="uix_socialMedia__component" arg-content="{$socialMediaContent}" arg-location="{$location}" />
			</xf:contentcheck>
		</xf:if>
	</xf:macro>
</xf:if>

<xf:comment> --- Titlebar --- </xf:comment>

<xf:set var="$uix_titlebar__component">
	<xf:if is="!{$uix_hidePageTitle} || ( {$pageAction} && !property('uix_pageActionBreadcrumb') && (!property('uix_removePageAction') || {{ !in_array({$template}, ['forum_list', 'forum_new_posts', 'thtopics_forum_newest_posts', 'thtrending_trending_view', 'thtopics_forum_latest_threads', 'thtopics_topic_list']) }} )
			   )">
		<xf:if is="$headerHtml is not empty">
			<div class="p-body-header">
				<div class="pageContent">
					{$headerHtml|raw}
				</div>
			</div>
			<xf:elseif contentcheck="true" />
			<div class="p-body-header">
				<div class="pageContent">
					<xf:contentcheck>
						<xf:if contentcheck="true">
							<div class="uix_headerInner">
								<xf:contentcheck>
									<xf:if contentcheck="true">
										<div class="p-title {{ $noH1 ? 'p-title--noH1' : '' }}">
											<xf:contentcheck>
												<xf:if is="!$noH1">
													<h1 class="p-title-value">{$h1}</h1>
												</xf:if>
											</xf:contentcheck>
										</div>
									</xf:if>

									<xf:if is="$description is not empty">
										<div class="p-description">{$description}</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</xf:if>
						<xf:if contentcheck="true">
							<div class="uix_headerInner--opposite">
								<xf:contentcheck>
									<xf:if is="!property('uix_pageActionBreadcrumb') && (!property('uix_removePageAction') || ({$template} != 'forum_list') )">
										<xf:if contentcheck="true">
											<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
										</xf:if>
									</xf:if>
									<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="titlebar" />
								</xf:contentcheck>
							</div>
						</xf:if>
					</xf:contentcheck>
				</div>
			</div>
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_titlebar__component" arg-location="!" arg-content="!">
	<xf:if is="property('uix_titlebarLocation') === {$location}">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Sidebar --- </xf:comment>

<xf:set var="$uix_sidebar__component">
	<xf:if is="$sidebar">
		<div uix_component="MainSidebar" class="p-body-sidebar">
			<div data-ocm-class="offCanvasMenu-backdrop"></div>
			<div class="uix_sidebarInner {{ (property('uix_stickySidebar') == 'top') ? ' uix_stickyBodyElement' : '' }}">
				<div class="uix_sidebar--scroller">
					<xf:ad position="container_sidebar_above" />
					<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="sidebar" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
					<xf:foreach loop="$sidebar" value="$sidebarHtml">
						{$sidebarHtml}
					</xf:foreach>
					<xf:ad position="container_sidebar_below" />
				</div>
			</div>
		</div>
	</xf:if>
</xf:set>

<xf:macro name="uix_sidebar__component" arg-location="!" arg-content="!">
	<xf:if is="property('uix_sidebarLocation') === {$location}">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- Logo --- </xf:comment>

<xf:set var="$srcset">{{ property('publicLogoUrl2x') ? base_url(property('publicLogoUrl2x')) . ' 2x' : '' }}</xf:set>

<xf:set var="$uix_logo__component">
	<div class="p-header-logo p-header-logo--image">
		<a class="uix_logo" href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
			<xf:if is="property('publicLogoUrl') || property('publicLogoUrl2x')">
				<img src="{{ base_url(property('publicLogoUrl')) }}" srcset="{$srcset}" alt="{$xf.options.boardTitle}"
					 width="{{ property('publicLogoWidth') ?: '' }}" height="{{ property('publicLogoHeight') ?: '' }}" />
				<xf:else />
				<div class="uix_logo--text"><xf:if is="{{ property('uix_logoIcon') }}"><i class="{{ property('uix_logoIcon') }} uix_logoIcon"></i></xf:if>{{ property('uix_logoText') }}</div>
			</xf:if>
		</a>
		<xf:if is="property('uix_logoSmall')">
			<a class="uix_logoSmall" href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
				<img src="{{ base_url(property('uix_logoSmall')) }}"
					 alt="{$xf.options.boardTitle}"
					 />
			</a>
		</xf:if>
	</div>
</xf:set>

<xf:macro name="uix_logo__component" arg-content="!">
	{$content}
</xf:macro>

<xf:comment> --- staff bar --- </xf:comment>

<xf:set var="$uix_staffbar__component">
	<xf:if contentcheck="true">
		<div class="p-staffBar <xf:if is="{{ property('uix_stickyStaffBar') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-xf-init="{{ property('uix_stickyStaffBar') ? 'sticky-header' : ''}}">
			<div class="pageContent">
				<xf:contentcheck>
					<xf:macro name="uix_socialMedia__component" arg-content="{$uix_socialMediaContent}" arg-location="staffBarLeft" />
					<xf:if contentcheck="true">
						<xf:comment> --- add primary side staff bar content here ---</xf:comment>
						<xf:set var="$uix_alwaysStaffBar" value="1" />
						<div class="p-staffBar-inner hScroller" data-xf-init="h-scroller">
							<div class="hScroller-scroll">
								<xf:contentcheck>
									<xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
										<a href="{{ link('approval-queue') }}" class="p-staffBar-link badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}">
											{{ phrase('approval_queue') }}
										</a>
									</xf:if>

									<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total">
										<a href="{{ link('reports') }}"
										   class="p-staffBar-link badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}"
										   data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}"
										   title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:')|for_attr . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
									</xf:if>

									<xf:if contentcheck="true">
										<a class="p-staffBar-link menuTrigger" data-xf-key="alt+m" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('moderator') }}</a>
										<div class="menu" data-menu="menu" aria-hidden="true">
											<div class="menu-content">
												<h4 class="menu-header">{{ phrase('moderator_tools') }}</h4>
												<xf:contentcheck>
													<!--[XF:mod_tools_menu:top]-->
													<xf:if is="$xf.visitor.is_moderator">
														<a href="{{ link('approval-queue') }}" class="menu-linkRow">{{ phrase('approval_queue') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
														<a href="{{ link('reports') }}" class="menu-linkRow" title="{{ $xf.session.reportCounts.lastBuilt ? 'Last report update: ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
													</xf:if>
													<!--[XF:mod_tools_menu:bottom]-->
												</xf:contentcheck>
											</div>
										</div>
									</xf:if>

									<xf:if is="$xf.visitor.is_admin">
										<a href="{{ base_url('admin.php') }}" class="p-staffBar-link" target="_blank">{{ phrase('admin') }}</a>
									</xf:if>

									<xf:if contentcheck="true">
										<a href="{{ base_url('admin.php') }}" target="_blank" class="p-staffBar-link menuTrigger uix_adminTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">
											<xf:if is="$xf.visitor.is_admin">
												{{ phrase('admin') }}
												<xf:else />
												{{ phrase('moderator') }}
											</xf:if>
										</a>
										<div class="menu" data-menu="menu" aria-hidden="true">
											<div class="menu-content">
												<h4 class="menu-header">{{ phrase('moderator_tools') }}</h4>
												<xf:contentcheck>
													<!--[XF:mod_tools_menu:top]-->
													<xf:if is="$xf.visitor.is_admin">
														<a href="{{ base_url('admin.php') }}" target="_blank" class="menu-linkRow">{{ phrase('admin') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator">
														<a href="{{ link('approval-queue') }}" class="menu-linkRow">{{ phrase('approval_queue') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
														<a href="{{ link('reports') }}" class="menu-linkRow" title="{{ $xf.session.reportCounts.lastBuilt ? 'Last report update: ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
														<a href="{{ link('approval-queue') }}" class="menu-linkRow badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}">
															{{ phrase('approval_queue') }}
														</a>
													</xf:if>

													<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total">
														<a href="{{ link('reports') }}"
														   class="menu-linkRow badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}"
														   data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}"
														   title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update') . date_time($xf.session.reportCounts.lastBuilt) : '' }}">
															{{ phrase('reports') }}
														</a>
													</xf:if>
													<!--[XF:mod_tools_menu:bottom]-->
												</xf:contentcheck>
											</div>
										</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</div>
					</xf:if>

					<xf:if contentcheck="true">
						<div class="p-nav-opposite">
							<xf:if is="property('uix_staffBarBreakpoint') != '100%'">
								<xf:set var="$uix_responsiveStaffBar" value="1" />
								<xf:else />
								<xf:set var="$uix_alwaysStaffBar" value="1" />
							</xf:if>
							<xf:contentcheck>
								<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="staffBar" />
							</xf:contentcheck>
						</div>
					</xf:if>

				</xf:contentcheck>
			</div>
		</div>
	</xf:if>
</xf:set>

<xf:if is="!{$uix_alwaysStaffBar} && {$uix_responsiveStaffBar}">
	<xf:set var="$uix_htmlClasses">{$uix_htmlClasses} uix_responsiveStaffBar</xf:set>
</xf:if>

<xf:macro name="uix_staffbar__component" arg-content="!">
	{$content}
</xf:macro>

<xf:comment> --- section links --- </xf:comment>

<xf:if is="!{$uix_hideNavigation}">
	<xf:set var="$subNavHtml">
		<xf:if contentcheck="true">
			<div class="p-sectionLinks">
				<div class="pageContent">
					<xf:contentcheck>
						<xf:if is="property('uix_viewportWidthRemoveSubNav') != '100%'">
							<xf:if is="$selectedNavChildren is not empty">
								<xf:set var="$uix_subNavContentStatic" value="1" />
								<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_hasSectionLinks</xf:set>
								<div class="p-sectionLinks-inner hScroller" data-xf-init="h-scroller">
									<div class="hScroller-scroll">
										<ul class="p-sectionLinks-list">
											<xf:foreach loop="$selectedNavChildren" key="$navId" value="$navEntry" i="$i">
												<li>
													<xf:macro name="nav_entry" arg-navId="{$navId}" arg-nav="{$navEntry}" arg-shortcut="alt+{$i}" />
												</li>
											</xf:foreach>
										</ul>
									</div>
								</div>
							</xf:if>
							<xf:if contentcheck="true">
								<div class="p-nav-opposite">
									<xf:contentcheck>
										<xf:if contentcheck="true">
											<xf:set var="$uix_subNavContentStatic" value="1" />
											<xf:contentcheck>
												<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="tablinks" />
											</xf:contentcheck>
										</xf:if>
										<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="sectionLinks" />
									</xf:contentcheck>
								</div>
							</xf:if>
						</xf:if>
					</xf:contentcheck>
				</div>
			</div>
			<xf:elseif is="{$selectedNavEntry}" />
			<div class="p-sectionLinks p-sectionLinks--empty"></div>
		</xf:if>
	</xf:set>
</xf:if>

<xf:comment> --- UIX sidebar navigation --- </xf:comment>

<xf:set var="$uix_sidebarNav__component">
	<div class="uix_sidebarNav">
		<div class="uix_sidebarNav__inner {{ property('uix_stickySidenav') ? 'uix_stickyBodyElement' : '' }}">
			<div class="uix_sidebar--scroller">
				<xf:if contentcheck="true">
					<ul class="uix_sidebarNavList js-offCanvasNavSource">
						<xf:contentcheck>
							<xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
								<li class="uix_sidebarNavList__listItem">
									<xf:macro name="nav_entry"
											  arg-sidebarNav="1"
											  arg-navId="{$navSection}"
											  arg-nav="{$navEntry}"
											  arg-selected="{{ $navSection == $pageSection }}"
											  arg-shortcut="{$i}"/>
								</li>
							</xf:foreach>
						</xf:contentcheck>
					</ul>
				</xf:if>
				<xf:if is="$xf.visitor.user_id">
					<ul class="uix_sidebarNavList">
						<li><div class="p-navEl {{$uix_myAccountLinks == 'profile' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="profile" href="{{ link('members', $xf.visitor) }}" class="p-navEl-link">{{ phrase('th_profile_uix') }}</a></div></div></li>
						<li><div class="p-navEl {{$uix_myAccountLinks == 'alerts' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="alerts" href="{{ link('account/alerts') }}" class="p-navEl-link">{{ phrase('alerts')}}</a></div></div></li>
						<li><div class="p-navEl {{$uix_myAccountLinks == 'settings' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="settings" href="{{ link('account/preferences') }}" class="p-navEl-link">{{ phrase('settings')}}</a></div></div></li>
					</ul>
				</xf:if>
				<xf:if contentcheck="true">
					<div class="uix_sidebarNav__inner__widgets">
						<xf:contentcheck>
							{$uix_sidebarNavWidgets|raw}
						</xf:contentcheck>
					</div>
				</xf:if>
			</div>
		</div>
	</div>
</xf:set>

<xf:macro name="uix_sidebarNav__component" arg-content="!">
	{$content}
</xf:macro>

<xf:comment> --- UIX main tab component --- </xf:comment>

<xf:set var="$uix_mainTabsOffset">
	[
		{
			"breakpoint": "0",
			"offset": "0"
		}
	<xf:if is="{$uix_responsiveStaffBar} && !{$uix_alwaysStaffBar}">
	,{
		"breakpoint": "{{ property('uix_staffBarBreakpoint')|escape('json') }}",
		"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
	}	
	</xf:if>
	<xf:if is="{$uix_alwaysStaffBar}">
	,{
		"breakpoint": "0",
		"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
	}	
	</xf:if>
	<xf:if is="{{property('publicNavSticky')}} != 'none'">
			,{
				"breakpoint": "0",
				"offset": "{{property('uix_stickyNavHeight')|escape('json')}}"
			}		
	<xf:if is="{{property('publicNavSticky')}} == 'all' && {$uix_subNavContentStatic}" />		
			,{
				"breakpoint": "{{ property('uix_viewportWidthRemoveSubNav')|escape('json') }}",
				"offset": "{{(property('uix_stickySectionLinkHeight'))|escape('json')}}"
			}
	</xf:if>
	]
</xf:set>

<xf:set var="$uix_mainTabComponent">
	<xf:if contentcheck="true">
		<div data-xf-init="{{ property('uix_mainTabsSticky') ? 'sticky-header' : ''}}" class="block uix_mainTabBar {{ (property('uix_mainTabsSticky') && property('uix_removeHeaderWrapper')) ? 'uix_stickyBar' : ''}}" data-top-offset-breakpoints="{$uix_mainTabsOffset|for_attr}">
			<div class="block-tabHeader tabs hScroller" data-xf-init="h-scroller">
				<span class="hScroller-scroll">
					<xf:contentcheck>
						<xf:if is="{$uix_mainTabSets}">
							<xf:set var="$uix_hasMainTabs" value="1" />
							<xf:macro template="uix_mainTabSets" name="{$uix_mainTabSets}" arg-activeTab="{$uix_mainTabActive}" />
						</xf:if>
					</xf:contentcheck>
				</span>
			</div>
		</div>
	</xf:if>
</xf:set>

<xf:macro name="uix_mainTabComponent" arg-content="!" arg-location="!">
	<xf:if is="property('uix_tabBarLocation') === {$location} && property('uix_enableMainTabs')">
		{{$content}}
	</xf:if>
</xf:macro>

<xf:comment> --- Canvases --- </xf:comment>

<xf:macro name="uix_canvasTab" arg-icon="!" arg-location="!" arg-canvas="!" arg-type="!">
	<xf:if is="{$location} == {$canvas}">
		<div class="uix_canvasTab uix_canvasTab__{{$type}}" data-target="uix_canvasPanel__{{$type}}">
			<xf:fa icon="fa-{$icon}" />
		</div>
	</xf:if>
</xf:macro>

<xf:macro name="uix_canvasTabs" arg-location="!">
	<div class="uix_canvas__tabs">
		<xf:macro name="uix_canvasTab" arg-icon="list" arg-type="navigation" arg-location="{{property('uix_canvas_location_navigation')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="grid" arg-type="sidebar" arg-location="{{property('uix_canvas_location_sidebar')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="user" arg-type="account" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="email" arg-type="conversations" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="alert" arg-type="alerts" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
		<xf:macro name="uix_canvasTab" arg-icon="star" arg-type="custom" arg-location="{{property('uix_canvas_location_custom')}}" arg-canvas="{$location}"/>
	</div>
</xf:macro>

<xf:comment>
	<xf:set var="$uix_whatsNew__component">
		<a href="{{ link('whats-new') }}"
		   class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
		   aria-label="{{ phrase('whats_new')|for_attr }}"
		   title="{{ phrase('whats_new') }}">
			<i aria-hidden="true"></i>
			<span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
		</a>
	</xf:set>

	<xf:macro name="uix_whatsNew__component" arg-content="!" arg-location="!">
		<xf:if is="property('uix_userTabsPosition') == {$location}">
			{$content}
		</xf:if>
	</xf:macro>
</xf:comment>

<xf:comment> --- breadcrumb --- </xf:comment>

<xf:if is="!{$uix_hideBreadcrumb}">
	<xf:set var="$uix_breadcrumbCrumbContent">
		<xf:set var="$position" value="{{ 0 }}" />

		<xf:set var="$rootBreadcrumb" value="{$navTree.{$xf.options.rootBreadcrumb}}" />
		<xf:if is="$rootBreadcrumb AND $rootBreadcrumb.href != $xf.uri AND $rootBreadcrumb.href != $xf.fullUri">
			<xf:set var="$position" value="{{ $position + 1 }}" />
			<xf:macro name="crumb"
					  arg-position="{$position}"
					  arg-href="{$rootBreadcrumb.href}"
					  arg-value="{$rootBreadcrumb.title}" />
		</xf:if>

		<xf:if is="$selectedNavEntry AND $selectedNavEntry.href AND $selectedNavEntry.href != $xf.uri AND $selectedNavEntry.href != $xf.fullUri AND $selectedNavEntry.href != $rootBreadcrumb.href">
			<xf:set var="$position" value="{{ $position + 1 }}" />
			<xf:macro name="crumb"
					  arg-position="{$position}"
					  arg-href="{$selectedNavEntry.href}"
					  arg-value="{$selectedNavEntry.title}" />
		</xf:if>
		<xf:foreach loop="$breadcrumbs" value="$breadcrumb" if="$breadcrumb.href != $xf.uri AND $breadcrumb.href != $xf.fullUri">
			<xf:set var="$position" value="{{ $position + 1 }}" />
			<xf:macro name="crumb"
					  arg-position="{$position}"
					  arg-href="{$breadcrumb.href}"
					  arg-value="{$breadcrumb.value}" />
		</xf:foreach>
	</xf:set>
</xf:if>

<xf:set var="$breadcrumbCount">{{ count($breadcrumbs)|default(0) }}</xf:set>
<xf:set var="$navEntryCount">{{ $selectedNavEntry == null ? 0 : 1 }}</xf:set>

<xf:if is="{$uix_breadcrumbCrumbContent} && ({{ ($navEntryCount|escape + $breadcrumbCount|escape) != 1 }} || !property('uix_hideSingleCrumb'))">
	<xf:set var="$uix_breadcrumbHasCrumbs" value="1" />
</xf:if>

<xf:macro name="breadcrumbs" arg-breadcrumbHasCrumbs="!" arg-crumbContent="!" arg-variant="">
	<xf:if contentcheck="true">
		<div class="breadcrumb block {{ $variant ? 'p-breadcrumb--' . $variant : '' }}">
			<div class="pageContent">
				<xf:contentcheck>
					<xf:if is="{$breadcrumbHasCrumbs}">
						<xf:if contentcheck="true">
							<ul class="p-breadcrumbs {{ $variant ? 'p-breadcrumbs--' . $variant : '' }}"
								itemscope itemtype="https://schema.org/BreadcrumbList">
								<xf:contentcheck>
									{{ $crumbContent }}
								</xf:contentcheck>
							</ul>
						</xf:if>
					</xf:if>
				</xf:contentcheck>
			</div>
		</div>
	</xf:if>
</xf:macro>

<xf:macro name="crumb" arg-href="!" arg-value="!" arg-position="{{ 0 }}">
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a href="{$href}" itemprop="item">
			<xf:if is="{$href} == {$xf.homePageUrl} && property('uix_homeCrumbIcon')">
				<xf:fa icon="fa-home" />
				<span style="display: none;" itemprop="name">{$value}</span>
				<xf:else />
				<span itemprop="name">{$value}</span>
			</xf:if>
		</a>
		<xf:if is="$position"><meta itemprop="position" content="{$position}" /></xf:if>
	</li>
</xf:macro>


<xf:comment> --- Top breadcrumb ---</xf:comment>

<xf:set var="$uix_topBreadcrumb__component">
	<xf:ad position="container_breadcrumb_top_above" />
	<xf:macro name="breadcrumbs"
			  arg-crumbContent="{$uix_breadcrumbCrumbContent}"
			  arg-breadcrumbHasCrumbs="{$uix_breadcrumbHasCrumbs}" />
	<xf:ad position="container_breadcrumb_top_below" />
</xf:set>

<xf:macro name="uix_topBreadcrumb__component" arg-location="" arg-content="!">
	<xf:if is="property('uix_topBreadcrumbLocation') === {$location}">
		{$content}
	</xf:if>
</xf:macro>

<xf:comment> --- bottom breadcrumb --- </xf:comment>

<xf:set var="$uix_bottomBreadcrumb__component">
	<xf:if is="!property('uix_removeBottomBreadcrumb')">
		<xf:ad position="container_breadcrumb_bottom_above" />
		<xf:macro name="breadcrumbs"
				  arg-crumbContent="{$uix_breadcrumbCrumbContent}"
				  arg-breadcrumbHasCrumbs="{$uix_breadcrumbHasCrumbs}"
				  arg-variant="bottom" />
		<xf:ad position="container_breadcrumb_bottom_below" />
	</xf:if>
</xf:set>

<xf:macro name="uix_bottomBreadcrumb__component" arg-content="!" arg-location="!">
	<xf:if is="property('uix_bottomBreadcrumbLocation') == {$location}">
		{$content}
	</xf:if>
</xf:macro>


<xf:comment>------ NOTICES ---------</xf:comment>

<xf:set var="$uix_notices">
	<xf:if is="!{$uix_hideNotices}">
		<xf:if is="$notices.block">
			<xf:macro template="notice_macros" name="notice_list" arg-type="block" arg-notices="{$notices.block}" />
		</xf:if>

		<xf:if is="$notices.scrolling">
			<xf:macro template="notice_macros" name="notice_list" arg-type="scrolling" arg-notices="{$notices.scrolling}" />
		</xf:if>
	</xf:if>
</xf:set>

<xf:macro name="uix_notices" arg-location="!" arg-content="!">
	<xf:if is="{$location} == property('uix_noticeLocation')">
		{{$content}}
	</xf:if>
</xf:macro>

<xf:comment>------ FOOTER ---------</xf:comment>

<xf:set var="$uix_footer">
	<footer class="p-footer" id="footer">

		<xf:if is="!{$uix_hideExtendedFooter} && property('uix_enableExtendedFooter')">
			<xf:include template="uix_extendedFooter" />
		</xf:if>

		<div class="p-footer-inner">
			<div class="pageContent">
				<div class="p-footer-row">
					<xf:if contentcheck="true">
						<div class="p-footer-row-main">
							<ul class="p-footer-linkList p-footer-choosers">
								<xf:contentcheck>
									<xf:if is="(property('uix_pageWidthToggle') != 'disabled') && $uix_canTogglePageWidth">
										<li><a id="uix_widthToggle--trigger" data-xf-init="tooltip" title="{{ phrase('th_toggle_width_uix') }}" rel="nofollow"><xf:fa icon="fa-compress-alt" /></a></li>
									</xf:if>
									<xf:if is="$xf.visitor.canChangeStyle() && !{{ property('uix_hideStyleChoose') }}">
										<li><a href="{{ link('misc/style') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('style_chooser') }}" rel="nofollow">{$xf.style.title}</a></li>
									</xf:if>
									<xf:if is="$xf.visitor.canChangeLanguage()">
										<li><a href="{{ link('misc/language') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('language_chooser') }}" rel="nofollow"><i class="fa fa-globe" aria-hidden="true"></i> {$xf.language.title}</a></li>
									</xf:if>
								</xf:contentcheck>
							</ul>
						</div>
					</xf:if>
				</div>
				<div class="p-footer-row-opposite">
					<ul class="p-footer-linkList">
						<xf:if is="$xf.visitor.canUseContactForm()">
							<xf:if is="$xf.contactUrl">
								<li><a href="{$xf.contactUrl}" data-xf-click="{{ ($xf.options.contactUrl.overlay OR $xf.options.contactUrl.type == 'default') ? 'overlay' : '' }}">{{ phrase('contact_us') }}</a></li>
							</xf:if>
						</xf:if>

						<xf:if is="$xf.tosUrl">
							<li><a href="{$xf.tosUrl}">{{ phrase('terms_and_rules') }}</a></li>
						</xf:if>

						<xf:if is="$xf.privacyPolicyUrl">
							<li><a href="{$xf.privacyPolicyUrl}">{{ phrase('privacy_policy') }}</a></li>
						</xf:if>

						<xf:if is="$xf.helpPageCount">
							<li><a href="{{ link('help') }}">{{ phrase('help') }}</a></li>
						</xf:if>

						<xf:if is="$xf.homePageUrl">
							<li><a href="{$xf.homePageUrl}">{{ phrase('home') }}</a></li>
						</xf:if>

						<li><a href="#top" title="{{ phrase('top') }}" data-xf-click="scroll-to"><i class="fa fa-arrow-up" aria-hidden="true"></i></a></li>

						<li><a href="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}"><span aria-hidden="true"><i class="fa fa-rss"></i><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li>
					</ul>
				</div>
			</div>
		</div>

		<div class="p-footer-copyrightRow">
			<div class="pageContent">
				<div class="uix_copyrightBlock">
					<xf:if contentcheck="true">
						<div class="p-footer-copyright">
							<xf:contentcheck>
								<xf:copyright />
								<xf:callback class="ThemeHouse\Core\Branding" method="renderStyleBranding" /><xf:set var="$thBrandingDisplayed" value="1" />
								{{ phrase('extra_copyright') }}
							</xf:contentcheck>
						</div>
					</xf:if>

					<xf:if contentcheck="true">
						<div class="p-footer-debug">
							<xf:contentcheck>
								<xf:macro template="debug_macros" name="debug"
										  arg-controller="{$controller}"
										  arg-action="{$actionMethod}"
										  arg-template="{$template}" />
							</xf:contentcheck>
						</div>
					</xf:if>
				</div>
				<xf:comment>
					<xf:macro name="uix_socialMedia" arg-location="copyright" template="uix_socialMedia" />
				</xf:comment>
				<xf:macro name="uix_socialMedia__component" arg-content="{$uix_socialMediaContent}" arg-location="copyright" />
			</div>
		</div>
	</footer>
</xf:set>

<xf:macro name="uix_footer" arg-insideContent="!" arg-location="!" arg-content="!">
	<xf:if is="($insideContent && {$location} == 'insideContent') || ($location == 'bottom' && !$insideContent)">
		{{$content}}
	</xf:if>
</xf:macro>

<xf:comment>------ END COMPONENT MARKUP MACROS ---------</xf:comment>

<xf:set var="$thUixFontSize" value="{{ 62.5 * (14 + $xf.visitor.Option.thuix_font_size * 2) / 14 }}" />

<html id="XF" lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}"
	  style="font-size: {$thUixFontSize}%;"
	  data-app="public"
	  data-template="{$template}"
	  data-container-key="{$containerKey}"
	  data-content-key="{$contentKey}"
	  data-logged-in="{{ $xf.visitor.user_id ? 'true' : 'false' }}"
	  data-cookie-prefix="{$xf.cookie.prefix}"
	  data-csrf="{{ csrf_token()|escape('js') }}"
	  class="has-no-js {{ $template ? 'template-' . $template : '' }} {$uix_htmlClasses} {$uix_additionalHtmlClasses}"
	  {{ $xf.runJobs ? ' data-run-jobs=""' : '' }}>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

		<xf:comment> -- moved to top to use in macros
			<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
			<xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
			<xf:set var="$title"><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" /></xf:set>
			<xf:set var="$description"><xf:description /></xf:set>
		</xf:comment>

		<title>{$title}</title>
		<link rel="manifest" href="{{ base_url('webmanifest.php') }}">
		<xf:if is="property('metaThemeColor')">
			<meta name="theme-color" content="{{ parse_less_color(property('metaThemeColor')) }}" />
			<meta name="msapplication-TileColor" content="{{ property('metaThemeColor') }}">
		</xf:if>
		<meta name="apple-mobile-web-app-title" content="{{ $xf.options.boardShortTitle ?: $xf.options.boardTitle }}">
		<xf:if is="property('publicIconUrl')">
			<link rel="apple-touch-icon" href="{{ base_url(property('publicIconUrl', true)) }}">
		</xf:if>

		<xf:foreach loop="$head" value="$headTag">
			{$headTag}
		</xf:foreach>

		<xf:if is="!$head.meta_site_name && $siteName is not empty">
			<xf:macro template="metadata_macros" name="site_name" arg-siteName="{$siteName}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_type">
			<xf:macro template="metadata_macros" name="type" arg-type="website" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_title">
			<xf:macro template="metadata_macros" name="title" arg-title="{{ page_title() ?: $siteName }}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_description && $description is not empty && $pageDescriptionMeta">
			<xf:macro template="metadata_macros" name="description" arg-description="{$description}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_share_url">
			<xf:macro template="metadata_macros" name="share_url" arg-shareUrl="{$xf.fullUri}" arg-output="{{ true }}" />
		</xf:if>
		<xf:if is="!$head.meta_image_url && property('publicMetadataLogoUrl')">
			<xf:macro template="metadata_macros" name="image_url"
					  arg-imageUrl="{{ base_url(property('publicMetadataLogoUrl'), true) }}"
					  arg-output="{{ true }}" />
		</xf:if>

		<xf:macro template="helper_js_global" name="head" arg-app="public" />

		<xf:if is="property('publicFaviconUrl')">
			<link rel="icon" type="image/png" href="{{ base_url(property('publicFaviconUrl'), true) }}" sizes="32x32" />
		</xf:if>
		<xf:if is="property('publicMetadataLogoUrl')">
			<link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl'), true) }}" />
		</xf:if>
		<xf:include template="google_analytics" />

		<xf:set var="$uix_stickyStaffBarHeight" value="0" />

		<xf:if is="property('uix_stickyStaffBar') && ({$uix_responsiveStaffBar} || {$uix_alwaysStaffBar})">
			<xf:set var="$uix_stickyStaffBarHeight" value="{{property('uix_stickyStaffBarHeight')}}" />
		</xf:if>

	</head>

	<body data-template="{$template}">
		<xf:include template="page_style" />
		<div id="jumpToTop"></div>

		<xf:comment> -- Not currently supporting Sidebar navigation when page style is not covered ---
			<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') != 'covered'">
				<xf:macro name="uix_sidebarNav__component" arg-content="{$uix_sidebarNav__component}" />
			</xf:if>
		</xf:comment>

		<div class="uix_pageWrapper--fixed">
			<div class="p-pageWrapper" id="top">

				<xf:if is="!{{property('uix_removeHeaderWrapper')}}">
				<div class="uix_headerContainer">
					<div class="uix_headerContainer--stickyFix"></div>
				</xf:if>
					<xf:macro name="uix_staffbar__component" arg-content="{$uix_staffbar__component}" />

					<xf:set var="$uix_headerContent">
						<xf:if contentcheck="true">
							<div class="p-header-content">
								<xf:contentcheck>
									<xf:if is="property('uix_viewportShowLogoBlock') != '0'">
										<xf:macro name="uix_logo__component" arg-content="{$uix_logo__component}" />
									</xf:if>

									<xf:if contentcheck="true">
										<div class="p-nav-opposite">
											<xf:contentcheck>
												<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="header" />
											</xf:contentcheck>
										</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</xf:if>
					</xf:set>

					<xf:macro name="uix_logoBlock" arg-content="">
						<xf:if contentcheck="true">
							<header class="p-header p-header--hasExtraContent" id="header">
								<div class="p-header-inner">
									{$content}
									<xf:contentcheck>
										<xf:ad position="container_header" />
									</xf:contentcheck>

								</div>
							</header>
							<xf:else />
							<header class="p-header" id="header">
								<div class="p-header-inner">
									{$content}
								</div>
							</header>
						</xf:if>
					</xf:macro>

					<xf:if is="{{ !property('uix_navAboveHeader') }}">
						<xf:macro name="uix_logoBlock" arg-content="{$uix_headerContent}" />
					</xf:if>

					<xf:set var="$navHtml">
						<nav class="p-nav">
							<div class="p-nav-inner">
								<xf:if is="!{$uix_hideNavigation}">
									<xf:set var="$uix_badgeCounter" value="{{$xf.visitor.conversations_unread + $xf.visitor.alerts_unread}}" />
									<xf:if is="{{ property('uix_visitorTabsMobile') == 'canvas' }}">
										<xf:set var="$uix_visitorTabCanvas" value="1" />
										<xf:else />
										<xf:set var="$uix_visitorTabCanvas" value="0" />
									</xf:if>
									<a class="p-nav-menuTrigger {{ $uix_visitorTabsMobile == 'canvas' ? 'js-badge--alerts js-badge--conversations' : '' }} badgeContainer{{ ($uix_visitorTabCanvas && ($xf.visitor.alerts_unread || $xf.visitor.conversations_unread)) ? ' badgeContainer--highlighted' : '' }}" data-badge="{$uix_badgeCounter|number}" data-xf-click="off-canvas" data-menu=".js-headerOffCanvasMenu" role="button" tabindex="0">
										<i aria-hidden="true"></i>
										<span class="p-nav-menuText">{{ phrase('menu') }}</span>
									</a>
									<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') == 'covered'">
										<a class="p-nav-menuTrigger uix_sidebarNav--trigger" id="uix_sidebarNav--trigger" rel="nofollow">
											<i aria-hidden="true"></i>
											<span class="p-nav-menuText">{{ phrase('menu') }}</span>
										</a>
									</xf:if>
								</xf:if>

								<xf:macro name="uix_logo__component" arg-content="{$uix_logo__component}" />

								<xf:if is="!{$uix_hideNavigation}">
									<xf:if is="property('uix_navigationType') != 'sidebarNav' || property('uix_pageStyle') != 'covered'">
										<div class="p-nav-scroller hScroller" data-xf-init="h-scroller" data-auto-scroll=".p-navEl.is-selected">
											<div class="hScroller-scroll">
												<ul class="p-nav-list js-offCanvasNavSource">
													<xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
														<li>
															<xf:macro name="nav_entry"
																	  arg-navId="{$navSection}"
																	  arg-nav="{$navEntry}"
																	  arg-selected="{{ $navSection == $pageSection }}"
																	  arg-shortcut="{$i}" />
														</li>
													</xf:foreach>
												</ul>
											</div>
										</div>
									</xf:if>

									<xf:if is="property('uix_activeNavTitle')">
										<div class="uix_activeNavTitle">
											<span>
												<xf:if is="{$uix_mobileActiveNav}">
													{{ $uix_mobileActiveNav }}
													<xf:elseif is="{$selectedNavEntry.href}" />
													{$selectedNavEntry.title}
													<xf:else />
												</xf:if>
											</span>
										</div>
									</xf:if>
								</xf:if>

								<xf:macro name="uix_search__component" arg-location="navigationLeft" arg-content="{$uix_search__component}" />

								<xf:if contentcheck="true">
									<div class="p-nav-opposite">
										<xf:contentcheck>
											<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="navigation" />
											<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="navigation" />
										</xf:contentcheck>
									</div>
								</xf:if>
							</div>
							<xf:comment>
							<xf:macro template="uix_megaMenu" name="uix_megaMenu" />
							</xf:comment>
						</nav>
					</xf:set>
					
					<xf:set var="$uix_navOffset">
						[
							{
								"breakpoint": "0",
								"offset": "0"
							}
							<xf:if is="{$uix_responsiveStaffBar} && !{$uix_alwaysStaffBar} && {{ property('uix_stickyStaffBar') }}">
							,{
								"breakpoint": "{{ property('uix_staffBarBreakpoint')|escape('json') }}",
								"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
							}	
							</xf:if>
							<xf:if is="{$uix_alwaysStaffBar} && {{ property('uix_stickyStaffBar') }}">
							,{
								"breakpoint": "0",
								"offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}"
							}	
							</xf:if>
						]
					</xf:set>

					<xf:if is="property('publicNavSticky') == 'primary'">
						<div class="p-navSticky p-navSticky--primary <xf:if is="{{ (property('publicNavSticky') !== 'none') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-top-offset-breakpoints="{$uix_navOffset|for_attr}" data-xf-init="sticky-header">
							{$navHtml|raw}
						</div>
						{$subNavHtml|raw}
						<xf:elseif is="property('publicNavSticky') == 'all'" />
						<div class="p-navSticky p-navSticky--all <xf:if is="{{ (property('publicNavSticky') !== 'none') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-top-offset-breakpoints="{$uix_navOffset|for_attr}" data-xf-init="sticky-header">
							{$navHtml|raw}
							{$subNavHtml|raw}
						</div>
						<xf:else />
						{$navHtml|raw}
						{$subNavHtml|raw}
					</xf:if>

					<xf:if is="{{ property('uix_navAboveHeader') }}">
						<xf:macro name="uix_logoBlock" arg-content="{$uix_headerContent}" />
					</xf:if>

					<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="header" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
					<xf:macro name="uix_topBreadcrumb__component" arg-location="header" arg-content="{$uix_topBreadcrumb__component}" />
					<xf:macro name="uix_mainTabComponent" arg-location="header" arg-content="{$uix_mainTabComponent}" />
					<xf:macro name="uix_titlebar__component" arg-location="header" arg-content="{$uix_titlebar__component}" />
					{{$uix_headerExtra|raw }}
				<xf:if is="!{{property('uix_removeHeaderWrapper')}}">
				</div>
				</xf:if>

				<xf:comment> --- UI.X off canvas start ---</xf:comment>
				<div class="offCanvasMenu offCanvasMenu--nav js-headerOffCanvasMenu" data-menu="menu" aria-hidden="true" data-ocm-builder="navigation">
					<div class="offCanvasMenu-backdrop" data-menu-close="true"></div>
					<div class="offCanvasMenu-content">
						<xf:include template="uix_canvasTabs" />
						<xf:include template="uix_canvasPanels" />

						<xf:macro name="canvasNavPanel">
							<div class="offCanvasMenu-header">
								{{ phrase('menu') }}
								<a class="offCanvasMenu-closer" data-menu-close="true" role="button" tabindex="0" aria-label="{{ phrase('close')|for_attr }}"></a>
							</div>
							<xf:if is="$xf.visitor.user_id">
								<div class="p-offCanvasAccountLink">
									<a href="{{ link('account') }}" class="offCanvasMenu-link">
										<xf:avatar user="$xf.visitor" size="xxs" href="" />
										{$xf.visitor.username}
									</a>
									<hr class="offCanvasMenu-separator" />
								</div>
							</xf:if>
							<div class="js-offCanvasNavTarget"></div>
							<xf:if is="$xf.visitor.user_id">
								<div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'profile' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="profile" href="{{ link('members', $xf.visitor) }}" class="offCanvasMenu-link">{{ phrase('th_profile_uix') }}</a></div></div>
								<div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'alerts' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="alerts" href="{{ link('account/alerts') }}" class="offCanvasMenu-link">{{ phrase('alerts')}}</a></div></div>
								<div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'settings' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="settings" href="{{ link('account/preferences') }}" class="offCanvasMenu-link">{{ phrase('settings')}}</a></div></div>
							</xf:if>
							<xf:if contentcheck="true">
								<div class="uix_sidebarNav__inner__widgets">
									<xf:contentcheck>
										{$uix_sidebarNavWidgets|raw}
									</xf:contentcheck>
								</div>
							</xf:if>
						</xf:macro>
						<div class="offCanvasMenu-installBanner js-installPromptContainer" style="display: none;" data-xf-init="install-prompt">
							<div class="offCanvasMenu-installBanner-header">{{ phrase('install_app') }}</div>
							<xf:button class="js-installPromptButton">{{ phrase('install') }}</xf:button>
						</div>
					</div>
				</div>

				<xf:macro name="uix_titlebar__component" arg-location="belowHeader" arg-content="{$uix_titlebar__component}" />

				<div class="p-body">

					<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') == 'covered'">
						<xf:macro name="uix_sidebarNav__component" arg-content="{$uix_sidebarNav__component}" />
					</xf:if>

					<div class="p-body-inner {{ $removePageWrapper ? 'p-body-inner-none' : ''}}">
						<xf:if is="!is_addon_active('ThemeHouse/UIX') && $xf.visitor.is_admin">
							<div class="blockMessage blockMessage--error blockMessage--errorUixAddon">
								<h2 style="margin: 0 0 .5em 0">UI.X Error</h2>
								<p>
									It appears that you do not have the UI.X Add-on installed. Please install this add-on to ensure your style works as expected. You can download the UI.X add-on <a href="https://www.themehouse.com/xenforo/2/addons/uix-addon">here</a>.
								</p>
								<xf:button href="https://www.themehouse.com/help/documentation/uix2" class="button--primary">
									<xf:fa icon="fa-exclamation-triangle" /> View Documentation
								</xf:button>
							</div>
						</xf:if>
						<!--XF:EXTRA_OUTPUT-->

						<xf:macro name="uix_notices" arg-location="aboveMainContainer" arg-content="{$uix_notices}" />

						<xf:macro name="uix_titlebar__component" arg-location="aboveMainContainer" arg-content="{$uix_titlebar__component}" />

						<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="aboveMainContainer" arg-showWelcomeSection="{$uix_showWelcomeSection}" />

						<xf:macro name="uix_topBreadcrumb__component" arg-location="aboveMainContainer" arg-content="{$uix_topBreadcrumb__component}" />

						<xf:macro name="uix_mainTabComponent" arg-location="aboveMainContainer" arg-content="{$uix_mainTabComponent}" />

						<xf:macro template="browser_warning_macros" name="javascript" />
						<xf:macro template="browser_warning_macros" name="browser" />

<xf:if is="count($xf.reactionsActive) > 1 AND $xf.visitor.user_id">
	<script type="text/template" id="xfReactTooltipTemplate">
		<div class="tooltip-content-inner">
			<div class="reactTooltip">
				<xf:foreach loop="$xf.reactionsActive" key="$reactionId" value="$reaction">
					<xf:reaction id="{$reactionId}" tooltip="true" />
				</xf:foreach>
			</div>
		</div>
	</script>
</xf:if>
						<div uix_component="MainContainer" class="uix_contentWrapper">

							<xf:macro name="uix_notices" arg-location="mainContainerTop" arg-content="{$uix_notices}" />

							<xf:ad position="container_content_above" />
							<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="mainContainerTop" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
							<xf:macro name="uix_topBreadcrumb__component" arg-location="mainContainerTop" arg-content="{$uix_topBreadcrumb__component}" />
							<xf:macro name="uix_titlebar__component" arg-location="mainContainerTop" arg-content="{$uix_titlebar__component}" />
							<xf:macro name="uix_mainTabComponent" arg-location="mainContainerTop" arg-content="{$uix_mainTabComponent}" />

							<div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}">
								<xf:comment>
								<xf:if is="$sideNav">
									<div class="p-body-sideNavCol"></div>
								</xf:if>
								<div class="p-body-contentCol"></div>
								<xf:if is="$sidebar">
									<div class="p-body-sidebarCol"></div>
								</xf:if>
								</xf:comment>
								<xf:if is="$sideNav">
									<div class="p-body-sideNav">
										<div class="p-body-sideNavTrigger">
											<xf:button class="button--link" data-xf-click="off-canvas" data-menu="#js-SideNavOcm">
												{{ $sideNavTitle ?: phrase('navigation') }}
											</xf:button>
										</div>
										<div class="p-body-sideNavInner {{ (property('uix_stickySidebar') == 'top') ? ' uix_stickyBodyElement' : '' }}" data-ocm-class="offCanvasMenu offCanvasMenu--blocks" id="js-SideNavOcm" data-ocm-builder="sideNav">
											<div class="uix_sidebar--scroller">
												<div data-ocm-class="offCanvasMenu-backdrop" data-menu-close="true"></div>
												<div data-ocm-class="offCanvasMenu-content">
													<div class="p-body-sideNavContent">
														<xf:ad position="container_sidenav_above" />
														<xf:foreach loop="$sideNav" value="$sideNavHtml">
															{$sideNavHtml}
														</xf:foreach>
														<xf:ad position="container_sidenav_below" />
													</div>
												</div>
											</div>
										</div>
									</div>
								</xf:if>

								<xf:macro name="uix_sidebar__component" arg-content="{$uix_sidebar__component}" arg-location="left" />
								<div uix_component="MainContent" class="p-body-content">
									<!-- ABOVE MAIN CONTENT -->
									<xf:macro name="uix_notices" arg-location="aboveMainContent" arg-content="{$uix_notices}" />
									<xf:macro name="uix_topBreadcrumb__component" arg-location="aboveMainContent" arg-content="{$uix_topBreadcrumb__component}" />
									<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="aboveMainContent" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
									<xf:macro name="uix_titlebar__component" arg-location="aboveMainContent" arg-content="{$uix_titlebar__component}" />
									<xf:macro name="uix_mainTabComponent" arg-location="aboveMainContent" arg-content="{$uix_mainTabComponent}" />
									<div class="p-body-pageContent">
										<xf:macro name="uix_notices" arg-location="mainContentTop" arg-content="{$uix_notices}" />
										<xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="mainContentTop" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
										<xf:macro name="uix_topBreadcrumb__component" arg-location="mainContentTop" arg-content="{$uix_topBreadcrumb__component}" />
										<xf:macro name="uix_titlebar__component" arg-location="mainContentTop" arg-content="{$uix_titlebar__component}" />
										<xf:macro name="uix_mainTabComponent" arg-location="mainContentTop" arg-content="{$uix_mainTabComponent}" />
										{$content|raw}
										<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="mainContentBottom" />
									</div>
									<!-- BELOW MAIN CONTENT -->
									<xf:ad position="container_content_below" />
									<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="belowMainContent" />
								</div>

								<xf:macro name="uix_sidebar__component" arg-content="{$uix_sidebar__component}" arg-location="right" />
							</div>
							<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="mainContainerBottom" />
						</div>
						<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="belowMainContainer" />
						<xf:macro name="uix_footer" arg-location="insideContent" arg-content="{$uix_footer}" arg-insideContent="{{ property('uix_footerInsideContent')}}" />
					</div>
				</div>

				<xf:macro name="uix_footer" arg-location="bottom" arg-content="{$uix_footer}" arg-insideContent="{{ property('uix_footerInsideContent')}}" />

				<xf:if contentcheck="true">
					<div class="uix_fabBar uix_fabBar--active">
						<xf:contentcheck>
							<xf:if is="property('scrollJumpButtons')">
								<div class="u-scrollButtons js-scrollButtons" data-trigger-type="{{ property('scrollJumpButtons') }}">
									<xf:button href="#top" class="button--scroll ripple-JsOnly" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-up" /><span class="u-srOnly">{{ phrase('top') }}</span></xf:button>
									<xf:if is="property('scrollJumpButtons') != 'up'">
										<xf:button href="#footer" class="button--scroll ripple-JsOnly" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-down" /><span class="u-srOnly">{{ phrase('bottom') }}</span></xf:button>
									</xf:if>
								</div>
							</xf:if>
							<xf:if is="property('uix_fab') != 'never'">
								<xf:if contentcheck="true">
									<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
								</xf:if>
							</xf:if>
						</xf:contentcheck>
					</div>
				</xf:if>
				<xf:if is="(property('uix_fab') != 'never') && !property('uix_fabScroll')">
					<xf:if contentcheck="true">
						<div class="uix_fabBar uix_fabBar--mirror">
							<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
						</div>
					</xf:if>
				</xf:if>
				<xf:if is="property('uix_visitorTabsMobile') == 'tabbar'">
					<xf:macro name="uix_tabBar" template="uix_tabBar" />
				</xf:if>
			</div>
		</div>

		<div class="u-bottomFixer js-bottomFixTarget">
			<xf:if is="$notices.floating">
				<xf:macro template="notice_macros" name="notice_list" arg-type="floating" arg-notices="{$notices.floating}" />
			</xf:if>
			<xf:if is="$notices.bottom_fixer">
				<xf:macro template="notice_macros" name="notice_list" arg-type="bottom_fixer" arg-notices="{$notices.bottom_fixer}" />
			</xf:if>
		</div>

		<xf:include template="uix_config" />

		<xf:macro template="helper_js_global" name="body" arg-app="public" arg-jsState="{$jsState}" />
		
		<xf:if is="count($xf.reactionsActive) > 1">
			<script type="text/template" id="xfReactTooltipTemplate">
			<div class="tooltip-content-inner">
				<div class="reactTooltip">
					<xf:foreach loop="$xf.reactionsActive" key="$reactionId" value="$reaction">
						<xf:reaction id="{$reactionId}" tooltip="true" />
				</xf:foreach>
				</div>
				</div>
			</script>
		</xf:if>

		<xf:if is="property('uix_loginStyle') == 'slidingPanel'">
			<div class="uix__loginForm uix__loginForm--login">
				<div class="uix__loginForm--panel">
					<xf:include template="login">
						<xf:set var="$uix_loginPreventAutoFocus" value="1" />
					</xf:include>
				</div>
				<div class="uix__loginForm--mask"></div>
			</div>
		</xf:if>

		{$ldJsonHtml|raw}

	</body>
</html>

<xf:macro name="nav_entry" arg-sidebarNav="" arg-navId="!" arg-nav="!" arg-selected="{{ false }}" arg-shortcut="">
	<div class="p-navEl {{ !$sidebarNav ? 'u-ripple' : '' }} {{ $selected ? 'is-selected' : '' }}" {{ $nav.children ? 'data-has-children="true"' : '' }}>
		<xf:if is="$sidebarNav">
			<div class="p-navEl__inner u-ripple">
				</xf:if>
			<xf:if is="$nav.href">
				<xf:macro name="nav_link"
						  arg-navId="{$navId}"
						  arg-nav="{$nav}"
						  arg-class="p-navEl-link {{ $nav.children ? 'p-navEl-link--splitMenu' : '' }}"
						  arg-shortcut="{{ $nav.children ? false : $shortcut }}" />
				<xf:if is="$nav.children">
					<a data-xf-key="{$shortcut}"
					   data-xf-click="menu"
					   data-menu-pos-ref="< .p-navEl"
					   class="p-navEl-splitTrigger"
					   role="button"
					   tabindex="0"
					   aria-label="{{ phrase('toggle_expanded')|for_attr }}"
					   aria-expanded="false"
					   aria-haspopup="true">
					</a>
				</xf:if>
				<xf:elseif is="$nav.children" />
				<a data-xf-key="{$shortcut}"
				   class="p-navEl-linkHolder"
				   data-menu-pos-ref="< .p-navEl"
				   data-xf-click="menu"
				   role="button"
				   tabindex="0"
				   aria-expanded="false"
				   aria-haspopup="true">
					<xf:macro name="nav_link"
							  arg-navId="{$navId}"
							  arg-nav="{$nav}"
							  arg-class="p-navEl-link p-navEl-link--menuTrigger" />
				</a>
				<xf:else />
				<xf:macro name="nav_link"
						  arg-navId="{$navId}"
						  arg-nav="{$nav}"
						  arg-class="p-navEl-link"
						  arg-shortcut="{$shortcut}" />
			</xf:if>
			<xf:if is="$nav.children">
				<xf:if is="!{$sidebarNav}">
					<div class="menu menu--structural" data-menu="menu" aria-hidden="true">
						<div class="menu-content">
							<xf:foreach loop="$nav.children" key="$childNavId" value="$child">
								<xf:macro name="nav_menu_entry"
										  arg-navId="{$childNavId}"
										  arg-nav="{$child}" />
							</xf:foreach>
						</div>
					</div>
				</xf:if>
			</xf:if>
			<xf:if is="{$sidebarNav} && $nav.children && property('uix_tablinksInSideNav')">
				<a class="uix_sidebarNav--trigger <xf:if is="!property('uix_sideNavCollapsed') && $selected">is-expanded</xf:if>" rel="nofollow"><xf:fa icon="fa-chevron-down" /></a>
			</xf:if>
			<xf:if is="$sidebarNav">
				</div>
		</xf:if>
		<xf:if is="property('uix_tablinksInSideNav')">
			<xf:if is="{$sidebarNav}">
				<div <xf:if is="$nav.children">data-menu="false"</xf:if> class="uix_sidebarNav__subNav <xf:if is="!property('uix_sideNavCollapsed') && $selected">subNav--expand</xf:if>">
			<div class="uix_sidebarNav__subNavInner">
				<xf:foreach loop="$nav.children" key="$childNavId" value="$child">
					<xf:macro name="nav_menu_entry"
							  arg-navId="{$childNavId}"
							  arg-nav="{$child}" />
				</xf:foreach>
			</div>
			</div>
		</xf:if>
	</xf:if>
</div>
</xf:macro>

<xf:macro name="nav_link" arg-navId="!" arg-nav="!" arg-class="" arg-titleHtml="" arg-shortcut="{{ false }}">
	<xf:set var="$tag" value="{{ $nav.href ? 'a' : 'span' }}" />
	<{$tag} {{ $nav.href ? 'href="' . $nav.href . '"' : '' }}
			class="{$class} {$nav.attributes.class}"
			{{ attributes($nav.attributes, ['class']) }}
			{{ $shortcut !== false ? 'data-xf-key="' . $shortcut . '"' : '' }}
			data-nav-id="{$navId}"><xf:if is="$nav.icon"><xf:fa icon="{$nav.icon}" /> </xf:if><span>{{ $titleHtml ? $titleHtml|raw : $nav.title }}</span><xf:if is="$nav.counter"> <span class="badge badge--highlighted">{$nav.counter|number}</span></xf:if></{$tag}>
</xf:macro>

<xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0">
	<xf:macro name="nav_link"
			  arg-navId="{$navId}"
			  arg-nav="{$nav}"
			  arg-class="menu-linkRow u-ripple u-indentDepth{$depth} js-offCanvasCopy" />
	<xf:if is="$nav.children">
		<xf:foreach loop="$nav.children" key="$childNavId" value="$child">
			<xf:macro name="nav_menu_entry"
					  arg-navId="{$childNavId}"
					  arg-nav="{$child}"
					  arg-depth="{{ $depth + 1 }}" />
		</xf:foreach>
		<xf:if is="$depth == 0">
			<hr class="menu-separator" />
		</xf:if>
	</xf:if>
</xf:macro>]]></template>
    <template title="account_alerts" type="public" addon_id="XF" version_id="2020031" version_string="2.2.0 Beta 1"><![CDATA[<xf:title>{{ phrase('alerts') }}</xf:title>
<xf:page option="uix_myAccountLinks" value="alerts" />

<xf:wrap template="account_wrapper" />

<div class="block">
	<div class="block-outer"><xf:trim>
		<div class="block-outer-opposite">
			<div class="buttonGroup">
				<xf:button href="{{ link('account/alerts/mark-read') }}"
					class="button--link" overlay="true">
					{{ phrase('mark_read') }}
				</xf:button>
			</div>
		</div>
	</xf:trim></div>

	<div class="block-container">
		<div class="block-body">
			<xf:if is="$alerts is not empty">
				<ol class="listPlain" data-xf-init="alerts-list">
				<xf:foreach loop="$alerts" value="$alert">
					<li data-alert-id="{$alert.alert_id}"
						class="alert js-alert block-row block-row--separated {{ $alert.isUnreadInUi() ? 'is-unread' : '' }}">
						<xf:macro template="alert_macros" name="row" arg-alert="{$alert}" />
					</li>
				</xf:foreach>
				</ol>
			<xf:elseif is="$page <= 1" />
				<div class="block-row">{{ phrase('you_do_not_have_any_recent_alerts') }}</div>
			<xf:else />
				<div class="block-row">{{ phrase('no_alerts_can_be_shown') }}</div>
			</xf:if>
		</div>
	</div>

	<xf:pagenav link="account/alerts" page="{$page}" perpage="{$perPage}" total="{$totalAlerts}"
		wrapperclass="block-outer block-outer--after" />
</div>]]></template>
    <template title="account_preferences" type="public" addon_id="XF" version_id="2020031" version_string="2.2.0 Beta 1"><![CDATA[<xf:title>{{ phrase('preferences') }}</xf:title>
<xf:page option="uix_myAccountLinks" value="settings" />

<xf:wrap template="account_wrapper" />

<xf:form action="{{ link('account/preferences') }}" ajax="true" class="block" data-force-flash-message="true">
	<div class="block-container">
		<div class="block-body">
			<xf:if is="$xf.visitor.canChangeStyle()">

				<xf:selectrow name="user[style_id]" value="{$xf.visitor.style_id}"
					label="{{ phrase('style') }}">

					<xf:option value="0">{{ phrase('use_default_style:') }} {$defaultStyle.title}</xf:option>
					<xf:foreach loop="$styles" value="$style">
						<xf:option value="{$style.style_id}">{$style.title}{{ !$style.user_selectable ? ' *' : '' }}</xf:option>
					</xf:foreach>
				</xf:selectrow>
			<xf:else />
				<xf:hiddenval name="user[style_id]">{$xf.visitor.style_id}</xf:hiddenval>
			</xf:if>

			<xf:if is="$xf.visitor.canChangeLanguage()">
				<xf:selectrow name="user[language_id]" value="{$xf.visitor.language_id}"
					label="{{ phrase('language') }}">

					<xf:foreach loop="$languages" value="$language">
						<xf:option value="{$language.language_id}">{$language.title}{{ !$language.user_selectable ? ' *' : '' }}</xf:option>
					</xf:foreach>
				</xf:selectrow>
			<xf:else />
				<xf:hiddenval name="user[language_id]">{{ $xf.visitor.language_id ?: $xf.options.defaultLanguageId }}</xf:hiddenval>
			</xf:if>

			<xf:selectrow name="user[timezone]" value="{$xf.visitor.timezone}"
				label="{{ phrase('time_zone') }}">

				<xf:options source="$timeZones" />
			</xf:selectrow>

			<xf:macro template="helper_account" name="email_options_row" arg-showConversationOption="{{ true }}" />

			<xf:checkboxrow label="{{ phrase('content_options') }}">
				<xf:option value="watch_no_email" name="option[creation_watch_state]" checked="{{ $xf.visitor.Option.creation_watch_state ? true : false  }}"
					label="{{ phrase('automatically_watch_content_you_create...') }}">
					<xf:checkbox>
						<xf:option value="watch_email" name="option[creation_watch_state]" checked="{{ $xf.visitor.Option.creation_watch_state == 'watch_email' }}"
							label="{{ phrase('and_receive_email_notifications') }}" />
					</xf:checkbox>
				</xf:option>
				<xf:option value="watch_no_email" name="option[interaction_watch_state]" checked="{{ $xf.visitor.Option.interaction_watch_state ? true : false  }}"
					label="{{ phrase('automatically_watch_content_you_interact_with...') }}">
					<xf:checkbox>
						<xf:option value="watch_email" name="option[interaction_watch_state]" checked="{{ $xf.visitor.Option.interaction_watch_state == 'watch_email' }}"
							label="{{ phrase('and_receive_email_notifications') }}" />
					</xf:checkbox>
				</xf:option>
				<xf:option name="option[content_show_signature]" checked="{$xf.visitor.Option.content_show_signature}"
					label="{{ phrase('show_peoples_signatures_with_their_messages') }}" />
			</xf:checkboxrow>

			<xf:macro template="helper_account" name="activity_privacy_row" />

			<xf:macro template="custom_fields_macros" name="custom_fields_edit" arg-type="users" arg-group="preferences" arg-set="{$xf.visitor.Profile.custom_fields}" />

			<xf:if is="$xf.options.enableNotices && (count($xf.session.dismissedNotices) > 0)">
				<hr class="formRowSep" />

				<xf:checkboxrow>
					<xf:option name="restore_notices"
						label="{{ phrase('restore_dismissed_notices') }}"
						hint="{{ phrase('restore_dismissed_notices_hint') }}" />
				</xf:checkboxrow>
			</xf:if>

			<xf:if is="$xf.visitor.canUsePushNotifications()">
				<xf:formrow label="{{ phrase('push_notifications') }}" rowtype="button" explain="{{ phrase('enable_push_explain') }}">
					<xf:button class="is-disabled" data-xf-init="push-toggle">
						{{ phrase('push_checking_device_capabilities...') }}
					</xf:button>
				</xf:formrow>

				<xf:checkboxrow label="">
					<xf:option name="option[push_on_conversation]" checked="{$xf.visitor.Option.push_on_conversation}"
						label="{{ phrase('receive_push_notification_when_new_conversation_message_is_received') }}" />
				</xf:checkboxrow>

				<xf:js>
					jQuery.extend(true, XF.config, {
						skipPushNotificationSubscription: true,
						skipPushNotificationCta: true
					});

					jQuery.extend(XF.phrases, {
						push_enable_label: "{{ phrase('push_enable_label')|escape('js') }}",
						push_disable_label: "{{ phrase('push_disable_label')|escape('js') }}",
						push_not_supported_label: "{{ phrase('push_not_supported_label')|escape('js') }}",
						push_blocked_label: "{{ phrase('push_blocked_label')|escape('js') }}"
					});
				</xf:js>
			<xf:else />
				<xf:hiddenval name="option[push_on_conversation]">{$xf.visitor.Option.push_on_conversation}</xf:hiddenval>
			</xf:if>
		</div>

		<xf:if is="$alertOptOuts is not empty">
			<xf:css src="notification_opt_out.less" />
			<h2 class="block-formSectionHeader"><span class="block-formSectionHeader-aligner">{{ phrase('receive_notification_when_someone...') }}</span></h2>
			<div class="block-body">
				<xf:set var="$canPush" value="{{ $xf.visitor.canUsePushNotifications() }}" />
				<xf:foreach loop="$alertOptOuts" key="$contentType" value="$options">
					<xf:foreach loop="$options" key="$action" value="$label">
						<xf:formrow label="{$label}" data-content-type="{$contentType}" data-action="{$action}">
							<ul class="notificationChoices">
								<li class="notificationChoices-choice notificationChoices-choice--alert">
									<xf:checkbox standalone="true">
										<xf:option name="alert[{$contentType}_{$action}]"
											data-xf-init="{{ $canPush ? 'disabler' : '' }}" data-container="< .notificationChoices | .notificationChoices-choice--push"
											checked="{{ $xf.visitor.Option.doesReceiveAlert($contentType, $action) }}"
											label="{{ phrase('alert') }}" />
									</xf:checkbox>
								</li>
								<xf:if is="$canPush">
									<li class="notificationChoices-choice notificationChoices-choice--push">
										<xf:checkbox standalone="true">
											<xf:option name="push[{$contentType}_{$action}]"
												checked="{{ $xf.visitor.Option.doesReceivePush($contentType, $action) }}"
												label="{{ phrase('push') }}" />
										</xf:checkbox>
										<xf:hiddenval name="push_shown[{$contentType}_{$action}]">1</xf:hiddenval>
									</li>
								</xf:if>
							</ul>
						</xf:formrow>
					</xf:foreach>
					<hr class="formRowSep" />
				</xf:foreach>

			</div>
		</xf:if>

		<xf:submitrow icon="save" sticky="true" />
	</div>
</xf:form>]]></template>
    <template title="account_visitor_menu" type="public" addon_id="XF" version_id="2020035" version_string="2.2.0 Beta 5"><![CDATA[<xf:if contentcheck="true">
	<h4 class="menu-tabHeader tabs" data-xf-init="tabs" role="tablist">
		<span class="hScroller" data-xf-init="h-scroller">
			<span class="hScroller-scroll">
				<a href="{{ link('account') }}" class="tabs-tab is-active" role="tab" tabindex="0" aria-controls="{{ unique_id('accountMenu') }}">{{ phrase('your_account') }}</a>
			<xf:contentcheck>
				<xf:if is="$xf.visitor.canViewBookmarks()">
					<a href="{{ link('account/bookmarks') }}" class="tabs-tab" role="tab" tabindex="0" aria-controls="{{ unique_id('accountMenuBookmarks') }}">{{ phrase('bookmarks') }}</a>
				</xf:if>
				<!--[XF:account_tabs:bottom]-->
			</xf:contentcheck>
			</span>
		</span>
	</h4>
	<xf:set var="$hasTabs" value="{{ true }}" />
</xf:if>

<xf:set var="$accountHtml">
	<div class="menu-row menu-row--alt">
		<xf:macro name="visitor_panel_row" />
	</div>

	<xf:macro name="visitor_panel_row">
		<div class="contentRow contentRow--alignMiddle">
			<div class="contentRow-figure">
				<span class="avatarWrapper">
					<xf:avatar user="{$xf.visitor}" size="s" href="" notooltip="true" />
					<xf:if is="$xf.visitor.canUploadAvatar()">
						<a class="avatarWrapper-update" href="{{ link('account/avatar') }}" data-xf-click="overlay"><span>{{ phrase('edit') }}</span></a>
					</xf:if>
				</span>
			</div>
			<div class="contentRow-main">
				<h3 class="contentRow-header"><xf:username user="$xf.visitor" rich="true" notooltip="true" /></h3>
				<div class="contentRow-lesser">
					<xf:usertitle user="$xf.visitor" />
				</div>
			</div>
		</div>
				<div class="contentRow-minor">
					<!--[XF:stats_pairs:above_messages]-->
					<dl class="pairs pairs--justified fauxBlockLink">
						<xf:if is="property('uix_visitorPanelIcons')">
							<xf:fa icon="fa-comments" />
						<xf:else />
							<dt>{{ phrase('messages') }}</dt>
						</xf:if>
						<dd>
							<a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="fauxBlockLink-linkRow u-concealed">
								{$xf.visitor.message_count|number}
							</a>
						</dd>
					</dl>
					<!--[XF:stats_pairs:above_reactions]-->
					<dl class="pairs pairs--justified fauxBlockLink">
						<xf:if is="property('uix_visitorPanelIcons')">
							<xf:fa icon="fa-thumbs-up" />
						<xf:else />
							<dt>{{ phrase('reaction_score') }}</dt>
						</xf:if>
						<dd>
							<a href="{{ link('account/reactions') }}" class="fauxBlockLink-linkRow u-concealed">
								{$xf.visitor.reaction_score|number}
							</a>
						</dd>
					</dl>
					<!--[XF:stats_pairs:above_points]-->
					<xf:if is="$xf.options.enableTrophies">
						<dl class="pairs pairs--justified fauxBlockLink">
							<xf:if is="property('uix_visitorPanelIcons')">
								<xf:fa icon="fa-trophy" />
							<xf:else />
								<dt>{{ phrase('trophy_points') }}</dt>
							</xf:if>
							<dd>
								<a href="{{ link('members/trophies', $xf.visitor) }}" data-xf-click="overlay" class="fauxBlockLink-linkRow u-concealed">
									{$xf.visitor.trophy_points|number}
								</a>
							</dd>
						</dl>
					</xf:if>
				</div>
	</xf:macro>

	<!--[XF:menu_separator:below_visitor_panel]-->
	<hr class="menu-separator menu-separator--hard" />

	<ul class="listPlain listColumns listColumns--narrow listColumns--together">
		<!--[XF:content_links:top]-->
		<xf:if is="$xf.options.enableNewsFeed">
			<li><a href="{{ link('whats-new/news-feed') }}" class="menu-linkRow">{{ phrase('news_feed') }}</a></li>
		</xf:if>
		<li><a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="menu-linkRow">{{ phrase('your_content') }}</a></li>
		<li><a href="{{ link('account/reactions') }}" class="menu-linkRow">{{ phrase('reactions_received') }}</a></li>
		<!--[XF:content_links:bottom]-->
	</ul>

	<!--[XF:menu_separator:below_content_links]-->
	<hr class="menu-separator" />

	<ul class="listPlain listColumns listColumns--narrow listColumns--together">
		<!--[XF:account_links:top]-->
		<li><a href="{{ link('account/account-details') }}" class="menu-linkRow">{{ phrase('account_details') }}</a></li>
		<li><a href="{{ link('account/security') }}" class="menu-linkRow">{{ phrase('password_and_security') }}</a></li>
		<li><a href="{{ link('account/privacy') }}" class="menu-linkRow">{{ phrase('privacy') }}</a></li>
		<li><a href="{{ link('account/preferences') }}" class="menu-linkRow">{{ phrase('preferences') }}</a></li>
		<xf:if is="$xf.visitor.canEditSignature()">
			<li><a href="{{ link('account/signature') }}" class="menu-linkRow">{{ phrase('signature') }}</a></li>
		</xf:if>
		<xf:if is="$xf.app.userUpgradeCount">
			<li><a href="{{ link('account/upgrades') }}" class="menu-linkRow">{{ phrase('account_upgrades') }}</a></li>
		</xf:if>
		<xf:if is="$xf.app.connectedAccountCount">
			<li><a href="{{ link('account/connected-accounts') }}" class="menu-linkRow">{{ phrase('connected_accounts') }}</a></li>
		</xf:if>
		<li><a href="{{ link('account/following') }}" class="menu-linkRow">{{ phrase('following') }}</a></li>
		<li><a href="{{ link('account/ignored') }}" class="menu-linkRow">{{ phrase('ignoring') }}</a></li>
		<!--[XF:account_links:bottom]-->
	</ul>

	<!--[XF:menu_separator:below_account_links]-->
	<hr class="menu-separator" />

	<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="menu-linkRow">{{ phrase('log_out') }}</a>

	<xf:if is="$xf.visitor.canPostOnProfile()">
		<xf:form action="{{ link('members/post', $xf.visitor) }}" ajax="true"
			data-redirect="off"
			data-reset-complete="true"
			data-no-auto-focus="true"
			class="menu-footer">

			<span class="u-srOnly" id="ctrl_message">{{ phrase('update_your_status:') }}</span>
			<xf:textarea name="message" rows="1" autosize="true"
				maxlength="{$xf.options.profilePostMaxLength}"
				placeholder="{{ phrase('update_your_status...') }}"
				data-xf-init="focus-trigger user-mentioner emoji-completer" data-display="< :next" aria-labelledby="ctrl_message" />
			<div class="u-hidden u-hidden--transition u-inputSpacer">
				<xf:button type="submit" class="button--primary" icon="reply">{{ phrase('post_verb') }}</xf:button>
			</div>
		</xf:form>
	</xf:if>
</xf:set>

<xf:if is="$hasTabs">
	<ul class="tabPanes">
		<li class="is-active" role="tabpanel" id="{{ unique_id('accountMenu') }}">
			{$accountHtml|raw}
		</li>
		<xf:if is="$xf.visitor.canViewBookmarks()">
			<li role="tabpanel" id="{{ unique_id('accountMenuBookmarks') }}"
				data-href="{{ link('account/bookmarks-popup') }}"
				data-load-target=".js-bookmarksMenuBody">
				<div class="js-bookmarksMenuBody">
					<div class="menu-row">{{ phrase('loading...') }}</div>
				</div>
				<div class="menu-footer menu-footer--close">
					<a href="{{ link('account/bookmarks') }}" class="js-bookmarkShowAllLink">{{ phrase('show_all...') }}</a>
				</div>
			</li>
		</xf:if>
		<!--[XF:account_tab_panes:bottom]-->
	</ul>
<xf:else />
	{$accountHtml|raw}
</xf:if>]]></template>
    <template title="account_wrapper" type="public" addon_id="XF" version_id="2010035" version_string="2.1.0 Beta 5"><![CDATA[<xf:sidenav>
	<div class="block">
		<div class="block-container">
			<h3 class="block-header">{{ phrase('your_account') }}</h3>
			<div class="block-body">
				<!--[XF:profile_links:top]-->
				<a class="blockLink" href="{{ link('members', $xf.visitor) }}">{{ phrase('your_profile') }}</a>
				<a class="blockLink {{ $pageSelected == 'alerts' ? 'is-selected' : '' }}" href="{{ link('account/alerts') }}">
					{{ phrase('alerts') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'reactions' ? 'is-selected' : '' }}" href="{{ link('account/reactions') }}">
					{{ phrase('reactions_received') }}
				</a>
				<xf:if is="$xf.visitor.canViewBookmarks()">
					<a class="blockLink {{ $pageSelected == 'bookmarks' ? 'is-selected' : '' }}" href="{{ link('account/bookmarks') }}">
						{{ phrase('bookmarks') }}
					</a>
				</xf:if>
				<!--[XF:profile_links:bottom]-->
			</div>

			<h3 class="block-minorHeader">{{ phrase('settings') }}</h3>
			<div class="block-body">
				<!--[XF:settings_links:top]-->
				<a class="blockLink {{ $pageSelected == 'account_details' ? 'is-selected' : '' }}" href="{{ link('account/account-details') }}">
					{{ phrase('account_details') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'security' ? 'is-selected' : '' }}" href="{{ link('account/security') }}">
					{{ phrase('password_and_security') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'privacy' ? 'is-selected' : '' }}" href="{{ link('account/privacy') }}">
					{{ phrase('privacy') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'preferences' ? 'is-selected' : '' }}" href="{{ link('account/preferences') }}">
					{{ phrase('preferences') }}
				</a>
				<xf:if is="$xf.visitor.canEditSignature()">
					<a class="blockLink {{ $pageSelected == 'signature' ? 'is-selected' : '' }}" href="{{ link('account/signature') }}">
						{{ phrase('signature') }}
					</a>
				</xf:if>
				<xf:if is="$xf.app.userUpgradeCount">
					<a class="blockLink {{ $pageSelected == 'upgrades' ? 'is-selected' : '' }}" href="{{ link('account/upgrades') }}">
						{{ phrase('account_upgrades') }}
					</a>
				</xf:if>
				<xf:if is="$xf.app.connectedAccountCount">
					<a class="blockLink {{ $pageSelected == 'connected_account' ? 'is-selected' : '' }}" href="{{ link('account/connected-accounts') }}">
						{{ phrase('connected_accounts') }}
					</a>
				</xf:if>
				<a class="blockLink {{ $pageSelected == 'following' ? 'is-selected' : '' }}" href="{{ link('account/following') }}">
					{{ phrase('following') }}
				</a>
				<a class="blockLink {{ $pageSelected == 'ignored' ? 'is-selected' : '' }}" href="{{ link('account/ignored') }}">
					{{ phrase('ignoring') }}
				</a>
				<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="blockLink">{{ phrase('log_out') }}</a>
				<!--[XF:settings_links:bottom]-->
			</div>
		</div>
	</div>
</xf:sidenav>
<xf:page option="sideNavTitle">{{ phrase('your_account') }}</xf:page>

<xf:breadcrumb href="{{ link('account') }}">{{ phrase('your_account') }}</xf:breadcrumb>

{$innerContent|raw}]]></template>
    <template title="app.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[@_nav-elTransitionSpeed: @xf-animationSpeed;
@_navAccount-hPadding: @xf-paddingLarge;
@uix_sidebarNavBreakpoint: {{ property('pageWidthMax')  + 1 + ( 2 * (property('uix_sidebarNavWidth') + property('elementSpacer')) ) }}px;

.u-anchorTarget
{
	.m-stickyHeaderConfig(@xf-publicNavSticky);
	height: (@_stickyHeader-height + @_stickyHeader-offset);
	margin-top: -(@_stickyHeader-height + @_stickyHeader-offset);
}

@supports (scroll-padding-top: 10px)
{
	html:not(.has-browser-safari)
	{
		.m-stickyHeaderConfig(@xf-publicNavSticky);
		scroll-padding-top: (@_stickyHeader-height + @_stickyHeader-offset);
	}

	html:not(.has-browser-safari) .u-anchorTarget
	{
		height: 0;
		margin-top: 0;
	}
}

.uix_pageWidth--wrapped {
	width: 100%;
	<xf:if is="property('uix_pageStyle') == 'wrapped'">
		.m-pageWidth();
	</xf:if>
}

.p-pageWrapper
{
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	// .xf-pageBackground();

	.is-modalOverlayOpen &
	{
		& when (unit(xf-default(@xf-overlayMaskBlur, 0)) > 0)
		{
			filter: blur(@xf-overlayMaskBlur);
		}
	}
	
	flex-grow: 1;
	<xf:if is="property('uix_pageStyle') == 'wrapped'">
		.xf-uix_pageWrapper();
		@media (min-width: {{ property('responsiveEdgeSpacerRemoval') + 1 }}px) {
			margin-top: @xf-pageEdgeSpacer;
			margin-bottom: @xf-pageEdgeSpacer;
			padding: @xf-pageEdgeSpacer;
		}
	
		@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
			border: none;
			box-shadow: none;
		}
	</xf:if>
}

// RESPONSIVE HEADER

.p-offCanvasAccountLink
{
	display: none;
	
	.avatar {margin-right: 24px;}
}

@media (max-width: @xf-responsiveNarrow)
{
	.p-offCanvasAccountLink, .p-offCanvasRegisterLink
	{
		display: block;
	}
}

@media (max-width: @xf-pageWidthMax) {
	#uix_widthToggle--trigger {display: none;}
}

#uix_widthToggle--trigger:hover {cursor: pointer;}

.uix_page--fixed #uix_widthToggle--trigger .fa--xf:before {
	.m-faBase();
	.m-faContent(@fa-var-expand-alt);
}

{{ include('app_staffbar.less') }}
<xf:if is="{{ property('uix_viewportShowLogoBlock') }} != '100%'">
	{{ include('app_header.less') }}
</xf:if>
{{ include('app_stickynav.less') }}
{{ include('app_nav.less') }}
{{ include('app_sectionlinks.less') }}
{{ include('app_body.less') }}
{{ include('app_breadcrumbs.less') }}
{{ include('app_title.less') }}
{{ include('app_footer.less') }}
{{ include('app_inlinemod.less') }}
{{ include('app_ignored.less') }}
{{ include('app_username_styles.less') }}
{{ include('app_user_banners.less') }}
{{ include('app_alerts.less') }}
{{ include('app_content_vote.less') }}]]></template>
    <template title="app_alerts.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[.alert
{
	&.is-unread
	{
		.xf-contentHighlightBase();
	}
}

.alertToggler
{
	text-decoration: none !important;
	padding: @xf-paddingMedium;
	margin-right: -@xf-paddingMedium;

	.alert &
	{
		opacity: 0;
	}

	.alert:hover &,
	.has-touchevents &
	{
		opacity: 1;
	}
}

.alertToggler-icon
{
	font-size: .75em;
	font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);

	.is-unread &
	{
		font-weight: @faWeight-solid;
	}
}

<xf:if is="property('uix_iconFontFamily') != 'fontawesome'">
.alert {
	.alertToggler-icon:before {content: '\F0766';}
	&.is-unread .alertToggler-icon:before {content: '\F0765';}
}
</xf:if>]]></template>
    <template title="app_body.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ######################################### MAIN BODY #################################

.p-body
{
	display: flex;
	align-items: stretch;
	flex-grow: 1;
	min-height: 1px; // IE11 workaround - related to #139187
	position: relative;
}

.p-body-inner
{
	width: 100%;
	<xf:if is="property('uix_pageStyle') != 'wrapped'">
	.m-pageWidth();
	.m-pageInset();
	<xf:else />
	@media (min-width: {{ property('responsiveEdgeSpacerRemoval') + 1 }}px ) {
		flex-grow: 1;
	}
	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		.m-pageWidth();
		.m-pageInset(); 
	}
	</xf:if>
	transition: ease-in-out max-width .3s, ease-in-out left .3s, ease-in-out width .3s;
	display: flex;
	flex-direction: column;
	.m-clearFix();
	position: relative;
	left: 0;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: @xf-elementSpacer;

	.uix_page--fluid & {
		transition: @uix_moveIn max-width .3s, @uix_moveIn left .3s, @uix_moveIn width .3s;
	}

	&.p-body-inner-none {
		max-width: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/*
	> * {
	margin-bottom: 20px;

	&:last-child {margin-bottom: 0;}
}
	*/

	.p-body-header
	{
		margin-bottom: @xf-elementSpacer;
	}

}

.uix_contentWrapper {
	// margin-bottom: @xf-elementSpacer;
	flex-grow: 1;
	<xf:if is="property('uix_contentWrapper') == 1">
	padding: @xf-pageEdgeSpacer;
	.xf-uix_contentWrapperStyle();
	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		padding: {{ property('pageEdgeSpacer') / 2 }}px;
	margin-left: -{{ property('pageEdgeSpacer') / 2 }}px;
margin-right: -{{ property('pageEdgeSpacer') / 2 }}px;
border: none;
box-shadow: none;
}
</xf:if>
}

.p-body-main
{
	// display: table;
	table-layout: fixed;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
	margin-bottom: auto;
	min-height: 1px; // IE11 workaround - related to #139187
}

.p-body-content
{
	// display: table-cell;
	vertical-align: top;
	@media ( min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
		<xf:if is="{{ property('uix_sidebarLocation') == 'right' }}">
		transition: ease-in width .2s, ease-in max-width .2s;

		.uix_sidebarCollapsed & {
			transition: ease-in width .2s .2s, ease-in max-width .2s .2s;
		}
		<xf:else />
		transition: @uix_moveOut width .2s, ease-in max-width .2s;
		.uix_sidebarCollapsed & {
			transition: ease-in width .2s .2s, ease-in max-width .2s .2s;
		}
		</xf:if>
	}
	flex-grow: 1;
	max-width: 100%;
	width: 100%;

	.p-body-main--withSidebar &,
	.p-body-main--withSideNav &
	{
		// don't let the ad overflow the sidebar area -- this can happen due to how the Adsense JS works
		ins.adsbygoogle
		{
			// -10px gives a little buffer or helps account for no scrollbar being considered
			max-width: calc(~'100vw - 10px - @{xf-pageEdgeSpacer} - @{xf-pageEdgeSpacer} - @{xf-sidebarWidth} - @{xf-sidebarSpacer}');

			@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px )
			{
				// window wider than the max width, so limit to the display area without the sidebar
				max-width: calc(~'@{xf-pageWidthMax} - @{xf-pageEdgeSpacer} - @{xf-pageEdgeSpacer} - @{xf-sidebarWidth} - @{xf-sidebarSpacer}');
			}

			@media (max-width: @xf-uix_sidebarBreakpoint)
			{
				// sidebar/sidenav have been moved/hidden
				max-width: 100vw;
			}
		}
	}

	.p-body-main--withSideNav &
	{
		@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
			width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
			max-width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
			display: inline-block;
		}
	}

	.p-body-main--withSidebar &
	{
		@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
			width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
			max-width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
			display: inline-block;
		}
	}

	@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
		.p-body-main--withSidebar.p-body-main--withSideNav & {
			width: calc(~"100% - {{ (property('sidebarWidth') + property('elementSpacer')) * 2 }}px");
			max-width: calc(~"100% - {{ (property('sidebarWidth') + property('elementSpacer')) * 2 }}px");
			display: inline-block;
		}
	}
}

.p-body-pageContent
{
	> .tabs--standalone:first-child
	{
		margin-bottom: (@xf-elementSpacer) / 2;
	}
}

.p-body-pageContent {
	<xf:if is="property('uix_contentWrapper') == 2">
	.xf-uix_contentWrapperStyle();
	padding: @xf-pageEdgeSpacer;

	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		padding: {{ property('pageEdgeSpacer') / 2 }}px;
	margin-left: -{{ property('pageEdgeSpacer') / 2 }}px;
margin-right: -{{ property('pageEdgeSpacer') / 2 }}px;
border: none;
box-shadow: none;
}
</xf:if>
}

.p-body-sideNav
{
	display: table-cell;
	vertical-align: top;
	width: @xf-sidebarWidth;
	float: left;
}

.p-body-sideNavTrigger
{
	display: none;
}

.p-body-sidebar
{
	// display: table-cell;
	display: inline-block;
	vertical-align: top;
	width: @xf-sidebarWidth;

	.contentRow-figure .avatar--m
	{
		// make these avatars a bit smaller in the sidebar so the content has more space
		.m-avatarSize(@avatar-m * 2 / 3);
	}
}

.p-body-sideNavCol,
.p-body-contentCol,
.p-body-sidebarCol
{
	display: table-column;
}

.p-body-sideNavCol,
.p-body-sidebarCol
{
	width: @xf-sidebarWidth;
}

// .block[data-widget-id],
.p-body-sideNav,
.p-body-sidebar,
// .uix_extendedFooterRow,
.columnContainer-sidebar {
	.block-container {
		.xf-uix_sidebarWidgetWrapper();
	}

	.block-minorHeader,
	.block-header
	{
		display: flex;
		align-items: center;
		padding: @xf-uix_widgetPadding;
		.xf-uix_sidebarWidgetHeading();
	}

	.block-minorHeader:before,
	.block-header:before {
		.m-faBase();
		font-size: @xf-uix_iconSize !important;
		padding-right: @xf-paddingMedium;
		color: @xf-textColorMuted;
	}

	.block-footer {
		padding: @xf-uix_widgetPadding;
		.xf-uix_sidebarWidgetFooter();
	}

	.block-row {
		padding: @xf-uix_widgetPadding;
		.xf-uix_sidebarBlockRow();
	}
}

// ----  Widget icons -----

.p-body-sidebar .block .block-minorHeader:before,
.p-body-sideNavContent .block .block-minorHeader:before, 
.p-body-sidebar .block .block-header:before,
.uix_extendedFooterRow .block .block-minorHeader:before,
.p-body-sideNavContent .block .block-header:before{
	.m-faBase();
}

// .block[data-widget-definition],
// .block[data-widget-key], 
.p-body-sideNav, .p-body-sidebar, .uix_extendedFooterRow {
	<xf:if is="{{ property('uix_defaultSidebarIcon') }}">
	.block-minorHeader:before,
	.block-header:before, {
		.m-faContent(@fa-var-file-alt);
	}
	</xf:if>

	.block[data-widget-definition="th_userNavigation"] .block-minorHeader:before {
		.m-faContent(@fa-var-user);
	}
	.block[data-widget-definition="members_online"] .block-minorHeader:before {
		.m-faContent(@fa-var-users);
	}
	.block[data-widget-definition="board_totals"] .block-minorHeader:before,
	.block[data-widget-definition="online_statistics"] .block-minorHeader:before,
	.block[data-widget-definition="forum_statistics"] .block-minorHeader:before {
		.m-faContent(@fa-var-chart-bar);
	}
	.block[data-widget-definition="share_page"] .block-minorHeader:before {
		.m-faContent(@fa-var-share);
	}
	.block[data-widget-definition="most_messages"] .block-minorHeader:before {
		.m-faContent(@fa-var-comments);
	}
	.block[data-widget-definition="find_member"] .block-minorHeader:before {
		.m-faContent(@fa-var-search);
	}
	.block[data-widget-definition="new_threads"] .block-minorHeader:before,
	.block[data-widget-definition="new_profile_posts"] .block-minorHeader:before,
	.block[data-widget-definition="new_posts"] .block-minorHeader:before{
		.m-faContent(@fa-var-comment);
	}
	.block[data-widget-definition="birthdays"] .block-minorHeader:before{
		.m-faContent(@fa-var-birthday-cake);
	}
	.block[data-widget-definition="th_navigation"] .block-minorHeader:before{
		.m-faContent(@fa-var-list);
	}
	body .block[data-widget-key="thuix_footer_facebookWidget"] .block-minorHeader:before {
		.m-faBase('Brands');
		.m-faContent(@fa-var-facebook);
	}
	body .block[data-widget-definition="thuix_footer_twitterWidget"] .block-minorHeader:before{
		.m-faBase('Brands');
		.m-faContent(@fa-var-twitter);
	}
	form[data-xf-init*="poll-block"] .block-minorHeader:before {
		.m-faContent(@fa-var-poll);
	}
}

// xpress WP widget support

.p-body-sidebar .block-xpress {
	.block-minorHeader:before {
		.m-faContent(@fa-var-file-alt);
	}
	&.widget_media_gallery .block-minorHeader:before,
	&.widget_media_audio .block-minorHeader:before {
		.m-faContent(@fa-var-image);
	}
	&.widget_calendar .block-minorHeader:before {
		.m-faContent(@fa-var-calendar);
	}
	&.widget_recent_comments .block-minorHeader:before {
		.m-faContent(@fa-var-comments);
	}
	&.widget_search .block-minorHeader:before {
		.m-faContent(@fa-var-search);
	}
}

<xf:if is="!property('uix_sidebarIcons')">
.p-body-sidebar .block .block-minorHeader:before,
.p-body-sideNavContent .block .block-minorHeader:before, 
.p-body-pageContent .block .block-minorHeader:before,
.p-body-sidebar .block .block-header:before,
.p-body-sideNavContent .block .block-header:before, 
.p-body-pageContent .block .block-header:before {display: none !important;}
</xf:if>

<xf:if is="!property('uix_footerIcons')">
.uix_extendedFooterRow .block .block-minorHeader:before {display: none !important;}
</xf:if>

.uix_extendedFooterRow .block-minorHeader:before {
	font-size: @xf-uix_iconSize !important;
	padding-right: @xf-paddingMedium;
}

<xf:if is="property('uix_visitorPanelIcons')">
	.block[data-widget-definition="visitor_panel"]

	.pairs {
		dt:after {display: none;}
	}
</xf:if>

.p-body-content,
.p-body-sideNav,
.p-body-sideNavContent,
.uix_sidebarInner
{
	> :first-child
	{
		margin-top: 0;
	}

	> :last-child
	{
		margin-bottom: 0;
	}
}

@media (max-width: @xf-uix_sidebarBreakpoint )
{

	.p-body-sideNavCol,
	.p-body-contentCol,
	.p-body-sidebarCol
	{
		display: none;
		width: auto;
	}

	/*
	.p-body-main,
	.p-body-content
	{
	display: block;
}
	*/

	.p-body-content {flex-grow: 1; width: 100%;}

	.p-body-sideNav
	{
		display: block;
		width: 100%;
	}

	.p-body-sideNavTrigger
	{
		margin-bottom: ((@xf-elementSpacer) / 2);
		text-align: center;

		.button:before
		{
			.m-faBase();
			font-size: 120%;
			vertical-align: middle;
			display: inline-block;
			margin: -4px 6px -4px 0;
			.m-faContent(@fa-var-bars); //, .88em
		}

		.has-js &
		{
			display: block;
		}
	}

	.has-js .p-body-sideNavInner:not(.offCanvasMenu)
	{
		display: none;

		.m-transitionFadeDown();
	}

	.has-no-js .p-body-sideNavInner
	{
		margin-bottom: @xf-elementSpacer;
	}

	.p-body-sidebar
	{
		width: 100%;
		float: none;
		order: 1;
		flex-grow: 1;
		display: block;
		margin-top: @xf-elementSpacer;

		.uix_sidebarInner {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			flex-grow: 1;
			margin: 0 -((@xf-pageEdgeSpacer) / 2);
		}

		.uix_sidebarInner .uix_sidebar--scroller > *
		{
			margin: 0 ((@xf-pageEdgeSpacer) / 2) @xf-elementSpacer;
			min-width: @xf-sidebarWidth;
			flex: 1 1 @xf-sidebarWidth;

			.block-container {
				margin-left: 0;
				margin-right: 0;
			}

			&:last-child
			{
				margin-bottom: @xf-elementSpacer;
			}
		}

		.uix_sidebarInner.offCanvasMenu-content .uix_sidebar--scroller > * {
			flex: auto;
			min-width: 0;
		}

		// add an invisible block to ensure that the last row has the correct widths
		&:after
		{
			display: block;
			content: '';
			height: 0;
			margin: 0 ((@xf-pageEdgeSpacer) / 2);
			min-width: @xf-sidebarWidth;
			flex: 1 1 @xf-sidebarWidth;
		}

		.block-container
		{
			display: flex;
			flex-direction: column;
			height: 100%;

			.block-footer
			{
				margin-top: auto;
			}
		}
	}

	.p-body-main--withSideNav,
	.p-body-main--withSidebar
	{
		.p-body-content { padding: 0; }
	}
}

.uix_sidebarCollapsed .uix_sidebarInner {
	overflow: hidden;
}

@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
	.p-body-sideNavContent
	{
		// this is likely to contain blocks that overflow the container so account for that
		margin: 0 -@xf-pageEdgeSpacer;
		padding: 0 @xf-pageEdgeSpacer;

		.offCanvasMenu &
		{
			margin: 0;
			padding: 0;
		}
	}

	.p-body-sidebar
	{
		display: block;
		margin-left: 0;
		margin-right: 0;

		.uix_sidebarInner > *
		{
			// margin-left: 0;
			// margin-right: 0;
			min-width: 0;
		}
	}
}]]></template>
    <template title="app_breadcrumbs.less" type="public" addon_id="XF" version_id="2020070" version_string="2.2.0"><![CDATA[.breadcrumb {
	<xf:if is="property('uix_pageStyle') == 'fixed'">
	.m-pageWidth();
	</xf:if>

	.pageContent {
		<xf:if is="property('uix_pageStyle') != 'fixed'">
		.m-pageWidth();
		</xf:if>
	}
	
	.p-body-inner & {
		max-width: 100%;
		width: 100%;
		padding-left: 0;
		padding-right: 0;

		.pageContent {
			max-width: 100%;
			width: 100%;		
			padding-left: 0;
			padding-right: 0;
		}
	}
}


.p-pageWrapper .breadcrumb {
	@media (min-width: @xf-responsiveNarrow) {
		.xf-uix_breadcrumbWrapper();
	}
	
	&.p-breadcrumb--bottom {
		.xf-uix_breadcrumbWrapperBottom();
	}
	
	.pageContent {
		display: flex;
		align-items: center;
		
		> *:not(:last-child) {margin-right: @xf-paddingMedium;}
	}
	
	.uix_breadcrumb--opposite {
		margin-left: auto;
		display: inline-flex;
		align-items: center;
		
		> *:not(:last-child) {margin-right: 5px;}
	}
}

.p-breadcrumbs
{
	.m-listPlain();
	.m-clearFix();

	// margin-bottom: 5px;
	// line-height: 1.5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-grow: 1;
	@media (min-width: @xf-responsiveNarrow) {
		.xf-uix_breadcrumbStyle();
	}
	
	i {font-size: @xf-uix_iconSize;}

	&.p-breadcrumbs--bottom
	{
		// margin-top: @xf-elementSpacer;
		margin-bottom: 0;
	}

	> li
	{
		float: left;
		font-size: @xf-fontSizeSmall;
		display: flex;
		align-items: center;
		font-size: inherit;

		a
		{
			display: inline-block;
			vertical-align: bottom;
			max-width: 300px;
			.m-overflowEllipsis();
			.xf-uix_breadcrumbItem();
		}

		&:after,
		&:before
		{
			.m-faBase();
			// font-size: 90%;
			// color: @xf-textColorMuted;
		}

		&:after
		{
			.m-faContent(@fa-var-angle-right, false ltr); //, .5em
			.m-faContent(@fa-var-angle-left, false, rtl); //, .5em
			margin: 0 .5em;
		}
		
		&:first-child {
			padding-left: 0;
		}

		&:last-child
		{
			
			&:after {display: none;}
			a
			{
				font-weight: @xf-fontWeightHeavy;
				.xf-uix_breadcrumbItem__active();
				
				
			}
		}
	}
}

@media (max-width: @xf-responsiveMedium)
{
	.p-breadcrumbs > li a
	{
		max-width: 200px;
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.p-breadcrumbs
	{
		> li
		{
			font-size: @xf-fontSizeSmallest;
			display: none;
			padding-left: 0;
			
			a {
				display: inline-flex;
				align-items: center;				
			}

			&:last-child
			{
				// display: block;
				display: flex;
			}

			a
			{
				max-width: 90vw;
				color: inherit !important;
				&:hover {text-decoration: none;}
			}

			&:after
			{
				display: none;
			}

			a:before
			{
				.m-faBase();
				.m-faContent(@fa-var-chevron-left, .72em, ltr);
				.m-faContent(@fa-var-chevron-right, .72em, rtl);
				// margin-right: .5em;
				font-size: @xf-uix_iconSizeLarge !important;
				color: inherit;
			}
		}
	}
}]]></template>
    <template title="app_footer.less" type="public" addon_id="XF" version_id="2010032" version_string="2.1.0 Beta 2"><![CDATA[// ######################################### FOOTER #################################

<xf:comment> may have been removed at xf2 beta
.p-footer-debug-list
 {
	 // color: xf-default(@xf-publicFooterLink--color, inherit);

	.pairs--debug
	{
		display: inline;
		padding-right: 4px;

		> dt,
		> dd
		{
			display: inline;
			color: inherit;

			a {padding: 0;}
		}
	}
 }
</xf:comment>

.p-footer
{
	display: flex;
	flex-direction: column;
	.xf-publicFooter();

	// a {.xf-publicFooterLink();}
}

.p-footer-inner
{
	order: @xf-uix_footerMenuOrder;
	<xf:if is="property('uix_pageStyle') != 'covered' && !property('uix_forceCoverFooterMenu')">
		.m-pageWidth();
		.m-pageInset();
	</xf:if>
	padding-top: @xf-paddingMedium;
	padding-bottom: @xf-paddingMedium;
	.xf-uix_footerMenu();

	.pageContent {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		<xf:if is="property('uix_pageStyle') == 'covered' || property('uix_forceCoverFooterMenu')">
			.m-pageWidth();
			.m-pageInset();
			<xf:if is="(property('uix_pageStyle') != 'wrapped')">
				padding:0;
			</xf:if>
		</xf:if>
	}

	a {
		.xf-publicFooterLink();
	}
}

.p-footer-copyrightRow {
	order: @xf-uix_copyrightOrder;
	<xf:if is="property('uix_pageStyle') != 'covered' && !property('uix_forceCoverCopyright')">
	.m-pageWidth();
	.m-pageInset();
	</xf:if>
	.xf-uix_footerCopyrightRow();

	.pageContent {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		<xf:if is="property('uix_pageStyle') == 'covered' || property('uix_forceCoverCopyright')">
			.m-pageWidth();
			.m-pageInset();
			<xf:if is="(property('uix_pageStyle') != 'wrapped')">
				padding:0;
			</xf:if>
		</xf:if>
	}

	.p-footer-debug-list li a {
		color: inherit;

		&:hover {color: inherit; text-decoration: underline;}
	}
}

/* commented out in beta 1 (Ian)
.p-footer-row
{
	.m-clearFix();

	margin-bottom: -@xf-paddingLarge;
}

.p-footer-row-main
{
	float: left;
	margin-bottom: @xf-paddingLarge;
}

.p-footer-row-opposite
{
	float: right;
	margin-bottom: @xf-paddingLarge;
}
*/

.p-footer-linkList
{
	.m-listPlain();
	// .m-clearFix();
	display: inline-flex;
	flex-wrap: wrap;
    align-items: center;
	> li
	{
		/* commented out in beta 1 (Ian)
		float: left;
		margin-right: .5em;
		margin: @xf-paddingMedium;
		*/

		&:last-child
		{
			margin-right: 0;
		}

		a
		{
			padding: 6px;
			border-radius: @xf-borderRadiusSmall;
			display: inline-block;

			&:hover
			{
				.xf-uix_footerLinkHover();
				text-decoration: none;
				// background-color: fade(@xf-publicFooterLink--color, 10%);
			}
		}
	}

	&.p-footer-choosers {
		margin: -6px;
		a {
			margin: 6px;
			.xf-uix_footerChooser();


			&:hover {.xf-uix_footerChooserHover();}

			// i {display: none;}
		}
	}
}

.p-footer-rssLink
{
	> span
	{
		position: relative;
		top: -1px;

		display: inline-block;
		width: 1.44em;
		height: 1.44em;
		line-height: 1.44em;
		text-align: center;
		font-size: .8em;
		background-color: #FFA500;
		border-radius: 2px;
	}

	.fa-rss
	{
		color: white;
	}
}

/*
.p-footer-copyright
{
	margin-top: @xf-elementSpacer;
	text-align: center;
	font-size: @xf-fontSizeSmallest;
}

.p-footer-debug
{
	margin-top: @xf-paddingLarge;
	text-align: right;
	font-size: @xf-fontSizeSmallest;
}
*/

@media (max-width: @xf-responsiveMedium)
{
	.p-footer-row-main,
	.p-footer-row-opposite
	{
		float: none;
	}

	.p-footer-copyright
	{
		text-align: left;
		padding: 0 4px; // aligns with other links
	}
}]]></template>
    <template title="app_header.less" type="public" addon_id="XF" version_id="2020034" version_string="2.2.0 Beta 4"><![CDATA[// MAIN HEADER ROW

.p-header
{
	.xf-publicHeader();
	<xf:if is="property('uix_pageStyle') == 'fixed'">
		.m-pageWidth();
	</xf:if>

	.p-header-logo img {max-width: @xf-uix_logoWidth;}

	a
	{
		color: inherit;
	}
	
	.p-header-logo img {width: 100%;}
}

.p-header-inner
{
	.m-pageInset();
	<xf:if is="property('uix_pageStyle') != 'fixed'">
		.m-pageWidth();
	</xf:if>
	position: relative;
}

.p-header-content
{
	// padding: @xf-paddingMedium 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	max-width: 100%;
	
	<xf:if is="property('uix_viewportCenterLogo') == '100%'">
		justify-content: center;
		flex-direction: column;
		
		.p-nav-opposite {margin-top: @xf-paddingLarge; margin-left: 0;}
		.p-header-logo {margin-right: 0;}
	</xf:if>
	
	@media (max-width: @xf-uix_viewportCenterLogo) {
		justify-content: center;
		flex-direction: column;
		
		.p-nav-opposite {margin-top: @xf-paddingLarge; margin-left: 0;}
		.p-header-logo {margin-right: 0;}
	}
}

.p-header-logo
{
	vertical-align: middle;
	// margin-right: auto;

	a
	{
		color: inherit;
		text-decoration: none;
	}

	&.p-header-logo--text
	{
		font-size: @xf-fontSizeLargest;
	}

	&.p-header-logo--image
	{
		img
		{

			&[src$="/xenforo-logo.svg"]
			{
				height: 36px;
			}
			// vertical-align: bottom;
			// max-width: 100%;
			// max-height: 200px;
		}
	}

	.uix_logoIcon {.xf-uix_logoIconStyle();}
}


@media (max-width: @xf-responsiveNarrow)
{
	.p-header-logo
	{
		// max-width: 100px;

		&.p-header-logo--text
		{
			font-size: @xf-fontSizeLarge;
			font-weight: @xf-fontWeightNormal;
			.m-overflowEllipsis();
		}
	}

	.p-navgroup-link
	{
		.p-navGroup--member &
		{
			margin-left: 5px;

			&:first-of-type
			{
				margin-left: 0;
			}
		}

	}
}
]]></template>
    <template title="app_inlinemod.less" type="public" addon_id="XF" version_id="2020031" version_string="2.2.0 Beta 1"><![CDATA[// #################################### INLINE MOD BUTTON ################

.inlineModButton
{
	display: inline-block;
	position: relative;

	i:before
	{
		display: inline-block;
		.m-faBase();
		.m-faContent(@fa-var-check-square, 1em); //, .88em
		vertical-align: -1px;
		font-size: 1.2em;
		margin: -.2em 0;
		line-height: 1;
	}

	&.inlineModButton--noIcon i
	{
		display: none;
	}

	&.is-mod-active
	{
		color: @xf-textColorAttention;

		.inlineModButton-count
		{
			display: inline;
		}
	}

	&:not(.inlineModButton--withLabel)
	{
		.inlineModButton-label
		{
			.m-visuallyHidden();
		}
	}
}

.inlineModButton-count
{
	display: none;
	position: absolute;
	top: -3px;
	left: -6px;
	.xf-contentHighlightBase();
	border: @xf-borderSize solid @xf-borderColorAccentContent;
	border-radius: @xf-borderRadiusSmall;
	padding: 1px 2px;
	font-size: 9px;
	line-height: 1;

	.inlineModButton--noIcon &
	{
		position: static;
		font-size: 80%;
		padding-top: 0;
		padding-bottom: 0;
	}
}

// #################################### INLINE MOD BAR ################

.inlineModBar
{
	.xf-inlineModBar();
	.m-transitionFadeDown();
	.m-clearFix();

	.input,
	.button
	{
		padding-top: @xf-paddingSmall;
		padding-bottom: @xf-paddingSmall;
		height: auto;
		line-height: inherit;
	}

	&.is-active:first-of-type
	{
		.m-dropShadow(0, 0, 8px, 3px, 0.3);
	}
}

.inlineModBar-inner
{
	.m-pageWidth();
	.m-pageInset();

	display: flex;
	align-items: center;
}

.inlineModBar-controls
{
	.m-listPlain();
	margin-right: auto;

	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: 35px;
	max-width: 100%;

	> li
	{
		float: left;
		display: inline-block;
		margin-right: 1em;

		&:last-child
		{
			margin-right: 0;
		}
	}
}

.inlineModBar-close
{
	float: right;
	margin-left: 1em;
	order: 2;
}

.inlineModBar-title
{
	font-weight: @xf-fontWeightHeavy;
}

.button.inlineModBar-goButton
{
	font-size: @xf-fontSizeNormal;
	line-height: 1.5; // matches select
	min-width: 0;
}

.inlineModBarCover
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	cursor: pointer;
}]]></template>
    <template title="app_nav.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[// navEl / Navigation Elements for header navigation

.p-navEl
{
	.m-clearFix();
	display: inline-flex;
	align-items: center;
}

.p-navEl-linkHolder
{
	float: left;
}

.p-navEl-link
{
	float: left;
	// .m-transition(opacity, background; @_nav-elTransitionSpeed);
	text-decoration: none !important;
	max-height: 100%;

	&.p-navEl-link--menuTrigger
	{
		cursor: pointer;

		&:after
		{
			.m-menuGadget(); // .58em
			opacity: .5;
			.m-transition(opacity; @_nav-elTransitionSpeed);
		}

		&:hover:after
		{
			opacity: 1;
		}
	}
}

.p-navEl-splitTrigger
{
	float: left;
	opacity: .5;
	cursor: pointer;
	text-decoration: none;
	.m-transition(all; @_nav-elTransitionSpeed);

	&:after
	{
		.m-menuGadget(); // .58em
		line-height: 1;
	}

	&:hover
	{
		opacity: 1;
		text-decoration: none;
	}
}

// HEADER NAV ROW

.p-nav
{
	.xf-publicNav();
	<xf:if is="property('uix_pageStyle') == 'fixed'">
		.m-pageWidth();
	</xf:if>

	transition: ease-in .15s all;

	a:not(.button)
	{
		color: inherit;
	}

	.p-navSticky.is-sticky &
	{
		.p-nav-list .p-navEl.is-selected,
		.p-account
		{
			border-radius: 0;
		}
	}
}

a.uix_logo {
	text-decoration: none;
}

.p-nav-inner
{

	<xf:if is="property('uix_pageStyle') == 'covered'">
		.m-pageWidth();
                .m-pageInset(0px);
	</xf:if>
	position: relative;
	<xf:if is="property('uix_navigationBarHeight')">
		height: @xf-uix_navigationBarHeight;
	</xf:if>

	.p-header-logo {
		display: inline-flex;
		align-items: center;
		margin-right: @xf-paddingLarge;
		
		.uix_logo {
			display: flex;
		}

		&.p-header-logo--image img {
			max-height: calc(@xf-uix_navigationBarHeight - (@xf-uix_navLogoVertSpacing * 2));

			.is-sticky & {
				max-height: calc(@xf-uix_stickyNavHeight - (@xf-uix_navLogoVertSpacing * 2));
			}
		}
	}

	.m-clearFix();
	display: flex;
	align-items: center;
}

.p-nav .uix_activeNavTitle {
	.xf-uix_activeNavTitleStyle();
	display: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	@media (max-width: @xf-publicNavCollapseWidth) and (min-width: @xf-responsiveNarrow) {
		display: inline-block;
	}
}

.p-nav .p-nav-menuTrigger
{
	display: none;
	vertical-align: middle;
	align-self: center;
	// margin-left: max(0px, @xf-pageEdgeSpacer - 6px);
	margin-right: 5px;
	padding: 0 8px;

	&:hover
	{
		text-decoration: none;
		cursor: pointer;
	}

	i:after
	{
		.m-faBase();
		font-size: @xf-fontSizeLargest;
		.m-faContent(@fa-var-bars);
		vertical-align: bottom;
		font-size: @xf-uix_iconSizeLarge;
	}

	.p-nav-menuText
	{
		display: none;
	}
}
<xf:if is="property('uix_logoSmall')">
.uix_logoSmall
{
	<xf:if is="property('uix_brandmarkImage__breakpoint') != '100%'">
		display: none;
	</xf:if>
	// max-width: 100px;
	align-self: center;

	img
	{
		display: block;
		max-height: @header-navHeight;

		&:not([src$=".svg"])
		{
			width: auto;
		}
	}
}

<xf:if is="property('uix_brandmarkImage__breakpoint') == '100%'">
	.p-header-logo.p-header-logo--image .uix_logo {display: none;}
</xf:if>

@media (max-width: {{ property('uix_brandmarkImage__breakpoint') - 1 }}px) {
	.uix_logoSmall {display: inline-block;}
	.p-header-logo.p-header-logo--image .uix_logo {display: none;}
}
</xf:if>

.uix_logo--text {
	display: flex;
	align-items: center;
	white-space: nowrap;
	.xf-uix_logoText__style();
	
	&:hover {
		text-decoration: none;
	}
}

<xf:if is="property('uix_logoTextBreakpoint')">
@media (max-width: @xf-uix_logoTextBreakpoint) {
	.uix_logo--text {font-size: @xf-uix_responsiveLogoFontSize;}
}
</xf:if>

.p-nav-scroller
{
	margin-right: auto;
	max-width: 100%;

	.hScroller-scroll:not(.is-calculated)
	{
		// IE11 seems to want to flash a vertical scrollbar without this here
		overflow: hidden;
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-publicNav--background-color, transparent),
			xf-default(@xf-publicNav--color, ~""),
			xf-intensify(@xf-publicNav--color, 10%)
		);
	}
}

.p-nav-list
{
	.m-listPlain();
	.m-clearFix();
	display: flex;
	align-items: center;

	font-size: 0;

	// this applies padding that will be contained within the scroller.
	// it needs font-size 0 to not create extra space though
	/*
	&:before,
	&:after
	{
		display: inline-block;
		width: @xf-pageEdgeSpacer;
		content: '';
	}
	*/

	> li
	{
		display: inline-block;
		vertical-align: bottom;
		font-size: @xf-fontSizeNormal;

		&:first-child
		{
			margin-left: 0;
		}
	}

	.badgeContainer:after {margin-left: 4px;}

	.m-navElHPadding(@xf-publicNavPaddingH);

	.p-navEl
	{
		.xf-publicNavTab();
		.m-transition(all; @_nav-elTransitionSpeed);

		&.is-selected
		{
			.xf-publicNavSelected();

			.p-navEl-link
			{

				<xf:if is="{{ property('uix_viewportWidthRemoveSubNav') }} != '100%'">
				@media (min-width: {{ property('uix_viewportWidthRemoveSubNav') + 1 }}px ) {
					padding-right: @xf-publicNavPaddingH; // since the split trigger is hidden
				}
				</xf:if>

				&:hover
				{
					background: none;
					text-decoration: none;
					color: inherit;
				}
			}

			.p-navEl-splitTrigger
			{
				<xf:if is="{{ property('uix_viewportWidthRemoveSubNav') }} != '100%'">
					@media (min-width: {{ property('uix_viewportWidthRemoveSubNav') + 1 }}px ) {
						display: none;
					}
				</xf:if>
			}
		}

		&:not(.is-selected):not(.is-menuOpen)
		{
			&:hover,
			// .p-navEl-link:hover,
			// .p-navEl-splitTrigger:hover
			{
				.xf-publicNavTabHover();
			}

			.p-navEl-link:hover,
			.p-navEl-splitTrigger:hover {
				text-decoration: none;
				color: inherit;
			}
		}

		&.is-menuOpen
		{
			.xf-publicNavTabMenuOpen();
			border-top-left-radius: xf-default(@xf-publicNavSelected--border-top-left-radius, 0);
			border-top-right-radius: xf-default(@xf-publicNavSelected--border-top-right-radius, 0);
			// .m-dropShadow(0, 5px, 10px, 0, .35);
			a
			{
				// text-decoration: none;
				// opacity: 1;
			}
		}

	}

	.p-navEl-link,
	.p-navEl-splitTrigger
	{
		padding-top: @xf-publicNavPaddingV;
		padding-bottom: @xf-publicNavPaddingV;
		display: inline-flex;
		align-items: center;

		&:hover {background: none !important;}
	}
}

.p-navSticky--primary.is-sticky
{
	.p-nav-list
	{
		.p-navEl-link.p-navEl-link--splitMenu
		{
			padding-right: ((@xf-publicNavPaddingH) / 4);
		}

		.p-navEl.is-selected .p-navEl-splitTrigger
		{
			display: inline;
			position: relative;

			&:before
			{
				content: '';
				position: absolute;
				left: 0;
				top: 5px;
				bottom: 5px;
				width: 0;
				border-left: @xf-borderSize solid fade(xf-default(@xf-publicNavSelected--color, transparent), 35%);
			}
		}
	}
}

@media (max-width: @xf-publicNavCollapseWidth)
{
	.has-js
	{
		.p-nav-inner
		{
			// min-height: 45px;
		}
		.p-nav .p-nav-menuTrigger
		{
			display: inline-flex;
		}
		.p-sectionLinks .p-sectionLinks--group {
			display: none;
		}
		.p-nav-scroller
		{
			display: none;
		}
	}
}

// ACCOUNT/VISITOR/SEARCH SECTION

.p-nav-opposite
{
	margin-left: auto;
	// margin-right: @xf-pageEdgeSpacer;
	text-align: right;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
}

.p-navgroup
{
	float: left;
	.m-clearFix();
	// background: @xf-publicHeaderAdjustColor;
	border-top-left-radius: @xf-borderRadiusMedium;
	border-top-right-radius: @xf-borderRadiusMedium;
	display: inline-flex;

	&.p-discovery
	{
		// margin-left: .5em;

		&.p-discovery--noSearch
		{
			margin-left: 0;
		}
		// i {line-height: 1;}

	}

	.p-navgroup-linkText {padding-left: @xf-paddingSmall;}
}

<xf:if is="property('uix_removeVisitorTabsText')">
@media (max-width: @xf-uix_viewportRemoveVisitorTabsText) {
	.p-navgroup.p-navgroup--member .p-navgroup-linkText, .p-discovery .p-navgroup-linkText {display: none;}
	
	.p-navgroup.p-navgroup--member .p-navgroup-link i,
	.p-navgroup.p-discovery .p-navgroup-link i {
		&:after, &:before {
			font-size: @xf-uix_iconSizeLarge;
		}
	}
}
</xf:if>

<xf:if is="property('uix_removeRegisterText')">
@media (max-width: @xf-uix_viewportRemoveRegisterText) {
	.p-navgroup--guest .p-navgroup-linkText {display: none;}
	
	.p-navgroup.p-navgroup--guest .p-navgroup-link i {
		&:after, &:before {
			font-size: @xf-uix_iconSizeLarge;
		}
	}	
}
</xf:if>

<xf:if is="property('uix_condenseVisitorTabs')">
@media (max-width: @xf-uix_viewportCondenseVisitorTabs) {
	.p-account.p-navgroup--member {
		.p-navgroup-link--conversations {display: none;}
		.p-navgroup-link--alerts {display: none;}
	}
}
</xf:if>

.p-navgroup-link
{
	float: left;
	padding: (@xf-publicNavPaddingV / 2);
	// border-left: 1px solid @xf-publicHeaderAdjustColor;
	display: inline-flex;
	align-items: center;

	<xf:if is="property('uix_removeVisitorTabsText')">
	@media (max-width: @xf-uix_viewportRemoveVisitorTabsText) {
		padding: @xf-paddingSmall calc(@xf-paddingSmall * 2);
	}
	</xf:if>

	&:first-of-type
	{
		border-top-left-radius: @xf-borderRadiusMedium;
		border-left: none;
	}

	&:last-of-type
	{
		border-top-right-radius: @xf-borderRadiusMedium;
	}

	&:hover
	{
		text-decoration: none;
		// background: xf-intensify(@xf-publicHeaderAdjustColor, 5%);
	}

	&.p-navgroup-link--user
	{
		.m-overflowEllipsis();
		max-width: 150px;

		.avatar
		{
			// .m-avatarSize((@xf-fontSizeNormal) * (@xf-lineHeightDefault));
			.m-avatarSize(@xf-uix_iconSizeLarge);
			margin: 1px 0;

			@media (min-width: @xf-uix_removeVisitorTabsText) {
				.m-avatarSize(@xf-uix_iconSize);
				font-size: 11px;
			}
		}
	}

	&.badgeContainer
	{
		// opacity: .6;
		position: relative;

		&:after
		{
			position: absolute;
			// left: (@_navAccount-hPadding - 6px);
			// top: (@xf-publicNavPaddingV - 2px);
			right: 2px;
			top: 3px;
			padding: 1px 3px;
			margin: 0;
			font-size: 10px;
			line-height: 11px;
		}

		&:hover,
		&.badgeContainer--highlighted
		{
			// opacity: 1;
		}
	}

	&.is-menuOpen
	{
		.xf-publicNavTabMenuOpen();
		// .m-dropShadow(0, 5px, 10px, 0, .35);
		opacity: 1;
	}

	/*
	&.p-navgroup-link--iconic
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1.2em;
			text-align: center;
		}
	}
	*/

	&.p-navgroup-link--conversations
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1em;
			.m-faContent(@fa-var-envelope, 1em);
		}
	}

	&.p-navgroup-link--alerts
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1em;
			.m-faContent(@fa-var-bell, 1em);
		}
	}

	&.p-navgroup-link--bookmarks i:after
	{
		.m-faContent(@fa-var-bookmark); //, .75em
	}

	&.p-navgroup-link--whatsnew i:after
	{
		.m-faBase();
		.m-faContent(@fa-var-bolt, .5em);
		width: auto;
	}

	&.p-navgroup-link--search i:after
	{
		.m-faBase();
		.m-faContent(@fa-var-search);
	}

	&.p-navgroup-link--logIn
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1em;
			.m-faContent(@fa-var-key);
		}
	}

	&.p-navgroup-link--register
	{
		i:after
		{
			.m-faBase();
			display: inline-block;
			min-width: 1em;
			.m-faContent(@fa-var-clipboard);
		}
	}
}

.p-navgroup-link--whatsnew
{
	display: none;

	.p-navgroup-link:first-of-type& + .p-navgroup-link
	{
		border-top-left-radius: @xf-borderRadiusMedium;
		border-left: none;
	}
}

<xf:if is="property('uix_visitorTabsMobile') != 'initial'">
	@media (max-width: @xf-responsiveNarrow) {
		.p-navgroup.p-account {
			.p-navgroup-link--user {display: none;}
			.p-navgroup-link--conversations {display: none;}
			.p-navgroup-link--alerts {display: none;}
		}
		<xf:if is="property('uix_visitorTabsMobile') == 'tabbar'">
			.p-navgroup.p-discovery {
				.p-navgroup-link--whatsnew {display: none;}
			}
		</xf:if>
	}
</xf:if>

@media (max-width: @xf-responsiveWide)
{
	/*
	.p-navgroup-link
	{
		&.p-navgroup-link--iconic .p-navgroup-linkText,
		&.p-navgroup-link--textual i
		{
			display: none;
		}
		&.p-navgroup-link--textual
		{
			.m-overflowEllipsis();
			max-width: 110px;
		}

		&.p-navgroup-link--iconic i:after
		{
			text-align: center;
		}
	}
	*/
}


@media (max-width: @xf-publicNavCollapseWidth)
{
	.p-navgroup-link--whatsnew
	{
		display: inline-flex;

		.p-navgroup-link:first-of-type& + .p-navgroup-link
		{
			// border-top-left-radius: 0;
			// border-left: 1px solid @xf-publicHeaderAdjustColor;
		}
	}

	.has-js
	{
		.p-nav-opposite
		{
			align-self: center;
			// margin-right: max(0px, @xf-pageEdgeSpacer - 6px);

			.p-navgroup
			{
				background: none;
			}

			.p-navgroup-link
			{
				border: none;
				border-radius: @xf-borderRadiusMedium;

				&.is-menuOpen
				{
					.m-borderBottomRadius(0);
				}

				&.badgeContainer
				{
					opacity: 1;
				}
			}
		}
	}
}

/*
@media (max-width: 359px)
{
	.p-navgroup-link&.p-navgroup-link--user
	{
		display: none;
	}
}

@media (max-width: 374px)
{
	.p-navgroup-link.p-navgroup-link--register
	{
		display: none;
	}
}
*/

.p-navgroup .p-navgroup-link i {
	&:after, &:before {
		@media (min-width: @xf-uix_viewportRemoveRegisterText) {
			font-size: @xf-uix_iconSize;
			// padding-right: @xf-paddingMedium;
		}
	}
}

<xf:if is="property('uix_rightAlignNavigation')">
	@media (min-width: @xf-publicNavCollapseWidth) {
		.p-nav-inner .p-nav-opposite,
		.p-sectionLinks .p-nav-opposite {margin-left: 0;}

		.p-nav-inner .p-nav-scroller,
		.p-sectionLinks .p-sectionLinks-inner {margin-right: 0; margin-left: auto;}
	}
</xf:if>]]></template>
    <template title="app_prepend.less" type="public" addon_id="XF" version_id="2020051" version_string="2.2.0 Release Candidate 1"><![CDATA[.m-pageWidth(@min-width: @xf-pageEdgeSpacer)
{
	/*
	max-width: @xf-pageWidthMax;
	padding: 0 @xf-pageEdgeSpacer;
	margin: 0 auto;
	*/
}

.m-pageInset(@defaultPadding: @xf-pageEdgeSpacer)
{
	/*
	padding-left: @defaultPadding;
	padding-right: @defaultPadding;

	// iPhone X/Xr/Xs support
	@supports(padding: max(0px))
	{
		&
		{
			padding-left: ~"max(@{defaultPadding}, env(safe-area-inset-left))";
			padding-right: ~"max(@{defaultPadding}, env(safe-area-inset-right))";
		}
	}
	*/
}

.m-navElHPadding(@padding)
{
	.p-navEl-link
	{
		padding: 0 @padding;

		&.p-navEl-link--splitMenu
		{
			padding-right: ((@padding) / 8);
		}

		&.p-navEl-link--menuTrigger
		{
			padding-right: ((@padding) / 3); // equal to splitTrigger padding-right

			&:after
			{
				padding-left: ((@padding) / 4 + (@padding) / 3); // equal to splitMenu padding-right + splitTrigger padding-left
			}
		}
	}

	.p-navEl-splitTrigger
	{
		padding: 0 ((@padding) / 3);
	}
}]]></template>
    <template title="app_sectionlinks.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[// SUB SECTION LINKS

.p-sectionLinks
{
	.xf-publicSubNav();
	<xf:if is="property('uix_pageStyle') == 'fixed'">
		.m-pageWidth();
	</xf:if>
	
	transition: ease-in .15s all;
	
	.p-sectionLinks--group {
		display: flex; 
		align-items: center;
		
		<xf:if is="property('uix_rightAlignNavigation')">
			&:first-child {
				margin-left: auto;
			}
		</xf:if>
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-publicSubNav--background-color, transparent),
			xf-default(@xf-publicSubNav--color, ~""),
			xf-default(@xf-publicSubNavElHover--color, ~"")
		);
	}
	
	.p-nav-opposite a:not(.button)
	{
		color: inherit;

		&:hover {
			.xf-publicSubNavElHover();
		}
	}

	&.p-sectionLinks--empty
	{
		height: 10px;
		display: none;
	}

	.pageContent {
		display: flex;
		align-items: center;
		position: relative;
		justify-content: space-between;
		<xf:if is="property('publicNavSticky')">
			min-height: @xf-uix_stickySectionLinkHeight;
			height: @xf-uix_stickySectionLinkHeight;
		</xf:if>
		<xf:if is="property('uix_pageStyle') == 'covered'">
			.m-pageWidth();
		</xf:if>
	}

	.p-navgroup .p-navgroup-link i:after,
	.p-navSearch-trigger i:after {font-size: @xf-uix_iconFont;}
	.p-navgroup-link.p-navgroup-link--user .avatar {
		font-size: @xf-uix_iconSizeLarge;
		.m-avatarSize(@xf-uix_iconSize);
	}
	.p-navSearch-trigger,
	.p-navgroup .p-navgroup-link {padding: @xf-paddingSmall;}
}

.p-sectionLinks-inner
{
	// .m-clearFix();
	// .m-pageWidth();

	@defaultPadding:  max(0px, @xf-pageEdgeSpacer - @xf-publicSubNavPaddingH);
	.m-pageInset(@defaultPadding);
	margin-right: auto;
}


.p-sectionLinks-list
{
	.m-listPlain();

	font-size: 0;

	a
	{
		color: inherit;
	}

	> li
	{
		display: inline-block;
	}

	.m-navElHPadding(@xf-publicSubNavPaddingH);

	.p-navEl
	{
		font-size: @xf-publicSubNav--font-size;
		// padding-top: @xf-paddingMedium;
		// padding-bottom: @xf-paddingMedium;
		height: @xf-uix_stickyStaffBarHeight;

		&:hover
		{
			.xf-publicSubNavElHover();

			a
			{
				text-decoration: @xf-publicSubNavElHover--text-decoration;
			}
		}
		<xf:comment>
		&.is-menuOpen
		{
			.xf-publicSubNavElMenuOpen();
			.m-borderBottomRadius(0);
			.m-dropShadow(0, 5px, 10px, 0, .35);
		}
		</xf:comment>
	}

	.p-navEl-link,
	.p-navEl-splitTrigger
	{
		padding-top: @xf-publicSubNavPaddingV;
		padding-bottom: @xf-publicSubNavPaddingV;
	}
}

<xf:if is="(property('uix_searchPosition') != 'tablinks') &&
	(property('uix_loginTriggerPosition ') != 'tablinks') &&
	(property('uix_userTabsPosition ') != 'tablinks')">

	@media (max-width: @xf-publicNavCollapseWidth) {
		.has-js .p-sectionLinks-inner
		{
			display: none;
		}
	}

</xf:if>]]></template>
    <template title="app_staffbar.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ######################################### STAFF BAR #################################

.p-staffBar
{
	.xf-publicStaffBar();
		<xf:if is="property('uix_pageStyle') == 'fixed'">
			.m-pageWidth();
			.m-pageInset();
		</xf:if>

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-publicStaffBar--background-color, transparent),
			xf-default(@xf-publicStaffBar--color, ~""),
			xf-intensify(@xf-publicStaffBar--color, 10%)
		);
	}
	
	<xf:if is="{{ property('uix_stickyStaffBar')}}">
	@supports (position: sticky) or (position: -webkit-sticky)
	{
		&
		{
			position: -webkit-sticky;
			position: sticky;
			top: 0;

			&.is-sticky-broken,
			&.is-sticky-disabled
			{
				position: static;
				top: auto;
			}
		}
	}
	</xf:if>

	.pageContent {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		position: relative;
		height: 100%;
		<xf:if is="property('uix_pageStyle') == 'covered'">
			.m-pageWidth();
			.m-pageInset();
		</xf:if>
		
		min-height: @xf-uix_stickyStaffBarHeight;

		.p-nav-opposite a:not(.button)
		{
			color: inherit;

			&:hover {.xf-uix_staffBarTabHover();}
		}
		
		a {
			.xf-uix_staffBarTab();
			
			&:hover {.xf-uix_staffBarTabHover();}
		}

	}


}

.p-staffBar-inner
{
	.m-clearFix();
	// padding-top: @xf-paddingMedium;
	//padding-bottom: @xf-paddingMedium;
}

.p-staffBar-link
{
	display: inline-block;
	vertical-align: top;
	color: inherit;
	padding: 4px @xf-paddingMedium;
	margin-right: .35em;
	.xf-uix_staffBarTab();

	&:last-child
	{
		margin-right: 0;
	}

	&:hover
	{
		text-decoration: none;
		// background: xf-diminish(@xf-publicStaffBar--background-color, 6%);
		border-radius: @xf-borderRadiusSmall;
		.xf-uix_staffBarTabHover();
	}
}]]></template>
    <template title="app_stickynav.less" type="public" addon_id="XF" version_id="2020070" version_string="2.2.0"><![CDATA[// STICKY NAV SETUP

<xf:if is="property('publicNavSticky')">

.p-pageWrapper .p-navSticky
{
	z-index: @zIndex-1;

	&.is-sticky
	{
		z-index: @zIndex-4;
		// .m-dropShadow(0, 2px, 5px, 0px, .26);
		<xf:if is="!{{ property('uix_removeHeaderWrapper')}}">
		position: fixed !important;
		top: 0;
		bottom: auto !important;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		</xf:if>

		<xf:if is="property('uix_pageStyle') == 'wrapped' && !property('uix_removeHeaderWrapper')">
		@uix_pageSpacerTotal: @xf-pageEdgeSpacer * 2;
		@uix_adjustedWrappedPageWidth: @xf-pageWidthMax - @uix_pageSpacerTotal;

		width: 100vw !important;
		@media (min-width: @xf-responsiveEdgeSpacerRemoval) {
			width: ~'calc(100vw - @{uix_pageSpacerTotal}) !important';
		}

		@media (min-width: @uix_adjustedWrappedPageWidth) {
			width: @uix_adjustedWrappedPageWidth !important;	
		}
		</xf:if>

		> * {box-shadow: @xf-uix_elevation1; border-radius: 0 !important;}

		.p-nav {.xf-uix_stickyNavigationStyle();}

		.p-sectionLinks {.xf-uix_sectionLinksStickyStyle();}

		<xf:if is="property('uix_pageStyle') != 'covered'">
		// .m-pageWidth();
		padding: 0 !important;

		</xf:if>

		<xf:if is="property('uix_pageStyle') == 'fluid'">
		> * {
			max-width: 100%;
		}
		</xf:if>

		.p-nav-inner {
			height: @xf-uix_stickyNavHeight;

			.p-navEl,
			.p-navEl-link {max-height: @xf-uix_stickyNavHeight;}
		}

		<xf:if is="property('publicNavSticky')">
		.p-sectionLinks {
			border-bottom: 0;

			.pageContent {
				height: @xf-uix_stickySectionLinkHeight;
			}
		}
		</xf:if>
	}

	<xf:if is="{{ property('uix_removeHeaderWrapper')}}">
	@supports (position: sticky) or (position: -webkit-sticky)
	{
		&
		{
			position: -webkit-sticky;
			position: sticky;
			top: 0;

			&.is-sticky-broken,
			&.is-sticky-disabled
			{
				position: static;
				top: auto;
			}
		}
	}
	</xf:if>
}

</xf:if>

<xf:if is="property('uix_mainTabsSticky')">
.uix_headerContainer .uix_mainTabBar.is-sticky {
	position: fixed !important;
	bottom: auto !important;
	left: 0;
	right: 0;
	@media (max-width: @xf-uix_search_maxResponsiveWidth ) {z-index: 500;}
	margin: 0 auto;
	border-radius: 0 !important;

	.tabs-tab {height: @xf-uix_mainTabsHeight;}

	box-shadow: @xf-uix_elevation1;

	<xf:if is="property('uix_pageStyle') == 'wrapped' && !property('uix_removeHeaderWrapper')">
	width: @xf-pageWidthMax - (@xf-pageEdgeSpacer * 2) !important;
	</xf:if>
}

.uix_mainTabBar.is-sticky {
	box-shadow: @xf-uix_elevation1;
	z-index: 300;
}

</xf:if>

<xf:if is="property('uix_stickyStaffBar')">
.p-staffBar.is-sticky {
	<xf:if is="!{{ property('uix_removeHeaderWrapper')}}">
	position: fixed !important;
	bottom: auto !important;
	top: 0 !important;
	left: 0;
	right: 0;
	margin: 0 auto;
	</xf:if>
	z-index: 500;
	border-radius: 0 !important;
	.xf-uix_stickyStaffbarStyle();
	height: @xf-uix_stickyStaffBarHeight;

	<xf:if is="property('publicNavSticky') == 'none'">
	box-shadow: @xf-uix_elevation1;
	</xf:if>

	<xf:if is="property('uix_pageStyle') == 'wrapped'&& !property('uix_removeHeaderWrapper')">
	width: @xf-pageWidthMax - (@xf-pageEdgeSpacer * 2) !important;
	</xf:if>
}

<xf:if is="{{ property('uix_removeHeaderWrapper')}}">
.p-staffBar {
	@supports (position: sticky) or (position: -webkit-sticky)
	{
		&
		{
			position: -webkit-sticky;
			position: sticky;
			top: 0;

			&.is-sticky-broken,
			&.is-sticky-disabled
			{
				position: static;
				top: auto;
			}
		}
	}
}
</xf:if>

</xf:if>]]></template>
    <template title="app_title.less" type="public" addon_id="XF" version_id="2020051" version_string="2.2.0 Release Candidate 1"><![CDATA[.p-body-header {
	<xf:if is="property('uix_pageStyle') == 'fixed'">
	.m-pageWidth();
	</xf:if>

	.pageContent {
		<xf:if is="property('uix_pageStyle') != 'fixed'">
		.m-pageWidth();
		</xf:if>
	}
	
	.p-body-inner & {
		max-width: 100%;
		width: 100%;
		padding-left: 0;
		padding-right: 0;

		.pageContent {
			max-width: 100%;
			width: 100%;		
			padding-left: 0;
			padding-right: 0;
		}
	}
}

.p-pageWrapper > .p-body-header .pageContent {
	min-height: 36px;
}

.p-pageWrapper .p-body-header {
	.xf-uix_titlebar();
	
	.pageContent {
		display: flex;
		align-items: center;
		
		.p-title-pageAction {margin-top: 0;}
		
		@media(max-width: @xf-responsiveMedium) {
			flex-wrap: wrap;
		}
	}
	
	.contentRow {flex-grow: 1;}
	.uix_headerInner {
		margin: 5px;
		margin-left: 0;
		flex-grow: 1;
	}
	
	.uix_headerInner--opposite {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
		margin-left: auto;
		margin-right: 0;
	}
	
	.uix_headerInner + .uix_headerInner--opposite {
		margin: 5px auto;
	}
	
	.p-title
	{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		max-width: 100%;

		&.p-title--noH1
		{
			flex-direction: row-reverse;
		}

		.p-title-pageAction {
			margin: 5px 0;
		}
	}

	.p-title-value
	{
		padding: 0;
		margin: 0 0 3px 0;
		font-size: @xf-fontSizeLargest;
		font-weight: @xf-fontWeightNormal;
		margin-right: auto;
		min-width: 0;
		.xf-uix_pageTitle();

		.has-no-flexbox &
		{
			float: left;
		}
	}

	.p-title-pageAction
	{
		margin-left: @xf-paddingLarge;
		
		@media(max-width: @xf-responsiveNarrow) {
			margin-left: 0;
			margin-top: @xf-paddingLarge;
		}
		
		.has-no-flexbox &
		{
			float: right;
		}
	}

	.p-description
	{
		margin: 0;
		padding: 0;
		font-size: inherit;
		color: inherit;
	}
}

.p-title-pageAction .button + .button {margin-left: @xf-paddingMedium;}

@media (max-width: @xf-responsiveNarrow)
{
	.p-title-value
	{
		font-size: @xf-fontSizeLarger;
	}
}]]></template>
    <template title="app_user_banners.less" type="public" addon_id="XF" version_id="2000470" version_string="2.0.4"><![CDATA[.m-userBannerVariation(@color; @bg; @border: false)
{
	color: @color;
	background: @bg;
	border-color: xf-intensify(@bg, 10%);
	border-radius: @xf-borderRadiusMedium;

	& when (iscolor(@border))
	{
		border-color: @border;
	}
}

.userBanner
{
	font-size: 75%;
	font-size: 11px;
	font-weight: @xf-fontWeightNormal;
	font-style: normal;
	padding: 1px @xf-paddingMedium;
	padding: 1px 3px;
	border: 1px solid transparent;
	border-radius: @xf-borderRadiusSmall;
	text-align: center;
	display: inline-block;

	strong
	{
		font-weight: inherit;
	}

	// variations
	&.userBanner--hidden
	{
		background: none;
		border: none;
		box-shadow: none;
	}

	&.userBanner--staff,
	&.userBanner--primary
	{
		.m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
		.m-userBannerVariation(#fff, @xf-uix_primaryColor, @xf-uix_primaryColor);
	}

	&.userBanner--accent
	{
		.m-userBannerVariation(#fff, @xf-uix_secondaryColor, @xf-uix_secondaryColor);
	}

	&.userBanner--red { .m-userBannerVariation(white, #d80000); }
	&.userBanner--green { .m-userBannerVariation(white, green); }
	&.userBanner--olive { .m-userBannerVariation(white, olive); }
	&.userBanner--lightGreen { .m-userBannerVariation(black, #ccf9c8, #bee8ba); }
	&.userBanner--blue { .m-userBannerVariation(white, #0008e3); }
	&.userBanner--royalBlue { .m-userBannerVariation(white, royalblue); }
	&.userBanner--skyBlue { .m-userBannerVariation(white, #7cc3e0); }
	&.userBanner--gray { .m-userBannerVariation(white, gray); }
	&.userBanner--silver { .m-userBannerVariation(black, silver); }
	&.userBanner--yellow { .m-userBannerVariation(black, #ffff91, #e6e687); }
	&.userBanner--orange { .m-userBannerVariation(black, #ffcb00); }
}]]></template>
    <template title="approval_queue.less" type="public" addon_id="XF" version_id="2010035" version_string="2.1.0 Beta 5"><![CDATA[.approvalQueue
{
	.block-container.approvalQueue-item--approve
	{
		.message,
		.message-cell--user,
		.message-cell--extra
		{
			background: @xf-inlineModHighlightColor;
		}

		.message .message-userArrow:after
		{
			border-right-color: @xf-inlineModHighlightColor;
		}
	}

	.block-container.approvalQueue-item--delete
	{
		.message-cell--user,
		.message-cell--main
		{
			opacity: 0.25;
		}
	}

	.block-container.approvalQueue-item--spam
	{
		border-color: red;

		.message-cell--user,
		.message-cell--main
		{
			opacity: 0.25;
		}
	}
}]]></template>
    <template title="bb_code.less" type="public" addon_id="XF" version_id="2020270" version_string="2.2.2"><![CDATA[@_bbCodeBlock-spacing: .5em;
@_bbCodeBlock-paddingV: @xf-paddingMedium;
@_bbCodeBlock-paddingH: @xf-paddingLarge;
@_bbCodeBlock-expandTriggerHeight: (@xf-bbCodeBlockExpandHeight) / 2;

.bbCodeBlock
{
	display: flow-root;
	margin: @_bbCodeBlock-spacing 0;
	.xf-bbCodeBlock();

	&.bbCodeBlock--quote
	{
		.bbCodeBlock-content
		{
			font-size: @xf-fontSizeSmall;
		}
	}
}

.bbCodeBlock-title
{
	padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH;
	.xf-bbCodeBlockTitle();
	.m-clearFix();
}

a.bbCodeBlock-sourceJump
{
	color: inherit;
	text-decoration: none;

	&:hover
	{
		text-decoration: underline;
	}

	&:after
	{
		.m-faBase();
		.m-faContent(@fa-var-arrow-circle-up); //, 1em
		display: inline-block;
		margin-left: 5px;
	}
}

.bbCodeBlock-content
{
	position: relative;
	padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH;
	.m-clearFix();
}

.bbCodeBlock--code .bbCodeBlock-content {background-color: @xf-contentBg; color: @xf-textColor;}

.bbCodeBlock-expandLink
{
	display: none;
	position: absolute;
	top: (@xf-bbCodeBlockExpandHeight) + (@_bbCodeBlock-paddingV * 2) - (@_bbCodeBlock-expandTriggerHeight);
	left: 0;
	right: 0;
	height: @_bbCodeBlock-expandTriggerHeight;
	cursor: pointer;
	z-index: @zIndex-1;

	.m-gradient(
		fade(@xf-bbCodeBlock--background-color, 0%),
		xf-default(@xf-bbCodeBlock--background-color, transparent),
		transparent,
		0%,
		60%
	);

	a
	{
		position: absolute;
		bottom: @_bbCodeBlock-paddingV;
		left: 0;
		right: 0;
		text-align: center;
		font-size: @xf-fontSizeSmall;
		color: @xf-textColorAttention;
		text-decoration: none;
	}
}

.bbCodeBlock--screenLimited
{
	.bbCodeBlock-content
	{
		max-height: 300px;
		max-height: 70vh;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
}

.bbCodeBlock--expandable
{
	overflow: hidden;
	.m-transition(-xf-height, height, padding, margin, border;);

	.bbCodeBlock-content
	{
		overflow: hidden;

		.bbCodeBlock:not(.bbCodeBlock--expandable) .bbCodeBlock-content
		{
			overflow: visible;
		}
		.bbCodeBlock.bbCodeBlock--screenLimited .bbCodeBlock-content
		{
			overflow: auto;
		}
	}

	.bbCodeBlock-expandContent
	{
		max-height: @xf-bbCodeBlockExpandHeight;
		overflow: hidden;
	}

	&.is-expandable
	{
		.bbCodeBlock-expandLink
		{
			display: block;
		}
	}

	&.is-expanded
	{
		.bbCodeBlock-expandContent
		{
			max-height: none;
		}

		.bbCodeBlock-expandLink
		{
			display: none;
		}
	}
}

.bbCodeBlock--unfurl
{
	.xf-contentHighlightBase();

	padding: @_bbCodeBlock-paddingV;
	width: 650px;
	max-width: 100%;
	border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;

	overflow: hidden;

	.contentRow-header
	{
		margin: 0;
		font-size: @xf-fontSizeNormal;
		font-weight: normal;
		.m-overflowEllipsis();
	}

	.contentRow-snippet
	{
		font-size: @xf-fontSizeSmaller;
		font-style: normal;
	}

	.contentRow-minor
	{
		font-size: @xf-fontSizeSmaller;
	}

	&.is-pending
	{
		opacity: 0.5;

		&.is-recrawl
		{
			opacity: 1;
		}
	}

	&.is-simple
	{
		.contentRow-figure
		{
			display: none;
		}
	}

	.bbCodeBlockUnfurl-icon
	{
		width: 12px;
		vertical-align: -2px;
	}
}

.bbCodeCode
{
	margin: 0;
	padding: 0;

	.has-hiddenscroll &
	{
		// solely to workaround this Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=914844
		// TODO: remove when fixed
		padding-bottom: @xf-paddingLarge;
	}

	font-family: @xf-fontFamilyCode;
	font-size: @xf-fontSizeSmall;
	line-height: @xf-lineHeightDefault;
	-ltr-rtl-text-align: left;

	direction: ltr;
	white-space: pre;
	position: relative;

	.m-tabSize();

	code
	{
		font-family: inherit;
	}

	.prism-token
	{
		&.prism-comment,
		&.prism-prolog,
		&.prism-doctype,
		&.prism-cdata
		{
			& when (@xf-styleType = light) { color: #a50; }
			& when (@xf-styleType = dark) { color: #8292a2; }
		}

		&.prism-constant
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #f92672; }
		}

		&.prism-tag
		{
			& when (@xf-styleType = light) { color: #170; }
			& when (@xf-styleType = dark) { color: #f92672; }
		}

		&.prism-boolean
		{
			& when (@xf-styleType = light) { color: #219; }
			& when (@xf-styleType = dark) { color: #ae81ff; }
		}

		&.prism-symbol,
		&.prism-atrule,
		&.prism-keyword
		{
			& when (@xf-styleType = light) { color: #708; }
			& when (@xf-styleType = dark) { color: #e6db74; }
		}

		&.prism-selector,
		&.prism-function
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #e6db74; }
		}

		&.prism-deleted
		{
			color: #d44;
		}

		&.prism-inserted
		{
			color: #292;
		}

		&.prism-string,
		&.prism-attr-value
		{
			& when (@xf-styleType = light) { color: #a11; }
			& when (@xf-styleType = dark) { color: #a6e22e; }
		}

		&.prism-number
		{
			& when (@xf-styleType = light) { color: #164; }
			& when (@xf-styleType = dark) { color: #ae81ff; }
		}

		&.prism-attr-name,
		&.prism-char,
		&.prism-builtin
		{
			& when (@xf-styleType = light) { color: #00c; }
			& when (@xf-styleType = dark) { color: #a6e22e; }
		}

		&.prism-regex,
		&.prism-important,
		&.prism-variable,
		&.prism-package
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #fd971f; }
		}

		&.prism-class-name,
		&.prism-important,
		&.prism-bold
		{
			& when (@xf-styleType = light) { color: #00f; }
			& when (@xf-styleType = dark) { color: #e6db74; }
		}

		&.prism-bold
		{
			font-weight: bold;
		}

		&.prism-italic,
		&.prism-constant
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #f92672; }

			font-style: italic;
		}

		&.prism-entity
		{
			cursor: help;
		}
	}
}

.bbCodeInline
{
	margin: 0;
	.xf-bbCodeInlineCode();
	font-family: @xf-fontFamilyCode;
	line-height: @xf-lineHeightDefault;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	white-space: pre-wrap;
}

.bbCodeSpoiler
{
	margin: @_bbCodeBlock-spacing 0;
}

.bbCodeSpoiler-button
{
	.has-no-js & { display: none; }
}

.bbCodeSpoiler-content
{
	.m-hiddenEl(true);
	.has-no-js & { display: block !important; }

	> .bbCodeBlock--spoiler
	{
		margin: .2em 0 0;
	}
}

.bbCodeInlineSpoiler
{
	background-color: rgba(0, 0, 0, 0);
	color: rgba(0, 0, 0, 0);
	text-shadow: @xf-textColorMuted 0 0 14px;
	cursor: pointer;

	a, span
	{
		color: inherit !important;;

		.has-js &
		{
			pointer-events: none;
		}
	}

	.smilie
	{
		filter: blur(8px) grayscale(90%);
	}

	&:hover
	{
		text-shadow: @xf-textColorMuted 0 0 10px;
	}
}]]></template>
    <template title="category_view" type="public" addon_id="XF" version_id="2020031" version_string="2.2.0 Beta 1"><![CDATA[<xf:title>{$category.title}</xf:title>
<xf:description>{$category.description|raw}</xf:description>

<xf:if is="!$category.isSearchEngineIndexable()">
	<xf:head option="metaNoindex"><meta name="robots" content="noindex" /></xf:head>
</xf:if>

<xf:macro template="metadata_macros" name="canonical_url" arg-canonicalUrl="{{ link('canonical:categories', $category) }}" />

<xf:macro template="category_macros" name="category_page_options" arg-category="{$category}" />
<xf:breadcrumb source="$category.getBreadcrumbs(false)" />

<xf:if is="$nodeTree">
	<div class="block uix_nodeList block">
		<div class="block-outer"><xf:trim>
			<xf:if contentcheck="true">
				<div class="block-outer-opposite">
					<div class="buttonGroup">
					<xf:contentcheck>
						<xf:if is="$xf.visitor.user_id && $hasForumDescendents">
							<xf:button href="{{ link('categories/mark-read', $category, {'date': $xf.time}) }}"
								class="button--link" overlay="true">
								{{ phrase('mark_read') }}
							</xf:button>
						</xf:if>
					</xf:contentcheck>
					</div>
				</div>
			</xf:if>
		</xf:trim></div>
		<div class="block-container">
			<div class="block-body">
				<xf:macro template="forum_list" name="node_list"
					arg-children="{$nodeTree}"
					arg-extras="{$nodeExtras}"
					arg-depth="2" />
			</div>
		</div>
	</div>
<xf:else />
	<div class="blockMessage">{{ phrase('there_is_nothing_to_display') }}</div>
</xf:if>

<xf:widgetpos id="category_view_sidebar" context-category="{$category}" position="sidebar" />
]]></template>
    <template title="code_editor.less" type="public" addon_id="XF" version_id="2020032" version_string="2.2.0 Beta 2"><![CDATA[/* XF-RTL:disable */

.codeEditor
{
	// standard editor with fixed-width font and 55% screen height, used when the code editor is the primary
	// editable element on screen
	&.CodeMirror
	{
		height: 55vh;
		direction: ltr;

		.xf-input();
		font-family: @xf-fontFamilyCode;
		padding: 0;
		-ltr-rtl-border-color: @xf-borderColorHeavy @xf-borderColorLight @xf-borderColorLight @xf-borderColorHeavy;

		//color: @xf-inputTextColor;
		//background: @xf-inputBgColor;
		//border: @xf-borderSize solid;
		//border-radius: @xf-borderRadiusMedium;

		.m-inputZoomFix();

		&.CodeMirror-focused
		{
			.xf-inputFocus();
		}

		&.CodeMirror-simplescroll
		{
			.CodeMirror-sizer
			{
				// Bit hacky but solves issue with the simplescroll bars overlapping the content
				padding-right: 30px !important;
			}
		}
	}

	// short editor, taking only 30% of the vertical height
	&.codeEditor--short
	{
		height: 30vh;
	}

	// show an editor that shrinks to a very small height for very little content
	&.codeEditor--autoSize
	{
		height: auto;

		.CodeMirror-lines
		{
			min-height: (@xf-fontSizeNormal * @xf-lineHeightDefault * 2) + 8px; // 2 lines, 4px padding from .CodeMirror-lines
		}
	}

	// like --autoSize, but shrinks to a single line when empty
	&.codeEditor--oneLine
	{
		min-height: auto;
	}

	// use proportional font - use this when syntax highlighting is useful, but not imperative, like HTML-enabled descriptions
	&.codeEditor--proportional
	{
		font-family: @xf-fontFamilyUi;
	}
}

[disabled] + .codeEditor,
[disabled] + .codeEditor.CodeMirror-focused
{
	.xf-inputDisabled();
}

[readonly] + .codeEditor,
[readonly] + .codeEditor.CodeMirror-focused
{
	background: mix(xf-default(@xf-input--background-color, @xf-contentBg), xf-default(@xf-inputDisabled--background-color, @xf-paletteNeutral1));
}

// Default CSS (mostly)
{{ include('codemirror.less') }}

// Extra stuff for DARK styles, taking values from CodeMirror's DARCULA theme
.cm-s-default
{
	& when (@xf-styleType = dark)
	{
		&.CodeMirror
		{
			.CodeMirror-cursor { border-left: 1px solid #dddddd; }
			.CodeMirror-activeline-background { background: #3A3A3A; }
			.CodeMirror-selected { background: #085a9c; }
			.CodeMirror-gutters { background: rgb(72, 72, 72); border-right: 1px solid grey; color: #606366 }
			.CodeMirror-matchingbracket { background-color: #3b514d; color: yellow !important; }
		}

		span.cm-keyword { font-weight: bold; color: #CC7832; }
		span.cm-atom { font-weight: bold; color: #CC7832; }
		span.cm-number { color: #6897BB; }
		span.cm-def { color: #FFC66D; }
		span.cm-variable { color: #A9B7C6; }
		span.cm-property { color: #A9B7C6; }
		span.cm-operator { color: #A9B7C6; }
		span.cm-variable-2 { color: #A9B7C6; }
		span.cm-variable-3,
		span.cm-comment { color: #808080; }
		span.cm-string { color: #6A8759; }
		span.cm-string-2 { color: #6A8759; }
		span.cm-meta { color: #BBB529; }
		span.cm-qualifier { color: #6A8759; }
		span.cm-builtin { color: #A9B7C6; }
		span.cm-bracket { color: #A9B7C6; }
		span.cm-tag { color: #CC7832; }
		span.cm-attribute { color: #6A8759; }
		span.cm-link { color: #287BDE; }
		span.cm-error { color: #BC3F3C; }
		span.cm-invalidchar { color: #BC3F3C; }
		span.cm-type { color: #A9B7C6; }
	}
	// background-color: #fff;
}

/* XF-RTL:enable */]]></template>
    <template title="content_vote_macros" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1"><![CDATA[<xf:macro name="vote_control"
	arg-link="!"
	arg-content="!"
	arg-extraClass="">

	<xf:set var="$currentVote" value="{{ $content.getVisitorContentVote() }}" />
	<xf:set var="$canVote" value="{{ $content.canVoteOnContent() }}" />
	<div class="contentVote {{ $currentVote ? 'is-voted' : '' }} js-contentVote {$extraClass}" data-xf-init="content-vote" data-content-id="{{ $content.getEntityContentTypeId() }}">
		<a href="{{ $canVote ? link($link, $content, {'type' : 'up'}) : 'javascript:' }}"
			class="contentVote-vote {{ $canVote ? '' : 'is-disabled' }} contentVote-vote--up {{ ($currentVote == 'up') ? 'is-voted' : '' }}"
			data-vote="up"><span class="u-srOnly">{{ phrase('upvote') }}</span></a>

		<span class="contentVote-score {{ $content.vote_score > 0 ? 'is-positive' : ''  }} {{ $content.vote_score < 0 ? 'is-negative' : ''  }} js-voteCount"
			data-score="{$content.vote_score}">{$content.vote_score_short}</span>

		<xf:if is="$content.isContentDownvoteSupported()">
			<a href="{{ $canVote ? link($link, $content, {'type' : 'down'}) : 'javascript:' }}"
				class="contentVote-vote {{ ($canVote AND $content.canDownvoteContent()) ? '' : 'is-disabled' }} contentVote-vote--down {{ ($currentVote == 'down') ? 'is-voted' : '' }}"
				data-vote="down"><span class="u-srOnly">{{ phrase('downvote') }}</span></a>
		</xf:if>
	</div>

</xf:macro>

<xf:macro name="vote_display" arg-content="!" arg-extraClass="">

	<div class="contentVote js-contentVote contentVote--display {{ $content.getVisitorContentVote() ? 'is-voted' : '' }} {$extraClass}" data-content-id="{{ $content.getEntityContentTypeId() }}">
		<span class="contentVote-score {{ $content.vote_score > 0 ? 'is-positive' : ''  }} {{ $content.vote_score < 0 ? 'is-negative' : ''  }} js-voteCount" data-score="{$content.vote_score}">{$content.vote_score_short}</span>
		<span class="contentVote-description">{{ $content.vote_score == 1 ? phrase('vote_noun') : phrase('votes') }}</span>
	</div>

</xf:macro>

<xf:macro name="vote_display_placeholder" arg-extraClass="">

	<div class="contentVote contentVote--display contentVote--placeholder {$extraClass}">
		<span class="contentVote-score">-</span>
		<span class="contentVote-description">{{ phrase('votes') }}</span>
	</div>

</xf:macro>]]></template>
    <template title="conversation_list" type="public" addon_id="XF" version_id="2011072" version_string="2.1.10 Patch 2"><![CDATA[<xf:title page="{$page}">{{ phrase('conversations') }}</xf:title>

<xf:js src="xf/inline_mod.js" min="1" />

<xf:pageaction if="$xf.visitor.canStartConversation()">
	<xf:button href="{{ link('conversations/add') }}" class="button--cta" icon="write">{{ phrase('start_conversation') }}</xf:button>
</xf:pageaction>

<div class="block" data-xf-init="inline-mod" data-type="conversation" data-href="{{ link('inline-mod') }}">
	<div class="block-outer">
		<xf:pagenav
			page="{$page}" perpage="{$perPage}" total="{$total}"
			link="conversations" params="{$filters}"
			wrapperclass="block-outer-main" />
		<div class="block-outer-opposite">
			<div class="buttonGroup">
				<xf:macro template="inline_mod_macros" name="button"
					arg-variant="inlineModButton--withLabel"
					arg-label="{{ phrase('selected') }}"
					arg-tooltip="{{ false }}" />
			</div>
		</div>
	</div>

	<div class="block-container">
		<div class="block-filterBar">
			<div class="filterBar">
				<xf:if contentcheck="true">
					<ul class="filterBar-filters">
					<xf:contentcheck>
						<xf:if is="$filters.starter_id AND $starterFilter">
							<li><a href="{{ link('conversations', null, $filters|replace('starter_id', null)) }}"
								class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
								{{ phrase('started_by_x', {'name': $starterFilter.username}) }}</a></li>
						</xf:if>
						<xf:if is="$filters.receiver_id AND $receiverFilter">
							<li><a href="{{ link('conversations', null, $filters|replace('receiver_id', null)) }}"
								class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
								{{ phrase('received_by_x', {'name': $receiverFilter.username}) }}</a></li>
						</xf:if>
						<xf:if is="$filters.starred">
							<li><a href="{{ link('conversations', null, $filters|replace('starred', null)) }}"
								class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
								<span class="filterBar-filterToggle-label">{{ phrase('show_only:') }}</span>
								{{ phrase('starred') }}</a></li>
						</xf:if>
						<xf:if is="$filters.unread">
							<li><a href="{{ link('conversations', null, $filters|replace('unread', null)) }}"
								class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
								<span class="filterBar-filterToggle-label">{{ phrase('show_only:') }}</span>
								{{ phrase('filter_unread') }}</a></li>
						</xf:if>
					</xf:contentcheck>
					</ul>
				</xf:if>

				<a class="filterBar-menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('filters') }}</a>
				<div class="menu" data-menu="menu" aria-hidden="true">
					<div class="menu-content">
						<h4 class="menu-header">{{ phrase('show_only:') }}</h4>
						<xf:form action="{{ link('conversations/filters') }}">
							<div class="menu-row menu-row--separated">
								<xf:radio name="filter_type">
									<xf:option value="" selected="{{ !$starterFilter AND !$receiverFilter }}">{{ phrase('show_all_conversations') }}</xf:option>
									<xf:option value="started" selected="{{ $starterFilter ? true : false }}" data-hide="true"
										label="{{ phrase('started_by...') }}">

										<xf:textbox name="starter" value="{{ $starterFilter ? $starterFilter.username : '' }}" ac="single"
											maxlength="{{ max_length($xf.visitor, 'username') }}"/>
									</xf:option>
									<xf:option value="received" selected="{{ $receiverFilter ? true : false }}" data-hide="true"
										label="{{ phrase('received_by...') }}">

										<xf:textbox name="receiver" value="{{ $receiverFilter ? $receiverFilter.username : '' }}" ac="single"
											maxlength="{{ max_length($xf.visitor, 'username') }}" />
									</xf:option>
								</xf:radio>
							</div>
							<div class="menu-row menu-row--separated">
								<xf:checkbox>
									<xf:option name="starred" selected="{$filters.starred}" label="{{ phrase('starred_conversations') }}" />
									<xf:option name="unread" selected="{$filters.unread}" label="{{ phrase('unread_conversations') }}" />
								</xf:checkbox>
							</div>

							<div class="menu-footer">
								<span class="menu-footer-controls">
									<xf:button type="submit" class="button--primary">{{ phrase('filter') }}</xf:button>
								</span>
							</div>
							<xf:hiddenval name="apply">1</xf:hiddenval>
						</xf:form>
					</div>
				</div>
			</div>
		</div>

		<div class="block-body">
			<xf:if is="$userConvs is not empty">
				<div class="structItemContainer">
					<xf:foreach loop="$userConvs" value="$userConv">
						<xf:macro template="conversation_list_macros" name="item" arg-userConv="{$userConv}" />
					</xf:foreach>
				</div>
				<xf:else />
				<div class="block-row">{{ phrase('there_no_conversations_to_display') }}</div>
			</xf:if>
		</div>
		<div class="block-footer block-footer--split uix_conversationsFooterMobile">
			<div class="block-footer-main">
				<a href="{{ link('conversations') }}">{{ phrase('show_all...') }}</a>
			</div>
			<xf:if is="$xf.visitor.canStartConversation()">
				<div class="block-footer-opposite">
					<a href="{{ link('conversations/add') }}">{{ phrase('start_new_conversation') }}</a>					
				</div>
			</xf:if>
		</div>
	</div>

	<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}"
		link="conversations" params="{$filters}"
		wrapperclass="block-outer block-outer--after" />
</div>

<xf:widgetpos id="conversation_list_sidebar" position="sidebar" />]]></template>
    <template title="conversation_list_macros" type="public" addon_id="XF" version_id="2010370" version_string="2.1.3"><![CDATA[<xf:macro name="item"
	arg-userConv="!"
	arg-allowInlineMod="{{ true }}">

	<xf:css src="structured_list.less" />

	<div class="structItem structItem--conversation {{ $userConv.isUnread() ? 'is-unread' : '' }} js-inlineModContainer" data-author="{{ $userConv.Master.Starter.username ?: $userConv.Master.username }}">
		<div class="structItem-cell structItem-cell--icon">
			<div class="structItem-iconContainer">
				<xf:avatar user="$userConv.Master.Starter" size="s" defaultname="{$userConv.Master.username}" />
			</div>
		</div>
		<div class="structItem-cell structItem-cell--main" data-xf-init="touch-proxy">
			<xf:if contentcheck="true">
				<ul class="structItem-statuses">
				<xf:contentcheck>
					<xf:if is="$userConv.is_starred">
						<li>
							<i class="structItem-status structItem-status--starred" aria-hidden="true" title="{{ phrase('starred')|for_attr }}"></i>
							<span class="u-srOnly">{{ phrase('starred') }}</span>
						</li>
					</xf:if>
					<xf:if is="!$userConv.Master.conversation_open">
						<li>
							<i class="structItem-status structItem-status--locked" aria-hidden="true" title="{{ phrase('locked')|for_attr }}"></i>
							<span class="u-srOnly">{{ phrase('locked') }}</span>
						</li>
					</xf:if>
				</xf:contentcheck>
				</ul>
			</xf:if>

			<a href="{{ link('conversations/unread', $userConv) }}" class="structItem-title" data-tp-primary="on">{$userConv.title}</a>

			<div class="structItem-minor">
				<xf:if contentcheck="true">
					<ul class="structItem-extraInfo">
					<xf:contentcheck>
						<xf:if is="$allowInlineMod">
							<li><xf:checkbox standalone="true">
								<xf:option value="{$userConv.conversation_id}" class="js-inlineModToggle" />
							</xf:checkbox></li>
						</xf:if>
					</xf:contentcheck>
					</ul>
				</xf:if>

				<ul class="structItem-parts">
					<li>
						<ul class="listInline listInline--comma listInline--selfInline">
							<li><xf:username user="$userConv.Master.Starter" defaultname="{$userConv.Master.username}" title="{{ phrase('conversation_starter') }}" /></li><xf:trim>
							</xf:trim><xf:foreach loop="$userConv.Master.recipients" value="$recipient" if="{$recipient.user_id} != {$userConv.Master.user_id}"><xf:trim>
								<li><xf:username user="{$recipient}" defaultname="{{ phrase('unknown_member') }}" /></li>
							</xf:trim></xf:foreach>
						</ul>
					</li>
					<li class="structItem-startDate"><a href="{{ link('conversations', $userConv) }}" rel="nofollow"><xf:date time="{$userConv.Master.start_date}" /></a></li>
					<xf:if is="$userConv.reply_count >= $xf.options.messagesPerPage">
						<span class="structItem-pageJump">
						<xf:foreach loop="{{ last_pages($userConv.reply_count + 1, $xf.options.messagesPerPage, $xf.options.lastPageLinks) }}" value="$p">
							<a href="{{ link('conversations', $userConv, {'page': $p}) }}">{$p}</a>
						</xf:foreach>
						</span>
					</xf:if>
				</ul>
			</div>
		</div>
		<div class="structItem-cell structItem-cell--meta">
			<dl class="pairs pairs--justified">
				<dt>{{ phrase('replies') }}</dt>
				<dd>{$userConv.reply_count|number}</dd>
			</dl>
			<dl class="pairs pairs--justified structItem-minor">
				<dt>{{ phrase('participants') }}</dt>
				<dd>{$userConv.Master.recipient_count|number}</dd>
			</dl>
		</div>
		<div class="structItem-cell structItem-cell--latest">
			<a href="{{ link('conversations/latest', $userConv) }}" rel="nofollow"><xf:date time="{$userConv.last_message_date}" class="structItem-latestDate" /></a>
			<div class="structItem-minor"><xf:username user="{$userConv.Master.last_message_cache}" /></div>
		</div>
	</div>
</xf:macro>]]></template>
    <template title="conversation_message_macros" type="public" addon_id="XF" version_id="2010036" version_string="2.1.0 Beta 6"><![CDATA[<xf:macro name="message" arg-message="!" arg-conversation="!" arg-position="" arg-lastRead="{{ null }}">
	<xf:css src="message.less" />
	<article class="message message--conversationMessage {{ $message.isIgnored() ? ' is-ignored' : '' }} {{ $message.isUnread($lastRead) ? 'is-unread' : '' }} js-message" data-author="{{ $message.User.username ?: $message.username }}">
		<span class="u-anchorTarget" id="convMessage-{$message.message_id}"></span>
		<div class="message-inner">
			<div class="message-cell message-cell--user">
				<xf:macro template="message_macros" name="user_info" arg-user="{$message.User}" arg-fallbackName="{$message.username}" />
			</div>
			<div class="message-cell message-cell--main">
				<div class="message-main js-quickEditTarget">
					<div class="message-content">
						<header class="message-attribution">
							<a href="{{ link('conversations/messages', $message) }}" class="message-attribution-main u-concealed" rel="nofollow">
								<xf:date time="{$message.message_date}" />
							</a>
							<span class="message-attribution-opposite">
								<xf:if is="$message.isUnread($lastRead)">
									<span class="message-newIndicator">{{ phrase('new') }}</span>
								</xf:if>
								<xf:if is="$position">#{$position|number}</xf:if>
							</span>
						</header>

						<xf:if is="$message.isIgnored()">
							<div class="messageNotice messageNotice--ignored">
								{{ phrase('you_are_ignoring_content_by_this_member') }}
							</div>
						</xf:if>

						<div class="message-userContent lbContainer js-lbContainer"
							 data-lb-id="message-{$message.message_id}"
							 data-lb-caption-title="{{ $message.User ? $message.User.username : $message.username }}"
							 data-lb-caption-desc="{{ date_time($message.message_date) }}">

							<article class="message-body js-selectToQuote">
								{{ bb_code($message.message, 'conversation_message', $message) }}
								<div class="js-selectToQuoteEnd">&nbsp;</div>
							</article>

							<xf:if is="$message.attach_count">
								<xf:macro template="message_macros" name="attachments"
										  arg-attachments="{$message.Attachments}"
										  arg-message="{$message}"
										  arg-canView="{{ true }}" />
							</xf:if>
						</div>

						<xf:macro template="message_macros" name="signature" arg-user="{$message.User}" />
					</div>
					<div class="reactionsBar js-reactionsList {{ $message.reactions ? 'is-active' : '' }}">
						<xf:reactions content="{$message}" link="conversations/messages/reactions" />
					</div>
					<footer class="message-footer">
						<xf:if contentcheck="true">
							<div class="message-actionBar actionBar">
								<xf:contentcheck>
									<xf:if contentcheck="true">
										<div class="actionBar-set actionBar-set--external">
											<xf:contentcheck>
												<xf:react content="{$message}" link="conversations/messages/react" list="< .js-message | .js-reactionsList" />

												<xf:if is="$conversation.canReply()">
													<xf:set var="$quoteLink">{{ link('conversations/reply', $conversation, {'quote': $message.message_id}) }}</xf:set>
													<xf:if is="$xf.options.multiQuote">
														<a href="{$quoteLink}"
														   class="actionBar-action actionBar-action--mq u-jsOnly js-multiQuote"
														   title="{{ phrase('toggle_multi_quote_tooltip')|for_attr }}"
														   data-message-id="{$message.message_id}"
														   data-mq-action="add">
															{{ phrase('quote') }}
														</a>
													</xf:if>
													<a href="{$quoteLink}"
													   class="actionBar-action actionBar-action--reply"
													   title="{{ phrase('reply_quoting_this_message')|for_attr }}"
													   data-xf-click="quote"
													   data-quote-href="{{ link('conversations/messages/quote', $message) }}">{{ phrase('reply') }}</a>

												</xf:if>
											</xf:contentcheck>
										</div>
									</xf:if>

									<xf:if contentcheck="true">
										<div class="actionBar-set actionBar-set--internal">
											<xf:contentcheck>
												<xf:if is="$message.canReport()">
													<a href="{{ link('conversations/messages/report', $message) }}" class="actionBar-action actionBar-action--report" data-xf-click="overlay">{{ phrase('report_verb') }}</a>
												</xf:if>

												<xf:if is="$message.canEdit()">
													<xf:js src="xf/message.js" min="1" />
													<a href="{{ link('conversations/messages/edit', $message) }}"
													   class="actionBar-action actionBar-action--edit"
													   data-xf-click="quick-edit"
													   data-editor-target="< .js-quickEditTarget">{{ phrase('edit') }}</a>
												</xf:if>

												<xf:if is="$message.canCleanSpam()">
													<a href="{{ link('spam-cleaner', $message) }}"
													   class="actionBar-action actionBar-action--spam actionBar-action--menuItem"
													   data-xf-click="overlay">{{ phrase('spam') }}</a>
												</xf:if>

												<xf:if is="$xf.visitor.canViewIps() && $message.ip_id">
													<a href="{{ link('conversations/messages/ip', $message) }}"
													   class="actionBar-action actionBar-action--ip"
													   data-xf-click="overlay">{{ phrase('ip') }}</a>
												</xf:if>
											</xf:contentcheck>
										</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</xf:if>
					</footer>
				</div>
			</div>
		</div>
	</article>
</xf:macro>]]></template>
    <template title="core.less" type="email" addon_id="XF" version_id="2020036" version_string="2.2.0 Beta 6"><![CDATA[// NOTE: THIS DOES NOT HAVE ACCESS TO public:setup.less automatically!
// THE LESS HERE SHOULD BE KEPT AS SIMPLE AS POSSIBLE

// UI.X Font Sizes

/* solution for pxs */
@fontSizeNormal: unit(10 * @xf-fontSizeNormal, px);
@fontSizeLargest: unit(10 * @xf-fontSizeLargest, px);
@fontSizeSmall: unit(10 * @xf-fontSizeSmall, px);

/* solution for rems
@fontSizeNormal: (0.625 * @xf-fontSizeNormal);
@fontSizeLargest: (0.625 * @xf-fontSizeLargest);
@fontSizeSmall: (0.625 * @xf-fontSizeSmall);
*/

body
{
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;

	background-color: @xf-emailBg;
	font-size: @fontSizeNormal;
	font-family: @xf-emailFont;
	line-height: @xf-lineHeightDefault;
	color: @xf-emailTextColor;
}

table
{
	border-spacing: 0;
	mso-table-lspace: 0pt;
	mso-table-rspace: 0pt;
}

table,
td
{
	border-collapse: collapse;
}

a
{
	color: @xf-emailLinkColor;
	text-decoration: none;
}

.bbImage
{
	width: auto;
	height: auto;
	max-width: 100%;
}

#bodyTable
{
	height: 100% !important;
	width: 100% !important;
	margin: 0;
	padding: 0;
	background-color: @xf-emailBg;
}

#bodyTableContainer
{
	background-color: @xf-emailBg;
}

.container
{
	width: 100%;
	max-width: 600px;
}

.header
{
	color: @xf-emailHeaderColor;
	padding: @xf-paddingMedium @xf-paddingLarge;
	border-top-left-radius: @xf-borderRadiusMedium;
	border-top-right-radius: @xf-borderRadiusMedium;
	font-family: @xf-emailFont;
	font-size: @fontSizeLargest;
	line-height: @xf-lineHeightDefault;
}

.header a
{
	color: @xf-emailHeaderColor;
}

.content
{
	background-color: @xf-emailContentBg;
	border-radius: @xf-borderRadiusSmall;
	color: @xf-emailTextColor;
	padding: @xf-paddingLarge;
	font-size: @fontSizeNormal;
	font-family: @xf-emailFont;
	line-height: @xf-lineHeightDefault;
}

.content .bbImage
{
	max-width: 100%;
}

.content > p:first-child
{
	margin-top: 0;
}

.content > p:last-child
{
	margin-bottom: 0;
}

.footer
{
	padding: @xf-paddingMedium @xf-paddingLarge;
	text-align: center;
	color: @xf-emailTextColorMuted;
	font-size: @fontSizeSmall;
	font-family: @xf-emailFont;
	line-height: @xf-lineHeightDefault;
}

.footer a
{
	color: @xf-emailTextColorMuted;
	text-decoration: underline;
}

.footerExtra
{
	margin-top: 1em;
}

h2
{
	font-size: @fontSizeLargest;
	font-weight: normal;
	margin: @xf-paddingLarge 0;
	padding: 0;
}

hr
{
	border: 0;
	border-bottom: @xf-borderSize solid @xf-emailBorderColor;
}

div.message
{
	border-left: @xf-borderSizeFeature solid @xf-borderColorFeature;
	margin: @xf-paddingLarge 0;
	padding: @xf-paddingLarge;
}

div.quote
{
	border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
	border-top: @xf-borderSize solid @xf-emailBorderColor;
	border-bottom: @xf-borderSize solid @xf-emailBorderColor;
	border-right: @xf-borderSize solid @xf-emailBorderColor;
	background: @xf-emailContentAltBg;
	margin: @xf-paddingLarge 0;
	padding: @xf-paddingLarge;
}

.quote-name
{
	color: @xf-textColorAttention;
	font-size: @fontSizeSmall;
	margin-bottom: @xf-paddingMedium;
}

pre.code
{
	margin: @xf-paddingLarge 0;
	padding: @xf-paddingLarge;
	border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
	border-top: @xf-borderSize solid @xf-emailBorderColor;
	border-bottom: @xf-borderSize solid @xf-emailBorderColor;
	border-right: @xf-borderSize solid @xf-emailBorderColor;
	background: @xf-emailContentAltBg;
	max-width: 600px;
	overflow: auto;
}

.textLink
{
	color: @xf-emailTextColor;
	text-decoration: none;
}

.linkBar
{
	padding: @xf-paddingMedium;
	background-color: @xf-emailContentAltBg;
	border-top: @xf-borderSize solid @xf-emailBorderColor;
}

.button
{
	display: inline-block;
	padding: 5px 10px;
	border: none;
	border-radius: @xf-borderRadiusMedium;
	color: @xf-buttonTextColor;
	text-decoration: none;
	.xf-buttonBase();
	.xf-buttonDefault();
	.xf-buttonPrimary();
	font-size: @fontSizeSmall;
	background-color: @xf-buttonPrimaryBg;
}

.buttonFake
{
	display: inline-block;
	padding: 5px 10px;
	font-size: @fontSizeSmall;
}

.minorText,
.unsubscribeLink
{
	font-size: @fontSizeSmall;
	color: @xf-emailTextColorMuted;
}

.minorText a,
.unsubscribeLink a
{
	color: @xf-emailTextColorMuted;
	text-decoration: underline;
}

.unsubscribeLink
{
	margin-top: 1em;
	text-align: center;
}

.mediaPlaceholder,
.spoilerPlaceholder
{
	border-radius: @xf-borderRadiusSmall;
	margin: @xf-paddingMedium 0;
	padding: @xf-paddingMedium;
	font-size: @fontSizeLargest;
	line-height: 3;
	text-align: center;
	border: @xf-borderSize solid @xf-emailBorderColor;
	background-color: @xf-emailContentAltBg;
}

.inlineSpoilerPlaceholder
{
	font-size: @xf-fontSizeSmall;
	background-color: @xf-contentAltBg;
	border: @xf-borderSize solid @xf-borderColorLight;
	border-radius: @xf-borderRadiusSmall;
	padding: 1px @xf-paddingSmall;
}

.u-opposite { text-align: right; }

// ################################ ACTIVITY SUMMARY ###############################

.p-activitySummary #bodyTableContainer
{
	padding: 0;
}

.summaryContentWrapper
{
	padding: 0 @xf-paddingLarge;
	max-width: 1200px;
}

.summaryHeaderBar
{
	color: @xf-chromeTextColor;
	background: @xf-chromeBg;
	font-family: @xf-emailFont;
	font-size: @xf-fontSizeLargest;
	line-height: @xf-lineHeightDefault;
	padding: @xf-paddingMedium @xf-paddingLarge;

	a
	{
		color:@xf-chromeTextColor;
	}

	img
	{
		max-height: 200px;
		vertical-align: bottom;

		&.logo-svg
		{
			max-width: 200px;
		}
	}
}

.summaryOuterHeader
{
	width: 100%;
	table-layout: fixed;
	margin: @xf-paddingLargest 0;
}

.summaryOuterHeader-content
{
	font-size: @xf-fontSizeLarger;
	font-weight: @xf-fontWeightNormal;
	color: @xf-emailTextColorMuted;
}

.summaryBlock
{
	color: @xf-emailTextColor;
	background-color: @xf-emailContentBg;
	border: @xf-borderSize solid @xf-emailBorderColor;
	border-radius: @xf-borderRadiusSmall;
	border-collapse: separate;

	width: 100%;
	table-layout: fixed;
	margin: @xf-paddingLargest 0;
}

.summaryBlock-header
{
	font-size: @xf-fontSizeLarger;
	color: @xf-majorHeadingTextColor;
	background: @xf-majorHeadingBg;
	border-bottom: @xf-borderSize solid @xf-borderColorLight;
	border-top-left-radius: @xf-borderRadiusSmall;
	border-top-right-radius: @xf-borderRadiusSmall;
	padding: @xf-blockPaddingV @xf-blockPaddingH;

	a
	{
		color: @xf-majorHeadingTextColor;
	}
}

.statsGroup
{
	display: flex;
	flex-flow: row wrap;
	font-size: @xf-fontSizeLarge;
}

.stat
{
	flex: auto;
	vertical-align: top;
	margin-right: @xf-paddingMedium;
	margin-bottom: @xf-paddingMedium;
}

.stat-label
{
	font-size: @xf-fontSizeSmall;
	color: @xf-emailTextColorMuted;
}

.p-activitySummary .content.content--attribution,
.p-activitySummary .content.content--footer,
.p-activitySummary .content.content--footer table
{
	font-size: @xf-fontSizeSmall;
	color: @xf-emailTextColorMuted;

	a:not(.button)
	{
		color: inherit;
		text-decoration: underline;
	}
}]]></template>
    <template title="core.less" type="public" addon_id="XF" version_id="2020270" version_string="2.2.2"><![CDATA[// ########################## GLOBAL BASE SETUP #######################

html
{
	font: @xf-fontSizeNormal / @xf-lineHeightDefault sans-serif;
	font-family: @xf-fontFamilyUi;
	font-weight: @xf-fontWeightNormal;
	color: @xf-textColor;
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	background-color: @xf-pageBg;

	/* // just a reminder that we *might* want this at some point
	-ms-text-size-adjust: none;
	-webkit-text-size-adjust: none;*/
}

body {
	font-size: @xf-fontSizeNormal;
}

button, input, optgroup, select, textarea
{
	font-family: @xf-fontFamilyUi;
	line-height: @xf-lineHeightDefault;
}

img
{
	max-width: 100%;
	height: auto;
}

b, strong
{
	font-weight: @xf-fontWeightHeavy;
}

a
{
	.xf-link();

	&:hover
	{
		.xf-linkHover();
	}
}

svg
{
	fill: currentColor;
}

{{ include('core_setup.less') }}
{{ include('core_utilities.less') }}
{{ include('core_list.less') }}
{{ include('core_categorylist.less') }}
{{ include('core_block.less') }}
{{ include('core_blockmessage.less') }}
{{ include('core_blockstatus.less') }}
{{ include('core_blocklink.less') }}
{{ include('core_blockend.less') }}
{{ include('core_fixedmessage.less') }}
{{ include('core_button.less') }}
{{ include('core_meter_bar.less') }}

// ################################# INPUTS & FORMS #####################

{{ include('core_input.less') }}
{{ include('core_formrow.less') }}

{{ include('core_collapse.less') }}
{{ include('core_badge.less') }}
{{ include('core_tooltip.less') }}
{{ include('core_menu.less') }}
{{ include('core_offcanvas.less') }}
{{ include('core_tab.less') }}
{{ include('core_overlay.less') }}
{{ include('core_globalaction.less') }}
{{ include('core_avatar.less') }}
{{ include('core_datalist.less') }}
{{ include('core_filter.less') }}
{{ include('core_contentrow.less') }}
{{ include('core_pagenav.less') }}
{{ include('core_hscroller.less') }}

// FLASH MESSAGES
.flashMessage
{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: @zIndex-9;
	.xf-flashMessage();

	.m-transitionFadeDown(@xf-animationSpeed);
}

// AUTOCOMPLETE
.autoCompleteList
{
	.m-autoCompleteList();
	margin-top: 2px;

	&.autoCompleteList--inherit
	{
		font-size: inherit;

		li
		{
			padding: @xf-paddingLarge;
			line-height: inherit;
		}
	}
}

// #################################### TAGS ##############################
// note that while this is related to tags, it's commonly used so just include it

.tagList,
.tagList > dt,
.tagList > dd
{
	display: inline;
	padding: 0;
	margin: 0;
}

.tagItem
{
	display: inline-block;
	max-width: 100%;
	padding: 0 6px 1px;
	margin: 0 0 2px;
	border-radius: @xf-borderRadiusMedium;
	font-size: @xf-fontSizeSmaller;
	.xf-chip();
	.xf-uix_tag();

	a&:hover
	{
		text-decoration: none;
		color: @xf-chip--color;
		.xf-chipHover();
		.xf-uix_tagHover();
	}
}

// ############################# MISC #########################

.recaptcha
{
	&.input
	{
		box-sizing: content-box;
		max-width: 100%;
	}

	img
	{
		max-width: 100%;
	}
}

.likesBar
{
	.m-transitionFadeDown();
	.xf-minorBlockContent();
	border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
	padding: @xf-paddingMedium;
	font-size: @xf-fontSizeSmaller;
	margin-top: @xf-paddingMedium;
	.xf-uix_messageLikes();
}

.likeIcon
{
	&:before
	{
		.m-faBase();
		.m-faContent(@fa-var-thumbs-up); //, 1em
		color: @xf-textColorFeature;
		//margin-right: .2em;
	}
}

.reactionsBar
{
	.m-transitionFadeDown();
	.xf-minorBlockContent();
	border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
	padding: @xf-paddingMedium;
	font-size: @xf-fontSizeSmaller;
	margin-top: @xf-paddingMedium;
	.xf-uix_messageLikes();

	&:last-child {
		margin-top: @xf-messagePadding;
	}
}

.reactionSummary
{
	display: inline-block;
	.m-listPlain();
	line-height: 16px;
	height: 16px;
	margin: 0 -2px;
	vertical-align: text-top;

	> li
	{
		display: inline-block;
		height: 20px;
		width: 20px;
		padding: 2px;
		margin: -2px 0;
		background: @xf-contentBg;
		border-radius: 50%;
		position: relative;
		margin-left: -6px;

		&:nth-child(1)
		{
			z-index: 3;
			margin-left: 0;
		}

		&:nth-child(2)
		{
			z-index: 2;
		}

		&:nth-child(3)
		{
			z-index: 1;
		}
	}

	.reaction
	{
		position: absolute;
		top: 0;

		&.reaction
		{
			// increase specificity to override .reaction.reaction--<size>
			display: block;
		}
	}
}

.reactionsBar,
.message-responseRow
{
	.reactionSummary
	{
		> li
		{
			background: @xf-contentAltBg;
		}

		.reaction
		{
			top: 2px;
		}
	}
}

.reactTooltip
{
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;

	.reaction
	{
		margin: @xf-paddingSmall;
		.m-transition(transform);

		&:hover
		{
			.m-transform(scale(1.2));
		}
	}
}

.colorChip
{
	display: inline-block;
	border: @xf-borderSize solid @xf-borderColor;
	border-radius: @xf-borderRadiusMedium;
	padding: 1px;
	width: 100px;
}
.colorChip-inner
{
	display: block;
	background-color: transparent;
	border-radius: @xf-borderRadiusSmall;
	height: 1em;
}
.colorChip-value
{
	display: none;
}

	pre.sf-dump
{
	// not ideal, but then again neither is the default of 99999...
	z-index: @zIndex-1 !important;
}

.grecaptcha-badge
{
	z-index: @zIndex-5;
}

// Bookmarking links for 2.1
.bookmarkLink
{
	&:before
	{
		.m-faBase();
		.m-faContent(@fa-var-bookmark);
		font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);
	}
	&.is-bookmarked
	{
		&:before
		{
			font-weight: @faWeight-solid;
		}
	}

	&.bookmarkLink--highlightable.is-bookmarked
	{
		color: @xf-textColorAttention;

		&:hover
		{
			color: @xf-textColorAccentContent;
		}
	}

	span
	{
		margin-left: .35em;
	}
}

.dragHandle
{
	cursor: move;
	touch-action: none;

	&:before
	{
		.m-faBase();
		.m-faContent(@fa-var-bars);
	}

	.is-undraggable &
	{
		visibility: hidden;
		cursor: default;
	}
}

.memberProfileBanner
{
	background-size: cover !important;
	background-position-x: center !important;
	background-repeat: no-repeat !important;

	&.memberProfileBanner--small
	{
		height: 150px;
		margin-bottom: @xf-paddingMedium;
	}

	&.memberProfileBanner--empty
	{
		display: none;
	}
}

.solutionIcon
{
	display: inline-flex;
	padding: @xf-paddingMedium;
	font-size: @xf-uix_iconSizeLarge;
	line-height: 1;
	color: @xf-textColorMuted;
	.m-transition();

	a&
	{
		color: @xf-textColorMuted;
		text-decoration: none;
	}

	&:before
	{
		.m-faBase();
		.m-faContent(@fa-var-check-circle);
		font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);
	}

	&.is-solution
	{
		color: @xf-votePositiveColor;
		opacity: 1;

		&:before
		{
			font-weight: @faWeight-solid;
		}
	}
}

{{ include('core_action_bar.less') }}
{{ include('core_labels.less') }}
{{ include('core_pikaday.less') }}
{{ include('core_reaction.less') }}
{{ include('core_smilie.less') }}
{{ include('core_bbcode.less') }}

// RESOLUTION OUTPUT

.debugResolution
{
	font-size: @xf-fontSizeSmallest;
	.debugResolution-output:before
	{
		content: "Full @{xf-responsiveWide} - @{xf-pageWidthMax}";
		@media (min-width: @xf-pageWidthMax) { content: "Max > @{xf-pageWidthMax}"; }
		@media (max-width: @xf-responsiveWide) { content: "Wide < @{xf-responsiveWide}"; }
		@media (max-width: @xf-responsiveMedium) { content: "Medium < @{xf-responsiveMedium}"; }
		@media (max-width: @xf-responsiveNarrow) { content: "Narrow < @{xf-responsiveNarrow}"; }
	}
}]]></template>
    <template title="core_action_bar.less" type="public" addon_id="XF" version_id="2020070" version_string="2.2.0"><![CDATA[.actionBar
{
	.m-clearFix();
}

.actionBar-set
{
	&.actionBar-set--internal
	{
		float: left;
		// margin-left: -3px;

		> .actionBar-action:first-child
		{
			margin-left: 0;
		}
	}

	&.actionBar-set--external
	{
		float: right;
		// margin-right: -3px;

		> .actionBar-action:last-child
		{
			margin-right: 0;
		}
	}
}

.actionBar .actionBar-action
{
	display: inline-block;
	padding: 3px;
	border: 1px solid transparent;
	border-radius: @xf-borderRadiusMedium;
	margin-left: 5px;
	.xf-uix_messageControl();

	&:hover {
		.xf-uix_messageControlHover();
	}

	&:before
	{
		.m-faBase();
		font-size: 1.1em;
		padding-right: 2px;
	}

	&.actionBar-action--menuTrigger
	{
		display: none;

		&.is-displayed
		{
			display: inline;
		}

		&:after
		{
			.m-menuGadget();
		}
	}

	&.actionBar-action--inlineMod
	{
		label
		{
			color: @xf-linkColor;
			font-size: 120%;
			// vertical-align: -2px;
		}

		input
		{
			.m-checkboxAligner();
		}
	}

	&.actionBar-action--mq
	{
		&:before { .m-faContent("@{fa-var-plus}\20");} // plus

		&.is-selected
		{
			background-color: @xf-contentHighlightBg;
			border-color: @xf-borderColorHighlight;

			&:before { .m-faContent("@{fa-var-minus}\20");} // minus
		}
	}

	&.actionBar-action--postLink
	{
		text-decoration: inherit !important;
		color: inherit !important;
	}

	&.actionBar-action--reply:before { .m-faContent("@{fa-var-reply}");}
	&.actionBar-action--like:before { .m-faContent("@{fa-var-thumbs-up}");}

	&.actionBar-action--reaction:not(.has-reaction) .reaction-text
	{
		color: inherit;
	}

	&.actionBar-action--view
	{
		background: @xf-contentBg;
		color: @xf-linkColor;
		.m-buttonBorderColorVariation(@xf-borderColor);
		padding-left: @xf-paddingLarge;
		padding-right: @xf-paddingLarge;

		&:hover,
		&:active,
		&:focus
		{
			text-decoration: none;
			background: @xf-contentHighlightBg;
		}
	}
	&.actionBar-action--reply:before { .m-faContent("@{fa-var-reply}\20");} // reply
	&.actionBar-action--comment:before { .m-faContent("@{fa-var-reply}\20");} // reply
	&.actionBar-action--like.unlike:before { .m-faContent("@{fa-var-thumbs-down}\20");}// thumbs up
	&.actionBar-action--reaction.reaction--imageHidden i:before { .m-faContent("@{fa-var-thumbs-up}\20");}
	&.actionBar-action--report:before { .m-faContent("@{fa-var-exclamation-circle}\20");}
	&.actionBar-action--delete:before { .m-faContent("@{fa-var-trash}\20");}
	&.actionBar-action--edit:before { .m-faContent("@{fa-var-edit}\20");}
	&.actionBar-action--ip:before { .m-faContent("@{fa-var-globe}\20");}
	&.actionBar-action--history:before { .m-faContent("@{fa-var-history}\20");}
	&.actionBar-action--warn:before { .m-faContent("@{fa-var-warning}\20");}
	&.actionBar-action--spam:before { .m-faContent("@{fa-var-warning}\20");}
}

@media (max-width: @xf-responsiveMedium)
{
	.actionBar .actionBar-action
	{
		&.actionBar-action--menuItem
		{
			display: none !important;
		}

		&.actionBar-action--menuTrigger
		{
			display: inline;
		}
	}
}]]></template>
    <template title="core_avatar.less" type="public" addon_id="XF" version_id="2010170" version_string="2.1.1"><![CDATA[// ################################### AVATARS #############################

.m-uix_avatarShape() {
	<xf:if is="property('uix_avatarShape') == 1">
		border-radius: 100%;
	<xf:elseif is="property('uix_avatarShape') == 2" />
		border-radius: 0;
	<xf:elseif is="property('uix_avatarShape') == 3" />
		-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
		clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	<xf:elseif is="property('uix_avatarShape') == 4" />
		-webkit-clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
		clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
	<xf:elseif is="property('uix_avatarShape') == 5" />
		-webkit-clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
		clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
	<xf:elseif is="property('uix_avatarShape') == 6" />
		-webkit-clip-path: polygon(0 50%, 15% 15%, 50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%);
		clip-path: polygon(0 50%, 15% 15%, 50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%);
	</xf:if>
}

.avatar
{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: @xf-avatarBorderRadius;
	vertical-align: top;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	.m-uix_avatarShape();

	img { background-color: @xf-avatarBg; }

	&.avatar--default
	{
		&.avatar--default--dynamic,
		&.avatar--default--text
		{
			font-family: @xf-avatarDynamicFont;
			font-weight: normal;
			text-align: center;
			text-decoration: none !important;

			// this works with the flex box approach
			line-height: 1;

			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			
		}

		&.avatar--default--text
		{
			color: xf-default(@xf-textColorMuted, black) !important;
			background: mix(xf-default(@xf-textColorMuted, black), xf-default(@xf-avatarBg, white), 25%) !important;

			> span:before { content: ~"'@{xf-avatarDefaultTextContent}'"; }
		}

		&.avatar--default--image
		{
			background-color: @xf-avatarBg;
			background-image: url(@xf-avatarDefaultImage);
			background-size: cover;
			> span { display: none; }
		}
	}

	&:hover
	{
		text-decoration: none;
	}

	&.avatar--updateLink
	{
		position: relative;
	}

	&.avatar--separated
	{
		border: 1px solid @xf-avatarBg;
	}

	&.avatar--square
	{
		border-radius: 0;
	}

	&.avatar--xxs
	{
		.m-avatarSize(@avatar-xxs);
	}

	&.avatar--xs
	{
		.m-avatarSize(@avatar-xs);
	}

	&.avatar--s
	{
		.m-avatarSize(@avatar-s);
	}

	&.avatar--m
	{
		.m-avatarSize(@avatar-m);
	}

	&.avatar--l
	{
		.m-avatarSize(@avatar-l);
	}

	&.avatar--o
	{
		.m-avatarSize(@avatar-o);
	}

	img:not(.cropImage)
	{
		.m-hideText;
		display: block;
		border-radius: inherit;
		width: 100%;
		height: 100%;
	}

	&:not(a)
	{
		cursor: inherit;
	}
}

.memberHeader-avatar .avatar {border-radius: @xf-avatarBorderRadius;}

.avatar-update
{
	width: 100%;
	height: 30px;
	bottom: -30px;
	position: absolute;

	.m-hiddenLinks();
	.m-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), #000);
	.m-transition();

	padding: @xf-paddingSmall;
	overflow: hidden;

	font-family: @xf-fontFamilyUi;
	font-size: @xf-fontSizeSmaller;
	line-height: @xf-lineHeightDefault;

	display: none;
	align-items: center;
	justify-content: center;

	.avatar--updateLink &
	{
		display: flex;
	}

	.has-touchevents &,
	.avatar:hover &
	{
		bottom: 0;
	}

	a
	{
		text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
		color: #fff;

		&:hover
		{
			text-decoration: none;
		}
	}
}

.avatarWrapper
{
	display: inline-block;
	position: relative;
}

.avatarWrapper-update
{
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: .8em;
	color: #fff;
	text-decoration: none;
	opacity: 0;
	.m-transition(opacity);

	&:before
	{
		content: '';
		position: absolute;
		top: -100%;
		bottom: 0;
		left: 0;
		right: 0;
		.m-borderBottomRadius(xf-default(@xf-avatarBorderRadius, 0));
		.m-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .9), #000, 60%);
		opacity: .75;
		.m-transition(opacity);
		pointer-events: none;
	}

	span
	{
		// so it sits on top of the BG
		position: relative;
	}

	&:hover
	{
		color: #fff;
		text-decoration: none;

		&:before
		{
			opacity: 1;
		}
	}

	.avatarWrapper:hover &,
	.has-touchevents &
	{
		opacity: 1;
	}

	&.avatarWrapper-update--small,
	.avatar--s + &
	{
		font-size: @xf-fontSizeSmall;
		padding-bottom: .2em;
	}
}]]></template>
    <template title="core_badge.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// #################################################### BADGES ###########################

.badge,
.badgeContainer:after
{
	display: inline-block;
	padding: 2px 4px 1px;
	margin: -2px 0 -2px 4px;
	font-size: 80%;
	line-height: 1;
	font-weight: @xf-fontWeightNormal;
	.xf-badge();
}

.badgeContainer
{
	&:after
	{
		content: attr(data-badge);
		display: none;
	}

	&.badgeContainer--visible:after
	{
		display: inline-block;
	}
}

.badge.badge--highlighted,
.badgeContainer.badgeContainer--highlighted:after
{
	display: inline-block;
	.xf-badgeHighlighted();
}]]></template>
    <template title="core_block.less" type="public" addon_id="XF" version_id="2020036" version_string="2.2.0 Beta 6"><![CDATA[// ################################# BLOCKS ##################

.blocks
{
	margin-bottom: @xf-elementSpacer;

	&:last-child
	{
		margin-bottom: 0;
	}

	.block
	{
		margin-bottom: (@xf-elementSpacer / 2);

		&:last-child
		{
			margin-bottom: 0;
		}
	}

	&.blocks--close .block
	{
		margin-bottom: (@xf-elementSpacer / 4);
	}

	&.blocks--separated
	{
		+ .blocks
		{
			padding-top: @xf-elementSpacer;
			border-top: @xf-borderSize solid @xf-borderColor;
		}
	}
}

.blocks-header
{
	font-size: @xf-fontSizeLarger;
	font-weight: @xf-fontWeightNormal;
	color: @xf-textColorMuted;

	margin: 0;
	padding: 0;
	margin-bottom: 5px;

	&.blocks-header--strong
	{
		color: @xf-textColorDimmed;

		.blocks-desc
		{
			color: @xf-textColorMuted;
		}
	}
}

.blocks-textJoiner
{
	display: table;
	width: 100%;
	margin-bottom: (@xf-elementSpacer / 2);
	padding: 0 @xf-paddingMedium;

	> span
	{
		display: table-cell;
		position: relative;

		&:before
		{
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			border-top: @xf-borderSize solid @xf-borderColor;
		}
	}

	> em
	{
		display: table-cell;
		padding: 0 @xf-paddingLarge;
		width: 1%;
		white-space: nowrap;
		// font-size: @xf-fontSizeLargest;
		line-height: 1;
		font-style: normal;
		text-align: center;
		
		font-weight: 400;
		color: @xf-textColorMuted;
		text-transform: lowercase;
	}
}


.block
{
	margin-bottom: @xf-elementSpacer;
	
	&:last-child {margin-bottom: 0;}

	&.block--close
	{
		margin-bottom: 5px;
	}

	&.block--treeEntryChooser
	{
		.block-header
		{
			font-size: @xf-fontSizeLarge;

			.block-desc
			{
				font-size: @xf-fontSizeSmallest;
			}
		}

		.block-row
		{
			padding-top: 6px;
			padding-bottom: 6px;
		}

		.contentRow
		{
			&.is-disabled
			{
				opacity: 0.5;
			}
		}

		.contentRow-title
		{
			font-size: @xf-fontSizeNormal;
		}

		.contentRow-minor
		{
			font-size: @xf-fontSizeSmaller;
		}

		.contentRow-suffix
		{
			font-size: @xf-fontSizeSmall;
		}
	}
}

.block-outer
{
	padding-bottom: @xf-blockPaddingV;
	.m-clearFix();
	.xf-uix_blockOuter();

	&:empty
	{
		display: none;
	}

	&.block-outer--after
	{
		padding-top: @xf-blockPaddingV;
		padding-bottom: 0;
	}

	&.block-outer--padded
	{
		padding-left: @xf-blockPaddingH;
		padding-right: @xf-blockPaddingH;
	}

	.block-outer-hint
	{
		font-size: @xf-fontSizeSmall;
		color: @xf-textColorMuted;
	}
}
.block-outer-main, .block-row-main { float: left; }
.block-outer-opposite, .block-row-opposite { float: right; }
.block-outer-middle, .block-row-middle { text-align: center; }

.block-container
{
	.xf-contentBase();
	.xf-blockBorder()
	border-radius: @xf-blockBorderRadius;

	//.m-transition(border, margin;); // edgeSpacerRemoval
	.xf-uix_blockContainer();
	&.block-container--none
	{
		background: none;
		border: none;
		color: @xf-textColor;
		padding: 0;
		box-shadow: none;
	}
}

@media (min-width: @xf-responsiveEdgeSpacerRemoval)
{
	@{block-noStripSel} > :first-child,
	.block-topRadiusContent,
	@{block-noStripSel} > .block-body:first-child > .blockLink:first-child
	{
		border-top-left-radius: @block-borderRadius-inner;
		border-top-right-radius: @block-borderRadius-inner;
	}

	@{block-noStripSel} > :last-child,
	.block-bottomRadiusContent,
	@{block-noStripSel} > .block-body:last-child > .blockLink:last-child,
	@{block-noStripSel} > .tabPanes:last-child > [role=tabpanel] > :last-child,
	@{block-noStripSel} > .tabPanes:last-child > [role=tabpanel] > .block-body > :last-child
	{
		border-bottom-left-radius: @block-borderRadius-inner;
		border-bottom-right-radius: @block-borderRadius-inner;
	}

	@{block-noStripSel} > .block-body:first-child > .dataList:first-child,
	.block-topRadiusContent.dataList,
	.block-topRadiusContent > .dataList:first-child
	{
		tbody:first-child .dataList-row:first-child,
		thead:first-child .dataList-row:first-child
		{
			> .dataList-cell:first-child { border-top-left-radius: @block-borderRadius-inner; }
			> .dataList-cell:last-child { border-top-right-radius: @block-borderRadius-inner; }
		}
	}

	@{block-noStripSel} > .block-body:first-child > .formRow:first-child,
	.block-topRadiusContent.formRow,
	.block-topRadiusContent > .formRow:first-child
	{
		> dt { border-top-left-radius: @block-borderRadius-inner; }
		> dd { border-top-right-radius: @block-borderRadius-inner; }
	}

	@{block-noStripSel} > .block-body:last-child > .dataList:last-child,
	.block-bottomRadiusContent.dataList,
	.block-bottomRadiusContent > .dataList:last-child
	{
		tbody:last-child .dataList-row:last-child
		{
			> .dataList-cell:first-child { border-bottom-left-radius: @block-borderRadius-inner; }
			> .dataList-cell:last-child { border-bottom-right-radius: @block-borderRadius-inner; }
		}
	}

	@{block-noStripSel} > .block-body:last-child > .formRow:last-child,
	.block-bottomRadiusContent.formRow,
	.block-bottomRadiusContent > .formRow:last-child
	{
		> dt { border-bottom-left-radius: @block-borderRadius-inner; }
		> dd { border-bottom-right-radius: @block-borderRadius-inner; }
	}

	@{block-noStripSel} > .block-body:last-child .formSubmitRow:not(.is-sticky),
	@{block-noStripSel} > .formSubmitRow:not(.is-sticky):last-child,
	.block-bottomRadiusContent > .formSubmitRow:not(.is-sticky)
	{
		> dt { border-bottom-left-radius: @block-borderRadius-inner; }
		> dd { border-bottom-right-radius: @block-borderRadius-inner; }

		.formSubmitRow-bar
		{
			border-bottom-left-radius: @block-borderRadius-inner;
			border-bottom-right-radius: @block-borderRadius-inner;
		}
	}
}

.block-header
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-blockHeader();

	.m-clearFix();
	.m-hiddenLinks();

	&.block-header--separated
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}

	.block-desc
	{
		color: fade(@xf-blockHeader--color, 70);
		.m-textColoredLinks();
	}
}

.block-minorHeader
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-blockMinorHeader();

	.m-clearFix();
	.m-hiddenLinks();

	.block-body + &
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}

	.block-desc
	{
		.m-textColoredLinks();
	}

	&--spaced
	{
		margin-top: @xf-paddingSmall;
	}

	&--small
	{
		font-size: @xf-fontSizeSmall;
	}
}

.block-tabHeader
{
	padding: 0;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	.xf-blockTabHeader();
	.m-tabsTogether(xf-default(@xf-blockTabHeader--font-size, @xf-fontSizeNormal));

	.tabs-tab
	{
		padding: @xf-blockPaddingV @xf-blockPaddingH;
		border-bottom: @xf-borderSizeFeature solid transparent;
		.xf-uix_blockTabHeaderTab();

		&:hover
		{
			color: @xf-blockTabHeaderSelected--color;
			background: fade(@xf-blockTabHeaderSelected--color, 10%);
		}

		&.is-active
		{
			background: none;
			.xf-blockTabHeaderSelected();
		}
	}

	.block-tabHeader-extra
	{
		float: right;
		color: inherit;
		font-size: @xf-blockTabHeader--font-size;
		padding: @xf-blockPaddingV @xf-blockPaddingH;
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-blockTabHeader--background-color, transparent),
			xf-default(@xf-blockTabHeader--color, ~""),
			xf-default(@xf-blockTabHeaderSelected--color, ~"")
		);
	}
}

.block-minorTabHeader
{
	padding: 0;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	.xf-blockMinorTabHeader();
	.m-tabsTogether(xf-default(@xf-blockMinorTabHeader--font-size, @xf-fontSizeNormal));

	.tabs-tab
	{
		padding: @xf-blockPaddingV @xf-blockPaddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
		border-bottom: @xf-borderSizeFeature solid transparent;

		&:hover
		{
			color: @xf-blockMinorTabHeaderSelected--color;
		}

		&.is-active
		{
			background: none;
			.xf-blockMinorTabHeaderSelected();
		}
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-blockMinorTabHeader--background-color, transparent),
			xf-default(@xf-blockMinorTabHeader--color, ~""),
			xf-default(@xf-blockMinorTabHeaderSelected--color, ~"")
		);
	}
}

.block-filterBar
{
	padding: (@xf-blockPaddingH / 2) (@xf-blockPaddingH / 2);
	.xf-blockFilterBar();

	&.block-filterBar--standalone
	{
		padding: @xf-paddingMedium @xf-paddingMedium;
		border: @xf-borderSize solid @xf-borderColor;
		border-radius: @block-borderRadius-inner;

		@media (max-width: @xf-responsiveEdgeSpacerRemoval)
		{
			border-radius: 0;
			border-left: none;
			border-right: none;
		}
	}

	.filterBar-filterToggle
	{
		background: mix(
			xf-default(@xf-blockFilterBar--color, @xf-linkColor),
			xf-default(@xf-blockFilterBar--background-color, transparent),
			8%
		);
	}

	.filterBar-filterToggle,
	.filterBar-menuTrigger
	{
		&:hover
		{
			text-decoration: none;
			background: mix(
				xf-default(@xf-blockFilterBar--color, @xf-linkColor),
				xf-default(@xf-blockFilterBar--background-color, transparent),
				16%
			);
		}
	}
}

.block-textHeader
{
	margin: @xf-blockPaddingV/2 0;
	padding: 0;
	font-weight: @xf-fontWeightNormal;
	.xf-blockTextHeader();

	.m-clearFix();
	.m-hiddenLinks();

	&.block-textHeader--scaled
	{
		font-size: inherit;
	}

	.block-textHeader-highlight
	{
		color: @xf-textColor;
	}

	.block-desc
	{
		.m-textColoredLinks();
	}

	&:first-child
	{
		margin-top: 0;
	}
}

.block-formSectionHeader
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-formSectionHeader();

	.m-clearFix();
	.m-hiddenLinks();

	.block-desc
	{
		.m-textColoredLinks();
	}

	.block-container > &:first-child,
	.block-body--collapsible &:first-child,
	.block-header + &
	{
		border-top: none;
	}

	.block-formSectionHeader-aligner
	{
		@_blockPaddingShift: (unit(@xf-formLabelWidth) / 100) * (@xf-blockPaddingH);

		display: inline-block;
		text-align: right;
		min-width: @xf-formLabelWidth;
		min-width: ~"calc((@{xf-formLabelWidth}) - (@{_blockPaddingShift}) - (@{xf-formRowPaddingHInner}) - (@{xf-borderSize}))";
		max-width: 100%;
		
		.menu & {
			display: inline;
			text-align: left;
			min-width: 0;
			padding-left: 0;
		}

		@media (max-width: @xf-formResponsive)
		{
			display: inline;
			text-align: left;
			min-width: 0;
			padding-left: 0;
		}
	}
	
	.menu & {padding-left: @xf-formRowPaddingHOuter;}

	@media (max-width: @xf-formResponsive)
	{
		padding-left: @xf-formRowPaddingHOuter;
	}

	.block-formSectionHeader-multiChecker
	{
		float: right;
	}

	&--small
	{
		font-size: @xf-fontSizeNormal;
	}
}

.block-desc,
.blocks-desc
{
	display: block;
	// font-size: @xf-fontSizeSmaller;
	// font-weight: @xf-fontWeightNormal;
	.xf-uix_categoryDescription();
}

.block-body
{
	.m-listPlain();
	.xf-uix_blockBody();

	&.block-body--collapsible
	{
		.has-no-js & { display: block; }

		.m-transitionFadeDown();
	}

	&.block-body--contained
	{
		overflow: auto;
		max-height: 300px;
		max-height: 70vh;
	}

	&.block-body--containedFixed
	{
		overflow-x: auto;
		max-height: 300px;
	}
}

.block-row
{
	margin: 0;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.m-clearFix();

	&.block-row--toEdge
	{
		padding-left: 0;
		padding-right: 0;
	}

	&.block-row--alt
	{
		.xf-contentAltBase();
	}

	&.block-row--minor
	{
		font-size: @xf-fontSizeSmall;
	}

	&.block-row--separated
	{
		// padding-top: (@xf-blockPaddingV) * 2;
		// padding-bottom: (@xf-blockPaddingV) * 2;
		padding-bottom: @xf-blockPaddingV;
		padding-top: @xf-blockPaddingV;

		+ .block-row
		{
			border-top: @xf-borderSize solid @xf-borderColorLight;
		}
	}

	&.block-row--connectAbove
	{
		padding-bottom: (@xf-blockPaddingV) * 2;

		.block-body > &:last-child
		{
			padding-bottom: @xf-blockPaddingV;
		}
	}

	&.block-row--highlighted
	{
		.xf-contentHighlightBase();
	}

	&.block-row--clickable:hover
	{
		.xf-contentHighlightBase();
	}

	&.is-mod-selected
	{
		background: @xf-inlineModHighlightColor;
	}

	> pre
	{
		&:first-child { margin-top: 0; }
		&:last-child { margin-bottom: 0; }
	}
}

.block-separator
{
	margin: 0;
	padding: 0;
	border: none;
	border-top: @xf-borderSize solid @xf-borderColorLight;
}

.block-footer
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.xf-blockFooter();
	.m-clearFix();

	&:first-child
	{
		border: none;
	}

	[data-app=admin] &
	{
		.block-footer-counter,
		.block-footer-select
		{
			line-height: 30px;
		}
	}

	&:not(.block-footer--split)
	{
		.block-footer-counter
		{
			float: left;
		}

		.block-footer-controls
		{
			float: right;
		}
	}
	
	.block-footer-controls .button,
	.block-footer-counter .button {
		.xf-uix_buttonSmall();
	}

	&.block-footer--split
	{
		display: flex;
		align-items: center;

		.block-footer-main,
		.block-footer-counter
		{
			flex-grow: 1;
		}

		.block-footer-select:not(:last-child)
		{
			margin: 0 1em;
		}

		.block-footer-opposite,
		.block-footer-controls
		{
			margin-left: auto;
		}
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.block-outer
	{
		text-align: center;
	}

	.block-outer-main,
	.block-outer-opposite
	{
		float: none;
		text-align: center;
	}

	.block-outer-main + .block-outer-opposite
	{
		margin-top: @xf-paddingMedium;
	}
}]]></template>
    <template title="core_blockend.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// This contains rules that apply to various block and block-related systems. This file should be included
// after all of the primary definitions to ensure the rules override.

.blockMessage,
.blockStatus,
.block-row
{
	p:first-child
	{
		margin-top: 0;
	}

	p:last-child
	{
		margin-bottom: 0;
	}
}

@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
	.block-container,
	.blockMessage
	{
		margin-left: -@xf-pageEdgeSpacer * .5;
		margin-right: -@xf-pageEdgeSpacer * .5;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.blockStatus
	{
		margin-left: -@xf-pageEdgeSpacer * .5;
		margin-right: -@xf-pageEdgeSpacer * .5;
		border-radius: 0;
		border-right: none;
	}

	.blockMessage.blockMessage--none
	{
		margin-left: 0;
		margin-right: 0;
	}
}]]></template>
    <template title="core_blockmessage.less" type="public" addon_id="XF" version_id="2020034" version_string="2.2.0 Beta 4"><![CDATA[// ############################ BLOCK MESSAGE ###################

.block-rowMessage
{
	margin: @xf-blockPaddingV 0;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.xf-blockBorder();
	border-radius: @xf-blockBorderRadius;

	.m-clearFix();

	&:first-child
	{
		margin-top: 0;
	}

	&:last-child
	{
		margin-bottom: 0;
	}

	&.block-rowMessage--small
	{
		font-size: @xf-fontSizeSmall;
		padding: @xf-blockPaddingV/2 @xf-blockPaddingH/2;
	}

	&.block-rowMessage--center
	{
		text-align: center;
	}

	.m-blockMessageVariants();
}

.blockMessage
{
	margin-bottom: @xf-elementSpacer;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.xf-contentBase();
	.xf-blockBorder();
	border-radius: @xf-blockBorderRadius;
	.xf-uix_blockMessage();

	.m-clearFix();

	//.m-transition(border, margin;); // edgeSpacerRemoval

	&.blockMessage--none
	{
		background: none;
		border: none;
		color: @xf-textColor;
		padding: 0;
		box-shadow: none;
	}

	&.blockMessage--close
	{
		margin-top: 5px;
		margin-bottom: 5px;
	}

	&.blockMessage--small
	{
		font-size: @xf-fontSizeSmall;
		padding: @xf-paddingMedium;
	}

	&.blockMessage--center
	{
		text-align: center;
	}

	.m-blockMessageVariants();
}

.blockMessage--iconic,
.block-rowMessage--iconic
{
	text-align: left;
	position: relative;
	// padding-left: 4em;
	min-height: 4em;
	display: flex;
	align-items: center;

	&:before
	{
		.m-faBase();
		top: 0;
		// left: @xf-blockPaddingV;
		font-size: @xf-uix_iconSizeLarge !important;
		padding-right: @xf-paddingLarge;
	}
}

.m-blockMessageVariants()
{
	// note: the double && is correct here -- it enforces output like ".x.x--variant". The extra specificity helps
	// prevent issues from things like media query overrides.

	&&--highlight
	{
		.xf-contentHighlightBase();
	}
	&--highlight&--iconic:before
	{
		.m-faContent(@fa-var-info-circle);
	}

	&&--important
	{
		.xf-contentAccentBase();
		border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
		padding: @xf-paddingMedium;

		a { .xf-contentAccentLink(); }
	}
	&--important&--iconic:before
	{
		.m-faContent(@fa-var-exclamation-circle);
		color: @xf-textColorAttention;
		color: @xf-important-featureColor;
	}

	&&--alt
	{
		.xf-contentAltBase();
	}

	&&--success
	{
		border-left: @xf-borderSizeFeature solid @xf-successFeatureColor;
		background: @xf-successBg;
		color: @xf-successColor;

		.m-textColoredLinks();
	}
	&--success&--iconic:before
	{
		.m-faContent(@fa-var-check-circle);
		color: @xf-success-featureColor;
	}

	&&--warning
	{
		border-left: @xf-borderSizeFeature solid @xf-warningFeatureColor;
		background: @xf-warningBg;
		color: @xf-warningColor;

		.m-textColoredLinks();
	}
	&--warning&--iconic:before
	{
		.m-faContent(@fa-var-exclamation-triangle);
		color: @xf-warning-featureColor;
	}

	&&--error
	{
		border-left: @xf-borderSizeFeature solid @xf-errorFeatureColor;
		background: @xf-errorBg;
		color: @xf-errorColor;

		.m-textColoredLinks();
	}
	&--error&--iconic:before
	{
		.m-faContent(@fa-var-times-circle);
		color: @xf-error-featureColor;
	}
}]]></template>
    <template title="core_button.less" type="public" addon_id="XF" version_id="2020051" version_string="2.2.0 Release Candidate 1"><![CDATA[// ############################ BUTTONS #################

.button,
button.button
a.button // needed for specificity over a:link
{
	.m-buttonBase();

	.button-text {display: inline-flex; align-items: center;}

	a
	{
		color: inherit;
		text-decoration: none;
	}

	&:hover,
	&:focus {
		.xf-uix_buttonHover();
	}

	&:active {
		.xf-uix_buttonActive();
	}

	.xf-buttonDefault();
	.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));

	&.button--primary
	{
		.xf-buttonPrimary();
		.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonPrimary--background-color, transparent));

		&:hover,
		&:focus {.xf-uix_buttonPrimaryHover();}

		&:active {.xf-uix_buttonPrimaryActive();}
	}

	&.button--cta
	{
		.xf-buttonCta();
		.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonCta--background-color, transparent));

		&:hover,
		&:focus {.xf-uix_buttonCtaHover();}

		&:active {.xf-uix_buttonCtaActive();}
	}

	&.button--link
	{
		// block colors
		// background: @xf-contentBg;
		// color: @xf-linkColor;
		// .m-buttonBorderColorVariation(@xf-borderColor);
		.xf-uix_buttonSmall();
		.xf-uix_buttonLink();

		&:hover,
		&:focus
		{
			text-decoration: none;
			// background: @xf-contentHighlightBg;
			.xf-uix_buttonHover();
		}

		&:active {
			.xf-uix_buttonActive();
		}
	}
	&.button--plain
	{
		background: none;
		color: @xf-linkColor;
		border: none;

		&:hover,
		&:active,
		&:focus
		{
			text-decoration: none;
			background: none;
		}
	}

	&.button--alt
	{
		// block colors
		background-color: @xf-contentHighlightBg;
		color: @xf-linkColor;
		.m-buttonBorderColorVariation(@xf-paletteColor2);

		&:hover,
		&:active,
		&:focus
		{
			background-color: @xf-paletteColor1;
			color: @xf-linkColor;
		}
	}

	&.button--longText
	{
		.m-overflowEllipsis();
		max-width: 100%;
		display: inline-block;
	}

	&.is-disabled
	{
		.xf-buttonDisabled();
		// .m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));

		&:hover,
		&:active,
		&:focus
		{
			.xf-buttonDisabled();
			// background: xf-default(@xf-buttonDisabled--background-color, transparent) !important;
		}
	}

	&.button--scroll
	{
		// background: fade(xf-default(@xf-buttonDefault--background-color, transparent), 75%);
		.xf-buttonPrimary();
		padding: 5px 8px;
		.m-dropShadow();

		&:hover,
		&:focus {.xf-uix_buttonPrimaryHover();}

		&:active {.xf-uix_buttonPrimaryActive();}
	}

	&.button--normal
	{
		font-size: @xf-fontSizeNormal;
	}

	&.button--small
	{
		font-size: @xf-fontSizeSmall;
		padding: 3px 6px;
		.xf-uix_buttonSmall();
	}

	&.button--smaller
	{
		font-size: @xf-fontSizeSmaller;
		padding: 2px 5px;
	}

	&.button--fullWidth
	{
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	&.button--adminStyleAsset
	{
		&.is-disabled
		{
			visibility: hidden;
		}
		&.is-modify
		{
			.m-buttonIcon(@fa-var-pencil);
		}
		&.is-revert
		{
			.m-buttonIcon(@fa-var-history);
		}
	}

	&.button--wrap
	{
		white-space: normal;
	}

	&.button--icon
	{
		> .button-text:before,
		.button-icon
		{
			.m-faBase();
		}

		> .button-text:before,
		> .fa--xf:before,
		.button-icon
		{
			// font-size: 120%;
			font-size: @xf-uix_iconSize;
			vertical-align: -.1em;
			display: inline-block;
			// margin: -.255em 6px -.255em 0;
			margin-right: .2em;
			// content: '';
		}

		> .fa--xf
		{
			// helps fix a button alignment issue (Chrome only)
			line-height: inherit;
		}

		/*
		> .button-text:before
		{
		.m-faBase();
		// font-size: 120%;
		font-size: @xf-uix_iconSize;
		vertical-align: middle;
		display: inline-block;
		// margin: -.255em 6px -.255em 0;
		margin-right: .2em;
	}
		*/

		.button-icon
		{
			height: 1em;
			vertical-align: 0;
		}

		&.button--iconOnly
		{
			> .button-text:before,
			> i.fa--xf:before,
			.button-icon
			{
				margin-left: 0;
				margin-right: 0;
			}
		}

		&.button--padded
		{
			> .button-text:before,
			> i.fa--xf:before,
			.button-icon
			{
				margin-top: 0;
				margin-bottom: 0;
			}
		}

		&--add { 
			.m-buttonIcon(@fa-var-plus-square, 0.88em);  // fa-plus-square
		}
		&--import { 
			.m-buttonIcon(@fa-var-upload, 0.1.13em); // fa-upload
		}
		&--export, &--download { 
			.m-buttonIcon(@fa-var-download, 1.13em); // fa-download
		}
		&--redirect	    {
			.m-buttonIcon(@fa-var-external-link, 1em);
		}
		&--edit	{ 
			.m-buttonIcon(@fa-var-pencil, 1.13em); // fa-pencil
		}
		&--save	{ 
			.m-buttonIcon(@fa-var-save, 0.88em); // fa-floppy-o
		}
		&--delete { 
			.m-buttonIcon(@fa-var-trash-o, 0.79em); 
		}
		&--reply { 
			.m-buttonIcon(@fa-var-mail-reply, 1.13); // fa-reply
		}
		&--quote { 
			.m-buttonIcon(@fa-var-quote-left, 1.13em); 
		}
		&--purchase	{ 
			.m-buttonIcon(@fa-var-shopping-basket, 1.13em); 
		}
		&--payment { 
			.m-buttonIcon(@fa-var-credit-card, 1.13em); 
		}
		&--convert { 
			.m-buttonIcon(@fa-var-flash, .75em); 
		}
		&--search { 
			.m-buttonIcon(@fa-var-search, 1em); 
		}
		&--sort { 
			.m-buttonIcon(@fa-var-sort, 0.63em); 
		}
		&--upload { 
			.m-buttonIcon(@fa-var-upload, 1.13em); 
		}
		&--attach { 
			.m-buttonIcon(@fa-var-paperclip, 1em); 
		}			
		&--login { 
			.m-buttonIcon(@fa-var-lock, 0.88em); 
		}
		&--rate { 
			.m-buttonIcon(@fa-var-star, 1.13em); 
		}
		&--config { 
			.m-buttonIcon(@fa-var-cog, 1em); 
		}
		&--refresh { 
			.m-buttonIcon(@fa-var-refresh, 1em); 
		}
		&--translate { 
			.m-buttonIcon(@fa-var-globe, .97em); 
		}
		&--vote { 
			.m-buttonIcon(@fa-var-check-circle-o, 1em); 
		}
		&--result { 
			.m-buttonIcon(@fa-var-bar-chart-o, 1.15em); 
		}
		&--history { 
			.m-buttonIcon(@fa-var-history, 1em); 
		}
		&--cancel  {
			.m-buttonIcon(@fa-var-ban, 1em); 
		}
		&--close { 
			.m-buttonIcon(@fa-var-times, .69em); 
		}
		&--preview { 
			.m-buttonIcon(@fa-var-eye, 1.13em); 
		}
		&--conversation { 
			.m-buttonIcon(@fa-var-comments-o, 1.13em); 
		}
		&--write { 
			.m-buttonIcon(@fa-var-edit, 1.13em);
		}
		&--download	{ 
			.m-buttonIcon(@fa-var-download, .93em); 
		}
		&--bolt { 
			.m-buttonIcon(@fa-var-bolt, .75em); 
		}
		&--list	{ 
			.m-buttonIcon(@fa-var-list, 1em); 
		}
		&--prev { 
			.m-buttonIcon(@fa-var-chevron-left, .63em); 
		}
		&--next	{ 
			.m-buttonIcon(@fa-var-chevron-right, .63em); 
		}
		&--confirm { 
			.m-buttonIcon(@fa-var-check, 1em); 
		}
		&--disable { 
			.m-buttonIcon(@fa-var-power-off, 1em); 
		}
		&--markRead { 
			.m-buttonIcon(@fa-var-check-square-o, .88em); 
		}
		&--user {
			.m-buttonIcon(@fa-var-user, .88em);
		}
		&--userCircle {
			.m-buttonIcon(@fa-var-user-circle, .97em);
		}
		&--notificationsOn { 
			.m-buttonIcon(@fa-var-bell-o, 1.25em); // actually only .88em, but as we use this as a toggle, make it the same width as bell-slash
		}
		&--notificationsOff { 
			.m-buttonIcon(@fa-var-bell-slash-o, 1.25em); 
		}
		&--show { 
			.m-buttonIcon(@fa-var-eye, 1.25em); // actually only 1.13em, but it's a toggle 
		} 
		&--hide	{
			.m-buttonIcon(@fa-var-eye-slash, 1.25em);
		}
		&--merge { 
			.m-buttonIcon(@fa-var-compress, .88em); 
		}
		&--move { 
			.m-buttonIcon(@fa-var-share, 1.13em); 
		}
		&--copy { 
			.m-buttonIcon(@fa-var-clone, .88em); 
		}
		&--approve, &--unapprove { 
			.m-buttonIcon(@fa-var-shield, 1em); 
		}
		&--delete, &--undelete { 
			.m-buttonIcon(@fa-var-trash-o, .88em); 
		}
		&--stick, &--unstick { 
			.m-buttonIcon(@fa-var-thumb-tack, .75em); 
		}
		&--lock { 
			.m-buttonIcon(@fa-var-lock, .88em); 
		}
		&--unlock { 
			.m-buttonIcon(@fa-var-unlock, .88em); 
		}
		&--bookmark
		{
			.m-buttonIcon(@fa-var-bookmark);

			&.is-bookmarked .button-text:before
			{
				font-weight: @faWeight-solid;
				color: @xf-textColorAttention;
			}
		}		
	}

	&.button--provider
	{
		> .button-text:before,
		.button-icon
		{
			.m-faBase('Brands');
			font-size: 120%;
			vertical-align: middle;
			display: inline-block;
			margin: -4px 6px -4px 0;
		}

		.button-icon
		{
			height: 1em;
			vertical-align: 0;
		}

		&--facebook
		{
			.m-buttonColorVariation(#3B5998, white);
			.m-buttonIcon(@fa-var-facebook, 1em);
			
			.button-text {display: inline;}
		}

		&--twitter
		{
			.m-buttonColorVariation(#1DA1F3, white);
			.m-buttonIcon(@fa-var-twitter, 1em);
		}

		&--google
		{
			.m-buttonColorVariation(white, #444);
			border-color: #e9e9e9;

			> .button-text:before
			{
				display: none;
			}
		}

		&--github
		{
			.m-buttonColorVariation(#666666, white);
			.m-buttonIcon(@fa-var-github, .97em);
		}

		&--linkedin
		{
			.m-buttonColorVariation(#0077b5, white);
			.m-buttonIcon(@fa-var-linkedin, .88em);
		}

		&--microsoft
		{
			.m-buttonColorVariation(#00bcf2, white);
			.m-buttonIcon(@fa-var-windows, .88em);
		}

		&--yahoo
		{
			.m-buttonColorVariation(#410093, white);
			.m-buttonIcon(@fa-var-yahoo, .88em);
		}
	}

	// button-text and button-menu are always children of button--splitTrigger
	// but are defined here for reasons of specificity, as these border colors
	// are overwritten by .m-buttonBorderColorVariation()

	> .button-text { border-right: @xf-borderSize solid transparent; }
	> .button-menu { border-left: @xf-borderSize solid transparent; }

	&.button--splitTrigger
	{
		.m-clearFix();
		padding: 0;
		font-size: 0;
		display: inline-block;

		button.button-text
		{
			background: transparent;
			border: none;
			border-right: @xf-borderSize solid transparent;
			color: inherit;
		}

		> .button-text,
		> .button-menu
		{
			.xf-buttonBase();
			display: inline-block;

			&:hover
			{
				&:after
				{
					opacity: 1;
				}
			}
		}

		> .button-text
		{
			.m-borderRightRadius(0);
		}

		> .button-menu
		{
			.m-borderLeftRadius(0);
			padding-right: xf-default(@xf-buttonBase--padding-right, 0);// * (2/3);
			padding-left: xf-default(@xf-buttonBase--padding-left, 0);// * (2/3);

			&:after
			{
				.m-menuGadget(); // .58em
				opacity: .5;
			}
		}
	}
}

.buttonGroup
{
	display: inline-block;
	vertical-align: top;
	.m-clearFix();

	&.buttonGroup--aligned
	{
		vertical-align: middle;
	}

	> .button
	{
		float: left;

		&:not(:first-child)
		{
			border-left: none;
		}

		&:not(:first-child):not(:last-child)
		{
			border-radius: 0;
		}

		&:first-child:not(:last-child)
		{
			.m-borderRightRadius(0);
		}

		&:last-child:not(:first-child)
		{
			.m-borderLeftRadius(0);
		}
	}

	> .buttonGroup-buttonWrapper
	{
		float: left;

		&:not(:first-child) > .button
		{
			border-left: none;
		}

		&:not(:first-child):not(:last-child) > .button
		{
			border-radius: 0;
		}

		&:first-child:not(:last-child) > .button
		{
			.m-borderRightRadius(0);
		}

		&:last-child:not(:first-child) > .button
		{
			.m-borderLeftRadius(0);
		}
	}
}

.toggleButton
{
	> input
	{
		display: none;
	}

	> span
	{
		.xf-buttonDisabled();
		.m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));
	}

	&.toggleButton--small > span
	{
		font-size: @xf-fontSizeSmaller;
		padding: @xf-paddingSmall;
	}

	> input:checked + span
	{
		.xf-buttonDefault();
		.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));
	}
}

.u-scrollButtons
{
	position: fixed;
	bottom: 30px;
	<xf:if is="property('uix_fab') == 'always'">
	bottom: 100px;
	<xf:elseif is="property('uix_fab') == 'mobile'" />
	@media(max-width: {{ property('uix_fabVw') - 1 }}px ) {
		bottom: 100px;
	}
	</xf:if>
	<xf:if is="(property('uix_visitorTabsMobile') == 'tabbar') && ( property('uix_fab') != 'never' )">
	@media (max-width: @xf-responsiveNarrow) {
		bottom: {{ property('paddingLarge') + 23 + 100 }}px;
}
</xf:if>
right: (@xf-pageEdgeSpacer) / 2;
.has-hiddenscroll &
{
	right: 20px;
}
z-index: @zIndex-9;
.m-transition(opacity; @xf-animationSpeed);
opacity: 0;
display: none;
&.is-transitioning
{
	display: flex;
}
&.is-active
{
	display: flex;
	opacity: 1;
}
.button
{
	font-size: 14px;
	display: flex;
	height: 24px;
	line-height: 24px;
	+ .button
	{
		margin-left: @xf-paddingMedium;
	}
}
}

.block-outer-opposite .button {
	.xf-uix_buttonSmall();
}]]></template>
    <template title="core_categorylist.less" type="public" addon_id="XF" version_id="2020036" version_string="2.2.0 Beta 6"><![CDATA[// ################################ CATEGORY LIST #######################

@_categoryListTogglerWidth: 1em;
@_categoryListTogglerPaddingH: (@xf-blockPaddingH / 2);

.categoryList
{
	display: none;
	.m-listPlain();

	&.is-active
	{
		display: block;
	}
}

.categoryList-item
{
	padding: 0;
	text-decoration: none;
	font-size: @xf-fontSizeNormal;

	&.categoryList-item--small
	{
		font-size: @xf-fontSizeSmall;
	}

	.categoryList
	{
		padding-left: @xf-paddingLarge;
	}
}

.categoryList-itemDesc
{
	display: block;
	font-size: @xf-fontSizeSmaller;
	font-weight: @xf-fontWeightNormal;
	color: @xf-textColorMuted;
	margin-top: -@xf-blockPaddingV;

	.m-overflowEllipsis();
}

.categoryList-header
{
	padding: @xf-blockPaddingV 0;
	margin: 0;
	color: @xf-textColorFeature;
	text-decoration: none;
	font-weight: @xf-fontWeightHeavy;

	&.categoryList-header--muted
	{
		color: @xf-textColorMuted;
	}

	.m-clearFix();
	.m-hiddenLinks();
}

.categoryList-itemRow
{
	display: flex;
	min-width: 0;
	align-items: center;
}

.categoryList-link
{
	display: block;
	flex-grow: 1;
	padding: (@xf-blockPaddingV / 2) @xf-blockPaddingH;
	text-decoration: none;

	.m-overflowEllipsis();

	&:hover
	{
		text-decoration: none;
	}

	&.is-selected
	{
		font-weight: @xf-fontWeightHeavy;
	}

	.categoryList-toggler + &,
	.categoryList-togglerSpacer + &
	{
		padding-left: 0;
	}
}

.categoryList-label
{
	margin-left: auto;
	align-self: center;
	padding-right: @_categoryListTogglerPaddingH;
}

.categoryList-toggler
{
	display: inline-block;
	padding: (@xf-blockPaddingV / 2) @_categoryListTogglerPaddingH;
	text-decoration: none;
	flex-grow: 0;
	line-height: 1;

	&:hover
	{
		text-decoration: none;
	}

	&:after
	{
		.m-faBase();
		// font-size: 80%;
		.m-faContent(@fa-var-chevron-down, @_categoryListTogglerWidth);
	}

	&.is-active:after
	{
		.m-faContent(@fa-var-chevron-up, @_categoryListTogglerWidth);
	}
}

.categoryList-togglerSpacer
{
	display: inline-block;
	visibility: hidden;
	padding: (@xf-blockPaddingV / 2) (@xf-blockPaddingH / 2);

	&:after
	{
		.m-faBase();
		// font-size: 80%;
		.m-faContent(@fa-var-chevron-down, @_categoryListTogglerWidth);
	}
}]]></template>
    <template title="core_contentrow.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ########################################### CONTENT ROWS ############################

@_contentRow-faderHeight: 150px;
@_contentRow-faderCoverHeight: (@_contentRow-faderHeight) / 2;

.contentRow
{
	display: flex;

	&.contentRow--alignMiddle
	{
		align-items: center;
	}

	&.is-deleted
	{
		opacity: .7;

		.contentRow-header,
		.contentRow-title
		{
			text-decoration: line-through;
		}
	}
}

.m-figureFixed(@size)
{
	width: @size;

	img,
	i.fa,
	i.fal,
	i.far,
	i.fas,
	i.fab,
	i.fad,
	.avatar
	{
		max-height: @size;
	}
}

.contentRow-figure
{
	vertical-align: top;
	white-space: nowrap;
	word-wrap: normal;
	text-align: center;

	img,
	i.fa,
	i.fal,
	i.far,
	i.fas,
	i.fab,
	i.fad,
	.avatar
	{
		vertical-align: bottom;
	}

	&.contentRow-figure--fixedBookmarkIcon
	{
		.m-figureFixed(48px);
	}

	&.contentRow-figure--fixedSmall
	{
		.m-figureFixed(60px);
	}

	&.contentRow-figure--fixedMedium
	{
		.m-figureFixed(100px);

		&.contentRow-figure--fixedMedium--fluidWidth
		{
			width: auto;
			max-width: 200px;
		}
	}

	&.contentRow-figure--fixedLarge
	{
		.m-figureFixed(200px);
	}

	&.contentRow-figure--text
	{
		font-size: @xf-fontSizeLargest;
	}
}

.contentRow-figureContainer
{
	position: relative;

	.contentRow-figureSeparated
	{
		position: absolute;
		right: -5px;
		bottom: -5px;

		.m-avatarSize(@avatar-s / 2 + 2px);
	}
}

.contentRow-figureIcon
{
	text-align: center;
	color: @xf-textColorFeature;


	img,
	i.fa,
	i.fal,
	i.far,
	i.fas,
	i.fab,
	i.fad
	{
		width: 64px;
		overflow: hidden;
		white-space: nowrap;
		word-wrap: normal;
		border-radius: @xf-borderRadiusMedium;

		.contentRow-figure--fixedBookmarkIcon &
		{
			width: 48px;
		}
	}
}

.contentRow-main
{
	flex: 1;
	min-width: 0;
	vertical-align: top;
	padding-left: @xf-paddingLarge;

	&:before
	{
		// because of line height, there appears to be extra space at the top of this
		content: '';
		display: block;
		margin-top: -.18em;
	}

	&.contentRow-main--close
	{
		padding-left: @xf-paddingMedium;
	}

	&:first-child
	{
		padding-left: 0;
	}
}

.contentRow-header
{
	margin: 0;
	padding: 0;
	font-weight: @xf-fontWeightHeavy;
	font-size: @xf-fontSizeLarge;
}

.contentRow-title
{
	margin: 0;
	padding: 0;
	font-weight: @xf-fontWeightNormal;
	font-size: @xf-fontSizeLarge;
}

.contentRow-snippet
{
	font-size: @xf-fontSizeSmall;
	margin: .25em 0;
}

.contentRow-muted
{
	color: @xf-textColorMuted;
}

.contentRow-lesser
{
	font-size: @xf-fontSizeSmall;
}

.contentRow-suffix
{
	padding-left: @xf-paddingMedium;
	white-space: nowrap;
	word-wrap: normal;
}

.contentRow-faderContainer
{
	position: relative;
	overflow: hidden;
}

.contentRow-faderContent
{
	max-height: 150px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 100px, transparent 150px);
	mask-image: linear-gradient(to bottom, #000 100px, transparent 150px);
}

.contentRow-fader
{
	position: absolute;
	top: (@_contentRow-faderHeight) + ((@xf-paddingMedium) * 2) - (@_contentRow-faderCoverHeight);
	left: 0;
	right: 0;
	height: @_contentRow-faderCoverHeight;
	@supports not (-webkit-mask-image) or not (mask-image) {
		.m-gradient(fade(@xf-contentBg, 0%), @xf-contentBg, transparent, 0%, 80%);
	}
}

.contentRow-minor
{
	font-size: @xf-fontSizeSmall;
	color: @xf-textColorMuted;

	time {color: @xf-textColorDimmed;}

	&.contentRow-minor--hideLinks
	{
		.m-hiddenLinks();
		a {text-decoration: underline;}
	}

	&.contentRow-minor--smaller
	{
		font-size: @xf-fontSizeSmaller;
	}

	&.contentRow-minor--singleLine
	{
		.m-overflowEllipsis();
	}
}

.contentRow-spaced
{
	margin: .5em 0;

	&:last-child
	{
		margin-bottom: 0;
	}
}

.contentRow-extra
{
	float: right;
	padding-left: @xf-paddingMedium;
	font-size: @xf-fontSizeSmallest;

	&.contentRow-extra--small
	{
		font-size: @xf-fontSizeSmall;
		color: @xf-textColorMuted;
	}

	&.contentRow-extra--normal
	{
		font-size: @xf-fontSizeNormal;
		color: @xf-textColorMuted;
	}

	&.contentRow-extra--large
	{
		font-size: @xf-fontSizeLarge;
		color: @xf-textColorMuted;
	}

	&.contentRow-extra--larger
	{
		font-size: @xf-fontSizeLarger;
		color: @xf-textColorMuted;
	}

	&.contentRow-extra--largest
	{
		font-size: @xf-fontSizeLargest;
		color: @xf-textColorMuted;
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.contentRow-figure
	{
		&.contentRow-figure--fixedBookmarkIcon
		{
			width: @avatar-xs;
		}

		.avatar--s
		{
			.m-avatarSize(@avatar-xs);
		}
	}

	.contentRow--hideFigureNarrow
	{
		.contentRow-figure
		{
			display: none;
		}

		.contentRow-main
		{
			padding-left: 0;
		}
	}
}]]></template>
    <template title="core_datalist.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ################################# DATA LISTS ###################

.dataList
{
	max-width: 100%;

	&.dataList--separated
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
		border-bottom: @xf-borderSize solid @xf-borderColorLight;
	}

	&.dataList--separatedTop
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}

	&.dataList--separatedBottom
	{
		border-bottom: @xf-borderSize solid @xf-borderColorLight;
	}

	&.dataList--contained
	{
		overflow-x: auto;
		max-height: 300px;
		max-height: 85vh;
	}

	&.dataList--containedFixed
	{
		overflow-x: auto;
		max-height: 300px;
	}

	@media (max-width: @xf-responsiveMedium)
	{
		overflow-x: auto;
	}
}

.dataList-table
{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.dataList-rowGroup
{
	&.is-hidden
	{
		display: none;
	}
}

.m-adjustDataListCellPadding(@paddingV; @paddingH)
{
	padding: @paddingV @paddingH;

	&.dataList-cell--action,
	&.dataList-cell--link
	{
		padding: 0;

		a,
		label,
		.dataList-blockLink
		{
			padding: @paddingV @paddingH;
		}
	}
}

.dataList-row
{
	&:hover:not(.dataList-row--noHover):not(.dataList-row--header):not(.is-spHovered),
	.is-spActive &.is-spChecked
	{
		background: fade(@xf-contentHighlightBg, 50%);
	}

	.is-spActive &.is-spHovered
	{
		background: fade(@xf-contentHighlightBg, 75%);
	}

	.is-spActive &:not(.dataList-row--noHover):not(.dataList-row--header):not(.is-spChecked) *
	{
		color: @xf-textColorMuted;
	}

	&.dataList-row--header
	{
		.dataList-cell
		{
			.xf-dataListHeader();
			.m-adjustDataListCellPadding(@xf-dataListPaddingV/2, @xf-dataListPaddingH);
			.m-textColoredLinks();
			text-align: left;

			&.dataList-cell--min
			{
				text-align: center;
			}
		}
	}

	&.dataList-row--subSection
	{
		.dataList-cell
		{
			.xf-dataListSection();
			.m-adjustDataListCellPadding(@xf-dataListPaddingV/2, @xf-dataListPaddingH);

			a { color: inherit; }
		}

		&:hover:not(.dataList-row--noHover) .dataList-cell
		{
			.xf-dataListSection(background);
		}
	}

	&.dataList-row--note
	{
		.dataList-cell
		{
			text-align: center;
		}
	}

	&.dataList-row--deleted
	{
		.dataList-cell
		{
			opacity: .5;
		}
	}

	&.dataList-row--highlighted
	{
		font-weight: @xf-fontWeightHeavy;
	}

	&.dataList-row--custom
	{
		> .dataList-cell:first-child
		{
			border-left: @xf-borderSizeFeature solid red;
		}

		.dataList-cell--link a
		{
			color: red;
		}
	}

	&.dataList-row--parentCustom
	{
		> .dataList-cell:first-child
		{
			border-left: @xf-borderSizeFeature solid orange;
		}

		.dataList-cell--link a
		{
			color: orange;
		}
	}

	&.dataList-row--protected
	{
		> .dataList-cell:first-child
		{
			border-left: @xf-borderSizeFeature solid @xf-borderColorFeature;
		}
	}

	&.is-hidden
	{
		display: none;
	}

	&.dataList-row--disabled
	{
		.dataList-cell--link a
		{
			color: @xf-textColorMuted;
			.m-transition();
		}
	}

	&.dataList-row--opposite,
	&.dataList-row--header.dataList-row--opposite
	{
		.dataList-cell
		{
			text-align: right;

			&:first-of-type
			{
				text-align: left;
			}
		}
	}

	&.dataList-row--opposite,
	&.dataList-row--header.dataList-row--opposite
	{
		.dataList-cell
		{
			text-align: right;

			&:first-of-type
			{
				text-align: left;
			}
		}
	}

	&.dataList-row--opposite,
	&.dataList-row--header.dataList-row--opposite
	{
		.dataList-cell
		{
			text-align: right;

			&:first-of-type
			{
				text-align: left;
			}
		}
	}

	tbody:last-child &:last-child .dataList-cell
	{
		border-bottom: none;
	}
}

.dataList-cell {
	vertical-align: middle;
	padding: @xf-dataListPaddingV @xf-dataListPaddingH;
	border-bottom: @xf-borderSize solid @xf-borderColorFaint;

	&.dataList-cell--main {
		min-width: 180px;
	}

	&.dataList-cell--minWidth {
		min-width: 17vw;
		min-width: ~"min(17vw, 250px)";
	}

	&.dataList-cell--link,
	&.dataList-cell--action {
		padding: 0;
	}

	&.dataList-cell--alt,
	&.dataList-cell--action {
		background: @xf-contentAltBg;
	}

	&.dataList-cell--highlighted {
		background: @xf-contentHighlightBg;
	}

	&.dataList-cell--separated {
		border-left: @xf-borderSize solid @xf-borderColorFaint;
	}

	&.dataList-cell--min,
	&.dataList-cell--action,
	&.dataList-cell--iconic,
	&.dataList-cell-fa
	{
		width: 1%;
		white-space: nowrap;
		word-wrap: normal;
		text-align: center;
	}

	&.dataList-cell--number
	{
		text-align: right;
	}

	&.dataList-cell--number
	{
		text-align: right;
	}

	&.dataList-cell--action {
		font-size: @xf-fontSizeSmaller;
	}

	&.dataList-cell--action,
	&.dataList-cell--link {
		cursor: pointer;
		text-decoration: none;

		&.dataList-cell--alt:hover,
		&.dataList-cell--action:hover {
			background: @xf-contentHighlightBg;
		}

		a,
		label,
		.dataList-blockLink {
			padding: @xf-dataListPaddingV @xf-dataListPaddingH;
			display: block;
			height: 100%;
			text-decoration: none;
			cursor: pointer;
		}

		input {
			cursor: pointer;
		}
	}

	&.dataList-cell--action a:not(.iconic) {
		//	padding: @xf-dataListPaddingV @xf-dataListPaddingH * 2;
	}

	&.dataList-cell--iconic,
	&.dataList-cell--fa
	{
		padding: 0;
		font-size: 125%;
		min-width: 2.5em;
		position: relative;
		text-align: center;
	}

	&.dataList-cell--iconic
	{
		> a.iconic > i
		{
			.iconicIcon(false);
		}

		> .iconic
		{
			position: absolute;

			// fill the cell
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			> i
			{
				&:before,
				&:after
				{
					left: 50%;
					margin-left: -.5em; // half of icon width

					top: 50%;
					margin-top: -.5em; // half of icon height
				}
			}

			> input[type=checkbox] + i
			{
				&:before,
				&:after
				{
					margin-top: -.7em;
					margin-left: -.4375em; // half of .fa-check-square width
				}
			}

			> input[type=radio] + i
			{
				&:before,
				&:after
				{
					margin-top: -.7em;
					margin-left: -.5em; // half of .fa-check-square width
				}
			}

			&.iconic--toggle > input[type=checkbox] + i
			{
				&:before
				{
					.m-faContent(@fa-var-toggle-off, 1.125em);
				}

				&:after
				{
					.m-faContent(@fa-var-toggle-on, 1.125em);
				}

				&:before,
				&:after
				{
					font-size: 120%;
					margin-top: -.7em;
					margin-left: -.5625em; // half of .fa-toggle-on width
				}
			}

			&.iconic--delete > i
			{
				&:before
				{
					.m-faContent(@fa-var-trash-alt, .875em);
				}

				&:before,
				&:after
				{
					margin-top: -.7em;
					margin-left: -.4375em; // half of .fa-trash-alt width
				}
			}
		}
	}

	&.dataList-cell--image
	{
		padding: 0;

		a
		{
			padding: 0;
		}

		img,
		.dataList-imagePlaceholder
		{
			display: block;
			margin: auto;
			font-size: 30px;
		}
	}

	&.dataList-cell--imageSmall
	{
		img,
		.dataList-imagePlaceholder
		{
			height: 41px;
			max-width: 41px;
			line-height: 41px;
		}

		.avatar
		{
			.m-avatarSize(41px);
			border-radius: 2px;
		}
	}

	&.dataList-cell--imageSmallWide
	{
		img,
		.dataList-imagePlaceholder
		{
			height: 41px;
			max-width: 82px;
			line-height: 41px;
		}

		.avatar
		{
			.m-avatarSize(41px);
			border-radius: 0;
		}
	}

	&.dataList-cell--imageMedium
	{
		img,
		.dataList-imagePlaceholder
		{
			height: 54px;
			max-width: 54px;
			line-height: 54px;
		}

		.avatar
		{
			.m-avatarSize(54px);
			border-radius: 0;
		}
	}

	&.dataList-cell--imageMediumWide
	{
		img,
		.dataList-imagePlaceholder
		{
			height: 54px;
			max-width: 108px;
			line-height: 54px;
		}

		.avatar
		{
			.m-avatarSize(54px);
			border-radius: 0;
		}
	}

	&.dataList-cell--responsiveMenuTrigger,
	&.dataList-cell--fauxResponsiveMenuTrigger
	{
		display: none;
	}

	&.dataList-cell--breakWord
	{
		word-break: break-word;
	}

	&.dataList-cell--hint,
	.dataList-row--subSection &.dataList-cell--hint
	{
		text-align: right;
		font-size: @xf-fontSizeSmaller;
		color: @xf-textColorMuted;
	}

	// create ten depth classes for the appearance of nested items
	.depthLoop(@i) when (@i <= 10)
	{
		&.dataList-cell--d@{i} { text-indent: (@i - 1) * 25px; }
		.depthLoop(@i + 1);
	}
	.depthLoop(1);

	.is-match
	{
		text-decoration: underline;
		color: red;
	}

	@media (max-width: @xf-responsiveMedium)
	{
		&.dataList-cell--responsiveMenuItem,
		&.dataList-cell--fauxResponsiveMenuItem
		{
			display: none !important;
		}

		&.dataList-cell--responsiveMenuTrigger,
		&.dataList-cell--fauxResponsiveMenuTrigger
		{
			display: table-cell;
		}
	}
}

.dataList-imagePlaceholder
{
	&:after
	{
		content: '?';
	}
}

.dataList-mainRow,
.dataList-textRow,
.dataList-subRow
{
	width: 0;
	min-width: 100%;
	line-height: 1.4;
	max-height: 1.4em;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
	text-overflow: ellipsis;

	&:empty { display: none; }
}

.dataList-mainRow
{
	font-weight: @xf-fontWeightHeavy;

	.dataList-row--subSection &
	{
		font-weight: @xf-fontWeightNormal;
	}
}

.dataList-secondRow
{
	display: block;
	font-size: @xf-fontSizeSmallest;
}

.dataList-hint,
.dataList-subRow
{
	color: @xf-textColorMuted;
	font-size: @xf-fontSizeSmaller;
	font-weight: @xf-fontWeightNormal;
}

.dataList-hint
{
	display: inline;
}

.dataList-row--footer .dataList-cell
{
	// note that this is applied as a cell style which has higher priority than the row styles normally applied
	padding: @xf-dataListPaddingV/2 @xf-dataListPaddingH;
	border-bottom: none;
	.xf-dataListFooter();
}

.dataList--responsive
{
	.dataList-table,
	tbody,
	thead,
	tfoot
	{
		display: block;
	}

	.dataList-row
	{
		display: block;

		&.dataList-row--headerResponsive
		{
			display: none;
		}
	}

	.dataList-cell
	{
		display: block;
		width: auto;

		&[data-cell-label]
		{
			display: flex;
			align-items: center;
			
			> *
			{
				min-width: 0;
				text-align: right;
			}

			&:before
			{
				display: table-cell;

				content: attr(data-cell-label) "{$xf.language.label_separator}";
				padding-right: @xf-dataListPaddingH;
				margin-right: auto;
				word-break: normal;
				white-space: normal;
				text-align: left;
			}

			> .input:first-child:last-child
			{
				display: inline;
			}

			a
			{
				// commonly a URL, but needed to prevent a potential overflow
				min-width: 0;
			}
		}

		&.dataList-cell--iconic
		{
			&:not([data-cell-label]):before
			{
				content: "";
				display: inline-block;
				height: 1em;
			}

			padding: @xf-dataListPaddingV @xf-dataListPaddingH;
		}

		&.dataList-cell--link,
		&.dataList-cell--action
		{
			&[data-cell-label]:before
			{
				padding: @xf-dataListPaddingV @xf-dataListPaddingH;
			}
		}

		&.dataList-cell--iconic,
		&.dataList-cell--fa
		{
			display: table-cell;
			width: 1%;
		}

		&.dataList-cell--iconic[data-cell-label]
		{
			display: flex;
			width: auto;
			font-size: 100%;

			.iconic
			{
				position: relative;
			}
		}
	}

	.dataList-row:not(.dataList-row--header):not(.dataList-row--subSection)
	{
		border-bottom: @xf-borderSize solid @xf-borderColorLight;

		.dataList-cell
		{
			border-bottom: none;
		}
	}

	tbody:last-child .dataList-row:not(.dataList-row--header):not(.dataList-row--subSection):last-child
	{
		border-bottom: none;
	}

	.dataList-mainRow,
	.dataList-textRow,
	.dataList-subRow
	{
		width: auto;
		min-width: 0;
	}
}]]></template>
    <template title="core_filter.less" type="public" addon_id="XF" version_id="2020034" version_string="2.2.0 Beta 4"><![CDATA[// ##################### FILTERING #####################

.filterBlock
{
	padding: @xf-paddingMedium;
	font-size: @xf-fontSizeSmaller;
	float: right;
	.xf-contentBase();
	.xf-blockBorder();
	border-radius: @xf-blockBorderRadius;
	.m-clearFix();

	.filterBlock-input
	{
		width: 150px;
		display: inline;
		font-size: @xf-fontSizeSmaller;

		&.filterBlock-input--small
		{
			width: 100px;
		}
	}

	select.filterBlock-input
	{
		width: auto;
	}
}

.quickFilter
{
	position: relative;

	.input
	{
		width: 180px;
		font-size: @xf-fontSizeSmaller;
	}

	label
	{
		font-size: @xf-fontSizeSmaller;
	}

	input[type=checkbox]
	{
		.m-checkboxAligner();
	}

	.js-filterClear
	{
		color: @controlColor;

		&:hover
		{
			color: @controlColor--hover;
		}

		&:before
		{
			.m-faBase();
			.m-faContent(@fa-var-times);
		}
	}
}

.filterBar
{
	.m-clearFix();
}

.filterBar-filters
{
	.m-listPlain();
	display: inline;

	> li
	{
		display: inline;
	}
}

.filterBar-filterToggle
{
	display: inline-block;
	text-decoration: none;
	color: inherit;
	padding: 1px 8px;
	border-radius: @xf-borderRadiusMedium;
	.m-transition();

	&:after
	{
		.m-faBase();
		font-size: 80%;
		.m-faContent(" @{fa-var-times}");
		opacity: .5;
		.m-transition(opacity);
	}

	&:hover
	{
		text-decoration: none;

		&:after
		{
			opacity: 1;
		}
	}
}

.filterBar-filterToggle-label
{
	opacity: .75;
}

.filterBar-menuTrigger
{
	float: right;
	white-space: nowrap;
	border-radius: @xf-borderRadiusMedium;
	text-decoration: none;
	padding: 1px  5px;
	.xf-uix_buttonSmall();

	&:after
	{
		.m-menuGadget();
	}
}

@media (max-width: @xf-responsiveMedium)
{
	.filterBar-filterToggle-label
	{
		display: none;
	}
}]]></template>
    <template title="core_formrow.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ########################################### FORM ROWS #################################

@_form-labelShiftInput: @xf-input--padding + @xf-borderSize; // technically input border-top-width + padding-top
@_form-labelButtonInput: 5px; // technically button border-top-width + padding-top, adjusted for text size differences
@_form-elementSpacer: @xf-paddingMedium;

.m-formRowBlockStyle()
{
	display: block;

	> dt,
	> dd
	{
		width: auto;
		display: block;
		padding: ((@xf-formRowPaddingV) / 2) @xf-formRowPaddingHOuter @xf-formRowPaddingV;
	}

	> dt
	{
		background: none;
		border: none;
		text-align: left;
padding-bottom: 0;

		.formRow-hint
		{
			display: inline;
		}
	}

	&.formRow--input,
	&.formRow--button
	{
		> dt
		{
			padding-top: ((@xf-formRowPaddingV) / 2);
		}
	}

	> dd
	{
		padding-top: ((@xf-formRowPaddingV) / 2);
	}

	> dd > .inputChoices:first-child
	{
		padding-top: 0;
	}
}

.formRow--button li:not(:last-child) {margin-right: 8px;}

.formRow
{
	display: table;
	table-layout: fixed;
	width: 100%;
	margin: 0;
	position: relative;

	> dt,
	> dd
	{
		display: table-cell;
		vertical-align: top;
		margin: 0;
	}

	> dt
	{
		border-right: @xf-borderSize solid transparent;
		.xf-formLabel();
		width: @xf-formLabelWidth;
		padding: @xf-formRowPaddingV @xf-formRowPaddingHInner @xf-formRowPaddingV @xf-formRowPaddingHOuter;
	}

	> dd
	{
		width: (100% - @xf-formLabelWidth);
		padding: @xf-formRowPaddingV @xf-formRowPaddingHOuter @xf-formRowPaddingV @xf-formRowPaddingHInner;
	}

	&.formRow--input > dt
	{
		padding-top: (@xf-formRowPaddingV + @_form-labelShiftInput);
	}

	&.formRow--button > dt
	{
		padding-top: (@xf-formRowPaddingV + @_form-labelButtonInput);
	}

	&.formRow--inputLabelPair > dt
	{
		padding-top: (@xf-formRowPaddingV * 2);
	}

	&.formRow--valueToEdge > dd
	{
		padding-left: 0;
		padding-right: 0;
	}

	&.formRow--noValuePadding > dd
	{
		padding: 0;
	}

	&.formRow--fullWidth
	{
		.m-formRowBlockStyle();

		& + .formRow,
		.formRow + &,
		& + * > .formRow:first-of-type, // allows formRows to be wrapped
		.formRow + * > &:first-of-type //  in a single-depth grouping element
		{
			border-top: @xf-borderSize solid @xf-borderColorLight;
		}

		&.formRow--noLabel
		{
			> dt
			{
				display: none;
			}

			> dd
			{
				padding-top: @xf-formRowPaddingV;
			}
		}

		& + .formRow--mergePrev,
		& + * > .formRow:first-of-type.formRow--mergePrev,
		&.formRow--mergeNext + &,
		&.formRow--mergeNext + * > &:first-of-type
		{
			border-top: 0;

			> dt
			{
				padding-top: 0;
			}
		}

		&.formRow--noGutter
		{
			> dt,
			> dd
			{
				padding-left: 0;
				padding-right: 0;
			}
		}

		&.formRow--noPadding
		{
			> dt,
			> dd
			{
				padding: 0;
			}
		}

		&.formRow--noTopPadding
		{
			> dt,
			> dd
			{
				padding-top: 0;
			}
		}

		&.formRow--noBottomPadding
		{
			> dt,
			> dd
			{
				padding-bottom: 0;
			}
		}

		&.formRow--noPadding + &,
		&.formRow--noPadding + * > &:first-of-type
		{
			> dt
			{
				padding-top: @xf-formRowPaddingV;
			}
		}
	}

	&.formRow--limited
	{
		display: none;
	}

	&.formRow--inputMultiLine > dd
	{
		> .input,
		> .inputGroup
		{
			margin-bottom: @_form-elementSpacer;

			&:last-child
			{
				margin-bottom: 0;
			}
		}
	}

	.formRow-label
	{
		.m-appendColon();
	}

	&.formRow--noColon .formRow-label:after
	{
		content: "";
	}

	.formRow-explain
	{
		margin: @_form-elementSpacer 0 0;
		.m-formElementExplain();

		&:first-child
		{
			margin: 0;
			font-size: inherit;
		}
	}

	&.formRow--explainOffset .formRow-explain
	{
		margin-top: (@_form-elementSpacer) * 2;
	}

	.formRow-hint
	{
		display: block;
		font-style: normal;
		.xf-formHint();

		.m-textColoredLinks();

		.formRow-hint-featured
		{
			display: block;
			//font-weight: @xf-fontWeightHeavy;
			color: @xf-textColorFeature;
		}
	}

	+ .formInfoRow
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}

	@media (max-width: @xf-formResponsive)
	{
		.m-formRowBlockStyle();
	}
	
	.menu & {.m-formRowBlockStyle();}
}

.formButtonGroup
{
	display: flex;
	flex-wrap: wrap;
	margin-top: @xf-paddingLarge;
	margin-bottom: -5px;

	&.formButtonGroup--close
	{
		margin-top: 0;
	}
}

.formButtonGroup-primary
{
	order: 2;
	margin-left: auto;
	margin-bottom: 5px;

	.formButtonGroup--simple &
	{
		order: 1;
		margin-left: 0;
	}
}

.formButtonGroup-extra
{
	order: 1;
	margin-bottom: 5px;

	.formButtonGroup--simple &
	{
		order: 2;
		margin-left: @xf-paddingSmall;
	}
}

.formInfoRow
{
	padding: @xf-formRowPaddingV @xf-formRowPaddingHOuter;

	&.formInfoRow--close
	{
		padding-top: ((@xf-formRowPaddingV) / 2);
		padding-bottom: ((@xf-formRowPaddingV) / 2);
	}

	&.formInfoRow--noPadding
	{
		padding: 0;
	}

	&.formInfoRow--confirm
	{
		text-align: center;

		strong
		{
			display: block;
			margin: .5em 0;
			font-size: @xf-fontSizeLarger;

			&:last-child
			{
				margin-bottom: 0;
			}
		}
	}

	+ .formRow
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}

	&.u-hidden:not(.is-active)
	{
		+ .formRow
		{
			border-top: none;
		}
	}

	> .b

