.secondary-btn 
{
	align-items: center;
	padding: 12px 0;
	background: var(--secondary-btn-color);
	border-radius: 80px;
	font-size: var(--base-sm-font-size);
	line-height: 16px;
	color: var(--primary);
	border: 1px solid var(--secondary-btn-color-border);
	cursor: pointer;
	white-space: nowrap;
	font-family: proxima-nova, helvetica, arial, sans-serif;
}

.secondary-btn:hover 
{
/*Had to use color code instead of variable because variable did not work in preview mode. TODO change it to appropriate variable after checking in the real browser*/
	background: #ffffff;
	border: 1px solid var(--secondary-btn-color-border-hover);
}

.primary-btn 
{
	align-items: center;
	padding: 12px 0;
	background: var(--primary-btn-color);
	border-radius: 80px;
	font-size: var(--base-sm-font-size);
	line-height: 16px;
	color: var(--primary-dark-bg);
	border: 0;
	cursor: pointer;
	white-space: nowrap;
	font-family: proxima-nova, helvetica, arial, sans-serif;
}

.primary-btn:hover 
{
	background: var(--primary-btn-color-hover);
}

.secondary-btn > a:link, .secondary-btn > a
{
/*Had to use color code instead of variable because variable did not work in preview mode. TODO change it to appropriate variable after checking in the real browser*/
	color: #484848!important; 
	    padding: 12px 16px;
}

.primary-btn > a:link, .primary-btn > a
{
	color: var(--primary-dark-bg)!important; 
	    padding: 12px 16px;
}
.primary-btn:hover > a:link, .primary-btn > a:link:hover, .primary-btn:hover > a, .primary-btn > a:hover 
{
/*Had to use color code instead of variable because variable did not work in preview mode. TODO change it to appropriate variable after checking in the real browser*/
	color: var(--primary-dark-bg)!important;
	text-decoration: none!important;
}
.secondary-btn:hover > a:link, .secondary-btn > a:link:hover, .secondary-btn:hover > a, .secondary-btn > a:hover 
{
/*Had to use color code instead of variable because variable did not work in preview mode. TODO change it to appropriate variable after checking in the real browser*/
	color: #027baf!important;
	text-decoration: none!important;
}

.article-header__top-nav .print-btn 
{
    position: absolute;
    top: 40px;
    right: 16px;
}

.print-btn img
{
	margin-right: -6px;
	margin-bottom: -3px;
	margin-left: 16px;
}

/* dropdown */

.resources__action-btn .MCDropDown, .callout__action-btn .MCDropDown {
    width: max-content!important;
	position: relative!important;
	border-radius: 4px!important;
    padding: 12px 0!important;
	font-family: proxima-nova, helvetica, arial, sans-serif;
}
.resources__action-btn .MCDropDown_Closed, .callout__action-btn .MCDropDown_Closed {
	background: var(--secondary-btn-color)!important;
    border: 1px solid var(--secondary-btn-color-border)!important;
}

.resources__action-btn .MCDropDown_Open, .callout__action-btn .MCDropDown_Open {
    background: #ffffff!important;
    border: 1px solid var(--secondary-btn-color-border-hover)!important;
}

.resources__action-btn .MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage, 
.resources__action-btn .MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage, 
.callout__action-btn .MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage, 
.callout__action-btn .MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage
{
	background-image: none!important;
	padding: 12px 16px!important;
	color: var(--primary)!important;
}

.accordion-group__wrapper .resources__action-btn .MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage, 
.accordion-group__wrapper .resources__action-btn .MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage, 
.accordion-group__wrapper .callout__action-btn .MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage, 
.accordion-group__wrapper .callout__action-btn .MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage {
	border-bottom: 0!important;
    font-weight: normal!important;
    margin: 0!important;
}

.accordion-group__wrapper .resources__action-btn .MCDropDown_Closed:hover .MCDropDownHotSpot_.MCHotSpotImage, 
.accordion-group__wrapper .callout__action-btn .MCDropDown_Closed:hover .MCDropDownHotSpot_.MCHotSpotImage,
.accordion-group__wrapper .resources__action-btn .MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage, 
.accordion-group__wrapper .callout__action-btn .MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage {
	background-color: #ffffff!important;
}

.accordion-group__wrapper .resources__action-btn .dropDownBody, 
.accordion-group__wrapper .callout__action-btn .dropDownBody {
	padding-left: 0!important;
    padding-right: 0!important;
}

.accordion-group__wrapper .resources__action-btn .dropDownHead, 
.accordion-group__wrapper .callout__action-btn .dropDownHead {
	margin-top: -12px;
    margin-bottom: -12px;
}


.resources__action-btn .dropDownHotspot:link, .callout__action-btn .dropDownHotspot:link
{
	align-items: center!important;	
	font-size: var(--base-sm-font-size)!important;
	font-weight: normal!important;
	line-height: 16px!important;
	color: var(--primary)!important;	
	cursor: pointer!important;
	font-family: proxima-nova, helvetica, arial, sans-serif;
}
.resources__action-btn .dropDownHotspot:link img, .callout__action-btn .dropDownHotspot:link img
{
	margin-left: 8px;
	vertical-align: middle;
}

.resources__action-btn .MCDropDown_Image_Icon,
.callout__action-btn .MCDropDown_Image_Icon
{
	display: none!important;
}

.resources__action-btn .MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage img,
.callout__action-btn .MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage img
{
	transform: rotate(-180deg);
}
.resources__action-btn .MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage, 
.callout__action-btn .MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage
{
	/*Had to use color code instead of variable because variable did not work in preview mode. TODO change it to appropriate variable after checking in the real browser*/
	color: #027baf!important;
	text-decoration: none!important;
	font-family: proxima-nova, helvetica, arial, sans-serif;
}

.resources__action-btn .MCDropDown_Closed:hover .MCDropDownHotSpot_.MCHotSpotImage, 
.callout__action-btn .MCDropDown_Closed:hover .MCDropDownHotSpot_.MCHotSpotImage
{
	/*Had to use color code instead of variable because variable did not work in preview mode. TODO change it to appropriate variable after checking in the real browser*/
	color: #027baf!important;
	text-decoration: none!important;
}

.resources__action-btn .MCDropDown_Closed:hover, .callout__action-btn .MCDropDown_Closed:hover {
	background: #ffffff!important;
    border: 1px solid var(--secondary-btn-color-border-hover)!important;
}

.resources__action-btn .dropDownHead, .callout__action-btn .dropDownHead {
    border-bottom: 0!important;
    width: max-content!important;
	line-height: 16px!important;
	font-family: proxima-nova, helvetica, arial, sans-serif;
}

.resources__action-btn .dropDownBody, .callout__action-btn .dropDownBody{
    padding-top: 0!important;
    padding-bottom: 0!important;
    width: max-content!important;
    position: absolute!important;
    top: 45.33px!important;
    right: 0!important;
	border: 1px solid #E1E1E1;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	background-color: #ffffff;
	font-family: proxima-nova, helvetica, arial, sans-serif;
	max-width: 200px;
	z-index:1;
}
.dropdown-option__wrapper {
	margin-top: 12px!important;
    margin-bottom: 12px!important;
}
.resources__action-btn .dropDownBody .dropdown-option, .callout__action-btn .dropDownBody .dropdown-option
{
	padding: 12px 17px!important;
	font-family: proxima-nova, helvetica, arial, sans-serif;
	font-size: var(--base-sm-font-size)!important;
	line-height: 16px!important;
	color: #484848!important;
	text-decoration: none;
	display: block;
}

.resources__action-btn .dropDownBody .dropdown-option:hover, .callout__action-btn .dropDownBody .dropdown-option:hover {
	text-decoration: underline!important;
	color: #484848!important;
	background: #fafafa;
}


/* resources action button position */

.resources__action-btn, .callout__action-btn
{
	margin-left: auto;
}

/* topic toolbar  Expand all/Collaps all*/

._Skins_Topic_Toolbar.mc-component .button.expand-all-button, ._Skins_Topic_Toolbar.mc-component .button.collapse-all-button {
	background: transparent;
    border: 0;
	white-space: nowrap;
	margin-bottom: -24px;
	overflow: visible;
}

._Skins_Topic_Toolbar.mc-component .button.expand-all-button .button-icon-wrapper {
    display: none;
    width: 0!important;
}

._Skins_Topic_Toolbar.mc-component .button.expand-all-button:before {
	content: "";
	font-size: var(--base-font-size)!important;
	font-weight: normal!important;
	line-height: 24px;
	color: #027baf!important;	
	font-family: proxima-nova, helvetica, arial, sans-serif;
}

html[lang="en-us"] ._Skins_Topic_Toolbar.mc-component .button.expand-all-button:before,
html[lang="en-gb"] ._Skins_Topic_Toolbar.mc-component .button.expand-all-button:before,
html[lang="en-ca"] ._Skins_Topic_Toolbar.mc-component .button.expand-all-button:before
 {
	content: "Expand all sections"!important;
	margin-left: -133px;
}


html[lang="fr-ca"] ._Skins_Topic_Toolbar.mc-component .button.expand-all-button:before {
	content: "Agrandir toutes les sections"!important;
	margin-left: -190px;
}


._Skins_Topic_Toolbar.mc-component .button.collapse-all-button:hover:before, 
._Skins_Topic_Toolbar.mc-component .button.expand-all-button:hover:before {
	text-decoration: underline;
}

._Skins_Topic_Toolbar.mc-component .button.collapse-all-button:before {
	content: "";
	font-size: var(--base-font-size)!important;
	font-weight: normal!important;
	line-height: 24px;
	color: #027baf!important;	
	font-family: proxima-nova, helvetica, arial, sans-serif;
}

html[lang="en-us"] ._Skins_Topic_Toolbar.mc-component .button.collapse-all-button:before,
html[lang="en-gb"] ._Skins_Topic_Toolbar.mc-component .button.collapse-all-button:before,
html[lang="en-ca"] ._Skins_Topic_Toolbar.mc-component .button.collapse-all-button:before
 {
	content: "Hide all sections"!important;
	margin-left: -108px;
}


html[lang="fr-ca"] ._Skins_Topic_Toolbar.mc-component .button.collapse-all-button:before {
	content: "Masquer toutes les sections"!important;
	margin-left: -192px;
}

.buttons._Skins_Topic_Toolbar.mc-component .button-group-container-left {
	float: right!important;
}

@media screen and (max-width: 1024px) {
	.print-btn {
		display: none;
	}
}

@media screen and (max-width: 550px) {

	.resources__action-btn, .callout__action-btn {
      margin-top: 16px!important;
    }
	
	.callout__action-btn {
		display: block;
	    margin-left: 0;
	}
}