/* Main Layout */
.tab-wrapper{
    display:flex;
    max-width:1200px;
    /*margin:auto;*/
}

/* Left Navigation */
.tabss{
    width:350px;
    display:flex;
    flex-direction:column;
	margin-bottom: 0px;
}

/* Individual Tab */
.tab{
    height:90px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:0 25px;
    cursor:pointer;
    color:#007C7C;
    font-weight:700;
    text-transform:uppercase;
    position:relative;
    transition:.3s;
}

.tab i{
    font-size:28px;
}

/* Active Tab */
.tab.active{
    background:#fff;
    color:#777;
    z-index:2;
	border-radius: 20px 0px 0px 20px;
}

/* Arrow Effect */
.tab.active:after{
    /*content:'';*/
    position:absolute;
    right:-25px;
    top:0;
    width:0;
    height:0;
    border-top:45px solid transparent;
    border-bottom:45px solid transparent;
    border-left:25px solid #fff;
}

/* Content Area */
.content-area{
    flex:1;
    background:#fff;
    /*min-height:450px;*/
    padding:25px;
	border-radius: 10px 20px 20px 20px;
	
}

.tab-content{
    display:none;
}

.tab-content.active{
    display:block;
	background-color: #fff;
}

.tab-content h2{
    margin-top:0;
    color:#444;
}

.step-nav{
    display:flex;
    overflow:hidden;
}

.step{
    position:relative;
    background:#e0e0e0;
    color:#333;
    padding:10px 40px;
    text-decoration:none;
    font-weight:bold;
    margin-right:20px;
}

.step:after{
    content:"";
    position:absolute;
    top:0;
    right:-20px;
    width:0;
    height:0;
    border-left:20px solid #ABA9A8;
	border-top:21px solid transparent;
    border-bottom:24px solid transparent;
	
    z-index:2;
}

.step:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:0;
    border-top:25px solid transparent;
    border-bottom:25px solid transparent;
    border-left:20px solid #f5f5f5;
    left:-20px;
}

.step:first-child:before{
    display:none;
}

.step.active{
    background:#f58220;
    color:#fff;
}

.step.active:after{
    border-left-color:#f58220;
}

.step.completed{
    background:#ABA9A8;
    color:#fff;
	border-radius: 10px 0px 0px 10px;
}

/*.step.completed:after{
    border-left-color:#28a745;
}*/

/*.step:hover{
    opacity:0.9;
}*/

@media screen and (max-width: 600px) 
{
	.tab-wrapper{
    display:block;
    max-width:1200px;
    /*margin:auto;*/
	}
	.tabss{
    width:100%;
    display:flex;
    flex-direction:column;
	margin-bottom: 20px;
	}
	.tab.active{
    background:#fff;
    color:#777;
    z-index:2;
	border-radius: 20px 20px 20px 20px;
	}
	.step-nav{
    display: inline-grid;
    overflow: hidden;
    width: 100%;
	}
	.step{
    position:relative;
    background:#e0e0e0;
    color:#333;
    padding:14px 20px;
    text-decoration:none;
    font-weight:bold;
    margin-right:0px;
	margin-bottom: 25px;
	}
	.step:after{
    content: "";
    position: absolute;
    top: 50px;
    right: 110px;
    width: 0;
    height: 0;
    border-top: 20px solid #ABA9A8;
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
    z-index: 2;
	}
	.step.completed{
    background:#ABA9A8;
    color:#fff;
	border-radius: 10px 10px 10px 10px;
	}

}