.step-instructions-module {
	container-type: inline-size;
	container-name: step-instructions-module;
	max-width: 1000px;

	.panel-group {
		margin-bottom: 2.5rem;
	}
}

/* .step-instructions-module:not(.no-section-heading) .moduletitle {
	background-color: var(--off-white);
	padding: 0.8rem 1rem;
	font-size: 2rem;
} */

@container step-instructions-module (min-width: 768px) { /* this size doesn't fit the grid, it's a container query, it just looks decent as a breakpoint */
	.step-instructions-module__title + .step-instructions-module__items {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.step-instructions-module .panel-group .panel-heading+.panel-collapse>.list-group,.step-instructions-module .panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top: 0 none
}

.step-instructions-module .step-instructions-module__item {
    border: 0 none;
    -webkit-box-shadow: none;
    box-shadow: none
}

.step-instructions-module .step-instructions-module__item .panel-heading {
    background-color: var(--off-white);
	padding: 0.8rem 1rem;
	font-size: 2rem;
	border: 0 none;

	a {
		color: var(--text-color);
	}
}

.step-instructions-module .step-instructions-module__item .panel-heading:has(a[aria-expanded="true"]) {
	a {
		color: var(--brand-info);
	}
}

.step-instructions-module .step-instructions-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;
}

.step-instructions-module .step-instructions-module__item .panel-title a:active,.step-instructions-module .step-instructions-module__item .panel-title a:focus,.step-instructions-module .step-instructions-module__item .panel-title a:hover {
	text-decoration: none;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
	outline: 0 none;
}

.step-instructions-module .step-instructions-module__item .panel-title a:after,.step-instructions-module .step-instructions-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: ""
}

.step-instructions-module .step-instructions-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

}

.step-instructions-module .step-instructions-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
}

.step-instructions-module .panel-group .panel-heading+.panel-collapse>.list-group, 
.step-instructions-module .panel-group .panel-heading+.panel-collapse>.panel-body {
	border-top: 0 none;
}

.step-instructions-module .step-instructions__item {
	border: 0 none;
	box-shadow: none;
}

.step-instructions-module .panel-heading {
	border-bottom: 2px solid var(--gray-lighter);
	padding-left: 0;
	padding-right: 0;
}

.step-instructions-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;
}

.step-instructions-module .panel-title a:hover,
.step-instructions-module .panel-title a:focus,
.step-instructions-module .panel-title a:active {
	transition: all 200ms ease;
	color: var(--brand-info);
	text-decoration: none;
}

.step-instructions-module .panel-title a::before,
.step-instructions-module .panel-title a::after {
	background-color: var(--brand-info);
	width: 18px;
	height: 2px;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateX(-50%);
	content: "";
}

	
.step-instructions-module .panel-title a::after {
	transform: translateX(-50%) rotate(90deg);
	transition: all 200ms ease-in-out;
}

.step-instructions-module .panel-title a.collapsed::after {
	transform: translateX(-50%) rotate(0deg);
	transition: all 200ms ease-in-out;
	color: var(--text-color);
}

/* Steps */

.step-instructions-module .section-steps {
	counter-reset: step-counter;

	.step {
		counter-increment: step-counter;
		position: relative;
		padding-top: 1rem;
		padding-left: 3rem;

		&::before {
			content: counter(step-counter) ".";
			position: absolute;
			left: 0;
			top: .5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			font-weight: 700;
			color: var(--brand-primary);
			font-size: 1.5rem;
		}

	}

}