.wc-coupon-generator-wrap {


	/** Steps */
	&.wc-coupon-generator-wrap {

		.steps {

			.step {
				background: #8b8e94;
				padding: 10px 20px;
				color: white;
				width: calc( ( 100% - ( 68px * 4 ) ) / 4 );
				display:inline-block;
				margin-right: 20px;
				margin-left: 0px;
				font-weight: bold;
				font-size: 14px;
				white-space: nowrap;

				a {
					color: white;
					text-decoration: none;

					&:focus { box-shadow: none; }

				}
				&.active {
					background: #e33a3d;
					border-left-color: #e33a3d;
				}

				// Step arrows (left and right)
				&:after {
				    content: "";
				    width: 0px;
					height: 0px;
					border-top: 20px solid rgba(0, 0, 0, 0);
					border-bottom: 20px solid rgba(0, 0, 0, 0);
					border-left: 20px solid #8b8e94;
					float: right;
					position: relative;
					margin: -10px -40px;
				}
				&:before {
				    content: "";
				    width: 0px;
					height: 0px;
					border-top: 20px solid #8b8e94;
					border-bottom: 20px solid #8b8e94;
					border-left: 20px solid rgba(0, 0, 0, 0);
					float: left;
					position: relative;
				    margin: -10px -40px;
				}
				&.active:after {
					border-left-color: #e33a3d;
				}
				&.active:before {
					border-top-color: #e33a3d;
					border-bottom-color: #e33a3d;
				}
			}
			.step.step-0 {
				margin-left: 20px;
			}
		}


		.continue-button-wrap {
			float: right;

			&:focus { box-shadow: none; }
			&:hover .continue-button { background: #C12123;	}
			&:hover .continue-button:before { border-top-color: #C12123; border-bottom-color: #C12123; }
			&:hover .continue-button:after { border-right-color: #C12123; border-left-color: #C12123; }

			.continue-button {
				background: #E33A3D;  border: none;  color: #FFF;  padding: 10px 30px;
				height: 18px;
				line-height: 18px;
				position: relative;
				display: inline-block;
				margin-left: 20px;
				margin-right: 20px;
				font-weight: bold;
				font-size: 14px;

				&:after {
					content: "";
					width: 0px;
					height: 0px;
					border-top: 19px solid rgba(0, 0, 0, 0);
					border-bottom: 19px solid rgba(0, 0, 0, 0);
					border-left: 19px solid #E33A3D;
					position: relative;
					float: right;
					margin: -10px -49px;
					padding: 0px;
					line-height: 0;
				}
				&:before {
					content: "";
					width: 0px;
					height: 0px;
					border-top: 19px solid #E33A3D;
					border-bottom: 19px solid #E33A3D;
					border-left: 19px solid rgba(0, 0, 0, 0);
					float: left;
					position: relative;
					margin: 0;
					margin: -10px -49px;
				}
			}
		}
	}

	/* Step specific */
	&.wc-coupon-generator-wrap-step-2 {

		#wc-coupon-generator-options {
			float: left;
			width: 80%;

			.inside {
				padding: 0;
				margin: 0;
			}
		}
	}

	&.wc-coupon-generator-wrap-step-3 {

		/** Progress bar */
		.wc-coupon-generator-progress-bar {
			width: calc( 100% - 50px );
			height: 30px;
			border: 1px solid #DDD;
			position: relative;
			display: inline-block;

			.wc-coupon-generator-progress-percentage {
				text-align: center;
				line-height: 30px;
				z-index: 10;
				position: relative;
				font-weight: bold;
				position: absolute;
				width: 100%;
			}
			.progress {
				width: 0%;
				height: 30px;
				display: inline-block;
				background-color: #E33A3D;
				position: absolute;
				z-index: 15;
				overflow: hidden;
				-webkit-transition: width 1s ease-in-out;
				-moz-transition: width 1s ease-in-out;
				-o-transition: width 1s ease-in-out;
				transition: width 1s ease-in-out;

				.inner-progress {
					position: absolute;
					color: #FFF;
					z-index: 15;
					text-align: center;
					display: block;
					height: 30px;
					line-height: 31px;
					-webkit-transition: none;
					-moz-transition: none;
					-o-transition: none;
					transition: none;
				}
			}
		}
		.spinner { 	float: right; margin: 5px 10px; }

		pre.wc-coupon-generator-progress-messages {
			background: #F5F5F5;
			padding: 12px;
			max-height: 300px;
			overflow: scroll;
		}

	}

}
