@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&family=Source+Sans+Pro:wght@400;600;700&display=swap');
html,body{
    overflow-x: hidden;
}
body{
    font-family: 'Source Sans Pro', sans-serif; 
}
p{
    font-size: 15px;
}
/*Scroll Bar*/
::-webkit-scrollbar {
    width: 6px;
    height: 4px;
  }
  ::-webkit-scrollbar-thumb:horizontal{
    background: #ccc;
    border-radius: 10px;
}
  
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ccc; 
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}
/*End scrollbar*/
.modal-content{
    border-radius: 20px;
}
.yellow-bg-line {
    width: 100%;
    background: #ffcf10;
    height: 100%;
    position: absolute;
    right: -8px;
    top: 8px;
    border-radius: 10px;
}
.v-modal h3{
    color: #F05F23;
}
.v-modal img {
    height: 70px;
    margin-bottom: 10px;
}
.v-modal p {
    color: #161140;
    font-size: calc( (20px /1.5 ) + (((20/3)/19.2) * 1vw));
}
.v-modal .btn{
    width: 100%;
    background: #F1F1F1;
    border: 0;
    color: #AAAAAA;
    font-size: 15px;
    padding: 10px 5px;
}
.v-modal .btn-usenow,.v-modal .btn-collect {
    background: #F05F23;
    color: #fff;
    margin-top: 10px;
}
.v-modal .modal-body {
    padding: 30px;
    z-index: 1;
    background: #fff;
    border-radius: 10px;
}
.account .v-modal .modal-body{
    padding: 30px 30px;
}
.click-cart{
    cursor: pointer;
}
button.btn.btn-notnow {
    width: 30%;
    margin-right: 10px;
}
button.btn.btn-usenow {
    width: 100%;
    margin-top: 0;
}
button.btn.btn-collect {
    width: 65%;
    margin-top: 0;
}
.p-button-group {
    display: flex;
    justify-content: space-between;
}
.modal-backdrop {
    background-color:#161140;
    height: 100%;
}
.modal-backdrop.show{
    opacity: .9;
}
button.close img {
    height: 30px;
}

button.close {
    position: absolute;
    top: -40px;
    right: 5px;
    opacity: 1;
}
.logobar {
    display: flex;
    position: fixed;
    width: 100%;
    height: 70px;
    background: #fff;
    justify-content: center;
    align-items: center;
    -webkit-tap-highlight-color: rgba(80, 55, 55, 0);
    z-index: 99;
    box-shadow: 2px 1px 5px #cfcfcf;
}
#nav-container {
    position: fixed;
    height: 100%;
    width: 100%;
    pointer-events: none;
    z-index: 999;
}
#nav-container .bg {
    position: absolute;   
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: .3s;
    background: #161140;
}
#nav-container:focus-within .bg {
    visibility: visible;
    opacity: .9;
}
#nav-container *, .filter-box * {
    visibility: visible;
}

.burgur-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    border-radius: 0;
    height: 70px;
    width: 24px;
    cursor: pointer;
    pointer-events: auto;
    margin-left: 25px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.icon-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: #000000;
    transition: .3s;
}
.icon-bar + .icon-bar {
    margin-top: 6px;
}
#nav-container:focus-within .burgur-menu {
    pointer-events: none;
    right: 20px;
    float: right;
}
#nav-container:focus-within .burgur-menu .icon-bar{
    background: #fff;
}
#nav-container:focus-within .icon-bar:nth-of-type(1) {
    transform: translate3d(0,8px,0) rotate(45deg);
}
#nav-container:focus-within .icon-bar:nth-of-type(2) {
    opacity: 0;
}
#nav-container:focus-within .icon-bar:nth-of-type(3) {
    transform: translate3d(0,-8px,0) rotate(-45deg);
}  
#nav-content {
    width: 90%;
    max-width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #fff;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transform: translateX(-100%);
    transition: transform .3s;
    will-change: transform;
    contain: paint;
}
#nav-content ul {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
}
#nav-content li a {
    padding: 10px 20px;
    display: block;
    text-transform: capitalize;
    transition: color .1s;
    margin-bottom: 20px;
    border-radius: 5px;
}
#nav-content li a:hover {
    color: #fff;
    text-decoration: none;
}

#nav-content li:not(.bottom-text) + .bottom-text {
    margin-top: auto;
}
#nav-container:focus-within #nav-content {
    transform: none;
}
.nav-link{
    padding: 0.4rem 1rem;
}
.pt-100{
    padding-top: 100px;
}
.slick-next:before{
    background: url(../../argon/img/asap/general/right-arrow.svg) no-repeat;
    background-size: cover;
    background-position: center;
    color: transparent;
}
.slick-prev:before{
    background: url(../../argon/img/asap/general/left-arrow.svg) no-repeat;
    background-size: cover;
    background-position: center;
    color: transparent;
}
.slick-next:before, .slick-prev:before{
    font-size: 30px;
    opacity: 1;
}
.slick-next, .slick-prev{
    width: 40px;
    height: 40px;
}
.slick-slide {
    padding:5px;
}
#home-slider{
    z-index: 1;
}
#reservation-slider .banner-item,#promotion-banner .banner-item ,#landing-banner .banner-item,#order-slider .banner-item,#home-slider .banner-item{  
    background-size: cover!important;
    background-position: center!important;
    border-radius: 10px;
    padding-bottom: 36%;
    transform: scale(0.92);
    transition: 2s;
}
#order-inner-slider .banner-item,#restaurant-slider .banner-item{
    background-size: cover!important;
    background-position: center!important;
    border-radius: 10px;
    padding-bottom: 36%;
}
#order-inner-slider .slick-next, #restaurant-slider .slick-next{
    right: -45px;
}
#order-inner-slider .slick-prev, #restaurant-slider .slick-prev{
    left: -45px;
}
#promotion-banner .items.slick-slide.slick-center .banner-item,#landing-banner .items.slick-slide.slick-center .banner-item,#reservation-slider .items.slick-slide.slick-center .banner-item,#order-slider .items.slick-slide.slick-center .banner-item,#home-slider .items.slick-slide.slick-center .banner-item,#order-inner-slider .items.slick-slide.slick-center .banner-item,#restaurant-slider .items.slick-slide.slick-center .banner-item{
    transform: scale(1);
}
#restaurant-slider .items,#order-inner-slider .items{
    border-radius: 10px;
    border-radius: 0;
}
#restaurant-slider{
    padding: 30px 0px 0;
}
.merchangt-icon{
    height: 36px;
    border: 1px solid #161140;
    padding: 3px;
    border-radius: 4px;
    margin-right: 10px;
}
.restaurant-title h4{
    margin-bottom: 0;
}
#order-inner .info-text{    
    color: #F05F23;
    font-size: 13px;
    background: rgb(240 95 35 / 10%);
    border-radius: 7px;
    padding: 10px 20px;
    margin: 10px auto;
}
.info-text{
    color: #96C93E;
    font-size: 13px;
    background: rgb(150 201 62 / 10%);
    border-radius: 7px;
    padding: 10px 20px;
    margin: 10px auto;
}
.info-text img {
    float: left;
    margin: 2px 5px 0 0;
}
.est p{
    font-size: 12px;
    color: #161140;
}
.est span{
    font-size: 16px;
    color: #FFCF10;
    text-transform: uppercase;
}
#dropdownButton::after{
    position: absolute;
    top: 18px;
    right: 10px;
}
.date-box {
    padding: 8px 5px;
    width: 18%;
    border: 2px solid #96C93E;
    margin-right: 1%;
    margin-left: 1%;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}
p.weekday,p.date,p.month {
    text-transform: uppercase;
    margin-bottom: 0;
    font-size: 12px;
}
p.date {
    color: #161140;
    font-size: 24px;
    font-weight: bold;
    margin: -5px 0;
}
span.re_more_dates,.back-to {
    font-size: 13px;
    position: absolute;
    right: 0px;
    text-decoration: underline;
    top: -30px;
    cursor: pointer;
}
.second-form img {
    margin-right: 8px;
}
.second-form span {
    font-weight: bold;
}
.first-form label,#re-info-form label {
    font-size: 14px;
    color: #161140;
    font-weight: bold;
}
.account-menu .dropdown-menu.show{
    top: 12px!important;
    left: -25px!important;
}
.account-menu .dropdown-item,.dropdown-item{
    font-size: 14px;
}
.re-detail-info{
    border: 3px solid #96C93E;
    border-radius: 10px;
    padding: 10px 10px 0;
    margin-top: 20px;
    margin-bottom: 20px;
}
.first-form .form-control{
    color: #161140;
}
.first-form , #re-info-form{
    border: 3px solid #96C93E;
    border-radius: 10px;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.re-detail-info p {
    font-size: 14px;
}
.btn{
    border-radius: 8px;
}
.btn-next {
    background: #96C93E;
    border: #96C93E;
    font-size: 15px;
    padding: 8px 30px;
}
.btn-continue,.btn-back-re{
    background: #96C93E;
    border: #96C93E;
    font-size: 15px;
    padding: 8px 30px;
}
.btn-login{
    background: #33B1BC;
    border: #33B1BC;
    font-size: 15px;
    padding: 10px 20px;
    width: 150px;
}
label.error {
    color: #f44336 !important;
    border: 0!important;
    margin-top: 6px;
}
.right-menu {
    display: flex;
    position: fixed;   
    height: 70px;
    right: 20px;
    justify-content: right;
    z-index: 99;
}
.right-menu img {
    width: 40px;
    margin-left: 7px;
}
section.order-bg {
    background-color: #F05F23;
    padding: 70px 0px 0;
}
.order-bg{
    background: url('../../argon/img/asap/general/bg-curve-web.png') no-repeat;
    background-size: 100%;
    background-position: center bottom;
}
.asap-login{
    background: url('../../argon/img/asap/login/curve.png') no-repeat;
    background-size: 100%;
    background-position: center bottom;   
    padding: 70px 0px 40px;
    background-color: #33B1BC;
}
.asap-profile{
    background: url('../../argon/img/asap/login/curve.png') no-repeat;
    background-size: 100%;
    background-position: center bottom;   
    padding: 140px 0px 140px;
    background-color: #33B1BC;
}
.asap-login-form label,.asap-complete-account-form label{
    font-weight: bold;
    color: #161140;
}
.asap-login-form a{
    font-size: 13px;
    color: #33B1BC;
}
.asap-login-form span{
    font-size: 13px;
}
section.reservation-bg {
    background-color: #96C93E;
    padding: 70px 0px 0;
}
.reservation-bg{
    background: url('../../argon/img/asap/reservation/bg.png') no-repeat;
    background-size: 100%;
    background-position: center bottom;
}
.reservation-bg h3 ,.promotion-bg h3 , .asap-login h3,.landing-bg h3,.order-bg h3{
    color: #fff;
    font-weight: bold;
    padding: 40px 0px 0;
}
section.promotion-bg {
    background-color: #682BAF;
    padding: 70px 0px 0;
}
section.order-inner-bg,
section.restaurant-inner-bg {
    background-color: #fdefe9;
    padding: 110px 0px 0;
    background-image: url('../../argon/img/asap/general/bg-curve-web.png');
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
}
section.restaurant-inner-bg {
    background-image: url('../../argon/img/asap/reservation/bg.png');
    background-color: #f3f9eb;
    position: relative;
}
section.restaurant-inner-coupon {
    background-color: #e9f7f8;
    padding-bottom: 220px;
    position: relative;
}
section.restaurant-inner-coupon h3 {
    margin-top: 4rem;
}
section.restaurant-inner-coupon .promos .items,
section.restaurant-inner-coupon .promos .items img {
    background-color: #fff;
}
section.reserve-section {
    margin-top: -160px;
}
section.reserve-section .first-form {
    background-color: #fff;
    border: 5px solid #96C93E;
    padding: 30px;
    -webkit-box-shadow: 8px 8px 0px 0px #161140;
    box-shadow: 8px 8px 0px 0px #161140;
}
section.reserve-section .date-box {
    border: 2px solid #ddd;
    transition: all 0.2s;
}
section.reserve-section .date-box:hover,
section.reserve-section .date-box:focus,
section.reserve-section .date-box:active {
    border: 2px solid #96C93E;
}
section.reserve-section .date-box:first-child {
    margin-left: 0;
}
section.reserve-section .date-box:last-child {
    margin-right: 0;
}
section.reserve-section .calendar-container {
    justify-content: space-between;
}
.btn-select-seat {
    background-color: #fff;
    border: 1px solid #96C93E;
    color: #161140;
    font-size: 15px;
}
.btn-select-seat:hover {
    background-color: #96C93E !important;
    border-color: #96C93E !important;
}
#selected_seat {
    margin-left: 10px;
    font-size: 14px;
}
section.restaurant-inner-gallery {
    background-image: url('../../argon/img/asap/reservation-inner/blue-curve.jpg');
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
}
section.landing-bg {
    background-color: #ffcf10;
    padding: 70px 0px 0;
}
.promotion-bg,.landing-bg{
    background: url('../../argon/img/asap/general/bg-curve-web.png') no-repeat;
    background-size: 100%;
    background-position: center bottom;
}
#ftab .nav-tabs{
    justify-content: space-between;
    border-bottom: 0;
    margin-bottom: 10px;
}
#ftab {
    background: #fff;
    padding: 12px;
    z-index: 1;
}
#tabsContent .form-control{
    font-size: 12px;
    padding: 0 30px;
}
.gj-datepicker-bootstrap [role=right-icon] button .gj-icon, .gj-datepicker-bootstrap [role=right-icon] button .material-icons{
    top: 4px!important;
}
.input-group:not(.has-validation)>.form-control:not(:last-child){
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.bootstrap-datetimepicker-widget {
	width: 100% !important;
	max-width: none !important;
} 
.nav-tabs .nav-link{
    background: #F1F1F1;
    color: #AAAAAA;
    font-size: calc( (16px /1.5 ) + (((16/3)/19.2) * 1vw));
}
.nav-tabs .nav-link.active {
    background: #161140;
    color: #fff;
    border-radius: 5px;
    border-color: #161140;
}
#ftab li.nav-item {
    width: 49%;
    text-align: center;
}
.slick-dots li.slick-active button:before{
    content: ''!important;
    background: #ffcf10;
    height: 6px;
    border-radius: 5px;
    top: 6px;
    opacity: 1;
}
.slick-dots li{
    margin: 0;
}
#promotion-slider .items {  
    background-size: cover!important;
    margin-right: 10px;
    background-position: center!important;
    border-radius: 10px;
    padding-bottom: 23%;
}
 #recommend-slider .items{
    background-size: cover!important;
    background-position: center!important;  
    padding-bottom: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
}
.order-inner #recommend-slider .items,.dishes .items{
    background-size: cover!important;
    background-position: center!important;
    width: 100px;
    height: 100px;
    float: right;
    border-radius: 8px;
}
.order-inner .item-box .info{
    padding:10px;
    width: 50%;
}
.dishes{
    margin-bottom: 20px;
}
#order-recommend-slider .items{
    background-size: cover!important;
    background-position: center!important;
    border-radius: 10px;
    width: 100px;
    height: 100px;
    float: right;
}
#recommend-slider .item-box{
    padding: 0 15px 0 15px;
    position: relative;
}
.order-inner #recommend-slider .item-box{
    padding: 0 10px 0 10px;
    position: relative;
}
#order-recommend-slider .item-box{
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    margin: 0 12px;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    cursor: pointer;
}
#order-recommend-slider img, .dishes img {
    position: absolute;
    bottom: 0;
    right: 0;
}
.dishes .item-box {
    width: 23%;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 1% 1% 2%;
    border-radius: 10px;
}
#view-cart {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 1;
    background: #fff;
}
#view-cart span {
    font-size: 13px;
    padding: 3px 10px;
    background: #fff;
    color: #000;
    border-radius: 6px;
    font-weight: bold;
}
#view-cart button {
    background: #F05F23;
    border-color: #F05F23;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    font-weight: bold;
}
.btn.btn-purple{
    background: #682baf;
    border: #682baf;
    font-size: 15px;
    padding: 10px 30px;
    border-radius: 8px;
    font-weight: 600;
    color: #fff;
}
.btn.btn-purple:hover {
    background: #f05f23;
    border: #f05f23;
}
.btn-primary.focus, .btn-primary:focus{
    box-shadow: none;
}
.btn-primary:hover {
    color: #fff;
    background-color: #f05f23;
    border-color: #f05f23;
}
a:hover{
    text-decoration: none;
}
h2 {
    font-size: calc( (40px /1.5 ) + (((40/3)/19.2) * 1vw));
}
h3{
    font-size: calc( (32px /1.5 ) + (((32/3)/19.2) * 1vw));
    font-weight: bold;
}
h4 {
    font-size: calc( (26px /1.5 ) + (((26/3)/19.2) * 1vw));
    color: #161140;
    font-weight: bold;
}
label{
    font-size: 14px;
}
.promo{
    position: relative;
}
.view-all {
    font-size: calc( (16px /1.5 ) + (((16/3)/19.2) * 1vw));
    color: #682BAF;
    position: absolute;
    right: 20px;
    top: 25px;
    text-decoration: underline;
}
.item-box h4,.restaurant-box h4 {
    font-size: calc( (20px /1.5 ) + (((20/3)/19.2) * 1vw));
    font-weight: bold;
    transition: all 0.2s;
}
.item-box p, .restaurant-box p{
    font-size: calc( (14px /1.5 ) + (((14/3)/19.2) * 1vw));
    margin: -5px 0px;
    color: #161140;
}
.item-box span,.restaurant-box span{
    font-size: calc( (14px /1.5 ) + (((14/3)/19.2) * 1vw));
    color: #AAAAAA;
}
.item-box .info {
    padding: 0px 10px 0px 0;
}
.img-box {
    background-size: cover!important;
    padding-bottom: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 3px solid #fff;
    transition: all 0.2s;
}
.restaurant-box .star{
    margin-top: -6px;
}
.time-sticker {
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 13px;
    padding: 4px;
    text-align: center;
    line-height: 14px;
    text-transform: uppercase;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
}
.top-slide-menu {
    padding: 40px 25px;
}
.menu-wave{
    margin-top: -55px;
}
.top-slide-menu h4{
    color: #fff;
    margin-top: 30px;
    text-transform: capitalize;
}
.top-slide-menu p{
    color: #fff;
}
.menu-order{
    background: #F05F23;
    color: #fff;
    font-size: 16px;
}
.menu-reservation{    
    background: #96C93E;
    color: #fff;
    font-size: 16px;
}
.menu-promotion{    
    background: #682BAF;
    color: #fff;
    font-size: 16px;
}
.side-menu{
    list-style: none;
    padding: 10px;
}
.side-menu img{
    margin-right: 10px;
}
.btn-apply-order:hover{
    color: #fff;
}
.side-cart{
    width: 400px;
    max-width: 100%;
    position: fixed;
    top: 70px;
    right: 0;
    height: 100%;
    background: #fff;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transform: translateX(100%);
    transition: transform .3s;
    will-change: transform;
    contain: paint;
    color: #161140;
    z-index: 99;
    padding: 20px 30px 35px;
}
.filter-container{
    width: 100%;
    max-width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background: #fff;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transform: translateX(-100%);
    transition: transform .3s;
    will-change: transform;
    contain: paint;
    color: #161140;
    z-index: 999;
    padding: 20px 30px 0;
}
.btn-filter:hover{
    color: #F05F23;
}
.btn-apply-filter:hover{
    color: #fff;
}
.filter-box h3{
    font-size: 22px;
}
.filter-box h4{
    font-size: 15px;
    font-weight: bold;
}
.filter-box label{
    font-size: 12px;
}
.close-filter {
    position: fixed;
    right: 20px;
    top: 20px;
    cursor: pointer;
}
hr{
    border-top: 1px solid #e0e0e0;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #33b1bc;
    border-color: #33b1bc;
}
.btn-apply-filter{
    color: #fff;
    background: #F05F23;
    text-align: center;
    font-size: 14px;
    width: 90%;
    padding: 8px 10px;
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    margin: auto;
    font-weight: bold;
}
.btn-apply-order{
    color: #fff;
    background: #F05F23;
    text-align: center;
    font-size: 14px;
    width: 100%;
    padding: 8px 10px;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-weight: bold;
}
.order-now-container {
    position: fixed;
    width: 400px;
    right: 0;
    padding: 12px 14px;
    background: #fff;
    bottom: 0px;
    z-index: 99;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transform: translateX(100%);
    transition: transform .3s;
    will-change: transform;
}
.side-cart{
    overflow-y: scroll;
    height: 86vh;
}
.promo1 .slick-list{
    padding: 50px 0px 20px;
}
.promo1 .items{
    margin: 0px 5px;
    border-radius: 5px;
    padding: 0px 15px;
    height: 12vh;
}
.promo1 .items img {    
    height: 70px;
    margin: -42px auto 0;
}
.promos .slick-prev{
    left: -40px;
}
.promos .slick-next{
    right: -40px;
}
.member-discounts .items img{
    height: 30px;
    margin: auto;
    margin-bottom: 20px;
}
.promos .items img{
    margin: auto;
    margin-bottom: 20px;
    border: 2px solid #161140;
    padding: 8px;
    height: 80px;
    border-radius: 8px;
    margin-top: -55px;
}
.member-discounts .items{
    margin: 0px 5px;
    border-radius: 10px;
    padding: 15px 5px;
    border: 2px dashed #ddd;
}
.promos .items{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin: 0px 5px;
    border-radius: 10px;
    padding: 15px 5px;
    border: 2px dashed #ddd;
}
}
.promos,.member-discounts{
    padding: 5px 0px 20px;
}
.promos span, .member-discounts span{
    color: #F05F23;
    font-size: calc( (18px /1.5 ) + (((19/3)/19.2) * 1vw));
    display: block;
    margin: -12px auto 5px;
    text-align: center;
    font-weight: bold;
}
.promos small, .member-discounts small{
    color: #AAAAAA;
    font-size: calc( (14px /1.5 ) + (((14/3)/19.2) * 1vw));
    display: block;
    margin: auto;
    text-align: center;
}
.promos .btn, .member-discounts .btn{
    background: #F05F23;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    margin: 6px auto 0;
    display: block;
    width: 96%;
    padding: 5px 10px;
}
.promos .items p{
    font-size: calc( (16px /1.5 ) + (((16/3)/19.2) * 1vw));
    color: #161140;
    font-weight: bold;
    line-height: 1.1;
    text-align: center;
    flex: 1;
}
.member-discounts .items p{
    font-size: calc( (16px /1.5 ) + (((16/3)/19.2) * 1vw));
    color: #161140;
    font-weight: bold;
    line-height: 1.1;
    text-align: center;
    flex: 1;
}
.promo1 .items p{
    font-size: calc( (20px /1.5 ) + (((20/3)/19.2) * 1vw));
    color: #161140;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    margin-top: 20px;
}
.promo1 .item1{
    background: rgb(104 43 175 / 10%);
}
.promo1 .item2{
    background: rgb(51 177 188 / 10%);
}
.promo1 .item3{
    background: rgb(255 207 16 / 10%);
}
.promo1 .item4{
    background: rgb(150 201 62 / 10%);
}
.row.asap-vouchers {
    padding: 5px 15px 0px;
}
.member-discounts{
    box-shadow: none!important;
    display: flex;
    padding-top: 50px;
    flex-wrap: wrap;
    justify-content: center;
}
.promos .slick-list{
    padding-top: 50px;
    display: flex;
}
.member-discounts .items {
    max-width: 23%;
    margin:1% 1% 6% 1%;
    width: 25%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.member-discounts .items img {
    display: block;
    border: 2px solid #161140;
    padding: 8px;
    height: 80px;
    width: 80px;
    border-radius: 8px;
    margin-top: -55px;
}
.merchant_img_container{   
    height: 80px;
    width: 80px;
    border-radius: 8px;
    margin: -55px auto 15px;
    display: block;
    border: 2px solid #161140;
    background-color: #fff!important;
}
.merchant_img {
    background-size: 100%!important;
    background-position: center!important;
    background-color: #fff!important;
    height: 100%;
    border-radius: 5px;
}
.transac-table tr:nth-child(odd),.reward-table tr:nth-child(odd){
    background: #f1f1f1;
}
.table{
    color:#161140;
    display: inline-table;
}
.table td {
    font-size: 14px;
}
.table thead th{
    font-size: 14px;
    font-weight: normal;
    padding: 0.3rem 0.75rem;
}
.fb-button{
    width: 180px;
    cursor: pointer;
}
img.arr-icon {
    position: absolute;
    right: -10px;
    top: 41%;
}
img.social-icon{
    cursor: pointer;
}
.vouchers {
    border-radius: 10px;
    padding: 0;
    border: 2px dashed #ddd;
    margin-right: 10px;
    margin-left: 10px;
    max-width: 46%;
}
.asap-vouchers-mobile .vouchers {
    padding: 10px;
    margin: 0;
    max-width: none;
    border: none;
}
.voucher-content {
    border-radius: 10px;
    border: 2px dashed #ddd;
}
.voucher-img {
    padding-bottom: 100%;
    background-size: 100%!important;
    background-position: center!important;
    border-radius: 10px;
}
.voucher-info {
    text-align: center;
    padding: 12px 10px;
}
.member-vouchers .voucher-info span{
    font-size: calc( (25px /1.5 ) + (((25/3)/19.2) * 1vw));
}
.voucher-info div.merchant_name{
    color: #33B1BC;
    font-size: calc( (15px /1.5 ) + (((15/3)/19.2) * 1vw));
    font-weight: bold;
}
.voucher-info div.min_spend{
    color: #33B1BC;
    font-size: calc( (15px /1.5 ) + (((15/3)/19.2) * 1vw));
}
.voucher-info span {
    color: #33B1BC;
    font-size: calc( (30px /1.5 ) + (((30/3)/19.2) * 1vw));
    font-weight: bold;
}
.voucher-info small {
    color: #AAAAAA;
    font-size: calc( (14px /1.5 ) + (((14/3)/19.2) * 1vw));
    display: block;
    margin: auto;
    text-align: center;
}
.voucher-info .btn{
    background: #33B1BC;
    color: #fff;
    font-size: 12px;
    margin: 0 auto 6px;
    display: block;
    width: 100%;
    padding: 5px 10px;
    border-radius: 8px;
}
.voucher-list{
    background-color: #F1F1F1;
    padding: 20px 20px;
    overflow-y: scroll;
    border-radius: 10px;
    height: 300px;
    text-align: center;
    width: 100%;
    margin-left: 0px;
}
.voucher-list img{
    height: 35px;
    border-radius: 5px;
    border: 1px solid #161140;
    padding: 3px;
    position: relative;
    top: -20px;
    margin-bottom: -14px;
}
.voucher-list p{
    font-size: calc( (16px /1.5 ) + (((16/3)/19.2) * 1vw));
}
.voucher-list div {
    padding: 4px 5px 10px;
    background: #fff;
    max-width: 31.33%;
    margin: 3% 1%;
    border-radius: 10px;
}
.side-cart .col-12{
    background-color: #F1F1F1;
    font-size: 14px;
    font-weight: bold;
    border-radius: 10px;
}
.pro-bar {
    background-color: #F05F23;
    width: 100%;
    height: 8px;
    display: block;
    margin: 5px 0 8px;
    border-radius: 10px;
}
#fulfilment-tab li.nav-item {
    width: 48%;
    margin-right: 1%;
    margin-left: 1%;
    font-size: 14px;
    font-weight: bold;
}
#fulfilment-tab li a {
    border-radius: 8px;
}
.edit-icon {
    position: absolute;
    right: 10px;
    top: 2px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #161140;    
}
.nav-pills .nav-link {
    color: #AAAAAA;
    background: #f1f1f1;
}
.cart-p img{
    height: 70px;
    border-radius: 8px;
}
.delete-icon{
    height: auto!important;
}
.cart-p-info{
    width: 60%;
}
label#datepicker-error {
    width: 100%;
    position: relative;
    bottom: 0px;
}
.gj-datepicker [role=right-icon]{
    position: absolute;
    right: 0;
    border: 0;
    display: block;
    border-radius: 10px;
}
.gj-datepicker-bootstrap [role=right-icon] button{
    border:0!important;
}

.footer {
    background: #161140;
    text-align: center;
    color: #fff;
    font-size: 14px;
    position: relative;
    padding: 0 0 40px;
}
.footer .grd-line{
    bottom: -20px;
}
.flex-1 {
    flex: 1 1 0%;
}
.footer .flex-1{
    text-align: left;
}
.elipfooter{
    position: absolute;
    width: 42px;
    right: -5px;
    transform: rotate(180deg);
    top: -40px;
}
.copyright{
    font-size: 12px;
}
.footer h4{
    color: #FFCF10;
}
.footer ul {
    list-style-type: none;
    padding: 10px 0px;
    display: inline-flex;
}
.footer ul li{
    margin-bottom: 10px;
    margin-right: 15px;
}
.footer img {
    margin: 0 5px 20px;
}
.elip{
    position: absolute;
    top: 70px;
    right: 0;
    width: 60px;
}
.fourOfour{
    background: url('../../argon/img/asap/404/ellipse2.png') no-repeat;
    background-size: contain;
    background-position: center bottom;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.elip1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
}   
.elip2 {
    width: 100px;
    position: absolute;
    left: 0;
}
.elip3 {
    position: absolute;
    bottom: 0;
    right: 15%;
    width: 80px;
}
.group2{
    position: absolute;
    left: 0;
    width: 200px;
}
.group1{
    position: absolute;
    right: 0;
    width: 200px;
}
.dot1 {
    position: absolute;
    right: 10px;
    top: 30%;
    width: 25px;
}
.dot2 {
    width: 25px;
    position: absolute;
    left: 10px;
    bottom: 10%;
}
.dot3 {
    width: 25px;
    position: absolute;
    left: 10px;
    top: 10%;
}
.dot4 {       
    position: absolute;
    right: 14%;
    top: 2%;
    width: 60px;
}
.newsletter input{
    width: 70%;
}
.newsletter .form-control{
    border-radius: 8px;
}
.btn-asap {
    background: #FFCF10;
    font-size: 13px;
    font-weight: bold;
    border-radius: 8px;
}
.form-control{
    color: #161140;
    font-size: 14px;    
    height: calc(2em + 0.75rem + 2px);
    border: 1px solid #ddd;
    border-radius: 10px;
}
input#checkpw,input#confirm-checkpw,input#re-checkpw,input#re-confirm-checkpw,input#pw-checkpw,input#pw-confirm-checkpw{
    width: 42px!important;
    position: absolute;
    right: 0;
    border-color: #c4c4c4;
    z-index: 1;
    opacity:0;
    cursor: pointer;
    height: 40px;
    top: 33px;
    cursor:pointer;
}
#register-form .d-flex div, #complete-account-form .d-flex div{
    width: 49%;
}
.eye-icon{
    position: absolute;
    right: 10px;
    top: 48px;
}
.newsletter .form-control{
    border: 0;
}
.btn-addtocart{
    background: #F05F23!important;
    color: #fff!important;
    width: 80%!important;
}
.p-gallery {
    width: 100%;
    padding-bottom: 100%;  
    background-position: center!important;
    background-size: 100%!important;
    border-radius: 10px;
}
.p-detail {
    padding: 20px 0px;
}
.btn-filter{
    display: flex;
    align-items: center;
    margin-right: 5px;
    background: rgb(240 95 35 / 10%);
    color: #F05F23;
    font-size: calc( (16px /1.5 ) + (((16/3)/19.2) * 1vw));
    padding: 10px 20px;
    font-weight: bold;
    justify-content: space-between;
}
#category-filter {
    padding: 10px 0px 0px;
}
.post-head span {
    color: #AAAAAA;
    font-size: 13px;
}
.post-section p , .like-section span{
    font-size: 13px;
}
.post-section hr{
    width: 90%;
}
.post-profile {
    width: 13%;
}
.post-comment {
    width: 87%;
}
hr.break {
    border-top: 4px solid #F1F1F1;
}
hr.gap{
    margin: 60px 0px 30px;
}
.myaccount{
    padding-bottom: 80px;
}
.myaccount p{
    font-size: 14px;
}
.myaccount .d-flex div{
    width: 49%;
}
button.btn-grey{
    background: #e9ecef;
    border: #e9ecef;
    color: #161140;
    font-size: 15px;
    padding: 10px 30px;
    border-radius: 8px;
    font-weight: 600;
}
button.btn-account{
    background: #33b1bc;
    border: #33b1bc;
    font-size: 15px;
    padding: 10px 30px;
    border-radius: 8px;
    font-weight: 600;
}
.asap-forms{
    position: relative;
}
.asap-forms label{
    font-weight: bold;
    color: #161140;
}
.asap-forms h3 {
    color: #161140;
}
.myaccount .asap-forms .row{
    position: relative;
    background: #fff;
    padding:20px 0 0;
    border-radius:10px;
    box-shadow: 0px 0px 6px #cbcbcb;
}
.myaccount .tab-pane {
    padding:0px 20px 20px 5px;
}
.myaccount ul.nav{
    background: #f6f3fa;
    height: 100%;
    border-radius: 10px;
    padding: 20px 20px;
}
.myaccount .asap-forms{
    margin-top: -150px;
}
.normal-icon{
    display: block;
}
.active-icon{
    display: none;
}
.myaccount .nav li.nav-item a.nav-link.active img.active-icon{
    display: block;
}
.myaccount .nav li.nav-item a.nav-link.active img.normal-icon {
    display: none;
}
.myaccount .nav li.nav-item a{
    background: #fff;
    margin-bottom: 15px;
    text-align: center;
    border-radius: 8px;
    color: #161140;
    padding: 18px 10px;
    position: relative;
    font-size: 14px;
    font-weight: 600;
}
.myaccount .nav li.nav-item a.nav-link.active{
    background: #682baf;
    color: #fff;
}
hr.purple-line{
    border-top: 2px dotted #682baf;
}
.re-filter {
    padding: 10px 0px 0px;
}
.reservation .re-filter {
    padding: 30px 0px;
}
.re-filter .dropdown-menu{
    font-size: 12px;
}
.btn-select{
    background: #F1F1F1;
    font-size: 12px;
    color: #161140;
    padding: 10px 20px;
    margin-right: 5px;
    font-weight: bold;
    border-radius: 8px;
}
.filter-search{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
#search-filter input.form-control,
#search-filter2 input.form-control {
    height: 48px;
    font-size: 14px;
    padding-right: 35px;
}
button.btn.btn-location {
    background: #f1f1f1;
    color: #161140;
    font-weight: bold;
    font-size: 15px;
    width: 16%;
    padding: 12px 5px;
    border-radius: 8px;
}
button.btn.btn-location:hover, button.btn.btn-location:active,button.btn.btn-location:focus{
    background: #682BAF;
    color: #fff;
    outline: 0;
    box-shadow: none;
}
.promotions-by-area .tab {
    display: flex;
    justify-content: center;
}
.promotions-by-area .nav-tabs {
    border-bottom: none;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.promotions-by-area .nav-tabs::-webkit-scrollbar {
    display: none;
    /* for Chrome, Safari, and Opera */
  }
.promotions-by-area .nav-tabs .nav-link {
    background: #f1f1f1;
    color: #161140;
    font-weight: bold;
    font-size: 15px;
    padding: 12px 5px;
    border-radius: 8px;
    min-width: 120px;
    text-align: center;
    margin: 0px 5px 5px;
}
.promotions-by-area .nav-tabs .nav-link.active,
.promotions-by-area .nav-tabs .nav-link:hover {
    background: #682BAF;
    color: #fff;
    outline: 0;
    box-shadow: none;
}
#search-filter,
#search-filter2 {
    width: 30%;
}
.location-filter {
    padding: 0px 10px;
    width: 70%;
}
.top-slide-menu{
    background: url('../../argon/img/asap/general/img.png') no-repeat;
    background-size: cover;
}
.value-button {
    display: inline-block;
    border: 1px solid #ddd;
    margin: 2px;
    width: 36px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    padding: 2px 0;
    background: #fff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 10px;
    font-size: 18px;
}
input#number {
    text-align: center;
    border: none;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 2px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}
#productModal button.close svg{
    fill: #fff;
    top: 12px;
    position: relative;
    z-index: 11;
    right: 0;
}
#asapvoucherModal button.close svg{
    fill: #fff;
    top:5px;
    position: relative;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.value-button:hover {
    cursor: pointer;
}

form #decrease {
    margin-right: -4px;
    border-radius: 8px 0 0 8px;
}

form #increase {
    margin-left: -4px;
    border-radius: 0 8px 8px 0;
}
.cart-p-price{
    right: 0;
    bottom:0;
}
.quantity {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.gj-datepicker.gj-datepicker-bootstrap.gj-unselectable.input-group {
    width: 100%!important;
}
.link-container {
    background: #F05F23;
    border-radius: 10px;
    color: #fff;
    padding: 10px;
    width: 32.33%;
}
.link-container p{
    color: #fff;    
}
img.curve-icon {
    position: absolute;
    bottom: 0;
    right:0;
}
img.order-icon {
    position: absolute;
    right: 20px;
}
.live-video iframe{
    width: 100%;
}
#register-form .gj-datepicker{
    display: block!important;
}
input#datepicker{
    width: 100%;
}
#register-form .gj-datepicker [role=right-icon] {
    position: absolute;
    top: 3px;
}
img.circle-blue {
    width: 160px;
    position: absolute;
    left: -80px;
    top: -2%;
}
img.dotts {
    position: absolute;
    right: 6px;
    top: 12%;
    width: 7px;
}
img.circle-blue-2{
    position: absolute;
    top: 50%;
}
.restaurant-inner-bg img.circle-blue-2 {
    width: 50px;
    top: 55%;
}
img.dotts-2{
    position: absolute;
    left: 10px;
    top: 40%;
    width: 8px;
}
img.circle-blue-3{
    position: absolute;
    width: 120px;
    right: -60px;
    top: 130%;
}
img.dotts-3{
    position: absolute;
    right: 10px;
    top: 120%;
    width: 8px;
}
img.circle-blue-4{
    position: absolute;
    width: 120px;
    left: -60px;
    top: 110%;
}
img.dotts-4{
    position: absolute;
    right: 10px;
    top: 170%;
    width: 8px;
}
img.circle-blue-5{
    position: absolute;
    width: 80px;
    left: -40px;
    top: 100%;
}
img.circle-blue-6{
    position: absolute;
    right: 0;
    top: 80%;
}
img.dotts-6{
    position: absolute;
    right: 10px;
    top:100%;
    width: 8px;
}
img.landing-circle-blue-6{
    position: absolute;
    right: 0;
    top: 130%;
}
img.landing-dotts-6{
    position: absolute;
    right: 10px;
    top: 120%;
    width: 8px;
}
img.dotts-7{
    position: absolute;
    left: 10px;
    top: 91%;
    width: 8px;
}
img.circle-yellow{
    position: absolute;
    right: 0;
    top: 70%;
    width: 48px;
    transform: rotate(180deg);
}
img.dotts-8{
    position: absolute;
    right: 10px;
    top: 92%;
    width: 8px;
}
img.circle-green{
    position: absolute;
    top: 60%;
    width: 100px;
    right: -50px;
}
img.peppy-1{
    position: absolute;
    right: 15px;
    top: 80%;
    width: 90px;
}
img.peppy-2{
    position: absolute;
    left: 15px;
    top: 85%;
    width: 90px;
}
.voucher-info .btn:hover{
    background: #f05f23;
}
.promos .btn:hover,.member-discounts .btn:hover{
    background: #33b1bc;
}
.footer-logo{
    height: 65px;
}

.floating { 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.floating2 { 
    animation-name: floating2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.delay{
    animation-duration: 5s;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, -0px); }   
}

@keyframes floating2 {
    0% { transform: rotate(180deg) translate(0,  0px); }
    50%  { transform: rotate(180deg) translate(0, -10px); }
    100%   { transform: rotate(180deg) translate(0, 0px); }   
}
.mobile-menu{
    display: none;
}
a.navbar-brand img {
    height: 40px;
}
.desktop-menu {
    padding: 10px 70px;
}
button.btn-menu{
    background: #682baf;
    border-color: #682baf;
    font-weight: 600;
    font-size: 14px;
}
button.btn-login-menu{
    background: #33b1bc;
    border-color: #33b1bc;
    font-weight: 600;
    font-size: 14px;
}
.desktop-menu li.nav-item{
    margin-right: 15px;
}
.desktop-menu li:last-child.nav-item{
    margin-right: 0;
}
.order-menu{
    color: #F05F23;
    font-weight: 600;
}
.reservation-menu{
    color: #96c93e;
    font-weight: 600;
}
.asap-login-form {
    padding: 10px 0px 180px;
}
a.nav-link:hover {
    color: #33b1bc;
}
.grd-line {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}
.logo-text{
    height: 30px;
    margin-top: -18px;
}
button.btn-main {
    background: #95c840;
    border: #95c840;
    font-size: 15px;
    padding: 10px 30px;
    border-radius: 8px;
    font-weight: 600;
}
.group-box{
    text-align: center;
}
.group-box img {
    height: 80px;
    margin: auto;
    display: block;
}
.group-box h4{
    font-size: calc( (20px /1.5 ) + (((20/3)/19.2) * 1vw));
    color: #33b1bc;
    margin-top: 10px;
}
.group-box {
    text-align: center;
    border: 2px dashed #ddd;
    border-radius: 8px;
    border-color: #682baf;
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 15px 10px 0px;
    height: 100%;
}
.yellow-box {
    width: 90%;
    background: #ffcf10;
    height: 100%;
    position: absolute;
    right: 8px;
    top: 8px;
    border-radius: 10px;
}
.yellow-layer{
    width: 103%;
    background: #ffcf10;
    height: 100%;
    position: absolute;
    right: -26px;
    top: 9px;
    border-radius: 10px;
}
#bottom-banner{
    background: url('../../argon/img/asap/landing/bg.jpg') no-repeat;
    background-size: cover;
    background-position: center top;
    color:#fff;
    position: relative;
    padding: 80px 0px;
    margin-top: 20px;
}
#bottom-banner p {
    font-size: calc( (26px /1.5 ) + (((26/3)/19.2) * 1vw));
    color: #ffcf10;
    font-weight: 600;
}
.btn.btn-blue{
    background: #33b1bd;
    border: #33b1bd;
    font-size: 14px;
    padding: 10px 30px;
    border-radius: 8px;
    font-weight: 600;
}
.btn.btn-blue:hover{
    background: #f05f23;
    border: #f05f23;
}
img.pose-cartoon {
    position: absolute;
    width: 190px;
    bottom: 15px;
    left: 15px;
    z-index: 1;
}
img.landing-dotts-7 {
    position: absolute;
    right: 10px;
    top: 176%;
    width: 8px;
}
.btn.btn-otp{
    width: 30%;
    padding: 5px;
    background: #212529;
    border: #212529;
    color: #fff;
    font-size: 15px;
    border-radius: 8px;
    font-weight: 600;
}
.slick-dots li button:before{
    font-size: 8px;
}
img.circle1 {
    position: absolute;
    right: 0;
    top: 55px;
}
img.circle2 {
    position: absolute;
    top: 24%;
    width: 50px;
}
img.circle3 {
    position: absolute;
    width: 85px;
    left: -5px;
    top: -92px;
}
img.acc-dot {
    width: 8px;
    right: 8px;
    position: absolute;
    top: 40%;
}
.modal-v-img{
    width: 100%;
    height: auto!important;
}
.m-logout{
    position: fixed;
    left: 20px;
    bottom: 30px;
    color: #1f1c3e;
    font-weight: 600;
}
.menu-bottom-hr{
    position: fixed;
    left: 0;
    bottom: 53px;
    width: 90%;
    right: 0;
}
.row.member-vouchers {
    box-shadow: none!important;
}
.member-vouchers .vouchers {
    margin-bottom: 2%;
    margin-left: 1%;
    margin-right: 1%;
    max-width: 23%;
    width: 25%;
}
#voucher hr.gap {
    margin: 20px 0px 30px;
}
.asap-forms .tab-pane h4{
    color: #161140;
    margin-bottom: 0;
}
.landing img.landing-circle-blue-6{
    z-index: 1;
    top: 160%;
}
.redem-arr{
    width: 54px;
    height: 54px;
}
.redem-box {
    width: 28%;
    display: flex;
    border: 1px solid purple;
    border-radius: 10px;
    padding: 18px 15px 0;
    background-color: #fff;
    position: relative;
    z-index: 1;
    height: fit-content;
}
.redem-info {
    padding-left: 10px;
    width: 80%;
}
.redem-img {
    width: 20%;
}
.redem-info h4 {
    font-size: calc( (20px /1.5 ) + (((20/3)/19.2) * 1vw));
    color: #33b1bc;
}
section#redemption-section {
    padding: 50px 0px 40px;
    background: url('../../argon/img/asap/landing/redem-bg.jpg') no-repeat;
    background-size: cover;
    background-position: center top;
    position: relative;
}
#redemption-section::after{
    content: '';
    display: block;
    width: 100%;
    height: 110px;
    background: url('../../argon/img/asap/landing/redem-curve.png') no-repeat;
    position: absolute;
    bottom: 0;    
    left: 0;
    right: 0;
    margin: auto;
    background-size: cover;
    background-position: center top;

}
.middle-box{
    position: relative;
    top: 35px;
}
.redem-arr{
    position: relative;
    top: 50px;
    z-index: 1;
}
.avatar-group{
    display: flex;
    flex-direction: row;
}
.avatar-group img{
    width: 40px;
    height: 40px;
}
.avatar-group span {
    font-size: 14px;
    color: #161140;
    font-weight: 600;
}
.avatar-group span b {
    color: #682baf;
}
.after-login{
    display: none;
    cursor: pointer;
}
.account .after-login{
    display: block;
}
.account .before-login{
    display: none;
}
.profile-avatar span {
    font-weight: bold;
    color: #161140;
    font-size: 18px;
    line-height: 1.1;
    margin-top: 10px;
}
.aval-points span {
    font-size: 18px;
    font-weight: bold;
    color: #682baf;
}
button.btn.btn-qr {
    background: #f05f23;
    color: #fff;
    padding: 4px 12px!important;
    font-size: 14px;
    height: 34px;
}
.aval {
    display: flex;
    position: absolute;
    right: 35px;
    top: 0;
    justify-content: space-between;
    align-items: flex-end;
}
p.aval-points {
    margin-bottom: 0;
    margin-right: 15px;
    margin-top: 10px;
}
img.selfie {
    width: 30px!important;
    position: absolute;
    top: 48px;
    right: -65px;
    left: 0;
    cursor: pointer;
}
.profile-avatar img{
    width: 80px;
}
li.profile-avatar {
    position: relative;
    top: -34px;
}
#memberqrModal .modal-dialog {
    max-width: 450px;
}
.member-qr{
    width: 250px;
}
.choose-avatar{
    display: flex;
    flex-wrap: wrap;
}
#chooseAvatar .choose-avatar{
    justify-content:center;
}
.choose-avatar img {
    width: 90px;
    margin: 4px 0;
    cursor: pointer;
    height: auto;
}
.flex-button-box{
    flex-direction: row;
    align-items: flex-end;
    /* margin-bottom: 20px; */
    justify-content: space-between;
    display: flex;
}
.flex-button-box .form-group{
    width: 70%;
    margin-bottom: 0;
}
.otp-container{
    width: 28%;
    margin-left: 2%;
}
.complete_account #otp-button{
    width: 150px;
}
#otp-button {
    width: 100%;
    padding: 10px 0px;
    margin:0!important;
}
.pw-form-container .form-group{
    width: 49%;
    margin-right: 2%;
}
.pw-form-container .form-group:last-child{
    margin-right: 0;
    width: 49%;
}
.choose-avatar input{
    opacity: 0;
}
.choose-avatar img{
    transition: all 0.5s ease;
    border-radius: 50%;
    border: 4px solid transparent;
}
.choose-avatar img:hover,.choose-avatar img:focus,.choose-avatar img:active,.selected-avatar{
    transform: scale(1.2);
    box-shadow: 3px 6px 8px #686868;   
    border: 4px solid #33b1bc!important;
}
.swal-footer { text-align: center; }
#update-avatar-button {
    background: #f05f23;
    color: #fff;
    width: 120px;
}
.otp-group input[type="text"]{
    width: 21%;
    text-align: center;
    padding: 0;
}
.otp-group input[type="number"]{
    width: 78%;
}
.dataTables_wrapper {
    font-size: 0.875rem;
}
.page-link {
    color: #682baf;
}
.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6;
}
.page-item .page-link, .page-item span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 3px;
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
}
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #682baf;
    border-color: #682baf;
    box-shadow: 0 7px 14px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%);
}
.w-30 {
    width: 30%;
}
.w-20 {
    width: 20%;
}
.social_error .container{
    height: 45vh;
}
input#code{
    text-align: center;
}
.tc .container, .pp .container {
    padding: 120px 20px;
}
div#tcContent {
    padding: 40px 0 0;
}
.tc h3, .pp h3{
    color: #161140;
}
.tc h4, .pp h4{
    color: #682baf;
}
#voucher-qr svg{
    width: 100%!important;
    height: auto;
}
#tcTab .nav-link{
    font-weight: bold;
}
ul#tcTab {
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 20px;
    border-bottom: 0;
}
ul#tcTab li {
    margin: 0px 10px;
}
#tcTab .nav-link:focus, #tcTab .nav-link:hover,#tcTab .nav-link.active ,#vcTab a.active{
    border-color: #e9ecef #e9ecef #dee2e6;
    color: #fff;
    background: #682baf;
    border-radius: 5px;
}
.qr-modal .modal-dialog {
    max-width: 450px;
}
#vcTab a {
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    width: 120px;
    background: #eee;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}
#vcTab{
    background: none;
    border:0;
    margin-top: 30px;
}
div#vcContent .tab-pane {
    padding: 20px 0;
}
.btn:disabled{
    background: #ddd!important;
    color: #495057!important;
}
#MerchantDiscountTabsContent.tab-content>.tab-pane:not(.active) {
    display: block;
    height: 0;
    overflow: hidden;
}
#MerchantDiscountTabsContent.tab-content>.tab-pane.active {
    height: auto;
}
#voucherModal .modal-content {
    margin-top: 60px;
}
#voucherModal .voucher-info span {
    font-size: calc( (19px /1.5 ) + (((19/3)/19.2) * 1vw));
}
#voucherModal .voucher-info small {
    font-size: calc( (12px /1.5 ) + (((12/3)/19.2) * 1vw));
}
#voucherModal .asap-vouchers-mobile .vouchers {
    padding: 6px;
}
/* #voucherModal .voucher-img {
    padding-bottom: 90px;
} */
.web-fulfillment input.location {
   width: 300px;
}
.web-fulfillment input.location:focus{
    outline: 0;
    box-shadow: none;
}
.web-fulfillment .filter-search {   
    right: 30px;
}
.web-fulfillment .left-filter{
    display: flex;
    align-content: center;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 10px;
    padding: 9px 8px 9px 8px;
}
.location-icon{
    height: 25px;
    margin-top: 10px;
}
.address-icon{
    height: 30px;    
    margin-top: 7px;
}
.left-filter button.btn.btn-primary {
    font-size: 13px;
    background-color: #eee;
    border-color: #eee;
    color: #161140;
    font-weight: bold;
    width: 100px;
}
.left-filter button.btn.btn-primary.active{
    background-color: #161140;
    border-color: #161140;
    color: #fff;
}
.left-filter button.btn.btn-search {
    height: 35px;
    width: 120px;
    font-size: 14px;
    background-color: #682baf;
    border-color: #682baf;
    color: #fff;
    margin-top: 4px;
}
.left-filter button.btn.btn-search img{
    width: 15px;
    margin-top: -2px;
}
.fulfillment-btn-group{
    background: #eeeeee;
    padding: 5px;
    border-radius: 8px;
}
.recom-container,.all-res-container{
    padding-top: 40px;
}
.recom-container h4,.all-res-container h4{
    text-align: center;
}
span.est-time {
    background: #fff;
    color: #161140;
    position: absolute;
    border-radius: 50px;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 5px;
    flex-wrap: wrap;
    width: 40px;
    justify-content: center;
    line-height: 12px;
    text-align: center;
    right: 15px;
    top: 9px;
}
span.est-time small{
    font-size: 11px;
    margin-top: -7px;
}
#recommend-slider .slick-next, #recommend-slider .slick-prev {
    z-index: 1;
}
#recommend-slider .slick-prev {
    left: -10px;
    top: 40%;
}
#recommend-slider .slick-next {
    right: -10px;
    top: 40%;
}
#recommend-slider .slick-next:before{
    background: url('../../argon/img/asap/delivery-page/next-white.png') no-repeat;
    background-size: cover;
    background-position: center;
}
#recommend-slider .slick-prev:before{
    background: url('../../argon/img/asap/delivery-page/prev-white.png') no-repeat;
    background-size: cover;
    background-position: center;
}
.restaurant-box.mb-4 {
    padding: 0 10px;
}
.info {
    position: relative;
}
.rating {
    position: absolute;
    right: 10px;
    top: -3px;
}
.rating span {
    font-size: calc( (20px /1.5 ) + (((20/3)/19.2) * 1vw));
    font-weight: bold;
    color: #161140;
}
#filter-container {
    padding: 95px 20px 0px 30px;
}
.all-res-container{
    max-width: 100%!important;
}
.rest-container{
    max-width: 90%!important;
}
#filter-container h4.panel-title {
    font-size: calc( (20px /1.5 ) + (((20/3)/19.2) * 1vw));
    border-bottom: 1px solid #eee;
    height: 36px;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
}
#filter-container a {
    color: #161140;
    width: 100%;
    height: 100%;
    display: block;
}
#filter-container .panel.panel-default {
    margin-bottom: 35px;
}
#filter-container .panel-body {
    padding-top: 1rem;
}
.panel-body .form-check {
    padding-bottom: 5px;
}
.rotate {
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}
.rotate.down {
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}
.right-est-time{
    display: flex;
    flex-wrap: wrap;
    width: 38%;
    align-items: center;
    /* position: absolute;
    right: 0;
    top: 0; */
    justify-content: space-between;
}
.right-est-time .est {
    background: #fff;
    padding: 5px 10px;
    border-radius: 8px;
}
.right-est-time .info-text{
    background: #fff;
    color: #f05f23;
    border: 2px solid #f05f23;
    padding: 10px 10px;   
    width: 74%;
    display: flex;
    justify-content: center;
    margin: 0px;
}

.restaurant-inner-bg .right-est-time,
.restaurant-inner-bg .right-est-time .info-text {
    width: auto;
}
.restaurant-inner-bg .right-est-time .info-text {
    color: #96C93E;
    border: 2px solid #96C93E;
}
.right-est-time .info-text p{
    font-size: 13px;
}
.right-est-time .est span{
    margin-top: -5px;
    display: block;
    font-size: 13px;
}
.checkout-container{
    padding: 120px 15px 80px;
}
.login_form{
    display: none;
}
.click-login {
    background: #33B1BC;
    border: #33B1BC;
    font-size: 15px;
    padding: 10px 20px;
    width: 150px;
    margin: 25px auto;
    display: block;
}
.checkout-form-section {
    padding: 4% 5%;
    background: #fff;
    margin: 4% 0;
    box-shadow: 0px 2px 10px #e7e7e7;
}
.checkout-form-section .d-flex .form-group {
    width: 48%;
    margin: 1% 1% 1% 0;
}
.shipping_group label,.payment_group label {
    border: 1px solid #ccc;
    width: 100%;
    padding: 14px;
    font-size: 14px;
    position: relative;
}
span.shipping_price {
    position: absolute;
    right: 15px;
}
#coupon-input{
    width: 60%;
}
.coupon_group label{
    border: 1px solid #ccc;
    padding: 10px;
}
#apply-remove-coupon-input{
    background: #682baf;
    border-color: #682baf;
    font-weight: 600;
    font-size: 14px;
    width: 100px;
}
.checkout .btn-submit{
    background: #682baf;
    border-color: #682baf;
    font-weight: 600;   
    text-transform: uppercase;
}
.checkout .btn-back{   
    text-transform: uppercase;
}
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}  
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}  
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}  
input:checked + .slider {
    background-color: #682baf;
}  
input:focus + .slider {
    box-shadow: 0 0 1px #682baf;
}  
input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
.slider.round {
    border-radius: 34px;
}
  
.slider.round:before {
    border-radius: 50%;
}
.outlet_info ul {
    background: #f2f2f2;
    padding: 15px;
    border-radius: 5px;
}
.outlet_info ul li {
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px 0px;
    list-style: none;
}
.outlet_info h5 {
    font-size: 14px;
    font-weight: bold;
}
.outlet_info span {
    display: block;
    font-size: 13px;
}
.order_p_img_wrap {
    width: 20%;
}
.order_p_name {
    width: 60%;
    font-size: 13px;
    line-height: 16px;
    padding: 0 8px;
}
.order_p_price {
    width: 20%;
    font-size: 13px;
    line-height: 16px;
}
.order_info {
    border-bottom: 1px solid #ccc;
}
.order_info img {
    border-radius: 5px;
}
.calculation_price {
    padding: 20px 0;
}
ul.pre_total {
    margin-bottom: 20px;
    text-indent: -30px;
}
ul.total_price{
    text-indent: -30px;
}
.calculation_price li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 13px;
}
.checkout-order-info-section {
    width: 300px!important;
    height: 90vh;
    overflow-y: auto;
}
.checkout-order-info{
    padding: 40px 15px 30px 0;
}
.restaurant-inner .promos .slick-list{
    display: grid;
}
.promotions-by-area .promos .slick-list{
    display: grid;
}
.area-filter {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 6px 3px;
    margin: 0px 12px;
    height: 48px;
}
.reservation .area-filter .areas {
    font-weight: bold;
    font-size: 15px;
    padding: 5px;
    border-radius: 8px;
    min-width: 90px;
    text-align: center;
    margin: 0px 3px;
    background-color: #f1f1f1;
    color: #161140;
    font-size: calc( (14px /1.5 ) + (((14/3)/19.2) * 1vw));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reservation .area-filter .areas:focus,
.reservation .area-filter .areas:hover {
    color: #fff;
    background-color: #96c93e !important;
}
.reservation .btn-select {
    height: 48px;
}
.reservation #filter-container {
    padding: 25px 20px 0px 30px;
}
.reservation .filter-box #search-filter {
    display: none;
}
.reservation .filter-box.mt-3 {
    margin: 0 !important;
}
.reservation #category-filter {
    padding: 0;
}
.reservation .restaurant-box .restaurant-info:hover .img-box {
    border-color: #ffcf10;
}
.reservation .restaurant-box .restaurant-info:hover h4 {
    color: #ffcf10;
}
.pd-5 {
    padding: 5px;
}
.promotions-by-area  .promos .items{
    margin: 0px 5px 60px;
}
#back-button{
    background: #682baf;
    border-color: #682baf;
}
.landing h3{
    color: #161140;
}
.asap-vouchers .vouchers{
    max-width: initial;
}
/*Responsive*/
@media only screen and (min-width: 1440px){
    img.circle-blue-2{
        top: 90%;
    }
    .restaurant-inner-bg img.circle-blue-2{
        top: 85%;
    }
    img.dotts-2{
        top: 70%;
    }
}
@media only screen and (min-width: 1200px){
   .container{
        max-width: 1240px;
   }
}
@media only screen and (max-width: 1200px){
    .right-est-time{
        width: 50%;
    }
    .rest-container{
        max-width: 100%!important;
    }
    #filter-container {
        padding: 95px 10 0px 10px;
    }
    .reservation #filter-container {
        padding: 25px 10px 0px 10px;
    }
    .choose-avatar img{
        width: 80px;
    }
    .web-fulfillment input.location {
        width: 190px;
    }
    .location-icon {
        height: 20px;
        margin-top: 12px;
    }
    #filter-container label {
        font-size: 12px;
    }
    img.peppy-1, img.peppy-2 {
        width: 70px;
    }
}
@media only screen and (max-width: 1024px){
    .promotions-by-area .filter-search{
        right: 28px!important;
        top: 12px!important;
    }
    .searchlocation{
        height: 40px!important;
    }
    .promotions-by-area .nav-tabs .nav-link{
        min-width: 90px;
        padding: 10px 5px;
        font-size: 14px;
    }
    .member-discounts .items img,.promos .items img{
        height: 54px;   
        margin-top: -44px;
        padding: 5px;
    }
    .checkout-order-info-section {
        width: 240px!important;
    }    
    img.circle-blue{
        width: 120px;
        left: -72px;
        top: 0;
    }
    .promo1 .items img {
        height: 60px;
        margin: -30px auto 0;
    }

    .asap-vouchers-mobile .vouchers {
        padding: 5px;
    }
}
@media only screen and (min-width: 767px){  
    .modal-dialog{
        max-width: 1140px;
    }
    #couponModal .modal-dialog,#chooseAvatar .modal-dialog{
        max-width: 800px;
    }
    #voucherModal .modal-dialog {
        max-width: 1000px;
        width: 90%;
    }
    .outlet-input {
        padding-right: 5px;
    }
    .pax-input {
        padding-left: 5px;
    }
}
@media only screen and (max-width: 990px){
    .asap-login h3 {
        position: relative;
        top: 5px;
        margin-bottom: -5px;
    }
    .promotions-by-area .nav-tabs .nav-link {
        min-width: 64px;
        padding: 10px 5px;
        font-size: 12px;
    }
    .merchant_img_container{
        height: 50px;
        width: 50px;
        margin: -42px auto 15px;
    }   
    .right-est-time{
        width: 65%;
    }
    .web-fulfillment input.location {
        width: 100px;
    }
    .address-icon{
        height: 25px;
    }
    .left-filter button.btn.btn-primary{
        width: 84px;
        font-size: 11px;
    }
    .aval {
        position: relative;
        right: 0;
        top: 0;
    }
    .redem-box{
        display: block;
    }
    .redem-img{
        width: 100%;
    }
    .redem-img img{
        margin: 0 auto 10px auto;
        display: block;
        height: 40px;
    }
    .redem-info{
        width: 100%;
    }
    button.close img{
        height: auto;
    }
    .member-vouchers .vouchers{
        margin-bottom: 2%;
        margin-left: 2%;
        margin-right: 2%;
        width: 50%;
        max-width: 46%;
    }    
    .member-discounts .items {
        margin-left: 2%;
        margin-right: 2%;
        width: 46%;
        max-width: 46%;
        float: left;
        margin-bottom: 10%;
    }
    .myaccount ul.nav{
        padding: 18px;
    }
    .nav-pills .nav-link{
        background: #fff;
    }
    .side-cart{
        background: #f1f1f1;
    }
    .side-cart .col-12{
        background: #fff;
    }
    img.circle3 {
        display: none;
    }
    .asap-login-form span{
        display: block;
    }
    img.pose-cartoon {
        position: absolute;
        width: 120px;
        bottom: 15px;
        left: 4px;
    }
    .mobile-menu{
        display: block;
    }
    .desktop-menu{
        display: none;
    }
    .menu-logo{
        height: 30px;
    }
    .footer-logo{
        height: 50px;
    }
    .newsletter .d-flex{
        justify-content: center!important;
    }
    .dishes .item-box {
        width: 48%;
    }
    .footer .flex-1 {
        display: block;
        flex: auto;
        width: 100%;
        text-align: center!important;
        padding: 0px 15px;
    }
    .social-icons{
        justify-content: center;
    }
    .promo1 .items p{
        margin-top: 10px;
    }
    .reservation-bg h3, .promotion-bg h3, .asap-login h3,.landing-bg h3{
        padding: 20px 0 0;
    }
    button.btn.btn-location{
        font-size: 12px;
    }
    img.circle-blue ,img.circle-blue-2,img.dotts-2,img.circle-blue-3,img.dotts-3,img.circle-blue-4,img.dotts-4,img.circle-blue-5,img.dotts-6,img.circle-blue-6,img.dotts-7,img.landing-dotts-7, img.landing-circle-blue-6, img.landing-dotts-6, img.circle-yellow, img.dotts-8, img.circle-green, img.peppy-1, img.peppy-2{       
        display: none;   
    }
    img.dotts {
        display: none;
    }
    #voucherModal .modal-dialog {
        max-width: 900px;
        width: 90%;
    }
    .reservation .area-filter .areas {
        min-width: 70px;
    }
}
@media only screen and (max-width: 767px){     
    .promotion-bg, .landing-bg{
        background: url('../../argon/img/asap/general/bg-curve-mobile.png') no-repeat;
        background-size: 100%;
        background-position: center 180px;
    }
    #transaction_table {
        display: block!important;
    }
    .asap-login h3 {       
        top: 10px;       
    }
    .qr-code svg {
        width: 50%;
        height: 50%;
    }
    #voucherModal button.close,#chooseAvatar button.close{
        top: 10px;
        position: relative;
        text-align: right;
        right: 13px;
    }
    #voucherModal .yellow-bg-line, #chooseAvatar .yellow-bg-line{
        top: 30px;
        height:95%;
        display: none;
    }
    .promos .slick-list{
        display: grid;
    }
    .checkout-order-info-section {
        width: 90%!important;
        margin: 0 auto;
        display: block;
        left: 0;
        right: 0;
    }
    .checkout-order-info {
        padding: 40px 5px;
    }
    .coupon_group label{
        display: block!important;
    }
    .coupon-btn-group{
        text-align: right;
    }
    #coupon-input {
        width: 100%;
        margin: 10px auto;
    }
    #recommend-slider .items, .dishes .items{
        width: 100%;
        height: auto;
        float: none;
        padding-bottom: 100%;
    }
    .dishes .item-box {
        width: 46%;
        border: 0;
        padding: 0;
        margin: 2% 2% 4%;
        border-radius: 0;
    }
    section.order-inner-bg,
    section.restaurant-inner-bg {
        padding: 70px 0px 0;
    }
    .all-res-container .row.pt-2.mt-3 {
        padding-top: 0!important;
    }
    .recom-container, .all-res-container {
        padding: 20px 0px 20px;
    }
    #recommend-slider .item-box{
        padding: 0 5px;
    }
    #order-recommend-slider .item-box{
        padding: 0 5px;
        border: 0;
        margin:0;
        display: block;
    }
    #order-recommend-slider .items{
        width: 100%;
        height: auto;
        float: none;
        padding-bottom: 100%;
    }
    #recommend-slider {
        margin-top: 15px!important;
    }
    /* .img-box{
        padding-bottom: 50%;
    } */
    .recom-container h4,.all-res-container h4{
        text-align: left;
    }
    .form-control{
        font-size: 16px;
    }
    ul#vcTab{
        display: flex!important;
    }
    #vcTab a{
        width: 100%;
    }
    #vcTab li.nav-item {
        width: 50%!important;
        max-width: 48%!important;
    }
    /* .account .v-modal .modal-body{
        padding: 0 30px 30px 30px;
    } */
    #voucher-qr {
        margin-bottom: 20px;     
    }
    #landing-banner .banner-item,#order-slider .banner-item,#order-inner-slider .banner-item,#restaurant-slider .banner-item{
        background-size: 100%!important;
        padding-bottom: 100%;
    }
    #promotion-banner .banner-item{
        background-size: 100%!important;
        padding-bottom: 100%;
    }
    li.profile-avatar{
        top: 0;
    }
    .myaccount .asap-forms .row{
        padding:20px 0 0;
    }
    .choose-avatar img {
        width: 75px;
    }
    .aval{
        display: block;
    }  
    .aval-points{
        margin-bottom: 5px!important;
    }
    section#redemption-section{
        padding-bottom: 0;
    }
    #redemption-section .justify-content-between{
        justify-content: center!important;
    }
    .redem-box{
        width: 80%;
        margin-bottom: 10px;
        text-align: center;
    }
    .middle-box{
        top: 0;
    }  
    .redem-arr{
        display: none;
    }
    #productModal .modal-dialog,.promotion #asapvoucherModal .modal-dialog,.landing #asapvoucherModal .modal-dialog,.account #asapvoucherModal .modal-dialog{
        width: 80%; 
    }
    #productModal .modal-content,.promotion #asapvoucherModal .modal-content,.landing #asapvoucherModal .modal-content,.account #asapvoucherModal .modal-content{
        position: relative;
    }
    .modal-content{
        bottom: 0px;
        /* position: absolute; */
        width: 100%;
    }
    #voucherModal .modal-content{
        position: relative;
    }
    .yellow-bg-line{
        right: 0;
        top: 6px;
    }
    .acc-graphic{
        width: 50%!important;
    }
    .profile-tab-container{
        padding-left: 5px;
        padding-right: 5px;
    }
    .myaccount ul.nav{
        display: block!important;
        width: 100%;
        flex-direction: unset!important;
        position: relative;
    }
    .myaccount ul.nav li{
        display: inline;
        float: left;
        width: 25%;
        margin-right: 1%;
        margin-left: 1%;
        max-width: 23%;
    }
    img.arr-icon {
        position: absolute;
        right: 40%;
        top: auto;
        bottom: -14px;
        transform: rotate(90deg);
    }
    .social-login{
        display: block!important;
    }
    .fb-button {
        width: 160px;
    }
    .myaccount ul.nav{
        padding: 8px 4px 0px;
    }
    .myaccount .nav li.nav-item a{
        padding: 8px;
        margin-bottom: 12px;
        font-size: 12px;
        line-height: 14px;
        height: 90px;
    }
    .btn.btn-otp{
        margin-top: 5px;
        width: 50%!important;
    }
    #code{
        width: 33%!important;
    }
    .phno{
        width: 59%!important;
    }
    .complete_account .phno{
        width: 75%!important;
    }
    .myaccount{
        width: 95%;
    }
    .myaccount .tab-pane {
        padding: 20px 5px 20px 5px;
    }
    .modal-dialog {
        width: 100%;
        margin: 0 auto;
    }
    .side-cart,.order-now-container{
        width: 100%;
    }
    .voucher-list{
        height: 150px;
        width: auto;
        margin: auto;
        padding: 20px 10px;
    }
    .v-modal .modal-body{
        padding: 20px;
    }
    #voucherModal .modal-body {
        padding: 20px 0px;
    }
    .btn-login{
        width: 100%;
    }
    .footer{
        padding: 0 0 20px;
    }
    .join-group{
        text-align:center;
    }
    .group-column{
        margin-bottom: 15px;
    }
    .footer ul{
        display: block;
    }
    .re-filter{
        justify-content: center!important;
    }
    .cover-box {
        background: #ffffffd6;
        position: relative;
        z-index: 9;
        border-radius: 10px;
        box-shadow: 2px 2px 8px #d4d4d4;
        padding: 22px;
    }
    #productModal button.close,#asapvoucherModal button.close{
        top: 8px;
        right: 8px;
        background: transparent;
        z-index: 9;
    }    
    #productModal button.close svg, #asapvoucherModal button.close svg{
        fill: #000;
        width: 18px;
    }
    #asapvoucherModal button.close svg{
        top: 0;
    }
    #productModal button.close svg{
        top:0;
        right:0;
    }
    .btn-addtocart{       
        width: 50%!important;
    }
    .promo1 .items img{
        height: 30px;
        margin: -15px auto 0;
    }
    .promo1 .slick-list{
        padding: 30px 0px 0px;
    }
    .promo1 .items{
        height: 8vh;
    }
    .promo1 .items p{
        font-size: calc( (16px /1.5 ) + (((16/3)/19.2) * 1vw));        
    }
    /* .asap-vouchers-mobile .vouchers{
        margin-bottom: 4%;
        margin-left: 2%;
        margin-right: 2%;
    }   */
    hr.gap {
        margin: 20px 0px 30px;
    }
    .row.asap-vouchers-mobile{
        margin-right: -15px;
        margin-left: -15px;
    }    
    .promos .slick-arrow{
        display: none!important;
    }
    #search-filter{
        width: 70%;
    }
    #search-filter2{
        width: 60%;
    }
    .v-modal .btn{
        width: 100%!important;
        margin-bottom: 10px;
    }
    #search-filter input.form-control,
    #search-filter2 input.form-control,
    .reservation .btn-select,
    .reservation .btn-filter {
        height: 42px;
    }
    button#resend-email-button{
        width: 100%;
        margin-bottom: 0!important;
    }
    .verification button.btn-login {
        margin-top: 10px!important;
    }
    .restaurant-box.mb-4 {
        padding: 0 5px;
    }
    .reservation .re-filter {
        padding: 10px 0px;
    }
    #search-filter input.form-control,
    #search-filter2 input.form-control {
        font-size: 12px;
    }
    section.reserve-section .first-form {
        padding: 20px 15px;
    }
    section.restaurant-inner-coupon h3 {
        margin-top: 3rem;
    }
    section.restaurant-inner-coupon {
        padding-bottom: 180px;
    }
}
@media only screen and (max-width: 540px){
    img.selfie{
        right: -40px;
    }
    #search-filter2{
        width: 50%;
    }
    .reservation .re-filter {
        padding: 10px;
    }
    .reservation .btn-select,
    .reservation .btn-filter {
        padding: 10px;
    }
    .date-box:nth-child(n+5) {
        display:none;
    }
    .date-box:nth-child(4) {
        margin-right: 0;
    }
    .date-box {
        width: 23%;
    }
    section.reserve-section .first-form {
        padding: 20px 10px;
    }
}
@media only screen and (max-width: 420px){
    #selected_seat {
        display: block;
        margin: 5px 0px 0px;
    }
}
@media only screen and (max-width: 375px){
    
    img.selfie{
        top: 40px;
    }
    .choose-avatar img {
        width: 45px;
    }
}
@media only screen and (max-width: 320px){
    #otp-button{
        padding:10px 0;
    }
    .choose-avatar img {
        width: 48px;
    }
    .newsletter input ,#search-filter{
        width: 60%;
    }
    .myaccount .nav li.nav-item a{
        font-size: 9px;
    }
}