body {
    margin: 0;
    width: 100%;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    display: inline-block;
    max-width: 400px;
    font-family: 'Lexend', sans-serif;
}

.SizeC {
    color: #b4b1b1;
    font-size: 13px;
    font-weight: bold;
    word-break: keep-all;
}



html {
    width: 100%;
    height: 100%;
    position: relative;
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-align: center;
}

.saleTimeInfoT {
    color: white;
    background: rgba(185, 185, 185, 0.72);
    animation: growscale 0.3s forwards;
    border: 1px solid;
    padding: 5px;
    border-radius: 3px;
    margin: 10px 40px;
    margin-bottom: 5px;
}

.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#CitrusOrder {
    width: 100%;
    height: 100%;
    position: relative;
    max-width: 400px;
    overflow: hidden;
    box-shadow: 0px 0px 14px -7px rgba(0, 0, 0 ,0.34);
    display:inline-block;
}

/*bear add*/
/*-------單一商品載入用--------*/
.LoadCover_categoryItem-item {
    position: absolute;
    top: -6px;
    left: 9px;
    right: 4px;
    bottom: -2px;
    z-index: 306;
    background-color: #ffffffba;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .LoadCover_categoryItem-item .Loadding-svg {
        width: 50px;
        height: 50px;
    }
/*.LoadCover_categoryItem-item .spinner-border {
        position: absolute;
        margin: auto;
        color: #d9282f;
        z-index: 100;
        font-size: 10px;
    }*/
.Loadding-svg [id$="LoaddingGetItem"] {
    background: none;
}

[id$="LoaddingGetItem"].LoadSvg svg {
    width: 32px !important;
    height: 32px !important;
}
/*-------------------------------*/

.PreLoaded, .WarnPage, .QRPage, .OHWPage, .AdLoaded{
    top: 0;
    /*left: 0;*/
    width: 100%;
    height: 100%;
    background: black;
    position: fixed;
    text-align: center;
    display: none;
    z-index: 2020;
    max-width: 400px;
}
.TermsLoad {
    top: 0;
    /*left: 0;*/
    width: 100%;
    height: 100%;
    background: black;
    position: fixed;
    text-align: center;
    display: none;
    z-index: 2020;
    max-width: 400px;
}
.CompletePopUpLoaded {
    top: 0;
    /*left: 0;*/
    width: 100%;
    height: 100%;
    background: black;
    position: fixed;
    text-align: center;
    display: none;
    z-index: 2020;
    max-width: 400px;
}

.WarnPage, .QRPage, .OHWPage {
    background: rgba(0, 0, 0,0.2);
}

.PriceWarn {
    color: #9a2f2f;
    font-weight: bold;
}

.NStoreName {
    color: #d9282f;
    font-weight: bold;
    font-size: 18px;
    margin-top: 8px;
}

.NStoreAddress {
    font-size: 12px;
    margin-top: 7px;
    /*font-weight: bold;*/
    max-width: 65%;
}

.BackStorelistPart {
    display: inline-flex;
    align-items: center;
    background: black;
    /*margin: 16px;
    margin-right: 5px;
    margin-bottom: 0;
    margin-left: 25px;*/
    padding: 5px 10px;
    font-size: 15px;
    align-self: center;
}
.SLan .LanLink {
    color: white;
}


.CountPart {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.CountItem {
    min-width: 70px;
    position: relative;
    font-size: 25px;
    color: #808080;
}

.NoConfirm {
    flex: 0 0 30%;
    text-align: right;
    color: #eb663e;
    font-size: 25px;
}

.NoPromoConfirm {
    flex: 0 0 30%;
    text-align: right;
    color: #eb663e;
    font-size: 25px;
    z-index:3000;
}
.chose99 {
    text-align: center;
    color: #f5f5f5;
    font-size: 14px;
    z-index: 3000;
    border: 1px solid #eb663e;
    padding: 5px 10px;
    border-radius: 20px;
    background: #eb663e;
    width:120px;
}
/*.CountRight{
    margin-left:15px;
}

.CountLeft {
    margin-right: 15px;
}*/
.ItemCount {
    min-width: 35px;
    font-size: 23px;
}

.SomeWarn .WarnText {
    font-size: 14px;
    animation: shock 0.5s forwards;
}

.SomeWarn .TotoQty {
    color: #c67d67;
    animation:shock 0.5s forwards;
}

.WarnText {
    font-size: 0;
    margin-left: 10px;
    color: #c67d67;
}


.Loadding-box, .WarnPage-box, .QRPage-box, .OHWPage-box, .Ad-box, .Terms-box, .CPopUp-box {
    width: 100%;
    height: 100%;
    position: relative;
}

.Ad-close, .Terms-close {
    width: 30px;
    background: white;
    border-radius: 50%;
    position: absolute;
    right: 5%;
    top: -8%
}
.CPopUp-close {
    width: 50px;
    /*background: white;*/
    border-radius: 50%;
    position: absolute;
    right: 5%;
    top: 7%;
    z-index:10;
}

.Loadding-svg, .WarnPage-contant, .QRPage-contant, .OHWPage-contant {
    height: 100%;
    width: 100%;
    position: absolute;
    text-align: center;
}

.WarnPage-contant, .QRPage-contant, .OHWPage-contant {
    display: flex;
    align-items: center;
    height: 100%;
}

    .Loadding-svg:before, .WarnPage-contant:before, .QRPage-contant:before, .OHWPage-contant:before{
        content: '';
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

.Loadding-svg #Loadding, #WarnWarn, #OccupiedWarnWarn, #EmailWarnWarn, #PickUpWarnWarn, .WarnWarn, .QRPlace, .OHWPlace {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background: white;
    display: inline-block;
    vertical-align: middle;
    padding: 25px 35px;
    border-radius: 15px;
}



    #WarnWarn, #OccupiedWarnWarn, #EmailWarnWarn, #PickUpWarnWarn, .WarnWarn, .QRPlace, .OHWPlace {
        background: unset;
    }

    .WarnWarn{
        padding:unset;
    }

.WarnPage-contant #WarnWarn, #OccupiedWarnWarn, #EmailWarnWarn,#PickUpWarnWarn,.WarnPage-contant .WarnWarn, .QRPage-contant #QRPlace, .QRPage-contant #HIQRPlace, .OHWPage-contant .OHWPlace {
    display: flex;
    flex: 1;
    justify-content: center;
}

#WarnWarn-Title, #OccupiedWarnWarn-Title, #EmailWarnWarn-Title, #PickUpWarnWarn-Title,.WarnWarnTitle, #QRPlace-Title, #OHWPlace-Title, #HIQRPlace-Title {
    padding: 5px 20px;
    padding-bottom: 5px;
    font-size: 20px;
    color: gray;
    word-break: break-word;
    font-weight: 600;
}

#WarnWarn-Message, #OccupiedWarnWarn-Message, #EmailWarnPage-Message, #PickUpWarnPage-Message, .WarnWarnMsg, #QRPlace-Message, #OHWPlace-Message, #HIQRPlace-Message {
    padding: 5px 25px;
    font-size: 18px;
    color: gray;
    word-break: break-word;
}

.NoOrderText {
    font-size: 20px;
    margin: 15px 35px;
    text-align: center;
    color: #489680;
    font-weight: bold;
}

    #OHWPlace-Message {
        padding: 8px;
        font-size: 19px;
        color: gray;
        word-break: break-all;
    }


.StorByD {
    margin: 20px;
    margin-top:5px;
    font-weight: 400;
}

.selLan 
{
    opacity:0;
    z-index:-1;
    position: absolute;
    top: 18px;
    background: #f4f4f4;
    width: 155px;
    border-radius: 5px;
    transform: translateY(-10px);
    transition:0.1s;
    text-align: left;
    font-size: 17px;
}

.letsellan {
    opacity: 1;
    z-index: 1;
    transform: translateY(0px);
}

.LanItemBox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.LanItem {
    padding: 7px 12px;
}


.LanLink {
    text-decoration: unset;
    color: black;
}
.LanItemBox:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index:-1;
    width: 95%;
    height: 38px;
    border-bottom: 1px solid lightgray;
}

#QRPlace-Message, #HIQRPlace-Message {
    margin: 5px 25px 10px 25px;
}

    #QRPlace-Message img, #HIQRPlace-Message img {
        margin: 10px 5px;
    }

#WarnWarn-Ok, #PayWarnWarn-Ok, #OccupiedWarnWarn-Ok, #PickUpWarnWarn-Ok, .WarnWarnOk, #QRPlace-Ok, #OHWPlace-Ok, #HIQRPlace-Ok, #UpgradeSet, #OverLimit, #ClearOrder, #TakeAwayApart {
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    color: #d9282f;
    border-top: 1px solid lightgray;
}
.PromoWarnOk {
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    color: #d9282f;
    border-top: 1px solid lightgray;
    /*position: absolute;*/
    width: 100%;
    /*bottom: 0;*/
    box-sizing: border-box;
    background: rgb(251, 251, 251);
}

#UpgradeSet .UpgradeSetNo {
    flex: 1;
    border-right: 1px solid lightgray;
}

#UpgradeSet .UpgradeSetYes {
  flex: 1;
        
}
#ClearOrder .ClearOrderNo {
    flex: 1;
    border-right: 1px solid lightgray;
}

#ClearOrder .ClearOrderYes {
    flex: 1;
}
#OverLimit .OverLimitNo {
    flex: 1;
    border-right: 1px solid lightgray;
}

#OverLimit .OverLimitYes {
    flex: 1;
}

#TakeAwayApart .TakeAwayApartNo {
    flex: 1;
    border-right: 1px solid lightgray;
}

#TakeAwayApart .TakeAwayApartYes {
    flex: 1;
}
    #QRPlace-Ok, #OHWPlace-Ok {
        padding: 15px;
    }

#Loadding svg {
    width: 32px !important;
    height: 32px !important;
}

.AdSwiper-container {
    position: relative;
    width: 100%;
    /*max-width: 100%;*/
    height:100%;
    overflow: hidden; 
}

.storeico {
    display: flex;
    flex: 0 0 5%;
    padding-top: 5px;
    justify-content: center;
    align-items: center;
}

#SwiperPart {
    font-size: 15px;
    position: fixed;
    top: 45px;
    width: 100%;
    height: 55px;
    background: #f2f0f0;
    /*background: white;*/
    padding: 5px 0;
    padding-bottom: 0;
}

    #SwiperPart .swiper-slide {
        width: auto;
        /*margin-top: 5px;*/
        /*padding: 0 10px;*/
        display: flex;
        align-items: center;
    }

        #SwiperPart .swiper-slide a {
           
            color: #343232;
        }

.WarnClose, .QRPlaceItem, .OHWPlaceItem {
    width: 320px;
    border-radius: 15px;
    background: white;
    padding: 10px 0;
}

.swipeLink {
    height: 100%;
    align-items: center;
    display: flex;
    text-decoration: unset;
}

.swipeActive {
    /*background: white;
    border-radius: 15px 15px 0 0;
    margin-top: 10px;
    box-shadow: 0px 0px 14px -6px black;*/
}

    .swipeActive .New_Slide {
        background: #d9282f;
    }

#SwiperPart .swipeActive .New_Slide .gkd {
    color: white;
}

.New_Slide a {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

.New_Slide img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 5px;
}


    body :target::before {
        content: '';
        position: unset;
        display: block;
        height: 110px;
        margin: -100px 0 0;
    }


.GKIDDesc {
    font-size: 20px;
    margin: 6px;
    margin-left: 9px;
    margin-bottom: 0;
}

#SwiperPart .ActiveKind {
    background: rgb(102, 146, 157);
    border-radius: 45px;
}

.bodyFixed {
    /*position: fixed;*/
    width: 100%;
}

#SwiperPart .ActiveKind a {
    color: white;
    text-decoration: none;
}

.NP {
    border-radius: 5px;
    padding: 0px;
    min-width: 350px;
}

.NPNBR {
    padding: unset;
    border-radius:unset;
}

.TiPart {
    margin: 15px 20px 0;
}

.TiText {
    font-size: 20px;
}
/*Share Start*/
.SaleTimeOut {
    position: absolute;
    justify-content: center;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0,0.75);
    border-radius: 7px;
    z-index: 305;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.SoldOut {
    position: absolute;
    justify-content: center;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255,0.75);
    border-radius: 7px;
    z-index: 305;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.Display2 .categoryItem-item:nth-child(odd) .SoldOut {
    /*width: 85.7%;*/
    width: 100%;
    height: 100%;
    /*left: 15px;*/
    border-radius: 5px;
    /*top: 1px;*/
}

.Display2 .categoryItem-item:nth-child(even) .SoldOut {
    /*width: 85%;*/
    width: 100%;
    height: 100%;
    /*left: 14px;*/
    border-radius: 5px;
    /*top: 1px;*/
}


.PIBox {
    width: 100%;
    height: 100%;
    position: absolute;
    background: unset;
    z-index: 304;
}


.PIBoxOne {
    background: white;
    border-radius: 5px;
    box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.18);
}

.PITitle {
    text-align: left;
    margin: 5px 15px;
    margin-top: 10px;
    font-weight: bold;
    font-size: 18px;
    position: sticky;
    left: 15px;
}

.PushItemContant {
    background: rgb(252, 252, 252);
    overflow: auto;
    padding: 10px 0px;
    box-shadow: 0px 0px 6px -4px rgba(0, 0, 0 ,0.71);
}

.PIPic img {
    max-height: 80px;
    min-height: 80px;
    min-width: 80px;
    max-width: 80px;
    border-radius: 5px 5px 0 0;
}


.PINamePart {
    font-size: 13px;
    max-width: 80px;
}


.PIName {
   
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 5px;
    padding-top: 2px;
}

.SaleTimeOut {
    background: rgba(255,255, 255, 0.5);
    z-index: 303;
    align-items: baseline;
}


    .SoldOutContant {
        font-size: 16px;
        text-align: center;
        
        padding: 5px 10px;
        /*border: 3px solid #ac7474;*/
        border: 3px solid #bc5151;
        /*color: #ac7474;*/
        color: #bc5151;
        border-radius:20px;
        /*margin-left:10px;*/
    }

.SaleTimeContant {
    border: unset;
    color: gray;
    padding: 15px 2px;
    font-size: 17px;
}

.SoldOutBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*border: 2px solid;*/
    width: 98%;
    height: 98%;
}

.AddItem {
    position: absolute;
    width: 94%;
    height: 100%;
    z-index: 304;
}


.Display2 .categoryItem-item:nth-child(odd) .AddItem {
    width: 160px;
    left: 14px;
}

.Display2 .categoryItem-item:nth-child(even) .AddItem {
    width: 160px;
    /*width: 95%;*/
    left: 13px;
}

.Display2 .NewCateBox{
    width:160px;
    /*width:89%;*/
    height:100%;
}


.Tool-bar {
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 302;
    max-width: 400px;
}

.Tool-Bottom {
    bottom: 0;
    /*left: 0;*/
    border: 0.5px solid #a5a4a4;
    border-left: unset;
    border-right: unset;
    background: white;
}


.tool-bar-contant {
    display: block;
    position: relative;
    height: 50px;
}

.Tool-contant-Bottom {
    margin: 10px 7px;
    border-radius: 5px;
}

.bar-box, .spbar-box, .spibar-box {
    width: 100%;
    position: absolute;
    justify-content: center;
    align-items: center;
    display: flex;
    left: 0;
    height: 100%;
    font-size: 0;
}

.spibar-box {
    background: #4f2121;
}

.bar-box {
    background: black;
}




.bar-box-bottom {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    /* display: flex; */
    /* -webkit-box-orient: horizontal; */
    /* -webkit-box-direction: normal; */
    /* -webkit-flex-flow: row nowrap; */
    -ms-flex-flow: row nowrap;
    /* flex-flow: row nowrap; */
    /* -webkit-flex-shrink: 0; */
    -ms-flex-negative: 0;
    /* flex-shrink: 0; */
    /* -webkit-box-align: center; */
    -webkit-align-items: center;
    -ms-flex-align: center;
    /* align-items: center; */
    /* -webkit-box-pack: center; */
    /* -webkit-justify-content: center; */
    -ms-flex-pack: center;
    /* justify-content: center; */
    /* width: 100%; */
    width: -webkit-fill-available;
    height: 100%;
    border-radius: 5px;
    padding-right: 15px;
    padding-left: 10px;
    background: #d9282f;
}

    /*.bar-box:before {
        content: '';
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }*/


.Shop-bag, .cateItem-total-price {
    display: inline-block;
    color: white;
    height: 100%;
    position: relative;
    vertical-align: middle;
}


.bar-title, .cateItembar-title, .cartbar-title {
    max-height: 100%;
    width: auto;
    height: auto;
    color: white;
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    animation: Slid-in 0.5s forwards;
}

.bar-title {
    max-width: 55%;
}

.cateItembar-title {
    width: 80%;
    text-align: left;
    flex:1;
    /*padding-left: 20px;
    padding-right: 15px;*/
}


.goOut .bar-title {
    animation: Slid-Out 0.3s forwards;
}


.Category-Contant, .CategoryItem-Contant, .Special-Contant, .SpecialItem-Contant, .Cart-Contant, .PayOverPage-Contant, .OrderHistoryPage-Contant {
    text-align: left;
    font-size: 0;
    /*display: block;*/
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    /*padding: 3px;*/
    overflow: auto;
    /*overflow: hidden;
    overflow-y: scroll;*/
}

.Scroll-Contant {
    text-align: left;
    font-size: 0;
    /*display: block;*/
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-shadow: 0px -5px 15px -5px #565656;
}




.Price-angle, .CheckOut-angle {
    font-size: 20px;
    margin-left: 5px;
    margin-bottom: 1px;
}
.category-item, .categoryItem-item {
    vertical-align: top;
    width: 33.33333%;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    flex: 0 0 33.33333%;
    padding: 1px;
    margin: 3px 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    /*padding: 0 3px;*/
}


.cateDisplay2 .category-item {
    width: 50%;
    margin: 10px 0;
}

.categoryItem-item {
    position: relative;
    height:300px;
}

.Display2 .categoryItem-item:nth-child(odd) {
    width: 50%;
    padding: 0 2px;
    /*text-align: left;*/
    padding-left: 4px;
}

.Display2 .categoryItem-item {
    margin: 10px 0;
}


.Display2 .categoryItem-item:nth-child(even) {
    width: 50%;
    padding: 0 2px;
    /*text-align: right;*/
    padding-right: 4px;
}

.category-img, .categoryItem-img {
    display: inline-block;
    max-height: 110px;
    max-width: 110px;
    height: 110px;
    width: 110px;
    background: snow;
    margin: 0 2px;
    margin-left: 1px;
}

.categoryItem-img {
    position: relative;
    border-radius: 5px 5px 0 0;
    background: #fbfbfb;
    /*box-shadow: 1px 0px 7px -3px rgba(0,0,0,0.5);*/
}

.catePart {
    font-size: 0;
    padding: 10px;
}

.Display2 .categoryItem-img, .cateDisplay2 .category-img {
    display: inline-block;
    min-width: 160px;
    /*max-width: 160px;*/
    height: 160px;
    margin-left: 0px;
    max-height: 160px;
}

.cateDisplay2 .category-img {
    margin:0;
}

.category-img {
    margin: 0;
    position: relative;
    border-radius: 10px 10px 0 0;
    background: #fbfbfb;
}

.cateDisplay2 .cateTiTi {
    background-color: white;
    border-radius: 0 0 10px 10px;
    /*min-width: 160px;*/
    width:160px;
    margin: 0;
}

.cateItemHead {
    margin: 0 1px 1px;
    min-width: 110px;
    max-width: 110px;
    display: inline-block;
}


.Display2 .cateItemHead:nth-child(odd) {
    display: inline-block;
    min-width: 160px;
    width: 161px;
}

.Display2 .cateItemHead:nth-child(even) {
    display: inline-block;
    min-width: 165px;
    width: 165px;
}

.cateTiTi {
    margin-left: 0px;
    display: inline-block;
    background-color: white;
    border-radius: 0 0 10px 10px;
}


.NewCateBox {
    box-shadow: 1px 0px 7px -3px rgba(0, 0 ,0, 0.5);
    display: inline-block;
    border-radius: 5px;
    width: 92%;
    height:100%;
}

.cate-Title, .cateItem-Title {
    /*background-color: snow;*/
    display: flex;
    -webkit-box-align: center;
    min-height: 45px;
    min-height: 45px;
    min-width: 110px;
    align-items: center;
    padding: 5px;
    line-height: 1.4;
    box-sizing: border-box;
    border-radius: 0 0 10px 10px;
}

.cateItem-Title {
    min-height: 50px;
    border-radius: 0 0 5px 5px;
    /*box-shadow: 1px 3px 8px -3px rgba(0,0,0,0.5);*/
}

.Display2 .cateItem-Title {
    /*min-height: 45px;*/
    min-height: 80px;
}

    .cate-Title p, .cateItem-Title p {
        font-size: 14px;
        -webkit-box-flex: 1;
        box-sizing: border-box;
        -webkit-flex-grow: 1;
        /*-ms-flex-positive: 1;*/
        flex-grow: 1;
        margin: 0;
        padding: 0 5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        /*text-align: left;*/
        word-break: break-word;
    }

    .cateItem-Title p {
        /*margin-top: 12px;*/
       text-align:center;
       max-height:80px;
    }


#Stores.Storelist-box {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}

.Storelist-box, .Category-Contant {
    background: #eaeaea;
    max-width: 400px;
    box-shadow: 0px 0px 14px -7px rgba(0, 0, 0,0.34);
}

.CategoryPage, .CateItem-Part, .SpecialPage, .SpecialItemPage, .CartPage, .ModifyPage, .PayOverPage, .OrderHistoryPage {
    width: 100%;
    height: 100%;
    position: absolute;
    /*background: #eaeaea;*/
    top: 0;
    left: 0;
    overflow: hidden;
}
.ScrollPage {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /*background: #eaeaea;
        overflow: hidden;
    */
}
.cate-bar-Back, .cateItem-bar-Back, .ShopBagCount, .Special-Back, .SpecialItem-Back, .Cart-Back {
    display: inline-block;
    color: white;
    position: relative;
    font-weight: bold;
    height: 100%;
    vertical-align: middle;
    font-size: 14px;
    /*padding-left: 5px;*/
}

.OrderListItem, .PromoOrderListItem {
    display: flex;
    flex-direction: column;
}

.ShopBagCount {
    height: auto;
    /*max-width:18%;
    width: 18%;*/
    text-align: left;
    max-height: 100%;
}

.ShopBagCBtn {
    background: #22ae73;
    padding: 4px 10px;
    border-radius: 4px;
}

.bar-box-bottom .bar-title {
    width: unset;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    /*-ms-flex-positive: 1;*/
    flex-grow: 3;
    flex-shrink: 1;
    max-width: unset;
    display: inline-flex;
    /*width: 50%;
    max-width: 50%;*/
}
/*Share End*/

/* StoreList Start */
.Store-box {
    background: white;
    border-radius: 5px;
    box-shadow: 1px 1px 7px 1px rgba(0, 0, 0 ,0.15);
    position: relative;
    margin-bottom: 2px;
    margin: 15px;
}

.sortby {
    margin: 15px;
    margin-bottom: 20px;
    text-align: left;
}

.sl-slist {
    flex: 1 auto;
    overflow: auto;
}

.sl-stype {
    /* display: flex;
    justify-content: space-around;*/
    /*border: 1px solid #178b5a;*/
    /*margin-bottom: 25px;*/
    margin: 15px;
    box-shadow: 1px 1px 7px 1px rgba(0, 0, 0, 0.15);
    /*border-radius: 10px;
    flex: 0 1 auto;*/
}

    .sl-stype .slt {
        padding: 15px;
        background: white;
        color: #454545;
        font-size: 20px;
        border-radius: 5px;
    }

    /*.sl-stype .Lslt {
        border-radius: 10px 0 0 10px;
    }

    .sl-stype .Rslt {
        border-radius: 0 10px 10px 0;
    }

    .sl-stype .sl-st-beselect {
        background: #d9282f;
        color: white;
    }*/

.sl-top {
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    flex: 0 1 auto;
    position: relative;
}

    .sl-top .lan {
        font-size: 14px;
        background: #f4f4f4;
        padding: 5px 10px;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }

.sl-info-item {
    margin-top: 5px;
    font-size: 16px;
    display: flex;
    align-items: baseline;
    margin-left: 5px;
}

    .sl-info-item i {
        margin-right: 5px;
    }

.Store-Distance {
    text-align: right;
    font-size: 16px;
    padding: 10px;
}

.Distant {
    font-size: 13px;
    text-align: center;
    display: inline-block;
    background: rgba(0 ,0 ,0,0.36);
    color: white;
    border-radius: 15px;
    padding: 5px 10px;
}

form {
    height: 100%;
    width: 100%;
    display: grid;
}

img {
    position: relative;
    max-width: 100%;
    display: inline-block;
}




.Store-img {
    margin-bottom: 10px;
    max-width: 100%;
    height: 72px;
    position: relative;
}

.Sel-Store-img {
    margin-bottom: 0;
    height: 180px;
}

.New_Slide {
    /*height: 100%;*/
    align-items: center;
    display: flex;
    background: white;
    border-radius: 60px;
    padding: 5px 10px;
    margin-left: 5px;
    box-shadow: 0px 0px 9px -7px black;
    position:relative;
}



.linka {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.s-o-img {
    height: 50px;
    width: 50px;
    margin: 0px 20px;
    margin-right: 10px;
    flex: 0 1 15%;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: inset 1px 1px 13px -1px rgba(9 ,9 ,9 ,0.14);
}

.link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.Store-info .link 
{
    z-index: 102;
}

.Store-Name {
    padding-top: 5px;
    font-size: 17px;   
}

.Store-Address {
    font-size: 13px;
    margin-bottom:3px;
    color: darkcyan
}
.Store-AddInfo {
    margin-top: 5px;
    position: relative;
}

/*StoreList End*/


/*Store Start*/

.bk-light {
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    width: 100%;
    height: 100%;
    z-index: 1;
}


.indexStoreimg {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    /*margin-top: 50px;*/
    align-items: center;
    position: relative;
    width: 100%;
    flex-direction: column;
}

.OutSide-Box {
    display: flex;
    height: 100%;
    text-align: center;
    flex-direction: column;
    justify-content: flex-start;
    position:relative;
    width:100vw;
}

    .OutSide-Box .HisTitle {
        text-align: right;
        display: inline-block;
        width: 100%;
        z-index: 102;
    }

@media only screen and (min-width: 400px) {
    .OutSide-Box {
        
        width: 400px;
    }
}

.Store-Box {
    flex: 1;
    display: flex;
    flex-direction: column;
    z-index:2;
}



#StorePage {
    z-index: 101;
}

.Midle-Box {
    width: 100%;
    height: 100%;
    position: relative;
}

    .Midle-Box .Midle-contant {
        width: 100%;
        height: 100%;
        position: absolute;
        text-align: center;
        display: grid;
    }

    .Midle-Box .Midle-contant:before {
        content: '';
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

    .Midle-Box .Midle-contant .Midle-item {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        background: white;
        display: inline-block;
        vertical-align: middle;
    }


   /*Category Start*/


.CategoryPage {
    z-index: 201;
}
.CateItem-Part {
    z-index: 301;
    animation: Slid-in 0.3s forwards;
}

.goOut .CateItem-Part {
    animation: Slid-Out 0.3s forwards;
}

.CategoryPage .bar-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.CategoryPage .bar-title {
    margin-left: 10px;
    flex: 1;
}

barb{
    height:100%;
}



.cate-bar-Back {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 28%;
}

.Back-img {
    width: 30px;
    height: 30px;
    margin-left: 10px;
}




.Back-angle {
    color: white;
    /*position: absolute;
    left: 5px;
    top: 0px;
    display: inline-block;*/
    padding-left: 6px;
    font-size:2em;
}

.Back-Text {
    display: inline-block;
    /*position: absolute;*/
    top: 12px;
    left: 25px;
    font-size: 16px;
    margin-left: 6px;
    font-weight: 400;
}



.Shop-bag {
    width: 20%;
    font-weight: bold;
}


.List-count {
    position: absolute;
    /*min-width: 20px;*/
    background: #ff1010;
    height: 20px;
    border-radius: 10px;
    right: 6px;
    top: 4px;
    color: white;
    font-size: 14px;
    display: inline-block;
    padding: 0px 6px;
}

    .List-count p {
        font-size: 14px;
        display: inline-block;
        font-weight: bold;
        margin: 1.2px 0;
    }

.ShopBag {
    display: inline-block;
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 19px;
    margin-left: 6px;
    font-weight: bold;
}


    .category-name {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-width: 95%;
        min-height: 42px;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
    }



    /*Category End*/



    /*CateGoryItem Start*/

.TopTitle {
    /*color: white;
    background: #d3d3d3;
    background: #95aaa4;*/
    padding: 15px 0 5px 0;
    border-radius: 5px 5px 0 0;
}

.TopContant {
    display: flex;
    margin: 0px 10px;
    padding-bottom: 10px;
    /*border-bottom: 1px solid lightgray;*/
    justify-content: center;
}

.RLOK, .promo-OK{
    background: #d9282f;
    border-radius: 5px;
    padding: 15px 0;
    color: white;
    border: unset;
    /*background: #95aaa4;
    border-radius: 0 0 5px 5px;
    color: white;*/
}


.StorByBtn {
    border: 1px solid /*#22ae73*/;
    border-radius: 5px;
    padding: 15px 0;
    font-size: 15px;
    flex: 1;
    margin: 5px;
}

.nothnks {
    background: white;
    color: black;
    border: unset;
}

.StorByBtn:active{
    color:lightgray;
}

#Register, #Login {
    margin: 0 5px;
}

.Active-GN {
    font-weight: bold;
    color: #d9282f;
}



.CategoryItem-Contant {
    position: relative;
    background: #fff;
    /*background: #f2f0f0;*/
}

.Special-in .CategoryItem-Contant {
    animation: smoothLeft 0.3s forwards;
}

.Special-in .spe-a {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0,0.25);
    z-index: 301;
    animation: spea-smoothIn 1s forwards;
}


.Special-out .CategoryItem-Contant {
    animation: smoothRight 0.3s forwards;
}



#CategoryProductItem, .ProductPart {
    animation: smoothTop 1s forwards;
    flex: 1;
}

.ProductPart {
    display: block;
    font-size: 0;
    padding-top: 10px;
}

.Price-level1 {
    display: block;
    position: absolute;
    width: 97%;
    height: 98%;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
}

.Price-level2 {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    text-align: center;
}

.Price-level3 {
    display: flex;
    -webkit-align-items: center; /* background: #ff000054; */
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.Price-level4 {
    display: block;
    font-size: 15px;
    color: white;
    text-align: center;
    text-align: -webkit-center;
}

.Price-level5 {
    position: absolute;
    display: block;
    margin-top: 0;
    width: 100%;
    z-index:303;
}


.PriceL6Box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Price-level6 {
    background: black;
    color: white;
    padding: 7px 10px;
    border-radius: 20px;
    overflow: hidden;
    white-space: nowrap;
    max-width: 90px;
    text-overflow: ellipsis;
    display: inline-block;
    font-size: 13px;
    margin-bottom: 15px;
}


    .Price-level6 .itemPrice {
        overflow: hidden;
        white-space: nowrap;
        max-width: 40px;
        text-overflow: ellipsis;
        display: inline-block;
    }

.PriceL6Box .infoBox {
    font-size: 13px;
    margin-bottom: 15px;
    width: 10px;
    min-width: 12px;
    line-height: 0.5;
    height: 12px;
    border: 2px solid;
    border-radius: 50%;
    margin-left: 5px;
    z-index: 305;
    padding: 5px;
    color: #a09f9b;
    box-shadow: 1px 1px 1px 1px #a09f9b;
}




.Price-angle, .CurrencyCode, .itemPrice {
    vertical-align: middle;
}

.cateItem-total-price {
    font-size: 15px;
    /*width: 30%;
    max-width: 30%;*/
    height: auto;
    max-height: 100%;
    text-align: right;
    animation: Slid-in 0.5s forwards;
}

.goOut .cateItem-total-price {
    animation: blingOut 0.2s forwards;
}

.cateItem-bar-Back {
    width: 28%;
    display: flex;
    align-items: center;
    animation: StayOpcity 0.3S forwards;
}

.box-Qty {
    position: absolute;
    bottom: 0;
    height: 65%;
    width: 100%;
    background: rgba(0,0,0,0.5);
}

.subtotalNote {
    text-align: left;
    font-size: 13px;
    margin: 9px 0;
}

.Display2 .box-Qty {
    height: 55px;
}

    .box-Qty .l_box {
        height: 100%;
    }

.box-left {
    /*border-right: 1px solid #50d49d;*/
    height: 100%;
}

.box-right {
    border-left: 1px solid #50d49d;
    height: 100%;
}

.box-center {
    text-align: center;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.CateItemQty {
    font-size: 14px;
    color: white;
    display: inline-flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
}

.center-contant {
    width: 100%;
    font-size: 15px;
    color: #50d49d;
    text-align: center;
}
.center-Qty {
    color: white;
    font-size: 20px;
    font-weight: bold;
}

.qty-minus{
    position: relative;
    z-index: 305;
}


#categoryItemBottom .bar-box-bottom {
    display: flex;
}


#categoryItemBottom .bar-title {
    font-size: 16px;
    flex: 1;
}
/*CateGoryItem End*/
/*SpecialPage Start*/
.SpecialPage, .ScrollPage {
    display: flex;
    flex-direction: column;
    /*overflow-y: scroll;*/
    z-index: 401;
    /*display:none;*/
}

    .SpecialPage .ModifyTop {
        background: black;
        animation: blingStop 0.2s forwards;
    }

    .SpecialPage .ModifyBottom {
        position: relative;
        animation: Slid-in 0.5s forwards;
    }

    .SpecialPage.PI {
        z-index: 2500;
    }

.spbar-box {
    height: auto;
    width: auto;
    background: white;
    text-align: unset;
    position: relative;
    display: block;
    /*margin-bottom: 2px;*/
    padding: 5px 0;
}
.box-line {
    margin-bottom: unset;
    padding-top: unset;
    border-bottom: 0.5px solid rgba(128,128,128,0.5);
}
.spbar-contant {
    margin: 0 15px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    align-items: baseline;
    justify-content: space-between;
}

.spbar-Note {
    font-size: 13px;
    padding: 15px;
    color: #a7a7a7;
}

.Special-Contant {
    /*background: white;*/
    background: #f2f0f0;
    animation: Slid-in 0.5s forwards;
}
.Scroll-Contant {
    /*background: white;*/
    background: #f2f0f0;
    animation: Slid-in 0.5s forwards;
    overflow: auto;
    height: 100%;
    margin-top: 45px;
}

.goOut .Special-Contant,  .goOut .cartbar-title /*,.goOut .SpecialItem-Contant*/ {
    animation: Slid-Out 0.5s forwards;
}

.goOut .CartPage, .goOut .ModifyPage, .goOut .PayOverPage, .goOut .OrderHistoryPage {
    animation: Slid-Out 0.7s forwards;
}

.Special-Back {
    width: 100%;
    animation: blingStop 0.3s forwards;
}

.TotoQty {
    font-size: 15px;
}

.MsPart {
    display: flex;
    align-items: center;
}

.Sp-Name {
    /*vertical-align: top;*/
    display: inline-block;
    width: 65%;
    font-size: 21px;
    text-align: left;
}

.spname {
    padding-right: 12px;
    font-size:16px;
}

.spprice {
    
    font-size: 16px;
}


.GroupItemMinus{
    animation:gim 0.4s forwards;
}

.GroupItemMM {
    animation: gimm 0.5s forwards;
}

.ShowGroupItemQty 
{
    font-size: 15px;
    position: absolute;
    top: 8px;
    left: 10px;
    width: 80%;
    background: rgba(255, 255, 255, 0.85);
    animation:ToLeft 0.45s forwards;
}

.GGIIQTY a {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 5px;
    z-index: 405;
}


.Sp-Price {
    /*position: absolute;*/
    top: 9px;
    right: 15px;
    font-size: 21px;
    max-width: 135px;
    word-break: break-all;
    /*text-align: right;
    font-size: 25px;
    display: inline-block;
    width: 40%;*/
}

.CountComponent {
    text-align: center;
    padding: 5px 10px 15px 15px;
    border-bottom: 0.5px solid rgba(128, 128, 128,0.3);
}


.Sp-Size,.die-Size {
    min-width: 50px;
    text-align: center;
    display: inline-block;
    color: black;
    font-size: 15px;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    margin: 3px;
    /*margin: 5px;
    min-width: 35px;
    text-align: center;
    display: inline-block;
    background: #fbca00;
    color: white;
    font-size: 16px;
    padding:10px 5px;
    border-radius: 5px;
    position: relative;*/
}

.die-Size {
    box-shadow: 1px 1px 4px -1px rgba(0, 0, 0, 0.18);
    opacity: 0;
}


    /*.Sp-Size:not(:last-child)::after {
        position: absolute;
        content: '';
        display: inline-block;
        height: 100%;
        width: 1px;
        background: white;
        top: 0;
        right: -5px;
    }*/

.SizeSpot {
    border-radius: 5px;
    padding: 5px 5px;
    /*background: #fbca00;*/
    /*background: #808080;*/
    display: inline-block;
}

.BeSize {
    color: white;
    background: #fbca00;
    animation: growscale 0.3s forwards;
}



.flavor-part, .addition-part {
    /*border-top: 0.5px solid rgba(128, 128, 128 ,0.3);*/
    /*margin-top: 5px;*/
    width: 100%;
    height: 100%;
    text-align: left;
}

/*.addition-part {
    border-top: 0.5px solid rgb(95,95,95);
}*/

.flvCategory-box,.add-box {
    width: 100%;
    height: 100%;
}

.flv-title {
    background: #f2f0f0;
    padding: 5px 0;
    font-size: 17px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-title {
    font-size: 13px;
    padding: 15px 20px;
    border-radius: 5px 5px 0 0;
    display: table;
    color: #939598;
    border: 1px solid rgb(231, 231, 231);
    box-shadow: 1px 1px 4px -2px rgba(0, 0,0, 0.48);
    border-bottom: unset;
    background: white;
}


    .flv-title .Title{
        display: inline-block;
        /*background: #ffe58f;*/
        color: #f44812;
        padding: 5px;
        border-radius: 5px;
        margin-left: 15px;
        font-size: 14px;
    }

.flv-item, .add-item {
    width: 100%;
    display: flow-root;
    border-bottom: 0.5px solid #eeecec;
    /*padding: 15px 0;*/
}

.flv-item {
    background: white;
}

.add-item {
    background: white;
}

/*.flv-radio, .add-radio {
    text-align: center;
    float: left;
    font-size: initial;
    color: lightgray;
    min-width: 55px;
    font-size: 19px;
    padding: 15px 0;
}*/
.flv-radio, .add-radio {
    text-align: center;
    width: 10%;
    display: inline-block;
    /*float: left;*/
    /*font-size: initial;*/
    color: lightgray;
    /*min-width: 55px;*/
    font-size: 19px;
    padding: 15px 0;
}

.add-CountDad {
    width: 32%;
    display: inline-block;
    font-size: 15px;
    padding: 15px 0;
}

.add-CountPart {
    text-align: center;
    /*
    vertical-align: middle;
    z-index: 404;
    */
    display: inline-flex;
    position: static;
    background: #ffffff;
    width: 22px;
    height: 22px;
    right: 5px;
    border-radius: 50%;
    box-shadow: 0px 1px 1px 2px rgb(87 87 87 / 10%);
    align-items: center;
    justify-content: center;
}

.Group-CountDad {
    display: flex;
    flex: 1;
    width: 60%;
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    padding: 2% 0;
    /*
        align-content: flex-end;
    */
}

.show-CountShow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.85);
    width: 50%;
    text-align: center;
    color: #757272;
}


.selectRadio, .AddedRadio {
    color: #d9282f;
}

.CantAddRadio {
    font-size: 22px;
    color: #808080;
}


.AddedRadio{
    font-size:22px;
}

.flv-info,.add-info {
    font-size: 0;
    display: flow-root;
    padding: 15px 0;
    /*border-bottom: 0.5px solid lightgray;*/
}

.flv-name,.add-name {
    font-size: 15px;
    width: 70%;
    display: inline-block;
    line-height:1.4;
}
.flv-price,.add-price {
    text-align: right;
    font-size: 16px;
    width: 30%;
    display: inline-block;
    color: #757272;
}
/*SpecialPage End*/
/*SpecialItem Page*/
.SpecialItemPage {
    z-index: 501;
}

.SpecialItem-Back {
    position: absolute;
    z-index: 502;
    left: 0;
    animation: blingStop 0.3s forwards;
}

.pu-cen-box {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-align: center;
    align-items: center;
}

.pu-cen-ti {
    font-weight: bold;
    color: white;
    font-size: 18px;
    width: 100%;
}

.SpecialItem-Contant {
    background: white;
    /*animation: Slid-in 0.5s forwards;*/
}

.SpecialItem-Part {
    height: 100%;
    width: 100%;
    animation: Slid-in 0.5s forwards;
}

.goOut .SpecialItem-Part {
    animation: Slid-Out 0.7s forwards;
}


.Added-box,.DupAdded-box {
    position: absolute;
    width: 100%;
    bottom: 30px;
    left: 0;
    z-index: 2503;
    font-size: 16px;
    overflow: hidden;
    animation: Added 2s forwards;
}
.Added-contant, .DupAdded-contant {
    margin: 3px 0;
    position: relative;
    text-align: center;
}

.Added-item,.DupAdded-item {
    display: inline-block;
    color: rgba(0,0,0,.55);
    background: #fff1c4;
    text-align: left;
    padding: 10px 0;
    padding-left: 15px;
    border-radius: 5px;
    width: 95%;
    font-weight: bold;
    box-shadow: 1px 1px 13px -7px rgba(0, 0, 0, 0.46);
}
.DupAdded-item {
    background:black;
    color:white;
}


    .Added-Paper, .DupAdded-Paper {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
    }

.clickme {
    position: absolute;
    width: 100%;
    background: rgba(255,255, 255,0);
    height: 100%;
    top: 0;
    left: 0;
    z-index: 502;
    animation:BlingBack 0.8s alternate-reverse infinite;
}

.GrowGrowSmall {
    animation: GrowGrow 1s alternate-reverse infinite;
}

/*SpecialItem End*/


    /*CartPage Start*/
    .CartPage {
        z-index: 601;
        animation: Slid-in 0.8s forwards;
    }

        .CartPage .Tool-Bottom {
            box-shadow: 1px 1px 7px -4px rgba(0, 0 ,0, 0.75);
            border-top: unset;
        }

.CartPage .Tool-bar{
    z-index:904;
}

.spprice {
    padding-left: 5px;
}

.S_P_Start, .A_O_Start {
    font-size: 15px;
    display: block;
    background: #f2f0f0;
    color: #666;
    padding: 20px 15px;
    padding-bottom: 0;
    text-align: left;
}


.A_O_Start {
    padding: 20px 5px;
    padding-bottom: 0;
}

.Cart-Back {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 28%;
    animation: blingStop 0.3s forwards;
}

.cartbar-title{
    width:80%;
    text-align:left;
    flex:1;
}

.Cart-Contant, .OrderHistoryPage-Contant {
    background: #f8f2f2;
    /*animation: Slid-in 0.5s forwards;*/
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    /*background: #f8f2f2;
    animation: Slid-in 0.5s forwards;*/
}

.PushItemPart {
    white-space: nowrap;
    /*overflow: auto;*/
}


#AskAddPushItemPage .WarnWarnOk{
    padding:unset;
}

#AskAddPushItemPage .WarnClose 
{
    padding: unset;
}

#AskAddPushItemPage .WarnWarnTitle
{
    font-weight: bold;
    padding-top: 15px;
}


.AddPushItemOk {
    border-radius: 0 0 15px 15px;
    background: unset;
    color: unset;
    /*font-size: 15px;
    padding: 5px 10px;
    display: inline-block;*/
}

.CartPage .PushItemPart .SoldOut {
    width: 100%;
    background: rgba(0, 0, 0,0.75);
    border-radius: 4px;
    top: 1px;
    left: 1px;
}

    .PushItemPart .SaleTimeOut {
        width: 100%;
    }

    .PushItemPart .SaleTimeContant {
        font-size: 15px;
        white-space:break-spaces;
        min-width: 74px;
        max-width: 74px;
    }

    .PushItemPart .SoldOutContant 
    {
        font-size:17px;
        min-width: 74px;
        max-width: 74px;
    }


.CaGroItPart .SoldOutContant {
    background: rgba(255, 255, 255, 0.82);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 16px;
    flex: unset;
}

.CartPage .CaGroItPart .SoldOut {
    background: rgba(0, 0, 0,0.1);
    border-radius: 2px;
}

    .PushItemBox {
        margin: 10px;
        display: inline-block;
        position: relative;
    }

        /*.PushItemBox .SoldOut {
            background: rgba(0, 0, 0,0.75);
            left: 1px;
            border-radius: 7px;
        }*/

.OrderHistoryPage-Contant {
    justify-content: unset;
}

    .Cart-Contant .Title, .OrderHistoryPage-Contant .Title {
        font-size: 18px;
        font-weight: bold;
        color: #a19c9c;
        margin: 15px;
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
    }

    .Cart-Contant .Tool-Bottom {
        position: sticky;
        z-index:904;
    }

.OrderItem-box {
    font-size: 16px;
    background: #fbfbfb;
    padding: 10px 15px 12px 20px;
    /*padding: 15px;
    padding-left: 20px;
    padding-top: 10px;*/
    border-bottom: 1px solid #d8d8d8;
    position: relative;
}

.OrderItem-Edit {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
}

.SpecialRequestBtn, .PromoSpecialRequestBtn {
    font-size: 15px;
    color: #d9282f;
    /*color: #22ae73;*/
    margin-top: 3px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
}

.OrderItem-contant {
    padding: 10px 0;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

.OrderItem-Name {
    font-size: 1rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 0 1 50%;
    white-space: normal;
    color: #222;
    word-break:break-word;
}

.OrderItem-Qty {
    font-size: 1rem;
    padding-right: 10px;
    color: #666;
    display: flex;
    flex: 0 0 25%;
}

.OrderItem-Price {
    text-align: right;
    font-size: 1rem;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 20%;
    -ms-flex: 0 0 20%;
    flex: 1 0 25%;
    color: #222;
}

.OrderItem-Count, .OICDisable, .PromoOrderItem-Count {
    flex-grow: 1;
    text-shadow: 1px 1px 1px rgba(191, 191, 191, 0.68);
}

.OICDisable {
    color: #e1e1e1;
    text-shadow: unset;
}

.OrderItem-Plus, .PromoOrderItem-Plus {
    text-align: right;
}

.OrderItem-CountQty, .PromoOrderItem-CountQty {
    text-align: center;
}

.SpecilItem,.AddonItem {
    padding: 10px 0;
    padding-left: 10px;
    padding-top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


.AddonItem {
    padding-left: 0;
}

.SpecialText, .AddonText, .AddonPrice {
    font-size: 14px;
    color: #939393;
    flex-grow: 1;
}

.AddonPrice {
    flex-grow: 0;
}

.Edit-box, .NEdit-box, .TakeAwayEdit-box {
    color: gray;
    margin-top: 0;
    z-index: 903;
    height: 0px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    transition: height 0.2s;
}


.StartModify .Edit-box, .NEdit-box {
    height: 35px;
    margin: 10px 0;
    margin-top: 0;
    opacity: 1;
    transition: height 0.3s;
}





#Modifier {
    color: #d9282f;
}


.EditItem {
    margin: 0 25px;
    margin-left: 0;
}
.Dinein {
    margin-right: 15px;
}

.TakeOut {
    margin-right: 0;
}

.Service-box {
    display: flex;
    margin-right: 0;
    justify-content: flex-start;
    flex-grow: 1;
}
.Duplicate {
    margin-right:0;
}

.CalculateOtherPart {
    font-size: 16px;
    background: #fbfbfb;
    padding: 10px 15px 12px 20px;
    border-bottom: 1px solid #d8d8d8;
    position: relative;
}

.OestBox {
    margin: 0px 0 5px 0;
    display: flex;
    justify-content: space-between;
}

.IncTax {
    font-size: 15px;
    border-top: 0.5px solid #d1d1d1;
    margin-top: 5px;
    padding-top: 5px;
    color: #9c9c9c;
    font-weight: 100;
    display: flex;
    flex: 1;
    justify-content: space-between;
}


.CartPage .SoldOut {
    height: 100%;
    font-size: 20px;
    color: #dd5302;
    border-radius: unset;
    background: rgba(255, 255, 255,0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}

.SoldOutBtn {
    border: 1px solid;
    padding: 7px 15px;
    background: rgba(221, 83, 2 ,0.07);
    border-radius: 3px;
    display: inline-block;
}

    .CartPage .SoldOut .SText {
        padding-left: 15px;
        font-size: 20px;
    }


/*CartPage End*/
/*ModifyPage Start*/
.ModifyPage {
    z-index: 701;
    background: #eaeaea;
    display: flex;
    flex-direction: column;
    animation: Slid-in 0.5s forwards;
}


.ModifyTop {
    background: #2a2928;
    color: white;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}






.ModifyBack {
    flex: 1 1 30%;
    font-size: 16px;
    padding-left: 5px;
    display: inline-flex;
    align-items: center;
}

.ModifyTop .Title {
    flex: 1 1 80%;
    padding-left: 15px;
}

.ModifyContant {
    flex: 1;
    background: #f6f6f6;
    overflow: hidden;
    overflow-y: scroll;
    text-align:left;
}

.ModifyBack .Back-angle {
    color: white;
    padding: 0px 5px;
    position: relative;
    left: unset;
}



.ModifyBottom-Box {
    position: sticky;
    font-size: 18px;
    bottom: 0;
    left: 0;
    width: 100%;
}

.ModifyBottom {
    padding: 10px 7px;
    display: flex;
    align-items: center;
    height: 45px;
    background: white;
    justify-content: center;
    border: 0.5px solid #a5a4a4;
    border-left: unset;
    border-right: unset;
}



.ModifyBottomContant {
    display: flex;
    margin: 10px 7px;
    border-radius: 5px;
    background: #d9282f;
    /*background: #22ae73;*/
    padding: 15px 10px;
    color: white;
    text-align: center;
    flex: 0 0 95%;
    justify-content: center;
}


#categoryItemBottom.ModifyBottomContant {
    padding: 10px 7px;
}

.ModifySpecialPrice 
{
    display: flex;
    flex: 0 0 15%;
    justify-content: space-between;
}



.NotInResturant {
    /*height: 0;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    /*flex: 0 0 30%;*/
    /*transition: height 0.35s;*/
}

.OutResturant {
    display: flex;
    flex-direction: row;
    color: #848282;
    font-size: 15px;
    margin: 15px 0px;
    justify-content: space-between;
}

.displayFlex1 {
    display: flex;
    flex: 1;
}

.fa-edit {
    width: 25px;
    height: 25px;
    font-size: 20px;

}

.DEdit .fa-edit 
{
    animation: DeliveryEdit 0.2s forwards;
}

.StartModify .NotInResturant {
    margin-bottom: 6px;
    border: unset;
    transition: height 0.35s;
}


.Delivery-Part {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.DAddress-Box, .input-Box {
    display: flex;
    justify-content: space-between;
}

.input-Box {
    overflow: hidden;
    height: 45px;
    transition: height 0.2s;
}

.DEdit .input-Box 
{
    overflow:unset;
    height: 45px;
    transition: height 0.2s;
}


.DAddress-Contant, .input-Contant {
    flex: 1;
    padding-right: 20px;
}

div {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.AdConfirm {
    border-style: unset;
    padding: 8px;
    border-radius: 5px;
    background: #999999;
    color: white;
    font-weight: bold;
    outline: unset;
    height: min-content;
}

    .AdConfirm:active {
        outline: 1px solid gray;
        outline-style: auto;
        color: #f2f2f2;
    }

.DAddress, .DTime,.input-set {
    position: relative;
}


#DMin, #DHour {
    margin-right: 10px;
    display: inline-block;
}


.DAddress, .input-set {
    max-width: 295px;
    margin-bottom: 15px;
}

.ChhB {
    color: #d9282f;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.TellYouToSeeYourDFee .ChhB {
    animation: ChhB 0.5s alternate-reverse infinite;
}

.TellYouToSeeYourDFee .ChhB:after {
    z-index: 0;
    position: absolute;
    background: rgba(55, 205, 142,0.35);
    width: 25px;
    height: 25px;
    content: '';
    border-radius: 50%;
    animation: ChhbAfter 0.5s alternate-reverse infinite;
}

.Time {
    /*margin-right: 15px;*/
    border: 1px solid #efe8e8;
    padding: 5px 10px;
    color: #202020;
    background: white;
    border-radius:5px;
}

.DDate {
    background: unset;
    border: unset;
    display: flex;
    align-items: center;
}

    .DDate #date {
        /*margin-left: 5px;*/
        width: 100px;
        font-size: 16px;
        padding: 5px 10px;
        border-radius: 5px;
    }

.DHour, .DMin {
    position: relative;
}

.HouHour, .MinMinut {
    display: none;
    position: absolute;
    /*background: white;*/
    width: 150px;
    /*width: 175px;*/
    left: 0;
    z-index: 600;
  animation:Top 0.2s forwards;
}






#HourA, #MinA{
    position:absolute;
    top:0;
    left:0;
    width:100%;
   height:100%;
}
.hourPeople {
    padding: 10px 15px;
    /*max-width: 10%;*/
    width:20px;
    background: white;
    border: 1px solid lightgray;
    display: inline-block;
}

.minPeople {
    padding: 10px 15px;
    /*max-width: 10%;*/
    width:20px;
    background: white;
    border: 1px solid lightgray;
}
/*.hourPeople, .minPeople {
    padding: 15px 20px;
    min-width: 16px;
    background: white;
    border: 1px solid lightgray;
    display: inline-block;
}*/

.disMin {
    color: lightgray;
    background: #f7f7f7;
}

.disHour {
    color: lightgray;
    background: #f7f7f7;
}

.DTime {
    margin-top: 5px;
}

.DAllTime {
    display: flex;
    font-size:16px;
    /*padding: px 0px 20px;*/
    padding: 10px 0px;
}

.Add, .input-1, .PaxInput {
    border: unset;
    font-size: initial;
    border-style: unset;
    border-radius: unset;
    background: unset;
    padding: 0 3px;
    border-bottom: 0.5px solid lightgray;
    min-width: -webkit-fill-available;
}


.PaxInput {
    text-align: left;
    padding-top: 10px;
    border-bottom: unset;
}

.i-pax, .r-pax {
    display: inline-block;
    /*border: 1px solid;*/
    padding: 10px 35px;
    min-width: 15px;
}

.Pax-background {
    background: lightgray;
    display: inline-block;
    padding: 0px 2px;
    color: white;
    font-size: 18px;
   
}

.set-pax {
    /*height: 20px;
    transition: height 0.2s;*/
}

.pax-a {
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    top: -10px;
    padding: 10px 0;
}

/*.goPax .set-pax{
    height:200px;
    transition:height 0.5s;
}

.goPax .PaxTop {
    height: 200px;
    transition: height 0.5s;
}*/


.pax-warn {
    display: inline-block;
    color: #f76868
}

.shock #CustNum {
    animation: shock 1s forwards;
}
/*.pax-box:not(:last-child) .i-pax:not(:last-child)
{
    border-right:unset;
    border-bottom:unset;
}*/
/*.pax-box:not(:last-child) .i-pax:last-child {
    border-bottom: unset;
}*/
/*.pax-box:last-child .i-pax:not(:last-child) {
    border-right: unset;
}*/
.PaxTop {
    margin-top: 20px;
    text-align: center;
    flex-direction: column;
    /*height: 0;
    overflow: hidden;
    transition: height 0.2s;*/
}

.pax-box {
    display: inline-flex;
    justify-content: space-between;
}

.input-1 {
    color: #393939;
}
    .Add:focus, .input-1:focus {
        outline: none;
    }


        .ppp::-webkit-input-placeholder{
            font-size:18px;
        }

        .Add:focus::-webkit-input-placeholder, .input-1:focus::-webkit-input-placeholder {
            font-size: 0;
        }
    .Add::-webkit-input-placeholder{
        color: #bababa;
    }

.input-1::-webkit-input-placeholder {
    color: #bababa;
}

    .Add:-webkit-autofill, .input-1:-webkit-autofill {
        /*-webkit-box-shadow: 0 0 0px 1000px rgba(192,192,192,0) inset;*/ /*淡淡的白*/
        transition: background-color 5000s ease-in-out 0s; /*透明*/
        /*-webkit-text-fill-color: rgba(157,157,157,1) !important;*/
        -webkit-text-fill-color: rgba(84,103,110,1);
        /*background: white !important;*/
    }

.inputOTip, .inputTip ,.PaxTip
{
    position: absolute;
    margin-left: 15px;
    color: #bababa;
    margin-bottom: 5px;
    font-size: 14px;
    top: -13px;
    left: -15px;
}


.inputTip 
{
    display: none;
}

.inputSet {
    margin: 20px;
    position: relative;
}

.textA {
    font-size: 16px;
    font-weight: 100;
    max-width: 100%;
    max-height: 65px;
}

.ST {
    /*flex: 0 0 20%;*/
    flex: 0 0 30%;
    /*text-align: center;
    padding: 0px 6px;*/
    padding-right: 3%;
}

.INST {
    flex: unset;
    padding: unset;
    margin-right: 25px;
    color: #7d7d7d;
}

    .STItem {
        /*border-radius: 23px;
        color: snow;
        background: lightgray;
        box-shadow: 1px 1px 1px 1px rgba(0, 0,0,0.2);
        padding: 5px;*/
    }

/*.ActiveST {  
    color: white;
    background: #9bb6b6;
    box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
}*/
.Noshow {
    display: none;
}

.INActiveST, .ActiveST {
    color: #37cd8e;
    font-weight: bold;
}

.ActiveST, .BeChose {
    color: #d9282f;
    font-weight: bold;
}
    /*ModifyPage End*/
    /*PayOverPage*/
    .PayOverPage {
        z-index: 1000;
        background: white;
    }

.PayOverItem {
    font-size: 18px;
    display: flex;
    flex-direction: column;
}



.PayOverTitle {
    display: flex;
    font-size: 18px;
    padding: 20px 15px;
    margin-bottom: 2px;
    font-weight: bold;
    justify-content: space-between;
    color: #22ae73;
    background: #fbfbfb;
}

.ChangeG {
    border-style: unset;
    background: #eeeeee;
    font-weight: bold;
    color: #454545;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;
    margin: unset;
}

.PayOverHead {
    padding: 15px;
   
    background: #fbfbfb;
    margin-bottom: 1.5px;
}

.PayOverHeadItem {
    font-size: 15px;
    margin: 15px 0;
    display: flex;
    /*flex: 0 0 11%;*/
    justify-content: space-between;
   
}

.OFinishHItem {
    flex: 0 0 50%;
    text-align:left;
}

.OFinishHItem.Right
{
text-align:right;
}

.PayOverPage-Contant {
    background: #f8f2f2;
}

.PayOverListOrderItem {
    display: flex;
    font-size: 15px;
    padding: 10px;
    padding-bottom: 0px;
    justify-content: space-between;
}

.ExpenFAPart {
    font-size: 13px;
    color: gray;
    margin: 0 10px;
    margin-left: 25px;
}

.FlavAndAdt .Taste {
    font-size: 13px;
    margin-left: 40px;
}

.ExpenGroupItemTitle {
    display: flex;
    font-size: 14px;
    font-weight: bold;
    color: #484444;
    margin-left: 10px;
    justify-content: space-between;
}

.ItemName {
    flex: 1 0 50%;
    padding: 0 10px;
    word-break: break-word;
    text-align: left;
}

    .ItemName .Fist {
        font-weight: bold;
        margin-bottom: 5px;
        color:black;
    }


    .ItemQty {
        flex: 0 0 10%;
    }

.ItemPrice {
    flex: 1 0 5%;
   /* padding-right: 5px;*/
    text-align: right;
}

.OrderStatusAndInfo {
    flex: 1;
    padding-right: 10px;
}

.PayOverOrderFa {
    color: #22ae73;
    font-size: 20px;
    flex: 0 0 8%;
}

.PayOverSomeInfo {
    display: flex;
    flex: 1;
    align-items: flex-start;
}

.Info {
    font-size: 23px;
    padding-right: 5px;
    color: #d7d7d7;
}

.OStatus {
    display: flex;
}
.OrderSomeInfoText {
    margin: 5px 0;
    color: gray;
    font-size: 16px;
    font-weight: 500;
    text-align:left;
}
.Order-No {
    display: flex;
    justify-content: flex-start;
    color: gray;
    font-size: 16px;
}

.Oh-ST {
    color:rgba(34, 174, 115, 0.7);    
}

#FinishItemPart {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 1.5px;
    /*background: #fbfbfb;*/
    background: #f4f4f4;
}


.PayOverWarnPart {
    padding: 0 0 0.7em 0;
    margin-bottom: 0.2em;
    position: relative;
    text-align: center;
}

.PayOverWarnText {
    font-family: Microsoft JhengHei;
    font-size: 18px;
    text-align: center;
    max-width: 250px;
    padding: 5%;
    color: #313131;
    display: inline-block;
    word-break: break-word;
    margin-top: 25px;
    background-color: #ffffff;
}

/*PayOverEnd*/

.ppp {
    margin-bottom: 10px;
    font-size: 18px;
}

.soTip {
    font-size: 18px;
}


/*OrderHistoryPage Start*/

.OrderHistoryPage {
    z-index: 201;
    background: #f8f2f2;
    animation: Slid-in 0.8s forwards;
}

    .OrderHistoryPage .Tool-bar {
        background: black;
    }

.AOrder {
    display: flex;
    /*flex:20%;*/
    font-size: 15px;
    flex-direction: column;
}


.HistoryItem-Box {
    z-index: 305;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.15);
    top: 0;
    left: 0;
}

.HistoryItem-Contant {
    /*max-height: 80%;
    overflow: scroll;*/
    background: white;
    display: inline-block;
    position: relative;
    width: 95%;
    height: auto;
    border-radius: 5px;
}

#OHWPlace-Ok {
 text-align:center;
}

#OHWPlace-Title {
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
    border-bottom: 2px solid lightgray;
    background: #ffffff;
    border-radius: 5px 5px 0 0;
}

    .HistoryItem-Contant .Order-No {
        font-size: 14px;
    }

.HistoryItem-Contant .PayOverListOrderItem {
    /*padding: 10px 5px;*/
    padding: 0 5px;
}

.HistoryItem-Contant .ItemPrice 
{
    flex: 1 0 20%;
}

.HistoryItem-Contant .SpecialThing {
    font-size: 13px;
    word-break: break-word;
    padding: 4px 10px;
}

.HistoryItem-Contant .ExpenFAPart{
    text-align:left;
}

.HistoryItem-Contant .ExpenGroupItemTitle .MealSetName {
    flex: 1 0 50%;
}

.HistoryItem-Contant .ExpenGroupItemTitle .MealSetPrice {
    flex: 0 1 25%;
    font-weight: 100;
    text-align-last: end;
}

.OHMessage {
    max-height: 400px;
    overflow: scroll;
}
.OHOK {
    position: absolute;
    background: #ffffff;
    border-radius: 0px 0px 5px 5px;
    bottom: 0;
    width: 100%;
}

#OHWPlace-Message{
    margin:unset;
}

.HIIHeight {
    /*max-height: 265px;
    overflow: scroll;*/
}

.HistoryItem-Contant .PayOverHead,.HistoryItem-Contant .PayOverTitle {
    background: #ffffff;
}


.Taste {
    /*display: inline;*/
    font-size: 14px;
    margin: 0 5px;
}
/*OrderHistoryPage End*/
.Store {
    margin: 15px;
}


.Store-info 
{
    padding: 15px;
    /*min-height: 245px;*/
}

.Store .Store-info 
{   
    margin-top: 10px;
    font-size: 16px;
    text-align: center;
    padding: unset;
    min-height: 190px;
}

.AdFlex {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    /*overflow: hidden;*/
    /*margin: 5px 0;
    margin-bottom:15px*/
}




    .Store .TableNo {
        font-weight: bold;
        font-size: 35px;
    }

    .Store{
       
        font-size: 20px;
    }

.StoreName {
    font-size: 25px;
}

    .Store .StoreNote {
        max-height: 90px;
        overflow: hidden;
        overflow-y: scroll;
        padding: 5px 10px;
    }

    .Store .StartOrder/*, .OutSide-Box .StartOrder*/ {
        font-size: 35px;
        animation: bling 1.3s alternate-reverse infinite;
    }

/*.Store .StartOrder {
    margin-top: 40px;
}*/

.OutSide-Box .StartOrder {
    flex: 0 0 16%;
    /*align-items: center;*/
    display: flex;
    justify-content: center;
}

        .HistoryBar {
            text-align: right;
            position: absolute;
            display: inline-block;
            width: 100%;
            z-index: 102;
        }

.HistoryBtn 
{
    padding: 20px 15px;
    padding-bottom: 0;
    display: inline-block;
}


.Group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.GroupName {
    font-size: 15px;
    margin: 10px 15px;
    font-weight: bold;
}

.GroupItem, .SoGroupItem {
    display: inline-flex;
    flex-direction: column;
    min-height: 170px;
    flex: 0 0 33.3333333%;
    position: relative;
}

.GIContant {
    margin: 5px;
    border-radius: 5px;
    /*display: flex;*/
    flex-direction: column;
    height: 100%;
    text-align: center;
    background: white;
    box-shadow: 1px 0px 7px -3px rgba(0,0,0,0.5);
}

.GIImg {
    flex: 3 0 58%;
    position: relative;
    border-radius: 5px 5px 0 0;
    /*background: #fbfbfb;*/
    background: #f2f2f2;
    position: relative;
    height: 110px;
}

.GBS .GIImg {
    /*border: 3px solid #a06767;*/
    border-bottom: unset;
}

.GBS .GIInfo {
    /*border: 3px solid #a06767;*/
    border-top: unset;
    width: unset; 
}

.GBS .HaveSpecial {
    flex-direction: column-reverse;
}

#Mody {
    width: 100%;
    height: 100%;
    position: absolute;
    background:rgba(0, 0, 0 ,0.45);
}

.Mody {
    width: 100%;
    min-height: 150px;
    position: absolute;
    background: white;
    transition: 0.5s;
    animation: Mody 0.5s forwards;
    bottom: 0;
    z-index: 405;
}

.GBS {
    border: 3px solid #a06767;
    /*border: 3px solid #a06767;*/
}

.GroupBeSelected {
    position: absolute;
    background: #ffffff;
    width: 22px;
    height: 22px;
    right: 5px;
    border-radius: 50%;
    top: 6px;
    box-shadow: 0px 1px 1px 2px rgba(87, 87, 87, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 404;
}

.GIInfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    flex: 50%;
    border-radius: 0 0 5px 5px;
    width: 100%;
    text-align: left;
    /*background: #f9f9f9;*/
}

    .GIInfo .GIName {
        position: relative;
        flex: 1 0 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 14px;
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

        .GIInfo .GIName .IName {
            font-size: 14px;
            margin: 5px 1px;
            padding: 0 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            /*margin-top: 12px;*/
        }

    .GIInfo .GIPrice, .GIInfo .SameGIPrice, .GIInfo .NoPrice, .GIInfo .OnlyPrice {
        /*position: absolute;*/
        top: -15px;
        margin-bottom: 4px;
        font-size: 13px;
        width: -webkit-fill-available;
        text-align: center;
    }

        .GIInfo .GIPrice .IPrice, .GIInfo .SameGIPrice .IPrice, .GIInfo .NoPrice .IPrice, .GIInfo .OnlyPrice .IPrice {
            background: black;
            color: white;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: 8px 10px;
            border-radius: 50px;
        }


    .GIInfo .SameGIPrice,.GIInfo .NoPrice {
        display: flex;
        justify-content: center;
        align-items: center;
    }


.MealItemPIPart {
    display: flex;
    justify-content: center;
    align-items: center;
}

.GIInfo .GIName .infoBox {
    width: 15px;
    height: 15px;
    border: 2px solid;
    border-radius: 50%;
    margin-left: 3px;
}

    .GIInfo .GIPrice {
        margin-top: 5px;
        margin-bottom: -5px;
        color: #da2c33;
    }
 

        .GIInfo .NoPrice .IPrice {
            background: unset;
            color: #080808;
        }

    .GIInfo .OnlyPrice .IPrice {
        background: #bfbfbf;
    }

.IPrice .IPTag {
    margin-right: 5px;
    max-width: 51px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.GroupIUpInfo
{
    display: flex;
    padding: 10px 5px;
}

.GOrderInfo {
    font-size: 15px;
    font-weight: 400;
    color: grey;
    margin: 0 15px;
}

    .GroupIUpInfo .imgPart {
        height: 85px;
        flex: 0 0 25%;
        display: flex;
        padding: 3px 10px;
    }

    .GroupIUpInfo .ItmInfo {
        flex: 1 1 60%;
        text-align: left;
        padding:1px 5px;
        padding-bottom: 3px;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .GroupIUpInfo .ItmInfo .pri {
            font-weight: 100;
            color: #f44812;
        }

.GroupIUpInfo .xxboxPart {
    flex: 0 1 10%;
    position: relative;
    flex: 0 1 10%;
    position: relative;
    display: flex;
    flex-direction: column;
    /*justify-content: flex-end;*/
    align-items: center;
}

.xxboxPart .xx {
    position: absolute;
    width: 100%;
    height: 30px;
    top: -5px;
    left: 0;
}

.xxcolor {
    color: #a06767;
}

.CartGroupItem 
{
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #808080;
    padding-left: 2px;
    padding-top: 0;
}


.CaGroItPart {
    padding-left: 10px;
    padding-bottom: 10px;
    position:relative;
}

.CaGroMsGroup .CaGroItPart{
    padding-bottom:2px;
}

.CaGroItPart .SpecialText {
    color: #98c4b2;
}

    .CaGroItPart .AddonItem, .CaGroItPart .SpecilItem {
        padding: 0;
        padding-left: 20px;
    }

    @keyframes gimm
    {
        from{
            transform:rotate(360deg);
        }

        to{
            transform:rotate(0deg);
        }

    }

    @keyframes gim
    {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-75px);
        }

       
    }


    @keyframes ModyOut {
        from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(100%);
    }
}

@keyframes Mody{
    from{
        transform:translateY(100%);
    }

    to {
        transform: translateY(0%);
    }
}

@keyframes DeliveryEdit
{
    from {
       transform:scaleX(-1)
    }

    to {
         color:black;
        transform: scaleX(1)
    }

}

@keyframes ToLeft
{
    from{
        transform:scale(0);
    }

}

@keyframes ChhB
{
    from {
        color: #6cd1a6;
    }

    to 
    {
        color: #37cd8e;
    }
}

@keyframes ChhbAfter
{
    from 
    {
        width:30px;
        height:30px;
        background: rgba(55, 205, 142,0.3);
    }

    to {
        width: 25px;
        height:25px;
        background: rgba(55, 205, 142,0.2);
    }
   
}


@keyframes Top {
    from {
        top: 0;
    }

    to {
        top: 30px;
    }
}

@keyframes Added {
    0% {
        height: 0%;
        bottom: 30px;
    }

    16% {
        height: 50px;
        bottom: 60px;
    }

    70% {
        height: 50px;
        bottom: 60px;
        opacity: 1;
    }
    85% {
        height: 50px;
        bottom: -20px;
        opacity: 1;
    }
    100% {
        height: 0%;
        bottom: -45px;
        /*top: -25px;*/
        opacity: 0;
    }


}


@keyframes BlingBack
{
    from {
        background: rgba(255,255, 255,0);
    }
    to {
        background: rgba(255,255, 255,0.3);
    }

}

@keyframes GrowGrow{
    from{
        transform:scale(1)
    }
    to{
        transform:scale(0.98)
    }

}



@keyframes blingStop
{
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes blingOut{
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


@keyframes growscale{
    from{
        transform:scale(0)
    }
    to{
        transform:scale(1)
    }
}

@keyframes shock
{
    0%{
        transform:translateX(0%)
    }

    30% {
        transform: translateX(2%);  
    }

    45% {
        transform: translateX(-2%)
    }

    50% {
        transform: translateX(1%)
    }

    55% {
        transform: translateX(-1%)
    }
    70% {
        transform: translateX(1%)
    }

    80% {
        transform: translateX(-1%)
    }

    90% {
        transform: translateX(1%)
    }

    100% {
        transform: translateX(0%)
    }
}


@keyframes bling 
{
    from {
        color:black;
    }

    to {
        color: lightgray;
    }

}

@keyframes smoothTop
{
    0% {
        transform: translateY(3%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes smoothBottom{
    0% {   
        opacity: 1;
    }

    100% {
       
        opacity: 0;
    }
}

@keyframes smoothIn {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes spea-smoothIn{
    0% 
    { 
        opacity:1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes smoothLeft
{
    0% {
        transform: translateX(0%);
      
    }

    100% {
        transform: translateX(-10%);
      
    }
}

@keyframes smoothRight {
    0% {
        transform: translateX(-10%);
       
    }

    100% {
        transform: translateX(0%);
        
    }
}


@keyframes StayOpcity {
    0% {
        transform: translateX(0%);
        opacity: 0.5;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes Slid-in
{
    0%
    {
        transform:translateX(100%);
        /*opacity:0.5;*/
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes Slid-Out {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }

    50% {
        transform: translateX(98%);
    }

    80% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(150%);
        /*opacity: 0;*/
    }
}


    /*Store End*/
.NoOpen {
    position: fixed;
    top: 0;
    /*left: 0;*/
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 651;
    max-width: 400px;
}


.ServiceOutStatus {
    vertical-align: middle;
    color: white;
}

.NoOpenCont, .ServiceOutStatus {
    text-align: center;
    position: absolute;
    display: inline-block;
    top: 100px;
    left: 0;
    right: 0;
    /*bottom:0;*/
}

.ServiceOutStatus {
    top: 150px;
}

    .NoOpenCont:before, ServiceOutStatus:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: 100%;
    }

    .NoOpenCont div:not(.GOBackOK) {
        vertical-align: middle;
        font-size: 20px;
        color: white;
    }

.GOBackOK {
    margin-top: 10px;
    background: white;
    display: inline-block;
    color: black;
    font-size: 18px;
    border-radius: 40px;
    padding: 5px 15px;
    box-shadow: 1px 1px 5px -1px rgba(0, 0, 0, 0.5);
}

    .GOBackOK:active {
        box-shadow: inset 1px 1px 5px -1px rgba(0, 0, 0, 0.5);
        color: #2e2d2d;
    }

.ServiceOutTitle {
    margin: 0 20px;
    font-size: 22px;
}

.ServiceOutMsg {
    margin: 5px 50px;
    margin-bottom: 15px;
    font-size: 18px;
}

.ReLoadPart {
    /*margin-top: 27px;*/
    text-align: center
}


.box {
    font-size: 0;
}

.l_box
{
    vertical-align:top;
    display:inline-block;
}

.l_box80{
    width:80%;
}

.l_box20 {
    width: 20%;
}

.l_box70 {
    width: 70%;
}

.l_box30 {
    width: 30%;
}

.l_box32 {
    width: 32%;
}

.l_box34 {
    width: 34%;
}

.bonus-radio {
    font-size: 18px;
    margin-right: 10px;
}

@media only screen and (min-width: 1024px) {
    .Ad-img {
        /*height: 555px;*/
    }

    .ShowGroupItemQty {
        left: 13px;
        width: 78%;
    }

    .GroupBeSelected{
        right:10px;
    }
}

.promoOutside {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    bottom: 0;
    z-index: 200;
}
.promo-box {
    top: 50%;
    left: 50%;
    width: 100%;
    max-height: 500px;
    background: #fbfbfb;
    position: fixed;
    text-align: center;
    /*display: none;*/
    z-index: 201;
    max-width: 350px;
    transform: translate(-50%, -50%);
    /*overflow:auto;*/
}


.promo-title {
    padding: 15px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid lightgray;
    font-size: 18px;
    color: gray;
}

.promo-contant {
    border-radius: unset;
    padding: 0px;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgb(251, 251, 251);
    flex: 1 1 0%;
    /*overflow: auto;*/
    font-size: 17px;
    color: gray;
    word-break: break-word;
    height:350px;
    overflow:auto;
}
.PromoItemContant{
    padding:0px 10px;
    
}
.PromoItemBox {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    margin-bottom: 20px;
    box-shadow: 0 .2rem 0.35rem rgba(0,0,0,.075);
    font-size:1rem;
    font-weight:600;
    position:relative;
}
.promoIMG{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    width:100px;
    border-radius:20px;
}

.promoSoldOut {
    position: absolute;
    justify-content: center;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255,0.5);
    border-radius: 7px;
    z-index: 305;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
}
.promoSoldOutContant {
    font-size: 16px;
    text-align: center;
    padding: 5px 10px;
    border: 3px solid #c99b8d;
    color: #c99b8d;
    border-radius: 20px;
}

.save-box{
    height:100%
}
.save-title {
    font-size: 32px;
    font-weight: 600;
    color: #6d6a6a;
}
.saveIMG {
    height: 300px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.save-contant {
    color: #6d6a6a;
}
.save-button {
    background: #d9282f;
    border-radius: 5px;
    padding: 10px 15px;
    color: white;
    border: none;
    font-size: 16px;
}

.Required {
    background: #eb663e;
    padding: 5px 15px;
    border-radius: 25px;
    margin-right: 15px;
    color: white;
}

.disabledButton {
    background: #b6b3b3;
}

.disableBagButton {
    background: #8f8d8d;
}

.payCashText {
    padding: 0px 15px;
    font-size: 12px;
    text-align: start;
    line-height: 1.5;
    text-align:justify;

}