/* ==========================================================================
   ui-premium.css  -  Rediseño visual (SOLO DISEÑO) de HEADER + SIDEBAR
   Sobrescribe el tema Metronic/Conquer. Sin cambios en header.php ni sidebar.php
   Cargar SIEMPRE de último en standard_css.php
   v2 - 2026-09-15
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS  (paleta del módulo "Consultar Solicitudes")
   -------------------------------------------------------------------------- */
:root {
	--px-navy-900: #0a1631;
	--px-navy-800: #0e1f42;
	--px-navy-700: #14306b;
	--px-blue-700: #1d4ed8;
	--px-blue-600: #2563eb;
	--px-blue-500: #3b82f6;
	--px-blue-400: #60a5fa;
	--px-blue-200: #bfdbfe;
	--px-tint: #eff5ff;
	--px-field: #f1f5fb;

	--px-header-grad: linear-gradient(90deg, #0a1631 0%, #14306b 48%, #1d4ed8 100%);
	--px-sidebar-grad: linear-gradient(180deg, #0e1f42 0%, #0a1631 100%);
	--px-active-grad: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 100%);

	--px-border: rgba(255, 255, 255, .10);
	--px-text: #c9d7f0;
	--px-text-dim: #8fa3c8;
	--px-font: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

	/* Medidas del layout */
	--px-header-h: 80px;
	--px-sidebar-w: 272px;
	--px-sidebar-w-min: 84px;
}

/* --------------------------------------------------------------------------
   2. HEADER
   -------------------------------------------------------------------------- */
body.page-header-fixed {
	padding-top: var(--px-header-h) !important;
}

.header.navbar {
	height: var(--px-header-h) !important;
	min-height: var(--px-header-h) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--px-header-grad) !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
	box-shadow: 0 2px 18px rgba(10, 22, 49, .45);
	filter: none !important;
}

/* Flex en vez de floats: así nada queda cortado ni desalineado */
.header.navbar .header-inner {
	display: flex !important;
	align-items: center;
	height: var(--px-header-h);
	padding: 0 20px 0 0 !important;
	margin: 0 !important;
}

.header.navbar .header-inner:before,
.header.navbar .header-inner:after {
	display: none !important;
}

/* --- Logo --- */
.header.navbar .navbar-brand {
	display: flex !important;
	align-items: center;
	gap: 16px;
	float: none !important;
	height: var(--px-header-h) !important;
	padding: 0 22px 0 16px !important;
	margin: 0 !important;
	width: auto !important;
}

.header.navbar .navbar-brand img {
	height: 64px !important;
	max-height: 64px;
	width: auto;
	background: #fff;
	border-radius: 14px;
	padding: 7px 16px;
	box-shadow: 0 6px 18px rgba(10, 22, 49, .35);
}

.header.navbar .navbar-brand .name-empresa {
	font-family: var(--px-font);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .4px;
	color: #fff;
	text-shadow: none !important;
	white-space: nowrap;
}

/* --- Zona de acciones (derecha) --- */
.header.navbar .nav.navbar-nav {
	display: flex !important;
	align-items: center;
	gap: 4px;
	float: none !important;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
	height: var(--px-header-h);
}

.header.navbar .nav.navbar-nav > li {
	float: none !important;
	display: flex;
	align-items: center;
	height: var(--px-header-h);
	border: none !important;
}

.header.navbar .nav.navbar-nav > li > a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	min-width: 40px;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent !important;
	color: #e8eefc !important;
	font-family: var(--px-font);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	text-shadow: none !important;
	transition: background .18s ease, border-color .18s ease;
}

.header.navbar .nav.navbar-nav > li > a:hover,
.header.navbar .nav.navbar-nav > li > a:focus,
.header.navbar .nav.navbar-nav > li.open > a {
	background: rgba(255, 255, 255, .14) !important;
	border-color: rgba(255, 255, 255, .22);
	color: #fff !important;
}

.header.navbar .nav.navbar-nav > li > a > i {
	font-size: 16px !important;
	line-height: 1;
	color: #dbeafe !important;
	margin: 0 !important;
}

/* Badge "Ayuda": pill translúcido, nada de verde */
.header.navbar .nav.navbar-nav .badge {
	position: static !important;
	top: auto !important;
	right: auto !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 8px !important;
	border-radius: 999px !important;
	font-family: var(--px-font);
	font-size: 11px !important;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .2px;
	text-shadow: none !important;
	box-shadow: none !important;
	background: rgba(255, 255, 255, .18) !important;
	color: #fff !important;
}

.header.navbar .nav.navbar-nav .badge-success {
	background: rgba(255, 255, 255, .16) !important;
	color: #fff !important;
}

/* Contador de notificaciones: pill blanco, a juego con el resto */
.header.navbar .nav.navbar-nav .badge-warning,
.header.navbar .nav.navbar-nav .badge-danger {
	background: #ffffff !important;
	color: var(--px-navy-900) !important;
	font-weight: 700;
}

.header.navbar .nav.navbar-nav .badge-warning:empty,
.header.navbar .nav.navbar-nav .badge-danger:empty {
	display: none !important;
}

/* Campana en blanco (el amarillo chocaba con el azul) */
.header.navbar .nav.navbar-nav > li > a > i.fa-bell,
.header.navbar .nav.navbar-nav > li > a > i.fa-bell.warning {
	color: #fff !important;
}

.header.navbar .nav.navbar-nav > li > a > i.fa-question-circle,
.header.navbar .nav.navbar-nav > li > a > i.fa-question-circle.success,
.header.navbar .nav.navbar-nav > li > a > i.fa-globe,
.header.navbar .nav.navbar-nav > li > a > i.fa-gift {
	color: var(--px-blue-200) !important;
}

/* Separador */
.header.navbar .nav.navbar-nav > li.devider {
	width: 1px !important;
	height: 28px !important;
	margin: 0 12px !important;
	padding: 0 !important;
	background: rgba(255, 255, 255, .18);
	font-size: 0 !important;
	overflow: hidden;
}

/* Usuario */
.header.navbar .nav.navbar-nav > li.user > a {
	padding: 0 14px 0 5px !important;
	gap: 10px;
}

.header.navbar .nav.navbar-nav > li.user img {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, .28);
	margin: 0 !important;
}

.header.navbar .nav.navbar-nav > li.user .username {
	font-weight: 600;
	color: #fff !important;
	font-size: 13.5px;
}

.header.navbar .nav.navbar-nav > li.user .fa-angle-down {
	color: rgba(255, 255, 255, .6) !important;
	font-size: 13px !important;
}

/* Dropdowns */
.header.navbar .nav.navbar-nav .dropdown-menu {
	margin-top: 8px !important;
	padding: 8px !important;
	background: #fff !important;
	border: 1px solid #e6eaf2 !important;
	border-radius: 14px !important;
	box-shadow: 0 20px 44px rgba(10, 22, 49, .22) !important;
	font-family: var(--px-font);
}

.header.navbar .nav.navbar-nav .dropdown-menu:before,
.header.navbar .nav.navbar-nav .dropdown-menu:after {
	display: none !important;
}

.header.navbar .nav.navbar-nav .dropdown-menu > li > a {
	padding: 8px 12px !important;
	border-radius: 8px;
	color: #334155 !important;
	font-size: 12.5px;
}

.header.navbar .nav.navbar-nav .dropdown-menu > li > a:hover {
	background: var(--px-tint) !important;
	color: #0f172a !important;
}

.header.navbar .nav.navbar-nav .dropdown-menu > li.divider {
	background: #eef2f7;
	margin: 6px 4px;
}

.header.navbar .nav.navbar-nav .dropdown-menu.extended > li:first-child p {
	margin: 0 0 6px !important;
	padding: 10px 12px !important;
	border: none !important;
	border-radius: 10px;
	background: var(--px-tint) !important;
	color: #16357a;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
}

.header.navbar .nav.navbar-nav .dropdown-menu.extended .external a {
	border-radius: 8px;
	background: var(--px-tint);
	color: var(--px-blue-600) !important;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. SIDEBAR  -  ancho, con iconos y modo colapsado
   -------------------------------------------------------------------------- */
.page-sidebar,
.page-sidebar-wrapper {
	width: var(--px-sidebar-w) !important;
	background: var(--px-sidebar-grad) !important;
}

.page-sidebar {
	border-right: 1px solid rgba(255, 255, 255, .06);
}

.page-sidebar-fixed .page-sidebar {
	position: fixed;
	top: var(--px-header-h);
	bottom: 0;
	left: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

.page-content-wrapper .page-content,
.page-container .page-content {
	margin-left: var(--px-sidebar-w) !important;
}

.page-sidebar-menu {
	width: 100% !important;
	margin: 0 !important;
	padding: 10px 12px 28px 12px !important;
	font-family: var(--px-font);
	background: transparent !important;
}

/* --- Botón desplegar / colapsar --- */
.page-sidebar-menu > li.sidebar-toggler-wrapper {
	display: flex;
	justify-content: flex-end;
	height: auto !important;
	margin: 0 0 10px 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

.page-sidebar-menu .sidebar-toggler {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	height: 34px !important;
	margin: 0 !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .08) !important;
	border: 1px solid var(--px-border) !important;
	opacity: 1 !important;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}

.page-sidebar-menu .sidebar-toggler:hover {
	background: var(--px-blue-600) !important;
	border-color: var(--px-blue-500) !important;
}

/* --- Buscador --- */
.page-sidebar .search-form {
	margin: 0 2px 16px 2px !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

.page-sidebar .search-form .form-control {
	height: 40px !important;
	padding-left: 14px !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .07) !important;
	border: 1px solid var(--px-border) !important;
	color: #eaf1ff !important;
	font-size: 13px;
	box-shadow: none !important;
}

.page-sidebar .search-form .form-control:focus {
	background: rgba(255, 255, 255, .12) !important;
	border-color: var(--px-blue-500) !important;
}

.page-sidebar .search-form .form-control::-webkit-input-placeholder {
	color: var(--px-text-dim) !important;
}

.page-sidebar .search-form .form-control::placeholder {
	color: var(--px-text-dim) !important;
}

.page-sidebar .search-form .input-icon > i {
	line-height: 40px !important;
	color: var(--px-text-dim) !important;
}

/* --- Items nivel 1 --- */
.page-sidebar-menu > li {
	margin: 0 0 3px 0 !important;
	border: none !important;
	background: transparent !important;
}

.page-sidebar-menu > li > a {
	display: flex !important;
	align-items: center;
	gap: 13px;
	height: 46px;
	padding: 0 14px !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 12px;
	background: transparent !important;
	color: var(--px-text) !important;
	font-size: 13.5px;
	font-weight: 500;
	text-shadow: none !important;
	transition: background .16s ease, color .16s ease;
}

.page-sidebar-menu > li > a > i {
	flex: 0 0 22px;
	width: 22px;
	font-size: 16px !important;
	line-height: 1;
	text-align: center;
	color: var(--px-text-dim) !important;
	margin: 0 !important;
	transition: color .16s ease;
}

.page-sidebar-menu > li > a > .title {
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.page-sidebar-menu > li > a:hover {
	background: rgba(255, 255, 255, .07) !important;
	color: #fff !important;
}

.page-sidebar-menu > li > a:hover > i {
	color: var(--px-blue-400) !important;
}

/* Activo: pastilla con el degradado azul */
.page-sidebar-menu > li.active > a,
.page-sidebar-menu > li.active.open > a {
	background: var(--px-active-grad) !important;
	color: #fff !important;
	font-weight: 600;
	box-shadow: 0 8px 20px rgba(29, 78, 216, .38);
}

.page-sidebar-menu > li.active > a > i,
.page-sidebar-menu > li.active > a > .arrow:before {
	color: #fff !important;
}

/* Abierto pero no activo */
.page-sidebar-menu > li.open:not(.active) > a {
	background: rgba(59, 130, 246, .14) !important;
	color: #fff !important;
}

.page-sidebar-menu > li.open:not(.active) > a > i {
	color: var(--px-blue-400) !important;
}

/* Metronic pinta una franja roja en el activo */
.page-sidebar-menu > li > a > .selected {
	display: none !important;
}

/* Flechas */
.page-sidebar-menu .arrow {
	margin-left: auto;
}

.page-sidebar-menu .arrow:before {
	font-size: 13px !important;
	color: var(--px-text-dim) !important;
	opacity: .85;
}

/* --- Submenús --- */
.page-sidebar-menu .sub-menu {
	position: relative;
	margin: 4px 0 8px 0 !important;
	padding: 2px 0 2px 24px !important;
	background: transparent !important;
	list-style: none;
}

.page-sidebar-menu .sub-menu:before {
	content: '';
	position: absolute;
	left: 25px;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: rgba(255, 255, 255, .12);
}

.page-sidebar-menu .sub-menu > li {
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
}

.page-sidebar-menu .sub-menu > li > a {
	position: relative;
	display: flex !important;
	align-items: center;
	min-height: 34px;
	padding: 6px 12px !important;
	margin: 0 0 1px 0 !important;
	border: none !important;
	border-radius: 9px;
	background: transparent !important;
	color: var(--px-text-dim) !important;
	font-size: 12.8px;
	font-weight: 400;
	line-height: 1.35;
	text-shadow: none !important;
	transition: background .15s ease, color .15s ease, padding-left .15s ease;
}

.page-sidebar-menu .sub-menu > li > a:hover {
	background: rgba(255, 255, 255, .06) !important;
	color: #fff !important;
	padding-left: 16px !important;
}

.page-sidebar-menu .sub-menu > li.active > a {
	background: rgba(59, 130, 246, .18) !important;
	color: #fff !important;
	font-weight: 600;
	box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .28);
}

.page-sidebar-menu .sub-menu > li.active > a:before {
	content: '';
	position: absolute;
	left: -4px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: var(--px-blue-400);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, .22);
}

.page-sidebar-menu .sub-menu .arrow {
	opacity: .7;
}

.page-sidebar-menu .sub-menu .sub-menu {
	padding-left: 16px !important;
}

/* --- Scrollbar --- */
.page-sidebar::-webkit-scrollbar,
.page-sidebar-menu::-webkit-scrollbar {
	width: 6px;
}

.page-sidebar::-webkit-scrollbar-thumb,
.page-sidebar-menu::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .16);
	border-radius: 999px;
}

.page-sidebar::-webkit-scrollbar-thumb:hover,
.page-sidebar-menu::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, .3);
}

.page-sidebar::-webkit-scrollbar-track,
.page-sidebar-menu::-webkit-scrollbar-track {
	background: transparent;
}

/* --------------------------------------------------------------------------
   4. SIDEBAR COLAPSADO  (body.page-sidebar-closed)  -  solo iconos
   -------------------------------------------------------------------------- */
.page-sidebar-closed .page-sidebar,
.page-sidebar-closed .page-sidebar-wrapper {
	width: var(--px-sidebar-w-min) !important;
	overflow: visible;
}

/* El tema desplaza el panel con margin-left negativo al colapsar:
   eso cortaba los iconos. Aqui se anula cualquier corrimiento. */
html body.page-sidebar-closed .page-sidebar,
html body.page-sidebar-closed .page-sidebar-wrapper,
html body.page-sidebar-closed .page-sidebar-wrapper > .page-sidebar-wrapper {
	margin-left: 0 !important;
	margin-right: 0 !important;
	left: 0 !important;
	right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	transform: none !important;
}

html body.page-sidebar-closed .page-sidebar-menu {
	width: 100% !important;
	margin-left: 0 !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
}

html body.page-sidebar-closed .page-sidebar-menu > li {
	width: 100% !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
	float: none !important;
}

.page-sidebar-closed .page-content-wrapper .page-content,
.page-sidebar-closed .page-container .page-content {
	margin-left: var(--px-sidebar-w-min) !important;
}

.page-sidebar-closed .page-sidebar-menu {
	padding: 10px 10px 28px 10px !important;
}

.page-sidebar-closed .page-sidebar-menu > li.sidebar-toggler-wrapper {
	display: flex !important;
	justify-content: center !important;
	margin-left: 0 !important;
}

.page-sidebar-closed .page-sidebar-menu .sidebar-toggler {
	margin: 0 auto !important;
}

/* Oculta buscador y textos: quedan solo los iconos */
.page-sidebar-closed .page-sidebar .search-form {
	display: none !important;
}

/* Cada item se vuelve una baldosa cuadrada centrada */
.page-sidebar-closed .page-sidebar-menu > li > a {
	display: flex !important;
	justify-content: center;
	align-items: center;
	gap: 0;
	width: 48px;
	height: 48px;
	margin: 0 auto 4px auto !important;
	padding: 0 !important;
	border-radius: 14px;
}

.page-sidebar-closed .page-sidebar-menu > li > a > i {
	flex: 0 0 auto;
	width: auto;
	font-size: 17px !important;
}

.page-sidebar-closed .page-sidebar-menu > li.active > a {
	box-shadow: 0 6px 16px rgba(29, 78, 216, .45);
}

.page-sidebar-closed .page-sidebar-menu > li > a > .title,
.page-sidebar-closed .page-sidebar-menu > li > a > .arrow {
	display: none !important;
}

/* Etiqueta flotante al pasar el mouse */
.page-sidebar-closed .page-sidebar-menu > li:hover > a > .title {
	display: flex !important;
	align-items: center;
	position: absolute;
	left: var(--px-sidebar-w-min);
	top: 0;
	height: 46px;
	padding: 0 18px;
	border-radius: 0 12px 12px 0;
	background: var(--px-blue-700);
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 10px 26px rgba(10, 22, 49, .4);
	z-index: 1200;
}

.page-sidebar-closed .page-sidebar-menu > li {
	position: relative;
}

/* Submenú flotante al pasar el mouse */
.page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu {
	display: block !important;
	position: absolute !important;
	left: var(--px-sidebar-w-min);
	top: 46px;
	width: 230px;
	margin: 0 !important;
	padding: 8px !important;
	background: var(--px-navy-800) !important;
	border: 1px solid var(--px-border);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(10, 22, 49, .5);
	z-index: 1190;
}

.page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu:before {
	display: none;
}

/* --------------------------------------------------------------------------
   4b. REFUERZO DE ESPECIFICIDAD
   El tema (style-conquer.css) declara fondos oscuros sobre selectores mas
   especificos, que le ganaban incluso a !important. Aqui se repiten las reglas
   clave con mas peso para que el azul mande siempre.
   -------------------------------------------------------------------------- */
html body .page-sidebar .page-sidebar-menu > li > a,
html body .page-sidebar .page-sidebar-menu > li > a:hover,
html body .page-sidebar .page-sidebar-menu .sub-menu > li > a {
	background-image: none !important;
	border: none !important;
	text-shadow: none !important;
}

html body .page-sidebar .page-sidebar-menu > li > a {
	background-color: transparent !important;
}

html body .page-sidebar .page-sidebar-menu > li > a:hover {
	background-color: rgba(255, 255, 255, .07) !important;
}

html body .page-sidebar .page-sidebar-menu > li.active > a,
html body .page-sidebar .page-sidebar-menu > li.active.open > a {
	background-color: var(--px-blue-700) !important;
	background-image: var(--px-active-grad) !important;
	color: #fff !important;
}

html body .page-sidebar .page-sidebar-menu > li.open:not(.active) > a {
	background-color: rgba(59, 130, 246, .16) !important;
}

html body .page-sidebar .page-sidebar-menu .sub-menu > li > a {
	background-color: transparent !important;
}

html body .page-sidebar .page-sidebar-menu .sub-menu > li > a:hover {
	background-color: rgba(255, 255, 255, .06) !important;
}

html body .page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
	background-color: rgba(59, 130, 246, .3) !important;
	color: #fff !important;
}

/* El tema tambien pinta una franja/borde en el item activo */
html body .page-sidebar .page-sidebar-menu > li.active > a > .selected,
html body .page-sidebar .page-sidebar-menu > li > a > .selected {
	display: none !important;
}

/* --------------------------------------------------------------------------
   5. CONTENIDO
   -------------------------------------------------------------------------- */
.page-content {
	background: #f5f8fd !important;
}

.page-bar,
.page-breadcrumb,
ul.page-breadcrumb {
	padding: 12px 16px !important;
	background: var(--px-tint) !important;
	border: 1px solid #dbe6fb !important;
	border-left: 3px solid var(--px-blue-600) !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(10, 22, 49, .04);
	font-family: var(--px-font);
	font-size: 13px;
}

ul.page-breadcrumb > li > a,
ul.page-breadcrumb > li > span {
	color: #1e3a8a;
}

ul.page-breadcrumb > li > a:hover {
	color: var(--px-blue-600);
}

ul.page-breadcrumb > li > i {
	color: var(--px-blue-600);
}

/* --------------------------------------------------------------------------
   6. COMPONENTES COMPARTIDOS
   -------------------------------------------------------------------------- */
.portlet {
	border-radius: 12px !important;
	box-shadow: 0 2px 10px rgba(10, 22, 49, .06);
	font-family: var(--px-font);
}

.portlet > .portlet-title,
.panel-primary > .panel-heading,
.panel > .panel-heading.blue {
	background: var(--px-active-grad) !important;
	border: none !important;
	border-radius: 12px 12px 0 0 !important;
	color: #fff !important;
	font-family: var(--px-font);
}

.portlet > .portlet-title > .caption,
.portlet > .portlet-title > .caption > i {
	color: #fff !important;
	font-weight: 600;
}

.btn.btn-primary,
.btn.blue {
	background: var(--px-active-grad) !important;
	border: none !important;
	border-radius: 9px !important;
	font-weight: 600;
	box-shadow: none;
	transition: box-shadow .18s ease, filter .18s ease;
}

.btn.btn-primary:hover,
.btn.blue:hover,
.btn.btn-primary:focus,
.btn.blue:focus {
	filter: brightness(1.07);
	box-shadow: 0 6px 16px rgba(29, 78, 216, .3);
	color: #fff !important;
}

.form-control {
	border-radius: 9px !important;
	border-color: #e2e8f0 !important;
	background-color: var(--px-field) !important;
	box-shadow: none !important;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.form-control:focus {
	border-color: var(--px-blue-600) !important;
	background-color: #fff !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}

.table > thead > tr > th {
	background: var(--px-tint) !important;
	color: #1e3a8a !important;
	border-bottom: 1px solid #dbe6fb !important;
	font-family: var(--px-font);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

	body.page-header-fixed {
		padding-top: 0 !important;
	}

	.header.navbar {
		position: relative !important;
		height: auto !important;
		min-height: var(--px-header-h) !important;
	}

	.header.navbar .header-inner {
		flex-wrap: wrap;
		height: auto;
		padding: 0 10px 8px 0 !important;
	}

	.header.navbar .navbar-brand {
		height: auto !important;
		padding: 10px 12px !important;
	}

	.header.navbar .navbar-brand img {
		height: 44px !important;
	}

	.header.navbar .nav.navbar-nav {
		height: auto;
		flex-wrap: wrap;
		margin-left: auto !important;
	}

	.header.navbar .nav.navbar-nav > li {
		height: auto;
	}

	.page-sidebar,
	.page-sidebar-wrapper,
	.page-sidebar-closed .page-sidebar,
	.page-sidebar-closed .page-sidebar-wrapper {
		width: 100% !important;
		position: static !important;
	}

	.page-content-wrapper .page-content,
	.page-container .page-content,
	.page-sidebar-closed .page-content-wrapper .page-content,
	.page-sidebar-closed .page-container .page-content {
		margin-left: 0 !important;
	}

	.page-sidebar-closed .page-sidebar-menu > li > a > .title,
	.page-sidebar-closed .page-sidebar-menu > li > a > .arrow {
		display: block !important;
		position: static;
		height: auto;
		background: transparent;
		box-shadow: none;
		padding: 0;
	}

	.page-sidebar-closed .page-sidebar-menu > li > a {
		justify-content: flex-start;
		gap: 13px;
		padding: 0 14px !important;
	}

	.page-sidebar-closed .page-sidebar .search-form {
		display: block !important;
	}
}