/*<meta />*/

/* FLEXBOX */
/* Outer container for MiniTOC proxy. Fhe flexbox structure is defined for the miniTOC container generated by Flare inside this div. Hence this div is used only for descendant selection and has no attributes of its own. In other words, the MiniTOC proxy uses a Flexbox layout ONLY if it is inside this div.*/

div.FlexMiniTocProxy,
div.FlexManualTiles
{
	margin: 10px auto;
	width: auto;
	mc-hidden: hidden;
}

div.FlexMiniTocProxy div.MCMiniTocBox_0::before
{
	content: '';
	display: none;
}

/* This element finds the miniTOC container that is generated in the Flare output (div.miniToc). It then defines the overall flex layout used for content within that container.  */

div.FlexMiniTocProxy > div.miniToc,
div.FlexManualTiles
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	padding: 0;
	margin: 0px auto;
	border: none;
	mc-hidden: hidden;
}

/* Style the miniToc text that appears in the Flex layout. */

div.FlexMiniTocProxy > div.miniToc > p.MiniTOC1_0,
div.FlexManualTiles > p
{
	display: flex;
	flex: 1 1 auto;
	max-width: 250px;
	min-width: 225px;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 1px 4px rgba(4.7, 4.7, 5.1, 0.1);
	margin: 1%;
	padding: 0;
	color: var(--BlackSoft);
	font-family: var(--FontHeading);
	font-style: normal;
	font-size: 14px;
	line-height: 150%;
	text-align: center;
	background-color: var(--White);
	border: 0px solid var(--GrayLight);
	border-radius: 8px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	mc-hidden: hidden;
}

/* Because the Flexbox layout works best with only one level, the following can be uncommented to hide any of the levels 2 through 6. */

div.FlexMiniTocProxy > div.miniToc > p[class*="MiniTOC2"],
div.FlexMiniTocProxy > div.miniToc > p[class*="MiniTOC3"],
div.FlexMiniTocProxy > div.miniToc > p[class*="MiniTOC4"],
div.FlexMiniTocProxy > div.miniToc > p[class*="MiniTOC5"],
div.FlexMiniTocProxy > div.miniToc > p[class*="MiniTOC6"]
{
	display: none;
}

/* Each miniTOC paragraph is also a flex container for its embedded anchor link. This ensures that the link text is centered within the
paragraph vertically if the browser increases the height of the paragraph tile. This may happen because the miniToc has "align-items: stretch;" set. In this case, if a short paragraph is side-by-side with a longer paragraph, the browser stretches the shorter paragraph to be the same height as the longer paragraph. This throws off the link position. */

/* Determine how the link is structured within its paragraph, which is a flex container. The flex-basis makes the link extend the width of the
paragraph. The top/bottom padding (30px) adds vertical height to the link and hence to the tile itself. */

div.FlexMiniTocProxy > div.miniToc > p > a,
div.FlexMiniTocProxy > div.miniToc > p > a span:nth-child(1),
div.FlexManualTiles > p > a,
div.FlexManualTiles > p > a span:nth-child(1)
{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: space-between;
	flex-basis: 100%;
	padding: 10px 15px;
	font-family: var(--FontHeading);
	font-style: normal;
	font-size: 14px;
	line-height: 150%;
	text-align: center;
	display: block;
	mc-hidden: hidden;
}

div.FlexMiniTocProxy > div.miniToc > p > a,
div.FlexManualTiles > p > a
{
	height: 100%;
}

/* Description span added by miniTocTileDescription.js */

div.FlexMiniTocProxy > div.miniToc > p > a span:nth-child(2),
div.FlexManualTiles > p > a span:nth-child(2)
{
	flex: 0 0 auto;
	min-width: 100%;
	display: block;
	margin-top: 8px;
	font-family: var(--FontText);
	font-style: normal;
	font-size: 12px;
	text-align: left;
	mc-hidden: hidden;
}

/* Style the paragraph links. */

div.FlexMiniTocProxy > div > p a:link,
div.FlexMiniTocProxy > div > p a:visited,
div.FlexManualTiles > p a:link,
div.FlexManualTiles > p a:visited
{
	color: var(--BlackSoft);
	text-decoration: none;
	mc-hidden: hidden;
}

/* Set hover/active styles for the paragraph links. */

div.FlexMiniTocProxy > div p a:active,
div.FlexMiniTocProxy > div p a:hover,
div.FlexManualTiles > p a:active,
div.FlexManualTiles > p a:hover
{
	color: var(--BlackSoft);
	background-color: transparent;
	text-decoration: none;
	mc-hidden: hidden;
}

/* Change the miniToc paragraph's border on a hover so it doesn't stand out. */

div.FlexMiniTocProxy > div p:hover,
div.FlexManualTiles > p:hover
{
	background-color: var(--BrandLight);
	mc-hidden: hidden;
}

/* Handle the case where the link doesn't extend the full vertical height of the tile because it is next to a tile with more lines of vertical content. This makes the link text change color on any hover over the containing div. Link won't work, however, except on a hover over the actual anchor.*/

div.FlexMiniTocProxy > div p:hover > a:link,
div.FlexMiniTocProxy > div p:hover > a:visited,
div.FlexManualTiles > p:hover > a:link,
div.FlexManualTiles > p:hover > a:visited
{
	background-color: var(--BrandLight);
	mc-hidden: hidden;
}

/* Side menu that provides the links to the top-level topics */
/* Side menu */

div.SubtopicTiles
{
	margin-top: 32px;
}

div.SubtopicTiles ul.menu._Skins_Side_Menu
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	padding: 0;
	margin: 10px auto 0px auto;
	border: none;
	mc-hidden: hidden;
}

/* Style the miniToc text that appears in the Flex layout. */

div.SubtopicTiles ul.menu._Skins_Side_Menu li
{
	flex: 1 1 auto;
	margin: 0 1%;
	padding: 0;
}

div.SubtopicTiles ul.menu._Skins_Side_Menu li,
div.SubtopicTiles ul.menu._Skins_Side_Menu li a:link,
div.SubtopicTiles ul.menu._Skins_Side_Menu li a:visited
{
	border: none;
	color: var(--BlackSoft);
	text-decoration: none;
	font-family: var(--FontHeading);
	font-weight: normal;
	font-size: 14px;
	line-height: var(--LineHeightSmaller);
	border-left: none;
	text-align: center;
	padding-bottom: 4px;
	mc-hidden: hidden;
}

div.SubtopicTiles ul.menu._Skins_Side_Menu li a:active,
div.SubtopicTiles ul.menu._Skins_Side_Menu li a:hover
{
	color: var(--BrandDark);
	mc-hidden: hidden;
}

div.SubtopicTiles ul.menu._Skins_Side_Menu li a.selected
{
	border-bottom: 3px solid var(--BrandDark);
	text-decoration: none;
	color: var(--BrandDark);
	mc-hidden: hidden;
}

@media only screen and (max-width: 1279px)
{
	/* Shift to centered tiles in tablet mode. */

	div.FlexMiniTocProxy > div.miniToc
	{
		justify-content: center;
	}
}

@media only screen and (max-width: 767px)
{
	
}

@media edit
{
	div.FlexMiniTocProxy,
	div.FlexManualTiles
	{
		display: block;
		border: 2px dashed purple;
		padding: 6px;
	}

	div.FlexMiniTocProxy::before,
	div.FlexManualTiles::before
	{
		text-align: center;
		font-family: var(--FontHeading);
		font-size: 1rem;
		font-weight: bold;
		display: block;
		margin-bottom: 8px;
		content: '<-- Div to style a MiniTOC proxy using Flexbox -->';
		color: purple;
	}

	div.FlexManualTiles::before
	{
		content: '<-- Div to style cross-references using Flexbox -->';
	}
}