/*<meta />*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital_wdth_wght@0_75..100_100..900_1_75..100_100..900_display=swap');

@import url('css-variables.css');

@import url('layout.css');

@import url('notices.css');

@import url('RTL/RTL-HTML5-Styles.css');

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

/*AUTHORING STYLES: these are the styles used in the topic content*/

body
{
	color: var(--font-color);
	margin: 5px;
	font-family: var(--font-html);
	font-size: var(--font-size-html);
	line-height: 1.4em;
	font-weight: 300;
	mc-hyphenate: never;
	background-color: var(--background);
}

/*Make an image in this div float left*/

div.ImagesFloatLeft
{
	clear: both;
	float: left;
	margin-right: 10px;
	padding: 5px;
}

/*Make an image in this div float right*/

div.ImagesFloatRight
{
	clear: both;
	float: right;
	margin-left: 10px;
	padding: 5px;
}

/*Container with reduced spacing inside*/

div.TightContent
{
	margin: 0px;
	padding: 0px;
	line-height: 1em;
}

h1
{
	margin-bottom: 0.7em;
	margin-top: 1.1em;
	color: var(--brand);
	font-weight: 500;
	font-size: 1.8em;
	line-height: 1.2em;
}

h2
{
	font-size: 1.3em;
	margin-bottom: 1.1em;
	margin-top: 2.5em;
	color: var(--dark);
	font-weight: 500;
}

/*Level 2 headings inside long articles*/

h2.topic
{
	font-size: 1.3em;
	margin-bottom: 1.1em;
	margin-top: 2.5em;
	color: var(--font-color);
	font-weight: 500;
}

h3
{
	font-size: 1.2em;
	margin-bottom: 1.1em;
	margin-top: 2.2em;
	color: var(--dark);
	font-weight: 500;
}

/*Level 3 headings inside long articles*/

h3.topic
{
	font-size: 1.2em;
	margin-bottom: 1.1em;
	margin-top: 2.2em;
	color: var(--font-color);
	font-weight: 500;
}

h4
{
	font-size: 1em;
	margin-bottom: 1.1em;
	margin-top: 2em;
	color: var(--dark);
	font-weight: 500;
}

/*Default image: no border and max width 100% of the available container space*/

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

/*The element inside this takes up max 50% width of the available space*/

.FiftyPercentMaxWidth
{
	max-width: 50%;
}

/*A popup thumbnail image*/

img.Thumbnail
{
	mc-thumbnail: popup;
}

/*Reduce the size of the image to 18px high*/

img.ReduceButtonSize
{
	max-height: 18px;
	max-width: auto;
}

/*Basic paragraph style*/

p
{
	margin-top: 10px;
	margin-bottom: 10px;
}

/*Procedure intro style*/

p.procedureintro
{
	font-weight: 700;
	margin-top: 1.8em;
	margin-bottom: 0.5em;
	font-size: 1em;
}

/*Include drop-down headings in PDF toc and increase the font size*/

p.whatsnewheading
{
	font-weight: 500;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 1.1em;
}

/*Use for a figure title below the figure*/

p.figtitle
{
	font-weight: 500;
	font-size: 0.85em;
}

/*Center a paragraph in a table*/

p.TableTextCenterDark
{
	color: var(--font-color);
	text-align: center;
}

/*Change a paragraph colour in a table to black*/

p.TableTextDark
{
	color: var(--font-color);
}

/*Set a paragraph in a table to black and bold*/

p.TableTextDarkEmphasis
{
	color: var(--font-color);
	font-weight: 500;
}

/*Style a piece of computer code*/

span.codeph,
code
{
	font-weight: 500;
	font-family: var(--font-code);
	font-size: 1.1em;
}

/*Bold font for text emphasis*/

span.Emphasis
{
	font-weight: 500;
}

/*Table caption*/

caption
{
	mc-auto-number-format: '{b}Table:{/b}  ';
}

/*Styles for a code block*/

p.codeblock
{
	border-left: solid 2px;
	font-family: var(--font-code);
	font-size: 1.2em;
	margin-right: 50%;
	margin-left: 35px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	padding-left: 8px;
	border-left-style: solid;
	border-left-width: 2px;
	border-left-color: var(--dark-blue);
}

/*Styles for an API response*/

p.response
{
	border-left: solid 2px;
	font-family: var(--font-code);
	font-size: 1.2em;
	color: var(--blue);
	margin-right: 50%;
	margin-left: 35px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	padding-left: 8px;
	border-left-style: solid;
	border-left-width: 2px;
	border-left-color: var(--blue);
}

/*Use to style file paths and file names*/

span.filepath
{
	font-weight: 500;
	font-style: normal;
}

/*Use to style cross-refs*/

p.xreff
{
	color: var(--link);
	line-height: 2em;
}

/*Layout for cross-refs in list items*/

li p.xreff
{
	line-height: 1.4em;
}

/*Use for the preface content*/

p.preface
{
	margin-bottom: 1pt;
	margin-top: 2pt;
}

/*Use for the preface headings. Not included in the TOC*/

p.prefaceHeading
{
	font-size: 1.5em;
	font-weight: 300;
	margin-bottom: 8px;
	margin-top: 20px;
	padding-bottom: 10px;
	color: var(--brand);
}

/*Layout for paragraphs in table cells*/

td p
{
	margin-left: 0;
	margin-bottom: 0;
	margin-top: 0;
	font-size: 0.9em;
}

/*Layout for notice headings in table cells*/

table p.safetyheading
{
	margin-bottom: 2px;
}

/*Center a paragraph in a table cell*/

p.tbodycentre
{
	margin-left: 0;
	margin-bottom: 0;
	margin-top: 0;
	font-size: 0.9em;
	text-align: center;
}

/*Use for table head paragraphs in table cells*/

p.thead
{
	font-weight: 500;
	margin-bottom: 5px;
	margin-top: 5px;
	font-size: 0.9em;
	color: var(--font-color);
}

/*Mark up names of UI elements that the user doesn't interact with, such as a window title*/

span.wintitle
{
	font-weight: 500;
}

/*Mark up names of UI elements that the user interacts with*/

span.uicontrol
{
	font-weight: 500;
	font-style: italic;
}

/*Mark up the text the user needs to type*/

span.userinput
{
	font-family: var(--font-code);
	font-size: 1.1em;
}

/*Mark up messages displayed by a system*/

span.systemoutput
{
	font-family: var(--font-code);
	font-size: 1.1em;
}

/*Mark up a series of menu choices*/

span.menucascade
{
	font-weight: 500;
	font-style: italic;
}

/*Lay out the text in an HTML page footer*/

p.footerright
{
	text-align: right;
}

/*Lay out the text in an HTML page footer*/

p.footerleft
{
	font-size: 10pt;
	margin-top: 0px;
}

/*Mark up a term definition*/

span.dt
{
	font-weight: 500;
}

/*Provide examples of correct behaviour*/

p.ulright
{
	margin-bottom: 3pt;
	margin-top: 3pt;
	mc-auto-number-format: 'Correct: ';
	color: var(--green);
	mc-auto-number-offset: 0.5cm;
	mc-auto-number-position: inside-head;
	margin-left: 2.70cm;
}

/*Provide examples of incorrect behaviour*/

p.ulwrong
{
	margin-bottom: 3pt;
	margin-top: 3pt;
	mc-auto-number-offset: 0.50cm;
	color: var(--red);
	margin-left: 2.70cm;
	mc-auto-number-position: inside-head;
	mc-auto-number-format: 'Incorrect:  ';
}

/*Table title paragraph*/

p.ttitle
{
	page-break-after: avoid;
	column-break-after: avoid;
	margin-top: 1.6em;
	margin-bottom: 0.5em;
	font-style: normal;
	font-weight: 500;
	font-size: 1em;
}

/*Additional margin below a table*/

table
{
	margin-bottom: 2.5em;
}

/*Paragraph that precedes a list but not a procedure*/

p.listintro
{
	page-break-after: avoid;
}

span.mc-variable.uicontrol
{
	font-weight: 500;
	font-style: italic;
}

span.mc-variable.wintitle
{
	font-weight: 500;
}

span.mc-variable.dt
{
	font-weight: 500;
}

/*Heading in a safety notice and signal-word*/

p.safetyheading,
p.signal-word
{
	font-weight: 500;
	margin-top: 4px;
}

/* Margin to position signal icon relative to signal word */

p.signal-icon
{
	margin-top: 8px;
	margin-bottom: 0px;
}

/*Contain an image*/

p.fig	/* for image positions */
{
	margin-bottom: 8px;
	margin-top: 8px;
}

/*Contain and center an image*/

p.figcentre
{
	text-align: center;
}

/*Optional style for a link block*/

a.square
{
	color: var(--white);
	font-weight: 500;
	background-color: var(--brand);
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
}

/*Optional style for a link block*/

a.square:hover
{
	color: var(--brand);
	font-weight: 500;
	background-color: var(--white);
	border: solid 1px var(--brand);
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	transition: 0.3s;
}

/*Styles for lists, lists in tables, and items nested in lists*/
/*Layout for lists*/

ol,
ul
{
	margin-top: 10px;
	margin-bottom: 20px;
	margin-left: 10px;
}

/*Custom bullet colour*/

li::marker
{
	color: var(--custom-bullet);
	/*To customise the colour of the bullets,in css-variables.css, change the value of --custom-bullet*/
}

/* Unordered list using an arrow character*/

ul.arrow
{
	list-style-type: '»';
	list-style-image: none;
}

/* Steps for Highlevel descriptions https://css-tricks.com/custom-list-number-styling/ */

ol.highlevel
{
	list-style: none;
	margin-left: 10px;
	margin-bottom: 15px;
	margin-top: 15px;
	counter-reset: hl;
}

/* Only apply special styling to direct li children of .highlevel */

ol.highlevel > li
{
	display: block;
	position: relative;
	margin-left: 50px;
	margin-bottom: 50px;
	margin-top: 50px;
}

ol.highlevel > li::before
{
	content: counter(hl);
	counter-increment: hl;
	font-size: 3em;
	font-weight: 500;
	color: var(--brand);
	padding-top: 0;
	margin-left: -70px;
	top: 10px;
	position: absolute;
}

/* Only apply special styling to direct p children of .highlevel li */

ol.highlevel > li > p
{
	margin-left: 0px;
	margin-bottom: 12px;
	margin-top: 12px;
	font-weight: 300;
}

ol.highlevel > li > p:first-child
{
	font-weight: 500;
}

/*End of Highlevel description list*/
/* Add consistent nested list styling for highlevel */

ol.highlevel li > ol,
ol.highlevel li > ul
{
	padding-left: 10px;
	margin-top: 1px;
	margin-bottom: 1px;
}

/*List items layout*/

li
{
	margin-top: 8px;
	margin-bottom: 12px;
}

/* Ordered list for stepped procedures */

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

.steps li::marker
{
	font-weight: 500;
}

/*List item modification for tables*/

table .steps li::marker
{
	font-weight: 500;
	font-size: 0.9em;
}

/*List items layout*/

.steps li,
ol li ul li,
ul li ol li
{
	margin-left: 0px;
	margin-bottom: 8px;
	margin-top: 8px;
}

/*Layout for paragraphs and divs inside list items*/

.steps li > p,
li > p,
li > div
{
	margin-left: 5px;
	margin-bottom: 0px;
	margin-top: 0px;
}

/*Use alphabetical order in a nested ordered list*/

.steps li > ol
{
	list-style-type: lower-alpha;
	padding-left: 10px;
	margin-top: 1px;
	margin-bottom: 1px;
}

/*Layout for an unordered list nested in the .steps list*/

.steps li > ul
{
	padding-left: 10px;
	margin-top: 1px;
	margin-bottom: 1px;
}

/*Layout for lists in tables*/

table ol,
table ul
{
	margin-top: 3px;
	margin-bottom: 10px;
	margin-left: 7px;
}

/*Layout for .steps lists in tables*/

td .steps li
{
	margin-bottom: 0;
	margin-top: 0;
}

/*Layout for lists in tables*/

table ol p,
table ul p,
table ul li,
table ol li
{
	margin-top: 2px;
	margin-bottom: 2px;
}

/*End of styles for lists*/
/*Styles for cross-refs*/

MadCap|xref
{
	mc-format: 'See {b}{para}{/b}';
}

MadCap|xref.Figure
{
	mc-format: '{paranumonly}';
}

MadCap|xref.Table
{
	mc-format: '{paranumonly}';
}

MadCap|xref.Heading
{
	mc-format: '{i}{paratext}{/i}';
}

MadCap|xref.Section
{
	mc-format: 'Section {i}{paratext}{/i}';
}

MadCap|xref.PlainTitle
{
	mc-format: '{para}';
}

/*End of styles for cross-refs*/
/*WEBSITE LAYOUT AND BRANDING STYLES*/
/*Text links*/

a,
a:link,
a:visited
{
	color: var(--link);
	text-decoration: none;
}

/*Text links on mouse over*/

a:hover,
.xref:hover,
a.MCBreadcrumbsLink:hover
{
	text-decoration: underline;
}

/*Text links in the left-hand nav*/

ul.sidenav li a:hover
{
	color: var(--dark);
	background-color: var(--light-gray);
}

/*Breadcrumbs visited link*/

a.MCBreadcrumbsLink:visited
{
	color: var(--font-color);
}

/*Breadcrumbs link*/

a.MCBreadcrumbsLink
{
	text-decoration: none;
	color: var(--font-color);
}

/*Make the drop-down hotspot a clickable link*/

a.MCDropDownHotSpot
{
	min-width: 100%;
}

/*Styles for the right-hand navigation (topic menu) in topics.*/

div.topicContent
{
	margin-right: 10px;
}

ol
{
	margin-top: 12px;
}

@media (max-width: 1320px) and (min-width: 768px)
{
	div.topicContent
	{
		margin-right: 10px;
		width: 81%;
	}
}

/*Styles used to position the right-hand topic navigation.*/

div.intraTOC
{
	position: sticky;
	float: right;
	margin-top: 55px;
	/*margin-left: 20px;*/
	margin-right: 0;
	margin-bottom: 120px;
	top: 25%;
	bottom: 10%;
	width: 20%;
	overflow-y: auto;
	max-height: calc(100vh - 100px);
	overflow: hidden;
	border-left: 2px var(--dim-gray) solid;
}

@media only screen and (max-width: 1279px)
{
	.off-canvas-wrapper-inner,
	div.main-section
	{
		overflow-y: inherit;
	}

	div.intraTOC
	{
		top: 35% !important;
	}
}

ul.menu._Skins_SideMenu.mc-component
{
	background-color: var(--white);
	color: var(--font-color);
	line-height: 1.5em;
	font-size: 0.95em;
}

ul.menu._Skins_SideMenu.mc-component li > a
{
	color: var(--font-color);
}

/*End of styles for right-hand navigation*/
/*Styles for the Page Nav TOC proxy*/

ul.menu._Skins_ProductMenu.mc-component a,
ul.menu._Skins_ProductMenu.mc-component a:link,
ul.menu._Skins_ProductMenu.mc-component a:visited
{
	color: var(--link);
}

ul.menu._Skins_ProductMenu.mc-component a:hover,
ul.menu._Skins_ProductMenu.mc-component a:active
{
	color: var(--brand);
}

/*Sets the menu proxy on a page not to show the current page title, just its children*/

ul.menu._Skins_ProductMenu.mc-component li > a.selected
{
	display: none;
}

/*End of styles for the Page Nav toc proxy*/
/*Control the look of the breadcrumbs*/

MadCap|breadcrumbsProxy
{
	font-size: 0.8em;
	padding-bottom: 15px;
	margin-bottom: 20px;
	border-bottom-color: transparent;
	mc-breadcrumbs-prefix: ' You are here: ';
	font-style: normal;
}

/*Prevent word breaks in code snippets*/

MadCap|codeSnippetBody
{
	mc-hyphenate: never;
	word-break: keep-all;
}

/*Drop-down styles with SVG arrows*/

MadCap|dropDown
{
	mc-closed-image: url('../../gfx/commongfx/HTML/arrow-right.svg');
	mc-disabled: false;
	mc-open-image: url('../../gfx/commongfx/HTML/arrow-down.svg');
	mc-image-spacing: 10px;
}

/*Drop-down body style and spacing*/

MadCap|dropDownBody
{
	mc-disabled: false;
	margin-left: 30px;
	padding-left: 10px;
	padding-right: 20px;
}

.dropDown h3,
.dropDown h3.topic,
.dropDown h2,
.dropDown h2.topic
{
	margin-top: 0;
}

MadCap|dropDownHead
{
	mc-disabled: false;
	padding-left: 10px;
}

/*End of drop-down layout and spacing*/
/*Change drop-down background on hover*/

.dropDownHead:hover,
div.MCDropDown.MCDropDown_Closed.dropDown:hover
{
	background-color: var(--alabaster);
	transition: 0.3s;
}

/*Improve layout for heading-like classes in drop-down head*/

.dropDownHead > p.procedureintro,
.dropDownHead > p.whatsnewheading
{
	margin: 0px;
}

/*Hide a PNG icon in dropdowns*/

.MCDropDown_Image_Icon
{
	display: none;
}

/*Styles for the drop-down hotspot layout*/

.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage.MCDropDownHotSpot,
.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage.MCDropDownHotSpot
{
	padding-left: 25px;
	margin-left: 5px;
}

.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage
{
	padding-left: 12px;
	padding-top: 12px;
}

.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage
{
	padding-top: 12px;
}

MadCap|dropDownHotspot
{
	mc-disabled: false;
	color: var(--font-color);
	font-weight: 500;
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 15px;
}

.dropDownHotspot:link
{
	padding-top: 5px;
}

/*End of the drop-down hotspot styles*/
/*Style the drop-down border*/

.dropDown
{
	border-radius: 4px;
	border: 1px solid var(--draft-gray);
	margin: 10px;
}

/*Change the drop-down background when open*/

div.MCDropDown_Open
{
	background-color: var(--alabaster);
}

/*Make all drop-down and minitoc links the same colour as main font*/

.dropDownHead a,
.dropDownHead a:active,
.dropDownHead a:hover,
.dropDownHead a:visited,
a.MCDropDownHotSpot_.MCHotSpotImage,
div.MCDropDown.dropDown > span > p > a,
div.MCDropDown.dropDown > span > p > a:hover,
div.MCDropDown.dropDown > span > p > a:visited,
div.MCDropDown.dropDown > span > p > a:active,
div.miniToc a,
div.miniToc a:hover,
div.miniToc a:visited,
div.miniToc a:active
{
	color: var(--font-color);
}

/*End of drop-down styles*/
/*Styles for text pop-ups*/

MadCap|popup
{
	color: var(--brand);
}

MadCap|popup:focus
{
	color: var(--brand);
}

MadCap|popup:hover
{
	color: var(--brand);
}

MadCap|popupHead
{
	color: var(--brand);
	font-weight: 500;
}

/*End of styles for text pop-ups*/
/*Increase the default line height in the prism snippets*/

div.code-toolbar code
{
	line-height: 1.5em;
}

/*Highlight search results*/

span.SearchHighlight
{
	font-weight: 500;
	font-style: normal;
	background-color: transparent;
	border-bottom-style: solid !important;
	border-bottom: 2px var(--draft-gray);
}

/*Position the proxies*/

MadCap|endnotesProxy
{
	border-top-width: 1px;
}

MadCap|endnotesBlock
{
	border-top-width: 1px;
}

MadCap|topicToolbarProxy
{
	margin-bottom: 10px;
}

/*End of the styles for proxies*/
/*Styles for printing out single pages of a portal*/

@media print
{
	/*Fix unwanted page breaks*/

	html,
	body
	{
		height: 98% !important;
		width: 98% !important;
	}

	div.intraTOC
	{
		display: none;
	}

	ul.menu._Skins_SideMenu.mc-component
	{
		display: block;
	}

	/*hide page content for tidy pages */

	div.button-group-container-left,
	div.breadcrumbs
	{
		display: none !important;
	}

	.nav-search-wrapper
	{
		display: none !important;
	}

	p.TopicFooter
	{
		display: none !important;
	}

	p.TopicFooterCopyright
	{
		display: none !important;
	}

	*
	{
		-webkit-print-color-adjust: exact !important;
		color-adjust: exact !important;
	}

	/*improve the printed page layout and breaks*/

	p,
	span
	{
		break-inside: avoid;
		page-break-inside: avoid;
	}

	p
	{
		margin-top: 4pt;
		margin-bottom: 4pt;
	}

	body
	{
		font-size: 10pt;
	}

	h1
	{
		border-bottom-width: 1pt;
		font-size: 20pt;
		margin-bottom: 4pt;
		margin-top: 14pt;
		padding-bottom: 0;
		break-inside: avoid;
		page-break-inside: avoid;
		page-break-after: avoid;
		orphans: 3;
	}

	h2
	{
		font-size: 18pt;
		margin-bottom: 2pt;
		margin-top: 10pt;
		break-inside: avoid;
		page-break-inside: avoid;
		page-break-after: avoid;
		orphans: 3;
	}

	h3
	{
		font-size: 15pt;
		font-weight: 500;
		margin-bottom: 2pt;
		margin-top: 10pt;
		break-inside: avoid;
		page-break-inside: avoid;
		page-break-after: avoid;
		orphans: 3;
	}

	h4
	{
		font-size: 14pt;
		margin-bottom: 2pt;
		margin-top: 10pt;
		break-inside: avoid;
		page-break-inside: avoid;
		page-break-after: avoid;
		orphans: 3;
	}

	h5
	{
		font-size: 13pt;
		margin-bottom: 6pt;
		margin-top: 10pt;
		break-inside: avoid;
		page-break-inside: avoid;
		page-break-after: avoid;
		orphans: 3;
	}

	li
	{
		margin-top: 0pt;
	}

	ol
	{
		margin-top: 0pt;
	}

	img
	{
		page-break-inside: avoid;
		max-width: 60%;
	}

	div.danger,
	div.warning,
	div.caution,
	div.notice,
	div.tip
	{
		page-break-inside: avoid;
	}

	table
	{
		page-break-inside: avoid;
		margin: 16px 0;
	}

	tr
	{
		page-break-inside: avoid;
		page-break-after: auto;
		page-break-before: auto;
	}

	p.TopicFooterFeedback,
	.footer
	{
		display: none;
	}

	div.topicContent,
	div.body-container,
	div#mc-main-content
	{
		min-width: 85%;
		max-width: 95%;
	}

	MadCap|dropDown
	{
		mc-closed-image: none;
		mc-open-image: none;
		background-color: white;
	}

	.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage.MCDropDownHotSpot
	{
		background-image: none;
	}

	/*Indent body content */

	div#mc-main-content
	{
		margin-left: 2cm;
		margin-right: 2cm;
	}

	/*Display this text in print ouput only*/

	span.print
	{
		display: contents !important;
	}

	/*Force display header in print*/

	body nav.title-bar.tab-bar
	{
		display: block !important;
	}

	.title-bar-container
	{
		display: block !important;
	}

	div.print-header
	{
		display: block;
		color: var(--white);
		font-weight: 500;
		background-color: var(--brand);
		width: 100%;
		padding: 10px;
	}

	div.print-header img
	{
		margin-right: 10px;
	}

	/*decrease the right-hand margin in print*/

	div.off-canvas-content.inner-wrap
	{
		margin-right: -75px;
	}
}

/*SVG hamburger - overwrites the basic Flare skin png file. NOT used with the current default header setup.*/

@media only screen and (max-width: 1279px)
{
	.title-bar .menu-icon span
	{
		height: 48px;
		width: 48px;
		display: block;
		background: transparent url('../../gfx/commongfx/HTML/hamburger_icon.svg') no-repeat center center;
		margin-top: 30px;
	}
}

/*custom toolbar and search icons*/

._Skins_TopicToolBar.mc-component .button.home-icon-button .button-icon
{
	background: url('../../gfx/otodata-images/icons/otodata-home.svg') !important;
}

._Skins_TopicToolBar.mc-component .button.custom-print-button .button-icon
{
	background: url('../../gfx/otodata-images/icons/otodata-print.svg') !important;
}

._Skins_TopicToolBar.mc-component .button.previous-topic-button .button-icon
{
	background: url('../../gfx/otodata-images/icons/otodata-previous.svg') !important;
}

._Skins_TopicToolBar.mc-component .button.next-topic-button .button-icon
{
	background: url('../../gfx/otodata-images/icons/otodata-next.svg') !important;
}

._Skins_TopicToolBar.mc-component .button.browse-back-button .button-icon
{
	background: url('../../gfx/commongfx/HTML/toolbar/previous.svg') !important;
}

._Skins_TopicToolBar.mc-component .button.browse-next-button .button-icon
{
	background: url('../../gfx/commongfx/HTML/toolbar/next.svg') !important;
}

._Skins_TopicToolBar.mc-component .button.share-article-button .button-icon
{
	background: url('../../gfx/commongfx/HTML/toolbar/share-article.svg') !important;
}

._Skins_TopicToolBar.mc-component .button.download-pdf-button .button-icon
{
	background: url('../../gfx/otodata-images/icons/PDF-download-arrow.svg') !important;
}

/* SVG filter icon for search results filtering. To use it, uncomment the whole piece until 'magnifying glass'*/

/*
.search-bar .search-filter
{
	background: url(images/filter.svg) no-repeat center center;
}

.search-bar .search-filter.selected
{
	background: url('images/filter.svg') no-repeat center center var(--alabaster);
}

.search-bar .search-filter:hover
{
	background: url('images/filter.svg') no-repeat center center var(--alabaster);
}*/

/*remove the dotted line around the filter icon*/

/*.search-filter
{
	border: none !important;
    height: 1.9em !important;
    margin-top: 0.05em !important;
    margin-bottom: 0.05em !important;
	
}*/

/*SVG magnifying glass for search. If using custom header, comment this one out.*/

.search-bar.search-bar-container .search-submit
{
	background: url('../../gfx/commongfx/HTML/toolbar/search.svg') no-repeat center center !important;
	height: 28px;
	margin: 2px;
}

/*To reposition the magnifying glass, change these values*/

.search-bar.search-bar-container._Skins_HomeSearchBar.mc-component .search-submit
{
	width: 28px;
	height: 28px;
}

/*SVG logo. Overwrites the basic Flare skin png file. NOT used with the current default header setup.*/

/*.title-bar-layout a.logo
{
	background: url('') no-repeat;
	background-size: contain;
}*/

/*Back to top button*/

#backToTop
{
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 21px;
	border-radius: 4px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('../../gfx/otodata-images/icons/otodata-top.svg');
}

/*Styles for a modern left-hand nav. To get the default left-hand nav back, comment those out*/
/*Left-hand nav custom hover*/

ul.sidenav li a
{
	border: none;
	font-family: var(--font-html);
}

ul.sidenav li a.selected
{
	background-color: var(--draft-gray);
	color: var(--dark);
}

.sidenav-wrapper
{
	background-color: var(--light-gray);
	padding-bottom: 50px;
}

/*Left-hand nav chevrons*/

.is-accordion-submenu-parent > a span.submenu-toggle
{
	content: url('../../gfx/commongfx/HTML/arrow-down.svg');
	display: block;
	width: auto;
	height: auto;
	border: none;
	position: absolute;
	top: 50%;
	margin-top: -4px;
	right: 0.6667rem;
}

@media only screen and (max-width: 1279px)
{
	.is-accordion-submenu-parent > a span.submenu-toggle
	{
		content: url('../../gfx/commongfx/HTML/arrow-down-grey.svg');
		display: block;
		width: auto;
		height: auto;
		border: none;
		position: absolute;
		top: 50%;
		margin-top: -4px;
		right: 0.6667rem;
	}

	/*End of left-hand nav styles*/
	/*Search results page styles*/

	#resultList h3.title > a
	{
		color: var(--link);
	}

	#resultList h3.title > a:visited
	{
		color: var(--link);
	}

	#resultlist url
	{
		color: var(--light);
	}

	#resultList .url cite
	{
		color: var(--dark);
		font-size: 0.8em;
		line-height: 1.5em;
		font-style: normal;
	}
}

/*Footer white space styles*/

.footer
{
	margin-top: 15em;
}

/*Inline icon style*/

img.inlineicon
{
	height: 20px;
	margin-bottom: -4px;
}

/*Line length settings for the main topic area*/

@media only screen and (min-width: 320px)
{
	div#mc-main-content
	{
		width: 98%;
	}
}

/* Smartphones, iPhone, portrait 480x320 phones */

@media only screen and (min-width: 641px)
{
	div#mc-main-content
	{
		width: 95%;
	}
}

/* Portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */

@media only screen and (min-width: 961px)
{
	div#mc-main-content
	{
		width: 90%;
	}
}

/* Tablet, landscape iPad, lo-res laptops ands desktops */

@media only screen and (min-width: 1025px)
{
	div#mc-main-content
	{
		width: 85%;
	}
}

/* Big landscape tablets, laptops, and desktops */

@media only screen and (min-width: 1281px)
{
	div#mc-main-content
	{
		width: 75%;
	}
}

/* Hi-res laptops and desktops */

.paraHeading
{
	font-weight: 500;
	font-size: 1em;
}

/*Optional sticky table header for long tables*/

thead.stickyheader
{
	position: sticky;
	top: 0;
	box-shadow: inset 1px 1px #000, 0px 1px #000;
}

/*Glossary styles*/
/*Links on the glossary topic page*/

ul.MCGlossaryProxy_0
{
	border: none;
}

a.GlossaryPageLink
{
	font-weight: 500;
	color: var(--font-color);
}

a.GlossaryPageLink:hover
{
	text-decoration: none;
}

/*Inline terms in the topics*/

a.MCTextPopup.MCTextPopupHotSpot
{
	color: var(--brand);
}

/*Styles for the glossary term pop-up*/

span.MCTextPopupBody.popupBody
{
	background-color: #fefefe;
	border-radius: 2px;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,.4);
}

/*Hide the triangular arrow between the pop-up and the term*/

span.MCTextPopupArrow
{
	display: none;
}

/*Replace the retro style glossary arrow with an SVG question mark*/

.MCTextPopup_Closed.MCTextPopupHotSpot_.MCTextPopupHotSpot_Popup,
.MCTextPopup_Open.MCTextPopupHotSpot_.MCTextPopupHotSpot_Popup,
.MCTextPopup_Closed.MCTextPopupHotSpot_,
.MCTextPopup_Open.MCTextPopupHotSpot_
{
	background-image: url('../../gfx/commongfx/HTML/term.svg');
	padding-right: 0px;
}

/*Limit the space between the term and the question mark*/

a.MCTextPopup.MCTextPopupHotSpot.MCTextPopupHotSpot_.MCTextPopupHotSpot_Popup .MCHelpControl_Image_Icon
{
	width: 14px;
}

/*Define the look for inline HTML tags used in the xrefs*/

b
{
	font-weight: 500;
}

/*Define font-weight for the left-hand nav*/

.sidenav-container
{
	font-weight: 400;
}

/*In Search bar, use the default font for the search placeholder text*/

input.search-field.needs-pie
{
	font-family: var(--font-html);
}

/*a group of styles for alignment - topic toolbar and elements in the header*/

.button-group-container-left
{
	margin-right: -4px;
}

@media only screen and (max-width: 1269px)
{
	.search-bar._Skins_HomeSearchBar.mc-component
	{
		width: auto;
	}

	.button-group-container-left
	{
		margin-right: calc(1em - 4px);
	}
}

@media only screen and (min-width: 1270px)
{
	.body-container
	{
		overflow: scroll;
	}
}

/*end of alignment styles*/
/* Adds a circle around the number 1-99. This is used for the callouts in the callout table */
/* Adjust the border and background color and color of text to ensure contrast. These values are changed in the css variable file */

p.CircleBackground
{
	border-radius: 50%;
	border: none;
	color: var(--white);
	background: var(--brand);
	text-align: center;
	margin-bottom: 0px;
	margin-top: 0px;
	mc-hyphenate: never;
	margin-left: 0;
	font-size: 0.75em;
	font-weight: bold;
	line-height: 22px;
	height: 22px;
	width: 22px;
}

/*Optional styles for removing the navigation outline from drop-down heads on mobiles. Added because in Safari, the drop-down heads were outlined on tapping. Default: DISABLED! Enabling this can impair accessiblity. 

@media (min-width:481px){
.dropdownHeading > a:focus-visible
{
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

}


/*This changes the drop-down head outline style on tablets and PC to a more subtle - to make the Safari experience smoother.
.dropdownHeading > a:focus-visible
{
outline: none;
-webkit-box-shadow: 0px 0px 5px -2px rgba(49, 49, 50, 1);
-moz-box-shadow: 0px 0px 5px -2px rgba(49, 49, 50, 1);
box-shadow: 0px 0px 5px -2px rgba(49, 49, 50, 1);
}

*/

div.MCDropDown.MCDropDown_Closed.dropDown,
div.MCDropDown.MCDropDown_Open.dropDown
{
	position: relative;
}

/*Responsive videos*/

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