/*<meta conditions="General.ImportOnly" />*/

@import url('Prism.css');

@import url('ScriptStyles.css');

@import url('RelationshipStyles.css');

@import url('KnowledgeStyles.css');

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

@font-face 
{
	font-family: Roboto;
	src: url(../Fonts/Roboto/Roboto-Regular.ttf);
}

/*font-family: 'Overpass';
	src: url(../Fonts/Overpass/Overpass-VariableFont_wght.ttf);*/

:root	/* This lets us use variables to style easily across the project. It takes the format of var(--example) to replace anything we use a lot eg "var(--grellow)" can be used instead of #D7DF23) */
{
	/* Colours */
	--grellow: #D7DF23;
	--housePurple: #582D87;
	--contrastPurple: #C7B7D5;
	--houseBlue: #09A9E0;
	--linkBlue: #076685;
	--bgGrey: #f6f6f6;
	--vidGrey: #efefef;
}

html
{
	scrollbar-width: thin;
	scrollbar-color: #00a9e0;
	font-size: 18px;
}

body
{
	font-family: Roboto, sans-serif;
	font-size: 18px;
}

html.home-topic	/* Used on home topic to override padding set in the skin */
{
	
}

html.home-topic .body-container	/* Overrides padding set in the skin */
{
	padding: 0;
}

.body-container	/* Removes default padding */
{
	padding-right: 0px;
	padding-top: 2em;
	padding-left: 0;
}

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

#mc-main-content
{
	width: 70%;
	max-width: 1100px;
	margin: auto;
}

.no-content
{
	width: 70%;
	max-width: 1100px;
	margin: auto;
}

.height-container-sidenav
{
	padding-bottom: 0px;
	padding-right: 5px;
}

.sidenav-wrapper
{
	max-width: 400px;
	border-right: none;
	box-shadow: 0px 1px 4px 0px #cccccc;
}

.body-container > div:nth-child(1)	/* Adds padding to the right side of the page without breaking borders */
{
	padding-right: 20px;
}

div.tableScroll	/* Requires a div to surround the table to add overflow scroll, allowing responsive tables in tablet and mobile. */
{
	overflow-x: auto;
}

/* // TOC STYLING // */

ul.sidenav li.TocHeader > a	/* TocHeader is used for Parent level Toc headings when we want there to be visible children on page load. Add this via properties on the TOC itself */
{
	padding-left: 5px;
	border-bottom: 1px solid #cbcbcb;
	padding-bottom: 5px;
	font-size: 1.15rem;
	margin-top: 10px;
}

ul.sidenav li > a:hover
{
	color: #076685;
}

div.note > p > a:hover
{
	color: #C7B7D5;
}

ul.sidenav ul > li > a,
ul.sidenav li a.selected
{
	color: #222222;
}

/* // END OF TOC STYLING // */
/* // TOOLBAR STYLING // */
/* Not currently implemented. Removed as there wasn't a good place to put it where it didn't overlap with more important features. */

@media screen and (min-width: 1280px)
{
	.buttons._Skins_SideNav_Toolbar.mc-component
	{
		right: 32px;
		top: 85px;
		position: fixed;
	}
}

@media screen and (max-width: 1279px)
{
	.buttons._Skins_SideNav_Toolbar.mc-component
	{
		right: 20px;
		top: 150px;
		position: fixed;
	}
}

/* // END OF TOOLBAR STYLING // */
/* // BASIC FONT STYLING // */

h1,
h2,
h3,
h4,
.task
{
	font-weight: bold;
	margin: 12px 0px 10px 0px;
	color: #222222;
}

h1
{
	font-size: 2.5rem;
	border-bottom: 1px solid lightgrey;
}

h2
{
	font-size: 1.6rem;
}

h3
{
	font-size: 1.3rem;
}

h4
{
	font-size: 1.2rem;
}

table p
{
	font-size: 0.83333rem;
	margin: 5px 0px;
	line-height: 1.25;
	color: #000000;
}

table li
{
	font-size: 0.83333rem;
	line-height: 1.25;
}

p
{
	font-size: 1rem;
	font-family: Roboto, sans-serif;
	line-height: 1.5;
	color: #404040;
	margin-block: 16px;
}

pre
{
	font-size: 1rem;
	font-family: Roboto, sans-serif;
}

ol,
ul
{
	line-height: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 20px;
}

ol > p,
ul > p	/* Moves normal paragraphs within lists back to where they normally would sit. */
{
	margin-left: -20px;
}

ul.bullet > li	/* Not implemented properly yet, probably better as a background image. */
{
	list-style-type: disc;
	list-style-position: outside;
	padding: 0px;
	list-style-image: url('../Images/Home/Bullet1Print.png');
}

li
{
	margin-bottom: 6px;
	margin-top: 6px;
}

figcaption
{
	font-style: italic;
	text-align: center;
}

.indent1
{
	text-indent: 1rem;
}

.indent2
{
	text-indent: 2rem;
}

.indent3
{
	text-indent: 3rem;
}

/* // END OF BASIC FONT STYLING // */
/* // CODE STYLING // */
/* INLINE CODE */

code
{
	font-family: "Lucida Console";
	overflow-wrap: anywhere;
}

/* CODE SNIPPETS */

.codeSnippet,
div.code
{
	padding: 10px;
	border: solid 3px #076685;
	border-radius: 15px;
	margin-bottom: 15px;
	background-color: #f6f6f6;
}

MadCap|codeSnippetBody
{
	font-family: Consolas;
	font-size: 14px;
	line-height: 1.4em;
}

MadCap|codeSnippetCaption
{
	font-family: 'Lucida Console', Consolas;
	font-size: 1.4rem;
	padding-left: 1.5rem;
	text-decoration: none;
}

.codeSnippetCaption > p	/* This lines the caption and the Copy button up, removing the deadspace */
{
	margin: 0px auto 5px auto;
}

.codeSnippetCopyButton,
.copy-to-clipboard-button
{
	font-family: 'Lucida Console', Consolas;
	font-size: 1.4rem;
}

.codeSnippetCopyButton:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:hover
{
	color: #C7B7D5;
	text-decoration: underline;
	cursor: pointer;
}

div.code-toolbar > .toolbar > .toolbar-item > span:hover	/* Overrides the Language marker's default CSS. Makes it static and removes hover properties. */
{
	color: #076685;
	text-decoration: underline;
}

.copy-to-clipboard-button
{
	color: #076685;
}

.codeSnippetBody span.codeSnippetLineNumbers
{
	color: #076685;
}

.line-numbers-rows > span:before
{
	color: #076685;
	font-family: "Lucida Console";
	padding-right: .8rem;
	text-align: right;
}

.toolbar-item > span
{
	color: #076685;
	font-family: "Lucida Console";
	font-size: 1.5rem;
	text-decoration: underline;
}

div.code-toolbar > .toolbar > .toolbar-item > button:focus	/* Stops the Copy button text from inheriting the base styling when clicked */
{
	color: #076685;
	font-family: "Lucida Console";
	font-size: 1.5rem;
	text-decoration: underline;
}

div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span	/* Removes the box shadow from the buttons, and overrides the basic style. */
{
	color: #076685;
	font-family: "Lucida Console";
	font-size: 1.5rem;
	padding: 10px 10px;
	box-shadow: none;
	background-color: #ffffff;
	text-decoration: underline;
}

.codeSnippet > p	/* Adds a heading. Not 100% necessary but when the 1st line of code is long the cop button will appear over it without this. Not ideal but it also makes it look slightly nicer/ties it in with the rest of the docs. */
{
	color: #076685;
	font-family: "Lucida Console";
	font-size: 1.5rem;
	margin: 0px 0px 0px -14px;
}

button.copy-to-clipboard
{
	color: #076685;
}

.toolbar
{
	margin: 10px 10px 0px 0px;
}

div.code-toolbar > .toolbar	/* Keeps the toolbar elements from disappearing */
{
	opacity: 1;
}

:not(pre) > code[class*=language-],
pre[class*=language-]	/* Sets the background of the code snippets to white in HTML files */
{
	background: #ffffff;
}

pre.pdfCode > code > p:nth-child(1)
{
	mc-auto-number-format: '{size 14}{color: #ffffff}{n=1}	{/color}{/size}';
}

pre.pdfCode > code > p
{
	font-size: 14px;
	mc-auto-number-format: '{size 14}{color: #ffffff}{n+1}	{/color}{/size}';
	mc-auto-number-position: outside-head;
	margin-top: 0px;
	margin-bottom: 6px;
	mc-auto-number-offset: 5px;
}

pre.pdfCodeNoNum > code > p
{
	font-size: 14px;
	margin-top: 0px;
	margin-bottom: 6px;
}

pre.pdfCode,
pre.pdfCodeNoNum
{
	background-color: #000000;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	border: 1px solid lightgrey;
	overflow: auto;
}

table.AutoNumber_p
{
	margin-top: 0px;
}

.codeGreen
{
	margin: 10px 0px 10px 0px;
	border: 3px double #D7DF23;
}

.codeGrey
{
	margin: 10px 0px 10px 0px;
	border: 3px dashed #a9a9a9;
}

.codePurple
{
	margin: 10px 0px 10px 0px;
	border: 3px dotted #582D87;
}

/* // END OF CODE STYLING // */
/* // MEDIA STYLING // */

img
{
	border: none;
}

figure	/* Keeps captions and images central */
{
	text-align: center;
	padding: auto;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	align-content: center;
}

.screenshot	/* "Full width" images for docs */
{
	max-width: 100%;
	width: 1000px;
	height: auto;
	border: 1px solid lightgray;
	border-radius: 10px;
}

.popout	/* Popout is for pop-out/pop-ups windows and any smaller pics that are smaller than a screenshot and bigger than just an icon. */
{
	width: 500px;
	max-width: 100%;
	height: auto;
	border: 1px solid lightgray;
	border-radius: 10px;
}

.popoutSmall	/* Smaller dimensions for popouts that are smaller than 500px at the source. Just to prevent blurry/low image quality when it upscales. */
{
	width: 350px;
	max-width: 100%;
	height: auto;
	border: 1px solid lightgray;
	border-radius: 10px;
}

.thumbnail	/* Thumbnail is for images that are around 200px width at the source. Just to prevent blurry/low image quality when it upscales. */
{
	width: 200px;
	max-width: 100%;
	height: auto;
	border: 1px solid lightgray;
	border-radius: 10px;
}

.thumbnailSmall	/* Smaller dimensions for thumbnails that are smaller than 200px at the source. Just to prevent blurry/low image quality when it upscales. */
{
	width: 150px;
	max-width: 100%;
	height: auto;
	border: 1px solid lightgray;
	border-radius: 10px;
}

.icon	/* Icons outside of sentence will be bigger ie. Outcome icons. */
{
	width: auto;
	height: 50px;
}

.iconSmall	/* For smaller icons that aren't inline with text. */
{
	width: auto;
	height: 30px;
}

.iconInline	/* Icons inline with text need to not be too big else it looks weird. Because these sit in-line with text the position and and z-index make it so it doesn't cover the bottom of letters like p or g in lines above. */
{
	width: auto;
	height: 30px;
	margin-top: -5px;
	margin-bottom: -5px;
	vertical-align: baseline;
	position: relative;
}

.pdfIcon	/* PDF Icons need to be styled similarly to the Home page with a slight change */
{
	height: 80px;
	min-height: auto;
	min-width: 80px;
}

.enlargeImage	/* Enables the popup functionality on an image, allowing it to be full size or full-ish-screen. Allows the image to keep focus in both size ranges. Add this as a second class to any image. */
{
	mc-thumbnail: popup;
	mc-thumbnail-max-height: auto;
}

.videoContent
{
	border-radius: 10px;
	width: 560px;
	height: 315px;
	max-width: 100%;
}

audio
{
	border: 1px solid lightgrey;
	border-radius: 35px;
	position: relative;
	z-index: -1;
}

/* // END OF MEDIA STYLING // */
/* // CALLOUT BOX STYLING // */

div.note > p,
div.warning > p,
div.example > p,
.best > p,
p.note
{
	margin: 0px 0px 5px;
}

div.note,
.warning,
.example,
.best,
p.note
{
	margin: 10px 0px;
	padding: 10px;
	border-radius: 10px;
	color: #000000;
	background-repeat: no-repeat;
	background-color: #ffffff;
	background-size: 24px;
}

table .note,
table .example,
table .warning,
table .best
{
	background-size: 18px;
}

ul div.note,
ol div.note,
ul div.warning,
ol div.warning,
ul div.example,
ol div.example,
ul div.best,
ol div.best	/* Puts notes, warnings and examples back to the left to counter the indent from being part of a list */
{
	margin-left: -20px;
	background-position: 8px 11px;
}

ul table div.note,
ol table div.note,
ul table div.warning,
ol table div.warning,
ul table div.example,
ol table div.example,
ul table div.best,
ol table div.best	/* In tables the div margin fix above was causing it to be too far left. This counters that counter. There may be a more elegant way "table div.note { margin-left: 0; }" but will need to test it later, if I remember. */
{
	margin-left: 0;
}

div.note,
p.note
{
	border: solid 1px #582D87;
	background-color: #f6f6f6;
	background-image: url('../Images/General/pencil-purple.png');
	background-position: 8px 11px;
	text-align: left;
}

td div.note
{
	background-position: 9px 11px;
}

div.note > p:nth-child(1),
p.note
{
	mc-auto-number-format: '{size 20}{color #582d87}      {b}Note{/b}:{/color}{/size}{size 18} {/size}';
}

td div.note > p:nth-child(1)
{
	mc-auto-number-format: '{size 1em}{color #582d87}       {b}Note{/b}:{/color}{/size}{size 1em} {/size}';
}

.warning
{
	border: solid 1px #8b0000;
	background-color: #FFEDED;
	background-image: url('../Images/General/alert-outline-red.png');
	background-position: 8px 12px;
}

td .warning
{
	background-position: 10px 11px;
}

div.warning > p:nth-child(1)
{
	mc-auto-number-format: '{size 20}{color #8b0000}      {b}Warning{/b}:{/color}{/size}{size 18} {/size}';
}

td div.warning > p:nth-child(1)
{
	mc-auto-number-format: '{size 1em}{color #8b0000}       {b}Warning{/b}:{/color}{/size}{size 1em} {/size}';
}

.example
{
	border: solid 1px #076685;
	background-color: #f6f6f6;
	background-image: url('../Images/General/text-box-edit-outline-blue.png');
	background-position: 8px 11px;
}

td .example
{
	background-position: 10px 11px;
}

div.example > p:nth-child(1)
{
	mc-auto-number-format: '{size 20}{color #076685}      {b}Example{/b}:{/color}{/size}{size 18} {/size}';
}

td div.example > p:nth-child(1)
{
	mc-auto-number-format: '{size 1em}{color #076685}       {b}Example{/b}:{/color}{/size}{size 1em} {/size}';
}

.best
{
	border: solid 1px #9242E9;
	background-color: #f4ebfc;
	background-image: url('../Images/General/best-medal.png');
	background-position: 8px 11px;
	text-align: left;
}

div.best > p:nth-child(1)
{
	mc-auto-number-format: '{size 20}{color #000000}      {b}Best Practice{/b}:{/color}{/size}{size 18} {/size}';
}

td div.best > p:nth-child(1)
{
	mc-auto-number-format: '{size 1em}{color #000000}      {b}Best Practice{/b}:{/color}{/size}{size 1em} {/size}';
}

/* // END OF CALLOUT BOX STYLING // */

MadCap|expandingHead
{
	font-style: italic;
	font-weight: normal;
	cursor: hand;
	text-decoration: none;
	color: #006600;
}

MadCap|expandingBody
{
	color: #777777;
	font-style: italic;
}

MadCap|dropDownHotspot
{
	cursor: hand;
	text-decoration: none;
	color: #45494c;
	font-size: 20px;
	font-weight: bold;
	border-bottom: none;
}

p.task
{
	text-transform: uppercase;
	font-weight: bold;
	mc-disable-glossary-terms: true;
}

div.home-layout
{
	padding: 2% 5%;
}

div.home-section
{
	padding: 5% 0;
	border-bottom: solid 1px #dadada;
}

div.home-section:last-of-type	/* Removes the border on the last section of the home page */
{
	border-bottom: none;
}

.search-bar
{
	right: -16px;
}

MadCap|breadcrumbsProxy
{
	width: fit-content;
	max-width: 50%;
	padding: 5px 8px 5px 8px;
	top: 60px;
	margin-left: 1px;
	margin-bottom: 10px;
	border: none;
	position: fixed;
	background-color: white;
	box-shadow: 0px 1px 4px 0px #cccccc;
	border-radius: 5px;
	font-size: 16px;
	mc-breadcrumbs-count: 10;
	z-index: 10;
}

@media screen and (max-width: 1279px)
{
	div.MCBreadcrumbsBox_0,
	.breadcrumbs
	{
		top: 125px;
		margin-left: -6px;
	}
}

@media screen and (max-width: 760px)
{
	div.MCBreadcrumbsBox_0,
	.breadcrumbs
	{
		max-width: 85%;
	}
}

a.MCBreadcrumbsLink
{
	color: #582D87;
}

.MCBreadcrumbsDivider
{
	color: #582D87;
	padding-left: 4px;
}

div.breadcrumbs > span:last-child
{
	/* In case the current location needs updating */
}

.MCBreadcrumbsPrefix
{
	display: none;
}

a.home-button
{
	display: block;
	padding: 10px;
	text-decoration: none;
	width: 100%;
}

/* // LINK STYLING // */

a:link,
a:active
{
	color: #076685;
}

a:hover,
a.MCXref.xref:hover
{
	color: #582D87;
}

MadCap|xref
{
	color: #076685;
	mc-format: '{para}';
	text-decoration: underline;
}

.TableStyle-Tables a.MCXref.xref,
.TableStyle-Tables a
{
	color: #582D87;
}

.TableStyle-Tables a.MCXref.xref:hover,
.TableStyle-Tables a:hover
{
	color: #C7B7D5;
}

/* // END OF LINK STYLING // */

MadCap|dropDownBody
{
	padding: 10px 30px 0;
}

MadCap|dropDown
{
	border-bottom: 1px solid #dadada;
	mc-image-position: left;
	mc-image-spacing: 10px;
	padding: 10px 0;
	mc-closed-image: url('../Images/Home/plus.png');
	mc-open-image: url('../Images/Home/minus.png');
}

div.topic-hero
{
	padding: 5%;
	background-image: url('../Images/Home/Hero-Background.jpg');
	background-size: cover;
	background-attachment: fixed;
}

div.topic-hero h1
{
	color: #fff;
	font-size: 3.5rem;
	text-align: center;
}

/* // TOGGLER STYLING // */

.MCToggler_Closed.MCTogglerHotSpot_.MCHotSpotImage
{
	color: #076685;
	/*	background-image: url("../Images/General/plus.png");*/
	padding-left: 15px;
	font-weight: bold;
}

.MCToggler_Open.MCTogglerHotSpot_.MCHotSpotImage
{
	color: #076685;
	/*	background-image: url("../Images/General/minus.png");*/
	padding-left: 15px;
	font-weight: bold;
}

ol .MCToggler_Closed.MCTogglerHotSpot_.MCHotSpotImage,
ul .MCToggler_Closed.MCTogglerHotSpot_.MCHotSpotImage
{
	margin-left: -20px;
}

ol .MCToggler_Open.MCTogglerHotSpot_.MCHotSpotImage,
ul .MCToggler_Open.MCTogglerHotSpot_.MCHotSpotImage
{
	margin-left: -20px;
}

p > .MCToggler_Open.MCTogglerHotSpot_.MCHotSpotImage,
p > .MCToggler_Closed.MCTogglerHotSpot_.MCHotSpotImage
{
	padding-left: 10px;
}

h3 > .MCToggler_Open.MCTogglerHotSpot_.MCHotSpotImage,
h3 > .MCToggler_Closed.MCTogglerHotSpot_.MCHotSpotImage
{
	padding-left: 15px;
	background-position-x: -6px;
}

h4 > .MCToggler_Open.MCTogglerHotSpot_.MCHotSpotImage,
h4 > .MCToggler_Closed.MCTogglerHotSpot_.MCHotSpotImage
{
	padding-left: 15px;
	background-position-x: -4px;
}

MadCap|toggler
{
	mc-closed-image: url('../Images/General/plus.png');
	mc-open-image: url('../Images/General/minus.png');
}

/* // END OF TOGGLER STYLING // */
/* // SCROLL BAR STYLING // */

::-webkit-scrollbar
{
	width: 12px;
	/* width of the entire scrollbar */
}

::-webkit-scrollbar-track
{
	background: none;
	/* color of the tracking area */
	margin: 0px 1px;
	/* adds small buffer so that any boders this overlaps, it overlaps less. Mostly code snippets. */
}

::-webkit-scrollbar-thumb
{
	background-color: #CBCBCB;
	/* color of the scroll thumb */
	border-radius: 20px;
	/* roundness of the scroll thumb */
	border: 1px solid darkgrey;
	height: 100px;
}

/* // END OF SCROLL BAR STYLING // */
/* // FOOTER STYLING // */

.footerPadding	/* This keeps the footer from overlapping/being overlapped by other elements in the body/proxies */
{
	height: 150px;
}

footer
{
	padding-top: 15px;
	position: absolute;
	width: 100%;
	bottom: 0px;
	left: -16px;
	overflow: hidden;
	border-top: 1px solid lightgrey;
	display: inline-flex;
}

footer	/*Removes styling that doesn't work on the Home Page*/
{
	width: 70%;
	min-width: 70px;
	max-width: 1100px;
	position: absolute;
	left: -14px;
	bottom: 0px;
	height: 80px;
	padding-top: 0px;
	text-align: center;
	background-color: white;
	margin: auto;
}

.footerLeft
{
	float: left;
	margin: auto;
	margin-left: 0;
}

.footerMiddle
{
	float: left;
	margin: auto;
	white-space: nowrap;
}

.footerRight
{
	float: right;
	margin: auto;
	margin-right: 0px;
}

.footerLinks
{
	margin: 10px 15px 0px 15px;
	display: inline-block;
}

.footerLinks p
{
	margin-top: 0px;
	margin-bottom: 30px;
}

.footerLinks > p > a
{
	margin: 0px 10px;
	font-size: 1rem;
	color: #076685;
}

.footerLegal
{
	margin: 10px 15px 20px 15px;
	/*padding-right: 65px;*/
}

.footerLegal > p
{
	margin: 0px 10px;
}

.footerSocial
{
	margin: 10px 15px 20px 10px;
}

.footerSocial > a
{
	margin: 10px 15px;
}

.margin
{
	min-width: 15%;
}

#footerBG
{
	position: absolute;
	bottom: 0;
	height: 60px;
	width: 100%;
	background-color: #f6f6f6;
	z-index: -1;
	border-top: 1px solid lightgray;
}

#footer
{
	position: absolute;
	width: 70%;
	min-width: 500px;
	max-width: 1100px;
	margin: 0px auto 0px;
	height: 60px;
	display: flex;
	justify-content: space-between;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	bottom: 0px;
	align-items: center;
}

.footerLeft
{
	margin: auto;
}

.footerSocial
{
	width: 33%;
	text-align: right;
}

.landingLinks
{
	width: 33%;
}

.footerLegal
{
	width: 33%;
	margin: 0px 0px;
}

.footerLegal > p
{
	margin: 0px 0px;
	color: #666666;
	font-size: 15px;
	text-align: left;
}

.landingLinks > p
{
	margin: 0;
	text-align: center;
	font-size: 15px;
}

.footerLinks p
{
	margin-bottom: 0px;
}

#footer > div
{
	margin: 5px 0 0;
}

.footerSocial img
{
	width: 19px;
	margin-top: 1px;
}

.footerSocial > a
{
	margin: 0px 16px;
}

.footerSocial > a:last-of-type
{
	margin-right: 0px;
}

.landingRight
{
	float: right;
	margin: auto;
}

.landingLinks > p > a
{
	text-decoration: none;
	font-weight: bold;
	color: #404040;
	margin: 0px;
	letter-spacing: 2px;
}

.footerPadding	/* This keeps the footer from overlapping/being overlapped by other elements in the body/proxies */
{
	height: 60px;
}

/*// END OF FOOTER STYLING //*/
/* // ADDITIONAL TABLE STYLING // */

p.no-wrap	/* Styling to force a minimum width on table columns. Apply it to headings to stop it from wrapping the text. */
{
	white-space: nowrap;
}

td[class$="ForceWrap-Body1"] > p,
td[class$="ForceWrap-Body2"] > p
{
	line-break: anywhere;
}

/* // END OF ADDITIONAL TABLE STYLING // */
/* // MADCAP FEATURE STYLING // */

.popupBody	/* Effects the popup box */
{
	background-color: #f6f6f6;
	border: 1px solid lightgrey;
	padding-left: 10px;
}

.MCTextPopupBody
{
	box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%), 0 1px 6px rgb(0 0 0 / 23%);
}

.MCTextPopup_Closed.MCTextPopupHotSpot_.MCTextPopupHotSpot_Popup
{
	background-image: none;
	background-image: url('../Images/General/information-outline.png');
	padding-right: 3px;
	padding-top: 6px;
	background-size: 16px;
}

.MCTextPopup_Open.MCTextPopupHotSpot_.MCTextPopupHotSpot_Popup,
.MCTextPopup_Open.MCTextPopupHotSpot_.MCTextPopupHotSpot_Popup:active
{
	background-image: none;
	background-image: url('../Images/General/information.png');
	padding-right: 3px;
	padding-top: 6px;
	background-size: 16px;
}

.MCGlossaryProxy_0,
ul.MCGlossaryProxy_0
{
	border-top-style: none;
	padding: 0px 0px;
}

.GlossaryPageTerm
{
	font-weight: bold;
	padding-bottom: 5px;
	font-size: 1.2rem;
}

.GlossaryPageLink
{
	background-color: #f1e8f9;
	border-radius: 5px;
	padding: 2px 5px;
}

GlossaryPageDefinition
{
	color: #404040;
}

.GlossaryPageEntry
{
	list-style-type: none;
	margin: 5px 0px;
	padding: 5px 5px;
	border-radius: 5px;
	line-height: 1.5;
}

.GlossaryPageHeading
{
	font-size: 1.75rem;
	padding-bottom: 5px;
	color: #582D87;
	border-color: #582D87;
}

p > a.MCTextPopup_Closed.MCTextPopupHotSpot_.MCTextPopupHotSpot_Popup,
p > a.MCTextPopup_Open.MCTextPopupHotSpot_.MCTextPopupHotSpot_Popup	/* Stops the glossary terms from being split across two lines, which breaks the positioning of the popup box. */
{
	white-space: nowrap;
}

.glossaryTerm:link
{
	color: #582D87;
	padding-right: 1px;
}

.glossaryTerm:link:hover,
a.GlossaryPageLink:hover
{
	color: #000000;
}

.glossaryTerm:link:hover
{
	cursor: help;
}

.MCTextPopupArrow
{
	border: none;
}

span.MCTextPopupBody
{
	border: none;
	border-top: 1px solid lightgrey;
}

.expandingBody
{
	border: 1px solid lightgrey;
	margin-left: 5px;
	border-radius: 20px;
	padding: 0px 5px;
	background-color: white;
	color: black;
	box-sizing: border-box;
	font-weight: normal;
}

MadCap|relationshipsHeading
{
	mc-label: 'Related Topics';
	font-size: 1.5rem;
	margin: 10px 0px;
}

MadCap|referenceHeading,
MadCap|taskHeading
{
	font-size: 1.5rem;
	margin: 10px 0px;
}

MadCap|relationshipsItem,
p.taskItem
{
	font-size: 1.125rem;
	margin-top: 0px;
	margin-left: 20px;
	margin-bottom: 10px;
}

MadCap|relationshipsProxy
{
	border-top-color: none;
	border-top: 1px solid lightgrey;
	padding-left: 0px;
	padding-bottom: 10px;
	min-width: 500px;
	max-width: 1100px;
	width: 70%;
	margin: auto;
}

._Skins_FAQs	/* Makes the FAQs sit central and they don't fill the page too much */
{
	min-width: 500px;
	max-width: 1100px;
	margin: 5px auto 10px;
	width: 66.66666%;
	padding: 10px;
}

.faqs > div > div.micro-content:hover,
._Skins_FAQs > div.micro-content-collapsed:hover
{
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	transition: all 0.8s cubic-bezier(.25,.8,.25,1);
}

.micro-content-phrase
{
	text-align: left;
	font-size: 1.2rem;
}

.micro-content-drop-down-button
{
	float: right;
}

.micro-content-collapsed > micro-content-phrase > button
{
	background-image: url('../Images/General/navigation-web.svg');
}

.micro-content .codeSnippet > p	/* Fixes margin issue with code snippets in micro content */
{
	margin-left: 10px;
}

div.micro-response pre > p
{
	padding-left: 15px;
}

#searchPane	/* Keeps search results as the width of the container/screen */
{
	width: 100%;
}

/* Slideshow styling to keep it in line and centered */

MadCap|slideshow
{
	left: 0px;
}

.mc-viewport.MCSlider
{
	box-shadow: none;
	border-width: 0;
}

.slides
{
	border: solid 1px lightgrey;
	border-radius: 10px;
	left: 0px;
	background-color: #fafafa;
	margin: 0 auto;
	max-width: 100%;
	width: 1000px;
}

MadCap|miniTocProxy
{
	border: 3px solid #076685;
	padding: 5px 15px 5px 15px;
	border-radius: 15px;
	width: 30%;
	min-width: fit-content;
}

div.MCMiniTocBox_0::before
{
	content: 'Section Topics:';
	font-size: 1.2rem;
	font-weight: bold;
	margin-left: -5px;
	text-decoration: underline;
	color: #076685;
}

p.MiniTOC1_0
{
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

/* // END OF MADCAP FEATURE STYLING // */
/* // ADDITIONAL TOC STYLING // */

.is-accordion-submenu-parent > a span.submenu-toggle	/* Removes the border that creates the default triangle shape */
{
	border: none;
}

.is-accordion-submenu-parent > a span.submenu-toggle::after	/* Adds a default icon (for when the menu is collapsed). I used a white Spade this time. */
{
	content: url('../Images/General/navigation-web.png');
	/* The icon code */
	position: absolute;
	/* Do not change */
	left: -10px;
	/* The left/right positioning of the icon */
	bottom: -15px;
	/* The top/bottom positioning of the icon */
}

.TocHeader > a span.submenu-toggle::after
{
	/* TocHeaders need a slightly different position */
	bottom: -18px;
}

@media screen and (max-width: 1279px)
{
	.TocHeader > a span.submenu-toggle::after
	{
		bottom: -15px;
	}
}

.is-accordion-submenu-parent > a [aria-expanded='false'] span.submenu-toggle:hover::after
{
	transform: rotate(45deg);
	transition: .3s;
}

.submenu-toggle-container[aria-expanded='true'] > span.submenu-toggle,
.is-accordion-submenu-parent > a[aria-expanded='true'] > .submenu-toggle-container > span.submenu-toggle
{
	transform: scaleY(1);
}

.is-accordion-submenu-parent > a [aria-expanded='true'] span.submenu-toggle	/* Stops the icon from flipping upside down when you expand the menu */
{
	-webkit-transform-origin: none;
	-ms-transform-origin: none;
	transform-origin: none;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

ul.sidenav li.is-accordion-submenu-parent > a [aria-expanded='true'] span.submenu-toggle:hover::after
{
	transform: rotate(45deg);
	transition: .3s;
}

.is-accordion-submenu-parent > a [aria-expanded='true'] span.submenu-toggle::after	/* Changes the icon for when the menu is expanded */
{
	transform: rotate(90deg);
	transition: .3s;
}

/* // END OF ADDITIONAL TOC STYLING // */

@media screen and (min-width: 1280px)
{
	#mc-main-content > p
	{
		max-width: 1100px;
	}
}

@media screen and (max-width: 599px)
{
	#mc-main-content
	{
		width: 98%;
	}

	.panels
	{
		flex-direction: column;
		max-width: 100%;
	}

	#rightPanels
	{
		padding: 0px;
	}

	.slideshow
	{
		padding: 0px;
	}

	.footerPadding
	{
		height: 60px;
	}
}

@media print
{
	body
	{
		font-size: 16px;
		letter-spacing: 0.25px;
		mc-hyphenate: never;
	}

	/* // CHAPTER STYLING // */

	h1
	{
		border-bottom: 1px solid #D7DF23;
		background-color: transparent;
		line-height: 1.25em;
		margin-bottom: 20px;
		margin-left: 0;
		padding-left: 0px;
		padding-top: -30px;
		padding-bottom: 3px;
		mc-auto-number-format: '{chapnum}  ';
		mc-auto-number-class: 1spatialautonum;
		text-indent: 25px;
		mc-hyphenate: never;
	}

	span.1spatialautonum	/* This is the Chapter Number for the PDF docs */
	{
		mc-float: outside-left;
		width: 53px;
		max-width: 53px;
		height: 52px;
		text-align: right;
		margin-right: -53px;
		/* Pulls the box into place */
		margin-top: -10px;
		padding-top: 15px;
		/* Pushes the number down */
		padding-right: 5px;
		/* Pushes the number left */
		padding-left: -100px;
		font-weight: bold;
		color: #404040;
		font-size: 0.80rem;
		background-color: transparent;
		background-image: url('../Images/General/box.png');
		background-repeat: no-repeat;
		background-position: left top;
	}

	/* // END OF CHAPTER STYLING // */

	MadCap|toggler
	{
		color: #000000;
	}

	p
	{
		word-break: normal;
		overflow-wrap: normal;
		line-height: 1.4em;
	}

	li
	{
		word-break: normal;
		overflow-wrap: normal;
	}

	MadCap|xref
	{
		font-weight: normal;
		mc-format: '{quote}{para}{quote} {pageref}';
		text-decoration: none;
	}

	/* // TITLE PAGE STYLING // */

	.titleHeadings	/* H tags in print automatically join the toc proxy. These styles stop the title page and contents headings from appearing in the toc. */
	{
		text-align: left;
		margin-bottom: 120px;
		font-weight: bold;
	}

	.titleHeadings > p
	{
		font-size: 2rem;
	}

	.titleHeadings > p:nth-child(1),
	.tocheading
	{
		font-size: 2.5rem;
		border-bottom: 1px solid lightgrey;
	}

	.titleInfo
	{
		text-align: left;
		margin: 0px 20px;
	}

	/* // END OF TITLE PAGE STYLING // */

	h1
	{
		font-size: 2.1rem;
	}

	h2
	{
		font-size: 1.7rem;
	}

	h3
	{
		font-size: 1.3rem;
	}

	h4
	{
		font-size: 1.1rem;
	}

	h5
	{
		font-size: 18pt;
	}

	popout
	{
		width: 400px;
	}

	popoutSmall
	{
		width: 300px;
	}

	figcaption
	{
		font-size: 0.83333rem;
	}

	/* // CALLOUT BOX STYLING // */
	/* Background positions need to be changed depending on containers as some do move the contents around. The images have to be custom sized for PDF format else they remain full sized. */

	div.note,
	div.warning,
	div.example,
	p.note
	{
		font-size: 0.83333rem;
		page-break-inside: avoid;
		padding-left: 10px;
	}

	div.example
	{
		background-image: url('../Images/General/text-box-edit-outline-blue-16.png');
		background-position: 11px 14px;
		background-size: 16px;
	}

	div.example > p:nth-child(1)
	{
		mc-auto-number-format: '{size 16}{color #076685}      {b}Example{/b}: {/color}{/size}';
	}

	div.note,
	p.note
	{
		background-image: url('../Images/General/pencil-purple-16.png');
		background-position: 12px 14px;
		background-size: 16px;
	}

	div.note > p:nth-child(1),
	p.note
	{
		mc-auto-number-format: '{size 16}{color #582d87}      {b}Note{/b}: {/color}{/size}';
	}

	div.warning
	{
		background-image: url('../Images/General/alert-outline-red-16.png');
		background-position: 12px 14px;
		background-size: 16px;
	}

	div.warning > p:nth-child(1)
	{
		mc-auto-number-format: '{size 16}{color #8b0000}      {b}Warning{/b}: {/color}{/size}';
	}

	/* Callouts inside tables */

	td div.example
	{
		background-image: url('../Images/General/text-box-edit-outline-blue-15.png');
		background-position: 12px 13px;
		background-size: 15px;
	}

	td div.example > p:nth-child(1)
	{
		mc-auto-number-format: '{size 15}{color #076685}      {b}Example{/b}: {/color}{/size}';
	}

	td div.note
	{
		background-image: url('../Images/General/pencil-purple-15.png');
		background-position: 12px 12px;
		background-size: 15px;
	}

	td div.note > p:nth-child(1)
	{
		mc-auto-number-format: '{size 15}{color #582d87}      {b}Note{/b}: {/color}{/size}';
	}

	td div.warning
	{
		background-image: url('../Images/General/alert-outline-red-15.png');
		background-position: 11px 12px;
		background-size: 15px;
	}

	td div.warning > p:nth-child(1)
	{
		mc-auto-number-format: '{size 15}{color #8b0000}      {b}Warning{/b}: {/color}{/size}';
	}

	/* Callouts inside lists */

	ol div.example,
	ul div.example
	{
		background-image: url('../Images/General/text-box-edit-outline-blue-15.png');
		background-position: 12px 14px;
		background-size: 15px;
	}

	ol div.note,
	ul div.note
	{
		background-image: url('../Images/General/pencil-purple-15.png');
		background-position: 12px 13px;
		background-size: 15px;
	}

	ol div.warning,
	ul div.warning
	{
		background-image: url('../Images/General/alert-outline-red-15.png');
		background-position: 12px 14px;
		background-size: 15px;
	}

	/* Callouts inside lists in a table */

	ol table div.example,
	ul table div.example
	{
		background-position: 13px 12px;
	}

	ol table div.note,
	ul table div.note
	{
		/* Nothing necessary */
	}

	ol table div.warning,
	ul table div.warning
	{
		background-position: 15px 11px;
	}

	/* Callouts inside lists in a table */

	table ol div.example,
	table ul div.example
	{
		background-position: 12px 13px;
	}

	table ol div.note,
	table ul div.note
	{
		background-position: 11px 13px;
	}

	table ol div.warning,
	table ul div.warning
	{
		background-position: 11px 12px;
	}

	/* // END OF CALLOUT BOX STYLING // */

	MadCap|glossaryTerm
	{
		color: #582D87;
	}

	figure
	{
		padding-left: 0px;
		padding-right: 0px;
	}

	ol figure,
	ul figure
	{
		margin-left: -5px;
	}

	.icon
	{
		width: auto;
		height: 40px;
	}

	pre[class*=language-]	/* Makes the copy and language toolbar elements sit above code instead of over it */
	{
		padding: 3em 1em 1em;
	}

	table.AutoNumber_p > tbody > tr > td:nth-child(3)	/* Makes PDF code styles scrollable if they happen to be in a page */
	{
		padding-right: 10px;
	}

	.noTopBorder	/* Removes top-border that would utherwise look weird with the underlined title */
	{
		border-top: none;
	}

	.breakBefore
	{
		page-break-before: always;
	}

	ol,
	ul
	{
		margin-left: 5px;
	}

	li
	{
		line-height: 1.5;
	}

	.screenshot,
	.popout,
	.popoutSmall
	{
		border-radius: none;
	}

	._Skins_FAQs
	{
		width: 100%;
		max-width: 100%;
	}
}

@media only screen and (max-width: 1279px)
{
	body
	{
		width: 100vw;
	}

	.body-container > div:nth-child(1)	/* Adds padding to the right side of the page without breaking borders */
	{
		padding-right: 0px;
	}

	.off-canvas-wrapper-inner .outer-row
	{
		padding-left: 0.35rem;
		padding-right: 0.35rem;
	}

	div.Proxies > div
	{
		float: none;
	}

	._Skins_FAQs
	{
		min-width: 350px;
	}

	.footerRight
	{
		float: left;
	}

	figure
	{
		margin: auto;
	}

	ol figure,
	ul figure
	{
		margin-left: 0;
		margin-right: 0;
	}

	.codeSnippet > p
	{
		margin: -32px 0px 0px -14px;
	}

	pre[class*=language-]
	{
		padding: 3em 1em 1em;
	}

	div.micro-response pre.codeSnippet
	{
		padding-top: 40px;
	}

	.mc-wrapper .mc-viewport	/* Makes slideshows fit small screens without overflowing */
	{
		border-style: none;
	}

	.slideshow	/* Gives slideshows a slight padding to make images less cramped */
	{
		padding: 0px 10px;
	}
}

@media only screen and (max-width: 1279px)
{
	html.home-topic .body-container
	{
		margin-left: 0;
	}

	.breadcrumbs
	{
		max-width: 50%;
	}
}

@media only screen and (max-width: 767px)
{
	.breadcrumbs
	{
		max-width: 85%;
	}

	.footerPadding
	{
		height: 270px;
	}

	footer
	{
		left: 0;
		display: inline;
	}
}

@media screen
{
	
}