/*
 * EENDA
 * Marketing, Desarrollo & Consulting
 * www.eenda.com
 * © 2026
 */

/*
 * XPanel® — Hoja base (mobile-first)
 *
 * Estructura:
 *   1. Tokens
 *   2. Base
 *   3. Layout
 *   4. Sidebar
 *   5. Header
 *   6. Primitivas de página
 *   7. Formularios
 *   8. Tablas y DataTables
 *   9. Modales y respuestas $Ajax
 *  10. Login
 *  11. Vendor (bootstrap-select, CKEditor, XPFinder)
 *
 * Los breakpoints viven en responsive.css, siempre con min-width.
 *
 * El azul es el del producto: el XPanel® es el panel de EENDA y luce su propia
 * marca (el logo del sidebar es el del producto, no el del cliente). La paleta
 * del front del proyecto, si llega a existir, vive en su propia hoja raíz
 * static/media/css/style.css, y no se mezcla con esta.
 */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root{
	/* Marca */
	--xp-primary: #0464fb;
	--xp-primary-rgb: 4, 100, 251;

	/* Métricas del layout */
	--xp-sidebar-width: 256px;
	--xp-header-height: 56px;
	--xp-radius: .5rem;
	--xp-radius-lg: .75rem;

	/* Superficies */
	--xp-body-bg: #f3f4f7;
	--xp-surface: #ffffff;
	--xp-border: rgba(0, 0, 21, .1);
	--xp-muted: rgba(0, 0, 21, .5);

	/* Sidebar */
	--xp-sidebar-bg: #ffffff;
	--xp-sidebar-color: rgba(0, 0, 21, .7);
	--xp-sidebar-hover-bg: rgba(0, 0, 21, .04);
	--xp-sidebar-active-bg: rgba(var(--xp-primary-rgb), .1);
	--xp-sidebar-active-color: var(--xp-primary);

	/* Elevación */
	--xp-shadow-sm: 0 1px 2px rgba(0, 0, 21, .06);
	--xp-shadow: 0 .5rem 1rem rgba(0, 0, 21, .1);
	--xp-shadow-lg: 0 1rem 3rem rgba(0, 0, 21, .16);

	/* Puentes con Bootstrap */
	--bs-primary: var(--xp-primary);
	--bs-primary-rgb: var(--xp-primary-rgb);
	--bs-body-bg: var(--xp-body-bg);
	--bs-border-radius: var(--xp-radius);
	--bs-link-color: var(--xp-primary);
	--bs-link-hover-color: #0450d0;

	/*
	 * Bootstrap 5.3 pinta los enlaces con rgba(var(--bs-link-color-rgb), …), NO
	 * con --bs-link-color. Sin esta línea el token de arriba no llega a aplicarse
	 * y los enlaces se quedan en el azul por defecto de Bootstrap (#0d6efd).
	 */
	--bs-link-color-rgb: var(--xp-primary-rgb);
}

[data-bs-theme="dark"]{
	--xp-body-bg: #1a1c22;
	--xp-surface: #232529;
	--xp-border: rgba(255, 255, 255, .12);
	--xp-muted: rgba(255, 255, 255, .55);

	--xp-sidebar-bg: #232529;
	--xp-sidebar-color: rgba(255, 255, 255, .75);
	--xp-sidebar-hover-bg: rgba(255, 255, 255, .06);
	--xp-sidebar-active-bg: rgba(var(--xp-primary-rgb), .2);
	--xp-sidebar-active-color: #6ea6ff;

	--xp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
	--xp-shadow: 0 .5rem 1rem rgba(0, 0, 0, .4);
	--xp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .5);

	--bs-link-hover-color: #9cc4ff;
}


/* ==========================================================================
   2. Base
   ========================================================================== */

html,
body{
	height: 100%;
	margin: 0;
}

body.back-end{
	background: var(--xp-body-bg);
	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: .9375rem;
	color: var(--bs-body-color);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

:focus-visible{
	outline: 2px solid var(--xp-primary);
	outline-offset: 2px;
}


/* ==========================================================================
   3. Layout
   ========================================================================== */

.wrapper{
	display: flex;
	min-height: 100%;
	width: 100%;
}

/*
 * .content ocupa todo el ancho en móvil. A partir de lg (responsive.css) se
 * desplaza para dejar sitio al sidebar fijo.
 */
.content{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;   /* impide que las tablas anchas desborden el flex */
	width: 100%;
}

.main{
	flex: 1 1 auto;
	padding: 1rem 0 2rem 0;
}


/* ==========================================================================
   4. Sidebar
   ========================================================================== */

/*
 * Un único sidebar para todos los tamaños: en móvil vive fuera de pantalla y
 * entra con transform. No se clona en un offcanvas (evita DOM e ids duplicados).
 */
.sidebar{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1045;
	display: flex;
	flex-direction: column;
	width: var(--xp-sidebar-width);
	background: var(--xp-sidebar-bg);
	border-right: 1px solid var(--xp-border);
	transform: translateX(-100%);
	transition: transform .25s ease-in-out;
}

body.sidebar-show .sidebar{
	transform: translateX(0);
}

.sidebar-backdrop{
	position: fixed;
	inset: 0;
	z-index: 1040;
	background: rgba(0, 0, 21, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease-in-out, visibility .25s;
}

body.sidebar-show .sidebar-backdrop{
	opacity: 1;
	visibility: visible;
}

.sidebar-brand{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 var(--xp-header-height);
	height: var(--xp-header-height);
	padding: 0 1rem;
	border-bottom: 1px solid var(--xp-border);
}

.sidebar-brand img{
	max-height: 28px;
	width: auto;
}

.sidebar-nav{
	flex: 1 1 auto;
	padding: .75rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sidebar-nav .nav-title{
	margin: 1rem 0 .375rem .75rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--xp-muted);
}

.sidebar-nav .nav-title:first-child{
	margin-top: 0;
}

.sidebar-nav .nav-link{
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .625rem .75rem;
	border-radius: var(--xp-radius);
	color: var(--xp-sidebar-color);
	font-size: .875rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}

.sidebar-nav .nav-link:hover{
	background: var(--xp-sidebar-hover-bg);
	color: var(--bs-body-color);
}

.sidebar-nav .nav-link.active{
	background: var(--xp-sidebar-active-bg);
	color: var(--xp-sidebar-active-color);
	font-weight: 600;
}

.sidebar-nav .nav-link > i{
	flex: 0 0 1.25rem;
	font-size: 1.125rem;
	text-align: center;
}

/* Badge de aviso alineado al borde derecho del item */
.sidebar-nav .nav-link > .badge{
	margin-left: auto;
}

/* Grupos desplegables. \e06d = chevron-down en fontlucide.css. */
.sidebar-nav .nav-group-toggle::after{
	margin-left: auto;
	content: "\e06d";
	font-family: 'lucide';
	font-size: .875rem;
	color: var(--xp-muted);
	transition: transform .2s;
}

.sidebar-nav .nav-group-toggle[aria-expanded="true"]::after{
	transform: rotate(180deg);
}

.sidebar-nav .nav-group-items{
	padding-left: 1.875rem;
}

.sidebar-nav .nav-group-items .nav-link{
	padding: .5rem .75rem;
	font-size: .8125rem;
	font-weight: 400;
}

.sidebar-footer{
	flex: 0 0 auto;
	padding: .75rem;
	border-top: 1px solid var(--xp-border);
	font-size: .75rem;
	color: var(--xp-muted);
}


/* ==========================================================================
   5. Header
   ========================================================================== */

.header{
	position: sticky;
	top: 0;
	z-index: 1030;
	display: flex;
	align-items: center;
	gap: .5rem;
	min-height: var(--xp-header-height);
	padding: 0 1rem;
	background: var(--xp-surface);
	border-bottom: 1px solid var(--xp-border);
}

.header-toggler{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--xp-radius);
	color: var(--bs-body-color);
	font-size: 1.25rem;
}

.header-toggler:hover{
	background: var(--xp-sidebar-hover-bg);
}

.header-brand img{
	max-height: 24px;
	width: auto;
}

.header-nav{
	display: flex;
	align-items: center;
	gap: .25rem;
	margin-left: auto;
}

.header-nav .nav-link{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--xp-radius);
	color: var(--xp-muted);
	font-size: 1.0625rem;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}

.header-nav .nav-link:hover{
	background: var(--xp-sidebar-hover-bg);
	color: var(--bs-body-color);
}

.header-divider{
	width: 1px;
	height: 1.5rem;
	margin: 0 .375rem;
	background: var(--xp-border);
}

/*
 * Conmutador de tema: se muestra el icono del tema al que se va a cambiar, no
 * el del actual (en claro se ve la luna, en oscuro el sol).
 */
[data-xp-theme-icon]{
	display: none;
}

[data-bs-theme="light"] [data-xp-theme-icon="dark"],
[data-bs-theme="dark"] [data-xp-theme-icon="light"]{
	display: inline-block;
}

/*
 * Logo por tema. Al contrario que los iconos de arriba, aquí SÍ se muestra el
 * del tema actual: logo.png es texto azul oscuro y desaparece sobre el fondo
 * oscuro, así que en dark entra logo-alt.png, con el texto en blanco.
 *
 * Los dos archivos miden lo mismo (980x239), así que el cambio no mueve nada. El
 * oculto va con display:none, que lo saca también del árbol de accesibilidad: el
 * lector de pantalla anuncia un único "XPanel®", no dos.
 *
 * Se muestra como inline-block, no como block: en el login el logo va dentro de
 * un .text-center y con block se alinearía a la izquierda en vez de centrarse.
 */
[data-xp-theme-logo]{
	display: none;
}

[data-bs-theme="light"] [data-xp-theme-logo="light"],
[data-bs-theme="dark"] [data-xp-theme-logo="dark"]{
	display: inline-block;
}

.header .avatar{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background: var(--xp-primary);
	border-radius: 50%;
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
}


/* ==========================================================================
   6. Primitivas de página
   ========================================================================== */

.page-wrapper{
	padding: 0 1rem;
}

.page-container{
	margin-bottom: 1.5rem;
}

.page-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .5rem 0 1.25rem 0;
}

/*
 * Compat con las plantillas heredadas, que montan la cabecera con un .row de
 * Bootstrap dentro de .page-header. Al ser .page-header un contenedor flex, ese
 * .row sería un flex item y se encogería al contenido, dejando las acciones
 * pegadas al título; se fuerza a ocupar la línea completa.
 *
 * Solo se toca flex: los márgenes negativos del .row se dejan intactos a
 * propósito. Existen para cancelar el padding de .75rem de las columnas, así que
 * anularlos (margin:0) mete el título y el botón 12px hacia dentro y los
 * desalinea del borde del .page-body.
 *
 * Las plantillas nuevas no usan .row aquí: colocan los hijos directamente.
 */
.page-header > .row{
	flex: 1 1 100%;
}

.page-header h2{
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
}

.page-header nav > .breadcrumb{
	margin: .25rem 0 0 0;
	padding: 0;
	background: none;
	font-size: .8125rem;
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a{
	font-size: .8125rem;
	color: var(--xp-muted);
}

.page-header .breadcrumb-item a{
	color: var(--xp-primary);
	text-decoration: none;
}

/* Acciones de cabecera: en móvil son botones con texto; en lg se reducen a icono. */
.page-header .nav-actions{
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
}

.page-header .nav-actions .nav-link{
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .5rem .875rem;
	background: var(--xp-primary);
	border: 0;
	border-radius: var(--xp-radius);
	color: #fff;
	font-size: .8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: filter .15s;
}

.page-header .nav-actions .nav-link:hover{
	filter: brightness(.92);
}

.page-header .nav-actions .nav-link:active{
	filter: brightness(.85);
}

.page-body{
	padding: 1.25rem;
	background: var(--xp-surface);
	border: 1px solid var(--xp-border);
	border-radius: var(--xp-radius-lg);
	box-shadow: var(--xp-shadow-sm);
}

.page-title{
	margin-bottom: 1rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--xp-muted);
}

/* Estado vacío: secciones sin datos todavía, tablas sin resultados. */
.empty-state{
	padding: 3rem 1rem;
	text-align: center;
	color: var(--xp-muted);
}

.empty-state > i{
	display: block;
	margin-bottom: .75rem;
	font-size: 2.5rem;
	opacity: .35;
}

.empty-state p{
	margin-bottom: 0;
	font-size: .875rem;
}

/* Dropdowns de cabecera (header y page-header comparten aspecto) */
.header .dropdown-menu,
.page-header .nav-actions .dropdown-menu{
	padding: .375rem;
	background: var(--xp-surface);
	border: 1px solid var(--xp-border);
	border-radius: var(--xp-radius-lg);
	box-shadow: var(--xp-shadow-lg);
}

.header .dropdown-item,
.page-header .nav-actions .dropdown-item{
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .75rem;
	border-radius: var(--xp-radius);
	font-size: .8125rem;
}

.header .dropdown-item:hover,
.page-header .nav-actions .dropdown-item:hover{
	background: var(--xp-sidebar-hover-bg);
}

.header .dropdown-header{
	padding: .5rem .75rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--xp-muted);
}


/* ==========================================================================
   7. Formularios
   ========================================================================== */

.form-label{
	margin-bottom: .375rem;
	font-size: .8125rem;
	font-weight: 500;
}

.form-control,
.form-select{
	border-color: var(--xp-border);
	border-radius: var(--xp-radius);
	font-size: .875rem;
}

.form-control:focus,
.form-select:focus{
	border-color: var(--xp-primary);
	box-shadow: 0 0 0 .2rem rgba(var(--xp-primary-rgb), .15);
}

.form-control::placeholder{
	font-style: italic;
	color: var(--xp-muted);
}

.form-text{
	font-size: .75rem;
	color: var(--xp-muted);
}

small.form-text *{
	font-size: inherit;
}

.required::before{
	content: "*";
	padding-right: .25rem;
	color: var(--bs-danger);
	font-weight: 700;
}

.label-container{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.label-container a{
	margin-left: auto;
	color: var(--xp-primary);
	text-decoration: none;
	cursor: pointer;
}

select{
	cursor: pointer;
}

.btn{
	border-radius: var(--xp-radius);
	font-size: .875rem;
	font-weight: 500;
}

.btn-primary{
	--bs-btn-bg: var(--xp-primary);
	--bs-btn-border-color: var(--xp-primary);
	--bs-btn-hover-bg: #0450d0;
	--bs-btn-hover-border-color: #0450d0;
	--bs-btn-active-bg: #0343ad;
	--bs-btn-active-border-color: #0343ad;
}

.flex-stack{
	justify-content: space-between;
	align-items: center;
}

a.code{
	font-family: var(--bs-font-monospace);
	font-size: inherit;
	color: var(--bs-code-color);
	word-wrap: break-word;
}


/* ==========================================================================
   8. Tablas y DataTables
   ========================================================================== */

.page-body table{
	font-size: .875rem;
}

.page-body table thead th{
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--xp-muted);
	border-bottom-color: var(--xp-border);
}

.page-body .w-action{
	width: 45px;
	text-align: center;
}

.page-body tr.unactive td,
.page-body tr.unactive .w-action a,
.page-body .w-action .text-muted{
	color: var(--xp-muted) !important;
}

.page-body .w-action .disabled{
	color: var(--xp-muted) !important;
	pointer-events: none;
	opacity: .65;
}

.page-body .list-group-item{
	background: transparent;
	border-color: var(--xp-border);
	font-size: .875rem;
}

/*
 * Listas de enlaces (Quickmenú y herramientas del dashboard).
 *
 * Sin subrayado: son listas de navegación, no prosa. El subrayado azul por
 * defecto de Bootstrap convierte una columna de diez enlaces en una maraña; aquí
 * el enlace se lee por su posición en la lista y el color se reserva al hover,
 * igual que en el sidebar y en los dropdowns.
 */
.page-body .list-group-item a{
	color: var(--bs-body-color);
	text-decoration: none;
	transition: color .15s;
}

.page-body .list-group-item a:hover{
	color: var(--xp-primary);
}

.page-body .nav-tabs{
	border-bottom-color: var(--xp-border);
}

.page-body .nav-tabs .nav-link{
	padding: .5rem 1rem;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--xp-muted);
	font-size: .875rem;
}

.page-body .nav-tabs .nav-link.active{
	background: transparent;
	border-bottom-color: var(--xp-primary);
	color: var(--xp-primary);
	font-weight: 600;
}

.page-body .tab-content{
	padding: 1.5rem 0 0 0;
}

/* Fila arrastrable (SortableJS) */
.page-body table.sorter tbody tr{
	cursor: grab;
}

.page-body table.sorter tbody tr:active{
	cursor: grabbing;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{
	margin-bottom: 1rem;
	font-size: .8125rem;
}

.dataTables_wrapper .dataTables_length select{
	margin: 0 .5rem;
}

.dataTables_wrapper .dataTables_filter input{
	margin-left: .5rem;
	border: 1px solid var(--xp-border);
	border-radius: var(--xp-radius);
	padding: .375rem .75rem;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
	font-size: .8125rem;
	color: var(--xp-muted);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current{
	background: var(--xp-sidebar-active-bg) !important;
	border: 0 !important;
	border-radius: var(--xp-radius);
	color: var(--xp-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
	background: none;
	border: 0;
	color: var(--xp-muted) !important;
}


/* ==========================================================================
   9. Modales y respuestas $Ajax
   ========================================================================== */

.response{
	display: none;
}

.modal-content{
	background: var(--xp-surface);
	border: 0;
	border-radius: var(--xp-radius-lg);
	box-shadow: var(--xp-shadow-lg);
}

.modal-header,
.modal-footer{
	border-color: var(--xp-border);
}

#modal_AjaxResponse .modal-body{
	padding: 2.5rem 2rem;
	text-align: center;
}

#modal_AjaxResponse .modal-body span{
	font-size: 1rem;
}

#modal_AjaxResponse .modal-body .error{
	color: var(--bs-danger);
}

#modal_AjaxResponse .modal-body .error::before{
	content: "\e193";
	padding-right: .25rem;
	font-family: 'lucide';
	font-weight: 300;
}

#modal_AjaxResponse .modal-body .success{
	color: var(--bs-success);
}

#modal_AjaxResponse .modal-body .success::before{
	content: "\e226";
	padding-right: .25rem;
	font-family: 'lucide';
	font-weight: 300;
}

#modal_AjaxResponse .modal-body:not(.modal-body-error)::after{
	content: "Esta ventana se cierra automáticamente...";
	display: block;
	margin-top: .75rem;
	font-size: .8125rem;
	color: var(--xp-muted);
}


/* ==========================================================================
   10. Login
   ========================================================================== */

/*
 * Sin sesión no hay sidebar ni header: el login se centra solo, con un vh-100.
 * El padding vertical de .main se sumaría a esa altura y provocaría 48px de
 * scroll, así que aquí se anula. (El CSS anterior lo compensaba forzando
 * height:80vh sobre el .vh-100, que descentraba la tarjeta.)
 */
body.admin-not-logged-in .main{
	padding: 0;
}

.card-form{
	background: var(--xp-surface);
	border: 1px solid var(--xp-border);
	border-radius: var(--xp-radius-lg);
	box-shadow: var(--xp-shadow);
}

.card-form .card-header{
	padding: 2rem 2rem 0 2rem;
	background: transparent;
	border: 0;
	text-align: center;
}

.card-form .card-header h3{
	margin-bottom: .5rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--bs-body-color);
}

.card-form .card-header p{
	margin-bottom: 0;
	font-size: .875rem;
	color: var(--xp-muted);
}

.card-form .card-body{
	padding: 2rem 2rem 0 2rem;
}

.card-form .card-footer{
	padding: 1.5rem 2rem 2rem 2rem;
	background: transparent;
	border: 0;
}

.card-form .form-floating > label{
	color: var(--xp-muted);
}

.card-form .card-options{
	padding: 1.5rem 2rem;
}

.card-form .card-options .title{
	position: relative;
	text-align: center;
}

.card-form .card-options .title h4{
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: 2px 16px;
	background: var(--xp-surface);
	font-size: .75rem;
	text-transform: uppercase;
	color: var(--xp-muted);
}

.card-form .card-options .title::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--xp-border);
}

.card-form .card-options p a{
	color: var(--xp-muted);
	text-decoration: none;
	transition: color .3s;
}

.card-form .card-options p a:hover{
	color: var(--xp-primary);
}

.card-form .social-list-item{
	display: block;
	width: 2rem;
	height: 2rem;
	line-height: calc(2rem - 2px);
	border: 1px solid var(--xp-border);
	border-radius: 50%;
	color: var(--xp-muted);
	text-align: center;
	transition: all .3s;
}

.card-form .social-list-item:hover{
	background: var(--xp-primary);
	border-color: var(--xp-primary);
	color: #fff;
}

.other-links{
	margin-top: 1rem;
	text-align: center;
	font-size: .8125rem;
	color: var(--xp-muted);
}

.other-links a{
	color: inherit;
	text-decoration: none;
}

.other-links a:hover{
	color: var(--xp-primary);
}


/* ==========================================================================
   11. Vendor
   ========================================================================== */

/* bootstrap-select */
.dropdown.bootstrap-select{
	width: 100% !important;
	display: block;
}

.bootstrap-select button{
	width: 100% !important;
	background: var(--bs-body-bg);
	border: 1px solid var(--xp-border);
	border-radius: var(--xp-radius);
	font-size: .875rem;
}

.bootstrap-select button[aria-expanded="true"]{
	border-color: var(--xp-primary);
	outline: 0;
	box-shadow: 0 0 0 .2rem rgba(var(--xp-primary-rgb), .15);
}

.bootstrap-select input[type="search"]{
	margin-bottom: .25rem;
	border-color: transparent !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.bootstrap-select .dropdown-menu li a span.text{
	display: block;
}

.bootstrap-select .dropdown-menu li a span.text > small.text-muted{
	float: right;
}

/* CKEditor */
.ck-powered-by-balloon{
	display: none !important;
}

.ck-content{
	min-height: 350px;
	height: auto;
	max-height: 500px;
}

/* XPFinder® */
.xpfinder-button img{
	max-height: 16px;
}

#xpfinderLibrary .modal-header img{
	max-width: 180px;
}

#xpfinderLibrary #fileList{
	max-height: 400px;
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.file-item{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100px;
	text-align: center;
	cursor: pointer;
}

.file-item img,
.file-item .file-icon{
	max-width: 80px;
	max-height: 80px;
	margin-bottom: 5px;
}

.file-item .file-icon{
	font-size: 50px;
	color: var(--xp-muted);
}

.file-item .file-name{
	width: 100%;
	margin-top: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
}

.file-item button{
	position: absolute;
	top: 5px;
	width: 20px;
	height: 20px;
	border: none;
	color: #fff;
	border-radius: 50%;
	display: none;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.file-item .delete-button{
	right: 5px;
	background: rgba(255, 0, 0, .8);
}

.file-item .edit-button{
	left: 5px;
	background: rgba(0, 0, 255, .8);
}

.file-item:hover button{
	display: flex;
}