//
// Tabs
// --------------------------------------------------

.widget {
	&.widget-tabs {
		border-color: @contentBorder;
		.tab-content { padding: 0; }
		> .widget-head {
			background: @widgetBg;
			border-color: @contentBorder;
			overflow: visible;
			ul {
				position: relative;
				overflow: visible;
				list-style: none;
				height: 35px;
				margin: 0;
				padding: 0;
				display: inline-block;
				li {
					height: 35px;
					line-height: 35px;
					float: left;
					display: block;
					border-right: 1px solid @contentBorder;
					a {
						width: auto; 
						height: 35px;
						display: block;
						padding: 0 15px;
						position: relative;
						overflow: hidden;
						color: #999;
						text-decoration: none;
						font-weight: 600;
						i:before { left: 5px; top: 5px; color: #eaeaea; }
						&.glyphicons { padding: 0 15px 0 35px; }
						.label.pull-right { margin-top: 9px; }
					}
					&.active {
						height: 36px;
						background: #fff;
						color: #505050;
						a { color: #505050; i:before { color: #505050; } }
						&:first-child { .rounded(5px,0,0,0); }
					}
				}
			}
		}
		> .widget-body {
			&.large { padding: 25px; }
		}
		@media (max-width: 991px) {
			&.widget-tabs-responsive {
				> .widget-head {
					height: auto;
					padding: 0;
					ul {
						display: block;
						height: auto;
						li {
							display: block;
							float: none;
							border-right: none;
							border-bottom: 1px solid @contentBorder;
							&:last-of-type {
								border-bottom: none;
							}
						}
					}
				}
			}
		}
	}
	&.widget-tabs-double {
		> .widget-head {
			height: 50px;
			ul {
				height: 50px;
				li, li.active {
					height: 50px;
					line-height: 25px;
					a {
						height: 50px;
						padding: 5px 0 0;
						span {
							display: block;
							line-height: 15px;
						}
						&.glyphicons {
							padding: 10px 15px 0 42px;
							i:before { left: 6px; top: 9px; font-size: 20px; }
						}
					}
				}
			}
		}
		@media (max-width: 991px) {
			> .widget-head {
				height: auto;
				ul {
					height: auto;
					li {
						display: block;
						float: none;
					}
				}
			}
		}
	}
	&.widget-tabs-double-2 {
		border: none;
		> .widget-head {
			border: 1px solid @contentBorder;
			border-bottom: none;
			height: 70px;
			&.border-bottom {
				border-bottom: 1px solid @contentBorder;
			}
			ul {
				height: 70px;
				li {
					height: 70px;
					line-height: 20px;
					a {
						height: 70px;
						padding: 5px 0 0;
						text-decoration: none;
						text-align: center;
						span {
							display: block;
							line-height: 30px;
						}
						&.glyphicons {
							padding: 0 15px;
							i {
								display: block;
								height: 37px;
								padding: 13px 0 0;
								line-height: 24px;
								text-align: center;
							}
							i:before { left: auto; top: auto; font-size: 24px; position: relative; }
						}
					}
					&.active { 
						height: 70px;
						background: @widgetBg;
						a { 
							color: @primaryColor;
							i:before { color: @primaryColor; } 
						}
					}
					&:hover {
						background: @widgetBg;
						height: 70px;
						a {
							color: @primaryColor;
							i:before { color: @primaryColor; } 
						}
					}
				}
			}
		}
		> .widget-body {
			padding: 0;
		}
		.widget-body-regular {
			padding: 10px;
			border: 1px solid @contentBorder;
			p:last-child { margin: 0; }
		}
		@media (max-width: 991px) {
			> .widget-head {
				height: auto;
				ul {
					height: auto;
					li {
						display: block;
						float: none;
					}
				}
			}
		}
	}

	&.widget-tabs-social-account {
		border: none;
		> .widget-head {
			
			border-bottom: none;
			height: 70px;
			
			ul {
				height: 70px;
				li {
					height: 70px;
					line-height: 20px;
					&:first-child.active{.rounded();}
					a {
						height: 70px;
						padding: 5px 0 0;
						text-decoration: none;
						text-align: center;
						font-weight: bold;
						span {
							display: block;
							line-height: 30px;
						}
						&.glyphicons {
							padding: 0 15px;
							i {
								display: block;
								height: 37px;
								padding: 13px 0 0;
								line-height: 24px;
								text-align: center;

							}
							i:before {color:#ccc; left: auto; top: auto; font-size: 24px; position: relative; }
						}

					}

					&.active { 
						height: 70px;
						
						background: @primaryColor;
						
						a { 
			
							color: #fff;

							i:before { color: #fff; } 

						}
					}
					&:hover {
						height: 70px;
						background: @primaryColor;
						a { 
							color: #fff;
							i:before { color: #fff; } 
						}
					}
				}
			}
		}
		> .widget-body {
			padding: 0;
		}
		.widget-body-regular {
			padding: 10px;
			border: 1px solid @contentBorder;
			p:last-child { margin: 0; }
		}
	}
	&.widget-tabs-vertical {
		.widget-head {
			border: none;
			height: auto;
			padding: 0;
			ul {
				display: block;
				height: auto;
				li {
					float: none;
					display: block;
					border-right: none;
					border-bottom: 1px solid @contentBorder;
					&:last-child { border: none; }
				}
			}
		}
		.widget-body {
			padding: 0;
			.tab-content { padding: 12px 15px; }
		}
	}
	&.widget-wizard-pills {
		.widget-head {
			height: 80px;
			padding: 10px 0;
			ul {
				height: 60px;
				li {
					height: 60px;
					line-height: 60px;
					color: @bodyText;
					padding: 0 0 0 10px;
					border: none;
					&.status {
						height: 45px;
						padding: 15px 15px 0;
						font-weight: 700;
						span.r {
							display: block;
							line-height: 15px;
						}
					}
					a {
						height: 58px;
						line-height: 60px;
						padding: 0;
						width: 58px;
						text-align: center;
						background: @contentBorder;
						border: 1px solid @contentBorder;
						color: #c8c8c8;
						font-weight: 700;
						font-size: 16pt;
						.rounded(5px,5px,5px,5px);
						position: relative;
						z-index: 2;
					}
					&.active {
						height: 60px;
						background: none;
						a {
							width: 60px;
							height: 58px;
							background: lighten(@contentBorder, 10%);
							// border: none; 
						} 
					}
					&.primary {
						a { 
							width: 60px;
							height: 58px;
							background: @primaryColor;
							border: none;
							color: #fff; 
						}
					}
					position: relative;
					&:not(:first-child):before {
						position: absolute;
						background: @contentBorder;
						height: 1px;
						left: 0;
						right: 0;
						top: 29px;
						display: block;
						content: "";
						z-index: 1;
					}
					&.no-padding { padding: 0; }
				}
			}
		}
		@media (max-width: 991px) {
			.widget-head {
				ul {
					li, li.active {
						padding: 10px;
						height: auto;
						a {
							width: auto;
						}
						&:before { display: none !important; }
					}
					li.active a { background: @primaryColor; color: #fff; }
					li.status {
						padding: 15px;
						height: auto;
					}
				}
			}
		}
	}
	&.widget-tabs-2 {
		border-bottom: 1px solid @contentBorder;
		&.border-bottom-none { border-bottom: none; }
		> .widget-head {
			background: #fff;
			border: none;
			border-bottom: 1px solid @contentBorder;
			padding: 0 10px;
			ul {
				border-color: @contentBorder;
				li {
					border: none;
					&.active {
						background-color: #f7f7f7;
					}
					a {
						border: 1px solid #dddddd;
						border-bottom: none;
						border-right: none;
						color: #222;
						text-transform: uppercase;
						font-weight: 700;
					}
					&:first-child a { .rounded(); }
				}
			}
		}
		> .widget-body { background: #fff; border: none; padding: 15px; }
	}
	&.tabs-right {
		.widget-head {
			ul { float: right; }
		}
	}
	&.widget-tabs-icons-only-2 {
		> .widget-head {
			ul li {
				a.glyphicons {
					width: 38px;
					padding: 0;
					i {
						width: 38px;
						display: block;
						line-height: 35px;
						&:before { width: 38px; text-align: center; left: auto; top: auto; position: relative; display: block; line-height: 35px; color: #cbcbcb; }
					}
				}
				&.active a.glyphicons i:before { color: #505050; }
			}
		}
	}
	&.widget-tabs-icons-only {
		.widget-body { 
			padding: 0;
			p:last-child { margin: 0; } 
		}
		.widget-head {
			padding: 0 0 10px;
			ul {
				display: block;
				overflow: hidden;
				position: relative;
				list-style: none;
				margin: 0;
				height: 30px;
				line-height: 30px;
				padding: 0;
				li {
					color: #dadada;
					float: left;
					display: block;
					padding: 0 10px 0 0;
					font-size: 8pt;
					line-height: 30px;
					&.glyphicons {
						width: 36px;
						height: 30px;
						padding: 0 3px;
						text-align: center;
						cursor: pointer;
						i {
							background: #e5e5e5; 
							display: block; 
							.rounded(2px,2px,2px,2px); 
							height: 30px; 
							position: relative;
							&:before { position: relative; top: 0; left: 0; color: #64625f; font-size: 17px; line-height: 30px; }
						}
						&:hover {
							i { background: #dedede; }
						}
						&.active {
							i {
								background: #64625f;
								&:before { color: #fff; } 
							}
						}
						&:last-child { padding: 0; }
					}
				}
			}
		}
		@media (max-width: 991px) {
			> .widget-head {
				height: auto;
				ul {
					height: auto;
					float: left !important;
				}
			}
		}
	}
}

// Tabsbar
// -------------------------

.tabsbar {
	height: 62px;
	border: 1px solid @contentBorder;
	position: relative;
	overflow: hidden;
	margin: 0 0 @spacing;
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		height: 60px;
		li {
			float: left;
			display: block;
			height: 60px;
			border-right: 1px solid @contentBorder;
			background: @contentGradient1;
			padding: 3px;
			&.glyphicons a i {
				display: inline-block;
				float: left;
				width: 39px;
				height: 54px;
				&:before {
					color: @bodyText;
					position: relative;
					top: auto;
					left: auto;
					line-height: 54px;
					text-align: center;
				}
			}
			a {
				display: block;
				height: 54px;
				line-height: 54px;
				background: @contentGradient1;
				padding: 0 15px;
				color: @bodyText;
				text-decoration: none;
				&.glyphicons {
					i {
						display: inline-block;
						float: left;
						width: 39px;
						height: 54px;
						&:before {
							color: @bodyText;
							position: relative;
							top: auto;
							left: auto;
							line-height: 54px;
							text-align: center;
						}
					}
				}
			}
			&.active {
				a {
					background: @primaryColor;
					color: #fff;
					i:before { color: #fff; }
				}
			}
		}
	}
	&.tabsbar-2 {
		height: 39px;
		ul {
			height: 39px;
			li {
				height: 39px;
				padding: 0;
				background: none;
				border: none;
				&.glyphicons a i {
					height: 39px;
					width: 33px;
					top: 0;
					&:before { line-height: 39px; font-size: 20px; }
				}
				a {
					height: 39px;
					line-height: 39px;
					background: none;
					i {
						vertical-align: middle;
						position: relative;
						top: -2px;
						font-size: 20px;
					}
					&.glyphicons i {
						height: 39px;
						width: 33px;
						top: 0;
						&:before { line-height: 39px; font-size: 20px; }
					}
				}
				&.active {
					background: @primaryColor;
					a {
						color: #fff;
						font-weight: 600;
						i:before { color: #fff; }
					}
				}
				&:not(.active):hover {
					a {
						color: @primaryColor;
						i:before { color: @primaryColor; }
					} 
				}
			}
		}
		&.active-fill {
			ul li.active a {
				background: @primaryColor;
				color: #fff;
				i:before { color: #fff; }
			}
		}
	}
	@media (max-width: 991px) {
		&, &.tabsbar-2 {
			height: auto;
			ul {
				height: auto;
				li {
					display: block;
					float: none;
					border-right: none;
					border-bottom: 1px solid @contentBorder;
					&:last-of-type { border-bottom: none; }
					&:after { display: none; }
				}
			}
		}
	}
}

.nav {
	&.nav-pills {
		a {
			background: @inverseColor;
			color: #fff;
			&:hover {
				color: #4b4b4b;
			}
		}
		> li.active {
			> a {
				background: @primaryColor;
			}
		}
	}
	&.nav-pills-gray {
		a {
			background: #efefef;
			color: #7c7c7c;
			&:hover {
				color: #4b4b4b;
			}
		}
	}
}
.tab-content { overflow: visible; padding: 0; }