/*<meta conditions="General.ImportOnly" />*/

@import url('Prism.css');

@import url('ScriptStyles.css');

@import url('RelationshipStyles.css');

@import url('KnowledgeStyles.css');

@import url('TopicStyles.css');

@font-face 
{
	font-family: Roboto;
	src: url(../Fonts/Roboto/Roboto-Regular.ttf);
}

/*font-family: 'Overpass';
	src: url(../Fonts/Overpass/Overpass-VariableFont_wght.ttf);*/

:root	/* This lets us use variables to style easily across the project. It takes the format of var(--example) to replace anything we use a lot eg "var(--grellow)" can be used instead of #D7DF23) */
{
	/* Colours */
	--grellow: #D7DF23;
	--housePurple: #582D87;
	--contrastPurple: #C7B7D5;
	--houseBlue: #09A9E0;
	--linkBlue: #076685;
	--bgGrey: #f6f6f6;
}

h1,
h2,
h3,
h4,
ul.sidenav ul > li > a,
ul.sidenav li a.selected
{
	color: #222222;
}

p
{
	color: #404040;
}

table p
{
	color: #000000;
}

.sidenav-wrapper
{
	border-right: none;
	box-shadow: 0px 1px 4px 0px #cccccc;
}

.body-container
{
	
}

select
{
	border: 1px solid #076685;
	background-size: 10px;
}

#doc-version
{
	margin-bottom: 0px;
	border-radius: 4px;
	margin: 16px auto 7px;
	width: 350px;
}

.panels
{
	display: inline-flex;
	/*padding-top: 24px;
	border-top: 1px solid lightgray;
	margin-top: 16px;*/
	width: 100%;
	justify-content: space-between;
}

.panels > div
{
	max-width: 50%;
}

#productInfo > h4
{
	margin-top: 0px;
}

h4
{
	margin-top: 0px;
	text-transform: unset;
}

#rightPanels
{
	padding-left: 10px;
	margin-top: 10px;
}

#webhelpPanel,
#webhelpPanelSingle
{
	text-align: center;
	background-color: #e5dded;
	border: solid 1px #582D87;
	border-radius: 4px;
	box-shadow: 0px 1px 4px 0px #cccccc;
	display: flex;
}

#webhelpText
{
	font-size: 18px;
	color: black;
	margin: 0 18px;
	min-width: 300px;
	font-weight: bold;
}

#webhelpLink
{
	
}

#webhelpSelect
{
	width: 100%;
}

/*#webhelpPanel::before
{
	content: "Webhelp: Select a version to start ";
    font-size: 18px;
	font-weight: bold;
    vertical-align: middle;
}*/

#webhelpPanelSingle
{
	text-align: center;
	height: 61.2px;
}

#webhelpPanelSingle > p
{
	padding: 18px;
	width: 100%;
}

#doc-version
{
	margin: 16px 18px;
	font-size: 16px;
	width: 90%;
}

h1
{
	margin-bottom: 16px;
	display: flex;
	justify-content: space-between;
}

.productLink
{
	font-size: 15px;
	margin-top: 28.6px;
	margin-bottom: 0px;
}

.productLink::after
{
	content: url(../Images/General/Open_New_Icon_15.png);
	padding-left: 5px;
	vertical-align: middle;
	margin-bottom: 0px;
}

.videoPanel
{
	text-align: center;
	max-width: 560px;
	min-width: 300px;
	/*width: 45%;*/
	margin: 10px auto 10px 0px;
	padding: 5px;
	vertical-align: top;
	background-color: #ffffff;
	box-shadow: 0px 1px 4px 0px #cccccc;
	border-radius: 10px;
}

.videoPanel p
{
	text-transform: uppercase;
	font-weight: bold;
	margin: 10px auto;
}

.videoPanel .mc-wrapper .mc-controls-direction a
{
	top: 110%;
	background-position: center;
}

.mc-wrapper .mc-next
{
	background-image: url(../Images/General/expand_less_48.png);
	rotate: 90deg;
}

.mc-wrapper .mc-prev
{
	background-image: url(../Images/General/expand_more_48.png);
	rotate: 90deg;
}

.mc-pager.mc-default-pager
{
	top: 100%;
}

#productInfo
{
	/*margin: 10px auto;*/
}

.body-container > div:nth-child(1)
{
	padding-right: 0px;
}

div.MCBreadcrumbsBox_0
{
	margin-left: 3px;
	top: 62px;
}

.body-container
{
	padding-left: 0;
}

/*// FOOTER STYLING //*/

.margin
{
	min-width: 15%;
}

footer	/*Removes styling that doesn't work on the Home Page*/
{
	width: 70%;
	min-width: 70px;
	max-width: 1100px;
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 80px;
	padding-top: 0px;
	text-align: center;
	background-color: white;
	margin: auto;
}

#footerBG
{
	position: absolute;
	bottom: 0;
	height: 60px;
	width: 100%;
	background-color: #f6f6f6;
	z-index: -1;
	border-top: 1px solid lightgray;
}

#footer
{
	position: absolute;
	width: 70%;
	min-width: 500px;
	max-width: 1100px;
	margin: 0px auto 0px;
	height: 60px;
	display: flex;
	justify-content: space-between;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	bottom: 0px;
	align-items: center;
}

.footerLeft
{
	margin: auto;
}

.footerSocial
{
	width: 33%;
	text-align: right;
}

.landingLinks
{
	width: 33%;
}

.footerLegal
{
	width: 33%;
	margin: 0px 0px;
}

.footerLegal > p
{
	margin: 0px 0px;
	color: #666666;
	font-size: 15px;
	text-align: left;
}

.landingLinks > p
{
	margin: 0;
	text-align: center;
	font-size: 15px;
}

.footerLinks p
{
	margin-bottom: 0px;
}

#footer > div
{
	margin: 5px 0 0;
}

.footerSocial img
{
	width: 19px;
	margin-top: 1px;
}

.footerSocial > a
{
	margin: 0px 16px;
}

.footerSocial > a:last-of-type
{
	margin-right: 0px;
}

.landingRight
{
	float: right;
	margin: auto;
}

.landingLinks > p > a
{
	text-decoration: none;
	font-weight: bold;
	color: #404040;
	margin: 0px;
	letter-spacing: 2px;
}

.footerPadding	/* This keeps the footer from overlapping/being overlapped by other elements in the body/proxies */
{
	height: 60px;
}

/*// END OF FOOTER STYLING //*/

@media screen and (max-width: 599px)
{
	#mc-main-content
	{
		width: 98%;
	}

	.panels
	{
		flex-direction: column;
		max-width: 100%;
	}

	#rightPanels
	{
		padding: 0px;
	}

	.slideshow
	{
		padding: 0px;
	}

	.footerPadding
	{
		height: 60px;
	}
}