/*****************************
	 Nav Tab
*****************************/
.nav-tabs {
	border: none;

	.nav-item {
		margin-bottom: 0;

		.nav-link {
			background: transparent;
			border: none;
			color: $gray-8;
			padding: 10px 30px;
			border-radius: $border-radius;
			margin-right: 20px;
		}

		.nav-link.active {
			background: $primary;
			border: none;
			color: $white;
		}

	}

}

.nav-tabs {
	.nav-item {
		&:last-child {
			.nav-link {
				margin-right: 0px;
			}
		}
	}
}


/* nav-tabs-02 */

.nav-tabs.nav-tabs-02 {
	.nav-item {
		.nav-link {
			background: transparent;
			color: $gray-3;
			border-radius: 0px;
			padding: 12px 14px 18px;
			border-bottom: 3px solid transparent;
			margin: 0px 30px;
		}
		.nav-link.active {
			background: transparent;
			color: $primary;
			border-radius: 0px;
			border-bottom: 3px solid $primary;
		}
	}
}

.nav-tabs {
	.nav-item {
		.nav-link {
			color: $gray-8;
		}
	}
}

/* nav-tabs-03 */

.nav-tabs.nav-tabs-03 {
	li {
		position: relative;
		i {
			border: none;
		}
		&:last-child {
			&:after {
				border: none;
			}
		}
		&:after {
			position: absolute;
			content: "";
			border: 1px dashed $border-color;
			left: 50%;
			top: 32%;
			width: 100%;
		}
	}
}

.nav-tabs.nav-tabs-03 {
	.feature-info-icon {
		background: $white;
		border-radius: 50%;
		text-align: center;
		height: 70px;
		width: 70px;
		line-height: 70px;
		margin: 0 auto;
		font-size: 30px;
		border: 1px solid $gray-2;
		position: relative;
		z-index: 99;
	}
	.feature-info-icon.active {
		background: $primary;
		border-radius: 50%;
		text-align: center;
		height: 70px;
		width: 70px;
		line-height: 70px;
		color: $white;
		font-size: 30px;
		margin: 0 auto;
		border: 1px solid $primary;
	}
}

.nav-tabs.nav-tabs-03 {
	.nav-item {
		span {
			font-weight: 600;
			color: $gray-3;
		}
	}
	.nav-item.active {
		span {
			color: $primary;
		}
	}
}

.nav-tabs.nav-tabs-03 {
	.nav-item.active {
		.feature-info-icon {
			background: $primary;
			color: $white;
			border-color: $primary;
		}
	}
}

/* nav tabs border */
.nav-tabs.nav-tabs-border .nav-item {
	margin-bottom: 10px;
	flex: 2;
}
.nav-tabs.nav-tabs-border {
	.nav-item {
		.nav-link {
			background: transparent;
			padding: 20px 16px;
			border: 2px solid $border-color;
			border-radius: $border-radius;
			border-color: $black;
			margin-right: 20px;
			&:last-child {
				margin-right: 0px;
			}
			p {
				font-size: 13px;
			}
		}
		.nav-link.active {
			border-color: $primary;
			color: $primary;
			transition: all 0.01s ease-in-out;
			.tab-icon{
				color: $primary;
			}
			h6 {
				color: $primary;
			}
			p {
				color: $primary;
			}
		}
	}
}

.nav-tabs.nav-tabs-border {
	.tab-icon {
		font-size: 35px;
		line-height: 35px;
		font-weight: normal;
	}
}