:root{
  --red:#df6e8e;
  --green: #66a765;
  --blue: #64c4d9;
  --principal: #555;
  --secundario : #222;
  --orange: #f58104;
  --boton_1: #777;
  --boton_2: #222;
}

/* ======================================================== ESTRUCTURAS ===========================================================*/
.fieldset{ box-shadow:0 0 10px rgba(0,0,0,0.5); box-sizing:border-box; border-radius:5px; }
.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}
.legend .img_legend{ height:15px; width:auto; margin-right:5px; vertical-align:middle}
#contenedor .contenido,
#contenedor2 .contenido{padding:1%; border-radius:0 0 5px 5px; overflow:hidden}

#fondo, #contenedor, #contenedor2, #cristal, #loading, #resultados{ position:fixed;}
#fondo, #cristal{ top:0; left:0; width:100%; height:100%; z-index:2; cursor:pointer; background:rgba(0,0,0,0.7);}
#cristal{ cursor: default;}

#contenedor{ width:90%; left:5%; top:5%; max-height:90%; overflow:auto; z-index:3; border-radius:10px; padding:0 0.5%;}
#contenedor2 { width:90%; left:4%; top:5%; max-height:90%; overflow:auto; z-index:7; border-radius:10px; position:fixed; box-shadow: 0 0 10px rgba(0,0,0,0.5);}
#contenedor2 img[class=boton]{ position:absolute; top:0; right:0px; background:none; padding:0; box-shadow:none;}

#contenedor .fieldset{ padding:0}
#contenedor .legend{ padding:10px}

#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.5); text-align:center; border-radius:10px; padding:1%}
#loading >img{ width:100%; height:100%}
#resultados{ width:28%; 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:#FCBA00; color:white}
#resultados_busqueda{ margin:10px 0;}

#menu_usuario{ background:none; font-size:1.2em; font-weight: bold; border:3px solid var(--principal); color:var(--principal);  padding:15px;}
#menu_usuario:hover{ box-shadow: 0 0 10px var(--principal);}
#nombre_user{ background:var(--orange); color:white; font-size:1.5rem; font-weight: bolder; padding:13px;}
#datos_sesion{position:fixed; top:10%; background:white; display:none; right:1%; z-index:4; height:auto; width:20%; box-shadow: 0px 2px 5px rgba(0,0,0,0.5); border:2px solid #EDEDED; border-radius:0 0 10px 10px }
#datos_sesion > div{ border-bottom:1px solid #EDEDED; padding:10px}
#datos_sesion ul{ padding:0;}
#datos_sesion ul li{ list-style: none; font-size:1.2em; padding:15px 10px; text-align: left; color:#333}
#datos_sesion ul li a{ color:#333}

#datos_sesion ul li:hover{ color:var(--orange);}
#datos_sesion ul li:hover a{ color:var(--orange);}

#show_pass{position:absolute; width:30px; height:30px; padding:0 !important; top:25%; right:10px}

/*#menu{ height: 100%; width: 100%;}*/
#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 var(--secundario); transform:scale(1.2)}

#div_login{ position:fixed; width:70%; top:15%; height:70%; z-index:2; left:15%; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.3); background:url(../imgs/fondos_cont/login.png) #FFF no-repeat; background-size:cover; background-position:right}
#div_login form{ width:40%}
#div_login form > div{ margin:10px 0}
#div_login .logo{ width:auto; height:150px}
#div_login input{ font-size:1.3rem}
#div_login i{font-size:1.3rem}
#div_login button{margin-top:20px; padding:3% 5%; background:#333}

/* ======================================================== ELEMENTOS GENERALES ===========================================================*/
a{ text-decoration:none;}
b{ color:red;}
hr{ border-bottom:1px dashed #333; border-top:none}

fieldset{ border: 1px solid #CECECE; border-radius:10px; margin:10px 0}
legend{ background: #CECECE; padding:10px 20px; border-radius:5px; font-weight: bolder;}

span{ display:block; margin-top:10px; font-weight:600;}
span > input{ margin-top:3px;}
span > .input{ margin-top:3px; }
.input .select2-container{margin-top:0 !important}
.input .select2-container .select2-choice{ border-radius:0 4px 4px 0 !important}

input, select, textarea{ padding:10px; border-radius:5px; border:1px solid #DDD; width:100%; box-sizing:border-box; color:#353535}
input:hover, select:hover, textarea:hover{ transition:all 0.3s ease-in; background:#FFF8D8}
input:focus, select:focus, textarea:focus{ transition:all 0.3s ease-in; background:#FFF8D8}

textarea[name=descripcion_app]{ background:#fcffd7; height:50px}

select:disabled, input:disabled { cursor:not-allowed; }

input[type=button],
input[type=submit], 
button{ text-transform:uppercase; transition: all 0.3s linear; color:white; border:none; padding: 10px 20px; white-space: nowrap; border-radius:5px; cursor:pointer; width:auto; margin-top:19px;
  background: linear-gradient(to bottom, #777 0%, #222 100%); box-shadow: 0 1px 2px rgba(0,0,0,0.56); }
button img{ width: 20px; height: 20px; vertical-align: middle; margin-right: 5px;}

input[type=button]:hover, 
input[type=submit]:hover, 
button:hover{ border:none; background: linear-gradient(to bottom, var(--boton_1) 0%, var(--boton_2) 100%);}

button img{ width:15px; height: 15px;}

input[type=radio]{ width:auto;}
input[type=checkbox]{ width:auto; float:left; vertical-align:middle;}
input[type=number]{ text-align:center;}
input[type=image]{ width:25px !important; height:25px !important; padding:0px; border:none; margin: 0;}

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

/*================ INPUT WITH ICONS ===========================================================*/
.input{ display: flex; flex-direction:row-reverse;}
.input > i{  padding: 12px 10px; background:#555; color: white; min-width: 40px; text-align: center; border-radius:3px 0 0 3px}
.input > input{width: 100%; padding: 10px; outline: none; border-radius: 0 3px 3px 0} 
.input > input:focus{ border:1px solid var(--secundario)}
.input > input:focus + i{ background:var(--secundario) !important}

.button { box-shadow:0 1px 2px rgba(0,0,0,0.56); display: flex; height: 45px; padding: 0; background: var(--principal);	border: none; outline: none;	border-radius: 5px;	overflow: hidden; font-family: "Quicksand", sans-serif; font-size: 1rem; font-weight: 500; cursor: pointer;}
.button span{ margin:0 !important}
.button:hover { background: var(--secundario);}
.button:active { background: var(--secundario);}

.button__text,
.button__icon { display: inline-flex; align-items: center; padding: 0 24px; color: #fff; height: 100%;}
.button__icon { font-size: 1.5em; background: rgba(0, 0, 0, 0.08);}

.b_red{  background:var(--red); border-color:var(--red)}
.b_blue{  background:var(--blue); border-color:var(--blue)}
.b_green{  background:var(--green); border-color:var(--green)}

.input_updated{ color:green !important; border:1px solid green !important;}
.input_not_updated{ color:red !important; border:1px solid red !important}

#bar_busqueda{ width:50%; z-index:2}
.ficha_modulo{ background:rgba(30,30,30,0.7)}
.ficha_modulo img{ height:100px; width:auto}
.ficha_modulo p{ color:white}

.go-out{ display: inline-flex;}

/*================ TABLES ===========================================================*/

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 input, table button{ margin:0 !important}

table tr:nth-child(even) {background: #EEE;}
table tr:nth-child(odd) {background: #FFF;}
table tr:hover{ background:#DDD;}

table.blanco tr, table.blanco tr:hover{ background:none; color:black}
table.blanco td{ border:none;}

.transparente{ background:none !important;}
.transparente tr{ background:none !important;}
.transparente td{ border:none}
.transparente:hover{ box-shadow:none;}

tr[class=detalle_kit]{border-bottom:1px solid rgba(0,0,0,0.3); background:rgba(177,246,177,0.7) !important; font-style:italic}
tr[class=detalle_kit]:hover{ color:black;}

#pie_tabla{ background:none !important; border:none !important}
#pie_tabla td{ background:none; border:none}
#pie_tabla .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;}

.tabla_dinamica{ text-align:center;}
.tabla_dinamica tr td:first-child, .id{ text-align:center; font-weight:bolder}
.tabla_dinamica th{ border:1px solid rgba(0,0,0,0.3);}
.tabla_dinamica th a{color:#DDD !important;}
.tabla_dinamica th img{width:15px; height:15px; vertical-align:middle}
.tabla_dinamica td{ border:1px solid rgba(0,0,0,0.1)}
.tabla_dinamica td img{ vertical-align:middle;}
.tabla_dinamica .total{font-size:1em !important; text-align:right; white-space: nowrap;}

.paginacion input{ padding:5px; font-size:10px; background:none !important; margin-left:3px; color:#222; border-radius:3px; border:none !important}
.paginacion input:hover{ background: var(--secundario) !important;}
.paginacion .actual{ background:var(--secundario) !important; color:white;}


.paginate_button{ padding:5px; margin:2px; cursor:pointer }
.dataTables_paginate{ padding:10px; text-align:center}
.dataTables_paginate span{ display:inline !important; }	
.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;}

/*================ LISTS ===========================================================*/
.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{ 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; box-shadow:inset 0 0 5px rgba(0,0,0,0.5);}

/*================ TOOLTIP ===========================================================*/
.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 a{ color:white}
.tooltipMenu ul li input{ vertical-align: middle; margin-right:5px}
.close_submenu{ position:absolute; right:-10px; top:-10px;}


.label2{background:#89D4FF; border-radius:5px; padding: 5px 10px; font-weight:bold; color:#333; margin:5px 0; box-sizing:border-box}
.l_red{background:#FC6278; border-radius:5px; padding: 5px 10px; font-weight:bold; color:white; box-sizing:border-box}
.l_yellow{background:#FFFDCF; border-radius:5px; padding: 5px 10px; font-weight:bold; color:#333; margin:5px 0; box-sizing:border-box;}
.l_blue{background:#89D4FF; border-radius:5px; padding: 5px 10px; font-weight:bold; color:#333; box-sizing:border-box;}
.l_green{background:#9BF081; border-radius:5px; padding: 5px 9px; font-weight:bold; color:#333; box-sizing:border-box}

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

.info{ width:15px; height:15px; vertical-align:middle; cursor:pointer; margin-right:5px}
.total{ background:none; font-size:3.5em; border:none; text-align:center; color:#090; font-weight:bolder}
.rounder{ border-radius: 100%; color: #ffffff; display: inline-block; font-weight: bold; line-height: 1.6em; text-align: center; width: 1.6em; padding:5px}

.ok{ color:#0C0;}
.error{ color:#F00;}
.advertencia{ color:#FC3;}

.ok2{background:#00CC00; color: white; padding:10px 20px; text-align:center; border-radius:5px; width:auto; display:inline-block; box-shadow:inset 0 0 10px rgba(0,0,0,0.4);}
.error2{background:#CC0000; color:white; padding:10px 20px; text-align:center; border-radius:5px; width:auto; display:inline-block; box-shadow:inset 0 0 10px rgba(0,0,0,0.4);}
.warning2{background:#F4EB00; padding:10px 20px; text-align:center; border-radius:5px; width:auto; display:inline-block; box-shadow:inset 0 0 10px rgba(0,0,0,0.4);}

.img_modulo{ text-align: center;}
.img_modulo img{ width:150px; height:150px}

.control_menu{ width:100%; padding:10px 0; display: flex; gap:10px}
.control_menu a{ color:#333; padding:10px 20px; display:block; border:1px solid #333; font-weight:bold; border-radius:10px}
.foco{ box-shadow:inset 0px 0px 3px rgba(0,0,0,0.8); color:white !important;}
.close_div{ width:20px; height:20px; cursor:pointer}
.izquierda{ float:left; width:49%; overflow:hidden;}
.derecha{ float:right; width:49%; overflow:hidden;}
.completo{ float:left; width:99%;}

.popup{ background:#F9FFB5; border-radius:0 0 10px 10px; z-index:3; width:20%; top:0%; right:0%; position:fixed; padding:0 1% 1% 1%; box-shadow:0 0 10px rgba(0,0,0,0.5); display:block}

.boton{ cursor:pointer;}
.recordatorios{ color:#F00; font-style:italic; border-radius:0 0 5px 5px; padding:5px 15px; float:right; position:absolute; top:0; right:2%; margin-top:13px; box-shadow:inset 2px 1px 10px #000;}
.center{text-align:center !important;}
.abre_div{ width:20px; height:auto; cursor:pointer}
.ui-datepicker span{display:inline !important}
.icon_cancel{width:20px; height:20px;}
.gastos_divididos{ vertical-align:middle}
.contenedor_sucursales{ overflow:auto; max-height:160px;}

.cancelados{ color:#C00 !important; letter-spacing:1px; border:1px solid #C00}
.existencias:not(a){ color:#00C !important; letter-spacing:1px; border:1px solid #00C}
.existencias_money{ color:#1F3A93; font-weight:bold; padding:10px; text-decoration:none}

.stock_min{ background:#DDD;}
.stock_max{ background:#CCC;}

.totales{ font-weight:bold;  background:#86CA43;  white-space: nowrap; text-align:right}
.precios{ font-weight:bold; border:1px solid #060; color:#060;  white-space:nowrap; text-align:right}
.costos{ border:1px solid #070;}
.costos_util{ background:white; color:green; font-weight:bolder}
.cell{ border:1px solid rgba(100,100,100,0.3) !important; color:#444; font-size:1.2rem; text-align: right;}
	
.redm{ border:1px solid #777; background:#BCF5C2}
.vendedor{border:1px solid #777; background:#BCF5E0}

.total_registros{ color:#888; text-shadow:none !important;}
.total_registros >span{ color:red; margin-left:5px; display:inline}

.descargar_excel{ display:inline-block; margin:10px 0; padding:10px 20px; border:1px solid #333; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.56); color:white; background:var(--green); border-color:var(--green)}
.descargar_pdf{ display:inline-block; margin:10px 0; padding:10px 20px; border:1px solid #333; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.56); color:white; background:var(--red); border-color:var(--red)}
.button_blue{ display:inline-block; margin:10px 0; padding:10px 20px; border:1px solid #333; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.56); color:white; background:var(--blue); border-color:var(--blue)}

.pdf { background-image: linear-gradient(to bottom, #e74c3c, #d10b32); border-radius: 5px; color: #ffffff !important;font-size: 12px;padding: 10px 20px 10px 20px; text-decoration: none;}

.monto_pago{ text-align:center; text-transform:uppercase; font-weight:600; font-size:40px; transition:all 0.3s linear;}
.monto_pago:focus{ color:#F69600; transition:all 0.3s linear;}
.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%;}

.italic{ font-style:italic;}
.bottom_left{ position:fixed; bottom:10px; left:10px}
.div_terminales{ display: grid; grid-template-columns: repeat(4, 1fr); gap:10px;}
.resultados{ margin:20px 0; overflow: auto;}

.upper{ text-transform: uppercase;}
.lower{ text-transform: lowercase;}

.datepick{ cursor: pointer;}
.resumen_totales h5{ font-size:1.1rem}

.nomargin{ margin:0 !important}

.inputs_compras{ font-size:1rem;}
.inputs_compras label{  padding:10px !important; margin:0 !important}

.carpeta{ margin:10px 0}
.contenedor_sucursales{ max-height:250px}

.upper{ text-transform:uppercase}
.etiqueta{ display:inline-block}

/*================ FORMULARIO DE UBICACIONES ===========================================================*/
.ficha{ margin: 1%;  box-shadow: -1px 2px 4px 1px rgba(0,0,0,0.2); border-radius: 5px; padding: 20px; box-sizing: border-box; background: #fff;}
.titulo{ text-align: left; text-transform: uppercase;}

/*================ WIDTH BOXES =========================================================== */
.two{ width:50%;}
.tree{ width:33%;}
.four{ width:25%;}

.w5{ width:5%}
.w10{ width:10%}
.w20{ width:20%}
.w30{ width:30%}
.w40{ width:40%}
.w50{ width:50%}
.w60{ width:60%}
.w70{ width:70%}
.w80{ width:80%}
.w90{ width:90%}
.w100{ width:100%}

.m10{ margin:10px 0}
.m20{ margin:20px 0}
.p10{ padding: 0 10px;}
.p20{ padding: 0 20px;}

.h100{ height: 100%; overflow: auto;}

.div_row{ box-shadow: 0 2px 2px rgba(0,0,0,0.2); padding:10px; border-radius:10px; display: flex; justify-content: space-between; align-items: center; gap:10px}

.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:20px 0}
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:20px 0}
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:20px 0}
.grid5{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin:20px 0}
.grid6{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; margin:20px 0}



/*================ BOX INPUTS ===========================================================*/
.flex{ display:flex; gap:0 10px}
.flex_middle{ display: flex; align-items: center; justify-content: center; gap:0 10px}

.fechas{ margin-top:3px; display: flex;}
.fechas input{ text-align: center; font-weight:bolder; color:#005A94}

.dual{ text-transform:uppercase; margin:3px 0; display:flex}
.dual div{ width:50% !important}
.dual span > label{ border-radius:10px; padding:20px 10px; box-sizing:border-box; box-shadow:0 1px 2px rgba(0,0,0,0.3)}

.filters{ display: grid; grid-template-columns: repeat(4, 1fr); gap:10px;}
.filters2{ display: grid; grid-template-columns: repeat(2, 1fr); gap:0 10px;}

.ini{border-right:none; border-radius:5px 0 0 5px !important}
.cen{border-right:none; border-left:none; border-radius:0 !important}
.fin{border-left:none; border-radius:0 5px 5px 0 !important}
.up{border-bottom:none; border-radius:5px 5px 0 0 !important}
.mid{border-bottom:none; border-top:none; border-radius:0 !important}
.down{border-top:none; border-radius:0 0 5px 5px !important}

#sortable figure:first-child img{ background:#2db834}
#sing_dollar{ background: none !important;} 
.mi_menu li a{ color:white}
.cont_imagenes{ position:relative}
.cont_imagenes .rounder{ position:absolute; top:3px; right:3px; font-size:10px}

.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:var(--orange) !important;}
.table_new td{ padding:10px 2px}


.contenedor_imagenes{ background:#EFEFEF; padding:20px; box-sizing:border-box; box-shadow: inset 0 0 10px gray; border-radius: 10px;}
.num_imagenes{ position:relative}
.num_imagenes .rounder{ position:absolute; top:0; right:0; line-height:0.6em; width:0.6em; font-size:10px}
.imagen_producto{ width:auto; height:150px; padding:5px; border-radius:5px; background:#FFF; object-fit:contain; box-shadow:0 0 1px gray;}
.eliminar_imagen{ width:30px !important; height:30px !important; padding:5px; position:absolute; bottom:0; right:0px; background:#FFF; border-radius:5px 0 0 0 }

/*================ CHECKBOX ===========================================================*/
.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 print{ 
  .page_break{page-break-before: always;}
  .impresion_tiket{ font-size:8px !important; }
}

@media screen and (min-width:100px) and (max-width:539px){
	html{ font-size:0.6rem; background-size:cover}
  
  #menu{ overflow: auto;}
  #div_login{ width:90%; left:5%; height: 90%; top:5%; background-position:right}
	#div_login form{ width: 80%;}

  #log-in > div{ width:90%;}
	#div_logo, #div_bien, #div_button, #div_user, #div_pass{ left:5%;}
	#login .inputWithIcon i { top:6px !important; font-size:1.5em} 

	.grid2,
	.grid3,
	.grid4,
  .grid5,
  .grid6,
	.filters{ grid-template-columns: 1fr;}
	.fieldset .flex{ flex-direction: column;}

  .two, .w70, .w60, .w50, .w40, .w30{ width: 100%;} 
}

@media screen and (min-width:540px) and (max-width:769px){
	html{ font-size:0.6rem; background-size:cover}
  
  #menu{ overflow: auto;}
  #div_login{ width:80%; left:10%; height: 80%; top:10%; background-position:right}
	#div_login form{ width: 80%;}

  #log-in > div{ width:90%;}
	#div_logo, #div_bien, #div_button, #div_user, #div_pass{ left:5%;}
	#login .inputWithIcon i { top:6px !important; font-size:1.5em} 

	.grid2,
	.grid3,
	.grid4,
  .grid5,
  .grid6,
	.filters{ grid-template-columns: repeat(2, 1fr);}
  .fieldset .flex{ flex-direction: column;}

  .two, .w70, .w60, .w50, .w40, .w30{ width: 100%;} 
}

@media screen and (min-width:770px) and (max-width:1400px){
  #div_login form{ width: 60%;}
}