/* ========================================================================
   PASS Skins
   Colour themes only. Layout and modern component styling lives elsewhere.
   ======================================================================== */

:root {
	--skin-blue: #3c8dbc;
	--skin-blue-dark: #367fa9;
	--skin-green: #00a65a;
	--skin-green-dark: #008d4c;
	--pass-theme: #dd3939;
	--pass-theme-dark: #d73925;
	--skin-yellow: #f39c12;
	--skin-yellow-dark: #e08e0b;
	--skin-purple: #605ca8;
	--skin-purple-dark: #555299;
	--skin-sidebar-dark: #222d32;
	--skin-sidebar-dark-hover: #1e282c;
	--skin-sidebar-dark-sub: #2c3b41;
	--skin-sidebar-light: #f9fafc;
	--skin-sidebar-light-hover: #f4f4f5;
	--pass-blue: #31466f;
}

/* Shared dark sidebar skins */
.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side,
.skin-green .wrapper,
.skin-green .main-sidebar,
.skin-green .left-side,
.skin-yellow .wrapper,
.skin-yellow .main-sidebar,
.skin-yellow .left-side,
.skin-purple .wrapper,
.skin-purple .main-sidebar,
.skin-purple .left-side,
.skin-black .wrapper,
.skin-black .main-sidebar,
.skin-black .left-side {
	background-color: var(--skin-sidebar-dark);
}

.skin-blue .sidebar a,
.skin-green .sidebar a,
.skin-yellow .sidebar a,
.skin-purple .sidebar a,
.skin-black .sidebar a {
	color: #ffffff;
}

.skin-blue .sidebar a:hover,
.skin-green .sidebar a:hover,
.skin-yellow .sidebar a:hover,
.skin-purple .sidebar a:hover,
.skin-black .sidebar a:hover {
	text-decoration: none;
}

.skin-blue .sidebar-menu > li.header,
.skin-green .sidebar-menu > li.header,
.skin-yellow .sidebar-menu > li.header,
.skin-purple .sidebar-menu > li.header,
.skin-black .sidebar-menu > li.header {
	color: #4b646f;
	background: #1a2226;
}

.skin-blue .sidebar-menu > li > a,
.skin-green .sidebar-menu > li > a,
.skin-yellow .sidebar-menu > li > a,
.skin-purple .sidebar-menu > li > a,
.skin-black .sidebar-menu > li > a {
	border-left: 3px solid transparent;
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-green .sidebar-menu > li:hover > a,
.skin-green .sidebar-menu > li.active > a,
.skin-yellow .sidebar-menu > li:hover > a,
.skin-yellow .sidebar-menu > li.active > a,
.skin-purple .sidebar-menu > li:hover > a,
.skin-purple .sidebar-menu > li.active > a,
.skin-black .sidebar-menu > li:hover > a,
.skin-black .sidebar-menu > li.active > a {
	color: #fff;
	background: var(--skin-sidebar-dark-hover);
}

.skin-blue .sidebar-menu > li > .treeview-menu,
.skin-green .sidebar-menu > li > .treeview-menu,
.skin-yellow .sidebar-menu > li > .treeview-menu,
.skin-purple .sidebar-menu > li > .treeview-menu,
.skin-black .sidebar-menu > li > .treeview-menu {
	margin: 0 1px;
	background: var(--skin-sidebar-dark-sub);
}

.skin-blue .treeview-menu > li > a,
.skin-green .treeview-menu > li > a,
.skin-yellow .treeview-menu > li > a,
.skin-purple .treeview-menu > li > a,
.skin-black .treeview-menu > li > a {
	color: #8aa4af;
}

.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover,
.skin-green .treeview-menu > li.active > a,
.skin-green .treeview-menu > li > a:hover,
.skin-yellow .treeview-menu > li.active > a,
.skin-yellow .treeview-menu > li > a:hover,
.skin-purple .treeview-menu > li.active > a,
.skin-purple .treeview-menu > li > a:hover,
.skin-black .treeview-menu > li.active > a,
.skin-black .treeview-menu > li > a:hover {
	color: #fff;
}

/* Shared light sidebar skins */
.skin-blue-light .wrapper,
.skin-blue-light .main-sidebar,
.skin-blue-light .left-side,
.skin-green-light .wrapper,
.skin-green-light .main-sidebar,
.skin-green-light .left-side,
.pass-theme-light .wrapper,
.pass-theme-light .main-sidebar,
.pass-theme-light .left-side,
.skin-yellow-light .wrapper,
.skin-yellow-light .main-sidebar,
.skin-yellow-light .left-side,
.skin-purple-light .wrapper,
.skin-purple-light .main-sidebar,
.skin-purple-light .left-side,
.skin-black-light .wrapper,
.skin-black-light .main-sidebar,
.skin-black-light .left-side {
	background-color: var(--skin-sidebar-light);
}

.skin-blue-light .content-wrapper,
.skin-blue-light .main-footer,
.skin-green-light .content-wrapper,
.skin-green-light .main-footer,
.pass-theme-light .content-wrapper,
.pass-theme-light .main-footer,
.skin-yellow-light .content-wrapper,
.skin-yellow-light .main-footer,
.skin-purple-light .content-wrapper,
.skin-purple-light .main-footer,
.skin-black-light .content-wrapper,
.skin-black-light .main-footer {
	border-left: 1px solid #d2d6de;
}

.skin-blue-light .sidebar a,
.skin-green-light .sidebar a,
.pass-theme-light .sidebar a,
.skin-yellow-light .sidebar a,
.skin-purple-light .sidebar a,
.skin-black-light .sidebar a,
.skin-blue-light .user-panel > .info,
.skin-blue-light .user-panel > .info > a,
.skin-green-light .user-panel > .info,
.skin-green-light .user-panel > .info > a,
.pass-theme-light .user-panel > .info,
.pass-theme-light .user-panel > .info > a,
.skin-yellow-light .user-panel > .info,
.skin-yellow-light .user-panel > .info > a,
.skin-purple-light .user-panel > .info,
.skin-purple-light .user-panel > .info > a,
.skin-black-light .user-panel > .info,
.skin-black-light .user-panel > .info > a {
	color: #444;
}

.skin-blue-light .sidebar a:hover,
.skin-green-light .sidebar a:hover,
.pass-theme-light .sidebar a:hover,
.skin-yellow-light .sidebar a:hover,
.skin-purple-light .sidebar a:hover,
.skin-black-light .sidebar a:hover {
	text-decoration: none;
}

.skin-blue-light .sidebar-menu > li.header,
.skin-green-light .sidebar-menu > li.header,
.pass-theme-light .sidebar-menu > li.header,
.skin-yellow-light .sidebar-menu > li.header,
.skin-purple-light .sidebar-menu > li.header,
.skin-black-light .sidebar-menu > li.header {
	color: #848484;
	background: var(--skin-sidebar-light);
}

.skin-blue-light .sidebar-menu > li > a,
.skin-green-light .sidebar-menu > li > a,
.pass-theme-light .sidebar-menu > li > a,
.skin-yellow-light .sidebar-menu > li > a,
.skin-purple-light .sidebar-menu > li > a,
.skin-black-light .sidebar-menu > li > a {
	border-left: 3px solid transparent;
	font-weight: 600;
}

.skin-blue-light .sidebar-menu > li:hover > a,
.skin-blue-light .sidebar-menu > li.active > a,
.skin-green-light .sidebar-menu > li:hover > a,
.skin-green-light .sidebar-menu > li.active > a,
.pass-theme-light .sidebar-menu > li:hover > a,
.pass-theme-light .sidebar-menu > li.active > a,
.skin-yellow-light .sidebar-menu > li:hover > a,
.skin-yellow-light .sidebar-menu > li.active > a,
.skin-purple-light .sidebar-menu > li:hover > a,
.skin-purple-light .sidebar-menu > li.active > a,
.skin-black-light .sidebar-menu > li:hover > a,
.skin-black-light .sidebar-menu > li.active > a {
	color: #000;
	background: var(--skin-sidebar-light-hover);
}

.skin-blue-light .sidebar-menu > li > .treeview-menu,
.skin-green-light .sidebar-menu > li > .treeview-menu,
.pass-theme-light .sidebar-menu > li > .treeview-menu,
.skin-yellow-light .sidebar-menu > li > .treeview-menu,
.skin-purple-light .sidebar-menu > li > .treeview-menu,
.skin-black-light .sidebar-menu > li > .treeview-menu {
	background: var(--skin-sidebar-light-hover);
}

.skin-blue-light .treeview-menu > li > a,
.skin-green-light .treeview-menu > li > a,
.pass-theme-light .treeview-menu > li > a,
.skin-yellow-light .treeview-menu > li > a,
.skin-purple-light .treeview-menu > li > a,
.skin-black-light .treeview-menu > li > a {
	color: #777;
}

.skin-blue-light .treeview-menu > li.active > a,
.skin-blue-light .treeview-menu > li > a:hover,
.skin-green-light .treeview-menu > li.active > a,
.skin-green-light .treeview-menu > li > a:hover,
.pass-theme-light .treeview-menu > li.active > a,
.pass-theme-light .treeview-menu > li > a:hover,
.skin-yellow-light .treeview-menu > li.active > a,
.skin-yellow-light .treeview-menu > li > a:hover,
.skin-purple-light .treeview-menu > li.active > a,
.skin-purple-light .treeview-menu > li > a:hover,
.skin-black-light .treeview-menu > li.active > a,
.skin-black-light .treeview-menu > li > a:hover {
	color: #000;
}

/* Blue */
.skin-blue .main-header .navbar,
.skin-blue-light .main-header .navbar,
.skin-blue.layout-top-nav .main-header > .logo {
	background-color: var(--skin-blue);
}

.skin-blue .main-header .logo,
.skin-blue-light .main-header .logo {
	background-color: var(--skin-blue-dark);
	color: #fff;
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue-light .sidebar-menu > li.active {
	border-left-color: var(--skin-blue);
}

/* Green */
.skin-green .main-header .navbar,
.skin-green-light .main-header .navbar {
	background-color: var(--skin-green);
}

.skin-green .main-header .logo,
.skin-green-light .main-header .logo {
	background-color: var(--skin-green-dark);
	color: #fff;
}

.skin-green .sidebar-menu > li:hover > a,
.skin-green .sidebar-menu > li.active > a,
.skin-green-light .sidebar-menu > li.active {
	border-left-color: var(--skin-green);
}

/* Red / PASS */
.pass-theme .main-header .navbar,
.pass-theme-light .main-header .navbar {
	background-color: var(--pass-theme);
}

.pass-theme .main-sidebar,
.pass-theme .left-side {
	background-color: var(--pass-blue);
}

.pass-theme .wrapper {
	background-color: var(--ui-bg, #ecf0f5);
}

.pass-theme .main-header .logo {
	background-color: #ffffff;
	color: #fff;
}

.pass-theme-light .main-header .logo {
	background-color: var(--pass-theme);
	color: #fff;
}

.pass-theme .sidebar-menu > li:hover > a,
.pass-theme .sidebar-menu > li.active > a {
	color: #111827;
	background: #ffffff;
	border-left-color: var(--pass-theme);
}

.pass-theme .sidebar-menu > li > .treeview-menu {
	background: rgba(0, 0, 0, 0.12);
}

.pass-theme-light .sidebar-menu > li.active {
	border-left-color: var(--pass-theme);
}

/* Yellow */
.skin-yellow .main-header .navbar,
.skin-yellow-light .main-header .navbar {
	background-color: var(--skin-yellow);
}

.skin-yellow .main-header .logo,
.skin-yellow-light .main-header .logo {
	background-color: var(--skin-yellow-dark);
	color: #fff;
}

.skin-yellow .sidebar-menu > li:hover > a,
.skin-yellow .sidebar-menu > li.active > a,
.skin-yellow-light .sidebar-menu > li.active {
	border-left-color: var(--skin-yellow);
}

/* Purple */
.skin-purple .main-header .navbar,
.skin-purple-light .main-header .navbar {
	background-color: var(--skin-purple);
}

.skin-purple .main-header .logo,
.skin-purple-light .main-header .logo {
	background-color: var(--skin-purple-dark);
	color: #fff;
}

.skin-purple .sidebar-menu > li:hover > a,
.skin-purple .sidebar-menu > li.active > a,
.skin-purple-light .sidebar-menu > li.active {
	border-left-color: var(--skin-purple);
}

/* Black */
.skin-black .main-header > .navbar,
.skin-black-light .main-header > .navbar {
	background-color: #fff;
}

.skin-black .main-header > .navbar .nav > li > a,
.skin-black-light .main-header > .navbar .nav > li > a,
.skin-black .main-header > .navbar .sidebar-toggle,
.skin-black-light .main-header > .navbar .sidebar-toggle {
	color: #333;
}

.skin-black .main-header > .logo,
.skin-black-light .main-header > .logo {
	background-color: #fff;
	color: #333;
	border-right: 1px solid #eee;
}

.skin-black .sidebar-menu > li:hover > a,
.skin-black .sidebar-menu > li.active > a,
.skin-black-light .sidebar-menu > li.active {
	border-left-color: #fff;
}

/* Shared navbar link colour for coloured headers */
.skin-blue .main-header .navbar .nav > li > a,
.skin-blue-light .main-header .navbar .nav > li > a,
.skin-green .main-header .navbar .nav > li > a,
.skin-green-light .main-header .navbar .nav > li > a,
.pass-theme .main-header .navbar .nav > li > a,
.pass-theme-light .main-header .navbar .nav > li > a,
.skin-yellow .main-header .navbar .nav > li > a,
.skin-yellow-light .main-header .navbar .nav > li > a,
.skin-purple .main-header .navbar .nav > li > a,
.skin-purple-light .main-header .navbar .nav > li > a,
.skin-blue .main-header .navbar .sidebar-toggle,
.skin-blue-light .main-header .navbar .sidebar-toggle,
.skin-green .main-header .navbar .sidebar-toggle,
.skin-green-light .main-header .navbar .sidebar-toggle,
.pass-theme .main-header .navbar .sidebar-toggle,
.pass-theme-light .main-header .navbar .sidebar-toggle,
.skin-yellow .main-header .navbar .sidebar-toggle,
.skin-yellow-light .main-header .navbar .sidebar-toggle,
.skin-purple .main-header .navbar .sidebar-toggle,
.skin-purple-light .main-header .navbar .sidebar-toggle {
	color: #fff;
}

.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue-light .main-header .navbar .nav > li > a:hover,
.skin-green .main-header .navbar .nav > li > a:hover,
.skin-green-light .main-header .navbar .nav > li > a:hover,
.pass-theme .main-header .navbar .nav > li > a:hover,
.pass-theme-light .main-header .navbar .nav > li > a:hover,
.skin-yellow .main-header .navbar .nav > li > a:hover,
.skin-yellow-light .main-header .navbar .nav > li > a:hover,
.skin-purple .main-header .navbar .nav > li > a:hover,
.skin-purple-light .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue-light .main-header .navbar .nav .open > a,
.skin-green .main-header .navbar .nav .open > a,
.skin-green-light .main-header .navbar .nav .open > a,
.pass-theme .main-header .navbar .nav .open > a,
.pass-theme-light .main-header .navbar .nav .open > a,
.skin-yellow .main-header .navbar .nav .open > a,
.skin-yellow-light .main-header .navbar .nav .open > a,
.skin-purple .main-header .navbar .nav .open > a,
.skin-purple-light .main-header .navbar .nav .open > a {
	background: rgba(0, 0, 0, 0.1);
	color: #f6f6f6;
}

@media (max-width: 767px) {
	.skin-black .main-header > .logo,
	.skin-black-light .main-header > .logo {
		background-color: #222;
		color: #fff;
		border-right: none;
	}
}