/*<meta />*/

body
{
	margin: 0;
	color: var(--Dark);
	font-family: var(--FontFamily);
}

/* Content */

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

/* Preserve aspect ratio for content images. Many topics carry inline
   width+height on <img> (from the source import); the inline height
   overrides the rule above, so when max-width:100% shrinks the width on
   a narrow column the pinned height distorts the image. Forcing height
   to auto here (with !important to beat the inline style) keeps every
   content image proportional at any width. */

.topic-main img
{
	height: auto !important;
}

/* Click-to-enlarge — applied by image-zoom.js only to .topic-main images
   whose natural width exceeds their rendered width. */

.topic-main img.zoomable
{
	cursor: zoom-in;
}

#img-zoom-overlay
{
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	cursor: zoom-out;
}

#img-zoom-overlay img
{
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

body.img-zoom-open
{
	overflow: hidden;
}

p
{
	font-size: 12.0pt;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 20pt;
	letter-spacing: 0.25px;
}

p.table-text
{
	font-size: 12pt;
}

.tile-text
{
	color: var(--Darkest);
}

dt
{
	font-weight: bold;
}

/* Generic classes */

.center
{
	position: relative;
	margin-right: auto;
	margin-left: auto;
	float: none !important;
	text-align: center;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6
{
	font-family: var(--HeadingFontFamily);
}

h1
{
	font-size: 24.0pt;
	margin-top: 0;
	color: var(--Primary);
}

h2
{
	font-size: 18.0pt;
}

h3
{
	font-size: 16.0pt;
}

h4
{
	font-size: 14.0pt;
}

h5
{
	font-size: 12.0pt;
}

h6
{
	font-size: 8.0pt;
}

/* Home page topic */

.nav-search	/*Does not display search in Top Navigation for desktop*/
{
	display: none;
}

div.home-layout1
{
	padding: 2% 20%;
}

div.home-section
{
	padding: 0 5%;
}

div.home-section:last-of-type
{
	border-bottom: none;
}

div.home-tiles	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.home-tiles::before
{
	content: ' ';
	display: table;
}

div.home-tiles::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.home-tiles > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.home-tiles > div:nth-child(1)
{
	width: 33.33333%;
	margin-left: 0%;
}

div.home-tiles > div:nth-child(2)
{
	width: 33.33333%;
	margin-left: 0%;
}

div.home-tiles > div:nth-child(3)
{
	width: 33.33333%;
	margin-left: 0%;
}

div.quick-links	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.quick-links::before
{
	content: ' ';
	display: table;
}

div.quick-links::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.quick-links > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.quick-links > div:nth-child(1)
{
	width: 16.66666%;
	margin-left: 2%;
}

div.quick-links > div:nth-child(2)
{
	width: 16.66666%;
	margin-left: 3%;
}

div.quick-links > div:nth-child(3)
{
	width: 16.66666%;
	margin-left: 3%;
}

div.quick-links > div:nth-child(4)
{
	width: 16.66666%;
	margin-left: 3%;
}

div.quick-links > div:nth-child(5)
{
	width: 16.66666%;
	margin-left: 3%;
}

div.quick-links *	/*Text-align center set to all elements within div.quick-links*/
{
	text-align: center;
}

html.home-topic	/*Used on Home.htm topic for styles set only on the home topic*/
{
	
}

html.home-topic .main-section > .outer-row	/*Overrides padding set in the skin*/
{
	max-width: 100%;
	padding: 0;
}

img.home-tile
{
	max-width: 50%;
}

/* Links */

a
{
	color: var(--LinkColor);
}

a:link
{
	color: var(--LinkColor);
}

a:visited
{
	color: var(--LinkColor);
}

.article-body a:visited
{
	color: var(--LinkColor);
}

a:hover
{
	color: var(--Accent, var(--LinkColor));
}

.main-section .row.outer-row > nav .nav-tree a:hover
{
	color: var(--Lightest) !important;
}

.MCMiniTOCBox > div > ul > li > a:hover
{
	color: var(--Primary);
}

.MCMiniTOCBox > div > ul > li > ul > li > a:hover
{
	text-decoration: underline;
}

a.home-tiles
{
	color: var(--Darkest);
	font-size: 13pt;
	font-weight: bold;
	text-decoration: none;
}

/* Lists */

dd,
dd p,
dt,
dt p,
li,
li p
{
	margin-bottom: 8px;
	margin-top: 8px;
}

dl,
ol,
ul
{
	letter-spacing: .25px;
	line-height: 20pt;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* Master pages */

p.footer
{
	margin-top: 5px;
	margin-bottom: 5px;
	line-height: 13pt;
	color: var(--Lightest);
}

p.footer-sub
{
	color: var(--Lightest);
	font-size: 14pt;
	margin-top: 14px;
}

/* ============================================================
   Site header
   ============================================================ */

.site-header
{
	border-bottom: var(--HeaderBorder);
}

.site-header-inner
{
	max-width: 1400px;
	margin: 0 auto;
	padding: 12px 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

a.site-logo
{
	display: block;
	width: 160px;
	height: 44px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	text-decoration: none;
	/* Header logo treatment — branding sheet controls.
	   PRODUCTION: replace the brightness/invert filter with a real
	   reversed-logo asset so "by profitsolv" green survives. */
	filter: var(--LogoFilter);
}

/* "Knowledge Base" lockup after the logo */

.site-divider
{
	display: inline-block;
	width: 1px;
	height: 28px;
	background: var(--HeaderDividerBg);
	margin: 0 18px;
}

.site-tagline
{
	color: var(--HeaderTaglineColor);
	font-size: 1.7em;
	font-weight: 400;
	letter-spacing: .2px;
}

/* ============================================================
   Search bar
   ============================================================ */

.site-search-bar
{
	border-bottom: var(--SearchBarBorderBottom, 1px solid var(--Light, #EEF8FD));
	padding: 14px 20px;
}

/* Sticky header + search bar on the home page only (all brands).
   Both live inside .site-header-fixed (see Home-Page.flmsp), and only the
   wrapper is sticky — header and search bar simply stack inside it via
   normal flow. No hardcoded height offset needed, so this holds regardless
   of how tall any brand's header ends up being. */

html.home-topic .site-header-fixed
{
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-search-bar-inner
{
	max-width: 500px;
	margin: 0 auto;
}

.site-search-bar input[type="text"],
.site-search-bar input[type="search"],
.site-search-bar .MCSearchBox_TextField
{
	width: 100%;
	border: 1px solid var(--Light);
	border-radius: 4px;
	padding: 7px 12px;
	font-size: 0.9em;
	outline: none;
	background-color: #FFFFFF;
	color: var(--Dark);
	box-sizing: border-box;
}

.site-search-bar input[type="text"]:focus,
.site-search-bar input[type="search"]:focus,
.site-search-bar .MCSearchBox_TextField:focus
{
	border-color: var(--Accent, var(--Primary));
}

/* ============================================================
   Page layout — left nav + content
   ============================================================ */

.main-section
{
	padding-top: 16px;
}

.breadcrumbs-wrapper
{
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px 12px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.breadcrumbs-wrapper .breadcrumbs
{
	flex: 1 1 auto;
	min-width: 0;
}

/* Topic-level action links (Print, Copy URL, etc.). Sit on the right of the
   breadcrumbs row on wide viewports; wrap to a new line below the breadcrumbs
   on narrow viewports. */

.topic-actions
{
	flex: 0 0 auto;
	margin-left: auto;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 0.9em;
}

a.topic-action,
a.topic-action:link,
a.topic-action:visited
{
	color: var(--LinkColor);
	text-decoration: none;
	white-space: nowrap;
}

a.topic-action:hover,
a.topic-action:focus
{
	text-decoration: underline;
}

a.topic-action[hidden]
{
	display: none;
}

/* Pipe separators between adjacent action links. */

a.topic-action + a.topic-action::before
{
	content: "|";
	color: var(--Light, #ccc);
	margin-right: 12px;
	text-decoration: none;
	display: inline-block;
}

/* When the user clicks "Hide highlights", suppress the search-result palette
   without removing the spans (so toggling back restores them). */

body.highlights-hidden span.SearchHighlight,
body.highlights-hidden span.SearchHighlight.SearchHighlight1,
body.highlights-hidden span.SearchHighlight.SearchHighlight2,
body.highlights-hidden span.SearchHighlight.SearchHighlight3,
body.highlights-hidden span.SearchHighlight.SearchHighlight4,
body.highlights-hidden span.SearchHighlight.SearchHighlight5,
body.highlights-hidden span.SearchHighlight.SearchHighlight6,
body.highlights-hidden span.SearchHighlight.SearchHighlight7,
body.highlights-hidden span.SearchHighlight.SearchHighlight8,
body.highlights-hidden span.SearchHighlight.SearchHighlight9,
body.highlights-hidden span.SearchHighlight.SearchHighlight10
{
	background-color: transparent;
	color: inherit;
}

.main-section .row.outer-row
{
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
}

.main-section .row.outer-row > nav
{
	display: block;
	border-right: 1px solid var(--Light);
	min-width: 260px;
	max-width: 260px;
	position: sticky;
	top: 0;
}

/* The article list scrolls; its max-height is set dynamically by the script in
   Main-Page.flmsp so the bottom always meets the window bottom as the nav rises.
   The global div.scroll-wrapper 95vh cap remains as a no-JS fallback. */

.main-section .row.outer-row > nav > .scroll-wrapper
{
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-gutter: stable;
}

.main-section .row.outer-row > div
{
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 32px;
	padding-right: 16px;
}

.main-section .row.outer-row > nav > div
{
	padding: 0;
}

/* ============================================================
   Left nav links
   ============================================================ */

/* The left nav is built by nav-tree.js from the per-target TOC data
   (Data/Tocs/TOC.js) into <div class="nav-tree-mount nav-tree">, NOT by the menu
   proxy. The proxy is kept hidden (.nav-tree-source) only so Flare keeps emitting
   that conditioned TOC.js. Markup is: ul > li(.branch|.leaf) > div.row >
   a [+ button.toggle on branches, to the right of the title], nested ul for
   children. Section-mode (renderSections) emits no toggle at all. */

.main-section .row.outer-row > nav .nav-tree,
.main-section .row.outer-row > nav .nav-tree ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-section .row.outer-row > nav .nav-tree .row
{
	display: flex;
	align-items: stretch;
	border-bottom: solid 1px var(--Light);
}

.main-section .row.outer-row > nav .nav-tree a
{
	flex: 1 1 auto;
	min-width: 0;
	color: var(--Dark) !important;
	font-size: 10pt;
	/* Explicit line-height so rows are the SAME height at every tier. Nested
	   rows live inside a <ul> (which the global rule gives line-height:20pt),
	   while top-level rows live in the mount <div>; without pinning it here the
	   two tiers inherit different line boxes and nested rows render taller. */
	line-height: normal;
	padding: 6px 12px;
	display: block;
	text-decoration: none;
	background-color: transparent !important;
	/* one line + ellipsis; nav-fill.js adds a full-text title when clipped */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Top-level sections read a touch stronger. */

.main-section .row.outer-row > nav .nav-tree > li > .row > a
{
	font-weight: 600;
}

/* Progressive indentation, one step per level. Applied to .row so the expander
   indents with the label. Deeper selectors win on specificity, so each level
   sets an absolute (non-additive) inset. */

.main-section .row.outer-row > nav .nav-tree ul .row
{
	padding-left: 16px;
}

.main-section .row.outer-row > nav .nav-tree ul ul .row
{
	padding-left: 32px;
}

.main-section .row.outer-row > nav .nav-tree ul ul ul .row
{
	padding-left: 48px;
}

/* Expand/collapse control (topic tree only): a +/- glyph sitting to the right
   of the title. Plus when the branch is collapsed, minus when expanded. */

.main-section .row.outer-row > nav .nav-tree .toggle
{
	flex: 0 0 auto;
	width: 24px;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	color: var(--Dark);
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-section .row.outer-row > nav .nav-tree .toggle::before
{
	content: "+";
	display: block;
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
}

.main-section .row.outer-row > nav .nav-tree li.expanded > .row > .toggle::before
{
	content: "\2212";
	/* U+2212 minus sign */
}

/* Hide a collapsed branch's children. */

.main-section .row.outer-row > nav .nav-tree li.collapsed > ul
{
	display: none;
}

/* Current topic. */

.main-section .row.outer-row > nav .nav-tree a.selected
{
	color: var(--Primary) !important;
	font-weight: bold;
}

/* Current topic on hover — the :hover rule above paints the row navy, and
   the .selected rule paints the text navy (!important, later declaration).
   Same specificity; without this rule the text becomes invisible on hover.
   Force the light text back — specificity beats both by adding :hover to
   .selected. */

.main-section .row.outer-row > nav .nav-tree a.selected:hover
{
	color: var(--Lightest) !important;
}

/* The menu proxy is retained only as the TOC.js emitter; never shown. */

.main-section .row.outer-row > nav .nav-tree-source
{
	display: none !important;
}

/* ============================================================
   Article layout — body + right panel
   ============================================================ */

div.topic-layout
{
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding-top: 0;
}

div.topic-layout > div[role="main"],
div.topic-layout > div.topic-main
{
	flex: 1 1 auto;
	min-width: 0;
}

/* Articles in this section (right panel) */

div.side-content
{
	order: 1;
	width: 220px;
	min-width: 220px;
	flex-shrink: 0;
	margin-bottom: 15px;
	position: sticky;
	top: 0;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

div.scroll-wrapper
{
	max-height: 95vh;
	overflow-y: auto;
}

/* Right rail: .side-topic-title (and, on internal topics, .internal-warning)
   now sit outside .scroll-wrapper as siblings, so only the in-page ToC scrolls
   and the header/notification stay put above it. This override shrinks the
   generic 95vh cap to leave room for that sibling content. The subtraction is
   an estimate (title line + internal-warning block) — check against a live
   build and tune if the ToC list is clipped or leaves too much dead space. */

div.side-content .scroll-wrapper
{
	max-height: calc(95vh - 45px);
}

/* Strip skin-injected background from the right panel menu component */

div.side-content .mc-component,
div.side-content ._Skins_Topics_Menu
{
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

div.side-content h3,
p.side-heading
{
	font-size: 11pt;
	color: var(--Dark);
	margin-bottom: 8px;
	margin-top: 0px;
	font-weight: bold;
}

div.side-content .menu._Skins_Topics_Menu a,
div.side-content ul li a
{
	color: var(--Primary) !important;
	font-size: 10pt;
	text-decoration: none;
	display: block;
	padding: 4px 0;
}

div.side-content .menu._Skins_Topics_Menu a:hover,
div.side-content ul li a:hover
{
	color: var(--Lightest) !important;
	text-decoration: none;
}

/* Clip long entries to one line; nav-fill.js adds a full-text title on hover.
   Left side scoped to the article list (.scroll-wrapper) so the depth-2 site
   menu above it keeps wrapping; right side covers the Article TOC. */

div.side-content .menu._Skins_Topics_Menu a
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* ============================================================
   Side-rail topic title + internal-article warning
   .side-topic-title shows the topic <title> at the top of the
   right rail. Hidden until the page is scrolled past the topic's
   main <h1> (side-title.js toggles body.scrolled-past-h1) so it
   doesn't compete with the h1 itself.
   .internal-warning is emitted only by Main-Internal.flmsp and
   stays visible at all times on internal topics.
   Both sit as siblings above .scroll-wrapper (not inside it), so
   they stay fixed in the sticky right rail while only the ToC
   below them scrolls. See the div.side-content .scroll-wrapper
   max-height override above.
   ============================================================ */

div.side-content .side-topic-title
{
	font-size: 12pt;
	font-weight: bold;
	color: var(--Dark);
	line-height: 1.3;
	margin: 0 0 6px 0;
	visibility: hidden;
}

body.scrolled-past-h1 div.side-content .side-topic-title
{
	visibility: visible;
}

div.side-content .internal-warning
{
	font-size: 10pt;
	font-weight: normal;
	color: #c00;
	background-color: #DEF2FF;
	padding: 6px 10px;
	margin: 0 0 12px 0;
	border-radius: 4px;
}

/* Search-result highlighting. The skin's SearchHighlight rules are empty here, so the
   palette is defined below; search-highlight.js applies the SearchHighlight + SearchHighlightN
   classes on standalone topics (one color per search term). Values match MadCap's default
   palette as used by the Tabs3 KB skin. */

/* ============================================================
   Micro Content FAQ proxy — category hub pages (Section-Page)
   Two-column list; linked title bold and above its description.
   Targets Flare's micro-content component classes.
   ============================================================ */

/* Grid the pre-swap class too: Flare's MadCapAll.js swaps .faq-proxy-container
   -> .micro-content-container via deferred/RequireJS init. Keying only on the
   post-swap class made the two columns depend on that async swap firing before
   paint, causing intermittent single-column loads. Styling both classes renders
   two columns at first paint regardless of when (or whether) Flare runs. */

.faq-proxy-container,
.micro-content-container
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 48px;
}

.micro-content
{
	display: flex;
	flex-direction: column;
	break-inside: avoid;
}

/* Hide the phrase row and accordion controls (PlainText hub view) */

.micro-content-phrase,
.micro-content-drop-down-button,
.micro-content-expand,
.micro-content-expand-transition-wrapper,
.micro-response-url
{
	display: none;
}

/* Linked title first and bold; description below */

.micro-response-title
{
	order: 1;
}

.micro-response-title a
{
	font-weight: 700;
}

.micro-response
{
	order: 2;
}

span.SearchHighlight.SearchHighlight1
{
	color: #000000;
	background-color: #ffff66;
}

span.SearchHighlight.SearchHighlight2
{
	color: #000000;
	background-color: #a0ffff;
}

span.SearchHighlight.SearchHighlight3
{
	color: #000000;
	background-color: #99ff99;
}

span.SearchHighlight.SearchHighlight4
{
	color: #000000;
	background-color: #ff9999;
}

span.SearchHighlight.SearchHighlight5
{
	color: #000000;
	background-color: #ff66ff;
}

span.SearchHighlight.SearchHighlight6
{
	color: #ffffff;
	background-color: #880000;
}

span.SearchHighlight.SearchHighlight7
{
	color: #ffffff;
	background-color: #00aa00;
}

span.SearchHighlight.SearchHighlight8
{
	color: #ffffff;
	background-color: #886800;
}

span.SearchHighlight.SearchHighlight9
{
	color: #ffffff;
	background-color: #004699;
}

span.SearchHighlight.SearchHighlight10
{
	color: #ffffff;
	background-color: #990099;
}

p.MiniTOC1
{
	line-height: 12pt;
	font-weight: normal;
}

/* ============================================================
   In-page ToC (headings menu proxy — now in the right .side-content pane)
   ============================================================ */

/* In-page TOC ($topicHeadings). Flare always emits the topic's H1 as the
   magellan root <li> regardless of mc-include-parent, so we hide the H1
   link and collapse the wrapper <li>. Indentation lives on the <a>
   padding-left (matching the skin's pattern); the skin applies cumulative
   20/40/60px per nesting level on _Skins_Topics_Menu, which we override
   here so H2 is flush and H3 indents 16px. */

div.side-content ul.menu._Skins_Topics_Menu.mc-component[data-magellan]
{
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}

div.side-content ul.menu._Skins_Topics_Menu.mc-component[data-magellan] > li
{
	margin: 0;
	padding: 0;
	list-style: none;
}

div.side-content ul.menu._Skins_Topics_Menu.mc-component[data-magellan] > li > a
{
	display: none;
}

div.side-content ul.menu._Skins_Topics_Menu.mc-component[data-magellan] ul
{
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}

div.side-content ul.menu._Skins_Topics_Menu.mc-component[data-magellan] ul > li > a
{
	padding-left: 5px;
	padding-right: 5px;
}

div.side-content ul.menu._Skins_Topics_Menu.mc-component[data-magellan] ul ul > li > a
{
	padding-left: 21px;
	padding-right: 5px;
}

/* Inset the mouseover highlight so it doesn't paint edge-to-edge across the
   right pane. Horizontal margin on the anchor narrows the background box.
   Side effect: text also shifts right by the same 16px, keeping the same
   text-to-highlight-edge relationship. */

div.side-content ul.menu._Skins_Topics_Menu.mc-component[data-magellan] ul > li > a,
div.side-content ul.menu._Skins_Topics_Menu.mc-component[data-magellan] ul ul > li > a
{
	margin-left: 16px;
	margin-right: 16px;
}

/* ============================================================
   Responsive breakpoints
   ============================================================ */

/* Restore nav and right panel menus above their collapse thresholds.
   Components/Tablet.css hides ul.menu._Skins_Topics_Menu.mc-component at 1279px,
   collapsing both menus visually before our container rules fire. These overrides
   re-show each menu above its respective container collapse point. */

@media only screen and (min-width: 1201px)
{
	.main-section .row.outer-row > nav
	{
		display: block !important;
	}

	.main-section .row.outer-row > nav ul.menu._Skins_Topics_Menu.mc-component
	{
		display: block !important;
	}
}

@media only screen and (min-width: 961px)
{
	div.side-content ul.menu._Skins_Topics_Menu.mc-component
	{
		display: block !important;
	}
}

/* Drop left nav first — article + right pane fill the row */

@media only screen and (max-width: 1200px)
{
	.main-section .row.outer-row > nav
	{
		display: none;
	}

	.main-section .row.outer-row > div
	{
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}
}

/* Drop right panel — article goes full width */

@media only screen and (max-width: 960px)
{
	.main-section .row.outer-row
	{
		display: block;
	}

	div.side-content
	{
		display: none;
	}

	div.topic-layout
	{
		display: block;
	}
}

/* ============================================================
   Tablet — home page and quick-link grid reflow
   ============================================================ */

@media only screen and (max-width: 1279px)
{
	/* Show search in Top Navigation at tablet/mobile */

	.nav-search
	{
		display: block;
	}

	html.home-topic .nav-search
	{
		display: none;
	}

	html.home-topic .body-container
	{
		margin-left: 0;
	}

	div.quick-links > div:nth-child(1)
	{
		width: 24%;
		margin-left: 0%;
	}

	div.quick-links > div:nth-child(2)
	{
		width: 24%;
		margin-left: 14%;
	}

	div.quick-links > div:nth-child(3)
	{
		width: 24%;
		margin-left: 14%;
	}

	div.quick-links > div:nth-child(4)
	{
		width: 24%;
		margin-left: 0%;
		margin-top: 10px;
	}

	div.quick-links > div:nth-child(5)
	{
		width: 24%;
		margin-left: 14%;
		margin-top: 10px;
	}

	div.home-tiles > div:nth-child(1)
	{
		width: 50%;
		margin-left: 0%;
	}

	div.home-tiles > div:nth-child(2)
	{
		width: 50%;
		margin-left: 0%;
	}

	div.home-tiles > div:nth-child(3)
	{
		width: 50%;
		margin-left: 0%;
	}
}

/* ============================================================
   Mobile — single column
   ============================================================ */

@media only screen and (max-width: 767px)
{
	div.quick-links > div:nth-child(1),
	div.quick-links > div:nth-child(2),
	div.quick-links > div:nth-child(3),
	div.quick-links > div:nth-child(4),
	div.quick-links > div:nth-child(5)
	{
		width: 98%;
		margin-left: 0%;
	}

	div.home-tiles > div:nth-child(1),
	div.home-tiles > div:nth-child(2),
	div.home-tiles > div:nth-child(3)
	{
		width: 98%;
		margin-left: 0%;
	}
}

/* ============================================================
   Print
   ============================================================ */

@media print
{
	.site-header,
	.site-search-bar,
	.main-section .row.outer-row > nav,
	div.side-content,
	.MCBreadcrumbsBox,
	.breadcrumbs-wrapper
	{
		display: none !important;
	}

	.main-section .row.outer-row
	{
		display: block;
	}

	.main-section .row.outer-row > div
	{
		padding: 0;
		width: 100%;
	}

	div.topic-layout
	{
		display: block;
	}
}

/* ============================================================
   Home page layout
   ============================================================ */

.home-section
{
	max-width: 1400px;
	margin: 10px auto;
	padding: 20px 20px;
}

/* Wide viewports (>= 1600px): allow 4-across tile grid at 1080p and up. */

@media only screen and (min-width: 1600px)
{
	.home-section
	{
		max-width: 1500px;
	}
}

.home-section-title
{
	color: var(--Dark);
	font-size: 1.1em;
	margin-bottom: 20px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--Primary);
}

/* Centered "What's New" link above the home card grid. */

.home-whats-new
{
	text-align: center;
	margin: 0 0 20px;
	font-weight: 600;
}

.home-tiles
{
	text-align: center;
}

.home-tile
{
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	vertical-align: top;
	width: 300px;
	min-height: 200px;
	margin: 10px;
	padding: 20px 20px;
	border: 1px solid var(--Accent);
	border-radius: 4px;
	text-decoration: none;
	color: var(--Lightest);
}

/* Override default a:link / a:visited so tile text picks up the white color. */

a.home-tile:link,
a.home-tile:visited
{
	color: var(--Lightest);
}

.home-tile.home-tile-internal
{
	background-color: #cce8f4;
}

.home-tile:hover
{
	border-color: var(--Primary);
	color: var(--Lightest) !important;
	text-decoration: none;
}

.home-tile img.home-tile-icon
{
	width: 60px;
	height: 60px;
	margin-bottom: 12px;
}

.home-tile img.home-tile-icon-hover
{
	display: none;
	width: 60px;
	height: 60px;
	margin-bottom: 12px;
}

.home-tile:hover img.home-tile-icon
{
	display: none;
}

.home-tile:hover img.home-tile-icon-hover
{
	display: block;
}

/* Inline SVG icons (currentColor inherits from the tile's color) */

.home-tile svg.home-tile-icon
{
	width: 60px;
	height: 60px;
	margin-bottom: 12px;
	color: var(--Lightest);
	flex-shrink: 0;
}

.home-tile:hover svg.home-tile-icon
{
	color: var(--Lightest);
}

.home-tile h3,
.home-tile h4
{
	margin: 0 0 6px 0;
	font-size: 1em;
	font-weight: 600;
	color: inherit;
}

.home-tile > p
{
	margin: 0;
	padding: 0 4px;
	font-size: 0.85em;
	line-height: 1.35;
	color: inherit;
	opacity: 0.9;
}

.home-tile.home-tile-sm
{
	flex-direction: row;
	text-align: left;
	align-items: center;
	width: 200px;
	min-height: 120px;
	padding: 16px 20px;
	gap: 16px;
}

.home-tile.home-tile-sm svg.home-tile-icon
{
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	margin-bottom: 0;
}

.home-tile.home-tile-sm h4
{
	margin: 0 0 4px;
	font-size: 0.95em;
}

.home-tile.home-tile-sm p
{
	margin: 0;
	font-size: 0.85em;
}

/* ============================================================
@media only screen and (max-width: 767px)
{
	.home-tiles
	{
		flex-direction: column;
	}
}


/* ============================================================
   Article body styles (migrated from Zendesk style.css)
   ============================================================ */

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

.article-body ul,
.article-body ol
{
	padding-left: 20px;
	list-style-position: outside;
	margin: 20px 0 20px 20px;
}

.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol
{
	margin: 0;
}

.article-body ul
{
	list-style-type: disc;
}

.article-body code
{
	background: #f2f2f2;
	border: 1px solid var(--Light);
	border-radius: 3px;
	padding: 0 5px;
	margin: 0 2px;
}

.article-body pre
{
	background: #f2f2f2;
	border: 1px solid var(--Light);
	border-radius: 3px;
	padding: 10px 15px;
	overflow: auto;
	white-space: pre;
}

.article-body blockquote
{
	border-left: 1px solid var(--Light);
	color: var(--Medium);
	font-style: italic;
	padding: 0 15px;
}

.article-body > p:last-child
{
	margin-bottom: 0;
}

.article-body .table-responsive
{
	max-width: 100%;
	overflow: auto;
}

.article-body td
{
	border: solid 1px var(--Light);
	padding: 6px 12px;
}

.topic-main td
{
	vertical-align: top;
}

.article-content
{
	line-height: 1.6;
	margin: 20px 0 30px 0;
	word-wrap: break-word;
}

@media (max-width: 480px)
{
	.article-body .table-responsive ul,
	.article-body .table-responsive ol
	{
		padding-left: 0;
	}
}

/* ============================================================
   Category page — MadCap:miniTocProxy (General.htm and similar)
   Renders as section headings + article link lists
   ============================================================ */

.MCMiniTOCBox
{
	margin-top: 8px;
}

/* Strip default list chrome */

.MCMiniTOCBox ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Section block */

.MCMiniTOCBox > div > ul > li
{
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--Light);
}

.MCMiniTOCBox > div > ul > li:last-child
{
	border-bottom: none;
}

/* Section heading link */

.MCMiniTOCBox > div > ul > li > a
{
	font-size: 1.05em;
	font-weight: bold;
	color: var(--Dark);
	text-decoration: none;
	display: block;
	margin-bottom: 10px;
}

/* Article link */

.MCMiniTOCBox > div > ul > li > ul > li > a
{
	color: var(--Primary);
	font-size: 0.95em;
	text-decoration: none;
	display: block;
	padding: 3px 0;
}

/* ============================================================
   Internal remark style — used with LawRuler.Internal condition
   ============================================================ */

.rem
{
	background-color: #cce8f4;
	mc-conditions: 'LawRuler.Internal';
}

/* ============================================================
   Callout emphasis — inline red-bold "Important:" marker
   ============================================================ */

.important
{
	color: #ff0000;
	font-weight: bold;
}