$whbl-nav-col-bg: #ffffff; //f3f5f6
$whbl-sidebar-linkColor: #484848;
$whbl-primary-color: #1E96D0; //blue
$whbl-font-color: #16191c;

%skin-base {
	#header-navbar {
		background-color: $whbl-primary-color;
	}

	.navbar {
		.btn-nav {
			&:hover {
	      background-color: #1b86ba;
	    }
		}
	}

	.navbar > .container .navbar-brand {
		background-color: transparent;
		width: 221px;
	}
	#nav-col,
	#page-wrapper {
		background-color: $whbl-nav-col-bg;
	}
	#sidebar-nav .nav > li > a {
		color: $whbl-sidebar-linkColor;
		/* border-bottom: 1px solid #e7ebee; */
	}
	#sidebar-nav .nav > .open > .submenu > li > .submenu,
	#sidebar-nav .nav > .active > .submenu > li > .submenu,
	#sidebar-nav .nav li .submenu > li.open a,
	#nav-col-submenu .submenu > li > .submenu,
	#nav-col-submenu li .submenu > li.open > a {
	    background-color: darken($whbl-nav-col-bg, 8%);
	}
	.nav-pills > li.active > a,
	.nav-pills > li.active > a:hover,
	.nav-pills > li.active > a:focus,
	#sidebar-nav .nav-pills > li.active > a,
	#sidebar-nav .nav-pills > li.active > a:hover,
	#sidebar-nav .nav-pills > li.active > a:focus,
	.nav-pills > li.open > a,
	.nav-pills > li.open > a:hover,
	.nav-pills > li.open > a:focus,
	#sidebar-nav .nav-pills > li.open > a,
	#sidebar-nav .nav-pills > li.open > a:hover,
	#sidebar-nav .nav-pills > li.open > a:focus,
	#sidebar-nav .nav-pills > li > a:focus {
		background-color: darken($whbl-nav-col-bg, 4%);
		border-color: $whbl-primary-color;
		border-bottom-color: #e7ebee;
		color: $whbl-sidebar-linkColor;
	}
	#sidebar-nav .nav-pills > li.active > a > i {
		color: #2980b9;
	}
	#sidebar-nav .nav > li > a:hover {
		background-color: darken($whbl-nav-col-bg, 4%);
		border-color: $whbl-primary-color;
		border-bottom-color: #e7ebee;
		color: $whbl-sidebar-linkColor;
	}

	#sidebar-nav .nav > li .submenu li > a:hover {
		color: $whbl-font-color;
		font-weight: bold;
	}
	#header-navbar .nav > li > a {
		color: #fff;
	}
	#header-navbar .nav > li > a:hover,
	#header-navbar .nav > li > a:focus,
	#header-navbar .nav .open > a,
	#header-navbar .nav .open > a:hover,
	#header-navbar .nav .open > a:focus {
		background-color: #2980b9;
	}
	#sidebar-nav .nav li .submenu,
	#nav-col-submenu .submenu {
		background-color: darken($whbl-nav-col-bg, 4%);
	}
	#sidebar-nav .nav li .submenu > li > a,
	.nav-small #nav-col-submenu .submenu > li > a {
		color: $whbl-font-color;
	}
	#sidebar-nav .nav > .open > .submenu > .open > a,
	#sidebar-nav .nav > .active > .submenu > .open > a,
	#sidebar-nav .nav > .active > .submenu > .active > a,
	#nav-col-submenu .submenu > .open > a,
	#nav-col-submenu .submenu > .active > a {
		border-bottom-color: transparent;
	    box-shadow: 0 -1px 0 transparent inset;
	}
	#sidebar-nav .nav > .open > .submenu > .open > a {
	    border-bottom-color: #dcdfe6;
		box-shadow: none;
	}
	#sidebar-nav .nav li.open > a.dropdown-toggle > .drop-icon,
	#sidebar-nav .nav li.active > a.dropdown-toggle > .drop-icon {
		color: $whbl-font-color;
	}
	#sidebar-nav .nav li .submenu > li > a:hover,
	#sidebar-nav .nav li .submenu > li > a.active,
	#sidebar-nav .nav li .submenu > li.active > a {
		background-color: darken($whbl-nav-col-bg, 8%);
	}
	.navbar > .container .navbar-brand {
		color: #fff;
	}
	.navbar-toggle {
		color: #fff;
	}
	.graph-box {
		background-color: $whbl-primary-color !important;
	}
	.content-wrapper {
		background-color: #f9f9f9;
	  height: 100%;
	  margin-top: 0;
	  margin-bottom: 0;
	  position: relative;
	  min-height: 1200px;
	  padding: 15px 15px 35px 15px;
	  margin-left: 220px;
		// border-left: 2px solid #e7ebee;
	}
	#user-left-box {

		.user-box {
			color: $whbl-font-color;
			> a {
				color: $whbl-font-color;
			}
			> .name {
				> a {
					color: $whbl-font-color;

					&:hover, &:focus {
						color: $whbl-font-color;
					}
				}
			}
		}
		.user-box a:hover,
		.user-box a:focus {
			color: darken($whbl-font-color, 20%);
		}
	}
	#sidebar-nav .nav > li.nav-header {
		border-top-color: #e7ebee;
		color: darken($whbl-nav-col-bg, 35%);
	}
	.nav-tabs {
		background-color: #f9f9f9;
	}
	h1 {
		color: $whbl-primary-color;
	}
	#header-navbar .nav > li > a:hover,
	#header-navbar .nav > li > a:focus,
	#header-navbar .nav .open > a,
	#header-navbar .nav .open > a:hover,
	#header-navbar .nav .open > a:focus,
	.navbar-toggle:hover,
	.navbar-toggle:focus,
	.mobile-search.active > .btn {
		background-color: #2980b9;
	}
	.main-box {
		border: 1px solid $main-bg-color;
	}
	a,
	.fc-state-default,
	.jvectormap-zoomin,
	.jvectormap-zoomout,
	#user-profile .profile-details ul > li > span {
		color: $whbl-primary-color;
	}
	a:hover,
	a:focus,
	.widget-users li > .details > .name > a:hover,
	.widget-todo .actions > a:hover {
		color: $whbl-primary-color;
	}
	.table a.table-link:hover {
		color: #2980b9;
	}
	.pagination {
		> li {
			&.active {
				a {
					background-color: $whbl-primary-color;
					color: #FFF;
				}
			}
			> a {
				&:hover {
					background-color: $whbl-primary-color;
					color: #FFF;
				}
				background-color: #FFF;
				color: $whbl-primary-color;
			}
		}
	}
	.notifications-list {
		.item-footer {
			background-color: #272d33;

			a:hover {
				background-color: #0f1114;
			}
		}
	}
	.btn-primary,
	.btn-default,
	.btn-info,
	.btn-success,
	.btn-warning,
	.btn-danger,
	.btn-primary:hover,
	.btn-default:hover,
	.btn-info:hover,
	.btn-success:hover,
	.btn-warning:hover,
	.btn-danger:hover {
		color: #fff;
	}
	.btn-primary {
		background-color: $whbl-primary-color;
		border-color: #2980b9;
	}
	.btn-primary:hover,
	.btn-primary:focus,
	.btn-primary:active,
	.btn-primary.active,
	.open .dropdown-toggle.btn-primary {
		background-color: #2980b9;
		border-color: #216897;
	}
	.btn-success {
		background-color: $whbl-primary-color;
		border-color: #2980b9;
	}
	.btn-success:hover,
	.btn-success:focus,
	.btn-success:active,
	.btn-success.active,
	.open .dropdown-toggle.btn-success {
		background-color: #2980b9;
		border-color: #1c5c87;
	}
	h1 {
		color: $whbl-primary-color;
	}
	.widget-users li > .details > .time {
		color: $whbl-primary-color;
	}
	blockquote,
	blockquote.pull-right {
		border-color: $whbl-primary-color;
	}
	a.list-group-item.active,
	a.list-group-item.active:hover,
	a.list-group-item.active:focus {
		background-color: $whbl-primary-color;
		border-color: $whbl-primary-color;
	}
	.nav .caret {
		border-bottom-color: $whbl-primary-color;
		border-top-color: $whbl-primary-color;
	}
	.panel-default > .panel-heading,
	.notifications-list .item-footer {
		background-color: $whbl-primary-color;
	}
	.notifications-list .item-footer a:hover {
		background-color: #2980b9;
	}
	#invoice-companies .invoice-dates .invoice-number > span,
	.notifications-list .item a .time {
		color: $whbl-primary-color;
	}
	.table thead > tr > th > a:hover span {
		color: $whbl-primary-color;
		border-color: $whbl-primary-color;
	}
	.pace .pace-progress {
		background-color: #fff;
	}

    .ats-switch .knob {
		padding-right: 15px;
	}

	.ats-switch .glyphicon {
		top: 2px;
	}

	.ats-switch .switch-left {
		background-color: #41b941;
		font-weight: bold;
		color: white;
	}

	.ats-switch .switch-right {
		background-color: #ce3b3b;
		font-weight: bold;
		color: white;
	}

	/* Form overrides */
	.checkbox-nice {
		label:after {
			border-color: $whbl-primary-color;
		}
	}

}
.rtl.skin-whbl #content-wrapper {
	border-left: 0;
	border-right: 2px solid #e7ebee;
}

@media (max-width: $break-sm-max) {
	%skin-base {
		#logo.navbar-brand > img.normal-logo.logo-white {
			display: block;
		}
		#logo.navbar-brand > img.normal-logo.logo-black {
			display: none;
		}
		.navbar > .container .navbar-brand {
			background-color: $whbl-primary-color;
		}
	}
}

.skin-whbl {
	@extend %skin-base;
}