/*========== GIF CARGANDO PANTALLA COMPLETA =======*/
.hide{display: none;}
.conten_carga{background-color: rgba(250, 250, 250, 0.9);height: 100%;width: 100%;position: fixed;-webkit-transition: all 1s ease;-o-transition: all 1s ease;
    transition: all 1s ease;z-index: 10000;top: 0px;}
.conten_carga #menajecarga{
	position: absolute;top: 30%;left: 37%;text-align: center;font-weight: 600;font-size: 35px;width: 500px;}
.conten_carga #carga{border: 3px solid #ccc;border-top-color: var(--color2);height: 100px;width: 100px;border-radius: 100%;position: absolute;
    top: 0;left: 0;right: 0;bottom: 0;margin: auto;-webkit-animation: girar 1.5s linear infinite;-o-animation: girar 1.5s linear infinite;
    animation: girar 1.5s linear infinite;}
@keyframes girar{from{transform: rotate(0deg);}to{transform: rotate(360deg);}}
/*========== FIN GIF CARGANDO PANTALLA COMPLETA =======*/

/*============  TITULO DE SECCION =========*/
.conten_titulo{background:#fff;width: 100%;padding: 25px;margin-top: 20px;transition: 0.5s;font-size: 16px;}
/*.conten_titulo:hover{box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 15px;}*/
/*============ FIN TITULO DE SECCION =========*/
/*================ EL ORDE DE LOS PASOS A SEGUIR PARA REALIZAR PEDIDOS O COMPRAS =================*/
.wizard_horizontal{display: flex;flex-wrap: wrap;justify-content: center;width: 100%;margin: auto;background: #fff;padding: 30px;transition: 0.5s;margin-top: 20px;}
/*.wizard_horizontal:hover{box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 15px;}*/
.wizard_steps{display: flex;flex-wrap: wrap;justify-content: center;width: 100%;}
.wizard_horizontal ul.wizard_steps{display: flex;list-style: none;position: relative;width: 100%;margin: auto;}
.wizard_horizontal ul.wizard_steps li {display: table-cell;text-align: center;width: 10%;}
.wizard_horizontal ul.wizard_steps li a{display: block;position: relative;-moz-opacity: 1;filter: alpha(opacity=500);opacity: 1;color: #666;text-decoration: none;width: 100%;}
.wizard_horizontal ul.wizard_steps li a:before{content: "";position: absolute;height: 4px;background: #ccc;top: 20px;width: 100%;left: 0;}
.wizard_horizontal ul.wizard_steps li a .step_no {width: 40px;height: 40px;line-height: 40px;border-radius: 100px;display: block;margin: 0 auto 5px;font-size: 16px;text-align: center;position: relative;}
.wizard_horizontal ul.wizard_steps li a.selected:before, .step_no {background: var(--color1);color: #fff;}
.wizard_horizontal ul.wizard_steps li:first-child a:before {left: 50%}
.wizard_horizontal ul.wizard_steps li:last-child a:before {right: 50%;width: 50%;left: auto}
.wizard_verticle .stepContainer{width: 80%;float: left;padding: 0 10px}
.actionBar{width: 100%;border-top: 1px solid #ddd;padding: 10px 5px;text-align: right;margin-top: 10px}
.wizard_horizontal ul.wizard_steps li a.done:before{background: var(--color2);color: #fff;}
.wizard_horizontal ul.wizard_steps li a.done .step_no{background: var(--color2)}
@media screen and (max-width:650px){.wizard_horizontal ul.wizard_steps li a .step_descr{font-size: 14px;}}
/*================ FIN EL ORDE DE LOS PASOS A SEGUIR PARA REALIZAR PEDIDOS O COMPRAS =================*/

/*============== CONTENEDOR DE LA TABLA DEL CARRITO ===========*/
.section-carrito{display: flex;flex-wrap: wrap;justify-content: center;width: 100%;margin: auto;background: var(--colorfondo);padding-top: 50px;padding-bottom: 50px;}
.section-carrito .conten-carrito{/*====== BLOQUE DE LISTADO CARRITO ===*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    width: 1270px;}
.section-carrito .conten-carrito .tabla-compra-productos{background: #fff;transition: 0.5s;width: 100%;padding: 30px;border-radius: 0px;padding-top: 30px;padding-bottom: 20px;margin-top: 20px;margin-bottom: 20px;}
/*.section-carrito .conten-carrito .tabla-compra-productos:hover{box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 15px;}*/
/*============== FIN CONTENEDOR DE LA TABLA DEL CARRITO ===========*/

/*===================== CONTENEDOR DEL TOTAL A PAGAR CARRITO ===================*/
.section-carrito .pago{display: flex;flex-wrap: wrap;justify-content: flex-end;margin-bottom: 20px;background: #fff;padding: 30px;width: 100%;border-radius: 0px;transition: 0.5s;}
/*.section-carrito .pago:hover{box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 15px;}*/
.section-carrito .pago p{width: 100%;text-align: end; margin-bottom: 10px;}
.section-carrito .pago .total{font-size: 30px;font-weight: 600;}
.section-carrito .pago .total .total_pagar{color: var(--color2);}
.section-carrito .pago .pago_botones{display: flex;justify-content: flex-end;width: 100%;}
.section-carrito .pago .btn{text-decoration: none;padding: 13px;padding-left: 20px;padding-right: 20px;margin-right: 10px;color: #fff;font-weight: 600;font-size: 16px;border-radius: 5px;}
.section-carrito .pago .btn_volver{background: var(--color1);}
.section-carrito .pago .btn:hover{background: var(--color2);}
.section-carrito .pago .pago_botones .btn_pedido{border: none;padding: 13px;padding-left: 20px;padding-right: 20px;font-weight: 600;font-size: 16px;color: #fff;background: var(--color2);cursor: pointer;border-radius: 5px;}
.section-carrito .pago .pago_botones .btn_pedido:hover{background: var(--color1);}
/*===================== FIN CONTENEDOR DEL TOTAL A PAGAR CARRITO ===================*/
.table #listado-compra .btn_eliminapro{
    padding: 5px;
    padding-bottom: 7px;
    padding-top: 7px;
    font-size: 12px;
}
.table #listado-compra tr td .merchapro, .table #listado_comfirma_compra tr td .merchapro{
    background: green;
    padding: 3px;
    font-size: 12px;
    margin-left: 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: 600;
    padding-left: 5px;
    padding-right: 5px;
    width: 150px;
    text-align: center;
}
@media screen and (max-width:416px){
    .table #listado-compra tr td .merchapro, .table #listado_comfirma_compra tr td .merchapro{
        width: 130px;
    }
}
/*.table #listado-compra tr .nombre_product_carri{
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    border-bottom: 0px;
}*/
/*===================== CARRITO VACIO ==================*/
.conten_carrito_vacio{
    display: none;
    background: #fff;
    padding: 40px;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
}
.conten_carrito_vacio .nodata-carrito{
    width: 100%;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}
.conten_carrito_vacio span{
    font-size: 50px;
    padding: 5px 10px 5px 5px;
    border: 5px solid var(--color2);
    color: var(--color2);
    border-radius: 50%;
}
.conten_carrito_vacio .btn-regresar{
    background: var(--color2);
    font-weight: 600;
    font-size: 15px;
    margin-top: 10px;
}
.conten_carrito_vacio .btn-regresar:hover{
    background: var(--color1);
}
/*===================== FIN CARRITO VACIO ==================*/
/*=================
.section-carrito .pasos{display: flex;flex-wrap: wrap;justify-content: flex-end;margin-bottom: 20px;background: #fff;padding: 20px;padding-top: 50px;padding-bottom: 50px;width: 100%;border-radius: 0px;transition: 0.5s;}
.section-carrito .pasos:hover{box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 15px;}
.pasos hr{height: 100%;border: 1px solid #ccc;margin-right: 40px;margin-left: 20px;}
.pasos .nuevo-cliente{display: flex;flex-wrap: wrap;margin: auto;width: 300px;}
.pasos .nuevo-cliente a{text-decoration: none;color: #fff;background: var(--color2);padding-top: 10px;padding-bottom: 10px;padding-left: 20px;padding-right: 20px;border-radius: 5px;transition: 0.5s;margin-top: 10px;}
.conten-carrito .nuevo-cliente a:hover{background: var(--color1);}
.pasos  .nuevo-cliente h2{width: 100%;color: var(--color1);}
.pasos .nuevo-cliente p{width: 100%;color: var(--color3);}
.pasos .login-cliente .form-cliente{display: flex;flex-wrap: wrap;justify-content: center;margin: auto;width: 500px;padding: 20px;}
.pasos .login-cliente .form-cliente h2{color: var(--color1);font-weight: 15px;}
.pasos .login-cliente .form-cliente p{font-size: 18px;color: var(--color3);width: 100%;text-align: center;}
.pasos .login-cliente .form-cliente label{width: 100%;margin-bottom: 20px;color: var(--color1);font-weight: 500;}
.pasos .login-cliente .form-cliente label span{color: var(--color2);margin-right: 5px;}
.pasos .login-cliente .form-cliente input{padding: 10px;border-radius: 5px;width: 100%;margin-bottom: 20px;}
.btn-login-cliente{padding: 10px;border: 0px;background: var(--color2);color: #fff;border-top-right-radius: 10px;border-bottom-left-radius: 10px;transition: 0.5s;}
.btn-login-cliente:hover{background: var(--color1);}
.nodata-carrito{text-align: center;font-size: 18px;}==========*/
@media screen and (max-width:1400px){.section-carrito .conten-carrito{width: 90%;}}
@media screen and (max-width:1079px){.pasos .nuevo-cliente{width: 200px;}.pasos .login-cliente .form-cliente{width: 400px;}}
@media screen and (max-width:900px){.pasos hr{height: 0px;width: 100%;margin-top: 40px;margin-bottom: 40px;}
    .pasos .nuevo-cliente{width: 90%;}.pasos .login-cliente .form-cliente{width: 90%;;}}
@media screen and (max-width:600px){
    .section-carrito .pago .btn, .section-carrito .pago .pago_botones .btn_pedido{font-size: 15px;padding-top: 10px;padding-bottom: 10px;padding-left: 18px;padding-right: 18px;}
    .section-carrito .pago .total{font-size: 20px;}}
@media screen and (max-width:550px){
    .section-carrito .pago .pago_botones{flex-wrap: wrap;}
    .section-carrito .pago .btn{margin-right: 0px; margin-left: 10px;padding-top: 7px;padding-bottom: 7px;}
    .section-carrito .pago .pago_botones .btn_pedido{margin-top: 15px;padding-top: 10px;padding-bottom: 10px;}}
@media screen and (max-width:430px){
    .section-carrito .conten-carrito .tabla-compra-productos{padding: 20px;padding-top: 20px;}
    .section-carrito .pago{padding: 20px;}}