*{ outline:none;}

:root{
	--red:#df6e8e;
	--green: #66a765;
	--principal: #444444;
	--secundario : #c60909;
	--boton_1: #c60909;
	--boton_2: #a00000; 
}

html{ font-family: Arial, Helvetica, sans-serif; width:100%; height:100%; background:url(../imgs/fondos/contenedor_zeguiz.jpg) no-repeat center; background-attachment:fixed;  background-size:cover;}
body{ margin:0; font-size:0.8em; width:100%; height:100%;}

h1, .total{text-align:center; font-size:60px; font-weight:bolder; color:#0B0; margin:0;}
h2{ border-bottom: 1px dashed #000;}
.div_row h2{ border-bottom:none !important}
h3{ text-align:center;}
h3 img{ width:25px; height:auto; margin-right:10px; vertical-align:middle;}
h4{ text-transform:uppercase; color:#c60909}

a{ text-decoration:none;}
b{ color:red; margin-right:2px;}
i{ vertical-align:middle;}

span{ display:block; margin-top:10px; font-weight:bolder; color:#333;}
span.blanco{ color:#DDD;}
strong{ color: #c60909; text-transform:uppercase;}
td strong{ color:#333 !important}
td i{ margin:0;}

.title{ text-transform: uppercase; font-size: 2em; padding-bottom: 10px; font-weight: bold;}
input, textarea{ outline:none}

/* ======================================================== SECCIONES DEL SISTEMA ==========================================================*/
footer{ position:fixed; width:100%; bottom:0; text-align:center; color:white; padding:20px 0; transition:all 1s ease-in}

header{ width:100%; height:10%; background:rgba(5,5,5, 0.5);display:flex; margin:0;}
header #logo img{ margin:2px 0 0 10px; height:90%; width:auto;  cursor:pointer;}
header strong{ color:white; display:block; font-size:1em}
header strong a{ color:white}
header strong >img{ width:20px !important; height:auto !important; margin-right:5px; vertical-align:middle; padding:2px;}

#principal{ width:100%; overflow:auto; height:90%; background:rgba(5,5,5, 0.5); }
#principal_body{ width:100%; overflow:auto; height:90%; padding:1%; box-sizing:border-box; background:rgba(5,5,5, 0.5);}
#contenido{ width: 100%; height:100%; display:flex;}
#bandeja_venta{ height:100%; width:75%;}

#menu img, #menu_razones img{ width: 40px; height: 40px; padding: 5px; box-shadow: 0px 1px 1px rgba(0,0,0,0.5); border-radius: 50%; margin: 2px; cursor: pointer; background: rgba(0,0,0,0.5); border:1px solid transparent; transition:0.3s all linear}
#menu img:hover, #menu_razones img:hover{ border:1px solid #c60909;}

#nav{ height:5%; display:flex;  padding:5px 0}
#nav div{ height:100%;}
#nav .codigo{ width:30%;} 
#nav .descripcion{ width:50%; position:relative;}
#nav .almacen{ width:16%;}
#nav .almacen select{ color:blue; font-weight:bold; border:1px solid #BBB; padding:5px !important }
#nav input{ height:100%; padding:0 0 0 1% !important; width:95%; border-radius:0 !important;}
#nav #buscar{ height:100% !important; background:#444444; width:auto;float:left; cursor:pointer;}

#section{ height:88%;}

#menu_ventas{ height:5%; display:flex;}
#menu_ventas a{ padding:10px 20px; background: linear-gradient(to bottom, #777 0%, #222 100%); font-weight:bolder; color:white; border-right:1px solid rgba(100,100,100,0.4);}

#paneles{ overflow:auto; height:100%; width: 25%; padding:3px; box-sizing:border-box;}
#paneles .fieldset{box-shadow:none; border-radius:0; margin:5px 0; border-radius:7px}
#paneles .legend{ font-size:1em; background:rgba(0,0,0,0.8); color:#F3F3F3; font-weight:normal}
#paneles .contenido{ background:rgba(0,0,0,0.8)}

/* ======================================================== ESTILO DEL MENU =====================================================================*/
#menu_reportes{ border-radius:10px;  margin:10px 0; display:flex; padding:10px;}
#menu_reportes div{ margin:0 2px; text-align:center !important; padding:2px 20px; background:#323232; border-radius:5px;}
#menu_reportes input{ width:50px; height:50px !important;}
#menu_reportes h5{ text-align:center !important; margin:2px; color:#DDD}

.menu_razon{ float:left; margin:0px 5px}
.menu_razon label{display:block}

#listas{ overflow:hidden; border-bottom:5px solid rgba(0,0,0,0.5)}
#listas a{ float:right; background:rgba(220,220,220,0.9); margin-right:10px; padding:10px 15px; box-shadow:1px 1px 5px #000; color:#a00000}
#listas a:last-child{ float:left}

#pie_tabla{ background:none !important; border:none !important}
#pie_tabla td[class=precios]{ text-align:right; color:#090; font-size:1.2em; border:1px solid #090; border-top:none; white-space:nowrap; padding:5px 10px;}
#pie_tabla:hover{box-shadow:none !important; background:none !important;}

#datos_cliente{ margin-bottom:10px; clear:both;}
#datos_cliente h5{ margin:0 !important; color:#DDD}

#impresion_tiket{ text-transform:uppercase; background:white; padding:2% 1%;}
#impresion_tiket td{border:none !important; font-weight:bolder !important}
#impresion_tiket img{ height:70px; width:auto;}

#datos_venta{ width:58%; float: right;}
#datos_venta fieldset{ background:white !important; box-shadow:none;}

#cabecera_ticket{ text-align:center}

#contenedor_inventario{ position:inherit; width:100%; height:100%; background:#DEDEDE; }
#fechas{  width:10%; height:100%; overflow:auto;}
#fechas a{ display:block; padding:10px 5px; background:#444444; color:white; text-align:center; margin-left:5px; border-radius:5px 0 0 5px}

#acciones_inventario{ width:100%; padding:10px 0; }
#acciones_inventario a{ padding:5px 20px; }
#acciones_inventario a img{ height:40px; width:auto; vertical-align:middle; margin-right:20px}

#detalle_inventario{ height:88%; overflow:auto; background:white;}

#field_pedidos a{ background:#DDD; padding:10px 20px; margin-right:10px; float:leftr}
#pedidos{ clear:both; overflow:auto; border-top:4px solid #EEE;}

#resultados_terminar figure{ width:100%; text-align:center}
#resultados_terminar figure img{ width:30%; height:auto; vertical-align:middle; }

#control_ficha_producto{ overflow:hidden; border-bottom:5px solid #DDD;}
#control_ficha_producto a{ background:#444444; color:white; padding:5px 15px; float:left; margin-right:5px;}
#control_ficha_producto a:focus{ box-shadow:0 0 10px rgba(0,0,0,0.5); background:#c60909;}

#detalle_de_producto .total{background:#EEE;}
#detalle_de_producto div input:not([type=button]){ padding:5px 0 !important; text-align:center;}
#detalle_de_producto div h3{ margin:0; }

#precios_calculados{ background:rgba(220,220,220,0.5); height:100%; float:right; width:26%; padding:2%; box-shadow:inset 0 0px 5px rgba(0,0,0,0.2);}

img[class=denominacion]{height:25px; width:auto;}

/* ======================================================== ESTILO DE CAPAS ALTERNAS =====================================================================*/
#fondo, #cristal{background:rgba(0,0,0,0.5); top:0; left:0; width:100%; height:100%; z-index:2; cursor:pointer; }
#fondo, #cristal, #contenedor, #contenedor2, #resultados{position:fixed;}

#cristal{ cursor: default;}

#contenedor{z-index:3;}
#contenedor2{z-index:7;}
#contenedor3{z-index:10;}
#contenedor, #contenedor2{  width:90%; left:5%; top:5%; max-height:90%; overflow:auto;  border-radius:10px;}

legend{ background:var(--principal)}

.fieldset{ box-sizing:border-box; box-shadow:none; border-radius:5px; background:url(../imgs/fondos_cont/contenedor.jpg) no-repeat #FFF; background-size:100%;}
.legend{ text-transform:uppercase; font-weight:bolder;  font-size:1.2em; width:100%; color:#222; padding:10px; border-radius:5px 5px 0 0;box-sizing:border-box; }
.img_legend{ height:15px; width:auto; margin-right:5px; vertical-align:middle}
.contenido{  height:100%; padding:1%; border-radius:0 0 5px 5px; overflow:hidden}

#loading{ top:35%; position:fixed; width:10%; left:44%; background:rgba(0,0,0,0.7); z-index:100; box-shadow:0 0 10px rgba(0,0,0,0.7); text-align:center; border-radius:10px; padding:1%}
#loading >img{ width:100%; height:100%}

#resultados{ width:30%; z-index:20; bottom:0; right:1%; transition:all 0.5s linear; color:white; }
#resultados h3{ padding:10px; border-radius:10px; box-shadow:0 0 20px rgba(0,0,0,0.5)}
#resultados h3.ok{ background:#21CA00; color:white}
#resultados h3.error{ background:#F00; color:white}
#resultados h3.advertencia{ background:#FC3; color:white}

/* ======================================================== INPUTS =====================================================================*/
input:focus, select:focus, textarea:focus{ border-color:#c60909; }
input[type=radio]:checked + label { background:#c60909; color:white}

input[type=radio] { display:none; margin:10px;}
input[type=radio] + label {  display:inline-block; padding: 2px 0px; background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333)); text-align:center; font-size:1.1em; width:100%; color:#EEE; cursor:pointer; font-weight:bolder;}
input[type=radio] + label img { vertical-align:middle; width:auto; height:25px; margin-right:5px;}
input[type=radio]:checked + label { background:#c60909; }
#tipo_venta input[type=radio] + label img { vertical-align:middle; width:auto; height:20px; margin-right:5px;}

#forma_pago img{ vertical-align:middle; height:20px;}
#forma_pago label{ padding:10px 0; background:none !important }}

#remision + label{ border-radius:5px 5px 0 0;}
#cotizacion + label{ border-radius:0 0 5px 5px;}
#pago_meses input + label{ border-radius:5px;}


#s_remision + label{ border-radius:5px 5px 0 0; width:80%;}
#s_cotizacion + label{ border-radius:0 0 5px 5px; width:80%;}
#s_consignacion + label{ border-radius:0 0 5px 5px; width:80% }

#tipo_usuario label{ padding:10px !important; box-sizing:border-box;}
#tipo_usuario #remision + label{ border-radius:5px 0 0 5px;}
#tipo_usuario #cotizacion + label{ border-radius: 0 !important}
#tipo_usuario #consignacion + label{ border-radius: 0 5px 5px 0}

/*====================================================== ESTILOS DE BOTONES CON IMAGEN ===============*/
input[type=image]{ border:none; border:none;  background:none !important; padding:0 !important}
input[type=image]:hover{ background:none !important}

img[class=boton]{ 
	width:35px; height:35px; padding:5px; border-radius:5px; box-shadow:0px 2px 2px rgba(0,0,0,0.5); margin-right:5px;
	background: linear-gradient(to bottom,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);}
img[class=boton]:hover{
	background: linear-gradient(to bottom, #c60909 0%, #a00000 50%,#a00000 51%,#c60909 100%);}

img[class=revisar]{ height:15px !important; width:auto;}

.eliminar, .detalle, .seleccionar, .solicitar, .detalle_maestro, .devolver, .resetea, .revisar, .recuperar, .adjuntar{ 
	border:none !important; padding:5px 10px !important; background-size:80% !important; box-shadow:none !important; width:30px; height:30px;}

input[class=adjuntar], input[class=adjuntar]:hover{ background:url(../imgs/iconos/adjuntar.png) no-repeat center center;}

input[class=devolver], input[class=devolver]:hover{ background:url(../imgs/iconos/devolucion.png) no-repeat center center;}
input[class=revisar], input[class=revisar]:hover{ background:url(../imgs/iconos/revisar.png) no-repeat center center;}
input[class=eliminar], input[class=eliminar]:hover{background:url(../imgs/iconos/elimina.png) no-repeat center center;}
input[class=resetea], input[class=resetea]:hover{ background:url(../imgs/iconos/resetear.png) no-repeat center center;}
input[class=detalle], input[class=detalle]:hover{ background:url(../imgs/iconos/detalle.png) no-repeat center center;}
input[class=recuperar], input[class=recuperar]:hover{ background:url(../imgs/iconos/editar.png) no-repeat center center;}
input[class=seleccionar], input[class=seleccionar]:hover{ background:url(../imgs/iconos/select.png) no-repeat center center;}
input[class=solicitar], input[class=solicitar]:hover{width:30px; height:30px; background:url(../imgs/iconos/solicitar.png) no-repeat center center;}
input[class=cantidad]{ border:none; text-align:center; background:none; border-radius:3px; padding:5px;}
input[class=cantidad]:hover{ background:#FFC;}
input[class=cantidad]:focus{ background:#FFC; border:1px solid #9C243F;}
input[class=modifica_campo]{ text-align:center;}
img[class=agregar]{ float:right; cursor:pointer; height:35px; width:auto;}

button img{ vertical-align:center;}

.cancelar_mov, .cancelar_mov:hover{ color:white; padding:0px !important; font-size:0.8em !important; background:none; box-shadow:none !important}
.cancelar_mov img{ margin:0 !important;}

button.buscar_tienda,
button.membresias,
button.add_adelanto,
button.pagar_venta,
button.remision,
button.back,
button.cargos, 
button.vender, 
button.traspasar, 
button.comprar, 
button.cancelar,
button.cancelar_recepcion,
button.cancelar_detalle,
button.usar_membresia,
button.usar_servicio, 
button.agendar,
.mov_clientes{ background:none !important; padding:0 !important; box-shadow:none !important}

button.buscar_tienda img,
button.membresias img,
button.add_adelanto img,
button.pagar_venta img,
button.remision img,
button.back img,
button.cargos img, 
button.vender img, 
button.traspasar img, 
button.comprar img, 
button.cancelar img,
button.cancelar_recepcion img,
button.cancelar_detalle img,
button.usar_membresia img,
button.usar_servicio img,
button.agendar img,
.mov_clientes img{ margin:0 !important; height:20px; width:auto;}

.inputWithIcon input{ padding-left:40px;}
.inputWithIcon{ position:relative; }
.inputWithIcon.inputIconBg input:focus + i{ color:#fff; background-color:#c60909;}  
.inputWithIcon input:focus + i{ color:#c60909;}
.inputWithIcon i{ position:absolute; left:0; top:8px; padding:8px; color:#444444; transition:.3s;}
.inputWithIcon.inputIconBg i{ background-color:#aaa; color:#fff; padding:10px 4px; border-radius:4px 0 0 4px;}

.menu_focus{ background:#c60909 !important}
.menu_focus h5{ color:white !important}

/* ======================================================== CLASES =====================================================================*/
.ok{ color:#0A0;}
.error{ color:#F00;}
.advertencia{ color:#FC3;}

.boton{ cursor:pointer;}
.foco{ background:#c60909 !important; box-shadow:inset 1px 1px 10px rgba(0,0,0,0.6) !important; color:white !important;}

.total_registros{ color:#888; float:left; text-shadow:none !important;}
.total_registros >span{  margin-left:5px; display:inline; color:#c60909; padding:5px; border-radius:2px;}

.total{ background:none; border:none !important;}
.totales{ font-weight:bold;  background:#A2F59F;  white-space: nowrap; text-align:right}
.precios{ font-weight:bold; border:1px solid #060; color:#060;  white-space:nowrap; text-align:right}
.xml{ text-decoration:none; padding:2px 6px; border-radius:3px; color: white; background:#063;}

.nota,
.m_red,
.m_blue,
.m_yellow,
.m_green{
	padding:5px 10px;color:#333;}
	
.nota, .m_red{ background:#FFB6B6; border:1px solid #A00;}
.m_blue{ background:#B6DFFF; border:1px solid #84A4FF;}
.m_yellow{ background:#FFFDCF; border:1px solid #F9DD23;}
.m_green{ background:#A0FFB9; border:1px solid #63DA82;}

.listas_autocomplete{ margin:0; padding:0; position:relative; box-shadow:0px 10px 10px rgba(0,0,0,0.2); z-index:3; width:95%;  border-radius: 0 0 10px 10px}
.listas_autocomplete li{ overflow:hidden; color:#222; background:white; padding:5px 10px; list-style:none; cursor:pointer; font-size:10px; border-bottom:1px solid #DDD; font-weight:bolder;}
.listas_autocomplete li:last-child{border-bottom:none; border-radius: 0 0 10px 10px}
.listas_autocomplete li:nth-child(odd){background:white}
.listas_autocomplete li:nth-child(even){background:#F3F3F3}
.listas_autocomplete li:hover{ color:white; background:#c60909; box-shadow:inset 0 0 5px rgba(0,0,0,0.5);}
.listas_autocomplete strong{float:right; color:#00C}

.corte td{ padding:10px;}
.corte tr{ border-bottom:1px solid #555; background:white !important;}
.corte h4{margin:0; text-align:left; overflow:hidden}
.corte h4 label{ float:right;}


.izquierda{ float:left; width:50%; overflow:hidden;}
.derecha{ float:right; width:50%; overflow:hidden;}

.cell{ border:1px solid #444 !important; color:#444 !important;}
.desgloce{background:none !important; color:#03C; font-weight:initial}
.name_sucursal{color:#06783A !important;  font-size:1.7em !important}
.cabecera{ text-align:center;}
.cabecera td{color:#06783A !important; font-weigth:bolder;}
.dragged { position: absolute; opacity: 0.5; z-index: 2000;}

.existencias{ border:1px solid #00C; color:#00C;}
.existencias_av{ border:1px solid #C00; color:#C00;}

.modifica_campo{ border:none; border-bottom:1px solid #CCC; background:none;}
.modifica_campo:hover{ background:white; }
.modifica_campo:focus{ border:1px solid #444444; background:white;}

.paginacion {text-align:center;}
.paginacion input{ padding:2px !important; border-radius:0; font-size:10px; background:none; border:1px solid #444444; margin-left:3px; color:#444444;}
.paginacion input:hover{ background:#444444; color:white;}


.pdf { transition:all 0.2s linear; background-image: linear-gradient(to bottom, #ff0000, #d10b32); border-radius: 28px; font-family: Arial; color: #ffffff !important; font-size: 12px; padding: 10px 20px 10px 20px; text-decoration: none;}	
.pdf:hover { box-shadow:0 5px 3px rgba(0,0,0,0.5); transition:all 0.2s linear }

.b_button { transition:all 0.2s linear; background-image: linear-gradient(to bottom, #0196FE ,#0188E6); border-radius: 28px; font-family: Arial; color: #ffffff !important; font-size: 12px; padding: 10px 20px 10px 20px; text-decoration: none;}	
.b_button:hover { box-shadow:0 5px 3px rgba(0,0,0,0.5); transition:all 0.2s linear }


.datos_pagos{ background:rgba(220,220,220,0.5); padding:2%; box-shadow:inset 0 0 10px 1px rgba(0,0,0,0.5); overflow:hidden}
.popup{ background:rgba(255,253,181,1); border-radius:0 0 10px 10px; z-index:2; width:15%; top:15%; right:0%; position:fixed; padding:1%; box-shadow:0 0 10px rgba(0,0,0,0.5); cursor:move;}
.no_result{ background: rgba(220,220,220,0.3); text-align:center !important; display:inline-block; padding:2%; border-top:10px solid #444444;
box-shadow:0px 0px 3px #999; border-radius:5px; color:#444444 !important;}

.label2{background:#89D4FF; border-radius:5px; padding: 5px 9px; font-weight:bold; color:#333}
.stock_min{ border:1px solid #999; background:#DDD;}
.stock_max{ border:1px solid #999; background:#CCC;}
.precio_0{ color:red; font-weight:bolder;}
.rojo{ border:1px solid #C00; color:#C00; background: rgba(255,0,0,0.1)}

label img{vertical-align:middle}

.notas_interes li{ margin-top:10px;}

.flex{ display:flex;}
.flex_middle{ display: flex; align-items: center; justify-content: center;}

.two{ width:50%; margin-right:0.5%;}
.tree{ width:33%; margin-right:0.5%;}
.four{ width:25%; margin-right:0.5%;}

span.two{ margin-right:0}
span.tree{ margin-right:0}
span.four{ margin-right:0}

input[name=codigo_brazalete]{ text-align:center; font-size:18px; color:blue}

label img{vertical-align:middle}

.notas_interes li{ margin-top:10px;}

.fa-usd{font-size:6em; color:#0B0 !important}


/* ======================================================== TABLAS =====================================================================*/
table th{ #444444}
table th img{ vertical-align:middle}

table tr:hover{ background:rgba(255,0,0,0.2);}

tr[class=detalle_kit]{ box-shadow:inset 0 2px 3px rgba(0,0,0,0.3); border:1px solid white; background:rgba(255,0,0,0.2) !important}
tr[class=detalle_kit]:hover{ color:black;}

tr[class=promociones]{ box-shadow:inset 0 2px 3px rgba(0,0,0,0.3); border:1px solid white; background:rgba(85,208,154,0.8) !important}
tr[class=promociones]:hover{ color:black;}

table.denominacion tr{ background:none !important; border-bottom:1px solid rgba(0,0,0,0.3)}
table.denominacion tr:hover{ color:black}
table.denominacion th img{ width:30px; height:30px; margin-right:10px}

.tabla_dinamica{ text-align:center;}
.tabla_dinamica tr td:first-child, .id{  border-bottom:1px solid #c60909 !important; text-align:center; color:#c60909; font-weight:bolder}
.tabla_dinamica th a{color:#DDD !important;}
.tabla_dinamica th img{width:15px; vertical-align:middle}

#tabla_tiket tr, #tabla_tiket th{ background:white !important; color:black; border:none}
table.blanco tr, table.blanco tr:hover{ background:none; color:black}
table.blanco td{ border:none;}

#panel_sinc img{ width:30px; height:auto;}
#panel_sinc .cabecera{color:#c60909; text-align:left; border-bottom:5px solid #c60909; background:white; padding:10px}

#panel_sinc tr{ background:none !important; border-bottom:1px solid #DDD}
#panel_sinc tr:hover{ color:black !important}
#panel_sinc th{ background:#333;}

#panel_sinc tr td:nth-child(1){color:red; text-align:right}
#panel_sinc tr td:nth-child(2){font-weight:normal}
#panel_sinc tr td:nth-child(3){background:#EDEDED; text-align:center}
#panel_sinc tr td:nth-child(4){background:#EDEDED; text-align:center}


/* ======================================================== Recargas =====================================================================*/
#puntos_acumulados{text-align:center; color:yellow; font-size:16px; background:none; border:none}

#sucursal_productos_v td:nth-child(13){ background:#AAEE90; border:1px solid #666;}
#sucursal_productos_v td:nth-child(14){ border:1px solid #00C; color:#00C;}
#sucursal_productos_v td:nth-child(14) a{color:#00C;}
#sucursal_productos_v td:nth-child(15){border:1px solid #999; background:#DDD; }
#sucursal_productos_v td:nth-child(16){border:1px solid #999; background:#CCC;}

#sucursal_productos_precios td:nth-child(6),
#sucursal_productos_precios td:nth-child(7),
#sucursal_productos_precios td:nth-child(8){ background:#AAEE90; border:1px solid #666; text-align:right}

#sucursal_productos_precios td:nth-child(9),
#sucursal_productos_precios td:nth-child(10),
#sucursal_productos_precios td:nth-child(11){ background:#C0DE94;  border:1px solid #666; text-align:right}

#sucursal_productos_precios td:nth-child(12),
#sucursal_productos_precios td:nth-child(13),
#sucursal_productos_precios td:nth-child(14){ background:#E9EA72;  border:1px solid #666; text-align:right}

#sucursal_productos_precios td:nth-child(15),
#sucursal_productos_precios td:nth-child(16),
#sucursal_productos_precios td:nth-child(17){ background:#EAB73D;  border:1px solid #666; text-align:right}

#sucursal_productos_precios td:nth-child(18),
#sucursal_productos_precios td:nth-child(19),
#sucursal_productos_precios td:nth-child(20){ background:#DB805C; border:1px solid #666; text-align:right}

#resultados_busqueda{ overflow:auto;}
#resultados_busqueda #sucursal_lotes_detalle td:nth-child(9){ color:#090; border:1px solid #666;}
#resultados_busqueda #sucursal_lotes_detalle td:nth-child(10){ color:#555; border:1px solid #666;}
#resultados_busqueda #sucursal_lotes_detalle td:nth-child(11){ color:#00C; border:1px solid #666;}

.dataTables_filter{margin:5px 0}
.dataTables_filter label{ font-weight:bolder;}
.dataTables_filter label input{ width:50%; display:block; background:#FCFFDC; border:1px solid #AAA}
.dataTables_info{ text-align:center; font-weight:bolder; margin:10px;}

.tooltipMenu{ border: 1px solid #DDD; border-radius:5px; background:#FFF; box-shadow:-5px 5px 5px rgba(0,0,0,0.3); padding:5px;}
.tooltipMenu ul{ text-align:left; padding:0; list-style:none;}
.tooltipMenu ul li{ padding:8px 5px;}
.tooltipMenu ul li:hover{ background:rgba(255,0,0,0.2);}
.tooltipMenu ul li:hover a{ color:white}
.tooltipMenu ul li input{ vertical-align: middle; margin-right:5px}
.close_submenu{ position:absolute; right:-10px; top:-10px;}
.active{ color:white !important; background:#c60909 !important; box-shadow:inset 0 0 5px rgba(0,0,0,0.5);}
	#tabla_productos{overflow: auto; height:100%; background:#FFF;}

.utilidad_producto{ width:80px;}
#tabla_productos input, #tabla_productos select{ padding:5px !important}
#tabla_productos .eliminar{ padding:10px !important}
#tabla_productos tr{ font-weight:bolder}
#tabla_productos td{ border:none}

/* ======================================================== ESTILOS A LA MEDIDA =====================================================================*/
.resaltado{ background:rgba(255,0,0,0.2) !important;}
.figure_almacen{ width:40%; display:inline-block; margin:2% 3%}
.figure_almacen td > img{ width:50%; height:auto}
.figure_almacen tr{ background:none !important; }
.figure_almacen tr:hover{ background:none; color:black;}
.figure_almacen a{ color:white}
.figure_almacen .pie_almacen{ padding:0 5px; text-align:left; background:rgba(20,20,20,0.8); border-radius:10px}
.figure_almacen .pie_almacen img{ vertical-align:middle; height:25px; width:30px; margin-right:5px;}
.figure_almacen textarea{ text-align:center; height:20px}


figure{ cursor:pointer; text-align:center; float:left; margin:1% 2.5%; position: relative; }
figure img{ width:80%; height:auto; max-width:100%;}

figure.terminales{ cursor:pointer; text-align:center; display:inline-block; width:20%; height:300px; margin:1% 2.5%; position: relative; padding:0;}
figure.terminales div{ position:absolute; top:20%; left:30%;  }
figure.terminales article{ position:absolute; bottom:0; right:0}
figure.terminales img{ height:100%; width:auto;}

.paginate_button{ padding:5px; border:1px solid #444444; margin:2px; cursor:pointer }
.dataTables_paginate{ padding:10px; text-align:center}
.dataTables_paginate span{ display:inline !important; }


table.formato_celda label{ display:inline-block}
table.formato_celda tr{ background:none; text-align:right}
table.formato_celda th{ background:#a00000; color:#EEE; border:1px solid rgba(0,0,0,0.5); }
table.formato_celda th h5{ text-align:right; color:#c60909 !important;}
table.formato_celda td{ border:1px solid rgba(0,0,0,0.3);}
table.formato_celda td a{ color:#333; font-weight:bolder; font-size:14px}
#celda_pie{ background:#F3FCA3}
#celda_pie td{ font-size:16px; padding:10px 3px; font-weight:bold}
table.formato_celda h5{ font-size:10px;margin:0}


.detalle_rangos{ position:absolute; top:-2px; right:-2px; width:40px !important; height:40px !important }
.noti_apartadas{ width:15px; height:15px; position:absolute; top:0; right:0}
.rounder{background:#F00}

#elminar_mascota{
	border:none !important; padding:2px 10px !important; background-size:60% !important; box-shadow:none !important; width:30px; height:30px;	
}
#elminar_mascota, #elminar_mascota:hover {background:url(../imgs/iconos/eliminar.png) no-repeat center center;}
#imagen_mascota{
	width:200px;
	height:200px;
	margin-bottom:10px;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	object-fit:contain;
}
.imagen_mascota{
	width: 100px;
	height: 100px;
	border-radius: 200px;
	border:1px solid #c6c1c1;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  }
  .enlace_mascota{
	display: block;
  }
  
  .contenedor_btn_file input[type='file']{
	appearance: none;/*no se le aplica un estilo especial*/
	display: none;
	visibility: hidden; /*se esconde elemento pero deja su espacio vacio*/
	opacity: 0;
  }
  .contenedor_btn_file{
	display: inline-block;
	position: relative;
	border: 0;
	width: 80%;
	background: #c60909;
	color:#000;
	padding: 10px;
	border-radius: 8px;
	cursor: pointer;
	transition: background .3s ease-out;
	margin-top:13px;
	text-align:center;
  }
  .contenedor_btn_file:hover {
	background-color: #807e7e;
  }
  .contenedor_btn_file img{
	margin-right: 10px;
	width: 25px;
	height: 25px;
  }

.italic{ color:#222;}
.img_notificar{ position:absolute; top:20px; right:20px}
.notificaciones .div_row{ background:#fffbce; margin:5px 0}

.desc_producto{ position:relative}
.desc_producto h4{ margin:3px 0}
.opciones_carrito{ position:absolute; top:0; right:0}
.opciones_carrito input{ display:block } 

.totales_c{ font-size:2rem; color:green}

.users label{ padding:10px 5px !important}
.users #l_nact{ background: linear-gradient(to bottom, #ff5947  0%,#ed0707 100%); }
.users #l_act{ background: linear-gradient(to bottom, #a9db80 0%,#96c56f 100%);}