﻿.pointer {
    cursor: pointer;
}
.select-ab-blue {
    width: 100px;
    height: 29px;
    border-radius: 12px;
    background: var(--blue-abgo);
    color: white;
    padding-left: 6px;
    margin: 20px 20px 2px 2px;
    font-size:1rem;
}
/*Delete margin and paddig of row*/
.row{
    margin:0px;
    padding:0px
}

.inwrapperpartialLanguajeContainer {
    display: none;
}

.partialLanguajeContainer {
    display: block;
}

.display-none {
    display: none;
}
/*NAVBAR*/
a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}
.NavStatic {
    font-size: 30px;
    color: #ffffff;
    cursor: pointer;
}
.Carrito:hover {
    color: var(--blue-abgo);
    cursor: pointer;
}
@media only screen and (max-width:992px) {
    footer {
        display: none;
    }

    .inwrapperpartialLanguajeContainer {
        display: block;
    }

    .partialLanguajeContainer {
        display: none;
    }

}
    /*HOME*/
    .authmovil {
        display: none;
    }
@media only screen and (max-width: 767px) {
    .authmovil {
        display: block;
    }
}
/*SEARCH LOCATION*/
.SearchLocation {
    padding-top: 5% !important;
    
    background: transparent !important;
}
.border-input{
    border-bottom-left-radius:12px!important;
    border-bottom-right-radius:12px!important;
    border-top-right-radius:12px!important;
    border-top-left-radius:12px!important;
}
.FormSearch {
    width: 50%;
}
.MovilSearch{
    display:none;
}
.WebSearch {
    display: block;
}
/*PUNTOS de QUIEBRE param SEARCH & USERNAV ICON*/
/*@media only screen and (max-width:2000px) {
    .SearchLocation {
        left: 37% !important;
    }
}
@media only screen and (max-width:1800px) {
    .SearchLocation {
        left: 35.5% !important;
    }
}
@media only screen and (max-width:1600px) {
    .SearchLocation {
        left: 34% !important;
    }
}
@media only screen and (max-width:1500px) {
    .SearchLocation {
        left: 33% !important;
    }
}
@media only screen and (max-width:1300px) {
    .SearchLocation {
        left: 31.5% !important;
    }
}
@media only screen and (max-width:1200px) {
    .SearchLocation {
        left: 30.8% !important;
    }
}
@media only screen and (max-width:1100px) {
    .SearchLocation {
        left: 29% !important;
    }
}
@media only screen and (max-width:1060px) {
    .SearchLocation {
        left: 28.5% !important;
    }
}*/

/*Scroll for directions list*/
.scroll-directions-navbar {
    max-height: 375px;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
    /*Estilos estándar experimentales (Principalmente Firefox)*/
    scrollbar-color: #FFF0 rgba(255, 255, 255, 0);
    scrollbar-width: none;
}

    .scroll-directions-navbar::-webkit-scrollbar {
        display: none
    }

    .scroll-directions-navbar:hover {
        cursor: pointer;
    }

/*side open btn*/

.sidemenu_btn {
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    width: 36px;
    padding: 6px;
    margin-right: 1rem;
    margin-top: 1px;
    right: 20px;
}

.sidemenu_btn,
.side-menu .btn-close,
.side-menu .btn-close::before,
.side-menu .btn-close::after {
    position: absolute;
}

#close_side_menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: none;
    z-index: 1031;
    opacity: 0.5;
    cursor: pointer;
}

.closeModal {
padding:6px;
opacity:0.8;
}



.transparent-bg .sidemenu_btn > span {
    background: #fff;
}

/*.fixedmenu .sidemenu_btn > span:not(.gradient-bg) {
    background: #26313c !important;
}*/
.fixedmenu > span:not(.gradient-bg) {
    background: #26313c !important;
}

.sidemenu_btn > span:nth-child(2) {
    margin: 4px 0 4px auto;
    width: 75%;
    -webkit-transition: 0.3s all;
    -moz-transition: 0.3s all;
    -o-transition: 0.3s all;
    transition: 0.3s all;
}

.sidemenu_btn > span:nth-child(3) {
    margin-left: auto;
    width: 45%;
    -webkit-transition: 0.6s all;
    -moz-transition: 0.6s all;
    -o-transition: 0.6s all;
    transition: 0.6s all;
}

.sidemenu_btn:hover > span:nth-child(2),
.sidemenu_btn:hover > span:nth-child(3) {
    width: 100%;
}

/*nav bar correccion a iconos*/

@media only screen and (min-width:992px) {
    .sidemenu_btn > span {
        height: 0%;
        width: 0%;
        display: none;
    }
    .sidemenu_btn {
        height: 0%;
        width: 0%;
        display: none;
    }
    #pUserIcon {
        height: 0%;
        width: 0%;
        display: none;
    }
    #sidemenu_toggle{
        display:none;
    }

    #dropbtn {
        display: block;
    }

    #Usernav {
        display: block;
    }
}



    
/*side clode btn*/
@media only screen and (max-width:991px) {
    #pUserIcon {
        font-size: 30px;
        color: #ffffff;
        cursor: pointer;
        display: block
    }
    .sidemenu_btn > span {
        height: 2px;
        width: 100%;
        display: block;
    }
    .SearchLocation {
        /*left: 27% !important;*/
        padding-top: 9% !important;
    }
    .Carrito {
        margin-right: 60px;
    }

    .icon-cart-ab{
        width:40px;
    }

    .Usernav {
        padding-right: 0 !important;
        padding-left: 70%;
    }
    .sidemenu_btn{
        padding-right:10%;
    }
}
@media only screen and (max-width:850px) {
    .Usernav{
        padding-left:60%;
    }
    .sidemenu_btn {
        padding-right: 15%;
    }
}
@media only screen and (max-width:650px) {
    .Usernav{
        padding-left:50%;
    }
    .sidemenu_btn {
        padding-right: 15%;
    }

  
}
@media only screen and (max-width:590px) {
    .Usernav{
        padding-left:40%;
    }
    .sidemenu_btn {
        padding-right: 20%;
    }
}
@media only screen and (max-width:450px) {
    .Usernav{
        padding-left:40%;
    }
    .sidemenu_btn {
        padding-right: 25%;
    }
}
@media only screen and (max-width:767px) {
    .SearchLocation {
        /*left: 20.5% !important;*/
        display:block !important;
        visibility:visible;
        opacity:unset !important;
    }
    .authnav {
        display: block !important;
        visibility: visible;
        opacity: unset !important;
    }
}
/*@media only screen and (max-width:700px) {
    .SearchLocation {
        left: 18% !important;
    }
}
@media only screen and (max-width:650px) {
    .SearchLocation {
        left: 15% !important;
    }
}
@media only screen and (max-width:600px) {
    .SearchLocation {
        left: 12% !important;
    }
}

@media only screen and (max-width:500px) {
    .SearchLocation {
        left: 10% !important;
    }
}*/
@media only screen and (max-width:700px) {
    
    .FormSearch {
        width: 70%
    }
}

@media only screen and (max-width:490px) {
    .SearchLocation {
        /*left: 8% !important;*/
    }
    .WebSearch {
        display: block;
    }
    
    .MovilSearch{display:none;}
    .FormSearch{width:70%}
}
@media only screen and (max-width:450px) {
    .SearchLocation {
        /*left: 8% !important;*/
    }
    .WebSearch {
        display: block;
    }
    
    .MovilSearch {
        display: block;
    }
    .FormSearch{width:70%}
}

@media only screen and (max-width:400px) {
    .SearchLocation {
        /*left: 9% !important;*/
    }
    .FormSearch {
        width: 70%;
    }
}

@media only screen and (max-width:380px) {
    .SearchLocation {
        /*left: 10.5% !important;*/
    }
    .FormSearch {
        width: 80%;
    }
}
@media only screen and (max-width:360px) {
    .SearchLocation {
        /*left: 10% !important;*/
    }
    .FormSearch {
        width: 80%;
    }
    
}

@media only screen and (max-width:320px) {
    .SearchLocation {
        /*left: 10% !important;*/
    }
    .FormSearch {
        width: 90%;
    }
}
/*TAJETA DE HOME*/
.logohome {
    width: 40% !important;
    
}
/*BUTTONS*/
.btn{border-radius:21px;}
.btn-auth {
    color: var(--blue-abgo);
    background-color: #fff;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 10px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 21px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
    .btn-auth:hover {
        color:#fff !important;
        background-color: var(--blue-abgo);
        cursor:pointer;
     }
.btn-ab {
    background-color: var(--blue-abgo);
    color: #fff;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 13px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 21px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-aby {
    background-color: var(--yellow-abgo);
    color: #fff;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 35px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 21px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-ab-round {
    background-color: var(--blue-abgo);
    color: #fff;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 35px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 21px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-ab-lg {
    background-color: var(--blue-abgo);
    color: #fff !important;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 5px 40px;
    font-size: 1.4rem;
    line-height: 1.5;
    border-radius: 21px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-gray-round {
    background-color: var(--blue-abgo);
    color: #fff;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 35px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 21px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-search {
    background-color: var(--blue-abgo);
    color: #fff;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 35px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 21px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-search1 {
    background-color: var(--blue-abgo);
    color: #fff;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-top-left-radius:12px;
    border-bottom-left-radius:12px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-search2 {
    background-color: var(--blue-abgo);
    color: #fff;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-top-right-radius:12px;
    border-bottom-right-radius:12px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.input-group-append{
    margin-left:5px;
}
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}
@media only screen and (max-width:400px) {
    .btn-ab{font-size:1.2rem;}
}

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        color: #fff;
        background-color: #1b6ec2;
        border-color: #1861ac;
    }
    /*FORMS STYLE*/
    .form-home {
        display: inline-block;
        font-weight: 400;
        text-align: left;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        padding: .375rem .75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 0px;
        border-width: 0px !important;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    /*FOOTER*/
    .download {
        width: 80px;
    }

    .powerby {
        padding-top: 50%;
    }

    @media only screen and (max-width:1129px) {
        .download {
            width: 80px;
        }
    }

    @media only screen and (max-width:991px) {
        .download {
            width: 50%;
        }

        .powerby {
            padding-top: 0%;
        }
    }

    /*SIGN UP*/
.CardSignUp {
    box-shadow: 6px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    padding-bottom: 2%;
}

.container-signup {
    max-width: 100%;
}
.opacityABGO {
    margin: 100px;
    margin-top: 130px;
    margin-bottom: 130px;
    border-radius: 25px;
    background-color: #2126379e;
}

.bg-container {
    background: url(../Images/imagen-web-login.jpg) no-repeat;
    background-position: center !important;
    background-size: cover;
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
}

.btn-abgo {
    color: white;
    border-radius: 20px;
    width: 60%;
    background-color: var(--yellow-abgo);
    font-size: 17px;
    padding-bottom: 8px;
    padding-top: 8px;
}
.yellow-abgo {
    color: var(--yellow-abgo);
}
.btn-abgo:hover {
    color: white;
}

.logoOpa {
    opacity: 0;
    width: 10%;
    height: 25%;
}

@media only screen and (max-width:767px) {
    .CardSignUp {
        margin-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .opacityABGO {
        margin: 0px;
        margin-top: 25px;
    }

    .opacityABGO input, .opacityABGO select{
        height:42px;
        border-radius:8px !important;
    }

    .fontmobile{
        font-size:15px;
    }
    .bg-container {
        background: url(../Images/imagen-mobile-login2.jpg) no-repeat;
        background-position: center !important;
        background-size: cover;
        align-items: center;
        display: flex;
        justify-content: center;
        height: 100%;
    }
}

    /*Profile nav*/


    .image-profile {
        width: 120px;
        height: 120px;
        position: relative;
        border-radius: 100px;
        box-sizing: border-box;
        box-shadow: 0px 9px 11px rgba(0, 0, 0, 0.25);
        margin: 10px auto 20px;
        display: block;
    }

    .card-profile .card-link {
        background: #898989 !important;
        color: #fff !important;
    }

        .card-profile .card-link:before .active-card {
            content: "\f0da" !important;
            float: right;
        }

    /*Link of Log Out*/
    #linkLogOut {
        background: #898989 !important;
        color: #fff !important;
        padding: .75rem 1.25rem;
        font-size: 14px;
       
    }
   
    #iconLogOut {
        margin-left: 2%;
        padding-left: 0%;
        padding-right: 0%;
        margin-right:0px;
        font-size:19px;
        width:100%;
       
    }

    #iconLogOut .col-1{
        padding-right:0px;
        margin-right:0px
    }
    /*.card-profile .card-link {
        font-size: 14px;
    }*/
    #spanLogOut {
      /*font-weight:normal;*/
        margin-left: 0% ;
        padding-left: 0% ;
        font-size:16px;
        /*font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif*/
    }
@media (max-width:1659px) {
    #iconLogOut {
        margin-right: 5%;
        /*padding-left: 0%;*/
    }
}
    @media (max-width:1235px){
        #iconLogOut {
            margin-right: 5%;
            /*padding-left: 0%;*/
        }
    }
    @media (max-width:991px){
            #iconLogOut {
                margin-right: 0%;
                /*padding-left: 0%;*/
            }
        }
    @media (max-width:504px){
        #iconLogOut{
            margin-right:2%
        }
    }

    /*NO AUtenticate Login sidebar*/
    #linkSignOut, #linkLogin {
        background: #898989 !important;
        color: #fff !important;
        padding: .75rem 1.25rem;
        font-size: 20px;
        margin-bottom:5%;
        /*font-weight:500;*/
    }
  
/*ADD CREDIT CARD*/
#btn-save-card {
    width: 76px;
    padding-left: 3%;
}

@media only screen and (min-width:767px) and (max-width:990px) {
    #btn-save-card {
        padding-left: 4%;
    }
}
@media only screen and (min-width:463px)  and (max-width:767px) {
    #btn-save-card {
        padding-left: 5%;
    }
}
@media only screen and (max-width:463px) {
    #btn-save-card {
        padding-left: 7%;
    }
}
    /*CONFIRMATION*/
    .movilconfirmation {
    display: none;
}

    .hand {
        background: url(../Images/Auth/Confirmation/ABGO.png) no-repeat;
        background-size: contain;
        height: 505px;
        background-position: bottom !important;
        background-attachment: unset !important;
    }

    .handf {
        background: url(../Images/Auth/ABGOMovil.png) no-repeat;
        background-size: contain;
        height: 600px;
        background-position: bottom !important;
        background-attachment: unset !important;
    }

    .bgconfirmation {
        background: #161C2ADB;
    }

    .bgcontruction {
        background: url(../Images/pages/AB-GO_Under-Construction.png) no-repeat;
        background-size: contain;
        height: 200vh;
        background-position: bottom !important;
        background-attachment: unset !important;
    }

    .DivConfirmation {
        width: 100%;
        margin-top:85px;
    }

    .CardConfirmation {
        /*width:500px;*/
        box-shadow: 6px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 24px;
    }

    @media only screen and (max-width:991px) {
        .movilconfirmation {
            display: block;
        }

        .webconfirmation {
            display: none;
        }
    }

@media only screen and (max-width:767px) {
    .DivConfirmation {
        margin-top: 10px;
    }
    .handf {
        height: 400px;
    }

}
    @media only screen and (max-width:500px) {
        .hand {
            height: 400px;
        }
        .DivConfirmation {
            margin-top: 30px;
        }
    }

    @media only screen and (max-width:450px) {
        .hand {
            height: 300px;
        }
        .TitleThanks {
            font-size: 55px;
        }
        .imgticket {
            margin-top: 4px;
        }
        .handf {
            height: 200px;
        }
    }

.ReadArea {
    background-color: white;
    overflow-y: scroll;
    height: 600px;
    resize: none;
    border-radius: 24px;
    padding: 2%;
    text-align: justify;
}
    /*Sin height establecido*/
    .ReadAreaNoH {
        background-color: white;
        overflow-y: hidden;
        overflow-x: hidden;
        height: auto;
        resize: none;
        border-radius: 24px;
        padding: 10px 10px 10px 10px;
    }
    @media only screen and (max-width:750px){
        .ReadArea, .ReadAreaModal {
            font-size: 0.8rem; /*Tamaño de font en terminos*/
        }
        /*.ReadAreaModal{
            width:100%;
           
        }*/
        #readTemnsModal{
            padding:0px
        }
    }
    /*MODAL TERMS IN- SIGN UP*/
    .modalTerms {
        max-width: 70% !important;
    }
    @media (max-width:576px){
        #modalTermins {
           max-width: 100% !important;
        }
    }

    .ReadAreaModal {
        background-color: white;
        overflow-y: scroll;
        height: 300px;
        resize: none;
        border-radius: 24px;
        padding: 10px 10px 10px 10px;
    }

    /*CHECKOUT*/
    .border-checkout {
        border-top: 3px dotted #898989;
        border-bottom: 3px dotted #898989;
    }

    .border-checkout-bottom {
        border-bottom: 3px dotted #898989;
    }

    .divRedeem, .divRedeemDetail {
        color: #17a2b8;
    }

    /*THANKS*/
    .border-top {
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }

    .imgticket {
        background: url('../Images/Email/ABGO-Ticket-order.jpg') no-repeat;
        background-size: cover;
        height: 100%;
        background-position: top !important;
        background-attachment: unset !important;
        border-radius: 24px;
        padding: 10px 10px 10px 10px;
    }

    .TitleThanks {
        font-size: 75px;
        color: white;
        font-weight: 700;
    }

    .MidThanks {
        font-size: 50px;
        color: white;
        font-weight: 400;
    }

    .TxtThanks {
        font-size: 30px;
        color: white;
        font-weight: 500;
    }

    .TxtMinThanks {
        font-size: 18px;
        color: white;
        font-weight: 500;
    }

    .sidemenu_btn {
        display: none;
    }

    @media only screen and (max-width:1024px) {
        .sidemenu_btn {
            display: inline-block;
        }

        .Usernav {
            display: none;
        }

        .profilemenu {
            display: none;
        }
    }

    @media only screen and (min-width:992px){
        .profilemenu {
            display: block;
        }
    }

    /*BG DE SIGNUP Y CHECKOUT*/
.bgsignup {
    background: url(../Images/Auth/SignUp-ABGO.jpg) no-repeat;
    background-position: center !important;
}

    .bgcheckout {
        background: url('../Images/Order/abgo_banner_compressed.jpg') no-repeat;
        background-position:center;
        background-size: cover;
    }

    /*forget pass*/
    .inputab {
        background-color: #ffffff8a !important;
        border-radius: 20px !important;
    }

    /*Form de cash y card*/
#metodoPago, #slctTipoPago {
    /*margin: 0px;*/
    padding: 0px;
}


    /*span de note item*/
.spSpecial {
    display: block;
    margin-left: 4%;
    font-weight: 500;
    font-size: medium;
    color: #848383cc;
    overflow: hidden;
    text-overflow: ellipsis !important;
}

/*Style de ORder And pay*/
.parrafo {
    font-size: 1.3rem;
    line-height: 100%;
    font-style: normal;
    text-decoration: none
}


    .imgSvd {
        height: 160px;
    }

    .headerOap {
        height: 350px;
    }

    .headerText {
        font-size: 3.7rem
    }
.ImGPayAtTable {
    text-align: right;
    top: -28%;
    height: 100%;
    width: 100%;
}
@media only screen and (min-width:1000px) and (max-width:1140px) {
    .headerOap {
       height:250px;
        padding-top: 0px;
        margin-top: 2px;
    }
    #imgOrder{
        height:100%
    }
}
@media only screen and (min-width:1141px) and (max-width:1386px) {
    .headerOap {
       height:275px;
        padding-top: 0px;
        margin-top: 2px;
    }
    #imgOrder{
        height:100%
    }
}
@media only screen and (min-width:1706px) and (max-width:2100px){
    
    #imgOrder{
        height:86%
    }
}
@media only screen and (min-width:2100px) and (max-width:2500px){
    
    #imgOrder{
        height:84%
    }
}
@media only screen and (min-width:910px) and (max-width:1000px) {
    .headerOap {
        height: 230px;
        padding-top: 0px;
    }
    .headerOap h1 {
        margin-top:0px;
        padding-top: 0px;
    }
    .imgSvd {
        height: 115px;
    }

}
@media only screen and (min-width:814px) and (max-width:910px) {
    .headerOap {
        height: 210px;
        padding-top: 0px;
        margin-top: 0px;
    }

        .headerOap .col-7 {
            margin-top: 0px;
            padding-bottom: 0px;
            margin-bottom: 0px
        }

    .imgSvd {
        height: 135px;
    }
    .ImGPayAtTable {
        text-align: right;
        top: -28%;
        height: 90%;
        width: 90%;
    }
}

    @media only screen and (min-width:768px) and (max-width:814px) {
    .headerOap {
        height: 250px;
        padding-top: 0px;
        margin-top: 0px;
        
    }
    .headerOap .col-7{
        margin-top:0px;
        padding-bottom:0px;
        margin-bottom:0px
    }
    .imgSvd {
        height: 135px;
    }
        .headerText{
            font-size:1.9rem;
        }
        .ImGPayAtTable {
            text-align: right;
            top: -28%;
            height: 100%;
            width: 100%;
        }

        #imgOrder {
            display: block
        }

}
    @media screen and (width:768px){
        #imgOrder {
            display: block;
            z-index: 1;
        }
    }

@media  screen and (max-width:768px) {
    .headerOap {
        height: 25%;
    }


    #imgOrder {
       display:none;
       z-index:-1;
    }

    .imgPhoneMenu{
        width:65%;
    }

    .bodyContent {
        text-align: center;
        display: block;
    }
    
    #headerText h1{
        font-size:25%;
    }
}

@media screen and (max-width:275px){
  
    .headerText{
        font-size: 3rem;
    }
}

/*ADD RESTAURANT*/
.imgMascota{
   
    width:350px;
}

.bottom20 {
    margin-bottom:20px;
}

/*INFO CURBSIDE ORDER*/
.headerCo{
    padding:5%;
    height:500px;
}

.imgCurbside {
    transform: rotate(-8deg);
    height: 85%;
    width: 90%;
}

.headerCo .col-7{
    margin-top:1%;
}
.headerText {
    font-size:4.7rem;
}


@media only screen and (min-width:2090px) and (max-width:2100px) {
    .imgCurbside {
        transform: rotate(-8deg);
        height: 80%;
        width: 100%;
    }

    .headerCo {
        padding: 5%;
        height: 385px;
    }

    .headerText {
        font-size: 4.9rem;
    }
   
}
@media only screen and (min-width:2100px) and (max-width:2500px) {
    .imgCurbside {
        transform: rotate(-8deg);
        height: 80%;
        width: 90%;
    }

    .headerCo {
        padding: 5%;
        height: 450px;
    }

    .headerText {
        font-size: 5.8rem;
    }
   
}
@media only screen and (min-width:1600px) and (max-width:1900px) {
    .imgCurbside {
        transform: rotate(-8deg);
        height: 80%;
        width: 100%;
    }
    .headerCo {
        padding: 5%;
        height: 355px;
    }
    .headerText {
        font-size:4.2rem;
    }
}

@media only screen and (max-width:1820px) and (min-width:1600px) {
    .imgCurbside {
        transform: rotate(-8deg);
        height: 85%;
        width: 105%;
    }
    .headerCo {
        padding: 5%;
        height: 350px;
    }
    .headerText {
        font-size:4.2rem;
    }
}
@media only screen and (min-width:1385px) and (max-width:1600px) {
    .imgCurbside {
        transform: rotate(-8deg);
        height: 85%;
        width: 105%;
    }
    .headerCo {
        padding: 5%;
        height: 325px;
    }
    .headerText {
        font-size:4.2rem;
    }
}
@media only screen and (min-width:1240px) and (max-width:1385px) {
    .headerCo {
        height: 290px;
    }
 
    .headerText{
        font-size:50px;
    }
  
}
@media only screen and (min-width:1125px) and (max-width:1240px) {
    .headerCo {
        height: 260px;
    }

    .headerText {
        font-size: 47px;
    }
}

@media only screen and (min-width:1050px) and (max-width:1125px) {
   /* .headerCo {
        height: 350px;
    }
*/
    .headerCo {
        height: 250px;
    }

    .headerText {
        font-size: 43px;
    }
    .imgCurbside {
        transform: rotate(-8deg);
        height: 90%;
        width: 96%;
    }
}
@media only screen and (min-width:970px) and (max-width:1050px) {
    .headerCo {
        height: 250px;
    }

    .headerText {
        font-size: 39px;
    }
    .imgCurbside {
        transform: rotate(-8deg);
        height: 90%;
        width: 96%;
    }
}
@media only screen and (min-width:860px) and (max-width:970px) {
    .headerCo {
        height: 220px;
    }

    .headerText {
        font-size: 32px;
    }

    .imgCurbside {
        width: 96%;
        transform: rotate(-8deg);
    }
}

@media only screen and (min-width:795px) and (max-width:860px) {

    .headerCo {
        height: 198px;
    }

    .headerText {
        font-size: 32px;
    }
    .imgCurbside {
        width: 96%;
    }
}
@media only screen and (min-width:768px) and (max-width:795px) {
 
    .headerCo {
        height: 198px;
    }

    .headerText {
        font-size: 30px;
    }
    /*.imgCurbside {*/
        /*transform: rotate(-8deg);*/
        /*height: 125%;
        width: 145%;
    }*/
    .imgCurbside {
        width: 100%;
    }
}


@media screen and (max-width:768px) {
    .headerCo {
        height: 25%;
    }


    .imgCurbside {
        display:none;
        z-index: -1
    }

    .imgPhoneMenuC {
        width: 65%;
    }
    .headerText {
        font-size: 3rem;
    }
}


/*Caja detalle defs pago Checkout*/
.PayBox {
    margin-left: 35px;
    margin-right: 26px;
}
.cntitem {
    margin-left: 9px;

}
.cntitemColor {
    color: var(--blue-abgo) !important;
    font-weight: 600;
}
.order-item{
    padding-left:0px;
    padding-right:0px;
    
}
.h5extra {
    font-size: 16px;
}

@media screen and (max-width:400px) {
    .PayBox {
        margin-left: 10px;
        margin-right: 10px;
    }
    .detailboxpay{
        padding:0px;
    }
    .cntitem {
        margin-left: 5px;
    }
    /*span de note item*/
    .spSpecial {
        display: block;
        margin-left: 0% !important
    }
   
}

/*Extras Checkout vista movil */
@media (min-width:315px) and (max-width:348px) {
    .priceOrder {
        margin-left: 2px;
        margin-right: 1%;
    }

    .detailboxpay {
        font-size: 1rem;
    }
}
@media (max-width:305px){
 
    /*.detailboxpay {*/
    /*margin-left: 2px;*/
    /*font-size: 0.8rem;
        }*/
    .divExtrasCheck, .priceOrder {
        margin: 0px;
        padding: 0px;
    }
    .detailboxpay {
        font-size: 1rem;
    }
 
}
.priceOrder{
    margin-right:1%;
}


/*SCROLLS BARD*/
/*EXTRAS*/
.scrollable-menu {
    /*height: auto;*/
    max-height: 250px;
    min-height: 75px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: sticky;
    scrollbar-color: var(--scroll-bar-color-abgo);
    scrollbar-width: thin;
}

    #itemsExtras, #eitemsExtras {
        max-height: 125px;
        /* background-color: #eee; */
        padding: 5%;
        margin: 0%;
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
        padding-top: 2%;
        border: 1px solid #ced4da;
    }

#modifiers, #emodifiers {
    padding-right: 0%;
    /*text-align: center;*/
    margin-bottom: 1px;
    padding-left: 0px;
}

.slctExtras {
    color: #fff;
    font-weight: bold;
    font-size: medium;
    margin-top: 0px;
    margin-bottom: 0%;
    background-color: #26313c;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.modalmenu-title {
    margin-bottom:1%;
}

#customerNotes{
    max-height: 100px;
}

#promotionModal .modal-body {
    padding-bottom: 1%;
    padding-top: 1%
}

/*#region Scroll de Menus grupos*/
.scroll-grupsMenu {
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 6px;
    /*Estilos estándar experimentales (Principalmente Firefox)*/
    scrollbar-color: var(--scroll-bar-color-abgo);
    scrollbar-width: thin;
}
    /*Tamaño de la barra */
    .scroll-grupsMenu::-webkit-scrollbar {
        height: 3px;
        width: 75%;
        text-align: center
    }

    .scroll-grupsMenu:hover {
        cursor: pointer;
    }

    .scroll-grupsMenu a {
        display: inline-block;
    }

@media (max-width: 1200px) {
    .scroll-grupsMenuMediumL {
        width: 100%;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 6px;
        /*Estilos estándar experimentales (Principalmente Firefox)*/
        scrollbar-color: var(--scroll-bar-color-abgo);
        scrollbar-width: thin;
    }

        .scroll-grupsMenuMediumL::-webkit-scrollbar {
            height: 3px;
            width: 75%;
            text-align: center
        }

        .scroll-grupsMenuMediumL:hover {
            cursor: pointer;
        }

        .scroll-grupsMenuMediumL a {
            display: inline-block;
        }

    .nav-group-item:hover {
        color: #808080 !important;
        text-decoration: none;
    }
}

@media (max-width: 768px) {
    .scroll-grupsMenuMedium {
        width: 100%;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 6px;
        /*Estilos estándar experimentales (Principalmente Firefox)*/
        scrollbar-color: var(--scroll-bar-color-abgo);
        scrollbar-width: thin;
    }

        .scroll-grupsMenuMedium::-webkit-scrollbar {
            height: 3px;
            width: 75%;
            text-align: center
        }

        .scroll-grupsMenuMedium:hover {
            cursor: pointer;
        }

        .scroll-grupsMenuMedium a {
            display: inline-block;
        }

    .nav-group-item:hover {
        color: #808080 !important;
        text-decoration: none;
    }
}

@media (max-width:500px) {
    .scroll-grupsMenuSmall {
        width: 100%;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 6px;
        /*Estilos estándar experimentales (Principalmente Firefox)*/
        scrollbar-color: var(--scroll-bar-color-abgo);
        scrollbar-width: thin;
    }
        /*Tamaño de la barra */
        .scroll-grupsMenuSmall::-webkit-scrollbar {
            height: 3px;
            width: 75%;
            text-align: center
        }

        .scroll-grupsMenuSmall:hover {
            cursor: pointer;
        }

        .scroll-grupsMenuSmall a {
            display: inline-block;
        }
}
/*#endregion Scroll de Menus grupos*/


/*SCROLL BAR DE ADDRESS*/
.scroll-address {
    height: auto;
    max-height: 225px;
    min-height: 65px;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    display:block;
    /*Estilos estándar experimentales (Principalmente Firefox)*/
    scrollbar-color: var(--scroll-bar-color-abgo);
    scrollbar-width: thin;
    
}

.scroll-address:hover {
    cursor: pointer;
}

#scrollAddress{
    padding:0px;
}

/*FIN DE SCROLLS BAR*/

/*Fonts Sizes Corrections*/
@media (max-width: 750px) {
    #titleCheckout {
        font-size: 168% !important;
    }
   
}
@media (max-width:600px){
    .infoTip {
        font-size: 75% !important;
    }
}

/*Ajustes de padding para contenedor general en vista menor 991px */
@media screen and (max-width:991px) {
    .container-fluid {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }
    .addMargin {
        margin-left: 0%;
        margin-right: 0%;
    }
    
}

@media screen and (min-width:992px) {
    .addMargin {
        margin-left: 12px;
        margin-right: 3px;
    }

}

/*CUSTOMER HELP*/
@media screen and (max-width:550px) {
    .headerCardHelp h2, .headerCardHelp a {
        font-size: 1rem !important;
    }
    .sectionhelp{
        padding-left: 2% !important;
        padding-right: 2% !important;
    }
}

@media (max-width:675px){
    #sectionHelp h2{
        font-size: 1.7rem !important;
    }
}
    .ckthelp{
        padding-left:2% !important;
    }

.headerCardHelp h2, .headerCardHelp a {
    font-size: 2rem !important
}

.contentHelp{
    font-size:medium
}

@media (max-width: 750px) {
    #h3Which, #h3detail, .ckthelps {
        font-size: 1.2rem !important;
    }

    #h2Sorry{
        font-size: 1.5rem
    }
    #headerCardHelp > h2, #headerCardHelp >a {
        font-size: 1.5rem !important;
        padding-left: 0px !important
    }
}

#headerCardHelp > h2 {
    font-size: 2rem ;
}

#h3Which, #h3detail, .ckthelps {
    font-size: 1.5rem;
}

.btn-cancel{
    background:#808080;
    color:#fff;
    padding:10px
}

    .btn-cancel:hover {
        background: var(--blue-abgo);
        color: #fff;
    }

#optionsHelp a {
    margin-top: 1rem;
}


/*BTNS OF TYPE SERVICES*/
.btn-TypeServices {
    color: var(--blue-abgo);
    border: 3px solid;
    background-color: transparent;
    display: inline-block;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 10px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 21px;
}

body {
    overflow: hidden;
    overflow-y: auto;
}

/*FOR FAV STORE*/
.fav-selected {
    color: var(--yellow-abgo) !important;
}

.fav-not-selected {
    color: var(--gray-brand-abgo) !important;
}


/*MODAL FOR MENU ITEMS FULLSCREAM CONFIGURATIONS*/
/*Full screen Modal*/
.fullscreen-modal .modal-dialog {
    margin: 0;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    overflow-y: auto;
}

#modalBodyPromotion{
    max-height: 250px;
    max-height: calc(var(--modal-body-add-height, 250px) - var(--vh, 1vh) * 25);
}

#dialogPromotionModal .modal-content{
    height: 100vh;
    height: calc(var(--vh, 1vh) * 75);
}

#modalBodyAdd, #modalBodyEdit {
    max-height: 250px;
    max-height: calc(var(--modal-body-add-height, 250px) - var(--vh, 1vh) * 10);
}

#dialogModifiersModalNew .modal-content,
#dialogModifiersModalEdit .modal-content {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 90);
}

#modalBodyAdd #newModif, #modalBodyEdit #enewModif {
    max-height: 250px;
    max-height: calc(100% - var(--modifier-title-height, 70px));
}

@media (max-width:600px) {

    #modalBodyAdd, #modalBodyEdit, #modalBodyPromotion {
        max-height: 250px;
        max-height: var(--modal-body-add-height, 250px);
    }

    #dialogModifiersModalNew .modal-content,
    #dialogModifiersModalEdit .modal-content,
    #dialogPromotionModal .modal-content {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }

    .fullscreen-modal {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

        .fullscreen-modal .modal-dialog {
            margin: 0;
            margin-right: auto;
            margin-left: auto;
            min-width: 100%;
            overflow-y: auto;
        }

}

@media (min-width: 768px) {
    .fullscreen-modal .modal-dialog {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .fullscreen-modal .modal-dialog {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    #modalBodyAdd, #modalBodyEdit {
        max-height: 250px;
        max-height: calc(var(--modal-body-add-height, 250px) - var(--vh, 1vh) * 15);
    }

    #dialogModifiersModalNew .modal-content,
    #dialogModifiersModalEdit .modal-content {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 85);
    }


    .fullscreen-modal .modal-dialog {
        width: 1170px;
    }
}

/*Position of modal*/
@media screen and (min-width: 600px) {
    #dialogModifiersModalNew .modal-content,
    #dialogModifiersModalEdit .modal-content,
    #dialogPromotionModal .modal-content{
        border-radius: 0px 0px 24px 24px;
    }
}

@media screen and (max-width: 600px) {
    #dialogModifiersModalNew .modal-content,
    #dialogModifiersModalEdit .modal-content,
    #dialogPromotionModal .modal-content {
        border-radius: 0px;
    }

    #footControls{
        padding-left:0% !important;
    }
}

#headerCardItemEdit .modal-backdrop {
    background-color: #00000054;
}

#headerCardItemEdit .modalimage {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

#dialogModifiersModalNew .modal-header, 
#dialogModifiersModalEdit .modal-header,
#dialogPromotionModal .modal-content{
    margin: 0px;
    padding: 0px;
}

@media screen and (min-width: 575px) {
    #footControls {
        padding-left: 9% !important;
    }
}
    @media screen and (max-width: 440px) {
        #footControls .add_btn {
            height: 37px !important;
            width: 35px !important;
        }
        #footControls {
            padding-top: 5px;
        }
        #equantity, #quantity{
            margin:0px !important;
        }
        #eaddToCart, #addToCart{
            padding:9px !important;
        }
    }

/*hacer transparente el scroll del modal*/
#modifiersModalNew.modal::-webkit-scrollbar, #editModal.modal::-webkit-scrollbar, #promotionModal.modal::-webkit-scrollbar, .modal-content::-webkit-scrollbar {
    width: 0px;
    background-color: rgb(0 0 0 / 0.00);
} 

/*BLOCK DELETE EXTRA*/
.blockDelete{
    color:rgb(128 128 128 / 0.81);
    pointer-events: none;
}

/*DISEABLE CLASS*/
.deseable_element {
    cursor: none;
    pointer-events: none;
    opacity: 0.5;
}

.bottom-position-10 {
    position: absolute;
    bottom: 10px;
}
/*#region MODAL ITEM*/
#dialogModifiersModalEdit .modal-content, #dialogModifiersModalNew .modal-content {
    overflow-x: hidden;
    /*Estilos estándar experimentales (Principalmente Firefox)*/
    scrollbar-color: var(--scroll-bar-color-abgo);
    scrollbar-width: none;
    scroll-behavior: smooth;
}
/*#end0region MODAL ITEM*/

.gogo-loader {
    width: 29%;
    --animate-duration: 5s;
}
@media screen and (max-width: 690px){
    .gogo-loader {
        width: 75% !important;
    }
}

.phone-info-contaniner {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0 15px;
}

.phone-info{
    width: 75%;
}

