/*      Breadcrumb    */

.crumbs {
	.breadcrumb {
		display: inline-flex;
		padding: 8px;
		background-color: $color_6;
		li {
			font-size: 12px;
			a {
				color: $color_9;
				&:hover {
					text-decoration: none;
					color: $color_8;
				}
			}
			i {
				color: $color_7;
				padding: 0 5px;
				font-size: 12px;
				vertical-align: baseline;
			}
		}
		li.active {
			a {
				color: $color_4 !important;
			}
		}
	}
	.crumb-buttons {
		list-style: none;
		margin-right: 21px;
		margin-left: 0;
		height: 0;
		>li {
			font-size: 12px;
			border-right: 1px solid #d9d9d9;
			position: relative;
			&:first-child {
				border-left: 1px solid #d9d9d9;
			}
			>a {
				color: $color_9;
				text-decoration: none;
				white-space: nowrap;
				padding: 0 10px;
				line-height: 39px;
				display: inline-block;
				border-left: 1px solid #fff;
				border-right: 1px solid #fff;
				&:hover {
					background: #fff;
				}
				&:active {
					border-left: 1px solid transparent;
					border-right: 1px solid transparent;
					background: #ebebeb;
				}
				>i {
					padding-right: 5px;
				}
				>i.left-padding {
					padding-right: 0;
					padding-left: 5px;
				}
			}
			>i {
				padding-right: 5px;
			}
			>i.left-padding {
				padding-right: 0;
				padding-left: 5px;
			}
		}
		>li.first {
			border-left: 1px solid #d9d9d9;
		}
		>li.open {
			background: #fff;
		}
	}
}
.breadcrumb {
	>li+li {
		&:before {
			font-family: $font_family_1;
			font-weight: normal;
			font-style: normal;
			text-decoration: inherit;
			-webkit-font-smoothing: antialiased;
			content: "\f191";
			display: inline-block;
			padding-right: .5rem;
			padding-left: .5rem;
			color: $black;
			vertical-align: middle;
			font-size: 9px;
		}
	}
}
/*  Breadcrumb 2  */
.crumbs.breadcrumbs-style-2 {
	.breadcrumb {
		background-color: $color_none;
		padding: 0;
		>li+li {
			&:before {
				content: "\e9e2";
				vertical-align: sub;
				color: $dark;
			}
		}
		li {
			a {
				color: $dark;
				vertical-align: sub;
				display: inline-block;
			}
			&:not(:first-child) {
				a {
					color: $dark !important;
					border: 1px solid #4f5163;
					border-radius: 30px;
					padding: 3px 10px;
				}
			}
		}
		li.active {
			a {
				color: $white !important;
				background: #4f5163;
			}
		}
	}
	ul {
		li {
			a {
				i {
					border-radius: 50%;
					background-color: $dark;
					padding: 6px;
					color: $white;
				}
			}
		}
	}
}