details,
dl.accordion > div
{
	margin: 25px auto;
	font-weight: 400;
	font-size: 18px;
	line-height: 160%;
}

details summary,
dl.accordion dt
{
	list-style: none;
	display: block;
	color: #000;
	font-weight: 600;
	position: relative;
	cursor: pointer;
	font-size: 20px;
	padding: 32px 32px 32px 87px;
}

details summary::-webkit-details-marker {
	display: none;
}

details .accordion-item-content {
	display: block;
	margin: -6px 32px 32px;
}

details .accordion-item-content,
details[open].closing .accordion-item-content
{
	opacity: 0;
	transition: 300ms;
}

details[open] .accordion-item-content {
	opacity: 1;
	transition: 300ms;
}

details[open] {
	border-color: #8D469A;
	background-color: #FCF6FD;
	transition: background-color 300ms, border 300ms;
}

details,
details[open].closing {
	border: 1px solid rgba(17, 17, 17, 0.3);
	border-radius: 10px;
	background-color: #fff;
	transition: background-color 300ms, border 300ms;
}


details summary:focus {
	outline: none;
}

details > section {
	padding: 1.5em;
}

dl.accordion dd {
	margin: 1em 0;
	padding: 0 0 1em;
	display: none;
}

dl.accordion div.open dd {
	display: block;
	opacity: 1;
}


details[open] summary:before,
dl.accordion > div.open dt::before
{
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='%238D469A'/%3E%3Crect x='18.5837' y='10.334' width='3' height='13.5' rx='1.5' transform='rotate(90 18.5837 10.334)' fill='white'/%3E%3C/svg%3E%0A");
}

details summary:before,
details[open].closing summary:before,
dl.accordion > div dt::before,
dl.accordion > div.closing dt::before
{
	content: '';
	position: absolute;
	left: 32px;
	top: calc(50% - 12px);
	width: 24px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	transition: 300ms;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='%238D469A'/%3E%3Crect x='18.5837' y='10.334' width='3' height='13.5' rx='1.5' transform='rotate(90 18.5837 10.334)' fill='white'/%3E%3Crect x='13.3335' y='18.584' width='3' height='13.5' rx='1.5' transform='rotate(-180 13.3335 18.584)' fill='white'/%3E%3C/svg%3E%0A");
}