:root {
/*    --font: Verdana, "Microsoft JhengHei", sans-serif; */
/*    --background-color: #5A9DB0; */
/*    --cover-background-color: rgba(90, 157, 176, 0.8); */
/*    --noti-background-color: rgba(90, 157, 176, 0.8); */
    --font: Helvetica, "Noto Sans TC";
    --background-color: #777e84;
    --cover-background-color: rgba(119, 126, 132, 1);
    --noti-background-color: rgba(127, 0, 25, 1);
    --status-cover-background-color: rgba(255, 255, 255, 0.9);
    --font-color: #F0F0F0;
    --scrollbar-width: 3px;
    --app-height: 100%;
    --toolbar-font-size: 2vmax;
    /* --combo-title-font-size: 3.0vh; */
    --combo-title-font-size: 2.4vh;
    --combo-content-font-size: 2.1vh;
    --combo-modifier-font-size: 2.1vh;

    --promo-title-font-size: 2.8vh;
    --promo-label-font-size: 2.1vh;
    --promo-content-font-size: 1.8vh;
    --promo-tblfreegift-font-size: 1.8vh;

    --promo-title-font-size: 2.8vh;
    --promo-label-font-size: 2.1vh;
    --promo-content-font-size: 1.8vh;
    --promo-tblfreegift-font-size: 1.8vh;

    --menu-top-background-color: #5080BB;
    --menu-ico-font-color-focus: #F08040;
    --dialog-color-g: #10A060;
    --dialog-color-b: #7DABE6;
    --dialog-color-r: #FF3430;

    --payment-title-font-size: 2.8vh;
    --payment-content-font-size: 2.1vh;
    --payment-table-background-color: #95B3D7;
    --payment-table-cell-background-color: #FFFFFF;
    --payment-table-cell-font-color: #000000;
    --payment-color-focus: #5A9DB080; /*PP230106*/

    --bbg-out-focus-opacity: 0.5;
    --bbg-out-focus-filter: none;
    --menu-ft-font-size: 2.2vmax;
    --menu-ft-background-color: rgba(90, 157, 176, 0.5);
    --menu-item-height: 30vmax;
    --menu-item-header-height: 4vmax;
    --menu-item-footer-height: 7vmax;
    --menu-item-font-size: 2.4vmax;
    /* --menu-item-border-radius: 0vmin; */
    --menu-item-border-radius: 2vmin;
    --menu-item-shadow: 0 0 4px 1px #C0C0C0;
    --item-menu-column: 2;

    --menu-item-info-font-color: #303080;
    --menu-item-info-background-color: #F5D37B;
    --menu-item-info-border-radius: 50%;
    --menu-item-info-shadow: 0 0 4px #303080;

    --summary-font-size: 2.6vmax;

    --btn-submit-background-color: #77933C;
    --btn-submit-font-color: #F0F0F0;
    --btn-back-background-color: #800000;
    --btn-back-font-color: #F0F0F0;
    --btn-pay-background-color: #77933C;
    --btn-pay-font-color: #F0F0F0;
    --btn-cancel-background-color: #800000;
    --btn-cancel-font-color: #F0F0F0;

    /* RC200724 */
    --body-color: rgb(247, 250, 252);
    --button-color: rgb(30, 166, 114);
    --accent-color: #0a721b;
    --link-color: #ffffff;
    --body-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 6px;
    --form-width: 400px;

    /* for tablet mode */
    --tablet-font: Verdana, "Microsoft JhengHei", sans-serif;
    --tablet-font-color: #F6F1DD;
    --tablet-menu-focus-font-color: #F08040;
    --tablet-font-shadow: -1px -1px 2px #3D3737, 1px -1px 2px #3D3737, -1px 1px 2px #3D3737, 1px 1px 2px #3D3737;
    --tablet-background-color: #3D3737;
    --tablet-background-cover: rgba(61, 55, 55, 0.8);
    --tablet-header-background: rgba(61, 55, 55, 0.8);
    --tablet-dialog-color: #8D8787;
    --tablet-dialog-cover: rgba(61, 55, 55, 0.8);
	/* --tablet-bbg-gap: 0vmin; */
    /* --tablet-menu-item-gap: 0vmin; */
    --tablet-bbg-gap: 3vw;
    --tablet-menu-item-gap: 3vw;
    --tablet-menu-item-height: 47vh;
    --tablet-menu-item-header-height: 4vmax;
    /* --tablet-menu-item-footer-height: 7vmax; */
    --tablet-menu-item-footer-height: calc(20vmax / var(--tablet-item-menu-column) + 4vmax);
    --tablet-menu-item-font-size: 2.4vmax;

    --tablet-company-font-size: 5vmin;
    --tablet-toolbar-font-size: 4vmin;
    --tablet-bbg-font-size: 4vmin;
    --tablet-summary-font-size: 3.6vmax;
	
	/* PP230524 for dynamic resize tablet */
    --tablet-item-menu-column: 4;
    --tablet-detail-item-menu-column: 2;
    --tablet-item-menu-width: 84vw;

    /* BYODOrderBannerText */
    --custom-order-banner-font-size: 100%;
    --custom-order-banner-color: inherit;
    /* BYODOrderFooterText */
    --custom-order-footer-font-size: 70%;
    --custom-order-footer-color: inherit;
}

@media only screen and (orientation:landscape) {
    .bodyBYOD {
        height: 100vmax !important;
        transform: rotate(90deg);
        margin-top: calc(50vmin - 50vmax) !important;
    }
}

/* scroll bar style */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: 0px;
}
::-webkit-scrollbar-track {
    /*background: #F0F0F0;*/ 
}
::-webkit-scrollbar-thumb {
    background: var(--background-color); 
}
@-moz-document url-prefix() {
div { scrollbar-width: thin; }
}

.hide {
	display: none !important;
    z-index: -1 !important;	/*PP240430*/
}
.fontRed {
    color: #FF0000 !important;
}
.AlignL {
    text-align: left !important;
}
.AlignR {
    text-align: right !important;
}
.AlignC {
    text-align: center !important;
}

/* overide jquery-ui datepicker */
.ui-datepicker {
    top: calc(50vmax - 32.5vmin) !important;
    width: 82vmin !important;
    left: 8vmin !important;
    font-size: 4vmin !important;
}
@media only screen and (orientation:landscape) {
    .ui-datepicker {
        top: 16vh !important;
        width: 50vw !important;
        left: 25vw !important;
        font-size: 2.4vw !important;
    }
}
.ui-datepicker td span, .ui-datepicker td a {
    padding: 2vmin !important;
}
.hasDatepicker > .ui-datepicker {
    width: 78vmin !important;
}

.bodyBYOD {
    font-family: var(--font);
    overflow: hidden;
    background-color: var(--background-color);
    color: var(--font-color);
    margin: 0;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.divBYOD {
    /*overflow: auto;*/
    overflow: hidden;
    margin: auto;
    width: 100%;
    max-width: 100vmin;
    height: 100%;
    position: relative;
    z-index: 0;
}

.divDialog {
    overflow: hidden;
    position: fixed;
    z-index: 900;
    text-align: center;
    vertical-align: middle;
    top: 0vmax;
    width: 100%;
    height: 100%;
    background: rgba(50, 50, 50, 0.8);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tblDialog {
    position: relative;
    box-shadow: 0 0 4vmin var(--background-color);
    background-color: #FFFFFF;
    margin: auto;
    padding: 5vmin 5vmin 5vmin 2vmin;
    width: 90vmin;
    min-height: 30vh;
    border-left: 4vmin solid #F08040;
    text-align: left;
}
.tblDialogRed {
    position: relative;
    box-shadow: 0 0 4vmin var(--background-color);
    background-color: #FFFFFF;
    margin: auto;
    padding: 5vmin 5vmin 5vmin 2vmin;
    width: 90vmin;
    min-height: 20vh;
    border-left: 4vmin solid #FF3430;
    text-align: center;
}
.tblDialog td, .tblDialogRed td, .ddlDialogSelect {
    padding: 1vmin;
    font-size: 5vmin;
    color: #404040;
}
.icoDialogWarning {
    display: block;
    padding-bottom: 4vmin;
    text-align: center;
    font-size: 240%;
    color: #FF3430;
}

.divLoading {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(219, 238, 244, 0.4);
    z-index: 900;
}
.divLoading div {
    position: absolute;
    box-sizing: border-box;
    display: block;
    width: 18vmin;
    height: 18vmin;
    margin: 1vmin;
    border: 1vmin solid var(--background-color);
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--background-color) transparent transparent transparent;
}
.divLoading div:nth-child(1) {
  animation-delay: -0.45s;
}
.divLoading div:nth-child(2) {
  animation-delay: -0.3s;
}
.divLoading div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.fraCRMHide {
	position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    max-height: 100%;
	z-index: -999;
	border: 0px;
}
.fraCRM {
	position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    max-height: 100%;
	z-index: 300;
	border: 0px;
}

.divMod {
    overflow: hidden;
    position: fixed;
    z-index: 500;
    text-align: center;
    vertical-align: middle;
    top: 0vmax;
    width: 100%;
    height: 100%;
    background: rgba(80, 80, 80, 0.8);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.divReview {
    overflow: hidden;
    position: fixed;
    z-index: 400;
    text-align: center;
    vertical-align: middle;
    top: 0vmax;
    width: 100%;
    height: 100%;
    background: rgba(80, 80, 80, 0.8);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tblReview {
    position: relative;
    margin: auto;
    padding: 0px;
    width: calc(100% - 10vmin);
    height: calc(100% - 10vmin);
    border-spacing: 2px;
}

.tblPopupImage {
    position: relative;
    margin: auto;
    padding: 0px;
    width: calc(100% - 10vmin);
    height: calc(100% - 10vmin);
    border-spacing: 0px;
    border-collapse: collapse;
}

/* RC200724*/
.divPaymentForm {
    position: absolute;
    top: 40%;
    padding-left: 3%;
    width: 93%;
}
/* Inputs */
.sr-payment-close {
    text-align:right;
    width: calc(var(--payment-title-font-size) + 4px);
    cursor: pointer;
}
.sr-submit-button {
    border: none;
    height: 5vh;
    padding: 1vmin 3vmin 1vmin 3vmin;
    font-family: Helvetica, "Helvetica Neue", sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    border-radius: var(--radius);
    background-color: #CB0000;
}
.sr-field-error {
  color: #fc6a6a;
  text-align: left;
  vertical-align: middle;
  font-size: 15px;
  line-height: 20px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.sr-card-element {
    padding-top: 12px;
}
.sr-input {
  border: 1px solid var(--gray-border);
  border-radius: var(--radius);
  padding: 5px 12px;
  height: 44px;
  width: 96%;
  transition: box-shadow 0.2s ease;
  background: white;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.sr-input:focus,
input[type="text"]:focus,
button:focus,
.focused {
  box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07),
    0 0 0 4px rgba(50, 151, 211, 0.3);
  outline: none;
  z-index: 9;
}
.sr-input::placeholder,
input[type="text"]::placeholder {
  color: var(--gray-light);
}
.sr-result {
  height: 44px;
  -webkit-transition: height 1s ease;
  -moz-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
  color: var(--font-color);
  overflow: auto;
}
.sr-result code {
  overflow: scroll;
}
.sr-result.expand {
  height: 350px;
}

.sr-combo-inputs-row {
  box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
  border-radius: 7px;
}

.tblNoBorder {
	width: 100%;
    height: 100%;
    border-collapse: collapse;
    padding: 0px;
}

.tblTablet {
	width: 100%;
    height: 100%;
    border-collapse: collapse;
    padding: 0px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--tablet-background-color);
}

.divFrontTop {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 16vmax;
    z-index: 2;
}
.divFrontTopCover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 16vmax;
    background-color: var(--cover-background-color);
    z-index: 1;
}
.divFrontStatus {
    position: absolute;
    top: 16vmax;
    left: 0px;
    width: 100%;
    height: calc(100% - 16vmax);
    background-color: var(--status-cover-background-color);
    z-index: 1;
}
/*.divFrontStatusCover {
    position: absolute;
    top: 16vmax;
    left: 0px;
    width: 100%;
    height: calc(100% - 16vmax);
    background-color: var(--status-cover-background-color);
    z-index: 1;
}*/
.divFrontMain {
    position: relative;
    width: 100%;
    height: calc(100% - 8vmax);
    max-height: calc(100% - 8vmax);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.divFrontMenu {
    width: 100%;
    height: 8vmax;
}

.divSum {
    background-color: #F6F5F0;
    height: calc(100% - 16vmax);
}
.divSumT {
    height: calc(100% - 16vmax);
    background-color: var(--tablet-background-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* .divOrderHeader, .divOrderFooter {
    position: relative;
    background-color: var(--background-color);
    width: calc(100% - 4vmin);
    height: 8vmax;
    padding: 0px 2vmin;
    font-size: 3.2vmax;
}
.divOrderHeaderT, .divOrderFooterT {
    position: relative;
    background-color: var(--tablet-header-background);
    width: calc(100% - 4vmin);
    height: 8vmax;
    padding: 0px 2vmin;
    font-size: var(--tablet-toolbar-font-size);
} PP230524 */

.divOrderHeader {
    position: relative;
    background-color: var(--background-color);
    width: calc(100% - 4vmin);
    height: 6vmax;
    padding: 1vmax 2vmin;
    font-size: var(--toolbar-font-size);
}
.divOrderFooter {
    position: relative;
    background-color: var(--background-color);
    width: calc(100% - 4vmin);
    height: 6vmax;
    padding: 1vmax 2vmin;
    font-size: var(--toolbar-font-size);
}
.divOrderHeaderT, .divOrderFooterT {
    position: relative;
    background-color: var(--tablet-header-background);
    width: calc(100% - 4vmin);
    height: 6vmax;
    padding: 1vmax 2vmin;
    font-size: var(--tablet-toolbar-font-size);
}

.divMemberHeader {
    position: relative;
    background-color: var(--background-color);
    width: 100%;
    height: 8vmax;
    padding: 0px 2vmin;
    text-align: center;
    font-size: 5vmin;
}

.divFrontShopPool {
    overflow: auto;
    position: absolute;
    top: 16vmax;
    left: 0px;
    width: calc(100% - 1vmin);
    height: calc(100% - 16vmax - 1vmin);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.5vmin;
}
.cellBBGMenu, .cellBBGMenuT, .cellPopupImage, .cellPopupImageT {
    position: relative;
    height: calc(100% - 16vmax - 1vmin);
    width: 100%;
    padding: 0px;
}
.cellBBGSideMenu {
    position: relative;
    height: calc(100% - 16vmax - 1vmin);
    width: 20vmin;
    padding: 0px;
}
.cellBBGSideMenuT {
    position: relative;
    height: calc(100% - 16vmax - var(--tablet-bbg-gap));
    width: 16vw;
    padding: 0px;
}

/* PP230524 Top BBG Bar */
.cellBBGTopMenu {
    position: relative;
    height: 7vmax;
    width: 100%;
    padding: 0px;
}

.cellBBGTopMenuT {
    position: relative;
    height: 6vh;
    width: 100%;
    padding: 0px;
}

.cellBBGTopMenu > div {
    overflow: auto;
    position: absolute;
    top: 0px;
    width: calc(100% - 1vmin);
    height: calc(100% - 1vmin);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    background-color: #F6F5F0;
    padding: 0.5vmin;
    flex-direction: column;
}
.cellBBGTopMenuT > div {
    overflow: auto;
    position: absolute;
    top: 0px;
    width: calc(100% - var(--tablet-bbg-gap));
    height: calc(100%);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    padding: 0px calc(var(--tablet-bbg-gap) / 2);
    flex-direction: column;
}
.cellBBGTopMenu > div > div {
    position: relative; 
    display: inherit;
    background-color: #FFFFFF;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    vertical-align: bottom; 
    width: 22vmin;
    height: 6vmax;
    box-shadow: 0.5vmin 0.5vmin 0.5vmin #808080;
    margin: 0.5vmin;
    opacity: var(--bbg-out-focus-opacity);
    filter: var(--bbg-out-focus-filter);
}
.cellBBGTopMenuT > div > div {
    position: relative; 
    display: inherit;
    background-color: var(--tablet-background-color);
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    vertical-align: bottom; 
    width: 22%;
    height: 6vh;
    border-radius: 3vmin;
    margin: calc(var(--tablet-bbg-gap) / 2);
    opacity: var(--bbg-out-focus-opacity);
    filter: var(--bbg-out-focus-filter);
}
.cellBBGTopMenu > div > div > span {
    overflow: hidden;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    background: rgba(255, 255, 255, 0.6);
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
	text-overflow: ellipsis;
    text-align: center;
    font-size: 2.8vmin;
    font-weight: bold;
    color: #303030;
    padding: 0.5vmin;
    margin: auto 0px 0px 0px;
    width: 100%;
}
.cellBBGTopMenuT > div > div > span {
    overflow: hidden;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    background: var(--tablet-background-cover);
    text-shadow: var(--tablet-font-shadow);
	text-overflow: ellipsis;
    text-align: center;
    font-size: calc(var(--tablet-bbg-font-size) * 0.8);
    font-weight: bold;
    color: var(--tablet-font-color);
    padding: 0.5vmin;
    margin: auto 0px 0px 0px;
    border-radius: 0 0 3vmin 3vmin;
    width: 100%;
}
.cellBBGTopMenu > div > div > .lblQU {
    position: absolute;
    top: 0px;
    right: 1vmin;
    background: rgba(200, 0, 0, 0.8);
    padding: 0.5vmin;
    -moz-border-radius: 0 0 1.5vmin 1.5vmin;
    -webkit-border-radius: 0 0 1.5vmin 1.5vmin;
    border-radius: 0 0 1.5vmin 1.5vmin;
    min-width: 3vmin;
    height: 3.5vmin;
    font-size: 2vmin;
    color: #FFFFFF;
    text-align: center;
}
.cellBBGTopMenuT > div > div > .lblQU {
    position: absolute;
    top: 0px;
    right: 3vmin;
    background: rgba(200, 0, 0, 0.8);
    padding: 0.5vmin;
    -moz-border-radius: 0 0 1.5vmin 1.5vmin;
    -webkit-border-radius: 0 0 1.5vmin 1.5vmin;
    border-radius: 0 0 1.5vmin 1.5vmin;
    min-width: 3vmin;
    height: 3vmin;
    font-size: 2vmin;
    color: #FFFFFF;
    text-align: center;
}
.cellBBGMenu > div, .cellBBGSideMenu > div {
    overflow: auto;
    position: absolute;
    top: 0px;
    width: calc(100% - 1vmin);
    height: calc(100% - 1vmin);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    background-color: #F0F0F0;
    padding: 0.5vmin;
}
.cellPopupImage > div {
    overflow: auto;
    position: absolute;
    top: 0px;
    width: calc(100% - 1vmin);
    height: calc(100% - 1vmin);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: stretch;
    background-color: #F0F0F0;
    padding: 0.5vmin;
}
.cellBBGMenuT > div, .cellBBGSideMenuT > div {
    overflow: auto;
    position: absolute;
    top: 0px;
    width: calc(100% - var(--tablet-bbg-gap));
    height: calc(100% - var(--tablet-bbg-gap));
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    padding: calc(var(--tablet-bbg-gap) / 2);
}
.cellPopupImageT > div {
    overflow: auto;
    position: absolute;
    top: 0px;
    width: calc(100% - 1vmin);
    height: calc(100% - 1vmin);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: stretch;
    padding: 0.5vmin;
}
.divFrontShopPool > div, .cellBBGMenu > div > div {
    position: relative; 
    display: inherit;
    background-color: #FFFFFF;
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat; 
    vertical-align: bottom; 
    width: 30vmin;
    height: 30%;
    box-shadow: 0.5vmin 0.5vmin 0.5vmin #808080;
    margin: 1vmin;
}
.cellBBGMenuT > div > div {
    position: relative; 
    display: inherit;
    background-color: var(--tablet-background-color);
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat; 
    vertical-align: bottom; 
    width: calc(20% - var(--tablet-bbg-gap));
    height: 40%;
    border-radius: 3vmin;
    margin: calc(var(--tablet-bbg-gap) / 2);
}
@media only screen and (orientation:portrait) {
    .cellBBGMenuT > div > div {
        width: calc(25% - var(--tablet-bbg-gap));
        height: 30%;
    }
}
.divFrontShopPool > div > span, .cellBBGMenu > div > div > span {
    overflow: hidden;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    background: rgba(255, 255, 255, 0.6);
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
	text-overflow: ellipsis;
    text-align: center;
    font-size: 4vmin;
    color: #303030;
    padding: 1vmin;
    margin: auto 0px 0px 0px;
    width: 100%;
}
.cellBBGMenuT > div > div > span {
    overflow: hidden;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    background: var(--tablet-background-cover);
    text-shadow: var(--tablet-font-shadow);
	text-overflow: ellipsis;
    text-align: center;
    font-size: var(--tablet-bbg-font-size);
    color: var(--tablet-font-color);
    padding: 1vmin;
    margin: auto 0px 0px 0px;
    border-radius: 0 0 3vmin 3vmin;
    width: 100%;
}
.divFrontShopPool > div > .divClosed {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100% - 7vmin);
    background-color: rgba(220, 220, 220, 0.6);
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
    color: #C03030;
    font-weight: bold;
    font-size: 120%;
}
.cellBBGMenu > div > div > .lblQU {
    position: absolute;
    top: 0px;
    right: 1vmin;
    background: rgba(200, 0, 0, 0.8);
    padding: 1vmin;
    -moz-border-radius: 0 0 2vmin 2vmin;
    -webkit-border-radius: 0 0 2vmin 2vmin;
    border-radius: 0 0 2vmin 2vmin;
    min-width: 3vmin;
    height: 3.5vmin;
    font-size: 3vmin;
    color: #FFFFFF;
    text-align: center;
}
.cellBBGMenuT > div > div > .lblQU {
    position: absolute;
    top: 0px;
    right: 3vmin;
    background: rgba(200, 0, 0, 0.8);
    padding: 1vmin;
    -moz-border-radius: 0 0 2vmin 2vmin;
    -webkit-border-radius: 0 0 2vmin 2vmin;
    border-radius: 0 0 2vmin 2vmin;
    min-width: 3vmin;
    height: 3.5vmin;
    font-size: 3vmin;
    color: #FFFFFF;
    text-align: center;
}
.cellBBGSideMenu > div > div {
    position: relative; 
    display: inherit;
    background-color: #FFFFFF;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    vertical-align: bottom; 
    width: 100%;
    height: 14vmax;
    box-shadow: 0.5vmin 0.5vmin 0.5vmin #808080;
    margin: 0.5vmin;
    opacity: var(--bbg-out-focus-opacity);
    filter: var(--bbg-out-focus-filter);
}
.cellBBGSideMenuT > div > div {
    position: relative; 
    display: inherit;
    background-color: var(--tablet-background-color);
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    vertical-align: bottom; 
    width: 100%;
    height: 12vmax;
    border-radius: 3vmin;
    margin: calc(var(--tablet-bbg-gap) / 2);
    opacity: var(--bbg-out-focus-opacity);
    filter: var(--bbg-out-focus-filter);
}
.cellBBGSideMenu > div > div > span {
    overflow: hidden;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    background: rgba(255, 255, 255, 0.6);
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
	text-overflow: ellipsis;
    text-align: center;
    font-size: 2.8vmin;
    font-weight: bold;
    color: #303030;
    padding: 0.5vmin;
    margin: auto 0px 0px 0px;
    width: 100%;
}
.cellBBGSideMenuT > div > div > span {
    overflow: hidden;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    background: var(--tablet-background-cover);
    text-shadow: var(--tablet-font-shadow);
	text-overflow: ellipsis;
    text-align: center;
    font-size: calc(var(--tablet-bbg-font-size) * 0.8);
    font-weight: bold;
    color: var(--tablet-font-color);
    padding: 0.5vmin;
    margin: auto 0px 0px 0px;
    border-radius: 0 0 3vmin 3vmin;
    width: 100%;
}
.cellBBGSideMenu > div > div > .lblQU {
    position: absolute;
    top: 0px;
    right: 1vmin;
    background: rgba(200, 0, 0, 0.8);
    padding: 0.5vmin;
    -moz-border-radius: 0 0 1.5vmin 1.5vmin;
    -webkit-border-radius: 0 0 1.5vmin 1.5vmin;
    border-radius: 0 0 1.5vmin 1.5vmin;
    min-width: 3vmin;
    height: 3.5vmin;
    font-size: 2vmin;
    color: #FFFFFF;
    text-align: center;
}
.cellBBGSideMenuT > div > div > .lblQU {
    position: absolute;
    top: 0px;
    right: 3vmin;
    background: rgba(200, 0, 0, 0.8);
    padding: 0.5vmin;
    -moz-border-radius: 0 0 1.5vmin 1.5vmin;
    -webkit-border-radius: 0 0 1.5vmin 1.5vmin;
    border-radius: 0 0 1.5vmin 1.5vmin;
    min-width: 3vmin;
    height: 3vmin;
    font-size: 2vmin;
    color: #FFFFFF;
    text-align: center;
}
.cellBBGMenuFocus {
    animation-name: aniBBGMenuFocus;
    animation-duration: 0.3s;
    opacity: 1.0!important;
	filter: alpha(opacity=100)!important;
    filter: unset!important;
}
@keyframes aniBBGMenuFocus {
    0%    {opacity: 0.7; filter: grayscale(1);}
    100%  {opacity: 1; filter: unset;}
}

.cellItemMenu {
    position: relative;
    height: calc(100% - 16vmax - 1vmin);
    width: 80vmin;
    padding: 0px;
}
.cellItemMenuT {
    position: relative;
    height: calc(100% - 16vmax - 1vmin);
    width: var(--tablet-item-menu-width); /* PP230524 for top menu */
    padding: 0px;
}

.cellPopupImage > div > imgfra {
    width: calc(100vw - 1vmin);
	/*height: 60%;*/
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    background-color: #FFFFFF;
    margin: 5% 10%;	/*PP240430*/
}
.cellPopupImage > div > imgfra > img {
    max-width: 100%;
    max-height: 100%;
}
.cellPopupImageT > div > imgfra {
    width: calc(50vw - 1vmin);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.cellPopupImageT > div > imgfra > img {
    max-width: 100%;
    max-height: 100%;
    background-color: var(--tablet-background-color);
    border-radius: 3vmin;
}
.cellPopupImage > div > txtL {
    overflow: auto;
    display: block;
    margin: 1vmin;
    width: calc(50% - 2vmin);
    height: calc(40% - 2vmin);
    font-size: 3vmin;
    word-break: break-word;
    color: #303030;
    text-align: justify;
}

.cellPopupImageT > div > txtL {
    overflow: auto;
    position: absolute;
    display: block;
    margin: 1vmin;
    width: calc(22vw - 3vmin);
    height: calc(100% - 3vmin);
    font-size: 3vmin;
    word-break: break-word;
    color: var(--tablet-menu-focus-font-color);
    text-shadow: var(--tablet-font-shadow);
    text-align: justify;
}
.cellPopupImage > div > txtR {
    overflow: auto;
    display: block;
    margin: 1vmin;
    right: 0;
    text-align: right;
    width: calc(50% - 2vmin);
    height: calc(40% - 2vmin);
    font-size: 3vmin;
    word-break: break-word;
    color: #303030;
    text-align: justify;
}
.cellPopupImageT > div > txtR {
    overflow: auto;
    position: absolute;
    display: block;
    margin: 1vmin;
    right: 0;
    text-align: right;
    width: calc(22vw - 3vmin);
    height: calc(100% - 3vmin);
    font-size: 3vmin;
    word-break: break-word;
    color: var(--tablet-menu-focus-font-color);
    text-shadow: var(--tablet-font-shadow);
    text-align: justify;
}
@media only screen and (orientation:portrait) {
    .cellPopupImageT > div > imgfra {
        width: calc(100vw - 1vmin);
        height: 60%;
    }
    .cellPopupImageT > div > txtL, .cellPopupImageT > div > txtR {
        width: calc(50% - 2vmin);
        height: calc(40% - 2vmin);
        position: unset;
    }
}

/*.divMenuFT {
    overflow: hidden;
    overflow-x: auto;
    position: absolute;
    top: 0px;
    width: 80vmin;
    height: 8vmax;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: stretch;
    padding: 0px;
}
.divMenuFTT {
    overflow: hidden;
    overflow-x: auto;
    position: absolute;
    top: 0px;
    width: 84vw;
    height: 8vmax;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: stretch;
    padding: 0px;
}
.divMenuFTItem {
    position: relative;
    display: inline-block;
    width: 24vmin;
    min-width: 24vmin;
    height: 8vmax;
    line-height: 8vmax;
    margin: 0px;
    padding: 0px 1vmin;
    text-align: center;
}
.divMenuFTItemT {
    position: relative;
    display: inline-block;
    width: 24vmin;
    min-width: 24vmin;
    height: 8vmax;
    line-height: 8vmax;
    margin: 0px;
    padding: 0px 1vmin;
    text-align: center;
    text-shadow: var(--tablet-font-shadow);
}
.divMenuFTItemFocus {
    position: relative; 
    display: inline-block;
    width: 24vmin;
    min-width: 24vmin;
    height: 8vmax;
    line-height: 8vmax;
    margin: 0px;
    padding: 0px 1vmin;
    text-align: center;
    background-color: #F6F5F0;
    color: #303030;
}
.divMenuFTItemFocusT {
    position: relative; 
    display: inline-block;
    width: 24vmin;
    min-width: 24vmin;
    height: 8vmax;
    line-height: 8vmax;
    margin: 0px;
    padding: 0px 1vmin;
    text-align: center;
    text-shadow: var(--tablet-font-shadow);
    color: var(--tablet-menu-focus-font-color);
    font-weight: bold;
}
.txtMenuFTItem {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-size: 2.4vmax;
}
.divMenuFTMore {
    position: absolute;
    right: 1vmin;
    top: 8vmax;
    color: var(--background-color);
    z-index: 1;
}*/

.divMenuItem {
    overflow: auto;
    position: absolute;
    /*top: calc(8vmax - 1px);*/
    top: 0px;
    width: calc(100% - 2vmin);
    /*height: calc(100% - 8vmax);*/
    height: calc(100% - 2vmin + 1px);
    background-color: #F6F5F0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    padding: 1vmin;
}
.divMenuItemT {
    overflow: auto;
    position: absolute;
    top: 0px;
    width: calc(100% - var(--tablet-menu-item-gap));
    height: calc(100% - var(--tablet-menu-item-gap) + 1px);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    padding: calc(var(--tablet-menu-item-gap) / 2);
}
.divMenuItem > div {
    position: relative;
    display: inherit;
    /* width: 36vmin; */
    width: calc((100% - 2vmin + var(--scrollbar-width)) / var(--item-menu-column) - 2vmin);
    height: var(--menu-item-height);
    margin: 1vmin;
    font-size: var(--menu-item-font-size);
}

.divMenuItemT > div {
    position: relative;
    display: inherit;
    width: calc((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-item-menu-column) - var(--tablet-menu-item-gap));
    height: calc((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-item-menu-column) + var(--menu-item-footer-height) - var(--tablet-menu-item-gap) + 1vw);    
    /* height: var(--tablet-menu-item-height); */
    margin: calc(var(--tablet-menu-item-gap) / 2);
    font-size: var(--tablet-menu-item-font-size);
}
/*@media only screen and (orientation:portrait) {
    .divMenuItemT > div {
        width: calc(33.3% - var(--tablet-menu-item-gap));
        height: calc(var(--tablet-menu-item-height) * 0.6);
    }
}*/
.divMenuItem > ft {
    width: calc(100% - 2vmin);
    /*background: linear-gradient(to bottom, transparent 60%, var(--menu-ft-background-color));*/
    color: var(--background-color);
    font-weight: bold;
    font-size: var(--menu-ft-font-size);
    padding: 1vmin;
    margin-bottom: 4vmin;
    border-width: 0px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-image-source: linear-gradient(to right, transparent, var(--background-color) 5%, transparent 80%);
    border-image-slice: 1;
}
.divMenuItemT > ft {
    width: calc(100% - 2vmin);
    background: var(--tablet-background-cover);
    font-weight: bold;
    font-size: var(--menu-ft-font-size);
    padding: 1vmin;
    /* margin: calc(var(--tablet-menu-item-gap) / 2); */
}

/* PP230524 for BYOD New Theme */
.divOrderItem1 {
    width: calc(100% - var(--menu-item-height) * 0.5 - 4vmin - 1vmax);
    height: calc(var(--menu-item-height) * 0.5 - 4vmin - var(--menu-item-header-height) * 0.8);
    margin: 2vmin 0px 0vmin 4vmin;
    background-color: rgba(255, 255, 255);
    border-radius: var(--menu-item-border-radius);
}

.cellOrderItemAdd {
    height: calc(var(--menu-item-footer-height) * 0.4 / var(--item-menu-column));
}
.cellOrderItemAddT {
    height: calc((((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-detail-item-menu-column) - var(--tablet-menu-item-gap)) / 25 * 3 + 2vmin) * 0.4 - var(--tablet-menu-item-gap));
}

.cellOrderItemEdit1 {
    position: relative;
    display: inline-block;
    height: calc(var(--menu-item-footer-height) * 0.4);
    line-height: calc(var(--menu-item-footer-height) * 0.4);
    color: #F08040;
    text-shadow: none;
    white-space: nowrap;
    font-size: calc(var(--menu-item-footer-height) * 0.4);
}

    .cellOrderItemEdit1 > span {
        position: absolute;
        display: inline-block;
        width: calc(var(--menu-item-footer-height) * 0.4);
        left: -2%;
        color: #FFFFFF;
        font-size: 50%;
    }

    .cellOrderItemEdit1 > i:nth-child(1) {
        transform: translateX(-9%);
    }

    .cellOrderItemEdit1 > i:nth-child(2) {
        transform: translateX(-31%);
    }

.cellOrderItemEditT1 {
    position: relative;
    display: inline-block;
    height: calc((((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-detail-item-menu-column) - var(--tablet-menu-item-gap)) / 25 * 3 + 2vmin) * 0.4);
    line-height: calc((((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-detail-item-menu-column) - var(--tablet-menu-item-gap)) / 25 * 3 + 2vmin) * 0.4);
    color: #F08040;
    text-shadow: none;
    white-space: nowrap;
    font-size: calc((((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-detail-item-menu-column) - var(--tablet-menu-item-gap)) / 25 * 3 + 2vmin) * 0.4);
}

    .cellOrderItemEditT1 > span {
        position: absolute;
        display: inline-block;
        width: calc((((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-detail-item-menu-column) - var(--tablet-menu-item-gap)) / 25 * 3 + 2vmin) * 0.4);
        left: -2%;
        color: #FFFFFF;
        font-size: 50%;
    }

    .cellOrderItemEditT1 > i:nth-child(1) {
        transform: translateX(-9%);
    }

    .cellOrderItemEditT1 > i:nth-child(2) {
        transform: translateX(-31%);
    }

.divOrderItemT1 {
    height: calc(100% - 4vmin - var(--menu-item-header-height) * 0.8);
    margin: 2vmin 0px 0vmin 4vmin;
    width: calc(78% - 8vmin);
}
.cellOrderItemQU1 {
    display: inline-block;
    width: calc(var(--menu-item-footer-height) * 0.4);
    height: calc(var(--menu-item-footer-height) * 0.4);
    line-height: calc(var(--menu-item-footer-height) * 0.4);
    background-color: #C00000;
    color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 4px #ffffff;
}
.cellOrderItemQUT1 {
    display: inline-block;
    width: calc((((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-detail-item-menu-column) - var(--tablet-menu-item-gap)) / 25 * 3 + 2vmin) * 0.4);
    height: calc((((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-detail-item-menu-column) - var(--tablet-menu-item-gap)) / 25 * 3 + 2vmin) * 0.4);
    line-height: calc((((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-detail-item-menu-column) - var(--tablet-menu-item-gap)) / 25 * 3 + 2vmin) * 0.4);
    background-color: #C00000;
    color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 4px #ffffff;
}
.txtOrderItem1 {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    color: #303030;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
    word-break: break-word;
}

.txtOrderItemT1 {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    color: var(--tablet-font-color);
    text-shadow: var(--tablet-font-shadow);
    word-break: break-word;
}

.txtOrderItemUP1 {
    position: absolute;
    display: block;
    bottom: 0px;
    /*width: calc(100% - 4vmin);*/
    height: calc(var(--menu-item-header-height) * 0.8);
    line-height: calc(var(--menu-item-header-height) * 0.8);
    padding: 2vmin 4vmin;
    color: #303030;
    /*background-color: rgba(255,255,255,0.3);*/
    font-size: calc(var(--menu-item-header-height) * 0.5);
    font-weight: bold;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    z-index: 1;
}

.txtOrderItemUPT1 {
    position: absolute;
    display: block;
    bottom: 0px;
    height: calc(var(--tablet-menu-item-header-height) * 0.8);
    line-height: calc(var(--tablet-menu-item-header-height) * 0.8);
    padding: 2vmin 4vmin;
    color: var(--tablet-font-color);
    /* font-size: calc(clamp(10pt, var(--tablet-menu-item-header-height) * 0.5, 14pt)); */
    font-weight: bold;
    text-shadow: var(--tablet-font-shadow);
    z-index: 1;
}

.menuItemFontSizeM, .comboTitleFontSizeS{
    font-size: 80% !important;
}

.menuItemFontSizeS {
    font-size: 64% !important;
}

.txtOrderItemFooter1 {
    position: absolute;
    display: block;
    top: calc((var(--menu-item-height) - var(--menu-item-footer-height))*0.5 - 0.5vmax);
    height: calc(var(--menu-item-footer-height)*0.5 + 0.5vmax);
    width: calc(25% + 3vmax);
    color: #303030;
    font-size: calc(var(--menu-item-footer-height) * 0.3);
    right: calc(var(--menu-item-height) * 0.5 - 1.5vmax);
}
.txtOrderItemRMM {
    word-break: break-word;
    color: #505050;
    opacity: 0.8;
    font-size: calc(var(--menu-item-font-size) * 0.8);
}

.txtOrderItemFooterT1 {
    position: absolute;
    display: block;
    /* top: calc(var(--tablet-menu-item-height) - var(--tablet-menu-item-footer-height) - 1vmax); */
    top: calc(70% + 2vmin + 2vmax / var(--tablet-item-menu-column));
    height: calc(30% - 2vmin); 
    width: calc(28% + 2vmin);
    color: var(--tablet-font-color);
    text-shadow: var(--tablet-font-shadow);
    font-size: calc((((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-detail-item-menu-column) - var(--tablet-menu-item-gap)) / 25 * 3 + 2vmin) * 0.3);
    right: 1vmin;

}

.imgOrderItem1 {
    position: absolute;
    display: inline-block;
    top: 0;
    aspect-ratio: 1;
    /* width: 28%; */
    height: calc((var(--menu-item-height) / 2 - 3vmax));
    line-height: calc(var(--menu-item-height) - var(--menu-item-footer-height) - 1vmax);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    box-shadow: var(--menu-item-shadow);
    text-align: center;
    border-radius: var(--menu-item-border-radius);
    cursor: pointer;
    margin: 2vmin;
    right: 0vmax;
}

.imgOrderItemT1 {
    position: absolute;
    display: inline-block;
    top: 0;
    width: 28%;
    aspect-ratio: 1;
    /*height: calc(var(--tablet-menu-item-height) - var(--tablet-menu-item-footer-height) - 1vmax);
    line-height: calc(var(--tablet-menu-item-height) - var(--tablet-menu-item-footer-height) - 1vmax);*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--tablet-background-color);
    text-align: center;
    border-radius: 3vmin;
    cursor: pointer;
    margin: 2vmin;
    right: 0px;
}
.divMenuItem2 {
    overflow: auto;
    position: absolute;
    /*top: calc(8vmax - 1px);*/
    top: 0px;
    width: calc(100% - 2vmin);
    /*height: calc(100% - 8vmax);*/
    height: calc(100% - 2vmin + 1px);
    background-color: #F6F5F0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    padding: 1vmin;
}
.divMenuItemT2 {
    overflow: auto;
    position: absolute;
    top: 0px;
    width: calc(100% - var(--tablet-menu-item-gap));
    height: calc(100% - var(--tablet-menu-item-gap) + 1px);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    padding: calc(var(--tablet-menu-item-gap) / 2);
}
.divMenuItem2 > div {
    position: relative;
    display: inherit;
    width: 36vmin;
    height: var(--menu-item-height);
    margin: 1vmin;
    font-size: var(--menu-item-font-size);
}
.divMenuItemT2 > div {
    position: relative;
    display: inherit;
    width: calc(25% - var(--tablet-menu-item-gap));
    height: var(--tablet-menu-item-height);
    margin: calc(var(--tablet-menu-item-gap) / 2);
    font-size: var(--tablet-menu-item-font-size);
}
@media only screen and (orientation:portrait) {
    .divMenuItemT2 > div {
        width: calc(33.3% - var(--tablet-menu-item-gap));
        height: calc(var(--tablet-menu-item-height) * 0.6);
    }
}
.divMenuItem2 > ft {
    width: calc(100% - 2vmin);
    /*background: linear-gradient(to bottom, transparent 60%, var(--menu-ft-background-color));*/
    color: var(--background-color);
    font-weight: bold;
    font-size: var(--menu-ft-font-size);
    padding: 1vmin;
    margin-bottom: 4vmin;
    border-width: 0px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-image-source: linear-gradient(to right, transparent, var(--background-color) 5%, transparent 80%);
    border-image-slice: 1;
}
.divMenuItemT2 > ft {
    width: calc(100% - 2vmin);
    background: var(--tablet-background-cover);
    font-weight: bold;
    font-size: var(--menu-ft-font-size);
    padding: 1vmin;
    /* margin: calc(var(--tablet-menu-item-gap) / 2); */
}
.divMenuItem > div1 {
    position: relative;
    display: inherit;
    /* width: 74vmin; */
    width: calc((100% - 2vmin + var(--scrollbar-width)) / var(--item-menu-column) - 2vmin);
    height: calc(var(--menu-item-height)*0.5);
    margin: 1vmin;
    font-size: var(--menu-item-font-size);
    background-color: #FFFFFF;
    box-shadow: var(--menu-item-shadow);
}
.divMenuItem > div2 {
    position: relative;
    display: inherit;
    width: 36vmin;
    height: var(--menu-item-height);
    margin: 1vmin;
    font-size: var(--menu-item-font-size);
}
.divMenuItemT > div1 {
    position: relative;
    display: inherit;
    /* width: 74vmin; */
    width: calc((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-detail-item-menu-column) - var(--tablet-menu-item-gap));
    height: calc(((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-detail-item-menu-column) - var(--tablet-menu-item-gap)) / 2.5); 
    margin: calc(var(--tablet-menu-item-gap) / 2);
    font-size: clamp(10pt,var(--menu-item-font-size),16pt);
    background-color: var(--tablet-background-cover);
    box-shadow: var(--menu-item-shadow);
}
/* PP230524 New Theme End */

.tblFrontMenu {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    padding: 0px;
    table-layout: fixed;
}
.tblTabletFrontMenu {
    position: fixed;
    width: 100%;
    height: 8vmax;
    bottom: 0;
    border-collapse: collapse;
    padding: 0px;
    table-layout: fixed;
}

/* PP230524 Front Menu Visual Update */
.cellFrontMenu {
    position: absolute;
    bottom: 0px;
    background-color: var(--background-color);
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 5vmin;
    height: 8vmax; /* PP230531 */
    z-index: 3;
    width: 100%;
    left: 0px;
}
.cellFrontMenuL {
    position: absolute;
    bottom: 0px;
    width: calc(100% / 3);
    left: 0px;
    height: 8vmax;
    background-color: var(--background-color);
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 5vmin;
}
.cellTabletFrontMenuL {
    position: absolute;
    bottom: 0px;
    width: calc(100% / 3);
    left: 0px;
    height: 8vmax;
    background-color: var(--tablet-background-color);
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 5vmin;
}
.cellFrontMenuM {
    position: absolute;
    bottom: 0px;
    left: calc(100% / 3);
    width: calc(100% / 3);
    height: 8vmax;
    background-color: var(--background-color);
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 5vmin;
}
.cellTabletFrontMenuM {
    position: absolute;
    bottom: 0px;
    left: calc(100% / 3);
    width: calc(100% / 3);
    height: 8vmax;
    background-color: var(--tablet-background-color);
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 5vmin;
}
.cellFrontMenuR {
    position: absolute;
    bottom: 0px;
    width: calc(100% / 3);
    right: 0px;
    height: 8vmax;
    background-color: var(--background-color);
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 5vmin;
}
.cellTabletFrontMenuR {
    position: absolute;
    bottom: 0px;
    width: calc(100% / 3);
    right: 0px;
    height: 8vmax;
    background-color: var(--tablet-background-color);
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 5vmin;
}
.cellFrontMenuLH {
    position: absolute;
    bottom: 0px;
    width: 50%;
    left: 0px;
    height: 8vmax;
    background-color: var(--background-color);
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 5vmin;
}
.cellTabletFrontMenuLH {
    position: absolute;
    bottom: 0px;
    width: 50%;
    left: 0px;
    height: 8vmax;
    background-color: var(--tablet-background-color);
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 5vmin;
}
.cellFrontMenuMH {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 50%;
    height: 8vmax;
    background-color: var(--background-color);
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 5vmin;
}
.cellTabletFrontMenuMH {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 50%;
    height: 8vmax;
    background-color: var(--tablet-background-color);
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 5vmin;
}
.lblFrontBack {
    position: absolute;
    font-size: 5vmin;
    padding: 0vmin 2vmin;
    left: 1vmin;
    top: 2vmin;
    z-index: 2;
}
.lblFrontComp {
    position: absolute;
    font-size: 8vmin;
    font-weight: bold;
    padding: 2vmin;
    bottom: calc(100% - 16vmax);
    width: 80%;
    z-index:2;
}
.lblFrontLang {
    position: absolute;
    font-size: 8vmin;
    padding: 0vmin 2vmin;
    right: 0px;
    top: 0px;
    z-index: 2;
}
.lblFrontTblNo {
    position: absolute;
    font-size: 4.5vmin;
    padding: 2vmin;
    right: 0px;
    bottom: calc(100% - 16vmax);
    z-index: 2;    
}
.imgFrontERUN, .imgTabletFrontERUN {
    position: absolute;
    right: 2vmin;
    /* bottom: 2vmin; */
    bottom: calc(2vmin + 8vmax);
    max-width: 20vmin;
}

.btnFrontTOU, .btnTabletFrontTOU {
    position: absolute;
    left: 3vmin;
    /* bottom: 3vmin; */
    bottom: calc(3vmin + 8vmax);
    color: #F0F0F0;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-size: 3vmin;
}
/* PP230524 Front Menu End */
.lblFrontMenu {
    display: inline-block;
    font-size: 5vmin;
    padding: 1vmin;
}
.btnFrontBillStatus {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(50% - 2vmin);
    height: calc(100% - 2vmin);
    padding: 1vmin;
    font-size: 5vmin;
}
.btnFrontBillStatus > i {
    padding-right: 3px;
    font-size: 90%;
}
.cellFrontMenuSep {
    border-left: 1px solid #FFFFFF;
}
.divFrontTOU {
    position: absolute;
    overflow: auto;
    top: 16vmax;
    left: 0vmax;
    width: calc(100% - 4vmin);
    height: calc(100% - 16vmax - 4vmin);
    padding: 2vmin;
    background: rgba(80, 80, 80, 0.8);
    font-size: 3.8vmin;
}
.divTabletTOU {
    top: 12vmax!important;
    height: calc(100% - 12vmax - 4vmin)!important;
}
.divFrontTOU > terms {
    display: block;
    text-align: justify;
}
.divFrontTOU > img {
    width: 100%;
}
.divFrontTOU > fct {
    display: block;
    text-align: center;
    font-size: 4vmin;
}
.divFrontTOU > fct > btnO {
    display: inline-block;
    margin: 2vmin;
    padding: 1vmin 2vmin;
    min-width: 20vmin;
    border: 2px solid #10A060;
    color: #10A060;
    font-weight: bold;
}
.divFrontTOU > fct > btnX {
    display: inline-block;
    margin: 2vmin;
    padding: 1vmin 2vmin;
    min-width: 20vmin;
    border: 2px solid #F08040;
    color: #F08040;
    font-weight: bold;
}

.divPaymentTOU {
    position: absolute;
    overflow: auto;
    /* PP231107
    top: 8vmax;
    width: calc(100% - 4vmin);
    height: calc(100% - 16vmax - 4vmin);
    top: 0vmax; */
    left: 0vmax;
    width: calc(100% - 4vmin); /* PP241217 */
    height: 100%;
    padding: 2vmin;
    background: rgba(255, 255, 255, 1);
    color: black;
    font-size: 3.8vmin;
    z-index: 2; /* PP230524 */
}
.divTabletPaymentTOU, .divTabletMemberTOU {
    top: 6vmax!important;
    height: calc(100% - 12vmax - 4vmin)!important;
}
.divPaymentTOU > terms {
    display: block;
    text-align: justify;
}
.divPaymentTOU > fct {
    display: block;
    text-align: center;
    font-size: 4vmin;
}
.divPaymentTOU > fct > btnO, .divMemberTOU > fct > btnO {
    display: inline-block;
    margin: 2vmin;
    padding: 1vmin 2vmin;
    min-width: 20vmin;
    border: 2px solid #10A060;
    color: #10A060;
    font-weight: bold;
}
.divPaymentTOU > fct > btnX, .divMemberTOU > fct > btnX {
    display: inline-block;
    margin: 2vmin;
    padding: 1vmin 2vmin;
    min-width: 20vmin;
    border: 2px solid #F08040;
    color: #F08040;
    font-weight: bold;
}
/*.cellPopupPN {
    font-size: 80%;
    white-space: nowrap;
    padding: 1vmax;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cellHeadline {
    white-space: nowrap;
    padding: 1vmax;
}*/
/*PP240430*/
.cellPopupTable {
    height: 10%;
}
.cellPopupPN {
    /*font-size: 3.2vmax;*/
    /*font-size: 80%; */
    font-size: 3vmin;
    white-space: nowrap;
    padding: 1vmin 3vmin;
    max-width: 80vw; /* 42vw*/
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--background-color);
    font-weight: bold;
}
.cellPopupUP {
    /*font-size: 3.2vmax;*/
    /*font-size: 80%; */
    font-size: 3vmin;
    white-space: nowrap;
    padding: 1vmin 3vmin;
    max-width: 80vw;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--background-color);
    font-weight: bold;
}
.cellHeadline {
    white-space: nowrap;
    padding: 1vmax;
}
.cellHeadlineInactive {
    white-space: nowrap;
    padding: 1vmax;
    color: #C0C0C0;
}
.cellHeadlineHL {
    white-space: nowrap;
    padding: 1vmax;
    background-color: var(--font-color);
    color: var(--background-color);
    border-radius: 2vmax;
}
.span2LnHeader {
    display: block;
    text-align: right;
    font-size: 80%;
}
.icoHighlight {
    color: #F08040;
}
.lblOrderNew {
    position: relative;
    display: inline-block;
    top: 50%;
	/* transform: translateY(-50%); */
    transform: translateY(-70%);
    width: 3.2vmax;
    height: 3.2vmax;
    line-height: 3.2vmax;
    text-align: center;
    background-color: #C00000;
    border-radius: 50%;
    box-shadow: 0 0 4px #FFFFFF;
    font-size: 80%;
}
.lblOrderNewT {
    position: relative;
    display: inline-block;
    top: 50%;
    /* transform: translateY(-50%); */
    transform: translateY(-70%);
    width: var(--tablet-toolbar-font-size);
    height: var(--tablet-toolbar-font-size);
    line-height: var(--tablet-toolbar-font-size);
    text-align: center;
    background-color: #C00000;
    border-radius: 50%;
    box-shadow: 0 0 4px #FFFFFF;
    font-size: 80%;
}


.lblFrontStatusBN {
    position: absolute;
    font-size: 6vmax;
    font-weight: bold;
    color: #303030;
    padding: 2vmax 3vmax;
}
.lblFrontStatusBN2 {
    position: absolute;
    font-size: 2vmax;
    color: var(--background-color);
    padding: 1vmax 3vmax;
    top: 8vmax;
}
.lblFrontStatusHK {
    position: absolute;
    color: var(--background-color);
    font-size: 3vmax;
    font-weight: bold;
    padding: 3vmax;
    right: 0;
}
.lblFrontStatusKSTS {
    position: absolute;
    color: var(--background-color);
    font-size: 2.6vmax;
    font-weight: bold;
    padding: 3vmax;
    right: 0;
    bottom: 0;
    text-align: right;
}
.divFrontStatusDtl {
    position: absolute;
    overflow: auto;
    top: 12vmax;
    left: 3vmax;
    width: calc(100% - 10vmax - 2px);
    height: calc(100% - 28vmax - 2px);
    border: 1px solid var(--background-color);
    padding: 2vmax;
}
.divFrontStatusDtlItem {
    position: relative;
    display: inherit;
    vertical-align: top;
    width: calc(100% - 2vmin);
    height: auto;
    min-height: 10vmax;
    padding: 1vmin;
}
.cellFrontStatusDtlItem {
    width: 80%;
    height: 100%;
    padding-right: 3vmin;
    color: #000000;
    font-size: 3.6vmax;
    vertical-align: top;
}
.cellFrontStatusDtlQU {
    position: relative;
    height: 100%;
    color: #303030;
    font-size: 3.6vmax;
    vertical-align: top;
    text-align: right;
}

.divFrontStatusSlip {
    display: block;
    width: 100%;
    height: calc(100% - 8vmax - 2px);
}

.tblFrontSetLang {
    position: relative;
    margin: auto;
    width: 80%;
    text-align: center;
    border-spacing: 3vmin;
}

.cellFrontSetLang {
    width: 100%;
    padding: 4vmin;
    vertical-align: middle;
    font-size: 8vmin;
    color: #404040;
    background-color: #FFFFFF;
    box-shadow: 0 0 2vmin var(--background-color);
}

.tblOrderMenu {
    width: 100%;
    height: 50%;
    border-spacing: 1px;
    padding: 0px;
    background-color: #FFFFFF;
}

/* RC201104 */
/*.cellDialogBtn {
    display: flex;
    justify-content: flex-end;
    padding-top: 6vmin;
}*/
.btnDialogOK {
    position: absolute;
    display: block;
    bottom: 3vmin;
    right: 3vmin;
    padding: 1vmin 2vmin;
    color: var(--dialog-color-g);
    cursor: pointer;
}
.btnDialogCNL {
    position: absolute;
    display: block;
    top: 3vmin;
    right: 3vmin;
    padding: 1vmin 2vmin;
    color: var(--dialog-color-r);
    cursor: pointer;
}

/* Payment */
.cellOrderPay {
    width: 30vmin;
    text-align: center;
    font-size: 5vmin;
    background-color: #F03030;
}
.tblPayment {
    position: relative;
    box-shadow: 0 0 4vmin var(--background-color);
    background-color: #FFFFFF;
    margin: auto;
    padding: 0;
    width: 90vmin;
    height: 80vmax;
    border-collapse: collapse;
    border-spacing: 0px;
    table-layout: fixed;
}
.divPaymentMethods {
	overflow: auto;
    margin: auto;
    padding: 0 5vmin;
    height: 65%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.divPaymentMethods > div {
    position: relative;
    display: flex;
    width: 60vw;
    height: 16vw;
    margin: 2vw;
    padding: 0.5vw;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
    /* border: 0.5vw solid transparent; PP230106*/
    border: 1px solid;
    border-radius: 3vmax;
}
.cellPaymentMethodActive {
    /* background-color: var(--menu-ico-font-color-focus); 
    border: 0.5vw solid var(--payment-table-background-color)!important; PP230106*/
    border: 1.5vw solid var(--payment-color-focus)!important;
}
.cellPaymentMethodInactive {
	opacity: 0.3;
	filter: alpha(opacity=30);
}
.cellPaymentMethodBPT {
    justify-content: center;
    align-items: center;
    font-size: 60%;
    line-height: 150%;
}
.cellPaymentMethodBPTSelected {
    justify-content: center;
    align-items: center;
    font-size: 60%;
    line-height: 150%;
    color: #FFFFFF;
    background-color: var(--payment-color-focus);
}
.cellPaymentMethod2x2 {
    margin: 6vw!important;
}
.cellPaymentMethodT {
    width: 10vmax!important;
    height: 10vmax!important;
}
.cellPaymentMethodK {
    width: 16vw !important;
    height: 16vw !important;
}
.divPaymentAmount {
	overflow: hidden;
    margin: 0.5vmin;
    padding: 1vmin 5vmin;
    height: 20%;
    text-align: center;
}
.divPaymentAmountT {
	overflow: hidden;
    margin: 0 15vw;
    padding: 2vmin;
    height: calc(20% - 4vmin);
    text-align: center;
}
.cellPaymentNATitle {
    width: 50%;
    color: #000000;
    font-size: 5vmin;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.cellPaymentNA {
    width: 50%;
    font-size: 8vmin;
    color: #000000;
    text-align: center;
    vertical-align: middle;
}
.divPaymentSelection {
    overflow: hidden;
    padding: 1vmin;
    height: calc(15% - 2vmin);
    color: #808080;
    font-size: 3vmin;
    vertical-align: middle;
    text-align: center;
}
.cellPaymentButton {
    font-size: 5vmin;
    color: var(--btn-pay-font-color);
    background-color: var(--btn-pay-background-color);
    text-align: center;
    border-radius: 3vmax;
}
.cellPaymentButtonIA {
    font-size: 5vmin;
    color: #FFFFFF;
    background-color: #C0C0C0;
    text-align: center;
}
.cellPaymentButtonCancel {
    font-size: 5vmin;
    color: var(--btn-cancel-font-color);
    background-color: var(--btn-cancel-background-color);
    text-align: center;
    width: 50%;
    border-radius: 3vmax;
}
.divPaymentInProgress {
    overflow: hidden;
    position: fixed;
    z-index: 700;
    text-align: center;
    vertical-align: middle;
    top: 0vmax;
    width: 100%;
    height: 100%;
    background: rgba(50, 50, 50, 0.8);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.cellPaymentInProgress {
    width: 100%;
    font-size: 5vmin;
    color: #72C91C;
}
.divSQBPaymentInProgress {
    overflow: hidden;
    position: fixed;
    z-index: 700;
    text-align: center;
    vertical-align: middle;
    top: 0vmax;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.imgPaymentLoading
{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -168px;
	margin-left: -178px;
}
/* Payment*/

.cellFillTable {
    width: 100%;
    height: 100%;
    padding: 0px;
}

.divOrderItem {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: var(--menu-item-border-radius);
}
.divOrderItemT {
    width: 100%;
    height: 100%;
    display: flex;	/* PP230524 Scroll Mode */
    justify-content: center;
    align-items: center;
}
.imgOrderItem {
    position: absolute;
    display: inline-block;
    top: 0;
    width: 100%;
    height: calc(var(--menu-item-height) - var(--menu-item-footer-height) - 1vmax);
    line-height: calc(var(--menu-item-height) - var(--menu-item-footer-height) - 1vmax);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    box-shadow: var(--menu-item-shadow);
    text-align: center;
    border-radius: var(--menu-item-border-radius);
    cursor: pointer;
}
.imgOrderItemT {
    position: absolute;
    display: inline-block;
    top: 0;
    width: 100%;
    /* height: calc(var(--tablet-menu-item-height) - var(--tablet-menu-item-footer-height) - 1vmax);
    line-height: calc(var(--tablet-menu-item-height) - var(--tablet-menu-item-footer-height) - 1vmax); */
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--tablet-background-color);
    text-align: center;
    border-radius: 3vmin;
    cursor: pointer;
}
/* only screen and (orientation:portrait) {
    .imgOrderItemT {
        height: calc(var(--tablet-menu-item-height) * 0.6 - var(--tablet-menu-item-footer-height) - 1vmax);
        line-height: calc(var(--tablet-menu-item-height) * 0.6 - var(--tablet-menu-item-footer-height) - 1vmax);
    }
} */
.txtOrderItem {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    color: #303030;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
    word-break: break-word;
    padding: 1vmax;
}
.txtOrderItemT {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    color: var(--tablet-font-color);
    text-shadow: var(--tablet-font-shadow);
    word-break: break-word;
    padding: 1vmax;
}

.icoOrderItemInfo {
    position: absolute;
    top: calc(var(--menu-item-header-height) * -0.25);
    right: calc(var(--menu-item-header-height) * 0.25);
    width: var(--menu-item-header-height);
    height: var(--menu-item-header-height);
    line-height: var(--menu-item-header-height);
    text-align: center;
    background-color: var(--menu-item-info-background-color);
    border-radius: var(--menu-item-info-border-radius);
    box-shadow: var(--menu-item-info-shadow);
    font-size: calc(var(--menu-item-header-height) * 0.5);
    color: var(--menu-item-info-font-color);
    cursor: pointer;
    z-index: 2;
}
.icoOrderItemInfoT {
    position: absolute;
    top: calc(var(--tablet-menu-item-header-height) * -0.25);
    right: calc(var(--tablet-menu-item-header-height) * 0.25);
    width: var(--tablet-menu-item-header-height);
    height: var(--tablet-menu-item-header-height);
    line-height: var(--tablet-menu-item-header-height);
    text-align: center;
    background-color: var(--menu-item-info-background-color);
    border-radius: var(--menu-item-info-border-radius);
    box-shadow: var(--menu-item-info-shadow);
    font-size: calc(var(--tablet-menu-item-header-height) * 0.5);
    color: var(--menu-item-info-font-color);
    cursor: pointer;
    z-index: 2;
}
.txtOrderItemUP {
    position: absolute;
    display: block;
    top: 0px;
    /*width: calc(100% - 4vmin);*/
    height: calc(var(--menu-item-header-height) * 0.8);
    line-height: calc(var(--menu-item-header-height) * 0.8);
    padding: 0px 2vmin;
    color: #303030;
    /*background-color: rgba(255,255,255,0.3);*/
    font-size: calc(var(--menu-item-header-height) * 0.5);
    font-weight: bold;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    z-index: 1;
}
.txtOrderItemUPT {
    position: absolute;
    display: block;
    top: 0px;
    height: calc(var(--tablet-menu-item-header-height) * 0.8);
    line-height: calc(var(--tablet-menu-item-header-height) * 0.8);
    padding: 0px 2vmin;
    color: var(--tablet-font-color);
    font-size: calc(var(--tablet-menu-item-header-height) * 0.5);
    font-weight: bold;
    text-shadow: var(--tablet-font-shadow);
    z-index: 1;
}
.txtOrderItemFooter {
    position: absolute;
    display: block;
    top: calc(var(--menu-item-height) - var(--menu-item-footer-height) - 1vmax);
    height: var(--menu-item-footer-height);
    width: calc(100% - 1vmax);
    color: #303030;
    font-size: calc(var(--menu-item-footer-height) * 0.6 / var(--item-menu-column));
    padding: 0.5vmax;
}

/* @media only screen and (orientation:portrait) {
    .txtOrderItemFooterT {
        top: calc(var(--tablet-menu-item-height) * 0.6 - var(--tablet-menu-item-footer-height) - 1vmax);
    }
} */
.tblOrderItemFooter {
    width: 100%;
    border-collapse: collapse;
    padding: 0px;
    table-layout: fixed;
    text-align: center;
}
.cellOrderItemQU {
    display: inline-block;
    width: calc(var(--menu-item-footer-height) * 1.2 / var(--item-menu-column));
    height: calc(var(--menu-item-footer-height) * 1.2 / var(--item-menu-column));
    line-height: calc(var(--menu-item-footer-height) * 1.2 / var(--item-menu-column));
    background-color: #C00000;
    color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 4px #ffffff;
}
.cellOrderItemEdit {
    position: relative;
    display: inline-block;
    height: calc(var(--menu-item-footer-height) * 1.2 / var(--item-menu-column));
    line-height: calc(var(--menu-item-footer-height) * 1.2 / var(--item-menu-column));
    color: #F08040;
    text-shadow: none;
    white-space: nowrap;
    font-size: calc(var(--menu-item-footer-height) * 1.2 / var(--item-menu-column));
}

/* PP230524 Tablet Mode Visual Update */
.cellOrderItemEditT {
    position: relative;
    display: inline-block;
    height: calc(var(--tablet-menu-item-footer-height) * 0.3);
    line-height: calc(var(--tablet-menu-item-footer-height) * 0.3);
    color: #F08040;
    text-shadow: none;
    white-space: nowrap;
    font-size: calc(var(--tablet-menu-item-footer-height) * 0.3);
}
.cellOrderItemEditT > span {
    position: absolute;
    display: inline-block;
    width: calc(var(--tablet-menu-item-footer-height) * 0.3);
    left: -2%;
    color: #FFFFFF;
    font-size: 50%;
}
.cellOrderItemQUT {
    display: inline-block;
    width: calc(var(--tablet-menu-item-footer-height) * 0.3);
    height: calc(var(--tablet-menu-item-footer-height) * 0.3);
    line-height: calc(var(--tablet-menu-item-footer-height) * 0.3);
    background-color: #C00000;
    color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 4px #ffffff;
}
.txtOrderItemFooterT {
    position: absolute;
    display: block;
    /* top: calc(var(--tablet-menu-item-height) - var(--tablet-menu-item-footer-height) - 1vmax); */
    top: calc((var(--tablet-item-menu-width) - var(--tablet-menu-item-gap) - var(--scrollbar-width))/ var(--tablet-item-menu-column) - var(--tablet-menu-item-gap));
    height: var(--tablet-menu-item-footer-height); 
    width: calc(100% - 1vw);
    color: var(--tablet-font-color);
    text-shadow: var(--tablet-font-shadow);
    /* font-size: calc(var(--tablet-menu-item-footer-height) * 0.3);*/
    font-size: var(--tablet-menu-item-font-size);
    padding: 0.5vw;
}
.cellOrderItemEdit > span {
    position: absolute;
    display: inline-block;
    width: calc(var(--menu-item-footer-height) * 1.2 / var(--item-menu-column));
    left: -2%;
    color: #FFFFFF;
    font-size: 50%;
}
.cellOrderItemEdit > i:nth-child(1), .cellOrderItemEditT > i:nth-child(1) {
    transform: translateX(-9%);
}
.cellOrderItemEdit > i:nth-child(2), .cellOrderItemEditT > i:nth-child(2) {
    transform: translateX(-30%);
}


@media only screen and (orientation:portrait) and (max-width: 600px){
    :root {
        --tablet-item-menu-column: 3;
		--tablet-detail-item-menu-column: 1;
    }
}
@media only screen and (orientation:landscape) and (min-width: 992px){
    :root {
        --tablet-item-menu-column: 5;
    }
}
@media only screen and (orientation:landscape) and (min-width: 1200px){
    :root {
        --tablet-item-menu-column: 6;
        --tablet-detail-item-menu-column: 3;
    }
}
.divTabletFrontTopCover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 12vmax;
    background-color: var(--tablet-background-cover);
    z-index: 0;
}

/*.lblTabletFrontTop {
    width: 20vw;
    text-align: center;
    font-size: var(--tablet-toolbar-font-size);
    padding: 1vmin;
}*/
.lblTabletFrontTop {    
    width: 20vw;
    text-align: center;
    font-size: var(--tablet-toolbar-font-size);
    position: absolute;
    top: 0px;
    left: 0px;
    height: 12vmax;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lblTabletFrontTop > i {
    font-size: 120%;
}
/*.lblTabletFrontComp {
    width: 60vw;
    text-align: center;
    font-size: var(--tablet-company-font-size);
    font-weight: bold;
    padding: 2vmin;
}*/
.lblTabletFrontComp {
    width: 60vw;
    text-align: center;
    font-size: var(--tablet-company-font-size);
    font-weight: bold;
    position: absolute;
    top: 0px;
    left: 20vw;
    height: 12vmax;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*.lblTabletFrontTblNo {
    width: 20vw;
    text-align: center;
    font-size: var(--tablet-toolbar-font-size);
    padding: 1vmin;
}*/
.lblTabletFrontTblNo {
    width: 20vw;
    text-align: center;
    font-size: var(--tablet-toolbar-font-size);
    position: absolute;
    top: 0px;
    right: 0px;
    height: 12vmax;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* PP230524 Tablet Mode Visual Update End */

.divSumHeader {
    position: relative;
    width: 100%;
    height: 6vmax;
    padding: 0px 0px 0px 2vmax;
    background-color: #F6F5F0;
    color: #303030;
    font-size: 2.5vmax;
}
.divSumHeaderT {
    position: relative;
    width: 100%;
    height: 8vmax;
    padding: 0px 0px 0px 2vmax;
    color: var(--tablet-font-color);
    text-shadow: var(--tablet-font-shadow);
    font-size: var(--tablet-toolbar-font-size);
}
.cellSumHeadline {
    white-space: nowrap;
    padding: 1vmax 3vmax;
    background-color: var(--background-color);
    color: var(--font-color);
}
/* 2vmin curve outside border */
/*.cellSumHeadline:before {
    content: '';
    position: absolute;
    top: -4vmin;
    left: -4vmin;
    width: 4vmin;
    height: 4vmin;
    border: 4vmin solid var(--background-color);
    border-bottom: 0px;
    border-left: 0px;
    border-radius: 0 75% 0 0;
}*/
.cellSumHeadlineT {
    white-space: nowrap;
    padding: 1vmax 3vmax;
    color: var(--tablet-menu-focus-font-color);
    text-shadow: var(--tablet-font-shadow);
    font-weight: bold;
}
.cellSumContent {
    overflow: hidden;
    position: relative;
    width: 100%;
    /*height: calc(100% - 30vmax);*/
    background-color: #F6F5F0;
    padding: 0px;
}
.cellSumContentT {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 0px;
}
.divSumContent {
    overflow: auto;
    position: absolute;
    top: 0px;
    width: calc(100% - 3vmin);
    height: 100%;
    display: inline-block;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    padding: 0 1.5vmin;
}
/*@-moz-document url-prefix() {
.divSumContent { 
    height: calc(100% - 30vmax);
    position: fixed; 
}
}*/

.divSumItem {
    position: relative; 
    display: inherit;
    background-color: #FFFFFF;
    box-shadow: 0 0 4px 2px #E0E0E0;
    vertical-align: top; 
    width: calc(100% - 7vmin);
    height: auto;
    min-height: 12vmax;
    margin: 3vmin 1.5vmin;
    padding: 2vmin;
    font-size: var(--summary-font-size);
}
.divSumItemT {
    position: relative; 
    display: inherit;
    background-color: #FFFFFF;
    vertical-align: top; 
    width: calc(100% - 7vmin);
    height: auto;
    min-height: 20vh;
    margin: 3vmin 1.5vmin;
    padding: 2vmin;
    font-size: var(--tablet-summary-font-size);
}
.divSumOldItem {
    position: relative; 
    display: inherit;
    box-shadow: 0 0 4px 2px #E0E0E0;
    vertical-align: top; 
    width: calc(100% - 7vmin);
    height: auto;
    min-height: 12vmax;
    margin: 3vmin 1.5vmin;
    padding: 2vmin;
    font-size: var(--summary-font-size);
}
.divSumOldItemT {
    position: relative; 
    display: inherit;
    background-color: #D0D0D0;
    vertical-align: top; 
    width: calc(100% - 7vmin);
    height: auto;
    min-height: 20vh;
    margin: 3vmin 1.5vmin;
    padding: 2vmin;
    font-size: var(--tablet-summary-font-size);
}
.divSumAdj {
    position: relative;
    display: inherit;
    width: calc(100% - 7vmin);
    margin: 3vmin 1.5vmin;
    padding: 2vmin;
    color: var(--background-color);
    font-size: calc(var(--summary-font-size) * 0.75);
    border-width: 0px;
    border-top-width: 1px;
    border-top-style: solid;
    border-image-source: linear-gradient(to right, transparent 15%, var(--background-color) 50%, transparent 85%);
    border-image-slice: 1;
}
.divSumAdjT {
    position: relative;
    display: inherit;
    width: calc(100% - 7vmin);
    margin: 3vmin 1.5vmin;
    padding: 2vmin;
    color: var(--tablet-font-color);
    text-shadow: var(--tablet-font-shadow);
    font-size: calc(var(--tablet-summary-font-size) * 0.75);
    border-width: 0px;
    border-top-width: 1px;
    border-top-style: solid;
    border-image-source: linear-gradient(to right, transparent 15%, var(--tablet-font-color) 50%, transparent 85%);
    border-image-slice: 1;
}

.cellSumAdjPrompt {
    padding: 1vmin 0;
}
.cellSumAdjValue {
    text-align: right;
}

.cellSumItem {
    width: 65%;
    height: 100%;
    padding-right: 3vmin;
    padding-bottom: 3.4vmax;
    color: #000000;
    /*font-size: 3.6vmax;*/
    vertical-align: top;
}
.icoSumItemNew {
    padding-right: 1vmin;
    opacity: 0.4;
	filter: alpha(opacity=40);
}
.lblSumItemPN {
    display: block;
}
.lblSumItemPN > dmax {
    margin-left: 2vmin;
    padding: 0.5vmin 1vmin;
    color: #FFFFFF;
    background-color: #A03030;
    font-size: 50%;
}
.lstSumItemOL {
    margin: 0;
    margin-left: 3.6vmax!important;
    padding-top: 0.5vmax;
}
.lblSumItemRMM {
    display: block;
    color: #808080;
    font-size: 60%;
    word-break: break-word;
}
.lblSumComboItem {
    display: block;
    padding-top: 0.5vmax;
    color: #505050;
    font-size: 80%;
}
.lblSumComboItemRMM {
    display: block;
    color: #808080;
    font-size: 60%;
    word-break: break-word;
}
.lblSumItemOT {
    position: absolute;
    display: block;
    bottom: 1.2vmax;
    color: #A0A0A0;
    font-size: 60%;
}
/*RC191111*/
.cellSumItemInfo {
    position: relative;
    height: 100%;
    color: #303030;
    /*font-size: 3.6vmax;*/
    vertical-align: top;
    text-align: right;
}
.cellSumItemInfoBtn {
    width: 100%;
    /*display: block;*/
    display: flex;
    justify-content: space-between;
    text-align: right;
    /*font-size: 3.2vmax;*/
    font-size: 90%;
    white-space: nowrap;
}
.cellSumItemModifyLock {
    position: relative;
    display: block;
    text-align: right;
    white-space: nowrap;
    padding: 1vmin;
    font-size: 80%;
    color: #800000;
    z-index: 1;
}
.btnSumItemInfoM {
    display: inline-block;
    padding: 1vmin 0;
    color: #A0A0A0;
    text-align: center;
    width: 29%;
}
.btnSumItemInfoR {
    display: inline-block;
    padding: 1vmin 0;
    color: #FF3030;
    text-align: center;
    width: 29%;
}
.btnSumItemInfoX {
    display: inline-block;
    padding: 1vmin 0;
    color: #F0F0F0;
    text-align: center;
    width: 29%;
}
.btnSumItemInfoO {
    display: inline-block;
    padding: 1vmin 0;
    color: #F08040;
    text-align: center;
    width: 29%;
}

@keyframes aniSumItemCancel {
    0%    {transform: translateX(0%); opacity: 1;}
    100%  {transform: translateX(-120%); opacity: 0;}
}
.cellSumItemCancel {
    animation-name: aniSumItemCancel;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    transform: translateX(-120%);
}

@keyframes aniUnlockProgress {
    0%    {width: 0%;}
    100%  {width: 100%;}
}
.cellSumItemModifyLockBG{
    position: absolute;
    display: block;
    width: 0%;
    height: 100%;
    background: #FFD0D0;
    animation-name: aniUnlockProgress;
    animation-duration: 2s;
    animation-timing-function: linear;
}

.cellReviewContent {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0px;
    background-color: #FFFFFF;
    display: block;
    overflow: auto;
}

.divReviewTableName {
    position: relative;
    width: 100%;
    height: 20vh;
    text-align: center;
    font-size: 8vh;
    font-weight: bold;
    color: #303030;
}
.divReviewTableName2 {
    position: relative;
    display: block;
    top: -5vh;
    width: 100%;
    height: 0px;
    text-align: center;
    font-size: 2.4vh;
    color: #A0A0A0;
}

.divReviewContent {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0px;
    color: #90A060;
    text-align: center;
    vertical-align: initial;
    font-size: 3.4vmax;
    font-weight: bold;
    line-height: 5vmax;
}
.icoReviewContent {
    display: block;
    font-size: 250%;
    padding: 3vmax;
}
.txtReviewContent {
    display: block;
}
.imgReviewQRCode {
    display: block;
    margin: auto;
    padding: 1vmax;
}
@media only screen and (orientation:landscape) {
    .divReviewContent {
        vertical-align: middle;
    }
    .icoReviewContent {
        display: inline-block;
        font-size: 250%;
        padding: 3vmax;
        vertical-align: middle;
    }
    .txtReviewContent {
        display: inline-block;
        vertical-align: middle;
    }
    .imgReviewQRCode {
        display: inline-block;
        padding: 1vmax;
        margin: 0 3vmax;
        vertical-align: middle;
        max-width: 18vw;
    }
}

.divReviewFunction {
    position: relative;
    width: 100%;
    height: 10vh;
    padding: 4vh 10vw;
}

.btnReviewBill, .btnReviewExit {
    width: 50%;
    background-color: var(--background-color);
    text-align: center;
    font-size: 3.4vh;
}

.divReviewBill {
    overflow: auto;
    position: relative;
    /*background-color: #FFFFFF;*/
    margin: auto;
    padding: 0px;
    width: calc(100% - 12vmin);
    height: calc(100% - 12vmin);
}
.tblReviewBill {
    position: relative;
    max-width: 100%;
    /*min-width: 80%;*/
    border-collapse: collapse;
}
.imgReviewBill {
    width: 100%;
}

.divReviewBillCover {
    position: absolute;
    display: block;
    top: 0px;
    left: 1px;
    width: calc(100% - 16vmin - 2px);
    text-align: center;
    padding: 8vmin;
    font-size: 6vmin;
    color: var(--dialog-color-r);
    background-color: rgba(255,255,255,0.8);
}

.divMemberContent {
    overflow: auto;
    position: absolute;
    width: calc(100% - 4vmin - var(--scrollbar-width));
    height: calc(100% - 5vmin - 8vmax - 4px);
    padding: 2vmin;
    background-color: #FFFFFF;
    color: #303030;
    font-size: 4.6vmin;
}
.tblMemberContent {
    position: relative;
    width: 100%;
    height: 100%;
    border-spacing: 2vmin;
    padding: 0px;
}
.tblMemberContent td {
    position: relative;
}
.divMemberDelivery {
    position: absolute;
    right: 2vmin;
    color: #808080;
    font-size: 80%;
}
.txtMemberLong {
    font-family: var(--font);
    font-size: inherit;
    padding: 1vmin;
    width: calc(100% - 2vmin - 2px);
    border: 1px solid #C0C0C0;
}
.txtMemberShort {
    font-family: var(--font);
    font-size: inherit;
    padding: 1vmin;
    width: calc(100% - 2vmin - 2px);
    border: 1px solid #C0C0C0;
}

.txtMemberwIcon {
    font-family: var(--font);
    font-size: inherit;
    padding: 1vmin;
    width: calc(100% - 4vmin - 31px);
    border: 1px solid #C0C0C0;
}

.txtMemberTelPrefix {
    width: 20vmin;
    margin-right: 1px;
    padding: calc(1vmin - 1px);
    display: none;
}
.txtMemberTel {
    width: calc(100% - 22vmin - 3px);
}
.cellTLCC {
    display: inline-block;
    width: 20vmin;
}
.cellTLCC > select {
    width: 18vmin;
    padding: 1vmin;
    font-size: inherit;
    border: 1px solid #C0C0C0;
}
.btnMemberVCode {
    display: block;
    font-family: var(--font);
    font-size: initial;
    width: 28vmin;
    height: 100%;
    border: 1px solid #ECF0DF;
    background-color: #77933C;
    color: #F0F0F0;
    text-align: center;
    padding: 1vmin;
}
.btnMemberVCodeInactive {
    display: block;
    font-family: var(--font);
    font-size: initial;
    width: 28vmin;
    height: 100%;
    border: 1px solid #ECF0DF;
    background-color: #77933C;
    color: #F0F0F0;
    text-align: center;
    padding: 1vmin;
    opacity: 0.4;
    filter: alpha(opacity=40);
}
.txtMemberAddress {
    font-family: var(--font);
    font-size: inherit;
    padding: 1vmin;
    width: calc(100% - 2vmin - 2px);
    height: 20vmin;
    border: 1px solid #C0C0C0;
    resize: none;
}
.txtMemberLong::placeholder, .txtMemberShort::placeholder, .txtMemberAddress::placeholder {
    color: #B0B0B0!important;
}
.icoMemberRequired {
    position: absolute;
    font-size: 64%;
    color: #FF0000;
    top: 0;
    right: 0;
    line-height: 4.6vmin!important;
    padding: 2vmin;
    opacity: 0.4;
    filter: alpha(opacity=40);
}
.cellMemberRequired {
    font-size: 80%;
    color: #F06060;
    padding: 2vmin;
}
.cellMemberButton {
    text-align: center;
    padding: 2vmin;
}

.cellMemberButton span {
    background-color: var(--btn-submit-background-color);
    color: var(--btn-submit-font-color);
    padding: 1vmin 10vmin;
    margin: 0 0 0 6vmin;
    border-radius: 5vmin;
}
.btnMemberRed {
    background-color: var(--btn-back-background-color) !important;
    color: var(--btn-back-font-color) !important;
    margin: 0 6vmin 0 0 !important;
}
.btnMemberDate {
    display: inline-block;
    font-size: 80%;
    background-color: #77933C;
    color: var(--font-color);
    padding: 1vmin 2vmin;
}
.lblMemberDate {
    font-size: 80%;
    padding: 1vmin;
}
.cellMemberVCode {
    width: 28vmin;
    font-size: 50%;
}

/* Combo */
.divComboHeader {
    position: relative;
    background-color: #F0F0F0;
    width: 100%;
    height: 8vmax;
    padding: 0px 2vmin;
    font-size: 3.2vmax;
}
.divComboFooter {
    position: relative;
    background-color: #F0F0F0;
    width: 100%;
    height: 8vmax;
    padding: 0px 2vmin;
    box-shadow: 0 0 8px #808080;
    font-size: 3.2vmax;
}
.divComboHeaderT {
    position: relative;
    background-color: #F0F0F0;
    width: 100%;
    height: 8vmax;
    padding: 0px 2vmin;
    font-size: var(--tablet-toolbar-font-size);
}
.divComboFooterT {
    position: relative;
    background-color: #F0F0F0;
    width: 100%;
    height: 8vmax;
    padding: 0px 2vmin;
    box-shadow: 0 0 8px #808080;
    font-size: var(--tablet-toolbar-font-size);
}

.tblCombo {
    position: relative;
    margin: auto;
    padding: 0px;
    width: calc(100% - 5vmin);
    height: calc(100% - 5vmin);
    border-spacing: 2px;
    color: #303030;
}
.cellComboTitle {
    position: relative;
    width: 100%;
    height: 16vmax;
    padding: 4vmin;
    font-size: var(--combo-title-font-size);
}
.cellComboBody {
    position: absolute;
    width: 100%;
    /*height: 100%;
    height: calc(100vh - 32vmax - 8vmin - 5vmin - 8px);*/
    overflow: auto; 
    padding: 0px;
}
@media only screen and (orientation:landscape) {
    .cellComboTitle {
        width: 50%;
        height: unset;
        padding: 2vmin;
        background-color: #FFFFFF;
        z-index: 1;
    }
    .cellComboBody {
        width: 50%;
        /*height: calc(100vh - 16vmax - 5vmin - 8px);*/
    }
}

.divComboGPBorder {
    border-bottom: 1px solid #808080;
}

@keyframes aniSlideOutL {
    0%    {transform: translateX(0%); opacity: 1;}
    100%  {transform: translateX(-100%); opacity: 0;}
}
.divSlideOutL {
    position: absolute;
    top: 0;
    animation-name: aniSlideOutL;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    transform: translateX(-100%);
}
@keyframes aniSlideOutR {
    0%    {transform: translateX(0%); opacity: 1;}
    100%  {transform: translateX(100%); opacity: 0;}
}
.divSlideOutR {
    position: absolute;
    top: 0;
    animation-name: aniSlideOutR;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    transform: translateX(100%);
}
@keyframes aniSlideInL {
    0%    {transform: translateX(100%); opacity: 0;}
    100%  {transform: translateX(0%); opacity: 1;}
}
.divSlideInL {
    position: absolute;
    top: 0;
    animation-name: aniSlideInL;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}
@keyframes aniSlideInR {
    0%    {transform: translateX(-100%); opacity: 0;}
    100%  {transform: translateX(0%); opacity: 1;}
}
.divSlideInR {
    position: absolute;
    top: 0;
    animation-name: aniSlideInR;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    /*transform: translateX(0%);*/
}

@keyframes aniBlocking {
    0%    {transform: translateX(0%);}
    25%   {transform: translateX(-1vmin);}
    75%   {transform: translateX(1vmin);}
    100%  {transform: translateX(0%);}
}
.divBlocking {
    animation-name: aniBlocking;
    animation-duration: 0.1s;
    animation-iteration-count: 3;
}

@keyframes aniSlideInDn {
    0%    {transform: translateY(-120%);}
    100%  {transform: translateY(0%);}
}
.divSlideInDn {
    animation-name: aniSlideInDn;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}

@keyframes aniSlideOutUp {
    0%    {transform: translateY(0%);}
    100%  {transform: translateY(-120%);}
}
.divSlideOutUp {
    animation-name: aniSlideOutUp;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    transform: translateY(-120%);
}

.cellComboImage {
    width: 16vmax;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-right: 4vmin solid transparent;
}
@media only screen and (orientation:landscape) {
    .cellComboImage {
        width: 22vmax;
        background-size: contain;
    }
}
.cellComboSEP {
    padding: 1vmin 0px;
    font-size: var(--combo-title-font-size);
    font-weight: bold;
}
.cellComboPN {
    height: 100%;
    padding: 1vmin 0px;
    vertical-align: top;
    font-size: var(--combo-title-font-size);
    color: #808080;
}
.cellComboDesc {
    position: relative;
    width: 100%;
    /*height: 6vmax;*/
    padding-top: 2vmax;
    vertical-align: top;
    font-size: var(--combo-content-font-size);
    color: #808080;
}

.divRemarkPanel {
    position: absolute;
    display: block;
    width: 92%;
    height: 28vmax;
    top: 0px;
    left: 4%;
    background-color: #F0F0F0;
    box-shadow: 0 2px 4px #303030;
}
.txtRemarkPanel {
    font-family: var(--font);
    width: calc(100% - 10vmin);
    height: calc(100% - 10vmin);
    padding: 2vmin;
    margin: 3vmin;
    font-size: var(--combo-title-font-size);
    resize: none;
    border: none;
}

.cellComboGPSelected
{
    font-size: var(--combo-content-font-size);
    color: #585858;
    text-align: right;
    white-space: nowrap;
}


.divComboItem {
    position: relative;
    overflow: hidden;
    padding: 3vmin 0px;
    display: block;
    width: 100%;
    border-width: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-image-source: linear-gradient(to right, #808080, transparent 64%);
    border-image-slice: 1;
    cursor: pointer;
}
.divModItem
{
    position: relative;
    overflow: hidden;
    display: block;
    padding: 3vmin 1vmin;
    width: calc(100% - 1vmin);
    border-width: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-image-source: linear-gradient(to right, #808080, transparent 64%);
    border-image-slice: 1;
    cursor: pointer;
}
.divModItemSelected
{
    position: relative;
    overflow: hidden;
    display: block;
    padding: 4vmin 1vmin;
    width: calc(100% - 1vmin);
    background-color: #FDEADB;
    border-width: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-image-source: linear-gradient(to right, #808080, transparent 64%);
    border-image-slice: 1;
    cursor: pointer;
}

.btnComboItem
{
    display: inline-block;
    width: calc(100% - (var(--combo-title-font-size) * 6));
}
.lstComboItemOL {
    margin: 0;
    margin-left: var(--combo-title-font-size)!important;
    padding-top: 0.5vmax;
}
.lblComboItemSEP {
    font-size: 70%;
    padding-left: 1vmin;
    color: #808080;
}
.divComboItemQU {
    position: absolute;
    display: inline-block;
    width: calc(var(--combo-title-font-size) * 6);
    height: calc(100% - 8vmin);
    right: calc(var(--combo-title-font-size) * -0.5);
}
@media only screen and (orientation:landscape) {
    .divComboItemQU {
        width: calc(var(--combo-title-font-size) * 9);
    }
}
.tblComboItemQU {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    padding: 0px;
    table-layout: fixed;
    text-align: center;
}
.btnComboItemInactive {
    color: #F0F0F0;
}

.cellComboInfoChangeQU
{
    width: var(--combo-title-font-size);
    font-size: var(--combo-title-font-size);
    color: #585858;
    padding: 3vh 4px;
    text-align: center;
    cursor: pointer;
}

.cellComboItemQU {
    display: inline-block;
    width: calc(var(--combo-title-font-size) * 1.4);
    height: calc(var(--combo-title-font-size) * 1.4);
    line-height: calc(var(--combo-title-font-size) * 1.4);
    background-color: #C00000;
    color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 4px #ffffff;
    font-size: 80%;
}
.cellComboItemEdit {
    position: relative;
    display: inline-block;
    height: calc(var(--combo-title-font-size) * 1.4);
    line-height: calc(var(--combo-title-font-size) * 1.4);
    color: #F08040;
    text-shadow: none;
    white-space: nowrap;
    font-size: calc(var(--combo-title-font-size) * 1.4);
}
.cellComboItemEdit > span {
    position: absolute;
    display: inline-block;
    width: calc(var(--combo-title-font-size) * 1.4);
    left: -2%;
    color: #FFFFFF;
    font-size: 50%;
}
.cellComboItemEdit > i:nth-child(1) {
    transform: translateX(-9%);
}
.cellComboItemEdit > i:nth-child(2) {
    transform: translateX(-30%);
}

.cellModQU {
    display: inline-block;
    padding: 0 1vmin;
}
.cellModMaxQU {
    display: inline-block;
    font-size: 64%;
}
.cellModQUInactive {
    color: #C0C0C0;
}

.tblLogin {
    position: relative;
    box-shadow: 0 0 4vmin var(--background-color);
    background-color: #FFFFFF;
    margin: auto;
    padding: 2vmin;
    width: 90vmin;
    min-height: 20vh;
    border-left: 4vmin solid #F08040;
    text-align: center;
}
.lblLoginTitle {
    position: relative;
    display: table-cell;
    font-size: 5vmin;
    text-align: left;
    color: #404040;
}
.btnLoginExit {
    position: absolute;
    display: inline-block;
    font-size: 6vmin;
    top: 2vmin;
    right: 4vmin;
    color: #c0c0c0;
}
.imgLogin {
    color: var(--background-color);
    font-size: 12vmin;
}
.imgMujiLogin {
    width: 30vmin;
}
.txtLoginInput {
    font-family: var(--font);
    border: 1vmin solid #E0E0E0;
    margin: 1vmin;
    padding: 1vmin 2vmin;
    width: 70%;
    height: 7vmin;
    text-align: left;
    font-weight: bold;
    font-size: 4vmin;
    color: #B0B0B0;
    cursor: text;
    outline: none;
}
.txtLoginInput::placeholder {
    color: #B0B0B0;
}
.btnLogin {
    display: inline-block;
    margin-top: 3vmin;
    margin-right: 2vmin;
    color: white;
    font-size: 5vmin;
    text-align: center;
    border: 0px solid;
    border-radius: 3vmax;
    background-color: var(--noti-background-color);
    width: calc(100% / 3 - 3vmin);
}
.btnJoinMember {
    position: relative;
    display: flex;
    margin-top: 3vmin;
    padding: 1vmin 2vmin;
    width: fit-content;
    background-color: var(--menu-ico-font-color-focus);
    font-size: 3vmin;
    font-weight: bold;
}
.btnForgetPassword {
    display: inline-block;
    padding: 2vmin;
    font-size: 2.6vmin;
    color: #505050;
    text-decoration: underline;
    cursor: pointer;
}

.divPayAtSelect {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0px;
}
.divPayAtSelect > div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6vmin 12vmin;
    padding: 4vmin;
    color: #FFFFFF;
    background-color: var(--background-color);
    font-size: 3vmax;
    font-weight: bold;
}


/* tablet mode */
.bodyTablet {
    font-family: var(--tablet-font);
    overflow: hidden;
    background-color: var(--tablet-background-color);
    color: var(--tablet-font-color);
    margin: 0;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.divTabletDialog {
    overflow: hidden;
    position: fixed;
    z-index: 900;
    text-align: center;
    vertical-align: middle;
    top: 0vmax;
    width: 100%;
    height: 100%;
    background: var(--tablet-dialog-cover);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.divTablet {
    overflow: hidden;
    margin: auto;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
}

.divTabletFrontTop {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 12vmax;
    z-index: 2;
}


.tblTabletSetLang {
    position: relative;
    margin: auto;
    width: 50%;
    text-align: center;
    border-spacing: 4vmin;
    font-size: var(--tablet-toolbar-font-size);
}
.cellTabletSetLang {
    width: 100%;
    padding: 3vmin;
    vertical-align: middle;
    font-size: 120%;
    color: #404040;
    background-color: #FFFFFF;
    box-shadow: 0 0 1vmin var(--tablet-dialog-color);
}

.cellTabletFrontMenu {
    text-align: center;
    font-size: var(--tablet-toolbar-font-size);
}
.cellTabletFrontMenu > i, .cellTabletFrontMenuM > i, .cellTabletFrontMenuR > i, .cellTabletFrontMenuMH > i {
    font-size: 120%;
}
.lblTabletFrontMenu {
    display: inline-block;
    padding: 1vmin;
}
.cellTabletFrontMenuSep {
}

/*.tblTabletLogin {
    position: relative;
    box-shadow: 0 0 2vmin var(--tablet-dialog-color);
    background-color: var(--tablet-dialog-color);
    margin: auto;
    padding: 2vmin;
    width: 60vw;
    min-height: 20vh;
    border-left: 4vmin solid #F08040;
    text-align: center;
}
.lblTabletLoginTitle {
    position: relative;
    display: table-cell;
    font-size: 4vmin;
    text-align: left;
    color: var(--tablet-font-color);
}
.btnTabletLoginExit {
    position: absolute;
    display: inline-block;
    font-size: 5vmin;
    top: 2vmin;
    right: 4vmin;
    color: var(--tablet-font-color);
}
.imgTabletLogin {
    color: var(--tablet-font-color);
    font-size: 10vmin;
}
.txtTabletLoginInput {
    font-family: var(--font);
    margin: 1vmin;
    padding: 1vmin 2vmin;
    width: 70%;
    height: 6vmin;
    text-align: left;
    font-weight: bold;
    font-size: 4vmin;
    color: #B0B0B0;
    cursor: text;
    outline: none;
}
.txtTabletLoginInput::placeholder {
    color: #C0C0C0;
}
.btnTabletLogin {
    position: relative;
    display: inline-block;
    margin-top: 3vmin;
    padding: 0 1vmin;
    color: var(--tablet-font-color);
    font-size: 5vmin;
}*/

/*.rowTabletMenu {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--tablet-background-color);
}*/

/*PP230524 EShop Update */
.background-mask {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.2;
    z-index: 2;
}
.eShopLeftMenu {
    position: absolute;
    height: 100%;
    left: 0px;
    width: 38.2%;
    z-index: 3;
    background-color: white;
    animation-name: aniSlideInRight;
    animation-duration: 0.5s;
}

@keyframes aniSlideInRight {
    0%    {transform: translateX(-120%);}
    100%  {transform: translateX(0%);}
}

.eShopRightMenu {
    position: absolute;
    height: 100%;
    right: 0px;
    width: 61.8%;
    z-index: 3;
    background-color: #FFFFFF;
    animation-name: aniSlideInLeft;
    animation-duration: 0.5s;
}

@keyframes aniSlideInLeft {
    0%    {transform: translateX(120%);}
    100%  {transform: translateX(0%);}
}

.headlineLogo{
    height: 6vmax;
    aspect-ratio: 2;
    padding: 0 1vmax;
}

.rightMenuBtn{
    width: 20vmax;
    background-color: lightgrey;
    text-align: center;
    height: 4vmax;
    line-height: 4vmax;
    border-radius: 2vmax;
    margin: 0 2vmax;
}

.rightMenuBtnDiv{
    display: flex;
    height: 16vmax;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

.rightMenuFooterDiv{
    display: flex;
    height: 8vmax;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.rightMenuFooter{
    height:24vmax;
    width:100%;
    color:black;
    background-color: #F6F5F0;
}

.rightMenuHeader{
    height:6vmax;
    width:100%;
    color: black;
    padding: 1vmax;
}

.rightMenuHeaderDiv{
    border-width: 2px;
    border-image-source: linear-gradient(to right, transparent, black 5%, transparent 80%); 
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-image-slice: 1;
}

.cellRightMenuContent{
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 0px;
}
/*PP230524 EShop Update End */


/* PP230524 Combo Update */
.divComboBody {
    position: relative;
    width: 100%;
    /*height: inherit;*/
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.divComboGP {
    position: relative;
	overflow: hidden;
    top: 0px;
    width: calc(100% - 8vmin);
    height: calc(var(--combo-title-font-size) * 2);
    padding: 0px 4vmin;
    font-size: var(--combo-title-font-size);
    color: var(--background-color);
}
.divComboPool {
    position: relative;
    overflow: auto;
    /*top: calc(var(--combo-title-font-size) * 2);*/
    width: calc(100% - 8vmin);
    /*height: calc(100% - var(--combo-title-font-size) - var(--combo-title-font-size));*/
    margin: 0 4vmin 2vmin 4vmin;
    font-size: var(--combo-title-font-size);
    /*border-top: 1px solid;*/
}
.width-80{
    width: 80%;
}

.width-60{
    width: 64%;
}
.ptDGPSelected {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    width: 4vmin;
    border-radius: 50%;
    background-color: rgba(0,0,0,0);
    color: rgba(0,0,0,0);
    border: 1px solid;
    border-color: var(--background-color);
    transform: translateX(-1vmin);
    font-size: 2vmin;
}
.ptDGPMissing {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    width: 4vmin;
    border-radius: 50%;
    background-color: var(--background-color);
    color: #FFFFFF;
    border: 1px solid;
    border-color: var(--background-color);
    transform: translateX(-1vmin);
    font-size: 2vmin;
}
.cellComboArrow {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    width: 4vmin;
    color: var(--background-color);
    transform: translateX(1vmin);
}
.cellComboItemEmpty {
    border-radius: 50%;
    border-color: #F08040 !important;
    border: 1px solid;
    height: var(--combo-content-font-size);
    aspect-ratio: 1;
    background-color: rgba(0,0,0,0);
    display: inline-block;
}
.cellComboItemSelected {
    border-radius: 50%;
    border-color: #F08040 !important;
    border: 1px solid;
    height: var(--combo-content-font-size);
    aspect-ratio: 1;
    background-color: #F08040;
    display: inline-block;
}
/* PP230524 Combo Update End */
   
.divReviewContent > comactbtn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
    width: 100%;
}
.divReviewContent > comactbtn > span {
    background-color: var(--dialog-color-g);
    color: #FFFFFF;
    padding: 0.5vmin 3vmin;
    border-radius: 1vmin;
    box-shadow: 0px 0px 4px #A0A0A0;
    font-size: 50%;
    cursor: pointer;
}

.divNoti {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: calc(100% - 16vmax);
    top: 16vmax;
    left: 0px;
    background-color: var(--noti-background-color);
    font-size: 2.6vmax;
    text-align: center;
    z-index: 100;
    margin: 0% 0%;
}
.divNoti closebtn {
    position: absolute;
    top: 3vmin;
    right: 3vmin;
    font-size: 140%;
    color: #FFFFFF;
    cursor: pointer;
    z-index: 1;
}
.divNoti .slider {
    position: relative;
    overflow: auto;
    width: 100%;
    height: 100%;
}
.divNoti .slider .slide {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: calc(100% - 10vw);
    top: 10vw;
    left: 0px;
    float: left;
}
.divNoti .slider .slide .slidecontent {
    position: relative;
}
.divNoti .slider .slide .slidecontent idiv {
    position: absolute;
    background-size: contain;
}
.divNoti .slider .slide .slidecontent lbl {
    position: absolute;
    pointer-events: none;
}
.divNoti #slideposition {
    position: absolute;
    bottom: 3vh;
    width: 100%;
    text-align: center;
    z-index: 1;
}
.divNoti #slideposition ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.divNoti #slideposition ul li.indicator {
    display: inline-block;
    overflow: hidden;
    height: 3vw;
    width: 3vw;
    background: #808080;
    margin: 0px 1.5vw;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0px 0px 3px #F0F0F0;
    cursor: pointer;
}
.divNoti #slideposition ul li.indicator.active {
    background: #FFFFFF;
}
/*<PP240430*/
.txtHeadline {
    /*height: calc(3.5vmax - 14.4px);
    font-size: calc(3.5vmax - 14.4px);*/ 
    height: 3.5vmin;
    font-size: 3.5vmin;
}
.icoBoxHeadline {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*width: 9vmin;*/
}
.txtDialogInput {
    width: 100%;
    height: 5vmin;
    line-height: 5vmin;
    font-size: 5vmin;
}
.divSearchResult {
    height: 40vh;
    overflow: auto;
    font-size: 4vmin;
}
.tblSearchResult {
    text-align: center;
    width: 100%;
    table-layout: fixed;
}

.tblSearchResult > tbody > tr {
    text-align: center;
}

.tblSearchResult > tbody > tr > th {
    text-align: center;
    height: 4vh;
    font-size: 4vmin;
    width: 30%;
    text-overflow: ellipsis;
    overflow: auto;
}

.tblSearchResult > tbody > tr > td {
    text-align: right;
    height: 6vh;
    font-size: 4vmin;
    width: 30%;
    text-overflow: ellipsis;
    overflow: auto;
    padding: 1% 5% 1% 0%;
}

.tblSearchResult > tbody > tr > td:first-child {
    width: 70%;
    padding: 1% 0% 1% 5%;
    text-align: left;
}

.tblSearchResult > tbody > tr > th:first-child {
    width: 70%;
}
.lblFrontMember {
    position: absolute;
    font-size: 3vmin;
    padding: 2vmin;
    right: 0px;
    bottom: calc(100% - 8vmax);
    z-index: 2;
}
.cellPopupImage > div > txt {
    overflow: auto;
    display: block;
    margin: 1vmin 3vmin;
    width: calc(100% - 6vmin);
    height: calc(35% - 2vmin);
    font-size: 3vmin;
    word-break: break-word;
    color: #303030;
    text-align: justify;
}

.cellPopupImageT > div > txt {
    overflow: auto;
    position: absolute;
    display: block;
    margin: 1vmin;
    width: calc(44vw - 3vmin);
    height: calc(100% - 3vmin);
    font-size: 3vmin;
    word-break: break-word;
    color: var(--tablet-menu-focus-font-color);
    text-shadow: var(--tablet-font-shadow);
    text-align: justify;
}
.cellPopupImage > div > txtB {
    overflow: auto;
    display: block;
    margin: 1vmin 3vmin;
    width: calc(100% - 6vmin);
    height: calc(15% - 2vmin);
    font-size: 3vmin;
    word-break: break-word;
    color: #303030;
    text-align: justify;
}
.cellPopupImage > div > txtH {
    overflow: auto;
    display: block;
    margin: 0vmin 3vmin;
    width: calc(100% - 6vmin);
    height: calc(5% - 2px);
    font-size: 3vmin;
    word-break: break-word;
    color: var(--background-color);
    text-align: justify;
    font-weight: bold;
    border-width: 0px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-image-source: linear-gradient(to right, transparent, var(--background-color) 5%, transparent 80%);
    border-image-slice: 1;
}
/*PP240430>*/

.lblOrderBanner {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: var(--custom-order-banner-font-size);
    color: var(--custom-order-banner-color);
}
.lblOrderFooter {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: var(--custom-order-footer-font-size);
    color: var(--custom-order-footer-color);
}

.tblReviewMini {
    position: relative;
    margin: auto;
    padding: 0px;
    width: 90%;
    height: 40%;
    border-spacing: 2px;
}

.divXCOption {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0px;
}

.divXCOption > div {
    border-radius: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 87%;
    color: var(--background-color);
    border: solid 0.5vmax var(--background-color);
    font-size: 3vmax;
    font-weight: bold;
}

.divXCOptionImage {
    width: 100%;
    height: 70%;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
}

.noclick {
    pointer-events: none;
    filter: saturate(0) brightness(0.5);
}
/* <PP241008 */
.divScnDefSignUp {
    overflow: auto;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
    width: calc(90% - 6vmin);
    background-color: #F8F8F8;
    font-size: 3.2vmin;
    color: #303030;
    padding: 3vmin;
    z-index: 1000;
}

    .divScnDefSignUp > div {
        display: flex;
        padding: 1vmin 2px;
        width: calc(100% - 4px);
    }

    .divScnDefSignUp > title {
        position: sticky;
        display: block;
        background-color: #F8F8F8;
        top: -3vmin;
        padding-bottom: 3vmin;
        font-weight: bold;
        z-index: 1;
    }

    .divScnDefSignUp > div > lbl {
        overflow: auto;
        display: inline-flex;
        height: 100%;
        padding: 5px 7px;
    }

        .divScnDefSignUp > div > lbl > span > cap {
            color: #A0A0A0;
            padding-right: 6px;
        }

    .divScnDefSignUp > div > i {
        display: inline-flex;
        justify-content: center;
        align-items: flex-start;
        padding: 8px 6px 0 0;
        color: #808080;
    }

    .divScnDefSignUp > div > input {
        display: inline-flex;
        border: 1px solid #E0E0E0;
        width: 100%;
        padding: 6px;
        font-family: var(--font);
        font-size: inherit;
        color: #404040;
    }

    .divScnDefSignUp > div > textarea {
        display: inline-flex;
        border: 1px solid #E0E0E0;
        width: 100%;
        height: calc(100% - 12px);
        padding: 6px;
        font-family: var(--font);
        font-size: inherit;
        color: #404040;
        resize: none;
    }

        .divScnDefSignUp > div > input::placeholder, .divScnDefSignUp > div > textarea::placeholder {
            color: #A0A0A0;
        }

.icoScnDefPlus {
    padding: 8px 0 0 6px !important;
    color: #A0A0A0 !important;
    cursor: pointer;
}

.divScnDefSignUp > div > select {
    display: inline-flex;
    border: 1px solid #E0E0E0;
    width: 100%;
    padding: 5px 2px;
    font-family: var(--font);
    font-size: inherit;
    color: #404040;
}

    .divScnDefSignUp > div > select:invalid {
        color: #A0A0A0;
    }

.divScnDefSignUp > div > checkpool {
    display: inline-flex;
    flex-flow: wrap;
    width: 100%;
    height: calc(100% - 8px);
    padding: 4px;
    font-family: var(--font);
    font-size: inherit;
    color: #404040;
}

    .divScnDefSignUp > div > checkpool > cap {
        display: block;
        flex: 100%;
        padding: 2px;
        color: #A0A0A0;
    }

    .divScnDefSignUp > div > checkpool > div {
        display: flex;
        flex: 50%;
        flex-grow: inherit !important;
        align-items: baseline;
        padding: 1px 0px;
    }

.divScnDefSignUp > div > btnConfirm {
    display: block;
    width: calc(30% - 2px);
    margin: 4% 10%;
    padding: 1vmin 0;
    text-align: center;
    background-color: var(--dialog-color-g);
    color: #FFFFFF;
    border-radius: 4vmin;
    cursor: pointer;
}

    .divScnDefSignUp > div > btnConfirm > i {
        padding: 0 4px;
    }

.divScnDefSignUp > div > btnCancel {
    display: block;
    width: calc(30% - 2px);
    margin: 4% 10%;
    padding: 1vmin 0;
    text-align: center;
    background-color: var(--dialog-color-r);
    color: #FFFFFF;
    border-radius: 4vmin;
    cursor: pointer;
}

    .divScnDefSignUp > div > btnCancel > i {
        padding: 0 4px;
    }

.divScnDefSignUp > langpool {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 3vmin;
    right: 3vmin;
    font-size: 80%;
    z-index: 1;
}

    .divScnDefSignUp > langpool > span {
        display: block;
        margin-left: 2vmin;
        padding: 1vmin 2vmin;
        background-color: #A0A0A0;
        color: #FFFFFF;
        cursor: pointer;
        z-index: 1;
    }

.ScnDefDDLRequired:after {
    content: '*';
    color: #FF0000;
    position: absolute;
    margin-left: -30px;
    margin-top: 4px;
}

.XC62Required:after {
    content: '*';
    color: #FF0000;
    position: absolute;
    margin-left: -18px;
    margin-top: 4px;
}

.ui-datepicker {
    width: 70vw !important;
    font-size: 4vmin !important;
}

.mmdd .ui-datepicker-year {
    display: none;
}

.divMemberTOU {
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #303030C0;
    font-size: 3.2vmin;
    z-index: 1001;
}

    .divMemberTOU > terms {
        text-align: left;
        overflow: auto;
        width: calc(90% - 4vmin);
        max-height: 70%;
        padding: 2vmin;
        background-color: #F0F0F0;
        color: #505050;
    }
    .divMemberTOU > fct {
        display: flex;
        width: calc(90% - 4vmin);
        padding: 2vmin;
        justify-content: space-evenly;
        text-align: center;
        font-size: 4vmin;
        background-color: #F0F0F0;
    }
    .divMemberTOU > hdr {
        display: block;
        margin-bottom: 1px;
        padding: 2vmin;
        width: calc(90% - 4vmin);
        background-color: #F08040;
        text-align: center;
    }    
/* PP241008> */
/* PP241217 */
    .hKioskBtn {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
        opacity: 0;
        z-index: 9999;
    }

    .sr-3PPexit {
        align-self: flex-end;
        width: fit-content;
        margin: 3% 5% 1% 5%;
    }
    

    .div3PPPayment {
        flex-direction: column;
        justify-content:center;
        position: fixed;
        display: flex;
        z-index: 400;
        text-align: center;
        vertical-align: middle;
        top: 0vmax;
        width: 100%;
        height: 100%;
        background: rgba(80, 80, 80, 0.8);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .div3PPPaymentForm {
        padding: 0 5vw;
        width: 90vw;
        overflow: auto;
        max-height: 90vh;
    }

.divOctoScheme {
    max-height: 80vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: auto;
    padding: 10px;
    background: rgba(20, 20, 20, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.3);
    overflow: auto;
}

.tblOctoScheme {
    max-height: 80vh;
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    color: #fff;
}

.thOctoScheme {
    background: linear-gradient(to right, #00bcd4, #00838f);
}

.trOctoScheme {
    height: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.tblOctoScheme > tbody > tr > th, .tblOctoScheme > tbody > tr > td {
    padding: 10px;
}

.divMemberInput {
    display: flex;
    align-items: center;
    position: relative;
    margin: 2vmin;
}

.flexFillTable {
    flex: 1;
}