/*<meta conditions="SBC_template.SBC template" />*/

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

/* Custom stylesheet - add your own project-specific styles */
/* import extra CSS files for this project */

h1
{
	font-family: "Sage UI", Arial, Helvetica, sans-serif;
	font-size: 2.5em;
	/* CSS variable IE 11 support */
	font-size: var(--font-size-h1);
	font-weight: 500;
	line-height: 1.25em;
	margin: 0.25em 0em 0.5em 0em;
}

h2
{
	font-family: "Sage UI", Arial, Helvetica, sans-serif;
	font-size: 2em;
	/* CSS variable IE 11 support */
	font-size: var(--font-size-h2);
	font-weight: 500;
	line-height: 1.25em;
	margin: 1.5em 0em 0.5em 0em;
}

h3
{
	font-family: "Sage UI", Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	/* CSS variable IE 11 support */
	font-size: var(--font-size-h3);
	font-weight: 500;
	line-height: 1.25em;
	margin: 1.5em 0em 0.5em 0em;
}

h4
{
	font-family: "Sage UI", Arial, Helvetica, sans-serif;
	font-size: 1.25em;
	/* CSS variable IE 11 support */
	font-size: var(--font-size-h4);
	font-weight: 500;
	line-height: 1.25em;
	margin: 1.5em 0em 0.5em 0em;
}

h5
{
	font-family: "Sage UI", Arial, Helvetica, sans-serif;
	font-size: 1.125em;
	/* CSS variable IE 11 support */
	font-size: var(--font-size-h5);
	font-weight: 500;
	line-height: 1.25em;
	margin: 1.5em 0em 0.5em 0em;
}

h6
{
	font-family: "Sage UI", Arial, Helvetica, sans-serif;
	font-size: 1em;
	/* CSS variable IE 11 support */
	font-size: var(--font-size-h6);
	font-weight: 500;
	line-height: 1.25em;
	margin: 1.5em 0em 0.5em 0em;
}

a.btn-wizard-right,
a.btn-wizard-left
{
	border: 2px solid #007E45;
	/* CSS variable IE 11 support */
	border: 2px solid var(--business-product);
	color: #007E45 !important;
	/* CSS variable IE 11 support */
	color: var(--business-product) !important;
	background-color: #ffffff;
	display: inline-block;
	font-size: 1em;
	font-weight: 500;
	line-height: 1em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	text-decoration: none;
	cursor: pointer;
}

a[class*="btn-wizard"]:hover,
a[class*="btn-wizard"]:focus
{
	color: #ffffff !important;
	background-color: #006738;
	/* CSS variable IE 11 support */
	background-color: var(--business-product-hover1);
	border: 2px solid #006738;
	/* CSS variable IE 11 support */
	border: 2px solid var(--business-product-hover1);
	text-decoration: none;
}

a.btn-wizard-left
{
	text-align: left;
	float: left;
	margin-right: 1em;
}

a.btn-wizard-right
{
	text-align: right;
	float: right;
	margin-left: 1em;
}

a.btn-wizard-left:after
{
	font-family: "FontAwesome";
	content: "\f105";
	/* FontAwesome : fa-angle-right */
	padding: 0 0 0 0.5em;
	display: inline-block;
}

a.btn-wizard-right:before
{
	font-family: "FontAwesome";
	content: "\f104";
	/* FontAwesome : fa-angle-left */
	padding: 0 0.5em 0 0;
	display: inline-block;
}

a.sageButton,
a.sageButtonWebchat,
a.sageButtonLeft,
a.sageButtonRight,
a.sageButtonMedium,
a.sageButtonMediumLeft,
a.sageButtonMediumRight,
a.sageButtonLarge,
a.sageButtonLargeLeft,
a.sageButtonLargeRight,
a.sageButtonPrimary,
a.sageButtonPrimaryLeft,
a.sageButtonPrimaryRight,
a.sageButtonPrimaryMedium,
a.sageButtonPrimaryMediumLeft,
a.sageButtonPrimaryMediumRight,
a.sageButtonPrimaryLarge,
a.sageButtonPrimaryLargeLeft,
a.sageButtonPrimaryLargeRight	/* Defined button styles */
{
	
}

a[class*="sageButton"]	/* sageButton: base styles for button  - default is right arrow */
{
	border: 2px solid #335B70;
	/* CSS variable IE 11 support */
	border: 2px solid var(--col-action-minor-500);
	background-color: #ffffff;
	color: #335B70 !important;
	/* CSS variable IE 11 support */
	color: var(--col-action-minor-500) !important;
	display: inline-block;
	font-size: 1em;
	font-weight: 500;
	line-height: 1em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	text-decoration: none;
	cursor: pointer;
}

a[class*="sageButtonWebchat"]:hover	/* sageButton: hover style for button */
{
	color: #335B70 !important;
	background-color: #f2f2f2;
	/* CSS variable IE 11 support */
	background-color: var(--col-yin-05);
	border: 2px solid #f2f2f2;
	/* CSS variable IE 11 support */
	border: 2px solid var(--col-yin-05);
	text-decoration: none;
}

img.thumbnail[src^="http"]	/* Disable styling of thumbnail images, if image path starts with http */
{
	padding: 0;
	border: none;
}

img.thumbnail[src^="http"]:hover,
img.thumbnail[src^="http"]:focus	/* Disable styling of thumbnail images, if image path starts with http */
{
	border: none;
	box-shadow: none;
}

div.steps > p,
div.steps > img,
div.steps > div,
div.steps > table	/* Align non-list items that are inside a steps list with the list items */
{
	margin-left: 2em;
}

div.tile i.fa
{
	/* set font size on FA icons in tiles */
	font-size: 7rem;
}

.llm-hide-fab
{
	display: none !important;
}

.llm-show-fab
{
	display: block;
}

div[aria-label="Close Messenger"]
{
	visibility: hidden;
}

.llm-fab-close
{
	font-family: 'Nunito Sans', 'Helvetica', 'Arial', sans-serif;
	background-color: rgb(0, 163, 118);
	background-image: none;
	border: rgb(0, 163, 118) 2px solid;
	border-radius: 4px;
	padding: 10px 0;
	width: 275px;
	text-align: center;
	margin-right: 20px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
}

MadCap|toggler.heading	/* MadCap|toggler.heading: Toggler with heading */
{
	font-family: "Sage UI", Arial, Helvetica, sans-serif;
	font-weight: 500;
	font-size: 1.25em;
	/* CSS variable IE 11 support */
	font-size: var(--font-size-h4);
	/* same as h4 */
	margin-top: 1em;
	margin-bottom: 0.5em;
}

span.boxTitle	/* span.boxTitle: Heading style for boxes (based on h4) */
{
	font-family: "Sage UI", Arial, Helvetica, sans-serif;
	font-size: 1.25em;
	/* CSS variable IE 11 support */
	font-size: var(--font-size-h4);
	/* same as h4 */
	font-weight: 500;
	line-height: 1.25em;
	margin: 0em 0em 0.5em 0em;
	display: block;
}

p.linksboxHeading	/* based on h4 */
{
	font-family: "Sage UI", Arial, Helvetica, sans-serif;
	font-size: 1em;
	/* CSS variable IE 11 support */
	font-size: var(--font-size-h6);
	/* same as h6 */
	font-weight: 700;
	line-height: 1.25em;
}

p.boxHeading	/* p.boxHeading: based on h6 style  */
{
	font-family: "Sage UI", Arial, Helvetica, sans-serif;
	font-size: 1em;
	/* CSS variable IE 11 support */
	font-size: var(--font-size-h6);
	/* same as h6 */
	font-weight: 700;
	line-height: 1.25em;
	margin: 0em 0em 0.5em 0em;
}

span.reference	/* span.reference: references to UI */
{
	font-weight: 500;
	/* bolder - Sage UI medium  */
	font-size: 1em;
	/* CSS variable IE 11 support */
}

div.pill-update
{
	padding: 0em 0em 0em 7em;
	/* Sets the spacing before text. May need to increase depending on text length. */
	position: relative;
}

div.pill-update:before
{
	content: "Updates";
	background-color: #4d7080;
	background-color: var(--col-semantic-neutral);
	font-size: 1em;
	font-weight: 600;
	color: white;
	position: absolute;
	top: 0px;
	left: 5px;
	padding: 5px 5px 5px 5px;
	border-radius: 10px;
}

div.pill-bug
{
	padding: 0em 0em 0em 7em;
	/* Sets the spacing before text. May need to increase depending on text length. */
	position: relative;
}

div.pill-bug:before
{
	content: "Bug Fixes";
	background-color: #0060a7;
	background-color: var(--col-semantic-info);
	font-size: 1em;
	font-weight: 600;
	color: white;
	position: absolute;
	top: 0px;
	left: 5px;
	padding: 5px 5px 5px 5px;
	border-radius: 10px;
}

div.pill-feature
{
	padding: 0em 0em 0em 7em;
	/* Sets the spacing before text. May need to increase depending on text length. */
	position: relative;
}

div.pill-feature:before
{
	content: "Feature";
	background-color: #008a21;
	background-color: var(--col-semantic-positive);
	font-size: 1em;
	font-weight: 600;
	color: white;
	position: absolute;
	top: 0px;
	left: 5px;
	padding: 5px 5px 5px 5px;
	border-radius: 10px;
}

.responsive
{
	width: 100%;
	max-width: 400px;
	height: auto;
}

div.borderBox	/* div.linksBox: Box containing links (normal) */
{
	margin: 0.5em 0em 1em 0em;
	padding: 1em;
	background-color: #ffffff;
	/* CSS variable IE 11 support */
	border: 2px solid #006300;
	width: auto;
	overflow: auto;
}

div.threeColumn	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.threeColumn::before
{
	content: ' ';
	display: table;
}

div.threeColumn::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.threeColumn > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.threeColumn > div:nth-child(1)
{
	width: 33.33333%;
	margin-left: 0%;
}

div.threeColumn > div:nth-child(2)
{
	width: 33.33333%;
	margin-left: 0%;
}

div.threeColumn > div:nth-child(3)
{
	width: 33.33333%;
	margin-left: 0%;
}

@media only screen and (max-width: 720px)
{
	div.twoColumn > div:nth-child(1)
	{
		width: 50%;
		margin-left: 0%;
	}

	div.twoColumn > div:nth-child(2)
	{
		width: 50%;
		margin-left: 0%;
	}

	div.threeColumn > div:nth-child(1)
	{
		width: 33.33333%;
		margin-left: 0%;
	}

	div.threeColumn > div:nth-child(2)
	{
		width: 33.33333%;
		margin-left: 0%;
	}

	div.threeColumn > div:nth-child(3)
	{
		width: 33.33333%;
		margin-left: 0%;
	}
}

@media only screen and (max-width: 480px)
{
	div.twoColumn > div:nth-child(1)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.twoColumn > div:nth-child(2)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.threeColumn > div:nth-child(1)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.threeColumn > div:nth-child(2)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.threeColumn > div:nth-child(3)
	{
		width: 100%;
		margin-left: 0%;
	}
}

div.tilesetbody > div
{
	/* Manually added to force all tiles to 50% */
	width: 50%;
	margin-left: 0%;
}

div.tilesetbody	/* This is a custom responsive layout row style (div class). Used on wizard master page to set 3 column page layout */
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.tilesetbody::before
{
	content: ' ';
	display: table;
}

div.tilesetbody::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.tilesetbody > div,
div.tilesetbody div.tile
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.tilesetbody > div,
div.tilesetbody div.tileright
{
	float: right;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.tilesetbody > div:nth-child(1),
div.tilesetbody div.tile:nth-child(1)
{
	width: 12%;
	margin-left: 0%;
}

div.tilesetbody > div:nth-child(2)
{
	width: 58%;
	margin-left: 0%;
}

div.tilesetbody > div:nth-child(3)
{
	width: 30%;
	margin-left: 0%;
}

@media only screen and (max-width: 720px)
{
	div.tilesetbody > div:nth-child(1)
	{
		width: 12%;
		margin-left: 0%;
	}

	div.tilesetbody > div:nth-child(2)
	{
		width: 58%;
		margin-left: 0%;
	}

	div.tilesetbody > div:nth-child(3)
	{
		width: 30%;
		margin-left: 0%;
	}
}

@media only screen and (max-width: 480px)
{
	div.tilesetbody > div:nth-child(1)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.tilesetbody > div:nth-child(2)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.tilesetbody > div:nth-child(3)
	{
		width: 100%;
		margin-left: 0%;
	}
}

div.tilesetweb > div
{
	/* Manually added to force all tiles to 50% */
	width: 50%;
	margin-left: 0%;
}

div.tilesetweb	/* This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help. */
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.tilesetweb::before
{
	content: ' ';
	display: table;
}

div.tilesetweb::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.tilesetweb > div,
div.tilesetweb div.tile
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.tilesetweb > div,
div.tilesetweb div.tileright
{
	float: right;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.tilesetweb > div:nth-child(1),
div.tilesetweb div.tile:nth-child(1)
{
	width: 25%;
	margin-left: 0%;
}

div.tilesetweb > div:nth-child(2)
{
	width: 50%;
	margin-left: 0%;
}

div.tilesetweb > div:nth-child(3)
{
	width: 25%;
	margin-left: 0%;
}

div.summaryBox	/* div.highlightBox: Highlight box (normal) */
{
	margin: 0.5em 0em 1em 0em;
	padding: 1em;
	background-color: #F2F5F6;
	/* CSS variable IE 11 support */
	background-color: var(--col-slate-95);
	width: auto;
	overflow: auto;
}

div.pill-recommended
{
	padding: 0em 0em 0em 7em;
	/* Sets the spacing before text. May need to increase depending on text length. */
	position: relative;
}

div.pill-recommended:before
{
	content: "Recommended";
	background-color: #008200;
	font-size: 0.8em;
	font-weight: 500;
	color: white;
	position: absolute;
	top: 0px;
	left: 5px;
	padding: 5px 5px 5px 5px;
	border-radius: 10px;
}

#keysurvey	/* sets the hight light the feedabck form to fix conflict with update master pages */
{
	width: 100%;
	height: 100%;
}