/*<meta conditions="Conditions.OngoingSync" />*/

@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.

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.
===========================================================================================================================================================*/

/*==Topic General Styles==*/

body
{
	line-height: 1.7em;
	font-family: 'Arial';
	color: #37474F;
	background-color: #FFFFFF;
	/*	background-color: #FAF8F2; */
}

.height-container	/*As of Flare 2020 r2, this class is added during the Flare (and Central) build process and includes the following property: "position:relative;" - this setting overrides our footer setting of spanning the full width of the page and causes it to be truncated to the width set within the TopNav skin for the content area (we have it set to 62.5em, giving us white space on either side of the content area). Setting this back to initial and adding the !important indicator overrides Flare's setting and allows our footer to display as we expect. As of 7/22/2022,  
the work around "position: initial !important" was removed after adjusting other values in css for the upper and lower footers. See the comments with the date 07222022, stj, or MD-3040. */
{
	position: relative;
}

div.body-margin	/*the "margin-bottom: 275px" element is to prevent the footer from covering up the topic content. Without the margin-bottom, the content could be hidden behind the footer.*/
{
	margin-bottom: 275px;
}

.center
{
	position: relative;
	margin-right: -55px;
	/* stj changed from auto to fix footer problem after rebranding for Optum */
	margin-left: -100px;
	/* stj changed from auto to fix footer problem after rebranding for Optum */
	float: none !important;
	text-align: center;
}

h1
{
	padding-bottom: 10px;
	margin-top: 30px;
	color: #002677;
	font-weight: normal;
	font-size: 2.5em;
	margin: 0;
	margin-bottom: 8;
	line-height: normal;
}

h2
{
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 4px;
	margin-top: 20px;
	color: #002677;
}

h3
{
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 4px;
	margin-top: 16px;
	color: #002677;
}

div.topic + h2
/*:nth-child(2)*/
/*Applies to <h2>, only if it is the second element within the div.topic element (which is equal to the first element within the bodyProxy, or the first element within a topic's <body> tag */
{
	padding-bottom: 10px;
	margin-top: 30px;
	color: #002677;
	font-weight: normal;
	font-size: 2.5em;
	margin: 0;
	margin-bottom: 8;
	line-height: normal;
}

div.topic + h3
/*:nth-child(2)*/
/*Applies to <h3>, only if it is the second element within the div.topic element (which is equal to the first element within the bodyProxy, or the first element within a topic's <body> tag */
{
	padding-bottom: 10px;
	margin-top: 30px;
	color: #002677;
	font-weight: normal;
	font-size: 2.5em;
	margin: 0;
	margin-bottom: 8;
	line-height: normal;
}

div.topic + h4
/*:nth-child(2)*/
/*Applies to <h4>, only if it is the second element within the div.topic element (which is equal to the first element within the bodyProxy, or the first element within a topic's <body> tag */
{
	padding-bottom: 10px;
	margin-top: 30px;
	color: #002677;
	font-weight: normal;
	font-size: 2.5em;
	margin: 0;
	margin-bottom: 8;
	line-height: normal;
}

code,
p.code1,
p.code2,
p.code3,
p.code4,
p.code5,
p.code6,
p.code7,
p.code8,
p.code9
{
	font-family: 'Courier New';
	font-size: 11pt;
	mc-disable-glossary-terms: true;
}

p.code1
{
	margin-left: 25px;
}

p.code2
{
	margin-left: 40px;
}

p.code3
{
	margin-left: 55px;
}

p.code4
{
	margin-left: 70px;
}

p.code5
{
	margin-left: 85px;
}

p.code6
{
	margin-left: 100px;
}

p.code7
{
	margin-left: 115px;
}

p.code8
{
	margin-left: 130px;
}

p.code9
{
	margin-left: 145px;
}

td code,
td p.code1,
td p.code2,
td p.code3,
td p.code4,
td p.code5,
td p.code6,
td p.code7,
td p.code8,
td p.code9
{
	font-size: 10pt;
	mc-disable-glossary-terms: true;
}

table.table.TableStyle-OptumTableStyles_smallfont td code,
table.TableStyle-OptumTableStyles_smallfont td p.code1,
table.TableStyle-OptumTableStyles_smallfont td p.code2,
table.TableStyle-OptumTableStyles_smallfont td p.code3,
table.TableStyle-OptumTableStyles_smallfont td p.code4,
table.TableStyle-OptumTableStyles_smallfont td p.code5,
table.TableStyle-OptumTableStyles_smallfont td p.code6,
table.TableStyle-OptumTableStyles_smallfont td p.code7,
table.TableStyle-OptumTableStyles_smallfont td p.code8,
table.TableStyle-OptumTableStyles_smallfont td p.code9
{
	font-size: 9pt;
}

td p.code1
{
	margin-left: 0px;
}

td p.code2
{
	margin-left: 15px;
}

td p.code3
{
	margin-left: 30px;
}

td p.code4
{
	margin-left: 45px;
}

td p.code5
{
	margin-left: 60px;
}

td p.code6
{
	margin-left: 75px;
}

td p.code7
{
	margin-left: 90px;
}

td p.code8
{
	margin-left: 105px;
}

td p.code9
{
	margin-left: 120px;
}

li
{
	color: #37474F;
}

/* basic properties for any list item (bullet or numbered) with an embedded
   paragraph (this construction is used when a list item is follwed by a 
   list continued step) */

li p
{
	margin: 6px 10px 6px 0px;
	font-weight: normal;
}

/* numbered list item level 1 */

li.numberedLevel1
{
	margin: 6px 10px 6px 0px;
	padding: 0px 0px 0px 1px;
	list-style-type: decimal;
	font-weight: normal;
}

/* numbered list item level 2 */

li.numberedLevel2
{
	margin: 6px 10px 6px 25px;
	padding: 0px 0px 0px 0px;
	list-style-type: upper-alpha;
	font-weight: normal;
}

/* numbered list item level 3 */

li.numberedLevel3
{
	margin: 6px 10px 6px 48px;
	padding: 0px 0px 0px 1px;
	list-style-type: lower-roman;
	font-weight: normal;
}

/* bullet list item level 1 */

li.bulletLevel1
{
	margin: 6px 10px 6px -7px;
	padding: 0px 0px 0px 8px;
	list-style-type: disc;
	font-weight: normal;
}

/* bullet list item level 2 */

li.bulletLevel2
{
	margin: 6px 10px 6px 17px;
	padding: 0px 0px 0px 8px;
	list-style-type: disc;
	font-weight: normal;
}

/* bullet list item level 3 */

li.bulletLevel3
{
	margin: 6px 10px 6px 41px;
	padding: 0px 0px 0px 8px;
	list-style-type: disc;
	font-weight: normal;
}

p
{
	margin-bottom: 8px;
	margin-top: 8px;
	color: #37474F;
}

p.TopicBanner	/*The TopicBanner class adds a right-aligned title to the top of a topic page. This element is added to topic-based MasterPages that link back to a reference page. This includes the InstallQuickStart and ServerRoles MasterPages. See the TopicBanner section in either MasterPage for more details.*/
{
	text-align: right;
	line-height: 20pt;
}

img	/*Setting max-width: 100%; property makes images always fit the width of the container*/
{
	max-width: 100%;
}

img.thumbnail
{
	mc-thumbnail: hover;
}

/*==================================================================================================================

Properties for Server Tiles section. Server Tiles are found on CXT topics that contain information about server roles.

==================================================================================================================*/

div.server-tiles
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1%;
	margin-bottom: 1%;
	max-width: 706px;
	background-color: #DADADA;
	border: 1px solid #d3d3d3;
	border-radius: 20px;
}

div.server-tiles::before
{
	content: ' ';
	display: table;
	border-radius: 20px;
}

div.server-tiles::after
{
	content: ' ';
	display: table;
	clear: both;
	border-radius: 20px;
}

div.server-tiles > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	/*Adds transition animation when switching between screen sizes*/
	-moz-border-radius: 20x;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	border: none;
	padding: 10px 10px;
	display: block;
	margin: auto;
}

div.server-tiles > div:nth-child(1)
{
	width: 25%;
}

div.server-tiles > div:nth-child(2)
{
	width: 25%;
}

div.server-tiles > div:nth-child(3)
{
	width: 25%;
}

div.server-tiles > div:nth-child(4)
{
	width: 25%;
}

/*==================================================================================================================

Properties for home-tiles and some footer elements

==================================================================================================================*/

p.tile-title
{
	text-align: center;
	font-size: 1em;
	color: #002677;
	height: 56px;
}

ul.tile-content
{
	text-align: left;
	font-size: 0.8em;
	color: #484d4f;
}

p.tile-content
{
	text-align: center;
	font-size: 0.8em;
	color: #484d4f;
}

p.tile-items
{
	font-size: 0.7em;
	text-align: center;
}

/*=Elements for text contained within each footer-tile=*/

p.footer-title
{
	text-align: center;
	font-size: 1.4em;
	color: #002677;
	font-weight: normal;
}

p.footer-content
{
	text-align: center;
	font-size: 0.8em;
	color: #484d4f;
	font-weight: normal;
}

div.server-tiles img	/*Complex Selector: Any anchor (links) tags that are within div.server-tiles will have the following properties*/
{
	text-align: center;
}

div.server-tiles a	/*Complex Selector: Any anchor (links) tags that are within div.server-tiles will have the following properties*/
{
	text-decoration: none;
	color: #002677;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

/*=Info-container section=*/

div.info-container	/*div.info-container is used to contain the footer on all topic pages. For CXT KCs, this has a property of "bottom: 30px;" - this accounts for the single version number shown in the footer section. For the CMGT KC, this is overwritten by the CMGT_kcToics stylesheet, which has the property of "bottom: 70px;" which takes into account that the footer includes two release numbers (i.e., an extra line break that requires more space). The CMGT_kcTopics stylesheet is local to the CMGT KC project.*/
{
	margin-left: -100px;
	/* stj changed from auto to fix footer problem after rebranding for Optum */
	margin-right: -55px;
	/* stj changed from auto to fix footer problem after rebranding for Optum */
	margin-top: 50px;
	/* Removed to fix footer positioning
	margin-bottom: 30px;
	*/
	padding-top: 15px;
	/* Removed to fix footer positioning
	padding-bottom: 25px;
	*/
	/* Removed inset as part of MD-3040 07222022 stj 	
	box-shadow: inset -1px 1px 17px 0px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	 */
	box-shadow: -1px 1px 17px 0px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	/*Create the parallax scrolling effect*/
	background-attachment: fixed;
	background-position: center 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: none;
	background-color: #ffffff;
	color: #002677;
	text-align: center;
	/*changed this from "left" for MD-3112 07222022 stj */
	/* Removed to fix footer positioning
	position: absolute;
	*/
	/* Changed Left: 0; width: 100%; for MD-3040 07222022 stj */
	/* Removed to fix footer positioning
	Left: -209px;
	bottom: 30px;
	width: 128%;
	*/
}

/*Added the following two outer-row properties to allow footer to span entire view area. These settings are added during Flare's build process with a max-width setting of 95vw. Having these settings called out specifically in our stylesheet allows us to override these settings for the footer. This required additional tweaking with the topic-layout, top-bar, and topic-layout-search properties so that the "body" content does not span all the way to the edge of the page but has a small buffer on the left/right.
*/

.off-canvas-wrapper-inner .outer-row
{
	max-width: 100vw;
	padding-left: 0px;
	padding-right: 0px;
}

.main-section > .outer-row
{
	max-width: 100vw;
	padding-top: 1em;
	padding-bottom: 0px;
}

div.info-section	/*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;
	color: #002677;
	max-height: 300px;
}

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;
	margin-left: 2em;
}

div.info-section > div:first-child
{
	margin-left: calc((100% - 70%)/2);
}

div.info-section > div:first-child:nth-last-child(2),
div.info-section > div:first-child:nth-last-child(2) ~ div	/* Use this width if there are 2 boxes */
{
	width: calc((70% - 1 * 2em) / 2);
}

div.info-section > div:first-child:nth-last-child(3),
div.info-section > div:first-child:nth-last-child(3) ~ div	/* Use this width if there are 3 boxes */
{
	width: calc((70% - 2 * 2em) / 3);
}

div.info-container p	/*Complex Selector: Any <p> that is contained within div.info-container will have the following properties*/
{
	color: #002677;
}

div.info-container a	/*Complex Selector: Any anchor (links) tags that are within div.info-container will have the following properties*/
{
	/*padding: 10px;*/
	color: #002677;
}

/*=Elements for content contained within each info section=*/

p.info-title
{
	font-size: 1.5em;
	line-height: 1em;
}

p.info-content
{
	font-size: 0.8em;
}

div.follow-us a	/*Complex Selector: Any anchor (links) tags that are within div.follow-us will have the following properties*/
{
	padding: 10px;
	color: #002677;
}

.flex-wrapper
{
	display: flex;
	min-height: 86.5vh;
	flex-direction: column;
	justify-content: space-between;
}

/*==================================================================================================================

Properties for Footer sections. The footer is content is contained within a snippet (Footer.flsnp) and is applied to each masterpage. Every page within the KC should have the same footer information.

==================================================================================================================*/

div.footer
{
	padding-top: 20px;
	padding-bottom: 0px;
	/* stj changed from 20 px during Optum rebranding */
	background-color: #002677;
	color: #ffffff;
	/* Removed to fix footer positioning
	position: absolute;
	*/
	/* Updated left 0 and width 100% values below for MD-3040 07222022 stj 
	Left: 0;
	width: 100%;
	*/
	/* Removed to fix footer positioning  - this extends past viewport and adds a scroll bar
	Left: -209px;
	bottom: 0;
	width: 128%;
	*/
}

div.footer p	/*Complex Selector: Any <p> that is contained within div.footer will have the following properties*/
{
	color: #ffffff;
	font-size: 0.8em;
}

div.footer a	/*Complex Selector: Any anchor (links) tags that are within div.footer will have the following properties */
{
	text-decoration: none;
	color: #ffffff;
}

a:link
{
	text-decoration: none;
	color: #0C55B8;
}

a:visited
{
	text-decoration: none;
	color: #0C55B8;
}

div.footer a:hover	/*Complex Selector: Any anchor (links) tags that are within div.footer will have the following properties */
{
	color: #3262C7;
}

a:hover
{
	/*	text-decoration: underline;*/
	color: #0C55B8;
	text-decoration: underline;
}

div.footer > div.outer-row
{
	line-height: 30px;
	padding: 0;
}

div.footer-content
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 0.8em;
	color: #FAF8F2;
}

div.home-master-page-footer	/*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;
	width: 100%;
}

div.home-master-page-footer::before
{
	content: ' ';
	display: table;
}

div.home-master-page-footer::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.home-master-page-footer > div
{
	float: right;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.home-master-page-footer > div:nth-child(1)
{
	width: 33.333%;
	margin-left: 0%;
}

div.home-master-page-footer > div:nth-child(2)
{
	width: 33.333%;
	margin-left: 0%;
}

div.home-master-page-footer > div:nth-child(3)
{
	width: 33.333%;
	margin-left: 0%;
}

/*==Paragraph style used for the Tips. This style is not currently used. ==*/

/*p.tip	
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-image: url('../Images/Assets/Icons/MainIcons/Tips-white.png');
	background-position: 15px center;
	background-repeat: no-repeat;
	border: solid 1px #fff;
	border-radius: 6px;
	line-height: 1em;
	overflow: hidden;
	padding: 15px 0px 15px 60px;
	text-align: left;
	margin: 5px 30px;
}*/

/*==================================================================================================================

Properties for QuickLinks. QuickLinks are based off the Wizard page elements. They offer a landing page of sorts for topics that are of the same category, e.g., "getting started" topics. These are used with the QuickLinks master page and skin. You must add the QuickLinks elements to your import file for proper styling.

==================================================================================================================*/

div.QuickLinks
{
	border: 10px solid #f2f2f2;
	padding: 30px;
	background-color: #f2f2f2;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	mc-disable-glossary-terms: true;
	font-family: 'Arial';
	min-height: 400px;
}

p.noteOrCautionQuickLinks
{
	border-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-style: solid;
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	background-repeat: no-repeat;
	mc-auto-number-position: none;
	font-weight: normal;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-radius: 5px;
	margin: 15px 10px 15px 10px;
	color: #0f0f59;
	background-color: transparent;
	width: 60%;
	/*border: solid 1px #0f0f59;*/
	padding: 10px 10px 10px 45px;
	background-image: url('../Images/Assets/GPSMarker.png');
	background-position: 10px;
}

/*==================================================================================================================

Properties for Wizards. There are three button styles - wizbutton (standard), wizbutton_long (for longer text, where there are only two options to display) and wizbutton_nav for the back and start again buttons

==================================================================================================================*/

div.wizard
{
	border: 10px solid #f2f2f2;
	padding: 30px;
	background-color: #f2f2f2;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	mc-disable-glossary-terms: true;
	font-family: 'Arial';
}

.wizbutton
{
	display: inline-block;
	border-radius: 12px;
	background-color: #3262C7;
	border: none;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	font-size: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	width: 170px;
	height: 70.4px;
	transition: all 0.3s;
	cursor: pointer;
	margin: 10px 5px;
	vertical-align: middle;
	font-family: 'Arial';
}

.wizbutton_long
{
	display: inline-block;
	border-radius: 12px;
	background-color: #3262C7;
	border: none;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	font-size: 12px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 3px;
	padding-right: 3px;
	width: 190px;
	transition: all 0.5s;
	cursor: pointer;
	margin: 10px 5px;
	vertical-align: middle;
	font-family: 'Arial';
}

.wizbutton_nav
{
	display: inline-block;
	border-radius: 12px;
	background-color: #002677;
	border: none;
	color: #ffffff;
	text-align: center;
	font-size: 12px;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 3px;
	padding-right: 3px;
	width: 170px;
	transition: all 0.5s;
	cursor: pointer;
	margin: 20px 5px;
	vertical-align: middle;
	font-family: 'Arial';
}

.wizbutton span
{
	cursor: pointer;
	display: inline-block;
	position: relative;
	/*transition: 0.5s;*/
}

.wizbutton span:after
{
	content: '\0020';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}

.wizbutton:hover	/*span*/
{
	background-color: #ffffff;
	color: #0C55B8;
}

.wizbutton:hover span:after
{
	opacity: 1;
	right: 0;
}

.wizbutton_long span
{
	cursor: pointer;
	display: inline-block;
	position: relative;
	/*transition: 0.5s;*/
}

.wizbutton_long span:after
{
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}

.wizbutton_long:hover span
{
	/*padding-right: 20px;*/
	background-color: #ffffff;
	color: #3262C7;
}

.wizbutton_long:hover span:after
{
	opacity: 1;
	right: 0;
}

div.sideContentWizard
{
	float: right;
	margin-left: 10px;
	margin-bottom: 20px;
	width: 33.33%;
	background-color: #ffffff;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #ffffff;
	border-left: 6px solid #ffffff;
	border-bottom: 6px solid #ffffff;
	border-bottom-left-radius: 6px;
}

.wiztext	/* for use with image buttons */
{
	color: #1f618d;
	font-weight: bold;
	text-align: center;
	text-decoration: underline;
	font-size: 20px;
	transition: all 0.3s;
	cursor: pointer;
	margin: 5px;
	font-family: 'Arial';
}

img.wiz	/* for use with image buttons */
{
	cursor: pointer;
	font-family: 'Arial';
}

p.noteOrCautionWizard
{
	border-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-style: solid;
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	background-repeat: no-repeat;
	mc-auto-number-position: none;
	font-weight: normal;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-radius: 5px;
	margin: 15px 10px 15px 10px;
	color: #0C55B8;
	background-color: #ebe9f2;
	width: 60%;
	border: solid 1px #0C55B8;
	padding: 10px 10px 10px 45px;
	background-image: url('../Images/Assets/GPSMarker.png');
	background-position: 10px;
}

div.topic-layout-reverse	/*Used for the Wizard topics instead of "topic-layout. Adds appropriate margin at the bottom to allow for the footer without overlapping content.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
}

div.topic-layout-reverse::before
{
	content: ' ';
	display: table;
}

div.topic-layout-reverse::after
{
	content: ' ';
	display: table;
	clear: both;
}

a.MCBreadcrumbsLink
{
	font-style: italic;
	text-decoration: none;
	color: #8400D9;
}

a.MCBreadcrumbsLink
{
	font-style: italic;
	text-decoration: none;
	color: #8400D9;
}

a.MCBreadcrumbsLink:visited
{
	text-decoration: none;
	color: #8400D9;
}

a.MCBreadcrumbsLink:hover
{
	text-decoration: underline;
	color: #3262C7;
}

MadCap|breadcrumbsProxy
{
	border-bottom: none;
	font-style: italic;
	font-size: 12pt;
	mc-breadcrumbs-prefix: ' [%=Variables.CoverProductName%]:';
	color: #8400D9;
}

MadCap|xref
{
	mc-format: '{para}';
	color: #0C55B8;
	text-decoration: none;
}

MadCap|xref:hover
{
	text-decoration: underline;
	color: #0C55B8;
}

MadCap|dropDownHotspot
{
	color: #002677;
}

MadCap|dropDownBody
{
	border-bottom: 1px solid #484D4F;
	padding: 5px;
}

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/Arrows/arrow-down-gray.png');
	mc-closed-image: url('../Images/Arrows/arrow-right-gray.png');
}

/*==Master Page Topic Layout==*/

nav.title-bar	/*Adds blur on top navigation bar to match footer and stand out from content pages*/
{
	border-bottom: 1px solid #484D4F;
	/*box-shadow: inset -1px 1px 17px 0px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);*/
}

div.top-bar	/*Contains the breadcrumbs and toolbar*/
{
	border-bottom: 1px solid #484D4F;
	min-height: 50px;
	/*Min-height is necessary for topics that are not included in a TOC*/
	margin-left: auto;
	margin-right: auto;
	max-width: 95vw;
	/*Manually set the max-width to 95vw to allow the content area to have a small buffer on the left/right while allowing the footer to span entire view area. Also added "outer-row" properties that set the max-width to 100vw. These settings are added during Flare's build process with a max-width setting of 95vw. Having these settings called out specifically in our stylesheet allows us to override these settings for the footer. This required additional tweaking with the topic-layout, top-bar, and topic-layout-search properties so that the "body" content does not span all the way to the edge of the page but has a small buffer on the left/right.
*/
}

div.search-container
{
	padding-bottom: 20px;
}

/*==================================================================================================================

Properties for Search Tips that display under the search bar.

==================================================================================================================*/

/* Big note: be sure to test this on lots of different screen sizes - you may need
to adjust the spacing on other viewports. */

p.SearchTips
{
	font-size: 1.2em;
	font-weight: normal;
	margin-bottom: 4px;
	margin-top: 10px;
	color: #002677;
}

MadCap|dropDown.SearchTips
{
	mc-closed-image: url('../Images/Assets/DocumentIcon.png');
	mc-open-image: url('../Images/Assets/DocumentIcon.png');
	mc-disable-glossary-terms: true;
}

div.search-container div.MCDropDownBody	/* Closes the gap left by moving the button */
{
	position: relative;
	top: -20px;
}

div.search-container + div	/* Closes the gap left by the moving the button */
{
	margin-top: -25px;
}

.MCDropDown.dropDown.dropDownSearchTips a.MCDropDownHotSpot.dropDownHead	/* Moves the dropdown head "button" to the right, next to the search bar */
{
	right: calc(-100% + 21px);
	width: 30px;
	background-image: none;
	padding: 0;
	color: #3262C7;
	position: relative;
	top: -36px;
}

div.search-container form.search	/* Scoots the right edge of the search bar over by 24px to make room for the button. */
{
	position: relative;
	width: calc(100% - 24px);
	left: calc(-0.5 * 24px);
}

.MCDropDown.dropDown.dropDownSearchTips img.MCDropDown_Image_Icon	/* Gets rid of the spacer transparent image that Flare inserts */
{
	width: 0px;
}

div.search-container div.MCDropDownBody	/* Add a border around the search tips box and a background color to the box to make it stand out from regular topic content, plus adjusted spacing */
{
	border: solid 2px #484D4F;
	background: #f2f2f2;
	padding: 10px 20px;
	margin: 30px 20px 10px;
}

button#closeSearchTips	/* Style a standard CHC simple close button. */
{
	float: right;
	border: none;
	margin: 0 -20px;
	cursor: pointer;
	background: none;
}

/*==================================================================================================================

Properties for side menu found within Topics master pages

==================================================================================================================*/

div.side-menu
/*This is the div that the menu proxy is contained in*/
/*the "margin-bottom: 275px" element is to prevent the footer from covering up the side menu content in the	event that the side menu takes up more of the screen than the topic content. Without the margin-bottom, the side menu could be hideen behnd the footer.*/
{
	padding-left: 10px;
	margin-top: 15px;
	/*	color: #484D4F; */
	color: #ffffff;
	/*margin-bottom: 275px;*/
}

div.headings-menu	/*This is the div that the headings menu proxy is contained in*/
{
	padding-left: 10px;
	margin-top: 15px;
	color: #3262C7;
}

div.fixed
{
	position: fixed;
	width: 12%;
	max-width: 200px;
	height: calc(48vh);
}

/*div.side-menu > ul:nth-child(2)	topic-related MasterPages have two menu proxies. If the topic is not included in the TOC, the TOC menu does not show up and only the menu based on headings will display. If the topic is included in the TOC, then the menu based on headings (the second menu proxy) will not display and only the TOC menu will display. See "div class="side-menu"" within topic-based MasterPages for related code/details.
{
	display: none;
}

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;
}*/

/*==================================================================================================================

Properties for Tutorial sections

==================================================================================================================*/

div.QuickStart
{
	min-height: 120px;
	color: #ffffff;
	margin-left: 120px;
	padding: 5px;
	border-radius: 999px;
}

div.QuickStart:nth-child(odd)
{
	background-color: #002677;
	border-radius: 20px;
}

div.QuickStart:nth-child(even)
{
	background-color: #484D4F;
}

img.QuickStart
{
	mc-thumbnail: normal;
	mc-thumbnail-max-height: auto;
	mc-thumbnail-max-width: 95px;
	float: left;
	padding: 5px;
	margin: 5px;
}

div.QuickStart::before
{
	display: table;
	border-radius: 20px;
}

div.QuickStart::after
{
	clear: both;
	display: table;
}

div.QuickStart p
{
	color: #ffffff;
}

/*==================================================================================================================

Styles apply to the feedback button found at the bottom of each topic and editable via masterpages.

==================================================================================================================*/

div.feedback	/*Feedback button at the bottom of each topic, found in Masterpage*/
{
	color: #ffffff;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	padding: 14px 20px;
	width: 200px;
	transition: all 0.5s cubic-bezier(.25,.8,.25,1);
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	margin: auto;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 15px;
	background-color: #002677;
	border: #002677;
	text-align: center;
	display: block;
	border-radius: 25px;
}

div.feedback:hover	/*When hovering over the feedback button the following properties apply*/
{
	/*box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	transform: scale(1.01);
	border: solid 2px #ffffff;*/
	color: #ffffff;
	background-color: #3262C7;
	text-decoration: none;
}

div.feedback:hover > a	/*Complex Selector: Any anchor (links) tags that are within div.feedback will have the following properties when hovering over the div.*/
{
	text-decoration: none;
	color: #ffffff;
}

a.feedback	/*Remove the underline applied to <a> tags by default when in conjunction with the feedback button.*/
{
	text-decoration: none;
}

div.ButtonPurple	/*Feedback button at the bottom of each topic, found in Masterpage*/
{
	color: #002677;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	padding: 14px 20px;
	width: 200px;
	transition: all 0.5s cubic-bezier(.25,.8,.25,1);
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	margin: auto;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 15px;
	background-color: rgba(132, 0, 217, .3);
	border: rgba(132, 0, 217, .3);
	text-align: center;
	display: block;
	border-radius: 25px;
}

div.ButtonPurple:hover	/*When hovering over the feedback button the following properties apply*/
{
	color: #ffffff;
	background-color: #3262C7;
	text-decoration: none;
}

div.ButtonGreen	/*Feedback button at the bottom of each topic, found in Masterpage*/
{
	color: #002677;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	padding: 14px 20px;
	width: 200px;
	transition: all 0.5s cubic-bezier(.25,.8,.25,1);
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	margin: auto;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 15px;
	background-color: rgba(70, 234, 167, .3);
	border: rgba(70, 234, 167, .3);
	text-align: center;
	display: block;
	border-radius: 25px;
}

div.ButtonGreen:hover	/*When hovering over the feedback button the following properties apply*/
{
	color: #ffffff;
	background-color: #3262C7;
	text-decoration: none;
}

/*==================================================================================================================



==================================================================================================================*/

div.topic-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.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	min-width: 95vw;
	max-width: 95vw;
	/*Manually set the max-width to 95vw to allow the content area to have a small buffer on the left/right while allowing the footer to span entire view area. Also added "outer-row" properties that set the max-width to 100vw. These settings are added during Flare's build process with a max-width setting of 95vw. Having these settings called out specifically in our stylesheet allows us to override these settings for the footer. This required additional tweaking with the topic-layout, top-bar, and topic-layout-search properties so that the "body" content does not span all the way to the edge of the page but has a small buffer on the left/right.
*/
}

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*/
{
	float: left;
	width: 13%;
	margin-left: 0%;
	/*border-right: 1px solid #d3d3d3;*/
}

div.topic-layout > div:nth-child(2)
{
	float: right;
	width: 13%;
	margin-left: 2%;
}

div.topic-layout > div:nth-child(3)
{
	width: 70%;
	margin-left: 2%;
}

div.topic-layout-search	/*For the Search Results topic, this property is used in place of the topic-layout property.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 325px;
	max-width: 95vw;
	/*Manually set the max-width to 95vw to allow the content area to have a small buffer on the left/right while allowing the footer to span entire view area. Also added "outer-row" properties that set the max-width to 100vw. These settings are added during Flare's build process with a max-width setting of 95vw. Having these settings called out specifically in our stylesheet allows us to override these settings for the footer. This required additional tweaking with the topic-layout, top-bar, and topic-layout-search properties so that the "body" content does not span all the way to the edge of the page but has a small buffer on the left/right.
*/
}

div.topic-layout-search::before
{
	content: ' ';
	display: table;
}

div.topic-layout-search::after
{
	content: ' ';
	display: table;
	clear: both;
}

MadCap|xref:focus
{
	color: #2d8dcc;
}

a
{
	text-decoration: none;
	color: #0C55B8;
}

MadCap|conceptLink
{
	mc-help-control-display: list;
	mc-label: 'See Also';
	color: #002677;
}

span.SearchHighlight
{
	background: #6FC1B1;
}

caption
{
	font-size: 10pt;
	padding: 5px;
}

h4
{
	color: #002677;
}

/*==================================================================================================================

Styles for glossary terms, including when not to display them.

==================================================================================================================*/

MadCap|glossaryTerm
{
	color: #0C55B8;
	font-weight: normal;
	mc-closed-image: url('../Images/Assets/Book.png');
	mc-open-image: url('../Images/Assets/Book2.png');
	text-decoration: underline;
	text-decoration-style: dotted;
	white-space: nowrap;
}

a.MCTextPopup
{
	color: #0C55B8;
	font-weight: normal;
	text-decoration: underline;
	text-decoration-style: dotted;
	white-space: nowrap;
}

a.GlossaryPageTerm
{
	color: #0C55B8;
}

/* Glossary term above search results styling  */

.term
{
	padding: 0px 0px 0px 30px;
	background: url('../Images/Assets/Book2.png') no-repeat left;
}

span.noGlossary	/*Apply this <span> around inline phrases where you want to eliminate the glossary term styling.*/
{
	mc-disable-glossary-terms: true;
}

/*The following disables glossary terms from appearing when a variable in the ProductNames file displays.*/

span[class^="ProductNames"] a.MCTextPopup.MCTextPopupHotSpot.MCTextPopupHotSpot.MCTextPopup_Closed,
span[class^="ProductNames"] a.MCTextPopup.MCTextPopupHotSpot.MCTextPopupHotSpot.MCTextPopup_Open
{
	color: inherit;
	text-decoration: inherit;
	background: inherit;
	padding-right: inherit;
	cursor: inherit;
}

span[class^="ProductNames"] a img.MCHelpControl_Image_Icon,
span[class^="ProductNames"] a span.MCTextPopupBody.popupBody
{
	display: none;
}

table.TableStyle-OptumTableStyles_smallfont img.MCHelpControl_Image_Icon	/*Hide glossary term icons in smallfont tables.*/
{
	display: none;
}

table.TableStyle-OptumTableStyles_smallfont a.MCTextPopup_Open.MCTextPopupHotSpot_	/*Hide glossary term icons in smallfont tables.*/
{
	background-image: none;
	padding-right: 0;
}

table.TableStyle-OptumTableStyles_smallfont a.MCTextPopup_Closed.MCTextPopupHotSpot_	/*Hide glossary term icons in smallfont tables.*/
{
	background-image: none;
	padding-right: 0;
}

span.mc-variable
{
	mc-disable-glossary-terms: true;
}

.micro-response img.MCHelpControl_Image_Icon	/*Hide glossary term icons in Micro Content.*/
{
	display: none;
}

.micro-response a.MCTextPopup_Open.MCTextPopupHotSpot_	/*Hide glossary term styling in Micro Content.*/
{
	background-image: none;
	padding-right: 0;
	text-decoration: none;
	color: #37474f;
	pointer-events: none;
}

.micro-response a.MCTextPopup_Closed.MCTextPopupHotSpot_	/*Hide glossary term styling in Micro Content.*/
{
	background-image: none;
	padding-right: 0;
	text-decoration: none;
	color: #37474f;
	pointer-events: none;
}

/*==================================================================================================================

Custom styles that apply to tables marked as "small font." The Small Font stylesheet is for use with print output, however, the KC houses large tables that are easier to read with these properties applied.

==================================================================================================================*/

table.TableStyle-OptumTableStyles_smallfont	/*Display smallfont tables with size 8pt font in HTML5 output*/
{
	line-height: 1em;
	font-size: 8pt;
}

MadCap|relationshipsHeading.concept
{
	mc-label: 'Related Topics';
	color: #0C55B8;
}

MadCap|relationshipsProxy
{
	border-top-color: #0C55B8;
}

MadCap|microContent
{
	mc-disable-glossary-terms: true;
}

.micro-response
{
	mc-disable-glossary-terms: true;
}

p.invisible	/*This <p> tag has the "invisible" class applied so that the SEarchResults.htm topic will be linked in the project, allowing the "Content to include" option option to be set to "content linked directly or indirectly from the target. See this blog for more details: https://www.madcapsoftware.com/blog/a-follow-up-tip-on-customizing-search-results-pages-in-madcap-flares-html5-top-navigation-output/*/
{
	visibility: hidden;
}

@media print
{
	div.topic-layout > div:nth-child(3)
	{
		width: 100%;
	}

	div.feedback
	{
		display: none;
	}

	MadCap|menuProxy
	{
		display: none;
	}

	div.info-container
	{
		display: none;
	}

	div.home-master-page-footer
	{
		display: none;
	}

	div.side-menu
	{
		display: none;
	}

	div.headings-menu
	{
		display: none;
	}

	div.MCBreadcrumbsBox_0
	{
		font-size: 8pt;
	}

	div.buttons popup-container clearfix topicToolbarProxy _Skins_NFM_kcTopicToolbar mc-component nocontent
	{
		display: none;
	}

	div.topic-layout > div:nth-child(1)	/*Menu Proxy container*/
	{
		display: none;
	}

	div.topic-layout > div:nth-child(2)
	{
		width: 100%;
		margin-left: 0%;
	}

	a.MCTextPopup.MCTextPopupHotSpot.MCTextPopupHotSpot.MCTextPopup_Closed,
	a.MCTextPopup.MCTextPopupHotSpot.MCTextPopupHotSpot.MCTextPopup_Open
	{
		color: inherit;
		text-decoration: underline;
		text-decoration-style: dotted;
		background: inherit;
		padding-right: inherit;
		cursor: inherit;
	}

	img.MCHelpControl_Image_Icon	/*Hide glossary term icons in printed pages.*/
	{
		display: none;
	}

	a.MCTextPopup_Open.MCTextPopupHotSpot_	/*Hide glossary term icons in printed pages.*/
	{
		background-image: none;
		padding-right: 0;
	}

	a.MCTextPopup_Closed.MCTextPopupHotSpot_	/*Hide glossary term icons in printed pages.*/
	{
		background-image: none;
		padding-right: 0;
	}
}

MadCap|dropDownHotspot.SeeAlso	/*This style applies to See Also dropdowns.*/
{
	color: #002677;
	/*	color: #0f0f59; */
	font-weight: bold;
	font-style: italic;
}

p.invisible	/*This <p> tag has the "invisible" class applied so that the SEarchResults.htm topic will be linked in the project, allowing the "Content to include" option option to be set to "content linked directly or indirectly from the target. See this blog for more details: https://www.madcapsoftware.com/blog/a-follow-up-tip-on-customizing-search-results-pages-in-madcap-flares-html5-top-navigation-output/*/
{
	visibility: hidden;
}

h1.ShortDocHeading
{
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	mc-auto-number-format: '{ }';
	font-weight: bold;
	font-style: normal;
	color: #002677;
	/*	color: #0f0f59; */
}

