@accordian-border-color: #E5E4E3;
@accordian-border: 1px solid @accordian-border-color;

.fusion-accordian {
	width: 100%;

	.fusion-panel {
		box-shadow: none;
		border: none;
		border-bottom: @accordian-border;
		border-radius: 0;
		background-clip: padding-box;
	}

	.panel-heading {
		padding: 0;
		background: none;

		.panel-title {
			margin: 0;

			a {
				display: flex;
				align-items: baseline;
			}
		}
	}

	.panel-title {
		position: relative;
		line-height: 22px;
		font-size: 16px;
		font-weight: normal;
		color: inherit;

		a {
			display: block;
			padding: 10px 0;
			text-decoration: none;
			box-shadow: none !important;

			&:hover {
				color: @primary-color;

				.fa-fusion-box {
					background-color: @primary-color;
				}
			}

			.fa.pull-left {
				margin-left: 1px;
			}

			.fa-fusion-box {
				display: inline-block;
				vertical-align: middle;
				background-color: #333;
				color: #fff;
				text-align: center;
				font-family: 'IcoMoon';
				padding: 4.5px;
				-webkit-font-smoothing: subpixel-antialiased;

				&:before {
					font-family: 'IcoMoon';
					content: "\e61d";
					font-style: normal;
					line-height: normal;
					font-size: 13px;
					display: grid;
				}
			}
		}

		.active {
			.fa-fusion-box {
				background-color: @primary-color;

				&:before {
					content: "\e61c"; //– specail HTML char
				}
			}
		}

		.fusion-toggle-heading {
			margin-left: 18px;
		}
	}

	.panel-body {
		padding: 10px 0 15px;
		border: none;
		line-height: var(--body_typography-line-height);
	}

	.fusion-panel.fusion-toggle-no-divider.fusion-toggle-boxed-mode {
		margin-bottom: 10px;
		border-style: solid;
		cursor: pointer;

		.panel-body {
			padding-left: 25px;
			padding-right: 25px;
		}

		.panel-title {
			a {
				padding: 15px 25px;
			}
		}
	}

	.fusion-panel.fusion-toggle-no-divider {
		border-bottom: none;

		.panel-title {
			a {
				padding: 10px 0;
			}
		}
	}

	.fusion-toggle-icon-unboxed {
		.panel-title a .fa-fusion-box {
			background-color: transparent;
			padding: 0;
		}

		.panel-title a:hover .fa-fusion-box {
			background-color: transparent !important;
		}

		.panel-heading .fusion-toggle-icon-wrapper {
			left: 0;
		}
	}

	.fusion-toggle-icon-right {
		.fusion-toggle-heading {
			margin-left: 0;
			width: 100%;
		}

		&.fusion-toggle-icon-unboxed {
			.fusion-toggle-icon-wrapper {
				left: auto;
			}
		}

		.panel-heading {
			a {
				flex-direction: row-reverse;
			}
		}
	}
}

.fusion-single-accordian {
	margin-bottom: 0;
}

.fusion-builder-elements-toggle-inactive-color {
	background-color: var(--accordian_inactive_color);
}

.fusion-builder-elements-toggle-active_color_color_elements {
	color: var(--accordian_active_color, var(--primary_color));
}

.fusion-builder-elements-toggle-active_color_hover_elements {
	background-color: var(--accordian_active_color) !important;
	border-color: var(--accordian_active_color) !important;
}

.fusion-builder-elements-toggle-active_color_active_elements {
	background-color: var(--accordian_active_color);
}