﻿body {
	font-family: Roobert, sans-serif;
	font-weight: normal;
	font-size: 16px;
	color: var(--hl-dark-green);
	line-height: var(--text-line-height);
}

h1, h2, h3, h4, h5, h6, p, li, a { 
	font-family: Roobert, sans-serif;
	color: var(--hl-dark-green);
}

p, li, a { 
	line-height: var(--text-line-height);
}

h1, h2, h3, h4, h5, h6 { 
	font-weight: bold;
}

div.page-intro + div.page-copy { 
	margin-top: 30px;
	margin-bottom: 20px;
}

div.page-intro { 
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}


.slick-arrow {
	width: 40px;
	height: 40px;
	border-width: 1px;
	border-style: solid;
	background-color: transparent;
	border-color: var(--hl-dark-green);
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
	background-repeat: no-repeat;
	background-size: 50%;
	background-position: center;
	font-size: 0;
	transition: all 0.2s;
}

.slick-arrow.slick-prev { 
	transform: rotate(180deg);
}

.slick-arrow:hover { 
	background-color: var(--hl-light-green);
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
}

div.section-title { 
	font-size: 39px;
	font-weight: 300;
	color: var(--hl-dark-green);
}

div.section-title > p {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

div.section-title > :last-child { 
	margin-bottom: 0.75em;
}

a.btn-tpp-link { 
	border-color: var(--hl-dark-green);
	background-color: var(--hl-dark-green);
	color: #ffffff;
	font-size: 15px;
}

div.standard-page-content > :last-child { 
	margin-bottom: 0;
}

/*a.btn-tpp-link.light-green { 
	border-color: var(--hl-light-green);
	background-color: var(--hl-light-green);
	color: var(--hl-dark-green);
}*/

a.btn-tpp-link.light-green:after { 
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
}

div.tt-page-panel-popup div.page-link { 
	margin-top: 20px;
}

div.popup-modal.tt-page-panel-popup div.header { 
	padding: 20px 0 10px 0;
}

div.popup-modal.tt-page-panel-popup .title { 
	padding-right: 30px;
	margin-bottom: 20px;
}

div.popup-modal.tt-page-panel-popup .title > :last-child {
	margin-bottom: 0;
}


div.popup-modal.tt-page-panel-popup .tag .type .icon { 
	background-color: var(--hl-dark-green);
	background-size: auto 26px;
}

a.btn-tpp-link:after {
	content: "";
	width: 16px;
	height: 16px;
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transform: rotate(-45deg);
}

a.btn-tpp-link:hover { 
	background-color: #ffffff;
	color: var(--hl-dark-green);
}

a.btn-tpp-link:hover:after { 
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
	transform: rotate(0);
}

/*
	Where a panel is embedded within another panel (for example a TextBlock within an Accordion),
	the .wrapper and .col-1 elements need to reset since they are set in relation to page level
	output.
*/

div.template-page-panel[data-template-level]:not([data-template-level='1']) > * > .wrapper { 
	max-width: unset;
	margin: unset;
}

div.template-page-panel[data-template-level]:not([data-template-level='1']) > * > .wrapper > .col-1 {
	padding: 0;
}

div.template-page-panel[data-template-panel='Breadcrumbs'] + div.template-page-panel[data-template-panel='ActionBar'] section.standard-toolbar {
	padding-top: 0;
}

/*div.template-page-panel[data-template-panel='ActionBar'] section.standard-toolbar {
	padding-bottom: 0;
}*/

/*** Quote Panel ***/
div.quote-panel {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--hl-dark-green);
	color: #ffffff;
	padding: 25px;
	font-weight: 500;
	font-size: 17px;
}

div.quote-panel div.quote-mark {
	width: 60px;
	height: 60px;
	background-image: url("/_assets/icon-quote-arial-hl-light-green.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 20px;
}

div.quote-panel p {
	font: inherit;
	color: inherit;
}

div.quote-panel > :last-child {
	margin-bottom: 0;
}

/*** Quote Themes ***/

div.quote-panel.tpp-theme-light-green {
	background-color: var(--hl-light-green);
	color: var(--hl-dark-green);
}

div.quote-panel.tpp-theme-multi-gradient {
	background-image: url("/template-tool/_assets/bg-multi-gradient.jpg");
	color: var(--hl-dark-green);
}

div.quote-panel.tpp-theme-light-green div.quote-mark,
div.quote-panel.tpp-theme-multi-gradient div.quote-mark {
	background-image: url("/_assets/icon-quote-arial-hl-dark-green.png");
}

/*** Themes ***/

div.template-page-panel section.tpp-theme-white {
	background-color: #ffffff;
}

div.template-page-panel section.tpp-theme-dark-green { 
	background-color: var(--hl-dark-green);
}

div.template-page-panel section.tpp-theme-light-green {
	background-color: var(--hl-light-green);
}

div.template-page-panel section.tpp-theme-taupe {
	background-color: var(--hl-taupe);
}

div.template-page-panel section.tpp-theme-light-taupe { 
	background-color: var(--hl-light-taupe);
}

div.template-page-panel section { 
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

div.template-page-panel section.tpp-theme-light-green-teal-gradient { 
	background-image: url("/template-tool/_assets/bg-light-green-teal-gradient.jpg");
}

div.template-page-panel section.tpp-theme-multi-gradient { 
	background-image: url("/template-tool/_assets/bg-multi-gradient.jpg");
}

div.template-page-panel section.tpp-theme-light-green-teal-gradient {
	background-image: url("/template-tool/_assets/bg-light-green-teal-gradient.jpg");
}

div.template-page-panel section.tpp-theme-purple-teal-gradient {
	background-image: url("/template-tool/_assets/bg-purple-teal-gradient.jpg");
}

div.template-page-panel section.tpp-theme-light-green-purple-gradient {
	background-image: url("/template-tool/_assets/bg-light-green-purple-gradient.jpg");
}

div.template-page-panel section.tpp-theme-teal-purple-gradient {
	background-image: url("/template-tool/_assets/bg-teal-purple-gradient.jpg");
}

div.template-page-panel section.tpp-theme-teal-light-green-gradient {
	background-image: url("/template-tool/_assets/bg-teal-light-green-gradient.jpg");
}

div.template-page-panel section.tpp-theme-purple-light-green-gradient {
	background-image: url("/template-tool/_assets/bg-purple-light-green-gradient.jpg");
}

img.flag { 
	box-shadow: 0 0 1px 1px #666666;
	border-radius: 50%;
}


/*** Core Teams Page ***/

/*section.core-teams-list {
	padding: 0;
}*/

section.core-teams-list .core-team {
	margin-top: 30px;
	border-top: 1px solid var(--hl-dark-green);
	padding-top: 30px;
}

section.core-teams-list .core-team-title {
	font-size: 24px;
	font-weight: 500;
}

section.core-teams-list .btn-back-to-top {
	font-size: 14px;
	font-weight: 400;
	background-color: transparent;
	margin-top: 20px;
}

section.core-teams-list .btn-back-to-top:hover {
	text-decoration: underline;
}

/*** Jurisdiction Page **/

section.jurisdiction { 
	padding: 20px 0; 
}

section.jurisdiction div.section-title { 
	display: flex; flex-direction: row;
	gap: 20px;
	align-items: center;
	margin-bottom: 0;
}

section.jurisdiction div.section-title div.title { 
	margin: 0;
}

section.jurisdiction div.section-title div.title > :last-child { 
	margin: 0;
}

section.jurisdiction div.section-title div.flag { 
	height: 52px;
}

section.jurisdiction div.section-title img.flag {
	width: 52px;
	height: 52px;
}

/*** Topic Page ***/

/*section.topic + div.template-page-panel { 
	margin-top: 40px;
}*/

section.topic div.wrapper div.col-1 { 
	display: flex;
	flex-direction: row;
	gap: 80px;
	align-items: start;
}

section.topic div.wrapper div.col-1 .content { 
	width: 100%;
}

section.topic div.wrapper div.col-1 .side-panel {
	width: 300px;
	flex-shrink: 0;
}

section.topic div.intro-copy,
section.topic div.copy { 
	margin-top: 30px;
}

/*** My Alerts Popup ***/

div.my-alerts-popup ol.alert-frequency {
	margin-left: 15px;
}

div.my-alerts-popup ol.alert-frequency li,
div.my-alerts-popup ol.alert-frequency li > span {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	margin-top: 5px;
}

div.my-alerts-popup ol.alert-frequency li:has(span.aspNetDisabled) { 
	display: none;
}

div.my-alerts-popup .form-field ol.alert-frequency li input[type=radio] {
	width: 14px;
	height: 14px;
}

div.my-alerts-popup .form-field ol.alert-frequency li label {
	margin: 0;
}



/*** ***/

div.input-area,
div.my-alerts-subscribe { 
	background-color: var(--hl-light-taupe);
	padding: 25px;
}

div.my-alerts-subscribe { 
	display: inline-block;
	width: auto;
}

div.my-alerts-subscribe div.current-status { 

}


div.input-area div.input-form {
	display: flex;
	flex-direction: row;
	margin: 0;
	gap: 20px;
}

div.input-area div.input-form div.form-row { 
	flex-basis: 50%;
	display: flex;
	flex-direction: column;
	margin: 0;
	gap: 15px;
}

div.input-area div.input-form div.form-row div.form-cell { 
	padding:0;
}

div.input-area div.input-form div.form-row div.form-cell input[type=text] { 
	font-family: Roobert, sans-serif;
	border-color: var(--hl-taupe);
	background-color: #ffffff;
	color: var(--hl-dark-green);
}

div.my-alerts-subscribe p.title { 
	font-size: 18px;
	font-weight: 500;
}

div.my-alerts-subscribe div.all-frequency-options {
	margin-top: 20px;
}

div.my-alerts-subscribe div.all-frequency-options > label { 
	font-weight: 500;
}

div.my-alerts-subscribe div.all-frequency-options ul {
	list-style: none;
	margin-left: 10px;
}

div.my-alerts-subscribe div.all-frequency-options ul li { 
	margin-top: 5px;
	display: flex; flex-direction: row;
	gap: 10px;
	align-items: center;
}

div.my-alerts-subscribe div.switch-control { 
	margin-top: 20px;
}

/*** Topic Panel (Used in the search results) ***/

h3.search-count { 
	font-weight: 500;
	margin-bottom: 1em;
}

div.search-results div.topic-panel {
	position: relative;
	background-color: var(--hl-light-taupe);
}

div.search-results div.topic-panel a.view {
	font: inherit;
	color: inherit;
	text-decoration: none;
}

div.search-results div.topic-panel .inner,
div.search-results div.tpp-search-result-panel .inner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	min-height: 265px;
}

div.search-results div.topic-panel .image {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.2s;
	z-index: 0;
	background-size: cover;
	background-position: center bottom;
}

div.search-results .topic-panel .content-container {
	padding: 0;
	position: relative;
	z-index: 1;
}

div.search-results .topic-panel p.title,
div.search-results .tpp-search-result-panel p.title {
	font: inherit;
	color: inherit;
	font-size: 18px;
	font-weight: 400;
}

div.search-results .topic-panel:hover .image {
	transform: scale(1.1);
}

div.search-results .topic-panel.search-result {
	transition: all 0.2s;
	background-color: var(--hl-light-taupe);
}

div.search-results .topic-panel.search-result .inner {
	min-height: initial;
}

div.search-results .topic-panel.search-result .icon-and-title {
	display: flex;
	flex-direction: row;
	align-items: start;
	gap: 14px;
}

div.search-results .topic-panel.search-result .tag,
div.search-results .tpp-search-result-panel .tag {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 500;
}

div.search-results .topic-panel.search-result .tag .icon,
div.search-results .tpp-search-result-panel .tag .icon {
	background-color: var(--hl-dark-green);
	background-size: auto 35px;
	background-position: center;
	background-repeat: no-repeat;
	height: 45px;
	width: 45px;
}

div.search-results .tpp-search-result-panel .tag .icon { 
	background-size: auto 24px;
}

div.search-results div.topic-panel.search-result:hover,
div.search-results div.tpp-search-result-panel:hover {
	background-color: var(--hl-dark-green);
	color: #ffffff;
}

div.search-results div.topic-panel.search-result:hover .tag .icon,
div.search-results .tpp-search-result-panel:hover .tag .icon {
	background-color: rgba(var(--hl-light-green-rgb), 0.2);
}

div.search-results .topic-panel .search-highlight,
div.search-results .tpp-search-result-panel .search-highlight {
	font-weight: bold;
	text-decoration: underline;
}


div.search-results .topic-panel .content {
	width: 100%;
	position: relative;
	padding: 10px 20px 20px 20px;
}

div.search-results + div.page-search-results { 
	border-top: 2px solid var(--hl-dark-green);
	margin-top: 50px;
	padding-top: 40px;
}

div.search-results div.tpp-search-result-panel {
	background-color: var(--hl-light-taupe);
}

div.search-results div.tpp-search-result-panel > div.inner > button {
	font-size: var(--font-16);
	text-align: left;
	background-color: transparent;
	color: inherit;
	width: 100%;
}

div.search-results div.tpp-search-result-panel .content div.title { 
	font-size: 18px;
}

div.search-results div.tpp-search-result-panel .content div.title * {
	color: inherit;
}

div.search-results div.tpp-search-result-panel .content {
	width: 100%;
	position: relative;
	padding: 10px 20px 20px 20px;
}

div.search-results div.tpp-search-result-panel div.image { 
	width: 100%;
	height: 120px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: 20px;
}

div.page-search-results a {
	padding: 15px;
	display: block;
	text-decoration: none;
}

div.page-search-results div.page-search-result:not(:first-of-type) {

	border-top: dotted 1px var(--hl-dark-green);
}

div.page-search-results a:hover { 
	background-color: rgba(var(--hl-dark-green-rgb), 0.1);
}

div.page-search-results a p.title {
	font-weight: 500;
	font-size: 20px;
	margin-bottom: 5px;
}

div.page-search-results a p.url { 
	margin-top: 10px;
	font-size: 80%;
	font-weight: 300;
}

div.page-search-results .search-highlight {
	font-weight: bold;
	text-decoration: underline;
}

@media (max-width: 800px) {
	section .topic div.wrapper div.col-1 { 
		gap: 60px;
	}

	section.topic div.wrapper div.col-1 .side-panel { 
		width: 260px;
	}
}

@media (max-width: 600px) {
	section.topic div.wrapper div.col-1 {
		flex-direction: column;
		gap: 40px;
	}

	section.topic div.wrapper div.col-1 .side-panel {
		width: 100%;
	}
}

/*******************************************/ 
/* Temp Styles for MP Compliance Navigator */

.cn-t1 {display: flex; gap: 20px; margin: 30px 0px; align-items: center;}
.cn-t1 img.cn-t1-image {width: 49px; height: auto;}
.cn-t1 p.cn-t1-text {font-size: 24px; padding-top: 12px; font-weight: 600;}


/* TIER TABLE */

.wrapper table.tt-tier-table {background-color: transparent; font-family: Roobert, sans-serif !important;}

.wrapper table.tt-tier-table th[scope="col"],
.wrapper table.tt-tier-table th[scope="row"] {background-color: transparent; font-family: Roobert, sans-serif !important;}

.wrapper table.tt-tier-table th[scope="col"]    {text-align: center; padding: 20px 0 30px}
.wrapper table.tt-tier-table th[scope="col"] h3 {margin-top: 0.25em}

.wrapper table.tt-tier-table th[scope="row"] {padding: 20px 30px 20px 0; line-height: 1.3em}

.wrapper table.tt-tier-table th,
.wrapper table.tt-tier-table td  {color: var(--hl-dark-green); font-size: 17px; font-weight: 500; border-bottom: 0.5px solid var(--hl-dark-green); vertical-align: middle}

.wrapper table.tt-tier-table td  {text-align: center}

.wrapper table.tt-tier-table tr:last-child th,
.wrapper table.tt-tier-table tr:last-child td   {border: none}

.wrapper table.tt-tier-table th img {width: auto; height: 55px; margin: auto; display: inline-block}

.wrapper table.tt-tier-table h2  {font-size: 35px; font-weight: 300; color: var(--hl-dark-green); line-height: 1.2em; margin-bottom: 0.5em}
.wrapper table.tt-tier-table h3  {font-size: 22px; font-weight: 700; color: var(--hl-dark-green); line-height: 1.2em; margin-bottom: 0}

.wrapper table.tt-tier-table .tt-tick  {width: 28px; height: auto}
.wrapper table.tt-tier-table .tt-x     {width: 22px; height: auto}


.wrapper table.tt-tier-table .tier-essentials,
.wrapper table.tt-tier-table .tier-plus,
.wrapper table.tt-tier-table .tier-select       {width: 212px;}

.wrapper table.tt-tier-table td.tier-essentials.button-cell,
.wrapper table.tt-tier-table th.tier-essentials {background-color: #E2D6CF}
.wrapper table.tt-tier-table td.tier-essentials {background-color: #F2EDE9}

.wrapper table.tt-tier-table td.tier-plus.button-cell,
.wrapper table.tt-tier-table th.tier-plus       {background-color: #BFF355; position: relative; width: 236px;}
.wrapper table.tt-tier-table td.tier-plus       {background-color: #E2FAB3; position: relative; width: 236px;}

.wrapper table.tt-tier-table td.tier-select.button-cell,
.wrapper table.tt-tier-table th.tier-select     {background: #82C8BE; background: linear-gradient(125deg,rgba(130, 200, 190, 1) 0%, rgba(191, 243, 85, 1) 100%);}
.wrapper table.tt-tier-table td.tier-select     {background: #C9E7E3; background: linear-gradient(125deg,rgba(201, 231, 227, 1) 0%, rgba(227, 250, 179, 1) 100%);}

.wrapper table.tt-tier-table th.tier-plus:before,
.wrapper table.tt-tier-table td.tier-plus:before   {width: 12px; height: 100%; background-color: #fff; position: absolute; content: ''; left: 0; top: 0;}

.wrapper table.tt-tier-table th.tier-plus:after,
.wrapper table.tt-tier-table td.tier-plus:after    {width: 12px; height: 100%; background-color: #fff; position: absolute; content: ''; right: 0; top: 0;}

.wrapper table.tt-tier-table td.button-cell        {padding: 18px 0}
.wrapper table.tt-tier-table td .btn               {background-color: var(--hl-dark-green); color: #ffffff; font-size: 14px; padding:12px 17px; display: inline-flex; gap: 10px;}
.wrapper table.tt-tier-table td .btn:after         {width: 10px; height: 20px; background-image: url(/template-tool/_assets/icon-chevron.png); content: ''; background-size: cover; content: '';}
.wrapper table.tt-tier-table td .btn:hover         {background-color: #333333}




