/*<meta />*/

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

:root
{
	--hyperlinkcolor: #2d82dc;
	--hyperlinkDMcolor: #8ab4f8;
	--topmenuunderlinecolor: rgb(153,51,153);
	--mobilebackgroundDMcolor: #202124;
}

div.title-bar-layout.outer-row
{
	height: 75px;
	position: relative;
	/* Enables Search Bar Wrapper to be positioned within this element */
}

/* Replace logo image with high-resolution png */

.title-bar-layout a.logo
{
	background-image: url('../Images/_Logos/Media-Cybernetics-Logo-Primary-525x211-1.png');
	background-size: 100% 100%;
}

/* Hide logo in header bar when displayed as In-App Help */

.App-Help .logo-wrapper
{
	display: none;
}

/* Fix to prevent border around Submit button from obscuring gray :focus-visible outline around Search Bar */

.search-bar .search-submit
{
	border: none;
}

.search-bar.search-bar-container .search-submit
{
	background-image: url('../Images/_Icons/search-sharp.svg');
	/* Add grey icon to Search submit button */
	background-size: 50%;
}

.search-bar.search-bar-container .search-submit:hover
{
	background-image: url('../Images/_Icons/search-sharp-hover.svg');
	/* Add grey icon to Search submit button */
	background-size: 50%;
}

#topic-body
{
	padding-left: 36px;
	padding-left: calc(1em + 20px);
	padding-right: 1em;
	padding-bottom: 40px;
}

@media only screen and (max-width: 1279px)
{
	#topic-body
	{
		padding-left: 1em;
	}
}

@media only screen and (max-width: 767px)
{
	#topic-body
	{
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
}

/* Remove default padding-bottom of 40px from topic container (that includes footer).  This padding-bottom is added to #topic-body */

.height-container-sidenav
{
	padding-bottom: 0;
}

div#version-links
{
	text-align: right;
}

/* Hide links to previous versions when displayed as In-App Help */

.App-Help #version-links
{
	display: none;
}

MadCap|breadcrumbsProxy
{
	border-bottom: none;
	font-size: 0.9em;
	font-style: normal;
	mc-breadcrumbs-prefix: ' > ';
}

/* Add space either side of breadcrumb divider */

span.MCBreadcrumbsPrefix,
span.MCBreadcrumbsDivider
{
	padding-left: 0.5em;
	padding-right: 0.5em;
}

/* Remove default padding of 1em so that any potential footer can span entire width of topic pane */

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

.body-container a.MCBreadcrumbsLink,
.breadcrumbs span:first-child a
{
	/*	font-style: italic !important; */
	text-decoration: none;
	/*	color: var(--hyperlinkcolor); */
	/*	color: #2967c4; */
}

.body-container a.MCBreadcrumbsLink:visited,
.breadcrumbs span:first-child a:visited
{
	/*	color: var(--hyperlinkcolor); */
	color: #2967c4 !important;
	/* Override standard visited color for breadcrumb */
}

.body-container a.MCBreadcrumbsLink:hover,
.breadcrumbs span:first-child a:hover
{
	/*	color: var(--linkhovercolor); */
	/*	color: #993399; */
	text-decoration: underline;
}

/* Hybrid Navigation */
/* Add gray border (that extends to bottom of viewport) to separate navigation menu from content */

.sidenav-wrapper
{
	border-right: solid 1px lightgray;
}

/* ul.navigation.show */

ul.navigation
{
	display: block;
}

ul.menu.sidenav > li
{
	display: none;
}

ul.menu.sidenav > li.selected
{
	display: block;
}

ul.navigation.show > li > a.selected,
ul.navigation.show > li > a.selected:link,
ul.navigation.show > li > a.selected:visited
{
	/*	border-bottom: solid 4px var(--topmenuunderlinecolor); */
	/* border-bottom: solid 2px rgb(153,51,153); */
	color: #2967c4;
}

/* ul.menu.sidenav > li.selected > a	/* Remove normal link properties from top-level item
{
	cursor: default;
	pointer-events: none;
}
*/

/* Add hover effect to menu items in side navigation */

ul.menu.sidenav ul > li > a:hover
{
	text-decoration: underline;
}

/* Remove twistie from top-level item in side navigation */

ul.menu.sidenav > li.selected > a > span.submenu-toggle-container
{
	display: none;
}

/* Set properties for top-level item in side navigation */

ul.sidenav > .is-accordion-submenu-parent.selected > a
{
	padding-left: 40px;
	background-size: 30px auto;
	background-position: 2px center;
	background-repeat: no-repeat;
}

/* Remove indent from top-level item in side navigation */

ul.menu.sidenav > li:nth-child(1) > a
{
	background-image: url('../Images/_Icons/Home-page-tiles/GetStarted.svg');
}

ul.menu.sidenav > li:nth-child(2) > a
{
	background-image: url('../Images/_Icons/Home-page-tiles/Tasks - purple.svg');
}

ul.menu.sidenav > li:nth-child(3) > a
{
	background-image: url('../Images/_Icons/Home-page-tiles/Tools and Menus - purple.svg');
}

/* Add gray background to currently selected section of the left-hand navigation menu */

.currsection,
.sidenav-wrapper ul ul.is-accordion-submenu.currsection
{
	background-color: #f2f2f2;
}

/* Position twistie icon on left-hand side of text label (indented by 20px) */

ul.menu.sidenav .is-accordion-submenu-parent > a span.submenu-toggle-container
{
	right: auto;
	left: 30px;
}

ul.menu.sidenav .is-accordion-submenu-parent > a span.submenu-toggle
{
	top: 1em;
}

ul.menu.sidenav ul.sidenav li.is-accordion-submenu-parent > a span.submenu-toggle
{
	border-top-color: transparent;
	border-left-color: #993399;
}

/* .is-accordion-submenu-parent > a span.submenu-toggle
{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left-style: solid;
    border-bottom-width: 6px;
    border-right-width: 0;
    position: absolute;
	top: 1em;
} */

ul.menu.sidenav .is-accordion-submenu-parent > a span.submenu-toggle
{
	content: '';
	display: block;
	width: 6px;
	height: 1em;
	border: none;
	/* Remove twistie icon added using border property by skin */
	background-image: url('../Images/_Icons/arrow-right.svg');
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 1em;
}

ul.menu.sidenav .submenu-toggle-container[aria-expanded='true'] > span.submenu-toggle,
ul.menu.sidenav .is-accordion-submenu-parent > a[aria-expanded='true'] > .submenu-toggle-container > span.submenu-toggle
{
	-webkit-transform-origin: 40% 40%;
	-ms-transform-origin: 40% 40%;
	transform-origin: 40% 40%;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

/* Take logo out of document flow so that Topnav menus are centred on page */

div.logo-wrapper
{
	position: absolute;
	/* margin: 1em 1em; */
	margin: 0;
}

@media only screen and (max-width: 1279px)
{
	div.logo-wrapper
	{
		position: static;
		margin: initial;
	}
}

/* Restrict width of search bar to enable navigation menus to fill available space within header */

div.nav-search-wrapper
{
	max-width: 275px;
	position: absolute;
	/* Enables TopNav menus to be consistently centered on page */
	right: 0;
}

/* Hide hidden topics in Side and Slide-in navigation */

ul.menu.vertical.sidenav li.hidden,
ul.menu.vertical.off-canvas-list li.hidden
{
	display: none !important;
}

/* Hide hidden topics in Top navigation */

.navigation-wrapper > ul.navigation > li.hidden
{
	display: none !important;
}

/* END Hybrid Navigation */
/* --- Breadcrumb --- */
/* Hide div in which breadcrumb prefix is located before being moved into breadcrumb proxy */

div#breadcrumb-prefix
{
	display: none;
}

/* ---- Menu at end of Landing Page topics ----- */
/* Hide link to current topic in menu list */

ul.menu._Skins_LandingPageMenu > li.has-children > a
{
	display: none;
}

/* ---- END Menu at end of Landing Page topics ----- */
/* Dark Mode and Standard Mode buttons */

button.DM-button,
button.SM-button
{
	float: right;
}

.HomePage button.DM-button,
.HomePage button.SM-button
{
	margin-right: 1em;
	margin-top: 1em;
}

button.SM-button
{
	display: none;
}

@media only screen and (max-width: 1279px)
{
	div.title-bar-layout.outer-row
	{
		height: auto;
	}

	div.nav-search-wrapper
	{
		max-width: none;
	}

	.title-bar .menu-icon span
	{
		background-image: url('../Images/_Icons/menu-blue.svg');
	}
}

@media only screen and (max-width: 767px)
{
	nav.title-bar
	{
		height: 70px;
	}

	.nav-search-wrapper
	{
		width: 100%;
		top: 0;
	}

	.nav-search
	{
		width: calc(100% - 60px);
	}

	.App-Help .nav-search
	{
		margin-left: 0;
	}

	/* Remove logo for Mobile medium */

	.title-bar-layout .logo-wrapper
	{
		display: none;
	}
}