booking/assets/scss/theme/_form-wizard.scss

/**===========================
     48. Form Wizard CSS Start
=============================**/
/*Form Wizard One Start*/
.form-wizard{
	.tab {
		display: none;
	}
	.btn-mb{
		margin-bottom: 30px;
	}
	.step {
		height: 10px;
		width: 10px;
		margin: 0 2px;
		background-color: $primary-color;
		border: none;
		border-radius: 50%;
		display: inline-block;
		opacity: 0.5;
		&.active {
			opacity: 1;
		}
		&.finish {
			background-color: $secondary-color;
		}
	}
}
/*Form Wizard One ends*/

/*Form Wizard Two Start*/
.stepwizard {
	display: table;
	width: 100%;
	position: relative;
	margin-bottom: 30px;
	.stepwizard-row {
		display: table-row;
		&:before {
			top: 16px;
			bottom: 0;
			position: absolute;
			content: " ";
			width: 100%;
			height: 1px;
			background-color: $light-gray;
		}
		.stepwizard-step {
			display: table-cell;
			text-align: center;
			position: relative;
			p {
				margin-top: 10px;
			}
			button[disabled] {
				opacity: 1 !important;
				filter: alpha(opacity=100) !important;
			}
			.btn{
				font-weight:600;
			}
		}
	}
}
/*Form Wizard Two Ends*/


/*Form Wizard Three Start*/
.f1 {
	fieldset {
		display: none;
	}
	.input-error {
		border-color: $danger-color;
	}
	.f1-steps {
		overflow: hidden;
		position: relative;
		margin-top: 30px;
		margin-bottom: 30px;
		.f1-progress {
			position:absolute;
			top:24px;
			width:100%;
			height:1px;
			background-color:$light-gray;
			.f1-progress-line {
				height:1px;			
				background-color:$primary-color;
				width:16%;
			}
		}
		.f1-step {
			position: relative;
			float: left;
			width: 33.333333%;
			text-align:center;
			&.activated {
				.f1-step-icon {				
					border: 1px solid $primary-color;
					color: $primary-color;
					line-height: 38px;
				}
				p {
					color: $primary-color;
				}
			}
			&.active {
				.f1-step-icon {								
					background-color:$primary-color;
					color:$white;									
				}
				p {
					color: $primary-color;
				}
			}
			p {
				color:$dark-gray;
				font-weight:600;
			}
			.f1-step-icon {
				display:inline-block;
				width:40px;
				height:40px;				
				background-color:$light-gray;
				font-size:16px;
				color:$primary-color;
				line-height: 40px;
				border-radius: 50%;
			}
		}
	}
	.f1-buttons {
		text-align: right;
	}
}
/*Form Wizard Three ends*/


/*Form Wizard Four Start*/
.wizard-4 {
	.buttonDisabled {
		color: $dark-color;
		background-color: $light-gray;
		border: 1px solid $light-gray;
		cursor: text;
	}
	.action-bar{
		.btn{
			float: right;
			margin: 0 5px;
		}
	}
	.step-container {
		position: relative;
		margin: 0;
		padding: 0;
		border: 0 solid $light-gray;
		overflow: hidden;
		clear: right;
		width: 70%;
		box-sizing: border-box;
		div.content {
			display: block;
			position: absolute;
			float: left;
			height: 295px;
			text-align: left;
			overflow: auto;
			z-index: 1;
			width: 100%;
			box-sizing: border-box;
			clear: both;
		}
	}
	.loader {
		display: none;
	}
	.msg-box {
		position: absolute;
		display: none;
		padding: 5px 10px;
		background-color: $primary-color;
		left: 32%;
		bottom: 30px;
		border-radius: 2px;
		.content {
			padding: 0;
			float: left;
			padding-top: 3px;
			color: $white;
		}
		.close {
			text-shadow: none;
			color: $white;
			margin-left: 10px;
			opacity: 1;
		}
	}
	ul.anchor {
		position: relative;
		display: block;
		float: left;
		list-style: none;
		margin: 0;
		padding: 0;
		border: 0 solid $light-gray;
		background: transparent;
		width: 30%;
		box-sizing: border-box;
		padding-right: 30px;
		li {
			position: relative;
			display: block;
			margin: 0;
			padding: 0;
			padding-bottom: 19px;
			float: left;
			clear: both;
			width: 100%;
			box-sizing: border-box;
			z-index: 0;
			a {
				display: block;
				position: relative;
				float: left;
				margin: 0;
				padding: 10px 20px;
				width: 100%;
				box-sizing: border-box;
				text-decoration: none;
				outline-style: none;
				z-index: 1;
				font-size: 18px;
				small{
					display: block;
					font-size: 14px;
				}
				.stepNumber {
					position: relative;
					float: left;
					width: 30px;
					text-align: center;
					padding: 5px;
					padding-top: 0;
				}
				&.selected {
					color: $white;
					background: $primary-color;
					cursor: text;
					border-radius: 5px;
				}
				&.done {
					position: relative;
					color: $white;
					background: $secondary-color;
					z-index: 99;
					border-radius: 5px;
				}
				&.disabled {
					color: $dark-gray;
					background: $light-gray;
					cursor: text;
					border-radius: 5px;
				}
				&.error {
					color: $dark-gray;
					background: $pitch-color ;
					border: 1px solid $danger-color;
					&:hover {
						color: $black;
					}
				}
			}
		}
	}
}


@media (max-width:575px){
	.f1 {

		.f1-steps {
			.f1-step {
				.f1-step-icon{
					width:35px;
					height:35px;
					font-size:14px;			
				}
			}

			.f1-progress{
				top:20px;
			}

		}

	}

}
/*Form Wizard Four Ends*/
/**=====================
    48. Form Wizard CSS Ends
==========================**/