/*<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

NOTE: Generally, this stylesheet has elements listed out in the order that they appear in the topic from top to bottom. The exception are General styles which are at the top and the stylesheet mediums which are at the bottom.

EXAMPLE: Since the search-bar is at the top of the topic page, it will be listed closer to the top of this stylesheet.

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

/* --- Fallbacks so the validator sees valid values. This is to suppress harmless error messages for modern values like "display: grid" and "display: flex" on the home landing page. Flare flags these as "invalid" although browsers support them. --- */

.sc-hero-grid,
.sc-kc-grid
{
	display: block;
}

/* non-grid fallback */

.sc-kc-card
{
	display: block;
}

/* non-flex fallback */
/* --- fallback for the links row that uses flex --- */

.sc-kc-links
{
	display: block;
}

/* non-flex fallback */
/* --- Only enable modern layout when supported (browsers: yes; old validator: no) --- */

@supports (display: grid) {
  .sc-hero-grid,
  .sc-kc-grid { display: grid; }
} 

/* ==Topic General Styles==*/

body
{
	color: #404040;
	line-height: 1.7em;
	background-color: #fff;
	font-family: Arial;
}

h1
{
	font-weight: normal;
	margin-bottom: 8px;
	padding-bottom: 10px;
	margin-top: 30px;
	font-family: Arial;
	color: #f79421;
	font-size: 2.5em;
}

h2
{
	margin-bottom: 4px;
	margin-top: 20px;
	font-size: 1.4em;
	color: #576070;
	font-family: Arial;
	font-weight: bold;
}

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

h4
{
	
}

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

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

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

img.thumbnail
{
	mc-thumbnail: popup;
}

.center
{
	position: relative;
	margin-right: auto;
	margin-left: auto;
	float: none !important;
	text-align: center;
}

a.MCBreadcrumbsLink
{
	font-style: italic;
	text-decoration: underline;
}

a.MCBreadcrumbsLink:visited
{
	color: #7469b9;
}

a.MCBreadcrumbsLink:hover
{
	color: #000000;
}

MadCap|breadcrumbsProxy
{
	border-bottom: none;
	font-size: .7em;
	font-style: italic;
	mc-breadcrumbs-prefix: 'You are here: ';
}

MadCap|xref
{
	color: #2D8DCC;
	font-weight: bold;
	mc-format: '{para}';
	text-decoration: underline;
}

MadCap|xref:hover
{
	color: #7469b9;
}

MadCap|dropDownHotspot
{
	color: #f79421;
}

MadCap|dropDownBody
{
	border-bottom: 1px solid #d3d3d3;
}

MadCap|dropDown	/*Change the "mc-open-image" and "mc-closed-image" properties to change the icons used in drop-downs*/
{
	mc-open-image: url('../Images/Assets/Icons/Arrows/arrow-down-gray.png');
	mc-closed-image: url('../Images/Assets/Icons/Arrows/arrow-right-gray.png');
}

/*==Master Page Topic Layout==*/

nav.title-bar	/*Adds bottom border on top navigation bar*/
{
	border-bottom: 1px solid #d3d3d3;
}

div.top-bar	/*Contains the breadcrumbs and toolbar*/
{
	border-bottom: 1px solid #d3d3d3;
	min-height: 50px;
	/*Min-height is necessary for topics that are not included in a TOC*/
}

div.search-container
{
	padding-bottom: 1px;
}

/*==Elements for the left side of Master Page layout==*/

div.side-menu	/*This is the div that the menu proxy is contained in*/
{
	padding-left: 10px;
	margin-top: 15px;
}

div.side-content	/*This is the div for the side-content containing "Search Tips" and the "Contact Support" button*/
{
	padding-top: 10px;
}

MadCap|dropDownHead.side-content	/*Font properties for the "Search Tips" drop-down head */
{
	font-size: 1.1em;
	font-weight: bold;
}

div.cta	/*Call to action button/Contact Support button*/
{
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	border-radius: 60px;
	padding: 2px 0px;
	width: 162px;
	transition: all 0.5s cubic-bezier(.25,.8,.25,1);
	margin-top: 20px;
	border: 1px solid #f79421;
	color: #f79421;
}

div.cta:hover	/*When hovering over the CTA button the following properties will apply*/
{
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	transform: scale(1.01);
}

a.cta:link
{
	color: #FFF;
	text-decoration: none;
}

a.cta:visited
{
	color: #FFF;
	text-decoration: none;
}

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-left: auto;
	margin-right: auto;
}

div.topic-layout::before
{
	content: ' ';
	display: table;
}

div.topic-layout::after
{
	content: ' ';
	display: table;
	clear: both;
}

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

div.topic-layout > div:nth-child(1)	/*Menu Proxy container*/
{
	width: 25%;
	margin-left: 0%;
	border-right: 1px solid #d3d3d3;
}

div.topic-layout > div:nth-child(2)
{
	width: 73%;
	margin-left: 2%;
}

MadCap|menuProxy
{
	
}

/* =========================
   Shared sizing so BOTH grids move together
   ========================= */

:root
{
	--sc-max: 1040px;
	/* align with your content column */
	--sc-pad: clamp(12px, 4vw, 24px);
	/* fluid page side padding */
	--sc-gap: clamp(16px, 2.4vw, 24px);
	/* shared grid gap */
	--sc-title: #000000;
	/* title color */
	--sc-body: #4B4B69;
	/* body text color */
}

.sc-container
{
	max-width: var(--sc-max);
	margin-inline: auto;
	padding-inline: var(--sc-pad);
}

/* =========================
     TOP HERO GRID
     ========================= */

@supports (display: grid) {
  .sc-hero-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    grid-template-areas:
      "left  midTop   right"
      "left  midBottom right";
    gap: var(--sc-gap);
  }
} 

.sc-hero-tile
{
	display: block;
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 24px rgba(20,33,61,0.12);
	transition: transform .12s ease, box-shadow .12s ease;
}

.sc-hero-tile:hover
{
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(20,33,61,0.18);
}

.sc-hero-tile img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-hero--left
{
	grid-area: left;
	aspect-ratio: 3 / 5;
}

.sc-hero--right
{
	grid-area: right;
	aspect-ratio: 3 / 5;
}

.sc-hero--midTop,
.sc-hero--midBottom
{
	aspect-ratio: 16 / 9;
}

/* =========================
     BOTTOM CARDS GRID
     ========================= */

@supports (display: grid) {
  .sc-kc-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: var(--sc-gap);
  }
} 

.sc-kc-card
{
	background: #FFF;
	border: 1px solid #E0E0E0;
	/* figma */
	border-radius: 4px;
	/* figma */
	box-shadow: 0 4px 28.8px -30px rgba(0,0,0,0.25);
	/* figma */
	padding: 20px;
	transition: transform .12s ease, box-shadow .12s ease;
}

.sc-kc-card:hover
{
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(20,33,61,0.16);
}

.sc-kc-icon
{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 12px;
}

.sc-kc-title
{
	margin: 0 0 8px 0;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	/* figma */
	font-size: 14px;
	/* figma */
	line-height: 1;
	/* figma 'normal' for 14px */
	letter-spacing: 0.5px;
	/* figma */
	color: var(--sc-title);
}

.sc-kc-title a
{
	color: inherit;
	text-decoration: none;
}

.sc-kc-title a:hover
{
	text-decoration: underline;
}

.sc-kc-desc
{
	margin: 0;
	color: var(--sc-body);
	font-size: 12px;
	/* figma */
	font-weight: 400;
	/* figma */
	line-height: 1.45;
	/* comfortable for 2–3 lines */
	letter-spacing: 0.5px;
	/* figma */
}

/* fallback */

.sc-kc-links
{
	margin-top: 10px;
	display: block;
}

/* modern */

@supports (display: flex) {
  .sc-kc-links{ display:flex; gap:16px; }
} 

.sc-kc-links a
{
	color: #3C469D;
	text-decoration: underline;
	font-size: 12px;
}

/* small spacer between sections */

.sc-space
{
	margin: 8px 0 6px;
}

/* =========================
     Use your existing tokens: @media tablet / @media mobile
     We append our grid changes INSIDE them so nothing else is disturbed.
     ========================= */

@media only screen and (max-width: 1280px)
{
	.sc-hero-grid
	{
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "left   right" "midTop right" "midBottom right";
	}

	.sc-kc-grid
	{
		grid-template-columns: repeat(2, minmax(0,1fr));
	}
}

@media only screen and (max-width: 750px)
{
	.sc-hero-grid
	{
		grid-template-columns: 1fr;
		grid-template-areas: "left" "midTop" "midBottom" "right";
	}

	.sc-kc-grid
	{
		grid-template-columns: 1fr;
	}
}

/*===========================================================================================================================================================
Styles for the landing page to avoid underlined text links on the panels. and so all the panels in the lower grid are all a uniform height.
===========================================================================================================================================================*/

.sc-kc-grid > a,
.sc-kc-grid > a:link,
.sc-kc-grid > a:visited
{
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Nice focus ring for keyboard users */

.sc-kc-grid > a:focus .sc-kc-card
{
	outline: 2px solid #3C469D;
	outline-offset: 3px;
}

/* --- Baseline (CSS2.1-friendly) --- */

.sc-kc-card
{
	display: block;
	height: 100%;
}

/* no grid/flex outside @supports */

.sc-kc-grid > a
{
	height: 100%;
}

/* link fills the grid cell */
/* --- Modern layout only when supported --- */

@supports (display: grid) {
  .sc-kc-grid { align-items: stretch; }         /* grid items fill the track height */
  .sc-kc-card {
    display: grid;
    grid-template-rows: auto auto 1fr;          /* icon, title, desc grows */
  }
} 

/* (Optional) keep this if you had it in B */

@media (min-width: 768px)
{
	.sc-kc-card
	{
		min-height: 220px;
	}

	/* tweak 200–260px to taste */
}

/*===========================================================================================================================================================
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
===========================================================================================================================================================*/

@media only screen and (max-width: 1280px)
{
	div.topic-layout > div:nth-child(1)
	{
		display: none;
	}

	div.topic-layout > div:nth-child(2)
	{
		width: 98%;
		margin-left: 2%;
	}
}

@media only screen and (max-width: 750px)
{
	div.top-bar
	{
		min-height: 0;
	}

	div.topic-layout > div:nth-child(1)
	{
		display: none;
	}

	div.topic-layout > div:nth-child(2)
	{
		width: 98%;
		margin-left: 2%;
	}
}