/*Variables*/
:root {
    --custom-color-base: #20c997;
    --custom-color-verde: #28a745;
    --custom-color-azul: #17a2b8;
    --custom-color-amarillo: #ffc107;
    --custom-color-rojo: #dc3545;
    --custom-color-blanco: #fff;
    --custom-color-gray: #6c757d;
    --custom-color-gray1: #454d55;
    --custom-color-gray2: #869099;
    --custom-color-negro: #000;
    --custom-color-negro-opacity: #000000b3;
    --custom-color-gray-opacity: #4951593d;
    --custom-color-invalido: #ff00192d;
    --custom-color-no-pertenece: #f7e277b0;
    --custom-color-no-representante: #e993ff91;
    --custom-color-nuevo-catalogo: #8cb7eb57;
    --custom-color-shadow-modal: #00bb83;
    --custom-color-selected: #007eff6b;
    --custom-color-marron: #bf610061;
}

/*General */
.gap-4 {
    columns: 3 !important;
    gap: 20px !important;
}

.rounded-tl {
    border-top-left-radius: 3px;
}

.rounded-tl-5 {
    border-top-left-radius: 5px;
}

.rounded-bl-5 {
    border-bottom-left-radius: 5px;
}

.rounded-tr {
    border-top-right-radius: 3px;
}

.rounded-0 {
    border-radius: 0 !important;
}

.w-350px {
    width: 350px !important;
}

.w-70 {
    width: 70% !important;
}

.hidden-after::after {
    display: none !important;
}

.w-450px {
    width: 450px !important;
}

.w-1100px {
    width: 1100px !important;
}

.z-all {
    z-index: 99999;
}

.z-allx {
    z-index: 999991;
}

.align-self-end {
    align-self: flex-end !important;
}

.opacity-7 {
    opacity: .7 !important;
}

.top-0 {
    top: 0px;
}

.left-0 {
    left: 0px;
}

.right-0 {
    right: 0px;
}

.bottom-0 {
    bottom: 0px;
}

.top-4 {
    position: relative;
    top: 4px !important;
}

.h-355px {
    height: 355px !important;
}

.h-250px {
    height: 250px !important;
}

.bg-base {
    background-color: var(--custom-color-base) !important;
    border-color: var(--custom-color-base) !important;
}

.bg-green-light {
    background-color: #377b4259 !important;
}

.bg-selected {
    background-color: var(--custom-color-selected) !important;
    color: var(--custom-color-negro);
}

.bg-invalido {
    background-color: var(--custom-color-invalido) !important;
}

.base-gray-claro {
    background-color: var(--custom-color-gray-opacity);
}

.text-base {
    color: var(--custom-color-base) !important;
}

.text-nowrap {
    text-wrap: nowrap !important;
}

.text-pretty {
    text-wrap: pretty !important;
}

.text-red {
    color: var(--custom-color-rojo) !important;
}

.text-black {
    color: var(--custom-color-negro) !important;
}

.overflow-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-clamp: 2;
}

.page-break-inside {
    page-break-inside: avoid;
}

.text-2lineas {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-3lineas {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.overflow-x {
    overflow-y: scroll !important;
}

.overflow-y {
    overflow-y: scroll !important;
}

.border-gray {
    border: 1px solid var(--custom-color-gray-opacity);
}

.border-base {
    border: 1px solid var(--custom-color-base);
}

.border-leyend {
    border-bottom: 2px solid #e7e7e7;
    border-left: 2px solid #e7e7e7;
}

.border-leyend.three {
    border-color: #82E0AA !important;
}

.border-leyend.five {
    border-color: #F7DC6F !important;
}

.border-leyend.seven {
    border-color: #F1948A !important;
}

.border-left-base {
    border-left: 1px solid var(--custom-color-base);
}

.border-top-base {
    border-top: 1px solid var(--custom-color-base);
}

.border-right-base {
    border-right: 1px solid var(--custom-color-base);
}

.border-bottom-base {
    border-bottom: 1px solid var(--custom-color-base);
}

.no-select {
    user-select: none !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-pointer:hover {
    transition: all ease-in-out 0.2s;
    background-color: var(--custom-color-gray-opacity);
}

.inputCantidad.sm {
    width: 65px;
}

.inputCantidad {
    width: 80px;
}

/* Height */
.min-h-100px {
    min-height: 100px !important;
}

.min-h-150px {
    min-height: 150px !important;
}

.min-h-400px {
    min-height: 400px !important;
}

.min-h-500px {
    min-height: 500px !important;
}

.min-h-600px {
    min-height: 600px !important;
}

.max-h-100px {
    max-height: 100px !important;
}

.max-h-150px {
    max-height: 150px !important;
}

.max-h-400px {
    max-height: 400px !important;
}

.max-h-500px {
    max-height: 500px !important;
}

.max-h-600px {
    max-height: 600px !important;
}

/* Font size */
.text-small {
    font-size: 14px !important;
}

.text-medium {
    font-size: 17px;
}

/* Utilities */
.text-through {
    text-decoration-line: line-through;
}

.prioridad {
    display: block;
    width: 10px;
    height: 10px;
    background-color: var(--custom-color-rojo);
    border-radius: 100% !important;
    overflow: hidden;
}

.content-box-small {
    min-width: 32px;
    min-height: 32px;
}

.optionSelected {
    border: 6px solid var(--custom-color-base);
}

.optionSelected:focus {
    border-color: var(--custom-color-base) !important;
}

/*Colores de tipo de lincencia*/
.licencia-basic {
    color: var(--custom-color-base);
}

.licencia-gold {
    color: var(--custom-color-amarillo);
}

.licencia-platinum {
    color: var(--custom-color-gray);
}

.licencia-black {
    color: var(--custom-color-negro);
}

/*botones flat*/
.flat-button {
    border-style: none !important;
    background-color: transparent !important;
}

/*borde izquierdo de tabla en el datatable*/
.left-border {
    border-top-left-radius: 20px !important;
}

/*borde derecho de tabla en el datatable*/
.right-border {
    border-top-right-radius: 20px !important;
}

/*borde inferior izquierdo de tabla en el datatable*/
.bottom-left-border {
    border-bottom-left-radius: 20px !important;
}

/*borde inferior derecho de tabla en el datatable*/
.bottom-right-border {
    border-bottom-right-radius: 20px !important;
}

/*color de icono de crear registro en el datatable*/
.ico-crear {
    color: var(--custom-color-verde) !important;
}

.ico-crear:hover {
    color: var(--custom-color-verde) !important;
}

/*color de icono de contar columnas en el datatable*/
.ico-contar {
    color: var(--custom-color-azul) !important;
}

/*color de icono de recargar pagina en el datatable*/
.ico-recargar {
    color: var(--custom-color-amarillo) !important;
}

/*color de icono de ocultar columnas en el datatable*/
.ico-ocultar {
    color: var(--custom-color-rojo) !important;
}

/*color de icono de ver en el datatable*/
.ico-ver {
    color: var(--custom-color-verde) !important;
}

.ico-ver:hover {
    color: var(--custom-color-verde) !important;
}

/*color de icono de editar en el datatable*/
.ico-editar {
    color: var(--custom-color-azul) !important;
    text-decoration: none !important;
}

.ico-editar:hover {
    color: var(--custom-color-azul) !important;
    text-decoration: none !important;
}

/*color de icono de colocar en cerrado en el datatable*/
.ico-cerrar {
    color: var(--custom-color-verde) !important;
}

/*color de icono de colocar en proceso en el datatable*/
.ico-proceso {
    color: var(--custom-color-amarillo) !important;
}

/*color de icono de colocar en abierto en el datatable*/
.ico-abrir {
    color: var(--custom-color-rojo) !important;
}

/*color de icono de activar en el datatable*/
.ico-activar {
    color: var(--custom-color-amarillo) !important;
}

/*color de icono de inactivar en el datatable*/
.ico-inactivar {
    color: var(--custom-color-amarillo) !important;
}

/*color de icono de borrar en el datatable*/
.ico-borrar {
    color: var(--custom-color-rojo) !important;
}

/*color de icono de restaurar en el datatable*/
.ico-restaurar {
    color: var(--custom-color-rojo) !important;
}

/*color de icono de password en el datatable*/
.ico-pass {
    color: var(--custom-color-gray) !important;
}

/*color de icono de excel en el datatable*/
.ico-excel {
    color: var(--custom-color-verde) !important;
}

.ico-excel:hover {
    color: var(--custom-color-verde) !important;
    background-color: var(--custom-color-blanco) !important;
}

/*color de icono de csv en el datatable*/
.ico-csv {
    color: var(--custom-color-azul) !important;
}

.ico-csv:hover {
    color: var(--custom-color-azul) !important;
    background-color: var(--custom-color-blanco) !important;
}

/*color de icono de imprimir en el datatable*/
.ico-imprimir {
    color: var(--custom-color-amarillo) !important;
}

.ico-imprimir:hover {
    color: var(--custom-color-amarillo) !important;
    background-color: var(--custom-color-blanco) !important;
}

/*color de icono de pdf en el datatable*/
.ico-pdf {
    color: var(--custom-color-rojo) !important;
}

.ico-pdf:hover {
    color: var(--custom-color-rojo) !important;
    background-color: var(--custom-color-blanco) !important;
}

/*color de icono de copiar en el datatable*/
.ico-copiar {
    color: var(--custom-color-gray) !important;
}

.ico-copiar:hover {
    color: var(--custom-color-gray) !important;
    background-color: var(--custom-color-blanco) !important;
}

/*color de icono de grupo de estado en el datatable*/
.ico-g-estado {
    color: var(--custom-color-gray) !important;
}

.ico-g-estado:hover {
    color: var(--custom-color-gray) !important;
    background-color: var(--custom-color-blanco) !important;
}

/*color de icono de registro por pagina en el datatable*/
.ico-registro-pagina {
    color: var(--custom-color-gray) !important;
}

.ico-registro-pagina:hover {
    color: var(--custom-color-gray) !important;
    background-color: var(--custom-color-blanco) !important;
}

/*color de icono de estado en el datatable*/
.ico-estado {
    color: var(--custom-color-gray) !important;
}

.ico-estado:hover {
    color: var(--custom-color-gray) !important;
    background-color: var(--custom-color-blanco) !important;
}

.ico-volver {
    font-size: 20px !important;
    color: var(--custom-color-base) !important;
}

.ico-ir {
    font-size: 20px !important;
    color: var(--custom-color-base) !important;
}

/*Radio del borde del selector de tablas*/
.table-border-radius {
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
}

/*Radio del borde del selector del menu*/
.menu-border-radius-20 {
    border-radius: 20px !important;
}

/*Radio de los campos*/
.field-border-radius-20 {
    border-radius: 20px !important;
}

/*Elemento activo del side bar*/
.sidebar-light-light .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-light .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--custom-color-base) !important;
    color: var(--custom-color-blanco) !important;
}

/*hacer hover sobre un elemento del menu*/
[class*="sidebar-light-"] .nav-treeview>.nav-item>.nav-link:focus,
[class*="sidebar-light-"] .nav-treeview>.nav-item>.nav-link:hover {
    background-color: var(--custom-color-base) !important;
    color: var(--custom-color-blanco) !important;
}

/*Color de letra de los elementos del sidebar del primer nivel*/
[class*="sidebar-light-"] .sidebar a {
    color: var(--custom-color-base) !important;
}

/*Color de letra de los elementos del sidebar segundo nivel*/
[class*="sidebar-light-"] .nav-treeview>.nav-item>.nav-link {
    color: var(--custom-color-base) !important;
}

/* Inicio Color de letra de los elementos del sidebar segundo nivel*/
[class*="sidebar-light-"] .nav-treeview>.nav-item>.nav-link.active {
    /*background-color: var(--custom-color-blanco) !important;*/
    color: var(--custom-color-base) !important;
}

[class*="sidebar-light-"] .nav-treeview>.nav-item>.nav-link.active:hover {
    background-color: var(--custom-color-base) !important;
    color: var(--custom-color-blanco) !important;
}

[class*="sidebar-light-"] .nav-sidebar>.nav-item:hover>.nav-link {
    background-color: var(--custom-color-base) !important;
    color: white !important;
}

/* Fin Color de letra de los elementos del sidebar segundo nivel*/

/*propiedades del texto al lado del logo*/
#brandText {
    color: var(--custom-color-base) !important;
    font-weight: normal !important;
}

/*Inicio color del table head personalizado*/
.custom-thead-bg {
    border-color: var(--custom-color-base) !important;
    background-color: var(--custom-color-base) !important;
}

.custom-thead-bg-dark-mode {
    border-color: var(--custom-color-gray1) !important;
    background-color: var(--custom-color-gray1) !important;
}

.table-dark td,
.table-dark th,
.table-dark thead th {
    border: 0px;
}

.table-dark tr th {
    vertical-align: middle;
}

/*Fin color del table head personalizado*/

/*color del head del modal personalizado*/
.custom-modalhead-bg {
    border-color: var(--custom-color-base) !important;
    background-color: var(--custom-color-base) !important;
    color: var(--custom-color-blanco) !important;
}

/*color del head del modal personalizado*/
.custom-modalbutton-bg {
    border-color: var(--custom-color-base) !important;
    background-color: var(--custom-color-base) !important;
    border-radius: 20px;
}

.custom-modalbutton-bg-danger {
    border-color: var(--custom-color-rojo) !important;
    background-color: var(--custom-color-rojo) !important;
    border-radius: 20px;
}

/*color del side bar personalizado*/
.custom-sidebar-bg {
    background-color: var(--custom-color-blanco) !important;
    border-color: var(--custom-color-base) !important;
}

/*color de fondo de menu de login*/
.custom-login-bg {
    background-color: var(--custom-color-negro-opacity) !important;
}

/*Boton de login*/
.custom-loginBtn-bg {
    border-radius: 20px !important;
    color: var(--custom-color-blanco) !important;
    background-color: var(--custom-color-base) !important;
    font-size: 16px !important;
}

/*Inputs del login*/
.custom-loginField-bg {
    background-color: var(--custom-color-blanco) !important;
    color: var(--custom-color-negro) !important;
    border-radius: 20px !important;
    border: 0px solid transparent !important;
}

/*Color de perfil*/
.custom-perfil-bg {
    background-color: var(--custom-color-base) !important;
}

/*Favoritos*/
.custom-badge-pill {
    background-color: var(--custom-color-base) !important;
    color: var(--custom-color-blanco) !important;
    font-weight: 500 !important;
}

.ico-favorito {
    color: var(--custom-color-base) !important;
}

/* Inicio estilos Data tables*/
.dropdown-item.active,
.dropdown-item:active {
    color: var(--custom-color-blanco) !important;
    text-decoration: none !important;
    background-color: var(--custom-color-base) !important;
}

div.dt-button-collection {
    width: 300px !important;
}

.page-item.active .page-link {
    color: var(--custom-color-blanco) !important;
    background-color: var(--custom-color-base) !important;
    border-color: var(--custom-color-base) !important;
}

.dt-btn-split-wrapper button[type="button"] {
    margin-bottom: 5px !important;
    border-color: var(--custom-color-base) !important;
    background-color: var(--custom-color-base) !important;
    max-width: 150px !important;
}

.dt-btn-split-wrapper>.dropdown-toggle {
    margin-bottom: 5px !important;
    border-color: var(--custom-color-base) !important;
    background-color: var(--custom-color-base) !important;
    width: 50px !important;
}

/* Fin estilos Data tables*/

/*Estilos de club de clientes*/
.estadoClub {
    font-size: 16px;
    margin-left: 12px;
    border-radius: 4px;
    padding: 6px 10px;
    display: inline-block;
}

.estadoClub.text-success {
    color: #28a745 !important;
}

.estadoClub.text-danger {
    color: #dc3545 !important;
}

/*Paginado*/
.page-link {
    color: var(--custom-color-base) !important;
}

/*Migas de pan*/
.breadcrumb-item>a {
    color: var(--custom-color-base) !important;
}

/*round de cards de Dashboard*/
.small-box {
    border-radius: 0.5rem !important;
}

/*Iconos de cards de Dashboard*/
.small-box .icon>i.fa,
.small-box .icon>i.fab,
.small-box .icon>i.fad,
.small-box .icon>i.fal,
.small-box .icon>i.far,
.small-box .icon>i.fas,
.small-box .icon>i.ion {
    font-size: 50px !important;
}

/*Alto del input text area*/
textarea {
    height: 100px !important;
}

textarea.auto {
    resize: vertical !important;
    overflow: auto !important;
    min-height: 150px !important;
}

/* Inicio Estilos para las tablas de los index */
tfoot input {
    width: 100% !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    border: none !important;
}

.isSearchableInput {
    width: 100% !important;
    border-radius: 0.2rem !important;
    border: 1px solid var(--custom-color-base) !important;
    background-color: #fff !important;
}

.isSearchable,
.isSpace {
    text-align: center !important;
    border: none !important;
}

#resultadosTable thead tr:first-child,
#resultadosTable2 thead tr:first-child,
#resultadosTable3 thead tr:first-child,
.resultadosTable thead tr:first-child {
    background-color: #fff !important;
}

.isSelected {
    background-color: var(--custom-color-base) !important;
}

#resultadosTable_filter,
#resultadosTable2_filter,
#resultadosTable3_filter {
    display: inline-block;
    float: right;
}

#resultadosTable_filter input,
#resultadosTable2_filter input,
#resultadosTable3_filter input {
    width: 30vw !important;
    border: 1px solid var(--custom-color-base) !important;
}

/* Fin Estilos para las tablas de los index */

/* Inicio de estilos para validaciones de inputs */
form input:invalid {
    border: 2px solid var(--custom-color-rojo) !important;
}

form input:valid {
    border: 2px solid var(--custom-color-base) !important;
}

form input:valid.ignore {
    border: 1px solid var(--custom-color-gray-opacity) !important;
}

/* Fin de estilos para validaciones de inputs */

/*Inicio de custom de los checkbox*/
input[type="checkbox"] {
    appearance: none;
    cursor: pointer;
    background-color: var(--custom-color-blanco);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid var(--custom-color-base);
}

input[type="checkbox"]:checked {
    background-color: var(--custom-color-base);
    border: 0px !important;
}

input[type="checkbox"]:disabled {
    background-color: var(--custom-color-blanco);
    border: 2px solid var(--custom-color-base);
    background-image: none;
}

input[type="checkbox"]:disabled:checked {
    background-color: var(--custom-color-gray);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

/*Fin de custom de los checkbox*/

/*Inicio elementos del search lateral*/

.text-light {
    color: var(--custom-color-negro-opacity) !important;
}

/*Fin elementos del search lateral*/

/*Inicio de reglas randoms*/

.date-novedades {
    font-size: medium !important;
    color: var(--custom-color-gray2) !important;
}

.custom-hr-separtor {
    background-color: var(--custom-color-base);
    margin: 0.5rem 0.75rem;
    box-sizing: border-box;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #ffffff !important;
    background-color: var(--custom-color-base);
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: bold !important;
}

/*Fin de reglas randoms*/

/*Barra de busqueda*/
.barra_busqueda {
    width: 100%;
    padding: 0px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    font-size: 16px !important;
    z-index: 200;
}

.barra_busqueda .input_box,
.barra_busqueda .resultados_box {
    width: 60%;
}

.barra_busqueda.xl .input_box,
.barra_busqueda.xl .resultados_box {
    width: 80%;
}

.barra_busqueda.barra-full .input_box,
.barra_busqueda.barra-full .resultados_box {
    width: 100%;
}

.barra_busqueda .input_box {
    display: flex;
}

.barra_busqueda .input_box input {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 8px 12px;
}

.barra_busqueda.xl .input_box input {
    padding: 22px 14px;
    font-size: 17px;
}

.barra_busqueda .input_box .icono {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;

    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

/* Resultados box */
.barra_busqueda .resultados_box {
    -webkit-box-shadow: 0px 0px 8px 0px var(--custom-color-shadow-modal);
    -moz-box-shadow: 0px 0px 8px 0px var(--custom-color-shadow-modal);
    box-shadow: 0px 0px 8px 0px var(--custom-color-shadow-modal);
    position: absolute;
    top: 48px;
    background-color: #fff;
}

.barra_busqueda .resultados_box {
    overflow-y: scroll;
}

.barra_busqueda .resultados_box.notMove {
    top: 0px;
}

.barra_busqueda.xl .resultados_box {
    top: 58px;
}

.barra_busqueda.xl .resultados_box .listResult {
    max-height: 360px;
}

.barra_busqueda.md .resultados_box .listResult {
    max-height: 300px;
}

.barra_busqueda .resultados_box .listResult {
    max-height: 360px;
}

.text-capitalize {
    text-transform: capitalize;
}

/*Fin de barra de busqueda*/

/*Mensaje de carga*/
.mensaje_carga {
    position: fixed !important;
    bottom: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 10000;
    background-color: var(--custom-color-negro-opacity);
    user-select: none;
}

.z-30 {
    z-index: 30;
}

.mensaje_carga .container {
    width: 250px;
    height: 200px;
    border-radius: 6px;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mensaje_carga .mensaje {
    margin-top: 16px;
    font-weight: bold;
    margin-bottom: 12px;
    font-size: 22px;
}

.mensaje_carga .spinner {
    width: 50px;
    height: 50px;
    margin-right: 16px;
}

/*Fin de Mensaje de carga*/

/* Modal componente */
.modalComponent {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background-color: var(--custom-color-negro-opacity);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
}

.modalComponent .box {
    background-color: var(--custom-color-blanco);
    min-width: 50%;
    border-radius: 4px;
    padding: 16px;
}

.modalComponent .box .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--custom-color-base);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.modalComponent .footer {
    display: flex;
    justify-content: flex-end;
}

.modalComponent .inputCantidad {
    width: 100px;
}

.modalComponent .inputCantidad.sm {
    width: 60px;
}

/* Selects Interactivos */
.items_agregados_nombre {
    display: flex;
    flex-wrap: wrap;
}

.texto_itemsInteractivos, .texto_itemsInteractivosOtroFondo {
    user-select: none;
    border: none !important;
    position: relative;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 15px !important;
    padding: 3px 8px;
    margin-right: 8px;
    margin-top: 8px;
}

.texto_itemsInteractivos {
    background-color: var(--custom-color-base) !important;
    color: var(--custom-color-blanco) !important;
}

.texto_itemsInteractivos.viewShow {
    cursor: default !important;
}

.texto_itemsInteractivos::after {
    content: "x";
    width: 30px;
    height: 30px;
    color: #fff;
    font-size: 17px !important;
    font-weight: bold;
    margin-left: 6px;
}

.texto_itemsInteractivos.viewShow::after {
    width: 0px !important;
    height: 0px !important;
    content: "";
    margin: 0px !important;
}

.texto_itemsInteractivos.viewShow,
.texto_itemsInteractivos.viewShow:hover,
.texto_itemsInteractivos.viewShow:active {
    background-color: var(--custom-color-gray) !important;
}

/*Fin de Selects Interactivos */

/* Cargar imagen */
.miniatura_imagen {
    width: 130px;
    height: 130px;

    object-fit: contain;
    border-radius: 2px;
    overflow: hidden;
    margin: 2px 10px;
    border: 1px dashed var(--custom-color-base);
    user-select: none !important;
}

.miniatura_imagen.venta {
    width: 50px !important;
    height: 50px !important;
}

.container-minuatura {
    position: relative;
}

.container-minuatura .btn-show-image {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    right: 76px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: var(--custom-color-blanco);
    color: var(--custom-color-blanco);
}

.container-minuatura .btn-delete-image {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    right: 0px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: var(--custom-color-rojo);
    color: var(--custom-color-blanco);
}

.container-minuatura .btn-download-image {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    right: 38px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: var(--custom-color-blanco);
    color: var(--custom-color-blanco);
}

.container-minuatura .principal {
    position: absolute;
    bottom: 2px;
    left: 0px;
    right: 0px;
    display: flex;
    justify-content: center;
    margin: 0px auto;
}

.container-minuatura .principal span {
    background-color: var(--custom-color-base);
    color: var(--custom-color-blanco);
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
    padding: 2px 4px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.cargar_imagen {
    display: flex;
    user-select: none !important;
}

.cargar_imagen input {
    display: none;
}

.cargar_imagen .texto {
    margin-left: 10px;
    color: var(--custom-color-base);
    font-size: 15px;
}

.cargar_imagen .image {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: none;
}

.cargar_imagen .boton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    cursor: pointer;
    padding: 4px;
}

.cargar_imagen .boton.style {
    font-size: 18px !important;
    border: 1px dashed var(--custom-color-base);
    border-radius: 4px;
    color: var(--custom-color-base) !important;
    transition: all ease-in 0.2s;
    overflow: hidden;
}

.cargar_imagen .boton.style:hover {
    border-radius: 6px;
    font-size: 20px !important;
    -webkit-box-shadow: -3px 3px 23px -6px rgba(32, 201, 151, 1);
    -moz-box-shadow: -3px 3px 23px -6px rgba(32, 201, 151, 1);
    box-shadow: -3px 3px 23px -6px rgba(32, 201, 151, 1);
}

/* Minuatura de imagen de articulo */
.thumbnail-articulo {
    width: 64px;
    height: 64px;
    border-radius: 2px;
    overflow: hidden;
}

.thumbnail-articulo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*caja de icono*/
.caja-ico {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 48px;
    min-height: 32px;
    background-color: var(--custom-color-base);
    color: var(--custom-color-blanco);
    border-radius: 0.25rem;
}

/* Orden/Factura compra */
tbody.compraDetalle tr.articuloPrecargado {
    background-color: var(--custom-color-marron) !important;
}

tbody.compraDetalle tr.arituloInvalido,
tbody tr.rowInvalida {
    background-color: var(--custom-color-invalido) !important;
}

tbody.compraDetalle tr.articuloNoPertenece {
    background-color: var(--custom-color-no-pertenece) !important;
}

tbody.compraDetalle tr.articuloNoRepresentante {
    background-color: var(--custom-color-no-representante) !important;
}

tbody.compraDetalle tr.articuloNuevoCatalogo {
    background-color: var(--custom-color-nuevo-catalogo) !important;
}

tbody.compraDetalle td {
    vertical-align: middle !important;
}

tbody.compraDetalle input.inputCantidad {
    width: 84px !important;
}

tbody.compraDetalle select.selectAlmacen {
    width: 92px !important;
}

tbody.compraDetalle input.inputNumber {
    width: 78px !important;
}

/* Articulo detalle error */
.mensajeError .body {
    margin-top: 4px;
    display: none;
    position: absolute;
    z-index: 10;
    /* Agrega aquí las propiedades de posicionamiento que desees */
}

.mensajeError:hover .body {
    text-align: left;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    font-weight: normal !important;
    padding: 4px 8px;
}

/* Leyenda */
.leyenda-tabla .caso {
    display: flex;
    align-items: center;
}

.leyenda-tabla .caso .square {
    width: 16px;
    height: 16px;
    display: block;
    border-radius: 1px;
    border: 1px solid var(--custom-color-gray1);
}


.leyenda-tabla .caso .square.articuloPrecargado {
    background-color: var(--custom-color-marron);
}

.leyenda-tabla .caso .square.arituloInvalido,
.leyenda-tabla .caso .square.rowInvalida {
    background-color: var(--custom-color-invalido);
}

.leyenda-tabla .caso .square.articuloNoPertenece {
    background-color: var(--custom-color-no-pertenece);
}

.leyenda-tabla .caso .square.articuloNoRepresentante {
    background-color: var(--custom-color-no-representante);
}

.custom-input-icons {
    border: 5px solid var(--custom-color-base) !important;
    background-color: var(--custom-color-base) !important;
    color: var(--custom-color-blanco) !important;
}

.custom_texto_subtitulo {
    font-size: 1.3rem;
}

.credito-box {
    text-align: center;
    font-size: 15px;
    color: #fff !important;
    padding: 6px 10px
}

.reveal-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 1.2rem;
}

.leyenda-tabla .caso .square.articuloNuevoCatalogo {
    background-color: var(--custom-color-nuevo-catalogo);
}

.h2-reporte {
    color: #00bb83;
    margin-top: 15px;
}

/*Impresión*/

@media all {

    .imprimir {
        display: none;
    }

    .noImprimir {
        display: block;
    }

}

@media print {

    .imprimir {
        display: block;
    }

    .noImprimir {
        display: none;
    }

}

/*Conteo*/
.articulo-apto-conteo {
    background-color: #82E0AA;
}

.articulo-no-apto-conteo {
    background-color: #F1948A;
}

.color-3-dias {
    background-color: #82E0AA !important;
}

.color-5-dias {
    background-color: #F7DC6F !important;
}

.color-7-dias {
    background-color: #F1948A !important;
}

.color-total {
    background-color: #2471A3 !important;
}

/*Ordenar tabla*/
.ordenable {
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.asc:after {
    content: ' ↑';
}

.desc:after {
    content: " ↓";
}

/*Administracion/Tesoreria Pagos*/
.input-abono-factura {
    min-width: 100px;
}

/*Mostrar imágenes*/
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-overlay img {
    max-width: 90%;
    max-height: 90%;
}

.fullscreen-overlay .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1060;
}