/*<meta />*/

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

/*===========================================================================================================================================================

Hello! If this is your first time looking at a stylesheet within the text editor view, what you are reading right now is a "comment". Comments are added throughout this stylesheet with the purpose of making the source code easier to understand, comments will not be interpreted during the compile process. Since comments are not interpreted during the compile process, feel free to add or remove any comments.

For help with MadCap Flare go to Help Ribbon > Topics Section > Open Help. Alternatively visit the Flare Online Help at help.madcapsoftware.com

If you have any questions regarding how to work with this stylesheet or template project, please contact MadCap Technical Support. 
https://www.madcapsoftware.com/support/contact-options.aspx

===========================================================================================================================================================*/

/*==Topic General Styles==*/

body
{
	color: #404040;
	font-family: var(--FontFamily);
	line-height: 1.7em;
}

h1
{
	font-size: 1.5em;
	font-weight: normal;
	padding-bottom: 10px;
	margin-bottom: 8px;
	margin-top: 0px;
	color: var(--Primary);
}

h2
{
	font-size: 1.2em;
	font-weight: normal;
	margin-bottom: 4px;
	margin-top: 20px;
	color: var(--Secondary);
}

h3
{
	font-size: 1.1em;
	font-weight: normal;
	margin-bottom: 4px;
	margin-top: 16px;
}

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

p
{
	margin-top: 8px;
}

p.menu-caption
{
	margin-top: 8px;
	margin-bottom: 3px;
	font-weight: bold;
	font-size: 14pt;
}

p.slideshow-link
{
	font-size: 14pt;
	font-weight: bold;
	color: var(--Secondary);
}

p.slideshow-link a:link
{
	color: inherit;
}

/*==Mad Cap proxy/editor assigned styles==*/

img	/*Setting max-width: 100%; property makes images always fit the width of the container*/
{
	max-width: 100%;
}

MadCap|dropDown
{
	mc-open-image: url('../Images/Assets/Icons/Arrows/arrow-down-gray.png');
	mc-closed-image: url('../Images/Assets/Icons/Arrows/arrow-right-gray.png');
}

MadCap|dropDownHotspot
{
	color: var(--Secondary);
	font-weight: bold;
}

div.MCSlide
{
	word-wrap: normal;
}

/*== Top menu bar styles ==*/

div.header-container
{
	width: 30%;
	float: right;
	height: 75px;
	background-color: #F7F9FC;
	border-bottom-left-radius: 100px;
	box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.18);
	padding-left: 3%;
}

div.header
{
	padding-top: 3%;
	padding-bottom: 1%;
	width: 100%;
}

div.header p	/*Complex Selector: Any <p> that is contained within div.header will have the following properties*/
{
	color: var(--Secondary);
	font-size: 1.3em;
	padding-left: 5px;
	padding-right: 5px;
}

div.header a	/*Complex Selector: Any anchor (links) tags that are within div.header will have the following properties */
{
	text-decoration: none;
	color: var(--Secondary);
}

div.other-topics-header
{
	top: 0;
	left: var(--SideNavWidth);
	/*adjusts the width of the header containing the logo based on the width of the side nav*/
	right: 1%;
	position: fixed;
	z-index: 1;
	background-color: #fff;
}

div.template-page-header	/*This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/
{
	mc-grid-row: true;
	margin-right: 1%;
	text-align: center;
}

div.template-page-header::before
{
	content: ' ';
	display: table;
}

div.template-page-header::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.template-page-header > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.template-page-header > div:hover
{
	transform: scale(1.25);
}

div.header p:hover
{
	color: var(--Light);
}

div.template-page-header > div:nth-child(1)
{
	width: 33.333%;
	margin-left: 0%;
}

div.template-page-header > div:nth-child(2)
{
	width: 33.333%;
	margin-left: 0%;
}

div.template-page-header > div:nth-child(3)
{
	width: 33.333%;
	margin-left: 0%;
}

div.toolbar-container
{
	margin-left: 2%;
	margin-right: 2%;
	margin-top: 2%;
}

/* Template Page General Styles*/

.body-container
{
	padding-top: 0;
	background-color: var(--Lightest);
	padding-left: 0;
	padding-right: 0;
}

div.topic-container
{
	margin-top: 12%;
}

/*Side-nav and Header Styles */

.sidenav-container
{
	padding-top: 100px;
	/*positions the side navigation menu items under the logo. May need to adjust if the height of the logo covers the sidenav menu items */
}

nav.title-bar
{
	width: var(--SideNavWidth) !important;
	/*applied at build time to reduce flicker when loading the page */
}

div.title-bar-container.sticky-container
{
	width: var(--SideNavWidth) !important;
	/* Shrinks logo container to width of sidenav */
	padding: 0;
	margin: 0;
	position: fixed;
}

/* Move logo to left inside the container */

div.title-bar-container.sticky-container > div
{
	margin-left: 0 !important;
	/* Align logo flush left */
}

/*==Template Page Topic Layout==*/

div.topic-layout	/*This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/
{
	mc-grid-row: true;
	margin: 0 auto;
	background-color: #FFF;
	padding: 0 25px;
	min-height: 85vh;
	margin-top: 45px;
}

div.topic-content
{
	float: left;
	width: 85%;
	margin-left: 0;
	margin-right: 0;
	border-right: solid 2px var(--Medium);
	padding: 5px 25px;
	min-height: 85vh;
	/*ensures that the vertical border line reaches the bottom of the topic container*/
}

/*Menu Proxy container*/

div.menu-content
{
	float: left;
	width: 12%;
	padding: 10px 10px;
	position: fixed;
	margin-left: 66%;
}

div.search-layout
{
	padding-left: 2em;
	padding-right: 2em;
	margin-top: 8%;
}

MadCap|breadcrumbsProxy
{
	margin-bottom: 0;
	font-style: italic;
	color: var(--Dark);
	border-bottom: solid 2px var(--Medium);
}

span.MCBreadcrumbsPrefix
{
	font-weight: bold;
}

/*==slideshow snippet styles*/

h1.slide
{
	color: var(--Secondary);
	font-size: 2.5em;
	border-bottom: solid 1px #ccc;
	padding-bottom: 10px;
	text-align: left;
	width: 90%;
	margin-left: 5%;
	margin-bottom: 1%;
	margin-top: 10px;
	font-weight: bold;
	line-height: normal;
}

h2.slide
{
	color: var(--Secondary);
	font-weight: bold;
	margin-bottom: 20px;
}

h3.slide
{
	font-weight: bold;
}

.layout-left-accent > div:nth-child(1)
{
	width: 49%;
	background-color: var(--Primary);
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 3%;
	padding-bottom: 3%;
	border-radius: 10px;
	float: left;
	border: 1px solid #d3d3d3;
	/*this is only to view the separate div columns in the XML editor and is removed in the output*/
	color: var(--Lightest);
}

.layout-left-accent > div:nth-child(2)
{
	width: 50%;
	text-align: left;
	padding-left: 5%;
	float: left;
	border: 1px solid #d3d3d3;
	/*this is only to view the separate div columns in the XML editor and is removed in the output*/
}

.layout-single .layout-left-accent > div:nth-child(1)
{
	width: 40%;
	background-color: white;
	margin-right: 0;
}

.layout-single .layout-left-accent > div:nth-child(2)
{
	width: 60%;
}

.layout-right-accent > div:nth-child(1)
{
	width: 45%;
	text-align: left;
	float: left;
	margin-left: 1%;
	border: 1px solid #d3d3d3;
	/*this is only to view the separate div columns in the XML editor*/
}

.layout-right-accent > div:nth-child(2)
{
	width: 49%;
	background-color: var(--Primary);
	margin-left: 5%;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 3%;
	padding-bottom: 3%;
	border-radius: 10px;
	float: left;
	border: 1px solid #d3d3d3;
	/*this is only to view the separate div columns in the XML editor*/
	color: var(--Lightest);
}

.layout-single .layout-right-accent > div:nth-child(1)
{
	width: 50%;
}

.layout-single .layout-right-accent > div:nth-child(2)
{
	width: 44%;
	background-color: white;
	margin-left: 0;
}

div.slideshow-container
{
	width: 100% !important;
	padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 1%;
	margin-top: 5%;
}

.left-align
{
	text-align: left;
}

.layout-card
{
	background-color: white;
	width: 90%;
	border-radius: 10px;
	padding: 2%;
	box-shadow: 0 12px 18px rgba(0,0,0,.16), 0 12px 18px rgba(0,0,0,.23);
}

MadCap|dropDown.faq
{
	background-color: #EEF1F5;
	padding: 10px 10px 10px 0;
	margin-bottom: 15px;
	border-bottom: none;
}

div.dropDownfaq a.MCHotSpotImage
{
	display: block;
	background-position: right !important;
}

/*===========================================================================================================================================================
Styles after this point are styles that are for specific mediums. If any additional styles are added to this template they will be listed after mediums.
[@media tablet] declares styles that will apply when the screen is in tablet view
[@media mobile] declares styles that will apply when the screen is in mobile view
===========================================================================================================================================================*/

.layout-right-accent > div:nth-child(2)
{
	border: none;
}

.layout-right-accent > div:nth-child(1)
{
	border: none;
}

.layout-left-accent > div:nth-child(2)
{
	border: none;
}

.layout-left-accent > div:nth-child(1)
{
	border: none;
}

.layout-single > div
{
	background-color: var(--Lightest);
	width: 90%;
	border-radius: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	box-shadow: 0 12px 18px rgba(0, 0, 0, 0.16), 0 12px 18px rgba(0, 0, 0, 0.23);
	padding: 2%;
	display: block;
}

.layout-single
{
	justify-content: center;
	align-items: center;
	background-color: var(--Primary);
	background: linear-gradient(to bottom,
    	rgba(255,255,255,0.14),
    	rgba(0,0,0,0.10)), radial-gradient(circle at top left,
    	rgba(120, 180, 255, 0.18),
    	transparent 60%), var(--Primary);
	width: 100%;
	border-radius: 10px;
	min-height: 300px;
	padding-top: 5%;
	padding-bottom: 5%;
}

.layout-single
{
	display: flex;
}

div.search-container
{
	width: 50%;
	margin-left: 1%;
	display: flex;
	margin-top: .5%;
}

@media only screen and (max-width: 1279px)
{
	div.topic-container
	{
		margin-top: 0;
	}

	div.other-topics-header
	{
		left: 2%;
		top: 0;
		position: relative;
		width: 98%;
	}

	div.header-container
	{
		display: none;
	}

	div.search-container
	{
		display: none;
	}

	div.menu-content
	{
		margin-left: 1%;
		padding-top: 0;
		position: relative;
	}

	div.topic-layout
	{
		margin-top: 20px;
	}

	div.search-layout
	{
		margin-top: 0;
		padding-top: 1em;
	}

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

	.nav-search
	{
		display: block;
	}

	nav.title-bar
	{
		width: 100% !important;
	}

	div.title-bar-container.sticky-container
	{
		width: 100% !important;
		padding: 0;
		margin: 0;
		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
		position: relative;
	}

	.layout-left-accent > div
	{
		margin-left: 2%;
	}

	.layout-right-accent > div
	{
		margin-left: 2%;
	}
}

@media only screen and (max-width: 767px)
{
	div.header-links
	{
		display: none;
	}

	div.topic-content
	{
		width: 100%;
		float: none;
		border-right: none;
	}

	div.menu-content
	{
		display: none;
	}

	div.other-topics-header
	{
		top: 18%;
	}
}

@media html5
{
	/*============================================================================================================================================================================================================
This is a custom stylesheet medium used to correct the display of certain elements that could otherwise appear incorrectly in the XML Editor.
The medium is assigned to the target under the Advanced tab in the Stylesheet Medium section. This approach ensures that elements are styled appropriately in the built output, while still displaying cleanly in the XML Editor - which uses the Default medium for preview.
================================================================================================================================================================================================================*/

	div.search-container
	{
		width: 50%;
		margin-left: 1%;
		display: flex;
		margin-top: .5%;
	}

	.layout-single
	{
		display: flex;
	}

	.layout-single
	{
		justify-content: center;
		align-items: center;
		background-color: var(--Primary);
		background: linear-gradient(to bottom,
    	rgba(255,255,255,0.14),
    	rgba(0,0,0,0.10)), radial-gradient(circle at top left,
    	rgba(120, 180, 255, 0.18),
    	transparent 60%), var(--Primary);
		width: 100%;
		border-radius: 10px;
		min-height: 300px;
		padding-top: 5%;
		padding-bottom: 5%;
	}

	.layout-single > div
	{
		background-color: var(--Lightest);
		width: 90%;
		border-radius: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
		box-shadow: 0 12px 18px rgba(0, 0, 0, 0.16), 0 12px 18px rgba(0, 0, 0, 0.23);
		padding: 2%;
		display: block;
	}

	.layout-left-accent > div:nth-child(1)
	{
		border: none;
	}

	.layout-left-accent > div:nth-child(2)
	{
		border: none;
	}

	.layout-right-accent > div:nth-child(1)
	{
		border: none;
	}

	.layout-right-accent > div:nth-child(2)
	{
		border: none;
	}
}

/*================================================================================================================================================================
This section contains styles associated with JavaScript used in the Flare project. These styles are applied dynamically to ensure proper display and behavior of interactive elements in the output. Modifying these styles may impact how JavaScript-driven features function or render. Review related scripts before making changes.
==================================================================================================================================================================*/

/*--Javascript Feature Styles--*/
/* Heading Bookmark Styles*/

.bookmark-hotspot
{
	position: relative;
}

.bookmark-hotspot:hover a.heading-link
{
	opacity: 1;
	background-image: url('../Images/Assets/Icons/bookmark.svg');
	/* replace with your desired link icon */
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position: center;
	width: 25px;
	margin-left: -25px;
	display: inline-block;
}

a.heading-link
{
	opacity: 0;
	text-decoration: none;
	letter-spacing: 1px;
	position: relative;
	display: none;
}

div#anchor-icon
{
	display: inline;
}

.bookmark-hotspot.active:after
{
	font-size: 10px;
	margin-left: 10px;
	padding: 5px;
	content: 'Copied!';
	background-color: var(--Dark);
	color: #fff;
	border-radius: 5px;
	position: absolute;
	top: -20px;
	left: -20px;
}

h1#results-heading	/* prevent heading in search results from being a bookmark */
{
	cursor: auto;
}

h1#results-heading:active:after	/* prevent heading in search results from being a bookmark */
{
	display: none;
}

/* End Heading Bookmark Styles */
/* Back to Top button styles */

button#backToTopBtn
{
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	font-size: 18px;
	font-weight: bold;
	border: none;
	outline: none;
	color: #fff;
	/* Text color */
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
	background-color: var(--Primary);
	background-position: center;
	background-repeat: no-repeat;
}

button#backToTopBtn:hover
{
	background-color: transparent;
	color: var(--Primary);
	border: 1px solid var(--Primary);
}

span.SearchHighlight
{
	background: #ffff00;
}

/* End Back to Top button styles */
/* highlight toggle styles */

span.highlight-hidden
{
	background-color: transparent !important;
}