div.template-page-panel[data-template-level='1'] > section.accordion { 
	padding: 0; /* 20px 0 */
}

section.accordion div.accordion-container { 
	padding: 0;
	background-color: #ffffff;
}

section.accordion button.btn-accordion-expander { 
	position: relative;
	display: block;
	width: 100%;
	padding: 8px 48px 8px 14px;
	text-align: left;
	font-size: 16px;
	background-color: var(--hl-dark-green);
	color: #ffffff;

	background-size: cover;

	background-position: top left;
	background-repeat: no-repeat;
}

section.accordion button.btn-accordion-expander:after { 
	content: "";
	position: absolute;
	right: 14px;
	top: calc(50% - 8px);

	width: 16px;
	height: 16px;
	background-image: url("/_assets/icon-plus-hl-light-green.png");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

section.accordion button.btn-accordion-expander.expanded:after { 
	background-image: url("/_assets/icon-minus-hl-light-green.png");
}

section.accordion div.accordion-container > div.accordion-item {
	margin-top: 10px;
}

section.accordion div.accordion-container > div.accordion-item:first-child {
	margin-top: 0;
}

section.accordion div.accordion-container > div.accordion-item > div.accordion-content { 
	padding: 25px;
	background-color: var(--hl-light-taupe);
	display: none;
}

/* For nested accorsions*/

div.template-page-panel[data-template-panel='Accordion'][data-template-level='2'] > section > div > div > div.accordion-container,
div.template-page-panel[data-template-panel='Accordion'][data-template-level='4'] > section > div > div > div.accordion-container {
	background-color: var(--hl-light-taupe);
}

div.template-page-panel[data-template-panel='Accordion'][data-template-level='2'] > section > div > div > div.accordion-container > div.accordion-item > div.accordion-content,
div.template-page-panel[data-template-panel='Accordion'][data-template-level='4'] > section > div > div > div.accordion-container > div.accordion-item > div.accordion-content {
	background-color: #ffffff;
}


div.accordion-circular-reference { 
	background-color: #ffe1e1;
	color: #cc0000;
	padding: 15px 10px;
	text-align: center;
	border: 1px solid #cc0000;
	border-radius: 3px;
}

div.accordion-item > div.accordion-content > div > section.text-block {
	padding: 0;
}


/*** Themes ***/
/*
	dark-green
	light-green
	light-green-purple-gradient
	purple-teal-gradient
	taupe
*/

div.accordion-container.tpp-theme-light-green > div.accordion-item > button.btn-accordion-expander {
	background-color: var(--hl-light-green);
	color: var(--hl-dark-green);
}

div.accordion-container.tpp-theme-light-green > div.accordion-item > button.btn-accordion-expander:after,
div.accordion-container.tpp-theme-purple-teal-gradient > div.accordion-item > button.btn-accordion-expander:after,
div.accordion-container.tpp-theme-light-green-purple-gradient > div.accordion-item > button.btn-accordion-expander:after,
div.accordion-container.tpp-theme-taupe > div.accordion-item > button.btn-accordion-expander:after {
	background-image: url("/_assets/icon-plus-hl-dark-green.png");
}

div.accordion-container.tpp-theme-light-green > div.accordion-item > button.btn-accordion-expander.expanded:after,
div.accordion-container.tpp-theme-purple-teal-gradient > div.accordion-item > button.btn-accordion-expander.expanded:after,
div.accordion-container.tpp-theme-light-green-purple-gradient > div.accordion-item > button.btn-accordion-expander.expanded:after,
div.accordion-container.tpp-theme-taupe > div.accordion-item > button.btn-accordion-expander.expanded:after {
	background-image: url("/_assets/icon-minus-hl-dark-green.png");
}

div.accordion-container.tpp-theme-light-green-purple-gradient > div.accordion-item > button.btn-accordion-expander {
	background-image: url("/template-tool/_assets/bg-light-green-purple-gradient.jpg");
	color: var(--hl-dark-green);
}

div.accordion-container.tpp-theme-purple-teal-gradient > div.accordion-item > button.btn-accordion-expander {
	background-image: url("/template-tool/_assets/bg-purple-teal-gradient.jpg");
	color: var(--hl-dark-green);
}

div.accordion-container.tpp-theme-taupe > div.accordion-item > button.btn-accordion-expander {
	background-color: var(--hl-taupe);
	color: var(--hl-dark-green);
}