@import "base-shared.css";
@import "chatbot-plugin.css";

:root {
    --public-bg: #f6f6f6;
    --sub-brand1: #231F20;
    --sub-brand2: #A50A23;
    --ref-sizing-8000: 640px;
    --ref-sizing-7000: 560px;
    --ref-sizing-6000: 480px;
    --ref-sizing-5000: 400px;
    --ref-sizing-4000: 320px;
    --ref-sizing-3000: 240px;
    --ref-sizing-2000: 160px;
    --ref-sizing-1200: 96px;
    --ref-sizing-1000: 80px;
    --ref-sizing-900: 72px;
    --ref-sizing-800: 64px;
    --ref-sizing-700: 56px;
    --ref-sizing-600: 48px;
    --ref-sizing-500: 40px;
    --ref-sizing-450: 36px;
    --ref-sizing-400: 32px;
    --ref-sizing-300: 24px;
    --ref-sizing-250: 20px;
    --ref-sizing-225: 18px;
    --ref-sizing-200: 16px;
    --ref-sizing-175: 14px;
    --ref-sizing-150: 12px;
    --ref-sizing-125: 10px;
    --ref-sizing-115: 9px;
    --ref-sizing-100: 8px;
    --ref-sizing-85: 7px;
    --ref-sizing-75: 6px;
    --ref-sizing-65: 5px;
    --ref-sizing-50: 4px;
    --ref-sizing-40: 3px;
    --ref-sizing-25: 2px;
    --ref-sizing-0: 0px;
    --ref-spacing-1: -1px;
    --ref-spacing-2000: 160px;
    --ref-spacing-1000: 80px;
    --ref-spacing-800: 64px;
    --ref-spacing-600: 48px;
    --ref-spacing-500: 40px;
    --ref-spacing-400: 32px;
    --ref-spacing-300: 24px;
    --ref-spacing-250: 20px;
    --ref-spacing-200: 16px;
    --ref-spacing-175: 14px;
    --ref-spacing-150: 12px;
    --ref-spacing-125: 10px;
    --ref-spacing-100: 8px;
    --ref-spacing-75: 6px;
    --ref-spacing-50: 4px;
    --ref-spacing-25: 2px;
    --ref-spacing-0: 0px;
    --ref-font-size-1300: 60px;
    --ref-font-size-1200: 50px;
    --ref-font-size-1100: 45px;
    --ref-font-size-1000: 40px;
    --ref-font-size-900: 36px;
    --ref-font-size-800: 32px;
    --ref-font-size-700: 28px;
    --ref-font-size-600: 24px;
    --ref-font-size-500: 22px;
    --ref-font-size-400: 20px;
    --ref-font-size-300: 18px;
    --ref-font-size-200: 16px;
    --ref-font-size-100: 14px;
    --ref-font-size-75: 12px;
    --ref-font-size-50: 11px;
}

#chat-widget .sc-chat-window {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
.fullscreen-v-img {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}


/*--hover disabled--*/
html.touch *:hover {
    all: unset !important;
}

/*--scroll bar styling--*/
/* width */
.plt-desktop *::-webkit-scrollbar {
    width: 0.5rem;
}

/* Track */
.plt-desktop *::-webkit-scrollbar-track {
    /* border-radius: 500px; */
    background: transparent;
}

/* Handle */
.plt-desktop *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 500px;
}

/* Handle on hover */
.plt-desktop *::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/*----*/
body {
    /* background-color: var(--public-bg) !important; */
    /* Camera 需要set 透明, 不能寫 !important; */
    background-color: var(--public-bg);
}

.navbar-notch {
    background: #A50A23 url(/assets/images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat;
    background-size: cover;
    content: "";
}



.input-field input,
.input-field select{
    border-radius: 0 !important;
    font-size: 0.9rem !important;
}

.input-form .input-field input,
.input-form .input-field select{
    border-radius: 0 !important;
    font-size: 0.9rem !important;
}

.input-wrapper .input-field input,
.input-form .input-field select{
    border-radius: 0 !important;
    font-size: 0.9rem !important;
}

.mat-option{
    font-size: 0.9rem !important;
}

select{
    -webkit-appearance: menulist !important;
    border-radius: 0 !important;
}

@media not screen and (min-width: 600px) {
    mat-error {
        font-size: 0.8rem;
        /* transform: translateY(5px); */
    }
}

@supports(background-position-y: env(safe-area-inset-top)) {
    .header {
        background-position-y: calc(-1 * env(safe-area-inset-top)) !important;
    }

    app-sub-bar .mat-toolbar {
        background-position-y: calc(-1 * env(safe-area-inset-top)) !important;
    }

    app-main-item-modifiers .header,
    app-item-modifiers-dialog .header {
        background-position-y: calc(-1 * env(safe-area-inset-top)) !important;
    }

    app-multi-steps-page-item-dialog mat-horizontal-stepper {
        background-position-y: calc(-4rem - env(safe-area-inset-top)) !important;
    }

    app-reward-page .content {
        background-position-y: calc(-4rem - env(safe-area-inset-top)) !important;
    }

    app-estamp-page .content {
        background-position-y: calc(-4rem - env(safe-area-inset-top)) !important;
    }

    app-share-point .content {
        background-position-y: calc(-4rem - env(safe-area-inset-top)) !important;
    }

    app-share-estamp .content {
        background-position-y: calc(-4rem - env(safe-area-inset-top)) !important;
    }

    /* app-mobile-cart-page mat-toolbar {
        background-position-y: calc(-1 * env(safe-area-inset-top)) !important;
    } */
    mat-toolbar {
        background-position-y: calc(-1 * env(safe-area-inset-top)) !important;
    }
}



/* .header button, .header mat-icon, .mat-toolbar button{
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
} */

.nav-title {
    font-size: 1rem !important;
}

body .enlarge-image-modal {
    height: auto !important;
}

.mat-toolbar-single-row {
    height: 4rem !important;
    box-shadow: none !important;
}

.completeProfile-container{
    /* height: auto !important; */
    display: flex !important;
    align-items: center !important;
    /* max-height: 80% !important;
    min-height: auto !important; */
    border-radius: 1rem !important;
}

.completeProfile-container .aux-inner{
    width: 100% !important;
}

app-order-toolbar {
    background-color: var(--public-bg);
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {
    /* font-weight: normal !important; */
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
div,
button {
    font-family: var(--CF0) !important;
    letter-spacing: 0 !important;
    font-weight: normal;
}

p{
    line-height: 1.3em;
}

/*--web fix--*/

.global-container {
    /* height: auto !important; */
    /* box-shadow: 0 0 1rem 0 rgb(0 0 0 / 10%); */
}

.plt-desktop .global-container {
    max-width: 100% !important;
}

/*--app-nav-bar--*/
app-nav-bar .left-box {
    justify-content: center;
    position: relative;
}

app-nav-bar .left-box button:first-child{
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translate(-50%, -50%);
    bottom: 50%;
}

/*--app-ad-detail-page--*/
app-ad-detail-page app-img .wrapper{
    height: 100% !important;
    padding-top: unset !important;
}

app-ad-detail-page app-img img{
    object-fit: contain !important;
    height: 100% !important;
    position: relative !important;
}

app-ad-detail-page app-img::ng-deep .wrapper{
    height: 100% !important;
    padding-top: unset !important;
}

app-ad-detail-page app-img::ng-deep img{
    object-fit: contain !important;
    height: 100% !important;
    position: relative !important;
}


/*--app-order-page--*/

.mat-option{
    font-family: var(--CF0) !important;
}

app-order-page app-cart {
    min-width: 350px !important;
    max-width: 350px !important;
}

app-order-page app-order-toolbar,
app-favorite-item-page app-order-toolbar {
    /* padding-bottom: 2px; */
}

app-order-page .center .item-grid,
app-favorite-item-page .center .item-grid {
    background: var(--public-bg) !important;
}

app-order-page app-category-banner {
    padding-top: 0.5rem;
}

app-order-page app-category-side-select,
app-favorite-item-page app-category-side-select {
    /* background: #f1f1f1 !important; */
    background-color: transparent !important;
    border: 0 !important;
}

/* app-item-grid section {
    height: 10% !important;
} */

app-order-page app-category-side-select .selected-cat .cat-img-box,
app-favorite-item-page app-category-side-select .selected-cat .cat-img-box {
    opacity: 1;
}



app-order-page app-category-side-select,
app-favorite-item-page app-category-side-select {
    height: 100% !important;
}

app-order-toolbar app-mode-selector .addr-wrapper {
    border-radius: 0;
    padding: 0.5rem !important;
    margin-left: 0.5rem;
    border-left: 1px solid #ececec;
    min-width: 15rem;
}



/* app-order-page app-mode-selector app-icon[name="place"]{
    display: none !important;
} */

/* app-order-page app-mode-selector .mode-address-box{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
} */
/* app-order-page app-mode-selector .mode-address-box > div:first-child{
    padding: 0.2rem 0.5rem;
    background: var(--P);
    color: var(--PC) !important;
    border-radius: 500px;
    flex: 0 0 auto;
    margin-right: 0.5rem;
} */


app-order-toolbar app-mode-selector .mode-address-box app-icon {
    color: #313131 !important;
}



app-order-page .cat-bar {
    padding: 0.7rem 1rem 0 1rem !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem;
}



app-order-page .left {
    background: #fff !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
    /* box-shadow: 0 0 0.5rem 0 rgb(0 0 0 / 10%); */
    border-radius: 0 !important;
    height: 70vh !important;
    /* margin-top: 0.5rem; */
}

.plt-desktop app-order-page .left::-webkit-scrollbar {
    width: 0.5rem;
}

.plt-desktop app-order-page .left::-webkit-scrollbar-track {
    /* border-radius: 500px; */
    background: #fff;
}

.plt-desktop app-order-page .left::-webkit-scrollbar-thumb {
    /* background: rgba(0, 0, 0, 0.4); */
    background: transparent;
    border-radius: 500px;
}

.plt-desktop app-order-page .left:hover::-webkit-scrollbar-thumb {
    background: var(--P);
}

app-order-page .right {
    height: auto !important;
    background: var(--public-bg) !important;
    /* border-left: 1px solid #ececec !important; */
}

app-order-page app-footer {
    margin-top: 0 !important;
}

app-order-page .middle {
    background: #fff;
}



app-order-page .ml-sticky .right {
    background: #fff;
}

/* app-order-page app-item-grid .item-card{
    box-shadow: 0 0 0.5rem 0 rgba(0,0,0,0.1) !important;
    margin-left: 0.6rem !important;
    margin-right: 0.6rem !important;
} */

/*--grid-item--*/
app-order-page .item-info {
    padding: 0.7rem 0.8rem !important;
}

app-order-page app-item-grid .mat-grid-tile {
    overflow: visible !important;
}

app-order-page app-item-grid app-item-card,
app-favorite-item-grid app-item-card {
    border-radius: 0.8rem !important;
}

app-favorite-item-grid .item-grid {
    padding-top: 0 !important;
}

app-order-page app-item-card .favortie-item-container,
app-favorite-item-grid .favortie-item-container {
    width: 1.8rem !important;
    height: 1.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}

app-order-page app-item-card .favortie-item-container app-icon,
app-favorite-item-grid .favortie-item-container app-icon {
    height: auto !important;
}

app-order-page .item-img-col,
app-favorite-item-grid .item-img-col {
    margin: 0 !important;
}

app-order-page .item-container,
app-favorite-item-grid .item-container {
    border-radius: 0.8rem !important;
}

app-order-page .item-container .img,
app-favorite-item-grid .item-container .img {
    top: 0 !important;
    border-radius: 0.8rem !important;
    box-shadow: none !important;
    background: transparent !important;
}

app-order-page .item-container app-img,
app-favorite-item-grid .item-container app-img {
    margin-top: 0rem !important;
    padding: 0.3rem !important;
}

app-order-page .item-container.selected,
app-favorite-item-grid .item-container.selected {
    border-left: 0 !important;
    background: #EAD6C7 !important;
    box-shadow: none !important;
}

/* app-order-page .item-container::before{
    height: 100%;
    content: "";

    width: 0.8rem;
    border-radius: 0.8rem 0 0 0.8rem;
    background: transparent;
} */
/* app-order-page .item-container.selected::before{
    background: var(--P);
} */

app-recommendation-grid-section .add-btn,
app-recommendation-grid-section .remove-btn,
app-favorite-item-grid .add-btn,
app-favorite-item-grid .remove-btn {
    /* box-shadow: 0 0 0.25rem 0 rgb(0 0 0 / 15%); */
    border-radius: 500px !important;
    width: 28px;
    height: 28px !important;
    line-height: 0 !important;
    font-size: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

app-order-page .qty-text,
app-favorite-item-grid .qty-text {
    font-size: 1rem;
    min-width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

app-order-page .item-name h3,
app-favorite-item-grid .item-name h3 {
    font-size: 0.85rem !important;
    -webkit-line-clamp: 2 !important;
    /* font-weight: 600 !important; */
}

app-order-page .item-price .price-box,
app-favorite-item-grid .item-price .price-box {
    font-size: 1.2rem !important;
    font-weight: normal !important;
    color: var(--P) !important;
}

app-order-page .item-desc,
app-favorite-item-grid .item-desc {
    /* font-size: 0.9rem !important; */
    line-height: 1.2em;
}

app-order-page .cart-item:first-child .item-name,
app-order-page .cart-item:first-child .main-item-price-extra,
app-order-page .main-item-price {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1.2em !important;
    color: #333 !important;
}

app-order-page .cart-item:first-child .item-name,
app-order-page .main-item-price {
    font-weight: 600 !important;
}

app-order-page .cart-item:first-child .main-item-price-extra {
    font-weight: normal !important;
    margin-left: 0.5rem !important;
}

app-order-page .clear-btn-box {
    position: sticky;
    top: 0;
    width: 100%;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem;
    z-index: 1000;
}

app-order-page .clear-btn {
    background: transparent;
    border: 1px solid #ececec;
    border-radius: 0.25rem !important;
    color: #333 !important;
}

app-order-page .main-item-row {
    margin: 0 !important;
    gap: 0.2rem;
}


app-order-page .md-row .div.md-name {
    font-weight: normal;
}

app-order-page .special-btn {
    border: 1px solid #ececec;
    min-width: fit-content !important;
    box-shadow: none !important;
}

/* app-order-page .soldOut .div-soldout {
    bottom: 0 !important;
} */

/* app-order-page .soldOut .img {
    filter: grayscale(0.8) opacity(0.5) !important;
} */

app-order-page .item-tag {
    /* background: var(--P) !important;
    color: #313131 !important;
    line-height: 1em !important; */
}

.plt-desktop app-order-page app-recommendation-grid-section .list::-webkit-scrollbar {
    height: 0.6rem;
}

/* .plt-desktop app-order-page app-recommendation-grid-section .list::-webkit-scrollbar-thumb {
    background: -moz-linear-gradient(left, #f8c301 0%, #ff8a00 100%) !important;
    background: -webkit-linear-gradient(left,
            #f8c301 0%,
            #ff8a00 100%) !important;
    background: linear-gradient(to right, #f8c301 0%, #ff8a00 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8c301', endColorstr='#ff8a00', GradientType=1);
} */

app-order-page app-recommendation-grid-section .list::-webkit-scrollbar-track {
    /* border-radius: 500px; */
    background: #f1f1f1;
    /* background: rgba(0, 0, 0, 0.4); */
    border-radius: 500px;
}

app-order-page app-recommendation-grid-section app-swiper {
    max-width: none !important;
    width: auto;
}



/* app-order-page .item-name {
    flex: 1 1 auto !important;
} */

app-order-page app-recommendation-grid-section .list {
    padding-bottom: 0.6rem;
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 0.8rem;
}

app-order-page app-recommendation-grid-section .item {
    position: relative;
    margin: 0 !important;
}

app-order-page app-recommendation-grid-section .item-container {
    border-radius: 0.5rem !important;
    box-shadow: 1.83341px 2.75011px 10.0837px rgb(0 0 0 / 5%);
}

app-order-page app-recommendation-grid-section .match-box {
    /* position: absolute !important;
    bottom: 0.6rem !important;
    right: 0.5rem !important; */
    border-radius: 0.2rem !important;
    padding: 0.2rem 0.5rem !important;
    background: var(--P) !important;
    color: var(--PC) !important;
}

app-order-page app-recommendation-grid-section .match-box h3,
app-order-page app-recommendation-grid-section .match-box h4 {
    font-size: 0.6rem !important;
}


/* app-order-page .soldout-border {
    border-radius: 0 !important;
    position: absolute !important;
    top: 2.5rem !important;
    left: 60% !important;
    background: transparent !important;
    z-index: 100 !important;
    color: #fff !important;
    border: 0 !important;
    background: var(--sub-brand2) !important;
    padding: 0 0.5rem !important;
    border-radius: 0.25rem !important;
    transform: translate(-50%, 0) !important;
    transform: rotate(-15deg) !important;
}

app-order-page .soldout-border h3 {
    color: #fff !important;
    background: transparent !important;
    text-align: center !important;
} */

.plt-desktop app-order-page section:first-child[style="height: 320px;"] .cat-bar {
    justify-content: flex-start !important;

    position: relative !important;
}

.plt-desktop app-order-page section:first-child[style="height: 320px;"] .cat-bar::after {
    display: none !important;
}

.plt-desktop app-order-page section:first-child[style="height: 320px;"] .cat-bar::before {
    position: absolute !important;
    bottom: 0.3rem !important;
    left: 1.5rem !important;
    z-index: 0 !important;
    border-radius: 500px !important;
    height: 0.6rem !important;
    width: 4rem !important;
    /* background: -moz-linear-gradient(left, #f8c301 0%, #ff8a00 100%) !important;
    background: -webkit-linear-gradient(left,
            #f8c301 0%,
            #ff8a00 100%) !important;
    background: linear-gradient(to right, #f8c301 0%, #ff8a00 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8c301', endColorstr='#ff8a00', GradientType=1); */
    margin: 0 !important;
}

.plt-desktop app-order-page section:first-child[style="height: 320px;"] .cat-bar h2 {
    font-size: 1.6rem !important;
    text-align: left !important;
    font-weight: 600 !important;
    z-index: 1;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
}

/* .soldOut .div-soldout div.soldout-border{
    margin-bottom: 0 !important;
} */

app-category-side-select .cat-button {
    overflow: visible;
}

app-order-page app-category-side-select .cat-button.selected-cat::after,
app-order-page app-category-side-select .cat-button.selected-cat::before {
    visibility: visible;
}

app-order-page app-category-side-select .cat-img-box {
    width: 3.2rem !important;
    min-width: 3.2rem !important;
    flex: 0 0 3.2rem !important;
    height: 3.2rem !important;
    background-color: transparent !important;
    color: var(--P) !important;
    opacity: 0.5;
}

/*--app-favorite-item-grid--*/
app-favorite-item-grid .items {
    margin: 0 0.8rem !important;
}


/*--app-cart--*/

app-cart .clear-btn-box{
    padding: 0.5rem 1rem !important;

}
app-cart .qty-button .material-icons {
    font-size: 1rem !important;
}

app-cart .qty-col {
    font-size: 1rem !important;
}

app-cart .payment-btn {
    border-radius: 500px;

    /* background: -moz-linear-gradient(left,  #f8c301 0%, #ff8a00 100%) !important;
    background: -webkit-linear-gradient(left,  #f8c301 0%,#ff8a00 100%) !important;
    background: linear-gradient(to right,  #f8c301 0%,#ff8a00 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8c301', endColorstr='#ff8a00',GradientType=1 ); */
    display: flex;
    justify-content: flex-end;
    padding: 0.2rem 1rem !important;
}

app-cart .payment-btn.mat-button-disabled {
    background: #f1f1f1 !important;
}

app-cart .payment-btn mat-icon {
    display: none !important;
}

app-cart .payment-btn::before {
    content: "";
    width: 5rem;
    height: 5rem;
    background: url(../../images/overwrite/pizzahut/icon_pizza_boy.svg) no-repeat;
    background-size: contain;
    position: absolute;
    left: -0.4rem;
    bottom: -0.3rem;
    z-index: 10;
}

app-cart .payment-count {
    border-radius: 500px 500px 0 500px !important;
    background-color: #2ecc71 !important;
    color: #fff !important;
    width: 1.6rem;
    height: 1.6rem;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem;
    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
}

app-cart .mat-button-wrapper .left-spacer {
    /* position: absolute; */
    left: -0.2rem;
    top: -0.5rem;
    z-index: 100;
}

app-cart .checkout-display app-icon {
    display: none !important;
}

/* app-cart .item-box {
    width: 8rem !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    align-items: stretch;
    box-shadow: 0 0 1rem 0 rgb(0 0 0 / 10%) !important;
}
app-cart .item-box .item-img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0.5rem !important;
}
app-cart .item-box .item-img .wrapper {
    padding-top: 75% !important;
}
app-cart .item-box .item-text {
    flex: 1 1 !important;
    padding: 0.5rem;
    max-width: none !important;
} */
app-cart .item-text {
    max-width: none !important;
    flex: 1 1;
}

app-cart .item-text .item-title {
    font-size: 0.9rem !important;
    line-height: 1.2em !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

app-cart .item-text .item-title {
    margin-bottom: 0.5rem;
}

app-cart .item-text .item-price {
    color: var(--P);
    font-size: 1rem !important;
}

app-cart .recom-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    /* position: sticky; */
    bottom: 0;
    padding-top: 1rem !important;
    /* min-height: 15rem; */
}

app-cart .recom-container h5 {
    font-size: 1rem !important;
    padding: 0;
    padding-left: 1rem;
    letter-spacing: 0 !important;
}

app-cart .cart-container,
app-cart .cart-content {
    padding: 0 !important;
}

app-mobile-cart-page app-cart .cart-content>div:not(.clear-btn-box, .recom-container) {
    padding: 0.5rem 1rem 0 1rem !important;
}

app-mobile-cart-page app-cart .special-btn:not(.edit-btn, .spr-btn) .mat-button-wrapper>span {
    display: none;
    font-size: 0.8rem !important;
}

app-cart .cart-item-container {
    padding: 0 1rem 0 1rem !important;
}

app-cart .simple-cart-lower {
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
}

app-cart .simple-cart-lower .cart-remarks {
    order: 3;
    text-align: right;
    padding: 0 1rem;
    font-size: 0.7rem !important;
    margin: 0 !important;
    text-align: right !important;
}


app-cart .recom-swiper::-webkit-scrollbar {
    height: 0.6rem !important;
}

app-cart .recom-swiper::-webkit-scrollbar-thumb {
    /* background: -moz-linear-gradient(left, #f8c301 0%, #ff8a00 100%) !important;
    background: -webkit-linear-gradient(
        left,
        #f8c301 0%,
        #ff8a00 100%
    ) !important;
    background: linear-gradient(to right, #f8c301 0%, #ff8a00 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8c301', endColorstr='#ff8a00',GradientType=1 ); */
    border-radius: 500px;
}
app-cart .div-prices {
    margin-bottom: 1.5rem !important;
    border: 0 !important;
}

app-cart .recom-swiper {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    gap: 0.5rem !important;
}

app-cart .item-box {
    margin: 0 !important;
    box-shadow: 0 0 0.2rem 0 rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem !important;
}


.plt-desktop app-cart .simple-cart-upper::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.4);
    /* background: transparent; */
    border-radius: 500px;
}

.plt-desktop app-cart .simple-cart-upper:hover::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.5);
}

/*--app-combo-dialog--*/

app-combo-dialog {
    background: #f1f1f1 !important;
}

app-combo-dialog .header {
    background: transparent !important;
    padding: 0 !important;
}

app-combo-dialog .div-top-detail {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-top: 0 !important;
}

app-combo-dialog .div-top-detail .img-box {
    border-radius: 0.5rem !important;
}

app-combo-dialog .div-top-detail .title-text {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
}

app-combo-dialog .div-top-detail .price-text {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
}

app-combo-dialog .sb-title {
    display: none;
}

app-combo-dialog .close-btn {
    color: #313131 !important;
}

app-combo-dialog .div-button {
    width: 56px !important;
    height: 56px !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

app-combo-dialog .item-group {
    margin-bottom: 0.5rem;
    border-radius: 0 0 1rem 1rem;
    overflow: hidden !important;
    padding-bottom: 1rem;
    background: #fff;
}

app-combo-dialog .item-group mat-divider {
    display: none;
}

app-combo-dialog .item-group .checkbox-text {
    min-height: 3rem;
}

app-combo-dialog .content-bg {
    background: #f1f1f1 !important;
}

app-combo-dialog .div-sub-item-grp {
    counter: i;
    counter-increment: i;

    background: #f1f1f1 !important;
    padding: 0 !important;
    height: auto !important;
}

app-combo-dialog .div-sub-item-grp.is-collapsible .step-name-select {
    border-radius: 1rem !important;
    margin-bottom: 1rem !important;
}

app-combo-dialog .step-name-select {
    padding: 1rem 1rem 0.5rem 1rem !important;
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex: 1 1 !important;
    flex-wrap: wrap !important;
}

app-combo-dialog .item-selected {
    display: block;
    width: 100%;
    padding-left: 2.5rem !important;
    padding-top: 0.5rem !important;
}

app-combo-dialog .step-no {
    display: none !important;
}

app-combo-dialog .step-name-select::before {
    content: counter(i);
    font-size: 1.2rem;
    color: var(--P800);
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 1px solid #ececec;
    margin-right: 0.5rem;
    border-radius: 500px;
}

app-combo-dialog .name-n-select {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
}

app-combo-dialog .select-n-required {
    margin: 0 !important;
    margin-top: 0.25rem !important;
}

app-combo-dialog .step-name-select .sub-item-grp-name {
    font-size: 1rem;
    /* font-weight: 600 !important; */
}

app-combo-dialog .step-name-select .tag-pls-select {
    font-size: 0.8rem !important;
}

app-combo-dialog .sub-item-name,
app-combo-dialog .sub-item-price {
    font-size: 1.1rem !important;
    color: #313131 !important;
    font-weight: 600 !important;
    flex: 1 1 auto !important;
}

app-combo-dialog .sub-item-price {
    flex: 0 1 auto !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 0.5rem !important;
}

app-combo-dialog .qty-remove-box {
    margin: 0 !important;
    padding: 0 !important;
}

app-combo-dialog .sub-item-name {
    padding-left: 0 !important;
    flex: 1 1;
}

app-combo-dialog .group-name-n-modifier {
    flex: 1 1;
}

app-combo-dialog .icon-add-outline,
app-combo-dialog .icon-add-filled {
    order: 1;
}

app-combo-dialog .sub-item-row.selected {
    background: var(--P50) !important;
}

app-combo-dialog .qty-remove-box>div {
    width: 2rem;
    order: 2;
}

app-combo-dialog .qty-remove-box .icon-remove {
    order: 1;
    margin: 0 !important;
}

/* app-combo-dialog .max-box,
app-combo-dialog .footer-left {
    display: none !important;
}*/

app-combo-dialog .subgroup-title {
    font-size: 1rem !important;
    color: #888 !important;
    background: transparent !important;
    padding: 0.875rem 1rem 0.5rem !important;
    align-items: center !important;
}

app-combo-dialog .step-name-select .modifier-btn {
    font-size: 0.8rem !important;
}

/* app-combo-dialog .add-to-cart-btn {
    border-radius: 500px;
    background: -moz-linear-gradient(left, #f8c301 0%, #ff8a00 100%) !important;
    background: -webkit-linear-gradient(left,
            #f8c301 0%,
            #ff8a00 100%) !important;
    background: linear-gradient(to right, #f8c301 0%, #ff8a00 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8c301', endColorstr='#ff8a00', GradientType=1);
} */

app-combo-dialog .sub-item-qty {
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* app-combo-dialog .combo-footer{
    border-radius: 1.5rem 1.5rem 0 0;
    margin-top: 0.5rem;
} */

/* app-combo-dialog .combo-footer .select-panel .div-spacer {
    display: none !important;
} */
app-combo-dialog .combo-footer .customize-btn {
    /* width: 100%;
    border-radius: 500px !important;
    height: 2rem;
    font-size: 1rem !important; */
    border-color: #ececec !important;
}

app-combo-dialog .combo-footer .customize-btn h5 {
    position: relative !important;
    display: inline-block !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

app-combo-dialog .combo-footer .customize-btn h5::after {
    width: 0.3rem;
    height: 0.3rem;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(100%, -100%);
    background: #f04141;
    content: "";
    border-radius: 500px;
    display: inline-block;
}

app-combo-dialog .combo-footer .customize-btn.allCompleted-full-fill h5::after {
    display: none;
}

app-combo-dialog .combo-footer .customize-btn.allCompleted-full-fill h5 {
    color: #333;
}

app-combo-dialog .modifier-btn {
    border-radius: 500px !important;
    border-color: #ececec !important;
    position: relative !important;
}

app-combo-dialog .modifier-btn::after {
    width: 0.3rem;
    height: 0.3rem;
    position: absolute;
    right: 0;
    top: 0;
    /* transform: translate(100%, -100%); */
    background: #f04141;
    content: "";
    border-radius: 500px;
    display: inline-block;
}

app-combo-dialog .modifier-btn.itemgroup-modifier-all-completed {
    color: #313131 !important;
}

app-combo-dialog .modifier-btn.itemgroup-modifier-all-completed::after {
    display: none !important;
}

/* app-combo-dialog .customize-btn {
    position: absolute !important;
    bottom: 1rem;
    right: 9rem;

    border-radius: 500px !important;
    border: 1px solid #ccc !important;
    padding: 0.2rem 0.5rem !important;
} */
app-combo-dialog .customize-btn h5 {
    font-size: 0.8rem !important;
    color: #f04141 !important;
}

app-combo-dialog .customize-btn h5::after {
    width: 0.3rem;
    height: 0.3rem;
    position: absolute;
    right: 0;
    top: 0;
    background: #f04141;
    content: "";
    border-radius: 500px;
    display: inline-block;
}

app-combo-dialog .customize-btn.allCompleted-full-fill h5 {
    color: #313131 !important;
}

app-combo-dialog .customize-btn.allCompleted-full-fill h5::after {
    display: none;
}

app-combo-dialog .div-top-detail {
    position: relative;
}

app-combo-dialog .div-expand-icon-outer .icon-expand {
    color: #313131 !important;
}

/* app-combo-dialog .qty-cart-btn {
    margin-top: 0 !important;
} */
app-mg-item-list .sub-item-row.mat-list-item .mat-list-item-content,
app-mg-item-list .subgroup-title {
    padding-left: 3rem !important;
}

app-mg-item-list .sub-item-row {
    min-height: 3.5rem !important;
}

app-mg-item-list .mat-list-item {
    background: #fff !important;
}

/*--app-checkout-page--*/
mat-toolbar {
    background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) !important;
    background-size: cover;
    color: #fff !important;
    box-shadow: 0 0 1rem 0 rgb(0 0 0 / 10%);
    /* background-position-y: -env(safe-area-inset-top); */
}

mat-toolbar button,
mat-toolbar .nav-title {
    color: #fff !important;
}

app-checkout-page .columns {
    width: 100%;
    align-self: center;
}

app-checkout-page .row-pickup .FJ-dinein-hide {
    display: none !important;
}

.plt-desktop app-checkout-page .middle .left-middle::-webkit-scrollbar-thumb,
.plt-desktop app-checkout-page .right::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.4);
    /* background: transparent; */
    border-radius: 500px;
}

.plt-desktop app-checkout-page .middle .left-middle:hover::-webkit-scrollbar-thumb,
.plt-desktop app-checkout-page .right:hover::-webkit-scrollbar-thumb {
    /* background: var(--P); */
    background: rgba(0,0,0,0.5);
}

app-checkout-page .middle .bg-left div.left-container {
    padding: 1rem;
}

app-cart-checkout app-order-price-details {
    position: sticky !important;
    background: #fff !important;
    padding-bottom: 1rem !important;
    bottom: -1px;
}

body {
    counter-reset: i;
}

/* app-checkout-page .left-middle h2::before,
app-checkout-page .benifits-container p::before {
    counter-increment: i;
    content: counter(i);
    font-size: 1.2rem;
    color: var(--PC);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    background: var(--P);
    border: 1px solid var(--P);
    margin-right: 0.5rem;
    border-radius: 500px;
    margin-right: 0.5rem;
} */

app-checkout-page .title-order-detail {
    border-radius: 1rem 1rem 0 0 !important;
    display: flex !important;
    align-items: center !important;
    font-size: 1.2rem !important;
    /* font-weight: 600 !important; */
    color: #313131 !important;
    padding: 1.5rem 1.5rem 0.75rem !important;
    text-transform: capitalize !important;
}

app-checkout-page .div-mode-detail>div {
    padding: 0 !important;
}

/* app-checkout-page .pickup-col {
    padding-left: 2.5rem !important;
} */
/* app-checkout-page .checkbox-grp-outter {
    margin-left: 2.5rem !important;
    margin-bottom: 1rem !important;
} */

app-checkout-page .store-image {
    width: 8rem;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: 0 !important;
}

app-checkout-page .checkbox-grp-outter .checkbox-grp {
    flex-direction: row !important;
    gap: 1rem !important;
}

app-checkout-page .bg-left {
    padding: 0 !important;
}

/* app-checkout-page .left-middle{
    padding: 1rem;
} */
app-checkout-page .benifits-container {
    border: 0 !important;
    margin: 0 !important;
    margin-bottom: 1rem !important;
    /* padding-bottom: 1.5rem; */
}

app-checkout-page .benifits-container h2 {
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    font-size: 1.2rem !important;
    text-transform: capitalize !important;
}

app-checkout-page .benefits-box {
    /* flex-direction: column-reverse !important; */
    background: #fff !important;
    /* margin: 0 1rem !important; */
    /* border-radius: 10px !important; */
}

app-checkout-page app-use-reward .div-selected-offer {
    margin: 0.3rem 0 1rem !important;
    border: none !important;
}

app-checkout-page .btn-pay {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 1rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
}

app-checkout-page .div-btn-overlay .btn-pay {
    background: var(--P) !important;
}

app-checkout-page app-use-reward .div-selected-offer app-icon {
    height: 18px !important;
}

app-checkout-page app-use-reward .div-selected-offer app-icon span {
    font-size: 18px !important;
}

app-checkout-page app-use-reward .div-selected-offer app-icon.icon-bin {
    color: #8d8d8d !important;
}

app-checkout-page .use-reward app-icon[name="arrow_right"] {
    color: #313131 !important;
}

app-checkout-page .div-remark-2nd {
    /* padding-left: 4rem !important; */
    margin-top: 0 !important;
}

app-checkout-page .div-payment {
    border-radius: 1rem !important;
}

app-checkout-page app-payment-selector .payment-select:first-child {
    padding: 1.5rem !important;
    padding-bottom: 0.75rem !important;
}

app-checkout-page app-payment-selector .methods-box.payment-select {

}

app-checkout-page app-payment-selector .title-payment-methods {
    display: flex;
    align-items: center;
    font-size: 1rem !important;
    /* font-weight: 600 !important; */
    color: #313131 !important;
}

/* app-checkout-page app-payment-selector .payment-select:nth-child(2) {
    padding: 0 2rem 0 4rem;
} */

app-checkout-page app-payment-selector .payment-box .method-row {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
}

app-checkout-page app-payment-selector .payment-logo {
    width: 35px;
    height: 35px;
}

app-checkout-page app-payment-selector .payment-type {
    font-size: 1.2rem;
}

app-checkout-page app-payment-selector .text-discount-message {
    border-radius: 0.8rem 0.8rem 0 0 !important;
    margin: 0 0 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1em !important;
    padding: 0.8rem 1rem !important;
}

/* app-checkout-page app-payment-selector .payment-box {
    padding: 0 2rem !important;
} */

/* app-checkout-page .div-btn-pay{
    margin-top: 1em!important;
    border-radius: 1rem;
} */
app-checkout-page .btn-pay h5 {
    padding: 0 !important;
    font-size: 1rem !important;
}

/* app-checkout-page div.div-btn-pay{
    padding: 1rem !important;
} */
body:not(.plt-desktop) app-checkout-page .right {
    display: none !important;
}



app-checkout-page .view-cart {
    /* margin-bottom: 1rem !important; */
    /* padding: 0.5rem 0 !important; */
    background: transparent !important;
    /* margin-top: 1rem !important; */
}

app-checkout-page .mat-expansion-panel .mat-expansion-panel-body {
    background: transparent !important;
}

app-checkout-page .pu-left h5 {
    font-size: 0.9rem !important;
    color: var(--P) !important;
}

app-cart-checkout.div-checkout-cart {
    width: auto !important;
    max-width: 100% !important;
}

app-cart-checkout {
    border-radius: 1rem;
    margin: 0 !important;
}

app-cart-checkout .cart-content{
    padding: 1rem 0 !important;
}

app-cart-checkout .text-my-cart{
    font-size: 1.2rem !important;
    color: #313131 !important;
    text-transform: capitalize !important;
    width: 100% !important;
    padding: 0 !important;
}
app-cart-checkout .underline-my-cart {
    display: none !important;
}

app-cart-checkout .item-divider {
    display: none !important;
}


app-cart-checkout .main-item .main-qty-no,
app-cart-checkout .main-item .qty-x,
app-cart-checkout .main-item .item-name,
app-cart-checkout .main-item .main-item-price-extra,
app-cart-checkout .main-item .main-item-price {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    color: #313131 !important;
    font-weight: normal !important;
    line-height: 1.2em !important;
}

app-cart-checkout .main-item .main-item-price {
    margin-left: 1rem !important;
}

app-cart-checkout .main-item .main-item-price-extra {
    font-weight: normal !important;
    margin-left: 0.5rem;
}

app-cart-checkout .sub-item {
    padding-left: 1rem;
}

app-cart-checkout .sub-item .item-name {
    font-size: 0.8rem !important;
    color: #878787 !important;
    font-weight: normal !important;
    line-height: 1.3em !important;
    margin-bottom: 0 !important;
}

app-cart-checkout .modifier-selected {
    font-size: 1rem;
}

app-checkout-page app-order-price-details .row-detail-price h3,
app-checkout-page app-order-price-details .row-detail-price h4,
app-checkout-page app-order-price-details .grand-total h3,
app-checkout-page app-order-price-details .grand-total h4 {
    color: #313131 !important;
    line-height: 1.3em !important;
    font-weight: normal !important;
}

app-checkout-page app-order-price-details .grand-total h3,
app-checkout-page app-order-price-details .grand-total h4 {
    color: var(--P800) !important;
    font-weight: 600 !important;
}

app-checkout-page div.pu-left.mode-detail-title {
    margin-bottom: 0.5rem !important;
    align-items: center !important;
}

app-checkout-page .pu-middle .store-details {
    color: #828282 !important;
    font-size: 0.9rem !important;
}

/*--app-use-reward-dialog--*/
app-sub-bar::before{
    /* position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    content: "";
    z-index: 0; */
    /* background-position-y: -env(safe-area-inset-top); */

}

app-sub-bar .mat-toolbar {
    color: #fff !important;
    /* background-position-y: -env(safe-area-inset-top); */
    box-shadow: none !important;
    height: 4rem !important;
    background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat !important;
    background-size: cover !important;
    background-position-y: calc(-1 * env(safe-area-inset-top)) !important;
}

app-sub-bar .mat-toolbar .div-button button,
app-sub-bar .mat-toolbar .sb-title {
    color: #fff !important;
    font-weight: normal !important;
    font-size: 1rem !important;
}

app-use-reward-dialog .footer .confirm-btn {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 1rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
}

/*--app-alacarte-dialog--*/

app-alacarte-dialog .close-btn {
    color: #313131 !important;
}

app-alacarte-dialog .div-button {
    width: 56px !important;
    height: 56px !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

app-alacarte-dialog .header {
    padding: 0 !important;
}

app-alacarte-dialog .div-app-img {
    width: 60% !important;
    border-radius: 1rem !important;
}

app-alacarte-dialog .div-padding {
    padding: 2rem !important;
}

/* app-alacarte-dialog .item-grid-checkout-btn {
    border-radius: 500px !important;
    background: -moz-linear-gradient(left, #f8c301 0%, #ff8a00 100%) !important;
    background: -webkit-linear-gradient(left,
            #f8c301 0%,
            #ff8a00 100%) !important;
    background: linear-gradient(to right, #f8c301 0%, #ff8a00 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8c301', endColorstr='#ff8a00', GradientType=1);
} */

app-alacarte-dialog .div-item-img {
    margin: 0 !important;
    box-shadow: none !important;
}

app-alacarte-dialog .title-text {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
}

app-alacarte-dialog .price-text {
    font-size: 1.4rem !important;
    font-weight: normal !important;
    color: var(--P800) !important;
}

app-alacarte-dialog .span-underline {
    display: none !important;
}

app-alacarte-dialog .combo-footer .customize-btn {
    width: 100%;
    border-radius: 500px !important;
    height: 2rem;
    font-size: 1rem !important;
    border-color: #ececec !important;
}

app-alacarte-dialog .combo-footer .customize-btn h5 {
    position: relative !important;
    display: inline-block !important;
}

/* app-alacarte-dialog .combo-footer .customize-btn h5::after {
    width: 0.3rem;
    height: 0.3rem;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(100%, -100%);
    background: #f04141;
    content: "";
    border-radius: 500px;
    display: inline-block;
} */

app-alacarte-dialog .combo-footer .customize-btn.allCompleted-full-fill h5::after {
    display: none;
}

app-alacarte-dialog .combo-footer .customize-btn.allCompleted-full-fill h5 {
    color: #333;
}

app-alacarte-dialog .combo-footer {
    display: flex;
    gap: 0.5rem;
}

app-alacarte-dialog .select-panel {
    order: 2;
    flex: 0.5 0;
}

app-alacarte-dialog .qty-cart-btn {
    order: 1;
    flex: 1.5 0;
}

app-alacarte-dialog .customize-btn {
    margin: 0 !important;
    height: 100% !important;
}

/*--
app-all-modifiers-dialog
app-segment-modifiers-dialog
--*/
app-segment-modifiers-dialog .header {
    height: 4rem !important;
}

app-all-modifiers-dialog .close-btn,
app-segment-modifiers-dialog .close-btn {
    color: #313131 !important;
}

app-all-modifiers-dialog .div-button,
app-segment-modifiers-dialog .div-button {
    width: 56px !important;
    height: 56px !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

app-all-modifiers-dialog .header {
    padding: 0 !important;
}

app-all-modifiers-dialog .sub-item-path *,
app-segment-modifiers-dialog .sub-item-path * {
    font-size: 1rem !important;
}

app-all-modifiers-dialog .select-num,
app-segment-modifiers-dialog .select-num {
    font-size: 0.8rem !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem !important;
}

/* app-all-modifiers-dialog .footer-row button.completed,
app-segment-modifiers-dialog .footer-row button.completed {
    border-radius: 500px !important;
    background: -moz-linear-gradient(left, #f8c301 0%, #ff8a00 100%) !important;
    background: -webkit-linear-gradient(left,
            #f8c301 0%,
            #ff8a00 100%) !important;
    background: linear-gradient(to right, #f8c301 0%, #ff8a00 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8c301', endColorstr='#ff8a00', GradientType=1);
} */

app-all-modifiers-dialog .mat-chip-list mat-chip,
app-segment-modifiers-dialog .mat-chip-list mat-chip {
    border-radius: 0.6rem !important;
    font-size: 1rem !important;
    padding: 0 0.5rem !important;
    /* color: #313131 !important; */
}

app-all-modifiers-dialog .mat-chip-list mat-chip.mat-chip-selected .minus-qty-btn app-icon,
app-all-modifiers-dialog .mat-chip-list mat-chip.mat-chip-selected .modifier-qty-add .selected-qty,
app-segment-modifiers-dialog .mat-chip-list mat-chip.mat-chip-selected .minus-qty-btn app-icon,
app-segment-modifiers-dialog .mat-chip-list mat-chip.mat-chip-selected .modifier-qty-add .selected-qty {
    color: #313131 !important;
}

app-all-modifiers-dialog .btn-confirm,
app-segment-modifiers-dialog .btn-confirm {
    border-radius: 0.6rem;
}

/*--app-mode-store-selector-page--*/
app-mode-store-selector-page app-nav-bar .header,
app-directory-page app-nav-bar .header{
    background: url(../../images/phhk/phhk_backdrop_nav_bar_2.jpg) no-repeat !important;
    background-size: cover !important;
    background-position-y: calc(-1 * env(safe-area-inset-top)) !important;
}

app-directory-page app-nav-bar .flex .left-box .title-brand {
    color: transparent;
}

.title-brand{
    margin-left: 0 !important;
}

/* app-mode-store-selector-page .inner-directory-header,
app-directory-page .inner-directory-header{
    background: url(../../images/phhk/phhk_backdrop_nav_bar_2.jpg) no-repeat !important;
    background-size: cover !important;
    background-position-y: -4rem !important;
    background-repeat: no-repeat !important;
} */

app-mode-store-selector-page .directory-wrapper {
    /* margin-bottom: 1.5rem !important; */
    /* overflow-y: hidden !important; */
    /* padding-bottom: 1rem !important; */
}

app-mode-store-selector-page .swiper-wrapper,
app-directory-page .swiper-wrapper {
    padding: 0 1rem !important;
}


app-directory-page mat-button-toggle-group {
    gap: 0.5rem !important;
    padding: 0 !important;
}

app-directory-page .mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle {
    border: 0 !important;
}

app-mode-store-selector-page mat-button-toggle-group button,
app-directory-page mat-button-toggle-group button {
    height: 100% !important;
    /* border-radius: 0.3rem; */
}

app-mode-store-selector-page .swiper-wrapper,
app-directory-page .swiper-wrapper {
    gap: 0rem !important;
    /* margin: 0 1.5rem !important; */
    width: auto !important;
    /* border-radius: 10px !important; */
    overflow: hidden !important;
    padding: 0 !important;
    box-shadow: -4px 16px 36px rgb(218 218 218 / 14%) !important;
}

app-mode-store-selector-page mat-button-toggle-group.directory .text-mode,
app-directory-page mat-button-toggle-group.directory .text-mode {
    /* font-weight: 600 !important; */
    font-family: var(--CF0) !important;
    font-size: 1rem !important;
}

app-directory-page mat-button-toggle-group .mat-button-toggle-label-content {
    font-weight: 600 !important;
    color: #313131 !important;
    font-size: 1.1rem !important;
    padding: 0 !important;
}





app-mode-store-selector-page .swiper-slide:nth-child(2) app-icon,
app-directory-page .swiper-slide:nth-child(2) app-icon {
    /* background-image: url(../../icons/svg/phhk-mode-takeaway.svg) !important;
    background-repeat: no-repeat;
    background-size: cover; */
    -webkit-mask-image: url(../../icons/svg/phhk-mode-takeaway.svg);
    mask-image: url(../../icons/svg/phhk-mode-takeaway.svg);
    background: #c5c5c5 !important;
    width: 22px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

app-mode-store-selector-page .swiper-slide:nth-child(3) app-icon,
app-directory-page .swiper-slide:nth-child(3) app-icon {
    -webkit-mask-image: url(../../icons/svg/phhk-mode-delivery.svg);
    mask-image: url(../../icons/svg/phhk-mode-delivery.svg);
    background: #c5c5c5 !important;
    width: 22px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}



app-mode-store-selector-page mat-button-toggle-group.directory .mat-button-toggle-checked button,
app-directory-page mat-button-toggle-group .mat-button-toggle-checked button {
    box-shadow: none !important;
    /* background: #fff !important; */
    color: var(--P) !important;
}

/* app-mode-store-selector-page mat-button-toggle-group.directory .mat-button-toggle-checked .tab-shape{
    background-color: #fff !important;
} */



app-mode-store-selector-page .div-store-box,
app-directory-page .div-store-box {
    padding: 0 !important;
}

app-mode-store-selector-page .row-select,
app-directory-page .row-select {
    gap: 0.5rem !important;
}

app-mode-store-selector-page .row-select>*,
app-directory-page .row-select>* {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

app-mode-store-selector-page .div-gps button,
app-directory-page .div-gps button,
app-queue-page .div-gps button {
    background: none !important;
    color: var(--P) !important;
    border-radius: 0.3rem !important;
}


/* app-mode-store-selector-page .search-province-city-label, */
/* app-directory-page .search-province-city-label,
app-queue-page .search-province-city-label {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
    font-size: 1rem !important;
    color: #313131 !important;
} */

app-mode-store-selector-page .store-name,
app-directory-page .store-name {
    font-size: 0.9rem !important;
    /* color: var(--P) !important; */
    line-height: 1.2em !important;
}

app-mode-store-selector-page .store-addr,
app-directory-page .store-addr {
    color: #888 !important;
    font-size: 0.8rem !important;
    line-height: 1.2em !important;
    font-weight: normal !important;
}

app-mode-store-selector-page .row-select .mat-select-arrow-wrapper,
app-directory-page .row-select .mat-select-arrow-wrapper {
    transform: translateY(10%) !important;
}


/* app-mode-store-selector-page .swiper-slide,
app-directory-page .swiper-slide {

    flex: 1 1 auto;
} */

app-mode-store-selector-page .swiper-slide .mat-button-toggle-label-content {
    padding: 0 !important;
}

app-mode-store-selector-page .container,
app-directory-page .container {
    /* background: var(--public-bg) !important; */
}

app-mode-store-selector-page .directory,
app-directory-page .directory {
    /* height: 3.5rem !important; */
}

app-mode-store-selector-page app-search-bar .mat-form-field-wrapper,
app-directory-page app-search-bar .mat-form-field-wrapper,
app-queue-page app-search-bar .mat-form-field-wrapper {
    padding: 0 !important;
    margin: 0 !important;
}

app-mode-store-selector-page app-search-bar .div-gps,
app-directory-page app-search-bar .div-gps,
app-queue-page app-search-bar .div-gps {
    padding: 0 !important;
    /* margin-left: 1rem !important; */
    order: 1;
}

app-mode-store-selector-page app-search-bar form,
app-directory-page app-search-bar form,
app-queue-page app-search-bar form {
    order: 2;
}

app-mode-store-selector-page app-search-bar .div-search-bar,
app-directory-page app-search-bar .div-search-bar,
app-queue-page app-search-bar .div-search-bar {
    padding: 0 !important;
    margin: 0rem !important;
}

app-mode-store-selector-page app-search-bar .mat-form-field-outline-start,
app-queue-page app-search-bar .mat-form-field-outline-start {
    border-radius: 10px 0 0 10px !important;
}

app-mode-store-selector-page app-search-bar .mat-form-field-outline-end,
app-queue-page app-search-bar .mat-form-field-outline-end {
    border-radius: 0 10px 10px 0 !important;
}

app-mode-store-selector-page app-search-bar .mat-form-field-infix,
app-queue-page app-search-bar .mat-form-field-infix {
    font-size: 0.9rem !important;
    letter-spacing: -0.3px !important;
}

app-mode-store-selector-page app-search-bar .mat-form-field-flex,
app-queue-page app-search-bar .mat-form-field-flex {
    padding: 0 1rem !important;
}

/*--app-enlarge-item-image-dialog--*/
app-enlarge-item-image-dialog>div:first-child {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
}

app-enlarge-item-image-dialog .text-white {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

app-enlarge-item-image-dialog .text-white app-icon {
    display: none !important;
}

app-enlarge-item-image-dialog .text-white::before {
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-image: url(../../images/overwrite/pizzahut/cdc_icon_close.svg);
    -webkit-mask-image: url(../../images/overwrite/pizzahut/cdc_icon_close.svg);
    content: "";
    display: inline-block;

    background-color: #fff;
    width: 4rem;
    height: 4rem;
}

/*--app-offer-card--*/
app-offer-card {
    background: transparent !important;
}

app-offer-card .reward-card-box {
    padding: 0.5rem !important;
    background: #fff;
    overflow: hidden !important;
    position: relative;
    /* box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1) !important; */
}

app-use-reward-dialog .content-upper {
    overflow: auto !important;
}

app-use-reward-dialog {
    background-color: #f1f1f1 !important;
}

app-offer-card .reward-info {
    height: auto !important;
    min-height: 4rem;
}

app-offer-card .reward-card-box.selected {
    background: #EAD6C7 !important;
    box-shadow: none !important;
}

app-offer-card .details-btn button {
    background: none !important;
}

/* app-offer-card .reward-card-box.selected::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--P);
    width: 0.5rem;
} */
app-offer-card .reward-card-box app-img {
    border-radius: 0.3rem !important;
    overflow: hidden !important;
    flex: 0 0 8.2rem !important;
}

app-offer-card .reward-card-box .expand-panel {
    margin-top: 0.25rem !important;
    font-size: 0.7rem !important;
    line-height: 1.4em !important;
    color: #333 !important;
}

app-offer-card .reward-card-box .reward-info .reward-name {
    font-size: 0.9rem !important;
    line-height: 1.3em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: --webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}

app-offer-card .reward-card-box .reward-info .reward-date {
    font-size: 0.7rem !important;
    line-height: 1.2em !important;
    margin-bottom: 0.5rem !important;
}

app-offer-card .reward-card-box .fixed-panel {
    margin-bottom: 0 !important;
    align-items: flex-start;
}

app-offer-card .select-box {
    width: 1.5rem !important;
    height: 1.5rem !important;
    flex: 0 0 1.5rem !important;
    border-radius: 500px;
    border: 1px solid #aaa;
    overflow: hidden;
    position: relative;
    align-self: center;
    display: none !important;
}

app-offer-card .reward-card-box.selected .select-box {
    background: var(--P);
    border: 0;
}

app-offer-card .reward-card-box.selected .select-box::before {
    content: "";
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: url(../../images/overwrite/pizzahut/cdc_icon_check.svg);
    -webkit-mask-image: url(../../images/overwrite/pizzahut/cdc_icon_check.svg);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: 90%;
    -webkit-mask-size: 90%;
}

/* .payment-method-detail app-cards-token,
.payment-method-detail app-mpgs-creditcard {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
} */

app-alipay-eft-hk h6,
app-alipay-eft-cn h6,
app-octopus-redirect-mpay h6,
app-wechat-redirect h6 {
    padding: 0 1rem !important;
}

app-mpgs-creditcard .field-id {
    width: 100%;
}

app-offer-card .select-box .div-select,
app-offer-card .select-box .div-selected {
    display: none !important;
    visibility: hidden !important;
}

/*--app-order-detail-page--*/
/* app-order-detail-page .icon-wrapper app-icon{
    zoom: 0.6;
} */

/* app-order-detail-page .update-time-text {
    margin-top: 1rem;
} */

/*--app-recommendation-grid-section--*/
app-recommendation-grid-section .item-name h3 app-recommendation-grid-section .price-box p {
    font-size: 1.1rem !important;
}

/*--app-store-list--*/
app-store-list {
    margin: 1rem 0 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    /* background: #fff !important; */
    padding-bottom: 1rem !important;
    /* box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.05) !important; */
    padding: 0 1rem !important;
    flex: 1 1 auto !important;
}

/*--app-takeaway--*/
/* app-takeaway {
    margin: 1rem 1.5rem !important;
    background: #fff !important;
    border-radius: 10px !important;
} */

app-takeaway .outer-store-details .store-name {
    color: var(--P) !important;
    font-size: 0.9rem !important;
    line-height: 1.2em !important;
    margin-bottom: 0.2rem;
    /* font-weight: 600 !important; */
}

app-takeaway app-store-list app-store-card .div-store-box .wrapper-store-box .store-title .store-name {
    /* color: #c8102e; */
    color: var(--P) !important;
}

app-takeaway .inner-visited-store {
    margin: 1rem 0rem 0rem !important;
}

/* app-takeaway .inner-visited-store span {
    background: none !important;
    font-size: 0.9rem !important;
} */

app-takeaway .outer-store-details {
    background: #fff !important;
    padding: 0.7rem 0.7rem 0.7rem 1rem !important;
}

app-takeaway .outer-store-details app-icon span {
    font-size: 24px !important;
}

app-takeaway .loading-center {
    margin: 2rem 0 !important;
}

/*--app-queue-page--*/
app-queue-page app-takeaway {
    margin: 0 !important;
}

app-queue-page app-store-card .div-store-box {
    padding: 0 !important;
}

/* app-queue-page app-search-bar .div-gps{
    padding: 0 !important;
    margin-left: 1rem !important;
}
app-queue-page app-search-bar .div-gps .btn-gps{
    background: var(--P) !important;
    color: var(--PC) !important;
    border-radius: 0.3rem !important;
}
app-queue-page app-search-bar .div-gps button app-icon{
    color: var(--PC) !important;
} */

/*--app-store-card--*/
app-store-card .mat-card {
    /* border: none !important; */
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15) !important;
    margin-bottom: 1rem !important;
    /* padding: 0.7rem 0.7rem 0.7rem 1rem !important; */
}

/* app-store-card .div-store-selected {
    top: 0rem !important;
    right: 0.5rem !important;
} */

app-store-card .store-selected-label {
    border-radius: 1rem !important;
    padding: 0.2rem 0.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.4em !important;
}

/*--app-search-bar--*/
app-search-bar .div-search-bar {
    background: none !important;
}

app-search-bar {
    margin: 1.5rem 1rem 1rem !important;
}

/*--app-delivery-add-address--*/



app-delivery-add-address .flex-col .mat-form-field-outline-start {
    border-radius: 10px 0 0 10px !important;
}

app-delivery-add-address .flex-col .mat-form-field-outline-end {
    border-radius: 0 10px 10px 0 !important;
}

app-delivery-add-address .footer button {
    font-size: 1rem !important;
    text-transform: capitalize !important;
    border-radius: 10px !important;
}

app-delivery-add-address .footer {
    box-shadow: none !important;
}

app-delivery-add-address .btn-submit {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 1rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
}

app-delivery-add-address .btn-submit.mat-button-disabled {
    background: #0000001F !important;
}

/*--app-delivery--*/
app-delivery .text-no-saved {
    margin: 2.5rem !important;
    line-height: 1.3em !important;
    color: #626262 !important;
    font-size: 0.9rem !important;
    font-weight: normal !important;
}

/*--app-tab-bar--*/
app-tab-bar .tab.animated {
    animation: none !important;
    transition: none !important;
    background: transparent !important
}

app-tab-bar .tabbar {
    background: var(--sub-brand1) !important;
    border-top: none !important;
    border-radius: 1rem !important;
}

app-tab-bar {
    margin: 0.5rem 1rem;
    border-radius: 0.9rem;
    box-shadow: 3px 4px 10px rgb(0 0 0 / 9%);
}

app-tab-bar .bigBtn .wrapper-tabbar-content {
    background: var(--sub-brand2) !important;
    border: 0 !important;
    background: url(../../images/phhk/phhk-big-btn.svg) no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    width: 4.5rem !important;
    height: 4.8rem !important;
    aspect-ratio: 1/1 !important;
    /* transform: translate(-0.05rem, -0.05rem) rotate(0) !important; */
    animation: customshake 1.18s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards infinite !important;
}

@keyframes customshake {
    0% {
        transform: translate(0, 0) rotate(0);
    }
    15% {
        transform: translate(-0.05rem, -0.05rem) rotate(5deg);
    }
    30% {
        transform: translate(0.05rem, 0.05rem) rotate(-5deg);
    }
    45% {
        transform: translate(-0.03rem, -0.03rem) rotate(4deg);
    }
    60% {
        transform: translate(0.03rem, 0.03rem) rotate(-4deg);
    }
    75% {
        transform: translate(-0.02rem, -0.02rem) rotate(2deg);
    }
    85% {
        transform: translate(0.02rem, 0.02rem) rotate(-2deg);
    }
    92% {
        transform: translate(-0.01rem, -0.01rem) rotate(1deg);
    }
    100% {
        transform: translate(0, 0) rotate(0);
    }
}

app-tab-bar .bigBtn app-icon {
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0.1rem !important;
    margin-right: 0.2rem !important;
}

app-tab-bar .bigBtn app-icon svg {
    font-size: 41px !important;
}

app-tab-bar .bigBtn h3 {
    margin-right: 0.2rem !important;
}

/*--app-side-menu--*/
app-side-menu .page-btn p {
    font-size: 0.9rem !important;
}



app-side-menu .close-btn {
    display: none !important;
}

/*--app-main-item-modifiers, app-item-modifiers-dialog--*/
app-main-item-modifiers .header,
app-item-modifiers-dialog .header {
    background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) !important;
    background-size: cover !important;
    color: #313131 !important;
    box-shadow: none !important;
    height: 4rem !important;
    min-height: 4rem !important;
    background-size: cover;
    /* background-position-y: -env(safe-area-inset-top); */
}

app-main-item-modifiers .header button,
app-item-modifiers-dialog .header button {
    margin-bottom: 2px !important;
}

app-item-modifiers-dialog {
    background: #fff !important;
}

app-main-item-modifiers .main-item-modifiers-component,
app-item-modifiers-dialog .mat-tab-group .mat-tab-body-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    height: 100% !important;
}

app-main-item-modifiers .btn-mitem,
app-all-modifiers-dialog .btn-mitem,
app-item-modifiers-dialog .btn-mitem {
    background: #fff !important;
    min-height: auto !important;
    border-radius: 1rem !important;
    /* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.12) !important; */
    padding: 1rem !important;
}

app-main-item-modifiers .modifier-qty-panel,
app-item-modifiers-dialog .modifier-qty-panel {
    display: none !important;
}

app-main-item-modifiers .btn-mitem-inner>h3,
app-all-modifiers-dialog .btn-mitem-inner>h3,
app-item-modifiers-dialog .btn-mitem-inner>h3 {
    margin-bottom: 0 !important;
    line-height: 1.3em !important;
    font-size: 0.9rem !important;
    font-weight: normal !important;
}

app-main-item-modifiers .btn-mitem-inner>h5,
app-all-modifiers-dialog .btn-mitem-inner>h5,
app-item-modifiers-dialog .btn-mitem-inner>h5 {
    margin-top: 0.25rem !important;
}

app-main-item-modifiers .select-n-required,
app-all-modifiers-dialog .select-n-required,
app-item-modifiers-dialog .select-n-required {
    /* margin-left: 1rem !important;
    margin-right: 1rem !important; */
    margin: 0 !important;
    margin-bottom: 0.5rem !important;

}

app-main-item-modifiers .select-n-required .select-num,
app-all-modifiers-dialog .select-n-required .select-num,
app-item-modifiers-dialog .select-n-required .select-num {
    /* border-radius: 0.25rem !important; */
    background: transparent !important;
    color: var(--W) !important;
    margin: 0 !important;
    line-height: 1.1em !important;
    font-size: 12px !important;
    padding: 0 !important;
}

app-main-item-modifiers .select-n-required .select-num.completed,
app-all-modifiers-dialog .select-n-required .select-num.completed,
app-item-modifiers-dialog .select-n-required .select-num.completed {
    color: var(--sub-brand1);
}

app-main-item-modifiers mat-tab-body,
app-all-modifiers-dialog mat-tab-body,
app-item-modifiers-dialog mat-tab-body {
    overflow: hidden !important;
}

app-main-item-modifiers mat-tab-body .mat-tab-body-content,
app-all-modifiers-dialog mat-tab-body .mat-tab-body-content,
app-item-modifiers-dialog mat-tab-body .mat-tab-body-content {
    height: 100% !important;
}

app-main-item-modifiers app-item-modifiers>div:not([id^="section"])
/* app-item-modifiers-dialog app-item-modifiers>div:not([id^="section"]) */{
    height: 100% !important;
}

app-item-modifiers-dialog app-item-modifiers {
    background: var(--public-bg) !important;
}

app-item-modifiers-dialog app-item-modifiers .modifier-choice-outer {
    background: var(--public-bg) !important;
    padding: 1rem 1.3rem !important;
}

app-main-item-modifiers app-item-modifiers .modifier-choices>div:first-child,
app-item-modifiers-dialog app-item-modifiers .modifier-choices>div:first-child {
    position: sticky;
    top: 0;
    z-index: 100;
    /* background: #fff; */
    padding: 0.5rem;
}

app-stripe-creditcard .row-card-detail iframe::ng-deep body {
    background: red !important;
}

app-main-item-modifiers .footer-row button,
app-item-modifiers-dialog .footer-row button {
    padding: 0.75rem !important;
    font-size: 1rem !important;
    border-radius: 0.8rem !important;
    text-transform: capitalize !important;
    background: var(--sub-brand1) !important;

}

app-main-item-modifiers .mat-tab-header,
app-item-modifiers-dialog .mat-tab-header {
    padding-left: 0 !important;
}

app-main-item-modifiers .mat-tab-label,
app-item-modifiers-dialog .mat-tab-label {
    overflow: hidden !important;
}

app-main-item-modifiers .mat-tab-label-content,
app-item-modifiers-dialog .mat-tab-label-content {
    margin-right: 0 !important;
    padding: 0.5rem !important;
}


/*--app-multi-steps-page-item-dialog--*/
app-multi-steps-page-item-dialog .multi-steps-container {
    background: var(--public-bg) !important;
}

app-multi-steps-page-item-dialog .item-img app-img .wrapper {
    padding-top: 100% !important;
}

app-multi-steps-page-item-dialog .base-item-title-text {
    font-size: 1.3rem !important;
    letter-spacing: unset !important;
    color: #000 !important;
    margin-bottom: 0 !important;
    font-weight: 600 !important;
}

app-multi-steps-page-item-dialog .header-item-title h2 {
    margin-top: 0.8rem !important;
}

app-multi-steps-page-item-dialog .base-item-mes-box .mat-divider {
    display: none !important;
}

app-multi-steps-page-item-dialog .combo-inner {
    padding: 0 1.3rem !important;
    margin-top: 1rem !important;

}

app-multi-steps-page-item-dialog .multi-steps-box {
    background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat !important;
    background-size: 100% auto !important;
    background-position-y: -4rem !important;
    position: relative;
    top: -1px;
    /* background-position-y: calc(-4rem - env(safe-area-inset-top)) !important; */
}

app-multi-steps-page-item-dialog mat-horizontal-stepper .mat-horizontal-content-container {
    background: url(../../images/phhk/phhk-combo-bg.jpg) #f6f6f6 repeat !important;
    background-size: cover !important;
    border-radius: 2rem 0 0 0 !important;
    z-index: 1 !important;
}

app-multi-steps-page-item-dialog .btn-combo {
    background: #fff !important;
    padding: 0.5rem 0.8rem !important;
    border-radius: 0.8rem !important;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.04) !important;
}

app-multi-steps-page-item-dialog .btn-combo.selected {
    /* border-left: 6px solid var(--P) !important; */
    box-shadow: none !important;
    background: #EAD6C7 !important;
}

app-multi-steps-page-item-dialog .btn-combo .item-img{
    display: none !important;
}
/* app-multi-steps-page-item-dialog .btn-combo.selected::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.4rem;
    background: var(--P);
} */
app-multi-steps-page-item-dialog .btn-combo-inner {
    order: 2 !important;
    padding: 0rem 0.5rem 0rem 0.3rem !important;
}

app-multi-steps-page-item-dialog .btn-combo-inner h3 {
    color: #000 !important;
    font-size: 1rem !important;
    /* line-height: 1.2em !important; */
    font-weight: 600;
}

app-multi-steps-page-item-dialog .btn-combo-inner h5 {
    letter-spacing: unset !important;
    font-size: 0.9rem !important;
}

app-multi-steps-page-item-dialog .item-img {
    order: 1 !important;
    margin-right: 0 !important;
    flex: 0 0 6rem !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
}

app-multi-steps-page-item-dialog .add-qty-box {
    position: absolute !important;
    right: 0.65rem !important;
    bottom: 0.65rem !important;
    margin: 0 !important;
    background: #fff !important;
    border-radius: 5rem !important;
    width: 25px !important;
    height: 25px !important;
    display: none !important;
}

app-multi-steps-page-item-dialog .combo-footer {
    box-shadow: none !important;
    padding: 1rem !important;
}

app-multi-steps-page-item-dialog .footer-qty-panel {
    box-shadow: 1px 1px 7px rgb(0 0 0 / 10%) !important;
    border-radius: 8px !important;
    padding: 0.3rem !important;
    margin-right: 0.9rem !important;
}

app-multi-steps-page-item-dialog .btn-submit {
    padding: 0.3rem !important;
    border-radius: 8px !important;
    box-shadow: 1px 1px 11px rgba(0, 0, 0, 0.09) !important;
}

app-multi-steps-page-item-dialog .btn-submit .mat-button-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

app-multi-steps-page-item-dialog .btn-submit .mat-button-wrapper span {
    padding: 0 0.2rem !important;
}

app-multi-steps-page-item-dialog .sub-item-grp {
    background: none !important;
    border-radius: 2rem 0 0 0 !important;
}

app-multi-steps-page-item-dialog .sub-item-grp-name {
    color: #000 !important;
    line-height: 1.5em !important;
}

app-multi-steps-page-item-dialog .text-required {
    padding: 0 !important;
    margin-left: 0.5rem;
    padding-left: 0.5rem !important;
    /* border-left: 1px solid var(--P); */

}

app-multi-steps-page-item-dialog mat-horizontal-stepper .mat-horizontal-stepper-header-container {
    overflow-y: hidden !important;
    overflow-x: auto !important;
    background: transparent !important;
    /* padding-top: 0 !important;
    padding-bottom: 1.5rem !important; */
}


app-multi-steps-page-item-dialog .hideStepHeader .main-item-img {
    margin: 1rem !important;
}

app-multi-steps-page-item-dialog .btn-submit.current-step-not-completed {
    background: #ececec !important;
}

/* app-multi-steps-page-item-dialog mat-horizontal-stepper .mat-step-icon {
    background: #fff !important;
    color: #000 !important;
} */

/* app-multi-steps-page-item-dialog mat-horizontal-stepper .mat-step-icon-selected {
    background: var(--sub-brand1) !important;
    color: #fff !important;
    box-shadow: none !important;
} */

app-multi-steps-page-item-dialog mat-horizontal-stepper .mat-stepper-horizontal-line {
    border-color: #fff !important;
    border-top-width: 2px !important;
}

app-multi-steps-page-item-dialog .item-img app-img {
    width: 16rem !important;
    margin: 0 auto !important;
    border-radius: 1.5rem !important;
    overflow: hidden;
}

app-multi-steps-page-item-dialog .combo-footer {
    background: var(--public-bg) !important;
}

app-multi-steps-page-item-dialog .btn-submit {
    background: var(--sub-brand1) !important;
}

app-multi-steps-page-item-dialog .main-item-img {
    margin-bottom: 1rem !important;
    margin-top: 1rem !important;
    /* display: none !important; */
}

app-multi-steps-page-item-dialog .text-required {
    color: #888 !important;
    font-size: 12px !important;
    background: transparent !important;
}

app-multi-steps-page-item-dialog .tag-pls-select {
    color: var(--P300) !important;
    margin: 0 !important;
    line-height: 1.1em !important;
    font-size: 12px !important;
    flex: 1 1 auto !important;
}

app-multi-steps-page-item-dialog .selected-counter.completed {
    background: var(--P) !important;
    color: var(--PC) !important;
    border-radius: 0.25rem !important;
    display: none !important;
}

/* app-multi-steps-page-item-dialog .select-n-required{
    height: 2rem !important;
} */

/* app-multi-steps-page-item-dialog .lower{
    margin-top: 2rem !important;
} */




/*--app-mg-item-list-with-img--*/
app-mg-item-list-with-img .sub-item-row {
    /* background: #f6f6f6 !important; */
    margin: 0.5rem 0 0.8rem !important;
    border-radius: 0.8rem !important;
    padding: 0 !important;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.04) !important;
}

app-mg-item-list-with-img .checkbox-text .sub-item-box {
    order: 2 !important;
    height: 100% !important;
    padding: 0.5rem 0.5rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

app-mg-item-list-with-img .checkbox-text .sub-item-box h3 {
    height: 100% !important;
    color: #000 !important;
    font-size: 0.9rem !important;
    line-height: 1.2em !important;
}

app-mg-item-list-with-img app-img {
    flex: 0 0 5rem !important;
    width: 5rem !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
}

app-mg-item-list-with-img .checkbox-text .icon-add-outline {
    display: none !important;
}

app-mg-item-list-with-img .checkbox-text .icon-add-outline,
app-mg-item-list-with-img .checkbox-text .icon-add-filled {
    position: absolute !important;
    right: 0.65rem !important;
    bottom: 0.65rem !important;
    font-size: 26px !important;
    width: 26px !important;
    height: 26px !important;
}

app-mg-item-list-with-img .checkbox-text .icon-add-filled {
    /* background: #fff !important; */
    border-radius: 5rem !important;
    display: none !important;
}

app-mg-item-list-with-img .price-modifier-col {
    flex: 1 1 auto !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: space-between !important;
}

app-mg-item-list-with-img .price-modifier-col h4 {
    font-size: 0.9rem !important;
}

app-mg-item-list-with-img .modifier-btn {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.7rem !important;
    border-radius: 500px !important;
    border-color: var(--P) !important;
    color: var(--P800) !important;

}

app-mg-item-list-with-img .modifier-btn.itemgroup-modifier-all-completed {
    background: var(--P) !important;
    color: var(--PC) !important;

}

app-mg-item-list-with-img .mat-list .sub-item-row.selected {
    /* border-left: 6px solid var(--P) !important; */
    box-shadow: none !important;
    background: #EAD6C7 !important;
}

/* app-mg-item-list-with-img .mat-list .sub-item-row.selected::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.4rem;
    background: var(--P);
} */

/* app-mg-item-list-with-img .sub-item-choices {
    padding: 0 1rem !important;
} */

app-mg-item-list-with-img .mat-selection-list {
    padding: 0rem 1.3rem 3rem !important;
}

/*--app-store-list-page--*/


app-store-list-page .scroll-list {
    padding: 1rem !important;
    padding-top: 0 !important;
    gap: 0.8rem;
}

app-store-list-page app-store-card .store-card {
    border-radius: 0.8rem !important;
    border: 0 !important;
    padding: 0.5rem 0.8rem !important;
}

app-store-list-page app-store-card .store-card app-img {
    margin-right: 0.8rem !important;
}

app-store-list-page app-store-card .store-info {
    margin-left: 0 !important;
}

/*--app-store-details-page--*/
app-store-details-page {
    background: var(--public-bg) !important;
}

app-store-details-page .details-container {
    background: #fff !important;
    /* margin: 1rem; */
    border-radius: 1rem;
    /* height: auto !important; */
}

app-store-details-page .store-location {
    border: 0 !important;
}

app-store-details-page .store-location h3 {
    font-weight: 700 !important;
}

/*--app-ordering-page--*/
app-ordering-page {
    background: var(--public-bg) !important;
}

app-ordering-page .content {
    background: transparent !important;
}

app-ordering-page .mode-btn .mode-icon app-icon span {
    display: none !important;
}

app-ordering-page .mode-btn.dinein .mode-icon app-icon::before {
    -webkit-mask-image: url(../../icons/svg/phhk-mode-dinein.svg);
    mask-image: url(../../icons/svg/phhk-mode-dinein.svg);
    background: var(--P) !important;
    width: 1.8rem;
    content: "";
    display: inline-block;
    aspect-ratio: 1;
}

app-ordering-page .mode-btn.takeaway .mode-icon app-icon::before {
    -webkit-mask-image: url(../../icons/svg/phhk-mode-takeaway.svg);
    mask-image: url(../../icons/svg/phhk-mode-takeaway.svg);
    background: var(--P) !important;
    width: 1.8rem;
    content: "";
    display: inline-block;
    aspect-ratio: 1;
}

app-ordering-page .mode-btn.delivery .mode-icon app-icon::before {
    -webkit-mask-image: url(../../icons/svg/phhk-mode-delivery.svg);
    mask-image: url(../../icons/svg/phhk-mode-delivery.svg);
    background: var(--P) !important;
    width: 1.8rem;
    content: "";
    display: inline-block;
    aspect-ratio: 1;
}

app-ordering-page .content {
    justify-content: center !important;
}

app-ordering-page .content-title {
    /* display: none !important; */
    font-size: 1rem !important;
}

app-ordering-page .mode-box {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-gap: 0.8rem !important;
    padding: 0 1.8rem !important;
}

app-ordering-page .mode-btn {
    margin-bottom: 0 !important;
    background: #fff !important;
    border-radius: 10rem !important;
    /* box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.03) !important; */
    padding: 0.8rem 1.5rem !important;
}


app-ordering-page .mode-content {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 0 !important
}

app-ordering-page .mode-content h3 {
    color: #000 !important;
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
    text-transform: capitalize !important;
}

app-ordering-page .mode-icon app-icon {
    display: flex !important;
}

/*--app-mitem-select-list--*/
/* app-mitem-select-list .mitem-wrapper {
    padding: 0 1rem !important;

} */
app-mitem-select-list .btn-mitem.selected {
    box-shadow: none !important;
    background: #EAD6C7 !important;
}

/* app-mitem-select-list .btn-mitem.selected::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.4rem;
    background: var(--P);
} */
app-mitem-select-list .btn-mitem {
    border-radius: 0.5rem !important;
}


/*--app-reward-page--*/
app-reward-page .header {
    background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat !important;
    background-size: cover !important;
    background-position-y: calc(-1 * env(safe-area-inset-top)) !important;
}
app-reward-page .reward-title-box {
    display: flex !important;
    flex-direction: column !important;
}

app-reward-page .info-status {
    flex: 1 1;
}

app-reward-page .no-item-wrapper {
    margin: 3rem !important;
}

app-reward-page .no-item-wrapper app-img {
    width: 10rem !important;
    height: 10rem !important;
    background-image: url(../../images/phhk/phhk-no-reward.svg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 1.5rem !important;
}

app-reward-page .no-item-wrapper app-img .wrapper img {
    display: none !important;
}

app-reward-page .content {
    background: transparent !important;
}

/* app-reward-page .circle {
    background: var(--public-bg) !important;
} */

app-reward-page app-nav-bar .title-brand{
    margin-left: 0 !important;
}

app-reward-page .reward-container {
    border-radius: 1.5rem 1.5rem 0 0 !important;
    /* box-shadow: 0px 0 20px 20px rgb(0 0 0 / 20%); */
}

app-reward-page .reward-list {
    border-radius: 1rem !important;

}

/* app-reward-page .btns-wrapper {
    padding: 1rem 1.5rem !important;
} */

/* app-reward-page .coupon-group {
    margin: 0 1.5rem !important;
} */

app-reward-page .coupon-group h1 {
    font-size: 1.1rem !important;
    color: #000 !important;
    margin: 0.5rem 0.5rem 1rem !important;
}

app-reward-page .point-box {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column !important;
    box-shadow: none !important;
    /* background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat !important;
    background-size: cover !important;
    background-position-y: -4rem !important;
    box-shadow: none !important; */
}

app-reward-page::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: #A50A23 url(../../images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat;
    background-size: cover;
    content: "";
    z-index: 0;
}

app-reward-page .point-box h6 {
    font-size: 1rem !important;
    line-height: 1.2em !important;
    color: #fff !important;
    opacity: 1 !important;
}

app-reward-page .point-box .pts-lower-part .reward-points span {
    font-size: 1.2rem !important;
}

/*--app-estamp-page--*/

app-estamp-page app-nav-bar .nav-share-btn .mat-button-wrapper{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

app-estamp-page app-nav-bar .nav-share-btn .mat-button-wrapper app-icon{
    display: flex !important;
}

app-estamp-page app-nav-bar .nav-share-btn{
    position: absolute !important;
    right: -0.5rem !important;
    top: 50% !important;
    bottom: 50% !important;
    transform: translate(-50%, -50%) !important;
}

app-estamp-page .header {
    background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat !important;
    background-size: cover !important;
    background-position-y: calc(-1 * env(safe-area-inset-top)) !important;
}
app-estamp-page .reward-title-box {
    display: flex !important;
    flex-direction: column !important;
}

app-estamp-page .info-status {
    flex: 1 1;
}

app-estamp-page .no-item-wrapper {
    margin: 3rem !important;
}

app-estamp-page .no-item-wrapper app-img {
    width: 10rem !important;
    height: 10rem !important;
    background-image: url(../../images/phhk/phhk-no-reward.svg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 1.5rem !important;
}

app-estamp-page .no-item-wrapper app-img .wrapper img {
    display: none !important;
}

app-estamp-page .content {
    background: transparent !important;
}

/* app-estamp-page .circle {
    background: var(--public-bg) !important;
} */

app-estamp-page app-nav-bar .title-brand{
    margin-left: 0 !important;
}

app-estamp-page .reward-container {
    border-radius: 1.5rem 1.5rem 0 0 !important;
    /* box-shadow: 0px 0 20px 20px rgb(0 0 0 / 20%); */
}

app-estamp-page .reward-list {
    border-radius: 0rem !important;
}

/* app-estamp-page .btns-wrapper {
    padding: 1rem 1.5rem !important;
} */

/* app-estamp-page .coupon-group {
    margin: 0 1.5rem !important;
} */

app-estamp-page .coupon-group h1 {
    font-size: 1.1rem !important;
    color: #000 !important;
    margin: 0.5rem 0.5rem 1rem !important;
}

app-estamp-page .point-box {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column !important;
    box-shadow: none !important;
    /* background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat !important;
    background-size: cover !important;
    background-position-y: -4rem !important;
    box-shadow: none !important; */
}

app-estamp-page::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: #A50A23 url(../../images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat;
    background-size: cover;
    content: "";
    z-index: 0;
}

app-estamp-page .point-box h6 {
    font-size: 1rem !important;
    line-height: 1.2em !important;
    color: #fff !important;
    opacity: 1 !important;
}

app-estamp-page .point-box .pts-lower-part .reward-points span {
    font-size: 1.2rem !important;
}

/*--app-offer-item--*/
app-offer-item .cashier.mobile-ver {
    display: none !important;
}

/* app-offer-item .info-wrapper {
    padding: 1rem !important;
} */

app-offer-item .info-wrapper h3 {
    color: #000 !important;
    line-height: 1.1em;
    font-size: 0.9rem !important;
}

app-offer-item .info-status .date-box p {
    font-size: 0.7rem !important;
}

app-offer-item .reward-container {
    border-radius: 1rem !important;
}

app-offer-item .desc-text {
    display: none !important;
}

/*--app-progress-dialog--*/
mat-dialog-container:has(app-progress-dialog) {
    background: none !important;
    box-shadow: none !important;
}

.cdk-overlay-container:has(app-progress-dialog) .cdk-overlay-backdrop {
    background: rgba(0, 0, 0, 0.52) !important;
}

app-progress-dialog .mat-spinner {
    width: 4rem !important;
    height: 4rem !important;
    background-image: url(../../images/phhk/phhk-logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

app-progress-dialog .mat-spinner svg circle {
    visibility: hidden !important;
}

app-menu-loading .mat-spinner {
    width: 4rem !important;
    height: 4rem !important;
    background-image: url(../../images/phhk/phhk-logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

app-menu-loading .mat-spinner svg circle {
    visibility: hidden !important;
}

app-menu-loading>div {
    margin-bottom: 5rem !important;
}

/*--app-inbox-page--*/
app-inbox-page .no-img .content {
    background: #ebebeb !important;
}

app-inbox-page .inbox-content-container {
    box-shadow: none !important;
}

app-inbox-page table thead {
    display: none !important;
}

app-inbox-page table {
    background: none !important;
    margin-top: 1rem !important;
}

app-inbox-page table tr {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 1rem 1rem !important;
    background-color: #fff !important;
    border-radius: 1rem !important;
    padding: 0.5rem 0.8rem !important;
    height: auto !important;
    position: relative !important;
}

app-inbox-page table tr.unseen::before {
    content: "";
    background: var(--P);
    content: "";
    background: var(--P);
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    right: 1rem;
    border-radius: 1rem;
}

app-inbox-page table .unseen {
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.05) !important;
}

app-inbox-page table tr td {
    border: none !important;
    padding: 0 !important;
    font-family: var(--CF0) !important;
    margin-right: 0.75rem !important;
}

app-inbox-page .content {
    background: var(--public-bg) !important;
}

app-inbox-page .title-col-text {
    color: #000 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.5em !important;
}

app-inbox-page td.date-column {
    font-size: 0.7rem !important;
    color: #848484 !important;
    line-height: 1.3em !important;
}

app-inbox-page td.half-hidden {
    font-size: 0.8rem !important;
    margin-top: 0.5rem !important;
    color: #777 !important;
    line-height: 1.3em !important;
    max-height: 1.3em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

app-inbox-page .no-item-wrapper {
    margin: 0 !important;
    height: 100%;
}

app-inbox-page .no-item-wrapper app-img {
    width: 10rem !important;
    height: 10rem !important;
    background-image: url(../../images/phhk/phhk-no-reward.svg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 1.5rem !important;
}

app-inbox-page .no-item-wrapper app-img .wrapper img {
    display: none !important;
}

app-inbox-page .no-item-wrapper h3{
    text-align: center;
    margin: 1rem 0;
    font-size: 0.9rem;
}
/*--app-qr-code-display--*/
mat-bottom-sheet-container:has(app-qr-code-display),
mat-bottom-sheet-container:has(app-reward-qr-code-display-bottom-sheet) {
    border-radius: 1.5rem 1.5rem 0 0;
    min-height: 70vh;
}

mat-bottom-sheet-container:has(app-share-point-detail-bottom-sheet) {
    border-radius: 1.5rem 1.5rem 0 0;
    min-height: 55vh;
}

mat-bottom-sheet-container:has(app-share-estamp-detail-bottom-sheet) {
    border-radius: 1.5rem 1.5rem 0 0;
    min-height: 55vh;
}

app-qr-code-display qrcode {
    border-radius: 1rem;
    overflow: hidden;
}

/*--app-membership-hub--*/
app-membership-hub-page app-nav-bar .nav-order-btn .mat-button-wrapper{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

app-membership-hub-page app-nav-bar .nav-order-btn .mat-button-wrapper app-icon{
    display: flex !important;
}

app-membership-hub-page app-nav-bar .nav-order-btn{
    position: absolute !important;
    right: -0.5rem !important;
    top: 50% !important;
    bottom: 50% !important;
    transform: translate(-50%, -50%) !important;
}

app-membership-hub-page app-nav-bar .mat-toolbar{
    position: relative !important;
}

app-membership-hub-page app-nav-bar .right-box{
    position: unset !important;
}

app-membership-hub .big-title h3 {
    font-weight: 600 !important;
}

app-membership-hub .wrapper-member-info {
    overflow: hidden !important;
    position: relative !important;
    background: #2e2e2e !important;
}

app-membership-hub .wrapper-member-info::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(../../images/phhk/phhk-texture-mask.png);
    background-size: cover;
    filter: invert(100%);
    position: absolute;
    left: 0rem;
    top: 0;
    opacity: 0.3;
}

app-membership-hub .member-info {
    z-index: 2 !important;
}

app-membership-hub .member-info h2 {
    color: #fff !important;
}

app-membership-hub .wrapper-benefit-enjoy {
    z-index: 2 !important;
}

app-membership-hub .wrapper-benefit-enjoy h3 {
    text-transform: uppercase !important;
    font-weight: 600 !important;
}


app-membership-hub .tier-title h3 {
    font-size: 1rem !important;
}

app-membership-hub .tier-title {
    justify-content: center !important;
}

app-membership-hub .btn-pts-share.mat-button-disabled {
    background: #ececec !important;
    color: #C5C5C5 !important;
}


/* app-membership-hub .card-member-info{
    background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) !important;
    background-size: cover;
} */

/* app-membership-hub .box-tier-tips{
    background: rgb(0 0 0 / 17%) !important;
} */

/*--app-member-progress-bar--*/
app-member-progress-bar {
    width: 100% !important;
}

app-member-progress-bar .warpper {
    margin: 0 !important;
    padding: 0 !important;
}

app-member-progress-bar .arrow {
    display: none !important;
}

app-member-progress-bar .xp-bar-wrapper p {
    margin-top: 0 !important;
    /* font-size: 1.2rem !important; */
    font-weight: 600 !important;
}

app-member-progress-bar .xp-bar-wrapper p:last-child {
    line-height: 1.2em !important;
    font-size: 0.7rem !important;
    letter-spacing: 0 !important;
}

app-member-progress-bar .left {
    padding: 0 !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

app-member-progress-bar .xp-bar-wrapper p.upgrade-text {
    text-align: left !important;
    margin-top: 0.5rem !important;
    color: #383838 !important;
    font-size: 0.8rem !important;
}

app-member-progress-bar .silver-wrapper p {
    text-transform: capitalize !important;
}

/*--app-membership-page--*/
app-membership-page .tier-box {
    display: none !important;
}

app-membership-page .point-text {
    display: none !important;
}

app-membership-page .qr-code-wrapper {
    display: none !important;
}

app-membership-page app-member-progress-bar {
    display: none !important;
}

app-membership-page .detail-box {
    margin: 0 !important;
}

app-membership-page .member-info-wrapper {
    background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) !important;
    background-size: cover !important;
    padding-top: 0 !important;
    padding-bottom: 2.5rem !important;
    min-height: auto !important;
}

app-membership-page .btn-edit {
    display: none !important;
}

app-membership-page .member-tier-box h3 {
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

app-membership-page .member-tier-box h5 {
    color: #000 !important;
}

app-membership-page .points-expiry-wrapper {
    background: var(--sub-brand1) !important;
    margin: -2rem 1.8rem 0.5rem !important;
    z-index: 2 !important;
    max-height: 35% !important;
    padding: 1.2rem 1.8rem 0.7rem !important;
    overflow-y: auto !important;
    border-radius: 1rem !important;
    flex: 0 0 auto !important;
}

app-membership-page .expiry-each-row {
    margin: 0.6rem 0 !important;
}

app-membership-page .expiry-each-row p {
    color: #e9e9e9 !important;
}

app-membership-page .expiry-header p {
    color: #b0b0b0 !important;
}

app-membership-page .history-wrapper {
    margin: 1rem 1.8rem 1.5rem !important;
    border-radius: 1rem !important;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.05) !important;
}

app-membership-page .history-wrapper .mat-tab-header {
    margin-bottom: 0.5rem !important;
}

app-membership-page .member-panel {
    margin: 0 1.8rem 2rem !important;
}

app-membership-page .btn-member-panel {
    padding: 0.4rem !important;
    border-radius: 0.7rem !important;
    font-size: 1rem !important;
}


app-membership-page .box-card {
    margin: 1rem 0.5rem 1rem !important;
}

app-membership-page .history-wrapper .mat-tab-label {
    padding: 0.5rem !important;
}


/*--app-membership-page--*/
app-transaction-history .tier-box {
    display: none !important;
}

app-transaction-history .point-text {
    display: none !important;
}

app-transaction-history .qr-code-wrapper {
    display: none !important;
}



app-transaction-history .detail-box {
    margin: 0 !important;
}

app-transaction-history .member-info-wrapper {
    /* background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) !important;
    background-size: cover !important;
    min-height: auto !important;
    background-position-y: -4rem !important; */
}

app-transaction-history .btn-edit {
    display: none !important;
}

app-transaction-history .member-tier-box h3 {
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: #fff !important;
}

app-transaction-history .member-tier-box h5 {
    color: #fff !important;
}

app-transaction-history .member-point h3 {
    color: #fff !important;
}

app-transaction-history .points-expiry-wrapper {
    background: #fff !important;
    margin: -2rem 1.5rem 0.5rem !important;
    z-index: 2 !important;
    max-height: 35% !important;
    padding: 1.2rem 1.8rem 0.7rem !important;
    overflow-y: auto !important;
    border-radius: 1rem !important;
    flex: 0 0 auto !important;
}

app-transaction-history .expiry-each-row {
    margin: 0.6rem 0 !important;
}

app-transaction-history .expiry-each-row p {
    color: #000 !important;
}

app-transaction-history .expiry-header p {
    color: #898989 !important;
}

/* app-transaction-history .history-wrapper {
    margin: 1rem 1.5rem 1.5rem !important;
    border-radius: 1rem !important;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.05) !important;
} */
/*
app-transaction-history .history-wrapper .mat-tab-header {
    margin-bottom: 0.5rem !important;
} */

app-transaction-history .member-panel {
    margin: 0 1.8rem 2rem !important;
}

app-transaction-history .btn-member-panel {
    padding: 0.4rem !important;
    border-radius: 0.7rem !important;
    font-size: 1rem !important;
}


/* app-transaction-history .box-card {
    margin: 1rem 0.5rem 1rem !important;
} */

app-transaction-history .history-wrapper .mat-tab-label {
    padding: 0rem !important;
}

/*--app-address-list--*/
app-address-list .row-radio {
    background: #fff !important;
    padding: 0.8rem !important;
    border-radius: 0.8rem !important;
    margin-bottom: 0.8rem !important;
    align-items: flex-start !important;
    /* min-height: 5rem !important; */
}

/* app-address-list .addr-name {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #000 !important;
    line-height: 1.3em !important;
} */

/* app-address-list .full-addr {
    color: #9a9a9a !important;
    font-size: 0.7rem !important;
    line-height: 1.2em !important;
} */

app-address-list .flex-col {
    padding: 1.5rem !important;
}

app-address-list .mat-divider {
    display: none !important;
}

app-address-list .address-action-btn button {
    border-radius: 1rem !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 0.5rem !important;
}

app-address-list .address-action-btn .edit-btn {
    /* background: var(--P) !important; */
    color: #000 !important;
}

app-address-list .address-action-btn .delete-btn {
    /* background: #C5C5C5 !important; */
    color: #000 !important;
}

app-address-list .text-select-addr {
    text-align: left !important;
    margin: 0 1.5rem !important;
}

app-address-list .wrapper-blank-list-container::before {
    /* background-image: url(../../images/phhk/phhk-no-reward.svg); */
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    width: 8rem;
    height: 8rem;
    display: flex;
    margin: 0 auto;
}

app-address-list .text-no-saved h3 {
    font-weight: 600 !important;
}

app-address-list .add-new-addr button {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
    width: 100% !important;
}

/*--app-share-point--*/

/* app-share-point .content{
    background: #8b0a20 !important;
} */
/* app-share-point .wrapper-points-card {
    background-image: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) !important;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position-y: -4rem !important;
} */
/* background-position-y: calc(-4rem - env(safe-area-inset-top)) !important; */

app-share-point .wrapper-points-card h2 {
    color: #fff !important;
}

app-share-point .wrapper-points-card h1 {
    font-weight: 900 !important;
}

app-share-point .wrapper-points-card p {
    color: #fff !important;
}

app-share-point .points-box.selected {
    background: #E6B991 !important;
    color: var(--P) !important;
}

app-share-point .share-action-btn button {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
}

app-share-point .action-btn.mat-button-disabled {
    /* background: #f1f1f1 !important; */
    /* opacity: 0.5 !important; */
    background: #ececec !important;
    color: #C5C5C5 !important;
}

app-share-point .points-box.mat-button-disabled p {
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: #C5C5C5 !important;
}

/*--app-share-point-details--*/
app-share-point-detail .footer-btn button {
    /* background: #000 !important;
    color: #fff !important; */
    text-transform: capitalize !important;
    border-radius: 0.5rem !important;
}

app-share-point-detail .footer-btn button {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
}


/*--app-share-estamp--*/


app-share-estamp .wrapper-points-card h2 {
    color: #fff !important;
}

app-share-estamp .wrapper-points-card h1 {
    font-weight: 900 !important;
}

app-share-estamp .wrapper-points-card p {
    color: #fff !important;
}

app-share-estamp .points-box.selected {
    background: #E6B991 !important;
    color: var(--P) !important;
}

app-share-estamp .share-action-btn button {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
}

app-share-estamp .action-btn.mat-button-disabled {
    /* background: #f1f1f1 !important; */
    /* opacity: 0.5 !important; */
    background: #ececec !important;
    color: #C5C5C5 !important;
}

app-share-estamp .points-box.mat-button-disabled p {
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: #C5C5C5 !important;
}

/*--app-share-point-details--*/
app-share-point-detail .footer-btn button {
    /* background: #000 !important;
    color: #fff !important; */
    text-transform: capitalize !important;
    border-radius: 0.5rem !important;
}

app-share-point-detail .footer-btn button {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
}

/*--app-share-estamp-details--*/
app-share-estamp-detail .footer-btn button {
    /* background: #000 !important;
    color: #fff !important; */
    text-transform: capitalize !important;
    border-radius: 0.5rem !important;
}

app-share-estamp-detail .footer-btn button {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
}

/*--app-share-coupon--*/

app-share-coupon .share-action-btn button {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
}


app-share-coupon .footer-btn button {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
}

/*--app-preview-profile-page--*/
/*--app-payment-methods--*/
app-payment-methods .row-radio-option {
    box-shadow: none !important;
    border-radius: 0.6rem !important;
    transition: none !important;
    padding: 0.5rem !important;
}

app-payment-methods .info-box .ccard-no {
    font-size: 1rem !important;
}

/* app-payment-methods .wrapper-no-card{
    background-image: url(../../images/phhk/phhk-no-reward.svg);
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    width: 8rem;
    height: 8rem;
    display: flex;
    margin: 0 auto;
} */
/*--app-settings-home--*/
app-settings-home .wrapper-settings-row {
    background: #fff !important;
    padding: 0.9rem 1rem !important;
    margin: 0.7rem 1.5rem 0rem !important;
}

app-settings-home .mat-list {
    padding-top: 1.5rem !important;
}

app-settings-home .subheader p {
    font-size: 0.9rem !important;
}

app-settings-home .items p {
    font-size: 0.9rem !important;
}

app-settings-home .mat-list-item-content {
    padding: 0 1.8rem !important;
}

app-settings-home .about-us-grp .subheader {
    display: none !important;
}

app-settings-home .items .abt-icon {
    display: block !important;
}

app-settings-home .about-us-grp .mat-list-item {
    background: #fff !important;
    padding: 0.9rem 1rem !important;
    height: auto !important;
}

app-settings-home .about-us-grp {
    margin-top: 0.7rem !important;
}

app-settings-home .about-us-grp .mat-list-item-content {
    padding: 0 !important;
}

app-settings-home .items p {
    color: var(--P) !important;
}

/*--app-back-button--*/
app-back-button .my-back-button app-icon{
    height: 22px !important;
}

/*--app-settings-info--*/
app-settings-info span,
app-settings-info p{
    font-size: 0.9rem !important;
    line-height: 1.5em !important;
}

app-agreement .info-wrapper{
    font-size: 0.9rem !important;
    line-height: 1.5em !important;
}


/*--app-filter-tags-list--*/
app-filter-tags-list .tags-option {
    color: #000 !important;
    height: auto !important;
}

app-filter-tags-list .selected .tags-option {
    color: #fff !important;
    height: auto !important;
}

/*--app-login-page--*/
app-login-page .div-content {
    background: var(--public-bg) !important;
}

app-login-page .content {
    /* flex: 0 0 auto !important; */
    overflow: unset !important;
}

app-login-page .input-field .mat-form-field-flex {
    background: #fff !important;
    border-radius: 10px !important;
}

/* app-login-page .input-wrapper>mat-form-field .mat-form-field-wrapper {
    margin-bottom: 0 !important;
} */

app-login-page .footer {
    margin-top: 1rem !important
}

app-login-page .btn-login {
    border-radius: 0.6rem !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
}


app-login-page mat-tab-group mat-tab-header{
    padding: 0 !important;
}



/*--app-register-page--*/
app-register-page .content {
    background: var(--public-bg) !important;
}

app-register-page .input-field .mat-form-field-flex {
    background: #fff !important;
    border-radius: 10px !important;
    height: 3.5rem;
    padding-top: 0.5em !important;
}

app-register-page .mat-checkbox-label {
    font-family: var(--CF0) !important;
}

app-register-page .btn-login {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    /* text-transform: uppercase !important; */
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
}

app-register-page .input-field .mat-form-field-subscript-wrapper {
    margin-top: 0.3rem;
}

app-register-page .input-field .mat-form-field-appearance-fill .mat-form-field-flex {
    padding-top: 0.25rem;
}

app-register-page .input-field .mat-form-field-wrapper {
    height: 3.5rem;
    box-sizing: content-box;
}

app-register-page .input-field mat-hint {
    font-size: 0.7rem !important;
}

app-register-page .country-code>div:first-child,
app-login-page .country-code>div:first-child {
    width: 6rem !important;
    flex: 0 0 auto !important;
}

app-register-page .country-code>div:first-child .input-field .mat-select-value,
app-login-page .country-code>div:first-child .input-field .mat-select-value{
    text-overflow: clip !important;
}

/*--app-reset-page--*/
app-reset-page .content {
    background: var(--public-bg) !important;
}

app-reset-page .input-field .mat-form-field-flex {
    background: #fff !important;
    border-radius: 10px !important;
}

app-reset-page .top-spacer {
    flex: 0 0 auto !important;
}


/*--app-referral-page--*/
app-referral-page .share-btn-wrapper {

}

app-referral-page .share-btn-wrapper button {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    text-transform: capitalize !important;
    padding: 0.3rem !important;
    font-weight: normal !important;
}

app-referral-page .top-text-wrapper h4 {
    font-size: 1.1rem !important;
}

/*--app-order-card--*/
app-order-card .status-received {
    align-items: center !important;
}

app-order-card .status-label .text-status {
    font-size: 0.8rem !important;
}

app-order-card .spot .font-bold {
    color: var(--P) !important;
    font-weight: 400 !important;
}

app-order-card .spot .ref-id {
    font-size: 0.9rem;
}


/*--app-stamp-card--*/
app-stamp-card .stamp-wrapper {
    height: auto !important;
    border-radius: 1rem !important;
}

app-stamp-card {
    margin: 1rem !important;
}

app-stamp-card .circle {
    width: 1rem !important;
    height: 1rem !important;
    background: #f6f6f6 !important;
}

app-stamp-card .stamp-box-header {
    padding: 0.8rem !important;
}

app-stamp-card .stamp-card-title h3 {
    color: #000 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

app-stamp-card .stamp-wrapper {
    box-shadow: none !important
}

app-stamp-card .dotted {
    border-color: #f6f6f6 !important;
}

app-stamp-card .content {
    background: #f6f6f6 !important;
}

/*--app-reward-detail-page--*/
app-reward-detail-page .btn-box button {
    border-radius: 0.6rem !important;
    background: var(--sub-brand1) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
}

app-reward-detail-page .btn-box p{
    /* line-height: 26px !important; */
}

app-reward-detail-page h3.new-title {
    font-size: 1.2rem !important;
    color: #000 !important;
}

app-reward-detail-page .news-desc p {
    color: #7e7e7e !important;
}

app-reward-detail-page .reward-expansion-panel .news-desc p{
    color: #000 !important;
    line-height: 1.5em !important;
}

app-reward-detail-page app-nav-bar .left-box{
    overflow: visible !important;
}

app-reward-detail-page .mat-expansion-panel{
    border-radius: 8px !important;
}


/*--app-time-selection-page--*/
app-time-selection-page .btn-cont {
    border-radius: 0.6rem !important;
    /* background: var(--sub-brand1) !important; */
    box-shadow: none !important;
    font-size: 1rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 26px !important;
    padding: 0.8rem !important;
    font-weight: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* app-time-selection-page .card-desired-time {
    padding: 0 1.5rem !important;
} */

/* app-time-selection-page .div-date-time {
    margin: 1.5rem 0.5rem !important;
} */

app-time-selection-page .mat-form-field-appearance-outline .mat-form-field-flex {
    padding: 0 0.75em 0 1em !important;
}

/*--app-filter-variations--*/
app-filter-variations .multi-steps-box{
    background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat !important;
    background-size: 100% auto !important;
    background-position-y: -4rem !important;
}

app-filter-variations .selection-box{
    background: url(../../images/phhk/phhk-combo-bg.jpg) #f6f6f6 repeat !important;
    background-size: cover !important;
    border-radius: 2rem 0 0 0 !important;
    z-index: 1 !important;

}

app-filter-variations .sb-title{
    display: none !important;
}

/*--app-reward-unlock-item-card--*/
app-reward-unlock-item-card .inner-reward-row{
    background: #F8F2EE !important;
}

app-reward-unlock-item-card .div-used-code .check-icon{
    background: #ead6c7 !important;
}

app-reward-unlock-item-card .div-used-code app-icon{
    color: #7e7e7e !important;
}

app-directory-page .mode-swiper .mode_byod_tab,
app-mode-store-selector-page .mode-swiper .mode_byod_tab {
    display: none;
}

/*----*/
app-unlock-category-dialog .div-footer-button button{
    background: #000 !important;
    font-size: 1rem !important;
    line-height: 26px !important;
    text-transform: uppercase !important;
    padding: 0.8rem 0 !important;
    border-radius: 8px !important;
}
@media not screen and (min-width: 600px) {
    app-order-toolbar app-nav-bar app-img.brand-logo-desktop {
        display: none !important;
    }
}

@media screen and (max-width: 1200px) {
    app-order-page app-cart {
        min-width: 250px !important;
        max-width: 250px !important;
    }
}
@media screen and (max-width: 839px) {
    /* app-order-toolbar app-nav-bar .nav-store {
        display: none !important;
    } */
    app-order-toolbar app-mode-selector {
        box-shadow: none !important;
        border-radius: 0.6rem;
        overflow: hidden;
        margin: 0.5rem 1rem;
        /* margin-bottom: 0.5rem; */
        background: none !important;
        position: absolute;
        top: 0.6rem;
        left: 3rem;
        width: 75%;
        margin: 0;
        margin-bottom: 0 !important;
        height: 2.75rem;
    }

    app-order-toolbar app-mode-selector .one-detail {
        background: transparent !important;
    }
    app-order-toolbar app-mode-selector .addr-wrapper {
        padding: 0rem !important;
        margin-left: 0;
        border-left: 0;
        width: auto;
        height: 100% !important;
        min-width: auto;
        flex: 1 0;
        max-width: 43%;
    }

    app-order-toolbar app-mode-selector .addr-wrapper:last-child {
        flex: 1 0 auto;
    }

    app-order-toolbar app-mode-selector .div-change {
        height: 100%;
        padding: 0rem 0.5rem 0 !important;
    }

    app-order-toolbar app-mode-selector p.delivery-addr {
        font-size: 12px !important;
    }
    app-mode-selector-page .header{
        background: transparent !important;
        color: var(--P) !important;
        padding: 0.2rem !important;
    }

    app-mode-selector-page app-sub-bar .mat-toolbar .sb-title
    {
        color: #000 !important;
        font-weight: 700 !important;
    }

    app-mode-selector-page app-sub-bar .mat-toolbar .div-button button{
        color: #ababab !important;
    }

    app-mode-selector-page .icon-mode-select{
        display: none !important;
    }

    app-mode-store-selector-page::before, app-directory-page::before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: #A50A23 url(../../images/phhk/phhk_backdrop_nav_bar_2.jpg) no-repeat;
        background-size: cover;
        content: "";
        z-index: 0;
    }

    .header {
        background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat !important;
        background-size: cover !important;
        background-position-y: calc(-1 * env(safe-area-inset-top)) !important;
        color: #fff !important;
        box-shadow: none !important;
    }
    /* app-order-toolbar app-nav-bar .nav-store {
        display: none !important;
    } */
    app-order-toolbar  .left-box,app-nav-bar .left-box{
        overflow: visible !important;
    }
    app-nav-bar .left-box {
        justify-content: center;
        position: relative;
    }

    app-nav-bar .left-box button:first-child{
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translate(-50%, -50%);
        bottom: 50%;
    }
    app-directory-page app-nav-bar .flex .left-box .title-brand {
        color: transparent !important;
    }
    /* app-order-toolbar app-nav-bar .nav-store{
        display: none !important;
    } */

    app-share-point::before,
    app-share-estamp::before,
    app-transaction-history::before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: #A50A23 url(../../images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat;
        background-size: cover;
        content: "";
        z-index: 0;
    }

    app-share-point .wrapper-points-card , app-share-estamp .wrapper-points-card{
        background-color: transparent !important;
    }
}



/*--mobile here--*/

@media screen and (max-width: 600px) {
    app-store-page .header app-language-select button {
        color: #000 !important;
    }

    app-home-page .header app-language-select button {
        color: #000 !important;
    }

    app-order-toolbar .header:not(.header.wrapper-tag) {
        padding-right: 0.5rem !important;
    }

    .global-container {
        height: 100% !important;
        overflow: hidden;
    }

    /*--app-order-page--*/

    app-order-page .store-name {
        font-size: 1rem !important;
    }

    app-order-toolbar app-mode-selector {
        box-shadow: none !important;
        border-radius: 0.6rem;
        overflow: hidden;
        margin: 0.5rem 1rem;
        /* margin-bottom: 0.5rem; */
        background: none !important;
        position: absolute;
        top: 0.6rem;
        left: 3rem;
        width: 75%;
        margin: 0;
        margin-bottom: 0 !important;
        height: 2.75rem;
    }

    app-order-toolbar app-mode-selector .one-detail {
        background: transparent !important;
    }

    app-order-toolbar app-search-button{
        margin-left: 1rem !important;
    }

    app-order-toolbar {
        box-shadow: none !important;
        position: relative !important;
    }

    app-order-page app-category-side-select {
        height: auto !important;
    }

    app-order-toolbar app-mode-selector .addr-wrapper {
        padding: 0rem !important;
        margin-left: 0;
        border-left: 0;
        width: auto;
        height: 100% !important;
        min-width: auto;
        flex: 1 0;
        max-width: 43%;
    }

    app-order-toolbar app-mode-selector .addr-wrapper:last-child {
        flex: 1 0 auto;
    }

    app-order-toolbar app-mode-selector .div-change {
        height: 100%;
        padding: 0rem 0.5rem 0 !important;
    }

    app-order-toolbar app-mode-selector p.delivery-addr {
        font-size: 12px !important;
    }

    app-order-page app-category-side-select .selected-cat {
        border-radius: 0.6rem !important;
        background: #ededed !important;
    }
    app-order-page app-category-side-select .unselected-cat{
        border-radius: 0.6rem !important;
    }

    app-order-page app-category-side-select .cat-img-box {
        width: 50% !important;
        aspect-ratio: 1/1;
        height: auto !important;
        min-height: auto !important;
        flex: 0 0 auto !important;
        min-width: auto !important;
    }

    app-order-page app-category-side-select .cat-img-box app-img {
        transition: 250ms ease-in-out all;
    }

    app-order-page .cat-bar {
        justify-content: flex-start !important;
        text-align: left;
        font-size: 0.8rem;
        /* border-bottom: 2px solid var(--P); */
        padding: 0 !important;
        margin: 0rem 0 0.5rem 0.8rem;
        align-items: flex-end !important;
        /* position: sticky;
        top: 0; */
        z-index: 10;
        /* background: #fff; */
    }

    app-order-page .cat-bar h2 {
        margin-bottom: 0.25rem !important;
        /* margin-left: 0.5rem !important; */
        font-weight: 700 !important;
        color: #333 !important;
        margin-left: 0.25rem !important;
        font-size: 1rem !important;
        text-transform: capitalize !important;
        line-height: 1.5em !important;
    }

    app-order-page .right-box {
        gap: 0 !important;
    }

    app-order-page .right-box>div:first-child {
        order: 3;
    }

    app-user-button .btn-after-login h4 {
        width: 1.5rem !important;
        height: 1.5rem !important;
        line-height: 0 !important;
    }

    app-user-button {
        margin: 0 !important;
    }

    app-language-select app-icon {
        width: 30px !important;
        height: 30px !important;
    }

    app-language-select app-icon>span {
        font-size: 25px !important;
    }

    app-order-page .cat-bar::before,
    app-order-page .cat-bar::after {
        display: none;
    }

    /* app-order-page .item-container::before{
        width: 0.4rem !important;
    } */
    /* app-order-page .item-container.selected::before{

        border-radius: 0 !important;
    } */
    app-order-page .item-info,
    app-favorite-item-page .item-info {
        padding: 0.7rem 0 0.4rem 0.8rem !important
    }

    app-recommendation-grid-section .item-info {
        padding: 0.4rem 0.8rem !important;
    }

    app-order-page .item-name h3,
    app-order-page .item-price .price-box p,
    app-favorite-item-page .item-name h3,
    app-favorite-item-page .item-price .price-box p {
        font-size: 0.9rem !important;
    }

    app-order-page .item-price .price-box p {
        line-height: 1.6em !important;
    }

    /* app-order-page .item-desc,
    app-favorite-item-page .item-desc {
        font-size: 0.8rem;
    } */

    /* app-order-page .item-container div.item-img-col {
        flex: 0 0 115px !important;
    } */
    /* app-order-page .item-card .item-container div.item-img-col .img{
        width: 115px !important;
    } */
    app-order-page .brand-logo-desktop[constrain="contain"],
    app-favorite-item-page .brand-logo-desktop[constrain="contain"] {
        margin-left: 0 !important;

        height: 38px;
        width: 38px;
    }

    app-order-page .shopping-cart-btn .mat-badge-content,
    app-favorite-item-page .shopping-cart-btn .mat-badge-content {
        right: 0.3rem !important;
        top: 0.3rem !important;
        font-size: 0 !important;
        width: 10px !important;
        height: 10px !important;
    }

    app-order-page app-recommendation-grid-section .item-container,
    app-favorite-item-page app-recommendation-grid-section .item-container {
        width: 10.5rem !important;
    }

    app-order-page app-recommendation-grid-section .item .add-btn,
    app-favorite-item-page app-recommendation-grid-section .item .add-btn {
        top: 8.5rem !important;
    }

    app-order-page app-recommendation-grid-section .match-box,
    app-favorite-item-page app-recommendation-grid-section .match-box {
        position: absolute !important;
        bottom: 0.6rem !important;
        right: 0.5rem !important;
    }

    app-order-page app-recommendation-grid-section app-swiper .item{
        box-shadow: none !important;
    }

    app-order-page .left,
    app-favorite-item-page .left {
        border-radius: 0 0.6rem 0.6rem 0 !important;
    }

    app-cart-action .cart-btn button {
        padding: 0.8rem 0 !important;
        background: var(--sub-brand1) !important;
    }

    app-cart-action .cart-btn button .mat-button-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
    }

    app-cart-action .cart-btn button .text-checkout {
        /* order: 2; */
    }

    app-cart-action .cart-btn button .checkout-price {
        /* order: 3; */
        margin: 0 !important;
    }

    app-cart-action .cart-btn button .mat-button-wrapper::after {
        content: "";
        order: 1;
    }

    app-cart-action,
    app-cart-action .cart-btn {
        box-shadow: none !important;
        background: var(--public-bg) !important;
    }

    app-cart-action .pay-btn.mat-button-disabled {
        background: #ececec !important;
    }

    app-cart-action .pay-btn {
        box-shadow: none !important;
        border-radius: 0.6rem;
        /* background: -moz-linear-gradient(left,  #f8c301 0%, #ff8a00 100%) !important;
        background: -webkit-linear-gradient(left,  #f8c301 0%,#ff8a00 100%) !important;
        background: linear-gradient(to right,  #f8c301 0%,#ff8a00 100%) !important;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8c301', endColorstr='#ff8a00',GradientType=1 ); */
    }

    app-cart-action .cart-btn button .mat-button-wrapper {
        justify-content: flex-end !important;
    }

    app-cart-action .cart-btn button .mat-button-wrapper .left-spacer,
    app-cart-action .cart-btn button .mat-button-wrapper .text-checkout,
    app-cart-action .cart-btn button .mat-button-wrapper div.checkout-price {
        flex: 0 0 auto !important;
    }

    app-cart-action .cart-btn button .mat-button-wrapper .text-checkout .mat-icon {
        display: none;
    }

    /* app-cart-action .cart-btn button .mat-button-wrapper div.checkout-price{
        margin-left: 0.5rem;
    } */
    app-cart-action .cart-btn button .mat-button-wrapper .left-spacer {
        /* position: absolute; */
        left: 2.8rem;
        top: 0.1rem;
        z-index: 100;
    }

    app-cart-action .cart-btn button .mat-button-wrapper .left-spacer .payment-count {
        border-radius: 500px !important;
        background-color: #fff !important;
        color: var(--P) !important;
        width: 1.4rem;
        height: 1.4rem;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem;
        box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
    }

    app-cart-action .cart-btn button::before {
        content: "";
        width: 4.8rem;
        height: 4.8rem;
        background: url(../../images/overwrite/pizzahut/little-pizza.svg) no-repeat;
        background-size: contain;
        position: absolute;
        left: -0.4rem;
        bottom: 0.2rem;
        z-index: 10;
    }

    /* app-order-toolbar app-nav-bar .brand-logo-desktop {
        display: none !important;
    } */

    app-order-toolbar app-nav-bar .nav-store {
        display: none !important;
    }

    app-order-toolbar app-nav-bar .left-box{
        justify-content: flex-start !important;
    }

    /*--app-mobile-cart-page--*/
    app-mobile-cart-page {
        background: #f1f1f1 !important;
    }

    /* app-mobile-cart-page mat-toolbar {
        background: url(../../images/phhk/phhk_backdrop_nav_bar_2.jpg) !important;
        border-bottom: 0 !important;
        height: 4rem !important;
        background-size: cover;
        color: #fff !important;
    } */
    app-mobile-cart-page mat-toolbar button,
    app-mobile-cart-page mat-toolbar .nav-title {
        color: #fff !important;
    }

    app-mobile-cart-page app-cart {
        background: transparent !important;
    }

    app-mobile-cart-page app-cart .items-center {
        background-color: var(--public-bg) !important;
    }

    app-mobile-cart-page app-cart .cart-content {
        background: var(--public-bg) !important;
        /* border-radius: 1.5rem !important; */
        padding: 1.5rem 1rem 0 1rem;
        margin: 0 !important;
        position: relative;
        overflow-y: auto !important;
        max-height: 100% !important;
        margin-top: 0 !important;
        height: 100% !important;
    }

    app-mobile-cart-page app-cart .simple-cart-upper {
        /* border-radius: 1.5rem; */
        overflow: hidden;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
    }

    app-mobile-cart-page app-cart .clear-btn-box {
        /* order: 1;
        display: flex;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem !important;
        background: #fff;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 100; */
        flex: 0 0 auto;
        padding: 0 1rem 0 1rem !important;
        position: sticky;
        top: 0;
        background: var(--public-bg);
        z-index: 100;
        overflow: hidden !important;
    }

    app-mobile-cart-page app-cart .clear-btn {
        background: transparent;
        border: 1px solid #ececec;
        border-radius: 0.25rem !important;
        color: #333 !important;
    }

    app-mobile-cart-page app-cart-action,
    app-mobile-cart-page app-cart .cart-btn {
        box-shadow: none !important;
    }

    app-mobile-cart-page app-cart .simple-cart-lower {
        background: #fff;
        border-radius: 1.5rem 1.5rem 0 0;
    }

    app-mobile-cart-page app-cart .div-prices {
        padding-top: 0.5rem !important;
        padding-bottom: 0 !important;
        border-top: 1px solid #ececec;
        margin: 0 !important;
    }

    app-mobile-cart-page app-cart .div-prices h5 {
        color: var(--P800) !important;
        font-weight: 600 !important;
    }

    /* app-mobile-cart-page app-cart .cart-content > div:not(.clear-btn-box){
        padding: 0 !important;
        margin-bottom: 1rem !important;
    } */

    app-mobile-cart-page app-cart .main-item-row {
        margin: 0 !important;
        gap: 0.2rem;
        font-size: 0.8rem !important;
    }

    app-mobile-cart-page app-cart .main-item-row>div,
    app-mobile-cart-page app-cart .main-item-row h4,
    app-mobile-cart-page app-cart .main-item-row h6,
    app-mobile-cart-page app-cart .main-item-row h5 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.6em !important;
        color: #333 !important;
        font-weight: normal;
        letter-spacing: 0 !important;
    }

    app-mobile-cart-page app-cart .md-row .div.md-name {
        font-weight: normal;
    }

    app-mobile-cart-page app-cart .special-btn {
        border-radius: 1rem !important;
        border: none !important;
        padding: 0rem !important;
        background: none !important;
    }

    app-mobile-cart-page app-cart .special-btn.remove-btn {
        padding: 0.3rem !important;
        background: #dfdfdf !important;
        width: 24px !important;
        height: 24px !important;
        /* margin-right: 0.7rem !important; */
    }

    app-mobile-cart-page app-cart .special-btn.duplicate-btn {
        background: var(--P) !important;
        padding: 0.3rem !important;
        width: 24px !important;
        height: 24px !important;
    }

    app-mobile-cart-page app-cart .special-btn.remove-btn app-icon {
        color: #333 !important;
        height: 18px !important
    }

    app-mobile-cart-page app-cart .special-btn.remove-btn app-icon span,
    app-mobile-cart-page app-cart .special-btn.duplicate-btn app-icon span {
        font-size: 18px !important;
    }

    app-mobile-cart-page app-cart .special-btn.duplicate-btn app-icon {
        color: var(--PC) !important;
        height: 18px !important
    }

    app-mobile-cart-page app-cart .cart-item:first-child .item-name,
    app-mobile-cart-page app-cart .cart-item:first-child .main-item-price-extra,
    app-mobile-cart-page app-cart .main-item-price {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.2em !important;
        color: #333 !important;
        margin-bottom: 0.5rem !important;
    }

    /* app-mobile-cart-page app-cart .item-name,
    app-mobile-cart-page app-cart .main-item-price {
        font-weight: 600 !important;
    } */
    app-mobile-cart-page app-cart .cart-item:first-child .main-item-price-extra {
        font-weight: normal !important;
        margin-left: 0.5rem !important;
    }

    app-mobile-cart-page app-cart .main-item-row>div,
    app-mobile-cart-page app-cart .main-item-row h4,
    app-mobile-cart-page app-cart .main-item-row h6 {
        margin: 0 !important;
        padding: 0 !important;
        /* line-height: 1.3em !important; */
        color: #333 !important;
        font-weight: normal;
        letter-spacing: 0 !important;
        font-size: 0.8rem !important;
    }

    app-mobile-cart-page app-cart .cart-item-wrapper {
        padding-top: 0 !important;
        padding-bottom: 0.5rem;
    }

    app-mobile-cart-page app-cart .cart-item-wrapper:last-child {
        padding-bottom: 0;
    }

    app-mobile-cart-page app-cart app-cart-action .app-cart-action,
    app-mobile-cart-page app-cart app-cart-action .cart-btn {
        box-shadow: none !important;
        background: #fff !important;
    }

    app-mobile-cart-page app-cart app-cart-action .cart-btn .pay-btn {
        box-shadow: none !important;
    }

    app-mobile-cart-page .mat-toolbar button {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    app-cart .clear-btn-box{
        padding: 0.5rem !important;

    }
    /*--app-checkout-page--*/
    mat-toolbar {
        background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) !important;
        background-size: cover !important;
        height: 4rem !important;
        box-shadow: none;
        background-size: cover;
        color: #fff !important;
        /* background-position-y: -env(safe-area-inset-top); */
    }

    app-checkout-page .middle .bg-left div.left-container {
        padding: 0 !important;
    }

    /* app-checkout-page div.div-btn-pay{
        margin-top: 0.5em!important;
        border-radius: 1rem 1rem 0 0;
    } */
    app-checkout-page .div-payment {
        margin-bottom: 1rem;
    }

    app-checkout-page .view-cart {
        border-radius: 1rem !important;
        /* overflow: hidden; */
        /* margin-bottom: 0.5rem; */
        border: 0 !important;
    }

    app-cart-checkout .main-item .main-qty-no,
    app-cart-checkout .main-item .qty-x,
    app-cart-checkout .main-item .item-name,
    app-cart-checkout .main-item .main-item-price-extra,
    app-cart-checkout .main-item .main-item-price {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 0.9rem !important;
        color: #313131 !important;
        font-weight: unset !important;
        line-height: 1.5em !important;
    }

    app-checkout-page .benifits-container,
    app-checkout-page .div-mode-detail,
    app-checkout-page .div-payment {
        margin-bottom: 0.5rem !important;
    }

    /* app-checkout-page .div-remark-2nd,
    app-checkout-page .benefits-box,
    app-checkout-page app-payment-selector .payment-select:nth-child(2) {
        padding-left: 3.5rem !important;
    } */

    /* app-checkout-page .benifits-container p,
    app-checkout-page app-payment-selector .payment-select:first-child {
        padding-left: 1rem !important;
    } */
    app-checkout-page app-cart-checkout {
        padding: 1rem 0 !important;
    }

    app-checkout-page app-order-price-details .row-detail-price h3,
    app-checkout-page app-order-price-details .row-detail-price h4,
    app-checkout-page app-order-price-details .grand-total h3,
    app-checkout-page app-order-price-details .grand-total h4 {
        font-size: 1rem !important;
        color: #313131 !important;
        line-height: 1.3em !important;
        font-weight: normal !important;
    }

    app-checkout-page app-order-price-details .grand-total h3,
    app-checkout-page app-order-price-details .grand-total h4 {
        color: var(--P800) !important;
        font-weight: 600 !important;
    }

    app-checkout-page .grand-total {
        margin-bottom: 0.2rem !important;
    }

    app-checkout-page div.pu-left.mode-detail-title {
        width: auto !important;
    }

    app-checkout-page .address-location {
        font-size: 0.9rem !important;
        /* font-weight: 600 !important; */
        line-height: 1.3em !important;
        margin: 0 !important;
        color: #313131;
    }

    app-checkout-page .pu-middle {
        margin-left: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    app-checkout-page .pu-middle p:nth-child(2) {
        line-height: 1.2em !important;
        color: #828282 !important;
        font-weight: normal !important;
        font-size: 0.85rem !important;
    }

    app-checkout-page .row-pickup-time,
    app-checkout-page .row-pickup-address {
        flex-direction: column !important;
    }

    /* app-checkout-page .mode-detail-title h5 {
        color: #313131 !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
    } */
    app-checkout-page .title-order-detail {
        /* margin-top: 0.5rem !important; */
    }

    app-checkout-page .special-btn {
        border-radius: 1rem !important;
        border: none !important;
        padding: 0rem !important;
        background: none !important;
    }

    app-checkout-page .special-btn.remove-btn {
        padding: 0.3rem !important;
        background: #dfdfdf !important;
        width: 24px !important;
        height: 24px !important;
        /* margin-right: 0.7rem !important; */
    }

    app-checkout-page .special-btn.duplicate-btn {
        background: var(--P) !important;
        padding: 0.3rem !important;
        width: 24px !important;
        height: 24px !important;
    }

    app-checkout-page .special-btn.remove-btn app-icon {
        color: #333 !important;
        height: 18px !important
    }

    app-checkout-page .special-btn.remove-btn app-icon span,
    app-checkout-page .special-btn.duplicate-btn app-icon span {
        font-size: 18px !important;
    }

    app-checkout-page .special-btn.duplicate-btn app-icon {
        color: var(--PC) !important;
        height: 18px !important
    }

    app-checkout-page .special-btn:not(.edit-btn, .spr-btn) .mat-button-wrapper>span {
        display: none;
        font-size: 0.8rem !important;
    }

    /*--app-alacarte-dialog--*/

    app-alacarte-dialog .div-app-img {
        width: 100% !important;
    }

    app-alacarte-dialog .div-padding {
        padding: 1rem !important;
    }

    app-alacarte-dialog .combo-footer {
        display: flex;
        flex-direction: column;
    }

    app-alacarte-dialog .select-panel {
        flex: 1;
        order: 1;
        height: 2rem !important;
        min-height: 2rem;
    }

    app-alacarte-dialog .qty-cart-btn {
        order: 2;
    }

    /*--app-mode-store-selector-page--*/
    #body app-search-bar .row-select .mat-form-field:not(:first-child) {
        margin: 0 !important;
    }
    /*--app-mode-selector-page--*/
    app-mode-selector-page .header{
        background: transparent !important;
        color: var(--P) !important;
        padding: 0.2rem !important;
    }

    app-mode-selector-page app-sub-bar .mat-toolbar .sb-title
    {
        color: #000 !important;
        font-weight: 700 !important;
    }

    app-mode-selector-page app-sub-bar .mat-toolbar .div-button button{
        color: #ababab !important;
    }

    app-mode-selector-page .icon-mode-select{
        display: none !important;
    }

    app-share-point::before,
    app-share-estamp::before,
    app-transaction-history::before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: #A50A23 url(../../images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat;
        background-size: cover;
        content: "";
        z-index: 0;
    }

    app-transaction-history app-member-progress-bar {
        display: none !important;
    }

    app-mode-store-selector-page::before,
    app-directory-page::before{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: #A50A23 url(../../images/phhk/phhk_backdrop_nav_bar_2.jpg) no-repeat;
        background-size: cover;
        content: "";
        z-index: 0;
    }

    .header {
        background: url(../../images/phhk/phhk_backdrop_nav_bar.jpg) no-repeat !important;
        background-size: cover !important;
        background-position-y: calc(-1 * env(safe-area-inset-top)) !important;
        color: #fff !important;
        box-shadow: none !important;
        /* height: 4.5rem !important; */
    }

    app-checkout-page .benifits-container h2 {
        padding: 1.5rem 1.5rem 0.75rem !important;
    }

    app-checkout-page .benefits-box {
        margin: 0 1rem !important;
    }

    app-mode-store-selector-page mat-button-toggle-group.directory .mat-button-toggle-checked button app-icon,
    app-directory-page mat-button-toggle-group .mat-button-toggle-checked button app-icon {
        background: var(--P) !important;
    }

    app-delivery-add-address .content-bg{
        background: var(--public-bg) !important;
        z-index: 1 !important;
    }

    app-delivery-add-address .container {
        background: var(--public-bg) !important;
    }

    app-cart-checkout .text-my-cart {
        padding: 0.5rem 0.75rem !important;
    }
    app-cart-checkout .cart-content{
        padding: 1rem !important;
    }
    app-cart .recom-container {
        background: var(--public-bg) !important;
    }

    app-cart .recom-swiper {
        background: var(--public-bg) !important;
    }

    app-checkout-page .title-order-detail {
        border-radius: 1rem 1rem 0 0 !important;
        display: flex !important;
        align-items: center !important;
        font-size: 1rem !important;
        /* font-weight: 600 !important; */
        color: #313131 !important;
        padding: 1.5rem 0.5rem 0.75rem !important;
        text-transform: capitalize !important;
    }

    app-cart-checkout .text-my-cart{
        font-size: 1rem !important;
    }

    app-checkout-page .benifits-container {
        background: transparent !important;
    }

    app-checkout-page .benifits-container h2 {
        border: 0 !important;
        background: var(--public-bg) !important;
        border-radius: 1rem 1rem 0 0 !important;
        display: flex !important;
        align-items: center !important;
        font-size: 1rem !important;
        /* font-weight: 600 !important; */
        color: #313131 !important;
        /* padding: 1.5rem 1.5rem 0.75rem !important; */
        text-transform: capitalize !important;
    }

    app-delivery-add-address .footer {
        background: var(--public-bg) !important;
    }

    .header .nav-title,
    .header button,
    .header mat-icon {
        color: #fff !important;
    }

    app-mode-store-selector-page .swiper-slide:first-child app-icon,
    app-mode-store-selector-page .swiper-slide:first-child .delivery-mode,
    app-directory-page .swiper-slide:first-child app-icon {
        -webkit-mask-image: url(../../icons/svg/phhk-mode-dinein.svg);
        mask-image: url(../../icons/svg/phhk-mode-dinein.svg);
        width: 22px;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    }
    app-directory-page .swiper-slide:first-child .delivery-mode,
    app-mode-store-selector-page .swiper-slide:first-child .delivery-mode{
        -webkit-mask-image: url(../../icons/svg/delivery_icon.svg);
        mask-image: url(../../icons/svg/delivery_icon.svg);
        mask-position: 0 0;
        -webkit-mask-size: 100%;

    }
    app-mode-store-selector-page mat-button-toggle-group.directory app-icon svg,
    app-directory-page mat-button-toggle-group.directory app-icon svg {
        display: none !important;
    }

    app-mode-store-selector-page mat-button-toggle-group.directory app-icon,
    app-directory-page mat-button-toggle-group.directory app-icon {
        color: #c5c5c5 !important;
        margin-right: 0.2rem !important;
    }

    app-offer-item .reward-container {
        background: none !important;
        margin-bottom: 1rem !important;
    }

    .btn-after-login h4 {
        background: var(--P) !important;
        color: var(--PC) !important;
    }

    app-login-page .btn-login {
        margin-top: 2rem !important;
    }


    #body .ab-effect-html.ab-show {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999;

    }
    #body .ab-effect-html.ab-show iframe {
        width: 100vw;
        height: 100vh;
    }

}

/*--Tablet here--*/

@media screen and (min-width: 600px) and (max-width: 839px) {
    app-mode-store-selector-page .swiper-slide:first-child app-icon,
    app-mode-store-selector-page .swiper-slide:first-child .delivery-mode,
    app-directory-page .swiper-slide:first-child app-icon {
        -webkit-mask-image: url(../../icons/svg/phhk-mode-dinein.svg);
        mask-image: url(../../icons/svg/phhk-mode-dinein.svg);
        width: 22px;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    }

    app-directory-page .swiper-slide:first-child .delivery-mode,
    app-mode-store-selector-page .swiper-slide:first-child .delivery-mode{
        -webkit-mask-image: url(../../icons/svg/delivery_icon.svg);
        mask-image: url(../../icons/svg/delivery_icon.svg);
        mask-position: 0 0;
        -webkit-mask-size: 100%;
    }

    app-mode-store-selector-page mat-button-toggle-group.directory .mat-button-toggle-checked button app-icon,
    app-directory-page mat-button-toggle-group .mat-button-toggle-checked button app-icon {
        background: var(--P) !important;
    }

    app-mobile-cart-page app-cart .clear-btn {
        background: transparent;
        border: 1px solid #ececec;
        border-radius: 0.25rem !important;
        color: #333 !important;
    }

    app-mobile-cart-page app-cart-action,
    app-mobile-cart-page app-cart .cart-btn {
        box-shadow: none !important;
    }

    app-cart-action .cart-btn button {
        padding: 0.8rem 0 !important;
        background: var(--sub-brand1) !important;
    }

    app-mobile-cart-page app-cart .div-prices h5 {
        color: var(--P800) !important;
        font-weight: 600 !important;
    }

    app-cart-action .cart-btn button .mat-button-wrapper .left-spacer .payment-count {
        border-radius: 500px !important;
        background-color: #fff !important;
        color: var(--P) !important;
        width: 1.4rem;
        height: 1.4rem;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem;
        box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
    }

    app-mobile-cart-page app-cart .special-btn.remove-btn {
        padding: 0.3rem !important;
        background: #dfdfdf !important;
        width: 24px !important;
        height: 24px !important;
    }

    app-mobile-cart-page app-cart .special-btn.remove-btn app-icon {
        color: #333 !important;
        height: 18px !important
    }

    app-mobile-cart-page app-cart .special-btn.duplicate-btn {
        background: var(--P) !important;
        padding: 0.3rem !important;
        width: 24px !important;
        height: 24px !important;
    }

    app-mobile-cart-page app-cart .special-btn.duplicate-btn app-icon {
        color: var(--PC) !important;
        height: 18px !important
    }

    app-mobile-cart-page app-cart .cart-item:first-child .item-name,
    app-mobile-cart-page app-cart .cart-item:first-child .main-item-price-extra,
    app-mobile-cart-page app-cart .main-item-price {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.2em !important;
        color: #333 !important;
        margin-bottom: 0.5rem !important;
    }

    app-mobile-cart-page app-cart .main-item-row>div,
    app-mobile-cart-page app-cart .main-item-row h4,
    app-mobile-cart-page app-cart .main-item-row h6 {
        margin: 0 !important;
        padding: 0 !important;
        /* line-height: 1.3em !important; */
        color: #333 !important;
        font-weight: normal;
        letter-spacing: 0 !important;
        font-size: 0.8rem !important;
    }
}

@media screen and (min-width: 1441px) {
    .desktop-maxWidth {
        position: relative;
        width: 100%;
        margin: auto;
        max-width: 1440px !important;
    }
}