<?xml version="1.0" encoding="utf-8"?>
<style title="Fury" description="" user_selectable="1" base_version_id="2021270" export_version="2">
  <assets>
    <asset key="dt_theme_files" path="styles/fury"/>
  </assets>
  <templates>
    <template title="PAGE_CONTAINER" type="public" addon_id="XF" version_id="2021270" version_string="2.2.12"><![CDATA[<!DOCTYPE html>
<html id="XF" lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}"
	data-app="public"
	data-template="{$template}"
	data-container-key="{$containerKey}"
	data-content-key="{$contentKey}"
	data-logged-in="{{ $xf.visitor.user_id ? 'true' : 'false' }}"
	data-cookie-prefix="{$xf.cookie.prefix}"
	data-csrf="{{ csrf_token()|escape('js') }}"
	class="has-no-js {{ $template ? 'template-' . $template : '' }}"
	{{ $xf.runJobs ? ' data-run-jobs=""' : '' }}>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

	<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
	<xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
	<xf:set var="$description"><xf:description /></xf:set>

	<title><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" page="{$pageNumber}" /></title>

	<link rel="manifest" href="{{ base_url('webmanifest.php') }}">
	<xf:if is="property('metaThemeColor')">
		<meta name="theme-color" content="{{ parse_less_color(property('metaThemeColor')) }}" />
	</xf:if>

	<meta name="apple-mobile-web-app-title" content="{{ $xf.options.boardShortTitle ?: $xf.options.boardTitle }}">
	<xf:if is="property('publicIconUrl')">
		<link rel="apple-touch-icon" href="{{ base_url(property('publicIconUrl', true)) }}">
	<xf:elseif is="property('publicMetadataLogoUrl')" />
		<link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl')) }}" />
	</xf:if>
	
	<xf:foreach loop="$head" value="$headTag">
		{$headTag}
	</xf:foreach>

	<xf:if is="!$head.meta_site_name && $siteName is not empty">
		<xf:macro template="metadata_macros" name="site_name" arg-siteName="{$siteName}" arg-output="{{ true }}" />
	</xf:if>
	<xf:if is="!$head.meta_type">
		<xf:macro template="metadata_macros" name="type" arg-type="website" arg-output="{{ true }}" />
	</xf:if>
	<xf:if is="!$head.meta_title">
		<xf:macro template="metadata_macros" name="title" arg-title="{{ page_title() ?: $siteName }}" arg-output="{{ true }}" />
	</xf:if>
	<xf:if is="!$head.meta_description && $description is not empty && $pageDescriptionMeta">
		<xf:macro template="metadata_macros" name="description" arg-description="{$description}" arg-output="{{ true }}" />
	</xf:if>
	<xf:if is="!$head.meta_share_url">
		<xf:macro template="metadata_macros" name="share_url" arg-shareUrl="{$xf.fullUri}" arg-output="{{ true }}" />
	</xf:if>
	<xf:if is="!$head.meta_image_url && property('publicMetadataLogoUrl')">
		<xf:macro template="metadata_macros" name="image_url"
			arg-imageUrl="{{ base_url(property('publicMetadataLogoUrl'), true) }}"
			arg-output="{{ true }}" />
	</xf:if>

	<xf:macro template="helper_js_global" name="head" arg-app="public" />

	<xf:if is="property('publicFaviconUrl')">
		<link rel="icon" type="image/png" href="{{ base_url(property('publicFaviconUrl'), true) }}" sizes="32x32" />
	</xf:if>
	<xf:include template="google_analytics" />
</head>
<body data-template="{$template}">

<div class="p-pageWrapper" id="top">

<xf:if contentcheck="true">
	<div class="p-staffBar">
		<div class="p-staffBar-inner hScroller" data-xf-init="h-scroller">
			<div class="hScroller-scroll">
			<xf:contentcheck>
				<xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
					<a href="{{ link('approval-queue') }}" class="p-staffBar-link badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}">
						{{ phrase('approval_queue') }}
					</a>
				</xf:if>

				<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total">
					<a href="{{ link('reports') }}"
						class="p-staffBar-link badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}"
						data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}"
						title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:')|for_attr . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">
						{{ phrase('reports') }}
					</a>
				</xf:if>

				<xf:if contentcheck="true">
					<a class="p-staffBar-link menuTrigger" data-xf-click="menu" data-xf-key="alt+m" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('moderator') }}</a>
					<div class="menu" data-menu="menu" aria-hidden="true">
						<div class="menu-content">
							<h4 class="menu-header">{{ phrase('moderator_tools') }}</h4>
							<xf:contentcheck>
							<!--[XF:mod_tools_menu:top]-->
							<xf:if is="$xf.visitor.is_moderator">
								<a href="{{ link('approval-queue') }}" class="menu-linkRow">{{ phrase('approval_queue') }}</a>
							</xf:if>
							<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
								<a href="{{ link('reports') }}" class="menu-linkRow" title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:')|for_attr . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
							</xf:if>
							<!--[XF:mod_tools_menu:bottom]-->
							</xf:contentcheck>
						</div>
					</div>
				</xf:if>

				<xf:if is="$xf.visitor.is_admin">
					<a href="{{ base_url('admin.php') }}" class="p-staffBar-link" target="_blank">{{ phrase('admin') }}</a>
				</xf:if>
			</xf:contentcheck>
			</div>
		</div>
	</div>
</xf:if>
	
<xf:set var="$srcset">{{ property('publicLogoUrl2x') ? base_url(property('publicLogoUrl2x')) . ' 2x' : '' }}</xf:set>

<xf:set var="$navHtml">
	<nav class="p-nav">
		<div class="p-nav-inner">
			<xf:button class="button--plain p-nav-menuTrigger" data-xf-click="off-canvas" data-menu=".js-headerOffCanvasMenu" tabindex="0"
				aria-label="{{ phrase('menu')|for_attr }}">
				<i aria-hidden="true"></i>
			</xf:button>
			
			<xf:if is="property('dt_text_logo')">
				<div class="p-nav-smallLogo">
					<a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
						{{ property('dt_text_logo') }}
					</a>
				</div>
			<xf:else />
				<div class="p-nav-smallLogo">
					<a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
						<img src="{{ base_url(property('publicLogoUrl')) }}" srcset="{$srcset}" alt="{$xf.options.boardTitle}"
							width="{{ property('publicLogoWidth') ?: '' }}" height="{{ property('publicLogoHeight') ?: '' }}" />
					</a>
				</div>
			</xf:if>
			
			<xf:if is="property('dt_text_logo')">
				<div class="p-header-logo p-header-logo--text">
					<a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
							{{ property('dt_text_logo') }}
					</a>
				</div>
			<xf:else />
				<div class="p-header-logo p-header-logo--image">
					<span class="p-header-logo--before"></span>
						<a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
						<img src="{{ base_url(property('publicLogoUrl')) }}" srcset="{$srcset}" alt="{$xf.options.boardTitle}"
							width="{{ property('publicLogoWidth') ?: '' }}" height="{{ property('publicLogoHeight') ?: '' }}" />
					</a>
				</div>
			</xf:if>

			<xf:ad position="container_header" />

			<div class="p-nav-scroller hScroller" data-xf-init="h-scroller" data-auto-scroll=".p-navEl.is-selected">
				<div class="hScroller-scroll">
					<ul class="p-nav-list js-offCanvasNavSource">
					<xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
						<li>
							<xf:macro name="nav_entry"
								arg-navId="{$navSection}"
								arg-nav="{$navEntry}"
								arg-selected="{{ $navSection == $pageSection }}"
								arg-shortcut="{$i}" />
						</li>
					</xf:foreach>
					</ul>
				</div>
			</div>

			<div class="p-nav-opposite">
				<div class="p-navgroup p-account {{ $xf.visitor.user_id ? 'p-navgroup--member' : 'p-navgroup--guest' }}">
					<xf:if is="$xf.visitor.user_id">
						<xf:if is="$xf.visitor.user_state == 'rejected' OR $xf.visitor.user_state == 'disabled'">
							<a href="{{ link('account') }}"
								class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--user">
								<xf:avatar user="$xf.visitor" size="xxs" href="" title="" />
								<span class="p-navgroup-linkText">{$xf.visitor.username}</span>
							</a>

							<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="p-navgroup-link">
								<span class="p-navgroup-linkText">{{ phrase('log_out') }}</span>
							</a>
						<xf:else />
							<a href="{{ link('account') }}"
								class="p-navgroup-link 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></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" 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>
	</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>
<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}
	</div>
<xf:else />
	{$navHtml|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">
	<xf:if is="property('dt_guest_message')">
		<div class="p-guest--message">
			<div class="p-guest--message--container">
				<div class="p-guest--message--inner">
					<xf:if is="!$xf.visitor.user_id">
						{{ property('dt_guest_message_content') }}
					<xf:else />
						{{ property('dt_user_message_content') }}
					</xf:if>
				</div>
			</div>
		</div>	
	</xf:if>
	
	<div class="p-body-inner">
		<!--XF:EXTRA_OUTPUT-->

		<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" />
		
		<div class="p-body-nav">
			{$subNavHtml|raw}
			<xf:if contentcheck="true">
				<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
			</xf:if>
			<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>

		<div class="p-body-header">
			<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}" />
			</div>

			<xf:ad position="container_breadcrumb_top_below" />

			<xf:if is="$headerHtml is not empty">
				<div class="p-body-header-content">
					{$headerHtml|raw}
				</div>
			<xf:elseif contentcheck="true" />
				<div class="p-body-header-content">
					<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>
				</div>
			</xf:if>
		</div>

		<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">
			<xf:if contentcheck="true">
				<div class="p-footer-row-main">
					<ul class="p-footer-linkList">
					<xf:contentcheck>
						<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: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>
					</xf:contentcheck>
					</ul>
				</div>
			</xf:if>
			<div class="p-footer-row-opposite">
				<xf:if contentcheck="true">
					<div class="p-footer-copyright">
					<xf:contentcheck>
						<xf:copyright />
						{{ phrase('extra_copyright') }}
					</xf:contentcheck>
						<xf:if is="!property('dt_removecopy')">
							<br />
							Theming with <i class="fa fa-heart animate-pulse"></i> by: <a href="https://practicalsoft.ir/">practicalsoft.ir</a>
						</xf:if>
					</div>
				</xf:if>
			</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-chevron-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-chevron-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">
			<span itemprop="name">{$value}</span>
		</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-wrap: wrap;
	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;
	padding-bottom: @xf-elementSpacer;
}

.p-body-header
{
	.xf-contentBase();
	.xf-blockBorder();
	border-radius: @xf-blockBorderRadius;
	margin-bottom: @xf-elementSpacer;
	
	&-content
	{
		padding: @xf-elementSpacer;
	}
}

.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="2020052" version_string="2.2.0 Release Candidate 2"><![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;
		margin-right: .5em;
		font-size: @xf-fontSizeSmall;

		a
		{
			display: inline-block;
			vertical-align: bottom;
			max-width: 300px;
			color: @xf-textColorMuted;
			.m-overflowEllipsis();
		}

		&:after,
		&:before
		{
			.m-faBase();
			font-size: 90%;
			color: @xf-textColorMuted;
		}

		&:after
		{
			.m-faContent(@fa-var-angle-right, false ltr);
			.m-faContent(@fa-var-angle-left, false, rtl);
			margin-left: 1em;
			margin-right: 1em;
		}

		&:last-child
		{
			margin-right: 0;
			
			a
			{
				color: @xf-linkColor;
			}
		}
	}
}

@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_footer.less" type="public" addon_id="XF" version_id="2010770" version_string="2.1.7"><![CDATA[.p-footer
{
	.xf-publicFooter();

	a
	{
		.xf-publicFooterLink();
	}
}

.p-footer-inner
{
	.m-pageWidth();
	.m-pageInset();

	padding-top: @xf-elementSpacer;
	padding-bottom: @xf-paddingLargest;
	border-top: @xf-borderSize solid rgba(255, 255, 255, 0.12);
}

.p-footer-row
{
	.m-clearFix();

	margin-bottom: -@xf-paddingLarge;
}

.p-footer-row-main
{
	float: left;
	margin-bottom: @xf-paddingLarge;
}

.p-footer-row-opposite
{
	float: right;
	margin-bottom: @xf-paddingLarge;
}

.p-footer-linkList
{
	.m-listPlain();
	.m-clearFix();

	> li
	{
		float: left;
		margin-right: .5em;

		&:last-child
		{
			margin-right: 0;
		}

		a
		{
			padding: 2px 4px;
			border-radius: @xf-borderRadiusSmall;

			&:hover
			{
				text-decoration: none;
				background-color: fade(@xf-publicFooterLink--color, 10%);
			}
		}
	}
}

.p-footer-rssLink
{
	> span
	{
		position: relative;
		top: -1px;

		display: inline-block;
		width: 1.44em;
		height: 1.44em;
		line-height: 1.44em;
		text-align: center;
		font-size: .8em;
		background-color: #FFA500;
		border-radius: 2px;
	}

	.fa-rss
	{
		color: white;
	}
}

.p-footer-copyright
{
	text-align: right;
	font-size: @xf-fontSizeSmaller;
}

.p-footer-debug
{
	margin-top: @xf-paddingLarge;
	text-align: right;
	font-size: @xf-fontSizeSmallest;

	.pairs > dt { color: inherit; }
}

@media (max-width: @xf-responsiveMedium)
{
	.p-footer-row-main,
	.p-footer-row-opposite
	{
		float: none;
	}

	.p-footer-copyright
	{
		text-align: left;
		padding: 0 4px; // aligns with other links
	}
}]]></template>
    <template title="app_header.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// MAIN HEADER ROW

.p-header
{
	a
	{
		color: inherit;
	}
}

.p-header-inner
{
	.m-pageWidth();
	.m-pageInset();
}

.p-header-content
{
	padding: @xf-paddingMedium 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	max-width: 100%;
}

.p-header-logo
{
	position: relative;
	vertical-align: middle;
	padding: 17px 0;
	margin-left: @xf-paddingLarge;
	margin-right: 50px;
	
	.xf-publicHeader();
	
	&--before
	{
		content: "";
		position: absolute;
		top: 0;
		right: -25px;
		bottom: 0;
		width: 2000%;
		height: 100%;
		background-color: @xf-dt_grad_color1;
		background-image: linear-gradient(90deg, @xf-dt_grad_color1 0%, @xf-dt_grad_color2 100%);
		transform: skew(-30deg);
		z-index: 1;
		
		&::after
		{
			content: '';
			position: absolute;
			top: 0;
			right: -14px;
			display: inline-block;
			background: linear-gradient(to top,  @xf-dt_grad_color1 -100%,  @xf-dt_grad_color2 100%);
			width: 15px;
			height: 100%;
		}
	}

	a
	{
		position: relative;
		color: inherit;
		text-decoration: none;
		z-index: 2;
	}

	&.p-header-logo--text
	{
		.xf-dt_text_logo_css();
	}

	&.p-header-logo--image
	{
		img
		{
			vertical-align: bottom;
			
			// Note: this is XF template syntax, not LESS
			{{ !property('publicLogoHeight') ? 'max-height: 200px;' : ''}}

			&[src$="/xenforo-logo.svg"]
			{
				height: 36px;
			}
		}
	}
}

@media (max-width: @xf-publicNavCollapseWidth)
{
	.has-js .p-header-logo
	{
		display: none;
	}
}
]]></template>
    <template title="app_nav.less" type="public" addon_id="XF" version_id="2020371" version_string="2.2.3 Patch 1"><![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-navSticky.is-sticky &
	{
		.p-nav-list .p-navEl.is-selected,
		.p-account
		{
			border-radius: 0;
		}
	}
}

.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 8px;
	color: inherit;

	&:hover
	{
		text-decoration: 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: 100px;
	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)
{
	.p-nav
	{
		background-color: @xf-dt_grad_color1;
		background-image: linear-gradient(90deg, @xf-dt_grad_color1 0%, @xf-dt_grad_color2 100%);
		color: @xf-textColorEmphasized;
	}
	
	.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;
	text-align: right;
	flex-shrink: 0;
}

.p-navgroup
{
	float: left;
	.m-clearFix();

	&.p-discovery
	{
		margin-left: .5em;

		&.p-discovery--noSearch
		{
			margin-left: 0;
		}
	}
}

.p-navgroup-link
{
	float: left;
	padding: (@xf-publicNavPaddingV - 3px) @_navAccount-hPadding;

	&:hover
	{
		text-decoration: none;
	}

	&.p-navgroup-link--user
	{
		.m-overflowEllipsis();
		max-width: 150px;

		.avatar
		{
			.m-avatarSize((@xf-fontSizeNormal) * (@xf-lineHeightDefault));
		}
	}

	&.badgeContainer
	{
		opacity: .6;
		position: relative;

		&:after
		{
			position: absolute;
			left: (@_navAccount-hPadding - 6px);
			top: (@xf-publicNavPaddingV - 4px);
			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;
			font-size: 105%;
			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, 1em);
	}
	
	&.p-navgroup-link--register i:after
	{
		.m-faContent(@fa-var-user-plus, 1em);
	}

	&.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;

	.p-navgroup-link:first-of-type& + .p-navgroup-link
	{
		border-top-left-radius: @xf-borderRadiusMedium;
		border-left: 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="2010470" version_string="2.1.4"><![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-responsiveWide)
{
	.has-js .p-sectionLinks
	{
		display: none;
	}
}]]></template>
    <template title="app_title.less" type="public" addon_id="XF" version_id="2010470" version_string="2.1.4"><![CDATA[.p-title
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 100%;

	&.p-title--noH1
	{
		flex-direction: row-reverse;
	}
}

.p-title-value
{
	padding: 0;
	margin: 0;
	font-size: @xf-fontSizeLargest;
	font-weight: 500;
	min-width: 0;
	margin-right: auto;
}

.p-title-pageAction
{
	margin-left: auto;
}

.p-description
{
	margin: 5px 0 0;
	padding: 0;
	font-size: @xf-fontSizeSmall;
	color: @xf-textColorMuted;
}

@media (max-width: @xf-responsiveNarrow)
{
	.p-title-value
	{
		font-size: @xf-fontSizeLarger;
	}
}]]></template>
    <template title="app_user_banners.less" type="public" addon_id="XF" version_id="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: 4px;
	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="bb_code.less" type="public" addon_id="XF" version_id="2020670" version_string="2.2.6"><![CDATA[@_bbCodeBlock-spacing: .5em;
@_bbCodeBlock-paddingV: @xf-paddingMedium;
@_bbCodeBlock-paddingH: @xf-paddingLarge;
@_bbCodeBlock-expandTriggerHeight: (@xf-bbCodeBlockExpandHeight) / 2;

.bbCodeBlock
{
	display: flow-root;
	margin: @_bbCodeBlock-spacing 0;
	.xf-bbCodeBlock();

	&.bbCodeBlock--quote
	{
		.bbCodeBlock-content
		{
			font-size: @xf-fontSizeSmall;
		}
	}
}

.bbCodeBlock-title
{
	padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH;
	.xf-bbCodeBlockTitle();
	.m-clearFix();
}

a.bbCodeBlock-sourceJump
{
	color: inherit;
	text-decoration: none;

	&:hover
	{
		text-decoration: underline;
	}

	&:after
	{
		.m-faBase();
		.m-faContent(@fa-var-arrow-circle-up); //, 1em
		display: inline-block;
		margin-left: 5px;
	}
}

.bbCodeBlock-content
{
	position: relative;
	padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH;
	.m-clearFix();
}

.bbCodeBlock-expandLink
{
	display: none;
	position: absolute;
	top: (@xf-bbCodeBlockExpandHeight) + (@_bbCodeBlock-paddingV * 2) - (@_bbCodeBlock-expandTriggerHeight);
	left: 0;
	right: 0;
	height: @_bbCodeBlock-expandTriggerHeight;
	cursor: pointer;
	z-index: @zIndex-1;

	.m-gradient(
		fade(@xf-bbCodeBlock--background-color, 0%),
		xf-default(@xf-bbCodeBlock--background-color, transparent),
		transparent,
		0%,
		80%
	);

	a
	{
		position: absolute;
		bottom: @_bbCodeBlock-paddingV;
		left: 0;
		right: 0;
		text-align: center;
		font-size: @xf-fontSizeSmall;
		color: @xf-textColorAttention;
		text-decoration: none;
	}
}

.bbCodeBlock--screenLimited
{
	.bbCodeBlock-content
	{
		max-height: 300px;
		max-height: 70vh;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
}

.bbCodeBlock--expandable
{
	overflow: hidden;
	.m-transition(-xf-height, height, padding, margin, border;);

	.bbCodeBlock-content
	{
		overflow: hidden;

		.bbCodeBlock:not(.bbCodeBlock--expandable) .bbCodeBlock-content
		{
			overflow: visible;
		}
		.bbCodeBlock.bbCodeBlock--screenLimited .bbCodeBlock-content
		{
			overflow: auto;
		}
	}

	.bbCodeBlock-expandContent
	{
		max-height: @xf-bbCodeBlockExpandHeight;
		overflow: hidden;
	}

	&.is-expandable
	{
		.bbCodeBlock-expandLink
		{
			display: block;
		}
	}

	&.is-expanded
	{
		.bbCodeBlock-expandContent
		{
			max-height: none;
		}

		.bbCodeBlock-expandLink
		{
			display: none;
		}
	}
}

.bbCodeBlock--unfurl
{
	.xf-contentAltBase();

	padding: @_bbCodeBlock-paddingV;
	width: 650px;
	max-width: 100%;
	border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;

	overflow: hidden;

	.contentRow-header
	{
		margin: 0;
		font-size: @xf-fontSizeNormal;
		font-weight: normal;
		.m-overflowEllipsis();
	}

	.contentRow-snippet
	{
		font-size: @xf-fontSizeSmaller;
		font-style: normal;
	}

	.contentRow-minor
	{
		font-size: @xf-fontSizeSmaller;
	}

	&.is-pending
	{
		opacity: 0.5;

		&.is-recrawl
		{
			opacity: 1;
		}
	}

	&.is-simple
	{
		.contentRow-figure
		{
			display: none;
		}
	}

	.bbCodeBlockUnfurl-icon
	{
		width: 12px;
		vertical-align: -2px;
	}
}

.bbCodeCode
{
	margin: 0;
	padding: 0;

	.has-hiddenscroll &
	{
		// solely to workaround this Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=914844
		// TODO: remove when fixed
		padding-bottom: @xf-paddingLarge;
	}

	font-family: @xf-fontFamilyCode;
	font-size: @xf-fontSizeSmall;
	line-height: @xf-lineHeightDefault;
	-ltr-rtl-text-align: left;

	direction: ltr;
	white-space: pre;
	position: relative;

	.m-tabSize();

	code
	{
		font-family: inherit;
	}

	.prism-token
	{
		&.prism-comment,
		&.prism-prolog,
		&.prism-doctype,
		&.prism-cdata
		{
			& when (@xf-styleType = light) { color: #a50; }
			& when (@xf-styleType = dark) { color: #8292a2; }
		}

		&.prism-constant
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #f92672; }
		}

		&.prism-tag
		{
			& when (@xf-styleType = light) { color: #170; }
			& when (@xf-styleType = dark) { color: #f92672; }
		}

		&.prism-boolean
		{
			& when (@xf-styleType = light) { color: #219; }
			& when (@xf-styleType = dark) { color: #ae81ff; }
		}

		&.prism-symbol,
		&.prism-atrule,
		&.prism-keyword
		{
			& when (@xf-styleType = light) { color: #708; }
			& when (@xf-styleType = dark) { color: #e6db74; }
		}

		&.prism-selector,
		&.prism-function
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #e6db74; }
		}

		&.prism-deleted
		{
			color: #d44;
		}

		&.prism-inserted
		{
			color: #292;
		}

		&.prism-string,
		&.prism-attr-value
		{
			& when (@xf-styleType = light) { color: #a11; }
			& when (@xf-styleType = dark) { color: #a6e22e; }
		}

		&.prism-number
		{
			& when (@xf-styleType = light) { color: #164; }
			& when (@xf-styleType = dark) { color: #ae81ff; }
		}

		&.prism-attr-name,
		&.prism-char,
		&.prism-builtin
		{
			& when (@xf-styleType = light) { color: #00c; }
			& when (@xf-styleType = dark) { color: #a6e22e; }
		}

		&.prism-regex,
		&.prism-important,
		&.prism-variable,
		&.prism-package
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #fd971f; }
		}

		&.prism-class-name,
		&.prism-important,
		&.prism-bold
		{
			& when (@xf-styleType = light) { color: #00f; }
			& when (@xf-styleType = dark) { color: #e6db74; }
		}

		&.prism-bold
		{
			font-weight: bold;
		}

		&.prism-italic,
		&.prism-constant
		{
			& when (@xf-styleType = light) { color: #05a; }
			& when (@xf-styleType = dark) { color: #f92672; }

			font-style: italic;
		}

		&.prism-entity
		{
			cursor: help;
		}
	}
}

.bbCodeInline
{
	margin: 0;
	.xf-bbCodeInlineCode();
	font-family: @xf-fontFamilyCode;
	line-height: @xf-lineHeightDefault;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	white-space: pre-wrap;
}

.bbCodeSpoiler
{
	margin: @_bbCodeBlock-spacing 0;
}

.bbCodeSpoiler-button
{
	.has-no-js & { display: none; }
}

.bbCodeSpoiler-content
{
	.m-hiddenEl(true);
	.has-no-js & { display: block !important; }

	> .bbCodeBlock--spoiler
	{
		margin: .2em 0 0;
	}
}

.bbCodeInlineSpoiler
{
	@blurAmount: 6px;
	filter: blur(@blurAmount);
	cursor: pointer;

	a, span
	{
		.has-js &
		{
			pointer-events: none;
		}
	}

	.smilie
	{
		filter: grayscale(90%);
	}

	&:hover
	{
		filter: blur((@blurAmount - 1));
	}
}]]></template>
    <template title="core.less" type="public" addon_id="XF" version_id="2020570" version_string="2.2.5"><![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;
	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_extra.less') }}
{{ include('core_dt_proprties.less') }}
{{ include('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_badge.less" type="public" addon_id="XF" version_id="2000470" version_string="2.0.4"><![CDATA[// #################################################### BADGES ###########################

.badge,
.badgeContainer:after
{
	display: inline-block;
	min-width: 12px;
	height: 16px;
	line-height: 16px;
	font-size: 80%;
	text-align: center;
	white-space: nowrap;
	word-wrap: normal;
	font-weight: @xf-fontWeightNormal;
	padding: 0 2px;
	margin: -2px 0;
	.xf-badge();
}

.badgeContainer
{
	&:after
	{
		content: attr(data-badge);
		display: none;
	}

	&.badgeContainer--visible:after
	{
		display: inline-block;
	}
}

.badge.badge--highlighted,
.badgeContainer.badgeContainer--highlighted:after
{
	display: inline-block;
	.xf-badgeHighlighted();
}]]></template>
    <template title="core_block.less" type="public" addon_id="XF" version_id="2021070" version_string="2.2.10"><![CDATA[// ################################# BLOCKS ##################

.blocks
{
	margin-bottom: @xf-elementSpacer;

	&:last-child
	{
		margin-bottom: 0;
	}

	.block
	{
		margin-bottom: (@xf-elementSpacer / 2);

		&:last-child
		{
			margin-bottom: 0;
		}
	}

	&.blocks--close .block
	{
		margin-bottom: (@xf-elementSpacer / 4);
	}

	&.blocks--separated
	{
		+ .blocks
		{
			padding-top: @xf-elementSpacer;
			border-top: @xf-borderSize solid @xf-borderColor;
		}
	}
}

.blocks-header
{
	font-size: @xf-fontSizeLarger;
	font-weight: @xf-fontWeightNormal;
	color: @xf-textColorMuted;

	margin: 0;
	padding: 0;
	margin-bottom: 5px;

	&.blocks-header--strong
	{
		color: @xf-textColorDimmed;

		.blocks-desc
		{
			color: @xf-textColorMuted;
		}
	}
}

.blocks-textJoiner
{
	display: table;
	width: 100%;
	margin-bottom: (@xf-elementSpacer / 2);
	padding: 0 @xf-paddingMedium;

	> span
	{
		display: table-cell;
		position: relative;

		&:before
		{
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			border-top: @xf-borderSize solid @xf-borderColor;
		}
	}

	> em
	{
		display: table-cell;
		padding: 0 @xf-paddingLarge;
		width: 1%;
		white-space: nowrap;
		font-size: @xf-fontSizeLargest;
		line-height: 1;
		font-style: normal;
		text-align: center;
	}
}

.block
{
	margin-bottom: @xf-elementSpacer;

	&.block--close
	{
		margin-bottom: 5px;
	}

	&.block--treeEntryChooser
	{
		.block-header
		{
			font-size: @xf-fontSizeLarge;

			.block-desc
			{
				font-size: @xf-fontSizeSmallest;
				color: fade(@xf-blockHeader--color, 70);
			}
		}

		.block-row
		{
			padding-top: 6px;
			padding-bottom: 6px;
		}

		.contentRow
		{
			&.is-disabled
			{
				opacity: 0.5;
			}
		}

		.contentRow-title
		{
			font-size: @xf-fontSizeNormal;
		}

		.contentRow-minor
		{
			font-size: @xf-fontSizeSmaller;
		}

		.contentRow-suffix
		{
			font-size: @xf-fontSizeSmall;
		}
	}
}

.block-outer
{
	padding-bottom: @xf-blockPaddingV;
	.m-clearFix();

	&:empty
	{
		display: none;
	}

	&.block-outer--after
	{
		padding-top: @xf-blockPaddingV;
		padding-bottom: 0;
	}

	&.block-outer--padded
	{
		padding-left: @xf-blockPaddingH;
		padding-right: @xf-blockPaddingH;
	}

	.block-outer-hint
	{
		font-size: @xf-fontSizeSmall;
		color: @xf-textColorMuted;
	}
}
.block-outer-main, .block-row-main { float: left; }
.block-outer-opposite, .block-row-opposite { float: right; }
.block-outer-middle, .block-row-middle { text-align: center; }

.block-container
{
	.xf-contentBase();
	.xf-blockBorder();
	border-radius: @xf-blockBorderRadius;

	&.block-container--none
	{
		background: none;
		border: none;
		color: @xf-textColor;
		padding: 0;
	}
}

@media (min-width: @xf-responsiveEdgeSpacerRemoval)
{
	@{block-noStripSel} > :first-child,
	.block-topRadiusContent,
	@{block-noStripSel} > .block-body:first-child > .blockLink:first-child
	{
		border-top-left-radius: @block-borderRadius-inner;
		border-top-right-radius: @block-borderRadius-inner;
	}

	@{block-noStripSel} > :last-child,
	.block-bottomRadiusContent,
	@{block-noStripSel} > .block-body:last-child > .blockLink:last-child,
	@{block-noStripSel} > .tabPanes:last-child > [role=tabpanel] > :last-child,
	@{block-noStripSel} > .tabPanes:last-child > [role=tabpanel] > .block-body > :last-child
	{
		border-bottom-left-radius: @block-borderRadius-inner;
		border-bottom-right-radius: @block-borderRadius-inner;
	}

	@{block-noStripSel} > .block-body:first-child > .dataList:first-child,
	.block-topRadiusContent.dataList,
	.block-topRadiusContent > .dataList:first-child
	{
		tbody:first-child .dataList-row:first-child,
		thead:first-child .dataList-row:first-child
		{
			> .dataList-cell:first-child { border-top-left-radius: @block-borderRadius-inner; }
			> .dataList-cell:last-child { border-top-right-radius: @block-borderRadius-inner; }
		}
	}

	@{block-noStripSel} > .block-body:first-child > .formRow:first-child,
	.block-topRadiusContent.formRow,
	.block-topRadiusContent > .formRow:first-child
	{
		> dt { border-top-left-radius: @block-borderRadius-inner; }
		> dd { border-top-right-radius: @block-borderRadius-inner; }
	}

	@{block-noStripSel} > .block-body:last-child > .dataList:last-child,
	.block-bottomRadiusContent.dataList,
	.block-bottomRadiusContent > .dataList:last-child
	{
		tbody:last-child .dataList-row:last-child
		{
			> .dataList-cell:first-child { border-bottom-left-radius: @block-borderRadius-inner; }
			> .dataList-cell:last-child { border-bottom-right-radius: @block-borderRadius-inner; }
		}
	}

	@{block-noStripSel} > .block-body:last-child > .formRow:last-child,
	.block-bottomRadiusContent.formRow,
	.block-bottomRadiusContent > .formRow:last-child
	{
		> dt { border-bottom-left-radius: @block-borderRadius-inner; }
		> dd { border-bottom-right-radius: @block-borderRadius-inner; }
	}

	@{block-noStripSel} > .block-body:last-child .formSubmitRow:not(.is-sticky),
	@{block-noStripSel} > .formSubmitRow:not(.is-sticky):last-child,
	.block-bottomRadiusContent > .formSubmitRow:not(.is-sticky)
	{
		> dt { border-bottom-left-radius: @block-borderRadius-inner; }
		> dd { border-bottom-right-radius: @block-borderRadius-inner; }

		.formSubmitRow-bar
		{
			border-bottom-left-radius: @block-borderRadius-inner;
			border-bottom-right-radius: @block-borderRadius-inner;
		}
	}
}

.block-header
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-blockHeader();

	.m-clearFix();
	.m-hiddenLinks();

	&.block-header--separated
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}

	.block-desc
	{
		color: @xf-textColorDimmed;
	}
}

.block-minorHeader
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-blockMinorHeader();

	.m-clearFix();
	.m-hiddenLinks();

	.block-body + &
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}

	.block-desc
	{
		.m-textColoredLinks();
	}

	&--spaced
	{
		margin-top: @xf-paddingSmall;
	}

	&--small
	{
		font-size: @xf-fontSizeSmall;
	}
}

.block-tabHeader
{
	padding: 0;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	.xf-blockTabHeader();
	.m-tabsTogether(xf-default(@xf-blockTabHeader--font-size, @xf-fontSizeNormal));

	.tabs-tab
	{
		padding: @xf-blockPaddingH;
		border-bottom: @xf-borderSizeFeature solid transparent;

		&:not(.is-readonly):hover
		{
			color: @xf-blockTabHeaderSelected--color;
			background: fade(@xf-blockTabHeaderSelected--color, 2%);
		}

		&.is-readonly:hover
		{
			cursor: default;
		}

		&.tabs-tab--radio.is-readonly:hover
		{
			cursor: not-allowed;
		}
	}

	.tabs-tab.is-active,
	.tabs > input:checked + .tabs-tab--radio
	{
		background: none;
		.xf-blockTabHeaderSelected();
	}

	.tabs > input[type="radio"]
	{
		display: none;
	}

	.tabs-text
	{
		padding: @xf-blockPaddingV @xf-blockPaddingH;
		border-bottom: @xf-borderSizeFeature solid transparent;
	}

	.block-tabHeader-extra
	{
		float: right;
		color: inherit;
		font-size: @xf-blockTabHeader--font-size;
		padding: @xf-blockPaddingV @xf-blockPaddingH;
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-blockTabHeader--background-color, transparent),
			xf-default(@xf-blockTabHeader--color, ~""),
			xf-default(@xf-blockTabHeaderSelected--color, ~"")
		);
	}
}

.block-minorTabHeader
{
	padding: 0;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	.xf-blockMinorTabHeader();
	.m-tabsTogether(xf-default(@xf-blockMinorTabHeader--font-size, @xf-fontSizeNormal));

	.tabs-tab
	{
		padding: @xf-blockPaddingV @xf-blockPaddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
		border-bottom: @xf-borderSizeFeature solid transparent;

		&:hover
		{
			color: @xf-blockMinorTabHeaderSelected--color;
		}

		&.is-active
		{
			background: none;
			.xf-blockMinorTabHeaderSelected();
		}
	}

	.tabs-text
	{
		padding: @xf-blockPaddingV @xf-blockPaddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
		border-bottom: @xf-borderSizeFeature solid transparent;
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-blockMinorTabHeader--background-color, transparent),
			xf-default(@xf-blockMinorTabHeader--color, ~""),
			xf-default(@xf-blockMinorTabHeaderSelected--color, ~"")
		);
	}
}

.block-filterBar
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.xf-blockFilterBar();

	&.block-filterBar--standalone
	{
		padding: @xf-paddingLarge @xf-blockPaddingH;
		border: @xf-borderSize solid @xf-borderColor;
		border-radius: @block-borderRadius-inner;

		@media (max-width: @xf-responsiveEdgeSpacerRemoval)
		{
			border-radius: 0;
			border-left: none;
			border-right: none;
		}
	}

	.filterBar-filterToggle
	{
		background: mix(
			xf-default(@xf-blockFilterBar--color, @xf-linkColor),
			xf-default(@xf-blockFilterBar--background-color, transparent),
			8%
		);
	}

	.filterBar-filterToggle,
	.filterBar-menuTrigger
	{
		&:hover
		{
			text-decoration: none;
			background: mix(
				xf-default(@xf-blockFilterBar--color, @xf-linkColor),
				xf-default(@xf-blockFilterBar--background-color, transparent),
				16%
			);
		}
	}

	.filterBar-menuTrigger
	{
		margin-right: -5px;
	}
}

.block-textHeader
{
	margin: @xf-blockPaddingV/2 0;
	padding: 0;
	font-weight: @xf-fontWeightNormal;
	.xf-blockTextHeader();

	.m-clearFix();
	.m-hiddenLinks();

	&.block-textHeader--scaled
	{
		font-size: inherit;
	}

	.block-textHeader-highlight
	{
		color: @xf-textColor;
	}

	.block-desc
	{
		.m-textColoredLinks();
	}

	&:first-child
	{
		margin-top: 0;
	}
}

.block-formSectionHeader
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-formSectionHeader();

	.m-clearFix();
	.m-hiddenLinks();

	.block-desc
	{
		.m-textColoredLinks();
	}

	.block-container > &:first-child,
	.block-body--collapsible &:first-child,
	.block-header + &
	{
		border-top: none;
	}

	.block-formSectionHeader-aligner
	{
		@_blockPaddingShift: (unit(@xf-formLabelWidth) / 100) * (@xf-blockPaddingH);

		display: inline-block;
		text-align: right;
		min-width: @xf-formLabelWidth;
		min-width: ~"calc((@{xf-formLabelWidth}) - (@{_blockPaddingShift}) - (@{xf-formRowPaddingHInner}) - (@{xf-borderSize}))";
		max-width: 100%;

		@media (max-width: @xf-formResponsive)
		{
			display: inline;
			text-align: left;
			min-width: 0;
			padding-left: 0;
		}
	}

	@media (max-width: @xf-formResponsive)
	{
		padding-left: @xf-formRowPaddingHOuter;
	}

	.block-formSectionHeader-multiChecker
	{
		float: right;
	}

	&--small
	{
		font-size: @xf-fontSizeNormal;
	}
}

.block-desc,
.blocks-desc
{
	display: block;
	font-size: @xf-fontSizeSmaller;
	font-weight: @xf-fontWeightNormal;
}

.block-body
{
	.m-listPlain();

	&.block-body--collapsible
	{
		.has-no-js & { display: block; }

		.m-transitionFadeDown();
	}

	&.block-body--contained
	{
		overflow: auto;
		max-height: 300px;
		max-height: 70vh;
	}

	&.block-body--containedFixed
	{
		overflow-x: auto;
		max-height: 300px;
	}
}

.block-row
{
	margin: 0;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.m-clearFix();

	&.block-row--toEdge
	{
		padding-left: 0;
		padding-right: 0;
	}

	&.block-row--alt
	{
		.xf-contentAltBase();
	}

	&.block-row--minor
	{
		font-size: @xf-fontSizeSmall;
	}

	&.block-row--separated
	{
		padding-top: (@xf-blockPaddingV) * 2;
		padding-bottom: (@xf-blockPaddingV) * 2;

		+ .block-row
		{
			border-top: @xf-borderSize solid @xf-borderColorLight;
		}
	}

	&.block-row--connectAbove
	{
		padding-bottom: (@xf-blockPaddingV) * 2;

		.block-body > &:last-child
		{
			padding-bottom: @xf-blockPaddingV;
		}
	}

	&.block-row--highlighted
	{
		.xf-contentHighlightBase();
	}

	&.block-row--clickable:hover
	{
		.xf-contentHighlightBase();
	}

	&.is-mod-selected
	{
		background: @xf-inlineModHighlightColor;
	}

	> pre
	{
		&:first-child { margin-top: 0; }
		&:last-child { margin-bottom: 0; }
	}
}

.block-separator
{
	margin: 0;
	padding: 0;
	border: none;
	border-top: @xf-borderSize solid @xf-borderColorLight;
}

.block-footer
{
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.xf-blockFooter();
	.m-clearFix();

	&:first-child
	{
		border: none;
	}

	[data-app=admin] &
	{
		.block-footer-counter,
		.block-footer-select
		{
			line-height: 30px;
		}
	}

	&:not(.block-footer--split)
	{
		.block-footer-counter
		{
			float: left;
		}

		.block-footer-controls
		{
			float: right;
		}
	}

	&.block-footer--split
	{
		display: flex;
		align-items: center;

		.block-footer-main,
		.block-footer-counter
		{
			flex-grow: 1;
		}

		.block-footer-select:not(:last-child)
		{
			margin: 0 1em;
		}

		.block-footer-opposite,
		.block-footer-controls
		{
			margin-left: auto;
		}
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.block-outer
	{
		text-align: center;
	}

	.block-outer-main,
	.block-outer-opposite
	{
		float: none;
		text-align: center;
	}

	.block-outer-main + .block-outer-opposite
	{
		margin-top: @xf-paddingMedium;
	}
}]]></template>
    <template title="core_blockend.less" type="public" addon_id="XF" version_id="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_blocklink.less" type="public" addon_id="XF" version_id="2010470" version_string="2.1.4"><![CDATA[// ############################ BLOCK LINKS ##################

.blockLink
{
	display: block;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.xf-blockLink();

	&.is-selected
	{
		.xf-blockLinkSelected(no-border);
		border-left: @xf-blockLinkSelected--border-width solid @xf-blockLinkSelected--border-color;
		padding-left: (@xf-blockPaddingH - xf-default(@xf-blockLinkSelected--border-width, 0));
	}

	&:hover
	{
		background: @xf-contentAltBg;
		color: @xf-linkColor;
		text-decoration: inherit;
	}
}

.blockLink-desc
{
	display: block;
	color: @xf-textColorMuted;
	font-size: @xf-fontSizeSmaller;
	font-weight: @xf-fontWeightNormal;
}

.blockLinkSplitToggle
{
	display: flex;
	padding: 0;
	text-decoration: none;
	cursor: pointer;

	&.is-selected
	{
		.xf-blockLinkSelected(no-border);
	}

	&:hover
	{
		.xf-blockLinkSelected(background);
		text-decoration: inherit;
	}
}

.blockLinkSplitToggle-link
{
	display: block;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	text-decoration: none;
	flex-grow: 1;

	&:hover
	{
		text-decoration: none;
	}

	.blockLinkSplitToggle.is-selected &
	{
		border-left: @xf-blockLinkSelected--border-width solid @xf-blockLinkSelected--border-color;
		padding-left: (@xf-blockPaddingH - xf-default(@xf-blockLinkSelected--border-width, 0));
	}
}

.blockLinkSplitToggle-toggle
{
	display: inline-block;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	text-decoration: none;
	flex-grow: 0;
	line-height: 1;

	&:hover
	{
		text-decoration: none;
	}

	&:after
	{
		.m-faBase();
		font-size: 80%;
		.m-faContent(@fa-var-chevron-down);
	}

	&.is-active:after
	{
		.m-faContent(@fa-var-chevron-up);
	}
}

.blockLink--iconic
{
	i:after
	{
		.m-faBase();
		display: inline-block;
		min-width: 1em;
		position: absolute;
		left: @xf-blockPaddingH;
		top: 8px;
		display: none !important;
	}

	&--started i:after
	{
		.m-faContent(@fa-var-file-alt);
	}
	&--contributed i:after
	{
		.m-faContent(@fa-var-comments);
	}
	&--watched i:after
	{
		.m-faContent(@fa-var-bookmark);
	}
	&--unanswered i:after
	{
		.m-faContent(@fa-var-question-circle);
	}
}

// ################################ FAUX BLOCK LINKS #######################
// concept from https://codepen.io/BPScott/pen/Erwan and http://codepen.io/IschaGast/pen/Qjxpxo
// z-indexes are bumped to have the link sit on top of positioned elements (without z-index)

.fauxBlockLink
{
	position: relative;

	a,
	.fauxBlockLink-link
	{
		position: relative;
		z-index: 2;
	}

	.fauxBlockLink-blockLink
	{
		position: static;

		&:before
		{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
		}
	}

	&.fauxBlockLink--noHover
	{
		.fauxBlockLink-blockLink:hover
		{
			text-decoration: none;
		}
	}
}]]></template>
    <template title="core_button.less" type="public" addon_id="XF" version_id="2020371" version_string="2.2.3 Patch 1"><![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: fade(xf-default(@xf-buttonDefault--background-color, transparent), 65%);
		padding: 8px 12px;
	}

	&.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: 30px;
	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[// #### Touch Enhancements ####
a:link {
	-webkit-tap-highlight-color: fade(@xf-paletteColor1, 30%);
}

// #### Text Selection ####
::selection { background-color: fade(@xf-paletteColor1, 80%);color: #fff; }
::-moz-selection { background-color: fade(@xf-paletteColor1, 80%);color: #fff; }

// #### Color Select in Redactor ####
.fr-popup .fr-color-set > span:hover {
	transform: scale(1.7,1.7);
}

.link.link--external
{
	color: @xf-paletteAccent1;
	
	&:hover
	{
		color: @xf-paletteColor1;
	}
}

.editorSmilies .smilie {
	opacity: 0.5;
	.m-transition(all, 0.2s);
}
.editorSmilies .smilie: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 {
	padding: @xf-elementSpacer;
}
.p-breadcrumbs--container {
	border-bottom: @xf-borderSize solid @xf-borderColor;
	
	.p-breadcrumbs {
		margin-bottom: 0;
	}
}

.block.block--treeEntryChooser
{
	.block-container
	{
		margin: @xf-paddingLarge @xf-paddingLargest;
	}
}

.block.block--category
{
	.block-header
	{
		.xf-dt_category_header();
	}
}

.p-body-sidebar
{
	.block-minorHeader
	{
		.xf-dt_widget_header();
	}
}

.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();
}]]></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-body-header {
	display: none;
}
</xf:if>

<xf:if is="!property('dt_breadbrumb_index')">
.template-forum_list .p-body-nav .p-title-pageAction
{
	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 {
	-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 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 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();
	
	&::before
	{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: @xf-dt_grad_color1;
		background-image: linear-gradient(90deg, @xf-dt_grad_color1 0%, @xf-dt_grad_color2 100%);
		opacity: .7;
		z-index: 3;
	}
	
	&--container
	{
		position: relative;
		z-index: 4;
	}
	
	&--inner
	{
		width: 100%;
		max-width: @xf-pageWidthMax;
		margin: 0 auto;
	}
	
	<xf:if is="property('dt_guest_message_index')">
	display: none;
	
	.template-forum_list & {
		display: block;
	}
	</xf:if>
}
.p-guest--message h1 {
	font-size: 2.8em;
	margin-top: 0;
}
</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>


// #### 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>


// ######## 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>

// #### 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 {
	.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>



// ######## 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-weight: 300;
			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;
	top: (@xf-publicNavPaddingV * 2) + 20px;
	z-index: 100;
}
@media (max-width: @xf-responsiveMedium)
{
	.block--category .block-header
	{
		top: 0;
	}
}
</xf:if>

<xf:if is="property('dt_catstrips_minorheader')">
.block-subheader {
	display: table;
	table-layout: fixed;
	width: 100%;
	background-color: @xf-contentAltBg;
	color: @xf-textColorDimmed;
	font-size: @xf-fontSizeSmall;
	padding: @xf-paddingLarge;

	span {
		display: table-cell;
		vertical-align: middle;

		&.block-subheader--main {

		}
		&.block-subheader--stats {
			width: 80px;
			text-align: center;
		}
		&.block-subheader--last {
			width: 270px;
			text-align: left;
			padding-left: 15px;
		}
	}
}
.node-stats .pairs.pairs--rows > dt {
	display: none;
}
@media (max-width: 1000px) {
	.block-subheader span.block-subheader--stats {
		display: none;
	}
}
@media (max-width: @xf-responsiveMedium) {
	.block-subheader span.block-subheader--last {
		display: none;
	}
}
</xf:if>

// #### Simplified Node Statics ####
<xf:if is="property('dt_nodestat_simple') AND !property('dt_catstrips_minorheader')">
.node-stats {
	max-width: 100px;
}
.node-stats .pairs.pairs--rows > dd {
	font-size: 1.35em;
}
.node-body .node-stats > dl.pairs.pairs--rows:first-child
{
	border-right: none;
}
</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;
		overflow: hidden;
	}
	.p-body .p-body-main--withSideNav .p-body-content,
	.p-body .p-body-main--withSidebar .p-body-content
	{
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		padding: 0;
		overflow: hidden;
	}
	.p-body .p-body-sidebar
	{
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		margin: 20px -5px 0;
		width: auto;
		height: auto;

		&::after
		{
			display: block;
			content: '';
			height: 0;
			margin: 0 5px;
			min-width: @xf-sidebarWidth;
		}
	}
	.p-body .p-body-sidebar > * {
		margin: 0 ((@xf-pageEdgeSpacer) / 2) @xf-elementSpacer;
		width: 100%;
		min-width: @xf-sidebarWidth;
		flex: 1 1 100%;
	}
}
</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-body-nav 
{
	.collapseTrigger:not(.button)
	{
		background: @xf-paletteColor3;
		color: @xf-textColorEmphasized;
		padding: @xf-paddingLarge;
		border-radius: 13px;
		box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
		margin-left: @xf-paddingLarge;
		
		&: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) {
	.p-body-nav .collapseTrigger:not(.button) {
		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%;
	padding-right: 0;
}
.p-body-main--withSidebar .p-body-sidebar:not(.is-active) {
	width: 0;
	height: 0;
	transform: scale(0);
	opacity: 0;
}
@media (min-width: @xf-responsiveWide) {
	.p-body-main--withSidebar .p-body-content {
		height: 100%;
	}
	.p-body-sidebar {
		height: 100%;
	}
}
</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
		{
			padding: 10px;
			margin: 0 -@xf-paddingLargest -@xf-paddingMedium;
			text-align: right;
			background-color: @xf-contentAltBg;
			color: @xf-textColorDimmed;
			border-top: 1px solid @xf-borderColor;
			font-size: @xf-fontSizeSmall;
			border-bottom-left-radius: @xf-blockBorderRadius;
			border-bottom-left-radius: @xf-blockBorderRadius;
			
			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%;
	color: @xf-textColorDimmed;
	font-size: @xf-fontSizeSmall;
	padding: @xf-paddingLarge;

	span
	{
		display: table-cell;
		vertical-align: middle;

		&.discu-minorHeader--main
		{
			padding: 10px 8px 10px 58px;
		}
		&.discu-minorHeader--stats
		{
			width: 80px;
			text-align: center;
			padding: 10px 8px;
		}
		&.discu-minorHeader--last
		{
			width: 230px;
			text-align: center;
			padding: 10px 8px;
		}
	}
}

.structItemContainer-group
{
	.structItem-cell.structItem-cell--meta
	{
		width: 80px;
		text-align: center;
		
		@media (max-width: @xf-responsiveWide)
		{
			width: 58px;
		}
	}
}

@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:not(.button)
	{
		margin-left: auto;
		
		&:before
		{
			content: "\f3f2";
			font-size: 100%;
		}
	}
}
.stickyItemContainer
{
	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')">
.stickySeparator {
	.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>

// #### 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();
}
</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 {
		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 {
		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;
 
        &.is-active:before
        {
            transform: rotate(-180deg);
        }
        &:before
        {
            content: "\f13a";
            color: @xf-linkColor;
            transition: ease-in transform .3s;
            width: auto;
        }
        &.collapseTrigger--block:before
        {
            float: none;
        }
    }
}
@media (max-width: @xf-messageSingleColumnWidth)
{
    .message-cell
    {
        .collapseTrigger:not(.button)
        {
            display: none;
        }
    }
}
</xf:if>

// #### First Post Uniuqe Background ####
<xf:if is="property('dt_firstpost_customization')">
.message--post.is-first .message-cell.message-cell--main {
	.xf-dt_firstpost_customization();
}
</xf:if>

// #### Thread owner indicator ####
<xf:if is="property('dt_thread_owner') == 'icon'">
.threadOwner__icon
{
	width: 21px;
	height: 21px;
	line-height: 21px;
	background: @xf-paletteAccent2;
	color: @xf-textColorEmphasized;
	font-size: 11px;
	text-align: center;
	border-radius: 50%;
	margin: 0 auto;
	
	@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>
}
.pre-footer-inner {
	width: 100%;
	max-width: @xf-pageWidthMax;
	margin: 0 auto;
	
	@media (min-width: @xf-responsiveMedium) {
		padding: 0 @xf-paddingLarge;
	}
}
.pre-footer--container {
	display: flex;
	flex-wrap: wrap;
	
	@media (min-width: @xf-responsiveWide) {
		margin: 0 -15px;
	}
}
.pre-footer--column {
	flex: 0 0 25%;
	max-width: 25%;
	
	@media (min-width: @xf-responsiveMedium) {
		padding: 0 15px;
	}
	
	h3 {
		.xf-dt_extra_footer_title_css();
	}
}
.pre-footer--content,
.pre-footer .block-container
{
	.xf-dt_extra_footer_content_css();
}
.pre-footer .block-footer
{
	background: none;
	color: @xf-textColorMuted;
	border-color: rgba(255, 255, 255, 0.12);
}
.pre-footer .contentRow-main a,
.pre-footer .username
{
	color: rgba(255, 255, 255, 0.75);
}
.social__icons {
	
	li {
		display: inline-block;
		list-style: none;
		a {
			display: block;
			width: 35px;
			height: 35px;
			line-height: 37px;
			background: @xf-paletteColor1;
			color: #fff;
			text-align: center;
			border-radius: 10px;
			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;
			}
		}
	}
}
.pre-footer--links {
	
	li {
		list-style: none;
		
		a {
			display: block;
			.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();
}

@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: 4px;
}
.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-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::before {
		.m-faBase();
		padding-right: 4px;
	}
	.menu-linkRow[href*="news-feed"]::before {
		.m-faContent(@fa-var-rss, 1em);
	}
	.menu-linkRow[href*="reactions"]::before {
		.m-faContent(@fa-var-thumbs-up, 1em);
	}
	.menu-linkRow[href*="search/member"]::before {
		.m-faContent(@fa-var-comments, 1em);
	}
	.menu-linkRow[href*="account-details"]::before {
		.m-faContent(@fa-var-user, 1em);
	}
	.menu-linkRow[href*="preferences"]::before {
		.m-faContent(@fa-var-cog, 1em);
	}
	.menu-linkRow[href*="signature"]::before {
		.m-faContent(@fa-var-pencil, 1em);
	}
	.menu-linkRow[href*="security"]::before {
		.m-faContent(@fa-var-lock, 1em);
	}
	.menu-linkRow[href*="upgrades"]::before {
		.m-faContent(@fa-var-star, 1em);
	}
	.menu-linkRow[href*="connected-accounts"]::before {
		.m-faContent(@fa-var-user-plus, 1em);
	}
	.menu-linkRow[href*="following"]::before {
		.m-faContent(@fa-var-users, 1em);
	}
	.menu-linkRow[href*="privacy"]::before {
		.m-faContent(@fa-var-user-secret, 1em);
	}
	.menu-linkRow[href*="ignored"]::before {
		.m-faContent(@fa-var-user-times, 1em);
	}
	.menu-linkRow[href*="logout"]::before {
		.m-faContent(@fa-var-sign-out, 1em);
	}
	.menu-linkRow[href*="conversations"]::before {
		.m-faContent(@fa-var-envelope, 1em);
	}
	.menu-linkRow[href*="alerts"]::before {
		.m-faContent(@fa-var-bell, 1em);
	}
}
</xf:if>

// #### Sidebar Glyphs ####

<xf:if is="property('dt_sidebar_glyphs')">

.block[data-widget-id] .block-minorHeader::before {
	.m-faBase();
	padding-right: 4px;
}
.block[data-widget-section="staffMembers"] .block-minorHeader::before {
	.m-faContent(@fa-var-user, 1em);
}
.block[data-widget-section="onlineNow"] .block-minorHeader::before {
	.m-faContent(@fa-var-users, 1.4em);
}
.block[data-widget-definition="new_threads"] .block-minorHeader::before,
.block[data-widget-definition="new_posts"] .block-minorHeader::before {
	.m-faContent(@fa-var-comments, 1em);
}
.block[data-widget-definition="new_profile_posts"] .block-minorHeader::before {
	.m-faContent(@fa-var-commenting, 1em);
}
.block[data-widget-definition="board_totals"] .block-minorHeader::before,
.block[data-widget-definition="online_statistics"] .block-minorHeader::before,
.block[data-widget-definition="forum_statistics"] .block-minorHeader::before,
.block[data-widget-definition="xfmg_gallery_statistics"] .block-minorHeader::before{
	.m-faContent(@fa-var-bar-chart, 1em);
}
.block[data-widget-definition="share_page"] .block-minorHeader::before {
	.m-faContent(@fa-var-share-alt, 1em);
}
.block[data-widget-definition="find_member"] .block-minorHeader::before {
	.m-faContent(@fa-var-search, 1em);
}
.block[data-widget-definition="newest_members"] .block-minorHeader::before {
	.m-faContent(@fa-var-user-circle-o, 1em);
}
.block[data-widget-definition="xfrm_top_resources"] .block-minorHeader::before {
	.m-faContent(@fa-var-bolt, 1em);
}
.block[data-widget-definition="xfrm_latest_reviews"] .block-minorHeader::before {
	.m-faContent(@fa-var-star, 1em);
}
.block[data-widget-key="xfrm_overview_top_authors"] .block-minorHeader::before {
	.m-faContent(@fa-var-user, 1em);
}
.block[data-widget-definition="xfrm_new_resources"] .block-minorHeader::before {
	.m-faContent(@fa-var-download, 1em);
}
.block[data-widget-definition="xfmg_media_slider"] .block-minorHeader::before {
	.m-faContent(@fa-var-picture-o, 1em);
}

.pre-footer--content.-social h3::before {
	.m-faBase();
	.m-faContent(@fa-var-retweet, 1em);
	padding-right: 4px;
}

.pre-footer--content.-links h3::before {
	.m-faBase();
	.m-faContent(@fa-var-link, 1em);
	padding-right: 4px;
}

</xf:if>

// #### Message Glyphs ####

<xf:if is="property('dt_messages_glyphs')">

.actionBar-action.actionBar-action--report::before {
    .m-faContent("@{fa-var-exclamation-triangle}\20");
}
.actionBar-action.actionBar-action--history::before {
    .m-faContent("@{fa-var-history}\20");
}
.actionBar-action.actionBar-action--edit::before {
    .m-faContent("@{fa-var-pencil-square}\20");
}
.actionBar-action.actionBar-action--delete::before {
    .m-faContent("@{fa-var-trash}\20");
}
.actionBar-action.actionBar-action--spam::before {
    .m-faContent("@{fa-var-exclamation-circle}\20");
}
.actionBar-action.actionBar-action--ip::before {
    .m-faContent("@{fa-var-user}\20");
}
.actionBar-action.actionBar-action--warn::before {
    .m-faContent("@{fa-var-exclamation}\20");
}

</xf:if>


// #### Discussion List Icons ####

<xf:if is="property('dt_discussion_glyphs')">

.structItem-parts a.username::before,
.structItem-cell--latest .username::before {
	.m-faBase();
	.m-faContent(@fa-var-user, 1em);
	padding-right: 2px;
}
.structItem-parts .structItem-startDate a::before,
.structItem-cell--latest .structItem-latestDate::before {
	.m-faBase();
	.m-faContent(@fa-var-clock-o, 1em);
	padding-right: 2px;
}

</xf:if>

// #### Member Profiles Tabs Icons ####

<xf:if is="property('dt_profile_tabs_glyphs')">

.block-tabHeader.block-tabHeader--memberTabs .tabs-tab::before {
	.m-faBase();
	padding-right: 4px;
}
.block-tabHeader.block-tabHeader--memberTabs .tabs-tab[aria-controls="profile-posts"]::before {
	.m-faContent(@fa-var-comments-o, 1em);
}
.block-tabHeader.block-tabHeader--memberTabs .tabs-tab[id="latest-activity"]::before {
	.m-faContent(@fa-var-clock-o, 1em);
}
.block-tabHeader.block-tabHeader--memberTabs .tabs-tab[id="recent-content"]::before {
	.m-faContent(@fa-var-pencil-square-o, 1em);
}
.block-tabHeader.block-tabHeader--memberTabs .tabs-tab[id="about"]::before {
	.m-faContent(@fa-var-info-circle, 1em);
}
.block-tabHeader.block-tabHeader--memberTabs .tabs-tab[id="resources"]::before {
	.m-faContent(@fa-var-download, 1em);
}
.block-tabHeader.block-tabHeader--memberTabs .tabs-tab[id="xfmgMedia"]::before {
	.m-faContent(@fa-var-picture-o, 1em);
}
</xf:if>

// #### Member Profiles Tabs Icons ####

<xf:if is="property('dt_account_wrapper_glyphs')">
.template-account_details,
.template-account_alerts,
.template-account_reactions,
.template-account_bookmarks,
.template-account_security,
.template-account_privacy,
.template-account_preferences,
.template-account_signature,
.template-account_following,
.template-account_ignored
{
	.p-body-sideNav {
		.block-container {
			.blockLink::before {
				.m-faBase();
				padding-right: 4px;
			}
			.blockLink[href*="members"]::before {
				.m-faContent(@fa-var-user-circle, 1em);
			}
			.blockLink[href*="alerts"]::before {
				.m-faContent(@fa-var-bell, 1em);
			}
			.blockLink[href*="reactions"]::before {
				.m-faContent(@fa-var-thumbs-up, 1em);
			}
			.blockLink[href*="bookmarks"]::before {
				.m-faContent(@fa-var-bookmark, 1em);
			}
			.blockLink[href*="account-details"]::before {
				.m-faContent(@fa-var-user, 1em);
			}
			.blockLink[href*="security"]::before {
				.m-faContent(@fa-var-lock, 1em);
			}
			.blockLink[href*="privacy"]::before {
				.m-faContent(@fa-var-user-secret, 1em);
			}
			.blockLink[href*="preferences"]::before {
				.m-faContent(@fa-var-cog, 1em);
			}
			.blockLink[href*="signature"]::before {
				.m-faContent(@fa-var-pencil, 1em);
			}
			.blockLink[href*="connected-accounts"]::before {
				.m-faContent(@fa-var-network-wired, 1em);
			}
			.blockLink[href*="following"]::before {
				.m-faContent(@fa-var-users, 1em);
			}
			.blockLink[href*="ignored"]::before {
				.m-faContent(@fa-var-user-times, 1em);
			}
			.blockLink[href*="logout"]::before {
				.m-faContent(@fa-var-sign-out, 1em);
			}
		}
	}
}
</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, .p-body-nav {.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>
}]]></template>
    <template title="core_filter.less" type="public" addon_id="XF" version_id="2020870" version_string="2.2.8"><![CDATA[// ##################### FILTERING #####################

.filterBlock
{
	padding: @xf-paddingMedium;
	font-size: @xf-fontSizeSmaller;
	float: right;
	.xf-contentBase();
	.xf-blockBorder();
	border-radius: @xf-blockBorderRadius;
	.m-clearFix();

	.filterBlock-input
	{
		width: 150px;
		display: inline;
		font-size: @xf-fontSizeSmaller;

		&.filterBlock-input--small
		{
			width: 100px;
		}
	}

	select.filterBlock-input
	{
		width: auto;
	}
}

.quickFilter
{
	position: relative;

	.input
	{
		width: 180px;
		font-size: @xf-fontSizeSmaller;
	}

	label
	{
		font-size: @xf-fontSizeSmaller;
	}

	input[type=checkbox]
	{
		.m-checkboxAligner();
	}

	.js-filterClear
	{
		color: @controlColor;

		&:hover
		{
			color: @controlColor--hover;
		}

		&:before
		{
			.m-faBase();
			.m-faContent(@fa-var-times);
		}
	}
}

.filterBar
{
	display: flex;
}

.filterBar-filters
{
	flex: 1 1 auto;

	display: flex;
	flex-wrap: wrap;
	row-gap: @xf-blockPaddingV;
	// column-gap: @xf-blockPaddingV;

	.m-listPlain();
}

.filterBar-filterToggle
{
	display: flex;
	text-decoration: none;
	color: inherit;
	padding: 1px 8px;
	border-radius: @xf-borderRadiusMedium;
	.m-transition();

	column-gap: 2px;
	margin-right: @xf-blockPaddingV;

	i.fa--xf
	{
		align-self: center;
	}

	&:after
	{
		.m-faBase();
		font-size: 80%;
		vertical-align: bottom;
		.m-faContent(" @{fa-var-times}");
		opacity: .5;
		.m-transition(opacity);
		position: relative;
		bottom: -2px;
	}

	&:hover
	{
		text-decoration: none;

		&:after
		{
			opacity: 1;
		}
	}
}

.filterBar-filterToggle-label
{
	opacity: .75;
	margin-right: 2px;
}

.filterBar-filterToggle-value
{
	max-width: 120px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	&:not(:last-of-type):after
	{
		content: "{$xf.language.comma_separator}";
	}
}

.filterBar-menuTrigger
{
	flex: 0 0 auto;
	margin-left: auto;
	white-space: nowrap;
	border-radius: @xf-borderRadiusMedium;
	text-decoration: none;
	padding: 1px  5px;

	&:after
	{
		.m-menuGadget();
	}
	
	&:hover {
		color: inherit;
	}
}

@media (max-width: @xf-responsiveMedium)
{
	.filterBar-filterToggle-label
	{
		display: none;
	}
}]]></template>
    <template title="core_input.less" type="public" addon_id="XF" version_id="2020970" version_string="2.2.9"><![CDATA[// ###################################### INPUTS ##########################

@_input-numberWidth: 150px;
@_input-numberNarrowWidth: 90px;
@_input-textColor: xf-default(@xf-input--color, @xf-textColor);
@_input-elementSpacer: @xf-paddingMedium;
@_input-checkBoxSpacer: 1.5em;

.m-inputReadOnly()
{
	color: mix(xf-default(@xf-input--color, @xf-textColor), xf-default(@xf-inputDisabled--color, @xf-textColorMuted));
	background: mix(xf-default(@xf-input--background-color, @xf-contentBg), xf-default(@xf-inputDisabled--background-color, @xf-paletteNeutral1));
}

:root
{
	--input-border-heavy: @xf-borderColorHeavy;
	--input-border-light: @xf-borderColorLight;
}

.input:focus,
.input.is-focused,
.inputGroup:focus-within,
#XF .fr-box.fr-basic.is-focused,
.codeEditor.CodeMirror.CodeMirror-focused
{
	--input-border-heavy: xf-intensify(@xf-borderColorHighlight, 5%);
	--input-border-light: xf-diminish(@xf-borderColorHighlight, 3%);
}

.input
{
	.xf-input();
	display: block;
	width: 100%;
	line-height: @xf-lineHeightDefault;
	text-align: left; // this will be flipped in RTL
	word-wrap: break-word;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	.m-transition();
	.m-placeholder({color: fade(@_input-textColor, 40%); });

	&:focus,
	&.is-focused
	{
		outline: 0;
		.xf-inputFocus();
		.m-placeholder({color: fade(@_input-textColor, 50%); });
	}

	&[readonly],
	&.is-readonly
	{
		.m-inputReadOnly();
	}

	&[disabled]
	{
		.xf-inputDisabled();
	}

	&[type=number],
	&.input--number
	{
		text-align: right;
		max-width: @_input-numberWidth;

		&.input--numberNarrow
		{
			width: @_input-numberNarrowWidth;
		}
	}

	&.input--date
	{
		max-width: @_input-numberWidth;
	}

	&.input--flipped
	{
		text-align: right;
	}

	textarea&
	{
		min-height: 0;
		max-height: 400px;
		max-height: 75vh;
		resize: vertical;

		&.input--fitHeight
		{
			resize: none;

			&.input--fitHeight--short
			{
				max-height: 200px;
				max-height: 35vh;
			}
		}

		&.input--code
		{
			overflow-x: auto;
			-ltr-rtl-text-align: left; // force blocks of code back to left align
		}

		&.input--maxHeight-300px
		{
			max-height: 300px;
		}

		.has-js &[rows="1"][data-single-line]
		{
			overflow: hidden;
			resize: none;
		}
	}

	// this makes select inputs consistent across all browsers and OSes
	select&,
	&.input--select
	{
		padding-right: 1em !important;
		.m-selectGadgetColor(@_input-textColor);
		background-size: 1em !important;
		background-repeat: no-repeat !important;
		-ltr-background-position: 100% !important;
		white-space: nowrap;
		word-wrap: normal;
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		appearance: none !important;

		overflow-x: hidden; // iOS seems to require this to prevent overflow with long options...
		overflow-y: auto; // ...and Firefox seems to require this to prevent the above from breaking vertical scroll...

		&[disabled]
		{
			.m-selectGadgetColor(xf-default(@xf-inputDisabled--color, @xf-textColor));
		}

		&[size],
		&[multiple]
		{
			background-image: none !important;
			padding-right: xf-default(@xf-input--padding, 5px) !important;
		}
	}

	&.input--autoSize
	{
		width: auto;
	}

	&.input--inline
	{
		display: inline;
		width: auto;
	}

	&.input--code
	{
		font-family: @xf-fontFamilyCode;
		direction: ltr;
		//white-space: nowrap;
		word-wrap: normal;
	}

	&.input--title
	{
		font-size: @xf-fontSizeLargest;
	}

	&.input--avatarSizeS
	{
		min-height: @avatar-s;
	}

	&.input--passwordHideShow
	{
		::-ms-reveal,
		::-ms-clear
		{
			display: none !important;
		}
	}

	.m-inputZoomFix();

	.fa--inputOverlay + &
	{
		padding-left: 1.7em;
	}
}

// Overlay a FontAwesome icon over the start of a text box as a hint to its use
// Use the 'fa' attribute in XF template syntax for xf:textbox, xf:numberbox and xf:textarea
.fa--xf.fa--inputOverlay
{
	position: absolute;
	padding: (xf-default(@xf-input--padding, 0) + 2) xf-default(@xf-input--padding, 0) xf-default(@xf-input--padding, 0);
	line-height: @xf-lineHeightDefault;
	color: @xf-input--border-top-color;

	//& + .input
	//{
	//	padding-left: xf-default(@xf-input--padding, 0) * 2 + xf-default(@xf-input--font-size, @xf-fontSizeNormal);
	//}
}

// ############################# NEW ICONIC CONTROLS ######################

@controlColor: xf-default(@xf-buttonPrimary--background-color, @xf-paletteColor4);
@controlColor--hover: xf-intensify(@controlColor, 25%);

.iconicIcon(@setPosition: true)
{
	.m-iconicIcon(@setPosition);
}

.iconic
{
	display: inline-block;
	position: relative;
	max-width: 100%;

	> input
	{
		.m-visuallyHidden();
		position: absolute;
		left: 0;
		width: auto;
		height: auto;

		+ i
		{
			.m-iconicIcon();
		}

		& + i:after
		{
			opacity: 0;
		}

		&:disabled + i:before,
		&[readonly] + i:before
		{
			opacity: .3;
		}

		&:disabled:checked + i:after,
		&[readonly]:checked + i:after
		{
			opacity: .3;
		}

		&:checked
		{
			& + i:before
			{
				opacity: 0;
			}

			& + i:after
			{
				opacity: 1;
			}
		}

		&:focus + i
		{
			&:before,
			&:after
			{
				outline: Highlight solid 2px;
				-moz-outline-radius: 5px;

				@media (-webkit-min-device-pixel-ratio: 0)
				{
					outline: -webkit-focus-ring-color auto 5px;
				}
			}
		}
	}

	// handler for labelled inputs - indent the text away from the control
	.iconic-label:before
	{
		content: '';
		display: inline-block;
		width: @_input-checkBoxSpacer - 1em; // min-width of input > i
	}

	&.iconic--hideShow
	{
		min-width: 56px;
		cursor: pointer;

		> input[type=checkbox] + i
		{
			&:before
			{
				.m-faContent(@fa-var-eye);
			}

			&:after
			{
				.m-faContent(@fa-var-eye-slash);
			}
		}

		.iconic-label
		{
			font-size: @xf-fontSizeSmall;
			vertical-align: text-top;
		}
	}

	&.iconic--hiddenLabel .iconic-label:before
	{
		display: none;
	}

	> input[type=checkbox] + i
	{
		&:before { .m-faContent(@fa-var-square, .88em); }
		&:after  { .m-faContent(@fa-var-check-square, .88em); }
	}

	> input[type=radio] + i
	{
		&:before { .m-faContent(@fa-var-circle, 1em); }
		&:after  { .m-faContent(@fa-var-check-circle, 1em); }
	}

	&.iconic--toggle > input[type=checkbox] + i
	{
		&:before { .m-faContent(@fa-var-toggle-off, 1em); }
		&:after  { .m-faContent(@fa-var-toggle-on, 1em); }
	}
}

// Fix position for inputChoices to allow nested indenting


.inputChoices > .inputChoices-choice
{
	position: relative;

	.iconic
	{
		position: static;

		> input + i
		{
			position: absolute;
			left: 0;
		}

		&.iconic--noLabel
		{
			display: inline;
		}
	}

	// undo the normal indenting of text from checkbox
	.iconic-label:before {
		display: none;
	}
}

// Basic control colours for common scenarios

.formRow,
.inputGroup,
.inputChoices,
.block-footer,
.dataList-cell,
.message-cell--extra
{
	.iconic,
	&.dataList-cell--fa > a
	{
		> i, svg
		{
			color: @controlColor;
			fill: currentColor;
		}

		&:hover > i,
		&:hover svg
		{
			color: @controlColor--hover;
			fill: currentColor;
		}
	}
}

// ############################# END ICONIC CONTROLS ######################

.u-inputSpacer
{
	margin-top: @_input-elementSpacer;
}

.inputGroup
{
	display: flex;
	align-items: stretch;
	max-width: 100%;

	.inputGroup-text
	{
		flex-grow: 0;
		display: flex;
		align-items: center;

		white-space: nowrap;
		vertical-align: middle;
		padding: 0 @xf-paddingMedium;

		&:first-child { padding-left: 0; }
		&:last-child { padding-right: 0; }
	}

	.inputGroup-splitter
	{
		display: inline-block;
		width: @_form-elementSpacer;
		flex-shrink: 0;
	}

	.input
	{
		flex-shrink: 1;
		min-width: 0; // firefox bug - https://bugzilla.mozilla.org/show_bug.cgi?id=1021913
	}

	.button
	{
		flex-shrink: 0;
	}

	&:not(.inputGroup--joined)
	{
		.input,
		.button
		{
			+ .input,
			+ .button
			{
				margin-left: @_form-elementSpacer;
			}
		}
	}

	.inputGroup-label
	{
		flex-shrink: 1;
		width: 100%;
		padding: 0 0 @xf-paddingMedium;

		.m-appendColon();
	}

	@media (max-width: @xf-formResponsive)
	{
		.input:not(.input--autoSize):not(.input--numberNarrow)
		{
			width: 100%;
		}
	}

	&.inputGroup--inline
	{
		display: inline-flex;
	}

	&.inputGroup--auto
	{
		.input
		{
			width: auto;
		}
	}

	&.inputGroup--joined
	{
		.input
		{
			border-radius: 0;

			&:first-child
			{
				border-top-left-radius: @xf-input--border-radius;
				border-bottom-left-radius: @xf-input--border-radius;
				border-right: none;
			}

			&:last-child
			{
				border-top-right-radius: @xf-input--border-radius;
				border-bottom-right-radius: @xf-input--border-radius;
				border-left: none;
			}
		}

		.inputGroup-text
		{
			.xf-input(border);
			.xf-input(background);
			text-align: center;
			padding: @xf-paddingSmall @xf-paddingMedium;

			&.inputGroup-text--disabled,
			&.is-disabled,
			&[disabled]
			{
				.xf-inputDisabled();

				a { text-decoration: none; }
			}

			&:first-child
			{
				border-right: 0;
				border-top-left-radius: @xf-input--border-radius;
				border-bottom-left-radius: @xf-input--border-radius;
			}

			&:last-child
			{
				border-left: 0;
				border-top-right-radius: @xf-input--border-radius;
				border-bottom-right-radius: @xf-input--border-radius;
			}
		}

		.input + .inputGroup-text,
		.input + .input,
		.inputGroup-text + .input
		{
			border-left: @xf-borderSize solid var(--input-border-light);
		}

		.inputGroup-text + .inputGroup-text,
		.inputGroup-text + select.input
		{
			border-left: 0;
		}
	}
}

.inputGroup-container > .inputGroup
{
	margin-top: @xf-paddingMedium;

	&:first-child
	{
		margin-top: 0;
	}
}

.inputNumber
{
	.input--number
	{
		-moz-appearance: textfield !important;

		&::-webkit-inner-spin-button,
		&::-webkit-outer-spin-button
		{
			margin: 0 !important;
			-webkit-appearance: none !important;
		}

		@media (max-width: @xf-formResponsive)
		{
			min-width: auto;
			max-width: 120px;
		}
	}
}

.inputNumber-button
{
	position: relative;

	.m-faBase();
	color: @controlColor;
	font-size: 1.0em;
	font-style: normal !important;
	line-height: .75em;
	vertical-align: -15%;

	width: 45px;
	justify-content: center;
	text-align: center;

	cursor: pointer;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	&.inputNumber-button--smaller
	{
		vertical-align: 0;
		width: 35px;
	}

	&--up::before
	{
		.m-faContent(@fa-var-plus, .88em);
	}

	&--down::before
	{
		.m-faContent(@fa-var-minus, .88em);
	}

	.inputGroup.inputGroup--joined &
	{
		&:hover,
		&:active,
		&:focus
		{
			background-color: saturate(xf-intensify(@xf-paletteColor1, 4%), 12%);
			color: @controlColor--hover;
		}
	}

	.input.input--number[readonly] ~ &
	{
		.m-inputReadOnly();
	}

	.input.input--number[disabled] ~ &
	{
		cursor: default;
		.xf-inputDisabled();
	}
}

.inputDate
{
	.inputDate-icon
	{
		position: relative;

		.m-faBase();
		color: @xf-linkColor;
		font-size: 1.0em;
		font-style: normal !important;
		line-height: .75em;
		vertical-align: -15%;

		cursor: pointer;

		width: 45px;
		justify-content: center;
		text-align: center;

		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;

		@media (max-width: @xf-formResponsive)
		{
			vertical-align: 0;
			width: 25px;
		}

		&::before
		{
			.m-faContent(@fa-var-calendar, .88em);
		};
	}
}

.inputUploadButton
{
	position: relative;

	.m-faBase();
	color: @controlColor;
	font-size: 1.0em;
	font-style: normal !important;
	line-height: .75em;
	vertical-align: -15%;

	width: 45px;
	justify-content: center;
	text-align: center;

	cursor: pointer;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	.inputGroup.inputGroup--joined &
	{
		&:hover,
		&:active,
		&:focus
		{
			background-color: saturate(xf-intensify(@xf-paletteColor1, 4%), 12%);
			color: @controlColor--hover;
		}
	}

	&:before
	{
		.m-faContent(@fa-var-upload, 1.25em);
	}

	input[type="file"]
	{
		visibility: hidden;
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		left: -1000px;
		z-index: -1;
		opacity: 0;
	}
}

.inputList
{
	.m-listPlain();

	> li
	{
		margin-top: @xf-paddingMedium;

		&:first-child
		{
			margin-top: 0;
		}
	}
}

.inputPair
{
	.m-clearFix();

	> .input,
	.inputPair-input
	{
		float: right;
		width: 49%; // fallback
		width: ~"calc(50% - 2px)";

		&:first-child
		{
			float: left;
		}
	}
}

.inputPair-container > .inputPair
{
	margin-top: @xf-paddingMedium;

	&:first-child
	{
		margin-top: 0;
	}
}

.inputLabelPair
{
	.m-clearFix();
	margin: @xf-paddingMedium 0;
	padding: 0;

	> dt,
	> dd
	{
		float: left;
		margin: 0;
		padding: 0;
	}

	> dt
	{
		width: 65%;
		padding-right: @xf-paddingMedium;
		padding-top: .6em;

		> label
		{
			.m-appendColon();
		}
	}

	> dd
	{
		width: 35%;
		text-align: right;

		.input
		{
			width: 100%;
			max-width: none;
		}
	}

	@media (max-width: @xf-responsiveNarrow)
	{
		> dt,
		> dd
		{
			width: 50%;
		}
	}
}

.inputChoices
{
	list-style: none;
	padding: 0;
	margin: 0;

	> .inputChoices-choice
	{
		margin-bottom: @_input-elementSpacer;
		padding-left: @_input-checkBoxSpacer;

		&:last-child
		{
			margin-bottom: 0;
		}

		> .inputChoices,
		.inputChoices-spacer
		{
			margin-top: @_input-elementSpacer;
		}
	}

	&.inputChoices--expanded > .inputChoices-choice
	{
		margin-bottom: (2 * @_input-elementSpacer);

		&:last-child
		{
			margin-bottom: 0;
		}
	}

	&.inputChoices--noChoice > .inputChoices-choice,
	.inputChoices-plainChoice
	{
		padding-left: 0;
	}

	&.inputChoices--inline > .inputChoices-choice
	{
		display: inline-block;
		margin-right: @_input-elementSpacer;
		margin-bottom: 0;

		&:last-child
		{
			margin-right: 0;
		}
	}

	.inputChoices-label
	{
		padding-left: 0;
		font-size: @xf-fontSizeSmall;
		color: @xf-textColorMuted;
	}

	+ .inputChoices:not(.inputChoices--inline)
	{
		margin-top: @_input-elementSpacer;
	}
}

.inputChoices-group + .inputChoices-group,
.inputChoices-choice + .inputChoices-group
{
	margin-top: (@xf-paddingMedium) * 2;
}

.inputChoices-spacer + .inputChoices
{
	margin-top: @_input-elementSpacer;
}

.inputChoices-heading
{
	color: @xf-textColorMuted;
	padding-bottom: (@xf-paddingMedium) / 2;
	border-bottom: @xf-borderSize solid @xf-borderColorFaint;
	margin-bottom: @xf-paddingMedium;
	position: relative;

	&.inputChoices-heading--checkAll {
		.iconic {
			position: static;

			& > input + i {
				position: absolute;
				right: 0;
				left: auto;
				width: auto;
			}
		}
	}
}

.inputChoices-explain
{
	.m-formElementExplain();

	&.inputChoices-explain--after
	{
		margin-top: @_input-elementSpacer;
	}
}

.inputChoices-dependencies
{
	list-style: none;
	padding: 0;
	margin: 0;

	> li
	{
		margin-top: @_input-elementSpacer;

		> label
		{
			display: block;
			padding: @xf-paddingSmall 0;

			&.iconic--labelled > input + i
			{
				margin-left: 0;
			}
		}
	}
}

.inputValidationError
{
	margin-top: @xf-paddingMedium;
	padding: @xf-blockPaddingV @xf-blockPaddingH;
	.xf-blockBorder();
	border-radius: @xf-blockBorderRadius;
	border-left: @xf-borderSizeFeature solid @xf-errorFeatureColor;
	background: @xf-errorBg;
	color: @xf-errorColor;

	.m-textColoredLinks();

	.m-hiddenEl(true);

	&:empty
	{
		display: none;
	}

	> ul,
	> ol
	{
		margin-top: 0;
		margin-bottom: 0;
	}
}


@media (max-width: @xf-responsiveNarrow)
{
	.input.input--title
	{
		font-size: @xf-fontSizeLarge;
	}
}]]></template>
    <template title="core_labels.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[.label
{

	display: inline-block;
	padding: 1px .35em;
	border: 1px solid transparent;
	border-radius: @xf-borderRadiusMedium;
	font-size: 80%;
	line-height: ((@xf-lineHeightDefault) * .9);
	text-decoration: none;

	&:hover,
	a:hover &
	{
		text-decoration: none;
	}

	&.label--fullSize
	{
		font-size: 100%;
	}

	&.label--small
	{
		font-size: @xf-fontSizeSmall;
	}

	&.label--smallest
	{
		font-size: @xf-fontSizeSmallest;
	}

	// Label variations

	&.label--hidden
	{
		// this has to essentially undo all the adjustments made by .label
		padding: inherit;
		border: none;
		font-size: inherit;
		line-height: inherit;
		text-decoration: inherit;

		&:hover
		{
			text-decoration: underline;
		}
	}

	&.label--subtle
	{
		.m-labelVariation(@xf-textColorMuted, @xf-contentAltBg);
	}

	&.label--primary
	{
		.m-labelVariation(@xf-textColorEmphasized, @xf-paletteColor1, @xf-paletteColor1);
	}

	&.label--accent
	{
		.m-labelVariation(@xf-textColorAccentContent, @xf-contentAccentBg, @xf-borderColorAccentContent);
	}

	&.label--red { .m-labelVariation(white, #e20000); }
	&.label--green { .m-labelVariation(white, green); }
	&.label--olive { .m-labelVariation(white, olive); }
	&.label--lightGreen { .m-labelVariation(black, #ccf9c8, #bee8ba); }
	&.label--blue { .m-labelVariation(white, #0008e3); }
	&.label--royalBlue { .m-labelVariation(white, royalblue); }
	&.label--skyBlue { .m-labelVariation(white, #7cc3e0); }
	&.label--gray { .m-labelVariation(white, gray); }
	&.label--silver { .m-labelVariation(black, silver); }
	&.label--yellow { .m-labelVariation(black, #ffff91, #e6e687); }
	&.label--orange { .m-labelVariation(black, #ffcb00); }

	&.label--error { .m-labelVariation(#c84448, #fde9e9, #c84448); }
}

.label-append
{
	display: inline-block;
}

.labelLink,
.labelLink:hover
{
	text-decoration: none;
}]]></template>
    <template title="core_menu.less" type="public" addon_id="XF" version_id="2020970" version_string="2.2.9"><![CDATA[// ###################################### MENUS ######################

@_menu-arrowSize: 8px;
@_menu-edgePadding: @xf-pageEdgeSpacer;
@_menu-paddingV: @xf-paddingMedium;
@_menu-closePaddingH: @xf-paddingLarge;
@_menu-paddingH: @xf-paddingLargest;

.menuTrigger
{
	cursor: pointer;

	&:after
	{
		.m-menuGadget();
	}
}

.menuOutsideClicker
{
	position: fixed;
	display: none;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2; // above non set stuff but below anything intentionally set

	&.is-active
	{
		display: block;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
}

.menu
{
	.m-transitionFade();

	position: absolute;
	z-index: @zIndex-2;
	margin: @_menu-arrowSize 0 0;
	min-width: 240px;
	max-width: 320px;
	border-radius: @xf-menuBorderRadius;

	.m-dropShadow(0, 0, 30px, 0, .1);

	&.menu--structural
	{
		margin-top: 0;
	}

	&.menu--superWide
	{
		width: 75%;
		max-width: calc(~'100% - @{xf-pageEdgeSpacer}');
	}

	&.menu--veryWide
	{
		width: 500px;
		max-width: calc(~'100% - @{xf-pageEdgeSpacer}');
	}

	&.menu--wide
	{
		width: 350px;
		max-width: calc(~'100% - @{xf-pageEdgeSpacer}');
	}

	&.menu--medium
	{
		width: 300px;
		max-width: calc(~'100% - @{xf-pageEdgeSpacer}');
	}

	&.menu--potentialFixed
	{
		z-index: @zIndex-4;
	}
}

.menu-arrow
{
	display: none;
	position: absolute;
	width: 0;
	height: 0;
	border: 0 solid transparent;

	top: -@_menu-arrowSize;
	-ltr-rtl-left: 50%;
	-ltr-rtl-margin-left: -@_menu-arrowSize;
	.m-triangleUp(@xf-menuFeatureBorderColor, @_menu-arrowSize);

	.menu--structural &
	{
		top: -@_menu-arrowSize;
	}

	.menu--up &
	{
		display: none;
	}
}

.menu-content
{
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
	.xf-menu();
	border-radius: @xf-menuBorderRadius;

	// potentially fixed menus
	.menu--potentialFixed &
	{
		overflow: auto;
		max-height: 450px;
		max-height: 80vh;
	}

	> :last-child
	{
		border-bottom-left-radius: @xf-menuBorderRadius;
		border-bottom-right-radius: @xf-menuBorderRadius;
	}
}

.menu--pageJump
{
	width: auto;
	min-width: 0;
}

.menu-header
{
	padding: @xf-blockPaddingV @_menu-paddingH;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-menuHeader();

	.m-clearFix();
	.m-hiddenLinks();

	&.menu-header--small
	{
		font-size: @xf-fontSizeNormal;
	}

	&.menu-header--sticky
	{
		position: sticky;
		top: 0;
	}

	.menu-desc
	{
		color: fade(@xf-menuHeader--color, 70);
		.m-textColoredLinks();
	}
}

.menu-desc
{
	display: block;
	font-size: @xf-fontSizeSmaller;
	font-weight: @xf-fontWeightNormal;
}

.menu-tabHeader
{
	padding: 0;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	text-decoration: none;
	.xf-menuTabHeader();
	.m-tabsTogether(xf-default(@xf-menuTabHeader--font-size, @xf-fontSizeNormal));

	.tabs-tab
	{
		padding: @xf-blockPaddingV @_menu-paddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
		border-bottom: @xf-borderSizeFeature solid transparent;

		&:hover
		{
			color: @xf-blockMinorTabHeaderSelected--color;
		}

		&.is-active
		{
			.xf-menuTabHeaderSelected();
		}
	}

	.tabs-text
	{
		padding: @xf-blockPaddingV @_menu-paddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
		border-bottom: @xf-borderSizeFeature solid transparent;
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-menuTabHeader--background-color, transparent),
			xf-default(@xf-menuTabHeader--color, ~""),
			xf-default(@xf-blockMinorTabHeaderSelected--color, ~"")
		);
	}
}

.menu-scroller
{
	overflow: auto;
	max-height: 300px;
	max-height: 60vh;
	-webkit-overflow-scrolling: touch;

	.menu-row + &
	{
		border-top: @xf-borderSize solid @xf-borderColorLight;
	}
}

.menu-row
{
	margin: 0;
	padding: @_menu-paddingV @_menu-paddingH;
	.m-clearFix();

	&.menu-row--alt
	{
		.xf-contentAltBase();
	}

	&.menu-row--highlighted
	{
		background: fade(@xf-contentAltBg, 50%);
		color: @xf-contentAltBase--color;
	}

	&.menu-row--close
	{
		padding-left: @_menu-closePaddingH;
		padding-right: @_menu-closePaddingH;
	}

	&.menu-row--separated
	{
		+ .menu-row
		{
			border-top: @xf-borderSize solid @xf-borderColorLight;
		}
	}

	&.menu-row--clickable:hover
	{
		background: @xf-contentAltBg;
	}

	&:empty
	{
		padding: 0;
	}
}

.menu-linkRow
{
	display: block;
	padding: @_menu-paddingV @_menu-paddingH @_menu-paddingV (@_menu-paddingH) - (@xf-borderSizeFeature);
	.xf-menuLinkRow();

	&.menu-linkRow--alt
	{
		.xf-contentAltBase();
	}

	&.is-selected,
	&:hover,
	&:focus
	{
		.xf-menuLinkRowSelected();

		&:focus
		{
			outline: 0;
		}

		&.is-selected
		{
			border-left-color: @xf-borderColorFeature;
		}
	}

	&.is-hidden
	{
		display: none;
	}

	i[aria-hidden=true]
	{
		font-size: @xf-fontSizeSmall;
		display: inline-block;
		width: 23px; // about 1.75em at this font size

		& ~ .menu-linkRow-hint
		{
			padding-left: 23px;
		}
	}

	&:hover i[aria-hidden=true]:after
	{
		color: @xf-linkHoverColor;
	}
}

.menu-linkRow-hint
{
	font-style: inherit;
	font-size: @xf-fontSizeSmallest;
	color: @xf-textColorMuted;
	display: block;
}

.menu-separator
{
	margin: 0 (@_menu-paddingH) / 2;
	padding: 0;
	border: none;
	border-top: @xf-borderSize solid @xf-borderColorLight;

	&.menu-separator--hard
	{
		margin: 0;
	}

	& + .menu-separator,
	&:last-child
	{
		display: none;
	}
}

.menu-footer
{
	padding: @xf-blockPaddingV @_menu-paddingH;
	.xf-menuFooter();
	.m-clearFix();

	&.menu-footer--close
	{
		padding-left: @_menu-closePaddingH;
		padding-right: @_menu-closePaddingH;
	}

	&:not(.menu-footer--split)
	{
		.menu-footer-counter
		{
			float: left;
		}

		.menu-footer-controls
		{
			float: right;
		}
	}

	&.menu-footer--split
	{
		display: flex;
		align-items: center;

		.menu-footer-main,
		.menu-footer-counter
		{
			flex-grow: 1;
		}

		.menu-footer-select:not(:last-child)
		{
			margin: 0 1em;
		}

		.menu-footer-opposite,
		.menu-footer-controls
		{
			margin-left: auto;
		}
	}
}

.menu .block
{
	margin: 0;

	.block-container
	{
		color: inherit;
		background: none;
		border: none;
		border-radius: 0;

		> .block-header:first-child
		{
			display: none;
		}
	}

	.block-body
	{
		border-radius: 0;
	}
}]]></template>
    <template title="core_offcanvas.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ################################## OFF CANVAS MENU #########################

@_offCanvas-animationLength: (2 * (@xf-animationSpeed));

.offCanvasMenu
{
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: @zIndex-5;
	.m-transition(none; @_offCanvas-animationLength); // needed to keep the children displayed through animation
	.m-transform(scale(1)); // forces instant repaint in iOS

	// every tap on iOS causes a brief highlight, disable it for off canvas menu
	// then restore it for some tappable elements to retain it
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	a
	{
		-webkit-tap-highlight-color: initial;
	}

	&.is-transitioning
	{
		display: block;
	}

	&.is-active
	{
		display: block;
	}

	.offCanvasMenu-hidden
	{
		display: none;
	}

	.offCanvasMenu-shown
	{
		display: block;
	}

	.offCanvasMenu-closer
	{
		float: right;
		cursor: pointer;
		text-decoration: none;
		-webkit-tap-highlight-color: initial;
		padding: @xf-paddingLarge;
		margin: -@xf-paddingLarge;

		&:hover
		{
			text-decoration: none;
		}

		&:after
		{
			.m-faBase();
			.m-faContent(@fa-var-times);
		}
	}

	.block-container,
	.blockMessage
	{
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}
}

.offCanvasMenu-shown
{
	display: none;
}

.offCanvasMenu-backdrop
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, .25);
	opacity: 0;
	.m-transition(all; @_offCanvas-animationLength; ease-in-out);

	.is-active &
	{
		opacity: 1;
	}
}

.offCanvasMenu-content
{
	position: relative;
	width: 280px;
	max-width: 85%;
	height: 100%;
	overflow: auto;
	.m-transition(all; @_offCanvas-animationLength; ease-in-out);
	-webkit-overflow-scrolling: touch;

	.has-os-ios &
	{
		// accounts for iOS deadzone in Safari
		padding-bottom: 44px;
	}

	& when(@ltr)
	{
		.m-dropShadow(2px, 0, 5px, 0, .25);
		.m-transform(translateX(-280px));
	}

	& when(@rtl)
	{
		.m-dropShadow(-2px, 0, 5px, 0, .25);
		.m-transform(translateX(280px));
	}

	.offCanvasMenu--fromOpposite &
	{
		position: absolute;
		right: 0;
		.m-dropShadow(-2px, 0, 5px, 0, .25);
		.m-transform(translateX(280px));
	}

	.is-active &
	{
		.m-transform(translateX(0));
	}

	.p-nav-content {
		margin-bottom: 96px;
	}
}

.offCanvasMenu-header
{
	padding: @xf-paddingLarge;
	margin: 0;
	font-size: @xf-fontSizeLarger;
	font-weight: @xf-fontWeightNormal;

	.m-clearFix();
	.m-hiddenLinks();

	&.offCanvasMenu-header--separated
	{
		margin-bottom: @xf-paddingLarge;
	}
}

.offCanvasMenu-row
{
	padding: @xf-paddingLarge;
}

.offCanvasMenu-separator
{
	padding: 0;
	margin: 0;
	border: none;
	border-top: 1px solid transparent;
}

.offCanvasMenu-link
{
	display: block;
	padding: @xf-paddingLarge;
	font-size: @xf-fontSizeLarge;
	text-decoration: inherit;

	&:hover
	{
		text-decoration: inherit;
	}

	&.offCanvasMenu-link--splitToggle
	{
		position: relative;
		text-decoration: inherit;

		&:before
		{
			content: '';
			position: absolute;
			left: 0;
			top: (@xf-paddingLarge - 4px);
			bottom: (@xf-paddingLarge - 4px);
			width: 0;
			border-left: 1px solid currentColor;
		}

		&:after
		{
			.m-faBase();
			.m-faContent(@fa-var-chevron-down, .88em);
		}

		&.is-active:after
		{
			.m-faContent(@fa-var-chevron-up, .88em);
		}
	}
}

.offCanvasMenu-linkHolder
{
	display: flex;

	&.is-selected
	{
		a
		{
			color: inherit;
		}

		.offCanvasMenu-link:first-child
		{
			padding-left: @xf-paddingLarge;
		}
	}

	.offCanvasMenu-link
	{
		flex-grow: 1;

		&.offCanvasMenu-link--splitToggle
		{
			flex-grow: 0;
		}

		&:hover
		{
			background: none;
		}
	}
}

.offCanvasMenu-list
{
	.m-listPlain();

	> li
	{
		border-top: @xf-borderSize solid transparent;
	}

	&:first-child > li:first-child
	{
		border-top: none;
	}
}

.offCanvasMenu-subList
{
	.m-listPlain();
	.m-transitionFadeDown();

	padding-bottom: @xf-paddingLargest;

	.offCanvasMenu-link
	{
		padding-left: @xf-paddingLarge;
		padding-top: @xf-paddingMedium;
		padding-bottom: @xf-paddingMedium;
		font-size: @xf-fontSizeSmall;
	}
}

.offCanvasMenu-installBanner
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: @xf-paddingLarge @xf-paddingMedium;
	font-size: @xf-fontSizeLarge;
}

.offCanvasMenu--blocks
{
	.offCanvasMenu-content
	{
		.xf-pageBackground();
		color: @xf-textColor;
	}

	.offCanvasMenu-header
	{
		color: @xf-textColorEmphasized;
		background: @xf-contentHighlightBg;
		border-bottom: @xf-borderSize solid @xf-borderColorHeavy;
	}

	.offCanvasMenu-separator
	{
		border-top-color: @xf-borderColor;
	}

	.offCanvasMenu-list > li
	{
		border-top-color: @xf-borderColor;
	}
}

.offCanvasMenu--nav
{
	.offCanvasMenu-content
	{
		background: @xf-paletteColor2;
		color: @xf-textColorEmphasized;

		display: flex;
		flex-direction: column;

		a
		{
			color: inherit;
		}
	}

	.offCanvasMenu-header
	{
		background: @xf-publicHeaderAdjustColor;
		border-bottom: @xf-borderSize solid fadein(@xf-publicHeaderAdjustColor, 10%);
	}

	.offCanvasMenu-list
	{
		border-bottom: @xf-borderSize solid fadein(@xf-publicHeaderAdjustColor, 10%);
	}

	.offCanvasMenu-separator
	{
		border-top-color: fadein(@xf-publicHeaderAdjustColor, 10%);
	}

	.offCanvasMenu-link.offCanvasMenu-link--splitToggle:before
	{
		border-left-color: fadein(@xf-publicHeaderAdjustColor, 1%);
	}

	.offCanvasMenu-linkHolder
	{
		text-decoration: none;

		&:hover
		{
			background: fadeout(@xf-publicHeaderAdjustColor, 6%);
		}

		&.is-selected
		{
			.xf-publicNavSelected(no-border, no-border-radius);

			.offCanvasMenu-link.offCanvasMenu-link--splitToggle:before
			{
				border-left-color: fade(xf-default(@xf-publicNavSelected--color, transparent), 20%);
			}
		}
	}

	.offCanvasMenu-subList
	{
		background: @xf-publicHeaderAdjustColor;

		.offCanvasMenu-link:hover
		{
			text-decoration: none;
			background: @xf-publicHeaderAdjustColor;
		}
	}

	.offCanvasMenu-list > li
	{
		border-top-color: @xf-publicHeaderAdjustColor;
	}

	.offCanvasMenu-installBanner
	{
		margin-top: auto;
		background: @xf-publicHeaderAdjustColor;
		border-top: @xf-borderSize solid fadein(@xf-publicHeaderAdjustColor, 10%);
	}
}]]></template>
    <template title="core_overlay.less" type="public" addon_id="XF" version_id="2020770" version_string="2.2.7"><![CDATA[// #################################### OVERLAYS ################################

.overlay-container
{
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: @zIndex-9;
	background: @xf-overlayMaskColor;
	-webkit-overflow-scrolling: touch;
	opacity: 0;
	.m-transition(opacity);

	&.is-transitioning
	{
		display: block;
	}

	&.is-active
	{
		display: block;
		opacity: 1;
	}
}

.overlay
{
	position: relative;
	margin: 40px auto 10px;
	margin-top: @xf-overlayTopMargin;
	width: 100%;
	max-width: 800px;
	.xf-pageBackground();
	color: @xf-textColor;
	border-radius: @xf-blockBorderRadius;
	.m-dropShadow(0, 5px, 15px, 0, .5);
	outline: none;

	> .overlay-title:first-child,
	.overlay-firstChild
	{
		border-top-left-radius: @xf-blockBorderRadius;
		border-top-right-radius: @xf-blockBorderRadius;
	}

	> .overlay-content > *:last-child,
	.overlay-lastChild
	{
		border-bottom-left-radius: @xf-blockBorderRadius;
		border-bottom-right-radius: @xf-blockBorderRadius;
	}
}

@media (max-width: 820px)
{
	.overlay
	{
		max-width: calc(~'100% - 20px');
	}
}

.overlay-title
{
	.m-clearFix();

	display: none;
	margin: 0;
	font-weight: @xf-fontWeightNormal;
	.xf-overlayHeader();

	.overlay &
	{
		display: block;
	}
}

.overlay-titleCloser
{
	float: right;
	cursor: pointer;
	color: @xf-overlayHeader--color;
	margin-left: 5px;
	text-decoration: none;
	opacity: .5;
	.m-transition();

	&:after
	{
		.m-faBase();
		.m-faContent(@fa-var-times);
	}
	
	&:hover
	{
		color: inherit;
		text-decoration: none;
		opacity: 1;
	}
}

.overlay-content
{
	.m-clearFix();
}

// when displaying a modal, prevent scrolling on the main content but allow it on the overlay
body.is-modalOpen
{
	overflow: hidden !important;

	.overlay-container,
	.offCanvasMenu
	{
		overflow-y: scroll !important;
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.overlay-title
	{
		font-size: @xf-fontSizeLarger;
	}
}

// ############################### OVERLAY/BLOCK NESTING ##############################

.block-container > .tabPanes > li,
.block-container > .block-body,
.block-container > .block-body > .block-row,
.overlay-content
{
	> .blocks > .block > .block-container,
	> .block > .block-container,
	> .blockMessage
	{
		margin-left: 0;
		margin-right: 0;
		border-radius: @xf-blockBorderRadius; // restore the radius that might be removed for some viewports as we're within the overlay
		border-left: none;
		border-right: none;
	}

	> .blocks > .block:first-child,
	> .block:first-child,
	> .blockMessage:first-child
	{
		margin-top: 0;

		.block-outer:not(.block-outer--after)
		{
			border-bottom: @xf-borderSize solid @xf-borderColorLight;
			padding: @xf-blockPaddingV;
		}
	}

	> .blocks > .block:last-child,
	> .block:last-child,
	> .blockMessage:last-child
	{
		margin-bottom: 0;

		.block-outer.block-outer--after
		{
			border-top: @xf-borderSize solid @xf-borderColorLight;
			padding: @xf-blockPaddingV;
		}
	}

	> .blocks > .block:first-child > .block-container,
	> .block:first-child > .block-container,
	> .blockMessage:first-child
	{
		border-top: none;
	}

	> .blocks > .block:last-child > .block-container,
	> .block:last-child > .block-container,
	> .blockMessage:last-child
	{
		border-bottom: none;
	}

	> .blocks > .block:not(:first-child) > .block-container,
	> .block:not(:first-child) > .block-container,
	> .blockMessage:not(:first-child)
	{
		.m-borderTopRadius(0);
	}

	> .blocks > .block:not(:last-child) > .block-container,
	> .block:not(:last-child) > .block-container,
	> .blockMessage:not(:last-child)
	{
		.m-borderBottomRadius(0);
	}
}

.overlay-content
{
	> .blocks > .block > .block-container,
	> .block > .block-container,
	> .blockMessage
	{
		.m-borderTopRadius(0);
	}

	> .blocks > .block > .block-container,
	> .block > .block-container
	{
		> :first-child
		{
			.m-borderTopRadius(0);
		}

		> .block-body:first-child > .formRow:first-child
		{
			> dt { border-top-left-radius: 0; }
			> dd { border-top-right-radius: 0; }
		}

		> .dataList:first-child
		{
			tbody:first-child .dataList-row:first-child,
			thead:first-child .dataList-row:first-child
			{
				> .dataList-cell:first-child { border-top-left-radius: 0; }
				> .dataList-cell:last-child { border-top-right-radius: 0; }
			}
		}
	}

	> .block:last-child > .block-container > .formSubmitRow:not(.is-sticky):last-child .formSubmitRow-bar
	{
		border-bottom-left-radius: @block-borderRadius-inner;
		border-bottom-right-radius: @block-borderRadius-inner;
	}
}]]></template>
    <template title="core_pagenav.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[// ####################################### PAGE NAVIGATION ########################

@_page-paddingV: xf-default(@xf-buttonBase--padding-top, 6px);
@_page-paddingH: 8px;
@_page-paddingHSimple: 10px;

.pageNavWrapper {}

.m-pageNavElCore()
{
	background: @xf-paletteColor1;
	color: @xf-textColorEmphasized;
	font-size: @xf-fontSizeSmall;
	white-space: nowrap;

	&:hover,
	&:active
	{
		background: @xf-paletteAccent1;
		text-decoration: none;
	}
}

.pageNav-jump
{
	display: inline-block;
	.m-pageNavElCore();
	border-radius: @xf-borderRadiusSmall;
	padding: @_page-paddingV @_page-paddingH;

	&:hover {
		color: @xf-textColorEmphasized;
	}
	
	&.pageNav-jump--prev:before,
	&.pageNav-jump--next:after
	{
		.m-faBase('Pro', @faWeight-solid);
		font-size: 80%;
		unicode-bidi: isolate; // maintain position in RTL with LTR text
	}

	&.pageNav-jump--prev:before
	{
		.m-faContent("@{fa-var-caret-left}\00a0", false, ltr); // .61em
		.m-faContent("@{fa-var-caret-right}\00a0", false, rtl); // .61em
	}

	&.pageNav-jump--next:after
	{
		.m-faContent("\00a0@{fa-var-caret-right}", false, ltr); // .61em
		.m-faContent("\00a0@{fa-var-caret-left}", false, rtl); // .61em
	}
}

.pageNav-main
{
	.m-listPlain();
	display: inline-table;
}

.pageNav-page
{
	display: table-cell;
	.m-pageNavElCore();

	&:not(:last-child)
	{
		border-right: none;
	}

	&:not(:first-child)
	{
		border-left-color: @xf-borderColorLight;
	}

	&:first-child
	{
		.m-borderLeftRadius(@xf-borderRadiusSmall);
	}

	&:last-child
	{
		.m-borderRightRadius(@xf-borderRadiusSmall);
	}

	> a
	{
		display: block;
		padding: @_page-paddingV @_page-paddingH;
		text-decoration: none;
		color: inherit;
	}

	&.pageNav-page--current
	{
		background: @xf-contentAccentBg;
		color: @xf-textColorEmphasized;
		cursor: pointer;

		&:hover,
		&:active
		{
			background: @xf-paletteColor1;
		}

		+ .pageNav-page
		{
			border-left: none;
		}
	}
}

// Hide relative page numbers on narrow devices when we have a skip entry as we don't necessarily have space.
@media (max-width: @xf-responsiveNarrow)
{
	.pageNav--skipStart
	{
		.pageNav-page.pageNav-page--earlier
		{
			display: none;
		}
	}

	.pageNav--skipEnd
	{
		.pageNav-page.pageNav-page--later
		{
			display: none;
		}

		.pageNav-page.pageNav-page--skipEnd
		{
			border-left: none;
		}
	}
}

// ########################### SIMPLE PAGE NAV VARIANT ########################

.pageNavSimple
{
	display: inline-flex;
}

.pageNavSimple-el
{
	display: inline-block;
	border-radius: @xf-borderRadiusSmall;
	padding: @_page-paddingV @_page-paddingHSimple;
	font-size: @xf-fontSizeSmall;
	text-align: center;
	white-space: nowrap;
	margin-right: 4px;

	&:last-child
	{
		margin-right: 0;
	}

	&.pageNavSimple-el--current
	{
		.xf-contentAccentBase();

		&:hover,
		&:active
		{
			background: xf-intensify(@xf-contentAccentBg, 3%);
			text-decoration: none;
		}
	}

	&.pageNavSimple-el--prev,
	&.pageNavSimple-el--next
	{
		.xf-contentHighlightBase();
		min-width: 75px;

		@media (max-width: 350px)
		{
			min-width: 0;
		}

		&:hover,
		&:active
		{
			background: xf-intensify(@xf-contentHighlightBg, 3%);
			text-decoration: none;
		}

		i:before
		{
			.m-faBase('Pro', @faWeight-solid);
		}
	}

	&.pageNavSimple-el--prev i:before
	{
		.m-faContent(@fa-var-caret-left, false, ltr); // , .44em
		.m-faContent(@fa-var-caret-right, false, rtl); // , .44em
	}

	&.pageNavSimple-el--next i:before
	{
		.m-faContent(@fa-var-caret-right, false, ltr); // , .44em
		.m-faContent(@fa-var-caret-left, false, rtl); // , .44em
	}

	&.pageNavSimple-el--first,
	&.pageNavSimple-el--last
	{
		border-color: transparent;
		padding-left: (@_page-paddingHSimple / 2);
		padding-right: (@_page-paddingHSimple / 2);
		color: fade(@xf-linkColor, 60%);

		&:hover,
		&:active
		{
			.xf-blockBorder();
			background: xf-intensify(@xf-contentHighlightBg, 3%);
			color: @xf-contentHighlightBase--color;
			text-decoration: none;
		}

		i:before
		{
			.m-faBase('Pro', @faWeight-solid);
		}
	}

	&.pageNavSimple-el--first i:before
	{
		.m-faContent(@fa-var-backward, false, ltr); // 1em
		.m-faContent(@fa-var-forward, false, rtl); // 1em
	}

	&.pageNavSimple-el--last i:before
	{
		.m-faContent(@fa-var-forward, false, ltr); // 1em
		.m-faContent(@fa-var-backward, false, rtl); // 1em
	}

	&.is-disabled
	{
		border-color: transparent;
		background: none;
		color: @xf-textColorMuted;
		text-decoration: none;
		pointer-events: none;

		&:hover
		{
			background: none;
			color: @xf-textColorMuted;
		}
	}
}

// #################### DISPLAY VARIANTS #########################

.pageNavWrapper--simple
{
	.pageNav
	{
		display: none;
	}
}

.pageNavWrapper--full
{
	.pageNavSimple
	{
		display: none;
	}
}

.pageNavWrapper--mixed
{
	.pageNavSimple
	{
		display: none;
	}

	@media (max-width: @xf-responsiveMedium)
	{
		.pageNav
		{
			display: none;
		}

		.pageNavSimple
		{
			display: inline-flex;
		}
	}
}

// Hide any block page nav that goes before the block as we will be wasting vertical space.
@media (max-width: @xf-responsiveNarrow)
{
	.block-outer:not(.block-outer--after) .pageNavWrapper:not(.pageNavWrapper--forceShow)
	{
		display: none;
	}

	// this is a sanity check in case .block-outer--after is forgotten
	.block-container + .block-outer .pageNavWrapper
	{
		display: block;
	}
}]]></template>
    <template title="core_pikaday.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2"><![CDATA[@pd-text-color: @xf-textColor;
@pd-title-color: @xf-linkColor;
@pd-title-bg: @xf-contentBg;
@pd-picker-bg: @xf-contentBg;
@pd-picker-border: @xf-borderColor;
@pd-picker-border-radius: @xf-borderRadiusMedium;
@pd-th-color: @xf-textColorDimmed;
@pd-day-color: @xf-textColor;
@pd-day-bg: @xf-contentAltBg;
@pd-day-hover-color: @xf-textColorEmphasized;
@pd-day-hover-bg: @xf-contentAccentBg;
@pd-day-today-color: @xf-textColorFeature;
@pd-day-selected-color: @xf-textColorEmphasized;
@pd-day-selected-bg: @xf-contentHighlightBg;
@pd-day-selected-shadow: transparent;
@pd-day-disabled-color: @xf-textColor;
@pd-week-color: @xf-textColorMuted;
@pd-range-color: @xf-textColorAccentContent;
@pd-range-bg: @xf-contentAccentBg;
@pd-range-border: @xf-borderColorAccentContent;

.pika-single {
	z-index: 9999;
	display: block;
	position: relative;
	color: @pd-text-color;
	background: @pd-picker-bg;
	border: 1px solid;
	border-color: @pd-picker-border;
	border-radius: @pd-picker-border-radius;

	&.is-hidden {
		display: none;
	}

	&.is-bound {
		position: absolute;
		.m-dropShadow(0, 5px, 10px, 0, .25);
	}
}

// clear child float (pika-lendar), using the famous micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
.pika-single {
	*zoom: 1;

	&:before,
	&:after {
		content: " ";
		display: table;
	}

	&:after { clear: both }
}

.pika-lendar {
	float: left;
	width: 240px;
	margin: 8px;
}

.pika-title {
	position: relative;
	text-align: center;

	select {
		cursor: pointer;
		position: absolute;
		z-index: 9998;
		margin: 0;
		left: 0;
		top: 5px;
		filter: alpha(opacity=0);
		opacity: 0;
	}
}

.pika-label {
	display: inline-block;
	*display: inline;
	position: relative;
	z-index: 9999;
	overflow: hidden;
	margin: 0;
	padding: 5px 3px;
	font-size: 14px;
	line-height: 20px;
	font-weight: bold;
	color: @pd-title-color;
	background-color: @pd-title-bg;
}

.pika-prev,
.pika-next
{
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	background: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 30px;
	white-space: nowrap;
	overflow: hidden;
	opacity: .5;
	font-size: 0;
	color: @pd-title-color;
	background-color: @pd-title-bg;

	&::before
	{
		.m-faBase();
		font-size: @xf-fontSizeLarge;
		vertical-align: middle;
		display: inline-block;
		margin: -4px 6px -4px 0;
	}

	&:hover {
		opacity: 1;
	}

	&.is-disabled {
		cursor: default;
		opacity: .2;
	}
}

.pika-prev
{
	&::before
	{
		.m-faContent(@fa-var-caret-left, .4375em, ltr);
		.m-faContent(@fa-var-caret-right, .4375em, rtl);
	}
}

.pika-next
{
	&::before
	{
		.m-faContent(@fa-var-caret-right, .4375em, ltr);
		.m-faContent(@fa-var-caret-left, .4375em, rtl);
	}
}

.pika-prev {
	float: left;
	*left: 0;
}

.pika-next {
	float: right;
	*right: 0;
}

.pika-select {
	display: inline-block;
	*display: inline;
}

.pika-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;

	th,
	td {
		width: 14.285714285714286%;
		padding: 0;
	}

	th {
		color: @pd-th-color;
		font-size: 12px;
		line-height: 25px;
		font-weight: bold;
		text-align: center;
	}

	abbr {
		border-bottom: none;
	}
}

.pika-button {
	cursor: pointer;
	display: block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
	border: 0;
	margin: 0;
	width: 100%;
	padding: 5px;
	color: @pd-day-color;
	font-size: 12px;
	line-height: 15px;
	text-align: right;
	background: @pd-day-bg;

	.is-today & {
		color: @pd-day-today-color;
		font-weight: bold;
	}

	.is-inrange &,
	.is-startrange &,
	.is-endrange & {
		color: @pd-range-color;
		background: @pd-range-bg;
	}

	.is-startrange &
	{
		.m-borderLeftRadius(3px);
		border-left: 2px solid @pd-range-border;
	}

	.is-endrange &
	{
		.m-borderRightRadius(3px);
		border-right: 2px solid @pd-range-border;
	}

	.is-selected & {
		color: @pd-day-selected-color;
		font-weight: bold;
		background: @pd-day-selected-bg;
		box-shadow: inset 0 1px 3px @pd-day-selected-shadow;
		border-radius: 3px;
	}

	.is-disabled &,
	.is-outside-current-month & {
		pointer-events: none;
		cursor: default;
		color: @pd-day-disabled-color;
		opacity: .3;
	}

	&:hover {
		color: @pd-day-hover-color;
		background: @pd-day-hover-bg;
		box-shadow: none;
		border-radius: 3px;
	}
}

.pika-week {
	font-size: 11px;
	color: @pd-week-color;
}

.pika-time-container {
	clear: both;
}

.pika-time {
	margin: 7px auto 7px;
}]]></template>
    <template title="core_tab.less" type="public" addon_id="XF" version_id="2020970" version_string="2.2.9"><![CDATA[// ################################## TABS ####################################

.tabs
{
	display: flex;

	&.tabs--wrappable
	{
		flex-wrap: wrap;
	}

	&.tabs--right
	{
		float: right;
		position: relative;
		margin-left: auto;
		align-self: center;
		white-space: nowrap;
	}
}

.tabs-tab
{
	display: inline-block;
	cursor: pointer;
	white-space: nowrap;
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
	.m-transition();

	&:hover
	{
		text-decoration: none;
	}
}

.tabs-extra
{
	position: relative;
	margin-left: auto;
	padding: 0 @xf-blockPaddingH 0 @xf-paddingMedium;
	align-self: center;
	white-space: nowrap;

	&.tabs-extra--minor
	{
		font-size: @xf-fontSizeSmall;
	}

	a
	{
		color: inherit;
		text-decoration: none;
		display: block;
		padding: @xf-paddingMedium;
		margin-right: -@xf-paddingMedium;
	}
}

.tabPanes
{
	.m-listPlain();

	> li
	{
		display: none;

		&.is-active
		{
			display: block;
		}
	}
}

// ################################# OUTER TABS #########################

.tabs--standalone
{
	padding: 0;
	margin-bottom: @xf-elementSpacer;
	font-weight: @xf-fontWeightNormal;
	.xf-blockBorder();
	.xf-standaloneTab();
	.m-tabsTogether(xf-default(@xf-standaloneTab--font-size, @xf-fontSizeNormal));

	&.tabs--standalone--closer
	{
		margin-bottom: @xf-paddingMedium;
	}

	&.tabs--standalone--small
	{
		.m-tabsTogether(@xf-fontSizeSmall);
	}

	&.tabs--standalone--inline
	{
		display: inline-block;
		margin-bottom: 0;
	}

	.tabs-tab
	{
		padding: @xf-paddingLargest @xf-elementSpacer;
		border-bottom: @xf-borderSizeFeature solid transparent;

		&:hover
		{
			color: @xf-standaloneTabSelected--color;
		}

		&.is-active
		{
			.xf-standaloneTabSelected();
		}
	}

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-standaloneTab--background-color, transparent),
			xf-default(@xf-standaloneTab--color, ~""),
			xf-default(@xf-standaloneTabSelected--color, ~"")
		);
	}
}

@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
	.tabs--standalone
	{
		margin-left: -@xf-pageEdgeSpacer;
		margin-right: -@xf-pageEdgeSpacer;
		border-radius: 0;

		.tabs--standalone:not(.tabs--right)
		{
			border-left: none;
			border-right: none;
		}

		.tabs--right&
		{
			margin: 0;
		}
	}
}]]></template>
    <template title="core_tooltip.less" type="public" addon_id="XF" version_id="2010770" version_string="2.1.7"><![CDATA[// ######################################### TOOLTIPS #######################################

@_tooltip-arrowSize: 5px;
@_tooltip-arrowSizeLarge: 10px;
@_tooltip-zIndex: @zIndex-3;

.tooltip
{
	position: absolute;
	z-index: @_tooltip-zIndex;
	line-height: @xf-lineHeightDefault;
	padding: 0 5px;
	display: none;

	&.tooltip--basic
	{
		max-width: 300px;

		// Tooltip positioning is literal.
		&.tooltip--top
		{
			margin-bottom: 3px;
			padding-bottom: @_tooltip-arrowSize;
		}
		&.tooltip--right
		{
			-ltr-rtl-margin-left: 3px;
			-ltr-rtl-padding-left: @_tooltip-arrowSize;
		}
		&.tooltip--bottom
		{
			margin-top: 3px;
			padding-top: @_tooltip-arrowSize;

			.has-touchevents &.tooltip--selectToQuote
			{
				margin-top: .75em;
			}
		}
		&.tooltip--left
		{
			-ltr-rtl-margin-right: 3px;
			-ltr-rtl-padding-right: @_tooltip-arrowSize;
		}

		.m-textColoredLinks();
	}

	&.tooltip--noninteractive
	{
		pointer-events: none;
	}

	&.tooltip--description
	{
		max-width: 350px;
	}

	&.tooltip--selectToQuote
	{
		.m-hiddenLinks();
	}

	&.tooltip--preview
	{
		max-width: 100%;
		width: 400px;
	}

	&.tooltip--member
	{
		max-width: 100%;
		width: 450px;
		padding: 0 10px;
	}

	&.tooltip--reaction
	{
		max-width: 100%;
		padding: 0 15px;
		margin: 5px 0;
	}

	&.tooltip--bookmark,
	&.tooltip--share
	{
		max-width: 100%;
		width: 340px;
		padding: 0 15px;
	}

	&.tooltip--bookmark,
	&.tooltip--member,
	&.tooltip--preview,
	&.tooltip--share
	{
		// Tooltip positioning is literal.
		&.tooltip--top { padding-bottom: @_tooltip-arrowSizeLarge; }
		&.tooltip--right { -ltr-rtl-padding-left: @_tooltip-arrowSizeLarge; }
		&.tooltip--bottom { padding-top: @_tooltip-arrowSizeLarge; }
		&.tooltip--left { -ltr-rtl-padding-right: @_tooltip-arrowSizeLarge; }
	}
}
.tooltip-content
{
	.tooltip--basic &
	{
		text-align: center;
		.xf-tooltip();
	}

	.tooltip--description &
	{
		text-align: left;
	}

	.tooltip--preview &
	{
		.xf-contentBase();
		padding: @xf-paddingMedium;
		text-align: left;
		border: 1px solid @xf-borderColor;
		border-radius: @xf-blockBorderRadius;

		.m-dropShadow(0, 5px, 10px, 0, .15);
	}

	.tooltip--bookmark &,
	.tooltip--member &,
	.tooltip--share &
	{
		.xf-contentBase();
		padding: 0;
		text-align: left;
		border: 1px solid @xf-borderColor;
		border-radius: @xf-blockBorderRadius;

		.m-dropShadow(0, 5px, 10px, 0, .15);
	}

	.tooltip--reaction &
	{
		.xf-contentBase();
		padding: 0;
		text-align: center;
		border: 1px solid @xf-borderColor;
		border-radius: @xf-borderRadiusLarge;
	}
}

.tooltip-content-inner
{
	position: relative;

	.tooltip--basic &
	{
		max-height: 200px;
		overflow: hidden;
	}

	.tooltip--preview &
	{
		max-height: 200px;
		overflow: hidden;

		.tooltip-content-cover
		{
			.m-gradient(fade(@xf-contentBg, 0%), @xf-contentBg, transparent, 160px, 200px);
		}
	}

	.tooltip-content-cover
	{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
}

// Tooltip side positioning is literal.
/* XF-RTL:disable */
.tooltip-arrow
{
	position: absolute;
	width: 0;
	height: 0;
	border: 0 solid transparent;

	.m-tooltipArrow(
		xf-default(@xf-tooltip--background-color, transparent),
		@_tooltip-arrowSize,
		~'.tooltip--basic'
	);

	@classes: tooltip--preview tooltip--member tooltip--share tooltip--bookmark;
	.m-tooltipArrowList(@xf-borderColor, @_tooltip-arrowSizeLarge + 1px, @classes, @xf-contentBg);

	.tooltip--member.tooltip--bottom &:after
	{
		.m-triangleUp(xf-default(@xf-memberTooltipHeader--background-color, transparent), @_tooltip-arrowSizeLarge);
	}
}

.m-tooltipArrowList(@color, @size, @classes, @fillColor: false)
{
	.variations(@classes, @i: 1) when (@i <= length(@classes))
	{
		@variation: extract(@classes, @i);

		.m-tooltipArrow(@color, @size, ~'.@{variation}', @fillColor);

		.variations(@classes, @i + 1);
	}

	.variations(@classes);
}
/* XF-RTL:enable */

.tooltipCover
{
	display: none;
	position: absolute;
	opacity: 0;
	z-index: (@_tooltip-zIndex - 1);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	&.is-active
	{
		display: block;
	}
}]]></template>
    <template title="dt_extra.less" type="public" addon_id="" version_id="0" version_string=""><![CDATA[.p-body-nav
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	.xf-contentBase();
	.xf-blockBorder();
	padding: @xf-paddingLarge @xf-paddingLargest;
	border-radius: @xf-blockBorderRadius;
	margin-bottom: @xf-elementSpacer;
}

.p-navgroup-link--search
{
	.p-navgroup-linkText
	{
		display: none;
	}
}

.block.block--category
{
	.block-container
	{
		background: none;
		border: none;
	}
}

.p-body-sidebar
{
	.block-container
	{
		border-radius: 8px;
	}
	
	.block-row
	{
		padding: @xf-paddingMedium @xf-paddingLargest;
	}
}

.block.block--treeEntryChooser
{
	.block-row.block-row--clickable:hover
	{
		background: @xf-contentAltBg;
	}
}

.template-forum_view .p-body-nav .p-title-pageAction,
.template-xfrm_overview .p-body-nav .p-title-pageAction,
.template-xfmg_media_index .p-body-nav .p-title-pageAction
{
	display: none;
}

.select2-results__options li
{
	.xf-menuLinkRow();
}

.select2-container .select2-results__option.select2-results__option--highlighted
{
	.xf-menuLinkRowSelected();
}

.node-icon i.fa-comments::before
{
	content: "\f4a6";
}

.menu .alert.is-unread
{
	.xf-contentAltBase();
}]]></template>
    <template title="dt_sidebar_login" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if contentcheck="true">
	<div class="blockMessage blockMessage--error blockMessage--iconic">
		<xf:contentcheck>{$error}</xf:contentcheck>
	</div>
</xf:if>

<div class="blocks blocks--login">
	<xf:form action="{{ link('login/login') }}" class="block">
		<div class="block-container">
			<h3 class="block-minorHeader">
				{{ phrase('log_in') }}
			</h3>
			<div class="block-body">
				<div class="block-row">
				<xf:textboxrow name="login" value="{$login}" autocomplete="username"
					label="{{ phrase('your_name_or_email_address') }}" />

				<xf:textboxrow name="password" type="password" autocomplete="current-password"
					label="{{ phrase('password') }}">

					<xf:html>
						<a href="{{ link('lost-password') }}" data-xf-click="overlay">{{ phrase('forgot_your_password') }}</a>
					</xf:html>
				</xf:textboxrow>

				<xf:if is="$captcha">
					<xf:captcharow label="{{ phrase('verification') }}" force="true" />
				</xf:if>

				<xf:checkboxrow>
					<xf:option name="remember" selected="true">{{ phrase('stay_logged_in') }}</xf:option>
				</xf:checkboxrow>
					<xf:submitrow icon="login" />
					
				<xf:if is="$xf.options.registrationSetup.enabled">
					<div class="block-outer block-outer--after block-outer--register">
						<div class="block-outer-middle">
							{{ phrase('dont_have_account_question') }} <xf:button href="{{ link('register') }}">{{ phrase('register_now') }}</xf:button>
						</div>
					</div>
				</xf:if>
					
				</div>
			</div>
			
		</div>

	</xf:form>
</div>]]></template>
    <template title="extra_footer" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<div class="pre-footer">
	<div class="pre-footer-inner">
		<div class="pre-footer--container">
			<div class="pre-footer--column">
				<xf:if is="property('dt_extra_footer_first_column') == 'option1'">
					<xf:widget key="forum_overview_members_online" />

				<xf:elseif is="property('dt_extra_footer_first_column') == 'option2'" />
					<xf:widget key="forum_overview_forum_statistics" />

				<xf:elseif is="property('dt_extra_footer_first_column') == 'option3'" />
					<xf:widget key="forum_overview_share_page" />

				<xf:elseif is="property('dt_extra_footer_first_column') == 'option4'" />
					<xf:widget key="online_list_online_statistics" />

				<xf:elseif is="property('dt_extra_footer_first_column') == 'option5'" />
					<xf:widget key="forum_overview_new_profile_posts" />

				<xf:elseif is="property('dt_extra_footer_first_column') == 'option6'" />
					<xf:widget key="forum_overview_new_posts" />

				<xf:elseif is="property('dt_extra_footer_first_column') == 'option7'" />
					<xf:widget key="member_wrapper_newest_members" />

				<xf:elseif is="property('dt_extra_footer_first_column') == 'option8'" />
					<div class="pre-footer--content -social">
						<h3>{{ property('dt_extra_footer_social_title') }}</h3>
						<ul class="social__icons">
							<xf:if is="property('dt_extra_footer_facebook')"><li><a href="https://www.facebook.com/{{ property('dt_extra_footer_facebook') }}" target="_blank" class="-facebook"><i class="fab fa-facebook"></i></a></li></xf:if>
							<xf:if is="property('dt_extra_footer_twitter')"><li><a href="https://twitter.com/{{ property('dt_extra_footer_twitter') }}" target="_blank" class="-twitter"><i class="fab fa-twitter"></i></a></li></xf:if>
							<xf:if is="property('dt_extra_footer_instagram')"><li><a href="https://instagram.com/{{ property('dt_extra_footer_instagram') }}" target="_blank" class="-instagram"><i class="fab fa-instagram"></i></a></li></xf:if>
							<xf:if is="property('dt_extra_footer_youtube')"><li><a href="http://www.youtube.com/c/{{ property('dt_extra_footer_youtube') }}" target="_blank" class="-youtube"><i class="fab fa-youtube"></i></a></li></xf:if>
						</ul>
					</div>

				<xf:elseif is="property('dt_extra_footer_first_column') == 'option9'" />
					<div class="pre-footer--content">
						<h3>{{ property('dt_extra_footer_custom_html_title') }}</h3>
						<div class="pre-footer-html--content">
							{{ property('dt_extra_footer_custom_html') }}
						</div>
					</div>

				<xf:elseif is="property('dt_extra_footer_first_column') == 'option10'" />
					<div class="pre-footer--content -links">
						<h3>{{ property('dt_extra_footer_link_1_title') }}</h3>
						<ul class="pre-footer--links">
							{{ property('dt_extra_footer_link_1') }}
						</ul>
					</div>

				<xf:elseif is="property('dt_extra_footer_first_column') == 'option11'" />
					<div class="pre-footer--content -links">
						<h3>{{ property('dt_extra_footer_link_2_title') }}</h3>
						<ul class="pre-footer--links">
							{{ property('dt_extra_footer_link_2') }}
						</ul>
					</div>
				</xf:if>
			</div>
			<div class="pre-footer--column">
				<xf:if is="property('dt_extra_footer_second_column') == 'option1'">
					<xf:widget key="forum_overview_members_online" />

				<xf:elseif is="property('dt_extra_footer_second_column') == 'option2'" />
					<xf:widget key="forum_overview_forum_statistics" />

				<xf:elseif is="property('dt_extra_footer_second_column') == 'option3'" />
					<xf:widget key="forum_overview_share_page" />

				<xf:elseif is="property('dt_extra_footer_second_column') == 'option4'" />
					<xf:widget key="online_list_online_statistics" />

				<xf:elseif is="property('dt_extra_footer_second_column') == 'option5'" />
					<xf:widget key="forum_overview_new_profile_posts" />

				<xf:elseif is="property('dt_extra_footer_second_column') == 'option6'" />
					<xf:widget key="forum_overview_new_posts" />

				<xf:elseif is="property('dt_extra_footer_second_column') == 'option7'" />
					<xf:widget key="member_wrapper_newest_members" />

				<xf:elseif is="property('dt_extra_footer_second_column') == 'option8'" />
					<div class="pre-footer--content -social">
						<h3>{{ property('dt_extra_footer_social_title') }}</h3>
						<ul class="social__icons">
							<xf:if is="property('dt_extra_footer_facebook')"><li><a href="https://www.facebook.com/{{ property('dt_extra_footer_facebook') }}" target="_blank" class="-facebook"><i class="fab fa-facebook"></i></a></li></xf:if>
							<xf:if is="property('dt_extra_footer_twitter')"><li><a href="https://twitter.com/{{ property('dt_extra_footer_twitter') }}" target="_blank" class="-twitter"><i class="fab fa-twitter"></i></a></li></xf:if>
							<xf:if is="property('dt_extra_footer_instagram')"><li><a href="https://instagram.com/{{ property('dt_extra_footer_instagram') }}" target="_blank" class="-instagram"><i class="fab fa-instagram"></i></a></li></xf:if>
							<xf:if is="property('dt_extra_footer_youtube')"><li><a href="http://www.youtube.com/c/{{ property('dt_extra_footer_youtube') }}" target="_blank" class="-youtube"><i class="fab fa-youtube"></i></a></li></xf:if>
						</ul>
					</div>

				<xf:elseif is="property('dt_extra_footer_second_column') == 'option9'" />
					<div class="pre-footer--content">
						<h3>{{ property('dt_extra_footer_custom_html_title') }}</h3>
						<div class="pre-footer-html--content">
							{{ property('dt_extra_footer_custom_html') }}
						</div>
					</div>

				<xf:elseif is="property('dt_extra_footer_second_column') == 'option10'" />
					<div class="pre-footer--content -links">
						<h3>{{ property('dt_extra_footer_link_1_title') }}</h3>
						<ul class="pre-footer--links">
							{{ property('dt_extra_footer_link_1') }}
						</ul>
					</div>

				<xf:elseif is="property('dt_extra_footer_second_column') == 'option11'" />
					<div class="pre-footer--content -links">
						<h3>{{ property('dt_extra_footer_link_2_title') }}</h3>
						<ul class="pre-footer--links">
							{{ property('dt_extra_footer_link_2') }}
						</ul>
					</div>
				</xf:if>
			</div>
			<div class="pre-footer--column">
				<xf:if is="property('dt_extra_footer_third_column') == 'option1'">
					<xf:widget key="forum_overview_members_online" />

				<xf:elseif is="property('dt_extra_footer_third_column') == 'option2'" />
					<xf:widget key="forum_overview_forum_statistics" />

				<xf:elseif is="property('dt_extra_footer_third_column') == 'option3'" />
					<xf:widget key="forum_overview_share_page" />

				<xf:elseif is="property('dt_extra_footer_third_column') == 'option4'" />
					<xf:widget key="online_list_online_statistics" />

				<xf:elseif is="property('dt_extra_footer_third_column') == 'option5'" />
					<xf:widget key="forum_overview_new_profile_posts" />

				<xf:elseif is="property('dt_extra_footer_third_column') == 'option6'" />
					<xf:widget key="forum_overview_new_posts" />

				<xf:elseif is="property('dt_extra_footer_third_column') == 'option7'" />
					<xf:widget key="member_wrapper_newest_members" />

				<xf:elseif is="property('dt_extra_footer_third_column') == 'option8'" />
					<div class="pre-footer--content -social">
						<h3>{{ property('dt_extra_footer_social_title') }}</h3>
						<ul class="social__icons">
							<xf:if is="property('dt_extra_footer_facebook')"><li><a href="https://www.facebook.com/{{ property('dt_extra_footer_facebook') }}" target="_blank" class="-facebook"><i class="fab fa-facebook"></i></a></li></xf:if>
							<xf:if is="property('dt_extra_footer_twitter')"><li><a href="https://twitter.com/{{ property('dt_extra_footer_twitter') }}" target="_blank" class="-twitter"><i class="fab fa-twitter"></i></a></li></xf:if>
							<xf:if is="property('dt_extra_footer_instagram')"><li><a href="https://instagram.com/{{ property('dt_extra_footer_instagram') }}" target="_blank" class="-instagram"><i class="fab fa-instagram"></i></a></li></xf:if>
							<xf:if is="property('dt_extra_footer_youtube')"><li><a href="http://www.youtube.com/c/{{ property('dt_extra_footer_youtube') }}" target="_blank" class="-youtube"><i class="fab fa-youtube"></i></a></li></xf:if>
						</ul>
					</div>

				<xf:elseif is="property('dt_extra_footer_third_column') == 'option9'" />
					<div class="pre-footer--content">
						<h3>{{ property('dt_extra_footer_custom_html_title') }}</h3>
						<div class="pre-footer-html--content">
							{{ property('dt_extra_footer_custom_html') }}
						</div>
					</div>

				<xf:elseif is="property('dt_extra_footer_third_column') == 'option10'" />
					<div class="pre-footer--content -links">
						<h3>{{ property('dt_extra_footer_link_1_title') }}</h3>
						<ul class="pre-footer--links">
							{{ property('dt_extra_footer_link_1') }}
						</ul>
					</div>

				<xf:elseif is="property('dt_extra_footer_third_column') == 'option11'" />
					<div class="pre-footer--content -links">
						<h3>{{ property('dt_extra_footer_link_2_title') }}</h3>
						<ul class="pre-footer--links">
							{{ property('dt_extra_footer_link_2') }}
						</ul>
					</div>
				</xf:if>
			</div>
			<div class="pre-footer--column">
				<xf:if is="property('dt_extra_footer_fourth_column') == 'option1'">
					<xf:widget key="forum_overview_members_online" />

				<xf:elseif is="property('dt_extra_footer_fourth_column') == 'option2'" />
					<xf:widget key="forum_overview_forum_statistics" />

				<xf:elseif is="property('dt_extra_footer_fourth_column') == 'option3'" />
					<xf:widget key="forum_overview_share_page" />

				<xf:elseif is="property('dt_extra_footer_fourth_column') == 'option4'" />
					<xf:widget key="online_list_online_statistics" />

				<xf:elseif is="property('dt_extra_footer_fourth_column') == 'option5'" />
					<xf:widget key="forum_overview_new_profile_posts" />

				<xf:elseif is="property('dt_extra_footer_fourth_column') == 'option6'" />
					<xf:widget key="forum_overview_new_posts" />

				<xf:elseif is="property('dt_extra_footer_fourth_column') == 'option7'" />
					<xf:widget key="member_wrapper_newest_members" />

				<xf:elseif is="property('dt_extra_footer_fourth_column') == 'option8'" />
					<div class="pre-footer--content -social">
						<h3>{{ property('dt_extra_footer_social_title') }}</h3>
						<ul class="social__icons">
							<xf:if is="property('dt_extra_footer_facebook')"><li><a href="https://www.facebook.com/{{ property('dt_extra_footer_facebook') }}" target="_blank" class="-facebook"><i class="fab fa-facebook"></i></a></li></xf:if>
							<xf:if is="property('dt_extra_footer_twitter')"><li><a href="https://twitter.com/{{ property('dt_extra_footer_twitter') }}" target="_blank" class="-twitter"><i class="fab fa-twitter"></i></a></li></xf:if>
							<xf:if is="property('dt_extra_footer_instagram')"><li><a href="https://instagram.com/{{ property('dt_extra_footer_instagram') }}" target="_blank" class="-instagram"><i class="fab fa-instagram"></i></a></li></xf:if>
							<xf:if is="property('dt_extra_footer_youtube')"><li><a href="http://www.youtube.com/c/{{ property('dt_extra_footer_youtube') }}" target="_blank" class="-youtube"><i class="fab fa-youtube"></i></a></li></xf:if>
						</ul>
					</div>

				<xf:elseif is="property('dt_extra_footer_fourth_column') == 'option9'" />
					<div class="pre-footer--content">
						<h3>{{ property('dt_extra_footer_custom_html_title') }}</h3>
						<div class="pre-footer-html--content">
							{{ property('dt_extra_footer_custom_html') }}
						</div>
					</div>

				<xf:elseif is="property('dt_extra_footer_fourth_column') == 'option10'" />
					<div class="pre-footer--content -links">
						<h3>{{ property('dt_extra_footer_link_1_title') }}</h3>
						<ul class="pre-footer--links">
							{{ property('dt_extra_footer_link_1') }}
						</ul>
					</div>

				<xf:elseif is="property('dt_extra_footer_fourth_column') == 'option11'" />
					<div class="pre-footer--content -links">
						<h3>{{ property('dt_extra_footer_link_2_title') }}</h3>
						<ul class="pre-footer--links">
							{{ property('dt_extra_footer_link_2') }}
						</ul>
					</div>
				</xf:if>
			</div>
		</div>
	</div>
</div>]]></template>
    <template title="forum_view" type="public" addon_id="XF" version_id="2020670" version_string="2.2.6"><![CDATA[<xf:title page="{$page}">{$forum.Node.title}</xf:title>
<xf:description>{$forum.Node.description|raw}</xf:description>

<xf:css src="structured_list.less" />

<xf:if is="!$forum.isSearchEngineIndexable()">
	<xf:head option="metaNoindex"><meta name="robots" content="noindex" /></xf:head>
</xf:if>

<xf:macro template="metadata_macros" name="canonical_url"
	arg-canonicalUrl="{{ link('canonical:forums', $forum, $canonicalFilters + {'page': $page}) }}" />

<xf:head option="rss_forum"><link rel="alternate" type="application/rss+xml" title="{{ phrase('rss_feed_for_x', {'title': $forum.title})|for_attr }}" href="{{ link('forums/index.rss', $forum) }}" /></xf:head>

<xf:macro template="forum_macros" name="forum_page_options" arg-forum="{$forum}" />
<xf:breadcrumb source="$forum.getBreadcrumbs(false)" />

<xf:pageaction if="$forum.canCreateThread() OR $forum.canCreateThreadPreReg()">
	<xf:button href="{{ link('forums/post-thread', $forum) }}" class="button--cta" icon="write" rel="nofollow">
		{{ phrase('post_thread') }}
	</xf:button>
</xf:pageaction>

<xf:if is="$pendingApproval">
	<div class="blockMessage blockMessage--important">{{ phrase('content_submitted_displayed_pending_approval') }}</div>
</xf:if>

<xf:extension name="above_node_list"></xf:extension>

<xf:if is="$nodeTree">
	<xf:ad position="forum_view_above_node_list" arg-forum="{$forum}" />
	<div class="block">
		<div class="block-container">
			<div class="block-body">
				<xf:macro template="forum_list" name="node_list"
					arg-children="{$nodeTree}"
					arg-extras="{$nodeExtras}"
					arg-depth="2" />
			</div>
		</div>
	</div>
	<xf:ad position="forum_view_below_node_list" arg-forum="{$forum}" />
</xf:if>

<xf:if is="$canInlineMod">
	<xf:js src="xf/inline_mod.js" min="1" />
</xf:if>

<xf:extension name="above_thread_list"></xf:extension>
<xf:ad position="forum_view_above_thread_list" arg-forum="{$forum}" />

<xf:extension name="thread_list_block_classes" value="" />
<div class="block {{ extension_value('thread_list_block_classes') }}" data-xf-init="{{ $canInlineMod ? 'inline-mod' : '' }}" data-type="thread" data-href="{{ link('inline-mod') }}">

	<div class="block-outer"><xf:trim>
		<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}"
			link="forums" data="{$forum}" params="{$filters}"
			wrapperclass="block-outer-main" />
		<xf:if contentcheck="true">
			<div class="block-outer-opposite">
				<div class="buttonGroup">
				<xf:contentcheck>
					<xf:if is="$canInlineMod">
						<xf:macro template="inline_mod_macros" name="button" />
					</xf:if>
					<xf:if is="$xf.visitor.user_id">
						<xf:button href="{{ link('forums/mark-read', $forum, {'date': $xf.time}) }}"
							class="button--link" overlay="true">
							{{ phrase('mark_read') }}
						</xf:button>
					</xf:if>
					<xf:if is="$forum.canWatch()">
						<xf:button href="{{ link('forums/watch', $forum) }}" class="button--link"
							data-xf-click="switch-overlay"
							data-sk-watch="{{ phrase('watch') }}"
							data-sk-unwatch="{{ phrase('unwatch') }}">
							<xf:if is="{$forum.Watch.{$xf.visitor.user_id}}">{{ phrase('unwatch') }}<xf:else />{{ phrase('watch') }}</xf:if>
						</xf:button>
					</xf:if>
				</xf:contentcheck>
				</div>
			</div>
		</xf:if>
	</xf:trim></div>

	<div class="block-container">

		<xf:extension name="thread_list_header">
			<div class="block-filterBar">
				<div class="filterBar">
					<xf:if contentcheck="true">
						<ul class="filterBar-filters">
						<xf:contentcheck>
							<xf:extension name="filters">
								<xf:macro name="filters"
									arg-forum="{$forum}"
									arg-filters="{$filters}"
									arg-starterFilter="{$starterFilter}"
									arg-threadTypeFilter="{$threadTypeFilter}" />
							</xf:extension>
						</xf:contentcheck>
						</ul>
					</xf:if>

					<a class="filterBar-menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('filters') }}</a>
					<div class="menu menu--wide" data-menu="menu" aria-hidden="true"
						data-href="{{ link('forums/filters', $forum, $filters) }}"
						data-load-target=".js-filterMenuBody">
						<div class="menu-content">
							<h4 class="menu-header">{{ phrase('show_only:') }}</h4>
							<div class="js-filterMenuBody">
								<div class="menu-row">{{ phrase('loading...') }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</xf:extension>

		<xf:set var="$qtPos">{{ ($sortInfo.order == 'last_post_date' && $sortInfo.direction == 'asc') ? 'bottom' : 'top' }}</xf:set>

		<div class="block-body">
			<xf:extension name="thread_list">
				<div class="structItemContainer">
					<xf:macro name="{{ $templateOverrides.quick_thread_macro ?: 'thread_list_macros::quick_thread' }}"
						arg-forum="{$forum}"
						arg-page="{$page}"
						arg-order="{$sortInfo.order}"
						arg-direction="{$sortInfo.direction}"
						arg-prefixes="{$quickThreadPrefixes}"
						args="{$templateOverrides.quick_thread_macro_args}" />
					
					<xf:if is="property('dt_disc_minor_header')">
						<div class="discu-minorHeader">
							<span class="discu-minorHeader--main">{{ phrase('title') }}</span>
							<span class="discu-minorHeader--stats">{{ phrase('replies') }}</span>
							<span class="discu-minorHeader--stats">{{ phrase('views') }}</span>
							<span class="discu-minorHeader--last">{{ phrase('latest') }}</span>
						</div>
					</xf:if>

					<xf:if is="$stickyThreads is not empty OR $threads is not empty">
						<xf:if is="$stickyThreads is not empty">
							<xf:if is="{{ property('dt_collaps_sticky_threads') }}">
								<h3 class="block-minorHeader block-stickyHeader">
									{{ phrase('sticky') }}
									<span id="collapse-{$forum.node_id}" 
										  class="collapseTrigger {{ !is_toggled('_dtstthr-' . $forum.node_id) ? ' is-active' : '' }}"
										  title="Toggle Visibilty" 
										  data-xf-click="toggle" 
										  data-xf-init="toggle-storage" 
										  data-storage-type="cookie" 
										  data-target=".stickyItemContainer" 
										  data-storage-key="_dtstthr-{$forum.node_id}">
									</span>
								</h3>
							</xf:if>
							<div class="stickyItemContainer {{ !is_toggled('_dtstthr-' . $forum.node_id) ? ' is-active' : '' }}">
								<div class="structItemContainer-group structItemContainer-group--sticky">
									<xf:foreach loop="$stickyThreads" value="$thread">
										<xf:macro name="{{ $templateOverrides.thread_list_macro ?: 'thread_list_macros::item' }}"
											arg-thread="{$thread}"
											arg-forum="{$forum}"
											args="{$templateOverrides.thread_list_macro_args}" />
									</xf:foreach>
								</div>
							</div>
							
							<xf:if is="property('dt_seperate_sticky_threads')">
								<xf:if is="{$stickyThreads}">
									<hr class="stickySeparator"/>
								</xf:if>
							</xf:if>

							<xf:ad position="forum_view_below_stickies" arg-forum="{$forum}" />
						</xf:if>

						<div class="structItemContainer-group js-threadList">
							<xf:if is="$threads is not empty">
								<xf:foreach loop="$threads" value="$thread">
									<xf:macro name="{{ $templateOverrides.thread_list_macro ?: 'thread_list_macros::item' }}"
										arg-thread="{$thread}"
										arg-forum="{$forum}"
										args="{$templateOverrides.thread_list_macro_args}"  />
								</xf:foreach>
								<xf:if is="$showDateLimitDisabler">
									<xf:macro name="date_limit_disabler" arg-forum="{$forum}" arg-page="{$page}" arg-filters="{$filters}" />
								</xf:if>
							</xf:if>
						</div>
					<xf:elseif is="$filters" />
						<div class="structItemContainer-group js-threadList">
							<div class="structItem js-emptyThreadList">
								<div class="structItem-cell">{{ phrase('there_no_threads_matching_your_filters') }}</div>
							</div>
							<xf:if is="$showDateLimitDisabler">
								<xf:macro name="date_limit_disabler" arg-forum="{$forum}" arg-page="{$page}" arg-filters="{$filters}" />
							</xf:if>
						</div>
					<xf:else />
						<div class="structItemContainer-group js-threadList">
							<xf:if is="$showDateLimitDisabler">
								<div class="structItem js-emptyThreadList">
									<div class="structItem-cell">{{ phrase('there_no_threads_to_display') }}</div>
								</div>
								<xf:macro name="date_limit_disabler" arg-forum="{$forum}" arg-page="{$page}" arg-filters="{$filters}" />
							<xf:else />
								<div class="structItem js-emptyThreadList">
									<div class="structItem-cell">{{ phrase('there_no_threads_in_this_forum') }}</div>
								</div>
							</xf:if>
						</div>
					</xf:if>
				</div>
			</xf:extension>
		</div>
	</div>

	<div class="block-outer block-outer--after">
		<xf:pagenav
			page="{$page}" perpage="{$perPage}" total="{$total}"
			link="forums" data="{$forum}" params="{$filters}"
			wrapperclass="block-outer-main" />
		<xf:showignored wrapperclass="block-outer-opposite" />
		<xf:if is="!$forum.canCreateThread() AND !$forum.canCreateThreadPreReg()">
			<div class="block-outer-opposite">
				<xf:if is="$xf.visitor.user_id">
					<span class="button button--wrap is-disabled">
						{{ phrase('no_permission_to_post') }}
						<!-- this is not interactive so shouldn't be a button element -->
					</span>
				<xf:else />
					<xf:button href="{{ link('login') }}" class="button--link button--wrap" overlay="true">
						{{ phrase('log_in_or_register_to_post') }}
					</xf:button>
				</xf:if>
			</div>
		</xf:if>
	</div>
</div>

<xf:ad position="forum_view_below_thread_list" arg-forum="{$forum}" />
<xf:extension name="below_thread_list"></xf:extension>

<xf:widgetpos id="forum_view_sidebar" context-forum="{$forum}" position="sidebar" />

<xf:macro name="filters" arg-forum="!" arg-filters="!" arg-starterFilter="{{ null }}" arg-threadTypeFilter="{{ null }}">
	<xf:set var="$dateLimits" value="{{ {
		'-1': phrase('any_time'),
		'7': phrase('x_days', {'days': '7'}),
		'14': phrase('x_days', {'days': '14'}),
		'30': phrase('x_days', {'days': '30'}),
		'60': phrase('x_months', {'months': '2'}),
		'90': phrase('x_months', {'months': '3'}),
		'182': phrase('x_months', {'months': '6'}),
		'365': phrase('1_year')
	} }}" />

	<xf:extension name="start"></xf:extension>

	<xf:extension name="prefix_id">
		<xf:if is="$filters.prefix_id">
			<li><a href="{{ link('forums', $forum, $filters|replace('prefix_id', null)) }}"
				class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
				<span class="filterBar-filterToggle-label">{{ phrase('prefix:') }}</span>
				{{ prefix_title('thread', $filters.prefix_id) }}</a></li>
		</xf:if>
	</xf:extension>

	<xf:extension name="starter_id">
		<xf:if is="$filters.starter_id AND $starterFilter">
			<li><a href="{{ link('forums', $forum, $filters|replace('starter_id', null)) }}"
				class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
				<span class="filterBar-filterToggle-label">{{ phrase('started_by:') }}</span>
				{$starterFilter.username}</a></li>
		</xf:if>
	</xf:extension>

	<xf:extension name="thread_type">
		<xf:if is="$filters.thread_type && $threadTypeFilter">
			<li><a href="{{ link('forums', $forum, $filters|replace('thread_type', null)) }}"
				class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
				<span class="filterBar-filterToggle-label">{{ phrase('thread_type_filter:') }}</span>
				{{ $threadTypeFilter.getTypeTitle() }}</a></li>
		</xf:if>
	</xf:extension>

	<xf:extension name="last_days">
		<xf:if is="$filters.last_days AND {$dateLimits.{$filters.last_days}}">
			<li><a href="{{ link('forums', $forum, $filters|replace('last_days', null)) }}"
				class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
				<span class="filterBar-filterToggle-label">{{ phrase('last_updated:') }}</span>
				{$dateLimits.{$filters.last_days}}</a></li>
		</xf:if>
	</xf:extension>

	<xf:extension name="order">
		<xf:if is="$filters.order">
			<li><a href="{{ link('forums', $forum, $filters|replace({'order': null, 'direction': null})) }}"
				class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('return_to_default_order')|for_attr }}">
				<span class="filterBar-filterToggle-label">{{ phrase('sort_by:') }}</span>
				{{ phrase_dynamic('forum_sort.' . $filters.order) }}
				<xf:fa icon="{{ $filters.direction == 'asc' ? 'fa-angle-up' : 'fa-angle-down' }}" />
				<span class="u-srOnly"><xf:if is="$filters.direction == 'asc'">{{ phrase('ascending') }}<xf:else />{{ phrase('descending') }}</xf:if></span>
			</a></li>
		</xf:if>
	</xf:extension>

	<xf:extension name="end"></xf:extension>
</xf:macro>

<xf:macro name="date_limit_disabler" arg-forum="!" arg-page="!" arg-filters="!">
	<div class="structItem structItem--note">
		<div class="structItem-cell">
			<a href="{{ link('forums', $forum, {'page': $page, 'no_date_limit': 1} + $filters) }}">
				{{ phrase('show_older_items') }}
			</a>
		</div>
	</div>
</xf:macro>]]></template>
    <template title="furyfont.css" type="public" addon_id="" version_id="0" version_string=""><![CDATA[@font-face {
    font-family: 'DIN Next Rounded LT Pro';
    src: url('{{ asset('dt_theme_files') }}/font/DINNextRoundedLTPro-Regular.eot');
    src: url('{{ asset('dt_theme_files') }}/font/DINNextRoundedLTPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('{{ asset('dt_theme_files') }}/font/DINNextRoundedLTPro-Regular.woff2') format('woff2'),
        url('{{ asset('dt_theme_files') }}/font/DINNextRoundedLTPro-Regular.woff') format('woff'),
        url('{{ asset('dt_theme_files') }}/font/DINNextRoundedLTPro-Regular.ttf') format('truetype'),
        url('{{ asset('dt_theme_files') }}/font/DINNextRoundedLTPro-Regular.svg#ProximaSoft-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'DIN Next Rounded LT Pro';
    src: url('{{ asset('dt_theme_files') }}/font/DINNextRoundedLTPro-Bold.eot');
    src: url('{{ asset('dt_theme_files') }}/font/DINNextRoundedLTPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('{{ asset('dt_theme_files') }}/font/DINNextRoundedLTPro-Bold.woff2') format('woff2'),
        url('{{ asset('dt_theme_files') }}/font/DINNextRoundedLTPro-Bold.woff') format('woff'),
        url('{{ asset('dt_theme_files') }}/font/DINNextRoundedLTPro-Bold.ttf') format('truetype'),
        url('{{ asset('dt_theme_files') }}/font/DINNextRoundedLTPro-Bold.svg#ProximaSoft-Semibold') format('svg');
    font-weight: 700;
    font-style: normal;
}]]></template>
    <template title="helper_js_global" type="public" addon_id="XF" version_id="2021270" version_string="2.2.12"><![CDATA[<xf:macro name="head" arg-app="!">
	<xf:set var="$cssUrls" value="{{ ['public:normalize.css', 'public:fa.css', 'public:core.less', $app . ':app.less'] }}" />

	<xf:set var="$cssUrls" value="{{ array_merge($cssUrls, ['public:furyfont.css']) }}" />
	
	<xf:include template="font_awesome_setup" />

	<link rel="stylesheet" href="{{ css_url($cssUrls) }}" />

	<!--XF:CSS-->
	<xf:if is="$xf.fullJs">
		<script src="{{ js_url('xf/preamble.js') }}"></script>
	<xf:else />
		<script src="{{ js_url('xf/preamble.min.js') }}"></script>
	</xf:if>
</xf:macro>

<xf:macro name="body" arg-app="!" arg-jsState="{{ null }}">
	<xf:corejs />
	<!--XF:JS-->
	<script>
		jQuery.extend(true, XF.config, {
			// <!--[XF:js_global:xf_extend_start]-->
			userId: {$xf.visitor.user_id},
			enablePush: {{ $xf.options.enablePush ? 'true' : 'false' }},
			pushAppServerKey: '{$xf.options.pushKeysVAPID.publicKey}',
			url: {
				fullBase: '{{ base_url(null, true)|escape("js") }}',
				basePath: '{{ base_url(null, false)|escape("js") }}',
				css: '{{ css_url(["__SENTINEL__"], false)|escape("js") }}',
				keepAlive: '{{ link_type($app, "login/keep-alive")|escape("js") }}'
			},
			cookie: {
				path: '{{ $xf.cookie.path|escape("js") }}',
				domain: '{{ $xf.cookie.domain|escape("js") }}',
				prefix: '{{ $xf.cookie.prefix|escape("js") }}',
				secure: {{ $xf.cookie.secure ? 'true' : 'false' }}
			},
			cacheKey: '{{ cache_key()|escape("js") }}',
			csrf: '{{ csrf_token()|escape("js") }}',
			js: {'<!--XF:JS:JSON-->'},
			css: {'<!--XF:CSS:JSON-->'},
			time: {
				now: {$xf.time},
				today: {$xf.timeDetails.today},
				todayDow: {$xf.timeDetails.todayDow},
				tomorrow: {$xf.timeDetails.tomorrow},
				yesterday: {$xf.timeDetails.yesterday},
				week: {$xf.timeDetails.week}
			},
			borderSizeFeature: '{{ property('borderSizeFeature') }}',
			fontAwesomeWeight: '{{ fa_weight() }}',
			enableRtnProtect: {{ $xf.enableRtnProtect ? 'true' : 'false' }},
			<xf:if is="$xf.serviceWorkerPath !== null">
				serviceWorkerPath: '{{ $xf.serviceWorkerPath|escape("js") }}',
			</xf:if>
			enableFormSubmitSticky: {{ property('formSubmitSticky') ? 'true' : 'false' }},
			uploadMaxFilesize: {$xf.uploadMaxFilesize},
			allowedVideoExtensions: {$xf.allowedVideoExtensions|json|raw},
			allowedAudioExtensions: {$xf.allowedAudioExtensions|json|raw},
			shortcodeToEmoji: {{ $xf.options.shortcodeToEmoji ? 'true' : 'false' }},
			visitorCounts: {
				conversations_unread: '{$xf.visitor.conversations_unread|number}',
				alerts_unviewed: '{$xf.visitor.alerts_unviewed|number}',
				total_unread: '{{ ($xf.visitor.conversations_unread + $xf.visitor.alerts_unviewed)|number }}',
				title_count: {{ in_array($xf.options.displayVisitorCount, ['title_count', 'title_and_icon']) ? 'true' : 'false' }},
				icon_indicator: {{ in_array($xf.options.displayVisitorCount, ['icon_indicator', 'title_and_icon']) ? 'true' : 'false' }}
			},
			jsState: {{ $jsState ? $jsState|json|raw : '{}' }},
			publicMetadataLogoUrl: '{{ property('publicMetadataLogoUrl') ? base_url(property('publicMetadataLogoUrl'), true) : '' }}',
			publicPushBadgeUrl: '{{ property('publicPushBadgeUrl') ? base_url(property('publicPushBadgeUrl'), true) : '' }}'
		});

		jQuery.extend(XF.phrases, {
			// <!--[XF:js_global:xf_phrase_start]-->
			date_x_at_time_y: "{{ phrase('date_x_at_time_y')|escape('js') }}",
			day_x_at_time_y:  "{{ phrase('day_x_at_time_y')|escape('js') }}",
			yesterday_at_x:   "{{ phrase('yesterday_at_x')|escape('js') }}",
			x_minutes_ago:    "{{ phrase('x_minutes_ago')|escape('js') }}",
			one_minute_ago:   "{{ phrase('one_minute_ago')|escape('js') }}",
			a_moment_ago:     "{{ phrase('a_moment_ago')|escape('js') }}",
			today_at_x:       "{{ phrase('today_at_x')|escape('js') }}",
			in_a_moment:      "{{ phrase('in_a_moment')|escape('js') }}",
			in_a_minute:      "{{ phrase('in_a_minute')|escape('js') }}",
			in_x_minutes:     "{{ phrase('in_x_minutes')|escape('js') }}",
			later_today_at_x: "{{ phrase('later_today_at_x')|escape('js') }}",
			tomorrow_at_x:    "{{ phrase('tomorrow_at_x')|escape('js') }}",

			day0: "{{ phrase('day_sunday')|escape('js') }}",
			day1: "{{ phrase('day_monday')|escape('js') }}",
			day2: "{{ phrase('day_tuesday')|escape('js') }}",
			day3: "{{ phrase('day_wednesday')|escape('js') }}",
			day4: "{{ phrase('day_thursday')|escape('js') }}",
			day5: "{{ phrase('day_friday')|escape('js') }}",
			day6: "{{ phrase('day_saturday')|escape('js') }}",

			dayShort0: "{{ phrase('day_sunday_short')|escape('js') }}",
			dayShort1: "{{ phrase('day_monday_short')|escape('js') }}",
			dayShort2: "{{ phrase('day_tuesday_short')|escape('js') }}",
			dayShort3: "{{ phrase('day_wednesday_short')|escape('js') }}",
			dayShort4: "{{ phrase('day_thursday_short')|escape('js') }}",
			dayShort5: "{{ phrase('day_friday_short')|escape('js') }}",
			dayShort6: "{{ phrase('day_saturday_short')|escape('js') }}",

			month0: "{{ phrase('month_1')|escape('js') }}",
			month1: "{{ phrase('month_2')|escape('js') }}",
			month2: "{{ phrase('month_3')|escape('js') }}",
			month3: "{{ phrase('month_4')|escape('js') }}",
			month4: "{{ phrase('month_5')|escape('js') }}",
			month5: "{{ phrase('month_6')|escape('js') }}",
			month6: "{{ phrase('month_7')|escape('js') }}",
			month7: "{{ phrase('month_8')|escape('js') }}",
			month8: "{{ phrase('month_9')|escape('js') }}",
			month9: "{{ phrase('month_10')|escape('js') }}",
			month10: "{{ phrase('month_11')|escape('js') }}",
			month11: "{{ phrase('month_12')|escape('js') }}",

			active_user_changed_reload_page: "{{ phrase('active_user_changed_reload_page')|escape('js') }}",
			server_did_not_respond_in_time_try_again: "{{ phrase('server_did_not_respond_in_time_try_again')|escape('js') }}",
			oops_we_ran_into_some_problems: "{{ phrase('oops_we_ran_into_some_problems')|escape('js') }}",
			oops_we_ran_into_some_problems_more_details_console: "{{ phrase('oops_we_ran_into_some_problems_more_details_console')|escape('js') }}",
			file_too_large_to_upload: "{{ phrase('file_too_large_to_upload')|escape('js') }}",
			uploaded_file_is_too_large_for_server_to_process: "{{ phrase('uploaded_file_is_too_large_for_server_to_process')|escape('js') }}",
			files_being_uploaded_are_you_sure: "{{ phrase('files_being_uploaded_are_you_sure')|escape('js') }}",
			attach: "{{ phrase('button.attach')|escape('js') }}",
			rich_text_box: "{{ phrase('rich_text_box')|escape('js') }}",
			close: "{{ phrase('close')|escape('js') }}",
			link_copied_to_clipboard: "{{ phrase('link_copied_to_clipboard')|escape('js') }}",
			text_copied_to_clipboard: "{{ phrase('text_copied_to_clipboard')|escape('js') }}",
			loading: "{{ phrase('loading...')|escape('js') }}",
			you_have_exceeded_maximum_number_of_selectable_items: "{{ phrase('you_have_exceeded_maximum_number_of_selectable_items')|escape('js') }}",

			processing: "{{ phrase('processing')|escape('js') }}",
			'processing...': "{{ phrase('processing...')|escape('js') }}",

			showing_x_of_y_items: "{{ phrase('showing_x_of_y_items')|escape('js') }}",
			showing_all_items: "{{ phrase('showing_all_items')|escape('js') }}",
			no_items_to_display: "{{ phrase('no_items_to_display')|escape('js') }}",

			number_button_up: "{{ phrase('number_button_up')|escape('js') }}",
			number_button_down: "{{ phrase('number_button_down')|escape('js') }}",

			push_enable_notification_title: "{{ phrase('push_enable_notification_title', {'boardTitle': $xf.options.boardTitle})|escape('js') }}",
			push_enable_notification_body: "{{ phrase('push_enable_notification_body')|escape('js') }}"
		});
	</script>

	<form style="display:none" hidden="hidden">
		<input type="text" name="_xfClientLoadTime" value="" id="_xfClientLoadTime" title="_xfClientLoadTime" tabindex="-1" />
	</form>

	<xf:if is="$xf.visitor.canSearch() && $xf.request.getFullRequestUri() === link('full:index')">
		<script type="application/ld+json">
		{
			"@context": "https://schema.org",
			"@type": "WebSite",
			"url": "{{ link('canonical:index')|escape('js') }}",
			"potentialAction": {
				"@type": "SearchAction",
				"target": "{{ link('canonical:search/search')|escape('js') . ($xf.options.useFriendlyUrls ? '?' : '&') . 'keywords={search_keywords}' }}",
				"query-input": "required name=search_keywords"
			}
		}
		</script>
	</xf:if>
	
	<xf:if is="property('dt_collapsible_sidebar_block') && !property('dt_disable_sidebar')">
		<script>
			var sidebarRowCollapse = '<span class="block-control fas fa-chevron-up"></span>';
			$('.p-body-sidebar .block-container .block-minorHeader').append(sidebarRowCollapse);
			$('.block-control').click(function () {
				if ($(this).parents('.block-container').children('.block-body').hasClass('active')){
					$(this).parents('.block-container').children('.block-body').removeClass('active').slideDown('400');
					$(this).removeClass('fa-chevron-down').addClass('fa-chevron-up');
				}else {
					$(this).parents('.block-container').children('.block-body').addClass('active').slideUp('400');
					$(this).addClass('fa-chevron-down').removeClass('fa-chevron-up');
				}
			});
		</script>
	</xf:if>
</xf:macro>]]></template>
    <template title="login" type="public" addon_id="XF" version_id="2021270" version_string="2.2.12"><![CDATA[<xf:js src="xf/login_signup.js" min="1" />

<xf:title>{{ phrase('log_in') }}</xf:title>

<xf:head option="robots"><meta name="robots" content="noindex" /></xf:head>

<xf:if is="$xf.session.preRegActionKey">
	<div class="blockMessage blockMessage--highlight">
		{{ phrase('pre_reg_action_notice_login') }}<br />
		<br />
		{{ phrase('dont_have_account_question') }}
		<xf:button class="button--link"
			href="{{ link('register', null, {'_xfRedirect': $redirect}) }}"
			data-xf-click="overlay"
		>{{ phrase('register') }}</xf:button>
	</div>
</xf:if>

<xf:if contentcheck="true">
	<div class="blockMessage blockMessage--error blockMessage--iconic">
		<xf:contentcheck>{$error}</xf:contentcheck>
	</div>
</xf:if>

<div class="blocks block-container">
	<xf:form action="{{ link('login/login') }}" class="block">
		<div class="block-container">
			<div class="block-body">
				<xf:textboxrow name="login" value="{$login}" autofocus="autofocus" autocomplete="username"
					label="{{ phrase('your_name_or_email_address') }}" />

				<xf:passwordboxrow name="password" autocomplete="current-password"
					label="{{ phrase('password') }}">

					<xf:html>
						<a href="{{ link('lost-password') }}" data-xf-click="overlay">{{ phrase('forgot_your_password') }}</a>
					</xf:html>
				</xf:passwordboxrow>

				<xf:if is="$captcha">
					<xf:captcharow label="{{ phrase('verification') }}" force="true" force-visible="true" />
				</xf:if>

				<xf:checkboxrow>
					<xf:option name="remember" selected="true">{{ phrase('stay_logged_in') }}</xf:option>
				</xf:checkboxrow>

				<xf:hiddenval name="_xfRedirect">{$redirect}</xf:hiddenval>
			</div>
			<xf:submitrow icon="login" />
		</div>
		<xf:if is="$xf.options.registrationSetup.enabled">
			<div class="block-outer block-outer--after">
				<div class="block-outer-middle">
					{{ phrase('dont_have_account_question') }} <xf:button href="{{ link('register') }}">{{ phrase('register_now') }}</xf:button>
				</div>
			</div>
		</xf:if>
	</xf:form>

	<xf:if is="$providers is not empty">
		<div class="blocks-textJoiner"><span></span><em>{{ phrase('or_separator') }}</em><span></span></div>

		<div class="block">
			<div class="block-container">
				<div class="block-body">
					<xf:formrow rowtype="button"
						label="{{ phrase('log_in_using') }}">

						<ul class="listHeap">
							<xf:foreach loop="$providers" value="$provider">
								<li>
									<xf:macro template="connected_account_macros" name="button"
										arg-provider="{$provider}" />
								</li>
							</xf:foreach>
						</ul>
					</xf:formrow>
				</div>
			</div>
		</div>
	</xf:if>
</div>]]></template>
    <template title="message.less" type="public" addon_id="XF" version_id="2020970" version_string="2.2.9"><![CDATA[@_message-actionColumnWidth: 40px;
@_messageSimple-userColumnWidth: 70px;

.message
{
	+ .message,
	&.message--bordered
	{
		border-top: @xf-borderSize solid @xf-borderColor;
	}
}

.message,
.block--messages .message
{
	&.is-mod-selected
	{
		background: @xf-inlineModHighlightColor;

		.message-cell--user,
		.message-cell--vote
		{
			background: @xf-inlineModHighlightColor;
		}

		.message-userArrow:after
		{
			border-right-color: @xf-inlineModHighlightColor;
		}
	}
}

.message-inner
{
	display: flex;
	padding: @xf-elementSpacer;
}

.message-cell
{
	display: block;
	padding: @xf-messagePadding;

	.message--quickReply &
	{
		//padding-bottom: 35px; // for the submit row

		> .formRow:last-child
		{
			> dd
			{
				padding-bottom: 0;
			}
		}
	}

	&.message-cell--closer
	{
		padding: @xf-messagePaddingSmall;

		&.message-cell--user
		{
			.m-fixedWidthFlex((@xf-messageUserBlockWidth) + 2 * (@xf-messagePaddingSmall));

			.message--simple &
			{
				.m-fixedWidthFlex(@_messageSimple-userColumnWidth + 2 * (@xf-messagePaddingSmall));

			}
		}

		&.message-cell--action
		{
			.m-fixedWidthFlex((@_message-actionColumnWidth) + 2 * (@xf-messagePaddingSmall));
		}
	}

	&.message-cell--user,
	&.message-cell--action
	{
		position: relative;
		.xf-messageUserBlock(no-border);
		border: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
		min-width: 0;
	}

	&.message-cell--vote
	{
		position: relative;
		.xf-messageUserBlock(no-border);
		border: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
		padding-top: 0;
		padding-bottom: 0;

		.message--solution &
		{
			background: @xf-successBg;
		}

		.solutionIcon
		{
			margin-top: @xf-paddingMedium;
		}
	}

	&.message-cell--user
	{
		.m-fixedWidthFlex((@xf-messageUserBlockWidth) + 2 * (@xf-messagePadding));
		<xf:if is="property('dt_message_avatar_size') == 'l'">
			.m-fixedWidthFlex((@xf-messageUserBlockWidth) + 8 * (@xf-messagePadding));
		</xf:if>

		.message--simple &
		{
			.m-fixedWidthFlex(@_messageSimple-userColumnWidth + 2 * @xf-messagePaddingSmall);
		}
	}

	&.message-cell--action
	{
		.m-fixedWidthFlex((@_message-actionColumnWidth) + 2 * (@xf-messagePadding));
	}

	&.message-cell--main
	{
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;

		&.is-editing
		{
			padding: 0;
		}

		// should really only happen when editing
		.block
		{
			margin: 0;
		}

		.block-container
		{
			margin: 0;
			border: none;
		}
	}

	&.message-cell--alert
	{
		font-size: @xf-fontSizeSmall;
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		.xf-contentAccentBase();

		a
		{
			.xf-contentAccentLink();
		}
	}

	&.message-cell--extra
	{
		.m-fixedWidthFlex(180 + 2 * (@xf-messagePadding));
		border-left: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
		background: @xf-contentAltBg;

		.formRow-explain
		{
			margin: @xf-paddingMedium 0 0;
			.xf-formExplain();
			.m-textColoredLinks();
			font-size: 80%;
		}
	}

	&.message-cell--header,
	&.message-cell--solutionHeader
	{
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		padding: @xf-blockPaddingV @xf-blockPaddingH;
		margin: 0;
	}

	&.message-cell--header
	{
		font-weight: @xf-fontWeightNormal;
		text-decoration: none;
		.xf-blockHeader();
		border-bottom: none;

		.m-hiddenLinks();
	}

	&.message-cell--solutionHeader
	{
		color: @xf-successColor;
		font-size: @xf-fontSizeLarge;
		background: @xf-successBg;
		border-left: @xf-borderSizeFeature solid @xf-successFeatureColor;
		border-radius: @xf-blockBorderRadius;
	}
}

.js-solutionHeader
{
	padding: @xf-paddingLarge @xf-elementSpacer;
}

.message-main
{
	height: 100%;
	display: flex;
	flex-direction: column;
}

.message-content
{
	flex: 1 1 auto;

	// IE11 flex bug
	min-height: 1px;
}

.message-footer
{
	margin-top: auto;
}

.message-expandWrapper
{
	position: relative;
	overflow: hidden;
	.m-transition(-xf-height, height);

	.message-expandContent
	{
		max-height: 250px;
		overflow: hidden;
	}
	.message-expandContent--small
	{
		max-height: 160px;
	}

	&.is-expandable
	{
		.message-expandLink
		{
			display: block;
		}
	}

	&.is-expanded
	{
		.message-expandContent
		{
			max-height: none;
		}

		.message-expandLink
		{
			display: none;
		}
	}
}

.message-column
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.message-expandLink
{
	display: none;
	position: absolute;
	top: 60%;
	bottom: 0;
	left: 0;
	right: 0;
	cursor: pointer;
	z-index: @zIndex-1;

	.m-gradient(
		fade(@xf-contentBase--background-color, 0%),
		xf-default(@xf-contentBase--background-color, transparent),
		transparent,
		0%,
		70%
	);

	&:empty
	{
		cursor: auto;

		.m-gradient(
			fade(@xf-contentBase--background-color, 0%),
			xf-default(@xf-contentBase--background-color, transparent),
			transparent,
			0%,
			100%
		);
	}

	a
	{
		position: absolute;
		bottom: @xf-messagePadding;
		left: 0;
		right: 0;
		text-align: center;
		font-size: @xf-fontSizeSmall;
		color: @xf-textColorAttention;
		text-decoration: none;
	}
}

@media (max-width: @xf-messageSingleColumnWidth)
{
	.message:not(.message--forceColumns)
	{
		.message-inner
		{
			display: block;
			padding: @xf-paddingLarge;
		}

		.message-cell
		{
			display: block;
			.m-clearFix();

			&.message-cell--vote
			{
				width: auto;
				border-left: none;
				border-top: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;

				.solutionIcon
				{
					margin-top: 0;
				}
			}

			&.message-cell--extra
			{
				width: auto;
				border-left: none;
				border-top: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
			}
		}

		.message-column
		{
			flex-direction: row;
			justify-content: space-evenly;
		}
	}

	.message--simple:not(.message--forceColumns),
	.message--quickReply:not(.message--forceColumns)
	{
		.message-cell.message-cell--user
		{
			display: none;
		}
	}
}

// ######################## USER COLUMN #########################

.message-userArrow
{
	display: none;
	position: absolute;
	top: (@xf-messagePadding) * 2;
	right: -1px;

	.m-triangleLeft(xf-default(@xf-messageUserBlock--border-color, transparent), @xf-messagePadding);

	&:after
	{
		position: absolute;
		top: -(@xf-messagePadding - 1px);
		right: -@xf-messagePadding;
		content: "";

		.m-triangleLeft(@xf-contentBg, @xf-messagePadding - 1px);
	}
}

.message-avatar
{
	text-align: center;

	.avatar
	{
		vertical-align: bottom;
	}
}

.message-avatar-wrapper
{
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	margin-bottom: .5em;

	.message-avatar-online<xf:if is="property('dt_offline_indicator')">,
	.message-avatar-offline
	</xf:if>
	{
		position: absolute;

		// center bottom position
		left: 50%;
		margin-left: -.615em;
		bottom: -.5em;

		&:before
		{
			.m-faBase();
			.m-faContent(@fa-var-user-circle, .969em);
			line-height: 1;
			font-weight: bold;
			color: rgb(127, 185, 0);
			background: @xf-messageUserBlock--background-color;
			border: @xf-messageUserBlock--background-color solid 2px;
			border-radius: 50%;
			display: inline-block;
		}
	}
	
	<xf:if is="property('dt_offline_indicator')">
	.message-avatar-offline {
		&:before {
			color: rgb(185, 0, 0);
		}
	}
	</xf:if>
}

.message-name
{
	font-weight: @xf-fontWeightHeavy;
	font-size: inherit;
	text-align: center;
	margin: 0;
}

.message-userTitle
{
	font-size: @xf-fontSizeSmaller;
	font-weight: normal;
	text-align: center;
	margin: 0;
}

.message-userBanner.userBanner
{
	display: block;
	margin-top: 3px;
}

.message-userExtras
{
	margin-top: 3px;
	font-size: @xf-fontSizeSmaller;
}

.message--deleted
{
	.message-userDetails
	{
		display: none;
	}

	.message-avatar .avatar
	{
		.m-avatarSize(@avatar-s);
	}
}

@media (max-width: @xf-messageSingleColumnWidth)
{
	.message:not(.message--forceColumns)
	{
		.message-userArrow
		{
			top: auto;
			right: auto;
			bottom: -1px;
			left: ((@avatar-s) / 2);

			border: none;
			.m-triangleUp(xf-default(@xf-messageUserBlock--border-color, transparent), @xf-messagePadding);

			&:after
			{
				top: auto;
				right: auto;
				left: -(@xf-messagePadding - 1px);
				bottom: -@xf-messagePadding;

				border: none;
				.m-triangleUp(@xf-contentBg, @xf-messagePadding - 1px);
			}
		}

		&.is-mod-selected
		{
			.message-userArrow:after
			{
				border-color: transparent;
				border-bottom-color: @xf-inlineModHighlightColor;
			}
		}

		.message-user
		{
			display: flex;
		}

		.message-avatar
		{
			margin-bottom: 0;

			.avatar
			{
				.m-avatarSize(@avatar-s);
			}
		}

		.message-userDetails
		{
			flex: 1;
			min-width: 0;
			padding-left: @xf-messagePadding;
		}

		.message-name
		{
			text-align: left;
		}

		.message-userTitle,
		.message-userBanner.userBanner
		{
			display: inline-block;
			text-align: left;
			margin: 0;
		}

		.message-userExtras
		{
			display: none;
		}

		.message--deleted
		{
			.message-userDetails
			{
				display: block;
			}
		}
	}
}

// ####################### MAIN COLUMN ####################

.message-content
{
	position: relative;

	.js-selectToQuoteEnd
	{
		height: 0;
		font-size: 0;
		overflow: hidden;
	}

	.message--multiQuoteList &
	{
		min-height: 80px;
		max-height: 120px;
		overflow: hidden;

		.message-body
		{
			pointer-events: none;
		}
	}
}

.message-attribution
{
	color: @xf-textColorMuted;
	font-size: @xf-fontSizeSmaller;
	padding-bottom: 3px;
	border-bottom: @xf-borderSize solid @xf-borderColor;
	.m-clearFix();

	&.message-attribution--plain
	{
		border-bottom: none;
		font-size: inherit;
		padding-bottom: 0;
	}

	&.message-attribution--split
	{
		display: flex;
		align-items: flex-end;
		flex-wrap: wrap;

		.message-attribution-opposite
		{
			margin-left: auto;
		}
	}
}

.message-attribution-main
{
	float: left;
}

.message-attribution-opposite
{
	float: right;

	&.message-attribution-opposite--list
	{
		display: flex;
		.m-listPlain();

		> li
		{
			margin-left: 14px;

			&:first-child
			{
				margin-left: 0;
			}
		}
	}

	a
	{
		color: inherit;

		&:hover
		{
			text-decoration: none;
			color: @xf-linkHoverColor;
		}
	}
}

.message-attribution-gadget
{
	display: inline-block;
	margin: -3px -7px;
	padding: 3px 7px;
}

.message-attribution-source
{
	font-size: @xf-fontSizeSmaller;
	margin-bottom: @xf-paddingSmall;
}

.message-attribution-user
{
	font-weight: @xf-fontWeightHeavy;

	.avatar
	{
		display: none;
	}

	.attribution
	{
		display: inline;
		font-size: inherit;
		font-weight: inherit;
		margin: 0;
	}
}

.message-newIndicator,
a.message-newIndicator
{
	.xf-messageNewIndicator();
	white-space: nowrap;
}

a.message-newIndicator:hover
{
	color: @xf-messageNewIndicator--color;
}

.message-minorHighlight
{
	font-size: @xf-fontSizeSmall;
	color: @xf-textColorFeature;
}

.message-fields
{
	margin: @xf-messagePadding 0;

	.message--simple &
	{
		margin-top: @xf-messagePaddingSmall;
		margin-bottom: @xf-messagePaddingSmall;
	}

	&:last-child
	{
		margin-bottom: 0;
	}
}

.message-body
{
	margin: @xf-messagePadding 0;
	font-family: @xf-fontFamilyBody;
	.m-clearFix();

	.message--simple &
	{
		margin-top: @xf-messagePaddingSmall;
		margin-bottom: @xf-messagePaddingSmall;
	}

	&:last-child
	{
		margin-bottom: 0;
	}

	.message-title
	{
		// basically replicates .structItem-title
		font-size: @xf-fontSizeLarge;
		font-weight: @xf-fontWeightNormal;
		margin: 0 0 @xf-messagePadding 0;
		padding: 0;
	}
}

.message-attachments
{
	margin: .5em 0;
}

	.message-attachments-list
	{
		.m-listPlain();
	}

.message-lastEdit
{
	margin-top: .5em;
	color: @xf-textColorMuted;
	font-size: @xf-fontSizeSmallest;
	text-align: right;
}

.message-signature
{
	margin-top: @xf-messagePadding;
	.xf-messageSignature();
}

.message-actionBar .actionBar-set
{
	margin-top: @xf-messagePadding;
	font-size: @xf-fontSizeSmall;

	.message--simple &
	{
		margin-top: @xf-messagePaddingSmall;
	}
}

.message .likesBar
{
	margin-top: @xf-messagePadding;
	padding: @xf-messagePaddingSmall;
}

.message .reactionsBar
{
	margin-top: @xf-messagePadding;
	padding: @xf-messagePaddingSmall;
}

.message-historyTarget
{
	margin-top: @xf-messagePadding;
}

.message-gradient
{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;

	.m-gradient(fade(@xf-contentBg, 0%), @xf-contentBg, @xf-contentBg, 0%, 90%);
}

.message-responses
{
	margin-top: @xf-messagePaddingSmall;
	font-size: @xf-fontSizeSmall;

	.editorPlaceholder
	{
		.input
		{
			font-size: inherit;
		}
	}
}

.message-responseRow
{
	margin-top: -@xf-minorBlockContent--border-width;
	.xf-minorBlockContent();
	padding: @xf-messagePaddingSmall;

	// note that border radiuses are very difficult to do here due to a lot of dynamic showing/hiding

	&.message-responseRow--likes,
	&.message-responseRow--reactions
	{
		.m-transitionFadeDown();
	}
}

@media (max-width: @xf-messageSingleColumnWidth)
{
	.message:not(.message--forceColumns)
	{
		.message-attribution-user .avatar
		{
			display: inline-flex;
			.m-avatarSize((@xf-fontSizeNormal) * (@xf-lineHeightDefault));
		}

		.message-content
		{
			// this is 1px to workaround an IE11 issue - see #139187
			min-height: 1px;
		}
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.message-signature
	{
		display: none;
	}
}

// MESSAGE MENU

.message-menuGroup
{
	display: inline-block;
}

.message-menuTrigger
{
	display: inline-block;

	&:after
	{
		.m-menuGadget(); // 1em
		text-align: right;
	}

	&:hover:after
	{
		color: black;
	}
}

.message-menu-section
{
	&--editDelete
	{
		.menu-linkRow
		{
			font-weight: @xf-fontWeightHeavy;
			font-size: @xf-fontSizeNormal;
		}
	}
}

.message-menu-link
{
	&--delete i:after
	{
		.m-faContent(@fa-var-trash-alt);
	}
	&--edit i:after
	{
		.m-faContent(@fa-var-edit);
	}
	&--report i:after
	{
		.m-faContent(@fa-var-frown);
	}
	&--warn i:after
	{
		.m-faContent(@fa-var-exclamation-triangle);
	}
	&--spam i:after
	{
		.m-faContent(@fa-var-ban);
	}
	&--ip i:after
	{
		.m-faContent(@fa-var-sitemap);
	}
	&--history i:after
	{
		.m-faContent(@fa-var-history);
	}
	&--follow i:after
	{
		.m-faContent(@fa-var-user-plus);
	}
	&--ignore i:after
	{
		.m-faContent(@fa-var-user-times);
	}
	&--share i:after
	{
		.m-faContent(@fa-var-share-alt);
	}
}

// ############################# CUSTOM FOR MESSAGE VARIANTS ##############

.message-articleUserInfo
{
	.xf-messageUserBlock(no-border);
	border-top: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;

	&:last-child
	{
		.m-borderBottomRadius(@block-borderRadius-inner);
	}

	.contentRow-figure
	{
		width: @xf-messageUserBlockWidth;
		text-align: center;
	}

	.contentRow-main
	{
		padding-left: 2 * (@xf-messagePadding);
		text-align: left;
	}

	@media (max-width: @xf-messageSingleColumnWidth)
	{
		.contentRow-figure
		{
			width: auto;
		}

		.contentRow-main
		{
			padding-left: @xf-paddingLarge;
		}
	}
}

.message-articleWrittenBy
{
	color: @xf-textColorMuted;
	font-size: @xf-fontSizeSmall;
}

.message-articleUserName
{
	font-weight: @xf-fontWeightHeavy;
	font-size: @xf-fontSizeLarger;
 	margin: 0;
	display: inline;
}

.message-articleUserBlurb,
.message-articleUserBlurb div
{
	font-size: @xf-fontSizeSmall;
	display: inline;
}

.message-articleUserAbout
{
	font-size: @xf-fontSizeSmall;
	margin: .5em 0;
}

.message-articleUserBanners .userBanner
{
	margin-bottom: 3px;
}

.message-articleUserStats
{
	font-size: @xf-fontSizeSmall;
	color: @xf-textColorMuted;
}

@media (max-width: @xf-responsiveNarrow)
{
	.message-articleUserStats
	{
		display: none;
	}
}

// ############################# COMMENTS ###############

.comment
{
}

.comment-inner
{
	display: table;
	table-layout: fixed;
	width: 100%;
}

.comment-avatar
{
	display: table-cell;
	width: 24px;
	vertical-align: top;

	.avatar,
	img
	{
		vertical-align: bottom;
	}
}

.comment-main
{
	display: table-cell;
	padding-left: @xf-messagePadding;
	vertical-align: top;
}

.comment-contentWrapper
{
	margin-bottom: @xf-messagePaddingSmall;
}

.comment-user
{
	font-weight: @xf-fontWeightHeavy;
}

.comment-body
{
	display: inline;
}

.comment-note
{
	color: @xf-textColorMuted;
	font-size: @xf-fontSizeSmallest;
}

.comment-input
{
	display: block;
	height: 2.34em;
	margin-bottom: @xf-messagePaddingSmall;
}

.comment-actionBar .actionBar-set
{
	margin-top: @xf-messagePaddingSmall;
	color: @xf-textColorMuted;
}

.comment-likes,
.comment-reactions
{
	.m-transitionFadeDown();

	margin-top: @xf-messagePaddingSmall;
	font-size: @xf-fontSizeSmaller;
}

// ################################## MESSAGE QUICK REPLY ADDITIONS #############

.formSubmitRow.formSubmitRow--messageQr
{
	.formSubmitRow-controls
	{
		text-align: center;
		padding-left: 0;
		padding-right: 0;
		margin-left: @xf-messagePadding;
		margin-right: @xf-messagePadding;

		@media (max-width: @xf-formResponsive)
		{
			text-align: right;
		}
	}
}

// ################################## MESSAGE NOTICES #############################

.messageNotice
{
	margin: @xf-messagePaddingSmall 0;
	padding: @xf-messagePaddingSmall @xf-messagePadding;
	.xf-contentAccentBase();
	font-size: @xf-fontSizeSmaller;
	border-left: @xf-borderSizeMinorFeature solid @xf-borderColorAttention;

	&.messageNotice--nested
	{
		border-left-width: @xf-borderSize;
	}

	&:not(.messageNotice--highlighted)
	{
		a,
		a:hover
		{
			.xf-contentAccentLink();
		}
	}

	&:before
	{
		display: inline-block;
		.m-faBase();
		padding-right: .2em;
		font-size: 125%;
		color: @xf-textColorAttention;
	}

	&.messageNotice--highlighted
	{
		.xf-contentHighlightBase();
		border-left-color: @xf-borderColorFeature;

		&:before
		{
			color: @xf-textColorFeature;
		}
	}

	&.messageNotice--deleted:before { .m-faContent(@fa-var-trash-alt); } // , .88em
	&.messageNotice--moderated:before { .m-faContent(@fa-var-shield); } // , 1em
	&.messageNotice--warning:before { .m-faContent(@fa-var-exclamation-triangle); } // , 1em
	&.messageNotice--ignored:before { .m-faContent(@fa-var-microphone-slash); } // , 1.25em
}

// ##################### MESSAGE VARIANTS/RESPONSIVE ##################

@media (min-width: @xf-responsiveEdgeSpacerRemoval)
{
	.block:not(.block--messages)
	{
		@{block-noStripSel} > .block-body:first-child > .message:first-child,
		.block-topRadiusContent.message,
		.block-topRadiusContent > .message:first-child
		{
			.message-inner:first-of-type .message-cell
			{
				&:first-child { border-top-left-radius: @block-borderRadius-inner; }
				&:last-child { border-top-right-radius: @block-borderRadius-inner; }
			}
		}

		@{block-noStripSel} > .block-body:last-child > .message:last-child,
		.block-bottomRadiusContent.message,
		.block-bottomRadiusContent > .message:last-child
		{
			.message-inner:last-of-type .message-cell
			{
				&:first-child { border-bottom-left-radius: @block-borderRadius-inner; }
				&:last-child { border-bottom-right-radius: @block-borderRadius-inner; }
			}
		}
	}
}

.block--messages
{
	.block-container
	{
		background: none;
		border: none;
	}

	.message,
	.block-row
	{
		.xf-contentBase();
		.xf-blockBorder();
		border-radius: @xf-blockBorderRadius;

		+ .message,
		+ .block-row
		{
			margin-top: @xf-paddingLargest;
		}
	}

	.block-filterBar
	{
		.xf-blockBorder();
		border-radius: @xf-blockBorderRadius;
		margin-bottom: @xf-blockPaddingV;
	}

	.message-spacer
	{
		+ .message,
		+ .block-row
		{
			margin-top: @xf-blockPaddingV;
		}
	}

	@media (max-width: @xf-messageSingleColumnWidth)
	{
		.message--simple .message-cell--user + .message-cell
		{
			border-radius: 0;
			border-top-left-radius: @block-borderRadius-inner;
			border-top-right-radius: @block-borderRadius-inner;
		}
	}

	@media (max-width: @xf-responsiveEdgeSpacerRemoval)
	{
		.block-row,
		.block-filterBar
		{
			border-left: none;
			border-right: none;
			border-radius: 0;
		}

		.message .message-inner .message-cell
		{
			border-radius: 0;

			&:first-child,
			&:last-child
			{
				border-radius: 0;
			}
		}

		.message--simple .message-cell--user + .message-cell
		{
			border-radius: 0;
		}
	}
}

.message--article
{
	&.is-moderated
	{
		background: @xf-contentHighlightBg;
	}

	&.is-deleted
	{
		opacity: .65;
	}
}

// article preview view for thread list
.message--articlePreview
{
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin-bottom: @xf-paddingLarge;

	&:last-child
	{
		margin-bottom: 0;
	}

	.articlePreview-main
	{
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}

	.articlePreview-image
	{
		flex: 0 0 auto;
		align-self: center;
		width: 100%;
		max-width: 750px;
		background: center / cover @xf-contentAltBg no-repeat;
		text-decoration: none;

		&:after
		{
			content: '';
			display: block;
			padding-bottom: 75%;
		}

		& + .articlePreview-text
		{
			.bbImageWrapper,
			.bbImage
			{
				display: none;
			}
		}
	}

	.articlePreview-text
	{
		flex: 1 1 auto;
		display: flex;
		min-width: 0;
		flex-direction: column;
		padding: @xf-messagePadding;

		.bbWrapper
		{
			.m-fadeOutLines(8, @xf-contentBg);
		}
	}

	.articlePreview-title
	{
		margin: 0;
		font-size: @xf-fontSizeLarge;
	}

	.articlePreview-content
	{
		flex: 1 1 auto;
	}

	.articlePreview-links
	{
		text-align: right;
		padding-top: @xf-blockPaddingV;
	}

	.articlePreview-statuses
	{
		float: left;
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;

		> li
		{
			margin-right: 8px;
		}

		.message-newIndicator
		{
			font-size: @xf-fontSizeSmall;
		}
	}

	.articlePreview-footer
	{
		padding: 0 @xf-blockPaddingH;
	}

	.articlePreview-meta
	{
		display: flex;
		align-items: center;

		border-top: solid 1px @xf-borderColor;
		padding: @xf-blockPaddingV 0;

		color: @xf-textColorMuted;
		font-size: @xf-fontSizeSmall;

		> li
		{
			margin-right: @xf-blockPaddingH;

			&:last-child
			{
				margin-right: 0;
			}
		}
	}
}

@media (max-width: @xf-messageSingleColumnWidth)
{
	.message.message--quickReply
	{
		.message-cell
		{
			padding: 0;
		}
	}

	.articlePreview-replies
	{
		white-space: nowrap;
	}

	.articlePreview-by,
	.articlePreview-repliesLabel
	{
		display: none;
	}
}

.block--articles.block--messages.block--expanded
{
	.article-title
	{
		// from .p-title-value
		margin: 0 0 5px;
		font-size: @xf-fontSizeLargest;
		font-weight: @xf-fontWeightNormal;
	}

	.message-snippet-link
	{
		margin-top: .5em;
		text-align: center;
	}

	.message + .message
	{
		margin-top: @xf-paddingLargest;
	}
}

// expanded article grid behavior
@supports (display: grid)
{
	@media (min-width: @xf-responsiveMedium)
	{
		.block--previews .block-body
		{
			display: grid;
			gap: @xf-paddingLarge;
			grid-template-rows: auto;
			grid-template-columns: repeat(2, 1fr);
			grid-template-areas: "a a";

			> .message:first-of-type:last-of-type
			{
				grid-area: a;
			}

			> .message--articlePreview
			{
				margin-bottom: 0;

				// first five
				&:nth-of-type(-n+5)
				{
					.articlePreview-title
					{
						font-size: @xf-fontSizeLarger;
					}

					.articlePreview-image
					{
						max-width: none;

						&:after
						{
							padding-bottom: 60%;
						}
					}

					.articlePreview-meta
					{
						.articlePreview-by
						{
							display: block;
						}
					}
				}

				// first
				&:first-of-type
				{
					grid-area: a;

					.articlePreview-title
					{
						font-size: @xf-fontSizeLargest;
					}

					.articlePreview-meta
					{
						border-top: none;
					}

					.articlePreview-main
					{
						flex-direction: row-reverse;
					}

					.articlePreview-image
					{
						width: 50%;
					}
				}
			}
		}
	}

	// max width multi-columns
	.m-maxPreviewColumns()
	{
		.block--previews .block-body
		{
			grid-template-columns: repeat(4, 1fr);
			grid-template-areas:
				"a a a a"
				"b_1 b_1 b_2 b_2"
				"b_3 b_3 b_4 b_4";

			> .message:first-of-type:last-of-type
			{
				grid-area: a;
			}

			> .message--articlePreview
			{
				&:nth-of-type(1) { grid-area: a; }
				&:nth-of-type(2) { grid-area: b_1; }
				&:nth-of-type(3) { grid-area: b_2; }
				&:nth-of-type(4) { grid-area: b_3; }
				&:nth-of-type(5) { grid-area: b_4; }
			}
		}
	}

	.p-body-main:not(.p-body-main--withSidebar)
	{
		@media (min-width: @xf-responsiveWide)
		{
			.m-maxPreviewColumns();
		}
	}

	.p-body-main--withSidebar
	{
		@media (min-width: (@xf-responsiveWide + @xf-sidebarWidth))
		{
			.m-maxPreviewColumns();
		}
	}
}]]></template>
    <template title="message_macros" type="public" addon_id="XF" version_id="2020870" version_string="2.2.8"><![CDATA[<xf:macro name="user_info"
	arg-user="!"
	arg-fallbackName="">

	<section itemscope itemtype="https://schema.org/Person" class="message-user">
		<div class="message-avatar {{ ($xf.options.showMessageOnlineStatus && $user && $user.isOnline()) ? 'message-avatar--online' : '' }}">
			<div class="message-avatar-wrapper">
				<xf:if is="$xf.reply.template == 'thread_view'">
					<xf:avatar user="$user" size="{{ property('dt_message_avatar_size') }}" defaultname="{$fallbackName}" itemprop="image" />
				<xf:else />
					<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
				</xf:if>
				<xf:if is="$xf.options.showMessageOnlineStatus && $user">
					<xf:if is="$user.isOnline()">
						<span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>
					<xf:elseif is="property('dt_offline_indicator')" />
						<span class="message-avatar-offline" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="Offline"></span>
					</xf:if>
				</xf:if>
			</div>
		</div>
		<div class="message-userDetails">
			<h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="name" /></h4>
			<xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="jobTitle" />
			<xf:if is="{$__globals.thread.user_id} == {$user.user_id} && (property('dt_thread_owner') != 'none')">
				<xf:if is="property('dt_thread_owner') == 'userbanner'">
					<div class="userBanner message-userBanner userBanner--owner">
						<span class="userBanner-before"></span>
							<strong>Thread Owner</strong>
						<span class="userBanner-after"></span>
					</div>
				<xf:elseif is="property('dt_thread_owner') == 'icon'" />
					<div class="threadOwner__icon" data-xf-init="tooltip" title="Thread Owner">
						<i class="fas fa-users-crown"></i>
					</div>
				</xf:if>
			</xf:if>
			<xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="jobTitle" />
		</div>
		<xf:if is="$user.user_id">
			<xf:set var="$extras" value="{{ property('messageUserElements') }}" />
			<xf:if contentcheck="true">
				<div class="message-userExtras{{ (property('dt_collapsible_extras') AND property('dt_messages_layout') == 'option1') ? ' message-userExtras-body message-userExtras--collapsible' : '' }}">
				<xf:contentcheck>
					<xf:if is="$extras.register_date">
						<dl class="pairs pairs--justified">
							<dt>{{ phrase('joined') }}</dt>
							<dd>{{ date($user.register_date) }}</dd>
						</dl>
					</xf:if>
					<xf:if is="$extras.message_count">
						<dl class="pairs pairs--justified">
							<dt>{{ phrase('messages') }}</dt>
							<dd>{$user.message_count|number}</dd>
						</dl>
					</xf:if>
					<xf:if is="$extras.solutions AND $user.question_solution_count">
						<dl class="pairs pairs--justified">
							<dt>{{ phrase('solutions') }}</dt>
							<dd>{$user.question_solution_count|number}</dd>
						</dl>
					</xf:if>
					<xf:if is="$extras.reaction_score">
						<dl class="pairs pairs--justified">
							<dt>{{ phrase('reaction_score') }}</dt>
							<dd>{$user.reaction_score|number}</dd>
						</dl>
					</xf:if>
					<xf:if is="$extras.trophy_points && $xf.options.enableTrophies">
						<dl class="pairs pairs--justified">
							<dt>{{ phrase('points') }}</dt>
							<dd>{$user.trophy_points|number}</dd>
						</dl>
					</xf:if>
					<xf:if is="$extras.age && $user.Profile.age">
						<dl class="pairs pairs--justified">
							<dt>{{ phrase('age') }}</dt>
							<dd>{$user.Profile.age}</dd>
						</dl>
					</xf:if>
					<xf:if is="$extras.location && $user.Profile.location">
						<dl class="pairs pairs--justified">
							<dt>{{ phrase('location') }}</dt>
							<dd>
								<xf:if is="$xf.options.geoLocationUrl">
									<a href="{{ link('misc/location-info', '', {'location': $user.Profile.location}) }}" rel="nofollow noreferrer" target="_blank" class="u-concealed">{$user.Profile.location}</a>
								<xf:else />
									{$user.Profile.location}
								</xf:if>
							</dd>
						</dl>
					</xf:if>
					<xf:if is="$extras.website && $user.Profile.website">
						<dl class="pairs pairs--justified">
							<dt>{{ phrase('website') }}</dt>
							<dd><a href="{$user.Profile.website}" rel="nofollow" target="_blank">{$user.Profile.website|url('host', phrase('visit_site'))}</a></dd>
						</dl>
					</xf:if>
					<xf:if is="$extras.custom_fields">
						<xf:macro template="custom_fields_macros" name="custom_fields_values"
							arg-type="users"
							arg-group="personal"
							arg-set="{$user.Profile.custom_fields}"
							arg-additionalFilters="{{ ['message'] }}"
							arg-valueClass="pairs pairs--justified" />
						<xf:if is="$user.canViewIdentities()">
							<xf:macro template="custom_fields_macros" name="custom_fields_view"
								arg-type="users"
								arg-group="contact"
								arg-set="{$user.Profile.custom_fields}"
								arg-additionalFilters="{{ ['message'] }}"
								arg-valueClass="pairs pairs--justified" />
						</xf:if>
					</xf:if>
				</xf:contentcheck>
				</div>
			</xf:if>
		</xf:if>
		<span class="message-userArrow"></span>
	</section>
</xf:macro>

<xf:macro name="user_info_simple" arg-user="!" arg-fallbackName="">
	<header itemscope itemtype="https://schema.org/Person" class="message-user">
		<meta itemprop="name" content="{{ $user.username ?: $fallbackName }}">
		<div class="message-avatar">
			<div class="message-avatar-wrapper">
				<xf:avatar user="$user" size="s" defaultname="{$fallbackName}" itemprop="image" />
			</div>
		</div>
		<span class="message-userArrow"></span>
	</header>
</xf:macro>

<xf:macro name="attachments" arg-attachments="!" arg-message="!" arg-canView="!">
	<xf:if contentcheck="true">
		<xf:css src="attachments.less" />
		<section class="message-attachments">
			<h4 class="block-textHeader">{{ phrase('attachments') }}</h4>
			<ul class="attachmentList">
				<xf:contentcheck>
					<xf:foreach loop="$attachments" value="$attachment" if="!$message.isAttachmentEmbedded($attachment)">
						<xf:macro template="attachment_macros" name="attachment_list_item"
							arg-attachment="{$attachment}"
							arg-canView="{$canView}" />
					</xf:foreach>
				</xf:contentcheck>
			</ul>
		</section>
	</xf:if>
</xf:macro>

<xf:macro name="signature" arg-user="!">
	<xf:if is="$xf.visitor.Option.content_show_signature AND $user.Profile.signature">
		<xf:if contentcheck="true">
			<aside class="message-signature">
			<xf:contentcheck>
				{{ bb_code($user.Profile.signature, 'user:signature', $user) }}
			</xf:contentcheck>
			</aside>
		</xf:if>
	</xf:if>
</xf:macro>]]></template>
    <template title="node_list.less" type="public" addon_id="XF" version_id="2020371" version_string="2.2.3 Patch 1"><![CDATA[@_nodeList-statsCellBreakpoint: 1000px;

.node
{
	& + .node
	{
		border-top: @xf-borderSize solid @xf-borderColor;
	}
}

.block.block--category
{
	.block-body
	{
		.xf-contentBase();
		.xf-blockBorder();
		border-radius: @xf-blockBorderRadius;
	}
}

.node-body
{
	display: table;
	table-layout: fixed;
	width: 100%;
}

.node-icon
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	width: 46px;
	padding: @xf-paddingLargest 0 @xf-paddingLargest @xf-paddingLargest;

	i
	{
		display: block;
		line-height: 1.125;
		font-size: 24px;

		&:before
		{
			.m-faBase();

			color: @xf-nodeIconReadColor;

			.node--unread &
			{
				opacity: 1;
				color: @xf-nodeIconUnreadColor;
			}
		}

		.node--category &:before
		{
			.m-faContent(@fa-var-{{ property('dt_node_icon') }}, 1em);
		}

		.node--search &::before
		{
			.m-faContent(@fa-var-search);
		}

		.node--page &:before
		{
			.m-faContent(@fa-var-{{ property('dt_page_node_icon') }}, .86em);
		}

		.node--link &:before
		{
			.m-faContent(@fa-var-{{ property('dt_link_node_icon') }}, .93em);
		}
	}
}

.node-main
{
	display: table-cell;
	vertical-align: middle;
	padding: @xf-paddingLargest;
}

.node-stats
{
	display: table-cell;
	width: 140px;
	vertical-align: middle;
	text-align: center;
	padding: @xf-paddingLargest 0;

	> dl.pairs.pairs--rows
	{
		width: 50%;
		float: left;
		margin: 0;
		padding: 0 @xf-paddingMedium/2;

		&:first-child
		{
			padding-left: 0;
			border-right: @xf-borderSize solid @xf-borderColor;
		}

		&:last-child
		{
			padding-right: 0;
		}
	}

	&.node-stats--single
	{
		width: 100px;

		> dl.pairs.pairs--rows
		{
			width: 100%;
			float: none;
		}
	}

	&.node-stats--triple
	{
		width: 240px;

		> dl.pairs.pairs--rows
		{
			width: 33.333%;
		}
	}

	@media (max-width: @_nodeList-statsCellBreakpoint)
	{
		display: none;
	}
}

@_nodeExtra-avatarSize: 28px;

.node-extra
{
	display: table-cell;
	vertical-align: middle;
	width: 280px;
	padding: @xf-paddingLargest;

	font-size: @xf-fontSizeSmall;
}

.node-extra-row
{
	.m-overflowEllipsis();
	color: @xf-textColorMuted;
}

.node-extra-icon
{
	padding-top: 5px;
	padding-right: @xf-paddingLarge;
	float: left;

	.avatar
	{
		.m-avatarSize(@_nodeExtra-avatarSize);
	}
}

.node-title
{
	margin: 0;
	padding: 0;
	font-size: @xf-fontSizeLarge;
	font-weight: @xf-fontWeightNormal;

	.node--unread &
	{
		font-weight: @xf-fontWeightHeavy;
	}
}

.node-description
{
	font-size: @xf-fontSizeSmall;
	color: @xf-textColorDimmed;

	&.node-description--tooltip
	{
		.has-js:not(.has-touchevents) &
		{
			display: none;
		}
	}
}

.node-meta
{
	font-size: @xf-fontSizeSmall;
}

.node-statsMeta
{
	display: none;

	@media (max-width: @_nodeList-statsCellBreakpoint)
	{
		display: inline;
	}
}

.node-bonus
{
	font-size: @xf-fontSizeSmall;
	color: @xf-textColorMuted;
	text-align: right;
}

.node-subNodesFlat
{
	font-size: @xf-fontSizeSmall;
	margin-top: .3em;

	.node-subNodesLabel
	{
		display: none;
	}
}

.node-subNodeMenu
{
	display: inline;

	.menuTrigger
	{
		color: @xf-textColorMuted;
	}
}

@media (max-width: @xf-responsiveMedium)
{
	.node-main
	{
		display: block;
		width: auto;

		.node--link &,
		.node--page &
		{
			// #168882: we only display the title for these types
			// so keep these as table-cells for vertical alignment
			display: table-cell;
		}
	}

	.node-extra
	{
		display: block;
		width: auto;
		// this gives an equivalent of medium padding between main and extra, with main still having large
		margin-top: (@xf-paddingMedium - @xf-paddingLarge);
		padding-top: 0;
	}

	.node-extra-row
	{
		display: inline-block;
		vertical-align: top;
		max-width: 100%;
	}

	.node-extra-icon
	{
		display: none;
	}

	.node-description,
	.node-stats,
	.node-subNodesFlat
	{
		display: none;
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.node-subNodeMenu
	{
		display: none;
	}
}

.subNodeLink
{
	&:before,
	.subNodeLink-icon
	{
		display: inline-block;
		width: 1.28571429em;
		margin-right: .3em;
		text-decoration: none;
		text-align: center;

		color: @xf-nodeIconReadColor;
	}

	&:before
	{
		.m-faBase();
	}

	&:hover:before
	{
		&:before,
		.subNodeLink-icon
		{
			text-decoration: none;
		}
	}

	&.subNodeLink--unread
	{
		font-weight: @xf-fontWeightHeavy;

		&:before,
		.subNodeLink-icon
		{
			color: @xf-nodeIconUnreadColor;
		}
	}

	&.subNodeLink--category:before
	{
		.m-faContent(@fa-var-comments);
	}

	&.subNodeLink--page:before
	{
		.m-faContent(@fa-var-file-alt);
	}

	&.subNodeLink--link:before
	{
		.m-faContent(@fa-var-link);
	}

	&.subNodeLink--search::before
	{
		.m-faContent(@fa-var-search);
	}
}

.node-subNodeFlatList
{
	.m-listPlain();
	.m-clearFix();

	> li
	{
		display: inline-block;
		margin-right: 1em;

		&:last-child
		{
			margin-right: 0;
		}
	}

	ol,
	ul,
	.node-subNodes
	{
		display: none;
	}
}

.subNodeMenu
{
	.m-listPlain();

	ol,
	ul
	{
		.m-listPlain();
	}

	.subNodeLink
	{
		display: block;
		padding: @xf-blockPaddingV @xf-blockPaddingH;
		color: @xf-menuLinkRow--color;
		text-decoration: none;
		cursor: pointer;

		&:hover
		{
			.xf-menuLinkRowSelected();
		}
	}

	li li .subNodeLink { padding-left: 1.5em; }
	li li li .subNodeLink { padding-left: 3em; }
	li li li li .subNodeLink { padding-left: 4.5em; }
	li li li li li .subNodeLink { padding-left: 6em; }
	li li li li li li .subNodeLink { padding-left: 7.5em; }
}]]></template>
    <template title="node_list_category" type="public" addon_id="XF" version_id="2010270" version_string="2.1.2"><![CDATA[<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
	<div class="block block--category block--category{$node.node_id}">
		<span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span>
		<div class="block-container">
			<h2 class="block-header">
				
				<xf:if is="property('dt_cat_description') == 'option3' && {$node.description}">
					<a href="{{ link('categories', $node) }}" data-xf-init="tooltip" title="{$node.description|raw}">{$node.title}</a>
				<xf:else />
					<a href="{{ link('categories', $node) }}">{$node.title}</a>
				</xf:if>
				
				<xf:if is="property('dt_cat_description') != 'option3' && {$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>
				
				<xf:if is="property('dt_collapsible_categories')">
					<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}" title="Toggle Visibilty" data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
				</xf:if>
			</h2>
			
			<xf:if is="property('dt_catstrips_minorheader')">
				<div class="block-subheader">
					<span class="block-subheader--main">{{ phrase('forum') }}</span>
					<span class="block-subheader--stats">{{ phrase('threads') }}</span>
					<span class="block-subheader--stats">{{ phrase('messages') }}</span>
					<span class="block-subheader--last">Last Post</span>
				</div>
			</xf:if>
	
			<xf:if is="property('dt_collapsible_categories')">
				<div class="block-body block-body--collapsible {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">
			<xf:else />
				<div class="block-body">
			</xf:if>
				<xf:macro template="forum_list" name="node_list"
					arg-children="{$children}"
					arg-extras="{$childExtras}"
					arg-depth="{{ $depth + 1 }}" />
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro name="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
	<div class="node node--id{$node.node_id} node--depth{$depth} node--category {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
		<div class="node-body">
			<span class="node-icon" aria-hidden="true"><i></i></span>
			<div class="node-main js-nodeMain">
				<xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
				<h3 class="node-title">
					<a href="{{ link('categories', $node) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
				</h3>
				<xf:if is="$descriptionDisplay != 'none' && $node.description">
					<div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
				</xf:if>

				<div class="node-meta">
					<xf:if is="!{$extras.privateInfo}">
						<div class="node-statsMeta">
							<dl class="pairs pairs--inline">
								<dt>{{ phrase('threads') }}</dt>
								<dd>{$extras.discussion_count|number_short(1)}</dd>
							</dl>
							<dl class="pairs pairs--inline">
								<dt>{{ phrase('messages') }}</dt>
								<dd>{$extras.message_count|number_short(1)}</dd>
							</dl>
						</div>
					</xf:if>

					<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
						<xf:macro template="forum_list" name="sub_nodes_menu"
							arg-children="{$children}"
							arg-childExtras="{$childExtras}"
							arg-depth="{{ $depth + 1 }}" />
					</xf:if>
				</div>

				<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
					<xf:macro template="forum_list" name="sub_nodes_flat"
						arg-children="{$children}"
						arg-childExtras="{$childExtras}"
						arg-depth="{{ $depth + 1 }}" />
				</xf:if>
			</div>

			<xf:if is="!{$extras.privateInfo}">
				<div class="node-stats">
					<dl class="pairs pairs--rows">
						<dt>{{ phrase('threads') }}</dt>
						<dd>{$extras.discussion_count|number_short(1)}</dd>
					</dl>
					<dl class="pairs pairs--rows">
						<dt>{{ phrase('messages') }}</dt>
						<dd>{$extras.message_count|number_short(1)}</dd>
					</dl>
				</div>
			</xf:if>

			<div class="node-extra">
				<xf:if is="{$extras.privateInfo}">
					<span class="node-extra-placeholder">{{ phrase('private') }}</span>
				<xf:elseif is="{$extras.LastThread}" />
					<div class="node-extra-icon">
						<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
							<xf:avatar user="{{ null }}" size="xs" />
						<xf:else />
							<xf:avatar user="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" size="xs" />
						</xf:if>
					</div>
					<div class="node-extra-row">
						<xf:if is="$extras.LastThread.isUnread()">
							<a href="{{ link('threads/unread', $extras.LastThread) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
						<xf:else />
							<a href="{{ link('threads/post', $extras.LastThread, {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
						</xf:if>
					</div>
					<div class="node-extra-row">
						<ul class="listInline listInline--bullet">
							<li class="node-extra-date"><xf:date time="{$extras.last_post_date}" /></li>
							<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
								<li class="node-extra-user">{{ phrase('ignored_member') }}</li>
							<xf:else />
								<li class="node-extra-user"><xf:username user="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" /></li>
							</xf:if>
						</ul>
					</div>
				<xf:else />
					<span class="node-extra-placeholder">{{ phrase('none') }}</span>
				</xf:if>
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro name="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
	<li>
		<a href="{{ link('categories', $node) }}" class="subNodeLink subNodeLink--category {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">{$node.title}</a>
		<xf:macro template="forum_list" name="sub_node_list"
			arg-children="{$children}"
			arg-childExtras="{$childExtras}"
			arg-depth="{{ $depth + 1 }}" />
	</li>
</xf:macro>]]></template>
    <template title="node_list_forum" type="public" addon_id="XF" version_id="2020270" version_string="2.2.2"><![CDATA[<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
	<div class="block">
		<div class="block-container">
			<div class="block-body">
				<xf:macro name="forum"
					arg-node="{$node}"
					arg-extras="{$extras}"
					arg-children="{$children}"
					arg-childExtras="{$childExtras}"
					arg-depth="{$depth}" />
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro name="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
	<xf:macro name="forum"
		arg-node="{$node}"
		arg-extras="{$extras}"
		arg-children="{$children}"
		arg-childExtras="{$childExtras}"
		arg-depth="{$depth}" />
</xf:macro>

<xf:macro name="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
	<li>
		<a href="{{ link('forums', $node) }}" class="subNodeLink subNodeLink--forum {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">
			<xf:fa icon="{{ $node.Data.TypeHandler.getTypeIconClass() ?: 'fa-comments' }}" class="subNodeLink-icon" />{$node.title}
		</a>
		<xf:macro template="forum_list" name="sub_node_list"
			arg-children="{$children}"
			arg-childExtras="{$childExtras}"
			arg-depth="{{ $depth + 1 }}" />
	</li>
</xf:macro>

<xf:macro name="forum"
	arg-node="!"
	arg-extras="!"
	arg-children="!"
	arg-childExtras="!"
	arg-depth="!"
	arg-chooseName=""
	arg-bonusInfo="">

	<div class="node node--id{$node.node_id} node--depth{$depth} node--forum {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
		<div class="node-body">
			<span class="node-icon" aria-hidden="true">
				<xf:fa icon="{{ $node.Data.TypeHandler.getTypeIconClass() ?: 'fa-comments' }}" />
			</span>
			<div class="node-main js-nodeMain">
				<xf:if is="$chooseName">
					<xf:checkbox standalone="true">
						<xf:option labelclass="u-pullRight" class="js-chooseItem" name="{$chooseName}[]" value="{$node.node_id}" />
					</xf:checkbox>
				</xf:if>

				<xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
				<h3 class="node-title">
					<a href="{{ link('forums', $node) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
					<xf:if is="property('dt_new_indicator')"><span class="node--newIndicator">{{ phrase('new') }}</span></xf:if>
				</h3>
				<xf:if is="$descriptionDisplay != 'none' && $node.description">
					<div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
				</xf:if>

				<div class="node-meta">
					<xf:if is="!{$extras.privateInfo}">
						<div class="node-statsMeta">
							<xf:if is="property('dt_nodestat_simple') AND !property('dt_catstrips_minorheader')">
								<dl class="pairs pairs--inline">
									<dt>{{ phrase('threads') }}</dt>
									<dd>{$extras.discussion_count|number_short(1)}</dd>
								</dl>
							<xf:else />
								<dl class="pairs pairs--inline">
									<dt>{{ phrase('threads') }}</dt>
									<dd>{$extras.discussion_count|number_short(1)}</dd>
								</dl>
								<dl class="pairs pairs--inline">
									<dt>{{ phrase('messages') }}</dt>
									<dd>{$extras.message_count|number_short(1)}</dd>
								</dl>
							</xf:if>
						</div>
					</xf:if>

					<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
						<xf:macro template="forum_list" name="sub_nodes_menu"
							arg-children="{$children}"
							arg-childExtras="{$childExtras}"
							arg-depth="{{ $depth + 1 }}" />
					</xf:if>
				</div>

				<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
					<xf:macro template="forum_list" name="sub_nodes_flat"
						arg-children="{$children}"
						arg-childExtras="{$childExtras}"
						arg-depth="{{ $depth + 1 }}" />
				</xf:if>

				<xf:if is="$bonusInfo is not empty">
					<div class="node-bonus">{$bonusInfo}</div>
				</xf:if>
			</div>

			<xf:if is="!{$extras.privateInfo}">
				<div class="node-stats">
					<xf:if is="property('dt_nodestat_simple') AND !property('dt_catstrips_minorheader')">
						<dl class="pairs pairs--rows">
							<dd>{$extras.discussion_count|number_short(1)}</dd>
							<dt>{{ phrase('threads') }}</dt>
						</dl>
					<xf:else />
						<dl class="pairs pairs--rows">
							<dd>{$extras.discussion_count|number_short(1)}</dd>
							<dt>{{ phrase('threads') }}</dt>
						</dl>
						<dl class="pairs pairs--rows">
							<dd>{$extras.message_count|number_short(1)}</dd>
							<dt>{{ phrase('messages') }}</dt>
						</dl>
					</xf:if>
				</div>
			</xf:if>

			<div class="node-extra">
				<xf:if is="{$extras.privateInfo}">
					<span class="node-extra-placeholder">{{ phrase('private') }}</span>
				<xf:elseif is="{$extras.LastThread}" />
					<div class="node-extra-icon">
						<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
							<xf:avatar user="{{ null }}" size="xs" />
						<xf:else />
							<xf:avatar user="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" size="xs" />
						</xf:if>
					</div>
					<div class="node-extra-row">
						<xf:if is="$extras.LastThread.isUnread()">
							<a href="{{ link('threads/unread', $extras.LastThread) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
						<xf:else />
							<a href="{{ link('threads/post', $extras.LastThread, {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
						</xf:if>
					</div>
					<div class="node-extra-row">
						<ul class="listInline listInline--bullet">
							<li><xf:date time="{$extras.last_post_date}" class="node-extra-date" /></li>
							<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
								<li class="node-extra-user">{{ phrase('ignored_member') }}</li>
							<xf:else />
								<li class="node-extra-user"><xf:username user="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" /></li>
							</xf:if>
						</ul>
					</div>
				<xf:else />
					<span class="node-extra-placeholder">{{ phrase('none') }}</span>
				</xf:if>
			</div>
		</div>
	</div>

	<xf:if is="{$depth} == 1">
		<xf:macro template="forum_list" name="node_list"
			arg-children="{$children}"
			arg-extras="{$childExtras}"
			arg-depth="{{ $depth + 1 }}" />
	</xf:if>
</xf:macro>]]></template>
    <template title="node_list_search_forum" type="public" addon_id="XF" version_id="2020671" version_string="2.2.6 Patch 1"><![CDATA[<xf:macro name="depth1"
	arg-node="!"
	arg-extras="!"
	arg-children="!"
	arg-childExtras="!"
	arg-depth="1">

	<div class="block">
		<div class="block-container">
			<div class="block-body">
				<xf:macro name="search_forum"
					arg-node="{$node}"
					arg-extras="{$extras}"
					arg-children="{$children}"
					arg-childExtras="{$childExtras}"
					arg-depth="{$depth}" />
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro name="depth2"
	arg-node="!"
	arg-extras="!"
	arg-children="!"
	arg-childExtras="!"
	arg-depth="1">

	<xf:macro name="search_forum"
		arg-node="{$node}"
		arg-extras="{$extras}"
		arg-children="{$children}"
		arg-childExtras="{$childExtras}"
		arg-depth="{$depth}" />
</xf:macro>

<xf:macro name="depthN"
	arg-node="!"
	arg-extras="!"
	arg-children="!"
	arg-childExtras="!"
	arg-depth="1">

	<li>
		<a href="{{ link('search-forums', $node) }}" class="subNodeLink subNodeLink--search">{$node.title}</a>

		<xf:macro template="forum_list" name="sub_node_list"
			arg-children="{$children}"
			arg-childExtras="{$childExtras}"
			arg-depth="{{ $depth + 1 }}" />
	</li>
</xf:macro>

<xf:macro name="search_forum"
	arg-node="!"
	arg-extras="!"
	arg-children="{$children}"
	arg-childExtras="{$childExtras}"
	arg-depth="!">

	<div class="node node--id{$node.node_id} node--depth{$depth} node--search">
		<div class="node-body">
			<span class="node-icon" aria-hidden="true"><i></i></span>

			<div class="node-main js-nodeMain">
				<xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />

				<h3 class="node-title">
					<a
						href="{{ link('search-forums', $node) }}"
						data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}"
						data-shortcut="node-description">

						{$node.title}
					</a>
				</h3>

				<xf:if is="$descriptionDisplay != 'none' && $node.description">
					<div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">
						{$node.description|raw}
					</div>
				</xf:if>

				<div class="node-meta">
					<div class="node-statsMeta">
						<xf:if is="property('dt_nodestat_simple') AND !property('dt_catstrips_minorheader')">
							<dl class="pairs pairs--inline">
								<dt>{{ phrase('threads') }}</dt>
								<dd>{$extras.discussion_count|number_short(1)}{{ $extras.discussion_count == $extras.max_results ? '+' : ''}}</dd>
							</dl>
						<xf:else />
							<dl class="pairs pairs--inline">
								<dt>{{ phrase('threads') }}</dt>
								<dd>{$extras.discussion_count|number_short(1)}{{ $extras.discussion_count == $extras.max_results ? '+' : ''}}</dd>
							</dl>

							<dl class="pairs pairs--inline">
								<dt>{{ phrase('messages') }}</dt>
								<dd>{$extras.message_count|number_short(1)}</dd>
							</dl>
						</xf:if>
					</div>

					<xf:if is="$depth == 2 && property('nodeListSubDisplay') == 'menu'">
						<xf:macro template="forum_list" name="sub_nodes_menu"
							arg-children="{$children}"
							arg-childExtras="{$childExtras}"
							arg-depth="{{ $depth + 1 }}" />
					</xf:if>
				</div>

				<xf:if is="$depth == 2 && property('nodeListSubDisplay') == 'flat'">
					<xf:macro template="forum_list" name="sub_nodes_flat"
						arg-children="{$children}"
						arg-childExtras="{$childExtras}"
						arg-depth="{{ $depth + 1 }}" />
				</xf:if>
			</div>

			<div class="node-stats">
				<xf:if is="property('dt_nodestat_simple') AND !property('dt_catstrips_minorheader')">
					<dl class="pairs pairs--rows">
						<dd>{$extras.discussion_count|number_short(1)}{{ $extras.discussion_count == $extras.max_results ? '+' : ''}}</dd>
						<dt>{{ phrase('threads') }}</dt>
					</dl>
				<xf:else />
					<dl class="pairs pairs--rows">
						<dd>{$extras.discussion_count|number_short(1)}{{ $extras.discussion_count == $extras.max_results ? '+' : ''}}</dd>
						<dt>{{ phrase('threads') }}</dt>
					</dl>

					<dl class="pairs pairs--rows">
						<dd>{$extras.message_count|number_short(1)}</dd>
						<dt>{{ phrase('messages') }}</dt>
					</dl>
				</xf:if>
			</div>

			<div class="node-extra">
				<xf:if is="$extras.discussion_count">
					<xf:if is="$extras.LastThread">
						<div class="node-extra-icon">
							<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
								<xf:avatar user="{{ null }}" size="xs" />
							<xf:else />
								<xf:avatar user="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" size="xs" />
							</xf:if>
						</div>

						<div class="node-extra-row">
							<xf:if is="$extras.LastThread.isUnread()">
								<a href="{{ link('threads/unread', $extras.LastThread) }}" class="node-extra-title" title="{$extras.LastThread.title}">
									{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}
								</a>
							<xf:else />
								<a href="{{ link('threads/post', $extras.LastThread, {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.LastThread.title}">
									{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}
								</a>
							</xf:if>
						</div>

						<div class="node-extra-row">
							<ul class="listInline listInline--bullet">
								<li><xf:date time="{$extras.last_post_date}" class="node-extra-date" /></li>
								<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
									<li class="node-extra-user">{{ phrase('ignored_member') }}</li>
								<xf:else />
									<li class="node-extra-user"><xf:username user="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" /></li>
								</xf:if>
							</ul>
						</div>
					<xf:else />
						<span class="node-extra-placeholder">{{ phrase('private') }}</span>
					</xf:if>
				<xf:else />
					<span class="node-extra-placeholder">{{ phrase('none') }}</span>
				</xf:if>
			</div>
		</div>
	</div>

	<xf:if is="{$depth} == 1">
		<xf:macro template="forum_list" name="node_list"
			arg-children="{$children}"
			arg-extras="{$childExtras}"
			arg-depth="{{ $depth + 1 }}" />
	</xf:if>
</xf:macro>]]></template>
    <template title="notice_macros" type="public" addon_id="XF" version_id="2020270" version_string="2.2.2"><![CDATA[<xf:macro name="notice_list" arg-type="!" arg-notices="!">
	<xf:if is="{$notices} is not empty">
		<xf:css src="notices.less" />
		<xf:js src="xf/notice.js" min="1" />
		<xf:if is="$type == 'scrolling'">
			<xf:css src="lightslider.less" />
			<xf:js prod="xf/carousel-compiled.js" dev="vendor/lightslider/lightslider.min.js, xf/carousel.js" />
		</xf:if>

		<ul class="notices notices--{$type} {{ count($notices) > 1 ? 'notices--isMulti' : '' }} js-notices"
			data-xf-init="notices"
			data-type="{$type}"
			data-scroll-interval="{{ property('noticeScrollInterval') }}">

			<xf:foreach loop="{$notices}" value="$notice">
				<xf:macro name="notice" arg-notice="{$notice}" arg-type="{$type}" arg-contentHtml="{$notice.message}" />
			</xf:foreach>
		</ul>
	</xf:if>
</xf:macro>

<xf:macro name="notice" arg-notice="!" arg-type="!" arg-contentHtml="!">
	<li class="notice js-notice {{ $notice.display_style == 'custom' ? $notice.css_class : 'notice--' . $notice.display_style }}{{ $notice.display_image ? ' notice--hasImage' : '' }}{{ $notice.visibility ? ' notice--hide' . $notice.visibility : '' }}"
		data-notice-id="{$notice.notice_id}"
		data-delay-duration="{$notice.delay_duration}"
		data-display-duration="{$notice.display_duration}"
		data-auto-dismiss="{$notice.auto_dismiss}"
		data-visibility="{$notice.visibility}">

		<xf:if is="$notice.display_image == 'avatar'">
			<div class="notice-image"><xf:avatar user="$xf.visitor" size="s" href="" /></div>
		<xf:elseif is="$notice.display_image == 'image'" />
			<div class="notice-image"><img src="{{ base_url($notice.image_url) }}" alt="" /></div>
		</xf:if>
		
		<div class="notice-container">
			<span class="notice-icon"><i class="fal fa-exclamation-circle"></i></span>
			<div class="notice-content">
				<xf:if is="$notice.dismissible AND !$notice.custom_dismissible">
					<a href="{{ link('account/dismiss-notice', null, {'notice_id': $notice.notice_id}) }}" class="notice-dismiss js-noticeDismiss" data-xf-init="tooltip" title="{{ phrase('dismiss_notice')|for_attr }}"></a>
				</xf:if>
				{$contentHtml|raw}
			</div>
		</div>
	</li>
</xf:macro>]]></template>
    <template title="notices.less" type="public" addon_id="XF" version_id="2021270" version_string="2.2.12"><![CDATA[@_notice-darkBg: #495057;
@_notice-lightBg: #fefefe;
@_notice-floatingFade: 80%;
@_notice-imageSize: 48px;
@_notice-padding: @xf-paddingLarge;

.notices
{
	.m-listPlain();

	&.notices--block
	{
		.notice
		{
			margin-bottom: ((@xf-elementSpacer) / 2);
		}
	}

	&.notices--floating
	{
		// assumed to be within u-bottomFixer
		margin: 0 20px 0 auto;
		width: 300px;
		max-width: 100%;
		z-index: @zIndex-8;

		@media (max-width: 340px)
		{
			margin-right: 10px;
		}

		.notice
		{
			margin-bottom: 20px;
		}
	}

	&.notices--scrolling
	{
		display: flex;
		align-items: stretch;
		overflow: hidden;
		.xf-blockBorder();
		margin-bottom: ((@xf-elementSpacer) / 2);

		&.notices--isMulti
		{
			margin-bottom: ((@xf-elementSpacer) / 2) + 20px;
		}

		.notice
		{
			width: 100%;
			flex-grow: 0;
			flex-shrink: 0;
			border: none;
		}
	}
}

.noticeScrollContainer
{
	margin-bottom: ((@xf-elementSpacer) / 2);

	.lSSlideWrapper
	{
		.xf-blockBorder();
	}

	.notices.notices--scrolling
	{
		border: none;
		margin-bottom: 0;
	}
}

.notice-container
{
	display: flex;
	border-radius: 4px;
	overflow: hidden;
}

.notice-icon
{
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 auto;
	width: 65px;
	font-size: 24px;
}

.notice
{
	.m-clearFix();
	position: relative;
	.xf-contentBase();
	.xf-blockBorder();

	&.notice--primary
	{
		border-color: @xf-borderColorHighlight;
		
		.notice-icon
		{
			.xf-contentHighlightBase();
		}
	}

	&.notice--accent
	{
		border-color: @xf-borderColorAccentContent;
		
		.notice-icon
		{
			.xf-contentAccentBase();
		}

		a:not(.button--notice)
		{
			.xf-contentAccentLink();
		}
	}

	&.notice--dark
	{
		border-color: @_notice-darkBg;
		
		.notice-icon
		{
			color: #fefefe;
			border: none;
			background: @_notice-darkBg;
		}

		a:not(.button--notice)
		{
			color: rgb(180, 180, 180);
		}
	}

	&.notice--light
	{
		border-color: @xf-borderColor;
		
		.notice-icon
		{
			color: rgb(20, 20, 20);
			background: @_notice-lightBg;
		}

		a:not(.button--notice)
		{
			color: rgb(130, 130, 130);
		}
	}

	&.notice--enablePush
	{
		display: none;

		@media (max-width: @xf-responsiveWide)
		{
			padding: @xf-paddingSmall @xf-paddingSmall @xf-paddingLarge;
			font-size: @xf-fontSizeSmall;
		}
	}

	&.notice--cookie
	{
		@media (max-width: @xf-responsiveWide)
		{
			.notice-content
			{
				padding: @xf-paddingSmall @xf-paddingSmall @xf-paddingLarge;
				font-size: @xf-fontSizeSmaller;

				.button--notice
				{
					font-size: @xf-fontSizeSmaller;
					padding: @xf-paddingSmall @xf-paddingMedium;

					.button-text
					{
						font-size: @xf-fontSizeSmaller;
					}
				}
			}
		}
	}

	.notices--block &
	{
		font-size: @xf-fontSizeNormal;
		border-radius: @xf-blockBorderRadius;
	}

	.notices--floating &
	{
		font-size: @xf-fontSizeSmallest;
		border-radius: @xf-borderRadiusMedium;
		box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);

		&.notice--primary
		{
			background-color: fade(@xf-contentHighlightBase--background-color, @_notice-floatingFade);
			color: @xf-contentHighlightBase--color;
		}

		&.notice--accent
		{
			background-color: fade(@xf-contentAccentBase--background-color, @_notice-floatingFade);
			color: @xf-contentAccentBase--color;
		}

		&.notice--dark
		{
			background-color: fade(@_notice-darkBg, @_notice-floatingFade);
		}

		&.notice--light
		{
			background-color: fade(@_notice-lightBg, @_notice-floatingFade);
		}

		.has-js &
		{
			display: none;
		}
	}

	&.notice--hasImage
	{
		.notice-content
		{
			margin-left: ((@_notice-imageSize) + (@_notice-padding) * 2);
			min-height: ((@_notice-imageSize) + (@_notice-padding) * 2);
		}
	}

	// note: visibility hidden is used by the JS to detect when responsiveness is hiding a notice

	@media (max-width: @xf-responsiveWide)
	{
		&.notice--hidewide:not(.is-vis-processed)
		{
			display: none;
			visibility: hidden;
		}
	}
	@media (max-width: @xf-responsiveMedium)
	{
		&.notice--hidemedium:not(.is-vis-processed)
		{
			display: none;
			visibility: hidden;
		}
	}
	@media (max-width: @xf-responsiveNarrow)
	{
		&.notice--hidenarrow:not(.is-vis-processed)
		{
			display: none;
			visibility: hidden;
		}
	}
}

.notice-image
{
	float: left;
	padding: @_notice-padding 0 @_notice-padding @_notice-padding;

	img
	{
		max-width: @_notice-imageSize;
		max-height: @_notice-imageSize;
	}
}

.notice-content
{
	flex: 1 1 auto;
	padding: @_notice-padding;

	a.notice-dismiss
	{
		&:before
		{
			.m-faBase();

			.m-faContent(@fa-var-times, .75em);
		}

		float: right;

		color: inherit;
		font-size: 16px;
		line-height: 1;
		height: 1em;
		box-sizing: content-box;
		padding: 0 0 5px 5px;

		opacity: .5;
		.m-transition(opacity);

		cursor: pointer;

		&:hover
		{
			text-decoration: none;
			opacity: 1;
		}

		.notices--floating &
		{
			font-size: 14px;
		}
	}
}]]></template>
    <template title="post_macros" type="public" addon_id="XF" version_id="2020670" version_string="2.2.6"><![CDATA[<xf:macro name="post"
	arg-post="!"
	arg-thread="!"
	arg-highlightedPosts="{{ [] }}">

	<xf:css src="message.less" />

	<xf:extension name="before"></xf:extension>

	<xf:extension name="extra_classes" value="message--post" />
	<article class="message {{ extension_value('extra_classes') }} js-post js-inlineModContainer {{ $post.position % $xf.options.messagesPerPage == 0 ? 'is-first' : '' }} {{ $post.isIgnored() ? 'is-ignored' : '' }} {{ $post.isUnread() ? ' is-unread' : '' }}"
		data-author="{{ $post.User.username ?: $post.username }}"
		data-content="post-{$post.post_id}"
		id="js-post-{$post.post_id}">

		<span class="u-anchorTarget" id="post-{$post.post_id}"></span>

		<xf:extension name="full_body">
			<div class="message-inner">
				<xf:extension name="user_cell">
					<div class="message-cell message-cell--user">
						<xf:macro template="message_macros" name="user_info" arg-user="{$post.User}"
							arg-fallbackName="{$post.username}"/>
						<xf:if is="property('dt_collapsible_extras') && property('dt_messages_layout') == 'option1'"><span id="collapse-{$post.post_id}" class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="#js-post-{$post.post_id} .message-userExtras"></span></xf:if>
					</div>
				</xf:extension>

				<xf:extension name="main_cell">
					<div class="message-cell message-cell--main">
					<xf:extension name="main_cell_inner">
						<div class="message-main js-quickEditTarget">

							<xf:extension name="attribution">
								<xf:macro name="post_attribution" arg-post="{$post}" arg-thread="{$thread}" />
							</xf:extension>

							<div class="message-content js-messageContent">
							<xf:extension name="content">

								<xf:extension name="notices">
									<xf:macro name="post_notices" arg-post="{$post}" arg-thread="{$thread}" />
								</xf:extension>

								<xf:extension name="user_content">
									<xf:macro name="post_user_content" arg-post="{$post}" arg-thread="{$thread}" />
								</xf:extension>

								<xf:extension name="after_content">
									<xf:macro name="post_last_edit" arg-post="{$post}" />
								</xf:extension>

								<xf:extension name="signature">
									<xf:macro template="message_macros" name="signature" arg-user="{$post.User}" />
								</xf:extension>

							</xf:extension>
							</div>

							<xf:extension name="footer">
								<xf:macro name="post_footer" arg-post="{$post}" arg-thread="{$thread}" />
							</xf:extension>
						</div>

					</xf:extension>
					</div>
				</xf:extension>
			</div>
		</xf:extension>
	</article>

	<xf:extension name="after"></xf:extension>
	<xf:ad position="post_below_container" arg-post="{$post}" />
</xf:macro>

<xf:macro name="post_attribution"
	arg-post="!"
	arg-thread="!"
	arg-showPosition="{{ true }}"
	arg-showUser="{{ false }}"
	arg-showThreadUnreadIndicator="{{ false }}"
	arg-showReplyCount="{{ false }}"
	arg-repliesPhrase="{{ phrase('replies:') }}"
	arg-showThreadStateIcons="{{ false }}"
	arg-mainClass=""
	arg-oppositeClass="">

	<header class="message-attribution message-attribution--split">
		<ul class="message-attribution-main listInline {$mainClass}">
			<xf:if is="$showThreadStateIcons">
				<xf:if is="{$xf.visitor.user_id} AND {$thread.Watch.{$xf.visitor.user_id}}">
					<li>
						<xf:fa icon="fa-bell" title="{{ phrase('thread_watched')|for_attr }}" />
						<span class="u-srOnly">{{ phrase('thread_watched') }}</span>
					</li>
				</xf:if>

				<xf:if is="$thread.sticky">
					<li>
						<xf:fa icon="fa-thumbtack" title="{{ phrase('sticky')|for_attr }}" />
						<span class="u-srOnly">{{ phrase('sticky') }}</span>
					</li>
				</xf:if>
			</xf:if>
			<xf:if is="$showUser">
				<xf:set var="$username"><xf:username user="{$post.User}" defaultname="{$post.username}" /></xf:set>
				<li class="u-concealed message-attribution-user--top">{{ phrase('by_user_x', {'name':$username}) }}</li>
			</xf:if>
			<li class="u-concealed">
				<a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" rel="nofollow">
					<xf:date time="{$post.post_date}" itemprop="datePublished" />
				</a>
			</li>
			<xf:if is="$showReplyCount && $thread.reply_count">
				<li class="u-concealed">
					<a href="{{ link('threads', $thread) }}#posts">
						<xf:fa icon="fa-comment" class="u-spaceAfter" />{$repliesPhrase|raw} {$thread.reply_count|number}
					</a>
				</li>
			</xf:if>
		</ul>

		<ul class="message-attribution-opposite message-attribution-opposite--list {$oppositeClass}">
			<xf:if is="$post.isUnread()">
				<li><span class="message-newIndicator">{{ phrase('new') }}</span></li>
			<xf:elseif is="$thread.isUnread() && $showThreadUnreadIndicator" />
				<li><span class="message-newIndicator" title="{{ phrase('new_replies')|for_attr }}">{{ phrase('new') }}</span></li>
			</xf:if>
			<li>
				<a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}"
					class="message-attribution-gadget"
					data-xf-init="share-tooltip"
					data-href="{{ link('posts/share', $post) }}"
					aria-label="{{ phrase('share')|for_attr }}"
					rel="nofollow">
					<xf:fa icon="fa-share-alt"/>
				</a>
			</li>
			<xf:if contentcheck="true">
				<li>
					<xf:contentcheck>
						<xf:macro template="bookmark_macros" name="link"
							arg-content="{$post}"
							arg-class="message-attribution-gadget bookmarkLink--highlightable"
							arg-confirmUrl="{{ link('posts/bookmark', $post) }}"
							arg-showText="{{ false }}"/>
					</xf:contentcheck>
				</li>
			</xf:if>
			<xf:if is="$showPosition">
				<li>
					<a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" rel="nofollow">
						#{{ number($post.position + 1) }}
					</a>
				</li>
			</xf:if>
		</ul>
	</header>
</xf:macro>

<xf:macro name="post_notices" arg-post="!" arg-thread="!">
	<xf:if is="$post.message_state == 'deleted'">
		<div class="messageNotice messageNotice--deleted">
			<xf:macro template="deletion_macros" name="notice" arg-log="{$post.DeletionLog}" />
		</div>
	<xf:elseif is="$post.message_state == 'moderated'" />
		<div class="messageNotice messageNotice--moderated">
			{{ phrase('this_message_is_awaiting_moderator_approval_and_is_invisible_to_normal') }}
		</div>
	</xf:if>
	<xf:if is="$post.warning_message">
		<div class="messageNotice messageNotice--warning">
			{$post.warning_message}
		</div>
	</xf:if>
	<xf:if is="$post.isIgnored()">
		<div class="messageNotice messageNotice--ignored">
			{{ phrase('you_are_ignoring_content_by_this_member') }}
			<xf:showignored />
		</div>
	</xf:if>
</xf:macro>

<xf:macro name="post_user_content" arg-post="!" arg-thread="!" arg-snippet="{{ false }}" arg-displayAds="{{ true }}">

	<div class="message-userContent lbContainer js-lbContainer {{ $post.isIgnored() ? 'is-ignored' : '' }}"
		data-lb-id="post-{$post.post_id}"
		data-lb-caption-desc="{{ $post.User ? $post.User.username : $post.username }} &middot; {{ date_time($post.post_date) }}">

		<xf:if is="$post.isFirstPost()">
			<xf:macro template="custom_fields_macros" name="custom_fields_view"
				arg-type="threads"
				arg-group="before"
				arg-onlyInclude="{$thread.Forum.field_cache}"
				arg-set="{$thread.custom_fields}"
				arg-wrapperClass="message-fields message-fields--before" />
		</xf:if>

		<article class="message-body js-selectToQuote">
			<xf:if is="$displayAds">
				<xf:ad position="post_above_content" arg-post="{$post}" />
			</xf:if>
			<xf:if is="$snippet">
				{{ bb_code_snippet($post.message, 'post', $post, $snippet) }}
			<xf:else />
				{{ bb_code($post.message, 'post', $post) }}
			</xf:if>
			<div class="js-selectToQuoteEnd">&nbsp;</div>
			<xf:if is="$displayAds">
				<xf:ad position="post_below_content" arg-post="{$post}" />
			</xf:if>
		</article>

		<xf:if is="$post.isFirstPost()">
			<xf:macro template="custom_fields_macros" name="custom_fields_view"
				arg-type="threads"
				arg-group="after"
				arg-onlyInclude="{$thread.Forum.field_cache}"
				arg-set="{$thread.custom_fields}"
				arg-wrapperClass="message-fields message-fields--after" />
		</xf:if>

		<xf:if is="$post.attach_count">
			<xf:macro template="message_macros" name="attachments"
				arg-attachments="{$post.Attachments}"
				arg-message="{$post}"
				arg-canView="{{ $thread.canViewAttachments() }}" />
		</xf:if>
	</div>
</xf:macro>

<xf:macro name="post_last_edit" arg-post="!">
	<xf:if is="$post.last_edit_date">
		<div class="message-lastEdit">
			<xf:if is="$post.user_id == $post.last_edit_user_id">
				{{ phrase('last_edited:') }} <xf:date time="{$post.last_edit_date}" itemprop="dateModified" />
			<xf:else />
				{{ phrase('last_edited_by_moderator:') }} <xf:date time="{$post.last_edit_date}" itemprop="dateModified" />
			</xf:if>
		</div>
	</xf:if>
</xf:macro>

<xf:macro name="post_footer" arg-post="!" arg-thread="!">
	<footer class="message-footer">
		<xf:if contentcheck="true">
			<div class="message-actionBar actionBar">
				<xf:contentcheck>
					<xf:macro name="post_action_bar" arg-post="{$post}" arg-thread="{$thread}" />
				</xf:contentcheck>
			</div>
		</xf:if>

		<div class="reactionsBar js-reactionsList {{ $post.reactions ? 'is-active' : '' }}">
			<xf:reactions content="{$post}" link="posts/reactions" />
		</div>

		<div class="js-historyTarget message-historyTarget toggleTarget" data-href="trigger-href"></div>
	</footer>
</xf:macro>

<xf:macro name="post_action_bar" arg-post="!" arg-thread="!">
	<xf:if contentcheck="true">
		<div class="actionBar-set actionBar-set--external">
		<xf:contentcheck>
			<xf:react content="{$post}" link="posts/react" list="< .js-post | .js-reactionsList" />

			<xf:if is="$thread.canReply() OR $thread.canReplyPreReg()">
				<xf:set var="$quoteLink">{{ link('threads/reply', $thread, {'quote': $post.post_id}) }}</xf:set>

				<xf:if is="$xf.options.multiQuote AND $xf.visitor.user_id">
					<a href="{$quoteLink}"
						class="actionBar-action actionBar-action--mq u-jsOnly js-multiQuote"
						title="{{ phrase('toggle_multi_quote_tooltip')|for_attr }}"
						rel="nofollow"
						data-message-id="{$post.post_id}"
						data-mq-action="add">{{ phrase('quote') }}</a>
				</xf:if>

				<a href="{$quoteLink}"
					class="actionBar-action actionBar-action--reply"
					title="{{ phrase('reply_quoting_this_message')|for_attr }}"
					rel="nofollow"
					data-xf-click="quote"
					data-quote-href="{{ link('posts/quote', $post) }}">{{ phrase('reply') }}</a>
			</xf:if>
		</xf:contentcheck>
		</div>
	</xf:if>

	<xf:if contentcheck="true">
		<div class="actionBar-set actionBar-set--internal">
		<xf:contentcheck>
			<xf:if is="$post.canUseInlineModeration()">
				<span class="actionBar-action actionBar-action--inlineMod">
					<xf:checkbox standalone="true">
						<xf:option value="{$post.post_id}" class="js-inlineModToggle"
							data-xf-init="tooltip"
							title="{{ phrase('select_for_moderation') }}"
							label="{{ phrase('select_for_moderation') }}"
							hiddenlabel="true" />
					</xf:checkbox>
				</span>
			</xf:if>

			<xf:if is="$post.canReport()">
				<a href="{{ link('posts/report', $post) }}"
					class="actionBar-action actionBar-action--report"
					data-xf-click="overlay">{{ phrase('report_verb') }}</a>
			</xf:if>

			<xf:set var="$hasActionBarMenu" value="{{ false }}" />
			<xf:if is="$post.canEdit()">
				<xf:js src="xf/message.js" min="1" />
				<a href="{{ link('posts/edit', $post) }}"
					class="actionBar-action actionBar-action--edit actionBar-action--menuItem"
					data-xf-click="quick-edit"
					data-editor-target="#js-post-{$post.post_id} .js-quickEditTarget"
					data-menu-closer="true">{{ phrase('edit') }}</a>

				<xf:set var="$hasActionBarMenu" value="{{ true }}" />
			</xf:if>
			<xf:if is="$post.edit_count && $post.canViewHistory()">
				<a href="{{ link('posts/history', $post) }}"
					class="actionBar-action actionBar-action--history actionBar-action--menuItem"
					data-xf-click="toggle"
					data-target="#js-post-{$post.post_id} .js-historyTarget"
					data-menu-closer="true">{{ phrase('history') }}</a>

				<xf:set var="$hasActionBarMenu" value="{{ true }}" />
			</xf:if>
			<xf:if is="$post.canDelete('soft')">
				<a href="{{ link('posts/delete', $post) }}"
					class="actionBar-action actionBar-action--delete actionBar-action--menuItem"
					data-xf-click="overlay">{{ phrase('delete') }}</a>

				<xf:set var="$hasActionBarMenu" value="{{ true }}" />
			</xf:if>
			<xf:if is="$post.message_state == 'deleted' AND $post.canUndelete()">
				<a href="{{ link('posts/undelete', $post) }}"
					class="actionBar-action actionBar-action--undelete actionBar-action--menuItem"
					data-xf-click="overlay">{{ phrase('undelete') }}</a>

				<xf:set var="$hasActionBarMenu" value="{{ true }}" />
			</xf:if>
			<xf:if is="$post.canCleanSpam()">
				<a href="{{ link('spam-cleaner', $post) }}"
					class="actionBar-action actionBar-action--spam actionBar-action--menuItem"
					data-xf-click="overlay">{{ phrase('spam') }}</a>

				<xf:set var="$hasActionBarMenu" value="{{ true }}" />
			</xf:if>
			<xf:if is="$xf.visitor.canViewIps() && $post.ip_id">
				<a href="{{ link('posts/ip', $post) }}"
					class="actionBar-action actionBar-action--ip actionBar-action--menuItem"
					data-xf-click="overlay">{{ phrase('ip') }}</a>

				<xf:set var="$hasActionBarMenu" value="{{ true }}" />
			</xf:if>
			<xf:if is="$post.canWarn()">

				<a href="{{ link('posts/warn', $post) }}"
					class="actionBar-action actionBar-action--warn actionBar-action--menuItem">{{ phrase('warn') }}</a>

				<xf:set var="$hasActionBarMenu" value="{{ true }}" />
			<xf:elseif is="$post.warning_id && $xf.visitor.canViewWarnings()" />
				<a href="{{ link('warnings', {'warning_id': $post.warning_id}) }}"
					class="actionBar-action actionBar-action--warn actionBar-action--menuItem"
					data-xf-click="overlay">{{ phrase('view_warning') }}</a>
				<xf:set var="$hasActionBarMenu" value="{{ true }}" />
			</xf:if>

			<xf:if is="$hasActionBarMenu">
				<a class="actionBar-action actionBar-action--menuTrigger"
					data-xf-click="menu"
					title="{{ phrase('more_options')|for_attr }}"
					role="button"
					tabindex="0"
					aria-expanded="false"
					aria-haspopup="true">&#8226;&#8226;&#8226;</a>

				<div class="menu" data-menu="menu" aria-hidden="true" data-menu-builder="actionBar">
					<div class="menu-content">
						<h4 class="menu-header">{{ phrase('more_options') }}</h4>
						<div class="js-menuBuilderTarget"></div>
					</div>
				</div>
			</xf:if>
		</xf:contentcheck>
		</div>
	</xf:if>
</xf:macro>

<xf:macro name="post_deleted" arg-post="!" arg-thread="!">
	<xf:css src="message.less" />
	<div class="message message--deleted message--post{{ $post.isIgnored() ? ' is-ignored' : '' }}{{ $post.isUnread() ? ' is-unread' : '' }} js-post js-inlineModContainer"
		data-author="{{ $post.User.username ?: $post.username }}"
		data-content="post-{$post.post_id}">

		<span class="u-anchorTarget" id="post-{$post.post_id}"></span>
		<div class="message-inner">
			<div class="message-cell message-cell--user">
				<xf:macro template="message_macros" name="user_info_simple" arg-user="{$post.User}" arg-fallbackName="{$post.username}" />
			</div>
			<div class="message-cell message-cell--main">
				<div class="message-attribution">
					<ul class="listInline listInline--bullet message-attribution-main">
						<li><a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" class="u-concealed" rel="nofollow"><xf:date time="{$post.post_date}" /></a></li>
						<li><xf:username user="{$post.User}" defaultname="{$post.username}" class="u-concealed" /></li>
					</ul>
				</div>

				<div class="messageNotice messageNotice--deleted">
					<xf:macro template="deletion_macros" name="notice" arg-log="{$post.DeletionLog}" />

					<a href="{{ link('posts/show', $post) }}" class="u-jsOnly" data-xf-click="inserter" data-replace="[data-content=post-{$post.post_id}]">{{ phrase('show...') }}</a>

					<xf:if is="$post.canUseInlineModeration()">
						<span style="display: none">
							<!-- this can be actioned on the full post -->
							<xf:checkbox standalone="true">
								<xf:option value="{$post.post_id}" class="js-inlineModToggle"
									hiddenlabel="true" />
							</xf:checkbox>
						</span>
					</xf:if>
				</div>
			</div>
		</div>
	</div>

	<xf:ad position="post_below_container" arg-post="{$post}" />
</xf:macro>]]></template>
    <template title="setup.less" type="public" addon_id="XF" version_id="2020970" version_string="2.2.9"><![CDATA[// Note that this file should never output any CSS directly. It should contain variables and mixins only.
// Output should go into core.less.

// ################################ VARIABLES ###############################

// BLOCKS
@block-borderRadius-inner: max(@xf-blockBorderRadius - 1px, 0px);
@block-noStripSel: ~'.block-container:not(.block-container--noStripRadius)';

// HELPERS
@zIndex-1: 1 * (@xf-zIndexMultiplier);
@zIndex-2: 2 * (@xf-zIndexMultiplier);
@zIndex-3: 3 * (@xf-zIndexMultiplier);
@zIndex-4: 4 * (@xf-zIndexMultiplier);
@zIndex-5: 5 * (@xf-zIndexMultiplier);
@zIndex-6: 6 * (@xf-zIndexMultiplier);
@zIndex-7: 7 * (@xf-zIndexMultiplier);
@zIndex-8: 8 * (@xf-zIndexMultiplier);
@zIndex-9: 9 * (@xf-zIndexMultiplier);

// AVATARS
@_avatarBaseSize: 96px;
@avatar-xxs: (@_avatarBaseSize) / 4;
@avatar-xs:  (@_avatarBaseSize) / 3;
@avatar-s:   (@_avatarBaseSize) / 2;
@avatar-m:   (@_avatarBaseSize);
@avatar-l:   (@_avatarBaseSize) * 2;
@avatar-o:   (@_avatarBaseSize) * 4;

@rtl: xf-isRtl;
@ltr: xf-isLtr;

// DEFAULT FONTAWESOME TYPE
@faType: 'Pro';

// FONTAWESOME WEIGHT VALUES
@faWeight-light: 300;
@faWeight-regular: 400;
@faWeight-solid: 900;

{{ include('setup_fa.less') }}

// TABLES
@tablePadding: @xf-paddingSmall;

// ####################################### MIXINS ##################################

.m-clearFix()
{
	&:before,
	&:after
	{
		content: " ";
		display: table;
	}
	&:after
	{
		clear: both;
	}
}

.m-hideText()
{
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
}

.m-hyphens(@hyphens: none)
{
	hyphens: @hyphens;
	-moz-hyphens: @hyphens;
	-ms-hyphens: @hyphens;
	-webkit-hyphens: @hyphens;
}

.m-fadeOutLines(@lines, @bgColor, @lineHeight: @xf-lineHeightDefault)
{
	position: relative;
	max-height: unit(@lines * @lineHeight, em);
	overflow: hidden;

	&:after
	{
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		text-align: right;
		width: 75%;
		height: unit(@lineHeight, em);

		& when(@ltr)
		{
			background: linear-gradient(to right, fade(@bgColor, 0%), fade(@bgColor, 100%));
		}
		& when(@rtl)
		{
			background: linear-gradient(to left, fade(@bgColor, 0%), fade(@bgColor, 100%));
		}
	}
}

.m-overflowEllipsis()
{
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
	text-overflow: ellipsis;
}

.m-appendColon()
{
	&:after
	{
		content: "{$xf.language.label_separator}";
	}

	&.is-sentence:after
	{
		content: "";
	}
}

.m-tooltipArrow(@color, @size, @variation: ~'', @fillColor: false)
{
	@{variation}.tooltip--top &
	{
		bottom: 0;
		left: 50%;
		margin-left: -@size;
		.m-triangleDown(@color, @size);
	}
	@{variation}.tooltip--bottom &
	{
		top: 0;
		left: 50%;
		margin-left: -@size;
		.m-triangleUp(@color, @size);
	}
	@{variation}.tooltip--right &
	{
		top: 50%;
		left: 0;
		margin-top: -@size;
		.m-triangleLeft(@color, @size);
	}
	@{variation}.tooltip--left &
	{
		top: 50%;
		right: 0;
		margin-top: -@size;
		.m-triangleRight(@color, @size);
	}

	& when (iscolor(@fillColor))
	{
		@{variation} &:after
		{
			position: absolute;
			content: '';
		}

		@{variation}.tooltip--top &:after
		{
			bottom: 1px;
			left: -@size + 1px;
			.m-triangleDown(@fillColor, @size - 1px);
		}

		@{variation}.tooltip--bottom &:after
		{
			top: 1px;
			left: -@size + 1px;
			.m-triangleUp(@fillColor, @size - 1px);
		}

		@{variation}.tooltip--right &:after
		{
			left: 1px;
			bottom: -@size + 1px;
			.m-triangleLeft(@fillColor, @size - 1px);
		}

		@{variation}.tooltip--left &:after
		{
			right: 1px;
			bottom: -@size + 1px;
			.m-triangleRight(@fillColor, @size - 1px);
		}
	}
}

.m-triangleUp(@color; @size)
{
	border: @size solid transparent;
	border-top-width: 0;
	border-bottom-color: @color;
}

.m-triangleDown(@color; @size)
{
	border: @size solid transparent;
	border-bottom-width: 0;
	border-top-color: @color;
}

.m-triangleLeft(@color; @size)
{
	border: @size solid transparent;
	border-left-width: 0;
	border-right-color: @color;
}

.m-triangleRight(@color; @size)
{
	border: @size solid transparent;
	border-right-width: 0;
	border-left-color: @color;
}

.m-dropShadow(@x: 1px; @y: 2px; @blur: 2px; @spread: 0; @alpha: 0.25)
{
	box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.m-textOutline(@fillColor: white; @strokeColor: black; @width: 1px;)
{
	-webkit-text-fill-color: @fillColor;
	-webkit-text-stroke-color: @strokeColor;
	-webkit-text-stroke-width: @width;
}

.m-gradient(@startColor; @stopColor; @fallback; @startPos: 0%; @endPos: 100%)
{
	background: @fallback;
	background: linear-gradient(to bottom, @startColor @startPos, @stopColor @endPos);
}

.m-gradientHorizontal(@startColor; @stopColor; @fallback; @startPos: 0%; @endPos: 100%)
{
	background: @fallback;

	& when(@ltr)
	{
		background: linear-gradient(to right, @startColor @startPos, @stopColor @endPos);
	}
	& when(@rtl)
	{
		background: linear-gradient(to left, @startColor @startPos, @stopColor @endPos);
	}
}

.m-tabSize(@size: 4)
{
	-moz-tab-size: @size;
	tab-size: @size;
}

.m-transition(@props: all; @duration: @xf-animationSpeed; @timing: ease; @delay: 0; @raw-input: false)
{
	// adapted from https://stackoverflow.com/a/20810461 @ScottS

	.output() when (@raw-input = false)
	{
		@propsLength: length(@props);
		@durationLength: length(@duration);
		@timingLength: length(@timing);
		@delayLength: length(@delay);

		.buildString(@i, @s: ~'') when (@i <= @propsLength)
		{
			@prop: extract(@props, @i);

			.setDuration() when (@i <= @durationLength) { @dur: extract(@duration, @i); }
			.setDuration() when (@i >  @durationLength) { @dur: extract(@duration, @durationLength); }
			.setDuration();

			.setEasing() when (@i <= @timingLength) { @time: extract(@timing, @i); }
			.setEasing() when (@i >  @timingLength) { @time: extract(@timing, @timingLength); }
			.setEasing();

			.setDelay() when (@i <= @delayLength) { @del: extract(@delay, @i); }
			.setDelay() when (@i >  @delayLength) { @del: extract(@delay, @delayLength); }
			.setDelay();

			.setDivider() when (@i > 1) { @divider: ~'@{s},'; }
			.setDivider() when (@i = 1) { @divider: ~''; }
			.setDivider();

			.buildString((@i + 1), @divider @prop @dur @time);
		}

		.buildString(1);

		.buildString(@i, @s: ~'') when (@i > @propsLength)
		{
			.compact(@s);
		}
	}

	.output() when not (@raw-input = false)
	{
		.compact(@raw-input);
	}

	.compact(@string)
	{
		-webkit-transition: @string;
		//-moz-transition: @string;
		//-ms-transition: @string;
		//-o-transition: @string;
		transition: @string;
	}

	.output();
}

.m-transitionProperty(@props)
{
	-webkit-transition-property: @props;
	transition-property: @props;
}

.m-animation(@props)
{
	-webkit-animation: @props;
	animation: @props;
}

.m-transform(@props)
{
	-webkit-transform: @props;
	-ms-transform: @props;
	transform: @props;
}

.m-keyframes(@name, @rules)
{
	@-webkit-keyframes @name { @rules(); }
	@keyframes @name { @rules(); }
}

.m-columns(@count; @breakWidth: 0; @gap: 1em)
{
	-moz-column-count: @count;
	-webkit-column-count: @count;
	column-count: @count;

	-moz-column-gap: @gap;
	-webkit-column-gap: @gap;
	column-gap: @gap;

	& when(@breakWidth > 0)
	{
		@media (max-width: @breakWidth)
		{
			-moz-column-count: 1;
			-webkit-column-count: 1;
			column-count: 1;
		}
	}
}

.m-columnBreakAvoid()
{
	-webkit-column-break-inside: avoid;
	break-inside: avoid-column;
	page-break-inside: avoid;
}

.m-borderLeftRadius(@radius)
{
	border-top-left-radius: @radius;
	border-bottom-left-radius: @radius;
}

.m-borderRightRadius(@radius)
{
	border-top-right-radius: @radius;
	border-bottom-right-radius: @radius;
}

.m-borderTopRadius(@radius)
{
	border-top-left-radius: @radius;
	border-top-right-radius: @radius;
}

.m-borderBottomRadius(@radius)
{
	border-bottom-left-radius: @radius;
	border-bottom-right-radius: @radius;
}

.m-hiddenLinks()
{
	a
	{
		color: inherit;
		text-decoration: none;

		&:hover
		{
			text-decoration: underline;
		}
	}
}

.m-textColoredLinks()
{
	a
	{
		color: inherit;
		text-decoration: underline;
	}
}

.m-placeholder(@rules)
{
	&::-webkit-input-placeholder { @rules(); }
	&::-moz-placeholder { @rules(); }
	&:-moz-placeholder { @rules(); }
	&:-ms-input-placeholder { @rules(); }
}

.m-autoCompleteList(@wide: false)
{
	.m-listPlain();
	cursor: default;

	.xf-menu();
	min-width: 180px;
	& when(@wide = true)
	{
		min-width: 250px;
	}
	max-width: 95%;

	border: @xf-borderSize solid @xf-borderColor;
	.m-dropShadow(0, 3px, 5px, 0, .3);

	li
	{
		padding: @xf-paddingMedium;
		line-height: 24px;

		.m-clearFix();

		&.is-selected
		{
			background: @xf-contentHighlightBg;
		}

		.autoCompleteList-icon
		{
			float: left;
			margin-right: @xf-paddingMedium;
			width: 24px;
			height: 24px;
		}
	}
}

.m-listPlain()
{
	list-style: none;
	margin: 0;
	padding: 0;
}

// makes direct children display: inline-block, removing white-space between elements (mostly used on ul > li)
.m-inlineBlocks(@fontSize: @xf-fontSizeNormal)
{
	font-size: 0;

	> *
	{
		display: inline-block;
		font-size: @fontSize;
	}
}

.m-tabsTogether(@fontSize: @xf-fontSizeNormal)
{
	font-size: 0;

	.tabs-tab,
	.tabs-text,
	.tabs-extra,
	.hScroller-action
	{
		font-size: @fontSize;
	}
}

.m-hiddenEl(@transition: true)
{
	display: none;

	&.is-active
	{
		display: block;
	}

	& when(@transition = true)
	{
		.m-transitionFadeDown();
	}
}

.m-transitionFade(@speed: @xf-animationSpeed)
{
	display: none;
	opacity: 0;

	.m-transition(all, -xf-opacity; @speed);

	&.is-active
	{
		display: block;
		opacity: 1;
	}

	&.is-transitioning
	{
		display: block;
	}
}

.m-transitionFadeDown(@speed: @xf-animationSpeed)
{
	.m-transitionFade(@speed);

	overflow-y: hidden;
	height: 0;

	.m-transitionProperty(all, -xf-height;);

	&.is-active
	{
		height: auto;
		overflow-y: visible;
	}

	&.is-transitioning
	{
		overflow-y: hidden;
	}
}

.m-visuallyHidden()
{
	position: absolute;
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
}

.m-faBase(@type: @faType; @weight: @xf-fontAwesomeWeight)
{
	.m-defaultFaWeight() when (@type = 'Brands')
	{
		@weight: @faWeight-regular;
	}
	// else use given @weight

	.m-defaultFaWeight();

	font-family: 'Font Awesome 5 @{type}';
	font-size: inherit;
	font-style: normal;
	font-weight: @weight;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.m-faContent(@content, @width: false, @direction: false)
{
	& when (@direction = false)
	{
		content: @content;
	}
	& when (@direction = ltr)
	{
		-ltr-content: @content;
	}
	& when (@direction = rtl)
	{
		-rtl-content: @content;
	}
	& when (isnumber(@width))
	{
		width: @width;
	}
	& when (@width = false)
	{
		width: 1.28571429em;
	}

	display: inline-block;
	text-align: center;
}

.m-faBefore(@icon, @width: false)
{
	&:before
	{
		.m-faContent(@icon, @width);
	}
}

.m-faAfter(@icon, @width: false)
{
	&:after
	{
		.m-faContent(@icon, @width);
	}
}

.m-iconicIcon(@setPosition: true)
{
	display: inline-block;
	min-width: 1em;
	height: .9em;// prevents some zoom-related issues
	-ltr-rtl-text-align: left;

	&:before,
	&:after
	{
		.m-faBase('Pro'; inherit);
		//.m-transition(opacity, color; @xf-animationSpeed, @xf-animationSpeed / 2);

		position: absolute;

		& when (@setPosition = true)
		{
			left: 0;
			top: 0;
		}

		opacity: 1;
	}
}

.m-menuGadget(@separate: false, @faWidth: 1.2em, @faWeight: @faWeight-solid)
{
	.m-faBase();
	.m-faContent("@{fa-var-caret-down}", @faWidth);
	font-weight: @faWeight;

	& when (@separate = true)
	{
		margin-left: .2em;
	}
	& when (isnumber(@separate))
	{
		margin-left: @separate;
	}

	unicode-bidi: isolate; // this is needed to ensure correct positioning in RTL with LTR text
}

.m-content(@content, @direction: false, @separateDirection: false, @separateWidth: false)
{
	& when (@direction = false)
	{
		content: @content;
	}
	& when (@direction = ltr)
	{
		-ltr-content: @content;
	}
	& when (@direction = rtl)
	{
		-rtl-content: @content;
	}
	& when (@separateDirection = left)
	{
		& when (isnumber(@separateWidth))
		{
			margin-right: @separateWidth;
		}
		& when not(isnumber(@separateWidth))
		{
			margin-right: .2em;
		}
	}
	& when (@separateDirection = right)
	{
		& when (isnumber(@separateWidth))
		{
			margin-left: @separateWidth;
		}
		& when not(isnumber(@separateWidth))
		{
			margin-left: .2em;
		}
	}
}

.m-buttonIcon(@icon, @width: false)
{
	& > .button-text
	{
		.m-faBefore(@icon, @width);
	}
}

.m-avatarSize(@avatarSize)
{
	width: @avatarSize;
	height: @avatarSize;
	font-size: round((@avatarSize) * (@xf-avatarDynamicTextPercent / 100));
}

.m-buttonBase()
{
	display: inline-block; // maintain this just in case for old browsers

	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	.m-transition(background-color border-color color, (@xf-animationSpeed / 2));
	.xf-buttonBase();
}

.m-buttonColorVariation(@bgColor; @textColor)
{
	color: @textColor;
	background-color: @bgColor;
	.m-buttonBorderColorVariation(@bgColor);

	&:hover,
	&:active,
	&:focus
	{
		background-color: xf-intensify(@bgColor, 8%);
	}
}

.m-buttonBlockColorVariationSimple(@color)
{
	.m-buttonBorderColorVariation(@color);

	&:not(.button--splitTrigger),
	&.button--splitTrigger > .button-text,
	&.button--splitTrigger > .button-menu
	{
		&:hover,
		&:focus,
		&:active
		{
			background-color: xf-intensify(@color, 8%);
		}
	}
}

.m-buttonBorderColorVariation(@borderColor)
{
	border-color: xf-diminish(@borderColor, 5%) xf-intensify(@borderColor, 5%) xf-intensify(@borderColor, 5%) xf-diminish(@borderColor, 5%);

	&.button--splitTrigger
	{
		> .button-text { border-right-color: xf-intensify(@borderColor, 5%); }
		> .button-menu { border-left-color: xf-diminish(@borderColor, 5%); }
	}
}

// this will be replaced by the CSS renderer with the correct background-image rule
.m-selectGadgetColor(@color: black)
{
	-xf-select-gadget: @color;
}

.m-hScrollerActionColorVariation(@background, @text, @textHover)
{
	color: @text;

	&:hover
	{
		color: @textHover;
	}

	&.hScroller-action--start
	{
		.m-gradientHorizontal(@background, fade(@background, 0%), @background, 66%, 100%);
	}

	&.hScroller-action--end
	{
		.m-gradientHorizontal(fade(@background, 0%), @background, @background, 0%, 33%);
	}
}

// Fix for iOS zoom on input focus.
.m-inputZoomFix()
{
	@media (max-width: 568px)
	{
		font-size: 16px;
	}
}

.m-checkboxAligner()
{
	vertical-align: -2px;
}

.m-highResolution(@rules)
{
	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi)
	{
		@rules();
	}
}

.m-fixedWidthFlex(@width)
{
	flex: 0 0 @width;
}

.m-labelVariation(@color; @bg; @border: false)
{
	color: @color;
	background: @bg;
	border-color: xf-intensify(@bg, 10%);

	& when (iscolor(@border))
	{
		border-color: @border;
	}

	a&:hover,
	a:hover &
	{
		background: xf-intensify(@bg, 4%);
		border-color: xf-intensify(@bg, 14%);

		& when (iscolor(@border))
		{
			border-color: xf-intensify(@border, 4%);
		}
	}
}

.m-tableBase()
{
	> table
	{
		border: none;
		border-collapse: collapse;
		empty-cells: show;
		max-width: 100%;

		> thead, > tbody
		{
			> tr
			{
				> th
				{
					background: fade(@xf-paletteColor1, 94%);
					color: @xf-textColorEmphasized;
					border: @xf-borderSize solid @xf-borderColor;
					border-bottom-color: @xf-borderColorFeature;
					border-bottom-width: @xf-borderSizeMinorFeature;
					padding: @tablePadding;
				}

				> td
				{
					background: @xf-contentBg;
					border: @xf-borderSize solid @xf-borderColor;
					padding: @tablePadding;
				}
			}
		}
	}
}

.m-backdropFilter(@filter, @filterBg: none, @fallbackBg: none)
{
	@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none)
	{
		--backdrop-filter: @filter;
		-webkit-backdrop-filter: var(--backdrop-filter);
		backdrop-filter: var(--backdrop-filter);

		& when not (@filterBg = none)
		{
			background: @filterBg;
		}
	}


	@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none))
	{
		& when (@fallbackBg = none)
		{
			background: @filterBg;
		}
		& when not (@fallbackBg = none)
		{
			background: @fallbackBg;
		}
	}
}

.m-blockAligner()
{
	// we want this to still be a block element but to inherit the alignment a user has set - this approximates that
	[style="text-align: center"] &
	{
		margin-left: auto;
		margin-right: auto;
	}

	[style="text-align: left"] &
	{
		-ltr-rtl-margin-left: 0;
		-ltr-rtl-margin-right: auto;
	}

	[style="text-align: right"] &
	{
		-ltr-rtl-margin-left: auto;
		-ltr-rtl-margin-right: 0;
	}
}

// STICKY HEADER STUFF
// Note that to access the height and offset, you need to call the mixin and use the variables locally.

@header-navHeight: 2 * (@xf-publicNavPaddingV)
	+ (xf-default(@xf-publicNav--font-size, @xf-fontSizeNormal) * (@xf-lineHeightDefault));
@header-subNavHeight: 2 * (@xf-publicSubNavPaddingV)
	+ (xf-default(@xf-publicSubNav--font-size, @xf-fontSizeNormal) * (@xf-lineHeightDefault))
	+ xf-default(@xf-publicSubNav--border-top-width, 0)
	+ xf-default(@xf-publicSubNav--border-bottom-width, 0);

.m-stickyHeaderConfig(@type)
{
	@_stickyHeader-offset: 10px;
	@_stickyHeader-height: 0;
}
.m-stickyHeaderConfig(@type) when(@type = primary)
{
	@_stickyHeader-height: @header-navHeight;
}
.m-stickyHeaderConfig(@type) when(@type = all)
{
	@_stickyHeader-height: @header-navHeight + @header-subNavHeight;
}

.m-loadingSpinner()
{
	.is-loading &
	{
		opacity: 1;

		.fa--xf
		{
			animation-name: spin;
		}
	}

	.fa--xf
	{
		position: absolute;
		left: ~"calc(50% - 0.5em)";
		top: ~"calc(50% - 0.5em)";

		animation-duration: 1000ms;
		animation-iteration-count: infinite;
	}
}

{{ include('setup_custom.less') }}]]></template>
    <template title="structured_list.less" type="public" addon_id="XF" version_id="2020470" version_string="2.2.4"><![CDATA[@_structItem-avatarSize: 36px;
@_structItem-avatarSizeExpanded: 48px;
@_structItem-avatarSizeEnd: @avatar-xxs;
@_structItem-cellPaddingH: ((@xf-paddingMedium) + (@xf-paddingLarge)) / 2; // average
@_structItem-cellPaddingV: @xf-paddingLarge;

.structItemContainer
{
	border-collapse: collapse;
	list-style: none;
	margin: 0;
	padding: @xf-paddingLargest;
	width: 100%;
	
	@media (max-width: @xf-responsiveNarrow)
	{
		padding: @xf-paddingMedium;
	}
}

.structItemContainer-group
{
}

.structItemContainer > .structItem:first-child,
.structItemContainer > .structItemContainer-group:first-child > .structItem:first-child
{
	border-top: none;
}

.structItem
{
	display: table;
	table-layout: fixed;
	border-collapse: collapse;
	border-top: @xf-borderSize solid @xf-borderColor;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;

	&.is-highlighted,
	&.is-moderated
	{
		.xf-contentAltBase();
	}

	&.is-deleted
	{
		opacity: .7;

		.structItem-title > *
		{
			text-decoration: line-through;
		}
	}

	&.is-mod-selected
	{
		background: @xf-inlineModHighlightColor;
		opacity: 1;
	}
}

.structItem-cell
{
	display: table-cell;
	vertical-align: middle;
	padding: @_structItem-cellPaddingV @_structItem-cellPaddingH;

	.structItem--middle &
	{
		vertical-align: middle;
	}

	&.structItem-cell--vote
	{
		width: (40px + (@_structItem-cellPaddingH) * 2);
	}

	&.structItem-cell--icon
	{
		width: ((@_structItem-avatarSize) + (@_structItem-cellPaddingH) * 2);
		position: relative;

		&.structItem-cell--iconExpanded
		{
			width: ((@_structItem-avatarSizeExpanded) + (@_structItem-cellPaddingH) * 2);
		}

		&.structItem-cell--iconEnd
		{
			width: ((@_structItem-avatarSizeEnd) + (@_structItem-cellPaddingH) * 2);
			padding-left: @_structItem-cellPaddingH / 2;

			.structItem-iconContainer
			{
				padding-top: @xf-paddingMedium;
			}
		}

		&.structItem-cell--iconFixedSmall
		{
			width: (60px + (@_structItem-cellPaddingH) * 2);
		}

		&.structItem-cell--iconFixedSmallest
		{
			width: ((@_structItem-avatarSizeEnd) + (@_structItem-cellPaddingH) * 2);
		}

		.solutionIcon
		{
			padding-left: 0;
			padding-right: 0;
		}
	}

	&.structItem-cell--meta
	{
		width: 180px;
	}

	&.structItem-cell--latest
	{
		width: 190px;
		text-align: right;
	}
}

.structItem-iconContainer
{
	position: relative;

	img
	{
		display: block;
		width: 100%;
	}

	.avatar
	{
		.m-avatarSize(@_structItem-avatarSize);

		&.avatar--xxs
		{
			.m-avatarSize(@_structItem-avatarSizeEnd);
		}
	}

	.structItem-secondaryIcon
	{
		display: none;
		position: absolute;
		right: -5px;
		bottom: -5px;

		.m-avatarSize(@_structItem-avatarSize / 2  + 2px);
	}

	.structItem-cell--iconExpanded &
	{
		.avatar
		{
			.m-avatarSize(@_structItem-avatarSizeExpanded);
		}

		.structItem-secondaryIcon
		{
			.m-avatarSize(@_structItem-avatarSizeExpanded / 2 - 2px);
		}
	}
}

.structItem-title
{
	font-size: @xf-fontSizeNormal;
	font-weight: @xf-fontWeightNormal;
	margin: 0;
	padding: 0;

	.label
	{
		font-weight: @xf-fontWeightNormal;
	}

	.is-unread &
	{
		font-weight: @xf-fontWeightHeavy;
	}
}

.structItem-minor
{
	font-size: @xf-fontSizeSmaller;
	color: @xf-textColorMuted;

	.m-hiddenLinks();
}

.structItem-parts
{
	.m-listPlain();
	display: inline;

	> li
	{
		display: inline;
		margin: 0;
		padding: 0;

		&:nth-child(even)
		{
			color: @xf-textColorDimmed;
		}

		&:before
		{
			content: "\00B7\20";
		}

		&:first-child:before
		{
			content: "";
			display: none;
		}
	}
}

.structItem-pageJump
{
	margin-left: 8px;
	font-size: @xf-fontSizeSmallest;

	a
	{
		.xf-chip();
		text-decoration: none;
		border-radius: @xf-borderRadiusSmall;
		padding: 0 3px;
		opacity: .5;
		.m-transition();

		.structItem:hover &,
		.has-touchevents &
		{
			opacity: 1;
		}

		&:hover
		{
			text-decoration: none;
			.xf-chipHover();
		}
	}
}

.structItem-statuses,
.structItem-extraInfo
{
	.m-listPlain();
	float: right;

	> li
	{
		float: left;
		margin-left: 8px;
	}

	input[type=checkbox]
	{
		.m-checkboxAligner();
	}
}

.structItem-statuses .reactionSummary
{
	vertical-align: -2px;
}

.structItem-extraInfo .reactionSummary
{
	vertical-align: middle;
}

.structItem-status
{
	&::before
	{
		.m-faBase();
		display: inline-block;
		font-size: 90%;
		color: @xf-textColorMuted;
	}

	&--deleted::before { .m-faContent(@fa-var-trash-alt, .875em); }
	&--locked::before { .m-faContent(@fa-var-lock, .875em); }
	&--moderated::before { .m-faContent(@fa-var-shield, 1em); color: @xf-textColorAttention; }
	&--redirect::before { .m-faContent(@fa-var-external-link, 1em); }
	&--starred::before { .m-faContent(@fa-var-star, 1.125em); color: @xf-starFullColor; }
	&--sticky::before { .m-faContent(@fa-var-thumbtack, .75em); }
	&--watched::before { .m-faContent(@fa-var-bell, .875em); }

	&--solved::before { .m-faContent(@fa-var-check-circle, 1em); color: @xf-votePositiveColor; }
	&--attention::before { .m-faContent(@fa-var-bullhorn, 1.125em); color: @xf-textColorAttention; }
	&--upvoted::before { .m-faContent(@fa-var-thumbs-up, 1em); }
	&--downvoted::before { .m-faContent(@fa-var-thumbs-down, 1em); }
}

.structItem.structItem--note
{
	.xf-contentHighlightBase();
	color: @xf-textColorFeature;

	.structItem-cell
	{
		padding-top: @_structItem-cellPaddingV / 2;
		padding-bottom: @_structItem-cellPaddingV / 2;
		font-size: @xf-fontSizeSmaller;
		text-align: center;
	}
}

@media (max-width: @xf-responsiveWide)
{
	.structItem-cell
	{
		vertical-align: top;

		&.structItem-cell--meta
		{
			width: 155px;
			font-size: @xf-fontSizeSmaller;
		}

		&.structItem-cell--latest
		{
			width: 110px;
			font-size: @xf-fontSizeSmaller;
		}
	}
}

@media (max-width: @xf-responsiveMedium)
{
	.structItem-cell
	{
		//padding: (@_structItem-cellPaddingV) / 2 @_structItem-cellPaddingH;

		&.structItem-cell--icon
		{
			.structItem-cell + &
			{
				padding-left: 0;
				width: ((@_structItem-avatarSize) + (@_structItem-cellPaddingH));
			}
		}

		&.structItem-cell--main,
		&.structItem-cell--newThread
		{
			display: block;
			padding-bottom: .2em;

			.structItem-cell + &
			{
				padding-left: 0;
			}
		}

		&.structItem-cell--meta
		{
			display: block;
			width: auto;
			float: left;
			padding-top: 0;
			padding-left: 0;
			padding-right: 0;
			color: @xf-textColorMuted;

			.structItem-minor
			{
				display: none;
			}

			.pairs
			{
				> dt,
				> dd
				{
					display: inline;
					float: none;
					margin: 0;
				}
			}
		}

		&.structItem-cell--latest
		{
			display: block;
			width: auto;
			float: left;
			padding-top: 0;
			padding-left: 0;

			&:before
			{
				content: "\00A0\00B7\20";
				color: @xf-textColorMuted;
			}

			a
			{
				color: @xf-textColorMuted;
			}

			.structItem-minor
			{
				display: none;
			}
		}

		&.structItem-cell--iconEnd
		{
			display: none;
		}
	}

	.structItem-pageJump,
	.structItem-extraInfoMinor
	{
		display: none;
	}

	.is-unread .structItem-latestDate
	{
		font-weight: @xf-fontWeightNormal;
	}
}

@media (max-width: @xf-responsiveNarrow)
{
	.structItem-parts
	{
		.structItem-startDate
		{
			display: none;
		}
	}

	.structItem.structItem--quickCreate
	{
		.structItem-cell--icon,
		.structItem-cell--vote
		{
			display: none;
		}

		.structItem-cell--newThread
		{
			padding-left: @_structItem-cellPaddingH;
			padding-bottom: @_structItem-cellPaddingH;
		}
	}
}]]></template>
    <template title="thread_list_macros" type="public" addon_id="XF" version_id="2021270" version_string="2.2.12"><![CDATA[<xf:macro name="item"
	arg-thread="!"
	arg-forum=""
	arg-forceRead="{{ false }}"
	arg-showWatched="{{ true }}"
	arg-allowInlineMod="{{ true }}"
	arg-chooseName=""
	arg-extraInfo=""
	arg-allowEdit="{{ true }}">

	<xf:css src="structured_list.less" />

	<div class="structItem structItem--thread{{ $thread.prefix_id ? ' is-prefix' . $thread.prefix_id : '' }}{{ $thread.isIgnored() ? ' is-ignored' : '' }}{{ ($thread.isUnread() AND !$forceRead) ? ' is-unread' : '' }}{{ $thread.discussion_state == 'moderated' ? ' is-moderated' : '' }}{{ $thread.discussion_state == 'deleted' ? ' is-deleted' : '' }}{{ !$thread.discussion_open ? ' is-locked' : '' }} js-inlineModContainer js-threadListItem-{$thread.thread_id}" data-author="{{ $thread.User.username ?: $thread.username }}">

	<xf:extension name="icon_cell">
		<div class="structItem-cell structItem-cell--icon">
			<div class="structItem-iconContainer">
				<xf:avatar user="$thread.User" size="s" defaultname="{$thread.username}" />
				<xf:if is="$thread.getUserPostCount()">
					<xf:avatar user="$xf.visitor" size="s"
						href=""
						class="avatar--separated structItem-secondaryIcon"
						tabindex="0"
						data-xf-init="tooltip"
						data-trigger="auto"
						title="{{ phrase('you_have_posted_x_messages_in_this_thread', {'count': $thread.getUserPostCount() }) }}" />
				</xf:if>
			</div>
		</div>
	</xf:extension>

	<xf:extension name="main_cell">
		<div class="structItem-cell structItem-cell--main" data-xf-init="touch-proxy">
			<xf:if contentcheck="true">
				<ul class="structItem-statuses">
				<xf:contentcheck>
				<xf:extension name="statuses">
					<xf:if is="property('reactionSummaryOnLists') == 'status' && $thread.first_post_reactions">
						<li><xf:reactions summary="true" reactions="{$thread.first_post_reactions}" /></li>
					</xf:if>
					<xf:extension name="before_status_state"></xf:extension>
					<xf:if is="$thread.discussion_state == 'moderated'">
						<li>
							<xf:set var="$moderatedStatus">
								<i class="structItem-status structItem-status--moderated" aria-hidden="true" title="{{ phrase('awaiting_approval')|for_attr }}"></i>
								<span class="u-srOnly">{{ phrase('awaiting_approval') }}</span>
							</xf:set>
							<xf:if is="$thread.canCleanSpam()">
								<a href="{{ link('spam-cleaner', $thread) }}" data-xf-click="overlay">{$moderatedStatus}</a>
							<xf:else />
								{$moderatedStatus}
							</xf:if>
						</li>
					</xf:if>
					<xf:if is="$thread.discussion_state == 'deleted'">
						<li>
							<i class="structItem-status structItem-status--deleted" aria-hidden="true" title="{{ phrase('deleted')|for_attr }}"></i>
							<span class="u-srOnly">{{ phrase('deleted') }}</span>
						</li>
					</xf:if>
					<xf:if is="!$thread.discussion_open">
						<li>
							<i class="structItem-status structItem-status--locked" aria-hidden="true" title="{{ phrase('locked')|for_attr }}"></i>
							<span class="u-srOnly">{{ phrase('locked') }}</span>
						</li>
					</xf:if>

					<xf:extension name="status_sticky">
						<xf:if is="$thread.sticky">
							<li>
								<i class="structItem-status structItem-status--sticky" aria-hidden="true" title="{{ phrase('sticky')|for_attr }}"></i>
								<span class="u-srOnly">{{ phrase('sticky') }}</span>
							</li>
						</xf:if>
					</xf:extension>

					<xf:extension name="before_status_watch"></xf:extension>
					<xf:if is="{$showWatched} AND {$xf.visitor.user_id}">
						<xf:if is="{$thread.Watch.{$xf.visitor.user_id}}">
							<li>
								<i class="structItem-status structItem-status--watched" aria-hidden="true" title="{{ phrase('thread_watched')|for_attr }}"></i>
								<span class="u-srOnly">{{ phrase('thread_watched') }}</span>
							</li>
							<xf:elseif is="!$forum AND {$thread.Forum.Watch.{$xf.visitor.user_id}}" />
							<li>
								<i class="structItem-status structItem-status--watched" aria-hidden="true" title="{{ phrase('forum_watched')|for_attr }}"></i>
								<span class="u-srOnly">{{ phrase('forum_watched') }}</span>
							</li>
						</xf:if>
					</xf:if>

					<xf:extension name="before_status_type"></xf:extension>
					<xf:if is="$thread.discussion_type == 'redirect'">
						<xf:extension name="thread_type_redirect">
							<li>
								<i class="structItem-status structItem-status--redirect" aria-hidden="true" title="{{ phrase('redirect')|for_attr }}"></i>
								<span class="u-srOnly">{{ phrase('redirect') }}</span>
							</li>
						</xf:extension>
					<xf:elseif is="$thread.discussion_type == 'question' && $thread.type_data.solution_post_id" />
						<xf:extension name="thread_type_question_solved">
							<li>
								<i class="structItem-status structItem-status--solved" aria-hidden="true" title="{{ phrase('solved')|for_attr }}"></i>
								<span class="u-srOnly">{{ phrase('solved') }}</span>
							</li>
						</xf:extension>
					<xf:elseif is="!$forum || $forum.forum_type_id == 'discussion'" />
						<xf:extension name="thread_type_icon">
							<xf:if is="$thread.discussion_type != 'discussion'">
								<xf:set var="$threadTypeHandler" value="{{ $thread.getTypeHandler() }}" />
								<xf:if is="$threadTypeHandler.getTypeIconClass()">
									<li>
										<xf:set var="$threadTypePhrase" value="{{ $threadTypeHandler.getTypeTitle() }}" />
										<xf:fa class="structItem-status" icon="{{ $threadTypeHandler.getTypeIconClass() }}" title="{$threadTypePhrase|for_attr}" />
										<span class="u-srOnly">{$threadTypePhrase}</span>
									</li>
								</xf:if>
							</xf:if>
						</xf:extension>
					</xf:if>
				</xf:extension>
				</xf:contentcheck>
				</ul>
			</xf:if>

			<div class="structItem-title">
				<xf:set var="$canPreview" value="{{ $thread.canPreview() }}" />
				<xf:if is="$thread.prefix_id">
					<xf:if is="$forum">
						<a href="{{ link('forums', $forum, {'prefix_id': $thread.prefix_id}) }}" class="labelLink" rel="nofollow">{{ prefix('thread', $thread, 'html', '') }}</a>
					<xf:else />
						{{ prefix('thread', $thread, 'html', '') }}
					</xf:if>
				</xf:if>
				<a href="{{ link('threads' . (($thread.isUnread() AND !$forceRead) ? '/unread' : ''), $thread) }}" class="" data-tp-primary="on" data-xf-init="{{ $canPreview ? 'preview-tooltip' : '' }}" data-preview-url="{{ $canPreview ? link('threads/preview', $thread) : '' }}">{$thread.title}</a>
			</div>

			<div class="structItem-minor">
				<xf:if contentcheck="true">
					<ul class="structItem-extraInfo">
					<xf:contentcheck>
						<xf:if is="property('reactionSummaryOnLists') == 'minor_opposite' && $thread.first_post_reactions">
							<li><xf:reactions summary="true" reactions="{$thread.first_post_reactions}" /></li>
						</xf:if>
						<xf:if is="{$extraInfo}">
							<li>{$extraInfo}</li>
						<xf:elseif is="$allowEdit AND $thread.canEdit() AND $thread.canUseInlineModeration()" />
							<xf:if is="!$allowInlineMod OR !$forum">
								<xf:set var="$editParams" value="{{ {
									'_xfNoInlineMod': !$allowInlineMod ? 1 : null,
									 '_xfForumName': !$forum ? 1 : 0
								} }}" />
							<xf:else />
								<xf:set var="$editParams" value="{{ [] }}" />
							</xf:if>
							<xf:if is="$thread.discussion_type != 'redirect'">
								<li class="structItem-extraInfoMinor">
									<a href="{{ link('threads/edit', $thread) }}" data-xf-click="overlay" data-cache="false" data-href="{{ link('threads/edit', $thread, $editParams) }}">
										{{ phrase('edit') }}
									</a>
								</li>
							</xf:if>
						</xf:if>
						<xf:if is="$chooseName">
							<li><xf:checkbox standalone="true">
								<xf:option name="{$chooseName}[]" value="{$thread.thread_id}" class="js-chooseItem" />
							</xf:checkbox></li>
						<xf:elseif is="$allowInlineMod AND $thread.canUseInlineModeration()" />
							<li><xf:checkbox standalone="true">
								<xf:option value="{$thread.thread_id}" class="js-inlineModToggle"
									data-xf-init="tooltip"
									title="{{ phrase('select_for_moderation') }}"
									label="{{ phrase('select_for_moderation') }}"
									hiddenlabel="true"
								/>
							</xf:checkbox></li>
						</xf:if>
					</xf:contentcheck>
					</ul>
				</xf:if>

				<xf:if is="$thread.discussion_state == 'deleted'">
					<xf:if is="{$extraInfo}"><span class="structItem-extraInfo">{$extraInfo}</span></xf:if>

					<xf:macro template="deletion_macros" name="notice" arg-log="{$thread.DeletionLog}" />
				<xf:else />
					<ul class="structItem-parts">
						<li><xf:username user="$thread.User" defaultname="{$thread.username}" /></li>
						<li class="structItem-startDate"><a href="{{ link('threads', $thread) }}" rel="nofollow"><xf:date time="{$thread.post_date}" /></a></li>
						<xf:if is="!$forum">
							<li><a href="{{ link('forums', $thread.Forum) }}">{$thread.Forum.title}</a></li>
						</xf:if>
					</ul>

					<xf:if is="$thread.discussion_type != 'redirect' && $thread.reply_count >= $xf.options.messagesPerPage && $xf.options.lastPageLinks">
						<span class="structItem-pageJump">
						<xf:foreach loop="{{ last_pages($thread.reply_count + 1, $xf.options.messagesPerPage, $xf.options.lastPageLinks) }}" value="$p">
							<a href="{{ link('threads', $thread, {'page': $p}) }}">{$p}</a>
						</xf:foreach>
						</span>
					</xf:if>
				</xf:if>
			</div>
		</div>
	</xf:extension>

	<xf:extension name="meta_cell">
		<xf:if is="property('dt_disc_minor_header')">
			<div class="structItem-cell structItem-cell--meta" title="{{ phrase('first_message_reaction_score:')|for_attr }} {$thread.first_post_reaction_score|number}">
				<span class="pairs pairs--justified">
					{{ $thread.discussion_type == 'redirect' ? '&ndash;' : $thread.reply_count|number_short }}
				</span>
			</div>
			<div class="structItem-cell structItem-cell--meta" title="{{ phrase('first_message_reaction_score:')|for_attr }} {$thread.first_post_reaction_score|number}">
				<span class="pairs pairs--justified">
					{{ $thread.discussion_type == 'redirect' ? '&ndash;' : ($thread.view_count > $thread.reply_count ? $thread.view_count|number_short : number_short($thread.reply_count+1)) }}
				</span>
			</div>
		<xf:else />
			<div class="structItem-cell structItem-cell--meta" title="{{ phrase('first_message_reaction_score:')|for_attr }} {$thread.first_post_reaction_score|number}">
				<dl class="pairs pairs--justified">
					<dt>{{ phrase('replies') }}</dt>
					<dd>{{ $thread.discussion_type == 'redirect' ? '&ndash;' : $thread.reply_count|number_short }}</dd>
				</dl>
				<dl class="pairs pairs--justified structItem-minor">
					<dt>{{ phrase('views') }}</dt>
					<dd>{{ $thread.discussion_type == 'redirect' ? '&ndash;' : ($thread.view_count > $thread.reply_count ? $thread.view_count|number_short : number_short($thread.reply_count+1)) }}</dd>
				</dl>
			</div>
		</xf:if>
	</xf:extension>

	<xf:extension name="latest_cell">
		<div class="structItem-cell structItem-cell--latest">
			<xf:if is="$thread.discussion_type == 'redirect'">
				{{ phrase('n_a') }}
			<xf:else />
				<a href="{{ link('threads/latest', $thread) }}" rel="nofollow"><xf:date time="{$thread.last_post_date}" class="structItem-latestDate" /></a>
				<div class="structItem-minor">
					<xf:if is="$xf.visitor.isIgnoring($thread.last_post_user_id)">
						{{ phrase('ignored_member') }}
					<xf:else />
						<xf:username user="{$thread.LastPoster}" defaultname="{$thread.last_post_username}" />
					</xf:if>
				</div>
			</xf:if>
		</div>
	</xf:extension>

	<xf:extension name="icon_end_cell">
		<div class="structItem-cell structItem-cell--icon structItem-cell--iconEnd">
			<div class="structItem-iconContainer">
				<xf:if is="$xf.visitor.isIgnoring($thread.last_post_user_id) OR $thread.discussion_type == 'redirect'">
					<xf:avatar user="{{ null }}" size="xxs" />
				<xf:else />
					<xf:avatar user="{$thread.LastPoster}" defaultname="{$thread.last_post_username}" size="xxs" />
				</xf:if>
			</div>
		</div>
	</xf:extension>

	</div>
</xf:macro>

<xf:macro name="item_new_posts" arg-thread="!">
	<div class="contentRow">
		<div class="contentRow-figure">
			<xf:avatar user="$thread.LastPoster" size="xxs" defaultname="{$thread.last_post_username}" />
		</div>
		<div class="contentRow-main contentRow-main--close">
			<xf:if is="$thread.isUnread()">
				<a href="{{ link('threads/unread', $thread) }}">{{ prefix('thread', $thread) }}{$thread.title}</a>
			<xf:else />
				<a href="{{ link('threads/post', $thread, {'post_id': $thread.last_post_id}) }}">{{ prefix('thread', $thread) }}{$thread.title}</a>
			</xf:if>

			<div class="contentRow-minor contentRow-minor--hideLinks">
				<ul class="listInline listInline--bullet">
					<li>{{ phrase('latest_x', {'name': $thread.last_post_cache.username}) }}</li>
					<li><xf:date time="{$thread.last_post_date}" /></li>
				</ul>
			</div>
			<div class="contentRow-minor contentRow-minor--hideLinks">
				<a href="{{ link('forums', $thread.Forum) }}">{$thread.Forum.title}</a>
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro name="item_new_threads" arg-thread="!">
	<div class="contentRow">
		<div class="contentRow-figure">
			<xf:avatar user="$thread.User" size="xxs" defaultname="{$thread.username}" />
		</div>
		<div class="contentRow-main contentRow-main--close">
			<a href="{{ link('threads', $thread) }}">{{ prefix('thread', $thread) }}{$thread.title}</a>

			<div class="contentRow-minor contentRow-minor--hideLinks">
				<ul class="listInline listInline--bullet">
					<li>{{ phrase('started_by_x', {'name': $thread.username}) }}</li>
					<li><xf:date time="{$thread.post_date}" /></li>
					<li>{{ phrase('replies:') }} {$thread.reply_count|number_short}</li>
				</ul>
			</div>
			<div class="contentRow-minor contentRow-minor--hideLinks">
				<a href="{{ link('forums', $thread.Forum) }}">{$thread.Forum.title}</a>
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro name="quick_thread"
	arg-forum="!"
	arg-page="1"
	arg-order="last_post_date"
	arg-direction="desc"
	arg-prefixes="{{ [] }}">

	<xf:css src="structured_list.less" />

	<xf:if is="$forum.canCreateThread() OR $forum.canCreateThreadPreReg()">

		<xf:js src="xf/thread.js" min="1" />

		<xf:set var="$inlineMode" value="{{ ($page == 1 && $order == 'last_post_date' && $direction == 'desc') ? true : false }}" />

		<xf:form action="{{ link('forums/post-thread', $forum, {'inline-mode': $inlineMode}) }}" ajax="true"
			class="structItem structItem--quickCreate"
			draft="{{ link('forums/draft', $forum) }}"
			data-xf-init="quick-thread"
			data-focus-activate=".js-titleInput"
			data-focus-activate-href="{{ link('forums/post-thread', $forum, {'inline-mode': true}) }}"
			data-focus-activate-target=".js-quickThreadFields"
			data-insert-target=".js-threadList"
			data-replace-target=".js-emptyThreadList">

		<xf:extension name="icon_cell">
			<div class="structItem-cell structItem-cell--icon">
				<div class="structItem-iconContainer">
					<xf:avatar user="$xf.visitor" size="s" />
				</div>
			</div>
		</xf:extension>

		<xf:extension name="main_cell">
			<div class="structItem-cell structItem-cell--newThread js-prefixListenContainer">

				<xf:formrow rowtype="noGutter noLabel fullWidth noPadding mergeNext"
					label="{{ phrase('title') }}">

					<xf:prefixinput maxlength="{{ max_length('XF:Thread', 'title') }}"
						placeholder="{$forum.thread_prompt}"
						title="{{ phrase('post_new_thread_in_this_forum') }}"
						prefix-value="{$forum.default_prefix_id}"
						type="thread"
						prefixes="{$prefixes}"
						data-xf-init="tooltip"
						rows="1"
						help-href="{{ link('forums/prefix-help', $forum) }}"
						help-skip-initial="{{ true }}" />

					<!--[XF:qt_title_after]-->
				</xf:formrow>

				<div class="js-quickThreadFields inserter-container is-hidden"><!--{{ phrase('loading...') }}--></div>
			</div>
		</xf:extension>

		</xf:form>
	</xf:if>

</xf:macro>]]></template>
    <template title="thread_list_question_macros" type="public" addon_id="XF" version_id="2020470" version_string="2.2.4"><![CDATA[<xf:macro name="item" extends="thread_list_macros::item">
	<xf:extension name="meta_cell">
		<xf:if is="property('dt_disc_minor_header')">
			<div class="structItem-cell structItem-cell--meta" title="{{ phrase('first_message_reaction_score:')|for_attr }} {$thread.first_post_reaction_score|number}">
				<span class="pairs pairs--justified">
					{{ $thread.discussion_type == 'redirect' ? '&ndash;' : $thread.reply_count|number_short }}
				</span>
			</div>
			<div class="structItem-cell structItem-cell--meta" title="{{ phrase('first_message_reaction_score:')|for_attr }} {$thread.first_post_reaction_score|number}">
				<span class="pairs pairs--justified">
					{{ $thread.discussion_type == 'redirect' ? '&ndash;' : ($thread.view_count > $thread.reply_count ? $thread.view_count|number_short : number_short($thread.reply_count+1)) }}
				</span>
			</div>
		<xf:else />
			<div class="structItem-cell structItem-cell--meta" title="{{ phrase('first_message_reaction_score:')|for_attr }} {$thread.first_post_reaction_score|number}">
				<dl class="pairs pairs--justified">
					<dt>{{ phrase('answers') }}</dt>
					<dd>{{ $thread.discussion_type == 'redirect' ? '&ndash;' : $thread.reply_count|number_short }}</dd>
				</dl>
				<dl class="pairs pairs--justified structItem-minor">
					<dt>{{ phrase('views') }}</dt>
					<dd>{{ $thread.discussion_type == 'redirect' ? '&ndash;' : ($thread.view_count > $thread.reply_count ? $thread.view_count|number_short : number_short($thread.reply_count+1)) }}</dd>
				</dl>
			</div>
		</xf:if>
	</xf:extension>
</xf:macro>]]></template>
  </templates>
  <properties>
    <group group_name="dohthemebasic" title="[DohTheme] --&gt; Basic options" description="General settings that control the theme overall." display_order="10" addon_id=""/>
    <group group_name="dohthemeheader" title="[DohTheme] --&gt; Header and navigation" description="Generic header specific settings." display_order="20" addon_id=""/>
    <group group_name="dohthemeforum" title="[DohTheme] --&gt; Node/forum list" description="Controls the display and properties of the categories and other node types." display_order="30" addon_id=""/>
    <group group_name="sidebaroptions" title="[DohTheme] --&gt; Sidebar" description="Properties for sidebar collapse, icons, etc." display_order="40" addon_id=""/>
    <group group_name="dohthemeds" title="[DohTheme] --&gt; Discussion List" description="Control on the appearance of the list of discussions within a forum." display_order="50" addon_id=""/>
    <group group_name="threadoptions" title="[DohTheme] --&gt; Messages" description="Thread list styling, post styles, and post settings." display_order="60" addon_id=""/>
    <group group_name="dohthemefooter" title="[DohTheme] --&gt; Extra Footer" description="Show footer columns and also general footer settings." display_order="70" addon_id=""/>
    <group group_name="dohthemeglyphs" title="[DohTheme] --&gt; Icons" description="Settings for the main icon font for the theme." display_order="80" addon_id=""/>
    <group group_name="dohthemeanimations" title="[DohTheme] --&gt; Animations" description="" display_order="90" addon_id=""/>
    <property property_name="avatarBorderRadius" group_name="avatar" title="Avatar border radius" description="Controls the size of the rounded corners on avatars - a sufficiently large value will make avatars circular" property_type="value" value_type="unit" depends_on="" value_group="" display_order="200" addon_id="XF">
      <value>"8px"</value>
    </property>
    <property property_name="badge" group_name="misc" title="Badge" description="Badges appear to indicate a number if items requiring attention, such as unread messages in your inbox" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,border_radius,extra" addon_id="XF">
      <value>{
    "color": "@xf-paletteColor1",
    "background-color": "@xf-paletteColor5",
    "border-radius": "50%"
}</value>
    </property>
    <property property_name="bbCodeBlock" group_name="bbCode" title="BB code blocks" description="All BB code blocks within messages make use of these styling rules" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,border_radius,extra" addon_id="XF">
      <value>{
    "background-color": "@xf-contentAltBg",
    "border-width": "@xf-borderSize",
    "border-color": "@xf-borderColor",
    "border-left-width": "@xf-borderSizeFeature",
    "border-left-color": "@xf-paletteColor1"
}</value>
    </property>
    <property property_name="bbCodeBlockTitle" group_name="bbCode" title="BB code blocks - title" description="Styles the title section of BB code blocks within messages" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-paletteColor1",
    "background-color": "xf-diminish(@xf-contentAltBg, 2%)"
}</value>
    </property>
    <property property_name="blockBorder" group_name="block" title="Block border framework" description="Virtually all blocks have their borders styled with these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="border,extra" addon_id="XF">
      <value>{
    "border-width": "@xf-borderSize",
    "border-color": "@xf-borderColor"
}</value>
    </property>
    <property property_name="blockBorderRadius" group_name="block" title="Block border radius" description="Controls the size of the curve on block border corners" property_type="value" value_type="unit" depends_on="" value_group="borderRadius" display_order="1000" addon_id="XF">
      <value>"8px"</value>
    </property>
    <property property_name="blockFilterBar" group_name="block" title="Block filter bar" description="When the content of a block can be filtered, the controls to do so are styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20800" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-textColor",
    "font-weight": "@xf-fontWeightHeavy",
    "background-color": "@xf-contentAltBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColor",
    "extra": "padding: @xf-paddingLarge;"
}</value>
    </property>
    <property property_name="blockFooter" group_name="block" title="Block footer" description="When information needs to be conveyed in a footer element for a block, its style is controlled here" property_type="css" value_type="" depends_on="" value_group="" display_order="21200" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeSmaller",
    "color": "@xf-blockFooterTextColor",
    "background-color": "@xf-blockFooterBg",
    "border-top-width": "@xf-borderSize",
    "border-top-color": "@xf-borderColor"
}</value>
    </property>
    <property property_name="blockHeader" group_name="block" title="Block header" description="Blocks often have title bars at their tops, which are styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeLarger",
    "color": "@xf-majorHeadingTextColor",
    "background-color": "@xf-majorHeadingBg"
}</value>
    </property>
    <property property_name="blockLinkSelected" group_name="misc" title="Block link - selected" description="Styling for block-type links when in their selected state" property_type="css" value_type="" depends_on="" value_group="" display_order="21000" css_components="text,background,border_width_simple,border_color_simple,extra" addon_id="XF">
      <value>{
    "color": "@xf-textColorEmphasized",
    "background-color": "@xf-paletteColor3",
    "border-width": "@xf-borderSizeFeature",
    "border-color": "@xf-borderColorFeature"
}</value>
    </property>
    <property property_name="blockMinorHeader" group_name="block" title="Block minor header" description="Sub-headings in blocks use these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeLarge",
    "color": "@xf-minorHeadingTextColor"
}</value>
    </property>
    <property property_name="blockMinorTabHeader" group_name="block" title="Block minor tab header" description="Used for multi-part, tabbed sub-headings" property_type="css" value_type="" depends_on="" value_group="" display_order="20500" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeNormal",
    "color": "@xf-textColor",
    "background-color": "@xf-contentBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColor"
}</value>
    </property>
    <property property_name="blockTabHeader" group_name="block" title="Block tab header" description="Occasionally, blocks will have multi-part, tab headers, styled with these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeNormal",
    "color": "@xf-blockTabHeaderTextColor",
    "background-color": "@xf-blockTabHeaderBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColor"
}</value>
    </property>
    <property property_name="blockTabHeaderBg" group_name="color" title="Block tab header background color" description="" property_type="value" value_type="color" depends_on="" value_group="blockTabHeader" display_order="6500" addon_id="XF">
      <value>"@xf-paletteColor5"</value>
    </property>
    <property property_name="blockTabHeaderSelected" group_name="block" title="Block tab header - selected tab" description="The selected tab in multi-part headers takes additional styling from here" property_type="css" value_type="" depends_on="" value_group="" display_order="20300" css_components="text,background,border_color_simple,extra" addon_id="XF">
      <value>{
    "color": "@xf-paletteAccent1",
    "border-color": "@xf-paletteAccent1"
}</value>
    </property>
    <property property_name="blockTabHeaderTextColor" group_name="color" title="Block tab header text color" description="" property_type="value" value_type="color" depends_on="" value_group="blockTabHeader" display_order="6600" addon_id="XF">
      <value>"@xf-textColor"</value>
    </property>
    <property property_name="blockTextHeader" group_name="block" title="Block text header" description="Text headers are used for subtle identification of content areas, without changing the background style or color" property_type="css" value_type="" depends_on="" value_group="" display_order="20700" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeLarge",
    "color": "@xf-minorHeadingTextColor",
    "extra": "text-transform: uppercase;"
}</value>
    </property>
    <property property_name="borderColor" group_name="color" title="Border color" description="Structural borders around blocks of content generally use this color" property_type="value" value_type="color" depends_on="" value_group="borderBasic" display_order="4000" addon_id="XF">
      <value>"@xf-paletteColor4"</value>
    </property>
    <property property_name="borderColorAccentContent" group_name="color" title="Accent content border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderOther" display_order="5200" addon_id="XF">
      <value>"@xf-contentAccentBg"</value>
    </property>
    <property property_name="borderColorHighlight" group_name="color" title="Highlight border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderOther" display_order="5000" addon_id="XF">
      <value>"@xf-contentHighlightBg"</value>
    </property>
    <property property_name="buttonBase" group_name="button" title="Button base" description="Defines the styling for the basic elements that are common to all text-based buttons" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,border_radius,padding,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeSmaller",
    "border-radius": "16px",
    "padding-top": "15px",
    "padding-right": "18px",
    "padding-bottom": "13px",
    "padding-left": "18px",
    "extra": "font-weight: 500;\ntext-align: center;\ntext-transform: uppercase;\nletter-spacing: .05em;\nborder: none;\nbox-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);"
}</value>
    </property>
    <property property_name="buttonBg" group_name="color" title="Default button background color" description="" property_type="value" value_type="color" depends_on="" value_group="buttons" display_order="8200" addon_id="XF">
      <value>"@xf-paletteColor1"</value>
    </property>
    <property property_name="buttonCta" group_name="button" title="Button - call to action" description="Call to action buttons sit alone and invite the user to do something, like post a new thread" property_type="css" value_type="" depends_on="" value_group="" display_order="20300" css_components="text,background,extra" addon_id="XF">
      <value>{
    "color": "@xf-textColorEmphasized",
    "background-color": "@xf-buttonCtaBg"
}</value>
    </property>
    <property property_name="buttonCtaBg" group_name="color" title="Call-to-action button background" description="" property_type="value" value_type="color" depends_on="" value_group="buttons" display_order="8400" addon_id="XF">
      <value>"@xf-paletteAccent1"</value>
    </property>
    <property property_name="buttonDefault" group_name="button" title="Button - default" description="Most buttons use this styling, except for primary form submit buttons" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,extra" addon_id="XF">
      <value>{
    "color": "@xf-buttonTextColor",
    "background-color": "@xf-buttonBg"
}</value>
    </property>
    <property property_name="buttonPrimary" group_name="button" title="Button - primary" description="These rules are used mostly for the main submit button for forms" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,extra" addon_id="XF">
      <value>{
    "color": "@xf-textColorEmphasized",
    "background-color": "@xf-buttonPrimaryBg",
    "extra": "min-width: 80px;"
}</value>
    </property>
    <property property_name="buttonPrimaryBg" group_name="color" title="Primary button background color" description="" property_type="value" value_type="color" depends_on="" value_group="buttons" display_order="8300" addon_id="XF">
      <value>"@xf-paletteColor1"</value>
    </property>
    <property property_name="buttonTextColor" group_name="color" title="Default button text color" description="" property_type="value" value_type="color" depends_on="" value_group="buttons" display_order="8100" addon_id="XF">
      <value>"@xf-textColorEmphasized"</value>
    </property>
    <property property_name="chromeBg" group_name="color" title="Page chrome background color" description="" property_type="value" value_type="color" depends_on="" value_group="chrome" display_order="6000" addon_id="XF">
      <value>"@xf-contentBg"</value>
    </property>
    <property property_name="contentAltBase" group_name="content" title="Alternate content area base" description="When an alternative background needs to be presented along side the main content background, this will be employed" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,extra" addon_id="XF">
      <value>{
    "color": "@xf-textColorDimmed",
    "background-color": "@xf-contentAltBg"
}</value>
    </property>
    <property property_name="contentAltBg" group_name="color" title="Alternate content background color" description="In order to differentiate it, some content will be presented on this alternative background" property_type="value" value_type="color" depends_on="" value_group="contentBackground" display_order="2200" addon_id="XF">
      <value>"@xf-paletteColor5"</value>
    </property>
    <property property_name="contentHighlightBase" group_name="content" title="Highlighted content area base" description="If an area of content is selected, for example a row in a table, its normal background will be substituted with this" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,extra" addon_id="XF">
      <value>{
    "color": "@xf-textColorEmphasized",
    "background-color": "@xf-contentHighlightBg"
}</value>
    </property>
    <property property_name="dataListFooter" group_name="dataList" title="Data list footer" description="When data lists have a terminating element at their foot, it is styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeSmaller",
    "color": "@xf-blockFooterTextColor",
    "background-color": "@xf-blockFooterBg",
    "border-top-width": "@xf-borderSize",
    "border-top-color": "@xf-borderColor"
}</value>
    </property>
    <property property_name="dt_account_wrapper_glyphs" group_name="dohthemeglyphs" title="Account Wrapper Icons" description="Adds icons to tabs in account wrapper page when enabled." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="100" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_alternative_nodes" group_name="dohthemeforum" title="Alternative Node Background" description="Sets the background color of even node items." property_type="value" value_type="color" depends_on="" value_group="Forum" display_order="30" addon_id="">
      <value>""</value>
    </property>
    <property property_name="dt_alternative_threads" group_name="dohthemeds" title="Alternative Thread Background" description="Set the background color of even discussion list items." property_type="value" value_type="color" depends_on="" value_group="General" display_order="30" addon_id="">
      <value>""</value>
    </property>
    <property property_name="dt_avatar_shape" group_name="dohthemebasic" title="Avatar Shape" description="Change small avatars around the forum to visually crop into a specific shape." property_type="value" value_type="select" depends_on="" value_group="Global" display_order="30" addon_id="">
      <value_parameters>option1=Default
option2=Circle
option3=Rhombus
option4=Pentagon
option5=Hexagon
option6=Heptagon
option7=Octagon
option8=Nonagon
option9=Bevel
option10=Rabbet</value_parameters>
      <value>"option1"</value>
    </property>
    <property property_name="dt_background_sticky_thread_css" group_name="dohthemeds" title="Sticky Threads" description="Styles the individual sticky threads." property_type="css" value_type="" depends_on="" value_group="" display_order="11" css_components="text,background,border,border_radius,padding,extra" addon_id="">
      <value>[]</value>
    </property>
    <property property_name="dt_breadbrumb_bottom" group_name="dohthemebasic" title="Remove Bottom Breadcrumb" description="Removes the breadcrumb at the bottom of the page." property_type="value" value_type="boolean" depends_on="" value_group="Global" display_order="80" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_breadbrumb_index" group_name="dohthemebasic" title="Remove Body Header on Forum Index" description="This removes the body header for the forum list index page." property_type="value" value_type="boolean" depends_on="" value_group="Global" display_order="60" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_breadbrumb_top" group_name="dohthemebasic" title="Remove Top Breadcrumb" description="Removes the breadcrumb at the top of the page." property_type="value" value_type="boolean" depends_on="" value_group="Global" display_order="70" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_cat_description" group_name="dohthemeforum" title="Category Description" description="Sets the tooltip display type." property_type="value" value_type="select" depends_on="" value_group="Forum" display_order="20" addon_id="">
      <value_parameters>option1=Default
option2=Hover Only
option3=Tooltip</value_parameters>
      <value>"option3"</value>
    </property>
    <property property_name="dt_category_header" group_name="dohthemeforum" title="Category header" description="Categories often have title bars at their tops, which are styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="10" css_components="text,background,border,border_radius,padding,extra" addon_id="">
      <value>{
    "font-size": "@xf-fontSizeLargest",
    "color": "@xf-linkColor",
    "font-weight": "@xf-fontWeightHeavy",
    "background-color": "@xf-pageBg",
    "extra": "margin-bottom: @xf-paddingLarge;"
}</value>
    </property>
    <property property_name="dt_catstrips_minorheader" group_name="dohthemeforum" title="Minor Header Under Category Strips" description="Displays a minor header under the category strips with sections info." property_type="value" value_type="boolean" depends_on="" value_group="Forum" display_order="18" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_collaps_sticky_threads" group_name="dohthemeds" title="Collapsible sticky threads" description="Allows the users to collapse sticky threads. Requires Separate Sticky Threads." property_type="value" value_type="boolean" depends_on="dt_seperate_sticky_threads" value_group="General" display_order="10" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_collapsible_categories" group_name="dohthemeforum" title="Enable Collapsible Category Nodes" description="Allows the user to collapse whole categories in the node list." property_type="value" value_type="boolean" depends_on="" value_group="Forum" display_order="10" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_collapsible_extras" group_name="threadoptions" title="Collapsible User Extras" description="Adds a trigger to toggle the Postbit extra information open and closed (such as joined, messages, trophies, etc..)." property_type="value" value_type="boolean" depends_on="" value_group="MessageLayout" display_order="30" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_collapsible_sidebar" group_name="sidebaroptions" title="Collapsible Sidebar" description="Allows you to collapse and expand the sidebar if it is enabled." property_type="value" value_type="boolean" depends_on="" value_group="Sidebar" display_order="30" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_collapsible_sidebar_block" group_name="sidebaroptions" title="Collapsible Sidebar Block" description="Allows you to collapse and expand a sidebar block if it is enabled." property_type="value" value_type="boolean" depends_on="" value_group="Sidebar" display_order="40" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_collpse_off_icon" group_name="dohthemeglyphs" title="Sidebar Toggle-Off" description="Unicode of the Icon." property_type="value" value_type="string" depends_on="dt_collapsible_sidebar" value_group="Sidebar" display_order="30" addon_id="">
      <value>"\"\\f204\""</value>
    </property>
    <property property_name="dt_collpse_on_icon" group_name="dohthemeglyphs" title="Sidebar Toggle-On" description="Unicode of the Icon." property_type="value" value_type="string" depends_on="dt_collapsible_sidebar" value_group="Sidebar" display_order="20" addon_id="">
      <value>"\"\\f205\""</value>
    </property>
    <property property_name="dt_condense_visito_tabs" group_name="dohthemeheader" title="Condense Visitor Tabs" description="Allows you to condense the visitor tabs. Links for the Alerts and Conversations are added to the user drop-down menu." property_type="value" value_type="boolean" depends_on="" value_group="Navisitor" display_order="40" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_disable_sidebar" group_name="sidebaroptions" title="Disable Sidebar" description="Tick in this checked box if you want to disable the sidebar at the forum." property_type="value" value_type="boolean" depends_on="" value_group="Sidebar" display_order="10" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_disable_tab_links" group_name="dohthemebasic" title="Remove Sub-navigation row" description="Allows you to remove the selected navigation sub-links." property_type="value" value_type="boolean" depends_on="" value_group="Global" display_order="90" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_disc_minor_header" group_name="dohthemeds" title="Discussion minor header" description="Displays a minor header above the thread list with thread info." property_type="value" value_type="boolean" depends_on="" value_group="General" display_order="5" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_disc_new_indicator" group_name="dohthemeds" title="New Indicator on unread posts" description="Displays a &quot;new&quot; indicator next to the node title if there is new content." property_type="value" value_type="boolean" depends_on="" value_group="General" display_order="100" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_discussion_animation" group_name="dohthemeanimations" title="Discussion list animation" description="Adds animation to discussion list items on page load." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="40" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_discussion_glyphs" group_name="dohthemeglyphs" title="Discussion List Icons" description="Adds icons next to username and date text." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="80" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_editor_avatar" group_name="threadoptions" title="Hide Avatar Beside Editor" description="This removes the user's avatar from the Rich text editor." property_type="value" value_type="boolean" depends_on="" value_group="MessageLayout" display_order="50" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_euicss" group_name="threadoptions" title="Show User Extras Info On Hover" description="As opposed to on click, hovering over the Postbit extra information will trigger the sliding effect." property_type="value" value_type="boolean" depends_on="" value_group="MessageLayout" display_order="40" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_extra_footer" group_name="dohthemefooter" title="Enable Extra Footer" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_extra_footer_content_css" group_name="dohthemefooter" title="Extra Footer widget" description="Styles the widget block." property_type="css" value_type="" depends_on="" value_group="" display_order="100" css_components="text,background,border,border_radius,padding,extra" addon_id="">
      <value>{
    "color": "@xf-textColorEmphasized",
    "background-color": "rgba(0, 0, 0, 0.08)",
    "border-radius": "@xf-blockBorderRadius",
    "padding": "@xf-paddingMedium",
    "extra": "border: none;"
}</value>
    </property>
    <property property_name="dt_extra_footer_css" group_name="dohthemefooter" title="Extra Footer body" description="Styles the body of the footer widgets." property_type="css" value_type="" depends_on="" value_group="" display_order="90" css_components="text,background,border,border_radius,padding,extra" addon_id="">
      <value>{
    "color": "@xf-textColorEmphasized",
    "background-color": "@xf-paletteColor2",
    "padding-top": "30px",
    "padding-right": "@xf-paddingLarge",
    "padding-bottom": "30px",
    "padding-left": "@xf-paddingLarge"
}</value>
    </property>
    <property property_name="dt_extra_footer_custom_html" group_name="dohthemefooter" title="Custom HTML Content" description="" property_type="value" value_type="string" depends_on="dt_extra_footer" value_group="dt_extra_footer_html" display_order="30" addon_id="">
      <value_parameters>rows=4</value_parameters>
      <value>"&lt;p&gt;\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas ex id lacus porttitor congue. Nam tristique massa quis eleifend ornare. Sed mattis est at ipsum tristique egestas curabitur.\n&lt;/p&gt;"</value>
    </property>
    <property property_name="dt_extra_footer_custom_html_title" group_name="dohthemefooter" title="Custom HTML Title" description="" property_type="value" value_type="string" depends_on="" value_group="dt_extra_footer_html" display_order="25" addon_id="">
      <value>"About Us"</value>
    </property>
    <property property_name="dt_extra_footer_facebook" group_name="dohthemefooter" title="Facebook URL" description="" property_type="value" value_type="string" depends_on="" value_group="dt_extra_footer_social" display_order="56" addon_id="">
      <value>"dohtheme"</value>
    </property>
    <property property_name="dt_extra_footer_first_column" group_name="dohthemefooter" title="First Column Content" description="" property_type="value" value_type="select" depends_on="dt_extra_footer" value_group="" display_order="20" addon_id="">
      <value_parameters>option1=Members online
option2=Forum statistics
option3=Share this page
option4=Online statistics
option5=New profile posts
option6=New posts
option7=Newest members
option8=Social Links
option9=Custom HTML
option10=Links Column 1
option11=Links Column 2</value_parameters>
      <value>"option4"</value>
    </property>
    <property property_name="dt_extra_footer_fourth_column" group_name="dohthemefooter" title="Fourth Column Content" description="" property_type="value" value_type="select" depends_on="dt_extra_footer" value_group="" display_order="23" addon_id="">
      <value_parameters>option1=Members online
option2=Forum statistics
option3=Share this page
option4=Online statistics
option5=New profile posts
option6=New posts
option7=Newest members
option8=Social Links
option9=Custom HTML
option10=Links Column 1
option11=Links Column 2</value_parameters>
      <value>"option8"</value>
    </property>
    <property property_name="dt_extra_footer_index" group_name="dohthemefooter" title="Enable Extra Footer on Forum Index Only" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="15" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_extra_footer_instagram" group_name="dohthemefooter" title="Instagram URL" description="" property_type="value" value_type="string" depends_on="" value_group="dt_extra_footer_social" display_order="58" addon_id="">
      <value>"dohtheme"</value>
    </property>
    <property property_name="dt_extra_footer_link_1" group_name="dohthemefooter" title="Links Column 1" description="" property_type="value" value_type="string" depends_on="dt_extra_footer" value_group="dt_extra_footer_links" display_order="40" addon_id="">
      <value_parameters>rows=4</value_parameters>
      <value>"&lt;li&gt;&lt;a href=\"#\"&gt;Link Title&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;Link Title&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;Link Title&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;Link Title&lt;/a&gt;&lt;/li&gt;"</value>
    </property>
    <property property_name="dt_extra_footer_link_1_title" group_name="dohthemefooter" title="Links Column 1 Title" description="" property_type="value" value_type="string" depends_on="dt_extra_footer" value_group="dt_extra_footer_links" display_order="35" addon_id="">
      <value>"Title Here"</value>
    </property>
    <property property_name="dt_extra_footer_link_2" group_name="dohthemefooter" title="Links Column 2" description="" property_type="value" value_type="string" depends_on="dt_extra_footer" value_group="dt_extra_footer_links" display_order="50" addon_id="">
      <value_parameters>rows=4</value_parameters>
      <value>"&lt;li&gt;&lt;a href=\"#\"&gt;Link Title&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;Link Title&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;Link Title&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;Link Title&lt;/a&gt;&lt;/li&gt;"</value>
    </property>
    <property property_name="dt_extra_footer_link_2_title" group_name="dohthemefooter" title="Links Column 2 Title" description="" property_type="value" value_type="string" depends_on="dt_extra_footer" value_group="dt_extra_footer_links" display_order="45" addon_id="">
      <value>"Title Here"</value>
    </property>
    <property property_name="dt_extra_footer_link_css" group_name="dohthemefooter" title="Extra Footer links" description="Controls styling for individual links within the links columns." property_type="css" value_type="" depends_on="" value_group="" display_order="130" css_components="text,background,border,border_radius,padding,extra" addon_id="">
      <value>{
    "color": "@xf-textColorEmphasized",
    "padding-top": "2px",
    "padding-bottom": "2px"
}</value>
    </property>
    <property property_name="dt_extra_footer_second_column" group_name="dohthemefooter" title="Second Column Content" description="" property_type="value" value_type="select" depends_on="dt_extra_footer" value_group="" display_order="21" addon_id="">
      <value_parameters>option1=Members online
option2=Forum statistics
option3=Share this page
option4=Online statistics
option5=New profile posts
option6=New posts
option7=Newest members
option8=Social Links
option9=Custom HTML
option10=Links Column 1
option11=Links Column 2</value_parameters>
      <value>"option6"</value>
    </property>
    <property property_name="dt_extra_footer_social_title" group_name="dohthemefooter" title="Social Widget Title" description="" property_type="value" value_type="string" depends_on="" value_group="dt_extra_footer_social" display_order="55" addon_id="">
      <value>"Stay Connected"</value>
    </property>
    <property property_name="dt_extra_footer_third_column" group_name="dohthemefooter" title="Third Column Content" description="" property_type="value" value_type="select" depends_on="dt_extra_footer" value_group="" display_order="22" addon_id="">
      <value_parameters>option1=Members online
option2=Forum statistics
option3=Share this page
option4=Online statistics
option5=New profile posts
option6=New posts
option7=Newest members
option8=Social Links
option9=Custom HTML
option10=Links Column 1
option11=Links Column 2</value_parameters>
      <value>"option7"</value>
    </property>
    <property property_name="dt_extra_footer_title_css" group_name="dohthemefooter" title="Extra Footer widget header" description="Styles the heading block is footer widgets." property_type="css" value_type="" depends_on="" value_group="" display_order="120" css_components="text,background,border,border_radius,padding,extra" addon_id="">
      <value>{
    "color": "@xf-textColorEmphasized",
    "font-weight": "@xf-fontWeightHeavy",
    "padding-top": "@xf-paddingMedium",
    "padding-right": "@xf-paddingLarge",
    "padding-bottom": "@xf-paddingMedium",
    "padding-left": "@xf-paddingLarge",
    "extra": "margin: 0;\nmargin-bottom: @xf-paddingLarge;"
}</value>
    </property>
    <property property_name="dt_extra_footer_twitter" group_name="dohthemefooter" title="Twitter URL" description="" property_type="value" value_type="string" depends_on="" value_group="dt_extra_footer_social" display_order="57" addon_id="">
      <value>"dohtheme"</value>
    </property>
    <property property_name="dt_extra_footer_widgcont_css" group_name="dohthemefooter" title="Extra Footer widget content" description="Styles the content block is footer widgets." property_type="css" value_type="" depends_on="" value_group="" display_order="125" css_components="text,background,border,border_radius,padding,extra" addon_id="">
      <value>{
    "padding-top": "@xf-paddingMedium",
    "padding-right": "@xf-paddingLarge",
    "padding-bottom": "@xf-paddingMedium",
    "padding-left": "@xf-paddingLarge",
    "extra": "margin: 0;"
}</value>
    </property>
    <property property_name="dt_extra_footer_youtube" group_name="dohthemefooter" title="Youtube URL" description="" property_type="value" value_type="string" depends_on="" value_group="dt_extra_footer_social" display_order="59" addon_id="">
      <value>"dohtheme"</value>
    </property>
    <property property_name="dt_firstpost_customization" group_name="threadoptions" title="First Post" description="Styles first post in the thread." property_type="css" value_type="" depends_on="" value_group="" display_order="50" css_components="text,background,border,border_radius,padding,extra" addon_id="">
      <value>[]</value>
    </property>
    <property property_name="dt_grad_color1" group_name="dohthemeheader" title="Gradient Color 1" description="" property_type="value" value_type="color" depends_on="" value_group="Header" display_order="12" addon_id="">
      <value>"rgb(85, 64, 217)"</value>
    </property>
    <property property_name="dt_grad_color2" group_name="dohthemeheader" title="Gradient Color 2" description="" property_type="value" value_type="color" depends_on="" value_group="Header" display_order="13" addon_id="">
      <value>"rgb(238, 39, 98)"</value>
    </property>
    <property property_name="dt_guest_message" group_name="dohthemeheader" title="Enable Header Message" description="Shows a welcome section to your visitors." property_type="value" value_type="boolean" depends_on="" value_group="GuestMessage" display_order="90" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_guest_message_content" group_name="dohthemeheader" title="Guest Message Content" description="" property_type="value" value_type="string" depends_on="dt_guest_message" value_group="GuestMessage" display_order="95" addon_id="">
      <value_parameters>rows=4</value_parameters>
      <value>"&lt;h1&gt;Welcome!&lt;/h1&gt;\n&lt;p&gt;By registering with us, you'll be able to discuss, share and private message with other members of our community.&lt;/p&gt;\n&lt;a href=\"index.php?register\" class=\"button--cta button button--icon button--icon--write\"&gt;&lt;span class=\"button-text\"&gt;\nSignUp Now!\n&lt;/span&gt;&lt;/a&gt;"</value>
    </property>
    <property property_name="dt_guest_message_css" group_name="dohthemeheader" title="Header Message" description="Styles the wrapper around the header message." property_type="css" value_type="" depends_on="" value_group="" display_order="92" css_components="text,background,border,border_radius,padding,extra" addon_id="">
      <value>{
    "color": "@xf-textColorEmphasized",
    "background-color": "@xf-paletteColor2",
    "background-image": "%ASSET:dt_theme_files%/img/headerbg.jpg",
    "padding-top": "4em",
    "padding-right": "0",
    "padding-bottom": "4em",
    "padding-left": "0",
    "extra": "position: relative;\nbackground-repeat: no-repeat;\nbackground-size: cover;\ntext-align: center;"
}</value>
    </property>
    <property property_name="dt_guest_message_index" group_name="dohthemeheader" title="Enable Header Message on Forum Index Only" description="Enabling this setting shows the guest message only in the forum list." property_type="value" value_type="boolean" depends_on="dt_guest_message" value_group="GuestMessage" display_order="91" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_hb_nodes" group_name="dohthemeforum" title="Hover Background on Nodes" description="Sets the background color of node items on hover." property_type="value" value_type="color" depends_on="" value_group="Forum" display_order="40" addon_id="">
      <value>""</value>
    </property>
    <property property_name="dt_hb_threads" group_name="dohthemeds" title="Hover Background on Threads" description="Set the background color of discussion list items on hover." property_type="value" value_type="color" depends_on="" value_group="General" display_order="40" addon_id="">
      <value>""</value>
    </property>
    <property property_name="dt_he_nodes" group_name="dohthemeforum" title="Hover Effect on Nodes" description="This will enable a hover effect for nodes." property_type="value" value_type="boolean" depends_on="" value_group="Forum" display_order="50" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_he_threads" group_name="dohthemeds" title="Hover Effect on Threads" description="This will enable a hover effect for discussion list threads." property_type="value" value_type="boolean" depends_on="" value_group="General" display_order="50" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_inline_ballons" group_name="dohthemeheader" title="Inline Navigation Alert Balloons" description="Instead of displaying like a balloon, alerts will display inline with the text." property_type="value" value_type="boolean" depends_on="" value_group="Navisitor" display_order="50" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_last_avatar_discussion" group_name="dohthemeds" title="Last poster avatar on the discussion list" description="Shows avatar in the last post block in thread list items." property_type="value" value_type="boolean" depends_on="" value_group="General" display_order="70" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_last_avatar_forum" group_name="dohthemeforum" title="Last poster avatar on the forum list" description="Shows avatar in the last post section." property_type="value" value_type="boolean" depends_on="" value_group="Forum" display_order="80" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_link_node_icon" group_name="dohthemeglyphs" title="Link Node Icon" description="Name of Fontawesome Icon." property_type="value" value_type="string" depends_on="" value_group="glyphs_nodes" display_order="37" addon_id="">
      <value>"link"</value>
    </property>
    <property property_name="dt_message_animation" group_name="dohthemeanimations" title="Message animation" description="Adds animation to messages on page load." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="50" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_message_avatar_size" group_name="threadoptions" title="Postbit avatar size" description="Sets the size of the post bit avatar." property_type="value" value_type="select" depends_on="" value_group="MessageElements" display_order="70" addon_id="">
      <value_parameters>s=Small
m=Medium
l=Large</value_parameters>
      <value>"m"</value>
    </property>
    <property property_name="dt_messages_glyphs" group_name="dohthemeglyphs" title="Message Action Bar Icons" description="Adds icons next to the Action Bar text (such as Report, Edit, Delete, etc..)." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="70" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_messages_layout" group_name="threadoptions" title="Messages Layout" description="Specify what message layout you would like to use." property_type="value" value_type="select" depends_on="" value_group="MessageLayout" display_order="20" addon_id="">
      <value_parameters>option1=Vertical
option2=Horizontal
option3=First Post Horizontal</value_parameters>
      <value>"option1"</value>
    </property>
    <property property_name="dt_nav_avatar" group_name="dohthemeheader" title="Remove user avatar from navigation" description="This removes the account tab avatar next to the username." property_type="value" value_type="boolean" depends_on="" value_group="Navisitor" display_order="60" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_navigation_glyphs" group_name="dohthemeglyphs" title="Navigation Icons" description="Adds icons next to the navigation text on the navigation bar." property_type="value" value_type="boolean" depends_on="" value_group="Navigation" display_order="10" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_new_indicator" group_name="dohthemeforum" title="New Indicator Label" description="Displays a new indicator next to the node title if there is new content." property_type="value" value_type="boolean" depends_on="" value_group="Forum" display_order="90" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_new_indicator_css" group_name="dohthemeforum" title="New Indicator Label" description="Styles the new node indicator if enabled." property_type="css" value_type="" depends_on="" value_group="" display_order="20" css_components="text,background,border,border_radius,padding,extra" addon_id="">
      <value>{
    "font-size": "11px",
    "color": "@xf-textColorEmphasized",
    "background-color": "@xf-paletteAccent1",
    "border-radius": "@xf-borderRadiusMedium",
    "padding-top": "3px",
    "padding-right": "6px",
    "padding-bottom": "3px",
    "padding-left": "6px",
    "extra": "text-transform: uppercase;"
}</value>
    </property>
    <property property_name="dt_node_animation" group_name="dohthemeanimations" title="Node animation" description="Adds animation to nodes on page load." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="20" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_node_icon" group_name="dohthemeglyphs" title="Node Icon" description="Name of Fontawesome Icon." property_type="value" value_type="string" depends_on="" value_group="glyphs_nodes" display_order="35" addon_id="">
      <value>"comment-alt-lines"</value>
    </property>
    <property property_name="dt_node_off_icon" group_name="dohthemeglyphs" title="Node Toggle-Off" description="Unicode of the Icon." property_type="value" value_type="string" depends_on="dt_collapsible_categories" value_group="glyphs_nodes" display_order="50" addon_id="">
      <value>"\"\\f139\""</value>
    </property>
    <property property_name="dt_node_on_icon" group_name="dohthemeglyphs" title="Node Toggle-On" description="Unicode of the Icon." property_type="value" value_type="string" depends_on="dt_collapsible_categories" value_group="glyphs_nodes" display_order="40" addon_id="">
      <value>"\"\\f13a\""</value>
    </property>
    <property property_name="dt_node_stats" group_name="dohthemeforum" title="Show Node Stats on Hover" description="Hides the node stats, and displays them only when hovering over the node." property_type="value" value_type="boolean" depends_on="" value_group="Forum" display_order="70" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_nodestat_simple" group_name="dohthemeforum" title="Simplified Node Statics" description="Only shows the number of threads inside the node." property_type="value" value_type="boolean" depends_on="" value_group="Forum" display_order="60" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_offcanvasmenu_linkholder_glyphs" group_name="dohthemeglyphs" title="offCanvasMenu linkHolder Icons" description="Adds icons next to the off-canvas menu header." property_type="value" value_type="boolean" depends_on="" value_group="Navigation" display_order="16" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_offcanvasmenu_links_glyphs" group_name="dohthemeglyphs" title="offCanvasMenu Links Icons" description="Adds icons next to the off-canvas menu links." property_type="value" value_type="boolean" depends_on="" value_group="Navigation" display_order="17" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_offline_indicator" group_name="threadoptions" title="Offline status indicator" description="This is an extension of the status indicator to display Online/Offline depending on the user's status." property_type="value" value_type="boolean" depends_on="" value_group="MessageElements" display_order="60" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_opacity_thread_lock" group_name="dohthemeds" title="Locked Threads Opacity" description="This will gives transparency to locked threads." property_type="value" value_type="boolean" depends_on="" value_group="General" display_order="80" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_page_animation" group_name="dohthemeanimations" title="Page animations" description="Adds animations to main components (header, sidebars, main content, footer) on page load." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_page_node_icon" group_name="dohthemeglyphs" title="Page Node Icon" description="Name of Fontawesome Icon." property_type="value" value_type="string" depends_on="" value_group="glyphs_nodes" display_order="36" addon_id="">
      <value>"file-text"</value>
    </property>
    <property property_name="dt_profile_tabs_glyphs" group_name="dohthemeglyphs" title="Member Profiles Tabs Icons" description="Adds icons to tabs in member profile page when enabled." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="90" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_removecopy" group_name="dohthemebasic" title="Remove Copyright" description="If you have purchased branding free for this style, add the username to disable our copyright." property_type="value" value_type="string" depends_on="" value_group="version" display_order="400" addon_id="">
      <value>""</value>
    </property>
    <property property_name="dt_seperate_sticky_threads" group_name="dohthemeds" title="Separate Sticky Threads" description="This will add headings above sticky threads and above normal threads to clearly differentiate the two types of threads." property_type="value" value_type="boolean" depends_on="" value_group="General" display_order="20" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_seperate_sticky_threads_css" group_name="dohthemeds" title="Sticky Threads Separator" description="Styles the sticky threads separator if enabled." property_type="css" value_type="" depends_on="" value_group="" display_order="12" css_components="background,border,border_radius,padding,extra" addon_id="">
      <value>{
    "background-color": "@xf-contentAltBg",
    "border-width": "@xf-borderSize",
    "border-color": "@xf-borderColor",
    "border-radius": "@xf-borderRadiusSmall",
    "extra": "height: 10px;\nmargin: 0;"
}</value>
    </property>
    <property property_name="dt_sidebar_glyphs" group_name="dohthemeglyphs" title="Sidebar Heading Icons" description="Adds icons to the sidebar headings when enabled." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="60" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_sidebar_login" group_name="sidebaroptions" title="Sidebar login" description="Enables a login box users can quickly login/register on the sidebar." property_type="value" value_type="boolean" depends_on="" value_group="Sidebar" display_order="50" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_sidebar_position" group_name="sidebaroptions" title="Sidebar Position" description="Set whether the sidebar is on the left, right or below the main content." property_type="value" value_type="select" depends_on="" value_group="Sidebar" display_order="20" addon_id="">
      <value_parameters>option1=Right
option2=Left
option3=Below content</value_parameters>
      <value>"option1"</value>
    </property>
    <property property_name="dt_sidebar_widget_animation" group_name="dohthemeanimations" title="Sidebar widget animation" description="Adds animation to sidebar widgets on page load." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="30" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_sticky_catstrips" group_name="dohthemeforum" title="Sticky Category Strips" description="Enables category strips to stick to the top of the page for the category that is currently in view." property_type="value" value_type="boolean" depends_on="" value_group="Forum" display_order="15" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_sticky_sidebar" group_name="sidebaroptions" title="Sticky Sidebar" description="Makes the sidebar component sticky.&#10;&#10;The sticky functionality is being added purely with CSS. This means that it has no performance drawbacks. However, it is not supported in older browsers." property_type="value" value_type="boolean" depends_on="" value_group="Sidebar" display_order="25" addon_id="">
      <value>1</value>
    </property>
    <property property_name="dt_sticky_staff_tools" group_name="dohthemeheader" title="Sticky Staff tools" description="If you intend for staff tools to stick to the top of the page when it is scrolled." property_type="value" value_type="boolean" depends_on="" value_group="Header" display_order="10" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_sub_navigation_glyphs" group_name="dohthemeglyphs" title="Sub-navigation row Icons" description="Adds icons next to the sub-navigation text on the sub-navigation bar." property_type="value" value_type="boolean" depends_on="" value_group="Navigation" display_order="15" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_text_logo" group_name="dohthemeheader" title="Logo Text" description="Set the text value to replace the logo image." property_type="value" value_type="string" depends_on="" value_group="Header" display_order="20" addon_id="">
      <value>""</value>
    </property>
    <property property_name="dt_text_logo_css" group_name="dohthemeheader" title="Logo Text" description="Styles the Logo Text if enabled." property_type="css" value_type="" depends_on="" value_group="" display_order="25" css_components="text,background,border,border_radius,padding,extra" addon_id="">
      <value>{
    "font-size": "@xf-fontSizeLargest"
}</value>
    </property>
    <property property_name="dt_thread_owner" group_name="threadoptions" title="Thread owner indicator" description="Add an indicator in the user post bit for thread owner." property_type="value" value_type="select" depends_on="" value_group="MessageElements" display_order="80" addon_id="">
      <value_parameters>userbanner=User banner
icon=Icon
none=Disabled</value_parameters>
      <value>"icon"</value>
    </property>
    <property property_name="dt_thread_title_center" group_name="threadoptions" title="Center Thread Title" description="This small modification will allow you to center thread message titles." property_type="value" value_type="boolean" depends_on="" value_group="MessageLayout" display_order="10" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_triggers_style" group_name="dohthemeheader" title="Login triggers style" description="The method by which the login form displays once the trigger is activated." property_type="value" value_type="select" depends_on="" value_group="Navisitor" display_order="30" addon_id="">
      <value_parameters>option1=Overlay
option2=Dropdown</value_parameters>
      <value>"option1"</value>
    </property>
    <property property_name="dt_user_message_content" group_name="dohthemeheader" title="Users Message Content" description="" property_type="value" value_type="string" depends_on="dt_guest_message" value_group="GuestMessage" display_order="96" addon_id="">
      <value_parameters>rows=4</value_parameters>
      <value>"&lt;h1&gt;Welcome!&lt;/h1&gt;\n&lt;p&gt;By registering with us, you'll be able to discuss, share and private message with other members of our community.&lt;/p&gt;\n&lt;a href=\"#\" class=\"button--cta button button--icon button--icon--write\"&gt;&lt;span class=\"button-text\"&gt;\nRead More!\n&lt;/span&gt;&lt;/a&gt;"</value>
    </property>
    <property property_name="dt_version" group_name="dohthemebasic" title="Re-Me version" description="This is for development only, and should not ever be changed." property_type="value" value_type="string" depends_on="" value_group="version" display_order="500" addon_id="">
      <value>"2.2.12"</value>
    </property>
    <property property_name="dt_visitor_menu_glyphs" group_name="dohthemeglyphs" title="Visitor Menu Icons" description="Adds icons next to the user's visitor menu links." property_type="value" value_type="boolean" depends_on="" value_group="Navigation" display_order="18" addon_id="">
      <value>0</value>
    </property>
    <property property_name="dt_widget_header" group_name="sidebaroptions" title="Widget header" description="Widgets often have title bars at their tops, which are styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="10" css_components="text,background,border,border_radius,padding,extra" addon_id="">
      <value>{
    "font-size": "@xf-fontSizeLarger",
    "color": "@xf-textColor",
    "font-weight": "@xf-fontWeightHeavy",
    "padding-top": "@xf-paddingLarge",
    "padding-right": "@xf-elementSpacer",
    "padding-bottom": "@xf-paddingLarge",
    "padding-left": "@xf-elementSpacer"
}</value>
    </property>
    <property property_name="editorButtonActiveColor" group_name="rte" title="Editor button active color" description="Color for icons when active, such as the 'B' when the cursor is on bold text" property_type="value" value_type="color" depends_on="" value_group="buttons" display_order="2102" addon_id="XF">
      <value>"@xf-paletteAccent1"</value>
    </property>
    <property property_name="editorSelectionBg" group_name="rte" title="Editor selection background" description="Background color for text that has been selected in the editor" property_type="value" value_type="color" depends_on="" value_group="selectedContent" display_order="1101" addon_id="XF">
      <value>"@xf-borderColor"</value>
    </property>
    <property property_name="fontFamilyBody" group_name="fonts" title="Body Text Font" description="This font is used for the text of messages etc." property_type="value" value_type="string" depends_on="" value_group="font" display_order="200" addon_id="XF">
      <value>"'DIN Next Rounded LT Pro', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif"</value>
    </property>
    <property property_name="fontFamilyUi" group_name="fonts" title="User Interface Font" description="The font list for your main text" property_type="value" value_type="string" depends_on="" value_group="font" display_order="100" addon_id="XF">
      <value>"'DIN Next Rounded LT Pro', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif"</value>
    </property>
    <property property_name="formLabel" group_name="form" title="Form label column" description="In full-width forms, the left column contains labels for the controls in the right column" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border_color_simple,extra" addon_id="XF">
      <value>{
    "background-color": "@xf-contentAltBg",
    "border-color": "@xf-borderColor",
    "extra": "text-align: right;"
}</value>
    </property>
    <property property_name="formSectionHeader" group_name="form" title="Form section header" description="Occasionally, forms are long enough to warrant being divided into sections, with each section headed by an element using these style rules" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeLarge",
    "color": "@xf-minorHeadingTextColor",
    "border-top-width": "@xf-borderSize",
    "border-top-color": "@xf-borderColor",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColor",
    "extra": "text-transform: uppercase;\npadding: @xf-paddingLarge;"
}</value>
    </property>
    <property property_name="formSubmitRow" group_name="form" title="Form submit row" description="At the bottom of most forms is a bar containing the submit button etc." property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="background,border,extra" addon_id="XF">
      <value>{
    "background-color": "@xf-paletteColor2"
}</value>
    </property>
    <property property_name="globalActionColor" group_name="misc" title="Global action indicator color" description="This is the base color of the gadgets that display when an action is being processed in the background." property_type="value" value_type="color" depends_on="" value_group="" display_order="400" addon_id="XF">
      <value>"@xf-paletteAccent1"</value>
    </property>
    <property property_name="inlineModBar" group_name="inlineMod" title="Inline moderation bar" description="A bar containing controls appears when content is selected for inline moderation. Its appearance is controlled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,padding,extra" addon_id="XF">
      <value>{
    "color": "@xf-textColorEmphasized",
    "background-color": "@xf-paletteColor2",
    "padding-top": "@xf-paddingSmall",
    "padding-bottom": "@xf-paddingSmall"
}</value>
    </property>
    <property property_name="inlineModHighlightColor" group_name="color" title="Inline moderation highlight color" description="When content is selected for inline moderation, its background color will be replaced with this" property_type="value" value_type="color" depends_on="" value_group="contentBackground" display_order="2500" addon_id="XF">
      <value>"rgb(255, 235, 144)"</value>
    </property>
    <property property_name="input" group_name="input" title="Form input" description="Controls the style of most text-input boxes" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,border_radius,padding,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeNormal",
    "color": "@xf-inputTextColor",
    "background-color": "@xf-inputBgColor",
    "border-width": "@xf-borderSize",
    "border-color": "@xf-borderColor",
    "border-radius": "@xf-borderRadiusLarge",
    "padding": "@xf-paddingLarge"
}</value>
    </property>
    <property property_name="inputBgColor" group_name="color" title="Text input box background color" description="" property_type="value" value_type="color" depends_on="" value_group="input" display_order="8500" addon_id="XF">
      <value>"@xf-contentBg"</value>
    </property>
    <property property_name="inputFocusBgColor" group_name="color" title="Focused text box background color" description="" property_type="value" value_type="color" depends_on="" value_group="input" display_order="8600" addon_id="XF">
      <value>"@xf-pageBg"</value>
    </property>
    <property property_name="linkColor" group_name="color" title="Link color" description="Basic hyperlinks on standard background colors will use this style" property_type="value" value_type="color" depends_on="" value_group="links" display_order="1000" addon_id="XF">
      <value>"rgb(55, 66, 80)"</value>
    </property>
    <property property_name="linkHover" group_name="page" title="Links - hovered" description="When basic links are hovered, they use this set of rules for their styling" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,extra" addon_id="XF">
      <value>{
    "color": "@xf-linkHoverColor",
    "text-decoration": "none"
}</value>
    </property>
    <property property_name="linkHoverColor" group_name="color" title="Link hover color" description="Basic hyperlinks will turn this color when hovered" property_type="value" value_type="color" depends_on="" value_group="links" display_order="1100" addon_id="XF">
      <value>"@xf-paletteColor1"</value>
    </property>
    <property property_name="majorHeadingBg" group_name="color" title="Major heading background color" description="" property_type="value" value_type="color" depends_on="" value_group="heading" display_order="6100" addon_id="XF">
      <value>"@xf-paletteColor1"</value>
    </property>
    <property property_name="memberHeader" group_name="member" title="Member profile header" description="The member profile page's content header is styled with these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "background-color": "rgb(247, 248, 252)",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorLight"
}</value>
    </property>
    <property property_name="memberHeaderName" group_name="member" title="Member profile header - name" description="The styling of the name of the member whose page is being viewed is controlled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeLargest",
    "color": "@xf-textColor",
    "extra": "font-weight: 500;"
}</value>
    </property>
    <property property_name="memberTooltipHeader" group_name="member" title="Member tooltip header" description="The member tooltip, which appears when hovering over user names, is styled with these controls" property_type="css" value_type="" depends_on="" value_group="" display_order="20300" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "background-color": "rgb(247, 248, 252)",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorLight",
    "extra": "padding: @xf-paddingLarge;"
}</value>
    </property>
    <property property_name="memberTooltipName" group_name="member" title="Member tooltip header - name" description="Styling for the name of the user whose tooltip is being displayed" property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="text,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeLargest",
    "color": "@xf-textColor",
    "extra": "font-weight: 500;"
}</value>
    </property>
    <property property_name="menu" group_name="menu" title="Menu" description="Controls the main block of all popup menus" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border_width_simple,border_color_simple,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-textColor",
    "background-color": "@xf-contentBg",
    "extra": "padding: @xf-paddingLarge;"
}</value>
    </property>
    <property property_name="menuBorderRadius" group_name="menu" title="Menu border radius" description="Controls the size of the border radius for all menus" property_type="value" value_type="unit" depends_on="" value_group="" display_order="200" addon_id="XF">
      <value>"8px"</value>
    </property>
    <property property_name="menuFooter" group_name="menu" title="Menu footer" description="When a popup menu has a bottom, footer element, it will use these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20600" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeSmaller",
    "color": "@xf-textColorDimmed",
    "background-color": "@xf-contentAltBg",
    "extra": "border-radius: 8px;"
}</value>
    </property>
    <property property_name="menuHeader" group_name="menu" title="Menu header" description="Most menus identify themselves with a header just underneath their top border" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeLarge",
    "color": "@xf-textColor",
    "background-color": "@xf-contentAltBg",
    "extra": "border-radius: 8px;"
}</value>
    </property>
    <property property_name="menuLinkRow" group_name="menu" title="Menu link row" description="Styling for link rows within popup menus" property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="text,background,extra" addon_id="XF">
      <value>{
    "color": "@xf-textColor",
    "text-decoration": "none",
    "extra": "border-radius: @xf-blockBorderRadius;"
}</value>
    </property>
    <property property_name="menuLinkRowSelected" group_name="menu" title="Menu link row - selected" description="Styling for link rows in menus, when selected or hovered" property_type="css" value_type="" depends_on="" value_group="" display_order="20500" css_components="text,background,extra" addon_id="XF">
      <value>{
    "color": "@xf-linkColor",
    "text-decoration": "none",
    "background-color": "@xf-contentAltBg",
    "extra": "border-radius: 16px;"
}</value>
    </property>
    <property property_name="menuTabHeader" group_name="menu" title="Menu tab header" description="Multi-part, tabbed menu headers use these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeNormal",
    "color": "@xf-textColorDimmed",
    "background-color": "@xf-contentAltBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorLight"
}</value>
    </property>
    <property property_name="messageNewIndicator" group_name="message" title="New message indicator" description="Usually a small token attached to the message block, the indicator that a message is new/unread is controlled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,border_radius,padding,extra" addon_id="XF">
      <value>{
    "font-size": "90%",
    "color": "@xf-textColorEmphasized",
    "background-color": "@xf-paletteAccent1",
    "border-radius": "@xf-borderRadiusSmall",
    "padding-top": "1px",
    "padding-right": "4px",
    "padding-bottom": "1px",
    "padding-left": "4px"
}</value>
    </property>
    <property property_name="messagePadding" group_name="message" title="Message padding" description="When using the full size message block, this value defines the size of the padding around the message text" property_type="value" value_type="unit" depends_on="" value_group="padding" display_order="200" addon_id="XF">
      <value>"@xf-paddingLargest"</value>
    </property>
    <property property_name="messageUserBlock" group_name="message" title="Message user info block" description="Apart from its width, the (left) message user info column is styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border_width_simple,border_color_simple,extra" addon_id="XF">
      <value>{
    "background-color": "@xf-contentAltBg",
    "border-width": "@xf-borderSize",
    "border-color": "@xf-borderColor",
    "extra": "border-radius: 8px;"
}</value>
    </property>
    <property property_name="messageUserBlockWidth" group_name="message" title="Message user info block width" description="Controls the width of the (left) user info column on the full size message block" property_type="value" value_type="unit" depends_on="" value_group="user" display_order="500" addon_id="XF">
      <value>"140px"</value>
    </property>
    <property property_name="messageUserElements" group_name="message" title="Message user info elements" description="The elements selected here will be displayed in the message user info block. It will not be displayed below the single column width." property_type="value" value_type="template" depends_on="" value_group="user" display_order="600" addon_id="XF">
      <value_parameters>template=style_property_template_messageUserElements
type=array</value_parameters>
      <value>{
    "register_date": "1",
    "message_count": "1"
}</value>
    </property>
    <property property_name="metaThemeColor" group_name="misc" title="Meta theme color" description="This sets the theme color used for PWA installations, as well as the address bar color on Chrome for Android." property_type="value" value_type="color" depends_on="" value_group="" display_order="900" addon_id="XF">
      <value>"@xf-paletteColor1"</value>
    </property>
    <property property_name="minorHeadingTextColor" group_name="color" title="Minor heading text color" description="" property_type="value" value_type="color" depends_on="" value_group="heading" display_order="6400" addon_id="XF">
      <value>"@xf-paletteAccent1"</value>
    </property>
    <property property_name="nodeIconReadColor" group_name="nodeList" title="Read node icon color" description="When the content within a node has been read, its icon will revert to a less attention-grabbing color, defined here" property_type="value" value_type="color" depends_on="" value_group="" display_order="200" addon_id="XF">
      <value>"@xf-textColorMuted"</value>
    </property>
    <property property_name="nodeIconUnreadColor" group_name="nodeList" title="Unread node icon color" description="Node icons give an at-a-glance indication of whether or not the content housed within the node has been read. The unread icon color should stand out from its background for quick identification" property_type="value" value_type="color" depends_on="" value_group="" display_order="100" addon_id="XF">
      <value>"@xf-paletteColor1"</value>
    </property>
    <property property_name="nodeListDescriptionDisplay" group_name="nodeList" title="Description display style" description="To save vertical space, it is possible to hide node descriptions until the node title is hovered, at which point they are displayed in a tooltip" property_type="value" value_type="radio" depends_on="" value_group="" display_order="400" addon_id="XF">
      <value_parameters>tooltip={{ phrase('tooltip') }}
inline={{ phrase('inline') }}
none={{ phrase('none') }}</value_parameters>
      <value>"tooltip"</value>
    </property>
    <property property_name="overlayHeader" group_name="overlay" title="Overlay header" description="Overlays use a header element to identify their contents, styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,padding,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeLargest",
    "color": "@xf-textColorEmphasized",
    "background-color": "@xf-paletteColor2",
    "padding": "@xf-paddingLarge",
    "extra": "font-weight: 500;"
}</value>
    </property>
    <property property_name="overlayMaskBlur" group_name="overlay" title="Overlay mask blur amount" description="When an overlay is displayed, the page content will be blurred by the amount specified here. This can help draw focus to the overlay content." property_type="value" value_type="unit" depends_on="" value_group="" display_order="300" addon_id="XF">
      <value>"1px"</value>
    </property>
    <property property_name="overlayMaskColor" group_name="overlay" title="Overlay mask color" description="When an overlay is shown, the page behind is masked by the color defined here. Use RGBA transparency to allow the page to show through" property_type="value" value_type="color" depends_on="" value_group="" display_order="200" addon_id="XF">
      <value>"rgba(55, 66, 80, .45)"</value>
    </property>
    <property property_name="pageBackground" group_name="page" title="Page background" description="The page background, behind all block elements, uses the styling rules defined here" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="background,extra" addon_id="XF">
      <value>{
    "background-color": "@xf-pageBg",
    "extra": "text-rendering: optimizeLegibility;\n-moz-osx-font-smoothing: grayscale;\n-webkit-font-smoothing: antialiased;"
}</value>
    </property>
    <property property_name="pageBg" group_name="color" title="Page background color" description="The background of the page itself, on which all other content rests" property_type="value" value_type="color" depends_on="" value_group="contentBackground" display_order="2100" addon_id="XF">
      <value>"rgb(251, 251, 252)"</value>
    </property>
    <property property_name="paletteAccent1" group_name="palette" title="Accent 1" description="" property_type="value" value_type="color" depends_on="" value_group="accent" display_order="2000" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"rgb(242, 76, 134)"</value>
    </property>
    <property property_name="paletteAccent2" group_name="palette" title="Accent 2" description="" property_type="value" value_type="color" depends_on="" value_group="accent" display_order="2100" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"rgb(254, 222, 1)"</value>
    </property>
    <property property_name="paletteColor1" group_name="palette" title="Color 1" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1000" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"rgb(13, 169, 239)"</value>
    </property>
    <property property_name="paletteColor2" group_name="palette" title="Color 2" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1100" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"rgb(55, 66, 80)"</value>
    </property>
    <property property_name="paletteColor3" group_name="palette" title="Color 3" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1200" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"rgb(125, 201, 197)"</value>
    </property>
    <property property_name="paletteColor4" group_name="palette" title="Color 4" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1300" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"rgb(229, 233, 242)"</value>
    </property>
    <property property_name="paletteColor5" group_name="palette" title="Color 5" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1400" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"rgb(249, 250, 252)"</value>
    </property>
    <property property_name="paletteNeutral1" group_name="palette" title="Neutral 1" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3000" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"rgb(255, 255, 255)"</value>
    </property>
    <property property_name="paletteNeutral2" group_name="palette" title="Neutral 2" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3100" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"rgb(132, 148, 172)"</value>
    </property>
    <property property_name="paletteNeutral3" group_name="palette" title="Neutral 3" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3200" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"rgb(28, 45, 65)"</value>
    </property>
    <property property_name="progressBarColor" group_name="misc" title="Progress bar color" description="The progress bar appears at the top of the window when the system is waiting for a response from the server" property_type="value" value_type="color" depends_on="" value_group="" display_order="300" addon_id="XF">
      <value>"@xf-paletteAccent1"</value>
    </property>
    <property property_name="publicFooter" group_name="footer" title="Footer" description="The footer is the primary element that sits below the main content on all public pages" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-textColorMuted",
    "background-color": "@xf-paletteColor2"
}</value>
    </property>
    <property property_name="publicFooterLink" group_name="footer" title="Footer links" description="Controls styling for individual links within the footer" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,extra" addon_id="XF">
      <value>{
    "color": "@xf-textColorEmphasized"
}</value>
    </property>
    <property property_name="publicHeader" group_name="headerNav" title="Header/logo row" description="The header row contains your logo and sits at the top of every public page" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,extra" addon_id="XF">
      <value>{
    "color": "@xf-chromeTextColor",
    "background-color": "@xf-chromeBg"
}</value>
    </property>
    <property property_name="publicLogoUrl" group_name="basic" title="Logo URL" description="The web path from your site's XenForo installation directory to your logo image. If you specify an SVG image here, you should set &lt;b&gt;Emails &amp;gt; Email logo URL&lt;/b&gt; to point to a PNG image, or similar, for increased compatibility." property_type="value" value_type="string" depends_on="" value_group="logo" display_order="101" addon_id="XF">
      <value_parameters>asset=logo</value_parameters>
      <value>"%ASSET:dt_theme_files%/xenforo/xenforo-logo.png"</value>
    </property>
    <property property_name="publicLogoWidth" group_name="basic" title="Public logo width" description="If you specify the width of your logo here, you can avoid a costly re-flow of your page layout once the logo loads." property_type="value" value_type="number" depends_on="" value_group="logo" display_order="115" addon_id="XF">
      <value>"93"</value>
    </property>
    <property property_name="publicNav" group_name="headerNav" title="Navigation row" description="The navigation row sits below the header and contains the primary site navigation tabs and menus" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,extra" addon_id="XF">
      <value>{
    "color": "@xf-chromeTextColor",
    "background-color": "@xf-chromeBg",
    "extra": "box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.05);"
}</value>
    </property>
    <property property_name="publicNavPaddingH" group_name="headerNav" title="Navigation padding horizontal" description="Defines the amount of padding applied horizontally to each main navigational tab in the header" property_type="value" value_type="unit" depends_on="" value_group="navPad" display_order="4100" addon_id="XF">
      <value>"15px"</value>
    </property>
    <property property_name="publicNavPaddingV" group_name="headerNav" title="Navigation padding vertical" description="This value defines the amount of padding applied to the main navigational tabs in the header" property_type="value" value_type="unit" depends_on="" value_group="navPad" display_order="4000" addon_id="XF">
      <value>"29px"</value>
    </property>
    <property property_name="publicNavSelected" group_name="headerNav" title="Navigation row - selected tab" description="Additional styling to apply to navigation tabs when they are selected" property_type="css" value_type="" depends_on="" value_group="" display_order="20300" css_components="text,background,border,border_radius,extra" addon_id="XF">
      <value>{
    "color": "@xf-paletteColor3",
    "extra": "box-shadow: inset 0 -3px 0 0 @xf-paletteColor3;"
}</value>
    </property>
    <property property_name="publicNavSticky" group_name="headerNav" title="Sticky navigation element" description="If you intend for some or all of your header to stick to the top of the page when it is scrolled, choose which elements should stick" property_type="value" value_type="radio" depends_on="" value_group="navigation" display_order="1200" addon_id="XF">
      <value_parameters>primary={{ phrase('primary_navigation_row_only') }}
all={{ phrase('primary_and_sub_navigation_rows') }}
none={{ phrase('none') }}</value_parameters>
      <value>"primary"</value>
    </property>
    <property property_name="publicNavTab" group_name="headerNav" title="Navigation row - tab" description="Controls the styling of individual tab elements within the navigation row" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-chromeTextColor",
    "text-decoration": "none",
    "extra": "text-transform: uppercase;"
}</value>
    </property>
    <property property_name="publicNavTabHover" group_name="headerNav" title="Navigation row - hovered tab" description="Additional styling to apply to navigation tabs when the pointer hovers over them" property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="text,background,extra" addon_id="XF">
      <value>{
    "color": "@xf-linkColor",
    "text-decoration": "none"
}</value>
    </property>
    <property property_name="publicNavTabMenuOpen" group_name="headerNav" title="Navigation row - menu open" description="Styling applied when the popup menu for the current tab is visible" property_type="css" value_type="" depends_on="" value_group="" display_order="20450" css_components="text,background,extra" addon_id="XF">
      <value>{
    "color": "@xf-paletteColor1",
    "text-decoration": "none"
}</value>
    </property>
    <property property_name="publicStaffBar" group_name="headerNav" title="Staff tools bar" description="Visible only to staff, the staff tools bar sits above the header and contains items such as reported content, the moderation queue..." property_type="css" value_type="" depends_on="" value_group="" display_order="20700" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-textColorEmphasized",
    "background-color": "@xf-paletteColor2"
}</value>
    </property>
    <property property_name="publicSubNav" group_name="headerNav" title="Sub-navigation row" description="Below the main navigation row, this row shows content associated with the selected main navigation tab" property_type="css" value_type="" depends_on="" value_group="" display_order="20500" css_components="text,background,border,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeNormal",
    "color": "@xf-subNavTextColor",
    "background-color": "@xf-subNavBg",
    "extra": "margin-right: auto;"
}</value>
    </property>
    <property property_name="publicSubNavElHover" group_name="headerNav" title="Sub-navigation row - hovered element" description="Additional styling applied to sub-navigation tabs when the pointer hovers over them" property_type="css" value_type="" depends_on="" value_group="" display_order="20600" css_components="text,extra" addon_id="XF">
      <value>{
    "color": "@xf-paletteColor3"
}</value>
    </property>
    <property property_name="publicSubNavElMenuOpen" group_name="headerNav" title="Sub-navigation row - menu-open element" description="Styles sub-navigation elements whose popup menu is currently open" property_type="css" value_type="" depends_on="" value_group="" display_order="20650" css_components="text,background,extra" addon_id="XF">
      <value>{
    "color": "@xf-paletteColor1",
    "text-decoration": "none"
}</value>
    </property>
    <property property_name="publicSubNavPaddingH" group_name="headerNav" title="Sub-navigation padding horizontal" description="The amount of horizontal padding for each sub-navigation element" property_type="value" value_type="unit" depends_on="" value_group="subNavPad" display_order="5100" addon_id="XF">
      <value>"14px"</value>
    </property>
    <property property_name="publicSubNavPaddingV" group_name="headerNav" title="Sub-navigation padding vertical" description="Defines the amount of vertical padding applied to each item in the sub-navigation bar in the header" property_type="value" value_type="unit" depends_on="" value_group="subNavPad" display_order="5000" addon_id="XF">
      <value>"10px"</value>
    </property>
    <property property_name="sidebarSpacer" group_name="page" title="Sidebar and side navigation spacer" description="Distance between the main content and the sidebar" property_type="value" value_type="unit" depends_on="" value_group="sidebar" display_order="1000" addon_id="XF">
      <value>"20px"</value>
    </property>
    <property property_name="sidebarWidth" group_name="page" title="Sidebar and side navigation width" description="Width of any elements that make up the sidebar" property_type="value" value_type="unit" depends_on="" value_group="sidebar" display_order="1100" addon_id="XF">
      <value>"270px"</value>
    </property>
    <property property_name="standaloneTab" group_name="tab" title="Standalone tabs" description="Tabs that are not part of block headers are styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeNormal",
    "color": "@xf-textColorMuted",
    "background-color": "@xf-pageBg",
    "extra": "font-weight: 500;\npadding-left: @xf-paddingLarge;\npadding-right: @xf-paddingLarge;\nborder-radius: 8px;"
}</value>
    </property>
    <property property_name="standaloneTabSelected" group_name="tab" title="Standalone tabs - selected tab" description="The selected tab in groups that are not part of block headers" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border_color_simple,extra" addon_id="XF">
      <value>{
    "color": "@xf-textColor",
    "border-color": "@xf-textColor"
}</value>
    </property>
    <property property_name="starEmptyColor" group_name="misc" title="Empty rating star color" description="This is the color of the empty portion of each rating star." property_type="value" value_type="color" depends_on="" value_group="" display_order="700" addon_id="XF">
      <value>"@xf-borderColorHeavy"</value>
    </property>
    <property property_name="starFullColor" group_name="misc" title="Full rating star color" description="This is the color of the full portion of each rating star." property_type="value" value_type="color" depends_on="" value_group="" display_order="800" addon_id="XF">
      <value>"@xf-paletteAccent2"</value>
    </property>
    <property property_name="subNavBg" group_name="color" title="Page sub-navigation background" description="" property_type="value" value_type="color" depends_on="" value_group="chrome" display_order="6080" addon_id="XF">
      <value>"@xf-contentBg"</value>
    </property>
    <property property_name="textColorAccentContent" group_name="color" title="Accented content text color" description="" property_type="value" value_type="color" depends_on="" value_group="textOther" display_order="3200" addon_id="XF">
      <value>"@xf-contentBg"</value>
    </property>
    <property property_name="textColorAttention" group_name="color" title="Attention-grabbing text color" description="" property_type="value" value_type="color" depends_on="" value_group="textOther" display_order="3300" addon_id="XF">
      <value>"@xf-paletteAccent1"</value>
    </property>
    <property property_name="textColorEmphasized" group_name="color" title="Emphasized text color" description="" property_type="value" value_type="color" depends_on="" value_group="textOther" display_order="3100" addon_id="XF">
      <value>"@xf-contentBg"</value>
    </property>
    <property property_name="tooltip" group_name="tooltip" title="Tooltip" description="Certain elements have special floating tooltips, which are controlled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border_radius,padding,extra" addon_id="XF">
      <value>{
    "font-size": "@xf-fontSizeSmaller",
    "color": "@xf-textColorEmphasized",
    "background-color": "fade(@xf-paletteColor2, 85%)",
    "border-radius": "@xf-borderRadiusLarge",
    "padding": "@xf-paddingLarge"
}</value>
    </property>
  </properties>
</style>
