/* 2022-10-3 - TK: register default breakpoint variables */
:root {
  --mobile-max-breakpoint: 767px;
  --tablet-min-breakpoint: 768px;
  --tablet-max-breakpoint: 991px;
  --desktop-min-breakpoint: 992px;
  --desktop-max-breakpoint: 1199px;
  --desktop-lg-min-breakpoint: 1200px;

  /* 
	--mobile-max-breakpoint: 991px;
	--tablet-min-breakpoint: 992px;
	--tablet-max-breakpoint: 991px;
	--desktop-min-breakpoint: 992px;
	--desktop-max-breakpoint: 1199px;
	--desktop-lg-min-breakpoint: 1200px;
 */
}
* {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.marg-left-15 {
  margin-left: 15px;
}
.marg-bottom-15 {
  margin-bottom: 15px !important;
}
.marg-bottom-20 {
  margin-bottom: 20px !important;
}
.marg-bottom-10 {
  margin-bottom: 10px !important;
}
.marg-bottom-5 {
  margin-bottom: 5px !important;
}
.marg-top-15 {
  margin-top: 15px !important;
}
.marg-top-10 {
  margin-top: 10px !important;
}
.marg-top-20 {
  margin-top: 20px !important;
}
.marg-top-30 {
  margin-top: 30px !important;
}
.marg-top-40 {
  margin-top: 40px !important;
}
.marg-top-80 {
  margin-top: 80px !important;
}
.marg-right-15 {
  margin-right: 15px !important;
}
.marg-right-30 {
  margin-right: 30px !important;
}
.marg-left-15 {
  margin-left: 15px !important;
}
.marg-left-10 {
  margin-left: 10px !important;
}
.marg-left-5 {
  margin-left: 5px !important;
}
.margin-0 {
  margin: 0 !important;
}
.marg-bottom-45 {
  margin-bottom: 45px !important;
}
.marg-bottom-30 {
  margin-bottom: 30px !important;
}
.marg-top-145 {
  margin-top: 145px !important;
}
.pad-all-20 {
  padding: 20px !important;
}
.pad-10 {
  padding: 10px !important;
}
.pad-15 {
  padding: 15px !important;
}
.full-width {
  width: 100% !important;
}
.pad-0 {
  padding: 0 !important;
}
.reset-min-height {
  min-height: 0 !important;
}
.text-bolder {
  font-weight: bolder !important;
}
.text-xlg {
  font-size: 2em !important;
}
.text-lg {
  font-size: 1.2em !important;
}
.text-sm {
  font-size: 0.8em !important;
}
.text-xl {
  font-size: 1.6em !important;
}
.no-border {
  border: none !important;
}
.inline-block {
  display: inline-block !important;
}
.nowrap {
  white-space: nowrap;
}
.line-through {
  text-decoration: line-through;
}
.hint-text {
  font-size: 0.8em;
  color: #999 !important;
}
.text-disabled {
  color: #888;
}
.fw500 {
  font-weight: 500 !important;
}
.fw600 {
  font-weight: 600 !important;
}
.visible-xs.hidden,
.visible-sm.hidden {
  display: none !important;
}
/* 2018-10-4 - TK: fix width for container within container */
.container .container:not(.container-fix) {
  width: 100%;
}
.btn {
  text-overflow: ellipsis;
  overflow: hidden;
}
/* 2018-10-5 - TK: fix icon line-height in .btn */
.btn i {
  line-height: inherit;
}
/* 2018-10-5 - TK: make sure parsley error in red */
.parsley-errors-list {
  color: #f00;
}
/* 2018-10-12 - TK: make bootstrap grid col-* equal height */
.equal-height {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}
.equal-height::before {
  content: normal !important;
}
/* 2022-1-11 - TK: handle 5 columns in 1 row */
@media (min-width: 800px) {
  .equal-height .col-lg-2_4,
  .equal-height .col-md-2_4 {
    width: 20%;
    padding-right: 15px;
    padding-left: 15px;
  }
}
.equal-height .col-sm-2_4 {
  width: 20%;
  padding-right: 15px;
  padding-left: 15px;
}
/* 2024-6-4 - TK: col-xx-2_4比bootstrap.css後，這裡需要補上col-xs */
@media only screen and (max-width: 768px) {
	.equal-height .col-xs-12 {
			width: 100%;
	}

	.equal-height .col-xs-11 {
			width: 91.66666667%;
	}

	.equal-height .col-xs-10 {
			width: 83.33333333%;
	}

	.equal-height .col-xs-9 {
			width: 75%;
	}

	.equal-height .col-xs-8 {
			width: 66.66666667%;
	}

	.equal-height .col-xs-7 {
			width: 58.33333333%;
	}

	.equal-height .col-xs-6 {
			width: 50%;
	}

	.equal-height .col-xs-5 {
			width: 41.66666667%;
	}

	.equal-height .col-xs-4 {
			width: 33.33333333%;
	}

	.equal-height .col-xs-3 {
			width: 25%;
	}

	.equal-height .col-xs-2 {
			width: 16.66666667%;
	}

	.equal-height .col-xs-1 {
			width: 8.33333333%;
	}
}
.relative {
  position: relative;
}
/* 2019-10-4 - TK: make sure .open dropdown is visible */
.dropdown.open > .dropdown-menu {
  display: block !important;
}
/* 2018-7-10 jaydon: fix android cannot scroll */
.grid-stack-item-content {
  touch-action: auto !important;
}
.icon-success {
  color: #67be57;
}
.icon-lg {
  font-size: 80px;
  line-height: 80px;
}
.row.without-container {
  margin-left: 0;
  margin-right: 0;
}

/* 2019-12-30 - TK: wide-container */
/*
@media (min-width: 768px) {
	.container {
		width: 750px;
	}
}
@media (min-width: 992px) {
	.container {
		width: 970px;
	}
}
@media (min-width: 1200px) {
	.container {
		width: 1170px;
	}
}
bootstrap value. add xlg and xxlg */
@media (min-width: 1500px) {
  body.wide-container .container,
  .wider-container {
    width: 1250px;
  }
}
@media (min-width: 2000px) {
  body.wide-container .container,
  .wider-container {
    width: 1250px;
  }
}

/* 2018-10-21 jaydon: product detail bookmark */
.bookmark-item .link-wishlist {
  border-left: 1px solid lightgrey;
  padding-left: 10px;
  text-align: center;
  white-space: nowrap;
}
.bookmark-item .link-wishlist i {
  font-size: 20px;
  display: block;
}
.bookmark-item .remove-from-wishlist {
  color: #1abc9c;
  margin-top: 0;
  white-space: nowrap;
}

#common-web-push img {
  position: relative;
  top: -2px;
}
/* 2018-10-22 - TK: remove margin-top
.quanitySniper-qty{
	margin-top: 12px;
} */

/* 2018-10-21 jaydon: mobile cart ui */
.mobile-cart-container .cart-item {
  padding: 10px 0;
}
.mobile-cart-container .cart-item-image {
  width: 80px;
  display: inline-block;
  vertical-align: top;
}
/* 2018-10-23 jaydon: cart page ui */
.mobile-cart-container .item-name h4 {
  padding-bottom: 0;
  overflow: hidden;
}
.mobile-cart-container .item-qty {
  max-width: 120px;
}
.mobile-cart-container .cart-item-image img {
  width: 100%;
}
.mobile-cart-container .cart-item-info {
  width: calc(100% - 40px - 80px);
  display: inline-block;
  padding: 0 10px;
}
.mobile-cart-container .item-price {
  font-size: 18px;
  font-weight: bold;
}
.mobile-cart-container .remove-item {
  right: 0;
  position: absolute;
  font-size: 30px;
  margin-top: 10px;
  display: inline-block;
}
.mobile-cart-container .cart-item {
  border-top: 1px solid lightgrey;
}

.product-bottom-bar {
  position: absolute;
  bottom: 0;
  max-width: calc(100% - 31px);
}
/* 2018-10-23 mobile cart ui */
/* 2018-10-24 kelvin: fine tune position */
.mobile-add-cart-item {
  padding: 8px 15px;
}
.mobile-add-cart-item .add-to-cart,
.mobile-add-cart-item .add-to-cart-detail {
  text-align: center;
  border-left: 1px solid lightgrey;
  /* padding-left: 15px; */
  padding-right: inherit;
}

.mobile-add-cart-item .add-to-cart-detail i,
.mobile-add-cart-item .add-to-cart i {
  font-size: 20px;
  display: block;
}

/* 2018-10-31 - TK: generic css for [page/cart] (becup style) */
#becup-cart-detail,
#becup-checkout-detail {
  width: 100%;
  border: 1px solid #f5f5f5;
  display: table;
}
#becup-cart-detail .thead,
#becup-checkout-detail .thead {
  background-color: #f5f5f5;
  display: table-header-group;
}
#becup-cart-detail .thead .tr,
#becup-checkout-detail .thead .tr {
  display: table-row;
}
#becup-cart-detail .thead .th,
#becup-checkout-detail .thead .th {
  line-height: 40px;
  padding: 0 15px;
  font-weight: normal;
  display: table-cell;
}
#becup-cart-detail .tbody,
#becup-checkout-detail .tbody {
  display: table-row-group;
}
#becup-cart-detail .tbody .tr,
#becup-checkout-detail .tbody .tr {
  display: table-row;
}
#becup-cart-detail .tbody .td,
#becup-checkout-detail .tbody .td {
  padding: 10px 15px;
  font-size: 13px;
  display: table-cell;
  vertical-align: top;
}
#becup-cart-detail .tbody > .tr:not(:last-child) > .td,
#becup-checkout-detail .tbody > .tr:not(:last-child) > .td {
  border-bottom: 1px solid #f5f5f5;
}
#becup-cart-detail .item-photo,
#becup-checkout-detail .item-photo {
  width: 70px;
}
#becup-cart-detail .item-photo > div,
#becup-checkout-detail .item-photo > div {
  width: 70px;
  height: 70px;
  overflow: hidden;
  position: relative;
}
#becup-cart-detail .item-photo > div > a,
#becup-checkout-detail .item-photo > div > a {
  display: block;
  position: absolute;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#becup-cart-detail .item-photo > div > a > img,
#becup-checkout-detail .item-photo > div > a > img {
  max-height: 70px;
}
#becup-cart-detail .item-photo > div > a > .item-badge,
#becup-checkout-detail .item-photo > div > a > .item-badge {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #eb5e58;
  color: #fff;
  border-radius: 0 0 4px 0;
  font-weight: lighter;
  padding: 0 4px;
}
#becup-cart-detail .item-price {
  width: 100px;
  text-align: center;
}
#becup-checkout-detail .item-price {
  width: 100%;
  text-align: center;
}
#becup-cart-detail .item-remove i,
#becup-cart-detail .item-toggle i {
  color: #836e78;
  font-size: 1.8em;
}
#becup-cart-detail .item-gift,
#becup-checkout-detail .item-gift {
  color: #e8477f;
  font-size: 1.5em;
  text-align: center;
}
#becup-cart-detail .item-promotion-discount,
#becup-checkout-detail .item-promotion-discount {
  color: #e8477f;
}
#becup-cart-summary {
  position: fixed;
  background-color: #fff;
  bottom: 0;
  width: 100%;
  left: 0;
  z-index: 4000;
  box-shadow: 0 -2px 2px rgba(80, 80, 80, 0.2);
}
#becup-cart-summary > .container {
  padding-left: 30px;
  padding-right: 30px;
}
#becup-cart-summary .summary-row {
  padding-top: 5px;
  padding-bottom: 5px;
}
#becup-cart-summary .summary-row/*:not(:last-child)*/ {
  border-bottom: 1px dashed #ddd;
}
#becup-cart-summary .summary-row .title {
  float: left;
}
#becup-cart-summary .summary-row .credit-title {
  width: 130px;
  text-overflow: ellipsis;
  text-align: left;
  display: inline-block;
}
#becup-cart-summary .summary-row .credit-value {
  width: 80px;
  text-overflow: ellipsis;
  text-align: right;
  display: inline-block;
  color: #009688;
  font-weight: 500;
}
#becup-cart-summary label {
  font-weight: normal;
}
#becup-cart-summary .sub-total {
  margin-left: 5px;
}
#becup-cart-summary .grand-total {
  color: #e8477f;
  font-size: 1.2em;
  margin-left: 5px;
}
/* 2020-4-6 - TK: G said smaller */
@media only screen and (max-width: 768px) {
  #becup-cart-summary .summary-row {
    padding-top: 3px;
    padding-bottom: 3px;
  }
  #becup-cart-summary .summary-row .form-control {
    height: 28px;
  }
  #becup-cart-summary .summary-row .form-control.credit_amount {
    width: 25%;
  }
  #becup-cart-summary .summary-row .btn {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* 20190508 winston add bundle promotion enchancement css */
.popupBundle {
  cursor: pointer;
}
.bundle-item-title {
  background: #dfe2e4;
  padding: 10px;
}
.bundle-item-name {
  color: #ff0000;
  font-size: 14px;
}
.bundle-item-select-count {
  float: right;
  color: #000;
  font-size: 14px;
}
.bundle-item {
  margin-bottom: 5px !important;
}
.bundle-item:last-child {
  margin-bottom: 10px !important;
}
.selected-bundle-item {
  padding: 10px 15px 0px 15px;
  border: 1px solid #ccc;
}
.selected-bundle-item-title {
  padding: 0px;
  margin: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 9vw;
  font-size: 14px;
}
.selected-bundle-item-variant {
  margin-top: 4px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 9vw;
  font-size: 14px;
}
.popup-bundle-dialog {
  border-radius: 5px;
}
.popup-bundle-header {
  background: #bbc3c3 !important;
  height: auto;
  border: none;
  margin: 20px 50px;
  padding: 15px !important;
}
.popup-bundle-title {
  font-size: 20px;
}
.popup-bundle-close {
  position: fixed;
  top: 38px;
  right: 14px;
  font-size: 40px;
}
.popup-bundle-back {
  position: fixed;
  top: 42px;
  left: 14px;
  font-size: 40px;
}
.popup-bundle-content {
  box-shadow: none !important;
  border: none !important;
}
.popup-bundle-body {
  margin: 20px 50px;
  padding: 0px !important;
}
.bundle-sales-product-select,
.bundle-product-select {
  padding: 10px 15px;
  background: #684072;
  font-size: 18px;
  border-radius: 5px;
}
.bundle-sales-product-select a,
.bundle-product-select a {
  color: #fff;
}

#becup-desk-member-invoice {
  margin-top: 56px;
}
@media only screen and (max-width: 468px) {
  .popup-bundle-header {
    height: 110px;
  }
  .popup-bundle-body {
    margin: 0px 10px;
  }
  .popupBundle,
  .selected-bundle-item {
    /*padding: 0px !important;*/
  }
  .selected-bundle-item-title,
  .selected-bundle-item-variant {
    width: unset;
  }
  .bundle-media-list {
    padding-top: 10px;
  }
  .bundle-media-item {
    top: 23px !important;
  }
  .bundle-media-trash {
    padding-right: 5px;
  }
  .leftContent {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) {
  #becup-desk-member-invoice {
    margin-top: 0;
  }
  #becup-cart-detail {
    margin-top: -35px;
    margin-left: -25px;
    width: calc(100% + 50px);
  }
  #becup-cart-detail .thead > .tr {
    display: block;
    position: relative;
    padding: 5px 10px;
    background-color: #fff;
    border-bottom: 1px solid #f5f5f5;
  }
  #becup-cart-detail .thead > .tr > .th:first-child {
    display: block;
    padding: 0;
    width: 100%;
    line-height: normal;
  }
  #becup-cart-detail .thead > .tr > .th:first-child > label {
    width: 100%;
    margin: 0;
  }
  #becup-cart-detail .thead > .tr > .th:first-child > label > span {
    display: inline-block !important;
    font-weight: normal;
    margin-left: 5px;
  }
  #becup-cart-detail .thead > .tr > .th:not(:first-child) {
    display: none;
  }
  #becup-checkout-detail .thead {
    display: none;
  }
  #becup-cart-detail .tbody > .tr,
  #becup-checkout-detail .tbody > .tr {
    display: block;
    position: relative;
    padding: 10px 15px;
  }
  #becup-cart-detail .tbody > .tr:not(:last-child),
  #becup-checkout-detail .tbody > .tr:not(:last-child) {
    border-bottom: 1px solid #f5f5f5;
  }
  #becup-cart-detail .tbody > .tr > .td,
  #becup-checkout-detail .tbody > .tr > .td {
    display: block;
    padding: 0;
    border-bottom: none !important;
  }
  /* checkbox */
  #becup-cart-detail .tbody > .tr > .td:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
  }
  #becup-cart-detail .tbody > .tr > .td:nth-child(1) > .item-selected {
    width: 100%;
    height: 100%;
  }
  #becup-cart-detail .tbody > .tr > .td:nth-child(1) > .item-selected > label {
    width: 100%;
    height: 100%;
    text-align: center;
    display: block;
  }
  #becup-cart-detail
    .tbody
    > .tr
    > .td:nth-child(1)
    > .item-selected
    > label
    > input[type="checkbox"] {
    margin: 0;
    top: calc(50% - 10px);
    position: relative;
  }
  /* photo */
  #becup-cart-detail .tbody > .tr > .td:nth-child(2) {
    float: left;
    margin-left: 20px;
    width: auto;
  }
  #becup-cart-detail .tbody > .tr > .td:nth-child(2) > .item-gift {
    margin-left: -30px;
  }
  #becup-checkout-detail .tbody > .tr > .td:nth-child(1) {
    float: left;
    width: auto;
  }
  /* product name */
  #becup-cart-detail .tbody > .tr > .td:nth-child(3) {
    margin-left: 95px;
    margin-right: 20px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #becup-cart-detail .tbody > .tr.discount-row > .td:nth-child(3) {
    margin-left: 20px;
    margin-right: 75px;
  }
  #becup-checkout-detail .tbody > .tr > .td:nth-child(2) {
    margin-left: 45px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 75px;
  }
  #becup-checkout-detail .tbody > .tr.discount-row > .td:nth-child(2) {
    margin-left: 30px;
  }
  /* product variants */
  #becup-cart-detail .tbody > .tr > .td:nth-child(4) {
    margin-left: 95px;
    margin-right: 20px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #becup-checkout-detail .tbody > .tr > .td:nth-child(3) {
    margin-left: 45px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* unit price */
  #becup-cart-detail .tbody > .tr > .td:nth-child(5) {
    position: absolute;
    top: 55px;
    left: 210px;
    line-height: 30px;
    font-size: 1.1em;
    font-weight: 500;
  }
  #becup-checkout-detail .tbody > .tr > .td:nth-child(4) {
    position: absolute;
    top: 53px;
    left: 110px;
    font-size: 1.2em;
    font-weight: 500;
  }
  #becup-cart-detail .tbody > .tr > .td:nth-child(5) span {
    display: inline-block !important;
    margin-left: 15px;
    margin-right: 20px;
    font-size: 0.8em;
    font-weight: normal;
    color: #666;
  }
  #becup-checkout-detail .tbody > .tr > .td:nth-child(4) span {
    display: inline-block !important;
    margin-left: 15px;
    margin-right: 20px;
    font-size: 0.8em;
    font-weight: normal;
    color: #666;
  }
  /* qty */
  #becup-cart-detail .tbody > .tr > .td:nth-child(6) {
    margin-left: 95px;
    margin-top: 5px;
    margin-right: 20px;
  }
  #becup-checkout-detail .tbody > .tr > .td:nth-child(5) {
    margin-top: 5px;
  }
  #becup-checkout-detail .tbody > .tr > .td:nth-child(5) > .item-price {
    text-align: left;
    padding-left: 75px;
  }
  /* sub total */
  #becup-cart-detail .tbody > .tr > .td:nth-child(7) {
    display: none;
  }
  #becup-checkout-detail .tbody > .tr > .td:nth-child(6) {
    display: none;
  }
  /* remove item */
  #becup-cart-detail .tbody > .tr > .td:nth-child(8) {
    position: absolute;
    right: 12px;
    top: 0;
    margin-top: 15px;
  }

  /* 2018-11-19 jaydon: hide all nbsp	 */
  #becup-cart-detail .tbody > .tr.discount-row > .td:nth-child(1),
  #becup-cart-detail .tbody > .tr.discount-row > .td:nth-child(4),
  #becup-cart-detail .tbody > .tr.discount-row > .td:nth-child(5),
  #becup-cart-detail .tbody > .tr.discount-row > .td:nth-child(6),
  #becup-cart-detail .tbody > .tr.discount-row > .td:nth-child(8) {
    display: none;
  }
  #becup-checkout-detail .tbody > .tr.discount-row > .td:nth-child(3),
  #becup-checkout-detail .tbody > .tr.discount-row > .td:nth-child(4),
  #becup-checkout-detail .tbody > .tr.discount-row > .td:nth-child(5) {
    display: none;
  }
  #becup-cart-detail .tbody > .tr.discount-row > .td:nth-child(7) {
    display: block;
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 1.2em;
  }
  #becup-checkout-detail .tbody > .tr.discount-row > .td:nth-child(6) {
    display: block;
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 1.2em;
  }
  #becup-cart-summary .summary-row.button-group .btn {
    width: 100%;
  }
  .pull-left-xs {
    float: left;
  }
}
.becup-checkout-form .orderStep li a {
  background-color: #fff;
}
/* 2018-10-31 - TK: generic css for [page/checkout] (becup style) */
@media only screen and (max-width: 768px) {
  .becup-checkout-form .orderStep {
    position: fixed;
    width: 100%;
    top: 50px;
    left: 0;
    z-index: 999;
    margin-bottom: 0;
  }
  .becup-checkout-form .orderStep li {
    min-height: 0;
    border-bottom: 1px solid #e3e3e3;
  }
  .becup-checkout-form .orderStep li.active {
    border-bottom: 1px solid #e8477f;
  }
  .becup-checkout-form .orderStep li a {
    color: #666;
  }
  .becup-checkout-form .orderStep li a i {
    font-size: 16px;
    line-height: 26px;
    background-color: #f5f5f5;
  }
  .becup-checkout-form .orderStep li a span {
    font-size: 10px;
    padding: 2px 0;
  }
  .becup-checkout-form .orderStep + .tab-content {
    margin-top: 10px;
    margin-left: -10px;
    width: calc(100% + 20px);
  }
}
/* 2018-11-14 - TK: generic css for [page/member-mine] (becup style) */
#becup-desk-member-mine {
  display: flex;
}
#becup-desk-member-mine > .member-profile {
  flex: 0 1 315px;
  border-right: 1px solid #f5f5f5;
  padding-right: 15px;
}
.posify-member-card {
  width: 300px;
  height: 180px;
  background-color: #f2f2f2;
  border-radius: 10px;
  position: relative;
  padding: 15px;
}
.posify-member-card > .card-top-left {
  height: 60px;
  position: absolute;
}
.posify-member-card > .card-top-center {
  height: 60px;
  margin-left: 100px;
  position: absolute;
}
.posify-member-card > .card-top-right {
  height: 60px;
  /* margin-left: 200px; */
  position: absolute;
  right: 15px;
  top: 15px;
}
.posify-member-card > .card-middle-left {
  height: 60px;
  margin-top: 40px;
  position: absolute;
}
.posify-member-card > .card-middle-center {
  height: 60px;
  margin-top: 40px;
  margin-left: 100px;
  position: absolute;
}
.posify-member-card > .card-middle-right {
  height: 60px;
  margin-top: 40px;
  margin-left: 200px;
  position: absolute;
}
.posify-member-card > .card-bottom-left {
  height: 60px;
  margin-top: 100px;
  position: absolute;
}
.posify-member-card > .card-bottom-center {
  height: 60px;
  margin-top: 100px;
  margin-left: 100px;
  position: absolute;
}
.posify-member-card > .card-bottom-right {
  height: 60px;
  margin-top: 100px;
  margin-left: 200px;
  position: absolute;
}

.posify-member-card > .card-top {
  height: 60px;
  margin-bottom: 10px;
}
.posify-member-card > .card-bottom {
  margin-top: 70px;
}
.posify-member-card > .card-top-left > .member-photo,
.posify-member-card > .card-top-center > .member-photo,
.posify-member-card > .card-top-right > .member-photo,
.posify-member-card > .card-middle-left > .member-photo,
.posify-member-card > .card-middle-center > .member-photo,
.posify-member-card > .card-middle-right > .member-photo,
.posify-member-card > .card-bottom-left > .member-photo,
.posify-member-card > .card-bottom-center > .member-photo,
.posify-member-card > .card-bottom-right > .member-photo,
.posify-member-card > .card-top > .member-photo {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 25px;
  float: left;
}
.posify-member-card > .card-top-left > .member-photo > img,
.posify-member-card > .card-top-center > .member-photo > img,
.posify-member-card > .card-top-right > .member-photo > img,
.posify-member-card > .card-middle-left > .member-photo > img,
.posify-member-card > .card-middle-center > .member-photo > img,
.posify-member-card > .card-middle-right > .member-photo > img,
.posify-member-card > .card-bottom-left > .member-photo > img,
.posify-member-card > .card-bottom-center > .member-photo > img,
.posify-member-card > .card-bottom-right > .member-photo > img,
.posify-member-card > .card-top > .member-photo > img {
  margin: 0;
  width: 100%;
  height: auto;
}
.posify-member-card > .card-top-left > .member-qrcode,
.posify-member-card > .card-top-center > .member-qrcode,
.posify-member-card > .card-top-right > .member-qrcode,
.posify-member-card > .card-middle-left > .member-qrcode,
.posify-member-card > .card-middle-center > .member-qrcode,
.posify-member-card > .card-middle-right > .member-qrcode,
.posify-member-card > .card-bottom-left > .member-qrcode,
.posify-member-card > .card-bottom-center > .member-qrcode,
.posify-member-card > .card-bottom-right > .member-qrcode,
.posify-member-card > .card-top > .member-qrcode {
  width: 60px;
  height: 60px;
  overflow: hidden;
  float: right;
}
.posify-member-card > .card-top-left > .member-qrcode img,
.posify-member-card > .card-top-center > .member-qrcode img,
.posify-member-card > .card-top-right > .member-qrcode img,
.posify-member-card > .card-middle-left > .member-qrcode img,
.posify-member-card > .card-middle-center > .member-qrcode img,
.posify-member-card > .card-middle-right > .member-qrcode img,
.posify-member-card > .card-bottom-left > .member-qrcode img,
.posify-member-card > .card-bottom-center > .member-qrcode img,
.posify-member-card > .card-bottom-right > .member-qrcode img,
.posify-member-card > .card-top > .member-qrcode img {
  width: 60px !important;
  height: 60px !important;
}
.posify-member-card > .card-top-left > .member-qrcode canvas,
.posify-member-card > .card-top-center > .member-qrcode canvas,
.posify-member-card > .card-top-right > .member-qrcode canvas,
.posify-member-card > .card-middle-left > .member-qrcode canvas,
.posify-member-card > .card-middle-center > .member-qrcode canvas,
.posify-member-card > .card-middle-right > .member-qrcode canvas,
.posify-member-card > .card-bottom-left > .member-qrcode canvas,
.posify-member-card > .card-bottom-center > .member-qrcode canvas,
.posify-member-card > .card-bottom-right > .member-qrcode canvas,
.posify-member-card > .card-top > .member-qrcode canvas {
  width: 60px !important;
  height: 60px !important;
}
.posify-member-card > .card-bottom > .member-name {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}
.posify-member-card > .card-bottom > .member-name > .member-no {
  font-size: 12px;
  line-height: 12px;
}
.posify-member-card > .card-bottom > .member-level {
  font-size: 14px;
  line-height: 25px;
}
.posify-member-card > .card-bottom > .member-level > i {
  margin-right: 5px;
}
.posify-member-card > .card-bottom > .member-date {
  font-size: 12px;
  color: #888;
  line-height: 25px;
}
/* 2019-2-13 - TK: change to .becup-member to share css with cash-out-list */
.becup-member .member-profile > .member-balance {
  display: flex;
  flex-wrap: wrap;
  min-width: 300px;
}
.becup-member .member-profile > .member-balance > .member-credit {
  background-color: #f2f2f2;
  border-radius: 10px;
  /* width:140px; */
  /* 2018-12-14 kelvin: edit css */
  flex: 0 1 144px;
  height: 134px;
  margin-top: 6px;
  position: relative;
  overflow: hidden;
}
.becup-member
  .member-profile
  > .member-balance
  > .member-credit:nth-child(2n + 1) {
  margin-right: 6px;
}
.becup-member .member-profile > .member-balance > .member-credit:nth-child(2n) {
  margin-left: 6px;
}
.becup-member .member-profile > .member-balance > .member-credit > .img-circle {
  width: 114px;
  height: 80px;
  margin: 10px auto;
  background-color: #fff;
  text-align: center;
  padding: 0 10px;
}
.becup-member
  .member-profile
  > .member-balance
  > .member-credit
  > .img-circle
  > h1 {
  color: #00a599;
  border-bottom: 1px solid #ccc;
  padding: 0;
  line-height: 30px;
  padding-top: 10px;
  font-size: 1.5em;
}
.becup-member
  .member-profile
  > .member-balance
  > .member-credit
  > .img-circle
  > p {
  color: #999;
  font-size: 0.7em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 144px;
  position: absolute;
  left: 0;
  bottom: 51px;
  text-align: center;
}
.becup-member .member-profile > .btn-block {
  margin: 10px 0 0 5px;
  border-radius: 5px;
  width: calc(100% - 10px);
}
/*2018-12-06 winston add redeem cash dollar section */
#becup-desk-member-mine > .member-profile > .member-redeem {
  margin-top: 15px;
  height: 90px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-top {
  background-color: #f2f2f2;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  height: 29%;
}
#becup-desk-member-mine > .member-profile > .member-redeem > .white-divider {
  background-color: #ffffff;
  border-radius: 0px;
  width: 100%;
  height: 3px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-bottom {
  background-color: #f2f2f2;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  width: 100%;
  height: 70%;
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-top
  > .member-redeem-title {
  color: #333333;
  margin: 10px 13px;
  font-size: 14px;
  line-height: 26px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-bottom
  > .member-redeem-content {
  color: #333333;
  margin: 10px 7px;
  font-size: 14px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-top
  > .member-redeem-title
  > .member-redeem-title-right {
  margin-left: 18px;
  /* 2018-12-14 kelvin: remove */
  /* font-size:18px; */
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-top
  > .member-redeem-title
  > .member-redeem-title-right
  > .member-redeem-title-points {
  margin: 0px 10px 0px 5px;
  font-size: 10px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-top
  > .member-redeem-title
  > .member-redeem-title-right
  > .member-redeem-title-number {
  margin: 0px 5px 0px 10px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-top
  > .member-redeem-title
  > .member-redeem-title-right
  > .member-redeem-title-cash-dollar {
  font-size: 10px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-bottom
  > .member-redeem-content
  > .redeem-form-field {
  width: 43px;
  border: none;
  padding: 7px 1px;
  margin-top: 13px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-bottom
  > .member-redeem-content
  > .redeem-form-field-margin {
  margin-left: 5px;
  margin-right: 5px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-bottom
  > .member-redeem-content
  > .member-redeem-content-points {
  font-size: 10px;
  margin: 0px 5px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-bottom
  > .member-redeem-content
  > .member-redeem-content-cash-dollar {
  font-size: 10px;
  display: table-caption;
  line-height: 9px;
  text-align: center;
  /* 2019-7-4 kelvin: set width */
  width: 60px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-bottom
  > .member-redeem-content
  > .convert-button-margin {
  margin-left: 5px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-redeem
  > .member-credit-bottom
  > .convert-reminder {
  font-size: 10px;
  display: block;
  color: #ff0000;
  line-height: 9px;
  margin-left: 13px;
}
#becup-desk-member-mine > .member-profile > .member-cards {
  margin-top: 15px;
}
#becup-desk-member-mine > .member-profile > .member-cards > .card {
  width: 140px;
}
#becup-desk-member-mine > .member-profile > .member-share {
  margin-top: 15px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-share
  > .share-qr-link
  > img {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
#becup-desk-member-mine
  > .member-profile
  > .member-share
  > .share-qr-link.w70
  > img {
  width: 70%;
}
#becup-desk-member-mine > .member-summary {
  flex: 1 1 auto;
  padding-left: 15px;
}
.becup-member .member-history {
  min-height: 180px;
  position: relative;
}
.becup-member .member-history > .no-record {
  width: 200px;
  height: 80px;
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -100px;
  text-align: center;
}
.becup-member .member-history > .no-record > i {
  font-size: 30px;
  color: #eaeaea;
}
.becup-member .member-history > .no-record > p {
  font-size: 0.8em;
  color: #aaa;
}
.becup-member .member-history > .table {
  width: 100%;
  display: table;
  font-size: 12px;
}
.becup-member .member-history > .table > .thead {
  background-color: #f9f9f9;
  display: table-header-group;
  width: 100%;
}
.becup-member .member-history > .table > .thead .tr {
  display: table-row;
}
.becup-member .member-history > .table > .thead .th {
  line-height: 30px;
  padding: 0 15px;
  font-weight: normal;
  display: table-cell;
}
.becup-member .member-history > .table > .tbody {
  display: table-row-group;
  width: 100%;
}
.becup-member .member-history > .table > .tbody .tr {
  display: table-row;
}
/* 20200601 winston for all member-invoice table change */
.member-history > .table.invoice-history > .tbody .td {
  border: 1px solid #cccccc;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
}
.member-history > .table.invoice-history > .tbody .td .invoice-item-top {
  border-bottom: 1px solid #cccccc;
  font-size: 16px;
}
.member-history
  > .table.invoice-history
  > .tbody
  .td
  .invoice-item-top
  > .text-left {
  color: #2baafd;
}
.member-history > .table.invoice-history > .tbody .td .card {
  padding-top: 15px;
  padding-bottom: 15px;
  cursor: pointer;
}
.member-history > .table.invoice-history > .tbody .td .card:last-child {
  border-bottom: 1px solid #cccccc;
}
.member-history > .table.invoice-history > .tbody .td .card .card-img {
  max-width: 180px;
  width: 100%;
  padding-right: 10px;
}
.member-history > .table.invoice-history > .tbody .td .card .card-title {
  font-size: 16px;
}
.member-history > .table.invoice-history > .tbody .td .card .card-text {
  font-size: 12px;
  color: #555555;
}
.member-history > .table.invoice-history > .tbody .td .invoice-item-summary {
  font-size: 16px;
  border-bottom: 1px solid #cccccc;
  color: #dd6034;
}
.member-history > .table.invoice-history > .tbody .td .invoice-item-footer {
  display: block;
}
.member-history
  > .table.invoice-history
  > .tbody
  .td
  .invoice-item-footer
  .grand-total {
  font-size: 1.5em;
}
.member-history
  > .table.invoice-history
  > .tbody
  .td
  .invoice-item-footer
  a.btn {
  background: #ffffff;
  color: #333333;
  border: 1px solid #333333;
  border-radius: 10px;
  margin-left: 15px;
  padding: 8px 20px;
  font-size: 14px;
}
.member-history
  > .table.invoice-history
  > .tbody
  .td
  .invoice-item-footer
  a.btn:hover {
  color: #dd6034;
  border: 1px solid #dd6034;
}
.member-history
  > .table.invoice-history
  > .tbody
  .td
  .invoice-item-footer
  a.btn.btn-success {
  background-color: #2ecc71 !important;
  color: #fff !important;
}
.member-history
  > .table.invoice-history
  > .tbody
  .td
  .invoice-item-footer
  form.void-form,
.member-history
  > .table.invoice-history
  > .tbody
  .td
  .invoice-item-footer
  form.checkout-form {
  display: inline-block;
}
.member-history > .table.invoice-history > .tbody .td #payment-method-section {
  margin-top: 10px;
}
.becup-member .member-history > .table:not(.invoice-history) > .tbody .td {
  padding: 7px 15px;
  font-size: 12px;
  display: table-cell;
  vertical-align: top;
  color: #666;
}
.becup-member
  .member-history
  > .table:not(.invoice-history)
  > .tbody
  > .tr:last-child
  > .td {
  border-bottom: 1px solid #f5f5f5;
}
.product-tab > ul > li.active > a {
  background-color: #bfc9ca;
}
@media only screen and (max-width: 768px) {
  /* 20200602 winston add revise ui of invoice table */
  .member-history
    > .table.invoice-history
    > .tbody
    .td
    .invoice-item-footer
    a.btn,
  .member-history > .table.invoice-history > .tbody .td .invoice-item-summary,
  .member-history > .table.invoice-history > .tbody .td .card .card-title,
  .member-history > .table.invoice-history > .tbody .td .invoice-item-top {
    font-size: 12px;
  }
  .member-history
    > .table.invoice-history
    > .tbody
    .td
    .invoice-item-footer
    a.btn {
    margin-left: 5px;
    margin-top: 5px;
  }
  .member-history > .table.invoice-history > .tbody .td .card .card-img {
    padding-right: 0px;
  }

  /* 20200602 winston add revise ui of invoice table END */
  #becup-desk-member-mine {
    display: block;
    margin-top: 0 !important;
  }
  #becup-desk-member-mine > .member-profile {
    display: none;
  }
  #becup-desk-member-mine > .member-summary {
    padding: 0;
    display: none;
  }
  /* 20190412 winston add jolli table style */
  #order-record-pager,
  #cashdollar-record-pager,
  #invoice-record-pager,
  #referral-record-pager {
    border: 1px solid #cccccc;
    height: 20px;
    font-size: 14px;
  }
  .jolli-member .reward-trans-tab-content > .table,
  .jolli-member .member-profile-tab-content > .table.cashdollar_table,
  .jolli-member .member-profile-tab-content > .table.order_table,
  .becup-member .member-history > .table,
  .jolli-member .referral-cashdollar-tab-content > .table.invoice_table,
  .jolli-member .referral-cashdollar-tab-content > .table.referral_table {
    display: block;
  }
  .jolli-member .reward-trans-tab-content > .table > .thead,
  .jolli-member .member-profile-tab-content > .table.cashdollar_table > .thead,
  .jolli-member .member-profile-tab-content > .table.order_table > .thead,
  .becup-member .member-history > .table > .thead,
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .thead,
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.referral_table
    > .thead {
    display: none;
  }
  .jolli-member .reward-trans-tab-content > .table > .tbody,
  .jolli-member .member-profile-tab-content > .table.cashdollar_table > .tbody,
  .jolli-member .member-profile-tab-content > .table.order_table > .tbody,
  .becup-member .member-history > .table > .tbody,
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody,
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.referral_table
    > .tbody {
    display: block;
  }
  .jolli-member .reward-trans-tab-content > .table > .tbody > .tr,
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr,
  .jolli-member .member-profile-tab-content > .table.order_table > .tbody > .tr,
  .becup-member .member-history > .table > .tbody > .tr,
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr,
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.referral_table
    > .tbody
    > .tr {
    display: block;
    position: relative;
  }
  .jolli-member .reward-trans-tab-content > .table > .tbody > .tr > .td,
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td,
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td,
  .becup-member
    .member-history
    > .table:not(.invoice-history)
    > .tbody
    > .tr
    > .td,
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td,
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.referral_table
    > .tbody
    > .tr
    > .td {
    font-size: 12px;
    padding: 5px;
    border: none !important;
  }
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td
    .visible-xs,
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td
    .visible-xs,
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td
    .visible-xs,
  .becup-member .member-history > .table > .tbody > .tr > .td .visible-xs,
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td
    .visible-xs,
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.referral_table
    > .tbody
    > .tr
    > .td
    .visible-xs {
    display: inline-block !important;
  }
  /* invoice history row */
  .becup-member .member-history > .table.coupon-history > .tbody > .tr {
    height: 90px;
    border: 1px solid #e3e3e3;
    margin-bottom: 15px;
  }
  .becup-member .member-history > .table.gift-history > .tbody > .tr {
    height: 110px;
    border: 1px solid #e3e3e3;
    margin-bottom: 15px;
  }
  .becup-member .member-history > .table.voucher-history > .tbody > .tr {
    height: 130px;
    border: 1px solid #e3e3e3;
    margin-bottom: 15px;
  }
  .becup-member .member-history > .table.address-history > .tbody > .tr {
    height: 90px;
    border: 1px solid #e3e3e3;
    margin-bottom: 15px;
  }
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr {
    height: 142px;
    border: 1px solid #e3e3e3;
    margin-bottom: 15px;
  }
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr,
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.referral_table
    > .tbody
    > .tr,
  .becup-member
    .member-invoice-tab-content
    > .table.invoice_table
    > .tbody
    > .tr,
  .becup-member
    .member-invoice-tab-content
    > .table.referral_table
    > .tbody
    > .tr {
    border: 1px solid #e3e3e3;
    margin-bottom: 15px;
  }
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr,
  .becup-member
    .member-invoice-tab-content
    > .table.invoice_table
    > .tbody
    > .tr {
    height: 168px;
  }
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.referral_table
    > .tbody
    > .tr,
  .becup-member
    .member-invoice-tab-content
    > .table.referral_table
    > .tbody
    > .tr {
    height: 92px;
  }
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr {
    height: 130px;
    border: 1px solid #e3e3e3;
    margin-bottom: 15px;
  }
  .jolli-member .reward-trans-tab-content > .table > .tbody > .tr {
    height: 182px;
    border: 1px solid #e3e3e3;
    margin-bottom: 15px;
  }
  /* invoice no */
  .becup-member
    .member-history
    > .table.address-history
    > .tbody
    > .tr
    > .td:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 12px;
  }
  .becup-member
    .member-history
    > .table.address-history
    > .tbody
    > .tr
    > .td:nth-child(2) {
    position: absolute;
    top: 30px;
    left: 0;
    font-size: 12px;
  }
  .becup-member
    .member-history
    > .table.address-history
    > .tbody
    > .tr
    > .td:nth-child(3) {
    position: absolute;
    top: 0;
    right: 5px;
    font-weight: bold;
    font-size: 16px;
  }
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(1),
  .becup-member
    .member-history
    > .table.coupon-history
    > .tbody
    > .tr
    > .td:nth-child(1),
  .becup-member
    .member-history
    > .table.gift-history
    > .tbody
    > .tr
    > .td:nth-child(1),
  .becup-member
    .member-history
    > .table.voucher-history
    > .tbody
    > .tr
    > .td:nth-child(1),
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(1),
  .becup-member
    .member-invoice-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-weight: bold;
    color: #00a79d;
    font-size: 12px;
    border-bottom: 1px solid #f5f5f5 !important;
  }
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(1),
  .becup-member
    .member-invoice-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(1) {
    text-align: left;
  }
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(1) {
    text-align: left !important;
    /* //color:#005069; */
  }
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(3),
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td:nth-child(2) {
    border-bottom: 1px solid #f5f5f5 !important;
  }
  /* invoice date */
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(2),
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td:nth-child(2),
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(2),
  .becup-member
    .member-history
    > .table.voucher-history
    > .tbody
    > .tr
    > .td:nth-child(2),
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(2),
  .becup-member
    .member-invoice-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    text-align: right;
  }
  /* item photo */
  .becup-member
    .member-history
    > .table.voucher-history
    > .tbody
    > .tr
    > .item-photo {
    position: absolute;
    top: 33px;
    left: 0;
    width: 60px;
    height: 60px;
    overflow: hidden;
  }
  .becup-member
    .member-history
    > .table.voucher-history
    > .tbody
    > .tr
    > .item-photo
    img {
    max-height: 60px;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    display: block;
  }
  /* bill to */
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(3),
  .becup-member
    .member-invoice-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(3) {
    position: absolute;
    top: 30px;
    left: 0px;
  }
  .becup-member
    .member-history
    > .table.gift-history
    > .tbody
    > .tr
    > .td:nth-child(2),
  .becup-member
    .member-history
    > .table.coupon-history
    > .tbody
    > .tr
    > .td:nth-child(2) {
    position: absolute;
    top: 30px;
  }
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(1),
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td:nth-child(1),
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(3),
  .becup-member
    .member-history
    > .table.voucher-history
    > .tbody
    > .tr
    > .td:nth-child(3) {
    position: absolute;
    top: 30px;
    left: 70px;
  }
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(9),
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(8),
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(7),
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(6),
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td.td_point_show,
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(3),
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(1),
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td:nth-child(6),
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td:nth-child(5),
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td:nth-child(4),
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td:nth-child(3),
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td:nth-child(1),
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(3) {
    text-align: left;
    left: 0px !important;
  }
  /* ship to */
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(5) {
    position: absolute;
    top: 50px;
    left: 0px;
  }
  .becup-member
    .member-history
    > .table.gift-history
    > .tbody
    > .tr
    > .td:nth-child(3),
  .becup-member
    .member-history
    > .table.coupon-history
    > .tbody
    > .tr
    > .td:nth-child(3) {
    position: absolute;
    top: 50px;
  }
  .becup-member
    .member-history
    > .table.coupon-history
    > .tbody
    > .tr
    > .td:nth-child(4) {
    position: absolute;
    top: 50px;
    right: 10px;
  }
  .becup-member
    .member-history
    > .table.gift-history
    > .tbody
    > .tr
    > .td:nth-child(4) {
    position: absolute;
    top: 70px;
  }
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td:nth-child(3),
  .becup-member
    .member-history
    > .table.voucher-history
    > .tbody
    > .tr
    > .td:nth-child(4) {
    position: absolute;
    top: 50px;
    left: 70px;
  }
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(5),
  .becup-member
    .member-invoice-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(5) {
    position: absolute;
    top: 70px;
    left: 0px;
    text-align: left;
    border-top: 1px solid #f5f5f5 !important;
    width: 100%;
  }
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(6) {
    margin-top: 9px;
  }
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(6),
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(6),
  .becup-member
    .member-invoice-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(6) {
    position: absolute;
    top: 90px;
    left: 0px;
    text-align: left;
    width: 100%;
  }
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(7),
  .becup-member
    .member-invoice-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(7) {
    position: absolute;
    top: 110px;
    left: 0px;
    text-align: left;
    width: 100%;
  }
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(8),
  .becup-member
    .member-invoice-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(8) {
    position: absolute;
    top: 130px;
    left: 0px;
    text-align: left;
    width: 100%;
  }
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.referral_table
    > .tbody
    > .tr
    > .td:nth-child(1),
  .becup-member
    .member-invoice-tab-content
    > .table.referral_table
    > .tbody
    > .tr
    > .td:nth-child(1) {
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: left;
    border-top: 1px solid #f5f5f5 !important;
    width: 100%;
  }
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.referral_table
    > .tbody
    > .tr
    > .td:nth-child(2),
  .becup-member
    .member-invoice-tab-content
    > .table.referral_table
    > .tbody
    > .tr
    > .td:nth-child(2) {
    position: absolute;
    top: 20px;
    left: 0px;
    text-align: left;
    width: 100%;
  }
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.referral_table
    > .tbody
    > .tr
    > .td:nth-child(3),
  .becup-member
    .member-invoice-tab-content
    > .table.referral_table
    > .tbody
    > .tr
    > .td:nth-child(3) {
    position: absolute;
    top: 40px;
    left: 0px;
    text-align: left;
    width: 100%;
  }
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.referral_table
    > .tbody
    > .tr
    > .td:nth-child(4),
  .becup-member
    .member-invoice-tab-content
    > .table.referral_table
    > .tbody
    > .tr
    > .td:nth-child(4) {
    position: absolute;
    top: 60px;
    left: 0px;
    text-align: left;
    width: 100%;
  }
  /* qty */
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td.td_point_show,
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td:nth-child(4),
  .becup-member
    .member-history
    > .table.voucher-history
    > .tbody
    > .tr
    > .td:nth-child(5) {
    position: absolute;
    top: 70px;
    left: 70px;
    text-align: left;
  }
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(6),
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td:nth-child(5) {
    position: absolute;
    top: 90px;
    left: 70px;
    text-align: left;
  }
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(7),
  .jolli-member
    .member-profile-tab-content
    > .table.cashdollar_table
    > .tbody
    > .tr
    > .td:nth-child(6) {
    position: absolute;
    top: 110px;
    left: 70px;
    text-align: left;
  }
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(8) {
    position: absolute;
    top: 130px;
    left: 70px;
    text-align: left;
  }
  .jolli-member
    .reward-trans-tab-content
    > .table
    > .tbody
    > .tr
    > .td:nth-child(9) {
    position: absolute;
    top: 150px;
    left: 70px;
    text-align: left;
  }
  /* grand total */
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(5),
  .becup-member
    .member-history
    > .table.voucher-history
    > .tbody
    > .tr
    > .td:nth-child(6) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-weight: bold;
    color: #ea5222;
    font-size: 16px;
    text-align: right;
    border-top: 1px solid #f5f5f5 !important;
  }
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(5) {
    top: 70px;
    height: 30px;
    border-bottom: 1px solid #f5f5f5 !important;
  }
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(5) {
    color: #005069;
  }
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(5)
    > span,
  becup-member
    .member-history
    > .table.voucher-history
    > .tbody
    > .tr
    > .td:nth-child(6)
    > span {
    font-size: 12px;
    color: #555;
    float: left;
  }
  /* view detail */
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(4),
  .becup-member
    .member-history
    > .table.voucher-history
    > .tbody
    > .tr
    > .td:nth-child(7),
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(4),
  .becup-member
    .member-invoice-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(4) {
    position: absolute;
    right: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    margin-top: -20px;
    font-size: 20px;
  }
  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(4),
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(4),
  .becup-member
    .member-invoice-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(4) {
    top: 20px;
  }
  .becup-member
    .member-history
    > .table.voucher-history
    > .tbody
    > .tr
    > .td:nth-child(7) {
    top: 50px;
  }

  .jolli-member
    .member-profile-tab-content
    > .table.order_table
    > .tbody
    > .tr
    > .td:nth-child(4),
  .jolli-member
    .referral-cashdollar-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(4),
  .becup-member
    .member-invoice-tab-content
    > .table.invoice_table
    > .tbody
    > .tr
    > .td:nth-child(4) {
    margin-top: -16px;
  }
  /* member point row */
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr {
    height: 170px;
    border: 1px solid #e3e3e3;
    margin-bottom: 15px;
  }
  .becup-member .member-history > .table.member-point-history > .tbody > .tr,
  .becup-member .member-history > .table.sent-gift-history > .tbody > .tr,
  .becup-member .member-history > .table.receive-gift-history > .tbody > .tr {
    height: 130px;
    border: 1px solid #e3e3e3;
    margin-bottom: 15px;
  }
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td,
  .becup-member
    .member-history
    > .table.member-point-history
    > .tbody
    > .tr
    > .td,
  .becup-member .member-history > .table.sent-gift-history > .tbody > .tr > .td,
  .becup-member
    .member-history
    > .table.receive-gift-history
    > .tbody
    > .tr
    > .td {
    white-space: nowrap;
  }
  /* category */
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td:nth-child(1),
  .becup-member
    .member-history
    > .table.member-point-history
    > .tbody
    > .tr
    > .td:nth-child(1),
  .becup-member
    .member-history
    > .table.sent-gift-history
    > .tbody
    > .tr
    > .td:nth-child(1),
  .becup-member
    .member-history
    > .table.receive-gift-history
    > .tbody
    > .tr
    > .td:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-weight: bold;
    color: #00a79d;
    font-size: 16px;
    border-bottom: 1px solid #f5f5f5 !important;
  }
  /* type */
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td:nth-child(2),
  .becup-member
    .member-history
    > .table.member-point-history
    > .tbody
    > .tr
    > .td:nth-child(2),
  .becup-member
    .member-history
    > .table.sent-gift-history
    > .tbody
    > .tr
    > .td:nth-child(2),
  .becup-member
    .member-history
    > .table.receive-gift-history
    > .tbody
    > .tr
    > .td:nth-child(2) {
    position: absolute;
    top: 30px;
    left: 0;
    width: 70%;
  }
  /* date */
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td:nth-child(3),
  .becup-member
    .member-history
    > .table.member-point-history
    > .tbody
    > .tr
    > .td:nth-child(3),
  .becup-member
    .member-history
    > .table.sent-gift-history
    > .tbody
    > .tr
    > .td:nth-child(3),
  .becup-member
    .member-history
    > .table.receive-gift-history
    > .tbody
    > .tr
    > .td:nth-child(3) {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    text-align: right;
  }
  /* valid date */
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td:nth-child(4),
  .becup-member
    .member-history
    > .table.member-point-history
    > .tbody
    > .tr
    > .td:nth-child(4),
  .becup-member
    .member-history
    > .table.sent-gift-history
    > .tbody
    > .tr
    > .td:nth-child(4),
  .becup-member
    .member-history
    > .table.receive-gift-history
    > .tbody
    > .tr
    > .td:nth-child(4) {
    position: absolute;
    top: 50px;
    left: 70%;
    width: 30%;
  }
  /* expire date */
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td:nth-child(5),
  .becup-member
    .member-history
    > .table.member-point-history
    > .tbody
    > .tr
    > .td:nth-child(5),
  .becup-member
    .member-history
    > .table.sent-gift-history
    > .tbody
    > .tr
    > .td:nth-child(5),
  .becup-member
    .member-history
    > .table.receive-gift-history
    > .tbody
    > .tr
    > .td:nth-child(5) {
    position: absolute;
    top: 70px;
    left: 70%;
    width: 30%;
  }
  /* invoice no */
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td:nth-child(6),
  .becup-member
    .member-history
    > .table.member-point-history
    > .tbody
    > .tr
    > .td:nth-child(6),
  .becup-member
    .member-history
    > .table.sent-gift-history
    > .tbody
    > .tr
    > .td:nth-child(6),
  .becup-member
    .member-history
    > .table.receive-gift-history
    > .tbody
    > .tr
    > .td:nth-child(6) {
    position: absolute;
    top: 50px;
    left: 0;
    width: 70%;
  }
  /* referee */
  /* 2019-1-8 - TK: hide for mobile */
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td:nth-child(7),
  .becup-member
    .member-history
    > .table.sent-gift-history
    > .tbody
    > .tr
    > .td:nth-child(7),
  .becup-member
    .member-history
    > .table.receive-gift-history
    > .tbody
    > .tr
    > .td:nth-child(7) {
    position: absolute;
    top: 90px;
    left: 0;
    width: 70%;
    text-align: left;
  }
  .becup-member
    .member-history
    > .table.member-point-history
    > .tbody
    > .tr
    > .td:nth-child(7) {
    display: none;
  }
  /* invoice total */
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td:nth-child(8),
  .becup-member
    .member-history
    > .table.sent-gift-history
    > .tbody
    > .tr
    > .td:nth-child(8),
  .becup-member
    .member-history
    > .table.receive-gift-history
    > .tbody
    > .tr
    > .td:nth-child(8) {
    position: absolute;
    top: 110px;
    left: 0;
    width: 70%;
    text-align: left;
  }
  .becup-member
    .member-history
    > .table.member-point-history
    > .tbody
    > .tr
    > .td:nth-child(8) {
    position: absolute;
    top: 50px;
    left: 70%;
    width: 30%;
    text-align: left;
  }
  /* gain */
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td:nth-child(9),
  .becup-member
    .member-history
    > .table.member-point-history
    > .tbody
    > .tr
    > .td:nth-child(9),
  .becup-member
    .member-history
    > .table.sent-gift-history
    > .tbody
    > .tr
    > .td:nth-child(9),
  .becup-member
    .member-history
    > .table.receive-gift-history
    > .tbody
    > .tr
    > .td:nth-child(9) {
    position: absolute;
    top: 30px;
    left: 70%;
    width: 30%;
    text-align: left;
  }
  /* grand total */
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td:nth-child(10),
  .becup-member
    .member-history
    > .table.member-point-history
    > .tbody
    > .tr
    > .td:nth-child(10),
  .becup-member
    .member-history
    > .table.sent-gift-history
    > .tbody
    > .tr
    > .td:nth-child(10),
  .becup-member
    .member-history
    > .table.receive-gift-history
    > .tbody
    > .tr
    > .td:nth-child(10) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-weight: bold;
    color: #ea5222;
    font-size: 16px;
    text-align: right;
    border-top: 1px solid #f5f5f5 !important;
  }
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td:nth-child(10)
    > span,
  .becup-member
    .member-history
    > .table.member-point-history
    > .tbody
    > .tr
    > .td:nth-child(10)
    > span {
    font-size: 12px;
    color: #555;
    float: left;
  }
  /* remark */
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td:nth-child(11),
  .becup-member
    .member-history
    > .table.member-point-history
    > .tbody
    > .tr
    > .td:nth-child(11),
  .becup-member
    .member-history
    > .table.sent-gift-history
    > .tbody
    > .tr
    > .td:nth-child(11),
  .becup-member
    .member-history
    > .table.receive-gift-history
    > .tbody
    > .tr
    > .td:nth-child(11) {
    position: absolute;
    top: 70px;
    left: 0;
    width: 50%;
  }
  .becup-member
    .member-history
    > .table.referral-cashdollar-history
    > .tbody
    > .tr
    > .td:nth-child(12),
  .becup-member
    .member-history
    > .table.sent-gift-history
    > .tbody
    > .tr
    > .td:nth-child(12),
  .becup-member
    .member-history
    > .table.receive-gift-history
    > .tbody
    > .tr
    > .td:nth-child(12) {
    position: absolute;
    top: 50px;
    left: 70%;
    width: 30%;
  }
  .becup-member .product-tab > ul {
    margin-left: 0;
    margin-right: 0;
  }
  .becup-member .product-tab > ul > li > a {
    padding: 10px 10px;
    font-size: 12px;
  }
  .becup-member .product-tab > .tab-content {
    padding: 0 15px;
  }
  /* 2019-2-12 - TK: cash out history */
  /* cash out row */
  .becup-member .member-history > .table.cash-out-history > .tbody > .tr {
    height: 130px;
    border: 1px solid #e3e3e3;
    margin-bottom: 15px;
  }
  /* application no */
  .becup-member
    .member-history
    > .table.cash-out-history
    > .tbody
    > .tr
    > .td:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-weight: bold;
    color: #00a79d;
    font-size: 16px;
    border-bottom: 1px solid #f5f5f5 !important;
  }
  /* application date */
  .becup-member
    .member-history
    > .table.cash-out-history
    > .tbody
    > .tr
    > .td:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    text-align: right;
  }
  /* cash out amount */
  .becup-member
    .member-history
    > .table.cash-out-history
    > .tbody
    > .tr
    > .td:nth-child(3) {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    text-align: left;
  }
  /* actual amount */
  .becup-member
    .member-history
    > .table.cash-out-history
    > .tbody
    > .tr
    > .td:nth-child(4) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-weight: bold;
    color: #ea5222;
    font-size: 16px;
    text-align: right;
    border-top: 1px solid #f5f5f5 !important;
  }
  .becup-member
    .member-history
    > .table.cash-out-history
    > .tbody
    > .tr
    > .td:nth-child(4)
    > span {
    font-size: 12px;
    color: #555;
    float: left;
  }
  /* approval status */
  .becup-member
    .member-history
    > .table.cash-out-history
    > .tbody
    > .tr
    > .td:nth-child(5) {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
  }
  /* remark */
  .becup-member
    .member-history
    > .table.cash-out-history
    > .tbody
    > .tr
    > .td:nth-child(6) {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
  }
  /* view detail */
  .becup-member
    .member-history
    > .table.cash-out-history
    > .tbody
    > .tr
    > .td:nth-child(7) {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    margin-top: -20px;
    font-size: 20px;
  }
}
/* 2018-12-31 - TK: avoid body scolling when sidr opened */
/* 2020-11-28 - TK: G said desktop allow scroll...so add media query for only mobile */
@media only screen and (max-width: 768px) {
  body.sidr-open {
    overflow-y: hidden;
    height: 100vh;
  }
}
/* 2018-12-31 - TK: gridstack fixes */
.grid-stack.grid-stack-one-column-mode > .grid-stack-item {
  margin-bottom: 0;
}
.seven_address {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  color: #888888;
  border-radius: 3px;
  border: 1px solid #dddddd;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  font-size: 14px;
  padding: 6px 12px;
}
/* 20190108 winston add css for validator of seven address*/
.seven_address_reminder {
  font-size: 14px;
  color: #ff0000;
  margin: 0px;
  display: none;
}
/* 2019-1-4 - TK: css for jolli cart */
#jolli-cart {
  display: flex;
}
#jolli-cart > .cart-nav {
  flex: 0 0 300px;
  /* background-color:#f00; */
}
#jolli-cart > .cart-nav .breadcrumb {
  color: #bbb;
  border: none;
  padding: 0;
}
#jolli-cart > .cart-nav .breadcrumb > a {
  color: #999;
}
#jolli-cart > .cart-nav .greeting {
  color: #0086b6;
  margin: 40px 0 30px;
  font-size: 30px;
  font-weight: 200;
}
#jolli-cart > .cart-nav .nav-steps > li {
  margin-bottom: 20px;
  line-height: 24px;
  font-size: 12px;
  position: relative;
}
#jolli-cart > .cart-nav .nav-steps > li > span {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #0086b6;
  color: #fff;
  line-height: 24px;
  text-align: center;
  padding-top: 1px;
  padding-left: 2px;
  margin-right: 15px;
}
#jolli-cart > .cart-nav .nav-steps > li.active::before {
  content: "";
  background-color: #dec7ca;
  width: 24px;
  height: 3px;
  display: block;
  position: absolute;
  top: 10px;
  left: -30px;
}
#jolli-cart > .cart-detail {
  flex: 1 1 auto;
}
#jolli-cart > .cart-detail > .table-title {
  border-top: 1px solid #e1e1e1;
  border-right: 1px solid #e1e1e1;
  border-left: 1px solid #e1e1e1;
  background-color: #eee;
  padding: 0 40px;
  line-height: 60px;
}
#jolli-cart > .cart-detail > .table {
  width: 100%;
  border: 1px solid #e1e1e1;
  display: table;
}
#jolli-cart > .cart-detail > .table .thead {
  display: table-header-group;
}
#jolli-cart > .cart-detail > .table .thead .tr {
  display: table-row;
}
#jolli-cart > .cart-detail > .table .thead .th {
  line-height: 35px;
  padding: 0 15px;
  font-weight: normal;
  display: table-cell;
}
#jolli-cart > .cart-detail > .table .thead .th:not(:last-child) {
  border-right: 1px solid #e1e1e1;
}
#jolli-cart > .cart-detail > .table .tbody {
  display: table-row-group;
}
#jolli-cart > .cart-detail > .table .tbody .tr {
  display: table-row;
}
/* 2019-1-18 jaydon: jolli cart padding less */
#jolli-cart > .cart-detail > .table .tbody .td {
  padding: 1px 15px;
  font-weight: normal;
  display: table-cell;
  vertical-align: top;
  border-top: 1px solid #e1e1e1;
}
#jolli-cart > .cart-detail > .table .tbody .td:not(:last-child) {
  border-right: 1px solid #e1e1e1;
}
#jolli-cart > .cart-detail > .table .tfoot {
  display: table-footer-group;
}
#jolli-cart > .cart-detail > .table .tfoot .tr {
  display: table-row;
}
/* 2019-1-18 jaydon: jolli cart padding less */
#jolli-cart > .cart-detail > .table .tfoot .td {
  padding: 1px 15px;
  font-weight: normal;
  display: table-cell;
  border-top: 1px solid #e1e1e1;
}
#jolli-cart > .cart-detail > .table .tfoot .td:not(:last-child) {
  border-right: 1px solid #e1e1e1;
}
/* 2019-1-17 jaydon: jolli cart in checkout */
#jolli-cart .cart-detail > .table .delivery-method-th {
  width: 40%;
}
#jolli-cart .cart-detail > .table.full-input-table .td {
  padding: 0;
  vertical-align: middle;
  text-align: center;
}
#jolli-cart .cart-detail > .table.full-input-table .form-group {
  margin-bottom: 0;
}
#jolli-cart .cart-detail > .table.full-input-table input {
  margin: 0;
  border: 0;
  width: 100%;
  padding: 0 10px;
}
#jolli-cart .cart-detail > .table.full-input-table .shipping-mobile {
  padding-left: 50px;
}
#jolli-cart .cart-detail > .table .td.text-left {
  text-align: left;
}
#jolli-cart > .cart-detail > .table .tfoot .td.colspan-2 {
  border-right: 0;
}
#jolli-cart > .cart-detail .grand-total {
  font-size: 18px;
}
#jolli-cart > .cart-detail .delivery-total.deleted {
  text-decoration: line-through;
}
#jolli-cart > .cart-detail .cash-dollar-field {
  width: 100%;
}

/* 2019-1-30 jaydon: jolli cart new ui */
#jolli-cart > .cart-detail .table {
  border-collapse: collapse;
}
#jolli-cart > .cart-detail .table .table-tr {
  display: table-row;
}
#jolli-cart > .cart-detail .table .table-th {
  display: table-cell;
  border: 0.5px solid #e1e1e1;
  width: 15%;
}
#jolli-cart > .cart-detail .table .table-td {
  display: table-cell;
}
#jolli-cart > .cart-detail .table .sub-table {
  display: table;
  width: 100%;
}
#jolli-cart > .cart-detail .table .sub-table-tr {
  display: table-row;
}
#jolli-cart > .cart-detail .table .sub-table-td {
  display: table-cell;
  width: 15%;
  border: 1px solid #e1e1e1;
  text-align: center;
  vertical-align: middle;
}
#jolli-cart > .cart-detail .table .qty-td {
  padding-left: 10px;
  padding-right: 10px;
}
#jolli-cart > .cart-detail .table .qty-td button {
  background-color: #b9c2b7;
}
#jolli-cart > .cart-detail .table .coupon-td {
  padding: 10px 10px 0 10px;
}
#jolli-cart > .cart-detail .table .coupon-td .input-group {
  margin-bottom: 10px;
}
#jolli-cart > .cart-detail .table .coupon-td input {
  height: 30px;
}
#jolli-cart > .cart-detail .table .coupon-td button {
  background-color: #b9c2b7;
  border-radius: 0;
  height: 30px;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 5px 10px 5px 10px;
}
#jolli-cart > .cart-detail .table .tfooter .sub-table-td {
  padding: 15px 30px;
}
#jolli-cart > .cart-detail .table .sub-table-td:first-child,
#jolli-cart > .cart-detail .table .table-th:first-child {
  width: 20%;
}
#jolli-cart > .cart-detail .table .sub-table-td:first-child,
#jolli-cart > .cart-detail .table .table-th:first-child {
  width: 20%;
}
#jolli-cart > .cart-detail .table .sub-table-td:nth-child(5),
#jolli-cart > .cart-detail .table .table-th:nth-child(5) {
  width: 25%;
}
#jolli-cart > .cart-detail .table .sub-table-td:nth-child(5),
#jolli-cart > .cart-detail .table .table-th:nth-child(5) {
  width: 25%;
}
#jolli-cart > .cart-detail .table .sub-table-td:last-child,
#jolli-cart > .cart-detail .table .table-th:last-child {
  width: 10%;
}
#jolli-cart > .cart-detail .table .sub-table-td:last-child,
#jolli-cart > .cart-detail .table .table-th:last-child {
  width: 10%;
}
#jolli-cart > .cart-detail .cart-control a,
#jolli-cart > .cart-detail .cart-control button {
  border-radius: 0;
  background-color: #008cb5;
  font-weight: 300;
  padding: 15px 15px;
  letter-spacing: 3px;
}
#jolli-cart > .cart-detail .tfooter .sub-table-td:first-child,
#jolli-cart > .cart-detail .tfooter .sub-table-td:last-child {
  width: 35%;
}
#jolli-cart > .cart-detail .tfooter .delivery-total,
#jolli-cart > .cart-detail .tfooter .delivery-title {
  color: #38b6ce;
}

@media only screen and (max-width: 768px) {
  #jolli-cart > .cart-nav {
    display: none;
  }
}
/* 20190111 winston bug fix IE css issue */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #becup-desk-member-mine
    > .member-profile
    > .member-redeem
    > .member-credit-bottom
    > .member-redeem-content
    > .convert-button-margin {
    margin-left: 1em !important;
  }
}
/* 2019-1-15 - TK: common class for product-detail mark price */
.common-mark-price {
  font-size: 0.8em;
  color: #666;
  text-decoration: line-through;
  margin-right: 10px;
  font-weight: normal;
}
/* 2019-1-29 - TK: build-to-order-modal css */
#build-to-order-modal .modal-dialog {
  margin-top: 30px !important;
}
#build-to-order-modal .product-detail {
  min-height: 0;
}
#build-to-order-modal .product-detail .product-title {
  margin-bottom: 10px;
}
#build-to-order-modal .product-detail .touch-spin {
  text-align: center;
}
#build-to-order-modal .label-upload-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px dashed #ccc;
  text-align: center;
}
#build-to-order-modal .label-upload-wrapper input[type="file"] {
  cursor: pointer;
  font-size: 200px !important;
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px !important;
  height: 200px !important;
}
#build-to-order-modal .label-upload-wrapper i.fa-image {
  display: block;
  margin: 25px 0 25px;
  font-size: 100px;
  color: #d8d8d8;
}
#build-to-order-modal .label-upload-wrapper img {
  margin: 10px auto;
  max-width: 180px;
  max-height: 140px;
  display: block;
}

#build-to-order-modal .label-upload-wrapper .btn {
  width: calc(100% - 20px);
  position: absolute;
  bottom: 10px;
  left: 10px;
}
#build-to-order-modal .label-croppie-wrapper {
  border: 1px dashed #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #fff;
}
#build-to-order-modal .label-croppie-wrapper .label-croppie {
  position: absolute;
  left: 0;
}
#build-to-order-modal .label-croppie-wrapper .watermark {
  position: absolute;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
#build-to-order-modal .preview-wrapper {
  width: 450px;
  height: 450px;
  position: relative;
}
/* 2019-2-12 - TK: css for table style form */
.common-table-form {
  width: 100%;
  display: table;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .common-table-form {
    display: block;
    padding-left: 0;
    padding-right: 0;
  }
}
.common-table-form > .tr {
  display: table-row;
}
.common-table-form > .tr > .th {
  display: table-cell;
  font-weight: 500;
  vertical-align: top;
  padding-top: 10px;
}
.common-table-form > .tr > .td {
  display: table-cell;
}
.common-table-form > .tr > .td .select2-container {
  width: 100% !important;
  margin-bottom: 10px;
}
.common-table-form > .tr > .td input[type="number"] {
  margin-bottom: 10px;
  color: #888888;
}
.common-table-form > .tr > .td .input-group input[type="number"] {
  margin-bottom: 0;
}
.common-table-form > .tr > .td .form-control[readonly],
.common-table-form > .tr > .td .form-control[disabled] {
  background-color: #f6f6f6;
}
.common-table-form > .tr > .td > .inline-group {
  display: flex;
}
.common-table-form > .tr > .td > .inline-group > span {
  line-height: 36px;
  padding: 0 5px;
  flex: 0 1 0;
}
.common-table-form > .tr > .td > .inline-group > input[data-flex-grow="3"] {
  flex: 3 1 0;
}
.common-table-form > .tr > .td > .inline-group > input[data-flex-grow="9"] {
  flex: 9 1 0;
}
/* 2019-2-13 - TK: include adminlte timeline css */
.timeline {
  position: relative;
  margin: 0 0 30px 0;
  padding: 0;
  list-style: none;
}
.timeline:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ddd;
  left: 31px;
  margin: 0;
  border-radius: 2px;
}
.timeline > li {
  position: relative;
  margin-right: 10px;
  margin-bottom: 15px;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li > .timeline-item {
  border: 1px solid #eee;
  border-radius: 10px;
  margin-top: 0;
  background: #fff;
  color: #444;
  margin-left: 60px;
  margin-right: 15px;
  padding: 0;
  position: relative;
}
.timeline > li > .timeline-item > .time {
  color: #999;
  float: right;
  padding: 10px;
  font-size: 12px;
}
.timeline > li > .timeline-item > .timeline-header {
  margin: 0;
  color: #555;
  border-bottom: 1px solid #eee;
  padding: 10px;
  font-size: 13px;
  line-height: 1.1;
}
.timeline > li > .timeline-item > .timeline-header > a {
  font-weight: 600;
}
.timeline > li > .timeline-item > .timeline-body,
.timeline > li > .timeline-item > .timeline-footer {
  padding: 10px;
  font-size: 12px;
}
.timeline > li > .fa,
.timeline > li > .glyphicon,
.timeline > li > .ion {
  width: 30px;
  height: 30px;
  font-size: 15px;
  line-height: 30px;
  position: absolute;
  color: #fff;
  background: #d2d6de;
  border-radius: 50%;
  text-align: center;
  left: 18px;
  top: 0;
}
.timeline > .time-label > span {
  font-weight: 500;
  padding: 5px 15px;
  display: inline-block;
  background-color: #bfc9ca;
  border-radius: 4px;
  color: #fff;
}
.timeline-inverse > li > .timeline-item {
  background: #f0f0f0;
  border: 1px solid #ddd;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.timeline-inverse > li > .timeline-item > .timeline-header {
  border-bottom-color: #ddd;
}

/* 2019-2-21 jaydon: ad popup */
/* 2020-6-3 - TK: FOJY remove fk buggy modal and use my own */
#ad-popup-modal .modal-content {
  background-color: #fff;
}
#ad-popup-modal .modal-body {
  padding: 10px;
}

/* add fitboxx modal */
#fitboxx-ad-popup-modal {
  position: fixed;
  bottom: 5%;
  left: 40px;
  z-index: 9999;
  width: 300px;
  padding: 0;
  background-color: #fff;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
}

#fitboxx-ad-popup-modal .modal-body {
  padding: 0px;
  position: relative;
}
#fitboxx-ad-popup-modal .modal-body .close-btn {
  font-size: 20px;
  position: absolute;
  cursor: pointer;
  top: 5px;
  right: 5px;
  z-index: 10;
}

/* 内部webbuilder样式重构 */
#fitboxx-ad-popup-modal #fitboxx-ad-popup-content .pc-component-text {
  left: 0;
  width: 100%;
  flex: 1;
}

#fitboxx-ad-popup-modal #fitboxx-ad-popup-content .pc-component-text p {
  margin: 0;
}

/* 2019-4-16 - TK: hide spin button for input[type=number] */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}
/* 2019-5-16 - TK: referral QR code for offline scanning */
.referral-qrcode {
  text-align: center;
}
.referral-qrcode img,
.referral-qrcode canvas {
  margin: 0 auto;
}
/* 2019-5-19 - TK: for language flag */
.lang-flag {
  background-image: url("./img/flags2x.png");
  width: 20px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  background-size: 5630px 15px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2 / 1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
  .lang-flag {
    background-size: 5630px 15px;
  }
}
.lang-flag.ZH_HK {
  background-position: -2171px 0px;
}
.lang-flag.EN_US {
  background-position: -2171px 0px;
}
.lang-flag.ZH_CN {
  background-position: -1049px 0px;
}
.lang-flag.ZH_TW {
  background-position: -5131px 0px;
}
.lang-flag.EN_SG {
  background-position: -4449px 0px;
}

/* 2019-5-31 kelvin: center items */
.center-item {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.overlay-right-item {
  text-align: center;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-10%, -50%);
}

.overlay-top-left-item {
  text-align: center;
  position: absolute;
  top: 25%;
  left: 0;
  transform: translate(10%, 0%);
}

.overlay-bottom-left-item {
  text-align: center;
  position: absolute;
  top: 75%;
  left: 0;
  transform: translate(10%, 0%);
}

.overlay-left-item {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(10%, -50%);
}

.overlay-box {
  background: white;
  opacity: 0.7;
  padding: 40px 20px;
  border-radius: 6px;
}

.overlay-box-full {
  background: black;
  opacity: 0.7;
  padding: 20px;
  width: 100%;
}

.overlay-box-2 {
  background: transparent;
  padding: 40px 60px;
}

.overlay-top-item {
  text-align: center;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.overlay-bottom-item {
  text-align: center;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.overlay-text-header {
  font-size: 30px;
}

@media only screen and (max-width: 768px) {
  .overlay-right-item,
  .overlay-top-left-item,
  .overlay-bottom-left-item,
  .overlay-top-item,
  .overlay-left-item,
  overlay-bottom-item,
  .center-item {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    right: unset;
    bottom: unset;
    transform: translate(-50%, -50%);
  }

  .overlay-text-header {
    font-size: 16px;
  }

  .footer-col {
    margin: 10px !important;
  }
}

.text-block-1 {
  min-height: 580px;
}

/* 2019-6-3 kelvin: footer-col */
.footer-col {
  margin: 25px 0;
}

.footer-col .footer-col-header {
  font-size: 1.2em;
  padding-left: 0px;
  font-weight: 700;
}

.footer-col li {
  line-height: 30px;
  padding-left: 5px;
}

.outline-btn {
  border: 1px solid !important;
}

@media (min-width: 769px) {
  .table {
    display: table;
    width: 100%;
  }
  .table-cell {
    display: table-cell;
    padding: 0 20px;
    vertical-align: middle;
  }
}

/* 2019-8-7 kelvin: line-style */
.line-style {
  margin-bottom: 50px;
  position: relative;
  float: none;
  border-bottom: 1px solid #e5e2e2;
  height: 10px;
}

.line-style h4 {
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  background-color: white;
  position: relative;
  display: table;
  margin: auto;
  margin-bottom: 10px;
  color: #666667;
  padding: 0 16px;
}

/* 2019-8-21 - TK: register from LayoutHelper now. so register css here */
#page-body-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 900;
}
#page-body-overlay i {
  font-size: 60px;
  position: absolute;
  top: 240px;
  left: 50%;
  margin-left: -30px;
  color: #eee;
}
/* 2019-10-9 - TK: css for payme */
.payme-process {
  padding: 0 24px;
  margin-top: -36px;
}
.payme-logo {
  max-width: 200px;
  max-height: 70px;
}
.payme-process h1 {
  margin-top: 24px;
  font-size: 20px;
}
.payme-process p {
  font-size: 14px;
  color: #767676;
}
.payme-process h3 {
  font-size: 16px;
}
.payme-tutor {
  margin-top: 12px;
  display: flex;
}
.payme-tutor li {
  float: left;
  flex: 0 1 33%;
  line-height: 30px;
  white-space: nowrap;
}
.payme-tutor li:not(last-child) {
  padding-right: 30px;
}
.payme-tutor li > span {
  display: inline-block;
  width: 30px;
  height: 30px;
  color: #fff;
  background-color: #767676;
  text-align: center;
  border-radius: 50%;
  margin-right: 16px;
}
#pay-code-canvas {
  width: 300px;
  height: 300px;
  margin: 16px auto;
  border: none;
}
.btn-payme {
  margin-top: 24px;
  background-color: #db0011 !important;
  border-radius: 21px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
/* 2020-1-21 - TK: css for mobile-preview */
#mobile-preview {
  width: 100%;
  height: 100vh;
  background-color: #fafafa;
  text-align: center;
}
#mobile-preview .mobile-preview-toolbar {
  height: 50px;
  background-color: #fff;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  line-height: 50px;
}
#mobile-preview .mobile-preview-toolbar .control {
  display: inline-block;
  width: auto;
  margin: 0 25px;
}
#mobile-preview .mobile-preview-toolbar .control.device-type {
  width: 180px;
}
#mobile-preview .mobile-preview-toolbar .control > * {
  display: inline-block;
  width: auto;
}
#mobile-preview .mobile-preview-toolbar .control > input[type="text"] {
  width: 100px;
  text-align: center;
}
#mobile-preview .mobile-preview-toolbar .control > span {
  margin: 0 10px;
}
#mobile-preview .mobile-preview-frame {
  border: 1px solid #dfdfe1;
  margin: 30px auto;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
}
#opacity-fb-send-to-messenger {
  padding-top: 40px;
}
/* 2020-2-24 - TK: hide chatbot when sidr cart opened */
body.sidr-open #fc_frame,
body.sidr-open #fb-root {
  display: none;
}

/* 2018-11-15 - TK: magic style sign-in */
#magic-sign-in-page {
  /* 2018-12-12 jaydon: no need top border */
  height: calc(100vh - 60px);
  display: flex;
}
#magic-sign-in-page .left-nav {
  flex: 1 1 44%;
  /* 2018-11-19 jaydon: use self config image no need backgorund-color	 */
  /* 	background-color:#FACF03; */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#magic-sign-in-page .right-form {
  flex: 1 1 56%;
  padding: 0 30px;
}
#magic-sign-in-page .right-form .container {
  width: 100% !important;
}
#magic-sign-in-page h2.block-title-2 {
  font-size: 32px;
  font-weight: 300;
  border: none;
  margin: 20px 0 40px;
}
#magic-sign-in-page h2.block-title-2::after {
  content: "";
  display: block;
  width: 96px;
  height: 4px;
  margin-top: 13px;
  background-color: #12ab98;
}
@media only screen and (max-width: 768px) {
  #magic-sign-in-page {
    height: auto;
    display: block;
  }
  #magic-sign-in-page .phone-register-nav {
    height: 80px;
  }
  #magic-sign-in-page .right-form {
    padding: 0 10px;
  }
  #magic-sign-in-page h2.block-title-2::after {
    width: 36px;
    margin: 13px auto 0;
  }
}
.slider .tooltip-inner,
.slider .border-top-color {
  background-color: #bbb !important;
}
/* 2020-3-11 - TK: make 50% width and align center for mobile with 1/12 width */
.grid-stack.grid-stack-one-column-mode
  > .grid-stack-item.gs-component-image[data-gs-width="1"],
.grid-stack.grid-stack-one-column-mode
  > .grid-stack-item.gs-component-image[data-gs-width="2"] {
  width: 50% !important;
  margin-left: 25% !important;
}
/* 2020-3-16 - TK: disable horizontal scrolling for image as banner */
.grid-stack.grid-stack-one-column-mode > .grid-stack-item.gs-component-image {
  overflow-x: hidden;
}
.serial-no-qrcode {
  margin: 10px;
}
.serial-no-qrcode > img {
  width: 120px;
}
#ajax-loader-progress {
  display: block;
  text-align: center;
  width: 0;
  height: 2px;
  background: #999;
  opacity: 0.5;
  transition: width 0.3s;
  position: fixed;
  top: 0;
  z-index: 10000;
  left: 0;
}
#page-body {
  min-height: 800px;
}
/* 2021-12-29 - TK: smaller min-height for mobile */
@media (max-width: 767px) {
  #page-body {
    min-height: 400px;
    padding-bottom: 65px;
  }
}
/* 2020-5-27 - TK: winston product-list loader css moved to here */
.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #000;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  margin: 0 auto;
}

.hint {
  font-size: 14px;
  color: #000;
  text-align: center;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 2020-6-3 - TK: put shared css here (before using /templates/becup/assets/css/style.css) */
@media only screen and (max-width: 768px) {
  .catTopBar {
    margin-bottom: 10px;
    border-bottom: 1px solid #e3e3e3;
    margin-top: 0 !important;
  }
  .pc-component-location .location-map-wrapper {
    height: 80vh !important;
  }
}
/* 2020-6-5 - TK: set add modal height so it would not be flipped when rendering layout */
#ad-popup-modal .modal-dialog .modal-content {
  box-shadow: none !important;
}
#ad-popup-modal .modal-dialog .modal-content .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 2025-2-19 - Niko: 应该设置body内，否则当使用'modal-header'时会出现异常滚动条 */
#ad-popup-modal .modal-dialog.modal-sm .modal-content .modal-body {
  max-height: calc(40vh - 100px);
}
#ad-popup-modal .modal-dialog.modal-md .modal-content .modal-body {
  max-height: calc(70vh - 100px);
}
#ad-popup-modal .modal-dialog.modal-lg .modal-content .modal-body {
  max-height: calc(100vh - 100px);
}
/* 2020-6-8 - TK: move shared product list css here */
.product-list-menu > .mobi-sort-by > ul > li > a > i {
  display: none;
}
.product-list-menu > .mobi-sort-by > ul > li > a.active > i {
  display: block;
}
/* 20200617 winston prevent fixed width height overflow problem */
.pc-component-text > .text-content iframe,
.pc-component-text > .text-content img {
  max-width: 100% !important;
  height: auto;
}

/* 2020-6-24 - TK: MagicProductDetailImage widget css */
.zoomThumb {
  text-align: center;
  margin-top: 10px;
}

.zoomThumb a {
  display: inline-block;
  width: 120px;
  margin-bottom: 10px;
  border: 2px solid #eee;
  display: inline-block;
  margin-right: 5px;
}

.zoomThumb a img {
  max-width: 100%;
  width: 116px;
  height: 116px;
  object-fit: contain;
}

.zoomImg {
  cursor: crosshair;
}
.product-detail .productImageZoom .zoomThumb {
  text-align: left;
}
#system-info {
  z-index: 999999991;
}

.posify-modal .modal-content {
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.251);
  border-radius: 12px;
  background-color: #fff;
  border: none;
}
.posify-modal .modal-header {
  background-color: transparent !important;
}

.posify-modal .modal-header .close {
  background-color: transparent;
  color: #1D1D1F;
  font-size: 36px;
  opacity: 1;
  right: 6px;
  top: 10px;
}
.posify-modal .modal-footer {
  background-color: transparent;
  text-align: center;
  border: none;
  padding-bottom: 30px;
}

.posify-modal .modal-title {
  display: none;
}

.posify-modal .modal-footer .btn-primary {
  background-color: #fff !important;
  color: #1D1D1F;
  border: 1px solid #999;
  border-radius: 8px;
  min-width: 144px;
  font-size: 16px;
}

@media (min-width: 768px) {
  .posify-modal .modal-sm {
      width: 400px;
  }
}
.font-line {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #ccc;
  line-height: 0.1em;
  margin: 30px 0 30px;
}
.font-line span {
  background: #fff;
  padding: 0 10px;
}
.facebook-button {
  background-color: #395794;
  color: #ffffff;
}
/*20200812 winston add LINE login*/
.line-button {
  background-color: #02b902;
  color: #ffffff;
}
.login-button {
  /*padding: 15px !important;*/
  padding: 6px 12px !important;
}
.login-button:hover {
  color: #d6d6d6 !important;
}
.login-icon {
  font-size: 26px;
  line-height: 20px;
  float: left;
}
#otp-trigger,
#forgot-password,
#desktop-login-toggle,
#desktop-register-toggle {
  color: #000;
  text-decoration: underline;
}
#show_hide_password > .input-group-addon {
  border: 0px;
  background-color: #ffffff;
  color: #454545;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  border: 1px solid #ddd;
}
#show_hide_password > .input-group-addon > a:focus,
#show_hide_password > .input-group-addon > a:hover {
  color: #454545;
}
#show_hide_password > input {
  border-right: 0px;
}
#otp-password-section {
  margin: 30px 0;
}
#reset-password,
#otp-modal {
  z-index: 1049;
}
#sign-in-forgot-password {
  color: #0676B2;
  text-decoration: underline;
}
@media only screen and (max-width: 768px) {
  .modal-dialog {
    width: auto !important;
  }
  .modal-dialog.modal-xs {
    max-width: 100% !important;
  }
}
/* 2020-7-6 - TK: booking detail modal css */
#booking-detail-modal .modal-header {
  margin-bottom: 0;
}
#booking-detail-modal .modal-body {
  height: 90vh;
  overflow: hidden;
  position: relative;
}
#booking-detail-modal .booking-section {
  border-top: 1px solid rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  padding: 10px 0;
}
#booking-detail-modal .booking-option {
  text-align: center;
  line-height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  margin-top: 10px;
  cursor: pointer;
}
#booking-detail-modal .booking-option:hover,
#booking-detail-modal .booking-option.selected {
  border-color: #9ae1ff;
  color: #2aa39e;
  background-color: #e8f7ff;
}
#booking-detail-modal .booking-option.disabled,
#booking-detail-modal .booking-option.disabled:hover {
  border-color: #ccc;
  color: #ccc;
  background-color: #fee;
  cursor:not-allowed;
}
#booking-detail-modal .range-calendar .months .cell.selected {
  background-color: #e8f7ff;
  box-shadow: inset 0 0 1px #9ae1ff;
}
#booking-detail-modal .range-calendar .months .cell.selected .date-formatted,
#booking-detail-modal
  .range-calendar
  .months
  .cell.selected
  .date-formatted
  .month-name {
  color: #2aa39e;
}
#booking-detail-modal .default-theme .range-bar {
  background-color: #e8f7ff !important;
}
#booking-detail-modal .default-theme .calendar .cell.selected {
  box-shadow: inset 0 0 1px #9ae1ff;
}
#booking-detail-modal .default-theme .calendar .cell.selected,
#booking-detail-modal .default-theme .calendar .cell.selected .day-number {
  color: #2aa39e !important;
}
#booking-detail-modal .modal-data {
  height: 100%;
}
#booking-detail-modal .booking-input {
  height: calc(100% - 100px);
  overflow-x: hidden;
  overflow-y: auto;
}
#booking-detail-modal .booking-summary {
  height: 100px;
  border-top: 1px solid rgba(0, 0, 0, 0.03);
  padding-top: 15px;
}
#booking-detail-modal .booking-summary .booking-price {
  font-size: 1.3em;
}
#booking-detail-modal .booking-summary .booking-price .lowlight {
  font-size: 0.6em;
  color: #888;
}
#booking-detail-modal .booking-summary .booking-time {
  font-size: 1em;
  color: #2aa39e;
  margin-bottom: 10px;
}
#booking-detail-modal .booking-summary .booking-equipment {
  padding-top: 5px;
}
#booking-detail-modal .booking-summary .booking-equipment i {
  color: #666;
  font-size: 1.2em;
  margin-right: 15px;
}
#booking-detail-modal .booking-summary .booking-equipment .inline-block {
  width: calc(100% - 35px);
}
#booking-detail-modal .booking-summary .booking-equipment .select2-container {
  width: 100%;
}
#booking-detail-modal .booking-summary .confirm-booking {
  padding-left: 28px;
  padding-right: 28px;
}
#booking-detail-modal .range-calendar .calendar .cell {
  padding: 10px 20px;
}
#booking-detail-modal .range-calendar {
  padding: 0;
}
#booking-detail-modal .time-slot-container {
}
@media only screen and (max-width: 768px) {
	#booking-detail-modal .booking-input {
		height: calc(100% - 200px);
  }
	#booking-detail-modal .booking-summary {
		height:200px;
	}
}

#boss-content {
  position: relative;
}
/* 2020-7-20 - TK: G said hide option instead of disabled */
.select2-container--default .select2-results__option[aria-disabled="true"] {
  display: none;
}
.pc-component-slideshow-full-page {
  z-index: -1 !important;
}
.parsley-pattern {
  line-height: 14px;
}
/* 2020-7-29 - TK: make sure datepicker readonly still white in background */
.form-control.datepicker[readonly] {
  background-color: #fff;
}
.pc-component-text > .text-content img {
  max-width: 100% !important;
  height: auto !important;
}
/* 20200806 winston add announcement bar */
.announcement-bar {
  background-color: #6894ae;
  text-align: center;
  position: relative;
  z-index: 10;
}
.announcement-bar-message {
  padding: var(--announcement-bar-message-padding-horizontal, 10px) 55px;
  margin: 0;
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}
.announcement-bar-message > p {
  margin: 0;
}
.product-detail .jssocials-share-link {
  color: #ffffff !important;
  border-color: unset !important;
}
@media only screen and (max-width: 768px) {
  .mobi-right-button {
    display: block;
    position: relative;
    top: 12px;
    font-size: 1.6em;
    color: #3a3a3a;
    width: 30px;
    text-align: center;
    right: 10px;
    float: right;
  }
  .announcement-bar-message {
    padding: 10px;
  }
}
/* 2020-9-22 - TK: put generic css for product list here */
@media only screen and (max-width: 768px) {
  .product-list-menu {
    display: flex;
    width: calc(100% + 30px);
    margin-left: -15px;
  }
  .product-list-menu > .mobi-sort-by {
    text-align: center;
    flex: 1 1 auto;
  }
  .product-list-menu > .mobi-sort-by:not(:last-child) {
    border-right: 1px solid #e3e3e3;
  }
  .product-list-menu > .mobi-sort-by .icon {
    display: inline-block;
    line-height: 30px;
    color: #e8477f;
    font-size: 20px;
    margin-right: 10px;
    vertical-align: middle;
  }
  .product-list-menu > .mobi-sort-by .icon > i {
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #e8477f;
  }
  .product-list-menu > .mobi-sort-by .text {
    display: inline-block;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    vertical-align: middle;
  }
  .product-list-menu > .mobi-sort-by .dropdown-menu {
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 0;
    background-color: #eceaea;
    border-color: #dfdfdf;
    font-size: 14px;
  }
  .product-list-menu > .mobi-sort-by .dropdown-menu > li > a {
    color: #333;
    line-height: 25px;
  }
  .product-list-menu > .mobi-sort-by .dropdown-menu > li > a > i {
    color: #e8477f;
    line-height: inherit;
    display: none;
  }
  .product-list-menu > .mobi-sort-by .dropdown-menu > li > a.active > i {
    display: block;
  }
  .product-list-menu > .mobi-sort-by .dropdown-menu > li > a:hover {
    background-color: #f6f6f6;
  }
  .product-list-menu > .mobi-sort-by .dropdown-menu:after {
    position: absolute;
    top: -8px;
    left: 10px;
    display: inline-block;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #eceaea;
    border-left: 8px solid transparent;
    content: "";
  }
  .product-list-breadcrumb {
    width: calc(100% + 30px);
    margin-left: -15px;
    line-height: normal;
    text-align: center;
    font-weight: 500;
    padding: 10px;
    border-bottom: 1px solid #e3e3e3;
    background-color: #f6f6f6;
    font-size: 1.1em;
  }
}
.popup-bundle-dialog {
  margin-top: 15px !important;
  max-height: calc(100% - 30px);
}
/* 2020-12-3 - TK: fix plugin z-index when open from modal */
body.modal-open .ui-datepicker,
body.modal-open .select2-dropdown {
  z-index: 99999 !important;
}
/* 2020-12-14 - TK: input-group with intl-tel */
.input-group {
  width: 100%;
}
.input-group .intl-tel-input {
  display: table-cell;
}
.input-group .input-group-btn {
  vertical-align: top;
}
.ui-datepicker {
  z-index: 9999 !important;
}
@media only screen and (max-width: 768px) {
  /*20201221 winston fix all themes pagination button ui problem */
  .pagination {
    margin: 20px 15px !important;
  }
}

/* 2021-3-1 - TK: put form helper css here...*/
.fileinput-upload-button,
.fileinput-remove-button {
  display: none;
}
.fileinput-remove {
  display: none;
}
.file-preview-frame {
  position: relative;
}
.file-input-widget .file-preview {
  padding: 0;
}
.file-input-widget.fileinput-sm .file-preview .file-drop-zone {
  margin: 0;
}
.file-input-widget.fileinput-sm
  .file-preview
  .file-drop-zone
  .file-drop-zone-title {
}
.file-input-widget.fileinput-sm .file-drop-zone-title {
  font-size: 20px;
  padding: 15px 10px;
}
.file-input-widget .file-preview-thumbnails img {
  max-width: 100%;
}
.file-input-widget .file-thumbnail-footer {
  position: absolute;
  top: -12px;
  right: -8px;
}
.file-input-widget .file-thumbnail-footer .file-caption-name {
  display: none;
}
.file-input-widget .file-thumbnail-footer .kv-file-remove {
  padding: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border-color: #a94442;
  background-color: #fff;
}
.file-input-widget .file-thumbnail-footer .kv-file-remove i {
  font-size: 9px;
  top: -1px;
}
.file-input-widget .fileinput-remove-button,
.file-input-widget .fileinput-upload-button {
  display: none;
}
.parsley-errors-list {
  color: #c00;
}
.option-button {
  cursor: pointer;
  float: left;
  padding: 5px 10px;
  font-size: 12px;
  color: #555;
  border: 1px dashed #555;
  border-radius: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}
.option-button.selected {
  color: var(--variants-selected-color);
  border: 1px solid var(--variants-selected-color);
  animation: fadeIn ease 0.5s;
  -webkit-animation: fadeIn ease 0.5s;
  -moz-animation: fadeIn ease 0.5s;
  -o-animation: fadeIn ease 0.5s;
  -ms-animation: fadeIn ease 0.5s;
}
.product-variants {
  margin-bottom: 10px;
}
/* 2021-3-16 - TK: copy knob css for referral org chart */
.kpi-container {
  display: flex;
  flex-wrap: wrap;
}
.knob {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 44px;
  text-align: center;
  font-weight: 500;
  border: 7px solid #000;
  position: relative;
  font-size: 16px;
  margin: 10px 30px 40px 30px;
  cursor: pointer;
  user-select: none;
}
.knob.knob-orange {
  border-color: rgba(255, 167, 2, 1);
}
.knob.knob-yellow {
  border-color: rgba(251, 207, 52, 1);
}
.knob.knob-green {
  border-color: rgba(99, 158, 141, 1);
}
.knob.knob-blue {
  border-color: rgba(120, 181, 205, 1);
}
.knob.knob-purple {
  border-color: rgba(192, 146, 192, 1);
}
.knob.knob-brown {
  border-color: rgba(175, 123, 88, 1);
}
.knob.knob-black {
  border-color: rgba(0, 0, 0, 1);
}
.knob.knob-red {
  border-color: rgba(223, 74, 50, 1);
}
.knob .title {
  position: absolute;
  bottom: -47px;
  left: -30px;
  font-size: 13px;
  font-weight: normal;
  width: calc(100% + 60px);
  white-space: nowrap;
}
.knob:not(.active) .count {
  opacity: 0.3;
}
.knob.knob-orange:not(.active) {
  border-color: rgba(255, 167, 2, 0.3);
}
.knob.knob-yellow:not(.active) {
  border-color: rgba(251, 207, 52, 0.3);
}
.knob.knob-green:not(.active) {
  border-color: rgba(99, 158, 141, 0.3);
}
.knob.knob-blue:not(.active) {
  border-color: rgba(120, 181, 205, 0.3);
}
.knob.knob-purple:not(.active) {
  border-color: rgba(192, 146, 192, 0.3);
}
.knob.knob-brown:not(.active) {
  border-color: rgba(175, 123, 88, 0.3);
}
.knob.knob-black:not(.active) {
  border-color: rgba(0, 0, 0, 0.3);
}
.knob.knob-red:not(.active) {
  border-color: rgba(223, 74, 50, 0.3);
}
.knob .title > a {
  position: absolute;
  right: 0;
  bottom: 0;
  /* display:none; */
}
.knob:hover .title > a {
  display: block;
}
.knob-square {
  width: 180px;
  height: 30px;
  border: 1px solid #d7d7db;
  margin-right: 15px;
  margin-bottom: 15px;
  user-select: none;
  line-height: 30px;
  background-color: #f2f2f4;
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
}
.knob-square .count {
  float: left;
  width: 60px;
  height: 30px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  overflow: hidden;
  font-size: 10px;
}
.knob-square .title {
  margin-left: 60px;
  text-align: center;
}
.knob-square:not(.active) .count {
  opacity: 0.3;
}
.knob-square.knob-square-orange .count {
  background-color: rgba(255, 167, 2, 1);
}
.knob-square.knob-square-yellow .count {
  background-color: rgba(251, 207, 52, 1);
}
.knob-square.knob-square-green .count {
  background-color: rgba(99, 158, 141, 1);
}
.knob-square.knob-square-blue .count {
  background-color: rgba(120, 181, 205, 1);
}
.knob-square.knob-square-purple .count {
  background-color: rgba(192, 146, 192, 1);
}
.knob-square.knob-square-brown .count {
  background-color: rgba(175, 123, 88, 1);
}
.knob-square.knob-square-black .count {
  background-color: rgba(0, 0, 0, 1);
}
.knob-square.knob-square-red .count {
  background-color: rgba(223, 74, 50, 1);
}
/* 2021-3-16 - TK: add css for hometasty cash out enhancement */
.fixed-width-120 {
  width: 120px !important;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* 2021-3-25 - TK: referral-share for hometasty */
.referral-share .share-qr-link {
}
.referral-share .share-qr-link > img {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 200px;
  margin: 0 auto;
}
.becup-member .nav-tabs > li.active > a,
.becup-member .nav-tabs > li.active > a:hover,
.becup-member .nav-tabs > li.active > a:focus,
.becup-member .nav-tabs > li:hover > a {
  background-color: #bfc9ca !important;
}
/* 2021-9-8 - TK: form captcha */
.captcha-canvas > canvas {
  width: 200px;
  height: 60px;
}
.captcha-canvas > .a-refresh {
  cursor: pointer;
  color: #0474e8;
  margin-left: 10px;
}
.captcha-canvas > .a-refresh i {
  margin-right: 5px;
}
/* 2021-10-15 - TK: add use cookie footer */
#accept-cookies-modal {
  background-color: #555;
  color: #fff;
  padding: 20px;
  position: fixed;
  width: 100%;
  z-index: 9999999;
  font-size: 16px;
  bottom: 0;
  left: 0;
  opacity: 0;
  display: none;
}
#accept-cookies-modal.show {
  -webkit-transition: opacity 0.5s ease-in;
  -moz-transition: opacity 0.5s ease-in;
  -o-transition: opacity 0.5s ease-in;
  opacity: 1;
  display: block;
}
body.sidr-open #accept-cookies-modal {
  display: none;
}
/* 2021-11-3 - TK: #24674 too many variant... */
/* 2022-2-4 - TK: #25902 not work by group... */
@media only screen and (max-width: 768px) {
  #product-detail-action-panel {
    max-height: 50%;
    overflow-y: auto;
  }
}
/* 2021-11-30 - TK: #24850 make it smaller */
#product-detail-action-panel .row .col-xs-9 {
  padding-left: 0;
  padding-right: 0;
}
.intl-tel-input .country-list {
  z-index: 9999;
}
/* 2022-2-22 - TK: refund order timeline */
.refund-process-timeline {
  margin: 20px auto 60px;
  display: flex;
  max-width: 600px;
}
.refund-process-timeline .check-point {
  flex: 1 1 auto;
  position: relative;
  color: #777;
  font-weight: bold;
  text-align: center;
}
.refund-process-timeline .check-point::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #2baafd;
  background-color: #fff;
}
.refund-process-timeline .check-point.active {
  color: #2baafd;
}
.refund-process-timeline .check-point.active::after {
  background-color: #2baafd;
}
.refund-process-timeline .check-point:not(:last-child)::before {
  content: "";
  position: absolute;
  bottom: -21px;
  width: 100%;
  border-top: 2px solid #2baafd;
  left: 50%;
  margin-left: -10px;
}
/* 2022-5-19 jaydon: arrival notice modal */
#arrival-subscribe-modal .modal-dialog {
  overflow: visible;
}
@media only screen and (max-width: 768px) {
  #arrival-subscribe-modal .modal-dialog {
    margin-left: 10px;
    margin-right: 10px;
  }
}
/* 2022-9-7 - TK: common map css */
.baidu-map-info {
  color: #000;
}

/* 2018-3-16 - TK: checkout css */
.list-address .list-group-item {
  position: relative;
  background-color: #fafafa;
}
.list-address .list-group-item > span {
  vertical-align: middle;
  display: inline-block;
}
.list-address .list-group-item p {
  margin-bottom: 0;
}
.list-address .list-group-item .item-thumbnail {
  /* 2018-10-15 kelvin: make checkout payment icon larger */
  height: 44px;
}

/* 2023-6-9 - TK: modal class for 3chembio */
.modal-dialog.modal-full {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  max-width: none !important;
}
.modal-dialog.modal-full .modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}
.text-white {
  color: #fff !important;
}

/* 2023-7-2 - TK: shared member css */
.member-item-list > .item:first-child {
  /* border-top:10px solid #EFEFEF; */
  margin-top: 10px;
}
.member-item-list > .item {
  /* border-bottom: 10px solid #efefef; */
  box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.08);
  border-radius: 10px;

  margin-bottom: 10px;
  position: relative;
}
.member-item-list > .item.has-arrow {
  cursor: pointer;
}
.member-item-list > .item.has-arrow::after {
  content: "\f054";
  font: normal normal normal 14px/1 FontAwesome;
  position: absolute;
  position: absolute;
  line-height: 20px;
  font-size: 12px;
  top: 50%;
  margin-top: -10px;
  right: 16px;
}
.member-item-grid {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  padding-bottom: 10px;
}
.member-item-grid .item {
  flex: 0 1 auto;
  margin: 10px 10px 0 0;
}
@media only screen and (max-width: 768px) {
  .member-item-grid .item {
    width: calc(50% - 10px);
  }
}

/* 2023-8-4 - TK: add helper classes for flex display */
.flex-container {
	display:flex;
}
.flex-container.flex-end {
	justify-content:flex-end;
}
.flex-container.flex-wrap {
	flex-wrap:wrap;
}
.flex-container.vertical-center {
	align-items:center;
}
.flex-800 {
	flex:0 0 800px;
}
.flex-25p {
	flex:0 0 25%;
	width: 25%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.flex-full {
  flex:0 0 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.flex-fit {
	flex:1 1 auto;
}
.flex-auto {
	flex:0 1 auto;
}
.bs-grid {
	padding-left:15px;
	padding-right:15px;
}

/* 2023-12-3 - TK: 【ID1015554】 [顺丰mallsit][Desktop][1202]电话号码提示过贴输入框 */
.input-group .form-control {
	margin-bottom:10px  important;
}
.intl-tel-input .parsley-errors-list {
	display:table-cell;
	padding-top:10px;
}