
.faq-module {
	container-type: inline-size;
	container-name: faq-module;

	.panel-group {
		margin-bottom: 2.5rem;
	}
}

.faq-module:not(.no-section-heading) .moduletitle {
	background-color: var(--off-white);
	padding: 0.8rem 1rem;
	font-size: 2rem;
}

@container faq-module (min-width: 768px) { /* this size doesn't fit the grid, it's a container query, it just looks decent as a breakpoint */
	.faq-module__title + .faq-module__items {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.faq-module .panel-group .panel-heading+.panel-collapse>.list-group,.faq-module .panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top: 0 none
}

.faq-module .faq-module__item {
    border: 0 none;
    -webkit-box-shadow: none;
    box-shadow: none
}

.faq-module .faq-module__item .panel-heading {
    border-bottom: 2px solid var(--gray-lighter);
    padding-left: 0;
    padding-right: 0
}

.faq-module .faq-module__item .panel-heading:has(a[aria-expanded="true"]) {
	border-bottom-color: var(--brand-info);

	a {
		color: var(--brand-info);
	}
}

.faq-module .faq-module__item .panel-title a {
    font-size: 24px;
    display: block;
    position: relative;
    padding-right: 50px;
    width: 100%;
    padding: 2px 65px 5px 0;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
	word-break: break-word;
	text-decoration: none;
}

.faq-module .faq-module__item .panel-title a:active,.faq-module .faq-module__item .panel-title a:focus,.faq-module .faq-module__item .panel-title a:hover {
	text-decoration: none;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
	outline: 0 none;
}

.faq-module .faq-module__item .panel-title a:after,.faq-module .faq-module__item .panel-title a:before {
    background-color: var(--brand-info);
    width: 18px;
    height: 2px;
    position: absolute;
    right: 15px;
    top: 50%;
	-webkit-transform: translateX(-50%) rotate(0deg);
    transform: translateX(-50%) rotate(0deg);
    content: ""
}

.faq-module .faq-module__item .panel-title a:after {
	-webkit-transform: translateX(-50%) rotate(0deg);
    transform: translateX(-50%) rotate(0deg);
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out

}

.faq-module .faq-module__item .panel-title a.collapsed:after {
    -webkit-transform: translateX(-50%) rotate(90deg);
    transform: translateX(-50%) rotate(90deg);
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out
}

.faq-module .panel-group .panel-heading+.panel-collapse>.list-group, 
.faq-module .panel-group .panel-heading+.panel-collapse>.panel-body {
	border-top: 0 none;
}

.faq-module .faq__item {
	border: 0 none;
	box-shadow: none;
}

.faq-module .panel-heading {
	border-bottom: 2px solid var(--gray-lighter);
	padding-left: 0;
	padding-right: 0;
}

.faq-module .panel-title a {
	font-size: 24px;
	font-weight: 400;
	display: block;
	position: relative;
	padding-right: 50px;
	width: 100%;
	padding: 2px 0 5px;
	transition: all 200ms ease;
}

.faq-module .panel-title a:hover,
.faq-module .panel-title a:focus,
.faq-module .panel-title a:active {
	transition: all 200ms ease;
	color: var(--brand-info);
	text-decoration: none;
}

.faq-module .panel-title a::before,
.faq-module .panel-title a::after {
	background-color: var(--brand-info);
	width: 18px;
	height: 2px;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateX(-50%);
	content: "";
}

	
.faq-module .panel-title a::after {
	transform: translateX(-50%) rotate(90deg);
	transition: all 200ms ease-in-out;
}

.faq-module .panel-title a.collapsed::after {
	transform: translateX(-50%) rotate(0deg);
	transition: all 200ms ease-in-out;
	color: var(--text-color);
}