/* Personalizo el mensaje de error para las validaciones manuales */

.is-invalid { border: 2px solid #dc3545; }
.error-message { color: #dc3545; font-size: 12px; margin-top: 5px; display: block; }

/* Personaliza los mensajes Toastr */

.toast {opacity: 1 !important; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); }

/* Rutina para visualizar el movimiento en el drag & drop de las tablas */

.sortable-placeholder { background: #ffeeba; border: 2px dashed #ff9800; height: 45px !important; display: table-row !important; visibility: visible !important; }

/* Rutina para bloquear la pantalla para un proceso */

.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 9999; display: flex; justify-content: center; align-items: center; }
.contenido-overlay { text-align: center; color: white; font-size: 18px; }
.mensaje-carga { margin-top: 10px; }
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul { width: 300px !important; }
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a { width: 370px !important; display: flex; align-items: center; justify-content: start; text-align: left; white-space: nowrap; }

/* Transparencia en el header */

#page-topbar { background-color: rgba(0, 0, 0, 0.7) !important; backdrop-filter: blur(10px); }

/* Cambio el icono del cursor cuando se pone arriba del icono para reordenar los pasos */
/* en las pantallas de flujos de trabajo y solicitudes de autorizacion */

.fa-align-justify { cursor: grab !important; }

/* Style para los menus de opciones */

.menu-badge-icon { padding: 2px 7px; display: flex; align-items: center; justify-content: center; background-color: transparent; }
.menu-badge-icon i { color: gray !important; transition: color 0.2s ease-in-out; }
.menu-badge-icon:hover i { color: #000000 !important; cursor: pointer; }
.menu-separator { width: 1px; height: 15px; background-color: gray; margin: 0 2px; }
.menu-badge-soft-dark { border-radius: 5px; overflow: hidden; background-color: #e0e0e0; }

/* Bisel del Avatar */

.avatar-bisel { box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.6), inset 0 0 12px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 0, 0, 0.4); }
.avatar-bisel-chico { border: 2px solid #fff; box-shadow: inset 0 0 4px rgba(0,0,0,0.6), inset 0 0 2px rgba(255,255,255,0.9), 0 0 4px rgba(0,0,0,0.5); }

/* Formatos generales */

.separador { margin: 0px; padding: 0px; }

/* Reducir el tamaño de los botones */

.dataTables_wrapper .dataTables_paginate .paginate_button { font-size: 12px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { font-size: 12px !important; }
.dataTables_wrapper .dataTables_filter { float: right !important; text-align: right !important; white-space: nowrap; }