button[data-axi="accordion"],
button[data-axi="mobile_accordion"] {
	background-color: var(--accordion-background);
	color: var(--body-text-color);
	cursor: pointer;
	width: 100%;
	min-height: 45px;
	padding-left: 15px;
	padding-right: 25px;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: background-color 0.4s, color 0.4s, filter 0.8s;
	margin:0 0 8px 0;
	border-radius: var(--border-radius);
	display:flex;
	align-items: center;
	position:relative;
}

button[data-axi="mobile_accordion"]{
	display: none;
}

.active,
button[data-axi="accordion"]:hover,
button[data-axi="mobile_accordion"]:hover {
	filter: brightness(85%)
}

button[data-axi="accordion"]:after,
button[data-axi="mobile_accordion"]:after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: '\f078';
	font-size: 18px;
	float: right;
	margin-right: 10px;
	transition: transform 0.5s;
	margin-left: auto;
	position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.active:after {
    transform: translateY(-50%) rotate(-180deg) !important;
}

div[data-axi="accordion_panel"]{
	padding: 10px 20px;
	display: none;
	background-color: var(--accordion-panel-background);
	overflow: hidden;
	margin-bottom: 8px;
	transition: background 0.8s;
	border-radius: var(--border-radius);
	box-shadow:var(--box-shadow);
}


@media (max-width:767px) {
	button[data-axi="mobile_accordion"]{
		display: block;
	}
	div[data-axi="mobile_accordion_panel"]{
		padding: 10px 20px;
		display: none;
		background-color: var(--accordion-panel-background);
		overflow: hidden;
		margin-bottom: 8px;
		transition: background 0.8s;
		border-radius: var(--border-radius);
		box-shadow:var(--box-shadow);
	}
}

@media print {
	button[data-axi="accordion"]:after {
		content: none;
		page-break-after: avoid;
	}

	div[data-axi="accordion_panel"]{
		page-break-inside: initial;
	}
}