 <?xml version="1.0" encoding="utf-8" ?> 
- <style title="UI.X Pro" description="The Ultimate Forum Experience" user_selectable="1" base_version_id="2020870" export_version="2">
  <assets /> 
- <templates>
- <template title="core_menu.less" type="public" addon_id="XF" version_id="2020870" version_string="2.2.8">
- <![CDATA[ // ###################################### MENUS ######################

@_menu-arrowSize: 8px;
@_menu-edgePadding: @xf-pageEdgeSpacer;
@_menu-closePaddingH: @xf-paddingLarge;
@_menu-paddingH: 12px;
@_menu-paddingV: 12px;

.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();
	
	@media (max-width: @xf-responsiveNarrow) {
		width: 90% !important;
		max-width: 90% !important;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
	}

	position: absolute;
	z-index: @zIndex-2;
	margin: @_menu-arrowSize 0 0;
	min-width: 240px;
	max-width: 320px;
	border-radius: @xf-menuBorderRadius;
	// .m-dropShadow(0, 5px, 10px, 0, .35);
	box-shadow: @xf-uix_elevation2;
	.xf-contentBase();
	
	.block-container {
		box-shadow: none;
		// border-radius: 0;
		margin: 0;
		border: none;
		padding: 0;
	}

	&.menu--structural
	{
		margin-top: 0;
		
		// when menus nudge up against structure, the joined corner should not be radiused
		&.menu--left
		{
			// border-top-left-radius: 0;
		}
		&.menu--right
		{
			// border-top-right-radius: 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-minorHeader--small {
		padding: @_menu-paddingV @_menu-paddingH;
		font-size: calc(@xf-menu--font-size + 1);
	}
	
	// fix overflow when menu padding is less than padding medium for alert trigger
	.alertToggler {
		margin-right: -@_menu-paddingH;
	}
}

.menu-arrow
{
	position: absolute;
	top: 0;
	width: 0;
	height: 0;
	border: 0 solid transparent;
	display: none;

	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;
	border-top: @xf-borderSizeFeature solid @xf-menuFeatureBorderColor;

	// when menus nudge up against structure, the joined corner should not be radiused
	.menu--structural.menu--left &
	{
		// border-top-left-radius: 0;
	}
	.menu--structural.menu--right &
	{
		// border-top-right-radius: 0;
	}

	// 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: @_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();
		}
	}

	.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-paddingH;
	.m-clearFix();
	
	// causing issues when menu-row is not the first item
	// &:not(:first-of-type):not(.menu-row--separated) {padding-top: 0;}

	&.menu-row--alt
	{
		.xf-contentAltBase();
	}

	&.menu-row--highlighted
	{
		.xf-contentHighlightBase();
	}

	&.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-contentHighlightBg;
	}

	&:empty
	{
		padding: 0;
	}
}

.menu-linkRow
{
	display: block;
	padding: @_menu-paddingV @_menu-paddingH;
	// text-indent: @_menu-paddingH;
	border-left: @xf-borderSizeFeature solid transparent;
	.xf-menuLinkRow();
	
	&.menu-linkRow--alt
	{
		.xf-contentAltBase();
	}

	&.is-selected,
	&:hover,
	&:focus
	{
		.xf-menuLinkRowSelected();

		// border-left-color: fade(@xf-borderColorFeature, 50%);

		&: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: @_menu-paddingV @_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;
			
			.button {.xf-uix_buttonSmall();}
		}
	}

	&.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_pagenav.less" type="public" addon_id="XF" version_id="2020034" version_string="2.2.0 Beta 4">
- <![CDATA[ // ####################################### PAGE NAVIGATION ########################

@_page-paddingV: xf-default(@xf-buttonBase--padding-top, 6px);
@_page-paddingH: 8px;
@_page-paddingHSimple: 10px;
.pageNavWrapper {}

.pageNav {display: flex;}

.pageNav-jump--next {margin-left: 6px;}
.pageNav-jump--prev {margin-right: 6px;}

.m-pageNavElCore()
{
	background: @xf-contentBg;
	color: @xf-textColorMuted;
	.xf-blockBorder();
	// font-size: @xf-fontSizeSmall;
	border-radius: 0;
	border: 1px solid @xf-borderColor;
	white-space: nowrap;
	height: 24px;
	line-height: 24px;

	&:hover,
	&:active
	{
		// background: xf-intensify(@xf-contentHighlightBg, 3%);
		text-decoration: none;
		color: @xf-textColor;
	}
}

.pageNav-jump
{
	display: inline-block;
	.m-pageNavElCore();
	// border-radius: @xf-borderRadiusSmall;
	padding: @_page-paddingV @_page-paddingH;
	height: 26px;
	line-height: 26px;

	&.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;
	}

	<xf:comment>
	&:first-child
	{
		.m-borderLeftRadius(@xf-borderRadiusSmall);
	}

	&:last-child
	{
		.m-borderRightRadius(@xf-borderRadiusSmall);
	}
	</xf:comment>

	> a
	{
		display: block;
		padding: @_page-paddingV @_page-paddingH;
		text-decoration: none;
		color: inherit;
	}

	&.pageNav-page--current
	{
		// background: @xf-contentAccentBg;
		color: @xf-uix_secondaryColor;
		box-shadow: 0 -2px @xf-uix_secondaryColor inset;
		// border: @xf-borderSize solid @xf-borderColorAccentContent;
		cursor: pointer;

		&:hover,
		&:active
		{
			// background: xf-intensify(@xf-contentAccentBg, 3%);
		}

		<xf:comment>
		+ .pageNav-page
		{
			border-left: none;
		}
		</xf:comment>
	}
}

// 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;
	height: 24px;
	line-height: 24px;
}
.pageNavSimple-el
{
	display: inline-block;
	.xf-blockBorder();
	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();
		color: @xf-uix_primaryColor;
		background-color: none;
		&:hover,
		&:active
		{
			background: xf-intensify(@xf-contentAccentBg, 3%);
			text-decoration: none;
		}
	}
	&.pageNavSimple-el--prev,
	&.pageNavSimple-el--next
	{
		background: @xf-uix_primaryColor;
		color: #fff;
		min-width: 75px;
		@media (max-width: 350px)
		{
			min-width: 0;
		}
		&:hover,
		&:active
		{
			background: xf-intensify(@xf-uix_primaryColor, 5%);
			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: @xf-uix_primaryColor;
		&:hover,
		&:active
		{
			.xf-blockBorder();
			background: xf-intensify(@xf-contentHighlightBg, 3%);
			color: @xf-linkColor;
			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
		width: auto;
		font-size: 18px;
		line-height: inherit;
	}
	&.pageNavSimple-el--last i:before
	{
		.m-faContent(@fa-var-forward, false, ltr); // 1em
		.m-faContent(@fa-var-backward, false, rtl); // 1em
		width: auto;
		font-size: 18px;
		line-height: inherit;
	}
	&.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;
		}
	}
}

<xf:if is="property('uix_hideTopPagenavMobile')">
// 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;
	}
}
</xf:if>
  ]]> 
  </template>
- <template title="message.less" type="public" addon_id="XF" version_id="2020870" version_string="2.2.8">
- <![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--main,
		.message-cell--vote
		{
			background: @xf-inlineModHighlightColor;
		}

		.message-userArrow:after
		{
			border-right-color: @xf-inlineModHighlightColor;
		}
	}
}

.message-inner
{
	display: flex;

	& + .message-inner
	{
		border-top: @xf-borderSize solid @xf-borderColor;
	}
}

.message-cell
{
	display: block;
	vertical-align: top;
	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-right: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
		min-width: 0;
	}

	&.message-cell--vote
	{
		position: relative;
		.xf-messageUserBlock(no-border);
		border-left: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
		border-right: 0;
		padding-top: 0;
		padding-bottom: 0;
		padding: 0;

		.message--solution &
		{
			background: @xf-successBg;
			.contentVote {color: @xf-successColor;}
		}

		.solutionIcon
		{
			margin-top: @xf-paddingMedium;
		}
	}

	&.message-cell--user
	{
		.m-fixedWidthFlex((@xf-messageUserBlockWidth) + 2 * (@xf-messagePadding));

		.message--simple &
		{
			.m-fixedWidthFlex(@_messageSimple-userColumnWidth + 2 * @xf-messagePaddingSmall);
			// width: auto;
			// min-width: auto;
			// background: none;
			// border: none;
			// padding-right: 0;
		}
	}

	&.message-cell--action
	{
		.m-fixedWidthFlex((@_message-actionColumnWidth) + 2 * (@xf-messagePadding));
	}

	&.message-cell--main
	{
		flex: 1 1 auto;
		width: 100%;
		// display: flex;
		min-width: 0;
		.xf-uix_messageMain();

		&.is-editing
		{
			padding: 0;
		}

		.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;
	}
}

.message-main
{
	height: 100%;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}

.has-browser-safari .uix_message--condensed  .message-main {height: auto;}

.message-content
{
	flex: 1 1 auto;

	// IE11 flex bug
	min-height: 1px;
	max-width: 100%;
}

.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;
	}
}

form.message--simple .message-cell--main {
	flex-direction: column;
	padding: @xf-paddingLarge;
}

.message--quickReply .message-cell--main {
	flex-direction: column;
	padding: @xf-messagePadding;
}

@media (max-width: @xf-messageSingleColumnWidth)
{
	.message:not(.message--forceColumns)
	{
		.message-inner
		{
			display: block;
		}

		.message-cell
		{
			display: block;
			.m-clearFix();

			&.message-cell--user
			{
				width: auto;
				border-right: none;
				border-bottom: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
			}

			&.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--main
			{
				// padding-left: @xf-messagePadding;
			}

			&.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
{
	position: absolute;
	top: (@xf-messagePadding) * 2;
	right: -1px;

	.m-triangleLeft(xf-default(@xf-messageUserBlock--border-color, transparent), @xf-messagePadding);

	<xf:if is="property('uix_removeMessageArrow')">
	display: none;
	</xf:if>

	&:after
	{
		position: absolute;
		top: -(@xf-messagePadding - 1px);
		right: -@xf-messagePadding;
		content: "";

		<xf:if is="property('uix_messageMain--background-color')">
		.m-triangleLeft(@xf-uix_messageMain--background-color, @xf-messagePadding - 1px);
		<xf:else />
		.m-triangleLeft(xf-default(@xf-contentBg, transparent), @xf-messagePadding - 1px);
		</xf:if>
	}
}


.message-avatar
{
	text-align: center;

	.avatar
	{
		vertical-align: bottom;
		max-width: @xf-messageUserBlockWidth;
		max-height: @xf-messageUserBlockWidth;
	}
}

.message-avatar-wrapper
{
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	margin-bottom: .5em;

	.message-avatar-online
	{
		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-contentBg;
			border: @xf-contentBg solid 2px;
			background: @xf-uix_message--background-color;
			border-color: @xf-uix_message--background-color;
			background: @xf-messageUserBlock--background-color;
			border-color: @xf-messageUserBlock--background-color;
			border-radius: 50%;
			display: inline-block;
		}
	}
}

.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
{
	@media (min-width: @xf-messageSingleColumnWidth) {
		display: block;
	}
	margin-top: 3px;
}

.message-userExtras
{
	// margin-top: 3px;
	font-size: @xf-fontSizeSmaller;

	<xf:if is="property('uix_postBitIcons')">
	dl.pairs dt:after {content:'';}

	.pairs {

		display: flex;
		align-items: center;
		margin-top: 3px;

		i {font-size: 18px;}

		dd {
			min-width: 0;
			max-width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: left;
		}
	}


	</xf:if>
}

.message--deleted
{
	.message-userDetails
	{
		display: none;
	}

	.message-avatar .avatar
	{
		.m-avatarSize(@avatar-s);
	}
}

@media (min-width: @xf-messageSingleColumnWidth) {
	.message-userDetails {text-align: center;}
}

@media (max-width: @xf-messageSingleColumnWidth)
{

	.uix_messagePostBitWrapper {
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		min-width: 0;
		max-width: 100%;
	}

	.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-avatar-online
				{
					left: auto;
					right: 0;
				}
			}
		}

		.message-userDetails
		{
			flex: 1;
			min-width: 0;
			padding-left: @xf-messagePadding;
			width: 100%;
		}

		.message-userExtras {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			padding-left: @xf-messagePadding;
			padding-top: @xf-paddingSmall;

			.pairs {
				margin-right: @xf-paddingMedium;
				line-height: 1.3;
			}
		}

		.message-name
		{
			text-align: left;
		}

		.message-userTitle,
		.message-userBanner.userBanner
		{
			display: inline-block;
			text-align: left;
			margin: 0;
		}

		.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;
	border-bottom: @xf-borderSize solid @xf-borderColorFaint;
	padding-bottom: 3px;
	// .m-clearFix();
	.xf-uix_messageMeta;

	&.message-attribution--plain
	{
		border-bottom: none;
		font-size: inherit;
		// padding-bottom: 0;
	}

	&.message-attribution--split
	{
		display: flex;
		align-items: flex-end;
		flex-wrap: wrap;
		grid-gap: @xf-paddingMedium;

		.message-attribution-opposite
		{
			margin-left: auto;
		}
	}
}

.message-attribution-main
{
	float: left;
	margin-right: @xf-paddingMedium;
}

.message-attribution-opposite
{
	float: right;

	&.message-attribution-opposite--list
	{
		display: flex;
		line-height: 1;
		.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;
	padding-left: @xf-messagePadding;
	padding-right: @xf-messagePadding;
}

.message-fields
{
	margin: @xf-messagePadding 0;

	.message--simple &
	{
		margin-top: @xf-messagePaddingSmall;
		margin-bottom: @xf-messagePaddingSmall;
	}

	&:last-child
	{
		margin-bottom: 0;
	}
	.xf-uix_threadField();

	dt, dd {vertical-align: top;}

	.pairs dd {display: inline-block;}
}

.message-body
{
	margin: @xf-messagePadding 0;
	font-family: @xf-fontFamilyBody;
	.m-clearFix();
	.xf-uix_messageBody();

	.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;
	.xf-uix_messageAttachments();
}

.message-attachments-list
{
	.m-listPlain();
}

.message-lastEdit
{
	margin-top: .5em;
	color: @xf-textColorMuted;
	font-size: @xf-fontSizeSmallest;
	text-align: right;
	padding: 0 @xf-messagePadding @xf-messagePadding;
}

.message-signature
{
	margin-top: @xf-messagePadding;
	.xf-messageSignature();
}

.message-actionBar .actionBar-set
{
	// margin-top: @xf-messagePadding;
	font-size: @xf-fontSizeSmall;
	// padding: calc( @xf-messagePadding / 2 );
	.message--simple &
	{
		// margin-top: @xf-messagePaddingSmall;
	}
}

.message .likesBar
{
	// .xf-minorBlockContent();
	// font-size: @xf-fontSizeSmaller;
	margin-top: @xf-messagePadding;
	padding: @xf-messagePaddingSmall;
	.xf-uix_messageLikes();
}

.message .reactionsBar
{
	margin-top: @xf-messagePadding;
	padding: @xf-messagePaddingSmall;
	.xf-uix_messageLikes();
}

.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-messagePadding;

	// 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;
}

.message-responses .comment-actionBar.actionBar {padding: 0;}

.message-responses .comment-actionBar .actionBar-set.actionBar-set--internal {padding: 0;}

.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;
}

// ######################### ACTION BAR #######################

.actionBar
{
	.m-clearFix();
	.xf-uix_messageActionBar();
}

.actionBar-set
{
	&.actionBar-set--internal
	{
		float: left;
		margin-left: -3px;

		> .actionBar-action:first-child
		{
			margin-left: 0;
		}
	}

	&.actionBar-set--external
	{
		float: right;
		margin-right: -3px;

		> .actionBar-action:last-child
		{
			margin-right: 0;
		}
	}
}

// ################################## 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;
		}

		.menu & {text-align: right;}
	}
}

// ################################## MESSAGE NOTICES #############################

.comment-content .messageNotice,
.messageNotice
{
	margin: @xf-messagePaddingSmall 0;
	padding: @xf-messagePaddingSmall @xf-messagePadding;
	.xf-contentAccentBase();
	font-size: @xf-fontSizeSmaller;
	border-left: @xf-borderSizeMinorFeature solid @xf-borderColorAttention;
	.xf-uix_messageNotice();

	&.messageNotice--deleted
	{
		border-left: @xf-borderSizeFeature solid @xf-errorFeatureColor;
		border-left-width: @xf-borderSize;
		background: @xf-errorBg;
		color: @xf-errorColor;

		.m-textColoredLinks() !important;
		
		&:before, a {color: inherit;}
	}

	&.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;
		vertical-align: middle;
		font-size: @xf-uix_iconSize !important;
	}

	&.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, .js-quickReply
{
	.block-container
	{
		background: none;
		border: none;
		box-shadow: none;
		border-radius: 0;
		overflow: visible;
		padding: 0;
	}

	&.block .message,
	.block-row
	{
		.xf-contentBase();
		.xf-blockBorder();
		border-radius: @xf-blockBorderRadius;

		.xf-uix_message();

		.xf-uix_message();
		
		&:first-child {
			border-top-left-radius: @xf-borderRadiusLarge;
			border-top-right-radius: @xf-borderRadiusLarge;		
		}
		&:last-child {
			border-bottom-left-radius: @xf-borderRadiusLarge;
			border-bottom-right-radius: @xf-borderRadiusLarge;		
		}	

		+ .message,
		+ .block-row
		{
			margin-top: @xf-blockPaddingV;
			// Changed for iO
			margin-top:0;
		}
	}

	.block-filterBar
	{
		.xf-blockBorder();
		border-radius: @xf-blockBorderRadius;
		margin-bottom: @xf-blockPaddingV;
	}

	.message-spacer
	{
		+ .message,
		+ .block-row
		{
			margin-top: @xf-blockPaddingV;
		}
	}

	.message-inner .message-cell
	{
		border-radius: 0;
	}

	.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; }
	}

	.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; }
	}

	@media (max-width: @xf-messageSingleColumnWidth)
	{
		.message-inner
		{
			.message-cell
			{
				border-radius: 0;
			}

			&:first-of-type .message-cell:first-child
			{
				border-top-left-radius: @block-borderRadius-inner;
				border-top-right-radius: @block-borderRadius-inner;
			}

			&:last-of-type .message-cell:last-child
			{
				border-bottom-left-radius: @block-borderRadius-inner;
				border-bottom-right-radius: @block-borderRadius-inner;
			}
		}

		.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)
	{
		.message,
		&.block .message,
		.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;
	}

	.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;
			}

			.bbWrapper
			{
				.m-fadeOutLines(8, @xf-contentBg);
			}
		}
	}

	.articlePreview-text
	{
		flex: 1 1 auto;
		display: flex;
		min-width: 0;
		flex-direction: column;
		padding: @xf-messagePadding;
	}

	.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;
			}
		}
	}

	.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="uix.less" type="public" addon_id="" version_id="0" version_string="">
- <![CDATA[ {{ include('uix_buttonRipple.less') }}
{{ include('uix_pageAnimations.less') }}
{{ include('uix_canvas.less') }}
{{ include('uix_thirdParty.less') }}
{{ include('uix_bandaids.less') }}

<xf:if is="property('uix_onlineIndicator') == 'pulse'">
@keyframes pulse {
	from {
		opacity: 1;
		border-width: 0px;
		transform: scale(1);
	}
	to {
		transform: scale(2);
		opacity: 0;
		border-width: 8px;
	}
}

.message-avatar-online {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	&:after {
		content: '';
		position: absolute;
		height: 100%;
		width: 100%;
		border-radius: 100%;
		border: 1px solid rgb(127, 185, 0);
		height: 13px;
		width: 13px;
		opacity: 1;
		animation: pulse 1.5s;
		animation-iteration-count: infinite;
		animation-timing-function: ease;
		transform-origin: center;
	}
}
</xf:if>

.fb-page {
	width: 100%;
}

.tabPanes .block-outer {padding-top: @xf-elementSpacer;}

.uix_node--transitioning {
	.m-uix_collapseOverflow();
}

.message .message-responses {

	.message-responseRow {
		&:first-child, &.is-active {
			margin-top: @xf-messagePaddingSmall;
		}
	}

	.comment .comment-actionBar.actionBar {
		border: none;
		// padding: @xf-messagePadding 0 0;
		margin: 0;
	}
}

.p-nav-menuTrigger {
	position: relative; 

	&.badgeContainer:after {
		position: absolute;
		left: -5px;
		top: -5px;

		@media (min-width: @xf-responsiveNarrow) {
			display: none !important;	
		}
	}
}

.menu-footer-controls {
	display: flex;
	flex-wrap: wrap;

	.button:not(:last-child) {
		margin-right: 5px;
	}
}

.p-navEl .menu-linkRow:before {margin-right: @xf-paddingSmall; }

<xf:if is="property('uix_sidebarMobileCanvas')">

@media (min-width: @xf-uix_sidebarBreakpoint) {
	.uix_sidebarCanvasTrigger {display: none;}
}

@media (max-width: @xf-uix_sidebarBreakpoint) {
	body .p-body-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		transform: translatex(-100%);
		margin: 0;

		<xf:if is="property('uix_sidebarMobileCanvas')">
		overflow: hidden !important;
		</xf:if>

		&.is-transitioning {
			transition: ease-in .25s .25s transform;

			.uix_sidebarInner {transition: transform 0.25s ease-in;}

			&.is-active {transition: ease-in .01s transform;}
		}

		.uix_sidebarInner {
			// padding: 0;
			margin: 0;
			<xf:if is="{{ property('uix_sidebarLocation') }} == 'right'">
			transform: translatex(200%);
			margin-left: auto;
			<xf:else />
			transform: translatex(-100%);
			</xf:if>
		}

		.block-container {box-shadow: none;}

		.uix_sidebar--scroller {
			margin: 0;
			width: 100%;
		}

		&.is-active {
			transform: translatex(0);

			.uix_sidebarInner.offCanvasMenu-content {
				transform: translatex(0);
			}
		}
	}
}
<xf:else />
@media (max-width: @xf-uix_sidebarBreakpoint) {
	body .uix_sidebarInner .uix_sidebar--scroller {margin-top: 0;}	
}
</xf:if>

// added to vertically center discussion list meta info

.structItem-cell--icon + .structItem-cell--main,
.structItem-cell--icon + .structItem-cell--newThread {
	padding-left: 0;
}

.structItem-cell--main .structItem-minor {
	display: flex;
	align-items: center;

	.structItem-parts {flex-grow: 1;}
	.structItem-extraInfo {order: 2; margin-left: auto;}
	.structItem-statuses {order: 1;}
}

// end

.block.uix_mainTabBar {
	display: flex;
	justify-content: center;

	.xf-uix_mainTabsBarStyling();

	.block-tabHeader {border: none;}

	.tabs-tab:hover {background: none;}
}

.p-pageWrapper > .block.uix_mainTabBar {
	margin: 0;
}

.offCanvasMenu-content {
	height: 100vh;

	.menu-scroller {
		max-height: 100%;	
	}
}

.offCanvasMenu-content .p-body-sideNavContent {
	.block {margin: 0;}

	.block-container {
		box-shadow: none;
	}
}

.p-body-header .uix_sidebarTrigger__component {margin-left: @xf-paddingMedium;}

.cover .memberHeader-blurb.pairs {
	border-color: rgba(255,255,255,.3);
}

.hScroller-scroll {
	&.th_scroller--start-active {
		-webkit-mask-image: linear-gradient(to right, transparent 5%, black 10%);
		mask-image: linear-gradient(to right, transparent 5%, black 10%);
	}

	&.th_scroller--end-active {
		-webkit-mask-image: linear-gradient(to left, transparent 5%, black 10%);
		mask-image: linear-gradient(to left, transparent 5%, black 10%);
	}

	&.th_scroller--end-active.th_scroller--start-active {
		-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 5%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 95%);
		mask-image: linear-gradient(to right, rgba(0,0,0,0) 5%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 95%);
	}
}

.block[data-widget-definition="visitor_panel"] .contentRow {margin-bottom: @xf-paddingMedium;}

.block[data-widget-definition="th_widget_login_uix"] .formSubmitRow-controls {
	padding-left: 0;	
	text-align: center;
}

.uix_loginProvider__row {
	dt {display: none;}
	dd {text-align: center;}
}

.thBranding__pipe {display: none;}

.p-footer-copyright > * ~ .thBranding .thBranding__pipe {display: inline;}

.offCanvasMenu-link {padding: @xf-paddingMedium @xf-paddingLarge;}

.offCanvasMenu-subList {padding-bottom: 0;}

*::selection,
{
	.xf-uix_textSelection(); /* WebKit/Blink Browsers */
}
*::-moz-selection {
	.xf-uix_textSelection(); /* Gecko Browsers */
}

.block-container {
	.uix_newIndicator {
		.xf-uix_newNodeMarkerStyle();
	}
}

/* --- Sticky kit header fix --- */

.uix_headerContainer--stickyFix {
	height: 1px; 
	visibility: hidden;
}
.uix_headerContainer {margin-top: -1px !important;}

/* -- fixes sticky kit abs positioning for sticky header on covered themes -- */

<xf:if is="{{ property('uix_pageStyle') }} == 'covered'">
.has-no-hiddenscroll .is-modalOpen .is-sticky {
	margin-left: 0px;
}
</xf:if>

.uix_adminTrigger {display: none !important;}

<xf:if is="property('uix_collapseStaffbarLinks')">
@media (max-width: @xf-uix_viewportCollapseStaffLinks) {
	.p-staffBar-link {display: none !important;}
	.uix_adminTrigger {display: inline-block !important;}
}
</xf:if>

/***** Abridged Signatures *******/

.uix_signatureExpand {display: none;}

.message-signature {
	overflow: hidden;
	transition: ease-in-out .2s height;

	&--expandable {
		height: @xf-uix_signatureMaxHeight + 0px; // adding 0 converts the number to px value}

		<xf:if is="property('messageSignature--background-color')">
		@signatureBgColor: @xf-messageSignature--background-color;
		<xf:elseif is="property('uix_message--background-color')" />
		@signatureBgColor: @xf-uix_message--background-color;
		<xf:elseif is="property('contentBase--background-color')" />
		@signatureBgColor: @xf-contentBase--background-color;
		<xf:else />
		@signatureBgColor: @xf-contentBg;
		</xf:if>

		.uix_signatureExpand {
			padding-bottom: @xf-paddingLarge;
			background: linear-gradient(to bottom, fade(@signatureBgColor, 0%), @signatureBgColor 40%);
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			height: 60px;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			color: @xf-textColorAttention;

			&:hover {cursor: pointer;}
		}
	}

	&.message-signature--expanded {
		height: auto;
		padding-bottom: @xf-paddingLarge;

		.bbWrapper {padding-bottom: (@xf-paddingLarge * 2);}

		.uix_signatureExpand {background: none;}
	}
}

/***** extra user info postbit collapse *******/

<xf:if is="property('uix_collapseExtraInfo')">
.thThreads__userExtra--toggle {
	text-align: center;
	margin-top: @xf-paddingMedium;

	.thThreads__userExtra--trigger {
		background: @xf-uix_primaryColor;
		color: #fff;
		width: 24px;
		height: 24px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		border-radius: 100%;
		transition: ease-in transform .2s .2s;

		&:hover {cursor: pointer; text-decoration: none;}

		&:before {
			.m-faBase();
			.m-faContent(@fa-var-chevron-down);
		}
	}
}
</xf:if>

.thThreads__message-userExtras {
	height: 0;
	overflow: hidden;
	transition: ease-in height .2s;
}

@media (max-width: @xf-messageSingleColumnWidth) {
	.thThreads__message-userExtras {display: none;}
	.thThreads__userExtra--toggle {display: none;}
}

.userExtra--expand  {
	.thThreads__message-userExtras {height: auto;}
	.thThreads__userExtra--trigger {transform: rotate(-180deg);}
}

/*------- sticky thread collapse ------- */

<xf:if is="property('uix_collapsibleStickyThreads')">

.uix_threadCollapseTrigger {
	transition: ease transform .2s;
	margin-left: auto;
	font-size: 18px;

	&.is-active {transform: rotate(-180deg);}
}

.uix_stickyContainerOuter {
	transition: ease-in height 0.3s, ease-in opacity 0.3s;
	opacity: 1;

	display: none;
	opacity: 0;
	-webkit-transition: all 0.2s ease, -xf-opacity 0.2s ease;
	transition: all 0.2s ease, -xf-opacity 0.2s ease;
	overflow-y: hidden;
	height: 0;
	-webkit-transition-property: all, -xf-height;
	transition-property: all, -xf-height;

	&.is-active {
		display: block;
		opacity: 1;
		height: auto;
		overflow-y: visible;
	}
	&.is-transitioning {
		display: block;
		width: 100%;
	}
	&.is-transitioning {
		overflow-y: hidden;
	}

	.uix_stickyContainerInner {
		width: 100%;
		display: table;
	}
}

.uix_stickyContainerOuter.uix_threadListSeparator--collapsed {
	height: 0;
	opacity: 0;
	pointer-events: none;
	transition: ease-in height 0.3s, ease-in opacity 0.3s;

	.uix_block-body--outer {
		height: 0 !important;
		opacity: 0;
		pointer-events: none;
	}
}

</xf:if>

/*------- category collapse ------- */

<xf:if is="property('uix_categoryCollapse')">

@keyframes overflow-delay {
	from {
		overflow: visible;
	}
}

@keyframes overflow-show {
	from {
		overflow: hidden;
	}
}

.category--collapsed.block--category {

	.uix_block-body--outer {
		height: 0 !important;
		opacity: 0;
		pointer-events: none;
		animation: .3s overflow-delay;
		overflow: hidden;
		// animation-delay: .3s;
		// animation-fill-mode: backwards;
	}

	.categoryCollapse--trigger {transform: rotate(-180deg);}

	&:hover {text-decoration: none;}
}

.categoryCollapse--trigger {
	transition: @uix_move transform .2s;
	overflow: hidden;
	height: 18px;
	min-width: 24px;
	width: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
}

.block--category .uix_block-body--outer {
	transition: @uix_move height 0.3s, @uix_move opacity 0.3s;
	opacity: 1;
	animation: .3s overflow-show;
	overflow: visible;
}

</xf:if>

/*------- Sidebar collapse ------- */

a.uix_sidebarTrigger__component {
	display: inline-flex;
	align-items: center;

	&:hover {cursor: pointer;}

	<xf:if is="property('uix_viewportWidthRemoveSubNav') != '100%'">
	<xf:if is="property('uix_sidebarTriggerPosition') == 'sectionLinks'">
	@media (min-width: (@xf-uix_viewportWidthRemoveSubNav + 1px) ) {
		.p-nav-inner & {display: none !important;}
	}
	</xf:if>
	</xf:if>

	<xf:if is="property('uix_sidebarTriggerPosition') == 'titlebar'">
	@media (min-width: (@xf-responsiveWide + 1px) ) {
		.p-nav-inner & {display: none !important;}
	}
	@media (max-width: @xf-responsiveWide) {
		.p-body-header & {display: none !important;}
	}
	</xf:if>

	.p-nav-inner & {
		color: inherit;
		color: @xf-publicNavTab--color;
		background: none !important;
		box-shadow: none;
		border: none;

		.uix_sidebarTrigger--phrase {
			display: none;
		}

		i {
			font-size: @xf-uix_iconSizeLarge;
			width: auto;
			padding: 0;
			margin: 0;

			&:before {
				display: inline-flex;
				justify-content: center;
				width: 10px;
			}
		}
	}

	&.uix_sidebarCanvasTrigger {
		@media (min-width: (@xf-uix_sidebarBreakpoint + 1px) ) {
			display: none;
		}
	}

	&.uix_sidebarTrigger {
		@media (max-width: @xf-uix_sidebarBreakpoint) {
			display: none;
		}
	}

	i {
		// transform: rotate(0);
		// transition: ease-in transform .2s;
		font-size: @xf-uix_iconSize;
		margin-left: -7px;
	}

	<xf:if is="property('uix_sidebarLocation') == 'left'">
	span {order: 1;}

	/*
	i {
	transform: rotate(-180deg);
	.uix_sidebarCollapsed & {
	transform: rotate(0);
}
}
	*/

	</xf:if>
}

<xf:if is="property('uix_collapsibleSidebar')">

.p-body-sidebar {
	transition: ease-in opacity .2s .2s, ease-in max-height .2s .2s;
	opacity: 1;
	max-height: 100%;
	.uix_sidebarInner {
		transition: .01s .2s transform;
	}
}
@media (min-width: @xf-responsiveWide) {
	.uix_sidebarCollapsed {
		.p-body-sidebar {
			transition: ease-in opacity 0.2s, ease-in max-height .2s .01s;
			opacity: 0;
			max-height: 0;
		}
		.uix_sidebarInner {
			transition: .0.01s .0.01s transform;
			transform: scaleY(0);
		}
		.p-body-main--withSidebar .p-body-content {
			width: 100%;
			max-width: 100%;
			<xf:if is="{{ property('uix_sidebarLocation') == 'left' }}">
			transition: ease-in width 0.2s 0.2s, ease-in max-width 0.2s .2s
				</xf:if>
		}
		.p-body-main--withSidebar.p-body-main--withSideNav .p-body-content {
			width: calc(~"100% - {{ uix_intval(property('sidebarWidth')) + uix_intval(property('elementSpacer'))}}px");
			max-width: calc(~"100% - {{ uix_intval(property('sidebarWidth')) + uix_intval(property('elementSpacer'))}}px");
			<xf:if is="{{ property('uix_sidebarLocation') == 'left' }}">
			transition: ease-in width 0.2s 0.2s, ease-in max-width 0.2s .2s
				</xf:if>
		}
	}
}

</xf:if>

<xf:if is="property('uix_sidebarLeft')">
.button.uix_sidebarTrigger__component {
	flex-direction: row-reverse;
}
</xf:if>

/*------- navigation icons------- */

body .p-navEl-link, body .offCanvasMenu-link {
	font-family: inherit; 
	font-weight: inherit;
	-webkit-font-smoothing: initial;
}

<xf:if is="property('uix_navTabIcons')">

.p-navEl-link:before, .offCanvasMenu-link:before {
	.m-faBase();
	.xf-uix_navTabIconStyle();
}

<xf:if is="!property('uix_navTabIcons')">
.p-navEl-link:before {display: none !important;}
</xf:if>

.p-navEl-link:not(.mdi):not(.fa), .offCanvasMenu-link:not(.mdi):not(.fa) {
	<xf:if is="{{ property('uix_iconFontFamily') }} == 'fontawesome'">
	&[data-nav-id]:before {.m-faBase();}
	</xf:if>
	<xf:if is="{{ property('uix_defaultNavIcon') }}">
	&[data-nav-id]:before {
		.m-faContent(@fa-var-folder);		
	}
	</xf:if>

	.offCanvasMenu-link {dislay: none;}

	&[data-nav-id="thxpress"]:before {
		.m-faContent(@fa-var-newspaper);
	}
	&[data-nav-id="th_donate"]:before {
		.m-faContent(@fa-var-gift);
	}
	&[data-nav-id="home"]:before {
		.m-faContent(@fa-var-home);
	}
	&[data-nav-id="forums"]:before {
		.m-faContent(@fa-var-comments);
	}
	&[data-nav-id="whatsNew"]:before {
		.m-faContent(@fa-var-bolt);
	}
	&[data-nav-id="members"]:before {
		.m-faContent(@fa-var-users);
	}
	&[data-nav-id="profile"]:before {
		.m-faContent(@fa-var-user);
	}
	&[data-nav-id="alerts"]:before {
		.m-faContent(@fa-var-bell);
	}
	&[data-nav-id="settings"]:before {
		.m-faContent(@fa-var-cog);
	}
	&[data-nav-id="xfmg"]:before {
		.m-faContent(@fa-var-image);
	}
	&[data-nav-id="xfrm"]:before {
		.m-faContent(@fa-var-cogs);
	}
	&[data-nav-id="ad_leaderboards"]:before {
		.m-faContent(@fa-var-podium);
	}
	&[data-nav-id="EWRporta"]:before, &[data-nav-id="blog"]:before, &[data-nav-id="XPRESS"]:before {
		.m-faContent(@fa-var-newspaper);
	}
}

.p-sectionLinks .p-navEl-link:before,
.offCanvasMenu-subList .offCanvasMenu-link:before {display: none !important;}

</xf:if>


/* ---Force header content fluid --- */

<xf:if is="(property('uix_navigationType') == 'sidebarNav') && (property('uix_pageStyle') == 'covered')">
.p-staffBar .pageContent,
.p-header-inner,
.p-nav-inner,
.p-sectionLinks .pageContent {max-width: 100%;}
</xf:if>

/* ---Sidebar Navigation --- */

.p-nav .p-nav-menuTrigger.uix_sidebarNav--trigger {display: none;}

<xf:if is="(property('uix_navigationType') == 'sidebarNav') && (property('uix_pageStyle') == 'covered')">

@media (min-width: (@xf-publicNavCollapseWidth + 1px) ) {
	.uix_page--fluid.sidebarNav--active .p-body-inner {
		width: calc( ~"100% - {{ uix_intval(property('uix_sidebarNavWidth')) + (uix_intval(property('elementSpacer')) * 2) }}px");
	}

	.p-nav .p-nav-menuTrigger.uix_sidebarNav--trigger {display: inline-block;}
	.uix_page--fixed.sidebarNav--active .p-body-inner {
		@media (max-width: @uix_sidebarNavBreakpoint) {
			width: calc( ~"100% - {{ uix_intval(property('uix_sidebarNavWidth')) + (uix_intval(property('elementSpacer')) * 2) }}px");
		}

		@media (min-width: calc(@uix_sidebarNavBreakpoint + 1px) ) {
			left: -105px;
		}
	}
}
</xf:if>

.uix_sidebarNav__inner__widgets {
	padding: @xf-paddingLarge;
}

.sidebarNav--active .uix_sidebarNav {
	margin-left: 0;
}

.uix_stickyBodyElement:not(.offCanvasMenu) {
	position: sticky;
	position: -webkit-sticky;

	<xf:comment> -- sticky test -- 
	.uix_stickyBottom & {
		top: unset !important;
		bottom: @xf-elementSpacer;
		margin-top: auto;
	}
	</xf:comment>
}

.uix_stickyBottom .p-body-sidebar {display: flex;}

.uix_sidebarNav {
	.uix_sidebarNav__inner {
		overflow: hidden;
	}

	.uix_sidebar--scroller {
		overflow-y: auto;
		margin-right: -30px;
		padding-right: 32px;
	}
}

<xf:if is="property('uix_stickySidebar') == 'top'">
.uix_sidebarInner,
.p-body-sideNavInner:not(.offCanvasMenu) {
	position: static;
}
@media (min-width: (@xf-uix_sidebarBreakpoint + 1px) ) {
	.uix_sidebarInner,
	.p-body-sideNavInner {
		position: sticky;
		position: -webkit-sticky;
	}

	<xf:if is="property('uix_scrollableSidebar')">
	.uix_sidebarInner, .p-body-sideNavInner {

		overflow: hidden;
		.block {
			margin-left: 2px;
			margin-rght: 2px;
		}

		.uix_sidebar--scroller {
			overflow-y: auto;
			max-height: 90vh;
			margin-right: -30px;
			padding-right: 32px;
			padding-top: 2px;
			padding-bottom: 2px;
		}
	}
	</xf:if>
}
</xf:if>

.offCanvasMenu .offCanvasMenu-link:before {
	font-size: @xf-uix_iconSizeLarge !important;
	padding-right: 1em;
}

.offCanvasMenu-link {
	display: flex;
	align-items: center;

	&.offCanvasMenu-link--splitToggle {font-size: 18px;}
}

.offCanvasMenu.is-active .uix_sidebar--scroller {
	width: 100vw !important;
}

.offCanvasMenu .uix_sidebar--scroller {
	@media (max-width: @xf-uix_sidebarBreakpoint) {
		position: static !important;

		+ div[style*="position"] {display: none !important;}
	}
}

.uix_sidebarNav {
	.xf-uix_sidebarNavigationStyle();

	width: @xf-uix_sidebarNavWidth;
	min-width: @xf-uix_sidebarNavWidth;
	padding-bottom: @xf-elementSpacer;
	margin-left: -{{property('uix_sidebarNavWidth')}};
<xf:if is="property('uix_pageStyle') != 'covered'">
padding-top: @xf-elementSpacer;
</xf:if>
z-index: 1;
transition: ease-in-out margin-left .3s;

@media (max-width: @xf-publicNavCollapseWidth) {
	margin-left: -{{property('uix_sidebarNavWidth')}} !important;
}

.uix_sidebarNavList {
	padding: 10px 0;
	margin: 0;
	border-bottom: 1px solid @xf-borderColor;
	line-height: 40px;
	width: @xf-uix_sidebarNavWidth - 2px;

	&:first-child {padding-top: 0;}

	&:last-child {border-bottom: none;}

	.uix_sidebarNav__subNav {
		display: block;
		height: 0;
		overflow: hidden;
		transition: ease-in height .3s;

		&.subNav--expand {height: auto;}
	}

	.menu-linkRow {
		padding: 0 @xf-paddingLarge;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		color: @xf-textColorDimmed;
		border: none;
		.xf-uix_canvasNavSubItem();

		&:hover {
			border: none;
			.xf-uix_canvasNavItemHover();
		}
	}

	.p-navEl-link span {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		min-width: 0;
	}

	.uix_sidebarNavList__title {
		padding: 0 @xf-paddingLarge;
		font-size: @xf-fontSizeSmaller;
		color: @xf-textColorMuted;
	}

	> li {
		display: block;

		.p-navEl:before, .p-navEl:after {display: none;}

		.p-navEl__inner {
			display: flex;
			align-items: center;
			.xf-uix_canvasNavItem();
		}

		.p-navEl__inner:hover,
		.blockLink:hover {
			.xf-uix_canvasNavItemHover();
		}

		.is-selected .p-navEl__inner {
			.xf-uix_canvasNavItemActive();

			a, .p-navEl-link {
				color: inherit;
			}
		}

		.p-navEl {display: block;}

		.p-navEl-link,
		.p-navEl-linkHolder,
		.blockLink {
			display: flex;
			min-width: 0;
			align-items: center;
			padding: 0 @xf-paddingLarge;
			color: @xf-textColorDimmed;
			background: none;
			width: 100%;
			text-decoration: none;
			float: none;

			&:before {
				font-size: @xf-uix_iconSizeLarge !important;
				width: @xf-uix_iconSizeLarge !important;
				padding-right: 1em;
			}
		}

		.p-navEl-linkHolder {padding: 0;}

		.blockLink {
			padding-left: 50px;
		}

		.uix_sidebarNav--trigger {
			font-size: @xf-uix_iconSize;
			color: inherit;
			padding-right: @xf-paddingLarge;

			.fa--xf {transition: ease-in transform .3s;}

			&.is-expanded .fa--xf {transform: rotate(-180deg);}
		}

		.p-navEl-splitTrigger, .p-navEl-link--menuTrigger:after {display: none;}
	}
}
}

/* ---VISITOR TABS --- */

.p-account {

	background-color: transparent;

	.p-navgroup-link {
		display: flex;
		align-items: center;
		border: none;
	}
}

.p-nav .p-navgroup-link:hover {.xf-publicNavTabHover();}

{{ include('uix_searchComponent.less') }}

/* ---UTILITIES --- */

.media__container {
	display: flex;
	.media--left {margin-right: @xf-paddingMedium;}
}

{{ include('uix_footer.less') }}

/* ---Login form sliding panel --- */

<xf:if is="property('uix_loginStyle') == 'slidingPanel'">

.uix__loginForm--panel {
	background: @xf-contentHighlightBg;
	overflow: hidden;
	position: absolute;
	z-index: 200;
	transition: ease-in .2s transform;
	left: 0;
	right: 0;
	transform: translateY(-100%);
	top: 0;
}

.uix__loginForm--mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background-color: transparent;
	transition: ease-in .2s background-color;

}

.uix__loginForm.is-active .uix__loginForm--panel {transform: translateY(0);}

.uix__loginForm.is-active .uix__loginForm--mask {
	background-color: rgba(0,0,0,.4);
	bottom: 0;
}

.uix__loginForm--panel form {
	.m-pageWidth();
}

.uix__loginForm--panel .block-container,
.uix__loginForm--panel .formRow > dt,
.uix__loginForm--panel .formRow > dd,
.uix__loginForm--panel .formSubmitRow-bar {
	background: none;
	box-shadow: none;
	border: none;
}

.uix__loginForm--panel .block-outer {display: none;}

</xf:if>

.uix_discussionList {
	.xf-uix_discussionList();
}

[type=checkbox], [type=radio], legend {margin-right: .5em;}

.structItem-extraInfo [type=checkbox] {margin-right: 0;}

form.structItem {
	display: flex;
	max-width: 100%;
}

.structItem-cell--newThread {flex-grow: 1; min-width: 0;}

.uix_messageContent {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
}

.pageContent .uix_socialMedia {
	display: inline-flex;
	flex-wrap: wrap;
	margin: 0 -6px;
	padding: 0;

	.p-staffBar & {
		margin-right: @xf-paddingMedium;

		@media (max-width: @xf-uix_staffBarBreakpoint) {
			display: none;		
		}
	}

	li {display: inline-block;}

	li a {
		margin: 6px;
		line-height: 1;
		display: inline-block;
		.xf-uix_socialMediaIcon();
	}
}

.uix_headerContainer {
	.xf-uix_headerWrapper();
	display: flex;
	flex-direction: column;

	<xf:if is="property('uix_pageStyle') != 'wrapped'">
	@media (min-width: (@xf-responsiveEdgeSpacerRemoval + 1px) ) {
		margin-top: @xf-uix_headerWhiteSpace;
	}
	</xf:if>

	@media (min-width: @xf-responsiveMedium) {
		> *:not(.p-nav) {
			margin-bottom: @xf-uix_headerWhiteSpace;
			&:last-child {margin-bottom: 0;}
		}
	}
}

<xf:if is="{{property('uix_removeHeaderWrapper')}}">
@media (min-width: (@xf-responsiveEdgeSpacerRemoval + 1px) ) {
	.p-staffBar,
	.p-header {
		margin-bottom: @xf-uix_headerWhiteSpace;
	}
}
</xf:if>

.p-pageWrapper {
	<xf:if is="property('uix_pageStyle') != 'wrapped'">
	@media (min-width: (@xf-responsiveEdgeSpacerRemoval + 1px) ) {
		margin-top: @xf-uix_headerWhiteSpace;
	}
	</xf:if>
}

<xf:if is="property('uix_detachedNavigation')">
.p-body > * {padding-top: @xf-elementSpacer;}
</xf:if>

.uix_pageWrapper--fixed {
	<xf:if is="property('uix_pageStyle') != 'wrapped'">
	width: 100%;
	</xf:if>
	<xf:if is="property('uix_pageStyle') == 'wrapped'">
	.m-pageWidth();
	.uix_page--fluid & {
		@media (min-width: @xf-pageWidthMax) {
			max-width: 95%;
		}
	}
	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		padding: 0 !important;

	}
	</xf:if>
	position: relative;
	left: 0;
	transition: max-width .2s, ease-in left .2s;
}


/* --- post thread widget --- */

.uix_postThreadWidget {
	border-top: 4px solid @xf-uix_primaryColor;
	text-align: center;
	padding: @xf-paddingLarge;
	color: @xf-textColorDimmed;

	i {
		height: 50px;
		width: 50px;
		line-height: 50px;
		border-radius: 100%;
		background-color: fade(@xf-uix_primaryColor, 20%);
		color: @xf-uix_primaryColor;
		display: inline-block;
		font-size: @xf-uix_iconSizeLarge;
	}

	.uix_postThreadWidget__title {
		font-size: @xf-fontSizeLarger;
		font-weight: @xf-fontWeightHeavy;
		color: @xf-textColor;
	}

	.button {margin-top: @xf-paddingMedium;}
}

<xf:if is="property('uix_borderRadiusJs')">

/* --- border radius javascript --- */

@media (min-width: @xf-responsiveEdgeSpacerRemoval) {
	.uix_smartBorder--noTop {
		border-bottom-left-radius: @xf-borderRadiusLarge !important;
		border-bottom-right-radius: @xf-borderRadiusLarge !important;
	}
	.uix_smartBorder--noBottom {
		border-top-left-radius: @xf-borderRadiusLarge !important;
		border-top-right-radius: @xf-borderRadiusLarge !important;
	}

	.uix_smartBorder--default {
		border-top-left-radius: @xf-borderRadiusLarge !important;
		border-top-right-radius: @xf-borderRadiusLarge !important;
		border-bottom-left-radius: @xf-borderRadiusLarge !important;
		border-bottom-right-radius: @xf-borderRadiusLarge !important;
	}
}
</xf:if>

// overlay content

.block-footer.uix_conversationsFooterMobile {
	display: none;

	.overlay & {
		display: flex;
	}
}

.overlay .block-footer {
	position: sticky;
	bottom: 0;
}

/* -- tab bar -- */

.uix_hasBottomTabs {
	.uix_tabBar {
		height: 46px;
		position: relative;
		z-index: 300;

		@media (min-width: @xf-responsiveNarrow) {
			display: none;
		}
	}

	.uix_tabList {
		z-index: 100;
		margin: 0;
		padding: 0;
		display: flex;
		background: @xf-uix_primaryColor;
		position: fixed;
		text-transform: capitalize;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 -2px 2px 0 rgba(0,0,0,0.12), 0 -1px 3px 0 rgba(0,0,0,.2);

		.uix_tabItem {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 5px;
			height: 46px;
			color: rgba(255,255,255,.5);
			line-height: 1;
			font-size: 10px;
			position: relative;
			text-align: center;
			
			&.uix_tabItem--active {color: #fff;}

			&:hover {
				text-decoration: none; 
				color: #fff;
			}
		}

		.badgeContainer {position: relative;}

		.badgeContainer:after {
			position: absolute;
			top: 0;
			right: -10px;
		}

		.uix_tabItem i {
			font-size: 24px;
		}
	}	
}

// remove border on macro components for mobile

@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
	.uix_headerContainer > *,
	.p-pageWrapper > *,
	.p-nav,
	.p-footer > * {border-radius: 0 !important;}
}

// nav edits for mobile

// staff bar

<xf:if is="property('uix_staffBarBreakpoint') != '100%'">
.uix_responsiveStaffBar {
	@media (max-width: @xf-uix_staffBarBreakpoint) {
		.p-staffBar {display: none;}
	}
}

@media (max-width: @xf-uix_staffBarBreakpoint) {
	.p-staffBar .p-nav-opposite {display: none;}
}

@media (min-width: (@xf-uix_staffBarBreakpoint + 1px) ) {
	<xf:if is="property('uix_searchPosition') == 'staffBar'">
	.p-nav .uix_searchBar {display: none;}
	</xf:if>
	<xf:if is="property('uix_userTabsPosition') == 'staffBar'">
	.p-nav .p-navgroup--member, .p-nav .p-navgroup-link--whatsnew {display: none;}
	</xf:if>
	<xf:if is="property('uix_loginTriggerPosition') == 'staffBar'">
	.p-nav .p-navgroup--guest {display: none;}
	</xf:if>
}

<xf:else />
.p-staffBar .p-navgroup--member, .p-nav .p-navgroup-link--whatsnew {display: none;}
.p-staffBar .p-navgroup--guest {display: none;}
.p-staffBar .uix_searchBar {display: none;}
</xf:if>

/* --- show logoblock for desktop  --- */

<xf:if is="property('uix_viewportShowLogoBlock') != '100%'">

@media (max-width: (@xf-uix_viewportShowLogoBlock - 1px) ) {
	.p-header {display: none;}
}

@media (max-width: (@xf-uix_viewportShowLogoBlock - 1px) ) {
	.p-header .p-nav-opposite {display: none;}
}

@media (min-width: @xf-uix_viewportShowLogoBlock) {
	.p-nav-inner .p-header-logo {display: none;}

	<xf:if is="property('uix_userTabsPosition') == 'header'">
	.p-nav .p-navgroup--member, .p-nav .p-navgroup-link--whatsnew {display: none;}
	</xf:if>	

	<xf:if is="property('uix_searchPosition') == 'header'">
	.p-nav > *:not(.p-header) .uix_searchBar {display: none;}
	</xf:if>
}

<xf:else />
.p-header {display: none;}
</xf:if>

/* sub-navigation */

<xf:if is="property('uix_viewportWidthRemoveSubNav') != '100%'">
@media (max-width: @xf-uix_viewportWidthRemoveSubNav ) {
	<xf:if is="!property('publicNavSelected--background-color')">
	.p-sectionLinks {display: none;}
	<xf:else />
	.p-sectionLinks > * {display: none;}
	@media(max-width: @xf-publicNavCollapseWidth) {
		.p-sectionLinks {display: none;}
	}
	</xf:if>
}

@media (min-width: (@xf-uix_viewportWidthRemoveSubNav + 1px) ) {
	<xf:if is="property('uix_searchPosition') == 'tablinks'">
	.p-nav .uix_searchBar {display: none;}
	</xf:if>
	<xf:if is="property('uix_userTabsPosition') == 'tablinks'">
	.p-nav .p-navgroup--member, .p-nav .p-navgroup-link--whatsnew {display: none;}
	</xf:if>
	<xf:if is="property('uix_loginTriggerPosition') == 'tablinks'">
	.p-nav .p-navgroup--guest {display: none;}
	</xf:if>
	<xf:if is="property('uix_sidebarTriggerPosition') == 'sectionLinks'">
	.breadcrumb  a.uix_sidebarTrigger__component {display: none;}
	</xf:if>
}

<xf:else />
<xf:if is="!property('publicNavSelected--background-color')">
.p-sectionLinks {display: none;}
<xf:else />
.p-sectionLinks > * {display: none;}
@media(max-width: @xf-publicNavCollapseWidth) {
	.p-sectionLinks {display: none;}
}
</xf:if>
</xf:if>

// search navigation

<xf:if is="property('uix_searchPosition') == 'navigationLeft'">
.p-nav .p-nav-opposite .uix_searchBar {display: none;}
</xf:if>


.menu--account .avatar-update a {
	max-width: 21px;
	overflow: hidden;
	font-size: 12px;
}

// label.iconic.iconic--labelled > input + i {margin-top: -2px; width: auto;}

.comment-reply-link:before {
	.m-faBase();
	.m-faContent(@fa-var-comment-alt);
	margin-right: 4px;
}

.sidePanel__tabs .badgeContainer:after {
	position: relative;
	top: -15px;
	left: -5px;
}

// notices

//scrolling notices

.lSSlideOuter.noticeScrollContainer {
	position: relative;

	.lSPager {
		margin-top: 0px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 20px;
		background: none;	
	}	

	.notice-content {margin-bottom: 20px;}
}

// bottom notice

.notices--bottom_fixer .notice--cookie {
	.notice-content {
		display: flex; 

		@media (max-width: @xf-responsiveMedium) {
			text-align: center;
			align-items: center;
			flex-direction: column;
		}
	}

	.u-inputSpacer {margin-top: 0;}

	.uix_cookieButtonRow {
		margin: 0 -3px -3px @xf-paddingMedium;

		@media (max-width: @xf-responsiveMedium) {
			margin-top: @xf-paddingMedium;
			margin-left: -3px;
		}

		.button {margin: 3px;}
	}

	.notice-content > div:first-child {
		flex-grow: 1;
		justify-content: center;
		display: flex;
		flex-direction: column;
	}	
}

.uix_mobileNodeTitle {
	&:before {
		content: "\00a0\00B7\00a0";
	}

	@media (min-width: @xf-uix_discussionListCollapseWidth) {
		display: none;
	}
}

// MENU

<xf:if is="{{property('uix_condenseVisitorTabs')}}">
	@media (min-width: @xf-responsiveNarrow) and (min-width: @xf-uix_viewportCondenseVisitorTabs) {
		.p-navgroup-link--user.p-navgroup-link.badgeContainer:after {display: none;}
	}
<xf:else />
	@media (min-width: @xf-responsiveNarrow) {
		.p-navgroup-link--user.p-navgroup-link.badgeContainer:after {display: none;}
	}
</xf:if>

.menu-tabHeader {
	color: @xf-textColorMuted;
	i {font-size: @xf-uix_iconSizeLarge;}
	.tabs-tab {
		min-width: 60px;
		text-align: center;
		position: relative;
	}
	
	.badgeContainer:after {
		position: absolute;
		top: 10px;
		right: 10px;
	}
}

.menu {
	transition: @uix_move .26s transform, @uix_move .26s opacity;
	transform: translateY(-10px);
	opacity: 0;

	&.is-active {
		transform: translateY(0);
		opacity: 1;
	}
}

.input input {box-shadow: none !important;}

<xf:if is="property('uix_clickableThreads')">
.structItem--thread:hover {cursor: pointer;}
</xf:if>

.uix_sidebarNav .uix_sidebarNav__inner__widgets,
.offCanvasMenu-content .uix_sidebarNav__inner__widgets {

	.block-container,
	.block-minorHeader,
	.block-footer,
	.block-body
	.block-row {
		border: none;
		box-shadow: none;
		background: none;
		padding: 0;

		&:not(:last-child) {
			padding-bottom: @xf-paddingLarge;			
		}
	}

	.block:not(:last-child) .block-container {
		border-bottom: 1px solid @xf-borderColor;
		padding-bottom: @xf-paddingLarge;
	}

	.block-minorHeader {
		font-size: @xf-fontSizeSmaller;
		color: @xf-textColorMuted;

		&:before {display: none !important;}
	}

	[data-widget-definition="th_bookmarks"] {
		.bookmarkRow {
			line-height: 40px;
			display: flex;
			align-items: center;
			color: @xf-textColorDimmed;

			.contentRow-minor, .bookmarkRow-forum {display: none;}

			.bookmarkRow-content {
				overflow: hidden;	
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}		

		.block-row {padding: 0 !important;}

		.contentRow-main.contentRow-main--close {padding: 0;}

		i:before, a {color: inherit;}

		.block-footer, .contentRow-main:before {display: none;}

		.contentRow-figure {
			height: 24px;
			padding-right: 1em;
			font-size: 24px;

			.avatar, i {
				font-size: 24px;
				width: 24px;
				height: 24px;
				vertical-align: inherit;
			}

			.node-icon {
				width: auto;
			}
		}
	}
}

<xf:if is="!property('uix_sidebarTriggerPhrase')">
.uix_sidebarTrigger--phrase {display: none;}
</xf:if>

.uix_headerInner--opposite a.uix_sidebarTrigger__component {
	padding: 0 4px;
	i {margin: 0;}
}

.uix_originalPoster__icon {
	height: 19px;
	width: 19px;
	background: xf-intensify(@xf-contentHighlightBg, 3%);
	color: @xf-textColor;
	display: inline-block;
	border-radius: 100%;
	// .m-uix_whiteText(@xf-uix_primaryColor);
	text-align: center;
}

// messages

.uix_solutionAttribution {
	color: @xf-votePositiveColor;
}

.actionBar-action.actionBar-action--vote {
	<xf:if is="{{property('uix_voteActionButton')}} == 'mobile'">
	@media (min-width: @xf-responsiveMedium) {
		display: none;
	}
	</xf:if>
	.contentVote {
		flex-direction: row;
		font-size: inherit;
		min-width: 0px;

		.contentVote-vote {
			width: 24px;
			height: 24px;
			line-height: 24px;
			text-align: center;
			padding: 0;
			background: @xf-contentHighlightBg;
			border-radius: 100%;
			transform: initial;

			&:before {background: none;}

			&.is-voted {
				background: @xf-votePositiveColor;
				color: #fff;

				&.contentVote-vote--down {
					background: @xf-voteNegativeColor;
					color: #fff;
				}
			}
		}

		.contentVote-score {
			padding: 0 10px;
		}
	}
}

<xf:if is="{{property('uix_voteActionButton')}} != 'never'">
.message-cell.message-cell--vote {
	<xf:if is="{{property('uix_voteActionButton')}} == 'mobile'">
	@media (max-width: @xf-responsiveMedium) {
		</xf:if>
		display: none;

		.contentVote  {
			display: none;
		}

		.u-srOnly {
			display: inline;
			position: static;
			overflow: visible;
			height: auto;
			clip: initial;
			width: auto;
			margin: auto;
			padding-left: 5px;
		}

		.solutionIcon {
			font-size: @xf-fontSizeNormal;
		}
		<xf:if is="{{property('uix_voteActionButton')}} == 'mobile'">
	}
	</xf:if>
}
</xf:if>
  ]]> 
  </template>
- <template title="uix_megaMenu.less" type="public" addon_id="" version_id="0" version_string="">
- <![CDATA[ .uix_showMegaMenu + .p-sectionLinks {display: none;}

.uix_megaMenu {
	display: none;
	overflow: hidden;
	position: relative;
	background: @xf-contentBg;
	
	.pageContent {
		.m-pageWidth();
	}

	.uix_showMegaMenu & {
		display: block;
	}

	.uix_megaMenu__content {
		display: none;

		&--active {display: block;}
	}

	.uix_megaMenu__title {margin: 0; color: @xf-textColor;}

	.uix_megaMenu__row {
		display: flex;
		flex-wrap: wrap;
		padding: 15px 0;
		margin: 0 -15px;

		.uix_megaMenu__col {
			flex-basis: 250px;
			padding: 15px;
			
			&:not(:first-child) {
				flex-grow: 1;
			}

			.blockLink {
				padding: 5px 0;
				color: @xf-textColorDimmed;
				background: none;
				line-height: 1;

				&:hover {background: none; color: @xf-textColor;}
			}

			.uix_footerLink .blockLink {
				padding: 1px 0;
				margin-bottom: 8px;
			}

			&.uix_megaMenu__col--alt {
				position: relative;
				padding: 15px 45px;
				margin-left: 30px;
				flex-grow: 0;

				&:before {
					content: '';
					display: block;
					background: @xf-contentAltBg;
					position: absolute;
					top: -15px;
					bottom: -15px;
					left: 0;
					right: -400px;
				}
			}
		}
	}

	.uix_megaMenu__iconLink {
		display: flex;
		align-items: center;

		i {
			font-size: 16px;
			color: @xf-uix_primaryColor;
			padding-right: 4px;
		}
	}

	.block-minorHeader {
		padding: 0 0 10px;
		border-bottom: 1px solid rgba(0,0,0,.12);
		margin-bottom: 5px;		
	}

	.uix_megaMenu__listLabel {
		text-transform: uppercase;
		color: @xf-textColorMuted;
		font-size: @xf-fontSizeSmall;
		margin-top: 20px;
	}
}
  ]]> 
  </template>
- <template title="uix_pro.less" type="public" addon_id="" version_id="0" version_string="">
- <![CDATA[ // HEADER

.p-account {font-size: @xf-fontSizeSmall;}

.m-io_navLine() {
	position: absolute;
	bottom: 10px;
	left: @xf-publicNavPaddingH - 4px;
	right: @xf-publicNavPaddingH - 4px;
	height: 4px;
	border-radius: @xf-borderRadiusLarge;
	background: @xf-borderColor;
	display: block;
	transition: ease-in .2s right;
}

.p-nav-list .p-navEl {
	position: relative;
	&:after {right: 100%;}

	&:hover:after {
		.m-io_navLine();
	}

	&.is-selected:after {
		.m-io_navLine();
		background: @xf-uix_primaryColor;
	}
}

// NODES

.category--collapsed .block-header {
	border-bottom-left-radius: @xf-borderRadiusLarge;
	border-bottom-right-radius: @xf-borderRadiusLarge;
}

.block.block--category {
	.block-header {
		position: relative;
		transition: ease-in .15s border-bottom-left-radius, ease-in .15s border-bottom-right-radius;
	}

	> .block-container:before {
		content: '';
		height: 4px;
		border-radius: @xf-borderRadiusLarge;
		display: block;
		background: @xf-uix_primaryColor;
	}
}

.block-body .node + .node {border: none;}

.node--unread .node-icon i {
	background: @xf-uix_primaryColor;
}

.has-flexbox .node .node-body .node-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
.block-body .node {
	&:first-child .node-body {
		border-top-left-radius: @xf-borderRadiusMedium;
		border-top-right-radius: @xf-borderRadiusMedium;
	}

	&:last-child .node-body {
		border-bottom-left-radius: @xf-borderRadiusMedium;
		border-bottom-right-radius: @xf-borderRadiusMedium;
	}
}
*/

a.subNodeLink.subNodeLink--unread:before {
	color: @xf-uix_primaryColor;
}

// WELCOME SECTION

.uix_welcomeSection .button.button--cta {
	background: #fff;
	color: @xf-uix_primaryColor;

	&:hover, &:active, &:focus {
		color: #fff;
		background: @xf-uix_primaryColor;
	}
}

// SIDEBAR

@supports not (display: contents) {
	.uix_sidebarInner:not(.offCanvasMenu-content) .block {
		.block-minorHeader, .block-header {
			position: absolute;
			transform: translateY(-100%);
			width: 100%;
			height: 30px;
			padding-top: 0;

			+ .block-body {
				margin-top: 60px;
			}
		}
		&:first-child {
			<xf:if is="property('uix_stickySidebar') == 'sticky'">
			.block-minorHeader + .block-body {margin-top: 155px;}
			<xf:else />
			.block-minorHeader + .block-body {margin-top: 30px;}
			</xf:if>
		}
	}
}

@supports (display: contents) {
	.uix_sidebarInner:not(.offCanvasMenu-content) .block {
		.block-container {
			display: contents;
		}
		.block-minorHeader {

		}

		.block-body {
			.xf-contentBase();
			.xf-blockBorder()
			border-radius: @xf-blockBorderRadius;
			.xf-uix_blockContainer();
			.xf-uix_sidebarWidgetWrapper();

			&:not(:last-child) {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}
		}
	}	
}

// FOOTER

.uix_extendedFooter {
	position: relative;

	&:before {
		position: absolute;
		top: 0;
		width: 100%;
		content: '';
		display: block;
		height: 4px;
		background: @xf-uix_primaryColor;
	}
}

// DISCUSSION LIST

body .structItem {
	border: none;
	margin-bottom: 4px;
	margin-top: 4px;
}

.block-container .structItemContainer {
	padding: @xf-paddingLarge;
	display: block;

	.structItemContainer-group {display: block;}
}

.block-body .block-minorHeader.uix_threadListSeparator {
	position: relative;
	padding-bottom: @xf-uix_structPaddingV + 4px;

	&:before {
		content: " ";
		display: table;
		background: @xf-uix_primaryColor;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 4px;
		display: block;
		border-radius: 8px;
	}
}

// Post Comments

.p-body-inner .block--messages .message .thpostcomments_commentsContainer {
	border-top: none;
	border-radius: @xf-borderRadiusLarge;
	background: @xf-contentAltBg;
	padding: 1px 0 @xf-messagePadding;
	margin: @xf-messagePadding;
	margin-top: 0px;

	.message {background: none;}
}

.p-body-inner .thpostcomments_commentsContainer .message:after {display: none;}

// MESSAGES

.block-container .message + .message, .message.message--bordered {border-top: none;}

// .message:last-child {padding-bottom: 1px; magin-bottom: -1px;}

.block.block--messages .block-container, .block.js-quickReply .block-container {
	box-shadow: @xf-uix_elevation1;
}

.actionBar-action .iconic--checkbox i:before {color: @xf-textColorMuted;}

.message:not(:last-of-type) {
	position: relative;
	padding-bottom: 4px;

	&:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: @xf-messagePadding;
		right: @xf-messagePadding;
		height: 4px;
		border-radius: @xf-borderRadiusLarge;
		background: @xf-borderColor;
		display: block;
	}
}

.message-responses .message-responseRow {
	border: none;
	&:first-child {
		border-top-left-radius: @xf-borderRadiusLarge;
		border-top-right-radius: @xf-borderRadiusLarge;
	}
	&:last-child {
		border-bottom-left-radius: @xf-borderRadiusLarge;
		border-bottom-right-radius: @xf-borderRadiusLarge;
	}

	&.toggleTarget {
		border-radius: @xf-borderRadiusLarge;
	}
}

// FOOTER

.uix_extendedFooterRow .blockLink {
	padding-left: 0;
	padding-right: 0;
}

.pageNav-page {
	&:first-child {
		border-top-left-radius: @xf-borderRadiusSmall;
		border-bottom-left-radius: @xf-borderRadiusSmall;
	}

	&:last-child {
		border-top-right-radius: @xf-borderRadiusSmall;
		border-bottom-right-radius: @xf-borderRadiusSmall;
	}
}

.pageNav-jump {border-radius: @xf-borderRadiusSmall;}

.pageNav-page.pageNav-page--current {
	box-shadow: none; 
	background: @xf-uix_primaryColor; 
	color: #fff;
	border-color: @xf-uix_primaryColor;
}

.node .pairs > dd {
	font-size: @xf-fontSizeNormal;
}

.uix_tabList {
	background: @xf-uix_primaryColor;

	.uix_tabItem {color: rgba(255,255,255,.7);}
}

.p-header-logo--image img {transition: ease-in .1s max-height;}

.uix_searchBar .input {box-shadow: none;}

.filterBar-filterToggle,
.label,
.userBanner,
body .thTopic {border-radius: 2px; }
  ]]> 
  </template>
  </templates>
- <properties>
- <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", "background-color": "@xf-contentBg", "border-bottom-width": "1px", "border-bottom-color": "@xf-borderColor" }</value> 
  </property>
- <property property_name="blockMinorHeader" group_name="block" title="Block minor header" description="" 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-fontSizeNormal", "color": "@xf-minorHeadingTextColor", "font-weight": "@xf-fontWeightHeavy" }</value> 
  </property>
- <property property_name="borderColor" group_name="color" title="Border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderBasic" display_order="4000" addon_id="XF">
  <value>"xf-intensify(@xf-contentHighlightBg, 6%)"</value> 
  </property>
- <property property_name="borderRadiusLarge" group_name="borderSpacing" title="Large border radius" description="" property_type="value" value_type="unit" depends_on="" value_group="borderRadius" display_order="1200" addon_id="XF">
  <value>"8px"</value> 
  </property>
- <property property_name="borderRadiusMedium" group_name="borderSpacing" title="Medium border radius" description="" property_type="value" value_type="unit" depends_on="" value_group="borderRadius" display_order="1100" addon_id="XF">
  <value>"8px"</value> 
  </property>
- <property property_name="borderRadiusSmall" group_name="borderSpacing" title="Small border radius" description="" property_type="value" value_type="unit" depends_on="" value_group="borderRadius" display_order="1000" addon_id="XF">
  <value>"4px"</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": "15px", "font-weight": "@xf-fontWeightNormal", "border-radius": "@xf-borderRadiusMedium", "padding-top": "0", "padding-right": "15px", "padding-bottom": "0", "padding-left": "15px", "extra": "text-align: center;\noutline: none;\nline-height: 35px;\nheight: 35px;\ntext-decoration: none;\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\ncursor: pointer;\nbox-sizing: content-box;\n-webkit-appearance: none;\nwill-change: box-shadow;\ntransition: all 0.3s cubic-bezier(.25,.8,.25,1);\nborder: none;\nwhite-space: nowrap;\nborder-radius: @xf-borderRadiusSmall;" }</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": "#fff", "background-color": "@xf-buttonCtaBg", "extra": "box-shadow: @xf-uix_elevation1;\nborder: none;\nbackground: linear-gradient(@xf-uix_secondaryColor, darken(@xf-uix_secondaryColor, 10%) );" }</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": "#fff", "background-color": "@xf-buttonPrimaryBg", "extra": "box-shadow: @xf-uix_elevation1;\nborder: none;\nbackground: linear-gradient(@xf-uix_primaryColor, darken(@xf-uix_primaryColor, 10%) );" }</value> 
  </property>
- <property property_name="fontSizeLarge" group_name="fonts" title="Large font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1400" addon_id="XF">
  <value>"1.4rem"</value> 
  </property>
- <property property_name="fontSizeLarger" group_name="fonts" title="Larger font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1500" addon_id="XF">
  <value>"1.5rem"</value> 
  </property>
- <property property_name="fontSizeLargest" group_name="fonts" title="Largest font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1600" addon_id="XF">
  <value>"2.4rem"</value> 
  </property>
- <property property_name="fontSizeNormal" group_name="fonts" title="Normal font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1000" addon_id="XF">
  <value>"1.3rem"</value> 
  </property>
- <property property_name="fontSizeSmall" group_name="fonts" title="Small font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1100" addon_id="XF">
  <value>"1.2rem"</value> 
  </property>
- <property property_name="fontSizeSmaller" group_name="fonts" title="Smaller font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1200" addon_id="XF">
  <value>"1.2rem"</value> 
  </property>
- <property property_name="fontSizeSmallest" group_name="fonts" title="Smallest font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1300" addon_id="XF">
  <value>"1.1rem"</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-textColor", "background-color": "@xf-inputBgColor", "border-width": "@xf-borderSize", "border-radius": "@xf-borderRadiusMedium", "border-top-color": "@xf-borderColorHeavy", "border-right-color": "@xf-borderColorLight", "border-bottom-color": "@xf-borderColorLight", "border-left-color": "@xf-borderColorHeavy", "padding": "6px", "extra": "box-shadow: inset 0 1px 4px rgba(0,0,0,.1);" }</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": "@xf-contentAltBg", "border-bottom-width": "0", "border-bottom-color": "@xf-borderColorLight" }</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,border_radius_simple,extra" addon_id="XF">
  <value>{ "font-size": "@xf-fontSizeSmall", "color": "@xf-textColor", "background-color": "@xf-contentBg", "border-width": "0", "border-color": "@xf-borderColor", "border-radius": "@xf-borderRadiusSmall", "extra": "box-shadow: 0px 10px 20px rgba(0,0,0,0.15), rgba(0,0,0,0.1) 0px 0px 0px 1px;" }</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-paddingLarge"</value> 
  </property>
- <property property_name="messagePaddingSmall" group_name="message" title="Message padding small" description="This value controls the padding around the message text when using the small message block" property_type="value" value_type="unit" depends_on="" value_group="padding" display_order="400" addon_id="XF">
  <value>"@xf-paddingLarge"</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>{ "border-width": "0" }</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-textColorDimmed"</value> 
  </property>
- <property property_name="nodeIconReadColor" group_name="nodeList" title="Read node icon color" description="" 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="" property_type="value" value_type="color" depends_on="" value_group="" display_order="100" addon_id="XF">
  <value>"#fff"</value> 
  </property>
- <property property_name="nodeListSubDisplay" group_name="nodeList" title="Sub-forums display style" description="Choose the style in which sub-forums will be displayed within a particular node element, according to the amount of space you want them to occupy" property_type="value" value_type="radio" depends_on="" value_group="" display_order="300" addon_id="XF">
  <value_parameters>menu={{ phrase('popup_menu') }} flat={{ phrase('listed_below_node') }} none={{ phrase('none') }}</value_parameters> 
  <value>"menu"</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>"#2175f3"</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>"#1767de"</value> 
  </property>
- <property property_name="paletteAccent3" group_name="palette" title="Accent 3" description="" property_type="value" value_type="color" depends_on="" value_group="accent" display_order="2200" addon_id="XF">
  <value_parameters>hidePalette=true</value_parameters> 
  <value>"#92d049"</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>"#f1f3fb"</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>"#ecf2fb"</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(248, 250, 255)"</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>"@xf-paletteColor2"</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(160, 175, 206)"</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(112, 130, 167)"</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(56, 71, 100)"</value> 
  </property>
- <property property_name="publicFooter" group_name="footer" title="Footer" description="" 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-textColorDimmed", "background-color": "@xf-contentHighlightBg" }</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-textColor" }</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 <b>Emails &gt; Email logo URL</b> 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>"@xf-uix_imagePath/images/uixpro-logo.png"</value> 
  </property>
- <property property_name="publicLogoUrl2x" group_name="basic" title="2x logo URL" description="The path to a double-resolution / retina version of your logo image" property_type="value" value_type="string" depends_on="" value_group="logo" display_order="200" addon_id="XF">
  <value_parameters>asset=logo</value_parameters> 
  <value>"@xf-uix_imagePath/images/uixpro-logo.png"</value> 
  </property>
- <property property_name="publicStaffBar" group_name="headerNav" title="Staff tools bar" description="" 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": "rgba(255,255,255,.7)", "background-color": "darken(@xf-publicNav--background-color, 7%)" }</value> 
  </property>
- <property property_name="uix_additionalCss" group_name="uix_globalSettings" title="List of additional css templates to include" description="A comma separated list of additional CSS/less templates to load. Requires the .css or .less suffix" property_type="value" value_type="string" depends_on="" value_group="" display_order="400" addon_id="">
  <value>"uix_material.less,uix_pro.less"</value> 
  </property>
- <property property_name="uix_buttonCtaActive" group_name="button" title="Button - call to action (active)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20320" css_components="text,background,border,padding,extra" addon_id="">
  <value>{ "extra": "background: linear-gradient(darken(@xf-uix_secondaryColor, 15%), darken(@xf-uix_secondaryColor, 25%) );" }</value> 
  </property>
- <property property_name="uix_buttonCtaHover" group_name="button" title="Button - call to action (hover)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20310" css_components="text,background,extra" addon_id="">
  <value>{ "extra": "box-shadow: @xf-uix_elevation2;\nbackground: linear-gradient(darken(@xf-uix_secondaryColor, 5%), darken(@xf-uix_secondaryColor, 15%) );" }</value> 
  </property>
- <property property_name="uix_buttonHover" group_name="button" title="Button - default (hover)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20110" css_components="text,background,extra" addon_id="">
  <value>{ "background-color": "fade(@xf-buttonDefault--color, 15%)" }</value> 
  </property>
- <property property_name="uix_buttonPrimaryActive" group_name="button" title="Button - primary (active)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20220" css_components="text,background,border,padding,extra" addon_id="">
  <value>{ "extra": "background: linear-gradient(darken(@xf-uix_primaryColor, 15%), darken(@xf-uix_primaryColor, 25%) );" }</value> 
  </property>
- <property property_name="uix_buttonPrimaryHover" group_name="button" title="Button primary (hover)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20210" css_components="text,background,extra" addon_id="">
  <value>{ "color": "#fff", "extra": "box-shadow: @xf-uix_elevation2;\nbackground: linear-gradient(darken(@xf-uix_primaryColor, 5%), darken(@xf-uix_primaryColor, 15%) );" }</value> 
  </property>
- <property property_name="uix_canvasNavItemActive" group_name="uix_canvas" title="Canvas navigation item (active)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
  <value>{ "color": "#fff", "background-color": "@xf-uix_primaryColor" }</value> 
  </property>
- <property property_name="uix_categoryDescriptionDisplay" group_name="nodeList" title="Category description display" description="" property_type="value" value_type="radio" depends_on="" value_group="uix_nodeCategories" display_order="1100" addon_id="">
  <value_parameters>tooltip=Tooltip inline=Inline none=None</value_parameters> 
  <value>"tooltip"</value> 
  </property>
- <property property_name="uix_categoryStrip" group_name="nodeList" title="Category Strip" description="Styles the category strip for nodes" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,border_width_simple,border_color_simple,border_radius_simple,padding,extra" addon_id="">
  <value>{ "font-size": "@xf-fontSizeLarger", "font-weight": "@xf-fontWeightHeavy", "border-bottom-width": "0", "padding": "@xf-paddingLarge", "padding-top": "0", "extra": "line-height: 1;" }</value> 
  </property>
- <property property_name="uix_discussionListAnimation" group_name="misc" title="Discussion list animation" description="Adds animation to discussion list items on page load" property_type="value" value_type="boolean" depends_on="" value_group="uix_pageAnimation" display_order="3200" addon_id="">
  <value>1</value> 
  </property>
- <property property_name="uix_discussionListCollapseWidth" group_name="uix_discussionList" title="Width to collapse discussion list items" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
  <value>"@xf-responsiveMedium"</value> 
  </property>
- <property property_name="uix_discussionListItem" group_name="uix_discussionList" title="Discussion list item" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius" addon_id="">
  <value>{ "border-radius": "@xf-borderRadiusLarge" }</value> 
  </property>
- <property property_name="uix_discussionListItemEven" group_name="uix_discussionList" title="Discussion list item (even)" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
  <value>""</value> 
  </property>
- <property property_name="uix_discussionListItemHover" group_name="uix_discussionList" title="Discussion list item (hover)" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
  <value>"@xf-contentAltBg"</value> 
  </property>
- <property property_name="uix_discussionListItemSticky" group_name="uix_discussionList" title="Discussion list item (sticky)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border" addon_id="">
  <value>[]</value> 
  </property>
- <property property_name="uix_discussionListTitle" group_name="uix_discussionList" title="Title" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text" addon_id="">
  <value>{ "font-size": "@xf-fontSizeLarge", "color": "@xf-textColor", "font-weight": "@xf-fontWeightHeavy" }</value> 
  </property>
- <property property_name="uix_elevation1" group_name="uix_globalSettings" title="Elevation 1" description="Sets the box-shadow value for elevation level 1" property_type="value" value_type="string" depends_on="" value_group="elevation" display_order="2000" addon_id="">
  <value>"0 4px 15px 0 fade(shade(darken(@xf-pageBg, 20%), 40%), 20%)"</value> 
  </property>
- <property property_name="uix_elevation2" group_name="uix_globalSettings" title="Elevation 2" description="Sets the box shadow value for elevation level 2" property_type="value" value_type="string" depends_on="" value_group="elevation" display_order="2100" addon_id="">
  <value>"0 4px 15px 0 fade(shade(darken(@xf-pageBg, 20%), 40%), 20%)"</value> 
  </property>
- <property property_name="uix_extendedFooterStyle" group_name="footer" title="Extended Footer" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
  <value>{ "background-color": "@xf-contentBg", "border-top-width": "0", "border-top-color": "@xf-borderColor", "border-bottom-width": "0", "padding-top": "@xf-paddingLargest * 2", "padding-bottom": "@xf-paddingLargest * 2", "extra": "line-height: 1.7;" }</value> 
  </property>
- <property property_name="uix_extendedFooter__whiteText" group_name="footer" title="Extended Footer White Text" description="Checking this option will add CSS to make all text white for legibility. Only use this Style Property if you have a dark background that is causing legibility issues. (Most often useful for a dark footer on a light theme.)" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2400" addon_id="">
  <value>0</value> 
  </property>
- <property property_name="uix_fab" group_name="button" title="Page action as floating action button" description="Adds the page action as a floating action button" property_type="value" value_type="select" depends_on="" value_group="" display_order="1000" addon_id="">
  <value_parameters>never=Never mobile=Mobile always=Always</value_parameters> 
  <value>"never"</value> 
  </property>
- <property property_name="uix_footerChooser" group_name="footer" title="Footer chooser" description="Styles the footer chooser (ex. style chooser, width toggle, language chooser)" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,extra" addon_id="">
  <value>{ "color": "@xf-textColorMuted", "border-width": "2px", "border-color": "@xf-borderColor" }</value> 
  </property>
- <property property_name="uix_footerChooserHover" group_name="footer" title="Footer chooser hover" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,extra" addon_id="">
  <value>{ "color": "@xf-textColor", "background-color": "@xf-borderColor" }</value> 
  </property>
- <property property_name="uix_footerCopyrightRow" group_name="footer" title="Footer copyright row" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
  <value>{ "color": "@xf-textColorDimmed", "padding-top": "0", "padding-bottom": "@xf-paddingLarge" }</value> 
  </property>
- <property property_name="uix_footerLinkHover" group_name="footer" title="Footer links hover" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,extra" addon_id="">
  <value>{ "color": "@xf-uix_primaryColor", "extra": "text-decoration: none;" }</value> 
  </property>
- <property property_name="uix_footerMenu" group_name="footer" title="Footer menu" description="Styles the footer menu bar" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
  <value>{ "background-color": "@xf-contentHighlightBg" }</value> 
  </property>
- <property property_name="uix_footerWidgetHeader" group_name="footer" title="Footer widget header" description="Styles the minor heading block is footer widgets" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
  <value>{ "background-color": "none", "border-bottom-width": "0", "padding": "0", "padding-bottom": "@xf-paddingMedium" }</value> 
  </property>
- <property property_name="uix_iconSizeLarge" group_name="uix_icons" title="Icon large font size" description="" property_type="value" value_type="unit" depends_on="" value_group="uix_iconOptions" display_order="0" addon_id="">
  <value>"22px"</value> 
  </property>
- <property property_name="uix_imagePath" group_name="basic" title="Image path" description="Sets the path to images for the theme." property_type="value" value_type="string" depends_on="" value_group="" display_order="10" addon_id="">
  <value>"styles/uix_pro"</value> 
  </property>
- <property property_name="uix_message" group_name="message" title="Message" description="Styles the message container" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
  <value>{ "border-radius": "0", "extra": "border: none;" }</value> 
  </property>
- <property property_name="uix_messageActionBar" group_name="message" title="Message action bar" description="Styles the action bar for messages" property_type="css" value_type="" depends_on="" value_group="" display_order="20040" css_components="text,background,border,border_radius,padding,extra" addon_id="">
  <value>{ "padding": "@xf-messagePadding", "padding-top": "0", "extra": "margin: -@xf-messagePadding;\nmargin-top: 0;" }</value> 
  </property>
- <property property_name="uix_messageAnimation" group_name="misc" title="Message animation" description="Adds an animation to messages on page load" property_type="value" value_type="boolean" depends_on="" value_group="uix_pageAnimation" display_order="3300" addon_id="">
  <value>1</value> 
  </property>
- <property property_name="uix_messageControl" group_name="message" title="Message control" description="Styles the message actions such as reply and report" property_type="css" value_type="" depends_on="" value_group="" display_order="20050" css_components="text,background,border,padding,extra" addon_id="">
  <value>{ "color": "@xf-textColorMuted", "background-color": "fade(@xf-textColorMuted, 10%)", "padding-right": "5px", "padding-left": "5px", "extra": "border-radius: @xf-borderRadiusSmall;\ndisplay: inline-block;" }</value> 
  </property>
- <property property_name="uix_messageControlHover" group_name="message" title="Message control (hover)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20060" css_components="text,background,border,padding,extra" addon_id="">
  <value>{ "color": "@xf-textColorDimmed", "background-color": "fade(@xf-textColorDimmed, 10%)" }</value> 
  </property>
- <property property_name="uix_messageLikes" group_name="message" title="Message like bar" description="Styles the "Likes" bar for messages" property_type="css" value_type="" depends_on="" value_group="" display_order="20030" css_components="text,background,border,border_radius,padding,extra" addon_id="">
  <value>{ "background-color": "@xf-contentAltBg", "border-width": "0", "border-radius": "20px", "padding": "@xf-messagePadding", "padding-top": "10px", "padding-bottom": "10px", "extra": "margin: 0 0 @xf-messagePadding;" }</value> 
  </property>
- <property property_name="uix_metaCell" group_name="uix_discussionList" title="Meta cell (for discussion list)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border" addon_id="">
  <value>[]</value> 
  </property>
- <property property_name="uix_newNodeMarkerStyle" group_name="nodeList" title="New node indicator" description="Styles the new node indicator if enabled" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
  <value>{ "font-size": "12px", "color": "#fff", "background-color": "@xf-uix_primaryColor", "border-radius": "@xf-borderRadiusSmall", "padding-top": "1px", "padding-right": "4px", "padding-bottom": "1px", "padding-left": "4px" }</value> 
  </property>
- <property property_name="uix_nodeAnimations" group_name="misc" title="Node animations" description="" property_type="value" value_type="boolean" depends_on="" value_group="uix_pageAnimation" display_order="3600" addon_id="">
  <value>1</value> 
  </property>
- <property property_name="uix_nodeBlockBody" group_name="nodeList" title="Block Body (for nodes)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border,border_radius,padding,extra" addon_id="">
  <value>{ "border-radius": "@xf-borderRadiusSmall", "extra": "box-shadow: @xf-uix_elevation1;" }</value> 
  </property>
- <property property_name="uix_nodeBody" group_name="nodeList" title="Node body" description="Styles the individual node body" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
  <value>{ "background-color": "@xf-contentBg", "border-radius": "0", "extra": "overflow: hidden;\nalign-items: center;" }</value> 
  </property>
- <property property_name="uix_nodeBodyEven" group_name="nodeList" title="Node body (even)" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="2200" addon_id="">
  <value>""</value> 
  </property>
- <property property_name="uix_nodeBodyHover" group_name="nodeList" title="Node body (hover)" description="Adds a hover state to nodes" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border,extra" addon_id="">
  <value>{ "background-color": "@xf-contentAltBg", "extra": "position: relative;" }</value> 
  </property>
- <property property_name="uix_nodeContainer" group_name="nodeList" title="Node Container" description="Styles the block-container for level 1 nodes" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,border_width_simple,border_color_simple,border_radius_simple,padding,extra" addon_id="">
  <value>{ "border-width": "0", "extra": "box-shadow: none;" }</value> 
  </property>
- <property property_name="uix_nodeIconStyle" group_name="nodeList" title="Node icon style" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
  <value>{ "font-size": "24px", "background-color": "@xf-contentAltBg", "border-radius": "@xf-borderRadiusSmall", "padding": "4px", "extra": "height: 34px;\nwidth: 34px;\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;" }</value> 
  </property>
- <property property_name="uix_nodeIconWidth" group_name="uix_nodeIcons" title="Node icon width" description="Sets the width for the node icon container (not the actual icon itself)" property_type="value" value_type="unit" depends_on="" value_group="" display_order="100" addon_id="">
  <value>"49px"</value> 
  </property>
- <property property_name="uix_nodeTitle" group_name="nodeList" title="Node Title" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,padding,extra" addon_id="">
  <value>{ "font-size": "@xf-fontSizeLarge", "color": "@xf-textColor", "font-weight": "@xf-fontWeightHeavy", "extra": "margin: 0;" }</value> 
  </property>
- <property property_name="uix_pageAnimation" group_name="misc" 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="uix_pageAnimation" display_order="3000" addon_id="">
  <value>1</value> 
  </property>
- <property property_name="uix_searchBar" group_name="uix_search" title="Search Bar" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,border_width_simple,border_color_simple,border_radius_simple,padding,extra" addon_id="">
  <value>{ "color": "#fff", "background-color": "lighten(@xf-publicNav--background-color, 7%)", "border-radius": "@xf-borderRadiusMedium", "extra": "box-shadow: none;" }</value> 
  </property>
- <property property_name="uix_sideNavigationAnimation" group_name="misc" title="Side navigation animation" description="Adds an animation to side navigation items on page load" property_type="value" value_type="boolean" depends_on="" value_group="uix_pageAnimation" display_order="3500" addon_id="">
  <value>1</value> 
  </property>
- <property property_name="uix_sidebarWidgetAnimations" group_name="misc" title="Sidebar widget animation" description="Adds an animation to sidebar widgets on page load" property_type="value" value_type="boolean" depends_on="" value_group="uix_pageAnimation" display_order="3100" addon_id="">
  <value>1</value> 
  </property>
- <property property_name="uix_sidebarWidgetHeading" group_name="uix_sidebar" title="Sidebar widget heading" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,border_width_simple,border_color_simple,border_radius_simple,padding,extra" addon_id="">
  <value>[]</value> 
  </property>
- <property property_name="uix_threadListSeparator" group_name="uix_discussionList" title="Thread list separators" description="Styles the thread list separate when Separate Sticky Threads is enabled." property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
  <value>{ "font-size": "@xf-fontSizeSmall", "color": "@xf-textColorDimmed", "background-color": "transparent", "padding-top": "10px", "padding-bottom": "10px", "extra": "text-transform: uppercase;" }</value> 
  </property>
- <property property_name="uix_viewportCollapseStats" group_name="nodeList" title="Viewport width to collapse node stats" description="This sets the minimum viewport width to show the full node stat display. (Note: not applicable with Node Grid)" property_type="value" value_type="unit" depends_on="" value_group="uix_nodeStats" display_order="2500" addon_id="">
  <value>"1000px"</value> 
  </property>
- <property property_name="uix_welcomeSection__style" group_name="uix_welcomeSection" title="Welcome section container" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border,border_radius,padding,extra" addon_id="">
  <value>{ "background-color": "@xf-uix_primaryColor", "background-image": "url('@xf-uix_imagePath/images/welcome-banner.png')", "border-radius": "8px", "extra": "margin-bottom: @xf-elementSpacer;\nbackground-size: cover;\nbackground-position: center;" }</value> 
  </property>
  </properties>
  </style>