/*<meta />*/

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

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

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

/*==Topic General Styles==*/

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');

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

:root
{
	--fontSansSerif: 'OneStream Sans', Arial, sans-serif;
	--fontMono: 'OneStream Fono', 'Andale Mono', Consola, monospace;
}

@font-face 
{
	font-family: 'OneStream Sans';
	src: url(../Fonts/OneStreamSans-Regular.otf), local(OneStreamSans-Regular);
}

@font-face 
{
	font-family: 'OneStream Sans';
	src: url(../Fonts/OneStreamSans-Bold.otf), local(OneStreamSans-Bold);
	font-weight: bold;
}

@font-face 
{
	font-family: 'OneStream Sans';
	src: url(../Fonts/OneStreamSans-RegularItalic.otf), local(OneStreamSans-RegularItalic);
	font-style: italic;
}

@font-face 
{
	font-family: 'OneStream Fono';
	src: url(../Fonts/OneStreamFono-Regular.otf), local(OneStreamFono-Regular);
}

@font-face 
{
	font-family: 'OneStream Fono';
	src: url(../Fonts/OneStreamFono-Bold.otf), local(OneStreamFono-Bold);
	font-weight: bold;
}

@font-face 
{
	font-family: 'OneStream Fono';
	src: url(../Fonts/OneStreamFono-Regular.otf), local(OneStreamFono-Regular);
	font-style: italic;
}

body
{
	color: #404040;
	/* charcoal color */
	font-family: var(--fontSansSerif);
	line-height: 1.7em;
	background-color: white;
	hyphens: none;
	mc-hyphenate: never;
}

/*======================================================================================*/
/* Flexbox for page layout                                                             */
/*======================================================================================*/

.topic-layout
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	position: relative;
	z-index: 0;
	margin-top: 50px;
	z-index: 0;
}

.navigationmenu,
.body,
.resources
{
	display: block;
	flex-grow: 0;
	flex-shrink: 1;
	align-self: auto;
	margin: 2rem 1rem 1rem;
	margin-bottom: 200px;
}

div.sticky
{
	position: sticky;
	position: -webkit-sticky;
}

.navigationmenu,
.resources
{
	flex-basis: 300px;
}

.body
{
	flex-basis: 1050px;
}

.body
{
	padding: 25px;
	min-height: 80vh;
	/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
	border: 1px solid #979797;
	border-radius: 5px;
	opacity: 1;
	background-color: white;
	z-index: 100;
	/*margin-top: 35px;  Replaced with margin on the resources, body, navigation menu */
}

.search
{
	/*margin-right: 0; replaced with skin update*/
	/*width: 350px; replaced with skin update*/
}

a
{
	color: #373737;
	text-decoration: underline;
}

a:hover
{
	color: #F67D02;
}

h1
{
	font-size: 2.0em;
	font-weight: bold;
	margin-bottom: 8px;
	padding-bottom: 10px;
	color: #373737;
}

h1.landing
{
	font-size: 6.0em;
	/*font-weight: bold;*/
	font-family: var(--fontSansSerif);
	color: #373737;
	line-height: 1.25em;
}

h2
{
	font-size: 1.75em;
	font-weight: bold;
	margin-bottom: 4px;
	margin-top: 20px;
	color: #4b4b4b;
}

.h2-rn
{
	display: inline-block;
	width: 80%;
	background: #373737;
	color: white;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-radius: 0 30px 30px 0;
}

.h2-rn-sol
{
	display: inline-block;
	width: 100%;
	background: #373737;
	color: white;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-radius: 0 30px 30px 0;
}

h3
{
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 4px;
	margin-top: 16px;
	color: #5e5e5e;
}

h4
{
	font-size: 1.0em;
	font-weight: bold;
	margin-bottom: 4px;
	margin-top: 12px;
	color: #727272;
}

.search-bar.search-bar-container._Skins_SearchOther.mc-component .search-submit
{
	/*width: 48px; replaced with skin update*/
	/*margin-top: -3px; replaced with skin update*/
	/*background: transparent url(Images/SearchIcon.png) no-repeat center 7px;*/
	/*-pie-background: transparent url(Skins/Default/Stylesheets/Components/Images/SearchIcon.png) no-repeat center center;*/
}

.search-bar._Skins_SearchOther.mc-component .search-field
{
	height: 2.5em;
	border: 1px solid #373737;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	color: #5F5F5F;
	font-size: 1em;
	padding-left: 20px;
	background-color: #e8e9ea;
}

.search-bar._Skins_SearchOther.mc-component
{
	/*display: block; replaced with skin update*/
	/*width: 100%; replaced with skin update*/
	/*height: 2.5em; replaced with skin update*/
	/* margin-top: 10px; */
}

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

ul.navigation
{
	height: 100%;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 20px;
	padding-right: 20px;
	/*z-index: 2; removed relative position elements */
	/*position: relative; removed relative position elements */
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left: 0;
	background-repeat: repeat;
	background-position: center center;
	text-align: center;
	text-indent: 0px;
	white-space: normal;
	color: #7E8890;
	font-family: var(--fontSansSerif);
	font-size: 14px;
	font-weight: normal;
}

ul.navigation li > a
{
	display: block;
	line-height: 25px;
	color: white;
	font-family: var(--fontSansSerif);
	font-size: 16px;
	font-weight: bold;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 10px;
	margin-bottom: 0px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 20px;
	padding-bottom: 10px;
}

ul.navigation li > a
{
	display: block;
	line-height: 25px;
	color: white;
	font-family: var(--fontSansSerif);
	font-size: 16px;
	/*font-weight: bold;*/
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 10px;
	margin-bottom: 0px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}

ul.navigation li > a:hover
{
	color: #373737;
	transition: .5s;
	background: transparent;
}

/* This makes the background on the navigation objects transparent when hovering */

ul.navigation li:hover
{
	background: transparent;
}

ul.navigation li.is-expanded > a
{
	color: #D4D4D4;
	/* was #373737 */
}

ul.navigation ul ul > li > a
{
	margin-right: 0px;
	padding-right: 10px;
	color: #373737;
}

ul.navigation ul > li > a
{
	padding: 0 15px;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 15px;
	white-space: nowrap;
	color: #373737;
	border-radius: 5px;
}

ul.navigation ul > li > a:hover
{
	color: whitesmoke;
	background: #373737;
	font-size: 16px;
}

ul.navigation ul ul > li > a:hover
{
	font-size: 16px;
}

/* this section manages the mini TOC */

ul.menu.mc-component
{
	overflow-y: auto;
	color: #373737;
	font-family: var(--fontSansSerif);
	font-size: .75em;
	font-weight: 700;
	font-style: normal;
	line-height: 1.5em;
	margin-left: 10px;
	margin-right: 0;
	margin-top: 0;
	/*replaced 0px, the margin is handled by flexbox items */
	margin-bottom: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 300px;
	min-height: auto;
	max-height: 80vh;
	/* background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); */
	background: #e8e9ea;
	border: 1px solid #373737;
	border-radius: 5px;
	/*position: absolute;  was absolute */
	/*top: 130px; 		 was 130px */
	/* right: 105em; 		 was 50px */
}

nav.title-bar
{
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	/*position: fixed;*/
	/*top: 0;*/
	/* removed to fix the alignment issues inside the topic*/
	width: 98%;
	/* changed from 98% to make it fit the full width */
	margin-left: 15px;
	margin-right: 15px;
	/*margin-bottom: 20px;*/
	position: sticky;
	/* makes the alignment of the left and right margin equal */
	/* margin-top: 10px; */
	border-radius: 5px;
	height: 85px;
	/*z-index: 99;*/
	/* removed to fix the alignment issues inside the topic*/
	/*border-bottom: 1px solid #5564FF;*/
	background: url(../Images/black_banner.jpg) center center;
	/* background: #00985B; */
	background-size: cover;
	z-index: 99;
}

.title-bar-layout a.logo
{
	border: none;
	padding: 0;
	margin: 0;
	margin-left: -155px;
	z-index: 1;
	display: block;
	width: 229px;
	height: 55px;
	background: transparent url(../Images/OneStream_Brandmark_White.png) no-repeat center center;
}

.FieldName	/*class to add bold text to text fields for the UI */
{
	font-weight: bold;
	/*font-family: var(--fontSansSerif); pretty sure that this isn't needed*/
	padding-bottom: -10pt;
}

p
{
	margin-bottom: 8px;
	margin-top: 8px;
	font-family: var(--fontSansSerif);
	/*width: 60%;*/
	/*display: inline;*/
	/* might need to remove this */
}

img	/*Setting max-width: 100%; property makes images always fit the width of the container*/
{
	max-width: 100%;
	padding-right: 5px;
	vertical-align: middle;
}

img.thumbnail
{
	mc-thumbnail: popup;
}

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

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

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

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

MadCap|xref
{
	color: #929292;
	mc-format: '{para}';
	text-decoration: underline;
}

MadCap|xref:hover
{
	color: #F67D02;
}

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

MadCap|dropDownHotspot
{
	color: #f59405;
	font-weight: bold;
}

MadCap|codeSnippetBody
{
	font-family: var(--fontMono);
}

.micro-content-proxy._Skins_AdditionalResources_MC_FAQ1.mc-component .proxy-title
{
	color: #373737;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 10px;
	padding-bottom: 0px;
}

.micro-content-proxy._Skins_AdditionalResources_MC_FAQ1.mc-component .micro-response
{
	color: #373737;
	background-color: #e8e9ea;
	display: grid;
}

.micro-content
{
	/* overflow-y: auto; */
	line-height: normal;
}

button.mc-dropdown-item
{
	border: none;
	background: transparent;
	text-align: left;
	font: inherit;
	font-size: 14px;
}

.cr-title
{
	padding-bottom: 20px;
	width: 450px;
}

.cr-title:hover
{
	color: whitesmoke;
	padding-bottom: 20px;
}

p.Tip
{
	display: block;
	border-left: 10px solid #373737;
	padding-left: 20px;
	margin-right: 5%;
	margin-bottom: 10pt;
	padding-bottom: 6px;
	padding-top: 6px;
	padding-right: 5%;
	mc-auto-number-format: '{color royalblue}{b}TIP: {/b}{/color}';
	background-color: whitesmoke;
}

p.Note
{
	display: block;
	border-left: 10px solid #3D65C9;
	padding-left: 20px;
	margin-right: 5%;
	margin-bottom: 10pt;
	padding-bottom: 6px;
	padding-top: 6px;
	padding-right: 5%;
	mc-auto-number-format: '{color royalblue}{b}NOTE: {/b}{/color}';
	background-color: whitesmoke;
}

p.Important
{
	display: block;
	border-left: 10px solid #47A3A3;
	padding-left: 20px;
	margin-right: 5%;
	margin-bottom: 10pt;
	padding-bottom: 6px;
	padding-top: 6px;
	padding-right: 5%;
	mc-auto-number-format: '{color royalblue}{b}IMPORTANT: {/b}{/color}';
	background-color: whitesmoke;
}

p.Caution
{
	display: block;
	border-left: 10px solid #F2A73D;
	padding-left: 20px;
	margin-right: 5%;
	margin-bottom: 10pt;
	padding-bottom: 6px;
	padding-top: 6px;
	padding-right: 5%;
	mc-auto-number-format: '{color royalblue}{b}CAUTION: {/b}{/color}';
	background-color: whitesmoke;
}

p.example
{
	border-left: 10px solid steelblue;
	margin-left: 40px;
	padding-left: 10px;
	padding-right: 20%;
	border-radius: 10px;
	mc-auto-number-format: '{color royalblue}{b}Example: {/b}{/color}';
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* Copyright Notice Button         */

.button
{
	font-size: .8em;
	padding: 8px;
	color: #fff;
	background: #373737;
	border: 2px solid #373737;
	border-radius: 5px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease-out;
	margin-right: 0;
	margin-top: 8%;
	margin-left: 50%;
}

.button:hover
{
	background: #fff;
	color: #373737;
}

.overlay
{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
	z-index: 1000000;
}

.overlay:target
{
	visibility: visible;
	opacity: 1;
}

.popup
{
	margin: 70px auto;
	padding: 20px;
	background: #fff;
	border-radius: 10px;
	width: 50%;
	position: relative;
	transition: all 1s ease-in-out;
	z-index: 10000000;
	transform: translateY(60px);
}

.popup h2
{
	margin-top: 0;
	color: #373737;
	font-family: var(--fontSansSerif);
}

.popup .close
{
	position: absolute;
	top: 20px;
	right: 30px;
	transition: all 200ms;
	font-size: 30px;
	font-weight: bold;
	text-decoration: none;
	color: #373737;
}

.popup .close:hover
{
	color: #929292;
}

.popup .content
{
	max-height: 30%;
	overflow: auto;
}

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

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

/* no longer used after implementation of top-layout class
div.content-container	Wraps the topic content on the masterpage and provides the white background behind topics.
{
	width: 50%;
	margin-bottom: 2%;
	margin-top: 10%;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF;
	padding: 25px;
	min-height: 80vh;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	border: 1px solid #5564FF;
	border-radius: 5px;
}*/

/* no longer used
div.side-content
{
	float: right;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 40%;
}*/

/* Toolbar Previous Next */

.button-group-container-left
{
	float: left;
	margin-left: -4px;
	position: absolute;
	top: 32px;
	left: 360px;
	z-index: 10;
}

/*== Footer==*/

div.footer
{
	background-color: #8a9297;
	padding: 1% 15%;
}

p.footer
{
	margin-top: 5px;
	margin-bottom: 5px;
	line-height: 13pt;
	color: #fff;
}

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

div.up3_Home1::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.up3_Home1 > div:nth-child(1)
{
	width: 60% !important;
	margin-left: 0%;
}

div.up3_Home1 > div:nth-child(2)
{
	width: 33.333%;
	margin-left: 0%;
	position: relative;
}

div.up3_Home1 > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 0px;
	padding-right: 0px;
}

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

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

div.up3_Home2::after
{
	content: ' ';
	display: table;
	clear: both;
}

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

div.up3_Home2 > div:nth-child(1)
{
	width: 50%;
	margin-left: 0%;
}

div.up3_Home2 > div:nth-child(2)
{
	width: 50%;
	margin-left: 0%;
}

.micro-content-proxy._Skins_AdditionalResources_MC_FAQ1.mc-component.micro-content-container.micro-content-optional-phrase a	/* Additional Resources URLs dark with no line */
{
	/*text-decoration: none;*/
	/*padding-left: 5px;*/
	color: #373737;
}

.micro-content-proxy._Skins_AdditionalResources_MC_FAQ1.mc-component.micro-content-container.micro-content-optional-phrase a:hover
{
	color: #929292;
}

.micro-content-proxy._Skins_AdditionalResources_MC_FAQ1.mc-component	/* Additional Resources box width */
{
	width: 300px;
	border: 1px solid #373737;
	background: #e8e9ea;
}

div.home-footer
{
	width: 100%;
	height: 160px;
	background: #373737;
	padding-left: 15px;
	bottom: 0;
}

div.home-footer:before
{
	content: "Check us out on social media";
	display: inline-block;
	/*padding-left: 10px;*/
	padding-top: 10px;
	color: whitesmoke;
}

div.home-footer:after
{
	content: "Want to learn more:";
	display: inline-block;
	padding-top: 10px;
	color: whitesmoke;
	position: relative;
	top: -175px;
	left: 756px;
}

div.home-footer > p
{
	color: whitesmoke;
}

.os-community
{
	display: inline-block;
	padding-top: 10px;
	color: whitesmoke;
	position: relative;
	top: 56px;
	left: 468px;
}

.os-community > a:hover
{
	color: white;
}

.os-navigator
{
	display: inline-block;
	padding-top: 10px;
	color: whitesmoke;
	position: relative;
	top: 32px;
	left: 541px;
}

.os-navigator > a:hover
{
	color: white;
}

.footer-links
{
	color: whitesmoke;
	text-decoration: underline;
}

.footer-links:hover
{
	color: #d4d4d4;
	text-decoration: underline;
}

.spacer
{
	height: 10px;
}

.off-canvas-wrapper-inner .outer-row
{
	max-width: 73em;
}

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

/* Styles for v7 page */

.v7_cell
{
	padding: 5px;
}

.v7_cell:before
{
	content: url(../Images/pdf.png);
	padding-right: 10px;
}

/* Styles for Videos page */

.lcol,
.rcol
{
	/* left and right columns on video page */
	width: 100%;
	height: auto;
	/* border: 1px solid red; */
	padding-right: 20px;
}

.rcol-text-right
{
	/* margin-left: 75px; */
}

.container
{
	/* container for video page styles */
	/* border: 1px solid green; */
	height: auto;
	width: 65%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* was space-around */
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
}

.video-row
{
	/* styles for rows on video page */
	width: 90%;
	height: auto;
	/* border-top: 1px solid teal; */
	padding: 20px;
}

.header-row
{
	/* first row, separate styling, on video page */
	width: 90%;
	height: auto;
	padding: 20px;
	padding-top: 60px;
}

.video-row-flex
{
	/* row that does not contain any text headers */
	display: flex;
	width: 100%;
	height: auto;
	border-top: 2px solid #5564FF;
	padding: 20px;
	/*padding-top: 60px;*/
	padding-bottom: 60px;
	justify-content: space-between;
	/* was space around */
}

/* End of video page styles */

.mediabox-wrap
{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000;
	background-color: rgba(0,0,0,0.8);
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 999 !important;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: mediabox;
	animation-name: mediabox;
}

@-webkit-keyframes mediabox {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} 

@keyframes mediabox {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} 

.mediabox-content
{
	max-width: 680px;
	display: block;
	margin: 0 auto;
	height: 100%;
	position: relative;
}

.mediabox-content iframe
{
	max-width: 100% !important;
	width: 100% !important;
	display: block !important;
	height: 480px !important;
	border: none !important;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}

.mediabox-hide
{
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: mediaboxhide;
	animation-name: mediaboxhide;
}

@-webkit-keyframes mediaboxhide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
} 

@keyframes mediaboxhide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
} 

.mediabox-close
{
	position: absolute;
	top: 0;
	cursor: pointer;
	bottom: 428px;
	/* was 528 */
	right: 0px;
	margin: auto 0;
	width: 24px;
	height: 24px;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAMvSURBVHja7Js9aBRBFMd/d1lPY6FiJVjY+Fkoxl7wA1Q0prQRS6tgoZV2MWIRRVHUUq3U+JnESrS2sBXBzipREWMlATXwt8gFznC5nd15M7Nn8uC45nZnfr/dY96+N1uTxFKOOks8lgUU/H2t4tJqIQUcAiaBGeBymcECRgO4B/wBPgJ9zkdKcvkclfRL/8ZtSTXH40N+GpLGF8zth6Q9Lse7DHCsDXxVJLSDLyQhb4B+Sb/VOVJJ6ATfKqGvrIDjDvCpJLjAz8d0JwmLDTBQAD62hIakiYJzm5a021VAfwn4WBLKwLdK2JUnIJP0XX4RSoIP/Hy8W3jeepv1dL3nmjwI3DLOExrAU2DA8zwb8xKhGeCuwYQtJTSAZwbwAHdcEqFM0mPZhO/foSHppdFcrraby2IDV0FCcPi8PCClhCjwLplgCgkrDeGv5I3pcjViSogK7yogloTo8EUEhJaQBL6oAGsJ9yVtkrRD0qsU8JKolagKZ8AD4ETFymFXgPOAQpXE5mMWOAk86XZ4n6pwlSSUhvcti1dBghe8RV8gpYQRX3irxkgKCSPABV94y85QTAlm8NatsRgSTOGBUnmAS57w3KiA0Ro3gHOW8KEEAOwE3hvfXWubFauu6A6vCND07OmW9viq5vpsGT3AtRAN2XoA+BfAwQBiTweoNpMZw48BRwKuAoPN7zNVWwZjwAfpO9S7DN5cQmYAPw4cTvAsYPJ3qHcpvNmdUO9ieBMJZQT0AhMVgfeWUC8BP87cjjHfuA6sATY0c4c0EgpUUHslvTaq3l5aUL1N1oarAnxSCVWBTyYhJvyw41XJJI3GkpAH/yYyfHQJi01gdUL4qBKqCh9NQrtBx4wGvGi0XS6T9MhoTkN5AtZVDN5awlTePsGfwDfPjGwYGDKu3s4Cp4BRz/N8cskED0iaqciVt7wTvkra5roKlJEQGt5HwhdJ24vmAUUkDEV+VyCT9NBxbp/bXXnXTNBFQmz4IhI6wrs+C+zvICEVvIuEKUlbrZ4G97WRkBq+k4RJSVusd4ntlfSheVudrQh8q4SbmntH6K2kzSF3if1Xsfzq7LKAJR5/BwCdAQBJn4egPgAAAABJRU5ErkJggg==') no-repeat;
	background-size: 24px 24px;
	-webkit-background-size: 24px 24px;
	-moz-background-size: 24px 24px;
	-o-background-size: 24px 24px;
	z-index: 10;
}

.mediabox-close:hover
{
	opacity: 0.5;
}

pre
{
	font-family: var(--fontMono);
	white-space: pre-wrap;
}

span.SearchHighlight
{
	color: #373737;
	background-color: #13f34a;
}

@media all and (max-width: 768px) and (min-width: 10px)
{
	.mediabox-content
	{
		max-width: 90%;
	}
}

@media all and (max-width: 600px) and (min-width: 10px)
{
	.mediabox-content iframe
	{
		height: 320px !important;
	}

	.mediabox-close
	{
		bottom: 362px;
	}
}

@media all and (max-width: 480px) and (min-width: 10px)
{
	.mediabox-content iframe
	{
		height: 220px !important;
	}

	.mediabox-close
	{
		bottom: 262px;
	}
}

/*=====================================================================================================================
Styles for Feedback Form
=====================================================================================================================*/

#btn-feedback
{
	background-color: #373737;
	color: white;
	border: 1px solid #373737;
	cursor: pointer;
	padding: 10px 20px;
	margin: 10px 0;
	border-radius: 5px;
	width: 5px;
	writing-mode: vertical-rl;
	transform: rotate(0deg);
	display: flex;
	align-items: center;
	position: relative;
	/*top: -15px;*/
	right: -539px;
	/* was 1023px */
	height: 90px;
	z-index: -10;
}

#btn-feedback:hover
{
	transition: all 0.4s ease-in-out;
	transform: translate3d(-50px, 0, 0);
}

#btn-feedback.stay
{
	transform: translate3d(-50px, 0, 0);
	opacity: 0;
	z-index: -10;
}

.blocker
{
	width: 540px;
	height: 110px;
	border: none;
	position: relative;
	background-color: whitesmoke;
	opacity: 1;
	right: -483px;
	bottom: -26px;
}

.feedback-panel
{
	background-color: #373737;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
	text-align: center;
	padding-left: 30px;
	padding-bottom: 30px;
	width: 365px;
	border: 2px solid #373737;
	height: 400px;
	position: relative;
	top: -351%;
	right: -200%;
}

.feedback-title
{
	font-family: Arial, Helvetica, sans-serif;
	margin-top: -30px;
}

.btn-feedback:hover + .feedback-panel
{
	transition: all 0.4s ease-in;
	transition-delay: .5s;
	transform: translate3d(-510px, 0, 0);
}

.feedback-panel.stay-feedback
{
	transform: translate3d(-510px, 0, 0);
}

.feedback-panel.stay-feedback
{
	transition: all 0.5s ease-in-out;
	transition-delay: .2s;
	transform: translate3d(-510px, 0, 0);
}

.contact
{
	display: flex;
	flex-direction: column;
	align-items: start;
}

.contact-title
{
	display: flex;
	justify-content: space-evenly;
	color: whitesmoke;
	font-size: 40px;
	margin-top: 50px;
	margin-bottom: 20px;
}

.contact-inputs
{
	width: 300px;
	height: 25px;
	border: solid 1px whitesmoke;
	outline: none;
	padding-left: 25px;
	padding-right: 25px;
	color: white;
	/* was #666 */
	border-radius: 50px;
	display: flex;
	align-items: start;
	margin-bottom: 20px;
	background-color: #373737;
}

.contact-inputs:focus
{
	border: 2px solid #5564FF;
	box-shadow: 3px 3px 10px rgb(74, 74, 234);
}

.contact-inputs::placeholder
{
	color: #a9a9a9;
}

.contact textarea
{
	height: 140px;
	padding-top: 15px;
	border-radius: 20px;
}

.contact-btn
{
	display: flex;
	align-items: center;
	padding: 15px 30px;
	font-size: 16px;
	color: white;
	gap: 10px;
	border: none;
	border-radius: 50px;
	background: #5564FF;
	cursor: pointer;
	margin-bottom: 20px;
}

.contact-btn:hover
{
	outline: solid 2px gray;
	box-shadow: 2px 2px 30px gray;
}

.cancel-btn
{
	background: gray;
	margin-left: 20px;
}

#cancel-btn:hover
{
	outline: 2px solid rgb(180, 178, 178);
	box-shadow: 2px 2px 30px gray;
}

/*.body-container {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}*/

.body-feedback
{
	height: 0;
	position: relative;
}

.btn-container
{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.btn-feedback.stay
{
	transition: all 0.3s ease-in-out;
	transition-delay: .4s;
	transform: translate3d(50px, 0, 0);
}

.close-btn
{
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

/*=====================================================================================================================
End of Styles for Feedback Form
=====================================================================================================================*/

/*===========================================================================================================================================================
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 tablet
{
	div.content-container
	{
		width: 90%;
		margin-left: 5%;
	}

	div.home-footer
	{
		padding: 1% 5%;
	}

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

	div.up3_Home2 > div:nth-child(1)
	{
		width: 50%;
		margin-left: 0%;
	}

	div.up3_Home2 > div:nth-child(2)
	{
		width: 50%;
		margin-left: 0%;
	}
}*/

div.up3_Home1 > div:nth-child(2)
{
	width: 33.333%;
	margin-left: 0%;
}

div.up3_Home1 > div:nth-child(1)
{
	width: 41.667%;
	margin-left: 0%;
}

@media only screen and (max-width: 1279px)
{
	.title-bar-layout a.logo
	{
		margin-left: 110px;
	}

	div.up3_Home1 > div:nth-child(2)
	{
		width: 8.3333%;
		margin-left: 0%;
	}

	.topic-layout
	{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: flex-start;
		align-content: flex-start;
		margin-top: 50px;
		z-index: 0;
	}

	.navigationmenu,
	.body,
	.resources
	{
		display: block;
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: auto;
		align-self: auto;
	}

	.navigationmenu,
	.resources
	{
		flex-basis: auto;
		max-height: 200px;
		overflow-y: auto;
	}

	.navigationmenu
	{
		order: 1;
	}

	.resources
	{
		order: 2;
	}

	.body
	{
		flex-basis: 1050px;
		order: 3;
	}

	.micro-content-proxy._Skins_AdditionalResources_MC_FAQ1.mc-component	/* Additional Resources box width */
	{
		width: 300px;
	}

	ul.menu.mc-component	/* Control scroll for tablet and smaller */
	{
		overflow-y: auto;
		min-height: auto;
		max-height: 200px;
	}
}

@media only screen and (max-width: 1279px)
{
	.title-bar-layout a.logo
	{
		margin-left: 14%;
	}
}

@media only screen and (max-width: 1279px)
{
	.title-bar .menu-icon span
	{
		height: 48px;
		width: 48px;
		display: none;
		background: transparent url(Images/HamburgerIcon-gray.png) no-repeat center center;
		-pie-background: transparent url('Skins/Fluid/Stylesheets/Images/HamburgerIcon-gray.png') no-repeat center center;
	}
}

@media only screen and (max-width: 767px)
{
	.title-bar-layout a.logo
	{
		margin-left: 110px;
	}

	div.up3_Home1 > div:nth-child(2)
	{
		width: 8.3333%;
		margin-left: 0%;
	}

	.topic-layout
	{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: stretch;
		align-content: stretch;
		margin-top: 50px;
		z-index: 0;
	}

	.navigationmenu,
	.body,
	.resources
	{
		display: block;
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: auto;
		align-self: center;
	}

	.navigationmenu,
	.resources
	{
		max-height: 200px;
		overflow-y: auto;
	}

	.navigationmenu
	{
		order: 1;
	}

	.resources
	{
		order: 3;
	}

	.body
	{
		order: 2;
	}
}

span.Emphasis_Bold,
b
{
	font-weight: bold;
}

span.Emphasis_Italic,
i
{
	font-style: italic;
}

p.mc-para-header
{
	font-family: var(--fontSansSerif);
	font-weight: bold;
	color: #373737;
	margin-bottom: 0;
	margin-top: 10px;
	font-size: 16px;
}

ul.mc-ul-list
{
	/*padding-bottom: 10px;*/
	margin-top: 5px;
}

@media print
{
	:root
	{
		--fontSansSerif: Arial;
		--fontMono: 'Courier New';
	}
}

h1.h1-prev-sol
{
	font-size: 2.0em;
	font-weight: bold;
	margin-bottom: 28px;
	/* was 8px */
	margin-top: 50px;
	padding-bottom: 10px;
	color: #373737;
	margin-left: 225px;
}