@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: "DejaVuSans";
  src: url("font/DejaVuSans.eot"),
       url("font/DejaVuSans.otf"),
       url("font/DejaVuSans.ttf"),
       url("font/DejaVuSans.woff");
}
@font-face {
  font-family: "DejaVuSans-ExtraLight";
  src: url("font/DejaVuSans-ExtraLight.eot"),
       url("font/DejaVuSans-ExtraLight.otf"),
       url("font/DejaVuSans-ExtraLight.ttf"),
       url("font/DejaVuSans-ExtraLight.woff");
}
@font-face{
  font-family:'FontAwesome';
  src:url('font/icon/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('font/icon/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal;
}
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: #DDD;
}
::-webkit-scrollbar-thumb {
  background: #999;
}
::-webkit-scrollbar-thumb:hover {
  background: #00CCFF; 
}
html, body{
  height:100%;
  color:#666;
  font-size:12px;
  margin: 0px;
  padding: 0px;
}
body{
  font-family: 'DejaVuSans';
}
a {
  cursor: pointer;
  display: inline-block;
}
i {
  cursor: pointer;
}
input, select {
  border: 0;
  font-size: 14px;
  padding: 8px;
  outline: 0;
}
input[type=text], input[type=number], input[type=password], select, textarea.direccion-abierta, input[type=date], input[type=datetime-local] {
  background-color: #F4F6F8;
  border: 2px solid #E0E4E7;
}
input[type=text]:hover, input[type=number]:hover, input[type=password]:hover, input[type=text]:focus, input[type=number]:focus, 
input[type=password]:focus, select:focus, textarea.direccion-abierta:hover, textarea.direccion-abierta:focus, input[type=date]:hover, 
input[type=date]:focus, input[type=datetime-local]:focus, input[type=datetime-local]:hover {
  background-color: #F4F6F8;
  border: 2px solid #00CCFF;
}
input[type=button], input[type=submit], .btn_contrasena {
  border: 2px solid #000;
  color: #000;
  background-color: #FFF;
  cursor: pointer;
  padding: 5px 10px;
}
input[type=button]:hover, input[type=submit]:hover, input[type=button]:focus, input[type=submit]:focus, .btn_contrasena:hover, .btn_contrasena:focus {
  background-color: #E0E4E7;
  border: 2px solid #00CCFF
}
/* The container */
.container {
  display: inline-block;
  position: relative;
  padding-left: 15px;
  margin-bottom: 0px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-right: 15px;
}
/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 12px;
  width: 12px;
  background-color: #FFF;
  border: 1px solid #747474;
  border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00CCFF;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.sendbtn {
  border: 2px solid #a4a4a4;
    color: #000;
    background-color: #b4b4b4;
    cursor: pointer;
    padding: 5px 10px;
    display: inline-block;
}
.sendbtn:hover, .sendbtn:focus {
    background-color: #c8c8c8;
}
#tabla_datos tr.datos {
  background-color: #FFFFFF;
}
#tabla_datos tr.datos2 {
    background-color: #e8e8e8;
}
#tabla_datos tr.datos3.r {
  background-color: #ECEBEB;
}
#tabla_datos tr.datos:hover, #tabla_datos tr.datos2:hover, #tabla_datos tr.datos3.r:hover {
    background-color: #DDDDDD;
}
.main {
  width: 100%;
  height: 100%;
  min-width: 1200px;
  position: relative;
}
.layout {
  width: 100%;
}
.fondo {
  padding-top: 14px;
  background-color: #E0E4E7;
  position: absolute;
  top: 112px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: calc(100% - 126px);
  /*max-height: 800px;;*/
  width: 100%;
}
#menu-mov {
  margin-top: 13px;
  display: none;
}
.menu-movil {
  text-align: right;
  position: relative;
}
.menu-movil-contenido {
  display: none;
  position: absolute;
  top: 0px;
  right: 0;
  left: 0;
  z-index: 5;
  background-color: #FFF;
}
.menu-movil-contenido > .modulo {
  width: calc(100% - 30px);
}
.menu-movil-contenido > .modulo > div, .menu-movil-contenido > .modulo > a > div {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 70px);
    height: 100%;
}
.barra-titulo {
  background-color: #E5E5E5;
  font-size: 26px;
  padding: 5px 90px;
  height: 40px; 
  line-height: 1.5;
  overflow: auto;
}
.header {
  height: 112px;
  min-width: 112px;
}
.header-modulo {
    height: 80px;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.15);
}
.logo {
  height: 112px;
}
.logo-modulo {
  height:80px;
}
.logo-modulo-margen {
  height:60px;
  margin: 10px;
}
.align-left{
  float:left;
  font-family: "DejaVuSans-ExtraLight";
}
.align-right{
  float:right;
}
.menu, .menu-modulo, .menu-lista, .menu-listaC {
  display: inline-block;
  font-family: 'FontAwesome';
  font-size: 40px;
  width: 50px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}
.menu:before, .menu-modulo:before, .menu-lista:before, .menu-listaC:before {
  content:"\f0c9";
}
.menu-modulo, .menu-listaC {
  color: #00CCFF;
}
.menu:hover, .menu-lista:hover {
  color: #00CCFF !important;
}
.menu-modulo:hover {
    color: inherit;
}
.menu-lista, .menu-listaC {
  height: 25px;
  width: 30px;
  font-size: 20px;
}
.menu-contenido {
  display: none;
  border-radius: 10px; 
  background-color: #E5E5E5; 
  position: absolute; 
  width: 226px; 
  top: 60px; 
  left: -190px;
  z-index: 101;
}
.menu-contenido-mod, .menu-lista-mod, .menu-contenido-mod-sub {
    display: none;
    border-radius: 10px; 
    background-color: #E5E5E5; 
    position: absolute; 
    width: 226px; 
    top: 45px; 
    left: -190px;
    z-index: 200;
    border: 1px solid #c0c0c0;
}
.menu-lista-mod {
  left: -17px;
  width: 50px;
  top: 35px;
}
.menu-contenido-mod-sub {
  left: -270px;
    width: 240px;
    top: 10px;
    padding: 10px;
}
.menu-contenido a {
  display: inline-block; 
  width: 100%; 
  height: 100%; 
  line-height: 32px;
}
.menu-contenido img {
    vertical-align: middle;
}
.linea-azul {
  width: 5px;
  height: 50px;
  vertical-align: middle;
  margin: auto 10px;
  background-color: #00CCFF;
  display: inline-block;
}
.letra-azul {
  color: #00CCFF !important;
}
.btn-reportes {
    display: inline-block;
    padding: 10px 20px;
    background: #000000;
    color: #FFFFFF;
    width: 140px;
    text-align: center;
    margin: 20px auto;
    cursor: pointer;
    margin-right: 25px;
    border-radius: 5px;
}
.btn-reportes:hover{
  background: #00CCFF;
  color: #FFFFFF;
}
.login {
  display: inline-block;
  width: 33%;
  vertical-align: top; 
}
.loginMovil {
  padding-top: 50px;
  display: none;
  width: 100%;
}
.loginAviso {
  width: 100%;
  height: 49.8%;
  max-height: 49.8%;
  display: inline-block;
  overflow: hidden;
}
.loginAvisos {
  display: inline-block;
  width: 66%;
  height: 100%;
}
.modulos {
  display: inline-block;
  width: 200px;
  background-color: #FFF;
  overflow: auto;
  overflow-x: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  
  scrollbar-width: auto;
  z-index: 3;
}
/* Scroll del menu */
  
  .modulos::-webkit-scrollbar {
      width: 17px; /* Aquí lo haces más ancho que el 'auto' (~15px) */
      height: 17px; /* Si quieres también en horizontal */
    }
    
    .modulos::-webkit-scrollbar-track {
      background: #f0f0f0;
    }
    
    .modulos::-webkit-scrollbar-thumb {
      background: #999;
      border-radius: 8px;
      border: 4px solid #f0f0f0; /* Hace un efecto de grosor visible */
    }

.barra_menu {
  width: 30px;
  display: none;
  z-index: 2;
}
.modulo {
  padding: 20px 10px 5px 10px;;
  width: 180px;
  height: 55px;
  color: #000000;
  position: relative;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.15);
  cursor: pointer;
}
.modulo img {
  height: 55px;
  display: inline-block;
}
.modulo table {
  height: 100%;
}
.modulo > a {
  display: block;
  width: 100%;
  height: 100%;
}
.modulo > div, .modulo > a > div {
  display: inline-block;
  vertical-align: top;
  width: 120px;
  height: 100%;
}
.control-menu {
  background-color : #dddddd;
  display: none;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15);
}
.padre {
  border: 1px solid #CCC;
}
.content {
  display: inline-block;
    background-color: #FFF;
    overflow: auto;
    overflow-x: hidden;
    position: absolute;
    left: 214px;
    top: 14px;
    bottom: 20px;
  width: calc(100% - 234px);
  overflow: auto;
  overflow-x: hidden;
  -webkit-box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
  -moz-box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
  box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
    scrollbar-color: #999 #DDD;
    scrollbar-width: thin;
}
.icono {
    display: inline-block;
  height: 25px;
  width: 25px;
  background-size: contain;
  vertical-align: middle;
}
.icono-chico {
    display: inline-block;
    height: 16px;
    width: 16px;
    background-size: contain;
    vertical-align: middle;
}
.icono-mediano {
    /*display: inline-block;*/
    display: none;
    height: 40px;
    width: 40px;
    background-size: contain;
    vertical-align: middle;
}
.icono-mediano-reporte {
    display: inline-block;
    height: 40px;
    width: 40px;
    background-size: contain;
    vertical-align: middle;
}
.icono-grande {
    display: inline-block;
    height: 60px;
    width: 60px;
    background-size: contain;
    vertical-align: middle;
}
.rectoprod {
  background-image: url("img\producto-01.png");
  background-size: cover;
}
.escaner {
    background-image: url("img/escanear.png");
    background-size: cover;
}
.buscar1 {
    background-image: url("img/Buscar-01.png");
    background-size: cover;
}
.agregar1, .agregar2:hover {
    background-image: url("img/Agregarcliente-01.png");
    background-size: cover;
}
.agregar1_verde {
    background-image: url("img/Agregarcliente-01_verde.png");
    background-size: cover;
}
.agregar1_naranja {
    background-image: url("img/Agregarcliente-01_naranja.png");
    background-size: cover;
}
.ver1, .ver2:hover {
  background-image: url("img/Ver-01.png");
  background-size: cover;
}
.editar1, .editar2:hover {
    background-image: url("img/Editar-01.png");
    background-size: cover;
}
.eliminar1, .eliminar2:hover {
    background-image: url("img/Borrar-01.png");
    background-size: cover;
}
.pdf1, .pdf2:hover {
    background-image: url("img/GenerarPDF-01.png");
    background-size: cover;
}
.pdfs1, .pdfs2:hover {
    background-image: url("img/PDFconsubpartidas-01.png");
    background-size: cover;
}
.movimientos1, .movimientos2:hover {
    background-image: url("img/Movimientos-01.png");
    background-size: cover;
}
.duplicar1, .duplicar2:hover {
    background-image: url("img/duplicar-01.png");
    background-size: cover;
}
.enviar1, .enviar2:hover {
    background-image: url("img/enviarpormail-01.png");
    background-size: cover;
}
.nota1, .nota2:hover {
    background-image: url("img/notasinternas-01.png");
    background-size: cover;
}
.paloma1, .paloma2:hover {
    background-image: url("img/Paloma-01.png");
    background-size: cover;
}
.like1, .like2:hover {
    background-image: url("img/like2.png");
    background-size: cover;
}
.reporte-cliente1, .reporte-cliente2:hover {
    background-image: url("img/repClientes-01.png");
    background-size: cover;
}
.reporte-fecha1, .reporte-fecha2:hover {
    background-image: url("img/repFECHA-01.png");
    background-size: cover;
}
.reporte-estatus1, .reporte-estatus2:hover {
    background-image: url("img/esatus-pago-01.png");
    background-size: cover;
}
.reporte-utilidad1, .reporte-utilidad2:hover {
    background-image: url("img/por-utilidad-01.png");
    background-size: cover;
}
.copias-pdf1, .copias-pdf2:hover {
    background-image: url("img/copiasPDF.png");
    background-size: cover;
}
.diseno1, .diseno2:hover {
  background-image: url("img/DisenodePDF-01.png");
  background-size: cover;
}
.abono1, .abono2:hover {
    background-image: url("img/abono-pago-01.png");
    background-size: cover;
}
.credito1, .credito2:hover {
    background-image: url("img/abono-pago1.png");
    background-size: cover;
}
.abono-gris {
    background-image: url("img/abono-pago-gris-01.png");
    background-size: cover;
}
.estatus-proceso-azul {
  background-image: url("img/estatus-01.png");
  background-size: cover;
}
.estatus-pago-azul {
    background-image: url("img/esatus-pago-01.png");
    background-size: cover;
}
.estatus-pago-azul2 {
    background-image: url("img/esatus-pago-blanco-01.png");
    background-size: cover;
}
.regresar1 {
    background-image: url("img/Regresar-01.png");
    background-size: cover;
    margin-left: 85px;
}
.importar1 {
    background-image: url("img/excel.png");
    background-size: cover;
}
.exportar1, .exportar2:hover {
    background-image: url("img/excel.png");
    background-size: cover;
}
.exportar2 {
    background-image: url("img/Excel-gris.png");
    background-size: cover;
}
.descargarplantilla1 {
    background-image: url("img/excel.png");
    background-size: cover;
}
.duplicar1 {
    background-image: url("img/duplicar-01.png");
    background-size: cover;
}
.pedido1 {
  background-image: url("img/Pedidos-01.png");
  background-size: cover;
}
.factura1 {
  background-image: url("img/Factura-01.png");
  background-size: cover;
}
.datosenpdf {
  background-image: url("img/DatosfiscalesenPDF-01.png");
  background-size: cover;
}
.cuadrofirmas {
  background-image: url("img/cuadrodefirmas-01.png");
  background-size: cover;
}
.tiemposentrega {
  background-image: url("img/tiemposdeentrega-01.png");
  background-size: cover;
}
.unidadesmedida {
  background-image: url("img/unidades-01.png");
  background-size: cover;
}
.condiciones {
    background-image: url("img/Condicionesdetrabajo-01.png");
    background-size: cover;
}
.reportes {
    background-image: url("img/Reportes-01.png");
    background-size: cover;
}
.configuraciones {
    background-image: url("img/Configuracion-01.png");
    background-size: cover;
}
.infoheredada{
  background-image: url("img/Cotizacionhechapedido-01.png");
  background-size: cover;
}
.palomita {
  background-image: url("img/Paloma-01.png");
  background-size: cover;
}
.palomita1 {
    background-image: url("img/Paloma-gris-01.png");
    background-size: cover;
}
.palomita2 {
    background-image: url("img/amarillo-01.png");
    background-size: cover;
}
.palomita3 {
    background-image: url("img/azul-01.png");
    background-size: cover;
}
.palomita4 {
    background-image: url("img/rojo-01.png");
    background-size: cover;
}
.palomita5 {
    background-image: url("img/morado-01.png");
    background-size: cover;
}
.palomita6 {
    background-image: url("img/verde-01.png");
    background-size: cover;
}
.palomita7 {
    background-image: url("img/paloma-azul-01.png");
    background-size: cover;
}
.ver2 {
    background-image: url("img/Ver-gris-01.png");
    background-size: cover;
}
.editar2 {
    background-image: url("img/Editar-gris-01.png");
    background-size: cover;
}
.eliminar2 {
    background-image: url("img/Borrar-gris-01.png");
    background-size: cover;
}
.pdf2 {
    background-image: url("img/GenerarPDF-gris-01.png");
    background-size: cover;
}
.pdfs2 {
    background-image: url("img/PDFconsubpartidas-gris-01.png");
    background-size: cover;
}
.movimientos2 {
    background-image: url("img/Movimientos-gris-01.png");
    background-size: cover;
}
.duplicar2 {
    background-image: url("img/duplicar-gris-01.png");
    background-size: cover;
}
.enviar2 {
    background-image: url("img/enviarpormail-gris-01.png");
    background-size: cover;
}
.nota2 {
    background-image: url("img/notasinternas-gris-01.png");
    background-size: cover;
}
.agregar2 {
    background-image: url("img/Agregarcliente-gris-01.png");
    background-size: cover;
}
.paloma2 {
    background-image: url("img/Paloma-gris-01.png");
    background-size: cover;
}
.like2 {
    background-image: url("img/like.png");
    background-size: cover;
}
.reporte-cliente2 {
    background-image: url("img/repClientes-gris.png");
    background-size: cover;
}
.reporte-estatus2 {
    background-image: url("img/esatus-pago-gris-01.png");
    background-size: cover;
}
.reporte-utilidad2 {
    background-image: url("img/por-utilidad-gris-01.png");
    background-size: cover;
}
.reporte-fecha2 {
    background-image: url("img/repFECHA-gris.png");
    background-size: cover;
}
.copias-pdf2 {
    background-image: url("img/copiasPDF-gris.png");
    background-size: cover;
}
.diseno2 {
    background-image: url("img/DisenodePDF-gris-01.png");
}
.abono2 {
    background-image: url("img/abono-pago-gris-01.png");
    background-size: cover;
}
.credito2 {
    background-image: url("img/abono-pago.png");
    background-size: cover;
}
.solicitud-pago1, .solicitud-pago2:hover {
  background-image: url("img/Solicitar-pago-01.png");
  background-size: cover;
}
.solicitud-pago2 {
    background-image: url("img/Solicitar-pago-gris-01.png");
    background-size: cover;
}
.postventa {
    background-image: url("img/PV-01.png");
    background-size: cover;
}
.remision {
    background-image: url("img/R-01.png");
    background-size: cover;
}
.nota {
  background-image: url("img/notaenvio.png");
  background-size: cover;
}
.compra {
    background-image: url("img/OC-01.png");
    background-size: cover;
}
.produccion_ {
    background-image: url("img/Produccion-01.png");
    background-size: cover;
}
.prefactura {
    background-image: url("img/Prefactura-01.png");
    background-size: cover;
}
.estatus-proceso1 {
    background-image: url("img/estatus-azul-01.png");
    background-size: cover;
}
.estatus-proceso3 {
    background-image: url("img/estatus-rojo-01.png");
    background-size: cover;
}
.estatus-proceso4 {
    background-image: url("img/estatus.png");
    background-size: cover;
}
.estatus-proceso5 {
    background-image: url("img/estatus-amarillo-01.png");
    background-size: cover;
}
.estatus-proceso6 {
    background-image: url("img/esatus-P-01.png");
    background-size: cover;
}
.estatus-proceso7 {
    background-image: url("img/estatus-morado-01.png");
    background-size: cover;
}
.estatus-pago2 {
    background-image: url("img/esatus-pago-verde-01.png");
    background-size: cover;
}
.estatus-pago3 {
    background-image: url("img/esatus-pago-rojo-01.png");
    background-size: cover;
}
.estatus-pago4 {
    background-image: url("img/estatus-pago-blanco-01.png");
    background-size: cover;
}
.prospeccion-ventas {
  background-image: url("img/Prospyventas-01.png");
  background-size: cover;
}
.proyectos-produccion {
  background-image: url("img/rep admon-01.png");
  background-size: cover;
}
.cuentasxcobrar, .cuentasxcobrar2:hover {
    background-image: url("img/Cuentasporcobrar-01.png");
    background-size: cover;
}
.ingresos, .ingresos2:hover {
    background-image: url("img/Ingresos-01.png");
    background-size: cover;
}
.ingresos2 {
  background-image: url("img/Ingresos -gris-01.png");
  background-size: cover;
}
.graficas-ingresos {
    background-image: url("img/graficadeingresos-01.png");
    background-size: cover;
}
.compras-repadmin {
  background-image: url("img/compras-01-.png");
  background-size: cover;
}
.administracion-repadmin {
    background-image: url("img/Administracion-01.png");
    background-size: cover;
}
.reporte-ejecutivo {
    background-image: url("img/Reportesejecutivo-01.png");
    background-size: cover;
}
.cuentasxpagar, .cuentasxpagar2:hover {
    background-image: url("img/Cuentasporpagar-01.png");
    background-size: cover;
}
.egresos, .egresos2:hover {
    background-image: url("img/Egresos-01.png");
    background-size: cover;
}
.egresos2 {
  background-image: url("img/Egresos-gris-01.png");
  background-size: cover;
}
.graficas-egresos {
    background-image: url("img/graficadeegresos-01.png");
    background-size: cover;
}
.detalle1, .detalle2:hover {
    background-image: url("img/cate-01.png");
    background-size: cover;
}
.detalle2 {
    background-image: url("img/cate-gris-01.png");
    background-size: cover;
}
.fecha1, .fecha2:hover {
    background-image: url("img/Editar fecha-01.png");
    background-size: cover;
}
.fecha2 {
    background-image: url("img/Editar fecha-gris-01.png");
    background-size: cover;
}
.descargar-excel {
  background-image: url("img/Descargarplantilla-01.png");
  background-size: cover;
}
.serie1, .serie2:hover {
  background-image: url("img/serie-01.png");
  background-size: cover;
}
.serie2{
  background-image: url("img/serie-gris-01.png");
  background-size: cover;
}
.firma1, .firma2:hover {
  background-image: url("img/firma-01.png");
  background-size: cover;
}
.firma2{
  background-image: url("img/firma-gris-01.png");
  background-size: cover;
}
.soporte {
  background-image: url("img/help-01.png");
  background-size: cover;
}
.factura-pedido {
  background-image: url("img/factura-pedido-01.png");
  background-size: cover;
}
.procesos1, .procesos2:hover {
  background-image: url("img/Opciones-01.png");
  background-size: cover;
}
.procesos2{
  background-image: url("img/Opciones-gris-01.png");
  background-size: cover;
}
.areas-prod, .areas1:hover {
  background-image: url("../img/áreas de produccion-01.png");
  background-size: cover;
}    
.areas1 {
  background-image: url("../img/áreas de produccion-gris-01.png");
  background-size: cover;
}
.materiales-act, .materiales:hover {
    background-image: url("../img/agregar material-01.png");
    background-size: cover;
}    
.materiales {
    background-image: url("../img/agregar material-gris-01.png");
    background-size: cover;
}
.productos-vinc-act, .productos-vinc:hover {
    background-image: url("../img/Vincular seleccionado-01.png");
    background-size: cover;
}    
.productos-vinc {
    background-image: url("../img/Vincular seleccionado-gris-01.png");
    background-size: cover;
}
.buscar-alert{
    background-image: url("img/ver-amarillo.png");
    background-size: cover;
}
.bono, .bono2:hover {
    background-image: url("img/bono-comision-01.png");
    background-size: cover;
}
.bono2 {
    background-image: url("img/bono-comision-gris-01.png");
    background-size: cover;
}
.archivo2, .archivo:hover {
    background-image: url("img/archivo-01.png");
    background-size: cover;
}
.archivo {
    background-image: url("img/archivo-gris-01.png");
    background-size: cover;
}
.defecto2, .defecto:hover {
    background-image: url("img/espe-01.png");
    background-size: cover;
}
.defecto {
    background-image: url("img/espe-gris-01.png");
    background-size: cover;
}
.depto {
    background-image: url("img/Cuentas-01.png");
    background-size: cover;
}
.cate1, .cate2:hover {
    background-image: url("img/cate-01.png");
    background-size: cover;
}
.cate2{
    background-image: url("img/cate-gris-01.png");
    background-size: cover;
}
.historial1, .historial2:hover {
    background-image: url("../img/historial-01.png");
    background-size: cover;
}
.historial2{
    background-image: url("../img/historial-gris-01.png");
    background-size: cover;
}
.tiempo {
    background-image: url("img/detalle-01.png");
    background-size: cover;
}
.textEdit {
    background-image: url("img/icono editar.png");
    background-size: cover;
}
.resta1, .resta2:hover {
  background-image: url("img/menos-01.png");
  background-size: cover;
}
.resta2{
  background-image: url("img/menos-gris-01.png");
  background-size: cover;
}
.ver-mas, .ver-mas2:hover {
  background-image: url("img/filtro-01.png");
  background-size: cover;
}
.ver-mas2{
  background-image: url("img/filtro-gris-01.png");
  background-size: cover;
}
.imp-pdf, .imp-pdf2:hover {
  background-image: url("img/acabado-01.png");
  background-size: cover;
}
.imp-pdf2{
  background-image: url("img/acabado-gris-01.png");
  background-size: cover;
}
.imgmasivas1, .imgmasivas2:hover {
  background-image: url("img/img-masivas-01.png");
  background-size: cover;
}
.csd{
  background-image: url("img/cfdi.png");
  background-size: cover;
}
.show-hide, .show-hide2:hover {
  background-image: url("img/nover.png");
  background-size: cover;
}
.show-hide2{
  background-image: url("img/ver.png");
  background-size: cover;
}
.share {
  background-image: url("img/inv-01.png");
  background-size: cover;
}
.estado-cuenta, .estado-cuenta2:hover {
  background-image: url("img/Planes de pago-01.png");
  background-size: cover;
}
.estado-cuenta2{
  background-image: url("img/Planes de pago-gris-01.png");
  background-size: cover;
}
.edit-admin, .edit-admin2:hover {
  background-image: url("img/avance1-01.png");
  background-size: cover;
}
.edit-admin2 {
  background-image: url("img/avance1-gris-01.png");
  background-size: cover;
} 
/* ---------------------------------------------------------------- */
.grupo-modulos{
  border-bottom:2px solid #B2B5B7;
}
.categoria{
  background-color:#E9E9EA;
  color:#646464;
  width:290px;
  padding:20px 0 0 20px !important;
  font-size:20px;
}
.categoria-modulos{
  padding: 20px 0 0 0 !important;
  width: calc(100% - 325px) !important;
}
.boton-modulo {
  color:#FFFFFF; 
  text-align:center;
  width:90px;
  height:140px;
  display:inline-block;
  margin:0 0 0 50px;
  vertical-align:top;
}
.boton-modulo_2 {
  color:#FFFFFF; 
  text-align:center;
  width:90px;
  height:120px;
  display:inline-block;
  margin:0 25px;
  vertical-align:top;
}
.caja{ 
  width:90px; 
  margin-top:2px; 
  padding-top:2px; 
  padding-bottom:2px;
  text-align:center;
  color:#000000;
  font-size:14px;
}
.footer{
  height:200px;
  background-color:#4B4B4D;
}
.row {
  width:100%;
  display: table;
  margin: 0px;
  padding: 0px;
}
.row-item {
  display: table-cell;
  vertical-align: top;
  margin: 0px;
  padding: 0px;
  height:100%;
}
.row-item_2 {
  display: table-cell;
  vertical-align: top;
  margin: 0px;
  padding: 0px;
  height:100%;
}
.barra{
  border-right: solid 15px #FFFFFF;
  max-width:270px;
  min-width:10px;
  height:50px;
}
.barra_titulo{
  border:1px solid #999999;
  color:#666666;
  min-width:713px;
  height:50px;
}
.certi{
  width:100%;
}
.boton{
  cursor:pointer;
  background-color:#6B6B6B; 
  padding:15px 20px; 
  color:#FFFFFF; 
  font-size:18px; 
  border-radius:10px;
  margin:5px;
  text-align:center;
  width:200px;
  display:inline-block;
}
.boton:hover{
  background-color:#9B9B9B;
}
/**/
.datos, .datos3{
  font-size:14px;
  color:#666666;
}
.busqueda{
  font: 100% Arial, Helvetica, sans-serif;
  color: #666666;
}
a:link{
  color: #666666;
  text-decoration: none;
}
a:visited{
  text-decoration: inherit;
  color: #666666;
}
a:hover{
  text-decoration: none;
}
#buscar{
  width: 350px;
}
.encabezado{
  background-color: #999;
  color: #FFF;
}
.letra{ 
  font-size:12px;
  font-weight:bold;
}
.formulario, .formulario7{
  position:fixed;
  top:50%;
  left:50%;
  display:none;
  width:600px;
  height:600px;
  margin:-300px 0 0 -300px;
  border:1px solid #000 ;
  background:#FFF;
  z-index:100;
  overflow:auto;
}
.bloqueo {
  position: fixed;
  display: none;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 50;
  /* background: url(img/transparente.png) repeat; */
  background: url(fancybox/source/fancybox_overlay.png) repeat;
}
.clearFieldBlurred { 
  color: #B0B0B0; 
  font-style: italic; 
}
.clearFieldActive { 
  color: #000; 
}
.fila_datos{
  background-color: #E5E5E5;
  color:#000;
  font-weight: bold;
}
.error{
  border:1px solid #F00 !important;
}
tr.datos td, tr.datos3 td{
  border-bottom:1px solid #d2d2d2;
  padding-top:2px;
  padding-bottom:2px;
  padding: 5px;
  height: 35px;
}
/* ACTUAIZACIONES */
.containAct { 
  display: block;
  position: relative;
}
.mainAct { 
  display: inline;
  z-index:12;
}
.containAct .mainAct { 
  position: absolute; 
  left: -125px; 
  top: 25px;
  z-index:12;
}
.msgAct { 
  width: 250px;
  height:auto;
  max-height: 500px;
  background: #EBEBEB; 
  border: 1px solid #000000; 
  top: -1px; 
  z-index: 9; 
  overflow-y: auto;
  overflow-x: hidden;
}
.flecha { 
  height: 0px; 
  width: 0px; 
  border-bottom: 12px solid #D9D9D9; 
  border-left: 12px dotted transparent; 
  border-right: 12px dotted transparent; 
  margin-right: 100px; 
  z-index: 10; 
}
.actualizaciones {
  line-height:normal;
  padding:10px;
  color:#7A7A7A;
  font-size: 12px;
  background-color: #EBEBEB;
}
.actualizaciones:hover{
  color:#FFFFFF;
  background:#4D4D4D;
}
/* ----------------------- */
.fila_datos2{
  background-color: #4D4D4D;
  color:#FFFFFF;
  font-weight: bold;
}
tr.fila_datos2 td{
  height:50px;
}
.tooltip_elemento99, .tooltip_elemento991 {
  position: relative;
}
.tooltip99 {
  display: none;
  position: absolute;
  width: auto;    
  min-width:150px;
  max-width:150px;
  padding: 10px;
  margin: 0 0 16px 0;    
  z-index: 100;
  bottom: 100%;
  background: #CECECE;
  color: #000;
  text-align: center;
  font-size: 10px;
  border-radius: 5px;
}
.tooltip991 {
  display: none;
  position: absolute;
  width: auto;       
  min-width:250px;
  max-width:250px; 
  padding: 10px;
  margin: 0 0 16px 0;    
  z-index: 100;
  bottom: 100%;
  background: #CECECE;
  color: #000;
  text-align: center;
  font-size: 10px;
  border-radius: 5px;
}
.tooltip99:after, .tooltip991:after {
  content: "";
  position: absolute;
  bottom: -10px;
  z-index: 100;
  border: 0 solid #CECECE;
  border-bottom: 14px solid transparent;
  border-left-width: 10px;
  width: 50%;
  left: 90%;
}
.tooltip99:before, .tooltip991:before {
  content: "";
  position: absolute;
  bottom: -10px;
  z-index: 100;
  border: 0 solid #CECECE;
  border-bottom: 14px solid transparent;
  border-right-width: 10px;
  width: 50%;
  right: 10%;
}
a.paginado{ width: 17px; height: 17px; display: inline-block; padding: 5px; margin: 5px; border:1px solid #9F9F9F; font-size: 14px; border-radius: 35px; }
a.paginado:hover{ color: #454545; border-color: #454545; font-weight: bold; }
a.paginado.activo{ color: #FF0000; border-color: #454545; font-weight: bold; }
tr.datos200 td {
  border-top: 1px solid #909090;
  padding-top: 5px;
  padding-bottom: 5px;
}
/*          Iconos de Orden de compra           */
.compras_mas {
    background-image: url("img/compras masivas-01.png");
    background-size: cover;
}
.recepciones1, .recepciones2:hover {
    background-image: url("img/recepcion-01.png");
    background-size: cover;
}
.recepciones2 {
    background-image: url("img/recepcion-gris-01.png");
    background-size: cover;
}
.xml1, .xml2:hover {
    background-image: url("img/xml-01.png");
    background-size: cover;
} 
.xml2 {
    background-image: url("img/xml-gris-01.png");
    background-size: cover;
}
.abono_pago1, .abono_pago2:hover {
    background-image: url("img/abono pago-01.png");
    background-size: cover;
}
.abono_pago2 {
    background-image: url("img/abono pago-gris-01.png");
    background-size: cover;
}
.estatus_pago_azul {
    background-image: url("img/estatus-pago-azul-01.png");
    background-size: cover;
}
.estatus_pago, .estatus_pago_blanco:hover {
    background-image: url("img/estatus-pago-01.png");
    background-size: cover;
}
.estatus_pago_verde {
    background-image: url("img/estatus-pago-verde-01.png");
    background-size: cover;
}
.estatus_pago_blanco {
    background-image: url("img/estatus-pago-blanco-01.png");
    background-size: cover;
}
.estatus_pago_rojo {
    background-image: url("img/estatus-pago-rojo-01.png");
    background-size: cover;
}
.estatus, .estatus_blanco:hover {
    background-image: url("img/estatus-01.png");
    background-size: cover;
}
.estatus_verde {
    background-image: url("img/estatus-verde-01.png");
    background-size: cover;
}
.estatus_azul {
    background-image: url("img/estatus-azul-01.png");
    background-size: cover;
}
.estatus_blanco {
    background-image: url("img/estatus-blanco-01.png");
    background-size: cover;
}
.estatus_amarillo {
    background-image: url("img/estatus-amarillo-01.png");
    background-size: cover;
}
.estatus_rojo {
    background-image: url("img/estatus-rojo-01.png");
    background-size: cover;
}
.flecha_abajo1, .flecha_abajo2:hover {
    background-image: url("img/flecha menu-01.png");
    background-size: cover;
}
.flecha_abajo2 {
    background-image: url("img/flecha menu-gris-01.png");
    background-size: cover;
}
.flecha_arriba1, .flecha_arriba2:hover {
    background-image: url("img/flecha menu-01 - copia.png");
    background-size: cover;
}
.flecha_arriba2 {
    background-image: url("img/flecha menu-gris-01 - copia.png");
    background-size: cover;
}
.flecha_izquierda1, .flecha_izquierda2:hover {
    background-image: url("img/flecha menu-izquierda-01.png");
    background-size: cover;
}
.flecha_izquierda2 {
    background-image: url("img/flecha menu-gris-izquierda-01.png");
    background-size: cover;
}
.flecha_derecha1, .flecha_derecha2:hover {
    background-image: url("img/flecha menu-derecha-01.png");
    background-size: cover;
}
.flecha_derecha2 {
    background-image: url("img/flecha menu-gris-derecha-01.png");
    background-size: cover;
}
.vincular_seleccionado1, .vincular_seleccionado2:hover {
    background-image: url("img/Vincular seleccionado-01.png");
    background-size: cover;
}
.vincular_seleccionado2 {
    background-image: url("img/Vincular seleccionado-gris-01.png");
    background-size: cover;
}
.proveedores_reporte1, .proveedores_reporte2:hover {
    background-image: url("img/Proveedores-reportes-01.png");
    background-size: cover;
}
.proveedores_reporte2 {
    background-image: url("img/Proveedores-reportes-gris-01.png");
    background-size: cover;
}
.general_reporte1, .general_reporte2:hover {
  background-image: url("img/acabado-01.png");
  background-size: cover;
}
.general_reporte2 {
  background-image: url("img/acabado-gris-01.png");
  background-size: cover;
}
.cambiar_producto1, .cambiar_producto2:hover {
    background-image: url("img/cambiar producto-01.png");
    background-size: cover;
} 
.cambiar_producto2 {
    background-image: url("img/cambiar producto-gris-01.png");
    background-size: cover;
}
.descripcion_propia1, .descripcion_propia2:hover {
    background-image: url("img/Usar descripcion propia-01.png");
    background-size: cover;
}
.descripcion_propia2 {
    background-image: url("img/Usar descripcion propia-gris-01.png");
    background-size: cover;
} 
.reporte_movimientos1, .reporte_movimientos2:hover {
    background-image: url("img/Movimientos-reportes-01.png");
}
.reporte_movimientos2 {
    background-image: url("img/Movimientos-reportes-gris-01.png");
} 
/*     Pedido Interno  */
.lista_notificaciones {
    background-image: url("img/lista de notificaciones-01.png");
    background-size: cover;
}
.editar_fecha1, .editar_fecha2:hover {
    background-image: url("img/Editar fecha-01.png");
    background-size: cover;
}
.editar_fecha2 {
    background-image: url("img/Editar fecha-gris-01.png");
    background-size: cover;
}
.comensales1, .comensales2:hover {
    background-image: url("img/Comensales y precios-01.png");
    background-size: cover;
}
.comensales2 {
    background-image: url("img/Comensales y precios-gris-01.png");
    background-size: cover;
}
.observaciones1, .observaciones2:hover {
    background-image: url("img/Observaciones--01.png");
    background-size: cover;
}
.observaciones2 {
    background-image: url("img/Observaciones-gris-01.png");
    background-size: cover;
}
.observaciones_verde {
    background-image: url("img/Observaciones-verde-01.png");
    background-size: cover;
}
.gastos_verde {
    background-image: url("img/bolsa pesos-01.png");
    background-size: cover;
}
.carrito_pedidos1, .carrito_pedidos2:hover {
    background-image: url("img/Agregar pedidos-01.png");
    background-size: cover;
}
.carrito_pedidos2 {
    background-image: url("img/Agregar pedidos-gris-01.png");
    background-size: cover;
}
.carrito_ptv-azul, .carrito_ptv-gris:hover {
    background-image: url("img/Agregar pedidos-01.png");
    background-size: cover;
}
.carrito_ptv-gris {
    background-image: url("img/Agregar pedidos-gris-01.png");
    background-size: cover;
}
.cancelar1, .cancelar2:hover {
    background-image: url("img/cancelar-0.png");
    background-size: cover;
}
.cancelar2 {
    background-image: url("img/cancelar-1.png");
    background-size: cover;
}
.cancelar-fac0 {
  background-image: url("img/Cancelar-rojo-01.png");
  background-size: cover;
}
.cancelar-fac1 {
    background-image: url("img/Cancelar-amarillo-01.png");
    background-size: cover;
}
.cancelar-fac2 {
    background-image: url("img/cancelar-0.png");
    background-size: cover;
}
.deshabilitar_user, .deshabilitar_userR:hover {
    background-image: url("img/Cancelar-rojo-01.png");
    background-size: cover;
}
.deshabilitar_userR {
    background-image: url("img/cancelar-1.png");
    background-size: cover;
}
.menos1, .menos2:hover {
    background-image: url("img/menos-01.png");
    background-size: cover;
}
.menos2 {
    background-image: url("img/menos-gris-01.png");
    background-size: cover;
}
.error_x1, .error_x2:hover {
    background-image: url("img/x-01.png");
    background-size: cover;
}
.error_x2{
    background-image: url("img/x-gris-01.png");
    background-size: cover;
}
.leyenda_pdf1, .leyenda_pdf2:hover {
    background-image: url("img/Leyenda PDF-01.png");
    background-size: cover;
}
.leyenda_pdf2 {
    background-image: url("img/Leyenda PDF-gris-01.png");
    background-size: cover;
}
.unidades_medida1, .unidades_medida2:hover {
    background-image: url("img/unidades-01.png");
}
.unidades_medida2 {
    background-image: url("img/unidades-gris-01.png");
}
.catalogo_icono1, .catalogo_icono2:hover {
    background-image: url("img/catalogo-icono-01.png");
}
.catalogo_icono2 {
  background-image: url("img/catalogo-icono-gris-01.png");
}
.pedido_icono1, .pedido_icono2:hover {
    background-image: url("img/Pedidos-icono-01.png");
}
.pedido_icono2 {
  background-image: url("img/Pedidos-icono-gris-01.png");
}
.orden_icono1, .orden_icono2:hover {
    background-image: url("img/Orden de compra-icono-01.png");
}
.orden_icono2 {
  background-image: url("img/Orden de compra-icono-gris-01.png");
}
.x1, .x2:hover {
    background-image: url("img/x-01 (2).png");
}
.x2 {
    background-image: url("img/x-gris-01 (2).png");
}
/*   Punto de Venta  */
.reporte_ventas1, .reporte_ventas2:hover {
    background-image: url("img/Reporte ventas-01.png");
    background-size: cover;
}
.reporte_ventas2 {
    background-image: url("img/Reporte ventas-gris-01.png");
    background-size: cover;
}
.ticket1, .ticket2:hover {
    background-image: url("img/ticket-01.png");
    background-size: cover;
}
.ticket2 {
    background-image: url("img/ticket-gris-01.png");
    background-size: cover;
}
.ventas1, .ventas2:hover {
    background-image: url("img/ventas-01.png");
}.ventas2 {
    background-image: url("img/ventas-gris-01.png");
    background-size: cover;
}
.existencia_prod1, .existencia_prod2:hover {
    background-image: url("img/Existencia de productos-01.png");
    background-size: cover;
}
.existencia_prod2 {
    background-image: url("img/Existencia de productos-gris-01.png");
    background-size: cover;
}
/* Automotriz */
.editar_servicio1, .editar_servicio2:hover {
    background-image: url("img/Editar servicios-01.png");
    background-size: cover;
}
.editar_servicio2 {
    background-image: url("img/Editar servicios-gris-01.png");
    background-size: cover;
}
.reporte_auto1, .reporte_auto2:hover {
    background-image: url("img/Agregar reporte-01.png");
    background-size: cover;
}
.reporte_auto2 {
    background-image: url("img/Agregar reporte-gris-01.png");
    background-size: cover;
}
.admin_avance1, .admin_avance2:hover {
    background-image: url("img/Administrar avance-01.png");
    background-size: cover;
}
.admin_avance2 {
    background-image: url("img/Administrar avance-gris-01.png");
    background-size: cover;
}
.avance1, .avance2:hover {
    background-image: url("img/avances imagen-01.png");
    background-size: cover;
}
.avance2 {
    background-image: url("img/avances imagen-gris-01.png");
    background-size: cover;
}
.form_cliente_exist1, .form_cliente_exist2:hover {
    background-image: url("img/Cliente existente-01.png");
    background-size: cover;
}
.form_cliente_exist2 {
    background-image: url("img/Cliente existente-gris-01.png");
    background-size: cover;
}
.form_cliente_add1, .form_cliente_add2:hover {
    background-image: url("img/Cliente nuevo-01.png");
    background-size: cover;
}
.form_cliente_add2 {
    background-image: url("img/Cliente nuevo-gris-01.png");
    background-size: cover;
}
.form_vehiculo_exist1, .form_vehiculo_exist2:hover {
    background-image: url("img/Vehiculo existente-01.png");
    background-size: cover;
}
.form_vehiculo_exist2 {
    background-image: url("img/Vehiculo existente-gris-01.png");
    background-size: cover;
}
.form_vehiculo_add1, .form_vehiculo_add2:hover {
    background-image: url("img/Vehiculo nuevo-01.png");
    background-size: cover;
}
.form_vehiculo_add2 {
    background-image: url("img/Vehiculo nuevo-gris-01.png");
    background-size: cover;
}
.form_servicio1, .form_servicio2:hover {
    background-image: url("img/Formulario de servicio-01.png");
    background-size: cover;
}
.form_servicio2 {
    background-image: url("img/Formulario de servicio-gris-01.png");
    background-size: cover;
}
.circulo {
     width: 15px;
     height: 15px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     display: inline-block;
}
.addcot1, .addcot2:hover {
    background-image: url("img/Agregar cotizacion-01.png");
    background-size: cover;
}
.addcot2 {
    background-image: url("img/Agregar cotizacion-gris-01.png");
    background-size: cover;
}
.anterior{
  background-image: url("img/back-gris.png");
  background-size: cover;
  margin-bottom: 20px;
}
.anterior:hover{
    background-image: url("img/back.png");
    background-size: cover;
}
.siguiente{
    background-image: url("img/ir-gris-01.png");
    background-size: cover;
    margin-bottom: 20px;
}
.siguiente:hover{
    background-image: url("img/ir-01.png");
    background-size: cover;
}
.verifica1, .verifica2:hover {
    background-image: url("img/aceptado-verde-01.png");
    background-size: cover;
}
.verifica2 {
    background-image: url("img/aceptado-gris-01.png");
    background-size: cover;
}
.descargar1, .descargar2:hover {
    background-image: url("img/descargado-verde-01.png");
    background-size: cover;
}
.descargar2 {
    background-image: url("img/descargado-gris-01.png");
    background-size: cover;
}
#contenido_index2 {
  height: calc(100% - 50px); 
  overflow-x: hidden;
}
.icono_calendario {
	cursor: pointer; 
	border: 1px solid red; 
	vertical-align: middle;
}
.icono_calendario:hover {
	background-color: red;
}
/* --- Div con estilo de textarea --- */
.textarea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  font-size:12px;
  letter-spacing: 1px;
  word-spacing: 2px;
  height: 70px;
  overflow: auto;
  padding: 2px;
  resize: both;
  width: 95%;
  cursor: pointer;
  color: black;
}
/* Este es el estilo que se le va a agregar al texto seleccionado */
.marca {
    color:black;
    background:yellow;
}
/* Div de tipo textarea readonly */
.readonly {
  background-color: #CCCCCC !important; 
  cursor: no-drop !important;
}
.disabled{
  background-color: #EBEBE4;
}
.sincronizar_email, .sincronizar_email2:hover {
    background-image: url("img/sincronizar mail-01.png");
    background-size: cover;
}
.sincronizar_email2 {
    background-image: url("img/sincronizar mail-gris-01.png");
    background-size: cover;
}
.guia1, .guia2:hover {
	background-image: url("img/guia-01.png");
    background-size: cover;
}
.guia2 {
	background-image: url("img/guia-gris-01.png");
    background-size: cover;
}
.btn_contrasena {
  line-height: 9px;
}
.btn-submenu {
  width: 70px;
  height: 44px;
  text-align: center;
  font: 110px 'FontAwesome';
  cursor: pointer;
}
.btn-submenu:before {
  content: "\f0d7";
}
.sub-decimales { 
  top: -3px;
  font-size: 13px;
  position: relative;
}
.disabled {
  opacity: 0.5;
  cursor: no-drop !important;
}
.cont-info-cambios {
  position: relative;
}
.info-ayuda {
  position: absolute;
  top: 5px;
  right: -5px;
  background: #00CCFF;
  color: #ffffff;
  padding: 4px;
  width: 50px;
  text-align: center;
  border-radius: 25px;
}
.info-ayuda.right-especial[data-menor="75"]{
  right: 75px;
}
.info-ayuda.right-positivo {
  right: 5px;
}
.info-ayuda.right-especial[data-menor="100"]{
  right: 85px;
  top: 5px;
}
.custom-btn {
  width: 100px;
  color: #fff;
  padding: 10px 25px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
}
.btn-13 {
  background-color: #00CCFF;
  border: none;
  z-index: 1;
}
.btn-add-sub {
  font-size: 10px;
  padding-top: 12px;
  padding-bottom: 11px;
  background-color: #838383;
}
.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: #000000;
  background-image: linear-gradient(315deg, #000000 0%, #000000 74%);
  transition: all 0.6s ease;
}

.btn-add-sub:after {
  background-color: #CCCCCC;
  background-image: linear-gradient(315deg, #CCCCCC 0%, #CCCCCC 74%);
  transition: all 0.6s ease;
}

.btn-13:hover {
  color: #fff;
}
.btn-13:hover:after {
  top: 0;
  height: 100%;
}
.btn-13:active {
  top: 2px;
}
.signo-mas {
  font-size: 22px;
  font-style: inherit;
  position: absolute;
  left: 15px;
  top: 3px;
}
.animation-bouncy {
  animation: bouncy 2s infinite linear;
  position: relative;
}
@keyframes bouncy {
  0%, 40% { top: 0px; }
  43% { top: -15px; }
  46% { top: 0px; }
  48% { top: -7px; }
  50%, 100% { top: 0px; }
}
.alert-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-danger,
.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

input[type=checkbox] {
  width: 25px;
  height: 25px;
  border-radius: 3px;
  appearance: unset;
  cursor: pointer;
  font-family: 'FontAwesome';
  background-color: #ffffff;
  border: 2px solid #999;
  padding: 3px;
  /*margin: 0;*/
  -webkit-transition: all .275s;
  transition: all .275s;
}
input[type=checkbox]:checked {
  background-color: #00CCFF;
  border: 2px solid #00CCFF;
}

input[type=checkbox]::before {
  content: "\f00c";
  color: #fff;
  font-size: 15px;
  text-align: center;
  display:flex;
  justify-content:center;
  align-items:center;
  /*margin-top:-3px;*/
}

input[type=checkbox]:disabled {
  background: #999;
  opacity: 0.3;
}
div.modulo.padre:hover {
    border-left: 5px solid #00CCFF;
}
div.modulo.control-menu:hover {
  background: #cdcdcd;
}
.pill{
  padding: 3px;
  border-radius: 5px;
  background: red;
  color: white;
}

/****************************************/
/*----------- Estilos 2024 ----------*/
/****************************************/
.modulo-cabecera-izquierda{
  display: flex;
  align-items: center;
}

.modulo-cabecera-titulo h3{
  font-size: large;
  margin-left: 30px;
  font-size: 30px;
}

/* 6. Pantallas ultra grandes (4K y más) */
@media (min-width: 1536px) {
  /* Estilos para pantallas 2K, 4K y superiores */
  
  /*------------- Cuentas por Cobrar -------------*/
  .titulo-modulo{
      font-size: 2.5em;
  }
  .opcion-modulo{
      width: 40em;
  }
  
}

/* 5. Escritorios grandes (1280px - 1535px) */
@media (min-width: 1280px) and (max-width: 1535px) {
  /* Escritorios grandes, monitores HD */
  
  /*------------- Cuentas por Cobrar -------------*/
  .titulo-modulo{
      font-size: 2em;
  }
  .opcion-modulo{
      width: 20em;
  }
  /* Scroll del menu */
  
  .modulos::-webkit-scrollbar {
      width: 18px; /* Aquí lo haces más ancho que el 'auto' (~15px) */
      height: 18px; /* Si quieres también en horizontal */
    }
    
    .modulos::-webkit-scrollbar-track {
      background: #f0f0f0;
    }
    
    .modulos::-webkit-scrollbar-thumb {
      background: #00ccff;
      border-radius: 8px;
      border: 4px solid #f0f0f0; /* Hace un efecto de grosor visible */
    }
  
}
/* responsive para laptops (May - 2025) */
/* 4. Laptops y pantallas medianas (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* Estilos para laptops estándar */
  .titulo-modulo{
      font-size: 1.5em;
  }
  .opcion-modulo{
      width: 20em;
  }
  
  .opcion-modulo div ul li a{
      padding: 0px 16px;
      line-height: 32px;
      font-size: 14px;
  }
  
  /* Scroll del menu */
  
  .modulos::-webkit-scrollbar {
      width: 18px; /* Aquí lo haces más ancho que el 'auto' (~15px) */
      height: 18px; /* Si quieres también en horizontal */
    }
    
    .modulos::-webkit-scrollbar-track {
      background: #f0f0f0;
    }
    
    .modulos::-webkit-scrollbar-thumb {
      background: #00ccff;
      border-radius: 8px;
      border: 4px solid #f0f0f0; /* Hace un efecto de grosor visible */
    }
  
}