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

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

/* extra fonts */
/* we use the free, solid version of fontawesome, which limits which sets you can use. only 900 and 400. 400 is the brand icons - we use these in the footer */

@font-face 
{
	font-family: 'FontAwesome';
	src: url('../webfonts/fa-solid-900.eot');
	src: url('../webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'), url('../webfonts/fa-solid-900.woff2') format('woff2'), url('../webfonts/fa-solid-900.woff') format('woff'), url('../webfonts/fa-solid-900.ttf') format('truetype'), url('../webfonts/fa-solid-900.svg') format('svg');
}

/*==Hiding the Swagger Top Bar==*/

.swagger-ui .topbar
{
	display: none;
}

/*==Hiding the Swagger Server and Auth Dropdowns==*/

.swagger-ui .scheme-container
{
	display: none;
}

/*==Topic General Styles==*/

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

h1
{
	font-size: 2em;
	margin-top: 32px;
	font-family: Arial;
	color: #f79421;
	font-weight: normal;
	margin-bottom: 10px;
	padding-bottom: 20px;
	line-height: 1.4em;
}

h2
{
	font-weight: bold;
	margin-bottom: 4px;
	font-family: Arial;
	color: #576070;
	margin-top: 24px;
	font-size: 1.6em;
	line-height: 1em;
}

/* The td h2 combo is used in the glossary topic. 
 This allows us to capture the glossary headings in output and bookmarks,
 but shrinks the size to fit in a table. The syntax uses > as a css selector
 see this topic for guidance: https://htmldog.com/references/css/selectors/ 
 This selector means:  if an h2 tag appears after a td tag, style it this way */

td > h2
{
	font-weight: bold;
	margin-bottom: 4px;
	font-family: Arial;
	color: #576070;
	margin-top: 10px;
	font-size: 1.1em;
	line-height: 1em;
}

h3
{
	font-weight: bold;
	margin-bottom: 0px;
	margin-top: 16px;
	color: #f79421;
	font-size: 1.2em;
}

h4
{
	font-weight: bold;
	color: #576070;
	margin-bottom: 0pt;
	margin-top: 12px;
}

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%;
	mc-thumbnail-max-height: 128px;
}

img.thumbnail
{
	mc-thumbnail: popup;
}

/* z-index puts on top of everything else.  You will see this used in other blocks in this sheet */

.MCPopupContainer
{
	z-index: 99999999;
}

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

/*
table.topnav {
	opacity: 1;
	background-color: #ffffff;
} */

/*
.sidenav-wrapper
{
	min-width: 300px;
	max-width: 350px;
}*/

/* i dont think we use this one */

div.see-also
{
	border: 0px solid #f79421;
	border-radius: 20px;
	background-color: #fef5eb;
	text-indent: 10px;
	padding-left: 10px;
	padding-right: 10px;
	width: 800px;
	margin-left: 20px;
}

/* used to create the orange square for connector info blocks. Also used to hide it for smaller screens-separate block */

div.card-connector
{
	border: 2px solid #f79421;
	border-radius: 20px;
	background-color: transparent;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-right: 20px;
	margin-left: 20px;
}

/* this is a css selector construct. Applies when this specific table tag appears after this div tag  */

div.card-connector > table.TableStyle-simple-border
{
	margin-left: 50px;
	margin-right: 50px;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* applies to an H3 tag anywhere inside a connector tag */

div.card-connector h3
{
	margin-top: 15px;
	margin-bottom: 10px;
}

/* used this to reduce the indent of lists inside the connector card */

div.card-connector ol,
div.card-connector ul
{
	margin-left: 10px;
}

/* shrinkify things inside the connector card */

div.card-connector p,
div.card-connector p code,
div.card-connector p span.code,
div.card-connector p.table code,
div.card-connector p.table span.code
{
	font-size: 10pt;
	line-height: 1.2em;
}

div.card-connector li
{
	line-height: 7pt;
}

/* This block is used in the master page. It has contains the breadcrumbs and toolbar    */

div.secondnav
{
	position: fixed;
	/*content indenpendent */
	top: 90px;
	/* offset from top of parent container - not top of page */
	height: 45px;
	width: 79%;
	/* do not overflow the parent container */
	right: 12px;
	/* margin from right */
	background-color: #ffffff;
	z-index: 1;
	/* on top always */
	opacity: 1;
	/* opaque */
	margin-left: 0px;
	/* flush to side nav container */
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: 2px 5px 11px 2px #eaeaea;
	/* need a shadow to delineate it when the white part of a topic is underneath */
}

/* used in topics where similar procedures needed to be displayed on the same page to help customer identify substeps from the parent procedure. shaded radius background   */

div.expandocard-highlight
{
	border-radius: 20px;
	background-color: #F7F7F7;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-right: 20px;
	margin-left: 20px;
}

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

a.MCBreadcrumbsLink:visited
{
	color: #5e6dba;
}

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

MadCap|breadcrumbsProxy
{
	border-bottom: none;
	font-size: .95em;
	font-style: italic;
	mc-breadcrumbs-prefix: 'You are here: ';
	mc-breadcrumbs-count: 5;
	mc-breadcrumbs-divider: '  |  ';
	padding-bottom: 0;
	color: #031340;
	/*max-width: 95%; */
	line-height: 1.4rem;
}

#crumbs
{
	max-width: calc(100%-245px) !important;
}

#tools
{
	scale: 90%;
	right: 10px;
}

MadCap|xref
{
	color: #324199;
	font-weight: bold;
	mc-format: '{para}';
}

/* this styling enables override of an xref so it looks like a hyperlink. Useful for manual mini-tocs.  It is applicable when an xref is inside a p tag inside a list tag*/

li > p > MadCap|xref:link
{
	text-decoration: underline;
}

MadCap|xref:hover
{
	/*	color: #7469b9; */
	color: #5E6DBA;
}

MadCap|dropDownHotspot
{
	color: #404040;
}

MadCap|dropDownBody
{
	
}

MadCap|dropDown	/*Change the "mc-open-image" and "mc-closed-image" properties to be the 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');
}

/*==more on Master Page Topic Layout - do not move blocks around without substantial testing - precedence matters ==*/

nav.title-bar	/*Adds bottom border on top navigation bar - i do not think this is used anymore*/
{
	border-bottom: 1px solid #d3d3d3;
}

div.top-bar	/*Contains the breadcrumbs and toolbar - i do not think this is used anymore */
{
	border-bottom: 1px solid #d3d3d3;
	min-height: 50px;
}

div.search-container
{
	padding-bottom: 20px;
	display: block;
}

/*==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-weight: bold;
	font-size: 1.1em;
}

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|dropDownHead
{
	color: #404040;
	margin-top: 8px;
	margin-bottom: 8px;
}

MadCap|expanding
{
	mc-closed-image: url('../Images/Assets/Icons/Arrows/arrow-menu-right-solid2.png');
	mc-open-image: none;
}

MadCap|expandingHead
{
	text-decoration: underline;
}

MadCap|expandingBody
{
	padding-left: 4px;
}

MadCap|expandingHead
{
	text-decoration: underline;
	mc-open-image: none;
}

/* make tiny and less visible  */

footer
{
	font-size: .8em;
	color: #bac0ca;
}

hr
{
	color: #e8eaed;
	margin-top: 2em;
	border-color: #e8eaed;
	border-style: solid none none;
}

ul
{
	margin-left: 0px;
	/*margin: 0px 0px 0px -1.4em; */
	list-style-type: disc;
}

ol
{
	/*margin: 0px 0px 0px -1.4em; */
	margin-left: 0px;
}

/* Adding classes for Tips, Notes, & Warnings.*/
/* start caution */

p.caution
{
	margin-bottom: 12px;
	margin-top: 12px;
	padding-left: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
	border-left: solid 24px #f79421;
	/* using a fat border to define the type of note and create a block for the icon - see below */
	background-color: #fef5eb;
}

p.caution-indented
{
	margin-bottom: 12px;
	margin-top: 12px;
	padding-left: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
	border-left: solid 24px #f79421;
	background-color: #fef5eb;
	margin-left: 18px;
}

/* the :: before option sticks the content defined next in front of a p tag with the indicated class.
You can see the icon types on the fontawesome website. The tags are also in the fontawesome stylesheet in the project */

p.caution::before
{
	content: "\f12a";
	font-family: 'FontAwesome', 'Font Awesome\ 5 Free';
	font-weight: 900;
	font-size: 1.1em;
	color: white;
	margin-left: -20px;
	/* pulls the icon in from the default left margin to center it in the wee left border - see p.caution def above*/
	margin-right: 12px;
}

p.caution-indented::before
{
	content: "\f12a";
	font-family: 'FontAwesome', 'Font Awesome\ 5 Free';
	font-weight: 900;
	font-size: 1.1em;
	color: white;
	margin-left: -24px;
	/* original margin-left: 18px; */
	margin-right: 12px;
}

div.caution	/* styled to match the p caution tags but allows putting a list within.  */
{
	border-left: solid 32px #f79421;
	background-color: #fef5eb;
	margin-top: 0px;
	margin-bottom: 12px;
	padding-top: 6px;
	/* need this for icon to drop down */
	padding-bottom: 6px;
	padding-left: 6px;
}

div.caution::before,
div.note-caution::before
{
	float: left;
	content: "\f12a\00a0\00a0\00a0\00a0";
	font-family: 'FontAwesome', 'Font Awesome\ 5 Free';
	font-weight: 900;
	font-size: 1.2em;
	color: white;
	margin-left: -32px;
}

/* the next two are to prevent accidental double styling when someone changes a p.caution to a div.caution.  Allow it but remove border and spacing from the p tag*/

div.caution p.caution
{
	border: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
}

div.caution p.caution-indented
{
	border: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 18px;
	padding-top: 0px;
}

/* remove icon from any p.note tag inside a div.note tag*/

div.note p.caution::before
{
	content: "";
}

div.caution p.caution-indented::before
{
	content: "";
}

/* end caution */
/* start notes  - see comments for the caution tags - same methods used here.*/

p.note
{
	margin-top: 12px;
	margin-bottom: 12px;
	/*margin-left: 0px; */
	border-left: solid 30px #8c8c8c;
	padding-left: 2px;
	padding-top: 6px;
	padding-bottom: 6px;
	background-color: #e8eaed;
}

p.note-indented
{
	margin-top: 12px;
	margin-bottom: 12px;
	padding-left: 6px;
	padding-top: 12px;
	padding-bottom: 12px;
	background-color: #e8eaed;
	border-left: solid 30px #8c8c8c;
	margin-left: 18px;
}

p.note::before
{
	content: "\f303";
	font-family: 'FontAwesome', 'Font Awesome\ 5 Free';
	font-weight: 900;
	font-size: 1.1em;
	color: white;
	margin-left: -26px;
	margin-right: 12px;
}

p.note-indented::before
{
	content: "\f303";
	font-family: 'FontAwesome', 'Font Awesome\ 5 Free';
	font-weight: 900;
	font-size: 1.1em;
	color: white;
	margin-left: -30px;
	/* original margin-left: 18px; */
	margin-right: 12px;
}

div.note
{
	border-left: solid 32px #8c8c8c;
	background-color: #e8eaed;
	margin-top: 0px;
	margin-bottom: 12px;
	padding-top: 6px;
	/* need this for icon to drop down */
	padding-bottom: 6px;
	padding-left: 6px;
}

div.note::before,
div.note-indented::before
{
	float: left;
	content: "\f303\00a0\00a0\00a0\00a0";
	font-family: 'FontAwesome', 'Font Awesome\ 5 Free';
	font-weight: 900;
	font-size: 1.2em;
	color: white;
	margin-left: -32px;
}

/* remove border and spacing */

div.note p.note
{
	border: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
}

div.note p.note-indented
{
	border: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 18px;
	padding-top: 0px;
}

/* remove icon from any p.note tag inside a div.note tag*/

div.note p.note::before
{
	content: "";
}

div.note p.note-indented::before
{
	content: "";
}

/* start  tips */
/* see notes in caution tags for guidance on the purpose of the css in these blocks */

p.tip
{
	border-left: solid 24px #f9cc3b;
	padding-left: 2px;
	padding-top: 6px;
	padding-bottom: 6px;
	background-color: #fdf0c4;
	margin-left: 0px;
}

p.tip::before
{
	content: "\f0eb";
	font-family: 'FontAwesome', 'Font Awesome\ 5 Free';
	font-weight: 900;
	font-size: 1.1em;
	color: white;
	margin-left: -20px;
	margin-right: 12px;
}

div.tip
{
	border-left: solid 24px #f9cc3b;
	background-color: #fdf0c4;
	margin-bottom: 12px;
	margin-top: 12px;
	margin-left: 0px;
	padding-top: 6px;
	/* need this for icon to drop down */
	padding-bottom: 6px;
	padding-left: 6px;
}

div.tip::before
{
	float: left;
	content: "\f0eb\00a0\00a0\00a0";
	font-family: 'FontAwesome', 'Font Awesome\ 5 Free';
	font-weight: 900;
	font-size: 1.2em;
	/*color: #F9CC3B; */
	color: white;
	margin-left: -25px;
}

div.tip p
{
	margin-top: 0px;
}

/* remove border and spacing */

div.tip p.tip
{
	border: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
}

/* remove icon from any p.tip tag inside a div.tip tag*/

div.tip p.tip::before
{
	content: "";
}

/* end tips */
/* end tips, notes and warnings */
/* Adding class for Early Action Program.*/
/* see comments for the caution tags - same methods used here.*/

p.eap
{
	margin-bottom: 12px;
	margin-top: 12px;
	padding-left: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
	border-left: solid 30px #333399;
	/* using a fat border to define the type of note and create a block for the icon - see below */
	background-color: #e1f2fa;
}

p.eap-indented
{
	margin-bottom: 12px;
	margin-top: 12px;
	padding-left: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
	border-left: solid 30px #333399;
	background-color: #e1f2fa;
	margin-left: 18px;
}

/* the :: before option sticks the content defined next in front of a p tag with the indicated class.
You can see the icon types on the fontawesome website. The tags are also in the fontawesome stylesheet in the project */

p.eap::before
{
	content: "\f0f3";
	font-family: 'FontAwesome', 'Font Awesome\ 5 Free';
	font-weight: 900;
	font-size: 1.1em;
	color: white;
	margin-left: -29px;
	/* pulls the icon in from the default left margin to center it in the wee left border - see p.eap def above*/
	margin-right: 12px;
}

p.eap-indented::before
{
	content: "\f0f3";
	font-family: 'FontAwesome', 'Font Awesome\ 5 Free';
	font-weight: 900;
	font-size: 1.1em;
	color: white;
	margin-left: -24px;
	/* original margin-left: 18px; */
	margin-right: 12px;
}

div.eap	/* styled to match the p eap tags but allows putting a list within.  */
{
	border-left: solid 32px #333399;
	background-color: #e1f2fa;
	margin-top: 0px;
	margin-bottom: 12px;
	padding-top: 6px;
	/* need this for icon to drop down */
	padding-bottom: 6px;
	padding-left: 6px;
}

div.eap::before,
div.note-eap::before
{
	float: left;
	content: "\f0f3\00a0\00a0\00a0\00a0";
	font-family: 'FontAwesome', 'Font Awesome\ 5 Free';
	font-weight: 900;
	font-size: 1.2em;
	color: white;
	margin-left: -32px;
}

/* the next two are to prevent accidental double styling when someone changes a p.eap to a div.eap.  Allow it but remove border and spacing from the p tag*/

div.eap p.eap
{
	border: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
}

div.eap p.eap-indented
{
	border: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 18px;
	padding-top: 0px;
}

/* remove icon from any p.note tag inside a div.note tag*/

div.note p.eap::before
{
	content: "";
}

div.eap p.eap-indented::before
{
	content: "";
}

/* end eap */

a:link
{
	text-decoration: underline;
	color: #324199;
}

li > p > a:link
{
	text-decoration: underline;
	color: #324199;
}

/* The following two decoration statements are to mimic the minitoc proxy. 
If it's JUST a bunch of links in a list, then we dont want the underline. 
If it's a link in a lists that also has text (separate from the link) 
then it will have an underline. Order matters. These declarations must be
after the a.link.  
*/

/* hide the underline when there is no p tag, just an li and an href - simple */

li a,
li a:link
{
	text-decoration: none;
}

/* enable the underline when the link is a paragraph style */
/* table settings */

th
{
	text-align: left;
	font-size: 12px;
	vertical-align: top;
}

td
{
	margin-top: 6pt;
	margin-left: 12px;
	font-size: 12px;
	vertical-align: top;
}

/* make font tiny inside table*/

p.table
{
	font-size: 12px;
	margin-top: 4px;
	margin-bottom: 4px;
}

/* make lists smaller inside tables */

td ol,
td ul,
ol.table,
ul.table
{
	font-size: 12px;
	line-height: 12px;
	padding-left: 16px;
}

/* end table settings */

ol.ol_2
{
	list-style-type: lower-alpha;
}

ol.ol_2 > li > ul
{
	list-style-type: disc;
}

ol ol
{
	list-style-type: lower-alpha;
}

ul ul
{
	list-style-type: circle;
}

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

.button:focus
{
	outline-color: #f79421;
}

p.footer
{
	font-size: 0.8em;
	color: #bac0ca;
	text-align: center;
}

p.code
{
	font-family: 'Courier New';
	font-size: 12pt;
}

pre,
p.code-small
{
	font-family: 'Courier New';
	font-size: 10pt;
}

ol.ol_1
{
	margin-left: 0px;
	margin: 0px 0px 0px -1.4em;
	margin-top: 6pt;
	font-size: 12pt;
	margin-bottom: 0pt;
	list-style-type: lower-alpha;
}

ul.ul_1
{
	margin-left: 0px;
	margin: 0px 0px 0px -1.4em;
	margin-top: 6pt;
	font-size: 12pt;
	margin-bottom: 0pt;
}

li.li_1
{
	margin-top: 6pt;
	font-size: 12pt;
	margin-bottom: 0pt;
}

MadCap|xref.ParaTextOnly
{
	mc-format: '{paratext}';
}

li.ListParagraph
{
	margin-top: 6pt;
	font-size: 12pt;
}

table.simple
{
	border-collapse: collapse;
	margin-left: 0pt;
	border-left-width: 0px;
	border-left-color: #000000;
	border-right-width: 0px;
	border-right-color: #000000;
	border-top-style: solid;
	border-top-width: 0px;
	border-top-color: #e8eaed;
	border-bottom-style: solid;
	border-bottom-width: 0px;
	border-bottom-color: #e8eaed;
	margin-bottom: 4px;
}

th.simple,
thead.simple
{
	padding-top: 2px;
	padding-bottom: 2px;
	text-align: left;
	vertical-align: middle;
	background-color: #e8eaed;
	padding-left: 0px;
	padding-right: 6px;
	font-size: 14px;
	vertical-align: top;
}

tr.simple
{
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #e8eaed;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #e8eaed;
	vertical-align: top;
}

td.simple
{
	padding-left: 10px;
	vertical-align: top;
}

/* used in connectors list and in slideshows; seems also a couple of Sid topics */

p.tablesubhead
{
	font-weight: bold;
	color: #f79421;
	font-size: 1.1em;
}

/* divtooltip not used */

div.tooltip
{
	padding: 4px;
	background-color: #E0EAFF;
	position: relative;
	margin-left: 50px;
	width: 400px;
	display: none;
}

span:hover + div.tooltip
{
	display: block;
}

span.tooltippy
{
	text-decoration: underline;
	font-weight: bold;
	color: #031340;
}

/* end tooltip not used */

span.Hyperlink
{
	color: #031340;
	text-decoration: underline;
}

span.code
{
	font-family: 'Courier New';
}

hr.Rule	/*Article page rule below breadcrumbs - not used*/
{
	color: #e8eaed;
	border-color: #e8eaed;
	border-style: solid none none;
	margin-bottom: 10px;
	margin-top: 10px;
}

MadCap|miniTocProxy
{
	border-top-color: transparent;
	border-top-style: none;
	border-top-width: 0px;
	color: #324199;
	margin-top: 4px;
}

p.MiniTOC1
{
	color: #324199;
	display: list-item;
	line-height: 0.6em;
	list-style-type: disc;
	list-style-position: outside;
}

p.MiniTOC2
{
	color: #324199;
	display: list-item;
	line-height: 0.6em;
	list-style-type: circle;
	list-style-position: outside;
}

/* this overrides the bullet styling for level 3 in the minitocs. I think it was using circle again . This puts a dash in front of the entry to mimic a bullet*/

p.MiniTOC3_0::before
{
	content: "- ";
}

p.MiniTOC3
{
	color: #324199;
	display: list-item;
	line-height: 0.6em;
	margin-left: 25pt;
}

MadCap|glossaryTerm,
MadCap|glossaryTerm.Popup,
MadCap|glossaryTerm:focus,
MadCap|glossaryTerm:hover,
MadCap|glossaryTerm.Expanding,
MadCap|glossaryTerm.Hyperlink
{
	color: #324199;
	text-decoration: underline;
	font-weight: normal;
	mc-closed-image: none;
	mc-open-image: none;
}

/* ok to delete. I had tried to style the size of the popup but it's beyond control */

PopupBody
{
	
}

ul.ul_2
{
	padding-left: 0px;
	margin-left: 36pt;
	list-style-type: circle;
}

ul.ul_3
{
	padding-left: 0px;
	list-style-type: disc;
	margin-left: 18pt;
}

/* Joe: ul.ul_4 is a copy of ul.ul_3 with a list-style-type of none for lists with drop-down text and a 0pt margin-left */

ul.ul_4
{
	padding-left: 0px;
	list-style-type: none;
	margin-left: 0pt;
}

span.span_1
{
	color: #172B4D;
	letter-spacing: 0pt;
}

span.span_2
{
	color: #576070;
}

/* these are used for the top navigation in the master page   */

div.topnav	/* Use a clear div for each link item so the text can wrap and align separately from the other blocks in the nav */
{
	background-color: transparent;
	position: fixed;
	top: 30px;
	vertical-align: top;
	padding-top: 5px;
	z-index: 9999;
}

div.topmenu-url	/* remove the underline from the links because we want these to look like a UI */
{
	display: inline-block;
	text-decoration: none;
	vertical-align: top;
	/*	text-align: center;*/
}

div.submenu	/* this was used to create dropdown menus for the initial design of top nav. Not used now */
{
	display: block;
	border-top: 1px;
	border-top-style: solid;
	border-width: 1px;
	border-color: #324199;
	text-decoration: none;
	vertical-align: middle;
	text-align: center;
	background: #0F1644;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* style the text and hrefs in the top navigation to override the hyperlink color and to look like a UI*/

label.top-menu,
a.top-menu
{
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}

a.top-menu:visited
{
	color: #ffffff;
}

div.submenu > a.top-menu:hover
{
	text-align: center;
	text-decoration: none;
	/* font-weight: bold; */
	color: #f09336;
}

a.top-menu:hover
{
	color: #f09336;
	/* background: #ffffff; */
}

/* div.submenu is not used but this styled the a.top-menu within a div.submenu when a hover action occurred */
/* conditioning out - broken normal expanding heads and top submenu not in use for now */

/*
MadCap|expandingHead.top-submenu
{
	padding-left: 15px;
	text-decoration: none;
	color: #ffffff;
}
MadCap|expandingHead.top-submenu:hover
{
	text-decoration: none;
	color: #f09336;
}
 
 */

div.submenu > a.top-menu
{
	text-align: center;
	text-decoration: none;
	color: #ffffff;
}

/* slideshows are a relatively new feature of Flare - there is one in the connector-main topic. I used a div to contain it in case we did more of these, then we could ensure they were all sized the same*/

div.slideshow
{
	align: center;
	width: 600px;
	MadCap|conditions: "General.Only-OLH";
	/* tried to condition with styling but do not recall that this really works. condition tags are in the topic itself */
}

div.slideshow img	/* felt that an image that is part of a slide show should look unique from our other images. Just a simple radius */
{
	max-width: 80%;
	border-radius: 5px;
}

.list-inline
{
	list-style: none;
}

.list-inline > li
{
	display: inline;
	padding: 4px;
}

p.gototop
{
	position: fixed;
	bottom: 0;
	right: 1%;
	top: 90%;
	z-index: 999999;
	padding: 10px;
}

.tableFixHead
{
	overflow-y: auto;
	height: 600px;
}

.tableFixHead thead th
{
	position: sticky;
	top: 0;
}

/* add a pdf icon automatically - covers 3 cases since they didnt all match with one rule*/

a[href*=".pdf?TocPath="]::after,
.pdf a::after,
a[href$=".pdf"]::after
/* match  any link that has this string in the href tag - this would be search results I think bc of the toc path */
/* matches any paragraph classed as style pdf - this was used for the commented out stuff below - originally used a pdf class to pick up the pdf icon. if those tags still exist in help they will get icon automatically now*/
/* link to file ending in .pdf */
{
	padding-left: 5px;
	content: "\f1c1";
	font-family: 'FontAwesome', 'Font Awesome\ 5 Free';
	font-weight: 900;
	/* this is all stuff not used anymore 
	content: "";
	display: inline-block;
	background: url('../Images/Assets/Icons/pdf.png') no-repeat;
	width: 17px;
	height: 21px;
	margin: 0 0 -5px 5px; */
}

/* This is not used because would have had to specify a url class to pick up the image. Instead used a string match below   
.externalurl a::after
{
	content: "";
	display: inline-block;
	background: url('../Images/Assets/Icons/externalurl.png') no-repeat;
	width: 18px;
	height: 18px;
	margin: 0 0 -2px 5px;
 
}*/

/* add an external url icon */

a[href$="alert-coverage"]::after,
a[href^="http"]::after
/* match when it's anywhere in the href */
/* match when the href tag starts with this string */
{
	padding-left: 5px;
	content: "\f35d";
	font-family: 'FontAwesome', 'Font Awesome\ 5 Free';
	font-weight: 900;
}

/* add the fa-user-lock icon to indicate that a login will be required ; matches any href that contains the string*/

a[href*="learning.stellarcyber.ai"]::after
{
	padding-left: 5px;
	content: "\f03d    \f023";
	/*the icon ID for fa-user-lock is f502*/
	font-family: 'FontAwesome', 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 18px;
	color: #7C7C91;
	display: inline-block;
}

/* add a video icon to indicate that it's media*/

a[href*="learning.stellarcyber.ai/unit/"]::after
{
	padding-left: 5px;
	content: "\f03d    \f023";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 18px;
	color: #7C7C91;
	display: inline-block;
	vertical-align: middle;
}

/* tried to force the targets to a specific name but think this didnt work. the topic has the target string in the href anyway */

a.training:link
{
	target: training;
}

a.support:link
{
	target: support;
}

/* this removes the automatic external url icon from being attached to the social media links in the footer */

a.socialmedia::after
{
	content: "";
}

.SearchHighlight1
{
	background-color: #F5D89C;
}

.SearchHighlight2
{
	background-color: #c2c8e5;
}

h1 span.SearchHighlight1,
h3 span.SearchHighlight1
{
	background-color: #F5D89C;
	color: #ffffff;
}

h1 span.SearchHighlight2,
h3 span.SearchHighlight2
{
	background-color: #c2c8e5;
	color: #ffffff;
}

/*  This is a special class for entries in the TOC that point at Stellar Cyber Academy */

.academy a::after
{
	content: "";
	display: inline-block;
	/* Ensures the icon appears closer to the text */
	background: url("../Images/training-icon-32x26px-gray.png") no-repeat;
	width: 32px;
	height: 26px;
	vertical-align: middle;
	/* Aligns the icon with the text */
	margin-left: 12px;
	/* Adds spacing after the text */
}

/*  This puts the mobile/tablet menu IN FRONT of the other objects so it hides the overlapping toolbar */
/* also sets the size so that it covers all of the toolbar */

aside.off-canvas	/* this is the mobile slider navigation pane that appears on the right */
{
	z-index: 9999999;
	width: 300px;
}

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

MadCap|codeSnippet
{
	border-top-color: #DDD;
	border-left: solid;
	background-color: #F4F5F7;
	border: solid 1px #C2C2C2;
	border-left-color: #EBECF0;
	border-left-width: 10px;
	max-height: 800px;
	max-width: 800px;
	padding: 0;
}

MadCap|codeSnippetBody
{
	font-family: 'Courier New';
	color: #000000;
	padding-top: 0px;
	overflow: scroll;
}

/*==Hiding the Code Snippet Copy Button==*/

MadCap|codeSnippetCopyButton
{
	display: none;
}

/*==commenting out the old stuff for code snippet copy button
MadCap|codeSnippetCopyButton
{
	background-image: url('../Images/Assets/Icons/copy.png');
	background-repeat: no-repeat;
	mc-label: " ";
	height: 24px;
	width: 24px;
}
==*/

/* make a dropdown style that has arrows on the right that match the other expando objects */

MadCap|dropDown.right_arrow,
MadCap|toggler.right_arrow
{
	mc-closed-image: url('../Images/Assets/Icons/Arrows/arrow-menu-right-solid.png');
	mc-open-image: url('../Images/Assets/Icons/Arrows/arrow-menu-down-solid-orange.png');
	mc-image-position: right;
}

/* end of standard css */
/* start of print css */

@media print
{
	ol
	{
		margin: 0;
		margin-left: 0.25in;
	}

	ol.ol_1
	{
		margin: 0;
		margin-left: 0.25in;
	}

	ul.ul_1
	{
		margin: 0;
		margin-left: 0.25in;
	}

	ol.ol_1 > li > ul
	{
		margin: 0;
	}

	ol.ol_1 > li > ul > li > ul
	{
		margin: 0;
	}

	ul
	{
		margin: 0;
		margin-left: 0.25in;
	}

	body
	{
		background-color: transparent;
	}

	ol.ol_2
	{
		list-style-type: lower-alpha;
	}

	div.container
	{
		min-width: 100%;
		border: none;
	}

	p.tip::before
	{
		color: white !important;
	}

	img
	{
		max-width: 400px;
	}

	div.topnav
	{
		display: none !important;
	}

	div.secondnav
	{
		display: none !important;
	}
}

@media only screen and (max-width: 1280px)
{
	.js-off-canvas-exit
	{
		/* remove shadow from tablet menu */
		box-shadow: none;
		width: 400px;
	}

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

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

	div.topnav
	{
		top: 60px;
		z-index: 9999;
	}

	div.title-bar-container
	{
		height: 110px;
	}

	nav.title-bar
	{
		height: 110px;
	}

	div.secondnav
	{
		top: 110px;
		width: 98%;
		/*test*/
		left: 0px;
	}
}

@media only screen and (max-width: 750px)
{
	.js-off-canvas-exit
	{
		/* remove shadow from mobile menu */
		box-shadow: none;
		width: 400px;
	}

	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%;
	}

	div.topnav	/* when the screen is small, remove the top navigation items, they are only nice to have - not critical*/
	{
		display: none;
	}

	div.title-bar-container	/*scale other nav elements to fit size of device */
	{
		height: 110px;
	}

	nav.title-bar
	{
		height: 110px;
	}

	div.secondnav
	{
		top: 110px;
		width: 98%;
		/*test*/
		left: 0px;
	}

	#crumbs	/* dont display breadcrumbs in mobile view */
	{
		display: none;
	}

	div.topmenu-url
	{
		display: none;
	}

	div.card-connector	/* at mobile scale, the content is too big for the container. just hide the border so it doesnt look broken when the content scrolls off to the right of screen */
	{
		border: 0px;
	}
}

/* override screen width to avoid appearance of overflow of records in connector card - this block allows to test on a normal screen vs mobile */

@media screen and (max-width: 600px)
{
	div.card-connector
	{
		border: 0px;
	}
}

div.card-academy
{
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	margin-right: 20px;
	border: 2px solid #3786c7;
	border-radius: 6px;
	background-color: #e8eaed;
}