.layoutBoundary {
	margin: 0 auto;

	@include screen-md-down {
		padding: 0 10px;
		width: 100%;
	}

	@include screen-lg {
		padding: 0 20px;

		@if $useFluidLayout == 1 {
			min-width: $wcfLayoutMinWidth;
			max-width: $wcfLayoutMaxWidth;
		} @else {
			width: $wcfLayoutFixedWidth;
		}
	}
}

.invisible {
	display: none;
}

.grayscale {
	filter: gray;
	-webkit-filter: grayscale(1);
}

.monospace {
	font-family: $wcfFontFamilyMonospace !important;
	font-size: 14px;
}

/* boxes with an image */
.box16 {
	@include box(16px, 5px);
}
.box24 {
	@include box(24px, 8px);
}
.box32 {
	@include box(32px, 10px);
}
.box48 {
	@include box(48px, 12px);
}
.box64 {
	@include box(64px, 15px);
}
.box96 {
	@include box(96px, 15px);
}
.box128 {
	@include box(128px, 20px);
}
.box256 {
	@include box(256px, 30px);
}

small,
.small {
	@include wcfFontSmall;
}

strong {
	@include wcfFontBold;
}

img {
	vertical-align: middle;
}

.elementPointer {
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: translateY(-100%);

	&.center {
		left: 50%;
		transform: translateX(-50%) translateY(-100%);
	}

	&.left {
		left: 4px;
	}

	&.right {
		right: 4px;
	}

	&.flipVertical {
		bottom: 0;
		top: auto;
		transform: translateY(100%);

		&.center {
			transform: translateX(-50%) translateY(100%);
		}
	}
}

.nativeList {
	@include nativeList;
}

ul.nativeList {
	list-style-type: disc;
}
ol.nativeList {
	list-style-type: decimal;
}

/* simulate native HTML styles for certain elements */
.htmlContent {
	@include clearfix;

	img {
		height: auto;
		max-width: 100%;
	}

	> :first-child {
		margin-top: 0 !important;
	}

	> :last-child {
		margin-bottom: 0 !important;
	}

	p {
		//margin: 1em 0;
		margin: 0;
	}

	h1 {
		@include wcfFontTitle;
	}

	h2 {
		@include wcfFontSection;
	}

	h3 {
		@include wcfFontHeadline;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 1.5em 0 1em 0;
	}

	ul,
	ol {
		@include nativeList;
	}

	ul {
		list-style-type: disc;
	}

	ol {
		list-style-type: decimal;
	}
}

.containerContent,
.htmlContent {
	hr {
		border: 0;
		border-top: 1px solid $wcfContentBorderInner;
		height: 0;
	}
}

.separatorLeft::before {
	color: $wcfContentText;
	content: "\00b7";
	margin-right: 0.25em;
}

.separatorRight::after {
	color: $wcfContentText;
	content: "\00b7";
	margin-left: 0.25em;
}

.pointer {
	cursor: pointer;
}

a.externalURL::after {
	content: $fa-var-external-link;
	display: inline-block;
	font-family: FontAwesome !important;
	font-size: 14px !important;
	font-weight: normal !important;
	font-style: normal !important;
	margin-left: 4px;
	vertical-align: -1px;
}

.visuallyHidden {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px !important;
	overflow: hidden !important;
	position: absolute !important;
	width: 1px !important;
}

/* Hide the focus ring for mouse interactions, but support them for keyboard navigation.
   See https://github.com/WICG/focus-visible and https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
.js-focus-visible :focus:not(.focus-visible) {
	outline: none;
}