/*<meta />*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans');

@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);

:root
{
	--font-family: 'Open Sans', sans-serif;
	--Brand1: #1C4D93;
	--Brand2: #1B365D;
	--Brand3: #F1F1F1;
	--Brand4: #59C8E6;
	--Brand5: #FF6C0E;
	--TricentisBlue: #004C97;
	--Dark: #2B2B2B;
	--Medium: #b9bec1;
	--Light: #d0d3d5;
	--White: #FFFFFF;
	--HeaderHeight: 72px;
	--ContentOffset: 12px;
	--CardPaddingY: 2rem;
}

body
{
	color: #2B2B2B;
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	line-height: 1.5rem;
	overflow-x: hidden;
	background: #ffffff;
}

.body-container
{
	margin-top: 0;
	/* Scroll container handles top spacing */
	max-width: 1360px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.036);
	/* Let the card and page grow naturally; default to visible overflow */
	max-height: none !important;
	overflow: visible;
	/* allow scrollbar to extend to viewport edge */
	height: auto !important;
	min-height: 0 !important;
	align-self: start;
	/* prevent flex/grid parents from stretching height */
	scrollbar-width: thin;
	/* Firefox */
	scrollbar-color: #cbd5e1 transparent;
	/* Firefox */
}

/* Slim, iOS-like scrollbar inside the content card */

.body-container:not(.no-scroll)::-webkit-scrollbar
{
	width: 6px;
}

.body-container:not(.no-scroll)::-webkit-scrollbar-track
{
	background: transparent;
}

.body-container:not(.no-scroll)::-webkit-scrollbar-thumb
{
	background: #cbd5e1;
	border-radius: 4px;
}

.body-container:not(.no-scroll)::-webkit-scrollbar-thumb:hover
{
	background: #b4c1d3;
}

/* Mini TOC - layout and aesthetics */

.content-layout
{
	display: grid;
	grid-template-columns: minmax(0, 1360px) 220px;
	/* fixed content card track + mini-TOC */
	grid-template-areas: 'content mini';
	gap: 24px;
	max-width: calc(1360px + 220px + 24px);
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	/* Scroll container handles top spacing */
	margin-bottom: 22px !important;
}

/* Neutralize card margins when inside the layout grid so columns align */

.content-layout > .body-container
{
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	grid-area: content;
	/* No max-height - let it grow with content */
}

.mini-toc
{
	position: sticky;
	top: calc(72px + 12px);
	/* Sticky below fixed header */
	align-self: start;
	padding: 10px 10px;
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 4px 14px rgba(0,0,0,0.03);
	max-height: calc(100vh - 72px - 40px);
	overflow: auto;
	width: 220px;
	/* tighter to better fit Full HD */
}

.content-layout > .mini-toc
{
	grid-area: mini;
}

.mini-toc--dock
{
	position: fixed;
	z-index: 10;
}

.mini-toc-title
{
	font-size: .8rem;
	font-weight: 600;
	color: #1B365D;
	margin-bottom: 8px;
}

.mini-toc-list
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.mini-toc-list li
{
	position: relative;
	padding: 6px 6px 6px 10px;
	border-radius: 4px;
	overflow: hidden;
}

.mini-toc-list li a
{
	display: inline;
	color: #2B2B2B;
	text-decoration: none;
	font-size: .9rem;
}

.mini-toc-list li a.active
{
	color: #004C97;
}

/* Mini-TOC copy link button */

.mini-toc-list li:hover
{
	background: rgba(0,0,0,0.02);
}

.mini-toc-list li::before
{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: transparent;
	border-radius: 4px 0 0 4px;
	transition: background 0.2s ease;
}

.mini-toc-list li:hover::before
{
	background: #1C4D93;
}

.mini-toc-list li:has(a.active)::before
{
	background: #004C97;
}

.mini-toc-list li:has(a.active)
{
	background: rgba(0,76,151,0.06);
}

.mini-toc-copy
{
	opacity: 0;
	background: none;
	border: none;
	padding: 2px 4px;
	cursor: pointer;
	color: #b9bec1;
	transition: opacity 0.2s ease, color 0.2s ease;
	vertical-align: middle;
	margin-left: 6px;
	display: inline-flex;
	align-items: center;
}

.mini-toc-list li:hover .mini-toc-copy
{
	opacity: 1;
}

.mini-toc-copy:hover
{
	color: #1C4D93;
}

.mini-toc-copy.copied
{
	color: #59C8E6;
}

.mini-toc-copy svg
{
	width: 14px;
	height: 14px;
	display: block;
}

@media (max-width: 1024px)
{
	.content-layout
	{
		grid-template-columns: 1fr;
		grid-template-areas: 'mini' 'content';
		gap: 16px;
		max-width: 100%;
	}

	.mini-toc
	{
		display: block;
		position: static;
		top: auto;
		width: auto;
		max-height: none;
		overflow: visible;
	}
}

/* Side Navigation card styling to match mini-TOC */

.sidenav-wrapper
{
	background: transparent !important;
}

.sidenav-wrapper .sidenav-container
{
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.06);
	padding: 12px;
	overflow: visible;
	/* Don't block sticky behavior */
}

.main-toc-title
{
	flex-shrink: 0;
	/* Don't shrink in flex container */
	font-size: .9rem;
	font-weight: 700;
	color: #1B365D;
	padding: 6px 8px 10px 8px;
	margin: 4px 4px 8px 4px;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}

.main-toc-portal
{
	flex-shrink: 0;
	/* Don't shrink in flex container */
	padding: 6px 8px;
	margin: 4px 4px 2px 4px;
}

.main-toc-portal a
{
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: .9rem;
	font-weight: 600;
	color: #1a1a1a;
	text-decoration: none;
	background: linear-gradient(180deg, #f7f9fb 0%, #f3f6fb 100%);
	padding: 8px 12px;
	min-height: 36px;
	line-height: 1;
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

a:link
{
	color: #1C4D93;
}

a:visited
{
	color: #1C4D93;
}

.sidenav-wrapper a:focus
{
	outline: 2px solid #59C8E6;
	outline-offset: 2px;
}

.sidenav-wrapper a:focus
{
	outline: 2px solid #59C8E6;
	outline-offset: 2px;
	border-radius: 4px;
}

.main-toc-portal a:hover
{
	background: #eaf2fb;
	color: #1B365D;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
}

a:hover
{
	color: #1B365D;
	text-decoration: underline;
}

div.thc-tiles-wrapper > div a:hover
{
	color: inherit;
}

div.thc-two-column-wrapper a:hover
{
	text-decoration: none;
}

.manual-resource-item a:hover
{
	color: #1B365D;
	text-decoration: underline;
}

ul.sidenav li a:hover
{
	background: rgba(0,0,0,0.03);
	text-decoration: none;
}

.translation-notice a:hover
{
	color: #1B365D;
	text-decoration: underline;
}

.main-toc-portal-icon
{
	font-size: 0;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-toc-portal-icon svg
{
	display: block;
	width: 18px;
	height: 18px;
}

.main-toc-portal-label
{
	line-height: 1;
}

p
{
	margin-top: 12px;
	margin-bottom: 12px;
	line-height: 1.65em;
	/* readability */
	letter-spacing: 0.2px;
}

.title-bar-container	/* defines the height of the top nav and adds a blue line underneath */
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	border-bottom: solid 1px rgba(0,0,0,0.06);
	z-index: 1000;
	background-color: white;
}

/* ===================================================== CONTENT STYLES FOR DOCU ============================================ */
/* Headings (These are the ones we use in topics. Flare also has h4-h6 for other content elements, which we don't use.) */

h1
{
	font-weight: 700;
	font-size: 1.9rem;
	line-height: 2.2rem;
	margin-top: 16px;
	margin-bottom: 6px;
	color: #1B365D;
	position: relative;
}

h2
{
	font-weight: 600;
	font-size: 1.5rem;
	padding-top: .4rem;
	line-height: 2.0rem;
	margin-top: 16px;
	margin-bottom: 8px;
	color: #1B365D;
	position: relative;
	padding-bottom: 6px;
}

h3
{
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.6rem;
	padding-top: .3rem;
	margin-bottom: 6px;
	color: #1B365D;
	position: relative;
}

/* Additional heading levels for consistency */

h4
{
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.45rem;
	margin-top: 12px;
	margin-bottom: 2px;
	color: #1B365D;
}

h5
{
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.35rem;
	margin-top: 10px;
	margin-bottom: 2px;
	letter-spacing: .2px;
	color: #1B365D;
}

/* Offset for anchor links to account for fixed header */

h1,
h2,
h3,
h4,
h5,
h6
{
	scroll-margin-top: calc(72px);
}

/* Improve paragraph readability width without constraining media/content blocks */

.body-container p
{
	max-width: 100%;
}

/* Accessible link focus styles */

a:focus-visible,
button:focus-visible,
.dropDownHotspot:focus-visible
{
	outline: 2px solid #59C8E6;
	outline-offset: 2px;
	border-radius: 4px;
}

/* TOC label sizes for hierarchy and accessibility */

ul.sidenav > li > a
{
	font-size: .9rem;
}

ul.sidenav li ul > li > a
{
	font-size: .88rem;
}

ul.sidenav li ul ul > li > a
{
	font-size: .85rem;
}

@media (max-width: 768px)
{
	h1
	{
		font-size: 1.65rem;
		line-height: 2.0rem;
	}

	h2
	{
		font-size: 1.35rem;
		line-height: 1.8rem;
	}

	h3
	{
		font-size: 1.05rem;
		line-height: 1.45rem;
	}

	.body-container p
	{
		max-width: 100%;
	}
}

/* Text formatting */

span.Emphasis
{
	font-weight: bold;
	font-style: normal;
}

span.DoNotTranslate
{
	
}

span.DoNotTranslateBold
{
	font-weight: bold;
	font-style: normal;
}

span.FileOrFilePath
{
	font-family: 'Inconsolata', monospace;
	background-color: #f9f9f9;
	border: 1px solid #d3d6db;
	border-radius: 2px;
	padding: 4px 4px;
	margin-top: 2px;
	margin-bottom: 2px;
	display: inline;
	font-size: 10pt;
}

span.Keys
{
	font-weight: bold;
	font-style: normal;
}

span.Highlight
{
	border-radius: 12px;
	background-color: #FFFF00;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 10px;
	padding-left: 10px;
}

/* 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;
}

ol ul
{
	letter-spacing: .25px;
	list-style-type: disc;
}

li > p
{
	margin-left: 5px;
}

/* Links and xrefs */

a
{
	color: #1C4D93;
}

MadCap|xref
{
	font-weight: normal;
	mc-format: '{para}';
	text-decoration: underline;
	color: #1C4D93;
}

MadCap|xref.with_quotation_marks	/* this is a special class elipl created, so headings are wrapped in quotation marks */
{
	mc-format: '{quote}{para}{quote}';
}

MadCap|xref:visited
{
	color: #1C4D93;
}

MadCap|xref:hover
{
	color: #1B365D;
}

/* Screenshots and icons */
/* Default constraint for all images in content area to prevent overflow */

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

img.ScreenshotFullsize
{
	max-width: 100%;
	margin-top: 20px;
}

img.ScreenshotReducedSize
{
	mc-thumbnail: popup;
	mc-thumbnail-max-height: auto;
	mc-thumbnail-max-width: auto;
	max-width: 40%;
	margin-top: 20px;
}

img.ScreenshotThumbnail
{
	mc-thumbnail: popup;
	mc-thumbnail-max-height: auto;
	mc-thumbnail-max-width: 200px;
	margin-top: 20px;
}

img.Icon
{
	max-width: 6mm;
	padding: 1pt;
	padding-bottom: 0;
}

p.imgCaption
{
	font-size: 10pt;
	text-align: left;
	margin-top: -12px;
	margin-bottom: 35px;
}

/* Boxes */

div.example
{
	overflow: auto;
	background-color: #ECEDF1;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
	padding-right: 20px;
	padding-left: 20px;
	background-position: left 3px;
	background-position-x: 3px;
	background-position-y: 0px;
	background-size: 35px 35px;
	margin-top: 30px;
	margin-bottom: 40px;
}

.example > p:first-child::before
{
	content: "Example: ";
	font-weight: bold;
	display: inline;
}

div.note
{
	overflow: auto;
	background-color: rgba(89, 200, 230, 0.25);
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
	padding-right: 20px;
	padding-left: 20px;
	background-position: left 3px;
	background-position-x: 3px;
	background-position-y: 0px;
	background-size: 35px 35px;
	margin-top: 30px;
	margin-bottom: 40px;
}

.note > p:first-child::before
{
	content: "Note: ";
	font-weight: bold;
	display: inline;
}

div.caution
{
	overflow: auto;
	border-radius: 12px;
	background-color: rgba(255, 108, 14, 0.20);
	padding-right: 20px;
	padding-left: 20px;
	background-position: left 3px;
	background-position-x: 3px;
	background-position-y: 0px;
	background-size: 35px 35px;
	margin-top: 30px;
	margin-bottom: 40px;
}

.caution > p:first-child::before
{
	content: "Caution: ";
	font-weight: bold;
	display: inline;
}

div.syntax
{
	overflow: auto;
	border-radius: 12px;
	background-color: rgba(240, 245, 212, 0.8);
	padding-right: 20px;
	padding-left: 20px;
	background-position: left 3px;
	background-position-x: 3px;
	background-position-y: 0px;
	background-size: 35px 35px;
	margin-top: 30px;
	margin-bottom: 40px;
}

.syntax > p:first-child::before
{
	content: "Syntax: ";
	font-weight: bold;
	display: inline;
}

/* Tables (The basic table layout is defined in Tables.css; this is for formatting text in tables.) */

p.tableHeader
{
	margin-bottom: 0pt;
	margin-top: 0pt;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 4px;
}

p.tableBody
{
	margin-bottom: 0pt;
	margin-top: 0pt;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 4px;
	padding-right: 4px;
}

/* Dropdowns */

MadCap|dropDown
{
	border-bottom: none;
	font-weight: normal;
	font-style: normal;
	mc-closed-image: none;
	mc-open-image: none;
	margin: 12px 0;
	padding-bottom: 0;
}

.dropDownHotspot
{
	padding: 12px 14px !important;
	border-radius: 8px;
	background: #f7f9fb;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
	transition: background .2s ease, box-shadow .2s ease;
	color: #1C4D93;
	/* Tricentis blue for label */
}

.dropDownHotspot:link
{
	cursor: pointer;
	text-decoration: none;
	color: #1C4D93;
	font-weight: 700;
	font-style: normal;
}

.dropDownHotspot:visited
{
	color: #1C4D93;
}

.dropDownHotspot:hover
{
	color: #1B365D;
}

/* Visual separation between consecutive dropdown groups */

MadCap|dropDown + MadCap|dropDown
{
	margin-top: 16px;
}

MadCap|dropDownBody
{
	margin-left: 0;
	margin-top: 6px;
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 8px;
	padding: 12px 14px;
	background: #ffffff;
	opacity: 1;
	transform: none;
	transition: opacity .18s ease, transform .18s ease;
}

.MCDropDown_Open	/* adds extra whitespace between dropdown and next element, but only if dropdown is open */
{
	padding-bottom: 16px;
}

/* Restore hotspot chevron badge */

.dropDownHotspot::after
{
	content: '+';
	margin-left: auto;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(28, 77, 147, 0.10);
	color: #1B365D;
	font-weight: 700;
	transition: transform .18s ease, background .18s ease, color .18s ease;
}

.MCDropDown_Open .dropDownHotspot::after
{
	content: '−';
	transform: rotate(180deg);
	background: #59C8E6;
	color: #ffffff;
}

/* Fade/slide body in when opening */

.MCDropDown_Open MadCap|dropDownBody
{
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* Code snippets */

MadCap|codeSnippet
{
	font-size: 10pt;
	border: 1px solid rgba(0,0,0,0.06);
	background: #f7f9fb;
	margin-top: 24px;
	margin-bottom: 32px;
	font-family: 'Inconsolata', monospace;
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.08);
	color: #2B2B2B;
	position: relative;
}

MadCap|codeSnippetCopyButton
{
	background: linear-gradient(180deg, #f7f9fb 0%, #f3f6fb 100%);
	font-family: 'Open Sans', sans-serif;
	float: right;
	padding: 6px 10px;
	cursor: pointer;
	border: 1px solid rgba(0,0,0,0.12);
	text-align: center;
	page-break-after: avoid;
	page-break-before: avoid;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
	margin: 10px;
	color: #1C4D93;
	transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .06s ease;
}

MadCap|codeSnippetCopyButton:link,
MadCap|codeSnippetCopyButton:visited
{
	color: #1C4D93;
}

MadCap|codeSnippetCopyButton:hover,
MadCap|codeSnippetCopyButton:focus
{
	color: #ffffff !important;
	background: #1C4D93;
	/* override gradient */
	border-color: #1C4D93;
	box-shadow: 0 4px 12px rgba(0,76,151,0.18);
}

MadCap|codeSnippetCopyButton:active
{
	background-color: #1B365D;
	transform: translateY(1px);
}

/* Code block content tweaks */

MadCap|codeSnippetBody
{
	padding: 16px 20px;
	line-height: 1.5;
	font-size: 12px;
	background: transparent;
	white-space: pre;
	overflow-x: auto;
}

/* Align copy button row without shifting code lines */

MadCap|codeSnippet
{
	position: relative;
}

MadCap|codeSnippetCopyButton
{
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 2;
}

/* Fallback custom copy button (injected by script when missing) */

.mc-copy-btn
{
	position: absolute;
	right: 12px;
	top: 12px;
	background: linear-gradient(180deg, #f7f9fb 0%, #f3f6fb 100%);
	border: 1px solid rgba(0,0,0,0.12);
	color: #1C4D93;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	border-radius: 8px;
	padding: 6px 10px;
	cursor: pointer;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .06s ease;
}

.mc-copy-btn:hover,
.mc-copy-btn:focus
{
	background: #1C4D93;
	border-color: #1C4D93;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(0,76,151,0.18);
}

.mc-copy-btn:active
{
	background-color: #1B365D;
	color: #ffffff;
	transform: translateY(1px);
}

/* ===================================================== STYLES FOR TEMPLATE PAGES ============================================ */
/* Footer for Home-Page.flmsp */

.home-footer.tricentis-custom
{
	margin-top: 0;
	margin-bottom: 0;
	padding: 2% 5%;
	color: #FFFFFF;
	font-size: 14px;
	background-color: #1B365D;
}

.home-footer.tricentis-custom > div:first-child img
{
	width: 176px;
}

.home-footer.tricentis-custom .tricentis-copyright
{
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.home-footer.tricentis-custom .tricentis-copyright p
{
	margin: 0;
	color: #A7BBD0;
	font-size: 11px;
	line-height: 24px;
	font-weight: 400;
}

/* Footer for Other-Topics.flmsp */

footer
{
	width: 100%;
	margin-top: 20px;
	text-align: center;
}

footer .footer-text
{
	margin: 5px 0;
	font-size: 10pt;
	line-height: 1.5;
}

/* Container for Other-Topics.flmsp */

div.topic-container
{
	padding-top: 1em;
	padding-left: 30px;
}

/* ===================================================== STYLES FOR LANDING PAGE ============================================ */
/* Styles that override skin, so the landing page doesn't show TOC, search bar in header, and blue bottom border of top nav */

html.home-topic
{
	
}

html.home-topic .body-container
{
	padding: 0;
	overflow: auto !important;
	/* allow internal scrolling if needed */
	max-height: none !important;
}

html.home-topic .sidenav-wrapper
{
	display: none;
}

html.home-topic .title-bar-container
{
	border-bottom: solid 1px rgba(0,0,0,0.06);
}

html.home-topic .title-bar-container .search-field
{
	display: block;
}

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

/* General */

*,
*::before,
*::after
{
	box-sizing: inherit;
}

.height-container-sidenav	/* overrides default Flare sidenav settings that add whitespace where we don't want it */
{
	padding-bottom: 0;
}

/* Hero section styles*/

div.thc-bg-tricentisblue
{
	background-color: #004C97;
}

div.thc-hero-section
{
	background: url('../projectimages/landingpage/product_heroheader_desktop.png') right no-repeat;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

div.thc-hero-wrapper
{
	margin: 0 auto;
	width: 100%;
	max-width: 1514px;
	padding: 3%;
}

div.thc-hero-copy
{
	font-size: 16px;
	width: 45%;
}

h1.thc-hero-heading
{
	color: #FAFCFF;
	font-size: 2.875em;
	font-weight: 400;
	line-height: 5.25rem;
	margin-bottom: 20px;
}

p.thc-hero-body
{
	color: #ffffff;
	font-size: 1.125em;
	font-weight: 400;
	margin-bottom: 24px;
}

div.thc-hero-section::before
{
	content: ' ';
	position: absolute;
	background-color: #59c8e6;
	transform: rotate(45deg);
	width: 2px;
	left: 25px;
	height: 100px;
	top: -25px;
}

/* Section with tiles */

div.thc-section
{
	display: flex;
	justify-content: center;
	margin: 60px auto;
	padding: 0 3%;
}

div.thc-tiles-wrapper
{
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(3, 1fr);
	/* 3-column layout */
	max-width: 1514px;
	width: 100%;
	padding: 0 3%;
}

div.thc-tiles-wrapper > div
{
	background-color: #F7F8F8;
	padding: 35px 25px;
	text-align: center;
}

div.thc-tiles-wrapper > div h4
{
	font-size: 1.5em;
	font-weight: 500;
	margin-top: 8px;
	margin-bottom: 8px;
}

div.thc-tiles-wrapper > div p
{
	font-size: 1em;
	line-height: 1.5em;
	margin-top: 8px;
	margin-bottom: 8px;
}

div.thc-tiles-wrapper > div a
{
	text-decoration: none;
	color: inherit;
}

img.tile-img
{
	width: auto;
	height: 50px;
	margin-bottom: 15px;
}

/* Section with "<product name> is here!" */

div.thc-bg-lightblue
{
	background-color: #DFE9F8;
	margin-bottom: 0;
}

div.thc-two-column-wrapper
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1514px;
	padding: 3%;
	margin: 0 auto;
}

div.thc-two-column-wrapper > div
{
	flex: 1;
	padding: 20px;
}

div.thc-two-column-wrapper img
{
	max-width: 100%;
	height: auto;
}

div.thc-two-column-wrapper header
{
	font-size: 2.5rem;
	font-weight: 400;
	color: #2B2B2B;
	margin-bottom: 20px;
}

div.thc-two-column-wrapper p
{
	font-size: 1rem;
	line-height: 1.5rem;
	color: #2B2B2B;
	margin-bottom: 25px;
}

div.thc-two-column-wrapper a
{
	color: #004C97;
	font-weight: 600;
	text-decoration: none;
}

/* ===================================================== STYLES FOR SCROLLBAR ============================================ */

::-webkit-scrollbar
{
	width: 10px;
}

::-webkit-scrollbar-track
{
	border-left: 1px solid #E3E3E4;
	border-right: 1px solid #E3E3E4;
}

::-webkit-scrollbar-thumb
{
	background: #B4B4B7;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover
{
	background: #B4B4B7;
}

/* ===================================================== STYLES FOR DIFFERENT MEDIA (still to do!!!) ============================================ */

@media only screen and (max-width: 1279px)
{
	
}

@media only screen and (max-width: 767px)
{
	
}

/* ============================= ENTERPRISE MANUAL COMPONENTS ============================= */

.manual-hero
{
	padding: 2rem 0 2.5rem 0;
	margin-bottom: 3rem;
	border-bottom: 1px solid #d0d3d5;
	position: relative;
}

.manual-hero::after
{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 4px;
	background: #FF6C0E;
	border-radius: 2px;
}

.manual-hero h1
{
	font-size: 2.5rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	color: #1B365D;
	line-height: 1.1;
}

.manual-hero-intro
{
	font-size: 1.1rem;
	line-height: 1.6;
	color: #2B2B2B;
	margin-bottom: 1.5rem;
}

.manual-hero-actions
{
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.manual-hero-cta
{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	color: #1C4D93 !important;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	text-decoration: none !important;
	font-weight: 500;
	transition: all 0.3s ease;
	border: 2px solid #1C4D93;
	font-size: 0.95rem;
}

.manual-hero-cta:hover
{
	background: #1C4D93;
	color: #FFFFFF !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(27, 54, 93, 0.15);
	text-decoration: none !important;
}

.manual-hero-cta.trial
{
	background: #1C4D93;
	color: #FFFFFF !important;
	border: 2px solid #1C4D93;
	font-weight: 600;
}

.manual-hero-cta.trial:hover
{
	background: #1B365D;
	border-color: #1B365D;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(27, 54, 93, 0.2);
	color: #FFFFFF !important;
}

.manual-card
{
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	overflow: hidden;
	margin: 2rem 0;
	transition: all 0.3s ease;
	border-left: 4px solid #FF6C0E;
	position: relative;
}

.manual-card:hover
{
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.manual-card-content
{
	padding: 2rem;
}

.manual-card-title
{
	font-size: 1.5rem;
	font-weight: 700;
	color: #1B365D;
	margin: 0;
	line-height: 1.2;
}

.manual-card-description
{
	color: #2B2B2B;
	line-height: 1.6;
	margin-bottom: 2rem;
	font-size: 1rem;
}

.manual-resources
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.manual-resource-item
{
	background: #F1F1F1;
	border-radius: 8px;
	padding: 1.5rem;
	transition: all 0.3s ease;
	border: 1px solid rgba(28, 77, 147, 0.1);
}

.manual-resource-item:hover
{
	background: #FFFFFF;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	transform: translateY(-2px);
}

.manual-resource-item h4
{
	font-size: 1.1rem;
	font-weight: 600;
	color: #1B365D;
	margin: 0 0 0.5rem 0;
}

.manual-resource-item a
{
	color: #1C4D93;
	text-decoration: none;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.3s ease;
}

.manual-versions
{
	margin-top: 3rem;
}

.manual-versions h2
{
	color: #1B365D;
	border-bottom: 2px solid #59C8E6;
	padding-bottom: 0.5rem;
	margin-bottom: 2rem;
}

.manual-versions MadCap|dropDown
{
	background: transparent !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	margin: 10px 0 !important;
	overflow: visible !important;
	border: none !important;
	transition: all 0.3s ease !important;
	mc-closed-image: none !important;
	mc-open-image: none !important;
	mc-image-position: none !important;
	mc-image-spacing: 0 !important;
}

.manual-versions MadCap|dropDownBody
{
	padding: 1.5rem !important;
	background: #FFFFFF !important;
	border: 1px solid rgba(28, 77, 147, 0.08) !important;
	border-top: none !important;
	border-radius: 0 0 6px 6px !important;
	margin: 0 2px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.manual-versions .dropDownHotspot
{
	display: flex !important;
	align-items: center !important;
	padding: 1rem 1.5rem !important;
	background: linear-gradient(135deg, #fafafa, #FFFFFF) !important;
	border: 1px solid rgba(28, 77, 147, 0.08) !important;
	border-radius: 6px !important;
	margin-top: 12px !important;
	margin-bottom: 12px !important;
	position: relative !important;
	transition: all 0.3s ease !important;
	font-size: 1.1rem !important;
	font-weight: 600 !important;
	color: #1B365D !important;
	text-decoration: none !important;
	box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
	cursor: pointer !important;
}

.manual-versions .dropDownHotspot::after
{
	content: '+';
	position: absolute;
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2rem;
	font-weight: 700;
	color: #1B365D;
	transition: all 0.3s ease;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(28, 77, 147, 0.1);
}

.manual-versions .MCDropDown_Open .dropDownHotspot
{
	background: linear-gradient(135deg, #F1F1F1, #f0f0f0) !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.manual-versions .MCDropDown_Open .dropDownHotspot::after
{
	content: '−';
	background: #59C8E6 !important;
	color: #FFFFFF !important;
}

/* ============================= TOC / SIDENAV MODERNIZATION ============================= */

ul.sidenav li a
{
	display: block;
	padding: 8px 12px;
	border-left: 4px solid transparent;
	color: #2B2B2B;
	line-height: 1.4;
}

ul.sidenav li a.selected
{
	border-left-color: #004C97;
	color: #004C97;
	font-weight: bold;
}

.sidenav-container
{
	position: sticky;
	top: calc(72px + 12px);
	/* Sticky below fixed header */
	margin-top: 0;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.036);
	padding-top: 16px;
	padding-bottom: 12px;
	padding-left: 10px;
	padding-right: 12px;
	/* slight right gutter for scrollbar */
	/* Flex column layout so child ul can fill remaining space */
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 72px - 12px - 20px);
	overflow: hidden;
	box-sizing: border-box;
	/* subtle top divider accent */
	/* background-image: linear-gradient(90deg, var(--Brand5) 0 40px, transparent 40px); */
	background-repeat: no-repeat;
	background-size: 100% 3px;
	background-position: 0 0;
}

/* Ensure TOC is not hidden behind the fixed header */

.sidenav-container,
.sidenav-wrapper
{
	padding-top: 0;
}

/* TOC list fills remaining space in flex container and scrolls */

.sidenav-container > ul.sidenav
{
	flex: 1 1 auto;
	min-height: 0;
	/* Critical: allows flex child to shrink and scroll */
	overflow-y: auto;
	padding-bottom: 0px;
	/* zeroed to compensade */
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

/* Slim scrollbar for TOC list */

.sidenav-container > ul.sidenav::-webkit-scrollbar
{
	width: 6px;
}

.sidenav-container > ul.sidenav::-webkit-scrollbar-track
{
	background: transparent;
}

.sidenav-container > ul.sidenav::-webkit-scrollbar-thumb
{
	background: #cbd5e1;
	border-radius: 4px;
}

.sidenav-container > ul.sidenav::-webkit-scrollbar-thumb:hover
{
	background: #b4c1d3;
}

@media (max-width: 768px)
{
	.body-container
	{
		padding-left: 1rem;
		padding-right: 1rem;
		max-width: 100%;
	}
}

/* ============================= LAYOUT: WIDESCREEN GRID AND REVEAL SIDEBAR ============================= */

.main-section > .outer-row
{
	max-width: 1684px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Align header contents to the same grid as content */

.title-bar-container .outer-row,
.sticky-container .outer-row
{
	max-width: 1684px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
}

/* Sidebar reveal-on-scroll (opt-in via html.reveal-sidebar) */

.sidenav-wrapper
{
	transition: opacity .25s ease, transform .25s ease;
	background: transparent !important;
	/* Stretch to match content-layout height so sidenav-container can stick */
	align-self: stretch !important;
	overflow: visible !important;
	/* Don't create scroll context - let child be sticky */
	height: auto;
	/* Allow natural height growth */
}

/* Override Flare skin max-height on sidenav-layout */

.sidenav-layout
{
	max-height: none !important;
	/* Allow natural page scrolling */
}

html.reveal-sidebar:not(.has-scrolled) .sidenav-wrapper
{
	opacity: 0;
	transform: translateX(-8px);
}

/* Sidebar/content gutter harmony */

.main-section > .outer-row
{
	gap: 24px;
	/* No scroll here - body scrolls naturally */
	padding-top: calc(72px + 12px);
}

/* Defensive reset: ensure no inherited backgrounds on nav wrapper ancestors */

nav.sidenav-wrapper,
.sidenav-wrapper,
.sidenav-container
{
	background: transparent;
}

/* Ensure content wrapper containers don't force viewport height */

.height-container,
.height-container-sidenav
{
	min-height: auto !important;
	height: auto !important;
}

/* Ensure main column region grows and the document scrolls */

.row,
.main-section,
.main-section .row,
.main-section .column,
.main-section .columns
{
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
}

/* Global safety: allow natural document scrolling across all topics */

html,
body
{
	height: auto !important;
	min-height: 0 !important;
}

/* Allow natural page scrolling on all topics */

html:not(.home-topic)
{
	overflow-y: scroll !important;
	/* Main scroll container */
}

html:not(.home-topic) body
{
	overflow: visible !important;
	/* Don't create second scroll context */
}

.main-section,
.main-section > .outer-row,
.body-container,
.content-layout
{
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
	/* Critical for sticky to work */
}

/* Reset Flare/Foundation wrappers so the page itself can scroll */

.off-canvas-wrapper,
.off-canvas-wrapper-inner,
.off-canvas-content,
.inner-wrap,
.outer-wrap
{
	/* Allow natural page scrolling */
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
	box-shadow: none !important;
}

/* Main content area - grows naturally, no scroll here */

#mc-main-content,
.mc-main-content,
#mc-content,
.mc-content
{
	display: block;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
	box-sizing: border-box;
}

/* Home page should use natural document scrolling */

html.home-topic body,
html.home-topic .main-section,
html.home-topic .main-section > .outer-row,
html.home-topic .height-container,
html.home-topic .height-container-sidenav,
html.home-topic .body-container
{
	height: auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overflow-x: visible !important;
}

/* Safety: allow page itself to scroll */

html.home-topic,
html.home-topic body
{
	overflow-y: auto !important;
}

/* TOC visuals are defined in the Side-Navigation.flskn; CSS intentionally minimal. */
/* Focus styles */

@media (max-width: 768px)
{
	.main-section > .outer-row
	{
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* Top header background band to visually connect header and content */
/* remove header band on pages where it causes a visible gap */

html.disable-header-band .main-section > .outer-row::before
{
	display: none;
}

/* ============================= TRANSLATION NOTICE ============================= */
/* Inline badge shown on translated (non-English) pages */

.translation-notice
{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 14px;
	margin-bottom: 16px;
	margin-top: 40px;
	background: rgba(0, 0, 0, 0.025);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 8px;
	font-size: 0.85rem;
	line-height: 1.45;
	color: #2B2B2B;
	min-width: 100%;
	box-sizing: border-box;
}

.translation-notice-icon
{
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: #b9bec1;
}

.translation-notice-icon svg
{
	width: 16px;
	height: 16px;
	display: block;
}

.translation-notice-text
{
	flex: 1;
}

.translation-notice a
{
	color: #1C4D93;
	font-weight: 600;
	text-decoration: none;
}

/* Responsive: adjust padding on smaller screens */

.toolbar-button-drop-down
{
	color: #707070 !important;
	line-height: normal !important;
	background-color: #FFF !important;
	-webkit-border-radius: 4px !important;
	-moz-border-radius: 4px !important;
	border-radius: 4px !important;
	-webkit-box-shadow: 0 0px 0px #8B8B8B !important;
	-moz-box-shadow: 0 0px 0px #8B8B8B !important;
	box-shadow: 0 1px 1px #8B8B8B !important;
	position: absolute !important;
	z-index: 50 !important;
	min-width: max-content !important;
}

/* Responsive: adjust padding on smaller screens */

@media (max-width: 768px)
{
	.translation-notice
	{
		padding: 8px 12px;
		font-size: 0.82rem;
	}
}