File: public/flat-admin/sass/plugins/form-wizard.scss

.form-wizard{
	margin-bottom: 0;

	.step{
		.control-group{
			padding:0 20px;
		}
	}

	.form-actions{
		margin-top:0;
		margin-bottom: 0;
	}
	&.wizard-vertical{
		margin-bottom: 0;

		.form-content{
			background: #fff;
			border-left:1px solid #d6d6d6;
			margin-left: 220px;
			padding:10px 10px;
			overflow:hidden;

			.control-group{
				padding:10px;

				&:last-child{
					margin-bottom: 0;
				}
			}
		}

		.step{
			background:#eee;
		}

		.wizard-steps{
			float: left;
			width:220px;
			margin-bottom: 0;
			min-height:200px;

			&>li{
				float:none;
				width:100% !important;
				@include pie-clearfix;
				display: block;
				background:#eee;
				border-top:1px solid #eee;
				border-bottom:1px solid #eee;

				&:first-child{
					border-top:0;
				}

				&.active{
					background:#fff;
					position: relative;
					border-top:1px solid #d6d6d6;
					border-bottom:1px solid #d6d6d6;

					&:first-child{
						border-top:0;
					}

					&:after{
						position: absolute;
						content:"";
						top:0;
						left:auto;
						bottom:0;
						background: #ffffff;
						width:1px;
						right:-1px;
						height:100%;
						display: block;
					}
				}

				.single-step{
					@include pie-clearfix;
					padding: 10px;
				}

				.title{
					float:left;
				}

				.description{
					float:left;
					margin-left:10px;
					margin-top: 2px;
				}
			}
		}

		.form-actions{
			padding-left: 240px;
			background: #fff;
			margin-bottom: 0;
			margin-top: 0;
			border-top:1px solid #d6d6d6;
		}
	}

	.wizard-steps{
		list-style-type: none;
		margin: 0 0 30px 0;
		padding: 0;
		@include pie-clearfix;
		background: #eee;

		li{
			float:left;
			text-align:center;

			&:last-child{
				.single-step{
					border-right: 0;
				}
			}

			.single-step{
				padding:15px 0;

				.title{
					text-align:center;
					font-size:16px;
					background: #ddd;
					padding: 4px 10px;
					color:#888;
				}

				.description{
					margin-left: 5px;
					color:#aaa;
				}
			}

			&.active{
				background: #fff;
				position: relative;

				&:after{
					position: absolute;
					bottom:-1px;
					right:0;
					left:0;
					content:"";
					background: #ffffff;
					width:100%;
					height:1px;
					display: block;
				}

				.single-step{
					.title{
						background:$blue;
						color:#fff;
					}
					.description{
						color:#333;
					}
				}
			}
			
		}

		&.steps-2{
			li{
				width:50%;
			}
		}

		&.steps-3{
			li{
				width:33.333%;
			}
		}

		&.steps-4{
			li{
				width:25%;
			}
		}

		&.steps-5{
			li{
				width:20%;
			}
		}
	}
}