/*<meta />*/

@import url('Fonts.css');

@import url('Framework.css');

@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);

body
{
	font-family: Lato, system-ui, sans-serif;
	font-size: 1rem;
	color: #2f2f2f;
}

/* ---------- Links ---------- */

a,
a:link,
a:visited
{
	color: #0071af;
	text-decoration: underline;
	text-underline-offset: 4px;
}

a.codeSnippetCopyButton,
a.codeSnippetCopyButton:link,
a.codeSnippetCopyButton:visited
{
	text-decoration: none;
	color: #656565;
}

a:visited
{
	color: #9b59b6;
}

a:hover
{
	color: #0a3573;
	text-decoration: none;
}

a:active
{
	color: #9b59b6;
	text-decoration: underline;
}

p.RelatedTopics
{
	padding-left: 2.5rem;
	/* calc(var(--space-6) + var(--space-4)) */
	background-image: url('../Images/Icons/icon_CDM.png');
	background-repeat: no-repeat;
}

/* Flare's Editor does not show svg background image */

@media screen
{
	p.RelatedTopics
	{
		background-image: url('../Images/Icons/icon_CDM.svg');
		margin-top: 0.75rem;
		padding-top: 0.25rem;
	}
}

p.RelatedTopics a,
p.RelatedTopics a:link,
p.RelatedTopics a:visited
{
	text-decoration: none;
	color: #2f2f2f;
}

MadCap|toggler	/* Added using Flare's Stylesheet Editor */
{
	mc-image-position: right;
	mc-closed-image: url('../Images/Buttons/chevron-down.svg');
	mc-open-image: url('../Images/Buttons/chevron-up.png');
	color: #0071af;
	text-decoration: underline;
}

MadCap|toggler:hover
{
	color: #0a3573;
	text-decoration: none;
}

a.MCTogglerHead.MCTogglerHotSpot	/* Custom override */
{
	position: absolute;
	top: 0;
	right: 0;
}

MadCap|toggler.ShowAllImages
{
	font-size: 14px;
}

a.MCTogglerHead.MCTogglerHotSpot.togglerShowAllImages	/* Custom override */
{
	position: static;
	text-decoration: underline !important;
}

MadCap|dropDownHotspot
{
	cursor: hand;
	text-decoration: none;
	color: #006600;
}

a.ButtonGhost,
a.ButtonGhost:visited,
MadCap|xref.ButtonGhost,
MadCap|xref.ButtonGhost:visited,
MadCap|codeSnippetCopyButton
{
	text-decoration: none;
	color: #656565;
}

MadCap|xref.ButtonGhost,
MadCap|xref.ButtonGhost:visited,
MadCap|codeSnippetCopyButton
{
	display: inline-block;
	padding: 10px 1rem;
	border-radius: 0.25rem;
}

MadCap|codeSnippetCopyButton
{
	margin-bottom: 10px;
}

a.ButtonGhost:hover,
MadCap|xref.ButtonGhost:hover,
MadCap|codeSnippetCopyButton:hover
{
	color: #000000;
	text-decoration: none;
}

MadCap|xref.ButtonGhost:hover,
MadCap|codeSnippetCopyButton:hover
{
	background-color: #f2f2f2;
}

MadCap|xref.ButtonGhost:active
{
	color: #656565;
	background-color: #f2f2f2;
}

:focus-visible
{
	outline: 2px solid #d7bde2;
	border-radius: 0.125rem;
}

/* ---------- END Links ---------- */
/* ----------- Buttons ---------------- */
/* Set default font and size for buttons */

button
{
	font-family: inherit;
	font-size: 0.875rem;
}

/* Button Primary */

button.Primary
{
	border: none;
	border-radius: 5px;
	background-color: #007abd;
	color: #ffffff;
	padding: 10px 1rem;
}

button.Primary:hover
{
	background-color: #004971;
}

button.Primary > a
{
	color: inherit;
	text-decoration: none;
}

/* ----------- END Buttons ---------------- */
/* ----------- Headings ----------- */

h1
{
	font-weight: 500;
	font-size: 36px;
	line-height: 140%;
	/* 50.4px */
	margin: 0;
}

/* Hide topic heading if it is not in the hero header div */

#mc-main-content > h1:first-child
{
	display: none;
}

@media screen
{
	/* Don't want heading to be white for Print output because there is no Topic Hero image for Print */

	.TopicHero h1
	{
		color: #FFFFFF;
	}
}

h2
{
	font-weight: 600;
	font-size: 24px;
	line-height: 150%;
	/* 36px */
	margin-top: 1em;
	/* padding-bottom 8px + gap 8px + padding-top 8px */
}

h3
{
	font-weight: 600;
	font-size: 20px;
	margin-top: 1em;
}

@media only screen and (max-width: 1250px)
{
	h1
	{
		font-size: 24px;
	}

	h2
	{
		font-size: 20px;
	}
}

/* ----------- END Headings ----------- */

p
{
	/* margin-top: 1em; /* Can't find prescribed setting in Figma */
	margin-bottom: 0;
}

/* ----------- Table Content ----------- */

table p
{
	font-size: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
}

table p:nth-child(n+2)
{
	margin-top: 0.5em;
}

tbody
{
	counter-reset: stepCounter;
	mc-auto-number-format: '{ =0}';
}

/* td.TableCounter p, */

p.TableCounter
{
	/* counter-increment: stepCounter; */
	mc-auto-number-format: '{n+}.';
}

/*
p.TableCounter::before
{
	content: counter(stepCounter) '.';
}
*/

tr.TableStyle-Standard-Body-Counter > td:first-child > p:first-child
{
	counter-increment: stepCounter;
	/* mc-auto-number-format: '{n+}.'; */
}

tr.TableStyle-Standard-Body-Counter > td:first-child > p:first-child::before
{
	content: counter(stepCounter) '.';
}

/* ----------- END Table Content ----------- */
/* ----------- Alerts ----------- */

p.Note,
p.Warning,
p.Danger,
div.NoteHeading	/* p.OtherAlert, */
{
	/* -moz-box-sizing: border-box;
	box-sizing: border-box; */
	background-color: #fafafa;
	border-radius: 10px;
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding: 1rem;
	line-height: 150%;
}

p.Note::before,
p.Warning::before,
p.Danger::before,
div.NoteHeading::before	/* p.OtherAlert::before, */
{
	font-weight: 700;
	height: 24px;
}

p.Note::before,
p.Warning::before,
p.Danger::before	/* p.OtherAlert::before, */
{
	position: absolute;
	left: 1rem;
}

p.Note::before
{
	content: "Note: ";
}

p.Warning::before
{
	content: "Warning: ";
}

p.Danger::before
{
	content: "Warning: ";
}

/*
p.OtherAlert::before
{
	content: "Alert: ";
}
*/

div.NoteHeading::before
{
	content: "More information";
	font-weight: 700;
	height: 24px;
	margin-right: 0.5rem;
}

div.NoteHeading > p
{
	line-height: 150%;
	margin: 0;
	padding: 0;
}

/* Add border colour and positioning of text label (not shown in Flare's Editor due to @media screen) */

@media screen
{
	p.Note,
	p.Warning,
	p.Danger	/* p.OtherAlert, */
	{
		position: relative;
		padding-left: 6rem;
	}

	p.Note::before,
	p.Warning::before,
	p.Danger::before,
	div.NoteHeading::before	/* p.OtherAlert::before, */
	{
		border-left-style: solid;
		border-left-width: 5px;
		padding-left: calc(0.5rem/2);
	}

	p.Note::before,
	div.NoteHeading::before
	{
		border-left-color: #007abd;
	}

	p.Warning::before
	{
		border-left-color: #bb600b;
	}

	p.Danger::before
	{
		border-left-color: #b93d30;
	}
}

/* ----------- END Alerts ----------- */
/* ----------- Lists ----------- */

ol,
ul,
dl
{
	margin-top: 0;
	margin-bottom: 0;
}

/* For Flare's Editor */

ul ul
{
	list-style-type: circle;
}

@media screen
{
	ul
	{
		list-style-image: url('../Images/Icons/icon_dot.svg');
		padding-left: 2.25rem;
	}

	ul ul
	{
		list-style-image: url('../Images/Icons/icon_checkmark-empty.svg');
	}

	li
	{
		padding-left: calc(0.5rem/2);
	}
}

ol
{
	color: #595959;
	padding-left: 25px;
}

ol li p
{
	color: #2f2f2f;
}

ol.Screenshot > li
{
	position: relative;
	padding-right: 2rem;
}

/* ----------- END Lists ----------- */

img
{
	border: none;
	max-width: 100%;
}

span.UI-Term
{
	font-weight: bold;
}

MadCap|codeSnippet
{
	font-size: 1rem;
	border: none;
}

MadCap|codeSnippetBody
{
	background: #fafafa;
	padding: 1rem;
}

img.IconInText
{
	padding-top: 0pt;
	padding-bottom: -3pt;
	padding-left: 0pt;
	padding: 0pt;
	max-width: 0.5cm;
	vertical-align: text-bottom;
	margin-top: -1em;
}

@media only screen and (max-width: 1250px)
{
	MadCap|codeSnippet
	{
		padding-left: 0;
	}

	/* Workaround */

	div.codeSnippet
	{
		padding-left: 0;
	}
}

@media screen
{
	iframe
	{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0px;
		top: 0px;
	}
}

