/*fake img url for testing https://picsum.photos/400/400 */
/*app.vue related*/
/*=================================================================*/
html {
   overflow-y: auto !important;
}
/* prettier-ignore */
html, body, #__nuxt, #__layout {
   height: 100%;
}
body {
   background: #fff !important;
}
.v-application--wrap {
   min-height: auto !important;
}
.theme--light.v-application {
   color: #262626 !important;
}

.rootTopMenu {
   background: #111111;
   position: fixed;
   width: 100%;
   top: 0px;
   z-index: 90;
}

.rootTopMenu .menuIcon {
   height: 25px;
   width: auto;
   cursor: pointer;
}

.rootTopMenu .headerLogo {
   width: auto;
   height: 20px;
}
.rootTopMenu .headerLogoCoca {
   width: auto;
   height: 15px;
}
.rootTopMenu .CartDiv {
   cursor: pointer;
   position: relative;
   padding-left: 15px;
   margin-top: 8px;
}

.rootTopMenu .CartDiv .cartIcon {
   width: auto !important;
   height: 24px !important;
}

.rootTopMenu .CartDiv .cartCircle {
   position: absolute;
   top: -8px;
   right: -12px;
   width: auto;
   min-width: 20px;
   height: 20px;
   border-radius: 10px;
   background: #ffffff;
   text-align: center;
   color: #151515;
   font-size: 11px;
   line-height: 20px;
   padding: 0px 2px;
}

.rootTopMenu .loadingCir {
   position: relative;
   margin-top: -4px;
}

.leftMenu {
   transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
   position: fixed;
   z-index: 100;
   height: 100%;
   width: 280px;
   background: #ffffff;
   left: -300px;
   top: 0px;
   -webkit-box-shadow: 2px 0px 12px 2px rgba(0, 0, 0, 0.3);
   box-shadow: 2px 0px 12px 2px rgba(0, 0, 0, 0.3);
}
.leftMenu .closeIcon {
   height: 20px;
   position: absolute;
   top: 15px;
   right: 15px;
   cursor: pointer;
}
.leftMenu .menuBox {
   position: absolute;
   top: 10px;
   left: 40px;
   color: #fff;
   display: flex;
   flex-direction: column;
   height: calc(100% - 20px);
}
.leftMenu .menuBox a {
   text-decoration: none;
}
.leftMenu .menuListItem {
   font-size: 16px;
   height: 45px;
   display: flex;
   align-items: center;
   cursor: pointer;
   color: #262626;
}
.leftMenu .menuListItemSub {
   flex-direction: column;
   align-items: start;
   margin-left: 30px;
   height: auto;
}

.menuListItem img {
   height: auto;
   width: 20px;
   margin-right: 10px;
}

.menuListItemActive {
   font-weight: bold !important;
}

.noStoreInfoImg {
   width: 100%;
   height: auto;
   max-width: 600px;
}

/**outer most div in the app.vue*/
.mainWrapper {
   padding-top: 60px;
}

.mainWrapper.mainWrapperInApp {
   padding-top: 0px;
}

.mainWrapperInApp .topBarFullFixed {
   top: 0px;
}

/**outer most body wrapper*/
.contentBody {
   min-height: calc(100vh - 250px);
   min-width: 320px;
}

/* https://gist.github.com/cvan/6c022ff9b14cf8840e9d28730f75fc14 */
.topBarFullFixed {
   border-bottom: 1px solid #d9d9d9;
   background: #fff;
   position: fixed;
   width: 100%;
   height: 50px;
   top: 60px;
   z-index: 50;
}

.mainWrapperA2hs .topBarFullFixed {
   top: 139px; /* 51 + 88 */
}

.mainWrapperA2hs .topBarFull {
   margin-top: 88px;
}

@supports (padding-top: constant(safe-area-inset-top)) {
   .mainWrapperInApp .topBarFullFixed {
      /* background-color: #cc9988; */
      padding-top: constant(safe-area-inset-top, 20px);
   }
}
@supports (padding-top: env(safe-area-inset-top)) {
   .mainWrapperInApp .topBarFullFixed {
      /* background-color: #cc6688; */
      padding-top: env(safe-area-inset-top, 20px);
   }
}
.topBarFull {
   border-bottom: 1px solid #d9d9d9;
   background: #fff;
   width: 100%;
   height: 50px;
}

.topBarTitle {
   font-weight: 600;
   font-size: 18px;
}

.vuePlaceHolder {
   color: rgba(0, 0, 0, 0.7);
   font-size: 13px;
}

.btnTxt .v-btn__content {
   font-weight: 600;
}

.selectDef {
   appearance: auto !important;
   padding: 6px 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   margin: 4px 0px;
   font-size: 14px;
}

.bdbtm {
   border-bottom: 1px solid #d9d9d9;
}

.bdbtm-light {
   border-bottom: 1px solid #f0f0f0;
}

.brad0 {
   border-radius: 0px !important;
}

.bdall {
   border: 1px solid #d9d9d9;
}

.contentFooter {
   background: #f0f0f0;
   padding-top: 20px !important;
   padding-bottom: 20px !important;
}

.contentFooter .footerTxt {
   font-size: 12px;
   color: #101010;
}

.downloadPop {
   width: 100%;
   background-color: rgba(0, 0, 0, 0.98);
   color: #fff;
}

.downloadPopCell {
   max-width: 800px;
   margin: auto;
}

.v-btn__content {
   text-decoration: none !important;
}
.btn-link a {
   text-decoration: none !important;
}

/*toast UI in App.vue*/
/*=================================================================*/
.toastBoxBase {
   position: fixed;
   width: 400px;
   top: 65px;
   left: 50%;
   margin-left: -200px;
   padding: 12px;
   background: #fff;
   color: #252525;
   text-align: center;
   z-index: 60;
   border: 1px solid #ccc;
   border-radius: 4px;
   transform: translateY(-140%);
   cursor: pointer;
   display: none;
}
.toastBoxSub {
   top: 69px;
}
.toastBoxInApp {
   /* there is no logo menu when in app , move the toast box up */
   top: 48px;
   /* when in app topBarFullFixed z-index is 50 show under it*/
   z-index: 48 !important;
}

@keyframes toastOn {
   from {
      transform: translateY(-110%);
   }
   to {
      transform: translateY(0%);
   }
}

@keyframes toastOff {
   from {
      transform: translateY(0%);
   }
   to {
      transform: translateY(-140%);
   }
}

.runToastOn {
   animation-name: toastOn;
   animation-duration: 0.3s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-out;
}

.runToastOff {
   animation-name: toastOff;
   animation-duration: 0.3s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in;
}

.toastCloseBtn {
   /* position: absolute;
   right: 4px;
   top: 2px; */
}

/*index.vue related*/

/*=================================================================*/

.bannerStoreName {
   position: absolute;
   right: 40px;
   top: 140px;
   font-size: 15pt;
   font-weight: 600;
   color: #fff;
}

.bannerBgImg {
   width: 100%;
   height: 160px;
   background: #999999;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

.bannerBgMask {
   position: absolute;
   top: 40px;
   width: 100%;
   height: 200px;
   opacity: 0.7;
   background: linear-gradient(90deg, #523a61 0, #88afd5);
   border-radius: 4px;
}

.bannerButtonDiv {
   position: absolute;
   right: 30px;
   top: 180px;
}

.indexProductCell {
   cursor: pointer;
   border-radius: 0px;
   position: relative;
   padding: 0px;
}

@media (min-width: 601px) {
   .indexProductWrap .indexProductCell:nth-of-type(3n + 1) {
      border-right: 10px solid #ffffff;
   }
   .indexProductWrap .indexProductCell:nth-of-type(3n + 2) {
      border-left: 5px solid #ffffff;
      border-right: 5px solid #ffffff;
   }
   .indexProductWrap .indexProductCell:nth-of-type(3n + 3) {
      border-left: 10px solid #ffffff;
   }
}

@media (max-width: 600px) {
   .indexProductWrap .indexProductCell:nth-of-type(2n + 1) {
      border-right: 5px solid #ffffff;
   }
   .indexProductWrap .indexProductCell:nth-of-type(2n + 2) {
      border-left: 5px solid #ffffff;
   }
}

.indexProductSquare {
   width: 100%;
   padding-bottom: 150%;
   position: relative;
   border-radius: 0px;
   background-size: cover;
   background-position: top center;
   /* width: 100%;
   position: relative;
   border-radius: 0px;
   background-size: cover;
   background-position: top center;
   padding-bottom: 150%; */
}
.authCreateNewProductSquare {
   width: 100%;
   padding-bottom: 100%;
   position: relative;
   border-radius: 0px;
   background-size: contain;
   background-position: center;
}
.authCreateNewProductCkDiv {
   position: absolute;
   right: 10px;
   top: 10px;
   background: #ffffff;
   border-radius: 4px;
}
.authCreateCkBox .v-input--selection-controls__input {
   margin-right: 0px !important;
}

.soldoutIconBar {
   color: #e52b91;
   position: absolute;
   width: calc(100% - 20px);
   left: 10px;
   height: 40px;
   bottom: 90px;
   font-weight: 600;
   font-size: 16px;
   line-height: 40px;
   border-radius: 4px;
   background: #f8b3f0;
   opacity: 0.9;
}
.presaleIconBar {
   color: #f8b3f0;
   position: absolute;
   left: 10px;
   bottom: 83px;
   height: 36px;
   line-height: 36px;
   font-weight: 600;
   font-size: 13px;
   background: #000000;
   padding: 0px 20px;
   opacity: 0.9;
}

.soldoutIconBarDetailPage {
   color: #e52b91;
   font-weight: bold;
   font-size: 18px;
   line-height: 40px;
   background: #f8b3f0;
   opacity: 0.9;
   text-align: center;
   margin-bottom: 20px;
   margin-top: 10px;
   border-radius: 4px;
}

.almostGoneBar {
   position: absolute;
   padding: 0px 8px;
   left: 10px;
   bottom: 10%;
   font-weight: 600;
   font-size: 13px;
   color: #fff;
   line-height: 36px;
   height: 36px;
   background: #6fc6a5;
   border-radius: 2px;
   opacity: 1;
}

.indexProductInfo {
   padding: 10px;
   text-align: left;
}
.indexProductName {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.popup {
   position: absolute !important;
   top: 50px !important;
}

.popupTitle {
   border-bottom: 1px solid #e8e8e8;
}

/*ItemDetail.vue related*/
/*=================================================================*/

.itemDetailBox {
   max-width: 1000px;
}

.itemInfoBox > div {
   margin-bottom: 5px;
}

.itemOptLabel {
   font-size: 13pt;
   display: inline-block;
   min-width: 100px;
}

.vueCarousel {
   border: 1px solid #eee;
   border-radius: 4px;
}

/* make floating dot smaller */
.vueCarousel .v-carousel__controls .v-btn__content .v-icon {
   font-size: 10px !important;
   height: 16px !important;
   width: 16px !important;
}
.vueCarousel .v-carousel__controls .v-btn--icon.v-size--small {
   height: 20px !important;
   width: 20px !important;
}

.vueCarouselBtn {
   cursor: pointer;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   background-color: rgba(255, 255, 255, 0.9);
   align-items: center;
   justify-content: center;
}



/* .vueCarousel .v-window__next .v-btn__content {
   background: #ff3300 !important;
} */

.itemlbImg {
   width: 100%;
   max-width: 800px;
   height: auto;
   cursor: pointer;
}

/*Cart.vue related*/
/*=================================================================*/
.sfBreadcrumb .sfarrow {
   font-size: 18px !important;
   width: 18px;
   position: relative !important;
   bottom: 0px;
   padding-left: 5px;
}
.sfBreadcrumb .sfbcTxtPrimary {
   font-size: 14px;
   user-select: none;
   cursor: pointer;
   color: #e52b91;
   border-bottom: 1px solid #e52b91;
}
.sfBreadcrumb .sfbcTxtGfb {
   font-size: 14px;
   user-select: none;
   cursor: pointer;
   color: #faa828;
   border-bottom: 1px solid #faa828;
}
.sfBreadcrumb .sfbcOn {
   user-select: none;
   cursor: default;
   color: rgba(0, 0, 0, 0.87);
   border-bottom: none;
}

.sf100HWrap,
.sf100HWrapGfBox {
   min-height: auto;
}
.sfLeftWrap {
   display: flex;
   justify-content: flex-end;
   align-items: start;
}
.sfLeftWrapRow {
   justify-content: center;
}
.sfLeftWrapCol {
   max-width: 560px !important;
}
.sfRightWrap {
   display: flex;
   justify-content: flex-start;
   align-items: start;
   background: #f8f8f8;
   border-bottom: 1px solid #eaeaea;
}
.sfRightContain {
   max-width: auto;
   margin: 0px;
   padding: 0px;
   width: 100%;
}
/*for the right side cart item list to be centered at 600px when on smaller screen */
.sfRMaxCenter {
   margin: auto !important;
   max-width: 570px;
}
.sfStepBox {
   border: 1px solid #999999;
   border-radius: 5px;
}
.sfStepBRow {
   padding-top: 12px;
   padding-bottom: 12px;
   border-bottom: 1px solid #ccc;
}
.sfStepBRow:last-child {
   border-bottom: none;
}
.sfShipMethodBox {
   border: 1px solid #b0b0b0;
   border-radius: 5px;
}
.sfShipMethodBoxErr {
   border-width: 2px;
   border-color: #ff5252;
}
.sfShipMethodRow {
   border-bottom: 1px solid #b0b0b0;
}
.sfShipMethodRow:last-child {
   border-bottom: none;
}
.sfShipMethodBoxBillOn {
   border-radius: 5px;
}
.sfShipMethodBoxBillExpand {
   border-radius: 5px 5px 0px 0px;
}

.sfCkboxTxt .v-label {
   font-size: 0.8rem !important;
}
.spItemList {
   height: auto;
}
.spItemListOn {
   overflow-x: hidden !important;
   overflow-y: visible !important;
}
.opriceOff {
   text-decoration: line-through;
   color: #b0b0b0;
   padding-right: 15px;
}
@media (min-width: 960px) {
   .sfLeftWrapRow {
      justify-content: flex-end;
   }
   .sfLeftWrapCol {
      max-width: 700px !important;
   }
   .sfRightContain {
      padding-left: 10px;
      padding-right: 10px;
   }

   .sfRightRowContent {
      margin: 0px;
   }
   .sfRMaxCenter {
      margin: 0px !important;
   }
   .sf100HWrap {
      min-height: calc(100vh - 51px);
   }
   .sf100HWrapGfBox {
      min-height: calc(100vh - 71px);
   }
   .sfRightWrap {
      border-left: 1px solid #eaeaea;
   }
   .spItemList {
      height: calc(100vh - 318px);
      min-height: 300px;
      overflow-x: hidden;
      overflow-y: hidden;
   }
   .spItemListDone {
      height: calc(100vh - 245px);
   }
   .spItemListSub {
      height: calc(100vh - 330px);
   }
}

.cartTotalTopRow {
   position: fixed;
   top: 50px;
   background: #fff;
   z-index: 45;
}

.couponBtmBox {
   width: 100%;
   background: #f6f6f6;
}

.couponFixDiv {
   width: 100%;
   position: fixed;
   bottom: 0px;
   height: auto;
}

/*center main cart list*/

.cartList {
   margin-top: 50px;
   margin-bottom: 160px;
}

.cartListImg {
   border-right: 1px solid #e2e2e2;
}

.cartListImg img {
   width: 100%;
   max-width: 210px;
   min-width: 150px;
}

.cartListImg .statusTxt {
   padding: 10px;
}

.cardListHr {
   height: 1px;
   border-bottom: 1px solid #e2e2e2;
}

.cartItemOptBox .binIcon {
   width: 24px;
   height: 24px;
   position: relative;
   top: -2px;
}

.cartItemOptBox .binText {
   color: #c2a65d;
   margin-left: 20px;
}

.cartItemOprice {
   text-decoration: line-through;
   color: #d9d9d9;
}

.numSelect {
   display: block;
   width: 60px;
   padding: 5px;
   font-weight: 400;
   color: #333;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: 4px;
   text-align: center;
}

.checkOutDivide {
   border-bottom: 1px solid #d9d9d9;
}

.checkOutDividePrimary {
   border-top: 1px solid #e52b91;
}

.txtAreaBtn {
   cursor: pointer;
   user-select: none;
}

.qtSelect .v-text-field {
   padding-top: 0px !important;
   margin-top: 0px !important;
}

.qtSelect .v-input__slot {
   padding: 0px !important;
   margin: 0px !important;
}

.qtSelect .v-text-field__details {
   display: none;
}

.v-input--selection-controls {
   margin-top: 0px !important;
   padding-top: 0px !important;
}

.cart-list-store-box {
   margin: auto;
   border-top: none;
}
/* all but not first cart-list-store-box class */
.cart-list-store-box ~ .cart-list-store-box {
   margin: auto;
   border-top: 10px solid #e7e7e7;
}

.cart-list-thumb {
   border: 1px solid #eee;
   border-radius: 4px;
   object-fit: contain;
   cursor: pointer;
}
.cart-list-edit-btn {
   display: inline-block;
   padding: 6px;
   margin: -6px;
   border-radius: 4px;
}

.cart-list-remove-btn {
   padding: 4px;
   margin: -4px;
   user-select: none;
   cursor: pointer;
   border-radius: 4px;
   text-decoration: underline;
}
.cart-list-top-bar {
   border-bottom: 1px solid #eee;
   background: #fff;
}
.cart-list-main-contain {
   height: auto;
}

.cart-list-btm-total {
   display: none; /* hide bottom total price section on mobile */
}

.cart-list-store-box .track-list-item {
   border-bottom: 1px solid #e7e7e7;
}
.cart-list-store-box .track-list-item:last-child {
   border-bottom: none;
}

/*cart left frame out most div wrap, set display to flex to change how child align and expand */
.cart-frame-l {
   margin-top: 50px;
   display: flex;
   justify-content: center; /*by defalt in mobile, content stay in center*/
}
.cart-frame-l-inner {
   width: 100%;
   max-width: 700px;
}
/*cart right top column, on top of cart-frame-r */
.cart-frame-r-col {
   border-left: 1px solid #eaeaea;
}
/* the show order summary section visible in mobile mode */
.cart-frame-r-mbtop {
   border-bottom: 1px solid #eaeaea;
   display: flex;
   justify-content: center; /*by defalt in mobile, content stay in center*/
   position: fixed; /*in mobile, fixed on top*/
   top: 60px;
   background: #fff;
   z-index: 52;
   width: 100%;
}

.cart-frame-r {
   display: flex;
   justify-content: center; /*by defalt in mobile, content stay in center*/
   margin-top: 50px;
}
.cart-frame-r-inner {
   width: 100%;
   max-width: 700px;
   /* background: #ddf7ea; */
}

@media (min-width: 960px) {
   .cart-frame-r-mbtop {
      display: none;
   }
   .cart-frame-l {
      margin-top: 0px; /* on mobile mode stay under expand menu */
      justify-content: flex-end; /*left content align to right to the center line*/
   }
   .cart-frame-r {
      display: flex;
      justify-content: flex-start; /*right content align to left to the center line*/
      margin-top: 0px;
   }
   .cart-frame-r-inner {
      max-width: unset;
   }
   .cart-list-main-contain {
      height: calc(100vh - 146px);
      overflow-y: scroll;
   }
   .mainGfBg .cart-list-main-contain {
      height: auto;
      overflow-y: unset;
   }
   .cart-list-top-bar {
      border-bottom: 1px solid #eee;
      background: #fff;
      position: sticky; /* when desktop view show edit section top right fixed */
      top: 51px;
      z-index: 51;
   }
   .cart-list-btm-total {
      display: block;
      border-top: 1px solid #eee;
      background: #fff;
      width: 100%;
      position: sticky;
      bottom: 0px;
   }
}

.cart-list-return-lab {
   width: 90px;
   padding: 6px;
   text-align: center;
   border-radius: 4px;
   color: #ff3300;
}

.cart-list-cancel-lab {
   width: 90px;
   padding: 6px;
   background-color: #f5f5f5;
   text-align: center;
   border-radius: 4px;
}
.return-sel .v-label {
   font-size: 13px !important;
}

/*Profile.vue related*/
/*=================================================================*/

.profileRow {
   position: relative;
   height: 130px;
   margin: 0px;
}

.profileBg,
.profileFill {
   position: absolute;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 130px;
}

.profileBg {
   /*background: #c4a85d;*/
   background: url("https://picsum.photos/800/400");
   background-size: cover;
   background-position: center center;
}

.profileFill {
   /*background: #c4a85d;*/
   background: #523a61;
   opacity: 0.8;
}

.planIcon {
   position: absolute;
   left: 0px;
   top: 20px;
   width: 100px;
   height: 100px;
   /*background: #3fc0cb;*/
}

.planIcon img {
   display: block;
   margin: auto;
   width: 60px;
   height: 60px;
   margin-bottom: 6px;
}

.planIcon > div {
   text-align: center;
   font-size: 8pt;
   color: #fff;
}

/*for switch toggle text alignment */

.pfBannerBG1 {
   background: rgba(101, 101, 101, 1);
   background: -moz-linear-gradient(left, rgba(101, 101, 101, 1) 0%, rgba(255, 194, 175, 1) 100%);
   background: -webkit-gradient(left top, right top, color-stop(0%, rgba(101, 101, 101, 1)), color-stop(100%, rgba(255, 194, 175, 1)));
   background: -webkit-linear-gradient(left, rgba(101, 101, 101, 1) 0%, rgba(255, 194, 175, 1) 100%);
   background: -o-linear-gradient(left, rgba(101, 101, 101, 1) 0%, rgba(255, 194, 175, 1) 100%);
   background: -ms-linear-gradient(left, rgba(101, 101, 101, 1) 0%, rgba(255, 194, 175, 1) 100%);
   background: linear-gradient(to right, rgba(101, 101, 101, 1) 0%, rgba(255, 194, 175, 1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#ffc2af', GradientType=1);
}

.pfBannerBG2 {
   background: rgba(82, 58, 97, 1);
   background: -moz-linear-gradient(left, rgba(82, 58, 97, 1) 0%, rgba(136, 175, 213, 1) 100%);
   background: -webkit-gradient(left top, right top, color-stop(0%, rgba(82, 58, 97, 1)), color-stop(100%, rgba(136, 175, 213, 1)));
   background: -webkit-linear-gradient(left, rgba(82, 58, 97, 1) 0%, rgba(136, 175, 213, 1) 100%);
   background: -o-linear-gradient(left, rgba(82, 58, 97, 1) 0%, rgba(136, 175, 213, 1) 100%);
   background: -ms-linear-gradient(left, rgba(82, 58, 97, 1) 0%, rgba(136, 175, 213, 1) 100%);
   background: linear-gradient(to right, rgba(82, 58, 97, 1) 0%, rgba(136, 175, 213, 1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#523a61', endColorstr='#88afd5', GradientType=1);
}

.pfBannerBG3 {
   background: rgba(121, 204, 204, 1);
   background: -moz-linear-gradient(left, rgba(121, 204, 204, 1) 0%, rgba(251, 147, 121, 1) 100%);
   background: -webkit-gradient(left top, right top, color-stop(0%, rgba(121, 204, 204, 1)), color-stop(100%, rgba(251, 147, 121, 1)));
   background: -webkit-linear-gradient(left, rgba(121, 204, 204, 1) 0%, rgba(251, 147, 121, 1) 100%);
   background: -o-linear-gradient(left, rgba(121, 204, 204, 1) 0%, rgba(251, 147, 121, 1) 100%);
   background: -ms-linear-gradient(left, rgba(121, 204, 204, 1) 0%, rgba(251, 147, 121, 1) 100%);
   background: linear-gradient(to right, rgba(121, 204, 204, 1) 0%, rgba(251, 147, 121, 1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79cccc', endColorstr='#fb9379', GradientType=1);
}

/*Orders.vue*/

/*=================================================================*/

.tinyboutiqueBar {
   background: #7ec3c5;
}

.tinyboutiqueNote {
   color: #fff;
   font-size: 15px;
   text-align: center;
   padding-left: 20px;
   padding-right: 20px;
}

.orderTopNoReturnRow {
   padding: 12px;
   font-size: 12pt;
   background-color: #e37272;
   color: #fff;
   position: fixed;
   z-index: 51;
   top: 51px;
}

.orderTopTBRow {
   padding: 12px;
   font-size: 12pt;
   background-color: #59b292;
   color: #fff;
   position: fixed;
   z-index: 51;
   top: 51px;
}

.orderListImgBox {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}
.orderListImgBox.item1 {
   justify-content: center;
   margin: 15px 0px;
}
.orderListImgBox.item1 img {
   width: 100%;
   height: 100%;
   max-width: 220px;
   max-height: 220px;
   object-fit: contain;
}

.orderListImgBoxSub {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
}

.orderListImgBoxSub img {
   width: 100%;
   height: 100%;
   max-width: 200px;
   max-height: 200px;
   padding: 10px;
}
.orderListImgBox.itemMany img {
   width: 50%;
   max-width: 220px;
   object-fit: contain;
}
.orderListImgBox.itemMany .ol-img {
   border: 0px solid #e2e2e2;
}
/* 2 items row */
.orderListImgBox.itemMany .ol-img1 {
   border-width: 0px 1px 1px 0px;
}
.orderListImgBox.itemMany .ol-img2 {
   border-width: 0px 0px 1px 0px;
}
.orderListImgBox.itemMany .ol-img3 {
   border-width: 0px 1px 0px 0px;
}
.orderListImgBox.itemMany .ol-img4 {
   border-width: 0px 0px 0px 0px;
}
.orderListRightCell {
   border-left: 1px solid #e2e2e2;
   min-height: 120px;
}

/*sign up*/

/*=================================================================*/

.datePicker {
   padding-bottom: 6px;
   border-bottom: 1px solid #b2b2b2;
}

/*return */

/*=================================================================*/

.orderTopBar {
   height: 45px;
}

.orderTopMenu {
   font-size: 16px;
   line-height: 45px;
   height: 45px;
   cursor: pointer;
}

.orderTopAct {
   color: #e52b91;
   font-weight: 600;
   border-bottom: 4px solid #e52b91;
}

.reasonSelect {
   width: 300px;
   padding: 5px;
   font-weight: 400;
   color: #333;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: 4px;
   text-align: center;
}

select:required:invalid {
   color: gray;
}

option[value=""][disabled] {
   display: none;
}

option {
   color: black;
}

.returnPhoneInput .v-text-field {
   padding: 0px;
   margin: 0px;
}

.popDialogEdit {
   position: fixed;
   z-index: 45;
   left: 0px;
   top: 60px;
   background: #fff;
   width: 100%;
   height: calc(100vh) !important;
}
.popDialogEditInApp {
   top: 0px !important;
}
.hideVueInputMsg .v-text-field__details {
   display: none !important;
}

.hideVueInputMsg .v-messages {
   display: none !important;
}

.logoImg {
   width: 100%;
   max-width: 500px;
   padding: 0px 20px 0px 20px;
   height: auto;
}
.story01Img {
   max-width: 80%;
   height: auto;
}
.story02Img {
   width: auto;
   height: 200px;
}
.story03Img {
   width: auto;
   height: 240px;
   display: block;
   margin: auto;
}
.storyRow {
   color: #fff;
   height: auto;
   padding: 25px 0px;
   overflow: hidden;
}

.replaceImgDiv {
   cursor: pointer;
   width: 100%;
   height: 160px;
   border-radius: 4px;
   border: 1px solid #48a984;
   display: flex;
   align-items: center;
   justify-content: center;
   background-size: cover;
   background-position: center center;
}

.subBoxBg {
   background: #e9d5ce;
   padding: 20px;
   margin-top: 15px;
}

.subBoxLeft {
   text-align: left;
   padding: 15px !important;
}

.subBoxImg {
   width: 100%;
   height: auto;
   max-width: 300px;
}

.subBoxImgBg {
   /* background: url('/imgs/partyBg.jpg') center center;
   background-size: cover; */
   background: #100d0e;
   border-radius: 4px;
   cursor: pointer;
}

@media (max-width: 600px) {
   .subBoxImg {
      width: 100%;
      max-width: 300px;
   }
   .story01Img {
      max-width: 60%;
      height: auto;
   }
}

.bundleIcon {
   max-width: 100px;
   max-height: 100px;
   margin: auto;
}
.bundleBox {
   border: 1px solid #eee;
   border-radius: 4px;
   display: inline-block;
   max-width: 240px;
   text-align: center;
}

.subBoxRaqc {
   background-color: rgb(217, 154, 183);
}
.sassybox-banner {
   width: 100%;
   height: 320px;
   background-image: url("/imgs/sassybox_banner_img.jpg");
   background-size: cover;
   background-position: 50% 20%;
   border-radius: 4px;
}

.sassybox-title {
   font-weight: bold;
   color: #fff;
   font-size: 36px;
}
.sassybox-title-sub {
   font-weight: bold;
   color: #fff;
   font-size: 22px;
}
.sassybox-banner-btn {
   font-size: 20px !important;
   height: 60px !important;
   background-color: #ffda70 !important;
}
.sassybox-title-sub2 {
   font-weight: bold;
   color: #66245e;
   font-size: 18px;
}

@media (max-width: 800px) {
   .sassybox-banner {
      height: 280px;
   }
   .sassybox-title {
      font-size: 26px;
   }
   .sassybox-banner-btn {
      font-size: 16px !important;
      height: 50px !important;
   }
   .sassybox-title-sub {
      font-size: 18px;
   }
   .sassybox-title-sub2 {
      font-size: 16px;
      margin-bottom: 30px;
   }
}
@media (max-width: 380px) {
   .sassybox-title {
      font-size: 20px;
   }
   .sassybox-banner {
      height: 220px;
   }
   .sassybox-banner-btn {
      font-size: 14px !important;
      height: 50px !important;
   }
   .sassybox-title-sub {
      font-size: 16px;
   }
   .sassybox-title-sub2 {
      font-size: 14px;
      margin-bottom: 30px;
   }
}

.inputUpper input {
   text-transform: uppercase;
}

/* share cart pop up dialog */
/*=================================================================*/
.itemDialog {
   margin: 10px !important;
}

.itemDialogImg {
   background: rgb(200, 200, 200);
   width: 100%;
   /* height: 60vh; */
   /* min-height: 300px; */
   max-height: 500px;
}

.itemDiaImgBg {
   background: rgb(255, 255, 255);
   padding: 10px;
   width: 100%;
}

.itemDiaImg {
   width: 100%;
   height: 50vh;
   max-height: 500px;
   min-height: 300px;
   background: #ccc;
   object-fit: cover;
}

.itemDiaImgBg .slick-dots {
   position: static;
   padding: 0px !important;
}

.itemDiaTxt {
   padding: 0px 10px;
}

.slickProdImg {
   width: 100%;
   max-height: 500px;
   object-fit: contain;
   background: #f5f5f5;
}

.secTopbar {
   border-bottom: 1px solid #eaeaea;
   padding: 5px 0px;
   min-height: 48px;
}

.secTopbarTxt {
   font-weight: 500;
   line-height: 35px;
}

.rippleTxtBtn {
   display: inline-block;
   border-radius: 8px;
   text-decoration: underline;
   text-align: center;
   cursor: pointer;
   padding: 8px 20px;
}

.signEmailDiv {
   background-color: #eee;
   border-radius: 4px;
   padding: 10px 10px;
}

.v-slider__track-container {
   height: 4px !important;
}
.v-slider__track {
   height: 4px !important;
}
.v-input--selection-controls .v-input__slot > .v-label,
.v-input--selection-controls .v-radio > .v-label {
   color: #262626;
}