*{ outline:none;}


:root{ 
	--principal: #333;
	--secundario: #dc1e26;
	--boton_1: #666;
	--boton_2: #444;
}

/* ======================================================== ELEMENTOS GENERALES ===========================================================*/

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

h1, .total{text-align:center; font-size:72px; font-weight:bolder; color:#0B0; margin:0;}
h2{ border-bottom: 1px dashed #000;}
h3{ text-align:center;}
h3 img{ width:25px; height:auto; margin-right:10px; vertical-align:middle;}
h4{text-transform:uppercase; clear:both;  font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color:#dc1e26}

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

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

/* ======================================================== SECCIONES DEL SISTEMA ==========================================================*/
#div_login{  background:url(../imgs/fondos_cont/login.png) #FFF no-repeat; background-size:cover; background-position:right}

header{ width:100%; height:10%; box-sizing:border-box; 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%;  }
#principal_body{ width:100%; overflow:auto; height:90%; padding:1%; box-sizing:border-box;}
#contenido{ width: 100%; height:100%; display:flex;}
#bandeja_venta{ height:100%; width:75%;}

#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:#dc1e26; width:auto;float:left; cursor:pointer;}

#section{ height:90%;}
#sidebar{ height:90% !important;}

#menu_ventas{ height:5%;overflow:hidden;}
#menu_ventas a{ margin-right:10px; padding:10px 20px; background:white; font-weight:bolder; display:table-cell; border-right:1px solid rgba(100,100,100,0.4);}
#menu_ventas a.acciones{background: linear-gradient(to bottom, #666 0%,#444 100%); color:white !important;}

#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:5px}
#paneles .legend{background:#444; font-size:0.8em}
#paneles .contenido{ background:rgba(0,0,0,0.6)}

footer{ position:fixed; width:100%; bottom:0; text-align:center; color:white; padding:20px 0; opacity:0; transition:all 1s ease-in}


/* ======================================================== 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:#444}
#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:#333; color:white; text-align:center; margin-left:5px; border-radius:5px 0 0 5px}

#acciones_inventario{ width:100%; background:#DEDEDE; padding:10px 0; }
#acciones_inventario a{ padding:5px 20px; color:red; border-left:1px solid #AAA; background:linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);}
#acciones_inventario a img{ height:40px; width:auto; vertical-align:middle; margin-right:20px}

#detalle_inventario{ width:90%; height:100%; 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{ }
#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:#333; color:white; padding:5px 15px; float:left; margin-right:5px;}

#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:white}
#paneles .legend{ color:white !important}
.img_legend{ height:15px; width:auto; margin-right:5px; vertical-align:middle}
.contenido{ background:#FFF; 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:#dc1e26; }
input[type=button], input[type=submit], button{ background: #444;}
input[type=button]:hover, input[type=submit]:hover, button:hover{ background: #dc1e26;}
input[type=radio]:checked + label { background:#dc1e26; 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;}
#tipo_venta input[type=radio] + label img { vertical-align:middle; width:auto; height:20px; margin-right:5px;}

#forma_pago label{ text-align:left;}
#forma_pago img{ margin:0 15px 0 15px; float:left; height:20px;}

#radio1 + label{ border-radius:5px 5px 0 0; border:none; background: rgba(250,250,250,0);}
#radio2 + label{ border-bottom:1px solid #EEE; border:none; background: rgba(250,250,250,0); border-top:1px solid rgba(0,0,0,0.4); border-bottom:1px solid rgba(0,0,0,0.4);}
#radio3 + label{ border-radius:0 0 5px 5px; border:none; background: rgba(250,250,250,0);}

#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 ===============*/

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, #666 0%, #444 50%,#444 51%,#666 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:#dc1e26;}  
.inputWithIcon input:focus + i{ color:#dc1e26;}
.inputWithIcon i{ position:absolute; left:0; top:8px; padding:8px; color:#333; transition:.3s;}
.inputWithIcon.inputIconBg i{ background-color:#aaa; color:#fff; padding:10px 4px; border-radius:4px 0 0 4px;}

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

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

.boton{ cursor:pointer;}

.total_registros{ color:#888; float:left; text-shadow:none !important;}
.total_registros >span{  margin-left:5px; display:inline; color:#dc1e26; 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:#333; 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:#666; 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 #333; background:white;}

.paginacion {text-align:center;}
.paginacion input{ padding:2px !important; border-radius:0; font-size:10px; background:none; border:1px solid #333; margin-left:3px; color:#333;}
.paginacion input:hover{ background:#333; 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 #333;
box-shadow:0px 0px 3px #999; border-radius:5px; color:#333 !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{ width:100%; border-collapse:collapse;}

table th{ padding:5px 10px; text-transform:uppercase; background: linear-gradient(to bottom, #777 0%,#222 100%); color:#FDFDFD; cursor:pointer}
table th img{ vertical-align:middle}
table td{ padding:3px;}
table th:first-child, table td:first-child{ border:none;}
table td input{ margin:0 !important}

table tr{background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); }
table tr:hover{ background:rgba(255,81,16, 0.7);}

tr[class=detalle_kit]{ box-shadow:inset 0 2px 3px rgba(0,0,0,0.3); border:1px solid white; background:rgba(255,81,16, 0.7) !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 #dc1e26 !important; text-align:center; color:#dc1e26; 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:#666; text-align:left; border-bottom:5px solid #666; 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}

#paredes{overflow:hidden;}
#paredes div{ width:30%; margin:1.6%; height:210px; overflow:auto; float:left}
#paredes div img{ width:100% !important; height:100%; cursor:pointer; margin:0}

#carousel { width:100%; height:350px; position:relative; clear:both; overflow:hidden;}
#carousel img { display: hidden; cursor: pointer; box-shadow:0 0 12px rgba(0,0,0,0.8); }
#acciones_paredes{ text-align:center; clear:both; margin-top:10px;}
#acciones_paredes button{ border-radius:0px; margin:0 !important}

div.detalle_pared{ margin:20px 0;}
div.detalle_pared h3{ background:#AAA; padding:5px; margin:0; border-radius:0 0 5px 5px; color:#EEE; text-align:left}
div.detalle_pared h3 .eliminar{ margin:0}
#detalle_pared .modifica_campo, #detalle_pared .modifica_campo2{ text-align:left !important}

div.carril{ height:120px; width:100%; background:#DDD; text-align:left; box-shadow:inset 0 2px 9px rgba(0,0,0,0.7); border-radius:5px 5px 0 0;}

div.estiba{ height:100px; width:100px; margin:10px; background:#F45; float:left; cursor:pointer; position:relative; box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:5px;}
div.estiba img{ width:100%; height:100%; border-radius:5px;}
div.estiba h6{ position:absolute; bottom:0; margin:0; text-align:center; width:100%;; background:rgba(0,0,0,0.8); color:white; padding:4px 0; border-radius:0 0 5px 5px}

div.add_estiba{ height:96px; width:96px; margin:10px; background:#CCC; float:left; cursor:pointer; box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:5px; border:2px dashed #AAA;}
div.add_estiba img{ width:80px; height:80px; margin:7px;}

div.detalle_estiba{ text-align:center; background:#DEDED; padding:10px;}
div.detalle_estiba div{margin:10px 0; display:table}
div.detalle_estiba div > h3{display:table-cell; vertical-align: middle; letter-spacing:1px; font-size:18px;}
div.detalle_estiba div > h3 > label{ font-size:10px;}

div.tam_1{ width:100%; height:120px; background:#DDD; }
div.tam_2{ width:100%; height:80px; background:#AAA;}
div.tam_3{ width:100%; height:40px; background:#666;}

#sucursal_productos_v td:nth-child(14){ background:#AAEE90; border:1px solid #666;}
#sucursal_productos_v td:nth-child(15){ border:1px solid #00C; color:#00C;}
#sucursal_productos_v td:nth-child(15) a{color:#00C;}
#sucursal_productos_v td:nth-child(16){border:1px solid #999; background:#DDD; }
#sucursal_productos_v td:nth-child(17){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,81,16, 0.7);}
.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;}


.label__checkbox { display: none;}
.label__check {	border-radius: 50%; border: 5px solid rgba(0,0,0,0.1); background: white; vertical-align: middle; width: 2em; height: 2em; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border .3s ease;
  i.icon { opacity: 0.2; font-size: ~'calc(1rem + 1vw)'; color: transparent; transition: opacity .3s .1s ease; -webkit-text-stroke: 3px rgba(0,0,0,.5);}
  &:hover {border: 5px solid rgba(0,0,0,0.2);}
}

.label span{ margin-top:0;}
.label__checkbox:checked + .label__text .label__check {
  animation: check .5s cubic-bezier(0.895, 0.030, 0.685, 0.220) forwards;
  .icon {
    opacity: 1;
    transform: scale(0);
    color: white;
    -webkit-text-stroke: 0;
    animation: icon .3s cubic-bezier(1.000, 0.008, 0.565, 1.650) .1s 1 forwards;
  }
}

@keyframes icon {
  from { opacity: 0; transform: scale(0.3);}
  to { opacity: 1; transform: scale(1)}
}

@keyframes check {
  0% {}
  10% { opacity: 0.1; background: rgba(0,0,0,0.2);}
  12% { opacity: 0.4; background: rgba(0,0,0,0.1);}
  50% { background: #00d478; opacity: 0.6; border: 5px solid #00d478;}
  100% { background: #00d478; opacity: 1;border: 5px solid #00d478;}
}


@media screen and (max-width: 400px) {
	#login{ width:90%; height:80%}
}
@media screen and (max-device-width : 480px) {
	#login{ width:90%; height:80%}
	#login img{ width:50% }
	#login:input{ font-size:5em !important}
	i{ font-size:5em !important}
	
	#myajaxmenu li{ width:70%; margin-left:15%; float:none}
}

@media print{ .page_break{page-break-before: always;}}
	#tabla_productos{overflow: auto; height:100%; background:#FFF;}

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

/* ======================================================== ESTILOS A LA MEDIDA =====================================================================*/

.figure_membresia{padding:3% 1%; cursor:pointer; background:url(../imgs/iconos/fondo_field_h.png) left no-repeat rgba(0,0,0,0.8); background-size:cover; 
	overflow:hidden; box-shadow:0 10px 10px rgba(0,0,0,0.4); transition:all 0.5s linear; margin-top:10px; border-radius:10px; }
.figure_membresia:hover{ background:url(../imgs/iconos/fondo_field.png) left no-repeat rgba(0,0,0,0.8); background-size:cover; transition:all 0.5s linear; }

.figure_membresia .izquierda img{ height:70px; width:auto; display:block;}
.figure_membresia strong{color: #FCBA00; font-size:1.2em;}
.figure_membresia h3{color: white; font-size:2.4em; margin:0;}
.figure_membresia h5{margin-top:3px !important; color:#DFDFDF; overflow:hidden;}
.figure_membresia h5 img{display:inline !important; vertical-align:middle}
.figure_membresia h5 label{color:#FCBA00; font-weight:bolder; font-size:1em;}

.resaltado{ background:#FF0 !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.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;}

figure.servicio{ border-radius:10px;  transition:all 0.3s ease-in; width:98%; float:none; margin:1% 0; background:url(../imgs/iconos/fondo_serv.png) left no-repeat rgba(0,0,0,0.8); background-size:cover;}
figure.servicio img{ height:60px; width:auto;}
figure.servicio h3{ color:white}
figure.servicio:hover{ background:url(../imgs/iconos/fondo_serv.png) left no-repeat rgba(255,0,0,0.9); background-size:cover; transition:all 0.3s ease-out}
figure.servicio .id{ border-radius:10px 0 0 10px}

figure.servicio:before, figure.servicio:after{ content: ''; position: absolute; z-index: -2; }
figure.servicio{box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset}

figure.sel_promo{transition:all 0.3s ease-in; width:30%; height:166px; margin:1% 1.5%; background:url(../imgs/iconos/cerveza.png) left no-repeat rgba(0,0,0,0.3); background-size:cover; display:table;}
figure.sel_promo:hover{ background:url(../imgs/iconos/cerveza.png) left no-repeat rgba(0,0,0,0.3); background-size:cover; transition:all 0.3s ease-out;}
figure.sel_promo .titulo{ background:rgba(0,0,0,0.8); color:#EFEFEF; font-weight:bolder; padding:5px; border-radius:5px 5px 0 0; display:table-row;}
figure.sel_promo .contenido_promo{ vertical-align:middle; display:table-cell; height:100%;}
figure.sel_promo ul{ text-align:left; font-weight:bold; color:#DEDEDE}
figure.sel_promo:before, figure.servicio:after{ content: ''; position: absolute; z-index: -2; }
figure.sel_promo{box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset}

figure.servicio{ border-radius:10px;  transition:all 0.3s ease-in; width:24%; margin:0.5%; background:url(../imgs/iconos/fondo_serv.png) left no-repeat rgba(0,0,0,0.8); background-size:cover;}
figure.servicio img{ height:60px; width:auto;}
figure.servicio h3{ color:white}
figure.servicio:hover{ background:url(../imgs/iconos/fondo_serv.png) left no-repeat rgba(255,0,0,0.9); background-size:cover; transition:all 0.3s ease-out}
figure.servicio .id{ border-radius:10px 0 0 10px}

figure.servicio:before, figure.servicio:after{ content: ''; position: absolute; z-index: -2; }
figure.servicio{box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset}


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

.cabecera_nova span{margin-bottom:0 !important }
.cotizacion_nova h1{ color:black; font-size:30px !important; text-align:left !important}
.cotizacion_nova h2{ border-bottom:5px solid #555; border-top:none !important; margin:0}
.cotizacion_nova h4{  color:black; background:none !important}
.cotizacion_nova h5{ margin-top:10px !important}
.cotizacion_nova strong{ display:block; margin-top:2px; margin-left:10px;}
.cotizacion_nova th{ background:#555 !important; color:white !important}
.cotizacion_nova td{ font-weight:normal !important}



.promos_guris{ width:20%; margin:1% 2.25%; display:inline-block; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
.promos_guris .sel_promo_guri{ width:100%; height:auto; max-height:400px; cursor:pointer;}
.promos_guris .two{ height:50px !important; background:#DDD;}
.promos_guris .titulo{ background: linear-gradient(to bottom, #555 0%,#222 100%); color:#FDFDFD; padding:10px; text-align:center}
.promos_guris #izquierda input{ width:100%; height:100%; background:none; border:none; padding:0; text-align:center; font-size:2.2em; color:white; font-weight:bolder;}
.promos_guris #derecha button{ width:100%; height:100%; background:none; border:none; padding:0; border-radius:0; text-align:center; font-size:2.2em; color:white; font-weight:bolder; margin:0;}
.promos_guris #derecha button img{ width:50px !important; height:50px !important;}
.brazaletes tr{ border:1px solid rgba(200,200,200,0.9)}
.brazaletes tr img{ width:30px !important; height:30px !important;}

#paquetes_mover .placeholder { position: relative;}
#paquetes_mover .placeholder:before { position: absolute;}



table.formato_celda label{ display:inline-block}
table.formato_celda tr{ background:none; text-align:right}
table.formato_celda th{ background:#444; color:#EEE; border:1px solid rgba(0,0,0,0.5); }
table.formato_celda th h5{ text-align:right; color:#dc1e26 !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}


.contenedor_web{ border-radius:5px; box-shadow: 5px 5px 5px rgba(0,0,0,0.3); background: linear-gradient(to bottom, #EFEFEF 0%, #DEDEDE 100%); width:100%; display:inline-block; box-sizing:border-box; padding:10px; margin:10px 0;}
.contenedor_web .rounder{ background:#45d30c; }
.contenedor_web .inicio{ background: linear-gradient(to right, #45d30c 1%,#9ae214 100%); padding:5px 10px; font-size:10px; margin:0; border-radius:20px 0 0 20px;}
.contenedor_web .final{ background: linear-gradient(to right, #9ae214 0%,#ebef0e 100%); padding:5px 10px; font-size:10px; margin:0; text-align:right; border-radius:0 20px 20px 0;}
.contenedor_web h2{ border:none !important; color:#0f2f8a}


.noti_apartadas{ width:15px; height:15px; position:absolute; top:0; right:0}
.rounder{background:#F00}
.active{ color:white; background:#666 !important; box-shadow:inset 0 0 5px rgba(0,0,0,0.5);}
.foco{ background:#dc1e26 !important; box-shadow:inset 1px 1px 10px rgba(0,0,0,0.6) !important; color:white !important;}