.uik_sticky_header {
	#header {
		&.is_sticky {
			@include phone {
				position: relative;
			}
			@include tabletP {
				position: fixed;
				left: 0;
				top: -#{$actionbar-height + $topbar-height};
				@include opacity (0.87);
				@include box-shadow (0 2px 5px var(--black-alpha1));
				@include transition(all 300ms ease);
				&:hover {
					@include opacity (1);
				}
			}
		}
	}
}

.uik_floating_header {
	#header {
		position: fixed;
		left: 0;
		top: 0px;
		@include box-shadow (0 2px 5px var(--black-alpha1));
		z-index: 9999;
	}
	#topBar {
		.menu_wrapper {
			.logo {
				img {
					@extend %transitionAll300;
				}
			}
			.logo-mini {
				img {
					@extend %transitionAll300;
					width: 30%;
				}
			}
		}
	}
}

#header {
	display: block;
	@extend %width100;
	position: relative;
	padding: 0;
	z-index: 998;
}

#actionBar {
	@extend %width100;
	min-height: #{$actionbar-height};
	position: relative;
	.ab_left,
	.ab_right {
		@extend %displayFlex;
		@include phone {
			align-items: center;
			justify-content: center;
			flex-direction: column;
			text-align: center;
		}
		@include tabletP {
			flex-direction: row;
		}
		> ul {
			// border-left: 1px solid var(--gray);
			> li {
				width: auto;
				position: relative;
				font-size: 14px;
				display: inline-block;
				text-transform: uppercase;
				vertical-align: middle;
				@include phone_and_tabletL {
					padding: 5px 0;
				}
				@include tabletP {
					padding: 10px 0;
					margin-left: -3px;
					&:first-child {
						margin-left: 0;
						a, button {
							border-left: 0;
						}
					}
				}
				> a,
				> button {
					text-decoration: none !important;
					transition: all 0.1s ease;
					font-weight: 500;
					display: block;
					@extend %fs12;
					@include phone_and_tabletL {
						padding: 0 5px;
					}
					@include tabletP {
						border-left-width: 1px;
						border-left-style: solid;
						padding: 0 10px;
					}
				}
				> .dropdown_list {
					width: fit-content;
					height: auto;
					position: absolute;
					top: 100%;
					z-index: 9999;
					border: 1px solid transparent;
					@include box-shadow(0px 2px 5px var(--black-alpha3));
					&.left {
						left: 0;
					}
					&.right {
						right: 0;
					}
					&.center {
						right: 0;
						left: 0;
						margin: auto;
					}
					li {
						> form > a,
						a {
							padding: 7px 10px !important;
							text-align:center !important;
						}
					}
				}
			}
		}
	}
	.ab_left {
		@include tabletP {
			text-align: left;
			float: left;
		}
	}
	.ab_right {
		@include tabletP {
			text-align: right;
			float: right;
		}
	}
	.responsive {
		.ab_left {
			@include phone {
				position: absolute;
				top: #{$topbar-height + $actionbar-height};
				left: -200px;
				width: 200px;
				z-index: 9999;
			}
			@include tabletL {
				position: inherit;
				top: inherit;
				left: inherit;
				width: auto;
				margin-right: -4px;
			}
		}
	}
	.responsive-menu {
		display: none;
	}
	.responsive ~ .responsive-menu {
		@extend %posAbsolute;
		top: 0;
		left: 0;
		font-size: 10px;
		line-height: 15px;
		padding: 12px 12px 11px 12px;
		z-index: 9999;
		@include phone {
			display: block;
		}
		@include tabletL {
			display: none;
		}
	}
}
#topBar {
	.menu_wrapper {
		position: relative;
		@extend %width100;
		.logo {
			position: relative;
			display: flex;
			@extend %height100;
			z-index: 3;
		}
		.menu {
			position: relative;
			z-index: 2;
			@extend %width100;
			@include phone {
				display: none;
			}
			@include tabletL {
				display: flex;
			}
			&.left {
				justify-content: flex-start;
			}
			&.center {
				justify-content: center;
			}
			&.right {
				justify-content: flex-end;
			}
			> ul {
				@extend %width100;
				> li {
					@include tabletL {
						display: inline-block;
						position: relative;
						margin-right: -4px;
						vertical-align: middle;
						> a {
							font-weight: 600;
							margin: 6px 0;
							padding: 0px 15px;
							text-align: center;
							border-left: 1px solid transparent;
							text-transform: uppercase;
							display: flex;
							&.cta {
								padding: 5px 20px;
								border-width: 1px;
								border-style: solid;
							}
						}
						&:first-child > a {
							border-left: 0;
						}
						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}
		.header-tools {
			@extend %p0;
			@extend %displayFlex;
			flex-direction: row;
			align-items: center;
			&.left {
				text-align: left;
				justify-content: flex-start;
				> .services-menu,
				> .toolBox,
				> .menu-services {
					justify-content: flex-start;
					li {
						text-align: left;
						float: left;
					}
				}
			}
			&.center {
				justify-content: center;
				> .services-menu,
				> .toolBox,
				> .menu-services {
					justify-content: center;
					li {
						display: inline-block;
					}
				}
			}
			&.right {
				text-align: right;
				justify-content: flex-end;
				> .services-menu,
				> .toolBox,
				> .menu-services {
					justify-content: flex-end;
					li {
						text-align: right;
						float: right;
					}
				}
			}
			> .services-menu {
				margin: 35px 0;
                li {
                    padding: 0 !important;
                    border-left: 1px solid var(--gray);
                    margin-left: 15px;
					line-height: 18px;
					@extend %displayFlex;
					flex-direction: row;
					align-items: center;
                    &:first-child {
						border-left: 0px;
						margin-left: 0px;
                    }
                    i {
                        padding: 0 5px;
                        font-size: 30px;
                        line-height: 37px;
                        color: var(--black-light);
                    }
                    a {
                        font-size: 18px;
                        background: none;
                        width: auto;
                        height: auto;
                        border-radius: 0;
                        color: var(--black-light);
                        text-align: left;
                        display:block;
                    }
                    .sub-text {
                        color: var(--gray-dark);
                        display: block;
                        font-weight: 300;
                        float: none;
                    }
                    &:first-child {
                        > a {
                            border-left: 0px;
                        }
                    }
                    &:hover {
                        a {
                            color: var(--blue-dark);
                        }
                    }
                }
            }
			> .toolBox {
				display: flex;
				align-items: center;
				li {
					margin-left: 10px;
					padding: 0;
					&:first-child {
						margin-left: 0px;
					}
					a, button {
						color: var(--blue);
						background: var(--gray);
						text-align: center;
						width: fit-content;
						height: auto;
						@extend %noShadow;
						@extend %themeRadius;
						i {
							font-size: 21px;
							padding: 4px 0 5px 0;
						}
						> span {
							font-weight: 700;
						}
						> .notif-count {
							top: -4px;
							right: -4px;
						}
					}
					&.with-detail {
						a {
							padding: 0 15px;
							width: auto;
							border-radius: 40px;
							i,
							> span {
								@extend %pullLeft;
								padding: 4px 0 5px 0;
								line-height: 30px;
							}
						}
					}
				}
				&.rounded {
					li {
						a, button {
							width: 40px;
							height: 40px;
							display: block;
							border-radius: 50%;
						}
					}
				}
				.keywordSearch {
					.quicksearch-container {
						@extend %width100;
						@include phone_and_tabletL {
							position: absolute;
							left: 0;
							top: 100%;
							padding: 10px;
							background-color: var(--blue-dark);
							margin: 0;
							display: none;
						}
						@include tabletL {
							padding: 0;
							background: none;
							display: block !important;
						}
					}
					.search-responsive {
						text-align: center;
						padding: 7px;
						width: 45px;
						height: 45px;
						@include phone {
							display: block;
						}
						@include tabletL {
							display: none;
						}
					}
				}
				> .menu-services {
					height: 80px;
					margin: 0 0 0 20px;
					li {
						text-align: right;
						padding: 0 !important;
						> a {
							border-left: 1px solid transparent;
							padding: 25px 27px;
							margin: 0;
							font-size: 20px;
						}
						> a.dropdown_btn {
							font-size: 20px;
							line-height: 30px;
						}
						> a[href=''] {
							font-size: 12px;
							line-height: 30px;
						}
						&:first-child {
							> a {
								border-left: 0px;
							}
						}
					}
					.avatar {
						width: 50px;
						height: 50px;
						margin: 15px 10px 0 0;
						img {
							width: 44px;
							height: 44px;
						}
					}
					&.title_below_icon {
						li {
							> a {
								@extend %b1;
								padding: 14px 27px 34px 27px;
								span {
									@extend %posAbsolute;
									left: 0;
									bottom: 20px;
									font-size: 11px;
									@extend %width100;
									text-align: center;
								}
							}
						}
					}
				}
			}
		}
		.responsive-menu {
			width: 45px;
			height: 45px;
			@extend %posAbsolute;
			right: 0px;
			top: 0;
			bottom: 0;
			text-align: center;
			padding: 7px;
			margin: auto;
			@include phone {
				display: block;
			}
			@include tabletL {
				display: none;
			}
		}
	}
	&.classic {
		.menu_wrapper {
			@extend %displayFlex;
			align-items: center;
			.logo {
				margin-right: 20px;
				@extend %pullLeft;
				width: 185px;
			}
			.menu {
				@extend %width100;
				// padding: 26px 0px;
				&.left {
					margin-right: auto;
				}
				&.right {
					margin-left: auto;
				}
			}
		}
		&.left {
			.menu_wrapper {
				.logo {
					@extend %pullLeft;
				}
				.menu {
					@include tabletL {
						float: left;
						text-align: left;
					}
				}
			}
		}
		&.right {
			.menu_wrapper {
				.logo {
					@extend %pullRight;
				}
				.menu {
					@include tabletL {
						float: right;
						text-align: right;
					}
				}
			}
		}
	}
	&.stack {
		&.left {
			.menu_wrapper {
				.logo {
					@include tabletL{
						float: left;
						img,
						svg {
							text-align: left;
						}
					}
				}
				.menu {
					@include tabletL{
						width: 100%;
						float: left;
						text-align: left;
						> ul {
							margin: 0;
							> li {
								padding: 10px 0;
							}
						}
					}
				}
			}
		}
		&.right {
			.menu_wrapper {
				.logo{
					@include tabletL{
						float: right;
						img,
						svg {
							text-align: right;
						}
					}
				}
				.menu {
					@include tabletL{
						width: 100%;
						float: right;
						text-align: right;
						> ul {
							margin: 0;
							> li {
								padding: 10px 0;
							}
						}
					}
				}
			}
		}
		&.center {
			.menu_wrapper {
				.logo {
					@include tabletL {
						width: 20%;
						float: none;
						margin: auto;
						text-align: center;
					}
				}
				.menu {
					@include tabletL {
						width: 100%;
						float: none;
						text-align: center;
						> ul {
							margin: 0;
							> li {
								padding: 10px 0;
							}
						}
					}
				}
			}
		}
	}
	&.magazine {
		.logo {
			@include phone {
				width: 70%;
			}
			@include phoneL {
				width: 40%;
			}
			@include tabletL {
				width: 245px;
			}
		}
		.header-tools {
			@include phone_and_tabletL {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 0;
			}
			@include tabletL {
				width: calc(100% - 265px);
				> .toolBox {
					li {
						padding: 15px 0px;
					}
				}
			}
			@include phone_and_tabletL {
				display: flex;
				align-items: center;
				margin: 2px 0;
			}
		}
		.menu {
			@include tabletL {
				width: 100%;
				> ul {
					> li {
						padding: 6px 0;
					}
				}
			}
			@include desktop {
				width: calc(100% - 265px);
			}
		}
		&.left {
			.menu_wrapper {
				.logo {
					margin-right: 20px;
					@extend %pullLeft;
				}
				.header-tools {
					@extend %pullLeft;
				}
				.menu {
					&.center {
						@extend %pullLeft;
					}
				}
			}
		}
		&.right {
			.menu_wrapper {
				.logo {
					margin-left: 20px;
					@extend %pullRight;
				}
				.header-tools {
					@extend %pullRight;
				}
				.menu {
					&.center {
						@extend %pullRight;
					}
				}
			}
		}
	}
}

.menu_wrapper_slide {
	@include phone_and_tabletL {
		position: fixed;
		top: 0px;
		right: -250px;
		width: 250px;
		height: 100vh;
		z-index: 99999;
		.menu {
			overflow: hidden;
			overflow-y: scroll;
			height: 100%;
			margin-right: -17px;
			display: block;
			li {
				width: 100%;
				display: block;
				padding: 0px;
				text-align: center !important;
				font-size: 12px;
				border-bottom: 1px solid transparent;
				margin: 0 !important;
				> a {
					border-left: 0;
					padding: 10px;
					display: block;
					font-weight: 600;
					text-align: center;
					&.cta {
						width: 100%;
						border: 0;
						box-shadow: none;
					}
				}
			}
		}
		#close_menu {
			padding: 7px 0px;
			text-align: center;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 38px;
			height: 38px;
			font-size: 22px;
			line-height: 10px;
			opacity: 0;
			visibility: hidden;
			transition: left 0.5s ease;
		}
		&.open {
			#close_menu {
				opacity: 1;
				left: -38px;
				visibility: visible;
			}
		}
	}
	@include tabletL {
		display: none;
	}
}

#subHeader {
	text-align: center;
	padding: 60px 0;
	display: block;
	@extend %width100;
	position: relative;
	h3 {
		font-weight: 400;
	}
}

.breadcrumb {
	display: flex;
	justify-content: flex-end;
	text-align: right;
	font-size: 11px;
	padding: 10px 0;
	> li {
        text-transform: uppercase;
		display: flex;
		align-items: center;
		color: #444;
		padding: 0 7px;
		margin-left: 10px;
		@extend %posRelative;
		&:before {
			content: '>\00a0';
			position: absolute;
			top: -2px;
			left: -9px;
			font-size: 15px;
			color: #444;
		}
        &:first-child {
			margin-left: 0;
            &:before {
                display: none;
            }
		}
        > a {
			font-size: 13px;
			color: var(--black-light);
            text-transform: uppercase;
            font-weight: bold;
            text-decoration: none;
			display: flex;
			> i {
				margin-right: 5px
			}
        }
    }
}


.navbar {
	position: relative;
	min-height: 50px;
	.nav {
		padding-left: 0;
		margin-bottom: 0;
		list-style: none;
		> li {
			position: relative;
			> a {
				position: relative;
				padding: 10px 15px;
				line-height: 30px;
				> .label {
					@extend %posAbsolute;
					top: 9px;
					right: 7px;
					text-align: center;
					font-size: 9px;
					padding: 2px 3px;
					line-height: .9;
				}
				> img {
					max-width: none;
				}
			}
			&:hover,
			&:focus {
				a {
					background: none;
				}
			}
		}
		&:before {
			display: table;
			content: " ";
		}
		&:after {
			display: table;
			content: " ";
			clear: both
		}
		.nav-divider {
			height: 1px;
			margin: 9px 0;
			overflow: hidden;
			background-color: #e5e5e5;
		}
		.open {
			> a {
				&:hover,
				&:focus {
					background-color: #eee;
					border-color: #428bca;
				}
			}
		}
	}
	.navbar-nav {
		font-size: 12px;
		text-transform: none;
		> li {
			> a {
				padding-top: 10px;
				padding-bottom: 10px;
				line-height: 20px;
				color: #fff;
				@include tabletP {
					padding: 15px 25px;
				}
				&:focus,
				&:hover {
					color: #fff;
					outline: 0;
					text-decoration: underline;
					i {
						color: #fff;
					}
				}
				i {
					line-height: 35px;
					color: #aaa;
				}
			}
			.dropdown-menu {
				margin-top: 0;
				border-top-left-radius: 0;
				border-top-right-radius: 0;
				a {
					padding-top: 5px;
					padding-bottom: 5px;
					border-bottom: 1px solid #999;
					font-size: 12px;
				}
			}
			&.active {
				a {
					border-right: 1px dotted #fff;
					color: #000;
				}
				.dropdown-menu {
					a {
						background: #151515;
						color: #999;
						border-bottom: 1px solid #999;
						&:focus,
						&:hover {
							background: #f8f8f8;
							color: #9d426b;
							border: 0
						}
					}
				}
			}
		}
		.open {
			.dropdown-menu {
				@include phone_and_tabletL {
					position: static;
					float: none;
					width: auto;
					margin-top: 0;
					background-color: transparent;
					border: 0;
					-webkit-box-shadow: none;
					box-shadow: none;
				}
				> li {
					> a {
						padding: 5px 15px 5px 25px;
						line-height: 20px;
						&:focus,
						&:hover {
							background-image: none
						}
					}
				}
			}
			.dropdown-header {
				padding: 5px 15px 5px 25px
			}
		}
		> .user-menu {
			.user-image {
				@extend %pullLeft;
				width: 25px;
				height: 25px;
				border-radius: 50%;
				margin-right: 10px;
				margin-top: -2px;
				@include phone_and_tabletL {
					float: none;
					margin-right: 0;
					margin-top: -8px;
					line-height: 10px
				}
			}
			> .dropdown-menu {
				width: 280px;
				> li {
					&.user-header {
						height: 175px;
						padding: 10px;
						text-align: center;
						> img {
							z-index: 5;
							height: 90px;
							width: 90px;
							border: 3px solid;
							border-color: rgba(255, 255, 255, 0.2);
						}
						> p {
							z-index: 5;
							color: #fff;
							font-size: 17px;
							margin-top: 10px;
							> small {
								display: block;
								font-size: 12px
							}
						}
					}
					&.user-body {
						padding: 15px;
						border-bottom: 1px solid #d7d7d7;
						border-top: 1px solid #dddddd;
						&:before,
						&:after {
							content: " ";
							display: table
						}
						&:after {
							clear: both
						}
						a {
							color: #444;
							@include phone_and_tabletL {
								background: #fff !important;
							}
						}
					}
					&.user-footer {
						background-color: #222;
						padding: 10px;
						&:before,
						&:after {
							content: " ";
							display: table
						}
						&:after {
							clear: both
						}
					}
				}
			}
		}
		> .notifications-menu,
		> .messages-menu,
		> .tasks-menu {
			> .dropdown-menu {
				width: 280px;
				padding: 0 0 0 0;
				margin: 0;
				top: 100%;
				> li {
					position: relative;
					&.header {
						border-top-left-radius: 4px;
						border-top-right-radius: 4px;
						border-bottom-right-radius: 0;
						border-bottom-left-radius: 0;
						background-color: #ffffff;
						padding: 7px 10px;
						border-bottom: 1px solid #d7d7d7;
						color: #444444;
						font-size: 14px;
					}
					&.footer {
						> a {
							border-top-left-radius: 0;
							border-top-right-radius: 0;
							border-bottom-right-radius: 4px;
							border-bottom-left-radius: 4px;
							font-size: 12px;
							background-color: #fff;
							padding: 7px 10px;
							border-bottom: 1px solid #eeeeee;
							color: #444 !important;
							text-align: center;
							&:hover {
								text-decoration: none;
								font-weight: normal
							}
							@include phone_and_tabletL {
								background: #fff !important;
								color: #444 !important;
							}
						}
					}
					.menu {
						max-height: 200px;
						margin: 0;
						padding: 0;
						list-style: none;
						overflow-x: hidden;
						li {
							> a {
								display: block;
								white-space: nowrap;
								border-bottom: 1px solid #d7d7d7;
								color: #444444;
								overflow: hidden;
								text-overflow: ellipsis;
								padding: 10px;
								&:hover {
									background: #d7d7d7;
									text-decoration: none;
								}
							}
						}
					}
				}
			}
		}
	}
}

.navbar-default {
    background-color: #f8f8f8;
	border-color: #e7e7e7;
	.navbar-brand {
		color: #777;
		&:hover,
		&:focus {
			color: #5e5e5e;
			background-color: transparent
		}
	}
	.navbar-text {
		color: #777
	}
	.navbar-nav {
		> li {
			> a {
				color: #777;
				&:hover,
				&:focus {
					color: #333;
					background-color: transparent;
				}
			}
			&.active {
				> a,
				> a:hover,
				> a:focus {
					color: #555;
					background-color: #e7e7e7;
				}
			}
			&.disabled {
				> a,
				> a:hover,
				> a:focus {
					color: #ccc;
					background-color: transparent;
				}
			}
			&.open {
				> a,
				> a:focus,
				> a:hover {
					color: #555;
					background-color: #e7e7e7
				}
				.dropdown-menu {
					> li {
						> a {
							@include phone_and_tabletL {
								color: #777;
								&:hover,
								&:focus {
									color: #333;
									background-color: transparent
								}
							}
						}
						&.active {
							@include phone_and_tabletL {
								> a,
								> a:hover,
								> a:focus {
									color: #555;
									background-color: #e7e7e7;
								}
							}
						}
						&.disabled {
							@include phone_and_tabletL {
								> a,
								> a:hover,
								> a:focus {
									color: #ccc;
									background-color: transparent;
								}
							}
						}
					}
				}
			}
		}
	}
	.navbar-toggle {
		border-color: #ddd;
		&:hover,
		&:focus {
			background-color: #ddd;
		}
		.icon-bar {
			background-color: #888;
		}
	}
	.navbar-collapse,
	.navbar-form {
		border-color: #e7e7e7
	}
	.navbar-link {
		color: #777;
		&:hover {
			color: #333
		}
	}
	.btn-link {
		color: #777;
		&:hover,
		&:focus {
			color: #333
		}
	}
}

.navbar-right {
	@extend %pullRight;
	@include phone_and_tabletP {
		float: none;
		> li {
			color: inherit;
			border: 0
		}
	}
	@include phone_and_tabletL {
		a {
			color: inherit;
			background: transparent
		}
	}
	@include tabletP {
		.dropdown-menu {
			right: 0;
			left: auto;
		}
		.dropdown-menu-left {
			right: auto;
			left: 0;
		}
	}
}

#navbar-search-input {
	&.form-control {
		background: rgba(255, 255, 255, 0.2);
		border-color: transparent;
		&:focus,
		&:active {
			border-color: rgba(0, 0, 0, 0.1);
			background: rgba(255, 255, 255, 0.9)
		}
	}
}

.navbar-custom-menu {
	@extend %pullRight;
	.navbar-nav {
		> li {
			position: relative;
			@include tabletL {
				float: left;
			}
			> a {
				@include tabletL {
					padding-top: 15px;
					padding-bottom: 15px;
					line-height: 20px
				}
			}
		}
		@include phone_and_tabletL {
			margin: 0;
			float: left;
		}
	}
	@include phone_and_tabletL {
		float: right;
		a {
			color: inherit;
			background: transparent
		}
	}
}

@media (max-width:991px) {
    .navbar-collapse.pull-left {
        float: none !important
    }
    .navbar-collapse.pull-left+.navbar-custom-menu {
        display: block;
        position: absolute;
        top: 0;
        right: 40px
    }
}

.navbar-header {
	margin-right: -15px;
    margin-left: -15px;
	@include tabletP {
		float: left;
		margin-right: 0;
    	margin-left: 0;
    }
}


.navbar-collapse {
	margin-right: -15px;
    margin-left: -15px;
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
	&.in {
		overflow-y: auto
	}
	.navbar-right {
		@include phone_and_tabletL {
			margin: 7.5px -15px
		}
	}
	@include tabletP {
		width: auto;
		border-top: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
		margin-right: 0;
    	margin-left: 0;
		&.collapse {
			display: block !important;
			height: auto !important;
			padding-bottom: 0;
			overflow: visible !important
		}
		&.in {
			overflow-y: visible
		}
	}
}

.navbar-static-top {
    z-index: 1000;
	border-width: 0 0 1px;
	@include tabletP {
        border-radius: 0;
    }
}
.navbar-fixed-bottom,
.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
	z-index: 1030;
	@include tabletP {
		border-radius: 0;
	}
	.navbar-collapse {
		@include phone {
			max-height: 200px
		}
		@include tabletP {
			max-height: 340px;
		}
	}
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px
}
.navbar-fixed-bottom {
    bottom: 0;
    margin-bottom: 0;
    border-width: 1px 0 0
}
.navbar-fixed-bottom,
.navbar-fixed-top,
.navbar-static-top {
	.navbar-collapse {
		padding-right: 0;
		padding-left: 0
	}
}

.navbar-brand {
    @extend %pullLeft;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
	line-height: 20px;
	color: #fff;
	@include tabletP {
		margin-left: -15px;
	}
	&:focus,
	&:hover {
		text-decoration: none;
	}
	> img {
		display: block;
	}
}

.navbar-toggle {
    position: relative;
    @extend %pullRight;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
	border-radius: 4px;
	@include tabletP {
		display: none
	}
	&:focus {
		outline: 0
	}
	.icon-bar {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 1px;
		+ .icon-bar {
			margin-top: 4px
		}
	}
}

.nav-pills {
	> li {
		@extend %pullLeft;
		+ li {
			margin-left: 2px
		}
		a {
			border-radius: 4px
		}
		&.active {
			> a,
			> a:focus,
			> a:hover {
				color: var(--white);
				background-color: #337ab7
			}
		}
	}
}

.nav-tabs {
	> li {
		> a {
			@extend %width100;
			padding: 7px 10px;
			border: 1px solid transparent;
			background: var(--gray);
			font-family: var(--muli-bold);
		}
		&:hover {
			a {
				border-color: var(--gray-dark);
			}
		}
		&.active {
			> a,
			> a:focus,
			> a:hover {
				color: #555;
				background-color: var(--white);
				border-bottom-color: transparent;
			}
		}
	}
	&.nav-justified {
		@extend %width100;
		border-bottom: 0;
		> li {
			float: none;
			@include tabletP {
				display: table-cell;
				width: 1%;
			}
			> a {
				margin-bottom: 5px;
				text-align: center;
				margin-right: 0;
				border-radius: 4px;
				@include tabletP {
					border-bottom: 1px solid #ddd;
					border-radius: 4px 4px 0 0;
					margin-bottom: 0
				}
			}
			&.active {
				> a,
				> a:focus,
				> a:hover {
					border: 1px solid #ddd;
					@include tabletP {
						border-bottom-color: #fff
					}
				}
			}
		}
		> .dropdown {
			.dropdown-menu {
				top: auto;
				left: auto
			}
		}
	}
}

.nav-tabs-custom {
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	> .nav-tabs {
		margin: 0;
		border-bottom-color: #d7d7d7;
		border-top-right-radius: 3px;
		border-top-left-radius: 3px;
		> li {
			border-top: 3px solid transparent;
			margin-bottom: -2px;
			margin-right: 5px;
			> a {
				color: #444;
				border-radius: 0;
				background: transparent;
				margin: 0;
				&:hover {
					background: transparent;
					margin: 0;
					color: #999;
				}
				img {
					vertical-align: top;
				}
			}
			&:not(.active) {
				> a:hover,
				> a:focus,
				> a:active {
					border-color: transparent;
				}
			}
			&:hover {
				> a {
					background-color: #fff;
					color: #444
				}
			}
			&.active {
				border-top-color: var(--blue-light);
				> a {
					background-color: #fff;
					color: #444;
					border-top-color: transparent;
					border-left-color: #d7d7d7;
					border-right-color: #d7d7d7;
				}
			}
			&:first-of-type {
				margin-left: 0;
				.active {
					> a {
						border-left-color: transparent
					}
				}
			}
			&.header {
				line-height: 35px;
				padding: 0 10px;
				font-size: 20px;
				color: #444
			}
		}
		&.pull-right {
			float: none !important;
			> li {
				@extend %pullRight;
				&:first-of-type {
					margin-right: 0;
					> a {
						border-left-width: 1px
					}
					&.active {
						> a {
							border-left-color: #d7d7d7;
							border-right-color: transparent
						}
					}
				}
			}
		}
	}
	&.tab-default {
		> .nav-tabs {
			> li {
				&.active {
					border-top-color: var(--default-light)
				}
			}
		}
	}
	&.tab-primary {
		> .nav-tabs {
			> li {
				&.active {
					border-top-color: var(--primary-light)
				}
			}
		}
	}
	&.tab-info {
		> .nav-tabs {
			> li {
				&.active {
					border-top-color: var(--info-light)
				}
			}
		}
	}
	&.tab-danger {
		> .nav-tabs {
			> li {
				&.active {
					border-top-color: var(--danger-light)
				}
			}
		}
	}
	&.tab-warning {
		> .nav-tabs {
			> li {
				&.active {
					border-top-color: var(--warning-light)
				}
			}
		}
	}
	&.tab-success {
		> .nav-tabs {
			> li {
				&.active {
					border-top-color: var(--success-light)
				}
			}
		}
	}
	.dropdown {
		&.open {
			> a {
				&:active,
				&:focus {
					background: transparent;
					color: #999
				}
			}
		}
	}
}

.nav-stacked {
	> li {
		float: none;
		> a {
			border-radius: 0;
			border-top: 0;
			border-left: 3px solid transparent;
			color: #444
		}
		+ li {
			margin-top: 2px;
			margin-left: 0;
		}
		&.active {
			> a,
			> a:hover {
				background: transparent;
				color: #444;
				border-top: 0;
				border-left-color: var(--blue-light)
			}
		}
		&.header {
			border-bottom: 1px solid #ddd;
			color: #777;
			margin-bottom: 10px;
			padding: 5px 10px;
			text-transform: uppercase
		}
	}
}

.nav-justified {
    @extend %width100;
	> li {
		float: none;
		@include tabletP {
			display: table-cell;
			width: 1%;
		}
		> a {
			margin-bottom: 5px;
			text-align: center;
			@include tabletP {
				margin-bottom: 0;
			}
		}
	}
	> .dropdown {
		.dropdown-menu {
			top: auto;
			left: auto
		}
	}
}

.nav-tabs-justified {
	border-bottom: 0;
	> li {
		> a {
			margin-right: 0;
			border-radius: 4px;
			@include tabletP {
				border-bottom: 1px solid #ddd;
				border-radius: 4px 4px 0 0;
			}
		}
		&.active {
			> a,
			> a:focus,
			> a:hover {
				border: 1px solid #ddd;
				@include tabletP {
					border-bottom-color: #fff
				}
			}
		}
	}
}

.tab-content {
	background: #fff;
	padding: 10px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	&:first-child {
		display: block
	}
	> .tab-pane {
		display: none;
		&.active {
			display: block
		}
	}
	.dropdown-menu {
		margin-top: -1px;
		border-top-left-radius: 0;
		border-top-right-radius: 0
	}
	ul {
		&.list {
			li {
				&.type-1 {
					vertical-align: top;
					position: relative;
					width: 46%;
					display: inline-block;
					padding-left: 10px;
					&:before {
						content: '';
						@extend %posAbsolute;
						left: 0;
						top: 10px;
						width: 3px;
						height: 3px;
						background-color: #ff600a
					}
					&:nth-child(2n-1) {
						margin-right: 4%
					}
				}
			}
			.description {
				margin-top: 0;
				margin-left: 12px
			}
		}
	}
	p {
		margin: 1em 0
	}
}

.tab-content-entry {
    display: none
}

.tab-content-list {
    display: none
}


.navbar-btn {
    margin-top: 8px;
    margin-bottom: 8px
}

.navbar-btn.btn-sm {
    margin-top: 10px;
    margin-bottom: 10px
}

.navbar-btn.btn-xs {
    margin-top: 14px;
    margin-bottom: 14px
}

.navbar-text {
    margin-top: 15px;
    margin-bottom: 15px
}

@media(min-width:768px) {
    .navbar-text {
        float: left;
        margin-right: 15px;
        margin-left: 15px
    }
    .navbar-text.navbar-right:last-child {
        margin-right: 0
    }
}

.navbar-toggle {
    color: #fff;
    border: 0;
    margin: 0;
    padding: 15px 15px
}

// .navbar-form {
//     padding: 10px 15px;
//     margin-top: 8px;
//     margin-right: -15px;
//     margin-bottom: 8px;
//     margin-left: -15px;
//     border-top: 1px solid transparent;
//     border-bottom: 1px solid transparent;
//     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
//     box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1)
// }

// @media (min-width:768px) {
//     .navbar-form .form-group {
//         display: inline-block;
//         margin-bottom: 0;
//         vertical-align: middle
//     }

//     .navbar-form .form-control {
//         display: inline-block;
//         width: auto;
//         vertical-align: middle
//     }

//     .navbar-form .form-control-static {
//         display: inline-block
//     }

//     .navbar-form .input-group {
//         display: inline-table;
//         vertical-align: middle
//     }

//     .navbar-form .input-group .form-control,
//     .navbar-form .input-group .input-group-addon,
//     .navbar-form .input-group .input-group-btn {
//         width: auto
//     }

//     .navbar-form .input-group>.form-control {
//         width: 100%
//     }

//     .navbar-form .control-label {
//         margin-bottom: 0;
//         vertical-align: middle
//     }

//     .navbar-form .checkbox,
//     .navbar-form .radio {
//         display: inline-block;
//         margin-top: 0;
//         margin-bottom: 0;
//         vertical-align: middle
//     }

//     .navbar-form .checkbox label,
//     .navbar-form .radio label {
//         padding-left: 0
//     }

//     .navbar-form .checkbox input[type=checkbox],
//     .navbar-form .radio input[type=radio] {
//         position: relative;
//         margin-left: 0
//     }

//     .navbar-form .has-feedback .form-control-feedback {
//         top: 0
//     }
// }

// @media (max-width:767px) {
//     .navbar-form .form-group {
//         margin-bottom: 5px
//     }

//     .navbar-form .form-group:last-child {
//         margin-bottom: 0
//     }
// }

// @media (min-width:768px) {
//     .navbar-form {
//         width: auto;
//         padding-top: 0;
//         padding-bottom: 0;
//         margin-right: 0;
//         margin-left: 0;
//         border: 0;
//         -webkit-box-shadow: none;
//         box-shadow: none
//     }
// }



// .navbar-fixed-bottom .navbar-nav>li>.dropdown-menu {
//     margin-bottom: 0;
//     border-top-left-radius: 4px;
//     border-top-right-radius: 4px;
//     border-bottom-right-radius: 0;
//     border-bottom-left-radius: 0
// }

// .navbar-btn {
//     margin-top: 8px;
//     margin-bottom: 8px
// }

// .navbar-btn.btn-sm {
//     margin-top: 10px;
//     margin-bottom: 10px
// }

// .navbar-btn.btn-xs {
//     margin-top: 14px;
//     margin-bottom: 14px
// }

// .navbar-text {
//     margin-top: 15px;
//     margin-bottom: 15px
// }

// @media (min-width:768px) {
//     .navbar-text {
//         float: left;
//         margin-right: 15px;
//         margin-left: 15px
//     }
// }

// @media (min-width:768px) {
//     .navbar-left {
//         float: left !important
//     }

//     .navbar-right {
//         float: right !important;
//         margin-right: -15px
//     }

//     .navbar-right~.navbar-right {
//         margin-right: 0
//     }
// }

// .navbar-default .btn-link[disabled]:focus,
// .navbar-default .btn-link[disabled]:hover,
// fieldset[disabled] .navbar-default .btn-link:focus,
// fieldset[disabled] .navbar-default .btn-link:hover {
//     color: #ccc
// }

// .navbar-inverse {
//     background-color: #222;
//     border-color: #080808
// }

// .navbar-inverse .navbar-brand {
//     color: #9d9d9d
// }

// .navbar-inverse .navbar-brand:focus,
// .navbar-inverse .navbar-brand:hover {
//     color: #fff;
//     background-color: transparent
// }

// .navbar-inverse .navbar-text {
//     color: #9d9d9d
// }

// .navbar-inverse .navbar-nav>li>a {
//     color: #9d9d9d
// }

// .navbar-inverse .navbar-nav>li>a:focus,
// .navbar-inverse .navbar-nav>li>a:hover {
//     color: #fff;
//     background-color: transparent
// }

// .navbar-inverse .navbar-nav>.active>a,
// .navbar-inverse .navbar-nav>.active>a:focus,
// .navbar-inverse .navbar-nav>.active>a:hover {
//     color: #fff;
//     background-color: #080808
// }

// .navbar-inverse .navbar-nav>.disabled>a,
// .navbar-inverse .navbar-nav>.disabled>a:focus,
// .navbar-inverse .navbar-nav>.disabled>a:hover {
//     color: #444;
//     background-color: transparent
// }

// .navbar-inverse .navbar-toggle {
//     border-color: #333
// }

// .navbar-inverse .navbar-toggle:focus,
// .navbar-inverse .navbar-toggle:hover {
//     background-color: #333
// }

// .navbar-inverse .navbar-toggle .icon-bar {
//     background-color: #fff
// }

// .navbar-inverse .navbar-collapse,
// .navbar-inverse .navbar-form {
//     border-color: #101010
// }

// .navbar-inverse .navbar-nav>.open>a,
// .navbar-inverse .navbar-nav>.open>a:focus,
// .navbar-inverse .navbar-nav>.open>a:hover {
//     color: #fff;
//     background-color: #080808
// }

// @media (max-width:767px) {
//     .navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header {
//         border-color: #080808
//     }

//     .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
//         background-color: #080808
//     }

//     .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
//         color: #9d9d9d
//     }

//     .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,
//     .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
//         color: #fff;
//         background-color: transparent
//     }

//     .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,
//     .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus,
//     .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover {
//         color: #fff;
//         background-color: #080808
//     }

//     .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,
//     .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus,
//     .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover {
//         color: #444;
//         background-color: transparent
//     }
// }

// .navbar-inverse .navbar-link {
//     color: #9d9d9d
// }

// .navbar-inverse .navbar-link:hover {
//     color: #fff
// }

// .navbar-inverse .btn-link {
//     color: #9d9d9d
// }

// .navbar-inverse .btn-link:focus,
// .navbar-inverse .btn-link:hover {
//     color: #fff
// }

// .navbar-inverse .btn-link[disabled]:focus,
// .navbar-inverse .btn-link[disabled]:hover,
// fieldset[disabled] .navbar-inverse .btn-link:focus,
// fieldset[disabled] .navbar-inverse .btn-link:hover {
//     color: #444
// }