/*<meta />*/

/* Stylesheet to handle content switching between different options. This stylesheet is attached to the HTML template page.
It has no effect on PDF. The option switching logic is defined in Content\Resources\Scripts\optionSelection.js.*/

div#OptionSelectFormContainer
{
	position: relative;
	display: none;
	float: right;
	margin-left: 20px;
	width: auto;
	margin-top: .85rem;
	mc-hidden: hidden;
}

div#OptionSelectFormContainer + div#mc-main-content + h1
{
	clear: left;
	mc-hidden: hidden;
}

#OptionToggleButton
{
	margin-right: 0;
	margin-left: auto;
	font-family: 'Calibre Medium', Calibri, Arial, sans-serif;
	font-size: 1rem;
	padding: 7px 12px;
	background-color: #ffffff;
	color: #0071d9;
	border: none;
	cursor: pointer;
	border-radius: 2px;
	border: 1px solid #0071d9;
	padding-right: 24px;
	background-image: url('../Icons/menu-leaf-closed-blue.svg');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 20px;
	mc-hidden: hidden;
}

#OptionToggleButton:hover
{
	background-color: #0071d9;
	background-image: url('../Icons/menu-leaf-closed-light.svg');
	color: #ffffff;
	mc-hidden: hidden;
}

#OptionToggleButton.option-btn-active
{
	background-color: #0071d9;
	background-image: url('../Icons/menu-leaf-open-light.svg');
	color: #ffffff;
	mc-hidden: hidden;
}

#OptionDropdown
{
	position: absolute;
	top: 100%;
	margin-top: 2px;
	right: 0;
	left: auto;
	background: #ffffff;
	border: 1px solid #0071d9;
	padding: 10px;
	z-index: 10;
	display: none;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	mc-hidden: hidden;
}

#OptionDropdown *
{
	font-family: 'Calibre Medium', Calibri, Arial, sans-serif;
	font-size: var(--FontSizeSmaller);
	mc-hidden: hidden;
}

form#OptionSelectForm label
{
	display: block;
	width: 100%;
	white-space: nowrap;
	width: 100%;
	padding: 2px 4px;
	mc-hidden: hidden;
}

form#OptionSelectForm label:hover
{
	cursor: pointer;
	color: #ffffff;
	background-color: #0071d9;
	mc-hidden: hidden;
}

@media only screen and (max-width: 1279px)
{
	div#OptionSelectFormContainer
	{
		margin-top: 0;
		mc-hidden: hidden;
	}
}

@media only screen and (max-width: 767px)
{
	div#OptionSelectFormContainer
	{
		float: none;
		margin-left: 60px;
		margin-top: 1rem;
		mc-hidden: hidden;
	}

	div#OptionSelectFormContainer + div#mc-main-content + h1
	{
		clear: both;
		mc-hidden: hidden;
	}

	#OptionDropdown
	{
		right: auto;
		left: 0;
		mc-hidden: hidden;
	}
}

@media print
{
	div#OptionSelectFormContainer
	{
		display: none !important;
		mc-hidden: hidden;
	}
}