/** Steps
 **************************************************************** **/

.innerWrapper{
		width: 100%;
		&.stepsPage{
			@include mobile{
				margin-bottom: 90px;
			}
			@include tablet{
				margin-bottom: 30px;
			}
			.cartListInner{
				margin-bottom: 50px;
				display: block;
			}
		}
		.col-md-3 {
			-ms-flex: 0 0 25%;
			flex: 0 0 25%;
			max-width: 25%;
		}		
		.well{
			border-radius: 0;
			border: none;
			box-shadow: none;
			margin-bottom: 50px;
			background: $m-color-light;
			padding: 20px 30px;
			.pager{
				list-style: none;
				margin: 0;
				li{
					a{
						font-weight: 700;
						letter-spacing: 1px;
						text-transform: uppercase;
						@include transition(all 0.3s ease-in-out);
						&:hover{
							opacity: 0.8;
						}
						i {
							font-size: 18px;
							padding-left: 5px;
						}
						&.hideContent{
							display: none;
						}
					}
					&.previous{
						a{
							background-color: #dedede;
							color: $m-color-secondary;
							&:hover{
								background-color: $m-color-primary;
								color: $m-color-white;
							}
						}
					}
				}
				.btn {
					border:  none;
				}				
			}
		}
		.orderBox{
			.table-responsive{
				.table{
					tbody{
						tr{
							td{
								text-transform: capitalize;
								.checkboxArea{
									margin: 0;
									float: none;
								}
							}
						}
					}
				}
			}
		}
		
		.step2.checkboxArea {
			margin-bottom: 25px;
			label {
				font-size: 13px;
				color: $text-slider-title;
			}
		}
		.checkboxArea.card-check {
			width: 100%;
			.form-control {
				background: $m-color-white;
				border: 1px solid $m-color-light;
				height: 44px;
			}
			span.step-drop {
				display: flex;
				justify-content: space-between;
			}
			.sbHolder {
				border: 1px solid $m-color-light;
				background: $m-color-white;
				max-width: 48%;
				height: 44px!important;
				.sbSelector {
					line-height: 44px!important;
					background: transparent;
				}
			}
			.input-group-addon {
				margin-left: -1px;
				z-index: 5;
				background: $m-color-white;
			}
			ul.sbOptions {
				margin-top: 0px;
				z-index: 55;
			}
			ul {
				margin: 10px 0 0 30px;
				li {
					margin-right: 5px;
				}
			}
		}
	}
	.shipping-info {
		padding: 10px 0 20px;
		h5 {
			font-size: 16px;
			font-weight: 400;
			margin-bottom: 10px;
		}
		address, p {
			color: $text-slider-title;
			line-height: 24px;
		}
	}
	.summery-box {
		border: 3px solid $m-color-light;
		padding: 40px 25px;
		margin-bottom: 50px;
		
		h4 {
			font-size: 22px;
			margin-bottom: 15px;
			font-weight: 400;
			letter-spacing: 0px;
			color: $m-color-secondary;
		}
		p {
			font-size: 13px;
			padding-bottom: 5px;
			color: $text-slider-title;
		}
		li {
			font-size: 15px;
			padding-bottom: 20px;
			color: $text-slider-title;
			&:last-child {
				border-top: 3px solid $m-color-light;
				color: $m-color-secondary;
				padding: 20px 0 0;
				.val {
					font-weight: 700;
				}
			}
		}
	}
	.order-confirm {
		padding: 60px 0 90px;
		h2 {
			font-size: 30px;
			line-height: 1;
			font-weight: 700;
			margin-bottom: 15px;
		}	
		span {
			display: block;
			font-size: 13px;
			color: $text-slider-title;
		}
		p {
			font-size: 15px;
			line-height: 30px;
			color: $text-slider-title;
			margin: 42px 0 50px;
		}
		.btn {
			font-weight: 700;
			letter-spacing: 2px;
			font-size: 15px;
		}
	} 

%after{
	content: ' '; 
	width: 16px;
    height: 16px;
	background: $m-color-white; 
	@include border-radius($radius: 50%);
	position: absolute;
    top: 7px;
    left: 7px;
}
.progress-wizard { 
	padding: 0 15px 50px 15px;
	.progress-wizard-step {
		padding: 0; 
		position: relative;
		.progress-wizard-stepnum {
			color: $text-slider-title;
			padding-bottom: 5px;
			@include mobile-xs{
				font-size: 12px;
				height: 55px;
			}
			@include mobile{
				font-size: 10px;
				height: 36px;
			}
			@include tablet{
				font-size: 12px;
				height: auto;
			}
			@include desktops{
				font-size: 16px;
			}
		}
		.progress-wizard-info {
			color: #999; 
			font-size: 14px;
		}
		.progress-wizard-dot {
			position: absolute; 
			width: 30px; 
			height: 30px; 
			display: block; 
			background: $m-color-primary; 
			left: 50%; 
			margin-top: -17px; 
			margin-left: -15px; 
			@include border-radius($radius: 50%);
			&:after {
				@extend %after;
			} 
			@include mobile{
				top: 60px;
				margin-top: -14px; 
			}
			@include tablet{
				top: 43px; 
				margin-top: -10px;
			}
		}
		.progress {
			position: relative; 
			@include border-radius(0);
			height: 4px; 
			box-shadow: none;
			background-color: $m-color-light;
			@include mobile {
				margin: 18px 0 0px;
			}
			.progress-bar {
				width:0px; 
				box-shadow: none; 
				background: $m-color-primary;
			}
		}
		&.complete{
			.progress{
				.progress-bar{
					width:100%;
				}
			}
			&:first-child{
				.progress{
					left: 0; 
					width: 100%;
					.progress-bar{
						width:50%;

					}
				}
			}
			&:last-child{
				.progress{
					width: 100%;
					.progress-bar{
						width:100%;
					}
				}
			}
			&.fullBar{
				.progress{
					.progress-bar{
						width:100%;
					}
				}
			}
		}
		&.active{
			.progress{
				.progress-bar{
					width:50%;
				}
			}
			.progress-wizard-stepnum {
				color: $m-color-secondary;
			}
		}
		&.disabled{
			.progress-wizard-dot {
				background-color: $m-color-light;
				&:after {
					@extend %after;
				}
			}
		}
	}
}