/*
|--------------------------------------
|	Variables
|--------------------------------------
|
*/
:root{
	--color-principal: #ffbf00;
	--color-principal-claro: #ffd24d;
	--color-mwqr: #192440;
	--boton-texto-color: var(--bs-btn-color);
	--horario-texto-color: #fff;
}


/*
|--------------------------------------
|	General
|--------------------------------------
|
*/
body,
html{
	height: 100%;
	font-family: 'Open Sans', sans-serif
}
.img_circ,
.cont-img_circ{
	overflow: hidden;
	width: 70px;	height: 70px;
	border-radius: 100%
}
.img_circ img,
.cont-img_circ img{width: 100%;	height: auto}
.none{display: none}
.open_float{cursor: pointer}
.loader {
	position: absolute;	top: 50%;	left: 50%;	display: none;
	width: 64px;	height: 60px;
	margin-top: -30px;	margin-left: -32px;
}
.loader::after {
	content: '';
	position: absolute;	bottom: 0;	left: 0;
	width: 64px;	height: 32px;
	border-radius: 0 0 50px 50px;
	background: var(--color-principal);
	animation: move 0.5s linear infinite alternate;
}
.loader::before {
	content: '';
	position: absolute;	top: 0;	left: 50%;
	width: 24px;	height: 24px;
	background: #ffbf00;
	transform: translateX(-50%) rotate(0deg);
	animation: rotate 2s linear infinite;
}
@keyframes rotate {
	100% { transform: translateX(-50%) rotate(360deg)}
}
@keyframes move {
	0% { transform: rotate(10deg)}
	100% { transform: rotate(-10deg)}
}
.game_loader {
	position: absolute;	top: 50%;	left: 50%;	display: none;
	height: 40px;	width: 6px;
	margin-top: -20px;	margin-left: -3px;
	color: var(--color-principal);
	animation: paddles 0.75s ease-out infinite;
}
.game_loader:before {
	content: "";
	position: absolute;	top: 15px;	right: 0;	left: 0;
	width: 12px;	height: 12px;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #de3500;
	animation: ballbounce 0.6s ease-out infinite;
}
@keyframes paddles {
	0% { box-shadow: -25px -10px, 25px 10px}
	50% { box-shadow: -25px 8px, 25px -10px }
	100% { box-shadow: -25px -10px, 25px 10px}
}
@keyframes ballbounce {
	0% { transform: translateX(-20px) scale(1, 1.2) }
	25% { transform: scale(1.2, 1) }
	50% { transform: translateX(15px) scale(1, 1.2) }
	75% { transform: scale(1.2, 1) }
	100% { transform: translateX(-20px) }
}
.spinner {display: none}
.spinner.activo {display: inline-block}
.spinner > span {
	display: inline-block;
	width: 8px;	height: 8px;
	margin-left: 3px;	margin-right: 3px;
	border-radius: 100%;
	background-color: var(--boton-texto-color);
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}

/* Shake */
.shake{
	-webkit-animation: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	animation: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@-webkit-keyframes shake{
	10%, 90%{transform: translate3d(-1px, 0, 0)}
	20%, 80%{transform: translate3d(2px, 0, 0)}
	30%, 50%, 70%{transform: translate3d(-4px, 0, 0)}
	40%, 60%{transform: translate3d(4px, 0, 0)}
}
@keyframes shake{
	10%, 90%{transform: translate3d(-1px, 0, 0)}
	20%, 80%{transform: translate3d(2px, 0, 0)}
	30%, 50%, 70%{transform: translate3d(-4px, 0, 0)}
	40%, 60%{transform: translate3d(4px, 0, 0)}
}

/* Seleccionador */
.seleccionador{
	display: inline-block;	position: relative;
	border: .3em solid #f0f0f0;	border-radius: 1em;
	background: #f0f0f0;
}
.seleccionador input{
	position: relative;	opacity: 0;	display: none;
	width: 0;	height: 0;
	z-index: 1;
}
.seleccionador label{
	position: relative;	cursor: pointer;
	padding: .25em 1em;
	font-size: 1.1em;	font-weight: 600;
	z-index: 1;
}
.seleccionador .resaltado{
	position: absolute;	top: 0;	right: 0;	bottom: 0;	left: 0;
	width: 50%;
	border-radius: .8em;
	background: #fff;
	/* Animacion */
		-webkit-transition:all 0.3s cubic-bezier(0.785, 0.135, 0.150, 0.860) 0s;
		-moz-transition:all 0.3s cubic-bezier(0.785, 0.135, 0.150, 0.860) 0s;
		-o-transition:all 0.3s cubic-bezier(0.785, 0.135, 0.150, 0.860) 0s;
		transition:all 0.3s cubic-bezier(0.785, 0.135, 0.150, 0.860) 0s;
}
.seleccionador.dos input:nth-of-type(1):checked ~ .resaltado{right: 50%;}
.seleccionador.dos input:nth-of-type(2):checked ~ .resaltado{left: 50%;}
.seleccionador.dos.pago input:checked + label{color: #fff;}
.seleccionador.dos.pago input:nth-of-type(1):checked ~ .resaltado{background: #34a300;}
.seleccionador.dos.pago input:nth-of-type(2):checked ~ .resaltado{background: #2667ff;}

.select_pay_method{
	display: flex;	flex-wrap: nowrap;	justify-content: center;	align-items: center;	position: relative;
	/*padding: 0.375em;*/
	font-size: .95em;
	border: 0.25em solid transparent;	border-radius: 10em;
	background: rgba(206, 212, 218, .16);	box-shadow: 0 0 0 1px hsl(210, 14%, 90%);
}
.select_pay_method.danger{box-shadow: 0 0 0 1px #dc3545;}
/*.select_pay_method input{display: none;}*/
.select_pay_method .pay_method{
	cursor: pointer;
	padding-top: .4em;	padding-bottom: .4em;
	line-height: 1em;
	z-index: 1;
}
.select_pay_method .pointer{
	position: absolute; top: 0;	bottom: 0;
	border-radius: 10em;
	z-index: 0;
	/* Animacion */
		-webkit-transition: all 0.2s ease 0s;
		-moz-transition: all 0.2s ease 0s;
		-o-transition: all 0.2s ease 0s;
		transition: all 0.2s ease 0s;
}
.select_pay_method.doble .pay_method,
.select_pay_method.doble .pointer{width: 50%}
.select_pay_method.triple .pay_method,
.select_pay_method.triple .pointer{width: 33.33%}

.select_pay_method.doble .pay_method:nth-of-type(1).active ~ .pointer{left: 0;}
.select_pay_method.doble .pay_method:nth-of-type(2).active ~ .pointer{left: 50%;}
.select_pay_method.triple .pay_method:nth-of-type(1).active ~ .pointer{left: 0;}
.select_pay_method.triple .pay_method:nth-of-type(2).active ~ .pointer{left: 33.33%;}
.select_pay_method.triple .pay_method:nth-of-type(3).active ~ .pointer{left: 66.66%;}

.select_pay_method .pay_method.active{color: var(--boton-texto-color);}
.select_pay_method .pay_method.active ~ .pointer{background: var(--color-principal);}

.select_pay_method.multicolor .pay_method.efectivo.active{color: hsl(120, 100%, 22%);}
.select_pay_method.multicolor .pay_method.efectivo.active ~ .pointer{background: hsl(120, 100%, 90%);}
.select_pay_method.multicolor .pay_method.transf.active{color: hsl(260, 100%, 30%);}
.select_pay_method.multicolor .pay_method.transf.active ~ .pointer{background: hsl(250, 100%, 92%);}
.select_pay_method.multicolor .pay_method.tarjeta.active{color: hsl(220, 100%, 30%);}
.select_pay_method.multicolor .pay_method.tarjeta.active ~ .pointer{background: hsl(220, 100%, 92%);}

/* Modals */
.modal-content{border: none;}
.modal .btn-close.esquina{
	position: absolute;	top: 10px;	right: 10px;
	z-index: 1;
}
.modal .footer-close{
	width: 100%;
	font-size: .9em;
	border-radius: 0;
}




/*
|--------------------------------------
|	Cabecera
|--------------------------------------
|
*/
#sucursal{box-shadow: 1px 0 0 0 #dee2e6, 3px 0 4px rgba(0,0,0,.05);}
#portada{
	height: 20vh;
	background-position: center;	background-size: cover
}
#logo{
	margin-top: -35px;
	border: 4px solid var(--color-principal);
	background: var(--color-principal-claro);	box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 4px 8px rgba(0,0,0,.05)
}
#negocio{font-size: 1.3rem;	font-weight: 700}


/*
|--------------------------------------
|	Navegación
|--------------------------------------
|
*/
.navegacion{
	white-space: nowrap;	overflow-x: scroll;	-webkit-overflow-scrolling: touch;
	background: #fff;	box-shadow: 0 2px 4px rgba(0,0,0,.05);
	z-index: 20
}
.navegacion.lateral{
	overflow-x: hidden;	overflow-y: scroll;
	height: 65vh;
	box-shadow: none
}
.navegacion .nav-link{
	max-width: 15em;
	padding: .3em 1em .3em .3em !important;
	/*color: #808080;*/	font-size: .8em;	font-weight: 600;
	/*border: 1px solid #ededed;*/
	background-color: #f8f8f8;	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06)
}
.navegacion .img_circ{
	width: 30px;	height: 30px;
	background-size: cover
}
.menu_icono{
	content: "";	cursor: pointer;
	width: 48px;	height: 48px;
	color: #808080;	text-decoration: none;	vertical-align: middle;
	background-color: #f8f8f8;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0.5 0.5 40 40'%3e%3cpath stroke='rgba%28103, 103, 103, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M10 13 h1 M17 13 h13 M10 20 h1 M17 20 h10 M10 27 h1 M17 27 h13'/%3e%3c/svg%3e");
	/*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3e%3cpath stroke='rgba%28103, 103, 103, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M11 13 h18 M11 20 h14 M11 27 h18'/%3e%3c/svg%3e");*/
	background-repeat: no-repeat;	background-position: center;
}
.navegacion .nav-link:hover,
.navegacion .icono:hover{color: inherit;	background-color: #e6e6e6}
.navegacion .nav-link.active{
	color: var(--boton-texto-color);
	background: var(--color-principal)
}


/*
|--------------------------------------
|	Platillos
|--------------------------------------
|
*/
#secciones{margin-top: -20px}
#secciones h2{font-size: 1.3rem;	font-weight: 700}
#secciones .platillo{cursor: pointer}
#secciones .platillo .img{
	overflow: hidden;
	height: 80px;
	border-radius: 6px;
	background-position: center;	background-size: cover;
}
#secciones .platillo h3{font-size: 1.1rem}
#secciones .platillo p{font-size: .8rem}
#secciones .platillo .monto{font-weight: 700}
#secciones .platillo .agre,
#secciones .platillo .agregar{
	color: var(--boton-texto-color);	font-size: .8rem;	font-weight: 600;	letter-spacing: 1px;
	background: var(--color-principal)
}
#secciones .platillo .agre:hover,
#secciones .platillo .agregar:hover{background: var(--color-principal-claro)}
.titulo{font-weight: 600}


/*
|--------------------------------------
|	Ventanas flotantes
|--------------------------------------
|
*/
body.no_scroll{
	overflow: hidden;
	width: 100%
}
.float{
	position: fixed;	opacity: 0;	visibility: hidden;
	z-index: 30;
	/* Animacion */
		-webkit-transition:all 0.2s ease 0s;
		-moz-transition:all 0.2s ease 0s;
		-o-transition:all 0.2s ease 0s;
		transition:all 0.2s ease 0s;
}
.float .oscuro{
	position: fixed;	top: 0;	bottom: 0;	left: 0;	right: 0;
	background: rgba(0,0,0,.5)
}
.float .contenido{
	position: fixed;	opacity: 0;	visibility: hidden;	overflow: hidden;
	/*width: 100%;*/	max-height: 90vh;
	background: #fff;	box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 4px 8px rgba(0,0,0,.05);
	/* Animacion */
		-webkit-transition:all 0.3s ease 0s;
		-moz-transition:all 0.3s ease 0s;
		-o-transition:all 0.3s ease 0s;
		transition:all 0.3s ease 0s;
}
.float.right .contenido{
	top: 0;	overflow-y: scroll;
	height: 100%;	max-width: 90%;	max-height: 100%
}
.float.active,
.float.active .contenido{opacity: 1;	visibility: visible}
.float.top .contenido{top: -50px;	border-radius: 0 0 30px 30px}
.float.right .contenido{right: -50px; border-radius: 14px 0 0 14px}
.float.bottom .contenido{bottom: -50px; border-radius: 30px 30px 0 0}
.float.top.active .contenido{top: 0}
.float.right.active .contenido{right: 0}
.float.bottom.active .contenido{bottom: 0}
.float .lista{
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	max-height: 60vh
}
.float .lista > * {
	-webkit-transform: translateZ(0px);
}
.float .cerrar,
.float .quitar{
	cursor: pointer;
	color: #dc3545;
}
.float .cerrar.x{
	position: fixed;	right: 0;
	width: auto;
	color: inherit;
	background: #fff;
	z-index: 2
}
/* Navegar */
.float.navegar .contenido{background-color: hsl(0, 0%, 98%)}
.float.navegar .cabecera{background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.05)}
.float.navegar .cabecera .h6{font-weight: 600}
.float.navegar .cabecera .cerrar{
	display: inline-block;
	color: inherit
}
.float.navegar .body{
	font-size: .875em;	font-weight: 600;
	background-color: hsl(0, 0%, 98%)
}
.float.navegar .body .boton{
	cursor: pointer;
	background: #fff
}
.float.navegar .body .modulo{
	border-radius: 10px;
	background: #fff;	box-shadow: 0 2px 4px rgba(0,0,0,.05)
}
.float.navegar .body .modulo .boton{background: none}
.float.navegar.ubicacion .body .modulo{border-radius: 20px}
.float.navegar.ubicacion .body .modulo .check{display: none}
.float.navegar.ubicacion .body .modulo .select{color: #f26419}
.float.navegar.ubicacion .body .modulo .select .check{display: inline-block}
.float.navegar.ubicacion .body .modulo .select .pin{display: none}
.float.navegar.ubicacion .body .modulo b{font-weight: 700}
.float.navegar.ubicacion .body .modulo small{display: inline-block;	opacity: .6}
.float.navegar .pie{background: #fff}
.float.navegar.historial_pedidos .modulo .indicador{
	color: var(--bs-alert-color);
	border-right: 1px solid var(--bs-alert-border-color);
	background-color: var(--bs-alert-bg);
}
.float.navegar .body label.modulo{border: 2px solid #fff;}
.float.navegar .body input:checked + .modulo{
	border-color: #0d6efd;
	box-shadow: 0 2px 4px rgba(13, 110, 253, .2);
}

/* Menú */
#lista_menu .menu{
	font-size: 1.2rem;	font-weight: 600;
	box-shadow: 0 2px 4px rgba(0,0,0,.05);
	z-index: 2
}
#lista_menu .menu_icono{background-color: transparent}

/* Platillo */
#platillo .img{
	height: 26vh;
	background-position: center;	background-size: cover
}
#platillo .contenido{
	overflow-y: scroll;
	/*-webkit-overflow-scrolling: touch;*/
	height: 80vh
}
#platillo .cerrar.x{
	bottom: 80vh;
	margin-bottom: -3.2rem;
	box-shadow: inset 0 0 0 1px hsl(0, 0%, 90%)
}
#platillo .lista{
	overflow-y: unset;
	max-height: none
}
#platillo .cabecera{
	font-size: 1rem;	color: var(--boton-texto-color);
	background: var(--color-principal)
}
#platillo .titulo_extra{font-size: .96em;	font-weight: 600;	line-height: 1.3em}
#platillo .obligatorio span{
	color: #212529;	font-size: .84em;	letter-spacing: .05em;
	border-radius: 100px;
	background: #fff
}
#platillo .form-check{font-size: .9em}
#platillo form.extra textarea{
	resize: none;
	font-size: .95rem;
	border: none;	border-radius: unset;
	box-shadow: none
}
#platillo .contenido .loader{top: 40vh}
#platillo .contenido.loading .row > [class*="col"]{opacity: .05}
#platillo .contenido.loading .loader{display: block}
#agregar .contador{
	overflow: hidden;
	font-size: .9rem;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0,0,0,.05)
}
#agregar .contador span{
	cursor: default;
	width: 2.4rem;	height: 100%;
	line-height: 2.3rem
}
#agregar .contador .mas,
#agregar .contador .menos{
	cursor: pointer;
	font-size: 1.2rem
}
#agregar button{
	pointer-events: auto;
	height: 100%;
	font-size: .9rem;	color: var(--boton-texto-color);	font-weight: 600;
	border-color: var(--color-principal);	border-radius: .25rem;
	background: var(--color-principal);	box-shadow: 0 2px 4px rgba(0,0,0,.1)
}

/* Orden */
#orden .contenido{
	padding-bottom: 45px !important;
	border-radius: 0;
	background-color: #f9f9f9;	box-shadow: 0 -2px 4px rgba(0,0,0,.05)
}
#orden button{
	color: var(--boton-texto-color);	font-weight: 600;
	border: none;	border-radius: .4rem;
	background: var(--color-principal);	background-image: linear-gradient(to right, var(--color-principal-claro) 0%, var(--color-principal) 100%)
}
#orden button span.izq{
	left: 20px;
	color: #212529;	font-weight: 600;
	border-radius: 4px;
	background: #fff
}
#orden button span.der{right: 22px}

/* Lista orden */
#lista_orden .logo{
	width: 28px;	height: 28px;
	border: 2px solid var(--color-principal);
	background: var(--color-principal-claro);	box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 4px 8px rgba(0,0,0,.05)
}
#lista_orden .logo img{vertical-align: unset}
#lista_orden h5{font-size: 1.1rem}
#lista_orden h6{font-size: .9rem;	color: #4d4d4d}
#lista_orden .lista{
	height: 70vh;	max-height: 90vh;
	font-size: .8rem
}
#lista_orden .lista .p{font-weight: 600}
#lista_orden .lista button{font-size: .9rem}
#lista_orden .lista .borrar{margin-bottom: 8rem}
#ordenar{
	position: fixed;	bottom: 0;
	border-radius: 0;
	background-color: #f9f9f9;	box-shadow: 0 -2px 4px rgba(0,0,0,.05)
}
#ordenar a,
#ordenar button{
	color: var(--boton-texto-color);	font-weight: 600;
	border: none;	border-radius: .4rem;
	background: var(--color-principal);	background-image: linear-gradient(to right, var(--color-principal-claro) 0%, var(--color-principal) 100%)
}
#ordenar a span.izq,
#ordenar button span.izq{
	left: 20px;
	color: #212529;	font-weight: 600;
	border-radius: 4px;
	background: #fff
}
#ordenar a span.der,
#ordenar button span.der{right: 22px}
#ordenar a i,
#ordenar button i{
	margin-top: -5px;	margin-right: 4px;
	font-size: 1.3em;	vertical-align: middle
}
#ordenar svg{margin-top: -4px; margin-right: 4px}
#ordenar a .texto,
#ordenar button .texto{
	opacity: 1;
	-webkit-transition: all 0.2s ease 0s;
	-moz-transition: all 0.2s ease 0s;
	-o-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
}
#ordenar a .spinner,
#ordenar button .spinner{
	position: absolute;	right: 0;	left: 0;	display: inline-block;	opacity: 0;	visibility: hidden;
	-webkit-transition: all 0.2s ease 0s;
	-moz-transition: all 0.2s ease 0s;
	-o-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
}
#ordenar a.activo .texto,
#ordenar button.activo .texto{opacity: 0}
#ordenar a.activo .spinner,
#ordenar button.activo .spinner{opacity: 1;	visibility: visible}


/*
|--------------------------------------
|	Configuración Orden
|--------------------------------------
|
*/
#config{
	white-space: nowrap;	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	background-color: hsl(0, 0%, 98%)
}
#menu_datos_cliente{
	padding: 0;
	vertical-align: middle
}
#menu_datos_cliente svg{fill: #6c757d}
#menu_datos_cliente:hover svg{fill: var(--boton-texto-color)}
#menu_datos_cliente.active svg{fill: var(--boton-texto-color)}
#config .entrega,
#menu_datos_cliente{
	position: relative;
	color: #6c757d;	font-size: .75rem;
	border-color: #afb5ba
}
#config .entrega:hover,
#menu_datos_cliente:hover{
	color: var(--boton-texto-color);
	border-color: var(--color-principal-claro);
	background-color: var(--color-principal-claro)
}
#config .entrega.active,
#menu_datos_cliente.active{
	color: var(--boton-texto-color);
	border-color: var(--color-principal);
	background-color: var(--color-principal);	background-image: linear-gradient(to right, var(--color-principal-claro) 0%, var(--color-principal) 100%)
}
#config .entrega::before{
	content: "";
	display: inline-block;
	width: .8rem;	height: .8rem;
	margin-right: 5px;	margin-top: -.2rem;
	vertical-align: middle;
	border-radius: .25rem;
	background-color: #fff;	box-shadow: inset 0 0 0 1px #adb5bd;
	/* Animacion */
		-webkit-transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
		-moz-transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
		-o-transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
		transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
#config .entrega::after{
	content: "";
	position: absolute;	/*top: .35rem;	left: .4rem;*/	top: .3rem;	left: .406rem;
	width: 1rem;	height: 1rem;
	background: no-repeat 50%/50% 50%
}
#config .entrega:hover::before,
#config .entrega.active::before{box-shadow: inset 0 0 0 1px #fff}
#config .entrega.active::after{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e")}
#config.resaltar .entrega{
	animation-name: resaltar;
	animation-duration: 1s;
	animation-iteration-count: 1;
}
#config.resaltar .entrega:nth-child(1){animation-delay: 0s}
#config.resaltar .entrega:nth-child(2){animation-delay: .2s}
#config.resaltar .entrega:nth-child(3){animation-delay: .4s}
@keyframes resaltar {
	0%   {color: inherit;	border-color: #afb5ba;	background-color: inherit;}
	50%  {color: var(--boton-texto-color);	border-color: var(--color-principal-claro);	background-color: var(--color-principal-claro);}
	100% {color: inherit;	border-color: #afb5ba;	background-color: inherit;}
}

#config .dropdown{display: inline-block}
#config select{width: auto}

/* Método de Entrega */
#entrega form .list-group li{font-size: .92rem}
#entrega form .list-group li small{letter-spacing: .02rem}
#entrega form .pago label.active{
	border-color: var(--color-principal)!important;
	background: var(--color-principal)
}
#numero_mesa,
.numero_mesa{
	padding-right: 2.5rem;
	font-size: 3rem;	text-align: center;
	background-size: auto 24%;	background-position: right 10px center
}
#numero_mesa::placeholder,
.numero_mesa::placeholder,
#numero_mesa::-moz-placeholder,
.numero_mesa::-moz-placeholder,
#numero_mesa::-ms-input-placeholder,
.numero_mesa::-ms-input-placeholder,
#numero_mesa::-webkit-input-placeholder,
.numero_mesa::-webkit-input-placeholder{color: #cbd0d4}
#entrega_aceptar{
	color: var(--boton-texto-color);
	border-color: var(--color-principal);
	background: var(--color-principal)
}
#entrega_aceptar:hover{
	border-color: var(--color-principal-claro);
	background: var(--color-principal-claro)
}
#entrega_cancelar{color: inherit}


/*
|--------------------------------------
|	Datos Orden (suspendido)
|--------------------------------------
|
*
#datos_orden .modal-content{border: none; border-radius: .8rem}
#datos_orden .btn-group .btn.active{
	border-color: #ffb700;
	background: var(--color-principal)
}
#datos_orden .btn-group .btn:hover{
	border-color: #ffcc31;
	background: #ffd331
}
#datos_orden .btn-group .btn-light{border-color: #eae5e1}
*/


/*
|--------------------------------------
|	Link whatsapp
|--------------------------------------
|
*/
#link_whatsapp{
	display: none;	opacity: 0;	visibility: hidden;	overflow: hidden;
	width: 0;	height: 0;
}
#link_whatsapp.vivo{
	display: block;	opacity: 1;	visibility: visible;	overflow: auto;	position: absolute;	top: 0;
	width: auto;	height: auto;
	padding: 10px 50px;
	background: #f00
}


/*
|--------------------------------------
|	Footer
|--------------------------------------
|
*/
#footer{
	font-size: .9rem;	line-height: 1.2em;
	background: #192440
}
#footer a{color: #fff;	font-weight: 400;	text-decoration: none}
#footer a b{color: #ffbf00;	font-weight: 400}
#footer a:hover b{color: #ffaa00}


/*
|--------------------------------------
|	Cerrado (Horario)
|--------------------------------------
|
*/
#cerrado{
	position: fixed;	bottom: 0;	left: 0;	overflow: hidden;
	max-height: 80%;
	color: var(--horario-texto-color);	font-weight: 600;
	border-top: 1px solid rgba(0,0,0,.1);
	background: var(--color-mwqr);	box-shadow: 0 -2px 4px rgba(0,0,0,.05)
}
#cerrado .icono svg{
	display: block;
	width: .9rem;
	fill: var(--horario-texto-color)
}
#cerrado p{font-size: .9rem;	line-height: 1.3em}


/*
|--------------------------------------
|	Alertas
|--------------------------------------
|
*/
/* En Top */
#alerta{
	position: relative;	display: none;	opacity: 0;
	padding: 8px 40px 8px 8px;
	text-align: left;
	border: 2px solid #bfbfbf;	border-radius: 1em;
	background-color: #f2f2f2;	box-shadow: 0 10px 20px -10px rgba(0,0,0,.4)
}
#alerta.activo{
	display: inline-block;
	animation: alerta 0.3s ease forwards
}

@keyframes alerta {
  0%   {opacity: 0;	margin-top: 0}
  100% {opacity: 1;	margin-top: 20px}
}
#alerta .icono{
	display: inline-block;
	padding: 6px;
	color: #bfbfbf;	line-height: 0em;	vertical-align: middle;
	border-radius: 40%;
	background: #bfbfbf;	box-shadow: 0 4px 6px rgba(0,0,0,.1)
}
#alerta .icono .circulo{
	display: inline-block;
	padding: 5px;
	line-height: 0em;
	border-radius: 50%;
	background: #fff
}
#alerta .icono .icon{display: none}
#alerta .texto{
	color: rgba(0, 0, 0, .9);	vertical-align: middle
}
#alerta .cerrar_alerta{
	position: absolute;	top: 50%;	right: 10px;	cursor: pointer;
	width: auto;
	margin-top: -12px;	padding: 4px;
	color: #808080;	line-height: 0em
}
#alerta.bien{
	border-color: #33cc56;
	background-color: #dbf0e0
}
#alerta.bien .icono{
	color: #33cc56;
	background: #33cc56
}
#alerta.bien .icono .icon_bien{display: inline-block}
#alerta.mal{
	border-color: #d92626;
	background-color: #f7d4d4
}
#alerta.mal .icono{
	color: #d92626;
	background: #d92626
}
#alerta.mal .icono .icon_mal{display: inline-block}

/* Sencilla */
.alerta{
	display: none;	opacity: 0;
	color: #fff;	font-size: .875em;
	border-radius: .7em;
	background: rgba(0, 0, 0, .8);
	z-index: 99
}
.alerta.activo{
	display: inline-block;
}
.alerta.bottom.activo{animation: alerta_sencilla_bottom 4s ease forwards}

@keyframes alerta_sencilla_bottom {
  0%	{opacity: 0;	margin-bottom: 0}
  8%	{opacity: 1;	margin-bottom: 20px}
  92%	{opacity: 1;	margin-bottom: 20px}
  1000%	{opacity: 0;	margin-bottom: 0}
}


/*
|--------------------------------------
|	Perfil de usuario
|--------------------------------------
|
*/
/* Botón */
#perfil_boton{
	position: fixed;	top: 10px;	right: 10px;	display:flex;	flex-direction:column;	flex-wrap: wrap-reverse;	cursor:pointer;
	width: 41px;
	padding: 10px;
	border-radius: 10px;
	background: #fff;
	/*box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, 0 0 0 1px rgba(149, 157, 165, 0.2);*/
	/*z-index: 21;*/
}
#perfil_boton span{
	height: 3px;
	margin: 3px 0;
	border-radius:10px;
	background: #000;
	transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
#perfil_boton span:nth-of-type(1){
	width:50%;
	margin-bottom: 0;
}
#perfil_boton span:nth-of-type(2){
	width:100%;
}
#perfil_boton span:nth-of-type(3){
	width:75%;
	margin-top: 0;
}
#perfil_boton.active{z-index: 30}
#perfil_boton.active span:nth-of-type(1){
	transform-origin:bottom;
	transform: translate(-1px,2px) rotatez(-45deg)
}
#perfil_boton.active span:nth-of-type(2){
	transform-origin:top;
	transform: translate(1px,1px) rotatez(45deg)
}
#perfil_boton.active span:nth-of-type(3){
	transform-origin:bottom;
	width:50%;
	transform: translate(-9px,-2px) rotatez(-45deg)
}
/* Ventana Perfil */
#perfil .cabecera{background-size: cover;	background-position: center}
#perfil .cabecera .logo img{width: 40px}
#perfil .cabecera .avatar img{border-radius: 100%}
#perfil .cabecera .nombre{color: #fff}
#perfil .cabecera .nombre input{
	display: inline;	vertical-align: middle;	opacity: 1;
	width: auto;
	color: inherit
}
#perfil .cabecera .nombre input::placeholder{
	opacity: 1;
	color: inherit
}
#perfil .cabecera .nombre input:-ms-input-placeholder{color: inherit}
#perfil .cabecera .nombre input::-ms-input-placeholder{color: inherit}
#perfil .cabecera .nombre svg{display: none}
#perfil .cabecera .nombre.sin_nombre svg{display: inline-block}
#perfil .body{font-size: .875em;	font-weight: 600}
#perfil .ubicacion button{
	max-width: 70%;
	border: 1px solid rgba(0, 0, 0, .04);
	background: #fafafa
}
#perfil .ubicacion img{width: 18px}
#perfil .ubicacion small{
	display: inline-block;
	max-width: 75%;
	font-weight: 600;	line-height: 1.5em;	vertical-align: middle
}
#perfil .body .boton{cursor: pointer}


/*
|--------------------------------------
|	Responsivo
|--------------------------------------
|
*/
/* sm (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* md (tablets, 768px and up) */
@media (min-width: 768px) {
	.is_premium #sucursal,
	.is_premium #sucursal > .row{max-width: 250px}
	.is_premium #sucursal > .row{
		position: fixed;	top: 0;
		width: 100%;
	}
}

/* lg (desktops, 992px and up) */
@media (min-width: 992px) {
	.is_premium #sucursal,
	.is_premium #sucursal > .row{max-width: 300px}
}

/* xl (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* xxl (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}