/*<meta />*/

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

body
{
	font-family: 'Segoe UI', Arial, Verdana, sans-serif;
	font-size: 11pt;
	font-color: black;
	margin-top: 0pt;
	margin-bottom: 0pt;
}

html.home-topic	/*Used on home topic to override padding set in the skin*/
{
	padding: 0px;
	display: block;
	margin: 0px;
}

html.home-topic .body-container	/*Overrides padding set in the skin*/
{
	padding: 0px;
	display: block;
	margin: 0px;
}

html.home-topic .main-section > .outer-row	/*Overrides padding set in the skin when in tablet/mobile*/
{
	max-width: 100%;
	padding: 0;
}

h1
{
	font-weight: bold;
	font-family: 'Segoe UI', Arial, Verdana, sans-serif;
	color: #ffffff;
	margin-top: 0.17px;
	margin-bottom: 1px;
	font-size: 2.0em;
}

h2
{
	font-weight: bold;
	font-size: 1em;
	color: #f5f5f5;
}

h3
{
	font-weight: bold;
	font-size: 1.6em;
	color: #696969;
	text-align: center;
	font-family: 'Segoe UI', sans-serif;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

h4
{
	font-weight: bold;
	font-size: 1.4em;
}

p
{
	color: #0a1f62;
	margin-left: 0.1em;
	margin-right: 0.1em;
	margin-top: 0.1em;
	font-family: 'Segoe UI', sans-serif;
	font-size: 11pt;
	margin-bottom: 0.5em;
}

span.Button_Field_Key_UI
{
	font-weight: bold;
}

ol,
ul
{
	letter-spacing: .25;
	line-height: 20pt;
	margin-top: 4px;
	margin-bottom: 4px;
}

img
{
	border: none;
	max-width: 100%;
}

li
{
	margin-bottom: 6pt;
	margin-top: 4pt;
}

p.note
{
	margin-top: 0pt;
	margin-bottom: 12pt;
	mc-auto-number-format: '{color red}{b}Note: {/b}{/color} ';
	padding-left: 0px;
}

p.text.announcement
{
	/*an einstein chatbot loads on top of the z-order and looks at a stack of madcap css files to paint its own text and font colors; so we set H2 to a light color and now this; it is just an annoying reality we have with loading so much content and skins and css and now the bot ui*/
	color: #ffffff;
}

a.Popup
{
	
}

MadCap|expandingHead
{
	font-style: italic;
	font-weight: normal;
	cursor: hand;
	text-decoration: none;
	color: #006600;
}

MadCap|expandingBody
{
	color: #777777;
	font-style: italic;
}

MadCap|dropDownHotspot
{
	cursor: hand;
	text-decoration: none;
	color: #45494c;
	font-weight: bold;
	font-size: 10pt;
	border-bottom: solid 2px #748394;
}

MadCap|xref
{
	color: #2474BB;
	mc-format: '{para}';
	text-decoration: underline;
	font-weight: normal;
}

div.home-layout
{
	background-color: #f5f5f5;
	padding: 1%;
}

div.home-section
{
	border-bottom: solid 1px #dadada;
	padding: 5% 5px;
	padding-left: 8px;
	padding-right: 8px;
}

div.home-section no-border
{
	padding: 5% 0;
	border-bottom: none;
}

div.home-section:last-of-type	/*Removes the border on the last section of the home page*/
{
	border-bottom: none;
}

MadCap|breadcrumbsProxy
{
	border-bottom-width: 0;
	color: #888888;
}

a:link
{
	color: #2474BB;
}

a:visited
{
	color: #789CE4;
}

a:hover
{
	color: #2238DE;
}

a:active
{
	color: #ED7D31;
}

a.home-button
{
	display: block;
	padding: 10px;
	text-decoration: none;
	width: 100%;
}

MadCap|dropDownBody
{
	padding: 4px;
	margin: 2px;
}

MadCap|dropDown
{
	border-bottom: 1px solid #dadada;
	mc-image-position: left;
	mc-image-spacing: 10px;
	padding: 10px 0;
	mc-open-image: url('../Images/assets/minus.png');
	mc-closed-image: url('../Images/assets/plus.png');
}

div.topic-hero
{
	background-size: cover;
	background-attachment: inherit;
	background-position: center;
	background-color: #ffffff;
	margin-left: auto;
	margin-right: auto;
	/*bg-telematics.jpg | prodpage.jpg | bg-synergize.jpg | bg-velocity.jpg 
	background-attachment: inherit;
	background-attachment: fixed;
	background-position: center 0;
	background-color: #ffffff;
	background-position: center;
	height: 300;
	we can just use one common generic bg image for all product pages such as prodpage.jpg or set a different one for each product page*/
	text-align: center;
	background-image: url('../Images/assets/HeroImages/bgkb01.jpg');
	mc-float: center;
	padding-top: 2%;
	border-bottom: 6px;
	border-bottom-color: black;
	padding-bottom: 2%;
	padding-left: 2%;
	padding-right: 2%;
}

div.topic-hero h1
{
	font-size: 3.5em;
	text-align: center;
}

div.home-tiles	/*This is a custom responsive layout row style (div class) in my stylesheet (by Damon). MadCap responsive layout UI in the Flare IDE is very bad, not WYSIWYG more like a 1.0 beta so we often have to edit the CSS directly and test output to see what a given code change will actually produce in published output.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border-width: 1px;
	height: auto;
	margin-top: 1px;
	margin-bottom: 1px;
	border-left-style: solid;
	border-left-width: 0px;
	border-right-style: solid;
	border-right-width: 0px;
	border-top-style: solid;
	border-top-width: 0px;
	border-bottom-style: solid;
	border-bottom-width: 0px;
	border-top-left-radius: 0px 0px;
	border-top-right-radius: 0px 0px;
	border-bottom-right-radius: 0px 0px;
	border-bottom-left-radius: 0px 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

div.home-tiles::before
{
	content: ' ';
	display: table;
}

div.home-tiles::after
{
	content: ' ';
	display: table;
	clear: both;
	border-width: 0px;
}

div.home-tiles > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #2474BB;
	padding: 1%;
}

div.home-tiles > div:nth-child(1)
{
	width: 42%;
	border-width: 2px;
	border-radius: 2px;
	margin-left: 5%;
}

div.home-tiles > div:nth-child(2)
{
	width: 42%;
	margin-left: 2%;
	border-radius: 2px;
	border-width: 2px;
	margin-right: 2%;
}

div.article-tiles	/*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.article-tiles::before
{
	content: ' ';
	display: table;
}

div.article-tiles::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.article-tiles > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #dadada;
}

div.article-tiles > div:hover
{
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	transition: all 0.8s cubic-bezier(.25,.8,.25,1);
}

div.article-tiles > div:nth-child(1)
{
	width: 18%;
	margin-left: 0%;
}

div.article-tiles > div:nth-child(2)
{
	width: 18%;
	margin-left: 2%;
}

div.article-tiles > div:nth-child(3)
{
	width: 18%;
	margin-left: 2%;
}

div.article-tiles > div:nth-child(4)
{
	width: 18%;
	margin-left: 2%;
}

div.article-tiles > div:nth-child(5)
{
	width: 18%;
	margin-left: 2%;
}

div.article-tiles img
{
	max-width: 90%;
}

div.home-footer	/*Controls the look of the footer in the Home master page.*/
{
	mc-grid-row: true;
	margin-left: 0px;
	margin-right: 0px;
	background-color: 2474BB;
}

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

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

div.home-footer > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: 2474BB;
}

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

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

p.footer-sub
{
	color: #f0ffff;
	font-family: 'Segoe UI', Arial, Calibri, sans-serif;
	font-size: 8pt;
}

.footer
{
	background-color: #2474BB;
	padding: 5px 5px 5px 5px;
}

.footer-logo
{
	max-width: 100%;
	margin: 0;
	text-align: left;
}

.footer-links a
{
	padding-right: 15px;
}

.footer-icons
{
	text-align: right;
}

.footer-icons > a:first-of-type
{
	padding-right: 10px;
}

div
{
	font-style: normal;
	font-family: 'Segoe UI', sans-serif;
	font-weight: normal;
	margin-bottom: 0px;
	margin: 0px;
}

/*div.uiOutputRichText	| The chat bot code is called from MadCap to our salesforce.com instance. Chat code declares text div.uiOutputRichText and it was picking up our generic div for white text overrides that JK wanted on all our product home pages. Both kb.css and prodpage.css have parent div tags but only prodpage.css is the one the bot wants to subscribe to. I declared a color for div.uiOutputRichText here but white is too light and 333333 is too dark; it has to appear on light gray and dark blue so transflo green accent 1AE5BE to the rescue here.
{
	color: #1AE5BE;
}
*/

div.home-tiles p
{
	color: #ffffff;
	font-family: 'Segoe UI', Arial, Calibri, sans-serif;
	font-size: 14pt;
	font-weight: bold;
}

div:hover
{
	border-width: 0px;
}

MadCap|dropDownHead
{
	border-bottom-color: 748394;
	border-bottom: solid 1px #748394;
	font-size: 10pt;
}

div.home-tiles > div:nth-child(3)
{
	width: 8.3333%;
	margin-left: 2%;
}

div.home-tiles > div:nth-child(4)
{
	width: 8.3333%;
	margin-left: 2%;
}

ol
{
	color: #000000;
}

ul
{
	list-style-type: square;
	color: #0a1f62;
	font-size: inherit;
	line-height: 1.08em;
	margin-top: 6px;
}

@media print
{
	MadCap|xref
	{
		font-weight: normal;
		mc-format: '{quote}{para}{quote} {pageref}';
		text-decoration: none;
	}
}

@media only screen and (max-width: 980px)
{
	.footer
	{
		padding: 2% 2% 1%;
	}

	html.home-topic .body-container
	{
		margin-left: 0;
	}

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

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

	div.home-tiles > div:nth-child(3)
	{
		width: 8.3333%;
		margin-left: 0%;
	}

	div.home-tiles > div:nth-child(4)
	{
		width: 8.3333%;
		margin-left: 0%;
	}
}

@media only screen and (max-width: 480px)
{
	div.topic-hero h1
	{
		font-size: 1.0em;
	}

	h2
	{
		font-size: 1.2em;
	}

	h3
	{
		font-size: 1.0em;
	}

	div.home-tiles p
	{
		line-height: 1.2;
	}

	div.home-tiles > div:nth-child(1)
	{
		width: 100%;
		margin-left: 0%;
		margin-bottom: 10px;
	}

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

	div.article-tiles > div
	{
		margin-bottom: 2px;
	}

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

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

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

	div.article-tiles > div:nth-child(4)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.article-tiles > div:nth-child(5)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.article-tiles img
	{
		width: 75%;
	}

	.footer-icons
	{
		text-align: center;
	}

	.footer
	{
		padding: 1% 1%;
		text-align: center;
	}

	.footer-logo
	{
		text-align: center;
	}

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

	div.home-footer > div:nth-child(2)
	{
		width: 100%;
		margin: 3% 0;
	}

	div.home-tiles > div:nth-child(3)
	{
		width: 8.3333%;
		margin-left: 0%;
	}

	div.home-tiles > div:nth-child(4)
	{
		width: 8.3333%;
		margin-left: 0%;
	}
}

div.footer-center
{
	background-color: 2474BB;
	border-left-style: solid;
	border-left-width: 2px;
	border-right-style: solid;
	border-right-width: 2px;
	border-top-style: solid;
	border-top-width: 0px;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 0px;
	padding-bottom: 1px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}