/*<meta />*/

/*
******************************************************************************************************************************************************
******************************************************************************************************************************************************
**	                                                                                                                                                **
**   Welcome to the THREDD Documentation Portal "PORTAL_HOMEPAGE" Stylesheet. It contains the elements that control the look and feel of the           **
**   HOME PAGE on the THREDD Documentation Portal.                                                                                                     **
**	                                                                                                                                                **
**  There are three stylesheets used in the Documentation portal:                                                                                   **
**	                                                                                                                                                **
**   - Portal_HomePage.css:    This stylesheet. Controls the display of the Home page.                                                              **
**   - Portal_LandingPage.css: Controls the display of the Landing pages.                                                                           **
**   - Portal_Styles.css:      Controls the display of the topics in the Documentation Portal                                                       **
**                             Must be used for all topics, including the Home Page and the Landing pages.                                          **
**	                                                                                                                                                **   
**   NOTE: Styles for specific mediums (SCREEN, PRINT, MOBILE, TABLET) are listed at the end of this stylesheet                                     **
**	                                                                                                                                                **
******************************************************************************************************************************************************
******************************************************************************************************************************************************
*/

/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - HOME PAGE GENERAL STYLES
/* ================================================================================================================================================= */

.off-canvas-main .main-section > .outer-row
{
	max-width: 100%;
	padding: 0;
}

.off-canvas-content .main-section > .outer-row
{
	max-width: 100%;
	padding: 0;
}

.off-canvas-content .main-section > .outer-row
{
	max-width: 100%;
	padding: 0;
}

div.homepage
{
	margin-left: 5%;
}

html.home-page
{
	mc-community-features: disabled;
}

div.topic-hero /* Home Page Hero Section */
{
	padding-bottom: 50px;
	padding-top: 50px;
	background-color: var(--Background_White);
}

.heading-container {
  display: flex;
  align-items: center;
  width: 100%;
  }
  
  
 

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 5px;
  }
  .col-border-invisible{
  flex: 1;
  padding: 5px;
  }
  .col-heading {
  flex: 1;
  padding: 5px;
 }

 
 .card-container {   
    gap: 15px; /* Space between cards */
	
}

.icon-format {

height: 42px;
width: 42px;
}

}

.bookicon-format {

height: 55px;
width: 55px;
}

informedicon-format {

height: 55px;
width: 55px;
}

.space-grotesk-newdocportal {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

	

/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - TOP NAVIGATION BAR STYLES
/* ================================================================================================================================================= */

/*
nav.title-bar;	/* Adds bottom border on top navigation bar 
{
	border-bottom: 1px solid var(--Text_Light_Grey);
} 
	*/

/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - MADCAP PROXY/EDITOR ASSIGNED STYLES
/* ================================================================================================================================================= */

MadCap|searchBarProxy
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	float: none;
	width: 50%;
}

MadCap|topicToolbarProxy
{
	float: none;
}

MadCap|menuProxy.menu1
{
	mc-toc-depth: 1;
	mc-context-sensitive: True;
}

MadCap|menuProxy.menu2
{
	mc-toc-depth: 1;
	mc-context-sensitive: True;
}

/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - HOME PAGE BODY STYLES
/* ================================================================================================================================================= */

body
{
	color: var(--Text_Dark_Grey);
	font-family: Segoe UI, Arial, Helvetica, Calibri;
	font-style: inherit;
	padding: 0px 0px 1px 1px;
}

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

/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - HOME PAGE PARAGRAPH STYLES
/* ================================================================================================================================================= */

p
{
	font-size: 11.0pt;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 30px;
	line-height: 15pt;
	margin-right:5%;
	letter-spacing: 0.25;
	widows: 3;
	orphans: 3;
	mc-hyphenate: never;
}

p.straplinetext
{
	font-size: 13.0pt;
	margin-top: 20px;
	margin-left: 30px;
	margin-bottom: 0pt;
	line-height: 15pt;
	margin-right:5%;
	letter-spacing: 0.25;
	widows: 3;
	orphans: 3;
	mc-hyphenate: never;
}

/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - HOME PAGE HEADING STYLES
/* ================================================================================================================================================= */

h1.homepagetitle
{
	font-size: 1.87em;
	mc-auto-number-format: '';
	margin-top: 30px;
	font-weight: 400;
	margin-left: 30px;
	color: #0d058f;
}

h2
{
	font-size: 1.6785em;
	
	
	
}

h2.categoryheading
{
	font-size: 1.62em;
	mc-auto-number-format: '';
	margin-top: 30px;
	font-weight: 400;
	margin-left: 10px;
	flex: 1;
}


/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - HOME PAGE COPYRIGHT STYLES
/* ================================================================================================================================================= */

h4.copyright-title
{
	line-height: 15pt;
	margin-bottom: 6pt;
}

p.copyright /* Used for the copyright statement on the home page */
{
	font-size: 8pt;
	font-align: justify;
	mc-hyphenate: never;
	margin-top: 9px;
	margin-bottom: 6px;
	line-height: 13pt;
	mc-hyphenate: never;
	text-align: left;
}

hr.copyright-footer

{
    border-top: 1px solid var(--Text_Light_Grey);
	margin-top: 9pt;
	padding-top: 9pt;
}

/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - HOME PAGE HYPERLINK STYLES
/* ================================================================================================================================================= */

a.HomePageHyperlink 
{
	color: var(--Hyperlink_Default_Blue);
	font-size: 15.0pt;
	text-decoration: none;
	text-indent: 6pt;
}

a.HomePageHyperlink:hover
{
	color: var(--Hyperlink_Default_Blue);
	text-decoration: underline;
	font-size: 11.0pt;
	font-weight: 400;	
}

a:link {
  color: #0d058f;
  background-color: transparent;
  text-decoration: none;
}

a.link:hover
{
	color: #2d3232;
	text-decoration: none;
	font-size: 11.0pt;
	font-weight: 400;	
}



/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - HOME PAGE FOOTER
/* ================================================================================================================================================= */

div.footer
{
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: var(--Background_White);
}

div.footer a
{
	text-decoration: none;
	color: var(--Text_Dark_Grey);
}

div.footer p /* Complex Selector: Any <p> that is contained within div.footer will have the following properties */

{
	font-size: 0.8em;
	color: var(--Text_Dark_Grey);
}

/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - MASTER HOME PAGE FOOTER

   This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/
/* ================================================================================================================================================= */

div.home-master-page-footer
{
	margin-top: 50px;
	mc-grid-row: true;
	margin-left: 2%;
	margin-right: auto;
	width: 60%;
}

div.home-master-page-footer::before
{
	content: ' ';
	display: table;
}

div.home-master-page-footer::after
{
	content: ' ';
	display: table;
	clear: both;
}

/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - MASTER HOME PAGE FOOTER - DESKTOP LAYOUT STYLES
/* ================================================================================================================================================= */

div.home-master-page-footer > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.home-master-page-footer > div:nth-child(1)
{
	width: 25%;
	margin-left: 0%;
}

div.home-master-page-footer > div:nth-child(2)
{
	width: 50%;
	margin-left: 0%;
}

div.home-master-page-footer > div:nth-child(3)
{
	width: 25%;
	margin-left: 0%;
}

/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - INFO CONTAINER/SECTION - SCREEN LAYOUT STYLES

   These styles control the layout of the grid on the Home page for Screen Layout.
   
   /*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.*/
/* ================================================================================================================================================= */
div.section-text
{
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-top: 30px;
	padding-bottom: 30px;
}


div.heading-container
{
    margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	gap: 10px;
	padding-top: 20px;
	padding-bottom: 0px;
        padding-left: 20px;
        padding-right: 20px;


}

div.heading-text-container
{
    margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	
	padding-top: 5px;
	padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;


}


div.image-container
{
    margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	
	padding-top: 5px;
	padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;


}




div.col-container
{
    margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	
	padding-top: 5px;
	padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;


}

div.col-heading-container
{
    margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
    border-left: 1px solid #ffffff;
	padding-top: 20px;
	padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;


}


 div.col-heading	
{
	mc-grid-row: true;	
	margin-left: 10px;
	margin-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
	border-style: solid; 
    border-top: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;

}	

div.dividing-text-area	
{
	mc-grid-row: true;	
	margin-left: auto;
	margin-right: auto;
	padding-top: 5px;
	padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
       

}

div.info-section	
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
	padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px; 
			
}	

div.rounded

{

border-radius: 25px;
  border: 1px solid #a3a3c3;
  padding: 20px;
  width: 1000px;
  height: 450px;
 
 } 
 
 
 
 div.subdivider	
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
	padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px
		
}		
	
 div.col	
{
	mc-grid-row: true;	
	margin-left: 10px;
	margin-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
	border-style: solid; 
    border-top: 1px solid #2D3232;
	border-left: 1px solid #2D3232;
	border-right: 1px solid #2D3232;
	border-bottom: 1px solid #2D3232;
	

}


div.special-feature-col-left
{

	margin-left: 0px;
	margin-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
	border-style: solid; 
	border-left: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	

}

div.role-wrapper

{
	mc-grid-row: true;	
	margin-left: 10px;
	margin-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
	border-style: solid; 
    border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: none;
	background-color: #005EFD;
	
}	

div.stay-updated

{
	mc-grid-row: true;	
	margin-left: 10px;
	margin-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
	border-style: solid; 
    border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: none;
	background-color: #B04CFF;
	
}	


div.special-feature-col-right
{
	mc-grid-row: true;	
	margin-left: 10px;
	margin-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
	border-style: solid; 
    border-top: 1px solid #ffffff;
	border-left: 1px solid #2D3232;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	
}	

div.col-border-invisible	
{
	mc-grid-row: true;
	border-radius: 25px;
	column-width: 300px;
	margin-left: 0px;
	margin-right: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 20px;
	

}


div.table-container	
{
	mc-grid-row: true;	
	margin-left: 10px;
	margin-right: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
	border-style: solid; 
    border-top: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	

}

div.info-section::before
{
	content: ' ';
	display: table;
}

div.info-section::after
{
	content: ' ';
	display: table;
	clear: both;
}

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

div.info-section > div:nth-child(1)
{
	width: 27%;
	margin-left: 2%;
}

div.info-section  > div:nth-child(2)
{
	width: 27%;
	margin-left: 5%;
}

div.info-section  > div:nth-child(3)
{
	width: 27%;
	margin-left: 5%;
	margin-right: 5%;
}

.tabs {
  display: block;
 
}

.tab-button {
  background-color: #f1f1f1;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

.tab-button.active {
  background-color: #ccc;
}

.tab-content {
  padding: 20px;
  border: 1px solid #ccc;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - INFO CONTAINER/SECTION - CONTENT STYLES
/* ================================================================================================================================================= */

p.section-text
{
	
font-size: 1.60em;
	mc-auto-number-format: '';
	margin-top: 0px;
	font-weight: 400;
}

p.info-title
{
	line-height: 1em;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #0c0589;
	font-size: 1.1em;
	font-weight: 400;
	text-align: left;
	margin-left: 1%;
        
}

p.info-title-special
{
	line-height: 1em;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #2d3232;
	font-size: 13pt;
	font-weight: 400;
	text-align: left;
	margin-left: 1%;
        
}

.container {
    max-width: 600px;   
	text-align: left;
	align: left;
    padding: 5px;
}	

.card-container {   
    gap: 15px; /* Space between cards */
}

.card {
    background-color: #0d058f;
    border-radius: 10px;
    padding: 20px; 
	
}

.card-title {
    font-size: 24px;
    margin-bottom: 10px;
}

.card-content {
    font-size: 16px;
    margin-bottom: 20px;
}

.button {
background-color: #0d058f;
color: #f2edeb;
border: none;
padding: 10px;
}






p.info-title-noncapability
{
	line-height: 1em;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 1.1em;
	font-weight: 400;
	text-align: left;
	margin-left: 1%;
	
	}

p.info-content
{
	font-size: 0.9em;
	margin-bottom: 12pt;
	margin-right: 0%;
}

p.info-content-hyperlink
{
	margin-top: 3pt;
	margin-bottom: 6pt;
	margin-left: 1%;
}

/*
******************************************************************************************************************************************************
******************************************************************************************************************************************************
**	                                                                                                                                                **
**	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 printed] declares styles that will apply for printed output                                                                             **
**                                                                                                                                                  **
******************************************************************************************************************************************************
******************************************************************************************************************************************************
*/

@media tablet
{

/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - INFO CONTAINER/SECTION - TABLET LAYOUT STYLES
/* ================================================================================================================================================= */

	div.info-section > div:nth-child(1)
	{
		width: 27%;
		margin-left: 2%;
		margin-bottom: 5%;
	}

	div.info-section  > div:nth-child(2)
	{
		width: 27%;
		margin-left: 5%;
		margin-bottom: 5%;
	}

	div.info-section  > div:nth-child(3)
	{
		width: 27%;
		margin-left: 5%;
		margin-bottom: 5%;
	}

	p.info-title
	{
		font-size: 1.1em;
	}

	p.info-content
	{
		font-size: 0.9em;
	}
	
/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - TABLE STYLES
/* ================================================================================================================================================= */	
	
	table.TableStyle-Portal_TableStyle	/* Table width used in all THREDD tables */
{
	width: 95% !important;
}

p.table-heading	/* Table heading used in all THREDD tables */
{
	font-size: 12pt;
	font-weight: 600;
	margin-top: 6px;
	margin-bottom: 6px;
}

p.table-text-featuretext	/* Table Paragraph Style used in all THREDD tables that describe high-level features*/
{
	font-size: 14pt;
	line-height: 13pt;
	margin-top: 6px;
	margin-bottom: 6px;
        text-align: left
}

p.table-text-maintext	/* Table Paragraph Style used in all THREDD tables  that describe high level features */
{
	font-size: 12pt;
	line-height: 13pt;
	margin-top: 6px;
	margin-bottom: 6px;
        text-align: left
}


p.table-text	/* Table Paragraph Style used in all THREDD tables */
{
	font-size: 10pt;
	line-height: 13pt;
	margin-top: 6px;
	margin-bottom: 6px;
}

p.TableNote	/* THREDD CUSTOMISATION - Table Note Style used in all THREDD tables */
{
	color: var(--Text_Dark_Grey);
	background-color: var(--Note_Dark_Beige);
	background-repeat: no-repeat;
	mc-auto-number-position: float-left;
	border-bottom-left-radius: 3px 3px;
	border-radius: 2px 2px;
	margin-top: 4px;
	margin-bottom: 6px;
	padding: 6px 6px 6px 6px;
}
	
/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - HOME PAGE FOOTER - TABLET LAYOUT STYLES
/* ================================================================================================================================================= */

	div.footer
	{
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - MASTER HOME PAGE FOOTER - TABLET LAYOUT STYLES
/* ================================================================================================================================================= */	
	
	div.home-master-page-footer
	{
		width: 80%;
	}

	div.home-master-page-footer > div:nth-child(1)
	{
		width: 80%;
	}

	div.home-master-page-footer > div:nth-child(2)
	{
		width: 80%;
	}

	div.home-master-page-footer > div:nth-child(3)
	{
		width: 80%;
	}
}

@media mobile
{

/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - INFO CONTAINER/SECTION - MOBILE LAYOUT STYLES
/* ================================================================================================================================================= */

	div.info-section > div:nth-child(1)
	{
		width: 80%;
		margin-left: 0%;
		margin-bottom: 5%;
	}

	div.info-section > div:nth-child(2)
	{
		width: 80%;
		margin-left: 0%;
		margin-bottom: 5%;
	}

	div.info-section > div:nth-child(3)
	{
		width: 80%;
		margin-left: 0%;
		margin-bottom: 5%;
	}

	p.info-title
	{
		font-size: 1.1em;
	}

	p.info-content
	{
		font-size: 0.9em;
		width: 80%;
	}
	
/* ================================================================================================================================================= */
/* THREDD CUSTOMIZATION - MASTER HOME PAGE FOOTER - MOBILE LAYOUT STYLES
/* ================================================================================================================================================= */		
	
	div.home-master-page-footer
	{
		width: 80%;
	}
	
	div.home-master-page-footer > div:nth-child(1)
	{
		width: 80%;
	}

	div.home-master-page-footer > div:nth-child(2)
	{
		width: 80%;
	}

	div.home-master-page-footer > div:nth-child(3)
	{
		width: 80%;
	}
}