// General mode

.mt-code{
	padding:3px;
	color:#E43A45;
	border-radius: 4px !important;    
	display:inline;
	word-wrap:normal;
}

.caption-desc{
	font-size: 13px;
	margin-top:0.5em;
	line-height: 2.3em;
}  

.mt-element-step {

	.row{
		margin:0; 
	}	
	
	.step-default{

		.mt-step-col{
			padding-top:30px;
			padding-bottom: 30px;
			text-align: center; 
		}

		.mt-step-number{
			font-size:26px; 
			border-radius:50% !important;
			display: inline-block;
			margin:auto;
			padding:3px 14px;
			margin-bottom:20px; 
		}

		.mt-step-title{ 
			font-size: 30px;
		    font-weight: 100;
		}

		.active{
			background-color: #32c5d2 !important;

			.mt-step-number{
				color: #32c5d2 !important;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #fff !important;
			}
		}

		.done{
			background-color: #26C281 !important;

			.mt-step-number{
				color: #26C281 !important;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #fff !important;
			}
		}

		.error {
			background-color: #E7505A !important;

			.mt-step-number{
				color: #E7505A !important;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #fff !important;
			}
		}
	}  

	.step-thin{

		.mt-step-col{
			padding-top:10px;
			padding-bottom: 10px;
		}

		.mt-step-number{
			font-size:26px; 
			border-radius:50% !important;
			float:left;
			margin:auto;
			padding:3px 14px;
		}

		.mt-step-title{ 
			font-size: 24px;
		    font-weight: 100;
		    padding-left:60px;
		    margin-top: -4px;
		} 
 
		.mt-step-content{
			padding-left: 60px;
			margin-top:-5px;
		}
      
		.active{ 
			background-color: #32c5d2 !important;    

			.mt-step-number{ 
				color: #32c5d2 !important;
			}

			.mt-step-title,
			.mt-step-content{
				color: #fff !important;
			}
		}     

		.done{
			background-color: #26C281 !important;

			.mt-step-number{ 
				color: #26C281 !important;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #fff !important;
			}
		}  
 
		.error {    
			background-color: #E7505A !important; 

			.mt-step-number{
				color: #E7505A !important;  
			} 

			.mt-step-title,
			.mt-step-content{
				color: #fff !important;
			}
		}
	}  

	.step-background{

		.mt-step-col{
			padding-top:30px;
			padding-bottom: 30px;
			text-align: center; 
			height:160px;
		}

		.mt-step-number{
			font-size:200px;  
			position: absolute;
			bottom:0;
			right:0;
			line-height: 0.79em;
			color:darken(#E9EDEF, 5%);
			z-index: 4;
		}

		.mt-step-title{ 
			font-size: 30px;
		    font-weight: 100;
		    text-align: right;
    		padding-right: 25%;
    		z-index: 5;
    		position: relative;
		}

		.mt-step-content{ 
		    text-align: right;
    		padding-right: 25%;
    		z-index: 5;
    		position: relative;
		}

		.active{
			background-color: #32c5d2 !important;

			.mt-step-number{
				color: darken(#32c5d2, 5%) !important;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #fff !important;
			}
		}

		.done{
			background-color: #26C281 !important;

			.mt-step-number{
				color: darken(#26C281, 5%) !important;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #fff !important;
			}
		}

		.error {
			background-color: #E7505A !important;

			.mt-step-number{
				color: darken(#E7505A, 5%) !important;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #fff !important;
			}
		}
	}  

	.step-background-thin{

		.mt-step-col{
			padding-top:15px;
			padding-bottom: 15px;
			text-align: center; 
		}

		.mt-step-number{
			font-size:120px;  
			position: absolute;
			bottom:0;
			right:0;
			line-height: 0.79em;
			color:darken(#E9EDEF, 5%);
			z-index: 4;
		}

		.mt-step-title{ 
			font-size: 30px;
		    font-weight: 100;
		    text-align: right;
    		padding-right: 25%;
    		z-index:5;
    		position: relative;
		}

		.mt-step-content{ 
		    text-align: right;
		    position: relative;
    		padding-right: 25%;
    		z-index: 5;
		}

		.active{
			background-color: #32c5d2 !important;

			.mt-step-number{
				color: darken(#32c5d2, 5%) !important;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #fff !important;
			}
		}

		.done{
			background-color: #26C281 !important;

			.mt-step-number{
				color: darken(#26C281, 5%) !important;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #fff !important;
			}
		}

		.error {
			background-color: #E7505A !important;

			.mt-step-number{
				color: darken(#E7505A, 5%) !important;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #fff !important;
			}
		}
	}  

	.step-no-background{

		.mt-step-col{
			padding-top:30px;
			padding-bottom: 30px;
			text-align: center; 
		}

		.mt-step-number{
			font-size:26px; 
			border-radius:50% !important;
			display: inline-block;
			margin:auto;
			padding:3px 14px;
			margin-bottom:20px; 
			border:1px solid;
			border-color:#e5e5e5;
		}

		.mt-step-title{ 
			font-size: 30px;
		    font-weight: 100;
		}

		.active{

			.mt-step-number{
				color: #32c5d2 !important;
				border-color: #32c5d2 !important;
				font-weight: 700;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #32c5d2 !important;
				font-weight: 700;
			}
		}

		.done{

			.mt-step-number{
				color: #26C281 !important;
				border-color: #26C281 !important;
				font-weight: 700;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #26C281 !important;
				font-weight: 700;
			}
		}

		.error {

			.mt-step-number{
				color: #E7505A !important;
				border-color: #E7505A !important;
				font-weight: 700;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #E7505A !important;
				font-weight: 700;
			}
		}
	}  

	.step-no-background-thin{

		.mt-step-col{
			padding-top:10px;
			padding-bottom: 10px;
		}

		.mt-step-number{
			font-size:26px; 
			border-radius:50% !important;
			float:left;
			margin:auto;
			padding:3px 14px;
			border:1px solid;
			border-color:#e5e5e5;
		}

		.mt-step-title{ 
			font-size: 24px;
		    font-weight: 100;
		    padding-left:60px;
		    margin-top: -4px;
		} 
 
		.mt-step-content{
			padding-left: 60px;
			margin-top:-5px;
		}
      
		.active{

			.mt-step-number{
				color: #32c5d2 !important;
				border-color: #32c5d2 !important;
				font-weight: 700;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #32c5d2 !important;
				font-weight: 700;
			}
		}

		.done{

			.mt-step-number{
				color: #26C281 !important;
				border-color: #26C281 !important;
				font-weight: 700;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #26C281 !important;
				font-weight: 700;
			}
		}

		.error {

			.mt-step-number{
				color: #E7505A !important;
				border-color: #E7505A !important;
				font-weight: 700;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #E7505A !important;
				font-weight: 700;
			}
		}
	}  

	.step-line{

		.mt-step-col{
			padding:30px 0;
			text-align: center; 
		}

		.mt-step-number{
			font-size:26px; 
			border-radius:50% !important;
			display: inline-block;
			margin:auto;
			padding:9px;
			margin-bottom:5px; 
			border:3px solid;
			border-color:#e5e5e5;
			position: relative;
			z-index: 5;
			height:60px;
			width:60px;
			text-align: center;

			>i{
				position: relative;
				top: 50%;
				transform: translateY(-120%);
			}
		}

		.mt-step-title{ 
			font-size: 20px;
		    font-weight: 400;
		    position: relative;

		    &:after{
				content:'';
				height:3px;
				width:50%;
				position: absolute;
				background-color: #e5e5e5;
				top:-32px;
				left:50%;
				z-index: 4;
				transform:translateY(-100%);
			}
			&:before{
				content:'';
				height:3px;
				width:50%;
				position: absolute;
				background-color: #e5e5e5;
				top:-32px;
				right:50%;
				z-index: 4;
				transform:translateY(-100%);
			}
		}

		.first{
			.mt-step-title{ 

				&:before{
					content:none;
				}
			}
		}

		.last{
			.mt-step-title{ 

				&:after{
					content:none;
				}
			}
		}

		.active{

			.mt-step-number{
				color: #32c5d2 !important;
				border-color: #32c5d2 !important;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #32c5d2 !important;
			}

			.mt-step-title{
				&:after,
				&:before{
					background-color: #32c5d2;
				}
			}
		}

		.done{

			.mt-step-number{
				color: #26C281 !important;
				border-color: #26C281 !important;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #26C281 !important;
			}

			.mt-step-title{
				&:after,
				&:before{
					background-color: #26C281;
				}
			}
		}

		.error {

			.mt-step-number{
				color: #E7505A !important;
				border-color: #E7505A !important;
			} 

			.mt-step-title,
			.mt-step-content{
				color: #E7505A !important;
			}

			.mt-step-title{
				&:after,
				&:before{
					background-color: #E7505A;
				}
			}
		}
	}  

	// step sizing   
	&.mt-size-lg {

	}

	&.mt-size-sm { 

	}
}

// Mobile mode
@media (max-width: $screen-sm-max) { /* 991px */
	.mt-element-step {

		.step-line{

			.mt-step-title{ 

			    &:after{
					content:none;
				}
				&:before{
					content:none;
				}
			} 
		}

	}
}