						<span class="p-navgroup-linkText">{{ phrase('log_out') }}</span>
							</a>
						<xf:else />
							<a href="{{ link('account') }}"
								class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--user {{ ($xf.visitor.conversations_unread OR $xf.visitor.alerts_unread) ? 'badgeContainer badgeContainer--highlighted' : '' }}"
							    data-badge="{{ ($xf.visitor.conversations_unread + $xf.visitor.alerts_unread)|number }}"
							    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 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('conversations')|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 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:else />
						<xf:if is="property('dt_triggers_style') == 'option2'">
							<a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--logIn" data-xf-click="menu">
								<i aria-hidden="true"></i>
								<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
							</a>
						<xf:else />
							<a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--logIn"
								data-xf-click="overlay" data-follow-redirects="on">
								<i aria-hidden="true"></i>
								<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
							</a>
						</xf:if>
						<div class="menu menu--structural menu--medium" data-menu="menu" data-nav-id="userLogin" aria-hidden="true" data-href="{{ link('login')}}"></div>
						<xf:if is="$xf.options.registrationSetup.enabled">
							<a href="{{ link('register') }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--register"
								data-xf-click="overlay" data-follow-redirects="on">
								<i aria-hidden="true"></i>
								<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
							</a>
						</xf:if>
					</xf:if>
				</div>

				<div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}">
					<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')|for_attr }}">
						<i aria-hidden="true"></i>
						<span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
					</a>

					<xf:if is="$xf.visitor.canSearch()">
						<a href="{{ link('search') }}"
							class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search"
							data-xf-click="menu"
							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 }}">
							<i aria-hidden="true"></i>
							<span class="p-navgroup-linkText">{{ phrase('search') }}</span>
						</a>
						<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"
												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"
											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')|for_attr }}">

														<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') }}" 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>
					</xf:if>
				</div>
			</div>
		</div>
		
		<xf:ad position="container_header" />
	</nav>
</xf:set>
<xf:set var="$subNavHtml">
	<xf:if is="$selectedNavChildren is not empty">
		<div class="p-sectionLinks">
			<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>
		</div>
	<xf:elseif is="{$selectedNavEntry}" />
		<div class="p-sectionLinks p-sectionLinks--empty"></div>
	</xf:if>
</xf:set>

<xf:if is="property('publicNavSticky') == 'primary'">
	<div class="p-navSticky p-navSticky--primary {{ ({$xf.visitor.is_moderator} && (property('dt_sticky_staff_tools'))) ? 'p-staffSticky' : '' }}" data-xf-init="sticky-header">
		{$navHtml|raw}
	</div>
	{$subNavHtml|raw}
<xf:elseif is="property('publicNavSticky') == 'all'" />
	<div class="p-navSticky p-navSticky--all {{ ({$xf.visitor.is_moderator} && (property('dt_sticky_staff_tools'))) ? 'p-staffSticky' : '' }}" data-xf-init="sticky-header">
		{$navHtml|raw}
		{$subNavHtml|raw}
	</div>
<xf:else />
	{$navHtml|raw}
	{$subNavHtml|raw}
</xf:if>

<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">
		<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">
				<div class="offCanvasMenu-linkHolder">
					<a href="{{ link('account') }}" class="offCanvasMenu-link">
						<xf:avatar user="$xf.visitor" size="xxs" href="" />
						{$xf.visitor.username}
					</a>
				</div>
				<hr class="offCanvasMenu-separator" />
			</div>
		<xf:else />
			<div class="p-offCanvasRegisterLink">
				<div class="offCanvasMenu-linkHolder">
					<a href="{{ link('login') }}" class="offCanvasMenu-link" data-xf-click="overlay" data-menu-close="true">
						{{ phrase('log_in') }}
					</a>
				</div>
				<hr class="offCanvasMenu-separator" />
				<xf:if is="$xf.options.registrationSetup.enabled">
					<div class="offCanvasMenu-linkHolder">
						<a href="{{ link('register') }}" class="offCanvasMenu-link" data-xf-click="overlay" data-menu-close="true">
							{{ phrase('register') }}
						</a>
					</div>
					<hr class="offCanvasMenu-separator" />
				</xf:if>
			</div>
		</xf:if>
		<div class="js-offCanvasNavTarget"></div>
		<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>

<div class="p-body">
	<div class="p-body-header">
		<div class="p-body-header-inner">
			<xf:if is="$headerHtml is not empty">
				{$headerHtml|raw}
			<xf:elseif contentcheck="true" />
				<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:if contentcheck="true">
								<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
							</xf:if>
						</xf:contentcheck>
						</div>
					</xf:if>

					<xf:if is="$description is not empty">
						<div class="p-description">{$description}</div>
					</xf:if>
				</xf:contentcheck>
			</xf:if>
		</div>
	</div>
	
	<div class="p-body-inner">
		<!--XF:EXTRA_OUTPUT-->
		
		<xf:if is="property('dt_guest_message')">
			<xf:if is="!$xf.visitor.user_id">
				<div class="p-guest--message">
					<div class="p-guest--message-content">
						{{ property('dt_guest_message_content') }}
					</div>
				</div>
			</xf:if>	
		</xf:if>

		<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:macro template="browser_warning_macros" name="javascript" />
		<xf:macro template="browser_warning_macros" name="browser" />
		
		<xf:ad position="container_breadcrumb_top_above" />
		
		<div class="p-breadcrumbs--container{{ $sidebar ? ' p-breadcrumbs--container--side' : '' }}">
			<xf:macro name="breadcrumbs"
			arg-breadcrumbs="{$breadcrumbs}"
			arg-navTree="{$navTree}"
			arg-selectedNavEntry="{$selectedNavEntry}" />
			<xf:if is="$sidebar"><xf:if is="property('dt_collapsible_sidebar') && !property('dt_disable_sidebar') && $sidebar"><span id="collapse-side" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_side-1') ? ' is-active' : '' }}" data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie" data-target=".p-body-sidebar, .p-body-content" data-storage-key="_side-1"></span></xf:if></xf:if>
		</div>
		
		<xf:ad position="container_breadcrumb_top_below" />

		<div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}">
			<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" data-ocm-class="offCanvasMenu offCanvasMenu--blocks" id="js-SideNavOcm" data-ocm-builder="sideNav">
						<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>
			</xf:if>

			<div class="p-body-content {{ !is_toggled('_side-1') ? 'is-active' : '' }}">
				<xf:ad position="container_content_above" />
				<div class="p-body-pageContent">{$content|raw}</div>
				<xf:ad position="container_content_below" />
			</div>

			<xf:if is="$sidebar">
				<div class="p-body-sidebar {{ !is_toggled('_side-1') ? 'is-active' : '' }}">
					<xf:ad position="container_sidebar_above" />
					<xf:if is="!$xf.visitor.user_id AND property('dt_sidebar_login')">
						<xf:include template="dt_sidebar_login" />	
					</xf:if>
					<xf:foreach loop="$sidebar" value="$sidebarHtml">
						{$sidebarHtml}
					</xf:foreach>
					<xf:ad position="container_sidebar_below" />
				</div>
			</xf:if>
		</div>

		<xf:ad position="container_breadcrumb_bottom_above" />
		<xf:macro name="breadcrumbs"
			arg-breadcrumbs="{$breadcrumbs}"
			arg-navTree="{$navTree}"
			arg-selectedNavEntry="{$selectedNavEntry}"
			arg-variant="bottom" />
		<xf:ad position="container_breadcrumb_bottom_below" />
	</div>
</div>
	
<xf:if is="property('dt_extra_footer')"><xf:include template="extra_footer" /></xf:if>

<footer class="p-footer" id="footer">
	<div class="p-footer-inner">

		<div class="p-footer-row">
			<div class="p-footer-row-main">
				<ul class="p-footer-linkList">
					<xf:if contentcheck="true">
						<xf:contentcheck>
							<xf:if is="$xf.cookieConsent.getMode() == 'advanced'">
								<li><a href="{{ link('misc/cookies') }}" rel="nofollow"
									data-xf-init="tooltip" title="{{ phrase('cookie_consent')|for_attr }}"
									data-xf-click="cookie-consent-toggle">
									<xf:fa icon="fa-cookie" /> {{ phrase('cookie_consent_label') }}
								</a></li>
							</xf:if>
							<xf:if is="$xf.visitor.canChangeStyle()">
								<li><a href="{{ link('misc/style') }}" data-xf-click="overlay"
									data-xf-init="tooltip" title="{{ phrase('style_chooser')|for_attr }}" rel="nofollow">
									<xf:fa icon="fa-paint-brush" /> {$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')|for_attr }}" rel="nofollow">
									<xf:fa icon="fa-globe" /> {$xf.language.title}</a></li>
							</xf:if>
						</xf:contentcheck>
					</xf:if>
					<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="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}"><span aria-hidden="true"><xf:fa icon="fa-rss" /><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li>
				</ul>
			</div>
		</div>
		<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>
</footer>

</div> <!-- closing p-pageWrapper -->

<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:if is="property('scrollJumpButtons')">
	<div class="u-scrollButtons js-scrollButtons" data-trigger-type="{{ property('scrollJumpButtons') }}">
		<xf:button href="#top" class="button--scroll" 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" 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:macro template="helper_js_global" name="body" arg-app="public" arg-jsState="{$jsState}" />

<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>

{$ldJsonHtml|raw}

</body>
</html>

<xf:macro name="nav_entry" arg-navId="!" arg-nav="!" arg-selected="{{ false }}" arg-shortcut="">
	<div class="p-navEl {{ $selected ? 'is-selected' : '' }}" {{ $nav.children ? 'data-has-children="true"' : '' }}>
		<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}"
			data-xf-click="menu"
			data-menu-pos-ref="< .p-navEl"
			class="p-navEl-linkHolder"
			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">
			<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>
	</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="{{ trim($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>{{ $titleHtml ? $titleHtml|raw : $nav.title }}<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-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>

<xf:macro name="breadcrumbs" arg-breadcrumbs="!" arg-navTree="!" arg-selectedNavEntry="{{ null }}" arg-variant="">
	<xf:if contentcheck="true">
		<ul class="p-breadcrumbs {{ $variant ? 'p-breadcrumbs--' . $variant : '' }}"
			itemscope itemtype="https://schema.org/BreadcrumbList">
		<xf:contentcheck>
			<xf:set var="$position" value="{{ 0 }}" />

			<xf:set var="$rootBreadcrumb" value="{$navTree.{$xf.options.rootBreadcrumb}}" />
			<xf:set var="$rootBreadcrumbHref" value="{{ $rootBreadcrumb.href|substr(-1) == '/'
					? $rootBreadcrumb.href
					: $rootBreadcrumb.href . '/'
				}}" />

			<xf:if is="$rootBreadcrumb AND $rootBreadcrumbHref != $xf.uri AND $rootBreadcrumbHref != $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 != $rootBreadcrumbHref">
				<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:contentcheck>
		</ul>
	</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('dt_homeCrumb_icon')">
				<xf:fa icon="fa-home" />
				<xf:else />
				<span itemprop="name">{$value}</span>
			</xf:if>
		</a>
		<xf:if is="$position"><meta itemprop="position" content="{$position}" /></xf:if>
	</li>
</xf:macro> ]]>
</template>
<template title="account_visitor_menu" type="public" addon_id="XF" version_id="2010670" version_string="2.1.6">
<![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">
			<div class="contentRow-figure">
				<span class="avatarWrapper">
					<xf:avatar user="{$xf.visitor}" size="m" 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 class="contentRow-minor">
					<!--[XF:stats_pairs:above_messages]-->
					<dl class="pairs pairs--justified fauxBlockLink">
						<dt>{{ phrase('messages') }}</dt>
						<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">
						<dt>{{ phrase('reaction_score') }}</dt>
						<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">
							<dt>{{ phrase('trophy_points') }}</dt>
							<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>
			</div>
		</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:if is="property('dt_condense_visito_tabs')">
			<li><a href="{{ link('conversations') }}" class="menu-linkRow js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}" data-badge="{$xf.visitor.conversations_unread|number}">{{ phrase('conversations') }}</a></li>
			<li><a href="{{ link('account/alerts') }}" class="menu-linkRow js-badge--alerts badgeContainer{{ $xf.visitor.alerts_unread ? ' badgeContainer--highlighted' : '' }}" data-badge="{$xf.visitor.alerts_unread|number}">{{ phrase('alerts') }}</a></li>
		</xf:if>
		<!--[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="app_body.less" type="public" addon_id="XF" version_id="2020970" version_string="2.2.9">
<![CDATA[ // ######################################### MAIN BODY #################################

.p-body
{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex-grow: 1;
	min-height: 1px; // IE11 workaround - related to #139187
}

.p-body-inner
{
	display: flex;
	flex-direction: column;
	width: 100%;
}

.p-body-inner
{
	.m-pageWidth();
	.m-pageInset();
	.m-clearFix();

	padding-top: ((@xf-elementSpacer) / 2);
	padding-bottom: @xf-elementSpacer;
}

.p-body-header
{
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: scroll;
	border-top: 0px solid rgb(33, 31, 42);
	border-bottom: 0px solid rgb(33, 31, 42);
	background-color: @xf-contentHighlightBg;
	background-image: url("{{ property('dt_header_background') }}");
	clip-path: polygon(0 0,100% 0,100% calc(~'100% - 45px'),calc(~'100% - 45px') 100%,0 100%);
	transform: translate3d(0,0,0);
	will-change: clip-path,transform;
	overflow: hidden;
	margin-bottom: @xf-elementSpacer;
	
	&::before
	{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(35deg, rgba(20, 23, 29, .85) 20%, rgba(30, 33, 39, .15) 100%);
		z-index: 1;
	}
	
	&-inner
	{
		.m-pageWidth();
		.m-pageInset();

		position: relative;
		padding-top: 4%;
		padding-bottom: 4%;
		z-index: 4;
	}
	
	.p-title-value
	{
		color: @xf-linkColor;
		font-size: 3.2em;
		font-weight: 900;
		text-transform: uppercase;
		-webkit-text-stroke: 2px currentColor;
		-webkit-text-fill-color: transparent;
		letter-spacing: 2px;
		
		@media (max-width: @xf-responsiveMedium)
		{
			font-size: 2em;
		}
	}
	
	.p-description
	{
		font-size: @xf-fontSizeLarge;
	}
	
	&::after
	{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url("{{ asset('dt_theme_files') }}/img/pattern.png");
		background-repeat: repeat;
		background-position: center center;
		opacity: .45;
		z-index: 1;
	}
}

.p-body-main
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
	min-height: 1px; // IE11 workaround - related to #139187
	margin-bottom: auto;
}

.p-body-content
{
	display: block;
	width: 100%;

	.p-body-main--withSideNav &
	{
		@media (min-width: @xf-responsiveWide)
		{
			flex-grow: 1;
			display: inline-block;
			width: calc(~'100% - @{xf-sidebarWidth} - @{xf-sidebarSpacer}');
			max-width: calc(~'100% - @{xf-sidebarWidth} - @{xf-sidebarSpacer}');
		}
	}

	.p-body-main--withSidebar &
	{
		flex-grow: 1;
		display: inline-block;
		width: calc(~'100% - @{xf-sidebarWidth} - @{xf-sidebarSpacer}');
		max-width: calc(~'100% - @{xf-sidebarWidth} - @{xf-sidebarSpacer}');
	}
	
	.p-body-main--withSidebar.p-body-main--withSideNav &
	{
		flex-grow: 1;
		display: inline-block;
		width: calc(~'100% - @{xf-sidebarWidth} - @{xf-sidebarWidth} - @{xf-sidebarSpacer}');
		max-width: calc(~'100% - @{xf-sidebarWidth} - @{xf-sidebarWidth} - @{xf-sidebarSpacer}');
	}

	.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: @xf-pageWidthMax)
			{
				// 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-responsiveWide)
			{
				// sidebar/sidenav have been moved/hidden
				max-width: 100vw;
			}
		}
	}
}

.p-body-pageContent
{
	> .tabs--standalone:first-child
	{
		margin-bottom: (@xf-elementSpacer) / 2;
	}
}

.p-body-sideNav
{
	display: inline-block;
	width: @xf-sidebarWidth;
}

.p-body-sideNavTrigger
{
	display: none;
}

.p-body-sidebar
{
	display: inline-block;
	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: auto;
}

.p-body-content,
.p-body-pageContent,
.p-body-sideNav,
.p-body-sideNavContent,
.p-body-sidebar
{
	> :first-child
	{
		margin-top: 0;
	}

	> :last-child
	{
		margin-bottom: 0;
	}
}

@media (max-width: @xf-responsiveWide)
{
	.p-body-sideNavCol,
	.p-body-contentCol,
	.p-body-sidebarCol
	{
		display: none;
		width: auto;
	}

	.p-body-main,
	.p-body-content
	{
		display: block;
		overflow: hidden;
	}

	.p-body-sideNav
	{
		display: block;
		width: auto;
	}

	.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
	{
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		margin: (@xf-elementSpacer) -((@xf-pageEdgeSpacer) / 2) -(@xf-elementSpacer);
		width: auto;

		> *
		{
			margin: 0 ((@xf-pageEdgeSpacer) / 2) @xf-elementSpacer;
			min-width: @xf-sidebarWidth;
			flex: 1 1 @xf-sidebarWidth;

			&:last-child
			{
				margin-bottom: @xf-elementSpacer;
			}
		}

		// 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-main--withSidebar.p-body-main--withSideNav
	{
		.p-body-content {
			width: 100%;
			max-width: 100%;
			padding: 0; 
		}
	}
}

@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;
		width: 100%;
		margin-left: 0;
		margin-right: 0;

		> *
		{
			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[ .p-breadcrumbs
{
	.m-listPlain();
	.m-clearFix();

	margin-bottom: 5px;
	line-height: 1.5;

	&.p-breadcrumbs--bottom
	{
		margin-top: @xf-elementSpacer;
		margin-bottom: 0;
	}

	> li
	{
		float: left;
		font-size: @xf-fontSizeSmall;

		a
		{
			display: inline-block;
			vertical-align: bottom;
			max-width: 300px;
			.m-overflowEllipsis();
		}

		&: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
		}
		
		&:first-child {
			&:before {
				.m-faContent(@fa-var-home);
				font-size: @xf-fontSizeSmall;
				margin-right: .5em;
			}
		}

		&:last-child
		{
			a
			{
				font-weight: @xf-fontWeightHeavy;
			}
		}
	}
}

@media (max-width: @xf-responsiveMedium)
{
	.p-breadcrumbs > li a
	{
		max-width: 200px;
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.p-breadcrumbs
	{
		> li
		{
			display: none;

			&:last-child
			{
				display: block;
			}

			a
			{
				max-width: 90vw;
			}

			&:after
			{
				display: none;
			}

			&:before
			{
				.m-faContent(@fa-var-chevron-left, false, ltr);
				.m-faContent(@fa-var-chevron-right, false, rtl);
				margin-right: .5em;
			}
		}
	}
} ]]>
</template>
<template title="app_inlinemod.less" type="public" addon_id="XF" version_id="2021270" version_string="2.2.12">
<![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-contentAccentBase();
	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;
	}

	&.is-active:first-of-type
	{
		.m-dropShadow(0, 0, 8px, 3px, 0.12);
	}
}

.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: @xf-lineHeightDefault;
	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="2020970" version_string="2.2.9">
<![CDATA[ // navEl / Navigation Elements for header navigation

.p-navEl
{
	.m-clearFix();
}

.p-navEl-linkHolder
{
	float: left;
}

.p-navEl-link
{
	float: left;
	.m-transition(opacity, background; @_nav-elTransitionSpeed);

	&.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();

	a
	{
		color: inherit;
	}
}

.p-nav-inner
{
	.m-pageWidth();
	.m-pageInset(0px);
	.m-clearFix();
	display: flex;
	align-items: center;
}

.p-nav .p-nav-menuTrigger
{
	display: none;
	vertical-align: middle;
	align-self: center;
	margin-left: max(0px, @xf-pageEdgeSpacer - 6px);
	margin-right: 5px;
	padding: (@xf-publicNavPaddingV - 12px) 8px;
	color: inherit;

	&:hover
	{
		text-decoration: none;
	}
	
	&::before,
	&::after
	{
		display: none;
	}

	i:after
	{
		.m-faBase();
		font-size: @xf-fontSizeLargest;
		.m-faContent(@fa-var-bars); //, .88em
		vertical-align: bottom;
	}

	.p-nav-menuText
	{
		display: none;
	}
}

.p-nav-smallLogo
{
	display: none;
	max-width: 140px;
	align-self: center;

	img
	{
		display: block;
		max-height: @header-navHeight;

		&:not([src$=".svg"])
		{
			width: auto;
		}
	}
}

.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();

	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;
		}
	}

	.m-navElHPadding(@xf-publicNavPaddingH);

	.p-navEl
	{
		.xf-publicNavTab();
		.m-transition(all; @_nav-elTransitionSpeed);

		&.is-selected
		{
			.xf-publicNavSelected();

			.p-navEl-link
			{
				padding-right: @xf-publicNavPaddingH; // since the split trigger is hidden

				&:hover
				{
					background: none;
					text-decoration: none;
				}
			}

			.p-navEl-splitTrigger
			{
				display: none;
			}
		}

		&:not(.is-selected):not(.is-menuOpen)
		{
			&:hover,
			.p-navEl-link:hover,
			.p-navEl-splitTrigger:hover
			{
				.xf-publicNavTabHover();
			}
		}

		&.is-menuOpen
		{
			.xf-publicNavTabMenuOpen();

			a
			{
				text-decoration: none;
				opacity: 1;
			}
		}
	}

	.p-navEl-link,
	.p-navEl-splitTrigger
	{
		padding-top: @xf-publicNavPaddingV;
		padding-bottom: @xf-publicNavPaddingV;
	}
}

.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;
		}
	}
}

@media (max-width: @xf-publicNavCollapseWidth)
{
	.has-js
	{
		.p-nav-inner
		{
			min-height: 45px;
		}

		.p-nav .p-nav-menuTrigger
		{
			display: inline-block;
		}

		.p-nav-smallLogo
		{
			display: inline-block;
			vertical-align: middle;
		}

		.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;
}

.p-navgroup
{
	float: left;
	.m-clearFix();

	&.p-discovery
	{

		&.p-discovery--noSearch
		{
			margin-left: 0;
		}
	}
}

.p-navgroup-link
{
	float: left;
	padding: @xf-publicNavPaddingV @_navAccount-hPadding;

	&:hover
	{
		text-decoration: none;
		background: fade(@xf-contentAccentBg, 8%);
		color: @xf-contentAccentBg;
	}

	&.p-navgroup-link--user
	{
		.m-overflowEllipsis();
		max-width: 150px;
		padding-top: 23px;
		padding-bottom: 23px;

		.avatar
		{
			.m-avatarSize(40px);
			margin: 0;
			
			&::after
			{
				display: none;
			}
			
			img
			{
				box-shadow: none;
			}
		}
	}

	&.badgeContainer
	{
		opacity: .6;
		position: relative;

		&:after
		{
			position: absolute;
			right: (@_navAccount-hPadding - 12px);
			top: (@xf-publicNavPaddingV - 6px);
			margin: 0;
			font-size: 10px;
		}

		&:hover,
		&.badgeContainer--highlighted
		{
			opacity: 1;
		}
	}

	&.is-menuOpen
	{
		.xf-publicNavTabMenuOpen();
		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-faContent(@fa-var-envelope, 1em);
	}

	&.p-navgroup-link--alerts i:after
	{
		.m-faContent(@fa-var-bell); //, .88em
	}
	
	&.p-navgroup-link--logIn i:after
	{
		.m-faContent(@fa-var-sign-in);  //, .88em
	}
	
	&.p-navgroup-link--register i:after
	{
		.m-faContent(@fa-var-user-plus);  //, .88em
	}

	&.p-navgroup-link--bookmarks i:after
	{
		.m-faContent(@fa-var-bookmark); //, .75em
	}

	&.p-navgroup-link--whatsnew i:after
	{
		.m-faContent(@fa-var-bolt); //, .63em
	}

	&.p-navgroup-link--search i:after
	{
		.m-faContent(@fa-var-search); //, 1em
	}
}

.p-navgroup-link--whatsnew
{
	display: none;
}

@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: block;
	}

	.has-js
	{
		.p-nav-opposite
		{
			align-self: center;
			margin-right: max(0px, @xf-pageEdgeSpacer - 6px);

			.p-navgroup
			{
				background: none;
				margin-left: 0;
			}

			.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;
	}
} ]]>
</template>
<template title="app_sectionlinks.less" type="public" addon_id="XF" version_id="2010170" version_string="2.1.1">
<![CDATA[ // SUB SECTION LINKS

.p-sectionLinks
{
	.xf-publicSubNav();

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-publicSubNav--background-color, transparent),
			xf-default(@xf-publicSubNav--color, ~""),
			xf-default(@xf-publicSubNavElHover--color, ~"")
		);
	}

	&.p-sectionLinks--empty
	{
		height: 10px;
	}
}

.p-sectionLinks-inner
{
	.m-clearFix();
	.m-pageWidth();

	@defaultPadding:  max(0px, @xf-pageEdgeSpacer - @xf-publicSubNavPaddingH);
	.m-pageInset(@defaultPadding);
}

.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;

		&:hover
		{
			.xf-publicSubNavElHover();

			a
			{
				text-decoration: @xf-publicSubNavElHover--text-decoration;
			}
		}

		&.is-menuOpen
		{
			.xf-publicSubNavElMenuOpen();
		}
	}

	.p-navEl-link,
	.p-navEl-splitTrigger
	{
		padding-top: @xf-publicSubNavPaddingV;
		padding-bottom: @xf-publicSubNavPaddingV;
	}
}

@media (max-width: @xf-publicNavCollapseWidth)
{
	.has-js .p-sectionLinks
	{
		display: none;
	}
} ]]>
</template>
<template title="app_user_banners.less" type="public" addon_id="XF" version_id="2010470" version_string="2.1.4">
<![CDATA[ .m-userBannerVariation(@color; @bg; @border: false)
{
	color: @color;
	background: @bg;
	border-color: xf-intensify(@bg, 10%);

	& when (iscolor(@border))
	{
		border-color: @border;
	}
}

.userBanner
{
	font-size: 75%;
	font-weight: @xf-fontWeightNormal;
	font-style: normal;
	padding: 1px @xf-paddingMedium;
	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-textColorEmphasized, @xf-paletteColor1, @xf-paletteColor1);
	}

	&.userBanner--accent
	{
		.m-userBannerVariation(@xf-textColorEmphasized, @xf-paletteAccent1, @xf-paletteAccent1);
	}
	
	&.userBanner--owner
	{
		.m-userBannerVariation(@xf-textColorEmphasized, @xf-paletteAccent2, @xf-paletteAccent2);
	}

	&.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="core.less" type="public" addon_id="XF" version_id="2020970" version_string="2.2.9">
<![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;*/
}

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();
}

// 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();

	a&:hover
	{
		text-decoration: none;
		color: @xf-chip--color;
		.xf-chipHover();
	}
}

// ############################# 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;
}

.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;
	border-radius: @xf-blockBorderRadius;
	padding: @xf-paddingMedium;
	font-size: @xf-fontSizeSmaller;
	margin-top: @xf-paddingMedium;
}

.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-fontSizeLargest;
	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_reaction.less') }}
{{ include('core_smilie.less') }}
{{ include('core_bbcode.less') }}
{{ include('core_dt_proprties.less') }}
{{ include('core_dt_extra.less') }}

// RESOLUTION OUTPUT

.debugResolution
{
	.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_blockend.less" type="public" addon_id="XF" version_id="2021070" version_string="2.2.10">
<![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)
{
	.blockMessage.blockMessage--none
	{
		margin-left: 0;
		margin-right: 0;
	}
} ]]>
</template>
<template title="core_button.less" type="public" addon_id="XF" version_id="2020970" version_string="2.2.9">
<![CDATA[ // ############################ BUTTONS #################

.button,
a.button // needed for specificity over a:link
{
	.m-buttonBase();

	a
	{
		color: inherit;
		text-decoration: none;
	}

	.xf-buttonDefault();

	&.button--primary
	{
		.xf-buttonPrimary();
	}

	&.button--cta
	{
		.xf-buttonCta();
	}

	&.button--link
	{
		// block colors
		background: @xf-contentBg;
		color: @xf-linkColor;
		border: @xf-borderSize solid @xf-borderColor;

		&:hover,
		&:active,
		&:focus
		{
			text-decoration: none;
			background: @xf-contentHighlightBg;
			color: @xf-contentHighlightBase--color;
		}
	}

	&.button--plain
	{
		background: none;
		color: @xf-linkColor;
		border: none;

		&:hover,
		&:active,
		&:focus
		{
			text-decoration: none;
			background: none;
		}
	}

	&.button--alt
	{
		// block colors
		background-color: @xf-paletteColor1;
		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();

		&:hover,
		&:active,
		&:focus
		{
			background: xf-default(@xf-buttonDisabled--background-color, transparent) !important;
		}
	}

	&.is-hidden
	{
		display: none;
	}

	&.button--scroll
	{
		background: @xf-contentHighlightBg;
		color: @xf-textColorEmphasized;
		font-size: 80%;
		clip-path: polygon(0 100%, 0 30%, 30% 0, 100% 0, 100% 100%);
		padding: @xf-paddingLargest @xf-elementSpacer;
		margin: 0;
		
		&::before,
		&::after
		{
			display: none;
		}
	}

	&.button--normal
	{
		font-size: @xf-fontSizeNormal;
	}

	&.button--small
	{
		font-size: @xf-fontSizeSmall;
		padding: 3px 6px;
	}

	&.button--smaller
	{
		font-size: @xf-fontSizeSmaller;
		padding: 2px 5px;
	}

	&.button--fullWidth
	{
		display: block;
		width: 100%;
	}

	&.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%;
			vertical-align: -.1em;
			display: inline-block;
			margin: -.255em 6px -.255em 0;
		}

		> .fa--xf
		{
			// helps fix a button alignment issue (Chrome only)
			line-height: inherit;
		}

		.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, .88em); }
		&--confirm      { .m-buttonIcon(@fa-var-check, 1em); }
		&--write	    { .m-buttonIcon(@fa-var-edit, 1.13em); }
		&--import  	    { .m-buttonIcon(@fa-var-upload, 1.13em); }
		&--export  	    { .m-buttonIcon(@fa-var-download,  1.13em); }
		&--download	    { .m-buttonIcon(@fa-var-download, 1.13em); }
		&--redirect	    { .m-buttonIcon(@fa-var-external-link, 1em); }
		&--disable      { .m-buttonIcon(@fa-var-power-off, 1em); }
		&--edit         { .m-buttonIcon(@fa-var-edit, 1.13em); }
		&--save         { .m-buttonIcon(@fa-var-save, .88em); }
		&--reply	    { .m-buttonIcon(@fa-var-reply, 1.13em); }
		&--quote	    { .m-buttonIcon(@fa-var-quote-left, 1.13em); }
		&--purchase	    { .m-buttonIcon(@fa-var-credit-card, 1.13em); }
		&--payment	    { .m-buttonIcon(@fa-var-credit-card, 1.13em); }
		&--convert	    { .m-buttonIcon(@fa-var-bolt, .75em); }
		&--search	    { .m-buttonIcon(@fa-var-search, 1em); }
		&--sort         { .m-buttonIcon(@fa-var-sort, .63em); }
		&--upload	    { .m-buttonIcon(@fa-var-upload, 1.13em); }
		&--attach	    { .m-buttonIcon(@fa-var-paperclip, 1em); }
		&--login {
			.m-buttonIcon(@fa-var-lock, .88em);
		}
		&--rate         { .m-buttonIcon(@fa-var-star, 1.13em); }
		&--config       { .m-buttonIcon(@fa-var-cog, 1em); }
		&--refresh      { .m-buttonIcon(@fa-var-sync-alt, 1em); }
		&--translate    { .m-buttonIcon(@fa-var-globe, .97em); }
		&--vote         { .m-buttonIcon(@fa-var-check-circle, 1em); }
		&--result       { .m-buttonIcon(@fa-var-chart-bar, 1em); }
		&--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, 1.13em); }
		&--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); }
		&--markRead     { .m-buttonIcon(@fa-var-check-square, .88em); }
		&--user         { .m-buttonIcon(@fa-var-user, .88em); }
		&--userCircle   { .m-buttonIcon(@fa-var-user-circle, .97em); }

		&--notificationsOn  { .m-buttonIcon(@fa-var-bell, 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, 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) }

		// for inline mod confirmations
		&--merge { .m-buttonIcon(@fa-var-compress, .88em); }
		&--move { .m-buttonIcon(@fa-var-share, 1.13em); }
		&--copy { .m-buttonIcon(@fa-var-copy, .88em); }
		&--approve, &--unapprove { .m-buttonIcon(@fa-var-shield, 1em); }
		&--delete, &--undelete { .m-buttonIcon(@fa-var-trash-alt, .88em); }
		&--stick, &--unstick { .m-buttonIcon(@fa-var-thumbtack, .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);
		}

		&--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--splitTrigger
	{
		// 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; }

		.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: 0;
	right: (@xf-pageEdgeSpacer) / 2;

	.has-hiddenscroll &
	{
		right: 20px;
	}

	z-index: @zIndex-9;

	.m-transition(opacity; @xf-animationSpeed);
	opacity: 0;
	display: none;

	&.is-transitioning
	{
		display: block;
	}

	&.is-active
	{
		display: block;
		opacity: 1;
	}

	.button
	{
		display: block;

		+ .button
		{
			margin-top: (@xf-pageEdgeSpacer) / 2;
		}
	}
} ]]>
</template>
<template title="core_dt_extra.less" type="public" addon_id="" version_id="0" version_string="">
<![CDATA[ a:link
{
	-webkit-tap-highlight-color: fade(@xf-paletteColor1, 30%);
}

::selection { background-color: fade(@xf-paletteColor1, 80%);color: #fff; }
::-moz-selection { background-color: fade(@xf-paletteColor1, 80%);color: #fff; }

.fr-popup .fr-color-set > span:hover
{
	transform: scale(1.2,1.2);
}

.link.link--external
{
	color: @xf-bbCodeBlockTitle--color;
	
	&:hover
	{
		color: @xf-paletteColor1;
	}
}

.editorSmilies .smilie
{
	opacity: 0.5;
	.m-transition(all, 0.2s);
	
	&:hover
	{
		opacity: 1.0;
		transform: scale(1.3);
	}
}

.p-breadcrumbs > li:last-child::after
{
	display: none;
}

.animate-pulse
{
    -webkit-animation: pulse 2s infinite linear;
    animation: pulse 2s infinite linear;
}

@keyframes pulse
{
  0% {transform: scale(1);}
  15% {transform: scale(1.3);}
  30% {transform: scale(1);}
  45% {transform: scale(1.3);}
  60% {transform: scale(1);} 
}

.js-bookmarksMenuBody .contentRow-title
{
	font-size: @xf-fontSizeNormal;
}

.p-breadcrumbs--container,
.p-breadcrumbs.p-breadcrumbs--bottom
{
	
}

.p-breadcrumbs--container
{
	margin-bottom: @xf-elementSpacer;
	
	.p-breadcrumbs
	{
		margin-bottom: 0;
	}
}

.block.block--treeEntryChooser
{
	.block-container
	{
		margin: @xf-paddingLarge @xf-paddingLargest;
	}
}

.block.block--category
{
	.block-header a
	{
		.xf-dt_category_header();
	}
}

.p-body-sidebar
{
	.xf-dt_sidebar_styling();
	
	.block-container
	{
		.xf-dt_widget_wrapper();
	}
	.block-minorHeader
	{
		.xf-dt_widget_header();
	}
}

.p-footer-copyright
{
	.fa-heart
	{
		color: red;
	}
}

.select2-results__options li
{
	.xf-menuLinkRow();
}

.select2-container .select2-results__option.select2-results__option--highlighted
{
	.xf-menuLinkRowSelected();
}

// ################ Templates Enhancemnts ################

.badge,
.badgeContainer:after
{
	min-width: 12px;
	height: 16px;
	line-height: 14px;
	text-align: center;
	white-space: nowrap;
	word-wrap: normal;
	padding: 0 2px;
	margin: -2px 0;
}

@keyframes fa-bell-ring {
 0% {
  transform:rotate(-15deg)
 }
 2% {
  transform:rotate(15deg)
 }
 4% {
  transform:rotate(-18deg)
 }
 6% {
  transform:rotate(18deg)
 }
 8% {
  transform:rotate(-22deg)
 }
 10% {
  transform:rotate(22deg)
 }
 12% {
  transform:rotate(-18deg)
 }
 14% {
  transform:rotate(18deg)
 }
 16% {
  transform:rotate(-12deg)
 }
 18% {
  transform:rotate(12deg)
 }
 20%,
 100% {
  transform:rotate(0deg)
 }
}

.p-navgroup-link--alerts.badgeContainer--highlighted i::after
{
	animation: fa-bell-ring 5s ease 10s 6;
	transform-origin: 50% 0;
}

.blockLink
{
	&:hover
	{
		.xf-contentAltBase();
	}
}

.filterBar-menuTrigger
{
	color: @xf-textColorEmphasized;
	
	&:hover
	{
		color: inherit;
	}
}

.label
{
	&.label--primary
	{
		.m-labelVariation(@xf-textColorEmphasized, @xf-paletteColor1, @xf-paletteColor1);
	}
}

.tooltip-content
{
	.tooltip--preview &
	{
		.m-dropShadow(0, 0, 30px, 0, .12);
	}
	
	.tooltip--bookmark &,
	.tooltip--member &,
	.tooltip--share &
	{
		.m-dropShadow(0, 0, 30px, 0, .12);
	}
}

.tabs--standalone
{
	.tabs-tab
	{
		position: relative;
		padding: @xf-blockPaddingV @xf-blockPaddingH (@xf-blockPaddingV + 4);
		border-bottom: none;
		
		&::after
		{
			content: '';
			width: auto;
			height: 4px;
			position: absolute;
			right: 4px;
			bottom: 0;
			left: 4px;
			background-color: currentColor;
			pointer-events: none;
			transform: translate3d(0,0,0) scaleY(1);
			transform-origin: center bottom;
			will-change: transform;
			opacity: 0;
			border-radius: 500px 500px 0 0;
		}
		
		&.is-active
		{
			&::after
			{
				opacity: 1;
			}
		}
	}
}

.block
{
	&.block--treeEntryChooser
	{
		.block-desc
		{
			color: fade(@xf-majorHeadingTextColor, 60%);
		}
	}
}

.block-header
{
	.block-desc
	{
		<xf:if is="property('dt_category_header')">
			color: fade(@xf-dt_category_header--color, 70);
		<xf:else />
			color: fade(@xf-majorHeadingTextColor, 60%);
		</xf:if>
	}
}

.block-tabHeader
{
	.tabs-tab
	{
		position: relative;
		padding: @xf-paddingLargest @xf-blockPaddingH (@xf-paddingLargest + 4);
		border-bottom: none;
		
		&::after
		{
			content: '';
			width: auto;
			height: 4px;
			position: absolute;
			right: 4px;
			bottom: 0;
			left: 4px;
			background-color: currentColor;
			pointer-events: none;
			transform: translate3d(0,0,0) scaleY(1);
			transform-origin: center bottom;
			will-change: transform;
			opacity: 0;
			border-radius: 500px 500px 0 0;
		}
		
		&.is-active
		{
			&::after
			{
				opacity: 1;
			}
		}
		
		&:hover
		{
			background: @xf-blockTabHeaderBg;
			
			&::after
			{
				opacity: 1;
			}
		}
	}
}

.block-row
{
	&.block-row--clickable:hover
	{
		.xf-contentAltBase();
	}
}

.inputGroup
{
	&.inputGroup--joined
	{
		.input
		{
			&:first-child
			{
				border-top-left-radius: @xf-input--border-radius;
				border-bottom-left-radius: @xf-input--border-radius;
			}
			
			&:last-child
			{
				border-top-right-radius: @xf-input--border-radius;
				border-bottom-right-radius: @xf-input--border-radius;
			}
		}
		
		.inputGroup-text
		{
			&:first-child
			{
				border-top-left-radius: @xf-input--border-radius;
				border-bottom-left-radius: @xf-input--border-radius;
			}
			
			&:last-child
			{
				border-top-right-radius: @xf-input--border-radius;
				border-bottom-right-radius: @xf-input--border-radius;
			}
		}
	}
}

.inputNumber-button
{
	.inputGroup.inputGroup--joined &
	{
		&:hover,
		&:active,
		&:focus
		{
			.xf-contentHighlightBase();
		}
	}
}

.notice
{
	&.notice--primary
	{
		border-color: @xf-borderColorHighlight;
	}
	
	&.notice--accent
	{
		border-color: @xf-borderColorAccentContent;
	}
}

.bbWrapper .bbCodeBlock--unfurl
{
	.xf-contentAltBase();
}

.overlay-container
{
	transform: translateY(-10px);
	transition: cubic-bezier(0.4, 0, 0.2, 1) 0.26s transform, cubic-bezier(0.4, 0, 0.2, 1) 0.26s opacity;
	
	&.is-active
	{
		transform: translateY(0);
	}
}

.overlay
{
	border: none;
	.m-dropShadow(0, 5px, 15px, 0, .2);
}

.overlay-titleCloser
{
	color: @xf-overlayHeader--color;
	
	&:hover
	{
		color: inherit;
	}
}

.overlay-content
{
	.listColumns > li
	{
		padding: 0 @xf-paddingLarge;
	}
}

.structItemContainer .structItem
{
	background: @xf-contentAltBg;
	border-top: none;
	border-radius: @xf-blockBorderRadius;
	margin: @xf-paddingMedium 0;
}

.structItem-cell .structItem-title
{
	font-size: @xf-fontSizeNormal;
}

.fr-box.bbWrapper.fr-basic
{
	border-color: @xf-borderColor;
	
	&.is-focused,
	&.is-preview,
	&.is-preview .fr-toolbar .fr-btn-grp.rte-tab--preview
	{
		border-color: @xf-paletteAccent1;
	}
}

.menu .alert.is-unread
{
	.xf-contentAltBase();
}

.message-content .messageNotice
{
	&::before
	{
		color: fade(@xf-contentHighlightBase--color, 65%);
	}
	
	&.messageNotice--highlighted
	{
		a,
		&::before
		{
			color: fade(@xf-contentHighlightBase--color, 65%);
		}

	}
}

.p-body .pollResult.pollResult--showVoters:hover
{
	.xf-contentAltBase();
}

// ################ Theme Enhancements ################

.p-nav
{
	.p-header-logo
	{
		margin-right: 35px;
		margin-left: @xf-paddingLarge;
	}
}
.p-nav-list .p-navEl
{
	position: relative;
	
	&::before
	{
		content: '';
		display: block;
		position: absolute;
		background-color: @xf-publicNavSelected--color;
		bottom: 0;
		left: 4px;
		right: 4px;
		height: 4px;
		width: auto;
		border-radius: 500px 500px 0 0;
		opacity: 0;
		.m-transition();
		transform: translate3d(0, 0, 0) scaleY(0);
		will-change: transform, opacity;
		transform-origin: center bottom;
		pointer-events: none;
	}
	
	&:hover,
	&.is-selected
	{
		&::before
		{
			opacity: 1;
			transform: translate3d(0, 0, 0) scaleY(1);
		}
	}
}

.menu-linkRow
{
	position: relative;
	
	&::before
	{
		content: '';
		display: block;
		height: 0;
		width: 3px;
		transition: inherit;
		position: absolute;
		left: -10px;
		bottom: 0;
		border-radius: 0 500px 500px 0;
		.m-transition(height);
	}
}

.block-container
{
	&--none
	{
		box-shadow: none;
	}
}

.avatar:not(.avatar--default--dynamic)
{
	position: relative;
	overflow: initial;
	margin: @xf-paddingSmall;

	img
	{
		position: relative;
		box-shadow: 0 0 0 3px rgb(37, 40, 54);
		.m-transition();
		z-index: 2;
	}

	&:hover
	{
		img
		{
			box-shadow: 0 0 0 0 rgb(37, 40, 54);
		}
	}

	&::after
	{
		content: '';
		display: block;
		width: calc(~'100% + 10px');
		height: calc(~'100% + 10px');
		background: linear-gradient(45deg,@xf-paletteColor1,@xf-paletteAccent1);
		position: absolute;
		top: -5px;
		border-radius: 500px;
		z-index: 1;
		left: -5px;
	}
}

.avatar.avatar--xs
{
	&::after
	{
		display: none;
	}
}

.menu-linkRow:hover
{
	&::before
	{
		height: 100%;
		background-color: @xf-menuLinkRowSelected--color;
	}
}

.button
{
	margin: @xf-paddingMedium;
	
	&::before
	{
		content: '';
		display: block;
		width: 15px;
		height: 15px;
		background-color: rgba(0, 0, 0, 0.15);
		position: absolute;
		bottom: 2px;
		right: 2px;
		pointer-events: none;
		transform: translate3d(0, 0, 0) scale(1);
		transform-origin: right bottom;
		transition: transform .2s ease-in-out, opacity .2s ease-in-out;
		clip-path: polygon(100% 0, 100% 100%, 0% 100%);
	}
	
	&::after
	{
		content: '';
		display: block;
		top: -4px;
		right: -4px;
		bottom: -4px;
		left: -4px;
		pointer-events: none;
		border: 1px solid @xf-buttonTextColor;
		position: absolute;
		opacity: .15;
		border-radius: @xf-buttonBase--border-radius;
		transition: clip-path .2s ease-in-out, transform .2s ease-in-out, opacity .2s ease-in-out, -webkit-clip-path .2s ease-in-out;
		transform-origin: center;
		transform: translate3d(0, 0, 0);
	}
	
	&:hover
	{
		&::before
		{
			transform: translate3d(0, 0, 0) scale(1.5);
		}
		
		&::after
		{
			opacity: .25;
			clip-path: polygon(100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 0);
		}
	}
}

.button.button--link, a.button.button--link
{
	margin: 0;
	
	&::after
	{
		display: none;
	}
}

.p-body-sidebar
{
	.block-minorHeader
	{
		&::before
		{
			content: '';
			height: 5px;
			width: 55px;
			background-color: currentColor;
			display: inline-block;
			position: absolute;
			bottom: 0;
			clip-path: polygon(0 0,calc(100% - 5px) 0,100% 100%,100% 100%,0 100%);
			right: 0;
			transform: scaleX(-1);
			opacity: .15;
		}
	}
	
	.block-body
	{
		padding: @xf-paddingLarge;
		
		&.block-row
		{
			margin: @xf-paddingLarge;
		}
	}
	
	.block-row
	{
		background: @xf-contentAltBg;
		border-radius: @xf-blockBorderRadius;
		margin-top: @xf-paddingMedium;
	}
}

.block-container--discussion
{
	background: none;
	border: none;
	box-shadow: none;
	
	.block-filterBar
	{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding-left: 0;
		padding-right: 0;
	}
	
	.block-outer-opposite
	{
		margin-right: auto;
	}
	
	.block-body
	{
		background: @xf-contentBg;
		padding: @xf-paddingLarge;
		border-radius: @xf-blockBorderRadius;
	}
}

.p-body-content .fr-box.fr-basic .fr-toolbar.fr-top
{
	background: @xf-contentAltBg;
	padding: @xf-paddingMedium;
	border-bottom: @xf-borderSize solid @xf-borderColor;
	
	.fr-btn-grp
	{
		background: @xf-contentBg;
		padding: 2px @xf-paddingMedium;
		border: @xf-borderSize solid @xf-borderColor;
		border-radius: @xf-blockBorderRadius;
		margin-right: @xf-paddingSmall;
	}
}

.message-userContent
{
	background-color: rgba(0,0,0,.085);
	padding: @xf-paddingMedium @xf-paddingLargest @xf-paddingLargest;
	border-radius: @xf-blockBorderRadius;
}

.fr-box.bbWrapper.fr-basic.is-focused
{
	border-color: @xf-borderColorHeavy;
}

.p-footer
{
	.p-footer-linkList
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.p-footer-row-main
	{
		float: none;
	}
} ]]>
</template>
<template title="core_dt_proprties.less" type="public" addon_id="" version_id="0" version_string="">
<![CDATA[ // ########################## DOHTHEME OPTION #######################

// ######## GENERAL ########
		

// #### Hide Breadcrum on Forum Home ####
<xf:if is="property('dt_breadbrumb_index')">
.template-forum_list .p-breadcrumbs {
	display: none;
}
.template-forum_list .p-body-inner {
	padding: 20px;
}
</xf:if>

<xf:if is="property('dt_breadbrumb_index') AND !property('dt_collapsible_sidebar')">
.template-forum_list .p-breadcrumbs--container {
    display: none;
}
</xf:if>

<xf:if is="property('dt_breadbrumb_index') AND property('dt_disable_sidebar')">
.template-forum_list .p-breadcrumbs--container {
    display: none;
}
</xf:if>


// #### Hide Title Bar in Forum Home ####
<xf:if is="property('dt_title_index')">
.template-forum_list .p-title-value {
	display: none;
}
.p-title-pageAction {
	margin-left: auto;
}
</xf:if>


// #### Remove page actions from forum index ####
<xf:if is="property('dt_pa_index')">
.template-forum_list .p-title-pageAction {
	display: none;
}
</xf:if>


<xf:if is="property('dt_title_index') AND property('dt_pa_index')">
.template-forum_list .p-body-header {
	display: none;
}
</xf:if>


// #### Avatar Shape ####

<xf:if is="property('dt_avatar_shape') == 'option2'">
.avatar img,
.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
	-webkit-clip-path: circle(50% at 50% 50%);
	clip-path: circle(50% at 50% 50%);
}
.avatar.avatar--separated {
	border-radius: 50%;
}
<xf:elseif is="property('dt_avatar_shape') == 'option3'" />
.avatar img,
.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
	-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('dt_avatar_shape') == 'option4'" />
.avatar img,
.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
	-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('dt_avatar_shape') == 'option5'" />
.avatar img,
.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
	-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('dt_avatar_shape') == 'option6'" />
.avatar img,
.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
	-webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
	clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
<xf:elseif is="property('dt_avatar_shape') == 'option7'" />
.avatar img,
.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
	-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:elseif is="property('dt_avatar_shape') == 'option8'" />
.avatar img,
.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
	-webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
	clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}
<xf:elseif is="property('dt_avatar_shape') == 'option9'" />
.avatar
{
	border-radius: 0;
}
.avatar img,
.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
	-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
	clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
<xf:elseif is="property('dt_avatar_shape') == 'option10'" />
.avatar
{
	border-radius: 0;
}
.avatar img,
.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
	-webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
	clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
</xf:if>

<xf:if is="property('dt_avatar_shape') != 'option1'">
.menu.menu--account {
	.avatar img,
	.avatar.avatar--default.avatar--default--dynamic,
	.avatar.avatar--default.avatar--default--text {
		clip-path: none;
	}
}
</xf:if>

// #### Guest Message Content ####
<xf:if is="property('dt_guest_message')">
.p-guest--message {
	.xf-dt_guest_message_css();
	
	<xf:if is="property('dt_guest_message_index')">
	display: none;
	
	.template-forum_list & {
		display: block;
	}
	</xf:if>
	
	&::before
	{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: fade(@xf-contentAccentBg, 30%);
		background-image: linear-gradient(-90deg,fade(@xf-contentAccentBg, 40%) 0%,@xf-contentAccentBg 73%);
		z-index: 1;
	}
	
	&-content
	{
		position: relative;
		z-index: 2;
	}
}
.p-guest--message h1 {
	font-size: 3.75em;
	-webkit-text-stroke: 2px currentColor;
	-webkit-text-fill-color: transparent;
	letter-spacing: 2px;
	margin-top: 0;
	margin-bottom: 0;
}
.p-guest--message p
{
	font-size: @xf-fontSizeLarge;
	font-weight: 600;	
}
</xf:if>

// #### Hide Top Breadcrumb ####
<xf:if is="property('dt_breadbrumb_top')">
.p-breadcrumbs:not(.p-breadcrumbs--bottom) {
	display: none;
}
.p-body-inner {
	padding-top: 20px;
}
</xf:if>

<xf:if is="property('dt_breadbrumb_top') AND property('dt_collapsible_sidebar')">
.p-breadcrumbs--container:not(.p-breadcrumbs--container--side) {
    display: none;
}
</xf:if>

<xf:if is="property('dt_breadbrumb_top') AND !property('dt_collapsible_sidebar')">
.p-breadcrumbs--container {
    display: none;
}
</xf:if>

<xf:if is="property('dt_breadbrumb_top') AND property('dt_disable_sidebar')">
.p-breadcrumbs--container {
    display: none;
}
</xf:if>


// #### Hide Bottom Breadcrumb ####
<xf:if is="property('dt_breadbrumb_bottom')">
.p-breadcrumbs.p-breadcrumbs--bottom {
	display: none;
}
.p-body-inner {
	padding-bottom: 20px;
}
</xf:if>

// #### Home breadcrumb as icon ####
<xf:if is="property('dt_homeCrumb_icon')">
ul.p-breadcrumbs > li:first-child::before
{
	display: none;
}
</xf:if>


@media (min-width: @xf-responsiveWide)
{
	@animationSpeedValue: .15s;
	
	<xf:if is="property('dt_page_animation')">
	
	@keyframes fade {
		from {
			opacity: 0;
		};
		to {
			opacity: 1;
		};
	}
	
	.fadeAnimation(@iteration) {
		animation: fade @animationSpeedValue ease;
		animation-delay: @iteration * @animationSpeedValue;
		animation-fill-mode: backwards;
	}
	
	.p-body-sideNavContent {.fadeAnimation(1);}
	.notices {.fadeAnimation(2);}
	.p-body-header {.fadeAnimation(3);}
	.pre-footer {.fadeAnimation(3);}
	.p-footer {.fadeAnimation(4);}
	
	</xf:if>

	.itemAnimation(@iteration) {
		animation: slideUp .4s ease;
		animation-delay: (@iteration * .15s) + (@animationSpeedValue * 2);
		animation-fill-mode: backwards;
	}
	.itemLoop (@i) when (@i > 0) {
		&:nth-child(@{i}) {
			.itemAnimation(@i)
		}
		.itemLoop(@i - 1);
	}

	@keyframes slideUp {
		from {
			transform: translatey(30px);
			opacity: 0;
		};
		to {
			transform: translatey(0px);
			opacity: 1;
		};
	}
	
	<xf:if is="property('dt_node_animation')">

	.block--category
	{
		.itemLoop(20);
	}
	
	</xf:if>
	
	<xf:if is="property('dt_discussion_animation')">

	.structItemContainer .structItem
	{
		.itemLoop(20);
	}
	
	</xf:if>
	
	<xf:if is="property('dt_message_animation')">

	.block--messages .block-body > .message--post
	{
		.itemLoop(20);
	}
	
	</xf:if>
	
	<xf:if is="property('dt_sidebar_widget_animation')">

	@sidebarItemDelay: .1s;

	@keyframes scootLeft {
		from {
			transform: translatex(30px);
			opacity: 0;
		};
		to {
			transform: translatex(0px);
			opacity: 1;
		};
	}

	.sidebarAnimation(@iteration)
	{
		animation: scootLeft .5s ease;
		animation-delay: (@iteration * @sidebarItemDelay) + (@animationSpeedValue * 3);
		animation-fill-mode: backwards;
		animation-iteration-count: 1;
	}

	.sidebarLoop (@i) when (@i > 0)
	{
		&:nth-child(@{i})
		{
			.sidebarAnimation(@i)
		}
		.sidebarLoop(@i - 1);
	}

	.p-body-sidebar .block
	{
		.sidebarLoop(15);
	}
	</xf:if>
}


// ######## Header and navigation ########

// #### Sticky Staff tools ####

<xf:if is="property('dt_sticky_staff_tools')">
.p-staffBar {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: @zIndex-4;
}
	<xf:if is="property('publicNavSticky') != 'none'">
	.p-navSticky.p-staffSticky
	{
		top: 35px;
	}
	</xf:if>
</xf:if>

// #### Logo Text ####
<xf:if is="property('dt_text_logo')">
.p-header-content .p-header-logo
{
	&.p-header-logo--text
	{
		.xf-dt_text_logo_css();
	}
}
</xf:if>

// #### Hide Selected Tab Sub-Links bar ####
<xf:if is="property('dt_disable_tab_links')">
.p-sectionLinks {
	display: none;
}
</xf:if>

// #### Login triggers style ####
<xf:if is="property('dt_triggers_style') == 'option2'">
.menu 
{
	&[data-nav-id="userLogin"] .blocks
	{
		background: @xf-menu--background-color;
	}
	.formRow > dt, .formRow > dd 
	{
		display: block;
		width: 100%;
		text-align: left;
	}
	.formRow > dt:empty,
	.formRow > dd:empty {
		display: none;
	}
	.formRow
	{
		dt {
			padding: 0;
		}
	}
	.formRow.formRow--input
	{
		dt {
			padding: 15px 10px 15px 10px;
		}
	}
	.block-outer.block-outer--after
	{
		background: @xf-blockFooter--background-color;
		padding-bottom: 6px;
	}
}
</xf:if>

// #### Condense Visitor Tabs ####
<xf:if is="property('dt_condense_visito_tabs')">
.p-navgroup-link--user.badgeContainer::after {
	display: none;
}
.p-navgroup-link--user.badgeContainer.badgeContainer--highlighted::after {
	display: block;
}
@media (min-width: @xf-responsiveNarrow) {
	.p-navgroup-link--conversations,
	.p-navgroup-link--alerts {
		display: none;
	}
}
.menu--account .badgeContainer.badgeContainer--highlighted::after {
	margin-left: 6px;
}
<xf:else />
.p-navgroup-link--user.badgeContainer::after {
	display: none;
}
</xf:if>

// #### Inline Alert Ballons ####
<xf:if is="property('dt_inline_ballons')">
.p-navgroup .p-navgroup-link.badgeContainer::after {
	position: relative;
	top: -2px;
	left: 2px;
}
<xf:if is="property('dt_condense_visito_tabs')">
.p-navgroup .p-navgroup-link.p-navgroup-link--user {
	text-overflow: initial;
}
.p-navgroup .p-navgroup-link.badgeContainer::after {
	display: inline-block;
}
</xf:if>
</xf:if>

// #### Remove user avatar from navigation ####
<xf:if is="property('dt_nav_avatar')">
@media (min-width: @xf-responsiveWide)
{
	.p-navgroup-link.p-navgroup-link--user .avatar
	{
		display: none;
	}
}
</xf:if>

// #### Remove user text from navigation ####
<xf:if is="property('dt_nav_user_text') AND !property('dt_nav_avatar')">
.p-navgroup-link.p-navgroup-link--user .p-navgroup-linkText
{
	display: none;
}
</xf:if>

// #### Remove search tab text ####
<xf:if is="property('dt_login_text')">
.p-navgroup-link--logIn,
.p-navgroup-link--register
{
	.p-navgroup-linkText
	{
		display: none;
	}
}
</xf:if>

// #### Remove search tab text ####
<xf:if is="property('dt_search_text')">
.p-navgroup-link--search,
.p-navgroup-link--whatsnew
{
	.p-navgroup-linkText
	{
		display: none;
	}
}
</xf:if>

// ######## Forum / Node List ########

// #### Collapsible Categories ####
<xf:if is="property('dt_collapsible_categories')">
.block--category
{
	.block-header {
		position: relative;
	}
	
    .collapseTrigger:not(.button)
    {
		position: absolute;
		top: 50%;
		right: 10px;
		cursor: pointer;
		transform: translateY(-50%);
		
		&:before
        {
            content: {{ property('dt_node_on_icon') }};
			width: 100%;
            font-size: 80%;
			margin: 0;
        }
		
        &.is-active:before
        {
            content: {{ property('dt_node_off_icon') }};
        }
    }
}
.block-body.block-body--collapsible
{
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    -webkit-transition-property: all, -xf-opacity;
    transition-property: all, -xf-opacity;
    overflow-y: hidden;
    height: 0;
    -webkit-transition-property: all, -xf-height;
    transition-property: all, -xf-height;
}
</xf:if>

// #### Sticky Category Strips ####
<xf:if is="property('dt_sticky_catstrips')">
.block--category .block-header {
	position: -webkit-sticky;
	position: sticky;
	<xf:if is="property('publicNavSticky') == 'primary'">
	top: (@xf-publicNavPaddingV * 2) + 22px;
	<xf:elseif is="property('publicNavSticky') == 'all'" />
	top: (@xf-publicNavPaddingV * 2) + 53px;
	<xf:else />
	top: 0;
	</xf:if>
	z-index: 100;
}
</xf:if>

// #### Simplified Node Statics ####
<xf:if is="property('dt_nodestat_simple')">
.node-stats
{
	max-width: 100px;
}
.node-stats .pairs.pairs--rows > dd
{
	font-size: 1.35em;
}
</xf:if>

// #### Show Node Stats on Hover ####
<xf:if is="property('dt_node_stats')">
.node-stats {
	opacity: 0;
	transform: scale(0.75);
	.m-transition(all, 0.3s);
}
.block-body .node:hover .node-stats {
	opacity: 1;
	transform: scale(1);
}
</xf:if>

// #### Last poster avatar on the forum list ####
<xf:if is="!property('dt_last_avatar_forum')">
.node-extra-icon
{
	display: none;
}
</xf:if>

// #### New Indicator Label ####
<xf:if is="property('dt_new_indicator')">
.node--newIndicator {
	.xf-dt_new_indicator_css();
}
.node--forum .node--newIndicator {
	display: none;
}
.node--forum.node--unread .node--newIndicator {
	display: inline-block;
}
</xf:if>

// #### Alternative Node Background ####
<xf:if is="property('dt_alternative_nodes')">
.block-body .node:nth-of-type(2n+2) {
	background: {{ property('dt_alternative_nodes') }};
}
</xf:if>

// #### Hover Background on Nodes ####
<xf:if is="property('dt_hb_nodes')">
.block-body .node {
	.m-transition(all, 0.3s);
}

.block-body .node:hover {
	background: {{ property('dt_hb_nodes') }};
}
</xf:if>

// #### Hover Effect on Nodes ####
<xf:if is="property('dt_he_nodes')">
.block-body .node {
	.m-transition(all, 0.3s);
}

.block-body .node:hover {
	transform: scale(1.015);
}
</xf:if>

// #### Category Description ####
<xf:if is="property('dt_cat_description') == 'option2'">
.block-header .block-desc {
	display: inline-block;
	opacity: 0;
	margin-left: 4px;
	.m-transition(all, 0.3s);
}
.block--category .block-container:hover .block-desc {
	opacity: 1;
}
</xf:if>

// ######## Sidebar ########

// #### Disable Sidebar ####
<xf:if is="property('dt_disable_sidebar')">
.p-body-main .p-body-sidebar {
	display: none;
}
.p-body-main.p-body-main--withSidebar .p-body-content {
	width: 100%;
	max-width: 100%;
	padding-right: 0;
}
</xf:if>

// #### Sidebar Position ####
<xf:if is="property('dt_sidebar_position') == 'option2'">
@media (min-width: @xf-responsiveWide) {
	.p-body-main--withSidebar .p-body-content {
		order: 2;
		padding-left: @xf-sidebarSpacer;
		padding-right: 0 !important;
	}
	.p-body-sidebar {
		order: 1;
	}
}
</xf:if>
<xf:if is="property('dt_sidebar_position') == 'option3'">
@media (min-width: @xf-responsiveWide)
{
	.p-body .p-body-main,
	.p-body .p-body-content
	{
		display: block;
	}
	.p-body .p-body-main--withSideNav .p-body-content,
	.p-body .p-body-main--withSidebar .p-body-content
	{
		padding: 0;
	}
	.p-body .p-body-sidebar
	{
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		margin: 20px -5px 0;
		width: auto;

		&::after
		{
			display: block;
			content: '';
			height: 0;
			margin: 0 5px;
			min-width: @xf-sidebarWidth;
			flex: 1 1 @xf-sidebarWidth;
		}
	}
	
	.p-body .p-body-sidebar > *
	{
		margin: 0 ((@xf-pageEdgeSpacer) / 2) @xf-elementSpacer;
		min-width: @xf-sidebarWidth;
		flex: 1 1  @xf-sidebarWidth;
	}
}
</xf:if>

// #### Sticky Sidebar ####
<xf:if is="property('dt_sticky_sidebar') && !property('dt_disable_sidebar')">
.p-body-sidebar {
	position: -webkit-sticky;
	position: sticky;
	top: (@xf-publicNavPaddingV * 2) + 25px;
}
</xf:if>

// #### Collapsible Sidebar ####
<xf:if is="property('dt_collapsible_sidebar') && !property('dt_disable_sidebar')">
.p-breadcrumbs--container {
	display: flex;
	align-items: center;
	
	.collapseTrigger:not(.button)
	{
		margin-left: auto;
		
		&:before
        {
            content: {{ property('dt_collpse_off_icon') }};
			width: 100%;
			margin-left: 0;
        }
		
		&.is-active:before
        {
            content: {{ property('dt_collpse_on_icon') }};
        }

		@media (max-width: @xf-responsiveWide)
		{
			display: none;
		}
	}
}

.p-body-content {
    transition: all .55s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.p-body-sidebar {
	transition: all .45s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.p-body-main--withSidebar .p-body-content:not(.is-active) {
	width: 100%;
	max-width: 100%;
}
.p-body-main--withSidebar .p-body-sidebar:not(.is-active) {
	width: 0;
	height: 0;
	transform: scale(0);
	opacity: 0;
}

</xf:if>

// #### Collapsible Sidebar Block ####
<xf:if is="property('dt_collapsible_sidebar_block') && !property('dt_disable_sidebar')">
.p-body-sidebar .block-minorHeader {
	position: relative;
}
.p-body-sidebar .block-minorHeader .block-control {
	position: absolute;
	top: 50%;
	right: 10px;
	font-size: 80%;
	cursor: pointer;
	transform: translateY(-50%);
}
</xf:if>

// #### Sidebar login ####

<xf:if is="property('dt_sidebar_login')">
.p-body-sidebar
{
	.blocks.blocks--login
	{
		.formRow 
		{
			> dt, > dd
			{
				width: auto;
				display: block;
				text-align: left;
				padding: 0px;
				background-color: transparent;
				border-width: 0;
			}
			> dt
			{
				padding: 5px 0px;
			}
			&:first-child
			{
				> dt
				{
					padding-top: 0;
				}
			}
			&.formSubmitRow dt
			{
				display: none;
			}
			.formSubmitRow-bar
			{
				background-color: transparent;
				border-width: 0;
			}
			.formSubmitRow-controls
			{
				padding-left: 0;
				text-align: right;
				margin-right: 8px;

			}
		}
		.block-outer--register
		{
			.xf-blockFooter();
			
			padding: @xf-paddingLarge;
			margin: 0 -@xf-blockPaddingH -@xf-blockPaddingV;
			text-align: right;
			
			a.button
			{
				margin-left: 5px;
			}
		}
	}
}
</xf:if>


// ######## Discussion List ########

// #### Discussion minor header ####

<xf:if is="property('dt_disc_minor_header')">
.discu-minorHeader
{
	display: table;
	table-layout: fixed;
	width: 100%;
	.xf-dt_disc_minor_header_css();

	span
	{
		display: table-cell;
		vertical-align: middle;

		&.discu-minorHeader--main
		{
			padding: 10px 8px 10px 58px;
		}
		&.discu-minorHeader--stats
		{
			width: 70px;
			text-align: center;
			padding: 10px 8px;
			
			<xf:if is="property('dt_reactions_column')">
				width: 75px;
			</xf:if>
		}
		&.discu-minorHeader--last
		{
			width: 230px;
			text-align: center;
			padding: 10px 8px;
		}
	}
}

.structItemContainer-group
{
	.structItem-cell.structItem-cell--meta
	{
		width: 70px;
		text-align: center;
		
		@media (max-width: @xf-responsiveWide)
		{
			width: 58px;
		}
	}
}

.structItemContainer-group
{
	.structItem-cell
	{
		vertical-align: middle;
	}
}

@media (max-width: @xf-responsiveWide)
{
	.discu-minorHeader
	{
		font-size: @xf-fontSizeSmallest;
	}
	
	.discu-minorHeader span.discu-minorHeader--stats
	{
		width: 58px;
	}

	.discu-minorHeader span.discu-minorHeader--last
	{
		width: 180px;
		
	}
}

@media (max-width: @xf-responsiveMedium)
{
	.discu-minorHeader
	{
		display: none;
	}
	
	.structItemContainer-group .structItem-cell.structItem-cell--meta
	{
		display: none;
	}
	
	.structItem-cell.structItem-cell--latest::before
	{
		display: none;
	}
}
</xf:if>

// #### Collapsible sticky threads ####

<xf:if is="property('dt_collaps_sticky_threads')">
.block-stickyHeader
{
	display: flex;
	align-items: center;
	
	.collapseTrigger
	{
		margin-left: auto;
		
		&:before
		{
			content: {{ property('dt_node_on_icon') }};
			font-size: 100%;
		}
		
		&.is-active:before
		{
			content: {{ property('dt_node_off_icon') }};
		}
	}
}
.structItemContainer-group--sticky
{
	opacity: 0;
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    -webkit-transition-property: all, -xf-opacity;
    transition-property: all, -xf-opacity;
    overflow-y: hidden;
    height: 0;
    -webkit-transition-property: all, -xf-height;
    transition-property: all, -xf-height;
	
	&.is-active
	{
		height: auto;
		opacity: 1;
		overflow-y: visible;
	}
}
</xf:if>

// #### Seperate Sticky Threads ####

<xf:if is="property('dt_seperate_sticky_threads')">
.block-stickyHeader {
	.xf-dt_seperate_sticky_threads_css();
}
</xf:if>


// #### Unique background to sticky thread ####

<xf:if is="property('dt_background_sticky_thread_css')">
.structItemContainer-group--sticky .structItem--thread {
	.xf-dt_background_sticky_thread_css();
}
</xf:if>

// #### Last poster avatar on the discussion list ####

<xf:if is="!property('dt_last_avatar_discussion')">
.structItem-cell.structItem-cell--iconEnd
{
	display: none;
}
</xf:if>

// #### Locked Threads Opacity ####

<xf:if is="property('dt_opacity_thread_lock')">
.structItem--thread.is-locked {
	opacity: 0.6;
}
.structItemContainer-group--sticky .structItem--thread.is-locked {
	opacity: 1;
}
</xf:if>

// #### Remove Mini-me Avatar ####

<xf:if is="property('dt_minime_avatar')">
.structItem-iconContainer .structItem-secondaryIcon
{
	display: none;
}
</xf:if>

// #### New Indicator Label ####

<xf:if is="property('dt_disc_new_indicator')">
.structItem.is-unread .structItem-title a:not(.labelLink):after {
    content: "{{ phrase('new') }}";
    .xf-dt_new_indicator_css();
	margin-left: @xf-paddingMedium;
}
</xf:if>

// #### Reactions column in meta box ####

<xf:if is="property('dt_reactions_column')">
.structItem .structItem-cell
{
    vertical-align: middle;
}
</xf:if>

// #### Alternative Thread Background ####

<xf:if is="property('dt_alternative_threads')">
.structItemContainer-group:not(.structItemContainer-group--sticky) .structItem.structItem--thread:nth-of-type(2n+1) {
	background: {{ property('dt_alternative_threads') }};
}
</xf:if>

// #### Hover Background on Threads ####

<xf:if is="property('dt_hb_threads')">
.structItem.structItem--thread {
	.m-transition(all, 0.3s);
}
.structItem.structItem--thread:hover {
	background: {{ property('dt_hb_threads') }};
}
</xf:if>

// #### Hover Effect on Threads ####

<xf:if is="property('dt_he_threads')">
.structItem.structItem--thread {
	.m-transition(all, 0.3s);
}
.structItem.structItem--thread:hover {
	transform: scale(1.015);
}
</xf:if>


// ######## Message Layout ########


// #### Messages Layout ####
<xf:if is="property('dt_messages_layout') == 'option2'">
.block--messages .message:not(.message--simple) {
	.message-inner {
		flex-direction: column;
	}
	.message-inner .message-cell.message-cell--user,
	.message-inner .message-cell.message-cell--action {
		border-right: none;
		border-bottom: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
	}
	.message-inner .message-cell.message-cell--user {
		flex: 0 0 100%;
	}
	.message-cell.message-cell--user .message-user {
		display: flex;
		align-items: center;

		.message-userExtras {
			margin-top: 0;
			margin-left: auto;
		}

		.message-userDetails {
			margin-left: 20px;
		}

		.message-avatar {
			margin-bottom: 0;
		}

		@media (min-width: @xf-messageSingleColumnWidth) {
			.message-userArrow {
				position: absolute;
				bottom: 0;
				left: 50px;
				top: initial;
				right: initial;

				.m-triangleUp(xf-default(@xf-messageUserBlock--border-color, transparent), @xf-messagePadding);

				&:after
				{
					position: absolute;
					top: 2px;
					right: -@xf-messagePadding + 1;
					content: "";

					.m-triangleUp(@xf-contentBg, @xf-messagePadding - 1px);
				}
			}
		}
	}
	.message--quickReply {
		.message-cell.message-cell--user {
			display: none;
		}
	}
}
</xf:if>

<xf:if is="property('dt_messages_layout') == 'option3'">
.message.is-first {
	
	.message-inner {
		flex-direction: column;
	}
	.message-inner .message-cell.message-cell--user,
	.message-inner .message-cell.message-cell--action {
		border-right: none;
		border-bottom: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
	}
	.message-inner .message-cell.message-cell--user {
		flex: 0 0 100%;
	}
	.message-cell.message-cell--user .message-user {
		display: flex;
		align-items: center;

		.message-userExtras {
			margin-top: 0;
			margin-left: auto;
		}

		.message-userDetails {
			margin-left: 20px;
		}

		.message-avatar {
			margin-bottom: 0;
		}

		@media (min-width: @xf-messageSingleColumnWidth) {
			.message-userArrow {
				position: absolute;
				bottom: 0;
				left: 50px;
				top: initial;
				right: initial;

				.m-triangleUp(xf-default(@xf-messageUserBlock--border-color, transparent), @xf-messagePadding);

				&:after
				{
					position: absolute;
					top: 2px;
					right: -@xf-messagePadding + 1;
					content: "";

					.m-triangleUp(@xf-contentBg, @xf-messagePadding - 1px);
				}
			}
		}
	}
}
</xf:if>

// #### Center Thread Title ####

<xf:if is="property('dt_thread_title_center')">
.template-thread_view .p-body-header {
	text-align: center;
}
.template-thread_view .p-body-header .p-title-value {
	margin-left: auto;
}
</xf:if>

// #### Hide Avatar Beside Editor ####

<xf:if is="property('dt_editor_avatar')">
.message.message--quickReply .message-cell--user {
	display: none;
}
.message.message--quickReply .message-cell.message-cell--main {
	padding-left: 10px;
	margin-left: 0;
}

</xf:if>

// #### Show Extra User Info On Hover ####

<xf:if is="property('dt_euicss') AND !property('dt_collapsible_extras')">
.message-userExtras {
	max-height: 0px;
	opacity: 0;
	overflow: hidden;
	.m-transition(all, 0.3s);
}
.message-cell--user:hover .message-userExtras {
	max-height: 300px;
	opacity: 1;
}
</xf:if>

// #### Collapsible User Extras ####
<xf:if is="property('dt_collapsible_extras') && property('dt_messages_layout') == 'option1'">
.message-userExtras-body
{
    .m-listPlain();

    &.message-userExtras--collapsible
    {
        .has-no-js & { display: block; }

        .m-transitionFadeDown();
    }
}

.message-cell
{
    .collapseTrigger:not(.button)
    {
        text-align: center;
		padding: @xf-paddingMedium 0;
		
        &:before
        {
            content: "\f062";
			background: @xf-contentAltBg;
            color: @xf-linkColor;
			width: 24px;
			height: 24px;
			line-height: 24px;
			font-size: @xf-fontSizeSmaller;
			text-align: center;
			border-radius: 50%;
            transition: ease-in transform .3s;
        }
		
		&.is-active:before
        {
            transform: rotate(-180deg);
        }
		
		&:hover
		{
			&:before
			{
				background: @xf-contentAccentBg;
				color: @xf-textColorAccentContent;
				transform: rotate(-180deg);
			}
		}
		
        &.collapseTrigger--block:before
        {
            float: none;
        }
		
		@media (max-width: @xf-messageSingleColumnWidth)
		{
			display: none;
		}
    }
}
</xf:if>

// #### First Post Uniuqe Background ####
<xf:if is="property('dt_firstpost_customization')">
.message--post.is-first .message-inner
{
	.xf-dt_firstpost_customization();
}
</xf:if>

// #### Thread owner indicator ####
<xf:if is="property('dt_thread_owner') == 'userbanner'">
.messageOwner-Indicator
{
	font-size: 90%;
	background: @xf-contentHighlightBg;
	color: @xf-contentHighlightBase--color;
	padding: 1px 4px;
	border-radius: @xf-borderRadiusSmall;
	white-space: nowrap;
	
	@media (max-width: @xf-responsiveNarrow)
	{
		display: none;
	}
}
</xf:if>
<xf:if is="property('dt_thread_owner') == 'icon'">
.message-avatar-owner
{
	position: absolute;

	// center bottom position
	left: 50%;
	margin-left: -.615em;
	bottom: -.615em;
	
	width: 23px;
	height: 23px;
	line-height: 16px;
	background: @xf-contentAccentBg;
	color: @xf-textColorAccentContent;
	font-size: 10px;
	text-align: center;
	border: 3px solid @xf-contentBg;
	border-radius: 50%;
	z-index: 3;
	
	@media (max-width: @xf-messageSingleColumnWidth)
	{
		display: none;
	}
}
</xf:if>

// #### EXTRA FOOTER ####
<xf:if is="property('dt_extra_footer')">
.pre-footer
{
	.xf-dt_extra_footer_css();
	
	<xf:if is="property('dt_extra_footer_index')">
	display: none;
	
	.template-forum_list & {
		display: block;
	}
	</xf:if>
	
	&-inner
	{
		width: 100%;
		max-width: @xf-pageWidthMax;
		margin: 0 auto;

		@media (min-width: @xf-responsiveMedium)
		{
			padding: 0 @xf-paddingLarge;
		}
	}
	
	&--container
	{
		display: flex;
		flex-wrap: wrap;

		@media (min-width: @xf-responsiveWide)
		{
			margin: 0 -15px;
		}
	}
	
	&--column
	{
		flex: 0 0 25%;
		max-width: 25%;

		@media (min-width: @xf-responsiveMedium)
		{
			padding: 0 15px;
		}
	}
}

.pre-footer h3
{
	.xf-dt_extra_footer_title_css();
	
	&::after
	{
		content: '';
		height: 5px;
		width: 55px;
		background-color: @xf-paletteColor1;
		display: block;
		clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 100%, 100% 100%, 0 100%);
		margin-top: .75rem;
	}
}

.pre-footer--content,
.pre-footer .block-container
{
	.xf-dt_extra_footer_content_css();
}

.pre-footer--links {
	
	li {
		list-style: none;
		
		a {
			display: block;
			.xf-dt_extra_footer_link_css();
		}
	}
}

.pre-footer .contentRow-main a,
.pre-footer .block-body .username
{
	.xf-dt_extra_footer_link_css();
}

.social__icons,
.pre-footer--links,
.pre-footer-html--content,
.pre-footer .block-row
{
	.xf-dt_extra_footer_widgcont_css();
}

.pre-footer .block-footer
{
	.xf-dt_extra_footer_widgfoot_css();
}

.social__icons
{
	li
	{
		display: inline-block;
		list-style: none;
		
		a 
		{
			display: block;
			width: 35px;
			height: 35px;
			line-height: 35px;
			background: @xf-contentAccentBg;
			color: @xf-textColorAccentContent;
			text-align: center;
			border-radius: @xf-blockBorderRadius;
			margin-right: 4px;
			
			&.-facebook {
				background: #3b5998;
			}
			
			&.-twitter {
				background: #55acee;
			}
			
			&.-instagram {
				background: #d6249f;
  				background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
			}
			
			&.-youtube {
				background: #ff0000;
			}
		}
	}
}

@media (max-width: @xf-responsiveWide)
{
	.pre-footer--column
	{
		flex: 0 0 50%;
		max-width: 50%;
	}
}
@media (max-width: @xf-responsiveMedium)
{
	.pre-footer--column
	{
		flex: 0 0 100%;
		max-width: 100%;
	}
}
</xf:if>


// ######## GLYPHS ########

// #### Navigation Glyphs ####

<xf:if is="property('dt_navigation_glyphs')">

.p-navEl-link::before {
	.m-faBase();
	padding-right: @xf-paddingMedium;
}
.p-navEl-link[data-nav-id="home"]::before {
	.m-faContent(@fa-var-home, 1em);
}
.p-navEl-link[data-nav-id="forums"]::before {
	.m-faContent(@fa-var-comments, 1em);
}
.p-navEl-link[data-nav-id="whatsNew"]::before {
	.m-faContent(@fa-var-bolt, 1em);
}
.p-navEl-link[data-nav-id="members"]::before {
	.m-faContent(@fa-var-users, 1em);
}
.p-navEl-link[data-nav-id="xfmg"]::before {
	.m-faContent(@fa-var-picture-o, 1em);
}
.p-navEl-link[data-nav-id="xfrm"]::before {
	.m-faContent(@fa-var-download, 1em);
}

</xf:if>

// #### Sub-navigation Glyphs ####

<xf:if is="property('dt_sub_navigation_glyphs')">
.p-sectionLinks .p-navEl-link::before {
	.m-faBase();
	padding-right: 4px;
}
.p-navEl-link[data-nav-id="newPosts"]::before {
	.m-faContent(@fa-var-fire, 1em);
}
.p-navEl-link[data-nav-id="findThreads"]::before {
	.m-faContent(@fa-var-comment, 1em);
}
.p-navEl-link[data-nav-id="watched"]::before {
	.m-faContent(@fa-var-bell, 1em);
}
.p-navEl-link[data-nav-id="searchForums"]::before {
	.m-faContent(@fa-var-search, 1em);
}
.p-navEl-link[data-nav-id="markForumsRead"]::before {
	.m-faContent(@fa-var-eye-slash, 1em);
}
.p-navEl-link[data-nav-id="whatsNewPosts"]::before {
	.m-faContent(@fa-var-file-text-o, 1em);
}
.p-navEl-link[data-nav-id="xfmgWhatsNewNewMedia"]::before {
	.m-faContent(@fa-var-picture-o, 1em);
}
.p-navEl-link[data-nav-id="xfmgWhatsNewMediaComments"]::before {
	.m-faContent(@fa-var-comments-o, 1em);
}
.p-navEl-link[data-nav-id="xfrmNewResources"]::before {
	.m-faContent(@fa-var-download, 1em);
}
.p-navEl-link[data-nav-id="whatsNewProfilePosts"]::before {
	.m-faContent(@fa-var-pencil, 1em);
}
.p-navEl-link[data-nav-id="whatsNewNewsFeed"]::before {
	.m-faContent(@fa-var-rss, 1em);
}
.p-navEl-link[data-nav-id="latestActivity"]::before {
	.m-faContent(@fa-var-clock-o, 1em);
}
.p-navEl-link[data-nav-id="xfmgNewMedia"]::before {
	.m-faContent(@fa-var-bolt, 1em);
}
.p-navEl-link[data-nav-id="xfmgNewComments"]::before {
	.m-faContent(@fa-var-comments-o, 1em);
}
.p-navEl-link[data-nav-id="xfmgAddMedia"]::before {
	.m-faContent(@fa-var-plus-square, 1em);
}
.p-navEl-link[data-nav-id="xfmgYourContent"]::before {
	.m-faContent(@fa-var-file-image-o, 1em);
}
.p-navEl-link[data-nav-id="xfmgWatchedContent"]::before {
	.m-faContent(@fa-var-bell, 1em);
}
.p-navEl-link[data-nav-id="xfmgSearchMedia"]::before {
	.m-faContent(@fa-var-search, 1em);
}
.p-navEl-link[data-nav-id="xfmgMarkViewed"]::before {
	.m-faContent(@fa-var-eye-slash, 1em);
}
.p-navEl-link[data-nav-id="xfrmLatestReviews"]::before {
	.m-faContent(@fa-var-star, 1em);
}
.p-navEl-link[data-nav-id="xfrmYourResources"]::before {
	.m-faContent(@fa-var-cloud-download, 1em);
}
.p-navEl-link[data-nav-id="xfrmWatched"]::before {
	.m-faContent(@fa-var-bell, 1em);
}
.p-navEl-link[data-nav-id="xfrmSearchResources"]::before {
	.m-faContent(@fa-var-search, 1em);
}
.p-navEl-link[data-nav-id="currentVisitors"]::before {
	.m-faContent(@fa-var-users, 1em);
}
.p-navEl-link[data-nav-id="newProfilePosts"]::before {
	.m-faContent(@fa-var-pencil, 1em);
}
.p-navEl-link[data-nav-id="searchProfilePosts"]::before {
	.m-faContent(@fa-var-commenting, 1em);
}
</xf:if>


// #### offCanvasMenu LinkHolders Icons ####

<xf:if is="property('dt_offcanvasmenu_linkholder_glyphs')">

.offCanvasMenu-link::before {
	.m-faBase();
	padding-right: 6px;
}
.offCanvasMenu-link[href*="login"]::before {
	.m-faContent(@fa-var-sign-in, 1em);
}
.offCanvasMenu-link[href*="register"]::before {
	.m-faContent(@fa-var-user-circle, 1em);
}
.offCanvasMenu-link[data-nav-id="home"]::before {
	.m-faContent(@fa-var-home, 1em);
}
.offCanvasMenu-link[data-nav-id="forums"]::before {
	.m-faContent(@fa-var-comments, 1em);
}
.offCanvasMenu-link[data-nav-id="whatsNew"]::before {
	.m-faContent(@fa-var-bolt, 1em);
}
.offCanvasMenu-link[data-nav-id="members"]::before {
	.m-faContent(@fa-var-users, 1em);
}
.offCanvasMenu-link[data-nav-id="xfmg"]::before {
	.m-faContent(@fa-var-picture-o, 1em);
}
.offCanvasMenu-link[data-nav-id="xfrm"]::before {
	.m-faContent(@fa-var-download, 1em);
}
</xf:if>

// #### offCanvasMenu Links Icons ####

<xf:if is="property('dt_offcanvasmenu_links_glyphs')">
.offCanvasMenu-link::before {
	.m-faBase();
}
.offCanvasMenu-link[data-nav-id="newPosts"]::before {
	.m-faContent(@fa-var-fire, 2em);
}
.offCanvasMenu-link[data-nav-id="findThreads"]::before {
	.m-faContent(@fa-var-comment, 2em);
}
.offCanvasMenu-link[data-nav-id="yourThreads"]::before {
	.m-faContent(@fa-var-comments, 2em);
}
.offCanvasMenu-link[data-nav-id="contributedThreads"]::before {
	.m-faContent(@fa-var-comments-o, 2em);
}
.offCanvasMenu-link[data-nav-id="unansweredThreads"]::before {
	.m-faContent(@fa-var-comment-o, 2em);
}
.offCanvasMenu-link[data-nav-id="watched"]::before {
	.m-faContent(@fa-var-bell, 2em);
}
.offCanvasMenu-link[data-nav-id="watchedThreads"]::before {
	.m-faContent(@fa-var-globe, 2em);
}
.offCanvasMenu-link[data-nav-id="watchedForums"]::before {
	.m-faContent(@fa-var-flag, 2em);
}
.offCanvasMenu-link[data-nav-id="searchForums"]::before {
	.m-faContent(@fa-var-search, 2em);
}
.offCanvasMenu-link[data-nav-id="markForumsRead"]::before {
	.m-faContent(@fa-var-eye-slash, 2em);
}
.offCanvasMenu-link[data-nav-id="whatsNewPosts"]::before {
	.m-faContent(@fa-var-file-text-o, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgWhatsNewNewMedia"]::before {
	.m-faContent(@fa-var-picture-o, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgWhatsNewMediaComments"]::before {
	.m-faContent(@fa-var-comments-o, 2em);
}
.offCanvasMenu-link[data-nav-id="xfrmNewResources"]::before {
	.m-faContent(@fa-var-download, 2em);
}
.offCanvasMenu-link[data-nav-id="whatsNewProfilePosts"]::before {
	.m-faContent(@fa-var-pencil, 2em);
}
.offCanvasMenu-link[data-nav-id="whatsNewNewsFeed"]::before {
	.m-faContent(@fa-var-rss, 2em);
}
.offCanvasMenu-link[data-nav-id="latestActivity"]::before {
	.m-faContent(@fa-var-clock-o, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgNewMedia"]::before {
	.m-faContent(@fa-var-bolt, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgNewComments"]::before {
	.m-faContent(@fa-var-comments-o, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgAddMedia"]::before {
	.m-faContent(@fa-var-plus-square, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgYourContent"]::before {
	.m-faContent(@fa-var-file-image-o, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgYourMedia"]::before {
	.m-faContent(@fa-var-file-picture-o, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgYourAlbums"]::before {
	.m-faContent(@fa-var-file-picture-o, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgWatchedContent"]::before {
	.m-faContent(@fa-var-bell, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgWatchedMedia"]::before {
	.m-faContent(@fa-var-bell, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgWatchedAlbums"]::before {
	.m-faContent(@fa-var-globe, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgWatchedCategories"]::before {
	.m-faContent(@fa-var-flag, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgSearchMedia"]::before {
	.m-faContent(@fa-var-search, 2em);
}
.offCanvasMenu-link[data-nav-id="xfmgMarkViewed"]::before {
	.m-faContent(@fa-var-eye-slash, 2em);
}
.offCanvasMenu-link[data-nav-id="xfrmLatestReviews"]::before {
	.m-faContent(@fa-var-star, 2em);
}
.offCanvasMenu-link[data-nav-id="xfrmYourResources"]::before {
	.m-faContent(@fa-var-cloud-download, 2em);
}
.offCanvasMenu-link[data-nav-id="xfrmWatched"]::before {
	.m-faContent(@fa-var-bell, 2em);
}
.offCanvasMenu-link[data-nav-id="xfrmWatchedResources"]::before {
	.m-faContent(@fa-var-bell, 2em);
}
.offCanvasMenu-link[data-nav-id="xfrmWatchedCategories"]::before {
	.m-faContent(@fa-var-globe, 2em);
}
.offCanvasMenu-link[data-nav-id="xfrmSearchResources"]::before {
	.m-faContent(@fa-var-search, 2em);
}
.offCanvasMenu-link[data-nav-id="currentVisitors"]::before {
	.m-faContent(@fa-var-users, 2em);
}
.offCanvasMenu-link[data-nav-id="newProfilePosts"]::before {
	.m-faContent(@fa-var-pencil, 2em);
}
.offCanvasMenu-link[data-nav-id="searchProfilePosts"]::before {
	.m-faContent(@fa-var-commenting, 2em);
}
</xf:if>

// #### Visitor Menu Icons ####

<xf:if is="property('dt_visitor_menu_glyphs')">
.menu--account {
	.menu-linkRow::after {
		.m-faBase();
		float: left;
		padding-right: 4px;
	}
	.menu-linkRow[href*="news-feed"]::after {
		.m-faContent(@fa-var-rss, 1em);
	}
	.menu-linkRow[href*="reactions"]::after {
		.m-faContent(@fa-var-thumbs-up, 1em);
	}
	.menu-linkRow[href*="search/member"]::after {
		.m-faContent(@fa-var-comments, 1em);
	}
	.menu-linkRow[href*="account-details"]::after {
		.m-faContent(@fa-var-user, 1em);
	}
	.menu-linkRow[href*="preferences"]::after {
		.m-faContent(@fa-var-cog, 1em);
	}
	.menu-linkRow[href*="signature"]::after {
		.m-faContent(@fa-var-pencil, 1em);
	}
	.menu-linkRow[href*="security"]::after {
		.m-faContent(@fa-var-lock, 1em);
	}
	.menu-linkRow[href*="upgrades"]::after {