:root{
		--principal:#159543;
		--secundario: #eb5a2d;
		--boton_1:#10C968;
		--boton_2:#175836;
	}
	*{ outline:none;}
	html{ font-family: Helvetica, Arial, sans-serif; background:url(../imgs/fondos/contenedor_placacentro.jpg) no-repeat center; background-attachment:fixed; background-size:cover; font-size:0.8em }
	body{ position:fixed; width:100%; height:100%; left:0; margin:0;}
	#fondo_login{ position:fixed; width:100%; height:100%; left:0; margin:0;  background:rgba(255,143,22,0.7)}	
	
	h1{ text-align:center;}
	h1 i{ font-size:3em; color:var(--secundario)}
	h3 { text-align:center}
	h3 img{width:30px; height:30px; margin-right:5px; vertical-align:middle}
	h4{ color:var(--secundario); font-size:1.1rem; text-transform:uppercase}
	h5 > label{ float:right; color:#00AB34; font-weight:bolder}
	a{ color:var(--principal); text-decoration:none}

	fieldset{ border:1px solid #CCC; border-radius:5px; margin:10px 0;}
	legend{  background:var(--secundario); color:white; font-weight:bolder; padding:8px 20px; border-radius:5px;}
	.control_suc{ background:#DDD}

	.mi_menu li a { color: white;}
	.abre_div{ vertical-align:middle}
	
	#div_login{  background:url(../imgs/fondos_cont/login.jpg) #FFF no-repeat; background-size:cover; background-position:right}

	/*======================== ESTILOS PRINCIPALES  ===========================================*/
	
	header{height:10%; top:0; width:100%;  display:flex; color:white; background:rgba(0,0,0,0.6)}
	header > div { height:100%;}
	header > div a{ color:white}
	header #div_logo img{ height:70px; width:auto; cursor:pointer; vertical-align:middle}
	
	#principal{ overflow:auto; height:90%; padding:1%; width:100%;  background:rgba(0,0,0,0.6); box-sizing:border-box}
	
	footer{ position:fixed; width:100%; bottom:0; text-align:center; color:white; padding:20px 0; opacity:0; transition:all 1s ease-in}

	/* ======================================================== INPUTS =====================================================================*/
	input:focus, select:focus, textarea:focus{ border-color:var(--secundario); }
	input[type=button], input[type=submit], button{ background: #175836;}
	input[type=button]:hover, input[type=submit]:hover, button:hover{ background: var(--secundario);}
	input[type=radio]:checked + label { background:var(--secundario); color:white}
	
	table input[type=image]{ width:25px !important; height:25px !important; padding:0px}
	table input, table button{ margin-top:0px}
	
	.editar, .seleccionar, .detalle_maestro, .devolver, .resetea, .sincronizar{ border:none !important; padding:5px 10px !important;}
	
	input[class=guardar_utilidad], input[class=guardar_utilidad]:hover{ width:25px; height:25px; background:url(../imgs/iconos/buttons/save.png) no-repeat center center; background-size:50%; box-shadow:none;}
	input[class=revisar], input[class=revisar]:hover{ width:25px; height:25px; background:url(../imgs/iconos/comprar.png) no-repeat center center; background-size:50%; box-shadow:none;}
	input[class=resetea], input[class=resetea]:hover{ width:25px; height:25px; background:url(../imgs/iconos/resetear.png) no-repeat center center; background-size:80%; box-shadow:none;}
	input[class=editar], input[class=editar]:hover{ width:25px; height:25px; background:url(../imgs/iconos/edita.png) no-repeat center center; background-size:70%; box-shadow:none;}
	input[class=editar], input[class=editar]:hover{ width:25px; height:25px; background:url(../imgs/iconos/edita.png) no-repeat center center; background-size:80%; box-shadow:none;}
	input[class=seleccionar], input[class=seleccionar]:hover{ width:25px; height:25px; background:url(../imgs/iconos/select.png) no-repeat center center; background-size:80%; box-shadow:none;}
	input[class=historial], input[class=historial]:hover{ width:25px; height:25px; background:url(../imgs/iconos/ascendant.png) no-repeat center center; background-size:50%; box-shadow:none;}
	input[class=devolver], input[class=devolver]:hover{ width:25px; height:25px; background:url(../imgs/iconos/devolucion.png) no-repeat center center; background-size:80%; box-shadow:none;}
	
	input[type=image]{ width:50px; height:50px; border:none;}
	input[type=image]:hover{ background:none !important}
	
	input[class=cantidad]{ border:none; width:50px !important; text-align:center; background:none; padding:3px 0px;}
	input[class=cantidad]:hover{ background:#FFC;}
	input[class=cantidad]:focus{ background:#FFC; border:1px solid #9C243F; transition:all 0.5s ease-in}
	
	.modifica_campo{ border:none; border:1px solid transparent; background:none; font-style:italic; text-align:left; font-weight:normal !important}
	.modifica_campo:hover{ background:white; border:1px solid #EDF3C4 }
	.modifica_campo:focus{ border:1px solid var(--principal); background:white;}
	
	
	button.nota_credito{ margin:0 !important; background:none !important; padding:0 !important; box-shadow:none !important}
	button.nota_credito img{ margin:0 !important; height:25px; width:auto;}

	button.comprar{ margin:0 !important; background:none !important; padding:0 !important; box-shadow:none !important}
	button.comprar img{ margin:0 !important; height:25px; width:auto;}
	
	button.guardar_precios{ margin:0 !important; background:none !important; padding:0 !important; box-shadow:none !important}
	button.guardar_precios img{ margin:0 !important; height:25px; width:auto;}
	
	img[class=agregar]{ float:right; cursor:pointer; height:35px; width:auto;}
	img[class=agregar_nota_credito]{ float:right; cursor:pointer; height:50px; width:auto;}

	table input[type=image]{ width:25px !important; height:25px !important; padding:0px}
	button img{vertical-align:middle; width:auto; height:15px; margin-right:5px}
	
	img[class=boton]{
		width:35px; height:35px; padding:5px; border-radius:5px; box-shadow:0 0 5px 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%);}

	/*====================== TABLAS ================================== */
	.fieldset{ box-sizing:border-box; border-radius:7px; 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:#333; 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}
	
	.monto_pago{color:var(--secundario); }
	
	.foco{ background: var(--secundario) !important; color:white !important}
	.menu_focus { background:#10C968 !important; }
	
	.tabla_dinamica tr td:first-child, .id{  border-bottom:1px solid var(--secundario) !important; color:var(--secundario) !important;}

	.listas_autocomplete li{ color:var(--principal); }
	.listas_autocomplete li:hover{ background:#10C968;}
	
	.tooltipMenu img{ width:30px; height:30px }
	.tooltipMenu ul li:hover{ background:rgba(255,143,22,0.7);}
	.rounder{ background:var(--secundario);}
	.w_button:hover{ background:var(--secundario);}
	
	
	#desgloza_codigo{ text-align:center; padding:10px; }
	#desgloza_codigo a{ border:1px solid var(--principal); border-radius:50%; padding:10px; letter-spacing:2px; font-size:1em}
	
	#tabla_precios td:nth-of-type(2){background:#FFF; color: #00C; border:1px solid #00C; font-weight:bold}
	#tabla_precios td:nth-of-type(3),
	#tabla_precios td:nth-of-type(4){ background:#AAEE90; border:1px solid #666; text-align:right}
	#tabla_precios td:nth-of-type(5),
	#tabla_precios td:nth-of-type(6){ background:#C0DE94;  border:1px solid #666; text-align:right}
	#tabla_precios td:nth-of-type(7),
	#tabla_precios td:nth-of-type(8){ background:#E9EA72;  border:1px solid #666; text-align:right}
	#tabla_precios td:nth-of-type(9),
	#tabla_precios td:nth-of-type(10){ background:#EAB73D;  border:1px solid #666; text-align:right}
	#tabla_precios td:nth-of-type(11),
	#tabla_precios td:nth-of-type(12){ background:#DB805C; border:1px solid #666; text-align:right}
	
	#tabla_sucursal_facturas td:nth-of-type(11),
	#tabla_sucursal_facturas td:nth-of-type(12),
	#tabla_sucursal_facturas td:nth-of-type(13){ background:#DFDFDF; border:1px solid #666;}
	
	#tabla_sucursal_facturas td:nth-of-type(14),
	#tabla_sucursal_facturas td:nth-of-type(15),
	#tabla_sucursal_facturas td:nth-of-type(16){ background:#CACACA; border:1px solid #666;}
	

	#sucursal_inventarios_detalle td:nth-of-type(8){ background:#FFF; color: #00C; border:1px solid #00C;}
	#sucursal_inventarios_detalle td:nth-of-type(9){ background:#DDD;}
	#sucursal_inventarios_detalle td:nth-of-type(10){ background:#CCC;}
	
	#cuentas_pagar tr{ border-bottom: 1px solid rgba(20,20,20,0.4) !important; }
	#cuentas_pagar i{ font-weight:bolder;}
	#cuentas_pagar .cabecera_prov{ border:1px solid #039 !important;  color:#DFDFDF; background:#175836; padding:10px;}
	#cuentas_pagar .cabecera_prov:hover{ background:#175836 !important;}
	#cuentas_pagar .precios{ border:none !important; font-weight:bolder;}
	#cuentas_pagar .por_pagar{ border:none !important; font-weight:bolder; background-image: linear-gradient(to bottom, #ff0000, #d10b32); color:white; font-size:1.2em; padding:10px; text-align:right}
	#cuentas_pagar .pendientes{ color:red; font-weight:bold; text-align:right}
	#cuentas_pagar h4{ margin:0}
		
	#sucursal_cortes tr{ background:none !important; border-bottom:1px solid rgba(150,150,150, 0.4); text-align:right}
	#sucursal_cortes tr td{ border:1px solid rgba(120,120,120,0.3); font-weight:bolder;}
	#sucursal_cortes tr .precios{ background:#D2FFD7 !important;}
	#sucursal_cortes tr .existencias{ background:#DFE9FF !important;}
	#sucursal_cortes tr .deposito{ background:#FDFFC0 !important; color:#CB4A17; cursor:pointer}
	
	#sucursal_productos_precios td:nth-of-type(5){background:#FFF; color: #00C; border:1px solid #00C; font-weight:bold}

	#detalle_de_producto img{ width:15px; height:15px; vertical-align:middle}
	#resultados_busqueda{overflow:auto; margin:10px 0}
	
	
	/*============ OBJETOS CON MISMOS ESTILOS ===============*/
	#field_pedidos a{ background:#DDD; padding:3px 10px; margin-right:10px; float:left; border-radius:0 10px 0 0; color:black;}

	#control_ficha_producto, #control_ficha_proveedor{ overflow:hidden; border-bottom:5px solid #DDD; padding-top:5px}
	#control_ficha_producto a, #control_ficha_proveedor a{ background:var(--principal); color:white; padding:10px 15px; display:inline-block; margin-right:5px; border-radius:3px 3px 0 0; font-weight:bold}
	

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

	#datos_factura{overflow:hidden; margin-top:10px; text-align:center}
	#datos_factura h6{ clear:both; margin-top:10px;}

	#precios_calculados{ background:rgba(220,220,220,0.5); height:100%; float:right; width:30%; padding:0 1% 2% 1%; box-shadow:inset 0 0px 5px rgba(0,0,0,0.2);}
	#precios_calculados h5{text-align:center !important}
	#precios_calculados h5 input{float:none !important; display:inline !important}

	
	
	#codigos_extras{background:rgba(220,220,220,1); box-shadow:inset 0 0 5px rgba(0,0,0,0.5); border-radius:0 0 5px 5px;}
	#codigos_extras tr{ border-bottom:1px solid #666}
	#codigos_extras tr:last-child{ border-bottom:none}
	
	
	#grafica{ background:rgba(10,10,10,0.15); border-radius:10px}
	#grafica legend{ border-radius: 0 0 !important; }

	#impresion_tiket th{ background: none !important; color: #333; border: 1px solid #999;}
	#impresion_tiket h2{ margin-bottom:0; color:#4A6AF7; padding:0; border-bottom:none}

	#datos_pre h5{font-size:12px; font-family:'Arial Black', Gadget, sans-serif;}
	#datos_pre h5 label{color:#0A0; float:right; margin-right:5px;}
	
	#menu_excel{ border-radius:3px; background:#EDEDED; box-shadow:inset 0px 0 3px rgba(0,0,0,0.5); padding:10px; box-sizing:border-box}
	#menu_excel h5{ text-align:center; color:#070; margin:2px;}
	
	#menu_reportes{ border-radius:10px;  margin-bottom:10px; display:flex; padding:10px; background:rgba(0,0,0,0.5)}
	#menu_reportes div{ display:inline-block; margin:0 2px; text-align:center !important; padding:2px 20px; background:white; border-radius:5px}
	#menu_reportes input{ width:50px !important; height:50px !important;}
	#menu_reportes h5{ text-align:center !important; color:#175836; margin:2px;}
	
	#instrucciones li{ margin-top:5px;}
	
	#cargar_logo .imagen{ padding: 10px; border-radius: 5px; box-shadow: inset 0px 0px 6px rgba(0,0,0,0.3); background: rgba(200,200,200,0.2); width:200px; height:200px}
	#ui-autocomplete-div{position: fixed; top: 204.317px; left: 339.033px; z-index: 1; display: block;}
	#instrucciones li{ margin-top:5px; font-size:0.9em}
	#comunicado{ position:fixed; width:50%; height:60%; top:15%; left:5%; padding:30px;}
	
	/*============================================================ CREACION DE CLASES ===============*/
	
	.metas_sucursal{width:80px; text-align:center; font-weight:bold; font-size:1.1em; color:#333; background:none !important; border:none !important}
	.metas_sucursal:focus{border:1px solid #DEDEDE !important; background:rgba(0,0,0,0.5) !important}
	
	
	.info_div{ border-radius:10px; border:1px solid #CCC; overflow:hidden; padding:0 1% 1% 1%; margin-bottom:10px; clear:both;}
	.info_div h2{ text-transform: uppercase; background:#175836; margin:0; color:#FEFEFE; font-size:0.9em; border:none !important; border-radius: 0 0 5px 5px;  margin-bottom:5px}
	.info_div h2 img{ float:right}
	.info_div p{ font-weight:bold; font-size:1.4em; border-bottom: 1px solid rgba(50,50,50,0.2); color:#333; padding-bottom:5px;}
	.info_div p label{ float:right; color:#06783A}
	.info_div h5 label{ float:right; color:#005FE0}
	
	.contenedor_sucursales{ overflow:auto; max-height:160px;}

	.recepcion_padre{ background:#A4A4A4; border:1px solid #777;}
	.cabecera_recepcion th{ background:none; border-bottom:1px solid #AAA; color:blue; font-size:0.8em; text-align:center;}
	.cabecera_recepcion:hover{ background:none !important;}
	
	#cargar_logo .imagen{ padding: 10px; border-radius: 5px; box-shadow: inset 0px 0px 6px rgba(0,0,0,0.3); background: rgba(200,200,200,0.2); width:200px; height:200px}
	
	.solo_detalle h5{ margin:0}
	.licencia{ font-style:italic; font-size:1.3em; color:var(--secundario)}
	.rounder{ background:var(--secundario);}
	
	.div_sucursales{ margin:20px 0; box-sizing:border-box}
	.div_sucursales input, .div_sucursales option{ text-align:center !important; font-style:italic;border:none; border-bottom:1px solid #DDD; color:#005A94;}
	
	.inputWithIcon input{ padding-left:40px;}
	.inputWithIcon{ position:relative; }
	.inputWithIcon.inputIconBg input:focus + i{ color:#fff; background-color:var(--secundario);}  
	.inputWithIcon input:focus + i{ color:var(--secundario);}
	.inputWithIcon i{ position:absolute; left:0; top:8px; padding:8px; color:var(--principal); transition:.3s;}
	.inputWithIcon.inputIconBg i{ background-color:#aaa; color:#fff; padding:10px 4px; border-radius:4px 0 0 4px;}
	
	.imagen_reportes{ width:25px; height:25px;}
	.table_head{ font-size:1.5em; background: var(--principal) !important; color:white}
	.cabecera_datos td{ font-weight:bolder; background:#CCC;}
	
	#colores{background: linear-gradient(135deg, #1392b5 0%,#de47ac 100%);}
	button[class=editar]{ background:none; color:#f6a41a}
	

	.circular { border-top-left-radius: 50% 50%; border-top-right-radius: 50% 50%; border-bottom-right-radius: 50% 50%; border-bottom-left-radius: 50% 50%;}
	#muebles{ }
	#muebles > div{ margin:20px 0px; width:50%; box-sizing:border-box; float:left; background: linear-gradient(to bottom, #F2F2F2 0%,#DEDEDE 100%); position: relative;}
	#muebles > div:before, #muebles > div:after{ z-index: -1; position: absolute; content: ''; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; box-shadow: 0 15px 10px #777; transform: rotate(-3deg);}
	#muebles > div:after{transform: rotate(3deg); right: 10px;left: auto;}
	
	#muebles .w60{ position:relative}
	#muebles .w40{ padding:10px }
	#muebles .imagen{ height:350px; width:100%;}
	#muebles .color{position: absolute; width: 100%; bottom: 0; padding: 10px; box-sizing: border-box; color:white}
	
	#muebles h3{ font-size:1.8em}
	#muebles h5{ font-weight:normal; text-transform:uppercase; text-align:center}
	
	.precio_antes{ text-decoration:line-through; color:#555;}
	.precio_venta{ color:#05c640;}
	.estatus_v{padding:10px; background:#ad0101; position:absolute; top:0; text-transform:uppercase; color:white}
	.estatus_d{padding:10px; background:#01ad36; position:absolute; top:0; text-transform:uppercase; color:white}
	
	.boton_circular{ position:fixed; bottom:10px; right:10px; z-index:3}
	.boton_circular a{ width:80px; height:80px; background: red; display:block; text-align:center; box-shadow:0 0 10px #333}
	.boton_circular a i{ font-size:4em; color:#FFF; margin-top:14px }
	
	#muebles2{ }
	#muebles2 tr td > div{ margin:10px; box-shadow:-2px 2px 5px rgba(0,0,0,0.5); background:#DDD}
	#muebles2 h3{ font-size:1.5em}
	

	.contenedor_web{ border-radius:5px; box-shadow:-2px 2px 3px 0px rgba(0,0,0,0.4); background: linear-gradient(to bottom, #FFF 0%, #aadcec 100%); width:100%; display:inline-block; box-sizing:border-box; padding:10px; margin:10px 0;}

	#div_planeaciones{ 	}
	#div_planeaciones > div{background: linear-gradient(to bottom, #cdeb8b 0%,#a2d37e 100%); border-radius:5px; box-sizing:border-box; padding:10px; margin:10px 0;  box-shadow:-2px 2px 3px 0px rgba(0,0,0,0.4)}
	.drop_deta{ width:100%; padding:10px; background:#e6fbcc; box-sizing:border-box; margin:2px; text-align:center}
	.drop_prod{ width:100%; padding:10px; background:#eaf668; box-sizing:border-box; margin:2px; text-align:center}
	.drop_proy{ width:100%; padding:10px; background:#daefd8; box-sizing:border-box; margin:2px; text-align:center}

	.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
	.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
	.percent { position:absolute; display:inline-block; top:3px; left:48%; }
	
	.imagen_producto{ width:120px; height:120px; padding:5px; border-radius:5px; background:#DDD}
	.eliminar_imagen{ width:30px !important; height:30px !important; padding:5px; position:absolute; bottom:0; right:0px; background:#FFF; border-radius:5px 0 0 0 }
	
	.div_galerias { padding:10px}
	.div_galerias > div{ margin:10px 0; background: linear-gradient(to bottom, #cdeb8b 0%,#a2d37e 100%); box-sizing:border-box; padding:10px; border-radius:5px; cursor:pointer; box-shadow:-2px 2px 3px 0px rgba(0,0,0,0.4);}
	.ideas > div{ background: linear-gradient(to bottom, #b074b5 0%,#7f3885 100%);}

	#cont_galeria{}
	#cont_galeria > div{ float:left; margin:0 10px;  background:#DDD; padding:10px;  border-radius:6px; border-radius:5px}
	#cont_galeria > div > img { width:100px; height:100px; display:block; margin-bottom:20px} 

	.galerias{}
	.galerias h3{ text-align:left}
	.galerias > img{ width:50px height:50px; vertical-align:middle }

	.descargar_excel img{ width:30px; height:30px; margin-right:5px; vertical-align:middle}
	.tooltipMenu img{ width:30px; height:30px }
	.tooltipMenu ul li:hover{ background:rgba(255,143,22,0.7);}

	#resultados_infografias{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px 10px}
	.infografias{ width:100%; border-radius:10px; box-sizing:border-box; padding:20px; display:inline-block; background:var(--secundario)}
	.infografias h4{ color:white}
	.infografias iframe{ width:100%; height:100%}
	.infografias .pdf{ display:inline-block; padding:10px 20px;border-radius:5px; margin-top:10px; color:#F00 !important; background:white;}

	input[type=email]{ color:blue; text-align:center; font-style:italic}

	#cont_sucursales{}
	#control_suc{ margin:10px 0}
	#control_suc a{ padding:5px 15px; border:1px solid #159543; border-radius:5px; display:inline-block}

	.inputs_colores input{ font-size:1.5rem; font-weight:bolder}

	.cont_t_productos{ display:grid; grid-template-columns:repeat(6, 1fr); gap:20px}
	.cont_t_productos > div{text-align:center; background:#EEE; padding:20px; border-radius:10px; transition:all 0.3s linear; position:relative}
	.cont_t_productos > div:hover{box-shadow:0 0 10px rgba(0,0,0,0.3); transition:all 0.3s linear}
	.cont_t_productos__img{ height:auto; width:70%}

	.cont_t_productos__config{ position:absolute; top:-15px; right:0;  }
	.cont_t_productos__config button{ display:block; font-size:1.5rem; background:none; padding:0 5px}
	.cont_t_productos .delete_row{ color:#F00;}

	#div_familias > div{ margin:10px 0}

	.table_new{
		width: 100%;
		border-collapse: separate;
		border-spacing: 0 3px;
		background: rgba(200,200,200,0.5);
		padding: 2px 4px;
		box-shadow: 1px 5px 5px rgba(0,0,0,0.3);
		margin: 10px 0;
		box-sizing: border-box;
	}
	.table_new th{
		background:var(--principal); 
	}
	.table_new tr{
		background:#FFF !important;
	}
	.table_new tr:hover{ background:rgba(255,143,22,0.7) !important;}
	.table_new td{ padding:10px 2px}

	#planeacion table { margin-top:20px;}
	#planeacion table td{ width:25% !important; text-align:right}
	#planeacion table th{ width:25% !important; background:#555; color:#EEE; text-align:right}
	#planeacion table th a{ color:white;}	
	#planeacion table a{ color:#03C; text-decoration:underline; text-align:center}
	table .cabecera{
		background:#2E3D5A !important;
		text-align:left !important;
		color:white;
		padding:8px;
		border-radius:10px 10px 0 0;
	}
		
	/*{border:1px dashed #990000;*/}