@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@font-face{
	font-family:proxima-nova;
	src:url(../fonts/proxima-nova.ttf);
}
*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; font-family:"proxima-nova";}
body{ margin:0; padding:0; background-color:white; font-size:14px;
-webkit-user-select:none;}
b, h1, h2, h3, h4, h5, h6{font-weight:500}
.inputs, .input_contacto{font-size:16px; text-align:center; border:none; outline:none; background-color: #eaeaea; color: #504c4c; margin:0px 2.5%; margin-bottom:10px; width:95%; padding:13px 0; border-radius:5px; box-sizing:border-box; transition:.2s}
input:focus,textarea:focus,select:focus{border-color:deepskyblue !important}
input::selection{background:#444; color:white;}

.legend{ font-size:100%; padding:3px 15px; border-radius:7px; display:block; margin-top:10px; text-align:center; width:100%; box-sizing:border-box}

.logo{ width:100%}

.container_general{ padding-bottom:0px}

.producto, .productoSalon{ background-color: transparent; width:100%; height: auto; padding:0; box-sizing:border-box; color:#333; margin:0; display:block; border-bottom:solid 1px lightgray; }

.tituloProducto{width:70%; text-align:left; font-size:18px; display:block; padding:5px 8px; box-sizing:border-box; margin-top:16px; margin-bottom:0; float:right; text-transform:capitalize; font-weight:normal;}

.precioProducto{width:75%; text-align:left; display:block; padding:5px 8px; box-sizing:border-box; margin:0; margin-bottom:4px; float:right; }

.precio2{width:40%; padding-top:7px; box-sizing:border-box; margin:0; float:left; font-size:20px;}

.leyenda{ text-align:right; width:47%; display:inline-block; margin-bottom:10px; }

.cantidad_item{padding:9px 5px; text-align:center; width:13%; margin:0; float:left; border:none; font-size:17px; background-color:LemonChiffon}

.cantidad_item::-webkit-input-placeholder{font-size:16px}

.botonMas, .botonMenos{ width:5%; margin:0; float:left; background:linear-gradient(to bottom, LemonChiffon 0%, Khaki 100%); padding:9px 15px; text-align:center; font-size:17px;}
.botonMas{ border-radius:0 7px 7px 0}
.botonMenos{border-radius:7px 0 0 7px}
.botonMas:active, .botonMenos:active{background:linear-gradient(to top, Khaki 0%, LemonChiffon 100%)}


.inputs2{ background-color:rgba(255,255,255,.7); border:none; outline:none; color:#ba2714; text-align:center; display:inline; margin-right:1%; font-size:20px; border-radius:5px; width:50%; margin-bottom:10px}

.inputs2:hover, .inputs2:focus{ background-color:rgba(255,255,255,1);}

/*.inputs2::-webkit-input-placeholder{color:rgba(0,128,128,.6); font-size:19px}*/

.label_total{text-align:center; width:80%; margin:15px 10%; box-sizing:border-box; background-color:DarkCyan; display:block; border-radius:5px; padding:5px; margin-top:50px; box-shadow:0 0 5px 2px rgba(0,0,0,.4)}

.label_total span{font-size:22px; font-weight:500; color:white; text-align:center; width:40%; display:inline; box-sizing:border-box}


#total, #totalSalon{text-align:center; background-color: transparent; font-size:28px; padding:10px 8px 10px 20px; margin:20px 2%; box-sizing:border-box; font-weight: normal; width:46%; display: block; border:solid 1px #055959; color:#055959; background-image:'img/ic_peso.png'; background-position:left; background-size:15px 15px; box-shadow:0 2px 4px 1px rgba(0,0,0,.3); float:left}





.estado_pedido{display:block; float:left; width:46%; margin:20px 2%; box-sizing:border-box; padding:15px 3px; background-color:white; color:#055959; border-radius:5px; border:solid 1px #055959; outline:none; font-size:17px; box-shadow:0 2px 4px 1px rgba(0,0,0,.3)}
.estado_pedido:active{ outline:none; box-shadow:0 0 4px 2px rgba(0,0,0,.7); border:solid 1px orangered}

.boton{ background-color:#555; padding:17px 0; display:block; width:98%; color:white; margin:30px 1%; box-sizing:border-box; border-radius:5px; font-size:19px; border:none; outline:none; box-shadow:0 3px 4px 1px rgba(0,0,0,.3);}
.boton:active{ background-color:#222}

.legend_contacto{ font-size:20px; margin-bottom:0px}

.div_confirmar{ width:100%; position:relative}

.modal{display:none; position:relative; z-index:100; padding-top:30px; left:0; bottom:0; width:100%;  height:100%; overflow:auto; background-color:rgba(0,0,0,0); color:#000; font-size:20px; text-align:center}
.modal-content {background-color:white; margin:25px 5% 50px 5%; border-radius:15px; padding:15px 8px; border:1px solid #ccc; width:90%; height:auto; box-sizing:border-box; -webkit-backface-visibility: hidden; box-shadow:0 0 8px 3px rgba(0,0,0,.5);}
.close {color: #aaaaaa;float: right;font-size: 35px;font-weight:500; }
.close:hover,.close:focus {color: #000;text-decoration: none; cursor: pointer;}

.link33{ background-color:seaGreen; color:white; padding:15px; border-radius:5px; box-sizing:border-box; display:block; margin:15px 10%; width:80%; cursor:pointer; font-size:17px; font-weight:500; box-shadow:0 3px 4px 1px rgba(0,0,0,.3);}
.link33:active{ opacity:.7; box-shadow:0 0 2px 1px rgba(0,0,0,.5);} 

.link79{font-size:14px; text-decoration:none; min-width:39%; max-width:40%; margin:10px 5%; display:inline; background-color:#ba2714; color:white; padding:10px 15px; border-radius:5px; box-sizing:border-box; box-shadow:0 1px 4px 2px rgba(0,0,0,.3)}


.link80{
    font-size: 14px;
    text-decoration: none;
    display: none;
    background-color: #ba2714;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 1px 4px 2px rgba(0,0,0,.3);
}


.welcome_user{ width:100%; font-size:18px; color:#fff; margin:10px 0; text-align:center; text-transform: capitalize; padding-top:30px}
.welcome_user i{font-size:15px; text-transform:none; font-style:normal}

.cambiarUsuario{background-color:#555; text-decoration:none; display:block; color:#fff; width:80%; margin:20px 10%; box-shadow:0 3px 4px 1px rgba(0,0,0,.3); padding:10px 15px; box-sizing:border-box; border-radius:4px; font-size: 14px}
.cambiarUsuario:active{ background-color:#222; color:white}


.title4321{ font-size:20px; text-decoration:none; color:#055959; }
.title5432{ font-size:18px}

.input_admin{ font-size:15px; color:#000; border-radius:5px; border:none; outline:none; background-color:rgba(255,255,255,.5); display:block; width:80%; padding:10px; box-sizing:border-box; margin:20px 10%;}

.input_admin:focus{ border:solid 2px orangered; outline:none; background-color:rgba(255,255,255,1)}

.button_admin{background-color:#055959; padding:10px 0; display:block; width:45%; color:white; margin:15px 2.5%; box-sizing:border-box; border-radius:4px; font-size:15px; border:none; outline:none; box-shadow:0 3px 4px 1px rgba(0,0,0,.3); float:left}

.button_admin:active,.button_admin:focus{ opacity:.5}

.btnQuitarProd{display: block; border-radius: 100%; width: 28px; height: 28px; padding: 0; background-color: #900709;}
.btnQuitarProd>img{padding:0; width: 20px; height: 20px; display: block !important;box-sizing: inherit; margin:4px;}


.categoria_head, .categoria_headSalon{width:96%; background-color:#e0e0e0; color:#ba2714; text-shadow:1px 1px 2px rgba(255,255,255,.8); margin:10px 2% 3px 2%; padding:14px 0; box-sizing:border-box; font-size:20px; font-weight:500; text-transform:capitalize; text-align:center; border-radius:10px; display:compact; box-shadow:0 1px 3px 2px rgba(0,0,0,.3);}
.categoria_head:active, .categoria_headSalon:active{background-color:#ccc; box-shadow:0 0 7px 5px rgba(0,0,0,.5); opacity:.5}
.categoria_head::after, .categoria_headSalon:after{ content:"\02261"; font-size:30px; float:right; margin-right:20px; margin-top:-10px}



.item{ padding:6px 2px; border-radius:3px; margin:5px; background-image:linear-gradient(to top, Bisque 0% , beige 100% ); float:left; color:#222}
.item:focus{ border:none; box-shadow:0 0 2px 1px rgba(0,0,0,.3); background-color:Bisque}

/*-------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------*/
.jfilestyle{display:inline-block;margin:10px 2.5% !important;padding:0; width:95% !important; position:relative;border-collapse:separate; box-sizing:border-box;}
div.jfilestyle label,div.jfilestyle input{font-family:Roboto;}
div.jfilestyle input{background:#eaeaea;margin:0;vertical-align:middle;padding:13px 7px;font-size:13px;border-radius:5px;color:#8d8d8d;cursor:default;line-height:normal; box-sizing:border-box; outline:none; border:none; width:65%}
div.jfilestyle label{display:inline-block; background:#fff;padding:13px 0;color:#0662ba;vertical-align:middle;line-height:normal;text-align:center;margin:0;font-size:13px; width:auto; min-width:35%;border-radius:5px;font-weight:normal; box-sizing:border-box; outline:none}
div.jfilestyle.jfilestyle-corner input:first-child{border-right:0;}
div.jfilestyle.jfilestyle-corner input:last-child{border-left:0;}
div.jfilestyle.jfilestyle-corner input:first-child,div.jfilestyle.jfilestyle-corner span:first-child>label{border-radius:5px 0 0 5px;}
div.jfilestyle.jfilestyle-corner input:last-child,div.jfilestyle.jfilestyle-corner span:last-child>label{border-radius:0 5px 5px 0;}
div.jfilestyle label[disabled]{pointer-events:none;opacity:.6;filter:alpha(opacity=65);cursor:not-allowed;}
div.jfilestyle label:hover{cursor:pointer;opacity:.9;}
div.jfilestyle .count-jfilestyle{background:#303030;color:#fff;border-radius:50%;padding:1px 5px;font-size:12px;vertical-align:middle;}
/*-------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------*/


.suggest-element{margin:0; width:100%; cursor:pointer; padding:9px 14px; box-sizing:border-box; border-bottom:solid 1px #ccc; display:block; font-size:15px; background-color:white; color: #444 !important}

.suggest-element:active, .suggest-element:hover{background-color:#C5EFDE !important; color:#2E8772 !important}

#suggestions{width: 96%; margin: -9px 2% 25px 2%; height: auto; overflow: visible; z-index: 1000000; position: relative; display:none}
a[class^="suggest-element-prod"]{margin:2px 0; width:100%; cursor:pointer; padding:14px 0; box-sizing:border-box; border-bottom:solid 1px yellow; display:block }
.suggestions_prod{ width:78%; height:auto; overflow: visible; display:none; margin-right:1%; box-shadow:0 3px 2px 1px gray; float:right; padding-left:3px; box-sizing:border-box}


.cuadroCount{border-radius: 10px; padding:6px 15px; color: white; margin: 10px 5px; display: inline-block; min-width: 13%; cursor: pointer; }
.cuadroCountRepar{border-radius: 8px; padding:6px 2px; margin: 10px .3%; display: block; width: 24%; float: left; text-align: center; }
.cuadroCount span{display:block; font-size: 35px; }
.cuadroCount i{font-size: 14px !important;
    font-style: normal;
    padding-left: 7px;
    vertical-align: middle;}

.confTxt1{
    color: #ba2714;
    text-align: left;
    display: block;
    font-size: 18px;
    width: 100%;
    margin-bottom: 7px;
}


.confTxt2{
	font-size: 18px;
	display: block;
	
}
.confTxt3{width: 100%; margin-top: 15px;}
.confTxt3 b{
	color: #0d55ad;
    font-size: 20px;
    margin-top: -2px;
    display: block;
	width: 28%;
	float: left;
}



.enviarRepar{width:35%; margin: 0 .5%; float: left; text-align: right; }
.enviarRepar .chkPagado{width: 18px; height: 18px; vertical-align: sub;}
.enviarRepar span{color:white; text-align: center; font-size: 15px; width: max-content; background-color: mediumseagreen; border-radius: 7px; padding: 5px 8px;  }

.tituloRepar{border-radius:10px; width: 96%; margin: 30px 2% 10px; color: white; padding: 7px; text-align: center; }

#fondoWhite{position: fixed; width:100%; height: 100%; left: 0; top:0; background-color: rgba(255,255,255,.5); display: none; z-index: 78979879 }
#fondoWhite img{position: absolute; width:70px; left: 50%; margin-left: -35px; top:50%; }


.notFound{background-color: #F9DFE0}





/*----- ESTILOS DE MOVIMIENTOS Y CAJAS  ----------*/
#tabla{margin: 10px 10%; }
.itemTabla{display:block; width: 90%; margin: 3px 5%; border-bottom:dotted 1px #ddd; text-decoration: none; padding: 20px 30px 20px 10px;}
.itemTabla:hover{background-color: #E7EDF9; }

.divTotales #totalVentas, .divTotales #totalGastos{margin:5px 1%; width:48%; border-radius: 15px; float: left; padding: 10px 0 15px 0; border: solid 1px #ccc;}
.montoCaja::before{font-size:16px; content:"$"; margin-right: 10px; display: none; }
.montoCaja{font-size: 24px; font-weight: bold; position: relative; top: 7px;}
#montoCajaInicial{width:46%; margin: 10px 2%; float: left}
#formCaja{margin:30px 0 40px 0; padding: 20px; box-shadow: 0 0 5px 3px #ccc; border-radius: 10px }
.txtFecha{color: #4a2bf3; font-size: 24px; margin: 80px 0 5px 13px; font-weight: bold; }
.txtConcepto{font-size: 17px; font-weight: bolder; color: #333; width: 60%; float: left; }
.txtMonto{font-size: 19px; font-weight: bolder; width: 40%; float: left; text-align: right; color: #555; }
.txtCategoria{color: #555; font-size: 15px; width: 70%; float: left; }
.txtCliente{font-weight: bolder; color: #333; display: inline-block; }
.txtCliente::before{content: "|"; margin:0 10px; }
.circleTxtPago{border-radius: 100%; width: 20px; height: 20px; margin-left: 7px; display: inline-block; }
.circleTxtPago img{width: 20px; padding: 4px; }
.txtFecha2{color: #888; font-size: 14px; width: 30%; float: left; text-align: right; position: relative; top: 5px; }

.divFechaDash{width: 100%; padding: 0; text-align: center; }
.fechaDash, .fechaDesdeDash, .fechaHastaDash, .goFechaDash{width: max-content !important; border-radius: 10px !important; border: solid 1px #ccc; color: #777 !important; display: inline-block; margin-right: 10px; padding: 10px 5px; }
.goFechaDash{ background-color: #52c76b; padding: 13px 25px; color: white !important; border: none; margin-top: 3px; cursor: pointer; margin-right: 0; }
.fechaDash{padding: 12px}
select{outline: none; }
.filtrosMov{background-color: #F9F9F5; border-radius: 15px; padding: 32px 20px 20px 20px; margin-top: 20px; }
.divCajaActual{margin: 20px 0 50px 0; text-align: center; background-color: #F9F9F5; border-radius: 15px; padding: 20px; margin-top: 20px; }
.fechaDisabled{color: #ccc !important; background-color: #eee; opacity: .5; pointer-events: none;}
#nuevoMov, #nuevoRetiro, #cierreZ{font-size: 14px; display: inline-block; width: auto; padding: 20px 10px; text-decoration: none; border-radius: 8px; margin: 0 10px; background-color: slateblue !important; color: white; cursor: pointer; }
#nuevoMov:hover{background-color: darkslateblue !important; }
#nuevoRetiro{background-color: #00ad6b !important; }
#cierreZ{background-color: #FF9909 !important; }
#nuevoRetiro:hover{background-color: #018c57 !important; }
#cierreZ:hover{background-color: #E38500 !important; }
#cajaActual{border: none; margin: 0; padding: 0 20px; display: inline-block; position: relative; top: 10px; }
.divTotales{width: 90%; margin: 0 5% 10px 5%; }
#cierreAnterior{color: #777;}
.contCajas{background-color: aquamarine; border-radius: 10px; padding: 20px 0; margin: 30px 1% 10px 1%; width: 48%; float: left; }
.contCajasGral{background-color: plum; margin-top: 0; }
.divCajaActualGral #nuevoMov, .divCajaActualGral #nuevoRetiro{margin-top: 17px;}

.contCajas #cajaActual, .contCajas .montoCaja{position: static; top: 0; }
.contCajas .montoCaja{margin-top: 10px; }
.lblFiltro{position: absolute; top: -14px; left: 5px; font-size: 12px; color: #555;}

.clearMovil{display: none; clear: none; }

@media(max-width: 750px){
.contCajas {
	width: 98%;
	padding: 10px 0 0 0;
	margin: 10px 1%;
}

.contCajas .montoCaja {
    margin-top: 0px;
    margin-bottom: 10px;
}

#tabla{margin: 10px 2% 50px 2%; width: 96%;  }

.clearMovil{display: block; clear: both; }

.divTotales {
    width: 100%;
    margin: 10px 0;
}

.itemTabla {
    width: 96%;
    margin: 3px 2%;
}

}



.tabla{width: 50%; margin: 30px 25%; user-select: text; }
.grupo1{width: 100%; }
.grupo1 table{width: 100%; }
td{padding: 3px; background-color: #F8F8F8; }
.filaSeparador{height: 25px;}
.filaSeparador td{background-color: #fff !important; }
.subtitulo{font-size: 20px; font-weight: bolder; background-color: #CFCEE4; }
.negrita{font-weight: bolder; }
.txtBillete{text-align: center; border: none; padding: 4px 0; outline-color: dodgerblue;}
.difRojo{color: red}
.btnCerrarCaja{width: 75%; margin: 15px 0 15px 25%; padding: 15px; text-align: center; user-select: none; cursor: pointer; }

.itemCierresCaja{color: #333; font-size: 20px; }


.tabla2{display: table; width: 90%; border: solid 1px #ccc; margin: 30px 5%; }

.itemTabla2{border-bottom: solid 1px #ccc; display: table-row; }
.itemTabla2 span{display: table-cell; width: 25%; padding: 10px; text-align: center; }
.itemTabla2Head{background-color: #ccc; font-weight: bolder; }


/*----- ESTILOS DE MOVIMIENTOS Y CAJAS  ----------*/





.btnFacebook *{
    color: white !important;
}
.btnFacebook{
	background-color: #1877f2;
    padding: 0 20px 0 43px;
    border-radius: 50px;
    color: white !important;
    font-weight: bolder;
    font-size: 16px;
    font-family: Arial;
    text-align: center;
    display: none;
    height: 40px;
    width: auto;
	position: relative;
	cursor: pointer;
}
.btnFacebook img, .btnFacebook span{
	display: inline-block;
	
}
.btnFacebook img{
	position: absolute;
    top: 8px;
    left: 12px;
	
}
.btnFacebook span{
	letter-spacing: .25px;
    overflow: hidden;
    text-align: center;
    text-overflow: clip;
    line-height: 41px;
    white-space: nowrap;
	
}
.btnFacebook:hover, .btnFacebook:active{
	background-color: #4267b2;
}