*{ outline:none;}

:root{
	--principal : #06783A;
	--secundario : #EF9200;
}

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

html{ font-family: Arial, Helvetica, sans-serif; width:100%; height:100%; background:url(../imgs/fondos/contenedor_moblox.jpg) no-repeat center; background-attachment:fixed;  background-size:100% 100%;}
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;}
h3{ text-align:center;}
h3 img{ width:25px; height:auto; margin-right:10px; vertical-align:middle;}
h4{ text-transform:uppercase; color:var(--secundario); clear:both;}

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: var(--secundario); 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;}

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

/* ======================================================== SECCIONES DEL SISTEMA ==========================================================*/
#login{ position:fixed; width:70%; top:20%; height:60%; z-index:2; left:15%; box-shadow:0 0 10px rgba(0,0,0,0.5); background:white}
#login_form{ box-sizing:border-box; padding:10px 20px}
#login_form img{ height:70px; width:auto;}
#login_banner{ background:url(../imgs/fondos_cont/fondo_login.jpg); height:100%; background-size:cover}
#login_banner img{ height:200px; width:auto}

#login input:not([type=submit]){ padding:3%; text-align:left; padding-left:60px; margin-top:10px; color:black; border:none; border-bottom:2px solid #222; background:none; font-size:1.2em !important; transition:all 0.4s linear}
#login input:not([type=submit]):focus{border-bottom:2px solid var(--principal); color:var(--principal)}
#login input:not([type=submit]):focus i{color:white}
#login button{margin-top:20px; padding:3% 5%; background:#333}
#login .inputWithIcon i { font-size:2.5em; left:10px; color:#222}

header{ width:100%; height:10%; background:rgba(5,5,5, 0.5);display:flex; margin:0;}
header #logo{  width:20%;}
header #logo img{ margin:2px 0 0 10px; height:100px; 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%; padding:1%; box-sizing:border-box; background:rgba(5,5,5, 0.5);}
#contenido{ width: 100%; height:100%; display:flex;}


/* ======================================================== ESTILO DEL MENU =====================================================================*/
#ajaxmenu{ height:100%; width:100%; z-index:2; overflow:auto; text-align:center;}
#myajaxmenu { position:relative; border: none; text-transform:uppercase; padding:0; width:100%; margin:0; font-weight:bolder; font-size:0.8em; text-align:center; display:block !important }
#myajaxmenu h3{ color:white; padding:5px 0; bottom:0; margin:0; width:100%;}
#myajaxmenu a{ color:#F3F3F3; width:100%; height:100%; display:block}
#myajaxmenu > li { width:15%; position:relative; list-style:none; margin:4% 2%; height:150px; background:rgba(0,0,0,0.5); border-radius:10px; display: inline-block;}
#myajaxmenu > li img{ height:100%; width:auto; max-width:100%}
#myajaxmenu > li > ul{ width:100%; box-shadow: 0px -5px 8px rgba(0,0,0,0.3); bottom:0; position:absolute; padding:0; background:rgba(0,0,0,0.7); }
#myajaxmenu > li > ul > li { height:0; overflow:hidden; list-style: none; transition:all 0.3s linear; text-align:right;}
#myajaxmenu > li:hover > ul > li > a{display:block; height:100%;} 
#myajaxmenu > li:hover > ul > li{ border-bottom:1px solid rgba(0,0,0,0.5);  height:auto; overflow:visible; padding:5px 10px; margin:0; text-align:right;}
#myajaxmenu ul li:hover{ background:#00B958; transition:all 0.3s linear;}
#myajaxmenu >li:before{ top: 10px; bottom: 10px; left: 0; right: 50%; box-shadow: 0 0 15px rgba(0,0,0,0.6); border-radius: 5px / 100px;}
#myajaxmenu >li:before{right: 0}



.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:#175836}
#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;}

#resultados_terminar{ overflow:hidden; text-align:center; margin-bottom:10px;}
#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:var(--principal); color:white; padding:10px 20px; float:left; margin-right:5px; border-radius:5px 5px 0 0}
#control_ficha_producto a:focus{ box-shadow:0 0 10px rgba(0,0,0,0.5); background:var(--secundario);}

#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; }

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

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;}

fieldset{ background:white}
legend{ background:green; color:white}
legend img{ width:20px; height:20px; vertical-align:middle; margin-right:5px}

.fieldset{ box-sizing:border-box; border-radius:5px; background:url(../imgs/fondos_cont/contenedor.jpg) no-repeat #FFF; background-size:100%; margin-bottom:10px}
.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}

#contenedor .contenido, 
#contenedor2 .contenido{ background:none}

#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:var(--secundario); }
input[type=button], input[type=submit], button{ background: #00B958;}
input[type=button]:hover, input[type=submit]:hover, button:hover{ background: var(--secundario);}

input[type=radio]:checked + label { background:var(--secundario); color:white}
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;}

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

#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]{ width:40px; height:40px; border:none; border:none;  background:none !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, #00B958 0%, #175836 50%,#175836 51%,#00B958 100%);}

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

.eliminar, .detalle, .seleccionar, .solicitar, .detalle_maestro, .devolver, .resetea, .revisar, .recuperar, .adjuntar{ 
	border:none !important; box-shadow:none !important; width:20px; height:20px;}

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; background-size:contain}
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:35px !important;}

.adjuntar{ width:50px; height:50px}
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: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;}

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

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

.boton{ cursor:pointer;}
.foco{ background:var(--secundario) !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:var(--secundario); 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:var(--principal); 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:#00B958; 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 var(--principal); background:white;}

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

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

a.pdf{ display:inline-block;  border-radius:5px !important}
a.pdf img{ width:15px; height:15px; vertical-align:middle;}
.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 var(--principal);
box-shadow:0px 0px 3px #999; border-radius:5px; color:var(--principal) !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}


.monto_pago{ text-align:center; text-transform:uppercase; font-weight:600; font-size:40px; color:var(--secundario); padding:5px 10px 5px 20px; transition:all 0.3s linear;}
.monto_pago:focus{ text-align:center; text-transform:uppercase; font-weight:600; font-size:40px; color:#F69600; padding:5px 10px 5px 20px; transition:all 0.3s linear;}


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{ transition: all 0.3s ease-in}
table tr:hover{ background:rgba(239,146,0,0.8); transition: all 0.3s ease-out}

tr[class=detalle_kit]{ box-shadow:inset 0 2px 3px rgba(0,0,0,0.3); border:1px solid white; background:rgba(239,146,0,0.8) !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 var(--secundario) !important; text-align:center; color:var(--secundario); 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:#00B958; text-align:left; border-bottom:5px solid #00B958; 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 =====================================================================*/


#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(239,146,0,0.8);}
.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:#00B958 !important; box-shadow:inset 0 0 5px rgba(0,0,0,0.5);}

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


figure{ cursor:pointer; text-align:center; float:left; width:20%; margin:1% 2.5%; position: relative; }
figure img{ width:80%; height:150px; object-fit:cover;}


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


.rounder{background:#F00}

.elementos table{ width:100%;}
.elementos table th{ width:10%;}
.elementos input[type=number]{width:80px !important}

#datos_proyecto{ /*width:70%; float:right*/ }


#tipo_proyectos figure{ width:100%; border:1px solid #999; border-radius:10px}
.figures figure{ width:100%; border-radius:10px; border:1px solid #DDD; box-shadow:0 2px 5px rgba(0,0,0,0.3)}
.conteinerTags a{ padding:10px 20px; border-radius:5px; border:1px solid #777}

#datos_modulo{ width:100%;  }

/*=== Clases Helpers ====*/
.clearboth{	clear : both !important;}

.position_relative{	position : relative;}
.pos_absolute_cata{ position: absolute; top: -15px; right: 0; float: none; cursor : pointer; width:40px; height:40px}


.hide_elements_mod_right, .hide_elements_mod_left, .hide_elements_proy_right, .hide_elements_proy_left{
	display:none;
}

.show_elements_mod{
	display:inline-block;
}

/*=== Modificaciones de elementos formularios ===*/
#buttonInline{
	display : inline !important;
	width : 80% !important;
}

.imageSearch{
	vertical-align: middle;
    width: 20px;
}

.minSelect{
	width: 150px
}


.cols-2-elements{
	width: 49%;
    display: inline-block;
    margin: 5px 0px;
}

.cols-3-elements{
	width: 31%;
    display: inline-block;
    margin: 5px 7px;
}

.cols-4-elements{
	width: 23%;
    display: inline-block;
    margin: 5px 8px;
}


.cols-5-elements{
	width: 17%;
    display: inline-block;
    margin: 5px 14px;
}

.cols-5-elements input[type=radio]{
	display:inline-block !important;
}


.label_modulo{
	display : block;
	padding : 8px;
}

.conteiner_cols3{
	padding :0;
}

.cols-3-elements_v2{
	width: 31%;
    display: inline-block;
    margin: 5px 4px;
}


.align_rigth{
	text-align: right;
}

/*=== funcionamiento de imagen galery modulos */

.show_modulos_project{
	width: 50px;
	padding-bottom: 3%;
	cursor : pointer;
}

#firts_show_mod, #firts_show_proy{
	-moz-transform: scaleX(-1); /* Firefox */
	-o-transform: scaleX(-1); /* Opera */
	-webkit-transform: scaleX(-1); /* Chrome y Safari */
	transform: scaleX(-1); /* w3org */
	filter: FlipH; /* Internet Explorer */
	display:none;
}


/*=== vista de tablas para ajuste */
.ajuste_cant_td{
 	width: 73px;
}

.ajuste_cant_th{
	width: 10px; /*36px;*/
}

.ajuste_formb_td{
	width: 181px;
}

.ajuste_material_td{
	width: 153px;
}

.ajuste_var_td{
	width: 10px;
}

.ajuste_accion_td{
	width: 60px;
}

.ancho_form_puerta{
	width: 54px;
}

.center_td td{
	padding-left:3.5%;
}


.boton_custom{
	-moz-box-shadow: 0px 10px 14px -7px #3e7327;
	-webkit-box-shadow: 0px 10px 14px -7px #3e7327;
	box-shadow: 0px 10px 14px -7px #3e7327;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77b55a), color-stop(1, #72b352));
	background:-moz-linear-gradient(top, #77b55a 5%, #72b352 100%);
	background:-webkit-linear-gradient(top, #77b55a 5%, #72b352 100%);
	background:-o-linear-gradient(top, #77b55a 5%, #72b352 100%);
	background:-ms-linear-gradient(top, #77b55a 5%, #72b352 100%);
	background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a', endColorstr='#72b352',GradientType=0);
	background-color:#77b55a;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #4b8f29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #5b8a3c;
}

.boton_custom:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #72b352), color-stop(1, #77b55a));
	background:-moz-linear-gradient(top, #72b352 5%, #77b55a 100%);
	background:-webkit-linear-gradient(top, #72b352 5%, #77b55a 100%);
	background:-o-linear-gradient(top, #72b352 5%, #77b55a 100%);
	background:-ms-linear-gradient(top, #72b352 5%, #77b55a 100%);
	background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352', endColorstr='#77b55a',GradientType=0);
	background-color:#72b352;
}

/*.boton_custom:active {
	position:relative;
	top:1px;
}*/

.agregar_img{
	vertical-align: middle;
    width: 20px;
    height: auto;
    
}

a.agregar{
	text-transform : uppercase;
	font-size: 8pt;
}

.custom_h4{
	margin: 31px 4px;
    margin-top: 9px;
    padding-left: 45px;
}

.custom_h4_relative{
	position: relative;
    top: 10px;
}


/*=== etilos para creacion de lita con forma de tabla*/

ol{
	list-style-type: none;
    margin: 5px;
    padding: 0;
    display: block;
}

ol li{
	width: 100%;
	cursor : pointer;
}

ol li:nth-child(odd){ background: rgba(153,153,153,0.2);}
ol li:nth-child(even){background: rgba(255,255,255,0.7);}

ol li span{     
	display: inline-block;
    width: 22%;
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 8pt;
    padding: 4px 8px;
    margin: 0px;
    color: black;
    text-align: center;
}

span.header{
	background: #BBBBBB;
	color: #FFF;
}

.standar_default{
	margin-left: 45% !important;
	display:block !important;
}

.detalle_puerta{
	width: 15%;
}

.img_view_puerta{
	width: 50px;
	height : 50px;
	
}

.array_tipo_project {
	float:none !important;
}

.array_puertas_mod_config{
	float:none !important;
    margin-left: 45% !important;
}

#conteiner_tipos_proyectos{ position : relative;}

.conteiner_tipos_modulos, .tipos_proyectos, .continer_modulos_config{ width : 100%; position: relative;}

.tipos_proyectos { box-sizing:border-box; padding: 20px; margin: 40px 0px; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.5);}
.conteiner_tipos_modulos{ box-sizing:border-box; padding:10px; margin-bottom: 30px; overflow:auto; border-radius: 0 10px 10px 10px; border: 1px solid #DDD; background:#EEE; box-shadow: inset 1px 2px 10px rgba(0,0,0,0.23); }

.continer_modulos_config{ margin-top :20px;}
.continer_modulos_config td{ text-align: center;}
.continer_modulos_config td img.eliminar{ width: 20%; height: auto; cursor : pointer;}

.vars_globals_tipo_modulo{ border:1px solid #CCC}
.vars_globals_tipo_modulo tr{ background: none !important; font-weight:bold}
.vars_globals_tipo_modulo th{ background:orange !important; text-align:left; color:#222; padding:10px; border:1px solid orange}
.vars_globals_tipo_modulo td{ padding:5px !important}
.vars_globals_tipo_modulo label{ display:flex}

.tipos_proyectos .legend{ background:orange; width:30%; margin-top:10px}
.name_proy{ margin-left: 5%;}

.img_absolute{ position: absolute; top: 0px; right: 0px; width: 20px; cursor : pointer;}

.estilo_img {
    /* float: right; */
    width: 20px;
    margin-right: 2%;
    cursor: pointer;
    /* position: relative !important; */
    /* top: -33px; */
    /* right: -184px; */
}

#busca_proyectos  input[type=date]{
	width: 92% !important;
}

.container_puertas_mod{
	width:100% !important;
}

.detalle_cancelado{
	background: url('../imgs/iconos/cancelada.png') no-repeat;
    background-position: 0% 46% !important;
    background-size: 60px;
    padding-bottom: 27px;
    width: 16%;
    margin-left: 40%;
}

.customNumberInput{
	width: 60px;
}

.bloqueLabel{
	display : inline-block;
}

.centerCheck{
	text-align : center !important;
}

.centerCheck input[type=checkbox]{
	float : none !important;
}


h5 label{ color:#06783A}
.datepick{ cursor:pointer}