/* FuelUX Wizard
=================================================================== */
.wizard {

	.clearfix;
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;

	ul {
		list-style: none outside none;
		padding: 0;
		margin: 0;
		width: 4000px;

		li {
			float: left;
			margin: 0;
			padding: 0 20px 0 30px;
			height: 40px;
			line-height: 40px;
			position: relative;
			background: lighten(@grey,25%);
			color: @grey;
			font-size: 16px;
			cursor: default;
			
			&:first-child {
				.border-radius(2px 0 0 2px);
			}
			
			&:last-child {
				.border-radius(0 2px 2px 0);
			}

			.chevron {
				border: 48px solid transparent;
				border-left: 28px solid white;
				border-right: 0;
				display: block;
				position: absolute;
				right: -14px;
				top: -28px;
                z-index: 1;
			}

			.chevron:before {
				border: 48px solid transparent;
				border-left: 28px solid lighten(@grey,25%);
				border-right: 0;
				content: "";
				display: block;
				position: absolute;
				right: 5px;
				top: -48px;
			}

			&.complete {
				background: @green;
				color: white;

				&:hover {
					background: #e7eff8;
					cursor: pointer;

					.chevron:before {
						border-left: 28px solid #e7eff8;
					}
				}

				.chevron:before {
					border-left: 28px solid @green;
				}
			}
			&.active {
				background: @grey;
				color: white;

				.chevron:before {
					border-left: 28px solid @grey;
				}
			}
			.badge {
				margin-right: 8px;
			}
		}

		li:first-child {
			border-radius: 4px 0 0 4px;
			padding-left: 20px;
		}
	}

	.actions {
		z-index: 1000;
		position: absolute;
		right: 0;
		line-height: 46px;
		float: right;
		padding-left: 15px;
		padding-right: 15px;		
		vertical-align: middle;

		a {
			line-height: 45px;
			font-size: 12px;
			margin-right: 8px;
		}

		.btn-prev {
			i {
				margin-right: 5px;
			}
		}

		.btn-next {
			i {
				margin-left: 5px;
			}
		}
	}
}

.step-content {
	.step-pane {
		display: none;
	}

	.active {
		display: block;

		.btn-group {
			.active {
				display: inline-block;
			}
		}
	}
}