@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family:"Roboto"; box-sizing: border-box}
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: 5px;
    display: block;
	width: 28%;
	float: left;
}


.enviarRepar{width:70%; margin: 0 .5%; float: left; text-align: right; }
.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}