/*<meta />*/

/* <meta />*/
/* meta conditions="" /> */
/* NCR Voyix Master stylesheet - supports HTML and PDF formats */
/* If you have an additional project stylesheet, add the following line in your stylesheet to import the guild stylesheet at this location: */
/* @import url('NCR-Styles.css'); */

@import url('Fonts.css');

@import url('../TableStyles/NCRTable.css');

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

/* CSS variables, mostly branding elements */

:root
{
	--pageBackground: var(--Lightest);
	--bodyTextColor: var(--Dark);
	--headingFont: var(--FontSecondary);
	/* headingFont is the best match for a bold weight for Jost.Refers to 'Jost SemiBold'. Defining the headings with plain 'Jost' and a style property of "bold" renders blurry in Edge and Chrome. Can be paired with font weight 600 */
	--skinHeader: var(--Primary);
	--menuPane: var(--Lightest);
	--menuTextColor: var(--Dark);
	/*only one image is needed for the menu expander, becasue it's rotated using a css style */
	--menuExpander: var(--MenuArrow);
	/*--pageFooter: ; <--left for future branding efforts*/
	--imageBorder: #c0c0c0;
	--caution: #F8DABB;
	--example: #D1E5CF;
	--important: #C9E3F9;
	--note: #D1E5CF;
	--reference: #D1E5CF;
	--tip: #D1E5CF;
	--warning: #FAD7D6;
	--exampleImage: url('../Images/Template/notices/Example.svg');
	--tipImage: url('../Images/Template/notices/Tip.svg');
	--noteImage: url('../Images/Template/notices/Note.svg');
	--importantImage: url('../Images/Template/notices/Important.svg');
	--cautionImage: url('../Images/Template/notices/Caution.svg');
	--warningImage: url('../Images/Template/notices/Warning.svg');
	--referenceImage: url('../Images/Template/notices/Reference.svg');
	--printFontSize: 11pt;
	font-size: 16px;
}

/* Common Styles - these styles are shown in the "default" medium layout in the Flare content editor. Style properties in this section are inherited by HTML and Print media. */

b	/* required for bold to look sharp when renedered in Chrome and Edge browsers. <b> applied to Jost normal is fuzzy. */
{
	font-family: 'Jost SemiBold';
	font-weight: 600;
}

div.noBreak
{
	page-break-inside: avoid;
}

/* p styles */

p
{
	font-family: var(--FontFamily);
	color: var(--bodyTextColor);
	white-space: normal;
	font-weight: 400;
	font-size: 1rem;
	margin-left: 0;
	padding: 0px;
	mc-hyphenate: never;
}

p.product	/* Product name on the HTML Home Page and PDF cover page. */
{
	font-family: var(--FontFamily);
	font-size: 3.2rem;
}

p.docTitle
{
	font-family: var(--FontFamily);
	font-size: 2.5rem;
}

p.productSubTitle
{
	font-family: var(--FontSecondary);
	font-size: 1.625px;
}

/* doc number/version/release number/release date/footer located on HTML Home page and PDF Title Page */

p.docNumber
{
	/*font-size: 1.25rem;*/
	font-size: 15pt;
}

/* p - legal statements, copyright, trademark, FCC, EMC */

p.legal
{
	font-weight: 400;
	font-size: 0.75rem;
	line-height: 1rem;
}

p.revTab	/* p - revision table */
{
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

p.caption
{
	font-weight: 400;
	font-size: 0.75rem;
	font-style: italic;
	page-break-before: avoid;
}

p.a:link
{
	font-family: var(--FontSecondary);
	font-weight: 600;
	text-decoration: underline;
}

a,
a:link,
a:hover,
a:visited,
p > a:link,
p > a:visited,
p > a:hover,
td > a:link,
td > a:visited,
td > a:hover
{
	color: var(--Primary);
}

a:link
{
	text-decoration: underline;
}

a:hover
{
	text-decoration: underline;
}

p > a:link
{
	font-family: var(--FontSecondary);
	font-weight: 600;
	text-decoration: underline;
}

/* glossary and index entries*/

.glossaryTerm,
.glossaryDesc,
.index
{
	font-family: var(--FontFamily);
}

.glossaryDesc
{
	font-weight: 400;
	line-height: 1rem;
	border: none;
}

MadCap|glossaryTerm
{
	/*navy blue*/
	color: #000080;
	font-size: 1rem;
	background-image: none;
	mc-closed-image: none;
	mc-image: none;
	mc-open-image: none;
}

MadCap|glossaryProxy
{
	font-size: 1rem;
}

.GlossaryPageHeading
{
	font-family: var(--FontSecondary);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--Primary);
	padding-bottom: 6px;
}

.GlossaryPageLink
{
	font-size: 1.1rem;
}

.GlossaryPageEntry
{
	font-weight: 400;
	list-style-type: none;
}

/* Heading styles */

h1,
h2,
h3,
h4,
h5,
h6
{
	font-family: var(--headingFont);
	font-weight: 600;
	mc-hyphenate: never;
	color: var(--Dark);
}

h2,
h3,
h4,
h5,
h6
{
	margin-bottom: 10px;
	margin-top: 12px;
	page-break-after: avoid;
}

h1
{
	font-size: 2.25rem;
	border-bottom-style: solid;
	border-bottom-color: var(--Primary);
	border-bottom-width: 3px;
	margin-bottom: 30px;
	page-break-before: always;
	/*VERIFY-- need to check with authors if this is what we really want*/
}

h2
{
	font-size: 2.0rem;
}

h3
{
	font-size: 1.8rem;
}

h4
{
	font-size: 1.5rem;
}

h5	/*why are the margins different on H5 and not H6?? Need to VERIFY */
{
	font-size: 1.1667rem;
	margin-top: 5.5px;
	margin-bottom: 6px;
}

h6
{
	font-size: 1.1667rem;
	font-style: italic;
}

h1.noBreak	/* use when you have multiple h1s on one page */
{
	page-break-before: avoid;
}

h1.Appendix	/* VERIFY: Do we need this style to be different from h1??*/
{
	font-weight: 700;
	font-size: 1.5rem;
	margin-top: 0;
	color: var(--Primary);
}

.noToc	/* prevents the heading from appearing in the PDF table of contents. Use for common sections that do not appear in hierarchical order, e.g. "Problem," "Solution." */
{
	mc-heading-level: 0;
}

p.procedureIntro	/* MS Style Run-in "heading." Use for heading that introduces procedures. Same size as body text, but bold.*/
{
	font-family: var(--FontSecondary);
	font-weight: 600;
}

/* code snippet styles */

.code,
.code1,
.code2,
.code3,
.codeBlock,
.codeBlock1,
.codeBlock2,
.codeBlock3
{
	overflow-wrap: break-word;
	word-wrap: break-word;
	mc-hyphenate: never;
	font-size: 0.875rem;
	font-family: 'Courier New', monospace;
}

.code,
.code1,
.code2,
.code3
{
	background-color: #E9ECEF;
	padding-top: 6px;
}

.codeTxt
{
	font-size: 1.04rem;
	font-family: 'Courier New', monospace;
}

.codeBlock,
.codeBlock1,
.codeBlock2,
.codeBlock3
{
	background-color: #E9ECEF;
	background-repeat: no-repeat;
	background-position: 4px 4px;
	border: 1px solid #B3BBC2;
	padding: 6px;
	border-radius: 6px;
	font-size: 1rem;
	margin-bottom: 10px;
	margin-top: 10px;
}

.codeSnippetBody,
.codeHeaderSm,
.codeBlock,
.codeHeader
{
	line-height: 1.3rem;
}

.codeSnippetCaption,
.codeHeader,
.codeHeader1,
.codeHeader2,
.codeHeader3,
.codeHeaderSm
{
	background-color: #E0E0E0;
	border: 1px solid #B3BBC2;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	padding: 2px 0 4px 8px;
	line-height: 1.25rem;
	font-family: var(--FontFamily);
	text-decoration: none;
}

.codeSnippetCaption,
.codeHeader,
.codeHeader1,
.codeHeader2,
.codeHeader3
{
	border-right: none;
	margin-top: -7px;
	margin-left: -7px;
	margin-right: -5px;
}

.codeBlock > .codeSnippetBody
{
	margin-left: 16px;
}

.codeBlock
{
	line-height: 1.25rem;
}

.codeSnippetCopyButton,
.copyButton
{
	padding-top: 3px;
	padding-left: 6px;
	padding-right: 6px;
	padding-bottom: 3px;
	border: solid 1px #9CAEA9;
	border-radius: 6px;
	font: inherit;
	border-width: thin;
}

a.codeSnippetCopyButton,
a.codeSnippetCopyButton:visited
{
	opacity: 0.7;
	text-decoration: none;
	color: var(--Darkest);
	border-width: thin;
}

a.codeSnippetCopyButton:hover
{
	color: var(--Darkest);
	opacity: 1;
	text-decoration: underline;
}

/* Default medium notices (admonitions) */

div.notice-caution,
div.notice-example,
div.notice-exampleNoColor,
div.notice-important,
div.notice-note,
div.notice-reference,
div.notice-tip,
div.notice-warning
{
	mc-auto-number-class: NoticeLineBreak;
	/*goes with span element below*/
	background-repeat: no-repeat;
	/*padding-left affects the space between the icon and the word Note*/
	padding-left: 40px;
	/*position of the icon:*/
	background-position: 9px 6px;
	/* padding is the space between the notice label and the border, when notes are styled using borders*/
	padding-top: 6px;
	padding-right: 12px;
	padding-bottom: 6px;
	page-break-inside: avoid;
	/*margin is the space between the border (if used) and the paragraph or item above it. If not using solid borders, the margin and padding are added together to make the total space between the note and the item above it. In this case, 16px.*/
	margin-top: 10px;
	/*width: 90%;*/
	border-radius: 8px;
}

/* new line after the Notice label so that the body of the note starts beneath the label instead of beside it */

span.NoticeLineBreak::after
{
	content: "\A";
	white-space: pre;
}

div.notice-caution
{
	mc-auto-number-format: '{b}Caution\A';
	background-image: var(--cautionImage);
	background-color: var(--caution);
	/*border: solid 2px var(--caution);*/
}

div.notice-example
{
	mc-auto-number-format: '{b}Example\A';
	background-image: var(--exampleImage);
	background-color: var(--example);
	/*border: solid 2px var(--example);*/
}

div.notice-exampleNoColor
{
	mc-auto-number-format: '{b}Example\A';
	background-image: var(--exampleImage);
}

div.notice-important
{
	mc-auto-number-format: '{b}Important\A';
	background-image: var(--importantImage);
	background-color: var(--important);
	/*border: solid 2px var(--important);*/
}

div.notice-note
{
	mc-auto-number-format: '{b}Note\A';
	background-image: var(--noteImage);
	background-color: var(--note);
	/*border: solid 2px var(--note);*/
}

div.notice-reference
{
	mc-auto-number-format: '{b}Reference\A';
	background-image: var(--referenceImage);
	background-color: var(--reference);
	/*border: solid 2px var(--reference);*/
}

div.notice-tip
{
	mc-auto-number-format: '{b}Tip\A';
	background-image: var(--tipImage);
	background-color: var(--tip);
	/*border: solid 2px var(--tip);*/
}

div.notice-warning
{
	mc-auto-number-format: '{b}Warning\A';
	background-image: var(--warningImage);
	background-color: var(--warning);
	/*border: solid 2px var(--warning);*/
}

/* Default medium list styles */

ol,
ul,
li
{
	font-family: var(--FontFamily);
	color: var(--bodyTextColor);
	font-weight: 400;
	mc-hyphenate: never;
}

body-container li
{
	max-width: 85%;
}

li > p.caption
{
	margin-bottom: 6px;
	margin-top: -10px;
}

/* list - bullet */

li.b1
{
	list-style-type: disc;
}

li.b2
{
	list-style-type: circle;
}

li.b3
{
	list-style-type: square;
}

/* list - number */

li.n1,
li.n2,
li.n3
{
	list-style-position: outside;
}

li.n1
{
	list-style-type: decimal;
}

li.n2
{
	list-style-type: lower-alpha;
}

li.n3
{
	list-style-type: lower-roman;
}

/* list - letter */

li.l1
{
	list-style-type: upper-alpha;
}

li.l2
{
	list-style-type: upper-alpha;
}

li.l3
{
	list-style-type: lower-alpha;
}

/* list - steps */

li.s1,
li.s2,
li.s3
{
	list-style-type: decimal;
	list-style-position: outside;
	/*this is the default css position*/
}

/* list - continue */

li.lc,
li.lc1,
li.lc2,
li.lc3
{
	list-style: none;
}

li > div.notice-note,
li > div.notice-caution,
li > div.notice-tip,
li > div.notice-warning,
li > div.notice-example,
li > div.notice-exampleNoColor,
li > div.notice-important,
li > div.notice-reference
{
	margin-top: 10px;
}

/* definition lists */

dl
{
	font-family: var(--FontFamily);
	padding: 0;
}

/* inline def list format */

div.inLine dl
{
	border-bottom: solid 1px #000000;
}

div.inLine dl > dt
{
	font-family: var(--FontSecondary);
	font-weight: 600;
	line-height: 1.2em;
	clear: left;
	float: left;
	margin: 0;
	padding: 5px;
	border-top: solid 1px #000000;
}

div.inLine dl > dd
{
	margin: 0;
	padding: 5px;
	border-top: solid 1px #b9bec1;
}

div.inLine dt + dd
{
	border-top: solid 1px #000000;
}

/* nested def list format */

div.nested dl > dt
{
	font-family: var(--FontSecondary);
	font-weight: 600;
	margin: 0;
	padding: 5px;
	line-height: 1.2em;
	/* border-top: solid 1px #000000; */
}

div.nested dl > dd
{
	margin: 0;
	padding: 5px;
}

.dd1st
{
	border-top: #000000 1px solid;
}

.dlCenter
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.dropDownTS
{
	margin-left: 20px;
	padding-left: 4px;
	background-color: #dee5ed;
	padding-top: 4px;
	padding-bottom: 4px;
}

/* Default medium Image styles. Online images should be defined in pixel units, but print sizes in picas or points. */

img
{
	max-width: 100%;
	/* so that images don't get cut off at the right edge of the HTML screen or PDF page. Makes images responsive when resizing browser window.  Note that for numbered and bulleted lists, 100% is relative to the container size and not to the whole page/screen. */
	height: auto;
	/* maintains aspect ratio for all image sizes when they resize to the specified width or with browser resizing */
	margin-top: 12px;
	margin-left: 0px;
}

p > img
{
	margin: 0;
}

img.brd
{
	border: solid 1px var(--imageBorder);
}

img.left	/* what is this used for? margin is same as regular image style. Need to VERIFY */
{
	margin-left: 0px;
}

img.center	/*  used on Home Page? Need to VERIFY */
{
	margin-left: auto;
	margin-right: auto;
	display: block;
}

img.insidetext
{
	line-height: 10px;
	vertical-align: baseline;
	width: 20px;
	margin-top: -4px;
	margin-bottom: -3px;
}

img.icon
{
	position: relative;
	/*why?? VERIFY*/
	top: 6px;
	/* why top position? Was this style used before for the admonition icons? VERIFY */
	width: 36px;
	/* width: 30px;*/
	height: auto;
	margin-right: 4px;
	margin-top: -2px;
}

img.small1
{
	width: 80px;
	height: auto;
}

img.small2	/* proposed for barcodes and QR codes */
{
	width: 288px;
	height: auto;
}

img.medium1	/* proposed for receipts and small informational messages */
{
	width: 352px;
	height: auto;
}

img.medium2	/* proposed for POS Screens AND Dialog boxes */
{
	width: 576px;
	height: auto;
}

img.large
{
	width: 800px;
	height: auto;
}

img.fullWidth	/* use for edge-to-edge images */
{
	max-width: 100%;
	height: auto;
	/*  min-width: 480px;  so that responsive images don't get too small in mobile size - NEED TO FIGURE THIS OUT (cannot use with icons and image styles < 480 px at the 3rd list level) */
}

@media HTML
{
	.main-section
	{
		background-color: var(--pageBackground);
	}

	/*	.body-container /* I think this was for the DRAFT watermark that we no longer have. Can delete??
	{
		background-position: center;
		background-repeat: no-repeat;
		padding-left: 1em;
		padding-right: 1em;
		overflow: auto;
	}*/

	/*	#mc-main-content  INVESTIGATE: see if the same can be accomplished w/ skin main area margin or padding?? Yes, don't need.
	{
		margin-left: auto;
		margin-right: auto;
		width: 98%;
	}*/

	#content-section	/* INVESTIGATE: this is the web page main section where the content goes - hashtag IDs are unique to a single item on the HTML page - find out what the purpose is to see if we still need it */
	{
		margin: 0 auto;
		padding-bottom: 50px;
		text-align: center;
	}

	p
	{
		margin-top: 6px;
		margin-bottom: 6px;
		line-height: 1.6rem;
	}

	/* HTML medium Home Page items */

	p.Brand
	{
		margin-top: 160px;
		margin-bottom: 8px;
	}

	p.product
	{
		color: var(--Primary);
		padding-top: 30px;
		padding-bottom: 30px;
		line-height: 3.5rem;
	}

	p.docTitle
	{
		color: var(--Primary);
		margin-left: 0;
		line-height: 3.5rem;
	}

	div.release
	{
		margin-top: 50px;
		font-size: 1.25rem;
	}

	.alertBox	/*what is this for? Can we delete it??*/
	{
		height: 30px;
		margin-top: 6px;
	}

	.codeBlock
	{
		margin-top: 10px;
		width: 90%;
	}

	/* HTML medium Lists */

	ol,
	ul
	{
		margin-top: 6px;
	}

	li
	{
		padding: 4px 0 4px 0;
	}

	li > a
	{
		color: var(--Primary);
	}

	li > .codeBlock.codeSnippet.codeSnippetcodeBlock
	{
		margin-top: 10px;
	}

	li > .codeBlock > .codeSnippetCopyButton,
	li > .codeBlock > .copyButton
	{
		margin-top: 0;
	}

	li > p > img
	{
		margin-top: 10px;
	}

	div.inLine dl > dt
	{
		width: 25%;
	}

	div.inLine dl > dd
	{
		margin-left: 25%;
	}

	div.nested dl > dd
	{
		margin-left: 5%;
	}

	/* HTML medium Code Snippets */

	.code1,
	.codeBlock1,
	.codeHeader1
	{
		margin-left: 16px;
	}

	.code2,
	.codeBlock2,
	.codeHeader2
	{
		margin-left: 32px;
	}

	.code3,
	.codeBlock3,
	.codeHeader3
	{
		margin-left: 48px;
	}

	.codeHeaderSm
	{
		margin-left: -6px;
		margin-right: -6px;
		padding-top: 4px;
		margin-top: -7px;
		line-height: 1.5rem;
	}

	/* Skin overrides */
	/* START of Resizable menu pane solution in full-size browser. From MadCap Flare blog. */

	.sidenav-wrapper
	{
		/* order ensures that the sidenav-wrapper comes before the -border in sidenav-layout
flex row */
		order: 1;
		/* overflow avoids horizontal scrolling on overflow. I think this applies when you don't have menu wrap turned on in the skin, but I've disabled it, becuase I think that the user should decide whether they want to scroll horizontally on long menu names or expand the pane manually.
    overflow-x: hidden; */
	}

	.nav-border
	{
		/* resizable nav-border between nav menu and body content added via nav-resize.js script. ACTION ITEM: Change to branding variable background color grey */
		background-color: #e7e7e7;
		border-width: 1px;
		border-style: outset;
		/* ensure nav-border comes between sidenav-wrapper and body-container in
sidenav-layout flex row */
		order: 2;
		/* allow horizontal (ew= east-west) resizing only */
		cursor: ew-resize;
		/* don't allow nav-border to grow or shrink with browser window resizing, and make it 3px wide */
		flex: 0 0 3px;
		/* ensure that text isn't selected while the mouse is being dragged */
		user-select: none;
	}

	.body-container
	{
		/* ensure body-container comes after nav-border in sidenav-layout
flex row */
		order: 3;
	}

	/* creates a triangle/chevron next to the border of the menu pane to show visually that it can be expanded. The illusion of the chevron is created with css border properties only and no image file. To create the chevron, we create a top and right border line and rotate them 45 o clockwise.*/

	.nav-border::before
	{
		content: "";
		/*content is required for the rest of the css to be applied. Leave empty for the chevron solution. Add a url to an image file to use an icon image instead of borders. */
		border-top: solid 2px;
		border-right: solid 2px;
		position: fixed;
		margin-top: 38vh;
		margin-left: 1px;
		width: 8px;
		height: 8px;
		opacity: 20%;
		/*opacity is optional; you could change the border color instead*/
		transform: rotate(45deg);
	}

	/* optional solution: same as above, but with a solid triangle instead of a chevron. 
.nav-border::before 
{
    content: ""; 
	color: #898989;
    border: solid 6px transparent;
	border-left-color: #898989; <-- border-left makes the triangle point to the right
    position: fixed;
    margin-top: 38vh;
    margin-left: 2px;
    width: 0;  <-- must include width and height properties, both at zero
    height: 0;
	opacity: 25%; 
}
*/

	/* END of Resizable Menu Pane soluion */

	/* ._Skins_HTML5_Side nav.title-bar  --you can add any color and width border at the bottom of the online page header (called nav title bar) - provided by Flare Support. Saving this code in case it's ever needed.
	{
		border-bottom: solid 5px #000000;
	} */

	/* START of Solution to place the menu item triangle to the left of the menu items in the side nav pane */

	.is-accordion-submenu-parent > a span.submenu-toggle-container	/* places the expandable triangle icon to the left of the menu items instead of the Flare default, which is on the right */
	{
		left: -22px;
	}

	.is-accordion-submenu-parent > a span.submenu-toggle	/* replaces the default image used for the expand/collapse menu item triangle */
	{
		content: var(--menuExpander);
		border: none;
		/* this and the next line are the properties that made up the shape for the default icon*/
		border-top-style: none;
		top: 50%;
		/* adjsut to center the image vertically */
		width: 10px;
		/* adjust to resize the image/icon */
		height: 10px;
		/* adjust to resize the image/icon */
	}

	.submenu-toggle-container[aria-expanded='true'] > span.submenu-toggle,
	.is-accordion-submenu-parent > a[aria-expanded='true'] > .submenu-toggle-container > span.submenu-toggle	/* rotates the arrow when menu is expanded. The first selector is for web size and the second one is for the fly-away menu pane in mobile/tablet */
	{
		transform: rotate(0.25turn);
	}

	/* END of menu triangle icon solution */

	._Skins_HTML5_Side ul.sidenav ul > a	/* Why is this needed ? Is it b/c links are bold? can we delete it? Might be part of old NCR green template */
	{
		font-weight: normal;
	}

	._Skins_HTML5_Side #resultList h3.title a:link,
	._Skins_HTML5_Side #resultList h3.title a:hover,
	._Skins_HTML5_Side #resultList h3.title a:visited	/* correction for the search results headings that were too large. Need to verify if we still need this with the new Voyix template */
	{
		font-size: 1.3rem;
	}

	._Skins_HTML5_Side #resultList .url cite::before	/* search results page path prefix */
	{
		content: "location: ";
	}

	._Skins_HTML5_Side ul.sidenav ul ul > li > a	/* NEED TO VERIFY - maybe so that the menu doesn't bump up to the main part of the content. Jill wasn't sure. */
	{
		margin-right: 0.65em;
	}

	._Skins_HTML5_Side ul.sidenav ul ul ul ul ul > li > a	/* Menu items that are indented by 5 levels (not counting level 0); skin supports only 4 levels */
	{
		margin-left: 50px;
	}

	._Skins_HTML5_Side ul.sidenav ul ul ul ul ul > li > a
	{
		margin-left: 60px;
	}

	._Skins_HTML5_Side ul.sidenav ul ul ul ul ul ul > li > a
	{
		margin-left: 70px;
	}

	/* SiteMap Proxy override: adds underline to clickable links */

	._Skins_Sitemap.mc-component li.tree-node-leaf
	{
		text-decoration: underline;
	}

	/* HTML medium Cross-references */

	MadCap|xref.NCR-Style
	{
		font-family: var(--FontSecondary);
		font-weight: 600;
		mc-format: '{u}{para}{/u}';
		color: var(--Primary);
	}

	/* online table widths - can also be used for other items that are not tables. can be combined with other classes on an element */

	.otab-100
	{
		width: 100%;
	}

	.otab-90
	{
		width: 90%;
	}

	.otab-80
	{
		width: 80%;
	}

	.otab-70
	{
		width: 70%;
	}

	.otab-60
	{
		width: 60%;
	}

	.otab-50
	{
		width: 50%;
	}

	.otab-40
	{
		width: 40%;
	}

	/* HTML footer */

	footer	/* HTML footer - general portion */
	{
		border-top: 4px solid var(--Light);
		font-size: 0.875rem;
		margin-top: 40px;
	}

	.footer-left	/* copyright - a little box w/n the footer. it's nested section inside footer, can remove if I want */
	{
		margin-top: 14px;
		max-width: 80%;
	}

	.footer-right	/* optional - for a download icon, if needed after the light grey line on the right side, can remove if needed */
	{
		position: relative;
		float: right;
		width: 200px;
		margin-top: -70px;
	}

	/* HTML medium Glossary */

	MadCap|glossaryProxy
	{
		font-family: var(--FontFamily);
		margin-left: 0;
	}

	.GlossaryPageLink,
	.GlossaryPageLink:link,
	.GlossaryPageLink:visited,
	.GlossaryPageLink:hover
	{
		font-family: var(--FontSecondary);
		font-weight: 600;
		color: var(--Darkest);
		cursor: pointer;
		text-decoration: none;
	}

	.GlossaryPageDefinition
	{
		padding-top: 8px;
		margin-left: 30px;
	}

	.glossaryDesc
	{
		font-size: 1rem;
	}

	ul.MCGlossaryProxy_pdf_0
	{
		margin-left: 0;
		border: none;
		margin-top: -20px;
	}

	/* Breadcrumbs */

	MadCap|breadcrumbsProxy
	{
		line-height: 1.5rem;
		mc-breadcrumbs-count: 10;
		mc-breadcrumbs-prefix: '';
		font-family: var(--FontFamily);
		color: var(--bodyTextColor);
		font-size: 1rem;
	}

	/*	span.MCBreadcrumbsPrefix
	{
		display: none;
	}*/

	/*	div.MCBreadcrumbsBox_0
	{
		font-family: var(--FontFamily);
		font-decoration: unset;
		color: var(--bodyTextColor);
		font-size: 1rem;
		 */

	/*	margin-left: 1%;*/

	/*	border-bottom: solid 0px var(--Dark);
	}*/

	/* HTML medium Dropdown styling */

	MadCap|dropDown	/* the arrow images next to the dropDownHead */
	{
		mc-disabled: false;
		margin-bottom: 6px;
		/* IMPORTANT: width has to be specified *before* defining the image url/variable or the arrows won't appear */
		mc-closed-image: width(10px);
		mc-closed-image: var(--ArrowRight);
		mc-open-image: width(10px);
		mc-open-image: var(--ArrowDown);
	}

	MadCap|dropDownHead
	{
		mc-disabled: false;
		display: block;
		font-family: var(--FontFamily);
	}

	MadCap|dropDownHotspot
	{
		mc-disabled: false;
		font-family: var(--FontSecondary);
		font-weight: 600;
		font-size: 1.05rem;
		color: var(--Primary);
	}

	MadCap|dropDownHotspot:link
	{
		background-repeat: no-repeat;
	}

	.dropDownHotspot:link:hover
	{
		color: var(--Darkest);
	}

	MadCap|dropDownBody
	{
		border: none;
		padding-bottom: 8px;
		mc-disabled: false;
		height: auto;
		width: 88%;
		padding-left: 8px;
	}

	MadCap|dropDownBody.Final
	{
		border-bottom: 0px;
	}

	.dropDownTS
	{
		width: 80%;
	}

	/* HTML medium - PDF link and tool tip styling if needed*/

	.pdf
	{
		margin-left: 20px;
	}

	.pdf:before
	{
		content: "";
	}

	.pdf:after
	{
		display: inline-block;
		height: 2.5em;
		width: 2.5em;
		background: url('../Images/Template/adobe-pdf-icon.svg');
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		position: absolute;
		opacity: 0.7;
		margin-left: -10px;
		z-index: 10;
	}

	.pdf:hover:after
	{
		opacity: 1;
	}

	.pdfSlot
	{
		border-radius: 0.375em;
		height: 3.5em;
		color: #293948;
		background-color: #DEE3E8;
		padding-top: 6px;
		width: 60px;
		position: relative;
		float: right;
		margin-top: -80px;
	}

	.tooltip
	{
		display: inline-block;
		margin-left: 10px;
	}

	.tooltip .tooltiptext
	{
		visibility: hidden;
		width: 120px;
		top: 100%;
		left: 50%;
		background-color: var(--Light);
		color: var(--Dark);
		text-align: center;
		border-radius: 6px;
		padding: 5px 0;
		z-index: 1;
		font-size: 0.875rem;
		margin-top: 18px;
	}

	/* search highlight styling */

	span.SearchHighlight1,
	span.SearchHighlight5,
	span.SearchHighlight6,
	span.SearchHighlight7,
	span.SearchHighlight8,
	span.SearchHighlight9,
	span.SearchHighlight10
	{
		background-color: #FFFF00;
	}

	span.SearchHighlight2
	{
		background-color: #99DBCB;
	}

	span.SearchHighlight3
	{
		background-color: #BAE3B5;
	}

	span.SearchHighlight4
	{
		background-color: #BAE3B5;
	}

	/* go-to-top styles are used on the Master Pages for the back-to-top arrow. */

	a.go-to-top
	{
		position: fixed;
		bottom: 22px;
		right: 30px;
		padding: 8px 8px 6px 8px;
		background-color: var(--Primary);
		border-radius: 3px;
		/* displayed using script */
		display: none;
		opacity: 0.70;
	}

	img.go-to-top
	{
		margin-top: 0px;
		/*cancels the margin set on all images*/
		width: 18px;
		height: 18px;
	}

	a.go-to-top:hover,
	a.go-to-top:focus
	{
		background-color: var(--Primary);
		text-decoration: none;
		opacity: 1;
	}

	.codeHeader
	{
		line-height: 1.5rem;
	}

	.codeBlock
	{
		line-height: 1.2rem;
	}
}

@media print
{
	/*Print media applies to PDF, Word exports, and printing topic using online toolbar button*/
	/* Flare recomends defining font size in HTML in pixels, and in printed material as points. */
	/* PDF Heading styles */

	h1
	{
		font-size: 26pt;
		/*online is 27pt*/
	}

	h2
	{
		font-size: 24pt;
	}

	h3
	{
		font-size: 21.6pt;
	}

	h4
	{
		font-size: 18pt;
	}

	h5
	{
		font-size: 14pt;
	}

	h6
	{
		font-size: 14pt;
	}

	h1,
	h1.noBreak
	{
		mc-heading-level: 1;
		mc-hyphenate: never;
		margin-bottom: 22pt;
		padding-top: 3pt;
	}

	h1.Appendix
	{
		margin-bottom: 6pt;
		border: none;
	}

	h2,
	h3,
	h4,
	h5,
	h6
	{
		margin-top: 12pt;
		margin-bottom: 4pt;
	}

	h2,
	h3,
	h4,
	h5
	{
		padding-bottom: 0;
		padding-top: 0;
	}

	h4,
	h5
	{
		margin: 0;
		/*why?? need to VERIFY */
	}

	/* Print and PDF p style */

	p
	{
		padding: 0;
		margin-bottom: 8pt;
		margin-top: 4pt;
		text-align: left;
		word-break: normal;
		line-height: 1.1rem;
		/*font-size: --var(PrintFontSize);*/
	}

	/* PDF Title Page styles */

	p.Brand	/* not used?? */
	{
		margin-top: 120pt;
		margin-bottom: 6pt;
	}

	p.product	/* PDF Title Page, font point size and line height overrides from HTML */
	{
		font-size: 44pt;
		line-height: 48pt;
		margin-bottom: 14pt;
		hyphenate: never;
	}

	p.docTitle
	{
		font-size: 32pt;
		line-height: 36pt;
	}

	p.productSubTitle
	{
		margin-top: -4pt;
		font-size: 20pt;
	}

	/* p - doc number/version/release number/release date/footer located on PDF page layouts */

	p.docNumber
	{
		font-size: 1.25rem;
		line-height: 1rem;
		margin-left: 2.5pc;
		margin-top: -1pt;
		margin-bottom: -1pt;
	}

	.page-layout-front-logo	/* logo used on PDF title page; variable defined in branding stylesheet */
	{
		width: auto;
		/* height: 50px;*/
		height: 74px;
		background-color: transparent;
		background-image: var(--LogoImagePrint);
		background-repeat: no-repeat;
		background-size: auto 50px;
		background-position: left;
	}

	#fpImg	/* used only the PDF Front Page topic to style the div that contains the cover page image. Not used in HTML. */
	{
		width: 500pt;
		height: auto;
		text-align: center;
		display: block;
	}

	img.fPage	/* style used on the PDF front page image */
	{
		width: 75%;
		height: auto;
		/*margin-left: -18pt;*/
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.pageFooter
	{
		line-height: 0.25rem;
		font-size: 8pt;
		color: var(--Dark);
		line-height: 0.5rem;
		font-size: 9pt;
	}

	.pageNum
	{
		margin-top: 2pt;
	}

	/* All the fp styles are alternatives that can be used on the PDF Front Page topic, if needed - the # styles ore for named elements, and style a single item only. Not all of these are used in our final template. */

	#fpTop,
	#fpImg,
	#fpFoot
	{
		margin-left: 16pt;
		margin-right: -6pt;
	}

	#fpTop	/*not used in the current template. left for future rebranding purposes*/
	{
		margin-top: 56pt;
	}

	#fpMid	/* used only on the PDF Front Page topic to style the div that contains the Book Title. Not used in HTML */
	{
		margin-top: 6pt;
		margin-right: -10px;
		padding-bottom: 16px;
		/* space above the border */
		border-bottom: 6px solid var(--Primary);
	}

	#fpFoot	/*not used in the current template. left for future rebranding purposes*/
	{
		position: fixed;
		margin-top: 280pt;
	}

	/* PDF and print Code Snippet styles */

	.codeBlock
	{
		margin-top: 12pt;
	}

	.codeSnippetCaption,
	.codeHeader,
	.codeHeader1,
	.codeHeader2,
	.codeHeader3
	{
		margin-left: -2.25pt;
	}

	.code1,
	.codeBlock1,
	.codeHeader1
	{
		margin-left: 12pt;
	}

	.code2,
	.codeBlock2,
	.codeHeader2
	{
		margin-left: 24pt;
	}

	.code3,
	.codeBlock3,
	.codeHeader3
	{
		margin-left: 36pt;
	}

	.codeHeaderSm
	{
		margin-left: -4.5pt;
		margin-right: -4.5pt;
		padding-top: 3pt;
		margin-top: -24pt;
		margin-bottom: -15pt;
	}

	.codeTxt
	{
		font-size: 1.1rem;
	}

	/* Print/PDF Image formats. Print image sizes are the same as online, but expressed in picas. */

	img
	{
		margin-top: 6pt;
		margin-bottom: 4pt;
		display: inline-block;
	}

	p > img
	{
		
	}

	img.left
	{
		margin-left: 0pt;
	}

	img.center
	{
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
		height: auto;
	}

	img.insidetext
	{
		line-height: 8pt;
		vertical-align: baseline;
		width: 1.25pc;
		margin-top: -3pt;
		margin-bottom: -2pt;
	}

	img.icon
	{
		position: relative;
		top: 5pt;
		width: 2.25pc;
		height: auto;
		margin-right: 6pt;
		margin-top: -2pt;
	}

	img.small1
	{
		width: 5pc;
		height: auto;
	}

	img.small2	/* proposed for barcodes and QR codes */
	{
		width: 18pc;
		height: auto;
	}

	img.medium1	/* proposed for receipts and small informational messages */
	{
		width: 22pc;
		height: auto;
	}

	img.medium2	/* proposed for POS Screens AND Dialog boxes */
	{
		width: 36pc;
		height: auto;
	}

	img.large
	{
		width: 50pc;
		height: auto;
	}

	/* Print and PDF list styles */

	li
	{
		padding: 2pt 0 3pt 0;
		line-height: 1rem;
	}

	li p
	{
		margin-top: 0;
		margin-bottom: 0;
	}

	li > p > img,
	li > div > p > img
	{
		margin-bottom: 4pt;
	}

	li > img
	{
		margin-bottom: 2pt;
	}

	li > p.caption
	{
		margin-top: -2pt;
	}

	div.inLine > dt,
	dd
	{
		line-height: 1.3em;
	}

	div.inLine dl > dt
	{
		width: 250px;
	}

	div.inLine dl > dd
	{
		margin-left: 250px;
	}

	div.nested dl > dt
	{
		width: 250px;
	}

	div.nested dl > dd
	{
		margin-left: 30px;
	}

	/* Print/PDF Notice (Admonition) styles */

	div.notice-caution,
	div.notice-example,
	div.notice-exampleNoColor,
	div.notice-important,
	div.notice-note,
	div.notice-reference,
	div.notice-tip,
	div.notice-warning
	{
		margin-bottom: 4pt;
		/*	width: initial;*/
	}

	.codeBlock
	{
		margin-bottom: 4pt;
		/*width: initial;*/
	}

	li > div.notice-note,
	li > div.notice-caution,
	li > div.notice-tip,
	li > div.notice-important,
	li > div.notice-reference,
	li > div.notice-warning,
	li > div.notice-example,
	li > div.notice-exampleNoColor
	{
		margin-top: 6pt;
	}

	li > .codeBlock
	{
		margin-top: 10pt;
		margin-bottom: 6pt;
	}

	/* Print/PDF cross-reference styles */

	MadCap|xref.NCR-Style
	{
		/*	font-family: var(--FontFamily);*/
		/*font-weight: 600;*/
		/*color: var(--Primary);*/
		mc-format: '{color #5f259f}{b}"{u}{para}{/u}"{default} {pageref}';
	}

	/* Print/PDF table widths. These styles can be used when a table needs multiple styles applied by using the table properties dialog box. Can also be used with other elements, not only table. */

	.tab-100
	{
		width: 100%;
	}

	.tab-90
	{
		width: 90%;
	}

	.tab-80
	{
		width: 80%;
	}

	.tab-70
	{
		width: 70%;
	}

	.tab-60
	{
		width: 60%;
	}

	.tab-50
	{
		width: 50%;
	}

	.tab-40
	{
		width: 40%;
	}

	p.caption
	{
		page-break-before: avoid;
		margin-top: -2pt;
	}

	.alertBox	/* VERIFY: used for ?? was this from the original template? - can delete if I don't find it*/
	{
		margin-top: 4px;
		height: 10px;
		width: 60px;
	}

	MadCap|footnote
	{
		font-size: 0.75rem;
		font-family: var(--FontFamily);
	}

	/* Print/PDF Glossary styles */

	MadCap|glossaryProxy
	{
		font-family: var(--FontFamily);
		font-size: 1rem;
		line-height: 1.1rem;
		padding-top: 4.5pt;
		padding-left: 15pt;
		background-color: transparent;
	}

	.glossaryDesc
	{
		font-size: 0.875rem;
	}

	/* Print/PDF dropdown text styles */

	MadCap|dropDownHotspot
	{
		font-family: var(--FontSecondary);
		font-weight: 600;
		font-size: 0.9em;
		mc-disabled: false;
		margin-top: 12pt;
	}

	.dropDownTS
	{
		width: 90%;
	}
}

@media only screen and (max-width: 1279px)
{
	/* applies to tablet and mobile */
	/* Part of the Resizable Menu Pane solution. Hide the nav border when nav pane (menu pane) is not displayed.  This solution does not apply to the tablet/mobile sizes, since they use the flyaway menu pane. */

	.nav-border
	{
		display: none;
	}

	.title-bar-layout a.logo	/* skin override, because logo was overlapping menu icon on tablet and mobile sizes. Solution provided by Flare Support */
	{
		margin-left: 40px;
	}
}

.main-section
{
	background-color: var(--pageBackground);
}

#content-section	/* INVESTIGATE: this is the web page main section where the content goes - hashtag IDs are unique to a single item on the HTML page - find out what the purpose is to see if we still need it */
{
	margin: 0 auto;
	padding-bottom: 50px;
	text-align: center;
}

p
{
	margin-top: 6px;
	margin-bottom: 6px;
	line-height: 1.6rem;
}

p.Brand
{
	margin-top: 160px;
	margin-bottom: 8px;
}

p.product
{
	color: var(--Primary);
	padding-top: 30px;
	padding-bottom: 30px;
	line-height: 3.5rem;
}

p.docTitle
{
	color: var(--Primary);
	margin-left: 0;
	line-height: 3.5rem;
}

div.release
{
	margin-top: 50px;
	font-size: 1.25rem;
}

.alertBox	/*what is this for? Can we delete it??*/
{
	height: 30px;
	margin-top: 6px;
}

.codeBlock
{
	margin-top: 10px;
	width: 90%;
}

ol,
ul
{
	margin-top: 6px;
}

li
{
	padding: 4px 0 4px 0;
}

li > a
{
	color: var(--Primary);
}

li > .codeBlock.codeSnippet.codeSnippetcodeBlock
{
	margin-top: 10px;
}

li > .codeBlock > .codeSnippetCopyButton,
li > .codeBlock > .copyButton
{
	margin-top: 0;
}

li > p > img
{
	margin-top: 10px;
}

div.inLine dl > dt
{
	width: 25%;
}

div.inLine dl > dd
{
	margin-left: 25%;
}

div.nested dl > dd
{
	margin-left: 5%;
}

.code1,
.codeBlock1,
.codeHeader1
{
	margin-left: 16px;
}

.code2,
.codeBlock2,
.codeHeader2
{
	margin-left: 32px;
}

.code3,
.codeBlock3,
.codeHeader3
{
	margin-left: 48px;
}

.codeHeaderSm
{
	margin-left: -6px;
	margin-right: -6px;
	padding-top: 4px;
	margin-top: -7px;
	line-height: 1.5rem;
}

.sidenav-wrapper
{
	order: 1;
}

.nav-border
{
	background-color: #e7e7e7;
	border-width: 1px;
	border-style: outset;
	order: 2;
	cursor: ew-resize;
	flex: 0 0 3px;
	user-select: none;
}

.body-container
{
	order: 3;
}

.nav-border::before
{
	content: "";
	border-top: solid 2px;
	border-right: solid 2px;
	position: fixed;
	margin-top: 38vh;
	margin-left: 1px;
	width: 8px;
	height: 8px;
	opacity: 20%;
	transform: rotate(45deg);
}

.is-accordion-submenu-parent > a span.submenu-toggle-container	/* places the expandable triangle icon to the left of the menu items instead of the Flare default, which is on the right */
{
	left: -22px;
}

.is-accordion-submenu-parent > a span.submenu-toggle	/* replaces the default image used for the expand/collapse menu item triangle */
{
	content: var(--menuExpander);
	border: none;
	border-top-style: none;
	top: 50%;
	width: 10px;
	height: 10px;
}

.submenu-toggle-container[aria-expanded='true'] > span.submenu-toggle,
.is-accordion-submenu-parent > a[aria-expanded='true'] > .submenu-toggle-container > span.submenu-toggle	/* rotates the arrow when menu is expanded. The first selector is for web size and the second one is for the fly-away menu pane in mobile/tablet */
{
	transform: rotate(0.25turn);
}

._Skins_HTML5_Side ul.sidenav ul > a	/* Why is this needed ? Is it b/c links are bold? can we delete it? Might be part of old NCR green template */
{
	font-weight: normal;
}

._Skins_HTML5_Side #resultList h3.title a:link,
._Skins_HTML5_Side #resultList h3.title a:hover,
._Skins_HTML5_Side #resultList h3.title a:visited	/* correction for the search results headings that were too large. Need to verify if we still need this with the new Voyix template */
{
	font-size: 1.3rem;
}

._Skins_HTML5_Side #resultList .url cite::before	/* search results page path prefix */
{
	content: "location: ";
}

._Skins_HTML5_Side ul.sidenav ul ul > li > a	/* NEED TO VERIFY - maybe so that the menu doesn't bump up to the main part of the content. Jill wasn't sure. */
{
	margin-right: 0.65em;
}

._Skins_HTML5_Side ul.sidenav ul ul ul ul ul > li > a	/* Menu items that are indented by 5 levels (not counting level 0); skin supports only 4 levels */
{
	margin-left: 50px;
}

._Skins_HTML5_Side ul.sidenav ul ul ul ul ul > li > a
{
	margin-left: 60px;
}

._Skins_HTML5_Side ul.sidenav ul ul ul ul ul ul > li > a
{
	margin-left: 70px;
}

._Skins_Sitemap.mc-component li.tree-node-leaf
{
	text-decoration: underline;
}

MadCap|xref.NCR-Style
{
	font-family: var(--FontSecondary);
	font-weight: 600;
	mc-format: '{u}{para}{/u}';
	color: var(--Primary);
}

.otab-100
{
	width: 100%;
}

.otab-90
{
	width: 90%;
}

.otab-80
{
	width: 80%;
}

.otab-70
{
	width: 70%;
}

.otab-60
{
	width: 60%;
}

.otab-50
{
	width: 50%;
}

.otab-40
{
	width: 40%;
}

footer	/* HTML footer - general portion */
{
	border-top: 4px solid var(--Light);
	font-size: 0.875rem;
	margin-top: 40px;
}

.footer-left	/* copyright - a little box w/n the footer. it's nested section inside footer, can remove if I want */
{
	margin-top: 14px;
	max-width: 80%;
}

.footer-right	/* optional - for a download icon, if needed after the light grey line on the right side, can remove if needed */
{
	position: relative;
	float: right;
	width: 200px;
	margin-top: -70px;
}

MadCap|glossaryProxy
{
	font-family: var(--FontFamily);
	margin-left: 0;
}

.GlossaryPageLink,
.GlossaryPageLink:link,
.GlossaryPageLink:visited,
.GlossaryPageLink:hover
{
	font-family: var(--FontSecondary);
	font-weight: 600;
	color: var(--Darkest);
	cursor: pointer;
	text-decoration: none;
}

.GlossaryPageDefinition
{
	padding-top: 8px;
	margin-left: 30px;
}

.glossaryDesc
{
	font-size: 1rem;
}

ul.MCGlossaryProxy_pdf_0
{
	margin-left: 0;
	border: none;
	margin-top: -20px;
}

MadCap|breadcrumbsProxy
{
	line-height: 1.5rem;
	mc-breadcrumbs-count: 10;
	mc-breadcrumbs-prefix: '';
	font-family: var(--FontFamily);
	color: var(--bodyTextColor);
	font-size: 1rem;
}

MadCap|dropDown	/* the arrow images next to the dropDownHead */
{
	mc-disabled: false;
	margin-bottom: 6px;
	mc-closed-image: width(10px);
	mc-closed-image: var(--ArrowRight);
	mc-open-image: width(10px);
	mc-open-image: var(--ArrowDown);
}

MadCap|dropDownHead
{
	mc-disabled: false;
	display: block;
	font-family: var(--FontFamily);
}

MadCap|dropDownHotspot
{
	mc-disabled: false;
	font-family: var(--FontSecondary);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--Primary);
}

MadCap|dropDownHotspot:link
{
	background-repeat: no-repeat;
}

.dropDownHotspot:link:hover
{
	color: var(--Darkest);
}

MadCap|dropDownBody
{
	border: none;
	padding-bottom: 8px;
	mc-disabled: false;
	height: auto;
	width: 88%;
	padding-left: 8px;
}

MadCap|dropDownBody.Final
{
	border-bottom: 0px;
}

.dropDownTS
{
	width: 80%;
}

.pdf
{
	margin-left: 20px;
}

.pdf:before
{
	content: "";
}

.pdf:after
{
	display: inline-block;
	height: 2.5em;
	width: 2.5em;
	background: url('../Images/Template/adobe-pdf-icon.svg');
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	position: absolute;
	opacity: 0.7;
	margin-left: -10px;
	z-index: 10;
}

.pdf:hover:after
{
	opacity: 1;
}

.pdfSlot
{
	border-radius: 0.375em;
	height: 3.5em;
	color: #293948;
	background-color: #DEE3E8;
	padding-top: 6px;
	width: 60px;
	position: relative;
	float: right;
	margin-top: -80px;
}

.tooltip
{
	display: inline-block;
	margin-left: 10px;
}

.tooltip .tooltiptext
{
	visibility: hidden;
	width: 120px;
	top: 100%;
	left: 50%;
	background-color: var(--Light);
	color: var(--Dark);
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	z-index: 1;
	font-size: 0.875rem;
	margin-top: 18px;
}

span.SearchHighlight1,
span.SearchHighlight5,
span.SearchHighlight6,
span.SearchHighlight7,
span.SearchHighlight8,
span.SearchHighlight9,
span.SearchHighlight10
{
	background-color: #FFFF00;
}

span.SearchHighlight2
{
	background-color: #99DBCB;
}

span.SearchHighlight3
{
	background-color: #BAE3B5;
}

span.SearchHighlight4
{
	background-color: #BAE3B5;
}

a.go-to-top
{
	position: fixed;
	bottom: 22px;
	right: 30px;
	padding: 8px 8px 6px 8px;
	background-color: var(--Primary);
	border-radius: 3px;
	display: none;
	opacity: 0.70;
}

img.go-to-top
{
	margin-top: 0px;
	width: 18px;
	height: 18px;
}

a.go-to-top:hover,
a.go-to-top:focus
{
	background-color: var(--Primary);
	text-decoration: none;
	opacity: 1;
}

.codeHeader
{
	line-height: 1.5rem;
}

.codeBlock
{
	line-height: 1.2rem;
}