* {
	box-sizing: border-box;
}

#ffw-main-wrapper {
	.ffw-main-wrapper-shortcode {
		width: 90%;
	}

	.ffw-collapse {

		&:nth-child(odd) {
			> span {
				background: #747d8c;
			}
		}

		&:nth-child(even) {
			> span {
				background: #a4b0be;
			}
		}

		span.ffw-button {
			display: block;
			font-size: 1em;
			font-weight: 500;
			padding: 15px 20px;
			color: #fff;
			position: relative;
			cursor: pointer;

			&:before {
				content: "";
				border-top: 7px solid #fff;
				border-left: 7px solid transparent;
				border-right: 7px solid transparent;
				position: absolute;
				top: 25px;
				right: 30px;
			}

			&.ffw-active {
				background: #7f54b3;
			}
		}

		&:target {
			.ffw-content {
				max-height: 15em;
			}

			span {
				&:before {
					transform: rotate(-90deg);
				}
			}
		}

		.ffw-content {
			padding: 10px 20px;
			overflow: hidden;
			display: none;

			&.ffw-active {
				display: block;
			}
		}

		& + span {
			border-top: 1px solid rgba(255, 255, 255, 0.7);
		}
	}

	.ffw-is-rtl {
		direction: rtl;
		text-align: right;

		.ffw-collapse {
			span{
				&.ffw-button {
					padding-right: 55px;
				}
			}
		}

		.ffw-classic-answer {
			padding: 20px 30px;
		}
	}

}